/* ==============================================================
   Narrative Stack - narrativestack.io site stylesheet
   Design system v1.2 (18 July 2026), agent 48. Built by agent 50.
   Colour tokens: identity v2 design-tokens.md
   Type (18 Jul 2026): Newsreader display + Arial everywhere else
   Surface (18 Jul 2026): rounded buttons, soft shadows, one gradient
   ============================================================== */
:root{
  --ns-white:#ffffff;
  --ns-ink:#0a0e16;
  --ns-navy:#0d1f4d;
  --ns-cobalt:#1d3ec2;
  --ns-blue-live:#2f55ea;
  --ns-wash:#eef2fc;
  --ns-grid:#e6e9f0;
  --ns-grey:#5c6470;

  --ns-radius-s:8px;
  --ns-radius-m:12px;
  --ns-radius-l:16px;

  --ns-shadow-rest:0 2px 8px rgba(10,14,22,0.06),0 1px 2px rgba(10,14,22,0.04);
  --ns-shadow-hover:0 6px 20px rgba(10,14,22,0.10),0 2px 6px rgba(10,14,22,0.05);
  --ns-shadow-band:0 12px 32px rgba(13,31,77,0.16);

  --ns-gradient-band:linear-gradient(135deg,#0d1f4d 0%,#16307d 100%);
  --ns-gradient-btn-hover:linear-gradient(135deg,#16307d 0%,#1d3ec2 100%);

  --ns-transition:150ms ease;

  --font-display:Newsreader,Georgia,'Times New Roman',serif;
  --font-sans:Arial,'Helvetica Neue',Helvetica,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ns-white);color:var(--ns-ink);font-family:var(--font-sans);font-size:17px;line-height:1.65;font-weight:400}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;transform:none !important;scroll-behavior:auto !important}}

/* ---- containers ---- */
.container{max-width:1120px;margin:0 auto;padding:0 40px}
.container-narrow{max-width:720px;margin:0 auto;padding:0 40px}
.measure{max-width:720px}
@media(max-width:768px){.container,.container-narrow{padding:0 24px}}

/* ---- type ---- */
h1{font-family:var(--font-display);font-weight:500;font-size:54px;line-height:1.08;letter-spacing:-0.005em}
h2{font-family:var(--font-display);font-weight:500;font-size:34px;line-height:1.15;letter-spacing:-0.005em}
h3{font-weight:700;font-size:20px;line-height:1.35}
.lede{font-size:20px;line-height:1.55}
.small{font-size:14px;line-height:1.5}
.text-grey{color:var(--ns-grey)}
@media(max-width:768px){
  h1{font-size:34px;line-height:1.12}
  h2{font-size:28px;line-height:1.2}
  h3{font-size:18px}
  body{font-size:16px;line-height:1.6}
  .lede{font-size:18px}
}
.kicker{font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-grey)}
p+p{margin-top:16px}
/* cross-link signpost line ("see the X page"): one consistent spacing wherever it appears */
.see-also{margin-top:16px}

/* ---- links ---- */
a{color:var(--ns-cobalt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--ns-transition)}
a:hover{color:var(--ns-blue-live)}
:focus-visible{outline:2px solid var(--ns-blue-live);outline-offset:2px}
.band-card :focus-visible{outline-color:var(--ns-white)}

/* ---- visually-hidden (screen-reader only) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- skip link ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ns-cobalt);color:#fff;padding:12px 20px;font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;z-index:10;border-radius:0 0 var(--ns-radius-s) 0}
.skip:focus{left:0}

/* ---- buttons ---- */
.btn{display:inline-block;background-image:var(--ns-gradient-band);background-color:var(--ns-navy);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;padding:16px 28px;border:0;line-height:1;border-radius:var(--ns-radius-s);box-shadow:var(--ns-shadow-rest);transition:background-image var(--ns-transition),box-shadow var(--ns-transition),transform var(--ns-transition)}
.btn:hover,.btn:focus-visible{background-image:var(--ns-gradient-btn-hover);color:#fff;box-shadow:var(--ns-shadow-hover);transform:translateY(-1px)}
.btn-compact{padding:10px 18px}
.btn-inverse{background-image:none;background-color:#fff;color:var(--ns-navy);box-shadow:var(--ns-shadow-rest)}
.btn-inverse:hover,.btn-inverse:focus-visible{background-image:none;background-color:var(--ns-wash);color:var(--ns-navy)}

/* ---- header ----
   18 July 2026 revision: header now carries the full stacked interlock lockup
   (logo-stacked.svg), matching the footer, per Daniela's direct feedback that a
   single inline line cannot show the interlock. The stacked mark's identity-rule
   minimum is 72px tall, so the bar grows from 72px to 112px to keep the two-line
   mark centred with comfortable, even clear space above and below (20px each side
   at 72px logo height), never touching the hairline border. Nav and the Contact
   button stay vertically centred via flex align-items. */
.site-header{border-bottom:1px solid var(--ns-grid)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:112px}
.site-header .logo{display:inline-flex;align-items:center}
.site-header .logo img{height:72px;display:block}
.site-nav{display:flex;align-items:center;gap:32px}
.site-nav a{font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-ink);text-decoration:none}
.site-nav a:hover{color:var(--ns-cobalt)}
.site-nav a[aria-current="page"]{color:var(--ns-cobalt)}
.site-nav .btn,.site-nav .btn:hover,.site-nav .btn:focus-visible{color:#fff;text-decoration:none}
.site-nav a.btn[aria-current="page"],.site-nav a.btn[aria-current="page"]:hover{color:#fff}
@media(max-width:768px){
  .site-header .bar{height:auto;flex-direction:column;align-items:flex-start;gap:0}
  .site-header .logo{display:flex;align-items:center;height:104px}
  .site-nav{width:100%;padding:12px 0 16px;gap:16px;overflow-x:auto;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{font-size:12px;letter-spacing:0.08em}
}

/* ---- main / section rhythm ---- */
main{display:block}
.page-head{padding-top:80px}
@media(max-width:768px){.page-head{padding-top:48px}}

/* ---- hero ---- */
.hero{position:relative;padding:80px 0 96px}
.hero::before{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(ellipse at 18% 0%,rgba(29,62,194,0.07),transparent 60%),
    linear-gradient(var(--ns-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--ns-grid) 1px,transparent 1px);
  background-size:auto,80px 80px,80px 80px;
  -webkit-mask-image:linear-gradient(#000 55%,transparent 100%);
  mask-image:linear-gradient(#000 55%,transparent 100%)}
.hero .container{position:relative}
.hero-inner{max-width:880px}
.hero .tagline{font-weight:400;font-size:14px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ns-grey);margin-top:24px}
.hero .btn{margin-top:40px}
@media(max-width:768px){.hero{padding:48px 0 56px}}
/* Print/PDF: preserve brand backgrounds (wash panels, gradient buttons, cards, hero grid) */
@media print{
  *,*::before,*::after{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .site-header{position:static}
  a[href]{text-decoration:none;color:inherit}
}

/* ---- direct answer block ---- */
.answer{background:var(--ns-wash);border-left:3px solid var(--ns-cobalt);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);padding:32px;margin:40px 0}
.answer .label{font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-grey);display:block;margin-bottom:12px}
.answer p{font-size:20px;line-height:1.55}
.answer p+p{margin-top:16px}
@media(max-width:768px){.answer{padding:24px}.answer p{font-size:18px}}

/* ---- index numbering ---- */
.index-head{margin-top:80px}
.index-head .index{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.index-head .index span{font-weight:400;font-size:14px;letter-spacing:0.08em;color:var(--ns-grey)}
.index-head .index::after{content:"";flex:1;height:1px;background:var(--ns-grid)}
.index-head + p,.index-head + .lede{margin-top:12px}
@media(max-width:768px){.index-head{margin-top:64px}}

/* ---- stat tiles ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.stat{padding:32px;border:1px solid var(--ns-grid);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);background:var(--ns-white)}
.stat .figure{font-family:var(--font-display);font-weight:500;font-size:48px;line-height:1;margin:0 0 8px}
.stat .cap{font-size:14px;line-height:1.5;color:var(--ns-grey)}
@media(max-width:768px){
  .stats{grid-template-columns:1fr 1fr}
  .stat .figure{font-size:36px}
}
@media(max-width:480px){.stats{grid-template-columns:1fr}}

/* ---- case-study preview (Proof section, Home + Services): kicker + headline + stats in a wash panel ---- */
.case-hl{font-family:var(--font-sans);font-weight:400;font-size:17px;line-height:1.65;letter-spacing:normal;max-width:720px}
.case-hl a{white-space:nowrap}
@media(max-width:768px){.case-hl{font-size:16px}}
/* remove the outer wash-panel box for the case-study preview (tiles keep their own boxes); smaller figures so "5 markets" fits one row */
.wash-panel.case-preview{background:none !important;border:0 !important;box-shadow:none !important;outline:0 !important;padding:0 !important}
/* match the heading-to-text gap used by ".sec-head + p" (12px), so "Case study" sits the same distance from its intro line as other section headings */
.sec-head + .case-preview{margin-top:12px}
.case-preview .stat .figure{font-size:34px;white-space:nowrap}
@media(max-width:768px){.case-preview .stat .figure{font-size:30px}}

/* ---- note / narrative card ---- */
.note-card{border:1px solid var(--ns-grid);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);background:var(--ns-white);padding:32px;margin-top:24px}

/* ---- inline bulleted list: bold opener continues the same sentence ---- */
.inline-list{list-style:none;margin-top:24px;padding-left:22px}
.inline-list li{position:relative;padding:6px 0;line-height:1.65}
.inline-list li::before{content:"";position:absolute;left:-16px;top:calc(6px + 0.825em);transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--ns-cobalt)}
.inline-list li+li{margin-top:4px}

/* ---- workstream / hairline list ---- */
.worklist{list-style:none;margin-top:24px}
.worklist li{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid var(--ns-grid)}
.worklist li:last-child{border-bottom:0}
.worklist .idx{font-size:14px;letter-spacing:0.08em;color:var(--ns-grey);flex:0 0 48px;padding-top:2px}
.worklist .lead{display:block;font-weight:700;margin-bottom:4px}
.worklist .desc{display:block}
.worklist li>div{flex:1}

/* ---- Home sections 1-3 & 6: connective system (18 July 2026 revision) ----
   Daniela's feedback: sections 4 (steps) and 5 (proof) already read as
   designed; sections 1, 2, 3 and 6 read as plain heading-plus-text with too
   much whitespace, and the page felt like it alternated "plain wall of text"
   and "designed component" rather than one system. Sections 4 and 5 are not
   touched by any rule below.
   The fix extends devices already in this system rather than inventing new
   ones: the wash-tint panel from .answer/.bio-card bookends the page at
   sections 1 and 6 (matching problem-framing and qualifying-criteria
   sections); the cobalt lit-edge from .step/.hub-list gives section 3's
   workstreams a card grid distinct from section 1's list; the cobalt
   left-rule from .answer gives section 2's stakes paragraph a callout.
   Sibling top margins below intentionally collapse against the previous
   section's zero bottom margin, tightening the rhythm without per-section
   bottom-margin bookkeeping. */

/* sections 2 & 3: snugger top gap than the 80px section default (closes the
   "too much vertical space" gap Daniela flagged, applied across the set so
   1-3 and 6 read as one tightened rhythm; 4 and 5 keep their original 80px) */
.home-block{margin-top:96px}
.home-block .index-head{margin-top:0}
/* first block after the hero: double the hero->section gap. The hero's bottom
   padding (112px desktop / 64px mobile) already supplies one gap; adding a matching
   top margin on the block doubles the space between the hero and this section.
   The block is nested in the .container that follows the hero, so reach through it. */
.hero + .container > .home-block:first-child{margin-top:112px}
@media(max-width:768px){.home-block{margin-top:64px}}
@media(max-width:768px){.hero + .container > .home-block:first-child{margin-top:64px}}

/* sections 1 & 6: matching wash-panel bookends, same panel language as
   .answer and .bio-card (wash fill, radius-m, resting shadow) */
.wash-panel{background:var(--ns-wash);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);padding:40px;margin-top:48px}
.wash-panel .index-head{margin-top:0}
/* standalone panel that IS its own section (no bare .sec-head directly above):
   match the full section rhythm so the gap above equals the gap below */
.wash-panel.section{margin-top:96px}
@media(max-width:768px){.wash-panel{padding:24px;margin-top:40px}.wash-panel.section{margin-top:64px}}

/* section 1 only: the three trigger statements get a cobalt flag edge and
   tighter row padding, so the list reads denser than the plain hairline
   worklist used elsewhere */
.trigger-list{margin-top:20px}
.trigger-list li{border-bottom:1px solid var(--ns-grid);padding:14px 0}
.trigger-list li:last-child{border-bottom:0}
/* closing line after a panel list (sections 1 & 6): bold, tight to the list
   above it, so the panel ends on a beat instead of drifting into whitespace */
.panel-note{margin-top:16px;font-weight:700}

/* section 2 only: the stakes paragraph becomes a callout card, echoing the
   direct-answer block's cobalt left rule at body scale */
.callout-card{background:var(--ns-white);border:1px solid var(--ns-grid);border-left:3px solid var(--ns-cobalt);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);padding:32px;margin-top:24px}

/* section 3 only: five workstreams as a card grid (the step-card recipe -
   cobalt lit top edge, hairline border, resting shadow - at a denser two-up
   scale), distinct from section 1's list though built from the same parts */
.build-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.build-card{border:1px solid var(--ns-grid);border-top:2px solid var(--ns-cobalt);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);background:var(--ns-white);padding:28px}
.build-card .idx{display:block;font-weight:400;font-size:24px;letter-spacing:0.08em;color:var(--ns-cobalt);margin-bottom:8px}
.build-card .lead{display:block;font-weight:700;margin-bottom:4px}
.build-card .desc{display:block}
.build-grid li:last-child{grid-column:1/-1}
@media(max-width:768px){.build-grid{grid-template-columns:1fr}.build-grid li:last-child{grid-column:auto}}

/* section 6 only: the four qualifying facts as a compact grid inside the
   wash panel, echoing the stat-tile rhythm from section 5 rather than a
   stacked list */
.fact-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:20px}
.fact-grid .lead{display:block;font-weight:700;margin-bottom:4px;color:var(--ns-navy)}
.fact-grid .desc{display:block}
@media(max-width:480px){.fact-grid{grid-template-columns:1fr}}

/* ---- Home revision (19 July 2026, Daniela's feedback round 2) ----
   white "What is Narrative Stack?" answer; section 1 gains a right-hand
   illustration; section headings lose the order number + grey line and sit
   tighter to their subtitle; "What I build" is a 3-up grid whose 6th cell is
   a cobalt CTA card; "Who this is for" is Sectors | (Stage + Size). Other
   pages keep the numbered .index-head. */
.home-answer{margin-top:56px}
.home-answer .lede{margin-top:12px}
/* section head with no index number/line (homepage only) */
.sec-head{margin-top:96px}
.home-block .sec-head,.wash-panel .sec-head,.split-text .sec-head{margin-top:0}
.sec-head + p,.sec-head + .lede{margin-top:12px}
@media(max-width:768px){.sec-head{margin-top:64px}}
/* section 1: text + illustration side by side */
.split-panel{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center}
.split-text{min-width:0}
.split-media{display:flex;justify-content:center;min-width:0}
.split-media img{width:100%;max-width:460px;height:auto;display:block}
@media(max-width:860px){.split-panel{grid-template-columns:1fr;gap:32px}.split-media{order:-1}.split-media img{max-width:340px}}
/* section 3: 3-up build grid, 6th cell = cobalt CTA card */
.build-grid-3{grid-template-columns:repeat(3,1fr)}
.build-grid-3 li:last-child{grid-column:auto}
.build-cta{padding:0;border:0;background:var(--ns-gradient-band);box-shadow:var(--ns-shadow-band)}
.build-cta a{display:flex;align-items:center;height:100%;padding:28px;color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.25}
.build-cta a:hover{color:var(--ns-wash)}
@media(max-width:900px){.build-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.build-grid-3{grid-template-columns:1fr}}
/* section 6: Sectors (left) | Stage + Size stacked (right) */
.fact-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px}
.fact-cols .lead{display:block;font-weight:700;margin-bottom:4px;color:var(--ns-navy)}
.fact-cols .desc{display:block}
.fact-cols .fact-item{position:relative;padding-left:20px}
.fact-cols .fact-item::before{content:"";position:absolute;left:0;top:0.55em;width:7px;height:7px;border-radius:50%;background:var(--ns-navy)}
.fact-cols .fact-item + .fact-item{margin-top:24px}
@media(max-width:640px){.fact-cols{grid-template-columns:1fr;gap:24px}}

/* ---- Services revision (19 July 2026, Daniela's feedback) ---- */
/* numbered workstream cards, 2-up, gradient-blue number badge with white numeral */
.num-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:20px;margin-top:32px}
.num-card{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--ns-grid);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);background:var(--ns-white);padding:24px}
.num-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--ns-radius-s);background:var(--ns-gradient-band);color:#fff;font-weight:700;font-size:16px;box-shadow:var(--ns-shadow-rest)}
.num-card .lead{display:block;font-weight:700;margin-bottom:4px}
.num-card .desc{display:block}
@media(max-width:768px){.num-grid{grid-template-columns:1fr;grid-template-rows:auto;grid-auto-flow:row}}
/* eyebrow above a two-col-panel heading so the h2s align across columns */
.tc-eyebrow{display:block;font-weight:700;font-size:30px;color:var(--ns-navy);margin-bottom:6px;min-height:1.4em}
/* Services 'Why founders pick this': 2-col list inside the wash panel */
.why-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:24px}
.why-grid .lead{display:block;font-weight:700;margin-bottom:4px;color:var(--ns-navy)}
.why-grid .desc{display:block}
@media(max-width:768px){.why-grid{grid-template-columns:1fr}}
/* two sections side by side inside one wash panel (How it starts | The first 30 days) */
.two-col-panel{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.two-col-panel .sec-head{margin-top:0}
@media(max-width:768px){.two-col-panel{grid-template-columns:1fr;gap:32px}}
/* fit / not-a-fit: dark blue bullets, disc left-aligned under the heading */
.fitlist{list-style:none;padding-left:0}
.fitlist li{position:relative;padding:8px 0 8px 18px;border-bottom:0}
.fitlist li::before{content:"";position:absolute;left:0;top:calc(16px + 0.8em);transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--ns-navy)}
/* generic dark-blue bulleted list (About, Contact, MTF, cost). Uses a drawn
   ::before disc rather than ::marker colour so the dark-blue bullet renders
   reliably in the browser AND in PDF export (Chrome print ignores ::marker). */
.bullet-list{list-style:none;padding-left:22px;margin-top:24px}
.bullet-list li{position:relative;padding:6px 0;line-height:1.65}
.bullet-list li::before{content:"";position:absolute;left:-16px;top:calc(6px + 0.825em);transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--ns-navy)}
.bullet-list li+li{margin-top:4px}

/* ---- step cards ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.step{border:1px solid var(--ns-grid);border-top:2px solid var(--ns-cobalt);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);padding:32px;background:var(--ns-white)}
.step .idx{font-weight:400;font-size:24px;letter-spacing:0.08em;color:var(--ns-cobalt)}
.step h3{margin:12px 0 8px}
@media(max-width:768px){.steps{grid-template-columns:1fr;gap:16px}}

/* ---- fit / not-a-fit two columns ---- */
.fit-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
.fit-cols h3{margin-bottom:8px}
.fitlist{list-style:none}
.fitlist li{position:relative;padding:16px 0 16px 18px;border-bottom:1px solid var(--ns-grid);line-height:1.6}
.fitlist li:last-child{border-bottom:0}
@media(max-width:768px){.fit-cols{grid-template-columns:1fr;gap:32px}}

/* ---- bio card + framed headshot ---- */
.bio-card{background:var(--ns-wash);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);padding:40px;display:grid;grid-template-columns:200px 1fr;gap:40px;margin:40px 0}
.headshot-frame{position:relative;width:200px}
.headshot-frame::after{content:"";position:absolute;inset:8px -8px -8px 8px;border:1px solid var(--ns-cobalt);border-radius:var(--ns-radius-m);z-index:0}
.headshot-frame .headshot{position:relative;z-index:1;width:200px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);display:block}
.bio-card .label{font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-grey);display:block;margin-bottom:12px}
.bio-card p{font-size:20px;line-height:1.55}
@media(max-width:768px){
  .bio-card{grid-template-columns:1fr;padding:24px;gap:32px}
  .headshot-frame,.headshot-frame .headshot{width:160px}
  .bio-card p{font-size:18px}
}

/* ---- FAQ ---- */
/* match the heading-to-text gap used by ".sec-head + p" (12px), so "FAQ" sits the same distance from its first question as other section headings; the first pair drops its top padding so the 12px is exact */
.faq{margin-top:12px}
.faq .pair{padding:32px 0;border-bottom:1px solid var(--ns-grid)}
.faq .pair:first-child{padding-top:0}
.faq .pair:last-child{border-bottom:0}
.faq h3{margin-bottom:12px}
.faq p+p{margin-top:16px}

/* ---- tables ---- */
.table-card{border:1px solid var(--ns-grid);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);overflow:hidden;margin-top:40px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%}
.table-wide{min-width:720px}
.table-mid{min-width:560px}
thead th{font-weight:700;font-size:12px;letter-spacing:0.10em;text-transform:uppercase;color:var(--ns-grey);text-align:left;padding:16px;border-bottom:1.5px solid var(--ns-ink);vertical-align:bottom}
td{font-size:16px;line-height:1.5;padding:16px;border-bottom:1px solid var(--ns-grid);vertical-align:top}
tbody th{font-weight:700;font-size:16px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--ns-ink);text-align:left;padding:16px;border-bottom:1px solid var(--ns-grid);vertical-align:top}
tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.rowlabel,th.rowlabel{font-weight:700}
.col-hl{background:var(--ns-wash)}
/* gradient-blue table header row (Services 'Two ways to work together') -
   gradient on the row so it reads as one continuous band, not three cells */
thead.grad-head tr{background:var(--ns-gradient-band)}
thead.grad-head th{background:transparent;color:#fff;border-bottom:0}
/* 'Two ways to work together': narrower Lead column (col 2), Build (col 3) absorbs it */
.table-lead-narrow{table-layout:fixed}
.table-lead-narrow col:nth-child(1){width:27.5%}
.table-lead-narrow col:nth-child(2){width:36.25%}
.table-lead-narrow col:nth-child(3){width:36.25%}
.table-card.narrow-centered{max-width:73%;margin-left:auto;margin-right:auto}
@media(max-width:900px){.table-card.narrow-centered{max-width:100%}}

/* ---- pull quote ---- */
.pullquote{border-top:1px solid var(--ns-grid);border-bottom:1px solid var(--ns-grid);padding:32px;margin:40px 0}
.pullquote p{font-family:var(--font-display);font-weight:400;font-style:normal;font-size:28px;line-height:1.3}

/* ---- breadcrumbs ---- */
.breadcrumb{margin:24px 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.breadcrumb li{font-weight:400;font-size:12px;letter-spacing:0.10em;text-transform:uppercase}
.breadcrumb li+li::before{content:"/";color:var(--ns-grey);margin-right:8px}
.breadcrumb a{color:var(--ns-grey);text-decoration:none}
.breadcrumb a:hover{color:var(--ns-cobalt);text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--ns-ink)}

/* ---- byline ---- */
.byline{font-size:12px;letter-spacing:0.10em;color:var(--ns-grey);margin-top:16px}
.byline a{color:var(--ns-grey)}
.byline a:hover{color:var(--ns-cobalt)}

/* ---- hub listing cards ---- */
.hub-list{list-style:none;display:grid;gap:16px;margin-top:40px}
.hub-list a{display:block;text-decoration:none;color:inherit;border:1px solid var(--ns-grid);border-top:2px solid var(--ns-cobalt);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);padding:32px;background:var(--ns-white);transition:box-shadow var(--ns-transition),transform var(--ns-transition)}
.hub-list a:hover,.hub-list a:focus-visible{box-shadow:var(--ns-shadow-hover);transform:translateY(-1px)}
.hub-list .q{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-0.005em;transition:color var(--ns-transition)}
.hub-list a:hover .q,.hub-list a:focus-visible .q{color:var(--ns-cobalt)}
.hub-list .dek{font-size:16px;line-height:1.5;color:var(--ns-grey);margin-top:12px;max-width:62ch}
.hub-list .read{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-cobalt)}
.hub-list .read .arrow{transition:transform var(--ns-transition)}
.hub-list a:hover .read .arrow,.hub-list a:focus-visible .read .arrow{transform:translateX(4px)}

/* ---- contact panel ---- */
.contact-panel{background:var(--ns-wash);border-radius:var(--ns-radius-m);box-shadow:var(--ns-shadow-rest);padding:32px;margin:40px 0}
.contact-panel .email{font-weight:700;font-size:20px;line-height:1.3;display:inline-block}
.contact-panel .row{margin-top:16px}
.contact-panel .place{color:var(--ns-grey);margin-top:16px}

/* ---- navy CTA card ---- */
.band-card{background:var(--ns-gradient-band);color:#fff;border-radius:var(--ns-radius-l);box-shadow:var(--ns-shadow-band);padding:64px;margin-top:80px}
.band-card h2{color:#fff}
.band-card p{color:var(--ns-wash);margin-top:16px;max-width:720px}
.band-card .btn-inverse{margin-top:40px}
.band-card .secondary{margin-top:24px;font-size:14px}
.band-card a:not(.btn){color:#fff}
.band-card a:not(.btn):hover{color:var(--ns-wash)}
@media(max-width:768px){.band-card{padding:32px;margin-top:64px}}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--ns-grid);padding:80px 0 40px;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.site-footer .logo-stacked{display:inline-block}
.site-footer .logo-stacked img{height:80px;display:block;margin-bottom:24px}
.site-footer .colhead{font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-grey);margin-bottom:16px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer a{color:var(--ns-ink);text-decoration:none;font-size:14px}
.site-footer a:hover{color:var(--ns-cobalt);text-decoration:underline}
.site-footer .oneliner{font-size:14px;color:var(--ns-grey);max-width:280px}
.site-footer .base{margin-top:64px;font-size:13px;color:var(--ns-grey)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:40px}}