/* ==========================================================================
   SMART Choice Mobile Smart Repair – styles
   --------------------------------------------------------------------------
   1.  Tokens (colours, type, spacing)
   2.  Base / reset
   3.  Utilities (container, skip link, icons, sprite)
   4.  Buttons and links
   5.  Header and main navigation
   6.  Mobile menu
   7.  Sections (shared)
   8.  Hero and before/after slider
   9.  Trust strip
   10. Intro
   11. What we repair
   12. Carousel (reviews) and Recent repairs grid
   13. How it works
   14. Reviews
   15. Areas we cover
   16. Footer
   17. Floating WhatsApp
   18. Quote form
   19. About page
   20. Contact page
   21. Gallery page
   22. Review line
   23. Privacy and 404 pages
   24. Older browser fallback
   25. Reduced motion
   ========================================================================== */


/* 1. TOKENS
   ========================================================================== */
:root {
  /* Colours sampled from the logo */
  --navy: #0A1B3D;
  --brand-blue: #0A78C0;
  --brand-blue-dark: #08629E;
  --light-blue: #3C90CC;
  --cyan: #2EC0F0;
  --grey: #B8BCC6;
  --light-grey: #EEF1F4;
  --text: #3A4250;
  --text-muted: #5B6372;
  --white: #FFFFFF;
  --white-soft: rgba(255, 255, 255, 0.8);
  --whatsapp: #25D366;
  --error: #C62828;

  /* Type */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-h1: clamp(2.5rem, 1rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.55rem + 1.4vw, 2.75rem);
  --fs-h3: 1.25rem;
  --fs-small: 0.9375rem;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: 20px;
  --section-pad: 72px;
  --radius: 6px;
  --header-h: 88px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 200ms;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-pad: 96px; }
}

@media (min-width: 1024px) {
  :root { --header-h: 116px; --section-pad: 120px; }
}


/* 2. BASE / RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

/* Anchor targets stop below the sticky header */
section[id] { scroll-margin-top: var(--header-h); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
}

p { margin: 0; max-width: 65ch; }

ul, ol { margin: 0; padding: 0; list-style: none; }

figure { margin: 0; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

a { color: var(--brand-blue); }

main:focus { outline: none; }

/* One clear focus style everywhere */
:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}


/* 3. UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }


/* 4. BUTTONS AND LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 16px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:hover { transform: translateY(-1px); }

/* Primary: brand blue */
.btn--primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

/* Secondary: navy outline on light backgrounds */
.btn--secondary {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

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

/* Secondary on navy: white outline */
.btn--on-dark {
  border-color: var(--white);
  color: var(--white);
}

.btn--on-dark:hover {
  background: var(--white);
  color: var(--navy);
}

.btn--small {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 0.9375rem;
}

.btn--block { width: 100%; }

/* Keep the long button label on one line on small phones */
@media (max-width: 599px) {
  .btn { padding-inline: 20px; }
}

/* Focus on dark backgrounds */
.hero :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible { outline-color: var(--white); }

/* Plain text link with arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--t-fast) var(--ease);
}

.text-link:hover { color: var(--brand-blue-dark); }

.text-link .icon { width: 1.1em; height: 1.1em; }


/* 5. HEADER AND MAIN NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease);
}

.site-header.is-compact { border-bottom-color: var(--grey); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  transition: height 250ms var(--ease);
}

.site-header__logo { display: block; flex-shrink: 0; border-radius: 50%; }

.site-header__logo img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  transition: width 250ms var(--ease), height 250ms var(--ease);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Tap-to-call icon: phones and tablets only */
.header-call {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.header-call:hover { background: var(--navy); color: var(--white); }

.header-call .icon { width: 20px; height: 20px; }

/* Desktop links: hidden on small screens */
.main-nav { display: none; }

.main-nav__list {
  display: flex;
  gap: 40px;
}

.main-nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

/* Underline grows left to right on hover; stays on the current page */
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}

.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Menu toggle: two lines that become an X */
.menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.menu-toggle__line {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 250ms var(--ease);
}

.menu-toggle__line:first-child { top: 18px; }
.menu-toggle__line:last-child { top: 25px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 1024px) {
  .site-header__inner { gap: 40px; }
  .site-header__logo img { width: 96px; height: 96px; }

  .main-nav { display: block; margin-left: auto; }
  .site-header__actions { gap: 12px; margin-left: 0; }
  .menu-toggle { display: none; }
  .header-call { display: none; }

  /* Compact state after scrolling */
  .site-header.is-compact .site-header__inner { height: 92px; }
  .site-header.is-compact .site-header__logo img { width: 76px; height: 76px; }
}


/* 6. MOBILE MENU (under 1024px)
   ========================================================================== */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy);
  color: var(--white);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 300ms var(--ease), visibility 0s linear 300ms;
}

.mobile-menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 300ms var(--ease), visibility 0s;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 24px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.mobile-menu__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

.mobile-menu__link {
  position: relative;
  display: block;
  padding: 18px 0;
  color: var(--white);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
}

.mobile-menu__link[aria-current="page"] { padding-left: 28px; }

.mobile-menu__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--brand-blue);
}

.mobile-menu__actions {
  display: grid;
  gap: 12px;
  max-width: 28rem;
  margin-top: 40px;
}

.mobile-menu__footer {
  margin-top: auto;
  padding-top: 48px;
  color: var(--white-soft);
  font-size: var(--fs-small);
}

.mobile-menu__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 0;
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}


/* 7. SECTIONS (shared)
   ========================================================================== */
.section { padding-block: var(--section-pad); }

.section--grey { background: var(--light-grey); }

.section__title { margin-bottom: 40px; }

.section__action { margin-top: 48px; }

@media (min-width: 1024px) {
  .section__title { margin-bottom: 64px; }
  .section__action { margin-top: 64px; }
}


/* 8. HERO AND BEFORE/AFTER SLIDER
   ========================================================================== */
.hero {
  background: var(--navy);
  color: var(--white-soft);
  padding-top: 36px;
  padding-bottom: var(--section-pad);
}

.hero__grid {
  display: grid;
  gap: 48px;
}

/* Thin cyan line: the only use of cyan on the page */
.hero__rule {
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 24px;
  background: var(--cyan);
}

.hero h1 { color: var(--white); }

.hero__lead {
  margin-top: 20px;
  margin-bottom: 32px;
  max-width: 34rem;
}

/* Single call to action: natural width on desktop, full width on mobile */
@media (max-width: 767px) {
  .hero__cta { width: 100%; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 112px; padding-bottom: 120px; }

  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 72px;
  }

  .hero__rule { margin-bottom: 32px; }
  .hero__lead { margin-top: 28px; margin-bottom: 40px; }
}

/* Slider frame */
.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 1 / 1; /* matches the square hero photos */
  overflow: hidden;
  border-radius: var(--radius);
  background: #1B2A4A;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.compare:focus-visible { outline-offset: 4px; }

.compare__img,
.compare__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.compare__img {
  object-fit: cover;
  border-radius: 0;
  pointer-events: none;
}

/* Before image sits on top, clipped to the left of the divider */
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  pointer-events: none;
}

/* Round grip echoing the logo's double ring */
.compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 5.5px var(--light-blue);
  transform: translate(-50%, -50%);
}

/* Still-image fallback when only one photo is present */
.compare.is-still { cursor: default; touch-action: auto; }
.compare.is-still .compare__before { clip-path: none; }
.compare.is-still .compare__handle,
.compare.is-still .compare__hint,
.compare.is-still .tag { display: none; }

/* "Drag to compare" label under the grip; fades for good after the first drag */
.compare__hint {
  position: absolute;
  top: calc(50% + 34px);
  left: var(--pos);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10, 27, 61, 0.78);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
}

.compare.is-used .compare__hint {
  opacity: 0;
  visibility: hidden;
}

/* Gentle pulse on the grip's outer ring: twice on load, then stops (only the slider with data-hint) */
.compare[data-hint] .compare__grip::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  animation: grip-pulse 1.4s ease-out 1.7s 2;
}

@keyframes grip-pulse {
  from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75); }
  to { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .compare[data-hint] .compare__grip::after { animation: none; }
}

/* Before / After tags (hero and recent repairs) */
.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(10, 27, 61, 0.78);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
}

.tag--after { left: auto; right: 12px; }


/* 9. TRUST STRIP
   ========================================================================== */
/* White bar pulled up over the bottom edge of the hero */
.trust {
  position: relative;
  z-index: 1;
  margin-top: -24px;
}

.trust__list {
  display: grid;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
}

.trust__item {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  line-height: 1.4;
}

.trust__item + .trust__item { border-top: 1px solid var(--grey); }

.trust__item strong {
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.trust__item span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Facebook item: the whole item is the link */
.trust__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.trust__link strong {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}

.trust__link:hover strong { text-decoration-color: currentColor; }

/* Smaller gap before the next section */
.trust + .section { padding-top: 56px; }

@media (min-width: 768px) {
  .trust { margin-top: -56px; }

  .trust__list { grid-template-columns: repeat(3, 1fr); }

  .trust__item { padding: 28px 32px; }

  .trust__item strong { font-size: 1.5rem; }

  .trust__item + .trust__item {
    border-top: 0;
    border-left: 1px solid var(--grey);
  }

  .trust + .section { padding-top: 88px; }
}


/* Phones: smaller hero heading (about 3 lines) and a single compact trust row */
@media (max-width: 599px) {
  .hero h1 { font-size: 1.875rem; line-height: 1.12; }

  .trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .trust__item {
    justify-content: center;
    padding: 14px 4px;
    text-align: center;
  }

  .trust__item + .trust__item {
    border-top: 0;
    border-left: 1px solid var(--grey);
  }

  .trust__item strong { font-size: 0.8125rem; line-height: 1.25; }

  .trust__item span { display: none; }
}

@media (max-width: 359px) {
  .trust__item { padding-inline: 2px; }
  .trust__item strong { font-size: 0.6875rem; }
}


/* 10. INTRO
   ========================================================================== */
.intro__grid {
  display: grid;
  gap: 40px;
}

.intro__text h2 { margin-bottom: 24px; }

.intro__text p + p { margin-top: 16px; }

.intro__link { margin-top: 28px; }

.intro__media { order: -1; }

/* Double ring: navy outer border, light blue inner border */
.ring {
  padding: 5px;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
}

.ring img {
  width: 100%;
  aspect-ratio: 4 / 3; /* matches the landscape van photo */
  object-fit: cover;
  object-position: 15% 50%; /* keeps the blue car on the left in view if cropped */
  box-shadow: 0 0 0 1.5px var(--light-blue);
}

@media (min-width: 1024px) {
  .intro__grid {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    align-items: center;
    gap: 96px;
  }

  .intro__media { order: 0; }
}


/* 11. WHAT WE REPAIR
   ========================================================================== */
.services-section {
  --card-border: #DDE2E8;
  --icon-tint: #E7F1FA;
  background: var(--light-grey);
  color: var(--text);
}

/* Heading with the intro line directly beneath */
.services-head { margin-bottom: 48px; }

.services-head h2 { color: var(--navy); }

.services-head p {
  max-width: 36rem;
  margin-top: 16px;
}

/* Five services then the call-to-action card: three even rows on desktop */
.services-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card: icon on the left, text on the right. Same-row cards share a height. */
.service-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

@media (min-width: 600px) {
  .service-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    padding: 28px;
  }
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--icon-tint);
  color: var(--brand-blue);
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 600px) {
  .service-card__icon { width: 64px; height: 64px; }
  .service-card__icon svg { width: 28px; height: 28px; }
}

/* Small nudge so the heading sits level with the top of the icon */
.service-card__body { padding-top: 4px; }

.service-card h3 {
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 600;
}

.service-card p {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.65;
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--brand-blue);
  font-size: var(--fs-small);
  font-weight: 600;
}

.service-card__cta .icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--t-fast) var(--ease);
}

/* Hover and keyboard focus: blue border plus a 3px bar on the left edge */
a.service-card:hover,
a.service-card:focus-visible {
  border-color: var(--brand-blue);
  box-shadow: inset 3px 0 0 var(--brand-blue);
}

a.service-card:hover .service-card__cta .icon,
a.service-card:focus-visible .service-card__cta .icon { transform: translateX(4px); }

/* Call-to-action card */
.service-card--cta {
  border: 0;
  background: var(--navy);
  color: var(--white-soft);
}

.service-card--cta .service-card__icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.service-card--cta h3 { color: var(--white); }

.service-card--cta :focus-visible { outline-color: var(--white); }

/* Button: under the text on desktop; full card width available below 1024px so it stays on one line */
.service-card__btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
}

@media (min-width: 1024px) {
  .service-card__btn { grid-column: 2; }
}

/* Below desktop: a little less side padding keeps the label on one line */
@media (max-width: 1023px) {
  .service-card__btn { padding-inline: 16px; }
  .service-card--cta { padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  a.service-card:hover .service-card__cta .icon,
  a.service-card:focus-visible .service-card__cta .icon { transform: none; }
}


/* 12. CAROUSEL (reviews) AND RECENT REPAIRS GRID
   ========================================================================== */
/* --per-view: how many slides fit across; the fraction shows part of the next one */
.carousel {
  --per-view: 1.15;
  --carousel-gap: 24px;
}

@media (min-width: 768px) {
  .carousel { --per-view: 1.5; --carousel-gap: 32px; }
}

@media (min-width: 1024px) {
  .carousel { --per-view: 2.5; }
}

/* Without JavaScript the row scrolls sideways */
.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* Below 1024px the row runs to the screen edge so the next slide peeks in */
@media (max-width: 1023px) {
  .carousel__viewport {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.carousel__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view));
  min-width: 0;
  scroll-snap-align: start;
}

/* With JavaScript: transform-driven, draggable */
.carousel.is-ready .carousel__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carousel.is-ready .carousel__viewport.is-dragging { cursor: grabbing; }

.carousel__viewport:focus-visible { outline-offset: 6px; }

/* Edge-to-edge rows (both carousels) */
.carousel-section { overflow-x: clip; } /* hides the part of the row that runs past the screen edge */

/* The row runs right across the screen, edge to edge, with a soft white fade at each side.
   Cards stay lined up with the content; the neighbouring cards show either side. */
.carousel--bleed .carousel__viewport {
  position: relative;
  margin-inline: calc((100% - 100vw) / 2);
  padding-inline: calc((100vw - 100%) / 2);
}

.carousel--bleed .carousel__viewport::before,
.carousel--bleed .carousel__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 48px;
  pointer-events: none;
}

.carousel--bleed .carousel__viewport::before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--white));
}

.carousel--bleed .carousel__viewport::after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--white));
}

@media (min-width: 1024px) {
  .carousel--bleed .carousel__viewport::before,
  .carousel--bleed .carousel__viewport::after { width: 120px; }
}

/* Recent repairs grid (homepage): first 3 repairs, exactly within the content width */
.recent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* Tablet: 3 narrower cards; 2 columns from 600px would leave the third card alone on a row */
@media (min-width: 600px) {
  .recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1024px) {
  .recent-grid { gap: 24px; }
}

.recent-grid .repair-card[hidden] { display: none; }

/* Tablet: narrower cards, so smaller Before/After tags */
@media (min-width: 600px) and (max-width: 1023px) {
  .recent-grid .split-tile .tag { top: 6px; padding: 2px 8px; font-size: 0.6875rem; }
  .recent-grid .split-tile .tag:not(.tag--after) { left: 6px; }
  .recent-grid .split-tile .tag--after { right: 6px; }
  .recent-grid .repair-card figcaption { font-size: 0.875rem; }
}

.recent-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Repair card: a static split tile (before left, after right) */
.repair-card {
  height: 100%;
  padding: 10px 10px 0;
  border-radius: 10px;
  background: var(--light-grey);
}

/* Static split tile: before on the left, after on the right, 2px white divider, 4:3 overall.
   Shared look for repair photos; no slider behaviour. */
.split-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
}

.split-tile__half {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.split-tile__half img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.split-tile .tag { top: 8px; left: 8px; right: auto; }

.split-tile .tag--after { left: auto; right: 8px; }

.repair-card figcaption {
  padding: 12px 4px;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Controls: dots on the left, arrows (and optional pause) on the right */
.carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
}

.carousel__controls[hidden] { display: none; }

.carousel__dots {
  display: flex;
  margin-left: -10px; /* lines the active bar up with the content edge */
}

.carousel__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}

.carousel__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--grey);
  transition: width var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.carousel__dot:hover::before { background: var(--text-muted); }

.carousel__dot[aria-current="true"]::before {
  width: 24px;
  background: var(--brand-blue);
}

.carousel__buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.carousel__btn:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--white);
}

.carousel__btn svg { width: 20px; height: 20px; }

/* Pause/play icon swap */
.carousel__icon-play,
.carousel__btn.is-paused .carousel__icon-pause { display: none; }
.carousel__btn.is-paused .carousel__icon-play { display: block; }


/* 13. HOW IT WORKS
   ========================================================================== */
.how-head { margin-bottom: 56px; }

.how-head p {
  max-width: 36rem;
  margin-top: 16px;
}

/* Mobile and tablet: steps stacked, icon on the left, line running down through the circles */
.steps {
  --step-gap: 40px;
  --circle: 72px;
  display: grid;
  gap: var(--step-gap);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--circle) minmax(0, 1fr);
  column-gap: 20px;
  align-content: start;
}

.step > :not(.step__icon) { grid-column: 2; }

.step__icon {
  position: relative;
  z-index: 1; /* sits on top of the connecting line */
  grid-row: 1 / span 5;
  display: grid;
  place-items: center;
  width: var(--circle);
  height: var(--circle);
  border: 2px solid var(--brand-blue);
  border-radius: 50%;
  background: var(--white);
  color: var(--brand-blue);
}

.step__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Connecting line from this circle to the next one */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--circle) / 2 - 1px);
  top: var(--circle);
  bottom: calc(var(--step-gap) * -1);
  width: 2px;
  background: var(--brand-blue);
}

/* Darker blue: small text needs 4.5:1 on the grey background */
.step__label {
  padding-top: 10px;
  color: var(--brand-blue-dark);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.step h3 {
  margin-top: 6px;
  color: var(--navy);
  font-size: 1.25rem;
}

.step__text { margin-top: 8px; }

.step__btn {
  justify-self: start;
  margin-top: 20px;
}

/* Desktop: four steps in a row, line running across through the circles */
@media (min-width: 1024px) {
  .steps {
    --step-gap: 40px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step { grid-template-columns: minmax(0, 1fr); }

  .step > :not(.step__icon) { grid-column: 1; }

  .step__icon { grid-row: auto; }

  .step__label { padding-top: 24px; }

  .step:not(:last-child)::after {
    left: var(--circle);
    right: calc(var(--step-gap) * -1);
    top: calc(var(--circle) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

.steps__alt {
  margin-top: 56px;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.steps__alt a {
  color: var(--brand-blue-dark);
  font-weight: 600;
  text-underline-offset: 4px;
}

.steps__alt a:hover { color: var(--navy); }


/* 14. REVIEWS
   ==========================================================================
   Uses the carousel from section 12; these styles cover the cards. */
.reviews__sub {
  margin-top: 12px;
  margin-bottom: 40px;
}

.reviews__fb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
}

.reviews__fb:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.reviews__fb .icon { width: 1.1em; height: 1.1em; }

/* Keeps dots and arrows on one row on small phones */
.carousel--reviews .carousel__controls { column-gap: 12px; }

/* Card: equal heights, name and source pinned to the bottom */
.review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius);
  background: var(--light-grey);
}

@media (min-width: 768px) {
  .review-card { padding: 32px; }
}

.review-card__quote {
  margin: 0;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.review-card__quote p + p { margin-top: 12px; }

/* Long reviews: first 5 lines, fading out */
.review-card.is-clamped .review-card__quote {
  max-height: calc(5 * 1.65em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* Darker blue keeps AA contrast on the grey card */
.review-card__toggle {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-blue-dark);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

.review-card__toggle:hover { text-decoration: underline; text-underline-offset: 4px; }

.review-card__toggle[hidden] { display: none; }

.review-card__by {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 24px;
}

.review-card__name {
  color: var(--navy);
  font-weight: 600;
  line-height: 1.4;
}

.review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.review-card__source .icon { width: 1em; height: 1em; }

@media (min-width: 1024px) {
  .reviews__sub { margin-bottom: 64px; }
}


/* 15. AREAS WE COVER
   ========================================================================== */
.areas-layout {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .areas-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: center;
    gap: 80px;
  }
}

.areas-text p { margin-top: 16px; }

.areas-text h2 + p { margin-top: 20px; }

/* Darker blue: small link text needs 4.5:1 on the grey background */
.areas-link {
  margin-top: 24px;
  color: var(--brand-blue-dark);
}

.areas-link:hover { color: var(--navy); }

/* Towns panel */
.towns-panel {
  padding: 24px;
  border: 1px solid #DDE2E8;
  border-radius: var(--radius);
  background: var(--white);
}

@media (min-width: 600px) {
  .towns-panel { padding: 32px; }
}

.towns {
  display: grid;
  column-gap: 32px;
}

.town {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 14px;
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Thin dividers between rows (one column) */
.town + .town { border-top: 1px solid #DDE2E8; }

.town__pin {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Our base" pill: darker blue so the small text passes AA on the tint */
.town__tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: #E7F1FA;
  color: var(--brand-blue-dark);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Two columns from small tablets up; dividers only between rows */
@media (min-width: 420px) {
  .towns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .town + .town { border-top: 0; }
  .town:nth-child(n + 3) { border-top: 1px solid #DDE2E8; }

  .town:nth-child(-n + 2) { padding-top: 0; }
}

@media (max-width: 419px) {
  .town:first-child { padding-top: 0; }
}

.town:last-child,
.town:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }


/* 16. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy);
  color: var(--white-soft);
  font-size: var(--fs-small);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__grid {
  display: grid;
  gap: 40px;
  padding-block: 64px 48px;
}

.site-footer__brand img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.site-footer__brand p { max-width: 22rem; }

.site-footer__heading {
  margin-bottom: 12px;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  color: var(--white-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.site-footer__list a:hover,
.site-footer__list a[aria-current="page"] { color: var(--white); }

.site-footer__list .icon { width: 1.1em; height: 1.1em; }

/* Opening hours line under the contact links */
.site-footer__hours {
  padding: 4px 0 6px calc(1.1em + 10px); /* lines up with the link text after the icons */
  color: var(--white-soft);
  opacity: 0.85;
}

/* Bottom row: copyright and privacy link */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
}

.site-footer__bottom::before {
  content: "";
  flex-basis: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom p {
  max-width: none;
  padding-block: 16px 24px;
}

.site-footer__legal {
  padding-block: 12px;
  color: var(--white-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__legal:hover { color: var(--white); }

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding-block: 88px 64px;
  }
}

/* Desktop: brand / contact / services / pages */
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1.4fr 0.8fr; }
}


/* 17. FLOATING WHATSAPP (desktop)
   ========================================================================== */
.wa-float { display: none; }

@media (min-width: 1024px) {
  .wa-float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: var(--white);
    transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  }

  .wa-float svg { width: 30px; height: 30px; }
  .wa-float:hover { transform: translateY(-1px); background: #1EBE5A; }
}


/* 18. QUOTE FORM
   ========================================================================== */
.quote-section {
  --q-line: #DDE2E8;      /* card border */
  --q-divider: #E3E7EC;   /* between groups */
  --q-field: #8A94A3;     /* field borders: lightest grey that keeps 3:1 against white */
  --q-chip: #C9D1DB;      /* chip outlines (the radio inside each chip carries the contrast) */
  --q-tint: #E7F1FA;
  --q-ring: rgba(10, 120, 192, 0.2);
  background: var(--white);
}

/* One card: navy info panel + form panel. overflow: clip keeps the corners
   rounded without breaking the sticky info panel. */
.quote-card {
  display: grid;
  border: 1px solid var(--q-line);
  border-radius: var(--radius);
  overflow: clip;
}

@media (min-width: 1024px) {
  .quote-card { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
}

/* ---------- Left: info panel ---------- */
.quote-info {
  padding: 28px;
  background: var(--navy);
  color: var(--white-soft);
}

.quote-info h2 {
  color: var(--white);
  font-size: clamp(1.875rem, 1.4rem + 1vw, 2.375rem);
}

.quote-info__intro { margin-top: 16px; }

.quote-points {
  display: none; /* hidden on mobile to keep the form near the top */
  gap: 24px;
  margin-top: 40px;
}

.quote-points li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
}

.quote-points svg {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  fill: none;
  stroke: var(--light-blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quote-points strong {
  display: block;
  color: var(--white);
  font-weight: 600;
  line-height: 1.4;
}

.quote-points span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.quote-info__wa {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--fs-small);
}

/* Lighter blue than --light-blue so the small link text passes AA on navy */
.quote-info__wa a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #6CB0E0;
  font-weight: 600;
  text-decoration: none;
}

.quote-info__wa a:hover { text-decoration: underline; text-underline-offset: 4px; }

.quote-info :focus-visible { outline-color: var(--white); }

@media (min-width: 1024px) {
  .quote-info { padding: 48px; }

  .quote-info__inner {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }

  .quote-points { display: grid; }

  .quote-info__wa { margin-top: 40px; padding-top: 32px; }
}

/* ---------- Right: form panel ---------- */
.quote-main { padding: 28px; }

@media (min-width: 768px) {
  .quote-main { padding: 48px; }
}

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

/* Honeypot: off-screen, never shown */
.quote-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Numbered groups */
.form-group {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-group + .form-group {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--q-divider);
}

/* Floating the legend stops browsers drawing it inside the fieldset's top border */
.form-group__title {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 0;
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.form-group__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1.5px solid var(--brand-blue);
  border-radius: 50%;
  color: var(--brand-blue);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.form-row {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Fields ---------- */
.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.field__optional { color: var(--text-muted); font-weight: 400; }

.field__hint {
  margin-top: -4px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Keeps the select level with the vehicle field when they sit side by side */
.field__hint--spacer { display: none; }

@media (min-width: 768px) {
  .field__hint--spacer { display: block; }
}

.field__input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--q-field);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem; /* 16px stops iOS zooming in */
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field__input:focus,
.field__input:focus-visible {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--q-ring);
}

.field__textarea {
  height: auto;
  min-height: 0;
  resize: vertical;
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230A1B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}

/* Errors: red border and message with a small warning icon */
.field__input[aria-invalid="true"] { border-color: var(--error); }

.field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.18); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

.field__error::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23C62828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.field__error:empty { display: none; }

/* ---------- Photo drop zone (the real file input covers the whole area,
   so click, tap, drag and Enter/Space on the focused input all work) ---------- */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 40px 24px;
  border: 2px dashed #B8C4D2;
  border-radius: var(--radius);
  background: #F5F8FB;
  text-align: center;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--brand-blue);
  background: #EAF2F9;
}

.dropzone:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--q-ring);
}

.dropzone.is-invalid { border-color: var(--error); }

.dropzone__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone__text {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--navy);
  pointer-events: none;
}

.dropzone__text strong { font-weight: 600; }

.dropzone__icon {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dropzone__hint {
  max-width: 28rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  pointer-events: none;
}

/* Thumbnails */
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.thumbs:empty { display: none; }

.thumb {
  position: relative;
  width: 88px;
  height: 88px;
}

.thumb img,
.thumb__file {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.thumb__file {
  display: grid;
  place-items: center;
  padding: 8px;
  background: var(--light-grey);
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
}

.thumb__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.thumb__remove:hover { background: var(--brand-blue); }

.thumb__remove svg { width: 13px; height: 13px; }

/* ---------- Contact method chips (real radio inputs) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--q-chip);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.chip:hover { border-color: var(--brand-blue); }

.chip input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-blue);
  cursor: pointer;
}

.chip:has(input:checked) {
  border-color: var(--brand-blue);
  background: var(--q-tint);
  color: var(--navy);
}

.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--q-ring); border-color: var(--brand-blue); }

.chip input:focus-visible { outline: none; }

/* ---------- Consent checkbox (larger, custom) ---------- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.consent label { cursor: pointer; }

.consent__box {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--q-field);
  border-radius: 4px;
  background: var(--white) no-repeat center / 16px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.consent__box:checked {
  border-color: var(--brand-blue);
  background-color: var(--brand-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.consent__box:focus-visible {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--q-ring);
}

.consent__box[aria-invalid="true"] { border-color: var(--error); }

/* ---------- Send error, submit and success ---------- */
.quote-form__error {
  margin-top: 32px;
  padding: 16px 20px;
  border-left: 3px solid var(--error);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #FDF1F0;
  color: var(--text);
  font-size: var(--fs-small);
}

.quote-form__error[hidden] { display: none; }

.quote-form__error a { font-weight: 600; }

.quote-form__submit-wrap { margin-top: 32px; }

.quote-form__submit {
  width: 100%;
  min-height: 56px;
}

.quote-form__submit:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.quote-form__note {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
  max-width: none;
}

.quote__success {
  padding: 28px 28px 28px 24px;
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--light-grey);
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.quote__success:focus { outline: none; }


/* 19. ABOUT PAGE (about.html)
   ========================================================================== */

/* ---------- Page hero: shorter than the homepage, image overlapping the next section ---------- */
.page-hero {
  --hero-overlap: 40px;
  background: var(--navy);
  color: var(--white-soft);
  padding-top: 36px;
  padding-bottom: 48px;
}

.page-hero__grid {
  display: grid;
  gap: 32px;
}

.page-hero h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);
}

.page-hero__lead {
  margin-top: 20px;
  max-width: 34rem;
}

.page-hero__media {
  position: relative;
  z-index: 1;
  align-self: end; /* anchors the overlap to the bottom of the hero */
  margin-bottom: calc(var(--hero-overlap) * -1 - 48px);
}

/* Full photo at its natural (portrait) shape, kept to a sensible size */
.page-hero__media img {
  width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .page-hero__media { width: 100%; max-width: 460px; }
}

@media (min-width: 1024px) {
  .page-hero__media { justify-self: end; }
}

/* The section after the hero makes room for the overlapping image (keep in step with --hero-overlap) */
.page-hero + .section { padding-top: calc(var(--section-pad) + 40px); }

.page-hero :focus-visible,
.page-cta :focus-visible { outline-color: var(--white); }

@media (min-width: 1024px) {
  .page-hero {
    --hero-overlap: 96px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .page-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 72px;
  }

  .page-hero__media { margin-bottom: calc(var(--hero-overlap) * -1 - 80px); }

  .page-hero + .section { padding-top: calc(var(--section-pad) + 96px); }
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--white-soft);
  font-size: 0.875rem;
  line-height: 1.4;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.6;
}

.breadcrumb a {
  color: var(--white-soft);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

.breadcrumb a:hover { color: var(--white); text-decoration-color: currentColor; }

/* ---------- Our story: sticky facts column + editorial text ---------- */
.story__grid {
  display: grid;
  gap: 48px;
}

.story__statement {
  color: var(--navy);
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

.story__figure { margin-top: 40px; }

.story__number {
  color: var(--brand-blue);
  font-size: clamp(4rem, 2.6rem + 3.6vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.story__number-label {
  margin-top: 8px;
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.story__facts {
  margin-top: 32px;
  max-width: 24rem;
}

.story__facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.4;
}

.story__facts li + li { border-top: 1px solid #DDE2E8; }

.story__facts svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story__text h2 { margin-bottom: 24px; }

.story__text p { max-width: 65ch; }

.story__text p + p { margin-top: 18px; }

.story__lead {
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .story__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: start;
    gap: 80px;
  }

  .story__aside {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

/* ---------- Shared heading block ---------- */
.about-head { margin-bottom: 56px; }

.about-head p {
  max-width: 36rem;
  margin-top: 16px;
}

/* ---------- How we work: outlined numbers, divided columns ---------- */
.principles { display: grid; }

.principle { padding-block: 32px; }

.principle:first-child { padding-top: 0; }

.principle:last-child { padding-bottom: 0; }

.principle + .principle { border-top: 1px solid #D3D9E0; }

/* Outlined number. Fallback is solid light blue. With text-stroke support, a 3px stroke is painted
   behind a fill matching the grey background: this leaves a clean 1.5px brand-blue outline (4.2:1 on grey,
   large text) and hides the overlapping inner lines Montserrat's glyphs would otherwise show. */
.principle__num {
  display: block;
  margin-bottom: 20px;
  color: var(--light-blue);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

@supports (-webkit-text-stroke: 1px black) {
  .principle__num {
    color: var(--light-grey);
    -webkit-text-stroke: 3px var(--brand-blue);
    paint-order: stroke fill;
  }
}

.principle h3 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 1.375rem;
}

@media (min-width: 1024px) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .principle,
  .principle:first-child,
  .principle:last-child { padding: 8px 48px; }

  .principle:first-child { padding-left: 0; }
  .principle:last-child { padding-right: 0; }

  .principle + .principle {
    border-top: 0;
    border-left: 1px solid #D3D9E0;
  }
}

/* ---------- Customer quote ---------- */
.about-quote__figure {
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

.about-quote__figure::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto 32px;
  background: var(--brand-blue);
}

.about-quote blockquote { margin: 0; }

.about-quote blockquote p {
  max-width: none;
  color: var(--navy);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.about-quote figcaption {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 28px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Inline so the icon stays beside the text if the line wraps on small screens */
.about-quote__source {
  display: inline;
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-decoration: none;
}

.about-quote__source:hover { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 4px; }

.about-quote__source .icon {
  width: 1em;
  height: 1em;
  margin-right: 6px;
  vertical-align: -0.125em;
}

/* ---------- What we specialise in ---------- */
.specialise__grid {
  display: grid;
  gap: 48px;
}

.specialise__text p {
  max-width: 34rem;
  margin-top: 20px;
}

/* Portrait photo shown in full (overrides the 4:3 crop of .ring images), kept to a sensible size */
.specialise__media {
  width: 100%;
  max-width: 440px;
}

.specialise__media img { aspect-ratio: 3 / 4; }

@media (min-width: 1024px) {
  .specialise__media { justify-self: end; }
}

@media (min-width: 1024px) {
  .specialise__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 96px;
  }
}

.tick-list {
  display: grid;
  gap: 4px;
  margin-top: 28px;
}

/* Navy text keeps AA on the grey background; the tick carries the brand blue */
.tick-list a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
}

.tick-list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tick-list svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- FAQ: sticky intro + help card, accordion on the right ---------- */
.faq__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .faq__grid {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    align-items: start;
    gap: 72px;
  }

  .faq__intro {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

/* Help card */
.faq-card {
  display: grid;
  justify-items: start;
  margin-top: 32px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white-soft);
}

@media (min-width: 600px) {
  .faq-card { padding: 32px; }
}

/* Mobile and tablet: heading, then the questions, then this card */
@media (max-width: 1023px) {
  .faq__intro { display: contents; }
  .faq { order: 1; }
  .faq-card { order: 2; margin-top: 0; }
}

.faq-card :focus-visible { outline-color: var(--white); }

.faq-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.faq-card__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--light-blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-card h3 {
  margin-top: 20px;
  color: var(--white);
}

.faq-card p { margin-top: 8px; }

.faq-card__btn { margin-top: 24px; }

/* Light blue on navy: 4.9:1. Inline so the arrow stays with the text if it wraps. */
.faq-card__link {
  display: inline;
  margin-top: 16px;
  padding-block: 6px;
  color: var(--light-blue);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}

.faq-card__link .nowrap { white-space: nowrap; }

.faq-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.faq-card__link .icon {
  width: 1.1em;
  height: 1.1em;
  margin-left: 6px;
  vertical-align: -0.2em;
}

@media (max-width: 599px) {
  .faq-card__btn { width: 100%; }
}

/* Accordion items */
.faq__item {
  border-top: 1px solid #DDE2E8;
  transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease);
}

.faq__item:last-child { border-bottom: 1px solid #DDE2E8; }

/* Open item: soft tint and a 3px brand-blue bar on the left */
.faq__item:has(.faq__question[aria-expanded="true"]) {
  background: #F5F8FB;
  box-shadow: inset 3px 0 0 var(--brand-blue);
}

.faq__heading { font-size: inherit; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 20px;
  border: 0;
  background: none;
  color: var(--navy);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.faq__question[aria-expanded="false"]:hover { color: var(--brand-blue); }

.faq__question:focus-visible { outline-offset: -3px; }

/* Plus/minus in a circle: outlined when closed, filled when open */
.faq__icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1.5px solid var(--brand-blue);
  border-radius: 50%;
  transition: background-color 250ms var(--ease), transform 250ms var(--ease);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--brand-blue);
  transition: transform 250ms var(--ease), background-color 250ms var(--ease);
}

.faq__icon::after { transform: rotate(90deg); }

.faq__question[aria-expanded="true"] .faq__icon {
  background: var(--brand-blue);
  transform: rotate(180deg);
}

.faq__question[aria-expanded="true"] .faq__icon::before,
.faq__question[aria-expanded="true"] .faq__icon::after { background: var(--white); }

.faq__question[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

/* Answers are open without JavaScript; main.js adds .is-ready and collapses them */
.faq__answer {
  display: grid;
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq__answer-inner p {
  max-width: 65ch;
  padding: 0 20px 24px;
  color: var(--text);
}

.faq.is-ready .faq__answer {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 250ms var(--ease), visibility 0s linear 250ms;
}

.faq.is-ready .faq__answer.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 250ms var(--ease), visibility 0s;
}

/* ---------- Closing band ---------- */
.page-cta {
  padding-block: calc(var(--section-pad) + 16px);
  background: var(--navy);
  color: var(--white-soft);
  text-align: center;
}

.page-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-cta h2 {
  color: var(--white);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}

.page-cta p {
  max-width: 34rem;
  margin-top: 20px;
  margin-bottom: 36px;
}

@media (max-width: 599px) {
  .page-cta .btn { width: 100%; }
}


/* 20. CONTACT PAGE (contact.html)
   ========================================================================== */

/* ---------- Page hero: short, with room for the cards to overlap ---------- */
.contact-hero {
  padding-top: 36px;
  padding-bottom: 88px; /* 48px + the 40px card overlap on mobile */
  background: var(--navy);
  color: var(--white-soft);
}

.contact-hero h1 {
  max-width: 18ch;
  color: var(--white);
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);
}

.contact-hero__lead {
  max-width: 40rem;
  margin-top: 20px;
}

.contact-hero :focus-visible { outline-color: var(--white); }

@media (min-width: 1024px) {
  .contact-hero {
    padding-top: 80px;
    padding-bottom: 240px; /* 80px + the ~160px card overlap */
  }
}

/* ---------- Ways to get in touch: cards pulled up over the hero ---------- */
.contact-ways {
  position: relative;
  z-index: 1;
  margin-top: -40px;
}

@media (min-width: 1024px) {
  .contact-ways { margin-top: -160px; }
}

.contact-cards {
  display: grid;
  gap: 20px;
}

@media (min-width: 1024px) {
  .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid #DDE2E8;
  border-radius: var(--radius);
  background: var(--white);
}

@media (min-width: 600px) {
  .contact-card { padding: 32px; }
}

/* Recommended option */
.contact-card--featured {
  border: 2px solid var(--brand-blue);
  padding: 27px; /* keeps content aligned with the 1px-border cards */
}

@media (min-width: 600px) {
  .contact-card--featured { padding: 31px; }
}

/* Darker blue: small text needs 4.5:1 on the tint */
.contact-card__tag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #E7F1FA;
  color: var(--brand-blue-dark);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E7F1FA;
  color: var(--brand-blue);
}

.contact-card__icon svg { width: 28px; height: 28px; }

/* Inline line icons (the sprite icons carry their own fill/stroke) */
.contact-card__icon > svg[viewBox] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-card h2 {
  margin-top: 20px;
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0;
}

.contact-card p {
  margin-top: 8px;
  margin-bottom: 24px;
}

.contact-card__btn { margin-top: auto; }

@media (max-width: 599px) {
  .contact-card__btn { align-self: stretch; }
}

.contact-ways__fb {
  max-width: none;
  margin-top: 32px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: center;
}

.contact-ways__fb a { font-weight: 600; text-underline-offset: 4px; }

/* ---------- Where we work: details + map ---------- */
.where__grid {
  display: grid;
  gap: 48px;
}

.area-map[hidden] { display: none; }

/* Map hidden: on desktop the towns and the details list sit side by side */
@media (min-width: 1024px) {
  .where__grid:not(:has(> .area-map:not([hidden]))) .where__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 80px;
    align-items: start;
  }

  .where__grid:not(:has(> .area-map:not([hidden]))) .where__details > :is(h2, .where__intro) { grid-column: 1 / -1; }

  .where__grid:not(:has(> .area-map:not([hidden]))) .details {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 1024px) {
  .where__grid:not(:has(> .area-map:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }

  .where__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: center;
    gap: 80px;
  }
}

.where__intro {
  max-width: 34rem;
  margin-top: 20px;
}

/* Compact towns list: always two columns, no row dividers */
.towns--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  margin-top: 24px;
}

.towns--compact .town,
.towns--compact .town + .town,
.towns--compact .town:nth-child(n + 3) {
  padding-block: 6px;
  border-top: 0;
  font-size: 1rem;
}

.towns--compact .town__pin { width: 18px; height: 18px; }

/* Details list */
.details {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding-top: 28px;
  border-top: 1px solid #D3D9E0;
}

.details__row { display: grid; gap: 2px; }

.details__row[hidden] { display: none; }

.details dt {
  color: var(--navy);
  font-weight: 600;
  line-height: 1.4;
}

.details dd {
  margin: 0;
  line-height: 1.6;
}

/* Darker blue: small link text needs 4.5:1 on the grey background */
.details a {
  color: var(--brand-blue-dark);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ---------- Map (loads only on request) ---------- */
.area-map {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
}

@media (min-width: 768px) {
  .area-map { aspect-ratio: 4 / 3; }
}

.area-map__placeholder,
.area-map__canvas {
  position: absolute;
  inset: 0;
}

.area-map__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  border: 1px solid #D3D9E0;
  border-radius: var(--radius);
  background: #E3E8ED;
  text-align: center;
}

.area-map__placeholder[hidden],
.area-map__canvas[hidden] { display: none; }

.area-map__pin {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-map__title {
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 600;
}

.area-map__note {
  max-width: 22rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.area-map__error {
  max-width: 22rem;
  color: var(--navy);
  font-weight: 600;
}

.area-map__error:empty { display: none; }

.area-map__canvas:focus-visible { outline-offset: -3px; }

/* ---------- Questions first? ---------- */
.questions-band { padding-block: 72px; }

.questions-band__inner {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

/* Inline so the arrow stays with the last word if the link wraps */
.questions-band .text-link { display: inline; }

.questions-band .nowrap { white-space: nowrap; }

.questions-band .text-link .icon { margin-left: 8px; vertical-align: -0.2em; }

.questions-band p {
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}


/* 21. GALLERY PAGE (gallery.html)
   ========================================================================== */

/* ---------- Page hero ---------- */
.gallery-hero {
  padding-block: 36px 56px;
  background: var(--navy);
  color: var(--white-soft);
}

.gallery-hero h1 {
  max-width: 18ch;
  color: var(--white);
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);
}

.gallery-hero__lead {
  max-width: 40rem;
  margin-top: 20px;
}

.gallery-hero :focus-visible { outline-color: var(--white); }

@media (min-width: 1024px) {
  .gallery-hero { padding-block: 80px; }
}

/* ---------- Repair tiles: one split tile per repair (shared .split-tile, as on the homepage) ---------- */
/* The whole tile is a button that opens the repair in the lightbox */
.repair-tile__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: zoom-in;
}

.repair-tile__btn:focus-visible { outline-offset: 3px; }

.repair-tile__btn .split-tile { max-height: none; }

.repair-tile__btn .split-tile__half img { transition: transform 300ms var(--ease); }

.repair-tile__btn:hover .split-tile__half img,
.repair-tile__btn:focus-visible .split-tile__half img { transform: scale(1.03); }

/* Subtle expand icon, bottom right: hover/focus on desktop only */
.repair-tile__expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(10, 27, 61, 0.7);
  color: var(--white);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .repair-tile__btn:hover .repair-tile__expand,
  .repair-tile__btn:focus-visible .repair-tile__expand { opacity: 1; }
}

.repair-tile__meta { margin-top: 10px; }

/* Darker blue: small text needs 4.5:1 on the tint */
.service-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: #E7F1FA;
  color: var(--brand-blue-dark);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.service-tag[hidden] { display: none; }

/* ---------- More repairs: filters, grid, empty state ---------- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.gallery-filters[hidden] { display: none; }

.filter-chip {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #C9D1DB;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.filter-chip:hover { border-color: var(--navy); }

.filter-chip[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

/* Grid: 1 column on phones, 2 on tablets, 3 on desktop */
.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.repair[hidden] { display: none; }

/* Fade in when a filter brings a card back (not with reduced motion) */
.repair.is-entering { animation: repair-in 250ms var(--ease); }

@keyframes repair-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Lightbox ---------- */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 72px 16px 80px; /* room for previous/next at the bottom on phones */
  background: rgba(10, 27, 61, 0.95);
  color: var(--white-soft);
  touch-action: pan-y pinch-zoom; /* horizontal swipes go to the repair navigation */
}

.lightbox[hidden] { display: none; }

@media (min-width: 768px) {
  .lightbox { padding: 72px 88px 40px; }
}

.lightbox :focus-visible { outline-color: var(--white); }

.lightbox__stage {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}

/* As large as the screen allows, keeping the photo's own shape (set by main.js) */
.compare--lightbox {
  aspect-ratio: var(--rw, 4) / var(--rh, 3);
  width: min(100%, calc((100vh - 230px) * var(--rw, 4) / var(--rh, 3)));
  width: min(100%, calc((100dvh - 230px) * var(--rw, 4) / var(--rh, 3)));
}

.lightbox__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  text-align: center;
}

.service-tag--dark {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.lightbox__caption {
  color: var(--white);
  font-weight: 600;
}

.lightbox__counter {
  flex-basis: 100%;
  color: var(--white-soft);
  font-size: 0.875rem;
}

.lightbox__counter[hidden],
.lightbox__nav[hidden] { display: none; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }

.lightbox__close svg,
.lightbox__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__close { top: 14px; right: 14px; }

.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

/* Phones: previous/next sit at the bottom so they don't cover the photo */
@media (max-width: 767px) {
  .lightbox__nav { top: auto; bottom: 14px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .repair.is-entering { animation: none; }
}


/* 22. REVIEW LINE (reusable: gallery and contact pages)
   ========================================================================== */
.review-line {
  max-width: 40rem;
  margin: 0 auto;
  padding-left: 20px;
  border-left: 3px solid var(--brand-blue);
  text-align: left;
}

.review-line blockquote { margin: 0; }

.review-line blockquote p {
  max-width: none;
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
}

.review-line figcaption { margin-top: 10px; }

.review-line figcaption a {
  display: inline;
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-decoration: none;
}

.review-line figcaption a:hover { color: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 3px; }

.review-line figcaption .icon {
  width: 1em;
  height: 1em;
  margin-right: 6px;
  vertical-align: -0.125em;
}

/* Gallery: review and quote prompt under the grid */
.gallery-cta {
  display: grid;
  justify-items: center;
  margin-top: 64px;
  text-align: center;
}

.gallery-cta__prompt {
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 600;
}

@media (max-width: 599px) {
  .gallery-cta .btn { width: 100%; }
}

/* Contact: review between the cards and the Facebook line */
.contact-ways__review { margin-top: 48px; }

/* Lightbox: quote link under the caption */
.lightbox__quote {
  flex-basis: 100%;
  color: #6CB0E0; /* light blue tint: AA on the navy overlay */
  font-size: var(--fs-small);
  font-weight: 600;
  text-underline-offset: 3px;
}


/* 23. PRIVACY AND 404 PAGES
   ========================================================================== */
/* Simple navy hero with no image (no overlap into the next section) */
.page-hero--simple { padding-bottom: 56px; }

.page-hero--simple + .section { padding-top: var(--section-pad); }

@media (min-width: 1024px) {
  .page-hero--simple { padding-block: 80px; }
}

/* Readable policy text */
.legal-text { max-width: 70ch; }

.legal-text h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.5rem;
}

.legal-text p + p,
.legal-text ul { margin-top: 14px; }

.legal-text ul { padding-left: 1.25rem; list-style: disc; }

/* 404 */
.not-found { padding-bottom: 96px; }

.not-found__text {
  margin-top: 16px;
  margin-bottom: 32px;
  font-size: 1.125rem;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 28px;
}

.not-found__links a {
  display: inline-block;
  padding-block: 8px;
  color: var(--white);
  font-weight: 600;
  text-underline-offset: 4px;
}

.site-footer__legal[aria-current="page"] { color: var(--white); }


/* 24. OLDER BROWSER FALLBACK (no aspect-ratio support, e.g. iOS 14 and earlier)
   ==========================================================================
   Sliders and tiles get their height from aspect-ratio. Without it they would collapse to zero height,
   so give them the same shape with the padding trick. Modern browsers ignore this block. */
@supports not (aspect-ratio: 1 / 1) {
  .compare::before {
    content: "";
    display: block;
    padding-top: 100%; /* hero: square */
  }

  .compare--lightbox::before { padding-top: calc(var(--rh, 3) / var(--rw, 4) * 100%); }

  .compare__img,
  .compare__before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* Split tile halves: each half is 2:3 so the pair is 4:3 */
  .split-tile__half { padding-top: 150%; }

}


/* 25. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .wa-float:hover { transform: none; }
}