/* ═══════════════════════════════════════════════════════════════════════════
   AVC — Site Next v2.
   Direction: multicultural-forward, editorial, premium. The dot palette from
   their logo runs the system (one colour per service), type does the heavy
   lifting, hairlines replace card borders, and the reel lives in a cinema
   panel — no text ever sits on moving footage.
   Measured AA: CTA #E61500 (4.70:1 under white) · hover #A80F00 · dim #5E6A76.
   Brand #FF5544 and the dot colours are display/accent only.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --white:#FFFFFF; --black:#0B0B0D; --true-black:#000;
  --ink:#111118; --body:#2A2A33; --dim:#5E6A76;
  --paper:#FAFAF8;                 /* warm off-white ground */
  --tint:#F1F1EC;                  /* third ground, so alternation is not just black/white */
  --line:rgba(17,17,24,.12); --line-dark:rgba(255,255,255,.14);
  --brand:#FF5544; --cta:#E61500; --cta-hover:#A80F00;
  --red:#FF180C; --gold:#FCBC39; --blue:#1D7FDA; --green:#61CE70; --orange:#FF7520;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --container:1240px;
  --rp:999px; --r:20px; --r-lg:28px;
  --grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--body);
  font-size:clamp(16px,1.1vw,17.5px);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4.5vw,56px);width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--black);color:#fff;
  padding:14px 20px;font-weight:600;border-radius:0 0 10px 0}
.skip:focus{left:0}
section{position:relative;scroll-margin-top:120px}
.pad{padding:clamp(72px,9vw,136px) 0}
.dark{background:var(--black);color:#B9BAC6}
.dark ::selection{background:var(--brand);color:#000}

/* ── type ── */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.025em;line-height:1.04;font-weight:800}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.t-hero{font-size:clamp(44px,7vw,104px);line-height:.96;letter-spacing:-.035em}
.t-1{font-size:clamp(32px,4.4vw,62px);letter-spacing:-.03em}
.t-2{font-size:clamp(24px,2.8vw,38px)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.65;color:var(--dim);
  max-width:min(100%,66.6%)}   /* 8 of 12 columns */

.dark .lede{color:#A9AAB8}
.overline{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:22px}
.dark .overline,.leadgen .overline,.unbound .overline,.hero .overline{color:#fff}
.overline .dots{display:inline-flex;gap:5px}
.overline .dots i{width:8px;height:8px;border-radius:50%}
.overline .dots i:nth-child(1){background:var(--red)}
.overline .dots i:nth-child(2){background:var(--gold)}
.overline .dots i:nth-child(3){background:var(--blue)}

/* ── buttons: extruded, with a lit top edge, a solid side wall and a cast
   shadow. They lift on hover and genuinely depress on :active. ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;
  padding:15px 32px;border-radius:var(--rp);font-weight:700;font-size:16px;border:0;
  cursor:pointer;position:relative;
  transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s ease,background .16s ease}
/* Flat, on the same register as the rest of the page (James, 2026-08-25):
   solid ink, hairline logic, quiet states. The extruded cap/side-wall/hop
   treatment is retired — do not reintroduce dimensional button chrome. */
/* The cast is the cinema panel's own (.cine: 0 40px 100px rgba(0,0,0,.5)) scaled
   to button size — same neutral black, same soft generous blur, no spread. It
   lifts the CTA off the page as an object without any of the extruded chrome the
   flat pass removed. Neutral, NOT a red glow: a coloured cast is what made the
   old button read as a toy. */
.btn.p{color:#fff;background:var(--cta);box-shadow:0 14px 38px rgba(0,0,0,.30)}
.btn.p:hover{background:var(--cta-hover);transform:translateY(-1px);
  box-shadow:0 20px 48px rgba(0,0,0,.36)}
.btn.p:active{background:#8F0C00;transform:translateY(0);
  box-shadow:0 6px 18px rgba(0,0,0,.26)}
.btn.ghost{background:#fff;color:var(--ink);
  box-shadow:0 0 0 1.5px rgba(17,17,24,.18)}
.btn.ghost:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1.5px rgba(17,17,24,.4),0 10px 24px -14px rgba(11,11,13,.4)}
.btn.ghost:active{transform:translateY(0);background:var(--paper);
  box-shadow:0 0 0 1.5px rgba(17,17,24,.3)}
.dark .btn.ghost{background:transparent;color:#fff;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.3)}
.dark .btn.ghost:hover{background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.dark .btn.ghost:active{background:rgba(255,255,255,.1)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.arrow-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--cta)}
.arrow-link::after{content:'→';transition:transform .18s ease}
.arrow-link:hover::after{transform:translateX(5px)}
.dark .arrow-link{color:var(--brand)}

/* ── header ── */
.topstrip{background:var(--true-black);color:#fff;font-size:13.5px;position:relative}
.topstrip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#FD2ECB,#FF4800)}   /* UNBOUND's own gradient as a rule,
  the mark itself untouched */
.topstrip .ubwrap{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.topstrip .ubpre{font-weight:700;white-space:nowrap}
.topstrip .ub{height:14px;width:auto;display:block}
.topstrip .in{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:9px clamp(20px,4vw,48px)}
.topstrip .pillu{background:var(--gold);color:var(--true-black);font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;border-radius:var(--rp);padding:4px 11px;flex:0 0 auto}
.topstrip a.go{margin-left:auto;color:#8CC1F5;font-weight:700;flex:0 0 auto;min-height:30px;
  display:inline-flex;align-items:center;gap:6px}
.topstrip a.go:hover{color:#fff}
@media(max-width:740px){.topstrip .hidem{display:none}}
/* the event lockup is wider than the pill it replaced — below 620 the CTA
   collapses to its arrow, and below 470 the "AVC is at" prefix drops */
@media(max-width:620px){
  /* collapsed to its arrow, it must still be a real 44px target */
  .topstrip .go span{display:none}
  .topstrip .go::after{content:'→'}
  .topstrip .go{min-width:44px;min-height:44px;justify-content:center;margin:-7px 0}
  .topstrip .in{gap:10px}
}
@media(max-width:470px){
  .topstrip .ubpre{display:none}
  .topstrip .ub{height:12px}
}
header.site{position:sticky;top:0;z-index:100;background:rgba(250,250,248,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.bar{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:24px;
  padding:15px clamp(20px,4vw,48px)}
.bar .logo img{height:52px;width:auto}
@media(max-width:560px){.bar .logo img{height:44px}}
nav.main{display:flex;align-items:center;gap:2px;margin-left:auto}
nav.main>div{position:relative}
nav.main>div>a{font-size:15.5px;font-weight:600;padding:11px 14px;border-radius:10px;
  display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
nav.main>div>a:hover{color:var(--cta)}
nav.main>div>a[aria-current]{color:var(--cta)}
nav.main>div>a .car{font-size:10px;opacity:.55;transition:transform .18s}
nav.main>div:hover>a .car{transform:rotate(180deg)}
/* the dropdown: scoped tighter than nav.main>div>a so nothing leaks in */
nav.main .drop{position:absolute;top:calc(100% + 10px);left:0;min-width:270px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px rgba(11,11,13,.16);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s ease}
nav.main>div:hover .drop,nav.main>div:focus-within .drop{opacity:1;visibility:visible;transform:none}
nav.main .drop a{display:flex;align-items:center;gap:12px;width:100%;font-size:15px;
  font-weight:600;padding:12px 14px;border-radius:10px;color:var(--ink)}
nav.main .drop a:hover{background:var(--paper);color:var(--cta)}
nav.main .drop a i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--c,#ccc)}
.navcta{margin-left:8px;color:#fff!important;font-weight:700;font-size:15px;
  padding:14px 28px;border-radius:var(--rp);white-space:nowrap;position:relative;
  background:var(--cta);box-shadow:0 10px 28px rgba(0,0,0,.26);
  transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s ease,background .16s ease}
.navcta:hover{background:var(--cta-hover);transform:translateY(-1px);
  box-shadow:0 16px 38px rgba(0,0,0,.32)}
.navcta:active{background:#8F0C00;transform:translateY(0);
  box-shadow:0 5px 14px rgba(0,0,0,.24)}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--line);
  background:#fff;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;
  background:var(--ink);position:relative}
.burger span::before{content:'';position:absolute;top:-6px}
.burger span::after{content:'';position:absolute;top:6px}
@media(max-width:1080px){
  nav.main,.bar>.navcta{display:none}
  .burger{display:flex}
  nav.main.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;
    top:100%;left:0;right:0;background:#fff;padding:8px 24px 26px;gap:0;margin:0;
    box-shadow:0 30px 60px rgba(0,0,0,.16);max-height:80vh;overflow:auto}
  nav.main.open>div>a{padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0;width:100%}
  nav.main.open .drop{position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;padding:0 0 6px 18px;min-width:0}
}

/* ── hero v2: type leads, the reel gets a cinema panel of its own ── */
.hero{background:var(--paper);color:var(--body);overflow:hidden}
.hero h1{color:var(--ink)}
.hero .lede{color:var(--dim)}
.hero .wrap{padding-top:clamp(56px,7vw,104px)}
.rotor-line{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.rotor{font-size:clamp(30px,4vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--cta);min-width:5ch;display:inline-block}
.rotor-line small{font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim)}
.hero h1{max-width:min(100%,75%)}
.hero h1 .hl{color:var(--brand)}
.hero .lede{margin-top:26px;max-width:min(100%,66.6%)}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.cine{position:relative;margin-top:clamp(40px,5vw,72px);border-radius:var(--r-lg);
  overflow:hidden;aspect-ratio:21/9;background:#141419;
  box-shadow:0 40px 100px rgba(0,0,0,.5)}
@media(max-width:740px){.cine{aspect-ratio:4/5;border-radius:var(--r)}}
.cine video,.cine img.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine .portrait{display:none}
@media(max-width:740px){.cine .landscape{display:none}.cine .portrait{display:block}}
.cine .badge{position:absolute;left:18px;bottom:16px;z-index:2;display:inline-flex;
  align-items:center;gap:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--rp);padding:9px 16px}
.cine .badge i{width:8px;height:8px;border-radius:50%;background:var(--brand);
  animation:pulse 2s ease infinite}
@keyframes pulse{50%{opacity:.35}}
.proofbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:clamp(40px,5vw,64px) 0 0;border-top:1px solid var(--line)}
.proofbar>div{padding:26px 26px 0 0;border-right:1px solid var(--line);padding-left:26px}
.proofbar>div:first-child{padding-left:0}
.proofbar>div:last-child{border-right:0}
@media(max-width:860px){
  .proofbar{grid-template-columns:1fr 1fr}
  .proofbar>div{border-right:0;padding-left:0}
}
.proofbar b{display:block;font-size:clamp(26px,2.8vw,40px);font-weight:800;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proofbar span{display:block;margin-top:4px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hero .wrap{padding-bottom:clamp(56px,7vw,96px)}

/* the ticker treatment is reserved for the client wall (see .logowall).
   NB: @keyframes mq lives here because .lt depends on it — it was previously
   defined inside the retired mantra marquee block, which silently stopped the
   client wall when that block was removed. */
@keyframes mq{to{transform:translateX(-50%)}}

/* ── services: editorial numbered rows, one dot colour per practice ── */
.svclist{border-top:1px solid var(--line)}
.svcrow{position:relative;display:grid;grid-template-columns:110px 1fr auto;
  gap:clamp(18px,3vw,44px);align-items:center;padding:clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--line)}
/* the highlight is an inset rounded pane behind the row, so it never collides
   with the hairlines and the text never reflows */
.svcrow::before{content:'';position:absolute;inset:6px -20px;border-radius:16px;
  background:#fff;opacity:0;transform:scale(.985);
  box-shadow:0 18px 44px rgba(11,11,13,.09);
  transition:opacity .28s cubic-bezier(.2,.7,.2,1),transform .28s cubic-bezier(.2,.7,.2,1)}
.svcrow:hover::before,.svcrow:focus-visible::before{opacity:1;transform:scale(1)}
.svcrow>*{position:relative;z-index:1}
.svcrow>div,.svcrow .num{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.svcrow:hover>div,.svcrow:hover .num{transform:translateX(8px)}
@media(max-width:760px){.svcrow{grid-template-columns:56px 1fr;row-gap:8px}
  .svcrow:hover{padding-left:0}}
.svcrow .num{font-size:14px;font-weight:800;letter-spacing:.14em;color:var(--dim);
  display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.svcrow .num i{width:12px;height:12px;border-radius:50%;background:var(--c,#ccc);flex:0 0 auto}
.svcrow h3{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em}
.svcrow p{font-size:15.5px;color:var(--dim);margin-top:8px;max-width:min(100%,88%)}
.svcrow .go{font-size:26px;color:var(--ink);transition:transform .22s ease,color .2s}
.svcrow:hover .go{transform:translateX(8px);color:var(--cta)}
@media(max-width:760px){.svcrow .go{display:none}}

/* ── work grid (imagery keeps its cards) ── */
.workgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.wcard{position:relative;grid-column:span 6;border-radius:var(--r);overflow:hidden;
  background:#101016;min-height:440px;display:flex;align-items:flex-end;color:#fff}
.wcard.big{grid-column:span 12;min-height:520px}
@media(max-width:980px){.wcard,.wcard.big{grid-column:span 12;min-height:340px}}
.wcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wcard:hover img{transform:scale(1.05)}
.wcard::after{content:'';position:absolute;inset:0;
  background:linear-gradient(186deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.86) 94%)}
.wcard .wcap{position:relative;z-index:2;padding:clamp(20px,2.4vw,30px);width:100%;display:block}
.wcard .tag{margin-bottom:12px;display:inline-flex}
.wcard b{display:block;font-size:clamp(19px,1.9vw,26px);font-weight:800;letter-spacing:-.015em;line-height:1.18}
.wcard em{display:block;font-style:normal;font-size:14.5px;color:#C6C7D2;margin-top:8px}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:var(--rp);
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--c,#fff)}
.tag.on-light{background:#111118;color:#fff}

/* ── metrics: huge numerals, hairlines, no boxes ── */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
@media(max-width:860px){.bigstats{grid-template-columns:1fr}}
.bigstat{border-left:2px solid var(--c,var(--brand));padding-left:clamp(18px,2vw,28px)}
.bigstat b{display:block;font-size:clamp(52px,5.6vw,84px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.bigstat b em{font-style:normal;color:var(--c,var(--brand))}
.bigstat span{display:block;margin-top:12px;font-size:12.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#7C7D8C}
.bigstat p{margin-top:10px;font-size:15px;color:#A9AAB8}

/* ── logo wall: uniform chips normalise the mixed logo files (some ship
   transparent, some with white baked in). Marks show in their own brand colour;
   the chip is what unifies them, not a filter. ── */
.logowall{overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:6px 0}
.lt{display:flex;width:max-content;align-items:center;gap:18px;
  animation:mq 46s linear infinite;padding:12px 0}
.lt.rev{animation-direction:reverse;animation-duration:54s}
.lt .chip{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:212px;height:116px;padding:22px 26px;background:#fff;border-radius:16px;
  box-shadow:0 1px 0 rgba(17,17,24,.06),0 14px 34px rgba(17,17,24,.07);
  transition:transform .22s ease,box-shadow .25s ease}
.lt .chip:hover{transform:translateY(-4px) scale(1.03);
  box-shadow:0 22px 48px rgba(17,17,24,.14)}
.lt .chip img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:.92;transition:opacity .22s ease,transform .22s ease}
.lt .chip:hover img{opacity:1;transform:scale(1.04)}

/* ── insight rows ── */
.newslist{border-top:1px solid var(--line)}
.nrow{position:relative;display:grid;grid-template-columns:150px 1fr auto;
  gap:clamp(16px,3vw,44px);align-items:baseline;padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line)}
.nrow::before{content:'';position:absolute;inset:4px -20px;border-radius:14px;
  background:#fff;opacity:0;transform:scale(.985);
  box-shadow:0 16px 38px rgba(11,11,13,.08);
  transition:opacity .28s cubic-bezier(.2,.7,.2,1),transform .28s cubic-bezier(.2,.7,.2,1)}
.nrow:hover::before,.nrow:focus-visible::before{opacity:1;transform:scale(1)}
.nrow>*{position:relative;z-index:1}
.nrow>time,.nrow>span{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.nrow:hover>time,.nrow:hover>span{transform:translateX(6px)}
@media(max-width:760px){.nrow{grid-template-columns:1fr;row-gap:6px}
  .nrow:hover{padding-left:0}}
.nrow time{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.nrow b{font-size:clamp(17px,1.7vw,22px);font-weight:800;letter-spacing:-.015em;
  line-height:1.3;color:var(--ink)}
.nrow em{display:block;font-style:normal;font-size:14.5px;color:var(--dim);margin-top:6px;max-width:min(100%,92%)}
.nrow .go{font-size:22px;color:var(--ink);transition:transform .2s,color .2s}
.nrow:hover .go{transform:translateX(6px);color:var(--cta)}
@media(max-width:760px){.nrow .go{display:none}}

/* ── section head splits ── */
.sechead{max-width:min(100%,66.6%);margin-bottom:clamp(30px,4vw,52px)}
.sechead .lede{margin-top:16px}
.split{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,52px)}
.split .sechead{margin-bottom:0}

/* ── UNBOUND band ── */
.unbound{background:
    radial-gradient(58% 96% at 86% -12%,rgba(253,46,203,.34),transparent 62%),
    radial-gradient(52% 88% at -10% 112%,rgba(255,72,0,.28),transparent 62%),
    linear-gradient(168deg,#2E1D55 0%,#291A4C 50%,#241645 100%);
  color:#C9CAD8;overflow:hidden}
.unbound .ublg{height:24px;width:auto;margin-bottom:22px}
@media(max-width:740px){.unbound .ublg{height:18px}}
.unbound .in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){.unbound .in{grid-template-columns:1fr}}
.unbound h2{color:#fff}
.unbound .meta{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line-dark)}
.unbound .meta b{color:#fff;display:block;font-size:17px}
.unbound .meta span{font-size:13.5px;color:#8B8C9C}
.unbound .panel{border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}

/* ── FAQ ── */
.faq{max-width:none}   /* was 840px — its right edge disagreed with every
   full-width grid above it. Copy measure is held on the summary instead. */
.faq summary>span{display:block;max-width:min(100%,66.6%)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;
  cursor:pointer;list-style:none;padding:24px 0;font-weight:800;font-size:clamp(17px,1.6vw,20px);
  color:var(--ink);letter-spacing:-.01em;transition:color .2s}
.faq summary:hover{color:var(--cta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:26px;font-weight:400;color:var(--dim);
  transition:transform .2s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--cta)}
.faq details p{padding:0 48px 24px 0;color:var(--dim);max-width:min(100%,66.6%)}

/* ── lead gen ── */
.leadgen{background:var(--black);color:#B9BAC6;position:relative;overflow:hidden;
  padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px)}
.leadgen .wrap{position:relative;z-index:1}
.leadgen .disc{opacity:.16}
.leadwrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,80px);align-items:start}

@media(max-width:960px){.leadwrap{grid-template-columns:1fr}}
.leadgen h2{color:#fff}
.desks{margin-top:30px;border-top:1px solid var(--line-dark)}
.desk{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-bottom:1px solid var(--line-dark);font-size:15.5px}
.desk span{color:#7C7D8C}
.desk a{min-height:56px;display:inline-flex;align-items:center;font-weight:700;color:#fff}
.desk a:hover{color:var(--brand)}
.formcard{background:#fff;border-radius:var(--r-lg);padding:clamp(28px,3.2vw,44px);
  color:var(--body);box-shadow:0 40px 90px rgba(0,0,0,.4)}
.formcard h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;color:var(--ink)}
.formcard .sub{font-size:15px;color:var(--dim);margin-top:8px}
.f{margin-top:18px}
.f label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.f input,.f textarea{width:100%;padding:15px 16px;font-size:16px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  transition:border-color .15s}
.f textarea{min-height:96px;resize:vertical}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--blue)}
.f .err{display:none;font-size:13px;color:var(--cta);margin-top:6px;font-weight:600}
.f.bad input,.f.bad textarea{border-color:var(--cta)}
.f.bad .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.two{grid-template-columns:1fr}}
.segchips{display:flex;flex-wrap:wrap;gap:9px}
.segchips button{font-size:14px;font-weight:600;padding:10px 17px;min-height:44px;
  border-radius:var(--rp);cursor:pointer;background:#fff;border:1.5px solid var(--line);
  color:var(--ink);transition:.15s}
.segchips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:13.5px;color:var(--dim)}
.consent input{width:22px;height:22px;accent-color:var(--cta);flex:0 0 auto;margin-top:2px}
.send{display:flex;width:100%;margin-top:18px;justify-content:center}
.formnote{margin-top:12px;font-size:12.5px;color:var(--dim)}
.f-ok{padding:36px 8px;text-align:center}
.f-ok b{font-size:24px;color:var(--ink);display:block;letter-spacing:-.01em}
.f-ok p{margin-top:12px;color:var(--dim)}
.mcta{display:none}
@media(max-width:740px){
  .mcta{display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:90;
    justify-content:center;box-shadow:0 16px 42px rgba(0,0,0,.38)}
  body{padding-bottom:88px}
  footer.site{padding-bottom:100px}
}

/* ── interior page head ── */
.phead{padding:clamp(52px,6.4vw,92px) 0 clamp(30px,3.6vw,52px);
  border-bottom:1px solid var(--line)}
.phead .crumb{font-size:14px;color:var(--dim);margin-bottom:18px}
.crumb a{color:var(--dim);display:inline-block;padding:10px 2px;margin:-10px -2px}
.crumb a:hover{color:var(--cta)}
.phead .lede{margin-top:18px;max-width:min(100%,66.6%)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.filters a{font-size:14.5px;font-weight:700;border:1.5px solid var(--line);border-radius:var(--rp);
  padding:11px 20px;min-height:46px;display:inline-flex;align-items:center;gap:9px;transition:.15s;color:var(--ink)}
.filters a:hover{border-color:var(--cta);color:var(--cta)}
.filters a.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── services hub ── */
.hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.hubgrid{grid-template-columns:1fr}}
.hubcard{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;
  border-radius:var(--r);padding:clamp(26px,3vw,38px);overflow:hidden;
  transition:transform .2s ease,box-shadow .25s ease}
.hubcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--c,#ccc)}
.hubcard:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(11,11,13,.12)}
.hubcard img{height:44px;width:auto;align-self:flex-start}
.hubcard h2{font-size:clamp(22px,2.2vw,28px)}
.hubcard .blurb{font-size:15px;color:var(--dim)}
.hublist{list-style:none;display:grid;gap:8px;margin-top:6px}
.hublist li{font-size:15px;color:var(--body);padding-left:20px;position:relative}
.hublist li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--c,var(--brand))}
.hubcard .arrow-link{margin-top:auto}

/* ── capabilities ── */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
@media(max-width:820px){.caps{grid-template-columns:1fr}}
.cap{padding:clamp(26px,3vw,40px) clamp(0px,2vw,36px) clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--line)}
@media(min-width:821px){
  .cap:nth-child(odd){border-right:1px solid var(--line)}
  .cap:nth-child(even){padding-left:clamp(20px,2.6vw,36px)}
}
.capn{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;
  letter-spacing:.16em;color:var(--dim);margin-bottom:14px;font-variant-numeric:tabular-nums}
.capn::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--c,var(--brand))}
.cap h3{font-size:clamp(19px,1.9vw,24px)}
.cap p{font-size:15.5px;line-height:1.7;color:var(--dim);margin-top:10px}

/* ── case study ── */
.csgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.csgrid{grid-template-columns:1fr}}
.csb{background:#fff;border-radius:var(--r);padding:clamp(26px,3vw,38px)}
.csb.wide{grid-column:1/-1}
.csb h2{font-size:clamp(19px,2vw,24px);display:flex;align-items:center;gap:12px}
.csb h2 i{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.csb p{font-size:16px;line-height:1.75;color:var(--body);margin-top:14px}
.csb ul{list-style:none;margin-top:12px}
.csb li{font-size:15.5px;color:var(--body);padding:10px 0 10px 24px;position:relative;
  border-bottom:1px solid var(--line)}
.csb li:last-child{border-bottom:0}
.csb li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:8px;
  border-radius:50%;background:var(--brand)}
.vidwrap{margin-top:20px;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9}
.vidwrap iframe{width:100%;height:100%;border:0;display:block}

/* ── people ── */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dark)}
@media(max-width:860px){.values{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.values{grid-template-columns:1fr}}
.value{position:relative;padding:clamp(28px,3vw,44px) clamp(16px,2vw,28px) clamp(28px,3vw,44px) 0;
  border-bottom:1px solid var(--line-dark)}
.value .vnum{position:absolute;top:clamp(28px,3vw,44px);right:clamp(16px,2vw,28px);
  font-size:12.5px;font-weight:600;letter-spacing:.14em;color:#5F6070}
/* the letter is a sphere in the same material as the hero bubbles — radial body,
   specular, cast shadow on the ground beneath. Hover lifts the sphere off its
   shadow; reveal drops it in (one-shot, hooked on the .rv → .on transition). */
.vorb{position:relative;display:block;width:76px;height:96px;margin-bottom:14px}
.vorb i{position:absolute;top:0;left:0;width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;
  font-size:27px;color:var(--vink,#fff);
  background:radial-gradient(circle at 32% 26%,var(--hi),var(--mid) 45%,var(--lo) 80%);
  box-shadow:inset -8px -10px 22px rgba(0,0,0,.26),inset 8px 9px 20px rgba(255,255,255,.28);
  transition:transform .35s cubic-bezier(.3,.6,.3,1)}
.vorb i::before{content:'';position:absolute;left:20%;top:13%;width:27%;height:19%;
  border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
  filter:blur(1px)}
.vorb::after{content:'';position:absolute;left:12px;width:50px;height:11px;bottom:2px;
  border-radius:50%;background:radial-gradient(ellipse,var(--cast),transparent 72%);
  transition:transform .35s cubic-bezier(.3,.6,.3,1),opacity .35s}
.value:hover .vorb i{transform:translateY(-4px)}
.value:hover .vorb::after{transform:scale(.9);opacity:.75}
.js .value.rv.on .vorb i{animation:vDrop .5s cubic-bezier(.2,.7,.2,1) 1}
/* a settle, not a bounce — the squash/overshoot pass was the cartoon tell */
@keyframes vDrop{
  0%{transform:translateY(-12px);opacity:0}
  100%{transform:translateY(0);opacity:1}}
.vorb i{transform-origin:50% 100%}
.value b{display:block;font-size:19.5px;color:#fff;letter-spacing:-.01em}
.value p{font-size:15px;color:#A9AAB8;margin-top:6px}
@media(prefers-reduced-motion:reduce){.js .value.rv.on .vorb i{animation:none}}
.teamgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:1180px){.teamgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.teamgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.teamgrid{grid-template-columns:repeat(2,1fr)}}

/* ── people ──
   The headshots are 1080² cutouts sitting on AVC's own brand gradients. A circle
   crop sliced that gradient off mid-chest and left a different coloured wedge under
   every chin. Square tiles show the asset as it was made, so the gradient reads as
   the brand system it is. Text sits in a fixed block so names and roles hold their
   baselines across the row however the role wraps. */
.person{position:relative;display:flex;flex-direction:column;text-align:left;
  background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 rgba(17,17,24,.05),0 10px 26px -12px rgba(11,11,13,.18);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.person:hover{transform:translateY(-5px);
  box-shadow:0 1px 0 rgba(17,17,24,.06),0 26px 50px -16px rgba(11,11,13,.30)}
.person .ph{display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden;
  background:var(--tint)}
/* The headshots ship with a gradient baked behind the subject — a photographic
   accident, not a colour system, and it cannot be cleanly matted out here. The
   band is normalised to 16% of the tile, so the scrim is 19% and stays fully
   transparent until it reaches it: any taller and it fogs the subject's chest,
   which is what made the fade read as a wash rather than a background. */
.person .ph::before{content:'';position:absolute;left:0;right:0;bottom:0;height:19%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 34%,
    rgba(255,255,255,.72) 68%,
    rgba(255,255,255,.96) 100%);
  pointer-events:none;z-index:1}
.person .ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--c,var(--brand));z-index:2;opacity:.55;
  transform-origin:left;transition:opacity .28s ease,height .28s ease}
.person:hover .ph::after{opacity:1;height:6px}
.person .meta{display:flex;flex-direction:column;gap:3px;
  padding:14px clamp(12px,1.2vw,16px) 16px;min-height:84px}
.person b{font-size:15.5px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.person span{font-size:13px;line-height:1.4;color:var(--dim)}
.dark .person{background:#15151B}
.dark .person b{color:#fff}
.dark .person span{color:#A9AAB8}
@media(max-width:520px){.person .meta{min-height:78px;padding:12px 12px 14px}}

/* ── offices ── */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.offices{grid-template-columns:1fr}}
.office{border-radius:var(--r);overflow:hidden;background:#fff;
  transition:transform .2s,box-shadow .25s}
.office:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(11,11,13,.12)}
.office img{width:100%;aspect-ratio:16/10;object-fit:cover}
.office .ob{padding:20px 24px 26px}
.office h3{font-size:19px}
.office p{font-size:14.5px;color:var(--dim);margin-top:6px}
.dark .office{background:#141419}
.dark .office h3{color:#fff}
.dark .office p{color:#A9AAB8}

/* ── article ── */
.article{max-width:720px;margin:0 auto;padding:clamp(30px,4vw,56px) 0 clamp(56px,6vw,88px)}
.article h1{letter-spacing:-.03em}
.article .meta{font-size:14px;color:var(--dim);margin:16px 0 34px;display:flex;gap:14px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.prose{font-size:18px;line-height:1.85;color:var(--body);overflow-wrap:break-word}
.prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;min-width:120px}
.prose>*+*{margin-top:24px}
.prose h2{font-size:clamp(23px,2.5vw,30px);margin-top:46px;line-height:1.22}
.prose h3{font-size:clamp(19px,1.9vw,23px);margin-top:34px}
.prose a{color:var(--cta);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--r);margin:30px 0}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin-top:10px}
.prose blockquote{border-left:3px solid var(--brand);padding-left:24px;font-weight:600;color:var(--ink)}
.prose iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r)}
.prose em{font-style:italic}
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:46px}
.pager a,.pager span{min-width:48px;min-height:48px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:12px;border:1.5px solid var(--line);font-weight:700;color:var(--ink)}
.pager a:hover{border-color:var(--cta);color:var(--cta)}
.pager .cur{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── footer ── */
footer.site{background:var(--true-black);color:#A9AAB8;padding:clamp(56px,6vw,84px) 0 46px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:36px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fgrid .flogo{height:54px;width:auto;margin-bottom:18px}
.fgrid h3{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#6E6F7E;margin-bottom:16px}
.fgrid a,.fgrid p{font-size:15px;line-height:1.95;display:block;color:#C6C7D2}
.fgrid a{min-height:34px}
.fgrid a:hover{color:#fff}
.fgrid a.fmail{display:inline-block;padding:12px 2px;margin:-12px -2px}
.fsoc{display:flex;gap:10px;margin-top:18px}
.fsoc a{width:42px;height:42px;border-radius:50%;background:#17171E;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.fsoc a:hover{background:var(--cta)}
.fsoc svg{width:16px;height:16px;fill:currentColor}
.ack{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-dark);
  font-size:13.5px;line-height:1.75;color:#8B8C9C;max-width:92ch}
.ack b{color:#C6C7D2}
.legal{margin-top:16px;font-size:13.5px;color:#8B8C9C;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.legal a{display:inline-flex;align-items:center;min-height:40px;color:inherit}
.legal a:hover{color:#fff}

/* ── motion ── */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.js .rv.on{opacity:1;transform:none}
.js .rv.d1{transition-delay:.09s}.js .rv.d2{transition-delay:.18s}.js .rv.d3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .mtrack,.lt{flex-wrap:wrap;width:auto}
  .cine video{display:none}
  .cine img.fallback{display:block!important}
}

/* ══ 3D dimension ══
   Cards tilt toward the pointer (hover-capable devices only), decorative
   gradient discs drift at different depths on scroll, shadows are layered so
   surfaces read at distinct elevations. All of it is inert under
   prefers-reduced-motion and on touch. */
.tiltwrap{perspective:1100px}
[data-tilt]{transform-style:preserve-3d;will-change:transform;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
[data-tilt].tilting{transition:transform .06s linear,box-shadow .3s ease}
[data-tilt]>*{transform:translateZ(1px)}
.wcard[data-tilt]:hover{box-shadow:0 34px 80px rgba(0,0,0,.55)}
.hubcard[data-tilt]:hover,.office[data-tilt]:hover{box-shadow:0 34px 70px rgba(11,11,13,.16)}
.cine[data-tilt]{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.cine[data-tilt].tilting{transition:transform .08s linear}
/* ── bubbles ──
   Spheres, not flat circles: a offset radial for form, an inset dark rim for
   the terminator, an inset light bounce, a cast shadow for grounding, and a
   specular highlight. Outer span carries scroll parallax, inner runs the float,
   so the transforms never fight. */
.disc{position:absolute;border-radius:50%;pointer-events:none;z-index:0;will-change:transform}
.disc>i{position:relative;display:block;width:100%;height:100%;border-radius:50%;
  animation:float var(--dur,28s) ease-in-out infinite;animation-delay:var(--delay,0s);
  will-change:transform;
  background:radial-gradient(circle at 32% 26%,
    var(--hi) 0%, var(--mid) 42%, var(--lo) 78%, var(--lo) 100%);
  box-shadow:
    inset -10px -14px 30px rgba(0,0,0,.22),
    inset 10px 12px 26px rgba(255,255,255,.30),
    0 26px 44px -12px var(--cast);}
/* specular highlight */
.disc>i::before{content:'';position:absolute;left:20%;top:14%;width:26%;height:20%;
  border-radius:50%;background:radial-gradient(ellipse at 50% 50%,
    rgba(255,255,255,.85),rgba(255,255,255,0) 70%);filter:blur(1px)}
.disc>i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--grain);
  mix-blend-mode:overlay;opacity:.5}
/* Drift only. The scale swing is deliberately GONE: a sphere that grows and
   shrinks reads as bouncing toward the viewer, which is the single most toy-like
   thing decor can do. Travel cut from 36px to 11px so the discs settle rather
   than bob (James, 2026-08-25 maturity pass). */
@keyframes float{
  0%,100%{transform:translate3d(0,0,0)}
  30%{transform:translate3d(4px,-7px,0)}
  62%{transform:translate3d(-3px,4px,0)}
}
.disc>i.gold{--hi:#FFEBB4;--mid:#FCBC39;--lo:#D9930A;--cast:rgba(217,147,10,.42)}
.disc>i.blue{--hi:#B6DBFF;--mid:#2E8FE6;--lo:#0F5DA6;--cast:rgba(29,127,218,.42)}
.disc>i.coral{--hi:#FFC2B4;--mid:#FF5544;--lo:#C8341F;--cast:rgba(255,85,68,.42)}
.disc>i.green{--hi:#C4F0CE;--mid:#61CE70;--lo:#2C8A41;--cast:rgba(97,206,112,.40)}
.disc>i.red{--hi:#FFC0BC;--mid:#FF180C;--lo:#B01108;--cast:rgba(255,24,12,.38)}
.disc>i.orange{--hi:#FFD6B4;--mid:#FF7520;--lo:#C4530E;--cast:rgba(255,117,32,.40)}
.disc:nth-of-type(2)>i{--dur:34s;--delay:-4s}
.disc:nth-of-type(3)>i{--dur:41s;--delay:-9s}
.disc:nth-of-type(4)>i{--dur:31s;--delay:-2s}
.disc:nth-of-type(5)>i{--dur:46s;--delay:-13s}
.disc:nth-of-type(6)>i{--dur:38s;--delay:-6s}
.disc:nth-of-type(7)>i{--dur:43s;--delay:-16s}
.disc:nth-of-type(8)>i{--dur:33s;--delay:-11s}
.hero .wrap,.hero{position:relative}
.hero .wrap>*{position:relative;z-index:1}
.hero .disc{opacity:1}
.leadgen .disc{opacity:.42}
@media(max-width:740px){.hero .disc{opacity:.85}}
@media(prefers-reduced-motion:reduce){.disc{transform:none!important}.disc>i{animation:none}}

/* metric trio on light ground (/unbound/) — v2 editorial, no boxes */
.mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)}
@media(max-width:820px){.mrow{grid-template-columns:1fr}}
.metric{border-left:2px solid var(--brand);padding-left:clamp(16px,1.8vw,24px)}
.mrow .metric:nth-child(2){border-color:#FD2ECB}
.mrow .metric:nth-child(3){border-color:#FF4800}
.metric b{display:block;font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.metric span{display:block;margin-top:8px;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.metric p{margin-top:10px;font-size:15px;color:var(--dim);max-width:34ch}

/* clients block: the wall breaks out of .wrap, so its rhythm is set here rather
   than by inline overrides — heading, wall and the next section all breathe. */
.clients .sechead{margin-bottom:clamp(30px,3.6vw,48px)}
.clients .logowall+*{margin-top:clamp(30px,3.6vw,48px)}
.clients{padding-bottom:clamp(72px,9vw,130px)}
.lt+.lt{margin-top:18px}

/* Two named vertical modifiers replace the ad-hoc inline paddings that had
   produced eight different section rhythms across the site. */
.pad.t-none{padding-top:0}
.pad.t-tight{padding-top:clamp(18px,2.2vw,34px)}

/* ── ground alternation ──
   Three grounds, not two: paper, tint and black. The KPI ribbon is a band in
   its own right rather than a box nested in a padded light section. */
.tint{background:var(--tint)}
.pad.b-none{padding-bottom:0}
.kpiband{padding:clamp(56px,6vw,88px) 0}
.kpiband+.unbound{border-top:1px solid rgba(255,255,255,.16)}

/* CTA idle animation retired 2026-08-25 — flat buttons carry no idle motion. */

/* what happens next — the conversion argument beside the form */
.nextsteps{list-style:none;counter-reset:ns;margin-top:30px;border-top:1px solid var(--line-dark)}
.nextsteps li{counter-increment:ns;display:grid;grid-template-columns:44px 1fr;
  gap:6px 18px;padding:18px 0;border-bottom:1px solid var(--line-dark);align-items:start}
.nextsteps li::before{content:counter(ns,decimal-leading-zero);grid-row:span 2;
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;font-size:13px;font-weight:800;color:#fff;
  background:var(--cta);margin-top:2px}
.nextsteps li:nth-child(2)::before{background:var(--blue)}
.nextsteps li:nth-child(3)::before{background:var(--gold);color:#000}
.nextsteps b{font-size:16.5px;color:#fff;letter-spacing:-.01em}
.nextsteps span{grid-column:2;font-size:14.5px;line-height:1.6;color:#A9AAB8}

/* ── language preference picker ── */
.langwrap{position:relative;margin-left:6px}
.langbtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 13px;
  border-radius:var(--rp);border:1.5px solid var(--line);background:#fff;cursor:pointer;
  font-weight:700;font-size:14px;color:var(--ink);transition:border-color .15s,color .15s}
.langbtn:hover{border-color:var(--cta);color:var(--cta)}
.langbtn svg{width:17px;height:17px;fill:currentColor}
.langmenu{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px rgba(11,11,13,.18);
  padding:14px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s ease;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;z-index:120}
.langwrap.open .langmenu{opacity:1;visibility:visible;transform:none}
.langhead,.langnote{grid-column:1/-1;margin:0 0 6px;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.langnote{margin:10px 0 0;font-weight:500;letter-spacing:0;text-transform:none;
  font-size:12.5px;line-height:1.5;color:var(--dim)}
.langmenu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 11px;min-height:48px;border:0;background:none;border-radius:10px;cursor:pointer;
  text-align:left;font:inherit}
.langmenu button:hover{background:var(--tint)}
.langmenu button[aria-selected="true"]{background:var(--ink)}
.langmenu button[aria-selected="true"] .ln,
.langmenu button[aria-selected="true"] .lg{color:#fff}
.langmenu .ln{font-size:14.5px;font-weight:700;color:var(--ink)}
.langmenu .lg{font-size:12.5px;color:var(--dim)}
@media(max-width:1080px){
  .langwrap{margin-left:auto;margin-right:8px}
  .langmenu{right:0;width:min(92vw,340px)}
}
@media(max-width:420px){.langbtn .lcode{display:none}.langbtn{padding:9px 11px}}

/* ── CTA responsiveness ── */
.navcta,.btn.p,.mcta{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* the sticky mobile CTA sits above the fold-out nav and honours the safe area */
.mcta{padding-bottom:calc(15px + env(safe-area-inset-bottom,0px));
  min-height:56px;font-size:16.5px}
@media(max-width:740px){
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .navcta{display:none}
}
/* keep the header CTA visible on tablets rather than dropping it with the nav */
@media(min-width:741px) and (max-width:1080px){
  .bar>.navcta{display:inline-flex;margin-left:8px;padding:12px 20px;font-size:14.5px}
  .langwrap{margin-left:auto}
}

/* ══ zone boundaries ══
   Every page closes lead-gen (#0B0B0D) straight into the footer (#000). The two
   merge into one dark mass, so the footer declares its own edge: a hairline in
   the brand dots plus a real tonal step. Same rule wherever two dark zones meet. */
footer.site{position:relative;border-top:1px solid rgba(255,255,255,.10)}
footer.site::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--red) 0%,var(--gold) 34%,var(--blue) 67%,var(--green) 100%);
  opacity:.55}
.leadgen+footer.site{padding-top:clamp(64px,7vw,92px)}
/* a dark section meeting another dark section gets the same explicit seam */
.dark+.dark,.dark+.leadgen,.leadgen+.dark,.kpiband+.unbound{
  border-top:1px solid rgba(255,255,255,.14)}

/* office cards link out to Maps, so they carry a visible affordance rather than
   relying on the cursor alone */
a.office{display:block;text-decoration:none;color:inherit}
a.office .ob{display:block}
.office .dir{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:14px;font-weight:700;color:var(--cta);letter-spacing:0}
.office .dir::before{content:'';width:13px;height:13px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/></svg>") center/contain no-repeat}
.office .dir::after{content:'→';transition:transform .2s ease}
.office:hover .dir::after{transform:translateX(4px)}
.dark .office .dir{color:var(--brand)}

/* form error states — a failed submit must be visible, never silent */
.consent.bad{color:var(--cta)}
.consent.bad input{outline:2px solid var(--cta);outline-offset:2px}
.formnote.bad-note{color:var(--cta);font-weight:600}
.formnote.bad-note a{color:var(--cta);text-decoration:underline}
.send[disabled]{opacity:.72;cursor:progress}

/* event registration — HubSpot's own embed lives here, so it inherits our field
   styling where HubSpot allows and degrades to a readable card when unset */
.hsfallback{padding:26px;border:1px dashed var(--line);border-radius:14px;background:var(--tint)}
.hsfallback b{display:block;font-size:18px;color:var(--ink)}
.hsfallback p{margin-top:8px;color:var(--dim);font-size:15px}
.hs-form-frame{min-height:120px}
.formcard .hs-form-frame input[type=text],.formcard .hs-form-frame input[type=email],
.formcard .hs-form-frame select,.formcard .hs-form-frame textarea{
  width:100%;padding:15px 16px;font-size:16px;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);margin-top:6px}
.formcard .hs-form-frame label{font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.formcard .hs-form-frame input[type=submit]{background:var(--cta);color:#fff;border:0;
  border-radius:999px;padding:15px 32px;font-weight:700;cursor:pointer;min-height:54px}
.desk b{font-weight:700;color:#fff}
.tint .desk b{color:var(--ink)}

/* full-bleed team group shot (/people/) — the headshot grid encodes discipline by
   colour, one person per tile, so a group photo cannot join it; it runs as a band
   above. Height is capped in vh so a wide original never eats the whole screen. */
.teamband{position:relative;line-height:0;background:var(--black)}
.teamband img{width:100%;height:clamp(300px,52vh,620px);object-fit:cover;display:block}
.teamband-cap{position:absolute;left:0;right:0;bottom:0;line-height:1.7;
  padding:clamp(20px,3vw,34px) 0;
  background:linear-gradient(to top,rgba(11,11,13,.82),rgba(11,11,13,0))}
.teamband-cap .overline{color:#EDEDF2;margin:0}
@media(max-width:740px){.teamband img{height:clamp(240px,42vh,360px)}}

/* ══ service hero art ══
   Each service page hero carries an animated mechanism in that discipline's
   colour, built from the circle system (build/svcart.py). Layout: text 7 / art 5
   on desktop, art below at 860px. The STATIC frame of every mechanism is
   complete — reduced-motion simply freezes a finished picture. */
.phead .pgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.phead.has-art .lede{max-width:none}
.part{min-width:0}
.part .svcart{width:100%;height:auto;display:block}
@media(max-width:860px){
  .phead .pgrid{grid-template-columns:1fr;gap:8px}
  .part{max-width:430px;margin-top:14px}}
/* gentle float for principal spheres — same register as the hero bubbles */
.sa-float{transform-box:fill-box;transform-origin:center;
  animation:saFloat 9s ease-in-out infinite}
@keyframes saFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* satellites on their orbit rings */
.sa-orbit{animation:saOrbit 14s linear infinite}
.sa-orbit.sa-rev{animation-direction:reverse}
@keyframes saOrbit{to{transform:rotate(360deg)}}
/* expanding pressure ring (creative spark, PR announcement) */
.sa-pulse{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:saPulse 4.2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes saPulse{0%{transform:scale(.72);opacity:.75}55%{opacity:0}100%{transform:scale(1.65);opacity:0}}
/* experiential ripples — three rings on a shared cycle */
.sa-rip{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:saRip 4.8s linear infinite}
@keyframes saRip{0%{transform:scale(.3);opacity:.65}70%{opacity:0}100%{transform:scale(1.15);opacity:0}}
/* neutral dots that catch the discipline colour as the wave reaches them */
.sa-lit{animation:saLit 4.8s ease-in-out infinite}
@keyframes saLit{0%,55%,100%{fill:#D8D8D2}12%,32%{fill:var(--lit)}}
/* insight: the trend line redraws; base geometry is the FULL line */
.sa-draw{animation:saDraw 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes saDraw{0%{stroke-dashoffset:470}42%,100%{stroke-dashoffset:0}}
.sa-pop{transform-box:fill-box;transform-origin:center;
  animation:saPop 7s cubic-bezier(.3,.6,.3,1) infinite}
@keyframes saPop{0%{transform:scale(0)}6%{transform:scale(0)}11%{transform:scale(1.25)}
  15%,100%{transform:scale(1)}}
/* insight lens sweeps the field */
.sa-lens{animation:saLens 9s ease-in-out infinite}
@keyframes saLens{0%,100%{transform:translateX(-96px) translateY(28px)}
  50%{transform:translateX(120px) translateY(-38px)}}
/* media: broadcast arcs fire outward in sequence */
.sa-beam{opacity:.16;animation:saBeam 3.4s ease-out infinite}
@keyframes saBeam{0%,60%,100%{opacity:.16}12%{opacity:.95}30%{opacity:.3}}
/* PR: the coloured wire re-runs along the resting hairline; base = fully lit */
.sa-wire{animation:saWire 5.4s ease-in-out infinite}
@keyframes saWire{0%{stroke-dashoffset:var(--wlen,300)}
  30%,78%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}}
/* chinese marketing: the brush circle redraws itself; base = finished enso */
.sa-enso{animation:saEnso 8s cubic-bezier(.55,.06,.25,1) infinite}
@keyframes saEnso{0%{stroke-dashoffset:660}38%,88%{stroke-dashoffset:0}
  94%{opacity:1}97%{opacity:0}98%{stroke-dashoffset:660;opacity:0}100%{stroke-dashoffset:660;opacity:1}}
@media(prefers-reduced-motion:reduce){
  .svcart *{animation:none!important}}

/* ══ the greeting register ══
   Sixteen greetings above the footer on every page — the multicultural claim
   made visible in the type itself. Stationary by design: the ticker treatment
   is reserved for the client wall. One greeting at a time takes its palette
   colour (1.2s each, 19.2s full round); the coloured dots stay lit always, so
   the resting state is complete — reduced-motion simply holds it. */
.hellowrap{border-bottom:1px solid var(--line-dark)}
.hellorow{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline;
  padding:clamp(26px,3vw,40px) 0}
/* .grt, NOT .hl — the hero h1 highlight already owns .hl, and an unscoped .hl
   here crushed "Boldly Inclusive" to 15.5px inline-flex (caught 08-25). Class
   names on sitewide components must be grepped against the whole sheet first. */
.grt{display:inline-flex;align-items:baseline;gap:9px;font-size:15.5px;font-weight:600;
  color:#6E6F7E;white-space:nowrap;animation:grtGlow 38.4s linear infinite}
.grt i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;transform:translateY(-2px)}
@keyframes grtGlow{0%,4.6%{color:#fff}6.2%,100%{color:#6E6F7E}}
@media(max-width:640px){.hellorow{gap:10px 22px}.grt{font-size:14.5px}}
@media(prefers-reduced-motion:reduce){.grt{animation:none}}

/* ── phone measure release ──
   The 66.6% (8-of-12) measure caps on .lede/.sechead are desktop typography
   controls; at phone widths they wrap copy at ~half the screen. This block
   must stay LAST in the file: the base rules share its specificity, so source
   order is the only thing making the release win. */
@media(max-width:640px){
  .lede,.hero .lede,.phead .lede,.sechead{max-width:none}}