/* ==========================================================================
   LITTLE DOVES — COMPONENTS
   No left-border accent cards. No heavy shadow boxes. Structure is carried
   by hairlines, tint fields, monospace labelling and disciplined white space.
   ========================================================================== */

/* ==========================================================================
   1. IMAGE FRAMES — tagged monospace placeholders + real brand assets
   ========================================================================== */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--surface-sage-tint);
  border: 1px solid var(--line-hairline);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.frame--tall  { aspect-ratio: 3 / 4; }
.frame--wide  { aspect-ratio: 16 / 9; }
.frame--square{ aspect-ratio: 1 / 1; }

.frame--blue { background: var(--surface-blue-tint); }
.frame--deep { background: var(--surface-blue); border-color: transparent; }
.frame--sage { background: var(--brand-sage); border-color: transparent; }

/* Geometric field: a single disc + hairline cross rules. Nothing figurative. */
.frame__field {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.frame__disc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--overlay-sage-70);
}

.frame--blue .frame__disc { background: var(--overlay-pale-blue-70); }
.frame--deep .frame__disc { background: rgba(174, 212, 119, 0.28); }
.frame--sage .frame__disc { background: rgba(255, 255, 255, 0.26); }

.frame__field::before,
.frame__field::after {
  content: "";
  position: absolute;
  background: var(--line-hairline);
}

.frame__field::before { left: 0; right: 0; top: 50%; height: 1px; }
.frame__field::after  { top: 0; bottom: 0; left: 50%; width: 1px; }

.frame--deep .frame__field::before,
.frame--deep .frame__field::after,
.frame--sage .frame__field::before,
.frame--sage .frame__field::after { background: rgba(255, 255, 255, 0.24); }

.frame__tag {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 2;
  padding: var(--s-1) var(--s-3);
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.frame--deep .frame__tag,
.frame--sage .frame__tag { background: rgba(255, 255, 255, 0.94); }

/* <picture> is a wrapper only — let the <img> lay out as a child of .frame. */
.frame picture { display: contents; }

/* Photographic content fills the frame, covering the geometric field beneath. */
.frame img:not(.frame__logo) {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A frame carrying a real photograph needs no placeholder scaffolding, and
   defaults to the 11:6 ratio of the delivered photography so nothing crops. */
.frame--photo { aspect-ratio: 11 / 6; }
.frame--photo.frame--square { aspect-ratio: 1 / 1; }
.frame--photo.frame--tall   { aspect-ratio: 3 / 4; }
.frame--photo .frame__field { display: none; }

/* …the emblem is a contained mark, never cropped. */
.frame > img.frame__logo {
  position: relative;
  z-index: 1;
  width: min(38%, 12rem);
  height: auto;
  object-fit: contain;
  opacity: 0.96;
}

/* ==========================================================================
   2. HOME HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(var(--s-9), 4vw + 2rem, var(--s-13));
  padding-bottom: var(--section-y);
  overflow: hidden;
}

.hero__aura {
  position: absolute;
  top: -18rem;
  right: -14rem;
  width: min(52rem, 100vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(174, 212, 119, 0.34) 0%,
              rgba(132, 177, 103, 0.16) 44%,
              rgba(252, 253, 250, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner { position: relative; z-index: 1; }

/* The headline breaks the column grid and runs the full measure of the shell.
   Everything else sits in the two-column band beneath it. */
.hero__head { display: grid; gap: var(--s-5); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  /* EB Garamond carries long descenders and a tall italic ascender, so the
     0.96 leading inherited from the previous face let the "p" and "y" of
     "play" collide with the "G" and "f" of "Growing". Measured on a canvas:
     1.06 left just 1px between the two lines of ink, which still reads as
     touching; 1.18 gives a comfortable gap at every size. */
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink-blue);
  text-wrap: nowrap;
}

.hero__title .line { display: block; }

.hero__title .line--sage {
  color: var(--ink-sage-display);
  font-style: italic;
  /* The italic leans away from the margin, so nudge it back to optically
     align its stem with the R above, then stagger it a little for rhythm. */
  margin-left: 0.07em;
  letter-spacing: -0.004em;
}

.hero__grid {
  display: grid;
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-hairline);
}

@media (min-width: 66rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: var(--s-11);
    margin-top: var(--s-9);
    padding-top: var(--s-9);
  }
}

.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-blue);
  max-width: 22ch;
  text-wrap: balance;
}

.hero__body {
  margin-top: var(--s-6);
  max-width: 52ch;
  color: var(--ink-body);
}

.hero__actions { margin-top: var(--s-7); }

.hero__meta {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Hero visual stack ------------------------------------------------------- */
.hero__visual { position: relative; }

/* Ratio comes from .frame--photo (11:6, matching the delivered photography). */

/* ==========================================================================
   3. PAGE HERO (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  padding-top: clamp(var(--s-8), 3vw + 1.5rem, var(--s-11));
  padding-bottom: clamp(var(--s-8), 3vw + 1.5rem, var(--s-11));
  border-bottom: 1px solid var(--line-hairline);
  overflow: hidden;
}

.page-hero__aura {
  position: absolute;
  top: -22rem;
  left: 50%;
  width: min(46rem, 120vw);
  aspect-ratio: 1;
  transform: translateX(-30%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(132, 177, 103, 0.22) 0%,
              rgba(252, 253, 250, 0) 70%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 62rem) {
  .page-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s-11);
    align-items: end;
  }
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink-blue);
  margin-top: var(--s-5);
  text-wrap: balance;
}

.page-hero__title em { font-style: italic; color: var(--ink-sage); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-muted);
}

/* Padded to clear the 24x24 minimum target size (WCAG 2.5.8). */
.breadcrumb a,
.breadcrumb [aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-block: var(--s-1);
}

.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink-blue); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink-strong); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }

/* ==========================================================================
   4. TRUST STRIP
   ========================================================================== */
.trust-strip {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
}

@media (min-width: 40rem) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }

.trust-item {
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 40rem) {
  .trust-item { border-bottom: 0; padding-right: var(--s-6); }
  .trust-item + .trust-item {
    border-left: 1px solid var(--line-soft);
    padding-left: var(--s-6);
  }
  .trust-strip > .trust-item:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (min-width: 64rem) {
  .trust-strip > .trust-item:nth-child(3) {
    border-left: 1px solid var(--line-soft);
    padding-left: var(--s-6);
  }
}

.trust-item__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-blue);
}

.trust-item__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.trust-item__note {
  font-size: var(--fs-small);
  color: var(--ink-body);
  max-width: 30ch;
}

/* ==========================================================================
   5. DIFFERENCE CARDS — numbered, hairline-bounded, flat
   ========================================================================== */
.card-grid {
  display: grid;
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
}

@media (min-width: 44rem) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 44rem) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 44rem) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  background: var(--surface-raised);
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-height: 100%;
  transition: background var(--dur-base) var(--ease-out);
}

@media (min-width: 44rem) { .card { padding: var(--s-7) var(--s-6) var(--s-9); } }

.card-grid:hover .card { background: var(--surface-raised); }
.card:hover { background: var(--surface-sage-tint); }

.card__index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-sage);
  font-variant-numeric: tabular-nums;
}

.card__glyph {
  width: var(--s-6);
  height: var(--s-6);
  flex: none;
  border: 1.5px solid var(--brand-orange);
  transition: background var(--dur-base) var(--ease-out),
              border-radius var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

/* Each strand carries a distinct geometric signature — no icon library. */
.card--explore .card__glyph { border-radius: 50%; }
.card--create  .card__glyph { border-radius: 0; transform: rotate(45deg); }
.card--connect .card__glyph { border-radius: 50% 50% 50% 0; }
.card--grow    .card__glyph { border-radius: 50% 0 50% 0; }

.card:hover .card__glyph { background: var(--brand-orange); }

.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-blue);
}

.card__body {
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--ink-body);
  max-width: 34ch;
}

/* ==========================================================================
   6. FROEBELIAN PLAY EXPLORATION FLOW — signature interactive
   ========================================================================== */
.playflow {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 68rem) {
  .playflow {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-11);
    align-items: start;
  }
}

/* The hint sits above the strand list rather than in the opposite column, so
   the instruction is next to the thing it describes. Set at body size to match
   the paragraph it used to sit under. */
.playflow__aside {
  display: grid;
  gap: var(--s-7);
  align-content: start;
}

.playflow__hint {
  margin: 0;
  max-width: 34ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
}

/* -- Left: the strand selector, drawn as a continuous vertical path -------- */
.playflow__track {
  /* Single source of truth for the vertical path: the spine and every dot are
     both centred on --rail, measured from the track's left edge. Previously
     each was positioned independently and the dots sat 8px to the left. */
  --rail: var(--s-4);
  --dot-size: var(--s-4);

  position: relative;
  display: grid;
  gap: var(--s-2);
  padding-left: var(--s-8);
}

.playflow__spine {
  position: absolute;
  left: calc(var(--rail) - 1px);
  top: var(--s-6);
  bottom: var(--s-6);
  width: 2px;
  background: var(--line-hairline);
  overflow: hidden;
}

.playflow__spine::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--spine-progress, 0%);
  background: var(--brand-orange);
  transition: height var(--dur-slow) var(--ease-inout);
}

.playflow__node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-strong);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}

.playflow__node:last-child { border-bottom: 0; }

.playflow__dot {
  position: absolute;
  /* centre on --rail: back out the track's padding, then half the dot */
  left: calc(var(--rail) - var(--s-8) - (var(--dot-size) / 2));
  top: 50%;
  transform: translate(0, -50%);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--surface-page);
  border: 2px solid var(--line-strong);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.playflow__node[aria-selected="true"] .playflow__dot,
.playflow__node:hover .playflow__dot {
  background: var(--brand-orange);
  border-color: var(--ink-strong);
  transform: translate(0, -50%) scale(1.25);
}

.playflow__num {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-out);
}

.playflow__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-strong);
  transition: color var(--dur-base) var(--ease-out);
}

.playflow__node:hover .playflow__label { color: var(--ink-blue); }

.playflow__node[aria-selected="true"] .playflow__label { color: var(--ink-blue); }
.playflow__node[aria-selected="true"] .playflow__num { color: var(--ink-sage); }

/* -- Right: the revealed panel ------------------------------------------- */
.playflow__stage {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  display: grid;
}

.playflow__panel {
  padding: var(--s-6);
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

@media (min-width: 44rem) { .playflow__panel { padding: var(--s-8); } }

/* Without JS every strand stays stacked and readable, separated by a rule. */
.playflow__panel + .playflow__panel { border-top: 1px solid var(--line-hairline); }

/* Once enhanced, the panels collapse onto a single stage and cross-fade. */
.playflow.is-enhanced .playflow__stage { min-height: 27rem; }

@media (min-width: 68rem) {
  .playflow.is-enhanced .playflow__stage { min-height: 31rem; }
}

.playflow.is-enhanced .playflow__panel {
  grid-area: 1 / 1;
  border-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--s-4));
  transition:
    opacity    var(--dur-slow) var(--ease-out),
    transform  var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.playflow.is-enhanced .playflow__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.playflow__panel-figure {
  position: relative;
  aspect-ratio: 11 / 6;
  background: var(--surface-sage-tint);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.playflow__panel-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sized off the figure's height so the mark stays a consistent optical
   weight at every width, rather than ballooning on wide viewports. */
.playflow__panel-figure .shape {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 64%;
  width: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--overlay-sage-70);
}

.playflow__panel[data-shape="circle"]  .shape { border-radius: 50%; }
.playflow__panel[data-shape="diamond"] .shape { transform: translate(-50%, -50%) rotate(45deg); }
.playflow__panel[data-shape="leaf"]    .shape { border-radius: 50% 50% 50% 0; }
.playflow__panel[data-shape="arch"]    .shape { border-radius: 50% 0 50% 0; }

.playflow__panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-blue);
}

.playflow__panel-body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink-body);
  max-width: 46ch;
}

.playflow__panel-list {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

.playflow__panel-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--ink-strong);
}

.playflow__panel-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-sage);
  transform: translateY(-2px);
}

/* ==========================================================================
   7. FEATURE / HIGHLIGHT LISTS
   ========================================================================== */
.checklist { display: grid; gap: var(--s-4); }

.checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-strong);
}

.checklist li:last-child { border-bottom: 0; padding-bottom: 0; }

.checklist li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--brand-sage);
  flex: none;
}

.checklist--blue li::before { background: var(--brand-pale-blue); }

.spec-list {
  display: grid;
  border-top: 1px solid var(--line-hairline);
}

.spec-list > div {
  display: grid;
  gap: var(--s-1) var(--s-6);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 34rem) {
  .spec-list > div { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
}

.spec-list dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.spec-list dd {
  margin: 0;
  color: var(--ink-strong);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* ==========================================================================
   8. NUMBERED STEPS
   ========================================================================== */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
}

@media (min-width: 56rem) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }

/* Five settling-in sessions: two rows of three and two at 56rem, a single
   row once there is room for five. */
@media (min-width: 40rem) { .steps--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .steps--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 80rem) { .steps--5 { grid-template-columns: repeat(5, 1fr); } }

.step {
  background: var(--surface-raised);
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

@media (min-width: 44rem) { .step { padding: var(--s-7) var(--s-6) var(--s-9); } }

.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-sage);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}

.step__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-blue);
}

.step__body { font-size: var(--fs-small); line-height: 1.62; color: var(--ink-body); }

/* ==========================================================================
   9. NOTE / CALLOUT — full hairline box, mono label. Never a left-border bar.
   ========================================================================== */
.note {
  padding: var(--s-5);
  border: 1px solid var(--line-hairline);
  background: var(--surface-raised);
  display: grid;
  gap: var(--s-3);
}

.note--sage { background: var(--surface-sage-tint); border-color: var(--line-sage); }
.note--blue { background: var(--surface-blue-tint); border-color: rgba(0, 75, 119, 0.20); }

.note__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-sage);
}

.note--blue .note__label { color: var(--ink-blue); }

.note__body {
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--ink-strong);
  max-width: 62ch;
}

.note__body p + p { margin-top: var(--s-3); }

/* ==========================================================================
   10. FORMS
   ========================================================================== */
.form-shell {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
}

.form-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--line-hairline);
}

.form-tab {
  position: relative;
  padding: var(--s-5) var(--s-4);
  min-height: var(--control-h);
  background: var(--surface-sage-tint);
  color: var(--ink-body);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.form-tab + .form-tab { border-left: 1px solid var(--line-hairline); }

.form-tab:hover { color: var(--ink-blue); }

.form-tab[aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--ink-blue);
}

.form-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ink-blue);
}

.form-panel { padding: var(--s-6) var(--s-5) var(--s-8); }

@media (min-width: 48rem) { .form-panel { padding: var(--s-9) var(--s-8); } }

.form-panel[hidden] { display: none; }

.form-intro {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-hairline);
}

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-8);
  display: grid;
  gap: var(--s-5);
}

.fieldset:last-of-type { margin-bottom: var(--s-7); }

.fieldset__legend {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: 0 0 var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-sage);
}

.field-row { display: grid; gap: var(--s-5); }

@media (min-width: 40rem) {
  .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Paired parent/carer and emergency-contact columns. The registration form
   asks the same questions twice, so each set sits in its own titled column
   rather than as one long list of near-duplicate labels. */
.field-pair { display: grid; gap: var(--s-7); }

@media (min-width: 52rem) {
  .field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
}

.field-pair__col { display: grid; gap: var(--s-5); align-content: start; }

.field-pair__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-blue);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-hairline);
}

/* Weekly care pattern — Monday to Friday as a row of tick boxes per session. */
.day-grid {
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.care-block { display: grid; gap: var(--s-3); }

.care-block + .care-block {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-hairline);
}

.care-block__head { display: grid; gap: var(--s-1); }

.care-block__title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-strong);
}

.care-block__time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* Declaration — the confirmations a parent ticks in place of a wet signature. */
.declaration { display: grid; gap: var(--s-4); }

.declaration .checkbox { align-items: start; }

.fieldset--invalid-group .field__error,
[data-checkbox-group].is-invalid .field__error { display: flex; }

.field { display: grid; gap: var(--s-2); }

.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-strong);
}

.field__req {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-sage);
  text-transform: uppercase;
}

.field__optional {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: 400;
}

.field__hint {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-page);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink-strong);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.textarea {
  min-height: 8.5rem;
  padding-block: var(--s-4);
  resize: vertical;
  line-height: 1.58;
}

.input::placeholder,
.textarea::placeholder { color: var(--placeholder); opacity: 1; }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--ink-muted); }

.input:focus,
.select:focus,
.textarea:focus {
  background: var(--surface-raised);
  border-color: var(--ink-blue);
}

.select {
  appearance: none;
  padding-right: var(--s-9);
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--ink-strong) 50%),
    linear-gradient(135deg, var(--ink-strong) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% + 2px),
    calc(100% - 1rem)    calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.input[type="date"] { min-height: var(--control-h); }

/* Radio group ------------------------------------------------------------- */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  font-size: var(--fs-small);
  color: var(--ink-strong);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.radio:hover { border-color: var(--ink-blue); }

.radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio__dot {
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.radio__dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-blue);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.radio input:checked ~ .radio__dot { border-color: var(--ink-blue); }
.radio input:checked ~ .radio__dot::after { transform: scale(1); }

.radio:has(input:checked) {
  border-color: var(--ink-blue);
  background: var(--surface-blue-tint);
}

.radio:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Checkbox ---------------------------------------------------------------- */
.checkbox {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-2) 0;
  min-height: var(--tap-min);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-strong);
  cursor: pointer;
}

.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox__box {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.1rem;
  flex: none;
  border: 1.5px solid var(--ink-muted);
  border-radius: 2px;
  background: var(--surface-page);
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.checkbox__box::after {
  content: "";
  width: 0.5rem;
  height: 0.3rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
  margin-top: -2px;
}

.checkbox input:checked ~ .checkbox__box {
  background: var(--ink-blue);
  border-color: var(--ink-blue);
}

.checkbox input:checked ~ .checkbox__box::after { transform: rotate(-45deg) scale(1); }

.checkbox:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* Validation -------------------------------------------------------------- */
.field__error {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.45;
  color: #8f2a1c;                 /* 6.53:1 on --surface-raised */
}

.field__error::before {
  content: "!";
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #8f2a1c;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.field.is-invalid .field__error { display: flex; }

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: #8f2a1c; background: #fdf6f4; }

.field.is-invalid .radio { border-color: #8f2a1c; }

/* Form summary + status --------------------------------------------------- */
.form-alert {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  margin-bottom: var(--s-7);
  border: 1px solid #8f2a1c;
  background: #fdf6f4;
  border-radius: var(--radius-control);
}

.form-alert[hidden] { display: none; }

.form-alert__title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: #8f2a1c;
}

.form-alert__list { display: grid; gap: var(--s-2); }

.form-alert__list a {
  font-size: var(--fs-small);
  color: #8f2a1c;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form-success {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--line-sage);
  background: var(--surface-sage-tint);
  border-radius: var(--radius-control);
  text-align: left;
}

.form-success[hidden] { display: none; }

.form-success__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.14;
  color: var(--ink-blue);
}

.form-foot {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-hairline);
}

@media (min-width: 44rem) {
  .form-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-6);
  }
}

/* ==========================================================================
   11. FEE & FUNDING ESTIMATOR
   ========================================================================== */
.estimator {
  display: grid;
  border: 1px solid var(--line-hairline);
  background: var(--surface-raised);
  overflow: hidden;
}

@media (min-width: 66rem) {
  .estimator { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.estimator__controls {
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: grid;
  gap: var(--s-7);
  align-content: start;
}

@media (min-width: 44rem) { .estimator__controls { padding: var(--s-8); } }

.control {
  display: grid;
  gap: var(--s-4);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.control__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-hairline);
}

.control__legend {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-sage);
  padding: 0;
}

.control__note {
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

/* Segmented control ------------------------------------------------------- */
.segmented {
  display: grid;
  gap: var(--s-2);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--s-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
}

.segmented--wrap {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  border-radius: var(--radius-control);
}

@media (min-width: 30rem) {
  .segmented--wrap { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

.seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-strong);
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.segmented--wrap .seg { border-radius: var(--radius-control); }

.seg input { position: absolute; opacity: 0; width: 0; height: 0; }

.seg:hover { background: var(--surface-sage-tint); }

.seg:has(input:checked) {
  background: var(--surface-blue-mid);
  color: #fff;
}

.seg:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.seg:has(input:disabled) {
  opacity: 0.34;
  cursor: not-allowed;
  background: transparent;
}

.seg__sub {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  opacity: 0.72;
  font-weight: 400;
}

/* Switch ------------------------------------------------------------------ */
.switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-page);
  cursor: pointer;
  min-height: var(--tap-min);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.switch:hover { border-color: var(--ink-blue); }

.switch:has(input:checked) {
  background: var(--surface-blue-tint);
  border-color: rgba(0, 75, 119, 0.35);
}

.switch:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch__track {
  position: relative;
  width: 3rem;
  height: 1.625rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--control-off);
  transition: background var(--dur-base) var(--ease-out);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--dur-base) var(--ease-out);
}

.switch input:checked ~ .switch__track { background: var(--surface-blue-mid); }
.switch input:checked ~ .switch__track::after { transform: translateX(1.375rem); }

.switch__text { display: grid; gap: var(--s-1); }

.switch__title { font-size: var(--fs-small); font-weight: 600; color: var(--ink-strong); }
.switch__desc  { font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.5; }

/* Readout ----------------------------------------------------------------- */
.estimator__readout {
  background: var(--surface-blue);
  color: rgba(255, 255, 255, 0.86);
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: grid;
  gap: var(--s-6);
  align-content: start;
}

@media (min-width: 44rem) { .estimator__readout { padding: var(--s-8); } }

.readout__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-pale-green);
}

.readout__figure {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.readout__amount {
  font-family: var(--font-mono);
  font-size: clamp(2.75rem, 1.8rem + 4.6vw, 4.25rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.readout__amount.is-updating { opacity: 0.35; }

.readout__per {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.readout__caption {
  font-size: var(--fs-small);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.86);
  max-width: 42ch;
}

.readout__lines {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-on-dark);
}

.readout__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line-on-dark);
  font-size: var(--fs-small);
}

.readout__line dt { color: rgba(255, 255, 255, 0.74); }

.readout__line dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}

.readout__line--total dt { color: #fff; font-weight: 600; }
.readout__line--total dd { color: var(--brand-pale-green); font-weight: 500; }

.readout__flags { display: grid; gap: var(--s-3); }

.flag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-control);
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.06);
}

.flag::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--brand-pale-green);
  flex: none;
}

.flag--alert::before { background: #ffcf6b; }

.flag[hidden] { display: none; }

.readout__foot {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   12. DATA TABLES
   ========================================================================== */
.table-block { display: grid; gap: var(--s-5); }

.table-caption-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-strong);
}

.table-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-blue);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.data-table {
  min-width: 46rem;
  font-size: var(--fs-small);
}

.data-table caption {
  text-align: left;
  padding-bottom: var(--s-4);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

.data-table th,
.data-table td {
  text-align: right;
  padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}

.data-table thead th {
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.45;
  vertical-align: bottom;
  white-space: normal;
}

.data-table th[scope="row"],
.data-table thead th:first-child {
  text-align: left;
  padding-left: 0;
}

.data-table th[scope="row"] {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
  white-space: nowrap;
}

.data-table td:last-child,
.data-table thead th:last-child { padding-right: 0; }

.data-table tbody tr:hover { background: var(--surface-sage-tint); }

/* Mirrors the estimator's days-per-week selection. */
.data-table tbody tr.is-highlighted { background: var(--surface-blue-tint); }

.data-table tbody tr.is-highlighted th[scope="row"] { color: var(--ink-blue); }

.data-table tbody tr.is-highlighted th[scope="row"]::after {
  content: "selected";
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-blue);
  margin-top: 2px;
}

.data-table .is-na { color: var(--ink-muted); }

.data-table .row-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--ink-muted);
  text-transform: none;
  margin-top: 2px;
  white-space: normal;
}

.table-foot {
  display: grid;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Three short notes stacked left a wide row two-thirds empty; as a row they
   fill the measure and read as a proper footnote band. */
@media (min-width: 62rem) {
  .table-foot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4) var(--s-8);
    padding-top: var(--s-2);
  }
}

.table-foot p { max-width: 74ch; }

.table-scroll-hint {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-muted);
  text-transform: uppercase;
}

@media (min-width: 60rem) { .table-scroll-hint { display: none; } }

/* ==========================================================================
   13. FAQ ACCORDION
   ========================================================================== */
.faq-layout { display: grid; gap: var(--s-8); }

@media (min-width: 68rem) {
  .faq-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--s-11);
    align-items: start;
  }
}

.faq-index { display: grid; gap: var(--s-5); }

@media (min-width: 68rem) {
  .faq-index {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

.faq-index__list {
  display: grid;
  border-top: 1px solid var(--line-hairline);
}

.faq-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--ink-strong);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq-index__link .index-num { color: var(--ink-muted); }
.faq-index__link:hover { color: var(--ink-blue); }
.faq-index__link:hover .index-num { color: var(--ink-sage); }

.faq-tools {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-hairline);
}

@media (min-width: 48rem) {
  .faq-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-5);
  }
}

.faq-search { display: grid; gap: var(--s-2); }

.faq-status {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-muted);
}

.faq-section { margin-bottom: var(--s-10); scroll-margin-top: calc(var(--header-h) + var(--s-6)); }

.faq-section[hidden] { display: none; }

.faq-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-strong);
}

.faq-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-blue);
}

.faq-item { border-bottom: 1px solid var(--line-soft); }

.faq-item[hidden] { display: none; }

.faq-item__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: start;
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  color: var(--ink-strong);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq-item__trigger:hover { color: var(--ink-blue); }

.faq-item__q {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.004em;
  max-width: 56ch;
}

.faq-item__sign {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  margin-top: 0.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.faq-item__sign::before,
.faq-item__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink-strong);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.faq-item__sign::before { width: 0.625rem; height: 1.5px; }
.faq-item__sign::after  { width: 1.5px; height: 0.625rem; }

.faq-item__trigger[aria-expanded="true"] .faq-item__sign {
  background: var(--surface-blue-mid);
  border-color: var(--surface-blue-mid);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__sign::before,
.faq-item__trigger[aria-expanded="true"] .faq-item__sign::after { background: #fff; }

.faq-item__trigger[aria-expanded="true"] .faq-item__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Open by default: without JS every answer stays readable, since the
   triggers would have nothing to toggle. */
.faq-item__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-base) var(--ease-inout);
}

.is-enhanced .faq-item__panel { grid-template-rows: 0fr; }
.is-enhanced .faq-item__panel.is-open { grid-template-rows: 1fr; }

.faq-item__panel > div { overflow: hidden; }

.faq-item__a {
  padding: 0 var(--s-9) var(--s-6) 0;
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--ink-body);
  max-width: 68ch;
}

.faq-item__a p + p { margin-top: var(--s-4); }

.faq-empty {
  padding: var(--s-8) 0;
  font-size: var(--fs-body);
  color: var(--ink-muted);
}

.faq-empty[hidden] { display: none; }

/* ==========================================================================
   14. CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--surface-blue);
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.cta-band__aura {
  position: absolute;
  right: -12rem;
  bottom: -18rem;
  width: min(42rem, 110vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(174, 212, 119, 0.24) 0%,
              rgba(0, 58, 92, 0) 70%);
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  padding-block: var(--section-y);
  display: grid;
  gap: var(--s-8);
  align-items: end;
}

@media (min-width: 62rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--s-11);
  }
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 16ch;
}

.cta-band__body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.86);
  max-width: 48ch;
  margin-top: var(--s-5);
}

.cta-band__actions { display: grid; gap: var(--s-5); align-content: end; }

.cta-band__contact {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: rgba(255, 255, 255, 0.78);
}

.cta-band__contact a { color: #fff; text-decoration: none; display: inline-block; padding-block: 2px; }
.cta-band__contact a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ==========================================================================
   15. PULL QUOTE / STATEMENT
   ========================================================================== */
.statement {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-8);
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
}

/* Wide viewports get the classic editorial arrangement: a narrow mono rail on
   the left, the statement running wide beside it. Without this the text held a
   20ch measure and left roughly 60% of the row empty at 1920px. */
@media (min-width: 62rem) {
  .statement {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--s-11);
    align-items: start;
  }
  .statement__meta { order: -1; padding-top: 0.65em; }
}

.statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 0.85rem + 4vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink-blue);
  max-width: 30ch;
  text-wrap: balance;
}

.statement__text em { font-style: italic; color: var(--ink-sage); }

.statement__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   16. SIDE-BY-SIDE MEDIA BLOCK
   ========================================================================== */
.media-block { display: grid; gap: var(--s-8); align-items: center; }

@media (min-width: 62rem) {
  .media-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-11);
  }
  .media-block--reverse .media-block__figure { order: 2; }
}

.media-block__body { display: grid; gap: var(--s-5); align-content: start; }

/* ==========================================================================
   LEGAL PAGES — privacy notice
   ========================================================================== */
.legal { max-width: var(--measure-wide); }

.legal__block + .legal__block {
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-hairline);
}

.legal__block .h3 { color: var(--ink-blue); }



.bullets {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
  color: var(--ink-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.bullets li {
  position: relative;
  padding-left: var(--s-6);
}

.bullets li::before {
  content: "";
  position: absolute;
  left: var(--s-2);
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand-orange);
}

.bullets strong { color: var(--ink-strong); }

/* The ICO complaint links sit alone in their cell rather than inside a
   sentence, so the inline-link exception to WCAG 2.5.8 does not apply. Give
   them a real 24px target. */
.spec-list dd > .link-inline {
  display: inline-block;
  padding-block: 0.2rem;
  min-height: 1.5rem;
}

.field[hidden] { display: none; }

/* ==========================================================================
   MEET THE TEAM — about page
   ========================================================================== */
.team { display: grid; gap: var(--s-10); }

.team-member { display: grid; gap: var(--s-6); }

.team-member__figure { max-width: 24rem; }

.team-member__body { display: grid; gap: var(--s-4); align-content: start; }

.team-member__name { color: var(--ink-blue); }

@media (min-width: 48rem) {
  .team-member {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--s-9);
    align-items: start;
  }
  .team-member__figure { max-width: none; }
}