/* ============================================================
   SHOTSBYZEESHAN — About section · 3 variations
   Reuses tokens.css + main.css (grain, letterbox, .btn, .grain).
   ============================================================ */

/* ---- standalone-page chrome (comparison only) ---- */
.about-page{ min-height:100dvh; }
.vbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--letterbox) + .7rem) var(--gutter) .7rem;
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--paper-soft);
}
.vbar b{ color:var(--paper); font-weight:400; letter-spacing:.3em; }
.vbar__nav{ display:flex; gap:1.1rem; }
.vbar__nav a{ color:var(--paper-soft); transition:color .4s var(--ease-cine); }
.vbar__nav a[aria-current]{ color:var(--gold); }
.vbar__nav a:hover{ color:var(--paper); }

/* ---- shared About atoms ---- */
.a-eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--font-ui); font-weight:400; font-size:var(--fs-label);
  letter-spacing:.4em; text-transform:uppercase; color:var(--gold);
}
.a-eyebrow::before{ content:""; width:clamp(28px,4vw,54px); height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.a-eyebrow--center{ justify-content:center; }
.a-eyebrow--center::after{ content:""; width:clamp(28px,4vw,54px); height:1px; background:linear-gradient(270deg,var(--gold),transparent); }

.a-display{
  font-family:var(--font-display); font-weight:600; color:var(--paper);
  line-height:1.14; letter-spacing:.012em;
}
.a-display em{ font-style:normal; font-weight:400; color:var(--gold-bright); }

.a-body{ color:var(--paper-dim); font-weight:300; font-size:var(--fs-lead); line-height:1.7; }
.a-body + .a-body{ margin-top:1.1rem; }

.a-quote{
  font-family:var(--font-display); font-weight:400; color:var(--paper);
  line-height:1.16; letter-spacing:.01em;
}
.a-quote em{ font-style:normal; color:var(--gold-bright); }

/* stat rail */
.a-stats{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.2rem); }
.a-stat{ display:flex; flex-direction:column; gap:.4rem; }
.a-stat b{
  font-family:var(--font-display); font-weight:500; color:var(--gold-bright);
  font-size:clamp(1.5rem,1rem + 1.4vw,2.1rem); line-height:1; letter-spacing:.01em;
}
.a-stat span{
  font-family:var(--font-ui); font-weight:400; font-size:.66rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--paper-soft); max-width:16ch;
}
.a-stats--hair .a-stat{ padding-left:1.2rem; border-left:1px solid var(--line-gold); }

.a-sign{
  font-family:var(--font-display); font-weight:400; font-size:1.2rem; color:var(--paper);
  letter-spacing:.02em;
}
.a-sign span{ display:block; font-family:var(--font-ui); font-weight:400; font-size:.62rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--paper-soft); margin-top:.5rem; }

/* reveal primitives (JS toggles .is-in on section) */
.r-line{ display:block; overflow:hidden; }
.r-line > *{ display:block; transform:translateY(115%); transition:transform 1s var(--ease-expo); }
.r-up{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease-cine), transform .9s var(--ease-cine); }
.is-in .r-line > *{ transform:translateY(0); }
.is-in .r-up{ opacity:1; transform:none; }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.18s; } .d3{ transition-delay:.28s; }
.d4{ transition-delay:.38s; } .d5{ transition-delay:.48s; } .d6{ transition-delay:.58s; }

/* ============================================================
   V1 — THE PORTRAIT FRAME (editorial split)
   ============================================================ */
.about--frame{
  position:relative; min-height:100dvh; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,7rem);
  padding:calc(var(--letterbox) + 8rem) var(--gutter) calc(var(--letterbox) + 4rem);
}
.frame__media{ position:relative; }
.frame__img{
  position:relative; overflow:hidden; border:1px solid var(--line-gold);
  aspect-ratio:4/5; box-shadow:var(--shadow-print);
}
.frame__img img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
  filter:saturate(.92) brightness(.9) contrast(1.02);
  transform:scale(1.12); transition:transform 1.6s var(--ease-expo);
  will-change:transform;
}
.is-in .frame__img img{ transform:scale(1.02); }
.frame__img::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(15,22,20,.5) 100%); }
.frame__tick{ position:absolute; width:16px; height:16px; border:0 solid var(--gold); opacity:.85; z-index:2; }
.frame__tick.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.frame__tick.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.frame__cap{
  position:absolute; left:0; bottom:1.1rem; transform:translateX(-14%);
  font-family:var(--font-display); font-weight:400; color:var(--paper);
  font-size:clamp(1.6rem,1rem + 2.2vw,2.9rem); line-height:1.08; letter-spacing:.01em;
  text-shadow:0 4px 30px rgba(0,0,0,.6); z-index:3; pointer-events:none; max-width:12ch;
}
.frame__cap em{ font-style:normal; color:var(--gold-bright); }
.frame__body{ max-width:46ch; }
.frame__body .a-display{ font-size:clamp(2rem,1.2rem + 2.4vw,3.4rem); margin:1.4rem 0 1.6rem; }
.frame__body .a-stats{ margin:2.2rem 0; }
.frame__body .btn{ margin-top:.4rem; }

/* ============================================================
   V2 — THE PROCESS REEL (horizontal craft sequence)
   ============================================================ */
.about--reel{ position:relative; padding:calc(var(--letterbox) + 7rem) 0 calc(var(--letterbox) + 4rem); }
.reel__head{ padding:0 var(--gutter); max-width:1400px; margin:0 auto; }
.reel__head .a-display{ font-size:clamp(2rem,1.2rem + 3vw,3.8rem); max-width:20ch; margin-top:1.2rem; }
.reel__head .a-body{ max-width:52ch; margin-top:1.4rem; }
.reel__progress{ height:1px; background:var(--line-soft); margin:2.6rem var(--gutter) 0; position:relative; overflow:hidden; }
.reel__progress i{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  transition:right 1.2s var(--ease-cine); }
.reel__track{
  display:flex; gap:clamp(1rem,2vw,1.8rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2.4rem var(--gutter); scrollbar-width:none;
}
.reel__track::-webkit-scrollbar{ display:none; }
.reel__card{
  scroll-snap-align:start; flex:0 0 clamp(240px,26vw,340px); position:relative;
}
.reel__img{ position:relative; overflow:hidden; aspect-ratio:3/4; border:1px solid var(--line-gold); }
.reel__img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.88) contrast(1.02);
  transition:transform 1.2s var(--ease-expo); }
.reel__card:hover .reel__img img{ transform:scale(1.05); }
.reel__num{
  position:absolute; top:.6rem; left:.8rem; z-index:2;
  font-family:var(--font-display); font-weight:500; color:var(--paper);
  font-size:clamp(2.2rem,3vw,3.4rem); line-height:1; text-shadow:0 3px 20px rgba(0,0,0,.7);
}
.reel__num small{ font-size:.32em; color:var(--gold-bright); vertical-align:super; margin-left:.15em; }
.reel__meta{ margin-top:1rem; }
.reel__meta h3{ font-family:var(--font-display); font-weight:500; color:var(--paper);
  font-size:1.12rem; letter-spacing:.01em; }
.reel__meta p{ color:var(--paper-soft); font-size:.86rem; line-height:1.55; margin-top:.45rem; max-width:30ch; }
.reel__foot{ padding:1.4rem var(--gutter) 0; max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.reel__foot .a-stats{ }

/* ============================================================
   V3 — THE MANIFESTO (type-led, full-bleed backdrop)
   ============================================================ */
.about--manifesto{ position:relative; }
.mani__stage{ position:relative; min-height:100dvh; display:flex; align-items:center; overflow:hidden; }
.mani__bg{ position:absolute; inset:0; z-index:0; }
.mani__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.16); transition:transform 3s var(--ease-expo); will-change:transform;
  filter:saturate(.85) brightness(.5) contrast(1.03); }
.is-in .mani__bg img{ transform:scale(1.02); }
.mani__bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 30% 60%, rgba(15,22,20,.55) 0%, rgba(15,22,20,.86) 70%, var(--ink) 100%),
    linear-gradient(180deg, rgba(15,22,20,.7), rgba(15,22,20,.4) 40%, var(--ink)); }
.mani__inner{ position:relative; z-index:1; padding:calc(var(--letterbox) + 7rem) var(--gutter) 4rem;
  max-width:1400px; margin:0 auto; width:100%; }
.mani__title{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(2.6rem,1.2rem + 6vw,7rem); line-height:1.04; letter-spacing:.008em; max-width:16ch; }
.mani__title em{ font-style:normal; color:var(--gold-bright); }
.mani__lede{ margin-top:1.8rem; max-width:40ch; color:var(--paper-dim); font-size:var(--fs-lead);
  font-weight:300; line-height:1.65; }
.mani__scroll{ position:absolute; left:var(--gutter); bottom:2rem; z-index:1;
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-soft); }

.mani__body{ padding:clamp(4rem,9vh,7rem) var(--gutter); max-width:1400px; margin:0 auto; }
.mani__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); max-width:82ch; }
.mani__cols .a-body{ font-size:1.02rem; }
.mani__foot{ margin-top:clamp(2.6rem,6vh,4rem); display:flex; align-items:flex-end;
  justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--line-soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .about--frame{ grid-template-columns:1fr; gap:2.4rem;
    padding-top:calc(var(--letterbox) + 6rem); }
  .frame__media{ max-width:520px; }
  .frame__cap{ transform:none; left:.8rem; }
  .reel__card{ flex-basis:clamp(220px,68vw,300px); }
  .mani__cols{ grid-template-columns:1fr; gap:1.1rem; }
}
@media (max-width:560px){
  .vbar{ font-size:.58rem; letter-spacing:.2em; }
  .vbar__nav{ gap:.7rem; }
  .frame__cap{ font-size:1.5rem; }
  .a-stats{ gap:1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  .r-line > *,.r-up{ transform:none; opacity:1; transition:none; }
  .frame__img img,.mani__bg img{ transform:scale(1.02); transition:none; }
  .reel__progress i{ transition:none; }
}

/* ============================================================
   ABOUT — definitive long-form editorial page (about.html)
   ============================================================ */
.ab-wrap{ max-width:1240px; margin:0 auto; padding-inline:var(--gutter); }
.ab-sec{ padding:clamp(4.5rem,11vh,9rem) 0; position:relative; }
.ab-hair{ height:1px; background:var(--line-soft); max-width:1240px; margin:0 auto; }

.ab-img{ position:relative; overflow:hidden; border:1px solid var(--line-gold); box-shadow:var(--shadow-print); }
.ab-img img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) brightness(.9) contrast(1.02);
  transform:scale(1.06); transition:transform 1.5s var(--ease-expo); will-change:transform; }
.is-in .ab-img img{ transform:scale(1.01); }
.ab-tick{ position:absolute; width:15px; height:15px; border:0 solid var(--gold); opacity:.85; z-index:2; }
.ab-tick.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.ab-tick.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

/* 1 — OPENING (centered statement + wide band) */
.ab-open{ text-align:center; padding-top:calc(var(--letterbox) + 8rem); }
.ab-open .a-eyebrow{ justify-content:center; margin-bottom:1.4rem; }
.ab-open .a-eyebrow::after{ content:""; width:clamp(28px,4vw,54px); height:1px; background:linear-gradient(270deg,var(--gold),transparent); }
.ab-open__title{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(2.2rem,1.2rem + 3.4vw,4.4rem); line-height:1.13; letter-spacing:.012em; max-width:20ch; margin:0 auto; }
.ab-open__title em{ font-style:normal; color:var(--gold-bright); }
.ab-open__lede{ max-width:60ch; margin:1.8rem auto 0; color:var(--paper-dim);
  font-size:var(--fs-lead); font-weight:300; line-height:1.7; }
.ab-band{ position:relative; margin-top:clamp(2.6rem,6vh,4.5rem); aspect-ratio:21/9; }
@media(max-width:700px){ .ab-band{ aspect-ratio:4/3; } }

/* 2 — STUDIO (split) */
.ab-studio__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,5rem); align-items:center; }
.ab-studio .ab-img{ aspect-ratio:4/5; }
.ab-studio__body h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(1.8rem,1.1rem + 2.2vw,3rem); line-height:1.14; letter-spacing:.012em; }
.ab-studio__body h2 em{ font-style:normal; color:var(--gold-bright); }
.ab-studio__body .a-body{ margin-top:1.4rem; }
.ab-quote{ font-family:var(--font-display); font-weight:400; color:var(--paper);
  font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem); line-height:1.22; letter-spacing:.01em;
  margin-top:2rem; padding-left:1.3rem; border-left:2px solid var(--gold); max-width:26ch; }
.ab-quote em{ font-style:normal; color:var(--gold-bright); }

/* 3 — PROCESS (numbered rows) */
.ab-process__head{ max-width:60ch; }
.ab-process__head h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(1.8rem,1.1rem + 2.2vw,3rem); line-height:1.14; letter-spacing:.012em; margin-top:1rem; }
.ab-process__head .a-body{ margin-top:1.3rem; }
.ab-steps{ margin-top:clamp(2.2rem,5vh,3.4rem); }
.ab-step{ display:grid; grid-template-columns:auto 92px 1fr; gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center; padding:1.5rem 0; border-top:1px solid var(--line-soft); }
.ab-step:last-child{ border-bottom:1px solid var(--line-soft); }
.ab-step__n{ font-family:var(--font-display); font-weight:500; color:var(--gold-bright);
  font-size:clamp(1.5rem,1rem + 1.3vw,2.1rem); line-height:1; }
.ab-step__thumb{ width:92px; height:116px; overflow:hidden; border:1px solid var(--line-gold); flex:none; }
.ab-step__thumb img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.9) contrast(1.02); }
.ab-step__meta h3{ font-family:var(--font-display); font-weight:500; color:var(--paper); font-size:1.15rem; letter-spacing:.01em; }
.ab-step__meta p{ color:var(--paper-soft); font-size:.9rem; line-height:1.55; margin-top:.35rem; max-width:46ch; }

/* 4 — DETAIL (image cluster) */
.ab-detail__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.ab-detail__cluster{ position:relative; padding-bottom:2.6rem; }
.ab-detail__cluster .ab-img.big{ aspect-ratio:3/4; width:80%; }
.ab-detail__cluster .ab-img.small{ position:absolute; right:0; bottom:0; width:48%; aspect-ratio:3/4; border-color:var(--gold); }
.ab-detail__body h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(1.7rem,1.1rem + 2vw,2.7rem); line-height:1.16; letter-spacing:.012em; }
.ab-detail__body .a-body{ margin-top:1.3rem; }

/* 5 — SERVICE (wide band + stats) */
.ab-service{ padding:0; }
.ab-service__band{ position:relative; min-height:clamp(460px,72vh,680px); display:flex; align-items:flex-end; overflow:hidden; }
.ab-service__band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) brightness(.5) contrast(1.03); transform:scale(1.08); will-change:transform; }
.is-in .ab-service__band > img{ transform:scale(1.01); transition:transform 2s var(--ease-expo); }
.ab-service__band::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,22,20,.35), rgba(15,22,20,.86) 80%, var(--ink)); }
.ab-service__inner{ position:relative; z-index:1; width:100%; max-width:1240px; margin:0 auto;
  padding:clamp(2.5rem,7vh,5rem) var(--gutter); }
.ab-service__inner h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(1.8rem,1.1rem + 2.4vw,3.2rem); line-height:1.14; letter-spacing:.012em; max-width:22ch; }
.ab-service__inner .a-body{ margin-top:1.3rem; max-width:58ch; color:var(--paper-dim); }
.ab-service .a-stats{ margin-top:clamp(2rem,5vh,3rem); }

/* 6 — CTA (full-bleed) */
.ab-cta{ position:relative; min-height:clamp(520px,86vh,760px); display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; }
.ab-cta > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%;
  filter:saturate(.85) brightness(.5) contrast(1.03); transform:scale(1.08); will-change:transform; }
.ab-cta.is-in > img{ transform:scale(1.01); transition:transform 2.4s var(--ease-expo); }
.ab-cta::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 50%, rgba(15,22,20,.42), rgba(15,22,20,.82) 74%, var(--ink)); }
.ab-cta__inner{ position:relative; z-index:1; padding:2rem var(--gutter); max-width:900px; }
.ab-cta__inner h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(2rem,1.2rem + 3.2vw,4.2rem); line-height:1.12; letter-spacing:.012em; }
.ab-cta__inner h2 em{ font-style:normal; color:var(--gold-bright); }
.ab-cta__inner p{ color:var(--paper-dim); font-size:var(--fs-lead); font-weight:300; margin-top:1.2rem; }
.ab-cta__inner .btn{ margin-top:2rem; }

/* responsive */
@media(max-width:860px){
  .ab-studio__grid,.ab-detail__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .ab-detail__cluster{ max-width:460px; }
  .ab-step{ grid-template-columns:auto 72px 1fr; gap:1rem; }
  .ab-step__thumb{ width:72px; height:92px; }
}
@media(max-width:560px){
  .ab-step{ grid-template-columns:auto 1fr; }
  .ab-step__thumb{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ab-img img,.ab-service__band > img,.ab-cta > img{ transform:scale(1.01); transition:none; }
}