/* ===========================================================
   AUTISM & 2e — page-specific CSS. Full redesign, 2026-08-25.
   Written mobile-first: the base rules ARE the phone layout
   (all paid traffic lands there), and every @media block is a
   min-width desktop pass. Everything is prefixed .a2e- so it
   cannot leak onto another page; the old .qual-*, .fit-*,
   .next-* and .both-split blocks in pages.css are no longer
   called by this page.
   =========================================================== */

/* Shared display line — one strong line per section, no eyebrow stack. */
.a2e-line { font-family: var(--font-display-condensed); font-weight: 900; text-transform: uppercase; font-size: clamp(27px, 7.2vw, 46px); line-height: 1.0; letter-spacing: -0.01em; color: var(--gateway-navy); margin: 0; text-wrap: balance; }
.section.navy .a2e-line { color: #fff; }
.a2e-line b { color: var(--gateway-navy); font-weight: 900; box-shadow: inset 0 -0.1em 0 var(--gateway-gold); }
.section.navy .a2e-line b { color: var(--gateway-gold); box-shadow: none; }

/* Body copy. Two paragraphs at equal weight get the SAME treatment
   (lead/muted split is reserved for genuinely secondary detail). */

/* The hero is the shared .page-hero (h-admissions + h-2e) in pages.css — the bespoke
   .a2e-hero that lived here was removed 2026-08-26 at Andrew's request so this page
   matches the Admissions and Tuition heroes. */

/* ---------- Who Gateway is for ----------
   The hero asks whether Gateway is the right fit; this band answers it in plain
   words before the 2e diagram explains the label. The heading anchors the left
   column and the answer runs down the right, which is the layout the previous
   occupant of this slot arrived at after six rounds — that skeleton is kept.
   Sizes are FIXED px, never vw, and text-size-adjust is locked: Android font
   boosting inflated this block on real phones when it was vw-scaled. */
#right-fit { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* No gold underline on the <b> here: the 72px rule below is this section's one
   gold mark, and the inherited .a2e-line highlight put a second, near-identical
   stroke 16px above it (worse when the heading wraps and the underline paints
   per line). The <b> keeps the semantic emphasis without a second treatment. */
/* One deliberate mark under the heading, in place of six bullets. */
/* Both paragraphs carry the same argument at equal weight, so they take the same
   treatment — the lead/muted split is reserved for genuinely secondary detail. */
/* Gold mark sits above the quote rather than beside it: a left rule reads as a
   ragged edge in a centred column. */

/* The answer band's headline: the words carry the link to the section above. */
.a2e-answer-kicker { font-size: 17px; font-weight: 700; line-height: 1.4; color: #C7D2E8; margin: 0; }
.a2e-answer-word { font-family: var(--font-display-condensed); font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 8.4vw, 62px); line-height: 0.94; letter-spacing: -0.018em; color: var(--gateway-gold); margin: 10px 0 0; overflow-wrap: break-word; }

/* ---------- The 2e graphic: two photos bridged by a gold "2e" ----------
   This is the page's explanation of twice-exceptional. It is a diagram
   made of real photographs rather than another paragraph in a box.
   Labels are Gateway's own definition, confirmed by Robin: "Academically
   Bright" + "High-Functioning Autism". Do NOT revert the second one to
   "Neurodivergent" — CLAUDE.md still documents that older label, but Andrew
   overrode it on 2026-08-25; the repo doc is what needs updating. */
/* The 2e badge bridges the two photos: vertical connectors on a phone where the
   pair stacks, horizontal ones on desktop where they sit side by side. */
.a2e-pair { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 30px 0 0; align-items: start; }
/* height:auto is load-bearing on every photo below: the width/height attributes
   (kept for layout stability while loading) map to CSS presentational hints, and
   an explicit height makes the browser ignore aspect-ratio entirely. */
.a2e-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); }
/* The two labels are the payoff of the section, not captions: set as a mini
   headline per side, tracking dropped to display scale. */
.a2e-half-label { display: block; margin: 15px 0 0; font-family: var(--font-display-condensed); font-size: clamp(21px, 5.4vw, 27px); font-weight: 900; letter-spacing: 0.005em; line-height: 1.06; text-transform: uppercase; color: var(--gateway-gold); text-wrap: balance; }
.a2e-side p { margin: 7px 0 0; font-size: 16px; line-height: 1.55; color: #fff; text-wrap: pretty; }
.a2e-bridge { justify-self: center; display: grid; justify-items: center; gap: 8px; padding: 20px 0 24px; position: relative; }
.a2e-bridge::before, .a2e-bridge::after { content: ""; position: absolute; left: 50%; width: 2px; background: rgba(249, 213, 2, 0.45); }
.a2e-bridge::before { top: 0; height: 18px; }
.a2e-bridge::after { bottom: 0; height: 18px; }
.a2e-badge { width: 76px; height: 76px; border-radius: 50%; background: var(--gateway-gold); color: var(--gateway-navy); display: grid; place-items: center; font-family: var(--font-display-condensed); font-weight: 900; font-size: 30px; line-height: 1; }
.a2e-bridge-cap { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; white-space: nowrap; }

/* ---------- The fit test ---------- */
/* Column flow on a phone with the classroom photo pulled to the top of the
   section (order:-1 below); the desktop pass turns this into two columns. */
/* ---------- The fit test ----------
   The three criteria are the most important thing on the page, so they read as a
   numbered triad with gold discs rather than hairline rows with small grey counters.
   Navy numeral on a gold disc, never gold numerals on white — bright gold on white
   fails contrast (same reason the deep gold was retired for label text).
   Two paragraphs that used to sit in this column were cut 2026-08-26: the ADHD
   caveat (FAQ Q2 answers it at length) and the eligibility sentence in the cost
   block (criterion 3 above already states it, and FAQ Q3 answers it directly). */

/* Cost gets a gold keyline instead of a card. */

/* ---------- CTA link row ---------- */
.a2e-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 24px 0 0; font-size: 16px; }
.a2e-cta-links a { color: var(--gateway-gold); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(249, 213, 2, 0.4); }
.a2e-cta-links a:hover { color: #fff; border-bottom-color: #fff; }
/* On the gold CTA band the gold links would vanish — navy is the only legible ink on gold. */
.cta-band-yellow .a2e-cta-links a { color: var(--gateway-navy); border-bottom-color: rgba(30, 60, 122, 0.4); }
.cta-band-yellow .a2e-cta-links a:hover { color: var(--gateway-navy); border-bottom-color: var(--gateway-navy); }

/* ===================== Desktop passes ===================== */
@media (min-width: 700px) {
  .a2e-answer-kicker { font-size: 19px; }
}
@media (min-width: 900px) {
  /* Heading centred above the answer, one column at every width. */

  /* The 2e diagram turns horizontal: the two photos occupy row 1 so they align
     top AND bottom regardless of caption length, and the gold bridge centres on
     that row instead of on the taller of the two columns. */
  .a2e-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 26px; row-gap: 0; align-items: start; }
  .a2e-shot-a { grid-area: 1 / 1; }
  .a2e-side-a { grid-area: 2 / 1; }
  .a2e-shot-b { grid-area: 1 / 3; }
  .a2e-side-b { grid-area: 2 / 3; }
  .a2e-bridge { grid-area: 1 / 2; align-self: center; padding: 0; }
  .a2e-bridge::before, .a2e-bridge::after { top: 43px; left: auto; width: 26px; height: 2px; }
  .a2e-bridge::before { right: 100%; }
  .a2e-bridge::after { left: 100%; }
  .a2e-badge { width: 88px; height: 88px; font-size: 34px; }
  .a2e-bridge-cap { font-size: 13px; }
  .a2e-shot { aspect-ratio: 4 / 3; }
  /* Reserve two lines on the label so both halves' body copy starts on the same
     baseline: "High-Functioning Autism" wraps to two lines while "Academically
     Bright" takes one, which otherwise drops the right-hand paragraph 28px below
     the left in a pair meant to read as matched halves. Scoped to the
     side-by-side layout, since the stacked view below 900px has nothing to align
     to. Do not fix this by shortening the label: it is the label Andrew
     confirmed on 2026-08-25, restored 2026-08-31 after a CLAUDE.md-based edit
     replaced it with "Neurodivergent". */
  .a2e-half-label { min-height: 2.1em; }
}

/* ---------- Fit test: the page's primary answer (rebuilt 2026-08-31, Andrew) ----------
   This section replaced the prose "Who Gateway is for" block and moved to the top.
   The page is the Google Ads landing page and its whole job is answering "is this
   school for my student?" -- so the concrete three-part test now runs first, and the
   parent can self-assess in about ten seconds before any explanation.
   Grounds stay white -> navy -> white -> gold down the page (decisions/0033). */
/* No eyebrow here on purpose -- an eyebrow plus a headline is the stacked-titles
   pattern Andrew flagged on this page. The headline carries the section alone, so
   it is scaled up from the page default and given a gold rule to sit on. The gold
   emphasis lands on "your student", which is the phrase the parent is scanning for;
   it previously sat on "it", a pronoun, which is what made the line look arbitrary.
   ONE gold device only: a rule under the block as well as the word underline put two
   gold bars on top of each other and read as a ladder. */
.a2e-fit-head { text-align: center; }
.a2e-fit-head .a2e-line {
  margin: 0 auto; max-width: 22ch;
  font-size: clamp(30px, 6.4vw, 54px); line-height: 1.03; letter-spacing: -0.015em;
}


.a2e-crit {
  list-style: none; margin: clamp(34px, 5vw, 48px) 0 0; padding: 0;
  display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr);
}
.a2e-crit li {
  /* Number and label only -- Andrew removed the supporting lines 2026-08-31 as
     extra reading a parent scanning a checklist does not need. Card is centred
     and tightened so three short items do not read as three empty boxes. */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 30px 22px;
  border: 1px solid rgba(30, 60, 122, 0.14); border-top: 5px solid var(--gateway-gold);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, rgba(30, 60, 122, 0.035) 100%);
  box-shadow: 0 1px 0 rgba(30, 60, 122, 0.05);
}
.a2e-crit-n {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--gateway-gold); color: var(--gateway-navy);
  font-family: var(--font-display-condensed); font-weight: 900; font-size: 26px;
  line-height: 1; margin: 0;
}
.a2e-crit h3 {
  margin: 0; font-family: var(--font-display-condensed); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.01em; font-size: 21px; line-height: 1.15;
  color: var(--gateway-navy); text-wrap: balance;
}

/* ---------- Verdict band ---------- */
.a2e-verdict-band {
  margin: clamp(26px, 4vw, 38px) 0 0; padding: clamp(30px, 4vw, 44px);
  border-radius: 16px; border-top: 5px solid var(--gateway-gold);
  background:
    radial-gradient(720px 420px at 88% 0%, rgba(249, 213, 2, 0.10), rgba(0, 0, 0, 0) 60%),
    var(--gateway-navy);
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(26px, 3.5vw, 46px);
  align-items: start;
}
.a2e-verdict-main { min-width: 0; }
.a2e-verdict-line {
  margin: 0; font-family: var(--font-display-condensed); font-weight: 900;
  text-transform: uppercase; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.02;
  letter-spacing: -0.01em; color: var(--gateway-gold); text-wrap: balance;
}
.a2e-verdict-p { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: #fff; text-wrap: pretty; }
.a2e-verdict-ask { margin: 14px 0 20px; font-size: 15.5px; line-height: 1.6; color: #C7D2E8; text-wrap: pretty; }

.a2e-verdict-quote { margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--gateway-gold); }
.a2e-verdict-quote blockquote {
  margin: 0; font-size: 17px; line-height: 1.6; color: #fff; text-wrap: pretty;
}
.a2e-verdict-quote figcaption {
  margin: 14px 0 0; font-size: 12px; font-weight: 900; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gateway-gold);
}

@media (max-width: 900px) {
  .a2e-crit { grid-template-columns: 1fr; gap: 14px; }
  .a2e-crit li { padding: 26px 22px 22px; }
  .a2e-verdict-band { grid-template-columns: 1fr; }
  .a2e-verdict-quote { padding: 0 0 0 18px; }
}