/* The dialer is a product of the same firm, so this is the same site: the
   staffing pages' cream ground, navy, bronze, Spectral over Public Sans,
   14px radii and that soft two-layer shadow. The previous version was dark,
   square-cornered and shadowless - fine on its own, and plainly a different
   company the moment you clicked between them. Tokens below are lifted
   verbatim from /styles.css rather than re-mixed by eye. */
:root{
  --navy:#002F4E; --navy2:#013F63; --steel:#3E6E90; --sky:#74A4C1;
  --bronze:#B9793F; --bronze2:#C18653;
  --cream:#FBF7EC; --paper:#FFFFFF;
  --ink:#17242E; --muted:#5C6B76; --dim:#6E7C87;
  --line:#E4DCCC; --line2:#DCE6EE; --skyfaint:#EAF1F7;
  --ok:#1E7A46;
  --shadow:0 1px 2px rgba(0,32,60,.06), 0 8px 24px rgba(0,32,60,.06);
  --disp:'Spectral',Georgia,serif;
  --body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
img,video{max-width:100%;display:block}
a{color:var(--navy)}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.1;
  letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.07;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.012em}
h3{font-size:1.12rem;letter-spacing:-.008em}
p{margin:0}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--bronze);margin:0 0 18px}
.lede{font-family:var(--disp);font-size:clamp(1.1rem,2.1vw,1.34rem);line-height:1.5;
  color:var(--muted);max-width:56ch}
.sub{color:var(--muted);max-width:62ch;margin:0 0 26px}
.lede strong{color:var(--ink);font-weight:600}
section{margin-top:clamp(46px,6vw,70px)}
/* The hero, and only the hero, runs wider than the body measure. 1080px is
   right for a paragraph and cramped for a headline beside a film; below
   1260px there is no spare width to take, so it stays in the measure. */
@media(min-width:1260px){ .hero{margin-inline:-60px} }
/* A little more air between the sticky header and the first thing under it.
   The page opened tight against the bar. */
.hero{padding:clamp(44px,6vw,72px) 0 0}
/* The words keep a measure even though the hero is wider than one: a headline
   running the full 1200px would be four words a line. But the measure is set
   in pixels, not ch - ch is the body font's character, and the headline is
   three times its size, so 44ch of body text is barely a third of a line of
   display type. It read as a column an inch wide. */
/* Words left, artwork right - the arrangement the Agents hero uses. The
   words keep a measure of their own: a headline across the full width would
   be four words a line. */
/* Column one is the measure the words actually use, not a fraction of the
   row: with a fraction, the difference between the column and the text's own
   max-width became gap, and the artwork drifted toward the edge. */
.hero-top{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:center}
.hero-say{max-width:720px}
/* The illustration, at a size you can read. It was 58px above the eyebrow,
   which looked like an icon somebody had left behind. */
/* Left of its own column, not centred in it: centring left a band of cream
   between the words and the artwork and pushed the artwork out to the edge. */
.hero-art{width:100%;max-width:330px;height:auto;margin:0 auto 0 0;display:block}
@media(max-width:820px){
  .hero-top{grid-template-columns:1fr;align-items:start}
  /* Art first, then the words ride up over its lower edge - the picture sits
     behind them rather than being parked in a block above. The mask fades
     that bottom edge to nothing, so the type is crossing empty cream by the
     time it reaches it and stays readable. 270px, as on the Agents hero; at
     200 it read as an icon rather than as artwork. */
  .hero-art{order:-1;max-width:270px;margin:0 auto;justify-self:center;
    position:relative;z-index:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 95%);
    mask-image:linear-gradient(to bottom,#000 58%,transparent 95%)}
  /* The words start a little lower inside their block, so the eyebrow is not
     pressed against the artwork it is overlapping. */
  .hero-say{position:relative;z-index:1;margin-top:-15%;padding-top:14px}
}
/* A film under a hero with nothing said about it gives nobody a reason to
   press play. */
/* The theatre directly under the hero, closer than a section break would
   put it - it is part of the same opening, not the next subject. */
#films{margin-top:clamp(30px,4vw,48px)}
.hero .lede{margin-top:18px;max-width:58ch}
.hero-acts{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
/* The film, full width, under. This is the band that used to be empty cream
   beside a headline that was taller than the clip next to it. */

/* ── chrome ─────────────────────────────────────────────────────────── */
header.top{position:sticky;top:0;z-index:30;background:rgba(251,247,236,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:15px;height:66px;
  max-width:1250px;position:relative}
/* No parallax. The wordmark drifted on three planes as the pointer moved,
   which is a nice effect on a portfolio and the wrong one on the single
   element that should be the fixed point of every page - it is what somebody
   looks at to check they are still where they thought they were. */
.brand{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink);
  letter-spacing:-.01em;text-decoration:none}
.brand em{font-style:normal;color:var(--bronze);display:inline-block}
/* The mark sits furthest back so it moves LEAST, and counter to the words -
   that opposition is what reads as depth. Everything drifting together just
   looks like the header is loose. */
.brand .mark{width:34px;height:34px;border-radius:8px;flex:0 0 auto}
/* ── the product switcher ───────────────────────────────────────────
   The product word in the wordmark, opening the other two. A <details>, so
   it works with no script; the summary is restyled because a browser's own
   disclosure triangle beside a wordmark looks like a mistake. */
.switch{position:relative;margin-left:-4px}
/* The logo, the name and the product word are one mark, so the rule goes
   under all three rather than under whichever of them is a link. */
.markgroup{display:inline-flex;align-items:center;gap:2px;margin-right:auto;
  padding-bottom:4px;border-bottom:2px solid var(--bronze)}
.switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:3px;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--bronze);
  letter-spacing:-.01em;padding:4px 6px;border-radius:8px;
  transition:background .15s}
.switch>summary::-webkit-details-marker{display:none}
.switch>summary::marker{content:""}
.switch>summary:hover{background:rgba(185,121,63,.10)}
.switch>summary em{font-style:normal}
.chev{width:11px;height:11px;opacity:.75;transition:transform .18s}
.switch[open]>summary .chev{transform:rotate(180deg)}
.switchpanel{position:absolute;top:calc(100% + 9px);left:0;min-width:266px;z-index:60;
  background:var(--paper);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 2px 6px rgba(0,32,60,.07),0 18px 40px rgba(0,32,60,.14);padding:6px}
.switchpanel a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
  color:var(--ink);font-family:var(--body)}
.switchpanel a:hover{background:var(--skyfaint);text-decoration:none}
.switchpanel b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.switchpanel span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
/* Where you already are: named, marked, and not a link out. */
.switchpanel a[aria-current] b{color:var(--bronze)}
.switchpanel a[aria-current]{background:rgba(185,121,63,.07);cursor:default}

.top nav{display:flex;gap:15px;align-items:center;font-size:14px}
/* A hairline between what the product is and where else to go. Three
   cross-links and a button running straight on from the section names read
   as one undifferentiated list. */
.navsep{width:1px;height:18px;background:var(--line);flex:0 0 auto}
.navtog,.navbtn{display:none}
.top nav a{color:var(--muted);font-weight:500;text-decoration:none}
.top nav a:hover{color:var(--ink)}
/* The page you are on, named in the nav. Weight and a rule under it rather
   than a colour swap, so it still reads as a link. */
/* The rule, not the weight. Semibold is wider than regular, so bolding the
   current page pushed every item after it - "Book a call" included - a
   pixel or two sideways depending on which tab you were on. */
.top nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 0 var(--bronze)}
/* A pillar page leads with its own title, so the line under it gets a
   little more air than a mid-page subhead does. */
.sub.lede{margin-bottom:clamp(30px,4vw,40px)}
/* .top nav a is (0,2,1) and .btn is (0,1,0), so the nav colour was winning
   and the demo button rendered muted grey on navy - a contrast failure on
   the one control that matters. */
.top nav a.btn{color:#fff}
.top nav a.btn:hover{color:#fff}
.cross{color:var(--bronze)!important;padding-left:19px;position:relative}
.cross::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--line)}
.out{width:9px;height:9px;margin-left:5px;opacity:.8;display:inline-block}
.btn{display:inline-block;padding:11px 22px;border-radius:10px;background:var(--navy);
  color:#fff;font-weight:600;font-size:15px;border:1px solid var(--navy);text-decoration:none;
  transition:background .2s,box-shadow .2s}
.btn:hover{background:var(--navy2);text-decoration:none;
  box-shadow:0 6px 18px rgba(0,47,78,.18)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--paper);border-color:var(--sky);box-shadow:var(--shadow)}
.btn.sm{padding:9px 17px;font-size:14.5px}
/* The buttons used to lean toward the cursor. It reads as a trick on a
   control somebody is trying to click, so it is gone; the wordmark keeps
   its parallax because nobody is aiming at the wordmark. */

/* ── the hairline fact grid the staffing pages use ──────────────────── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin:38px 0 4px}
.facts>div{background:var(--paper);padding:22px 20px}
.facts b{display:block;font-family:var(--disp);font-size:2rem;font-weight:600;
  color:var(--steel);line-height:1;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:8px;font-size:13px;color:var(--muted);line-height:1.45}

/* ── cards ──────────────────────────────────────────────────────────── */
.callout{background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--bronze);border-radius:4px;
  padding:clamp(20px,3vw,26px) clamp(20px,3vw,30px);box-shadow:var(--shadow)}
.callout p+p{margin-top:14px}
.callout strong{color:var(--ink);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
/* Six cards in an auto-fit four-up leaves two stranded on a second row.
   Three across divides evenly, and the cards get room to breathe. */
#included .cards{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
@media(min-width:900px){#included .cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--bronze);
  border-radius:14px;padding:22px 24px;box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
.card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(0,32,60,.07),0 16px 34px rgba(0,32,60,.10)}
.card h3{margin:0 0 8px}
/* The pillar cards are links. They keep the card look and gain one line of
   bronze at the bottom, so it is obvious they go somewhere without turning
   four cards into four buttons. */
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover{text-decoration:none;border-top-color:var(--navy)}
.more{display:block;margin-top:12px;font-size:13px;font-weight:600;color:var(--bronze)}
.more::after{content:" \2192"}
.card p{color:var(--muted);font-size:15px}

/* ── a feature row: the claim, then the proof beside it ─────────────── */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(22px,3.4vw,44px);align-items:center}
/* Flipping the row moves the shot into column one, so the column widths
   have to swap with it - otherwise every other proof panel is narrower
   than the one above it for no reason the reader can see. */
.feat.flip{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.feat.flip .shot{order:-1}
/* A pillar has more to say than two blocks, and there are not eight more
   films. These are text on both sides, in the same grid, so the page keeps
   its rhythm without four video panels in a row. */
.feat.cols{grid-template-columns:1fr 1fr;align-items:start;
  padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--line)}
@media(max-width:860px){.feat{grid-template-columns:1fr}.feat.flip .shot{order:0}}
.feat ul{margin:18px 0 0;padding:0;list-style:none}
.feat li{position:relative;padding-left:22px;margin-bottom:11px;color:var(--muted);font-size:15.5px}
.feat li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--bronze);opacity:.75}
.feat li strong{color:var(--ink);font-weight:600}
/* The clip lives in the same white card as everything else, capped so it
   illustrates the paragraph beside it instead of swallowing the page. */
.shot{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);margin:0;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
.shot:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(0,32,60,.07),0 16px 34px rgba(0,32,60,.10)}
.shot video{width:100%;aspect-ratio:1536/714;height:auto;background:var(--navy)}

/* ── the theatre ────────────────────────────────────────────────────── */
.rail{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:26px 0 20px}
.film{appearance:none;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:9px 15px;cursor:pointer;color:var(--muted);font-family:var(--body);font-size:14px;
  display:flex;gap:9px;align-items:baseline;
  transition:border-color .15s,color .15s,box-shadow .15s,transform .15s}
.film:hover{color:var(--ink);border-color:var(--sky);box-shadow:var(--shadow)}
.film-d{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.film[aria-selected="true"]{color:var(--ink);border-color:var(--navy);
  box-shadow:inset 0 -2px 0 var(--bronze),var(--shadow)}
.film:focus-visible,.chap:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
/* Capped. At full width the player was 1092px across and filled the whole
   viewport, which is what made the page feel like a video host. */
.screen{max-width:830px;margin:0 auto;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.screen video{width:100%;aspect-ratio:1536/714;height:auto;background:var(--navy);display:block}
.chaps{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:16px}
.chaps[hidden]{display:none}   /* an author display rule beats the UA [hidden] */
.chaps-l{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-right:4px}
.chap{appearance:none;background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;cursor:pointer;color:var(--muted);font-family:var(--body);font-size:13px;
  display:inline-flex;gap:8px;align-items:baseline;transition:border-color .15s,color .15s}
.chap:hover{color:var(--ink);border-color:var(--sky)}
.chap span{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.cap{font-size:12.5px;color:var(--dim);margin-top:12px;text-align:center}
/* Small technical labels in a monospace. The staffing site is a
   person-shaped product and reads warm; this one is software, and the
   figures and captions can say so quietly. */
.meta,.film-d,.chap span,.price thead th{
  font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,Consolas,monospace;
  letter-spacing:-.01em}
.meta{font-size:13px;color:var(--dim)}
/* One dark band, across the two compliance blocks. It is the argument the
   rest of the page is built to support, and giving it its own ground stops
   the page reading as one long cream scroll. */
.band{background:var(--navy);color:#EAF1F7;margin-top:clamp(46px,6vw,70px);
  padding:clamp(34px,5vw,58px) 0}
.band h2,.band h3{color:#fff}
.band .sub,.band .feat li{color:#B9CCD9}
.band .feat li strong{color:#fff}
.band .eyebrow{color:var(--bronze2)}
.band .shot{border-color:rgba(255,255,255,.14);background:#06263B}
.band section{margin-top:clamp(34px,4vw,46px)}
.band section:first-child{margin-top:0}

/* ── pricing ────────────────────────────────────────────────────────── */
.price{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.price th,.price td{text-align:left;padding:13px 20px;border-bottom:1px solid var(--line);font-size:15px}
.price thead th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:700;background:var(--skyfaint)}
.price tr:last-child td{border-bottom:0}
.price td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.price .inc{color:var(--ok)}

.close{background:var(--navy);color:#fff;border-radius:16px;padding:clamp(30px,4.6vw,48px);
  margin-top:clamp(46px,6vw,70px);text-align:center}
.close h2{color:#fff}
/* A rest between two grids of cards. Navy, because changing the ground is
   what actually breaks a run of text - another cream block with a picture in
   it reads as more of the same. Almost no words in it by design. */
.breather{background:var(--navy);border-radius:16px;
  padding:clamp(28px,4vw,42px) clamp(22px,4vw,42px);
  margin-top:clamp(46px,6vw,70px);text-align:center}
.breather .eyebrow{color:var(--bronze2);margin-bottom:12px}
.breather h2{color:#fff;margin-bottom:clamp(20px,2.6vw,28px)}
.breather .shot{background:#06263B;border-color:rgba(255,255,255,.14);
  max-width:900px;margin-inline:auto}
.close p{color:#C9DAE6;max-width:58ch;margin:20px auto 0}
/* The eyebrow is a <p>, so the rule above was overriding it: .close p is
   more specific than .eyebrow, which took away the eyebrow's 18px gap to the
   headline and gave it 12px above instead. It ended up jammed against the
   heading and floating off the top of the box. */
.close p.eyebrow{margin:0 0 10px;max-width:none}
.close .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.close .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
footer{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding:26px 0 46px}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted)}
footer .brand{font-size:15px;margin-right:0}
footer .fm{font-style:normal;color:var(--bronze);font-weight:700}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .brand .mark{width:26px;height:26px}
footer .sp{margin-left:auto}

/* ── narrow ─────────────────────────────────────────────────────────
   The nav used to be hidden outright below 820px, which left a phone with
   a logo and a button and no way to reach four of the six pages. */
@media(max-width:1060px){
  .switch{margin-right:0}
  /* Static, so the panel below positions against the header row rather than
     against the word - which is two thirds of the way across a phone. */
  .switch{position:static}
  .switchpanel{left:20px;right:20px;min-width:0;width:auto}
  .navbtn{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-left:auto;border:1px solid var(--line);
    border-radius:10px;color:var(--ink);background:var(--paper);cursor:pointer}
  .navtog:focus-visible+.navbtn{outline:2px solid var(--steel);outline-offset:2px}
  .top nav{position:absolute;top:calc(100% + 1px);left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;font-size:15.5px;
    background:var(--cream);border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(0,32,60,.10);padding:6px 24px 16px}
  .navtog:checked~nav{display:flex}
  .top nav a{padding:12px 2px;border-bottom:1px solid var(--line)}
  .top nav a.on{box-shadow:none;border-left:2px solid var(--bronze);padding-left:10px}
  .navsep{display:none}
  .top nav a.btn{margin-top:14px;text-align:center;border-bottom:none;padding:12px 22px}
  .top nav a.cross{padding-left:21px}
}
@media(max-width:860px){
  .feat.cols{grid-template-columns:1fr;gap:26px}
  /* One column means the border above the pair no longer separates two
     things; it separates this pair from the one before it, which is still
     what it is for - but each half needs its own. */
  .feat.cols>div+div{border-top:1px solid var(--line);padding-top:24px}
}
@media(max-width:620px){
  /* The gutter, the headline and the artwork, matched to the Agents site:
     20px, 31px and 270px measured there at 390px wide. */
  .wrap{padding-inline:20px}
  h1{font-size:1.95rem;line-height:1.12}
  h2{font-size:1.42rem}
  header>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .rail{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .rail .film{flex:0 0 auto}
  .chaps{gap:8px}
  .price{font-size:14.5px}
  .close{padding-inline:22px}
  footer .sp{margin-left:0;flex-basis:100%}
}
/* A 300px-wide phone is still a phone. Nothing may run off the side. */
@media(max-width:400px){
  .wrap{padding-inline:20px}
  .switchpanel{min-width:min(266px,calc(100vw - 40px))}
  .brand{font-size:15.5px}
  .brand .mark{width:30px;height:30px}
}
/* ── the entrance ───────────────────────────────────────────────────
   Every top-level block rises fourteen pixels and fades, with a small
   stagger, the way the Agents site does it. The sticky header is outside
   .wrap#top and does not move. */
@keyframes i2e-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wrap#top,.wrap#top>*{animation:i2e-rise .5s ease both}
.wrap#top>*{animation-delay:.04s}
@media(prefers-reduced-motion:reduce){
  /* A cross-fade rather than nothing at all: killing the animation outright
     leaves the page snapping into place, which is its own kind of jolt. */
  @keyframes i2e-fade{from{opacity:0}to{opacity:1}}
  .wrap#top,.wrap#top>*{animation:i2e-fade .4s ease both!important}
}

@media (prefers-reduced-motion: reduce){
  .card:hover,.shot:hover,.film:hover{transform:none}
}

/* The 2 is the brand's one piece of colour. Its own class rather than an
   inline style, so the wordmark is one thing to change, not forty. */
.i2 { color: var(--bronze); }
.wm { white-space: nowrap; }

/* ── Who you are ──────────────────────────────────────────────────────────
   Three audiences, one section. The radios sit before the tabs and the
   panels so a plain sibling selector can do the whole job - no script, and
   it works the instant the HTML lands. The inputs themselves are moved
   off-screen rather than display:none, which would take them out of the
   tab order and off a screen reader. */
.uc > input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.uc-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px; margin-bottom:22px }
.uc-tabs label { display:block; cursor:pointer; padding:13px 16px; border-radius:14px;
  background:var(--paper); border:1px solid var(--line); border-top:3px solid transparent;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease }
.uc-tabs label:hover { transform:translateY(-2px); box-shadow:var(--shadow) }
.uc-tabs label b { display:block; font-family:var(--disp); font-size:17px; letter-spacing:-.01em }
.uc-tabs label span { display:block; color:var(--muted); font-size:13.5px; margin-top:1px }
.uc > input:focus-visible + input + input + .uc-tabs label[for$="firm"],
.uc > input + input:focus-visible + input + .uc-tabs label[for$="center"],
.uc > input + input + input:focus-visible + .uc-tabs label[for$="mktg"] {
  outline:3px solid var(--bronze); outline-offset:2px }
#uc-firm:checked   ~ .uc-tabs label[for="uc-firm"],
#uc-center:checked ~ .uc-tabs label[for="uc-center"],
#uc-mktg:checked   ~ .uc-tabs label[for="uc-mktg"] {
  border-top-color:var(--bronze); box-shadow:var(--shadow); background:var(--paper) }
#uc-firm:checked   ~ .uc-tabs label[for="uc-firm"] b,
#uc-center:checked ~ .uc-tabs label[for="uc-center"] b,
#uc-mktg:checked   ~ .uc-tabs label[for="uc-mktg"] b { color:var(--navy) }

.uc-panel { display:none }
#uc-firm:checked   ~ #uc-p-firm,
#uc-center:checked ~ #uc-p-center,
#uc-mktg:checked   ~ #uc-p-mktg { display:block }
.uc-lede { color:var(--muted); max-width:70ch; margin:0 0 20px }
.uc-lede em { font-style:italic; color:var(--ink) }
/* Same arithmetic as #included: six cards auto-fitting four-up strands two on
   a second row. Three across divides evenly. */
#whoyouare .cards { grid-template-columns:repeat(auto-fit,minmax(288px,1fr)) }