/* Fonts, served from this site (2026-11): Spectral, Cinzel and Hanken Grotesk, SIL Open Font License.
   Same files and subsets Google Fonts served before; the browser downloads a subset only when the page uses it. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/cinzel-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/cinzel-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/cinzel-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/cinzel-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/hanken-grotesk-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/hanken-grotesk-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/hanken-grotesk-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/hanken-grotesk-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/hanken-grotesk-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-cyrillic-ext-400-italic.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-cyrillic-400-italic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-vietnamese-400-italic.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-cyrillic-ext-400.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-vietnamese-400.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/spectral-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/spectral-cyrillic-ext-500.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/spectral-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/spectral-vietnamese-500.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/spectral-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/spectral-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/spectral-cyrillic-ext-600.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/spectral-cyrillic-600.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/spectral-vietnamese-600.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/spectral-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/spectral-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Type scale: the only five font sizes on the site (2026-11) =====
   --fs-title    page titles (one h1 per page)
   --fs-section  section headings (h2)
   --fs-card     card headings, lead lines, questions
   --fs-body     body text, buttons, menu
   --fs-small    labels, chips, captions, footer, the sample brief's paper
   Every font-size below uses one of these. Change a size here and it changes everywhere. */
:root {
  --fs-title:   clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --fs-section: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  --fs-card:    1.25rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:root {
  --surface-page:       #F5F2E3;
  --surface-card:       #FFFFFF;
  --surface-inset:      #EDE9DB;
  --surface-brand:      #1C6055;
  --color-brand:        #1C6055;
  --color-brand-soft:   #DCF0ED;
  --color-brand-tint:   #F0F7F6;
  --teal-100:           #D8EDEA;
  --teal-200:           #ACC8C3;
  --teal-600:           #1D6B5F;
  --teal-700:           #1C6055;
  --teal-800:           #154A41;
  --sand-100:           #F5F2E3;
  --sand-200:           #E8E3D5;
  --text-body:          #2C3332;
  --text-strong:        #111C1B;
  --text-muted:         #5B6A68;
  --text-faint:         #60716F;
  --text-brand:         #1C6055;
  --text-on-brand:      #F5F2E3;
  --border-subtle:      rgba(28,96,85,0.1);
  --border-default:     #BDD0CC;
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:          0 10px 30px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
  --font-sans:          'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:       'Spectral', Georgia, serif;
  --font-wordmark:      'Cinzel', Georgia, serif;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-2xl: 24px;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body { margin:0; background:var(--surface-page); font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.6; color:var(--text-body); }
img { max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 32px; }
@media (max-width:600px) { .wrap { padding:0 20px; } }
svg.lucide { width:18px; height:18px; stroke-width:1.9; }
.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; }
:focus-visible { outline:2px solid var(--teal-600); outline-offset:3px; }

/* Headings and text blocks */
.kicker { font-family:var(--font-wordmark); text-transform:uppercase; letter-spacing:0.12em; font-size:var(--fs-small); font-weight:600; color:var(--text-brand); margin:0 0 10px; }
.kicker.on-brand { color:var(--text-on-brand); }
.page-title { font-family:var(--font-display); font-weight:600; font-size:var(--fs-title); line-height:1.08; letter-spacing:-0.02em; color:var(--text-strong); margin:0 0 16px; max-width:22ch; text-wrap:balance; }
.section-title { font-family:var(--font-display); font-weight:600; font-size:var(--fs-section); line-height:1.15; letter-spacing:-0.015em; color:var(--text-strong); margin:0 0 12px; text-wrap:balance; }
.section-title.on-brand { color:var(--sand-100); }
.card-title { font-family:var(--font-display); font-weight:600; font-size:var(--fs-card); line-height:1.25; color:var(--text-strong); }
.lede { font-size:var(--fs-card); line-height:1.5; color:var(--text-muted); max-width:56ch; margin:0 0 28px; }
.block { padding:32px 0 48px; }
.page-top { padding-top:48px; }
.more-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin:24px 0 0; }
.text-link { color:var(--text-brand); font-weight:600; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:44px; }

/* Skip link */
.skip-link { position:absolute; left:12px; top:-80px; z-index:200; background:var(--color-brand); color:var(--text-on-brand); padding:12px 18px; border-radius:var(--radius-md); font-weight:600; text-decoration:none; }
.skip-link:focus { top:12px; }
main:focus { outline:none; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-light { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:var(--radius-md); font-family:var(--font-sans); font-weight:600; font-size:var(--fs-body); text-decoration:none; cursor:pointer; transition:background var(--dur-base); }
.btn-primary { border:0; background:var(--color-brand); color:var(--text-on-brand); }
.btn-primary:hover { background:var(--teal-800); }
.btn-primary.lg, .btn-secondary, .btn-light { min-height:50px; padding:0 26px; }
.btn-secondary { border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-brand); }
.btn-secondary:hover { background:var(--color-brand-tint); }
.btn-light { background:var(--sand-100); color:var(--teal-800); }
.btn-light:hover { background:#fff; }
.msg-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; background:transparent; color:var(--text-brand); border:1.5px solid var(--teal-700); border-radius:999px; padding:9px 18px; font:inherit; font-size:var(--fs-small); font-weight:600; cursor:pointer; transition:background var(--dur-base), color var(--dur-base); }
.msg-btn:hover { background:var(--teal-700); color:var(--text-on-brand); }
.msg-btn svg { width:16px; height:16px; }
.msg-btn.on-brand { min-height:50px; color:var(--text-on-brand); border-color:var(--text-on-brand); }
.msg-btn.on-brand:hover { background:var(--sand-100); color:var(--teal-800); }

/* Header (shared block) */
.site-header { position:sticky; top:0; z-index:100; background:rgba(245,242,227,0.92); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border-subtle); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:74px; gap:12px; }
.logo-btn { display:flex; align-items:center; gap:11px; min-height:44px; min-width:44px; text-decoration:none; }
.logo-btn img { height:52px; width:auto; }
.logo-wordmark { font-family:var(--font-wordmark); letter-spacing:0.16em; font-weight:600; font-size:var(--fs-small); color:var(--teal-800); white-space:nowrap; }
.nav-items { display:flex; align-items:center; gap:4px; }
.navlink { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font-weight:500; color:var(--text-body); border-radius:var(--radius-sm); text-decoration:none; transition:background var(--dur-base); }
.navlink:hover { background:var(--color-brand-tint); }
.navlink[aria-current="page"] { color:var(--text-brand); box-shadow:inset 0 -2px 0 var(--color-brand); }
.nav-book { margin-left:12px; font-size:var(--fs-small); }
.header-mobile { display:none; align-items:center; gap:4px; }
.nav-book-sm { font-size:var(--fs-small); padding:0 14px; }
.ham-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:0; cursor:pointer; color:var(--text-body); }
.ham-btn svg { width:24px; height:24px; }
.mobile-nav { display:none; flex-direction:column; background:var(--surface-card); border-top:1px solid var(--border-subtle); box-shadow:var(--shadow-lg); }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:14px 24px; min-height:48px; font-weight:500; color:var(--text-body); text-decoration:none; border-bottom:1px solid var(--border-subtle); }
.mobile-nav a:last-child { border-bottom:0; }
.mobile-nav a[aria-current="page"] { color:var(--text-brand); font-weight:700; }
@media (max-width:959px) { .nav-items { display:none; } .header-mobile { display:flex; } }
@media (max-width:520px) { .logo-wordmark { display:none; } }
.nav-book, .nav-book-sm { white-space:nowrap; }

/* Hero (Home) */
.hero { position:relative; overflow:hidden; }
.hero-mark { position:absolute; right:56px; top:50%; transform:translateY(-50%); height:440px; width:auto; opacity:0.06; pointer-events:none; user-select:none; }
.hero-inner { position:relative; padding:52px 32px 32px; }
.hero .page-title { max-width:16ch; }
/* Hero: three equal ways in, each with an icon in a soft circle.
   On load the icon circles fill with teal one after another, once, to show they can be selected. Hover or focus turns a pill teal. */
.hero-ctas { position:relative; z-index:1; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; }
.hero-btn { display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 22px 6px 6px; border-radius:999px; border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-brand); font-weight:600; font-size:var(--fs-body); text-decoration:none; white-space:nowrap; transition:background var(--dur-base), border-color var(--dur-base), color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); }
.hero-ic { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--color-brand-soft); color:var(--color-brand); flex:none; transition:background var(--dur-base), color var(--dur-base); }
.hero-ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hero-btn:hover, .hero-btn:focus-visible { background:var(--color-brand); border-color:var(--color-brand); color:var(--text-on-brand); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.hero-btn:hover .hero-ic, .hero-btn:focus-visible .hero-ic { background:rgba(245,242,227,.16); color:var(--text-on-brand); }
.hero-btn .hero-ic { animation:hero-wave 900ms var(--ease-out) 1 backwards; }
.hero-btn:nth-child(1) .hero-ic { animation-delay:500ms; }
.hero-btn:nth-child(2) .hero-ic { animation-delay:850ms; }
.hero-btn:nth-child(3) .hero-ic { animation-delay:1200ms; }
@keyframes hero-wave { 0%,100% { background:var(--color-brand-soft); color:var(--color-brand); transform:none; } 35% { background:var(--color-brand); color:var(--text-on-brand); transform:scale(1.1); } }
@media (max-width:600px) { .hero-ctas { display:grid; grid-auto-flow:row; } }
@media (prefers-reduced-motion:reduce) { .hero-btn .hero-ic { animation:none; } .hero-btn:hover, .hero-btn:focus-visible { transform:none; } }
@media (max-width:820px) { .hero-mark { display:none; } .hero-inner { padding:40px 20px 24px; } }

/* How we work (Home): a pathway of four steps. Each circle flips over to show the step; an arrow then draws to the next one,
   and after the last step a line snakes down to the services. Without script, every step shows its front and back. */
.hw { padding:24px 0 8px; }
.path-hint { color:var(--text-muted); margin:0 0 24px; }
.path { list-style:none; display:flex; align-items:stretch; gap:0; }
.path-step { flex:none; width:calc((100% - 120px) / 4 + 40px); display:flex; align-items:center; }
.path-step:last-child { width:calc((100% - 120px) / 4); }
.flip { flex:1; min-width:0; display:grid; perspective:1200px; }
.flip > .face { grid-area:1/1; }
.js .flip { transform-style:preserve-3d; transition:transform .7s var(--ease-out); }
.js .flip > .face { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.js .flip > .back { transform:rotateY(180deg); }
.js .path-step.flipped .flip { transform:rotateY(180deg); }
.front { display:grid; place-items:center; background:none; border:0; padding:8px; font:inherit; color:inherit; cursor:pointer; border-radius:24px; }
.disc { width:min(100%, 214px); aspect-ratio:1; border-radius:50%; display:grid; place-content:center; justify-items:center; gap:6px; padding:8% 11%; text-align:center; background:var(--surface-card); border:2px solid var(--teal-200); box-shadow:var(--shadow-sm); transition:border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); }
.disc b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--color-brand); color:var(--text-on-brand); font-size:var(--fs-small); }
.step-name { font-family:var(--font-display); font-weight:600; font-size:var(--fs-card); line-height:1.2; color:var(--text-strong); }
.step-tag { font-family:var(--font-wordmark); font-size:var(--fs-small); letter-spacing:.1em; text-transform:uppercase; color:var(--text-brand); }
.front:hover .disc { border-color:var(--teal-700); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.front:focus-visible { outline:none; }
.front:focus-visible .disc { outline:3px solid var(--teal-600); outline-offset:4px; }
.back { position:relative; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:18px; box-shadow:var(--shadow-lg); padding:18px 18px 16px; display:flex; flex-direction:column; gap:8px; cursor:pointer; }
.back h3 { font-family:var(--font-display); font-weight:600; font-size:var(--fs-card); line-height:1.2; color:var(--text-strong); padding-right:40px; }
.back p { color:var(--text-muted); line-height:1.5; }
.back-link { color:var(--text-brand); font-weight:600; text-underline-offset:3px; margin-top:auto; display:inline-flex; align-items:center; min-height:44px; }
.flip-back { position:absolute; top:8px; right:8px; width:44px; height:44px; border-radius:50%; border:0; background:var(--surface-inset); color:var(--text-brand); display:grid; place-items:center; cursor:pointer; }
.flip-back:hover { background:var(--teal-100); }
.flip-back svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html:not(.js) .flip-back { display:none; }
html:not(.js) .flip { gap:12px; }
html:not(.js) .flip > .face { grid-area:auto; }
/* Arrows between steps, drawn when the step before has been opened */
.path-arrow { flex:0 0 40px; display:grid; place-items:center; }
.path-arrow svg { width:40px; height:24px; overflow:visible; fill:none; stroke:var(--teal-700); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.path-arrow .draw, .path-snake .draw { stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .6s var(--ease-out); }
.path-arrow .head { transition:opacity .2s .45s; }
.js .path-step:not(.drawn) .path-arrow .draw { stroke-dashoffset:1; }
.js .path-step:not(.drawn) .path-arrow .head { opacity:0; transition-delay:0s; }
/* Steps not reached yet wait, faded; the next one appears once its arrow has drawn */
/* The fade sits on the circle, never on the card that turns: a see-through card cannot turn in 3D, and shows its front mirrored */
.js .path-step .disc { transition:border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base), opacity .4s .45s; }
.js .path-step:not(.reached) .disc { opacity:.4; transition-delay:0s; }
.js .path-step.reached:not(.flipped):not(.seen) .disc { border-color:var(--teal-700); animation:beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 0%,100% { box-shadow:0 0 0 0 rgba(28,96,85,.25); } 50% { box-shadow:0 0 0 10px rgba(28,96,85,0); } }
/* The line from the last step down to What we do */
.path-snake { display:block; width:100%; height:84px; margin-top:6px; overflow:visible; fill:none; stroke:var(--teal-700); stroke-width:2.5; stroke-linecap:round; }
.path-snake .mob { display:none; }
.js .path-snake:not(.drawn) .draw { stroke-dashoffset:1; }
.path-snake .draw { transition-duration:1.1s; }
.snake-head { display:block; width:0; height:0; margin:-3px 0 0 calc(3.03% - 8px); border-left:8px solid transparent; border-right:8px solid transparent; border-top:11px solid var(--teal-700); transition:opacity .3s .9s; }
.js .path-snake:not(.drawn) + .snake-head { opacity:0; transition-delay:0s; }
@media (max-width:1080px) {
  .path { flex-direction:column; align-items:center; }
  .path-step, .path-step:last-child { width:100%; max-width:420px; flex-direction:column; }
  .flip { width:100%; }
  .disc { width:220px; }
  .path-arrow { flex-basis:40px; }
  .path-arrow svg { transform:rotate(90deg); }
  .path-snake { height:56px; }
  .path-snake .desk { display:none; }
  .path-snake .mob { display:inline; }
  .snake-head { margin-left:calc(50% - 8px); }
}
@media (prefers-reduced-motion:reduce) {
  .js .flip, .path-arrow .draw, .path-arrow .head, .path-snake .draw, .snake-head, .js .path-step .disc { transition:none; }
  .disc { animation:none !important; }
}

/* Services list (Home) */
.svc-list { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.svc-list > li { display:flex; flex-direction:column; }
.svc-list > li > a { flex:1 0 auto; display:grid; align-content:start; gap:2px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:14px 20px; text-decoration:none; color:var(--text-body); transition:border-color var(--dur-base), box-shadow var(--dur-base); }
.svc-list > li > a:hover { border-color:var(--teal-200); box-shadow:var(--shadow-sm); }
.svc-list > li > a b { font-family:var(--font-display); font-size:var(--fs-card); font-weight:600; color:var(--text-strong); }
.svc-list > li > a span { color:var(--text-muted); line-height:1.5; }
@media (max-width:700px) { .svc-list { grid-template-columns:1fr; } }

/* Services page: Needs Assessment card */
.na-card { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:28px 32px; margin:0 0 32px; max-width:760px; scroll-margin-top:96px; }
@media (max-width:600px) { .na-card { padding:22px 20px; } }

/* Services page: the six services grouped under three stages, with arrows between them; a card opens its details below */
.svc-stages { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr); grid-template-rows:auto 1fr 1fr; row-gap:12px; margin-bottom:8px; }
.stage { display:grid; grid-row:1 / span 3; grid-template-rows:subgrid; gap:12px; }
.stage .svc-list { grid-row:span 2; grid-template-rows:subgrid; }
.stage-label { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-brand); border-bottom:2px solid var(--teal-200); padding-bottom:8px; }
.stage-build .stage-label { border-color:#9DC08B; }
.stage-last .stage-label { border-color:var(--teal-700); }
.stage .svc-list { grid-template-columns:1fr; gap:12px; }
.stage-build .svc-card { background:#F1F7EE; }
.stage-last .svc-card { background:#E6E8DA; }
.svc-list > li > a.svc-ongoing { border:1.5px solid var(--teal-700); }
.svc-badge { justify-self:start; margin-bottom:4px; display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:var(--fs-small); font-weight:600; color:var(--text-on-brand); background:var(--teal-700); border-radius:999px; padding:2px 10px 2px 8px; }
.svc-badge svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.svc-note { font-style:normal; font-size:var(--fs-small); font-weight:600; color:#8A5F17; margin-top:4px; }
.stage-arrow { grid-row:1 / span 3; align-self:center; display:grid; place-items:center; color:var(--teal-700); margin-top:34px; }
.stage-arrow svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:900px) {
  .svc-stages { grid-template-columns:1fr; grid-template-rows:none; gap:6px; }
  .stage, .stage-arrow { grid-row:auto; }
  .stage { grid-template-rows:none; }
  .stage .svc-list { grid-row:auto; grid-template-rows:none; }
  .stage-arrow { margin:0; justify-self:start; padding-left:18px; }
  .stage-arrow svg { transform:rotate(90deg); }
}
.svc-detail { margin-top:16px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:26px 28px; position:relative; animation:sjrise .35s var(--ease-out); }
.svc-detail[hidden] { display:none; }
@keyframes sjrise { from { transform:translateY(8px); opacity:.4; } to { transform:none; opacity:1; } }
.sj-top { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px 40px; }
.svc-detail .dk { font-family:var(--font-wordmark); text-transform:uppercase; letter-spacing:.1em; font-size:var(--fs-small); color:var(--text-brand); }
.svc-detail h2 { font-family:var(--font-display); font-weight:600; font-size:var(--fs-section); letter-spacing:-.015em; color:var(--text-strong); margin:6px 0 10px; line-height:1.15; }
.svc-detail .long { color:var(--text-body); line-height:1.65; max-width:65ch; }
.sj-gets { list-style:none; display:grid; gap:14px; align-content:start; }
.sj-gets .gh { font-size:var(--fs-small); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-brand); margin:4px 0 2px; }
.sj-gets li.g { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; }
.sj-gets .gi { width:40px; height:40px; border-radius:10px; background:var(--color-brand-tint); color:var(--text-brand); display:grid; place-items:center; }
.sj-gets b { display:block; color:var(--text-strong); font-weight:700; line-height:1.3; }
.sj-gets .d { font-size:var(--fs-small); color:var(--text-muted); }
.sj-acts { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--border-subtle); }
.sj-btn { display:inline-flex; align-items:center; min-height:46px; padding:0 22px; border-radius:var(--radius-md); background:var(--color-brand); color:var(--text-on-brand); font-weight:600; text-decoration:none; }
.sj-btn:hover { background:var(--teal-800); }
@media (max-width:760px) {
  .svc-detail { padding:20px 18px; margin:10px 0 6px; }
  .sj-top { grid-template-columns:1fr; padding-right:0; }
}

.svc-card.on { border-color:var(--teal-700); box-shadow:0 0 0 2px var(--teal-700); }
.svc-all { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:-8px 0 6px; color:var(--text-brand); font-weight:600; text-decoration:none; }
.svc-all:hover { text-decoration:underline; text-underline-offset:3px; }
.svc-all svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.svc-detail + .svc-detail { margin-top:16px; }
.svc-detail .sj-top { padding-right:0; }

/* Services page: platforms, two cards side by side, one short panel at a time */
#platforms { scroll-margin-top:80px; }
.platform-card { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:28px; }
.pf-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto 1fr; column-gap:28px; }
.pf-card { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; }
.platform-header { display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.platform-header img { height:56px; width:56px; object-fit:contain; flex:0 0 auto; }
.platform-h2 { margin:0; }
.pf-more { margin-left:auto; display:inline-flex; align-items:center; gap:5px; min-height:44px; font-weight:600; font-size:var(--fs-small); color:var(--text-brand); text-decoration:none; border:1.5px solid var(--teal-200); border-radius:999px; padding:0 14px; white-space:nowrap; transition:background var(--dur-base); }
.pf-more:hover { background:var(--color-brand-tint); border-color:var(--teal-700); }
.pf-more svg { width:14px; height:14px; }
.pf-lede { line-height:1.6; margin:0 0 16px; }
.pf-tabs { display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:8px; margin:0 0 14px; }
.pf-tab { font:600 var(--fs-small)/1 var(--font-sans); color:var(--teal-800); background:var(--color-brand-tint); border:1px solid var(--teal-200); border-radius:999px; min-height:44px; padding:0 16px; cursor:pointer; transition:background 160ms, color 160ms, border-color 160ms; }
.pf-tab:hover { background:var(--teal-100); }
.pf-tab.on { background:var(--teal-700); border-color:var(--teal-700); color:#fff; }
.pf-panels { display:grid; align-content:start; background:var(--surface-inset); border-radius:var(--radius-md); padding:16px 20px; }
.pf-panel { grid-area:1/1; line-height:1.55; visibility:hidden; opacity:0; transform:translateY(4px); transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms; }
.pf-panel.on { visibility:visible; opacity:1; transform:none; transition-delay:0s; }
.pf-panel ul { padding:0 0 0 1.15em; display:grid; gap:7px; }
.pf-panel li::marker { color:var(--teal-700); }
@media (max-width:900px) { .pf-grid { grid-template-columns:1fr; grid-template-rows:none; row-gap:24px; } .pf-card { display:flex; flex-direction:column; grid-row:auto; } }
@media (max-width:600px) { .platform-card { padding:22px 18px; } }

/* About page: photo on the left, everything else beside it. If the full story is opened the photo stays in view (CSS only). */
.meet-grid { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:44px; align-items:start; }
.meet-photo-wrap { position:sticky; top:96px; }
.meet-photo-wrap img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:block; }
.meet-text .page-title { margin-bottom:8px; }
.meet-text .lede { margin-bottom:20px; }
.meet-p { line-height:1.65; margin:0 0 14px; max-width:68ch; }
.read-more { margin:0; }
.read-more summary { display:inline-flex; align-items:center; min-height:44px; cursor:pointer; color:var(--text-brand); font-weight:600; }
.read-more[open] summary { margin-bottom:8px; }
.trust { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.trust span { display:inline-flex; align-items:center; gap:8px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:999px; padding:8px 16px; font-size:var(--fs-small); }
.trust svg.lucide { color:var(--teal-700); width:16px; height:16px; }
@media (max-width:820px) { .meet-grid { grid-template-columns:1fr; gap:24px; } .meet-photo-wrap { position:static; max-width:240px; } }
@media (prefers-reduced-motion:reduce) { .meet-photo-wrap { position:static; } }

/* FAQ page */
.faq-list { display:flex; flex-direction:column; gap:14px; max-width:860px; }
.faq { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 26px; min-height:44px; transition:background var(--dur-base) var(--ease-out); }
.faq > summary::-webkit-details-marker { display:none; }
.faq[open] > summary { background:var(--color-brand-tint); }
.faq-q { font-family:var(--font-display); font-size:var(--fs-card); font-weight:600; color:var(--text-strong); line-height:1.3; }
.faq-chev { flex:0 0 auto; color:var(--text-brand); transition:transform var(--dur-base) var(--ease-out); }
.faq[open] .faq-chev { transform:rotate(180deg); }
.faq-body { padding:14px 26px 24px; }
.faq-body p { line-height:1.7; max-width:70ch; }
@media (max-width:600px) { .faq > summary { padding:16px 18px; } .faq-body { padding:12px 18px 20px; } }

/* Closing call to action, message form, tagline, footer (shared block) */
.closing { padding:16px 0 36px; }
.cta-box { position:relative; overflow:hidden; background:var(--surface-brand); border-radius:var(--radius-2xl); padding:30px 48px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:48px; }
.cta-copy { max-width:52ch; }
.cta-lede { margin:0 0 22px; color:var(--text-on-brand); line-height:1.55; max-width:46ch; }
.msg-main { gap:8px; border:0; cursor:pointer; font-family:var(--font-sans); }
.msg-main svg { width:18px; height:18px; }
.cta-acts { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cta-box-img { height:170px; width:auto; opacity:0.9; justify-self:end; }
@media (max-width:768px) { .cta-box { grid-template-columns:1fr; padding:28px 22px; gap:20px; } .cta-box-img { display:none; } }
.contact-wrap[hidden] { display:none; }
.contact-card { background:var(--color-brand-tint); border:1px solid var(--teal-200); border-radius:var(--radius-lg); padding:26px 32px 30px; margin-top:24px; max-width:760px; }
.contact-card .card-title { margin:0 0 4px; }
.contact-card p { margin:0 0 14px; color:var(--text-muted); }
@media (max-width:600px) { .contact-card { padding:20px 18px; } }
.tagline { padding:20px 20px 18px; text-align:center; border-top:1px solid var(--border-subtle); }
.tagline p { font-family:var(--font-display); font-size:var(--fs-section); font-weight:600; color:var(--color-brand); letter-spacing:-0.01em; }
.site-footer { padding:24px 0 28px; border-top:1px solid var(--border-subtle); }
.foot-row { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.foot-small { margin-top:12px; padding-top:14px; border-top:1px solid var(--border-subtle); gap:12px; color:var(--text-faint); font-size:var(--fs-small); }
.foot-logo { height:52px; width:auto; opacity:0.65; }
.foot-link { display:inline-flex; align-items:center; gap:7px; min-height:44px; color:var(--text-muted); font-weight:500; font-size:var(--fs-small); text-decoration:none; }
.foot-link:hover { color:var(--color-brand); }
.foot-social { display:inline-flex; align-items:center; gap:20px; flex-wrap:wrap; }
.back-top { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 22px; border-radius:var(--radius-md); border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-brand); font-weight:600; font-size:var(--fs-small); text-decoration:none; }
.back-top:hover { background:var(--color-brand-tint); }

/* ===== Sample AI Opportunity Brief (scoped under .nb) =====
   The paper pages are a small picture of a real document, so all text on the paper is --fs-small. */
.nb { --paper:#FFFEFA; --amber:#9A6B1F; --amber-soft:#F6EBD3; --shadow-paper:0 1px 0 rgba(17,28,27,.04),0 18px 40px rgba(17,28,27,.12),0 4px 10px rgba(17,28,27,.06); }
.nb :focus-visible { outline:2px solid var(--teal-600); outline-offset:3px; border-radius:6px; }
.nb button { font:inherit; cursor:pointer; color:inherit; }
.nb .nb-btn { display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 20px; border-radius:999px; font-weight:600; text-decoration:none; transition:background .2s; }
.nb .nb-btn-primary { background:var(--color-brand); color:var(--text-on-brand); }
.nb .nb-btn-primary:hover { background:var(--teal-800); }
.nb .nb-btn svg { width:16px; height:16px; }
.nb .b-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px 56px; align-items:end; padding-bottom:32px; }
.nb .b-intro .page-title { margin:0; }
.nb .b-intro p { color:var(--text-muted); max-width:52ch; }
.nb .b-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.nb .b-index { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.nb .b-index button { position:relative; border:1px solid var(--border-default); background:var(--paper); border-radius:999px; min-height:32px; padding:0 12px; font-size:var(--fs-small); color:var(--text-muted); transition:all .3s; }
.nb .b-index button.done { background:var(--color-brand-soft); border-color:var(--color-brand-soft); color:var(--color-brand); }
.nb .b-index button.on { background:var(--color-brand); border-color:var(--color-brand); color:var(--text-on-brand); }
.nb .b-index button::after { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
.nb .paper { background:var(--paper); border-radius:6px; box-shadow:var(--shadow-paper); border:1px solid rgba(17,28,27,.06); color:var(--text-body); }
.nb .deck { position:relative; width:100%; max-width:600px; perspective:1800px; margin-right:36px; margin-bottom:36px; }
.nb .b-deck { margin-bottom:0; }
.nb .deck .page { position:absolute; top:0; left:0; right:0; padding:clamp(16px,2.4vw,28px); font-size:var(--fs-small); line-height:1.5; transform-origin:left center; transition:transform .75s var(--ease-out), opacity .55s, filter .5s; display:flex; flex-direction:column; cursor:pointer; overflow:hidden; }
.nb .deck .page .body { flex:1; }
.nb .lh { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:2px solid var(--color-brand); margin-bottom:14px; }
.nb .lh .mark { font-family:var(--font-wordmark); font-weight:600; color:var(--color-brand); letter-spacing:.08em; display:flex; align-items:center; gap:8px; }
.nb .lh .mark img { height:28px; width:auto; display:block; }
.nb .lh .ttl { font-family:var(--font-wordmark); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); text-align:right; }
.nb .sample { display:inline-block; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); border-radius:4px; padding:0 5px; margin-left:6px; vertical-align:middle; }
.nb .sec-no { font-family:var(--font-wordmark); font-size:var(--fs-small); letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase; }
.nb .bp h3 { font-family:var(--font-display); margin:2px 0 10px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-brand); font-weight:600; }
.nb .bp .ov-title { font-size:var(--fs-card); text-transform:none; letter-spacing:0; color:var(--text-strong); }
.nb .bp p { margin:0 0 10px; }
.nb .bp .scope { font-style:italic; color:var(--text-muted); border-bottom:1px solid var(--sand-200); padding-bottom:8px; margin-bottom:12px; }
.nb .bp .quote { font-family:var(--font-display); font-style:italic; color:var(--text-strong); border-left:2px solid var(--teal-200); padding-left:12px; }
.nb .bp ul { margin:0 0 10px; padding-left:18px; }
.nb .bp table { width:100%; border-collapse:collapse; margin-bottom:10px; }
.nb .bp th { text-align:left; letter-spacing:.04em; text-transform:uppercase; color:var(--color-brand); border-bottom:1.5px solid var(--color-brand); padding:5px 8px 5px 0; }
.nb .bp td { padding:6px 8px 6px 0; border-bottom:1px solid var(--sand-200); vertical-align:top; }
.nb .bp td.fit { width:34px; text-align:center; font-weight:700; }
.nb .bp td.step { white-space:nowrap; font-weight:700; color:var(--color-brand); width:58px; }
.nb .fit-y { color:var(--teal-600); } .nb .fit-q { color:var(--amber); } .nb .fit-n { color:var(--text-faint); }
.nb .legend { background:var(--surface-page); border:1px solid var(--sand-200); border-radius:4px; padding:8px 12px; display:grid; gap:2px; width:max-content; max-width:100%; margin-bottom:10px; }
.nb .ov { background:var(--color-brand-tint); border-radius:6px; padding:12px 14px; margin-bottom:12px; }
.nb .toc-h { margin-bottom:6px; }
.nb .toc { list-style:none; display:grid; gap:4px; }
.nb .toc li { display:flex; gap:8px; align-items:baseline; text-transform:uppercase; letter-spacing:.04em; }
.nb .toc li b { color:var(--color-brand); width:14px; }
.nb .toc li span.d { flex:1; border-bottom:1px dotted var(--teal-200); transform:translateY(-3px); }
.nb .toc li em { font-style:normal; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.nb .veil { display:grid; gap:7px; margin:4px 0 10px; -webkit-mask-image:linear-gradient(#000 20%,transparent 95%); mask-image:linear-gradient(#000 20%,transparent 95%); }
.nb .veil i { display:block; height:9px; border-radius:5px; background:var(--sand-200); }
.nb .veil i[style="width:0%"] { height:4px; background:none; }
.nb .veil-t span { display:grid; grid-template-columns:1.1fr .4fr 1.6fr; gap:12px; padding:6px 0; border-bottom:1px solid var(--sand-200); }
.nb .veil-t span i { height:8px; }
.nb .cont { display:flex; gap:8px; align-items:flex-start; color:var(--color-brand); background:var(--color-brand-tint); border:1px dashed var(--teal-200); border-radius:6px; padding:8px 10px; margin:0; }
.nb .cont svg { width:15px; height:15px; flex:0 0 15px; margin-top:3px; }
.nb .pfoot { display:flex; justify-content:space-between; gap:10px; color:var(--text-faint); border-top:1px solid var(--sand-200); padding-top:8px; margin-top:14px; }
/* Sections beside the deck: the open one is marked with a teal bar */
.nb .b-steps { display:grid; }
.nb .b-side { padding-top:46px; }
.nb .b-steps.one .b-step { display:none; border-top:0; padding:0 0 0 2px; }
.nb .b-steps.one .b-step.on { display:flex; }
.nb .b-steps.one .b-txt { gap:8px; }
.nb .b-steps.one .b-step h3 { font-size:var(--fs-section); }
.nb .b-nav { display:flex; align-items:center; gap:12px; margin-top:24px; }
.nb .b-nav[hidden] { display:none; }
.nb .b-nav button { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-brand); font-weight:600; }
.nb .b-nav button:hover:not(:disabled) { background:var(--color-brand-tint); }
.nb .b-nav button:disabled { opacity:.4; cursor:default; }
.nb .b-nav svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nb .b-pos { color:var(--text-faint); font-size:var(--fs-small); font-variant-numeric:tabular-nums; min-width:4.5em; text-align:center; }
.nb .b-step { display:flex; flex-direction:column; gap:6px; padding-block:12px 14px; border-top:1px solid var(--border-subtle); }
.nb .b-step:first-child { border-top:0; padding-top:0; }
.nb .b-txt { position:relative; display:flex; flex-direction:column; gap:4px; }
.nb .b-txt::before { content:""; position:absolute; left:-16px; top:2px; bottom:2px; width:3px; border-radius:2px; background:var(--color-brand); opacity:0; transition:opacity .4s; }
.nb .b-step.on .b-txt::before { opacity:1; }
.nb .b-step h3 { font-family:var(--font-display); font-size:var(--fs-card); font-weight:600; line-height:1.25; color:var(--text-strong); }
.nb .b-step p { color:var(--text-muted); max-width:52ch; line-height:1.55; }
.nb .b-step .paper { display:none; }
.nb .end-cta:not(.show) { display:none; }
.nb .end-cta { display:grid; gap:10px; justify-items:start; margin-top:16px; opacity:0; transform:translateY(14px); pointer-events:none; visibility:hidden; transition:opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s; }
.nb .end-cta.show { opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s; }
.nb .end-cta p { color:var(--text-muted); max-width:34ch; }
/* Phones: one deck with a caption above it */
.nb .b-phone { display:none; }
.nb .b-cap { display:grid; gap:6px; margin-bottom:16px; min-height:9.5em; }
.nb .b-cap h3 { font-family:var(--font-display); font-size:var(--fs-card); font-weight:600; color:var(--text-strong); }
.nb .b-cap p { color:var(--text-muted); }
.nb .deck-wrap { position:relative; min-width:0; }
.nb .tap-hint { position:absolute; left:50%; bottom:22%; transform:translateX(-50%); z-index:300; display:inline-flex; align-items:center; gap:10px; background:var(--text-strong); color:var(--surface-page); border:0; border-radius:999px; min-height:44px; padding:0 20px 0 14px; font-weight:600; font-size:var(--fs-small); box-shadow:0 10px 30px rgba(17,28,27,.3); white-space:nowrap; transition:opacity .4s, transform .4s var(--ease-out); }
.nb .tap-hint svg { width:22px; height:22px; animation:tap 1.6s ease-in-out infinite; }
@keyframes tap { 0%,100% { transform:translateY(0) scale(1); } 40%,60% { transform:translateY(3px) scale(.86); } }
.nb .tap-hint.gone { opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none; }
.nb .b-count { display:flex; align-items:center; gap:12px; margin-top:4px; }
.nb .progress { flex:1; height:3px; background:var(--sand-200); border-radius:3px; overflow:hidden; }
.nb .progress i { display:block; height:100%; width:0; background:var(--teal-600); transition:width .5s var(--ease-out); }
.nb .b-count .count { color:var(--text-faint); font-size:var(--fs-small); font-variant-numeric:tabular-nums; }
@media (max-width:760px) {
  .nb .b-intro { grid-template-columns:1fr; }
  .nb .deck { margin-right:20px; margin-bottom:20px; }
}
@media (max-width:620px) { .nb .b-grid { display:none; } .nb .b-phone { display:block; } }
@media (prefers-reduced-motion:reduce) { .nb *, .nb *::before, .nb *::after { transition:none !important; animation:none !important; } }

/* Reduced motion everywhere: nothing moves on its own */
@media (prefers-reduced-motion:reduce) {
  .pf-panel, .svc-detail { transition:none; animation:none; transform:none; }
}