/* ============================================================================
   adam-bands.css — Adam's homepage treatment, applied to every other page

   index.html is Adam's build verbatim (assets/css/adam-home.css). This sheet
   carries the same decisions onto the other 45 pages, so they read as the same
   site rather than as a recoloured version of the old one.

   theme-adam.css is the FOUNDATION (values + ground classes). This is the
   TREATMENT (his type, his eyebrow, his button, his card, his accordion, his
   rhythm). Load theme-adam.css first, then this. Both go after every existing
   sheet.

   Every rule below is traceable to a declaration in his stylesheet; the source
   line is quoted above it. Nothing here is invented.

   !important is used only where chrome.css already set the same property with
   !important — it normalised the type scale across eleven stylesheets that way,
   so a plain declaration here loses to it regardless of source order. Where
   chrome.css did not use it, neither does this file.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. TYPE

   chrome.css pins Playfair Display and Inter with !important across the whole
   type scale (chrome.css:298, :338, :366-388, :456, :478, :493). Those are the
   declarations this block replaces.

   Libre Caslon Display ships WEIGHT 400 ONLY. His h1,h2,h3{font-weight:500}
   therefore renders synthesised. Serif headings here are 400, deliberately.
   --------------------------------------------------------------------------- */

body, main, input, select, textarea, button {
  font-family: var(--hd-sans) !important;   /* --font:"DM Sans",Arial,sans-serif */
}

/* h1,h2{font-family:var(--serif)} — and his four explicit h3 opt-ins */
main h1, main h2,
.prose h2, .learn-next h2, .pw-route h2, .iw-close h2, .pw-deals__hd h2,
.portal-entry__card h2, .ins-essay h3, .hd-op__name, .hd-answer h3, .hd-h3,
.op-card--lg h3, .asset-card__t, .gl-item__term, .video-slot__t,
.pt-cap h3, .pt-insight h3, .rc-spine li h3, .rc-ledger__col h3 {
  font-family: var(--hd-serif) !important;
  font-weight: 400 !important;
}

/* h1{font-size:clamp(56px,5.9vw,85px);line-height:1.01;letter-spacing:-.022em}
   Rescaled: his shell is 1280, ours 1180, so his literal px run proportionally
   larger on our narrower measure. */
body main h1 {
  font-size: clamp(2.75rem, 5.4vw, 4.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.022em !important;
}

/* h2{font-size:clamp(38px,3.5vw,54px);letter-spacing:-.025em} +
   h1,h2,h3{font-weight:500;line-height:1.12} */
body main h2 {
  font-size: clamp(2.125rem, 3.4vw, 2.875rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

/* .operator-callout h3{font-family:var(--serif);font-size:30px} */
.prose h2, .learn-next h2, .pw-route h2, .iw-close h2, .pw-deals__hd h2,
.portal-entry__card h2, .ins-essay h3, .hd-op__name, .hd-answer h3, .hd-h3 {
  font-size: clamp(1.5rem, 2.3vw, 1.9375rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
}

/* h3{font-size:25px;letter-spacing:-.025em} */
body main .x-answer h2, body main .x-candidates h2, body main .ik-form__head h2,
body main .ik-card h2, body main .portal-panel h2,
.op-card--lg h3, .asset-card__t, .gl-item__term, .video-slot__t,
.pt-cap h3, .pt-insight h3, .rc-spine li h3, .rc-ledger__col h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

/* body{font-size:16px;line-height:1.65} */
body main { font-size: 16px; line-height: 1.65; }

/* .hero-lede{font-size:18px;line-height:1.7} */
body main h1 + p, body main h1 + p.lede, body main h1 + p.hd-lede,
body main h1 + p.pw-lede, .learn-mast__lede, .iw-hero__lede, .ik-hero__lede,
.dl-lede, .lede, .hd-lede {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* .fine-print{font-size:13px;line-height:1.6} */
.fine-print, .pw-fine, .rc-fine, .ins-fine, .learn-fine, .x-fine,
.page-disclosure, .page-disclosure p { line-height: 1.6 !important; }

/* em{font-weight:400;font-style:normal;color:var(--gold)}
   His signature: <em> in a display heading is GOLD and UPRIGHT, never italic.
   .hd-accent resolves per band, so this is correct on navy and on paper. */
main h1 em, main h2 em, main h3 em,
main h1 .g, main h2 .g, main h3 .g {
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--hd-accent) !important;
}

/* a{color:inherit;text-decoration:none}
   His first rule about links, and the one that stops a page ever showing the
   browser default. opportunities.html was rendering rgb(0,0,238) on the
   opportunity cards: nothing in discovery.css colours an anchor, and the rule
   that had been doing it by accident was one of the forced ground blocks
   removed from site-v1.css. An anchor takes the colour of the text around it
   unless it is a button or a text link. */
main a { color: inherit; text-decoration: none; }
main a.text-link, main a.hd-textlink, main a.dl-textlink { color: var(--hd-fg); }
/* He does not underline inline links; the accent colour carries them. An
   underline rule here put a line under every operator name and city on
   operating-partners.html, which his page never does. */
main p a:not([class]), main li a:not([class]), main dd a:not([class]) {
  color: var(--hd-accent);
}

/* ::selection{background:#ead7b1;color:var(--ink)} */
::selection { background: var(--hd-select); color: var(--hd-ink); }

/* :focus-visible{outline:3px solid #398dd0;outline-offset:5px}
   Blue, deliberately: a system focus ring never competes with the gold accent. */
main :focus-visible { outline: 3px solid var(--hd-focus); outline-offset: 5px; }


/* ---------------------------------------------------------------------------
   2. RHYTHM

   .shell{width:min(1280px,calc(100% - 96px));margin-inline:auto}
   .section{padding:88px 0}  /  @media(max-width:650px){.section{padding:51px 0}}

   His band padding is TIGHTER than ours at wide viewports (88 vs up to 144).
   That density is a large part of why his page reads as a document.
   --------------------------------------------------------------------------- */

[class*="ground-"] { padding-block: var(--hd-pad); }

/* A band that sets its own padding keeps it; these are the seam compressions.
   Consecutive same-ground bands compress the seam between them, exactly as
   .options-section (45 bottom) into .market-section (0 top) into
   .experience-section (66 top) does on his page. */
[class*="ground-"] + [class*="ground-"].same-ground { padding-top: 0; }

.ground-deep { padding: 46px 0 27px; }   /* .site-footer{padding:46px 0 27px} */


/* ---------------------------------------------------------------------------
   3. EYEBROW

   .eyebrow,.card-kicker{font-family:var(--font);font-size:12px;font-weight:700;
     letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
   .eyebrow{color:var(--gold);margin-bottom:18px}
   .eyebrow.ink{color:var(--gold-dark)}

   Ours ran 11px/600/.19em. chrome.css:298 sets that with !important across
   eleven eyebrow classes, so this has to match it.
   --------------------------------------------------------------------------- */

.eyebrow, .hd-eyebrow, .dl-eyebrow, .dl-hero__eyebrow, .pw-eyebrow, .rc-eyebrow,
.x-eyebrow, .decision-eyebrow, .iw-hero__eyebrow, .ik-hero__eyebrow, .learn-eyebrow,
.card-kicker, .op-cat, .pt-insight__kicker {
  font-family: var(--hd-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
  color: var(--hd-accent) !important;   /* gold on navy, deep gold on light */
  margin-bottom: 18px;
}

/* .hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:25px}
   .gold-line{display:inline-block;width:28px;height:1px;background:var(--gold)}
   His hero eyebrow is preceded by a 28px gold rule. Reproduced as a
   pseudo-element so no page needs a new <span>. */
.ground-navy > .shell > .eyebrow:first-child,
.ground-navy .hd-eyebrow, .ground-navy .dl-hero__eyebrow,
.ground-navy .iw-hero__eyebrow, .ground-navy .ik-hero__eyebrow,
.ground-navy .pw-eyebrow, .ground-navy .rc-eyebrow, .ground-navy .x-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}
.ground-navy .hd-eyebrow::before, .ground-navy .dl-hero__eyebrow::before,
.ground-navy .iw-hero__eyebrow::before, .ground-navy .ik-hero__eyebrow::before,
.ground-navy .pw-eyebrow::before, .ground-navy .rc-eyebrow::before,
.ground-navy .x-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  flex: none;
  background: var(--hd-gold);
}


/* ---------------------------------------------------------------------------
   4. BUTTONS AND TEXT LINKS

   .btn{...gap:25px;min-height:54px;padding:14px 23px;border-radius:3px;
        font-size:15px;font-weight:700;line-height:1.4}
   .btn-gold{color:var(--navy);background:var(--gold);border:1px solid var(--gold)}
   .btn-gold:hover{background:#e6c17d;box-shadow:0 4px 18px #0001}

   FLAT GOLD. There is no gradient anywhere in his file. The stale
   linear-gradient(135deg,#F0AD27,#D99B1B) was removed at source in home-d.css,
   discovery.css, site.css, site-v1.css, deal-brief.css and chrome.css; this
   block is the positive statement of what replaces it.

   There is also no secondary button. His secondary action is always a
   .text-link at the same weight and size as the button label, unboxed.
   --------------------------------------------------------------------------- */

.btn, .hd-btn, .dl-btn, .iw-btn, .ik-btn, .pw-btn, .x-btn, .ck-btn {
  border-radius: var(--hd-r-ctl);
  font-family: var(--hd-sans);
  font-weight: 700;
  line-height: 1.4;
  transition: background var(--hd-dur), box-shadow var(--hd-dur), color var(--hd-dur);
}

main .btn, main .hd-btn, main .dl-btn, main .iw-btn, main .ik-btn, main .pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 54px;
  padding: 14px 23px;
  font-size: 15px;
}

.btn--primary, .hd-btn--gold, .dl-btn--gold, .iw-btn--gold,
.ik-btn--gold, .pw-btn--gold, .x-btn--gold {
  color: #071725 !important;
  background: var(--hd-gold) !important;
  border: 1px solid var(--hd-gold) !important;
}
.btn--primary:hover, .hd-btn--gold:hover, .dl-btn--gold:hover, .iw-btn--gold:hover,
.ik-btn--gold:hover, .pw-btn--gold:hover, .x-btn--gold:hover {
  background: var(--hd-gold-soft) !important;
  border-color: var(--hd-gold-soft) !important;
  box-shadow: var(--hd-e-btn);
}

/* .btn--ghost / --outline follow the band rather than naming a colour, so one
   rule is correct on navy and on paper. */
.btn--ghost, .btn--outline, .ck-btn--ghostd {
  color: var(--hd-fg) !important;
  border: 1px solid var(--hd-line-2) !important;
  background: transparent !important;
}
.btn--ghost:hover, .btn--outline:hover, .ck-btn--ghostd:hover {
  border-color: var(--hd-accent) !important;
}

/* .text-link{display:inline-flex;align-items:center;gap:20px;font-size:15px;font-weight:700}
   .text-link span,.btn span{transition:transform .2s}
   .text-link:hover span,.btn:hover span{transform:translate(3px,-1px)}
   One gesture, one duration: the arrow glyph nudges up-and-right on hover. */
.text-link, .hd-textlink, .dl-textlink, .iw-btn-line, .chapter__go {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: var(--hd-fg);
  font-size: 15px;
  font-weight: 700;
}
.text-link span, .btn span, .hd-btn span, .dl-btn span,
.text-link em span, .iw-card--link em span { transition: transform var(--hd-dur); }
.text-link:hover span, .btn:hover span, .hd-btn:hover span, .dl-btn:hover span {
  transform: translate(3px, -1px);
}


/* ---------------------------------------------------------------------------
   5. THE +/x ACCORDION TOGGLE

   summary{list-style:none}summary::-webkit-details-marker{display:none}
   summary>span:last-child,summary>i:last-child{font-size:21px;font-style:normal;line-height:1}
   details[open]>summary>span:last-child,details[open]>summary>i:last-child{transform:rotate(45deg)}

   A + at 45 degrees is an x. One glyph, no icon set, no swap. It is the same
   control on his FAQ, his project snapshots and his option cards.
   --------------------------------------------------------------------------- */

main summary { list-style: none; cursor: pointer; }
main summary::-webkit-details-marker { display: none; }
main summary > span:last-child,
main summary > i:last-child {
  font-size: 21px;
  font-style: normal;
  line-height: 1;
  color: var(--hd-accent);
  transition: transform var(--hd-dur);
}
main details[open] > summary > span:last-child,
main details[open] > summary > i:last-child { transform: rotate(45deg); }

/* .faq-list details{border-bottom:1px solid #cfd7da}
   .faq-list details:first-child{border-top:1px solid #cfd7da}
   .faq-list summary{display:flex;justify-content:space-between;align-items:center;
     gap:25px;padding:21px 0;font-size:16px;font-weight:500} */
main .faq-list details, main .qa-list details, main .question-list details {
  border-bottom: 1px solid var(--hd-line);
}
main .faq-list details:first-child, main .qa-list details:first-child,
main .question-list details:first-child { border-top: 1px solid var(--hd-line); }
main .faq-list summary, main .qa-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 21px 0;
  font-size: 16px;
  font-weight: 500;
}


/* ---------------------------------------------------------------------------
   6. CARDS AND PANELS

   .project-card{border:1px solid #d3dadd;border-radius:4px;background:white;overflow:hidden}
   .market-board{border:1px solid #cfd6d7;border-top:3px solid var(--gold);
     border-radius:5px;background:white;padding:25px 28px 18px;box-shadow:0 8px 20px #13283805}
   .path-result{padding:32px;background:white;border:1px solid #d1d9db;
     border-radius:5px;box-shadow:0 16px 35px #172e3e08}

   All of his shadows are navy-tinted at 2-4% alpha. He never uses a neutral
   black shadow. --hd-surface and --hd-line resolve per band, so one rule gives
   a white card on paper and a raised navy card on navy.
   --------------------------------------------------------------------------- */

main :is(.iw-card, .iw-note, .ik-card, .x-answer, .x-candidates, .x-candidate,
  .op-card, .op-card--lg, .asset-card, .gl-item, .pw-deal, .pw-chain__node,
  .pt-tier, .pt-cap, .pt-insight, .rc-ledger__col, .insight-card, .access-card,
  .video-slot, .portal-entry__card, .learn-chapters__card, .ins-index__card) {
  background: var(--hd-surface);
  border: 1px solid var(--hd-line-2);
  border-radius: var(--hd-r-panel);
  box-shadow: var(--shadow-card);
}

/* .option-dark{background:var(--navy);color:white}
   .option-light{background:#e9eeef;color:var(--ink)}

   A DARK CARD ON A LIGHT BAND. His options row puts two navy cards and one
   tinted card on the paper band, and each re-grounds itself rather than
   inheriting. Our .ik-card--dark is the same idea but had lost its ground: it
   was painting white while chrome.css:538 still forced #D7AB56 label text onto
   it, which is 1.95:1. Naming the ground here makes the label correct again
   without touching chrome.css. */
/* .dl-idx is the deal-page section index. It is hidden at desktop and becomes a
   navy drawer under 900px, which is why it only failed in the mobile sweep:
   it paints --dl-navy-2 and was taking the paper band's ink at 2.82:1. */
main :is(.ik-card--dark, .card--dark, .op-card--dark, .pw-route, .pw-chain__node) {
  background: var(--hd-navy);
  color: var(--hd-on-d);
  --hd-fg: var(--hd-on-d);
  --hd-fg-2: var(--hd-on-d-2);
  --hd-fg-3: var(--hd-on-d-3);
  --hd-line: var(--hd-line-d);
  --hd-line-2: var(--hd-line-d2);
  --hd-accent: var(--hd-gold);
  --hd-surface: var(--hd-navy-2);
  --ink: var(--hd-on-d);
  --muted: var(--hd-on-d-3);
  --ik-gold-text: var(--hd-gold);
}

/* .access-form-card{background:white;border-radius:5px;padding:33px;
     color:var(--ink);border-top:3px solid var(--gold)}
   .market-board{...background:white;border-top:3px solid var(--gold)...}

   A LIGHT CARD ON ANY BAND. The counterpart to the dark card above, and one of
   his strongest moves: the panel that carries the ask is a white card with a
   3px gold top rule, and it sits on the NAVY band. It has to declare the light
   ground rather than inherit, or every label inside it reads as if it were on
   navy — the 1031 help link came out #152235 on #0d2233 at 1.01:1. */
/* .portal-entry__card is the same object as .x-answer: his .path-result, a
   white card carrying the choices, sitting on the light band beside the
   headline. Its own rules already set color:var(--ink-900) and background:#fff;
   what it lacked was the light token set, so those resolved against the dark
   ground the band used to have. */
main :is(.x-answer, .asset-answer, .card--light, .portal-entry__card) {
  background: var(--hd-paper-2);
  color: var(--hd-ink);
  border-top: 3px solid var(--hd-gold);
  --hd-fg: var(--hd-ink);
  --hd-fg-2: var(--hd-ink-2);
  --hd-fg-3: var(--hd-ink-3);
  --hd-line: var(--hd-line-l);
  --hd-line-2: var(--hd-line-l2);
  --hd-accent: var(--hd-gold-deep);
  --hd-surface: var(--hd-paper-2);
  --ink: var(--hd-ink);
  --muted: var(--hd-ink-3);
  --ik-gold-text: var(--hd-gold-deep);
}

/* .path-buttons button[aria-pressed="true"]{background:var(--navy);
     border-color:var(--navy);color:white;box-shadow:inset 3px 0 var(--gold)}

   THE SELECTED CONTROL. His chosen state goes navy with white text and a 3px
   gold rule inset on the leading edge — the gold marks the choice, the navy
   carries it. A selected row on operating-partners.html was painting navy and
   keeping the band's ink, so the operator name read 1.18:1. Re-grounding is the
   fix, and it also gives every selected control on the site the same shape. */
main :is([aria-pressed="true"], .is-open > a, .is-selected, .ik-choice:has(input:checked)) {
  --hd-fg: var(--hd-on-d);
  --hd-fg-2: var(--hd-on-d-2);
  --hd-fg-3: var(--hd-on-d-3);
  --hd-line: var(--hd-line-d);
  --hd-line-2: var(--hd-line-d2);
  --hd-accent: var(--hd-gold);
  --ink: var(--hd-on-d);
  --muted: var(--hd-on-d-3);
  color: var(--hd-on-d);
}
main .path-buttons button[aria-pressed="true"], main .is-open > a {
  background: var(--hd-navy);
  box-shadow: inset 3px 0 var(--hd-gold);
}

/* .market-board / .access-form-card both open with a 3px gold rule. That is how
   he marks the one panel per band that carries the ask. */
main :is(.ik-form, .access-card, .x-answer, .ik-card--dark) {
  border-top: 3px solid var(--hd-gold);
}

/* .project-facts{...padding-block:16px;border-block:1px solid var(--line)}
   A label/value strip fenced top and bottom, never boxed. */
main :is(.mini-ledger, .pt-ledger, .pt-key, .rc-ledger, .project-facts) {
  padding-block: 16px;
  border-block: 1px solid var(--hd-line);
}


/* ---------------------------------------------------------------------------
   7. FORM FIELDS

   input,select,textarea{display:block;width:100%;background:#f8f9f7;
     border:1px solid #bbc6ca;border-radius:3px;padding:12px;color:var(--ink);
     font-size:16px;font-weight:400;line-height:1.4;margin-top:7px}
   input{min-height:46px}  select{min-height:48px}
   form label{display:block;font-size:14px;font-weight:600;margin-bottom:19px}

   font-size:16px is deliberate, not a style choice: below 16px iOS Safari
   zooms the page on focus. The fill is a warm off-white rather than white so
   the field reads as recessed inside a white card.
   --------------------------------------------------------------------------- */

main :is(input:not([type=radio]):not([type=checkbox]), select, textarea) {
  background: var(--hd-field);
  border: 1px solid var(--hd-field-line);
  border-radius: var(--hd-r-ctl);
  padding: 12px;
  color: var(--hd-ink);
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 7px;
}
main input:not([type=radio]):not([type=checkbox]) { min-height: 46px; }
main select { min-height: 48px; }
main textarea { resize: vertical; }
main :is(input, textarea)::placeholder { color: var(--hd-ink-3); opacity: 1; }
main form label { display: block; font-size: 14px; font-weight: 600; }


/* ---------------------------------------------------------------------------
   8. HERO

   background:linear-gradient(90deg,rgba(7,23,37,.98) 3%,rgba(7,23,37,.91) 37%,
     rgba(7,23,37,.26) 78%),linear-gradient(0deg,rgba(7,23,37,.7),transparent 55%),
     url(...) center 66%/cover no-repeat

   THE SEAM. Our scrims were rgba(5,13,26,...), tuned so the photograph's bottom
   edge equalled the old page colour #050D1A. The ground moved to #071725, so
   the photo stepped about 4 L* and rotated about 9 degrees of hue into the
   section below it — a visible teal band under every hero photo. Every scrim
   literal was re-based to 7,23,37 at source across eleven stylesheets; this
   block is the two-layer form he actually uses, so the bottom edge of the photo
   is exactly the band colour.

   The vertical layer ending at 100% opacity is what closes the seam. The
   horizontal layer is what keeps the photo legible on the side the text is not.
   --------------------------------------------------------------------------- */

.ground-navy:is(.hd-hero, .dl-hero, .iw-hero, .ik-hero, .pw-hero, .x-hero,
  .op-open, .op-hero, .story-hero, .page-hero, .rc-hero, .pt-hero)::before,
.ground-navy .hero-scrim {
  background:
    linear-gradient(90deg, rgba(7,23,37,.98) 3%, rgba(7,23,37,.91) 37%, rgba(7,23,37,.26) 78%),
    linear-gradient(0deg, rgba(7,23,37,1) 0%, rgba(7,23,37,.7) 18%, transparent 55%);
}

/* .hero-bottom{...padding-block:20px;border-top:1px solid #ffffff26;
     color:#becbd5;font-size:12px;letter-spacing:.11em}
   A dark band closes with a hairline strip, not a hard edge. */
.ground-navy .band-foot, .ground-navy .hero-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  border-top: 1px solid var(--hd-line-d2);
  color: var(--hd-on-d-3);
  font-size: 12px;
  letter-spacing: .11em;
}


/* ---------------------------------------------------------------------------
   9. SECTION HEADING

   .section-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:90px;
     align-items:end;margin-bottom:36px}
   .section-heading p:not(.eyebrow){max-width:460px}

   Heading left, supporting paragraph and link right, BASELINE-ALIGNED AT THE
   BOTTOM. align-items:end is the detail that makes it read as one line rather
   than two stacked columns.
   --------------------------------------------------------------------------- */

main :is(.band-head, .pw-hd, .rc-spine__hd, .ins-index__head, .pw-deals__hd,
  .learn-glossary__head, .learn-assets__head, .learn-chapters__head) {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 90px;
  align-items: end;
  margin-bottom: var(--hd-band-header-gap);
}
main :is(.band-head, .pw-hd, .rc-spine__hd) p:not(.eyebrow) { max-width: 460px; }

@media (max-width: 1150px) {
  main :is(.band-head, .pw-hd, .rc-spine__hd, .ins-index__head, .pw-deals__hd,
    .learn-glossary__head, .learn-assets__head, .learn-chapters__head) { gap: 40px; }
}
@media (max-width: 650px) {
  main :is(.band-head, .pw-hd, .rc-spine__hd, .ins-index__head, .pw-deals__hd,
    .learn-glossary__head, .learn-assets__head, .learn-chapters__head) {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 26px;
  }
}


/* ---------------------------------------------------------------------------
   10. MOBILE

   Verified at 600px, not at 375: headless Chrome clips the right edge under
   about 500px and reports a false overflow. overflow-x:clip is the guard.
   --------------------------------------------------------------------------- */

html, body { overflow-x: clip; }

@media (max-width: 650px) {
  [class*="ground-"] { padding-block: 51px; }   /* .section{padding:51px 0} */
  .ground-deep { padding: 40px 0 24px; }
}

/* ============================================================================
   §9 — THE CHROME, ON HIS TREATMENT

   index.html is Adam's file verbatim, so it carries his header and footer.
   Every other page carried ours, and the masthead changed under you the moment
   you left the homepage. That is the first thing he would have seen.

   This is his treatment applied to our markup: his lockup proportions, his nav
   type, his flat gold button, his header hairline, his footer ground. The nav
   LABELS and HREFS stay ours, because his are in-page anchors (#experience,
   #approach, #access) that only resolve on the homepage. Interior pages need
   destinations that exist.

   Loaded after chrome.css, so plain-class rules here win on source order.
   Every value below is quoted from adam-home.css.
   ========================================================================== */

/* --- the bar. his: min-height 91px, gap 28px, #ffffff20 hairline ---------- */
/* NOT var(--navy): four stylesheets declare that name and cockpit-page.css
   resolves it to the footer deep, which painted the bar #06131e instead of
   his #071725. Pin the literal the way his file does. */
.ck-hd{background:#071725;border-bottom:1px solid #ffffff20;box-shadow:none}
.ck-hd__in{max-width:1280px;min-height:91px;height:auto;gap:28px;
  padding:0 clamp(20px,4.4vw,48px)}

/* --- the mark. his bars are skewed, flat gold, and taller than ours ------- */
.ck-brand{gap:11px}
.ck-brand__mark--stack{width:32px;height:37px;gap:4px}
.ck-brand__mark--stack i{width:5px;border-radius:0;clip-path:none;
  background:#d7ab56;transform:skewY(-23deg)}
.ck-brand__mark--stack i:nth-child(1){height:18px}
.ck-brand__mark--stack i:nth-child(2){height:27px}
.ck-brand__mark--stack i:nth-child(3){height:36px}
.ck-brand__mark--stack i:nth-child(4){height:25px}

/* --- the wordmark. his is 28px/600 at .12em over a 12px tagline ----------- */
.ck-brand__type{display:flex;flex-direction:column;gap:6px}
.ck-brand__type b{font-size:28px;font-weight:600;letter-spacing:.12em;line-height:1}
.ck-brand__type small{font-family:var(--font,"DM Sans",Arial,sans-serif);
  font-size:12px;letter-spacing:.045em;line-height:1;text-transform:none;
  /* .brand-word small declares no colour and inherits .site-header{color:#fff}.
     #d4dce1 is his NAV link colour, the next line down in his file. */
  color:inherit}

/* --- the nav. his are plain links, not pills ----------------------------- */
.ck-nav{gap:27px}
/* .ck-hd scope, not a bare .ck-nav: cockpit.css declares `body.cockpit a
   {color:inherit}` at (0,2,1), which outranks `.ck-nav a` at (0,1,1) and left
   the nav white on every cockpit page while the rest had his #d4dce1. Matching
   that specificity is enough, because this sheet already loads after it. */
.ck-hd .ck-nav a{min-height:auto;padding:0;border-radius:0;background:none;
  font-size:14px;font-weight:400;color:#d4dce1;letter-spacing:0;opacity:1;
  /* his .nav a sets no line-height and inherits body{line-height:1.65} */
  line-height:1.65}
.ck-hd .ck-nav a:hover{background:none;color:#d7ab56}
.ck-hd .ck-nav a[aria-current="page"]{background:none;box-shadow:none;color:#d7ab56}

/* --- the buttons. flat fill, 1px border the same colour, no lift ---------- */
.ck-hd__actions{gap:15px}
/* .btn{...gap:25px...} / .btn-small{min-height:44px;padding:12px 17px;font-size:14px}
   .btn-small does not redeclare gap, so the label-to-glyph gap is 25px at
   desktop. The 10px is his mobile value and stays in the 650px query below. */
.ck-hd .ck-btn{min-height:44px;height:auto;padding:12px 17px;border-radius:3px;
  font-size:14px;font-weight:700;gap:25px;line-height:1.4}
.ck-hd .ck-btn--gold{color:#071725;background:#d7ab56;border:1px solid #d7ab56}
.ck-hd .ck-btn--gold:hover{background:#e6c17d;box-shadow:0 4px 18px #0001;transform:none}
.ck-hd .ck-btn--ghostd{color:#fff;border:1px solid #ffffff4d;background:transparent}
.ck-hd .ck-btn--ghostd:hover{background:rgba(255,255,255,.07)}

/* --- the footer. his deepest ground, below every band on the page --------- */
/* his footer sets no line-height and inherits body{line-height:1.65} */
.ck-ft{background:#06131e;color:#c0cdd6;padding:46px 0 27px;border-top:0;font-size:16px;line-height:1.65}
/* .footer-disclosures{padding:24px 0} + p{font-size:12px;line-height:1.8;color:#abbcc8}
   .footer-bottom{...padding-top:19px;font-size:12px}
   Our 13px fine-print floor was written for in-page body text and was pinning
   these with !important. His legal block runs at 12px on #abbcc8, which
   measures 9.67:1 — clear of AA at that size. The floor now excludes the
   footer rather than being fought with another !important. */
.ck-ft__disc{font-size:12px;line-height:1.8;color:#abbcc8;padding:24px 0}
.ck-ft__base{font-size:12px;line-height:1.65}
.ck-ft__in{max-width:1280px;padding:0 clamp(20px,4.4vw,48px)}
.ck-ft .ck-brand__type small{display:block;font-size:12px}
.ck-ft .ck-brand__type b{font-size:25px}

@media(max-width:940px){
  .ck-hd__in{min-height:77px;gap:20px}
  .ck-nav{gap:17px}
  .ck-nav a{font-size:13px}
  .ck-brand__type b{font-size:25px}
  .ck-brand__type small{font-size:12px;letter-spacing:0}
}
@media(max-width:650px){
  .ck-brand{gap:8px}
  .ck-brand__mark--stack{width:27px;height:31px;gap:3px}
  .ck-brand__mark--stack i{width:4px}
  .ck-brand__mark--stack i:nth-child(1){height:14px}
  .ck-brand__mark--stack i:nth-child(2){height:21px}
  .ck-brand__mark--stack i:nth-child(3){height:29px}
  .ck-brand__mark--stack i:nth-child(4){height:20px}
  .ck-brand__type b{font-size:22px;letter-spacing:.1em}
  .ck-brand__type small{display:none}
  .ck-hd__actions{gap:9px}
  .ck-hd .ck-btn{font-size:13px;padding:11px 12px;gap:10px;min-height:42px}
}