/* ==========================================================
   STRATEGY LAYOUTS (NOIZE shell style). The extension spans columns 3 to 10.
   Every layout: the headline and an intro at y 170, the content from the 290 row, down to
   the bottom margin (786). Type from the scale; hairlines, never boxes; one ink moment.
   ========================================================== */
.sg-head{ position:absolute; top:170px; left:0; width:100%; display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:0 56px; align-items:start; }
.sg-h{ margin:0; font:var(--t-headline); letter-spacing:var(--ls-headline); text-wrap:balance; }
.sg-intro{ margin:0; padding-top:6px; font:var(--t-lead); color:var(--mid); text-wrap:pretty; }
.sg-k{ display:block; font:var(--t-small-medium); color:var(--quiet); }

/* ---------- numbers ---------- */
.nums{ position:absolute; top:300px; left:0; width:100%; display:grid; grid-template-columns:repeat(4, 1fr); gap:0 28px; }
.nums li{ display:flex; flex-direction:column; gap:10px; }
.x-full .num-n{ font:600 56px/1 var(--shell); letter-spacing:-.045em; font-feature-settings:"tnum"; }
.num-bar{ display:block; height:4px; border-radius:2px; background:var(--grey-line); position:relative; overflow:hidden; }
.num-bar::after{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 100%); background:var(--ink); border-radius:2px; }
.num-bar--none{ background:var(--grey-line); }   /* a stat without a proportion sits on a plain rule */
.num-bar--none::after{ display:none; }
.x-full .num-s{ font:400 11px/1.3 var(--shell); color:var(--quiet); }
.sg-band{ position:absolute; top:520px; left:0; width:100%; display:grid; grid-template-columns:150px 1fr; gap:0 28px; padding-top:var(--s-2); border-top:1px solid var(--hairline); }
.sg-band ol{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 28px; }

/* ---------- quotes ---------- */
.qf{ position:absolute; top:290px; left:0; width:100%; display:flex; align-items:center; gap:6px; }
.qf button{ height:30px; padding:0 14px; border-radius:999px; background:var(--fill); font:var(--t-control); color:var(--mid); transition:background-color .25s var(--ease), color .25s; }
.qf button:hover{ background:var(--fill-2); }
.qf button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.qf-meta{ margin-left:auto; font:var(--t-small); color:var(--quiet); }
.qg{ position:absolute; top:350px; left:0; width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 32px; }
.q{ margin:0; padding-top:var(--s-2); border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:12px; transition:opacity .35s var(--ease); }
.q.is-dim{ opacity:.14; }
.q blockquote{ margin:0; font:500 17px/1.45 var(--shell); letter-spacing:-.01em; text-wrap:pretty; }
.q figcaption{ display:flex; justify-content:space-between; gap:12px; font:var(--t-small); color:var(--quiet); }
.q-t{ color:var(--mid); }

/* ---------- audiences ----------
   Each card: its share as a figure, the name, who they are, need, give, their words. The cards
   share rows (subgrid), so every line sits on one baseline across the three. */
.aud{ position:absolute; top:290px; left:0; width:100%; display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(6, auto); gap:0 28px; }
.aud.has-ph{ grid-template-rows:repeat(7, auto); }
.aud > li{ display:grid; grid-template-rows:subgrid; grid-row:span 6; min-width:0; border-top:1px solid var(--ink); padding-top:var(--s-2); }
.aud.has-ph > li{ grid-row:span 7; border-top:0; padding-top:0; }
.aud-ph{ position:relative; height:140px; border-radius:12px; overflow:clip; margin-bottom:var(--s-2); }
.aud-ph .ph{ position:absolute; inset:0; }
.aud-ph .ph-label{ left:auto; right:8px; bottom:auto; top:8px; font-size:10px; }
.x-full .aud-fig{ margin:0 0 var(--s-2); display:flex; align-items:baseline; gap:10px; }
.x-full .aud-fig .num-n{ font:600 48px/1 var(--shell); letter-spacing:-.045em; font-feature-settings:"tnum"; }
.x-full .aud-fig span:last-child{ font:var(--t-small); color:var(--mid); }
.x-full .aud-top h3{ margin:0 0 6px; }
.x-full .aud-who{ margin:0 0 var(--s-2); }
.aud dl{ margin:0; display:contents; }
.aud dl div{ display:grid; grid-template-columns:72px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--grey-line); }
.aud dt{ font:var(--t-small-medium); color:var(--quiet); }
.aud dd{ margin:0; font:var(--t-small); color:var(--ink); }
.x-full .aud-q{ margin:0; padding-top:12px; border-top:1px solid var(--grey-line); font:var(--t-small); color:var(--ink); }

/* ---------- journey map ---------- */
.jm{ position:absolute; top:290px; left:0; width:100%; }
.jr{ display:grid; grid-template-columns:110px repeat(var(--n), minmax(0, 1fr)); border-top:1px solid var(--hairline); }
.jr > *{ padding:12px 20px 12px 0; margin:0; }
.jr-l{ font:var(--t-small-medium); color:var(--quiet); }
.jr p{ font:var(--t-small); color:var(--mid); text-wrap:pretty; }
.jr-stages{ border-top:1px solid var(--ink); }
.x-full .jr-stages h4{ margin:0; }
.jr-feel{ position:relative; height:92px; }
.jr-feel svg{ padding:0 !important; position:absolute; left:110px; right:0; top:0; bottom:0; width:calc(100% - 110px); height:100%; overflow:visible; }
.jf-mid{ stroke:var(--grey-line); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.jf-line{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.jf-dot{ position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--ink); padding:0; }
.jf-dot.is-low{ background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--ink); z-index:1; }   /* above the line, so a ring reads as a ring */
.jr:last-child p{ color:var(--ink); font:var(--t-small-strong); }

/* ---------- positioning map ---------- */
.map-copy{ position:absolute; top:170px; left:0; width:40%; display:flex; flex-direction:column; gap:var(--s-3); }
.map-h{ margin:0; font:var(--t-headline); letter-spacing:var(--ls-headline); text-wrap:balance; }
.map-p{ margin:0; font:var(--t-lead); color:var(--mid); text-wrap:pretty; }
.map-legend{ margin-top:var(--s-1) !important; }
.map-legend li{ display:grid; grid-template-columns:130px 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--grey-line); transition:opacity .25s; cursor:default; }
.map-legend b{ font:var(--t-small-strong); }
.map-legend span{ font:var(--t-small); color:var(--mid); }
.map-legend li.is-us b{ color:var(--ink); }
.map-copy:has(.is-lit) .map-legend li:not(.is-lit){ opacity:.35; }
.map-plot{ position:absolute; top:150px; right:0; width:50%; height:560px; margin:0; }
.map-x, .map-y{ position:absolute; background:var(--hairline); }
.map-x{ left:0; right:0; top:50%; height:1px; } .map-y{ top:0; bottom:0; left:50%; width:1px; }
.map-ax{ position:absolute; font:var(--t-small-medium); color:var(--quiet); }
.map-l{ left:0; top:calc(50% + 8px); } .map-r{ right:0; top:calc(50% + 8px); }
.map-t{ left:calc(50% + 10px); top:0; } .map-b{ left:calc(50% + 10px); bottom:0; }
.map-pt{ position:absolute; display:flex; align-items:center; gap:8px; transform:translate(-5px, -50%); font:var(--t-small); color:var(--mid); white-space:nowrap; transition:color .25s; }
.map-pt i{ width:10px; height:10px; border-radius:50%; background:var(--hairline); flex:none; transition:transform .25s var(--ease), background-color .25s; }
.map-pt.is-flip{ flex-direction:row-reverse; transform:translate(calc(-100% + 5px), -50%); }
.map-pt.is-us{ font:var(--t-small-strong); color:var(--ink); }
.map-pt.is-us i{ width:14px; height:14px; background:var(--ink); box-shadow:0 0 0 6px color-mix(in srgb, var(--ink) 10%, transparent); }
.map-pt.is-us.is-flip{ transform:translate(calc(-100% + 7px), -50%); }
.map-pt.is-lit{ color:var(--ink); } .map-pt.is-lit i{ transform:scale(1.4); background:var(--ink); }

/* ---------- competitor matrix ---------- */
.cmp{ position:absolute; top:300px; left:0; width:100%; display:flex; flex-direction:column; gap:var(--s-3); }
.cmp-t{ width:calc(100% + 28px); margin-left:-14px; border-collapse:collapse; }   /* the ink row reaches out; all rows share one text edge */
.cmp-t th:first-child, .cmp-t td:first-child{ padding-left:14px !important; }
.cmp-t th:last-child, .cmp-t td:last-child{ padding-right:14px; }
.cmp-t th, .cmp-t td{ padding:14px 12px 14px 0; border-top:1px solid var(--hairline); text-align:center; font:var(--t-small); color:var(--mid); }
.cmp-t thead th{ border-top:0; padding-top:0; font:var(--t-small-medium); color:var(--quiet); vertical-align:bottom; }
.cmp-t tbody th{ text-align:left; width:24%; font:var(--t-small-strong); color:var(--ink); }
.hb{ display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; box-shadow:inset 0 0 0 1.5px var(--ink); }
.hb--full{ background:var(--ink); }
.hb--half{ background:linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.hb--none{ box-shadow:inset 0 0 0 1.5px var(--hairline); }
/* rules sit on the text column (inset 14px at each end); only the ink row reaches out */
.cmp-t tbody > tr > *{ border-top:0 !important; background:linear-gradient(var(--hairline), var(--hairline)) 0 0 / 100% 1px no-repeat; }
.cmp-t tbody > tr > :first-child{ background-position:14px 0; background-size:calc(100% - 14px) 1px; }
.cmp-t tbody > tr > :last-child{ background-size:calc(100% - 14px) 1px; }
/* the highlighted row is one rounded ink bar: no rule of its own, none from the next row under its
   corners, and the seam cover stops before the rounded end */
.cmp-t tr.is-us > *{ background:var(--ink); color:var(--paper); border-top-color:transparent; box-shadow:1px 0 0 var(--ink); }
.cmp-t tr.is-us > :last-child{ box-shadow:none; }
.cmp-t tr.is-us + tr > *{ border-top-color:transparent; }
.cmp-t tr.is-us > :first-child{ border-radius:10px 0 0 10px; }
.cmp-t tr.is-us > :last-child{ border-radius:0 10px 10px 0; }
.cmp-t tr.is-us .hb{ box-shadow:inset 0 0 0 1.5px var(--paper); }
.cmp-t tr.is-us .hb--full{ background:var(--paper); }
.cmp-t tr.is-us .hb--half{ background:linear-gradient(90deg, var(--paper) 50%, transparent 50%); }
.cmp-key{ margin:0; display:flex; align-items:center; gap:24px; font:var(--t-small); color:var(--mid); }
.cmp-key > span{ display:inline-flex; align-items:center; gap:8px; }
.cmp-note{ margin-left:auto; color:var(--quiet); }

/* ---------- from / to ---------- */
.ft{ position:absolute; top:300px; left:0; width:100%; }
.ft li{ display:grid; grid-template-columns:1fr 40px 1fr 1.25fr; gap:0 20px; align-items:baseline; padding:15px 0; border-top:1px solid var(--hairline); }
.ft li.ft-head{ border-top:0; padding-top:0; font:var(--t-small-medium); color:var(--quiet); }
.ft-from{ font:var(--t-lead); color:var(--quiet); }
.ft-to{ font:var(--t-lead-strong); color:var(--ink); }
.ft-how{ font:var(--t-small); color:var(--mid); }
.ft i{ font-style:normal; color:var(--quiet); }

/* ---------- brand platform ---------- */
.plat{ position:absolute; top:290px; left:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
.plat > div{ border-top:1px solid var(--ink); padding-top:var(--s-2); display:flex; flex-direction:column; gap:var(--s-1); }
.plat-purpose{ margin:0; font:var(--t-title); font-size:26px; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.plat-mission{ margin:0; font:var(--t-lead); color:var(--mid); text-wrap:pretty; }
.plat-values{ position:absolute; top:430px; left:0; width:100%; display:grid; grid-template-columns:repeat(4, 1fr); gap:0 28px; }
.plat-values li{ border-top:1px solid var(--hairline); padding-top:var(--s-2); }
.plat-pers{ position:absolute; top:600px; left:0; width:100%; display:grid; grid-template-columns:150px 1fr; gap:0 28px; padding-top:var(--s-2); border-top:1px solid var(--hairline); }
.plat-pers ol{ display:grid; grid-template-columns:1fr 1fr; gap:18px 56px; }
.plat-pers li{ display:grid; grid-template-columns:96px 1fr 96px; gap:14px; align-items:center; font:var(--t-small); color:var(--mid); }
.plat-pers li > span:first-child{ text-align:right; }
.plat-pers i{ position:relative; height:1px; background:var(--hairline); }
.plat-pers i::after{ content:""; position:absolute; top:-5px; left:calc(var(--v) * 100%); width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:var(--ink); }

/* ---------- messaging house ---------- */
.mh{ position:absolute; top:290px; left:0; width:100%; display:flex; flex-direction:column; gap:20px; }
.mh-roof{ margin:0; padding:22px 28px; border-radius:14px; background:var(--ink); color:var(--paper); font:var(--t-title); font-size:26px; letter-spacing:-.02em; text-align:center; }
.mh-pillars{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 28px; }
.mh-pillars > li{ border-top:1px solid var(--ink); padding-top:var(--s-2); display:flex; flex-direction:column; gap:8px; }
.x-full .mh-pillars h4{ margin:0; font:var(--t-small-medium); color:var(--quiet); }
.x-full .mh-msg{ font:var(--t-lead-strong); color:var(--ink); text-wrap:balance; }
.mh-pillars ul{ margin-top:6px; }
.mh-pillars ul li{ padding:8px 0 8px 16px; border-top:1px solid var(--grey-line); font:var(--t-small); color:var(--mid); position:relative; }
.mh-pillars ul li::before{ content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--ink); }
.mh-base{ margin:0; padding-top:var(--s-2); border-top:1px solid var(--hairline); display:grid; grid-template-columns:150px 1fr; gap:28px; font:var(--t-small); color:var(--ink); }

/* ---------- roadmap ---------- */
.road{ position:absolute; top:360px; left:0; width:100%; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0 28px; border-top:1px solid var(--ink); }
.road > li{ position:relative; padding-top:var(--s-3); display:flex; flex-direction:column; gap:var(--s-1); }
.road > li::before{ content:""; position:absolute; left:0; top:-6px; width:11px; height:11px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--ink); z-index:1; }   /* above the line, so a ring reads as a ring */
.road > li.is-now::before{ background:var(--ink); }
.x-full .road-when{ position:absolute; top:-34px; left:0; font:var(--t-small-medium); color:var(--quiet); }
.road-d{ margin-top:var(--s-1) !important; }
.road-d li{ padding:7px 0; border-top:1px solid var(--grey-line); font:var(--t-small); color:var(--ink); }

/* ---------- hero statistic ---------- */
.x-full .hs-n{ position:absolute; top:120px; left:-12px; margin:0; font:600 min(260px, calc((var(--W) - 344px) / var(--hs-em, 1)))/.9 var(--shell); letter-spacing:-.065em; font-feature-settings:"tnum"; white-space:nowrap; }
.hs-copy{ position:absolute; top:420px; left:0; width:100%; display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:0 56px; padding-top:var(--s-2); border-top:1px solid var(--ink); }
.hs-h{ margin:0; font:var(--t-headline); letter-spacing:var(--ls-headline); text-wrap:balance; }
.hs-p{ margin:0; padding-top:6px; font:var(--t-lead); color:var(--mid); text-wrap:pretty; }
.hs-s{ position:absolute; top:700px; left:0; margin:0; font:var(--t-small); color:var(--quiet); }

/* ==========================================================
   CHOREOGRAPHY (see src/shell/choreo.js): the page builds in reading order.
   `translate` and `scale` (not transform) so each piece keeps its own positioning.
   ========================================================== */
.x-enter [style*="--i"]{ animation:x-rise .8s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay:calc(var(--i) * 45ms + 250ms); }
@keyframes x-rise{ from{ opacity:0; translate:0 14px; } }
@keyframes x-grow{ from{ transform:scaleX(0); } }
@keyframes x-pop{ from{ opacity:0; scale:.3; } }
/* bars grow from the left once their stat has arrived */
.num-bar::after{ transform-origin:0 50%; }
.x-enter .num-bar::after{ animation:x-grow 1.1s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay:calc(var(--i) * 45ms + 450ms); }
/* the journey's feeling line draws itself, then each dot lands on it */
/* a wipe, not a dash: the line keeps a constant width (non-scaling stroke), which dash drawing can't follow */
@keyframes x-wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.x-enter .jr-feel svg{ animation:x-wipe 1.6s cubic-bezier(.45, 0, .2, 1) both; animation-delay:.8s; }
.x-enter .jf-dot{ animation:x-pop .45s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay:calc(.9s + var(--d) * .3s); }
/* the roadmap's line runs out to each milestone */
.road{ border-top:0 !important; }
.road::after{ content:""; position:absolute; left:0; right:0; top:-.5px; height:1px; background:var(--ink); transform-origin:0 50%; z-index:0; }
.x-enter .road::after{ animation:x-grow 1.6s cubic-bezier(.45, 0, .2, 1) both; animation-delay:.35s; }
.x-enter .road > li::before{ animation:x-pop .4s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay:calc(.4s + var(--i) * .28s); }
/* comparison marks fill in row by row; personality dots slide from the middle */
.x-enter .hb{ animation:x-pop .35s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay:calc(var(--i) * 45ms + 450ms); }
@keyframes x-slide{ from{ left:50%; opacity:0; } }
.x-enter .plat-pers i::after{ animation:x-slide 1s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay:calc(var(--i) * 45ms + 500ms); }
@media (prefers-reduced-motion: reduce){ .x-enter *, .x-enter *::before, .x-enter *::after{ animation:none !important; } }

/* builds (presenter): held points wait, then rise in when → reveals them */
.x-full .is-held{ opacity:0; translate:0 14px; }
.x-full :is(li, figure, tr, .jr, .plat > div, .sg-band, .hs-copy, .plat-pers, .cmp-key, .map-pt){ transition:opacity .6s cubic-bezier(0.23, 1, 0.32, 1), translate .8s cubic-bezier(0.23, 1, 0.32, 1), color .25s; }

/* ---------- the identity's dark act: where we started, the company, before and after ----------
   These pages run black into the reveal, so the new mark lands in the dark. The NOIZE ladder
   inverts on them (white ink, quiet greys, faint hairlines). */
.rail[data-layout="before"], .rail[data-layout="company"], .rail[data-layout="beforeafter"]{ background:#0a0a0a; color:#fff;
  --ink:#fff; --mid:rgba(255,255,255,.66); --quiet:rgba(255,255,255,.42); --hairline:rgba(255,255,255,.14); --grey-line:rgba(255,255,255,.14); }
:is(.rail[data-layout="before"], .rail[data-layout="company"], .rail[data-layout="beforeafter"]) .spine .wordmark{ color:#fff; }
:is(.rail[data-layout="before"], .rail[data-layout="company"], .rail[data-layout="beforeafter"]) .sub{ color:rgba(255,255,255,.55); }
:is(.rail[data-layout="before"], .rail[data-layout="company"], .rail[data-layout="beforeafter"]) :is(.circle, .nav .track){ background:rgba(255,255,255,.14); color:#fff; }
:is(.rail[data-layout="before"], .rail[data-layout="company"], .rail[data-layout="beforeafter"]) .track button:hover:not([disabled]){ background:rgba(255,255,255,.22); box-shadow:none; }

/* ---------- before: the old logo, large and marked up, and the ten things to fix ----------
   The logo floats on the black; the problems that live in the artwork are marked on it in the
   client's accent. Points sit five to a row below, numbered big. */
.bf-h{ position:absolute; top:170px; left:0; width:100%; }
.bf-stage{ position:absolute; top:262px; left:0; width:100%; height:var(--bf-h); --bf-h:clamp(200px, calc(var(--W, 1456px) * .19), 236px); border-radius:14px; background:#141414; display:grid; place-items:center; }
.bf-logo{ position:relative; width:min(50%, 500px); aspect-ratio:500 / 128; }
.bf-logo img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* annotations, drawn like dimension lines: a thin white rule with end ticks, clear of the artwork,
   and the point's number and words beside it. White, so it never fights the logo's own colours. */
.bf-m{ position:absolute; height:8px; --c:rgba(255,255,255,.78); pointer-events:none;
  transition:opacity .5s cubic-bezier(0.32, 0.72, 0, 1), translate .6s cubic-bezier(0.32, 0.72, 0, 1); }
.bf-m--over{ bottom:calc(100% + 14px); border:1.5px solid var(--c); border-bottom:0; }
.bf-m--under{ top:calc(100% + 12px); border:1.5px solid var(--c); border-top:0; }
.bf-m span{ position:absolute; left:50%; translate:-50% 0; display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap;
  font:var(--t-small-medium); color:#fff; }
.bf-m--over span{ bottom:calc(100% + 6px); }
.bf-m--under span{ top:calc(100% + 7px); }
.bf-m b{ font:600 11px/1 var(--shell); color:var(--c-brand-2, #C5E704); font-feature-settings:"tnum"; }
.bf-m.is-hot, .ext:has(.bf-g li:hover) .bf-m{ --c:rgba(255,255,255,.5); }
.bf-grid{ position:absolute; top:calc(262px + clamp(200px, calc(var(--W, 1456px) * .19), 236px) + 28px); left:0; width:100%; display:grid; grid-template-columns:3fr 4fr 3fr; gap:0 32px; }
.bf-g{ border-top:1px solid var(--ink); padding-top:var(--s-2); min-width:0; }
.bf-g h4{ margin:0; }
.bf-line{ margin:4px 0 10px; font:var(--t-lead-strong); color:var(--ink); text-wrap:balance; }
.bf-g ol{ margin:0; padding:0; list-style:none; }
.bf-g li{ display:grid; grid-template-columns:30px 1fr; align-items:baseline; padding:6px 0; border-top:1px solid var(--hairline); font:var(--t-small); color:var(--mid); text-wrap:pretty; transition:color .3s; }
.bf-n{ font:var(--t-small-medium); color:var(--quiet); font-feature-settings:"tnum"; }
.bf-g li.is-marked .bf-n{ color:var(--c-brand-2, #C5E704); }
.bf-g li.is-marked{ color:var(--ink); }
.bf-g li:hover{ color:var(--ink); }
.bf-g:last-child{ border-top-color:var(--hairline); }        /* the world: context, not a fault in the artwork */

/* ---------- before and after: the old mark and the new, side by side ---------- */
.ba-h{ position:absolute; top:170px; left:0; width:100%; }
.ba{ position:absolute; top:270px; left:0; width:100%; height:516px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ba-side{ position:relative; margin:0; border-radius:14px; background:#141414; display:grid; grid-template-rows:auto 1fr auto; padding:20px 24px 22px; }
.ba-side--after{ background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.ba-art{ display:grid; place-items:center; padding:0 8%; }
.ba-art img{ width:100%; max-width:520px; height:auto; }
.ba-svg{ display:block; width:100%; max-width:520px; color:#fff; }
.ba-svg svg{ display:block; width:100%; height:auto; }
.ba-side ul{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.ba-side li{ font:var(--t-small); color:var(--mid); padding-top:6px; border-top:1px solid var(--hairline); }
.ba-side--after li{ color:var(--ink); }

/* ---------- company: the brands it has to sit beside ---------- */
.co{ position:absolute; top:300px; left:0; width:100%; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 36px; }
.co section{ border-top:1px solid var(--ink); padding-top:var(--s-2); }
.co h4{ margin:0 0 var(--s-1); }
.co ul{ margin:0; padding:0; list-style:none; }
.co li{ padding:10px 0; border-top:1px solid var(--hairline); font:var(--t-title); font-size:40px; line-height:1.05; letter-spacing:-.04em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co section{ border-top-color:var(--c-brand-2, #C5E704); }
.co h4{ color:var(--c-brand-2, #C5E704); }
.co li:first-child{ border-top:0; }
/* company: logos instead of names, and a quieter second row */
.co-logos{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0 28px; align-items:center; }
.co-logos li{ border-top:0 !important; padding:22px 0; display:flex; align-items:center; }
.co-logos img{ height:56px; width:auto; max-width:100%; opacity:.95; }
.co-logos img[src$=".svg"]{ filter:invert(1); }
.co:has(.co-logos){ grid-template-columns:1fr; top:260px; }
.co-second{ position:absolute; top:480px; left:0; width:100%; display:flex; flex-direction:column; gap:12px; border-top:1px solid color-mix(in srgb, currentColor 22%, transparent); padding-top:var(--s-2); }
.co-row{ display:grid; grid-template-columns:120px 1fr; align-items:center; gap:24px; }
.co-rowh{ font:var(--t-small); opacity:.6; }
.co-logos--sm{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
.co-logos--sm li{ padding:6px 0; font:var(--t-lead); opacity:.75; }
.co-logos--sm img{ height:30px; opacity:.75; }