/* ============================================================
   Mari Daniels — shared stylesheet
   Used by index.html and every project-*.html page.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.70);
  --dim:rgba(255,255,255,.30);
  --faint:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.12);
  --surface:#0a0a0a;
  --accent:#ff5005;
  --rule:rgba(255,255,255,.55);   /* the bright animated divider */
  --edge:rgba(255,255,255,.35);   /* outlined circle buttons */
  --on-accent:#fff;

  --gutter:clamp(20px,4vw,40px);
  --gg:clamp(8px,1.1vw,18px);      /* gap between images in a chapter grid */
  --ease:cubic-bezier(.22,1,.36,1);

  /* project card: caps at 860 x 502 like the reference, full width below that */
  --card-w:min(860px,100%);

  /* Viewport-locked so the section backdrop and the cards sample the same
     pixels — that's what lets a card sit opaquely on top of the ones
     stacked behind it without showing a seam.
     The flat black layer on top knocks the stone back so the cards read first.
     It has to live in this variable, not on .sec-bg alone — the cards share
     the same background, and darkening only one of them would show a seam. */
  --texture:
    linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.58)),
    url("new-project-header-photos/textured-background.webp") center/cover fixed #000;

  --fs-display:clamp(58px,13.4vw,220px);
  --fs-h2:clamp(29px,4.5vw,58px);
  --fs-h3:clamp(20px,1.9vw,26px);
  --fs-card:clamp(18px,1.55vw,22px);
  --fs-body:clamp(15px,1.15vw,16px);
  --fs-label:clamp(12px,1vw,14px);
}

/* ============================================================
   THEMES — set data-theme on <body> to repaint a single page.
   COLOUR TOKENS ONLY. Anything structural (gutters, type scale,
   card widths, the texture) must stay in :root or the pages that
   don't carry a theme lose it entirely.
   ============================================================ */
body[data-theme="soil"]{
  --bg:#2E2A26;
  --fg:#F3F0EA;
  --muted:rgba(243,240,234,.66);
  --dim:rgba(243,240,234,.36);
  --faint:rgba(243,240,234,.16);
  --line:rgba(243,240,234,.16);
  --surface:#3A352F;
  --rule:rgba(243,240,234,.50);
  --edge:rgba(243,240,234,.32);
  --on-accent:#fff;
}
/* Mura — sampled from the backdrop the magazine mockups are shot on, so the
   spreads sit flush in the page instead of reading as pale panels on it.
   The site orange is dropped for an oxide red; #ff5005 on this grey is far
   too low-contrast to use. */
body[data-theme="mura"]{
  --bg:#CFCCCB;
  --fg:#1A1815;
  --muted:rgba(26,24,21,.70);
  --dim:rgba(26,24,21,.42);
  --faint:rgba(26,24,21,.14);
  --line:rgba(26,24,21,.20);
  /* barely off the page colour — this sits behind an image while it loads,
     so anything darker flashes a frame around every spread */
  --surface:#C6C3C1;
  --accent:#9E3B1F;
  --rule:rgba(26,24,21,.52);
  --edge:rgba(26,24,21,.36);
  --on-accent:#fff;
}
body[data-theme="stone"]{
  --bg:#EDEAE4;
  --fg:#161310;
  --muted:rgba(22,19,16,.66);
  --dim:rgba(22,19,16,.36);
  --faint:rgba(22,19,16,.18);
  --line:rgba(22,19,16,.16);
  --surface:#DFDBD3;
  --rule:rgba(22,19,16,.50);
  --edge:rgba(22,19,16,.32);
  --on-accent:#fff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.25;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  /* clip (not hidden) — `hidden` turns <body> into a scroll container and breaks position:sticky */
  overflow-x:clip;
}
body.is-locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0;font-weight:400}
::selection{background:var(--accent);color:var(--on-accent)}

.wrap{padding-inline:var(--gutter)}
.mono{font-size:var(--fs-label);letter-spacing:0;color:var(--fg)}

/* ---------- PRELOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;
  transition:transform 1.05s var(--ease);
}
#loader.done{transform:translateY(-101%)}
#loader .lw{overflow:hidden;padding-block:.14em}
#loader .lt{
  display:block;
  font-size:clamp(46px,7vw,96px);
  letter-spacing:-.03em;line-height:1;
  transform:translateY(110%);
  animation:loadRise .95s var(--ease) .12s forwards;
}
#loader.done .lt{animation:loadFall .55s var(--ease) forwards}
@keyframes loadRise{to{transform:translateY(0)}}
@keyframes loadFall{to{transform:translateY(-110%)}}
#loader .bar{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--gutter) + 6px);
  height:1px;background:var(--faint);overflow:hidden;
}
#loader .bar i{
  display:block;height:100%;width:100%;background:var(--fg);
  transform:scaleX(0);transform-origin:left;
  animation:loadBar 1.55s var(--ease) .1s forwards;
}
@keyframes loadBar{to{transform:scaleX(1)}}
#loader .pct{
  position:absolute;right:var(--gutter);bottom:calc(var(--gutter) + 20px);
  font-size:var(--fs-label);color:var(--muted);
}

/* ---------- FIXED CHROME ---------- */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(22px,2.1vw,34px) var(--gutter);
  pointer-events:none;
}
.chrome > *{pointer-events:auto}
/* solid bar slides across the full width once you scroll off the hero */
.chrome::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);
  transform:translateY(-100%);
  transition:transform .55s var(--ease);
}
.chrome.solid::before{transform:translateY(0)}
.brand{
  font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.03em;
  opacity:0;transform:translateY(-12px);
  transition:opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s;
}
.brand sup{font-size:.5em;font-weight:400;vertical-align:super;letter-spacing:0}
.burger{
  width:42px;height:20px;position:relative;
  opacity:0;transform:translateY(-12px);
  transition:opacity .7s var(--ease) .16s, transform .7s var(--ease) .16s;
}
.burger i{
  position:absolute;left:0;right:0;height:1.6px;background:var(--fg);
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger i:nth-child(1){top:4px}
.burger i:nth-child(2){top:13px}
body.nav-open .burger i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
body.ready .brand,body.ready .burger{opacity:1;transform:none}

/* ---------- NAV OVERLAY ---------- */
#nav{
  position:fixed;inset:0;z-index:58;background:var(--bg);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  display:flex;flex-direction:column;justify-content:center;
  /* Bottom padding reserves the strip .nav-foot is absolutely positioned in,
     so the list can never be laid out underneath it. */
  padding:calc(var(--gutter) * 2.4) var(--gutter) calc(var(--gutter) * 5);
  overflow-y:auto;
}
body.nav-open #nav{clip-path:inset(0 0 0 0)}
#nav ol{list-style:none;margin:0;padding:0}
#nav li{overflow:hidden;padding-block:.06em}
#nav ol a{
  display:flex;align-items:baseline;gap:.55em;
  /* Sized off whichever axis is tighter. Keyed to width alone, five lines at
     104px plus the footer overran any short window and piled into each other. */
  font-size:clamp(26px,min(7vw,7.2vh),64px);line-height:1.08;letter-spacing:-.035em;
  transform:translateY(110%);
  transition:transform .8s var(--ease),color .35s var(--ease);
}
#nav ol a em{font-size:clamp(11px,1vw,14px);font-style:normal;color:var(--dim);letter-spacing:0}
#nav a:hover{color:var(--accent)}
body.nav-open #nav ol a{transform:translateY(0)}
body.nav-open #nav li:nth-child(1) a{transition-delay:.16s}
body.nav-open #nav li:nth-child(2) a{transition-delay:.22s}
body.nav-open #nav li:nth-child(3) a{transition-delay:.28s}
body.nav-open #nav li:nth-child(4) a{transition-delay:.34s}
body.nav-open #nav li:nth-child(5) a{transition-delay:.40s}
.nav-foot{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);
  /* Left-aligned rather than spread: with space-between, a wrapped final row
     threw its two remaining links to opposite edges of the screen. */
  display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:flex-start;
  font-size:var(--fs-label);color:var(--muted);
  opacity:0;transition:opacity .5s var(--ease) .5s;
}
body.nav-open .nav-foot{opacity:1}
.nav-foot a{font-size:var(--fs-label);letter-spacing:0;line-height:1.3}
.nav-foot a:hover{color:var(--fg)}

/* ---------- HERO (home) ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:58% 18%;
  filter:contrast(1.03) saturate(1.04);
  transform:scale(1.14);
  transition:transform 1.9s var(--ease);
}
body.ready .hero-media img{transform:scale(1.02)}
/* the photo is already lit orange/blue — this only darkens the edges for legibility */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.10) 22%, rgba(0,0,0,0) 42%, rgba(0,0,0,.34) 74%, rgba(0,0,0,.86) 100%),
    radial-gradient(125% 100% at 55% 40%, rgba(0,0,0,0) 42%, rgba(60,12,0,.34) 78%, rgba(0,0,0,.72) 100%);
}

/* the + marker is still used in the expertise grid and the footer */
.plus{
  position:absolute;z-index:2;width:15px;height:15px;color:var(--dim);
}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor}
.plus::before{left:0;right:0;top:7px;height:1px}
.plus::after{top:0;bottom:0;left:7px;width:1px}

.hero-mid{
  position:absolute;top:50%;left:var(--gutter);right:var(--gutter);
  transform:translateY(-50%);
  display:flex;justify-content:space-between;gap:24px;z-index:3;
}
.hero-mid .r{text-align:right;max-width:14em}
.hero-mid p{font-size:var(--fs-body);line-height:1.35}
.globe{width:17px;height:17px;margin-left:auto;margin-bottom:9px;opacity:.9}

.hero-bottom{
  position:relative;z-index:3;
  padding:0 var(--gutter) clamp(22px,3.2vw,44px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,22px);
  flex-wrap:nowrap;
}
.hero-bottom .side{
  font-size:clamp(15px,2.5vw,26px);letter-spacing:-.02em;
  padding-bottom:clamp(6px,1.1vw,16px);white-space:nowrap;
}
.hero-name{font-size:var(--fs-display);line-height:.86;letter-spacing:-.025em;white-space:nowrap}

.rise{display:block;overflow:hidden;padding-block:.06em}
.rise > span{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease)}
body.ready .hero .rise > span,
body.ready .works-hero .rise > span,
body.ready .p-hero .rise > span{transform:translateY(0)}
.js-rise.in > span{transform:translateY(0)}
body.ready .d1 > span{transition-delay:.30s}
body.ready .d2 > span{transition-delay:.40s}
body.ready .d3 > span{transition-delay:.50s}

.fade-up{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
body.ready .fade-up{opacity:1;transform:none}
body.ready .fu1{transition-delay:.55s}
body.ready .fu2{transition-delay:.65s}

.scroll-cue{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);
  opacity:0;animation:cue 2.6s ease-in-out 2s infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:translate(-50%,0)}50%{opacity:.85;transform:translate(-50%,6px)}}

/* ---------- SECTION SHELL ---------- */
section{position:relative}
.sec{padding-block:clamp(64px,9vw,150px)}
.sec-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--fs-label);
}
.reveal-line{position:relative;border-top:0}
.reveal-line::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.reveal-line.in::before,.in .reveal-line::before{transform:scaleX(1)}

.h2{
  font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.025em;
  max-width:19ch;margin-top:clamp(38px,6vw,86px);
}
.h2.wide{max-width:24ch}
.h2 w{display:inline-block;color:var(--dim);transition:color .35s linear}
.h2 w.on{color:var(--fg)}

.anim{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.anim.in{opacity:1;transform:none}
.anim.dly1{transition-delay:.08s}
.anim.dly2{transition-delay:.16s}
.anim.dly3{transition-delay:.24s}
.anim.dly4{transition-delay:.32s}

.figure{overflow:hidden;position:relative}
.figure img{
  width:100%;display:block;
  clip-path:inset(14% 0 14% 0);
  transform:scale(1.14);
  transition:clip-path 1.35s var(--ease),transform 1.6s var(--ease);
}
.figure.in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;
  grid-template-columns:13.5% minmax(0,1fr);
  column-gap:6.2%;
  align-items:start;
  margin-top:clamp(44px,7vw,120px);
}
.about-thumb{aspect-ratio:228/245;background:#111}
.about-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.about-grid .h2{margin-top:-.11em;max-width:33ch}
.stats{
  display:grid;grid-template-columns:3fr 1fr;gap:clamp(30px,5vw,60px);
  margin-top:clamp(52px,7vw,110px);
}
.about-grid .stats{grid-column:2;margin-top:clamp(56px,8.5vw,155px)}
.stat b{display:block;font-size:var(--fs-h2);font-weight:400;letter-spacing:-.025em;line-height:1.1}
.stat span{display:block;margin-top:clamp(18px,2.6vw,34px)}
.stat em{display:block;font-style:normal;color:var(--muted);margin-top:5px}

/* ---------- PROJECTS — sticky stack ----------
   Reference geometry: 860 x 502 card on a 2560 screen (1.713:1),
   centred, 15px gap to the label row, 40px between cards,
   sticky tops stepping 70 / 170 / 270, last card static.          */
/* dark stone backdrop */
.sec-bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--texture);
}
/* Edge fades sit ABOVE the cards, not on the backdrop, so the backdrop and
   the cards fade into the black page together instead of one showing through. */
.sec-fade{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 88%,#000 100%);
}

.count{text-align:center;font-size:var(--fs-h2);letter-spacing:-.025em;margin-top:clamp(30px,4.4vw,60px)}

/* count + Explore All ride alongside the cards, pinned like the reference */
.stack-wrap{position:relative;margin-top:clamp(30px,4.4vw,58px)}
.stack-rail{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  margin-bottom:clamp(26px,3.4vw,48px);
}
.stack-rail .count{margin-top:0;text-align:left}
.stack-rail a{pointer-events:auto}

.stack{display:flex;flex-direction:column;align-items:center;gap:40px}
/* Opaque, sharing the backdrop's viewport-locked texture. At the end of the
   scroll every sticky card clamps to the same spot; without this their label
   rows all land on top of each other and the text turns to mush. */
.stack .card{
  position:sticky;width:var(--card-w);max-width:100%;
  background:var(--texture);
}
.stack .card:last-child{position:relative;top:auto !important}
.card-media{aspect-ratio:860/502;overflow:hidden;background:#111}
.card-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.06);transition:transform 1.2s var(--ease),filter .7s var(--ease);
}
.stack .card.in .card-media img{transform:scale(1)}
.stack .card:hover .card-media img{transform:scale(1.03)}
.card-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:15px;
}
.card-row b{font-weight:400;font-size:var(--fs-card);letter-spacing:-.02em;transition:color .35s var(--ease)}
.card-row span{color:var(--muted);font-size:var(--fs-body)}
.stack .card:hover .card-row b{color:var(--accent)}

.cta-row{display:flex;justify-content:center;margin-top:clamp(46px,6vw,92px)}
.pillbtn{display:inline-flex;align-items:center;gap:16px;font-size:clamp(16px,1.5vw,19px);letter-spacing:-.01em}
.circ{
  width:clamp(44px,4vw,54px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--edge);
  display:grid;place-items:center;overflow:hidden;position:relative;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.circ svg{width:22px;height:12px;transition:transform .5s var(--ease)}
.circ.back svg{transform:rotate(180deg)}
.pillbtn:hover .circ{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pillbtn:hover .circ svg{transform:translateX(3px)}
.pillbtn:hover .circ.back svg{transform:rotate(180deg) translateX(3px)}

/* ---------- EXPERTISE grid ---------- */
.grid4{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);margin-top:clamp(46px,6vw,96px)}
.gcell{
  position:relative;padding:clamp(22px,2.6vw,34px);
  min-height:clamp(230px,26vw,330px);
  display:flex;flex-direction:column;justify-content:space-between;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
}
.gcell:nth-child(2n){border-right:0}
.gcell:nth-child(n+3){border-bottom:0}
.gcell::before{content:"";position:absolute;inset:0;background:#0d0d0d;transform:translateY(101%);transition:transform .6s var(--ease);z-index:0}
.gcell:hover::before{transform:translateY(0)}
.gcell > *{position:relative;z-index:1}
.gico{width:clamp(38px,3.6vw,48px);height:clamp(38px,3.6vw,48px);color:#fff;transition:color .45s var(--ease)}
.gcell:hover .gico{color:var(--accent)}
.gbot b{display:block;font-weight:400;font-size:var(--fs-card);letter-spacing:-.02em}
.gbot span{display:block;color:var(--muted);margin-top:6px;font-size:var(--fs-body)}
.gcell .plus{
  position:absolute;right:clamp(20px,2.4vw,32px);bottom:clamp(22px,2.6vw,34px);
  opacity:1;color:rgba(255,255,255,.4);transition:transform .5s var(--ease),color .4s var(--ease);
}
.gcell:hover .plus{transform:rotate(90deg);color:var(--accent)}
.gtags{color:var(--dim);font-size:var(--fs-body);line-height:1.5;margin-top:14px;max-width:30ch}

/* ---------- TICKER ---------- */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding-block:clamp(16px,2vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker .track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{
  display:inline-flex;align-items:center;gap:clamp(24px,3vw,48px);
  padding-right:clamp(24px,3vw,48px);
  font-size:clamp(20px,2.6vw,34px);letter-spacing:-.02em;white-space:nowrap;color:rgba(255,255,255,.86);
}
.ticker span i{font-style:normal;color:var(--accent);font-size:.7em;transform:translateY(-.1em)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- EXPERIENCE panels ---------- */
.panels{position:relative}
.panel{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--gutter) * 2.6) var(--gutter) calc(var(--gutter) * 1.6);
}
.panel .bgi{position:absolute;inset:0;z-index:-2}
.panel .bgi img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:grayscale(.15) contrast(1.02)}
.panel .bgi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 40%,rgba(0,0,0,.86) 100%)}
.panel-head{display:flex;justify-content:space-between;font-size:var(--fs-label)}
.panel-body{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px}
.panel-body h3{font-size:clamp(38px,7vw,104px);line-height:.94;letter-spacing:-.035em}
.panel-meta{text-align:right;max-width:28ch}
.panel-meta .yr{font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;display:block}
.panel-meta p{color:var(--muted);margin-top:10px;line-height:1.45}

/* ---------- EDUCATION ---------- */
/* One grid for the whole list, with each row borrowing its columns via
   subgrid. Rows sized themselves before, so the widest year ("2019 – 2022")
   squeezed its own row's columns and knocked the school names out of line. */
.edu{
  margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1.5fr auto;column-gap:18px;
}
.edu .row{
  display:grid;grid-column:1 / -1;grid-template-columns:subgrid;
  column-gap:18px;align-items:baseline;
  padding-block:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line);
  transition:transform .45s var(--ease),color .45s var(--ease);
}
/* transform rather than padding, so hovering can't nudge the columns */
.edu .row:hover{transform:translateX(12px)}
.edu .row b{font-weight:400;font-size:var(--fs-card);letter-spacing:-.02em}
.edu .row span{color:var(--muted)}
.edu .row em{font-style:normal;color:var(--dim);white-space:nowrap}

/* ---------- PORTRAIT PLATE (before the CTA) ----------
   The reference animates its images with a plain fade up from 70px, no wipe
   and no scale — measured off the live site, so this matches it. */
.plate{display:flex;justify-content:center;padding-block:0}
.plate .shot{
  width:min(720px,88vw);
  opacity:0;transform:translateY(70px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.plate .shot.in{opacity:1;transform:none}
.plate .shot img{width:100%;height:auto;display:block;transform-origin:center;will-change:transform}

/* ---------- CTA ---------- */
.cta{
  padding-block:clamp(90px,12vw,170px) clamp(60px,8vw,120px);
  text-align:center;position:relative;overflow:hidden;
}
/* tighter than the projects fade — the heading sits close to the top here */
.cta .sec-fade{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 9%,rgba(0,0,0,0) 92%,#000 100%)}
.cta-title{
  max-width:18ch;margin:0 auto;text-align:center;
  font-size:clamp(38px,7.2vw,112px);line-height:1.03;letter-spacing:-.035em;
}
.btn-solid{
  display:inline-block;margin-top:clamp(26px,3.2vw,44px);
  background:var(--fg);color:var(--bg);padding:14px 32px;
  font-size:clamp(14px,1.05vw,16px);letter-spacing:-.01em;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.btn-solid:hover{background:var(--accent);color:var(--on-accent)}

/* fanned photo trio — centre upright and in front, outer two tucked behind */
.fan{
  display:flex;justify-content:center;align-items:flex-end;
  margin-top:clamp(46px,6vw,96px);
}
.fan .pic{
  --rot:0deg;
  /* outer two are ~75% of the centre card — bottom-aligned, so the smaller
     size is what drops their tops, exactly as the reference does it */
  width:clamp(96px,12.2vw,192px);aspect-ratio:2/3;
  flex:none;overflow:hidden;background:#111;
  transform-origin:bottom center;
  opacity:0;transform:translateY(70px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease);
}
.fan .pic img{width:100%;height:100%;object-fit:cover;display:block}
.fan.in .pic{opacity:1;transform:rotate(var(--rot))}
.fan .pic:nth-child(1){--rot:-9deg;z-index:1;margin-right:calc(clamp(6px,.8vw,14px) * -1);transition-delay:.05s}
.fan .pic:nth-child(2){width:clamp(125px,15.8vw,250px);z-index:3;transition-delay:.15s}
.fan .pic:nth-child(3){--rot:9deg;z-index:2;margin-left:calc(clamp(6px,.8vw,14px) * -1);transition-delay:.25s}

/* ---------- FOOTER ---------- */
footer{position:relative;isolation:isolate;overflow:hidden}
/* orange bloom rising from the bottom edge, behind the wordmark */
.foot-glow{
  position:absolute;left:50%;bottom:0;z-index:-1;
  /* short enough to clear the contact divider, and the gradient reaches full
     transparency at 100% — so it fades out rather than being cut off */
  width:min(1600px,150vw);height:clamp(150px,20vw,300px);
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 62% 100% at 50% 100%,
    rgba(255,104,16,.95) 0%,
    rgba(255,88,8,.62) 26%,
    rgba(255,80,5,.30) 48%,
    rgba(255,80,5,.11) 68%,
    rgba(255,80,5,.03) 85%,
    rgba(255,80,5,0) 100%);
}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.1vw,16px)}
.gal .figure{height:clamp(150px,24vw,330px);background:#111}
.gal img{height:100%;object-fit:cover}
.foot-row{
  margin-top:clamp(60px,8vw,130px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.foot-row a:hover{color:var(--accent)}
.foot-row .sep{color:var(--dim)}
.socials{display:flex;gap:clamp(14px,1.6vw,24px)}
.wordmark{
  margin-top:clamp(50px,7vw,110px);padding-bottom:clamp(18px,2.4vw,36px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.4vw,22px);
  line-height:.82;letter-spacing:-.04em;overflow:hidden;
}
.wordmark .big{font-size:clamp(40px,11.2vw,196px);white-space:nowrap}
.wordmark .yr{font-size:clamp(13px,1.5vw,22px);padding-bottom:.55em;color:var(--muted)}
.wordmark .c{font-size:clamp(22px,4.4vw,74px);padding-bottom:.12em}

/* ============================================================
   PROJECT PAGES
   ============================================================ */
/* The header photos are designed covers with the logo baked in, so they are
   shown whole (never cropped) — centred, capped at 1400px, title overlaid. */
.p-hero{padding:calc(var(--gutter) * 3.2) var(--gutter) 0}
.p-cover{
  position:relative;width:min(100%,1400px);margin-inline:auto;
  overflow:hidden;isolation:isolate;background:var(--surface);
}
.p-cover img{
  width:100%;height:auto;display:block;
  transform:scale(1.05);transition:transform 2s var(--ease);
}
body.ready .p-cover img{transform:scale(1)}
/* title sits under the cover so the brand's own artwork stays clean */
.p-hero-in{width:min(100%,1400px);margin:clamp(24px,3vw,48px) auto 0}
.p-hero h1{font-size:clamp(42px,7vw,124px);line-height:.92;letter-spacing:-.04em}
.p-eyebrow{font-size:var(--fs-label);color:var(--muted);margin-bottom:clamp(10px,1.3vw,20px)}

/* meta row */
.p-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);
  margin-top:clamp(40px,5vw,72px);
}
.p-meta div{border-top:1px solid var(--line);padding-top:16px}
.p-meta dt{font-size:var(--fs-label);color:var(--dim);margin-bottom:10px}
.p-meta dd{margin:0;font-size:var(--fs-card);letter-spacing:-.02em}

/* overview */
.p-body{
  display:grid;grid-template-columns:13.5% minmax(0,1fr);column-gap:6.2%;
  align-items:start;margin-top:clamp(44px,7vw,120px);
}
.p-body .p-label{font-size:var(--fs-label);color:var(--dim);padding-top:.5em}
.p-copy{max-width:62ch}
.p-copy p{color:var(--muted);line-height:1.6;font-size:clamp(15px,1.25vw,18px);margin-top:1.1em}
.p-copy p:first-child{margin-top:0}

/* gallery */
.p-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(50px,7vw,120px)}
.p-gal .figure{background:var(--surface);aspect-ratio:4/3}
.p-gal .figure img{width:100%;height:100%;object-fit:cover}
.p-gal .figure.wide{grid-column:span 2;aspect-ratio:16/7}
.p-gal .figure[hidden]{display:none}
.p-gal-empty{
  border:1px dashed var(--faint);color:var(--dim);
  display:grid;place-items:center;text-align:center;padding:24px;
  aspect-ratio:4/3;grid-column:span 2;font-size:var(--fs-body);line-height:1.6;
}

/* closing statement under the overview */
.p-tagline{
  margin-top:clamp(38px,5vw,78px);
  font-size:clamp(22px,2.6vw,38px);line-height:1.2;letter-spacing:-.03em;
  color:var(--fg);max-width:24ch;
}

/* ---------- CASE STUDY CHAPTERS ---------- */
.chap{margin-top:clamp(72px,9vw,150px)}
/* full-bleed inverted band — escapes the section gutter and repaints
   its own tokens, so everything inside flips without extra rules */
.chap.band{
  --bg:#0D0D0D;
  --fg:#F2F0EC;
  --muted:rgba(242,240,236,.68);
  --dim:rgba(242,240,236,.36);
  --faint:rgba(242,240,236,.18);
  --line:rgba(242,240,236,.18);
  --surface:#171717;
  background:var(--bg);color:var(--fg);
  margin-inline:calc(var(--gutter) * -1);
  padding:clamp(54px,6vw,96px) var(--gutter) clamp(60px,7vw,110px);
}
.chap-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--fs-label);color:var(--muted);
}
.chap h3{
  font-size:clamp(26px,3.6vw,50px);line-height:1.06;letter-spacing:-.03em;
  margin-top:clamp(24px,3vw,44px);max-width:22ch;color:var(--fg);
}
.chap-copy{max-width:62ch;margin-top:clamp(14px,1.6vw,24px)}
.chap-copy p{color:var(--muted);line-height:1.6;font-size:clamp(15px,1.2vw,17px);margin-top:1em}
.chap-copy p:first-child{margin-top:0}

.shots{margin-top:clamp(28px,3.6vw,56px);display:grid;gap:var(--gg)}
.shots + .shots{margin-top:var(--gg)}
.shots.c2{grid-template-columns:repeat(2,1fr)}
.shots.c3{grid-template-columns:repeat(3,1fr)}
.shots.c4{grid-template-columns:repeat(4,1fr)}
.shots.c5{grid-template-columns:repeat(5,1fr)}
/* Equal-height row for images of different proportions. Set --cols to each
   image's width/height ratio (1:1 -> 1fr, 4:5 -> .8fr) and the columns come
   out sized so every image renders exactly as tall as its neighbour, with
   nothing cropped and no empty bars to fill. */
.shots.level{grid-template-columns:var(--cols);align-items:start}
/* square tiles for brand assets — logos, swatches, icons */
.shots .sq{aspect-ratio:1;background:var(--surface);overflow:hidden}
.shots .sq img{width:100%;height:100%;object-fit:cover;display:block}
/* natural height for photography and mockups */
.shots .fl{background:var(--surface);overflow:hidden}
.shots .fl img{width:100%;height:auto;display:block}
/* fixed-ratio crop — trims dead canvas so a small mark can be shown large */
.shots .crop{background:var(--surface);overflow:hidden}
.shots .crop img{width:100%;height:100%;object-fit:cover;display:block}
.shots .r169{aspect-ratio:16/9}
.shots .r43{aspect-ratio:4/3}
/* Dark artwork on a white canvas: multiply drops the white to the page
   colour and leaves the strokes, so no cut-out files are needed.
   Only works over a LIGHTER background — on a dark band it would vanish. */
.shots .knock{background:transparent}
.shots .knock img{mix-blend-mode:multiply}
/* White tile for dark artwork saved on a transparent canvas — the black
   logo versions would otherwise disappear against the page. Pairs with the
   default dark .fl tile so a logo suite shows both colourways side by side. */
.shots .paper{background:#fff}

/* ---------- CONTACT FORM ---------- */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.35fr;
  gap:clamp(40px,6vw,110px);
  margin-top:clamp(30px,4vw,60px);
}
.contact-aside dt{font-size:var(--fs-label);color:var(--dim);letter-spacing:0}
.contact-aside dd{margin:6px 0 clamp(24px,2.6vw,36px);font-size:var(--fs-card);letter-spacing:-.02em}
.contact-aside dd a{transition:color .35s var(--ease)}
.contact-aside dd a:hover{color:var(--accent)}
.contact-aside dd:last-child{margin-bottom:0}

.cform{display:grid;gap:clamp(20px,2.2vw,30px)}
.cform .row{display:grid;gap:clamp(20px,2.2vw,30px);grid-template-columns:1fr 1fr}
.cform label{display:block;font-size:var(--fs-label);color:var(--dim);letter-spacing:0;margin-bottom:9px}
.cform input,.cform textarea{
  width:100%;font:inherit;color:var(--fg);letter-spacing:-.01em;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:0 0 12px;border-radius:0;appearance:none;
  transition:border-color .35s var(--ease);
}
.cform textarea{resize:vertical;min-height:112px;line-height:1.5}
.cform input:focus,.cform textarea:focus{outline:0;border-bottom-color:var(--fg)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--dim)}
/* :user-invalid, not :invalid — otherwise every field is red before it's touched */
.cform input:user-invalid,.cform textarea:user-invalid{border-bottom-color:var(--accent)}
.cform .send{justify-self:start;margin-top:clamp(6px,1vw,14px);cursor:pointer;border:0}
.cform .send[disabled]{opacity:.5;cursor:default}

.cform-note{margin-top:18px;font-size:var(--fs-label);color:var(--dim);min-height:1.4em}
.cform-note.bad{color:var(--accent)}
/* swapped in place of the form once a submission goes through */
.cform-done{display:none}
.cform-done b{display:block;font-size:var(--fs-h3);letter-spacing:-.02em;margin-bottom:10px}
.cform-done p{color:var(--muted);line-height:1.6;max-width:46ch}
.contact-grid.sent .cform{display:none}
.contact-grid.sent .cform-done{display:block}

/* ---------- MURA SPREAD GRID ---------- */
/* Twelve magazine spreads, three up. Every file is 1672x941, so the frames
   are 16:9 and nothing is cropped. */
.mono-cap{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:400;font-size:clamp(10px,.8vw,12px);
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
.mura-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,3.4vw,56px) var(--gg);
  margin-top:clamp(28px,3.6vw,56px);
}
.mura-item{margin:0}
.mura-item .cap{display:block;margin-bottom:clamp(8px,.9vw,12px)}
.mura-item .fr{aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.mura-item .fr img{width:100%;height:100%;object-fit:cover;display:block}
/* placeholder tiles until the remaining spreads land */
.mura-item .fr.slot{
  display:grid;place-items:center;background:transparent;
  border:1px dashed var(--line);color:var(--dim);
}

/* ---------- WORKS INDEX ---------- */
/* works.html — the full project list behind "Explore All". */
.works-hero{padding:calc(var(--gutter) * 4.2) var(--gutter) 0;text-align:center}
.works-hero h1{font-size:clamp(46px,10.5vw,168px);line-height:.92;letter-spacing:-.045em}

.works-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,3.6vw,58px) var(--gg);
  margin-top:clamp(28px,3.6vw,56px);
}
/* 7:5 matches the source files almost exactly, so the covers crop far less
   here than they do in the 860x502 cards on the home page. */
.wcard .figure{aspect-ratio:7/5;background:var(--surface)}
.wcard .figure img{height:100%;object-fit:cover}
.wcard .card-row span{white-space:nowrap}
.wcard a:hover .card-row b{color:var(--accent)}

.works-back{display:flex;justify-content:center;margin-top:clamp(60px,8vw,130px)}

/* ---------- SOCIAL VIDEO ---------- */
/* Square by declaration, not by waiting on the file. A <video> with height:auto
   sizes itself from the poster image, and only falls back to the video's own
   dimensions once metadata arrives — so a missing or slow poster collapses the
   box to the browser default 2:1. Locking the ratio holds the 1:1 crop these
   posts are cut to from first paint. */
.motion{margin-top:clamp(28px,3.6vw,56px);width:min(100%,760px);background:var(--surface)}
.motion video{width:100%;aspect-ratio:1;height:auto;display:block;object-fit:cover}

/* ---------- TYPE SPECIMEN ROWS ---------- */
.caslon{font-family:"Libre Caslon Display",Georgia,"Times New Roman",serif;font-weight:400}
.inter{font-family:"Inter","Inter Tight",Helvetica,Arial,sans-serif}

.tspec{
  display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,2fr);
  gap:clamp(16px,2.6vw,48px);align-items:start;
  padding-block:clamp(22px,2.8vw,42px);border-top:1px solid var(--line);
}
.tspec .lbl{
  font-size:clamp(9.5px,.78vw,11.5px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding-top:.5em;
}
.tspec .fname{
  font-size:clamp(10px,.8vw,12px);letter-spacing:.08em;color:var(--dim);
  margin-top:clamp(12px,1.4vw,20px);
}
.t-display{font-size:clamp(32px,5vw,74px);line-height:1.02;letter-spacing:-.012em}
.t-body{font-size:clamp(15px,1.3vw,19px);line-height:1.55;max-width:46ch}
.t-hier{display:flex;align-items:baseline;gap:clamp(16px,3vw,56px);flex-wrap:wrap}
.t-hier .h{font-size:clamp(21px,2.4vw,34px)}
.t-hier .s{font-weight:500;font-size:clamp(14px,1.35vw,19px);letter-spacing:.02em}
.t-hier .b{font-size:clamp(12px,1vw,15px)}
.t-hier .c{font-size:clamp(10px,.82vw,12.5px);letter-spacing:.09em}
.pal-rule{height:1px;background:var(--line);margin-top:clamp(18px,2.2vw,32px)}
.pal-note{font-style:italic;color:var(--muted);margin-top:clamp(14px,1.7vw,24px);font-size:clamp(13px,1.05vw,16px);max-width:46ch}

/* ---------- VISUAL LANGUAGE BOARD ---------- */
.vl-banner img{width:100%;height:auto;display:block}
.vl-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(20px,2.8vw,50px);margin-top:var(--gg);
}
.vl-side .rule{width:48px;height:1px;background:var(--fg);opacity:.5}
.vl-side h3{font-size:clamp(27px,3.5vw,50px);line-height:1.08;margin:clamp(14px,1.7vw,24px) 0 0;max-width:13ch}
.vl-side p{color:var(--muted);line-height:1.6;font-size:clamp(13px,1vw,15px);max-width:46ch;margin-top:clamp(14px,1.7vw,24px)}
.vl-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gg)}
.vl-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gg);margin-top:var(--gg)}
.vl-cell{overflow:hidden;background:var(--surface)}
.vl-trio .vl-cell{aspect-ratio:3/4}
.vl-strip .vl-cell{aspect-ratio:3/2}
.vl-cell img{width:100%;height:100%;object-fit:cover;display:block}

.vl-defs{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.5vw,24px);
  margin-top:clamp(22px,2.6vw,40px);padding-top:clamp(16px,1.9vw,28px);
  border-top:1px solid var(--line);
}
.vl-defs > div{padding-left:clamp(10px,1.2vw,18px);border-left:1px solid var(--line)}
.vl-defs > div:first-child{padding-left:0;border-left:0}
.vl-defs b{display:block;font-weight:400;font-size:clamp(8.5px,.7vw,11px);letter-spacing:.13em;text-transform:uppercase}
.vl-defs p{color:var(--muted);font-size:clamp(10.5px,.85vw,13px);line-height:1.5;margin-top:clamp(6px,.8vw,10px)}

/* ---------- PACKAGING SYSTEM (Weathered) ---------- */
.pks-head{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(20px,3vw,50px);flex-wrap:wrap}
.pks-head p{color:var(--muted);line-height:1.6;font-size:clamp(13px,1vw,15px);max-width:34ch;margin-top:clamp(10px,1.2vw,16px)}
.pks-head .lockup{width:min(100%,clamp(180px,24vw,330px));flex:none}
.pks-head .lockup img{width:100%;height:auto;display:block}

.pks-hero{margin-top:clamp(24px,3vw,46px)}
.pks-hero img{width:100%;height:auto;display:block}

.pks-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gg);margin-top:clamp(24px,3vw,46px)}
.pks-det .im{overflow:hidden;aspect-ratio:4/5;background:var(--surface);margin-top:10px}
.pks-det .im img{width:100%;height:100%;object-fit:cover;display:block}

.pks-sys{margin-top:clamp(32px,4vw,64px);padding-top:clamp(18px,2.2vw,32px);border-top:1px solid var(--line)}
.pks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(16px,2.4vw,40px);margin-top:clamp(18px,2.2vw,34px)}
/* no fixed ratio — these are a matched set, so natural height keeps them level
   and nothing gets cut off the top or bottom of the bottles */
.pks-item .im{overflow:hidden;background:var(--surface)}
.pks-item .im img{width:100%;height:auto;display:block}
.pks-item .bar{width:26px;height:1px;background:var(--line);margin:clamp(14px,1.6vw,22px) 0 clamp(8px,1vw,12px)}
.pks-item b{display:block;font-weight:400;font-size:clamp(9px,.74vw,11.5px);letter-spacing:.13em;text-transform:uppercase}
.pks-item span{display:block;color:var(--muted);font-size:clamp(10px,.8vw,12.5px);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}

/* ---------- ROUTINE GUIDE ---------- */
.rg{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--gg);margin-top:clamp(28px,3.6vw,56px);align-items:stretch;
}
.rg-main img{width:100%;height:auto;display:block}
/* Flex with a zero basis, so these three don't report their natural height into
   the row calculation. The flyer alone sets the height and they divide it. */
.rg-side{display:flex;flex-direction:column;gap:var(--gg)}
.rg-side .im{flex:1 1 0;min-height:0;overflow:hidden;background:var(--surface)}
.rg-side .im img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- BRAND BOARD ---------- */
.board{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);
  gap:clamp(26px,4vw,70px);
  margin-top:clamp(28px,3.6vw,56px);
}
.board + .board{
  margin-top:clamp(40px,5vw,80px);
  border-top:1px solid var(--line);
  padding-top:clamp(30px,3.6vw,56px);
}
.board-label{
  font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:clamp(14px,1.6vw,22px);
}

/* colour swatches — real colours, real text */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gg)}
.sw i{display:block;aspect-ratio:4/5;background:var(--c);border:1px solid var(--line)}
.sw b{display:block;font-weight:400;font-size:var(--fs-label);letter-spacing:.07em;text-transform:uppercase;margin-top:12px}
.sw span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:3px}

/* type specimens */
.spec + .spec{margin-top:clamp(26px,3.4vw,46px)}
.spec .name{font-size:clamp(36px,4.4vw,62px);line-height:1.05;letter-spacing:-.02em}
.spec .set{
  font-size:clamp(10px,.9vw,12.5px);color:var(--muted);
  letter-spacing:.06em;line-height:2;margin-top:14px;word-break:break-word;
}
.spec.inter .name,.spec.inter .set{font-family:"Inter","Inter Tight",Helvetica,Arial,sans-serif}
.spec.cormorant .name,.spec.cormorant .set{font-family:"Cormorant Garamond",Garamond,Georgia,serif}
.spec.cormorant .name{font-weight:300;font-size:clamp(34px,4vw,58px);line-height:1.1;letter-spacing:0}
.spec.cormorant .set{letter-spacing:.05em;line-height:1.9}

/* icon row — the labels are baked into the artwork, so no captions */
.iconrow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gg);margin-top:var(--gg)}
.iconrow figure{margin:0}
.iconrow img{width:100%;height:auto;display:block;mix-blend-mode:multiply}

/* ---------- CAMPAIGN BOARD ---------- */
.camp{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);
  gap:clamp(24px,3.4vw,56px);margin-top:clamp(28px,3.6vw,56px);
}
.camp-side{display:flex;flex-direction:column}
.camp-side .rule{width:40px;height:1px;background:var(--fg);opacity:.55;margin:0 0 clamp(20px,2.4vw,32px)}
.camp-side h3{font-size:clamp(24px,2.9vw,42px);line-height:1.1;margin:0 0 clamp(13px,1.5vw,22px);max-width:13ch}
.camp-side .lead{color:var(--fg);font-size:clamp(14px,1.15vw,17.5px);line-height:1.45;margin-top:0}
.camp-side p{color:var(--muted);line-height:1.65;font-size:clamp(14px,1.05vw,16px);margin-top:1.1em}
.camp-side p:first-of-type{margin-top:0}
.camp-line{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-weight:300;
  font-size:clamp(21px,2.1vw,31px);line-height:1.25;margin-top:10px;
}
.camp-side .mark{margin-top:auto;padding-top:clamp(32px,4vw,64px);width:min(100%,230px)}
.camp-side .mark img{width:100%;height:auto;display:block}
.camp-main{display:grid;gap:var(--gg);align-content:start}
/* Columns grow in proportion to each image's aspect ratio, so every image
   in the row resolves to the SAME height however differently shaped they are.
   --ar is measured from the file by site.js. */
.camp-pair{display:flex;gap:var(--gg);align-items:flex-start}
.camp-pair .camp-shot{flex:var(--ar,1) 1 0;min-width:0}
.camp-shot img{width:100%;height:auto;display:block}
/* Light artwork on a dark canvas. `lighten` takes the brighter of the two, so
   a canvas at or below the page colour disappears exactly, where `screen`
   would have washed it lighter than the page. */
.shots .knock-dark,.knock-dark{background:transparent}
.knock-dark img{mix-blend-mode:lighten}

/* ---------- COLLECTION ---------- */
.serif{font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-weight:300}

.coll-hero img{width:100%;height:auto;display:block}
.coll-intro{text-align:center;max-width:60ch;margin:clamp(34px,4.4vw,72px) auto 0}
.coll-intro h3{
  font-size:clamp(26px,3.6vw,52px);line-height:1.1;
  letter-spacing:.06em;text-transform:uppercase;max-width:none;margin:0;
}
.coll-intro p{
  color:var(--muted);line-height:1.65;margin-top:clamp(12px,1.4vw,20px);
  font-size:clamp(14px,1.05vw,16px);max-width:52ch;margin-inline:auto;
}

.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gg);margin-top:clamp(30px,4vw,62px)}
.prod{background:rgba(255,255,255,.5);padding:clamp(10px,1vw,15px)}
.prod img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.prod .meta{padding:clamp(14px,1.5vw,22px) clamp(2px,.5vw,8px) clamp(4px,.6vw,10px)}
.prod .no{font-size:clamp(9px,.72vw,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.prod .nm{font-size:clamp(18px,1.8vw,27px);line-height:1.15;margin-top:clamp(7px,.8vw,11px)}
.prod .dt{font-size:clamp(12px,.92vw,14px);color:var(--muted);margin-top:clamp(5px,.6vw,8px)}

.detail-bar{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:center;
  background:rgba(255,255,255,.5);padding:clamp(16px,2vw,30px);margin-top:var(--gg);
}
.detail-bar .dot{width:clamp(64px,6.6vw,104px);aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none}
.detail-bar .dot img{width:100%;height:100%;object-fit:cover;display:block}
.detail-bar h4{font-size:clamp(16px,1.7vw,25px);letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
.detail-bar p{color:var(--muted);line-height:1.6;margin-top:clamp(7px,.9vw,12px);font-size:clamp(13px,1vw,15.5px);max-width:70ch}

/* ---------- PACKAGING ---------- */
.pack-lead{max-width:64ch;margin-top:clamp(22px,2.6vw,38px)}
.pack-lead h3{font-size:clamp(28px,3.8vw,54px);line-height:1.08;letter-spacing:-.01em;max-width:none;margin:0}
.pack-lead p{color:var(--muted);line-height:1.65;margin-top:clamp(12px,1.4vw,20px);font-size:clamp(14px,1.05vw,16px);max-width:54ch}

/* left item spans both rows; its image flexes to fill whatever height the
   right-hand column ends up being, so the two columns finish level */
.pack{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--gg);margin-top:clamp(28px,3.6vw,56px)}
.pack-item{display:flex;flex-direction:column;background:rgba(255,255,255,.5);padding:clamp(10px,1vw,15px)}
.pk-a{grid-row:span 2}
.pk-img{overflow:hidden}
.pk-a .pk-img{flex:1;min-height:0}
.pk-a .pk-img img{width:100%;height:100%;object-fit:cover;display:block}
.pk-img img{width:100%;height:auto;display:block}
.pk-cap{padding:clamp(14px,1.5vw,22px) clamp(2px,.5vw,6px) clamp(2px,.4vw,6px)}
.pk-cap b{display:block;font-weight:400;font-size:clamp(9.5px,.78vw,11.5px);letter-spacing:.13em;text-transform:uppercase}
.pk-cap p{color:var(--muted);font-size:clamp(12px,.95vw,14.5px);line-height:1.55;margin-top:clamp(6px,.7vw,10px);max-width:46ch}

.pack-foot{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
  border-top:1px solid var(--line);margin-top:clamp(26px,3vw,48px);padding-top:clamp(16px,1.8vw,26px);
  font-size:clamp(9.5px,.78vw,11.5px);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.pack-foot .mono{width:clamp(20px,2.1vw,32px);flex:none}
.pack-foot .mono img{width:100%;height:auto;display:block;mix-blend-mode:multiply}

/* ---------- DIGITAL EXPERIENCE ---------- */
.dig-lead{margin-top:clamp(22px,2.6vw,38px)}
.dig-lead h3{font-size:clamp(30px,4.4vw,64px);line-height:1.05;margin:0;max-width:none}
.dig-lead .rule{width:58px;height:1px;background:var(--fg);opacity:.45;margin:clamp(16px,1.9vw,28px) 0}
.dig-lead p{color:var(--muted);line-height:1.65;font-size:clamp(14px,1.05vw,16px);max-width:50ch}

/* widths in proportion to each mockup's shape => matching heights */
.dig-row{display:flex;gap:clamp(16px,2.4vw,46px);align-items:flex-start;margin-top:clamp(30px,4vw,64px)}
.dig-item{flex:var(--ar,1) 1 0;min-width:0;text-align:center;margin:0}
.dig-item img{width:100%;height:auto;display:block}
.dig-item figcaption{margin-top:clamp(12px,1.4vw,20px);font-size:clamp(12px,.95vw,14.5px);color:var(--muted)}

.dig-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:clamp(30px,3.6vw,56px);padding-top:clamp(16px,1.8vw,26px);
}
.dig-foot .nm{font-size:clamp(11px,.9vw,13px);letter-spacing:.18em;text-transform:uppercase}
.dig-foot .tag{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-style:italic;font-weight:400;
  color:var(--muted);font-size:clamp(14px,1.15vw,18px);
}

/* next project */
.p-next{border-top:1px solid var(--line);margin-top:clamp(60px,8vw,140px);padding-top:20px}
.p-next .lbl{display:flex;justify-content:space-between;font-size:var(--fs-label);color:var(--muted)}
.p-next a{display:block;margin-top:clamp(20px,3vw,44px)}
.p-next h3{font-size:clamp(38px,8vw,116px);line-height:.94;letter-spacing:-.04em;transition:color .4s var(--ease)}
.p-next a:hover h3{color:var(--accent)}
.p-next .thumb{width:var(--card-w);max-width:100%;aspect-ratio:860/502;overflow:hidden;background:var(--surface);margin-top:clamp(20px,2.6vw,36px)}
.p-next .thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1s var(--ease)}
.p-next a:hover .thumb img{transform:scale(1)}

/* placeholder markers so unfinished copy is obvious */
.ph{color:var(--accent);opacity:.85}

/* ---------- RESPONSIVE ---------- */
/* Once the card is capped at 860 there's room either side, so the count and
   Explore All pin alongside it instead of stacking above and below. */
@media (min-width:1500px){
  .stack-rail{
    position:sticky;top:100px;z-index:6;
    height:0;overflow:visible;margin-bottom:0;
    pointer-events:none;
  }
}
@media (max-width:860px){
  :root{--card-w:100%}
  /* fixed-attachment backgrounds are unreliable on mobile, and the cards
     don't stack here, so neither trick is needed */
  :root{--texture:
    linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.58)),
    url("new-project-header-photos/textured-background.webp") center/cover #050505}
  .stack{gap:clamp(28px,7vw,40px)}
  .stack .card{position:relative;top:auto !important;background:none}
  .hero-mid{top:auto;bottom:44%;transform:none}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:0}
  .hero-bottom .side{padding-bottom:0}
  .hero-bottom .side.right{align-self:flex-end}
  .about-grid{grid-template-columns:1fr;row-gap:30px}
  .about-thumb{width:46%;aspect-ratio:228/245}
  .about-grid .h2{margin-top:0}
  .about-grid .stats{grid-column:1}
  .stats{grid-template-columns:1fr;gap:36px}
  .grid4{grid-template-columns:1fr}
  .gcell{border-right:0}
  .gcell:nth-child(n+3){border-bottom:1px solid var(--line)}
  .gcell:last-child{border-bottom:0}
  .edu{grid-template-columns:1fr}
  .edu .row{row-gap:6px}
  .gal{grid-template-columns:1fr 1fr}
  .gal .figure:last-child{grid-column:span 2}
  /* EXPERIENCE — on a phone the 16:9 headers were being cover-cropped inside a
     tall sticky viewport, which sliced the client logos and left a dead grey
     band through the middle. Below 860px each panel becomes a stacked card:
     the header sits in its own 16:9 frame (nothing cropped) with the copy
     underneath on the page background. */
  .panel{
    position:relative;
    height:auto;
    display:block;
    overflow:visible;
    padding:0 0 calc(var(--gutter) * 1.8);
  }
  .panel + .panel{padding-top:calc(var(--gutter) * 1.4);border-top:1px solid var(--line)}
  .panel .bgi{
    position:relative;inset:auto;z-index:0;
    aspect-ratio:16/9;overflow:hidden;
    margin-bottom:calc(var(--gutter) * 1.1);
  }
  .panel .bgi img{object-position:50% 50%}
  .panel .bgi::after{
    background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 55%,rgba(0,0,0,.30) 100%);
  }
  .panel-head{padding-inline:var(--gutter);margin-bottom:12px;color:var(--dim)}
  .panel:not(:first-child) .panel-head{display:none}
  .panel-body{
    flex-direction:column;align-items:flex-start;gap:12px;
    padding-inline:var(--gutter);
  }
  .panel-body h3{font-size:clamp(30px,8.6vw,46px);line-height:1.02}
  .panel-meta{text-align:left;max-width:none}
  .panel-meta .yr{font-size:clamp(17px,4.6vw,21px)}
  .p-meta{grid-template-columns:repeat(2,1fr)}
  .p-body{grid-template-columns:1fr;row-gap:18px}
  .works-grid{grid-template-columns:1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .cform .row{grid-template-columns:1fr}
  .mura-grid{grid-template-columns:1fr}
  .shots.c3{grid-template-columns:repeat(2,1fr)}
  .shots.c4{grid-template-columns:repeat(2,1fr)}
  .shots.c5{grid-template-columns:repeat(3,1fr)}
  .board{grid-template-columns:1fr;gap:26px}
  .camp{grid-template-columns:1fr;gap:28px}
  .camp-side .mark{margin-top:24px;padding-top:0}
  .camp-pair{flex-direction:column}
  .camp-pair .camp-shot{flex:none;width:100%}
  .prods{grid-template-columns:1fr}
  .pack{grid-template-columns:1fr}
  .pk-a{grid-row:auto}
  .pk-a .pk-img{flex:none}
  .pk-a .pk-img img{height:auto}
  .detail-bar{grid-template-columns:1fr;justify-items:start;gap:16px}
  .swatches{grid-template-columns:repeat(3,1fr)}
  .tspec{grid-template-columns:1fr;gap:12px}
  .vl-top{grid-template-columns:1fr;gap:24px}
  .vl-strip{grid-template-columns:repeat(2,1fr)}
  .vl-defs{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .vl-defs > div:nth-child(odd){padding-left:0;border-left:0}
  .rg{grid-template-columns:1fr}
  .rg-side .im{flex:none}
  .rg-side .im img{height:auto}
  .pks-details{grid-template-columns:1fr}
  .pks-grid{grid-template-columns:1fr}
  .iconrow{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .p-gal{grid-template-columns:1fr}
  .p-gal .figure.wide{grid-column:span 1}
  .p-gal-empty{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .rise > span,.figure img,.hero-media img{transform:none !important;clip-path:none !important}
  .anim{opacity:1 !important;transform:none !important}
  .h2 w{color:var(--fg) !important}
}