/* ==========================================================================
   Les' Autos — The Mobile Technician
   Design system. Mobile-first: base styles are phone, media queries scale up.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Palette, pulled from the logo */
  --cream:       #F5EEDF;  /* page canvas */
  --cream-deep:  #E8DCC0;  /* alternating band, the logo's banner colour */
  --blue:        #2E5AAC;  /* primary — the dungarees */
  --blue-dark:   #24417F;
  --navy:        #1B3A6B;  /* the logo's outer badge */
  --ink:         #12203A;  /* body text */
  --ink-soft:    #4A5875;
  --red:         #B3282D;  /* accent — the wheel spokes */
  --white:       #FFFFFF;
  --line:        rgba(18, 32, 58, 0.12);

  /* Type */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --marker:  "Caveat", "Comic Sans MS", cursive;

  /* Shape — echoes the inspo: pills, soft cards, softer images */
  --r-pill: 999px;
  --r-card: 22px;
  --r-img:  28px;

  /* Rhythm */
  --gut: 20px;
  --sec: 68px;          /* vertical section padding */
  --maxw: 1180px;

  --shadow-sm: 0 2px 8px rgba(18, 32, 58, 0.06);
  --shadow-md: 0 10px 30px rgba(18, 32, 58, 0.10);
  --shadow-lg: 0 22px 50px rgba(18, 32, 58, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Measured heights of the two fixed bands either side of the hero, so the
     hero can size itself to fill exactly the remaining viewport. */
  --header-h: 69px;
  /* A few px larger than the marquee actually is (67px), so the hero reserves
     slack. Android browsers with a bottom address bar can report an svh a
     little taller than the genuinely visible area, which was clipping the
     marquee on an S24. */
  --marquee-h: 76px;
}

@media (min-width: 768px)  { :root { --gut: 32px; --sec: 96px; } }
@media (min-width: 900px)  { :root { --header-h: 85px; --marquee-h: 74px; } }
@media (min-width: 1100px) { :root { --gut: 48px; --sec: 120px; } }
@media (min-width: 1100px) { .nav-desktop { gap: 28px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Opaque, so iOS 26 Safari always has a colour to sample for the status bar.
     Never put a transparent position:fixed layer against the top edge here. */
  background: var(--cream);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}

/* Fluid display scale. The inspo gets its personality from the size jump
   between heading and body, not from weight — same trick, louder face. */
h1 { font-size: clamp(2.35rem, 8.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 6.4vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 4.2vw, 1.9rem); }
h4 { font-size: clamp(1.1rem, 3.5vw, 1.4rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Headings sit tight to their own line-height, so the paragraph that follows
   needs explicit air or it reads as one clumped block. */
h1 + .lede, h2 + .lede, h1 + p, h2 + p { margin-top: 20px; }
h3 + p, h4 + p { margin-top: 12px; }
@media (min-width: 768px) { h1 + .lede, h2 + .lede, h1 + p, h2 + p { margin-top: 26px; } }

/* --- Layout helpers ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec); position: relative; }
.section--band  { background: var(--cream-deep); }
.section--navy  { background: var(--navy); color: var(--cream); }
.section--blue  { background: var(--blue); color: var(--white); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section--navy .eyebrow, .section--blue .eyebrow { color: var(--cream-deep); }

.lede {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 56ch;
}
.section--navy .lede, .section--blue .lede { color: rgba(245, 238, 223, 0.82); }

.aside-note {
  font-family: var(--marker);
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--blue);
  line-height: 1.3;
  transform: rotate(-1.5deg);
}

.section-head { margin-bottom: 40px; }
@media (min-width: 768px) { .section-head { margin-bottom: 56px; } }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.25s, color 0.25s,
              border-color 0.25s, box-shadow 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.btn--primary { background: var(--red); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #9C2126; box-shadow: var(--shadow-md); }

.btn--blue { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--blue:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(18, 32, 58, 0.28); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.btn--light { background: var(--cream); color: var(--navy); }
.btn--light:hover { background: var(--white); }

.btn--lg { padding: 18px 34px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn .ico { width: 18px; height: 18px; flex: none; }

/* --- Header ------------------------------------------------------------- */
/* Solid background on purpose. A backdrop-filter here would (a) make the
   header a containing block for the fixed nav sheet and collapse it, and
   (b) disqualify it from iOS 26 status-bar colour sampling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s;
}
.site-header.is-stuck {
  box-shadow: 0 2px 20px rgba(18, 32, 58, 0.08);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}
@media (min-width: 900px) { .header-inner { height: 84px; } }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
/* Transparent PNG on the cream header — no tile, no rounding, no box. */
.brand img { width: 46px; height: 46px; object-fit: contain; }
/* Wordmark is optically centred against the logo: Anton sits high in its box,
   so the stack is centred as a unit rather than baseline-aligned. */
.brand-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; line-height: 1; }
.brand-name { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; color: var(--navy); line-height: 0.9; }
.brand-tag { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); line-height: 1; }

.nav-desktop { display: none; }
@media (min-width: 900px) {
  /* Six links, a logo and a call button is a lot for 900px — the gap opens up
     once there is room, rather than letting the nav wrap to a second line. */
  .nav-desktop { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
  .nav-desktop a { white-space: nowrap; }
  .nav-desktop a {
    position: relative;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding-block: 6px;
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease);
  }
  .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-flex; } }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 12px;
  background: var(--navy);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  flex: none;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav sheet — a direct child of body, never nested inside a
   filtered/transformed ancestor, so it sizes against the viewport. */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--navy);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  /* "safe" centring plus scroll: with six links a short phone can overflow,
     and plain centring would push the first link off the top where it cannot
     be reached. */
  justify-content: safe center;
  overflow-y: auto;
  padding: 90px var(--gut) 40px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0.5s;
}
.nav-sheet.is-open { transform: translateY(0); visibility: visible; }
@media (min-width: 900px) { .nav-sheet { display: none; } }

.nav-sheet a {
  font-family: var(--display);
  font-size: clamp(2rem, 10vw, 3rem);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 10px;
  border-bottom: 1px solid rgba(245, 238, 223, 0.14);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.2s;
}
.nav-sheet a:active { color: var(--cream-deep); }
.nav-sheet.is-open a { opacity: 1; transform: translateY(0); }
.nav-sheet.is-open a:nth-child(1) { transition-delay: 0.12s; }
.nav-sheet.is-open a:nth-child(2) { transition-delay: 0.18s; }
.nav-sheet.is-open a:nth-child(3) { transition-delay: 0.24s; }
.nav-sheet.is-open a:nth-child(4) { transition-delay: 0.30s; }
.nav-sheet.is-open a:nth-child(5) { transition-delay: 0.36s; }
.nav-sheet.is-open a:nth-child(6) { transition-delay: 0.42s; }

/* Short phones: shrink the menu so all six links and both buttons still fit
   on one screen without scrolling. */
@media (max-height: 720px) {
  .nav-sheet { padding-top: 78px; }
  .nav-sheet a { font-size: clamp(1.5rem, 7vw, 2.1rem); padding-block: 5px; }
  .nav-sheet-foot { margin-top: 20px; }
}

.nav-sheet-foot { margin-top: 32px; display: grid; gap: 12px; }
.nav-sheet-foot .btn { width: 100%; }

body.nav-open { overflow: hidden; }

/* --- Hero --------------------------------------------------------------- */
/* The hero is sized so that it plus the header plus the marquee fill exactly
   one viewport — the services marquee then sits on the fold when you land,
   which is what tells a first-time visitor there is more below. min-height,
   not height, so it can still grow on a very small phone rather than clip. */
.hero {
  position: relative;
  padding-top: 24px;
  padding-bottom: 0;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h) - var(--marquee-h));
  display: flex;
  align-items: center;
}
@media (min-width: 900px) { .hero { padding-top: 22px; } }

.hero-grid { display: grid; gap: 8px; align-items: end; width: 100%; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 30px; }
}

.hero-copy { position: relative; z-index: 2; }

.hero h1 { margin-bottom: 18px; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  animation: rise 0.9s var(--ease) forwards;
}
.hero h1 .line:nth-child(1) > span { animation-delay: 0.05s; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.16s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.27s; }
.hero h1 .accent { color: var(--red); }

@keyframes rise { to { transform: translateY(0); } }

.hero-lede { max-width: 44ch; margin-bottom: 22px; }

.hero-actions { display: grid; gap: 12px; margin-bottom: 20px; }
@media (min-width: 480px) { .hero-actions { grid-auto-flow: column; justify-content: start; } }

/* Ticks rather than bullets — each line is a claim being confirmed, not an
   item in a list. The rating and the two tick claims are separate elements so
   that on phones they can be placed independently; on desktop the wrapper
   keeps them on one line exactly as before. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding-bottom: 18px;
  margin: 0;
}
.hero-rating { display: flex; align-items: center; gap: 7px; margin: 0; }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-proof li { display: flex; align-items: center; gap: 7px; }
.hero-trust .stars { color: #E8A33D; letter-spacing: 2px; }
.tick {
  flex: none;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}
.tick svg { width: 10px; height: 10px; }

/* The character art is a full-body standing figure at roughly 3:1, so every
   figure on the site is sized by HEIGHT with width:auto. Sizing by width would
   make a tall pose enormous and a cropped one tiny — height keeps Les at a
   consistent human scale everywhere he appears. */
/* width:max-content so the box hugs the image. The badge and the disc are
   positioned against Les himself rather than against the whole column — with a
   full-width box the badge floated off in empty space beside him. */
.hero-figure {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* Blue disc behind Les, echoing the logo badge. Centred on him, and wider than
   his box on purpose so it reads as a ground he stands on. */
.hero-figure::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 128%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 55%, var(--blue) 0%, var(--blue) 62%, transparent 63%);
  transform: translateX(-50%);
  opacity: 0.16;
  border-radius: 50%;
}
.hero-figure img {
  position: relative;
  height: clamp(285px, 36vh, 600px);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 18px 26px rgba(18, 32, 58, 0.22));
  animation: hero-in 1s var(--ease) 0.25s both;
}
/* On a phone the full 3:1 standing figure is only ~90px wide, which makes him
   look weedy. Crop to waist-up instead: same height, far more presence, and the
   crop lands on the marquee edge so it reads as him standing behind the fold. */
/* Phone hero. The budget is one screen minus the header and the marquee, and
   the priority order is: what this is, one obvious way to act, proof, then
   Les himself at a size where he actually reads as a person.
   So there is exactly ONE button — a full-width thumb-sized call — and the
   secondary route drops to a text link, which buys back the ~50px that lets
   the character stay big. */
@media (max-width: 899px) {
  .hero h1 { font-size: clamp(2.2rem, 8.6vw, 2.9rem); }
  .hero-lede { font-size: 0.94rem; line-height: 1.5; margin-bottom: 14px; max-width: 40ch; }

  .hero-actions { grid-template-columns: 1fr; gap: 2px; margin-bottom: 10px; }
  .hero-actions .btn--primary { width: 100%; padding: 16px 20px; font-size: 1rem; }
  .hero-secondary {
    justify-self: start;
    border: 0;
    background: none;
    padding: 6px 2px;
    font-size: 0.88rem;
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .hero-secondary:hover { background: none; color: var(--red); transform: none; }

  .hero { padding-top: 22px; padding-bottom: 0; align-items: stretch; }

  /* Phone composition: Les beside the headline with the lede tucked under it
     in the same column, then the proof row, then the call button pinned to
     the bottom of the screen where the thumb is.
     .hero-copy becomes display:contents so its children can be placed
     individually on the hero grid, and a 1fr spacer row does the pushing. */
  .hero-copy { display: contents; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas:
      "title  les"
      "lede   les"
      "rating les"
      "space  space"
      "proof  proof"
      "cta    cta";
    align-items: start;
    column-gap: 10px;
    row-gap: 0;
  }
  .hero h1        { grid-area: title; }
  .hero-lede      { grid-area: lede; }
  .hero-actions   { grid-area: cta; align-self: end; }
  .hero-figure    { grid-area: les; align-self: start; }

  /* The wrapper dissolves so the rating can sit up in the left column under
     the lede, while the two tick claims drop to the bottom with the button. */
  .hero-trust  { display: contents; }
  .hero-rating { grid-area: rating; font-size: 0.72rem; margin-top: 12px; }
  .hero-rating .stars { letter-spacing: 0; }
  .hero-proof {
    grid-area: proof;
    align-self: end;
    justify-content: center;
    gap: 6px 18px;
    font-size: 0.76rem;
    padding-bottom: 10px;
  }
  .hero-proof .tick { width: 15px; height: 15px; }

  /* Dropped on phones: the marquee and the section immediately below already
     lead into the symptom picker, and the row it cost was worth more to the
     call button. */
  .hero-secondary { display: none; }

  /* The heading starts level with his eyebrows, which sit at 13% of the
     figure's height — just below the cap. This costs no vertical space: Les
     spans the title and lede rows and is taller than both together, so the
     text simply moves down inside the space he already occupies. */
  .hero h1 { margin-top: clamp(36px, 6vh, 58px); }
  .hero h1 + .lede { margin-top: 14px; }

  .hero-proof li { white-space: nowrap; }
  .hero-rating { white-space: nowrap; }

  /* Narrower measure under the title: the same copy set in a taller, slimmer
     column beside Les rather than running the full width of the left column.
     The tighter leading pays for the extra lines this creates. */
  .hero-lede { max-width: 16ch; line-height: 1.42; }

  /* He bleeds off the right edge — negative margin cancels the gutter and
     then some — so he can be wide without squeezing the headline column.
     The hero clips the overflow, so the bleed is deliberate, not a scrollbar. */
  .hero-figure {
    margin-right: calc(var(--gut) * -1 - 16px);
    /* top-aligned, so his cap starts level with the first line of the heading
       rather than hanging 30px below it */
    align-items: flex-start;
    /* max-width would clamp him to his grid column and cancel the bleed */
    max-width: none;
  }
  .hero-figure img {
    height: clamp(290px, 50vh, 420px);
    width: min(56vw, 210px);
    max-width: none;
    object-fit: cover;
    object-position: 46% 0;
    margin-bottom: 0;
  }
  .hero-figure::before { width: 116%; bottom: 8%; }
}

/* Narrow phones: the left column gets squeezed enough that the lede runs to an
   extra line, which pushed the marquee off the fold on a 360x740. Giving Les a
   little less width hands that line back. */
@media (max-width: 389px) and (min-height: 701px) {
  .hero-figure img { width: min(50vw, 182px); }
  .hero h1 { margin-top: clamp(32px, 5.4vh, 52px); }
}

/* Short phones (SE-sized and older): the hero still has to land the marquee on
   the fold, so the heading, the lede and Les all come down a notch. */
@media (max-width: 899px) and (max-height: 700px) {
  .hero h1 { font-size: clamp(1.8rem, 7.2vw, 2.2rem); }
  /* Full text, not truncated — it just sets tighter here. */
  .hero-lede { font-size: 0.85rem; line-height: 1.45; margin-bottom: 12px; }
  .hero-actions .btn--primary { padding: 14px 18px; }
  /* He sits beside the heading and runs down past it, so even here he has far
     more room than the old stacked layout allowed. */
  .hero-figure img { height: clamp(230px, 47vh, 320px); width: min(52vw, 195px); }
}

@media (min-width: 900px) {
  /* Desktop shows him waist-down-cropped rather than full length: at full
     length he was only ~175px wide in a 500px column and read as a strip of
     wallpaper. Cropping lets him be nearly twice as wide for the same height,
     and the crop edge sits on the marquee so he reads as standing behind it. */
  /* The hero is taller than its content, so the grid must stretch into it —
     otherwise the whole grid centres as a block and Les floats above the
     marquee showing his crop edge. Stretched, he stands on it; the copy
     centres independently. */
  .hero { padding-bottom: 0; align-items: stretch; }
  .hero-grid { height: 100%; }
  .hero-copy { align-self: center; }

  /* He fills the full height of the hero and stands on the marquee, so he is
     as large as the viewport allows at every window size. */
  .hero-figure { align-self: stretch; }
  .hero-figure img {
    width: min(38vw, 440px);
    /* Explicit viewport maths, not height:100% — a percentage height here
       resolves to auto and the image balloons to its natural 3:1. */
    height: calc(100svh - var(--header-h) - var(--marquee-h) - 22px);
    min-height: 340px;
    object-fit: cover;
    object-position: 50% 0;
    margin-bottom: 0;
  }
  .hero-figure::before { width: 112%; bottom: 4%; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Floating badge that bobs beside him */
.hero-badge {
  position: absolute;
  top: 6%;
  right: 4%;
  z-index: 3;
  background: var(--white);
  border-radius: var(--r-card);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: bob 4.5s ease-in-out infinite;
}
@media (min-width: 900px) { .hero-badge { right: 2%; top: 10%; } }
.hero-badge strong { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--navy); line-height: 1; }
.hero-badge span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* Phone placement for the badge. This block MUST come after the base rule
   above: an absolutely positioned box with BOTH top and bottom resolved and
   height:auto stretches to fill the gap between them, which turned this into a
   378px white slab down his body. `top: auto` is what prevents that, and it
   only wins if it is declared later in the file. */
@media (max-width: 899px) {
  .hero-badge {
    top: auto;
    bottom: 12%;
    right: 34px;
    left: auto;
    padding: 7px 11px;
    border-radius: 16px;
  }
  .hero-badge strong { font-size: 1rem; }
  .hero-badge span { font-size: 0.55rem; letter-spacing: 0.07em; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

/* --- Marquee ------------------------------------------------------------ */
.marquee {
  background: var(--navy);
  color: var(--cream);
  padding-block: 16px;
  overflow: hidden;
  border-block: 3px solid var(--red);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-x 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  flex: none;
}
.marquee-group span {
  font-family: var(--display);
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-group .dot { color: var(--red); font-size: 1.1em; }

@keyframes scroll-x { to { transform: translateX(-50%); } }

/* --- Symptom picker ----------------------------------------------------- */
.symptom-layout { display: grid; gap: 28px; }
@media (min-width: 900px) { .symptom-layout { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.chip {
  padding: 11px 18px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s,
              transform 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--blue); transform: translateY(-2px); }
.chip[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Les + speech bubble */
.diagnosis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
@media (min-width: 560px) { .diagnosis { gap: 18px; } }

.diagnosis-figure { position: relative; }
.diagnosis-figure img {
  height: 210px;
  width: auto;
  filter: drop-shadow(0 10px 18px rgba(18, 32, 58, 0.18));
  transition: opacity 0.25s var(--ease);
}
@media (min-width: 560px) { .diagnosis-figure img { height: 280px; } }
@media (min-width: 900px) { .diagnosis-figure img { height: 340px; } }

.bubble {
  position: relative;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  min-height: 150px;
}
/* Tail — a rotated square, drawn over the border seam */
.bubble::before {
  content: "";
  position: absolute;
  left: -9px; top: 34px;
  width: 16px; height: 16px;
  background: var(--white);
  border-left: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
}
.bubble h4 { color: var(--navy); margin-bottom: 8px; }
.bubble p { font-size: 0.95rem; color: var(--ink-soft); }

.bubble-body { animation: pop 0.4s var(--ease); }
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bubble-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--cream-deep);
  color: var(--navy);
}
.tag--red { background: var(--red); color: var(--white); }

/* --- Service cards ------------------------------------------------------ */
.card-grid { display: grid; gap: 18px; }
@media (min-width: 620px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Flex column so the price and link pin to the bottom. Without it a two-line
   heading ("Clutches & timing belts") pushes its own card's footer down and
   the row stops lining up. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--r-card);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
  /* No transform on hover: these carry a stretched ::after link overlay, and a
     transform would make the card its own containing block and collapse it. */
  transition: box-shadow 0.35s var(--ease), background-color 0.35s;
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-lg); }
.card:focus-within { box-shadow: var(--shadow-lg); }

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.card:hover::before { transform: scaleX(1); }

.card-ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--cream-deep);
  color: var(--navy);
  margin-bottom: 16px;
  transition: background-color 0.35s, color 0.35s;
}
.card:hover .card-ico { background: var(--blue); color: var(--white); }
.card-ico svg { width: 26px; height: 26px; }

.card h3 { margin-bottom: 8px; color: var(--navy); }
.card p { font-size: 0.93rem; color: var(--ink-soft); }

.card p { flex: 1; }

.card-price {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--red);
}

/* Stretched link. The anchor gets no hover transform anywhere. */
.card-link { position: static; font-weight: 700; font-size: 0.88rem; text-decoration: none; color: var(--blue); }
.card-link::after { content: ""; position: absolute; inset: 0; }

/* --- Steps (sticky stack) ----------------------------------------------- */
.steps { display: grid; gap: 18px; }
@media (min-width: 900px) { .steps { gap: 26px; } }

/* Sticky stacking on every size — the cards deal themselves into a deck as you
   scroll. Offsets are set per-card from JS so each rests slightly lower than
   the last. */
.step {
  position: sticky;
  top: 88px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  background: var(--white);
  border-radius: var(--r-img);
  padding: 26px 24px;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .step { grid-template-columns: auto 1fr; gap: 34px; padding: 36px 40px; top: 110px; }
}

.step-figure { position: relative; justify-self: start; }
@media (min-width: 768px) { .step-figure { justify-self: center; } }
.step-figure img {
  height: 170px;
  width: auto;
  filter: drop-shadow(0 10px 18px rgba(18, 32, 58, 0.18));
}
@media (min-width: 768px) { .step-figure img { height: 220px; } }

/* Step one shows Les' face in a circle, like a contact photo — the bust is a
   crop, so it is framed deliberately rather than scaled against the full-body
   poses beside it, which would make his head five times the size. */
/* Explicit height rather than aspect-ratio: the image inside sizes itself with
   height:100%, and a percentage height cannot resolve against an aspect-ratio
   derived one — it falls back to auto and overflows the circle. */
.step-figure--round {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--cream-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
}
@media (min-width: 768px) { .step-figure--round { width: 175px; height: 175px; } }
/* Fills the circle as a proper avatar crop, framed just below the top of his
   cap. Explicit px rather than 100%: a percentage height on a grid item
   resolves inconsistently here and silently falls back to auto. */
.step-figure--round img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  object-position: 50% 16%;
  filter: none;
}
@media (min-width: 768px) { .step-figure--round img { width: 175px; height: 175px; } }

/* Above the circle, so it reads as a numbered badge rather than something
   half-buried behind it. */
.step-figure .step-num { z-index: 2; }

.step-num {
  position: absolute;
  top: -8px; left: -8px;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: var(--display);
  font-size: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.step h3 { color: var(--navy); margin-bottom: 8px; }
.step p { color: var(--ink-soft); }

/* --- Postcode checker --------------------------------------------------- */
.postcode-box {
  background: var(--white);
  border-radius: var(--r-img);
  padding: 26px 24px;
  box-shadow: var(--shadow-md);
  max-width: 560px;
}
@media (min-width: 768px) { .postcode-box { padding: 34px 36px; } }

.postcode-form { display: grid; gap: 12px; }
@media (min-width: 480px) { .postcode-form { grid-template-columns: 1fr auto; } }

.postcode-form input {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--ink);
  transition: border-color 0.25s, background-color 0.25s;
}
.postcode-form input::placeholder { text-transform: none; font-weight: 500; color: var(--ink-soft); opacity: 0.7; }
.postcode-form input:focus { outline: none; border-color: var(--blue); background: var(--white); }

.postcode-result {
  margin-top: 16px;
  font-weight: 600;
  font-size: 0.95rem;
  display: none;
}
.postcode-result.is-shown { display: flex; gap: 10px; align-items: flex-start; animation: pop 0.35s var(--ease); }
.postcode-result.is-yes { color: #1B7A45; }
.postcode-result.is-no  { color: var(--red); }
.postcode-result .mark { font-size: 1.2rem; line-height: 1.3; flex: none; }

/* --- Meet Les ----------------------------------------------------------- */
.about-layout { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .about-layout { grid-template-columns: 0.85fr 1.15fr; gap: 56px; } }

.about-figure {
  position: relative;
  justify-self: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.about-figure::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(84vw, 340px);
  height: 88%;
  transform: translateX(-50%);
  background: var(--blue);
  border-radius: var(--r-img);
  opacity: 0.14;
}
.about-figure img {
  position: relative;
  height: clamp(300px, 44vh, 480px);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 14px 22px rgba(18, 32, 58, 0.2));
}

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
@media (min-width: 620px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
/* Centred as a block rather than just text-aligned, so a one-line label and a
   two-line label sit at the same optical height instead of drifting apart. */
.stat {
  background: var(--white);
  border-radius: 16px;
  padding: 20px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.section--navy .stat, .section--blue .stat { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.stat strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.45rem, 4.6vw, 1.95rem);
  color: var(--red);
  line-height: 0.95;
}
.section--navy .stat strong, .section--blue .stat strong { color: var(--cream-deep); }
/* Tight line-height: body copy's 1.65 left huge gaps between wrapped words. */
.stat span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-wrap: balance;
}
.section--navy .stat span, .section--blue .stat span { color: rgba(245, 238, 223, 0.72); }

/* --- Reviews ------------------------------------------------------------ */
.review-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 82vw);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  /* Bleed to the screen edges so cards can scroll off, then inset the content
     back to the page gutter. */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  /* Without this the snap port starts at the padding edge, so the browser
     snapped the rail 20px along on load and the first card sat flush against
     the screen instead of lining up with the heading above it. */
  scroll-padding-inline: var(--gut);
  scrollbar-width: none;
}
.review-rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .review-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.review {
  scroll-snap-align: start;
  background: var(--white);
  border-radius: var(--r-card);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.review:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.review .stars { color: #E8A33D; letter-spacing: 3px; margin-bottom: 12px; }
.review p { font-size: 0.96rem; color: var(--ink); flex: 1; }
.review footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 0.85rem; font-weight: 700; color: var(--navy);
}
.review footer small { display: block; font-weight: 500; color: var(--ink-soft); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--navy);
  transition: color 0.25s;
}
.faq-q:hover { color: var(--red); }
.faq-q:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.faq-q .plus {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cream-deep);
  transition: transform 0.4s var(--ease), background-color 0.3s, color 0.3s;
  font-size: 1.1rem;
  line-height: 1;
}
.faq-item.is-open .faq-q .plus { transform: rotate(135deg); background: var(--red); color: var(--white); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.faq-a > div { padding-bottom: 22px; color: var(--ink-soft); font-size: 0.96rem; }

/* --- Big CTA ------------------------------------------------------------ */
.cta { position: relative; overflow: hidden; text-align: center; }
.cta h2 { margin-bottom: 16px; }
.cta .lede { margin-inline: auto; margin-bottom: 28px; }
.cta-actions { display: grid; gap: 12px; justify-content: center; }
@media (min-width: 480px) { .cta-actions { grid-auto-flow: column; } }
.cta-figure { display: flex; justify-content: center; margin: 30px auto calc(var(--sec) * -1 + 10px); }
.cta-figure img {
  height: clamp(280px, 38vh, 400px);
  width: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.28));
}

/* --- Contact form ------------------------------------------------------- */
.form-grid { display: grid; gap: 16px; }
@media (min-width: 620px) { .form-grid .span-2 { grid-column: 1 / -1; } .form-grid { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field textarea { min-height: 130px; resize: vertical; border-radius: 18px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(46, 74, 172, 0.12);
}
.form-note { font-size: 0.82rem; color: var(--ink-soft); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(245, 238, 223, 0.78); padding-block: 56px 30px; }
.footer-grid { display: grid; gap: 30px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.site-footer h4 { color: var(--cream); font-size: 0.95rem; letter-spacing: 0.1em; margin-bottom: 14px; }
.site-footer a { text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--white); }
.footer-links { display: grid; gap: 9px; font-size: 0.92rem; }
.footer-bottom {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid rgba(245, 238, 223, 0.14);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 0.8rem;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* No tile — the logo sits straight on the footer. */
.footer-brand img { width: 58px; height: 58px; object-fit: contain; }

/* --- Sticky mobile call bar --------------------------------------------- */
/* No viewport-fit=cover on this site, so the layout viewport already excludes
   the Android gesture bar and env() insets would resolve to 0 anyway. */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px var(--gut) 12px;
  background: var(--navy);
  border-top: 3px solid var(--red);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease);
}
.call-bar.is-shown { transform: translateY(0); }
.call-bar .btn { padding: 13px 14px; font-size: 0.88rem; }
@media (min-width: 900px) { .call-bar { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 0; } }

/* --- Scroll reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero { background: var(--navy); color: var(--cream); padding-block: 54px 60px; text-align: center; }
.page-hero h1 { font-size: clamp(2.25rem, 8vw, 4.25rem); margin-bottom: 12px; }
.page-hero .lede { margin-inline: auto; color: rgba(245, 238, 223, 0.8); }
.crumb { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-deep); margin-bottom: 14px; }
.crumb a { text-decoration: none; }

/* --- Under construction -------------------------------------------------- */
/* Toggled by js/config.js. Applied to <html> before first paint, so the real
   page never flashes. Nothing is deleted — flip LES_UC to false to restore. */
.uc .uc-hide { display: none !important; }
.uc-screen { display: none; }
.uc .uc-screen { display: grid; }

.uc-screen {
  min-height: 100svh;
  place-items: center;
  text-align: center;
  padding: 40px var(--gut);
  background: var(--cream);
}
.uc-inner { max-width: 520px; }
.uc-inner img.les { height: clamp(230px, 34vh, 320px); width: auto; margin: 0 auto 20px; filter: drop-shadow(0 14px 22px rgba(18, 32, 58, 0.2)); }
.uc-inner h1 { color: var(--navy); margin-bottom: 14px; }
.uc-inner .aside-note { margin-bottom: 22px; }
.uc-actions { display: grid; gap: 12px; justify-content: center; margin-top: 10px; }
@media (min-width: 480px) { .uc-actions { grid-auto-flow: column; } }
.uc-logo { width: 100px; margin: 0 auto 26px; }

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .marquee-track { animation: none; }
}