/* ============================================================
   TOKENS
   Palette: paper / ink only. Photography carries all colour.
   ============================================================ */
:root{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --graphite:#141414;
  --g04:#f5f5f5;
  --g10:#e8e8e8;
  --g20:#d2d2d2;
  --g45:#8f8f8f;
  --g65:#5c5c5c;
  --g85:#2b2b2b;

  /* Display: tight grotesque. Editorial: serif, reserved for the voice
     of the photographer. Data: monospace, for plate metadata only. */
  --display:"Helvetica Neue",Helvetica,Inter,"Segoe UI",Arial,sans-serif;
  --editorial:"Times New Roman",Times,Georgia,"Songti SC",serif;
  --data:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;

  --m:clamp(20px,5.5vw,110px);        /* page margin */
  --gap:clamp(14px,2vw,28px);
  --rule:1px solid var(--g20);

  /* One scale, resolved for every screen. Desktop figures are the brief's.
     Nothing renders below 15px from 1000px up. */
  --t1:clamp(2.9rem,1.2rem + 6.4vw,6rem);           /* hero           46 -> 96px  */
  --t2:clamp(2.05rem,1.15rem + 2.6vw,3rem);         /* section title  33 -> 48px  */
  --t3:clamp(1.5rem,1.2rem + 1vw,1.75rem);          /* card title     24 -> 28px  */
  --lede:clamp(1.1rem,1.02rem + .4vw,1.25rem);      /* section text   18 -> 20px  */
  --body:clamp(1.06rem,1rem + .32vw,1.125rem);      /* reading        17 -> 18px  */
  --small:clamp(1rem,.95rem + .3vw,1.125rem);       /* card text      16 -> 18px  */
  --micro:clamp(.8rem,.68rem + .45vw,.9375rem);     /* labels, meta   13 -> 15px  */
  --nav:clamp(.94rem,.88rem + .3vw,1rem);           /* navigation     15 -> 16px  */
  --btn:clamp(.9375rem,.9rem + .2vw,1.0625rem);     /* buttons        15 -> 17px  */
  --cap:clamp(.9375rem,.9rem + .15vw,1rem);         /* captions       15 -> 16px  */
  --lh:1.7;

  /* Heading weight. The identity is a light grotesque, so 500 is as heavy as
     this typeface should go here; raise to 600 or 700 if you want it bolder. */
  --w-head:500;

  /* One vertical rhythm, used for every gap between text and text */
  --s1:clamp(8px,.7vw,12px);
  --s2:clamp(14px,1.2vw,20px);
  --s3:clamp(22px,1.9vw,32px);
  --s4:clamp(34px,3vw,52px);
  --s5:clamp(48px,4.5vw,80px);

  --ease:cubic-bezier(.16,.84,.34,1);
  --slow:1.15s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:var(--body);line-height:var(--lh);
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:var(--w-head);letter-spacing:-.032em;line-height:1.04}
p{margin:0}
:focus-visible{outline:1px solid currentColor;outline-offset:6px}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- primitives ---------- */
.wrap{padding-inline:var(--m)}
.sec{padding-block:clamp(72px,11vw,180px);position:relative}
.sec--flush{padding-block:0}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--dark .eyebrow-line{background:rgba(255,255,255,.22)}
.sec--tint{background:var(--g04)}

.eyebrow{
  display:flex;align-items:center;gap:18px;
  font-family:var(--data);font-size:var(--micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--g45);
  margin-bottom:var(--s5);
}
.eyebrow-line{flex:1;height:1px;background:var(--g20);max-width:180px}
.lede{
  font-size:var(--lede);line-height:1.65;
  letter-spacing:-.008em;max-width:42ch;color:var(--g65);
}
.sec--dark .lede{color:var(--g45)}
.serif{font-family:var(--editorial);font-weight:400}

/* Link with a rule that draws itself */
.link{
  display:inline-flex;align-items:center;gap:.7em;position:relative;
  font-family:var(--data);font-size:var(--btn);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding-block:.85em;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:.35em;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:left;
  transition:transform .7s var(--ease);
}
.link:hover::after,.link:focus-visible::after{transform:scaleX(.22)}
.link .arw{transition:transform .6s var(--ease)}
.link:hover .arw{transform:translateX(6px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:1em;
  border:1px solid currentColor;padding:1.05em 2.25em;
  font-family:var(--data);font-size:var(--btn);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;
}
.btn span{position:relative;z-index:1;transition:color .55s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover span{color:var(--paper)}
.sec--dark .btn:hover span,.btn--invert:hover span{color:var(--ink)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);transition-delay:var(--d,0ms)}
}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ---------- frame: the plate ---------- */
.plate{margin:0}
.plate figcaption{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
  margin-top:var(--s2);font-family:var(--data);font-size:var(--cap);
  letter-spacing:.1em;text-transform:uppercase;color:var(--g45);
}
.plate figcaption .no{color:var(--ink)}
.sec--dark .plate figcaption .no{color:var(--paper)}
.frame{display:block;position:relative;overflow:hidden;background:var(--g10)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
a.frame:hover img,.hoverable:hover .frame img{transform:scale(1.045)}
.r-16-9{aspect-ratio:16/9}
.r-3-2{aspect-ratio:3/2}
.r-4-5{aspect-ratio:4/5}
.r-1-1{aspect-ratio:1/1}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.1vw,30px) var(--m);
  color:var(--paper);mix-blend-mode:difference;
  transition:transform .6s var(--ease),opacity .4s linear,background .5s linear,color .3s linear;
}
.nav.solid{
  mix-blend-mode:normal;color:var(--ink);
  background:rgba(255,255,255,.9);backdrop-filter:blur(18px);
  border-bottom:var(--rule);
}
.nav.hide{transform:translateY(-105%);opacity:0}
/* Logo files ship white on transparent. The nav blends over the hero for automatic
   contrast; once it turns into a paper bar the mark is inverted to black. */
.brand{display:flex;align-items:center;gap:clamp(11px,1.05vw,17px);flex:0 0 auto}
.brand img{height:clamp(28px,1.35rem + 1.2vw,42px);width:auto;transition:filter .35s linear}
.nav.solid .brand img{filter:invert(1)}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand b{font-weight:500;font-size:clamp(.94rem,.86rem + .32vw,1.12rem);letter-spacing:.1em;text-transform:uppercase}
.brand i{
  font-style:normal;font-family:var(--data);font-size:var(--micro);
  letter-spacing:.2em;text-transform:uppercase;opacity:.6;
}
@media (max-width:420px){.brand i{display:none}}
body.is-locked .nav{opacity:0;pointer-events:none}
.menu-head{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2vw,28px) var(--m);
}
.menu-logo{height:clamp(28px,1.35rem + 1.2vw,42px);width:auto}
.nav-links{display:none;gap:clamp(24px,2.9vw,56px);align-items:center}
.nav-links a{
  font-family:var(--data);font-size:var(--nav);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding-block:12px;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
@media (min-width:1180px){.nav-links{display:flex}.burger{display:none}}
.burger{
  display:flex;flex-direction:column;gap:5px;padding:10px;margin:-10px;
}
.burger i{display:block;width:26px;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.menu{
  position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:var(--m);clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .8s var(--ease),visibility .8s step-end;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.menu a{
  font-size:clamp(2rem,9vw,3.4rem);letter-spacing:-.04em;
  padding-block:.18em;border-bottom:1px solid rgba(255,255,255,.12);
}
.menu-close{position:absolute;top:clamp(16px,2vw,28px);right:var(--m);font-family:var(--data);font-size:var(--micro);letter-spacing:.16em}
.menu-foot{margin-top:40px;font-family:var(--data);font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--g45);display:flex;flex-wrap:wrap;gap:20px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;background:var(--ink);color:var(--paper);overflow:hidden}
.hero-media{position:absolute;inset:-8% 0;will-change:transform}
.hero-frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* without a script the photograph is simply there; with one it settles into place */
.js .hero-frame{opacity:0;transform:scale(1.055)}
.js .hero-frame.is-on{
  opacity:1;transform:none;
  transition:opacity 2.2s var(--ease),transform 3.4s var(--ease);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.05) 42%,rgba(10,10,10,.86) 100%);
}
.hero-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--m) clamp(32px,5vw,72px);
}
.hero h1{
  font-size:var(--t1);letter-spacing:-.042em;line-height:1.02;max-width:17ch;
  text-wrap:balance;margin-bottom:clamp(20px,3vw,34px);
}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
/* CSS-driven so the headline can never be left hidden by a script */
.hero h1 .ln>span{
  display:block;transform:translateY(105%);
  animation:heroLine 1.5s var(--ease) forwards;
  animation-delay:calc(760ms + var(--d,0ms));
}
@keyframes heroLine{to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1 .ln>span{transform:none;animation:none}
}
.hero-row{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px;border-top:1px solid rgba(255,255,255,.18);padding-top:22px;
}
.hero-sub{font-family:var(--data);font-size:clamp(.9375rem,.9rem + .15vw,1rem);letter-spacing:.12em;text-transform:uppercase;color:var(--g20);max-width:40ch;line-height:1.6}
.scroll-cue{
  position:absolute;right:var(--m);bottom:clamp(32px,5vw,72px);z-index:2;
  display:none;writing-mode:vertical-rl;font-family:var(--data);
  font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g45);
}
@media (min-width:900px){.scroll-cue{display:block}}

/* ============================================================
   AUTHORITY STRIP
   ============================================================ */
.strip{border-bottom:var(--rule);padding-block:clamp(26px,3.4vw,44px)}
.strip-h{font-family:var(--data);font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;color:var(--g45);margin-bottom:18px}
.strip-list{
  display:flex;flex-wrap:wrap;gap:14px clamp(20px,3.4vw,54px);
  font-size:clamp(.9rem,1.4vw,1.15rem);letter-spacing:.08em;text-transform:uppercase;color:var(--g65);
}

/* ============================================================
   PROJECTS
   ============================================================ */
.pgrid{display:block}
.pentry{display:grid;gap:clamp(18px,2.4vw,34px);margin-bottom:clamp(56px,9vw,168px)}
.pentry:last-child{margin-bottom:0}
.pentry-meta{align-self:end}
.pentry h3{font-size:var(--t3);letter-spacing:-.02em;line-height:1.18}
.pentry .proj-meta{margin-top:12px}
.pentry .link{margin-top:clamp(10px,1.4vw,18px)}

@media (min-width:860px){
  /* three widths and two alignments, cycling, so no two entries repeat */
  .pentry{grid-template-columns:minmax(0,1fr) minmax(200px,.42fr);align-items:end;
          gap:clamp(26px,3.4vw,60px)}
  .pentry--wide  .frame{width:100%}
  .pentry--tall  {grid-template-columns:minmax(200px,.42fr) minmax(0,1fr);align-items:start}
  .pentry--tall  .pentry-meta{order:-1;align-self:start;padding-top:.4em}
  .pentry--tall  .frame{width:82%;margin-left:auto}
  .pentry--small {grid-template-columns:minmax(0,.62fr) minmax(200px,.38fr);align-items:center}
  .pentry--small .frame{width:100%}
  /* the run drifts down the page instead of marching */
  .pentry--tall{margin-left:clamp(0px,4vw,90px)}
  .pentry--small{margin-right:clamp(0px,6vw,140px)}
}
.p-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s3) var(--s4);margin-bottom:clamp(38px,5.2vw,78px)}
.p-head h2{font-size:var(--t2);max-width:22ch}
.proj{display:block;margin-bottom:clamp(56px,9vw,150px);position:relative}
.proj:last-child{margin-bottom:0}
.proj-title{font-size:var(--t3);letter-spacing:-.02em;line-height:1.18;margin-top:var(--s3);position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.6em;align-items:baseline}
.proj-title em{font-style:normal;font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g45)}
.proj-meta{
  display:flex;flex-wrap:wrap;gap:var(--s1) 30px;margin-top:var(--s2);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;color:var(--g45);
}
.proj-open{margin-top:20px}
/* editorial pairing */
.pair{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:800px){
  .pair{grid-template-columns:1fr 1fr;align-items:end}
  .pair--offset>*:last-child{transform:translateY(clamp(20px,5vw,80px))}
  .pair--wide{grid-template-columns:1.7fr 1fr}
  .proj--inset{width:min(100%,860px);margin-inline:auto}
  .proj--right{width:min(100%,720px);margin-left:auto}
}
/* full-bleed cover, used to break the rhythm on one project */
@media (min-width:0px){
  .proj--bleed{margin-inline:calc(var(--m) * -1)}
  .proj--bleed .proj-title,.proj--bleed .proj-meta,.proj--bleed .proj-open{padding-inline:var(--m)}
}

/* cursor label (desktop pointer only) */
.cursor{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:104px;height:104px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--data);font-size:var(--micro);
  letter-spacing:.18em;text-transform:uppercase;
  transform:translate(-50%,-50%) scale(0);transition:transform .45s var(--ease);
}
.cursor.on{transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* ============================================================
   STORY
   ============================================================ */
.story-grid{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr}
@media (min-width:920px){.story-grid{grid-template-columns:1fr 1fr;align-items:center}}
.pull{
  font-family:var(--editorial);font-size:clamp(1.7rem,3.6vw,3.1rem);
  line-height:1.16;letter-spacing:-.02em;text-wrap:balance;
}
.story-body{margin-top:28px;display:grid;gap:1.1em;color:var(--g45);max-width:46ch}
.story-sign{margin-top:32px;font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g65)}
.story-strip{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);margin-top:clamp(36px,6vw,90px)}
@media (max-width:640px){.story-strip{grid-template-columns:1fr}}

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba-top{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr;margin-bottom:clamp(28px,4vw,56px)}
@media (min-width:900px){.ba-top{grid-template-columns:1.1fr 1fr;align-items:end}}
.ba-stage{position:relative;transition:opacity .4s var(--ease)}
.ba-stage.fading{opacity:0}
.ba{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--graphite);
  touch-action:pan-y;cursor:ew-resize;user-select:none;
}
.ba-bar{
  display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--g45);
}
.ba-bar .dots{margin-left:auto}
.sec--dark .dot{background:rgba(255,255,255,.26)}
.sec--dark .dot.on{background:var(--paper)}
.sec--dark .q-arrows button{border-color:rgba(255,255,255,.28)}
.sec--dark .q-arrows button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ba-hint{
  position:absolute;left:50%;top:calc(50% + 52px);transform:translateX(-50%);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;opacity:.85;pointer-events:none;transition:opacity .5s linear;text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.ba.touched .ba-hint{opacity:0}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-tag{
  position:absolute;bottom:16px;font-family:var(--data);font-size:var(--micro);
  letter-spacing:.2em;text-transform:uppercase;padding:.6em 1em;
  background:rgba(10,10,10,.66);color:#fff;backdrop-filter:blur(6px);
}
.ba-tag.l{left:16px}
.ba-tag.r{right:16px}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:#fff;
  transform:translateX(-.5px);pointer-events:none;
}
.ba-knob{transition:transform .5s var(--ease);
  
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border:1px solid #fff;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(10,10,10,.28);
  backdrop-filter:blur(4px);font-family:var(--data);font-size:1rem;letter-spacing:.1em;
}
.ba-range{position:absolute;inset:auto 0 0;width:100%;opacity:0;height:44px;cursor:ew-resize}
.ba-range:focus-visible+.ba-handle .ba-knob{outline:2px solid #fff;outline-offset:4px}
.ba-notes{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);margin-top:clamp(26px,3.6vw,48px)}
@media (max-width:760px){.ba-notes{grid-template-columns:1fr}}
.note{border-top:1px solid var(--g20);padding-top:18px}
.sec--dark .note{border-color:rgba(255,255,255,.18)}
.note h3,.note h4{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);letter-spacing:-.01em;line-height:1.3;margin-bottom:var(--s2);font-weight:var(--w-head)}
.note p{font-size:var(--small);line-height:1.7;color:var(--g45)}

/* ============================================================
   VALUE
   ============================================================ */
.val-grid{display:grid;gap:0;grid-template-columns:1fr;border-top:var(--rule)}
@media (min-width:760px){.val-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.val-grid{grid-template-columns:repeat(4,1fr)}}
.val{padding:clamp(24px,3vw,40px) clamp(18px,2vw,34px);border-bottom:var(--rule)}
@media (min-width:760px){.val{border-right:var(--rule)}.val:nth-child(2n){border-right:0}}
@media (min-width:1180px){.val{border-right:var(--rule)}.val:nth-child(2n){border-right:var(--rule)}.val:nth-child(4n){border-right:0}}
.val b{display:block;width:30px;height:1px;background:var(--g20);margin-bottom:24px}
.val h3{font-size:var(--t3);letter-spacing:-.02em;line-height:1.22;margin-bottom:var(--s2);text-wrap:balance}
.val p{font-size:var(--small);line-height:1.7;color:var(--g65)}
/* ============================================================
   SERVICES
   ============================================================ */
.srv{position:relative;border-top:1px solid rgba(255,255,255,.16)}
.srv-row{
  display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,3vw,44px);
  align-items:baseline;padding:clamp(18px,2.4vw,30px) 0;
  border-bottom:1px solid rgba(255,255,255,.16);position:relative;
}
.srv-row b{font-family:var(--data);font-size:var(--micro);letter-spacing:.18em;color:var(--g65);font-weight:400}
.srv-row h3{
  font-size:clamp(1.35rem,3.4vw,2.6rem);letter-spacing:-.035em;
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.srv-row p{grid-column:2;font-size:var(--small);line-height:1.68;color:var(--g45);max-width:52ch;margin-top:12px}
@media (hover:hover) and (min-width:900px){
  .srv-row h3{transform-origin:left}
  .srv-row:hover h3{transform:translateX(18px)}
  .srv-list:hover .srv-row:not(:hover) h3{opacity:.32}
}
.srv-peek{
  position:absolute;top:0;right:0;width:min(30vw,340px);aspect-ratio:4/5;
  pointer-events:none;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);overflow:hidden;
}
.srv-peek.on{opacity:1;transform:none}
.srv-peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:1100px){.srv-peek{display:none}}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{display:grid;gap:0;grid-template-columns:1fr;border-top:var(--rule)}
@media (min-width:900px){.steps{grid-template-columns:repeat(5,1fr);border-top:0}}
.step{padding:clamp(22px,2.6vw,32px) 0;border-bottom:var(--rule)}
@media (min-width:900px){
  .step{border-top:1px solid var(--ink);border-bottom:0;padding-right:clamp(14px,2vw,30px);position:relative}
  .step::before{
    content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--ink);
    transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);transition-delay:var(--d,0ms);
  }
  .step.in::before{transform:scaleX(1)}
}
.step b{display:block;font-family:var(--data);font-size:var(--micro);letter-spacing:.16em;color:var(--g45);margin-bottom:18px;font-weight:400}
.step h3{font-size:clamp(1.2rem,1.08rem + .55vw,1.5rem);letter-spacing:-.02em;line-height:1.25;margin-bottom:var(--s2)}
.step p{font-size:var(--small);line-height:1.7;color:var(--g65);max-width:34ch}
.step i{display:block;margin-top:14px;font-style:normal;font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g45)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{position:relative;min-height:clamp(260px,32vw,360px)}
.q{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s var(--ease)}
.q.on{opacity:1;visibility:visible;position:relative}
.q blockquote{
  margin:0;font-family:var(--editorial);font-size:clamp(1.5rem,3.7vw,3rem);
  line-height:1.2;letter-spacing:-.02em;max-width:34ch;text-wrap:balance;
}
.q cite{
  display:block;margin-top:clamp(22px,3vw,40px);font-style:normal;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--g45);line-height:2;
}
.q-nav{display:flex;align-items:center;gap:20px;margin-top:clamp(24px,3vw,44px)}
.dots{display:flex;gap:10px}
.dot{width:26px;height:1px;background:var(--g20);transition:background .4s}
.dot.on{background:var(--ink)}
.q-arrows{display:flex;gap:6px;margin-left:auto}
.q-arrows button{width:46px;height:46px;border:1px solid var(--g20);display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s}
.q-arrows button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-bottom:var(--rule)}
.faq details:first-of-type{border-top:var(--rule)}
.faq summary{
  display:flex;align-items:baseline;gap:18px;cursor:pointer;list-style:none;
  padding:clamp(22px,2.6vw,34px) 0;font-size:clamp(1.2rem,1rem + 1vw,1.62rem);
  letter-spacing:-.02em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-family:var(--data);font-size:1.3rem;
  color:var(--g45);transition:transform .45s var(--ease)
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 clamp(26px,3vw,40px);max-width:64ch;color:var(--g65);font-size:var(--small);line-height:1.68}
.faq .a p+p{margin-top:.9em}

/* ============================================================
   CONTACT
   ============================================================ */
.c-grid{display:grid;gap:clamp(38px,6vw,90px);grid-template-columns:1fr}
@media (min-width:960px){.c-grid{grid-template-columns:1.05fr 1fr}}
.c-grid h2{font-size:var(--t2);max-width:19ch;text-wrap:balance}
.c-avail{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g45);
}
.c-avail i{width:6px;height:6px;border-radius:50%;background:var(--paper);display:block}
.channels{margin-top:clamp(34px,4vw,56px);display:grid;gap:0;border-top:1px solid rgba(255,255,255,.18)}
.channels a{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;
}
.channels a span:last-child{color:var(--g45);transition:color .4s,transform .5s var(--ease)}
.channels a:hover span:last-child{color:var(--paper);transform:translateX(-4px)}
form{display:grid;gap:0}
.field{position:relative;border-bottom:1px solid rgba(255,255,255,.24)}
.field label{
  position:absolute;top:16px;left:0;font-family:var(--data);font-size:var(--micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--g45);
  transition:transform .45s var(--ease),opacity .3s;pointer-events:none;
}
.field input,.field select,.field textarea{
  width:100%;background:none;border:0;color:var(--paper);font:inherit;
  padding:42px 0 16px;letter-spacing:-.01em;
}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none}
.field.filled label,.field:focus-within label{transform:translateY(-13px) scale(.9);opacity:.6}
.field:focus-within{border-color:var(--paper)}
.f-arrow{position:absolute;right:2px;top:42px;color:var(--g45);pointer-events:none;font-family:var(--data)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px}
.form-note{font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g45);max-width:30ch;line-height:1.9}
.sent{font-family:var(--data);font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--g45);padding:clamp(30px,4vw,54px) var(--m) clamp(24px,3vw,36px);border-top:1px solid rgba(255,255,255,.14)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;align-items:flex-end}
.foot-logo{width:min(70vw,520px);height:auto}
.foot-meta{display:flex;flex-wrap:wrap;gap:var(--s2) 36px;margin-top:var(--s4);font-family:var(--data);font-size:.9375rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.foot-meta span:last-child{font-size:.875rem;letter-spacing:.08em}
.to-top{font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}

/* ============================================================
   PROJECT VIEWER
   ============================================================ */
.viewer{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .85s var(--ease),visibility .85s step-end;
}
.viewer.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .85s var(--ease),visibility 0s}
.v-bar{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,1.8vw,22px) var(--m);background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:var(--rule);
}
.v-bar b{font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.v-close{display:flex;align-items:center;gap:10px;font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase}
.v-head{padding:clamp(40px,7vw,110px) var(--m) clamp(26px,4vw,50px);display:grid;gap:clamp(20px,3vw,44px)}
@media (min-width:900px){.v-head{grid-template-columns:1.3fr 1fr;align-items:end}}
.v-head h2{font-size:var(--t2);letter-spacing:-.045em;max-width:20ch}
.v-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px}
.v-facts div{border-top:1px solid var(--g20);padding-top:12px}
.v-facts dt{font-family:var(--data);font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--g45)}
.v-facts dd{margin:8px 0 0;font-size:var(--small);line-height:1.6}
.v-body{padding-inline:var(--m);max-width:62ch;color:var(--g65);display:grid;gap:1em;margin-bottom:clamp(34px,5vw,64px)}
.v-gal{padding-bottom:clamp(50px,8vw,130px)}
/* Editorial rhythm: full-bleed, within-margin, inset, offset single, or a pair.
   The engine in buildGallery() assigns these so no two neighbours repeat. */
.v-block{margin-bottom:clamp(18px,3vw,52px)}
.v-block--full{padding-inline:0;margin-bottom:clamp(26px,4.6vw,86px)}
.v-block--wide,.v-block--inset,.v-block--pair,.v-block--left,.v-block--right{padding-inline:var(--m)}
.v-block--inset .plate{width:min(100%,1120px);margin-inline:auto}
.v-block--pair{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:start}
@media (min-width:800px){.v-block--pair{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .v-block--left .plate{width:58%}
  .v-block--right .plate{width:58%;margin-left:auto}
}

/* the opening frame of a project is cropped to a cinematic band */
.v-block--lead{padding-inline:0;margin-bottom:clamp(30px,5vw,96px)}
.v-block--lead .frame{aspect-ratio:auto !important;height:min(88vh,64vw);min-height:340px}

/* a pause: the text of the project, set between two sequences of photographs */
.v-pause{
  padding-inline:var(--m);margin:clamp(40px,7vw,130px) 0 clamp(46px,8vw,140px);
}
.v-pause p{
  max-width:34ch;margin-inline:auto;text-align:center;color:var(--g65);
  font-family:var(--editorial);font-size:clamp(1.25rem,1.05rem + .95vw,2rem);
  line-height:1.42;letter-spacing:-.01em;
}
.v-pause::before,.v-pause::after{
  content:"";display:block;width:1px;height:clamp(30px,5vw,70px);
  margin:0 auto clamp(22px,3vw,40px);background:var(--g20);
}
.v-pause::after{margin:clamp(22px,3vw,40px) auto 0}

/* the sequence breathes differently after a full-bleed than after a pair */
.v-block--full + .v-block--pair,.v-block--full + .v-block--wide{margin-top:clamp(6px,1vw,18px)}
.v-next{border-top:var(--rule);padding:clamp(30px,5vw,70px) var(--m);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px}
.v-next h3{font-size:clamp(1.6rem,4vw,3rem);letter-spacing:-.04em}


/* ============================================================
   CONTINUITY
   Bridges carry one hairline through every colour change, so the
   page reads as a single scroll rather than a stack of sections.
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:65;
  transform:scaleX(0);transform-origin:left;background:#fff;
  mix-blend-mode:difference;pointer-events:none;
}
.bridge{
  position:relative;display:grid;place-items:center;
  height:clamp(160px,19vw,250px);
}
.bridge--to-ink{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 40%,#050505 100%)}
.bridge--to-paper{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 8%,var(--paper) 66%,var(--paper) 100%)}
.bridge--to-tint{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 8%,var(--g04) 66%,var(--g04) 100%)}
.bridge-line{
  position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,rgba(140,140,140,0) 0%,rgba(140,140,140,.85) 45%,rgba(140,140,140,0) 100%);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.4s var(--ease);
}
.bridge.in .bridge-line{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){.bridge-line{transform:none}}
.bridge-note{
  position:absolute;left:var(--m);max-width:24ch;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;
  text-transform:uppercase;line-height:1.85;
}
/* the note always lands on the flat part of the gradient, in the darker grey */
.bridge--to-ink .bridge-note{top:0;color:var(--g65)}
.bridge--to-paper .bridge-note,.bridge--to-tint .bridge-note{bottom:0;color:var(--g65)}
@media (min-width:900px){.bridge-note{left:calc(var(--m) + 26px)}}

/* an image that starts in one colour and finishes in the next */
.lift{margin-top:calc(-1 * clamp(70px,11vw,190px));position:relative;z-index:1}
.lift .frame{box-shadow:0 40px 90px rgba(0,0,0,.45)}
.sec--tight-top{padding-top:clamp(30px,4vw,60px)}

/* ============================================================
   MY STORY
   ============================================================ */
.story-chapter{max-width:1280px;margin-inline:auto}
.story-label{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--g45);margin-bottom:clamp(26px,4vw,54px);font-weight:400;
}
.story-open{
  font-family:var(--editorial);font-size:clamp(1.9rem,1.1rem + 3.4vw,3.7rem);
  line-height:1.18;letter-spacing:-.02em;max-width:30ch;
}
.story-open span{display:block}
.story-open .em{color:var(--paper)}
.story-open .sub{color:var(--g45);font-size:.58em;line-height:1.42;margin-top:.75em;max-width:32ch}
.story-cols{
  display:grid;gap:clamp(30px,5vw,80px);grid-template-columns:1fr;
  margin-top:clamp(46px,7vw,120px);align-items:start;
}
@media (min-width:900px){.story-cols{grid-template-columns:1fr 1fr}}
.story-p{color:var(--g45);max-width:46ch;display:grid;gap:1.3em;font-size:var(--body);line-height:var(--lh)}
.story-p strong{color:var(--paper);font-weight:400}
.story-say{
  font-family:var(--editorial);font-size:clamp(1.5rem,3.4vw,2.9rem);
  line-height:1.22;letter-spacing:-.02em;max-width:26ch;color:var(--paper);
}
.story-band{
  margin-top:clamp(50px,8vw,130px);padding-top:clamp(34px,5vw,70px);
  border-top:1px solid rgba(255,255,255,.16);
}
.story-close{display:grid;gap:.55em;margin-top:clamp(40px,6vw,90px)}
.story-close p{
  font-family:var(--editorial);font-size:clamp(1.35rem,3vw,2.5rem);
  line-height:1.22;letter-spacing:-.02em;max-width:34ch;
}
.story-close .quiet{color:var(--g65)}
.story-close .last{
  font-family:var(--display);font-size:var(--body);
  letter-spacing:.01em;line-height:1.66;color:var(--g45);max-width:48ch;margin-top:1.5em;
}
.story-sign2{
  margin-top:clamp(34px,5vw,64px);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g65);
}

/* ============================================================
   CALL TO ACTION BAND
   ============================================================ */
.cta-band{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:20px clamp(20px,4vw,60px);margin-top:clamp(40px,6vw,90px);
  padding-top:clamp(24px,3vw,40px);border-top:var(--rule);
}
.sec--dark .cta-band{border-top-color:rgba(255,255,255,.18)}
.cta-band p{font-size:clamp(1.22rem,1.05rem + .95vw,1.9rem);letter-spacing:-.02em;line-height:1.32;max-width:26ch}

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.page-head{padding:clamp(120px,16vw,220px) var(--m) clamp(36px,5vw,70px)}
.page-head h1{font-size:clamp(2.6rem,8vw,6.4rem);letter-spacing:-.05em;max-width:18ch}
.crumbs{
  display:flex;gap:10px;align-items:center;margin-bottom:clamp(20px,3vw,36px);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--g45);
}
.crumbs a:hover{color:var(--ink)}
.pcard{display:flex;flex-direction:column}
.pcard .proj-title{margin-top:clamp(14px,1.8vw,22px)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:14px 20px;font-family:var(--data);font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ============================================================
   MOBILE POLISH
   ============================================================ */
/* anchored sections must clear the fixed bar */
section[id],main[id],[id="top"]{scroll-margin-top:clamp(74px,11vw,116px)}

/* the menu must never trap its own links off-screen */
.menu{overflow-y:auto;overscroll-behavior:contain;padding-block:clamp(86px,15vh,150px)}
@media (max-height:720px){
  .menu{justify-content:flex-start}
  .menu a{font-size:clamp(1.5rem,6.4vw,2.2rem)}
}
@media (max-width:460px){
  .menu-foot{gap:10px 18px;margin-top:28px}
}

/* nothing sits on top of a project title, at any width */
.pcard .frame,.proj>.frame{margin-bottom:0}
.proj-title,.proj-meta,.proj-open{max-width:100%;overflow-wrap:anywhere}

/* the lifted opener keeps its shadow off the text below on small screens */
@media (max-width:640px){
  .lift .frame{box-shadow:0 20px 50px rgba(0,0,0,.4)}
  .bridge-note{max-width:16ch;letter-spacing:.16em}
}


/* ============================================================
   GUIDE LINES
   One vertical thread sits just outside the text column and runs
   the height of the page, with short horizontal ticks into each
   title. The bridge hairline is the same line, continuing through
   the colour changes.
   ============================================================ */
:root{--gutter:clamp(16px,2.2vw,34px)}

@media (min-width:900px){
  .bridge-line{left:calc(var(--m) - var(--gutter))}

  .p-head,.story-chapter{position:relative}
  .p-head::before,.story-chapter::before{
    content:"";position:absolute;left:calc(-1 * var(--gutter));top:.2em;bottom:0;width:1px;
    background:var(--g20);transform:scaleY(0);transform-origin:top;
    transition:transform 1.3s var(--ease);
  }
  .sec--dark .p-head::before,.sec--dark .story-chapter::before{background:rgba(255,255,255,.22)}
  .p-head.in::before,.story-chapter.in::before{transform:scaleY(1)}

  /* the tick that ties the thread to the title */
  .p-head::after,.story-chapter::after{
    content:"";position:absolute;left:calc(-1 * var(--gutter));top:.7em;
    width:var(--gutter);height:1px;background:var(--g20);
    transform:scaleX(0);transform-origin:left;
    transition:transform .9s var(--ease) .35s;
  }
  .sec--dark .p-head::after,.sec--dark .story-chapter::after{background:rgba(255,255,255,.22)}
  .p-head.in::after,.story-chapter.in::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .p-head::before,.p-head::after,.story-chapter::before,.story-chapter::after{transform:none}
}

/* horizontal rules that earn their place: they separate one idea from the next */
.story-band{border-top-width:1px}

/* ============================================================
   IMAGE PROTECTION
   A transparent shield sits over every photograph, so right-click,
   drag and long-press land on the shield rather than the image.
   ============================================================ */
img{
  -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  pointer-events:none;
}
.frame::after,.lb-stage::after{
  content:"";position:absolute;inset:0;z-index:3;
  -webkit-touch-callout:none;user-select:none;
}
.hero-media::after{content:"";position:absolute;inset:0;z-index:3}

/* ============================================================
   FULL-SCREEN VIEWER (LIGHTBOX)
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(6,6,6,.97);
  display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s step-end;
}
.lb.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.lb-top{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2vw,26px) var(--m);color:var(--paper);
}
.lb-title{
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--g45);
}
.lb-close{
  display:flex;align-items:center;gap:10px;color:var(--paper);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;
}
.lb-stage{
  position:relative;display:grid;place-items:center;
  padding:0 clamp(12px,5vw,90px);min-height:0;touch-action:pan-y;
}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.lb-stage img.shown{opacity:1;transform:none}
.lb-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2vw,26px) var(--m);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--g45);
}
.lb-count{color:var(--paper)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(44px,5vw,58px);height:clamp(44px,5vw,58px);border:1px solid rgba(255,255,255,.3);
  border-radius:50%;display:grid;place-items:center;color:var(--paper);
  background:rgba(10,10,10,.35);backdrop-filter:blur(6px);
  transition:background .4s,border-color .4s,transform .4s var(--ease);
}
.lb-nav:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lb-prev{left:clamp(8px,2vw,32px)}
.lb-next{right:clamp(8px,2vw,32px)}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px)}
.lb-next:hover{transform:translateY(-50%) translateX(3px)}
@media (max-width:640px){
  .lb-nav{width:42px;height:42px}
  .lb-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .lb,.lb-stage img{transition:opacity .2s linear}
  .lb-stage img{transform:none}
}
/* the gallery advertises that its frames open */
.v-gal .frame{cursor:zoom-in}


/* the hero's longest word stays inside the margins on the narrowest phones */
@media (max-width:400px){
  .hero h1{letter-spacing:-.055em}
}


/* ============================================================
   HERO
   A veil that lifts when the photograph has actually decoded, a
   slow dissolve between frames, and the frame credited like the
   cover of a magazine.
   ============================================================ */
.hero-veil{
  position:absolute;inset:0;z-index:4;background:var(--ink);
  opacity:0;pointer-events:none;
}
/* only ever visible while a script is running the sequence */
.js .hero-veil{opacity:1;transition:opacity .9s var(--ease)}
.js .hero-veil.lift{opacity:0}

.hero-credit{
  position:absolute;right:var(--m);bottom:clamp(32px,5vw,72px);z-index:3;
  margin:0;text-align:right;color:var(--g20);
  font-family:var(--data);font-size:var(--micro);letter-spacing:.16em;
  text-transform:uppercase;line-height:1.9;
  opacity:0;transition:opacity 1s var(--ease);
}
.hero-credit.on{opacity:.72}
.hero-credit b{display:block;color:var(--paper);font-weight:400}
@media (max-width:900px){
  .hero-credit{display:none}
}

/* the scroll cue picks up the thread motif: a line with light travelling down it */
.hero-cue{
  position:absolute;left:50%;bottom:0;z-index:3;width:1px;
  height:clamp(48px,7vw,92px);overflow:hidden;
  background:rgba(255,255,255,.22);
}
.hero-cue i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);
  transform:translateY(-100%);
  animation:cueRun 2.6s var(--ease) infinite;
}
@keyframes cueRun{
  0%{transform:translateY(-100%)}
  60%{transform:translateY(100%)}
  100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){.hero-cue i{animation:none;transform:none;opacity:.5}}

/* the hero hands the page over rather than simply scrolling away */
.hero-inner{will-change:transform,opacity}


/* ============================================================
   LARGE DISPLAYS
   More margin rather than wider text: photographs keep the width,
   paragraphs keep their measure.
   ============================================================ */
@media (min-width:2200px){
  :root{--m:clamp(140px,7vw,240px)}
}
@media (min-width:1600px){
  .nav-links{gap:clamp(40px,3vw,64px)}
}

/* anchored sections clear the taller header */
section[id],main[id],[id="top"]{scroll-margin-top:clamp(84px,11vw,132px)}


/* ============================================================
   HEADER BALANCE
   The logo, the wordmark and the link row share one optical line.
   The role line only appears where there is room for it, so the
   header is never crowded at any width.
   ============================================================ */
.nav{gap:clamp(20px,3vw,56px)}
.brand-txt{gap:2px}
.brand i{display:none}
@media (min-width:1400px){
  .brand i{display:block}
}
@media (min-width:1180px){
  .nav-links a{padding-block:14px}
}