/* ==========================================================================
   Roland Conner Advisory Group — global stylesheet
   Archetype A4. House component library, RCAG token skin.

   Navy, gold and cream, taken from the client's logo sheet. This was the B side
   of an A/B pair until 28 September 2026, when Stephen chose it and retired the
   oxblood original. What was theme-b.css is merged in below, unscoped, and the
   A/B toggle is gone: there is one palette now, and no way to switch.

   CONTRAST. The logo gold is #B68F4B, 2.82:1 on cream, which fails AA for text
   at any size. It is used for rules, arcs, markers and fills, never for words.
   Text accents use #8A6A28 (4.75:1). The logo sheet works the same way: every
   word on it is navy, and the gold is a graphic device.
   ========================================================================== */

:root{
  /* Brand. Two golds: one that can legally carry text, one for decoration. */
  --brand:#8A6A28;              /* 4.75:1 on cream — links, eyebrows, accents */
  --brand-dark:#6E5320; --brand-light:#A17E35;
  --brand-soft:#F3EDE0; --brand-hair:rgba(138,106,40,.26);
  --gold:#B68F4B;               /* decoration only — rules, arcs, dots */
  --gold-lift:#D2B778;
  --accent:#1F3A5F; --accent-soft:#E7EBF1;

  /* Surfaces */
  --bg:#FAF8F5; --surface:#FFFDF9; --surface-alt:#F1EDE4; --raise:#E7E1D4;
  --ink:#0C1924; --ink-mid:#2D3E4E; --muted:#5A6875;
  --border:rgba(12,25,36,.16); --border-soft:rgba(12,25,36,.09);
  --hair:rgba(12,25,36,.28);
  --ink-on-brand:#FAF8F5;

  /* Type */
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Montserrat', system-ui, -apple-system, sans-serif;

  /* Geometry */
  --r-card:14px; --r-pill:50px; --r-input:10px; --r-bar:8px;
  --shadow:0 1px 2px rgba(12,25,36,.035), 0 10px 34px -18px rgba(12,25,36,.22);
  --shadow-lift:0 2px 5px rgba(12,25,36,.05), 0 20px 52px -22px rgba(12,25,36,.3);
  --nav-h:64px; --wrap:1180px; --gut:22px;
}
@media (min-width:960px){ :root{ --nav-h:74px; --gut:40px } }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#C9A96A; --brand-dark:#B08F4E; --brand-light:#DCC48F;
    --brand-soft:#1B2836; --brand-hair:rgba(201,169,106,.30);
    --gold:#C9A96A; --gold-lift:#E0CA97;
    --accent:#8FB0D8; --accent-soft:#16212C;
    --bg:#0B151E; --surface:#111E2A; --surface-alt:#152332; --raise:#1B2C3C;
    --ink:#F2EEE6; --ink-mid:#C5CBD2; --muted:#8B97A3;
    --border:rgba(242,238,230,.18); --border-soft:rgba(242,238,230,.10);
    --hair:rgba(242,238,230,.30);
    --ink-on-brand:#0C1924;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -18px rgba(0,0,0,.8);
    --shadow-lift:0 2px 5px rgba(0,0,0,.45), 0 20px 52px -22px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --brand:#C9A96A; --brand-dark:#B08F4E; --brand-light:#DCC48F;
  --brand-soft:#1B2836; --brand-hair:rgba(201,169,106,.30);
  --gold:#C9A96A; --gold-lift:#E0CA97;
  --accent:#8FB0D8; --accent-soft:#16212C;
  --bg:#0B151E; --surface:#111E2A; --surface-alt:#152332; --raise:#1B2C3C;
  --ink:#F2EEE6; --ink-mid:#C5CBD2; --muted:#8B97A3;
  --border:rgba(242,238,230,.18); --border-soft:rgba(242,238,230,.10);
  --hair:rgba(242,238,230,.30);
  --ink-on-brand:#0C1924;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -18px rgba(0,0,0,.8);
  --shadow-lift:0 2px 5px rgba(0,0,0,.45), 0 20px 52px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg{max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.016em}
p{margin:0}
strong{font-weight:600; color:var(--ink)}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:3px}
::selection{background:var(--brand); color:var(--ink-on-brand)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:3px;
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--brand);color:var(--ink-on-brand);padding:12px 20px;border-radius:0 0 var(--r-input) 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}

/* ============================ Layout ============================ */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
section{padding:76px 0; position:relative}
@media (min-width:960px){ section{padding:112px 0} }
.band-alt{background:var(--surface-alt)}
.stack{display:flex; flex-direction:column; gap:17px}
.measure{max-width:66ch}
.measure-tight{max-width:24ch}
.measure-mid{max-width:40ch}

/* Hairline section rule with registration ticks — identity-manual motif */
.ruled{border-top:1px solid var(--border)}
.ruled::before,.ruled::after{
  content:''; position:absolute; top:-1px; width:1px; height:9px; background:var(--hair);
}
.ruled::before{left:var(--gut)}
.ruled::after{right:var(--gut)}

/* ============================ Type ============================ */
.eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--brand); display:flex; align-items:center;
  gap:11px; margin-bottom:20px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--brand); flex:none; opacity:.55}
.eyebrow.alt{color:var(--accent)} .eyebrow.alt::before{background:var(--accent)}
h1,.h1{font-size:clamp(38px,7vw,74px); line-height:1.02; letter-spacing:-.028em}
h2,.h2{font-size:clamp(27px,4.2vw,42px); line-height:1.12; letter-spacing:-.021em}
h3,.h3{font-size:clamp(19px,2.2vw,23px); line-height:1.26; letter-spacing:-.012em}
.lede{font-size:clamp(17.5px,2.05vw,20.5px); line-height:1.58; color:var(--ink-mid); font-weight:400}
.small{font-size:14.5px; color:var(--muted); line-height:1.62}
.label{font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.serif-body{font-family:var(--font-display); font-size:19px; line-height:1.62}

/* ============================ Buttons ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--font-body); line-height:1.2; letter-spacing:.005em;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
/* The 2px lift moves the button out from under a stationary pointer sitting near
   its bottom edge: hover fires, the button rises, the pointer is outside it,
   hover drops, the button falls back under the pointer, and it flickers forever.
   The fix has to be one-way. A hit area that is enlarged all the time just moves
   the knife edge to the new boundary; this one appears only while hovered and
   only downward, so the hovered region is always a superset of the resting one
   and the pointer can never fall out of what it just entered. */
.btn{position:relative}
.btn:hover::after{content:""; position:absolute; left:0; right:0; top:0; bottom:-4px}
.btn-solid{background:var(--brand); color:var(--ink-on-brand); border-color:var(--brand)}
.btn-solid:hover{background:var(--brand-dark); border-color:var(--brand-dark); box-shadow:var(--shadow)}
.btn-outline{background:transparent; color:var(--brand); border-color:var(--brand-hair)}
.btn-outline:hover{border-color:var(--brand); background:var(--brand-soft)}
.btn-accent{background:var(--accent); color:var(--surface); border-color:var(--accent)}
:root[data-theme="dark"] .btn-accent,:root:not([data-theme="light"]) .btn-accent{color:var(--ink-on-brand)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--ink-mid)}
.btn-sm{padding:9px 19px; font-size:14px}

/* ============================ Mark ============================ */

/* ============================ Header ============================ */
/* The frosted layer lives on ::before, NOT on .site-header itself.
   backdrop-filter makes an element a containing block for its fixed-position
   descendants, and the mobile menu is a fixed child of the header — with the
   filter on the header, `inset:var(--nav-h) 0 0 0` resolved against the 64px
   header box instead of the viewport and the panel collapsed to a sliver. */
.site-header{
  position:sticky; top:0; z-index:900; background:transparent;
  border-bottom:1px solid var(--border-soft);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  transition:opacity .3s;
}
.site-header .nav{position:relative; z-index:1}
@supports not (backdrop-filter:blur(1px)){ .site-header::before{background:var(--bg)} }
.nav{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); height:var(--nav-h); display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:none}
/* The lockup is a drawn wordmark, not type plus a glyph, so it ships as two
   SVGs: one inked for cream grounds, one for navy. Exactly one is displayed at
   any time, chosen by the ground rather than by the colour scheme alone, since
   a light page can still carry a dark hero. */
.brand .rcag-lockup{display:none; width:auto; height:30px}
.brand .rcag-lockup.on-light{display:block}
@media (max-width:520px){ .brand .rcag-lockup{height:25px} }
.site-header.over-dark .brand .rcag-lockup.on-light,
:root[data-theme="dark"] .brand .rcag-lockup.on-light{display:none}
.site-header.over-dark .brand .rcag-lockup.on-dark,
:root[data-theme="dark"] .brand .rcag-lockup.on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .rcag-lockup.on-light{display:none}
  :root:not([data-theme="light"]) .brand .rcag-lockup.on-dark{display:block}
}
/* The footer ground is --surface-alt: cream in light, navy in dark. It shipped
   with only the cream cut, which vanished on the light footer. Same two-cut
   switch as the header, keyed to the theme alone (the footer is never over-dark). */
.site-footer .fb-lock .rcag-lockup{display:none; height:26px; width:auto}
.site-footer .fb-lock .rcag-lockup.on-light{display:block}
:root[data-theme="dark"] .site-footer .fb-lock .rcag-lockup.on-light{display:none}
:root[data-theme="dark"] .site-footer .fb-lock .rcag-lockup.on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-footer .fb-lock .rcag-lockup.on-light{display:none}
  :root:not([data-theme="light"]) .site-footer .fb-lock .rcag-lockup.on-dark{display:block}
}
.brand .full{font-family:var(--font-mono); font-size:9px; font-weight:400; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; display:none; padding-left:11px; margin-left:1px; border-left:1px solid var(--border)}
@media (min-width:1120px){ .brand .full{display:inline-block} }

.nav-toggle{margin-left:auto; width:42px; height:42px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:transparent; border:1px solid var(--border); border-radius:var(--r-input); cursor:pointer}
.nav-toggle span{display:block; width:16px; height:1.5px; background:var(--ink); transition:transform .22s, opacity .22s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:960px){ .nav-toggle{display:none} }

.nav-links{position:fixed; inset:var(--nav-h) 0 0 0; background:var(--bg); padding:24px var(--gut) calc(40px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:none; flex-direction:column; gap:0}
.nav-links.open{display:flex}
body.menu-open{position:fixed; left:0; right:0; width:100%; overflow:hidden}
.nav-links > a{padding:16px 2px; min-height:52px; display:flex; align-items:center; text-decoration:none; color:var(--ink); font-size:17px; font-weight:500; border-bottom:1px solid var(--border-soft)}
.nav-drop-toggle{width:100%; text-align:left; padding:16px 2px; min-height:52px; background:transparent; border:none; border-bottom:1px solid var(--border-soft); color:var(--ink); font-size:17px; font-weight:500; font-family:var(--font-body); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px}
.nav-drop-toggle .caret{font-size:10px; color:var(--muted); transition:transform .22s}
.nav-drop-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-drop-menu{display:none; padding:6px 0 12px 14px; flex-direction:column; gap:0}
.nav-drop-menu.open{display:flex}
.nav-drop-label{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:10px 0 6px}
.nav-drop-menu a{padding:12px 0; min-height:44px; display:flex; align-items:center; text-decoration:none; color:var(--ink-mid); font-size:15px}
.nav-drop-menu a:hover{color:var(--brand)}
.nav-links .btn{margin-top:22px}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
@media (max-width:959px){ .nav-cta{margin-left:auto; order:2} .nav-toggle{order:3; margin-left:0} }

@media (min-width:960px){
  .nav-links{position:static; inset:auto; background:none; padding:0; overflow:visible; display:flex; flex-direction:row; align-items:center; gap:2px; margin-left:14px}
  .nav-links > a{border-bottom:none; padding:9px 13px; font-size:14.5px; border-radius:var(--r-pill); font-weight:500}
  .nav-links > a:hover{background:var(--surface-alt)}
  .nav-drop{position:relative}
  .nav-drop-toggle{width:auto; border-bottom:none; padding:9px 13px; font-size:14.5px; border-radius:var(--r-pill)}
  .nav-drop-toggle:hover{background:var(--surface-alt)}
  .nav-drop-menu{position:absolute; top:calc(100% + 10px); left:0; min-width:310px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-lift); padding:16px 18px 18px; z-index:950}
  .nav-drop-menu a{padding:9px 8px; border-radius:8px}
  .nav-drop-menu a:hover{background:var(--surface-alt); color:var(--brand)}
  .nav-links .btn{margin-top:0; margin-left:10px}
}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--ink-mid); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--ink-mid); color:var(--ink)}

/* ============================ Hero ============================ */
.hero{padding:72px 0 0; overflow:hidden}
@media (min-width:960px){ .hero{padding:104px 0 0} }
.hero-inner{position:relative}
.hero .eyebrow{margin-bottom:26px}
.hero h1{max-width:13ch}
.hero .lede{max-width:52ch; margin-top:26px}
.hero-figure{
  position:absolute; right:-4%; top:-30px; width:min(30vw,300px); opacity:.055;
  pointer-events:none; z-index:0;
}
.hero-figure svg{width:100%; height:auto; display:block}
.hero-inner > *{position:relative; z-index:1}
@media (max-width:900px){ .hero-figure{display:none} }

/* Pathway split */
.paths{display:grid; grid-template-columns:1fr; gap:1px; margin-top:60px; background:var(--border); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
@media (min-width:820px){ .paths{grid-template-columns:1fr 1fr} }
.path{
  background:var(--bg); padding:34px 0 36px; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; position:relative; transition:background .25s;
}
@media (min-width:820px){ .path{padding:40px 34px 42px} .path:first-child{padding-left:0} .path:last-child{padding-right:0} }
.path::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.path.pro::after{background:var(--accent)}
.path:hover::after{transform:scaleX(1)}
.path:hover{background:var(--surface)}
.path .who{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--brand); margin-bottom:16px}
.path.pro .who{color:var(--accent)}
.path h2{font-size:clamp(22px,2.9vw,30px); margin-bottom:13px; letter-spacing:-.018em}
.path p{color:var(--ink-mid); font-size:16px; flex:1; max-width:44ch}
.path .go{margin-top:24px; font-weight:600; font-size:14.5px; color:var(--brand); display:inline-flex; align-items:center; gap:9px}
.path.pro .go{color:var(--accent)}
.path:hover .go .arr{transform:translateX(5px)}
.path .arr{transition:transform .3s cubic-bezier(.2,.7,.3,1); display:inline-block}

/* ============================ Cards & grids ============================ */
.grid{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:700px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .grid-3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--surface); padding:30px 28px 32px; transition:background .25s; display:flex; flex-direction:column}
a.card{text-decoration:none; color:inherit}
a.card:hover{background:var(--bg)}
.card h3{margin-bottom:11px}
.card p{color:var(--ink-mid); font-size:15.5px; flex:1; line-height:1.62}
.card .go{margin-top:20px; font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--brand)}

/* ============================ Stages ============================ */
.stages{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
/* the stage name and the plain-language question it answers, as one chip */
.stage{display:inline-flex; align-items:baseline; gap:10px; padding:11px 21px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); font-size:14.5px; color:var(--ink)}
.stage .st-n{font-weight:600}
.stage .st-q{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; color:var(--muted); font-weight:400}
.dark-band .stage .st-q{color:var(--d-soft)}
@media (max-width:620px){ .stage{flex-direction:column; align-items:flex-start; gap:3px; border-radius:14px; padding:10px 16px} .stage .dot{display:none} }
.r-q{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.01em; color:var(--ink-mid); font-weight:400; margin-left:12px; white-space:nowrap}
@media (max-width:620px){ .r-q{display:block; margin-left:0; margin-top:5px; white-space:normal} }
.dark-band .r-q{color:var(--d-soft)}
.dark-band .sec-head .sh-r,.dark-band .sec-head .sh-r a{color:var(--d-soft)}
.dark-band .sec-head{border-bottom-color:var(--d-line)}
.dark-band .rules{border-top-color:var(--d-line)}
.dark-band .rules .rule{border-bottom-color:var(--d-line)}
.dark-band .rules .rule .r-h{color:var(--d-ink)}
.dark-band .rules .rule .r-b{color:var(--d-mid)}
.stage .dot{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.stage-arrow{display:flex; align-items:center; color:var(--muted); font-size:12px; opacity:.7}

/* ============================ Rules list ============================ */
.rules{border-top:1px solid var(--border)}
.rules .rule{padding:26px 0; border-bottom:1px solid var(--border-soft); display:grid; grid-template-columns:1fr; gap:8px}
@media (min-width:860px){ .rules .rule{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:baseline} }
.rules .rule .r-h{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:19px; line-height:1.34; letter-spacing:-.012em}
.rules .rule .r-b{color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* ============================ Ledger ============================ */
.ledger{border-top:1px solid var(--border); max-width:640px}
.ledger .row{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--border-soft)}
.ledger .lbl{font-size:15px; color:var(--ink-mid)}
.ledger .lbl em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px}
.ledger .val{font-family:var(--font-mono); font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.ledger .row.tot{border-bottom:2px solid var(--brand)}
.ledger .row.tot .lbl{font-weight:600; color:var(--ink)}
.ledger .row.tot .val{color:var(--brand); font-weight:500}

/* ============================ Narrative ============================ */
.narrative{border-left:1px solid var(--brand-hair); padding-left:30px; display:flex; flex-direction:column; gap:20px; max-width:60ch}
.narrative p{font-family:var(--font-display); font-size:19.5px; line-height:1.6; color:var(--ink)}
.narrative p.aside{font-family:var(--font-body); font-size:15px; color:var(--muted)}
.pullquote{font-family:var(--font-display); font-size:clamp(24px,3.6vw,38px); line-height:1.26; font-weight:600; color:var(--brand); max-width:19ch; letter-spacing:-.022em}

/* ============================ Definition rows ============================ */
.defs{display:flex; flex-direction:column; border-top:1px solid var(--border)}
.defs .d{display:grid; grid-template-columns:1fr; gap:5px; padding:22px 0; border-bottom:1px solid var(--border-soft)}
@media (min-width:760px){ .defs .d{grid-template-columns:230px 1fr; gap:34px} }
.defs .d dt{font-weight:600; color:var(--ink); font-size:15.5px; font-family:var(--font-body)}
.defs .d dd{margin:0; color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* ============================ FAQ ============================ */
.faq{border-top:1px solid var(--border); max-width:78ch}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-q{width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:23px 40px 23px 0; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); position:relative; line-height:1.38; letter-spacing:-.012em}
.faq-q::after{content:''; position:absolute; right:8px; top:50%; width:11px; height:1.5px; background:var(--brand); transform:translateY(-50%)}
.faq-q::before{content:''; position:absolute; right:13px; top:50%; width:1.5px; height:11px; background:var(--brand); transform:translateY(-50%); transition:transform .25s}
.faq-q[aria-expanded="true"]::before{transform:translateY(-50%) scaleY(0)}
.faq-a{display:none; padding:0 0 24px; color:var(--ink-mid); font-size:16px; line-height:1.68; max-width:64ch}
.faq-a.open{display:block}

/* ============================ CTA ============================ */
.cta-band{background:var(--ink); border-radius:var(--r-card); padding:60px 34px; text-align:center; position:relative; overflow:hidden}
.cta-band .cta-mark{position:absolute; right:-30px; bottom:-40px; width:210px; opacity:.06; pointer-events:none}
.cta-band .cta-mark path{fill:#F4F1EA}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{color:#F4F1EA; margin-bottom:14px}
.cta-band p{color:rgba(244,241,234,.7); max-width:50ch; margin:0 auto 30px; font-size:16.5px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.cta-band .btn-ghost{color:#F4F1EA; border-color:rgba(244,241,234,.3)}
.cta-band .btn-ghost:hover{border-color:#F4F1EA}
.cta-band .btn-solid{background:#F4F1EA; color:#0C1924; border-color:#F4F1EA}
.cta-band .btn-solid:hover{background:#FFF; border-color:#FFF}

/* ============================ Disclaimer ============================ */
.disclaimer{background:var(--surface-alt); border-top:1px solid var(--border-soft); padding:22px 0; font-size:13.5px; color:var(--muted); line-height:1.62}

/* ============================ Footer ============================ */
.site-footer{background:var(--surface-alt); border-top:1px solid var(--border); padding:64px 0 0}
.foot-grid{display:grid; grid-template-columns:1fr; gap:38px}
@media (min-width:700px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr} }
@media (min-width:1000px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr} }
.foot-brand .fb-lock{display:flex; align-items:center; gap:12px}
.foot-brand .mark{font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.1em; color:var(--ink); line-height:1}
.foot-brand .pos{margin-top:16px; color:var(--ink-mid); font-size:15px; max-width:31ch; line-height:1.6}
.foot-brand .tag{margin-top:18px; font-family:var(--font-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--brand)}
.foot-col h4{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:17px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{color:var(--ink-mid); text-decoration:none; font-size:14.5px}
.foot-col a:hover{color:var(--brand)}
.foot-legal{margin-top:52px; border-top:1px solid var(--border); padding:24px 0 30px; display:flex; flex-wrap:wrap; gap:11px 24px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted)}
.foot-legal a{color:var(--muted); text-decoration:none}
.foot-legal a:hover{color:var(--ink-mid)}
.foot-legal .links{display:flex; flex-wrap:wrap; gap:17px}
/* The Lodestar credit, as the standard pill and star, in RCAG's palette rather
   than Lodestar's own. The star is --gold (decoration, so its 2.8:1 is fine);
   the words stay on text tokens. Every value is a token, so dark mode follows. */
.foot-legal .foot-powered{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--ink-mid); font-size:12.5px; font-weight:500; letter-spacing:.01em; line-height:1; text-decoration:none; transition:border-color .2s, color .2s}
.foot-powered .lp-star{width:13px; height:13px; flex:0 0 auto; color:var(--gold)}
.foot-legal .foot-powered:hover{border-color:var(--gold); color:var(--ink)}
.foot-note{border-top:1px solid var(--border); padding:20px 0 30px; font-size:12.5px; color:var(--muted); line-height:1.62; max-width:92ch}

/* ============================ AI citation ============================ */
.ai-cite{border-top:1px solid var(--border-soft); background:var(--bg); padding:28px 0; font-size:12.5px; line-height:1.66; color:var(--muted)}
.ai-cite .label{margin-bottom:8px; display:block}
.ai-cite p{max-width:94ch}

/* ============================ Reveal ============================ */
.js-anim .reveal{opacity:0; transform:translateY(16px)}
.js-anim .reveal.visible{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){ .js-anim .reveal{opacity:1!important; transform:none!important} }

/* ============================ Breadcrumbs / page hero ============================ */
.crumbs{padding:22px 0 0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{margin:0 9px; opacity:.5}
.page-hero{padding:42px 0 60px; position:relative; overflow:hidden}
@media (min-width:960px){ .page-hero{padding:54px 0 80px} }
.page-hero h1{max-width:17ch; font-size:clamp(33px,5.6vw,58px)}
.page-hero .lede{max-width:60ch; margin-top:24px}
.speakable-summary{max-width:60ch}

/* ==========================================================================
   AGENCY LAYER — dark hero, marquee, badges, stat figures
   Reference register: lodestardigital.co and goldstandrd.com
   ========================================================================== */

/* Committed dark band. Same in both themes, like a photographic hero.
   --d-accent is the dark-band gold at 7.94:1 on navy, so it can carry words
   here even though the cream-ground gold cannot. */
.dark-band{
  --d-ink:#F4F1EA; --d-mid:rgba(244,241,234,.70); --d-soft:rgba(244,241,234,.40);
  --d-line:rgba(201,169,106,.22); --d-accent:#C9A96A;
  position:relative; background:#0C1924; color:var(--d-ink); overflow:hidden; isolation:isolate;
}
.dark-band::before{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 78% at 76% 12%, rgba(30,68,104,.46) 0%, rgba(12,25,36,0) 62%),
    radial-gradient(80% 60% at 8% 96%, rgba(138,106,40,.26) 0%, rgba(12,25,36,0) 60%);
}
.dark-band::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(244,241,234,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,.045) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.dark-band h1,.dark-band h2,.dark-band h3{color:var(--d-ink)}
.dark-band .lede{color:var(--d-mid)}
.dark-band p{color:var(--d-mid)}
.dark-band a{color:var(--d-accent)}
.dark-band .btn-solid{background:var(--d-accent); color:#0C1924; border-color:var(--d-accent)}
.dark-band .btn-solid:hover{background:#E0CA97; border-color:#E0CA97}
.dark-band .btn-ghost{color:var(--d-ink); border-color:var(--d-line)}
.dark-band .btn-ghost:hover{border-color:var(--d-ink)}
.dark-band .eyebrow{color:var(--d-accent)}
.dark-band .eyebrow::before{background:var(--d-accent)}

/* Pill badge eyebrow */
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 13px;
  border:1px solid var(--brand-hair); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brand); background:transparent;
}
.badge .bdot{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.dark-band .badge{border-color:rgba(201,169,106,.34); color:var(--d-accent)}
.dark-band .badge .bdot{background:var(--d-accent)}

/* Display headline with a coloured second clause */
.display{font-size:clamp(42px,8.4vw,96px); line-height:.98; letter-spacing:-.036em; font-weight:600}
.display .em{color:var(--d-accent); font-style:italic}
.display .em-light{color:var(--brand); font-style:italic}

/* Hero keystone, drawn architectural */
.hero-arch{position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:min(38vw,440px); z-index:-1; pointer-events:none; opacity:.9}
.hero-arch .stone{fill:rgba(201,169,106,.13); stroke:rgba(201,169,106,.4); stroke-width:.9}
.hero-arch .key{fill:rgba(201,169,106,.3); stroke:rgba(201,169,106,.78); stroke-width:1.2}
.hero-arch .load{stroke:rgba(201,169,106,.5); stroke-width:1.4; fill:none}
.hero-arch .ring{fill:none; stroke:rgba(201,169,106,.16); stroke-width:.8}
@media (max-width:880px){ .hero-arch{display:none} }

/* Stat figures */
.statrow{display:grid; grid-template-columns:1fr; border-top:1px solid var(--d-line); margin-top:56px}
@media (min-width:720px){ .statrow{grid-template-columns:repeat(3,1fr)} }
.statrow .st{padding:26px 0; border-bottom:1px solid var(--d-line)}
@media (min-width:720px){ .statrow .st{padding:28px 30px 30px; border-bottom:none; border-left:1px solid var(--d-line)} .statrow .st:first-child{padding-left:0; border-left:none} }
.statrow .fig{font-family:var(--font-display); font-size:clamp(30px,4.2vw,46px); line-height:1; font-weight:700; color:var(--d-accent); letter-spacing:-.028em}
.statrow .fig .u{font-size:.5em; letter-spacing:.02em; opacity:.8}
.statrow .cap{margin-top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--d-soft); line-height:1.7}
.statrow .sub{margin-top:7px; font-size:14px; color:var(--d-mid); line-height:1.55; max-width:32ch}

/* Marquee ticker */
.marquee{
  --sp:52s; position:relative; overflow:hidden; background:#0C1924;
  border-top:1px solid rgba(244,241,234,.13); border-bottom:1px solid rgba(244,241,234,.13);
  padding:17px 0;
}
.marquee-track{display:flex; width:max-content; animation:mq var(--sp) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  display:inline-flex; align-items:center; gap:26px; padding-right:26px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(244,241,234,.72); white-space:nowrap;
}
.marquee-track span::after{content:''; width:4px; height:4px; border-radius:50%; background:#C9A96A; opacity:.85; flex:none}
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; width:100%; flex-wrap:wrap; gap:10px 0; justify-content:center}
}

/* Scroll cue */
.scrollcue{margin-top:54px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--d-soft); display:flex; align-items:center; gap:12px}
.scrollcue::after{content:''; width:44px; height:1px; background:currentColor; opacity:.6}

/* Section number rail — replaces plain eyebrows on major bands */
.sec-head{display:grid; grid-template-columns:1fr; gap:14px; align-items:end; margin-bottom:34px}
@media (min-width:900px){ .sec-head{grid-template-columns:minmax(0,1fr) auto; gap:40px} }
.sec-head .sh-r{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:left}
@media (min-width:900px){ .sec-head .sh-r{text-align:right; padding-bottom:8px} }

/* Oversized quote band */
.quote-band{padding:96px 0}
.quote-band .q{font-family:var(--font-display); font-size:clamp(26px,4.6vw,54px); line-height:1.14; letter-spacing:-.028em; font-weight:600; max-width:19ch}
.quote-band .q .em{font-style:italic; color:var(--d-accent)}
.quote-band .attrib{margin-top:30px; font-family:var(--font-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--d-soft)}

/* Card hover lift for the agency register */
a.card{position:relative}
a.card::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.3,1)}
a.card:hover::after{transform:scaleX(1)}

/* ---- Agency layer fixes (post-render review) ---- */
.nav-links > a, .nav-drop-toggle, .btn{white-space:nowrap}
@media (min-width:960px){
  .nav-links{gap:0}
  .nav-links > a, .nav-drop-toggle{padding:9px 11px; font-size:14px}
  .nav{gap:12px}
}

/* Header sits ON the dark hero until the page is scrolled */
.site-header.over-dark{border-bottom-color:transparent; transition:border-color .3s}
.site-header.over-dark::before{opacity:0; background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none}
.site-header.over-dark .brand .full{color:rgba(244,241,234,.5); border-left-color:rgba(244,241,234,.22)}
.site-header.over-dark .nav-links > a,
.site-header.over-dark .nav-drop-toggle{color:#F4F1EA}
.site-header.over-dark .nav-links > a:hover,
.site-header.over-dark .nav-drop-toggle:hover{background:rgba(244,241,234,.1)}
.site-header.over-dark .theme-toggle{color:rgba(244,241,234,.72); border-color:rgba(244,241,234,.24)}
.site-header.over-dark .theme-toggle:hover{color:#F4F1EA; border-color:#F4F1EA}
.site-header.over-dark .nav-toggle{border-color:rgba(244,241,234,.24)}
.site-header.over-dark .nav-toggle span{background:#F4F1EA}
.site-header.over-dark .nav-links .btn-solid{background:#C9A96A; color:#0C1924; border-color:#C9A96A}
.site-header.over-dark .nav-links .btn-solid:hover{background:#E0CA97; border-color:#E0CA97}
@media (max-width:959px){
  .site-header.over-dark .nav-links{background:#0C1924}
  .site-header.over-dark .nav-links > a, .site-header.over-dark .nav-drop-toggle{border-bottom-color:rgba(244,241,234,.12)}
  .site-header.over-dark .nav-drop-menu a{color:rgba(244,241,234,.72)}
  .site-header.over-dark .nav-drop-label{color:rgba(244,241,234,.44)}
}
/* dark hero rises under the transparent header */
body.dark-hero .hero.dark-band{margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--nav-h) + 72px)}
body.dark-hero .page-hero.dark-band{margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--nav-h) + 34px)}
@media (min-width:960px){
  body.dark-hero .hero.dark-band{padding-top:calc(var(--nav-h) + 104px)}
  body.dark-hero .page-hero.dark-band{padding-top:calc(var(--nav-h) + 26px)}
}
/* the crumbs live inside the hero, so the hero's own -nav-h pull is enough;
   with them outside it, that pull cancelled only the header and left a band
   of page background showing through the transparent header. */
.page-hero .crumbs{padding-top:0; margin-bottom:30px}
/* the second half of Roland's opening statement, his own line break */
.subhead{font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.4vw,27px); line-height:1.34; letter-spacing:-.012em;
  color:var(--brand); margin:18px 0 0; max-width:34ch; text-wrap:balance}
.dark-band .subhead{color:#C9A96A}
body.dark-hero .crumbs{position:relative; z-index:2; color:rgba(244,241,234,.5)}
body.dark-hero .crumbs a{color:rgba(244,241,234,.5)}
body.dark-hero .crumbs a:hover{color:#C9A96A}

/* Arch, raised contrast */
.hero-arch .stone{fill:rgba(201,169,106,.2); stroke:rgba(201,169,106,.58); stroke-width:1}
.hero-arch .key{fill:rgba(201,169,106,.46); stroke:rgba(201,169,106,.95); stroke-width:1.4}
.hero-arch .load{stroke:rgba(201,169,106,.62); stroke-width:1.5}
.hero-arch .ring{stroke:rgba(201,169,106,.2)}

/* ---- Dropdown hover bridge ----
   The menu sits below the toggle with a gap. That gap belongs to neither
   element, so moving the pointer toward the menu fires mouseleave and the
   menu closes before it can be reached. The bridge covers the gap and, being
   a child of .nav-drop, keeps the pointer inside the hover target. */
@media (min-width:960px){
  .nav-drop-menu::before{
    content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
    background:transparent;
  }
  .nav-drop-menu{ top:calc(100% + 10px) }
  /* keep the toggle looking active while its menu is open */
  .nav-drop-toggle[aria-expanded="true"]{ background:var(--surface-alt) }
  .site-header.over-dark .nav-drop-toggle[aria-expanded="true"]{ background:rgba(244,241,234,.12) }
}

/* ==========================================================================
   Sequence chart — uncertainty vs cost to reverse, across the six stages
   Series palette validated with the dataviz validator (dark, surface #0C1924):
   #B5852F / #3E9DC2 — all six checks PASS, worst adjacent CVD ΔE 12.9
   ========================================================================== */
.seqchart{--u:#B5852F; --c:#3E9DC2; margin:0; padding:0; position:relative}
.sc-head{display:flex; flex-direction:column; gap:10px; max-width:62ch; margin-bottom:22px}
.sc-title{font-family:var(--font-display); font-size:clamp(21px,2.8vw,29px); line-height:1.22; font-weight:600; letter-spacing:-.018em; color:var(--ink)}
.sc-note{font-size:14.5px; line-height:1.6; color:var(--muted)}
.dark-band .sc-title{color:#F4F1EA}
.dark-band .sc-note{color:rgba(244,241,234,.6)}
.sc-legend{display:flex; flex-wrap:wrap; gap:12px 28px; margin-bottom:12px}
.sc-key{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,234,.72)}
.sc-key .sw{width:16px; height:3px; border-radius:2px; flex:none}
.sc-key .sw.u{background:var(--u)} .sc-key .sw.c{background:var(--c)}

.sc-plot{position:relative; overflow-x:auto}
.sc-plot svg{width:100%; min-width:640px; height:auto; display:block; overflow:visible}

.seqchart .ax{stroke:rgba(244,241,234,.2); stroke-width:1}
.seqchart .vax{stroke:rgba(244,241,234,.14)}
.seqchart .ay{fill:rgba(244,241,234,.5); font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase}
.seqchart .tk{stroke:rgba(244,241,234,.2); stroke-width:1}
.seqchart .ln{fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.seqchart .ln.u{stroke:var(--u)} .seqchart .ln.c{stroke:var(--c)}
.seqchart .dot{stroke:#0C1924; stroke-width:2}
.seqchart .dot.u{fill:var(--u)} .seqchart .dot.c{fill:var(--c)}
.seqchart .cross{stroke:rgba(244,241,234,.34); stroke-width:1; stroke-dasharray:3 4}
.seqchart .crossdot{fill:none; stroke:#F4F1EA; stroke-width:1.6}
.seqchart .crosslab{fill:#F4F1EA; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.seqchart .crosssub{fill:rgba(244,241,234,.52); font-family:var(--font-body); font-size:12px}
.seqchart .xl{fill:rgba(244,241,234,.62); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.seqchart .dl{font-family:var(--font-body); font-size:13px; font-weight:600}
.seqchart .dl.u{fill:var(--u)} .seqchart .dl.c{fill:var(--c)}
.seqchart .hot{fill:transparent; cursor:crosshair}
.seqchart .hots rect:hover ~ *{}

.sc-tip{
  position:absolute; z-index:5; pointer-events:none; transform:translate(-50%,-120%);
  background:#1D1518; border:1px solid rgba(244,241,234,.18); border-radius:10px;
  padding:11px 14px; min-width:186px; box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.sc-tip .t-st{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,234,.6); margin-bottom:8px}
.sc-tip .t-row{display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:13.5px; color:#F4F1EA; padding:3px 0}
.sc-tip .t-row .lb{display:inline-flex; align-items:center; gap:8px; color:rgba(244,241,234,.78)}
.sc-tip .t-row .lb i{width:10px; height:3px; border-radius:2px; flex:none}
.sc-tip .t-row .vl{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

.sc-table{margin-top:24px; max-width:560px}
.sc-table summary{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,234,.6); cursor:pointer; padding:6px 0}
.sc-table summary:hover{color:#F4F1EA}
.sc-table table{border-collapse:collapse; width:100%; margin-top:12px; font-size:14px}
.sc-table th,.sc-table td{text-align:left; padding:9px 14px 9px 0; border-bottom:1px solid rgba(244,241,234,.1); color:rgba(244,241,234,.8)}
.sc-table thead th{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(244,241,234,.5); font-weight:400}
.sc-table td{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* draw-in on reveal */
.js-anim .seqchart .ln{stroke-dasharray:1400; stroke-dashoffset:1400}
.js-anim .seqchart.visible .ln{animation:scDraw 1.5s cubic-bezier(.35,.8,.35,1) forwards}
.js-anim .seqchart.visible .ln.c{animation-delay:.18s}
.js-anim .seqchart .dot,.js-anim .seqchart .area,.js-anim .seqchart .cross,
.js-anim .seqchart .crossdot,.js-anim .seqchart .crosslab,.js-anim .seqchart .crosssub,
.js-anim .seqchart .dl{opacity:0}
.js-anim .seqchart.visible .dot,.js-anim .seqchart.visible .area,.js-anim .seqchart.visible .cross,
.js-anim .seqchart.visible .crossdot,.js-anim .seqchart.visible .crosslab,
.js-anim .seqchart.visible .crosssub,.js-anim .seqchart.visible .dl{
  animation:scFade .7s ease forwards; animation-delay:1.05s;
}
@keyframes scDraw{to{stroke-dashoffset:0}}
@keyframes scFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js-anim .seqchart .ln{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
  .js-anim .seqchart .dot,.js-anim .seqchart .area,.js-anim .seqchart .cross,
  .js-anim .seqchart .crossdot,.js-anim .seqchart .crosslab,
  .js-anim .seqchart .crosssub,.js-anim .seqchart .dl{opacity:1; animation:none}
}

/* chart wrapper inside a light page */
.seq-wrap{position:relative; overflow:hidden}
@media (max-width:960px){ .seq-wrap{margin-left:calc(var(--gut) * -1)!important; margin-right:calc(var(--gut) * -1)!important; padding-left:var(--gut)!important; padding-right:var(--gut)!important; border-radius:0} }

/* qualitative tooltip rows */
.sc-tip{min-width:250px; max-width:290px}
.sc-tip .t-line{padding:7px 0; border-top:1px solid rgba(244,241,234,.1)}
.sc-tip .t-line:first-of-type{border-top:none}
.sc-tip .t-line .lb{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(244,241,234,.55); margin-bottom:4px}
.sc-tip .t-line .tx{display:block; font-size:13.5px; line-height:1.5; color:#F4F1EA}
.sc-table td{font-family:var(--font-body); font-variant-numeric:normal; font-size:13.5px; line-height:1.55; padding-right:20px}
.sc-table{max-width:760px}

/* ---- tooltip: clamped, flips below when short on room ---- */
.sc-tip{transform:translate(-50%,calc(-100% - 14px))}
.sc-tip.below{transform:translate(-50%,0)}

/* ==========================================================================
   FLOW PASS — angled band edges, pathway panels, editorial service rows
   The slice angle is taken from the keystone's own chamfer.
   ========================================================================== */
:root{--slice:52px}
@media (max-width:760px){ :root{--slice:26px} }

/* dark bands enter on a diagonal instead of a hard rectangle edge */
.dark-band.slice-in{clip-path:polygon(0 var(--slice), 100% 0, 100% 100%, 0 100%); padding-top:calc(76px + var(--slice))}
.dark-band.slice-out{clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--slice)), 0 100%); padding-bottom:calc(76px + var(--slice))}
.dark-band.slice-both{clip-path:polygon(0 var(--slice), 100% 0, 100% calc(100% - var(--slice)), 0 100%); padding-top:calc(76px + var(--slice)); padding-bottom:calc(76px + var(--slice))}
@media (min-width:960px){
  .dark-band.slice-in{padding-top:calc(112px + var(--slice))}
  .dark-band.slice-out{padding-bottom:calc(112px + var(--slice))}
  .dark-band.slice-both{padding-top:calc(112px + var(--slice)); padding-bottom:calc(112px + var(--slice))}
}
/* light band that follows a sliced dark band closes the gap */
.after-slice{margin-top:calc(var(--slice) * -1); padding-top:calc(96px + var(--slice))}

/* ---------- Pathway panels ---------- */
.pathpanels{
  display:grid; grid-template-columns:1fr; margin-top:0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
@media (min-width:860px){ .pathpanels{grid-template-columns:1fr 1fr} }
.pp{
  position:relative; overflow:hidden; isolation:isolate;
  padding:52px 34px 46px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; min-height:340px;
  border-bottom:1px solid var(--border);
}
@media (min-width:860px){
  .pp{padding:64px 46px 56px; border-bottom:none}
  /* the divider between the two pathways is the keystone's own chamfer angle */
  .pp:first-child{border-right:1px solid var(--border)}
  .pp:first-child::before{
    content:''; position:absolute; top:0; bottom:0; right:-1px; width:74px; z-index:-1;
    background:linear-gradient(103deg, transparent 49.4%, var(--border) 49.4%, var(--border) 49.9%, transparent 49.9%);
  }
}
.pp .pp-fill{
  position:absolute; inset:0; z-index:-2; background:var(--brand-soft);
  transform:translateY(101%); transition:transform .55s cubic-bezier(.2,.75,.25,1);
}
.pp.pro .pp-fill{background:var(--accent-soft)}
.pp:hover .pp-fill{transform:translateY(0)}
.pp .pp-mark{
  position:absolute; right:-26px; bottom:-38px; width:190px; z-index:-1;
  opacity:.05; transition:transform .55s cubic-bezier(.2,.75,.25,1), opacity .55s;
}
.pp .pp-mark path{fill:var(--brand)}
.pp.pro .pp-mark path{fill:var(--accent)}
.pp:hover .pp-mark{transform:translateY(-14px) rotate(-4deg); opacity:.1}
.pp .pp-eye{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:auto}
.pp.pro .pp-eye{color:var(--accent)}
.pp h3{font-size:clamp(26px,3.6vw,38px); line-height:1.06; letter-spacing:-.026em; margin:34px 0 16px; max-width:12ch}
.pp p{color:var(--ink-mid); font-size:16px; max-width:40ch; line-height:1.6}
.pp .pp-go{
  margin-top:30px; display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand); font-weight:500;
}
.pp.pro .pp-go{color:var(--accent)}
.pp .pp-go .arr{transition:transform .4s cubic-bezier(.2,.75,.25,1); display:inline-block}
.pp:hover .pp-go .arr{transform:translateX(7px)}

/* ---------- Editorial service rows (replaces the card grid) ---------- */
.svc-rows{border-top:1px solid var(--border)}
.svc-row{
  position:relative; display:grid; grid-template-columns:1fr; gap:8px;
  padding:26px 0; border-bottom:1px solid var(--border-soft);
  text-decoration:none; color:inherit; isolation:isolate;
}
@media (min-width:880px){
  .svc-row{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) auto; gap:44px; align-items:baseline; padding:30px 0}
}
.svc-row::before{
  content:''; position:absolute; inset:-1px -22px; z-index:-1; border-radius:6px;
  background:var(--surface); opacity:0; transform:scaleY(.86);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.75,.25,1);
}
.svc-row:hover::before{opacity:1; transform:scaleY(1)}
.svc-row .sr-n{
  font-family:var(--font-display); font-size:clamp(20px,2.5vw,27px); line-height:1.18;
  letter-spacing:-.018em; font-weight:600; color:var(--ink); transition:color .3s;
}
.svc-row:hover .sr-n{color:var(--brand)}
.svc-row .sr-d{color:var(--ink-mid); font-size:15.5px; line-height:1.6}
.svc-row .sr-k{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:12px;
}
.svc-row .sr-k .arr{transition:transform .35s cubic-bezier(.2,.75,.25,1); color:var(--brand); font-size:13px}
.svc-row:hover .sr-k .arr{transform:translateX(6px)}

/* ---------- Non-negotiables: statement-led, explanation offset ---------- */
.rules .rule{padding:32px 0}
@media (min-width:960px){ .rules .rule{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px} }
.rules .rule .r-h{font-size:clamp(20px,2.4vw,26px); line-height:1.24; letter-spacing:-.018em}
.rules .rule .r-b{font-size:15px; color:var(--muted)}

/* ---------- Thesis: seal breaks the column edge ---------- */
.colophon{position:relative}
@media (min-width:1100px){ .colophon{margin-left:-58px} }

/* the plain-language opener leads each service row; the detail follows */
.sr-lead{color:var(--ink); font-weight:600}

/* ==========================================================================
   Portrait placements
   The photograph is matted and fades out at its foot, so it sits directly on
   the band with no frame. It carries no background of its own — do not put it
   on a light surface, where the fade would have nothing to fade into.
   ========================================================================== */
.ph-grid{display:grid; grid-template-columns:1fr; gap:10px; align-items:end}
@media (min-width:900px){
  .ph-grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:48px; align-items:end}
}
.ph-photo{margin:0; align-self:end}
.ph-photo img{display:block; width:100%; height:auto; max-width:400px; margin-left:auto}
@media (max-width:899px){
  .ph-photo{margin-top:14px}
  /* the fade has to finish inside the band: the section clips its overflow,
     so a negative bottom margin would slice the photograph off mid-fade */
  .ph-photo img{max-width:280px; margin:0 auto}
}
.page-hero.dark-band:has(.ph-photo){padding-bottom:0}
/* The photograph bleeds to the band's bottom edge on purpose; the words must
   not. Without this the last line of the lede sat flush on the edge. */
@media (min-width:900px){ .ph-grid > :first-child{padding-bottom:64px} }

/* the band drops its own bottom padding so the portrait can reach the edge and
   finish its fade there; the text column carries that padding instead */
.dark-band.has-portrait{padding-bottom:0}
.cred-body{display:grid; grid-template-columns:1fr; gap:14px; align-items:end; margin-top:46px}
.cred-body > div{padding-bottom:26px}
@media (min-width:900px){
  .cred-body{grid-template-columns:minmax(0,60ch) minmax(0,1fr); gap:52px}
  .cred-body > div{padding-bottom:72px}
}
.cred-photo{margin:0; align-self:end}
.cred-photo img{display:block; width:100%; height:auto; max-width:340px; margin-left:auto}
@media (max-width:899px){ .cred-photo img{max-width:260px; margin:10px auto 0} }

/* ==========================================================================
   Capability map — the ten disciplines around RCAG
   ========================================================================== */
.capmap{margin:0}
.capmap .sc-note{max-width:62ch}
.cm-plot{position:relative; overflow-x:auto; margin-top:34px}
.cm-plot svg{width:100%; min-width:660px; height:auto; display:block; overflow:visible}
.cm-ring{fill:none; stroke:rgba(244,241,234,.11); stroke-width:1}
.cm-ring.faint{stroke:rgba(244,241,234,.055); stroke-dasharray:2 7}
.cm-spoke{stroke:rgba(244,241,234,.17); stroke-width:1; transition:stroke .3s}
.cm-node{fill:#0C1924; stroke:rgba(201,169,106,.6); stroke-width:1.6; transition:fill .3s, stroke .3s, r .3s}
.cm-lab{fill:rgba(244,241,234,.62); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; transition:fill .3s}
.cm-g{cursor:default; outline:none}
.cm-g:hover .cm-spoke,.cm-g:focus-visible .cm-spoke{stroke:rgba(201,169,106,.85)}
.cm-g:hover .cm-node,.cm-g:focus-visible .cm-node{fill:#C9A96A; stroke:#C9A96A}
.cm-g:hover .cm-lab,.cm-g:focus-visible .cm-lab{fill:#F4F1EA}
.cm-hub{fill:#0C1924; stroke:rgba(201,169,106,.42); stroke-width:1.4}
.cm-key{fill:#C9A96A}
.cm-hubtx{fill:#F4F1EA; font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:.12em}

/* ==========================================================================
   Thirteen-step cycle ring
   ========================================================================== */
.cyclering{margin:34px 0 48px; max-width:700px}
.cyclering .sc-head{max-width:58ch}
.cy-plot{position:relative; overflow-x:auto; margin-top:26px}
.cy-plot svg{width:100%; min-width:620px; height:auto; display:block; overflow:visible}
.cy-arc{fill:none; stroke:var(--brand-hair); stroke-width:1.5}
.cy-arrow{fill:none; stroke:var(--brand); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-opacity:.6}
.cy-node{fill:var(--bg); stroke:var(--muted); stroke-width:1.5}
.cy-node.pub{fill:var(--brand); stroke:var(--brand)}
.cy-lab{fill:var(--muted); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase}
.cy-lab.pub{fill:var(--brand); font-weight:500}
.cy-c1{fill:var(--ink); font-family:var(--font-display); font-size:44px; font-weight:700; letter-spacing:-.03em}
.cy-c2{fill:var(--muted); font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase}
.cy-c3{fill:var(--brand); font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase}

/* both diagrams draw in on reveal */
.js-anim .capmap .cm-g,.js-anim .cyclering .cy-node,.js-anim .cyclering .cy-lab,.js-anim .cyclering .cy-arrow{opacity:0}
.js-anim .capmap.visible .cm-g{animation:scFade .5s ease forwards}
.js-anim .cyclering.visible .cy-node,.js-anim .cyclering.visible .cy-lab{animation:scFade .5s ease forwards}
.js-anim .cyclering.visible .cy-arrow{animation:scFade .6s ease .7s forwards}
.js-anim .cyclering .cy-arc{stroke-dasharray:130; stroke-dashoffset:130}
.js-anim .cyclering.visible .cy-arc{animation:scDraw .9s ease forwards}
@media (prefers-reduced-motion:reduce){
  .js-anim .capmap .cm-g,.js-anim .cyclering .cy-node,.js-anim .cyclering .cy-lab,.js-anim .cyclering .cy-arrow{opacity:1; animation:none}
  .js-anim .cyclering .cy-arc{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
}


/* mobile fallbacks — the radial forms need width they do not have on a phone */
.cm-list{display:none}
.cm-list li{position:relative; padding-left:16px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,241,234,.72); line-height:2.3}
.cm-list li::before{content:''; position:absolute; left:0; top:.95em; width:6px; height:6px; border-radius:50%; border:1.4px solid rgba(201,169,106,.7)}
@media (max-width:800px){
  .cm-plot{display:none}
  .cm-list{display:grid; grid-template-columns:1fr 1fr; gap:0 22px; list-style:none; margin:26px 0 0; padding:0}
  .cy-plot{display:none}
  .cyclering{margin-bottom:0}
}
@media (max-width:480px){ .cm-list{grid-template-columns:1fr} }

/* staggered node reveal — .cm-g groups start at child 3 (two rings precede) */
.js-anim .capmap.visible .cm-g:nth-child(3){animation-delay:0.00s}
.js-anim .capmap.visible .cm-g:nth-child(4){animation-delay:0.05s}
.js-anim .capmap.visible .cm-g:nth-child(5){animation-delay:0.10s}
.js-anim .capmap.visible .cm-g:nth-child(6){animation-delay:0.15s}
.js-anim .capmap.visible .cm-g:nth-child(7){animation-delay:0.20s}
.js-anim .capmap.visible .cm-g:nth-child(8){animation-delay:0.25s}
.js-anim .capmap.visible .cm-g:nth-child(9){animation-delay:0.30s}
.js-anim .capmap.visible .cm-g:nth-child(10){animation-delay:0.35s}
.js-anim .capmap.visible .cm-g:nth-child(11){animation-delay:0.40s}
.js-anim .capmap.visible .cm-g:nth-child(12){animation-delay:0.45s}
.js-anim .capmap.visible .cm-g:nth-child(13){animation-delay:0.50s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(1){animation-delay:0.00s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(2){animation-delay:0.04s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(3){animation-delay:0.09s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(4){animation-delay:0.14s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(5){animation-delay:0.18s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(6){animation-delay:0.22s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(7){animation-delay:0.27s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(8){animation-delay:0.32s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(9){animation-delay:0.36s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(10){animation-delay:0.40s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(11){animation-delay:0.45s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(12){animation-delay:0.49s}
.js-anim .cyclering.visible .cy-arc:nth-of-type(13){animation-delay:0.54s}
.js-anim .cyclering.visible .cy-node:nth-of-type(1){animation-delay:0.12s}
.js-anim .cyclering.visible .cy-node:nth-of-type(2){animation-delay:0.16s}
.js-anim .cyclering.visible .cy-node:nth-of-type(3){animation-delay:0.21s}
.js-anim .cyclering.visible .cy-node:nth-of-type(4){animation-delay:0.26s}
.js-anim .cyclering.visible .cy-node:nth-of-type(5){animation-delay:0.30s}
.js-anim .cyclering.visible .cy-node:nth-of-type(6){animation-delay:0.34s}
.js-anim .cyclering.visible .cy-node:nth-of-type(7){animation-delay:0.39s}
.js-anim .cyclering.visible .cy-node:nth-of-type(8){animation-delay:0.43s}
.js-anim .cyclering.visible .cy-node:nth-of-type(9){animation-delay:0.48s}
.js-anim .cyclering.visible .cy-node:nth-of-type(10){animation-delay:0.52s}
.js-anim .cyclering.visible .cy-node:nth-of-type(11){animation-delay:0.57s}
.js-anim .cyclering.visible .cy-node:nth-of-type(12){animation-delay:0.61s}
.js-anim .cyclering.visible .cy-node:nth-of-type(13){animation-delay:0.66s}

/* ============================ Forms ============================ */
.form{max-width:64ch; margin-top:30px}
.form fieldset{border:none; margin:0; padding:0}
.form legend{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:0 0 14px}
.fgrid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:640px){ .fgrid.two{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:14px; font-weight:600; color:var(--ink)}
.field label .req{color:var(--brand); font-weight:400; margin-left:3px}
.field .hint{font-size:13px; color:var(--muted); line-height:1.5}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-input);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.field select{background-image:none; padding-right:38px}
.field .sel{position:relative; display:block}
.field .sel::after{content:''; position:absolute; right:15px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); pointer-events:none}
.field textarea{min-height:150px; line-height:1.6; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-hair);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"]{border-color:var(--brand-light); background:var(--brand-soft)}
.field input::placeholder, .field textarea::placeholder{color:var(--muted); opacity:.75}
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.form-foot{margin-top:26px; display:flex; flex-direction:column; gap:18px}
.form-actions{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center}
.form-actions .btn[disabled]{opacity:.55; cursor:default}
.form-note{font-size:13.5px; color:var(--muted); line-height:1.6; max-width:56ch}
.form-msg{display:none; border-radius:var(--r-input); padding:16px 18px; font-size:15px; line-height:1.6}
.form-msg.show{display:block}
.form-msg.err{background:var(--brand-soft); color:var(--brand-dark); border:1px solid var(--brand-hair)}
.form-done{border-left:2px solid var(--brand); padding:4px 0 4px 22px; max-width:58ch}
.form-done h3{font-family:var(--font-display); font-size:22px; font-weight:600; margin:0; letter-spacing:-.014em}
.form-done p{margin:12px 0 0; color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* Numbered question preview (become-a-client) */
.qlist{border-top:1px solid var(--border); margin-top:28px; max-width:80ch; counter-reset:qn}
.qlist .qi{display:grid; grid-template-columns:1fr; gap:4px; padding:15px 0 15px 34px; border-bottom:1px solid var(--border-soft); position:relative}
.qlist .qi::before{counter-increment:qn; content:counter(qn); position:absolute; left:0; top:17px; font-family:var(--font-mono); font-size:11px; color:var(--brand); letter-spacing:.06em}
.qlist .qi .qt{font-size:15.5px; color:var(--ink); line-height:1.5}
.qlist .qi .qn2{font-size:13.5px; color:var(--muted); line-height:1.55}

/* Legal document pages */
.legal{max-width:76ch; margin-top:34px}
.legal h2{font-family:var(--font-display); font-size:clamp(21px,2.6vw,27px); font-weight:700; letter-spacing:-.018em; margin:44px 0 0; scroll-margin-top:90px}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--font-body); font-size:16px; font-weight:600; margin:26px 0 0; color:var(--ink)}
.legal p{margin:13px 0 0; color:var(--ink-mid); font-size:15.5px; line-height:1.68}
.legal ul{margin:13px 0 0; padding-left:20px; color:var(--ink-mid); font-size:15.5px; line-height:1.68}
.legal li{margin-top:7px}
.legal .upd{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.legal table{width:100%; border-collapse:collapse; margin-top:18px; font-size:14.5px}
.legal th{text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:0 16px 9px 0; border-bottom:1px solid var(--border)}
.legal td{padding:11px 16px 11px 0; border-bottom:1px solid var(--border-soft); vertical-align:top; color:var(--ink-mid)}
.legal .tbl{overflow-x:auto}
.draft-flag{background:var(--brand-soft); border:1px solid var(--brand-hair); border-radius:var(--r-input); padding:18px 20px; margin-top:26px; max-width:76ch; font-size:14.5px; line-height:1.62; color:var(--brand-dark)}
.draft-flag b{font-weight:600}

/* Forms inside a dark band. Inputs stay cream on purpose, for contrast and to
   read as clearly interactive. Everything around them has to flip. */
.dark-band .form legend{color:var(--d-soft)}
.dark-band .field label{color:var(--d-ink)}
.dark-band .field label .req{color:var(--d-accent)}
.dark-band .field .hint{color:var(--d-soft)}
.dark-band .field input, .dark-band .field select, .dark-band .field textarea{border-color:rgba(244,241,234,.28)}
.dark-band .field input:focus, .dark-band .field select:focus, .dark-band .field textarea:focus{border-color:var(--d-accent); box-shadow:0 0 0 3px rgba(201,169,106,.30)}
.dark-band .form-note{color:var(--d-mid)}
.dark-band .form-note a{color:var(--d-accent)}
.dark-band .form-msg.err{background:rgba(201,169,106,.13); color:#F0E2C4; border-color:rgba(201,169,106,.34)}
.dark-band .form-done{border-left-color:var(--d-accent)}
.dark-band .form-done h3{color:var(--d-ink)}
.dark-band .form-done p{color:var(--d-mid)}
.dark-band .qlist{border-top-color:var(--d-line)}
.dark-band .qlist .qi{border-bottom-color:var(--d-line)}
.dark-band .qlist .qi::before{color:var(--d-accent)}
.dark-band .qlist .qi .qt{color:var(--d-ink)}
.dark-band .qlist .qi .qn2{color:var(--d-soft)}
.cta-band .cta-note{margin:26px auto 0; max-width:58ch; font-size:13.5px; line-height:1.62; color:rgba(244,241,234,.62)}

/* ============================ Stepped questionnaire ============================ */
.wizard{max-width:none}
.wz-head{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.wz-count{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); white-space:nowrap}
.wz-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wz-track{height:3px; background:var(--border-soft); border-radius:3px; overflow:hidden}
.wz-bar{display:block; height:100%; width:8.3333%; background:var(--brand); border-radius:3px; transition:width .32s cubic-bezier(.4,0,.2,1)}
.wz-dots{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.wz-dots .dot{width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  background:transparent; border:1.5px solid var(--border); transition:background .18s, border-color .18s, transform .18s}
.wz-dots .dot:hover{border-color:var(--brand); transform:scale(1.18)}
.wz-dots .dot.done{background:var(--brand-hair); border-color:var(--brand-hair)}
.wz-dots .dot.now{background:var(--brand); border-color:var(--brand); transform:scale(1.22)}
.wz-dots .dot:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

.wz-step{padding-top:30px; animation:wzIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes wzIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .wz-step{animation:none} .wz-bar{transition:none} }
.wz-q{font-family:var(--font-display); font-size:clamp(21px,2.9vw,29px); font-weight:600; line-height:1.24;
  letter-spacing:-.018em; color:var(--ink); margin:0; max-width:24ch; text-wrap:balance}
.wz-help{margin:12px 0 0; font-size:15px; color:var(--muted); line-height:1.6; max-width:56ch}
.wz-step .field{margin-top:22px; max-width:66ch}
.wz-step .field label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wz-step .field textarea{min-height:170px}

.wz-nav{display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; margin-top:30px}
[hidden]{display:none !important}
.btn-step{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:14.5px;
  font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--border);
  border-radius:var(--r-pill); padding:11px 20px; cursor:pointer; transition:border-color .16s, color .16s, background .16s}
.btn-step:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}
.btn-step:disabled{opacity:.36; cursor:default}
.btn-step:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.btn-step .ar{font-size:15px; line-height:1; transition:transform .16s}
.btn-step.fwd:hover:not(:disabled) .ar{transform:translateX(3px)}
.btn-step.back:hover:not(:disabled) .ar{transform:translateX(-3px)}

.wz-draft{margin-top:18px; font-size:13px; color:var(--muted); line-height:1.55; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline}
.wz-draft button{background:none; border:none; padding:0; font:inherit; color:var(--brand);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}

.dark-band .wz-count{color:var(--d-accent)}
.dark-band .wz-label, .dark-band .wz-help, .dark-band .wz-draft{color:var(--d-soft)}
.dark-band .wz-q{color:var(--d-ink)}
.dark-band .wz-track{background:var(--d-line)}
.dark-band .wz-bar{background:var(--d-accent)}
.dark-band .wz-dots .dot{border-color:var(--d-line)}
.dark-band .wz-dots .dot.done{background:rgba(201,169,106,.35); border-color:rgba(201,169,106,.35)}
.dark-band .wz-dots .dot.now{background:var(--d-accent); border-color:var(--d-accent)}
.dark-band .btn-step{color:var(--d-ink); border-color:rgba(244,241,234,.28)}
.dark-band .btn-step:hover:not(:disabled){border-color:var(--d-accent); color:var(--d-accent)}
.dark-band .wz-draft button{color:var(--d-accent)}


/* ==========================================================================
   Navy skin — formerly theme-b.css
   --------------------------------------------------------------------------
   These were scoped to :root[data-brand="b"] while the two brands ran side by
   side. The scope is gone because the alternative is gone; the rules are kept
   as their own section rather than dissolved into the components above, so it
   stays obvious which decisions came from the client's logo sheet.
   ========================================================================== */

/* ── Typography ──────────────────────────────────────────────────────────── */
/* Playfair runs larger on the body than Spectral and its hairlines thin out
   quickly, so headings come down a touch and tracking opens up. */
.display{letter-spacing:-.024em; font-weight:700}
h1,h2,
h3{letter-spacing:-.018em}
body{font-size:15.5px; letter-spacing:.002em}

/* The sheet has no monospace anywhere. Every small label on it is a wide-tracked
   sans cap, so the eyebrow treatment changes with the typeface. */
.badge,
.sec-head .sh-r,
.statrow .cap,
.crumbs,
.legal .upd,
.wz-count,
.form legend,
.disc .dn,
.cx-k,
.ts-k{font-weight:500; letter-spacing:.20em}
.badge{border-radius:2px; text-transform:uppercase; font-size:9.5px}
.disc .dn{font-family:var(--font-display); letter-spacing:-.01em; font-weight:600}

/* ── Gold as a graphic device, never as words ────────────────────────────── */
.badge .bdot{background:var(--gold)}
.rules{border-top:1px solid var(--gold)}
.disc,
.qlist,
.faq,
.defs,
.ledger,
.stat{border-top-color:var(--gold)}
.sec-head{border-bottom-color:var(--brand-hair)}
.pullquote{color:var(--ink)}
.dark-band .pullquote{color:#D9C08A}
.form-done{border-left-color:var(--gold)}
.draft-flag{border-color:var(--brand-hair); background:var(--brand-soft); color:var(--brand-dark)}
.wz-bar{background:linear-gradient(90deg,var(--brand-light),var(--gold))}
.wz-dots .dot.now,
.wz-dots .dot.done{background:var(--gold); border-color:var(--gold)}
.qlist .qi::before{color:var(--brand)}
.faq-q::after,
.faq-q::before{background:var(--brand)}

/* Solid buttons go navy with cream text. Gold behind cream is 2.4:1 and
   unreadable; gold behind navy is fine but reads as a warning in a row of them. */
.btn-solid{background:var(--ink); color:#FAF8F5; border-color:var(--ink)}
.btn-solid:hover{background:#16293A; border-color:#16293A}
/* The header CTA is a direct child of .nav-links, so `.nav-links > a` (navy
   text) outranked .btn-solid and drew navy on navy. --bg is the inverse of
   --ink in both themes, so the label reads in light and dark alike. */
.nav-links > a.btn-solid{color:var(--bg)}
.dark-band .btn-solid{background:var(--gold); color:#0C1924; border-color:var(--gold)}
.cta-band{background:#0C1924}
.cta-band .btn-solid{background:#FAF8F5; color:#0C1924; border-color:#FAF8F5}
.cta-band .cta-note{color:rgba(244,241,234,.62)}
.btn-step:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}

.nav-cta{display:flex; align-items:center; gap:8px}

/* ── Photography ─────────────────────────────────────────────────────────── */
/* The portraits were shot and matted warm. Against a cool navy ground the red
   channel in the skin reads hot, so it gets nudged back. */
.ph-photo img,
.dark-band.has-portrait img{filter:saturate(.92) hue-rotate(-4deg)}

.marquee{background:#0C1924}
.marquee-track span::after{background:var(--gold)}
.dark-band .subhead,
body.dark-hero .crumbs a:hover{color:#D9C08A}
.dark-band .field input:focus,
.dark-band .field select:focus,
.dark-band .field textarea:focus{box-shadow:0 0 0 3px rgba(201,169,106,.30)}
.dark-band .form-msg.err{background:rgba(201,169,106,.13); color:#F0E2C4; border-color:rgba(201,169,106,.36)}

/* ── Header over a dark hero ─────────────────────────────────────────────── */
.site-header.over-dark .nav-links .btn-solid{background:var(--gold); color:#0C1924; border-color:var(--gold)}
@media (max-width:900px){
  .site-header.over-dark .nav-links{background:#0C1924}
}

/* ── Capability map ──────────────────────────────────────────────────────── */
.cm-node,
.cm-hub{fill:#0C1924}
.cm-node{stroke:rgba(201,169,106,.62)}
.cm-hub{stroke:rgba(201,169,106,.44)}
.cm-g:hover .cm-spoke,
.cm-g:focus-visible .cm-spoke{stroke:rgba(201,169,106,.85)}
.cm-g:hover .cm-node,
.cm-g:focus-visible .cm-node{fill:var(--gold-lift); stroke:var(--gold-lift)}
.cm-key{fill:var(--gold-lift)}
.cm-list li::before{border-color:rgba(201,169,106,.7)}

/* ── Cycle ring ──────────────────────────────────────────────────────────── */
.cy-node.pub{fill:var(--gold); stroke:var(--gold)}
.cy-lab.pub{fill:var(--brand)}
.dark-band .cy-lab.pub{fill:var(--gold-lift)}

.seqchart .dot{stroke:#0C1924}
.sc-tip{background:#132434; border-color:rgba(244,241,234,.20)}

/* ── The arch ────────────────────────────────────────────────────────────── */
/* Stones read muddy at 18% gold on navy, so they are lifted until the graphic
   holds its shape. */
.hero-arch .stone{fill:rgba(201,169,106,.26); stroke:rgba(201,169,106,.68)}
.hero-arch .key{fill:rgba(201,169,106,.56); stroke:#D9C08A}

/* ── About: Roland's story, supplied word for word (8 October 2026) ──────────
   The copy is long and runs in short lines by design, so the formatting does
   the pacing: a heading per chapter, the one-line beats set apart, the run of
   "Who…?" questions as a list, and the lines he keeps returning to as pull
   quotes. All tokens are theme-aware; none of this sits on a dark band, so
   --ink is safe here. */
.story-h{font-family:var(--font-display); font-size:clamp(26px,3.4vw,38px); line-height:1.16;
  letter-spacing:-.022em; font-weight:700; color:var(--ink); max-width:22ch; margin:0 0 34px}
.narrative p.beat{font-style:italic; color:var(--brand)}
.narrative p.shout{font-family:var(--font-body); font-weight:600; font-size:clamp(28px,4vw,40px);
  letter-spacing:.14em; color:var(--ink); line-height:1.1}
.narrative .litany{display:flex; flex-direction:column; gap:6px}
.narrative .litany p{font-weight:600}
.narrative p.pullquote{font-size:clamp(24px,3.2vw,34px); line-height:1.24; font-weight:600;
  color:var(--brand); max-width:22ch; margin:12px 0}
.narrative p.pullquote.wide{max-width:30ch}
.narrative .asks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.narrative .asks li{font-family:var(--font-display); font-size:19.5px; line-height:1.5; color:var(--ink);
  padding-left:26px; position:relative}
.narrative .asks li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:1px; background:var(--gold)}
.signoff{margin-top:18px; padding-top:22px; border-top:1px solid var(--brand-hair)}
.signoff p{margin:0}
.narrative .signoff .so-name{font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--ink)}
.narrative .signoff .so-role{font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--ink-mid); margin-top:6px}
.narrative .signoff .so-tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-top:16px}