/* ---------------------------------------------------------------
   Section archetypes
   ---------------------------------------------------------------
   A small named set, chosen per section by the TYPE of information,
   rather than one component repeated down the page. The rhythm
   alternates weight deliberately: a loud photographic hero, a quiet
   fact band, composed feature rows, a quiet FAQ, a loud closing CTA.
   Sections of uniform weight read monotonous however good the spacing.
   --------------------------------------------------------------- */

/* =============== 1. PHOTO HERO =============== */
.ss-shero { position: relative; background: var(--ss-ink); overflow: hidden; }
.ss-shero__media { position: absolute; inset: 0; }
.ss-shero__media img { width: 100%; height: 100%; object-fit: cover; }
.ss-shero__scrim {
  position: absolute; inset: 0;
  /* The dark half runs to 58% because the headings now do. */
  background: linear-gradient(92deg, rgba(18,23,28,.94) 0%, rgba(18,23,28,.84) 58%, rgba(18,23,28,.20) 100%);
}
.ss-shero__inner {
  position: relative;
  max-width: var(--ss-max);
  margin-inline: auto;
  padding: clamp(52px, 7vw, 96px) var(--ss-gutter);
}
.ss-shero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ss-font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ss-yellow);
  margin-bottom: 16px;
}
/* 24ch is the measure at which the longest heading on the site settles on
   two balanced lines and the short ones hold a single line, rather than the
   16ch cap that broke every one of them into three. */
.ss-shero h1 { color: #fff; margin: 0; max-width: 24ch; }
.ss-shero__lede {
  color: #C6CED6; font-size: clamp(16px, 1.7vw, 18.5px);
  max-width: 48ch; margin: 20px 0 0;
}
.ss-shero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .ss-shero__scrim { background: linear-gradient(180deg, rgba(18,23,28,.72) 0%, rgba(18,23,28,.94) 58%); }
  .ss-shero__lede { max-width: none; }
}

/* =============== 2. FACT BAND =============== */
/* The three or four things a parent checks before reading anything. */
.ss-facts-band { background: var(--ss-yellow); color: var(--ss-yellow-ink); }
.ss-facts-band__inner {
  max-width: var(--ss-max); margin-inline: auto;
  padding: 26px var(--ss-gutter);
  display: grid; gap: 20px 34px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ss-fact dt, .ss-fact__k {
  display: block;
  font-family: var(--ss-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; opacity: .72; margin-bottom: 5px;
}
.ss-fact__v {
  font-family: var(--ss-font-display); font-weight: 700;
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.2; letter-spacing: -.015em;
}

/* =============== 3. COMPOSED FEATURE ROW =============== */
/* Image fills the full height of the content beside it. A short image in
   a tall row is the thing that reads cheap, so the two columns stretch. */
.ss-rows { display: grid; gap: clamp(28px, 4vw, 52px); }
.ss-row {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 880px) {
  .ss-row { grid-template-columns: 1.02fr 0.98fr; }
  .ss-row--flip .ss-row__media { order: 2; }
}
/* Tall enough to carry the row. A short image beside a tall content panel
   is the thing that reads cheap; the two columns stretch to match. */
.ss-row__media {
  position: relative;
  min-height: clamp(320px, 42vw, 520px);
  overflow: hidden;
  border-radius: var(--ss-radius);
}
.ss-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Tag card overlapping the image corner: depth by overlap, not more colour. */
.ss-row__tag {
  position: absolute; left: 0; bottom: 22px;
  background: var(--ss-ink); color: #EDF1F4;
  padding: 12px 20px 12px 24px;
  border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
  font-family: var(--ss-font-display); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 85%;
}
.ss-row__tag .ss-icon { color: var(--ss-yellow); flex: 0 0 auto; }

.ss-row__body {
  position: relative;
  background: var(--ss-surface);
  padding: clamp(28px, 3.4vw, 46px);
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--ss-radius);
}
/* Ghosted numeral behind the copy: structure without another box. */
.ss-row__num {
  position: absolute; top: 8px; right: 18px;
  font-family: var(--ss-font-display); font-weight: 700;
  font-size: clamp(72px, 9vw, 118px); line-height: 1;
  color: var(--ss-ink); opacity: .05; pointer-events: none; user-select: none;
}
.ss-row__body h3 { margin: 0 0 12px; font-size: clamp(21px, 2.4vw, 27px); position: relative; }
.ss-row__body p { margin: 0 0 14px; color: var(--ss-muted); max-width: 46ch; position: relative; }
.ss-row__body p:last-child { margin-bottom: 0; }
.ss-row__list { list-style: none; margin: 6px 0 0; padding: 0; position: relative; }
.ss-row__list li {
  display: flex; gap: 11px; align-items: flex-start;
  margin-bottom: 9px; font-size: 15.5px;
}
/* Yellow rule marker rather than a bullet glyph. */
.ss-row__list li::before {
  content: ""; flex: 0 0 auto;
  width: 3px; height: 17px; margin-top: 4px;
  background: var(--ss-yellow); border-radius: 2px;
}

/* =============== 4. NUMBERED STEPS =============== */
/* Only where the content genuinely is a sequence. */
.ss-steps { counter-reset: ss-step; display: grid; gap: 0; max-width: 72ch; }
/* Centres with its head on the stacked fallback below 820px. */
.ss-steps--row { margin-inline: auto; }
.ss-step {
  counter-increment: ss-step;
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--ss-hair);
  align-items: start;
}
.ss-step:first-child { border-top: 1px solid var(--ss-hair); }
.ss-step::before {
  content: counter(ss-step, decimal-leading-zero);
  font-family: var(--ss-font-display); font-weight: 700; font-size: 15px;
  color: var(--ss-yellow-dk); padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ss-step h3 { margin: 0 0 6px; font-size: 18.5px; }
.ss-step p { margin: 0; color: var(--ss-muted); }

/* =============== 5. QUIET FAQ =============== */
/* Matched to the head above it and centred with it. The questions stay
   ranged left inside the column: centred question text is harder to scan,
   and scanning is the whole job of an FAQ. */
.ss-faq { max-width: 740px; margin-inline: auto; border-top: 1px solid var(--ss-hair); }
.ss-faq details { border-bottom: 1px solid var(--ss-hair); }
.ss-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--ss-font-display); font-weight: 700;
  font-size: clamp(16.5px, 1.8vw, 18.5px); color: var(--ss-ink);
}
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2px solid var(--ss-muted); border-bottom: 2px solid var(--ss-muted);
  transform: rotate(45deg) translateY(-3px); transition: transform .18s ease;
}
.ss-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.ss-faq summary:hover { color: var(--ss-yellow-dk); }
.ss-faq__a { padding: 0 0 20px; color: var(--ss-muted); max-width: 62ch; }
.ss-faq__a p { margin: 0 0 12px; }
.ss-faq__a p:last-child { margin-bottom: 0; }

/* =============== 6. IMAGE-LED CTA =============== */
/* The heading was capped at 20ch inside a 740px column, so it wrapped early
   and left a 378px hole before the buttons. It now uses its column, and the
   band is tall enough for the photograph behind it to actually read. */
.ss-ctaband {
  position: relative;
  overflow: hidden;
  background: var(--ss-ink);
}
.ss-ctaband__media { position: absolute; inset: 0; }
.ss-ctaband__media img { width: 100%; height: 100%; object-fit: cover; }
.ss-ctaband__scrim { position: absolute; inset: 0; background: rgba(18,23,28,.82); }
.ss-ctaband__inner {
  position: relative;
  max-width: var(--ss-max);
  margin-inline: auto;
  min-height: clamp(240px, 24vw, 340px);
  padding: clamp(52px, 6vw, 84px) var(--ss-gutter);
  display: grid;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .ss-ctaband__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.ss-ctaband h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.14;
  /* Wide enough for the short closings to hold one line and the long ones
     to balance across two at roughly the width of the paragraph beneath,
     rather than stacking narrow beside a much wider lede. */
  max-width: 720px;
  text-wrap: balance;
}
.ss-ctaband p {
  color: #C6CED6;
  margin: 14px 0 0;
  max-width: 50ch;
  font-size: clamp(15px, 1.6vw, 17px);
}
.ss-ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (min-width: 900px) { .ss-ctaband__actions { justify-content: flex-end; } }

/* =============== shared section furniture =============== */
.ss-band { padding: clamp(48px, 6vw, 76px) 0; }
.ss-band--tint { background: var(--ss-paper); }
.ss-band--white { background: var(--ss-surface); }
.ss-band__inner { max-width: var(--ss-max); margin-inline: auto; padding-inline: var(--ss-gutter); }
/* Centred, because everything these heads introduce - fact rows, the step
   rail, the FAQ, the card grid - is symmetrical, and a head ranged left
   above a symmetrical block reads like an offcut. 740px with balanced lines
   is the measure at which every intro paragraph on the site settles on two
   even lines; narrower left a 71px orphan on Scholar Transport. */
.ss-band__head {
  margin-inline: auto;
  margin-bottom: clamp(24px, 3vw, 36px);
  max-width: 740px;
  text-align: center;
}
.ss-band__head h2 { margin: 0; font-size: clamp(27px, 3.2vw, 39px); }
.ss-band__head p {
  color: var(--ss-muted);
  margin: 14px auto 0;
  font-size: 17px;
  text-wrap: balance;
}
/* Ranged left where the head introduces one column rather than the page. */
.ss-band__head--left { margin-inline: 0; text-align: left; max-width: 46ch; }
.ss-band__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ss-font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ss-muted);
  margin-bottom: 12px;
}
.ss-band__eyebrow .ss-icon { color: var(--ss-yellow-dk); }

/* Icons: sized by context, never larger than the text they sit with. */
.ss-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* Breadcrumb mark. */
.ss-crumb { display: flex; align-items: center; gap: 9px; }
.ss-crumb .ss-icon { color: var(--ss-yellow-dk); }

@media (prefers-reduced-motion: reduce) {
  .ss-faq summary::after { transition: none; }
}

/* =============== 7. STORY TIMELINE =============== */
/* For a history, where the dates carry the meaning. Distinct from the
   numbered steps archetype, which is for a process you follow. */
.ss-timeline { max-width: 74ch; position: relative; }
.ss-timeline__item {
  position: relative;
  padding: 0 0 34px 34px;
  border-left: 2px solid var(--ss-hair);
}
.ss-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.ss-timeline__item::before {
  content: "";
  position: absolute; left: -7px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ss-yellow);
  box-shadow: 0 0 0 4px var(--ss-paper);
}
.ss-band--white .ss-timeline__item::before { box-shadow: 0 0 0 4px var(--ss-surface); }
.ss-timeline__year {
  display: block;
  font-family: var(--ss-font-display); font-weight: 700;
  font-size: 14px; letter-spacing: .08em; color: var(--ss-yellow-dk);
  font-variant-numeric: tabular-nums; margin-bottom: 5px;
}
.ss-timeline__item h3 { margin: 0 0 8px; font-size: clamp(19px, 2.1vw, 23px); }
.ss-timeline__item p { margin: 0; color: var(--ss-muted); max-width: 56ch; }

/* =============== 8. SERVICE GRID =============== */
/* Cards are used here on purpose: four genuinely parallel, selectable
   things. Each carries a real image, which is the condition for a card
   grid not reading as filler. */
.ss-svcgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ss-svc {
  background: var(--ss-surface); border-radius: var(--ss-radius);
  overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.ss-svc:hover { box-shadow: var(--ss-shadow-hover); transform: translateY(-2px); }
.ss-svc__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ss-paper); }
.ss-svc__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hairline rather than an accent stripe, matching the category tiles. */
.ss-svc__rule { height: 1px; background: var(--ss-hair); }
.ss-svc__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.ss-svc__body h3 {
  margin: 0; font-size: 18px;
  display: flex; align-items: center; gap: 9px; color: var(--ss-ink);
}
.ss-svc__body h3 .ss-icon { color: var(--ss-yellow-dk); }
.ss-svc__body p { margin: 0; color: var(--ss-muted); font-size: 14.5px; }
.ss-svc__more {
  margin-top: auto; padding-top: 10px;
  font-weight: 600; font-size: 14px; color: var(--ss-ink);
}
.ss-svc:hover .ss-svc__more { color: var(--ss-yellow-dk); }

/* =============== 9. STATEMENT =============== */
/* One idea, given room. Used once per page at most.
   Centred rather than left-aligned: the quote is short, so ranging it left
   left most of the band empty and the section read like an offcut instead of
   a deliberate pause. */
.ss-statement { background: var(--ss-ink); color: #EDF1F4; }
.ss-statement__inner {
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 112px) var(--ss-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}
.ss-statement__mark { color: var(--ss-yellow); line-height: 0; }
.ss-statement blockquote {
  /* The template wraps the quote and cite in a div, so the flex centring
     applies to that wrapper, which sizes to the wider cite. Without auto
     margins the narrower quote then ranges left inside it. */
  margin: 0 auto;
  font-family: var(--ss-font-display); font-weight: 600;
  font-size: clamp(25px, 3.6vw, 42px); line-height: 1.16; letter-spacing: -.022em;
  /* 30ch is where the longest of the three quotes drops from four lines to
     two. Below it the quote set narrower than the note beneath, which read
     upside down: the loud line should be the wide one. */
  color: #fff; max-width: 30ch;
  text-wrap: balance;
}
/* Hairline rule as a breath between the claim and the qualifier. */
.ss-statement blockquote::after {
  content: "";
  display: block;
  width: 54px; height: 2px;
  background: var(--ss-yellow);
  margin: 28px auto 0;
}
.ss-statement cite {
  display: block; font-style: normal;
  color: #A9B3BD; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.62;
  max-width: 56ch;
  /* Same auto margins as the quote above: the wrapper div sizes to whichever
     of the two is wider, so the narrower one ranges left inside it and the
     section reads as two blocks on different axes. */
  margin-inline: auto;
  /* Centred text ending in a 59px orphan looks like a mistake. */
  text-wrap: balance;
}

/* --------- 4b. STEPS, HORIZONTAL --------- */
/* For a four-step sequence with room to run across the page. The continuous
   rule with numbered markers sitting on it is what keeps it reading as a
   sequence rather than four unrelated cards. Not used where the steps sit in
   a narrow column, which is why this is a modifier and not the default. */
@media (min-width: 820px) {
  .ss-steps--row {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 clamp(18px, 2.4vw, 34px);
    max-width: none;
  }
  .ss-steps--row .ss-step {
    display: block;
    grid-template-columns: none;
    border: 0;
    border-top: 2px solid var(--ss-hair);
    padding: 34px 0 0;
    position: relative;
  }
  .ss-steps--row .ss-step:first-child { border-top: 2px solid var(--ss-hair); }

  /* Numbered marker straddling the rule, echoing the timeline nodes. */
  .ss-steps--row .ss-step::before {
    position: absolute;
    top: -14px;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ss-yellow);
    color: var(--ss-yellow-ink);
    display: grid;
    place-items: center;
    font-size: 12px;
    padding: 0;
  }
  .ss-steps--row .ss-step h3 { font-size: 17.5px; margin-bottom: 7px; }
  .ss-steps--row .ss-step p { font-size: 14.5px; }
}

/* Below the breakpoint it falls back to the stacked layout, which is the
   right shape on a phone regardless. */

/* =============== 10. SPLIT BAND =============== */
/* A column of content with a standing image beside it. For content that is
   tall and narrow by nature - a timeline - which on its own leaves half the
   band empty however wide the column is set. The image stretches to the
   content's height rather than sitting as a fixed block, for the same
   reason the feature rows do. */
.ss-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
@media (min-width: 900px) {
  .ss-split { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.ss-split__media {
  position: relative;
  min-height: clamp(300px, 38vw, 480px);
  overflow: hidden;
  border-radius: var(--ss-radius);
}
.ss-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The column already constrains the measure, so the standalone caps would
   only pull the text off the column's right edge. */
.ss-split .ss-timeline { max-width: none; }
.ss-split .ss-timeline__item p { max-width: none; }

/* ---------------------------------------------------------------
   Section archetypes on a phone
   ---------------------------------------------------------------
   The heroes centre here. On a wide screen the text sits in the left
   third of a photograph and ranging it left is what anchors it; once
   the column is the full width of the screen there is no left third
   to anchor to, and ranged-left text in a centred band reads like it
   slid. See base.css for the reasoning behind the sizes.
   --------------------------------------------------------------- */
@media (max-width: 780px) {

  .ss-shero__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ss-shero h1 {
    font-size: 36px;
    /* 18ch let the longest heading run to 345px of the 350px available -
       3px of air each side reads as overflow. 16ch breaks it a line
       earlier and every heading on the site keeps a real margin. */
    max-width: 16ch;
    margin-inline: auto;
  }
  .ss-shero__lede { font-size: 18px; margin-inline: auto; max-width: 40ch; }
  .ss-shero__eyebrow { font-size: 13px; }
  .ss-shero__actions { justify-content: center; }

  .ss-fact__k { font-size: 11.5px; }
  .ss-fact__v { font-size: 19px; }

  .ss-band__eyebrow { font-size: 12px; }
  .ss-band__head h2 { font-size: 30px; }
  .ss-band__head p  { font-size: 18px; }

  .ss-row__body h3 { font-size: 23px; }
  .ss-row__body p  { font-size: 18px; }
  .ss-row__list li { font-size: 16.5px; }
  .ss-row__tag { font-size: 15px; }

  .ss-step h3 { font-size: 19.5px; }
  .ss-step p  { font-size: 16.5px; }

  .ss-faq summary { font-size: 18px; }
  .ss-faq__a { font-size: 18px; max-width: none; }

  .ss-ctaband h2 { font-size: 32px; }
  .ss-ctaband p  { font-size: 18px; }

  .ss-statement blockquote { font-size: 30px; max-width: 17ch; }
  .ss-statement cite { font-size: 18px; }

  .ss-timeline__item h3 { font-size: 21px; }
  .ss-timeline__item p  { font-size: 18px; }

  .ss-svc__body h3 { font-size: 19px; }
  .ss-svc__body p  { font-size: 16.5px; }
}

/* Matching the home hero: stacked buttons match widths rather than each
   sizing to its own label. */
@media (max-width: 560px) {
  .ss-shero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
  }
  .ss-shero__actions .ss-btn { text-align: center; }
  .ss-ctaband__actions .ss-btn { text-align: center; }
}