/* RSG site c5 (2026-10-07). Dark executive: warm graphite ground, one lighter panel, one champagne accent, ivory text in two lightness steps. Montserrat 500 and 600, self-hosted from fonts/; weight 400 is served by the 500 file (no 400 file on disk, no external font request). No cards (one exception: the contact card, Erin's pick 2026-10-11), no gradients, no imagery beyond the headshot, one motion (hero lines rise once on load). */

/* Type-2 "editorial contrast" (2026-10-11): five sizes for the whole site, set as tokens below and used by every text
   rule. Two big tiers (display, headline), one title tier, one body size, one small label size. Hierarchy comes from the
   jump between tiers, not from many near-equal steps. Two weights: 500 (reading) and 600 (labels, emphasis).
   Color jobs: ivory = what you read; stone = secondary text and site chrome; champagne = accent and signposts
   (the hero's turn, labels, step numerals, the contact clause, rules); graphite = text on champagne. */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/montserrat-500.woff") format("woff")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/montserrat-600.woff") format("woff")}

:root{
  --graphite:#161513;
  --panel:#232119;
  --ivory:#F2EEE6;
  --stone:#A8A295;
  --champagne:#D4B576;
  --champagne-hi:#E3CB90;
  --seam:rgba(242,238,230,.12);
  --sans:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --gutter:16px;
  --sec:112px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* the type scale: five sizes */
  --fs-display:clamp(44px,4.6vw,60px);   /* hero headline, page titles */
  --fs-headline:clamp(30px,3.4vw,46px);  /* section headlines, step numerals */
  --fs-title:21px;                       /* h3, leads, facts; 24px from 900px */
  --fs-body:17px;                        /* everything you read */
  --fs-label:13px;                       /* kickers, labels, nav, buttons, footer */
  --lh-display:1;
  --lh-headline:1.1;
  --lh-title:1.3;
  --lh-lead:1.5;
  --lh-body:1.65;
  --lh-label:1.45;
  --tr-display:-.03em;
  --tr-headline:-.02em;
  --tr-title:-.01em;
  --tr-label:.12em;
  --w-read:500;
  --w-strong:600;
  color-scheme:dark;
}
@media (min-width:900px){:root{--gutter:48px;--sec:168px;--fs-title:24px}}

*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;background:var(--graphite)}
body{margin:0;background:var(--graphite);color:var(--ivory);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--w-read);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--champagne);text-decoration-color:var(--champagne)}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:var(--w-strong)}
::selection{background:var(--champagne);color:var(--graphite)}

/* the label voice: small, semibold, tracked capitals (case set by CSS only; the words are typed in sentence case) */
.skip,.nav a,.pill,.kicker,.hero-lead .name,.who ul,.col .tag,.col .what,.ftr nav a,.tier .price small{
  font-size:var(--fs-label);line-height:var(--lh-label);font-weight:var(--w-strong);letter-spacing:var(--tr-label);text-transform:uppercase}

/* focus */
:focus{outline:none}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--champagne);color:var(--graphite);padding:10px 16px;border-radius:999px;text-decoration:none;z-index:50}
.skip:focus{top:12px}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(22,21,19,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--seam)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;min-height:76px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ivory);text-decoration:none;font-weight:var(--w-strong);font-size:var(--fs-body);line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.brand:hover{color:var(--ivory)}
.mark{width:36px;height:36px;flex:none}
.mk-body{stroke:var(--ivory)}.mk-flap{stroke:var(--champagne)}.mk-dot{fill:var(--champagne)}
.nav{display:flex;align-items:center;gap:8px 30px;flex-wrap:wrap}
.nav a{color:var(--stone);text-decoration:none}
.nav a:hover{color:var(--ivory)}
.nav a[aria-current=page]{color:var(--ivory)}
.nav a.pill,.nav a.pill:hover{color:var(--graphite)}
/* phone: the sticky header keeps only the brand and the pill, one row; the anchor links return from 600px up */
@media (max-width:599.98px){
  .nav a:not(.pill){display:none}
  .hdr-in{gap:12px;flex-wrap:nowrap;min-height:64px;padding-top:10px;padding-bottom:10px}
  .brand{gap:10px}
  .mark{width:32px;height:32px}
  .pill-sm{padding:11px 14px}
}

/* pill: the one CTA, champagne on graphite */
.pill{display:inline-flex;align-items:center;justify-content:center;background:var(--champagne);color:var(--graphite);line-height:1;padding:17px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .25s var(--ease)}
.pill:hover{background:var(--champagne-hi);color:var(--graphite)}
.pill-sm{padding:12px 20px}
.cta{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:44px}
.cta .addr{font-weight:var(--w-read);color:var(--ivory);text-decoration-color:var(--seam)}
.cta .addr:hover{color:var(--champagne);text-decoration-color:var(--champagne)}
.cta .li{font-weight:var(--w-read);color:var(--stone);text-decoration-color:var(--seam)}
.cta .li:hover{color:var(--champagne);text-decoration-color:var(--champagne)}

/* section shell */
section,.band{padding-top:var(--sec);padding-bottom:var(--sec)}
#inside{padding-bottom:calc(var(--sec) / 2)}
#services{padding-top:calc(var(--sec) / 2);padding-bottom:calc(var(--sec) / 2)}
#how{padding-top:calc(var(--sec) / 2);padding-bottom:calc(var(--sec) / 2)}
#contact{padding-top:calc(var(--sec) / 2);padding-bottom:calc(var(--sec) / 2)}
.kicker{display:block;color:var(--champagne);margin-bottom:24px;max-width:none}
h2{font-size:var(--fs-headline);line-height:var(--lh-headline);font-weight:var(--w-read);letter-spacing:var(--tr-headline);max-width:20ch;color:var(--ivory)}
h3{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--w-read);letter-spacing:var(--tr-title);color:var(--ivory)}
.lead{font-size:var(--fs-title);line-height:var(--lh-lead);letter-spacing:var(--tr-title);max-width:38ch}
.measure{max-width:60ch}
.muted{color:var(--stone)}

/* hero: the one bold moment. Photo hero (Jill, 2026-10-07): the sentence, then Erin's name, title and a two-sentence bio
   on the left; his portrait on the right at 380 x 480 (the file is 640 x 800, so it is only ever downscaled), black and
   white by default with a hairline champagne frame offset down and right. Below 960px (phones and small tablets) the
   sentence and the rule span the width and the portrait sits at 120 x 150 beside the name, title and bio, so the whole
   first screen at 390 x 844 holds the sentence, the name and the photo (measured in review/hero_render_probe.json). */
.hero{padding-top:48px;padding-bottom:clamp(80px,9vw,128px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:0 20px;align-items:start}
.hero-text{display:flex;flex-direction:column;min-width:0}
@media (max-width:959.98px){
  .hero-text{display:contents}
  .hero h1,.hero .rule{grid-column:1/-1}
  .hero .rule{margin-top:24px;margin-bottom:28px}
  .hero .hero-lead{grid-column:1;grid-row:3;margin-top:0}
  .hero .portrait{grid-column:2;grid-row:3;align-self:start}
}
.hero h1{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--w-read);letter-spacing:var(--tr-display);max-width:13ch;color:var(--ivory)}
.hero h1 .ln,.hero h1 .ln span{display:inline}
.hero h1 .gold{color:var(--champagne)}
@media (min-width:900px){
  .hero h1{max-width:none}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln span{display:block;padding-bottom:.08em}
}
/* side by side from 960px: a 300 x 380 portrait to 1179px, the full 380 x 480 from 1180px */
@media (min-width:960px){
  .hero{padding-top:clamp(72px,8vw,112px)}
  .hero-grid{grid-template-columns:minmax(0,1fr) 300px;gap:48px 72px}
  .hero h1{margin-bottom:32px}
  .hero-text{min-height:380px}
  .hero .rule{margin-top:auto}
}
@media (min-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 380px;gap:48px 80px}
  .hero-text{min-height:480px}
}
.rule{width:72px;height:2px;background:var(--champagne);margin-top:clamp(36px,4vw,48px)}
.hero-lead{margin-top:28px;max-width:52ch}
/* the byline: name in semibold body size over the title in the label voice */
.hero-lead .name{color:var(--stone)}
.hero-lead .name br{display:none}
.hero-lead .name b{display:block;color:var(--ivory);font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-title);text-transform:none;margin-bottom:6px}
.hero-lead .first{margin-top:24px;font-size:var(--fs-title);line-height:var(--lh-lead);letter-spacing:var(--tr-title);color:var(--champagne)}
.hero-lead p+p:not(.first){margin-top:12px;color:var(--ivory)}
.hero-lead .tagline{font-weight:var(--w-strong)}
/* phone: the bio sits in a narrow column beside the small portrait, so its opening sentence takes body size there */
@media (max-width:959.98px){.hero-lead .first{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:0;margin-top:20px}}

/* portrait (production, 2026-10-07: the review-time query-string switch for portrait variants and its variant rules are
   gone; this is the chosen treatment as plain CSS). Black and white (grayscale with a slight contrast lift), object-fit cover with the eyes in the upper third,
   and a 1px champagne hairline the size of the photo set 12px down and right. 120 x 150 beside the bio below 960px (a 5.3x
   downscale of the 640 x 800 file, so still sharp), 300 x 380 to 1179px, 380 x 480 from 1180px: always downscaled, never
   upscaled; the frame's 12px offset fits inside the 16px gutter */
.portrait{position:relative;width:120px;height:150px;margin-top:0}
@media (min-width:960px){.portrait{width:300px;height:380px;margin-top:6px}}
@media (min-width:1180px){.portrait{width:380px;height:480px}}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:grayscale(1) contrast(1.08)}
.portrait:after{content:"";position:absolute;inset:0;transform:translate(12px,12px);border:1px solid var(--champagne);pointer-events:none}

.hero-foot{margin-top:clamp(56px,6vw,88px);display:grid;grid-template-columns:1fr;gap:32px 64px;align-items:end}
@media (min-width:900px){.hero-foot{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero-foot .cta{margin-top:0}
/* Erin, 2026-10-11: the button and address sit centered under the headshot, level with the carrier sentence.
   Below 960px the portrait is small, so the pair spans the width under the bio instead. */
.hero-side .cta{justify-content:center}
@media (max-width:959.98px){
  .hero-side{display:contents}
  .hero-side .cta{grid-column:1/-1;grid-row:4;margin-top:32px;justify-content:flex-start}
}
@media (min-width:960px){
  .hero-side{display:flex;flex-direction:column;align-items:center}
  .hero-side .cta{margin-top:24px;gap:16px 20px}
}
@media (min-width:1180px){.hero-side .cta{width:max-content;flex-wrap:nowrap}}
.who{margin-top:clamp(64px,8vw,112px)}
.who ul{display:flex;flex-wrap:wrap;gap:8px 32px;color:var(--stone)}
.who p{margin-top:16px;color:var(--ivory);max-width:60ch}

/* one motion: hero lines rise once on load (phone: the sentence fades in); the rule, the foot and the ecosystem row fade in
   behind it as before the photo hero. The name, bio and portrait do not animate: they are there from the first paint. */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .rule,.hero .hero-foot,.hero .who{opacity:0;animation:appear .8s var(--ease) forwards}
  .hero .rule{animation-delay:.3s}.hero .hero-foot{animation-delay:.55s}.hero .who{animation-delay:.7s}
  @keyframes rise{to{transform:none}}
  @keyframes appear{to{opacity:1}}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  .hero h1{opacity:1;animation:none}
  .hero h1 .ln span{transform:translateY(110%);animation:rise .9s var(--ease) forwards}
  .hero h1 .ln:nth-child(2) span{animation-delay:.09s}
  .hero h1 .ln:nth-child(3) span{animation-delay:.18s}
  .hero h1 .ln:nth-child(4) span{animation-delay:.27s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* the one lighter surface */
.on-panel{background:var(--panel)}

/* credibility band: four facts over four hairlines */
.facts{display:grid;grid-template-columns:1fr;gap:36px 48px}
@media (min-width:720px){.facts{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts p{border-top:1px solid var(--seam);padding-top:24px;font-size:var(--fs-title);line-height:1.35;font-weight:var(--w-read);letter-spacing:var(--tr-title);color:var(--ivory)}

/* services: two text columns */
.cols{display:grid;grid-template-columns:1fr;gap:72px 96px;margin-top:72px}
@media (min-width:860px){.cols{grid-template-columns:1fr 1fr}}
.col .tag{color:var(--champagne)}
.col h3{margin-top:12px;max-width:24ch}
.col{container-type:inline-size}
.col h3.one-line{max-width:none;white-space:nowrap;font-size:min(var(--fs-title),calc(100cqi / 16.4))}
.col .lead{margin-top:20px;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:0;max-width:34ch}
.col .whop{margin-top:12px;color:var(--stone);max-width:44ch}
.col .what{margin-top:36px;color:var(--champagne)}
.col ul{margin-top:10px;max-width:40ch}
.col li{padding:9px 0 9px 24px;position:relative}
.col li:before{content:"";position:absolute;left:0;top:21px;width:10px;height:1px;background:var(--stone)}
.col .close{margin-top:32px;color:var(--ivory);font-weight:var(--w-read);max-width:40ch}

/* process: the only numbers on the site */
.steps{display:grid;grid-template-columns:1fr;gap:44px 48px;margin-top:72px}
@media (min-width:720px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:start}
@media (min-width:720px){.steps li{display:block}}
.steps .n{font-size:var(--fs-headline);line-height:1;font-weight:var(--w-read);letter-spacing:var(--tr-headline);color:var(--champagne);font-variant-numeric:tabular-nums;min-width:1.1ch}
.steps h3{margin-top:0}
@media (min-width:720px){.steps h3{margin-top:24px}}
.steps li p{margin-top:10px;color:var(--stone);max-width:28ch;grid-column:2}
.after{margin-top:72px;max-width:none}

/* principal: the sentences the hero does not carry (the portrait, name, title and the first two bio sentences moved up, 2026-10-07) */
.bio{max-width:60ch}
.bio p{margin-top:24px}
.bio .first{font-size:var(--fs-title);line-height:var(--lh-lead);margin-top:28px}
.bio .tagline{font-weight:var(--w-strong)}

/* closing ask */
.ask h2{font-size:var(--fs-headline);line-height:var(--lh-headline);letter-spacing:var(--tr-headline);max-width:16ch}
.ask .ask-text{font-size:var(--fs-title);line-height:var(--lh-lead);max-width:62ch;color:var(--ivory)}
.ask h2.ask-long{max-width:26ch}
/* contact panel card (contact-A): the closing ask sits in one contained panel, pulled up under Services, with a
   champagne edge on the left. The opening clause carries the accent color; nothing else changes. */
#contact{padding-top:0;padding-bottom:calc(var(--sec) * .3)}
#contact .ask-card{position:relative;background:var(--panel);border-left:2px solid var(--champagne);margin-top:-16px;padding:32px 22px 34px 24px}
#contact .ask-text{max-width:56ch}
#contact .ask-open{color:var(--champagne)}
#contact .cta{margin-top:30px;gap:18px 28px}
@media (max-width:899.98px){#contact .ask-text{font-size:var(--fs-body);line-height:var(--lh-body)}}
@media (min-width:900px){
  #contact{padding-bottom:calc(var(--sec) * .25)}
  #contact .ask-card{margin-top:-24px;padding:56px 64px 58px 62px}
}
@media (min-width:1100px){
  #contact .ask-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 64px;align-items:center}
  #contact .cta{margin-top:0;align-self:stretch;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:18px;padding-left:56px;border-left:1px solid var(--seam)}
}

/* footer: everything at label size; only the links take the label voice */
.ftr{border-top:1px solid var(--seam);padding-top:64px;padding-bottom:48px}
.ftr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.ftr nav a{color:var(--stone);text-decoration:none}
.ftr nav a:hover{color:var(--ivory)}
.ftr .entity,.ftr .copy,.ftr .fine{font-size:var(--fs-label);line-height:1.6;font-weight:var(--w-read)}
.ftr .entity{margin-top:48px;color:var(--ivory)}
.ftr .copy{margin-top:6px;color:var(--stone)}
.ftr .fine{margin-top:16px;color:var(--stone);max-width:70ch}

/* inner pages (company, privacy, 404, what to expect) */
.page-top{padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(64px,8vw,112px)}
.page-top h1{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--w-read);letter-spacing:var(--tr-display);max-width:16ch;color:var(--ivory)}
.page-top .lead{margin-top:32px;max-width:52ch}
.page-top .kicker{margin-bottom:24px}
.defs{display:grid;grid-template-columns:1fr;gap:40px 64px}
@media (min-width:760px){.defs{grid-template-columns:260px 1fr;gap:48px 64px}}
.defs h3{border-top:1px solid var(--seam);padding-top:20px}
.defs .d{max-width:60ch}
@media (min-width:760px){.defs .d{border-top:1px solid var(--seam);padding-top:20px}}
.defs .d p+p{margin-top:12px}
.side-by{display:grid;grid-template-columns:1fr;gap:40px 96px;align-items:start}
@media (min-width:860px){.side-by{grid-template-columns:1fr 300px}}
.side-by figure{width:160px}
@media (min-width:860px){.side-by figure{width:300px;order:2}}
.side-by img{width:100%;height:auto}

/* what to expect tiers: a priced list with table rules, not three cards */
.tiers{margin-top:64px}
.tier{display:grid;grid-template-columns:1fr;gap:16px 64px;padding:44px 0;border-top:1px solid var(--seam)}
@media (min-width:760px){.tier{grid-template-columns:300px 1fr}}
.tier .price{font-size:var(--fs-headline);line-height:var(--lh-headline);font-weight:var(--w-read);letter-spacing:var(--tr-headline);color:var(--ivory)}
.tier .price small{display:block;color:var(--stone);margin-top:8px}
.tier h3{margin-top:8px;max-width:16ch}
.tier .plus{font-weight:var(--w-read);color:var(--stone)}
.tier ul{margin-top:8px;max-width:56ch}
.tier li{padding:8px 0 8px 24px;position:relative}
.tier li:before{content:"";position:absolute;left:0;top:20px;width:10px;height:1px;background:var(--stone)}
.truths{margin-top:40px;max-width:60ch}
.truths li{padding:12px 0 12px 24px;position:relative;font-size:var(--fs-body);line-height:var(--lh-body)}
.truths li:before{content:"";position:absolute;left:0;top:26px;width:10px;height:1px;background:var(--stone)}

/* utilities */
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* narrow phones: the mark alone carries the brand so the header stays one row (the link keeps its aria-label) */
@media (max-width:519.98px){.hdr .brand > span{display:none}}

/* === services-2 START: two audiences split by structure, not boxes (2026-10-11) ===
   One champagne hairline runs under both audience headers and a stone hairline drops from it between the columns (from
   860px); stacked, a stone rule separates the two audiences. Each column opens with its audience at title size in the
   champagne label voice. The right column's who-for line sits first under its header as a set line: each kind of
   company in semibold ivory, the commas and "and" in stone, so a reader finds their own kind at a glance. No fills, so
   the contact card stays the only filled surface. Header rows align across columns via subgrid (the one-line headline's
   container moves from .col to .body, because a size container cannot be a subgrid). Sizes are the five tokens only. */
.cols{gap:0;margin-top:64px}
.col .tag{font-size:var(--fs-title);line-height:var(--lh-title);color:var(--champagne);padding-bottom:18px;border-bottom:1px solid var(--champagne)}
.col{container-type:normal}
.col .body{container-type:inline-size;display:flex;flex-direction:column;padding-top:32px}
.col h3{margin-top:0}
.col .lead{margin-top:16px}
.col .what{margin-top:40px}
.col ul{max-width:44ch}
.col-eco .whop{margin:16px 0 0;max-width:40ch;color:var(--stone)}
.col-eco .whop .nm{color:var(--ivory);font-weight:var(--w-strong);white-space:nowrap}
.col-eco{margin-top:64px;padding-top:56px;border-top:1px solid color-mix(in srgb,var(--stone) 45%,transparent)}
@media (min-width:860px){
  .cols{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .col{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  .col .tag{align-self:end}
  .col-car .tag,.col-car .body{padding-right:clamp(32px,4.4vw,64px)}
  .col-eco .tag,.col-eco .body{padding-left:clamp(32px,4.4vw,64px)}
  .col-eco{margin-top:0;padding-top:0;border-top:0}
  .col-eco .body{border-left:1px solid color-mix(in srgb,var(--stone) 45%,transparent)}
}
/* === services-2 END === */

/* fit-2 "the question, and pills" (2026-10-11): the ecosystem row becomes its own beat at the foot of the hero. A
   champagne hairline closes the hero text; the question follows at headline scale in ivory, then the
   company sentence as its subtitle (Erin, 2026-10-11); the six verticals are outlined choice pills in sentence case at body size, so they read as a
   secondary control beside the filled uppercase "Start a conversation" pill; each fills with a champagne tint and turns
   champagne on hover or keyboard focus; the closing line answers beneath in stone. Left-aligned on the hero's edge.
   The two Services columns take a scroll margin so their headers land below the sticky header. */
.who{margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid color-mix(in srgb,var(--champagne) 70%,transparent)}
.who .who-q{font-size:var(--fs-headline);line-height:var(--lh-headline);font-weight:var(--w-read);letter-spacing:var(--tr-headline);color:var(--ivory);max-width:none;text-wrap:balance}
.who .who-lead{margin-top:clamp(14px,1.6vw,20px);color:var(--ivory);font-size:var(--fs-title);line-height:var(--lh-lead);letter-spacing:var(--tr-title);max-width:44ch}
.who ul{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:12px;color:var(--ivory);font-size:var(--fs-body);line-height:1.2;font-weight:var(--w-read);letter-spacing:0;text-transform:none}
.who li{display:flex}
.who ul a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1px solid color-mix(in srgb,var(--champagne) 50%,transparent);border-radius:999px;color:var(--ivory);text-decoration:none;white-space:nowrap}
.who ul a:hover,.who ul a:focus-visible{color:var(--champagne-hi);border-color:var(--champagne);background:color-mix(in srgb,var(--champagne) 16%,transparent)}
.who ul a:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:999px}
@media (prefers-reduced-motion:no-preference){.who ul a{transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}}
.who p{margin-top:clamp(24px,2.6vw,32px);color:var(--stone);font-size:var(--fs-title);line-height:var(--lh-lead);letter-spacing:var(--tr-title);max-width:62ch;text-wrap:pretty}
#for-carriers,#for-companies{scroll-margin-top:32px}
@media (max-width:599.98px){.who ul{gap:10px}.who ul a{padding:0 18px;min-height:46px}.who p{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:0}}
/* end fit-2 */

/* bullets-2 TIMELINE: champagne rings joined by a hairline, carrier years then platform years */
.hero-lead .career{position:relative;padding-left:30px}
.hero-lead .career:before{content:"";position:absolute;left:0;top:calc(.825em - 6px);width:12px;height:12px;border:1.5px solid var(--champagne);border-radius:50%;background:var(--graphite);z-index:1}
.hero-lead .career + .career:before{background:var(--champagne)}
.hero-lead .career:has(+ .career):after{content:"";position:absolute;left:5.25px;top:calc(.825em + 6px);bottom:calc(-12px - .825em + 6px);width:1.5px;background:color-mix(in srgb,var(--champagne) 55%,transparent)}
/* end bullets-2 */