/* ==========================================================================
   Quintavera — brand.css  (dark-led, Route B "Signal")
   Implementation of Brand Guidelines v1.2 for a dark-first web expression.
   Edit tokens here; every page inherits.
   ========================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}

:root {
  /* Primary palette, unchanged from v1.2 */
  --graphite:    #252A31;
  --near-black:  #171A1E;
  --cobalt:      #2458C6;
  --cobalt-tint: #EAF1FD;
  --off-white:   #F7F7F5;

  /* ---- Derived tints for DARK surfaces -------------------------------
     Brand Cobalt on Near Black measures 2.73:1. That fails 4.5:1 for text
     and also fails the 3:1 graphical threshold, and no dark background
     exists where it would pass. On dark surfaces the accent therefore has
     to be a lightened derivation, exactly as v1.2 already derives its
     Graphite tints. Same hue (220.7 deg) and saturation, raised lightness.
     Cobalt Light is for dark surfaces ONLY — on Off White it is 2.82:1.  */
  --cobalt-light: #6C93E4;   /* 5.76:1 on Near Black */
  --ink-dim:      #9AA0A6;   /* 6.61:1 on Near Black — secondary text     */
  --rule-dark:    #2E333A;   /* structural rules on dark                  */
  --rule-dark-2:  #3C424A;   /* stronger rule on dark                     */

  /* ---- Derived tints for LIGHT surfaces (unchanged from v1.2) -------- */
  --ink-secondary: #64686C;
  --rule-axis:     #A3A5A7;
  --rule-hairline: #D1D2D2;
  --rule-gridline: #DEDEDE;

  /* Type scale — pushed considerably larger than the previous build */
  --step--1: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1rem,     0.96rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.188rem, 1.10rem + 0.44vw, 1.5rem);
  --step-2:  clamp(1.5rem,   1.32rem + 0.90vw, 2.125rem);
  --step-3:  clamp(1.875rem, 1.55rem + 1.60vw, 3rem);
  --step-4:  clamp(2.375rem, 1.80rem + 2.90vw, 4.5rem);
  --step-5:  clamp(2.75rem,  1.85rem + 4.60vw, 6.5rem);

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;   --sp-8:9rem;

  --measure: 60ch;
  --page-max: 1320px;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --rail: 190px;
  --rule-thin: 1px;
  --rule-thick: 3px;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0 !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%;height:auto}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--off-white);
  background:var(--near-black);
  -webkit-font-smoothing:antialiased;
}

p{max-width:var(--measure)}
p + p{margin-top:var(--sp-2)}
strong{font-weight:600}

a{color:var(--cobalt-light);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--cobalt-light);outline-offset:3px}

/* --- Typographic roles --------------------------------------------------- */
.eyebrow{font-size:var(--step--1);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.4}
.display{font-size:var(--step-5);font-weight:600;letter-spacing:-.032em;
  line-height:1.02;text-wrap:balance}
.h1{font-size:var(--step-4);font-weight:600;letter-spacing:-.028em;line-height:1.06;text-wrap:balance}
.h2{font-size:var(--step-3);font-weight:600;letter-spacing:-.024em;line-height:1.1;text-wrap:balance}
.h3{font-size:var(--step-2);font-weight:600;letter-spacing:-.016em;line-height:1.2}
.h4{font-size:var(--step-1);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.lede{font-size:var(--step-1);line-height:1.45;max-width:42ch;color:var(--ink-dim)}
.small{font-size:var(--step--1);color:var(--ink-dim)}
.secondary{color:var(--ink-dim)}

/* The cobalt moment. One per viewport section, never two. */
.accent{color:var(--cobalt-light)}

/* --- Layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-6)}
.section + .section{border-top:var(--rule-thin) solid var(--rule-dark)}
@media (min-width:900px){.section{padding-block:var(--sp-8)}}

.rail{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.rail__label{padding-top:.4em}
@media (min-width:900px){
  .rail{grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--sp-6)}
}

.stack > * + *{margin-top:var(--sp-3)}
.stack--loose > * + *{margin-top:var(--sp-5)}
.cols{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:900px){.cols--3{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}}

/* --- Light chapter: inverted for contrast -------------------------------- */
.section--light{background:var(--off-white);color:var(--graphite);
  border-top:var(--rule-thick) solid var(--cobalt)}
.section--light .eyebrow,
.section--light .secondary,
.section--light .lede,
.section--light .small{color:var(--ink-secondary)}
.section--light .accent{color:var(--cobalt)}     /* true Cobalt passes on light */
.section--light a{color:var(--cobalt)}
.section--light .caps__item{border-top-color:var(--rule-hairline)}

/* --- Masthead ------------------------------------------------------------ */
.masthead{position:sticky;top:0;z-index:60;background:rgba(23,26,30,.92);
  backdrop-filter:blur(10px);border-bottom:var(--rule-thin) solid var(--rule-dark)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-block:var(--sp-2)}
.masthead__logo{display:block;padding:.5em 0}
.masthead__logo img{width:clamp(168px,45vw,220px)}

.nav__toggle{display:none;align-items:center;gap:.5em;background:none;
  border:var(--rule-thin) solid var(--rule-dark-2);color:var(--off-white);
  font:inherit;font-size:var(--step--1);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:.7em 1.1em;cursor:pointer;min-height:44px}
.nav__toggle:hover{border-color:var(--ink-dim)}
.nav__list{display:flex;flex-wrap:wrap;gap:0 var(--sp-4)}
.nav__list a{display:block;padding:.9em 0;min-height:44px;color:var(--off-white);
  text-decoration:none;font-weight:500;font-size:var(--step--1);letter-spacing:.04em}
.nav__list a:hover{color:var(--cobalt-light)}
.nav__list a[aria-current="page"]{color:var(--cobalt-light)}

@media (max-width:899px){
  .js .nav__toggle{display:inline-flex}
  .js .nav__list{display:none}
  .js .nav--open .nav__list{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--near-black);border-bottom:var(--rule-thick) solid var(--cobalt-light);
    padding:var(--sp-2) var(--gutter) var(--sp-3)}
  .js .nav--open .nav__list li + li{border-top:var(--rule-thin) solid var(--rule-dark)}
}
@media (min-width:900px){
  .nav__list a{padding:.25em 0;min-height:0}
  .nav__list a[aria-current="page"]{box-shadow:inset 0 -2px 0 0 var(--cobalt-light)}
}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:var(--sp-6) 0;
  min-height:calc(100svh - 84px);display:flex;flex-direction:column;
  justify-content:center}
@media (min-width:900px){.hero{padding-block:var(--sp-7) 0}}
.hero__lede{margin-top:var(--sp-4)}

/* Signal band: noise resolving into an ordered series. */
.band{width:100%;margin-top:var(--sp-6);flex:0 0 auto}
.band svg{width:100%;height:clamp(120px,22vh,220px);display:block}
.band line{stroke:var(--off-white)}
.band line.is-signal{stroke:var(--cobalt-light);stroke-width:2.4}

.scrollcue{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-dim);padding-block:var(--sp-3)}

/* --- Capability list ----------------------------------------------------- */
.caps{display:grid;grid-template-columns:1fr}
.caps__item{padding-block:var(--sp-4);border-top:var(--rule-thin) solid var(--rule-dark)}
.caps__title{font-size:var(--step-1);font-weight:500}
.caps__body{margin-top:var(--sp-1);color:var(--ink-dim);max-width:44ch}
@media (min-width:760px){
  .caps{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-6)}
}

/* --- Five-stage spine ---------------------------------------------------- */
.spine__list{display:grid;grid-template-columns:1fr}
.spine__item{position:relative;padding-left:var(--sp-4);padding-bottom:var(--sp-5);
  border-left:var(--rule-thin) solid var(--rule-dark-2)}
.spine__item:last-child{border-left-color:var(--cobalt-light);padding-bottom:0}
.spine__item::before{content:"";position:absolute;left:0;top:.5em;
  width:11px;height:var(--rule-thin);background:var(--rule-dark-2)}
.spine__item:last-child::before{background:var(--cobalt-light);
  width:11px;height:11px;left:-5px;top:.35em}
.spine__num{display:block;font-size:var(--step--1);font-weight:600;
  letter-spacing:.11em;color:var(--ink-dim);margin-bottom:.4em}
.spine__item:last-child .spine__num{color:var(--cobalt-light)}
.spine__title{font-size:var(--step-1);font-weight:500;line-height:1.25}
.spine__body{margin-top:var(--sp-1);color:var(--ink-dim)}
@media (min-width:900px){
  .spine__list{grid-template-columns:repeat(5,1fr)}
  .spine__item{padding:var(--sp-3) var(--sp-3) 0 0;border-left:0;
    border-top:var(--rule-thin) solid var(--rule-dark-2)}
  .spine__item:last-child{border-top-color:var(--cobalt-light);padding-right:0}
  .spine__item::before{left:0;top:0;width:var(--rule-thin);height:11px}
  .spine__item:last-child::before{left:0;top:-5px;width:11px;height:11px}
  /* Annotation size: the five-column axis is narrow, so body copy at full
     size breaks to four words a line. */
  .spine__body{font-size:var(--step--1);line-height:1.5}
}

/* --- Statement: the repeated line, at scale ------------------------------ */
.statement{font-size:var(--step-4);font-weight:600;letter-spacing:-.028em;
  line-height:1.05;max-width:18ch}

/* --- Footer -------------------------------------------------------------- */
.foot{background:var(--near-black);border-top:var(--rule-thick) solid var(--rule-dark-2);
  padding-block:var(--sp-5)}
.foot__lockup{width:clamp(180px,40vw,240px);margin-bottom:var(--sp-4)}
.foot__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:700px){.foot__grid{grid-template-columns:1fr 1fr;gap:var(--sp-5)}}
@media (min-width:1000px){.foot__grid{grid-template-columns:2fr 1fr 1fr}}
.foot__head{font-size:var(--step--1);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:var(--sp-2)}
.foot__nav li + li{margin-top:.5em}
.foot__nav a{text-decoration:none;color:var(--off-white)}
.foot__nav a:hover{text-decoration:underline}
.foot__legal{margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:var(--rule-thin) solid var(--rule-dark);
  font-size:var(--step--1);color:var(--ink-dim)}

/* Hero with generated artwork behind it */
.hero--art{isolation:isolate}
.hero__art{position:absolute;inset:auto 0 0 0;height:min(70%,560px);z-index:0;pointer-events:none}
.hero__art svg{width:100%;height:100%;display:block}
.hero--art .wrap{position:relative;z-index:2}

/* --- Tag lists (plain, no boxes) -----------------------------------------
   Separated by a middot rather than a rule: a border-right dangles at the
   end of a wrapped line, and there is no reliable CSS way to detect the
   last item in a row. */
.tags{display:flex;flex-wrap:wrap;gap:0 .35em}
.tags li{font-size:var(--step-0);font-weight:500;padding-block:.35em}
.tags li:not(:last-child)::after{content:"·";margin-left:.75em;
  color:var(--rule-dark-2);font-weight:400}
.section--light .tags li:not(:last-child)::after{color:var(--rule-axis)}

/* --- The three analyses -------------------------------------------------- */
.analyses{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media (min-width:820px){.analyses{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
.analyses__item img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-top:var(--rule-thin) solid var(--rule-dark-2)}
.analyses__title{font-size:var(--step-1);font-weight:600;margin-top:var(--sp-3);
  letter-spacing:-.01em;line-height:1.25}
.analyses__sub{font-size:var(--step--1);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cobalt-light);margin-top:.4em}
.analyses__body{color:var(--ink-dim);margin-top:var(--sp-2);max-width:46ch}

/* --- Contact ------------------------------------------------------------- */
.contact-card{border-top:var(--rule-thick) solid var(--cobalt-light);padding-top:var(--sp-3)}
.contact-card__name{font-size:var(--step-1);font-weight:600}
.contact-card__role{color:var(--ink-dim);font-size:var(--step--1);margin-top:.15em}
.contact-card a{word-break:break-word}
@media (min-width:900px){.cols--2{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}}

/* --- Article prose (insights and case studies) ---------------------------
   Wrap body copy in <div class="prose"> and write plain h2, h3, p, ul, ol
   and blockquote inside it. Everything is styled already. */
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:var(--sp-3)}
.prose h2{font-size:var(--step-2);font-weight:600;letter-spacing:-.016em;
  line-height:1.2;margin-top:var(--sp-5)}
.prose h3{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;
  line-height:1.3;margin-top:var(--sp-4)}
.prose ul,.prose ol{padding-left:1.5em}
.prose ul li{list-style:none;position:relative}
.prose ul li::before{content:"";position:absolute;left:-1.2em;top:.72em;
  width:8px;height:var(--rule-thin);background:var(--rule-dark-2)}
.prose ol{list-style:decimal}
.prose ol li::marker{color:var(--ink-dim);font-weight:600;font-size:.9em}
.prose li + li{margin-top:.4em}
.prose blockquote{border-left:var(--rule-thick) solid var(--cobalt-light);
  padding:var(--sp-3);margin-block:var(--sp-4);background:rgba(108,147,228,.07)}
.prose blockquote p{font-size:var(--step-1);line-height:1.45}
.prose figcaption{font-size:var(--step--1);color:var(--ink-dim);margin-top:var(--sp-1)}
.section--light .prose ul li::before{background:var(--rule-axis)}
.section--light .prose blockquote{border-left-color:var(--cobalt);
  background:var(--cobalt-tint)}

.article-meta{display:flex;flex-wrap:wrap;gap:0 var(--sp-2);
  font-size:var(--step--1);color:var(--ink-dim);margin-top:var(--sp-3)}
.article-meta span + span::before{content:"/ ";color:var(--rule-dark-2)}

.listing li{border-top:var(--rule-thin) solid var(--rule-dark)}
.listing li:last-child{border-bottom:var(--rule-thin) solid var(--rule-dark)}
.listing a{display:block;padding-block:var(--sp-4);text-decoration:none;
  color:var(--off-white)}
.listing a:hover .listing__title{color:var(--cobalt-light)}
.listing__title{display:block;font-size:var(--step-2);font-weight:600;
  letter-spacing:-.016em;line-height:1.2}
.listing__sum{display:block;color:var(--ink-dim);margin-top:var(--sp-1);max-width:58ch}

.divider{border:0;border-top:var(--rule-thin) solid var(--rule-dark);margin-block:var(--sp-4)}

/* --- Utilities ----------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;background:var(--off-white);
  color:var(--graphite);padding:.75em 1.25em;z-index:100}
.skip-link:focus{left:var(--gutter);top:.5rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Motion -------------------------------------------------------------- */
/* Progressive enhancement: without JS nothing is hidden, so .js gates it. */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   INQUIRIES (Insights series) — added September 2026 for Inquiry 01.
   Everything below is additive; nothing above was changed.
   ========================================================================== */

/* --- Meta line: CATEGORY | INQUIRY | DATE ------------------------------- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .8em;
  font-size:var(--step--1);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--off-white);line-height:1.3}
.meta span+span::before{content:"";display:inline-block;width:1px;height:.85em;
  background:var(--ink-dim);margin-right:.8em;vertical-align:-.06em}
.meta__cat{color:var(--cobalt-light)}
.meta__date{font-weight:500;color:var(--ink-dim)}
@media (max-width:699px){ /* date takes its own line: no dangling separator */
  .meta__date{flex-basis:100%}.meta__date::before{display:none !important}}

/* --- Tile grid on insights.html ------------------------------------------ */
.tiles{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:700px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  .tile--wide{grid-column:span 2}}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;
  flex-direction:column;justify-content:space-between;min-height:420px;
  padding:var(--sp-4);text-decoration:none;color:var(--off-white);
  background:var(--graphite);border:var(--rule-thin) solid var(--rule-dark-2)}
@media (min-width:700px){.tile--wide{min-height:460px}}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--focus,50% 60%);z-index:-2;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,26,30,.94) 0%,rgba(23,26,30,.80) 42%,
  rgba(23,26,30,.18) 72%,rgba(23,26,30,.58) 100%)}
.tile:hover,.tile:focus-visible{border-color:var(--cobalt-light)}
.tile:hover .tile__img{transform:scale(1.04)}
.tile__title{font-size:var(--step-2);font-weight:600;letter-spacing:-.02em;
  line-height:1.15;margin-top:var(--sp-3);max-width:22ch;text-wrap:balance}
.tile--wide .tile__title{font-size:var(--step-3);max-width:20ch}
.tile__cta{display:flex;align-items:center;gap:1em;margin-top:var(--sp-4);
  font-size:var(--step--1);font-weight:600;letter-spacing:.04em}
.tile__cta::before{content:"";flex:0 0 auto;width:48px;height:2px;
  background:var(--cobalt-light);transition:width .4s cubic-bezier(.22,.61,.36,1)}
.tile:hover .tile__cta::before{width:96px}
@media (prefers-reduced-motion: reduce){.tile__img,.tile__cta::before{transition:none}
  .tile:hover .tile__img{transform:none}}

/* --- Inquiry hero: title panel left, image right ------------------------- */
.inq-hero{display:grid;grid-template-columns:1fr;
  border-bottom:var(--rule-thin) solid var(--rule-dark)}
.inq-hero__img{width:100%;height:240px;object-fit:cover;object-position:55% 55%}
.inq-hero__body{padding:var(--sp-4) var(--gutter) var(--sp-5)}
.inq-hero__back{font-size:var(--step--1);font-weight:500;color:var(--ink-dim);
  text-decoration:none}
.inq-hero__back:hover{color:var(--cobalt-light);text-decoration:underline}
.inq-hero__body .meta{margin-top:var(--sp-3)}
.inq-hero__title{margin-top:var(--sp-4)}
.inq-hero__q{font-size:var(--step-1);font-weight:500;line-height:1.35;
  color:var(--cobalt-light);margin-top:var(--sp-3);max-width:34ch}
@media (min-width:900px){
  .inq-hero{grid-template-columns:minmax(0,1fr) minmax(360px,42%);min-height:560px}
  .inq-hero__img{order:2;height:100%;object-position:58% 50%}
  .inq-hero__body{order:1;display:flex;flex-direction:column;justify-content:space-between;
    padding:var(--sp-5) var(--sp-6) var(--sp-6) var(--gutter);max-width:820px}
  .inq-hero__title{margin-top:var(--sp-6)}
}
@media (min-width:1400px){.inq-hero__body{padding-left:calc((100vw - var(--page-max))/2 + var(--gutter))}}

/* --- Standfirst ----------------------------------------------------------- */
.standfirst{font-size:var(--step-1);line-height:1.5;max-width:44ch}
.mobile-only{display:block}
@media (min-width:900px){.mobile-only{display:none}}
.desktop-only{display:none}
@media (min-width:900px){.desktop-only{display:block}}

/* --- The Quinta Quick Look: the one light element on the page ------------- */
.quick{display:flex;background:#F5F5F0;color:var(--graphite);
  border-top:10px solid #ADA598}
.quick__body{flex:1 1 auto;padding:var(--sp-4) var(--sp-3) var(--sp-3)}
.quick__band{display:none}
.quick__head{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:.5em var(--sp-3)}
.quick__title{font-size:var(--step-2);font-weight:600;letter-spacing:-.016em;
  color:var(--near-black);line-height:1.15}
.quick__tag{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-secondary)}
.quick__list{margin-top:var(--sp-3);border-bottom:var(--rule-thin) solid #D4D0C6}
.quick__list li{display:grid;grid-template-columns:2.6em minmax(0,1fr);
  align-items:baseline;padding:.9em 0;border-top:var(--rule-thin) solid #D4D0C6}
.quick__list li span:first-child{font-size:var(--step--1);font-weight:600;
  letter-spacing:.08em;color:var(--cobalt)}
.quick__list p{max-width:none;line-height:1.5}
.quick__list strong{font-weight:600;color:var(--near-black)}
.quick__more{display:inline-block;margin-top:var(--sp-3);font-size:var(--step--1);
  font-weight:600;color:var(--cobalt);text-decoration:none}
.quick__more:hover{text-decoration:underline}
@media (min-width:900px){
  .quick{border-top:0}
  .quick__body{padding:var(--sp-5) var(--sp-6) var(--sp-4)}
  .quick__band{display:block;flex:0 0 56px;background:#ADA598}
}

/* --- Article side rail: method note --------------------------------------- */
.note{border-top:var(--rule-thin) solid var(--rule-dark-2);padding-top:var(--sp-2);
  font-size:var(--step--1);line-height:1.6;color:var(--ink-dim)}
.note .eyebrow{margin-bottom:var(--sp-1)}
.series-line{font-style:italic;color:var(--ink-dim);font-size:var(--step--1)}

/* --- Pull statement (replaces boxed blockquote in Inquiries) --------------- */
.pull{border-top:var(--rule-thin) solid var(--rule-dark);
  border-bottom:var(--rule-thin) solid var(--rule-dark);
  padding-block:var(--sp-4);margin-block:var(--sp-4)}
.pull p{font-size:var(--step-2);font-weight:600;letter-spacing:-.016em;line-height:1.3;
  max-width:28ch;text-wrap:balance}

/* --- Boardroom dilemma: one action, two paths ------------------------------ */
.dilemma{margin-top:var(--sp-5)}
.dilemma__root{display:inline-block;padding:.9em 2em;border:var(--rule-thin) solid var(--cobalt-light);
  background:var(--graphite);font-weight:600}
.dilemma__fork{display:none}
.dilemma__paths{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-3)}
.path{border:var(--rule-thin) solid var(--rule-dark-2);border-top:3px solid var(--path,var(--ink-dim));
  background:#1A1D22;display:flex;flex-direction:column}
.path--good{--path:#7DB58F}
.path--bad{--path:#D98492}
.path__cond{padding:var(--sp-3);border-bottom:var(--rule-thin) solid var(--rule-dark-2)}
.path__cond .eyebrow{margin-bottom:.5em}
.path__cond strong{display:block;font-size:var(--step-1);font-weight:600;line-height:1.3}
.path__cond p{margin-top:.5em;font-size:var(--step--1);color:var(--ink-dim)}
.path__out{padding:var(--sp-3);display:flex;justify-content:space-between;
  align-items:flex-end;gap:var(--sp-3)}
.path__out .eyebrow{margin-bottom:.5em}
.path__out strong{display:block;font-size:var(--step-2);font-weight:600;
  letter-spacing:-.016em;color:var(--path)}
.path__ex{font-size:var(--step--1);color:var(--off-white);text-align:right;line-height:1.5}
@media (min-width:760px){
  .dilemma{display:flex;flex-direction:column;align-items:center}
  .dilemma__fork{display:block;width:50%;height:var(--sp-4);
    border-top:0;border-left:var(--rule-thin) solid var(--ink-dim);
    border-right:var(--rule-thin) solid var(--ink-dim);position:relative;margin-top:var(--sp-4)}
  .dilemma__fork::before{content:"";position:absolute;left:0;right:0;top:-1px;
    height:var(--rule-thin);background:var(--ink-dim)}
  .dilemma__fork::after{content:"";position:absolute;left:50%;top:calc(-1 * var(--sp-4) - 1px);
    width:var(--rule-thin);height:var(--sp-4);background:var(--ink-dim)}
  .dilemma__paths{grid-template-columns:1fr 1fr;width:100%;margin-top:0}
}

/* --- Boardroom questions ---------------------------------------------------- */
.questions{display:grid;grid-template-columns:1fr;gap:0}
.questions li{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-top:var(--rule-thin) solid var(--rule-dark-2)}
.questions__n{display:block;font-size:var(--step--1);font-weight:600;
  letter-spacing:.08em;color:var(--cobalt-light);margin-bottom:.5em}
.questions strong{display:block;font-size:var(--step-1);font-weight:600;line-height:1.3}
.questions p{margin-top:.5em;font-size:var(--step--1);color:var(--ink-dim);max-width:none}
@media (min-width:700px){.questions{grid-template-columns:1fr 1fr;column-gap:var(--sp-4)}}
@media (min-width:1000px){.questions{grid-template-columns:repeat(4,1fr)}}

/* --- Embedded interactive figure ------------------------------------------- */
.figure__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.5em var(--sp-3);padding-bottom:var(--sp-2);
  border-bottom:var(--rule-thin) solid var(--rule-dark-2)}
.figure__hint{font-size:var(--step--1);color:var(--ink-dim)}
.figure__frame{display:block;width:100%;border:var(--rule-thin) solid var(--rule-dark-2);
  border-top:0;background:#16181C;aspect-ratio:4/3;min-height:420px}
@media (min-width:760px){.figure__frame{aspect-ratio:16/9;min-height:520px}}
.figure__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5em var(--sp-3);
  padding-top:var(--sp-2);font-size:var(--step--1)}
.figure__caption{margin-top:var(--sp-3);font-size:var(--step--1);color:var(--ink-dim);
  max-width:80ch}
.figure__caption strong{color:var(--off-white)}

/* --- Footnotes and closing prompt ------------------------------------------ */
.footnotes{border-top:var(--rule-thin) solid var(--rule-dark);padding-top:var(--sp-3);
  font-size:var(--step--1);color:var(--ink-dim)}
.prompt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--sp-3) var(--sp-5);background:var(--graphite);
  border:var(--rule-thin) solid var(--rule-dark-2);padding:var(--sp-4) var(--sp-5)}
.prompt p{max-width:none}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 2em;
  background:var(--cobalt);color:#fff;font-weight:600;text-decoration:none}
.btn:hover{background:#1E4AA8;text-decoration:none}

/* --- Static figure (added September 2026 for Inquiry 02) -------------------
   A PNG in place of the interactive iframe. Same frame as .figure__frame but
   the image keeps its own proportions at every width, so nothing is squashed. */
.figure__img{display:block;width:100%;height:auto;
  border:var(--rule-thin) solid var(--rule-dark-2);border-top:0;background:#16181C}