/* ==========================================================================
   Apipunsit Collective Consulting — shared stylesheet
   Brand system per ApipunsitBrandManual.pdf + Handoff Brief §2, §7.
   Colours:  Navy #0A1E3C (winter, the ground — dominant)
             Sharp Pink #FF005C (the brave first growth — carries Bravery; pink ALWAYS before green)
             Sharp Green #06C268 (growth that holds)
             White #FFFFFF / Panel #F4F6F9
   No gold, no teal, no pollen motif. The single unbroken line is the only motif.
   Type:     Poppins (display/headings/labels) · Georgia (warm serif for body)
   ========================================================================== */

:root {
  --navy:        #0A1E3C;
  --pink:        #FF005C;
  --green:       #06C268;
  --white:       #FFFFFF;
  --panel:       #F4F6F9;

  /* Tints/working values for accessible text */
  --navy-soft:   #1B2F4E;   /* slightly lifted navy for borders on navy */
  --ink:         #0A1E3C;   /* body text on light grounds */
  --ink-muted:   #44546B;   /* secondary text on light grounds (AA on white) */
  --on-navy:     #FFFFFF;   /* body text on navy */
  --on-navy-mut: #C7D2E0;   /* secondary text on navy (AA on navy) */

  --maxw:        1120px;
  --measure:     34rem;     /* comfortable reading measure */
  --radius:      14px;
  --gap:         clamp(1rem, 2.5vw, 2rem);

  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans:  "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ----- Reset-ish ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--white);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ----- Headings: Poppins ----- */
h1, h2, h3, .kicker, .label, .btn, nav, .eyebrow {
  font-family: var(--sans);
}
h1, h2, h3 { font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 .5em; }
h2 { max-width: var(--measure); text-wrap: balance; }   /* long headings wrap to the reading measure, not full width */
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1.1em; }
strong { font-weight: 700; }

.kicker {
  font-size: .8rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin: 0 0 1rem;
}
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 .8rem;
}

/* ----- Layout ----- */
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section   { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.55; max-width: var(--measure); }
.measure { max-width: var(--measure); }

/* ----- Two-column editorial lead: heading/kicker left, prose + pull-outs right -----
   Fills the page width without lengthening the reading line. Heading rides alongside
   long content on wide screens; collapses to a single stacked column on tablet/mobile. */
.lead-2col {
  display: grid;
  grid-template-columns: minmax(12rem, 17rem) minmax(0, var(--measure));
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.lead-2col > .lead-head { margin: 0; }
.lead-2col > .lead-head .kicker { margin-bottom: .6rem; }
.lead-2col > .lead-head h2 { max-width: none; margin: 0; }
.lead-2col > .lead-body > *:first-child { margin-top: 0; }
@media (min-width: 1000px) {
  .lead-2col > .lead-head { position: sticky; top: 96px; }
}
@media (max-width: 860px) {
  .lead-2col { grid-template-columns: 1fr; gap: 1rem; }
  .lead-2col > .lead-head { position: static; }
}

/* ----- The Collective — disciplines, two-column grid (no category labels) ----- */
.disc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 2.5vw, 2rem) clamp(1.8rem, 4vw, 3rem); margin-top: 1.5rem; max-width: 58rem; }
@media (max-width: 760px) { .disc-grid { grid-template-columns: 1fr; } }
.disc h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.disc p { margin: 0; font-size: .97rem; line-height: 1.5; max-width: none; }

/* ----- The Collective — named collaborator cards (scaffold) ----- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gap); margin-top: 1.4rem; }
.person { background: var(--panel); border: 1px solid rgba(10,30,60,.1); border-radius: var(--radius); padding: 1.2rem 1.35rem; }
.person .p-disc { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 .35rem; }
.person h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.person p { margin: 0 0 .6rem; font-size: .97rem; line-height: 1.5; }
.person a { font-weight: 600; }

/* Ground variants */
.ground-navy  { background: var(--navy);  color: var(--on-navy); }
.ground-navy h1, .ground-navy h2, .ground-navy h3 { color: var(--white); }
.ground-navy .eyebrow { color: var(--on-navy-mut); }
.ground-navy p { color: var(--on-navy); }
.ground-navy .muted { color: var(--on-navy-mut); }
.ground-navy .kicker { color: var(--green); }   /* keep the green kicker on navy grounds */
.ground-panel { background: var(--panel); color: var(--ink); }
.ground-white { background: var(--white); color: var(--ink); }
.muted { color: var(--ink-muted); }

/* ----- Skip link & a11y ----- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--pink); color: var(--white); padding: .6rem 1rem;
  font-family: var(--sans); font-weight: 600; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* ----- Header / nav ----- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,30,60,.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--navy-soft);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem;
}
.brand-link { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; gap: 4px; }
.brand-wordmark { height: 28px; width: auto; display: block; }
@media (max-width: 540px) { .brand-wordmark { height: 24px; } }
.wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 1.5rem;
  color: var(--white); letter-spacing: -0.01em; line-height: 1;
}

/* ---- Official logo assets (SVG) ------------------------------------------
   Header uses the reversed (white) stacked lockup; footer uses the reversed
   wordmark. The pink-then-green i-dots are baked into the vector files. */
.brand-logo  { height: 46px; width: auto; display: block; }
.footer-logo { height: 30px; width: auto; display: block; }
@media (max-width: 540px) { .brand-logo { height: 40px; } }
.tagline-mark {
  font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: #C8D4E4; align-self: flex-start; line-height: 1;
}
.primary-nav { display: flex; align-items: center; gap: clamp(.8rem, 1.8vw, 1.6rem); }
.primary-nav a {
  font-size: .92rem; font-weight: 500; color: var(--on-navy-mut);
  text-decoration: none; padding: .3rem 0; white-space: nowrap;
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--white); }
.primary-nav a[aria-current="page"] { border-bottom: 2px solid var(--pink); }
.nav-cta {
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  background: var(--pink); color: var(--white) !important;
  padding: .55rem 1rem !important; border-radius: 999px; text-decoration: none;
}
.nav-cta:hover { background: #e60052; }

/* mobile nav */
.nav-toggle { display: none; background: none; border: 0; color: var(--white); cursor: pointer; padding: .4rem; }
.nav-toggle svg { width: 26px; height: 26px; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column;
    align-items: flex-start; gap: 0; background: var(--navy);
    border-bottom: 1px solid var(--navy-soft); padding: .5rem 1.25rem 1.25rem;
    display: none;
  }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: .7rem 0; width: 100%; border-bottom: 1px solid var(--navy-soft); }
  .nav-cta { margin-top: .8rem; }
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  text-decoration: none; border-radius: 999px; padding: .8rem 1.5rem;
  border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--pink); color: var(--white); }
.btn-primary:hover { background: #e60052; }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: var(--white); }
.btn-ghost-dark { background: transparent; color: var(--navy); border-color: rgba(10,30,60,.3); }
.btn-ghost-dark:hover { border-color: var(--navy); }
/* Green button (navy text for AA contrast on sharp green) — used for season routing */
.btn-green { background: var(--green); color: var(--navy); }
.btn-green:hover { background: #05a85a; }
.arrow::after { content: "\2192"; font-family: var(--sans); }

/* Text link with arrow (season doors etc.) */
.door-link {
  font-family: var(--sans); font-weight: 600; text-decoration: none;
  color: var(--navy); display: inline-flex; align-items: center; gap: .4rem;
}
.ground-navy .door-link { color: var(--white); }
.door-link::after { content: "\2192"; transition: transform .12s ease; }
.door-link:hover::after { transform: translateX(3px); }
.door-link.pink { color: var(--pink); }

/* Inline "specific" link — the brand's pink-accented link treatment.
   Italic, navy text with a pink underline accent (navy text keeps AA contrast
   on white; the pink is the accent). Used for the chair-card specifics. */
.ilink {
  font-style: italic; color: var(--navy); text-decoration: underline;
  text-decoration-color: var(--pink); text-decoration-thickness: 2px;
  text-underline-offset: 2px; font-weight: 600;
}
.ilink:hover { color: var(--pink); }
.ground-navy .ilink { color: var(--white); }
.ground-navy .ilink:hover { color: var(--pink); }

/* Inline season tag — mirrors the green page kicker so a cross-referenced season is recognized at a glance.
   Green reads accessibly on navy grounds; use it on navy (e.g., hero notes), not on white. */
.season-tag {
  font-family: var(--sans); font-weight: 600; font-size: .8em; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green); text-decoration: none; white-space: nowrap;
}
.season-tag:hover { text-decoration: underline; }

/* ----- Cards / grids ----- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid #E4E9F0; border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem); height: 100%;
}
.ground-panel .card { background: var(--white); }
.ground-navy .card {
  background: var(--navy-soft); border-color: rgba(255,255,255,.12); color: var(--on-navy);
}
.ground-navy .card h3 { color: var(--white); }
.card h3 { margin-top: 0; }
.card .signature { font-family: var(--serif); font-style: italic; color: var(--ink-muted); }
.ground-navy .card .signature { color: var(--on-navy-mut); }

/* Season cards (hub) — green hairline = "growth that holds" (non-text accent, stays accessible) */
.grid-seasons { gap: clamp(1.6rem, 3vw, 2.5rem); }   /* more air between cards */
.season-card {
  display: flex; flex-direction: column;
  gap: .9rem; padding: clamp(1.6rem, 2.6vw, 2.2rem);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease;
}
.season-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10,30,60,.10); }
.season-card h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0; }
.season-card p { margin: 0; }
.season-card .eyebrow { margin: 0; }
.season-go { margin-top: auto; font-family: var(--sans); font-weight: 700; color: var(--navy); font-size: 1.6rem; line-height: 1; align-self: flex-start; transition: transform .14s ease; }
.season-card:hover .season-go { transform: translateX(4px); }
/* Navy season tag holding the green name (green on navy = accessible) — matches the season-page kicker */
.season-chip {
  display: inline-block; align-self: flex-start;
  background: var(--navy); color: var(--green);
  font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .42rem .72rem; border-radius: 6px;
}
.recognition {
  font-family: var(--serif); font-style: italic; color: var(--pink); margin: 0;
  font-size: 1.2rem; font-weight: 400; line-height: 1.4;
}
.season-credo { font-family: var(--serif); font-style: italic; color: var(--navy); margin: .2rem 0 0; }

/* Chair-router "your seasons" cards — recognize the situation, route to the full season (green = into the work) */
.route-grid { gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.route-card {
  display: flex; flex-direction: column; gap: .6rem;
  border-left: 4px solid var(--green);
  box-shadow: 0 2px 12px rgba(10,30,60,.05);
  transition: transform .14s ease, box-shadow .18s ease;
}
.route-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10,30,60,.12); }
.route-card h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.route-card p { margin: 0; color: var(--ink); font-size: 1.12rem; line-height: 1.55; }
.route-q { font-family: var(--serif); font-style: italic; color: var(--navy); font-size: 1.05rem; line-height: 1.4; border-left: 3px solid var(--pink); padding-left: .8rem; margin: 0; }
.route-card .btn { margin-top: auto; align-self: flex-start; }
.route-card .btn::after { content: "\00a0\2192"; font-family: var(--sans); font-weight: 700; }

/* OPTION B — whole card is the link (no button). Navy tile so the green season heading is accessible. */
.route-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.4rem; }
@media (max-width: 680px) { .route-tiles { grid-template-columns: 1fr; } }
.route-tile {
  display: flex; flex-direction: column; gap: .5rem; position: relative;
  background: var(--navy); color: var(--on-navy); text-decoration: none;
  border: 1px solid var(--navy-soft); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem); padding-right: 2.8rem;
  transition: transform .14s ease, box-shadow .18s ease;
}
.route-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(10,30,60,.22); }
.route-tile .r-season { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.route-tile .r-phrase { font-family: var(--sans); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: #fff; line-height: 1.15; }
.route-tile .r-q { font-family: var(--serif); font-style: italic; color: var(--on-navy-mut); font-size: 1.05rem; line-height: 1.4; }
.route-tile .r-arrow { position: absolute; top: 1.3rem; right: 1.3rem; color: var(--green); font-family: var(--sans); font-weight: 700; transition: transform .14s ease; }
.route-tile:hover .r-arrow { transform: translateX(3px); }

/* Chair entry cards — panel fill so they read as doors (navy headings kept for contrast) */
.chair-card {
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--panel); border: 1px solid #DCE3EC;
  box-shadow: 0 2px 10px rgba(10,30,60,.05);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.chair-card:hover {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,30,60,.10); border-color: #C4D0DF;
}
.chair-card h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.chair-card .btn { align-self: flex-start; margin-top: auto; }
.chair-card .door-link { margin-top: auto; align-self: flex-start; }
.chair-card .door-link { margin-top: auto; }   /* routing line pinned to the bottom for even cards */

/* ----- Pull quote / statement ----- */
.statement {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.35; max-width: 32ch;
  text-wrap: balance;
}
.statement .pink { color: var(--pink); font-style: normal; font-weight: inherit; }

/* Statement band — a full-width navy moment for a thesis line (lead-in + big statement) */
.statement-band { text-align: center; max-width: 52rem; margin-inline: auto; }
.statement-band .band-lead {
  font-family: var(--serif); font-style: italic; color: var(--on-navy-mut);
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.5; margin: 0 auto 1.3rem; max-width: 48ch;
  text-wrap: balance;
}
.statement-band .band-statement {
  font-family: var(--serif); font-style: italic; color: #fff;
  font-size: clamp(1.6rem, 3.8vw, 2.4rem); line-height: 1.28; margin: 0 auto; max-width: 22ch;
  text-wrap: balance;
}
.statement-band .band-statement .pink { color: var(--pink); font-style: normal; }

/* ----- Quote placeholder (no fabricated testimonials) ----- */
.quote-slot {
  border: 1px dashed rgba(10,30,60,.35); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; background: rgba(10,30,60,.02);
  font-family: var(--sans); font-size: .9rem; color: var(--ink-muted);
  display: flex; gap: .6rem; align-items: flex-start;
}
.ground-navy .quote-slot { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); color: var(--on-navy-mut); }
.quote-slot::before { content: "“"; font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--pink); }
.quote-slot em { font-style: italic; }

/* Published testimonial (real, cleared, anonymized — pink voice accent) */
.quote { margin: 1.6rem 0 0; max-width: var(--measure); }
.quote blockquote {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 1.2rem; line-height: 1.5; color: var(--ink);
  border-left: 3px solid var(--pink); padding-left: 1.1rem;
}
.quote figcaption {
  font-family: var(--sans); font-size: .85rem; color: var(--ink-muted);
  margin-top: .6rem; padding-left: 1.1rem;
}
.ground-navy .quote blockquote { color: var(--white); }
.ground-navy .quote figcaption { color: var(--on-navy-mut); }

/* Build-note placeholder (pending items, e.g., relationship line) */
.build-note {
  border-left: 4px solid var(--pink); background: var(--panel);
  padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--sans); font-size: .92rem; color: var(--ink-muted);
}
.build-note strong { color: var(--navy); }

/* ----- Season page bits ----- */
.season-sub {
  font-family: var(--serif); font-style: italic; color: var(--on-navy-mut);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.4; font-weight: 400;
  margin: 0 0 1.3rem; max-width: var(--measure);
}
/* Spotlight a key hero line — pink accent rule + weight, same size as the lede (keeps the opening uniform) */
.hero-statement { border-left: 3px solid var(--pink); padding-left: 1.1rem; font-weight: 600; }

/* "What you leave with" — outcomes as green-checked items (green = growth that holds) */
.leave-grid {
  list-style: none; margin: 1.4rem 0 1.3rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.8rem; max-width: 48rem;
}
@media (max-width: 680px) { .leave-grid { grid-template-columns: 1fr; } }
.leave-item { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.12rem; line-height: 1.45; }
.leave-item .chk { flex: 0 0 auto; width: 1.55rem; height: 1.55rem; color: var(--green); margin-top: .12rem; }
.leave-closing { font-family: var(--serif); font-style: italic; color: var(--navy); font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin: 0 0 .7rem; max-width: var(--measure); }
/* coda that anchors the closing line + credo after the checklist */
.leave-summary { border-top: 2px solid var(--green); margin-top: 1.6rem; padding-top: 1.4rem; max-width: var(--measure); }
.season-credo { font-family: var(--serif); font-style: italic; color: var(--navy); margin: .2rem 0 0; }
.cross-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
/* Either/or outcome pair (e.g., the two clear answers a combination engagement ends in) */
.answer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.3rem 0; max-width: 48rem; }
@media (max-width: 680px) { .answer-pair { grid-template-columns: 1fr; } }
.answer-pair .answer {
  border: 1px solid #DCE3EC; border-left: 3px solid var(--green); border-radius: 10px;
  padding: 1rem 1.2rem; background: var(--white);
  font-family: var(--serif); font-style: italic; color: var(--navy); font-size: 1.1rem; line-height: 1.4;
}
.answer-pair .answer strong { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: .35rem; }
/* CTA + supporting note sitting beside the button */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem; margin-top: .4rem; }
.cta-note { font-family: var(--sans); font-size: .92rem; color: var(--ink-muted); max-width: 22rem; }
/* Option 2: centred "who you'd be working with" with a centred pull-quote */
.who-block { max-width: 44rem; margin-inline: auto; text-align: center; }
.who-block .cta-note { margin: .85rem auto 0; }
.quote-center { margin: 1.9rem auto; max-width: 40rem; }
.quote-center blockquote { border-left: 0; padding-left: 0; text-align: center; font-size: clamp(1.3rem, 2.6vw, 1.65rem); }
.quote-center blockquote::before { content: "\201C"; display: block; color: var(--pink); font-family: var(--serif); font-size: 2.6rem; line-height: .5; margin-bottom: .45rem; }
.quote-center figcaption { padding-left: 0; text-align: center; }

/* Recognition prompts — the reader's own questions (pink = the recognising voice) */
.prompt-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .85rem; max-width: var(--measure); }
.prompt-list li {
  font-family: var(--serif); font-style: italic; color: var(--navy);
  font-size: 1.2rem; line-height: 1.45; border-left: 3px solid var(--pink); padding-left: 1rem;
}

/* "What the work is" — the three hard parts as numbered steps (navy = process) */
.work-steps {
  list-style: none; counter-reset: step; padding: 0; margin: 1.4rem 0 0;
  display: grid; gap: 1.1rem; max-width: var(--measure);
}
.work-steps li { display: flex; gap: .85rem; align-items: flex-start; font-size: 1.08rem; line-height: 1.5; }
.work-steps li::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--navy); color: #fff; font-family: var(--sans); font-weight: 700;
  font-size: .95rem; display: inline-flex; align-items: center; justify-content: center;
}

/* ----- Evidence underneath callout ----- */
/* Evidence callout — navy panel so the large GREEN header is crisp and accessible
   (green on white fails contrast; green on navy clears it ~7:1). */
.evidence {
  background: var(--navy); color: var(--on-navy);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
  margin-top: 1.8rem; max-width: var(--measure);
}
.evidence .evidence-label {
  font-family: var(--sans); font-weight: 700; color: var(--green);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.01em; line-height: 1.15;
  display: block; margin-bottom: .55rem;
}
.evidence p { color: var(--on-navy); font-size: 1.1rem; line-height: 1.6; margin: 0; }

/* ----- FAQ ----- */
.faq details {
  border-bottom: 1px solid #E4E9F0; padding: .35rem 0;
}
.faq summary {
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  cursor: pointer; padding: .9rem 0; list-style: none; display: flex;
  justify-content: space-between; gap: 1rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--pink); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding: 0 0 1rem; max-width: var(--measure); }

/* ----- Related seasons strip ----- */
.related {
  font-family: var(--sans); font-size: .95rem; color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
}
.related a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.related a:hover { border-color: var(--pink); }

/* ----- Forms ----- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--sans); font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--navy); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--serif); font-size: 1rem; padding: .7rem .85rem;
  border: 1.5px solid #C9D3E0; border-radius: 10px; background: var(--white); color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-family: var(--sans); font-weight: 400; color: var(--ink-muted); font-size: .82rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--white); border: 1px solid #E4E9F0; border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.4rem); max-width: 42rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-confirm { background: var(--panel); border-left: 4px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; margin-top: 1.2rem; font-family: var(--serif); }

/* ----- The single unbroken line motif (one per surface, low + to the right) ----- */
/* Official line-motif art (one per surface, low + to the right). */
.line-motif {
  position: absolute; right: 0; bottom: 0; width: min(680px, 72%);
  height: auto; pointer-events: none; opacity: .95;
}
.has-motif { position: relative; overflow: hidden; }

/* ----- Footer ----- */
.site-footer { background: var(--navy); color: var(--on-navy-mut); padding: clamp(2.5rem,5vw,3.5rem) 0 2rem; }
.site-footer a { color: var(--on-navy-mut); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.footer-grid h4 { font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin: 0 0 .8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5rem; font-family: var(--sans); font-size: .95rem; }
.footer-word { font-family: var(--sans); font-weight: 700; font-size: 1.4rem; color: var(--white); }
.footer-values { font-family: var(--sans); font-size: .85rem; letter-spacing: .04em; }
.footer-values .pink { color: var(--pink); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--navy-soft);
  font-family: var(--sans); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
}

/* ----- Founder page bits ----- */
.portrait { width: 100%; border-radius: var(--radius); display: block; }
.portrait-ph {
  aspect-ratio: 4 / 5; background: var(--navy-soft);
  border: 1px dashed rgba(255,255,255,.35); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--on-navy-mut); font-family: var(--sans); font-size: .9rem; line-height: 1.5; padding: 1.5rem;
}
.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.3rem 0 0; max-width: 46rem; }
@media (max-width: 600px) { .awards { grid-template-columns: 1fr; } }
.award { background: var(--panel); border-left: 3px solid var(--pink); border-radius: 0 10px 10px 0; padding: .85rem 1.1rem; }
.award .a-name { font-family: var(--sans); font-weight: 600; color: var(--navy); font-size: 1rem; line-height: 1.3; display: block; }
.award .a-meta { font-family: var(--sans); font-size: .82rem; color: var(--ink-muted); display: block; margin-top: .2rem; }
.pub-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; max-width: var(--measure); }
.pub { font-family: var(--sans); font-size: .9rem; color: var(--navy); background: var(--panel); border: 1px solid #DCE3EC; border-radius: 999px; padding: .42rem .95rem; }
/* The three chairs — small navy tiles (green role on navy = accessible), the "full circle" made visible */
.chairs-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.4rem 0; max-width: 46rem; }
@media (max-width: 620px) { .chairs-3 { grid-template-columns: 1fr; } }
.chair3 { background: var(--navy); border-radius: 10px; padding: 1rem 1.15rem; }
.chair3 .c-role { font-family: var(--sans); font-weight: 700; color: var(--green); display: block; font-size: 1rem; line-height: 1.2; }
.chair3 .c-desc { font-family: var(--sans); font-size: .85rem; color: var(--on-navy-mut); display: block; margin-top: .3rem; }
.press-line { font-family: var(--serif); font-style: italic; color: var(--ink-muted); max-width: var(--measure); margin: 1.4rem auto 0; text-align: center; }
.press-line cite { font-style: normal; font-family: var(--sans); font-size: .85rem; }

/* ----- The name & the land: pronunciation guide + endonyms ----- */
.endonym { font-family: system-ui, "Segoe UI", "Noto Sans", Arial, sans-serif; }
.pronounce { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: 1rem; max-width: var(--measure); }
.pronounce li { line-height: 1.5; padding-left: 1rem; border-left: 2px solid #DCE3EC; }
.pronounce .word { font-family: var(--sans); font-weight: 700; color: var(--navy); }
.pronounce .say { color: var(--ink-muted); font-style: italic; }
/* Two homelands — east/west split (navy ground; green labels are accessible) */
.homelands { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 1.5rem; }
@media (max-width: 760px) { .homelands { grid-template-columns: 1fr; } }
.homeland { border-top: 2px solid var(--green); padding-top: 1rem; }
.hl-label { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: .3rem; }
.hl-place { font-family: var(--sans); font-weight: 700; color: #fff; font-size: 1.15rem; display: block; margin-bottom: .7rem; }

/* ----- Hero ----- */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 2; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-bottom: 1.5rem; }
.hero-tagline { font-family: var(--serif); font-style: italic; color: var(--on-navy-mut); font-size: 1.15rem; margin-bottom: 1.8rem; }

/* utility */
.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.contact-line { font-family: var(--sans); font-weight: 500; }
.divider-dots { display: inline-flex; gap: .35rem; vertical-align: middle; }
.divider-dots i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.divider-dots .p { background: var(--pink); }   /* pink first */
.divider-dots .g { background: var(--green); }   /* green second */