/* ==========================================================================
   chikchak styles
   1. Variables (colours, fonts, spacing, sizing). Change a value here and it
      updates everywhere on the site.
   2. Base, buttons, hero, responsive
   ========================================================================== */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  /* ---- Brand colours (taken from the logo PDF) ---- */
  --color-purple: #38268f;
  --color-purple-deep: #2a1b74;
  --color-purple-darkest: #1f1358;
  --color-purple-soft: #ece9f8;
  --color-yellow: #fcbd0f;
  --color-yellow-dark: #e5a800;

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-page: #f3f1fa;
  --color-ink: #1b1340;
  --color-ink-muted: #5d5780;
  --color-line: #e2def2;

  /* ---- Colours by role ---- */
  --color-bg: var(--color-page);
  --color-surface: var(--color-white);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.78);
  --color-accent: var(--color-yellow);
  --color-accent-hover: var(--color-yellow-dark);
  --color-on-accent: var(--color-purple-darkest);
  --color-glass: rgba(255, 255, 255, 0.1);
  --color-glass-border: rgba(255, 255, 255, 0.18);
  --color-review-bg: rgba(255, 255, 255, 0.035);     /* review cards: raise the last number to make them more solid */
  --color-review-border: rgba(255, 255, 255, 0.13);
  --color-pattern: rgba(252, 189, 15, 0.3);
  --color-scrim: rgba(31, 19, 88, 0.92);  /* dark fade behind text on photo cards */
  --color-chip: rgba(31, 19, 88, 0.55);   /* arrow chip on photo cards, dark enough to show on bright photos */
  --color-focus: var(--color-yellow);
  --color-open: #1fa85b;                      /* the "open now" dot */
  --color-open-glow: rgba(31, 168, 91, 0.2);

  /* ---- 3D map colours (read by assets/js/area-map.js) ---- */
  --color-map-sky: #e9e5f8;
  --color-map-ground: #d3ccf0;
  --color-map-road: #ffffff;
  --color-map-park: #bfe6cc;
  --color-map-tree: #63b98a;
  --color-map-box: #d9a45b;
  --color-map-pavement: #e7e2f7;
  --color-map-dash: #cfc7ee;
  --color-map-water: #a9c9f5;
  --color-map-water-edge: #8fb3e6;
  --color-map-tree-light: #86cf9f;
  --color-shine: rgba(255, 255, 255, 0.55);

  /* ---- Fonts ---- */
  --font-display: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Red Hat Text", "Segoe UI", system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Type scale ---- */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-hero: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem);
  --text-h2: clamp(2rem, 1.1rem + 3vw, 3.25rem);
  --text-step: clamp(1.25rem, 1rem + 1vw, 1.75rem);

  --leading-tight: 1.04;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-tight: -0.025em;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(3.5rem, 8vw, 7rem);    /* top and bottom padding of a section */
  --space-hero-top: clamp(3rem, 7vw, 7rem);      /* gap between nav and headline */
  --space-hero-bottom: clamp(3.5rem, 7vw, 7rem); /* gap between hero content and the review cards */

  /* ---- Sizing ---- */
  --size-container: 82.5rem;
  --size-page-pad: clamp(1.25rem, 4vw, 4rem);
  /* side padding that keeps content inside the container on wide screens */
  --size-edge: max(var(--size-page-pad), calc((100% - var(--size-container)) / 2));
  --size-logo: 3.25rem;
  --size-control: 3rem;
  --size-control-sm: 2.5rem;
  --size-icon: 1.125rem;
  --size-text-measure: 32rem;
  --size-review-card: 21rem;
  --size-footer-logo: clamp(4.5rem, 9vw, 8rem);    /* the big logo at the top of the footer */
  --size-credit-card: 19rem;                       /* the Highlinq card */
  --size-footer-road: clamp(8rem, 13vw, 11.5rem);  /* height of the strip the van drives along */
  --size-why-visual: 34rem;       /* width of the van in the Why section */
  --size-chip: 3.5rem;            /* hexagon icon chips */
  --size-step-img: 11rem;         /* tilted photo on the lit-up step */
  --size-service-tile: 15rem;     /* width of a service card when the row scrolls sideways */
  --ratio-service-tile: 2 / 3;    /* shape of a service card: width / height. Matches the 2:3 photos. */
  --size-map-embed: 22rem;        /* least height of the Google map on the contact page */
  --size-map-embed-small: 27rem;  /* the map's height on phones, tall enough that the pin clears our address card */
  --size-map-crop: 7rem;          /* how much of the top of the Google map is hidden (its grey address box) */
  --size-map-height: clamp(26rem, 46vw, 44rem);
  --size-van: 108%;   /* van width inside its column */
  --size-hex: 62%;   /* yellow hexagon behind the van */

  /* ---- Radius ---- */
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 2px rgba(31, 19, 88, 0.06), 0 18px 40px -18px rgba(31, 19, 88, 0.35);
  --shadow-tile: 0 24px 40px -22px rgba(31, 19, 88, 0.55);
  --shadow-soft: 0 1px 2px rgba(31, 19, 88, 0.04), 0 10px 22px -16px rgba(31, 19, 88, 0.3);  /* light lift for small cards */
  --shadow-glow: 0 10px 28px -6px rgba(252, 189, 15, 0.65);
  --shadow-van: 0 30px 30px rgba(15, 8, 50, 0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot, gives the bounce */
  --duration-fast: 150ms;
  --duration-med: 300ms;
  --duration-shine: 6s;    /* light sweep across the main button */
  --duration-ring: 5s;     /* phone icon ringing */
  --duration-slow: 700ms;
  --duration-reveal: 900ms;  /* van rolling in on the Why section */
  --duration-marquee: 90s;  /* time for one full loop of the reviews */
}

/* ---- Fonts (self-hosted, no Google Fonts request) ---- */
@font-face {
  font-family: "Red Hat Display";
  src: url("../assets/fonts/red-hat-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Text";
  src: url("../assets/fonts/red-hat-text-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

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

p,
h1 {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Keyboard users can jump past the header. Only shows when focused. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-bold);
  transform: translateY(-200%);
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  width: var(--size-icon);
  height: var(--size-icon);
  flex: none;
}

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control);
  padding: 0 var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-med) var(--ease-spring),
    box-shadow var(--duration-med) var(--ease-out);
}

/* Lift on hover, squash on press */
.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(0) scale(0.96);
  transition-duration: var(--duration-fast);
}

.btn .icon {
  transition: transform var(--duration-med) var(--ease-spring);
}

/* The arrow nudges up and out, the WhatsApp icon pops */
.btn:hover .icon {
  transform: translate(3px, -3px);
}

.btn--main:hover .icon {
  transform: scale(1.2) rotate(-8deg);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--accent:hover {
  background: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* Strip of light that sweeps across the button */
.btn--accent::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-shine), transparent);
  transform: translateX(-160%) skewX(-20deg);
  pointer-events: none;
}

.btn--accent:hover::after {
  transform: translateX(360%) skewX(-20deg);
  transition: transform var(--duration-slow) var(--ease-out);
}

.btn--sm {
  min-height: var(--size-control-sm);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

/* The main WhatsApp button: the light sweeps across on its own every few seconds,
   so it still feels alive on phones where there is no hover */
@media (prefers-reduced-motion: no-preference) {
  .btn--main::after {
    animation: btn-shine var(--duration-shine) var(--ease-out) infinite;
  }

  /* The phone icon rings every few seconds, and straight away on hover */
  .btn--main .icon {
    transform-origin: 50% 50%;
    animation: icon-ring var(--duration-ring) ease-in-out infinite;
  }

  .btn--main:hover .icon {
    animation-duration: var(--duration-slow);
  }

  @keyframes btn-shine {
    0%,
    65% {
      transform: translateX(-160%) skewX(-20deg);
    }

    100% {
      transform: translateX(360%) skewX(-20deg);
    }
  }

  @keyframes icon-ring {
    0%,
    82%,
    100% {
      transform: rotate(0);
    }

    85% {
      transform: rotate(-16deg);
    }

    88% {
      transform: rotate(14deg);
    }

    91% {
      transform: rotate(-12deg);
    }

    94% {
      transform: rotate(9deg);
    }

    97% {
      transform: rotate(-5deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn .icon,
  .btn--accent:hover::after {
    transition: none;
  }

  .btn:hover,
  .btn:hover .icon {
    transform: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-bottom: 0;
}

/* Full width: the purple runs edge to edge, the content stays in the container */
.hero__frame {
  position: relative;
  overflow: hidden;
  background: var(--color-purple-deep);
  color: var(--color-text-on-dark);
}

/* ---- Top contact strip ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--size-edge);
  background: var(--color-purple-darkest);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-on-dark-muted);
}

.topbar__item .icon {
  color: var(--color-accent);
}

a.topbar__item:hover {
  color: var(--color-text-on-dark);
}

/* ---- Hero body: purple panel with the cube pattern from the van ---- */
.hero__body {
  position: relative;
  /* no side padding here: the nav and the headline row carry it, so the reviews can run edge to edge */
  padding: var(--space-6) 0 var(--space-7);
  background: linear-gradient(115deg, var(--color-purple-deep) 0%, var(--color-purple) 100%);
  isolation: isolate;
}

.hero__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-pattern);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    linear-gradient(100deg, transparent 38%, #000 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    linear-gradient(100deg, transparent 38%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---- Navigation ---- */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--size-edge);
}

.nav__logo img {
  height: var(--size-logo);
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-pill);
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav__link {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-on-dark);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.nav__link:hover {
  background: var(--color-glass);
}

.nav__link.is-active {
  background: var(--color-surface);
  color: var(--color-purple);
  font-weight: var(--weight-bold);
}

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-pill);
  background: var(--color-glass);
  color: var(--color-text-on-dark);
  cursor: pointer;
}

/* ---- Headline + van ---- */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-hero-top) var(--size-edge) 0;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.hero__accent {
  color: var(--color-accent);
}

.hero__nowrap {
  white-space: nowrap;
}

.hero__lead {
  max-width: var(--size-text-measure);
  margin-top: var(--space-6);
  font-size: var(--text-md);
  color: var(--color-text-on-dark-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-7);
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.phone-link__icon {
  display: grid;
  place-items: center;
  width: var(--size-control);
  height: var(--size-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-purple);
  transition: background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-med) var(--ease-spring);
}

.phone-link:hover .phone-link__icon {
  background: var(--color-accent);
  transform: scale(1.1);
}

.phone-link:active .phone-link__icon {
  transform: scale(0.94);
}

.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}

/* Yellow hexagon from the logo, sitting behind the van */
.hero__hex {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size-hex);
  aspect-ratio: 0.866;
  background: var(--color-accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transform: translate(-28%, -54%);
}

.hero__van {
  position: relative;
  width: var(--size-van);
  filter: drop-shadow(var(--shadow-van));
}

/* ---- Reviews sliding along the bottom edge ---- */
.reviews {
  position: relative;
  margin-top: var(--space-hero-bottom);
  overflow: hidden;
}

.reviews__track {
  display: flex;
  width: max-content;
  padding: 0;
}

.reviews__group {
  display: flex;
  gap: var(--space-4);
  padding-right: var(--space-4);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: var(--size-review-card);
  padding: var(--space-5);
  border: 1px solid var(--color-review-border);
  border-radius: var(--radius-md);
  background: var(--color-review-bg);
  color: var(--color-text-on-dark);
  /* a light blur softens the pattern lines behind the text so it stays readable */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-card__stars {
  display: inline-flex;
  gap: var(--space-1);
  color: var(--color-accent);
}

.review-card__tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-glass);
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.review-card__text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-card__avatar {
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-pill);
  background: var(--color-glass);
  color: var(--color-text-on-dark);
}

.review-card__name,
.review-card__job {
  display: block;
  line-height: var(--leading-snug);
}

.review-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

.review-card__job {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
}

/* The slide: moves one full group to the left, then loops. Pauses on hover. */
@media (prefers-reduced-motion: no-preference) {
  .reviews__track {
    animation: reviews-slide var(--duration-marquee) linear infinite;
  }

  .reviews:hover .reviews__track {
    animation-play-state: paused;
  }

  @keyframes reviews-slide {
    to {
      transform: translateX(-50%);
    }
  }
}

/* No motion wanted: let people swipe through the first set instead */
@media (prefers-reduced-motion: reduce) {
  .reviews {
    overflow-x: auto;
  }

  .reviews__group[aria-hidden="true"] {
    display: none;
  }

  .reviews__track {
    padding-left: var(--size-page-pad);
  }
}

/* ---- One page-load moment: the van rolls in ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero__van {
    animation: van-in var(--duration-slow) var(--ease-out) both;
  }

  .hero__hex {
    animation: hex-in var(--duration-slow) var(--ease-out) both;
  }

  @keyframes van-in {
    from {
      opacity: 0;
      transform: translateX(8%);
    }
  }

  @keyframes hex-in {
    from {
      opacity: 0;
      transform: translate(-28%, -54%) scale(0.85);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Services: tall photo cards
   ========================================================================== */
.services {
  padding: var(--space-section) var(--size-edge) 0;
}

.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-6) var(--space-8);
  margin-bottom: var(--space-7);
}

.pill-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-purple);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.services__intro {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.services__intro .btn {
  margin-top: var(--space-5);
}

/* Button with the arrow in its own dark circle */
.btn--bubble {
  padding-right: var(--space-2);
  gap: var(--space-3);
}

.btn__bubble {
  display: grid;
  place-items: center;
  width: calc(var(--size-control) - var(--space-3));
  height: calc(var(--size-control) - var(--space-3));
  border-radius: var(--radius-pill);
  background: var(--color-purple-darkest);
  color: var(--color-white);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.service-tile {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio-service-tile);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-purple-deep);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-tile);
  isolation: isolate;
  transition: transform var(--duration-med) var(--ease-out);
}

.service-tile:hover {
  transform: translateY(-6px);
}

/* The picture. Until a photo is added it shows the brand pattern and an icon. */
.service-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  place-items: center;
  padding-bottom: 30%;
  background:
    radial-gradient(90% 60% at 50% 35%, rgba(252, 189, 15, 0.22), transparent 70%),
    linear-gradient(160deg, var(--color-purple) 0%, var(--color-purple-deep) 100%);
  color: var(--color-accent);
  transition: transform var(--duration-slow) var(--ease-out);
}

.service-tile__media .icon {
  width: 34%;
  height: auto;
  aspect-ratio: 1;
  stroke-width: 1.2;
}

.service-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-tile:hover .service-tile__media {
  transform: scale(1.06);
}

/* Dark fade so the title reads on any photo */
.service-tile::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: -1;
  background: linear-gradient(transparent, var(--color-scrim));
}

.service-tile__arrow {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-sm);
  background: var(--color-chip);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.service-tile__arrow .icon {
  transition: transform var(--duration-med) var(--ease-spring);
}

.service-tile:hover .service-tile__arrow {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.service-tile:hover .service-tile__arrow .icon {
  transform: translate(2px, -2px);
}

.service-tile__body {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-5) var(--space-4);
}

.service-tile__title,
.service-tile__text {
  display: block;
}

.service-tile__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.service-tile__text {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark-muted);
}

@media (prefers-reduced-motion: reduce) {
  .service-tile,
  .service-tile__media {
    transition: none;
  }

  .service-tile:hover,
  .service-tile:hover .service-tile__media {
    transform: none;
  }
}

/* ==========================================================================
   How it works: numbered rows, the active one lights up
   ========================================================================== */
.steps {
  padding: var(--space-section) var(--size-edge) 0;
}

.steps__head {
  max-width: 40rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.steps__accent {
  color: var(--color-purple);
}

.steps__intro {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-med) var(--ease-out), border-color var(--duration-med) var(--ease-out);
}

.step__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.25fr) var(--size-step-img) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: inherit;
  transition: color var(--duration-med) var(--ease-out);
}

.step__num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: color var(--duration-med) var(--ease-out);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--text-step);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.step__text {
  color: var(--color-text-muted);
  transition: color var(--duration-med) var(--ease-out);
}

/* The photo: hidden until its row is active, then pops out tilted over the row edges */
.step__img {
  position: relative;
  z-index: 2;
  width: var(--size-step-img);
  height: calc(var(--size-step-img) * 0.85);
  margin: calc(var(--space-7) * -1) 0;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: var(--shadow-tile);
  opacity: 0;
  transform: rotate(0deg) scale(0.8);
  transition: opacity var(--duration-med) var(--ease-out), transform var(--duration-slow) var(--ease-spring);
  pointer-events: none;
}

.step__arrow {
  display: grid;
  place-items: center;
  width: var(--size-control);
  height: var(--size-control);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-med) var(--ease-out), color var(--duration-med) var(--ease-out),
    border-color var(--duration-med) var(--ease-out);
}

.step__arrow .icon {
  transition: transform var(--duration-med) var(--ease-spring);
}

/* Active row */
.step.is-active {
  z-index: 1;
  background: var(--color-purple-darkest);
  border-color: transparent;
}

.step.is-active .step__row {
  color: var(--color-text-on-dark);
}

.step.is-active .step__num {
  color: var(--color-accent);
}

.step.is-active .step__text {
  color: var(--color-text-on-dark-muted);
}

.step.is-active .step__img {
  opacity: 1;
  transform: rotate(7deg) scale(1);
}

.step.is-active .step__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.step.is-active .step__arrow .icon {
  transform: scale(1.15);
}

.step__row {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.steps__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

@media (prefers-reduced-motion: reduce) {
  .step,
  .step__row,
  .step__img,
  .step__arrow,
  .step__arrow .icon {
    transition: none;
  }
}

/* ==========================================================================
   Why chikchak: van in the middle, two reasons on each side
   ========================================================================== */
.why {
  position: relative;
  margin-top: var(--space-section);
  padding: var(--space-section) var(--size-edge);
  background: var(--color-surface);
  overflow: hidden;
  isolation: isolate;
}

/* Faint cube pattern behind everything, strongest in the middle */
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-purple-soft);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    radial-gradient(50% 60% at 50% 55%, #000 0%, transparent 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    radial-gradient(50% 60% at 50% 55%, #000 0%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.why__head {
  max-width: 40rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.why__accent {
  color: var(--color-purple);
}

.why__intro {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--size-why-visual)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}

.why__list {
  display: grid;
  gap: var(--space-8);
}

.why__item {
  position: relative;
  max-width: 19rem;
}

.why__list--left .why__item {
  justify-self: end;
  text-align: right;
}

/* Hexagon icon chip, with a dashed line reaching toward the van */
.why__chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size-chip);
  height: calc(var(--size-chip) * 1.1547);
  margin-bottom: var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.why__chip .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.why__item::after {
  content: "";
  position: absolute;
  top: calc(var(--size-chip) * 0.577);
  width: var(--space-7);
  border-top: 2px dashed var(--color-line);
}

.why__list--left .why__item::after {
  left: calc(100% + var(--space-3));
}

.why__list--right .why__item::after {
  right: calc(100% + var(--space-3));
}

.why__item-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.why__item-text {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* The van on two stacked hexagons */
.why__visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-8) 0;
}

.why__hex {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  aspect-ratio: 0.866;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.why__hex--back {
  background: var(--color-purple);
  transform: translate(-40%, -44%);
}

.why__hex--front {
  background: var(--color-accent);
  transform: translate(-54%, -52%);
}

.why__van {
  position: relative;
  width: 100%;
  max-width: none;
  filter: drop-shadow(0 28px 22px rgba(31, 19, 88, 0.35));
}

.why__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

/* Scroll reveal. Only hides things when the script has switched it on. */
.why.has-reveal .why__van,
.why.has-reveal .why__hex,
.why.has-reveal .why__item {
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}

.why.has-reveal:not(.is-inview) .why__van {
  opacity: 0;
  transform: translateX(18%);
}

.why.has-reveal:not(.is-inview) .why__hex--front {
  opacity: 0;
  transform: translate(-54%, -52%) scale(0.7);
}

.why.has-reveal:not(.is-inview) .why__hex--back {
  opacity: 0;
  transform: translate(-54%, -52%) scale(0.7);
}

.why.has-reveal:not(.is-inview) .why__item {
  opacity: 0;
  transform: translateY(1.5rem);
}

.why.has-reveal .why__list .why__item:nth-child(1) { transition-delay: 250ms; }
.why.has-reveal .why__list .why__item:nth-child(2) { transition-delay: 400ms; }
.why.has-reveal .why__hex--back { transition-delay: 150ms; }

/* ==========================================================================
   Area: 3D map section
   ========================================================================== */
h2,
h3 {
  margin: 0;
}

.area {
  padding: var(--space-section) 0 0;
}

.area__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-6) var(--space-8);
  margin-bottom: var(--space-7);
  padding: 0 var(--size-edge);
}

.area__title,
.services__title,
.steps__title,
.why__title,
.contact__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.area__accent {
  color: var(--color-purple);
}

.area__intro {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--space-1);
  font-weight: var(--weight-bold);
  color: var(--color-purple);
}

.text-link .icon {
  transition: transform var(--duration-med) var(--ease-spring);
}

.text-link:hover .icon {
  transform: translate(3px, -3px);
}

/* Full width band. The map is bigger than the band, so its edges never show. */
.area-map__stage {
  position: relative;
  height: var(--size-map-height);
  overflow: hidden;
  background: var(--color-map-ground);
}

/* The top of the band melts into the page instead of ending in a hard line */
.area-map__stage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-8);
  background: linear-gradient(var(--color-bg), transparent);
  pointer-events: none;
}

.area-map__canvas,
.area-map__labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.area-map__labels {
  pointer-events: none;
}

.area-map__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  text-align: center;
}

.is-live .area-map__fallback {
  display: none;
}

/* Road names floating over the map */
.area-map__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-purple-darkest);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity var(--duration-med) var(--ease-out);
  will-change: transform;
}

.area-map__label--park {
  background: var(--color-map-tree);
  color: var(--color-purple-darkest);
}

.area-map__label--water {
  background: var(--color-map-water);
  color: var(--color-purple-darkest);
}

/* Little status card: what the van is dropping off right now */
.area-map__status {
  position: absolute;
  left: var(--size-edge);
  bottom: var(--space-5);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.area-map__status-icon {
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.area-map__status-state,
.area-map__status-job {
  display: block;
  line-height: var(--leading-snug);
}

.area-map__status-state {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.area-map__status-job {
  min-width: 13rem;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

.area-map__status-dots {
  display: flex;
  gap: var(--space-1);
}

.area-map__status-dots span {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-line);
  transition: background-color var(--duration-med) var(--ease-out),
    transform var(--duration-med) var(--ease-spring);
}

.area-map__status-dots span.is-done {
  background: var(--color-accent);
  transform: scale(1.25);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64rem) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav__links {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-3));
    left: var(--size-edge);
    right: var(--size-edge);
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-purple-darkest);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__link {
    padding: var(--space-3) var(--space-4);
  }
}

/* ==========================================================================
   Contact: light section, centred heading, a row of four cards
   ========================================================================== */
.contact {
  position: relative;
  padding: var(--space-section) var(--size-edge);
  background: var(--color-surface);
  isolation: isolate;
}

/* Soft purple and yellow glow with the cube pattern fading out from the top */
.contact::before,
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.contact::before {
  background:
    radial-gradient(40% 55% at 30% 0%, rgba(56, 38, 143, 0.12), transparent 70%),
    radial-gradient(35% 50% at 72% 0%, rgba(252, 189, 15, 0.16), transparent 70%);
}

.contact::after {
  background-color: var(--color-line);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    linear-gradient(#000 0%, transparent 70%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    linear-gradient(#000 0%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.contact__head {
  max-width: 40rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.contact__mark {
  width: var(--size-control);
  height: var(--size-control);
  margin: 0 auto var(--space-4);
}

.contact__intro {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.contact-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(31, 19, 88, 0.05);
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out),
    border-color var(--duration-med) var(--ease-out);
}

.contact-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-purple);
  box-shadow: var(--shadow-card);
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: var(--size-control);
  height: var(--size-control);
  margin-bottom: var(--space-7);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-purple);
  transition: background-color var(--duration-med) var(--ease-out), border-color var(--duration-med) var(--ease-out);
}

.contact-card:hover .contact-card__icon {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.contact-card__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.contact-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.contact-card__text {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-card__link {
  margin-top: auto;
  padding-top: var(--space-4);
  font-weight: var(--weight-bold);
  color: var(--color-purple);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* "Open now" dot, used in the footer's opening hours column */
.hours__dot {
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.35;
}

.hours__dot.is-open {
  background: var(--color-open);
  box-shadow: 0 0 0 4px var(--color-open-glow);
  opacity: 1;
}

/* ==========================================================================
   Footer: big logo on a dark band, a yellow panel of links, the Highlinq card
   ========================================================================== */
.footer {
  background: var(--color-purple-darkest);
  color: var(--color-text-on-dark);
  overflow-x: clip;
}

.footer__brand {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) var(--size-edge) var(--space-7);
}

.footer__logo {
  width: auto;
  height: var(--size-footer-logo);
}

.footer__tagline {
  max-width: 16rem;
  font-family: var(--font-display);
  font-size: var(--text-step);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-align: left;
}

.footer__tagline span {
  color: var(--color-accent);
}

.footer__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-credit-card);
  align-items: center;
  gap: var(--space-8);
  margin: 0 var(--size-edge);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.footer__headline {
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.footer__headline span {
  color: var(--color-purple);
}

.footer__cols {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

.footer__col {
  display: grid;
  align-content: start;
  align-self: start;
  gap: var(--space-2);
  min-width: 0;
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.footer__col-title {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  opacity: 0.7;
}

.footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

.footer__status[hidden] {
  display: none;
}

.footer__col a {
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.footer__col a:hover {
  border-color: currentColor;
}

.footer__actions {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.footer__icons {
  display: flex;
  gap: var(--space-2);
}

.footer__icons a {
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-purple);
  transition: transform var(--duration-med) var(--ease-spring);
}

.footer__icons a:hover {
  transform: translateY(-3px) scale(1.08);
}

.footer__button {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-purple-darkest);
  color: var(--color-white);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: transform var(--duration-med) var(--ease-spring), background-color var(--duration-fast) var(--ease-out);
}

.footer__button:hover {
  transform: translateY(-3px);
  background: var(--color-purple);
}

/* Highlinq card: tilted, with a paler card peeking out behind it */
.credit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  color: var(--color-white);
  transform: rotate(4deg);
  transition: transform var(--duration-med) var(--ease-spring);
}

/* two layers behind the content: the pale card at the back, the purple card on top of it */
.credit-card::before,
.credit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.credit-card::before {
  z-index: -2;
  background: var(--color-surface);
  opacity: 0.7;
  transform: rotate(-9deg) translate(-0.5rem, 0.5rem);
  transition: transform var(--duration-med) var(--ease-spring);
}

.credit-card::after {
  z-index: -1;
  background: var(--color-purple);
}

.credit-card:hover {
  transform: rotate(1deg) translateY(-4px);
}

.credit-card:hover::before {
  transform: rotate(-5deg) translate(-0.5rem, 0.5rem);
}

/* A tiny browser window, standing in for "a website" */
.credit-card__window {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.credit-card__dots {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.credit-card__dots i {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-line);
}

.credit-card__dots i:first-child {
  background: var(--color-accent);
}

/* Highlinq logo in the little browser window */
.credit-card__logo {
  justify-self: center;
  width: 72%;
  height: auto;
  margin: var(--space-2) 0 var(--space-1);
}

.credit-card__chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-purple);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.credit-card__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-step);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.credit-card__text {
  margin-top: var(--space-1);
  padding-right: var(--space-7);
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
}

.credit-card__text u {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  text-underline-offset: 3px;
}

.credit-card__arrow {
  position: absolute;
  right: calc(var(--space-4) * -1);
  bottom: calc(var(--space-4) * -1);
  display: grid;
  place-items: center;
  width: var(--size-chip);
  height: var(--size-chip);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-purple);
  box-shadow: var(--shadow-card);
}

.credit-card__arrow .icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--duration-med) var(--ease-spring);
}

.credit-card:hover .credit-card__arrow .icon {
  transform: translate(3px, -3px);
}

.footer__legal {
  padding: var(--space-6) var(--size-edge) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  text-align: center;
}

/* The strip at the very bottom where the 3D van drives back and forth */
.footer-road {
  position: relative;
  height: var(--size-footer-road);
  overflow: hidden;
}

.footer-road__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Contact cards: two by two when four across gets tight */
@media (max-width: 68rem) {
  .contact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Footer panel: the Highlinq card drops under the links when space gets tight */
@media (max-width: 68rem) and (min-width: 56.01rem) {
  .footer__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .credit-card {
    width: var(--size-credit-card);
    margin: 0 auto;
  }
}

/* Why: not enough room for three columns, so the van goes on top and the
   four reasons sit in a two by two grid under it */
@media (max-width: 68rem) {
  .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-6) var(--space-5);
  }

  .why__visual {
    grid-column: 1 / -1;
    order: -1;
    width: min(100%, 30rem);
    margin: 0 auto;
    padding: var(--space-6) 0;
  }

  /* drop the two list wrappers so the four items line up in rows */
  .why__list {
    display: contents;
  }

  .why__item,
  .why__list--left .why__item {
    justify-self: start;
    max-width: none;
    text-align: left;
  }

  .why__item::after {
    display: none;
  }
}

/* Service cards: too narrow for five across, so the row swipes sideways */
@media (max-width: 72rem) {
  .services {
    padding-left: 0;
    padding-right: 0;
  }

  .services__head {
    padding: 0 var(--size-edge);
  }

  .services__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--size-service-tile);
    overflow-x: auto;
    padding: 0 var(--size-edge) var(--space-6);
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--size-page-pad);
    scrollbar-width: none;
  }

  .services__grid::-webkit-scrollbar {
    display: none;
  }

  .services__grid > li {
    scroll-snap-align: start;
  }
}

@media (max-width: 56rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Single column: bigger headline, and the van grows and runs off the right edge */
  :root {
    --text-hero: clamp(2.625rem, 11vw, 4.5rem);
    --size-van: 124%;
    --size-hex: 78%;
  }

  .hero__visual {
    max-width: 34rem;
    margin: var(--space-6) auto 0;
    justify-items: start;
  }

  .hero__hex {
    left: 62%;
  }

  .topbar__item--email {
    display: none;
  }

  .area__head,
  .services__head {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--space-6);
  }

  .contact-card__icon {
    margin-bottom: var(--space-5);
  }

  .footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
  }

  .footer__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding: var(--space-6) var(--space-5) var(--space-7);
  }

  .footer__cols {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-6) var(--space-5);
    font-size: var(--text-sm);
  }

  .footer__actions {
    grid-column: 1 / -1;
  }

  .credit-card {
    width: min(100%, var(--size-credit-card));
    margin: 0 auto;
  }

  /* Steps: number, title and arrow on one line, the text under it, the photo tucked in the corner */
  :root {
    --size-step-img: 6.5rem;
  }

  .step__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-5) var(--space-4);
  }

  .step__text {
    grid-column: 1 / -1;
    padding-right: calc(var(--size-step-img) + var(--space-3));
  }

  .step__arrow {
    grid-row: 1;
    grid-column: 3;
    width: var(--size-control-sm);
    height: var(--size-control-sm);
  }

  .step__img {
    position: absolute;
    right: var(--space-4);
    bottom: calc(var(--space-4) * -1);
    margin: 0;
  }
}

@media (max-width: 30rem) {
  :root {
    --size-logo: 3rem;
    --size-control: 3.5rem;
    --space-section: clamp(3.5rem, 8vw, 7rem);    /* top and bottom padding of a section */
  --space-hero-top: 2.5rem;
  }

  .area-map__stage {
    height: 30rem;
  }

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

  /* Footer links: one column, with the site links two across, so the email fits on one line */
  .footer__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__actions {
    grid-column: auto;
  }

  nav.footer__col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  nav.footer__col .footer__col-title {
    grid-column: 1 / -1;
  }

  .area-map__status {
    left: var(--size-page-pad);
    right: var(--size-page-pad);
    bottom: var(--space-4);
  }

  .area-map__status-job {
    min-width: 0;
  }

  .area-map__status-dots {
    margin-left: auto;
  }

  /* The WhatsApp button is right below, so the nav one is not needed on phones */
  .nav__cta {
    display: none;
  }

  .hero__lead {
    margin-top: var(--space-5);
    font-size: var(--text-base);
  }

  .hero__actions {
    margin-top: var(--space-6);
  }

  .hero__actions .btn {
    font-size: var(--text-md);
  }

  /* Phone: two matching full-width buttons, call on top and WhatsApp under it */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .phone-link {
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--size-control);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-glass);
    font-size: var(--text-base);
  }

  .phone-link__icon,
  .phone-link:hover .phone-link__icon,
  .phone-link:active .phone-link__icon {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
    transform: none;
  }

  .phone-link {
    transition: transform var(--duration-med) var(--ease-spring),
      background-color var(--duration-fast) var(--ease-out);
  }

  .phone-link:active {
    transform: scale(0.96);
    background: var(--color-glass-border);
  }
}

/* ==========================================================================
   Inner pages (services.html, contact.html)
   ========================================================================== */

/* Short purple header with the page title */
.page-head {
  max-width: calc(46rem + var(--size-edge) * 2);
  padding: var(--space-hero-top) var(--size-edge) var(--space-6);
}

/* Outline buttons: purple on light backgrounds, white on dark ones */
.btn--ghost {
  border: 1.5px solid var(--color-purple);
  color: var(--color-purple);
}

.btn--ghost:hover {
  background: var(--color-purple);
  color: var(--color-white);
}

.btn--glass {
  border: 1px solid var(--color-glass-border);
  background: var(--color-glass);
  color: var(--color-text-on-dark);
}

.btn--glass:hover {
  background: var(--color-glass-border);
}

/* ---- Services: one block per service, photo and text side by side ---- */
.svc-list {
  display: grid;
  gap: var(--space-section);
  padding: var(--space-section) var(--size-edge) 0;
}

.svc {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  scroll-margin-top: var(--space-6);
}

.svc:nth-child(even) .svc__media {
  order: 2;
}

.svc__media {
  position: relative;
  isolation: isolate;
}

/* yellow hexagon peeking out from behind the photo */
.svc__media::before {
  content: "";
  position: absolute;
  top: calc(var(--space-6) * -1);
  left: calc(var(--space-6) * -1);
  z-index: -1;
  width: 42%;
  aspect-ratio: 0.866;
  background: var(--color-accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.svc:nth-child(even) .svc__media::before {
  left: auto;
  right: calc(var(--space-6) * -1);
}

.svc__img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: 50% 12%;
  box-shadow: var(--shadow-tile);
}

.svc__title,
.faq__title,
.reach__title,
.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.svc__text,
.reach__text {
  max-width: 34rem;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.svc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Tick list */
.checklist {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-weight: var(--weight-medium);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checklist .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ---- Questions and answers ---- */
.faq {
  padding: var(--space-section) var(--size-edge) 0;
}

.faq__title {
  text-align: center;
}

.faq__list {
  max-width: 48rem;
  margin: var(--space-6) auto 0;
}

.faq__item {
  border-bottom: 1px solid var(--color-line);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* plus sign that turns into a cross when the answer is open */
.faq__item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: 1;
  transition: transform var(--duration-med) var(--ease-spring), background-color var(--duration-fast) var(--ease-out);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.faq__item p {
  max-width: 40rem;
  padding-bottom: var(--space-5);
  color: var(--color-text-muted);
}

/* ---- Closing call band ---- */
/* Full-width light band before the footer, with the cube pattern and a soft glow */
.cta-band {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-section);
  padding: var(--space-8) var(--size-edge);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}

/* On the contact page the band follows the contact section straight away, no gap */
.reach + .cta-band {
  margin-top: 0;
  border-top: 0;
}

.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cta-band::before {
  background:
    radial-gradient(35% 90% at 85% 50%, rgba(252, 189, 15, 0.16), transparent 70%),
    radial-gradient(30% 80% at 15% 100%, rgba(56, 38, 143, 0.08), transparent 70%);
}

.cta-band::after {
  background-color: var(--color-line);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    linear-gradient(to left, #000 0%, transparent 75%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.354' height='108' viewBox='0 0 62.354 108'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M31.177 0 62.354 18v36L31.177 72 0 54V18zM31.177 36 0 18M31.177 36l31.177-18M31.177 36v72M0 90l31.177-18 31.177 18M0 90v18M62.354 90v18M0 0v18M62.354 0v18'/%3E%3C/svg%3E"),
    linear-gradient(to left, #000 0%, transparent 75%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.cta-band__text {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- Contact page ---- */
.reach {
  padding-top: 0;
}

/* Full width: light side with the ways to reach us, map running to the right edge */
/* The left padding lines the text up with the rest of the page */
.reach__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  overflow: hidden;
  padding-left: var(--size-edge);
  border-block: 1px solid var(--color-line);
  background: var(--color-surface);
}

.reach__tell {
  padding: var(--space-8) var(--space-7) var(--space-8) 0;
}

/* Call, message and email as three small tiles */
.reach__ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.reach__way {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-page);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-med) var(--ease-spring);
}

.reach__way:hover {
  border-color: var(--color-purple);
  background: var(--color-purple-soft);
  transform: translateY(-3px);
}

.reach__way-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.reach__way-text {
  display: grid;
  flex: 1;
  align-content: end;
  min-width: 0;
}

.reach__way-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.reach__way-value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* The email may break before the @ (there's a <wbr> there in the HTML) */
.reach__way-value:has(wbr) {
  white-space: normal;
}

.reach__way-arrow {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-purple);
}

/* Questions, under the tiles */
.reach__faq {
  margin-top: var(--space-7);
}

.reach__faq-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.reach__faq .faq__list {
  max-width: none;
  margin: var(--space-2) 0 0;
}

.reach__faq .faq__item summary {
  padding: var(--space-4) 0;
  font-size: var(--text-md);
}

/* Small phones: tiles back to one per row */
@media (max-width: 36rem) {
  .reach__ways {
    grid-template-columns: minmax(0, 1fr);
  }

  .reach__way {
    flex-direction: row;
    align-items: center;
    padding-right: var(--space-7);
  }

  .reach__way-arrow {
    top: 50%;
    translate: 0 -50%;
  }
}

.reach__map {
  position: relative;
  overflow: hidden;
  min-height: var(--size-map-embed);
  background: var(--color-purple-soft);
}

/* Taller than the box and pulled up, to hide Google's own address box at the top */
.reach__frame {
  position: absolute;
  top: calc(var(--size-map-crop) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--size-map-crop));
  border: 0;
}

/* Our address card, floating where Google's box was */
.reach__pin {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  max-width: calc(100% - var(--space-5) * 2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* Mid-size screens: stack the panel before the rows get squeezed */
@media (max-width: 75rem) {
  .reach__panel {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  .reach__tell {
    padding: var(--space-8) var(--size-edge);
  }

  .reach__pin {
    left: var(--size-edge);
  }
}

.reach__pin-icon,
.reach__pin-link {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-pill);
}

.reach__pin-icon {
  background: var(--color-purple);
  color: var(--color-yellow);
}

.reach__pin-link {
  margin-left: var(--space-2);
  background: var(--color-accent);
  color: var(--color-on-accent);
  transition: transform var(--duration-med) var(--ease-spring);
}

.reach__pin-link:hover {
  transform: rotate(45deg);
}

.reach__pin-text {
  display: grid;
  min-width: 0;
}

.reach__pin-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.reach__pin-address {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

@media (max-width: 56rem) {
  .svc,
  .reach__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc {
    gap: var(--space-6);
  }

  .reach__tell {
    padding: var(--space-7) var(--size-edge);
  }

  .reach__map {
    min-height: var(--size-map-embed-small);
  }

  .svc:nth-child(even) .svc__media {
    order: 0;
  }

  .svc__media::before,
  .svc:nth-child(even) .svc__media::before {
    top: calc(var(--space-4) * -1);
    left: calc(var(--space-3) * -1);
    right: auto;
  }

  .svc__img {
    aspect-ratio: 4 / 3;
    object-position: 50% 30%;
  }

  .cta-band {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
}

@media (max-width: 30rem) {
  .svc__actions .btn,
  .cta-band__actions,
  .cta-band__actions .btn {
    width: 100%;
  }
}


/* ---- Long text pages (privacy policy) ---- */
.prose {
  max-width: calc(44rem + var(--size-edge) * 2);
  margin: 0 auto;
  padding: var(--space-section) var(--size-edge);
}

.prose h2 {
  margin-top: var(--space-7);
  font-family: var(--font-display);
  font-size: var(--text-step);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose ul {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.prose ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose a,
.footer__legal a {
  color: var(--color-purple);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.footer__legal a {
  margin-left: var(--space-2);
  color: var(--color-text-on-dark);
}