/* ============================================================
   VISHESH MAKWANA — PORTFOLIO 2026
   Swiss print-editorial. Paper, ink, hairlines, one signal red.
   Archivo (grotesk, wdth axis) · Times (system serif, italics)
   ============================================================ */

:root{
  --paper:#FAF9F6;
  --ink:#141311;
  --gray:#6E6A63;
  --gray-2:#9B968D;
  --line:#141311;              /* hairlines are ink, not tints */
  --line-soft:rgba(20,19,17,.18);
  --red:#E8391D;
  --dark:#141311;              /* footer block */
  --dark-ink:#F2F0EA;
  --dark-gray:rgba(242,240,234,.55);
  --dark-line:rgba(242,240,234,.22);

  --grot:'Archivo',Helvetica,Arial,sans-serif;
  --times:Times,'Times New Roman',Georgia,serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --maxw:1560px;
  --gut:clamp(18px,3.4vw,56px);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--grot); font-size:16px; line-height:1.6; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
.skip{position:fixed;top:-64px;left:16px;z-index:990;background:var(--ink);color:var(--paper);font-size:12px;font-weight:500;padding:12px 20px;transition:top .3s}
.skip:focus{top:14px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- type utilities ---------- */
.eyebrow{display:inline-flex;align-items:baseline;gap:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.eyebrow::before{content:'●';font-size:7px;color:var(--red);transform:translateY(-1px)}
.eyebrow.noline::before{display:none}
.mono{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.serif-i{font-family:var(--times);font-style:italic;font-weight:400}
.acc{color:var(--red)}

.h-display{font-weight:800;letter-spacing:-.01em;line-height:.92;text-transform:uppercase;font-stretch:115%}
.h-sec{font-weight:800;letter-spacing:-.015em;line-height:.95;font-size:clamp(40px,6vw,96px);text-transform:uppercase;font-stretch:112%}
.h-sec em,.h-display em{font-family:var(--times);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-stretch:100%;font-size:.94em}

/* split-text masking */
[data-split] .sl{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
[data-split] .sl>span{display:block;will-change:transform}

/* generic reveal */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- buttons / tags ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:16px 26px;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:background .25s,color .25s;will-change:transform}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.acc{background:var(--red);border-color:var(--red);color:#fff}
.btn.acc:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{}

.chip{display:inline-flex;align-items:center;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);white-space:nowrap}
.chip::before{content:'[\00a0'}
.chip::after{content:'\00a0]'}
.chip.nda{color:var(--red)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;background:var(--paper);border-bottom:1px solid var(--line);transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);max-width:var(--maxw);margin:0 auto;height:58px}
.brand{font-weight:800;font-size:14px;letter-spacing:.02em;text-transform:uppercase;display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap;font-stretch:112%}
.brand sup{font-size:8px;color:var(--red);letter-spacing:0}
.nav-links{display:flex;gap:0;height:100%}
.nav-links a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;padding:0 20px;border-left:1px solid var(--line-soft);transition:background .25s,color .25s;height:58px}
.nav-links a:last-child{border-right:1px solid var(--line-soft)}
.nav-links a:hover{background:var(--ink);color:var(--paper)}
.nav-right{display:flex;align-items:center;gap:18px;height:100%}
.nav-time{font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--gray);white-space:nowrap;font-variant-numeric:tabular-nums}
.nav-cta{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;height:58px;padding:0 20px;background:var(--ink);color:var(--paper);transition:background .25s}
.nav-cta:hover{background:var(--red);color:#fff}
.nav-back{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.nav-back .arr{transition:transform .35s var(--ease)}
.nav-back:hover .arr{transform:translateX(-4px)}
.nav-back:hover{color:var(--red)}
.burger{display:none;width:58px;height:58px;position:relative;z-index:920;border-left:1px solid var(--line-soft)}
.burger span{position:absolute;left:18px;width:22px;height:2px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.burger span:nth-child(1){top:26px}
.burger span:nth-child(2){top:32px}
body.menu-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media(max-width:960px){
  .nav-links,.nav-time{display:none}
  .burger{display:block}
  .nav-cta{display:none}
}
#menu{position:fixed;inset:0;z-index:890;background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
body.menu-open #menu{clip-path:inset(0 0 0% 0);visibility:visible}
#menu a{font-weight:800;font-size:clamp(34px,8vw,64px);line-height:1.2;text-transform:uppercase;font-stretch:112%;color:var(--ink);border-bottom:1px solid var(--line);padding:12px 0;display:flex;justify-content:space-between;align-items:center}
#menu a:first-of-type{border-top:1px solid var(--line)}
#menu a .mono{color:var(--gray)}
#menu .menu-foot{margin-top:36px;display:flex;gap:26px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* reading progress (case pages) */
#prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:840;background:transparent}
#prog i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}

/* ---------- preloader ---------- */
#loader{position:fixed;inset:0;z-index:980;background:var(--paper);color:var(--ink)}
#loader .ld-tag{position:absolute;top:20px;left:var(--gut);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
#loader .ld-name{position:absolute;bottom:24px;left:var(--gut);font-family:var(--times);font-style:italic;font-size:clamp(18px,2.4vw,28px);overflow:hidden}
#loader .ld-name span{display:inline-block;transform:translateY(110%)}
#loader .ld-num{position:absolute;bottom:0;right:var(--gut);font-weight:800;font-stretch:118%;font-size:clamp(80px,14vw,190px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ============================================================
   HERO (index)
   ============================================================ */
.hero{position:relative;padding-top:58px;display:flex;flex-direction:column;justify-content:flex-start}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 14px;border-bottom:1px solid var(--line);gap:20px}
.hero-top .eyebrow{flex:1}
.hero-coord{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);text-align:right;line-height:1.8}
@media(max-width:700px){.hero-coord{display:none}}

.hero-name{position:relative;z-index:2;user-select:none;padding:clamp(10px,2vh,26px) 0 0}
.hero-name .row{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,30px)}
.hero-name .nm{font-weight:800;text-transform:uppercase;letter-spacing:-.022em;line-height:.88;font-size:clamp(58px,13.4vw,204px);white-space:nowrap;font-stretch:118%}
.hero-name .nm.outline{-webkit-text-stroke:0;color:var(--ink)} /* legacy class, now solid */
.hero-chip{display:none}

.hero-sub{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,80px);align-items:start;margin-top:clamp(20px,3.4vh,40px);padding-top:clamp(18px,3vh,30px);border-top:1px solid var(--line)}
.hero-lede{font-family:var(--times);font-size:clamp(20px,2vw,30px);line-height:1.35;color:var(--ink);max-width:30ch;font-style:italic}
.hero-lede b{font-weight:400;font-style:normal;font-family:var(--grot);font-size:.86em;text-transform:uppercase;letter-spacing:.01em;font-stretch:108%}
.hero-ctas{display:flex;gap:0;justify-content:flex-end;flex-wrap:wrap}
.hero-ctas .btn+.btn{border-left:0}
@media(max-width:880px){.hero-sub{grid-template-columns:1fr}.hero-ctas{justify-content:flex-start}}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr) auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(24px,4vh,52px)}
.hstat{padding:clamp(14px,2.4vh,24px) 18px clamp(14px,2.4vh,24px) 0;border-right:1px solid var(--line-soft);padding-left:18px}
.hstat:first-child{padding-left:0}
.hstat .num{font-weight:800;font-stretch:115%;font-size:clamp(24px,2.4vw,38px);line-height:1;letter-spacing:-.01em}
.hstat .num i{font-family:var(--times);font-style:italic;font-weight:400;color:var(--red)}
.hstat .lbl{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);margin-top:8px}
.hero-scroll{display:flex;align-items:center;gap:12px;padding:0 0 0 22px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.hero-scroll .tick{width:1px;height:38px;background:var(--line-soft);position:relative;overflow:hidden}
.hero-scroll .tick::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--red);animation:drop 1.8s var(--ease-io) infinite}
@keyframes drop{0%{top:-100%}55%{top:0}100%{top:100%}}
@media(max-width:900px){.hero-stats{grid-template-columns:repeat(2,1fr)}.hero-scroll{display:none}.hstat{padding-left:0;border-right:0}}
.hero-glow,.hero-grid-lines{display:none}

/* mobile scroll cue inside the name landing */
.hero-scroll-m{display:none}
/* mobile: the name is a full-screen landing; lede + stats fall below the fold */
@media(max-width:700px){
  .hero{min-height:100svh}
  .hero-name{
    min-height:calc(100svh - 110px);
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(18px,6vh,48px) 0 0;position:relative;
  }
  .hero-name .row{justify-content:flex-start}
  .hero-name .nm{font-size:clamp(40px,13.2vw,60px)}
  .hero-scroll-m{
    display:inline-flex;align-items:center;gap:11px;
    position:absolute;left:0;bottom:20px;
    font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)
  }
  .hero-scroll-m .tick{width:1px;height:32px;background:var(--line-soft);position:relative;overflow:hidden;display:inline-block}
  .hero-scroll-m .tick::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--red);animation:drop 1.8s var(--ease-io) infinite}
  .hero-sub{margin-top:0}
}

/* ---------- marquee (thin ticker) ---------- */
.marquee{border-bottom:1px solid var(--line);padding:12px 0;overflow:hidden;position:relative;background:var(--paper)}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-set{display:flex;align-items:center;flex:0 0 auto}
.mq-set span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding:0 26px;font-style:normal;font-family:var(--grot);color:var(--ink)}
.mq-set .star{color:var(--red);font-size:8px;padding:0}

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.sec{padding:clamp(70px,11vh,150px) 0;position:relative}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,6vh,72px)}
.sec-head .row{display:flex;justify-content:space-between;align-items:baseline;gap:30px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px}
.sec-count{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

/* ============================================================
   FLAGSHIP CASE CARDS — flat editorial plates
   ============================================================ */
.flags{display:flex;flex-direction:column;gap:clamp(30px,5vh,64px)}
.flag{position:sticky;top:calc(58px + clamp(14px,3vh,34px));border:1px solid var(--line);background:var(--paper);overflow:hidden;will-change:transform}
.flag-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:min(76vh,720px)}
.flag-copy{padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;position:relative;border-right:1px solid var(--line)}
.flag-idx{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.flag-title{font-weight:800;letter-spacing:-.015em;line-height:.9;font-size:clamp(44px,5.6vw,96px);margin:clamp(14px,2.4vh,26px) 0 4px;text-transform:uppercase;font-stretch:114%}
.flag-title em{font-family:var(--times);font-style:italic;font-weight:400;color:var(--ink);display:block;font-size:.3em;letter-spacing:0;margin-top:16px;line-height:1.35;text-transform:none;font-stretch:100%;max-width:34ch}
.flag-desc{color:var(--gray);font-size:clamp(14px,1.1vw,16.5px);max-width:48ch;margin-top:clamp(12px,2.2vh,22px);line-height:1.65}
.flag-chips{display:flex;gap:16px;flex-wrap:wrap;margin-top:clamp(16px,2.6vh,26px)}
.flag-cta{margin-top:auto;padding-top:clamp(22px,3.6vh,40px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.flag-media{position:relative;overflow:hidden;min-height:340px;background:#E9E6DF}
.flag-media .ph{position:absolute;inset:0}
.flag-media img{width:100%;height:112%;object-fit:cover;object-position:top center;will-change:transform;transition:transform 1.1s var(--ease)}
.flag-media::after{display:none}
.flag:hover .flag-media img{transform:scale(1.025)}
@media(max-width:920px){
  .flag{position:relative;top:auto}
  .flag-in{grid-template-columns:1fr;min-height:0}
  .flag-copy{border-right:0;border-top:1px solid var(--line)}
  .flag-media{min-height:280px;order:-1}
}

/* ============================================================
   HORIZONTAL GALLERY
   ============================================================ */
.hwrap{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.hgal{display:flex;align-items:stretch;height:100svh;width:max-content;will-change:transform}
.hpanel{flex:0 0 auto;width:clamp(300px,33vw,540px);display:flex;flex-direction:column;justify-content:center;padding:clamp(70px,10vh,110px) clamp(16px,1.8vw,34px) clamp(46px,8vh,90px);border-right:1px solid var(--line-soft)}
.hpanel.intro{width:clamp(320px,36vw,600px);padding-left:var(--gut)}
.hpanel.intro .big{font-weight:800;font-size:clamp(44px,5.4vw,88px);line-height:.92;letter-spacing:-.015em;text-transform:uppercase;font-stretch:114%}
.hpanel.intro .big em{font-family:var(--times);font-style:italic;font-weight:400;text-transform:none;font-stretch:100%}
.hpanel.intro p{color:var(--gray);max-width:34ch;margin-top:20px;font-size:14.5px}
.hpanel.outro{width:clamp(280px,28vw,440px);align-items:flex-start}
.hcard{display:flex;flex-direction:column;height:min(64vh,600px)}
.hcard .win{flex:1;border:1px solid var(--line);overflow:hidden;position:relative;background:#E9E6DF}
.hcard .win img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(1) contrast(1.02);transition:filter .6s,transform 1s var(--ease);will-change:transform}
.hcard:hover .win img{filter:grayscale(0);transform:scale(1.035)}
.hcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 2px 0}
.hcard .meta .t{font-weight:800;font-size:clamp(17px,1.5vw,22px);letter-spacing:.01em;text-transform:uppercase;font-stretch:110%}
.hcard .meta .c{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);white-space:nowrap}
.hcard .go{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:7px;padding:0 2px;display:inline-flex;gap:8px;align-items:center;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-soft)}
a.go:hover{text-decoration-color:var(--red);color:var(--red)}
.hcard .go .arr{color:var(--red);transition:transform .35s var(--ease)}
.hcard:hover .go .arr{transform:translate(3px,-3px)}
.hprog{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,3.6vh,36px);height:2px;background:var(--line-soft)}
.hprog i{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
@media(max-width:900px){
  .hgal{height:auto;width:auto;flex-direction:column;gap:44px;padding:clamp(60px,9vh,90px) var(--gut)}
  .hpanel{width:100%!important;padding:0;border-right:0}
  .hpanel.intro{padding:0}
  .hcard{height:auto}
  .hcard .win{aspect-ratio:4/3}
  .hprog{display:none}
}

/* ============================================================
   ARCHIVE INDEX — ledger table
   ============================================================ */
.index-list{border-top:1px solid var(--line)}
.irow{display:grid;grid-template-columns:58px minmax(0,1.5fr) minmax(0,1fr) 150px 40px;gap:18px;align-items:center;padding:clamp(14px,2.2vh,20px) 10px;border-bottom:1px solid var(--line);position:relative;transition:background .25s,color .25s}
.irow .no{font-size:10.5px;font-weight:500;color:var(--gray);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.irow .pt{font-weight:800;font-size:clamp(18px,2vw,30px);letter-spacing:0;line-height:1.05;text-transform:uppercase;font-stretch:112%;transition:transform .4s var(--ease)}
.irow .pc{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gray)}
.irow .py{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);text-align:right}
.irow .pa{justify-self:end;font-size:15px;color:var(--gray);transition:transform .4s var(--ease),color .25s}
.irow:hover{background:var(--ink);color:var(--paper)}
.irow:hover .no,.irow:hover .pc,.irow:hover .py{color:rgba(250,249,246,.6)}
.irow:hover .pt{transform:translateX(12px)}
.irow:hover .pa{color:var(--red);transform:translateX(4px)}
@media(max-width:760px){
  .irow{grid-template-columns:36px minmax(0,1fr) 30px;gap:12px}
  .irow .pc,.irow .py{display:none}
}
/* floating preview */
#peek{position:fixed;top:0;left:0;z-index:860;width:min(320px,25vw);aspect-ratio:4/3;overflow:hidden;pointer-events:none;opacity:0;transform:scale(.92);transition:opacity .3s,transform .45s var(--ease);box-shadow:0 24px 60px rgba(20,19,17,.35);background:var(--paper);border:1px solid var(--line)}
#peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .2s}
#peek img.on{opacity:1}
#peek.on{opacity:1;transform:scale(1)}
@media(pointer:coarse){#peek{display:none}}

/* ============================================================
   PROCESS
   ============================================================ */
.proc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,100px);align-items:start}
.proc-side{position:sticky;top:calc(58px + clamp(30px,6vh,70px))}
.proc-side .h-sec{margin:20px 0 24px}
.proc-side p{color:var(--gray);max-width:40ch;font-size:14.5px}
.proc-side .pull{font-family:var(--times);font-style:italic;font-weight:400;font-size:clamp(20px,1.9vw,27px);color:var(--ink);border-left:2px solid var(--red);padding-left:20px;margin-top:30px;line-height:1.4}
.steps{display:flex;flex-direction:column;counter-reset:step}
.step{border-top:1px solid var(--line);padding:clamp(26px,4vh,44px) 0}
.step:last-child{border-bottom:1px solid var(--line)}
.step .top{display:flex;align-items:baseline;gap:20px}
.step .n{font-size:11px;font-weight:600;color:var(--red);letter-spacing:.12em}
.step h3{font-weight:800;font-size:clamp(24px,2.6vw,40px);letter-spacing:0;text-transform:uppercase;font-stretch:112%}
.step p{color:var(--gray);margin:14px 0 18px;max-width:58ch;font-size:14.5px}
.step .tags{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:880px){.proc-grid{grid-template-columns:1fr}.proc-side{position:relative;top:auto}}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,100px);align-items:start}
.about-photo{position:sticky;top:calc(58px + clamp(30px,6vh,70px))}
.about-photo .win{overflow:hidden;aspect-ratio:3/4;position:relative;border:1px solid var(--line)}
.about-photo img{width:100%;height:118%;object-fit:cover;object-position:50% 8%;filter:grayscale(1) contrast(1.04);transition:filter .7s;will-change:transform}
.about-photo .win:hover img{filter:grayscale(0)}
.about-photo .cap{display:flex;justify-content:space-between;font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);padding:12px 2px 0}
.about-copy .h-sec{margin:18px 0 26px}
.about-copy .bio{color:var(--ink);font-family:var(--times);font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:56ch}
.about-copy .bio + .bio{margin-top:16px}
.about-copy .bio b{font-weight:400;font-family:var(--grot);font-size:.85em;text-transform:uppercase;letter-spacing:.01em;font-stretch:108%}
@media(max-width:880px){.about-grid{grid-template-columns:1fr}.about-photo{position:relative;top:auto;max-width:400px}}

.xp{margin-top:clamp(36px,5vh,56px)}
.xp .xp-h{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.xrow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.xrow:first-of-type{border-top:1px solid var(--line);margin-top:10px}
.xrow .r{font-weight:800;font-size:clamp(15px,1.3vw,19px);letter-spacing:.01em;text-transform:uppercase;font-stretch:108%}
.xrow .c{font-size:13px;color:var(--gray)}
.xrow .d{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);white-space:nowrap}
.xrow.now .d{color:var(--red)}
@media(max-width:640px){.xrow{grid-template-columns:1fr;gap:3px}}

.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px);margin-top:clamp(36px,5vh,56px)}
.skg h4{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.skg ul{list-style:none}
.skg li{font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);display:flex;justify-content:space-between}
.skg li::after{content:'—';color:var(--line-soft)}
@media(max-width:640px){.skills{grid-template-columns:1fr}}

/* ============================================================
   FOOTER — the one dark plate
   ============================================================ */
.footer{background:var(--dark);color:var(--dark-ink);padding:clamp(80px,13vh,170px) 0 0;position:relative;overflow:hidden;margin-top:clamp(60px,10vh,120px)}
.footer .eyebrow{color:var(--dark-ink)}
.foot-kick{margin-bottom:clamp(26px,4.4vh,48px)}
.foot-title{font-weight:800;letter-spacing:-.02em;line-height:.9;font-size:clamp(52px,9.6vw,170px);text-transform:uppercase;font-stretch:116%}
.foot-title em{font-family:var(--times);font-style:italic;font-weight:400;color:var(--dark-ink);text-transform:none;font-stretch:100%}
.foot-mail{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(26px,4.4vh,50px);font-family:var(--times);font-style:italic;font-size:clamp(20px,2.6vw,34px);color:var(--dark-ink);border-bottom:1px solid var(--dark-line);padding-bottom:8px;transition:color .3s,border-color .3s}
.foot-mail:hover{color:var(--red);border-color:var(--red)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:clamp(50px,8vh,100px);padding:clamp(26px,4vh,40px) 0;border-top:1px solid var(--dark-line)}
.fcol .k{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dark-gray);margin-bottom:14px}
.fcol a,.fcol span{display:block;font-size:13.5px;color:var(--dark-ink);padding:4px 0;transition:color .3s}
.fcol a:hover{color:var(--red)}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0 26px;border-top:1px solid var(--dark-line);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-gray);flex-wrap:wrap}
#top-btn{display:inline-flex;align-items:center;gap:9px;color:var(--dark-ink);transition:color .3s;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
#top-btn:hover{color:var(--red)}
@media(max-width:820px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
/* footer on light case pages sits directly on ink; keep same */
.footer.slim{margin-top:0;padding-top:0;background:var(--paper);color:var(--ink)}
.footer.slim .foot-base{border-top:1px solid var(--line);color:var(--gray)}
.footer.slim #top-btn{color:var(--ink)}
.footer.slim a:hover,.footer.slim #top-btn:hover{color:var(--red)}

/* ============================================================
   CASE PAGES
   ============================================================ */
.chero{padding:calc(58px + clamp(50px,9vh,100px)) 0 clamp(40px,7vh,80px);position:relative}
.chero .crumb{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(18px,3.4vh,34px);border-bottom:1px solid var(--line);padding-bottom:12px}
.ctitle{font-weight:800;letter-spacing:-.02em;line-height:.88;font-size:clamp(48px,9.8vw,158px);text-transform:uppercase;font-stretch:116%}
.ctitle em{font-family:var(--times);font-style:italic;font-weight:400;color:var(--ink);text-transform:none;font-stretch:100%;font-size:.92em}
.clede{font-family:var(--times);font-size:clamp(19px,1.9vw,28px);line-height:1.4;color:var(--ink);max-width:44ch;margin-top:clamp(20px,3.4vh,36px);font-style:italic}
.clede b{font-weight:400;font-style:normal;font-family:var(--grot);font-size:.84em;text-transform:uppercase;letter-spacing:.01em;font-stretch:108%}
.cmeta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(28px,5vh,56px)}
.cmeta>div{padding:clamp(16px,2.6vh,24px) 18px;border-right:1px solid var(--line-soft)}
.cmeta>div:first-child{padding-left:0}
.cmeta>div:last-child{border-right:0}
.cmeta .k{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.cmeta .v{font-size:14px;color:var(--ink);line-height:1.5;font-weight:500}
@media(max-width:760px){.cmeta{grid-template-columns:repeat(2,1fr)}.cmeta>div{padding-left:0;border-right:0}}
.chero-fig{margin-top:clamp(36px,6vh,66px);overflow:hidden;border:1px solid var(--line);position:relative}
.chero-fig .ph{overflow:hidden;position:relative}
.chero-fig img{width:100%;height:auto;display:block;will-change:transform}
.chero-fig.tealbed{background:#E4E1DA}
.chero-fig.tealbed .ph{padding:clamp(22px,4.4vw,70px) clamp(22px,4.4vw,70px) 0}
.chero-fig.bluebed{background:#E4E1DA}
.chero-fig.bluebed .ph{padding:clamp(22px,4.4vw,70px)}
.chero-fig.bluebed img{max-width:880px;margin:0 auto}
.chero-fig .tag{position:absolute;top:14px;right:14px;z-index:3;background:var(--paper);padding:6px 4px;border:1px solid var(--line)}

.nda-bar{border:1px solid var(--line);padding:clamp(18px,2.8vh,26px) clamp(18px,2.6vw,30px);display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,36px);background:var(--paper)}
.nda-bar .txt{flex:1;min-width:260px;color:var(--gray);font-size:13.5px;line-height:1.6}
.nda-bar .txt b{color:var(--ink);font-weight:600}

/* case article — sticky kicker sections */
.cs{padding:clamp(54px,9vh,120px) 0}
.cs.tight{padding-top:0}
.cs-grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(26px,4.4vw,80px);align-items:start}
.cs-kick{position:sticky;top:calc(58px + clamp(24px,4.4vh,50px));display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:12px}
.cs-kick .n{font-size:11px;font-weight:600;color:var(--red);letter-spacing:.12em}
.cs-kick .t{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.cs-h{font-weight:800;letter-spacing:-.01em;line-height:.98;font-size:clamp(28px,3.4vw,52px);margin-bottom:clamp(16px,2.6vh,26px);text-transform:uppercase;font-stretch:112%}
.cs-h em{font-family:var(--times);font-style:italic;font-weight:400;color:var(--ink);text-transform:none;font-stretch:100%;font-size:.96em}
.cs-body p{color:var(--gray);font-size:clamp(14.5px,1.15vw,17px);max-width:64ch;line-height:1.7}
.cs-body p+p{margin-top:14px}
.cs-body p b{color:var(--ink);font-weight:600}
@media(max-width:840px){.cs-grid{grid-template-columns:1fr;gap:20px}.cs-kick{position:relative;top:auto}}

.bigq{font-family:var(--times);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,50px);line-height:1.22;letter-spacing:-.005em;max-width:26ch}
.bigq .q{color:var(--red)}

/* stat band — ruled table */
.statband{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(26px,4.4vh,44px)}
.statband>div{padding:clamp(18px,3vh,30px) clamp(16px,2vw,26px);border-right:1px solid var(--line-soft)}
.statband>div:first-child{padding-left:0}
.statband>div:last-child{border-right:0}
.statband .big{font-weight:800;font-stretch:116%;font-size:clamp(36px,4.4vw,64px);line-height:1;letter-spacing:-.015em}
.statband .big i{font-family:var(--times);font-style:italic;color:var(--red);font-weight:400}
.statband .lbl{font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);margin-top:10px;line-height:1.7}
@media(max-width:760px){.statband{grid-template-columns:repeat(2,1fr)}.statband>div{border-right:0;padding-left:0}}

/* product / scope cards — ruled, square */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(22px,3.6vh,38px);border:1px solid var(--line)}
.pcard{padding:clamp(20px,3vh,32px) clamp(18px,2.2vw,28px);background:var(--paper);position:relative;transition:background .3s,color .3s}
.pcard+.pcard{border-left:1px solid var(--line)}
.pcard:hover{background:var(--ink);color:var(--paper)}
.pcard:hover p{color:rgba(250,249,246,.65)}
.pcard .k{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.pcard h4{font-weight:800;font-size:clamp(20px,2vw,28px);letter-spacing:.01em;margin-bottom:10px;text-transform:uppercase;font-stretch:112%}
.pcard h4 sup{font-size:.42em;color:inherit;opacity:.55;letter-spacing:0}
.pcard p{font-size:13.5px;color:var(--gray);line-height:1.65;transition:color .3s}
@media(max-width:700px){.duo{grid-template-columns:1fr}.pcard+.pcard{border-left:0;border-top:1px solid var(--line)}}

.scope{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(22px,3.6vh,38px);border:1px solid var(--line)}
.scope .sc{padding:22px 20px;background:var(--paper);border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);transition:background .3s,color .3s}
.scope .sc:nth-child(3n){border-right:0}
.scope .sc:nth-child(n+4){border-bottom:0}
.scope .sc:hover{background:var(--ink);color:var(--paper)}
.scope .sc:hover p{color:rgba(250,249,246,.65)}
.scope .sc .k{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.scope .sc h5{font-weight:800;font-size:16px;letter-spacing:.02em;margin-bottom:8px;text-transform:uppercase;font-stretch:110%}
.scope .sc p{font-size:12.5px;color:var(--gray);line-height:1.6;transition:color .3s}
@media(max-width:900px){.scope{grid-template-columns:repeat(2,1fr)}.scope .sc:nth-child(3n){border-right:1px solid var(--line-soft)}.scope .sc:nth-child(2n){border-right:0}.scope .sc:nth-child(n+4){border-bottom:1px solid var(--line-soft)}.scope .sc:nth-child(n+5){border-bottom:0}}
@media(max-width:560px){.scope{grid-template-columns:1fr}.scope .sc{border-right:0!important;border-bottom:1px solid var(--line-soft)!important}.scope .sc:last-child{border-bottom:0!important}}

/* numbered principles */
.prin{display:flex;flex-direction:column;margin-top:clamp(22px,3.6vh,38px)}
.prin .pr{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;padding:clamp(20px,3vh,30px) 0;border-top:1px solid var(--line)}
.prin .pr:last-child{border-bottom:1px solid var(--line)}
.prin .pr .n{font-family:var(--times);font-style:italic;font-size:clamp(22px,2.2vw,32px);color:var(--red);line-height:1}
.prin .pr h5{font-weight:800;font-size:clamp(16px,1.5vw,21px);letter-spacing:.01em;margin-bottom:8px;text-transform:uppercase;font-stretch:110%}
.prin .pr p{font-size:14px;color:var(--gray);max-width:62ch;line-height:1.65}
.prin .pr p b{color:var(--ink);font-weight:600}

/* two-column list block */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);margin-top:clamp(22px,3.6vh,38px)}
.twin .col h5{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.twin .col ul{list-style:none}
.twin .col li{font-size:13.5px;color:var(--gray);padding:11px 0 11px 22px;border-bottom:1px solid var(--line-soft);position:relative;line-height:1.55}
.twin .col li::before{content:'';position:absolute;left:0;top:19px;width:10px;height:2px;background:var(--red)}
.twin .col li b{color:var(--ink);font-weight:600}
@media(max-width:700px){.twin{grid-template-columns:1fr}}

/* quote panel — indented print pull-quote */
.quote-panel{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:clamp(28px,5vh,54px) 0;margin-top:clamp(26px,4.4vh,46px);position:relative}
.quote-panel::before{display:none}
.quote-panel .q{font-family:var(--times);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,38px);line-height:1.3;letter-spacing:-.005em;max-width:32ch}
.quote-panel .q::before{content:'“'}
.quote-panel .q::after{content:'”'}
.quote-panel .by{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-top:20px}
.quote-panel .by::before{content:'— '}

/* outcome rows */
.outs{display:flex;flex-direction:column;margin-top:clamp(22px,3.6vh,38px)}
.out{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:clamp(20px,3.2vh,32px) 0;border-top:1px solid var(--line)}
.out:last-child{border-bottom:1px solid var(--line)}
.out .k{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);padding-top:5px}
.out h5{font-weight:800;font-size:clamp(17px,1.7vw,24px);letter-spacing:.01em;margin-bottom:8px;text-transform:uppercase;font-stretch:110%}
.out p{font-size:14px;color:var(--gray);max-width:64ch;line-height:1.65}
@media(max-width:620px){.out{grid-template-columns:1fr;gap:8px}}

/* figures */
.fig{overflow:hidden;border:1px solid var(--line);margin-top:clamp(22px,3.6vh,38px);position:relative;background:#E9E6DF}
.fig .ph{overflow:hidden}
.fig img{width:100%;will-change:transform}
.figcap{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);margin-top:12px}
.figcap::before{content:'Fig. — ';color:var(--red)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(22px,3.6vh,38px)}
.shots .sh{overflow:hidden;border:1px solid var(--line);background:#E9E6DF}
.shots .sh img{width:100%;transition:transform .8s var(--ease)}
.shots .sh:hover img{transform:scale(1.03)}
@media(max-width:640px){.shots{grid-template-columns:1fr}}

/* IA modules (agarwal) */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(22px,3.6vh,38px);border:1px solid var(--line)}
.mod{border-top:4px solid var(--c,var(--red));padding:22px 20px;background:var(--paper)}
.mod+.mod{border-left:1px solid var(--line-soft)}
.mod .tag{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--red))}
.mod h4{font-weight:800;font-size:18px;margin:10px 0 8px;letter-spacing:.02em;text-transform:uppercase;font-stretch:110%}
.mod p{font-size:12.5px;color:var(--gray);line-height:1.6}
@media(max-width:760px){.mods{grid-template-columns:1fr}.mod+.mod{border-left:0}}

/* insight cards (research) */
.insights{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(22px,3.6vh,38px);border:1px solid var(--line)}
.ins{padding:24px 22px;background:var(--paper)}
.ins+.ins{border-left:1px solid var(--line)}
.ins .n{font-size:9.5px;font-weight:600;letter-spacing:.16em;color:var(--red);text-transform:uppercase}
.ins h5{font-family:var(--times);font-weight:400;font-style:italic;font-size:clamp(18px,1.8vw,24px);margin:14px 0 10px;line-height:1.28;letter-spacing:-.005em;text-transform:none}
.ins p{font-size:13px;color:var(--gray);line-height:1.65}
@media(max-width:700px){.insights{grid-template-columns:1fr}.ins+.ins{border-left:0;border-top:1px solid var(--line)}}

/* CTA band + next case */
.cta-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,4.4vh,46px)}
.nextcase{padding:clamp(70px,11vh,140px) 0 clamp(60px,9vh,110px);border-top:1px solid var(--line)}
.nextcase .k{margin-bottom:22px}
.nextcase a.nx{display:block}
.nextcase .nx-t{font-weight:800;letter-spacing:-.018em;line-height:.9;font-size:clamp(40px,8vw,128px);transition:color .35s;text-transform:uppercase;font-stretch:116%}
.nextcase .nx-t em{font-family:var(--times);font-style:italic;font-weight:400;text-transform:none;font-stretch:100%;font-size:.9em}
.nextcase a.nx:hover .nx-t{color:var(--red)}
.nextcase .nx-m{display:flex;align-items:center;gap:18px;margin-top:20px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}

/* legacy ids kept harmless */
#grain,#cur{display:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}