/* ============================================================================
   AVC 3.0 LANDING SKIN — the V2 clean sheet, from the brand guideline supplied
   2026-08-19 (BRAND-AVC3.md is the extracted spec; AVC Branding/1.png and the
   31-page template PDF are the sources).

   The system, as their own template uses it:
   · black brand moments alternating with white content pages, not black-only
   · DM Sans Bold carries every headline; Playfair Bold Italic picks out ONE
     key phrase, never the whole line
   · gradient rounded rectangles are the supporting device (coral, gold, blue)
   · full-bleed gradient "breaker" pages with giant type between chapters
   · photography in rounded crops; character illustration is INTERNAL ONLY
   · every gradient carries BLACK text: white fails on the light stop of the
     blue (2.32:1) and the coral (2.87:1), and a gradient must pass at BOTH ends

   Fonts are SELF-HOSTED (fonts/ beside this file): the page must work in a
   dead spot on a conference floor, and a webfont link that fails to arrive
   ships the fallback silently. Non-Latin greeting scripts intentionally fall
   through to system fonts, which render native scripts better than any
   Latin webfont subset would.

   v1 (the warm register) is archived at v1/ and keeps landing.css; nothing
   here may leak into it, which is why this is a NEW file and not an edit.
   ========================================================================= */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(fonts/dmsans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(fonts/dmsans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(fonts/playfair-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(fonts/playfair-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* quoted from the guideline sheet, never sampled */
  --ink:#000000; --paper:#FFFFFF; --off:#F7F7F7;
  --red:#F83739; --yellow:#FDD039; --blue:#2687E0;
  --g-coral:linear-gradient(150deg,#FF6849,#F04240);
  --g-gold:linear-gradient(150deg,#FBE0A0,#FFC100);
  --g-blue:linear-gradient(150deg,#68AFF6,#007EFF);
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  /* neutrals per ground, all AA at body sizes on their own ground */
  --dim-d:#A8A8AD; --line-d:#26262B; --card-d:#0E0E12;
  --dim-l:#55555C; --line-l:#E7E7EB;
  --r-block:26px; --r-card:20px; --r-ui:10px;
  --plum:#46062B; /* the UNBOUND lockup's own plate colour, theirs not ours */
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:16px;line-height:1.58;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,textarea{font:inherit}
[hidden]{display:none!important}
h1,h2,h3{font-weight:700;letter-spacing:-.028em}
h1 em,h2 em,h3 em{font-family:var(--serif);font-style:italic;font-weight:700;letter-spacing:-.01em}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.grain{display:none}
.lbl{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ── header: white, the template's interior-page chrome ─────────────────── */
header{background:var(--paper);color:var(--ink)}
.hrow{display:flex;align-items:center;gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.hmark{height:36px;width:auto}
.badge{background:var(--plum);border-radius:8px;padding:9px 13px;display:inline-flex;align-items:center}
.badge img{height:20px;width:auto}
.hwhen{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-l)}
.hcta{margin-left:auto;background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px}
.hcta:active{transform:translateY(1px)}
@media (max-width:900px){.hwhen{display:none}}
@media (max-width:560px){.hcta{display:none}.hrow{justify-content:space-between}}

/* ── hero: the black brand moment ────────────────────────────────────────── */
.hero{padding:clamp(40px,6.5vw,84px) clamp(20px,4vw,44px) clamp(46px,7vw,92px)}
.herogrid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4.5vw,64px);align-items:start}
@media (max-width:980px){.herogrid{grid-template-columns:1fr}}

.greetbox{overflow:hidden;min-height:1.3em}
.greet{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(56px,9vw,104px);line-height:1.26;letter-spacing:-.01em}
.greet.out{animation:roll-out .26s ease forwards}
.greet.in{animation:roll-in .3s ease}
@keyframes roll-out{to{transform:translateY(-108%);opacity:0}}
@keyframes roll-in{from{transform:translateY(108%);opacity:0}to{transform:none;opacity:1}}
.greet-l{display:flex;align-items:center;gap:9px;margin-top:2px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim-d)}
.greet-l i{width:22px;height:2px;background:var(--g-coral);border-radius:2px}

.hero h1{font-size:clamp(31px,4.1vw,50px);line-height:1.1;margin-top:26px;max-width:17ch}
.hero .sub{color:var(--dim-d);font-size:clamp(15px,1.5vw,17px);margin-top:18px;max-width:52ch}

/* the language strip: chips restyled onto black. Class names are load-bearing
   (the greeting controller assigns them from fixed tables) so the OLD names
   keep their jobs and take new clothes: paper=white chip, dash=outlined,
   hot=coral, warm=gold, plum=blue (the old plum is not in the 3.0 palette). */
.strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:560px}
/* 40px minimum: the chips are the page's main interaction and they get used
   one-handed in a crowded hall. They measured 32px. */
.strip button{position:relative;font-size:14px;font-weight:600;line-height:1;
  min-height:40px;padding:0 15px;border-radius:999px;transition:transform .15s ease}
.strip button:hover{transform:translateY(-2px)}
.strip .r-paper{background:var(--paper);color:var(--ink)}
.strip .r-dash{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px #3A3A41}
.strip .r-hot{background:var(--g-coral);color:var(--ink)}
.strip .r-warm{background:var(--g-gold);color:var(--ink)}
.strip .r-plum{background:var(--g-blue);color:var(--ink)}
.strip button.is-on{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--paper)}
.strip .a-hot.is-on{background:var(--g-coral);color:var(--ink)}
.strip .a-warm.is-on{background:var(--g-gold);color:var(--ink)}
.strip .a-plum.is-on{background:var(--g-blue);color:var(--ink)}
.strip .a-ink.is-on{background:var(--paper);color:var(--ink)}

.evt{display:inline-flex;align-items:center;gap:12px;margin-top:26px}
.evt .b2{background:var(--plum);border-radius:8px;padding:9px 13px;display:inline-flex}
.evt .b2 img{height:20px}
.evt span:last-child{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-d)}
@media (max-width:480px){.evt{flex-wrap:wrap}}

.herofill{margin-top:34px;border-top:1px solid var(--line-d);padding-top:22px}
.herofill .k{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dim-d)}
.hteam{margin-top:14px}
.hstack{display:flex;align-items:center}
.hstack img{width:52px;height:52px;border-radius:18px;object-fit:cover;border:3px solid var(--ink)}
.hstack img+img{margin-left:-14px}
.hsay{margin-left:14px;font-size:14px;color:var(--dim-d)}
.hsay b{display:block;color:var(--paper);font-weight:700}
.hproof{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.hp b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;
  background:var(--g-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;line-height:1.25}
.hp span{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-d);margin-top:2px}

/* ── the form card: an off-white page floated on the black moment ────────── */
.formcard{background:var(--off);color:var(--ink);border-radius:var(--r-block);
  padding:clamp(22px,2.6vw,34px);position:relative}
.formcard h2{font-size:clamp(22px,2.3vw,27px);letter-spacing:-.02em;padding-right:70px}
.formcard h2::after{content:'';position:absolute;top:clamp(26px,2.8vw,38px);right:clamp(22px,2.6vw,34px);
  width:46px;height:12px;
  background:radial-gradient(circle 6px at 6px 6px,#F83739 5.5px,transparent 6px),
             radial-gradient(circle 6px at 23px 6px,#FDD039 5.5px,transparent 6px),
             radial-gradient(circle 6px at 40px 6px,#2687E0 5.5px,transparent 6px)}
.formcard .intro{font-size:14.5px;color:var(--dim-l);margin-top:10px}
.field{margin-top:15px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-l)}
.formcard .lbl{color:var(--dim-l);font-size:11px;letter-spacing:.13em}
.field input,.field textarea{width:100%;margin-top:7px;padding:12px 13px;font-size:16px;
  border:1.5px solid #DBDBE1;border-radius:var(--r-ui);background:var(--paper);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field textarea{min-height:74px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#9A9AA1}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:430px){.two-up{grid-template-columns:1fr}}
.seg{display:flex;gap:8px;margin-bottom:16px}
.seg button{flex:1;padding:11px 10px;font-size:13.5px;font-weight:700;border-radius:var(--r-ui);
  background:var(--paper);border:1.5px solid #DBDBE1;color:var(--dim-l)}
.seg button.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font-size:13px;font-weight:600;padding:8px 13px;border-radius:999px;
  background:var(--paper);border:1.5px solid #DBDBE1;color:var(--ink)}
.chip:active{transform:translateY(1px)}
.chip.is-on{background:var(--g-blue);border-color:transparent;color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;
  font-size:12.5px;line-height:1.5;color:var(--dim-l)}
/* the consent box is the compliance-critical control on the page and was the
   smallest target on it at 17px */
.check input{width:24px;height:24px;margin-top:1px;accent-color:var(--ink);flex:0 0 auto}
.btn{display:block;width:100%;margin-top:18px;background:var(--ink);color:var(--paper);
  font-weight:700;font-size:15.5px;padding:15px;border-radius:var(--r-ui)}
.btn:active{transform:translateY(1px)}

/* ── statement bands: the template's full-bleed gradient chapter move,
      black text (passes both gradient stops). No numerals: deck pagination
      read as content on a scrolling page and collided with the fact cards. ── */
.breaker{color:var(--ink);padding:clamp(48px,7vw,92px) 0}
.breaker.gold{background:var(--g-gold)}
.breaker h2{font-size:clamp(34px,5vw,64px);line-height:1.04;max-width:16ch}
.breaker p{margin-top:16px;font-weight:500;color:rgba(0,0,0,.72);max-width:44ch}
.breaker{position:relative;overflow:hidden}
.bblocks{position:absolute;right:clamp(-30px,-2vw,0px);top:50%;transform:translateY(-50%);
  display:grid;grid-template-columns:132px 132px;grid-auto-rows:96px;gap:14px}
.bblocks i{display:block;border-radius:26px}
.bblocks i:nth-child(1){background:#fff;grid-row:span 2}
.bblocks i:nth-child(2){background:var(--g-blue)}
.bblocks i:nth-child(3){background:var(--g-coral)}
.bblocks i:nth-child(4){background:#fff}
/* below the two-column breakpoint the text needs the full width */
@media (max-width:900px){.bblocks{display:none}}

/* ── reveal ──────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.on{opacity:1;transform:none}

/* ── scattered blocks. Their template's white pages are never bare: solid
      rounded rectangles sit at the edges, some bleeding off. This is that,
      as a decorative layer the sections opt into. Kept behind content and
      hidden on small screens, where there is no margin to spare. ────────── */
.scat{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.scat i{position:absolute;display:block;border-radius:26px}
.scat .k1{width:120px;height:120px;background:var(--yellow)}
.scat .k2{width:86px;height:150px;background:var(--blue)}
.scat .k3{width:150px;height:96px;background:var(--red)}
.scat .k4{width:70px;height:70px;background:var(--yellow);border-radius:20px}
/* Every section places its own, so no two read the same. The services section
   deliberately keeps its top-right corner EMPTY: the breaker above ends with
   its own block cluster there, and a second cluster directly beneath it read
   as one broken run rather than two deliberate groups. */
.warm .scat .k1{left:-52px;top:78px}
.warm .scat .k2{right:-40px;bottom:180px}
.warm .scat .k3{left:-70px;bottom:150px;opacity:.9}
.warm .scat .k4{display:none}
.band .scat .k1{left:-56px;top:44px;background:var(--blue);border-radius:30px}
.band .scat .k2{right:-40px;bottom:70px;background:var(--yellow)}
.band .scat .k4{right:120px;top:-30px;background:var(--red)}
.band.dark .scat i{opacity:.16}
.wrap{position:relative;z-index:1}
@media (max-width:1100px){.scat{display:none}}

/* ── white chapter: what we do ───────────────────────────────────────────── */
.warm{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);
  padding:clamp(48px,7vw,88px) 0;border-radius:var(--r-block) var(--r-block) 0 0}
.warm .lbl{color:var(--dim-l)}
.warm h2{font-size:clamp(30px,4.4vw,54px);line-height:1.05;margin-top:12px;max-width:18ch}
.warm .lede{color:var(--dim-l);margin-top:14px;max-width:58ch}
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
@media (max-width:900px){.svcs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svcs{grid-template-columns:1fr}}
.svc{background:var(--off);border-radius:var(--r-card);padding:22px 20px 24px;
  transition:transform .18s var(--ease)}
.svc:hover{transform:translateY(-3px)}
/* a wash of the card's own colour, light enough that body text keeps its
   contrast against it (all three measured over 12:1 for the ink) */
.svc:nth-child(3n+1){background:#FDECEA}
.svc:nth-child(3n+2){background:#FDF4DE}
.svc:nth-child(3n){background:#E8F1FC}
.svc-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:12px;margin-bottom:14px;font-size:12.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.svc:nth-child(3n+1) .svc-n{background:var(--g-coral)}
.svc:nth-child(3n+2) .svc-n{background:var(--g-gold)}
.svc:nth-child(3n) .svc-n{background:var(--g-blue)}
.svc b{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.01em}
.svc p{font-size:14px;color:var(--dim-l);margin-top:6px}
.svc-does{list-style:none;margin-top:12px}
.svc-does li{font-size:13.5px;color:var(--dim-l);padding-left:16px;position:relative}
.svc-does li+li{margin-top:5px}
.svc-does li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:999px;background:var(--yellow)}
.stmt{margin-top:52px;border-top:1px solid var(--line-l);padding-top:38px}
.stmt p{font-size:clamp(27px,4vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.1;max-width:20ch}
.stmt p em{font-family:var(--serif);font-style:italic;font-weight:700}
.stmt .who{display:flex;align-items:center;gap:10px;margin-top:14px}
.stmt .who i{width:46px;height:10px;
  background:radial-gradient(circle 5px at 5px 5px,#F83739 4.5px,transparent 5px),
             radial-gradient(circle 5px at 20px 5px,#FDD039 4.5px,transparent 5px),
             radial-gradient(circle 5px at 35px 5px,#2687E0 4.5px,transparent 5px)}
.stmt .who span{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-l)}

/* ── proof: a black panel inside the white chapter, like the deck's pages ── */
.proof{background:var(--paper);padding:0 0 clamp(30px,4vw,52px)}
.proofcard{max-width:1200px;margin:0 auto;background:var(--ink);color:var(--paper);
  border-radius:var(--r-block);padding:clamp(28px,3.6vw,48px)}
@media (max-width:1248px){.proofcard{margin:0 clamp(20px,4vw,44px)}}
.proofrail{display:none}
.proof .plbl{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-d)}
.proof h2{font-size:clamp(25px,3vw,37px);line-height:1.12;margin-top:12px;max-width:24ch}
.proof .psub{color:var(--dim-d);margin-top:12px;max-width:58ch;font-size:15px}
.pnums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media (max-width:700px){.pnums{grid-template-columns:1fr}}
.pn{border-radius:var(--r-card);padding:22px 20px;color:var(--ink)}
.pn:nth-child(1){background:var(--g-gold)}
.pn:nth-child(2){background:var(--g-blue)}
.pn:nth-child(3){background:var(--g-coral)}
.pn::before{display:none}
.pn b{display:block;font-size:clamp(34px,3.6vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1}
.pn span{display:block;margin-top:7px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.pn em{display:block;font-style:normal;font-size:12.5px;margin-top:6px;opacity:.75}
.psrc{margin-top:18px;font-size:12px;color:var(--dim-d)}

/* ── the team photograph. Sits on black so the neon in the shot carries, in a
      rounded crop because that is how the brand frames photography. ──────── */
.teamband{background:var(--ink);padding:clamp(34px,5vw,64px) 0}
.tb{position:relative;border-radius:var(--r-block);overflow:hidden}
.tb img{width:100%;height:auto;display:block}
.tb figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px clamp(20px,3vw,32px) 20px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:14.5px;color:#D8D8DD;
  background:linear-gradient(transparent,rgba(0,0,0,.82) 62%)}
.tb figcaption b{color:#fff;font-weight:700;font-size:16px}
@media (max-width:640px){
  /* on a phone the caption would cover half the faces */
  .tb figcaption{position:static;background:none;padding:12px 2px 0}
}

/* ── white bands: moments, offices, agency, values ───────────────────────── */
.band{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);
  padding:clamp(44px,6vw,76px) 0}
.band .lbl{color:var(--dim-l)}
.band h2{font-size:clamp(28px,4.2vw,52px);line-height:1.05;margin-top:12px;max-width:18ch}
.band .lede{color:var(--dim-l);margin-top:14px;max-width:58ch}

.moms{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media (max-width:980px){.moms{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.moms{grid-template-columns:1fr}}
.mom{background:var(--off);border-radius:var(--r-card);padding:20px 18px 22px}
.mom::before{display:none}
.mom-n{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 10px;border-radius:12px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.mom:nth-child(4n+1) .mom-n{background:var(--g-gold)}
.mom:nth-child(4n+2) .mom-n{background:var(--g-coral)}
.mom:nth-child(4n+3) .mom-n{background:var(--g-blue)}
.mom:nth-child(4n) .mom-n{background:var(--paper);border:1.5px solid var(--line-l)}
.mom-h{margin-top:12px}
.mom-h b{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.mom-d{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-l);margin-top:3px}
.mom-t{font-size:13.5px;color:var(--dim-l);margin-top:9px}

.offs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
@media (max-width:820px){.offs{grid-template-columns:1fr}}
.off{background:var(--off);border-radius:var(--r-card);padding:22px 20px}
.off .c{display:flex;align-items:baseline;gap:10px}
.off .c b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.off .c i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim-l)}
.off p{font-size:14px;color:var(--dim-l);margin-top:8px}

/* ── people: the black chapter, photos pop the way the deck's mission page does ── */
main .band.dark{background:var(--ink);color:var(--paper);
  border-radius:var(--r-block)}
main .band.dark .lbl{color:var(--dim-d)}
main .band.dark .lede{color:var(--dim-d)}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
@media (max-width:900px){.people{grid-template-columns:1fr}}
.prs{background:var(--card-d);border-radius:var(--r-card);padding:20px 19px 22px}
.prs-h{display:flex;align-items:center;gap:13px}
.prs-p img{width:64px;height:64px;border-radius:20px;object-fit:cover}
.prs-t b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.prs-r{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim-d);margin-top:3px}
.prs p{font-size:13.5px;color:var(--dim-d);margin-top:13px}
.prs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line-d)}
.prs-tags span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;
  background:transparent;box-shadow:inset 0 0 0 1px #33333A;color:var(--dim-d)}
.prs-site{display:inline-flex;align-items:center;min-height:40px;margin-top:5px;
  font-size:13px;font-weight:700;color:#8CC1F5;
  text-decoration:none;border-bottom:1px solid transparent}
.prs-site::before{content:"\2197\00a0";font-weight:400}
.prs-site:hover{border-bottom-color:#8CC1F5}

/* evergreen: agency roster + values, white bands */
.agency{margin-top:30px}
.agleads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.agleads{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.agleads{grid-template-columns:1fr}}
.aglead{background:var(--off);border-radius:var(--r-card);padding:20px 18px}
.aglead i{display:block;width:26px;height:26px;border-radius:10px;margin-bottom:13px}
.aglead:nth-child(3n+1) i{background:var(--g-coral)}
.aglead:nth-child(3n+2) i{background:var(--g-gold)}
.aglead:nth-child(3n) i{background:var(--g-blue)}
.aglead b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.aglead span{display:block;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim-l)}
.agteam-h{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-l);
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dim-l)}
.agteam-h em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:14px;
  letter-spacing:0;text-transform:none;margin-left:8px}
.agteam{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 22px;margin-top:16px}
@media (max-width:1000px){.agteam{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.agteam{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.agteam{grid-template-columns:1fr}}
.agm{padding:8px 0;border-bottom:1px solid var(--line-l)}
.agm b{display:block;font-size:14px;font-weight:700}
.agm span{display:block;font-size:12px;color:var(--dim-l);margin-top:1px}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
@media (max-width:820px){.vals{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.vals{grid-template-columns:1fr}}
.val{background:var(--off);border-radius:var(--r-card);padding:20px 18px}
.val::before{content:'';display:block;width:26px;height:26px;border-radius:10px;margin-bottom:12px}
.val:nth-child(6n+1)::before{background:var(--g-coral)}
.val:nth-child(6n+2)::before{background:var(--g-gold)}
.val:nth-child(6n+3)::before{background:var(--g-blue)}
.val:nth-child(6n+4)::before{background:var(--g-gold)}
.val:nth-child(6n+5)::before{background:var(--g-blue)}
.val:nth-child(6n)::before{background:var(--g-coral)}
.val b{display:block;font-size:16px;font-weight:700}
.val p{font-size:13.5px;color:var(--dim-l);margin-top:6px}

/* ── the announcement: a full-bleed gradient breaker, the deck's own move ── */
.announce{background:var(--g-blue);color:var(--ink);padding:clamp(52px,8vw,104px) 0}
.announce h2 em{letter-spacing:-.015em}
.announce .lbl{color:rgba(0,0,0,.78)}
.announce h2{font-size:clamp(30px,4.4vw,56px);line-height:1.06;margin-top:14px;max-width:20ch}
.announce .lede{color:rgba(0,0,0,.72);margin-top:16px;max-width:52ch;font-weight:500}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media (max-width:720px){.facts{grid-template-columns:1fr}}
.fact{background:var(--paper);border-radius:var(--r-card);padding:18px 18px 20px}
.fact span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-l)}
.fact b{display:block;margin-top:6px;font-size:17px;font-weight:700;letter-spacing:-.01em}

/* ── done stage: back to the black moment ────────────────────────────────── */
.done{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(56px,9vw,110px);text-align:left}
.done .greet{font-size:clamp(48px,7.5vw,86px)}
.done h2{font-size:clamp(27px,3.5vw,42px);margin-top:20px}
.done p{color:var(--dim-d);margin-top:14px;max-width:56ch}
.thanks{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--dim-d)!important}
.done .moms{margin-top:44px}
.done .mom{background:var(--card-d);color:var(--paper)}
.done .mom-h b{color:var(--paper)}
.done .mom-d,.done .mom-t{color:var(--dim-d)}
.done .mom:nth-child(4n) .mom-n{background:transparent;border-color:var(--line-d);color:var(--paper)}

/* ── footer: black, quiet ────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-d);padding:34px 0 90px}
.frow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.frow img.m{height:52px;width:auto}
.frow .sp{margin-left:auto}
.frow a{display:inline-flex;align-items:center;min-height:40px;color:var(--paper);
  font-weight:600;font-size:14px;text-decoration:none;box-shadow:inset 0 -1px 0 #3A3A41}
.frow a:hover{box-shadow:inset 0 -1px 0 var(--paper)}
.cts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media (max-width:720px){.cts{grid-template-columns:1fr}}
.ct{border-top:1px solid var(--line-d);padding-top:12px}
.ct span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-d)}
.ct a,.ct b{display:flex;align-items:center;min-height:40px;margin-top:2px;color:var(--paper);
  font-weight:600;font-size:14.5px;text-decoration:none}
.ct a:hover{text-decoration:underline}

[data-slot="flash"]{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(8px);
  background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;padding:12px 18px;
  border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;
  max-width:min(92vw,480px);text-align:center}
[data-slot="flash"].is-on{opacity:1;transform:translateX(-50%)}

.mobilecta{display:none}
@media (max-width:980px){
  .mobilecta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(0,0,0,.85);backdrop-filter:blur(10px);border-top:1px solid var(--line-d)}
  .mobilecta a{display:block;background:var(--paper);color:var(--ink);text-align:center;
    font-weight:700;font-size:15px;padding:13px;border-radius:999px;text-decoration:none}
}

.tagline{font-family:var(--serif);font-style:italic}
.pband{display:none} /* retired: character illustration is internal-only in 3.0 */

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