/* ═══════════════════════════════════════════════════════════
   KODAMA — Fashion & Editorial Photography
   Design system + motion styles
   ═══════════════════════════════════════════════════════════ */

/* ── tokens ───────────────────────────────────────────────── */
:root{
  --ink:      #0B0B0B;
  --ink-2:    #050505;
  --ink-3:    #131313;
  --bone:     #EDE9E3;
  --muted:    #78726A;

  /* sampled from the hero photograph — the maroon of the garment and the
     slate-sky of the ground behind it */
  --maroon:    #7E2532;
  --maroon-lt: #C04A5C;
  --sky:       #3F5177;
  --sky-lt:    #93B4DC;
  --line:     rgba(237,233,227,.13);
  --line-2:   rgba(237,233,227,.26);

  --pad:      clamp(18px, 4vw, 64px);
  --gut:      clamp(16px, 2.4vw, 40px);
  --sec:      clamp(96px, 16vh, 220px);

  --f-sans:   'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-serif:  'Instrument Serif', 'Times New Roman', Georgia, serif;

  --e-out:    cubic-bezier(.16,1,.3,1);
  --e-io:     cubic-bezier(.76,0,.24,1);

  --cap:      clamp(9.5px, .72vw, 11.5px);
}

/* ── reset ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html,body{ background:var(--ink); }
body{
  font-family:var(--f-sans);
  color:var(--bone);
  font-size:16px;
  line-height:1.45;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
}
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ font-weight:500; line-height:1; letter-spacing:-.03em; }
::selection{ background:var(--maroon); color:var(--bone); }

body.is-locked{ overflow:hidden; height:100vh; }

/* smooth-scroll host */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* ── shared utilities ─────────────────────────────────────── */
.cap, .seclabel, .secnum, .srow__n, .loader__cap, .ftr h4, .tick{
  font-size:var(--cap);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}
.tick{ font-variant-numeric:tabular-nums; letter-spacing:.1em; }

.imgwrap{
  position:relative;
  overflow:hidden;
  background:var(--ink-3);
}
.imgwrap img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
  transform:scale(1.14);
}

/* pixel dissolve overlay — painted by js/main.js */
.pxmask{
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
}

/* char split */
.ch{ display:inline-block; will-change:transform,opacity; }
.word{ display:inline-block; white-space:nowrap; }

/* line mask (for [data-lines] + .line) */
.line{ display:block; overflow:hidden; }
.line > *{ display:block; }
.lmask{ display:block; overflow:hidden; }
.lmask > span{ display:block; will-change:transform; }

/* Initial hidden states — only when JS is running.
   [data-reveal] forces block+overflow, so it must only ever go on a
   plain text line. Anything with its own layout uses [data-fade].
   Deliberately no transform here: getComputedStyle reports a percentage
   translate back as a pixel matrix, which GSAP loads into its y channel,
   and animating yPercent then can't clear it. main.js owns the offset
   via fromTo, and opacity:0 covers the gap before it runs. */
html.js [data-reveal] > span{ display:inline-block; opacity:0; }
html.js [data-reveal]{ overflow:hidden; display:block; }
html.js [data-fade]{ opacity:0; transform:translateY(26px); }
html.js [data-clip] img{ transform:scale(1.3); }
html.js .loader__mark{ opacity:0; }
html.js .hero__body, html.js .hero__foot, html.js .hdr{ opacity:0; }

/* ═══ film grain ═══════════════════════════════════════════ */
.grain{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:9000;
  opacity:.055;
  mix-blend-mode:overlay;
}

/* ═══ custom cursor ════════════════════════════════════════ */
.cursor{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:9500;
  mix-blend-mode:difference;
  opacity:0;
}
.cursor__dot{
  position:absolute;
  width:6px; height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:var(--bone);
}
.cursor__ring{
  position:absolute;
  width:76px; height:76px;
  margin:-38px 0 0 -38px;
  border-radius:50%;
  border:1px solid rgba(237,233,227,.55);
  display:grid; place-items:center;
  transform:scale(.34);
  background:transparent;
}
.cursor__label{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(4px);
}
.cursor.is-view .cursor__ring{ background:var(--bone); border-color:var(--bone); }
.cursor.is-view .cursor__label{ color:var(--ink); }
@media (hover:none){ .cursor{ display:none; } }

/* ═══ preloader ════════════════════════════════════════════ */
.loader{
  position:fixed; inset:0;
  z-index:9800;
  background:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
}
.loader__inner{
  position:relative;
  width:min(760px, calc(100vw - var(--pad)*2));
  text-align:center;
}
.loader__mark{
  font-size:clamp(38px, 8.5vw, 108px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1;
}
.loader__meta{
  display:flex; justify-content:space-between;
  margin-top:22px;
  color:var(--muted);
}
.loader__bar{
  margin-top:34px;
  height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.loader__bar i{
  position:absolute; inset:0 auto 0 0;
  width:100%;
  background:linear-gradient(90deg, var(--maroon) 0%, var(--maroon-lt) 45%, var(--sky) 100%);
  transform:scaleX(0);
  transform-origin:0 50%;
}
.loader__count{
  position:absolute;
  right:0; top:calc(100% + 18px);
  display:flex; align-items:baseline; gap:2px;
  font-size:clamp(28px,5vw,58px);
  font-weight:300;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.loader__count em{ font-style:normal; font-size:.34em; color:var(--muted); letter-spacing:0; }
.loader__curtain{
  position:absolute; inset:0;
  background:var(--ink);
  transform:translateY(100%);
  z-index:-1;
}

/* ═══ header ═══════════════════════════════════════════════ */
.hdr{
  position:fixed; top:0; left:0; right:0;
  z-index:800;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:clamp(16px,2.4vw,30px) var(--pad);
  mix-blend-mode:difference;
}
.hdr__logo{
  display:inline-flex; align-items:center; gap:10px;
  justify-self:start;
  font-size:15px; font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.hdr__glyph{ width:15px; height:15px; }
.hdr__nav{ display:flex; gap:clamp(18px,2.6vw,40px); }
/* every item in the bar shares one line-height so their baselines line up;
   the underline hangs off a pseudo-element rather than padding, which
   would otherwise shift the text up inside the centred flex row */
.hdr__nav a, .hdr__soc{
  font-size:13px; font-weight:450;
  position:relative;
  line-height:1.1;
}
.hdr__nav a::after, .hdr__soc::after{
  content:''; position:absolute;
  left:0; bottom:-3px; width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .6s var(--e-out);
}
.hdr__nav a:hover::after, .hdr__soc:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.hdr__right{ justify-self:end; display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); }

.burger{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; line-height:1.1;
}
.burger__label{
  position:relative; display:block;
  height:1.1em; line-height:1.1; overflow:hidden; width:42px; text-align:left;
}
.burger__label i{
  display:block; font-style:normal; line-height:1.1;
  transition:transform .6s var(--e-out);
}
body.menu-open .burger__label i{ transform:translateY(-100%); }
.burger__lines{ display:block; width:22px; }
.burger__lines b{
  display:block; height:1px; background:currentColor;
  transition:transform .6s var(--e-out), opacity .4s;
}
.burger__lines b:first-child{ margin-bottom:5px; }
body.menu-open .burger__lines b:first-child{ transform:translateY(3px) rotate(45deg); }
body.menu-open .burger__lines b:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ═══ fullscreen menu ══════════════════════════════════════ */
.menu{
  position:fixed; inset:0;
  z-index:700;
  pointer-events:none;
  visibility:hidden;
}
.menu.is-open{ pointer-events:auto; visibility:visible; }
.menu__bg{
  position:absolute; inset:0;
  background:var(--ink-2);
  transform:scaleY(0); transform-origin:50% 0;
}
.menu__grid{
  position:relative;
  height:100%;
  display:grid;
  grid-template-columns:1.4fr .8fr;
  align-items:center;
  gap:var(--gut);
  padding:calc(var(--pad)*2.4) var(--pad) var(--pad);
}
.menu__nav{ display:flex; flex-direction:column; }
.menu__nav a{
  display:flex; align-items:baseline; gap:clamp(12px,1.6vw,26px);
  padding:clamp(4px,.8vh,12px) 0;
  overflow:hidden;
}
.menu__i{
  font-size:var(--cap); letter-spacing:.14em;
  color:var(--muted);
  transform:translateY(4px);
  transition:color .5s;
}
.menu__t{
  display:block;
  font-size:clamp(40px, 7.2vw, 104px);
  font-weight:500;
  letter-spacing:-.045em;
  /* the <a> masks this for the reveal, so the line box has to be tall
     enough to hold ascenders and descenders or the glyphs get clipped */
  line-height:1.22;
  transition:transform .7s var(--e-out), opacity .5s;
}
.menu__nav a:hover .menu__t{ transform:translateX(clamp(10px,1.6vw,32px)); }
.menu__nav a:hover .menu__i{ color:var(--bone); }
.menu__nav:hover a:not(:hover) .menu__t{ opacity:.32; }

.menu__side{
  display:flex; flex-direction:column; gap:clamp(20px,4vh,46px);
  align-self:end; padding-bottom:clamp(10px,4vh,50px);
}
.menu__block h4{
  font-size:var(--cap); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; font-weight:500;
}
.menu__block p{ font-size:15px; line-height:1.6; color:var(--bone); }
.menu__block a:hover, .menu__block .copy:hover{ color:var(--sky-lt); }

/* ═══ hero ═════════════════════════════════════════════════ */
.hero{
  position:relative;
  height:100svh; min-height:600px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__gl, .hero__fallback{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__gl{ z-index:2; opacity:0; }
.hero__gl.is-live{ opacity:1; }
.hero__gl.is-live ~ .hero__fallback{ opacity:0; }
.hero__fallback{ z-index:1; filter:saturate(.5) contrast(1.06); }
.hero__scrim{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(to top, rgba(11,11,11,.92) 0%, rgba(11,11,11,.34) 42%, rgba(11,11,11,.12) 70%, rgba(11,11,11,.55) 100%);
}

.hero__body{ position:relative; z-index:4; }
.hero__eyebrow{
  font-size:var(--cap); letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky-lt);
  margin-bottom:clamp(16px,2.4vh,30px);
}
.hero__title{
  font-size:clamp(38px, 8.2vw, 148px);
  font-weight:500;
  letter-spacing:-.048em;
  line-height:.92;
}
.hero__title em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
}

.hero__foot{
  position:relative; z-index:4;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:var(--gut);
  margin-top:clamp(30px,6vh,72px);
  padding-top:clamp(14px,2vh,22px);
  border-top:1px solid var(--line);
}
.hero__col{ display:flex; align-items:baseline; gap:8px; color:var(--muted); }
.hero__col .tick{ color:var(--bone); }
.hero__col--r{ justify-self:end; }
.hero__scroll{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero__scrollTxt{ font-size:var(--cap); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.hero__scrollLine{ display:block; width:1px; height:52px; background:var(--line-2); overflow:hidden; position:relative; }
.hero__scrollLine i{
  position:absolute; inset:0;
  background:var(--bone);
  transform-origin:50% 0;
  animation:scrollpulse 2.1s var(--e-io) infinite;
}
@keyframes scrollpulse{
  0%{ transform:translateY(-100%); }
  55%{ transform:translateY(0); }
  100%{ transform:translateY(100%); }
}

/* ═══ section shells ═══════════════════════════════════════ */
.intro, .work, .serv, .mosaic, .clients, .quote, .stats{
  padding-left:var(--pad); padding-right:var(--pad);
}
.intro{ padding-top:var(--sec); padding-bottom:var(--sec); }

.secnum{ display:block; color:var(--sky-lt); }
.seclabel{ display:block; color:var(--muted); }
.seclabel--r{ text-align:right; }

.intro__head{
  display:flex; justify-content:space-between;
  padding-bottom:clamp(30px,5vh,60px);
  border-bottom:1px solid var(--line);
}
.intro__grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:clamp(30px,6vw,110px);
  padding-top:clamp(40px,7vh,90px);
}
.statement{
  font-size:clamp(21px, 2.9vw, 46px);
  line-height:1.24;
  letter-spacing:-.028em;
  font-weight:400;
}
.statement em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  color:var(--sky-lt);
}
.intro__meta{
  margin-top:clamp(36px,6vh,72px);
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.intro__meta > div{ padding:16px 0; border-bottom:1px solid var(--line); }
/* the reveal utility makes this span inline-block, so the columns are
   spaced with margin rather than a flex gap */
.intro__meta span{ font-size:14px; color:var(--bone); }
.intro__meta b{
  display:inline-block;
  min-width:clamp(88px, 9vw, 150px);
  margin-right:clamp(12px, 2vw, 32px);
  font-size:var(--cap); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.intro__fig .imgwrap{ aspect-ratio:3/4; }
.intro__fig figcaption{
  margin-top:14px;
  font-size:12px; color:var(--muted); letter-spacing:.02em;
}

/* ═══ work ═════════════════════════════════════════════════ */
.work{ padding-top:var(--sec); padding-bottom:var(--sec); }
.work__head{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:end; gap:var(--gut);
  padding-bottom:clamp(30px,5vh,54px);
  border-bottom:1px solid var(--line);
}
.work__title, .serv__title, .mosaic__title{
  font-size:clamp(30px, 5.4vw, 92px);
  font-weight:500; letter-spacing:-.045em; line-height:.95;
  text-align:center;
}
.work__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gut);
  padding-top:clamp(50px,10vh,130px);
}
.proj{ position:relative; }
.proj:nth-child(1){ grid-column:1/6; }
.proj:nth-child(2){ grid-column:7/13; margin-top:20vh; }
.proj:nth-child(3){ grid-column:2/7; margin-top:14vh; }
.proj:nth-child(4){ grid-column:8/12; margin-top:2vh; }
.proj:nth-child(5){ grid-column:1/5; margin-top:16vh; }
.proj:nth-child(6){ grid-column:6/13; margin-top:6vh; }

.proj--tall .imgwrap{ aspect-ratio:3/4.2; }
.proj--wide .imgwrap{ aspect-ratio:4/2.9; }
.proj--mid  .imgwrap{ aspect-ratio:4/5; }

.proj__link{ display:block; }
.proj__link .imgwrap img{ transition:filter .9s var(--e-out); filter:saturate(.55) contrast(1.05); }
.proj__link:hover .imgwrap img{ filter:saturate(1) contrast(1); }

.proj__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--gut);
  margin-top:clamp(14px,1.8vh,22px);
  padding-top:12px;
  border-top:1px solid var(--line);
}
.proj__meta h3{
  font-size:clamp(19px,2vw,32px);
  font-weight:500; letter-spacing:-.035em;
}
.proj__meta p{ display:flex; gap:clamp(10px,1.4vw,22px); flex-shrink:0; }
.proj__meta p span{
  font-size:var(--cap); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

/* ═══ pinned full-bleed ════════════════════════════════════ */
.pin{ height:280vh; position:relative; }
.pin__sticky{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
  display:grid; place-items:center;
}
.pin__media{ position:absolute; inset:0; }
.pin__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.25) contrast(1.1); will-change:transform; }
.pin__scrim{ position:absolute; inset:0; background:rgba(11,11,11,.42); }
.pin__words{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
}
.pin__w{
  grid-area:1/1;
  font-size:clamp(46px, 13vw, 220px);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:1;
  opacity:0;
}
.pin__w em{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }

/* ═══ services ═════════════════════════════════════════════ */
.serv{ padding-top:var(--sec); padding-bottom:var(--sec); }
.serv__head{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:end; gap:var(--gut);
  padding-bottom:clamp(26px,4vh,46px);
}
.serv__list{ position:relative; border-top:1px solid var(--line); }
.srow{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:auto 1fr 1fr auto;
  align-items:center;
  gap:clamp(14px,3vw,50px);
  padding:clamp(20px,3.4vh,42px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .7s var(--e-out), color .5s;
}
.srow::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .68s var(--e-out);
}
.srow:hover{ padding-left:clamp(14px,2vw,34px); color:var(--ink); }
.srow:hover::before{ transform:scaleY(1); transform-origin:50% 0; }
.srow__n{ color:var(--muted); transition:color .5s; }
.srow:hover .srow__n{ color:var(--maroon); }
.srow__t{
  font-size:clamp(22px,3.4vw,54px);
  font-weight:500; letter-spacing:-.04em; line-height:1;
}
.srow__d{ font-size:14px; color:var(--muted); transition:color .5s; }
.srow:hover .srow__d{ color:rgba(11,11,11,.62); }
.srow__a{ font-size:18px; opacity:.4; transition:opacity .5s, transform .6s var(--e-out); }
.srow:hover .srow__a{ opacity:1; transform:translate(4px,-4px); }
/* everything the pointer is not on recedes */
.serv__list:hover .srow:not(:hover){ opacity:.42; }
.srow{ transition:padding-left .7s var(--e-out), color .5s, opacity .5s; }

.serv__preview{
  position:absolute; top:0; left:0;
  width:clamp(180px, 17vw, 280px);
  aspect-ratio:3/4;
  pointer-events:none;
  z-index:3;
  opacity:0;
  overflow:hidden;
  will-change:transform;
}
.serv__preview img{ width:100%; height:100%; object-fit:cover; }
@media (hover:none){ .serv__preview{ display:none; } }

/* ═══ mosaic / archive ═════════════════════════════════════ */
.mosaic{ padding-top:var(--sec); padding-bottom:var(--sec); }
.mosaic__head{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:end; gap:var(--gut);
  padding-bottom:clamp(30px,5vh,54px);
  border-bottom:1px solid var(--line);
}
.mosaic__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(22px,3.4vw,52px);
  gap:var(--gut);
  padding-top:clamp(40px,7vh,90px);
}
.tile{
  position:relative;
  grid-column:var(--c) / span var(--cs);
  grid-row:var(--r) / span var(--rs);
  overflow:hidden;
  background:var(--ink-3);
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.4) contrast(1.05);
  transition:transform 1.1s var(--e-out), filter .8s var(--e-out);
}
.tile:hover img{ transform:scale(1.06); filter:saturate(1) contrast(1); }

/* ═══ clients marquee ══════════════════════════════════════ */
.clients{ padding-top:var(--sec); padding-bottom:calc(var(--sec)*.7); overflow:hidden; }
.clients__head{ padding-bottom:clamp(26px,4vh,46px); border-bottom:1px solid var(--line); }
.marquee{
  overflow:hidden;
  padding:clamp(12px,2vh,22px) 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.marquee__track{ display:inline-flex; align-items:center; will-change:transform; }
.marquee__track span{
  font-size:clamp(28px,5.4vw,88px);
  font-weight:500; letter-spacing:-.045em;
  padding:0 clamp(14px,2vw,34px);
  line-height:1.1;
}
.marquee__track i{
  font-style:normal;
  font-size:clamp(9px,1vw,15px);
  color:var(--maroon-lt);
  transform:translateY(-.5em);
}
.marquee--rev .marquee__track span{
  color:transparent;
  -webkit-text-stroke:1px rgba(147,180,220,.34);
}

/* ═══ quote ════════════════════════════════════════════════ */
.quote{
  padding-top:var(--sec); padding-bottom:var(--sec);
  display:grid;
  grid-template-columns:.42fr 1fr;
  gap:clamp(30px,6vw,110px);
  align-items:center;
}
.quote__fig .imgwrap{ aspect-ratio:3/4; }
.quote__body p{
  font-size:clamp(22px,3.2vw,52px);
  line-height:1.22; letter-spacing:-.032em; font-weight:400;
}
.quote__body em{ font-family:var(--f-serif); font-style:italic; color:var(--sky-lt); }
.quote__body footer{
  margin-top:clamp(24px,4vh,44px);
  font-size:var(--cap); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

/* ═══ stats ════════════════════════════════════════════════ */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gut);
  padding-bottom:var(--sec);
  border-top:1px solid var(--line);
  padding-top:clamp(36px,6vh,68px);
}
.stat{ display:flex; flex-direction:column; gap:10px; }
.stat__n{
  font-size:clamp(38px,6vw,104px);
  font-weight:300; letter-spacing:-.05em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__l{
  font-size:var(--cap); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

/* ═══ CTA ══════════════════════════════════════════════════ */
.cta{
  position:relative;
  min-height:92svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(22px,4vh,44px);
  padding:var(--sec) var(--pad);
  text-align:center;
  overflow:hidden;
}
.cta__bg{ position:absolute; inset:0; z-index:0; }
.cta__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.62);
  will-change:transform;
}
/* the same maroon-to-sky wash the hero photograph carries */
.cta__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(140deg,
    rgba(126,37,50,.42) 0%,
    rgba(11,11,11,.62) 48%,
    rgba(63,81,119,.42) 100%);
}
.cta > *:not(.cta__bg){ position:relative; z-index:2; }
.cta__title{
  font-size:clamp(34px, 7.4vw, 132px);
  font-weight:500; letter-spacing:-.048em; line-height:.95;
}
.cta__title em{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }

.btn{
  position:relative;
  display:inline-block;
  overflow:hidden;
  border:1px solid var(--line-2);
  border-radius:100px;
  padding:clamp(14px,1.8vh,20px) clamp(26px,3vw,44px);
  isolation:isolate;
}
.btn__fill{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, var(--maroon) 0%, var(--sky) 100%);
  transform:translateY(101%);
  transition:transform .72s var(--e-out);
}
.btn:hover{ border-color:transparent; }
.btn:hover .btn__fill{ transform:translateY(0); }
.btn__txt{
  position:relative; display:block;
  height:1.15em; overflow:hidden;
  font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
.btn__txt i{ display:block; font-style:normal; transition:transform .72s var(--e-out); }
.btn__txt i:last-child{ color:var(--bone); }
.btn:hover .btn__txt i{ transform:translateY(-100%); }

/* ═══ footer ═══════════════════════════════════════════════ */
.ftr{ padding:var(--sec) var(--pad) clamp(20px,3vh,34px); border-top:1px solid var(--line); }
.ftr__top{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,4vw,60px);
}
.ftr__col{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.ftr h4{ color:var(--muted); margin-bottom:8px; }
.ftr__col p, .ftr__col a, .ftr__col .copy{
  font-size:15px; line-height:1.65; color:var(--bone);
  transition:color .4s;
}
.ftr__col a:hover, .ftr__col .copy:hover{ color:var(--sky-lt); }
.ftr__col--clock .tick{ font-size:clamp(24px,3vw,42px); font-weight:300; letter-spacing:-.03em; text-transform:none; }
.ftr__loc{ font-size:12px; color:var(--muted); }

.ftr__mark{
  margin:clamp(50px,10vh,120px) 0 clamp(20px,3vh,34px);
  overflow:hidden;
  line-height:.78;
}
.ftr__mark span{
  display:block;
  font-size:clamp(58px, 21.5vw, 460px);
  font-weight:600;
  letter-spacing:-.055em;
  text-align:center;
  white-space:nowrap;
  background:linear-gradient(168deg,
    var(--bone) 0%,
    rgba(147,180,220,.55) 52%,
    rgba(192,74,92,.42) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  will-change:transform;
}
.ftr__base{
  display:flex; justify-content:space-between; gap:var(--gut);
  padding-top:clamp(14px,2vh,22px);
  border-top:1px solid var(--line);
  font-size:12px; color:var(--muted);
}
.ftr__base a:hover{ color:var(--bone); }

/* copy button */
.copy{ position:relative; text-align:left; }
.copy::after{
  content:''; position:absolute; left:0; bottom:1px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--e-out);
}
.copy:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* toast */
.toast{
  position:fixed;
  left:50%; bottom:34px;
  transform:translate(-50%, 20px);
  background:var(--bone); color:var(--ink);
  padding:9px 18px; border-radius:100px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  opacity:0; pointer-events:none;
  z-index:9600;
}

/* ═══ responsive ═══════════════════════════════════════════ */
@media (max-width:1024px){
  .intro__grid{ grid-template-columns:1fr; }
  .intro__fig{ max-width:440px; }
  .quote{ grid-template-columns:1fr; }
  .quote__fig{ max-width:380px; }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:clamp(28px,5vh,52px); }
  .ftr__top{ grid-template-columns:repeat(2,1fr); row-gap:clamp(30px,5vh,54px); }
  .menu__grid{ grid-template-columns:1fr; align-content:center; }
  .menu__side{ display:none; }
  .pin{ height:220vh; }
}

@media (max-width:860px){
  .hdr__nav{ display:none; }
  .hdr{ grid-template-columns:1fr auto; }
  .hdr__soc{ display:none; }

  .work__grid{ grid-template-columns:1fr; row-gap:clamp(46px,9vh,90px); }
  .proj:nth-child(n){ grid-column:1/-1; margin-top:0; }
  .proj--tall .imgwrap{ aspect-ratio:3/4; }
  .proj--wide .imgwrap{ aspect-ratio:4/3; }
  .proj--mid  .imgwrap{ aspect-ratio:1/1; }
  .work__head, .mosaic__head, .serv__head{ grid-template-columns:1fr; row-gap:14px; }
  .work__title, .mosaic__title, .serv__title{ text-align:left; }
  .seclabel--r{ text-align:left; }

  .srow{ grid-template-columns:auto 1fr auto; }
  .srow__d{ display:none; }

  .mosaic__grid{ grid-auto-rows:clamp(16px,4.6vw,30px); }

  .hero__foot{ grid-template-columns:1fr 1fr; row-gap:18px; }
  .hero__scroll{ display:none; }

  .stats{ grid-template-columns:1fr 1fr; }
  .ftr__top{ grid-template-columns:1fr; }
  .ftr__base{ flex-direction:column; gap:6px; text-align:left; }
}

@media (max-width:560px){
  .intro__meta b{ display:block; min-width:0; margin:0 0 4px; }
  .proj__meta{ flex-direction:column; align-items:flex-start; gap:8px; }
  .stats{ grid-template-columns:1fr; }
}

/* ═══ reduced motion ═══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js [data-reveal] > span{ opacity:1; transform:none; }
  html.js [data-fade]{ opacity:1; transform:none; }
  html.js [data-clip] img{ transform:scale(1); }
  html.js .hero__body, html.js .hero__foot, html.js .hdr{ opacity:1; }
  .grain{ display:none; }
  .pin{ height:auto; }
  .pin__sticky{ position:relative; }
  .pin__w{ opacity:1; position:relative; }
  .pin__w:not(:last-child){ display:none; }
}