/* Door pages (Phase 4): the homepage's light plaster world for reading-heavy pages. Tokens in /src/site/tokens.css.
   First page: /leadership (four topics in one card; an obsidian call slab carries the gold action). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; } /* the header scrolls away (November 1) */
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--plaster); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, figure, blockquote { margin: 0; }
::selection { background: rgba(218,165,32,.3); color: var(--ink); }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------------ header: the homepage's light bar, opaque */
.dbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad-x); background: var(--plaster); box-shadow: 0 1px 0 rgba(17,20,17,.07); }
.dbar__logo img { height: 64px; width: auto; }
.dbar__nav { display: flex; align-items: center; gap: 34px; }
.dbar__nav a { font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 6px 2px; border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease-out); }
.dbar__nav a[aria-current] { border-color: rgba(17,20,17,.45); }
@media (hover: hover) and (pointer: fine) { .dbar__nav a:hover { border-color: rgba(17,20,17,.45); } }

/* ------------------------------------------------------------------ links (the gold button, quotes and footer are in /src/site/shared.css) */
.tlink--arrow svg { flex: none; width: 18px; height: 18px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tlink { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(17,20,17,.32); text-decoration-thickness: 1px;
  text-underline-offset: .3em; transition: text-decoration-color 160ms ease; }
.tlink--arrow { display: inline-flex; align-items: center; gap: 10px; }
.tlink--arrow svg { stroke: var(--slate); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tlink:hover { text-decoration-color: var(--ink); } .tlink--arrow:hover svg { transform: translateX(3px); } }

/* ------------------------------------------------------------------ statistics: the figure, then the source and year */
.stat { font-size: 16px; line-height: 1.5; color: var(--charcoal-soft); max-width: 36em; text-wrap: pretty; }
.stat__n { font-weight: 500; color: var(--ink); }
.stat__src { display: block; margin-top: 4px; font-size: 13.5px; color: var(--slate); letter-spacing: .005em; }
.stat__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ first screen */
.first { position: relative; padding: 0 var(--pad-x) 12vh; overflow: clip; }
/* the head leaves room on the right for the L2 plate: its gold roots grow toward the topics card and stop short of it */
.first__head { position: relative; z-index: 1; padding: clamp(24px, 3.6vh, 44px) 0 clamp(30px, 4vh, 48px); max-width: min(720px, 56vw); }
.first__top { position: relative; }
/* the roots stop short of the card and fade out above it: gold never sits over a topic nobody picked
   (Brand Design Director, October 14; the rule of the homepage doors) */
.first__plate { position: absolute; z-index: 0; bottom: 16px; pointer-events: none;
  --pw: clamp(520px, 42vw, 620px);
  width: var(--pw); right: calc(var(--pad-x) * -1 + var(--pw) * 0.06);
  /* fade the plate into the ground on every side */
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 30%, #000 74%, transparent 96%), linear-gradient(to bottom, transparent 6%, #000 34%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 4%, #000 30%, #000 74%, transparent 96%), linear-gradient(to bottom, transparent 6%, #000 34%, #000 86%, transparent 100%);
  mask-composite: intersect; }
.first__plate img { width: 100%; height: auto; }
.first__title { font-weight: 500; font-size: clamp(42px, 3.8vw, 56px); line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; }
.first__lede { margin-top: 20px; font-size: 20px; line-height: 1.5; color: var(--charcoal-soft); max-width: 34em; text-wrap: pretty; }
.stat--hero { margin-top: 18px; max-width: 46em; }

/* the topics card: the rail is its header; the panel below it reads left and calls from the obsidian slab right */
.topics { position: relative; z-index: 1; background: #FBF8F1; border: 1px solid rgba(17,20,17,.09); border-radius: 18px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px rgba(37,42,38,.13), 0 2px 6px rgba(37,42,38,.08); }
.rail { position: relative; display: flex; border-bottom: 1px solid rgba(17,20,17,.1); }
.rail[hidden] { display: none; }
.rail__tab { flex: 1 1 auto; min-height: 64px; padding: 18px 26px 20px; font: inherit; font-size: clamp(16px, 1.25vw, 19px); font-weight: 400; text-align: left;
  color: var(--charcoal-soft); background: none; border: 0; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; }
.rail__tab + .rail__tab { border-left: 1px solid rgba(17,20,17,.07); }
.rail__tab[aria-selected="true"] { color: var(--ink); font-weight: 500; background: rgba(17,20,17,.04); }
.rail__tab:focus-visible { outline-offset: -6px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .rail__tab[aria-selected="false"]:hover { color: var(--ink); background: rgba(23,48,56,.05); } }
.rail__tab:active { background: rgba(23,48,56,.08); }
/* the chosen topic: a short gold seam along the rail's edge, moved by topics.js (gold marks the crack you picked) */
.rail__seam { position: absolute; left: var(--seam-x, 0); top: var(--seam-y, auto); bottom: var(--seam-b, -1px); width: var(--seam-w, 0); height: 3px;
  background: var(--gold); border-radius: 2px; opacity: 0;
  transition: left 320ms var(--ease-out), top 320ms var(--ease-out), width 320ms var(--ease-out), opacity 200ms ease; }
.rail.is-set .rail__seam { opacity: 1; }

/* without JavaScript: in-page links over every topic shown in order */
.jumps ul { display: flex; flex-wrap: wrap; gap: 6px 26px; list-style: none; padding: 20px 30px; border-bottom: 1px solid rgba(17,20,17,.1); }
.jumps a { font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17,20,17,.3); text-underline-offset: .3em; }
html:not(.no-js) .jumps { display: none; }
/* without JavaScript all four topics stack: only the first keeps the gold button, the others a quiet link
   (one dominant filled action per screen; Brand Design Director, October 14) */
html.no-js .panel + .panel .panel__call .btn--gold { width: auto; justify-content: flex-start; padding: 6px 0; background: none; box-shadow: none;
  color: var(--white); font-size: 17px; text-decoration: underline; text-decoration-color: rgba(247,243,234,.4); text-underline-offset: .3em; }
html.no-js .panel + .panel .panel__call .btn--gold svg { stroke: var(--white); }
html.no-js .panel + .panel .panel__call .btn--gold:hover { transform: none; }

.panel { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); grid-template-areas: "read call" "quote call"; grid-template-rows: auto 1fr; }
.panel + .panel { border-top: 1px solid rgba(17,20,17,.1); }
html:not(.no-js) .panel + .panel { border-top: 0; }
.panel[hidden] { display: none; }
.panel:focus-visible { outline-offset: -4px; border-radius: 16px; }
.panel__read { grid-area: read; padding: clamp(28px, 2.6vw, 38px) clamp(24px, 3.2vw, 46px) 0; }
.panel__quote { grid-area: quote; padding: 0 clamp(24px, 3.2vw, 46px) clamp(28px, 2.6vw, 38px); }
/* without JavaScript each topic is a real heading above its lines (with JavaScript the tab names it) */
.panel__h { font-size: clamp(25px, 2.1vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); margin-bottom: 18px; }
html:not(.no-js) .panel__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the topic checklist (Aylam, October 14, round 3): short first-person lines the visitor ticks, so no line has to fit everyone.
   A ticked line gets a short flat gold seam on its left and Ink 500: gold marks what the visitor picked. */
.checks { margin: 0; padding: 0; border: 0; min-width: 0; }
.checks__ask { padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--charcoal-soft); text-wrap: balance; }
.checks__list { list-style: none; padding: 0; display: grid; gap: 2px; max-width: 34em; }
.check { --box: 22px; position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 16px; margin: 0 -14px 0 -18px; padding: 9px 14px 9px 18px;
  font-size: clamp(19px, 1.45vw, 21.5px); line-height: 1.32; letter-spacing: -.012em; color: var(--graphite); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color 160ms ease; }
/* the row's hover and press tint starts right of the seam, so a ticked line never reads as a bordered card */
.check::after { content: ""; position: absolute; z-index: -1; inset: 0 0 0 8px; border-radius: 10px; transition: background-color 160ms ease; }
.check__t { text-wrap: pretty; }
/* the real checkbox sits on the drawn box, so it keeps its own focus, keyboard and screen-reader behaviour */
.check__in { position: absolute; z-index: 1; left: 18px; top: calc(9px + (1lh - var(--box)) / 2); width: var(--box); height: var(--box); margin: 0; opacity: 0; cursor: pointer; }
.check__box { flex: none; position: relative; width: var(--box); height: var(--box); margin-top: calc((1lh - var(--box)) / 2);
  border: 1.5px solid rgba(17,20,17,.55); border-radius: 6px; background: rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(17,20,17,.07);
  transition: background-color 160ms ease, border-color 160ms ease; }
.check__box svg { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: var(--white); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset 220ms var(--ease-out); }
/* the seam: 3px of flat gold, the rail seam's idiom, grown from its centre when the line is ticked */
.check::before { content: ""; position: absolute; left: 0; top: calc(9px + (1lh - var(--box)) / 2 + 1px); width: 3px; height: calc(var(--box) - 2px);
  border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 240ms var(--ease-out); }
.check:has(.check__in:checked) { color: var(--ink); font-weight: 500; }
.check:has(.check__in:checked)::before { transform: scaleY(1); }
.check__in:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check__in:checked + .check__box svg { stroke-dashoffset: 0; }
.check__in:focus-visible + .check__box { outline: 2px solid var(--slate); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .check:hover { color: var(--ink); }
  .check:hover::after { background: rgba(23,48,56,.05); }
  .check:hover .check__box { border-color: rgba(17,20,17,.8); }
}
.check:active::after { background: rgba(23,48,56,.08); }
/* without JavaScript the lines are a plain list under the topic's heading: nothing to tick, so no ask and no boxes */
html.no-js .checks__ask, html.no-js .check__in, html.no-js .check__box { display: none; }
html.no-js .check { cursor: auto; gap: 14px; color: var(--ink); }
html.no-js .check::before { position: static; flex: none; width: 6px; height: 6px; margin-top: calc(.5lh - 3px); transform: none; background: var(--slate); border-radius: 50%; }
html.no-js .check::after { content: none; }
.stat--panel { margin-top: 22px; }
/* door-page quotes: even wrapping, attribution a step tighter than the homepage's */
.quote p { text-wrap: pretty; }
.quote figcaption { margin-top: 14px; font-size: 15.5px; }
.quote--panel { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(17,20,17,.09); max-width: 38em; }
.quote--panel p { font-size: 16px; line-height: 1.5; color: var(--graphite); }
.quote--panel figcaption { font-size: 14.5px; }

/* the call slab: obsidian, no glow (gold is repair, not atmosphere), so the gold action reads as the one thing to do (Aylam, October 14: the emphasis of the
   first-call card, without its mineral tile) */
.panel__call { grid-area: call; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(32px, 3.4vw, 48px) clamp(26px, 3vw, 44px); color: var(--white); isolation: isolate;
  /* real concrete (the homepage's opening wall, a crack-free patch) under a dark grade: material, not flat CSS */
  background-color: var(--canvas);
  background-image: linear-gradient(180deg, rgba(9,11,9,.6) 0%, rgba(9,11,9,.82) 100%), url(/public/plates/d1-slab.jpg); background-size: cover; background-position: center; }
.panel__start { font-size: clamp(22px, 1.75vw, 27px); font-weight: 500; line-height: 1.3; letter-spacing: -.012em; text-wrap: balance; max-width: 16em; }
.panel__call .btn--gold { margin-top: 30px; }
/* after the first tick in a topic, a line above the gold button: the ticked lines are what to bring to the call
   (CEO's draft wording, for Aylam's approval at the next page gate). It opens by height, so nothing jumps. */
.ticked { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows 300ms var(--ease-out), opacity 160ms ease, visibility 0s linear 300ms; }
.ticked__t { min-height: 0; overflow: hidden; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--white); text-wrap: balance; }
.ticked__t::before { content: ""; display: block; height: 24px; }
.panel:has(.check__in:checked) .ticked { grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows 300ms var(--ease-out), opacity 220ms ease 90ms, visibility 0s; }
.panel__line { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--warm-gray); max-width: 25em; text-wrap: pretty; }
.panel__call :focus-visible, .dclose :focus-visible { outline-color: var(--champagne); }
.panel.is-in .panel__read, .panel.is-in .panel__start { animation: panel-in 260ms var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ who you'd work with */
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "bowl text" "bowl quote" "logos logos"; gap: 0 6vw;
  align-items: start; padding: 14vh var(--pad-x) 10vh; }
.who__bowl { grid-area: bowl; max-width: 480px; }
.who__text { grid-area: text; }
.who__title { font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.022em; line-height: 1.12; margin-bottom: 20px; }
.who__text p { font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 34em; }
.who__text p + p { margin-top: 10px; }
.who__more { margin-top: 18px !important; }
.who .quote--lead { grid-area: quote; margin-top: 7vh; max-width: 36em; }
.quote--lead p { font-size: clamp(22px, 1.8vw, 27px); line-height: 1.38; letter-spacing: -.012em; }


/* ------------------------------------------------------------------ company-sponsored */
.sponsor { margin: 0 var(--pad-x); padding: 8vh 0 14vh; border-top: 1px solid rgba(17,20,17,.1);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 6vw; align-items: baseline; }
.sponsor__title { font-size: clamp(26px, 2.1vw, 32px); font-weight: 500; letter-spacing: -.018em; line-height: 1.15; text-wrap: balance; }
.sponsor__line { font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 32em; grid-column: 2; }
.sponsor__more { grid-column: 2; margin-top: 8px; font-size: 17px; }
/* /leadership: a quiet second link to the budget page beside the first (Aylam, October 27) */
.sponsor__more:has(.sponsor__or) { display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ------------------------------------------------------------------ the close: a quiet slab of the same obsidian, then the dark footer */
.dclose { padding: 2vh var(--pad-x) 12vh; }
.dclose__slab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 48px; color: var(--white);
  padding: clamp(30px, 3.6vw, 52px) clamp(26px, 3.6vw, 56px); border-radius: 18px; background-color: var(--canvas);
  background-image: linear-gradient(180deg, rgba(9,11,9,.6) 0%, rgba(9,11,9,.82) 100%), url(/public/plates/d1-slab.jpg); background-size: cover; background-position: center;
  box-shadow: 0 18px 40px rgba(37,42,38,.16), 0 2px 6px rgba(37,42,38,.1); }
.dclose__title { font-size: clamp(26px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.dclose__line { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--warm-gray); max-width: 34em; text-wrap: pretty; }
.foot :focus-visible { outline-color: var(--champagne); }

/* ------------------------------------------------------------------ shared by the door pages with forms and questions (moved here from
   beyond-success.css on October 15, 2026, when /ai was built): the tension rows, the mineral button, the waitlist card, fields and
   options, two quotes under "Who you'd work with", and the questions */
/* ------------------------------------------------------------------ the tension, in the visitor's words, then the statistic */
.tension { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 26px 6vw; align-items: start;
  margin: 0 var(--pad-x); padding: 12vh 0 12vh; border-top: 1px solid rgba(17,20,17,.1); }
.tension__h { font-size: clamp(27px, 2.3vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--charcoal-soft); text-wrap: balance; }
.tension__q { display: block; margin-top: 10px; color: var(--ink); }
.tension__body p { font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 34em; text-wrap: pretty; }
.tension__body p + p { margin-top: 14px; }
/* the three questions as a short list, ruled, without numbers and indented under their lead line (Aylam, October 15) */
.tension__qs { list-style: none; margin: 18px 0 24px; padding: 0 0 0 32px; }
.tension__qs li { display: block; padding: 16px 0;
  border-top: 1px solid rgba(17,20,17,.1); font-size: 20px; line-height: 1.45; color: var(--ink); max-width: 34em; text-wrap: pretty; }
.tension__qs li:last-child { border-bottom: 1px solid rgba(17,20,17,.1); }
.btn--small { padding: 12px 20px; font-size: 16px; }
.btn--mineral svg { stroke: var(--white); }
.wl { padding: 6vh var(--pad-x) 12vh; scroll-margin-top: 24px; }
.wl__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 6vw; align-items: start;
  padding: clamp(28px, 3.4vw, 52px); background: #FBF8F1; border: 1px solid rgba(17,20,17,.09); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px rgba(37,42,38,.13), 0 2px 6px rgba(37,42,38,.08); }
.wl__h { font-size: clamp(26px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.wl__line { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--graphite); max-width: 26em; text-wrap: pretty; }
.wl__form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.wl__form > .field--set, .wl__form > .field--retreat, .wl__submit { grid-column: 1 / -1; }
.wl__status:empty { display: none; }
.wl__status { margin-top: 14px; padding: 14px 18px; font-size: 16px; line-height: 1.5; color: var(--ink); background: rgba(23,48,56,.06); border-radius: 10px; }
/* the consent line: always visible, with the address in a small bubble (Aylam, November 5) */
.cn { position: relative; margin-top: 12px; font-size: 10px; line-height: 1.45; color: var(--charcoal-soft); text-wrap: pretty; }
.cn details { display: inline; }
.cn summary { display: inline; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; list-style: none; }
.cn summary::-webkit-details-marker { display: none; }
.cn__bubble { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: min(26em, 76vw); margin: 0; padding: 10px 12px; font-size: 12px; color: var(--charcoal-soft); background: #FBF8F1; border: 1px solid rgba(17,20,17,.12); border-radius: 10px; box-shadow: 0 8px 24px rgba(17,20,17,.12); }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { display: block; padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.field__in { width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); background: rgba(255,255,255,.7);
  border: 1px solid rgba(17,20,17,.55); border-radius: 10px; transition: border-color 160ms ease, background-color 160ms ease; }
.field__in::placeholder { color: var(--charcoal-soft); }
.field__in:hover { border-color: rgba(17,20,17,.8); }
.field__in:focus-visible { border-color: var(--slate); outline-offset: 2px; }
.field__in[aria-invalid="true"] { border-color: var(--error); }
.field__err { margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--error); }
.field--set .field__label { margin-bottom: 4px; }
/* an option: the door pages' checkbox box with no gold (gold marks what a visitor picks on the page, not form answers) */
.opt { --box: 22px; position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 7px 0; font-size: 16.5px; line-height: 1.45;
  color: var(--graphite); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opt__in { position: absolute; z-index: 1; left: 0; top: calc(7px + (1lh - var(--box)) / 2); width: var(--box); height: var(--box); margin: 0; opacity: 0; cursor: pointer; }
.opt .check__box { margin-top: calc((1lh - var(--box)) / 2); }
.opt__in:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.opt__in:checked + .check__box svg { stroke-dashoffset: 0; }
.opt__in:focus-visible + .check__box { outline: 2px solid var(--slate); outline-offset: 3px; }
.opt__in[aria-invalid="true"] + .check__box { border-color: var(--error); }
.opt__t { text-wrap: pretty; }
.opt__t .tlink { margin-left: 2px; }
@media (hover: hover) and (pointer: fine) { .opt:hover .check__box { border-color: rgba(17,20,17,.8); } }
.field--consent .opt { font-size: 15.5px; color: var(--charcoal-soft); }
.wl__submit { margin-top: 4px; }
/* the secondary filled action on plaster: Deep Mineral (the foundation's mineral actions on light surfaces), so the page's one gold
   stays with the free call (Brand Design Director M4; it was Ink) */
.btn--mineral { padding: 17px 28px; color: var(--white); background: var(--mineral); border: 0; cursor: pointer; font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(247,243,234,.12), 0 10px 22px rgba(37,42,38,.2), 0 2px 4px rgba(37,42,38,.16); }
@media (hover: hover) and (pointer: fine) { .btn--mineral:hover { transform: translateY(-2px); background: #1B3A44; box-shadow: inset 0 1px 0 rgba(247,243,234,.14), 0 14px 28px rgba(37,42,38,.24), 0 3px 6px rgba(37,42,38,.18); } }
.btn--mineral:active { transform: translateY(1px); transition-duration: 100ms; box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 4px 10px rgba(37,42,38,.18); }
.wl__nojs { grid-column: 2; font-size: 17px; line-height: 1.5; color: var(--graphite); }
html:not(.no-js) .wl__nojs { display: none; }
html.no-js .wl__form { display: none; }
.who__quotes { grid-area: quote; margin-top: 7vh; }
.who .who__quotes .quote--lead { margin-top: 0; }
.quote--second { margin-top: 34px; max-width: 34em; }
.quote--second p { font-size: 19px; line-height: 1.5; color: var(--graphite); }
/* ------------------------------------------------------------------ questions: native disclosure rows */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 6vw; align-items: start;
  margin: 0 var(--pad-x); padding: 8vh 0 12vh; border-top: 1px solid rgba(17,20,17,.1); }
.faq__h { font-size: clamp(28px, 2.4vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.qa { border-bottom: 1px solid rgba(17,20,17,.1); }
.qa:first-child { border-top: 1px solid rgba(17,20,17,.1); }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px 20px 0; list-style: none; cursor: pointer;
  font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--ink); border-radius: 6px; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--ease-out); }
.qa[open] .qa__q svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .qa__q:hover { color: var(--slate); } }
.qa__a p { padding: 0 34px 24px 0; font-size: 18px; line-height: 1.55; color: var(--graphite); max-width: 36em; text-wrap: pretty; }
.qa__a .tlink--arrow { margin-left: 6px; }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 980px) {
  /* the tick seam clear of the card's edge, so it reads as a mark beside the line, not a notch in the border (Brand Design Director M1) */
  .check::before { left: 6px; }
  .check::after { inset: 0 0 0 12px; }
  .panel { grid-template-columns: 1fr; grid-template-areas: "read" "call" "quote"; grid-template-rows: auto; }
  .panel__read { padding-bottom: 30px; }
  .panel__quote { padding-top: 4px; }
  .quote--panel { border-top: 0; }
  .rail { display: grid; grid-template-columns: 1fr 1fr; }
  .rail__tab + .rail__tab { border-left: 0; }
  .rail__tab:nth-child(even) { border-left: 1px solid rgba(17,20,17,.07); }
  .rail__tab:nth-child(n+3) { border-top: 1px solid rgba(17,20,17,.07); }
  .who { grid-template-columns: 1fr; grid-template-areas: "text" "bowl" "quote" "logos"; }
  .who__bowl { margin-top: 5vh; max-width: 420px; }
  .sponsor { grid-template-columns: 1fr; }
  .sponsor__line, .sponsor__more { grid-column: 1; }
  .dclose__slab { grid-template-columns: 1fr; }
  .dclose__slab .btn--gold { justify-self: start; } /* as wide as its words, like the homepage close (Aylam, November 1) */
  .tension, .faq { grid-template-columns: 1fr; }
  .wl__card { grid-template-columns: 1fr; }
  .wl__nojs { grid-column: 1; }
}
@media (max-width: 700px) {
  .dbar { padding: 14px 18px; }
  .dbar__logo img { height: 48px; }
  .dbar__nav { gap: 18px; }
  .dbar__nav a { font-size: 15px; white-space: nowrap; }
  .first { padding-bottom: 9vh; }
  .first__head { max-width: none; padding: 30px 0 156px; }
  /* the roots live in the gap above the card, right of centre, clear of every word */
  .first__plate { --pw: 290px; right: -40px; } /* fixed: the clearance depends on the fixed gap above the card */
  .first__title { font-size: clamp(34px, 10.5vw, 42px); }
  .first__lede { font-size: 18px; margin-top: 16px; }
  .stat { font-size: 15px; }
  .rail__tab { min-height: 56px; padding: 14px 16px 16px; font-size: 16px; line-height: 1.25; }
  .check { font-size: 19px; }
  .quote--panel p { font-size: 16px; }
  .panel__call .btn--gold { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
  .who { padding-top: 10vh; }
  .who__text p, .sponsor__line { font-size: 17.5px; }
  .quote--lead p { font-size: 21px; }
  .dclose .btn--gold { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
  .foot { padding: 22px 18px 28px; }
  .tension { padding: 9vh 0; }
  .tension__body p { font-size: 17.5px; }
  .tension__qs { padding-left: 20px; }
  .tension__qs li { font-size: 18px; }
  .wl { padding-bottom: 9vh; }
  .wl__form { grid-template-columns: 1fr; }
  .btn--mineral { width: 100%; justify-content: center; }
  .qa__q { font-size: 17.5px; }
  .qa__a p { font-size: 17px; padding-right: 0; }
}
/* narrow phones: the logo and three header links on one line (About joined them November 1) */
@media (max-width: 380px) {
  .dbar { padding-inline: 14px; }
  .dbar__logo img { height: 42px; }
  .dbar__nav { gap: 12px; }
  .dbar__nav a { font-size: 14px; }
}
/* short and narrow phones: the headline a step smaller so the whole topic rail stays on the first screen
   (Brand Design Director M2, October 15) */
@media (max-width: 360px), (max-width: 700px) and (max-height: 700px) {
  .first__head { padding-top: 22px; padding-bottom: 118px; }
  .first__plate { --pw: 196px; right: -24px; }
  .first__title { font-size: 32px; }
  .first__lede { font-size: 17px; margin-top: 12px; }
  .stat--hero { margin-top: 14px; }
}
@media (hover: none) { .btn--gold:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .panel.is-in .panel__read, .panel.is-in .panel__start { animation: none; }
  .rail__seam, .btn, .tlink--arrow svg, .check::before, .check__box svg, .ticked { transition: none; }
  .qa__q svg { transition: none; }
}