/* ===========================================================================
   Sapphire Driving School — Leicester
   Palette derives from two things the business already owns: the sapphire in
   the name, and the red of a UK learner plate. No cream, no terracotta.
   =========================================================================== */

:root{
  --ink:        #070D1F;
  --ink-2:      #0C1530;
  --sapphire-d: #10205C;
  --sapphire:   #1E3FA8;
  --sapphire-l: #3D6BE8;
  --plate:      #E4002B;
  --plate-soft: #FF3355;
  --chalk:      #EEF2FB;
  --chalk-2:    #DCE4F5;
  --slate:      #8794B4;
  --slate-d:    #55618044;

  --face-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --face-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --shell: 1220px;
  --pad:   clamp(20px, 5vw, 40px);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --r-sm: 8px; --r: 14px; --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--face-body);
  font-size:clamp(16px,.55vw + 14.4px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--face-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}
h2{ font-size:clamp(30px,4.4vw,54px); }
h3{ font-size:clamp(20px,1.6vw,25px); letter-spacing:-.025em; line-height:1.15; }
p{ margin:0 0 var(--s2); text-wrap:pretty; }
a{ color:inherit; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--plate-soft);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--plate); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

.eyebrow{
  font-family:var(--face-mono);
  font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--sapphire-l);
  margin:0 0 var(--s2);
}
.band-light .eyebrow{ color:var(--sapphire); }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn{
  --btn-bg:transparent; --btn-fg:var(--chalk); --btn-bd:#ffffff2e;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:999px;
  font:inherit; font-weight:600; font-size:16px; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s var(--ease), background-color .16s var(--ease),
             border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-call{
  --btn-bg:var(--plate); --btn-fg:#fff; --btn-bd:var(--plate);
  box-shadow:0 6px 22px -8px #e4002bcc;
}
.btn-call:hover{ --btn-bg:var(--plate-soft); --btn-bd:var(--plate-soft);
  box-shadow:0 12px 30px -10px #e4002bcc; }

.btn-ghost:hover{ --btn-bd:var(--chalk); background:#ffffff10; }
.band-light .btn-ghost{ --btn-fg:var(--sapphire-d); --btn-bd:#10205c33; }
.band-light .btn-ghost:hover{ --btn-bd:var(--sapphire-d); background:#10205c0d; }

.btn-lg{ min-height:58px; padding:0 30px; font-size:17px; }

/* ── top bar ─────────────────────────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:80;
  background:#070d1ff2;
  border-bottom:1px solid #ffffff14;
}
.topbar-in{ display:flex; align-items:center; gap:var(--s3); min-height:70px; }

.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand-plate{
  display:grid; place-items:center;
  width:36px; height:30px; flex:none;
  background:#fff; color:var(--plate);
  border-radius:5px;
  font-family:var(--face-display); font-weight:800; font-size:21px; line-height:1;
  letter-spacing:0;
}
.brand-name{
  font-family:var(--face-display); font-weight:700; font-size:20px;
  letter-spacing:-.03em; line-height:1.05;
  display:flex; flex-direction:column;
}
.brand-sub{
  font-family:var(--face-mono); font-weight:500; font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
}

.topnav{ display:none; gap:var(--s3); }
.topnav a{
  text-decoration:none; font-size:15px; font-weight:500; color:var(--slate);
  transition:color .16s var(--ease);
}
.topnav a:hover{ color:var(--chalk); }

.topbar-call{ display:none; }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero{ position:relative; padding:clamp(40px,5vw,60px) 0 clamp(52px,6vw,80px); overflow:hidden; }
.hero-glow{
  position:absolute; inset:-30% -10% auto -25%; height:150%;
  background:
    radial-gradient(48% 42% at 22% 18%, #1e3fa866 0%, transparent 68%),
    radial-gradient(38% 34% at 82% 6%,  #3d6be840 0%, transparent 70%);
  pointer-events:none;
}
.hero-in{ position:relative; display:grid; gap:clamp(32px,4vw,48px); align-items:stretch; }

h1{
  font-size:clamp(44px,6.2vw,82px);
  line-height:.94;
  letter-spacing:-.05em;
  margin:0 0 var(--s3);
}
.h1-num{
  font-family:var(--face-mono); font-weight:700;
  font-size:.86em; letter-spacing:-.04em;
  color:var(--slate);
}
.h1-em{ color:var(--plate-soft); display:inline-block; }

/* the signature: fifteen permitted faults, drawn as a tally */
.tally{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:0 0 var(--s4);
}
.tick{
  width:15px; height:26px; flex:none;
  border:1.5px solid #ffffff30; border-radius:3px;
  background:#ffffff08;
  position:relative;
}
.tick.on{
  border-color:var(--plate); background:var(--plate);
  box-shadow:0 0 18px -3px #e4002bd0;
}
.tick.on::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(#ffffff4a, transparent 60%);
  border-radius:2px;
}
.tally-note{
  font-family:var(--face-mono); font-style:normal;
  font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); margin-left:6px;
}

.lede{ font-size:clamp(17px,1.05vw,19px); color:#c9d3ea; max-width:52ch; margin-bottom:var(--s3); }
.lede strong{ color:var(--chalk); font-weight:600; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4); }

.trust{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  list-style:none; margin:0; padding:var(--s3) 0 0;
  border-top:1px solid #ffffff1a;
}
.trust li{ display:flex; flex-direction:column; }
.trust b{
  font-family:var(--face-display); font-size:30px; font-weight:800;
  letter-spacing:-.04em; line-height:1;
}
.trust span{
  font-family:var(--face-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--slate); margin-top:5px;
}

.hero-art{ position:relative; margin:0; }
.hero-art img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg);
}
/* On wide screens the art fills its column instead of floating in the middle.
   The image is taken out of flow so it can stretch to whatever height the copy
   column sets — height:100% on an in-flow child has nothing to resolve against. */
@media (min-width:900px){
  .hero-art{ min-height:460px; }
  .hero-art img{
    position:absolute; inset:0;
    width:100%; height:100%; aspect-ratio:auto;
    /* bias the tall crop toward the wheel and hands, not the forearm */
    object-position:50% 28%;
  }
}
/* Bottom-anchored so it only seats the caption. A 150deg gradient tuned for a
   4:3 box turns almost black once the column stretches past 700px tall. */
.hero-art::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg);
  background:
    linear-gradient(to bottom, #070d1f00 55%, #070d1fb0 88%, #070d1fd9 100%),
    linear-gradient(140deg, #1e3fa833, transparent 45%);
  pointer-events:none;
}
.hero-art figcaption{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
  background:#070d1feb;
  border:1px solid #ffffff1f; border-radius:var(--r);
  padding:14px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.hero-art figcaption b{
  font-family:var(--face-display); font-weight:700; font-size:16px; letter-spacing:-.02em;
}
.stars{ color:#FFC531; letter-spacing:.1em; font-size:15px; flex:none; }

/* ── bands ───────────────────────────────────────────────────────────────── */

.band{ padding:clamp(64px,8vw,112px) 0; position:relative; }
.band-light{ background:var(--chalk); color:var(--ink); }
.band-light .sec-sub{ color:#4d5878; }

.sec-head{ max-width:62ch; margin-bottom:clamp(36px,4.5vw,60px); }
.sec-sub{ color:#a6b2cd; font-size:clamp(16px,1vw,18px); margin:var(--s2) 0 0; }

/* ── record ──────────────────────────────────────────────────────────────── */

.record{ background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
.records{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.rec{
  display:grid; gap:var(--s2);
  padding:clamp(20px,2.4vw,28px);
  background:#ffffff07;
  border:1px solid #ffffff14;
  border-radius:var(--r-lg);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.rec:hover{ border-color:#ffffff2b; background:#ffffff0c; }

/* the tally stays horizontal at every width — read as one row of fifteen, the
   way the fault sheet itself reads */
.rec-tally{ display:flex; gap:5px; flex-wrap:wrap; }
.rec-tally .tick{ width:12px; height:21px; border-radius:2px; }

.rec-count{
  font-family:var(--face-mono); font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
  margin:0 0 10px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.rec-count b{
  font-family:var(--face-display); font-size:34px; font-weight:800;
  letter-spacing:-.04em; color:var(--plate-soft); line-height:1;
}
.rec-quote{
  font-family:var(--face-display); font-weight:500;
  font-size:clamp(18px,1.5vw,23px); line-height:1.34; letter-spacing:-.025em;
  margin:0 0 10px; color:var(--chalk);
}
.rec-meta{
  font-family:var(--face-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin:0;
}
.record-foot{
  margin:var(--s4) 0 0; font-size:14px; color:var(--slate); max-width:62ch;
}

/* ── method cards ────────────────────────────────────────────────────────── */

.cards{ display:grid; gap:var(--s3); }
.card{
  background:#fff;
  border:1px solid var(--chalk-2);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);
}
.card-mark{
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:12px; background:var(--sapphire-d); margin-bottom:var(--s3);
}
.card-mark svg{ width:23px; height:23px; fill:none; stroke:#fff; stroke-width:1.9; }
.card h3{ margin-bottom:10px; color:var(--sapphire-d); }
.card p{ margin:0; color:#4d5878; font-size:16px; }

/* ── instructors ─────────────────────────────────────────────────────────── */

.people{ display:grid; gap:var(--s3); }
.person{
  display:grid; gap:var(--s3);
  background:#ffffff07; border:1px solid #ffffff14;
  border-radius:var(--r-lg); overflow:hidden;
}
.person-photo{ aspect-ratio:4/3; }
.person-body{ padding:0 clamp(20px,2.4vw,28px) clamp(24px,2.6vw,30px); }
.person-role{
  font-family:var(--face-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sapphire-l);
  margin:6px 0 var(--s2);
}
.person-body > p:not(.person-role):not(.person-quote){ color:#a6b2cd; font-size:16px; }
.person-quote{
  margin:var(--s2) 0 0; padding-left:var(--s2);
  border-left:2px solid var(--plate);
  font-family:var(--face-display); font-weight:500; font-size:17px;
  line-height:1.35; letter-spacing:-.02em; color:var(--chalk);
}

/* placeholder blocks — obvious on purpose, they're for the owner to replace */
.ph{
  background:
    repeating-linear-gradient(45deg, #ffffff0d 0 12px, transparent 12px 24px),
    var(--sapphire-d);
  border-bottom:1px solid #ffffff14;
  display:grid; place-items:center; position:relative;
}
.ph::after{
  content:attr(data-ph);
  font-family:var(--face-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#ffffff70;
  border:1px dashed #ffffff40; border-radius:6px; padding:8px 14px;
}
.ph-price{ color:var(--sapphire-d); position:relative; }
.band-light .ph-price::after{
  content:"to confirm"; position:absolute; left:50%; top:calc(100% + 2px);
  transform:translateX(-50%);
  font-family:var(--face-mono); font-size:9px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#98a3c0; white-space:nowrap;
}

/* ── lessons ─────────────────────────────────────────────────────────────── */

.tiers{ display:grid; gap:var(--s3); align-items:start; }
.tier{
  background:#fff; border:1px solid var(--chalk-2); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px); position:relative;
}
.tier h3{ color:var(--sapphire-d); }
.tier-feature{
  border-color:var(--sapphire); border-width:2px;
  box-shadow:0 22px 50px -28px #10205c80;
}
.tier-flag{
  position:absolute; top:-13px; left:clamp(24px,2.6vw,32px);
  background:var(--sapphire); color:#fff;
  font-family:var(--face-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}
.price{
  font-family:var(--face-display); font-weight:800;
  font-size:clamp(34px,3.4vw,44px); letter-spacing:-.045em; line-height:1;
  color:var(--sapphire-d);
  margin:var(--s2) 0 var(--s3);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.price em{
  font-family:var(--face-mono); font-style:normal;
  font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:#7d88a6;
}
.tier ul{ list-style:none; margin:0 0 var(--s4); padding:0; display:grid; gap:10px; }
.tier li{
  position:relative; padding-left:26px; color:#4d5878; font-size:16px; line-height:1.5;
}
.tier li::before{
  content:""; position:absolute; left:0; top:8px;
  width:14px; height:8px;
  border-left:2px solid var(--plate); border-bottom:2px solid var(--plate);
  transform:rotate(-45deg);
}
.tier .btn{ width:100%; }

/* ── reviews ─────────────────────────────────────────────────────────────── */

.reviews{ background:var(--ink-2); }
.quotes{ display:grid; gap:var(--s3); }
.quote{
  margin:0; padding:clamp(24px,2.6vw,32px);
  background:#ffffff07; border:1px solid #ffffff14; border-radius:var(--r-lg);
}
.quote .stars{ display:block; margin-bottom:var(--s2); }
.quote p{
  font-family:var(--face-display); font-weight:500;
  font-size:clamp(17px,1.35vw,21px); line-height:1.4; letter-spacing:-.022em;
  margin:0 0 var(--s2);
}
.quote cite{
  font-family:var(--face-mono); font-style:normal; font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate);
}
.reviews-cta{ margin:var(--s5) 0 0; }

/* ── area ────────────────────────────────────────────────────────────────── */

.area{ background:linear-gradient(180deg, var(--ink-2), var(--ink)); }
.area-in{ display:grid; gap:clamp(32px,4.5vw,56px); align-items:center; }
.area-art{ margin:0; }
.area-art img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg);
}
.area-copy p{ color:#a6b2cd; }
.area-copy strong{ color:var(--chalk); font-weight:600; }
.area-copy h2{ margin-bottom:var(--s3); }

.facts{ margin:var(--s4) 0 0; display:grid; gap:0; }
.facts > div{
  display:grid; grid-template-columns:minmax(110px,.38fr) 1fr; gap:var(--s2);
  padding:14px 0; border-top:1px solid #ffffff14;
}
.facts dt{
  font-family:var(--face-mono); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
}
.facts dd{ margin:0; font-size:16px; font-weight:500; }

/* ── contact ─────────────────────────────────────────────────────────────── */

.contact{ position:relative; overflow:hidden; }
.contact .hero-glow{ inset:auto -20% -40% -20%; height:120%; }
.contact-in{ position:relative; display:grid; gap:clamp(36px,5vw,60px); align-items:start; }
.contact-copy h2{ margin-bottom:var(--s3); }
.contact-copy .lede{ margin-bottom:var(--s4); }
.contact-alt{ margin:var(--s3) 0 0; font-size:15px; color:var(--slate); }
.contact-alt a{ color:var(--chalk); text-underline-offset:3px; }
.ph-inline{ text-decoration-style:dashed; opacity:.75; }

.hours-card{
  background:#ffffff07; border:1px solid #ffffff14; border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,30px); overflow:hidden;
}
.hours-card h3{ margin-bottom:var(--s3); }
.hours{ width:100%; border-collapse:collapse; }
.hours th,.hours td{ padding:10px 0; text-align:left; font-weight:400; font-size:15px; }
.hours th{ color:var(--slate); font-weight:500; }
.hours td{ text-align:right; font-family:var(--face-mono); font-size:13.5px; font-variant-numeric:tabular-nums; }
.hours tr + tr th,.hours tr + tr td{ border-top:1px solid #ffffff12; }
.hours-art{ margin:var(--s3) calc(-1 * clamp(24px,2.6vw,30px)) calc(-1 * clamp(24px,2.6vw,30px)); }
.hours-art img{
  width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 30%;
}

/* ── footer + sticky call bar ────────────────────────────────────────────── */

.foot{ background:#04091644; border-top:1px solid #ffffff14; padding:var(--s6) 0 calc(var(--s6) + 70px); }
.foot-in{ display:grid; gap:var(--s4); }
.foot-addr{ margin:var(--s3) 0 0; font-size:15px; color:var(--slate); line-height:1.7; }
.foot-addr a{ color:var(--chalk); }
.foot-nav{ display:flex; flex-wrap:wrap; gap:12px var(--s3); }
.foot-nav a{ font-size:15px; color:var(--slate); text-decoration:none; }
.foot-nav a:hover{ color:var(--chalk); }
.foot-fine{
  margin:0; padding-top:var(--s3); border-top:1px solid #ffffff14;
  font-size:13px; color:#6d7a99; grid-column:1/-1;
}

/* Touch targets. Padding on an inline link grows the hit area without changing
   the line box, so the text sits exactly where it did but a thumb can land on
   it. The footer phone number is a real call button and was 18px tall. */
.foot-nav a,
.foot-addr a,
.contact-alt a,
.topnav a{ padding-block:13px; }
.foot-nav{ gap:0 var(--s3); }
.foot-nav a{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; }
.brand{ min-height:44px; }

.callbar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:90;
  display:flex; align-items:center; justify-content:center; gap:11px;
  min-height:58px; padding:0 20px;
  background:var(--plate); color:#fff;
  border-radius:999px; text-decoration:none;
  font-size:16.5px; letter-spacing:-.01em;
  box-shadow:0 12px 34px -10px #000, 0 0 0 1px #ffffff26 inset;
  transform:translateY(140%);
  transition:transform .3s var(--ease);
}
.callbar.show{ transform:translateY(0); }
.callbar svg{ width:20px; height:20px; fill:currentColor; flex:none; }
.callbar b{ font-weight:700; }

/* ── reveal ──────────────────────────────────────────────────────────────── */

.js-reveal .reveal{ opacity:0; transform:translateY(20px); }
.js-reveal .reveal.in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .d1.in{ transition-delay:.06s }
.js-reveal .d2.in{ transition-delay:.12s }
.js-reveal .d3.in{ transition-delay:.18s }
.js-reveal .d4.in{ transition-delay:.24s }
.js-reveal .d5.in{ transition-delay:.30s }

@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ opacity:1; transform:none; }
  .btn:hover{ transform:none; }
  .callbar{ transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ===========================================================================
   Breakpoints
   =========================================================================== */

@media (min-width:600px){
  .cards,.tiers,.quotes,.people{ grid-template-columns:repeat(2,1fr); }
  .foot-in{ grid-template-columns:1fr auto; align-items:start; }
}

@media (min-width:900px){
  .topnav{ display:flex; }
  .hero-in{ grid-template-columns:1.05fr .95fr; }
  .area-in{ grid-template-columns:.95fr 1.05fr; }
  .contact-in{ grid-template-columns:1.1fr .9fr; }
  .cards,.tiers{ grid-template-columns:repeat(3,1fr); }
  .person-body{ padding:0 clamp(24px,2.6vw,30px) clamp(26px,2.6vw,32px); }
  .callbar{ display:none; }
  .topbar-call{ display:inline-flex; }
  .foot{ padding-bottom:var(--s6); }
}

@media (min-width:1100px){
  .quotes{ grid-template-columns:repeat(2,1fr); }
  .records{ gap:var(--s3); }
}

/* very small phones: keep the tally on one line by shrinking it, never wrap ugly */
@media (max-width:380px){
  .tick{ width:12px; height:22px; }
  .tally{ gap:5px; }
  .btn-lg{ width:100%; }
}

/* Preview marker. This page is a spec build about a real business, so it says
   so plainly and is served noindex — it must never be mistaken for, or compete
   with, the school's own presence. Delete both when the school takes it on. */
.foot-preview{ color:var(--chalk); font-weight:600; }