/* The Adverse Read · v41 editorial composition. Base primitives: site.css. */
:root { --max-w: 1264px; --sy: clamp(4rem,7vw,6.5rem); --sy-tight: clamp(3rem,5vw,4.5rem); --ttg-caption:#5e6875; --ttg-faint:#687382; }
html { scroll-padding-top: 96px; }
body { overflow-x: clip; }
main { min-width:0; }
.skip-link { position:fixed; top:10px; left:10px; padding:12px 20px; background:#fff; color:#061452; z-index:1000; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
:focus-visible { outline:2px solid #527eef; outline-offset:5px; }
.btn { min-height:48px; border-radius:2px; font-weight:600; white-space:normal; text-align:center; justify-content:center; }
.btn-primary { background:#314bda; border-color:#314bda; }
.btn-primary:hover { background:#405bed; border-color:#405bed; }
.nav-inner { max-width:1264px; }
.nav-firm { letter-spacing:.16em; }
.folio { font-size:.6875rem; letter-spacing:.15em; margin-bottom:2.4rem; }
.folio b { font-weight:600; }
.on-dark .folio { color:#a4adbe; }
.lede { font-weight:400; line-height:1.65; }
.body { line-height:1.75; }
h2.h { font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.09; font-weight:650; letter-spacing:-.042em; }
.hero { padding-top:clamp(3rem,6vw,5rem); min-height:0; background:#090e1a; }
.hero-inner { grid-template-columns:1.1fr 1fr; gap:2.75rem; align-items:center; padding:0 0 4rem; }
.hero-copy,.hero-product { grid-column:auto; min-width:0; }
.hero .display { font-size:clamp(3rem,5.3vw,4.65rem); line-height:1.035; font-weight:650; letter-spacing:-.055em; }
.display-after { display:block; color:#a9c6f7; font-size:.51em; font-weight:400; letter-spacing:-.025em; line-height:1.2; max-width:21ch; margin-top:.7em; }
.hero-sub { font-size:1.125rem; line-height:1.7; color:#c5cbd6; font-weight:400; max-width:48ch; margin-top:1.65rem; }
.hero-spec { color:#9da8bb; line-height:1.7; max-width:47ch; font-size:.875rem; }
.hero-actions { gap:.75rem; margin-top:1.6rem; }
.hero-assure { color:#a4afc3; font-size:.625rem; line-height:1.8; letter-spacing:.09em; max-width:60ch; }
.hero-ring { opacity:.025; }
.hero-glow { opacity:.5; }
.hero-product { margin:0; width:100%; }
.hero-product .fan { aspect-ratio:1/1.08; }
.readiness-sequence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #303b50; padding:0 0 1.3rem; margin:0; }
.readiness-sequence>div { padding:1.55rem 1.75rem 1rem 0; }
.readiness-sequence>div+div { padding-left:1.75rem; border-left:1px solid #273247; }
.readiness-sequence strong { display:block; color:#e3e8f1; font-size:.9375rem; line-height:1.5; font-weight:500; }
.readiness-sequence p { font-size:.75rem; color:#a0adc1; margin-top:.45rem; line-height:1.6; max-width:34ch; }
.sequence-number { display:block; color:#9ba9c0; font-size:.625rem; letter-spacing:.15em; margin-bottom:.65rem; }
.sequence-current { border-top:2px solid #a9c6f7; margin-top:-1px; background:linear-gradient(180deg,rgba(80,118,189,.1),transparent); }
.sequence-current .sequence-number { color:#b4d0ff; }
.strip { padding:1.7rem 0; }
.strip-inner { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; }
.strip-lead { display:none; }
.strip .strip-item:nth-child(n) { padding:.35rem 1.5rem .35rem 0; border-bottom:0; border-right:1px solid var(--hair-dark); }
.strip .strip-item:last-child { border-right:0; }
.strip-item b { font-weight:600; }
.prob-statement { font-weight:600; font-size:clamp(2.5rem,4.3vw,3.55rem); line-height:1.12; letter-spacing:-.045em; }
.prob-statement .accent { display:inline-block; margin-top:.28em; color:#314786; }
.ledger { margin-top:2.75rem; }
.ledger-head { font-size:.75rem; letter-spacing:.06em; text-transform:none; }
.ledger-row { font-size:.9375rem; }
.q-row { padding:1.4rem 0; }
.q-num { font-weight:400; font-size:1.4rem; }
.q-title { font-weight:600; }
.del-head { top:110px; }
.l2-t { font-weight:650; }
.l2-row { padding:1.25rem 0; }
.pillar { padding-top:1.8rem; padding-bottom:1.8rem; }
.legend { margin-top:2rem; }
.legend .pill { font-size:.625rem; color:#c4d9fa; background:transparent; border:1px solid #647d9f; }
.independence { display:grid; grid-template-columns:1.1fr 1fr; gap:5rem; padding:3rem 0; margin:2rem 0 0; border-top:1px solid #30333b; align-items:start; }
.independence .pullq { max-width:22ch; padding:0; border:0; margin:0; font-size:clamp(1.8rem,3.2vw,2.65rem); font-weight:500; line-height:1.22; letter-spacing:-.036em; text-wrap:pretty; }
.independence-detail { padding-top:.3rem; }
.independence-detail p { color:#b5becb; font-size:.9375rem; line-height:1.75; }
.independence-detail p+p { margin-top:1rem; }
.std .t { font-size:1.25rem; font-weight:600; letter-spacing:.01em; }
.std p { color:#b5becb; }
.std .tag { color:#98a5b8; }
.portrait img { aspect-ratio:4/4.5; object-fit:cover; }
.portrait::after { inset:16px -16px -16px 16px; border-color:#dbe2ef; }
.portrait-meta .p { font-size:.6875rem; }
.firm-statement { font-weight:500; font-size:clamp(1.5rem,2.2vw,1.875rem); line-height:1.35; }
.cred strong { font-weight:650; }
.principal-observation { margin-top:2rem; padding:1.5rem 0; border-top:1px solid #d9e0ea; border-bottom:1px solid #d9e0ea; }
.principal-observation p { font-size:1.3rem; font-weight:500; line-height:1.5; letter-spacing:-.025em; color:#19284c; }
.principal-observation footer { font-size:.625rem; text-transform:uppercase; letter-spacing:.13em; color:#59667b; margin-top:.85rem; }
.principal-observation a { display:inline-block; font-size:.8125rem; margin-top:.9rem; color:#2b3fcc; text-underline-offset:4px; }
.tier-p { font-weight:600; font-size:clamp(3rem,5.3vw,4.2rem); }
.tier.featured { background:#0c183a; }
.tier.featured .tier-k,.tier.featured .tier-c { color:#b5c9e8; }
.tier.featured .tier-p small { color:#b5c9e8; }
.tier.featured .btn { border-color:#a9c6f7; color:#d8e7ff; }
.tier.featured .btn:hover { color:#061452; background:#d8e7ff; }
.tier li { padding:.8rem 0; }
.terms { color:#536174; font-size:.8125rem; }
.pfit { padding-top:2rem; }
.ctrl p { color:#b5becb; }
.step-n { color:#314786; -webkit-text-stroke:0; font-weight:400; font-size:3rem; }
.step-d,.step-x { line-height:1.7; }
.step-x { color:#59667b; }
.faq summary { font-weight:550; font-size:1rem; line-height:1.5; }
.faq .x { width:20px; }
.faq p { max-width:68ch; }
.ft-disc { font-size:.75rem; color:#a3aec1; line-height:1.75; }
.ft-tag,.ft-contact { color:#aab5c7; }
.video-note,.panel .fine { color:#aab9d0; }
/* About: the observations read as a composed page, not identical cards. */
.ah .display { font-weight:600; letter-spacing:-.045em; line-height:1.07; }
.ah-sub { color:#c2cbdc; font-weight:400; }
.ah-meta p { color:#abb7cc; }
.ah-film { max-width:960px; margin-left:auto; margin-right:auto; }
.about-page .hook-q { font-weight:650; }
.about-page #observations { background:#0d1937; }
.co-head { text-align:left; margin-bottom:2.2rem; }
.co-head .lede { margin:0; font-size:.9375rem; color:#b5c2d8; font-weight:400; }
.co-editorial { display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:auto auto; column-gap:4rem; }
.co-editorial .co-q { padding:1.4rem 0; border-top:1px solid #354360; }
.co-editorial .co-q:nth-child(2) { grid-column:1; grid-row:1 / 3; padding-right:3rem; border-right:1px solid #354360; }
.co-editorial .co-q:nth-child(1) { grid-column:2; grid-row:1; }
.co-editorial .co-q:nth-child(3) { grid-column:2; grid-row:2; }
.co-cat { color:#aabddc; font-size:.625rem; font-weight:500; margin-bottom:1rem; }
.co-mark { color:var(--ttg-ice-blue); font-family:var(--font); font-size:4rem; height:2rem; margin-bottom:.5rem; }
.co-t { font-size:1.35rem; font-weight:400; line-height:1.55; letter-spacing:-.022em; color:#edf1f8; }
.co-editorial .co-q:nth-child(2) .co-t { font-size:clamp(1.45rem,2.25vw,1.8rem); line-height:1.5; }
.co-a { color:#bac7dc; font-size:.625rem; line-height:1.8; letter-spacing:.12em; }
.about-page .part-label { font-size:.6875rem; }
.about-page .sources { font-size:.875rem; color:#b5c2d8; border-top:1px solid #354360; padding-top:1.4rem; }
.about-page .credrow .v { font-weight:600; }
.about-page .origin { border-left:2px solid #8fa9d3; }
.about-page .outcome { font-size:1.1rem; }
.modal-card { max-height:calc(100dvh - 32px); overflow:auto; width:min(520px,calc(100vw - 32px)); overscroll-behavior:contain; }
.modal-close { min-width:44px; min-height:44px; }
.modal-title { font-weight:650; font-size:1.65rem; }
.modal-fine { color:#616d7e; font-size:.75rem; }
.modal-status { color:#8e2631; font-size:.8125rem; line-height:1.5; margin-top:.75rem; }
.modal-status:empty { display:none; }
.modal-input { font-size:1rem; }
.modal-input:focus-visible { outline:2px solid #527eef; outline-offset:2px; }
.btt { visibility:hidden; width:44px; height:44px; }
.btt.visible { visibility:visible; }
.modal-success button { min-height:44px; }
.mnp { visibility:hidden; }
.mnp.is-open { visibility:visible; }
.nav-hamburger { min-width:44px; min-height:44px; }
.ah-copy { max-width:none; }
.wstep i { font-weight:400; color:#314786; -webkit-text-stroke:0; }
.wstep p strong,.result p strong,.pp-t,.cta-row .t { font-weight:650; }
[data-reveal] { opacity:1; transform:none; }
.reveal-ready [data-reveal]:not(.in) { opacity:0; transform:translateY(14px); }
@media (max-width:1050px) {
  .nav-links { display:none; }
  .nav-hamburger { display:block; }
  .hero-inner { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .hero .display { font-size:3.35rem; }
  .hero-actions { align-items:stretch; }
  .hero-actions .btn { font-size:.8125rem; padding:.85rem 1rem; }
}
@media (max-width:900px) {
  .hero-inner { grid-template-columns:1fr; padding-bottom:2rem; }
  .hero-copy { max-width:650px; }
  .hero .display { font-size:clamp(2.7rem,7vw,4.25rem); }
  .hero-product { max-width:490px; margin:1.5rem auto 0; }
  .hero-product .fan { aspect-ratio:1/1; }
  .independence { gap:2rem; }
  .co-editorial { grid-template-columns:1fr; gap:0; }
  .co-editorial .co-q:nth-child(n) { grid-column:auto; grid-row:auto; padding:1.8rem 0; border-right:0; }
  .co-editorial .co-q:nth-child(2) { order:-1; }
  .portrait { max-width:400px; }
  .hero-break { display:none; }
  .strip-inner { grid-template-columns:1fr 1fr; }
  .strip .strip-item:nth-child(odd) { border-right:0; }
}
@media (max-width:600px) {
  :root { --gutter:1.4rem; --sy:3.6rem; }
  .hero { padding-top:2.75rem; }
  .hero .display { font-size:clamp(2.8rem,9.5vw,3.6rem); }
  .display-after { font-size:.59em; max-width:22ch; }
  .hero-sub { font-size:1rem; }
  .hero .eyebrow { font-size:.59rem; letter-spacing:.1em; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-assure { font-size:.625rem; }
  .hero-product { margin-top:1rem; }
  .readiness-sequence { grid-template-columns:1fr; padding-bottom:.5rem; }
  .readiness-sequence>div { padding:1.2rem 0; }
  .readiness-sequence>div+div { padding:1.2rem 0; border-left:0; border-top:1px solid #303b50; }
  .readiness-sequence .sequence-current { padding-left:1rem; border-left:2px solid #a9c6f7; background:none; }
  .readiness-sequence p { max-width:none; }
  .strip-inner { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
  .strip .strip-item:nth-child(n) { border:0; padding:0; }
  .strip-item span { font-size:.75rem; }
  .folio { margin-bottom:1.8rem; font-size:.625rem; gap:.85rem; }
  h2.h { font-size:2.15rem; }
  .prob-statement { font-size:2.55rem; }
  .ledger-col { padding:1.3rem; }
  .independence { grid-template-columns:1fr; padding-top:2rem; }
  .independence .pullq { font-size:1.95rem; max-width:26ch; }
  .portrait::after { inset:10px -10px -10px 10px; }
  .tier { padding:1.75rem; }
  .tier-c { line-height:1.6; }
  .co-t { font-size:1.25rem; }
  .modal-body { padding:1.5rem; }
  .modal-strip { padding:.65rem 1rem; }
  .modal-title { font-size:1.4rem; }
  .ft-nav { gap:1rem; }
  .ft-disc { font-size:.75rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  [data-hero],.reveal-ready [data-reveal]:not(.in) { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   v41.2 CORRECTIONS — regressions against the live site, and defects
   found in a three-viewport render audit (1440 / 834 / 390).
   ═══════════════════════════════════════════════════════════════════ */

/* B · Work-product CTA spacing (inline style removed for ordering) */
.wp-cta { margin-top: 1.75rem; }

/* C · Framework rail: never leave an orphan half-row at two columns */
@media (max-width: 1000px) and (min-width: 561px) {
  .fw-rail > .fw-node:nth-child(5) { grid-column: 1 / -1; }
}

/* D · When the hero and work product stack, the artwork comes BEFORE
       the calls to action — matching the live site's proven order.
       Flex (not grid) so the 12-column `grid-column` rules go inert. */
@media (max-width: 900px) {
  /* align-items:center is correct for the 2-col grid but centres
     horizontally once these become flex columns — reset it. */
  .hero-inner { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero-copy { display: contents; }
  .hero-copy > .eyebrow      { order: 1; }
  .hero-copy > h1            { order: 2; }
  .hero-copy > .hero-sub     { order: 3; }
  .hero-copy > .hero-spec    { order: 4; }
  .hero-product              { order: 5; margin: 1.75rem auto 0; }
  .hero-copy > .hero-actions { order: 6; margin-top: 1.75rem; }
  .hero-copy > .hero-assure  { order: 7; margin-top: 1rem; }

  #sample-report .g             { display: flex; flex-direction: column; gap: 0; align-items: stretch !important; }
  #sample-report .c1-5          { display: contents; }
  #sample-report .c1-5 > h2     { order: 1; }
  #sample-report .c1-5 > .lede  { order: 2; margin-top: 1rem; }
  #sample-report .c1-5 > .small { order: 3; margin-top: 1.25rem; }
  #sample-report .c6-13         { order: 4; margin-top: 2rem; }
  #sample-report .wp-cta        { order: 5; }
}

/* E · Comfortable tap targets for standalone links on small screens */
@media (max-width: 640px) {
  .ft-nav a, .footer-nav a, .footer-links a { display: inline-block; padding-block: 7px; }
  .link-arrow, .article-read-link { padding-block: 6px; }
  .ft-logo, .footer-logo { padding-block: 4px; }
}

/* F · The spread's rotated pages overflow a 1.45:1 box and collided with
       the caption beneath. Give the box enough height to contain them. */
.spread { aspect-ratio: 1.3 / 1; }

/* G · Standalone link tap targets (insights defines its own, so match it) */
@media (max-width: 640px) {
  .article-read-link { padding-block: 6px; }
}
@media (max-width: 640px) {
  .principal-observation a { display: inline-block; padding-block: 6px; }
}
@media (max-width: 640px) {
  .ft-contact a, .meta .v a { display: inline-block; padding-block: 5px; }
}

/* H · One left rail. When the layout stacks, artwork and its caption align
       with the text column instead of introducing a second, centred axis. */
@media (max-width: 900px) {
  .hero-product { margin: 1.75rem 0 0; max-width: 560px; }
  .hero-product .fan { margin-left: 0; margin-right: 0; }
  .fan-wrap { place-items: start; }
  .fan-wrap .fan, .fan-wrap .fan-cap { margin-left: 0; margin-right: 0; }
}

/* I · The assurance line must never break inside a phrase, at any width. */
.hero-assure span { white-space: nowrap; }
.hero-assure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
.hero-assure i { font-style: normal; opacity: .5; }

/* ═══════════════════════════════════════════════════════════════════
   v41.3 — HERO & WORK PRODUCT ELEVATION
   The previous pass suppressed every piece of hero motion and flattened
   the caption plates into hairlines. Both were a step below the live
   site. Restored as designed components, then pushed further.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Caption plates ────────────────────────────────────────────────
   These are OPAQUE by design. The earlier overlap defect came from
   transparent text sitting on artwork; an opaque plate with its own
   accent rule is a deliberate object and reads as one.              */
.hero-product { position: relative; }
.fan-cap {
  position: absolute; left: 50%; bottom: 7%; z-index: 6;
  transform: translateX(-50%);
  width: min(392px, 82%);
  display: block; text-wrap: balance;
  padding: .85rem 1.1rem .9rem;
  background: rgba(8,10,18,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.13);
  border-top: 2px solid var(--ttg-mck-blue);
  border-radius: 0;
  box-shadow: 0 20px 48px -14px rgba(0,0,0,.72);
  transition: transform .5s var(--ease), border-top-color .5s var(--ease);
}
.fan-cap b {
  display: block; margin-bottom: .22rem;
  font-size: .625rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ttg-ice-blue);
}
.fan-cap span { font-size: .75rem; line-height: 1.5; color: rgba(255,255,255,.62); }
.hero-product:hover .fan-cap { transform: translateX(-50%) translateY(-3px); }

/* about page: same object, light ground */
.fan-wrap { position: relative; }
.fan-light .fan-cap,
.fan-wrap .fan-cap {
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--ttg-divider);
  border-left: 3px solid var(--ttg-mck-blue); border-top: 1px solid var(--ttg-divider);
  box-shadow: 0 10px 26px rgba(6,20,82,.12);
  width: min(420px, 86%); max-width: none; margin: 0; text-align: left;
}
.fan-light .fan-cap b, .fan-wrap .fan-cap b { color: var(--ttg-mck-blue); }
.fan-light .fan-cap span, .fan-wrap .fan-cap span { color: var(--ttg-caption); }

/* work-product spread plate — the caption is a sibling of .spread, so the
   column provides the positioning context. */
#sample-report .c6-13 { position: relative; }
.sp-cap {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  width: auto; max-width: min(330px, 70%);
  margin: 0; padding: .78rem 1rem .8rem;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ttg-divider);
  border-left: 3px solid var(--ttg-mck-blue);
  box-shadow: 0 10px 26px rgba(6,20,82,.12);
  border-radius: 0;
  transition: transform .5s var(--ease);
}
.spread:hover .sp-cap { transform: translateY(-3px); }

/* stack the plates below the artwork on phones, where overlaying
   a small canvas costs more than it gains */
@media (max-width: 700px) {
  .fan-cap, .sp-cap, .fan-wrap .fan-cap {
    position: static; transform: none; width: auto; max-width: none; margin-top: 1rem;
  }
  .hero-product:hover .fan-cap, .spread:hover .sp-cap { transform: none; }
}

/* ── Section headings keep the blue rule ───────────────────────────
   The folio is the running label; the rule is the heading's anchor.
   Losing it flattened every section opening.                        */
h2.h {
  padding-left: 1.125rem;
  border-left: 4px solid var(--ttg-mck-blue);
}
h2.h.light { border-left-color: var(--ttg-ice-blue); }
@media (max-width: 520px) { h2.h { padding-left: .875rem; border-left-width: 3px; } }

/* ── Primary nav CTA carries real weight ───────────────────────────── */
.nav-cta {
  background: var(--ttg-mck-blue) !important;
  color: #fff !important;
  border: 1px solid var(--ttg-mck-blue);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease) !important;
}
.nav-cta:hover {
  background: var(--ttg-dark-navy) !important; border-color: var(--ttg-dark-navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(43,63,204,.55);
}

/* ── Hero motion ───────────────────────────────────────────────────── */
.eyebrow .dot::after { display: block; animation: pulse 2.4s var(--ease) infinite; }
.scan { display: block; }
.fan-stage { animation: float 9s ease-in-out infinite; }

/* sheets begin folded in; JS releases them back to their CSS positions */
.fan.is-assembling .pg { opacity: 0; }

/* the cover invites the click */
.pg-cover { transition: transform .55s var(--ease), box-shadow .55s var(--ease), filter .55s var(--ease); }
.fan:hover .pg-cover { box-shadow: 0 54px 110px -34px rgba(0,0,0,.92), 0 0 0 1px rgba(111,168,232,.35); filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .fan-stage { animation: none; }
  .scan { display: none; }
  .eyebrow .dot::after { animation: none; }
  .fan.is-assembling .pg { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   v41.4 — HEADER
   Measured against the live site the header had lost real presence:
   34px mark vs 44px, 15px wordmark vs 18px, looser tracking, lighter
   links. Restored to live's weight, then given the motion it lacked.
   ═══════════════════════════════════════════════════════════════════ */

nav {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair-dark);
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-inner { height: 72px; transition: height .35s var(--ease); }
nav.scrolled {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--ttg-divider);
  box-shadow: 0 1px 0 rgba(17,20,24,.05), 0 10px 30px -18px rgba(6,20,82,.30);
}
nav.scrolled .nav-inner { height: 60px; }

/* ── Logo presence ────────────────────────────────────────────────── */
.nav-logo { gap: 1rem; }
.nav-logo svg { width: 44px; height: 44px; transition: width .35s var(--ease), height .35s var(--ease); }
nav.scrolled .nav-logo svg { width: 37px; height: 37px; }
.nav-firm {
  font-size: 1.125rem; font-weight: 900; letter-spacing: .10em; line-height: 1;
  color: var(--ttg-ink);
}
.nav-tag {
  font-size: .5rem; font-weight: 600; letter-spacing: .13em; line-height: 1;
  margin-top: 5px; color: var(--ttg-caption);
}

/* ── The ring draws itself around the mark ────────────────────────────
   The identity is a Saturn form; drawing the orbit is the one piece of
   motion that is actually the brand rather than decoration.          */
@keyframes ringDraw   { from { stroke-dashoffset: 215; } to { stroke-dashoffset: 0; } }
@keyframes ringRedraw { from { stroke-dashoffset: 215; } to { stroke-dashoffset: 0; } }
@keyframes markIn     { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.nav-logo svg ellipse {
  stroke-dasharray: 215;
  animation: ringDraw 1.15s cubic-bezier(.16,1,.3,1) .12s both;
}
.nav-logo svg circle, .nav-logo svg path {
  transform-origin: 50px 50px;
  animation: markIn .7s cubic-bezier(.16,1,.3,1) .28s both;
}
.nav-logo:hover svg ellipse { animation: ringRedraw .85s cubic-bezier(.16,1,.3,1) both; }

/* ── Nav links: an editorial rule that sweeps in ─────────────────────── */
.nav-links a:not(.nav-cta) {
  position: relative; font-weight: 600; color: var(--ttg-body);
  padding-block: 4px;
}
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--ttg-mck-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav-links a:not(.nav-cta):hover { color: var(--ttg-ink); }
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ttg-mck-blue) !important; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Hamburger resolves into a close mark ───────────────────────────── */
.nav-hamburger svg line { transition: transform .3s var(--ease), opacity .2s var(--ease); transform-origin: 50% 50%; }
.nav-hamburger[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1040px) { .nav-firm { font-size: 1.0625rem; } }
@media (max-width: 860px)  { .nav-inner { height: 64px; } nav.scrolled .nav-inner { height: 58px; } .nav-logo svg { width: 38px; height: 38px; } }

@media (prefers-reduced-motion: reduce) {
  .nav-logo svg ellipse, .nav-logo svg circle, .nav-logo svg path,
  .nav-logo:hover svg ellipse { animation: none; stroke-dashoffset: 0; }
  .nav-inner, nav.scrolled .nav-inner { transition: none; }
}

/* sticky panels sit clear of the taller bar */
.del-head, .credpanel { top: 96px; }

/* ═══════════════════════════════════════════════════════════════════
   v43.1 — HERO MOCKUP, ported from the live site's geometry.
   The rewrite had shrunk the cover page from 378px to 218px and the
   stage from 700px to 472px, which is why it read small and timid.
   These are live's exact values, on the new markup.
   ═══════════════════════════════════════════════════════════════════ */
.hero-product .fan {
  position: relative; display: block;
  width: 100%; max-width: 560px; min-height: 700px;
  margin-left: auto; aspect-ratio: auto;
  perspective: 1500px; isolation: isolate;
}
/* the blue framing rectangle behind the stack */
.hero-product .fan::before {
  content: ""; position: absolute; inset: 44px 28px 46px; z-index: -1;
  background: linear-gradient(180deg, rgba(43,63,204,.18), rgba(43,63,204,.04));
  border: 1px solid rgba(43,63,204,.48);
}
.hero-product .fan-stage { position: absolute; inset: 0; transform-style: flat; }

.hero-product .pg {
  position: absolute; display: block; width: auto; height: auto;
  aspect-ratio: 612/792; object-fit: cover; background: #fff;
  border: none; border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 22px 44px rgba(0,0,0,.30), 0 3px 9px rgba(0,0,0,.22);
  transform-origin: 50% 85%; filter: none;
  transition: transform .42s cubic-bezier(.16,1,.3,1),
              box-shadow .42s cubic-bezier(.16,1,.3,1),
              opacity .28s ease;
}
.hero-product .pg-analys { z-index:1; top:106px; left:0;    width:322px; opacity:.91; filter:saturate(.88) brightness(.97); transform:rotate(-3.5deg) translate3d(11px,3px,-80px); }
.hero-product .pg-brief  { z-index:2; top:68px;  right:0;   width:334px; opacity:.93; filter:saturate(.88) brightness(.97); transform:rotate(3.75deg) translate3d(-7px,1px,-35px); }
.hero-product .pg-cover  { z-index:3; top:8px;   left:50%;  width:378px; opacity:1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 36px 72px rgba(0,0,0,.48), 0 6px 17px rgba(0,0,0,.28);
  transform: translateX(-50%) rotate(-.6deg) translateZ(18px); }
.hero-product .pg-farl   { z-index:0; top:136px; left:-4px; width:282px; opacity:.58; filter:saturate(.70) brightness(.80); transform:rotate(-8.5deg) translate3d(2px,2px,-155px); }
.hero-product .pg-farr   { z-index:0; top:120px; right:-4px;width:282px; opacity:.62; filter:saturate(.70) brightness(.80); transform:rotate(8deg) translate3d(-2px,2px,-125px); }

/* hover opens the fan — cover pulls forward, the side pages separate */
@media (hover: hover) {
  .hero-product:hover .pg-farl  { transform:rotate(-10.5deg) translate3d(-4px,4px,-175px); opacity:.68; }
  .hero-product:hover .pg-farr  { transform:rotate(10deg) translate3d(4px,4px,-145px); opacity:.72; }
  .hero-product:hover .pg-analys{ transform:rotate(-4.5deg) translate3d(6px,0,-55px); opacity:.96; }
  .hero-product:hover .pg-brief { transform:rotate(4.75deg) translate3d(-10px,0,-20px); opacity:.98; }
  .hero-product:hover .pg-cover {
    transform: translateX(-50%) rotate(-.2deg) translateZ(30px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 48px 96px rgba(0,0,0,.58), 0 8px 24px rgba(0,0,0,.32); }
}

/* caption plate sits where live had it */
.hero-product .fan-cap { bottom: 60px; width: min(365px, 90%); }

@media (max-width: 1100px) { .hero-product .fan { min-height: 620px; } .hero-product .pg-cover { width: 330px; }
  .hero-product .pg-brief { width: 292px; } .hero-product .pg-analys { width: 282px; }
  .hero-product .pg-farl, .hero-product .pg-farr { width: 246px; } }
@media (max-width: 900px)  { .hero-product .fan { min-height: 560px; max-width: 520px; margin: 0; } }
@media (max-width: 560px)  { .hero-product .fan { min-height: 430px; }
  .hero-product .pg-cover { width: 232px; } .hero-product .pg-brief { width: 205px; }
  .hero-product .pg-analys { width: 198px; } .hero-product .pg-farl, .hero-product .pg-farr { width: 173px; }
  .hero-product .fan::before { inset: 28px 14px 30px; } }

/* ═══════════════════════════════════════════════════════════════════
   v43.1 — THE PRINCIPAL, recomposed.
   The third-party voice belongs beside the face it vouches for, and
   the film shows the same person — both moved under the portrait.
   The release standard governs the whole section, so it closes it
   full-width rather than trailing the end of a text column.
   ═══════════════════════════════════════════════════════════════════ */
.principal-observation {
  margin: 1.75rem 0 0; padding: 1.25rem 0 0;
  border: 0; border-top: 1px solid var(--hair-dark);
}
.principal-observation p {
  font-size: 1.0625rem; line-height: 1.5; font-weight: 500;
  letter-spacing: -.015em; color: var(--ttg-ink); margin: 0;
}
.principal-observation footer {
  margin-top: .7rem; font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ttg-caption);
}
.principal-observation a {
  display: inline-block; margin-top: .85rem; font-size: .75rem; font-weight: 600;
  color: var(--ttg-mck-blue); text-decoration: none;
  border-bottom: 1px solid rgba(43,63,204,.35); padding-bottom: 1px;
  transition: border-color .2s;
}
.principal-observation a:hover { border-bottom-color: var(--ttg-mck-blue); }

/* the film card stacks in the narrower column */
.c1-5 .film { grid-template-columns: 1fr; gap: .9rem; margin-top: 1.5rem; padding: .85rem; }
.c1-5 .film-thumb { aspect-ratio: 16/9; }

/* release standard as the section's closing commitment */
#principal .release {
  margin: clamp(2.5rem,5vw,3.5rem) 0 0;
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.5rem; align-items: baseline;
  padding: 1.375rem 1.75rem;
}
#principal .release b { margin: 0; white-space: nowrap; }
@media (max-width: 700px) {
  #principal .release { grid-template-columns: 1fr; gap: .4rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   v45 — HERO COMPOSITION.

   Root cause of the "mess": `.hero .container` carries `margin: 0 auto`
   from site.css and sits in a COLUMN flex parent. Auto cross-axis
   margins disable stretch, so the container shrink-wrapped to its own
   content — 1057px instead of 1264px. Every downstream symptom
   followed from that one line: the text column lost 120px, the product
   column lost 105px, and the fan's fixed-pixel pages (378/334/322/282)
   overflowed their 437px box by 46px left and 103px right. The blue
   backing panel, inset from the CONTAINER, then sliced straight
   through artwork that had escaped it.
   ═══════════════════════════════════════════════════════════════════ */
.hero > .container { width: 100%; }

.hero-inner { grid-template-columns: minmax(0,1.07fr) minmax(0,1fr); gap: 3rem; }

/* The stack ended ~531px down a 700px stage — 169px of nothing under
   the artwork, which is the gap the panel's bottom edge was floating
   in. Height now follows the composition. */
.hero-product .fan { min-height: 596px; }
.hero-product .fan::before { inset: 40px 26px 52px; }

/* Caption leaves the artwork entirely: static, under the stack, its
   left edge on the panel's left edge. An overlay plate can collide;
   a plate on its own baseline cannot. */
.hero-product .fan-cap {
  position: static; transform: none; width: auto; max-width: 392px;
  margin: 1.125rem 0 0 26px; bottom: auto; left: auto;
}
.hero-product:hover .fan-cap { transform: none; }

@media (max-width: 1100px) {
  .hero-product .fan { min-height: 530px; }
  .hero-product .fan::before { inset: 34px 22px 44px; }
}
@media (max-width: 900px) {
  .hero-product .fan { min-height: 500px; }
  .hero-product .fan-cap { margin-left: 22px; }
}
@media (max-width: 560px) {
  .hero-product .fan { min-height: 372px; }
  .hero-product .fan::before { inset: 24px 12px 30px; }
  .hero-product .fan-cap { margin: .9rem 0 0 12px; max-width: none; }
}

/* The outer two sheets sat at ±4px, so once rotation grew their
   bounding boxes the stack spanned 638px inside a 541px column and the
   far-left sheet came within 2px of the text column. Inset them and
   trim their width: they are depth, not content. */
.hero-product .pg-farl  { left: 22px; right: auto; width: 268px; }
.hero-product .pg-farr  { right: 22px; left: auto;  width: 268px; }
@media (hover: hover) {
  .hero-product:hover .pg-farl { transform: rotate(-10.5deg) translate3d(-10px,4px,-175px); }
  .hero-product:hover .pg-farr { transform: rotate(10deg)   translate3d(10px,4px,-145px); }
}

/* The scan sweep holds `forwards`, so when the engine clamps the
   animation (reduced-motion, background tab) it parks a bright 2px
   rule permanently across the mockup. Hide it outright in that path. */
@media (prefers-reduced-motion: reduce) { .scan { display: none !important; } }

/* Close the 52px of empty stage under the backing panel so the panel
   and its caption read as one object. */
.hero-product .fan { min-height: 560px; }
.hero-product .fan::before { inset: 40px 26px 16px; }
@media (max-width: 1100px) {
  .hero-product .fan { min-height: 498px; }
  .hero-product .fan::before { inset: 34px 22px 14px; }
}
@media (max-width: 900px)  { .hero-product .fan { min-height: 470px; } }
@media (max-width: 560px)  {
  .hero-product .fan { min-height: 348px; }
  .hero-product .fan::before { inset: 24px 12px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v45 — THE PRINCIPAL, rebalanced.

   Two photographs of the same person, stacked, filled 774px of a
   1206px column — 64% of the left column was imagery, and the section
   read like a personal-brand page rather than a firm's. The argument
   lives in the right column; the left column's job is identification.
   Portrait down 41% in area, film card down ~70%, and the quote —
   the scarcest asset on this site — gains the weight it lost.
   ═══════════════════════════════════════════════════════════════════ */
#principal .c1-5  { grid-column: 1 / 5;  }
#principal .c6-13 { grid-column: 5 / 13; }

#principal .portrait img { aspect-ratio: 1 / 1.08; object-position: center 18%; }
#principal .portrait::after { inset: 13px -13px -13px 13px; }
#principal .portrait-meta { margin-top: 1.375rem; }
#principal .portrait-meta .n { font-size: 1.125rem; }

/* the third-party voice, given room */
#principal .principal-observation { margin-top: 1.5rem; padding-top: 1.125rem; }
#principal .principal-observation p { font-size: 1.125rem; line-height: 1.45; }

/* film returns to a compact 2-up: a link with a thumbnail, not a
   second hero image */
#principal .film {
  grid-template-columns: 96px 1fr; gap: .85rem; align-items: center;
  margin-top: 1.5rem; padding: .8rem;
}
#principal .film-thumb { aspect-ratio: 16/9; }
#principal .film-play span { width: 26px; height: 26px; }
#principal .film-play svg { width: 10px; height: 10px; }
#principal .film-k { font-size: .5625rem; letter-spacing: .14em; }
#principal .film-t { font-size: .8125rem; line-height: 1.3; margin: .28rem 0 .22rem; }
#principal .film-s { font-size: .6875rem; }

@media (max-width: 900px) {
  #principal .c1-5, #principal .c6-13 { grid-column: 1 / 13; }
  #principal .portrait img { aspect-ratio: 16/11; object-position: center 20%; }
  #principal .film { grid-template-columns: 128px 1fr; }
}
@media (max-width: 560px) {
  #principal .film { grid-template-columns: 1fr; }
  #principal .film-thumb { max-width: 220px; }
}

/* Source-order correction: the far-sheet rule above was declared
   outside a media query and therefore beat the responsive widths that
   precede it — at 390px the two background sheets were still 268px
   wide inside a 345px stage and spilled past both edges. Re-declared
   per breakpoint. */
@media (max-width: 1100px) {
  .hero-product .pg-farl { left: 20px; right: auto; width: 234px; }
  .hero-product .pg-farr { right: 20px; left: auto;  width: 234px; }
}
@media (max-width: 560px) {
  .hero-product .pg-farl { left: 14px; width: 158px; }
  .hero-product .pg-farr { right: 14px; width: 158px; }
}

/* At <=900 the figure box was 560px while the stage inside it was
   520px, leaving the fan left-aligned with 40px of dead space on the
   right. Box and stage now agree, and the pair centres. */
@media (max-width: 900px) {
  .hero-product { max-width: 520px; margin-left: auto; margin-right: auto; }
  .hero-product .fan { max-width: 100%; margin-left: 0; margin-right: 0; }
}
@media (max-width: 560px) { .hero-product { max-width: 100%; } }

/* Correction to the above: centring the stage introduced a second
   centred axis against a flush-left text column — the "one left rail"
   rule. The figure returns to the rail; the far sheets are inset so
   their rotated bounding boxes land on it rather than 14px outside. */
@media (max-width: 900px) {
  .hero-product { margin-left: 0; margin-right: 0; }
  .hero-product .pg-farl { left: 34px; }
  .hero-product .pg-farr { right: 34px; }
}
@media (max-width: 560px) {
  .hero-product .pg-farl { left: 22px; }
  .hero-product .pg-farr { right: 22px; }
}
@media (max-width: 900px) { .hero-product .pg-analys { left: 8px; } }
@media (max-width: 560px) { .hero-product .pg-analys { left: 3px; } }

/* ═══════════════════════════════════════════════════════════════════
   v46 — HERO MOCKUP, rendered as a lit object.

   The geometry is now right; the rendering was flat. Four white sheets
   at near-full brightness on a near-black field read as slabs, the
   four background pages sat at one apparent distance, the cover had no
   edge or specular so its right side melted into the panel, and the
   panel itself was a div with a border. This block establishes a
   single light source (upper left), three depth planes, a glass sheen
   on the cover, and a double-rule plate with a spotlight behind it.
   ═══════════════════════════════════════════════════════════════════ */

/* — the plate — */
.hero-product .fan::before {
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(43,63,204,.34), rgba(43,63,204,.07) 62%, transparent 88%),
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(111,168,232,.045) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(111,168,232,.045) 39px 40px),
    linear-gradient(180deg, rgba(43,63,204,.13), rgba(43,63,204,.02));
  border: 1px solid rgba(111,168,232,.26);
  outline: 1px solid rgba(43,63,204,.20); outline-offset: -9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.35);
}
/* ambient pool of light the object sits in */
.hero-product { isolation: isolate; }
.hero-product::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -12%; right: -12%; top: -6%; height: 78%;
  background: radial-gradient(50% 50% at 50% 42%, rgba(111,168,232,.13), rgba(43,63,204,.05) 55%, transparent 75%);
  filter: blur(18px);
}

/* — every sheet: one light source, contact + ambient shadow — */
.hero-product .pg {
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.16),
    inset -1px -1px 0 rgba(0,0,0,.10),
    0 1px 2px rgba(0,0,0,.55),
    0 10px 18px -6px rgba(0,0,0,.50),
    0 42px 80px -26px rgba(0,0,0,.70);
}

/* — plane 1: the two mid sheets, paper in shadow rather than paper — */
.hero-product .pg-analys,
.hero-product .pg-brief { opacity: .90; filter: brightness(.84) saturate(.82) contrast(1.02); }
/* — plane 2: recessed, softened — */
.hero-product .pg-farl,
.hero-product .pg-farr { opacity: .50; filter: brightness(.64) saturate(.55) blur(.55px); }

/* — plane 0: the cover, edged and lit — */
.hero-product .pg-cover {
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(255,255,255,.11),
    0 1px 2px rgba(0,0,0,.6),
    0 14px 24px -8px rgba(0,0,0,.6),
    0 56px 100px -30px rgba(0,0,0,.78);
}
/* specular sheen — a second surface over the cover, same geometry */
.hero-product .fan-stage::after {
  content: ""; position: absolute; pointer-events: none; z-index: 4;
  top: 8px; left: 50%; width: 378px; aspect-ratio: 612/792;
  transform: translateX(-50%) rotate(-.6deg) translateZ(18px);
  transform-origin: 50% 85%;
  background:
    linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 27%, transparent 47%),
    linear-gradient(0deg, rgba(0,0,0,.14), transparent 30%);
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  animation: sheenIn .9s ease 1.45s both;
}
@keyframes sheenIn { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) {
  .hero-product:hover .fan-stage::after { transform: translateX(-50%) rotate(-.2deg) translateZ(30px); }
  .hero-product:hover .pg-farl, .hero-product:hover .pg-farr { opacity: .58; }
  .hero-product:hover .pg-analys, .hero-product:hover .pg-brief { opacity: .95; filter: brightness(.90) saturate(.86); }
}

/* — settle the bottom-left: the left-hand sheets sat 38px and 16px
     lower than their right-hand pairs, so three footers stacked in one
     corner. Offsets equalised toward the right-hand values. — */
.hero-product .pg-analys { top: 90px; }
.hero-product .pg-farl   { top: 126px; }

@media (max-width: 1100px) {
  .hero-product .fan-stage::after { width: 330px; }
  .hero-product .fan::before { outline-offset: -8px; }
}
@media (max-width: 560px) {
  .hero-product .fan-stage::after { width: 232px; }
  .hero-product .fan::before { outline-offset: -6px;
    background:
      radial-gradient(58% 46% at 50% 34%, rgba(43,63,204,.30), rgba(43,63,204,.06) 62%, transparent 88%),
      linear-gradient(180deg, rgba(43,63,204,.12), rgba(43,63,204,.02)); }
  .hero-product .pg-farl, .hero-product .pg-farr { filter: brightness(.64) saturate(.55); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product .fan-stage::after { animation: none; opacity: 1; }
}
/* at phone width the taller aspect of the shrunken sheets ran 4–10px
   past the stage; lifted so every sheet ends inside the plate */
@media (max-width: 560px) {
  .hero-product .pg-brief  { top: 60px; }
  .hero-product .pg-analys { top: 74px; }
  .hero-product .pg-farr   { top: 106px; }
  .hero-product .pg-farl   { top: 110px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v47 — THE RIGHT-HAND SHEET WAS ON THE LEFT.

   site.css sets `.pg-brief { left: 8% }`. The v43.1 port set
   `right: 0` on it but never cleared `left`, and when both are
   specified with a definite width, `left` wins. So the right-hand mid
   sheet has been rendering at 43px — LEFT of the cover — this whole
   time. That put three page edges on the left of the cover and one on
   the right, which is why the right side read as a clipping error
   rather than a composition. Symmetry was never a styling question.
   ═══════════════════════════════════════════════════════════════════ */
.hero-product .pg-brief { left: auto; right: 0; }

/* ═══════════════════════════════════════════════════════════════════
   v47 — THE SHEETS WERE TRANSLUCENT.

   Depth was being expressed with `opacity`, which applies to the whole
   element including its white background. The far sheets at .50 let
   the backing panel's border and grid read straight THROUGH the paper
   — which is precisely why the right-hand page looked like it was
   sitting *under* the blue rectangle. Paper is not translucent.
   Recession now comes from brightness/saturation on an opaque sheet,
   so the panel can never bleed through a page again.
   ═══════════════════════════════════════════════════════════════════ */
.hero-product .pg-analys,
.hero-product .pg-brief {
  opacity: 1; filter: brightness(.80) saturate(.78) contrast(1.03);
}
.hero-product .pg-farl,
.hero-product .pg-farr {
  opacity: 1; filter: brightness(.52) saturate(.42) contrast(1.02);
}
@media (hover: hover) {
  .hero-product:hover .pg-farl,
  .hero-product:hover .pg-farr   { opacity: 1; filter: brightness(.60) saturate(.50) contrast(1.02); }
  .hero-product:hover .pg-analys,
  .hero-product:hover .pg-brief  { opacity: 1; filter: brightness(.87) saturate(.84) contrast(1.03); }
}

/* ═══════════════════════════════════════════════════════════════════
   v47 — ONE OBJECT: MAT, STACK, PLATE.

   Three problems were really one. The backing panel was inset from the
   FAN, so it ended up 489px wide against a 576px stack — narrower than
   the artwork but wider than the cover, which is the one width where
   its borders emerge from behind the pages at odd angles and read as a
   mistake. The caption then floated below it as a second, unrelated
   box, which is why its placement felt arbitrary at every width.

   The panel now belongs to the FIGURE, not the fan, so it encloses the
   stack and the plate as a single mounted object. Its width is keyed
   to the cover (+21px each side), so its verticals are hidden behind
   the mid sheets and surface only above the stack and below it, where
   nothing crosses them. The side sheets step down in size — 378 / 300
   / 252 — so the cover leads instead of competing with two documents
   nearly its own size.
   ═══════════════════════════════════════════════════════════════════ */
.hero-product { position: relative; padding-bottom: 26px; }
.hero-product .fan::before { content: none; }

.hero-product::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 60px 0 60px;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(43,63,204,.34), rgba(43,63,204,.07) 62%, transparent 88%),
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(111,168,232,.045) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(111,168,232,.045) 39px 40px),
    linear-gradient(180deg, rgba(43,63,204,.13), rgba(43,63,204,.02));
  border: 1px solid rgba(111,168,232,.26);
  outline: 1px solid rgba(43,63,204,.20); outline-offset: -9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.35);
}

.hero-product .fan { min-height: 548px; }

/* stack — stepped sizes, both mid sheets anchored to their own side */
.hero-product .pg-cover  { top: 30px;  left: 50%;   width: 378px; }
.hero-product .pg-analys { top: 96px;  left: 14px;  right: auto; width: 300px;
  transform: rotate(-3.2deg) translate3d(8px,2px,-80px); }
.hero-product .pg-brief  { top: 96px;  right: 14px; left: auto;  width: 300px;
  transform: rotate(3.4deg) translate3d(-8px,1px,-35px); }
.hero-product .pg-farl   { top: 138px; left: 4px;   right: auto; width: 252px;
  transform: rotate(-7.6deg) translate3d(2px,2px,-155px); }
.hero-product .pg-farr   { top: 138px; right: 4px;  left: auto;  width: 252px;
  transform: rotate(7.4deg) translate3d(-2px,2px,-125px); }
.hero-product .fan-stage::after { top: 30px; width: 378px; }

@media (hover: hover) {
  .hero-product:hover .pg-analys { transform: rotate(-4.4deg) translate3d(2px,0,-55px); }
  .hero-product:hover .pg-brief  { transform: rotate(4.6deg)  translate3d(-2px,0,-20px); }
  .hero-product:hover .pg-farl   { transform: rotate(-9.4deg) translate3d(-6px,4px,-175px); }
  .hero-product:hover .pg-farr   { transform: rotate(9.2deg)  translate3d(6px,4px,-145px); }
}

/* identification plate — inside the mat, inset from its edge */
.hero-product .fan-cap {
  position: static; transform: none; bottom: auto; left: auto;
  margin: 1.125rem 0 0 82px; width: auto; max-width: 376px;
  padding: .7rem .95rem .75rem;
}
.hero-product .fan-cap span { font-size: .6875rem; }

/* ═══════════════════════════════════════════════════════════════════
   v47 — THE OBJECT IS NOW PROPORTIONAL, NOT PIXEL-PINNED.

   Every version of this mockup has been a table of fixed pixel widths
   restated at each breakpoint, and every version has drifted: a rule
   declared outside a media query silently beat the responsive table
   below it (twice), and the geometry came out identical at 1440, 1100
   and 834 despite three different stage widths. Re-expressed as
   percentages of the stage with an aspect-ratio instead of a
   min-height, so one set of numbers governs every width and the
   composition cannot fall out of proportion again.
   ═══════════════════════════════════════════════════════════════════ */
.hero-product .fan { min-height: 0; aspect-ratio: 541 / 548; }
.hero-product::after { inset: 0 11.09% 0 11.09%; }

.hero-product .pg-cover  { width: 69.87%; top: 5.47%;  left: 50%; right: auto; }
.hero-product .pg-analys { width: 55.45%; top: 17.52%; left: 2.59%;  right: auto; }
.hero-product .pg-brief  { width: 55.45%; top: 17.52%; right: 2.59%; left: auto; }
.hero-product .pg-farl   { width: 46.58%; top: 25.18%; left: 0.74%;  right: auto; }
.hero-product .pg-farr   { width: 46.58%; top: 25.18%; right: 0.74%; left: auto; }
.hero-product .fan-stage::after { width: 69.87%; top: 5.47%; }

.hero-product .fan-cap { margin: 1.125rem 0 0 15%; max-width: 70%; }

/* Below 900 the figure is anchored to the text rail rather than
   centred, so the stack's leftward bleed would eat the page margin.
   The outer sheets tuck in; the composition stays on the rail. */
@media (max-width: 900px) {
  .hero-product .pg-farl { left: 5.2%; }
  .hero-product .pg-farr { right: 5.2%; }
}

/* A margin that is right at 541px is wasteful at 345px: the mat was
   eating 77px of a phone-width stage, squeezing the plate to 241px and
   breaking both its lines. Margins tighten as the object shrinks. */
@media (max-width: 560px) {
  .hero-product::after { inset: 0 6% 0 6%; outline-offset: -6px; }
  .hero-product .fan-cap { margin-left: 9.5%; max-width: 81%; padding: .65rem .85rem .7rem; }
  .hero-product .fan-cap b { font-size: .5938rem; letter-spacing: .11em; }
  .hero-product .fan-cap span { font-size: .6563rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   v48 — HERO GROUND, back toward brand black.

   The hero sat on #090e1a, a navy that the glow, the mat gradient and
   the ambient pool all pushed further blue until the field itself read
   as a colour rather than as ground. Brand black is #0A0A0A; the hero
   now sits a half-step off it, and the light sources are dialled back
   so the blue reads as light falling on the object rather than as the
   backdrop's own hue.
   ═══════════════════════════════════════════════════════════════════ */
.hero { background: #06070B; }
.hero-glow { opacity: .34; }
.hero-ring { opacity: .018; }
.hero-product::before {
  background: radial-gradient(50% 50% at 50% 42%, rgba(111,168,232,.085), rgba(43,63,204,.03) 55%, transparent 75%);
}
.hero-product::after {
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(43,63,204,.24), rgba(43,63,204,.05) 62%, transparent 88%),
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(111,168,232,.038) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(111,168,232,.038) 39px 40px),
    linear-gradient(180deg, rgba(43,63,204,.085), rgba(43,63,204,.015));
  border-color: rgba(111,168,232,.22);
}
@media (max-width: 560px) {
  .hero-product::after {
    background:
      radial-gradient(60% 40% at 50% 30%, rgba(43,63,204,.22), rgba(43,63,204,.045) 62%, transparent 88%),
      linear-gradient(180deg, rgba(43,63,204,.08), rgba(43,63,204,.015));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v48 — CLASSIFICATION LEGEND, grading restored.

   site.css carries the six-step ramp (.pill.p2 … .p6), but
   editorial.css line 60 sets `.legend .pill { background: transparent;
   border: 1px solid #647d9f }` at equal specificity and later in the
   cascade — so all six chips rendered identically and the encoding was
   invisible. Re-declared at .legend .pill.pN so the ramp survives, and
   the legend copy now states what the ramp actually encodes: the first
   four describe how directly the record supports an assertion, the
   last two are process states.
   ═══════════════════════════════════════════════════════════════════ */
.legend .pill {
  font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .8rem; border-radius: 2px;
  background: var(--ttg-ice-blue); border: 1px solid var(--ttg-ice-blue);
  color: var(--ttg-deep-navy);
}
.legend .pill.p2 { background: rgba(111,168,232,.72); border-color: rgba(111,168,232,.72); color: var(--ttg-deep-navy); }
.legend .pill.p3 { background: rgba(111,168,232,.46); border-color: rgba(111,168,232,.58); color: #fff; }
.legend .pill.p4 { background: rgba(111,168,232,.24); border-color: rgba(111,168,232,.50); color: #fff; }
.legend .pill.p5 { background: transparent; border-color: rgba(111,168,232,.62); color: var(--ttg-ice-blue); }
.legend .pill.p6 { background: transparent; border-style: dashed; border-color: rgba(111,168,232,.55); color: var(--ttg-ice-blue); }

/* ═══════════════════════════════════════════════════════════════════
   v48 — THE PRINCIPAL: give the quote a container.

   The left column was a vertical run of items separated only by
   hairlines — portrait, name, role, tagline, rule, quote, attribution,
   link, then a bordered film card. The one piece of third-party
   evidence on the homepage was the least distinguished thing in its
   own column, and the film card's box was the only object competing
   for that role. The quote becomes the object; the film card gives up
   its border and becomes a plain row under a divider.
   ═══════════════════════════════════════════════════════════════════ */
#principal .principal-observation {
  margin-top: 1.625rem; padding: 1.25rem 1.25rem 1.125rem;
  background: var(--ttg-tint-blue);
  border: 1px solid var(--ttg-divider);
  border-left: 3px solid var(--ttg-mck-blue);
  border-radius: 0 3px 3px 0;
}
#principal .principal-observation p {
  font-size: 1.0625rem; line-height: 1.5; font-weight: 500;
  letter-spacing: -.012em; color: var(--ttg-ink);
}
#principal .principal-observation footer { margin-top: .65rem; color: var(--ttg-caption); }
#principal .principal-observation a { margin-top: .75rem; }

#principal .film {
  border: 0; border-top: 1px solid var(--hair-dark); border-radius: 0;
  margin-top: 1.5rem; padding: 1.125rem 0 0;
}
#principal .film:hover { border-color: var(--hair-dark); border-top-color: var(--ttg-mck-blue); transform: none; }
#principal .film:hover .film-t { color: var(--ttg-mck-blue); }
#principal .film-t { transition: color .2s; }

/* ═══════════════════════════════════════════════════════════════════
   v49 — AESTHETIC PASS
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Standard-of-work strip ─────────────────────────────────────
   It sat on pure white directly beneath a black hero and directly
   above a white section, so it read as an orphaned band rather than a
   unit. A wash tint and a rule top and bottom give it a body.      */
.strip {
  background: var(--ttg-tint-blue);
  border-top: 1px solid var(--ttg-divider);
  border-bottom: 1px solid var(--ttg-divider);
}
.strip .strip-item:nth-child(n) { border-right-color: rgba(6,20,82,.13); }

/* ── 2. Founder film card: bigger frame, text moved over ──────────── */
#principal .film { grid-template-columns: 132px 1fr; gap: 1rem; }
#principal .film-play span { width: 32px; height: 32px; }
#principal .film-play svg { width: 12px; height: 12px; }
#principal .film-t { font-size: .875rem; }
#principal .film-s { font-size: .71875rem; }
@media (max-width: 900px) { #principal .film { grid-template-columns: 160px 1fr; } }
@media (max-width: 560px) { #principal .film { grid-template-columns: 1fr; }
  #principal .film-thumb { max-width: 240px; } }

/* ── 3. Intake panel matched to the film beside it ─────────────────
   The video is a black box with a 10%-white hairline; the panel was a
   near-transparent box with an 18%-white border, so the pair read as
   two unrelated objects. Same ground, same edge — now siblings.    */
.panel {
  background: rgba(0,0,0,.30);
  border: 1px solid var(--hair-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* ── 4. Intake contact strip ───────────────────────────────────────
   Cells had top padding but no bottom padding and the band had no
   closing rule, so the four column dividers ran past the short cells
   and stopped in open space. Closed top and bottom; the dividers now
   run between two rules instead of trailing off.                   */
.meta { border-bottom: 1px solid var(--hair-light); }
.meta div { padding: 1.5rem 1.5rem 1.5rem 0; }
.meta div + div { padding-left: 1.5rem; }
@media (max-width: 900px) {
  .meta div:nth-child(1), .meta div:nth-child(2) { border-bottom: 1px solid var(--hair-light); }
}
@media (max-width: 520px) {
  .meta div { padding: 1.125rem 0; border-bottom: 1px solid var(--hair-light); }
  .meta div:last-child { border-bottom: 0; }
}

/* ── 7. Counsel observations lede ──────────────────────────────────
   At .9375rem it sat below body size and read as a caption rather
   than the section's opening statement.                            */
.co-head .lede { font-size: 1.0625rem; line-height: 1.6; color: #c8d4e6; }

/* ── 5. About hero, recomposed ─────────────────────────────────────
   Measured cause of "disjointed": every element in this hero sat on
   the 136px rail — eyebrow, headline, sub, closing strip — except the
   film, which `max-width:960px; margin:auto` centred at 240px. One
   centred axis inside a left-aligned composition, the same defect the
   homepage had. The film returns to the rail.

   The right column was also dead: a single 44ch line bottom-aligned
   against a four-line headline, leaving most of the column empty. It
   now carries the page's own index, which is what a reader arriving
   at an About page actually wants — and it earns the space.        */
.ah-film { max-width: none; margin-left: 0; margin-right: 0; }
.ah-top { align-items: start; row-gap: 2.5rem; }
.ah .ah-sub { margin-top: 1.5rem; max-width: 46ch; }

.ah-index { border-left: 1px solid var(--hair-light); padding-left: 2rem; }
.ah-index .label { display: block; margin-bottom: 1.125rem; color: var(--ttg-ice-blue); }
.ah-index ol { list-style: none; margin: 0; padding: 0; }
.ah-index li + li { border-top: 1px solid rgba(255,255,255,.07); }
.ah-index a {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .6rem 0; text-decoration: none;
  font-size: .9375rem; font-weight: 500; letter-spacing: -.01em;
  color: rgba(255,255,255,.72); transition: color .2s var(--ease);
}
.ah-index a i {
  font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .14em;
  color: rgba(255,255,255,.3); transition: color .2s var(--ease);
}
.ah-index a:hover, .ah-index a:focus-visible { color: #fff; }
.ah-index a:hover i, .ah-index a:focus-visible i { color: var(--ttg-ice-blue); }

/* film caption becomes a plate, matching the report captions elsewhere */
.ah-frame { border-color: var(--hair-light); }
.ah-meta {
  display: block; padding: .95rem 1.15rem 1rem;
  background: rgba(8,10,18,.94);
  border: 1px solid rgba(255,255,255,.13);
  border-top: 2px solid var(--ttg-mck-blue);
  max-width: 560px; margin-top: 1.125rem;
}
.ah-meta .label { display: block; margin-bottom: .3rem; color: var(--ttg-ice-blue); white-space: normal; }
.ah-meta p { font-size: .78125rem; line-height: 1.55; color: rgba(255,255,255,.6); max-width: none; }

@media (max-width: 1000px) {
  .ah-index { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair-light); padding-top: 1.5rem; }
}
@media (max-width: 700px) {
  .ah-meta { max-width: none; }
}

/* Full-rail the film made it 1168×657 — it swallowed the page. As an
   editorial figure instead: frame on the rail across two thirds, its
   caption plate beside it in the remaining third. Still one axis. */
.ah-film {
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  column-gap: var(--col-gap); align-items: start;
}
.ah-meta { margin-top: 0; max-width: none; }
@media (max-width: 900px) {
  .ah-film { grid-template-columns: 1fr; row-gap: 1.125rem; }
}
/* defensive: site.css styles the bare `nav` element for the site header,
   so any other nav landmark inherits its fixed positioning and ground */
.ah-index { position: static; background: none; box-shadow: none; height: auto; }

/* The side caption left ~430px of empty ground beneath it. The closing
   CTA — previously a separate full-width strip below the film — moves
   into that column, which fills the void and removes a stacked row. */
.ah-aside { display: flex; flex-direction: column; gap: 1.5rem; }
.ah-cta {
  border-top: 1px solid var(--hair-light); padding-top: 1.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem;
}
.ah-cta span {
  font-size: .9375rem; font-weight: 500; line-height: 1.5;
  color: rgba(255,255,255,.8); letter-spacing: -.01em;
}
.ah { padding-bottom: clamp(3rem,6vw,5rem); }
@media (max-width: 900px) {
  .ah-cta { border-top: 0; padding-top: 0; }
  .ah-aside { gap: 1.25rem; }
}

/* The real cause of the ragged lines: site.css uses `.meta div + div`,
   which is a DESCENDANT selector — so it matched not only the four
   columns but also every `.v` value div that follows a `.k` label div
   inside them. Each cell was drawing a second, shorter rule at its own
   left edge and indenting its value 24px past its label. Scoped to
   direct children; the value returns to the label's edge. */
.meta .v { border-left: 0; padding-left: 0; }
.meta > div + div { padding-left: 1.5rem; border-left: 1px solid var(--hair-light); }
.meta > div:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 900px) { .meta > div:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 520px) { .meta > div { border-left: 0 !important; padding-left: 0 !important; } }
/* ...and my own padding rule above repeated the same mistake: `.meta div`
   also matched `.k`, giving a 10px label 24px of vertical padding and a
   64px box. Scoped, and the inner elements reset. */
.meta > div { padding: 1.5rem 1.5rem 1.5rem 0; }
.meta .k, .meta .v { padding: 0; }
.meta .k { margin-bottom: .45rem; }

/* ── WCAG 2.5.8 AA: standalone links to a 24px target ──────────────
   These are all block-level "go here" links rather than links inside a
   sentence, so the inline-in-prose exemption does not apply to them.
   Height only — no visual change to the rule or the type.          */
.link-arrow,
.back-link,
.article-read-link,
.principal-observation a,
.co-more a,
.ft-legal a,
.fine a {
  display: inline-flex; align-items: center;
  min-height: 24px; gap: .4rem;
}

/* ═══════════════════════════════════════════════════════════════════
   v50 — ABOUT HERO, rebuilt as a title page.

   The live hero is centred — eyebrow, statement, sub, then the film —
   and that symmetry is the right instinct for a page whose job is to
   establish who stands behind the work. This keeps that structure and
   raises it: a letterhead rule over the eyebrow, the film mounted in
   the same matted treatment the homepage uses for the report, a
   four-fact credential bar so authority lands before the reader
   scrolls, and the CTA closing the block.
   ═══════════════════════════════════════════════════════════════════ */
.ah { background: #06070B; padding: clamp(3rem,6vw,4.75rem) 0 clamp(3.5rem,7vw,5.5rem); }

/* ── title block ── */
.ah-head { text-align: center; max-width: 960px; margin: 0 auto; }
.ah-rule { display: flex; align-items: center; gap: 1.25rem; margin-bottom: clamp(1.75rem,3.5vw,2.5rem); }
.ah-rule::before, .ah-rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(111,168,232,.30));
}
.ah-rule::after { background: linear-gradient(to left, transparent, rgba(111,168,232,.30)); }
.ah-rule .eyebrow { margin: 0; white-space: nowrap; }

.ah .display.ah-copy {
  max-width: 21ch; margin: 0 auto; text-wrap: balance;
  font-size: clamp(2.5rem,5vw,4.15rem); line-height: 1.06; letter-spacing: -.045em; font-weight: 650;
}
.ah .ah-sub {
  max-width: 54ch; margin: clamp(1.5rem,3vw,2rem) auto 0; text-align: center;
  font-size: clamp(1rem,1.35vw,1.125rem); line-height: 1.65; color: #c2cbdc; font-weight: 400;
}

/* ── the film, matted like the report on the homepage ── */
.ah-stage {
  position: relative; max-width: 1040px;
  margin: clamp(2.75rem,5.5vw,4rem) auto 0;
  padding: clamp(1rem,1.8vw,1.5rem);
  background:
    radial-gradient(62% 48% at 50% 26%, rgba(43,63,204,.26), rgba(43,63,204,.05) 62%, transparent 88%),
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(111,168,232,.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(111,168,232,.04) 39px 40px),
    linear-gradient(180deg, rgba(43,63,204,.09), rgba(43,63,204,.015));
  border: 1px solid rgba(111,168,232,.22);
  outline: 1px solid rgba(43,63,204,.18); outline-offset: -9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.35);
}
.ah-stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -6%; right: -6%; top: -8%; bottom: -12%;
  background: radial-gradient(50% 50% at 50% 45%, rgba(111,168,232,.10), rgba(43,63,204,.035) 55%, transparent 76%);
  filter: blur(22px);
}
.ah-frame {
  position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden;
  border: 0; border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 34px 74px -26px rgba(0,0,0,.8);
}
.ah-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ah-frame::before { content: none; }

/* instrumentation bar inside the mat */
.ah-bar {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: .5rem 1.5rem; margin-top: clamp(.9rem,1.6vw,1.25rem);
  padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.12);
  text-align: left;
}
.ah-bar-k {
  font-size: .625rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ttg-ice-blue); white-space: nowrap;
}
.ah-bar-v { font-size: .8125rem; line-height: 1.55; color: rgba(255,255,255,.58); }

/* ── credential bar ── */
.ah-creds {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  margin: clamp(2.5rem,5vw,3.5rem) 0 0;
  border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light);
}
.ah-creds > div { padding: 1.5rem 1.5rem 1.5rem 0; }
.ah-creds > div + div { padding-left: 1.5rem; border-left: 1px solid var(--hair-light); }
.ah-creds dt {
  font-size: .625rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ttg-ice-blue); margin: 0 0 .45rem;
}
.ah-creds dd { margin: 0; font-size: .875rem; line-height: 1.55; color: rgba(255,255,255,.74); }

/* ── closing CTA ── */
.ah-close {
  margin-top: clamp(2rem,4vw,2.75rem);
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem 2rem; flex-wrap: wrap; text-align: center;
}
.ah-close span {
  font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.82);
}

@media (max-width: 900px) {
  .ah-creds { grid-template-columns: 1fr 1fr; }
  .ah-creds > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ah-creds > div:nth-child(1), .ah-creds > div:nth-child(2) { border-bottom: 1px solid var(--hair-light); }
  .ah-bar { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ah-creds { grid-template-columns: 1fr; }
  .ah-creds > div { border-left: 0 !important; padding: 1.125rem 0; border-bottom: 1px solid var(--hair-light); }
  .ah-creds > div:last-child { border-bottom: 0; }
  .ah-rule::before, .ah-rule::after { display: none; }
  .ah-rule { justify-content: center; }
  .ah-close { flex-direction: column; gap: 1.125rem; }
}

/* v50.1 — the mat reads busier here than on the homepage, where most
   of it hides behind the report stack. On a bare 16:9 rectangle the
   grid and the inner outline are fully exposed, so both come down and
   the object tightens: less texture, less border, more film. */
.ah-stage {
  max-width: 980px; padding: clamp(.75rem,1.3vw,1.125rem);
  background:
    radial-gradient(64% 50% at 50% 22%, rgba(43,63,204,.22), rgba(43,63,204,.04) 62%, transparent 86%),
    repeating-linear-gradient(0deg,  transparent 0 47px, rgba(111,168,232,.022) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(111,168,232,.022) 47px 48px),
    linear-gradient(180deg, rgba(43,63,204,.07), rgba(43,63,204,.012));
  border: 1px solid rgba(111,168,232,.17);
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(0,0,0,.4);
}
.ah .display.ah-copy { font-size: clamp(2.4rem,4.4vw,3.7rem); max-width: 22ch; }
.ah-bar { padding-top: .8rem; margin-top: clamp(.75rem,1.3vw,1.05rem); }
.ah-bar-v { font-size: .78125rem; }