@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Public+Sans:wght@400;500;600;700&display=swap');

/* ==================================================================
   TIM ARMSTRONG
   Near-black ground, one warm light falling from the top right, gold
   as the only accent. Editorial serif for the voice, grotesque for the
   interface. The structure is a typeset document; the lighting is not.

   One container width. Four breakpoints. One accent.
   ================================================================== */

:root{
  /* ---- ground: near-black, warm, not navy -------------------------- */
  --paper:#0A0B0D;          /* field                                   */
  --paper-raised:#14161A;   /* cards sit above the field               */
  --paper-sunken:#101217;   /* alternate bands sit below it            */
  --rule:rgba(212,175,106,.16);      /* hairlines carry the gold       */
  --rule-strong:rgba(212,175,106,.36);

  /* ---- light ------------------------------------------------------- */
  --ink:#F5F1E8;            /* 17.5:1 on ground, 16.1:1 on a card      */
  --ink-2:#C9C3B6;          /* 11.4:1                                  */
  --ink-3:#9A958C;          /* 6.6:1 on ground, 6.1:1 on a card        */

  /* ---- accent: warm gold, the light source ------------------------- */
  --gold:#D4AF6A;           /* 9.5:1 on ground — links, numerals       */
  --gold-hi:#EBCB90;        /* hover                                   */
  --gold-deep:#8A6A2F;      /* filled-button ground under dark text    */
  --gold-wash:rgba(212,175,106,.10);
  --brass:var(--gold);
  --brass-ink:var(--gold);

  /* legacy names still referenced further down the sheet */
  --navy:var(--gold);
  --navy-deep:var(--gold-hi);
  --navy-tint:var(--gold-wash);

  /* ---- feature band ------------------------------------------------ */
  --deep:#06070A;
  --deep-2:#15171C;
  --deep-rule:rgba(212,175,106,.20);
  --deep-ink:#F5F1E8;
  --deep-ink-2:#B8B2A6;

  /* ---- measure ---------------------------------------------------- */
  --wrap:1180px;
  --measure:68ch;
  --gut:clamp(20px,4vw,40px);

  /* ---- craft ------------------------------------------------------ */
  --r:4px;                  /* paper has corners, not pills            */
  --r-lg:8px;
  --sh-1:0 1px 2px rgba(0,0,0,.55), 0 8px 22px -14px rgba(0,0,0,.9);
  --sh-2:0 2px 6px rgba(0,0,0,.6), 0 26px 60px -26px rgba(0,0,0,.95);
  --ease:cubic-bezier(.22,.61,.36,1);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  color-scheme:dark;

  /* ---- compatibility aliases --------------------------------------
     The HTML carries 7,579 inline style attributes, and 5,123 of them
     name three tokens from the old dark palette. Aliasing costs three
     lines; rewriting them would have meant editing every page. They are
     re-pointed inside .band-deep so they invert with the band. */
  --text-muted:var(--ink-3);        /* 4,414 references */
  --s-200:var(--ink-3);             /*   620 references */
  --text-secondary:var(--ink-2);    /*    89 references */
}

*{box-sizing:border-box}
*::selection{background:var(--gold);color:#0A0B0D}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;          /* 17px — above the 16px floor        */
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* One warm light, top-right, falling off fast. Not a texture, not a
   gradient mesh: a single source, which is what the reference does. */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(90ch 60ch at 82% -10%, rgba(212,175,106,.13), transparent 62%),
    radial-gradient(70ch 50ch at 8% 6%, rgba(212,175,106,.05), transparent 60%);
}
body>*{position:relative;z-index:1}

img{max-width:100%;height:auto}

/* ==================================================================
   TYPOGRAPHY
   h1 / h2 / h3 used to measure 39.2 / 37.6 / 16.8px — two headings
   4% apart and a third barely above body copy. Real steps now.
   ================================================================== */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{font-size:clamp(2.5rem,1.5rem + 3.1vw,4.25rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.85rem,1.3rem + 1.75vw,2.85rem)}
h3{font-size:clamp(1.1rem,1.02rem + .35vw,1.3rem);line-height:1.25;letter-spacing:-.005em}
h4{font-size:1.0625rem;font-family:var(--sans);font-weight:700;letter-spacing:.005em}

p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--navy-deep)}

strong,b{font-weight:600;color:var(--ink)}

/* --- .grad (690 uses) --------------------------------------------
   Was a gradient clipped into the text — the single loudest "generated
   by AI" signal on the page, and the reason 22 headings computed to
   color:transparent. Now it is simply the accent voice. */
.grad,.grad-deep{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:currentColor;
  color:var(--navy);
}

/* --- .carve (676 uses) -------------------------------------------
   Was an embossed text-shadow. Ink does not emboss. */
.carve{text-shadow:none;color:inherit}

.kicker{
  font-family:var(--sans);
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-ink);
  margin:0 0 .9rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.08rem + .5vw,1.45rem);
  line-height:1.5;
  color:var(--ink-2);
  font-weight:400;
  max-width:var(--measure);
}

.sec-head{margin:0 0 clamp(1.8rem,3vw,2.75rem);max-width:var(--measure)}
.sec-head h2{margin-bottom:.45em}
.sec-head p{color:var(--ink-3)}

/* The drifting watermark word behind section heads is gone. It was
   decoration that competed with the heading it sat behind. */
.sec-head[data-watermark]::before{content:none}
.sec-head[data-watermark]{position:static}
.sec-head[data-watermark]>*{position:static}

/* ==================================================================
   LAYOUT — one container, three breakpoints
   The old sheet carried twelve max-widths (1400/1180/1100/1024/1023/
   980/900/768/760/700/640/420) and two container widths (1280/992).
   ================================================================== */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

section{
  padding-block:clamp(3rem,5vw,5rem);
  position:relative;
}

.band{background:var(--paper-sunken);border-block:1px solid var(--rule)}

/* The inverted band. Used for rhythm, not for the whole site. */
.band-deep{
  background:var(--deep);
  color:var(--deep-ink);
  border-block:1px solid var(--deep-2);
  /* the aliases invert with the band */
  --text-muted:var(--deep-ink-2);
  --s-200:var(--deep-ink-2);
  --text-secondary:var(--deep-ink-2);
}
.band-deep h1,.band-deep h2,.band-deep h3,.band-deep h4{color:var(--deep-ink)}
.band-deep p,.band-deep li{color:var(--deep-ink-2)}
.band-deep .lede{color:var(--deep-ink-2)}
.band-deep .grad,.band-deep .grad-deep{color:var(--brass)}
.band-deep .kicker{color:var(--brass)}
.band-deep a{color:#fff}
.band-deep .card{
  background:var(--deep-2);
  border-color:var(--deep-rule);
  box-shadow:none;
}
.band-deep .card h3{color:var(--deep-ink)}
.band-deep .card p{color:var(--deep-ink-2)}
.band-deep .metric{background:transparent;border-color:var(--deep-rule)}
.band-deep .metric dt{color:#fff}
.band-deep .metric dd{color:var(--deep-ink-2)}
.band-deep .pill,.band-deep .tag{
  background:rgba(255,255,255,.06);
  border-color:var(--deep-rule);
  color:var(--deep-ink-2);
}
.band-deep ul.bul li::before{background:var(--brass)}
.band-deep .note{background:var(--deep-2);border-color:var(--deep-rule)}
.band-deep .note b{color:#fff}

.grid{display:grid;gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid>*{min-width:0}

/* Nine of the twenty-one grids on the homepage ended a row with empty
   slots: one card alone in a three-column row, and so on. The trailing
   items now span whatever is left, so a row is never part-built.
   These are scoped to the widths that actually use these column counts.
   Left unscoped they outrank the reset inside the media query on
   specificity, and a two-column row ends up with one tile spanning
   both and its neighbour stranded alone. */
@media(min-width:1025px){
  .g2>*:nth-child(2n+1):last-child{grid-column:span 2}

  .g3>*:nth-child(3n+1):last-child{grid-column:span 3}
  .g3>*:nth-child(3n+2):last-child{grid-column:span 2}

  .g4>*:nth-child(4n+1):last-child{grid-column:span 4}
  .g4>*:nth-child(4n+2):last-child{grid-column:span 3}
  .g4>*:nth-child(4n+3):last-child{grid-column:span 2}

  .g5>*:nth-child(5n+1):last-child{grid-column:span 5}
  .g5>*:nth-child(5n+2):last-child{grid-column:span 4}
  .g5>*:nth-child(5n+3):last-child{grid-column:span 3}
  .g5>*:nth-child(5n+4):last-child{grid-column:span 2}
}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
}

/* ==================================================================
   HEADER
   ================================================================== */

header{
  position:sticky;top:0;z-index:30;
  background:rgba(10,11,13,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
}

/* Masthead. The wordmark opens the top line, a hairline carries it
   across, the phone number closes it. The nav sits on its own line
   underneath at every width, not just below 1024, so the top line is
   never competing with seven links for the same space. */
.hrow{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:.35rem 1rem;
  min-height:0;
  padding-block:.55rem;
}

.brand{
  order:1;
  display:flex;align-items:center;gap:.75rem;
  text-decoration:none;flex:none;
  min-width:0;
  min-height:44px;   /* the logo link measured 38px, 6px under the target */
}

/* The rule that carries the wordmark across to the phone number. It
   eats half the flex gap on each side so it reads as one continuous
   line rather than a floating dash. */
.hrow::after{
  content:"";
  order:2;
  flex:1 1 2rem;
  min-width:1.5rem;
  height:1px;
  align-self:center;
  margin-inline:-.35rem;
  background:linear-gradient(90deg,
    rgba(212,175,106,.55) 0%,
    rgba(212,175,106,.28) 55%,
    rgba(212,175,106,.55) 100%);
}

/* The shield mark. The "TA" text stays in the markup so screen readers
   and the twelve translated builds still get it; it is painted
   transparent rather than pushed off-canvas, because a negative offset
   is what gave the RTL pages a 10,000px scroll. */
.mark{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  background:url("/images/ta-mark.webp") center/contain no-repeat;
  border-radius:0;
  color:transparent;
  font-family:var(--serif);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
}
@media (min-resolution:2dppx){
  .mark{background-image:url("/images/ta-mark@3x.png")}
}

.bname{
  font-family:var(--serif);
  font-size:clamp(1.35rem,1.02rem + 1.35vw,2.15rem);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.1;
  display:block;
  white-space:nowrap;
}

/* The 8px capability micro-line under the wordmark was unreadable and
   duplicated the nav directly beside it. Hiding .bsub alone was not
   enough: the <br> before it still generated an empty line box, so
   .brand measured 61px tall while the name occupied only 33px of it.
   The wordmark centred at y=25 while everything else centred at y=39,
   which is why the rule read as sitting too low. */
.bsub{display:none}
.brand br{display:none}
.brand>span{display:flex;align-items:center;min-width:0}

nav.top{
  order:4;
  width:100%;
  display:flex;align-items:center;gap:0 .15rem;
  margin-left:0;
  padding-top:.3rem;
  border-top:1px solid var(--rule);
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
nav.top::-webkit-scrollbar{display:none}
nav.top a{
  display:inline-flex;align-items:center;
  white-space:nowrap;
  min-height:44px;
  padding:0 .7rem;
  font-size:.9375rem;
  font-weight:500;
  color:var(--ink-2);
  text-decoration:none;
  border-radius:var(--r);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
nav.top a:hover{color:var(--navy);background:var(--navy-tint)}

header .btn-primary{order:3;margin-left:0;flex:none}

/* ==================================================================
   BUTTONS — every target clears 44px. 60 of 150 did not.
   ================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.65rem 1.15rem;
  font-family:var(--sans);
  font-size:.9375rem;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.005em;
  border-radius:var(--r);
  border:1px solid transparent;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.btn-primary{
  background:linear-gradient(160deg,var(--gold-hi),var(--gold));
  color:#0A0B0D;
  border-color:var(--gold-hi);
  box-shadow:var(--sh-1);
}
.btn-primary:hover{
  background:linear-gradient(160deg,#F4DCAA,var(--gold-hi));
  border-color:#F4DCAA;color:#0A0B0D;
}
.btn-primary:active{box-shadow:none}

.btn-ghost{
  background:rgba(212,175,106,.04);
  color:var(--gold);
  border-color:var(--rule-strong);
}
.btn-ghost:hover{background:var(--gold-wash);border-color:var(--gold)}

.btn-lg{min-height:48px;padding:.65rem 1.6rem;font-size:1rem}

.band-deep .btn-primary{background:#fff;color:var(--deep);border-color:#fff}
.band-deep .btn-primary:hover{background:var(--deep-ink);color:var(--deep)}
.band-deep .btn-ghost{color:#fff;border-color:var(--deep-rule)}
.band-deep .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:1.75rem 0 0}

.tlink{
  display:inline-flex;align-items:center;
  min-height:44px;
  font-size:.9375rem;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:1px;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.tlink:hover{color:var(--navy-deep);border-bottom-color:var(--navy)}
.band-deep .tlink{color:#fff;border-bottom-color:var(--deep-rule)}

.cta-note{
  margin:.85rem 0 0;
  font-size:.875rem;
  color:var(--ink-3);
  max-width:var(--measure);
}
.band-deep .cta-note{color:var(--deep-ink-2)}

/* ==================================================================
   HERO
   ================================================================== */

.hero{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  /* The photo sits at the top edge of the hero. With the stat strip
     removed the headline is first, so the top padding is trimmed to let
     it start on roughly the same line as the image. */
  padding-block:clamp(1.5rem,2.4vw,2.5rem) clamp(2.75rem,5.5vw,5rem);
  position:relative;
  overflow:hidden;
}
.hero::before{content:none}

/* .portrait is a sibling of .wrap and a direct child of .hero — a
   full-bleed layer, not a grid cell. .inner is the text column and it
   reserves the right side for the image rather than sitting beside it. */
.hero .inner{
  display:block;
  position:relative;
  z-index:2;
  max-width:none;
}
.hero .inner::before{content:none}

/* The prose block clears the portrait; the metric row runs the full
   width underneath it. Interior pages have no portrait, so the cap is
   scoped — otherwise their headlines ran seven lines down a half-empty
   page, which is the layout complaint in miniature. */
.hero .inner>h1{max-width:none}
.hero .inner>.eyebrow,
.hero .inner>.sub,
.hero .inner>.supp,
.hero .inner>.ctas,
.hero .inner>.cta-note,
.hero .inner>p{max-width:var(--measure)}

.hero:has(.portrait) .inner>.eyebrow,
.hero:has(.portrait) .inner>h1,
.hero:has(.portrait) .inner>.sub,
.hero:has(.portrait) .inner>.supp,
.hero:has(.portrait) .inner>.ctas,
.hero:has(.portrait) .inner>.cta-note,
.hero:has(.portrait) .inner>p{max-width:min(520px,46%)}

.hero .inner>.grid{max-width:none;margin-top:clamp(2rem,4vw,3.25rem)}

.hero h1{
  font-size:clamp(2.5rem,1.4rem + 3.4vw,4.5rem);
  margin:0 0 1rem;
  padding-top:.15em;
  max-width:none;
}
.hero h1 .name{display:block;color:var(--ink)}
.hero h1 .roles{
  display:block;
  font-family:var(--sans);
  font-size:clamp(1.05rem,.92rem + .55vw,1.35rem);
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--ink-2);
  margin-top:.85rem;
  text-wrap:pretty;
}
.hero h1 .roles .grad{color:var(--navy)}

.hero .sub{
  font-family:var(--serif);
  font-size:clamp(1.1rem,1.02rem + .38vw,1.3rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:var(--measure);
  margin:0 0 1.15em;
}
.hero .supp{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-3);
  max-width:var(--measure);
}

/* --- portrait ------------------------------------------------------
   The old sheet defined .portrait 17 times and .portrait img 13 times
   across ten consecutive media blocks. This is all of it. */
/* The source is 900x900. The panel is square so the frame is shown as
   shot — no crop, no zoom. */
.portrait{
  position:absolute;
  top:0;right:0;bottom:auto;
  width:min(60vw,1000px);
  aspect-ratio:1/1;
  margin:0;
  z-index:1;
  overflow:hidden;
  background:transparent;
  border:0;
  border-radius:0;
  /* Falls off into the ground on the left and the bottom instead of
     ending on a frame. Two masks intersected, so both edges fade. */
  /* The source is a tight square crop: the top of the head is clipped
     flat by the frame edge. Fading the crown out means it dissolves
     into the ground instead of ending on a hard cut line. The missing
     hair is not invented, it is just no longer announced. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 17%,#000 58%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 17%,#000 58%,transparent 100%);
          mask-composite:intersect;
}
.portrait img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 34%;
}
/* No fade. The portrait is shot on a near-black backdrop, so washing its
   left edge toward paper read as a rendering fault rather than a blend.
   It sits as a plate: hairline, brass rule, done. */
.portrait::before{content:none}
/* the gold bar under the photo is gone with the frame */
.portrait::after{content:none}

/* ==================================================================
   EYEBROW — the stat strip above the headline
   ================================================================== */

.eyebrow{
  display:flex;flex-wrap:wrap;
  gap:.5rem 1.5rem;
  margin:0 0 1.5rem;
  padding:0 0 1.15rem;
  border-bottom:1px solid var(--rule);
  list-style:none;
}
.eyebrow span{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.eyebrow span:last-child{color:var(--brass-ink)}

/* ==================================================================
   CARDS (1778 uses) — paper, not glass
   ================================================================== */

.card{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:clamp(1.15rem,1.8vw,1.6rem);
  box-shadow:var(--sh-1);
  background-image:linear-gradient(180deg,rgba(212,175,106,.05),transparent 42%);
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{box-shadow:var(--sh-2);border-color:var(--rule-strong);background-color:#171A1F}
.card>*{position:static}
.card::before,.card:hover::before{content:none}
.card[data-icon]::after{content:none}

/* Photography behind the box. The picture is the card's own background with a
   scrim over it, not an image sitting above the text. The scrim is heavy on
   purpose: this sheet reports zero contrast failures and a photograph behind
   body copy is the easiest way to lose that. --bg is set per card inline. */
.card--photo,.note.note--photo{
  background-image:
    linear-gradient(180deg,rgba(10,11,13,.88),rgba(10,11,13,.955)),
    var(--bg);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.card--photo:hover{
  background-image:
    linear-gradient(180deg,rgba(10,11,13,.82),rgba(10,11,13,.92)),
    var(--bg);
}
.note.note--photo{border-left:3px solid var(--gold)}

/* Full-bleed story band. The photograph runs to both screen edges; the text
   does not. Line length is capped at the same container as the rest of the
   site, because copy set 1900px wide is unreadable no matter how good the
   picture behind it is. No explicit 100vw width, so the scrollbar cannot
   push the page into horizontal overflow. */
.note.note--full{
  max-width:none;              /* p{max-width:var(--measure)} caps this otherwise */
  /* no negative vw margins: the parent section is already full width, and
     50vw counts the scrollbar, which is what pushed the page into
     horizontal overflow. Percentage padding resolves against this box. */
  padding-block:clamp(2rem,5vw,3.25rem);
  padding-inline:max(var(--gut),calc((100% - var(--measure)) / 2));
  border-inline:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  border-radius:0;
}
.card h3{margin:0 0 .5rem}
.card p{color:var(--ink-3);font-size:1rem;margin-bottom:.7em;max-width:none}
.card p:last-child{margin-bottom:0}
.card>.pill,.card>.tag{margin-top:.6rem}

/* Every per-section card recolour in the old sheet — eight for the deal
   cycle, five for roles, four apiece for proof and track record — is
   dropped. Twenty-eight nth-child rules said nothing the copy did not.
   No replacement rule here: restating .card's own background at higher
   specificity re-whitened cards inside .band-deep and put light text on
   white in 42 places. */

/* ==================================================================
   METRICS
   ================================================================== */

.metric{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-top:3px solid var(--brass);
  border-radius:var(--r-lg);
  padding:clamp(1.05rem,1.5vw,1.4rem);
  margin:0;
  box-shadow:var(--sh-1);
  background-image:none;
  transition:box-shadow .2s var(--ease);
}
.metric:hover{box-shadow:var(--sh-2)}
.metric>*{position:static}
.metric::before{content:none}
.metric dt{
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.3rem + .9vw,2.15rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 .45rem;
}
.metric dt.grad{color:var(--ink)}
/* Same specificity as .metric dt.grad and declared later, so the dark
   band wins on the dark band. Without this the numerals vanish. */
.band-deep .metric dt,
.band-deep .metric dt.grad{color:#fff}
.band-deep .card .grad,
.band-deep .card h3 .grad{color:var(--brass)}
.metric dd{
  margin:0;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ink-3);
}

/* Once a metric spans the full width, stacking the number above one
   line of label leaves a mostly empty card. Number and label sit on
   the same line instead. */
@media(max-width:1024px){
  .g5:has(>*:nth-child(odd):last-child) .metric,
  .g4:has(>*:nth-child(odd):last-child) .metric,
  .g3:has(>*:nth-child(odd):last-child) .metric{
    display:flex;align-items:baseline;gap:1rem 1.25rem;flex-wrap:wrap;
  }
  .g5:has(>*:nth-child(odd):last-child) .metric dt,
  .g4:has(>*:nth-child(odd):last-child) .metric dt,
  .g3:has(>*:nth-child(odd):last-child) .metric dt{margin:0;flex:none;min-width:7.5rem}
  .g5:has(>*:nth-child(odd):last-child) .metric dd,
  .g4:has(>*:nth-child(odd):last-child) .metric dd,
  .g3:has(>*:nth-child(odd):last-child) .metric dd{flex:1 1 14rem}
}

/* ==================================================================
   PILLS, TAGS, LISTS
   ================================================================== */

.pill,.tag{
  display:inline-flex;align-items:center;
  min-height:32px;
  padding:.3rem .7rem;
  font-size:.8125rem;
  font-weight:500;
  line-height:1.3;
  color:var(--ink-2);
  background:var(--paper-sunken);
  border:1px solid var(--rule);
  border-radius:var(--r);
}
.tag{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass-ink);
  background:transparent;
  border-color:var(--rule-strong);
}

ul.bul{margin:0 0 1.15em;padding:0;list-style:none;max-width:var(--measure)}
ul.bul li{
  position:relative;
  padding-left:1.4rem;
  margin-bottom:.6rem;
  color:var(--ink-2);
}
ul.bul li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:7px;height:7px;
  background:var(--gold);
  border-radius:1px;
}

/* ==================================================================
   DETAILS / ACCORDION
   ================================================================== */

details{
  border-bottom:1px solid var(--rule);
  padding:.25rem 0;
}
details summary{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  min-height:52px;
  padding:.6rem 0;
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"";
  flex:none;
  width:10px;height:10px;
  border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .2s var(--ease);
}
details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
details p{color:var(--ink-3);padding-bottom:1rem}

/* ==================================================================
   NOTES, FOOTER, FORMS
   ================================================================== */

.note{
  background:var(--gold-wash);
  border:1px solid var(--rule);
  border-left:3px solid var(--gold);
  border-radius:var(--r);
  padding:1.1rem 1.25rem;
  font-size:1rem;
  color:var(--ink-2);
}
.note b{color:var(--ink);font-weight:600}

.foot{
  padding-block:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--rule);
  background:var(--paper-sunken);
  font-size:.9375rem;
  color:var(--ink-3);
}
/* 46 footer links measured 20px tall — under even the 24px AA floor. */
.foot nav a{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding-inline:.55rem;
  margin-inline:-.55rem;
}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--navy)}

input,select,textarea{
  width:100%;
  min-height:44px;
  padding:.6rem .75rem;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  background:#0F1115;
  border:1px solid var(--rule-strong);
  border-radius:var(--r);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-wash);
  outline:none;
}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
textarea{min-height:132px;resize:vertical}
label{display:block;font-size:.875rem;font-weight:600;color:var(--ink-2);margin-bottom:.35rem}

/* ==================================================================
   FOCUS AND SKIP LINK
   ================================================================== */

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
  border-radius:var(--r);
}
:where(a,button,input,textarea,select,[tabindex]):focus:not(:focus-visible){outline:none}
.band-deep :where(a,button,[tabindex]):focus-visible{outline-color:#fff}

/* Carried over from the old sheet as left:-9999px. In an RTL document
   that is not off-screen, it is 9,999px of scrollable page: the two
   RTL builds measured a document 11,424px wide in a 1,425px viewport.
   Clipping is direction-agnostic. */
.skip-link{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:var(--gold);color:#0A0B0D;
  font-weight:600;
}
.skip-link:focus{
  position:fixed;
  inset-inline-start:0;top:0;
  z-index:100;
  width:auto;height:auto;
  margin:0;padding:.8rem 1.1rem;
  overflow:visible;
  clip-path:none;
  border-end-end-radius:var(--r);
}

/* ==================================================================
   MOBILE CALL BAR
   ================================================================== */

.callbar{display:none}

@media(max-width:768px){
  .callbar{
    position:fixed;left:0;right:0;bottom:0;
    z-index:40;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--rule);
    border-top:1px solid var(--rule);
    box-shadow:0 -6px 20px -12px rgba(20,22,26,.3);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;
    min-height:56px;
    font-size:.9375rem;font-weight:600;
    text-decoration:none;
  }
  .callbar-call{background:var(--gold);color:#0A0B0D}
  .callbar-msg{background:var(--paper-raised);color:var(--gold)}
  body{padding-bottom:57px}
}

/* ==================================================================
   FUNNEL
   ================================================================== */

/* Funnel and its stage labels sit side by side, each label joined to the
   funnel by a rule and a gold node. The label column is flex with
   space-between and inset top/bottom, so the seven items distribute
   across the seven rings without hard-coding a pixel per ring. */
.funnel-wrap{
  margin:0;background:transparent;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(240px,.95fr);
  align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);
}
.funnel{display:block;width:100%;height:auto}
.fn-t{fill:var(--ink);font-family:var(--serif);font-weight:600}
.fn-n{fill:var(--ink-3);font-family:var(--sans)}
.fn-band{fill:var(--navy)}
.fn-lip{fill:var(--navy-deep)}
.fn-label{fill:var(--ink-2);font-family:var(--sans);font-size:13px}
.band-deep .fn-t{fill:var(--deep-ink)}
.band-deep .fn-label{fill:var(--deep-ink-2)}
.band-deep .fn-band{fill:var(--brass)}
.band-deep .fn-lip{fill:var(--brass-ink)}

.js .fn-band,.js .fn-lip{opacity:0;transform:translateY(10px) scaleX(.96);transform-origin:center;
  transition:opacity .5s var(--ease), transform .6s var(--ease)}
.js .fn-label{opacity:0;transform:translateX(-10px);
  transition:opacity .5s var(--ease), transform .6s var(--ease)}
.reveal-in .fn-band,.reveal-in .fn-lip{opacity:1;transform:translateY(0) scaleX(1)}
.reveal-in .fn-label{opacity:1;transform:translateX(0)}

.fn-legend{
  margin:0;padding:4% 0;list-style:none;
  display:flex;flex-direction:column;justify-content:space-between;
  align-self:stretch;gap:.4rem;
}
.fn-legend li{position:relative;padding-left:3.1rem;font-size:.9375rem;color:var(--ink-3)}
/* the connector: a rule running back toward the funnel, then a node */
.fn-legend li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:2.35rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--rule-strong));
}
.fn-legend li::after{
  content:"";position:absolute;left:2.35rem;top:calc(.62em - 2px);
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
/* b and span were inline and ran together with no separator */
.fn-legend b{display:block;color:var(--ink);font-weight:600;line-height:1.3}
.fn-legend span{display:block;color:var(--ink-3);font-size:.875rem;line-height:1.35}

/* ==================================================================
   REVEAL — the only motion left
   ================================================================== */

.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .6s var(--ease)}
.js .reveal-in{opacity:1;transform:none}

/* The cursor-tracking spotlight is gone. It was a light source on a
   page that no longer has any. */
.spot::before,.spot:hover::before{content:none}

/* ==================================================================
   RESPONSIVE — four breakpoints, down from twelve
   ================================================================== */

@media(max-width:1024px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* An odd number of tiles in two columns reads as pairs with a
     straggler. Those stack in one column instead. Even counts keep
     two columns, where they fill the rows exactly. */
  .g3:has(>*:nth-child(odd):last-child),
  .g4:has(>*:nth-child(odd):last-child),
  .g5:has(>*:nth-child(odd):last-child){grid-template-columns:minmax(0,1fr)}
  .g2>*:nth-child(2n+1):last-child,
  .g3>*:nth-child(2n+1):last-child,
  .g4>*:nth-child(2n+1):last-child,
  .g5>*:nth-child(2n+1):last-child{grid-column:span 2}
  /* Same specificity as the span rule above, so it has to sit after it.
     Without this the last tile still claims two columns, and in a
     one-column grid that makes the browser invent a second implicit
     track: the row came out 328px + 550px instead of stacking. */
  .g3:has(>*:nth-child(odd):last-child)>*,
  .g4:has(>*:nth-child(odd):last-child)>*,
  .g5:has(>*:nth-child(odd):last-child)>*{grid-column:auto}
  /* Stay side by side here. The previous rule turned the portrait into
     a full-width strip at this width, which forced a 900x900 source
     into a 989x420 box and cropped the face off at the eyebrows. */
  .portrait{width:min(54%,580px)}
  .split{grid-template-columns:minmax(0,1fr)}
  nav.top a{padding:0 .55rem;font-size:.9rem}
}

/* Below this the two columns genuinely stop fitting, so the portrait
   becomes a contained square plate. Square, so it is never cropped. */
@media(max-width:900px){
  .hero{padding-block:0}
  .hero .inner{padding-block:clamp(1.75rem,5vw,2.75rem)}
  .hero:has(.portrait) .inner>.eyebrow,
  .hero:has(.portrait) .inner>h1,
  .hero:has(.portrait) .inner>.sub,
  .hero:has(.portrait) .inner>.supp,
  .hero:has(.portrait) .inner>.ctas,
  .hero:has(.portrait) .inner>.cta-note,
  .hero:has(.portrait) .inner>p{max-width:none}
  .portrait{
    position:relative;
    inset:auto;
    width:min(460px,86vw);
    aspect-ratio:1/1;
    height:auto;
    margin:clamp(1.5rem,4vw,2.25rem) auto 0;
    border:0;border-radius:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 62%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 62%,transparent 100%);
    -webkit-mask-composite:source-over;
            mask-composite:add;
  }
  .portrait img{object-position:50% 26%}
}

@media(max-width:768px){
  /* The fixed call bar already carries the phone number on these
     widths, so the header repeat costs a whole sticky row for nothing.
     Header goes from 175px (21.5% of a 812px screen) to two rows. */
  header .btn-primary{display:none}
  .hrow::after{flex:1 1 auto}
}

@media(max-width:860px){
  .funnel-wrap{grid-template-columns:minmax(0,1fr)}
  .fn-legend{padding:1.25rem 0 0;gap:.75rem}
}

@media(max-width:720px){
  .g2,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
  /* one column: no spans, or the last tile claims tracks that do not exist */
  .g2>*,.g3>*,.g4>*,.g5>*{grid-column:auto}
  .ctas{gap:.6rem}
  .ctas>.btn{width:100%}
  .ctas .tlink{width:100%}
  .eyebrow{gap:.4rem 1rem}
}

@media(max-width:480px){
  :root{--gut:18px}
  .btn-lg{min-height:48px;padding:.75rem 1.1rem;font-size:.9375rem}
  .hrow::after{display:none}
  .mark{width:38px;height:38px}
  .eyebrow span{font-size:.6875rem;letter-spacing:.1em}
}

/* ==================================================================
   RTL
   ================================================================== */

[dir="rtl"]{text-align:right}
[dir="rtl"] ul.bul li,[dir="rtl"] .fn-legend li{padding-left:0;padding-right:1.4rem}
[dir="rtl"] ul.bul li::before,[dir="rtl"] .fn-legend li::before{left:auto;right:0}
[dir="rtl"] .note{border-left:1px solid var(--rule);border-right:3px solid var(--navy)}
[dir="rtl"] nav.top{margin-left:0;margin-right:auto}
.force-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
[dir="rtl"] .force-ltr{text-align:left}
[dir="rtl"] .btn[href^="tel:"]{direction:ltr}

/* ==================================================================
   REDUCED MOTION
   ================================================================== */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal,.fn-band,.fn-lip,.fn-label{opacity:1!important;transform:none!important}
}

/* ==================================================================
   PRINT — a tombstone should print
   ================================================================== */

@media print{
  header,.callbar,.skip-link{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .band,.band-deep{background:#fff!important;color:#000!important;border:0}
  .band-deep *{color:#000!important}
  .card,.metric{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  .reveal{opacity:1!important;transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}