/* ============================================================================
   Rosamond Driving School — "Rosamond Red"
   ----------------------------------------------------------------------------
   Taken from the school's own storefront: red ground, white and yellow display
   type, a yellow mascot. One colour, one job:

     red    = structure. Header, footer, bands, headings. NEVER a button.
     yellow = action. Every button and nothing else on the page.
     ink    = words and prices.
     sand   = the alternating ground that keeps a red site from shouting.

   Measured contrast, in the context each pair is actually used:
     --red    #C8161D on white ............... 5.62:1   AA normal text
     white on --red .......................... 5.62:1   AA normal text
     --ink    #16120F on --yellow #FFD200 .... 13.4:1   AAA button label
     --ink    on white ....................... 17.1:1
     --ink    on --sand #FBF6EE .............. 16.1:1
     --muted  #5C554E on white ............... 7.02:1
     --muted  on --sand ...................... 6.62:1
     white on --red-dk #9C1016 ............... 9.06:1   footer
   ========================================================================= */

:root{
  /* structure */
  --red:#C8161D;   --red-dk:#9C1016;   --red-tint:#FCEDED;
  /* action */
  --yellow:#FFD200; --yellow-dk:#E5B800; --yellow-lt:#FFE87A;
  /* ink, money, grounds */
  --ink:#16120F;   --muted:#5C554E;
  --paper:#FFFFFF; --sand:#FBF6EE;  --card:#FFFFFF;
  --line:#E8E2D8;
  --money:#16120F;

  --radius:14px;
  --shadow-1:0 1px 2px rgba(22,18,15,.06);
  --shadow-2:0 1px 2px rgba(22,18,15,.06), 0 10px 28px rgba(22,18,15,.08);
  --wrap:1120px;
  --display:Archivo, "Segoe UI", system-ui, sans-serif;
  --text:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

/* ---------- reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:1.0625rem; line-height:1.65;
  overflow-wrap:anywhere;
}
img,svg{max-width:100%; height:auto}
a{color:var(--red-dk)}
h1,h2,h3{font-family:var(--display); line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.05rem); font-weight:800}
h2{font-size:clamp(1.5rem,2.9vw,2.05rem); font-weight:800}
h3{font-size:1.16rem; font-weight:700}
p{margin:0 0 1em}
ul{margin:0 0 1em; padding-left:1.1em}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--ink); color:#fff;
  padding:.6rem 1rem; border-radius:8px}

/* The black utility strip (.strip / .strip-in / .strip-lic) was REMOVED here.
   It cost two stacked black bars above the header on a phone. Its licence is
   now .brand-lic below; its telephone is in the contact block and the footer. */

/* ---------- header --------------------------------------------------------- */
.nav{background:var(--paper); border-bottom:3px solid var(--red); position:sticky; top:0; z-index:20}
/* The brand and the Log In / Register pair share one row at EVERY width. They
   used to stack below 560px, which — with the strip's second line and the link
   row wrapping — made five stacked bars before any content. The wordmark is a
   three-line stack about 95px wide, so it fits beside two compact buttons even
   at 360px; the buttons shrink rather than the row splitting. */
.nav-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:.6rem clamp(1rem,4vw,2rem);
  display:grid; align-items:center; gap:.4rem .9rem;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"brand act" "lic lic" "links links";
}
/* The licence sits under the brand lockup. It spans the full width rather than
   staying in the brand column, because in that column — squeezed between the
   wordmark and two buttons — it wrapped to three lines on a phone. */
.brand-lic{
  grid-area:lic; margin:0;
  font-size:.76rem; font-weight:600; color:var(--muted); letter-spacing:.01em;
}
.brand{grid-area:brand; display:flex; align-items:center; gap:.6rem; text-decoration:none; min-width:0}
.nav-act{grid-area:act; display:flex; gap:.4rem; flex:none}

/* Compact enough to sit beside the wordmark on a 360px phone, still above the
   44px minimum tap target. */
@media (max-width:559px){
  .nav-act .btn{font-size:.85rem; padding:.55rem .7rem}
  .mascot-brand{height:42px}
}
/* Below 360px the row genuinely cannot hold mascot + wordmark + two buttons.
   The wordmark is nowrap by design (the global overflow-wrap:anywhere would
   otherwise break "ROSAMOND" mid-word), so it does not shrink to fit — it
   stays put and the buttons, drawn after it, land ON TOP of it. Zero page
   overflow the whole time, which is why this has to be caught by looking.
   At this width only, the brand and the buttons go back to separate rows. */
@media (max-width:359px){
  .nav-in{grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "act" "lic" "links"}
  .nav-act{flex:auto}
  .nav-act .btn{flex:1 1 0; min-width:0}
}
.nav-links{grid-area:links; min-width:0}
.nav-links ul{display:flex; flex-wrap:wrap; gap:.15rem .35rem; list-style:none; margin:0; padding:0}
.nav-links a{
  display:block; padding:.4rem .7rem; border-radius:8px;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.97rem;
}
.nav-links a:hover{background:var(--red-tint); color:var(--red-dk)}
.nav-links a[aria-current="page"]{background:var(--red); color:#fff}
/* The two same-page anchors drop off below 560px so the two real pages fit on
   one line — see the note in header.php. */
@media (max-width:559px){
  .nav-sec{display:none}
  .nav-links a{font-size:.92rem; padding:.35rem .6rem}
}

@media (min-width:920px){
  /* Links and the button pair each span both rows, so the licence tucks under
     the brand in the left column instead of taking a band of its own. */
  .nav-in{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"brand links act" "lic links act";
  }
  .nav-links ul{justify-content:center}
}

/* ---------- wordmark ------------------------------------------------------- */
/* The body sets overflow-wrap:anywhere so long strings never blow out a
   container. That rule must NOT reach the wordmark — it will happily break
   "ROSAMOND" into "ROSAM / OND" the moment the header gets tight. */
.wordmark{
  display:grid; line-height:.9; font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.012em;
  overflow-wrap:normal; word-break:keep-all; white-space:nowrap;
}
.wordmark b{font-size:.92rem; color:var(--ink); font-weight:800}
.wordmark em{font-size:1.24rem; font-style:normal; color:var(--red); font-weight:800}
.wordmark i{font-size:.92rem; font-style:normal; color:var(--ink); font-weight:800}
.wordmark-inv b,.wordmark-inv i{color:#fff}
.wordmark-inv em{color:var(--yellow)}

/* ---------- mascot --------------------------------------------------------- */
/* ---------- mascot --------------------------------------------------------
   The school's own artwork. Its bonnet is the same red as the site's
   structure colour, so on the red hero it needs a light plate behind it or
   the bonnet reads as a hole straight through the car. The header is already
   white and needs nothing. */
.mascot{display:block; flex:none; height:auto}
.mascot-brand{width:auto; height:52px}
/* A plain plate. An asphalt-and-lane-line scene was tried here and read as
   messy — too much going on behind a drawing that is already busy. The plate's
   only job is to give the red bonnet a light ground so it stops looking like a
   hole through the car. It should be quiet.

   Keep it that way: the mascot IS the interest in this corner of the hero. */
.mascot-plate{
  width:100%; max-width:440px;
  border-radius:22px;
  padding:clamp(1.1rem,2.8vw,1.9rem);
  background:var(--paper);
  box-shadow:0 2px 0 rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.24);
  display:flex; justify-content:center;
}

.mascot-hero{width:100%; max-width:400px}

/* It reacts to you: a nudge forward when the brand link is hovered. */
.mascot{transition:transform .22s ease}
.brand:hover .mascot-brand{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .brand:hover .mascot-brand{transform:none}
}

/* ---------- buttons -------------------------------------------------------- */
/* Yellow is the action colour and appears nowhere else on the page. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.1;
  padding:.68rem 1.05rem; border-radius:10px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-go{
  color:var(--ink);
  background:linear-gradient(180deg,#FFE04A 0%,var(--yellow) 55%,#F3C400 100%);
  border-color:var(--yellow-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 2px 0 var(--yellow-dk), var(--shadow-1);
}
.btn-go:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 var(--yellow-dk), var(--shadow-2)}
.btn-go:active{transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
.btn-login{
  color:var(--ink); background:#fff; border-color:var(--ink);
  box-shadow:0 2px 0 rgba(22,18,15,.18);
}
.btn-login:hover{background:var(--sand); transform:translateY(-1px)}
.btn-login:active{transform:translateY(1px); box-shadow:none}
.btn-ghost{color:#fff; background:transparent; border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-lg{font-size:1.08rem; padding:.9rem 1.4rem}
.btn-block{width:100%}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .btn:hover,.btn:active{transform:none}
}

/* ---------- hero ----------------------------------------------------------- */
.hero{background:var(--red); color:#fff; border-bottom:6px solid var(--yellow)}
.hero-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(2rem,5vw,3.4rem) clamp(1rem,4vw,2rem);
  display:grid; gap:1.5rem clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:880px){
  .hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.hero h1{color:#fff; margin-bottom:.35em}
.eyebrow{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:.8rem; color:var(--yellow); margin:0 0 .7em;
}
.lede{font-size:1.12rem; color:#FDECEC; max-width:52ch}
.hero-art{display:flex; justify-content:center}

.pricetag{
  display:inline-flex; align-items:baseline; gap:.08em;
  background:#fff; color:var(--money); border-radius:12px;
  padding:.35rem .85rem .45rem; margin:.2em 0 1.1em;
  font-family:var(--display); font-variant-numeric:tabular-nums;
  box-shadow:0 3px 0 rgba(0,0,0,.14);
}
.pricetag .cur{font-size:1.15rem; font-weight:700; align-self:flex-start; margin-top:.35em}
.pricetag .amt{font-size:2.5rem; font-weight:800; letter-spacing:-.02em}
.pricetag .per{font-size:.9rem; font-weight:600; color:var(--muted); margin-left:.4rem;
  font-family:var(--text)}

/* Price rail: both prices and the cue in one object. A translucent plate keeps
   it reading as a deliberate component on the red rather than as a stray line
   of text, without giving either price a tag the other one lacks. */
.hero-price{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .9rem;
  width:fit-content; max-width:100%;
  margin:0 0 1.3rem; padding:.7rem 1rem;
  background:rgba(0,0,0,.17); border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.17);
  color:#FDECEC; font-size:1rem;
}
.hero-price .hp-item{display:inline-flex; align-items:baseline; gap:.4rem}
.hero-price .hp-item + .hp-item::before{
  content:"\00B7"; color:rgba(255,255,255,.55); margin-right:.5rem;
}
.hero-price b{
  font-family:var(--display); font-weight:800; font-size:1.45rem; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
/* The cue takes its own row rather than joining the middot chain. Left in the
   chain it wrapped, and the separator stranded itself at the start of the
   second line as a lone floating dot. Two rows is also the better read: the
   two prices are facts, the cue is the nudge. */
.hero-price .hp-cue{
  color:var(--yellow); font-weight:700;
  flex-basis:100%; margin-top:.2rem;
}
/* Must out-specify `.hp-item + .hp-item::before` above (0,3,1), or the
   separator this rule exists to remove simply wins and reappears. */
.hero-price .hp-item + .hp-item.hp-cue::before{content:none; margin:0}

.hero-act{display:flex; flex-wrap:wrap; gap:.7rem}
/* The parent-facing reassurance sits under the buttons, not above them: it
   answers the question a parent asks after deciding, not before. */
.hero-note{margin:1.15rem 0 0; font-size:.95rem; color:#F7DEDE; max-width:58ch}
.hero-note strong{color:#fff}

/* ---------- returning-student band ----------------------------------------- */
.returning{
  background:var(--ink); color:#F3EFEA;
}
.returning-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:.85rem clamp(1rem,4vw,2rem);
  display:flex; flex-wrap:wrap; gap:.7rem 1.2rem;
  align-items:center; justify-content:space-between;
}
.returning p{margin:0; font-size:1rem}
.returning strong{color:#fff}

/* ---------- sections ------------------------------------------------------- */
.band{padding:clamp(2.4rem,5.5vw,4rem) 0}
.band-sand{background:var(--sand); border-block:1px solid var(--line)}
.band h2{color:var(--ink)}
.band-head{max-width:60ch; margin-bottom:1.8rem}
.band-head p{color:var(--muted); font-size:1.08rem; margin:0}

/* ---------- the differentiation cards --------------------------------------
   Same badge system as everywhere else, but the badge sits BESIDE the heading
   and the card carries a red top edge. That is what stops this row, the bare
   feature rack and the numbered steps from reading as three goes at the same
   object — which is what made the page feel busy in the first place. */
.why{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1rem; grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){ .why{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem} }
.why li{
  background:var(--card); border:1px solid var(--line);
  border-top:3px solid var(--red);
  border-radius:var(--radius); padding:1.15rem 1.15rem 1.25rem;
  box-shadow:var(--shadow-1);
}
.why-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.75rem}
.why-head .pt-badge{margin-bottom:0; width:38px; height:38px; border-radius:10px}
.why h3{margin:0; font-size:1.06rem}
.why p{margin:0; color:var(--muted); font-size:.99rem}

/* ---------- feature rack ---------------------------------------------------
   This replaced a boxed 4-up grid (.points) that sat directly above the boxed
   4-up .steps grid. Two identical card grids back to back read as filler
   however good the words are, so the facts lost their card chrome and are
   divided by hairlines instead — a spec rack, not a second row of cards.
   The badge is doing the work of naming each item; it needs no box behind it. */
.feats{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1.6rem; grid-template-columns:minmax(0,1fr);
}
.feats li{padding-top:1.3rem; border-top:1px solid var(--line)}
@media (min-width:700px){
  .feats{gap:1.6rem 2rem; grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  /* Two columns: the practice-permit-tests and required-hours items both came
     out. A column count above the item count leaves a hairline dividing
     nothing. Constrained so two items do not stretch across the full 1120. */
  .feats{gap:0 2.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px}
  /* Vertical rules on wide screens: the row reads as one rack of four
     columns rather than four unrelated stacks. */
  .feats li{
    border-top:0; border-left:1px solid var(--line);
    padding:.15rem 1.5rem .15rem 1.5rem;
  }
  .feats li:first-child{border-left:0; padding-left:0}
  .feats li:last-child{padding-right:0}
}
.feats h3{margin:0 0 .3em}
.feats p{margin:0; color:var(--muted); font-size:.99rem}
/* One badge system: same box, same weight, recoloured by its surface. The
   icon inside depicts what the card is about — never a decorative glyph. */
.pt-badge{
  width:44px; height:44px; border-radius:12px; background:var(--red-tint);
  color:var(--red-dk); display:grid; place-items:center; margin-bottom:.85rem;
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  box-shadow:inset 0 0 0 1px rgba(200,22,29,.16);
}
.pt-num{font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ico{width:24px; height:24px; display:block}

/* ---------- numbered steps ------------------------------------------------- */
.steps{
  list-style:none; counter-reset:step; padding:0; margin:0;
  display:grid; gap:1.1rem; grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1060px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.steps li{
  counter-increment:step; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.15rem 1.25rem; box-shadow:var(--shadow-1);
}
.steps li::before{
  content:counter(step);
  position:absolute; top:-.85rem; left:1.15rem;
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--red); color:#fff;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  box-shadow:0 2px 0 var(--red-dk);
}
.steps h3{margin:0 0 .3em}
.steps p{margin:0; color:var(--muted); font-size:.99rem}
.steps a{font-weight:600}

/* ---------- package cards -------------------------------------------------- */
.cards{
  display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none;
}
/* Back to three across now that the 4-hour block and the DMV test service are
   off the menu: three cards in a 2x2 left an orphan in the second row. */
@media (min-width:820px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-2); overflow:hidden;
}
/* The header block is a fixed band so three cards line up even when one title
   wraps to two lines. Without this the bodies start at three different heights
   and the row reads as three unrelated boxes. */
.card-top{
  background:var(--red); color:#fff; padding:1rem 1.15rem;
  display:flex; align-items:center; gap:.6rem; min-height:4.4rem;
}
.card-top h3{margin:0; color:#fff; font-size:1.1rem}
/* The saving rides in the card header, beside the product it applies to — a
   page-wide "save" banner would read as a site-wide discount instead. Yellow
   is the action colour, so this is the one non-button that may borrow it: it
   is money, and money is what the yellow is for on this page. */
.card-flag{
  margin-left:auto; flex:none;
  background:var(--yellow); color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:.8rem;
  letter-spacing:.02em; white-space:nowrap;
  padding:.3rem .55rem; border-radius:999px;
  box-shadow:0 1px 0 var(--yellow-dk);
}
/* The bundle carries a little more weight than the two cards beside it. */
.card-lead{box-shadow:var(--shadow-2), 0 0 0 2px var(--yellow)}
.card-body{padding:1.15rem; display:flex; flex-direction:column; flex:1}
.card-list{list-style:none; padding:0; margin:0 0 1.2rem}
.card-list li{position:relative; padding-left:1.85rem; margin-bottom:.55rem; font-size:1rem}
/* Ring AND tick. The ring on its own was an empty circle — it read as an
   unticked radio button, i.e. as a feature you have NOT got, which is the
   opposite of what a package list is for. Same ring+tick as the shield icon,
   so the site has one check mark and not two. */
.card-list li::before{
  content:""; position:absolute; left:0; top:.3rem;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--red-tint);
  box-shadow:inset 0 0 0 1.5px var(--red);
}
.card-list li::after{
  content:""; position:absolute; left:.42rem; top:.52rem;
  width:.3rem; height:.58rem;
  border:solid var(--red-dk); border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
/* The price leads the card body now, so it is set as a tag rather than as a
   line of large text: tinted plate, superscript currency, tabular figures, and
   the unit ("One two-hour session") tied to it so a number is never stranded
   without its quantity. Same money treatment as the hero .pricetag. */
.card-price{
  margin:0 0 1rem; padding:.7rem .85rem;
  background:var(--sand); border:1px solid var(--line); border-radius:10px;
  display:flex; align-items:baseline; gap:.1rem; flex-wrap:wrap;
  font-family:var(--display); font-weight:800; color:var(--money);
  font-variant-numeric:tabular-nums;
}
.card-price .cur{font-size:1.05rem; align-self:flex-start; margin-top:.35em}
.card-price .amt{font-size:2rem; letter-spacing:-.02em}
.card-price .meta{
  font-family:var(--text); font-size:.9rem; font-weight:600; color:var(--muted);
  margin-left:.55rem; flex:1 1 100%;
}
/* The unit always takes its own row. Allowed to sit beside the figure it fit
   on one line for the short units and wrapped for the long ones, so the three
   price plates in a row came out at two different heights. */
/* An unknown price is a deliberate state, not a disabled one. In muted grey it
   read as a field that had failed to load; in red-dk it reads as an
   instruction, which is what it is. */
.card-price.is-call{
  font-family:var(--text); font-size:1.12rem; font-weight:700;
  color:var(--red-dk); letter-spacing:0; align-items:center;
}
.card-price.is-call .meta{margin-left:0}
@media (min-width:420px){ .card-price.is-call .meta{margin-left:.55rem} }
/* The list grows to fill, so the CTA sits on the same baseline in all four
   cards however many lines a selling point wraps to. */
.card-list{flex:1}
.card-cta{margin:auto 0 0}

/* ---------- teaser --------------------------------------------------------- */
.teaser{
  display:grid; gap:1.4rem; align-items:center;
  grid-template-columns:minmax(0,1fr);
  background:var(--card); border:1px solid var(--line); border-left:6px solid var(--yellow);
  border-radius:var(--radius); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow-1);
}
@media (min-width:820px){ .teaser{grid-template-columns:minmax(0,1fr) auto} }
.teaser h2{margin-bottom:.3em}
.teaser p{margin:0; color:var(--muted); max-width:60ch}

/* ---------- FAQ ------------------------------------------------------------ */
.qa{display:grid; gap:1.4rem; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .qa{grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:2.5rem}
  .qa-head{align-self:start}
}
.qa-head h2{margin:0}
.faq{display:grid; gap:.65rem; max-width:820px}
.qa .faq{max-width:none}
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:.2rem .2rem .2rem 0;
}
.faq summary{
  cursor:pointer; list-style:none; padding:.9rem 1.1rem .9rem 1.15rem;
  font-family:var(--display); font-weight:700; font-size:1.04rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--red); font-size:1.4rem; line-height:1; flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 1.15rem 1rem; color:var(--muted)}

/* ---------- contact -------------------------------------------------------- */
.contact-grid{
  display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr);
}
/* align-items:start, not stretch. Email and opening hours are unknown, so the
   details card is short; stretching it to match the taller CTA card left a
   block of empty white inside a bordered box, which reads as a missing row
   rather than as a card that simply has less in it. */
@media (min-width:820px){
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
}
.contact-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow-1);
}
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{display:flex; gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:0}
.contact-list .lbl{
  font-family:var(--display); font-weight:700; color:var(--muted);
  font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
  flex:none; width:5.6rem; padding-top:.18rem;
}
.contact-list .val{min-width:0}
/* ---------- credential seal -------------------------------------------------
   The one red-tinted band on the site. It closes the page immediately above
   the footer and states the licence once, in place of the four "why this
   school" cards that used to interrupt the middle of the page. Because it is
   the only surface with this ground, it reads as a stamp rather than as
   another content block — which is the whole reason it is not a card. */
.seal{
  background:var(--red-tint);
  border-top:1px solid rgba(200,22,29,.18);
  padding:clamp(1.6rem,3.5vw,2.2rem) 0;
}
.seal-in{
  display:flex; align-items:center; gap:1.1rem;
  flex-wrap:wrap;
}
.seal-badge{
  width:52px; height:52px; border-radius:50%; flex:none;
  background:var(--paper); color:var(--red);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px var(--red), 0 1px 2px rgba(22,18,15,.08);
}
.seal-badge .ico{width:28px; height:28px}
.seal-copy{min-width:0; flex:1 1 22rem}
.seal-copy h2{
  margin:0 0 .15em; font-size:1.14rem; color:var(--red-dk);
  text-transform:uppercase; letter-spacing:.05em;
}
.seal-copy p{margin:0; color:var(--muted); font-size:1rem; max-width:64ch}

.tel-big{
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums;
}
.tel-big:hover{color:var(--red-dk)}

/* ---------- footer --------------------------------------------------------- */
.foot{background:var(--red-dk); color:#F6E7E7; margin-top:0}
.foot-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,2rem);
  display:grid; gap:1.8rem; grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){ .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .foot-in{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))} }
.foot h2{font-size:.85rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--yellow); margin:0 0 .8em}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:.55rem}
.foot a{color:#fff; text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-note{color:#F0D6D6; margin:.9rem 0 0; max-width:38ch; font-size:.98rem}
.foot-phone{font-family:var(--display); font-weight:800; font-size:1.2rem;
  font-variant-numeric:tabular-nums}
.foot-legal{border-top:1px solid rgba(255,255,255,.22)}
.foot-legal p{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:1rem clamp(1rem,4vw,2rem); font-size:.9rem; color:#EFD4D4;
}