/* =========================================================
   Amy Garside Media: the inner pages.
   /schools/ (+ microsites, what parents see), /start, /testimonials,
   /ai/, /card/ and the thank you page. The home page has its own sheet
   (stage.css); this one shares its tokens and conventions.

   Written as one sheet on 28 Sept 2026, replacing home.css and
   schools.css, which had grown by appending correction blocks.
   Rules for this file (see DESIGN.md):
   - each component is defined once, at its source; no fix blocks;
   - no !important except [hidden] and reduced motion;
   - nothing is hidden waiting for a scroll reveal;
   - nothing animates width, height, padding or margin;
   - no blur or blend layers, no glows, no gradient text.

   A note on class names kept from the old markup: .band-dark is now a
   white sheet band (the page head is paper), and the footer is the only
   graphite ground.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --paper:     #F3F4F1;
  --sheet:     #FFFFFF;
  --graphite:  #1F2125;
  --lead-soft: #5A5E66;
  --pencil:    #A7ABB2;
  --rule:      #DCDEDA;
  --gel:       #D6006F;
  --gel-deep:  #A8005A;
  --gel-glow:  #FF6FB5;

  /* hairlines inside a white band, and on the graphite footer */
  --hairline:           rgba(31, 33, 37, 0.16);
  --on-dark:            #F3F4F1;
  --on-dark-soft:       #C9CCD1;
  --hairline-dark-soft: rgba(243, 244, 241, 0.07);

  --display: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --sans: "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* type sizes for the two headline levels */
  --fs-h1: clamp(2.3rem, 1.6rem + 2.2vw, 3.5rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem);

  /* spacing scale (as stage.css); components use these where the value
     is the same, and keep their own measure where the page depends on it */
  --s-2xs: 0.375rem;
  --s-xs:  0.75rem;
  --s-sm:  1rem;
  --s-md:  1.5rem;
  --s-lg:  clamp(2rem, 1.7rem + 1vw, 2.5rem);
  --s-xl:  clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --section-y: clamp(3.5rem, 2.6rem + 3vw, 5.5rem);
  /* one indent step for broken text (schools asides, what you get, the questions) */
  --tab: clamp(2.75rem, 12vw, 7rem);

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 4px;
  --radius-lg: 10px;
  --tap: 2.75rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  font-synthesis: none;
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--gel); color: #fff; }
:focus-visible { outline: 2px solid var(--gel-deep); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.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 {
  position: absolute; left: 1rem; top: -3rem; z-index: 300;
  background: var(--graphite); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Type ---------- */
/* Headlines are the serif, one weight. Subheads (h3, h4) are Rethink Sans
   650. Everything else is Rethink Sans. */
h1, h2, h3, h4 { margin: 0; color: var(--graphite); }
h1, h2, h3 {
  font-family: var(--display); font-weight: 400; font-optical-sizing: auto;
  line-height: 1.08; letter-spacing: -0.01em;
}
h1, h2, .section-title { letter-spacing: -0.008em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.06; max-width: 22ch; }
h2, .section-title { font-size: var(--fs-h2); line-height: 1.1; max-width: 28ch; }
.page-head .section-title { font-size: var(--fs-h1); line-height: 1.06; max-width: 22ch; }
.page-head-schools .section-title { max-width: 24ch; }
h3, h4 { font-family: var(--sans); font-weight: 650; letter-spacing: -0.012em; text-wrap: pretty; }
h4 { margin-block: 1.33em; }

/* Emphasis inside a heading carries no colour or italic: one coloured
   word per headline reads as a generated page (Amy, 28 Sept 2026). Gel
   is kept for what is really lit: buttons, the stage, the lit question. */
h1 em, h2 em, h3 em {
  font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit;
  color: inherit;
}
h3 em { font-weight: 400; }

/* The small label over a page head: a word or two in lead soft. Used
   only where it tells the visitor something the heading does not. */
.kicker {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1.2rem;
  font-size: 0.95rem; font-weight: 600; color: var(--lead-soft);
}
.kicker .crumb { color: var(--gel-deep); text-decoration: none; }
.kicker .crumb::after { content: "/"; margin-left: 0.7rem; opacity: 0.6; }
.kicker .crumb:hover { text-decoration: underline; text-underline-offset: 3px; }

.section-intro {
  margin: 1.4rem 0 0; max-width: 46rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.6;
  color: var(--lead-soft); text-wrap: pretty;
}

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-read { max-width: calc(40rem + 2 * var(--gutter)); }
/* reading pages on wide screens: the full page width, each section's
   heading in a left column beside its text at a comfortable line length,
   so a long article never sits as a narrow strip in empty space */
@media (min-width: 1000px) {
  .wrap-read { max-width: var(--wrap); }
  .wrap-read .article-body, .wrap-read .prose {
    max-width: none; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start;
  }
  .wrap-read .article-body > *, .wrap-read .prose > * { grid-column: 2; max-width: 46rem; }
  .wrap-read .article-body > .read-sec, .wrap-read .prose > .read-sec {
    grid-column: 1 / -1; max-width: none;
    display: grid; grid-template-columns: subgrid; align-items: start;
    padding-top: 2.4rem; margin-top: 2.4rem; border-top: 1px solid var(--rule);
  }
  .read-sec > h2 { grid-column: 1; grid-row: 1 / span 40; margin: 0; position: sticky; top: 6.5rem; }
  .read-sec > :not(h2) { grid-column: 2; max-width: 46rem; }
  .read-sec > h2 + * { margin-top: 0; }
  /* the title on the left, the intro and byline beside it on the right */
  .page-head .wrap-read { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); align-items: end; }
  .page-head .wrap-read > .kicker { grid-column: 1; }
  .page-head .wrap-read > .section-title { grid-column: 1; }
  .page-head .wrap-read > :not(.kicker):not(.section-title) { grid-column: 2; max-width: 46rem; }
  .page-head .wrap-read > .section-intro { grid-row: 1 / span 2; align-self: end; margin-top: 0; }
  .page-head .wrap-read > .article-byline { grid-row: 3; }
}


.section { padding-block: var(--section-y); }

/* A white band. The page head is the same band on paper. */
.band-dark { background: var(--sheet); color: var(--lead-soft); }
.band-dark :focus-visible { outline-color: var(--graphite); }
.page-head { padding-top: clamp(7rem, 15vh, 9.5rem); }
.page-head.band-dark { background: var(--paper); }
.page-head .section-intro + .section-intro { margin-top: var(--s-sm); }

/* A section head (kicker, title, intro) */
.section > .wrap > header { margin-bottom: var(--s-lg); }

@media (min-width: 1000px) {
  /* the title sits beside its intro, never alone over an empty half */
  .section > .wrap > header:has(> .section-title + .section-intro:last-child) {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem); align-items: end;
  }
  .section > .wrap > header:has(> .section-title + .section-intro:last-child) > .kicker { grid-column: 1; grid-row: 1; }
  .section > .wrap > header:has(> .section-title + .section-intro:last-child) > .section-title { grid-column: 1; grid-row: 2; }
  .section > .wrap > header:has(> .section-title + .section-intro:last-child) > .section-intro {
    grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: end;
  }
  /* the school sites intro starts level with its heading */
  .school-sites > .wrap > header:has(> .section-title + .section-intro:last-child) { align-items: start; }
  .school-sites > .wrap > header:has(> .section-title + .section-intro:last-child) > .section-intro { grid-row: 2; align-self: start; }

  /* page head: kicker and headline on the left, the words on the right */
  .wrap:has(> .head-lead) {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start;
  }
  .wrap:has(> .head-lead):not(.has-twenty) > :not(.head-lead):not(.head-body) { grid-column: 1 / -1; }
  .head-body { padding-top: 2.2rem; }
  .head-body > :first-child { margin-top: 0; }
  .wrap > .head-lead .section-title { max-width: 18ch; }
}

/* Two columns: words beside a list or a portrait */
.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.split-copy p { margin: 0 0 1.1rem; max-width: 40rem; }
.split-copy p:last-child { margin-bottom: 0; }
.split-copy .lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--graphite); }

/* ---------- Links and buttons ---------- */
.text-link {
  color: var(--gel-deep);
  text-decoration: underline; text-decoration-color: rgba(31, 33, 37, 0.5); text-underline-offset: 3px;
  transition: color 0.2s;
}
.text-link:hover { text-decoration-color: var(--gel-deep); }
.split-copy .text-link { font-weight: 600; }
.split-copy p > a.text-link, p > a.text-link:only-child { display: inline-flex; align-items: center; min-height: var(--tap); }

/* a quiet underlined link under a head */
.hero-link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0.3rem;
  font-size: 0.95rem; color: var(--lead-soft);
  text-decoration: underline; text-decoration-color: rgba(214, 0, 111, 0.5); text-underline-offset: 4px;
  transition: color 0.25s var(--ease);
}
.hero-link:hover { color: var(--graphite); }

/* a bold "View the site" link with an arrow */
.work-link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0.25rem;
  font-size: 0.92rem; font-weight: 600; color: var(--gel-deep); text-decoration: none;
}
.work-link:hover { color: var(--gel); }
.work-link span[aria-hidden], .text-link span[aria-hidden], .footer-top span[aria-hidden], .hero-link span[aria-hidden] { margin-left: 0.35em; }

.wa-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--tap); }
.wa-icon { flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gel); border-color: var(--gel); color: #fff; }
.btn-primary:hover { background: var(--gel-deep); border-color: var(--gel-deep); transform: translateY(-2px); }
.btn-ghost { background: none; color: var(--graphite); border-color: var(--rule); }
.btn-ghost:hover { background: var(--gel); border-color: var(--gel); color: #fff; transform: translateY(-2px); }
.btn-ghost:active { background: var(--gel); border-color: var(--gel); color: #fff; }
.btn-small { padding: 0.6rem 1.15rem; font-size: 0.88rem; }
.btn-wa .wa-icon { width: 1.1rem; height: 1.1rem; }

/* ---------- Header ---------- */
/* Fixed, one height scrolled or not (4.5rem, as stage.css), solid paper, no blur. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--rule);
}
.site-header :focus-visible { outline-color: var(--gel); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap);
  font-family: var(--display); font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.55rem); letter-spacing: -0.01em;
  text-decoration: none;
}
.brand-logo { display: block; height: 2.1rem; width: auto; }
.header-cta { display: none; }
.nav-toggle { display: none; min-width: var(--tap); min-height: var(--tap); color: var(--graphite); }

.nav-menu {
  display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.nav-menu a:not(.btn) {
  font-size: 0.92rem; font-weight: 500; color: var(--lead-soft); text-decoration: none;
  transition: color 0.25s var(--ease);
}
.nav-menu a:not(.btn):hover,
.nav-menu a[aria-current="page"],
.nav-menu a[aria-current="true"] { color: var(--graphite); }

/* Dropdowns (Work, Schools): hover opens them on a desktop; the chevron
   button (.nav-item.open, set by home.js) opens them for keyboard and touch */
.nav-item { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: var(--tap); min-width: var(--tap); min-height: var(--tap);
  margin-block: calc(-1 * var(--s-2xs)); padding: 0;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--lead-soft); cursor: pointer;
  transition: color 0.25s var(--ease);
}
.sub-toggle svg { transition: transform 0.25s var(--ease); }
.nav-item.open .sub-toggle { color: var(--graphite); }
.nav-item.open .sub-toggle svg { transform: rotate(180deg); }
.sub {
  position: absolute; top: calc(100% + 0.9rem); left: -1.1rem; z-index: 130;
  min-width: 17.5rem; margin: 0; padding: 0.45rem; list-style: none;
  background: var(--sheet); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 28px 56px -22px rgba(0, 0, 0, 0.95);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; } /* hover bridge */
.nav-item.open > .sub { opacity: 1; visibility: visible; transform: none; }
.nav-menu .sub a {
  display: grid; gap: 0.1rem; padding: 0.65rem 0.85rem; border-radius: 6px;
  transition: background-color 0.2s var(--ease);
}
.nav-menu .sub a:hover { background: rgba(214, 0, 111, 0.09); }
.sub-name { font-size: 0.92rem; font-weight: 500; color: var(--graphite); }
.sub-desc { font-size: 0.78rem; line-height: 1.4; color: var(--lead-soft); }
.nav-menu .sub a:hover .sub-name, .sub a[aria-current="page"] .sub-name { color: var(--gel-deep); }

@media (hover: hover) and (min-width: 881px) {
  .nav-item:hover > .sub { opacity: 1; visibility: visible; transform: none; }
  .nav-item:hover .sub-toggle { color: var(--graphite); }
  .nav-item:hover .sub-toggle svg { transform: rotate(180deg); }
}
@media (min-width: 881px) {
  /* every top level link the same box and a full tap height */
  .nav-menu > li > a:not(.btn) {
    display: inline-flex; align-items: center; min-height: var(--tap);
    font-size: 0.95rem; color: var(--graphite);
  }
}

/* Phones and tablets: a menu button and a full screen menu */
@media (max-width: 880px) {
  .header-inner { height: 4rem; gap: 0; }
  .site-header .brand-logo { height: 1.5rem; }
  .header-cta {
    display: inline-flex; margin-left: auto; min-height: var(--tap);
    padding: 0.45rem 0.75rem; font-size: 0.8rem; white-space: nowrap;
  }
  .nav-toggle {
    position: relative; z-index: 120;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9rem; height: 2.9rem; margin-left: 0.5rem;
    background: none; border: 1px solid var(--graphite); border-radius: var(--radius);
    color: var(--graphite); cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] svg { display: none; }
  .nav-toggle[aria-expanded="true"]::before { content: "✕"; font-size: 1.05rem; line-height: 1; color: var(--graphite); }

  .nav {
    position: fixed; inset: 0; z-index: 110;
    display: flex; flex-direction: column; align-items: center; justify-items: center;
    overflow-y: auto; padding: 5rem var(--gutter) 3rem;
    background: var(--paper);
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  }
  .nav.open { opacity: 1; visibility: visible; }
  .nav-menu { flex-direction: column; gap: var(--s-md); margin: auto; text-align: center; }
  .nav-menu a:not(.btn) { font-family: var(--display); font-size: 1.3rem; color: var(--graphite); }
  .nav-menu > li > a:not(.btn) { display: inline-block; padding-block: 0.45rem; }
  .nav-item { flex-direction: column; gap: var(--s-xs); }
  .sub-toggle { display: none; }
  .sub {
    position: static; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    min-width: 0; padding: 0; background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: inherit; transform: none;
  }
  .sub::before { content: none; }
  .nav-menu .sub a { display: block; padding: 0.35rem 0.6rem; }
  .sub-name { font-family: var(--sans); font-size: 0.98rem; color: var(--lead-soft); }
  .sub-desc { display: none; }
}
@media (max-width: 880px) and (max-height: 720px) {
  .nav-menu { gap: 1.05rem; }
  .nav-item { gap: 0.4rem; }
  .nav-menu .sub a { padding-block: 0.25rem; }
}
@media (max-width: 400px) {
  .site-header .brand-logo { height: 1.25rem; }
  .header-cta { font-size: 0.74rem; padding: 0.4rem 0.6rem; }
}

/* ---------- Footer (graphite, the one dark ground) ---------- */
.site-footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--paper); color: var(--lead-soft);
  border-top: 1px solid var(--rule);
}
.site-footer :focus-visible { outline-color: var(--gel); }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer a {
  color: var(--graphite); text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 2rem; padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0; line-height: 1; }
.footer-logo { height: 2.4rem; }
.footer-line { margin: 1.1rem 0 0; max-width: 24rem; font-size: 0.92rem; }
.footer-social { display: flex; gap: 1.6rem; }
.footer-social a {
  justify-content: center; min-width: var(--tap);
  font-size: 0.92rem; font-weight: 500; color: var(--graphite);
}
.footer-social a:hover, .footer-top:hover, .footer-base a:hover { color: var(--gel); text-decoration-color: currentColor; }
.footer-base {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.5rem;
  padding-block: 1.4rem 1.8rem; font-size: 0.85rem;
}
.footer-base::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; background: var(--rule);
}
.footer-base p { margin: 0 auto 0 0; }
@media (max-width: 880px) {
  .site-footer { padding-bottom: 5.5rem; }
}

/* =========================================================
   Components
   ========================================================= */

/* ---------- Page head extras (schools pages) ---------- */
.page-head-frame {
  margin: 1.4rem 0 0; max-width: 34rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.4; color: var(--graphite);
}
.head-script { margin: var(--s-md) 0 0; max-width: 36rem; }
.head-script-lead {
  margin: 0; max-width: 20ch;
  font-family: var(--display); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; color: var(--graphite); text-wrap: balance;
}
.head-script-aside {
  margin: var(--s-sm) 0 0; max-width: 30rem;
  padding-left: var(--s-sm); border-left: 1px solid var(--pencil);
  font-size: 0.98rem; line-height: 1.5; color: var(--lead-soft); text-wrap: pretty;
}
.page-head-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.head-body .page-head-actions {
  display: grid; grid-template-columns: auto auto 1fr; place-items: center start; gap: 0.9rem 1.5rem;
}
.head-body .page-head-actions .btn { grid-column: 1 / -1; }

/* ---------- Ledger rows (hairline rows with a cue arrow) ---------- */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; gap: clamp(1rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem); border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.ledger-row:hover { background: rgba(214, 0, 111, 0.06); }
.ledger-name { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); transition: color 0.3s var(--ease); }
.ledger-row:hover .ledger-name { color: var(--gel-deep); }
.ledger-desc { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--lead-soft); text-wrap: pretty; }
.ledger-cue {
  font-family: var(--display); font-size: 1.5rem; color: var(--gel-deep);
  transition: transform 0.3s var(--ease);
}
.ledger-row:hover .ledger-cue { transform: translateX(6px); }
@media (max-width: 880px) {
  .ledger-row { grid-template-columns: 1fr auto; }
  .ledger-desc { grid-column: 1 / -1; margin-top: 0.2rem; }
}

/* ---------- Work cards (the school sites shelf) ---------- */
.work-card {
  position: relative; overflow: hidden;
  background: var(--sheet); border: 1px solid var(--graphite); border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px -18px rgba(31, 33, 37, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.work-card:hover {
  transform: translateY(-4px); border-color: var(--gel-deep);
  box-shadow: 0 0 0 1px var(--gel-deep), 0 26px 54px -28px rgba(31, 33, 37, 0.45);
}
.work-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--graphite); }
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.work-card:hover .work-media img { transform: scale(1.04); }
.work-body { padding: 1.3rem clamp(1.1rem, 2.5vw, 1.7rem) 1.5rem; }
.work-tag {
  display: inline-block; margin: 0 0 0.5rem;
  font-size: 0.85rem; font-weight: 600; color: var(--lead-soft);
}
.work-name { font-size: 1.4rem; margin-bottom: 0.35rem; }
.work-note { margin: 0 0 0.9rem; font-size: 0.94rem; color: var(--lead-soft); text-wrap: pretty; }
.work-card .work-link { color: var(--gel-deep); }
.work-card .work-link:hover { color: var(--graphite); }

.school-sites { scroll-margin-top: 1.5rem; }
.sites-shelf {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem);
}
.sites-shelf > li { display: flex; }
.sites-note { margin: var(--s-sm) 0 0; font-size: 0.9rem; color: var(--lead-soft); }
.sites-shelf .work-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: 100%; }
.sites-shelf .work-media { aspect-ratio: auto; height: 100%; min-height: 13rem; }
.sites-shelf .work-media img { object-position: left center; }
.sites-shelf .work-media img[src*="theatre"] { object-position: center; }
.sites-shelf .work-body { align-self: center; padding: 1.2rem clamp(1.1rem, 2vw, 1.5rem); }
.sites-shelf .work-name { font-size: 1.35rem; }
.sites-shelf .work-note { font-size: 0.92rem; }
@media (max-width: 980px) {
  .sites-shelf { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sites-shelf .work-card { grid-template-columns: 1fr; }
  .sites-shelf .work-media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
}

/* ---------- Flipbooks: a card group that holds still on a desktop ---------- */
/* flipbook.js sets .is-pinned, --pin-h and --pin-top only when the group fits */
.flip-track.is-pinned { height: calc(var(--pin-h, 0px) + 70vh); }
.flip-track.is-pinned .flip-sticky { position: sticky; top: var(--pin-top, 6rem); }

/* ---------- Lists: hairline rules ---------- */
.rule-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rule-list li {
  position: relative; padding: 0.85rem 0 0.85rem 1.4rem;
  border-bottom: 1px solid var(--rule); color: var(--graphite); font-size: 0.98rem;
}
.rule-list li::before { content: "·"; position: absolute; left: 0.2rem; color: var(--gel-deep); font-weight: 700; }
.band-dark .rule-list { border-top-color: var(--hairline); }
.band-dark .rule-list li { border-bottom-color: var(--hairline); }

/* ---------- Terms and prices (schools pages) ---------- */
.term-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem; font-weight: 600; color: var(--lead-soft);
}
.price-note { display: block; margin-top: 0.2rem; font-size: 0.8rem; font-weight: 400; line-height: 1.45; color: var(--lead-soft); }

/* ---------- Why me (schools): portrait beside the words ---------- */
.why-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.why-portrait {
  overflow: hidden; aspect-ratio: 4 / 5; max-width: 26rem;
  border-radius: var(--radius-lg); box-shadow: 0 30px 60px -28px rgba(31, 33, 37, 0.45);
}
.why-portrait img { width: 100%; height: 100%; object-fit: cover; }
.why-copy .section-title { max-width: 22ch; }
.why-copy .section-intro { max-width: 40rem; }
.why-facts {
  list-style: none; margin: var(--s-lg) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-md);
}
.why-facts li {
  padding-top: var(--s-sm); border-top: 1.5px solid var(--graphite);
  font-size: 1.02rem; line-height: 1.45; color: var(--graphite); text-wrap: pretty;
}


/* ---------- The audit (schools): steps, what you get, the terms ---------- */
.audit-sub { margin: 0 0 var(--s-sm); font-size: 1.05rem; }
/* the six steps as a strip: a cue light on a line, then the step */
.step-strip {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-md);
}
.step-strip li {
  position: relative; padding-top: 2.1rem;
  font-size: 0.95rem; line-height: 1.45; color: var(--graphite); text-wrap: pretty;
}
.step-strip li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--sheet); border: 1.5px solid var(--gel);
  font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--gel-deep);
}
.step-strip li::after {
  content: ""; position: absolute; top: 0.75rem; left: 1.9rem; right: calc(-1 * var(--s-md) + 0.4rem);
  height: 1px; background: var(--rule);
}
.step-strip li:last-child::after { content: none; }
.step-note { margin: var(--s-sm) 0 0; font-size: 0.95rem; color: var(--lead-soft); }

.audit-steps { padding-bottom: var(--s-lg); border-bottom: 1px solid var(--hairline); }
.audit-deal {
  margin-top: var(--s-lg);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
/* what you get: an even list, every item on the same edge with a hairline
   above it, rows aligned to the top */
.get-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-lg); align-items: start;
}
.get-list li { padding: var(--s-sm) 0 var(--s-md); border-top: 1px solid var(--rule); font-size: 0.95rem; line-height: 1.5; color: var(--lead-soft); text-wrap: pretty; }
.get-lead {
  display: block; margin-bottom: var(--s-2xs);
  font-family: var(--display); font-size: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem); line-height: 1.25; color: var(--graphite); text-wrap: pretty;
}
.audit-price {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.audit-fee { margin: 0; font-family: var(--display); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1.05; color: var(--graphite); }
.audit-fee .price-note { font-family: var(--sans); font-size: 0.9rem; margin-top: 0.5rem; }
.audit-terms { margin: var(--s-sm) 0 0; font-weight: 600; color: var(--graphite); }
.audit-credit { margin: 0.4rem 0 var(--s-md); font-size: 0.92rem; color: var(--lead-soft); }


/* ---------- Rebuild or microsite (schools) ---------- */
.ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.way {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.way-name { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }
.way-desc { margin: var(--s-xs) 0 var(--s-md); max-width: 36rem; font-size: 0.95rem; color: var(--lead-soft); text-wrap: pretty; }
.way-lead {
  display: block; margin-bottom: var(--s-xs);
  font-family: var(--display); font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); line-height: 1.25; color: var(--graphite); text-wrap: balance;
}
.way-price { margin: auto 0 var(--s-xs); font-family: var(--display); font-size: 1.6rem; line-height: 1.15; color: var(--graphite); }
.way-price .price-note { font-family: var(--sans); font-size: 0.88rem; margin-top: 0.35rem; }

/* ---------- Statement band ---------- */
.statement .section-title { max-width: 24ch; }
.statement .section-intro { max-width: 40rem; }

/* ---------- Article list and article page ---------- */
.article-list { border-top: 1px solid var(--rule); margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.article-row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 0.4rem 2rem; align-items: baseline;
  padding-block: clamp(1.2rem, 2.4vw, 1.7rem); border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.article-row:hover { background: rgba(214, 0, 111, 0.06); }
.article-meta {
  grid-column: 1; grid-row: 1; margin: 0;
  font-size: 0.85rem; font-weight: 600; color: var(--lead-soft);
}
.article-title { grid-column: 2; grid-row: 1; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem); transition: color 0.3s var(--ease); }
.article-row:hover .article-title { color: var(--gel-deep); }
.article-summary { grid-column: 2; grid-row: 2; margin: 0; max-width: 40rem; font-size: 0.95rem; color: var(--lead-soft); }
.article-row .ledger-cue { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.article-row:hover .ledger-cue { transform: translateX(6px); }

.article-byline {
  margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  font-size: 0.85rem; color: var(--lead-soft);
}
.article-byline time, .article-cat { color: var(--gel-deep); }
.article-body > * { max-width: 46rem; }
.article-body h2 { margin: 2.8rem 0 0.8rem; }
.article-body p { margin: 0 0 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.article-body li { margin-bottom: 0.4rem; }
.pull {
  margin: clamp(2rem, 4vw, 3rem) 0; padding-left: 1.4rem; border-left: 1px solid var(--gel-deep);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem); line-height: 1.3; color: var(--graphite);
}
.pull p { margin: 0; font-size: inherit; }
.pull em { font-style: italic; font-weight: 340; color: var(--gel-deep); }
.aside-note {
  margin: 1.8rem 0; padding: 1.1rem 1.3rem;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 0.95rem; color: var(--lead-soft);
}
.aside-note p { margin: 0; }
.article-related { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ---------- Closing band ---------- */
.close-band { border-top: 1px solid var(--hairline); text-align: center; }
.close-band .section-title { max-width: 24ch; margin-inline: auto; }
.close-band .section-intro { margin-inline: auto; }
.close-band .btn { margin-top: 2rem; }
.close-alt { margin: 1.6rem 0 0; font-size: 0.95rem; color: var(--lead-soft); }
.close-alt a { color: var(--gel-deep); text-decoration: underline; text-underline-offset: 3px; }
.close-alt a:hover { color: var(--gel); }

@media (max-width: 880px) {
  .split, .audit-deal, .ways-grid, .why-facts { grid-template-columns: 1fr; }
  /* why me: kicker and heading first, a small round portrait beside the heading */
  .why-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-md); align-items: end; }
  .why-copy { display: contents; }
  .why-copy > * { grid-column: 1 / -1; }
  .why-copy > .kicker { grid-row: 1; justify-self: start; }
  .why-copy > .section-title { grid-column: 1; grid-row: 1; }
  .why-portrait { grid-column: 2; grid-row: 1; width: clamp(5rem, 22vw, 7.5rem); aspect-ratio: 1 / 1; border-radius: 50%; }
  .why-portrait img { object-position: 50% 25%; }
  .why-facts { gap: var(--s-sm); margin-top: var(--s-md); }
  .step-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-lg); }
  .step-strip li:nth-child(3n)::after { content: none; }
  .article-row { grid-template-columns: minmax(0, 1fr) auto; }
  .article-meta { grid-column: 1 / -1; grid-row: 1; }
  .article-title { grid-column: 1; grid-row: 2; }
  .article-summary { grid-column: 1; grid-row: 3; }
  .article-row .ledger-cue { grid-column: 2; grid-row: 2 / 4; }
  .page-head-actions .btn { width: 100%; }
}
@media (max-width: 640px) {
  .step-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-strip li:nth-child(3n)::after { content: ""; }
  .step-strip li:nth-child(2n)::after { content: none; }
  /* what you get: one column, every other item stepped in */
  .get-list { grid-template-columns: 1fr; }
  /* the questions: smaller steps so every line keeps a good measure */
}

/* ---------- The twenty seconds (/schools/ page head) ---------- */
/* A parent's first twenty seconds on a real school homepage. twenty.js
   runs the clock and sets .is-live, .is-shown, .is-open, .is-on,
   .is-marked and .is-done. Without it the questions are plain text. */
.wrap.has-twenty { display: flex; flex-direction: column; gap: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.wrap.has-twenty > .head-body { order: 1; padding-top: 0; }
.wrap.has-twenty > .twenty { order: 2; }
@media (min-width: 1000px) {
  .wrap.has-twenty {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 1.6rem + 1.5vw, 3rem) clamp(2.5rem, 4vw, 4.5rem); align-items: start;
  }
  .wrap.has-twenty > .head-lead { grid-column: 1 / -1; }
  .wrap.has-twenty > .head-lead .section-title { max-width: 24ch; }
  .wrap.has-twenty > .head-body { grid-column: 1; grid-row: 2; }
  .wrap.has-twenty > .twenty { grid-column: 2; grid-row: 2; }
}

.twenty { margin: 0; }
.tw-stage { display: grid; grid-template-columns: 18.75rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.tw-label { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--graphite); }
.tw-clock { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.tw-secs {
  min-width: 3.6ch;
  font-family: var(--display); font-size: 2.6rem; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--graphite);
}
.tw-bar { flex: 1 1 0%; height: 3px; background: var(--rule); overflow: hidden; }
.tw-bar i { display: block; height: 100%; background: var(--gel); transform-origin: 0 50%; transform: scaleX(1); }

/* the phone, and the page inside it (sized in container units) */
.tw-phone {
  border: 7px solid var(--graphite); border-radius: 30px; background: var(--graphite);
  box-shadow: 0 30px 60px -38px rgba(31, 33, 37, 0.6);
}
.tw-screen {
  position: relative; overflow: hidden; container-type: size;
  aspect-ratio: 9 / 18.5; border-radius: 23px; background: var(--sheet);
  font-family: var(--sans); color: var(--graphite);
}
.tw-head {
  position: absolute; inset: 0 0 auto; z-index: 3; height: 11cqh;
  display: flex; align-items: center; gap: 3cqw; padding: 0 5cqw;
  background: var(--sheet); border-bottom: 1px solid #EDEEEB;
}
.tw-crest { flex: none; width: 9cqw; height: 9cqw; border-radius: 2cqw 2cqw 4.5cqw 4.5cqw; background: #C9CCD1; }
.tw-redact { display: block; background: var(--graphite); border-radius: 1px; }
.tw-redact-name { width: 30cqw; height: 3.2cqw; }
.tw-cart {
  margin-left: auto; width: 9cqw; height: 9cqw; display: grid; place-items: center; border-radius: 50%;
  color: var(--lead-soft); box-shadow: 0 0 0 0 rgba(214, 0, 111, 0);
  transition: box-shadow 0.35s ease, color 0.35s ease;
}
.tw-cart.is-marked { color: var(--gel); box-shadow: 0 0 0 2px var(--gel); }
.tw-burger { display: grid; gap: 1.2cqw; width: 7cqw; }
.tw-burger i { display: block; height: 0.9cqw; background: var(--graphite); }

.tw-view { position: absolute; inset: 11cqh 0 0; opacity: 0; transition: opacity 0.35s ease; }
.tw-view.is-on { opacity: 1; }
.tw-scroll { will-change: transform; }
.tw-video {
  position: relative; height: 34cqh; display: grid; place-items: center;
  background: #5A5E66 url(/images/schools/twenty/video.webp) center / cover no-repeat;
}
.tw-noplay {
  width: 12cqw; height: 12cqw; display: grid; place-items: center; border-radius: 50%;
  background: rgba(31, 33, 37, 0.55); color: #fff; opacity: 0.9;
}
.tw-block { display: grid; gap: 2.4cqw; padding: 6cqw 6cqw 2cqw; }
.tw-cards { grid-template-columns: 1fr 1fr; }
.tw-line { display: block; height: 2.2cqw; width: 100%; background: #E3E5E1; border-radius: 1px; }
.tw-line-60 { width: 60%; }
.tw-line-50 { width: 50%; }
.tw-img { display: block; height: 20cqh; margin-bottom: 1cqw; border-radius: 1.5cqw; background: #D5D8D4 center / cover; }
.tw-img-in { margin: 2cqw 6cqw 4cqw; height: 16cqh; }
.tw-card { display: block; height: 16cqh; border-radius: 1.5cqw; background: #EDEEEB center / cover; }
.tw-stars { margin-top: 2cqw; font-size: 3.6cqw; letter-spacing: 0.4cqw; line-height: 1; color: var(--graphite); }
.tw-foot { margin-top: 4cqw; padding-bottom: 8cqw; background: var(--paper); }
/* the page looks real but cannot be read; only the fee phrases stay sharp */
.tw-blur { margin: 0; font-size: 3.8cqw; line-height: 1.5; color: #3A3D42; filter: blur(3px); }
.tw-blur-h { font-size: 5.6cqw; color: var(--graphite); }
.tw-blur-i { filter: blur(3px); color: #3A3D42; }
.tw-pad { margin: 0 6cqw; }
.tw-page-title { margin: 0; padding: 7cqw 6cqw 3cqw; font-size: 8cqw; line-height: 1.1; }
.tw-copy { margin: 0 6cqw 5cqw; font-size: 4.3cqw; line-height: 1.5; color: var(--graphite); }
.tw-copy mark { background: rgba(214, 0, 111, 0.14); color: inherit; box-shadow: 0 1.5px 0 var(--gel); }
.tw-fees .tw-line, .tw-form .tw-field { margin: 0 6cqw 3cqw; width: calc(100% - 12cqw); }
.tw-field {
  display: block; padding: 2.6cqw 3cqw;
  border: 1px solid #C9CCD1; border-radius: 1.5cqw; font-size: 3.8cqw; color: #6E727A;
}
.tw-select::after { content: " ▾"; float: right; }
.tw-message { height: 18cqh; }
.tw-send {
  display: inline-block; margin: 1cqw 6cqw; padding: 2.4cqw 6cqw; border-radius: 1.5cqw;
  background: var(--lead-soft); color: #fff; font-size: 3.8cqw;
}
.tw-menu {
  position: absolute; inset: 11cqh 0 0; z-index: 2;
  display: grid; align-content: start; gap: 5cqw; padding: 8cqw 6cqw;
  background: var(--sheet);
  opacity: 0; transform: translateY(-3cqh);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tw-menu.is-open { opacity: 1; transform: none; }
.tw-menu .tw-line { height: 3cqw; }
.tw-menu-item { justify-self: start; font-size: 5.2cqw; font-weight: 600; }
/* the thumb: a ring, clearly a marker rather than a fake pointer */
.tw-tap {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  width: 12cqw; height: 12cqw; border-radius: 50%;
  border: 2px solid var(--gel); background: rgba(214, 0, 111, 0.12);
  opacity: 0; transition: opacity 0.2s ease;
}
.tw-end {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 10cqw;
  background: rgba(31, 33, 37, 0.92); color: #fff; text-align: center;
  opacity: 0; transition: opacity 0.6s ease;
}
.tw-end.is-on { opacity: 1; }
.tw-end p { margin: 0; font-size: 8cqw; line-height: 1.2; text-wrap: balance; }
.tw-end span { display: block; color: var(--gel-glow); }

/* the questions a parent arrives with */
.tw-side { padding-top: 5.35rem; }
.tw-key { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.7rem; font-size: 0.85rem; color: var(--lead-soft); }
.tw-mark { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1.5px solid var(--gel); align-self: center; }
.tw-key .tw-mark { display: inline-block; width: 0.7rem; height: 0.7rem; }
.tw-key .tw-mark + .tw-mark, .tw-key .tw-mark:nth-of-type(2) { margin-left: 0.8rem; }
.tw-mark.is-f, .is-found .tw-mark { background: var(--gel); }
.tw-questions { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--graphite); }
.tw-questions li { padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--rule); }
.tw-q { margin: 0; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.25; color: var(--graphite); }
.tw-a {
  margin: 0.4rem 0 0; display: grid; grid-template-columns: 1.1rem auto 1fr; column-gap: 0.55rem; align-items: baseline;
  font-size: 0.95rem; line-height: 1.5; color: var(--lead-soft); text-wrap: pretty;
}
.tw-a > :nth-child(3) { text-wrap: pretty; }
.tw-a .tw-mark { align-self: start; margin-top: 0.38em; }
.tw-when { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--graphite); }
/* with the script, each answer arrives at its moment */
.twenty.is-live .tw-a { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.twenty.is-live li.is-shown .tw-a { opacity: 1; transform: none; }
/* phones: the latest answer as one line under the phone */
.tw-live { display: none; margin: 1rem 0 0; min-height: 5.6rem; padding: 0.8rem 1rem; border-left: 2px solid var(--gel); background: var(--sheet); }
.tw-live-q { display: block; font-family: var(--display); font-size: 1.1rem; line-height: 1.25; color: var(--graphite); }
.tw-live-a { display: block; margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.45; color: var(--lead-soft); }

.tw-cap {
  margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1.5rem; font-size: 0.9rem; color: var(--lead-soft);
}
.tw-controls { display: inline-flex; align-items: center; gap: 1.2rem; }
.tw-btn {
  min-height: var(--tap); padding: 0.4rem 1rem;
  border: 1px solid var(--graphite); border-radius: 999px; background: none;
  color: var(--graphite); font: 600 0.85rem var(--sans); cursor: pointer;
}
.tw-btn:hover { border-color: var(--gel); color: var(--gel-deep); }

/* phones: label and clock across the column, the phone sized so label,
   clock, phone and the live answer fit one screen */
@media (max-width: 640px) {
  .tw-stage { grid-template-columns: 1fr; gap: 0; }
  .tw-label { text-align: left; }
  .tw-phone { width: min(16.5rem, 29svh, 29vh); margin-inline: auto; }
  .tw-side { padding-top: 0; }
  .tw-live { display: block; margin-top: 0.7rem; min-height: 5.8rem; }
  .tw-key { margin-top: 1.5rem; }
  /* while the clock runs, the phone and the one answer under it are the
     whole piece: the full list would sit below the phone and push it off
     screen. The list stays for screen readers (the live card is aria hidden). */
  .twenty.is-live .tw-key { display: none; }
  .twenty.is-live .tw-questions {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tw-live-q { display: flex; align-items: baseline; gap: 0.5rem; }
  .tw-live-q:not(:empty)::before {
    content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%;
    border: 1.5px solid var(--gel); transform: translateY(-0.05em);
  }
  .tw-live.is-found .tw-live-q::before { background: var(--gel); }
  .tw-live-a:not(:empty)::before { content: "Not found. "; font-weight: 600; color: var(--graphite); }
  .tw-live.is-found .tw-live-a:not(:empty)::before { content: "Found. "; }
}

/* ---------- Microsites (/schools/microsites/) ---------- */
.ms-roll { margin: 1.6rem 0 0; max-width: 34ch; font-size: clamp(1.25rem, 1rem + 1.3vw, 1.9rem); line-height: 1.35; color: var(--graphite); }
.ms-roll span { display: inline-block; margin-right: 0.35em; }
.ms-preface { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hairline); }
.ms-preface__text { margin: 0; max-width: 40rem; font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.4; color: var(--graphite); }

/* each example: the words beside a laptop and phone that scroll through
   the real microsite as the page scrolls (microsites.js, .is-live) */
.ms-show { padding: 0; }
.ms-show + .ms-show { border-top: 1px solid var(--hairline); }
.ms-show-track { position: relative; height: 240vh; }
.ms-show-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(4.5rem, 10vh, 6rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}
.ms-show-flip .ms-show-stage { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.ms-show-flip .ms-show-cap { order: 2; }
.ms-show-title { line-height: 1.12; margin: 0.2rem 0 1rem; }
.ms-show-text { margin: 0; max-width: 30rem; font-size: clamp(1rem, 0.97rem + 0.25vw, 1.1rem); color: var(--lead-soft); }
.ms-show-link { margin-top: 1.2rem; }
.ms-note { margin: 1.4rem 0 0; max-width: 26rem; font-size: 0.78rem; color: var(--lead-soft); }
.ms-show-device { position: relative; padding-right: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.device-frame {
  position: relative; width: min(100%, 60rem);
  padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) clamp(6px, 1vw, 10px);
  border-radius: 28px; background: var(--graphite);
  box-shadow: 0 0 0 1px rgba(214, 0, 111, 0.3), 0 50px 100px -50px rgba(0, 0, 0, 0.95);
}
.ms-frame { width: 100%; border-radius: 22px; }
.device-bar { width: 92px; height: 5px; margin: 9px auto 3px; border-radius: 999px; background: rgba(243, 244, 241, 0.4); }
.showcase-screen { position: relative; overflow: hidden; border-radius: 16px; background: #101418; }
.ms-screen { aspect-ratio: 16 / 10; }
.ms-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ms-phone {
  position: absolute; right: 0; bottom: 0; width: clamp(7rem, 20%, 10.5rem);
  padding: 6px; border-radius: 22px; background: var(--graphite);
  box-shadow: 0 30px 60px -24px rgba(31, 33, 37, 0.55);
}
.ms-phone img { width: 100%; height: auto; border-radius: 17px; display: block; background: #101418; }
.ms-hint {
  position: absolute; left: 0; bottom: 0; margin: 0;
  font-size: 0.9rem; color: var(--lead-soft);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.ms-hint::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.6rem; height: 1px; margin-right: 0.7rem; background: currentColor; opacity: 0.7;
}
.ms-show.is-live .ms-hint { opacity: 1; }

/* the two ways to have one */
.ms-options {
  margin: clamp(2.2rem, 4.5vw, 3.2rem) 0 0; padding-top: 1.6rem; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 4.5rem);
}
.ms-options > div { min-width: 0; }
.ms-options dd { margin: 0; }
.ms-option-name { margin: 0 0 0.7rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.2; color: var(--graphite); }
.ms-options dd p:not(.ms-option-name) { margin: 0 0 0.5rem; max-width: 30rem; color: var(--lead-soft); }
.ms-options dd p:last-child { margin-bottom: 0; }
.ms-options-after { margin-top: 2.25rem; }

@media (max-width: 900px) {
  .ms-options { grid-template-columns: 1fr; gap: 1.8rem; }
  .ms-show-track { height: 200vh; }
  .ms-show-stage { grid-template-columns: 1fr; align-content: center; gap: 1.2rem; padding-top: clamp(4rem, 9vh, 5rem); }
  .ms-show-flip .ms-show-stage { grid-template-columns: 1fr; }
  .ms-show-flip .ms-show-cap { order: 0; }
  .ms-show-title { margin-bottom: 0.6rem; }
  .ms-note { margin-top: 0.8rem; }
  .ms-show-device { padding-right: clamp(3rem, 16vw, 5rem); padding-bottom: clamp(2rem, 8vh, 3rem); }
  .ms-phone { width: clamp(6rem, 26%, 8.5rem); }
  .ms-hint { display: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .ms-show-text { display: none; }
}

/* ---------- Testimonials page ---------- */
.t-section { padding-top: var(--s-md); }
.t-full { max-width: 48rem; margin: 0; }
.t-full + .t-full {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.t-full blockquote { margin: 0; }
.t-full .t-lead { margin: 0 0 1.4rem; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem); line-height: 1.26; color: var(--graphite); }
.t-full blockquote p { margin: 0 0 1.1rem; max-width: 40rem; font-size: 1.05rem; line-height: 1.7; color: var(--lead-soft); }
.t-stars { display: flex; gap: 0.35rem; margin-bottom: 1.3rem; color: var(--gel-deep); }
.t-stars svg { display: block; width: 1.15rem; height: 1.15rem; }
.t-by { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.t-avatar {
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule), 0 6px 16px -8px rgba(0, 0, 0, 0.3);
}
.t-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.t-name { margin: 0; font-size: 1.15rem; color: var(--graphite); }
.t-role { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--lead-soft); }
.t-cta, .t-cta .wrap { text-align: center; }
.t-cta .section-title { margin-inline: auto; }
.t-cta .btn { margin-top: 1.8rem; }
.t-back { display: inline-block; margin-top: 1.4rem; font-size: 0.9rem; color: var(--lead-soft); text-decoration: none; }
.t-back:hover { color: var(--gel-deep); }

/* ---------- How I use AI (/ai/) ---------- */
.prose { max-width: 46rem; }
.prose h2 { margin: 2.6rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1rem; }

/* ---------- Start your brief (/start) ---------- */
.start-page { background: var(--graphite); }
.start-main {
  position: relative; overflow: hidden; min-height: 100svh;
  display: grid; align-content: center;
  padding: clamp(7rem, 15vh, 9.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.start-wrap { position: relative; max-width: 44rem; }
.start-intro { margin-bottom: 1.8rem; }
.start-title { line-height: 1.12; }
.start-lede { margin: 1rem 0 0; max-width: 36rem; color: var(--lead-soft); }
.start-alt { margin: 1.6rem 0 0; font-size: 0.95rem; color: var(--lead-soft); }
.start-alt a { color: var(--gel-deep); text-decoration: underline; text-underline-offset: 3px; }
.start-nav .nav-menu a:not(.btn) { font-size: 0.92rem; }

/* the card that holds one question at a time */
.brief-card {
  position: relative; display: grid; gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--sheet); color: var(--graphite); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--rule), 0 40px 80px -40px rgba(31, 33, 37, 0.45);
}
.brief { gap: 0.4rem; scroll-margin-top: 6.5rem; }
.brief fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.brief legend { padding: 0; }
.brief-card-step { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.85rem; color: var(--lead-soft); }
.brief-card-num { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--graphite); }
.brief-card-q {
  display: block; margin: 0.6rem 0 0.9rem;
  font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.2;
  color: var(--graphite); text-wrap: balance;
}
.brief-card .brief-card-q { margin-bottom: 0; }
.brief-card-prompt { display: block; margin: 0.5rem 0 0.2rem; font-size: 0.94rem; line-height: 1.5; color: var(--lead-soft); }
.brief-help { margin: -0.4rem 0 0.9rem; font-size: 0.92rem; color: var(--lead-soft); }
.brief-card-note { margin: 0; flex: 1 1 12rem; font-size: 0.85rem; color: var(--lead-soft); }
.brief-card :focus-visible { outline-color: var(--graphite); }

/* fields */
.field label { display: block; margin-bottom: 0.45rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--graphite); }
.field-opt { font-weight: 400; font-size: 0.8rem; color: var(--lead-soft); }
.field-light + .field-light { margin-top: 0.9rem; }
.brief-card textarea,
.brief input[type="text"],
.brief input[type="email"],
.brief input[type="tel"] {
  width: 100%; padding: 0.85rem 1rem;
  font-family: var(--sans); font-size: 1rem; color: var(--graphite);
  background: var(--paper); border: 1px solid var(--graphite); border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.brief-card textarea { resize: none; }
.brief-card textarea::placeholder, .brief input::placeholder { color: var(--lead-soft); }
.brief-card textarea:focus, .brief input:focus {
  outline: none; border-color: var(--gel-deep); box-shadow: 0 0 0 3px rgba(31, 33, 37, 0.45);
}

/* single choice answers */
.choices { display: grid; gap: 0.55rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: block; padding: 0.85rem 1.1rem;
  border: 1px solid var(--graphite); border-radius: var(--radius);
  background: var(--paper); color: var(--graphite); font-size: 0.98rem;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choice:hover span { border-color: var(--gel-deep); }
.choice input:checked + span { background: var(--graphite); border-color: var(--graphite); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--gel-deep); outline-offset: 3px; }

.brief-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.brief-nav .brief-card-note { flex: 1 1 100%; }
.brief-error { margin: 0.9rem 0 0; font-size: 0.92rem; color: #8A2E1C; }
.brief .btn-ghost { color: var(--graphite); border-color: var(--graphite); }
.brief .btn-ghost:hover { color: #fff; }
/* without the script every question shows, one under another */
html:not(.has-js) .brief-step + .brief-step { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
html:not(.has-js) .brief-back, html:not(.has-js) .brief-next { display: none; }
@media (max-width: 980px) {
  .brief-card { max-width: 36rem; }
}
@media (max-width: 560px) {
  .brief-nav .btn { flex: 1 1 auto; }
}

/* ---------- The contact card (/card/, behind the QR code) ---------- */
.card-page { background: var(--graphite); }
.card-main {
  position: relative; overflow: hidden; min-height: 100svh;
  display: grid; align-content: center;
  padding: clamp(5.5rem, 12vh, 7.5rem) 0 clamp(2.5rem, 6vh, 4rem);
}
.card-wrap { position: relative; max-width: 26rem; text-align: center; }
.card-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0 0 1.4rem; line-height: 1; }
.card-logo { height: 2.6rem; margin: 0 auto; }
.card-title { line-height: 1.12; }
.card-lede { margin: 0.8rem auto 0; max-width: 22rem; font-size: 0.98rem; color: var(--lead-soft); }
.qr-tile {
  margin: 1.6rem auto 0; width: min(100%, 19rem); padding: 1rem;
  background: var(--sheet); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(214, 0, 111, 0.4), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.qr-tile img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.qr-tile p {
  margin: 0.7rem 0 0;
  font-size: 0.85rem; font-weight: 600; color: var(--lead-soft);
}
.card-actions { margin-top: 1.4rem; display: grid; gap: 0.7rem; }
.card-actions .btn { width: 100%; }
.card-actions .btn-ghost { border-color: transparent; }
.card-routes {
  margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem;
  font-size: 0.92rem; color: var(--lead-soft);
}
.card-routes a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--gel-deep); text-decoration: underline; text-underline-offset: 3px;
}
.card-foot { margin: 1.8rem 0 0; font-size: 0.82rem; color: var(--lead-soft); }
.card-foot a { color: inherit; }

/* ---------- Thank you (/thank-you) ---------- */
.ty-wrap {
  min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding-block: clamp(7rem, 10vw + 3rem, 10rem) clamp(4rem, 10vw, 8rem);
}
.ty-inner { max-width: 560px; }
.ty-mark {
  width: 3.2rem; height: 3.2rem; margin: 0 auto 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gel); color: #fff; font-size: 1.5rem; font-weight: 700;
}
.ty-inner .kicker { margin-bottom: 1rem; }
.ty-inner h1 { margin: 0 auto 1rem; }
.ty-inner p:not(.kicker) {
  margin: 0 auto 1.8rem; max-width: 48ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.18rem); color: var(--lead-soft);
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .work-card, .work-media img, .sub, .sub-toggle svg { transition: none !important; }
  .ms-show-track { height: auto; }
  .ms-show-stage { position: static; height: auto; padding-block: var(--section-y); }
}

/* reading pages: the article follows its title directly, no double gap */
.page-head:has(.wrap-read) { padding-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.page-head:has(.wrap-read) + .section { padding-top: 0; }