/* ============================================================
   ANDMELO — Website v3  ·  Editorial System
   Helios Extended (titles) · Inter Tight · JetBrains Mono
   Light interior surfaces · dark bento home · dark footer
   Tokens per ANDMELO Brand System v10
   ============================================================ */

@font-face{font-family:"Helios";src:url(fonts/HeliosExt.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helios";src:url(fonts/HeliosExt-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* surfaces */
  --ink:#0a0a0a; --ink-2:#131313; --ink-3:#1d1d1d;
  --paper:#f4f3ef; --paper-2:#eceae4; --paper-3:#e2dfd6;
  /* lines & grey */
  --line:#d8d6cd; --line-2:#1f1f1f;
  --grey:#8a8780; --grey-2:#5d5b56; --grey-3:#b6b3aa;
  /* accent */
  --accent:#141414; --accent-2:#3a3a3a; --pearl:#efece5;
  /* atmosphere */
  --pink:#f0a3a7; --teal:#6f8a86; --bronze:#b69072; --steel:#7c8392;
  --green:#3aaa6f; --red:#e6404e;

  --logo:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif; /* Helios retired — 3 families only: Geist · Instrument Serif · Geist Mono */
  --display:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --radius:16px; --radius-sm:10px; --gutter:24px;
  --pad-x:44px; --maxw:1600px;
  --ease:cubic-bezier(.7,.05,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* legacy aliases still referenced in markup */
  --bg:var(--ink); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
  --ink-soft:var(--grey-2); --gold:var(--accent); --gold-soft:var(--accent);
  --hair:rgba(10,10,10,.07);
}
@media (max-width:1099px){:root{--pad-x:28px}}
@media (max-width:720px){:root{--pad-x:18px}}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-feature-settings:"ss01","ss02","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
/* home bg follows theme */
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
::-webkit-scrollbar{width:0;height:0}

/* LUX TYPE — .serif marks a display title (Geist light); em = Instrument Serif italic accent */
.serif{font-family:var(--display);font-weight:300;letter-spacing:-.03em}
.italic{font-style:italic;font-family:var(--serif);font-weight:400}
em{font-style:italic;font-family:var(--serif);font-weight:400;letter-spacing:0}
.serif em,.section-title em,.hero-title em,h1 em,h2 em,.brief-h em,.rev-quote em,.contact-big em,.cta-band em,.lede em,.big em,.tile-cap em{
  font-family:var(--serif);font-style:italic;font-weight:400;color:inherit;letter-spacing:0}
.mono{font-family:var(--mono);font-weight:400}
.gold{color:var(--accent)}

/* film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.4;
  background-image:radial-gradient(rgba(10,10,10,.04) 1px,transparent 1px);background-size:3px 3px}
body[data-page="home"]::after{opacity:.5;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);mix-blend-mode:screen}

/* ============ CURSOR ============ */
/* custom cursor = a circle with a dot in the centre (white via difference-blend → reads on black & white) */
.cursor{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:#fff;pointer-events:none;z-index:2000;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .25s var(--ease),height .25s var(--ease)}
.cursor-ring{position:fixed;top:0;left:0;width:32px;height:32px;border:1.5px solid #fff;border-radius:50%;pointer-events:none;z-index:1999;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),opacity .3s}
body.ready .cursor-ring{opacity:1}
.cursor.lg{width:9px;height:9px}
.cursor-ring.lg{width:54px;height:54px;opacity:1}
@media (hover:none),(max-width:1099px){.cursor,.cursor-ring{display:none}}

/* ============ MOBILE DRAWER ============ */
.drawer{position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--paper);padding:120px var(--pad-x) 40px;display:flex;flex-direction:column;overflow-y:auto;
  transform:translateY(-100%);visibility:hidden;transition:transform .7s var(--ease),visibility .7s;pointer-events:none}
body.menu-open .drawer{transform:none;visibility:visible;pointer-events:auto}
.drawer a{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(244,243,239,.1);
  font-family:var(--display);font-size:clamp(28px,5vw,44px);color:var(--paper);transition:color .3s,padding-left .3s var(--ease)}
.drawer a:hover{color:var(--accent);padding-left:10px}
.drawer a .num{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--grey-3)}
.drawer-foot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-3)}

/* ============================================================
   HOME BENTO HERO — andmelo.com direction, elevated
   ============================================================ */
.home-stage{background:#000;padding:8px;min-height:100svh;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,27vw,560px);gap:8px}
.hero-main{position:relative;border-radius:var(--radius);overflow:hidden;background:#111;min-height:calc(100svh - 16px)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:contrast(1.04) saturate(1.03)}
/* gloss + vignette + bottom fade */
.hero-main::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 40%,transparent 46%,rgba(0,0,0,.5) 100%)}
.hero-main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.15) 36%,transparent 62%)}

/* floating nav pill */
.home-nav{position:absolute;top:20px;left:20px;z-index:20;display:flex;align-items:center;gap:8px;
  padding:8px;background:rgba(12,12,12,.5);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:0 10px 40px -12px rgba(0,0,0,.6)}
.home-burger{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:background .3s}
.home-burger:hover{background:rgba(255,255,255,.14)}
.home-burger span{width:16px;height:1.5px;background:#fff;border-radius:2px;transition:.3s}
.home-logo{display:flex;align-items:center;gap:3px;padding:0 14px 0 6px;color:#fff;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1}
.home-logo .and{font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.08em;line-height:.9;transform:translateY(-5px)}
.home-logo sup{font-size:.42em;font-weight:400;vertical-align:super;margin-left:1px;color:var(--accent)}
.home-nav-links{display:flex;align-items:center;gap:2px;margin-left:6px}
.home-nav-links a{color:rgba(255,255,255,.8);font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:13px 15px;border-radius:11px;transition:color .3s,background .3s}
.home-nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.home-nav-links a.build{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);margin-left:4px}
.home-nav-links a.build:hover{background:var(--accent);color:#000;border-color:var(--accent)}

/* headline */
.hero-copy{position:absolute;left:52px;right:52px;bottom:52px;z-index:10;color:#fff;max-width:900px}
.hero-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,239,.72);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero-kicker i{width:6px;height:6px;border-radius:50%;background:var(--pearl);box-shadow:0 0 0 4px rgba(239,236,229,.18);animation:pulse 1.8s ease-in-out infinite}
.hero-title{font-family:var(--display);font-weight:700;font-size:clamp(52px,7.4vw,132px);line-height:.86;letter-spacing:-.02em;text-transform:uppercase}
.hero-lines{margin-top:24px;font-family:var(--sans);font-weight:300;font-size:clamp(16px,1.7vw,27px);line-height:1.4;letter-spacing:-.01em;color:rgba(255,255,255,.92)}
.hero-lines span{display:block}
.hero-lines em{font-style:italic;color:var(--accent)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* bottom tools */
.hero-tools{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:12px}
.hero-ico{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(0,0,0,.24);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:.3s var(--ease)}
.hero-ico:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px)}
.hero-line{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:10;width:120px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.hero-line::after{content:"";position:absolute;left:-38%;top:0;height:100%;width:38%;background:#fff;border-radius:3px;animation:heroLine 3.6s var(--ease) infinite}
@keyframes heroLine{to{left:100%}}

/* right rail cards */
.hero-rail{display:grid;grid-template-rows:repeat(3,1fr);gap:8px;min-height:calc(100svh - 16px)}
.rail-card{position:relative;border-radius:var(--radius);overflow:hidden;background:#111;display:block}
.rail-card img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(1.05);transition:transform 1.4s var(--ease)}
.rail-card:hover img{transform:scale(1.06)}
.rail-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent 46%),
  linear-gradient(180deg,rgba(255,255,255,.1),transparent 26%);mix-blend-mode:normal}
.rail-num{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.72);
  background:rgba(0,0,0,.32);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px}
.rail-label{position:absolute;left:24px;bottom:24px;z-index:2;color:#fff;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.3vw,24px);letter-spacing:-.01em;text-transform:uppercase}
.rail-arrow{position:absolute;right:20px;bottom:20px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:.35s var(--ease)}
.rail-card:hover .rail-arrow{background:var(--accent);color:#000;border-color:var(--accent);transform:rotate(-45deg)}

@media (max-width:1024px){
  .home-stage{grid-template-columns:1fr;min-height:auto}
  .hero-main{min-height:82svh}
  .hero-rail{grid-template-rows:none;grid-template-columns:repeat(3,1fr);min-height:0;height:26vh;min-height:220px}
  .home-nav-links{display:none}
}
@media (max-width:640px){
  .hero-tools{left:auto;right:20px;transform:none}
  .hero-ico{width:40px;height:40px}
  .hero-line{display:none}
  .hero-copy{padding-right:150px}
  .hero-copy{left:26px;bottom:40px;max-width:90%}
  .hero-rail{grid-template-columns:1fr;height:auto}
  .rail-card{aspect-ratio:16/10}
  .home-nav{top:12px;left:12px}
}

/* ============================================================
   FULL-SCREEN MENU REVEAL — press button, site shifts up
   Accordion styled exactly like the V10 panel heads
   ============================================================ */
.site-shift{position:relative;z-index:70;transition:transform 1s var(--ease);will-change:transform}
body.nav-open{overflow:hidden}
body.nav-open .site-shift{transform:translateY(-100vh)}

.menu-screen{position:fixed;inset:0;z-index:120;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform 1s var(--ease);will-change:transform}
body.nav-open .menu-screen{transform:translateY(0)}
.menu-screen__head{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad-x);border-bottom:1px solid var(--line);flex:0 0 auto}
.menu-screen__brand{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:-.01em}
.menu-screen__brand .dot{color:var(--accent)}
.menu-close{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:11px 16px 11px 18px;background:transparent;transition:.3s var(--ease)}
.menu-close .x{font-size:15px;line-height:1}
.menu-close:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-acc{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center}

.mrow{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto auto 52px;align-items:center;gap:20px;
  padding:14px var(--pad-x);border-bottom:1px solid var(--line);overflow:hidden;color:var(--ink);
  transition:padding .55s var(--ease),color .5s var(--ease)}
.mrow:last-child{border-bottom:0}
.mrow::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateX(-100%);transition:transform .6s var(--ease)}
.mrow:hover{color:var(--paper);padding-top:22px;padding-bottom:22px}
.mrow:hover::before{transform:translateX(0)}
.mrow__no{font-family:var(--mono);font-size:13px;color:var(--grey-2);transition:color .5s var(--ease),transform .55s var(--ease)}
.mrow:hover .mrow__no{color:var(--accent);transform:translateX(2px)}
.mrow__name{font-family:var(--sans);font-weight:300;font-size:clamp(34px,4.8vw,72px);line-height:1;letter-spacing:-.045em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;transition:letter-spacing .55s var(--ease)}
.mrow:hover .mrow__name{letter-spacing:-.05em}
.mrow__prev{position:relative;width:0;height:78px;border-radius:999px;overflow:hidden;opacity:0;background:#222;justify-self:end;align-self:center;
  transition:width .7s var(--ease),opacity .5s var(--ease)}
.mrow__prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:contrast(1.08) saturate(1.05);transition:transform 6s linear}
.mrow:hover .mrow__prev{width:200px;opacity:1}
.mrow:hover .mrow__prev img{transform:scale(1.18)}
.mrow__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--grey-2);text-align:right;justify-self:end;white-space:nowrap;transition:color .5s var(--ease)}
.mrow:hover .mrow__meta{color:rgba(255,255,255,.65)}
.mrow__act{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);position:relative;justify-self:end;
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .55s var(--ease)}
.mrow__act::before,.mrow__act::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.mrow__act::after{transform:translate(-50%,-50%) rotate(90deg)}
.mrow:hover .mrow__act{background:var(--paper);border-color:var(--paper);color:var(--ink);transform:rotate(90deg)}
.mrow--cta .mrow__name{color:var(--accent-2)}
@media (max-width:820px){
  .menu-acc{justify-content:flex-start}
  .mrow{grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;padding:18px var(--pad-x)}
  .mrow__prev,.mrow__meta{display:none}
}

/* ============================================================
   INTERIOR — light surfaces
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto}
.section{padding:120px var(--pad-x)}
@media (max-width:720px){.section{padding:76px var(--pad-x)}}

/* interior fixed nav (light) */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad-x);transition:padding .5s var(--ease),background .5s,border-color .5s}
.nav.scrolled{padding:13px var(--pad-x);background:rgba(244,243,239,.72);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line)}
.nav-brand{display:flex;align-items:baseline;gap:.02em;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);z-index:2}
.nav-brand b{font-weight:700}
.nav-brand .dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);
  padding:9px 13px;border-radius:999px;transition:color .3s,background .3s}
.nav-link:hover{color:var(--ink);background:var(--paper-2)}
.nav-link.current{color:var(--paper);background:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--line);border-radius:999px;color:var(--ink);transition:.35s}
.nav-cta .d{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}
.nav-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav-cta:hover .d{background:var(--accent)}
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;position:relative;z-index:200}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:.35s var(--ease)}
.nav-toggle span::before{transform:translate(-50%,-5px)}
.nav-toggle span::after{transform:translate(-50%,5px)}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:translate(-50%,-50%) rotate(45deg);background:var(--paper)}
body.menu-open .nav-toggle span::after{transform:translate(-50%,-50%) rotate(-45deg);background:var(--paper)}
body.menu-open .nav-toggle{border-color:rgba(244,243,239,.3)}
@media (max-width:1099px){.nav-links,.nav-cta{display:none}.nav-toggle{display:block}}

/* primitives */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);display:inline-flex;align-items:center;gap:10px}
.eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:54px;flex-wrap:wrap}
.section-head .sh-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.section-head .sh-label b{color:var(--ink);font-weight:400}
.section-title{font-family:var(--display);font-weight:400;font-size:clamp(38px,6vw,88px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase}

.link-arrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding-bottom:4px;border-bottom:1px solid var(--ink);transition:gap .35s var(--ease),color .3s,border-color .3s}
.link-arrow .a{transition:transform .35s var(--ease)}
.link-arrow:hover{gap:18px;color:var(--accent-2);border-color:var(--accent)}
.link-arrow:hover .a{transform:translateX(4px)}

.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 24px;border-radius:999px;transition:.4s var(--ease)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--accent);color:var(--ink)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}

/* ============ PAGE HEADER ============ */
.page-head{position:relative;padding:180px var(--pad-x) 84px;border-bottom:1px solid var(--line);overflow:hidden}
.page-head::before{content:"";position:absolute;right:-10%;top:-30%;width:60vmin;height:60vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(198,203,212,.28),transparent 62%);filter:blur(60px);pointer-events:none}
.page-head .ph-eyebrow{margin-bottom:26px;position:relative}
.page-head h1{position:relative;font-family:var(--display);font-weight:400;font-size:clamp(52px,10vw,172px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.page-head .ph-sub{position:relative;margin-top:28px;max-width:60ch;font-size:clamp(16px,1.4vw,20px);line-height:1.55;color:var(--grey-2)}
.page-head .ph-sub a{color:var(--accent-2);border-bottom:1px solid var(--line)}
.page-head .ph-meta{position:relative;margin-top:38px;display:flex;gap:36px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.page-head .ph-meta b{color:var(--ink);font-weight:400;display:block;margin-top:5px;font-family:var(--display);font-size:22px;letter-spacing:-.01em}

/* ============ WORK GRID ============ */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-auto-flow:row dense}
.tile{position:relative;display:block;overflow:hidden;border-radius:var(--radius-sm);background:var(--paper-2)}
.tile.full{grid-column:1/-1}
.tile-media{position:relative;overflow:hidden;aspect-ratio:16/10}
.tile.full .tile-media{aspect-ratio:16/7}
.tile.tall .tile-media{aspect-ratio:4/5}
.tile-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(1.05);transform:scale(1.04);transition:transform 1.3s var(--ease)}
.tile:hover .tile-media img{transform:scale(1.1)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,10,10,.72),transparent 52%);opacity:0;transition:opacity .5s}
.tile:hover::after{opacity:1}
.tile-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  color:var(--paper);opacity:0;transform:translateY(10px);transition:.5s var(--ease)}
.tile:hover .tile-cap{opacity:1;transform:none}
.tile-cap .t{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,32px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.tile-cap .t em{font-style:normal;color:rgba(244,243,239,.62);font-size:.5em;display:block;margin-top:8px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tile-cap .yr{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(244,243,239,.72)}
.tile-idx{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--paper);
  background:rgba(10,10,10,.4);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px}
@media (max-width:720px){.work-grid{grid-template-columns:1fr}.tile-cap{opacity:1;transform:none}.tile::after{opacity:.55}}

/* ============ CLIENTS (ANDV2 iridescent sweep) ============ */
.clients-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.clients-list li{position:relative;padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--sans);font-weight:300;font-size:clamp(34px,6vw,92px);line-height:1.1;letter-spacing:-.04em;color:var(--ink);cursor:default;
  background-image:linear-gradient(115deg,
    hsl(280 55% 60%) 0%,hsl(330 65% 65%) 14%,hsl(15 75% 62%) 28%,hsl(155 55% 55%) 42%,
    hsl(195 65% 58%) 56%,hsl(255 55% 65%) 70%,hsl(330 65% 65%) 84%,hsl(280 55% 60%) 100%);
  background-size:220% 100%;background-position:0% 0%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--ink);
  transition:-webkit-text-fill-color .45s var(--ease-out),background-position 1.6s var(--ease),padding-left .55s var(--ease)}
.clients-list li::after{content:"→";position:absolute;right:0;top:50%;transform:translate(20px,-50%);opacity:0;font-size:.4em;
  -webkit-text-fill-color:var(--grey-2);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.clients-list li:hover{padding-left:24px;-webkit-text-fill-color:transparent;background-position:100% 0%}
.clients-list li:hover::after{opacity:1;transform:translate(0,-50%);-webkit-text-fill-color:var(--grey-2)}
.clients-list li em{font-style:italic}
@media (max-width:720px){.clients-list li{font-size:34px;padding:12px 0}}

/* ============ SERVICES ACCORDION ============ */
.svc-list{border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line);overflow:hidden;transition:background .5s}
.svc.active{background:var(--paper-2)}
.svc-head{display:grid;grid-template-columns:64px 1fr auto 52px;gap:24px;align-items:center;padding:26px 8px 26px 0;cursor:pointer}
.svc-head .num{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--grey)}
.svc-head h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,46px);line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.svc-head .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.svc-head .tags span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--grey-2)}
.svc-head .tog{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--ink);justify-self:end;transition:transform .55s var(--ease),background .3s,color .3s}
.svc.active .tog{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
.svc-body{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.svc.active .svc-body{max-height:420px}
.svc-body-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:6px 0 34px 88px}
.svc-body-in p{font-size:15px;line-height:1.6;color:var(--grey-2);max-width:48ch}
.svc-body-in .deliv{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey-2)}
.svc-body-in .deliv b{display:block;color:var(--grey);font-weight:400;margin-bottom:3px}
@media (max-width:820px){.svc-head{grid-template-columns:44px 1fr 44px;gap:14px}.svc-head .tags{display:none}.svc-body-in{grid-template-columns:1fr;gap:18px;padding:6px 0 26px 0}.svc.active .svc-body{max-height:560px}}

/* ============ MARQUEE / PRESS ============ */
.marquee{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 55s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq-item{flex:0 0 auto;padding:30px 44px;border-right:1px solid var(--line);font-family:var(--display);font-weight:400;font-size:clamp(22px,2.2vw,30px);text-transform:uppercase;color:var(--grey-2);white-space:nowrap;transition:color .3s}
.marq-item:hover{color:var(--accent)}
.press-strip .marq-item{display:flex;align-items:center;justify-content:center;min-height:130px;min-width:220px;color:var(--ink)}
.lg{color:var(--ink);text-align:center;line-height:1;opacity:.62;transition:opacity .3s,transform .4s var(--ease)}
.marq-item:hover .lg{opacity:1;transform:scale(1.05)}
/* mastheads — Instrument Serif (Didone) + Geist only */
.lg-vogue{font-family:var(--serif);font-size:34px;letter-spacing:.24em}
.lg-gq{font-family:var(--serif);font-size:44px;letter-spacing:.01em}
.lg-tatler{font-family:var(--serif);font-style:italic;font-size:34px}
.lg-sheerluxe{font-family:var(--sans);font-weight:700;font-size:26px;letter-spacing:-.03em;text-transform:lowercase}
.lg-harpers{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.02}
.lg-wallpaper{font-family:var(--serif);font-size:28px}
.lg-wallpaper sup{font-size:.5em;vertical-align:super}
.lg-fthtsi{display:inline-flex;align-items:center;gap:7px;background:var(--ink-2);color:var(--paper);padding:9px 13px;border-radius:4px;font-family:var(--serif);font-size:23px;line-height:1}
.lg-fthtsi b{font-weight:400}
.lg-fthtsi span{color:rgba(244,243,239,.55)}
.lg-elle{font-family:var(--serif);font-size:36px;letter-spacing:.14em}
.lg-vanityfair{font-family:var(--serif);font-style:italic;font-size:30px}
.lg-dazed{font-family:var(--sans);font-weight:700;font-size:32px;letter-spacing:-.03em}

/* ============ REVIEWS ============ */
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rev-card{padding:38px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);display:flex;flex-direction:column;transition:border-color .4s,transform .5s var(--ease),background .4s}
.rev-card:hover{border-color:var(--grey);transform:translateY(-4px);background:var(--paper-2)}
.rev-stars{color:var(--accent);letter-spacing:.2em;font-size:14px;margin-bottom:22px}
.rev-quote{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.9vw,26px);line-height:1.28;color:var(--ink);margin-bottom:auto;letter-spacing:-.01em}
.rev-by{margin-top:32px;display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.rev-av{width:46px;height:46px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;color:var(--paper)}
.rev-by .who{font-family:var(--sans);font-size:15px;color:var(--ink)}
.rev-by .who span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-top:4px}
.rev-lg{grid-column:1/-1;padding:60px;text-align:center;background:var(--ink);border-color:var(--ink-3)}
.rev-lg .rev-quote{font-size:clamp(24px,3vw,44px);max-width:26ch;margin:0 auto 30px;color:var(--paper)}
.rev-lg .rev-by .who{color:var(--paper)}
.rev-lg .rev-av{background:var(--paper);color:var(--ink)}
.rev-lg:hover{transform:none;background:var(--ink)}
@media (max-width:720px){.rev-grid{grid-template-columns:1fr}.rev-card{padding:28px}}

/* ============ BLOG ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.blog-card{display:flex;flex-direction:column;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper);border:1px solid var(--line);transition:border-color .4s,transform .5s var(--ease)}
.blog-card:hover{border-color:var(--grey);transform:translateY(-5px)}
.blog-media{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--paper-3)}
.blog-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(1.05);transition:transform 1.1s var(--ease)}
.blog-card:hover .blog-media img{transform:scale(1.06)}
.blog-cat{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:rgba(10,10,10,.72);backdrop-filter:blur(6px);padding:6px 11px;border-radius:999px;z-index:2}
.blog-in{padding:26px 24px 30px;display:flex;flex-direction:column;flex:1}
.blog-in .date{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.blog-in h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1;margin-bottom:14px;text-transform:uppercase;letter-spacing:-.01em}
.blog-in p{font-size:14px;line-height:1.6;color:var(--grey-2);margin-bottom:22px}
.blog-in .more{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.blog-feat{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:0;margin-bottom:14px}
.blog-feat .blog-media{aspect-ratio:auto;min-height:420px}
.blog-feat .blog-in{justify-content:center;padding:56px}
.blog-feat .blog-in h3{font-size:clamp(30px,3.2vw,52px)}
@media (max-width:980px){.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.blog-grid{grid-template-columns:1fr}.blog-feat{grid-template-columns:1fr}.blog-feat .blog-media{min-height:260px}.blog-feat .blog-in{padding:30px}}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-big{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.6vw,72px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
.contact-big a{border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.contact-big a:hover{color:var(--accent-2);border-color:var(--accent)}
.contact-blocks{display:flex;flex-direction:column;margin-top:56px}
.contact-block{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:140px 1fr;gap:20px}
.contact-block h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.contact-block .v{font-size:16px;line-height:1.6;color:var(--ink)}
.contact-block .v a:hover{color:var(--accent-2)}
.form{display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.field input,.field textarea,.field select{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:17px;padding:12px 0;outline:none;transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field textarea{resize:vertical;min-height:100px}
.field select option{background:var(--paper);color:var(--ink)}
.field ::placeholder{color:var(--grey)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}

/* ============ BRIEF BUILDER ============ */
.brief-shell{max-width:920px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:0 30px 80px -40px rgba(10,10,10,.25)}
.brief-bar{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.brief-bar .live{display:flex;align-items:center;gap:9px;color:var(--ink)}
.brief-bar .live i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
.brief-body{padding:56px}
.brief-step{display:none}
.brief-step.on{display:block;animation:fadeUp .6s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.brief-q{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.brief-h{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,54px);line-height:1;margin-bottom:40px;text-transform:uppercase;letter-spacing:-.02em}
.brief-opts{display:flex;flex-wrap:wrap;gap:12px}
.brief-opt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:14px 20px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink);transition:.3s;background:transparent}
.brief-opt:hover{border-color:var(--grey)}
.brief-opt.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.brief-field{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,30px);padding:14px 0;outline:none;text-transform:uppercase}
.brief-field::placeholder{color:var(--grey)}
.brief-field:focus{border-color:var(--accent)}
textarea.brief-field{resize:none;min-height:120px;font-size:20px;text-transform:none}
.brief-foot{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-top:1px solid var(--line)}
.brief-dots{display:flex;gap:7px}
.brief-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s}
.brief-dots i.on{background:var(--accent)}
.brief-nav{display:flex;gap:10px}
.brief-summary{font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--grey-2)}
.brief-summary b{color:var(--ink)}
@media (max-width:720px){.brief-body{padding:32px 22px}}

/* ============ SOCIAL / IG CAROUSEL ============ */
.ig-stage{display:flex;flex-direction:column;align-items:center;gap:26px}
.ig-phone{position:relative;width:min(430px,92vw)}
.ig-card{position:relative;background:var(--ink);border:1px solid var(--line-2);border-radius:26px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.4)}
.ig-topbar{display:flex;align-items:center;gap:12px;padding:14px 16px}
.ig-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#efece5,#8a8780);display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--ink);font-size:15px}
.ig-user{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--paper);line-height:1.2}
.ig-user span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--grey-3);font-weight:400}
.ig-dots-m{margin-left:auto;color:var(--grey-3);letter-spacing:.1em}
.ig-viewport{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-3)}
.ig-track{display:flex;height:100%;transition:transform .6s var(--ease)}
.ig-slide{flex:0 0 100%;height:100%;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:34px 30px}
.ig-slide.img-slide{padding:0}
.ig-slide.img-slide img{width:100%;height:100%;object-fit:cover}
.ig-slide .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ig-slide .big{font-family:var(--display);font-weight:400;font-size:clamp(26px,6.6vw,40px);line-height:1;color:var(--paper);text-transform:uppercase;letter-spacing:-.01em}
.ig-slide .sm{font-size:14px;line-height:1.5;color:var(--grey-3);max-width:34ch}
.ig-slide .n{position:absolute;top:24px;right:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey-3)}
.ig-slide.dark{background:var(--ink)}
.ig-slide.accent{background:linear-gradient(155deg,#1a1610,#0d0d0b)}
.ig-slide.paper{background:var(--paper)}
.ig-slide.paper .big{color:var(--ink)}.ig-slide.paper .sm{color:var(--grey-2)}.ig-slide.paper .kicker{color:var(--accent-2)}
.ig-progress{position:absolute;top:10px;left:16px;right:16px;display:flex;gap:5px;z-index:4}
.ig-progress i{flex:1;height:2.5px;border-radius:2px;background:rgba(244,243,239,.25);overflow:hidden}
.ig-progress i b{display:block;height:100%;width:0;background:var(--paper)}
.ig-progress i.done b{width:100%}
.ig-progress i.active b{width:100%;transition:width 4s linear}
.ig-actions{display:flex;align-items:center;gap:18px;padding:14px 16px;font-size:22px;color:var(--paper)}
.ig-actions .save{margin-left:auto}
.ig-cap{padding:0 16px 16px;font-size:13.5px;line-height:1.5;color:var(--grey-3)}
.ig-cap b{color:var(--paper);font-weight:500}
.ig-controls{display:flex;align-items:center;gap:22px}
.ig-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink);background:transparent;transition:.3s}
.ig-arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ig-count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--grey)}
.ig-nav-dots{display:flex;gap:8px}
.ig-nav-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);border:0;transition:.3s}
.ig-nav-dots button.on{background:var(--accent);width:22px;border-radius:5px}

/* ============ UTIL ============ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:1fr;gap:40px}}
.lede{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,42px);line-height:1.2;color:var(--ink);text-transform:uppercase;letter-spacing:-.02em}
.prose p{font-size:16px;line-height:1.75;color:var(--grey-2);margin-bottom:22px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:40px}
.stat .num{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,84px);line-height:.9;color:var(--ink);text-transform:uppercase;letter-spacing:-.02em}
.stat .lbl{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}
@media (max-width:720px){.stat-row{grid-template-columns:1fr 1fr;gap:30px}}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:48px}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--line);border-radius:999px;color:var(--grey-2);transition:.3s;cursor:pointer;background:transparent}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.cta-band{position:relative;text-align:center;padding:140px var(--pad-x);overflow:hidden}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70vmin;height:70vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(198,203,212,.22),transparent 60%);filter:blur(70px);pointer-events:none}
.cta-band h2{position:relative;font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,120px);line-height:.96;margin-bottom:38px;text-transform:uppercase;letter-spacing:-.03em}

/* ============ FOOTER (dark, atmospheric) ============ */
.foot{position:relative;padding:100px var(--pad-x) 40px;background:var(--ink);color:var(--paper);overflow:hidden}
.foot::before{content:"";position:absolute;left:-8%;top:6%;width:52vmin;height:52vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(214,210,224,.32),transparent 62%);filter:blur(80px);mix-blend-mode:screen;pointer-events:none}
.foot::after{content:"";position:absolute;right:-6%;bottom:-10%;width:56vmin;height:56vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(124,131,146,.34),transparent 62%);filter:blur(90px);mix-blend-mode:screen;pointer-events:none}
.foot .wrap{position:relative;z-index:2}
.foot-mark{font-family:var(--display);font-weight:700;font-size:clamp(64px,18vw,300px);line-height:.82;letter-spacing:-.03em;text-transform:uppercase;color:var(--paper);margin-bottom:64px}
.foot-mark .dot{color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(244,243,239,.12)}
.fg h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-3);margin-bottom:20px}
.fg a,.fg p{display:block;font-family:var(--sans);font-size:15px;color:rgba(244,243,239,.78);line-height:1.85;transition:color .3s}
.fg a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-3)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ============================================================
   LUX TYPE OVERRIDE (v4) — Geist-light titles, Instrument
   Serif italic accents, Helios reserved for the wordmark only
   ============================================================ */
.hero-title,.section-title,.page-head h1,.svc-head h3,.tile-cap .t,
.contact-big,.brief-h,.stat .num,.cta-band h2,.blog-in h3,.lede,
.rev-quote,.rev-av,.ig-ava,.ig-slide .big,.brief-field{
  font-family:var(--display);font-weight:300;text-transform:none;letter-spacing:-.035em}
.page-head h1{letter-spacing:-.045em}
.hero-title{font-weight:300;letter-spacing:-.05em}
.clients-list li{font-weight:300}
.mrow__name{font-family:var(--sans);font-weight:300}

/* wordmark = Helios only */
.nav-brand,.menu-screen__brand,.home-logo,.foot-mark{font-family:var(--logo);font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.nav-brand b,.foot-mark{font-weight:700}

/* accents stay ink (lux restraint), serif italic */
.clients-list li em{font-family:var(--serif);font-style:italic}
.hero-lines em{font-family:var(--serif);font-style:italic;color:var(--accent)}

/* ============================================================
   HOME B — THE CASCADE (future build direction, lux type)
   ============================================================ */
.cascade-stage{background:#000;min-height:100svh;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.cascade-top{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--pad-x);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,239,.72)}
.cascade-top .l{display:flex;align-items:center;gap:12px}
.cascade-top .l .star{color:var(--accent)}
.cascade-top .l b{color:var(--paper);font-family:var(--logo);font-weight:700;letter-spacing:-.01em}
.cascade-top .l em{font-style:normal;color:rgba(244,243,239,.5)}
.cascade-top .r{display:flex;align-items:center;gap:16px}
.cascade-top .r .dot{width:6px;height:6px;border-radius:50%;background:var(--pearl);box-shadow:0 0 0 4px rgba(239,236,229,.2);margin-right:6px;display:inline-block;vertical-align:middle;animation:pulse 1.8s ease-in-out infinite}
.cascade-top .r .clock{color:var(--paper);font-variant-numeric:tabular-nums}
@media (max-width:720px){.cascade-top{font-size:10px;padding:12px 16px}.cascade-top .desc,.cascade-top .sep,.cascade-top .avail{display:none}}

.cascade{flex:1;min-height:0;display:flex;gap:6px;padding:52px 8px 78px}
.cpanel{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:14px;background:#111;cursor:pointer;isolation:isolate;
  transition:flex-grow .9s var(--ease)}
.cpanel.open{flex-grow:7}
.cpanel:not(.open){flex-grow:1}
.cpanel-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);
  filter:saturate(.9) brightness(.72) contrast(1.03);transition:transform 1.5s var(--ease),filter 1s ease}
.cpanel.open .cpanel-img{transform:scale(1);filter:saturate(1) brightness(.9) contrast(1.04)}
.cpanel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.2) 44%,transparent 72%)}
.cpanel-top{position:absolute;top:18px;left:18px;right:18px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,239,.7);opacity:0;transition:opacity .5s ease .2s}
.cpanel.open .cpanel-top{opacity:1}
.cpanel-top b{color:var(--paper);font-weight:400}
.cpanel-side{position:absolute;left:16px;bottom:24px;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,239,.62);white-space:nowrap;transition:opacity .4s}
.cpanel.open .cpanel-side{opacity:0}
.cpanel-body{position:absolute;left:26px;right:26px;bottom:26px;z-index:3;color:var(--paper);opacity:0;transform:translateY(14px);
  transition:opacity .6s ease .25s,transform .6s var(--ease) .25s}
.cpanel.open .cpanel-body{opacity:1;transform:none}
.cpanel-body .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
.cpanel-body h2{font-family:var(--display);font-weight:300;font-size:clamp(34px,4.4vw,72px);line-height:.98;letter-spacing:-.04em;margin-bottom:12px}
.cpanel-body h2 em{font-family:var(--serif);font-style:italic;color:rgba(244,243,239,.62)}
.cpanel-body p{font-size:14px;line-height:1.5;color:rgba(244,243,239,.72);max-width:44ch;margin-bottom:18px}
.cpanel-body .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);border:1px solid rgba(244,243,239,.3);border-radius:999px;padding:8px 13px}
.cpanel-body .tag .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* bottom glass pill nav */
.cascade-nav{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:2px;padding:6px;
  background:rgba(20,20,20,.5);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;box-shadow:0 18px 50px -10px rgba(0,0,0,.6);max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none}
.cascade-nav::-webkit-scrollbar{display:none}
.cascade-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,239,.72);
  padding:11px 15px;border-radius:999px;white-space:nowrap;transition:color .3s,background .3s}
.cascade-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.cascade-nav a.on{color:#000;background:var(--paper)}
.cascade-nav a.build{color:#000;background:var(--accent)}
@media (max-width:900px){
  .cascade{flex-direction:column;gap:4px;padding:48px 6px 74px;overflow-y:auto}
  .cpanel{flex:none;height:70px;border-radius:10px}
  .cpanel.open{height:52vh;min-height:360px}
  .cpanel-side{display:none}
  .cpanel:not(.open) .cpanel-body{opacity:0}
  .cpanel:not(.open)::before{content:attr(data-name);position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:3;
    font-family:var(--display);font-weight:300;font-size:22px;color:var(--paper);letter-spacing:-.02em}
  .cascade-nav a{padding:10px 12px;font-size:10px}
}

/* ============================================================
   v5 — NO GOLD. Monochrome + pearlescent.
   Pearl accents scoped to dark surfaces so dots/marks read.
   ============================================================ */
.home-stage,.cascade-stage,.cbanner,.foot,.rev-lg,.ig-slide.dark,.ig-slide.accent{--accent:var(--pearl);--accent-2:#d8d4ca}
.hero-lines em,.cpanel-body .cat,.ig-slide .kicker{color:var(--pearl)}
.nav-cta:hover .d{background:var(--ink)}

/* ---- Home A HYBRID: right-side vertical page cascade ---- */
.hero-rail.vcasc{display:flex;flex-direction:column;gap:8px;height:calc(100svh - 16px)}
.vrow{position:relative;display:block;flex:1 1 0;min-height:0;overflow:hidden;border-radius:var(--radius);background:#111;cursor:pointer;text-decoration:none;transition:flex-grow .85s var(--ease)}
.vrow.open{flex-grow:5}
.vrow:not(.open){flex-grow:1}
.vrow-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);filter:saturate(.92) brightness(.66) contrast(1.03);transition:transform 1.4s var(--ease),filter .8s}
.vrow.open .vrow-img{filter:saturate(1) brightness(.86);transform:scale(1)}
.vrow::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),transparent 62%),linear-gradient(90deg,rgba(0,0,0,.35),transparent 45%)}
.vrow-num{position:absolute;top:15px;left:18px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.vrow-label{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-family:var(--display);font-weight:300;font-size:clamp(17px,1.4vw,26px);letter-spacing:-.02em;transition:letter-spacing .5s var(--ease)}
.vrow.open .vrow-label{letter-spacing:-.03em}
.vrow-arrow{position:absolute;right:15px;bottom:14px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;opacity:0;transform:translateX(-6px);transition:.45s var(--ease)}
.vrow.open .vrow-arrow{opacity:1;transform:none}
@media (max-width:1024px){
  .hero-rail.vcasc{height:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px}
  .vrow{aspect-ratio:1/1}
  .vrow.open,.vrow:not(.open){flex:initial}
}
@media (max-width:560px){.hero-rail.vcasc{grid-template-columns:repeat(2,1fr)}}

/* ---- IG FEED LINE (social plugin look) — a long line of posts ---- */
.ig-feed-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.ig-feed{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.ig-feed::-webkit-scrollbar{display:none}
.ig-post{position:relative;flex:0 0 auto;width:clamp(190px,20vw,270px);aspect-ratio:4/5;border-radius:var(--radius-sm);overflow:hidden;scroll-snap-align:start;background:var(--paper-3);display:block}
.ig-post img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.03);transition:transform 1s var(--ease)}
.ig-post:hover img{transform:scale(1.05)}
.ig-post::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 46%);opacity:0;transition:opacity .4s}
.ig-post:hover::after{opacity:1}
.ig-post .ig-ico{position:absolute;top:11px;right:12px;z-index:2;color:#fff;opacity:.9}
.ig-post .cap{position:absolute;left:13px;right:13px;bottom:12px;z-index:2;color:#fff;font-size:12px;line-height:1.4;opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
.ig-post:hover .cap{opacity:1;transform:none}
@media (max-width:560px){.ig-post{width:64vw}}

/* ---- SLICK reviews (compact) ---- */
.rev-slim{text-align:center;max-width:920px;margin:0 auto}
.rev-slim .stars{color:var(--ink);letter-spacing:.24em;font-size:11px;margin-bottom:22px}
.rev-slim .q{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.6vw,36px);line-height:1.28;letter-spacing:-.025em;color:var(--ink)}
.rev-slim .q em{font-family:var(--serif);font-style:italic}
.rev-slim .by{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.rev-mini{display:flex;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap}
.rev-mini span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2);border:1px solid var(--line);border-radius:999px;padding:8px 13px}
.rev-mini b{color:var(--ink);font-weight:400}

/* ---- Home B — intro landing banner above the cascade ---- */
.cbanner{position:relative;min-height:100svh;background:#000;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:110px var(--pad-x) 90px}
.cbanner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5;filter:contrast(1.04) saturate(1.02)}
.cbanner::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.7) 100%),linear-gradient(to bottom,rgba(0,0,0,.4),transparent 30%,transparent 60%,#000)}
.cbanner-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cbanner-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,239,.72);margin-bottom:30px;display:flex;align-items:center;gap:10px}
.cbanner-kicker i{width:6px;height:6px;border-radius:50%;background:var(--pearl);animation:pulse 1.8s ease-in-out infinite}
.cbanner h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,6vw,104px);line-height:1.02;letter-spacing:-.04em;max-width:16ch}
.cbanner h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.cbanner .sub{margin-top:26px;font-size:clamp(15px,1.4vw,19px);line-height:1.6;color:rgba(244,243,239,.8);max-width:52ch}
.cbanner-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,239,.6)}
.cbanner-scroll .ln{width:1px;height:40px;background:linear-gradient(rgba(244,243,239,.5),transparent);position:relative;overflow:hidden}
.cbanner-scroll .ln::after{content:"";position:absolute;top:-40px;left:0;width:100%;height:40px;background:var(--pearl);animation:scrolldn 2.2s var(--ease) infinite}
@keyframes scrolldn{to{top:100%}}

/* ============================================================
   v6 — sticky menu + back-to-top + refined footer
   ============================================================ */
/* floating menu button (always-available on the cascade home) */
.floatnav{position:fixed;top:16px;right:var(--pad-x);z-index:95;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.floatnav.show{opacity:1;transform:none;pointer-events:auto}
.floatnav .fn-logo{font-family:var(--logo);font-weight:600;font-size:16px;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);mix-blend-mode:difference}
.fn-menu{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(244,243,239,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line);border-radius:999px;padding:11px 16px;transition:.3s var(--ease)}
.fn-menu:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fn-menu .bars{display:flex;flex-direction:column;gap:3px}
.fn-menu .bars i{width:15px;height:1.5px;background:currentColor;border-radius:2px}

/* back to top */
.backtop{position:fixed;bottom:22px;right:var(--pad-x);z-index:95;width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:var(--paper);border:0;display:flex;align-items:center;justify-content:center;font-size:17px;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:.45s var(--ease);box-shadow:0 14px 40px -14px rgba(0,0,0,.5)}
.backtop.show{opacity:1;transform:none;pointer-events:auto}
.backtop:hover{background:var(--paper);color:var(--ink)}
@media (max-width:720px){.backtop{width:44px;height:44px;bottom:16px}}

/* ---- refined footer ---- */
.foot{background:var(--ink);color:var(--paper);padding:0;overflow:hidden;position:relative}
.foot::before{content:"";position:absolute;left:-6%;top:-10%;width:46vmin;height:46vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(214,210,224,.22),transparent 64%);filter:blur(80px);mix-blend-mode:screen;pointer-events:none}
.foot .wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding:96px var(--pad-x) 64px;border-bottom:1px solid rgba(244,243,239,.12)}
.foot-cta{max-width:20ch}
.foot-cta .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-3);margin-bottom:22px;display:flex;align-items:center;gap:9px}
.foot-cta .k i{width:6px;height:6px;border-radius:50%;background:var(--pearl);animation:pulse 1.8s ease-in-out infinite}
.foot-cta h3{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.4vw,48px);line-height:1.05;letter-spacing:-.03em}
.foot-cta h3 em{font-family:var(--serif);font-style:italic;font-weight:400}
.foot-cta a.mail{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid rgba(244,243,239,.4);padding-bottom:4px;transition:.3s var(--ease)}
.foot-cta a.mail:hover{gap:16px;border-color:var(--paper)}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-3);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;font-size:14.5px;color:rgba(244,243,239,.72);line-height:1.9;transition:color .3s}
.foot-col a:hover{color:var(--paper)}
.foot-mark-wrap{position:relative;padding:44px var(--pad-x) 28px;display:flex;flex-direction:column}
.foot-mark{font-family:var(--logo);font-weight:500;font-size:clamp(64px,20vw,340px);line-height:.8;letter-spacing:-.05em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(244,243,239,.32);text-stroke:1px rgba(244,243,239,.32);
  transition:color .8s var(--ease),-webkit-text-stroke-color .8s;cursor:default;white-space:nowrap}
.foot-mark-wrap:hover .foot-mark{color:var(--paper);-webkit-text-stroke-color:var(--paper)}
.foot-mark .dot{color:var(--pearl);-webkit-text-stroke:0}
.foot-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px var(--pad-x) 34px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-3)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:34px}.foot-cta{grid-column:1/-1;max-width:none}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   v7 — THEME SYSTEM. Light = :root base. Dark = default (set on
   <html data-theme="dark">). Hero + footer are authored-dark in
   both modes; everything else flips via tokens.
   ============================================================ */
[data-theme="dark"]{
  --ink:#f2f0ea; --ink-2:#d6d3cb; --ink-3:#b8b5ac;
  --paper:#0a0a0a; --paper-2:#101010; --paper-3:#161616;
  --grey:#7f7c74; --grey-2:#a29f97; --grey-3:#b6b3aa;
  --line:rgba(242,240,234,.15);
  --accent:var(--pearl); --accent-2:#d8d4ca;
}
html{background:var(--paper)}
body::after{background-image:radial-gradient(rgba(128,128,128,.05) 1px,transparent 1px)}

/* footer authored-dark in BOTH themes */
.foot{background:#0a0a0a;color:#f2f0ea}
.foot-cta h3{color:#f2f0ea}
.foot-col a,.foot-col p{color:rgba(242,240,234,.72)}
.foot-col a:hover,.foot-cta a.mail:hover{color:#fff}
.foot-col h4,.foot-cta .k{color:rgba(242,240,234,.5)}
.foot-cta a.mail{color:#f2f0ea;border-bottom-color:rgba(242,240,234,.4)}
.foot-mark{-webkit-text-stroke-color:rgba(242,240,234,.32);text-stroke-color:rgba(242,240,234,.32)}
.foot-mark-wrap:hover .foot-mark{color:#f2f0ea;-webkit-text-stroke-color:#f2f0ea}
.foot-legal{color:rgba(242,240,234,.5)}
.foot::before{background:radial-gradient(circle,rgba(214,210,224,.18),transparent 64%)}

/* FT box masthead legible on dark */
[data-theme="dark"] .lg-fthtsi{background:rgba(242,240,234,.1);color:#f2f0ea}
[data-theme="dark"] .lg-fthtsi span{color:rgba(242,240,234,.55)}

/* ============================================================
   v8 — persistent SITEBAR (Menu + Build a Brief + theme toggle),
   case study page. Retires the bottom pill + old floatnav.
   ============================================================ */
.sitebar{position:fixed;top:0;left:0;right:0;z-index:96;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:16px var(--pad-x);color:#f2f0ea;--sb-inv:var(--ink);transition:background .45s var(--ease),color .45s,border-color .45s,padding .45s}
.sitebar.solid{background:color-mix(in srgb, var(--paper) 78%, transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);color:var(--ink);--sb-inv:var(--paper);padding:12px var(--pad-x)}
.sb-logo{justify-self:start;font-family:var(--logo);font-weight:600;font-size:16px;letter-spacing:-.01em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.sb-logo .star{color:var(--accent)}
.sb-center{justify-self:center;display:flex;align-items:center;gap:13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.82;white-space:nowrap}
.sb-center .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;animation:pulse 1.8s ease-in-out infinite}
.sb-center .clk{font-variant-numeric:tabular-nums}
.sb-r{justify-self:end;display:flex;align-items:center;gap:8px}
.sb-btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;border-radius:999px;
  border:1px solid;border-color:color-mix(in srgb, currentColor 30%, transparent);background:transparent;color:inherit;transition:.3s var(--ease);display:inline-flex;align-items:center;gap:9px}
.sb-btn:hover{background:currentColor}
.sb-btn:hover span,.sb-btn:hover .bars i{color:var(--sb-inv)}
.sb-btn.cta{border-color:currentColor}
.sb-btn .bars{display:flex;flex-direction:column;gap:3px}
.sb-btn .bars i{width:14px;height:1.5px;background:currentColor;border-radius:2px;transition:background .3s}
.sb-btn:hover .bars i{background:var(--sb-inv)}
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid;border-color:color-mix(in srgb,currentColor 30%,transparent);background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.theme-toggle:hover{background:currentColor}
.theme-toggle:hover svg{color:var(--paper)}
.theme-toggle .sun{display:none}.theme-toggle .moon{display:block}
[data-theme="dark"] .theme-toggle .sun{display:block}[data-theme="dark"] .theme-toggle .moon{display:none}
@media (max-width:820px){.sitebar{grid-template-columns:1fr auto}.sb-center{display:none}.sb-btn.cta span{display:none}.sb-btn.cta::after{content:"Brief"}}

/* menu screen gets a theme toggle row */
.menu-screen__head .mh-tools{display:flex;align-items:center;gap:10px}

/* ============ CASE STUDY PAGE ============ */
.cs-hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:#0a0a0a}
.cs-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(1.03) brightness(.82)}
.cs-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),transparent 55%)}
.cs-hero-in{position:relative;z-index:2;padding:0 var(--pad-x) 60px;color:#f2f0ea;width:100%}
.cs-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,234,.72);margin-bottom:22px;display:flex;gap:12px;flex-wrap:wrap}
.cs-title{font-family:var(--display);font-weight:200;font-size:clamp(52px,9vw,150px);line-height:.9;letter-spacing:-.045em}
.cs-title em{font-family:var(--serif);font-style:italic;font-weight:400}
.cs-meta-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px var(--pad-x)}
.cs-meta-row .m b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;font-weight:400}
.cs-meta-row .m span{font-family:var(--display);font-size:clamp(16px,1.5vw,21px);font-weight:300}
@media (max-width:720px){.cs-meta-row{grid-template-columns:1fr 1fr;gap:24px}}
.cs-lede{font-family:var(--display);font-weight:200;font-size:clamp(26px,3.4vw,50px);line-height:1.16;letter-spacing:-.03em;max-width:20ch}
.cs-lede em{font-family:var(--serif);font-style:italic;font-weight:400}
.cs-body p{font-size:16px;line-height:1.8;color:var(--ink-soft);margin-bottom:22px}
.cs-figure{border-radius:var(--radius);overflow:hidden;background:var(--paper-2);margin:0}
.cs-figure img{width:100%;height:100%;object-fit:cover;display:block}
.cs-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.cs-grid-2{grid-template-columns:1fr}}
/* ── v375 · the client's own words, above the fold ──────────────
   A case study that opens by telling you how good the work is, is an
   agency talking about itself. This opens with the client instead, so
   the first voice on the page is not ours. Deliberately smaller than
   .cs-quote — the big pull quote further down is the moment, this is
   the endorsement you read on the way in. */
.cs-vouch{padding:54px var(--pad-x) 50px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.cs-vouch__q{margin:0 auto;max-width:52ch;text-align:center;font-family:var(--display);
  font-weight:250;font-size:clamp(19px,2vw,27px);line-height:1.34;letter-spacing:-.02em;color:var(--ink)}
.cs-vouch__q em{font-family:var(--serif);font-style:italic;font-weight:400}
.cs-vouch__a{margin:20px auto 0;text-align:center;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey)}
@media(max-width:720px){.cs-vouch{padding:38px var(--pad-x) 34px}.cs-vouch__q{max-width:none}}

.cs-quote{font-family:var(--display);font-weight:200;font-size:clamp(26px,3.6vw,52px);line-height:1.2;letter-spacing:-.03em;text-align:center;max-width:22ch;margin:0 auto}
.cs-quote em{font-family:var(--serif);font-style:italic;font-weight:400}
.cs-next{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:44px var(--pad-x);border-top:1px solid var(--line);flex-wrap:wrap}

/* ============================================================
   v9 — WHITE is now the default (dark = toggle). Surface classes
   lock a section to light or dark regardless of the global theme:
   menu · clients · feed = always light; hero · footer = always dark.
   ============================================================ */
.surface-light{
  --ink:#0a0a0a; --ink-2:#131313; --ink-3:#1d1d1d;
  --paper:#f4f3ef; --paper-2:#eceae4; --paper-3:#e2dfd6;
  --grey:#8a8780; --grey-2:#5d5b56; --grey-3:#b6b3aa;
  --line:#d8d6cd; --accent:#141414; --accent-2:#3a3a3a;
  background:var(--paper); color:var(--ink);
}
.surface-dark{
  --ink:#f2f0ea; --ink-2:#d6d3cb; --ink-3:#b8b5ac;
  --paper:#0a0a0a; --paper-2:#101010; --paper-3:#161616;
  --grey:#7f7c74; --grey-2:#a29f97; --grey-3:#b6b3aa;
  --line:rgba(242,240,234,.15); --accent:#efece5; --accent-2:#d8d4ca;
  background:var(--paper); color:var(--ink);
}
/* menu is always light regardless of theme */
.menu-screen.surface-light .menu-screen__head{border-bottom-color:var(--line)}

/* brief builder hint line */
.brief-hint{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--grey);margin:-20px 0 24px;line-height:1.7;max-width:56ch}
.brief-shell .brief-bar .live i{background:var(--accent)}

/* ============================================================
   v11 — official Helios wordmark (masked so it adopts the text
   colour); pearlescent sweep on hover. Icon used as favicon.
   ============================================================ */
@keyframes iriflow{to{background-position:220% 0}}
.pearl-hover{background:linear-gradient(110deg,#a6ccff 0%,#c9b8ff 26%,#ffb9da 50%,#a8ffd8 74%,#a6ccff 100%)!important;background-size:220% 100%!important;animation:iriflow 4.5s linear infinite}

/* sitebar wordmark */
.sb-logo{display:block;height:26px;width:52px;padding:0;border:0;background:currentColor;
  -webkit-mask:url(assets/andmelo-wordmark.png) no-repeat left center;-webkit-mask-size:contain;
  mask:url(assets/andmelo-wordmark.png) no-repeat left center;mask-size:contain;
  transition:background-color .4s var(--ease)}
.sb-logo:hover{background:linear-gradient(110deg,#a6ccff 0%,#c9b8ff 26%,#ffb9da 50%,#a8ffd8 74%,#a6ccff 100%);background-size:220% 100%;animation:iriflow 4.5s linear infinite}

/* footer wordmark — always light on the dark footer, pearlescent on hover */
.foot-mark{display:block;width:100%;height:clamp(58px,17vw,260px);background:#f2f0ea;
  -webkit-text-stroke:0;text-stroke:0;letter-spacing:0;
  -webkit-mask:url(assets/andmelo-wordmark.png) no-repeat left center;-webkit-mask-size:contain;
  mask:url(assets/andmelo-wordmark.png) no-repeat left center;mask-size:contain;
  transition:background .6s var(--ease)}
.foot-mark .dot{display:none}
.foot-mark-wrap:hover .foot-mark{background:linear-gradient(110deg,#a6ccff 0%,#c9b8ff 26%,#ffb9da 50%,#a8ffd8 74%,#a6ccff 100%);background-size:220% 100%;animation:iriflow 5.5s linear infinite}

/* sitebar center — dual city clocks */
.sb-center .city{display:inline-flex;align-items:center;gap:7px}
.sb-center .city em{font-style:normal;opacity:.55;letter-spacing:.1em}
.sb-center .city span{font-variant-numeric:tabular-nums}

/* ============================================================
   v12 — page-swipe transition · bigger logo · footer icon cut-out
   ============================================================ */
/* wipe */
.wipe{position:fixed;inset:0;z-index:6000;background:#0a0a0a;transform:translateY(101%);pointer-events:none;
  display:flex;align-items:center;justify-content:center;transition:transform .62s cubic-bezier(.7,0,.2,1)}
.wipe-mark{width:110px;height:58px;background:#f2f0ea;opacity:.92;
  -webkit-mask:url(assets/andmelo-wordmark.png) no-repeat center/contain;mask:url(assets/andmelo-wordmark.png) no-repeat center/contain}

/* bigger sitebar wordmark */
.sb-logo{height:40px;width:80px}
@media (max-width:720px){.sb-logo{height:34px;width:68px}}

/* footer — icon cut into an image, bottom-right */
.foot-base{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:56px var(--pad-x) 0}
.foot-legal{position:static;padding:0;max-width:52ch}
.foot-legal span{display:block;margin-bottom:5px}
.foot-cutout{position:relative;width:clamp(240px,30vw,400px);aspect-ratio:5/6;border-radius:14px 14px 0 0;overflow:hidden;flex:0 0 auto;align-self:flex-end;background:#151513}
.foot-cutout img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.04)}
.foot-cutout .mk{position:absolute;left:-4%;bottom:-3%;width:96%;height:60%;background:#fff;
  -webkit-mask:url(assets/andmelo-mark.png) no-repeat bottom left/contain;mask:url(assets/andmelo-mark.png) no-repeat bottom left/contain;
  mix-blend-mode:normal;pointer-events:none}
.foot-cutout::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35),transparent 55%)}
@media (max-width:720px){.foot-base{flex-direction:column;align-items:stretch}.foot-cutout{width:70%;align-self:flex-end}}

/* ============================================================
   v14 — directional page wipe (menu = R→L, else = bottom→top;
   logo only when returning HOME) · footer = AND M© icon ·
   work view toggle (cascade / grid / list) · scroll reveals
   ============================================================ */
.pagewipe{position:fixed;inset:0;z-index:6000;background:#0a0a0a;pointer-events:none;
  display:flex;align-items:center;justify-content:center;transform:translateY(101%);will-change:transform}
html[data-wipe] #pagewipe{transform:translate(0,0)}            /* pre-paint cover on incoming page */
.pagewipe-lg{width:clamp(96px,14vw,150px);height:62px;background:#f2f0ea;opacity:0;transition:opacity .3s;
  -webkit-mask:url(assets/andmelo-wordmark.png) no-repeat center/contain;mask:url(assets/andmelo-wordmark.png) no-repeat center/contain}
html[data-wipe~="logo"] #pagewipe .pagewipe-lg{opacity:1}
.wipe{display:none!important}  /* retire old wipe */

/* footer: AND M© icon bottom-right (replaces the photo) */
.foot-cutout{display:none}
.foot-base{align-items:flex-end}
.foot-icon{width:clamp(120px,14vw,190px);height:clamp(150px,18vw,238px);flex:0 0 auto;background:#f2f0ea;opacity:.96;
  -webkit-mask:url(assets/andmelo-mark.png) no-repeat bottom right/contain;mask:url(assets/andmelo-mark.png) no-repeat bottom right/contain;
  transition:background .6s var(--ease)}
.foot-base:hover .foot-icon{background:linear-gradient(120deg,#a6ccff,#c9b8ff,#ffb9da,#a8ffd8,#a6ccff);background-size:220% 100%;animation:iriflow 6s linear infinite}
@media (max-width:640px){.foot-icon{width:110px;height:138px;align-self:flex-end}}

/* WORK view toggle — floating dock, fades in while the work cascade is on screen */
.work-toolbar{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(14px);z-index:45;
  display:flex;gap:3px;padding:5px;border-radius:999px;
  background:rgba(14,14,14,.62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 44px rgba(0,0,0,.34);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.work-toolbar.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.work-toolbar button{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.66);
  background:transparent;border:0;padding:9px 16px;border-radius:999px;transition:.3s;cursor:pointer;white-space:nowrap}
.work-toolbar button.on{background:#f2f0ea;color:#0a0a0a}
.work-toolbar button:hover{color:#fff}
.work-toolbar button.on:hover{color:#0a0a0a}
@media (max-width:720px){.work-toolbar{bottom:18px}.work-toolbar button{padding:8px 13px}}

/* GRID view — shrink cascade panels into a tile grid */
.cascade.view-grid{display:grid!important;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:8px}
.cascade.view-grid .cpanel{flex:none!important;border-radius:14px}
.cascade.view-grid .cpanel .cpanel-body{opacity:1!important;transform:none!important;left:20px;right:20px;bottom:20px}
.cascade.view-grid .cpanel .cpanel-body h2{font-size:clamp(20px,2vw,30px)}
.cascade.view-grid .cpanel .cpanel-body p,.cascade.view-grid .cpanel .cpanel-body .tag{display:none}
.cascade.view-grid .cpanel .cpanel-img{filter:saturate(.95) brightness(.72) contrast(1.03)}
.cascade.view-grid .cpanel:hover .cpanel-img{filter:saturate(1) brightness(.9)}
.cascade.view-grid .cpanel-side,.cascade.view-grid .cpanel-top{opacity:1}
@media (max-width:900px){.cascade.view-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cascade.view-grid{grid-template-columns:1fr}}

/* LIST view — editorial rows with hover image */
.cascade.view-list{display:flex!important;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.14);height:auto!important}
.cascade.view-list .cpanel{flex:none!important;height:auto!important;border-radius:0;border-bottom:1px solid rgba(255,255,255,.14);background:transparent;overflow:visible}
.cascade.view-list .cpanel .cpanel-img{position:absolute;right:20%;top:50%;transform:translateY(-50%) scale(.9);width:220px;height:130px;border-radius:10px;opacity:0;transition:opacity .4s,transform .5s var(--ease);filter:saturate(1) brightness(.9)}
.cascade.view-list .cpanel:hover .cpanel-img{opacity:1;transform:translateY(-50%) scale(1)}
.cascade.view-list .cpanel::after{display:none}
.cascade.view-list .cpanel-side,.cascade.view-list .cpanel-top{display:none}
.cascade.view-list .cpanel .cpanel-body{position:relative;opacity:1!important;transform:none!important;left:0;right:0;bottom:0;padding:26px var(--pad-x);display:flex;align-items:baseline;gap:22px}
.cascade.view-list .cpanel .cpanel-body .cat{margin:0;order:2;color:rgba(242,240,234,.6)}
.cascade.view-list .cpanel .cpanel-body h2{margin:0;font-size:clamp(26px,3.4vw,48px);order:1}
.cascade.view-list .cpanel .cpanel-body p,.cascade.view-list .cpanel .cpanel-body .tag{display:none}
.cascade.view-list .cpanel:hover .cpanel-body h2{color:#fff;letter-spacing:-.03em}

/* richer scroll reveals */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal-d="1"]{transition-delay:.08s}[data-reveal][data-reveal-d="2"]{transition-delay:.16s}
[data-reveal][data-reveal-d="3"]{transition-delay:.24s}[data-reveal][data-reveal-d="4"]{transition-delay:.32s}
.cs-figure[data-reveal]{transform:translateY(46px) scale(.98)}

/* ============================================================
   v16 — HOME REWORK (hero · cascade · press · reviews · cta · footer · brief panel)
   ============================================================ */

/* ---- HERO / cbanner — CENTRED ---- */
.cbanner{justify-content:center;align-items:center;text-align:center;padding:150px var(--pad-x) 120px}
.cbanner::after{background:radial-gradient(120% 100% at 50% 42%,transparent 34%,rgba(0,0,0,.6) 100%),linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 30%,transparent 62%,rgba(0,0,0,.7) 100%)}
.cbanner-video{opacity:.58}
.cbanner-in{align-items:center;max-width:1100px;width:100%;margin:0 auto}
.cbanner-in>*{animation:heroUp .9s var(--ease-out) both}
.cbanner-in>h1{animation-delay:.08s}.cbanner-in>.sub{animation-delay:.16s}.cbanner-in>.cbanner-cta{animation-delay:.24s}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cbanner-kicker{color:rgba(244,243,239,.8);margin-bottom:26px}
.cbanner h1{font-weight:200;font-size:clamp(52px,8.6vw,132px);line-height:.98;letter-spacing:-.045em;max-width:none;text-transform:none}
.cbanner h1 em{color:rgba(244,243,239,.96)}
.cbanner .sub{max-width:50ch;margin-left:auto;margin-right:auto;color:rgba(244,243,239,.85);margin-top:30px;font-size:clamp(15px,1.35vw,20px)}
.cbanner-cta{display:flex;gap:14px;margin-top:42px;flex-wrap:wrap;justify-content:center}
.cbanner-cta .btn-solid{background:#f4f3ef;color:#0a0a0a}
.cbanner-cta .btn-solid:hover{background:#fff}
.cbanner-cta .btn-ghost{background:rgba(10,10,10,.26);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(244,243,239,.5);color:#f4f3ef}
.cbanner-cta .btn-ghost:hover{background:#f4f3ef;color:#0a0a0a;border-color:#f4f3ef}
.cbanner-scroll{left:50%;right:auto;bottom:32px;transform:translateX(-50%)}
@media (max-width:900px){.cbanner-scroll{display:none}.cbanner h1{font-size:clamp(46px,13vw,88px)}}

/* ---- CASCADE — no title shuttle: text just appears once the panel is open ---- */
.cpanel-body{transform:none!important;transition:none}
.cpanel:not(.open) .cpanel-body{opacity:0}
.cpanel.open .cpanel-body{opacity:1;transition:opacity .01s linear .42s}
.cpanel-top{transition:opacity .01s linear .42s!important}
.cpanel.open .cpanel-side{transition:none}
.cpanel::after{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.68) 26%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.05) 74%,transparent 100%)}
/* panel text is ALWAYS light — it sits over imagery, must not follow the theme tokens */
.cpanel-body,.cpanel-body h2,.cpanel-body .tag,.cpanel-top,.cpanel-top b,.cpanel-side{color:#f4f3ef}
.cpanel-body .cat{color:#f4f3ef}
.cpanel-body p{color:rgba(244,243,239,.82)}
.cpanel-body h2,.cpanel-body p,.cpanel-body .cat{text-shadow:0 1px 22px rgba(0,0,0,.6)}
.cpanel-body h2 em{color:rgba(244,243,239,.82)}
.cpanel-img{filter:saturate(.92) brightness(.64) contrast(1.03)}
.cpanel.open .cpanel-img{filter:saturate(1) brightness(.82) contrast(1.05)}

/* work (cascade) section — ALWAYS BLACK (single fixed home theme, no light/dark toggle) */
.cascade-stage{background:#000}

/* ---- WORK TOOLBAR — hover highlight ---- */
.work-toolbar button:not(.on):hover{background:rgba(255,255,255,.12);color:#fff}

/* ---- GRID view — fix overlap, let the stage grow ---- */
.cascade-stage:has(.view-grid),.cascade-stage:has(.view-list){height:auto;min-height:auto;overflow:visible;display:block;padding:14px 8px 8px}
.cascade.view-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:8px;height:auto;padding:0}
.cascade.view-grid .cpanel{flex:none;aspect-ratio:4/5;min-height:0;border-radius:14px}
.cascade.view-grid .cpanel-top{display:none}
.cascade.view-grid .cpanel-side{display:none}
.cascade.view-grid .cpanel .cpanel-body{position:absolute;opacity:1;left:18px;right:18px;bottom:18px}
.cascade.view-grid .cpanel .cpanel-body .cat{margin-bottom:8px}
.cascade.view-grid .cpanel .cpanel-body h2{font-size:clamp(20px,1.9vw,30px);margin-bottom:0}
.cascade.view-grid .cpanel .cpanel-body p,.cascade.view-grid .cpanel .cpanel-body .tag{display:none}
@media (max-width:820px){.cascade.view-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cascade.view-grid{grid-template-columns:1fr}}

/* ---- LIST view — keep rows clean while stage grows ---- */
.cascade.view-list{height:auto}

/* ---- PRESS / Featured in ---- */
.press-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.press-head .section-title{font-size:clamp(34px,5vw,74px)}
.press-note{max-width:34ch;color:var(--grey-2);font-size:clamp(14px,1.1vw,16px);line-height:1.6}
.press-note em{font-family:var(--serif);font-style:italic}
.press-strip:hover .marquee-track{animation-play-state:running}

/* social feed head — two-line title block */
.ig-feed-head{align-items:flex-end}

/* ---- REVIEWS — dark band, stats + pull-quote ---- */
.reviews-sec{padding:110px var(--pad-x)}
.rev-head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;
  padding-bottom:44px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.rev-head .sh-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);display:inline-flex;align-items:center;gap:10px}
.rev-head .sh-label .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rev-stats{display:flex;gap:clamp(24px,5vw,72px);flex-wrap:wrap}
.rev-stat b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.rev-stat b i{font-family:var(--serif);font-style:italic;font-size:.6em;font-weight:400}
.rev-stat span{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.rev-quote{margin:0;max-width:24ch}
.rev-quote{max-width:none}
.rev-quote p{font-family:var(--display);font-weight:200;font-size:clamp(28px,4.4vw,64px);line-height:1.12;letter-spacing:-.03em;color:var(--ink);max-width:20ch}
.rev-quote p em{font-family:var(--serif);font-style:italic;font-weight:400}
.rev-quote footer{margin-top:38px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rev-quote .stars{color:var(--ink);letter-spacing:.22em;font-size:12px}
.rev-quote cite{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}

/* ---- CTA BAND upgrade ---- */
.cta-band{padding:150px var(--pad-x) 156px}
.cta-band h2{font-size:clamp(44px,8vw,132px)}
.cta-lead{max-width:52ch;margin:0 auto 44px;color:var(--grey-2);font-size:clamp(15px,1.35vw,19px);line-height:1.65}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-lg{padding:19px 30px;font-size:12px}
.cta-sub{margin-top:30px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* ---- FOOTER rework ---- */
.foot{padding:0 0 0}
.foot-top{grid-template-columns:1.4fr 1fr;gap:60px;padding:100px var(--pad-x) 70px;align-items:start}
.foot-cta{max-width:none}
.foot-cta-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.foot-cta-actions .btn-solid{background:#f2f0ea;color:#0a0a0a}
.foot-cta-actions .btn-solid:hover{background:#fff}
.foot-cta-actions .mail{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(242,240,234,.8);border-bottom:1px solid rgba(242,240,234,.3);padding-bottom:3px;transition:.3s}
.foot-cta-actions .mail:hover{color:#fff;border-color:#fff}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.foot-wordmark{display:block;height:clamp(90px,17vw,230px);margin:0 var(--pad-x);
  background:rgba(242,240,234,.94);
  -webkit-mask:url(assets/andmelo-wordmark.png) left bottom/contain no-repeat;mask:url(assets/andmelo-wordmark.png) left bottom/contain no-repeat;
  opacity:.1;transition:opacity .6s var(--ease)}
.foot-wordmark:hover{opacity:.2}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:30px var(--pad-x) 34px;margin-top:20px;border-top:1px solid rgba(242,240,234,.12)}
.foot-toplink{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,234,.6);transition:color .3s}
.foot-toplink:hover{color:#fff}
@media (max-width:820px){.foot-top{grid-template-columns:1fr;gap:44px}.foot-cols{gap:24px}}
@media (max-width:480px){.foot-cols{grid-template-columns:1fr 1fr}}

/* ---- BRIEF SLIDE-IN PANEL ---- */
.briefx{position:fixed;inset:0;z-index:500;visibility:hidden;pointer-events:none}
.briefx.open{visibility:visible;pointer-events:auto}
.briefx-scrim{position:absolute;inset:0;background:rgba(6,6,6,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .5s var(--ease)}
.briefx.open .briefx-scrim{opacity:1}
.briefx-panel{position:absolute;top:0;right:0;height:100%;width:min(560px,94vw);background:#f6f5f1;color:#0a0a0a;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .62s var(--ease);box-shadow:-30px 0 80px rgba(0,0,0,.3)}
.briefx.open .briefx-panel{transform:translateX(0)}
.briefx-head{display:flex;justify-content:space-between;align-items:center;padding:22px 30px;border-bottom:1px solid #ded9cf;flex:0 0 auto}
.briefx-head .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b6862}
.briefx-head b{color:#0a0a0a}
.briefx-close{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#0a0a0a;border:1px solid #d4cfc4;border-radius:999px;padding:9px 15px;background:transparent;cursor:pointer;transition:.3s}
.briefx-close:hover{background:#0a0a0a;color:#f6f5f1;border-color:#0a0a0a}
.briefx-scroll{flex:1;min-height:0;overflow-y:auto;padding:36px 30px 48px}
.briefx-title{font-family:var(--display);font-weight:300;font-size:clamp(34px,5vw,52px);line-height:1;letter-spacing:-.03em;margin-bottom:38px}
.briefx-title em{font-family:var(--serif);font-style:italic}
.briefx-field{margin-bottom:30px}
.briefx-lbl{display:block;font-size:15px;font-weight:500;margin-bottom:15px;color:#141414}
.briefx-lbl .mono{font-family:var(--mono);font-size:12px;color:#a09b90;margin-right:8px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--sans);font-size:14px;color:#333;background:transparent;border:1px solid #d4cfc4;border-radius:999px;
  padding:11px 18px;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:#0a0a0a}
.chip.on{background:#0a0a0a;color:#f6f5f1;border-color:#0a0a0a}
.briefx-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #cfc9bd;padding:12px 0;font-family:var(--sans);
  font-size:17px;color:#0a0a0a;resize:vertical;line-height:1.5}
.briefx-form textarea::placeholder{color:#a8a397}
.briefx-form textarea:focus{outline:none;border-bottom-color:#0a0a0a}
.briefx-grid3{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin:6px 0 34px}
.briefx-in{display:flex;flex-direction:column}
.briefx-in span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8a857a;margin-bottom:8px}
.briefx-in input{background:transparent;border:0;border-bottom:1px solid #cfc9bd;padding:8px 0;font-family:var(--sans);font-size:16px;color:#0a0a0a}
.briefx-in input:focus{outline:none;border-bottom-color:#0a0a0a}
.briefx-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:8px}
.briefx-foot .mono{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a857a}
.briefx-foot .btn-solid{background:#0a0a0a;color:#f6f5f1}
.briefx-foot .btn-solid:hover{background:#2a2a2a}
.briefx-done{text-align:center;padding:60px 10px}
.briefx-done h3{font-family:var(--display);font-weight:300;font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;margin-bottom:16px}
.briefx-done h3 em{font-family:var(--serif);font-style:italic}
.briefx-done p{color:#5d5b56;font-size:16px;line-height:1.6;max-width:40ch;margin:0 auto 30px}
.briefx-done .btn-ghost{border-color:#d4cfc4;color:#0a0a0a}
.briefx-done .btn-ghost:hover{background:#0a0a0a;color:#f6f5f1}
@media (max-width:480px){.briefx-grid3{grid-template-columns:1fr}.briefx-scroll{padding:28px 20px 40px}.briefx-head{padding:18px 20px}}

/* ============================================================
   v19 — LIGHT FOOTER (redesigned) · single fixed home theme
   ============================================================ */
.foot-light{background:var(--paper);color:var(--ink);padding:0;border-top:1px solid var(--line)}
.foot-light::before,.foot-light::after{display:none}
.foot-light .foot-top{grid-template-columns:1.3fr 1.1fr;gap:60px;padding:96px var(--pad-x) 70px;border-bottom:1px solid var(--line);align-items:start}
.foot-light .foot-cta{max-width:none}
.foot-light .foot-cta .k{color:var(--grey-2)}
.foot-light .foot-cta .k i{background:var(--ink)}
.foot-light .foot-cta h3{font-family:var(--display);font-weight:200;font-size:clamp(30px,3.8vw,56px);line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
.foot-light .foot-cta h3 em{font-family:var(--serif);font-style:italic;font-weight:400}
.foot-light .foot-cta-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}
.foot-light .foot-cta-actions .btn-solid{background:var(--ink);color:var(--paper)}
.foot-light .foot-cta-actions .btn-solid:hover{background:#2a2a2a;color:var(--paper)}
.foot-light .foot-cta-actions .mail{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.3s}
.foot-light .foot-cta-actions .mail:hover{border-color:var(--ink)}
.foot-light .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.foot-light .foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.foot-light .foot-col a,.foot-light .foot-col p{display:block;font-size:14.5px;color:var(--grey-2);line-height:1.95;transition:color .3s}
.foot-light .foot-col a:hover{color:var(--ink)}
.foot-light .foot-base{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px 30px;flex-wrap:wrap;
  padding:26px var(--pad-x) 30px;margin-top:0;border-top:0}
.foot-light .foot-logo{display:block;width:104px;height:26px;flex:0 0 auto;background:var(--ink);
  -webkit-mask:url(assets/andmelo-wordmark.png) left center/contain no-repeat;mask:url(assets/andmelo-wordmark.png) left center/contain no-repeat;transition:opacity .3s}
.foot-light .foot-logo:hover{opacity:.6}
.foot-light .foot-legal{position:static;display:flex;gap:10px 26px;flex-wrap:wrap;padding:0;margin:0;max-width:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.foot-light .foot-legal span{display:inline-block;margin:0}
.foot-light .foot-toplink{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);transition:color .3s}
.foot-light .foot-toplink:hover{color:var(--ink)}
@media (max-width:820px){.foot-light .foot-top{grid-template-columns:1fr;gap:46px}}
@media (max-width:560px){.foot-light .foot-base{justify-content:flex-start;gap:16px}}
@media (max-width:480px){.foot-light .foot-cols{grid-template-columns:1fr 1fr}}

/* ============================================================
   v20 — WhatsApp FAB + cinematic scroll reveal (sensus-style)
   ============================================================ */
/* WhatsApp — restrained ink capsule, glyph only; expands to a slim label on hover */
.wa-fab{position:fixed;left:24px;bottom:24px;z-index:420;display:flex;align-items:center;height:52px;width:52px;overflow:hidden;
  background:rgba(12,12,12,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;box-shadow:0 14px 36px rgba(0,0,0,.32);
  transition:width .5s var(--ease),background .4s var(--ease),border-color .4s var(--ease);will-change:width}
.wa-fab .wa-ico{width:52px;height:52px;flex:0 0 52px;padding:15px;box-sizing:border-box;display:block;color:#25D366;transition:color .4s var(--ease)}
.wa-fab .wa-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .5s var(--ease);white-space:nowrap;padding-right:24px}
.wa-fab:hover{width:184px;background:#0a0a0a;border-color:rgba(255,255,255,.32)}
.wa-fab:hover .wa-ico{color:#25D366}
.wa-fab:hover .wa-label{opacity:1;transform:none}
@media (max-width:600px){.wa-fab{left:16px;bottom:16px}}
@media print{.wa-fab{display:none}}

/* cinematic scroll reveal — text settles up, images clip + scale in */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease-out),transform 1.2s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-img]{overflow:hidden}
[data-reveal-img] img,[data-reveal-img] .cpanel-img,[data-reveal-img] .ri{
  clip-path:inset(101% 0 0 0);transform:scale(1.16);transition:clip-path 1.3s var(--ease-out),transform 1.5s var(--ease-out)}
[data-reveal-img].in img,[data-reveal-img].in .cpanel-img,[data-reveal-img].in .ri{clip-path:inset(0 0 0 0);transform:scale(1)}
[data-reveal-img][data-reveal-d="1"] img,[data-reveal-img][data-reveal-d="1"] .ri{transition-delay:.09s}
[data-reveal-img][data-reveal-d="2"] img,[data-reveal-img][data-reveal-d="2"] .ri{transition-delay:.18s}
[data-reveal-img][data-reveal-d="3"] img,[data-reveal-img][data-reveal-d="3"] .ri{transition-delay:.27s}

/* ============================================================
   v22 — toggle icons · kicker+rotator · button hover · press spacing · home index · menu fix
   ============================================================ */

/* WORK toggle → icon buttons, top-right of the work section (clear of the sitebar) */
.work-toolbar{top:74px;bottom:auto;left:auto;right:var(--pad-x);transform:translateY(-8px);gap:3px;padding:5px}
.work-toolbar.show{transform:translateY(0)}
.wv-btn{width:40px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:999px;color:rgba(255,255,255,.6);cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease)}
.wv-btn svg{width:18px;height:18px}
.wv-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.wv-btn.on{background:#f2f0ea;color:#0a0a0a}
.wv-btn.on:hover{background:#fff;color:#0a0a0a}

/* HERO kicker — flanked hairlines + rotating message (no flashing dot) */
.cbanner-kicker{display:inline-flex;align-items:center;gap:15px;margin-bottom:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,243,239,.72)}
.cbanner-kicker::before,.cbanner-kicker::after{content:"";width:30px;height:1px;background:rgba(244,243,239,.34);flex:0 0 auto}
.krot{display:inline-block;white-space:nowrap;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.krot.out{opacity:0;transform:translateY(-4px)}

/* BUTTON hover — lift + shadow + fill sweep */
.btn{transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.2)}
.btn:active{transform:translateY(-1px)}
.cbanner-cta .btn-solid:hover{box-shadow:0 16px 40px rgba(0,0,0,.42)}

/* PRESS "Featured in." — inset the head off the edge (marquee stays full-bleed) */
.press-head{padding-left:var(--pad-x);padding-right:var(--pad-x)}
.press-strip{padding-left:0}
.press-strip .marq-item{padding:0 22px}

/* HOME INDEX — large editorial nav */
.home-index{padding:112px var(--pad-x) 118px}
.home-index .section-head{margin-bottom:20px}
.hidx{border-top:1px solid var(--line)}
.hidx-row{position:relative;display:grid;grid-template-columns:66px minmax(0,1fr) auto 30px;align-items:center;gap:22px;
  padding:26px 4px;border-bottom:1px solid var(--line);color:var(--ink);transition:padding-left .45s var(--ease)}
.hidx-no{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--grey)}
.hidx-name{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.6vw,64px);line-height:1;letter-spacing:-.035em;color:var(--ink);transition:letter-spacing .4s var(--ease)}
.hidx-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2);text-align:right;white-space:nowrap}
.hidx-arw{font-size:22px;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .4s var(--ease),transform .45s var(--ease);justify-self:end}
.hidx-row:hover{padding-left:22px}
.hidx-row:hover .hidx-name{font-family:var(--serif);font-style:italic}
.hidx-row:hover .hidx-no{color:var(--ink)}
.hidx-row:hover .hidx-arw{opacity:1;transform:none}
.hidx-cta .hidx-name{font-family:var(--serif);font-style:italic}
@media (max-width:640px){.hidx-row{grid-template-columns:40px minmax(0,1fr) 22px;gap:12px}.hidx-meta{display:none}}

/* MENU — keep the CTA row name visible on hover (was dark-on-dark) */
.mrow:hover .mrow__name,.mrow--cta:hover .mrow__name{color:var(--paper)}

/* ============================================================
   v23 — JOURNAL ARTICLE (post) layout
   ============================================================ */
.post{padding:140px 0 0}
.post-head{max-width:820px;margin:0 auto;padding:0 var(--pad-x) 40px;border-bottom:1px solid var(--line)}
.post-head .eyebrow{margin-bottom:20px}
.post-title{font-family:var(--display);font-weight:300;font-size:clamp(33px,5.2vw,64px);line-height:1.04;letter-spacing:-.035em;margin:0 0 22px}
.post-title em{font-family:var(--serif);font-style:italic}
.post-lede{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.9vw,25px);line-height:1.5;color:var(--grey-2);max-width:62ch}
.post-meta{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.post-body{max-width:720px;margin:0 auto;padding:52px var(--pad-x) 30px;font-size:clamp(16px,1.2vw,18px);line-height:1.78}
.post-body h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.7vw,36px);letter-spacing:-.025em;line-height:1.14;margin:50px 0 16px;color:var(--ink)}
.post-body h2 em,.post-body h3 em{font-family:var(--serif);font-style:italic}
.post-body h3{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;margin:36px 0 12px;color:var(--ink)}
.post-body p{margin:0 0 22px;color:var(--grey-2)}
.post-body strong{color:var(--ink);font-weight:500}
.post-body em{font-family:var(--serif);font-style:italic;color:inherit}
.post-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s}
.post-body a:hover{opacity:.6}
.post-body ul,.post-body ol{margin:0 0 24px;padding-left:20px;color:var(--grey-2)}
.post-body li{margin-bottom:11px}
.post-body li::marker{color:var(--grey)}
.post-body blockquote{margin:36px 0;padding-left:24px;border-left:2px solid var(--ink);font-family:var(--display);font-weight:300;font-size:clamp(21px,2.3vw,29px);line-height:1.38;letter-spacing:-.02em;color:var(--ink)}
.post-body blockquote em{font-family:var(--serif)}
/* ── v373 · imagery inside a journal post ───────────────────────
   The journal has run text-only since it launched, so there was no
   figure treatment in the post column at all. An interview about a
   collection needs to show the collection, so this borrows the case
   study's own language: the house radius on the image, a mono caption
   under it. Radius sits on the img, not the figure — clipping the
   figure would take the caption with it.

   --wide breaks the 720px measure on a large screen only; below that
   it stays in the column, where there is no room to break out of. */
.post-body .post-fig{margin:44px 0}
.post-body .post-fig img{display:block;width:100%;height:auto;
  border-radius:var(--radius);background:var(--paper-2)}
.post-body .post-fig figcaption{margin-top:12px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.post-body .post-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0}
.post-body .post-duo figure{margin:0}
.post-body .post-duo img{display:block;width:100%;height:auto;
  border-radius:var(--radius);background:var(--paper-2)}
.post-body .post-duo figcaption{grid-column:1/-1;margin-top:2px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
@media(min-width:1000px){
  .post-body .post-fig--wide{width:min(960px,88vw);margin-left:50%;transform:translateX(-50%)}
}
@media(max-width:600px){
  .post-body .post-duo{grid-template-columns:1fr;gap:12px}
  .post-body .post-fig,.post-body .post-duo{margin:32px 0}
}

.post-tags{max-width:720px;margin:0 auto;padding:8px var(--pad-x) 0;display:flex;flex-wrap:wrap;gap:8px}
.post-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--grey-2);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.post-related{max-width:720px;margin:56px auto 0;padding:34px var(--pad-x) 0;border-top:1px solid var(--line)}
.post-related h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.post-related a{display:block;font-family:var(--display);font-weight:300;font-size:clamp(19px,2vw,26px);letter-spacing:-.02em;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.post-related a:hover{padding-left:14px}
.post-related a em{font-family:var(--serif);font-style:italic}

/* ============================================================
   v24 — scroll cascade: client colour-load · number tickers · clearer toggle · index hover
   ============================================================ */

/* CLIENTS — each name loads in individually with the iridescent sweep, then settles to ink */
.clients-list li{opacity:0;transform:translateY(20px)}
.clients-list.in li{opacity:1;transform:none;
  transition:opacity .8s var(--ease-out) var(--d,0s),transform .9s var(--ease-out) var(--d,0s),-webkit-text-fill-color .45s var(--ease-out),background-position 1.6s var(--ease),padding-left .55s var(--ease);
  animation:cliHue 1.2s var(--ease-out) var(--d,0s)}
@keyframes cliHue{
  0%{-webkit-text-fill-color:transparent;background-position:100% 0}
  55%{-webkit-text-fill-color:transparent;background-position:0 0}
  100%{-webkit-text-fill-color:var(--ink);background-position:0 0}
}

/* number tickers sit in tabular figures so they don't jitter while counting */
.rev-stat b,[data-count]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* WORK toggle icons — clearer: brighter, larger, defined pill */
.work-toolbar{background:rgba(10,10,10,.78);border-color:rgba(255,255,255,.2);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.wv-btn{width:42px;height:36px;color:rgba(255,255,255,.82)}
.wv-btn svg{width:20px;height:20px;stroke-width:1.9}
.wv-btn:hover{color:#fff;background:rgba(255,255,255,.16)}
.wv-btn.on{background:#f4f3ef;color:#0a0a0a}

/* EXPLORE INDEX — menu-style dark sweep + invert on hover */
.hidx-row{position:relative;z-index:0;isolation:isolate;overflow:hidden}
.hidx-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateX(-101%);transition:transform .55s var(--ease)}
.hidx-row:hover::before{transform:translateX(0)}
.hidx-row:hover{padding-left:28px;color:var(--paper)}
.hidx-row:hover .hidx-name{color:var(--paper);font-family:var(--serif);font-style:italic}
.hidx-row:hover .hidx-no{color:rgba(244,243,239,.55)}
.hidx-row:hover .hidx-meta{color:rgba(244,243,239,.6)}
.hidx-row:hover .hidx-arw{color:var(--paper);opacity:1;transform:none}

/* FOOTER — give the CTA more presence */
.foot-light .foot-top{padding-top:104px;padding-bottom:78px}
.foot-light .foot-cta h3{font-size:clamp(34px,4.6vw,66px);line-height:.98;letter-spacing:-.035em}
.foot-light .foot-cta .k{margin-bottom:26px}

/* ============================================================
   v26 — toggle anchored to work section · rebuilt footer statement
   ============================================================ */

/* WORK toggle — anchored to the top-right of the work SECTION (scrolls with it, not viewport-fixed) */
.cascade-stage{position:relative}
.work-toolbar{position:absolute;top:74px;right:var(--pad-x);bottom:auto;left:auto;transform:none;opacity:1;pointer-events:auto;z-index:45}
.work-toolbar.show{transform:none}
@media (max-width:720px){.work-toolbar{top:66px}}

/* FOOTER — big closing statement */
.foot-statement{padding:104px var(--pad-x) 60px;border-bottom:1px solid var(--line)}
.foot-statement .k{display:flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);margin-bottom:30px}
.foot-statement .k i{width:6px;height:6px;border-radius:50%;background:var(--ink);margin-right:10px;animation:pulse 1.8s ease-in-out infinite}
.foot-big{font-family:var(--display);font-weight:200;font-size:clamp(46px,8.4vw,138px);line-height:.92;letter-spacing:-.045em;color:var(--ink);max-width:15ch}
.foot-big em{font-family:var(--serif);font-style:italic;font-weight:400}
.foot-statement .foot-cta-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:46px}
.foot-statement .btn-solid{background:var(--ink);color:var(--paper)}
.foot-statement .btn-solid:hover{background:#242424;color:var(--paper)}
.foot-statement .mail{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .3s}
.foot-statement .mail:hover{border-color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:52px var(--pad-x) 40px}
.foot-grid .foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.foot-grid .foot-col a,.foot-grid .foot-col span{display:block;font-size:14.5px;color:var(--grey-2);line-height:2;transition:color .3s}
.foot-grid .foot-col a:hover{color:var(--ink)}
.foot-wm{display:block;height:clamp(70px,14vw,180px);margin:8px var(--pad-x) 0;
  background:var(--ink);-webkit-mask:url(assets/andmelo-wordmark.png) left bottom/contain no-repeat;mask:url(assets/andmelo-wordmark.png) left bottom/contain no-repeat;
  opacity:.07;transition:opacity .6s var(--ease)}
.foot-wm:hover{opacity:.14}
.foot-light .foot-base{border-top:1px solid var(--line);margin-top:28px}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}.foot-wm{display:none}}

/* ============================================================
   v27 — interior pages: hero entrance + scroll-reveal parity with home
   ============================================================ */
/* interior hero (page-head) gets the same pure-CSS entrance as the home hero */
.page-head>*{animation:heroUp .9s var(--ease-out) both}
.page-head>*:nth-child(2){animation-delay:.06s}
.page-head>*:nth-child(3){animation-delay:.12s}
.page-head>*:nth-child(4){animation-delay:.18s}
.page-head>*:nth-child(5){animation-delay:.24s}
/* service rows reveal + settle */
.svc[data-reveal]{opacity:0;transform:translateY(22px)}
.svc[data-reveal].in{opacity:1;transform:none}

/* ============================================================
   v28 — cursor constant-speed (no blend-mode lag) + slicker footer
   ============================================================ */
/* mix-blend-mode over video/imagery makes the cursor lag — drop it, stay visible via outline */
.cursor{mix-blend-mode:normal;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.32),0 1px 4px rgba(0,0,0,.22);will-change:transform}
.cursor-ring{mix-blend-mode:normal;border-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.16);will-change:transform}

/* footer: drop the big masked wordmark, small crisp mark in the base, tighter rhythm */
.foot-wm{display:none!important}
.foot-light .foot-statement{padding:86px var(--pad-x) 50px}
.foot-light .foot-big{font-size:clamp(40px,7vw,108px)}
.foot-light .foot-grid{padding:44px var(--pad-x) 34px}
.foot-light .foot-base{align-items:center}
.foot-mk{display:block;width:104px;height:24px;flex:0 0 auto;background:var(--ink);
  -webkit-mask:url(assets/andmelo-wordmark.png) left center/contain no-repeat;mask:url(assets/andmelo-wordmark.png) left center/contain no-repeat;transition:opacity .3s}
.foot-mk:hover{opacity:.55}

/* ============================================================
   v30 — client list focus effect (madewithgsap-style): dim + spotlight + cursor-following image
   ============================================================ */
.cl-preview{position:fixed;top:0;left:0;z-index:60;width:clamp(180px,18vw,240px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  pointer-events:none;opacity:0;will-change:transform,opacity;box-shadow:0 24px 60px rgba(0,0,0,.3);transition:opacity .35s var(--ease)}
.cl-preview.on{opacity:1}
.cl-preview img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.03)}
/* spotlight: dim the whole list on hover, keep the hovered name lit */
.clients-list:hover li{opacity:.26;transition:opacity .4s var(--ease),padding-left .55s var(--ease),-webkit-text-fill-color .45s var(--ease),background-position 1.6s var(--ease)}
.clients-list:hover li:hover{opacity:1}
@media (hover:none){.cl-preview{display:none}.clients-list:hover li{opacity:1}}

/* ============================================================
   v31 — journal-latest section · footer reverted · client scroll pop-out (no images/dim)
   ============================================================ */
/* client list: drop the cursor-image + hover-dim; keep iridescent + typography; scroll pop-out owns transform */
.cl-preview{display:none!important}
.clients-list:hover li{opacity:1}
.clients-list li{transform-origin:left center}

/* footer: back to the previous version (wordmark band, roomier) */
.foot-wm{display:block!important}
.foot-light .foot-statement{padding:104px var(--pad-x) 60px}
.foot-light .foot-big{font-size:clamp(46px,8.4vw,138px)}
.foot-light .foot-grid{padding:52px var(--pad-x) 40px}

/* LATEST FROM THE JOURNAL */
.jt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px 40px;flex-wrap:wrap;margin-bottom:48px}
.jt-head .section-title{font-size:clamp(34px,5vw,74px)}
.jt-all{align-self:flex-end}
.jt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.jt-card{display:flex;flex-direction:column}
.jt-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)}
.jt-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.03);transition:transform 1s var(--ease)}
.jt-card:hover .jt-media img{transform:scale(1.05)}
.jt-in{padding:22px 2px 0}
.jt-cat{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.jt-h{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.6vw,24px);line-height:1.22;letter-spacing:-.015em;margin:12px 0 16px;color:var(--ink)}
.jt-h em{font-family:var(--serif);font-style:italic}
.jt-more{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);display:inline-flex;align-items:center;gap:8px;transition:gap .35s var(--ease),color .3s}
.jt-card:hover .jt-more{gap:15px;color:var(--ink)}
@media (max-width:820px){.jt-grid{grid-template-columns:1fr;gap:34px}.jt-media{aspect-ratio:16/10}}

/* ============================================================
   v32 — smaller client type · editorial journal layout · toggle removed
   ============================================================ */
/* client names: base a touch smaller (pop-out jump unchanged) */
.clients-list li{font-size:clamp(28px,4.8vw,70px)}

/* JOURNAL — editorial "featured + list", distinct from the social image feed */
.jt-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,64px);align-items:start}
.jt-feat-media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)}
.jt-feat-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(1.03);transition:transform 1.1s var(--ease)}
.jt-feat:hover .jt-feat-media img{transform:scale(1.04)}
.jt-feat-in{padding-top:26px}
.jt-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.jt-feat-h{font-family:var(--display);font-weight:300;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.025em;margin:14px 0 16px;color:var(--ink)}
.jt-feat-h em{font-family:var(--serif);font-style:italic}
.jt-feat-x{font-size:15.5px;line-height:1.62;color:var(--grey-2);max-width:52ch;margin-bottom:20px}
.jt-more{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:9px;transition:gap .35s var(--ease)}
.jt-feat:hover .jt-more{gap:15px}
.jt-side{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.jt-row{position:relative;display:block;padding:26px 42px 26px 4px;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.jt-row .jt-cat{display:block;margin-bottom:9px}
.jt-row-h{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.5vw,23px);line-height:1.24;letter-spacing:-.01em;color:var(--ink);transition:color .3s}
.jt-row:hover{padding-left:14px}
.jt-row:hover .jt-row-h{font-family:var(--serif);font-style:italic}
.jt-arw{position:absolute;right:6px;top:50%;transform:translateY(-50%) translateX(-6px);opacity:0;font-size:20px;color:var(--grey);transition:opacity .4s var(--ease),transform .4s var(--ease),color .3s}
.jt-row:hover .jt-arw{opacity:1;transform:translateY(-50%);color:var(--ink)}
@media (max-width:820px){.jt-wrap{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   v33 — reviews tidied (stats removed, quote-led)
   ============================================================ */
.reviews-sec{padding:120px var(--pad-x)}
.rev-eyebrow{margin-bottom:46px;color:var(--grey-2)}
.rev-quote{max-width:none}
.rev-quote .stars{display:block;color:var(--ink);letter-spacing:.24em;font-size:13px;margin-bottom:28px}
.rev-quote p{font-family:var(--display);font-weight:200;font-size:clamp(28px,4.4vw,62px);line-height:1.14;letter-spacing:-.03em;color:var(--ink);max-width:22ch}
.rev-quote p em{font-family:var(--serif);font-style:italic;font-weight:400}
.rev-quote cite{display:block;margin-top:36px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}

/* ============================================================
   v34 — Hero rebuild: big ANDMELO wordmark (Helios Extended)
   over video, editorial baseline (cities · scroll · view work)
   ============================================================ */
@font-face{font-family:"Helios Ext";src:url(fonts/HeliosExt-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Helios Ext";src:url(fonts/HeliosExt.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}

.hero-word{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:stretch;text-align:left;padding:0 var(--pad-x) 84px;overflow:hidden}
.hero-word .cbanner-video{opacity:.62}
.hero-word::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,rgba(0,0,0,.14) 24%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.78) 100%)}

/* top meta row (below sitebar) */
.hero-word .hw-meta{position:absolute;top:96px;left:var(--pad-x);right:var(--pad-x);z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,239,.66)}
.hero-word .hw-clocks{display:flex;gap:24px}
.hero-word .hw-clocks b{color:#f4f3ef;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.08em}

/* main block (eyebrow + wordmark + descriptor + CTAs) */
.hero-word .hw-in{position:relative;z-index:2;margin-top:auto;padding-bottom:30px}
.hero-word .hw-eyebrow{display:inline-flex;align-items:center;gap:11px;margin:0 0 24px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,239,.78)}
.hero-word .hw-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--pearl);flex:none;
  animation:pulseDot 1.9s ease-in-out infinite}
.hero-word .hw-mark{font-family:var(--display);font-weight:200;
  font-size:clamp(38px,6.3vw,102px);line-height:.96;letter-spacing:-.035em;text-transform:none;
  color:#f4f3ef;margin:0}
.hero-word .hw-mark em{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(244,243,239,.82)}
.hero-word .hw-desc{margin:26px 0 0;font-family:var(--display);font-weight:300;
  font-size:clamp(13px,1vw,15px);line-height:1.6;letter-spacing:0;color:rgba(244,243,239,.86);max-width:46ch}
.hero-word .hw-desc em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}
.hero-word .hw-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-word .hw-cta .btn-solid{background:#f4f3ef;color:#0a0a0a}
.hero-word .hw-cta .btn-ghost{background:rgba(10,10,10,.26);backdrop-filter:blur(8px);
  border:1px solid rgba(244,243,239,.5);color:#f4f3ef}

/* editorial baseline */
.hero-word .hw-base{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding-top:22px;border-top:1px solid rgba(244,243,239,.2);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,239,.7)}
.hero-word .hw-cities{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-word .hw-view{display:inline-flex;align-items:center;gap:8px;color:#f4f3ef;transition:gap .35s var(--ease)}
.hero-word .hw-view:hover{gap:14px;
  background:linear-gradient(110deg,#a6ccff 0%,#c9b8ff 26%,#ffb9da 50%,#a8ffd8 74%,#a6ccff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:iriflow 4.5s linear infinite}
.hero-word .hw-scroll{display:inline-flex;flex-direction:column;align-items:center;gap:9px;color:rgba(244,243,239,.6)}
.hero-word .hw-scroll .ln{position:relative;width:1px;height:32px;overflow:hidden;background:rgba(244,243,239,.28)}
.hero-word .hw-scroll .ln::after{content:"";position:absolute;left:0;top:0;width:100%;height:14px;
  background:var(--pearl);animation:scrollGlow 2.1s var(--ease) infinite}

/* entrance */
.hero-word .hw-in>*{animation:heroUp .9s var(--ease-out) both}
.hero-word .hw-eyebrow{animation-delay:.02s}
.hero-word .hw-mark{animation-delay:.08s}
.hero-word .hw-desc{animation-delay:.18s}
.hero-word .hw-cta{animation-delay:.26s}

@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes scrollGlow{0%{top:-14px}60%,100%{top:34px}}

@media (max-width:1099px){ .hero-word .hw-meta{top:86px} }
@media (max-width:820px){
  .hero-word{padding-bottom:74px}
  .hero-word .hw-meta{top:70px;font-size:10px;letter-spacing:.1em}
  .hero-word .hw-base{flex-direction:column;align-items:flex-start;gap:6px}
  .hero-word .hw-clocks{display:none}
  .hero-word .hw-mark{font-size:clamp(32px,11vw,72px)}
  .hero-word .hw-desc{font-size:13px;max-width:42ch}
  .hero-word .hw-base{font-size:9.5px;letter-spacing:.08em;gap:10px}
  .hero-word .hw-scroll{display:none}
}

/* ============================================================
   v39 — Sectors/Expertise list · Spec badge · IG feed polish
   ============================================================ */
.sectors-sec .sectors-list{list-style:none;margin:46px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(244,243,239,.14)}
.sectors-sec .sectors-list li{display:flex;align-items:baseline;gap:18px;
  padding:26px 6px;border-bottom:1px solid rgba(244,243,239,.14);
  font-family:var(--display);font-weight:300;font-size:clamp(21px,2.5vw,36px);letter-spacing:-.02em;
  color:var(--pearl);transition:padding-left .5s var(--ease),color .4s}
.sectors-sec .sectors-list li:nth-child(odd){border-right:1px solid rgba(244,243,239,.14);padding-right:30px}
.sectors-sec .sectors-list li .sec-no{font-size:11px;letter-spacing:.1em;color:rgba(244,243,239,.45);flex:none}
.sectors-sec .sectors-list li:hover{padding-left:16px;color:#fff}
@media(max-width:720px){
  .sectors-sec .sectors-list{grid-template-columns:1fr}
  .sectors-sec .sectors-list li{font-size:22px;padding:20px 4px}
  .sectors-sec .sectors-list li:nth-child(odd){border-right:0;padding-right:4px}
}

/* Spec / concept badge — honest labelling on spec work */
.spec-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  border:1px solid currentColor;opacity:.85;line-height:1;white-space:nowrap}
.spec-badge::before{content:"✱"}

/* ============================================================
   v40 — Sectors accordion · spec badge on tiles · a11y + perf
   ============================================================ */
/* WCAG: darken warm grey to ~AA (4.5:1 on paper) */
:root{--grey:#6e6b63}

/* Sectors accordion (native <details> = keyboard + SR accessible) */
.sectors-sec .sec-acc{margin-top:46px;border-top:1px solid rgba(244,243,239,.14)}
.sectors-sec .sec-item{border-bottom:1px solid rgba(244,243,239,.14)}
.sectors-sec summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:22px;padding:26px 4px;
  font-family:var(--display);font-weight:300;font-size:clamp(21px,2.4vw,34px);letter-spacing:-.02em;color:var(--pearl);
  transition:padding-left .5s var(--ease),color .3s;user-select:none}
.sectors-sec summary::-webkit-details-marker{display:none}
.sectors-sec summary:hover{padding-left:14px;color:#fff}
.sectors-sec .sec-no{font-size:11px;letter-spacing:.1em;color:rgba(244,243,239,.42);flex:none;transform:translateY(-2px)}
.sectors-sec .sec-name{flex:1}
.sectors-sec .sec-plus{position:relative;width:15px;height:15px;flex:none;opacity:.75}
.sectors-sec .sec-plus::before,.sectors-sec .sec-plus::after{content:"";position:absolute;background:currentColor;transition:transform .4s var(--ease)}
.sectors-sec .sec-plus::before{top:7px;left:0;width:15px;height:1.4px}
.sectors-sec .sec-plus::after{left:7px;top:0;width:1.4px;height:15px}
.sectors-sec details[open] .sec-plus::after{transform:scaleY(0)}
.sectors-sec details[open] summary{color:#fff}
.sectors-sec .sec-panel{padding:0 4px 30px 49px}
.sectors-sec details[open] .sec-panel{animation:secFade .55s var(--ease-out)}
.sectors-sec .sec-panel p{max-width:56ch;font-family:var(--display);font-weight:300;
  font-size:clamp(15px,1.4vw,20px);line-height:1.5;color:rgba(244,243,239,.72);margin:0}
@keyframes secFade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:720px){.sectors-sec .sec-panel{padding-left:38px}.sectors-sec summary{gap:16px}}

/* Spec / concept badge positioned on a work tile */
.tile{position:relative}
.tile .spec-badge{position:absolute;top:16px;right:16px;z-index:4;color:#f4f3ef;
  background:rgba(10,10,10,.42);backdrop-filter:blur(8px);border-color:rgba(244,243,239,.55)}

/* ---- Accessibility & performance ---- */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   v41 — Testimonials grid · founder photo rotation · services 07
   ============================================================ */
.reviews-sec .tstm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:46px}
.reviews-sec .tstm{margin:0;display:flex;flex-direction:column}
.reviews-sec .tstm .stars{color:var(--pearl);font-size:13px;letter-spacing:3px;display:block;margin-bottom:18px}
.reviews-sec .tstm p{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.5vw,22px);
  line-height:1.45;letter-spacing:-.01em;color:rgba(244,243,239,.94);margin:0 0 22px}
.reviews-sec .tstm p em{font-family:var(--serif);font-style:italic;color:var(--pearl)}
.reviews-sec .tstm cite{margin-top:auto;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,239,.55)}
@media(max-width:900px){.reviews-sec .tstm-grid{grid-template-columns:1fr;gap:34px}}

/* Founder photo — cross-fade between two portraits */
.founder-rot .fr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.founder-rot .fr-main{opacity:1}
.founder-rot .fr-alt{opacity:0}
.founder-rot .fr-a1{animation:frGlimpse 17s ease-in-out infinite}
.founder-rot .fr-a2{animation:frGlimpse 17s ease-in-out infinite 8.5s}
@keyframes frGlimpse{0%,8%{opacity:0}15%,33%{opacity:1}40%,100%{opacity:0}}

/* ============================================================
   v42 — Testimonials slider (luxury) · Locked case (frosted)
   ============================================================ */
.reviews-sec .tstm2{margin-top:48px}
.reviews-sec .tstm2-viewport{overflow:hidden}
.reviews-sec .tstm2-track{display:flex;transition:transform .7s var(--ease)}
.reviews-sec .tstm2-slide{flex:0 0 100%;margin:0;padding-right:6vw;display:flex;flex-direction:column;justify-content:center}
.reviews-sec .tq{font-family:var(--display);font-weight:200;font-size:clamp(22px,2.7vw,40px);line-height:1.28;letter-spacing:-.02em;color:#f4f3ef;margin:0 0 34px;max-width:960px}
.reviews-sec .tq em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}
.reviews-sec .tstm2 cite{font-style:normal;display:flex;flex-direction:column;gap:5px}
.reviews-sec .tstm2 cite b{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.01em;color:#f4f3ef}
.reviews-sec .tstm2 cite span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,239,.5)}
.reviews-sec .tstm2-nav{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:26px;border-top:1px solid rgba(244,243,239,.14)}
.reviews-sec .tstm2-dots{display:flex;gap:9px}
.reviews-sec .tstm2-dots .td{width:8px;height:8px;border-radius:50%;border:0;background:rgba(244,243,239,.26);cursor:pointer;padding:0;transition:.35s var(--ease)}
.reviews-sec .tstm2-dots .td.on{background:var(--pearl);width:24px;border-radius:4px}
.reviews-sec .tstm2-arrows{display:flex;gap:10px}
.reviews-sec .tstm2-arrows .ta{width:46px;height:46px;border-radius:50%;border:1px solid rgba(244,243,239,.3);background:transparent;color:#f4f3ef;cursor:pointer;font-size:15px;transition:.3s var(--ease)}
.reviews-sec .tstm2-arrows .ta:hover{background:#f4f3ef;color:#0a0a0a;border-color:#f4f3ef}
@media(max-width:720px){.reviews-sec .tq{font-size:20px}.reviews-sec .tstm2-slide{padding-right:0}}

/* Locked case study — frosted glass + passphrase */
.locked-case{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--ink);aspect-ratio:4/5}
.locked-case .lc-media{position:absolute;inset:0}
.locked-case .lc-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:filter .9s,transform 1.3s var(--ease)}
.locked-case.locked-bw .lc-media img{filter:grayscale(1) contrast(1.04) brightness(.82)}
.locked-case .lc-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8%;
  backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);
  background:linear-gradient(180deg,rgba(10,10,10,.34),rgba(10,10,10,.52));transition:opacity .8s var(--ease)}
.locked-case .lc-card{max-width:430px;color:#f4f3ef}
.locked-case .lc-lock{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid rgba(244,243,239,.4);border-radius:50%;margin-bottom:20px}
.locked-case .lc-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,239,.62);margin-bottom:15px}
.locked-case h3{font-family:var(--display);font-weight:200;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.02em;margin-bottom:14px}
.locked-case h3 em{font-family:var(--serif);font-style:italic;color:var(--pearl)}
.locked-case .lc-msg{font-size:14.5px;line-height:1.5;color:rgba(244,243,239,.74);max-width:34ch;margin:0 auto 24px}
.locked-case .lc-form{display:flex;gap:8px;max-width:350px;margin:0 auto 16px}
.locked-case .lc-form input{flex:1;min-width:0;background:rgba(244,243,239,.08);border:1px solid rgba(244,243,239,.28);border-radius:999px;padding:12px 18px;color:#f4f3ef;font-family:var(--mono);font-size:12px;letter-spacing:.04em;outline:none;transition:.3s}
.locked-case .lc-form input:focus{border-color:rgba(244,243,239,.6)}
.locked-case .lc-form input::placeholder{color:rgba(244,243,239,.45);text-transform:uppercase;letter-spacing:.08em}
.locked-case .lc-form button{background:#f4f3ef;color:#0a0a0a;border:0;border-radius:999px;padding:12px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.3s}
.locked-case .lc-form button:hover{opacity:.85}
.locked-case .lc-contact{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,243,239,.7);border-bottom:1px solid rgba(244,243,239,.3);padding-bottom:2px;transition:.3s}
.locked-case .lc-contact:hover{color:#fff;border-color:#fff}
.locked-case.unlocked .lc-veil{opacity:0;pointer-events:none}
.locked-case.unlocked .lc-media img{filter:none;transform:scale(1)}
.locked-case.shake{animation:lcShake .45s}
@keyframes lcShake{0%,100%{transform:none}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ============================================================
   v43 — compact sectors grid · private/locked work · reveal
   ============================================================ */
.sectors-sec{padding-top:84px;padding-bottom:84px}
.sec-grid{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(244,243,239,.15);border:1px solid rgba(244,243,239,.15)}
.sec-grid li{background:#0b0b0b;padding:22px 22px;font-family:var(--display);font-weight:300;
  font-size:clamp(15px,1.4vw,19px);letter-spacing:-.01em;color:var(--pearl);transition:background .35s,color .35s,padding-left .4s var(--ease)}
.sec-grid li:hover{background:#171717;color:#fff;padding-left:28px}
@media(max-width:720px){.sec-grid{grid-template-columns:repeat(2,1fr)}.sec-grid li{font-size:14px;padding:18px 16px}}

/* Private / locked work grid + reveal caption */
.private-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.private-grid .locked-case{aspect-ratio:16/11}
.locked-case .lc-reveal{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(10px);transition:opacity .6s .25s var(--ease),transform .6s .25s var(--ease);color:#f4f3ef;text-align:left}
.locked-case .lc-reveal .s{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,239,.72)}
.locked-case .lc-reveal .t{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.01em}
.locked-case .lc-reveal .t em{font-family:var(--serif);font-style:italic;color:var(--pearl)}
.locked-case.unlocked .lc-reveal{opacity:1;transform:none}
@media(max-width:820px){.private-grid{grid-template-columns:1fr;gap:20px}.private-grid .locked-case{aspect-ratio:4/5}}

/* ============================================================
   v45 — sectors accordion, WIDE two-column + compact
   ============================================================ */
.sectors-sec .sec-acc-wide{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;
  border-top:1px solid rgba(244,243,239,.14);margin-top:34px}
.sectors-sec .sec-acc-wide .sec-item{border-bottom:1px solid rgba(244,243,239,.14)}
.sectors-sec .sec-acc-wide summary{padding:18px 2px;font-size:clamp(17px,1.7vw,25px);gap:18px}
.sectors-sec .sec-acc-wide .sec-plus{width:13px;height:13px}
.sectors-sec .sec-acc-wide .sec-plus::before{top:6px;width:13px}
.sectors-sec .sec-acc-wide .sec-plus::after{left:6px;height:13px}
.sectors-sec .sec-acc-wide .sec-panel{padding:0 2px 20px 42px}
.sectors-sec .sec-acc-wide .sec-panel p{font-size:clamp(14px,1.15vw,16px)}
@media(max-width:720px){.sectors-sec .sec-acc-wide{grid-template-columns:1fr;column-gap:0}}

/* ============================================================
   v46 — Mobile cascade: scrollable stack (fix trapped scroll)
   ============================================================ */
@media (max-width:820px){
  .cascade-stage{height:auto!important;min-height:0!important;overflow:visible!important;display:block;padding:14px 14px 24px}
  .cascade{display:flex;flex-direction:column;height:auto;min-height:0;gap:12px;padding:0}
  .cascade .cpanel{flex:none;height:auto;aspect-ratio:4/5;border-radius:16px;cursor:default}
  .cascade .cpanel-img{transform:none;filter:saturate(1) brightness(.82) contrast(1.03)}
  .cascade .cpanel-top{opacity:1}
  .cascade .cpanel-side{display:none}
  .cascade .cpanel-body{position:absolute;opacity:1;transform:none;left:22px;right:22px;bottom:24px;transition:none}
  .cascade .cpanel-body h2{font-size:clamp(26px,8vw,40px)}
  .cascade .cpanel-body p{display:block;max-width:38ch}
}

/* ============================================================
   v47 — Luxury loading: hero char reveal, IG liquid, staggers
   ============================================================ */
/* Hero wordmark: character-by-character rise */
/* headline uses the heroUp entrance (char-reveal was for the single-word wordmark) */
.hero-word .hw-mark .ch{display:inline-block;opacity:0;transform:translateY(0.9em);
  animation:chReveal .85s var(--ease-out) both;animation-delay:calc(.12s + var(--ci)*.062s)}
@keyframes chReveal{from{opacity:0;transform:translateY(0.9em)}to{opacity:1;transform:none}}
/* Baseline row eases in after the wordmark */
.hero-word .hw-base{opacity:0;animation:heroUp .95s var(--ease-out) forwards;animation-delay:.6s}

/* Instagram — liquid, one-by-one blur-in */
.ig-feed .ig-post.ig-liq{opacity:0;overflow:hidden;transition:opacity 1s var(--ease-out)}
.ig-feed .ig-post.ig-liq img{filter:blur(22px);transform:scale(1.1);transition:filter 1.15s var(--ease-out),transform 1.3s var(--ease-out)}
.ig-feed .ig-post.ig-liq.show{opacity:1}
.ig-feed .ig-post.ig-liq.show img{filter:blur(0);transform:scale(1)}

/* Sectors — line-by-line stagger */
.sec-acc-wide .sec-item:nth-child(1){transition-delay:.05s}
.sec-acc-wide .sec-item:nth-child(2){transition-delay:.11s}
.sec-acc-wide .sec-item:nth-child(3){transition-delay:.17s}
.sec-acc-wide .sec-item:nth-child(4){transition-delay:.23s}
.sec-acc-wide .sec-item:nth-child(5){transition-delay:.29s}
.sec-acc-wide .sec-item:nth-child(6){transition-delay:.35s}
.sec-acc-wide .sec-item:nth-child(7){transition-delay:.41s}
.sec-acc-wide .sec-item:nth-child(8){transition-delay:.47s}
.sec-acc-wide .sec-item:nth-child(9){transition-delay:.53s}

/* Explore-the-studio index — slower, line-by-line */
.hidx .hidx-row[data-reveal]{transition-duration:1.25s}
.hidx .hidx-row:nth-child(1){transition-delay:.08s}
.hidx .hidx-row:nth-child(2){transition-delay:.20s}
.hidx .hidx-row:nth-child(3){transition-delay:.32s}
.hidx .hidx-row:nth-child(4){transition-delay:.44s}
.hidx .hidx-row:nth-child(5){transition-delay:.56s}
.hidx .hidx-row:nth-child(6){transition-delay:.68s}

/* ============================================================
   v48 — smoother reveals (kill the glitch, match the wipes)
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease-out),transform 1.05s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
.cs-figure[data-reveal]{transform:translateY(28px) scale(.985)}

/* ============================================================
   v50 — Sectors: collapsible section (webflow plus toggle)
   ============================================================ */
.sectors-sec .sec-toggle{width:100%;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;text-align:left}
.sectors-sec .sec-toggle-meta{display:flex;align-items:center;gap:20px;padding-bottom:12px}
.sectors-sec .sec-toggle .sh-label{color:rgba(244,243,239,.5)}
.sectors-sec .sec-toggle-plus{position:relative;width:24px;height:24px;flex:none}
.sectors-sec .sec-toggle-plus::before,.sectors-sec .sec-toggle-plus::after{content:"";position:absolute;background:var(--pearl);transition:transform .55s var(--ease),opacity .4s}
.sectors-sec .sec-toggle-plus::before{top:11px;left:0;width:24px;height:1.5px}
.sectors-sec .sec-toggle-plus::after{left:11px;top:0;width:1.5px;height:24px}
.sectors-sec .sec-toggle[aria-expanded="true"] .sec-toggle-plus::after{transform:scaleY(0)}
.sectors-sec .sec-toggle:hover .sec-toggle-plus{transform:scale(1.12)}
.sec-collapse{height:0;overflow:hidden;transition:height .78s var(--ease)}
.sec-collapse-in{min-height:0;padding-top:2px}

/* ============================================================
   v53 — About: founder section redesign (image 3, up top)
   ============================================================ */
.founder-sec{padding-top:78px;padding-bottom:92px}
.founder-grid{display:grid;grid-template-columns:.82fr 1fr;gap:60px;align-items:center}
.founder-portrait{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;background:var(--ink);margin:0}
.founder-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.founder-portrait figcaption{position:absolute;left:22px;bottom:20px;z-index:2;color:#f4f3ef;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.founder-portrait figcaption .d{width:6px;height:6px;border-radius:50%;background:var(--pearl);flex:none}
.founder-copy .lede{margin:0 0 26px}
.founder-copy .prose p{margin-bottom:16px}
@media(max-width:820px){.founder-grid{grid-template-columns:1fr;gap:30px}.founder-sec{padding-bottom:70px}}

/* ============================================================
   v54 — Services rows: iridescent hover (like the client list)
   ============================================================ */
.svc-head h3{background:linear-gradient(110deg,#a6ccff 0%,#c9b8ff 26%,#ffb9da 50%,#a8ffd8 74%,#a6ccff 100%);
  background-size:220% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:currentColor;transition:-webkit-text-fill-color .45s var(--ease-out)}
.svc-head:hover h3{-webkit-text-fill-color:transparent;animation:iriflow 4.6s linear infinite}

/* ============================================================
   v56 — About: "creative concierge" definition block
   ============================================================ */
.def-sec{padding-top:92px;padding-bottom:98px}
.def-block{max-width:880px}
.def-word{font-family:var(--display);font-weight:200;font-size:clamp(32px,4.8vw,68px);line-height:1;
  letter-spacing:-.03em;color:#f4f3ef;margin:0 0 28px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.def-word .def-pron{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,243,239,.45);font-weight:400}
.def-body{font-family:var(--display);font-weight:300;font-size:clamp(18px,2.05vw,29px);line-height:1.42;
  letter-spacing:-.01em;color:rgba(244,243,239,.9);max-width:40ch}
@media(max-width:720px){.def-body{font-size:18px}}

/* ============================================================
   v57 — About: Myles pull-quote
   ============================================================ */
.myq-sec{padding-top:82px;padding-bottom:92px}
.myq{margin:0;max-width:1000px}
.myq p{font-family:var(--display);font-weight:200;font-size:clamp(25px,3.7vw,52px);line-height:1.22;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 32px}
.myq p em{font-family:var(--serif);font-style:italic;font-weight:400}
.myq cite{font-style:normal;display:flex;flex-direction:column;gap:5px}
.myq cite b{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.01em;color:var(--ink)}
.myq cite span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}

/* ============================================================
   v60 — PREMIUM CASE STUDY (Gentle Monster / Heartwear)
   Chaptered layout: numbered sections, full-bleed moments,
   collection blocks, services index.
   ============================================================ */
/* chapter heading: /01 THE BRIEF */
/* chapter label — no full-width hairline; the number carries it instead */
.cs-chapter{display:flex;align-items:baseline;gap:14px;margin-bottom:44px}
.cs-chapter .no{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--grey-3);flex:0 0 auto}
.cs-chapter .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.cs-chapter .rule{display:none}
/* NOTE: .surface-dark inverts --ink/--paper, so the base rules above already
   render light on dark. Only the rule + index need a touch more presence. */
.surface-dark .cs-chapter .no{color:rgba(244,243,239,.45)}

/* hero: 48h marker sits opposite the title */
.cs-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:26px}
.cs-hero-foot p{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(242,240,234,.66);max-width:34ch;line-height:1.7}
.cs-hero-foot .clock{font-family:var(--display);font-weight:200;font-size:clamp(30px,4.4vw,64px);letter-spacing:-.03em;color:#f2f0ea;line-height:.9;white-space:nowrap}
.cs-hero-foot .clock span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;display:block;margin-top:12px;color:rgba(242,240,234,.55)}

/* full-bleed image moment */
.cs-bleed{position:relative;width:100%;overflow:hidden;background:var(--ink);margin:0}
.cs-bleed img{width:100%;height:100%;object-fit:cover;display:block}
.cs-bleed figcaption{position:absolute;left:var(--pad-x);bottom:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,234,.8);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.cs-bleed--tall{height:min(108svh,1100px)}
.cs-bleed--wide{aspect-ratio:16/8}
@media (max-width:720px){.cs-bleed--wide{aspect-ratio:4/5}.cs-bleed--tall{height:78svh}}

/* statement line between chapters */
.cs-statement{font-family:var(--display);font-weight:200;font-size:clamp(30px,4.6vw,74px);line-height:1.08;letter-spacing:-.035em;max-width:17ch}
.cs-statement em{font-family:var(--serif);font-style:italic;font-weight:400}
.cs-sub{margin-top:32px;font-size:16px;line-height:1.8;color:var(--ink-soft);max-width:56ch}
.surface-dark .cs-sub{color:rgba(244,243,239,.68)}

/* before → after counter */
.cs-swap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0;margin-top:70px}
.surface-dark .cs-swap{border-color:rgba(244,243,239,.16)}
.cs-swap .v{font-family:var(--display);font-weight:200;font-size:clamp(34px,5.4vw,86px);line-height:.9;letter-spacing:-.04em}
.cs-swap .v.old{color:var(--grey-3);text-decoration:line-through;text-decoration-thickness:1px}
.surface-dark .cs-swap .v.old{color:rgba(244,243,239,.34)}
.cs-swap .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:14px}
.cs-swap .arw{font-family:var(--serif);font-size:clamp(24px,3vw,44px);color:var(--grey)}
.cs-swap .r{text-align:right}
@media (max-width:720px){.cs-swap{grid-template-columns:1fr;gap:22px;text-align:left;padding:36px 0}.cs-swap .r{text-align:left}.cs-swap .arw{display:none}}

/* THE COLLECTION — one block per frame */
.gm-piece{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;padding:76px 0;border-top:1px solid rgba(244,243,239,.14)}
.gm-piece:first-of-type{border-top:0;padding-top:0}
.gm-piece:nth-of-type(odd) .gm-piece__txt{order:1;padding:8px 6% 0 0}
.gm-piece:nth-of-type(odd) .gm-piece__media{order:2}
.gm-piece__txt{padding:8px 6% 0 0;position:sticky;top:120px}
.gm-piece:nth-of-type(even) .gm-piece__txt{order:2;padding:8px 0 0 6%}
.gm-piece:nth-of-type(even) .gm-piece__media{order:1}
.gm-piece__no{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(244,243,239,.45)}
.gm-piece__name{font-family:var(--display);font-weight:200;font-size:clamp(30px,3.6vw,58px);line-height:1;letter-spacing:-.035em;margin:16px 0 20px}
.gm-piece__name em{font-family:var(--serif);font-style:italic;font-weight:400}
.gm-piece__line{font-size:15.5px;line-height:1.82;color:rgba(244,243,239,.66);max-width:40ch}
.gm-piece__spec{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.gm-piece__spec span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,239,.62);border:1px solid rgba(244,243,239,.2);border-radius:100px;padding:7px 13px}
.gm-piece__media{display:grid;gap:16px}
.gm-piece__media.two{grid-template-columns:1fr 1fr}
.gm-piece__media figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--ink-2);aspect-ratio:4/5}
.gm-piece__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.gm-piece__media figure:hover img{transform:scale(1.03)}
@media (max-width:900px){
  .gm-piece{grid-template-columns:1fr;gap:28px;padding:52px 0}
  .gm-piece__txt,.gm-piece:nth-child(even) .gm-piece__txt{position:static;padding:0;order:1}
  .gm-piece:nth-child(even) .gm-piece__media{order:2}
}

/* services index */
.cs-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:1px solid var(--line);margin-top:8px}
.cs-serv div{display:flex;gap:14px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.cs-serv b{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--grey);font-weight:400;flex:0 0 auto}
.cs-serv span{font-family:var(--display);font-weight:300;font-size:clamp(15px,1.35vw,19px);letter-spacing:-.01em}
@media (max-width:900px){.cs-serv{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cs-serv{grid-template-columns:1fr}}

/* spec flag on the case hero */
.cs-flag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(242,240,234,.4);border-radius:100px;padding:7px 14px;color:#f2f0ea}

/* ============================================================
   v60 — LA CABRA (Lacoste spec film) + TRIOLETTE spreads
   ============================================================ */
/* --- La Cabra palette, scoped to the page --- */
[data-case="lacabra"]{--lc-sky:#0a3d90;--lc-sky-2:#072f70;--lc-optic:#c7f03a;--lc-white:#f2f4ff}

/* hero: type left, square film right, on the sky field */
.lc-hero{background:var(--lc-sky);color:var(--lc-white);padding:132px var(--pad-x) 74px;position:relative;overflow:hidden}
.lc-hero__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr minmax(320px,46%);gap:56px;align-items:center}
.lc-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(242,244,255,.36);border-radius:100px;padding:7px 14px;color:var(--lc-white)}
.lc-flag i{width:5px;height:5px;border-radius:50%;background:var(--lc-optic);display:block}
.lc-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(56px,8.6vw,148px);line-height:.88;letter-spacing:-.05em;margin:26px 0 18px}
.lc-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lc-optic)}
.lc-hero .lc-sub{font-family:var(--display);font-weight:200;font-size:clamp(19px,2vw,30px);line-height:1.35;letter-spacing:-.02em;color:rgba(242,244,255,.86);max-width:24ch}
.lc-hero .lc-credits{margin-top:36px;display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,244,255,.58)}
.lc-film{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--lc-sky-2);box-shadow:0 40px 90px rgba(0,0,0,.34)}
.lc-film video{width:100%;height:100%;object-fit:cover;display:block}
.lc-film__tag{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,244,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.5)}
@media (max-width:900px){
  .lc-hero{padding:108px var(--pad-x) 54px}
  .lc-hero__in{grid-template-columns:1fr;gap:34px}
  .lc-hero__media{order:-1}
}

/* the 92-years article module */
.lc-article{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
.lc-year{font-family:var(--display);font-weight:200;font-size:clamp(64px,11vw,190px);line-height:.82;letter-spacing:-.055em;color:var(--ink)}
.lc-year em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.42em;letter-spacing:-.02em;display:inline-block;margin-left:.12em;vertical-align:baseline}
.lc-article__body p{font-size:16px;line-height:1.82;color:var(--ink-soft);margin-bottom:20px}
.lc-article__body p strong{font-weight:500;color:var(--ink)}
.lc-note{margin-top:40px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);line-height:1.9;
  border-left:1px solid var(--line);padding-left:16px}
@media (max-width:900px){.lc-article{grid-template-columns:1fr;gap:34px}}

/* croc → goat swap */
.lc-swap2{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;margin-top:70px}
.lc-swap2 figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);aspect-ratio:1/1}
.lc-swap2 img{width:100%;height:100%;object-fit:cover;display:block}
.lc-swap2 .arw{font-family:var(--serif);font-size:clamp(26px,3.4vw,52px);color:var(--grey)}
.lc-swap2 figcaption{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
@media (max-width:720px){.lc-swap2{grid-template-columns:1fr}.lc-swap2 .arw{display:none}}

/* 60/30/10 colour rule */
.lc-rule{display:grid;grid-template-columns:6fr 3fr 1fr;gap:6px;margin-top:44px;height:132px}
.lc-rule div{border-radius:8px;position:relative;display:flex;align-items:flex-end;padding:14px}
.lc-rule b{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.lc-rule .r1{background:#0a3d90;color:rgba(242,244,255,.9)}
.lc-rule .r2{background:#f2f4ff;color:#0a3d90}
.lc-rule .r3{background:#c7f03a;color:#0a3d90}
@media (max-width:720px){.lc-rule{height:96px}.lc-rule b{font-size:9px;letter-spacing:.05em}}

/* four-up still grid */
.lc-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px}
.lc-grid4 figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2);aspect-ratio:3/4}
.lc-grid4 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.lc-grid4 figure:hover img{transform:scale(1.04)}
@media (max-width:900px){.lc-grid4{grid-template-columns:1fr 1fr}}

/* craft spec list */
.lc-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;margin-top:56px;border-top:1px solid var(--line)}
.surface-dark .lc-specs{border-color:rgba(244,243,239,.16)}
.lc-specs div{padding:24px 0;border-bottom:1px solid var(--line)}
.surface-dark .lc-specs div{border-color:rgba(244,243,239,.16)}
.lc-specs b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:10px}
.lc-specs span{font-family:var(--display);font-weight:300;font-size:clamp(15px,1.4vw,20px);letter-spacing:-.01em}
@media (max-width:900px){.lc-specs{grid-template-columns:1fr 1fr}}

/* --- TRIOLETTE spreads (David Morris) --- */
/* spreads render at their own ratio — never crop a layout */
.dm-spread{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.dm-spread img{width:100%;height:auto;display:block}
.dm-portraits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.dm-portraits{grid-template-columns:1fr 1fr}}
.dm-spreads{display:grid;gap:16px}
.dm-spreads.two{grid-template-columns:1fr 1fr}
@media (max-width:900px){.dm-spreads.two{grid-template-columns:1fr}}
.dm-cap{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* cascade panel: video fill (same treatment as .cpanel-img) */
.cpanel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);
  filter:saturate(.9) brightness(.72) contrast(1.03);transition:transform 1.5s var(--ease),filter 1s ease}
.cpanel.open .cpanel-vid{transform:scale(1);filter:saturate(1) brightness(.9) contrast(1.04)}

/* La Cabra: square-native plate — the film assets are 1:1, never crop them to a letterbox */
.lc-plate{background:var(--lc-sky,#0a3d90);padding:96px var(--pad-x)}
.lc-plate figure{margin:0 auto;max-width:min(880px,100%);border-radius:var(--radius);overflow:hidden;background:#072f70;box-shadow:0 40px 90px rgba(0,0,0,.3)}
.lc-plate img{width:100%;height:auto;display:block}
.lc-plate figcaption{max-width:min(880px,100%);margin:16px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(242,244,255,.62)}
@media (max-width:720px){.lc-plate{padding:60px var(--pad-x)}}
.lc-grid4 figure{aspect-ratio:1/1}

/* ============================================================
   v62 — SLAWN × RIMOWA (spec campaign)
   Palette sampled from the frames: palace stone / brushed
   aluminium / Slawn green. Copy on this page is dash-free.
   ============================================================ */
[data-case="slawn"]{--sl-stone:#828179;--sl-alu:#b4b3b0;--sl-green:#7cab48;--sl-red:#a90225}

/* film hero — the campaign film, full bleed */
.sl-hero{position:relative;min-height:96svh;display:flex;align-items:flex-end;overflow:hidden;background:#0c0c0c}
.sl-hero video,.sl-hero img.sl-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 38%}
.sl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.24) 46%,rgba(0,0,0,.28) 100%)}
.sl-hero__in{position:relative;z-index:2;width:100%;padding:0 var(--pad-x) 58px;color:#f4f3ef}
.sl-x{font-family:var(--display);font-weight:200;font-size:clamp(44px,7.4vw,128px);line-height:.9;letter-spacing:-.05em;margin:20px 0 20px}
.sl-x em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--sl-green)}
.sl-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(19px,2.1vw,32px);line-height:1.3;letter-spacing:-.025em;max-width:26ch;color:rgba(244,243,239,.92)}
.sl-hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-top:34px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,243,239,.6)}
@media (max-width:720px){.sl-hero{min-height:86svh}.sl-hero video{object-position:58% 34%}}

/* media band: film + still side by side, each at its own ratio */
.sl-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.sl-duo figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.sl-duo video,.sl-duo img{width:100%;height:auto;display:block}
@media (max-width:900px){.sl-duo{grid-template-columns:1fr}}

/* 60/30/10 for this campaign */
.sl-rule{display:grid;grid-template-columns:6fr 3fr 1fr;gap:6px;margin-top:44px;height:140px}
.sl-rule div{border-radius:8px;display:flex;align-items:flex-end;padding:14px}
.sl-rule b{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.sl-rule .s1{background:#828179;color:#f4f3ef}
.sl-rule .s2{background:#b4b3b0;color:#171717}
.sl-rule .s3{background:#7cab48;color:#0d1a06}
@media (max-width:720px){.sl-rule{height:100px}.sl-rule b{font-size:9px;letter-spacing:.04em}}

/* process grid — casting, wardrobe, product studies */
.sl-build{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:52px}
.sl-build figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2);aspect-ratio:1/1}
.sl-build img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15);transition:filter .6s ease,transform 1.1s var(--ease)}
.sl-build figure:hover img{filter:none;transform:scale(1.04)}
@media (max-width:820px){.sl-build{grid-template-columns:1fr 1fr}}

/* key art plate — sizes to the artwork, never crops it */
.sl-plate{background:#111;padding:92px var(--pad-x)}
.sl-plate figure{margin:0 auto;max-width:min(1100px,100%);border-radius:var(--radius);overflow:hidden;background:#0c0c0c}
.sl-plate img{width:100%;height:auto;display:block}
.sl-plate figcaption{max-width:min(1100px,100%);margin:16px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,243,239,.55)}
@media (max-width:720px){.sl-plate{padding:56px var(--pad-x)}}

/* ============================================================
   v63 — PROOF WALL + THE LUXURY BRAND AUDIT (£750)
   Proof sits above the pitch: names, then numbers, then scale.
   ============================================================ */
.proof{background:var(--ink);color:#f2f0ea;padding:74px var(--pad-x) 78px;border-bottom:1px solid rgba(242,240,234,.1)}
.proof__in{max-width:var(--maxw);margin:0 auto}
.proof__lbl{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,234,.5);margin-bottom:26px}
.proof__lbl i{width:5px;height:5px;border-radius:50%;background:#f2f0ea;display:block;flex:0 0 auto}

/* tier 1 — the names */
.proof__names{display:flex;flex-wrap:wrap;gap:0 0;border-top:1px solid rgba(242,240,234,.14);border-bottom:1px solid rgba(242,240,234,.14)}
.proof__names span{font-family:var(--display);font-weight:200;font-size:clamp(15px,1.55vw,23px);letter-spacing:-.02em;color:rgba(242,240,234,.9);
  padding:17px 26px 17px 0;position:relative;white-space:nowrap}
.proof__names span::after{content:"·";position:absolute;right:9px;color:rgba(242,240,234,.32)}
.proof__names span:last-child::after{content:""}
.proof__names em{font-family:var(--serif);font-style:italic;font-weight:400}

/* tier 2 — the numbers */
.proof__nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;margin-top:6px}
.proof__nums div{padding:36px 0 30px;border-bottom:1px solid rgba(242,240,234,.14)}
.proof__nums .n{font-family:var(--display);font-weight:200;font-size:clamp(34px,4.1vw,64px);line-height:.92;letter-spacing:-.045em;color:#f2f0ea}
.proof__nums .n em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.62em}
.proof__nums .n small{font-size:.42em;letter-spacing:.02em;font-weight:300}
.proof__nums p{margin-top:16px;font-size:14px;line-height:1.62;color:rgba(242,240,234,.62);max-width:26ch}
.proof__nums b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(242,240,234,.42);font-weight:400;margin-top:12px}
@media (max-width:1000px){.proof__nums{grid-template-columns:1fr 1fr;gap:0 26px}}
@media (max-width:560px){.proof__nums{grid-template-columns:1fr}}

/* tier 3 — scale */
.proof__scale{display:flex;justify-content:space-between;align-items:baseline;gap:28px;flex-wrap:wrap;margin-top:34px}
.proof__scale p{font-size:14.5px;line-height:1.75;color:rgba(242,240,234,.62);max-width:74ch}
.proof__scale p em{font-family:var(--serif);font-style:italic;color:rgba(242,240,234,.92)}
.proof__scale a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#f2f0ea;border-bottom:1px solid rgba(242,240,234,.5);padding-bottom:4px;transition:gap .3s,border-color .3s}
.proof__scale a:hover{border-color:#f2f0ea}

/* ---------- THE AUDIT ---------- */
.au-hero{background:var(--ink);color:#f2f0ea;padding:172px var(--pad-x) 92px;position:relative;overflow:hidden}
.au-hero__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end}
.au-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(46px,7vw,116px);line-height:.9;letter-spacing:-.045em;margin:24px 0 22px}
.au-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.au-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(18px,1.9vw,28px);line-height:1.36;letter-spacing:-.02em;color:rgba(242,240,234,.82);max-width:34ch}
.au-price{border:1px solid rgba(242,240,234,.24);border-radius:var(--radius);padding:30px}
.au-price .p{font-family:var(--display);font-weight:200;font-size:clamp(46px,5.4vw,84px);line-height:.9;letter-spacing:-.045em}
.au-price .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(242,240,234,.55);margin-top:14px}
.au-price ul{list-style:none;margin:22px 0 26px;padding:0;border-top:1px solid rgba(242,240,234,.16)}
.au-price li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(242,240,234,.16);font-size:14px;color:rgba(242,240,234,.78)}
.au-price li b{font-weight:400;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,234,.45)}
@media (max-width:900px){.au-hero{padding:132px var(--pad-x) 62px}.au-hero__in{grid-template-columns:1fr;gap:40px}}

/* what's in it / what it isn't */
.au-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.au-card{border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.au-card h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:24px}
.au-card ul{list-style:none;padding:0;margin:0}
.au-card li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.62;color:var(--ink)}
.au-card li:first-child{border-top:0;padding-top:0}
.au-card li i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--grey);flex:0 0 auto;padding-top:3px}
.au-card--muted li{color:var(--grey-2)}
@media (max-width:820px){.au-two{grid-template-columns:1fr}}

/* the 5 days */
.au-days{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;border-top:1px solid var(--line)}
.au-days div{padding:28px 0;border-bottom:1px solid var(--line)}
.au-days b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:12px}
.au-days .t{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.7vw,23px);letter-spacing:-.02em;margin-bottom:10px}
.au-days p{font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
@media (max-width:820px){.au-days{grid-template-columns:1fr}}

/* the ladder */
.au-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:54px}
.au-rung{border:1px solid rgba(242,240,234,.2);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;transition:border-color .4s,background .4s}
.au-rung:hover{border-color:rgba(242,240,234,.45)}
.au-rung--now{background:#f2f0ea;color:var(--ink);border-color:#f2f0ea}
.au-rung .step{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,240,234,.45)}
.au-rung--now .step{color:var(--grey)}
.au-rung .nm{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.8vw,25px);letter-spacing:-.025em;margin:16px 0 8px}
.au-rung .pr{font-family:var(--display);font-weight:200;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.035em}
.au-rung .tm{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,234,.45);margin-top:10px}
.au-rung--now .tm{color:var(--grey)}
@media (max-width:1000px){.au-ladder{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.au-ladder{grid-template-columns:1fr}}

/* the hero sits on ink without .surface-dark, so the solid button must be
   inverted explicitly or it renders dark-on-dark */
.au-price .btn-solid{background:#f2f0ea;color:var(--ink);border-color:#f2f0ea}
.au-price .btn-solid:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ============================================================
   v65 — WORK INDEX (the full roster, grouped by sector)
   ============================================================ */
.wi{padding:120px var(--pad-x)}
.wi__group{margin-bottom:74px}
.wi__sector{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.wi__sector b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:400;white-space:nowrap}
.wi__sector .rule{flex:1 1 auto;height:1px;background:var(--line)}
.wi__sector .ct{font-family:var(--mono);font-size:10.5px;color:var(--grey-3)}
.wi__row{display:grid;grid-template-columns:minmax(200px,1.05fr) 1.55fr auto;gap:34px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line);position:relative;transition:opacity .4s}
a.wi__row{color:inherit}
a.wi__row:hover .wi__name{color:var(--accent-2)}
a.wi__row:hover .wi__go{gap:16px;opacity:1}
.wi__name{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.95vw,28px);letter-spacing:-.028em;line-height:1.16;transition:color .3s}
.wi__name sup{font-size:.5em;color:var(--grey-3);margin-left:3px}
.wi__head{font-family:var(--display);font-weight:200;font-size:clamp(16px,1.55vw,21px);line-height:1.4;letter-spacing:-.018em;color:var(--ink);margin-bottom:12px}
.wi__head em{font-family:var(--serif);font-style:italic;font-weight:400}
.wi__scope{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);line-height:1.85}
.wi__go{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;padding-top:5px;transition:gap .35s var(--ease),opacity .3s}
.wi__tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-3);white-space:nowrap;padding-top:7px}
@media (max-width:900px){
  .wi{padding:80px var(--pad-x)}
  .wi__row{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .wi__go,.wi__tag{padding-top:2px}
}
.wi__note{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-3);line-height:1.9;max-width:80ch}

/* ============================================================
   v67 — home audit teaser + Gentle Monster 4:5 plates
   ============================================================ */
.hau{background:var(--ink);color:#f2f0ea;padding:104px var(--pad-x)}
.hau__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.hau h2{font-family:var(--display);font-weight:200;font-size:clamp(32px,4.4vw,68px);line-height:1;letter-spacing:-.04em;margin:22px 0 20px}
.hau h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.hau p.l{font-size:15.5px;line-height:1.8;color:rgba(242,240,234,.66);max-width:52ch}
.hau__rungs{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.hau__rungs span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,234,.6);
  border:1px solid rgba(242,240,234,.2);border-radius:100px;padding:8px 14px}
.hau__rungs span.on{background:#f2f0ea;color:var(--ink);border-color:#f2f0ea}
.hau__card{border:1px solid rgba(242,240,234,.24);border-radius:var(--radius);padding:32px}
.hau__card .p{font-family:var(--display);font-weight:200;font-size:clamp(44px,5vw,76px);line-height:.9;letter-spacing:-.045em}
.hau__card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(242,240,234,.55);margin-top:14px}
.hau__card ul{list-style:none;margin:22px 0 26px;padding:0;border-top:1px solid rgba(242,240,234,.16)}
.hau__card li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(242,240,234,.16);font-size:14px;color:rgba(242,240,234,.78)}
.hau__card li b{font-weight:400;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,240,234,.45)}
.hau__card .btn-solid{background:#f2f0ea;color:var(--ink);border-color:#f2f0ea;width:100%;justify-content:center}
.hau__card .btn-solid:hover{background:#fff;border-color:#fff;color:var(--ink)}
@media (max-width:900px){.hau{padding:72px var(--pad-x)}.hau__in{grid-template-columns:1fr;gap:36px}}

/* Gentle Monster: every source image is 4:5 — plate it, never letterbox it */
.gm-plate{background:var(--paper-2);padding:88px var(--pad-x)}
.gm-plate--dark{background:var(--ink)}
.gm-plate figure{margin:0 auto;max-width:min(720px,100%);border-radius:var(--radius);overflow:hidden;background:var(--paper-3)}
.gm-plate img{width:100%;height:auto;display:block}
.gm-plate figcaption{max-width:min(720px,100%);margin:16px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.gm-plate--dark figcaption{color:rgba(242,240,234,.55)}
.gm-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.gm-trio figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-3);aspect-ratio:4/5}
.gm-trio img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.gm-trio figure:hover img{transform:scale(1.03)}
@media (max-width:820px){.gm-trio{grid-template-columns:1fr}.gm-plate{padding:56px var(--pad-x)}}
.proof__foot{margin-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(242,240,234,.34)}

/* v70 — sectors: say what's inside before it opens, so the toggle reads as a dropdown */
.sec-peek{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(242,240,234,.42);line-height:2;max-width:92ch;transition:color .4s}
.sec-peek b{font-weight:400;color:rgba(242,240,234,.82);white-space:nowrap;margin-left:6px}
.sectors-sec.is-open .sec-peek{color:rgba(242,240,234,.24)}
.sectors-sec.is-open .sec-peek b{opacity:0}
.sec-toggle{cursor:pointer}
/* menu-screen brand now uses the header logo mark */
.menu-screen__brand.sb-logo{height:26px;width:52px;background:currentColor;color:var(--ink)}

/* ============================================================
   v72 — VOKALO (website design case study)
   Brand: black + Vokalo orange, sampled #FF5716.
   ============================================================ */
[data-case="vokalo"]{--vk-orange:#ff5716;--vk-ink:#080808}
.vk-hero{background:var(--vk-ink);color:#f4f3ef;padding:150px var(--pad-x) 84px;position:relative;overflow:hidden}
.vk-hero::before{content:"";position:absolute;inset:auto -10% -40% 40%;height:70%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,87,22,.28),transparent 68%);pointer-events:none}
.vk-hero__in{position:relative;max-width:var(--maxw);margin:0 auto}
.vk-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(44px,6.6vw,112px);line-height:.92;letter-spacing:-.045em;margin:24px 0 22px;max-width:15ch}
.vk-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--vk-orange)}
.vk-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.8vw,26px);line-height:1.4;letter-spacing:-.02em;color:rgba(244,243,239,.8);max-width:44ch}
.vk-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(244,243,239,.32);border-radius:100px;padding:7px 14px;color:#f4f3ef}
.vk-flag i{width:5px;height:5px;border-radius:50%;background:var(--vk-orange);display:block}

/* the delivered screens, shown at their real ratio */
.vk-screens{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:var(--maxw);margin:0 auto;align-items:start}
.vk-screens figure{margin:0;border-radius:14px;overflow:hidden;background:#111;border:1px solid rgba(244,243,239,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.4)}
.vk-screens img{width:100%;height:auto;display:block}
.vk-screens figcaption{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,239,.45)}
@media (max-width:820px){.vk-screens{grid-template-columns:1fr;max-width:340px}}

.vk-plate{background:var(--vk-ink);padding:92px var(--pad-x)}
.vk-plate figure{margin:0 auto;max-width:min(1280px,100%);border-radius:var(--radius);overflow:hidden;background:#111;border:1px solid rgba(244,243,239,.1)}
.vk-plate img{width:100%;height:auto;display:block}
.vk-plate figcaption{max-width:min(1280px,100%);margin:16px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,243,239,.5)}

/* three-step product mechanic */
.vk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;border-top:1px solid var(--line);margin-top:56px}
.surface-dark .vk-steps{border-color:rgba(244,243,239,.16)}
.vk-steps div{padding:30px 0;border-bottom:1px solid var(--line)}
.surface-dark .vk-steps div{border-color:rgba(244,243,239,.16)}
.vk-steps b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:14px}
.vk-steps .t{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.9vw,27px);letter-spacing:-.025em;margin-bottom:12px}
.vk-steps p{font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.surface-dark .vk-steps p{color:rgba(244,243,239,.62)}
@media (max-width:820px){.vk-steps{grid-template-columns:1fr}}

/* the value swing */
.vk-swing{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:8px}
.vk-swing .a{font-family:var(--display);font-weight:200;font-size:clamp(38px,6vw,96px);line-height:.9;letter-spacing:-.045em;color:var(--grey-3)}
.vk-swing .arw{font-family:var(--serif);font-size:clamp(22px,3vw,44px);color:var(--grey)}
.vk-swing .b{font-family:var(--display);font-weight:200;font-size:clamp(46px,7.4vw,124px);line-height:.9;letter-spacing:-.05em;color:var(--vk-orange,#ff5716)}

/* v74 — Vokalo: full-width HD site captures (2560px source, retina-sharp) */
.vk-wide{max-width:min(1400px,100%);margin:0 auto;display:flex;flex-direction:column;gap:0}
.vk-wide figure{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:#111;border:1px solid rgba(244,243,239,.1)}
.vk-wide img{width:100%;height:auto;display:block}
.vk-wide figcaption{margin:0 0 46px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,243,239,.45)}
.vk-wide figcaption:last-child{margin-bottom:0}

/* v75 — Vokalo: the Figma design files, shown at a size their 375px source can carry
   sharply rather than stretched across a full-width plate. */
.vk-note{max-width:var(--maxw);margin:0 auto 44px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,243,239,.4)}
.vk-phones{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto}
.vk-phones > div{width:300px;max-width:100%}
.vk-phones figure{margin:0;border-radius:22px;overflow:hidden;background:#0b0b0b;
  border:1px solid rgba(244,243,239,.14);box-shadow:0 34px 80px rgba(0,0,0,.5)}
.vk-phones img{width:100%;height:auto;display:block}
.vk-phones figcaption{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,239,.45);text-align:center}
@media (max-width:1100px){.vk-phones{gap:32px}.vk-phones > div{width:260px}}
@media (max-width:640px){.vk-phones > div{width:100%;max-width:340px}}

/* ============================================================
   v76 — SENSUS COLLECTIVE (hero case study)
   Palette lifted from the deck: Burnt Orange #EF5B37 · Terracotta
   #B13A1C · Warm Olive #AF9354 · Deep Bark #3D1D10 · Denim Blue
   #3B616C, on the cream ground #FFEDD9.
   ============================================================ */
[data-case="sensus"]{--sn-cream:#ffedd9;--sn-orange:#ef5b37;--sn-terra:#b13a1c;--sn-olive:#af9354;--sn-bark:#3d1d10;--sn-denim:#3b616c}

.sn-hero{background:var(--sn-bark);color:var(--sn-cream);padding:154px var(--pad-x) 0;position:relative;overflow:hidden}
.sn-hero__in{max-width:var(--maxw);margin:0 auto}
.sn-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(52px,9vw,152px);line-height:.88;letter-spacing:-.05em;margin:26px 0 20px}
.sn-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--sn-orange)}
.sn-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(18px,1.95vw,29px);line-height:1.36;letter-spacing:-.02em;color:rgba(255,237,217,.82);max-width:36ch}
.sn-hero__art{margin:64px auto 0;max-width:min(1300px,100%);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.sn-hero__art img{width:100%;height:auto;display:block}
.sn-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(255,237,217,.34);border-radius:100px;padding:7px 14px;color:var(--sn-cream)}
.sn-flag i{width:5px;height:5px;border-radius:50%;background:var(--sn-orange);display:block}
@media (max-width:900px){.sn-hero{padding:120px var(--pad-x) 0}.sn-hero__art{margin-top:44px}}

/* spreads render at their own 16:9 — never cropped */
.sn-plate{padding:96px var(--pad-x)}
.sn-plate--cream{background:var(--sn-cream)}
.sn-plate--bark{background:var(--sn-bark)}
.sn-spread{max-width:min(1400px,100%);margin:0 auto}
.sn-spread figure{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.05)}
.sn-spread img{width:100%;height:auto;display:block}
.sn-spread figcaption{margin:0 0 48px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.sn-plate--bark .sn-spread figcaption{color:rgba(255,237,217,.5)}
.sn-spread figcaption:last-child{margin-bottom:0}
.sn-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:min(1400px,100%);margin:0 auto}
.sn-duo figure{margin:0;border-radius:var(--radius);overflow:hidden}
.sn-duo img{width:100%;height:auto;display:block}
@media (max-width:900px){.sn-duo{grid-template-columns:1fr}.sn-plate{padding:60px var(--pad-x)}}

/* the six brand colours */
.sn-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:52px}
.sn-swatches div{border-radius:12px;aspect-ratio:3/4;display:flex;align-items:flex-end;padding:16px;position:relative}
.sn-swatches b{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;line-height:1.6}
.sn-swatches span{display:block;opacity:.62}
@media (max-width:900px){.sn-swatches{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.sn-swatches{grid-template-columns:repeat(2,1fr)}}

/* the engagement shape */
.sn-role{display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;border-top:1px solid var(--line);margin-top:56px}
.surface-dark .sn-role{border-color:rgba(244,243,239,.16)}
.sn-role div{padding:28px 0;border-bottom:1px solid var(--line)}
.surface-dark .sn-role div{border-color:rgba(244,243,239,.16)}
.sn-role b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:12px}
.sn-role .t{font-family:var(--display);font-weight:300;font-size:clamp(16px,1.5vw,21px);letter-spacing:-.02em}
@media (max-width:900px){.sn-role{grid-template-columns:1fr 1fr}}

/* ============================================================
   v78 — DAVID MORRIS · GLOBAL BRIDAL CAMPAIGN
   Sources: campaign stills 2:3 · BTS 3:2 · storyboards ~2:1.
   Every container matches its source ratio — nothing is cropped.
   ============================================================ */
[data-case="dm-bridal"]{--dm-ink:#0b0b0c;--dm-paper:#f4f2ee}

.dmb-hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--dm-ink)}
.dmb-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.dmb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 22%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.34) 100%)}
.dmb-hero__in{position:relative;z-index:2;width:100%;padding:0 var(--pad-x) 58px;color:#f4f2ee}
.dmb-figure{font-family:var(--display);font-weight:200;font-size:clamp(58px,11vw,190px);line-height:.84;letter-spacing:-.055em;margin:20px 0 16px}
.dmb-figure em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.46em;letter-spacing:-.02em}
.dmb-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.85vw,27px);line-height:1.38;letter-spacing:-.02em;color:rgba(244,242,238,.86);max-width:34ch}

/* campaign stills — 2:3, three up */
.dmb-stills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.dmb-stills figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);aspect-ratio:2/3}
.dmb-stills img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.dmb-stills figure:hover img{transform:scale(1.03)}
@media (max-width:900px){.dmb-stills{grid-template-columns:1fr 1fr}}

/* wide plates — 3:2, uncropped */
.dmb-plate{padding:0 var(--pad-x)}
.dmb-plate figure{margin:0 auto;max-width:var(--maxw);border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.dmb-plate img{width:100%;height:auto;display:block}
.dmb-plate figcaption{max-width:var(--maxw);margin:14px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.surface-dark .dmb-plate figcaption{color:rgba(244,243,239,.5)}
.dmb-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--maxw);margin:0 auto}
.dmb-duo figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.dmb-duo img{width:100%;height:auto;display:block}
@media (max-width:900px){.dmb-duo{grid-template-columns:1fr}}

/* storyboards — the drawn stage before the CGI */
.dmb-boards{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:var(--maxw);margin:0 auto}
.dmb-boards figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#fff;border:1px solid var(--line)}
.dmb-boards img{width:100%;height:auto;display:block}
@media (max-width:820px){.dmb-boards{grid-template-columns:1fr}}

/* the private-client film */
.dmb-film{max-width:min(1280px,100%);margin:0 auto;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.4)}
.dmb-film video{width:100%;height:auto;display:block;aspect-ratio:16/9}

/* the output tally */
.dmb-output{display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;border-top:1px solid var(--line);margin-top:54px}
.surface-dark .dmb-output{border-color:rgba(244,243,239,.16)}
.dmb-output div{padding:30px 0;border-bottom:1px solid var(--line)}
.surface-dark .dmb-output div{border-color:rgba(244,243,239,.16)}
.dmb-output .n{font-family:var(--display);font-weight:200;font-size:clamp(34px,4.2vw,66px);line-height:.9;letter-spacing:-.045em}
.dmb-output b{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:400}
@media (max-width:820px){.dmb-output{grid-template-columns:1fr 1fr}}

/* v80 — page-level lock for private case studies, and the ambient private film */
.case-gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;text-align:center;padding:8vw var(--pad-x);
  background:rgba(8,8,8,.72);backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);
  transition:opacity .8s var(--ease),visibility .8s}
.case-gate.unlocked{opacity:0;visibility:hidden;pointer-events:none}
.case-gate .cg-card{max-width:460px;color:#f4f3ef}
.case-gate .cg-lock{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid rgba(244,243,239,.4);border-radius:50%;margin-bottom:22px}
.case-gate .cg-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,239,.62);margin-bottom:16px}
.case-gate h2{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.2vw,46px);line-height:1.06;letter-spacing:-.03em;margin-bottom:16px}
.case-gate h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}
.case-gate .cg-msg{font-size:15px;line-height:1.65;color:rgba(244,243,239,.74);max-width:38ch;margin:0 auto 26px}
.case-gate .lc-form{display:flex;gap:8px;max-width:360px;margin:0 auto 18px}
.case-gate .lc-form input{flex:1;min-width:0;background:rgba(244,243,239,.08);border:1px solid rgba(244,243,239,.28);border-radius:999px;padding:13px 18px;color:#f4f3ef;font-family:var(--mono);font-size:12px;letter-spacing:.04em;outline:none;transition:.3s}
.case-gate .lc-form input:focus{border-color:rgba(244,243,239,.6)}
.case-gate .lc-form input::placeholder{color:rgba(244,243,239,.45);text-transform:uppercase;letter-spacing:.08em}
.case-gate .lc-form button{background:#f4f3ef;color:#0a0a0a;border:0;border-radius:999px;padding:13px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.3s}
.case-gate .lc-form button:hover{opacity:.85}
.case-gate .cg-contact{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,243,239,.7);border-bottom:1px solid rgba(244,243,239,.3);padding-bottom:3px;transition:.3s}
.case-gate .cg-contact:hover{color:#fff;border-color:#fff}
.case-gate.shake{animation:cgshake .45s}
@keyframes cgshake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}
body.gated{overflow:hidden}

/* ambient private film */
.pfilm{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.pfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfilm::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.15) 55%,rgba(0,0,0,.3))}
.pfilm__in{position:relative;z-index:2;width:100%;padding:0 var(--pad-x) 56px;color:#f4f3ef;max-width:var(--maxw);margin:0 auto}
.pfilm h2{font-family:var(--display);font-weight:200;font-size:clamp(30px,4.4vw,68px);line-height:1;letter-spacing:-.04em;margin:18px 0 16px;max-width:18ch}
.pfilm h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.pfilm p{font-size:15.5px;line-height:1.8;color:rgba(244,243,239,.72);max-width:56ch}
@media (max-width:720px){.pfilm{min-height:62svh}}

/* ============================================================
   v81 — ACAUÃ · the laughing falcon
   Palette from the deck: ink #191919 · oxblood #36151E ·
   tan #BC9D81 · cream #EAE2D7. Deck spreads 16:9, falcons ~0.88,
   rings 0.7, world imagery 1.49 — every box matches its source.
   ============================================================ */
[data-case="acaua"]{--ac-ink:#191919;--ac-ox:#36151e;--ac-tan:#bc9d81;--ac-cream:#eae2d7}

.ac-hero{background:var(--ac-ox);color:var(--ac-cream);padding:150px var(--pad-x) 0;position:relative;overflow:hidden}
.ac-hero__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.ac-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(52px,8.4vw,140px);line-height:.9;letter-spacing:-.05em;margin:24px 0 20px}
.ac-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ac-tan)}
.ac-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.85vw,27px);line-height:1.4;letter-spacing:-.02em;color:rgba(234,226,215,.82);max-width:32ch}
.ac-hero__mask{margin:0;max-width:min(480px,100%);justify-self:end}
.ac-hero__mask img{width:100%;height:auto;display:block}
.ac-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(234,226,215,.32);border-radius:100px;padding:7px 14px;color:var(--ac-cream)}
.ac-flag i{width:5px;height:5px;border-radius:50%;background:var(--ac-tan);display:block}
@media (max-width:900px){.ac-hero{padding:118px var(--pad-x) 0}.ac-hero__in{grid-template-columns:1fr;gap:34px}.ac-hero__mask{justify-self:start;max-width:300px}}

/* deck spreads at 16:9, uncropped */
.ac-plate{padding:88px var(--pad-x)}
.ac-plate--ox{background:var(--ac-ox)}
.ac-plate--cream{background:var(--ac-cream)}
.ac-spread{max-width:min(1400px,100%);margin:0 auto}
.ac-spread figure{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.12)}
.ac-spread img{width:100%;height:auto;display:block}
.ac-spread figcaption{margin:0 0 46px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(234,226,215,.5)}
.ac-plate--cream .ac-spread figcaption{color:#7a6a5c}
.ac-spread figcaption:last-child{margin-bottom:0}
.ac-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:min(1400px,100%);margin:0 auto}
.ac-duo figure{margin:0;border-radius:var(--radius);overflow:hidden}
.ac-duo img{width:100%;height:auto;display:block}
@media (max-width:900px){.ac-duo{grid-template-columns:1fr}.ac-plate{padding:56px var(--pad-x)}}

/* the falcon set — three marks, ~0.88 */
.ac-falcons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:56px auto 0}
.ac-falcons figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--ac-ox);aspect-ratio:0.88;display:flex;align-items:center;justify-content:center;padding:6%}
.ac-falcons img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:820px){.ac-falcons{grid-template-columns:1fr}}

/* rings — portrait 0.7, beside the collection copy */
.ac-rings{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;max-width:var(--maxw);margin:0 auto}
.ac-rings figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--ac-ox)}
.ac-rings img{width:100%;height:auto;display:block}
@media (max-width:900px){.ac-rings{grid-template-columns:1fr;gap:34px}}

/* the four pieces */
.ac-pieces{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px;border-top:1px solid rgba(234,226,215,.2);margin-top:8px}
.ac-pieces div{padding:26px 0;border-bottom:1px solid rgba(234,226,215,.2)}
.ac-pieces .n{font-family:var(--display);font-weight:300;font-size:clamp(19px,2vw,28px);letter-spacing:.02em;color:var(--ac-cream)}
.ac-pieces b{display:block;margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,226,215,.5);font-weight:400}
@media (max-width:820px){.ac-pieces{grid-template-columns:1fr 1fr}}

/* palette swatches */
.ac-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.ac-swatches div{border-radius:12px;aspect-ratio:4/5;display:flex;align-items:flex-end;padding:16px}
.ac-swatches b{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;line-height:1.6}
.ac-swatches span{display:block;opacity:.6}
@media (max-width:600px){.ac-swatches{grid-template-columns:1fr 1fr}}
/* v85 — attributed pull-quote in journal posts */
.post-body .post-attrib{margin:-18px 0 34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* ============================================================
   v86 — ARIANA GRANDE · fragrance retail creative
   Every source is square (2000×2000) — all boxes are 1:1.
   ============================================================ */
[data-case="ariana"]{--ag-cloud:#4aa8dd;--ag-pink:#f2a6c0;--ag-rem:#8c1830;--ag-mod:#e8dcc8}
.ag-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:#dfe9f2}
.ag-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.ag-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,34,.8),rgba(20,24,34,.06) 56%)}
.ag-hero__in{position:relative;z-index:2;width:100%;padding:0 var(--pad-x) 56px;color:#fff}
.ag-count{font-family:var(--display);font-weight:200;font-size:clamp(58px,10vw,168px);line-height:.86;letter-spacing:-.05em;margin:18px 0 14px}
.ag-count em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.4em;letter-spacing:-.02em}
.ag-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.85vw,27px);line-height:1.38;letter-spacing:-.02em;color:rgba(255,255,255,.9);max-width:34ch}

/* one scent = one block: two worlds, two packshots */
.ag-scent{padding:76px 0;border-top:1px solid var(--line)}
.ag-scent:first-of-type{border-top:0;padding-top:0}
.surface-dark .ag-scent{border-color:rgba(244,243,239,.15)}
.ag-scent__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.ag-scent__name{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.4vw,54px);line-height:1;letter-spacing:-.035em}
.ag-scent__name em{font-family:var(--serif);font-style:italic;font-weight:400}
.ag-scent__notes{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);line-height:1.9;max-width:62ch}
.ag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ag-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);aspect-ratio:1/1}
.ag-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.ag-grid figure:hover img{transform:scale(1.03)}
@media (max-width:900px){.ag-grid{grid-template-columns:1fr 1fr}.ag-scent{padding:52px 0}}

/* the delivery schedule */
.ag-deliv{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;border-top:1px solid var(--line);margin-top:54px}
.surface-dark .ag-deliv{border-color:rgba(244,243,239,.16)}
.ag-deliv div{padding:28px 0;border-bottom:1px solid var(--line)}
.surface-dark .ag-deliv div{border-color:rgba(244,243,239,.16)}
.ag-deliv b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:12px}
.ag-deliv .n{font-family:var(--display);font-weight:200;font-size:clamp(30px,3.6vw,54px);line-height:.9;letter-spacing:-.04em}
.ag-deliv p{margin-top:12px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.surface-dark .ag-deliv p{color:rgba(244,243,239,.62)}
@media (max-width:820px){.ag-deliv{grid-template-columns:1fr 1fr}}

/* ============================================================
   v87 — KHLOÉ KARDASHIAN · fragrance launch creative
   Every source is 9:16 portrait — social-first, so the grid is too.
   ============================================================ */
[data-case="khloe"]{--kk-blue:#a9d3e8;--kk-lilac:#c9b6dd;--kk-gold:#e4c99a;--kk-sand:#f3e9dd}
.kk-hero{background:linear-gradient(140deg,#eef4f8 0%,#f3ecf6 46%,#faf1e6 100%);padding:150px var(--pad-x) 0;overflow:hidden}
.kk-hero__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.kk-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(52px,8.4vw,142px);line-height:.88;letter-spacing:-.05em;margin:24px 0 20px;color:var(--ink)}
.kk-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.kk-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.85vw,27px);line-height:1.4;letter-spacing:-.02em;color:var(--grey-2);max-width:32ch;margin-bottom:56px}
.kk-hero__art{margin:0;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;max-width:min(420px,100%);justify-self:end}
.kk-hero__art img{width:100%;height:auto;display:block}
.kk-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;color:var(--grey-2)}
.kk-flag i{width:5px;height:5px;border-radius:50%;background:var(--kk-lilac);display:block}
@media (max-width:900px){.kk-hero{padding:118px var(--pad-x) 0}.kk-hero__in{grid-template-columns:1fr;gap:34px}.kk-hero__art{justify-self:start;max-width:280px}.kk-hero__line{margin-bottom:0}}

/* one scent world per block — all 9:16 */
.kk-world{padding:76px 0;border-top:1px solid var(--line)}
.kk-world:first-of-type{border-top:0;padding-top:0}
.surface-dark .kk-world{border-color:rgba(244,243,239,.15)}
.kk-world__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.kk-world__name{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.4vw,54px);line-height:1;letter-spacing:-.035em}
.kk-world__name em{font-family:var(--serif);font-style:italic;font-weight:400}
.kk-world__notes{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);line-height:1.9;max-width:56ch}
.kk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kk-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);aspect-ratio:9/16}
.kk-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.kk-grid figure:hover img{transform:scale(1.03)}
@media (max-width:900px){.kk-grid{grid-template-columns:1fr 1fr}.kk-world{padding:52px 0}}

/* phone-to-shelf */
.kk-reach{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;border-top:1px solid var(--line);margin-top:54px}
.surface-dark .kk-reach{border-color:rgba(244,243,239,.16)}
.kk-reach div{padding:30px 0;border-bottom:1px solid var(--line)}
.surface-dark .kk-reach div{border-color:rgba(244,243,239,.16)}
.kk-reach .n{font-family:var(--display);font-weight:200;font-size:clamp(32px,4vw,62px);line-height:.9;letter-spacing:-.045em}
.kk-reach b{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:400}
@media (max-width:820px){.kk-reach{grid-template-columns:1fr}}

/* ============================================================
   v89 — WALMART · BIRDY BOUND (CAD to campaign)
   Lifestyle stills are 2:3; the film is 9:16 vertical.
   ============================================================ */
[data-case="birdy"]{--bb-navy:#1b2a44;--bb-turf:#5f7d3a}
.bb-hero{background:var(--bb-navy);color:#f2f4f6;padding:150px var(--pad-x) 0;overflow:hidden}
.bb-hero__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.bb-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(46px,7.4vw,124px);line-height:.9;letter-spacing:-.05em;margin:24px 0 20px}
.bb-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.bb-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.85vw,27px);line-height:1.4;letter-spacing:-.02em;color:rgba(242,244,246,.8);max-width:34ch;margin-bottom:56px}
.bb-hero__film{margin:0;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;max-width:min(380px,100%);justify-self:end;background:#000;box-shadow:0 34px 80px rgba(0,0,0,.42)}
.bb-hero__film video{width:100%;height:auto;display:block}
.bb-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(242,244,246,.32);border-radius:100px;padding:7px 14px;color:#f2f4f6}
.bb-flag i{width:5px;height:5px;border-radius:50%;background:var(--bb-turf);display:block}
@media (max-width:900px){.bb-hero{padding:118px var(--pad-x) 0}.bb-hero__in{grid-template-columns:1fr;gap:34px}.bb-hero__film{justify-self:start;max-width:280px}.bb-hero__line{margin-bottom:0}}

/* the CAD-to-campaign pipeline */
.bb-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;border-top:1px solid var(--line);margin-top:54px}
.surface-dark .bb-flow{border-color:rgba(244,243,239,.16)}
.bb-flow div{padding:28px 0;border-bottom:1px solid var(--line)}
.surface-dark .bb-flow div{border-color:rgba(244,243,239,.16)}
.bb-flow b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:12px}
.bb-flow .t{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.7vw,23px);letter-spacing:-.02em;margin-bottom:10px}
.bb-flow p{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.surface-dark .bb-flow p{color:rgba(244,243,239,.62)}
@media (max-width:820px){.bb-flow{grid-template-columns:1fr 1fr}}

/* lifestyle grid — 2:3 throughout */
.bb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bb-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);aspect-ratio:2/3}
.bb-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.bb-grid figure:hover img{transform:scale(1.03)}
@media (max-width:900px){.bb-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   v90 — ENDERSHAM · fifty years, rebranded
   Endersham Teal #00B2A9 (PANTONE 326 C, stated in the deck) + navy.
   Brand deck spreads 16:9 · brochure spreads ~4:5.
   ============================================================ */
[data-case="endersham"]{--en-teal:#00b2a9;--en-navy:#22323f}
.en-hero{background:var(--en-navy);color:#eef3f4;padding:150px var(--pad-x) 0;overflow:hidden}
.en-hero__in{max-width:var(--maxw);margin:0 auto}
.en-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(50px,8.4vw,146px);line-height:.88;letter-spacing:-.05em;margin:24px 0 20px;max-width:16ch}
.en-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--en-teal)}
.en-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.85vw,27px);line-height:1.4;letter-spacing:-.02em;color:rgba(238,243,244,.8);max-width:38ch}
.en-hero__art{margin:60px auto 0;max-width:min(1300px,100%);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.en-hero__art img{width:100%;height:auto;display:block}
.en-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(238,243,244,.32);border-radius:100px;padding:7px 14px;color:#eef3f4}
.en-flag i{width:5px;height:5px;border-radius:50%;background:var(--en-teal);display:block}
@media (max-width:900px){.en-hero{padding:118px var(--pad-x) 0}.en-hero__art{margin-top:40px}}

.en-plate{padding:88px var(--pad-x)}
.en-plate--navy{background:var(--en-navy)}
.en-plate--pale{background:#eef3f4}
.en-spread{max-width:min(1400px,100%);margin:0 auto}
.en-spread figure{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.08)}
.en-spread img{width:100%;height:auto;display:block}
.en-spread figcaption{margin:0 0 46px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.en-plate--navy .en-spread figcaption{color:rgba(238,243,244,.5)}
.en-spread figcaption:last-child{margin-bottom:0}
.en-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:min(1400px,100%);margin:0 auto}
.en-duo figure{margin:0;border-radius:var(--radius);overflow:hidden}
.en-duo img{width:100%;height:auto;display:block}
@media (max-width:900px){.en-duo{grid-template-columns:1fr}.en-plate{padding:56px var(--pad-x)}}

/* perception vs performance */
.en-gap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px;border-top:1px solid rgba(238,243,244,.18);border-bottom:1px solid rgba(238,243,244,.18);padding:52px 0;margin-top:60px}
.en-gap .v{font-family:var(--display);font-weight:200;font-size:clamp(34px,5vw,80px);line-height:.9;letter-spacing:-.04em}
.en-gap .v.old{color:rgba(238,243,244,.34)}
.en-gap .v.new{color:var(--en-teal)}
.en-gap .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,243,244,.5);margin-top:14px}
.en-gap .arw{font-family:var(--serif);font-size:clamp(24px,3vw,44px);color:rgba(238,243,244,.4)}
.en-gap .r{text-align:right}
@media (max-width:720px){.en-gap{grid-template-columns:1fr;gap:22px}.en-gap .r{text-align:left}.en-gap .arw{display:none}}

/* the five values */
.en-values{display:grid;grid-template-columns:repeat(5,1fr);gap:0 26px;border-top:1px solid var(--line);margin-top:52px}
.surface-dark .en-values{border-color:rgba(244,243,239,.16)}
.en-values div{padding:26px 0;border-bottom:1px solid var(--line)}
.surface-dark .en-values div{border-color:rgba(244,243,239,.16)}
.en-values b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:var(--grey);font-weight:400;margin-bottom:12px}
.en-values .t{font-family:var(--display);font-weight:300;font-size:clamp(15px,1.45vw,20px);letter-spacing:-.02em}
@media (max-width:900px){.en-values{grid-template-columns:1fr 1fr}}

/* ============================================================
   v91 — EDMUND SERVICES · luxury facilities management
   Rosewood #951B26 on charcoal. Deck spreads 16:9.
   ============================================================ */
[data-case="edmund"]{--ed-rose:#951b26;--ed-ink:#111113}
.ed-hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ed-ink)}
.ed-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ed-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.86) 0%,rgba(10,10,12,.42) 46%,rgba(10,10,12,.2) 100%)}
.ed-hero__in{position:relative;z-index:2;width:100%;padding:0 var(--pad-x) 58px;color:#f4f4f5}
.ed-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(46px,7.4vw,124px);line-height:.9;letter-spacing:-.05em;margin:20px 0 18px;max-width:16ch}
.ed-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ed-rose)}
.ed-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.8vw,26px);line-height:1.4;letter-spacing:-.02em;color:rgba(244,244,245,.84);max-width:36ch}
.ed-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(244,244,245,.32);border-radius:100px;padding:7px 14px;color:#f4f4f5}
.ed-flag i{width:5px;height:5px;border-radius:50%;background:var(--ed-rose);display:block}

.ed-plate{padding:88px var(--pad-x)}
.ed-plate--ink{background:var(--ed-ink)}
.ed-plate--pale{background:#f2f1f0}
.ed-spread{max-width:min(1400px,100%);margin:0 auto}
.ed-spread figure{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.1)}
.ed-spread img{width:100%;height:auto;display:block}
.ed-spread figcaption{margin:0 0 46px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.ed-plate--ink .ed-spread figcaption{color:rgba(244,244,245,.5)}
.ed-spread figcaption:last-child{margin-bottom:0}
.ed-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:min(1400px,100%);margin:0 auto}
.ed-duo figure{margin:0;border-radius:var(--radius);overflow:hidden}
.ed-duo img{width:100%;height:auto;display:block}
@media (max-width:900px){.ed-duo{grid-template-columns:1fr}.ed-plate{padding:56px var(--pad-x)}}

/* the three pillars */
.ed-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;border-top:1px solid var(--line);margin-top:56px}
.surface-dark .ed-pillars{border-color:rgba(244,243,239,.16)}
.ed-pillars div{padding:30px 0;border-bottom:1px solid var(--line)}
.surface-dark .ed-pillars div{border-color:rgba(244,243,239,.16)}
.ed-pillars b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:var(--grey);font-weight:400;margin-bottom:14px}
.ed-pillars .t{font-family:var(--display);font-weight:200;font-size:clamp(24px,3vw,44px);letter-spacing:-.035em}
@media (max-width:820px){.ed-pillars{grid-template-columns:1fr}}

/* ============================================================
   v94 — HAVAIANAS × URBAN OUTFITTERS · Banca de Fruta
   Hot pink field, hand-drawn characters. Sources vary in ratio,
   so plates size to the artwork.
   ============================================================ */
[data-case="banca"]{--bf-pink:#f5308c;--bf-lime:#a3d13a;--bf-yellow:#ffc61e;--bf-red:#e8352b}
.bf-hero{background:var(--bf-pink);color:#fff;padding:150px var(--pad-x) 0;overflow:hidden}
.bf-hero__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.bf-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(50px,8.6vw,148px);line-height:.86;letter-spacing:-.05em;margin:22px 0 20px}
.bf-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--bf-yellow)}
.bf-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(17px,1.85vw,27px);line-height:1.4;letter-spacing:-.02em;color:rgba(255,255,255,.92);max-width:32ch;padding-bottom:60px}
/* the artwork IS a sticker set — so present it as one rather than floating
   red-on-pink, where it disappears */
.bf-hero__art{margin:0;justify-self:end;max-width:min(430px,100%);background:#fdf6ec;
  border-radius:26px;padding:34px 30px;transform:rotate(-3deg);box-shadow:0 28px 60px rgba(0,0,0,.18)}
.bf-hero__art img{width:100%;height:auto;display:block}
.bf-chars figure{background:#fff;border-radius:18px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.07)}
.bf-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);border-radius:100px;padding:7px 14px;color:#fff}
.bf-flag i{width:5px;height:5px;border-radius:50%;background:var(--bf-yellow);display:block}
@media (max-width:900px){.bf-hero{padding:118px var(--pad-x) 0}.bf-hero__in{grid-template-columns:1fr;gap:28px}.bf-hero__art{justify-self:start;max-width:300px}.bf-hero__line{padding-bottom:0}}

/* the character set */
.bf-chars{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:var(--maxw);margin:56px auto 0;align-items:center}
.bf-chars figure{margin:0}
.bf-chars img{width:100%;height:auto;display:block}
@media (max-width:900px){.bf-chars{grid-template-columns:1fr 1fr 1fr;gap:14px}}

.bf-plate{padding:84px var(--pad-x)}
.bf-plate--pink{background:var(--bf-pink)}
.bf-plate--pale{background:#fdf6ec}
.bf-spread{max-width:min(1400px,100%);margin:0 auto}
.bf-spread figure{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:#fff}
.bf-spread img{width:100%;height:auto;display:block}
.bf-spread figcaption{margin:0 0 46px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.bf-plate--pink .bf-spread figcaption{color:rgba(255,255,255,.75)}
.bf-spread figcaption:last-child{margin-bottom:0}
.bf-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:min(1400px,100%);margin:0 auto}
.bf-duo figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff}
.bf-duo img{width:100%;height:auto;display:block}
@media (max-width:900px){.bf-duo{grid-template-columns:1fr}.bf-plate{padding:54px var(--pad-x)}}

/* the 96-hour clock */
.bf-clock{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;border-top:1px solid var(--line);margin-top:54px}
.surface-dark .bf-clock{border-color:rgba(244,243,239,.16)}
.bf-clock div{padding:28px 0;border-bottom:1px solid var(--line)}
.surface-dark .bf-clock div{border-color:rgba(244,243,239,.16)}
.bf-clock .n{font-family:var(--display);font-weight:200;font-size:clamp(30px,3.8vw,58px);line-height:.9;letter-spacing:-.04em}
.bf-clock b{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:400}
@media (max-width:820px){.bf-clock{grid-template-columns:1fr 1fr}}

/* v97 — private work: frosted so neither the imagery nor the client reads */
.tile-locked .tile-media img{filter:blur(26px) saturate(.55) brightness(.9);transform:scale(1.14)}
.tile-frost{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,.12) 42%,rgba(10,10,10,.28));
  backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
  border-radius:inherit}
.tile-locked:hover .tile-media img{filter:blur(24px) saturate(.6) brightness(.95)}
.tile-locked .tile-cap{position:relative;z-index:2}
.tile-locked .yr{opacity:.8}

/* v99 — HOME v2: press folded into proof, journal reduced to a list */
.proof__press{margin-top:44px;padding-top:30px;border-top:1px solid rgba(242,240,234,.14)}
.proof__press-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(242,240,234,.42);margin-bottom:20px}
.proof__press-lbl em{font-family:var(--serif);font-style:italic;text-transform:none;font-size:1.25em;letter-spacing:0;color:rgba(242,240,234,.7)}
.proof .press-strip{opacity:.72}
.jm-sec{padding:96px var(--pad-x)}
.jm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.jm-list{border-top:1px solid var(--line)}
.jm-row{display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);color:var(--ink);transition:padding-left .4s var(--ease)}
.jm-row:hover{padding-left:10px}
.jm-no{font-size:10.5px;letter-spacing:.1em;color:var(--grey-3)}
.jm-t{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.75vw,25px);letter-spacing:-.025em;line-height:1.3}
.jm-go{font-family:var(--mono);font-size:13px;color:var(--grey);transition:transform .35s var(--ease),color .3s}
.jm-row:hover .jm-go{transform:translateX(5px);color:var(--ink)}
@media (max-width:720px){.jm-sec{padding:64px var(--pad-x)}.jm-row{grid-template-columns:38px 1fr auto;gap:14px}}

/* v100 — HOME v2: outcomes (4-up) and sectors share one row */
.os-sec{padding:96px var(--pad-x)}
.os-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:64px;align-items:start}
.os-left .proof__lbl,.os-right .proof__lbl{margin-bottom:24px}
.os-nums{grid-template-columns:1fr 1fr !important;gap:0 34px}
.os-right{border-left:1px solid rgba(242,240,234,.14);padding-left:56px}
.os-sectors{list-style:none;margin:0;padding:0;border-top:1px solid rgba(242,240,234,.14)}
.os-sectors li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(242,240,234,.14);
  font-family:var(--display);font-weight:300;font-size:clamp(15px,1.4vw,20px);letter-spacing:-.02em;color:rgba(242,240,234,.92)}
.os-sectors li span{font-size:10px;letter-spacing:.1em;color:rgba(242,240,234,.4);flex:0 0 auto}
@media (max-width:1000px){
  .os-grid{grid-template-columns:1fr;gap:48px}
  .os-right{border-left:0;padding-left:0;border-top:1px solid rgba(242,240,234,.14);padding-top:40px}
  .os-nums{grid-template-columns:1fr 1fr !important}
}
@media (max-width:560px){.os-nums{grid-template-columns:1fr !important}}

/* v101 — HOME v2 rev: studio+sectors row, press under clients, one-line journal */
.os-lede{font-family:var(--display);font-weight:200;font-size:clamp(24px,2.9vw,44px);line-height:1.16;letter-spacing:-.03em;color:rgba(242,240,234,.95);max-width:22ch}
.os-lede em{font-family:var(--serif);font-style:italic;font-weight:400}
.cl-press{max-width:var(--maxw);margin:56px auto 18px;padding:26px var(--pad-x) 0;border-top:1px solid var(--line)}
.cl-press-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.cl-press-lbl em{font-family:var(--serif);font-style:italic;text-transform:none;font-size:1.25em;letter-spacing:0;color:var(--ink)}
.jmin{padding:34px var(--pad-x);border-top:1px solid var(--line)}
.jmin-in{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.jmin-lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-3);flex:0 0 auto}
.jmin-t{flex:0 1 auto;min-width:0;font-family:var(--display);font-weight:300;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.02em;color:var(--ink);
  border-bottom:1px solid transparent;transition:border-color .3s}
.jmin-t:hover{border-color:var(--ink)}
.jmin-all{flex:0 0 auto}
@media (max-width:720px){.jmin-in{gap:14px}.jmin{padding:26px var(--pad-x)}}
.os-title{margin-top:18px}
.os-right .proof__lbl{display:none}

/* v103 — home v2: quieter sectors + testimonials, cleaner surface joins */
.reviews-min{padding:74px var(--pad-x)}
.reviews-min .rev-eyebrow{margin-bottom:26px}
.reviews-min .tq{font-size:clamp(17px,1.9vw,26px) !important;line-height:1.5 !important;max-width:60ch}
.reviews-min .tstm2-slide{padding:0}
.reviews-min cite b{font-size:14px}
.os-sec{padding:80px var(--pad-x)}
.os-title{margin-top:16px;font-size:clamp(30px,4vw,58px)}
.os-sectors li{padding:11px 0;font-size:clamp(14px,1.25vw,18px)}
/* the dark run (audit → reviews → sectors) should read as one field, not three slabs */
.hau + .reviews-min{border-top:1px solid rgba(242,240,234,.12)}
.reviews-min + .os-sec{border-top:1px solid rgba(242,240,234,.12);padding-top:74px}

/* v105 — clients stays the single full-width list (user reverted the two-column trial) */

/* v106 — journal one-liner: hover floats a preview, matching the menu rows */
.jmin-t{position:relative}
/* sits after the headline, in the empty run of the row — never over the type */
.jmin-prev{position:absolute;left:100%;top:50%;width:210px;height:136px;margin-left:34px;
  border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;
  transform:translate(-14px,-50%) scale(.94) rotate(-2deg);
  transition:opacity .45s var(--ease),transform .6s var(--ease);z-index:5;
  box-shadow:0 24px 50px rgba(0,0,0,.22)}
.jmin-prev img{width:100%;height:100%;object-fit:cover;display:block}
.jmin-t:hover .jmin-prev{opacity:1;transform:translate(0,-50%) scale(1) rotate(-2deg)}
@media (max-width:900px){.jmin-prev{display:none}}
.jmin-in{justify-content:flex-start}
.jmin-all{margin-left:auto}

/* v110 — pricing: exact on the product, "from" on scoped work, a route for the rest */
.hau__rung-alt{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,240,234,.62);border-bottom:1px solid rgba(242,240,234,.28);padding:0 0 4px;margin-left:4px;transition:.3s}
.hau__rung-alt:hover{color:#f2f0ea;border-color:#f2f0ea}
.au-alt{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:14px;
  border:1px dashed rgba(242,240,234,.28);border-radius:var(--radius);padding:24px 26px;transition:border-color .4s,background .4s}
.au-alt:hover{border-color:rgba(242,240,234,.55);background:rgba(242,240,234,.04)}
.au-alt .step{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,240,234,.5)}
.au-alt .nm{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.7vw,23px);letter-spacing:-.025em;margin-top:10px;color:#f2f0ea}
.au-alt__go{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#f2f0ea;white-space:nowrap}

/* ============================================================
   v111 — THE RETAINER
   ============================================================ */
.rt-month{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;border-top:1px solid rgba(244,243,239,.16);margin-top:54px}
.rt-month div{padding:30px 0;border-bottom:1px solid rgba(244,243,239,.16)}
.rt-month b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:12px}
.rt-month .t{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.8vw,25px);letter-spacing:-.025em;margin-bottom:10px}
.rt-month p{font-size:14.5px;line-height:1.75;color:rgba(244,243,239,.62)}
@media (max-width:820px){.rt-month{grid-template-columns:1fr}}

.rt-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.rt-tier{border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column;transition:border-color .4s,transform .5s var(--ease)}
.rt-tier:hover{border-color:var(--ink);transform:translateY(-3px)}
.rt-tier--mid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rt-tier .step{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.rt-tier--mid .step{color:rgba(244,243,239,.55)}
.rt-tier .nm{font-family:var(--display);font-weight:300;font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;margin:14px 0 18px}
.rt-tier .pr{font-family:var(--display);font-weight:200;font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;margin-bottom:24px}
.rt-tier .pr span{font-size:.38em;letter-spacing:.02em;color:var(--grey)}
.rt-tier--mid .pr span{color:rgba(244,243,239,.55)}
.rt-tier ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rt-tier--mid ul{border-color:rgba(244,243,239,.18)}
.rt-tier li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.rt-tier--mid li{border-color:rgba(244,243,239,.18);color:rgba(244,243,239,.78)}
@media (max-width:900px){.rt-tiers{grid-template-columns:1fr}}

.rt-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;border-top:1px solid rgba(244,243,239,.16);margin-top:54px}
.rt-compare div{padding:30px 0;border-bottom:1px solid rgba(244,243,239,.16)}
.rt-compare .n{font-family:var(--display);font-weight:200;font-size:clamp(32px,4vw,62px);line-height:.9;letter-spacing:-.045em;color:rgba(244,243,239,.4)}
.rt-compare .n span{font-size:.4em;letter-spacing:.02em}
.rt-compare--on .n{color:#f2f0ea}
.rt-compare b{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:400}
@media (max-width:820px){.rt-compare{grid-template-columns:1fr}}

/* v112 — paid landing page: no escape routes */
[data-lp="1"] .sitebar--lp .sb-logo{cursor:default}
[data-lp="1"] .foot{padding-bottom:40px}
[data-lp="1"] .foot-base{border-top:1px solid rgba(244,243,239,.14);padding-top:24px}

/* v113 — mid-funnel capture: catches everyone not ready for £750 */
.mfun{padding:88px var(--pad-x);background:var(--paper-2);border-top:1px solid var(--line)}
.mfun-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;max-width:var(--maxw);margin:0 auto}
.mfun-h{font-family:var(--display);font-weight:200;font-size:clamp(26px,3.2vw,50px);line-height:1.1;letter-spacing:-.035em;margin:16px 0 16px;max-width:18ch}
.mfun-h em{font-family:var(--serif);font-style:italic;font-weight:400}
.mfun-sub{font-size:15px;line-height:1.8;color:var(--ink-soft);max-width:52ch}
.mfun-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mfun-form input[type=email]{flex:1 1 240px;min-width:0;background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:15px 22px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:border-color .3s}
.mfun-form input[type=email]:focus{border-color:var(--ink)}
.mfun-form input::placeholder{color:var(--grey)}
.mfun-form button{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:16px 26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.3s}
.mfun-form button:hover{opacity:.85}
.mfun-note{flex:1 0 100%;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-3);margin-top:4px}
/* ── v374 · the notes signup answers in place ───────────────────
   The form used to POST straight to Netlify with no action, so it
   navigated away to Netlify's own unbranded success page. You left the
   site and had no idea whether it had worked. It now answers here.

   The done state takes the form's grid slot, so the section does not
   jump height when it swaps. */
.mfun-done{align-self:center}
.mfun-done .k{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0 0 12px}
.mfun-done .k i{width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
.mfun-done h3{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,32px);
  letter-spacing:-.02em;line-height:1.2;margin:0 0 12px;color:var(--ink)}
.mfun-done h3 em{font-family:var(--serif);font-style:italic}
.mfun-done p{margin:0;font-size:15px;line-height:1.65;color:var(--grey-2);max-width:44ch}
.mfun-done b{font-weight:500;color:var(--ink)}
/* The failure state has to be as visible as the success one. Telling
   someone they are subscribed when the request died is worse than
   telling them nothing. */
.mfun-err{flex:1 0 100%;margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
.mfun-err a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.mfun-form button[disabled]{opacity:.55;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:900px){.mfun{padding:60px var(--pad-x)}.mfun-in{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   v114 — footer lockup (typographic "and MELO"), live city clocks,
          home private-client film
   ============================================================ */

/* the masked-PNG watermark is retired: the wordmark is real type now */
.foot-wm{
  display:flex!important;align-items:baseline;justify-content:flex-start;gap:.06em;
  margin:22px var(--pad-x) 0;padding:0;overflow:hidden;
  background:none!important;-webkit-mask:none!important;mask:none!important;
  height:auto;line-height:.78;color:var(--ink);opacity:.11;
  text-decoration:none;user-select:none;
  transition:opacity .6s var(--ease)}
.foot-wm:hover{opacity:.18}
.foot-wm__and{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(46px,14.6vw,232px);letter-spacing:-.02em}
.foot-wm__melo{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(56px,17.4vw,278px);letter-spacing:-.045em}

/* live local time, sat above the legal line */
.foot-clocks{
  display:flex;flex-wrap:wrap;gap:8px 34px;
  padding:26px var(--pad-x) 0;border-top:1px solid var(--line);margin-top:30px}
.foot-clocks span{display:inline-flex;align-items:baseline;gap:9px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey-3)}
.foot-clocks b{font-weight:400;color:var(--grey-2)}
.foot-clocks time{font-variant-numeric:tabular-nums;color:var(--ink);opacity:.72}
.foot-light .foot-base{border-top:0;margin-top:20px}
@media (max-width:700px){
  .foot-clocks{gap:8px 22px;padding-top:22px}
  .foot-clocks span{font-size:9.5px;letter-spacing:.08em}
  .foot-wm{display:flex!important;margin-top:14px}
}

/* home: the private-client film reads a touch wider and shorter than on About */
.pfilm-wide{min-height:72svh}
@media (max-width:720px){.pfilm-wide{min-height:58svh}}

/* ============================================================
   v115 — interior type scale: quieter, uniform, better breaks
   ----------------------------------------------------------------
   The home page keeps its original scale. Everything behind it
   steps down roughly 20-25% on display type so the pages read as
   composed rather than shouted, and gets balanced line breaking
   so headlines stop splitting awkwardly.
   ============================================================ */

/* --- display type: one scale, used everywhere behind the home page --- */
.page-head h1        {font-size:clamp(40px,7.4vw,118px);line-height:.94;letter-spacing:-.032em}
.cs-title            {font-size:clamp(40px,7vw,110px);line-height:.94;letter-spacing:-.04em}
.cs-statement        {font-size:clamp(26px,3.6vw,58px);line-height:1.12;letter-spacing:-.03em;max-width:19ch}
.cs-lede             {font-size:clamp(23px,2.8vw,42px);line-height:1.2;letter-spacing:-.025em;max-width:22ch}
.cs-quote            {font-size:clamp(23px,2.9vw,42px);line-height:1.26;letter-spacing:-.025em;max-width:24ch}
.cs-swap .v          {font-size:clamp(28px,4.2vw,66px)}
.cs-swap .arw        {font-size:clamp(20px,2.4vw,34px)}
.cs-hero-foot .clock {font-size:clamp(26px,3.4vw,50px)}

/* --- supporting type: a touch smaller, a touch more air --- */
.page-head .ph-sub   {font-size:clamp(15.5px,1.25vw,18px);line-height:1.62;max-width:58ch;margin-top:24px}
.page-head .ph-meta b{font-size:19px}
.cs-meta-row .m span {font-size:clamp(15px,1.3vw,18px)}
.cs-body p           {font-size:15.5px;line-height:1.78;margin-bottom:20px}
.cs-sub              {font-size:15.5px;line-height:1.78;max-width:58ch;margin-top:28px}
.cs-serv span        {font-size:clamp(14.5px,1.25vw,17.5px)}

/* --- stop headlines breaking in the wrong places --- */
.page-head h1,.cs-title,.cs-statement,.cs-lede,.cs-quote,
.cs-swap .v,.section-title,.foot-big,.mfun-h,.rt-h,.au-h{text-wrap:balance}
.cs-body p,.cs-sub,.ph-sub,.cs-quote+.cs-body,.post-lede,.rt-body,.au-body{text-wrap:pretty}

/* --- section rhythm: consistent vertical spacing between case beats --- */
.cs-lede{margin-bottom:0}
.cs-quote+.cs-body{margin-top:24px}

@media (max-width:720px){
  .page-head h1{font-size:clamp(36px,10.5vw,58px)}
  .cs-title{font-size:clamp(36px,10vw,56px)}
  .cs-body p,.cs-sub{font-size:15px}
}

/* ============================================================
   v116 — audit page: the problem section, pearlescent "what you get"
   ============================================================ */

/* --- the problem, named in the reader's own words --- */
.au-pain{padding:96px var(--pad-x) 100px;background:var(--paper);border-top:1px solid rgba(242,240,234,.10)}
.au-pain__list{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 54px}
.au-pain__list li{
  position:relative;padding:20px 0 20px 26px;border-bottom:1px solid rgba(242,240,234,.12);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.85vw,26px);line-height:1.42;letter-spacing:-.01em;color:var(--ink)}
.au-pain__list li::before{content:"";position:absolute;left:0;top:32px;
  width:9px;height:1px;background:currentColor;opacity:.45}
.au-pain__foot{margin-top:44px;max-width:62ch;font-size:15.5px;line-height:1.78;color:rgba(242,240,234,.72)}
@media (max-width:820px){
  .au-pain{padding:70px var(--pad-x) 74px}
  .au-pain__list{grid-template-columns:1fr;gap:0}
  .au-pain__list li{font-size:18px;padding:16px 0 16px 22px}
  .au-pain__list li::before{top:27px}
}

/* --- "what you get" carries the pearlescent sheen; "what it isn't" stays flat --- */
.au-card--pearl{
  position:relative;border-color:transparent;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    linear-gradient(135deg,
      hsl(280 42% 84%) 0%,  hsl(330 48% 86%) 16%, hsl(15 55% 87%) 32%,
      hsl(155 38% 85%) 48%, hsl(195 46% 86%) 64%, hsl(255 40% 87%) 80%,
      hsl(330 48% 86%) 100%) border-box;
  border:1px solid transparent;
  box-shadow:0 1px 40px rgba(158,140,190,.10)}
.au-card--pearl::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,
    hsla(280,60%,80%,.13) 0%, hsla(330,60%,84%,.09) 22%, hsla(20,70%,84%,.07) 42%,
    hsla(160,50%,80%,.07) 62%, hsla(200,60%,84%,.10) 82%, hsla(270,55%,82%,.13) 100%)}
.au-card--pearl>*{position:relative;z-index:1}
.au-card--pearl h3{color:var(--ink);opacity:.62}
.au-card--pearl li{border-top-color:rgba(120,100,150,.16)}
.au-card--pearl li i{color:hsl(272 30% 52%)}

/* v116.1 — four-step audit timeline + a touch more presence on the pearl card */
.au-days--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.au-days--4{grid-template-columns:repeat(2,1fr);gap:38px 44px}}
@media (max-width:640px){.au-days--4{grid-template-columns:1fr}}
.au-card--pearl{box-shadow:0 1px 44px rgba(158,140,190,.16)}
.au-card--pearl::before{
  background:linear-gradient(150deg,
    hsla(280,62%,78%,.20) 0%, hsla(330,62%,82%,.14) 22%, hsla(20,72%,82%,.11) 42%,
    hsla(160,52%,78%,.11) 62%, hsla(200,62%,82%,.15) 82%, hsla(270,58%,80%,.20) 100%)}

/* ============================================================
   v117 — brief builder: hint no longer collides, contact capture
   ============================================================ */
/* the -20px lift is only correct directly under a heading; after the
   option chips it was pulling the hint up over the buttons */
.brief-hint{margin:0 0 24px}
.brief-h + .brief-hint{margin-top:-20px}
.brief-opts + .brief-hint{margin-top:24px;margin-bottom:0}

.brief-sub{margin:30px 0 14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);padding-top:24px;border-top:1px solid var(--line)}
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brief-grid .brief-field{margin:0}
@media (max-width:620px){.brief-grid{grid-template-columns:1fr}}

/* v118 — brief: the received screen */
.brief-done{text-align:center;padding:52px 0 44px}
.brief-done .brief-h{font-size:clamp(30px,3.6vw,52px);margin-bottom:18px;text-transform:none}
.brief-done__line{font-family:var(--display);font-weight:200;
  font-size:clamp(19px,2vw,29px);line-height:1.3;letter-spacing:-.02em;
  max-width:24ch;margin:0 auto 30px;color:var(--ink);text-wrap:balance}
.brief-done__line em{font-family:var(--serif);font-style:italic;font-weight:400}
.brief-done__mail{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--grey);text-transform:uppercase}

/* ============================================================
   v119 — "considering a rebrand" prompt
   Quiet, editorial, and easy to dismiss. Nothing about it should
   feel like a discount popup.
   ============================================================ */
.rbp{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.rbp.on{opacity:1;pointer-events:auto}
.rbp__scrim{position:absolute;inset:0;background:rgba(10,10,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rbp__card{position:relative;width:min(540px,100%);background:var(--paper);color:var(--ink);
  border-radius:var(--radius);padding:46px 44px 34px;box-shadow:0 40px 120px rgba(0,0,0,.34);
  transform:translateY(14px) scale(.985);transition:transform .5s var(--ease)}
.rbp.on .rbp__card{transform:none}
.rbp__x{position:absolute;top:16px;right:18px;width:34px;height:34px;border:0;background:none;
  font-size:24px;line-height:1;color:var(--grey);cursor:pointer;border-radius:50%;transition:.25s}
.rbp__x:hover{color:var(--ink);background:var(--paper-2)}
.rbp__k{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.rbp__k i{width:5px;height:5px;border-radius:50%;background:var(--ink);display:inline-block}
.rbp__h{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.4vw,42px);
  line-height:1.06;letter-spacing:-.035em;margin-bottom:16px}
.rbp__h em{font-family:var(--serif);font-style:italic;font-weight:400}
.rbp__p{font-size:15px;line-height:1.72;color:var(--ink-soft);margin-bottom:28px;text-wrap:pretty}
.rbp__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.rbp__cta .btn{width:100%;justify-content:center}
.rbp__alt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey-2);border-bottom:1px solid var(--line);padding-bottom:2px;transition:.3s;align-self:center}
.rbp__alt:hover{color:var(--ink);border-color:var(--ink)}
.rbp__no{display:block;margin:26px auto 0;background:none;border:0;cursor:pointer;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-3);transition:.3s}
.rbp__no:hover{color:var(--grey)}
body.rbp-open{overflow:hidden}
@media (max-width:560px){
  .rbp{padding:16px;align-items:flex-end}
  .rbp__card{padding:36px 26px 26px;border-radius:var(--radius) var(--radius) 0 0}
}
@media (prefers-reduced-motion:reduce){
  .rbp,.rbp__card{transition:none}
}

/* ============================================================
   v121 — the private-client film now carries the client quotes.
   Replaces the standalone reviews section on the home page: proof
   over the best footage on the site, and one section instead of two.
   ============================================================ */
.pfilm-tstm{min-height:88svh;align-items:center}
/* the film needs a heavier, more even scrim than the caption version:
   text sits mid-frame here, not tucked into the bottom */
.pfilm-tstm::after{
  background:linear-gradient(to top,rgba(0,0,0,.80),rgba(0,0,0,.62) 45%,rgba(0,0,0,.55));
  backdrop-filter:saturate(.92)}
.pfilm-tstm .pfilm__in{padding-top:70px;padding-bottom:70px}
.pfilm-tstm .eyebrow{margin-bottom:36px}

.tstm2--onfilm .tstm2-viewport{overflow:hidden}
.tstm2--onfilm .tstm2-track{display:flex;transition:transform .7s var(--ease)}
.tstm2--onfilm .tstm2-slide{flex:0 0 100%;margin:0;padding-right:4vw;
  display:flex;flex-direction:column;justify-content:center}
.tstm2--onfilm .tq{
  font-family:var(--display);font-weight:200;
  font-size:clamp(20px,2.35vw,34px);line-height:1.34;letter-spacing:-.022em;
  color:#f7f6f2;margin:0 0 30px;max-width:26ch;text-wrap:balance;
  text-shadow:0 1px 24px rgba(0,0,0,.45)}
.tstm2--onfilm .tq em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}
.tstm2--onfilm cite{font-style:normal;display:flex;flex-direction:column;gap:5px}
.tstm2--onfilm cite b{font-family:var(--display);font-weight:400;font-size:15px;color:#f4f3ef}
.tstm2--onfilm cite span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(244,243,239,.58)}
.tstm2--onfilm .tstm2-nav{display:flex;justify-content:space-between;align-items:center;
  margin-top:40px;padding-top:24px;border-top:1px solid rgba(244,243,239,.18);max-width:760px}
.tstm2--onfilm .tstm2-dots{display:flex;gap:9px}
.tstm2--onfilm .tstm2-dots .td{width:8px;height:8px;border-radius:50%;border:0;
  background:rgba(244,243,239,.3);cursor:pointer;padding:0;transition:.35s var(--ease)}
.tstm2--onfilm .tstm2-dots .td.on{background:var(--pearl);width:24px;border-radius:4px}
.tstm2--onfilm .tstm2-arrows{display:flex;gap:10px}
.tstm2--onfilm .tstm2-arrows .ta{width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(244,243,239,.34);background:transparent;color:#f4f3ef;
  cursor:pointer;font-size:15px;transition:.3s var(--ease)}
.tstm2--onfilm .tstm2-arrows .ta:hover{background:#f4f3ef;color:#0a0a0a;border-color:#f4f3ef}

@media (max-width:900px){
  .pfilm-tstm{min-height:auto;padding:64px 0}
  .tstm2--onfilm .tq{font-size:20px;max-width:none;margin-bottom:24px}
  .tstm2--onfilm .tstm2-slide{padding-right:0}
  .tstm2--onfilm .tstm2-nav{margin-top:30px}
}

/* v122 — film section refinements
   The source film is letterboxed in-frame (12.3% black top and bottom), so
   object-fit:cover alone still shows the bars as a seam. Scale past them.  */
.pfilm-tstm video{transform:scale(1.34);transform-origin:center}
/* legibility: weight the scrim to the left where the type sits, keeping the
   right side of the frame open so the footage still reads */
.pfilm-tstm::after{
  background:
    linear-gradient(to right,rgba(0,0,0,.86) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.34) 62%,rgba(0,0,0,.30) 100%),
    linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,.18) 40%,rgba(0,0,0,.42))}
.tstm2--onfilm .tq{max-width:22ch;font-size:clamp(20px,2.15vw,31px)}
@media (max-width:900px){
  .pfilm-tstm video{transform:scale(1.34)}
  .pfilm-tstm::after{background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.62) 45%,rgba(0,0,0,.6))}
  .tstm2--onfilm .tq{max-width:none}
}

/* ============================================================
   v123 — film section: letterbox handled properly, quieter quotes
   ----------------------------------------------------------------
   The source film has 12.3% black baked into the top and bottom.
   With object-fit:cover the bars only fall outside the box once the
   box is wider than 16:9 ÷ 0.754 = 2.36:1. Desktop sections are
   around 1.9:1, so they need a small scale-up; phones are portrait
   and would need a ~3x zoom, which would destroy the frame. So on
   narrow screens the film becomes a 2.36:1 band with the quotes
   below it, and no zoom is needed at all.
   ============================================================ */
.pfilm-tstm video{transform:scale(1.28);transform-origin:center}

/* quieter, tighter quotes */
.tstm2--onfilm .tq{
  font-size:clamp(18px,1.65vw,25px);line-height:1.42;letter-spacing:-.015em;
  max-width:30ch;margin-bottom:26px}
.tstm2--onfilm cite b{font-size:14px}
.tstm2--onfilm cite span{font-size:10px}
.pfilm-tstm .eyebrow{margin-bottom:28px}
.pfilm-tstm{min-height:74svh}

@media (max-width:900px){
  /* film on top as a band, quotes underneath on the dark ground */
  .pfilm-tstm{min-height:0;display:block;background:#0a0a0a;padding:0 0 52px}
  .pfilm-tstm video{position:relative;width:100%;height:auto;aspect-ratio:2.36;
    object-fit:cover;transform:none}
  .pfilm-tstm::after{display:none}
  .pfilm-tstm .pfilm__in{padding:34px var(--pad-x) 0}
  .tstm2--onfilm .tq{font-size:18px;max-width:none;text-shadow:none}
  .tstm2--onfilm .tstm2-nav{max-width:none}
}

/* v124 — David Morris: the campaign live on the house's own landing page */
.dmb-live__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;margin-top:14px}
.dmb-live__screen{margin:0}
.dmb-live__screen video{border-radius:var(--radius);box-shadow:0 30px 90px rgba(0,0,0,.16);background:#fff}
.dmb-live__screen video{display:block;width:100%;height:auto;aspect-ratio:1280/804;object-fit:cover}
/* the recording is a light page, so the caption sits below the frame */
.dmb-live__screen figcaption{margin-top:12px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-3)}
@media (max-width:900px){.dmb-live__in{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   v127 — Genius · Gh0st. Neon-noir: near-black ground, the brand's
   magenta/violet, cyan only where the film uses it.
   ============================================================ */
[data-case="ghost"]{--gh-ink:#0B0714; --gh-mag:#FF3FD1; --gh-vio:#7B3FE4; --gh-cy:#5FE3F0}

/* hero */
.gh-hero{position:relative;min-height:82svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--gh-ink)}
.gh-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.gh-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,7,20,.92),rgba(11,7,20,.42) 46%,rgba(11,7,20,.6))}
.gh-hero__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad-x) 64px;color:#f4f3ef}
.gh-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,7vw,110px);
  line-height:.96;letter-spacing:-.04em;margin:16px 0 18px;max-width:16ch;text-wrap:balance}
.gh-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;
  background:linear-gradient(100deg,var(--gh-mag),var(--gh-vio));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.gh-hero__line{font-size:15.5px;line-height:1.78;color:rgba(244,243,239,.76);max-width:52ch}
.gh-hero .cs-kicker{color:rgba(244,243,239,.66)}

/* dark plates */
.gh-plate{background:var(--gh-ink);color:#f4f3ef}
.gh-plate .cs-statement,.gh-plate .cs-lede{color:#f4f3ef}
.gh-plate .cs-sub,.gh-plate .cs-body p{color:rgba(244,243,239,.72)}
.gh-plate .cs-chapter .ttl{color:#f4f3ef}
.gh-plate .cs-chapter .no{color:rgba(244,243,239,.45)}
.gh-plate em{color:var(--gh-mag)}
.gh-plate .cs-serv span{color:#f4f3ef}

/* image pairs, matched to the film's 16:9 source */
.gh-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gh-two figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#000}
.gh-two img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

.gh-bleed{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:#000}
.gh-bleed img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.gh-bleed figcaption{position:absolute;left:20px;bottom:16px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 16px rgba(0,0,0,.8)}

/* the film */
.gh-film{background:#000;padding:96px 0 104px}
.gh-film__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.gh-video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius);
  background:#000;box-shadow:0 40px 120px rgba(123,63,228,.22)}

/* the beats */
.gh-beats{display:grid;grid-template-columns:1fr 1fr;gap:34px 22px;margin-top:12px}
.gh-beats figure{margin:0}
.gh-beats img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-sm);background:#000}
.gh-beats figcaption{margin-top:14px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);text-wrap:pretty}
.gh-beats figcaption b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--grey-3);font-weight:400;margin-bottom:7px}

@media (max-width:820px){
  .gh-hero{min-height:66svh}
  .gh-two,.gh-beats{grid-template-columns:1fr}
  .gh-film{padding:64px 0 70px}
}

/* v127.1 — footer wordmark: MELO in an extended bold grotesque.
   Archivo carries a real width axis (wdth 125), so this is genuinely
   extended rather than a stretched Geist. "and" stays as it was. */
.foot-wm__melo{
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 125,"wght" 700;
  font-weight:700;font-stretch:expanded;
  font-size:clamp(50px,15.4vw,246px);letter-spacing:-.028em}

/* ============================================================
   v128 — work page: editorial / compact view switch
   Compact flattens every tile to one small square-ish cell, so the
   whole body of work is scannable in a screen or two.
   ============================================================ */
.work-controls{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.view-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;flex:0 0 auto}
.vsw{display:inline-flex;align-items:center;gap:9px;border:0;background:none;cursor:pointer;
  padding:8px 15px;border-radius:999px;color:var(--grey);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease)}
.vsw:hover{color:var(--ink)}
.vsw.on{background:var(--ink);color:var(--paper)}
.vsw-ico{display:grid;gap:2px;width:13px;flex:0 0 auto}
.vsw-ico i{display:block;background:currentColor;border-radius:1px}
.vsw-ico--ed{grid-template-columns:1fr}
.vsw-ico--ed i:nth-child(1){height:5px}
.vsw-ico--ed i:nth-child(2){height:3px}
.vsw-ico--ed i:nth-child(3){height:3px}
.vsw-ico--co{grid-template-columns:repeat(3,1fr)}
.vsw-ico--co i{height:3px}

/* --- compact: every tile the same small cell --- */
.work-grid[data-view="compact"]{grid-template-columns:repeat(4,1fr);gap:10px}
.work-grid[data-view="compact"] .tile.full,
.work-grid[data-view="compact"] .tile.tall{grid-column:auto}
.work-grid[data-view="compact"] .tile-media,
.work-grid[data-view="compact"] .tile.full .tile-media,
.work-grid[data-view="compact"] .tile.tall .tile-media{aspect-ratio:1/1}
.work-grid[data-view="compact"] .tile-cap{left:12px;right:12px;bottom:11px;gap:8px;
  flex-direction:column;align-items:flex-start}
.work-grid[data-view="compact"] .tile-cap .t{font-size:13px;line-height:1.15}
.work-grid[data-view="compact"] .tile-cap .t em{font-size:.72em;margin-top:5px;line-height:1.3}
.work-grid[data-view="compact"] .tile-cap .yr{display:none}
.work-grid[data-view="compact"] .tile-idx{top:9px;left:10px;font-size:9.5px;padding:3px 7px}
.work-grid[data-view="compact"] .tile::after{background:linear-gradient(to top,rgba(10,10,10,.8),transparent 62%)}

@media (max-width:1100px){.work-grid[data-view="compact"]{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){
  .work-controls{gap:16px}
  .view-switch{order:-1;align-self:flex-start}
  .vsw-lbl{display:none}
  .vsw{padding:9px 13px}
  .work-grid[data-view="compact"]{grid-template-columns:repeat(2,1fr);gap:8px}
  .work-grid[data-view="compact"] .tile-cap{opacity:1;transform:none}
}

/* v129 — compact grid: the tile itself owns the square, so a tile with
   extra children (the frosted overlay) can't grow taller than its row */
.work-grid[data-view="compact"]{align-items:start}
/* 4:3 rather than square: the landscape logo covers (Endersham, Edmund)
   lose their wordmark to a 1:1 crop */
.work-grid[data-view="compact"] .tile{aspect-ratio:4/3;height:auto}
.work-grid[data-view="compact"] .tile-media,
.work-grid[data-view="compact"] .tile.full .tile-media,
.work-grid[data-view="compact"] .tile.tall .tile-media{aspect-ratio:auto;position:absolute;inset:0}

/* v130 — the Audit guarantee. Sits directly under the button, where the
   hesitation actually happens, not buried further down the page. */
.au-guarantee{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(242,240,234,.14);
  font-size:12.5px;line-height:1.65;color:rgba(242,240,234,.66);text-wrap:pretty}
.au-guarantee__mark{flex:0 0 auto;width:16px;height:16px;border-radius:50%;margin-top:2px;
  display:grid;place-items:center;font-size:9px;
  background:rgba(242,240,234,.14);color:rgba(242,240,234,.9)}

/* ============================================================
   v131 — Health & Aesthetics. The clinic's own palette:
   Dusk #373442, Dark Purple #504660, Royal Purple #705191,
   Champagne Gold, Cool Grey.
   ============================================================ */
[data-case="ha"]{--ha-dusk:#373442; --ha-dark:#504660; --ha-royal:#705191; --ha-gold:#C6B08C}

/* split hero: the deck spreads all carry baked-in type, so the headline
   sits on clean colour and the portrait keeps its own 0.63 ratio */
.ha-hero{background:var(--ha-dusk);color:#f6f4f8;display:grid;
  grid-template-columns:1.15fr .85fr;align-items:end;gap:0;min-height:76svh;overflow:hidden}
.ha-hero__in{padding:0 clamp(28px,4vw,64px) 62px var(--pad-x);align-self:end}
.ha-hero__fig{margin:0;align-self:stretch;overflow:hidden}
.ha-hero__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.ha-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(38px,6.4vw,100px);
  line-height:1;letter-spacing:-.04em;margin:16px 0 18px;max-width:15ch;text-wrap:balance}
.ha-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ha-gold)}
.ha-hero__line{font-size:15.5px;line-height:1.78;color:rgba(246,244,248,.78);max-width:54ch}
.ha-hero .cs-kicker{color:rgba(246,244,248,.68)}

.ha-plate{background:var(--ha-dusk);color:#f6f4f8}
.ha-plate .cs-statement,.ha-plate .cs-lede{color:#f6f4f8}
.ha-plate .cs-sub,.ha-plate .cs-body p{color:rgba(246,244,248,.74)}
.ha-plate .cs-chapter .ttl{color:#f6f4f8}
.ha-plate .cs-chapter .no{color:rgba(246,244,248,.46)}
.ha-plate em{color:var(--ha-gold)}

/* the three-part spirit */
.ha-spirit{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:52px;
  border-top:1px solid rgba(246,244,248,.16);padding-top:34px}
.ha-spirit b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(19px,1.9vw,25px);
  letter-spacing:-.02em;margin-bottom:12px;color:var(--ha-gold)}
.ha-spirit p{font-size:14.5px;line-height:1.72;color:rgba(246,244,248,.72)}

/* the deck spreads are 16:9, so every box matches */
.ha-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ha-two figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.ha-two img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ha-bleed{margin:0;position:relative;border-radius:var(--radius);overflow:hidden}
.ha-bleed img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ha-bleed figcaption{position:absolute;left:20px;bottom:16px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 16px rgba(0,0,0,.6)}

/* the review number */
.ha-proof{display:flex;gap:38px;align-items:flex-start;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:38px}
.ha-proof__n{font-family:var(--display);font-weight:200;font-size:clamp(58px,8vw,116px);
  line-height:.86;letter-spacing:-.045em;color:var(--ha-royal)}
.ha-proof__n span{font-size:.34em;color:var(--grey-3);letter-spacing:0}
.ha-proof__c{flex:1 1 320px;max-width:52ch}
.ha-proof__c p{font-size:15.5px;line-height:1.78;color:var(--ink-soft);margin-bottom:14px}
.ha-proof__c b{font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-3)}

@media (max-width:820px){
  .ha-hero{grid-template-columns:1fr;min-height:0}
  .ha-hero__fig{order:-1;aspect-ratio:4/3}
  .ha-hero__in{padding:34px var(--pad-x) 46px}
  .ha-two,.ha-spirit{grid-template-columns:1fr}
  .ha-spirit{gap:26px}
}

/* v136 — H&A additions: the receipts band, press line, photo grid, site scroll */
.ha-stats{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ha-stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:44px var(--pad-x)}
.ha-stats .n{font-family:var(--display);font-weight:200;font-size:clamp(34px,4.4vw,60px);
  line-height:1;letter-spacing:-.04em;color:var(--ha-royal,#705191)}
.ha-stats .n span{font-size:.42em;color:var(--grey-3);letter-spacing:0}
.ha-stats b{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);font-weight:400;line-height:1.6}

.ha-press{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.ha-press span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3);margin-bottom:10px}
.ha-press p{font-family:var(--display);font-weight:300;font-size:clamp(15px,1.5vw,20px);
  letter-spacing:-.01em;color:var(--ink-soft)}

.ha-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ha-grid figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.ha-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* the website design, shown in a browser frame and scrollable in place */
.ha-site{margin:56px 0 0;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 34px 100px rgba(55,52,66,.20);background:#fff}
.ha-site__chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#e9e6e2;
  border-bottom:1px solid rgba(0,0,0,.07)}
.ha-site__chrome span{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.16)}
.ha-site__chrome b{margin-left:12px;font-weight:400;font-size:10px;letter-spacing:.08em;color:var(--grey)}
.ha-site__scroll{max-height:74svh;overflow-y:auto;overscroll-behavior:contain;background:#fff}
.ha-site__scroll img{display:block;width:100%;height:auto}

@media (max-width:820px){
  .ha-stats__in{grid-template-columns:repeat(2,1fr);gap:26px;padding:34px var(--pad-x)}
  .ha-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ha-site__scroll{max-height:60svh}
}

/* v136.1 — the iceberg section on About */
.ice-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-top:12px}
.ice-copy p{font-size:15.5px;line-height:1.8;color:rgba(242,240,234,.76);margin-bottom:18px;max-width:52ch;text-wrap:pretty}
.ice-list{list-style:none;padding:0;margin:0;border-top:1px solid rgba(242,240,234,.16)}
.ice-list li{padding:22px 0;border-bottom:1px solid rgba(242,240,234,.16)}
.ice-list b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,240,234,.5);font-weight:400;margin-bottom:10px}
.ice-list span{font-family:var(--display);font-weight:300;font-size:clamp(15px,1.45vw,19px);
  line-height:1.6;letter-spacing:-.01em;color:#f2f0ea}
.ice-quote{margin-top:52px;padding-top:32px;border-top:1px solid rgba(242,240,234,.16);
  font-family:var(--display);font-weight:200;font-size:clamp(20px,2.4vw,34px);line-height:1.32;
  letter-spacing:-.025em;color:#f2f0ea;max-width:30ch;text-wrap:balance}
@media (max-width:860px){.ice-grid{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   v137 — Tyron Ash. Champagne gold on near-black; the palette is
   deliberately tiny, so the CSS is too.
   ============================================================ */
[data-case="tare"]{--ta-gold:#D9BE8F; --ta-tan:#C09A63; --ta-ink:#12100F}
/* the brand imagery all carries the wordmark, so the headline sits on
   clean ground and the mark keeps its own panel */
.ta-hero{display:grid;grid-template-columns:1.08fr .92fr;align-items:end;
  background:var(--ta-ink);color:#f4f2ee;min-height:74svh;overflow:hidden}
.ta-hero__in{padding:0 clamp(28px,4vw,60px) 60px var(--pad-x)}
.ta-hero__fig{margin:0;align-self:stretch;overflow:hidden}
.ta-hero__fig img{display:block;width:100%;height:100%;object-fit:cover}
.ta-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,6.8vw,104px);
  line-height:1;letter-spacing:-.04em;margin:16px 0 18px;max-width:14ch;text-wrap:balance}
.ta-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ta-gold)}
.ta-hero__line{font-size:15.5px;line-height:1.78;color:rgba(244,242,238,.76);max-width:52ch}
.ta-hero .cs-kicker{color:rgba(244,242,238,.66)}

.ta-plate{background:var(--ta-ink);color:#f4f2ee}
.ta-plate .cs-statement,.ta-plate .cs-lede{color:#f4f2ee}
.ta-plate .cs-sub,.ta-plate .cs-body p{color:rgba(244,242,238,.74)}
.ta-plate .cs-chapter .ttl{color:#f4f2ee}
.ta-plate .cs-chapter .no{color:rgba(244,242,238,.46)}
.ta-plate em{color:var(--ta-gold)}

.ta-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ta-two figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--ta-ink)}
.ta-two img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ta-bleed{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ta-ink)}
.ta-bleed img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ta-bleed figcaption{position:absolute;left:20px;bottom:16px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(0,0,0,.8)}
@media (max-width:820px){
  .ta-hero{grid-template-columns:1fr;min-height:0}
  .ta-hero__fig{order:-1;aspect-ratio:16/9}
  .ta-hero__in{padding:32px var(--pad-x) 44px}
  .ta-two{grid-template-columns:1fr}
}

/* ============================================================
   v138 — These Sweets. Warm retail brights on off-white; the banner
   videos are deliberately small and side by side (they are soft at
   full width, and they were made for placements, not for hero use).
   ============================================================ */
[data-case="these"]{--ts-red:#E23A46; --ts-peach:#F2913F; --ts-ink:#1A1512}
.ts-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;
  background:var(--ts-ink);color:#f7f4f0;min-height:74svh;overflow:hidden}
.ts-hero__in{padding:0 clamp(28px,4vw,60px) 60px var(--pad-x)}
.ts-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(36px,5.6vw,84px);
  line-height:1.02;letter-spacing:-.04em;margin:16px 0 18px;max-width:16ch;text-wrap:balance}
.ts-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ts-peach)}
.ts-hero__line{font-size:15.5px;line-height:1.78;color:rgba(247,244,240,.76);max-width:50ch}
.ts-hero .cs-kicker{color:rgba(247,244,240,.66)}
.ts-hero__fig{margin:0;align-self:stretch;overflow:hidden}
.ts-hero__fig img{display:block;width:100%;height:100%;object-fit:cover}

.ts-plate{background:var(--ts-ink);color:#f7f4f0}
.ts-plate .cs-statement,.ts-plate .cs-lede{color:#f7f4f0}
.ts-plate .cs-sub,.ts-plate .cs-body p{color:rgba(247,244,240,.74)}
.ts-plate .cs-chapter .ttl{color:#f7f4f0}
.ts-plate .cs-chapter .no{color:rgba(247,244,240,.46)}
.ts-plate em{color:var(--ts-peach)}

/* the stills are 4:5 portrait, so the boxes are too */
.ts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ts-grid figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#000}
.ts-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.ts-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.ts-two figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#000}
.ts-two img{display:block;width:100%;object-fit:cover}
.ts-two figure:first-child img{aspect-ratio:4/5}
.ts-two figure:last-child img{aspect-ratio:3/2}

/* banners: small, side by side, capped so they never scale past source */
.ts-banners{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px}
.ts-banners figure{margin:0}
.ts-banners video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-sm);background:#000}
.ts-banners figcaption{margin-top:10px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-3)}

@media (max-width:900px){
  .ts-hero{grid-template-columns:1fr;min-height:0}
  .ts-hero__fig{order:-1;aspect-ratio:4/3}
  .ts-hero__in{padding:32px var(--pad-x) 44px}
  .ts-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ts-two{grid-template-columns:1fr}
  .ts-banners{grid-template-columns:1fr 1fr;gap:12px}
}

/* ============================================================
   v140 — Minority Business Matters. Coral #f94e5f, cyan #2ecbe5,
   navy ground. Split hero, because the deck spreads carry type.
   ============================================================ */
[data-case="mbm"]{--mb-coral:#F94E5F; --mb-cyan:#2ECBE5; --mb-navy:#161A2E}
.mb-hero{display:grid;grid-template-columns:1.06fr .94fr;align-items:end;
  background:var(--mb-navy);color:#f4f5f8;min-height:74svh;overflow:hidden}
.mb-hero__in{padding:0 clamp(28px,4vw,60px) 60px var(--pad-x)}
.mb-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(36px,5.4vw,80px);
  line-height:1.02;letter-spacing:-.04em;margin:16px 0 18px;max-width:17ch;text-wrap:balance}
.mb-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--mb-coral)}
.mb-hero__line{font-size:15.5px;line-height:1.78;color:rgba(244,245,248,.76);max-width:52ch}
.mb-hero .cs-kicker{color:rgba(244,245,248,.66)}
.mb-hero__fig{margin:0;align-self:stretch;overflow:hidden}
.mb-hero__fig img{display:block;width:100%;height:100%;object-fit:cover}

.mb-stats{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mb-stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:44px var(--pad-x)}
.mb-stats .n{font-family:var(--display);font-weight:200;font-size:clamp(32px,4.2vw,58px);
  line-height:1;letter-spacing:-.04em;color:var(--mb-coral)}
.mb-stats .n span{font-size:.45em;letter-spacing:-.02em}
.mb-stats b{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey);font-weight:400;line-height:1.6}

.mb-plate{background:var(--mb-navy);color:#f4f5f8}
.mb-plate .cs-statement,.mb-plate .cs-lede{color:#f4f5f8}
.mb-plate .cs-sub,.mb-plate .cs-body p{color:rgba(244,245,248,.74)}
.mb-plate .cs-chapter .ttl{color:#f4f5f8}
.mb-plate .cs-chapter .no{color:rgba(244,245,248,.46)}
.mb-plate em{color:var(--mb-cyan)}

.mb-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mb-two figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.mb-two img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.mb-bleed{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:#fff}
.mb-bleed img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.mb-bleed figcaption{position:absolute;left:20px;bottom:16px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(0,0,0,.75)}
@media (max-width:900px){
  .mb-hero{grid-template-columns:1fr;min-height:0}
  .mb-hero__fig{order:-1;aspect-ratio:16/9}
  .mb-hero__in{padding:32px var(--pad-x) 44px}
  .mb-stats__in{grid-template-columns:repeat(2,1fr);gap:26px;padding:34px var(--pad-x)}
  .mb-two{grid-template-columns:1fr}
}

/* ============================================================
   v141 — Fragrance Studies (speculative). Neutral, gallery-like:
   the work is the colour, so the page carries none.
   ============================================================ */
[data-case="frag"]{--fr-ink:#141313}
.fr-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;
  background:var(--fr-ink);color:#f4f2f0;min-height:76svh;overflow:hidden}
.fr-hero__in{padding:0 clamp(28px,4vw,60px) 56px var(--pad-x)}
.fr-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(36px,5.4vw,82px);
  line-height:1.02;letter-spacing:-.04em;margin:16px 0 18px;max-width:16ch;text-wrap:balance}
.fr-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.fr-hero__line{font-size:15.5px;line-height:1.78;color:rgba(244,242,240,.76);max-width:52ch}
.fr-hero .cs-kicker{color:rgba(244,242,240,.66)}
.fr-hero__fig{margin:0;align-self:stretch;overflow:hidden}
.fr-hero__fig img{display:block;width:100%;height:100%;object-fit:cover}
/* the disclaimer is part of the design, not a footnote */
.fr-disclaimer{margin-top:26px;padding:14px 16px;border:1px solid rgba(244,242,240,.22);
  border-radius:var(--radius-sm);font-size:12.5px;line-height:1.6;
  color:rgba(244,242,240,.7);max-width:56ch}
.fr-disclaimer b{color:#f4f2f0;font-weight:400}

.fr-plate{background:var(--fr-ink);color:#f4f2f0}
.fr-plate .cs-statement,.fr-plate .cs-lede{color:#f4f2f0}
.fr-plate .cs-sub,.fr-plate .cs-body p{color:rgba(244,242,240,.74)}
.fr-plate .cs-chapter .ttl{color:#f4f2f0}
.fr-plate .cs-chapter .no{color:rgba(244,242,240,.46)}

.fr-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fr-two figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#000}
.fr-two img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.fr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fr-grid figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#000}
.fr-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:900px){
  .fr-hero{grid-template-columns:1fr;min-height:0}
  .fr-hero__fig{order:-1;aspect-ratio:16/9}
  .fr-hero__in{padding:32px var(--pad-x) 44px}
  .fr-two{grid-template-columns:1fr}
  .fr-grid{grid-template-columns:1fr 1fr;gap:10px}
}

/* ============================================================
   v142 — menu: four primary rows, then a quiet secondary strip.
   Seven equal-weight rows made the eye read all seven; the fix is
   hierarchy, not a nested dropdown (which would hide destinations
   behind an extra click).
   ============================================================ */
/* keep the four rows centred in the space, strip pinned under them */
.menu-acc{flex:1 1 auto;justify-content:center}
.menu-sub{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  gap:26px;flex-wrap:wrap;padding:26px var(--pad-x) 30px;border-top:1px solid var(--line)}
.menu-sub__links{display:flex;flex-wrap:wrap;gap:8px 26px}
.menu-sub__links a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);transition:color .3s var(--ease)}
.menu-sub__links a:hover{color:var(--ink)}
.menu-sub__cta{flex:0 0 auto}
/* the audit row is the commercial one: keep it large but mark it */
.mrow--cta .mrow__meta{color:var(--accent-2)}
@media (max-width:700px){
  .menu-sub{flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:24px}
  .menu-sub__links{gap:8px 18px}
  .menu-sub__cta{width:100%;justify-content:center}
}

/* the floating WhatsApp button sat on top of the menu's secondary links */
body.nav-open .wa-fab,body.menu-open .wa-fab{opacity:0;pointer-events:none;transition:opacity .25s}

/* ============================================================
   v145 — menu hover: compositor-only.
   The lag came from animating three layout properties on every
   frame: padding on .mrow (which reflowed every other row too,
   since .menu-acc is a centred flex column), letter-spacing on
   34-72px type, and width on .mrow__prev inside a grid track.
   All three are replaced with transform/opacity, and the preview
   images are now 400x156 with the filter baked in rather than
   1600px bitmaps being filtered live.
   ============================================================ */

/* row: fixed box, no padding animation */
.mrow{transition:color .42s var(--ease)}
.mrow:hover{padding-top:inherit;padding-bottom:inherit}
.mrow::before{will-change:transform;transition:transform .5s var(--ease)}

/* name: no letter-spacing animation; nudge with transform instead */
.mrow__name{transition:transform .42s var(--ease);transform-origin:left center;
  will-change:transform}
.mrow:hover .mrow__name{letter-spacing:-.045em;transform:translateX(8px)}

/* preview: fixed width, revealed with scaleX + opacity */
.mrow__prev{width:200px;transform:scaleX(.12);transform-origin:right center;
  opacity:0;will-change:transform,opacity;
  transition:transform .5s var(--ease),opacity .34s var(--ease)}
.mrow:hover .mrow__prev{width:200px;transform:scaleX(1);opacity:1}
/* counter-scale the image so it doesn't squash on the way in */
.mrow__prev img{filter:none;transform:scale(1.04);transition:transform .5s var(--ease)}
.mrow:hover .mrow__prev img{transform:scale(1)}

/* keep the plus rotation, drop the rest */
.mrow__act{will-change:transform;transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .mrow,.mrow::before,.mrow__name,.mrow__prev,.mrow__prev img,.mrow__act{transition:none}
}

/* v147 — a client testimonial given in full, rather than trimmed to a pull quote */
.vk-testimonial{max-width:62ch;margin:30px auto 0;text-align:center}
.vk-testimonial p{font-size:15.5px;line-height:1.8;color:var(--ink-soft);margin-bottom:16px;text-wrap:pretty}
.vk-testimonial p:last-child{margin-bottom:0}
.vk-attrib{text-align:center;margin-top:28px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey)}

/* v148 — Khloé /03: show the thumbnail-vs-life-size problem instead of
   asserting it. The small figure is capped at the real feed size so the
   comparison is honest, not decorative. */
.kk-scale{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:end;margin-top:52px}
.kk-scale figure{margin:0}
.kk-scale img{display:block;width:100%;border-radius:var(--radius-sm);background:#000}
.kk-scale__sm{width:200px;flex:0 0 auto}
.kk-scale__sm img{aspect-ratio:4/5;object-fit:cover}
.kk-scale__lg img{aspect-ratio:16/9;object-fit:cover}
.kk-scale figcaption{margin-top:12px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(242,240,234,.5)}
@media (max-width:820px){
  .kk-scale{grid-template-columns:1fr;gap:26px;align-items:start}
  .kk-scale__sm{width:150px}
}

/* v148.1 — Khloé hero: her name sits on its own line at a slightly smaller
   size, so the headline reads as name + proposition rather than four
   cramped lines of the same weight. */
.kk-hero h1{font-size:clamp(40px,6.2vw,96px);line-height:.94;letter-spacing:-.045em}
.kk-name{display:block;font-size:.62em;letter-spacing:-.03em;margin-bottom:.18em;color:var(--ink)}
@media (max-width:820px){.kk-hero h1{font-size:clamp(34px,8vw,52px)}}

/* v150 — Khloé: the real fragrance pyramids, as published by the brand.
   Notes are set as a definition list so the structure is semantic, not
   just three lines of text. */
.kk-world__tag{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.7vw,23px);color:var(--ink);margin:10px 0 14px;letter-spacing:-.01em}
.kk-world__fam{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-3);margin-bottom:20px}
.kk-notes{margin:0 0 18px;padding:18px 0 0;border-top:1px solid var(--line);
  display:grid;gap:12px;max-width:46ch}
.kk-notes div{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:baseline}
.kk-notes dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-3)}
.kk-notes dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.kk-world__note{font-size:14.5px;line-height:1.72;color:var(--ink-soft);max-width:48ch;text-wrap:pretty}
@media (max-width:600px){
  .kk-notes div{grid-template-columns:1fr;gap:3px}
  .kk-notes dd{font-size:13.5px}
}

/* v150.1 — the world head is now five elements, so it needs a real grid
   rather than a baseline-aligned flex row: identity left, pyramid right. */
.kk-world__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:20px 56px;align-items:start;margin-bottom:38px}
.kk-world__name{grid-column:1;margin-bottom:0}
.kk-world__tag{grid-column:1}
.kk-world__fam{grid-column:1;margin-bottom:0}
.kk-notes{grid-column:2;grid-row:1 / span 3;margin:0;padding-top:8px;border-top:0;max-width:none}
.kk-world__note{grid-column:2;max-width:52ch;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:900px){
  .kk-world__head{grid-template-columns:1fr;gap:14px}
  .kk-notes,.kk-world__note{grid-column:1;grid-row:auto}
  .kk-notes{padding-top:18px;border-top:1px solid var(--line)}
}

/* v151 — Khloé: where the launch was covered. Set typographically rather
   than as logo files: it stays crisp at any size and carries no third-party
   trademark artwork. */
.kk-press{margin-top:52px;padding-top:26px;border-top:1px solid var(--line)}
.kk-press__lbl{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-3);margin-bottom:16px}
.kk-press__list{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:12px 38px;padding:0;margin:0}
.kk-press__list li{font-family:var(--display);font-weight:300;
  font-size:clamp(16px,1.9vw,26px);letter-spacing:-.015em;color:var(--ink);
  opacity:.62;transition:opacity .35s var(--ease)}
.kk-press:hover .kk-press__list li{opacity:.38}
.kk-press__list li:hover{opacity:1}
@media (max-width:700px){.kk-press__list{gap:10px 24px}.kk-press__list li{font-size:16px}}

/* v152.1 — retailer strip: smaller than the press names, with the market
   set as a quiet superscript so the list reads as a footprint, not a shout */
.kk-press--retail{margin-top:40px}
.kk-press__list--sm li{font-size:clamp(14px,1.5vw,19px);opacity:.75}
.kk-press__list--sm li i{font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--grey-3);margin-left:7px;vertical-align:super}

/* v153.1 — roster tiles with no case study behind them: still shown as proof,
   but they no longer look clickable, so nothing promises a page that is not
   there. The caption still reveals on hover. */
div.tile{cursor:default}
div.tile .tile-cap .yr{opacity:.7}

/* v155 — mobile horizontal-scroll fix.
   .clients-list li::after is the hover arrow; it rests at translate(20px)
   outside the row, which pushed the document 2px wider than the viewport and
   gave the whole site a horizontal jiggle on phones. Clip the list, which is
   where the stray pixels are, rather than masking it on <html>.
   `clip` rather than `hidden` so nothing sticky breaks. */
.clients-list{overflow-x:clip}

/* v157 — film in the work grid. The poster is the tile's original still, so the
   grid looks identical until the clip is decoded and nothing shifts. preload
   stays none: the browser fetches only when the tile is on screen. */
.tile-media .tile-vid{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.04) saturate(1.05);transform:scale(1.04);
  transition:transform 1.3s var(--ease)}
.tile:hover .tile-media .tile-vid{transform:scale(1.1)}
.work-grid[data-view="compact"] .tile-vid{transform:none}

/* v157.1 — Khloé: the brand's own campaign films, shown as context.
   The disclaimer is styled as a visible part of the section, not a footnote,
   because a case study is read as a claim of authorship by default. */
.kk-context__note{margin:46px 0 26px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--paper-2);
  font-size:13.5px;line-height:1.65;color:var(--ink-soft);max-width:78ch}
.kk-context__note b{color:var(--ink);font-weight:400}
.kk-context__films{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kk-context__films figure{margin:0}
.kk-context__films video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  border-radius:var(--radius-sm);background:#000}
.kk-context__films figcaption{margin-top:11px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-3)}
@media (max-width:760px){.kk-context__films{grid-template-columns:1fr;gap:14px}}

/* v158 — Havaianas hero: the A0 entrance poster, not the sticker card.
   It is 0.707 portrait (A-series), so the box matches rather than crops. */
.bf-hero__art--poster{align-self:center;justify-self:end;max-width:min(420px,38vw)}
.bf-hero__art--poster img{width:100%;height:auto;aspect-ratio:860/1203;object-fit:contain;
  border-radius:8px;transform:none;box-shadow:0 30px 70px rgba(0,0,0,.22)}
@media (max-width:820px){.bf-hero__art--poster{max-width:260px;justify-self:center}}

/* ============================================================
   v160 — three fixes
   ============================================================ */

/* 1 ─ the "Start here" card. It sits inside .surface-dark, where --ink is
   inverted to the LIGHT colour, so `color:var(--ink)` was painting light text
   on a light card. The card is always pale, so the values are explicit. */
.au-rung--now{color:#12100f}
.au-rung--now .nm,.au-rung--now .pr{color:#12100f}
.au-rung--now .step,.au-rung--now .tm{color:rgba(18,16,15,.58)}

/* 2 ─ the "Why us" line was sitting hard against the client names */
.proof__intro{margin:14px 0 34px;padding-bottom:30px;border-bottom:1px solid rgba(242,240,234,.12);
  font-size:15.5px;line-height:1.75;color:rgba(242,240,234,.74);max-width:64ch;text-wrap:pretty}

/* 3 ─ the About film carries the same 12.3% baked-in letterbox as the home one.
   Same correction: scale past the bars rather than showing them. */
.pfilm video{transform:scale(1.28);transform-origin:center}
@media (max-width:900px){
  .pfilm{min-height:0;display:block;background:#0a0a0a;padding-bottom:44px}
  .pfilm video{position:relative;width:100%;height:auto;aspect-ratio:2.36;object-fit:cover;transform:none}
  .pfilm::after{display:none}
  .pfilm__in{padding:30px var(--pad-x) 0}
}

/* v160.1 — the position-gap argument */
.pos-gap{background:var(--paper-2)}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:12px}
.pos-grid b{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(19px,1.9vw,25px);letter-spacing:-.025em;margin-bottom:14px;color:var(--ink)}
.pos-grid p{font-size:15px;line-height:1.78;color:var(--ink-soft);text-wrap:pretty}
.pos-note{margin-top:52px;padding-top:30px;border-top:1px solid var(--line);
  font-family:var(--display);font-weight:200;font-size:clamp(20px,2.4vw,32px);
  line-height:1.3;letter-spacing:-.025em;max-width:34ch;text-wrap:balance}
@media (max-width:900px){.pos-grid{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   v162 — HELIOS EXTENDED, the real brand face.
   It was already sitting in /fonts unused. Now served as woff2
   (12KB each) and put where an extended grotesque belongs: the
   display type. Body copy stays on Geist — extended letterforms
   slow reading badly at 15px across a 60-character line, which is
   why no house sets body copy in one.
   ============================================================ */
@font-face{font-family:"HeliosX";src:url(fonts/HeliosExt.woff2) format("woff2"),url(fonts/HeliosExt.otf) format("opentype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"HeliosX";src:url(fonts/HeliosExt-Bold.woff2) format("woff2"),url(fonts/HeliosExt-Bold.otf) format("opentype");
  font-weight:700;font-style:normal;font-display:swap}

:root{--helios:"HeliosX","Helvetica Neue",Helvetica,Arial,sans-serif}

/* every display headline, sitewide */
.page-head h1,.cs-title,.cs-statement,.cs-lede,.hw-mark,.foot-big,
.section-title,.au-hero h1,.ha-hero h1,.ta-hero h1,.mb-hero h1,
.fr-hero h1,.ts-hero h1,.gh-hero h1,.kk-hero h1,.bf-hero h1,
.dmb-figure,.brief-h,.rbp__h,.mfun-h,.post-title,.pos-note,.ice-quote{
  font-family:var(--helios);font-weight:400;letter-spacing:-.045em}

/* Helios has a large x-height and wide set, so it needs less size and
   tighter tracking than Geist did to hold the same measure */
.page-head h1,.cs-title{font-size:clamp(34px,5.6vw,88px);line-height:.98}
.cs-statement{font-size:clamp(24px,3.1vw,50px);line-height:1.1}
.cs-lede{font-size:clamp(21px,2.5vw,37px);line-height:1.16}
.section-title{letter-spacing:-.05em}

/* the italic accents stay in the serif — that contrast is the whole look */
.page-head h1 em,.cs-title em,.cs-statement em,.cs-lede em,.hw-mark em,
.foot-big em,.section-title em,.post-title em,.pos-note em,.ice-quote em,
.au-hero h1 em,.ha-hero h1 em,.ta-hero h1 em,.mb-hero h1 em,.fr-hero h1 em,
.ts-hero h1 em,.gh-hero h1 em,.kk-hero h1 em,.bf-hero h1 em,.brief-h em{
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}

/* ============================================================
   v163 — case-study headers: slicker, not louder.
   Every case hero had grown its own scale (80–110px) and they read
   as shouting. One restrained scale across all of them, with the
   tracking Helios needs. Roughly a third smaller.
   ============================================================ */
.au-hero h1,.ha-hero h1,.ta-hero h1,.mb-hero h1,.fr-hero h1,
.ts-hero h1,.gh-hero h1,.kk-hero h1,.bf-hero h1,.vk-hero h1,
.en-hero h1,.ed-hero h1,.ac-hero h1,.ag-hero h1,.bb-hero h1,
.sl-hero h1,.gm-hero h1,.lc-hero h1,.sn-hero h1{
  font-family:var(--helios);font-weight:400;
  font-size:clamp(30px,3.9vw,58px);line-height:1.06;letter-spacing:-.04em;
  max-width:19ch;text-wrap:balance}
.kk-hero .kk-name{font-size:.66em;letter-spacing:-.035em}
.dmb-figure{font-size:clamp(52px,8vw,124px);letter-spacing:-.05em}

/* the supporting line drops with it so the ratio holds */
.au-hero__line,.ha-hero__line,.ta-hero__line,.mb-hero__line,.fr-hero__line,
.ts-hero__line,.gh-hero__line,.kk-hero__line,.bf-hero__line,.vk-hero__line{
  font-size:15px;line-height:1.72;max-width:50ch}

@media (max-width:820px){
  .au-hero h1,.ha-hero h1,.ta-hero h1,.mb-hero h1,.fr-hero h1,
  .ts-hero h1,.gh-hero h1,.kk-hero h1,.bf-hero h1,.vk-hero h1{
    font-size:clamp(27px,6.8vw,40px);max-width:none}
}

/* MBM hero art was cropping the logo off the top of the deck cover */
.mb-hero__fig img{object-fit:contain;object-position:center;background:var(--mb-navy);padding:22px}

/* ============================================================
   v166 — Helios Extended moves to BODY COPY (client decision).
   Reverting the display type to Geist and putting the brand face
   where the reading happens. Extended letterforms set wider, so
   the size comes down slightly and the leading goes up to keep the
   measure comfortable — otherwise lines run long and read slow.
   ============================================================ */

/* 1 ─ display type back to Geist */
.page-head h1,.cs-title,.cs-statement,.cs-lede,.hw-mark,.foot-big,
.section-title,.dmb-figure,.brief-h,.rbp__h,.mfun-h,.post-title,
.pos-note,.ice-quote,
.au-hero h1,.ha-hero h1,.ta-hero h1,.mb-hero h1,.fr-hero h1,.ts-hero h1,
.gh-hero h1,.kk-hero h1,.bf-hero h1,.vk-hero h1,.en-hero h1,.ed-hero h1,
.ac-hero h1,.ag-hero h1,.bb-hero h1,.sl-hero h1,.gm-hero h1,.lc-hero h1,
.sn-hero h1{font-family:var(--display)}

/* 2 ─ Helios on everything that is actually read */
body,
.cs-body p,.cs-sub,.ph-sub,.prose p,.post-body p,.post-lede,
.hw-desc,.au-hero__line,.ha-hero__line,.ta-hero__line,.mb-hero__line,
.fr-hero__line,.ts-hero__line,.gh-hero__line,.kk-hero__line,.bf-hero__line,
.pfilm p,.au-pain__foot,.ice-copy p,.pos-grid p,.rbp__p,.mfun-sub,
.vk-testimonial p,.kk-world__note,.ha-proof__c p,.brief-hint,
.foot-grid .foot-col a,.foot-grid .foot-col span,.tile-cap .t,
.cs-serv span,.cs-meta-row .m span,.au-card li,.wi__head,.wi__scope,
.clients-list li,.mrow__name{
  font-family:var(--helios)}

/* extended needs a touch less size and a touch more air */
.cs-body p,.cs-sub,.ph-sub,.prose p,.post-body p,.ice-copy p,.pos-grid p{
  font-size:14.5px;line-height:1.85;letter-spacing:-.005em}
.hw-desc,.au-hero__line,.ha-hero__line,.ta-hero__line,.mb-hero__line,
.fr-hero__line,.ts-hero__line,.gh-hero__line,.kk-hero__line,.bf-hero__line{
  font-size:14.5px;line-height:1.8}
.post-lede{font-size:17px;line-height:1.7}

/* 3 ─ the audit pain quotes were serif italic on black and hard to read.
   Same face as the rest of the page, upright, at a readable size. */
.au-pain__list li{
  font-family:var(--helios);font-style:normal;font-weight:400;
  font-size:clamp(16px,1.5vw,20px);line-height:1.5;letter-spacing:-.01em;
  color:#f2f0ea}

/* ============================================================
   v167 — Helios removed. Back to the original typography:
   Geist for display and body, Instrument Serif italic for accents.
   The @font-face declarations stay in place but nothing references
   them, so the files are never fetched.
   ============================================================ */

/* body copy back to Geist at its original size and leading */
body,
.cs-body p,.cs-sub,.ph-sub,.prose p,.post-body p,.post-lede,
.hw-desc,.au-hero__line,.ha-hero__line,.ta-hero__line,.mb-hero__line,
.fr-hero__line,.ts-hero__line,.gh-hero__line,.kk-hero__line,.bf-hero__line,
.pfilm p,.au-pain__foot,.ice-copy p,.pos-grid p,.rbp__p,.mfun-sub,
.vk-testimonial p,.kk-world__note,.ha-proof__c p,.brief-hint,
.foot-grid .foot-col a,.foot-grid .foot-col span,.tile-cap .t,
.cs-serv span,.cs-meta-row .m span,.au-card li,.wi__head,.wi__scope,
.clients-list li,.mrow__name{font-family:var(--sans)}

.cs-body p,.cs-sub,.ph-sub,.prose p,.post-body p,.ice-copy p,.pos-grid p{
  font-size:15.5px;line-height:1.78;letter-spacing:normal}
.hw-desc,.au-hero__line,.ha-hero__line,.ta-hero__line,.mb-hero__line,
.fr-hero__line,.ts-hero__line,.gh-hero__line,.kk-hero__line,.bf-hero__line{
  font-size:15px;line-height:1.72}
.post-lede{font-size:18px;line-height:1.65}

/* these keep their own families, restore them */
.tile-cap .t,.cs-serv span,.cs-meta-row .m span,.clients-list li,
.mrow__name{font-family:var(--display)}
.foot-grid .foot-col a,.foot-grid .foot-col span{font-family:var(--sans)}

/* the audit pain quotes: keep them upright and legible, which was the
   real fix — just back on the body face rather than Helios */
.au-pain__list li{font-family:var(--sans);font-style:normal;font-weight:300;
  font-size:clamp(16px,1.5vw,20px);line-height:1.55;letter-spacing:-.005em;
  color:#f2f0ea}

/* ============================================================
   v168 — the two case heroes v163 missed.
   v163 brought every case hero h1 down to one restrained scale,
   but its selector list named `.gm-hero h1`, a class that does not
   exist. Gentle Monster and David Morris both use the generic
   `.cs-hero` / `.cs-title` header instead, so they kept the old
   scale and rendered at 71px against 50px everywhere else.
   Same rule, applied where those two actually live.
   ============================================================ */
.cs-hero .cs-title,.cs-hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,3.9vw,58px);line-height:1.06;letter-spacing:-.04em;
  max-width:19ch;text-wrap:balance}

@media (max-width:820px){
  .cs-hero .cs-title,.cs-hero h1{font-size:clamp(27px,6.8vw,40px);max-width:none}
}

/* ============================================================
   v169 — press strip: the title set Myles asked for.
   Elle out; The Telegraph in; the combined FT / How To Spend It
   chip split into two marks, since they are two mastheads. Each
   is set to sit at the same optical weight as its neighbours,
   which is what makes a press row read as one strip rather than
   a pile of borrowed logos.

   These are typographic stand-ins, not the publishers' artwork.
   Drop real SVGs into assets/press/ and swap the <span> for an
   <img> — .lg-file below sizes them to the same optical height.
   ============================================================ */

/* FT: the salmon newsprint ground is the whole identity */
.lg-ft{display:inline-flex;align-items:center;justify-content:center;
  background:#fff1e5;color:#33302e;border:1px solid rgba(51,48,46,.16);
  padding:10px 15px;border-radius:3px;font-family:var(--serif);
  font-size:27px;line-height:1;letter-spacing:-.01em}
.lg-ft b{font-weight:400}

.lg-htsi{font-family:var(--serif);font-style:italic;font-size:23px;
  letter-spacing:.01em;line-height:1.05;max-width:11ch;text-align:center}

.lg-telegraph{font-family:var(--serif);font-size:25px;letter-spacing:-.005em;
  line-height:1.02;max-width:12ch;text-align:center}

/* on the dark variant of the section the FT chip has to invert its border */
.surface-dark .lg-ft{border-color:rgba(51,48,46,.28)}

/* when real logo files land, this is the hook */
.lg-file{display:block;height:30px;width:auto;max-width:180px;object-fit:contain;
  filter:grayscale(1);opacity:.78;transition:opacity .3s,filter .3s}
.marq-item:hover .lg-file{opacity:1;filter:grayscale(0)}

/* ============================================================
   v170 — the Coming Soon tile: much less frost.
   It was frosted twice over, blur(26px) on the image plus an
   18px backdrop-filter on the overlay, which buried the picture
   entirely. The point is to suggest rather than conceal: you
   should be able to read the shot and still know it is not open
   yet. Roughly a quarter of the previous blur, and the overlay
   is now a tint that carries the label rather than a fog.
   ============================================================ */
.tile-locked .tile-media img{
  filter:blur(6px) saturate(.92) brightness(.98);transform:scale(1.06)}
.tile-locked:hover .tile-media img{
  filter:blur(4px) saturate(1) brightness(1.02);transform:scale(1.08)}

.tile-frost{
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 46%,rgba(10,10,10,.26));
  backdrop-filter:blur(3px) saturate(108%);-webkit-backdrop-filter:blur(3px) saturate(108%)}

/* the badge carries the message now, so give it a little more presence */
.tile-locked .spec-badge{
  background:rgba(12,12,12,.62);color:#f4f3ef;border-color:rgba(244,243,239,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);letter-spacing:.13em}

/* ------------------------------------------------------------
   v171 — the Coming Soon caption was falling off its own image.
   Every other tile caption is position:absolute over the media
   (line 302). v-old set `.tile-locked .tile-cap{position:relative}`,
   which put this one caption back in normal flow, so the tile grew
   taller than its picture and the caption's overspill landed on the
   light tile ground. The caption text is #f4f3ef, the page is
   #f4f3ef, so it went invisible. Latent all along; a two-line title
   at phone width is what finally exposed it.
   Same treatment as every other tile, sitting above the frost.
   ------------------------------------------------------------ */
.tile-locked .tile-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:3}
.work-grid[data-view="compact"] .tile-locked .tile-cap{left:12px;right:12px;bottom:11px}

/* and a scrim under it, so the caption holds even on a pale image */
.tile-locked::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.62),rgba(10,10,10,.12) 42%,transparent 68%);
  border-radius:inherit}

/* the mobile rule `.tile::after{opacity:.55}` was knocking the Coming Soon
   scrim back to just over half strength, which a near-white cover cannot
   survive. Hold it at full for this tile only, at every width. */
.tile-locked::after{opacity:1}
@media (max-width:720px){ .tile-locked::after{opacity:1} }

/* ------------------------------------------------------------
   v174 — Coming Soon: less frost again.
   The car shot can carry the tile on its own, so the veil only
   needs to say "not open yet", not hide the picture. Image blur
   6px -> 2.5px, overlay 3px -> 1px, and the tint lightened. The
   bottom scrim stays as-is because that is what holds the caption.
   ------------------------------------------------------------ */
.tile-locked .tile-media img{
  filter:blur(2.5px) saturate(.98) brightness(1);transform:scale(1.03)}
.tile-locked:hover .tile-media img{
  filter:blur(1.5px) saturate(1.02) brightness(1.03);transform:scale(1.05)}

.tile-frost{
  background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 48%,rgba(10,10,10,.16));
  backdrop-filter:blur(1px) saturate(104%);-webkit-backdrop-filter:blur(1px) saturate(104%)}

/* ============================================================
   v176 — case-study plate system (cx-*), first used by THRIVIN.
   Split hero, per the rule for any case built from a client deck:
   type on a clean ground at left, imagery in its own panel at
   right, so the deck's baked-in type never collides with ours.
   Palette is the brand's own: ink, kraft stone, warm paper.
   ============================================================ */
[data-case="thrivin"]{--cx-ink:#111110;--cx-stone:#e6e0d6;--cx-paper:#f4f1ea;--cx-tan:#b99a72}

.cx-hero{background:var(--cx-ink);color:#f2f0ea;padding:150px var(--pad-x) 0;overflow:hidden}
.cx-hero__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:end}
.cx-hero__type{padding-bottom:58px}
.cx-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(38px,4.6vw,74px);
  line-height:.94;letter-spacing:-.045em;margin:24px 0 20px;max-width:15ch}
.cx-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cx-tan)}
.cx-hero__line{font-family:var(--display);font-weight:200;font-size:clamp(16px,1.5vw,22px);
  line-height:1.45;letter-spacing:-.02em;color:rgba(242,240,234,.76);max-width:40ch}
.cx-hero__art{margin:0;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;align-self:end}
.cx-hero__art img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.cx-flag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,234,.62)}
.cx-flag i{width:5px;height:5px;border-radius:50%;background:var(--cx-tan);display:block}

.cx-plate{padding:92px var(--pad-x)}
.cx-plate--ink{background:var(--cx-ink);color:#f2f0ea}
.cx-plate--paper{background:var(--cx-paper)}
.cx-plate--stone{background:var(--cx-stone)}
.cx-spread{max-width:min(1400px,100%);margin:0 auto}
.cx-spread figure{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.06)}
.cx-spread img{width:100%;height:auto;display:block}
.cx-spread figcaption{margin:0 0 46px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grey)}
.cx-plate--ink .cx-spread figcaption{color:rgba(242,240,234,.5)}
.cx-spread figcaption:last-child{margin-bottom:0}
.cx-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cx-duo figure{margin:0;border-radius:var(--radius);overflow:hidden}

/* the chapter rule and statement need to invert on the ink plates */
.cx-plate--ink .cs-chapter,.cx-plate--ink .cs-statement{color:#f2f0ea}
.cx-plate--ink .cs-chapter .no{color:rgba(242,240,234,.45)}

@media (max-width:900px){
  .cx-hero{padding:118px var(--pad-x) 0}
  .cx-hero__in{grid-template-columns:1fr;gap:32px}
  .cx-hero__type{padding-bottom:0}
  .cx-hero__art img{aspect-ratio:16/10}
  .cx-duo{grid-template-columns:1fr}
  .cx-plate{padding:58px var(--pad-x)}
}

/* RUMI: same cx- plate system, the brand's own palette.
   Chestnut #A87143 and the blush/bone pairing from Guidelines V4. */
[data-case="rumi"]{--cx-ink:#3d2a1e;--cx-stone:#f2d8d3;--cx-paper:#f7efe6;--cx-tan:#c98f5c}

/* ============================================================
   v178 — consent banner.
   Opt-in, because ANDMELO sells into the UK and EU. Styled as
   part of the brand rather than a bolted-on grey bar: this is
   often the first interface a prospect touches.
   Sits bottom-left so it never covers the primary CTA.
   ============================================================ */
.am-consent{position:fixed;left:var(--pad-x);bottom:var(--pad-x);z-index:300;max-width:min(430px,calc(100vw - var(--pad-x)*2));
  background:rgba(14,14,14,.88);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);
  color:#f2f0ea;border:1px solid rgba(242,240,234,.16);border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  opacity:0;transform:translateY(14px);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.am-consent.on{opacity:1;transform:none}
.am-consent[hidden]{display:none}
.am-consent__in{padding:24px}
.am-consent__t{font-family:var(--display);font-weight:300;font-size:19px;letter-spacing:-.02em;margin:0 0 8px}
.am-consent__p{font-family:var(--sans);font-size:13px;line-height:1.6;color:rgba(242,240,234,.72);margin:0 0 18px}
.am-consent__acts{display:flex;flex-wrap:wrap;gap:8px}
.am-btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 16px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s,border-color .3s;
  border:1px solid rgba(242,240,234,.3);background:transparent;color:#f2f0ea}
.am-btn--ghost:hover{border-color:#f2f0ea;background:rgba(242,240,234,.08)}
.am-btn--solid{background:#f2f0ea;color:#0e0e0e;border-color:#f2f0ea}
.am-btn--solid:hover{background:#fff;border-color:#fff}
.am-btn:focus-visible{outline:2px solid var(--accent,#f2f0ea);outline-offset:3px}
.am-consent__prefs{margin-top:18px;border-top:1px solid rgba(242,240,234,.16);padding-top:16px}
.am-consent__prefs[hidden]{display:none}
.am-consent__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:10px 0;cursor:pointer}
.am-consent__row b{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:#f2f0ea}
.am-consent__row i{display:block;font-style:normal;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:rgba(242,240,234,.6);margin-top:3px}
.am-consent__row input{flex:0 0 auto;width:20px;height:20px;accent-color:#f2f0ea;margin-top:2px;cursor:pointer}
.am-consent__prefacts{margin-top:12px}

.foot-consent{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;opacity:.7}
.foot-consent:hover{opacity:1}
.foot-consent:focus-visible{outline:2px solid currentColor;outline-offset:3px}

@media (max-width:720px){
  .am-consent{left:10px;right:10px;bottom:10px;max-width:none}
  .am-consent__in{padding:20px}
  .am-consent__acts .am-btn{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .am-consent{transition:opacity .01ms}
}

/* ============================================================
   v179 — WCAG 2.2 AA remediation.

   Three real failures found by auditing the rendered pages, not
   by reading the markup:

   1.4.3 Contrast (AA). The small uppercase mono labels were
   running between 1.7:1 and 3.4:1 against their grounds. They
   are 10-12px, so they need 4.5:1, not 3:1. The greys are
   darkened just far enough to pass. The character of the palette
   is unchanged; these are a few points of luminance, not a
   redesign.

   2.5.8 Target size (new in WCAG 2.2, AA). Carousel dots and
   several inline links were under 24x24. Rather than make the
   dots visually bigger, the hit area is expanded with a
   pseudo-element, so the design is untouched and the target is
   compliant.

   1.3.1 / 2.4.1 Landmarks. index.html was the only page with no
   <main>, so the skip link had nothing to land in. Fixed in the
   markup.
   ============================================================ */

/* ---- 1.4.3 contrast: darker greys, same hue family ---- */
:root{
  --grey:#6f6c65;      /* was #8a8780 - 3.2:1 on paper, now 5.1:1 */
  --grey-2:#4f4d49;    /* was #5d5b56 */
  --grey-3:#8f8c84;    /* only ever used on dark grounds */
}
.surface-dark,.foot:not(.foot-light){
  --grey:#a8a49b;      /* on near-black this is 6.4:1 */
  --grey-2:#bdb9b0;
  --grey-3:#a8a49b;
}

/* the semi-transparent label colours had the same problem */
.proof__lbl,.mfun-note,.jmin-lbl{color:var(--grey)}
.cs-hero-foot p{color:rgba(242,240,234,.82)}
.au-price .k,.au-price li b{color:rgba(242,240,234,.72)}
.foot-grid .foot-col a,.foot-grid .foot-col span{color:rgba(242,240,234,.86)}
.foot-light .foot-grid .foot-col a,.foot-light .foot-grid .foot-col span{color:var(--grey-2)}
.tile-cap .yr{color:rgba(242,240,234,.86)}
.tile-cap .t em{color:rgba(242,240,234,.78)}

/* ---- 2.5.8 target size: 24px minimum hit area, no visual change ---- */
.dots i,.brief-dots i,.tstm2-dots button,.ig-dots button,button.td{
  position:relative}
.dots i::after,.brief-dots i::after,.tstm2-dots button::after,.ig-dots button::after,button.td::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;min-width:24px;min-height:24px}
.link-arrow,.hau__rung-alt,.hw-view,.foot-consent{display:inline-flex;align-items:center;min-height:24px}

/* ---- 2.4.7 focus visible: one consistent, high-contrast ring ---- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.surface-dark a:focus-visible,.surface-dark button:focus-visible{outline-color:#f2f0ea}

/* ---- 2.3.3 / 2.2.2 respect reduced motion everywhere ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* v179b — the remaining flat-ground contrast failures.
   Everything below sits on a SOLID colour, so the ratio is real and
   measurable. Text set over photography is excluded deliberately: it
   cannot be judged from CSS alone, it depends on the pixels behind it,
   and those captions already sit on a full-strength gradient scrim. */
.cx-hero__line{color:rgba(242,240,234,.88)}
.cs-chapter .no{color:var(--grey-2)}
.surface-dark .cs-chapter .no,.cx-plate--ink .cs-chapter .no{color:rgba(242,240,234,.72)}
.proof__lbl{color:var(--grey-2)}
.stat .num span,.hw-view{color:var(--grey-2)}
.au-hero__line,.ha-hero__line,.ta-hero__line,.mb-hero__line,.fr-hero__line,
.ts-hero__line,.gh-hero__line,.kk-hero__line,.bf-hero__line,.vk-hero__line{
  color:rgba(242,240,234,.88)}
.en-hero__line{color:rgba(238,243,244,.88)}
.mono,.eyebrow,.sh-label{color:var(--grey-2)}
.surface-dark .mono,.surface-dark .eyebrow,.surface-dark .sh-label{color:rgba(242,240,234,.78)}

/* v179c — the last marginal cases, all sitting at 4.35:1 against 4.5 needed.
   A few points of luminance, invisible to the eye, decisive to the audit. */
:root{--grey-2:#494742}
.stat .num span,.cs-serv b,.au-card li b,.rt-tier .step,.wi__scope{color:var(--grey-2)}

/* ============================================================
   v181 — press strip: the four new titles.
   Each set to the character of its real masthead so the row reads
   as one strip rather than fifteen unrelated shapes. These remain
   typographic stand-ins: drop real files into assets/press/ and
   swap the <span> for <img class="lg-file">, which is already
   sized to the same optical height (see v169).
   ============================================================ */
.lg-wwd{font-family:var(--sans);font-weight:800;font-size:30px;letter-spacing:-.045em}
.lg-condenast{font-family:var(--serif);font-size:22px;letter-spacing:.16em;text-transform:uppercase}
.lg-marieclaire{font-family:var(--display);font-weight:500;font-size:27px;letter-spacing:-.035em;text-transform:lowercase}
.lg-grazia{font-family:var(--serif);font-size:26px;letter-spacing:.2em;text-transform:uppercase}

/* v182 — consent banner moves to the right.
   The WhatsApp FAB and the theme control live bottom-left, so the banner
   was landing on top of them. Right side is clear. */
.am-consent{left:auto;right:var(--pad-x)}
@media (max-width:720px){.am-consent{left:10px;right:10px}}

/* ============================================================
   v183 — real press mastheads, optically matched.
   The supplied files each carried a different amount of white
   padding, which is why Dazed looked small next to Vanity Fair:
   a uniform CSS height was sizing the CANVAS, not the artwork.
   Every file is now trimmed to its ink and knocked out to
   transparency, so one height gives one cap height. No blend
   mode needed, which also means they work on any ground.
   ============================================================ */
.marq-item .lg-file{
  height:24px;width:auto;display:block;object-fit:contain;
  opacity:.58;transition:opacity .3s var(--ease);
  filter:none}
.marq-item:hover .lg-file{opacity:1}

/* Two marks are geometric rather than typographic, so matching their
   bounding box makes them read LARGER than the wordmarks beside them.
   Matched by eye to the same visual weight, not the same number. */
.marq-item img[src*="gq"]{height:34px}
.marq-item img[src*="dazed"]{height:26px}
.marq-item img[src*="wwd"]{height:22px}
.marq-item img[src*="wallpaper"]{height:27px}
.marq-item img[src*="telegraph"]{height:26px}

/* the artwork is pure black, so on dark grounds it inverts to paper */
.surface-dark .marq-item .lg-file,.foot:not(.foot-light) .marq-item .lg-file{
  filter:invert(1);opacity:.7}

@media (max-width:720px){
  .marq-item .lg-file{height:20px}
  .marq-item img[src*="gq"]{height:28px}
  .marq-item img[src*="dazed"]{height:22px}
  .marq-item img[src*="wwd"]{height:19px}
  .marq-item img[src*="wallpaper"]{height:23px}
  .marq-item img[src*="telegraph"]{height:22px}
}

/* v184 — the v169 .lg-file rule still carried max-width:180px, which was
   scaling the wide wordmarks DOWN and so shrinking their cap height. Height
   must be the only thing governing size, or the optical match breaks. */
.marq-item .lg-file{max-width:none}
.marq-item{padding:0 26px}

/* ============================================================
   v187 — word cascade.
   Headlines arrive a word at a time. Only transform and opacity
   animate, per the lesson from the laggy menu hover: anything
   that touches layout stutters on a long headline.
   The split spans are aria-hidden and the host carries an
   aria-label, so assistive tech still reads one clean sentence.
   ============================================================ */
.wc{display:inline-block;opacity:0;transform:translateY(0.42em);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  will-change:transform,opacity}
.wc-in .wc{opacity:1;transform:none}
/* the serif italic accents lift slightly further, so the eye lands on them last */
em .wc{transform:translateY(0.52em)}

/* NOTE: no overflow:hidden on the host. It clipped descenders and, on a
   two-line headline with a <br>, cropped the second line entirely. */

@media (prefers-reduced-motion:reduce){
  .wc{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- "Let's build something timeless" was oversized ---- */
.foot-big{font-size:clamp(38px,5.6vw,86px);max-width:16ch}
.foot-light .foot-big{font-size:clamp(38px,5.6vw,86px)}

/* ---- testimonials: wider measure, less boxy ---- */
.tstm2--onfilm .tq{max-width:34ch;font-size:clamp(19px,2vw,28px);line-height:1.36}
@media (min-width:1200px){.tstm2--onfilm .tq{max-width:42ch}}
@media (min-width:1600px){.tstm2--onfilm .tq{max-width:48ch}}
.tstm2-slide{padding-right:4vw}

/* ---- "Let's build something timeless" was oversized ---- */

/* v190b — the caps were cropping.
   line-height:.78 made the line box shorter than the cap height, so with
   overflow:hidden on the band the tops of ANDMELO were sliced. Let the
   wordmark set the band height instead of forcing a fixed one, and give
   the line box room for the actual glyphs. */
.foot-wm__word{font-size:15.2vw;line-height:.96;padding:.04em 0 .02em}
@media (min-width:900px){
  .foot-reveal{height:auto}
}
@media (min-width:1700px){
  .foot-wm__word{font-size:258px}
}
@media (max-width:899px){
  .foot-wm__word{font-size:17vw;line-height:1}
}

/* ============================================================
   v192 — the corner peel.

   The full-width ANDMELO band was a statement; this is a sneak
   peek, which suits a concierge better. The bottom-right corner
   of the page lifts like paper as you reach the end, and the AND
   M mark sits underneath on black.

   Built as: a fixed black panel behind everything, and a clip-path
   on the page that cuts a growing diagonal out of its bottom-right
   corner. The "underside" of the lifted sheet is a second triangle
   with its own gradient, so it reads as paper turning rather than
   a shape being deleted.

   Driven by one rAF-throttled scroll read writing a single custom
   property. Nothing animates layout.
   ============================================================ */
.peel{position:fixed;right:0;bottom:0;z-index:0;pointer-events:none;
  width:var(--peel-size,0px);height:var(--peel-size,0px);
  background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.peel__mark{position:absolute;right:6%;bottom:8%;
  width:min(46%,190px);opacity:0;transform:translate(8%,8%) scale(.94);
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.peel__mark img{width:100%;height:auto;display:block}
body.peeling .peel__mark{opacity:1;transform:none}

/* the sheet: everything above the peel is opaque and clipped */
@media (min-width:900px){
  body > main,body > .cascade-stage,body > section,body > footer{
    position:relative;z-index:1}
  body > main{background:var(--paper)}
  body > footer.foot.foot-light{background:var(--paper)}
  body > footer.foot:not(.foot-light){background:var(--ink)}

  body > footer.foot{
    clip-path:polygon(0 0, 100% 0,
      100% calc(100% - var(--peel-size,0px)),
      calc(100% - var(--peel-size,0px)) 100%,
      0 100%);
    transition:clip-path .12s linear}

  /* the underside of the turning sheet */
  body > footer.foot::after{
    content:"";position:absolute;right:0;bottom:0;
    width:var(--peel-size,0px);height:var(--peel-size,0px);
    background:linear-gradient(315deg,
      rgba(0,0,0,.20) 0%, rgba(0,0,0,.07) 34%, rgba(0,0,0,0) 62%);
    clip-path:polygon(100% 0, 100% 100%, 0 100%);
    pointer-events:none;opacity:.9}
}

/* on a phone there is no room for a corner gesture, so the mark simply sits */
@media (max-width:899px){
  .peel{position:static;width:100%;height:132px;--peel-size:132px}
  .peel__mark{position:static;opacity:1;transform:none;width:140px;margin:0 auto}
  body > footer.foot{clip-path:none}
}
@media (prefers-reduced-motion:reduce){
  body > footer.foot{transition:none}
  .peel__mark{transition:none}
}

/* the floating controls invert once they are over the black corner */
.wa-fab,.backtop{transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
body.on-footer .backtop{background:#f2f0ea;color:#0a0a0a;border-color:#f2f0ea}

/* ============================================================
   v193 — the peel mark becomes a control.
   Hovering runs a liquid-glass sheen across the mark, the same
   iridescent language as the services hover, and clicking it
   returns you to the top. It is the only thing in the revealed
   corner, so it should do something.
   ============================================================ */
.peel__mark{position:absolute;right:6%;bottom:8%;
  width:min(46%,190px);padding:0;border:0;background:none;cursor:pointer;
  opacity:0;transform:translate(8%,8%) scale(.94);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
  pointer-events:auto;isolation:isolate;overflow:hidden;border-radius:6px}
body.peeling .peel__mark{opacity:1;transform:none}
.peel{pointer-events:none}
.peel__mark img{width:100%;height:auto;display:block;position:relative;z-index:1}

/* the sheen: a soft iridescent band that sweeps across on hover */
.peel__glass{position:absolute;inset:-30%;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,
    transparent 30%,
    rgba(166,204,255,.55) 42%,
    rgba(201,184,255,.62) 50%,
    rgba(255,185,218,.55) 58%,
    transparent 70%);
  mix-blend-mode:screen;
  transform:translateX(-62%);
  transition:opacity .28s var(--ease)}
.peel__mark:hover .peel__glass,.peel__mark:focus-visible .peel__glass{
  opacity:1;animation:peelSheen 1.15s var(--ease)}
@keyframes peelSheen{
  from{transform:translateX(-62%)}
  to{transform:translateX(62%)}
}
.peel__mark:hover img{transform:scale(1.03);transition:transform .5s var(--ease)}
.peel__mark:focus-visible{outline:2px solid #f2f0ea;outline-offset:4px}

@media (max-width:899px){
  .peel__mark{position:static;opacity:1;transform:none;width:140px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .peel__glass{animation:none!important}
  .peel__mark:hover img{transform:none}
}

/* ============================================================
   v194 — the 404, built around a concierge bell.
   The reference uses a duck and a quack joke. Ours is the thing
   you press at a desk when nobody is there, which is both the
   right object for a concierge and a better joke: the page is
   missing, so ring and someone will actually come.
   The bell is drawn in CSS, so there is no asset to load and it
   inherits the theme.
   ============================================================ */
.nf{min-height:100svh;background:#0a0a0a;color:#f2f0ea;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:80px var(--pad-x)}
.nf-in{max-width:640px}
.nf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,234,.6);margin:0 0 22px}
.nf-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--accent,#f2f0ea);display:block}
.nf-h{font-family:var(--display);font-weight:200;font-size:clamp(34px,6vw,74px);
  line-height:1;letter-spacing:-.04em;margin:0 0 18px}
.nf-h em{font-family:var(--serif);font-style:italic;font-weight:400}
.nf-p{font-family:var(--sans);font-size:15.5px;line-height:1.7;
  color:rgba(242,240,234,.72);max-width:44ch;margin:0 auto 42px}

/* ---- the bell ---- */
.nf-bell{background:none;border:0;padding:0;cursor:pointer;display:block;margin:0 auto 10px}
.nf-bell__stage{position:relative;display:block;width:150px;height:104px;margin:0 auto}
.nf-bell__dome{position:absolute;left:15px;bottom:14px;width:120px;height:62px;
  border-radius:60px 60px 6px 6px;
  background:linear-gradient(158deg,#fbfaf7 0%,#d9d5cc 42%,#8e8a82 100%);
  box-shadow:inset -8px -5px 14px rgba(0,0,0,.28),inset 7px 5px 12px rgba(255,255,255,.6);
  transform-origin:50% 100%}
.nf-bell__button{position:absolute;left:50%;bottom:74px;width:19px;height:15px;
  margin-left:-9.5px;border-radius:10px 10px 3px 3px;
  background:linear-gradient(160deg,#fbfaf7,#a8a49b);
  box-shadow:inset -2px -1px 3px rgba(0,0,0,.25);transform-origin:50% 100%}
.nf-bell__base{position:absolute;left:6px;bottom:4px;width:138px;height:13px;border-radius:4px;
  background:linear-gradient(180deg,#c9c5bc,#6f6c65)}
.nf-bell__stage::after{content:"";position:absolute;left:50%;bottom:0;width:170px;height:16px;
  margin-left:-85px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%)}

.nf-bell:hover .nf-bell__button{transform:translateY(2px)}
.nf-bell.rung .nf-bell__button{animation:bellPress .42s var(--ease)}
.nf-bell.rung .nf-bell__dome{animation:bellShake .62s var(--ease)}
@keyframes bellPress{0%{transform:translateY(0)}35%{transform:translateY(7px)}100%{transform:translateY(0)}}
@keyframes bellShake{
  0%{transform:rotate(0)}22%{transform:rotate(-3.2deg)}45%{transform:rotate(2.4deg)}
  68%{transform:rotate(-1.4deg)}100%{transform:rotate(0)}}

.nf-bell__ring{position:absolute;left:50%;top:26px;width:70px;height:70px;margin-left:-35px;
  border:1.5px solid rgba(242,240,234,.55);border-radius:50%;opacity:0;pointer-events:none}
.nf-bell.rung .nf-bell__ring--1{animation:bellRing 1.1s var(--ease)}
.nf-bell.rung .nf-bell__ring--2{animation:bellRing 1.1s var(--ease) .13s}
.nf-bell.rung .nf-bell__ring--3{animation:bellRing 1.1s var(--ease) .26s}
@keyframes bellRing{
  from{opacity:.75;transform:scale(.5)}
  to{opacity:0;transform:scale(2.5)}}

.nf-bell__label{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,240,234,.5);transition:color .3s}
.nf-bell:hover .nf-bell__label{color:rgba(242,240,234,.9)}
.nf-bell:focus-visible{outline:2px solid #f2f0ea;outline-offset:6px;border-radius:8px}

.nf-said{min-height:1.5em;margin:16px 0 34px;font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,1.7vw,21px);color:rgba(242,240,234,.86)}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.nf .btn{border-color:rgba(242,240,234,.32);color:#f2f0ea}
.nf .btn-solid{background:#f2f0ea;color:#0a0a0a;border-color:#f2f0ea}

@media (prefers-reduced-motion:reduce){
  .nf-bell__dome,.nf-bell__button,.nf-bell__ring{animation:none!important}
}

/* ============================================================
   v196 — Melo, the assistant.
   Sits bottom-right as a labelled pill rather than a bare circle,
   because "Ask Melo" is an invitation and a circle is furniture.
   The panel is the brand's own surface, not a chat widget skin.
   ============================================================ */
.melo-fab{position:fixed;right:var(--pad-x);bottom:calc(var(--pad-x) + 62px);z-index:220;
  display:inline-flex;align-items:center;gap:9px;padding:12px 18px 12px 14px;
  border-radius:999px;cursor:pointer;border:1px solid rgba(242,240,234,.2);
  background:rgba(14,14,14,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:#f2f0ea;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 40px rgba(0,0,0,.3);transition:transform .3s var(--ease),background .3s}
.melo-fab:hover{transform:translateY(-2px);background:rgba(14,14,14,.96)}
.melo-fab__dot{width:7px;height:7px;border-radius:50%;background:var(--accent,#a6ccff);
  box-shadow:0 0 0 4px rgba(166,204,255,.18);animation:meloPulse 2.4s ease-in-out infinite}
@keyframes meloPulse{0%,100%{opacity:1}50%{opacity:.45}}
.melo-fab:focus-visible{outline:2px solid #f2f0ea;outline-offset:3px}

.melo{position:fixed;right:var(--pad-x);bottom:calc(var(--pad-x) + 62px);z-index:230;
  width:min(400px,calc(100vw - var(--pad-x)*2));height:min(560px,70vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(12,12,12,.94);backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  border:1px solid rgba(242,240,234,.16);border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.5);color:#f2f0ea;
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:100% 100%;
  transition:opacity .3s var(--ease),transform .34s var(--ease)}
.melo.on{opacity:1;transform:none}
.melo[hidden]{display:none}

.melo-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid rgba(242,240,234,.14);flex:0 0 auto}
.melo-id{display:flex;align-items:center;gap:10px}
.melo-id__dot{width:8px;height:8px;border-radius:50%;background:var(--accent,#a6ccff)}
.melo-id b{display:block;font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:-.01em}
.melo-id i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(242,240,234,.5);margin-top:2px}
.melo-x{background:none;border:0;color:rgba(242,240,234,.6);font-size:22px;line-height:1;
  cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .25s}
.melo-x:hover{color:#f2f0ea}

.melo-log{flex:1 1 auto;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin}
.melo-msg{max-width:88%}
.melo-msg--you{align-self:flex-end}
.melo-msg--melo{align-self:flex-start}
.melo-msg__t{margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.62;
  padding:11px 14px;border-radius:14px;white-space:pre-wrap}
.melo-msg--melo .melo-msg__t{background:rgba(242,240,234,.09);color:rgba(242,240,234,.94);
  border-bottom-left-radius:4px}
.melo-msg--you .melo-msg__t{background:#f2f0ea;color:#111;border-bottom-right-radius:4px}

.melo-ctas{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.melo-cta{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:9px 13px;border-radius:999px;text-decoration:none;
  background:#f2f0ea;color:#111;transition:transform .25s var(--ease)}
.melo-cta:hover{transform:translateY(-1px)}
.melo-rel{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.melo-chip{font-family:var(--sans);font-size:11.5px;line-height:1.3;text-align:left;
  padding:8px 11px;border-radius:11px;cursor:pointer;
  background:transparent;border:1px solid rgba(242,240,234,.24);color:rgba(242,240,234,.82);
  transition:border-color .25s,color .25s}
.melo-chip:hover{border-color:rgba(242,240,234,.6);color:#f2f0ea}

.melo-typing{display:flex;gap:5px;padding:14px}
.melo-typing span{width:6px;height:6px;border-radius:50%;background:rgba(242,240,234,.5);
  animation:meloDot 1.1s ease-in-out infinite}
.melo-typing span:nth-child(2){animation-delay:.16s}
.melo-typing span:nth-child(3){animation-delay:.32s}
@keyframes meloDot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.melo-form{flex:0 0 auto;display:flex;gap:8px;padding:14px 16px;
  border-top:1px solid rgba(242,240,234,.14)}
.melo-form input{flex:1;background:rgba(242,240,234,.07);border:1px solid rgba(242,240,234,.16);
  border-radius:999px;padding:11px 16px;color:#f2f0ea;font-family:var(--sans);font-size:13.5px}
.melo-form input::placeholder{color:rgba(242,240,234,.42)}
.melo-form input:focus{outline:none;border-color:rgba(242,240,234,.45)}
.melo-form button{flex:0 0 auto;width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:#f2f0ea;color:#111;border:0;font-size:17px;transition:transform .25s var(--ease)}
.melo-form button:hover{transform:translateY(-1px)}
.melo-form button:focus-visible,.melo-chip:focus-visible,.melo-cta:focus-visible{
  outline:2px solid #f2f0ea;outline-offset:3px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:720px){
  .melo{right:10px;left:10px;bottom:76px;width:auto;height:min(72vh,540px)}
  .melo-fab{right:10px;bottom:14px}
  .melo-fab__t{display:none}
  .melo-fab{padding:13px}
}
@media (prefers-reduced-motion:reduce){
  .melo,.melo-fab{transition:none}
  .melo-fab__dot,.melo-typing span{animation:none}
}

/* v196b — the back-to-top arrow is removed at the footer.
   It was sitting on top of the ANDMELO mark in the peeled corner,
   and by then the peel mark does the same job anyway. */
body.on-footer .backtop{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
body.on-footer .melo-fab{opacity:0;visibility:hidden;pointer-events:none}

/* ============================================================
   v197 — Melo moves into the header.
   A floating pill was a third thing competing for the bottom-right
   corner alongside WhatsApp and back-to-top. In the header it reads
   as an invitation rather than a widget, and it is discoverable on
   first paint instead of after a scroll.
   ============================================================ */
.melo-fab{display:none}
@media (max-width:820px){
  .melo-fab{display:inline-flex;right:10px;bottom:76px;padding:12px 15px}
  .melo-fab__t{display:inline}
}
.sb-melo{display:inline-flex;align-items:center;gap:8px}
.sb-melo__dot{width:6px;height:6px;border-radius:50%;background:var(--accent,#a6ccff);
  box-shadow:0 0 0 3px rgba(166,204,255,.2);animation:meloPulse 2.4s ease-in-out infinite;flex:0 0 auto}
.sb-melo[aria-expanded="true"]{background:#f2f0ea;color:#0a0a0a}
@media (max-width:820px){.sb-melo{display:none}}

/* the panel now anchors under the header trigger rather than to a FAB */
.melo{bottom:auto;top:calc(var(--pad-x) + 58px);transform-origin:100% 0}
.melo.on{transform:none}
@media (max-width:720px){
  .melo{top:auto;bottom:14px;right:10px;left:10px;transform-origin:50% 100%}
}
@media (prefers-reduced-motion:reduce){.sb-melo__dot{animation:none}}

/* ============================================================
   v198 — directional cascades.
   Rows arrive one item at a time instead of as a block. The
   stagger is capped at 700ms total however many items there are,
   because a fifteen-logo strip animating at 110ms each would take
   longer than anyone will wait.
   ============================================================ */
.casc-i{opacity:0;transform:translateX(-18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
[data-casc="rtl"] .casc-i{transform:translateX(18px)}
[data-casc="up"] .casc-i{transform:translateY(18px)}
.casc-in .casc-i{opacity:1;transform:none}

/* a rule that draws itself across rather than fading */
.casc-rule{position:relative;overflow:hidden}
.casc-rule::before{content:"";position:absolute;left:0;top:0;height:100%;width:100%;
  background:currentColor;opacity:.16;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.casc-rule.casc-in::before{transform:scaleX(1)}

/* the press strip: the cells rule themselves in first, then the logos */
.press-strip .marq-item{position:relative}
.press-strip[data-casc] .marq-item::before{content:"";position:absolute;left:0;top:12%;
  width:1px;height:76%;background:var(--line);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--ease)}
.press-strip[data-casc].casc-in .marq-item::before{transform:scaleY(1)}
.press-strip[data-casc] .lg-file{opacity:0;transform:translateX(14px);
  transition:opacity .55s var(--ease) .34s,transform .55s var(--ease) .34s}
.press-strip[data-casc].casc-in .lg-file{opacity:.58;transform:none}
.press-strip[data-casc].casc-in .marq-item:hover .lg-file{opacity:1}

@media (prefers-reduced-motion:reduce){
  .casc-i,.casc-rule::before,.press-strip .lg-file{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* v198b — the hw-base rule is a border, not an element, so the drawing
   effect has to target the border itself rather than a background. */
.hw-base.casc-rule{overflow:visible}
.hw-base.casc-rule::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:rgba(244,243,239,.34);opacity:1;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.2s cubic-bezier(.19,1,.22,1) .2s}
.hw-base.casc-rule.casc-in::before{transform:scaleX(1)}

/* ============================================================
   v201 — the rules actually draw now, and everything is slower.

   The two lines were never animating because both already had a
   real border: .hw-base has a border-top and .marq-item has a
   border-right, so the ::before I was scaling in was drawing an
   identical line on top of a line that was already there. The
   borders are now transparent until the reveal fires.

   Timings roughly doubled. At this scale of type and image, quick
   reads as cheap. Unhurried is the whole point.
   ============================================================ */

/* ---- the hero rule ---- */
.hero-word .hw-base{border-top-color:transparent!important;transition:border-top-color .01s}
.hw-base.casc-rule::before{
  background:rgba(244,243,239,.24);
  transition:transform 1.7s cubic-bezier(.19,1,.22,1) .25s}
.hw-base.casc-rule.casc-in::before{transform:scaleX(1)}

/* ---- the press strip: cell rules draw down, then the logos arrive ---- */
.press-strip[data-casc] .marq-item{border-right-color:transparent}
.press-strip[data-casc].casc-in .marq-item{
  transition:border-right-color .8s var(--ease) 1.5s}
.press-strip[data-casc].casc-in .marq-item{border-right-color:var(--line)}
.press-strip[data-casc] .marq-item::before{
  transition:transform .85s cubic-bezier(.19,1,.22,1)}
.press-strip[data-casc] .lg-file{
  transition:opacity .95s var(--ease) .75s,transform .95s var(--ease) .75s}

/* ---- everything else, unhurried ---- */
.casc-i{transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.casc-i{transform:translateX(-26px)}
[data-casc="rtl"] .casc-i{transform:translateX(26px)}
[data-casc="up"] .casc-i{transform:translateY(26px)}
.casc-in .casc-i{transform:none}

/* the word cascade slows to match */
.wc{transition:opacity .85s var(--ease),transform .85s var(--ease)}

/* ============================================================
   v202 — testimonial film: framing, and the end card removed.
   The film is 16:9 in a 58svh band, so object-fit:cover was
   cropping from the centre and losing the subject's head. Pulled
   the focal point up. The David Morris end card was also playing
   on loop: the source is trimmed to 85.5s so it now ends on
   footage, which is what a testimonial band should show.
   ============================================================ */
.pfilm-tstm video{object-position:50% 28%}
@media (max-width:900px){.pfilm-tstm video{object-position:50% 22%}}

/* ============================================================
   v203 — the newsletter block was doing too much work.
   It was a full-height section for one email field, and it did
   not say what you actually get. Slimmed to a single band and
   paired with the journal, so the page offers something to read
   as well as something to sign up to.
   ============================================================ */
.mfun{padding:64px 0}
.mfun-h{font-size:clamp(24px,2.6vw,38px);line-height:1.06;max-width:18ch}
.mfun-sub{font-size:14px;line-height:1.6;max-width:46ch}
.mfun .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;align-items:center}
@media (max-width:900px){
  .mfun{padding:48px 0}
  .mfun .wrap{grid-template-columns:1fr;gap:26px}
}

/* ============================================================
   v204 — the footer columns were deep and loose.
   Three stacked lists at full leading pushed the footer past a
   thousand pixels. Tighter type, tighter rows, four columns on
   wide screens so it reads as one band rather than three towers.
   ============================================================ */
.foot-grid{padding:44px 0 34px;gap:32px}
.foot-grid .foot-col{display:flex;flex-direction:column;gap:0}
.foot-grid .foot-col h4{font-size:9.5px;letter-spacing:.14em;margin-bottom:12px;opacity:.62}
.foot-grid .foot-col a,.foot-grid .foot-col span{
  font-size:13px;line-height:1.9;text-decoration:none;transition:opacity .25s}
.foot-grid .foot-col a:hover{opacity:.6}
.foot-statement{padding-bottom:34px}
.foot-clocks{padding:16px 0}
.foot-base{padding:16px 0 22px}
@media (min-width:1100px){
  .foot-grid{grid-template-columns:repeat(4,1fr)}
}

/* v203b — the journal strip carries three pieces instead of one.
   Paired with the slimmed newsletter band above it, the end of the
   page now offers something to read as well as something to join. */
.jmin{padding:70px 0 84px}
.jmin-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.jmin-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.jmin-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jmin-card{display:block;text-decoration:none;color:inherit;group:card}
.jmin-card__img{display:block;overflow:hidden;border-radius:var(--radius-sm);
  aspect-ratio:16/10;margin-bottom:14px;background:var(--paper-2)}
.jmin-card__img img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);transition:transform .9s var(--ease)}
.jmin-card:hover .jmin-card__img img{transform:scale(1.06)}
.jmin-card__k{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-2);margin-bottom:7px}
.jmin-card__t{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(15px,1.35vw,19px);line-height:1.24;letter-spacing:-.015em;max-width:26ch}
.jmin-card:hover .jmin-card__t{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
@media (max-width:900px){
  .jmin{padding:48px 0 58px}
  .jmin-row{grid-template-columns:1fr;gap:26px}
}


/* ============================================================
   v208 — the newsletter and journal bands go thin.
   Both were still running at section scale for what is one email
   field and three links. Roughly halved, so the two together now
   occupy about what one of them did.
   ============================================================ */
.mfun{padding:38px 0 34px}
.mfun-h{font-size:clamp(19px,1.75vw,25px);line-height:1.12;max-width:20ch;margin:0 0 8px}
.mfun-sub{font-size:12.5px;line-height:1.55;max-width:52ch;margin:0}
.mfun .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.mfun .proof__lbl{margin-bottom:10px;font-size:9.5px}
.mfun-form input{padding:12px 16px;font-size:13px}
.mfun-form button{padding:12px 20px;font-size:10px}
.mfun-note{font-size:9.5px;margin-top:8px}
/* v208 re-declared .mfun .wrap outside a media query and after v204's
   mobile override, so the single-column rule below 900px had been dead
   ever since: the band stayed two-up at every width and a phone got the
   copy and the email field in two ~160px columns. Re-asserted here,
   after the rule that was beating it. */
@media (max-width:900px){
  .mfun .wrap{grid-template-columns:1fr;gap:22px}
  .mfun-h{max-width:none}
  .mfun-sub{max-width:none}
}

.jmin{padding:34px 0 46px}
.jmin-head{margin-bottom:18px;padding-bottom:12px}
.jmin-row{gap:18px}
.jmin-card__img{aspect-ratio:16/9;margin-bottom:10px}
.jmin-card__k{font-size:9px;margin-bottom:5px}
.jmin-card__t{font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.28;max-width:30ch}

@media (max-width:900px){
  .mfun{padding:30px 0 26px}
  .jmin{padding:26px 0 34px}
  .jmin-row{gap:20px}
}

/* ============================================================
   v209 — the overscroll gutter.
   Rubber-banding at the top of the page exposed a flat white bar.
   It now carries a very quiet iridescent wash, the same palette as
   the services hover, so the edge of the page belongs to the brand
   rather than to the browser.
   ============================================================ */
html{
  background:linear-gradient(150deg,
    #efece6 0%,
    #e9ecf2 22%,
    #efeaf2 42%,
    #f3eaee 62%,
    #eaf1ec 82%,
    #efece6 100%);
  background-size:180% 180%;
  background-attachment:fixed;
  animation:gutterDrift 26s ease-in-out infinite}
@keyframes gutterDrift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
/* the page itself stays opaque, so the wash is only ever seen in the gutter */
body{background:var(--paper)}
html[data-theme="dark"]{
  background:linear-gradient(150deg,#0c0c0d 0%,#0d0f14 24%,#110e14 46%,#140e12 66%,#0e120f 86%,#0c0c0d 100%)}
@media (prefers-reduced-motion:reduce){html{animation:none}}

/* ============================================================
   v210 — the next-case module.
   Every case study ended on a services list and then the global
   footer, so a reader who liked one had nowhere to go. The chain
   follows the work-grid order rather than alphabetical accident,
   and the third card is the brief, because the moment someone has
   just read two case studies is the moment to ask.
   ============================================================ */
.nxt-sec{padding-top:0}
.nxt-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.nxt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nxt-card{display:block;text-decoration:none;color:inherit}
.nxt-card__k{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-2);margin-bottom:10px}
.nxt-card__img{display:block;overflow:hidden;border-radius:var(--radius-sm);
  aspect-ratio:16/10;margin-bottom:12px;background:var(--paper-2)}
.nxt-card__img img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .9s var(--ease)}
.nxt-card:hover .nxt-card__img img{transform:scale(1.07)}
.nxt-card__t{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(16px,1.5vw,21px);line-height:1.2;letter-spacing:-.02em;margin-bottom:5px}
.nxt-card:hover .nxt-card__t{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
.nxt-card__s{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-2)}
.nxt-card--cta{display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px;
  transition:border-color .35s,background .35s}
.nxt-card--cta:hover{border-color:var(--ink);background:var(--paper-2)}
.nxt-card--cta .nxt-card__t{margin-bottom:8px}
.surface-dark .nxt-card--cta,.cx-plate--ink .nxt-card--cta{border-color:rgba(242,240,234,.24)}
@media (max-width:900px){
  .nxt-row{grid-template-columns:1fr;gap:24px}
  .nxt-card--cta{padding:22px}
}

/* v210b — the cascade must never own an element's transition permanently.
   .casc-i is stripped in JS once the group has arrived, but scope it out of
   the interactive components too, so a slow reveal can never become a slow
   hover. The cascade panels animate flex-grow on hover and that has to stay
   theirs. */
.cascade .casc-i{transition:opacity 1.05s var(--ease),transform 1.05s var(--ease),
  flex-grow .9s var(--ease)}
.work-grid .casc-i{transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}

/* ============================================================
   v212 — the Acauã falcon draws itself in.
   The mark is a pen-and-ink drawing, so the entrance is a drawing
   one: a soft wipe travels across the artwork while it settles
   from a slight scale, which reads as the ink being laid down
   rather than an image fading up. Transform and clip-path only.
   ============================================================ */
.ac-draw{overflow:hidden}
.ac-draw img{
  clip-path:inset(0 100% 0 0);
  transform:scale(1.04);
  filter:contrast(1.04);
  transition:clip-path 2.1s cubic-bezier(.22,1,.26,1) .15s,
             transform 2.4s cubic-bezier(.22,1,.26,1) .15s}
.ac-draw.in img{clip-path:inset(0 0 0 0);transform:none}

/* the three states: they arrive in sequence, and the third breathes
   between its two drawings so the set does not sit dead on the page */
.ac-falcons figure{position:relative;overflow:hidden}
.ac-swap{isolation:isolate}
.ac-swap img{display:block;width:100%;height:auto}
.ac-swap__b{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity 1.4s var(--ease)}
.ac-swap:hover .ac-swap__b{opacity:1}
.ac-falcons figure img{transition:transform 1.6s var(--ease)}
.ac-falcons figure:hover img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .ac-draw img{clip-path:none;transform:none;transition:none}
  .ac-swap__b{transition:none}
}

/* v212b — the draw needs to beat the existing hero-mask rule. */
.ac-hero__mask.ac-draw img{clip-path:inset(0 100% 0 0);transform:scale(1.04)}
.ac-hero__mask.ac-draw.in img,.ac-hero__mask.ac-draw[data-reveal].in img{
  clip-path:inset(0 0 0 0);transform:none}

/* v214 — restore the side gutters.
   Slimming these bands I wrote padding:38px 0, which replaced the
   original padding:X var(--pad-x) and dropped the horizontal gutter
   entirely, so both sections ran edge to edge. Vertical values kept,
   gutter back. */
.mfun{padding:38px var(--pad-x) 34px}
.jmin{padding:34px var(--pad-x) 52px}
@media (max-width:900px){
  .mfun{padding:30px var(--pad-x) 26px}
  .jmin{padding:26px var(--pad-x) 34px}
}

/* CMC Funded: the cx- plate system in the client's own register.
   Near-black with the CMC blue, which is where the brand actually lives. */
[data-case="cmc"]{--cx-ink:#0b0f1a;--cx-stone:#dfe3ea;--cx-paper:#f2f4f7;--cx-tan:#4f7cff}

/* ============================================================
   v216 — the menu hover stops animating layout.

   The lag was not mysterious: .mrow:hover animated padding-top,
   padding-bottom, letter-spacing AND the preview's width. Every
   one of those forces layout and paint on a full-viewport
   overlay, on every frame. This is the exact pattern rule 9 in
   the project notes warns about, and it had come back.

   Rows are now a fixed taller height, so nothing reflows on
   hover. The preview holds a fixed box and reveals with opacity
   and transform. The name scales instead of retracking.
   ============================================================ */
.menu-acc .mrow{
  padding-top:0;padding-bottom:0;
  min-height:clamp(88px,11.4vh,124px);
  align-items:center;
  transition:color .4s var(--ease),background-color .4s var(--ease)}
.menu-acc .mrow:hover{padding-top:0;padding-bottom:0}

/* name: scale, never letter-spacing */
.mrow__name{transform-origin:left center;
  transition:transform .5s var(--ease),color .4s var(--ease);
  will-change:transform}
.mrow:hover .mrow__name{letter-spacing:inherit;transform:scale(1.035)}

/* preview: fixed box, opacity and transform only */
.mrow__prev{width:210px;opacity:0;overflow:hidden;flex:0 0 auto;
  transform:scale(.94);transform-origin:center;
  transition:opacity .45s var(--ease),transform .55s var(--ease);
  will-change:opacity,transform}
.mrow:hover .mrow__prev{width:210px;opacity:1;transform:none}
.mrow__prev img{width:100%;height:100%;object-fit:cover;transform:none;
  transition:transform 1.2s var(--ease)}
.mrow:hover .mrow__prev img{transform:scale(1.06)}

@media (max-width:900px){
  .menu-acc .mrow{min-height:74px}
  .mrow__prev{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mrow__name,.mrow__prev,.mrow__prev img{transition:none}
}

/* ============================================================
   v217 — services and sector pages.
   Each is a real page with its own argument and its own proof,
   not a city name swapped into a template. The internal linking
   is the point: sector to service to case to brief.
   ============================================================ */
.sec-svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sec-svc{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-sm);
  text-decoration:none;color:inherit;font-family:var(--display);font-weight:300;
  font-size:clamp(15px,1.3vw,19px);letter-spacing:-.015em;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.sec-svc:hover{border-color:var(--ink);background:var(--paper-2)}
.sec-svc .a{transition:transform .4s var(--ease)}
.sec-svc:hover .a{transform:translateX(4px)}
@media (max-width:900px){.sec-svcs{grid-template-columns:1fr}}

/* the footer gains a fourth column for the new architecture */
.foot-col--arch a{display:block}

/* v218 — legal pages and the consent banner link. */
.am-consent__p a{color:#f2f0ea;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;opacity:.85;transition:opacity .25s}
.am-consent__p a:hover{opacity:1}
.post-note{margin-top:44px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:13.5px;line-height:1.7;color:var(--grey-2)}
.post-body ul{margin:14px 0 24px;padding-left:20px}
.post-body li{font-size:15.5px;line-height:1.78;margin-bottom:9px}
.post-body code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);
  padding:2px 6px;border-radius:4px}
.foot-legal a{text-decoration:none;opacity:.7;transition:opacity .25s}
.foot-legal a:hover{opacity:1}

/* ============================================================
   v219 — Ariana Grande: the library plates
   Contact sheets sit on light grounds, so the caption goes
   under the image rather than overlaid on it the way .cs-bleed
   does. Same mono caption treatment as the other case plates.
   ============================================================ */
.ag-lib{margin:0 0 46px}
.ag-lib img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.ag-lib figcaption{max-width:min(1100px,100%);margin:16px auto 0;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
@media(max-width:760px){.ag-lib{margin-bottom:30px}}

/* ============================================================
   v220 — Castore case palette
   .cx-hero and the .cx-plate variants are driven by --cx-*,
   which are declared per [data-case]. Without this block the
   hero background resolves to nothing and the near-white hero
   type sits on the light page ground, invisible.
   Ink carries a slight navy cast for the club kit; stone and
   tan are taken off the warm backdrop and the engineered knit.
   ============================================================ */
[data-case="castore"]{--cx-ink:#14161c;--cx-stone:#e3ddd4;--cx-paper:#f2ede5;--cx-tan:#a89279}

/* ============================================================
   v222 — Gentle Monster: motion plate
   .gm-plate figure was written for stills, so the video needs
   the same rounded, contained treatment. Portrait source, so
   the aspect ratio is set rather than cropped to a landscape box.
   ============================================================ */
.gm-film{aspect-ratio:4/5;background:var(--paper-3)}
.gm-film video{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   v223 — AI content: illustration grid
   Three up on desktop, two on tablet, one on mobile. Portrait
   cells because the studies are portrait; the caption sits under
   the image in the same mono treatment as the case plates.
   ============================================================ */
.ai-toons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--maxw);margin:0 auto}
.ai-toons figure{margin:0}
.ai-toons figure>img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:var(--radius);background:var(--paper-3)}
.ai-toons figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grey)}
@media(max-width:900px){.ai-toons{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:560px){.ai-toons{grid-template-columns:1fr}}

/* ============================================================
   v224 — Alo, Azure Blue (speculative)
   Palette: ink is deep ocean, tan is the copper the 30% is
   drawn from. The triptych sits flush with no gap, because the
   three frames are meant to read as one continuous image.
   ============================================================ */
[data-case="alo"]{--cx-ink:#0c1f2e;--cx-stone:#cfe3ef;--cx-paper:#eef5f9;--cx-tan:#c9784a}

.alo-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:var(--maxw);margin:0 auto;
  border-radius:var(--radius);overflow:hidden}
.alo-tri figure{margin:0}
.alo-tri img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}

.alo-films{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.alo-films figure{margin:0}
.alo-films video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:var(--radius);background:rgba(255,255,255,.05)}
.alo-films figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(242,240,234,.55)}

.alo-ratio{display:flex;margin-top:56px;border-radius:var(--radius);overflow:hidden;height:104px}
.alo-ratio span{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:12px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase}
.alo-ratio i{font-style:normal;font-family:var(--display);font-size:22px;letter-spacing:0}
.alo-ratio__b{flex:60;background:#2196d1;color:#fff}
.alo-ratio__o{flex:30;background:#c9784a;color:#fff}
.alo-ratio__w{flex:10;background:#f2f0ea;color:#14161c}

@media(max-width:760px){
  .alo-films{grid-template-columns:1fr;gap:14px}
  .alo-tri{grid-template-columns:1fr}
  .alo-ratio{height:84px}
}

/* ============================================================
   v226 — Built environment grid
   Landscape source, so 3:2 cells rather than the portrait 4:5
   used by .ai-toons. Sits on surface-dark, so captions take the
   light treatment.
   ============================================================ */
.be-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--maxw);margin:0 auto}
.be-grid figure{margin:0}
.be-grid figure>img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--radius)}
.be-grid figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(242,240,234,.55)}
@media(max-width:900px){.be-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:560px){.be-grid{grid-template-columns:1fr}}

/* ============================================================
   v228 — word cascade: release the compositor layer
   .wc sets will-change:transform,opacity so each word animates on
   its own GPU layer. Nothing cleared it, so every split word on
   every page kept that layer for the life of the session. Besides
   the memory cost, a stale layer can repaint as an offset,
   colour-fringed ghost of the word sitting behind the real text.
   Once the cascade has finished, main.js adds .wc-done and the
   words go back to ordinary paint.
   ============================================================ */
.wc-done .wc{will-change:auto;transform:none;transition:none}

/* ============================================================
   v230 — Services iridescence, and the footer clock gutter
   ------------------------------------------------------------
   The v54 block put the iridescent gradient on .svc-head h3
   permanently, with background-clip:text and the fill only going
   transparent on hover. That broke twice over once the word
   cascade started wrapping each word in an inline-block .wc:

     - not hovering, the clipped gradient painted as pale blue
       ghost words behind the real text while the spans were
       still animating in. That is the blue on first load.
     - hovering, the fill went transparent but the parent's
       clipped background cannot paint through inline-block
       children, so the words vanished instead of shimmering.

   The gradient has to live on the same element as the glyphs.
   Below it is off by default and applied on hover to the .wc
   spans, with the bare h3 covered too for reduced-motion, where
   the cascade never splits the text.
   ============================================================ */
.svc-head h3{background:none;-webkit-text-fill-color:currentColor}
.svc-head:hover h3,
.svc-head:hover h3 .wc{
  background:linear-gradient(110deg,#a6ccff 0%,#c9b8ff 26%,#ffb9da 50%,#a8ffd8 74%,#a6ccff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:iriflow 4.6s linear infinite}

/* The city row lost its horizontal gutter to a later padding:16px 0,
   so the places sat flush against the edge. */
.foot-clocks{padding:18px var(--pad-x)}
@media (max-width:700px){.foot-clocks{padding:16px var(--pad-x)}}

/* v230b — CMC hero film sits in the same box the hero still used */
.cmc-hero-film{margin:0;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.cmc-hero-film video{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}

/* ============================================================
   v231 — locked tiles can carry a film, not just a still
   Every .tile-locked rule so far targeted .tile-media img, so a
   video in a locked tile rendered sharp while the frost sat on
   top of it. The CMC tile is a film now, so the blur, the scale
   and the hover easing have to reach .tile-vid as well. Values
   match the current still treatment exactly.
   ============================================================ */
.tile-locked .tile-media .tile-vid{
  filter:blur(2.5px) saturate(.98) brightness(1);transform:scale(1.03)}
.tile-locked:hover .tile-media .tile-vid{
  filter:blur(1.5px) saturate(1.02) brightness(1.03);transform:scale(1.05)}

/* ============================================================
   v232 — header buttons: keep the label legible on hover
   .sb-btn:hover fills the pill with currentColor and flips the
   label back via .sb-btn:hover span. Two of the three buttons
   carried their label as a bare text node, so the rule missed
   them and the text ended up the same colour as the fill: a
   blank pill. The labels are wrapped now; this is the belt and
   braces so a future unwrapped label cannot disappear either.
   ============================================================ */
/* NOT color on the button itself: line 789 sets background:currentColor,
   which resolves against this element's own color, so setting both would
   make fill and label the same value again. The label spans do the work. */
.sb-btn:hover .sb-melo__dot{background:var(--sb-inv)}

/* ============================================================
   v233 — Genius Ghost hero: the italic was invisible
   ------------------------------------------------------------
   .gh-hero h1 em clipped a magenta-violet gradient to its text
   and set the fill transparent. .gh-hero h1 is in the cascade
   list, so its words are wrapped in inline-block .wc spans, and
   a parent's clipped background cannot paint through those. The
   result was transparent fill over no gradient: "your trades."
   rendered as nothing at all.

   Same remedy as the services rows. The gradient goes on the
   spans, with the bare em kept for reduced motion, where the
   cascade never splits the text.
   ============================================================ */
.gh-hero h1 em,
.gh-hero h1 em .wc{
  background:linear-gradient(100deg,var(--gh-mag),var(--gh-vio));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* The WhatsApp pill animates width and pinned itself to a compositor
   layer for the life of the page to do it. Same leak as the cascade
   words; the transition still runs without the hint. */
.wa-fab{will-change:auto}

/* ============================================================
   v235 — WCAG 2.5.8 target size (AA in 2.2, 24x24 minimum)
   The carousel and gallery dots are drawn at 8px. The dot stays
   8px visually; an invisible pseudo-element takes the hit area
   out to 24x24 so the control is operable without changing the
   design.
   ============================================================ */
.tstm2-dots .td,.ig-nav-dots button,.brief-dots button{position:relative}
.tstm2-dots .td::after,.ig-nav-dots button::after,.brief-dots button::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;border-radius:50%}

/* ============================================================
   v237 — Cartier, Panthère (speculative)
   Bone ground, near-black ink, and the one permitted colour as
   the accent so the em italics carry the same green the campaign
   allows itself three times.
   ============================================================ */
[data-case="cartier"]{--cx-ink:#12100e;--cx-stone:#e6e0d4;--cx-paper:#f4f0e6;--cx-tan:#2f6b45}
.cart-sign{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.2vw,30px);
  letter-spacing:.01em;text-transform:none;color:var(--cx-tan);text-align:center;margin-top:22px}
.cs-cap-c{text-align:center}

/* ============================================================
   v238 — AndMelo Casting board
   A contact-sheet grid: one lighting setup, one lens, one
   ground, so the only variable between cells is the person.
   Square cells keep the comparison honest.
   ============================================================ */
[data-case="casting"]{--cx-ink:#111110;--cx-stone:#e4e0d8;--cx-paper:#f2efe8;--cx-tan:#a08867}
.cast-board{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:var(--maxw);margin:0 auto}
.cast-board figure{margin:0}
.cast-board img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:6px;background:var(--paper-3)}
@media(max-width:1100px){.cast-board{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.cast-board{grid-template-columns:repeat(3,1fr);gap:8px}}
@media(max-width:460px){.cast-board{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   v239 — La Firma and Lacoste 99% Paper palettes
   ============================================================ */
[data-case="lafirma"]{--cx-ink:#14110e;--cx-stone:#ded7cc;--cx-paper:#f3efe8;--cx-tan:#a08a6a}
[data-case="lacpaper"]{--cx-ink:#10231a;--cx-stone:#cfe0cd;--cx-paper:#eff4ec;--cx-tan:#3f8f5a}

/* v240 — Loewe palette + a wide film block for the sector pages */
[data-case="loewe"]{--cx-ink:#17110b;--cx-stone:#e8ddcd;--cx-paper:#f5efe4;--cx-tan:#b98b4f}
.sec-film{margin:0;border-radius:var(--radius);overflow:hidden;max-width:var(--maxw)}
.sec-film video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* v241 — Lacoste key visual, full width
   The hero art column is half the grid, so widening the aspect there only
   makes it shorter. The key visual gets its own edge-to-edge band instead. */
.lac-bleed{margin:0;width:100%;overflow:hidden}
.lac-bleed img{width:100%;height:auto;display:block;aspect-ratio:21/9;object-fit:cover}
@media(max-width:760px){.lac-bleed img{aspect-ratio:16/9}}

/* ============================================================
   v242 — "Watch the film"
   The looping cuts have to be muted, so the full film gets an
   explicit control. Poster and button until clicked, then the
   native controls take over and the sound comes on.
   ============================================================ */
.film-full{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:#0a0a0a}
.film-full video{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.film-full.playing video{aspect-ratio:auto}
.film-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;
  color:#f4f3ef;transition:background .4s var(--ease)}
.film-full.playing .film-play{display:none}
.film-play:hover{background:rgba(10,10,10,.18)}
.film-play__i{width:64px;height:64px;border-radius:50%;border:1px solid rgba(244,243,239,.55);
  background:rgba(10,10,10,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;font-size:15px;padding-left:4px;
  transition:transform .45s var(--ease),background .4s var(--ease)}
.film-play:hover .film-play__i{transform:scale(1.07);background:rgba(10,10,10,.5)}
.film-play__t{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
@media(max-width:640px){.film-play__i{width:52px;height:52px}}
/* v242b — video inside the standard .cx-duo pairs */
.cx-duo figure > video{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
/* v244 — Arsenal, Raised in Red (speculative) */
[data-case="arsenal"]{--cx-ink:#12100f;--cx-stone:#e2d9d4;--cx-paper:#f3efec;--cx-tan:#9d2b2b}
/* v245 — La Firma hero film in the portrait hero slot */
.lf-hero-film{margin:0;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.lf-hero-film video{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}

/* v249 — the phone cut
   A vertical campaign film is made for a handset, so showing it at
   spread width is the wrong scale entirely. Constrained to roughly a
   phone and centred, which is also how anyone would actually see it. */
.film-full--phone{max-width:380px;margin-left:auto;margin-right:auto;border-radius:22px}
.film-full--phone video{aspect-ratio:9/16}
@media(max-width:520px){.film-full--phone{max-width:320px}}
/* v249b — Gh0st film keeps its own landscape ratio inside .film-full */
.gh-film-full video{aspect-ratio:16/9}
.gh-film-full.playing video{aspect-ratio:auto}
/* v252 — Thrivin wide studio band */
.thr-wide{margin:0 0 6px;width:100%;overflow:hidden;border-radius:var(--radius)}
.thr-wide img{width:100%;height:auto;display:block;aspect-ratio:21/9;object-fit:cover}
@media(max-width:760px){.thr-wide img{aspect-ratio:16/9}}

/* ============================================================
   v253 — Concept work
   The strand is labelled Concept rather than Spec on the grid.
   Spec reads to a client as work that did not sell; concept reads
   as work made deliberately, which is what it is. The note only
   appears when the strand is filtered, so it explains itself at
   the moment someone goes looking.
   ============================================================ */
.wf-note{flex-basis:100%;margin:14px 0 0;max-width:64ch;
  font-family:var(--display);font-weight:300;font-size:14px;line-height:1.6;color:var(--grey-2)}
@media(max-width:760px){.wf-note{font-size:13px}}

/* ============================================================
   v256 — Concept work index
   Each card carries a line on what the piece was testing, because
   the argument is the point of the strand, not the picture.
   ============================================================ */
.cw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;max-width:var(--maxw);margin:0 auto}
.cw-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.cw-card__media{position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:4/5;background:var(--paper-3)}
.cw-card__media .cw-med{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.03);transition:transform 1.2s var(--ease)}
.cw-card:hover .cw-card__media .cw-med{transform:scale(1.09)}
.cw-card__media .spec-badge{position:absolute;top:14px;right:14px;z-index:3;color:#f4f3ef;
  background:rgba(10,10,10,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(244,243,239,.28);border-radius:999px;padding:6px 11px}
.cw-card__t{font-family:var(--display);font-weight:300;font-size:21px;line-height:1.2;margin-top:18px}
.cw-card__k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-top:8px}
.cw-card__p{font-size:14px;line-height:1.62;color:var(--grey-2);margin-top:12px;max-width:44ch}
@media(max-width:1000px){.cw-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}}
@media(max-width:620px){.cw-grid{grid-template-columns:1fr}.cw-card__p{max-width:none}}

/* ============================================================
   v257 — The hotel
   ------------------------------------------------------------
   The parable's argument is that no single detail is the brand
   and that the feeling is the sum of them. The layout makes that
   happen rather than describing it:

     - the denials are small and quiet, so they read as asides
     - "But you know." lands alone at full scale
     - the seven details arrive as separate cells, each one
       trivial in isolation, which is the point being made
     - the empty-space line is given the empty space. A page that
       crammed that sentence would be arguing against itself
     - only after all seven have landed does the payoff resolve

   Dark ground throughout: the reader should feel they have walked
   into somewhere before they are told anything.
   ============================================================ */
.hot{background:var(--ink);color:#f2f0ea;padding:clamp(96px,14vh,160px) var(--pad-x) clamp(80px,10vh,120px)}
.hot__in{max-width:var(--maxw);margin:0 auto}
.hot__eyebrow{color:rgba(242,240,234,.55);margin-bottom:34px}
.hot__open{font-family:var(--display);font-weight:200;font-size:clamp(32px,4.6vw,68px);
  line-height:1.06;letter-spacing:-.035em;max-width:19ch;margin:0}
.hot__open em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}

.hot__deny{margin:clamp(40px,6vh,72px) 0 0;display:flex;flex-direction:column;gap:9px;max-width:46ch}
.hot__deny p{margin:0;font-family:var(--display);font-weight:300;font-size:15px;line-height:1.5;
  color:rgba(242,240,234,.5)}

.hot__know{font-family:var(--display);font-weight:200;font-size:clamp(40px,7vw,104px);
  line-height:1;letter-spacing:-.04em;margin:clamp(48px,7vh,86px) 0 0}
.hot__know em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}


.hot__resolve{max-width:var(--maxw);margin:clamp(64px,9vh,108px) auto 0}
.hot__line{margin:0 0 10px;font-family:var(--display);font-weight:300;font-size:clamp(15px,1.5vw,19px);
  color:rgba(242,240,234,.62)}
.hot__pay{font-family:var(--display);font-weight:200;font-size:clamp(30px,4.4vw,62px);
  line-height:1.08;letter-spacing:-.035em;margin:30px 0 0;max-width:20ch}
.hot__pay em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}

.founder-close{font-family:var(--display);font-weight:200;font-size:clamp(21px,2.4vw,31px);
  line-height:1.22;letter-spacing:-.02em;margin:34px 0 0}
.founder-close em{font-family:var(--serif);font-style:italic;font-weight:400}



/* ============================================================
   v258 — Mixed view, and it is the one you land on
   ------------------------------------------------------------
   Editorial gives every tile the same weight, which flattens the
   grid: the strongest piece reads no louder than the twentieth.
   Compact solves scale but loses the hero entirely. Mixed does
   what a magazine does. Three at full strength, then the rest at
   browse size, so the eye is led from one big statement down into
   the body of the work.
   ============================================================ */
.work-grid[data-view="mixed"]{grid-template-columns:repeat(4,1fr);gap:12px}

/* 01 takes the width */
.work-grid[data-view="mixed"] .tile:nth-child(1){grid-column:1/-1}
.work-grid[data-view="mixed"] .tile:nth-child(1) .tile-media{aspect-ratio:16/7}

/* 02 and 03 share the next line */
.work-grid[data-view="mixed"] .tile:nth-child(2),
.work-grid[data-view="mixed"] .tile:nth-child(3){grid-column:span 2}
.work-grid[data-view="mixed"] .tile:nth-child(2) .tile-media,
.work-grid[data-view="mixed"] .tile:nth-child(3) .tile-media{aspect-ratio:4/5}

/* everything after that browses at compact scale */
.work-grid[data-view="mixed"] .tile:nth-child(n+4){grid-column:span 1}
.work-grid[data-view="mixed"] .tile:nth-child(n+4) .tile-media{aspect-ratio:1/1}
.work-grid[data-view="mixed"] .tile:nth-child(n+4) .tile-cap{left:12px;right:12px;bottom:11px;gap:8px}
.work-grid[data-view="mixed"] .tile:nth-child(n+4) .tile-cap .t{font-size:13px;line-height:1.15}
.work-grid[data-view="mixed"] .tile:nth-child(n+4) .tile-cap .t em{font-size:.72em;margin-top:5px;line-height:1.3}
.work-grid[data-view="mixed"] .tile:nth-child(n+4) .tile-cap .yr{display:none}
.work-grid[data-view="mixed"] .tile:nth-child(n+4) .tile-idx{top:9px;left:10px;font-size:9.5px;padding:3px 7px}
.work-grid[data-view="mixed"] .tile:nth-child(n+4)::after{background:linear-gradient(to top,rgba(10,10,10,.8),transparent 62%)}

/* the switch icon: one wide bar, two halves, then a row of small */
.vsw-ico--mx{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;width:14px}
.vsw-ico--mx i{background:currentColor;border-radius:1px;height:2.5px}
.vsw-ico--mx i:nth-child(1){grid-column:1/-1}
.vsw-ico--mx i:nth-child(2),.vsw-ico--mx i:nth-child(3){grid-column:span 2}
.vsw-ico--mx i:nth-child(4),.vsw-ico--mx i:nth-child(5){grid-column:span 2}

@media(max-width:900px){
  .work-grid[data-view="mixed"]{grid-template-columns:repeat(2,1fr)}
  .work-grid[data-view="mixed"] .tile:nth-child(2),
  .work-grid[data-view="mixed"] .tile:nth-child(3){grid-column:span 1}
  .work-grid[data-view="mixed"] .tile:nth-child(n+4) .tile-media{aspect-ratio:1/1}
}
@media(max-width:560px){
  .work-grid[data-view="mixed"]{grid-template-columns:1fr}
  .work-grid[data-view="mixed"] .tile:nth-child(2),
  .work-grid[data-view="mixed"] .tile:nth-child(3){grid-column:1/-1}
}

/* ============================================================
   v259 — Talent Talks
   The three routes are the argument of the page, so they get a
   real comparison layout rather than a gallery: same structure,
   same order, side by side, so the trade-off between them is
   readable at a glance.
   ============================================================ */
[data-case="talenttalks"]{--cx-ink:#0d1421;--cx-stone:#dde3ec;--cx-paper:#f1f4f8;--cx-tan:#ff2e77}

.tt-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:var(--maxw);margin:0 auto}
.tt-route{display:flex;flex-direction:column}
.tt-route__n{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.tt-route__h{font-family:var(--display);font-weight:300;font-size:clamp(21px,2.1vw,27px);
  line-height:1.15;letter-spacing:-.02em;margin:10px 0 12px}
.tt-route__h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cx-tan)}
.tt-route > p{font-size:14px;line-height:1.62;color:var(--grey-2);margin:0 0 20px;max-width:42ch}
.tt-route figure{margin:0 0 10px;border-radius:var(--radius);overflow:hidden;background:var(--paper-3)}
.tt-route figure img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}

.tt-wide{margin:44px 0 0;border-radius:var(--radius);overflow:hidden}
.tt-wide img{width:100%;height:auto;display:block}

@media(max-width:1000px){.tt-routes{grid-template-columns:1fr;gap:44px}.tt-route > p{max-width:60ch}}
/* v260 — Talent Talks film embed */
.tt-film{position:relative;margin:44px 0 0;width:100%;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;background:#000}
.tt-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* v261 — routes: four frames each, in a tight two-up */
.tt-route__set{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tt-route__set figure{margin:0;border-radius:10px;overflow:hidden;background:var(--paper-3)}
.tt-route__set figure img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}

/* ============================================================
   v262 — The hotel, second pass
   The first version boxed each detail in a bordered cell, which
   read as a spec sheet: it made every item look like a feature
   being sold, when the whole argument is that individually they
   are nothing. Lines on air do that far better, and match the
   register of the rest of the site.
   ============================================================ */
.hot__list{list-style:none;margin:clamp(56px,8vh,96px) 0 0;padding:0;max-width:24ch}
.hot__list li{font-family:var(--display);font-weight:200;
  font-size:clamp(20px,2.5vw,34px);line-height:1.28;letter-spacing:-.02em;
  color:rgba(242,240,234,.9);padding:12px 0}
.hot__list li + li{border-top:1px solid rgba(242,240,234,.09)}
/* the last one is given what it describes */
.hot__list .hot__last{max-width:30ch;color:rgba(242,240,234,.72);
  padding-bottom:clamp(64px,10vh,132px)}
.hot__resolve{margin-top:0}
@media(max-width:640px){
  .hot__list{max-width:none}
  .hot__list li{font-size:19px;padding:11px 0}
}
/* the film now carries the definition */
.pfilm__def{font-family:var(--display);font-weight:200;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.pfilm__pron{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(244,243,239,.45);font-weight:400}
/* v264 — MBM: full-bleed system frames and captions */
.mb-bleed{margin:44px 0 0;border-radius:var(--radius);overflow:hidden;background:var(--paper-3)}
.mb-bleed img{width:100%;height:auto;display:block}
.mb-cap{margin:14px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grey);max-width:74ch}
/* v265 — SiteVisibility palette */
[data-case="sitevis"]{--cx-ink:#141414;--cx-stone:#e7e5e1;--cx-paper:#f5f4f1;--cx-tan:#f0364f}
/* v266 — JCS: palette and the four-page site row */
[data-case="jcs"]{--cx-ink:#111112;--cx-stone:#e3e1de;--cx-paper:#f3f2f0;--cx-tan:#e02b20}
.jcs-web{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:var(--maxw);margin:0 auto;align-items:start}
.jcs-web figure{margin:0}
.jcs-web img{width:100%;height:auto;display:block;border-radius:10px;background:var(--paper-3);
  max-height:520px;object-fit:cover;object-position:top}
.jcs-web figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey)}
@media(max-width:900px){.jcs-web{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.jcs-web{grid-template-columns:1fr}}

/* ── v267 ── Endersham applied-brand note ─────────────────────── */
.en-note{max-width:min(1400px,100%);margin:22px auto 0;padding:0;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.en-plate--navy .en-note{color:rgba(238,243,244,.5)}

/* ── v268 ── Khloé context films: phone-scale, autoplay ───────── */
.kk-context__films{max-width:520px;margin-left:0;gap:18px}
.kk-context__films video{border-radius:12px}
@media (max-width:760px){.kk-context__films{max-width:260px}}

/* ── v269 ── Artisan Coffee ───────────────────────────────────── */
[data-case="artisan"]{--en-teal:#e8a33d;--en-navy:#3a2f28;
  --ar-olive:#8d9a5b;--ar-gold:#e0b055;--ar-orange:#ef7622;--ar-cocoa:#4a3a30}
[data-case="artisan"] .en-hero__art img{width:100%;height:auto;display:block}

.ar-plate{padding:76px var(--pad-x);background:var(--paper-2)}
.ar-plate--pale{background:var(--paper)}
.ar-packs{display:grid;gap:16px;max-width:min(1400px,100%);margin:0 auto}
.ar-packs figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#f2f2f0}
.ar-packs img{width:100%;height:auto;display:block}

.ar-cast{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:36px auto 0;
  padding:0;list-style:none;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ar-cast li{background:var(--paper);padding:22px 22px 20px;display:flex;flex-direction:column;gap:5px}
.ar-cast b{font-size:9.5px;letter-spacing:.14em;color:var(--grey);font-weight:400}
.ar-cast .n{font-family:var(--serif);font-size:23px;line-height:1.1;letter-spacing:-.01em}
.ar-cast .c{font-size:13.5px;color:var(--grey);line-height:1.45}
.ar-cast .i{margin-top:6px;font-size:9.5px;letter-spacing:.12em;color:var(--ar-orange)}
@media(max-width:900px){.ar-cast{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ar-cast{grid-template-columns:1fr}}

.ar-note{max-width:min(1400px,100%);margin:24px auto 0;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grey)}

.ar-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.ar-lines figure{margin:0;border-radius:var(--radius);overflow:hidden}
.ar-lines img{width:100%;height:auto;display:block}
@media(max-width:760px){.ar-lines{grid-template-columns:1fr}}

.ar-grid{display:grid;gap:16px;max-width:min(1400px,100%);margin:0 auto}
.ar-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff}
.ar-grid img{width:100%;height:auto;display:block}

/* films: a triptych directly under the hero, autoplay, no controls */
.ar-filmband{background:var(--en-navy);padding:0 var(--pad-x) clamp(56px,7vw,88px)}
.ar-films{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);
  max-width:min(1600px,100%);margin:0 auto}
.ar-films figure{margin:0;min-width:0}
.ar-films video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border-radius:14px;background:rgba(255,255,255,.05)}
.ar-films figcaption{margin-top:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,240,234,.5)}
.ar-note--band{max-width:min(1600px,100%);color:rgba(242,240,234,.45);margin-top:30px}
@media(max-width:720px){.ar-films{grid-template-columns:1fr;gap:16px}}

.ar-founder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);
  align-items:center}
.ar-founder figure{margin:0;border-radius:var(--radius);overflow:hidden}
.ar-founder img{width:100%;height:auto;display:block}
.ar-founder p{font-size:15.5px;line-height:1.65;color:var(--grey);margin:0 0 15px}
.ar-founder .cs-lede{color:var(--ink);margin-bottom:20px}
@media(max-width:860px){.ar-founder{grid-template-columns:1fr}}

/* ── v270 ── About: the hotel, told at reading pace ────────────
   Smaller opening and payoff (they were competing with each
   other), the first resolve line in full white so the turn
   lands, and one detail per line so the list reads like a list
   rather than a paragraph. The stagger itself is in main.js:
   [data-story] walks its children at 320ms, which is slow
   enough to feel read rather than animated. */
.hot__open{font-size:clamp(26px,3.2vw,44px);max-width:26ch}
.hot__pay{font-size:clamp(24px,2.9vw,42px);max-width:24ch;margin-top:26px}
.hot__line--lead{color:#f2f0ea}

.hot__list li{white-space:nowrap}
.hot__list .hot__last{white-space:normal}
@media(max-width:640px){.hot__list li{white-space:normal}}

/* [data-story] children are held until their turn */
[data-story] > [data-reveal]{transition-duration:1.15s,1.25s}

/* concierge definition, expanded */
.pfilm__beats{color:var(--pearl)!important;opacity:.92}
.pfilm__sign{font-family:var(--display);font-weight:200;
  font-size:clamp(21px,2.3vw,32px);line-height:1.15;letter-spacing:-.03em;
  margin-top:22px!important}
.pfilm__sign em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--pearl)}

/* ── v275 ── Home v2: no grain over the film ───────────────────
   body::after lays a 3px dot grid over the whole viewport. On a
   still it reads as paper texture; over a 4K film it reads as a
   screen door, which is what it is. v2 turns it off and lifts
   the video out of the dimming a little, so the grade shows. */
body[data-home="v2"]::after{display:none}
body[data-home="v2"] .hero-word .cbanner-video{opacity:.74;filter:none}
body[data-home="v2"] .hero-word::after{
  background:linear-gradient(to bottom,rgba(0,0,0,.46) 0%,rgba(0,0,0,.10) 26%,rgba(0,0,0,.10) 54%,rgba(0,0,0,.76) 100%)}

/* ── v276 ── Mobile fixes: panels, marquee, overscroll, film ────
   Reported from a real phone, not the simulator. */

/* 1 · Cascade panels showed only the data-name label, because
   `.cpanel:not(.open) .cpanel-body{opacity:0}` (0,3,0) outranks the
   mobile rule `.cascade .cpanel-body{opacity:1}` (0,2,0) — a media
   query adds no specificity. Every panel now carries its full copy,
   so the big name overlay is redundant and would sit on top of it. */
@media (max-width:820px){
  .cascade .cpanel:not(.open) .cpanel-body{opacity:1;transform:none}
  .cascade .cpanel:not(.open)::before{display:none}
  .cascade .cpanel-body{
    background:linear-gradient(to top,rgba(10,10,10,.86) 0%,rgba(10,10,10,.62) 58%,transparent 100%);
    left:0;right:0;bottom:0;padding:60px 22px 24px}
  .cascade .cpanel-body h2{font-size:clamp(24px,7vw,34px);margin-bottom:9px}
  .cascade .cpanel-body p{display:block;max-width:none;font-size:13.5px;margin-bottom:14px}
  .cascade .cpanel{aspect-ratio:3/4}
}

/* 2 · "Featured in" jumped because the logos were lazy: each one that
   arrived changed the track width, and the -50% keyframe target moved
   with it. They are ~10KB PNGs — load them up front, promote the track
   to its own layer, and it stops fighting the compositor. */
.marquee-track{will-change:transform;transform:translateZ(0);backface-visibility:hidden}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}
.press-strip .marq-item img{max-height:42px;width:auto}
@media (max-width:720px){
  .marquee-track{animation-duration:38s}
  .press-strip .marq-item{min-width:150px;min-height:96px;padding:0 16px}
}

/* 3 · iOS reveals the html background when you pull past the top. It
   was flat white; give it the client-list iridescence so the overscroll
   is a brand moment rather than a gap. body keeps the paper colour, so
   only the rubber-band area shows it. */
html{background:linear-gradient(110deg,#a6ccff 0%,#c9b8ff 26%,#ffb9da 50%,#a8ffd8 74%,#a6ccff 100%)}
body{background:var(--paper)}
[data-theme="dark"] body{background:var(--paper)}

/* 4 · Lacoste: the film again at full size, under the setup */
.lc-film-full{margin:56px auto 0;max-width:min(1100px,100%)}
.lc-film-full video{aspect-ratio:16/9}
.lc-film-full figcaption{margin-top:12px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey)}
@media(max-width:640px){.lc-film-full video{aspect-ratio:4/5}}

/* ── v277 ── Triolette crop on mobile ──────────────────────────
   work-david-morris-triolette.jpg is 2000x921 — a 2.17:1 campaign
   still. Centre-cropped into the 3:4 mobile panel that lands on
   her hip. Her face sits at roughly 22% across, so pull the
   window left far enough to hold it. The other three panels are
   portrait or near-square and crop fine on centre. */
@media (max-width:820px){
  .cascade .cpanel[data-name="David Morris"] .cpanel-img{background-position:24% center}
}

/* ── v278 ── Early Generations ─────────────────────────────────
   The archive is the one page allowed to break the paper. It runs
   near-black with a machine register, because the material is a
   machine's output and pretending otherwise would be coy. Every
   colour is defined locally so nothing here leaks into the site. */
[data-page="archive"]{
  --ar-ink:#07070a; --ar-ink-2:#0d0e13; --ar-line:rgba(226,232,255,.13);
  --ar-txt:#e8eaf2; --ar-dim:rgba(232,234,242,.5); --ar-dim-2:rgba(232,234,242,.32);
  --ar-glow:#a6ccff;
  background:var(--ar-ink); color:var(--ar-txt)}
[data-page="archive"] .sitebar{color:var(--ar-txt);--sb-inv:var(--ar-ink)}
[data-page="archive"] .sitebar.solid{background:rgba(7,7,10,.82);border-bottom-color:var(--ar-line);
  color:var(--ar-txt);--sb-inv:var(--ar-ink)}
[data-page="archive"]::after{display:none}   /* no paper grain on black */

/* ---- hero ---- */
.ar-hero{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:150px var(--pad-x) 64px;overflow:hidden;background:var(--ar-ink)}
.ar-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--ar-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ar-line) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%)}
.ar-hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%}
.ar-flag{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ar-dim);margin:0 0 30px}
.ar-flag i{width:6px;height:6px;border-radius:50%;background:var(--ar-glow);
  animation:pulse 1.9s ease-in-out infinite}
.ar-title{font-family:var(--display);font-weight:200;font-size:clamp(52px,11vw,168px);
  line-height:.86;letter-spacing:-.055em;margin:0 0 30px}
.ar-title em{font-family:var(--serif);font-style:italic;font-weight:400;
  background:linear-gradient(110deg,#a6ccff,#c9b8ff 32%,#ffb9da 58%,#a8ffd8 82%,#a6ccff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:220% 100%;animation:iriflow 7s linear infinite}
.ar-lede{font-family:var(--display);font-weight:200;font-size:clamp(16px,1.75vw,25px);
  line-height:1.45;letter-spacing:-.018em;color:var(--ar-dim);max-width:52ch;margin:0}
.ar-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);margin-top:clamp(38px,5vw,62px);
  padding-top:26px;border-top:1px solid var(--ar-line)}
.ar-stats div{display:flex;flex-direction:column;gap:7px}
.ar-stats dt{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ar-dim-2)}
.ar-stats dd{margin:0;font-family:var(--display);font-weight:200;font-size:clamp(26px,3vw,44px);
  letter-spacing:-.03em;color:var(--ar-txt);font-variant-numeric:tabular-nums}
.ar-scroll{position:absolute;left:var(--pad-x);bottom:26px;z-index:2;display:flex;align-items:center;gap:12px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ar-dim-2)}
.ar-scroll .ln{width:56px;height:1px;background:var(--ar-line);position:relative;overflow:hidden}
.ar-scroll .ln::after{content:"";position:absolute;inset:0;width:40%;background:var(--ar-glow);
  animation:arSweep 2.4s var(--ease) infinite}
@keyframes arSweep{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ---- the standing note: this must be impossible to scroll past ---- */
.ar-note-sec{padding:0 var(--pad-x) clamp(56px,7vw,96px);background:var(--ar-ink)}
.ar-note{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:180px minmax(0,1fr);
  gap:clamp(20px,4vw,56px);padding:clamp(26px,3vw,40px);border:1px solid var(--ar-line);
  border-radius:var(--radius);background:var(--ar-ink-2)}
.ar-note__k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ar-glow);margin:0}
.ar-note__body p{margin:0 0 15px;font-size:14.5px;line-height:1.65;color:var(--ar-dim)}
.ar-note__body p:last-child{margin-bottom:0}
.ar-note__body strong{color:var(--ar-txt);font-weight:400}
@media(max-width:760px){.ar-note{grid-template-columns:1fr;gap:16px}}

/* ---- the bar ---- */
.ar-gal{padding:0 var(--pad-x) clamp(70px,9vw,120px);background:var(--ar-ink)}
.ar-bar{position:sticky;top:0;z-index:40;max-width:var(--maxw);margin:0 auto clamp(22px,3vw,34px);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 0;background:linear-gradient(to bottom,var(--ar-ink) 62%,transparent)}
.ar-filters{display:flex;gap:7px;flex-wrap:wrap}
.ar-f{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;border:1px solid var(--ar-line);background:transparent;
  color:var(--ar-dim);cursor:pointer;transition:.28s var(--ease);min-height:36px}
.ar-f b{font-weight:400;color:var(--ar-dim-2);margin-left:5px}
.ar-f:hover{color:var(--ar-txt);border-color:rgba(226,232,255,.32)}
.ar-f.on{background:var(--ar-txt);color:var(--ar-ink);border-color:var(--ar-txt)}
.ar-f.on b{color:rgba(7,7,10,.55)}
.ar-count{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ar-dim-2);margin:0}

/* ---- the mosaic ----
   CSS columns rather than grid: the pieces are every aspect ratio
   Midjourney will produce, and columns pack them with no gaps and
   no per-item maths. Order runs down each column, which is fine —
   this is an archive, not a sequence. */
.ar-mosaic{max-width:var(--maxw);margin:0 auto;column-count:4;column-gap:12px}
@media(max-width:1300px){.ar-mosaic{column-count:3}}
@media(max-width:860px){.ar-mosaic{column-count:2}}
@media(max-width:520px){.ar-mosaic{column-count:1}}

.ar-t{display:block;break-inside:avoid;margin:0 0 12px;position:relative;border-radius:10px;
  overflow:hidden;background:var(--ar-ink-2);text-decoration:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out) var(--d,0ms),transform .7s var(--ease-out) var(--d,0ms)}
.ar-mosaic.in .ar-t{opacity:1;transform:none}
.ar-t__media{display:block;position:relative;aspect-ratio:var(--ar,1)}
.ar-t img{width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.92) brightness(.88);transition:filter .5s var(--ease),transform .8s var(--ease)}
.ar-t:hover img,.ar-t:focus-visible img{filter:saturate(1.03) brightness(1);transform:scale(1.035)}
.ar-t::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--ar-line);transition:box-shadow .35s var(--ease)}
.ar-t:hover::after{box-shadow:inset 0 0 0 1px rgba(166,204,255,.45)}
.ar-t--sel::before{content:"Select";position:absolute;top:10px;left:10px;z-index:3;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ar-ink);background:var(--ar-glow);padding:4px 8px;border-radius:999px}
.ar-t__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(232,234,242,.6);
  background:rgba(7,7,10,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;
  padding-left:3px;transition:.35s var(--ease)}
.ar-t:hover .ar-t__play{transform:translate(-50%,-50%) scale(1.09);background:rgba(7,7,10,.62)}

/* the prompt is the point, so it rides on the tile rather than in a tooltip */
.ar-t__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 12px 11px;
  display:flex;flex-direction:column;gap:5px;
  background:linear-gradient(to top,rgba(7,7,10,.93) 0%,rgba(7,7,10,.6) 55%,transparent 100%);
  opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.ar-t:hover .ar-t__meta,.ar-t:focus-visible .ar-t__meta{opacity:1;transform:none}
.ar-t__n{font-size:8.5px;letter-spacing:.18em;color:var(--ar-glow)}
.ar-t__p{font-size:10.5px;line-height:1.5;color:var(--ar-txt);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* touch has no hover: show the prompt rather than hide it behind a state
   the device cannot reach */
@media(hover:none){.ar-t__meta{opacity:1;transform:none}}

.ar-end{max-width:var(--maxw);margin:clamp(34px,5vw,54px) auto 0;text-align:center;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ar-dim-2)}

/* ---- closing argument ---- */
.ar-close{padding:clamp(80px,10vw,140px) var(--pad-x);background:var(--ar-ink-2);
  border-top:1px solid var(--ar-line)}
.ar-close__in{max-width:var(--maxw);margin:0 auto}
.ar-close__h{font-family:var(--display);font-weight:200;font-size:clamp(30px,4.6vw,68px);
  line-height:1;letter-spacing:-.045em;margin:0 0 clamp(28px,4vw,48px);max-width:18ch}
.ar-close__h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ar-glow)}
.ar-close__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,4vw,64px);margin-bottom:38px}
.ar-close__cols p{margin:0;font-size:15px;line-height:1.68;color:var(--ar-dim)}
@media(max-width:760px){.ar-close__cols{grid-template-columns:1fr;gap:16px}}
.ar-close .link-arrow{color:var(--ar-txt)}

/* ---- viewer ---- */
body.ar-locked{overflow:hidden}
.ar-lb{position:fixed;inset:0;z-index:9000;background:rgba(4,4,7,.965);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,54px);
  animation:arLbIn .34s var(--ease-out) both}
.ar-lb[hidden]{display:none}
@keyframes arLbIn{from{opacity:0}to{opacity:1}}
.ar-lb__fig{margin:0;display:flex;flex-direction:column;gap:18px;max-width:min(1180px,100%);
  max-height:100%;align-items:center}
.ar-lb__stage{display:flex;align-items:center;justify-content:center;min-height:0;flex:1 1 auto}
.ar-lb__media{max-width:100%;max-height:min(70svh,900px);width:auto;height:auto;display:block;
  border-radius:8px;animation:arMediaIn .4s var(--ease-out) both}
@keyframes arMediaIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.ar-lb__cap{text-align:center;max-width:74ch}
.ar-lb__idx{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ar-dim-2);margin:0 0 10px}
.ar-lb__strand{color:var(--ar-glow)}
.ar-lb__prompt{font-size:13.5px;line-height:1.6;color:#e8eaf2;margin:0 0 12px;letter-spacing:.01em}
.ar-lb__foot{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ar-dim-2);margin:0}
.ar-lb__x,.ar-lb__nav{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--ar-line);background:rgba(7,7,10,.55);color:#e8eaf2;cursor:pointer;
  font-size:17px;line-height:1;transition:.28s var(--ease)}
.ar-lb__x:hover,.ar-lb__nav:hover{background:#e8eaf2;color:#07070a;border-color:#e8eaf2}
.ar-lb__x{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.ar-lb__nav--p{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.ar-lb__nav--n{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .ar-lb__nav{top:auto;bottom:18px;transform:none}
  .ar-lb__nav--p{left:26%}.ar-lb__nav--n{right:26%}
  .ar-lb__media{max-height:52svh}
  .ar-lb__cap{padding-bottom:64px}
}

/* ── v280 ── GENESIS v2, the museum cut ────────────────────────
   Same archive, opposite argument. v1 is a lab: black, dense, the
   prompt as a HUD readout over the image. v2 is a collection: bone
   paper, wide margins, two plates a row at most, and the prompt set
   below the work on a plaque where a gallery would put the label.
   Density says "look how much"; air says "look at this one". */
[data-gen="museum"]{
  --ar-ink:#f2f0ea; --ar-ink-2:#e9e6dd; --ar-line:rgba(20,18,14,.14);
  --ar-txt:#141210; --ar-dim:rgba(20,18,14,.62); --ar-dim-2:rgba(20,18,14,.42);
  --ar-glow:#6b6357}
[data-gen="museum"] .sitebar{color:var(--ar-txt);--sb-inv:var(--ar-ink)}
[data-gen="museum"] .sitebar.solid{background:rgba(242,240,234,.86);border-bottom-color:var(--ar-line)}

[data-gen="museum"] .ar-hero{min-height:76svh;padding-bottom:clamp(48px,6vw,80px)}
[data-gen="museum"] .ar-title{font-size:clamp(52px,9.5vw,150px);margin-bottom:16px}
[data-gen="museum"] .ar-title em{
  background:none;-webkit-text-fill-color:currentColor;animation:none;color:var(--ar-txt)}
[data-gen="museum"] .ar-sub{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ar-dim-2);margin:0 0 30px}
[data-gen="museum"] .ar-flag i{background:var(--ar-glow);animation:none}
[data-gen="museum"] .ar-scroll .ln::after{background:var(--ar-glow)}

[data-gen="museum"] .ar-note{background:transparent;border-color:var(--ar-line)}
[data-gen="museum"] .ar-note__k{color:var(--ar-dim-2)}
[data-gen="museum"] .ar-close{background:var(--ar-ink-2)}
[data-gen="museum"] .ar-close__h em{color:var(--ar-txt)}
[data-gen="museum"] .ar-f.on{background:var(--ar-txt);color:var(--ar-ink);border-color:var(--ar-txt)}
[data-gen="museum"] .ar-f.on b{color:rgba(242,240,234,.6)}

/* the hang: two a row, generous, never more */
[data-gen="museum"] .ar-mosaic{column-count:2;column-gap:clamp(26px,4vw,72px);
  max-width:min(1180px,100%)}
@media(max-width:820px){[data-gen="museum"] .ar-mosaic{column-count:1}}
[data-gen="museum"] .ar-t{margin-bottom:clamp(46px,6vw,92px);border-radius:0;background:transparent}
[data-gen="museum"] .ar-t__media{border-radius:0;box-shadow:0 22px 60px -30px rgba(20,18,14,.5)}
[data-gen="museum"] .ar-t img{border-radius:0;filter:none}
[data-gen="museum"] .ar-t:hover img{transform:none;filter:none}
[data-gen="museum"] .ar-t::after{display:none}
[data-gen="museum"] .ar-t--sel::before{top:auto;bottom:calc(100% + 14px);left:0;
  background:transparent;color:var(--ar-dim-2);padding:0;font-size:9px;letter-spacing:.2em}
[data-gen="museum"] .ar-t__play{border-color:rgba(242,240,234,.75);background:rgba(20,18,14,.35)}

/* the plaque: label below the work, always legible, never a hover state */
[data-gen="museum"] .ar-t__meta{position:static;opacity:1;transform:none;background:none;
  padding:16px 0 0;border-top:1px solid var(--ar-line);margin-top:16px;gap:8px}
[data-gen="museum"] .ar-t__n{color:var(--ar-dim-2);font-size:9px;letter-spacing:.2em}
[data-gen="museum"] .ar-t__p{color:var(--ar-txt);font-size:12px;line-height:1.6;
  -webkit-line-clamp:4;font-family:var(--display);font-weight:300;letter-spacing:0}

/* the viewer turns to paper too */
[data-gen="museum"] .ar-lb{background:rgba(242,240,234,.97)}
[data-gen="museum"] .ar-lb__media{border-radius:0;box-shadow:0 30px 80px -40px rgba(20,18,14,.55)}
[data-gen="museum"] .ar-lb__prompt{color:var(--ar-txt);font-family:var(--display);
  font-weight:300;font-size:15px;letter-spacing:0}
[data-gen="museum"] .ar-lb__strand{color:var(--ar-txt)}
[data-gen="museum"] .ar-lb__x,[data-gen="museum"] .ar-lb__nav{
  background:rgba(242,240,234,.7);color:var(--ar-txt);border-color:var(--ar-line)}
[data-gen="museum"] .ar-lb__x:hover,[data-gen="museum"] .ar-lb__nav:hover{
  background:var(--ar-txt);color:var(--ar-ink);border-color:var(--ar-txt)}

/* ── v281 ── GENESIS · the field ───────────────────────────────
   A 3D volume you fly through. Nothing here is shared with the
   rest of the site — the archive was never meant to feel like a
   page of it. */
[data-page="genesis"]{background:#050507;color:#eef0f6;overflow:hidden}
[data-page="genesis"]::after{display:none}
[data-page="genesis"] .sitebar,[data-page="genesis"] .foot,
[data-page="genesis"] .peel,[data-page="genesis"] .backtop,
[data-page="genesis"] .wa-fab{display:none}
body.gn-locked{overflow:hidden}

.gf-stage{position:fixed;inset:0;z-index:1;perspective:1100px;perspective-origin:50% 50%;
  cursor:grab;touch-action:none;
  background:
    radial-gradient(120% 80% at 50% 40%,rgba(120,140,255,.09),transparent 62%),
    radial-gradient(90% 70% at 78% 78%,rgba(255,150,200,.06),transparent 58%),
    #050507}
.gf-stage.grabbing{cursor:grabbing}
.gf-space{position:absolute;top:50%;left:50%;transform-style:preserve-3d;will-change:transform}

.gf-p{position:absolute;top:0;left:0;margin:0;padding:0;border:0;background:none;cursor:pointer;
  width:150px;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
.gf-p > img,.gf-p > video{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1);
  object-fit:cover;border-radius:9px;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(238,240,246,.09);
  transition:box-shadow .4s ease,filter .4s ease;filter:saturate(.96)}
.gf-p:hover > img,.gf-p:hover > video,.gf-p:focus-visible > img,.gf-p:focus-visible > video{
  box-shadow:0 30px 90px -20px rgba(0,0,0,.95),0 0 0 1px rgba(166,204,255,.7);filter:saturate(1.06)}
.gf-p--sel > img{box-shadow:0 24px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(166,204,255,.42)}

/* depth haze — pieces far down the volume sit back rather than
   competing with the ones in front */
.gf-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(130% 100% at 50% 50%,transparent 48%,rgba(5,5,7,.18) 78%,rgba(5,5,7,.72) 100%)}

/* ---- intro ---- */
.gf-intro{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:var(--pad-x);background:rgba(5,5,7,.72);backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);transition:opacity .8s var(--ease),visibility .8s}
body.gf-flying .gf-intro{opacity:0;visibility:hidden;pointer-events:none}
.gf-intro__in{max-width:640px;text-align:center}
.gf-k{display:inline-flex;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(238,240,246,.5);margin:0 0 26px}
.gf-k i{width:6px;height:6px;border-radius:50%;background:#a6ccff;animation:pulse 1.9s ease-in-out infinite}
.gf-title{font-family:var(--display);font-weight:200;font-size:clamp(58px,12vw,150px);
  line-height:.86;letter-spacing:-.055em;margin:0 0 24px}
.gf-title em{font-family:var(--serif);font-style:italic;font-weight:400;
  background:linear-gradient(110deg,#a6ccff,#c9b8ff 32%,#ffb9da 58%,#a8ffd8 82%,#a6ccff);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:iriflow 7s linear infinite}
.gf-lede{font-family:var(--display);font-weight:200;font-size:clamp(15px,1.55vw,20px);
  line-height:1.5;color:rgba(238,240,246,.62);margin:0 auto 34px;max-width:46ch}
.gf-enter{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;padding:16px 28px;border-radius:999px;
  border:1px solid rgba(238,240,246,.3);background:transparent;color:#eef0f6;cursor:pointer;
  transition:.32s var(--ease)}
.gf-enter:hover{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gf-enter .a{transition:transform .32s var(--ease)}
.gf-enter:hover .a{transform:translateX(4px)}
.gf-help{margin:26px 0 0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(238,240,246,.33)}

/* ---- hud ---- */
.gf-hud{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:0 var(--pad-x) 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease) .5s}
body.gf-flying .gf-hud{opacity:1}
.gf-hud__l,.gf-hud__r{margin:0;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(238,240,246,.46)}
.gf-hud__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(238,240,246,.1)}
.gf-hud__bar span{display:block;height:100%;background:#a6ccff;transform:scaleX(0);
  transform-origin:0 50%;transition:transform .18s linear}
.gf-note-t{position:fixed;top:22px;right:var(--pad-x);z-index:16;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(238,240,246,.46);opacity:0;transition:opacity .8s var(--ease) .5s}
body.gf-flying .gf-note-t{opacity:1}
.gf-note-t:hover{color:#eef0f6}

/* ---- the note lives below the field ---- */
.gn-note-sec{position:relative;z-index:12;margin-top:100svh;padding:clamp(64px,9vw,120px) var(--pad-x);
  background:#050507;border-top:1px solid rgba(238,240,246,.12)}
[data-page="genesis"]{overflow-y:auto}
.gn-note{max-width:960px;margin:0 auto;display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:clamp(18px,4vw,48px)}
.gn-note__k{margin:0;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:#a6ccff}
.gn-note__body p{margin:0 0 15px;font-size:14.5px;line-height:1.7;color:rgba(238,240,246,.58)}
.gn-note__body strong{color:#eef0f6;font-weight:400}
.gn-ed{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#050507;background:#a6ccff;padding:3px 7px;border-radius:999px;
  vertical-align:middle}
@media(max-width:700px){.gn-note{grid-template-columns:1fr;gap:14px}}

/* ---- viewer ---- */
.gn-lb{position:fixed;inset:0;z-index:9000;background:rgba(3,3,5,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,54px);animation:arLbIn .32s var(--ease-out) both}
.gn-lb[hidden]{display:none}
.gn-lb__fig{margin:0;display:flex;flex-direction:column;gap:18px;align-items:center;max-height:100%}
.gn-lb__stage{display:flex;align-items:center;justify-content:center;min-height:0}
.gn-lb__media{max-width:100%;max-height:min(70svh,880px);width:auto;display:block;border-radius:8px;
  animation:arMediaIn .38s var(--ease-out) both}
.gn-lb__cap{text-align:center;max-width:72ch}
.gn-lb__n{margin:0 0 10px;font-size:9.5px;letter-spacing:.2em;color:rgba(238,240,246,.42)}
.gn-lb__pr{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:#eef0f6}
.gn-lb__f{margin:0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(238,240,246,.34);display:flex;align-items:center;gap:9px;justify-content:center}
.gn-lb__x,.gn-lb__nav{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(238,240,246,.22);background:rgba(5,5,7,.6);color:#eef0f6;cursor:pointer;
  font-size:17px;transition:.28s var(--ease)}
.gn-lb__x:hover,.gn-lb__nav:hover{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gn-lb__x{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.gn-lb__nav--p{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.gn-lb__nav--n{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .gf-p{width:104px}
  .gn-lb__nav{top:auto;bottom:18px;transform:none}
  .gn-lb__nav--p{left:26%}.gn-lb__nav--n{right:26%}
  .gn-lb__media{max-height:54svh}.gn-lb__cap{padding-bottom:62px}
}
@media(prefers-reduced-motion:reduce){
  .gf-space{transition:none}
  .gf-title em{animation:none;-webkit-text-fill-color:#c9b8ff}
}

/* ── v282 ── GENESIS · the corridor ────────────────────────────
   Version two: the same archive as a tunnel the scroll flies you
   down, with the panels turned inward like doors along a passage.
   Type is Instrument Serif at plate scale, black ground, nothing
   else on screen. */
[data-gn="corridor"]{overflow-x:hidden;overflow-y:auto;background:#000}
.gc-stage{position:fixed;inset:0;z-index:1;perspective:1000px;perspective-origin:50% 50%;
  pointer-events:none;background:#000}
.gc-space{position:absolute;top:50%;left:50%;transform-style:preserve-3d;will-change:transform}
.gc-spacer{position:relative;z-index:0;pointer-events:none}

.gc-p{position:absolute;top:0;left:0;width:300px;margin:0;padding:0;border:0;background:none;
  cursor:pointer;pointer-events:auto;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
.gc-p > img,.gc-p > video{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1);
  object-fit:cover;border-radius:2px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .4s ease}
.gc-p:hover > img,.gc-p:hover > video{box-shadow:0 40px 110px -20px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.42)}
.gc-p__c{position:absolute;left:0;bottom:-24px;font-size:8.5px;letter-spacing:.2em;
  color:rgba(255,255,255,.34)}
.gc-p--sel > img{box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.3)}

/* the vanishing point stays black so the corridor has an end */
.gc-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 34%,transparent 62%)}

/* ---- plates ---- */
.gc-plates{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  pointer-events:none;padding:var(--pad-x)}
.gc-plate{position:absolute;text-align:center;opacity:0;transition:opacity .45s var(--ease);
  max-width:22ch;mix-blend-mode:difference}
.gc-plate h1,.gc-plate h2{font-family:var(--serif);font-weight:400;font-style:normal;
  font-size:clamp(44px,8vw,116px);line-height:.95;letter-spacing:-.03em;margin:0 0 16px;color:#fff}
.gc-plate em{font-style:italic}
.gc-plate p{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---- hud ---- */
.gc-hud{position:fixed;left:0;right:0;bottom:0;z-index:12;padding:0 var(--pad-x) 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none}
.gc-hud__l,.gc-hud__r{margin:0;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42)}
.gc-hud__bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.12)}
.gc-hud__bar span{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.gc-cue{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:12;margin:0;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);
  animation:gcCue 2.6s ease-in-out infinite}
@keyframes gcCue{0%,100%{opacity:.28;transform:translate(-50%,0)}50%{opacity:.8;transform:translate(-50%,5px)}}

[data-gn="corridor"] .gn-note-sec{position:relative;z-index:12;margin-top:0;background:#000;
  border-top:1px solid rgba(255,255,255,.12)}

@media(max-width:760px){
  .gc-p{width:190px}
  .gc-plate h1,.gc-plate h2{font-size:clamp(32px,10vw,58px)}
}
@media(prefers-reduced-motion:reduce){.gc-cue{animation:none}}

/* ── v283 ── Health & Aesthetics site shot ─────────────────────
   site-design.jpg is 692px wide. It was filling a ~1350px column,
   so the browser was inventing four pixels for every real one and
   the whole panel read as out of focus. Capped near native width
   and centred, so it is sharp and looks deliberate. A larger
   capture would let this go full width again. */
.ha-site{max-width:760px;margin-left:auto;margin-right:auto}

/* ── v284 ── Audit intake form ─────────────────────────────────
   The only thing the client has to do after paying, so it is one
   page, grouped by question rather than paginated. */
.ai-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;max-width:900px}
.ai-sec{grid-column:1/-1;margin:22px 0 0;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);padding-top:20px;border-top:1px solid var(--line)}
.ai-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
.ai-form .fl{display:flex;flex-direction:column;gap:8px}
.ai-form .fl--wide{grid-column:1/-1}
.ai-form .fl span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey)}
.ai-form input,.ai-form textarea{font-family:inherit;font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;
  border-radius:0;transition:border-color .3s var(--ease);min-height:44px;resize:vertical}
.ai-form input:focus,.ai-form textarea:focus{outline:none;border-bottom-color:var(--ink)}
@media(max-width:700px){.ai-form{grid-template-columns:1fr}}

/* ── v285 ── GENESIS · one page, three views ───────────────────
   field / corridor / library. Everything is scoped to
   [data-page="genesis"] so none of it can reach the rest of the
   site, and the view is switched by a body attribute rather than
   by rebuilding the DOM — the same 208 nodes move between
   layouts, so films keep their decoded frames. */
[data-page="genesis"]{background:#050507;color:#eef0f6}
[data-page="genesis"]::after{display:none}
[data-page="genesis"] .sitebar,[data-page="genesis"] .foot,
[data-page="genesis"] .peel,[data-page="genesis"] .backtop,
[data-page="genesis"] .wa-fab{display:none}
body.gn-locked{overflow:hidden}
body[data-view="field"]{overflow:hidden}
body[data-view="corridor"],body[data-view="grid"]{overflow-x:hidden;overflow-y:auto}

.gn-stage{position:fixed;inset:0;z-index:1;perspective:1100px;perspective-origin:50% 50%;
  cursor:grab;touch-action:none;
  background:radial-gradient(120% 80% at 50% 40%,rgba(120,140,255,.09),transparent 62%),
             radial-gradient(90% 70% at 78% 78%,rgba(255,150,200,.06),transparent 58%),#050507}
.gn-stage.grabbing{cursor:grabbing}
.gn-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(130% 100% at 50% 50%,transparent 48%,rgba(5,5,7,.18) 78%,rgba(5,5,7,.72) 100%)}
.gn-space{position:absolute;top:50%;left:50%;transform-style:preserve-3d;will-change:transform}
body[data-view="grid"] .gn-stage,body[data-view="grid"] .gn-plates{display:none}
body[data-view="corridor"] .gn-stage{perspective:1000px;cursor:default}
body[data-view="corridor"] .gn-stage::after{
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 34%,transparent 62%)}
/* The tunnel-mouth vignette is sized for a desktop, where the pieces pass
   at 300–600px and the dark core sits in empty space between them. On a
   402px phone that same core covers the whole column the pieces travel
   down, and it was painting 92% black straight over them — the pieces
   were being drawn correctly and then hidden. Mobile gets a core small
   and soft enough to read as depth without eating the work. */
@media (max-width:1099px){
  body[data-view="corridor"] .gn-stage::after{
    background:radial-gradient(34% 20% at 50% 50%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.26) 44%,transparent 76%)}
}
body[data-view="field"] .gn-plates{display:none}

.gn-p{position:absolute;top:0;left:0;width:150px;margin:0;padding:0;border:0;background:none;
  cursor:grab;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
body[data-view="corridor"] .gn-p{width:300px;cursor:pointer}
.gn-p > img,.gn-p > video{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1);object-fit:cover;
  border-radius:9px;box-shadow:0 24px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(238,240,246,.09);
  transition:box-shadow .4s ease,filter .4s ease;filter:saturate(.96);pointer-events:none}
.gn-p:hover > img,.gn-p:hover > video{box-shadow:0 30px 90px -20px rgba(0,0,0,.95),0 0 0 1px rgba(166,204,255,.7);
  filter:saturate(1.06)}
.gn-p--sel > img{box-shadow:0 24px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(166,204,255,.42)}
.gn-p--held{cursor:grabbing;z-index:50}
.gn-p--held > img,.gn-p--held > video{box-shadow:0 40px 110px -14px rgba(0,0,0,1),0 0 0 2px rgba(166,204,255,.95)}
.gn-p__n{position:absolute;left:2px;bottom:-19px;font-size:8px;letter-spacing:.18em;
  color:rgba(238,240,246,.3);opacity:0;transition:opacity .3s}
.gn-p:hover .gn-p__n{opacity:1}
body[data-view="corridor"] .gn-p__n{opacity:.34;bottom:-24px}

/* ---- library ---- */
.gn-grid{display:none;position:relative;z-index:6;grid-template-columns:repeat(8,1fr);
  gap:6px;padding:96px var(--pad-x) 90px;background:#050507}
body[data-view="grid"] .gn-grid{display:grid}
.gn-g{position:relative;margin:0;padding:0;border:0;background:#0d0e13;cursor:pointer;
  aspect-ratio:1;overflow:hidden;border-radius:4px;-webkit-tap-highlight-color:transparent}
.gn-g img,.gn-g video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) brightness(.9);transition:filter .35s ease,transform .6s var(--ease)}
.gn-g:hover img,.gn-g:hover video{filter:saturate(1.05) brightness(1);transform:scale(1.06)}
.gn-g::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(238,240,246,.07);
  border-radius:4px;transition:box-shadow .3s}
.gn-g:hover::after{box-shadow:inset 0 0 0 1px rgba(166,204,255,.55)}
.gn-g--sel::before{content:"";position:absolute;top:6px;left:6px;z-index:3;width:5px;height:5px;
  border-radius:50%;background:#a6ccff}
.gn-g__n{position:absolute;right:6px;bottom:5px;z-index:3;font-size:7.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.6);opacity:0;transition:opacity .3s}
.gn-g:hover .gn-g__n{opacity:1}
@media(max-width:1200px){.gn-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:820px){.gn-grid{grid-template-columns:repeat(4,1fr);padding-top:88px}}
@media(max-width:520px){.gn-grid{grid-template-columns:repeat(3,1fr)}}

.gn-spacer{position:relative;z-index:0;pointer-events:none}

/* ---- plates (corridor only) ---- */
.gn-plates{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  pointer-events:none;padding:var(--pad-x)}
.gn-plate{position:absolute;text-align:center;opacity:0;transition:opacity .45s var(--ease);
  max-width:22ch;mix-blend-mode:difference}
.gn-plate h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7.5vw,108px);
  line-height:.95;letter-spacing:-.03em;margin:0 0 16px;color:#fff}
.gn-plate em{font-style:italic}
.gn-plate p{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---- intro ---- */
.gn-intro{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:var(--pad-x);background:rgba(5,5,7,.74);backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);transition:opacity .8s var(--ease),visibility .8s}
body.gn-in .gn-intro{opacity:0;visibility:hidden;pointer-events:none}
.gn-intro__in{max-width:640px;text-align:center}
.gn-k{display:inline-flex;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(238,240,246,.5);margin:0 0 26px}
.gn-k i{width:6px;height:6px;border-radius:50%;background:#a6ccff;animation:pulse 1.9s ease-in-out infinite}
.gn-title{font-family:var(--display);font-weight:200;font-size:clamp(58px,12vw,150px);
  line-height:.86;letter-spacing:-.055em;margin:0 0 24px}
.gn-title em{font-family:var(--serif);font-style:italic;font-weight:400;
  background:linear-gradient(110deg,#a6ccff,#c9b8ff 32%,#ffb9da 58%,#a8ffd8 82%,#a6ccff);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:iriflow 7s linear infinite}
.gn-lede{font-family:var(--display);font-weight:200;font-size:clamp(15px,1.55vw,20px);line-height:1.5;
  color:rgba(238,240,246,.62);margin:0 auto 34px;max-width:46ch}
.gn-enter{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;padding:16px 30px;border-radius:999px;
  border:1px solid rgba(238,240,246,.3);background:transparent;color:#eef0f6;cursor:pointer;
  transition:.32s var(--ease)}
.gn-enter:hover{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gn-help{margin:26px 0 0;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(238,240,246,.33)}

/* ---- tabs ---- */
.gn-tabs{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;gap:3px;
  padding:4px;border-radius:999px;background:rgba(13,14,19,.72);border:1px solid rgba(238,240,246,.12);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transition:opacity .7s var(--ease) .35s}
body.gn-in .gn-tabs{opacity:1}
.gn-tab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 17px;border-radius:999px;border:0;background:transparent;color:rgba(238,240,246,.55);
  cursor:pointer;transition:.26s var(--ease);min-height:36px}
.gn-tab:hover{color:#eef0f6}
.gn-tab.on{background:#eef0f6;color:#050507}

/* ---- hud ---- */
.gn-hud{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:0 var(--pad-x) 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease) .5s}
body.gn-in .gn-hud{opacity:1}
body[data-view="grid"] .gn-hud__r,body[data-view="grid"] .gn-hud__bar{opacity:0}
.gn-hud__l,.gn-hud__r{margin:0;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(238,240,246,.46)}
.gn-hud__c{pointer-events:auto}
body:not([data-view="field"]) .gn-hud__c{opacity:0;pointer-events:none}
.gn-reset{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(238,240,246,.18);background:transparent;
  color:rgba(238,240,246,.5);cursor:pointer;transition:.26s var(--ease);min-height:32px}
.gn-reset:hover{color:#eef0f6;border-color:rgba(238,240,246,.45)}
.gn-hud__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(238,240,246,.1)}
.gn-hud__bar span{display:block;height:100%;background:#a6ccff;transform:scaleX(0);transform-origin:0 50%}
.gn-note-t{position:fixed;top:26px;right:var(--pad-x);z-index:22;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(238,240,246,.46);opacity:0;transition:opacity .8s var(--ease) .5s}
body.gn-in .gn-note-t{opacity:1}
.gn-note-t:hover{color:#eef0f6}

/* ---- note ---- */
.gn-note-sec{position:relative;z-index:12;padding:clamp(64px,9vw,120px) var(--pad-x);background:#050507;
  border-top:1px solid rgba(238,240,246,.12)}
body[data-view="field"] .gn-note-sec{margin-top:100svh}
.gn-note{max-width:960px;margin:0 auto;display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:clamp(18px,4vw,48px)}
.gn-note__k{margin:0;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:#a6ccff}
.gn-note__body p{margin:0 0 15px;font-size:14.5px;line-height:1.7;color:rgba(238,240,246,.58)}
.gn-note__body strong{color:#eef0f6;font-weight:400}
.gn-ed{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#050507;background:#a6ccff;padding:3px 7px;border-radius:999px;
  vertical-align:middle}
@media(max-width:700px){.gn-note{grid-template-columns:1fr;gap:14px}}

/* ---- viewer ---- */
.gn-lb{position:fixed;inset:0;z-index:9000;background:rgba(3,3,5,.97);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);animation:arLbIn .32s var(--ease-out) both}
.gn-lb[hidden]{display:none}
.gn-lb__fig{margin:0;display:flex;flex-direction:column;gap:18px;align-items:center;max-height:100%}
.gn-lb__stage{display:flex;align-items:center;justify-content:center;min-height:0}
.gn-lb__media{max-width:100%;max-height:min(72svh,900px);width:auto;display:block;border-radius:8px;
  animation:arMediaIn .38s var(--ease-out) both}
.gn-lb__cap{text-align:center;max-width:72ch}
.gn-lb__n{margin:0 0 10px;font-size:9.5px;letter-spacing:.2em;color:rgba(238,240,246,.42)}
.gn-lb__pr{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:#eef0f6}
.gn-lb__f{margin:0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(238,240,246,.34);display:flex;align-items:center;gap:9px;justify-content:center}
.gn-lb__x,.gn-lb__nav{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(238,240,246,.22);background:rgba(5,5,7,.6);color:#eef0f6;cursor:pointer;
  font-size:17px;transition:.28s var(--ease)}
.gn-lb__x:hover,.gn-lb__nav:hover{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gn-lb__x{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.gn-lb__nav--p{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.gn-lb__nav--n{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .gn-p{width:104px}
  body[data-view="corridor"] .gn-p{width:190px}
  .gn-tabs{top:14px}.gn-tab{padding:8px 13px}
  .gn-lb__nav{top:auto;bottom:18px;transform:none}
  .gn-lb__nav--p{left:26%}.gn-lb__nav--n{right:26%}
  .gn-lb__media{max-height:54svh}.gn-lb__cap{padding-bottom:62px}
}

/* ── v289 ── GENESIS · instructions, categories, letter ────────
   Everything the reader needs on screen, because a control nobody
   can see is a control that does not exist. */
.gn-sign{margin:18px 0 0;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(238,240,246,.42)}

/* how to move around — bottom left, always up */
.gn-keys{position:fixed;left:var(--pad-x);bottom:58px;z-index:20;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:6px;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease) .6s}
body.gn-in .gn-keys{opacity:1}
.gn-keys li{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:rgba(238,240,246,.34)}
.gn-keys b{font-weight:400;color:rgba(238,240,246,.68)}
@media(max-width:900px){.gn-keys{display:none}}

/* categories — a rail down the right, out of the way of the work */
.gn-cats{position:fixed;right:var(--pad-x);top:50%;transform:translateY(-50%);z-index:22;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end;
  opacity:0;transition:opacity .8s var(--ease) .55s}
body.gn-in .gn-cats{opacity:1}
.gn-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(238,240,246,.13);
  background:rgba(13,14,19,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(238,240,246,.5);cursor:pointer;transition:.24s var(--ease);min-height:34px;white-space:nowrap}
.gn-cat:hover{color:#eef0f6;border-color:rgba(238,240,246,.36)}
.gn-cat.on{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gn-cat--pick{border-color:rgba(166,204,255,.4);color:rgba(166,204,255,.9)}
.gn-cat--pick.on{background:#a6ccff;color:#050507;border-color:#a6ccff}
@media(max-width:900px){
  .gn-cats{top:auto;bottom:56px;left:0;right:0;transform:none;flex-direction:row;align-items:center;
    overflow-x:auto;padding:0 var(--pad-x);scrollbar-width:none}
  .gn-cats::-webkit-scrollbar{display:none}
}

/* filtered-out pieces recede rather than vanish, so the volume keeps
   its shape and nothing jumps */
.gn-dim{opacity:.06;pointer-events:none;transition:opacity .5s var(--ease)}
.gn-p{transition:opacity .5s var(--ease)}
.gn-off{display:none}

/* Melo's picks run larger in the library — uneven on purpose */
.gn-g--pick{grid-column:span 2;grid-row:span 2}
.gn-g__pick{position:absolute;top:8px;left:8px;z-index:3;font-size:7.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#050507;background:#a6ccff;padding:4px 8px;border-radius:999px}
@media(max-width:520px){.gn-g--pick{grid-column:span 2;grid-row:span 2}}

/* ---- the letter ---- */
.gn-letter{max-width:720px;margin:0 auto}
.gn-letter__k{margin:0 0 34px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#a6ccff}
.gn-letter__body p{margin:0 0 20px;font-size:16px;line-height:1.75;color:rgba(238,240,246,.66)}
.gn-letter__body strong{color:#eef0f6;font-weight:400}
.gn-letter__body a{color:#a6ccff;border-bottom:1px solid rgba(166,204,255,.4)}
.gn-letter__lead{font-family:var(--display);font-weight:200;font-size:clamp(22px,2.6vw,34px)!important;
  line-height:1.3!important;letter-spacing:-.02em;color:#eef0f6!important;margin-bottom:30px!important}
.gn-letter__beat{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,30px)!important;
  line-height:1.35!important;color:#eef0f6!important;margin:34px 0!important}
.gn-letter__sign{font-family:var(--serif);font-style:italic;font-size:24px!important;
  color:#eef0f6!important;margin-top:40px!important}

/* ── v290 ── keep the chrome off the work ──────────────────────
   The category rail is fixed to the right edge; the library runs
   full-bleed underneath it. Give the grid a gutter so the rail
   never sits on top of an image. The movement keys describe the
   3D views, so they go when the library is up. */
body[data-view="grid"] .gn-grid{padding-right:calc(var(--pad-x) + 128px)}
body[data-view="grid"] .gn-keys{display:none}
body[data-view="corridor"] .gn-keys li:nth-child(3){display:none}
@media(max-width:900px){
  body[data-view="grid"] .gn-grid{padding-right:var(--pad-x);padding-bottom:112px}
}

/* ── v291 ── GENESIS · gather, pulse, theme, way out ───────────
   The rearrangement transition is only live while a layout change
   is in flight — left on permanently every drag would trail the
   cursor by a third of a second. */
body.gn-anim .gn-p{transition:transform 1.05s cubic-bezier(.22,1,.32,1),opacity .5s var(--ease)}

.gn-orb,.gn-pulse,.gn-reset{font-family:var(--mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(238,240,246,.18);background:transparent;color:rgba(238,240,246,.5);
  cursor:pointer;transition:.26s var(--ease);min-height:32px}
.gn-orb:hover,.gn-pulse:hover,.gn-reset:hover{color:#eef0f6;border-color:rgba(238,240,246,.45)}
.gn-orb.on{background:#a6ccff;color:#050507;border-color:#a6ccff}
.gn-hud__c{display:flex;gap:6px}

/* return to the site — the archive is a room off the main building,
   and there has to be a door back */
.gn-home{position:fixed;top:22px;left:var(--pad-x);z-index:26;display:flex;align-items:center;gap:12px;
  opacity:0;transition:opacity .8s var(--ease) .5s}
body.gn-in .gn-home{opacity:1}
.gn-home__mark{width:62px;height:30px;background:#eef0f6;
  -webkit-mask:url(assets/andmelo-wordmark.png) no-repeat left center;-webkit-mask-size:contain;
  mask:url(assets/andmelo-wordmark.png) no-repeat left center;mask-size:contain}
.gn-home__t{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(238,240,246,.42);
  padding:7px 13px;border-radius:999px;border:1px solid rgba(238,240,246,.16);transition:.26s var(--ease)}
.gn-home:hover .gn-home__t{color:#050507;background:#eef0f6;border-color:#eef0f6}
@media(max-width:820px){.gn-home__t{display:none}}

.gn-theme{position:fixed;top:22px;right:var(--pad-x);z-index:26;display:flex;align-items:center;gap:8px;
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(238,240,246,.16);background:rgba(13,14,19,.6);color:rgba(238,240,246,.5);
  cursor:pointer;transition:.26s var(--ease);min-height:34px;
  opacity:0;transition:opacity .8s var(--ease) .5s,color .26s,background .26s,border-color .26s}
body.gn-in .gn-theme{opacity:1}
.gn-theme:hover{color:#eef0f6;border-color:rgba(238,240,246,.42)}
.gn-theme__d{width:7px;height:7px;border-radius:50%;background:currentColor}
.gn-note-t{top:64px}

/* way out of the letter */
.gn-back{position:sticky;top:22px;float:right;z-index:5;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(238,240,246,.5);padding:9px 15px;border-radius:999px;
  border:1px solid rgba(238,240,246,.18);background:rgba(5,5,7,.7);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.26s var(--ease)}
.gn-back:hover{color:#050507;background:#eef0f6;border-color:#eef0f6}

/* ---- light mode ---- */
body[data-gn-theme="light"]{background:#f2f0ea;color:#141210}
body[data-gn-theme="light"] .gn-stage{
  background:radial-gradient(120% 80% at 50% 40%,rgba(120,140,255,.10),transparent 62%),
             radial-gradient(90% 70% at 78% 78%,rgba(255,150,200,.08),transparent 58%),#f2f0ea}
body[data-gn-theme="light"] .gn-stage::after{
  background:radial-gradient(130% 100% at 50% 50%,transparent 48%,rgba(242,240,234,.2) 78%,rgba(242,240,234,.75) 100%)}
body[data-gn-theme="light"] .gn-p > img,
body[data-gn-theme="light"] .gn-p > video{box-shadow:0 22px 60px -26px rgba(20,18,14,.55),0 0 0 1px rgba(20,18,14,.1)}
body[data-gn-theme="light"] .gn-grid,
body[data-gn-theme="light"] .gn-note-sec{background:#f2f0ea}
body[data-gn-theme="light"] .gn-g{background:#e6e3da}
body[data-gn-theme="light"] .gn-tabs{background:rgba(242,240,234,.8);border-color:rgba(20,18,14,.14)}
body[data-gn-theme="light"] .gn-tab{color:rgba(20,18,14,.55)}
body[data-gn-theme="light"] .gn-tab.on{background:#141210;color:#f2f0ea}
body[data-gn-theme="light"] .gn-cat{background:rgba(242,240,234,.75);border-color:rgba(20,18,14,.14);
  color:rgba(20,18,14,.55)}
body[data-gn-theme="light"] .gn-cat.on{background:#141210;color:#f2f0ea;border-color:#141210}
body[data-gn-theme="light"] .gn-cat--pick{color:#3f6ea8;border-color:rgba(63,110,168,.4)}
body[data-gn-theme="light"] .gn-cat--pick.on{background:#3f6ea8;color:#f2f0ea;border-color:#3f6ea8}
body[data-gn-theme="light"] .gn-keys li{color:rgba(20,18,14,.42)}
body[data-gn-theme="light"] .gn-keys b{color:rgba(20,18,14,.75)}
body[data-gn-theme="light"] .gn-hud__l,body[data-gn-theme="light"] .gn-hud__r{color:rgba(20,18,14,.5)}
body[data-gn-theme="light"] .gn-hud__bar{background:rgba(20,18,14,.1)}
body[data-gn-theme="light"] .gn-hud__bar span{background:#3f6ea8}
body[data-gn-theme="light"] .gn-orb,body[data-gn-theme="light"] .gn-pulse,
body[data-gn-theme="light"] .gn-reset,body[data-gn-theme="light"] .gn-theme,
body[data-gn-theme="light"] .gn-home__t,body[data-gn-theme="light"] .gn-back,
body[data-gn-theme="light"] .gn-note-t{color:rgba(20,18,14,.55);border-color:rgba(20,18,14,.18);
  background:rgba(242,240,234,.7)}
body[data-gn-theme="light"] .gn-home__mark{background:#141210}
body[data-gn-theme="light"] .gn-letter__k{color:#3f6ea8}
body[data-gn-theme="light"] .gn-letter__body p{color:rgba(20,18,14,.72)}
body[data-gn-theme="light"] .gn-letter__body strong,
body[data-gn-theme="light"] .gn-letter__lead,
body[data-gn-theme="light"] .gn-letter__beat,
body[data-gn-theme="light"] .gn-letter__sign{color:#141210!important}
body[data-gn-theme="light"] .gn-letter__body a{color:#3f6ea8;border-bottom-color:rgba(63,110,168,.4)}
body[data-gn-theme="light"] .gn-note-sec{border-top-color:rgba(20,18,14,.14)}
body[data-gn-theme="light"] .gn-lb{background:rgba(242,240,234,.97)}
body[data-gn-theme="light"] .gn-lb__pr{color:#141210}
body[data-gn-theme="light"] .gn-lb__n,body[data-gn-theme="light"] .gn-lb__f{color:rgba(20,18,14,.5)}
body[data-gn-theme="light"] .gn-lb__x,body[data-gn-theme="light"] .gn-lb__nav{
  background:rgba(242,240,234,.7);color:#141210;border-color:rgba(20,18,14,.18)}
body[data-gn-theme="light"] .gn-lb__x:hover,body[data-gn-theme="light"] .gn-lb__nav:hover{
  background:#141210;color:#f2f0ea;border-color:#141210}
body[data-gn-theme="light"] .gn-g__pick,body[data-gn-theme="light"] .gn-g--sel::before{
  background:#3f6ea8;color:#f2f0ea}

/* ── v295 ── GENESIS · per-view chrome, and the phone ──────────
   The corridor is one journey through everything, so it carries no
   controls at all. The library is a document, so its filters belong
   under its own tab rather than floating on a rail over the work. */
body[data-view="corridor"] .gn-cats,
body[data-view="corridor"] .gn-keys{display:none}

body[data-view="grid"] .gn-cats{
  position:fixed;top:64px;left:50%;right:auto;transform:translateX(-50%);
  flex-direction:row;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center;
  max-width:min(1100px,calc(100vw - 2*var(--pad-x)))}
body[data-view="grid"] .gn-grid{padding-top:132px;padding-right:var(--pad-x)}

/* a short filter result left a screen of empty ground before the
   letter; the grid now holds the fold on its own */
body[data-view="grid"] .gn-grid{min-height:60svh;align-content:start}

/* ---- phone ---- */
.gn-mob{display:none}
@media(max-width:820px){
  .gn-mob{display:block;position:fixed;top:0;left:0;right:0;z-index:40;margin:0;
    padding:11px var(--pad-x);text-align:center;font-size:9.5px;letter-spacing:.09em;
    text-transform:uppercase;line-height:1.5;color:rgba(238,240,246,.72);
    background:rgba(13,14,19,.92);border-bottom:1px solid rgba(238,240,246,.14);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  body[data-gn-theme="light"] .gn-mob{color:rgba(20,18,14,.75);background:rgba(242,240,234,.94);
    border-bottom-color:rgba(20,18,14,.14)}
  .gn-tabs{top:56px}
  .gn-home,.gn-theme{top:56px}
  .gn-note-t{display:none}
  body[data-view="grid"] .gn-cats{top:104px}
  body[data-view="grid"] .gn-grid{padding-top:176px}
  /* on a phone the library is the view that actually works, so give it
     room rather than three tiles across */
  .gn-grid{grid-template-columns:repeat(2,1fr)}
  .gn-g--pick{grid-column:span 2;grid-row:span 2}
}

/* ── v296 ── phone: the notice wraps to three lines, so everything
   under it has to start lower than a one-line guess allowed for. */
@media(max-width:820px){
  .gn-tabs{top:86px}
  .gn-home,.gn-theme{top:86px}
  body[data-view="grid"] .gn-cats{top:134px}
  body[data-view="grid"] .gn-grid{padding-top:210px}
  .gn-mob{padding:10px var(--pad-x) 9px}
}
@media(max-width:420px){
  .gn-tabs{top:94px}
  .gn-home,.gn-theme{top:94px}
  body[data-view="grid"] .gn-cats{top:142px}
  body[data-view="grid"] .gn-grid{padding-top:222px}
}

/* ── v297 ── phone: nine filters wrapped to five rows and buried the
   grid under 534px of buttons. One scrolling line instead. */
@media(max-width:820px){
  body[data-view="grid"] .gn-cats{
    left:0;right:0;transform:none;max-width:none;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;padding:0 var(--pad-x);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body[data-view="grid"] .gn-cats::-webkit-scrollbar{display:none}
  body[data-view="grid"] .gn-cat{flex:0 0 auto}
  body[data-view="grid"] .gn-grid{padding-top:190px}
}
@media(max-width:420px){
  body[data-view="grid"] .gn-grid{padding-top:198px}
}

/* ── v298 ── the phone rail was pinned top AND bottom ──────────
   An earlier mobile rule parked the filters at bottom:56px. The
   library override set a `top` without clearing that `bottom`, so a
   fixed element with both edges pinned stretched to 614px and sat
   over the grid. One edge only. */
@media(max-width:820px){
  body[data-view="grid"] .gn-cats{bottom:auto;height:auto}
  body[data-view="grid"] .gn-grid{padding-top:196px}
}

/* ── v299 ── phone: the logo, the theme switch and the view tabs
   were all pinned to the same line and 375px cannot hold them.
   Give the corners their own row above the tabs. */
@media(max-width:820px){
  .gn-home,.gn-theme{top:78px}
  .gn-theme{padding:6px 11px;min-height:28px}
  .gn-home__mark{width:52px;height:24px}
  .gn-tabs{top:120px}
  .gn-tab{padding:8px 14px;font-size:9.5px}
  body[data-view="grid"] .gn-cats{top:172px}
  body[data-view="grid"] .gn-grid{padding-top:226px}
}
@media(max-width:420px){
  .gn-tabs{top:126px}
  body[data-view="grid"] .gn-cats{top:178px}
  body[data-view="grid"] .gn-grid{padding-top:232px}
}

/* ── v301 ── the white space, the reading page, the typewriter ──
   .gn-note-sec carried margin-top:100svh unconditionally from when
   the field was the only view. In the library the grid ended at
   7806px and the letter began at 8706 — a clear screen of nothing.
   The margin belongs to the field alone. */
.gn-note-sec{margin-top:0}
body[data-view="field"] .gn-note-sec{margin-top:100svh}
body[data-view="corridor"] .gn-note-sec{margin-top:0}

/* culled pieces leave the render entirely — this is what unsticks the
   corridor, not shadow tuning */
.gn-far{display:none}
/* and the corridor carries no numbers; it is a journey, not an index */
body[data-view="corridor"] .gn-p__n{display:none}

/* reading the letter puts the archive away */
body.gn-reading .gn-tabs,
body.gn-reading .gn-cats,
body.gn-reading .gn-keys,
body.gn-reading .gn-hud,
body.gn-reading .gn-note-t,
body.gn-reading .gn-theme{opacity:0;pointer-events:none}
body.gn-reading .gn-home{opacity:.5}
.gn-tabs,.gn-cats,.gn-keys,.gn-hud,.gn-note-t,.gn-theme,.gn-home{transition:opacity .5s var(--ease)}

/* typewriter */
.gn-letter__body > p{min-height:1.2em}
.gn-caret{display:inline-block;width:.5em;height:1em;margin-left:1px;vertical-align:-.12em;
  background:currentColor;opacity:.7;animation:gnBlink .9s steps(1) infinite}
@keyframes gnBlink{0%,49%{opacity:.7}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gn-caret{display:none;animation:none}}

/* the sign-off is a signature, and it needs air from the button */
.gn-sign{font-family:var(--serif);font-style:italic;font-size:28px;letter-spacing:0;
  text-transform:none;color:#eef0f6;margin:0 0 34px}
body[data-gn-theme="light"] .gn-sign{color:#141210}
.gn-lede{margin-bottom:18px}
.gn-enter{margin-top:6px}

/* disabled ends on the viewer, so the filtered set has a shape */
.gn-lb__nav:disabled{opacity:.18;pointer-events:none}

/* the wordmark alone is the way back now */
.gn-home__t{display:none}

/* ── v302 ── don't hang layout on svh alone ────────────────────
   The field offset was declared only in svh. Where that unit fails
   to parse the whole declaration is dropped and the letter lands at
   scroll 0, under the fixed stage — which is the letter "not
   loading". vh first as the floor, svh after as the improvement. */
body[data-view="field"] .gn-note-sec{margin-top:100vh;margin-top:100svh}

/* ── v303 ── rotating hero ─────────────────────────────────────
   Two films in the same frame, one visible at a time. The fade is
   long enough to read as a dissolve rather than a cut. */
.hero-rot{opacity:0;transition:opacity 1.5s var(--ease)}
.hero-word .hero-rot.is-on{opacity:.62}
.cbanner .hero-rot.is-on{opacity:.58}
@media(prefers-reduced-motion:reduce){.hero-rot{transition:none}}

/* ── v304 ── the rotator lost a specificity fight ──────────────
   `.hero-word .cbanner-video{opacity:.62}` outranks `.hero-rot`,
   so both films sat visible at once. Match the ancestor. */
.hero-word .cbanner-video.hero-rot,
.cbanner .cbanner-video.hero-rot{opacity:0}
.hero-word .cbanner-video.hero-rot.is-on{opacity:.62}
.cbanner .cbanner-video.hero-rot.is-on{opacity:.58}

/* ── v305 ── Genesis leads the journal ─────────────────────────
   It is the only piece here that is a place rather than a page, so
   the card says so with a mark instead of pretending to be another
   7-minute read. */
.blog-feat--gen .blog-cat{background:#a6ccff;color:#0a0a0a}
.blog-feat--gen .blog-media{background:#050507}
.blog-feat--gen .blog-media img{object-position:center 28%}

/* ── v306 ── the archive has to ask for something ──────────────
   Everything else on the site converts; this page was a lovely
   dead end. The ask sits after the letter, where someone who has
   read to the bottom is the warmest they will ever be. */
.gn-cta{max-width:720px;margin:clamp(56px,7vw,90px) auto 0;padding-top:clamp(36px,5vw,54px);
  border-top:1px solid rgba(238,240,246,.16)}
.gn-cta__k{margin:0 0 18px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#a6ccff}
.gn-cta__h{font-family:var(--display);font-weight:200;font-size:clamp(24px,3.1vw,40px);
  line-height:1.15;letter-spacing:-.03em;color:#eef0f6;margin:0 0 18px}
.gn-cta__h em{font-family:var(--serif);font-style:italic;font-weight:400}
.gn-cta__p{margin:0 0 30px;font-size:15.5px;line-height:1.7;color:rgba(238,240,246,.62)}
.gn-cta__row{display:flex;flex-wrap:wrap;gap:10px}
.gn-cta__btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:14px 22px;border-radius:999px;border:1px solid rgba(238,240,246,.24);
  color:rgba(238,240,246,.8);transition:.28s var(--ease);min-height:44px;display:inline-flex;align-items:center}
.gn-cta__btn:hover{background:rgba(238,240,246,.1);color:#eef0f6;border-color:rgba(238,240,246,.5)}
.gn-cta__btn--solid{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gn-cta__btn--solid:hover{background:#fff;color:#050507;border-color:#fff}
body[data-gn-theme="light"] .gn-cta{border-top-color:rgba(20,18,14,.16)}
body[data-gn-theme="light"] .gn-cta__k{color:#3f6ea8}
body[data-gn-theme="light"] .gn-cta__h{color:#141210}
body[data-gn-theme="light"] .gn-cta__p{color:rgba(20,18,14,.72)}
body[data-gn-theme="light"] .gn-cta__btn{color:rgba(20,18,14,.75);border-color:rgba(20,18,14,.22)}
body[data-gn-theme="light"] .gn-cta__btn--solid{background:#141210;color:#f2f0ea;border-color:#141210}

/* ── v307 ── library bar, corridor centring, footer mark ───────
   The filters floated over the top row of the grid. They are a
   control surface, so they get a real bar: one plate holding the
   view tabs and the filters, with the grid starting below it. */
body[data-view="grid"] .gn-bar-bg{display:block}
.gn-bar-bg{display:none;position:fixed;top:0;left:0;right:0;height:150px;z-index:21;pointer-events:none;
  background:linear-gradient(to bottom,#050507 0%,#050507 62%,rgba(5,5,7,.92) 82%,transparent 100%)}
body[data-gn-theme="light"] .gn-bar-bg{
  background:linear-gradient(to bottom,#f2f0ea 0%,#f2f0ea 62%,rgba(242,240,234,.92) 82%,transparent 100%)}

body[data-view="grid"] .gn-cats{
  top:70px;padding:0;gap:6px;
  background:rgba(238,240,246,.05);border:1px solid rgba(238,240,246,.1);
  border-radius:999px;padding:4px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-gn-theme="light"][data-view="grid"] .gn-cats{
  background:rgba(20,18,14,.05);border-color:rgba(20,18,14,.12)}
body[data-view="grid"] .gn-cat{border:0;background:transparent;padding:9px 15px}
body[data-view="grid"] .gn-cat:hover{background:rgba(238,240,246,.09)}
body[data-view="grid"] .gn-cat.on{background:#eef0f6;color:#050507}
body[data-gn-theme="light"][data-view="grid"] .gn-cat.on{background:#141210;color:#f2f0ea}
body[data-view="grid"] .gn-cat--pick.on{background:#a6ccff;color:#050507}
body[data-view="grid"] .gn-grid{padding-top:150px}

/* the mark in the footer gets the client-list iridescence — present,
   not shouting */
.foot-col a.foot-gen{background:linear-gradient(110deg,#a6ccff,#c9b8ff 28%,#ffb9da 54%,#a8ffd8 78%,#a6ccff);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:iriflow 7s linear infinite}
.foot-col a.foot-gen:hover{animation-duration:2.6s}

/* ── v308 ── mobile work grid: a lead, a pair, then the index ──
   One column of 36 equal tiles reads as a list and nothing leads.
   David Morris takes the full width, Khloé and Gentle Monster sit
   beside each other under it, and everything after runs compact —
   so the page opens with a statement and then behaves like a
   catalogue, which is what it is. */
@media (max-width:720px){
  .work-grid{grid-template-columns:1fr 1fr;gap:8px}
  /* the lead */
  .work-grid > .tile:nth-of-type(1){grid-column:1/-1}
  .work-grid > .tile:nth-of-type(1) .tile-media{aspect-ratio:4/5}
  /* the pair */
  .work-grid > .tile:nth-of-type(2),
  .work-grid > .tile:nth-of-type(3){grid-column:span 1}
  /* the index */
  .work-grid > .tile:nth-of-type(n+4) .tile-media{aspect-ratio:1}
  .work-grid > .tile:nth-of-type(n+4) .tile-cap .t{font-size:13px}
  .work-grid > .tile:nth-of-type(n+4) .tile-cap em{font-size:10px}
  .work-grid .tile.full,.work-grid .tile.tall{grid-column:span 1}
  .work-grid > .tile:nth-of-type(1).full{grid-column:1/-1}
  .tile-idx{font-size:9px}
}

/* ── v310 ── IDN ───────────────────────────────────────────────
   Navy authority, Proton Pink argument. */
[data-case="idn"]{--en-teal:#ff019a;--en-navy:#081649}
[data-case="idn"] .en-hero__art img{width:100%;height:auto;display:block}
.idn-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:44px}
.idn-swatches div{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  background:var(--sw);color:var(--fg,#fff);border-radius:var(--radius);padding:18px 16px;min-height:132px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.idn-swatches b{font-weight:400;font-family:var(--display);font-size:15px;letter-spacing:-.01em}
.idn-swatches span{font-size:9.5px;letter-spacing:.08em;opacity:.75}
@media(max-width:820px){.idn-swatches{grid-template-columns:repeat(2,1fr)}}
.idn-posters{display:grid;gap:16px;margin-top:44px;max-width:min(1400px,100%)}
.idn-posters figure{margin:0;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.04)}
.idn-posters img{width:100%;height:auto;display:block}

/* ── v311 ── Chapmans of London ────────────────────────────────
   Nigerian Green and a foil silver. */
[data-case="chapmans"]{--en-teal:#0d9e59;--en-navy:#0b3a24}
[data-case="chapmans"] .en-hero__art img{width:100%;height:auto;display:block}
.chp-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.chp-swatches div{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  background:var(--sw);color:var(--fg,#fff);border-radius:var(--radius);padding:18px 16px;min-height:132px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.chp-swatches b{font-weight:400;font-family:var(--display);font-size:15px;letter-spacing:-.01em}
.chp-swatches span{font-size:9.5px;letter-spacing:.08em;opacity:.8}
@media(max-width:820px){.chp-swatches{grid-template-columns:repeat(2,1fr)}}

/* ── v312 ── library bar one line, and light mode means dark type ──
   Nine filters wrapped onto a second row inside the pill, which read
   as a mistake. The bar runs the width and scrolls if it has to. */
body[data-view="grid"] .gn-cats{
  left:var(--pad-x);right:var(--pad-x);transform:none;max-width:none;
  flex-wrap:nowrap;justify-content:center;overflow-x:auto;scrollbar-width:none}
body[data-view="grid"] .gn-cats::-webkit-scrollbar{display:none}
body[data-view="grid"] .gn-cat{flex:0 0 auto}
@media(max-width:1200px){body[data-view="grid"] .gn-cats{justify-content:flex-start}}

/* Light mode was only repainting the chrome; the intro, the title and
   the help line stayed white on paper. */
body[data-gn-theme="light"] .gn-title{color:#141210}
body[data-gn-theme="light"] .gn-title em{
  background:linear-gradient(110deg,#3f6ea8,#7a5fbf 32%,#c2557f 58%,#3f8f6a 82%,#3f6ea8);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
body[data-gn-theme="light"] .gn-lede{color:rgba(20,18,14,.72)}
body[data-gn-theme="light"] .gn-k{color:rgba(20,18,14,.55)}
body[data-gn-theme="light"] .gn-k i{background:#3f6ea8}
body[data-gn-theme="light"] .gn-help{color:rgba(20,18,14,.45)}
body[data-gn-theme="light"] .gn-enter{color:#141210;border-color:rgba(20,18,14,.3)}
body[data-gn-theme="light"] .gn-enter:hover{background:#141210;color:#f2f0ea;border-color:#141210}
body[data-gn-theme="light"] .gn-intro{background:rgba(242,240,234,.78)}
body[data-gn-theme="light"] .gn-plate h2{color:#141210}
body[data-gn-theme="light"] .gn-plate p{color:rgba(20,18,14,.62)}
body[data-gn-theme="light"] .gn-plate{mix-blend-mode:normal}
body[data-gn-theme="light"] .gn-p__n{color:rgba(20,18,14,.4)}

/* ── v313 ── the letter is typed, not typing ───────────────────
   Mono face for the whole letter — it should look like something
   written on a machine — and each paragraph rises into place as it
   arrives rather than crawling out character by character. */
.gn-letter__body p{font-family:var(--mono);font-size:14.5px;line-height:1.9;letter-spacing:-.005em}
.gn-letter__lead{font-family:var(--mono)!important;font-weight:400!important;
  font-size:clamp(17px,2vw,23px)!important;line-height:1.6!important;letter-spacing:-.01em}
.gn-letter__beat{font-family:var(--serif)!important;font-style:italic}
.gn-letter__sign{font-family:var(--serif)!important;font-style:italic}
.gn-line{opacity:0;transform:translateY(14px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.gn-line--in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.gn-line{opacity:1;transform:none;transition:none}}

/* ── v314 ── The Originals ─────────────────────────────────────
   The earliest generations get a mark of their own: brushed
   platinum with a deep red, which is the one combination that
   reads as a limited run rather than a category tag. */
.gn-g__orig{position:absolute;top:8px;right:8px;z-index:4;font-size:7.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;color:#a4121b;font-weight:500;
  background:linear-gradient(135deg,#f6f3ec 0%,#ded8cb 26%,#fffdf8 48%,#cfc8b8 72%,#efe9dd 100%);
  box-shadow:0 1px 5px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(120,105,70,.5)}
.gn-g--pick .gn-g__orig{top:34px}
.gn-g--orig::after{box-shadow:inset 0 0 0 1px rgba(222,216,203,.6)}
.gn-g--orig:hover::after{box-shadow:inset 0 0 0 1px rgba(222,216,203,.95)}

/* in the field, an edge rather than a label */
.gn-p--orig > img,.gn-p--orig > video{
  box-shadow:0 24px 70px -24px rgba(0,0,0,.9),0 0 0 1.5px rgba(226,216,190,.85)}

/* the filter pill wears it too */
.gn-cat--orig{color:#c8bda2;border-color:rgba(226,216,190,.42)}
.gn-cat--orig.on{color:#a4121b;border-color:transparent;
  background:linear-gradient(135deg,#f6f3ec 0%,#ded8cb 26%,#fffdf8 48%,#cfc8b8 72%,#efe9dd 100%)}
body[data-view="grid"] .gn-cat--orig.on{
  background:linear-gradient(135deg,#f6f3ec 0%,#ded8cb 26%,#fffdf8 48%,#cfc8b8 72%,#efe9dd 100%);color:#a4121b}
body[data-gn-theme="light"] .gn-cat--orig{color:#8a7b57;border-color:rgba(138,123,87,.4)}

/* ── v316 ── BrandStak ─────────────────────────────────────────
   Three colours, and the case study keeps to them. */
[data-case="brandstak"]{--en-teal:#f49c81;--en-navy:#1e1e1e}
[data-case="brandstak"] .en-hero__art img{width:100%;height:auto;display:block}
.bs-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.bs-swatches div{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  background:var(--sw);color:var(--fg,#fff);border-radius:var(--radius);padding:18px 16px;min-height:120px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.bs-swatches b{font-weight:400;font-family:var(--display);font-size:15px}
.bs-swatches span{font-size:9.5px;letter-spacing:.08em;opacity:.8}
@media(max-width:700px){.bs-swatches{grid-template-columns:1fr}}
.bs-icons{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:38px}
.bs-icons figure{margin:0;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.04)}
.bs-icons img{width:100%;height:auto;display:block}
@media(max-width:760px){.bs-icons{grid-template-columns:1fr}}
.bs-ooh{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
.bs-ooh figure{margin:0;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.04)}
.bs-ooh img{width:100%;height:auto;display:block}
@media(max-width:760px){.bs-ooh{grid-template-columns:1fr}}
.bs-film{position:relative;margin:44px 0 0;max-width:min(1000px,100%);border-radius:var(--radius);
  overflow:hidden;background:#1e1e1e}
.bs-film video{width:100%;height:auto;display:block}
.bs-film figcaption{padding:12px 2px 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(238,240,246,.5)}

/* ── v317 ── controls arrive like a dashboard ──────────────────
   Everything appearing on the same frame reads as a page load. In
   order, on a short stagger, it reads as a system coming up. */
.gn-tab,.gn-cat{opacity:0;transform:translateY(6px) scale(.97)}
.gn-casc{animation:gnCasc .62s cubic-bezier(.22,1,.32,1) var(--cd,0ms) both}
@keyframes gnCasc{from{opacity:0;transform:translateY(6px) scale(.97)}
                  to{opacity:1;transform:none}}
body:not(.gn-in) .gn-tab,body:not(.gn-in) .gn-cat{opacity:0}
@media(prefers-reduced-motion:reduce){
  .gn-tab,.gn-cat{opacity:1;transform:none}
  .gn-casc{animation:none}
}
/* gathered, the cursor says orbit */
body[data-view="field"] .gn-stage{cursor:grab}

/* ── v319 ── GENESIS preview on the work page ──────────────────
   A live dome, not a picture of one — placed after the grid and
   before the index, where someone who has looked at the client
   work is ready for the thing behind it. */
.gp-sec{position:relative;background:#050507;color:#eef0f6;overflow:hidden;
  padding:clamp(72px,9vw,120px) var(--pad-x)}
.gp-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 72% 50%,rgba(120,140,255,.14),transparent 62%),
             radial-gradient(70% 60% at 20% 80%,rgba(255,150,200,.08),transparent 58%)}
.gp-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.gp-h{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.6vw,52px);
  line-height:1.04;letter-spacing:-.04em;margin:22px 0 20px;max-width:17ch}
.gp-h em{font-family:var(--serif);font-style:italic;font-weight:400;
  background:linear-gradient(110deg,#a6ccff,#c9b8ff 32%,#ffb9da 58%,#a8ffd8 82%,#a6ccff);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:iriflow 7s linear infinite}
.gp-p{font-size:15.5px;line-height:1.7;color:rgba(238,240,246,.62);max-width:46ch;margin:0 0 30px}
.gp-sec .eyebrow{color:rgba(238,240,246,.55)}
.gp-sec .eyebrow .d{background:#a6ccff}
.gp-cta{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;border-radius:999px;
  border:1px solid rgba(238,240,246,.28);color:#eef0f6;transition:.3s var(--ease);min-height:44px}
.gp-cta:hover{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gp-cta .a{transition:transform .3s var(--ease)}
.gp-cta:hover .a{transform:translateX(4px)}

.gp-stage{position:relative;height:clamp(340px,42vw,520px);perspective:1000px;
  cursor:grab;touch-action:pan-y}
.gp-stage.grabbing{cursor:grabbing}
.gp-space{position:absolute;top:50%;left:50%;transform-style:preserve-3d;will-change:transform}
.gp-p{margin:0 0 30px}
.gp-stage .gp-p{position:absolute;top:0;left:0;width:78px;margin:0}
.gp-stage .gp-p img{width:100%;height:auto;display:block;aspect-ratio:var(--ar,1);object-fit:cover;
  border-radius:6px;box-shadow:0 14px 40px -16px rgba(0,0,0,.9),0 0 0 1px rgba(238,240,246,.1)}
.gp-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 70% at 50% 50%,transparent 42%,rgba(5,5,7,.55) 82%,rgba(5,5,7,.9) 100%)}
@media(max-width:900px){
  .gp-in{grid-template-columns:1fr}
  .gp-stage{height:clamp(300px,64vw,420px);order:-1}
  .gp-stage .gp-p{width:62px}
}

/* ── v320 ── the fixes from a real read-through ────────────────
   1 · Cards on the far side of the sphere were showing their
   reverse, which renders as a dark slab — the black square. */
.gn-p,.gn-p > img,.gn-p > video,
.gp-stage .gp-p,.gp-stage .gp-p img,.gp-stage .gp-p video{
  backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* 2 · Gather / Pulse / Reset belong in the middle of the page, not
   floating between two readouts. */
.gn-hud{justify-content:space-between}
.gn-hud__c{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;gap:6px;pointer-events:auto}
@media(max-width:720px){.gn-hud__c{bottom:16px}}

/* 3 · The letter link was a grey whisper next to nine bright pills.
   It is the one piece of writing on the page, so it says so. */
.gn-note-t{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.16em;
  color:#eef0f6;padding:9px 15px;border-radius:999px;
  background:rgba(238,240,246,.07);border:1px solid rgba(238,240,246,.2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.3s var(--ease)}
.gn-note-t__d{width:5px;height:5px;border-radius:50%;
  background:linear-gradient(110deg,#a6ccff,#ffb9da 50%,#a8ffd8);
  animation:pulse 2s ease-in-out infinite}
.gn-note-t:hover{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gn-note-t:hover .gn-note-t__d{background:#050507}
.gn-note-t .a{transition:transform .3s var(--ease)}
.gn-note-t:hover .a{transform:translateY(2px)}
body[data-gn-theme="light"] .gn-note-t{color:#141210;background:rgba(20,18,14,.06);
  border-color:rgba(20,18,14,.2)}
body[data-gn-theme="light"] .gn-note-t:hover{background:#141210;color:#f2f0ea}

/* 4 · The filter rail cascades in, then recedes until you reach for
   it — a nine-item menu sitting at full strength over the work is
   the work competing with its own furniture. */
@media(hover:hover) and (min-width:901px){
  body[data-view="field"] .gn-cats,
  body[data-view="corridor"] .gn-cats{opacity:.28;transition:opacity .45s var(--ease)}
  body[data-view="field"] .gn-cats:hover,
  body[data-view="field"] .gn-cats:focus-within{opacity:1}
  body.gn-in[data-view="field"] .gn-cats{opacity:.28}
  body.gn-in[data-view="field"] .gn-cats:hover,
  body.gn-in[data-view="field"] .gn-cats:focus-within{opacity:1}
}

/* 5 · The preview dome's CTA row and hint */
.gp-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.gp-cta--solid{background:#eef0f6;color:#050507;border-color:#eef0f6}
.gp-cta--solid:hover{background:#fff;border-color:#fff;color:#050507}
.gp-hint{margin:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(238,240,246,.34)}
.gp-p--film video{width:100%;height:auto;display:block;aspect-ratio:var(--ar,1);object-fit:cover;
  border-radius:6px;box-shadow:0 14px 40px -16px rgba(0,0,0,.9),0 0 0 1px rgba(238,240,246,.1)}

/* ── v321 ── the preview dome had no walls ─────────────────────
   .gp-space is absolutely positioned at the centre of the stage
   and its pieces sit up to 400px out in every direction. The stage
   never clipped, so on a 375px screen the sphere spilled across
   the entire page and sat on top of the copy. Clip it, and scale
   the radius to the space it actually has. */
.gp-stage{overflow:hidden;border-radius:var(--radius);isolation:isolate}
.gp-in{position:relative;z-index:1}
.gp-copy{position:relative;z-index:2}
@media(max-width:900px){
  .gp-sec{padding:clamp(56px,9vw,80px) var(--pad-x)}
  .gp-in{gap:26px}
  .gp-stage{height:min(58vw,340px);order:-1}
  .gp-stage .gp-p{width:46px}
  .gp-h{font-size:clamp(24px,6.4vw,34px);margin:16px 0 14px}
  .gp-p{font-size:14.5px}
  .gp-row{gap:8px}
  .gp-cta{padding:13px 18px;font-size:9.5px}
}
@media(max-width:520px){
  .gp-stage{height:min(66vw,300px)}
  .gp-stage .gp-p{width:38px}
}

/* ── v322 ── the preview films had no size ─────────────────────
   Only the <img> inside a piece was ever given a width, so the
   <video> fell back to its intrinsic 1280px and swallowed the
   sphere. Both media types are sized the same way now, scoped to
   the stage so nothing outside it is affected. */
.gp-stage .gp-p{width:78px;max-width:78px}
.gp-stage .gp-p > img,
.gp-stage .gp-p > video{width:100%;max-width:100%;height:auto;display:block;
  aspect-ratio:var(--ar,1);object-fit:cover;border-radius:6px;
  box-shadow:0 14px 40px -16px rgba(0,0,0,.9),0 0 0 1px rgba(238,240,246,.1)}
@media(max-width:900px){.gp-stage .gp-p{width:46px;max-width:46px}}
@media(max-width:520px){.gp-stage .gp-p{width:38px;max-width:38px}}

/* ── v323 ── give the preview dome its presence back ───────────
   Clipping it was right; shrinking it was not. Bigger pieces, a
   taller stage, and the hint gets air from the buttons. */
.gp-stage{height:clamp(400px,44vw,580px)}
.gp-stage .gp-p{width:88px;max-width:88px}
.gp-hint{margin-top:14px}
.gp-row{margin-bottom:0}
@media(max-width:900px){
  .gp-stage{height:min(64vw,380px)}
  .gp-stage .gp-p{width:52px;max-width:52px}
}
@media(max-width:520px){
  .gp-stage{height:min(72vw,330px)}
  .gp-stage .gp-p{width:42px;max-width:42px}
}

/* ── v324 ── undo the backface fix, and lose the panel edge ────
   backface-visibility:hidden was added to chase a black square
   that turned out to be a full-size video. On a sphere whose cards
   never rotate individually it does real harm: turn the dome past
   90° and every card faces away and vanishes. Reverted.

   And the stage read as a box because it was one — a rounded panel
   clipped against a lighter ground. It still clips (it has to, or
   the sphere lands on the copy) but the edges are masked so they
   dissolve instead of drawing a rectangle. */
.gn-p,.gn-p > img,.gn-p > video,
.gp-stage .gp-p,.gp-stage .gp-p img,.gp-stage .gp-p video{
  backface-visibility:visible;-webkit-backface-visibility:visible}

.gp-stage{border-radius:0;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 50%,#000 52%,rgba(0,0,0,.85) 72%,transparent 100%);
  mask-image:radial-gradient(78% 78% at 50% 50%,#000 52%,rgba(0,0,0,.85) 72%,transparent 100%)}
.gp-stage::after{display:none}

/* ── v325 ── the archive block's closing line ──────────────────
   "Take the prompts. Break them. Build better." is the invitation,
   so it sits between the copy and the buttons at a weight between
   the two — and it replaces the hint, which was saying the same
   thing twice. */
.gp-kick{margin:0 0 26px;font-family:var(--display);font-weight:200;
  font-size:clamp(17px,1.65vw,22px);line-height:1.35;letter-spacing:-.02em;color:#eef0f6}
@media(max-width:900px){.gp-kick{font-size:16px;margin-bottom:20px}}

/* ── v326 ── mobile work grid: three statements, then the index ─────
   The phone gets the same argument the desktop grid makes, in the only
   order that survives a 390px column: David Morris full width, then
   Khloé, then Gentle Monster — each taking the whole screen — and every
   tile after them running two-up as a catalogue.

   Written with [data-view] in the selector because the mixed-view rules
   further up carry that attribute, and a plain .work-grid selector loses
   to them however far down the file it sits. */
@media (max-width:720px){
  .work-grid[data-view],
  .work-grid{grid-template-columns:1fr 1fr;gap:9px}

  /* the three that lead */
  .work-grid[data-view] > .tile:nth-of-type(-n+3),
  .work-grid > .tile:nth-of-type(-n+3){grid-column:1/-1}
  .work-grid[data-view] > .tile:nth-of-type(1) .tile-media,
  .work-grid > .tile:nth-of-type(1) .tile-media{aspect-ratio:16/9}
  .work-grid[data-view] > .tile:nth-of-type(2) .tile-media,
  .work-grid[data-view] > .tile:nth-of-type(3) .tile-media,
  .work-grid > .tile:nth-of-type(2) .tile-media,
  .work-grid > .tile:nth-of-type(3) .tile-media{aspect-ratio:4/5}

  /* and the index under them */
  .work-grid[data-view] > .tile:nth-of-type(n+4),
  .work-grid > .tile:nth-of-type(n+4){grid-column:span 1}
  .work-grid[data-view] > .tile:nth-of-type(n+4) .tile-media,
  .work-grid > .tile:nth-of-type(n+4) .tile-media{aspect-ratio:1}

  /* A square tile is not a poster. The title gets two lines at most and
     the sector line one, both clipped rather than allowed to climb up
     over the image — which is what was burying the artwork on half the
     grid. The year is dropped: it repeats what the sector line says. */
  .work-grid > .tile:nth-of-type(n+4) .tile-cap{
    left:11px;right:11px;bottom:10px;gap:6px;display:block}
  .work-grid > .tile:nth-of-type(n+4) .tile-cap .t{
    font-size:12.5px;line-height:1.16;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .work-grid > .tile:nth-of-type(n+4) .tile-cap .t em{
    font-size:9.5px;line-height:1.25;margin-top:4px;letter-spacing:.05em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .work-grid > .tile:nth-of-type(n+4) .tile-cap .yr{display:none}
  .work-grid > .tile:nth-of-type(n+4) .tile-idx{top:8px;left:9px;font-size:9px;padding:3px 6px}
  .work-grid > .tile:nth-of-type(n+4) .spec-badge{font-size:8.5px;padding:4px 8px}
  /* a deeper scrim, because the type is smaller and sitting on artwork */
  .work-grid > .tile:nth-of-type(n+4)::after{
    background:linear-gradient(to top,rgba(10,10,10,.86),rgba(10,10,10,.3) 46%,transparent 70%)}
}

/* ── v327 ── GENESIS: paying for the frame rate ─────────────────
   The dome and the corridor were dropping frames, and it was not the
   maths. Every piece carried a 70px-blur drop shadow and a saturate()
   filter. Inside a preserve-3d context that is 233 separately
   rasterised, separately blurred layers recomposited on every single
   frame — the most expensive way possible to say "this card is
   floating".

   So the base state gets a shadow a fraction of the size, and the
   filter goes entirely (saturate(.96) was invisible and cost a full
   raster pass per element). The generous shadow stays where it is
   actually read: hover, held, selected — never more than one or two
   elements at a time. */
.gn-p > img,.gn-p > video{
  box-shadow:0 8px 22px -12px rgba(0,0,0,.85),0 0 0 1px rgba(238,240,246,.09);
  filter:none;transition:box-shadow .4s ease}
.gn-p:hover > img,.gn-p:hover > video{
  box-shadow:0 26px 74px -22px rgba(0,0,0,.95),0 0 0 1px rgba(166,204,255,.7);filter:none}
.gn-p--sel > img{box-shadow:0 22px 62px -22px rgba(0,0,0,.9),0 0 0 1px rgba(166,204,255,.42)}
.gn-p--held > img,.gn-p--held > video{
  box-shadow:0 36px 100px -14px rgba(0,0,0,1),0 0 0 2px rgba(166,204,255,.95)}
body[data-gn-theme="light"] .gn-p > img,
body[data-gn-theme="light"] .gn-p > video{
  box-shadow:0 8px 22px -12px rgba(20,18,14,.5),0 0 0 1px rgba(20,18,14,.1)}

/* The number under each piece was a third element per node fading in
   and out on hover. In the corridor it is always on, so it stays; in
   the field it is hover-only and the transition can go. */
.gn-p__n{transition:none}

/* ══════════════════════════════════════════════════════════════
   v328 — GENESIS: the letter, the help panel, and a phone layout
   that cannot overlap itself
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · the letter is a view, not a scroll position ───────────
   It used to be a section sitting under 100svh of margin, reached
   by an anchor — while the field pinned body{overflow:hidden}. So
   the link jumped to somewhere the page had been told it could not
   go, and the whole thing locked up. Now it is a fourth mode: the
   3D room shuts down, the page becomes an ordinary document, and
   it scrolls like any other piece of writing. */
body[data-view="letter"]{overflow-x:hidden;overflow-y:auto}
body[data-view="letter"] .gn-stage,
body[data-view="letter"] .gn-plates,
body[data-view="letter"] .gn-grid,
body[data-view="letter"] .gn-cats,
body[data-view="letter"] .gn-hud,
body[data-view="letter"] .gn-keys,
body[data-view="letter"] .gn-note-t,
body[data-view="letter"] .gn-mob,
body[data-view="letter"] .gn-intro,
body[data-view="letter"] .gn-spacer{display:none!important}
body[data-view="letter"] .gn-note-sec{margin-top:0;min-height:100svh;padding-top:clamp(96px,13vw,150px)}
body[data-view="letter"] .gn-back{display:inline-flex}
.gn-tab--letter{display:none}
body.gn-in .gn-tab--letter,body[data-view="letter"] .gn-tab--letter{display:inline-flex}
body.gn-touch .gn-tab--field{display:none}

/* ── 2 · the nudge ─────────────────────────────────────────────
   One line, bottom centre, out of the way of everything. */
.gn-hint{position:fixed;left:50%;bottom:clamp(84px,11vh,116px);z-index:60;
  display:flex;align-items:center;gap:12px;max-width:min(92vw,520px);
  padding:11px 12px 11px 18px;border-radius:999px;
  font-size:11px;letter-spacing:.055em;line-height:1.4;color:rgba(238,240,246,.92);
  background:rgba(15,16,22,.9);border:1px solid rgba(238,240,246,.16);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 22px 60px -24px rgba(0,0,0,.9);
  opacity:0;transform:translate(-50%,14px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gn-hint.in{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.gn-hint__b{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 15px;border-radius:999px;border:0;cursor:pointer;
  background:#eef0f6;color:#0d0e13;transition:.3s var(--ease)}
.gn-hint__b:hover{background:#fff;transform:translateY(-1px)}
.gn-hint__x{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:rgba(238,240,246,.5);font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.3s}
.gn-hint__x:hover{color:#eef0f6;background:rgba(238,240,246,.1)}
body[data-gn-theme="light"] .gn-hint{background:rgba(246,244,239,.94);color:rgba(20,18,14,.9);
  border-color:rgba(20,18,14,.14)}
body[data-gn-theme="light"] .gn-hint__b{background:#141210;color:#f6f4ef}
body[data-gn-theme="light"] .gn-hint__x{color:rgba(20,18,14,.45)}

/* ── 3 · the help panel ────────────────────────────────────────
   A "?" that is always in the same corner, and a plain answer. */
.gn-help-b{position:fixed;right:calc(var(--pad-x) - 2px);bottom:22px;z-index:58;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  font-size:14px;line-height:1;color:rgba(238,240,246,.8);
  background:rgba(15,16,22,.82);border:1px solid rgba(238,240,246,.2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.gn-help-b:hover{color:#fff;border-color:rgba(238,240,246,.5);transform:translateY(-2px)}
body[data-gn-theme="light"] .gn-help-b{background:rgba(246,244,239,.9);color:rgba(20,18,14,.8);
  border-color:rgba(20,18,14,.2)}
.gn-help-w{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:var(--pad-x);background:rgba(4,4,6,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .32s var(--ease)}
.gn-help-w.in{opacity:1}
.gn-help-c{position:relative;width:min(560px,100%);max-height:86svh;overflow:auto;
  padding:clamp(28px,4vw,44px);border-radius:18px;color:#eef0f6;
  background:#101118;border:1px solid rgba(238,240,246,.14);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.95);
  transform:translateY(16px) scale(.985);transition:transform .38s var(--ease)}
.gn-help-w.in .gn-help-c{transform:none}
body[data-gn-theme="light"] .gn-help-c{background:#f6f4ef;color:#141210;border-color:rgba(20,18,14,.14)}
.gn-help-x{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;
  border:0;background:transparent;color:inherit;opacity:.5;font-size:21px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.25s}
.gn-help-x:hover{opacity:1;background:rgba(238,240,246,.1)}
.gn-help-k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin:0 0 12px}
.gn-help-k--2{margin-top:30px}
.gn-help-c h2{font-family:var(--display);font-weight:200;font-size:clamp(26px,4.6vw,36px);
  line-height:1.05;letter-spacing:-.02em;margin:0 0 26px}
.gn-help-c h2 em{font-style:italic;font-family:var(--serif);font-weight:400}
.gn-help-v{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gn-help-v li{display:grid;grid-template-columns:82px 1fr;gap:14px;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid rgba(238,240,246,.09)}
body[data-gn-theme="light"] .gn-help-v li{border-bottom-color:rgba(20,18,14,.1)}
.gn-help-v li:last-child{border-bottom:0;padding-bottom:0}
.gn-help-v b{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;opacity:.95}
.gn-help-v span{font-size:14px;line-height:1.5;opacity:.72}
.gn-help-g{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gn-help-g li{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.5;opacity:.66}
.gn-help-g b{opacity:1;font-weight:500}
.gn-help-g__t{margin-top:6px;padding-top:12px;border-top:1px solid rgba(238,240,246,.09)}
body[data-gn-theme="light"] .gn-help-g__t{border-top-color:rgba(20,18,14,.1)}
.gn-help-go{margin-top:30px;width:100%;padding:14px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:#eef0f6;color:#0d0e13;transition:.3s var(--ease)}
.gn-help-go:hover{background:#fff}
body[data-gn-theme="light"] .gn-help-go{background:#141210;color:#f6f4ef}
body[data-view="letter"] .gn-help-b{display:none}

/* ── 4 · the phone, laid out once ──────────────────────────────
   What was here before was five separate @media(820px) blocks, each
   written on a different day, each nudging the same `top` values a
   little further down to stop whatever had just collided: 56 → 86 →
   78 → 120 → 126. Every new element started the argument again, and
   the result on a real phone was a pile of controls sitting on top of
   each other.

   The offsets now come out of four variables, so each band is placed
   by what is above it rather than by a number somebody guessed. Add a
   row and you change one value. This block is last in the file on
   purpose: it is the final word on the small-screen layout. */
@media (max-width:820px){
  :root{--gnm-note:30px;--gnm-r1:48px;--gnm-r2:46px;--gnm-cats:44px}
  :root{--gnm-r1-y:var(--gnm-note);
        --gnm-r2-y:calc(var(--gnm-note) + var(--gnm-r1));
        --gnm-cats-y:calc(var(--gnm-note) + var(--gnm-r1) + var(--gnm-r2))}

  /* the standing note */
  .gn-mob{display:flex;align-items:center;justify-content:center;
    position:fixed;top:0;left:0;right:0;height:var(--gnm-note);z-index:40;margin:0;
    padding:0 var(--pad-x);text-align:center;font-size:9px;letter-spacing:.08em;
    text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;
    color:rgba(238,240,246,.6);background:rgba(13,14,19,.94);
    border-bottom:1px solid rgba(238,240,246,.1);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  body[data-gn-theme="light"] .gn-mob{color:rgba(20,18,14,.6);background:rgba(242,240,234,.95);
    border-bottom-color:rgba(20,18,14,.1)}

  /* row 1 — the logo and the light switch, one on each side */
  .gn-home,.gn-theme{top:var(--gnm-r1-y);height:var(--gnm-r1);
    display:flex;align-items:center;margin:0;padding:0 0;background:none;border:0}
  .gn-home{left:var(--pad-x)}
  .gn-theme{right:var(--pad-x);gap:7px;font-size:9px;letter-spacing:.13em;min-height:0;
    padding:7px 12px;border:1px solid rgba(238,240,246,.2);border-radius:999px;height:30px;
    top:calc(var(--gnm-r1-y) + (var(--gnm-r1) - 30px)/2)}
  body[data-gn-theme="light"] .gn-theme{border-color:rgba(20,18,14,.2)}
  .gn-home__mark{width:56px;height:22px}
  .gn-home__t{display:none}

  /* row 2 — the views, full width and evenly split, so a thumb cannot miss */
  .gn-tabs{top:var(--gnm-r2-y);left:var(--pad-x);right:var(--pad-x);transform:none;
    height:var(--gnm-r2);display:flex;align-items:center;gap:4px;padding:0}
  .gn-tab{flex:1 1 0;justify-content:center;text-align:center;
    padding:10px 4px;font-size:9.5px;letter-spacing:.09em;min-height:36px;
    display:inline-flex;align-items:center}
  /* on a phone the letter is always offered — it is the one part of
     GENESIS that needs no pointer at all */
  body.gn-touch .gn-tab--letter{display:inline-flex}

  /* row 3 — the filters, one scrolling line, library only */
  body[data-view="grid"] .gn-cats{top:var(--gnm-cats-y);bottom:auto;left:0;right:0;
    transform:none;height:var(--gnm-cats);align-items:center;padding:0 var(--pad-x)}
  body[data-view="grid"] .gn-grid{
    padding-top:calc(var(--gnm-cats-y) + var(--gnm-cats) + 14px)}

  /* Gather / Pulse / Reset drive the field, and the field is not
     offered on a touch device. Showing three dead buttons is worse
     than showing none. */
  body.gn-touch .gn-hud__c{display:none}
  body.gn-touch .gn-keys{display:none}
  .gn-hud{padding:0 var(--pad-x) 14px}
  .gn-hud__l{display:none}
  .gn-hud__r{font-size:8.5px;letter-spacing:.12em;text-align:right}
  .gn-note-t{display:none}
  .gn-help-b{width:34px;height:34px;font-size:13px;bottom:16px}
  .gn-hint{bottom:64px;font-size:10.5px;padding:9px 10px 9px 15px;gap:9px}
  .gn-hint__b{font-size:9px;padding:7px 12px}

  /* the letter, read as a page */
  body[data-view="letter"] .gn-note-sec{padding-top:calc(var(--gnm-r2-y) + var(--gnm-r2) + 28px)}
  body[data-view="letter"] .gn-mob{display:none}
  body[data-view="letter"] .gn-home,
  body[data-view="letter"] .gn-theme{top:6px}
  body[data-view="letter"] .gn-tabs{top:54px}
}

/* A tablet is a big touch screen, not a small desktop: it gets the
   phone's control layout at the phone's tap sizes, but the library
   keeps a grown-up number of columns. */
@media (min-width:521px) and (max-width:1024px){
  .gn-grid{grid-template-columns:repeat(4,1fr)}
}
@media (hover:none) and (pointer:coarse) and (min-width:821px){
  :root{--gnm-note:30px;--gnm-r1:48px;--gnm-r2:46px;--gnm-cats:44px}
  .gn-mob{display:flex;align-items:center;justify-content:center;
    position:fixed;top:0;left:0;right:0;height:var(--gnm-note);z-index:40;margin:0;
    font-size:9px;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(238,240,246,.6);background:rgba(13,14,19,.94);
    border-bottom:1px solid rgba(238,240,246,.1)}
  .gn-home,.gn-theme{top:calc(var(--gnm-note) + 9px)}
  .gn-tabs{top:calc(var(--gnm-note) + var(--gnm-r1))}
  body[data-view="grid"] .gn-cats{top:calc(var(--gnm-note) + var(--gnm-r1) + var(--gnm-r2));
    bottom:auto;left:0;right:0;transform:none;height:var(--gnm-cats);align-items:center}
  body[data-view="grid"] .gn-grid{
    padding-top:calc(var(--gnm-note) + var(--gnm-r1) + var(--gnm-r2) + var(--gnm-cats) + 16px)}
  .gn-tab{min-height:40px;padding:11px 18px}
  .gn-keys{display:none}
}

/* Corridor on a phone is a page you scroll — which is the one gesture
   a phone has — so the pieces need to be big enough to be worth it. */
@media (max-width:820px){
  body[data-view="corridor"] .gn-p{width:min(74vw,300px)}
}

/* ══════════════════════════════════════════════════════════════
   v329 — case-study imagery: native ratio, native resolution
   ══════════════════════════════════════════════════════════════
   Two separate faults were making case-study images look wrong, and
   they need separate fixes.

   1 · CROPPING. A container declares aspect-ratio and object-fit:
       cover, and the source does not share that ratio, so the browser
       throws away the difference and magnifies what is left. Measured
       across all 40 case pages there were 25 of these, the worst at
       100% drift — a 2:3 portrait forced into a 4:3 landscape box.

   2 · MAGNIFICATION. A 1600px source rendered at 1600 CSS px is 3200
       device pixels on a 2x screen. Nothing is cropped and it still
       looks soft, because there is only half the detail the display is
       asking for. No amount of re-exporting fixes that — the pixels do
       not exist — so the answer is to stop rendering those particular
       images so large.                                                */

/* ── 1 · the stretch heroes ────────────────────────────────────
   .XX-hero__fig img was width:100%;height:100%;object-fit:cover
   inside a hero that stretches to the full height of the text
   column. Feed that a 16:9 wordmark and it fills an ~600x800 box by
   scaling until it covers — which crops away two-thirds of the width
   and magnifies the rest about four times. That is the Tyron Ash
   screenshot exactly: the middle of the logo, enormous and soft.

   Graphic art is contained on its own brand colour. Photography can
   still cover, because a photograph crops gracefully and a wordmark
   does not. */
.ta-hero__fig img{object-fit:contain;object-position:center;
  background:var(--ta-ink);padding:clamp(28px,4.5vw,64px)}

/* ── 2 · hero art whose source is nothing like 4/5 ─────────────
   .cx-hero__art img forces 4/5. Castore (0.80) and the other portrait
   covers match it exactly and are left alone. These four do not. */
[data-case="jcs"] .cx-hero__art img,
[data-case="sitevis"] .cx-hero__art img{
  aspect-ratio:16/9;object-fit:contain;background:var(--cx-ink,#111);padding:clamp(20px,3vw,44px)}
[data-case="arsenal"] .cx-hero__art img{aspect-ratio:4/3}
[data-case="lacpaper"] .cx-hero__art img{aspect-ratio:4/3}

/* ── 3 · Health & Aesthetics: one grid, four different ratios ──
   4/3 was cropping a 2:3 portrait by 100%. There is no single ratio
   that fits this set, so the set stops pretending there is: each
   image keeps its own shape and the row aligns to the top. */
.ha-grid{align-items:start}
.ha-grid img{aspect-ratio:auto;height:auto}

/* ── 4 · the rest of the measured mismatches ───────────────────*/
.lac-bleed img{aspect-ratio:4/3}          /* was 21/9 on a 4:3 source */
.thr-wide{align-items:start}
.thr-wide img{aspect-ratio:auto;height:auto}   /* 1.81 and 2.67 in one component */
.tt-route__set figure img{aspect-ratio:16/9}   /* sources are all 16/9, not 16/10 */

/* ── 5 · magnification caps ────────────────────────────────────
   These heroes are 1600–1700px wide and were rendering the full width
   of a large column, which on a 2x display asks for roughly twice the
   detail the file holds. Capping the container is the only honest fix
   available — the missing pixels were never photographed. */
.cx-hero__art{max-width:min(100%,900px);justify-self:center;width:100%}
@media (max-width:1100px){.cx-hero__art{max-width:100%}}

/* ── 6 · These Sweets: smaller stills, and only one wide frame ──
   Four across rather than three. Two things happen at once: the set
   reads as a content library instead of six hero shots, and a 1611px
   source stops being asked to fill ~430 CSS px on a 2x screen, which
   is where the softness was coming from. */
.ts-grid{grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.ts-grid{grid-template-columns:repeat(3,1fr)}}
/* the flat lay is the one landscape frame in the case and keeps its
   own 3:2; everything else is 4:5, which is what the sources are */
.ts-two{grid-template-columns:.8fr 1.2fr}
@media (max-width:900px){.ts-two{grid-template-columns:1fr}}

/* ── 7 · Loewe: the reclined frame and its film, side by side ──*/
.lw-recline{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:8px}
.lw-recline figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#000}
.lw-recline img,.lw-recline video{display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover}
@media (max-width:820px){.lw-recline{grid-template-columns:1fr}}

/* ── v330 ── the help panel was eating every click ─────────────
   .gn-help-w declares display:flex, and an author display rule beats
   the UA stylesheet's [hidden]{display:none}. So the panel was never
   actually hidden: it was a full-screen fixed overlay at z-index 120
   sitting at opacity 0 over the whole page, catching the Enter button
   and its own "?" trigger. Honour the attribute, and belt-and-braces
   it with pointer-events so a half-finished transition cannot block
   the page either. */
.gn-help-w[hidden]{display:none!important}
.gn-help-w{pointer-events:none}
.gn-help-w.in{pointer-events:auto}

/* ── 8 · solo figures inside a spread ──────────────────────────
   .cx-spread runs to 1400px, so a single figure in it rendered 1400
   CSS px — 2800 device pixels on a 2x screen. The case-study sources
   are 1493–2200px wide, so that is between 1.3x and 1.9x more
   magnification than the file can pay for, and it is why Castore read
   as soft even though nothing was being cropped.

   1000px is the honest ceiling: a 2000px source lands exactly 1:1 on a
   2x display, and a 1600px portrait is close enough to it to hold. A
   figure paired inside .cx-duo is already half-width and is left
   alone. */
.cx-spread > figure{max-width:min(100%,1000px);margin-inline:auto}
.cx-spread > figcaption{max-width:min(100%,1000px);margin-inline:auto}
.cx-spread .cx-duo figure{max-width:none;margin-inline:0}

/* ══════════════════════════════════════════════════════════════
   v334 — the wordmark, and the "?" that sat on the readout
   ══════════════════════════════════════════════════════════════ */

/* ── the logo was never missing ────────────────────────────────
   Measured on the home page: .sb-logo renders at 68x34, mask applied,
   opacity 1, visible — and background rgb(242,240,234). Cream, on a
   cream hero. The mark has been there the whole time, painted the same
   colour as what is behind it, which is why it "disappears" only on the
   light banner and comes back the moment the bar goes solid.

   Colour-matching per hero is a losing game once the hero rotates
   between a light and a dark banner. A soft shadow under the mark
   settles it in both directions: invisible against a dark banner
   (nothing to catch), and the thing that separates the mark from a
   pale one. */
.sitebar .sb-logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.34)) drop-shadow(0 4px 18px rgba(0,0,0,.28))}
.sitebar.solid .sb-logo{filter:none}
.gn-home__mark.sb-logo{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
body[data-gn-theme="light"] .gn-home__mark.sb-logo{filter:drop-shadow(0 1px 3px rgba(255,255,255,.6))}

/* ── the "?" was landing on the readout ────────────────────────
   It was pinned bottom-right, which is exactly where .gn-hud__r prints
   "233 shown · click any piece for the original file". Two fixed
   elements, one corner. The readout owns the bottom rail, so the help
   trigger moves up to the top-right cluster and sits with the theme
   switch — where a help control is looked for anyway. */
.gn-help-b{bottom:auto;top:22px;right:calc(var(--pad-x) + 104px);width:34px;height:34px}
@media (max-width:1100px){.gn-help-b{right:calc(var(--pad-x) + 96px)}}
@media (max-width:820px){
  /* on a phone the theme switch is in row 1, so the "?" tucks in
     beside it rather than starting a fight over the same 30px */
  .gn-help-b{top:calc(var(--gnm-r1-y) + (var(--gnm-r1) - 30px)/2);
    right:calc(var(--pad-x) + 88px);width:30px;height:30px;font-size:12px}
}
body[data-view="letter"] .gn-help-b{display:none}

/* The theme button's label alternates between "Light" and "Dark", so
   its width changes as you use it — and anything positioned off its
   left edge by a guessed number collides on one of the two states.
   Fix the button's width, then derive the "?" offset from it, so the
   pair is spaced by arithmetic instead of by luck. */
:root{--gn-theme-w:96px;--gn-gap:10px}
.gn-theme{min-width:var(--gn-theme-w);justify-content:center;box-sizing:border-box}
.gn-help-b{right:calc(var(--pad-x) + var(--gn-theme-w) + var(--gn-gap))}
@media (max-width:1100px){.gn-help-b{right:calc(var(--pad-x) + var(--gn-theme-w) + var(--gn-gap))}}
@media (max-width:820px){
  :root{--gn-theme-w:86px}
  .gn-help-b{right:calc(var(--pad-x) + var(--gn-theme-w) + var(--gn-gap))}
}

/* ── v336 ── "A letter from Melo" joins the cluster ─────────────
   Its right edge was already flush with the theme switch — both sit
   at --pad-x. What made it read as a stray was the box: 9px/15px
   padding at 10px type against the switch's 8px/14px at 9px, so it
   was taller, wider-set and heavier than the row it hangs under.
   Matching the metrics is what makes two stacked pills look like one
   control cluster rather than two decisions. */
.gn-note-t{font-size:9px;letter-spacing:.15em;padding:8px 14px;min-height:34px;
  box-sizing:border-box;top:calc(22px + 34px + 8px)}
.gn-note-t .a{font-size:10px}
.gn-note-t__d{width:4px;height:4px}
@media (max-width:820px){
  .gn-note-t{min-height:30px;padding:7px 12px;
    top:calc(var(--gnm-r1-y) + (var(--gnm-r1) - 30px)/2 + 30px + 7px)}
}


/* ══════════════════════════════════════════════════════════════
   v338 — the bug behind every "cropped and blurry" case study
   ══════════════════════════════════════════════════════════════
   `aspect-ratio` only ever computes a MISSING dimension. Give the
   element both a width and a height and it is ignored completely.

   Every <img> on the site carries width= and height= attributes,
   correctly, because they reserve layout space and stop the page
   jumping as images arrive. But a presentational height attribute
   still counts as a specified height. So on any rule that said
   width:100% + aspect-ratio + object-fit:cover without also saying
   height:auto, the aspect-ratio did nothing whatsoever: the image
   rendered at its full natural pixel height, and object-fit:cover
   then cropped a landscape source into a tall box.

   Measured on Tyron Ash: logo-1.jpg is 2000x1125 and was rendering
   667x1125 - three times too tall - so cover discarded two thirds of
   the width and magnified the sliver left over. That is the giant
   cropped wordmark, and the identical fault was live on 40 selectors
   across nearly every case study.

   One declaration each. The aspect-ratios that were written all along
   now actually take effect. */
.ai-toons figure>img,
.alo-films video,
.alo-tri img,
.ar-films video,
.be-grid figure>img,
.cast-board img,
.cx-hero__art img,
.film-full--phone video,
.fr-grid img,
.fr-two img,
.gh-beats img,
.gh-bleed img,
.gh-film-full video,
.gh-two img,
.gh-video,
.ha-bleed img,
.ha-grid img,
.ha-two img,
.jmin-card__img,
.kk-context__films video,
.kk-scale__lg img,
.kk-scale__sm img,
.lac-bleed img,
.lc-film-full video,
.mb-bleed img,
.mb-two img,
.nxt-card__img,
.sec-film video,
.ta-bleed img,
.ta-two img,
.thr-wide img,
.ts-banners video,
.ts-grid img,
.ts-two figure:first-child img,
.ts-two figure:last-child img,
.tt-route__set figure img,
[data-case="arsenal"] .cx-hero__art img,
[data-case="jcs"] .cx-hero__art img,
[data-case="lacpaper"] .cx-hero__art img,
[data-case="sitevis"] .cx-hero__art img{height:auto}

/* ══════════════════════════════════════════════════════════════
   v339 — the remaining crops, measured in a real browser
   ══════════════════════════════════════════════════════════════
   With v338 letting aspect-ratio work again, a rendered audit of all
   42 pages left 18 genuine crops. Each one below is a component whose
   declared ratio simply does not match the shape of the photography
   that goes in it. The ratio moves to the pictures, not the other way
   round. */

/* La Cabra: the closeups are 1228x2200 — very tall. A square box threw
   away 79% of them. */
.lc-grid4 figure{aspect-ratio:2/3}
@media (max-width:820px){.lc-grid4 figure{aspect-ratio:2/3}}

/* Slawn x Rimowa: the product shots are 4:5, not square. */
.sl-build figure{aspect-ratio:4/5}

/* David Morris bridal: campaign frames run close to square. */
.dmb-stills figure{aspect-ratio:4/5}

/* JCS: these are full-page website captures, 1400x3875. No box can
   hold that shape, and it should not try — a site screenshot is read
   from the top, so anchor it there instead of cropping out the middle. */
.jcs-web img{object-position:top center}

/* Gentle Monster: a 4:5 portrait was being poured into a 1.93 bleed,
   losing 141% of the frame. Give the bleed a shape a portrait can
   actually live in, and hold the face. */
[data-case="gentlemonster"] .cs-bleed--wide{aspect-ratio:16/11}
[data-case="gentlemonster"] .cs-bleed--wide img{object-position:center 28%}

/* Fragrance Studies hero: a 16:9 source in a stretched hero column. */
.fr-hero__fig img{object-position:center 34%}

/* Locked cards on the work page: a 2000x921 letterbox inside a 4:5
   card is a 63% crop. Landscape covers get a landscape card. */
.locked-case.locked-wide{aspect-ratio:16/10}

/* ── v340 ── the two things the intro got wrong on a phone ─────
   1 · The wordmark was gated behind body.gn-in, so the brand mark was
   absent from the one screen everybody sees first. The chrome can fade
   in after Enter; the logo should not have to be earned. */
.gn-home{opacity:1}
body.gn-in .gn-home{opacity:1}

/* 2 · "Everything is draggable" is a promise a touchscreen cannot
   keep — there is no field view on a phone, and dragging a piece
   needs a pointer. Each input gets the sentence that is true for it. */
.gn-help--touch{display:none}
body.gn-touch .gn-help--pointer{display:none}
body.gn-touch .gn-help--touch{display:block}
@media (hover:none) and (pointer:coarse){
  .gn-help--pointer{display:none}
  .gn-help--touch{display:block}
}

/* The intro is a full-screen overlay at z-index 30; the wordmark sits
   at 26, so making it opaque was never going to be enough — it was
   behind the curtain. Lift the corner marks above the intro so the
   brand is present on the first screen, which is the whole point of
   putting a logo in a corner. */
.gn-home{z-index:34}
.gn-theme,.gn-help-b{z-index:34}

/* ══════════════════════════════════════════════════════════════
   v343 — resolution caps: never ask a file for pixels it hasn't got
   ══════════════════════════════════════════════════════════════
   A 2x display asks for two device pixels per CSS pixel. Render a
   1080px-wide file at 1300 CSS px and the screen wants 2600 — you are
   asking for 2.4x the detail that was ever captured, and no export
   setting can invent it. The audit found 19 of these.

   The only honest fix is to stop rendering them so large. Each cap
   below is derived from the file itself: max-width = naturalWidth x
   0.65, which lands every one at about 1.3x — inside the range where
   a retina screen still reads the image as sharp. They get smaller,
   and smaller is what sharp looks like here. */

/* 1080px source, was rendering 1300 */
[data-case="artisan"] .en-hero__art{max-width:min(100%,700px)}
/* 1600-1800px sources in the 1352 plate */
[data-case="artisan"] .en-spread > figure,
[data-case="artisan"] .en-duo > figure{max-width:min(100%,1080px);margin-inline:auto}
[data-case="artisan"] .en-spread,[data-case="artisan"] .en-duo{justify-items:center}

/* 692px browser mock — the smallest file on the site */
.ha-site{max-width:min(100%,450px);margin-inline:auto}

/* 1116px Hertha full-length inside the 1000px spread cap */
[data-case="castore"] .cx-spread > figure{max-width:min(100%,720px)}

/* 1700px key visual on a 1440 bleed */
.lac-bleed{max-width:min(100%,1100px);margin-inline:auto}

/* 2000px sources sitting in the 1352 content column */
[data-case="brandstak"] .en-spread > figure,
[data-case="mbm"] .en-spread > figure,
[data-case="talenttalks"] .tt-wide,
[data-case="talenttalks"] .en-spread > figure{max-width:min(100%,1280px);margin-inline:auto}

/* 1760px Gentle Monster hero and the 2000px Ariana sky on full bleeds */
[data-case="gentlemonster"] .cs-bleed--wide,
[data-case="ariana"] .cs-bleed--wide{max-width:min(100%,1140px);margin-inline:auto;border-radius:var(--radius)}

/* v343b — the caps that missed, bound to the containers that exist.
   Several pages carry no data-case at all, and the artisan plates use
   .ar-packs / .ar-grid rather than the shared .en-spread, so the first
   pass matched nothing. Measured again and corrected. */
.ar-packs > figure,.ar-grid > figure{max-width:min(100%,1080px);margin-inline:auto}
.ar-packs,.ar-grid{justify-items:center}
[data-case="thrivin"] .thr-wide img,
[data-case="thrivin"] .en-spread > figure{max-width:min(100%,700px);margin-inline:auto}
/* Gentle Monster's hero is a bare <img> in .cs-hero — 1760px wide,
   was filling a 1440 bleed. */
.cs-hero > img{max-width:min(100%,1140px);margin-inline:auto;display:block}
/* Vokalo's phone frames are 375px screenshots; 298 CSS px is already
   1.6x. They are device mocks, so hold them at true half-size. */
.vk-mobile img,[data-case="vokalo"] .vk-phones img{max-width:188px}
[data-case="thrivin"] .cx-spread > figure{max-width:min(100%,700px)}

/* The last four, same rule: max-width = naturalWidth x 0.65.
   These sit on pages with no data-case attribute, so they bind to the
   component instead. */
.dm-hero__art img,.hidx-lead img{max-width:min(100%,1300px);margin-inline:auto}
.tyron-shopfront,[data-case="tare"] .ta-bleed{max-width:min(100%,1240px);margin-inline:auto}
[data-case="mbm"] .cx-spread > figure,[data-case="mbm"] .mb-wide{max-width:min(100%,1280px);margin-inline:auto}

/* ══════════════════════════════════════════════════════════════
   v347 — GENESIS on a phone: a swipe means forward and back
   ══════════════════════════════════════════════════════════════
   .gn-stage is a fixed layer covering the whole viewport and it
   declared touch-action:none. That is correct on a desktop, where the
   stage is a drag surface for the field. On a phone it meant the
   browser handed every vertical swipe to a gesture handler that does
   not exist there — the field is not offered on touch — so the page
   never scrolled and the corridor never moved.

   On touch the stage gives vertical panning back to the browser. The
   corridor is driven by window.scrollY, so a swipe up travels forward
   and a swipe down travels back. That is the whole interaction, and
   it is the one gesture a phone already has. */
body.gn-touch .gn-stage{touch-action:pan-y}
body.gn-touch[data-view="corridor"] .gn-stage{touch-action:pan-y}
body.gn-touch[data-view="grid"] .gn-stage{touch-action:auto}
/* a piece must still be tappable, but must not swallow the swipe */
body.gn-touch .gn-p{touch-action:pan-y}

/* Nothing on a phone should advertise dragging — there is no drag. */
body.gn-touch .gn-help{display:none}
.gn-help--touch{display:none}
body.gn-touch .gn-help--touch{display:block}

/* ══════════════════════════════════════════════════════════════
   v352 — the library on a phone: denser, and no holes in it
   ══════════════════════════════════════════════════════════════
   Two columns was too generous. It showed six pieces a screen out of
   233, and — worse — the second piece in the archive is one of Melo's
   picks, which spans two columns. On a two-column grid it cannot sit
   beside the first tile, so the browser left the cell next to it empty
   and pushed the pick down a row. That hole beside the opening image
   was the first thing you saw.

   Four columns, and grid-auto-flow:dense. Dense is what closes the
   gap: when a wide tile will not fit the remaining space on a row, the
   grid backfills the hole with the next tile that does fit, instead of
   leaving it blank. Picks and originals still span two, so the wall
   keeps its rhythm — mostly small, occasionally large — and roughly
   three times as much of the archive is on screen at once. */
@media (max-width:820px){
  .gn-grid{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:4px;
    padding-left:10px;padding-right:10px}
  .gn-g--pick{grid-column:span 2;grid-row:span 2}
  .gn-g--orig{grid-column:span 2;grid-row:span 2}
  /* the number and the badges have to shrink with the tile or they
     cover the picture they are labelling */
  .gn-g__n{font-size:7.5px;left:4px;top:4px}
  .gn-g__pick,.gn-g__orig{font-size:6.5px;padding:2px 5px;letter-spacing:.06em}
  .gn-g--pick .gn-g__pick,.gn-g--orig .gn-g__orig{font-size:7.5px;padding:3px 7px}
  .gn-g:not(.gn-g--pick):not(.gn-g--orig) .gn-g__pick,
  .gn-g:not(.gn-g--pick):not(.gn-g--orig) .gn-g__orig{display:none}
}
@media (max-width:400px){
  /* a 4-up tile is about 90px here; the number alone is enough */
  .gn-grid{gap:3px}
  .gn-g:not(.gn-g--pick):not(.gn-g--orig) .gn-g__n{display:none}
}

/* ── v352b · the mobile menu ────────────────────────────────────
   Four stacked fixed bands — the desktop notice, the logo row, the
   tabs, the filter rail — ate 182px before a single image appeared,
   about a fifth of the screen, permanently. It read as a dashboard
   bolted above the work rather than a way into it.

   The notice goes: it is a line about desktops occupying prime space
   on the one device it does not apply to. The logo and the theme
   switch move onto the tab row, which was half empty. That leaves two
   bands instead of four, the grid starts 74px higher, and the archive
   is the first thing on screen. */
@media (max-width:820px){
  .gn-mob{display:none}

  :root{--gnm-r1:0px;--gnm-note:0px;--gnm-r2:46px;--gnm-cats:40px}

  /* one row: mark, tabs, theme */
  .gn-tabs{top:8px;left:56px;right:44px;height:var(--gnm-r2);gap:3px}
  .gn-tab{padding:9px 4px;font-size:9px;letter-spacing:.06em;min-height:34px}

  .gn-home{top:8px;left:10px;height:var(--gnm-r2);display:flex;align-items:center}
  .gn-home__mark{width:40px;height:18px}

  .gn-theme{top:8px;right:10px;height:var(--gnm-r2);min-width:0;width:32px;padding:0;
    justify-content:center;border-radius:50%;font-size:0}
  .gn-theme__d{margin:0}
  .gn-help-b{top:calc(8px + (46px - 28px)/2);right:48px;width:28px;height:28px;font-size:11px}

  /* the filters sit directly under, and the grid starts right after */
  body[data-view="grid"] .gn-cats{top:54px;height:var(--gnm-cats)}
  body[data-view="grid"] .gn-grid{padding-top:104px}

  /* the letter keeps clear of the single bar */
  body[data-view="letter"] .gn-note-sec{padding-top:82px}
  .gn-note-t{top:60px}
}

/* ── v354 · the scrubber ────────────────────────────────────────
   233 pieces is a long way to travel with a thumb. The swipe is for
   looking; this is for going somewhere. Touch only — a mouse has a
   wheel and a desktop has a scrollbar.

   It sits above the readout, thumb-height on a phone, and the number
   beside it says which piece you are level with so a drag has a
   destination rather than being a guess. */
.gn-scrub{display:none}
body.gn-touch[data-view="corridor"] .gn-scrub{
  display:flex;align-items:center;gap:11px;
  position:fixed;left:14px;right:14px;bottom:52px;z-index:30;
  padding:9px 14px;border-radius:999px;
  background:rgba(13,14,19,.82);border:1px solid rgba(238,240,246,.14);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body[data-gn-theme="light"] .gn-scrub{
  background:rgba(246,244,239,.9);border-color:rgba(20,18,14,.14)}

.gn-scrub__i{-webkit-appearance:none;appearance:none;flex:1;height:26px;
  background:transparent;margin:0;outline:none}
.gn-scrub__i::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:rgba(238,240,246,.22)}
.gn-scrub__i::-moz-range-track{height:3px;border-radius:2px;background:rgba(238,240,246,.22)}
/* a 26px target: small enough to look like a hairline, big enough to catch */
.gn-scrub__i::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-11.5px;border-radius:50%;
  background:#eef0f6;border:5px solid rgba(13,14,19,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:grab}
.gn-scrub__i::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:#eef0f6;border:0;box-shadow:0 2px 10px rgba(0,0,0,.5)}
body[data-gn-theme="light"] .gn-scrub__i::-webkit-slider-runnable-track{background:rgba(20,18,14,.2)}
body[data-gn-theme="light"] .gn-scrub__i::-webkit-slider-thumb{
  background:#141210;border-color:rgba(246,244,239,.95)}

.gn-scrub__n{flex:0 0 auto;font-size:10px;letter-spacing:.13em;
  color:rgba(238,240,246,.62);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
body[data-gn-theme="light"] .gn-scrub__n{color:rgba(20,18,14,.6)}

/* With the scrubber present the readout is one thing too many. */
body.gn-touch[data-view="corridor"] .gn-hud__r{display:none}

/* Back to touch-action:none on the stage in the corridor: the swipe is
   handled directly now, and letting the browser also pan the page is
   exactly what was dragging the address bar around. */
body.gn-touch[data-view="corridor"] .gn-stage,
body.gn-touch[data-view="corridor"] .gn-p{touch-action:none}
/* overscroll-behavior stops a swipe at either end handing the gesture to
   the browser, which is the other way the chrome gets yanked about */
body.gn-touch[data-view="corridor"]{overscroll-behavior:none;overflow:hidden}

/* ══════════════════════════════════════════════════════════════
   v355 — the letter was landing on top of the corridor
   ══════════════════════════════════════════════════════════════
   Collapsing the scroll spacer to zero on touch (v354) had a
   consequence I missed. .gn-note-sec is in normal document flow at
   z-index 12, above the fixed stage at z-index 1, and in corridor view
   it carries margin-top:0. The spacer was the only thing holding it
   below the fold. Take the spacer away and the letter renders at y=0,
   over the archive — so on a phone you tapped Enter and landed on the
   letter, unable to move, because the body cannot scroll either.

   On touch the letter is a view, reached by its own tab. It has no
   business being in the flow at any other time. Desktop is untouched:
   the spacer is still there and the letter still lives beneath it. */
body.gn-touch .gn-note-sec{display:none}
body.gn-touch[data-view="letter"] .gn-note-sec{display:block;margin-top:0}

/* In letter view the stage is already hidden, but be explicit — nothing
   from the 3D room should be behind the reading. */
body.gn-touch[data-view="letter"] .gn-stage,
body.gn-touch[data-view="letter"] .gn-scrub,
body.gn-touch[data-view="letter"] .gn-hud{display:none}
/* and the page has to scroll again to read it */
body.gn-touch[data-view="letter"]{overflow-y:auto;overscroll-behavior:auto}


/* ── v359 · the BrandStak icon film ────────────────────────────
   The source is 500x600 — both the mp4 and its poster, checked. The
   figure allowed it 1000 CSS px, which on a 2x screen asks for 2000
   device pixels from a 500px file: a four-fold blow-up, and on flat
   graphic shapes that reads as a smear rather than softness.

   Held at 360px, where a 2x display gets close to the file's real
   resolution and the icon set looks drawn rather than enlarged. */
.bs-film{max-width:min(360px,100%);margin-inline:auto}

/* ══════════════════════════════════════════════════════════════
   v360 — the Original mark, and an atmosphere around the dome
   ══════════════════════════════════════════════════════════════ */

/* ── the Original mark ──────────────────────────────────────────
   The old one was a beige lozenge: too big, too soft, and the
   gradient ran warm so it read as cream plastic rather than metal.
   A first-edition mark should look struck, not stuck on.

   Cooler platinum, a harder specular band across the middle, one
   crisp highlight along the top edge and a shadow under the bottom
   so it sits in the surface. Smaller, tighter, oxblood rather than
   pillarbox — the restraint is what makes it read as expensive. */
.gn-g__orig{
  top:7px;right:7px;font-size:6.5px;letter-spacing:.2em;padding:3px 7px;
  font-weight:600;color:#8c0f18;
  background:linear-gradient(160deg,
    #ffffff 0%, #dcdee3 18%, #f7f8fa 34%, #b9bcc4 52%,
    #eef0f3 68%, #c9ccd3 84%, #fbfcfd 100%);
  box-shadow:
    0 1px 3px rgba(0,0,0,.5),
    inset 0 .5px 0 rgba(255,255,255,.95),
    inset 0 -.5px 0 rgba(90,95,105,.5),
    inset 0 0 0 .5px rgba(120,126,138,.45);
  text-shadow:0 .5px 0 rgba(255,255,255,.5)}
.gn-g--orig::after{box-shadow:inset 0 0 0 1px rgba(214,218,226,.55)}
.gn-g--orig:hover::after{box-shadow:inset 0 0 0 1px rgba(232,236,242,.9)}

/* ── an atmosphere on the dome ──────────────────────────────────
   Gathered, the archive was a ball of pictures floating in nothing.
   A soft halo sitting behind the pieces gives it a body to sit
   against — the same trick that makes a planet read as a sphere
   rather than a circle. Pure CSS, one element, no per-frame cost. */
.gn-halo{position:absolute;top:50%;left:50%;pointer-events:none;z-index:0;
  width:min(150vmin,1500px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;opacity:0;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  background:
    radial-gradient(circle at 38% 32%, rgba(166,204,255,.20), transparent 42%),
    radial-gradient(circle at 68% 70%, rgba(255,170,214,.14), transparent 46%),
    radial-gradient(circle, rgba(120,140,255,.10) 0%, rgba(90,110,220,.05) 46%, transparent 66%);
  filter:blur(28px)}
body[data-view="field"][data-layout="orb"] .gn-halo{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* a thin rim, so the sphere has an edge to be seen against */
.gn-halo::after{content:"";position:absolute;inset:19%;border-radius:50%;
  box-shadow:inset 0 0 90px rgba(166,204,255,.16), 0 0 60px rgba(140,170,255,.10)}
body[data-gn-theme="light"] .gn-halo{
  background:
    radial-gradient(circle at 38% 32%, rgba(90,120,200,.14), transparent 42%),
    radial-gradient(circle at 68% 70%, rgba(200,120,160,.10), transparent 46%),
    radial-gradient(circle, rgba(80,100,190,.08) 0%, transparent 66%)}
@media(prefers-reduced-motion:reduce){.gn-halo{transition:none}}

/* ── v373 · corridor pieces sized so a pair reads whole ─────────
   74vw was two-thirds of the screen each; v361's 46vw got a pair on
   screen but only just, edge to edge, with no room between them and
   nothing but piece in any direction.

   33vw leaves the pair whole with a real gap down the middle and a
   margin at each bezel, so you read a left and a right rather than
   two crops. The JS reads this width back off the element (pieceW)
   to derive the sideways offset, so the two can no longer drift. */
@media (max-width:1099px){
  body[data-view="corridor"] .gn-p{width:min(33vw,140px)}
}

/* A piece that has passed the lens. Without this it keeps scaling with
   perspective until it is a full-bleed blur across the viewport, hiding
   the rank behind it — which on a phone is most of what you were
   looking at. Opacity only: .gn-p already carries a .5s opacity
   transition, so this reads as a dissolve, not a cut. */
body[data-view="corridor"] .gn-p.gn-pass{opacity:0;pointer-events:none}
@media (min-width:1100px){
  body[data-view="corridor"] .gn-p{width:300px}
}

/* ── v368 · Enter stays black ───────────────────────────────────
   v362 turned Enter into a camera move: the intro receding and blurring
   while the archive came forward. It was the wrong place for the effect
   — the black cut was already right. Reverted, and the drama moved to
   where it belongs, the arrival in the corridor. The chrome still waits
   for the cut so the controls do not appear over the intro. */
.gn-tabs,.gn-cats,.gn-hud,.gn-home,.gn-theme,.gn-help-b,.gn-scrub{
  transition:opacity .7s var(--ease) .25s}
body[data-page="genesis"]:not(.gn-in) .gn-tabs,
body[data-page="genesis"]:not(.gn-in) .gn-cats,
body[data-page="genesis"]:not(.gn-in) .gn-hud,
body[data-page="genesis"]:not(.gn-in) .gn-help-b,
body[data-page="genesis"]:not(.gn-in) .gn-scrub{opacity:0;pointer-events:none}
}

/* ── v363 · the letter, tightening into place ───────────────────
   Words start pushed out from the centre of their own line and
   contract as the line arrives. The transform is per word and the
   distance is set from JS, because only a measurement knows where a
   line actually broke at this width. */
.gn-letter__body .gw{display:inline-block}
/* No transition: the position is written every frame from the scroll
   position, so a transition would fight it and lag behind the finger.
   Until the script takes over, the words sit exactly where they belong —
   if the JS never runs, the letter is simply a letter. */
.gn-letter__body.gw-on .gw{will-change:transform,opacity;opacity:.06}
@media(prefers-reduced-motion:reduce){
  .gn-letter__body.gw-on .gw{transform:none!important;opacity:1!important}}

/* ── the arrival plate ──────────────────────────────────────────
   The Genesis plate lands with the camera rather than sitting there
   waiting: tracked out and slightly forward, then settling as the
   corridor comes to rest. It is the only plate that gets this, because
   it is the only one you arrive on. */
.gn-plate[data-at="0.02"] h2,
.gn-plate[data-at="0.02"] p{
  transform:scale(1.14);letter-spacing:.14em;
  transition:transform 1.6s cubic-bezier(.22,1,.36,1),letter-spacing 1.6s cubic-bezier(.22,1,.36,1)}
body.gn-in .gn-plate[data-at="0.02"] h2,
body.gn-in .gn-plate[data-at="0.02"] p{transform:none;letter-spacing:normal}
body.gn-in .gn-plate[data-at="0.02"] p{letter-spacing:.2em}
@media(prefers-reduced-motion:reduce){
  .gn-plate[data-at="0.02"] h2,.gn-plate[data-at="0.02"] p{transform:none;letter-spacing:normal;transition:none}}

/* ── v369 · one scroller in the letter, not two ─────────────────
   body carried overflow-y:auto in letter view, which makes body a
   scroll container in its own right. But body's height is auto, so it
   grows to fit the letter and never has anything to scroll — while the
   document behind it does. Two candidates, one of them dead, and
   scroll position readings that never move.

   The letter is an ordinary long page. Let the document scroll it. */
body[data-view="letter"]{overflow:visible!important}
body.gn-touch[data-view="letter"]{overflow:visible!important;overscroll-behavior:auto}
/* :has() on html is not safe everywhere; body simply stops being a
   scroll container and the document takes it, which is the default. */

/* ══════════════════════════════════════════════════════════════
   v370 — the corridor resolves rather than appears
   ══════════════════════════════════════════════════════════════
   The reference builds its opening from two things: text revealed
   through masks a line at a time, and a heavily blurred field behind
   that resolves as the page settles. Neither is a spinner — the page
   is already there, coming into focus.

   Here the archive is the field. On arrival it is out of focus and
   almost black, the title rises through its own mask, and the corridor
   pulls into focus as the camera flies in. One continuous move: you do
   not wait for the archive, you watch it resolve. */

/* the field, coming into focus */
.gn-space{transition:filter 1.9s cubic-bezier(.22,1,.36,1),opacity 1.5s var(--ease)}
body[data-page="genesis"]:not(.gn-in) .gn-space{filter:blur(26px) saturate(.5) brightness(.35);opacity:.5}
body.gn-in .gn-space{filter:none;opacity:1}

/* a wash over the whole stage that lifts with it */
.gn-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgba(10,10,14,.15),rgba(5,5,7,.92) 82%);
  opacity:1;transition:opacity 1.8s var(--ease)}
body.gn-in .gn-stage::before{opacity:0}

@media(prefers-reduced-motion:reduce){
  .gn-space,.gn-stage::before{transition:none}
  body[data-page="genesis"]:not(.gn-in) .gn-space{filter:none;opacity:1}}

/* ══════════════════════════════════════════════════════════════
   v372 — the first-visit loader
   ══════════════════════════════════════════════════════════════
   Shown only when the head script has set data-loader="1" on <html>:
   once a session, never on a repeat view, never under reduced motion.
   Everything hangs off that attribute so a visitor who is not getting
   the loader pays nothing for it — no hidden overlay, no locked scroll. */
#ldr{display:none}
[data-loader="1"] #ldr{display:block;position:fixed;inset:0;z-index:9000}
[data-loader="1"].ldr-lock,[data-loader="1"].ldr-lock body{overflow:hidden}

/* the two halves that part */
#ldr .h{position:absolute;left:0;right:0;height:50.5%;background:#0a0a0a;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
#ldr .h.t{top:0} #ldr .h.b{bottom:0;transition-delay:.14s}
.ldr-out #ldr .h.t{transform:translateY(-100%)}
.ldr-out #ldr .h.b{transform:translateY(100%)}

/* the reel, standing in the gap the wordmark leaves */
#ldr .band{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:0;overflow:hidden;z-index:2;transition:width 1.1s cubic-bezier(.76,0,.24,1)}
.ldr-part #ldr .band{width:clamp(104px,11vw,168px)}
.ldr-out  #ldr .band{width:0;transition-duration:.7s}
#ldr .reel{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;
  transform:translate3d(0,0,0);backface-visibility:hidden;
  animation:ldrRun 13s linear infinite;animation-play-state:paused}
.ldr-go #ldr .reel{animation-play-state:running}
/* whole pixels: a fractional cell height makes -50% land between pixels and
   the browser resamples the strip every loop, which is what shimmers */
#ldr .reel i{display:block;width:100%;height:186px;margin-bottom:6px;border-radius:2px;
  background-size:cover;background-position:center}
@keyframes ldrRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
#ldr .band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#0a0a0a 0,transparent 15%,transparent 85%,#0a0a0a 100%)}

/* the wordmark, split on its own seam — measured at 8.78% of the artwork */
#ldr .word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:min(42vw,540px);aspect-ratio:1651/443}
#ldr .word span{position:absolute;inset:0;background:#f4f3ef;
  -webkit-mask:url(assets/andmelo-wordmark-loader.png) no-repeat center/contain;
          mask:url(assets/andmelo-wordmark-loader.png) no-repeat center/contain;
  transition:transform 1.25s cubic-bezier(.76,0,.24,1),opacity .45s ease}
#ldr .word .l{clip-path:inset(0 91.22% 0 0)}
#ldr .word .r{clip-path:inset(0 0 0 8.78%)}
.ldr-part #ldr .word .l{transform:translateX(calc(-50vw + 12%))}
.ldr-part #ldr .word .r{transform:translateX(calc(50vw - 12%))}
.ldr-out  #ldr .word span{opacity:0}


@media(max-width:700px){#ldr .word{width:74vw}}
@media(prefers-reduced-motion:reduce){#ldr{display:none!important}}

/* ── v373 · the David Morris header, whole ──────────────────────
   The frame is 2000x921 — a 2.17 ratio — and it was being poured
   into a box 92svh tall, which on a laptop is about 1.74. object-fit
   cover then takes the difference off the sides, which is precisely
   where the Triolette lockup and the David Morris signature sit. The
   header was cropping out the branding it exists to show.

   The section takes the image's own ratio instead, so it runs full
   width with nothing lost. It stays a hero — it is simply the shape
   the picture actually is. */
.cs-hero--bleed{min-height:0;aspect-ratio:2000/921}
.cs-hero--bleed > img{max-width:none;margin-inline:0;object-fit:cover}
/* the copy sits over the lower band, where the frame is quietest */
.cs-hero--bleed .cs-hero-in{padding-bottom:clamp(24px,4vw,54px)}
.cs-hero--bleed::after{background:linear-gradient(to top,rgba(0,0,0,.86),transparent 62%)}
/* on a phone a 2.17 letterbox is too shallow to hold a headline, so it
   goes back to a portrait crop and keeps the subject */
@media (max-width:820px){
  .cs-hero--bleed{aspect-ratio:auto;min-height:76svh}
  .cs-hero--bleed > img{object-position:28% center}
}

/* ── v379 · the loader closing on a phone ──────────────────────
   The band collapses from its parted width to zero. On a laptop that
   is 168px out of 1440 and reads as a wipe. On a phone it is 104px
   out of 390 — a quarter of the screen — and background-size:cover
   re-crops every frame on every animation tick as the box narrows,
   so the pictures visibly crush inwards before they vanish.
   On phones the band keeps its width and fades instead. Nothing is
   re-cropped, so nothing squashes, and it clears well before the two
   halves finish parting. */
@media (max-width:700px){
  .ldr-out #ldr .band{
    width:clamp(104px,11vw,168px);
    opacity:0;
    transition:opacity .42s cubic-bezier(.4,0,.2,1);
  }
  /* the reel stops moving as it goes, so the last thing seen is still */
  .ldr-out #ldr .reel{animation-play-state:paused}
}

/* ── v380 · .cs-pull, the founder's aside ──────────────────────
   This class was written into the David Morris case and never given a
   rule, so the browser fell back to its own <blockquote> defaults: a
   40px indent, body-copy type, and a <cite> whose <b> and <span> are
   both inline — which is why the attribution read "Myles JensenFounder".
   It is a multi-paragraph aside rather than the one-line testimonial
   .cs-vouch handles, so it takes a measured left-aligned column instead
   of that centred setting, and borrows its type scale and its uppercase
   mono attribution so the two read as the same family. */
.cs-pull{
  margin:0 auto;
  max-width:58ch;
  font-family:var(--display);
  font-weight:250;
  font-size:clamp(18px,1.85vw,25px);
  line-height:1.46;
  letter-spacing:-.017em;
  color:var(--ink);
  text-wrap:pretty;
}
.cs-pull p{margin:0 0 1.05em}
.cs-pull p:last-of-type{margin-bottom:0}
.cs-pull em{font-family:var(--serif);font-style:italic;font-weight:400}

/* the attribution: two lines, never one run-on */
.cs-pull cite{
  display:block;
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-style:normal;
}
.cs-pull cite b{
  display:block;
  font-weight:500;
  font-size:13px;
  letter-spacing:-.005em;
  color:var(--ink);
}
.cs-pull cite span{
  display:block;
  margin-top:5px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey);
}
@media(max-width:720px){
  .cs-pull{font-size:18px;line-height:1.5;max-width:none}
  .cs-pull cite{margin-top:24px;padding-top:15px}
}

/* ── v381 · La Cabra, the actual film ──────────────────────
   The film is square, 1080x1080, because it was cut for social first.
   .lc-film-full was setting 4/5 on the poster and .film-full.playing
   drops to aspect-ratio:auto, so pressing play snapped the frame from
   4:5 to 1:1 and shoved everything below it down the page. Matching the
   container to the film's own ratio removes the jump. The hero above it
   is already 1/1, so the two now agree. */
.lc-film-full video{aspect-ratio:1/1}
.lc-film-full.playing video{aspect-ratio:1/1}
@media(max-width:720px){.lc-film-full video,.lc-film-full.playing video{aspect-ratio:1/1}}

/* ── v381 · one client name that goes somewhere ──────────────────────
   Every name in the list already grows a → on hover, so the whole list
   reads as clickable when none of it was. Khloé now genuinely is.
   It is a stretched overlay rather than an <a> around the text: the
   hover state paints the name with a clipped background gradient, and
   wrapping the text in an anchor puts a new element between the li and
   its own text, which kills the fill. This leaves the type alone. */
.clients-list li{position:relative}
.clients-list .cl-link{position:absolute;inset:0;z-index:2;display:block}
.clients-list li:has(.cl-link){cursor:pointer}