/* =====================================================================
   QUARK. — Homepage v2 — Editorial
   Palette per brandbook: #FFFFFF · #737373 · #FF1BCD
   Display — Anton (Knockout Featherweight stand-in)
   Body / Sub — Helvetica Neue (Helvetica World stand-in)
===================================================================== */
:root{
  --magenta:#FF1BCD;
  --magenta-deep:#e000b0;
  --ink:#0b0b0b;
  --grey:#737373;
  --grey-line:#e5e5e5;
  --white:#ffffff;
  --display: "Anton","Knockout Featherweight",Impact,"Archivo Narrow",sans-serif;
  --script: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --body: "Helvetica Neue",Helvetica,Arial,sans-serif;
  --soft-w: rgba(255,255,255,.72);
  --softer-w: rgba(255,255,255,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--magenta);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

.stop{color:var(--magenta)}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.005em;line-height:.86}
.eyebrow{font-family:var(--body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:500}

/* ---------------- placeholder boxes (asset slots) ---------------- */
.ph{
  position:relative;
  background:
    linear-gradient(135deg, transparent 49.5%, var(--grey-line) 49.5% 50.5%, transparent 50.5%),
    repeating-linear-gradient(45deg, #f3f3f3 0 14px, #ececec 14px 28px);
  overflow:hidden;outline:1px solid var(--grey-line);outline-offset:-1px;
  display:flex;align-items:flex-end;
}
.ph .ph-tag{
  position:absolute;top:12px;left:14px;font-family:var(--body);font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
}
.ph .ph-body{
  position:relative;z-index:2;padding:14px 16px;color:#000;
  font-family:var(--display);font-size:clamp(18px,1.6vw,26px);text-transform:uppercase;line-height:.95;
  width:100%;
}
.ph .ph-body small{display:block;font-family:var(--body);font-size:10px;letter-spacing:.18em;color:var(--grey);font-weight:500;margin-top:6px;text-transform:uppercase}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* =====================================================================
   NAV
===================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:20px 36px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0));
  backdrop-filter:blur(6px);
  /* revealing: held back a beat, then an unhurried ease-out so it settles in */
  transition:transform .72s cubic-bezier(.16,1,.3,1) .14s, background .4s, color .4s;
  will-change:transform;
}
/* retracted on scroll-down: a smooth, slightly slow glide up — not a snap */
.nav.nav--hidden{
  transform:translateY(-130%);pointer-events:none;
  transition:transform .68s cubic-bezier(.4,0,.2,1) .04s, background .4s, color .4s;
}
@media (prefers-reduced-motion:reduce){
  /* still hide on scroll — just no sliding animation (it snaps in/out) */
  .nav{transition:background .4s, color .4s}
  .nav.nav--hidden{transition:background .4s, color .4s}
}
.nav.dark{background:linear-gradient(180deg,rgba(255,27,205,.92),rgba(255,27,205,0));color:#fff}
.nav.dark .links a, .nav.dark .right{color:#fff}
.nav.dark .right .cta{color:#fff;border-color:rgba(255,255,255,.6)}
.nav .mark{font-family:var(--display);font-size:26px;letter-spacing:0}
.nav .links{display:flex;gap:28px;justify-content:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.nav .links a:hover{color:var(--magenta)}
.nav .right{display:flex;gap:20px;justify-content:flex-end;align-items:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.nav .right .cta{padding:10px 16px;border:1px solid currentColor;transition:background .25s,color .25s}
.nav .right .cta:hover{background:#000;color:#fff;border-color:#000}
.nav.dark .right .cta:hover{background:#fff;color:var(--magenta);border-color:#fff}

/* =====================================================================
   01 · HERO — layered editorial composition
===================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:120px 6vw 80px;overflow:visible}
.hero .watermark{
  position:absolute;left:-3vw;top:8vh;
  font-family:var(--display);font-size:min(58vw,820px);line-height:.78;
  color:#f5f5f5;letter-spacing:-.02em;pointer-events:none;z-index:0;user-select:none;
}
.hero .watermark .stop{color:#fde2f3}
.hero-stage{position:relative;z-index:2;min-height:78vh;display:grid;grid-template-columns:repeat(12,1fr);gap:0;align-items:start}
.hero-line{font-family:var(--display);text-transform:uppercase;line-height:.84;letter-spacing:-.01em;color:#000}
.hero .l1{grid-column:1 / span 8;font-size:clamp(72px,15vw,260px);margin-top:6vh}
.hero .l2{grid-column:4 / span 9;font-size:clamp(64px,13.5vw,232px);color:var(--grey);margin-top:-.18em}
.hero .l3{grid-column:2 / span 11;font-size:clamp(72px,15vw,260px);margin-top:-.16em}
.hero .l3 .pivot{color:var(--magenta)}
.hero-meta{
  position:absolute;left:6vw;bottom:34px;z-index:3;display:flex;gap:36px;align-items:baseline;
}
.hero-meta .display{font-size:32px;line-height:.9}
.hero-meta .label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);max-width:30ch;font-weight:500}
.hero-meta .label b{color:#000;font-weight:600}
.hero-scroll{position:absolute;right:6vw;bottom:40px;z-index:3;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:10px}
.hero-scroll::after{content:"";width:32px;height:1px;background:#000;display:inline-block}

/* =====================================================================
   02 · REASSURANCE — single statement, asymmetric, layered
===================================================================== */
.reassure{position:relative;padding:18vh 6vw 18vh;overflow:hidden}
.reassure::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--grey-line);
}
.reassure .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;position:relative;z-index:2}
.reassure h2{
  grid-column:1 / span 9;
  font-family:var(--display);font-weight:400;font-size:clamp(36px,5.4vw,84px);line-height:1.04;text-transform:none;letter-spacing:-.005em;
  color:var(--grey);text-wrap:balance;
}
.reassure h2 b{color:#000;font-weight:400}
.reassure h2 em{font-style:italic;color:var(--magenta);font-weight:400}
.reassure .aside{grid-column:9 / span 4;margin-top:12vh;font-size:14px;line-height:1.7;color:#222}
.reassure .aside .micro{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin-bottom:10px}
.reassure .sig{
  position:absolute;right:6vw;bottom:6vh;font-family:var(--display);font-size:64px;line-height:.9;color:#000;z-index:3;
}
.reassure .sig .stop{color:var(--magenta)}

/* =====================================================================
   03 · SERVICES — MAGENTA full-bleed, asymmetric editorial rows
===================================================================== */
.svc{
  position:relative;background:var(--magenta);color:#fff;
  padding:18vh 0 14vh;overflow:hidden;
}
.svc .bleed-title{
  font-family:var(--display);font-size:clamp(120px,22vw,360px);line-height:.78;text-transform:uppercase;
  color:rgba(255,255,255,.08);letter-spacing:-.01em;
  position:absolute;left:-2vw;top:-8vh;pointer-events:none;user-select:none;
}
.svc .kicker-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 6vw;margin-bottom:8vh}
.svc .kicker-row h3{
  grid-column:1 / span 8;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(56px,9.6vw,160px);line-height:.86;color:#fff;letter-spacing:-.005em;
}
.svc .kicker-row h3 em{color:#fff;font-style:italic}
.svc .kicker-row .lede{
  grid-column:9 / span 4;align-self:end;
  font-size:15px;line-height:1.55;color:var(--soft-w);max-width:34ch;
}
.svc .kicker-row .lede b{color:#fff;font-weight:500}
.svc-tracks{position:relative;z-index:2}
.svc-track{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;
  padding:46px 6vw;border-top:1px solid rgba(255,255,255,.22);
  position:relative;
}
.svc-track:nth-child(1){padding-left:6vw}
.svc-track:nth-child(2){padding-left:16vw}
.svc-track:nth-child(3){padding-left:26vw}
.svc-track .no{grid-column:span 1;font-family:var(--display);font-size:clamp(40px,4vw,64px);line-height:.85;color:#fff}
.svc-track .name{
  grid-column:span 6;
  font-family:var(--display);font-size:clamp(40px,5.6vw,88px);line-height:.88;text-transform:uppercase;color:#fff;letter-spacing:-.005em;
}
.svc-track .name em{font-style:italic;color:#fff}
.svc-track .desc{
  grid-column:span 4;
  font-size:14px;line-height:1.6;color:var(--soft-w);max-width:42ch;
}
.svc-track .desc b{color:#fff;font-weight:500}
.svc-track .open{
  grid-column:span 1;align-self:end;justify-self:end;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:500;
  border-bottom:1px solid #fff;padding-bottom:3px;
}
.svc-track .open:hover{color:#000;border-color:#000}
.svc-track:nth-child(2){padding-left:calc(6vw + 80px)}
.svc-track:nth-child(3){padding-left:calc(6vw + 160px)}

/* =====================================================================
   04 · PORTFOLIO — immersive collage with title interacting with art
===================================================================== */
.portfolio{position:relative;padding:18vh 4vw 16vh;overflow:hidden}
.portfolio .pf-title{
  font-family:var(--display);text-transform:uppercase;line-height:.84;letter-spacing:-.01em;
  font-size:clamp(80px,15vw,240px);position:relative;z-index:3;pointer-events:none;
}
.portfolio .pf-title-row{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;margin-bottom:-3vh}
.portfolio .pf-title .a{grid-column:1 / span 12;color:#000}
.portfolio .pf-title .b{grid-column:3 / span 12;color:var(--magenta);margin-top:-.12em}
.portfolio .pf-title .b em{font-style:italic;color:#000}

.pf-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:6vw;
  gap:18px;
  margin-top:3vh;
}
.pf-item{
  position:relative;overflow:hidden;cursor:pointer;
  outline:1px solid var(--grey-line);outline-offset:-1px;
  transition:transform .5s cubic-bezier(.2,.7,.1,1), box-shadow .5s;
}
.pf-item .pf-img{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#f3f3f3 0 14px,#ececec 14px 28px);
  transition:transform .9s cubic-bezier(.2,.7,.1,1), filter .5s;
  filter:grayscale(.15);
}
.pf-item:hover .pf-img{transform:scale(1.04);filter:grayscale(0) brightness(1.02)}
.pf-item:hover{transform:translateY(-4px);box-shadow:0 30px 60px -20px rgba(0,0,0,.25)}
.pf-item .pf-overlay{
  position:absolute;inset:auto 0 0 0;padding:18px 20px;color:#fff;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 80%);
  transform:translateY(20%);opacity:0;transition:transform .5s, opacity .5s;
}
.pf-item:hover .pf-overlay{transform:none;opacity:1}
.pf-item .pf-meta{
  position:absolute;top:14px;left:16px;color:#fff;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  mix-blend-mode:difference;z-index:2;font-weight:600;
}
.pf-item .pf-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2vw,32px);line-height:.95;color:#fff}
.pf-item .pf-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:6px;font-weight:500}

/* asymmetric placement */
.pf-1{grid-column:1 / span 7;grid-row:span 8}
.pf-2{grid-column:8 / span 5;grid-row:span 5}
.pf-3{grid-column:8 / span 5;grid-row:span 5;margin-top:0}
.pf-4{grid-column:1 / span 4;grid-row:span 6}
.pf-5{grid-column:5 / span 4;grid-row:span 6}
.pf-6{grid-column:9 / span 4;grid-row:span 6}

.pf-cap{margin-top:4vh;display:flex;justify-content:space-between;align-items:baseline;padding:0 2vw}
.pf-cap .l{font-size:13px;color:var(--grey);max-width:46ch;line-height:1.55}
.pf-cap .l b{color:#000}
.pf-cap .r{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;border-bottom:1px solid #000;padding-bottom:3px}
.pf-cap .r:hover{color:var(--magenta);border-color:var(--magenta)}

/* =====================================================================
   05 · WORKING MODEL — layered manifesto with floating numbers
===================================================================== */
.model{position:relative;padding:18vh 6vw 14vh;overflow:hidden}
.model .head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:10vh}
.model .head h2{
  grid-column:1 / span 9;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(56px,10vw,180px);line-height:.86;letter-spacing:-.005em;
}
.model .head h2 .grey{color:var(--grey)}
.model .head h2 em{font-style:italic;color:var(--magenta)}
.model .head .note{
  grid-column:9 / span 4;
  font-size:14px;color:var(--grey);line-height:1.6;max-width:32ch;
}
.model .head .note b{color:#000;font-weight:500}
.principles{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;row-gap:8vh}
.principle{position:relative;grid-column:span 4;padding-top:80px}
.principle:nth-child(1){grid-column:1 / span 5}
.principle:nth-child(2){grid-column:5 / span 4;margin-top:8vh}
.principle:nth-child(3){grid-column:9 / span 4;margin-top:16vh}
.principle .big-n{
  position:absolute;top:-30px;left:-10px;
  font-family:var(--display);font-size:clamp(140px,16vw,260px);line-height:.78;color:#f1f1f1;letter-spacing:-.02em;z-index:0;pointer-events:none;
}
.principle .big-n .stop{color:#ffd8f0}
.principle h3{position:relative;z-index:2;font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1;margin-bottom:14px}
.principle p{position:relative;z-index:2;font-size:14.5px;line-height:1.6;color:#222;max-width:34ch}
.principle p b{font-weight:500}

/* =====================================================================
   06 · INSIGHTS — asymmetric editorial masonry (replaces Maison Fibre)
===================================================================== */
.insights{position:relative;padding:10vh 4vw 11vh;background:#fafafa;overflow:hidden}
.insights .ins-head{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;gap:24px;margin-bottom:3vh;padding:0 2vw}
.insights h2{
  grid-column:1 / span 5;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(64px,11vw,200px);line-height:.86;letter-spacing:-.005em;
}
.insights h2 .grey{color:var(--grey)}
.insights h2 em{font-style:italic;color:var(--magenta)}
.insights .ins-head .meta{grid-column:6 / span 7;font-size:13px;line-height:1.6;color:var(--grey);max-width:68ch;align-self:end}
.insights .ins-head .meta b{color:#000;font-weight:500}
.insights .ins-head .meta a{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid #000;padding-bottom:3px;color:#000;font-weight:500}
.insights .ins-head .meta a:hover{color:var(--magenta);border-color:var(--magenta)}

.ins-grid{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:5.4vw;gap:14px;padding:0 2vw;position:relative;
}
.article{
  position:relative;overflow:hidden;background:#fff;
  outline:1px solid var(--grey-line);outline-offset:-1px;
  transition:transform .4s, box-shadow .4s;
}
.article:hover{transform:translateY(-4px);box-shadow:0 30px 60px -25px rgba(0,0,0,.18)}
.article .a-img{
  position:relative;
  background:repeating-linear-gradient(45deg,#f3f3f3 0 14px,#ececec 14px 28px);
}
.article .a-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.article .a-tag{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);font-weight:600}
.article .a-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.4vw,40px);line-height:.95;color:#000;letter-spacing:-.005em}
.article .a-title em{font-style:italic;color:var(--magenta)}
.article .a-excerpt{font-size:13.5px;line-height:1.55;color:#333;margin-top:4px}
.article .a-meta{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-top:auto;display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-weight:500}
.article .a-meta b{color:#000;font-weight:500}

.article.feat{grid-column:1 / span 7;grid-row:span 9;display:grid;grid-template-rows:1fr auto}
.article.feat .a-img{min-height:0}
.article.feat .a-title{font-size:clamp(36px,4vw,64px)}
.article.feat .a-excerpt{font-size:15px;max-width:54ch}

.article.a2{grid-column:8 / span 5;grid-row:span 5;display:grid;grid-template-rows:60% 40%}
.article.a2 .a-img{min-height:0}

.article.a3{grid-column:8 / span 3;grid-row:span 4;background:var(--magenta);color:#fff;outline:0}
.article.a3 .a-body{padding:24px}
.article.a3 .a-tag{color:#fff}
.article.a3 .a-title{color:#fff}
.article.a3 .a-title em{color:#000}
.article.a3 .a-excerpt{color:var(--soft-w)}
.article.a3 .a-meta{color:var(--softer-w)}
.article.a3 .a-meta b{color:#fff}

.article.a4{grid-column:11 / span 2;grid-row:span 4;display:grid;grid-template-rows:1fr auto}
.article.a4 .a-img{min-height:0}
.article.a4 .a-title{font-size:18px}
.article.a4 .a-excerpt{display:none}

/* shown only on the compact mobile bar list — see mobile-optimize.html */
.ins-more{display:none}

/* =====================================================================
   07 · FIT FILTER — MAGENTA, asymmetric two-list spread
===================================================================== */
.fit{position:relative;background:var(--magenta);color:#fff;padding:10vh 6vw 11vh;overflow:hidden}
.fit .bleed-title{
  position:absolute;left:-2vw;bottom:-6vh;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(120px,22vw,380px);line-height:.78;color:rgba(255,255,255,.08);pointer-events:none;user-select:none;letter-spacing:-.01em;
}
/* one line now: heading fills the width, the lede sits just beneath it */
.fit-head{display:block;margin-bottom:3vh}
.fit-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(56px,10vw,170px);line-height:.86;letter-spacing:-.005em}
.fit-head h2 em{font-style:italic}
.fit-head .lede{font-size:14px;line-height:1.6;color:var(--soft-w);max-width:60ch;margin-top:16px}
.fit-head .lede b{color:#fff;font-weight:500}
.fit-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:48px}
.fit-cols .yes{grid-column:1 / span 6}
.fit-cols .no{grid-column:8 / span 5;margin-top:4vh}
.fit-cols h3{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(36px,4.4vw,68px);line-height:.95;margin-bottom:24px;display:flex;align-items:baseline;gap:14px;
}
.fit-cols h3 .dot{width:14px;height:14px;background:#fff;display:inline-block;border-radius:50%}
.fit-cols .no h3 .dot{background:transparent;border:1.5px solid #fff}
.fit-cols ul{list-style:none;display:flex;flex-direction:column;gap:0}
.fit-cols li{padding:18px 0;border-top:1px solid rgba(255,255,255,.25);font-size:15.5px;line-height:1.5;color:#fff}
.fit-cols li:last-child{border-bottom:1px solid rgba(255,255,255,.25)}
.fit-cols li b{font-weight:500}
.fit-cols .no li{color:var(--soft-w)}
.fit-cols .no li b{color:#fff}

/* =====================================================================
   08 · FINAL CONVERSATION — closing, white with magenta block
===================================================================== */
.talk{position:relative;padding:22vh 6vw 14vh;overflow:hidden}
.talk .watermark{
  position:absolute;right:-4vw;top:14vh;font-family:var(--display);font-size:min(50vw,720px);line-height:.78;color:#fafafa;letter-spacing:-.02em;pointer-events:none;user-select:none;z-index:0;
}
.talk h2{
  position:relative;z-index:2;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(80px,15vw,260px);line-height:.84;letter-spacing:-.01em;
}
.talk h2 .a{display:block}
.talk h2 .b{display:block;color:var(--grey);margin-left:8vw}
.talk h2 .c{color:var(--magenta);font-style:italic;margin-left:2vw}
.talk-row{position:relative;z-index:2;margin-top:5vh;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.talk-row .sub{grid-column:1 / span 6;font-size:18px;line-height:1.5;color:#222;max-width:40ch}
.talk-row .sub b{font-weight:500}
.talk-row .actions{grid-column:8 / span 5;display:flex;flex-direction:column;gap:34px}
.talk-row .actions a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:22px 24px;background:#000;color:#fff;transition:background .3s;
}
.talk-row .actions a:nth-child(2){background:var(--magenta)}
.talk-row .actions a:hover{background:var(--magenta)}
.talk-row .actions a:nth-child(2):hover{background:#000}
.talk-row .actions a .n{font-family:var(--display);font-size:32px;line-height:.9}
.talk-row .actions a .n .stop{color:#fff}
.talk-row .actions a .t{font-size:14px;letter-spacing:.04em}
.talk-row .actions a .t b{font-weight:500}
.talk-row .actions a .arr{font-family:var(--display);font-size:32px}
.talk .sign{position:relative;z-index:2;margin-top:5vh;display:flex;justify-content:space-between;align-items:baseline;padding-top:24px;border-top:1px solid var(--grey-line);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:500}
.talk .sign b{color:#000;font-weight:500}

/* =====================================================================
   FOOTER
===================================================================== */
footer.end{padding:36px 6vw;background:#000;color:#fff}
footer.end .row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:24px;align-items:start}
footer.end b{display:block;margin-bottom:10px;font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--softer-w)}
footer.end .col a{display:block;padding:3px 0;font-size:14px;color:#fff;transition:color .25s}
footer.end .col a:hover{color:var(--magenta)}
footer.end .col p{font-size:14px;color:var(--soft-w);line-height:1.55}
footer.end .mark{font-family:var(--display);font-size:84px;line-height:.85;color:#fff;justify-self:end}
footer.end .mark .stop{color:var(--magenta)}
footer.end .bot{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--softer-w)}

/* =====================================================================
   LIGHTBOX (portfolio click-to-expand)
===================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);
  opacity:0;pointer-events:none;transition:opacity .4s;display:flex;align-items:center;justify-content:center;padding:4vw;
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox .lb-inner{
  background:#fff;width:100%;max-width:1280px;max-height:90vh;overflow:auto;
  display:grid;grid-template-columns:1.4fr 1fr;transform:translateY(20px) scale(.985);transition:transform .5s cubic-bezier(.2,.7,.1,1);
}
.lightbox.open .lb-inner{transform:none}
.lightbox .lb-img{
  min-height:60vh;
  background:repeating-linear-gradient(45deg,#f3f3f3 0 14px,#ececec 14px 28px);
}
.lightbox .lb-body{padding:48px 44px;display:flex;flex-direction:column;gap:18px}
.lightbox .lb-tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);font-weight:600}
.lightbox .lb-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(36px,4vw,64px);line-height:.92;letter-spacing:-.005em}
.lightbox .lb-title em{font-style:italic;color:var(--magenta)}
.lightbox .lb-desc{font-size:15px;line-height:1.6;color:#222}
.lightbox .lb-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:18px;border-top:1px solid var(--grey-line);margin-top:auto}
.lightbox .lb-metrics div{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.lightbox .lb-metrics div b{display:block;font-family:var(--display);font-size:34px;color:#000;letter-spacing:0;margin-bottom:2px}
.lightbox .lb-metrics div b em{font-style:normal;color:var(--magenta)}
.lightbox .lb-close{
  position:absolute;top:24px;right:28px;color:#fff;width:48px;height:48px;border:1px solid rgba(255,255,255,.4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.lightbox .lb-close:hover{background:#fff;color:#000}

/* =====================================================================
   TWEAKS PANEL — kept lightweight
===================================================================== */
#tweaks-panel{
  position:fixed;right:20px;bottom:20px;width:300px;z-index:120;
  background:#fff;border:1px solid #000;box-shadow:0 30px 70px -20px rgba(0,0,0,.35);display:none;
}
#tweaks-panel.open{display:block}
#tweaks-panel .tw-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #000}
#tweaks-panel .tw-title{font-family:var(--display);font-size:20px}
#tweaks-panel .tw-title .stop{color:var(--magenta)}
#tweaks-panel #tw-close{font-size:22px;cursor:pointer}
#tweaks-panel .tw-body{padding:16px;display:flex;flex-direction:column;gap:16px}
#tweaks-panel .tw-note{font-size:11px;line-height:1.5;color:var(--grey)}
#tweaks-panel .tw-row-top{display:flex;justify-content:space-between;margin-bottom:6px;align-items:baseline}
#tweaks-panel .tw-key{font-size:10px;letter-spacing:.2em;text-transform:uppercase}
#tweaks-panel .tw-val{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);font-weight:500}
#tweaks-panel .tw-toggle{display:flex;border:1px solid #000}
#tweaks-panel .tw-toggle button{flex:1;background:#fff;border-right:1px solid #000;padding:8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
#tweaks-panel .tw-toggle button:last-child{border-right:0}
#tweaks-panel .tw-toggle button.on{background:#000;color:#fff}
#tweaks-panel .tw-toggle button:hover:not(.on){color:var(--magenta)}

body.accent-soft{--magenta:#ff8fde}
body.accent-loud{--magenta:#ff00c8}

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width:1100px){
  .nav .links{display:none}
  .hero .l1,.hero .l2,.hero .l3{grid-column:1 / -1}
  .hero-meta{position:static;margin-top:30px;flex-direction:column;gap:14px}
  .hero-scroll{display:none}
  .reassure .grid{grid-template-columns:1fr}
  .reassure h2,.reassure .aside{grid-column:1}
  .reassure .aside{margin-top:32px}
  .reassure .sig{position:static;margin-top:30px;font-size:48px}
  .reassure::before{display:none}
  .svc-track,.svc .kicker-row{padding-left:6vw !important}
  .svc-track{grid-template-columns:1fr;gap:14px}
  .svc-track .no,.svc-track .name,.svc-track .desc,.svc-track .open{grid-column:1}
  .pf-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:14vw}
  .pf-1{grid-column:1 / -1;grid-row:span 5}
  .pf-2,.pf-3{grid-column:span 3;grid-row:span 4}
  .pf-4,.pf-5,.pf-6{grid-column:span 2;grid-row:span 4}
  .model .head h2,.model .head .note{grid-column:1 / -1}
  .principles{grid-template-columns:1fr}
  .principle,.principle:nth-child(1),.principle:nth-child(2),.principle:nth-child(3){grid-column:1;margin-top:0}
  .ins-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:auto}
  .article,.article.feat,.article.a2,.article.a3,.article.a4{grid-column:1 / -1;grid-row:auto}
  .article .a-img{aspect-ratio:16/9}
  .article.feat .a-img{aspect-ratio:16/10}
  .fit-cols{grid-template-columns:1fr}
  .fit-cols .yes,.fit-cols .no{grid-column:1;margin-top:0}
  .talk h2 .b,.talk h2 .c{margin-left:0}
  .talk-row .sub,.talk-row .actions{grid-column:1 / -1}
  .lightbox .lb-inner{grid-template-columns:1fr}
  .lightbox .lb-img{aspect-ratio:16/9;min-height:auto}
  footer.end .row{grid-template-columns:1fr 1fr}
  footer.end .mark{justify-self:start;font-size:56px;margin-top:20px}
}
@media (max-width:640px){
  .hero{padding:120px 5vw 60px}
  .reassure,.svc,.portfolio,.model,.insights,.fit,.talk{padding-left:5vw;padding-right:5vw}
  .pf-grid{grid-template-columns:1fr;grid-auto-rows:60vw}
  .pf-1,.pf-2,.pf-3,.pf-4,.pf-5,.pf-6{grid-column:1;grid-row:span 1}
}

/* =====================================================================
   v4 — Highlight boxes, abstract placements, no fades, tighter heads
   - Cursive removed; em words get rectangular highlight box (Anton)
   - Fades on magenta/white section edges removed
   - Headings: bigger, tighter line-height, abstract placement
===================================================================== */

/* ---------- Global grain texture (keep — gentle connective layer) ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;opacity:.05;mix-blend-mode:multiply;
}
.nav, .lightbox, #tweaks-panel{z-index:90}
.lightbox{z-index:200}#tweaks-panel{z-index:120}

/* Continuous editorial hairline */
body::after{
  content:"";position:fixed;top:0;bottom:0;left:6vw;width:1px;
  background:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  opacity:.04;pointer-events:none;z-index:1;
}

/* ---------- HIGHLIGHT BOXES (replace cursive em) ---------- */
/* White-bg sections — pink box, white text */
.hero-line em, .hero .pivot,
.portfolio .pf-title em, .portfolio .pf-title em em,
.model .manifesto h2 em, .model .principle h3 em,
.insights h2 em, .article .a-title em,
.talk h2 em, .talk h2 .c,
.form-page .head h1 em,
.reassure h2 em{
  display:inline-block;
  background:var(--magenta);color:#fff;
  padding:0.231em 0.0814em 0.276em 0.0814em;
  font-family:var(--display);font-style:normal;text-transform:uppercase;
  font-weight:400;letter-spacing:-.005em;line-height:0.72;
  margin:0 .02em;
  vertical-align:baseline;
}

/* Magenta-bg sections — white box, pink text */
.svc .kicker-row h3 em,
.svc-track .name em,
.fit-cols .yes h3 em, .fit-cols .no h3 em,
.article.a3 .a-title em{
  display:inline-block;
  background:#fff;color:var(--magenta);
  padding:0.231em 0.0814em 0.276em 0.0814em;
  font-family:var(--display);font-style:normal;text-transform:uppercase;
  font-weight:400;letter-spacing:-.005em;line-height:0.72;
  margin:0 .02em;opacity:1;
  vertical-align:baseline;
}

/* Fit Filter periods — no rectangle, render inline as plain dot */
.fit-head h2 em{
  display:inline !important;
  background:transparent !important;
  color:inherit !important;
  padding:0 !important;
  margin:0 !important;
  font-family:inherit !important;
  font-style:normal !important;
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
  vertical-align:baseline !important;
}

/* Reassurance em — Helvetica-style, sentence-case word phrase. Smaller relative size so it sits in body line. */
.reassure h2 em{
  font-size:.9em;
  letter-spacing:0;
}

/* Hero pivot specifically */
.hero .pivot{transform:none;font-size:1em}

/* ---------- REMOVE ALL SECTION FADES (per request) ---------- */
.svc::before, .svc::after,
.fit::before, .fit::after,
.portfolio::before, .portfolio::after,
.model::before, .model::after,
.insights::before, .insights::after,
.talk::before, .talk::after,
.reassure::before, .reassure::after{content:none !important;display:none !important}

/* ---------- BIGGER, BOLDER, TIGHTER HEADINGS ---------- */
.hero-line{letter-spacing:-.022em;line-height:.8}
.hero .l1{font-size:clamp(80px,16vw,280px);margin-top:2vh;grid-column:1 / span 8}
.hero .l2{font-size:clamp(72px,14vw,240px);grid-column:5 / span 8;color:var(--grey);margin-top:0}
.hero .l3{font-size:clamp(80px,16vw,280px);grid-column:2 / span 11;margin-top:0;margin-left:.6vw}
.hero-stage{min-height:78vh}
.hero .watermark{font-size:min(56vw,820px);top:10vh;left:-4vw;opacity:.85}

/* Services head */
.svc .kicker-row h3{font-size:clamp(72px,12vw,200px);line-height:.82;letter-spacing:-.02em}

/* Portfolio title */
.portfolio .pf-title{font-size:clamp(96px,17vw,300px);line-height:.8;letter-spacing:-.025em;padding:0 2vw}
.portfolio .pf-title-row{display:flex;align-items:end}
.portfolio .pf-title.a{margin:0 0 0 -.5vw}
.portfolio .pf-title.b{margin-top:-.04em;margin-left:18vw;color:#000}

/* Model manifesto */
.model .manifesto h2{font-size:clamp(64px,9.6vw,170px);line-height:.82;letter-spacing:-.02em;position:relative;left:-1vw}

/* Insights head */
.insights h2{font-size:clamp(80px,13vw,240px);line-height:.8;letter-spacing:-.02em;margin-left:-.4vw}

/* Fit head */
.fit-head h2{font-size:clamp(72px,12vw,200px);line-height:.82;letter-spacing:-.02em}

/* Talk head — abstract stair-step pushed further */
.talk h2{font-size:clamp(96px,17vw,300px);line-height:.8;letter-spacing:-.025em}
.talk h2 .a{margin-left:-1vw;display:block}
.talk h2 .b{margin-left:14vw;display:block}
.talk h2 .c{margin-left:5vw;font-size:1em}

/* Principle h3 — smaller heading, tighter */
.model .principles .principle h3{font-size:clamp(28px,3.2vw,52px);line-height:.94;letter-spacing:-.01em;font-family:var(--display);text-transform:uppercase;margin-bottom:14px}

/* Article titles */
.article .a-title{line-height:.9;letter-spacing:-.012em}

/* ---------- REASSURANCE — revert to original (centered statement + sig) ---------- */
.reassure{padding:18vh 6vw 18vh;position:relative}
.reassure .eyebrow-top, .reassure .rule, .reassure .foot{display:none !important}
.reassure .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.reassure .grid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--grey-line)}
.reassure h2{
  grid-column:1 / span 9;
  font-family:var(--display);font-weight:400;font-size:clamp(40px,5.8vw,92px);
  line-height:1.04;letter-spacing:-.005em;color:var(--grey);
  text-transform:none;text-wrap:balance;
}
.reassure h2 .grey{color:var(--grey)}
.reassure h2 b{color:#000;font-weight:400}
.reassure .pull, .reassure .aside{
  display:block !important;
  grid-column:9 / span 4;
  margin-top:12vh;font-size:14px;line-height:1.7;color:#222;border:0;padding:0;
}
.reassure .pull .micro, .reassure .aside .micro{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin-bottom:10px;display:block}
.reassure .pull b, .reassure .aside b{color:#000;font-weight:500}
.reassure > .sig{
  display:block !important;
  position:absolute;right:6vw;bottom:6vh;
  font-family:var(--display);font-size:clamp(40px,5vw,72px);line-height:.9;color:#000;
}
.reassure > .sig .stop{color:var(--magenta)}

/* ---------- Insights — keep, no fade ---------- */
.insights{background:#fafafa;position:relative}
.insights .ins-head .meta a{color:var(--magenta);border-color:var(--magenta)}

/* ---------- PORTFOLIO collage (unchanged grid) ---------- */
.portfolio{padding:14vh 4vw 14vh;position:relative}
.portfolio .pf-eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--magenta);
  font-weight:600;padding:0 2vw 14px;display:flex;justify-content:space-between;align-items:baseline;
}
.portfolio .pf-eyebrow span:last-child{color:var(--magenta)}

.pf-grid{
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(10,4.4vw);
  gap:8px;padding:0 2vw;margin-top:3vh;
}
.pf-grid .pf-item{position:relative;cursor:pointer;overflow:hidden;outline:1px solid var(--grey-line);outline-offset:-1px;transition:transform .5s cubic-bezier(.2,.7,.1,1), box-shadow .5s, filter .4s}
.pf-grid .pf-item:hover{transform:translateY(-3px);box-shadow:0 24px 50px -22px rgba(0,0,0,.22);z-index:5}
.pf-grid .pf-item .pf-img{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#f1f1f1 0 12px,#e8e8e8 12px 24px);transition:transform .9s cubic-bezier(.2,.7,.1,1), filter .5s;filter:grayscale(.18)}
.pf-grid .pf-item:hover .pf-img{transform:scale(1.05);filter:grayscale(0) brightness(1.04)}
.pf-grid .pf-item .pf-meta{position:absolute;top:10px;left:12px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:600;mix-blend-mode:difference;z-index:3}
.pf-grid .pf-item .pf-overlay{position:absolute;inset:auto 0 0 0;padding:14px 14px;color:#fff;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 80%);transform:translateY(20%);opacity:0;transition:transform .45s, opacity .45s}
.pf-grid .pf-item:hover .pf-overlay{transform:none;opacity:1}
.pf-grid .pf-item .pf-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(16px,1.6vw,26px);line-height:.95;color:#fff}
.pf-grid .pf-item .pf-tag{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:4px;font-weight:500}
.pf-grid .t01{grid-column:1 / 4;  grid-row:1 / 7}
.pf-grid .t02{grid-column:4 / 9;  grid-row:1 / 3}
.pf-grid .t03{grid-column:9 / 13; grid-row:1 / 4}
.pf-grid .t04{grid-column:4 / 7;  grid-row:3 / 6}
.pf-grid .t05{grid-column:7 / 9;  grid-row:3 / 7}
.pf-grid .t06{grid-column:9 / 13; grid-row:4 / 7}
.pf-grid .t07{grid-column:1 / 4;  grid-row:7 / 11}
.pf-grid .t08{grid-column:4 / 7;  grid-row:6 / 9}
.pf-grid .t09{grid-column:7 / 10; grid-row:7 / 11}
.pf-grid .t10{grid-column:10 / 13;grid-row:7 / 9}
.pf-grid .t11{grid-column:4 / 7;  grid-row:9 / 11}
.pf-grid .t12{grid-column:10 / 13;grid-row:9 / 11}
.pf-cap{margin-top:5vh;padding:0 2vw}
.pf-grid .pf-1, .pf-grid .pf-2, .pf-grid .pf-3, .pf-grid .pf-4, .pf-grid .pf-5, .pf-grid .pf-6{display:none}

/* ---------- WORKING MODEL split (unchanged) ---------- */
.model{padding:18vh 6vw 18vh;position:relative}
.model .head{display:none}
.model .split{display:grid;grid-template-columns:repeat(12,1fr);gap:48px;align-items:start}
.model .manifesto{grid-column:1 / span 5;position:sticky;top:120px;align-self:start}
.model .manifesto .eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin-bottom:24px}
.model .manifesto h2 .grey{color:var(--grey)}
.model .manifesto .note{margin-top:30px;font-size:14.5px;line-height:1.6;color:#222;max-width:40ch}
.model .manifesto .note b{color:#000;font-weight:500}
.model .manifesto .sig{margin-top:28px;font-family:var(--body);font-style:normal;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:500}
.model .principles{grid-column:7 / span 6;display:flex;flex-direction:column;gap:0;margin:0}
.model .principles .principle{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding:36px 0;border-top:1px solid #000;margin:0;position:relative;
  grid-column:auto !important;
}
.model .principles .principle:last-child{border-bottom:1px solid #000}
.model .principles .principle .big-n{
  position:static;font-family:var(--display);font-size:clamp(60px,7vw,100px);line-height:.85;
  color:#000;letter-spacing:-.01em;align-self:start;min-width:1.3em;
}
.model .principles .principle .big-n .stop{color:var(--magenta)}
.model .principles .principle p{font-size:14.5px;line-height:1.6;color:#222;max-width:42ch}
.model .principles .principle p b{color:#000;font-weight:500}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .reassure .grid{grid-template-columns:1fr}
  .reassure .grid::before{display:none}
  .reassure h2,.reassure .pull,.reassure .aside{grid-column:1}
  .reassure .pull,.reassure .aside{margin-top:24px}
  .reassure > .sig{position:static;margin-top:30px}
  .hero .l1,.hero .l2,.hero .l3{grid-column:1 / -1;margin-left:0}
  .portfolio .pf-title.b{margin-left:6vw}
  .talk h2 .a,.talk h2 .b,.talk h2 .c{margin-left:0}
  .pf-grid{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(18,7vw);grid-auto-rows:7vw;gap:6px}
  .pf-grid .t01{grid-column:1/4;grid-row:1/5}
  .pf-grid .t02{grid-column:4/7;grid-row:1/3}
  .pf-grid .t03{grid-column:4/7;grid-row:3/6}
  .pf-grid .t04{grid-column:1/3;grid-row:5/8}
  .pf-grid .t05{grid-column:3/5;grid-row:5/9}
  .pf-grid .t06{grid-column:5/7;grid-row:6/9}
  .pf-grid .t07{grid-column:1/3;grid-row:8/12}
  .pf-grid .t08{grid-column:3/5;grid-row:9/12}
  .pf-grid .t09{grid-column:5/7;grid-row:9/12}
  .pf-grid .t10{grid-column:1/4;grid-row:12/14}
  .pf-grid .t11{grid-column:4/7;grid-row:12/15}
  .pf-grid .t12{grid-column:1/4;grid-row:14/16}
  .model .split{grid-template-columns:1fr}
  .model .manifesto,.model .principles{grid-column:1;position:static}
  .model .principles{margin-top:32px}
  body::after{display:none}
}
@media (max-width:640px){
  .pf-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:36vw;grid-template-rows:none}
  .pf-grid .pf-item{grid-column:span 1 !important;grid-row:span 1 !important}
  .pf-grid .t01,.pf-grid .t07{grid-column:span 2 !important}
}

/* =====================================================================
   GLOBAL HEADING RULE — applied to all h1-h6 site-wide
===================================================================== */
h1, h2, h3, h4, h5, h6 {
  line-height: 0.98 !important;
  letter-spacing: 0.4px !important;
}


/* =====================================================================
   FORM STYLES — Let's Talk page
===================================================================== */
.form-page{position:relative;padding:116px 6vw 72px;min-height:100vh;overflow:visible}
.form-page .head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:4vh;position:relative;z-index:2}
/* heading matched to the landing-page section heads (e.g. "Pick your poison.").
   Ends at column 8 so the side lede (col 9-12) sits in the same row instead of
   being bumped to a second row and leaving a dead vertical gap. */
.form-page .head h1{
  grid-column:1 / span 8;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(48px,6vw,104px);line-height:.86;letter-spacing:-.01em;color:#000;
}
.form-page .head .lede{grid-column:9 / span 4;font-size:14px;line-height:1.6;color:var(--grey);max-width:34ch;align-self:end}
.form-page .head .lede b{color:#000;font-weight:500}

.form-wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:48px;position:relative;z-index:2;margin-top:1.5vh}
/* the form sits in a framed card so it reads as a considered object, not a
   loose column of fields — reads especially well on mobile */
.form-wrap form{
  grid-column:1 / span 7;display:flex;flex-direction:column;gap:42px;
  background:#fff;border:1px solid var(--ink,#0b0b0b);padding:clamp(24px,3vw,44px);
  box-shadow:0 26px 50px -34px rgba(11,11,11,.4);
}
.form-aside{grid-column:9 / span 4;display:flex;flex-direction:column;gap:28px;font-size:14px;line-height:1.6;color:#222;padding-top:10px}
.form-aside .block .micro{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin-bottom:10px;display:block}
.form-aside .block b{color:#000;font-weight:500}
.form-aside .block a{color:#000;border-bottom:1px solid var(--grey-line);transition:border-color .2s,color .2s}
.form-aside .block a:hover{border-color:var(--magenta);color:var(--magenta)}
.form-aside .block .promise{font-family:var(--display);text-transform:uppercase;font-size:36px;line-height:.95;color:#000;margin-top:6px}
.form-aside .block .promise .stop{color:var(--magenta)}

.field{display:flex;flex-direction:column;gap:10px;position:relative}
.field label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:600;transition:color .3s ease}
.field:focus-within label{color:var(--magenta)}
.field label .req{color:var(--magenta);margin-left:4px}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
  font-family:var(--body);font-size:18px;color:#000;
  background:transparent;border:0;border-bottom:1px solid #000;
  padding:10px 0;outline:none;transition:border-color .2s,padding .2s;
  resize:none;
}
.field input::placeholder, .field textarea::placeholder{color:#bbb}
.field input:focus, .field textarea:focus{border-bottom-color:#000}
/* a magenta line that draws in from the left on focus — the polish detail */
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--magenta);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.field:focus-within::after{transform:scaleX(1)}
.field textarea{min-height:120px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:640px){ .field-row{grid-template-columns:1fr;gap:42px} }

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{
  font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:12px 18px;border:1px solid #000;color:#000;cursor:pointer;background:#fff;
  transition:background .25s, color .25s, border-color .25s, transform .25s cubic-bezier(.22,1,.36,1);
}
.chips input:checked + label{background:#000;color:#fff;transform:translateY(-2px)}
.chips label:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}
.chips label:active{transform:translateY(0)}

.submit-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:8px}
.submit-row .note{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:500}
button.submit{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:22px 28px;background:var(--magenta);color:#fff;cursor:pointer;
  font-family:inherit;border:0;transition:background .25s,color .25s,gap .25s;min-width:320px;
}
button.submit:hover{background:#000;gap:24px}
button.submit .n{font-family:var(--display);font-size:32px;line-height:.9}
button.submit .n .stop{color:#fff}
button.submit .t{font-size:14px;letter-spacing:.04em;font-weight:500;text-align:left}
button.submit .arr{font-family:var(--display);font-size:32px}

.thanks{
  display:none;padding:40px;background:var(--magenta);color:#fff;
  font-family:var(--display);text-transform:uppercase;font-size:36px;line-height:.95;letter-spacing:-.005em;
}
.thanks.show{display:block}

/* =====================================================================
   STEPPED FORM — one question at a time
===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.field label .opt{color:var(--grey);margin-left:6px;letter-spacing:.18em;font-weight:500;text-transform:none}

.steps-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
.steps-count{font-family:var(--display);font-size:22px;line-height:1;color:var(--grey)}
.steps-count b{color:#000;font-weight:400}
.steps-count span{margin:0 2px}
.steps-bar{position:relative;height:1px;background:var(--grey-line);overflow:visible}
.steps-bar span{
  position:absolute;left:0;top:0;height:100%;width:20%;background:var(--magenta);
  transition:width .45s cubic-bezier(.22,1,.36,1);
}
.steps-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:600;white-space:nowrap}

/* Each step is a fieldset. Without JS the form is a single long page that
   still submits — the stepping only switches on once the script says so. */
.step{display:flex;flex-direction:column;gap:28px;border:0;margin:0;padding:0;min-width:0}
form.stepped .step{display:none}
form.stepped .step.is-on{display:flex}
/* each element in the active step rises in, gently staggered — the form's
   main animated touch as you move between questions. Kept off .step itself
   (and on its children) so it still plays under reduced-motion shells. */
form.stepped .step.is-on > *{animation:step-rise .55s cubic-bezier(.22,1,.36,1) both}
form.stepped .step.is-on > *:nth-child(1){animation-delay:.10s}
form.stepped .step.is-on > *:nth-child(2){animation-delay:.17s}
form.stepped .step.is-on > *:nth-child(3){animation-delay:.24s}
form.stepped .step.is-on > *:nth-child(4){animation-delay:.31s}
form.stepped .step.is-on > *:nth-child(5){animation-delay:.38s}
@keyframes step-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* the card itself eases up once on load */
.form-wrap form{animation:form-card-in .7s cubic-bezier(.22,1,.36,1) both}
@keyframes form-card-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* progress and Next/Back are meaningless without the script */
.steps-head,.steps-privacy{display:none}
form.stepped .steps-head{display:grid}
form.stepped .steps-privacy{display:block}
form:not(.stepped) #stepNext{display:none}
form:not(.stepped) #stepSend{display:grid}   /* beats the [hidden] attribute */

.step-q{
  font-family:var(--display);text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(26px,3.2vw,44px);line-height:.98;color:#000;padding:0;
}
.step-aside{font-size:12px;line-height:1.6;color:var(--grey)}
.step-aside a{color:#000;border-bottom:1px solid var(--grey-line)}
.step-aside a:hover{color:var(--magenta);border-color:var(--magenta)}

.step-error{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--magenta);margin:0;
}
.step-error[hidden]{display:none}

.steps-nav{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-top:4px}
.steps-nav .note{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:500}
.step-back{
  font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--grey);background:none;border:0;padding:14px 4px 14px 0;cursor:pointer;transition:color .2s;
}
.step-back:hover{color:#000}
.step-back[hidden],.steps-nav .submit[hidden]{display:none}
.steps-nav .submit{min-width:260px}
.steps-privacy{font-size:11px;line-height:1.6;color:var(--grey);margin:0}

@media (prefers-reduced-motion:reduce){
  .step.is-on{animation:none}
  .steps-bar span{transition:none}
}

/* =====================================================================
   FILTER BAR — Work/Insights pages
===================================================================== */
.filters{display:flex;justify-content:space-between;align-items:baseline;padding:0 2vw 24px;flex-wrap:wrap;gap:16px}
.filters .tabs{display:flex;gap:0;flex-wrap:wrap}
.filters .tabs button{
  font-family:var(--body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:#000;
  padding:14px 22px;background:#fff;border:1px solid #000;cursor:pointer;
  margin-left:-1px;transition:background .2s, color .2s;
}
.filters .tabs button.on{background:#000;color:#fff}
.filters .tabs button:hover:not(.on){background:var(--magenta);color:#fff;border-color:var(--magenta);position:relative;z-index:2}
.filters .count{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:500}
.filters .count b{color:#000;font-weight:500}

/* =====================================================================
   PAGE-HEADER (reused for sub-pages)
===================================================================== */
.page-head{position:relative;padding:140px 6vw 40px;overflow:visible}
.page-head .watermark{
  position:absolute;left:-3vw;top:6vh;
  font-family:var(--display);font-size:min(50vw,720px);line-height:.78;
  color:#f5f5f5;letter-spacing:-.02em;pointer-events:none;z-index:0;user-select:none;
}
.page-head .watermark .stop{color:#fde2f3}
.page-head .crumbs{
  position:relative;z-index:2;
  display:flex;gap:16px;align-items:center;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:500;margin-bottom:32px;
}
.page-head .crumbs a{color:var(--grey);border-bottom:1px solid transparent}
.page-head .crumbs a:hover{color:var(--magenta);border-color:var(--magenta)}
.page-head .crumbs .sep{color:#000}
.page-head h1{
  position:relative;z-index:2;
  font-family:var(--display);text-transform:uppercase;line-height:.8;letter-spacing:-.025em;
  font-size:clamp(80px,15vw,260px);
}
.page-head h1 .a{display:block}
.page-head h1 .b{display:block;color:var(--grey);margin-left:4vw}
.page-head h1 .c{display:block;color:var(--magenta);font-style:italic;margin-left:8vw}
.page-head .lede{position:relative;z-index:2;margin-top:40px;max-width:60ch;font-size:16px;line-height:1.6;color:#222}
.page-head .lede b{font-weight:500}

/* All-work grid (Work page) */
.work-grid{padding:8vh 4vw 14vh}
.work-grid .pf-grid{grid-template-rows:none;grid-auto-rows:6vw}
@media(max-width:640px){
  .work-grid .pf-grid{grid-auto-rows:60vw}
}

/* =====================================================================
   01 · HERO — scroll-driven card reveal (vanilla container-scroll)
   Tall section + sticky stage: land on the tilted card, scroll and it
   rises faster than the title, flattens, and tucks over the headline.
===================================================================== */
.reel{position:relative;height:175vh}
.reel-pin{
  position:sticky;top:0;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:110px 6vw 40px;overflow:visible;
}
.reel-inner{width:100%;position:relative;perspective:850px}
.reel-head{max-width:70rem;margin:0 auto;text-align:center;will-change:transform}
.reel-eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin-bottom:22px}
.reel-head h1{
  font-family:var(--display);text-transform:uppercase;color:#000;
  font-size:clamp(48px,9vw,150px);
  /* looser tracking than before (-.02em) so the heavy uppercase reads with the
     same balance as the other section headings instead of a denser block */
  line-height:.86 !important;letter-spacing:-.005em !important;
}
.reel-head h1 .top{
  display:block;font-size:.34em;color:var(--grey);
  letter-spacing:.01em !important;margin-bottom:.22em;
}
.reel-head h1 .hit{
  display:inline-block;background:var(--magenta);color:#fff;
  padding:.231em .0814em .276em;line-height:.72;margin:0 .02em;
}
.reel-card{
  max-width:64rem;margin:-2rem auto 0;width:100%;height:26rem;
  border:4px solid #0b0b0b;padding:8px;background:#0b0b0b;
  will-change:transform;transform-origin:center;backface-visibility:hidden;
  box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,
             0 84px 50px #00000026,0 149px 60px #0000000a,0 233px 65px #00000003;
}
.reel-screen{
  position:relative;height:100%;width:100%;overflow:hidden;
  background:repeating-linear-gradient(45deg,#f3f3f3 0 14px,#ececec 14px 28px);
  display:flex;align-items:center;justify-content:center;
}
.reel-screen .ph-tag{position:absolute;top:14px;left:16px;font-size:9px;letter-spacing:.22em;color:var(--grey);text-transform:uppercase;font-weight:600}
.reel-ph-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,6vw,96px);color:#000;line-height:.9}
.reel-ph-title .sub{display:block;font-family:var(--body);font-size:10px;letter-spacing:.24em;color:var(--grey);font-weight:500;margin-top:10px;text-align:center}
@media(min-width:768px){
  .reel-card{height:38rem;padding:20px}
}
@media(max-height:760px){
  /* short viewports: keep title + card inside the sticky stage */
  .reel-card{height:min(26rem,54vh)}
}

/* All-articles grid (Insights page) */
.articles-list{padding:6vh 4vw 14vh}
.articles-list .list{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 2vw}
.articles-list .article-row{
  grid-column:span 12;
  display:grid;grid-template-columns:auto 132px 1fr auto auto;gap:36px;align-items:baseline;
  padding:36px 0;border-top:1px solid var(--grey-line);transition:padding-left .25s;
  cursor:pointer;
}
.articles-list .article-row:last-child{border-bottom:1px solid var(--grey-line)}
.articles-list .article-row:hover{padding-left:24px;background:linear-gradient(90deg,rgba(255,27,205,.06),transparent 40%)}
.articles-list .article-row .n{font-family:var(--display);font-size:32px;line-height:.95;color:var(--grey);min-width:80px}
/* hero thumbnail — placeholder stripes until a per-article image is set
   (drop background-image on the .row-thumb to swap in a real hero crop) */
.articles-list .article-row .row-thumb{
  align-self:center;width:132px;aspect-ratio:16/10;
  background:repeating-linear-gradient(45deg,#f3f3f3 0 14px,#ececec 14px 28px);
  background-size:cover;background-position:center;
  outline:1px solid var(--grey-line);outline-offset:-1px;transition:filter .25s;
}
.articles-list .article-row:hover .row-thumb{filter:brightness(1.03)}
.articles-list .article-row:hover .n{color:var(--magenta)}
.articles-list .article-row h3{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:.95;letter-spacing:-.01em;
  text-wrap:balance;
}
.articles-list .article-row h3 em{font-style:italic;color:var(--magenta)}
.articles-list .article-row .a-tag{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:600;min-width:120px;text-align:right;
}
.articles-list .article-row .a-tag b{color:var(--magenta)}
.articles-list .article-row .date{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);min-width:100px;text-align:right;font-weight:500;
}
@media(max-width:1100px){
  .articles-list .article-row{
    grid-template-columns:auto 116px 1fr;
    grid-template-areas:"n thumb title" "n thumb tag" "n thumb date";
    gap:6px 18px;align-items:center;
  }
  .articles-list .article-row .n{grid-area:n;align-self:center}
  .articles-list .article-row .row-thumb{grid-area:thumb;width:116px}
  .articles-list .article-row h3{grid-area:title;align-self:center}
  .articles-list .article-row .a-tag{grid-area:tag;min-width:0;text-align:left}
  .articles-list .article-row .date{grid-area:date;min-width:0;text-align:left}
}

/* =====================================================================
   TEXT GRADIENT SCROLL — body-copy word reveal (vanilla port)
===================================================================== */
.tgs-w{transition:opacity .45s cubic-bezier(.2,.7,.1,1)}

/* =====================================================================
   PROPORTION & CONSISTENCY PASS
   Disciplined display-type scale for laptop viewports + one shared
   section rhythm. Appended last on purpose: overrides earlier clamps.
===================================================================== */
/* 01 · hero */
.reel-head h1{font-size:clamp(44px,7.5vw,120px)}
.reel-ph-title{font-size:clamp(32px,4.5vw,72px)}

/* 02 · reassurance — rhythm */
.reassure{padding:14vh 6vw}

/* portfolio — smaller title, and the stair no longer overlaps the grid */
.portfolio{padding:12vh 4vw}
.portfolio .pf-title{font-size:clamp(64px,10.5vw,190px)}
.portfolio .pf-title-row{margin-bottom:0}
.portfolio .pf-title.b{margin-left:12vw;margin-top:-.05em}
.pf-grid{margin-top:5vh}

/* working model — the heading lost its inline font when the editor
   artifact was removed; restate the display treatment at a sane scale */
.model{padding:14vh 6vw}
.model .manifesto h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(44px,6.2vw,104px);line-height:.86 !important;letter-spacing:-.01em !important;
  left:0;
}

/* ===== tonal rhythm pass: textures & inversions =====
   Rhythm across the page: white hero → dotted portfolio → ink services →
   striped rail → paper testimonials → outlined model → ink bench →
   dotted insights → magenta fit → white talk → ink footer. */

/* portfolio — newsprint tooth behind the collage */
.portfolio{
  background-color:#fff;
  background-image:radial-gradient(circle,rgba(11,11,11,.05) 1px,transparent 1.2px);
  background-size:26px 26px;
}

/* working model — stroke-only watermark div (site convention, like the
   fit .bleed-title and talk .watermark; pseudo-elements are globally
   suppressed by the cleanup rule above) */
.model{position:relative;overflow:hidden}
.model>*{position:relative;z-index:2}
.model .model-bleed{
  position:absolute;right:-3vw;top:1vh;z-index:0;
  font-family:var(--display);text-transform:uppercase;
  font-size:min(28vw,400px);line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--grey-line);
  pointer-events:none;user-select:none;
}
.model .model-bleed .stop{color:transparent;-webkit-text-stroke:1px rgba(255,27,205,.45)}

/* insights — scale down the head, tighten the masonry */
.insights{
  padding:8vh 4vw 8vh;
  background-color:#fafafa;
  background-image:radial-gradient(circle,rgba(11,11,11,.06) 1px,transparent 1.2px);
  background-size:24px 24px;
}
/* one line now, sized to sit in proportion with the other section heads
   (Work / Services), not as an oversized two-line masthead */
.insights h2{font-size:clamp(46px,6.4vw,110px)}
.ins-grid{grid-auto-rows:3.9vw}
.article.feat .a-title{font-size:clamp(24px,2.5vw,40px)}
.article .a-title{font-size:clamp(19px,1.9vw,30px)}

/* fit filter — scale down */
.fit{padding:10vh 6vw 10vh}
/* matched to the Services "Pick your poison." heading scale */
.fit-head h2{font-size:clamp(48px,6vw,110px)}
.fit .bleed-title{font-size:clamp(100px,18vw,260px)}
.fit-cols h3{font-size:clamp(30px,3.6vw,54px)}

/* talk — one big line, no stair-step + quieter watermark */
.talk{padding:12vh 6vw 12vh}
.talk h2{font-size:clamp(56px,12vw,200px)}
.talk .watermark{font-size:min(42vw,560px)}
/* "Still here?" reads on a single line — both parts the same size, inline,
   with no stagger indent or inter-line gap */
.talk h2 .a{display:inline;font-size:1em;line-height:.9;margin-left:0}
.talk h2 .b{display:inline;font-size:1em;line-height:.9;margin:0}
.talk h2 .c{display:inline;font-size:1em;line-height:.9;margin:0}

/* Two-line headings clip/overlap at the sitewide line-height:0.98 — Anton's
   glyph metrics need much more than that at these clamp sizes (measured:
   real collision persists past 1.3-1.4, only clears around 1.5+). Values
   picked empirically per heading's max font-size, with a safety margin. */
.fit-head h2{line-height:.86 !important}
/* insights is a single line now — tight leading like the other section heads */
.insights h2{line-height:.9 !important}

/* numbered eyebrow — one consistent system across sections */
.sec-eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--magenta);
  font-weight:600;display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:5vh;position:relative;z-index:2;
}
.sec-eyebrow span:last-child{color:var(--magenta)}
.insights .sec-eyebrow{padding:0 2vw}

/* =====================================================================
   04 · SELECTED WORK — editorial-brutalist mosaic (a masonry contact sheet)
   Scoped to .pf-showcase so it only affects the home page's #work section
   (Work.html keeps its own .pf-grid).
===================================================================== */
.pf-showcase{padding:9vh 4vw 8vh}
.pf-showcase .pf-head{padding:0 2vw;margin-bottom:3vh}
.pf-showcase .pf-eyebrow{padding:0 0 20px}
.pf-showcase .pf-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.pf-showcase .pf-h{
  margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(44px,6.4vw,108px);line-height:.9;letter-spacing:-.01em;color:#000;
}
.pf-showcase .pf-h em{
  display:inline-block;
  background:var(--magenta);color:#fff;
  padding:0.231em 0.0814em 0.276em 0.0814em;
  font-family:var(--display);font-style:normal;text-transform:uppercase;
  font-weight:400;letter-spacing:-.005em;line-height:0.72;
  margin:0 .02em;vertical-align:baseline;
}
.pf-showcase .pf-data{display:none}

/* discipline filter chips */
.pf-showcase .pf-filters{display:flex;flex-wrap:wrap;gap:8px}
.pf-showcase .pf-chip{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ink);background:transparent;border:1px solid var(--ink);
  padding:9px 16px;border-radius:999px;
  transition:background .25s,color .25s,border-color .25s,transform .1s;
}
.pf-showcase .pf-chip:hover{background:rgba(11,11,11,.06)}
.pf-showcase .pf-chip:active{transform:translateY(1px)}
.pf-showcase .pf-chip.on{background:var(--magenta);border-color:var(--magenta);color:#fff}
.pf-showcase .pf-chip:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}

/* =====================================================================
   THE MOSAIC — an editorial contact sheet. One hairline-framed masonry
   of tiles, each shown at its creative's own aspect ratio (9:16, 16:9,
   4:5, 1:1 — declared via data-ratio or measured from the file itself),
   so photographs and films are viewed whole, never cropped to a slot.
   The media does the talking; a slim index bar carries the words, and
   the whole tile opens the case. Built by JS from the hidden data list.
===================================================================== */
.pf-showcase .pf-mos{position:relative;z-index:2;padding:0 2vw;columns:5;column-gap:12px}

.pf-tile{
  position:relative;display:inline-block;width:100%;break-inside:avoid;
  margin:0 0 14px;border:1px solid var(--ink);background:var(--white);
  cursor:pointer;text-align:left;opacity:0;
  transition:box-shadow .3s cubic-bezier(.22,1,.36,1);
}
/* slower and gentler than the old .6s — the settle should be felt, not seen */
.pf-mos.pf-mos-in .pf-tile{animation:pf-tile-in .78s cubic-bezier(.22,.9,.24,1) both;animation-delay:var(--sd,0ms)}
/* Tiles settle in; they no longer flip. The old keyframe swung each tile
   through rotateX(-22deg) on its own 1000px perspective — a card-flip that
   reads as cheap on its own, and doubly so now that it happens inside a
   device already holding its own perspective. Two conflicting 3D spaces
   nested one inside the other never resolves cleanly.
   A fade with a short rise and a hair of scale does the same job quietly. */
@keyframes pf-tile-in{
  from{opacity:0;transform:translateY(16px) scale(.986)}
  to  {opacity:1;transform:none}
}
/* the hard offset shadow is the hover state — pure print-poster grammar */
.pf-tile:hover,.pf-tile:focus-visible{box-shadow:7px 7px 0 var(--ink);outline:none}
.pf-tile:focus-visible{border-color:var(--magenta);box-shadow:7px 7px 0 var(--magenta)}

/* media window — the tile keeps the creative's shape, but its height is
   held to a tight band so a 9:16 doesn't tower over a 16:9 and leave the
   masonry sprawling. Portraits cap, landscapes lift; object-fit covers the
   difference, so the columns stay short and even and the section stays
   proportionate to the rest of the page. */
.pf-tile-media{
  position:relative;display:block;width:100%;overflow:hidden;
  aspect-ratio:var(--ar,4 / 5);background:#0b0b0b;
  min-height:clamp(150px,15.5vw,186px);max-height:clamp(210px,20vw,264px);
}
.pf-tile-media img,.pf-tile-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.pf-tile:hover .pf-tile-media img,.pf-tile:hover .pf-tile-media video,
.pf-tile:focus-visible .pf-tile-media img,.pf-tile:focus-visible .pf-tile-media video{transform:scale(1.045)}

/* cover textures while a project has no artwork attached yet */
.pf-tile-media.t-ink{background-color:#0b0b0b;background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:18px 18px}
.pf-tile-media.t-mag{background-color:var(--magenta);background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:18px 18px}
.pf-tile-media.t-paper{background-color:#f0efe9;background-image:radial-gradient(circle,rgba(11,11,11,.08) 1px,transparent 1.2px);background-size:18px 18px}

/* typographic poster for placeholder tiles — the name set like a cover */
.pf-tile-ghost{
  position:absolute;left:12px;right:14px;bottom:11px;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,2.1vw,38px);line-height:.9;letter-spacing:-.005em;
  color:#fff;word-break:break-word;user-select:none;
}
.pf-tile-media.t-paper .pf-tile-ghost{color:var(--ink)}

/* small dossier meta, top-left, legible on any artwork */
.pf-tile-meta{
  position:absolute;top:10px;left:12px;z-index:2;
  font-family:var(--display);font-size:10px;letter-spacing:.18em;
  color:#fff;mix-blend-mode:difference;pointer-events:none;
}
/* the blend trick is for photographs; on flat cover textures it discolours */
.pf-tile-media.t-ink .pf-tile-meta,.pf-tile-media.t-mag .pf-tile-meta{mix-blend-mode:normal}
.pf-tile-media.t-paper .pf-tile-meta{mix-blend-mode:normal;color:var(--ink)}

/* big stroked index numeral, stamped over the corner */
.pf-tile-stamp{
  position:absolute;top:4px;right:9px;z-index:2;pointer-events:none;
  font-family:var(--display);font-size:clamp(32px,2.8vw,52px);line-height:1;
  color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.55);
  transition:color .3s;
}
.pf-tile-media.t-paper .pf-tile-stamp{-webkit-text-stroke-color:rgba(11,11,11,.3)}
.pf-tile:hover .pf-tile-stamp,.pf-tile:focus-visible .pf-tile-stamp{color:var(--magenta);-webkit-text-stroke-color:var(--magenta)}

/* film badge — only on tiles that carry a video; it previews on hover */
.pf-tile-film{
  position:absolute;left:10px;bottom:10px;z-index:2;pointer-events:none;
  font-family:var(--body);font-size:9px;line-height:1;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);padding:6px 9px;
}

/* the invitation, revealed on hover/focus */
.pf-tile-open{
  position:absolute;right:10px;bottom:10px;z-index:2;pointer-events:none;
  font-family:var(--body);font-size:10px;line-height:1;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--ink);padding:8px 11px;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.pf-tile:hover .pf-tile-open,.pf-tile:focus-visible .pf-tile-open{opacity:1;transform:none}
.pf-tile-open i{font-style:normal;color:var(--magenta)}

/* index bar — number-plate typography, inverts on hover */
.pf-tile-bar{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:9px 11px;border-top:1px solid var(--ink);
  background:var(--white);color:var(--ink);
  transition:background .25s,color .25s;
}
.pf-tile-bar .t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pf-tile-bar .nm{
  font-family:var(--display);text-transform:uppercase;
  font-size:13px;line-height:1;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf-tile-bar .ct{
  font-family:var(--body);font-size:8.5px;line-height:1;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* on poster tiles the category is the bar's only line — let it hold the room */
.pf-tile-bar .ct:only-child{font-size:9.5px;color:var(--ink)}
.pf-tile:hover .pf-tile-bar .ct:only-child,.pf-tile:focus-visible .pf-tile-bar .ct:only-child{color:#fff}
.pf-tile-bar .mt{font-family:var(--display);font-size:16px;line-height:1;margin-left:auto;color:var(--ink);transition:color .25s}
.pf-tile:hover .pf-tile-bar,.pf-tile:focus-visible .pf-tile-bar{background:var(--ink);color:#fff}
.pf-tile:hover .pf-tile-bar .ct,.pf-tile:focus-visible .pf-tile-bar .ct{color:rgba(255,255,255,.6)}
.pf-tile:hover .pf-tile-bar .mt,.pf-tile:focus-visible .pf-tile-bar .mt{color:var(--magenta)}

/* the fold — the sheet opens to eight tiles; the rest are one honest click away */
.pf-showcase .pf-more{
  display:block;width:calc(100% - 4vw);margin:4px 2vw 0;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:var(--body);font-size:11px;line-height:1;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:var(--white);border:1px solid var(--ink);padding:14px;
  transition:background .25s,color .25s;
}
.pf-showcase .pf-more:hover{background:var(--ink);color:#fff}
.pf-showcase .pf-more i{font-style:normal;color:var(--magenta)}
.pf-showcase .pf-more:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.pf-showcase .pf-more[hidden]{display:none}

.pf-showcase .pf-cap{margin-top:3vh;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:0 2vw;flex-wrap:wrap}

@media (max-width:1360px){.pf-showcase .pf-mos{columns:4}}
@media (max-width:1080px){.pf-showcase .pf-mos{columns:3}}
@media (max-width:860px){
  .pf-showcase .pf-mos{columns:2;column-gap:10px}
  .pf-tile{margin-bottom:10px}
}
@media (max-width:640px){
  .pf-showcase{padding:9vh 5vw}
  .pf-showcase .pf-headrow{align-items:flex-start}
  .pf-tile-stamp{font-size:clamp(30px,8vw,44px)}
  .pf-tile-ghost{font-size:clamp(20px,5.8vw,32px)}
  .pf-tile-bar .nm{font-size:11.5px}
  .pf-tile-open{display:none}          /* hover can't be relied on; the tile itself opens */
}
@media (prefers-reduced-motion:reduce){
  .pf-tile{opacity:1;transition:none}
  .pf-mos.pf-mos-in .pf-tile{animation:none}
  .pf-tile-media img,.pf-tile-media video,.pf-tile-open{transition:none}
}

/* =====================================================================
   #work SPLIT LAYOUT — text on the right, a bounded portfolio viewer on
   the left. The viewer scrolls inside its own frame, so reflowing the
   mosaic into a narrower column never changes the section's height.
   Same type, chips, tiles and colour as the stacked version — only the
   arrangement changes. Falls back to a natural stack under 900px.
===================================================================== */
.pf-showcase.pf-split{padding:9vh 4vw 8vh}
.pf-split .pf-split-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);
  /* a DEFINITE row height (not min-height) so the left panel can bound its
     own scroll and the section height stays fixed regardless of tile count */
  grid-template-rows:clamp(560px,80vh,860px);
  gap:clamp(28px,3.5vw,64px);
  align-items:stretch;
  padding:0 2vw;
}

/* LEFT — the portfolio viewing / selection panel */
.pf-split .pf-left{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.pf-split .pf-filters{margin:0 0 16px}
.pf-split .pf-viewport{
  flex:1 1 auto;min-width:0;max-width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--ink);background:var(--white);
  padding:16px 14px 6px;
  scrollbar-width:thin;scrollbar-color:var(--ink) transparent;
}
.pf-split .pf-viewport::-webkit-scrollbar{width:8px}
.pf-split .pf-viewport::-webkit-scrollbar-thumb{background:var(--ink)}
.pf-split .pf-viewport::-webkit-scrollbar-track{background:transparent}
.pf-split .pf-viewport .pf-mos{padding:0;columns:3;column-gap:12px}
.pf-split .pf-more{width:100%;margin:8px 0 4px}

/* RIGHT — heading, subheading, body, vertically centred to the panel */
.pf-split .pf-right{
  grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;
  min-width:0;padding:2vh 0;
}
.pf-split .pf-right .pf-h{margin:0 0 .5em;font-size:clamp(40px,4.8vw,92px)}
.pf-split .pf-right .pf-sub{padding:0;margin:0 0 20px;justify-content:flex-start;gap:14px;flex-wrap:wrap}
.pf-split .pf-right .pf-body{font-size:14px;line-height:1.6;color:var(--grey);max-width:44ch;margin:0 0 26px}
.pf-split .pf-right .pf-body b{color:#000}
.pf-split .pf-right .pf-link{
  align-self:flex-start;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.pf-split .pf-right .pf-link:hover{color:var(--magenta);border-color:var(--magenta)}
.pf-split .pf-right .pf-link span{color:var(--magenta)}

@media (max-width:1200px){.pf-split .pf-viewport .pf-mos{columns:2}}
@media (max-width:900px){
  /* stack: text first, portfolio below; let the panel flow naturally */
  .pf-split .pf-split-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0;gap:clamp(22px,5vw,38px)}
  .pf-split .pf-left,.pf-split .pf-right{grid-column:auto;grid-row:auto;min-width:0;max-width:100%}
  .pf-split .pf-right{justify-content:flex-start;padding:0}
  .pf-split .pf-viewport{overflow:visible;border:0;background:transparent;padding:0;width:100%;max-width:100%}
  .pf-split .pf-viewport .pf-mos{width:100%;max-width:100%;columns:2;column-gap:10px}
}
@media (max-width:560px){
  .pf-split .pf-viewport .pf-mos{columns:2;column-gap:8px}
}


/* =====================================================================
   INSIGHTS — premium blog treatment
   Heading matched to the landing headings (.86 line-height / -.005em),
   nav current-page marker, pinned feature, and a tighter vertical rhythm.
===================================================================== */

/* current-page marker in the desktop nav */
.nav .links a[aria-current="page"]{color:#000;position:relative}
.nav .links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--magenta);
}
.nav.dark .links a[aria-current="page"]{color:#fff}

/* heading — same proportions as the landing page headings, compact frame */
.page-head.insights-head{padding:112px 6vw 28px}
.page-head.insights-head .crumbs{margin-bottom:18px}
.page-head.insights-head h1{
  line-height:.86;letter-spacing:-.005em;font-size:clamp(64px,11vw,170px);
}
.page-head.insights-head h1 .b{margin-left:4vw}
.page-head.insights-head h1 .c{margin-left:8vw}
.page-head.insights-head .lede{margin-top:24px;max-width:56ch}

/* featured / pinned lead article */
.ins-feature{padding:1vh 4vw 5vh}
.ins-feature .wrap{
  display:grid;grid-template-columns:repeat(12,1fr);gap:44px;align-items:stretch;padding:0 2vw;
}
.ins-feature .f-head{
  grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid #000;padding-top:14px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--grey);
}
.ins-feature .f-head .lbl{color:#000}
.ins-feature .f-img{
  grid-column:1 / span 7;aspect-ratio:16 / 10;align-items:flex-start;transition:filter .5s;
}
.ins-feature .f-img:hover{filter:brightness(1.02)}
.ins-feature .f-body{
  grid-column:8 / span 5;display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.ins-feature .f-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:600}
.ins-feature .f-tag b{color:var(--magenta)}
.ins-feature .f-title{
  font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;line-height:.9;
  font-size:clamp(34px,4.2vw,68px);color:#000;text-wrap:balance;
}
.ins-feature .f-title em{font-style:italic;color:var(--magenta)}
.ins-feature .f-excerpt{font-size:15px;line-height:1.6;color:#333;max-width:46ch}
.ins-feature .f-meta{
  display:flex;align-items:center;gap:14px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);font-weight:500;
}
.ins-feature .f-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--magenta);display:inline-block}
.ins-feature .f-read{
  align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#000;
  border-bottom:1px solid #000;padding-bottom:4px;transition:color .25s,border-color .25s;
}
.ins-feature .f-read:hover{color:var(--magenta);border-color:var(--magenta)}
.ins-feature .f-read:hover .arr{transform:translateX(4px)}
.ins-feature .f-read .arr{font-family:var(--display);transition:transform .25s}

/* index header above the filter bar */
.articles-list .idx-head{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;padding:0 2vw 18px;
}
.articles-list .idx-head .idx-title{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.4vw,48px);
  line-height:.9;letter-spacing:-.01em;color:#000;
}
.articles-list .idx-head .idx-sub{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:500}

/* tighter rhythm through the archive list */
.articles-list{padding:2vh 4vw 9vh}
.articles-list .article-row{padding:26px 0}

@media (max-width:1100px){
  .ins-feature .wrap{grid-template-columns:1fr;gap:22px}
  .ins-feature .f-img{grid-column:1;aspect-ratio:16 / 9}
  .ins-feature .f-body{grid-column:1}
}
@media (max-width:760px){
  .ins-feature{padding:1vh 5vw 4vh}
  .ins-feature .f-title{font-size:clamp(26px,7.6vw,40px)}
  .ins-feature .f-head{font-size:10px}
  .articles-list .idx-head{padding:0 0 14px}
}

/* =====================================================================
   LANDING COLOR ARCHITECTURE — horizontal blocking, non-uniform rhythm
   Splits are drawn as section backgrounds with a 2px magenta seam at the
   boundary; a giant numeral straddles each seam and inverts across it
   (mix-blend difference), echoing the site's watermark habit. The rhythm:
     work      SPLIT  paper | magenta  (ink seam at the boundary)
     cases     FULL   ink              (existing)
     model     SPLIT  magenta | paper  (the inversion)
     team      FULL   ink              (existing)
     insights  QUIET  paper | mist     (tonal, no seam)
     fit       FULL   magenta          (existing)
   Desktop-only: below 901px the columns stack, so the halves would lie
   and the sections keep their original full-bleed colors.
===================================================================== */
@media (min-width:901px){

  /* ---------- 04 · THE WORK — paper left, magenta right ---------- */
  #work.pf-split{
    position:relative;
    background:linear-gradient(90deg,
      var(--white) 0 calc(62% - 2px),
      var(--ink) calc(62% - 2px) 62%,
      var(--magenta) 62%);
  }
  /* giant numeral kept fully inside the magenta half — a faint press mark */
  #work.pf-split::after{
    content:"04";
    position:absolute;right:1vw;top:2%;
    font-family:var(--display);font-size:clamp(180px,20vw,340px);line-height:.8;
    color:#fff;opacity:.14;
    pointer-events:none;user-select:none;z-index:0;
  }
  #work.pf-split .pf-split-grid{position:relative;z-index:1}
  /* breathing room off the seam */
  #work.pf-split .pf-right{padding:2vh 2vw 2vh 3.2vw}
  #work.pf-split .pf-right .pf-h{color:#fff}
  /* the magenta highlight box would vanish on magenta — flip it to ink */
  #work.pf-split .pf-right .pf-h em{background:var(--ink);color:#fff}
  #work.pf-split .pf-right .pf-sub,
  #work.pf-split .pf-right .pf-sub span{color:rgba(255,255,255,.8)}
  #work.pf-split .pf-right .pf-body{color:rgba(255,255,255,.88)}
  #work.pf-split .pf-right .pf-body b{color:#fff}
  #work.pf-split .pf-right .pf-link{color:#fff;border-color:rgba(255,255,255,.7)}
  #work.pf-split .pf-right .pf-link:hover{color:var(--ink);border-color:var(--ink)}

  /* ---------- 05 · WORKING MODEL — magenta left, paper right ---------- */
  #model.model{
    position:relative;
    background:linear-gradient(90deg,
      var(--magenta) 0 calc(46% - 2px),
      var(--ink) calc(46% - 2px) 46%,
      var(--white) 46%);
  }
  #model.model::after{
    content:"05";
    position:absolute;left:1vw;bottom:3%;
    font-family:var(--display);font-size:clamp(180px,20vw,340px);line-height:.8;
    color:#fff;opacity:.14;
    pointer-events:none;user-select:none;z-index:0;
  }
  #model .split{position:relative;z-index:1}
  /* manifesto sits on magenta: white text, magenta accents flip to ink */
  #model .manifesto{padding-right:3vw}
  #model .manifesto .eyebrow{color:#fff}
  #model .manifesto h2{color:#fff}
  #model .manifesto h2 em{background:var(--ink);color:#fff}
  #model .manifesto h2 .stop{color:var(--ink)}
  #model .manifesto .note{color:rgba(255,255,255,.9)}
  #model .manifesto .note b{color:#fff}
  #model .manifesto .sig{color:rgba(255,255,255,.85)}
  #model .manifesto .sig .stop{color:var(--ink) !important}

  /* ---------- 08 · INSIGHTS — quiet tonal split, no seam ---------- */
  #insights.insights{
    background:linear-gradient(90deg,#ffffff 0 42%,#f4f4f1 42%);
  }
}

/* =====================================================================
   PRINT FINISH v5 — the poster pass
   The reference: warm paper ground, visible photocopy grain, Space Mono
   utility labels with // prefixes and magenta tick marks, hard hairline
   rules between sections, duotone photography that recovers its colour
   on hover, a pink press-block colliding with the hero headline, and
   the footer wordmark set as a magenta plate. Structure untouched —
   this is finish, applied last so it wins the cascade.
===================================================================== */
:root{
  --white:#f3f1ea;                      /* gallery white becomes warm paper */
  --paper-deep:#e9e5da;
  --ghost:#e5e2d6;
  --grey-line:#dcd8cb;                  /* hairlines warm with the ground */
  --mono:"Space Mono","Courier New",monospace;
}

/* grain: up from a trace to a visible printer's tooth */
body::before{opacity:.12}

/* nav glass tinted to the paper, its type set like the poster's meta row */
.nav{background:linear-gradient(180deg,rgba(243,241,234,.94),rgba(243,241,234,0))}
.nav .links{font-family:var(--mono);letter-spacing:.12em}
.nav .right{font-family:var(--mono);letter-spacing:.12em}

/* ---------- surfaces that were hard #fff / #fafafa join the paper ---------- */
.insights{background-color:var(--white)}
.article{background:var(--white)}
.form-wrap form{background:var(--white)}
.filters .tabs button{background:var(--white)}
.chips label{background:var(--white)}
section.tst{background-color:#ebe8dd}
body .art-hero.is-ph{background:repeating-linear-gradient(45deg,#ece9df 0 16px,#e3e0d4 16px 32px)}

/* placeholder stripes warm up to match */
.ph{background:
  linear-gradient(135deg, transparent 49.5%, var(--grey-line) 49.5% 50.5%, transparent 50.5%),
  repeating-linear-gradient(45deg,#ece9df 0 14px,#e3e0d4 14px 28px)}
.reel-screen{background:repeating-linear-gradient(45deg,#ece9df 0 14px,#e3e0d4 14px 28px)}
/* the reel itself: frames are authored on the same paper tone as this
   ground, so object-fit:contain letterboxes invisibly at any card ratio */
.reel-screen:has(.reel-video){background:#f3f1ea}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.article .a-img,
.articles-list .article-row .row-thumb,
.lightbox .lb-img{background-image:repeating-linear-gradient(45deg,#ece9df 0 14px,#e3e0d4 14px 28px)}

/* ghost watermarks re-inked against the paper */
.hero .watermark,.page-head .watermark{color:var(--ghost)}
.hero .watermark .stop,.page-head .watermark .stop{color:#f0cfe4}
.talk .watermark{color:#e9e6da}

/* flat ink and magenta blocks get the same faint dot screen the services
   section already carries — one print texture across every dark plate */
section.cases,#team.tm{
  background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.2px);
  background-size:26px 26px;
}
.fit{
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.2px);
  background-size:26px 26px;
}
#services.menu-svc{
  background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.2px);
}

/* ---------- hard editorial rules at the light-section boundaries ---------- */
#work.pf-split,section.tst,#insights.insights,.talk{border-top:1px solid rgba(11,11,11,.3)}

/* ---------- MONO UTILITY LAYER — every small-caps label goes mono ---------- */
.eyebrow,.sec-eyebrow,.pf-eyebrow,.reel-eyebrow,
.hero-meta .label,.hero-scroll,.ph .ph-tag,.reel-screen .ph-tag,
.article .a-tag,.article .a-meta,
.ins-feature .f-tag,.ins-feature .f-meta,.ins-feature .f-head,
.page-head .crumbs,.filters .count,.talk .sign,
footer.end b,footer.end .bot,
.steps-label,.steps-privacy,.field label,.submit-row .note,.step-aside,
.reassure .micro,.form-aside .block .micro,
.articles-list .article-row .a-tag,.articles-list .article-row .date,
.articles-list .idx-head .idx-sub,
.pf-tile-bar .ct,.pf-tile-film,.pf-tile-open,
body .ms-eyebrow,body .tst-eyebrow,body .tm-eyebrow,body .tkr-eyebrow,
body .art-tag,body .art-back,body .art-railcat,body .art-railmeta div,
body .art-share .lbl,body .art-meta{
  font-family:var(--mono);letter-spacing:.12em;
}

/* // prefix + magenta tick above section eyebrows — the //VISION mark.
   Child combinator (>) is load-bearing: the reveal animation nests spans
   inside these, and a descendant selector would stamp the mark twice. */
.sec-eyebrow > span:first-child,.pf-eyebrow > span:first-child,
body .ms-eyebrow > span:first-child,body .tst-eyebrow > span:first-child,
body .tm-eyebrow > span:first-child,body .tkr-eyebrow > span:first-child{
  position:relative;display:inline-block;padding-top:13px;
}
.sec-eyebrow > span:first-child::before,.pf-eyebrow > span:first-child::before,
body .ms-eyebrow > span:first-child::before,body .tst-eyebrow > span:first-child::before,
body .tm-eyebrow > span:first-child::before,body .tkr-eyebrow > span:first-child::before{
  content:"//";margin-right:.6em;
}
.sec-eyebrow > span:first-child::after,.pf-eyebrow > span:first-child::after,
body .ms-eyebrow > span:first-child::after,body .tst-eyebrow > span:first-child::after,
body .tm-eyebrow > span:first-child::after,body .tkr-eyebrow > span:first-child::after{
  content:"";position:absolute;top:0;left:0;width:28px;height:5px;background:var(--magenta);
}
/* on magenta ground the tick flips white so it doesn't vanish */
.fit .sec-eyebrow > span:first-child::after{background:#fff}
.reel-eyebrow::before{content:"//";margin-right:.6em}
.reassure .micro::before,.form-aside .block .micro::before{content:"// "}

/* ---------- DUOTONE PHOTOGRAPHY — B&W contact sheet, colour on hover ---------- */
@media (hover:hover){
  .pf-tile-media img,.pf-tile-media video{
    filter:grayscale(1) contrast(1.07) brightness(1.02);
    transition:transform .7s cubic-bezier(.22,1,.36,1),filter .45s;
  }
  .pf-tile:hover .pf-tile-media img,.pf-tile:hover .pf-tile-media video,
  .pf-tile:focus-visible .pf-tile-media img,.pf-tile:focus-visible .pf-tile-media video{filter:none}
  .article .a-img,.articles-list .article-row .row-thumb,.ins-feature .f-img{
    filter:grayscale(1) contrast(1.05);transition:filter .45s;
  }
  .article:hover .a-img,
  .articles-list .article-row:hover .row-thumb,
  .ins-feature .f-img:hover{filter:none}
}

/* article cards trade the soft shadow for the print-poster hard offset */
.article:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

/* ---------- FOOTER — wordmark set as a magenta plate, poster bottom-right ---------- */
footer.end .mark{background:var(--magenta);color:#fff;padding:14px 18px 10px;line-height:.8}
footer.end .mark .stop{color:#fff}

/* ---------- HERO — halftone screen bleeding in from the top ----------
   A print dot-screen laid over the top of the hero, strongest at the very
   top edge and dissolved to nothing well before #work begins. It's
   absolutely positioned in the (non-sticky) hero shell, so while the
   pinned headline holds, the texture rides the page and scrolls away. */
.reel{position:relative}
.reel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:110vh;z-index:0;
  background-image:
    radial-gradient(circle,rgba(11,11,11,.22) 1.2px,transparent 1.7px),
    radial-gradient(circle,rgba(11,11,11,.13) 1px,transparent 1.4px);
  background-size:22px 22px,11px 11px;
  background-position:0 0,5px 7px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 40%,transparent 75%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 40%,transparent 75%);
  pointer-events:none;
}
.reel-pin{z-index:1}

@media (min-width:901px){
  /* headline in the poster's soft dark-grey ink, not hard black */
  .reel-head h1{color:#45433e}

  /* resurrect the giant split numerals (an old cleanup rule was silencing
     them with content:none !important — beat it at its own game) */
  #work.pf-split::after{content:"04" !important;display:block !important}
  #model.model::after{content:"05" !important;display:block !important}

  /* insights quiet split re-toned to the paper family */
  #insights.insights{background:linear-gradient(90deg,var(--white) 0 42%,var(--paper-deep) 42%)}

  /* the #work right-rail eyebrow sits on magenta — its tick flips white */
  #work.pf-split .pf-right .pf-sub > span:first-child::after{background:#fff}
}

/* =====================================================================
   HAIRLINE PASS — every rule, seam and box outline: thinner + lighter.
   Solid ink lines drop to translucent hairlines; the 2px split seams
   become 1px whispers; the 3px services underline becomes 1px.
===================================================================== */
:root{--line-ink:rgba(11,11,11,.22)}

/* split seams — 1px, barely-there; dot tooth layered back over the split
   (the plain gradient shorthand had been wiping the section texture) */
@media (min-width:901px){
  #work.pf-split{background:
    radial-gradient(circle,rgba(11,11,11,.08) 1px,transparent 1.2px) 0 0/24px 24px,
    linear-gradient(90deg,
      var(--white) 0 calc(62% - 1px),
      rgba(11,11,11,.25) calc(62% - 1px) 62%,
      var(--magenta) 62%)}
  #model.model{background:
    radial-gradient(circle,rgba(11,11,11,.08) 1px,transparent 1.2px) 0 0/24px 24px,
    linear-gradient(90deg,
      var(--magenta) 0 calc(46% - 1px),
      rgba(11,11,11,.25) calc(46% - 1px) 46%,
      var(--white) 46%)}
}

/* section boundary rules — lighter still */
#work.pf-split,section.tst,#insights.insights,.talk{border-top:1px solid rgba(11,11,11,.12)}

/* portfolio furniture */
.pf-tile{border-color:var(--line-ink)}
.pf-tile-bar{border-top-color:var(--line-ink)}
.pf-split .pf-viewport{border-color:var(--line-ink)}
.pf-showcase .pf-more{border-color:rgba(11,11,11,.3)}
.pf-showcase .pf-chip{border-color:rgba(11,11,11,.3)}
.pf-tile:hover,.pf-tile:focus-visible{box-shadow:5px 5px 0 rgba(11,11,11,.75)}

/* cards, forms, filters, chips */
.form-wrap form{border-color:var(--line-ink)}
.filters .tabs button{border-color:rgba(11,11,11,.3)}
.chips label{border-color:rgba(11,11,11,.3)}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],
.field textarea{border-bottom-color:rgba(11,11,11,.35)}
.article:hover{box-shadow:5px 5px 0 rgba(11,11,11,.7)}

/* working-model principle rows */
.model .principles .principle{border-top-color:rgba(11,11,11,.25)}
.model .principles .principle:last-child{border-bottom-color:rgba(11,11,11,.25)}

/* insights feature rule */
.ins-feature .f-head{border-top-color:rgba(11,11,11,.3)}

/* inline-styled sections (higher specificity to win over their <style> blocks) */
#services .ms-titlerow{border-bottom:1px solid rgba(255,255,255,.35)}
#ticker .tkr-band{border-top-color:rgba(11,11,11,.22);border-bottom-color:rgba(11,11,11,.22)}
#ticker .tkr-row1,#ticker .tkr-row2{border-bottom-color:rgba(11,11,11,.15)}
section.tst .tsc-badge{border-color:rgba(11,11,11,.3)}
section.tst .tsc-card{border-color:var(--line-ink)}
section.tst .tsc-card:hover{border-color:var(--magenta)}
section.tst .tsc-who img{border-color:rgba(11,11,11,.25)}
body .pf-mbar{border-color:rgba(11,11,11,.3)}

/* =====================================================================
   DEPTH PASS — soft print shadows so the page reads in layers, not flat.
   Grammar: the dark plates (ink & magenta sections) sit ON the paper and
   cast a gentle shadow onto it in both directions; framed components
   rest a hair off the page; the scrolling viewer gets an inset breath.
   Everything low-opacity and long-falloff — depth, not drama.
===================================================================== */

/* dark plates cast onto the surrounding paper */
section.cases,#services.menu-svc,#team.tm{
  position:relative;z-index:2;
  /* near-zero spread: the shadow band runs the full page width, no side fade */
  box-shadow:0 30px 55px -6px rgba(11,11,11,.45),
             0 -30px 55px -6px rgba(11,11,11,.4);
}
/* fit: downward cast only — no shadow over the blog cards above it */
.fit{
  position:relative;z-index:2;
  box-shadow:0 30px 55px -6px rgba(11,11,11,.45);
}
/* the ink footer casts up onto the closing paper section */
footer.end{box-shadow:0 -28px 50px -6px rgba(11,11,11,.45)}

/* the closing paper section gets the same quiet dot tooth as the rest */
.talk{
  background-image:radial-gradient(circle,rgba(11,11,11,.06) 1px,transparent 1.2px);
  background-size:26px 26px;
}
/* insights split keeps its dot screen on desktop (layered over the split) */
@media (min-width:901px){
  #insights.insights{background:
    radial-gradient(circle,rgba(11,11,11,.08) 1px,transparent 1.2px) 0 0/24px 24px,
    linear-gradient(90deg,var(--white) 0 42%,var(--paper-deep) 42%)}
}
/* under 901px the sections keep their base dot screens — turned up to match */
.portfolio{background-image:radial-gradient(circle,rgba(11,11,11,.08) 1px,transparent 1.2px)}
.insights{background-image:radial-gradient(circle,rgba(11,11,11,.09) 1px,transparent 1.2px)}

/* framed components rest slightly off the page */
.pf-tile{box-shadow:0 14px 30px -16px rgba(11,11,11,.34)}
.pf-tile:hover,.pf-tile:focus-visible{
  box-shadow:0 14px 30px -16px rgba(11,11,11,.34),5px 5px 0 rgba(11,11,11,.75);
}
.article{box-shadow:0 16px 32px -20px rgba(11,11,11,.34)}
.article:hover{box-shadow:0 16px 32px -20px rgba(11,11,11,.34),5px 5px 0 rgba(11,11,11,.7)}

/* the portfolio viewer: a soft inset at its scroll edges, so the frame
   reads as a window with depth rather than a flat box */
.pf-split .pf-viewport{
  box-shadow:inset 0 20px 22px -18px rgba(11,11,11,.4),
             inset 0 -20px 22px -18px rgba(11,11,11,.4);
}

/* the client ticker band settles onto the paper */
#ticker .tkr-band{box-shadow:0 20px 38px -22px rgba(11,11,11,.4)}

/* ---------- content floats ABOVE the cast shadows ----------
   The plates sit at z2, so their shadows fall across neighbouring paper.
   Cards, bars and text blocks in those neighbouring sections rise to z3:
   the shadow fog stays on the ground between them, and the elements read
   as floating slightly above the section itself. (Their parents create
   no stacking context, so z3 here beats the plates' z2 site-wide.) */
#work.pf-split .pf-split-grid{z-index:3}
.pf-showcase .pf-cap{position:relative;z-index:3}
#ticker .tkr-band{position:relative;z-index:3}
.model .split{position:relative;z-index:3}
.insights .sec-eyebrow,.insights .ins-head{position:relative;z-index:3}
.ins-grid{position:relative;z-index:3}
.ins-more{position:relative;z-index:3}
.talk .sec-eyebrow,.talk h2,.talk .talk-row,.talk .sign{position:relative;z-index:3}

/* the film grain must stay above the raised plates and floated cards
   (they sit at z2/z3 now) but below nav (z90) and overlays (z120+) */
body::before{z-index:5}

/* mobile: the viewer loses its frame and the cards become bar rows —
   the desktop depth cues don't apply there */
@media (max-width:900px){
  .pf-split .pf-viewport{box-shadow:none}
  .ins-grid .article,.ins-grid .article:hover{box-shadow:none}
}

/* =====================================================================
   FIT — EDITORIAL LEDGER (aligned with the site's split grammar)
   No boxes, no stunts. Desktop: a quiet tonal split — magenta for the
   "for" column, deep magenta for the "isn't" column, 1px seam in the
   gutter — the same move the Insights section makes on paper. Rows are
   indexed with mono numerals like a ledger, and each column header
   carries a double rule (2px under the head, 1px opening the list),
   classic broadsheet. Mobile keeps its accordion and gains the indexed
   rows.
===================================================================== */
/* indexed rows — all viewports */
.fit-cols ul{counter-reset:fitrow}
.fit-cols li{counter-increment:fitrow;position:relative;padding-left:46px}
.fit-cols li::before{
  content:counter(fitrow,decimal-leading-zero);
  position:absolute;left:2px;top:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:rgba(255,255,255,.55);
}

@media (min-width:1101px){
  /* tonal block scoped to the columns only — the heading and lede stay on
     clean magenta, and the deep quadrant begins where the lists begin.
     A translucent ink veil (not a solid) plays the deeper tone, so the
     section's dot screen stays visible through it. Negative right margin
     bleeds the block to the viewport edge. */
  .fit-cols{
    position:relative;margin-right:-6vw;padding-right:6vw;
    background:linear-gradient(90deg,
      transparent 0 calc(54% - 1px),
      rgba(11,11,11,.22) calc(54% - 1px) 54%,
      rgba(11,11,11,.13) 54%);
  }
  /* broadsheet double rule under each column head: 2px, a 5px gap, then
     the 1px line that opens the list */
  .fit-cols h3{
    padding-bottom:16px;margin-bottom:5px;
    border-bottom:2px solid rgba(255,255,255,.75);
  }
  .fit-cols ul li:first-child{border-top-color:rgba(255,255,255,.35)}
  /* the "isn't" column breathes off the seam */
  .fit-cols .no{padding-left:1.4vw}
}

/* =====================================================================
   INSIGHTS MOSAIC — second band: four more pieces, asymmetric on purpose.
   Under the feature row: a wide horizontal card, a deep image-led card,
   an ink text block (counterweight to the magenta a3), and a slim index
   strip. The bottom edge lands ragged — that's the point.
===================================================================== */
@media (min-width:1101px){
  /* explicit map — a packed 12x12 rectangle, no voids. Band one: the 6x7
     feature with two stacked columns beside it. Band two: the columns
     shift (5 / 7 split against band one's 6 / 3 / 3) so the mosaic reads
     staggered without leaving holes. */
  .article.feat{grid-column:1/7;grid-row:1/8}
  .article.a2{grid-column:7/10;grid-row:1/6}
  .article.a3{grid-column:10/13;grid-row:1/5}
  .article.a4{grid-column:10/13;grid-row:5/8}

  /* slim thumb-strip closing band one under a2 */
  .article.a5{grid-column:7/10;grid-row:6/8;display:grid;grid-template-columns:38% 1fr}
  .article.a5 .a-img{min-height:0;height:100%}
  .article.a5 .a-body{padding:12px 16px;justify-content:center;gap:4px}
  .article.a5 .a-tag{display:none}
  .article.a5 .a-title{font-size:clamp(14px,1.15vw,18px)}
  .article.a5 .a-excerpt,.article.a5 .a-meta{display:none}

  /* band two — 5-wide image piece, 7-wide ink block, 7-wide index strip */
  .article.a6{grid-column:1/6;grid-row:8/13;display:grid;grid-template-rows:1fr auto}
  .article.a6 .a-img{min-height:0}

  .article.a7{grid-column:6/13;grid-row:8/11;background:var(--ink);color:#fff;outline:0}
  .article.a7 .a-body{display:grid;grid-template-columns:1.1fr .9fr;gap:6px 32px;
    padding:24px 28px 18px;height:100%}
  .article.a7 .a-tag{grid-column:1/-1;color:var(--magenta)}
  .article.a7 .a-title{grid-column:1;color:#fff;font-size:clamp(20px,2vw,32px)}
  .article.a7 .a-excerpt{grid-column:2;grid-row:2;align-self:start;color:rgba(255,255,255,.7)}
  .article.a7 .a-meta{grid-column:1/-1;align-self:end;color:rgba(255,255,255,.55)}
  .article.a7 .a-meta b{color:#fff}
  .article.a7:hover{box-shadow:6px 6px 0 rgba(255,27,205,.55)}

  .article.a8{grid-column:6/13;grid-row:11/13;display:flex;align-items:center}
  .article.a8 .a-body{flex-direction:row;align-items:center;gap:16px;width:100%;padding:14px 24px}
  .article.a8 .a-tag{display:none}
  .article.a8 .a-excerpt,.article.a8 .a-meta{display:none}
  .article.a8 .a-title{font-size:clamp(17px,1.4vw,22px);line-height:1.15}
  .article.a8 .a-body::after{content:"\2192";font-family:var(--display);font-size:26px;margin-left:auto;color:var(--magenta);flex:0 0 auto}
}
/* (a7/a8 now carry a hero image too, so on the mobile bar-list they use the
   same thumbnail + text layout as every other card — no single-column
   override, and no overflow: see the min-width:0 fix in the mobile pass.) */

/* ---------- card tooth: every blog card carries its surface's dot screen
   (paper cards get ink dots, the magenta card white dots, the ink card
   faint white dots) — same print texture as the sections themselves.
   Desktop/tablet only; the mobile bar-list stays clean. ---------- */
@media (min-width:761px){
  .ins-grid .article{
    background-image:radial-gradient(circle,rgba(11,11,11,.05) 1px,transparent 1.2px);
    background-size:20px 20px;
  }
  .ins-grid .article.a3{
    background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.2px);
    background-size:20px 20px;
  }
}
@media (min-width:1101px){
  .ins-grid .article.a7{
    background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.2px);
    background-size:20px 20px;
  }
}
/* the three text-only cards (magenta a3, ink a7, index a8) carry a hidden
   hero image element so the MOBILE bar-list can show every post's cover;
   above the bar-list breakpoint those images stay hidden by design. */
@media (min-width:761px){
  .ins-grid .article.a3 .a-img,
  .ins-grid .article.a7 .a-img,
  .ins-grid .article.a8 .a-img{display:none}
}

/* =====================================================================
   FLOATING FIELD — photographed studio objects, suspended behind the
   page. Hero + Work read as one continuous patch; Testimonials is a
   second patch further down.
   ---------------------------------------------------------------------
   The studio white is removed optically with mix-blend-mode:multiply,
   not cut out — so every bit of the grain survives and there is no
   masking artefact anywhere. Depth is scale + opacity + blur moving
   together across five planes; nearest objects are cropped by the
   section edge on purpose.
===================================================================== */
:root{
  --fo1:url("field/01-camera-rangefinder.webp");
  --fo2:url("field/02-lens-prime.webp");
  --fo3:url("field/03-camera-cinema.webp");
  --fo4:url("field/04-clapperboard.webp");
  --fo5:url("field/05-light-fresnel.webp");
  --fo6:url("field/06-swatch-fan.webp");
  --fo7:url("field/07-contact-sheet.webp");
  --fo8:url("field/08-poster-rolled.webp");
  --fo9:url("field/09-light-meter.webp");
  --fo10:url("field/10-phone-object.webp");
}

/* NB: no z-index here on purpose. Any z-index (even 0) makes this a stacking
   context, and mix-blend-mode below would then blend against transparency
   instead of the section's own background — which shows up as pale rectangles
   around every object. Paint order still works: backgrounds sit under all
   positioned descendants, and the real content is lifted with z-index:1+. */
.qk-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.qk-field i{
  position:absolute;display:block;
  width:calc(210px * var(--s,1));aspect-ratio:1;
  background-image:var(--o);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  transform:rotate(var(--r,0deg));
  mix-blend-mode:multiply;
}
.qk-field .z1{--s:.34;opacity:.11;filter:blur(4.6px)}
.qk-field .z2{--s:.52;opacity:.20;filter:blur(2.8px)}
.qk-field .z3{--s:.76;opacity:.34;filter:blur(1.4px)}
.qk-field .z4{--s:1.08;opacity:.55;filter:blur(.4px)}
.qk-field .z5{--s:1.62;opacity:.78}

/* keep every section's real content above the field */
#home.reel .reel-pin{z-index:1}
section.tst > *:not(.qk-field){position:relative;z-index:1}

/* WORK carries no field — the portfolio panel there is a floating device
   instead (see the FLOATING PORTFOLIO DEVICE block at the end of this file). */

/* TESTIMONIALS — clear the middle so the headline never fights an object */
section.tst .qk-field::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(84% 64% at 50% 44%, rgba(235,232,221,.90) 18%, transparent 66%);
}

/* the hero is 175vh with pinned content, so its objects stay in the outer
   thirds instead — a centre veil can't track sticky content */
@media (max-width:900px){
  .qk-field .z4{--s:.86}
  .qk-field .z5{--s:1.15;opacity:.6}
}
@media (prefers-reduced-motion:no-preference){
  .qk-field i{will-change:auto}
}

/* =====================================================================
   FLOATING PORTFOLIO DEVICE — the Work panel as a screen suspended in
   space, echoing the hero's tablet but held still (no scroll animation).
   ---------------------------------------------------------------------
   The device is .pf-viewport itself: a thick ink border becomes the bezel
   and the white scrolling area inside becomes the screen, so nothing in
   the markup had to be restructured. .portfolio is overflow:hidden, so
   the shadow is thrown DOWN-RIGHT to stay inside the section instead of
   being sliced off at the left edge.
===================================================================== */
@media (min-width:901px){
  .pf-split .pf-left{perspective:1600px;perspective-origin:36% 46%}

  .pf-split .pf-viewport{
    /* rotateY is deliberately ZERO. Any Y rotation makes one vertical edge
       physically larger than the other, which reads as "crooked" against a
       flat editorial grid and skews the tile captions. rotateX alone leans
       the device back in space: real depth, both edges still parallel. */
    transform:rotateX(3.2deg) translateZ(0);
    transform-origin:50% 100%;
    backface-visibility:hidden;

    /* bezel: the border is the device frame, padding is the screen margin */
    border:13px solid var(--ink);
    background:var(--white);
    padding:14px 12px 6px;

    /* stacked falloff reads as real distance from the page; the last, widest
       layer carries a trace of magenta so the device still belongs to Quark */
    box-shadow:
      0 3px 7px rgba(11,11,11,.26),
      16px 20px 26px rgba(11,11,11,.22),
      38px 46px 54px rgba(11,11,11,.17),
      70px 84px 92px rgba(11,11,11,.12),
      104px 124px 140px rgba(255,27,205,.16);
  }

  /* a hairline of light down the near edge — sells the bezel as a solid object */
  .pf-split .pf-viewport::after{
    content:"";position:sticky;display:block;top:0;left:0;
    height:0;width:100%;
    box-shadow:0 0 0 1px rgba(255,255,255,.07);
    pointer-events:none;
  }

  /* the chips sit in front of the device, not on it */
  .pf-split .pf-filters{position:relative;z-index:2;margin:0 0 20px}

  /* .pf-right is earlier in the DOM, so without this the device's shadow
     paints over the magenta column and greys out "The work." heading */
  .pf-split .pf-right{position:relative;z-index:4}
}

/* the section clips, so give the shadow somewhere to live */
@media (min-width:901px){
  #work.pf-split{padding-right:5vw}
}

/* below the split breakpoint the panel goes full-width and flat again —
   a tilted device on a narrow screen only costs legibility */
@media (max-width:900px){
  .pf-split .pf-viewport{transform:none;border-width:1px;box-shadow:none}
}

/* =====================================================================
   BLOG CARDS AS FLOATING TABS (#insights)
   ---------------------------------------------------------------------
   Same device language as the Work panel: ink bezel, a lean back on the
   X axis only (no rotateY — that skews the card and reads as crooked),
   and a stacked shadow doing the actual floating. Angles vary slightly
   card to card so they read as separate tabs rather than one sheet.
===================================================================== */
@media (min-width:901px){
  .ins-grid{perspective:1900px;perspective-origin:50% 38%}

  .article{
    border:9px solid var(--ink);
    outline:0;
    background:var(--white);
    transform-origin:50% 100%;
    transform:rotateX(2.6deg);
    /* A real cast shadow is many layers with fast opacity decay, not three
       big soft ones. Tight dark contact at the bottom edge (the card leans
       back, so that edge is nearest the page), then a widening ladder, then
       one broad ambient. Offsets all fall down-right to match the light the
       objects elsewhere on the page are lit by. */
    box-shadow:
      0 1px 1px rgba(11,11,11,.22),
      0 2px 3px rgba(11,11,11,.17),
      2px 5px 6px rgba(11,11,11,.14),
      4px 9px 11px rgba(11,11,11,.11),
      8px 17px 20px rgba(11,11,11,.085),
      15px 30px 36px rgba(11,11,11,.06),
      26px 50px 60px rgba(11,11,11,.04),
      38px 74px 88px rgba(255,27,205,.10);
    transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
  }
  /* a hair of variance — identical angles read as one flat sheet */
  .ins-grid .article:nth-child(3n+1){transform:rotateX(2.1deg)}
  .ins-grid .article:nth-child(3n+2){transform:rotateX(3.2deg)}
  .ins-grid .article:nth-child(3n)  {transform:rotateX(2.6deg)}

  /* hover lifts the tab toward you and flattens it */
  .ins-grid .article:hover,
  .ins-grid .article:nth-child(3n+1):hover,
  .ins-grid .article:nth-child(3n+2):hover,
  .ins-grid .article:nth-child(3n):hover{
    transform:rotateX(.8deg) translateY(-7px);
    /* lifting it off the page pushes the contact shadow away and softens the
       whole ladder — that separation is what reads as "picked up" */
    box-shadow:
      0 2px 3px rgba(11,11,11,.18),
      0 5px 7px rgba(11,11,11,.15),
      4px 11px 14px rgba(11,11,11,.13),
      8px 20px 26px rgba(11,11,11,.11),
      15px 36px 46px rgba(11,11,11,.09),
      26px 60px 74px rgba(11,11,11,.07),
      42px 92px 110px rgba(11,11,11,.05),
      58px 124px 148px rgba(255,27,205,.15);
  }
  /* the featured card is bigger, so it sits marginally further forward */
  .ins-grid .article.feat{border-width:11px}
}

/* =====================================================================
   PAPER ON THE FIT SECTION (#fit)
   ---------------------------------------------------------------------
   A real photographed paper fibre (a crop of the rolled proof), laid over
   the magenta in soft-light. Soft-light keeps the hue and only lends the
   surface its tooth — multiply would just dirty the pink.
===================================================================== */
.fit::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("field/paper-grain.webp");
  background-size:760px auto;
  background-repeat:repeat;
  filter:grayscale(1) contrast(1.05);
  opacity:.42;
  mix-blend-mode:soft-light;
}
.fit > *{position:relative;z-index:1}

/* =====================================================================
   PAPER CUT-OUTS — #fit list panels and #talk action strips
   ---------------------------------------------------------------------
   Each piece is a torn sheet of ink-stock laid on the section. The tear
   lives on an absolutely-positioned ::before so the type on top stays
   perfectly sharp; the paper fibre is the same photographed grain used
   elsewhere, blended in rather than a CSS noise pattern.
   ::before is absolute on purpose — as a grid/flex item it would become
   a column of its own and shove the content sideways.
===================================================================== */

/* ---------- shared cut-out surface ---------- */
.qk-cut{position:relative;isolation:isolate}
.qk-cut > *{position:relative;z-index:1}
.qk-cut::before{
  content:"";position:absolute;z-index:0;
  background-color:#120d11;
  background-image:url("field/paper-grain.webp");
  background-size:110px 110px;
  background-blend-mode:soft-light;
  filter:url(#tear-a);
}
.qk-cut--b::before{filter:url(#tear-b)}
.qk-cut--magenta::before{background-color:var(--magenta)}

/* ---------- FIT — two rough-cut notes stuck onto the section ----------
   Not torn: a hand-cut off-white note laid on the magenta and pressed down.
   The edge filter is gentle (scale 4) so it still reads as a rectangle, and
   drop-shadow comes AFTER the displacement in the filter chain so the shadow
   follows the ragged silhouette instead of a clean box. */
@media (min-width:901px){
  .fit-cols .yes,.fit-cols .no{
    position:relative;isolation:isolate;
    padding:34px 38px 38px;
  }
  .fit-cols .yes > *,.fit-cols .no > *{position:relative;z-index:1}
  .fit-cols .yes::before,.fit-cols .no::before{
    content:"";position:absolute;inset:-12px -16px;z-index:0;
    background-color:#f4f1e6;                     /* off-white — pure #fff glares on magenta */
    background-image:url("field/paper-grain.webp");
    background-size:110px 110px;
    /* soft-light, NOT multiply: the grain is a high-pass texture centred on
       mid-grey, so multiply just halves the luminance and turns the note grey.
       Soft-light treats 128 as neutral and only lends the fibre. */
    background-blend-mode:soft-light;
  }
  .fit-cols .yes::before{
    filter:url(#edge-a) drop-shadow(7px 11px 9px rgba(40,0,28,.34));
    transform:rotate(-.7deg);
  }
  .fit-cols .no::before{
    filter:url(#edge-b) drop-shadow(-6px 12px 9px rgba(40,0,28,.32));
    transform:rotate(.9deg);
  }

  /* the note is light now, so everything on it flips to ink */
  .fit-cols .yes h3,.fit-cols .no h3{color:var(--ink)}
  .fit-cols h3 .dot{background:var(--ink)}
  .fit-cols .no h3 .dot{background:transparent;border-color:var(--ink)}
  .fit-cols li{color:var(--ink);border-top-color:rgba(11,11,11,.20)}
  .fit-cols li:last-child{border-bottom-color:rgba(11,11,11,.20)}
  .fit-cols li::before{color:rgba(11,11,11,.45)}
  .fit-cols li b{color:var(--ink)}
  /* the "isn't" column carries its own higher-specificity colour rules
     (.fit-cols .no li = 0,2,1) which outrank a plain .fit-cols li, so they
     have to be matched selector-for-selector or that whole list stays white
     and vanishes into the note. Keeps the original hierarchy: body copy
     softened, the bold phrase at full strength. */
  .fit-cols .no li{color:rgba(11,11,11,.70)}
  .fit-cols .no li b{color:var(--ink)}
  .fit-cols ul li:first-child{border-top-color:rgba(11,11,11,.20)}
}

/* ---------- LET'S TALK — the two actions become torn strips ---------- */
.talk-row .actions a{
  position:relative;isolation:isolate;
  background:transparent;              /* the colour moves to the cut-out */
}
.talk-row .actions a > *{position:relative;z-index:1}
.talk-row .actions a::before{
  content:"";position:absolute;inset:-7px -9px;z-index:0;
  background-color:#0b0b0b;
  background-image:url("field/paper-grain.webp");
  background-size:100px 100px;
  background-blend-mode:soft-light;
  filter:url(#tear-a);
  transition:background-color .3s;
}
.talk-row .actions a:nth-child(2)::before{
  background-color:var(--magenta);
  filter:url(#tear-b);
}
/* keep the existing colour swap on hover, just on the paper instead */
.talk-row .actions a:hover{background:transparent}
.talk-row .actions a:nth-child(2):hover{background:transparent}
.talk-row .actions a:hover::before{background-color:var(--magenta)}
.talk-row .actions a:nth-child(2):hover::before{background-color:#0b0b0b}




/* =====================================================================
   HERO — PER-GLYPH INVERSION OVER THE FLOATING OBJECTS
   ---------------------------------------------------------------------
   mix-blend-mode would do this per-pixel and for free, but the headline
   sits inside three nested stacking contexts (.reel-pin is sticky,
   .reel-inner holds the card's perspective, .reel-head is transformed by
   the scroll script) and blending cannot see past the innermost one. So
   the overlap is measured in JS instead and applied per letter.
   The transition is what keeps it from snapping — letters fade across as
   an object drifts over them.
===================================================================== */
.reel-head .g{transition:color .22s ease}
.reel-head h1 .g.over{color:#f3f1ea}
.reel-eyebrow .g.over{color:#ffffff}