/* ==========================================================================
   Ontruim Direct
   Handwritten CSS, no build step required.
   Upload as-is to any static host (Strato shared hosting included).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand: a fresh, light blue */
  --brand-900: #0a2540;
  --brand-800: #0f4c81;
  --brand-700: #1565a0;
  --brand-600: #1a7fb8;
  --brand-500: #2f9fd6;
  --brand-400: #6fc7ec;

  --ink-900: #0b1620;
  --ink-800: #16242f;
  --ink-700: #2a3d4d;
  --ink-500: #556b7d;
  --ink-400: #7d93a4;
  --ink-200: #d3dee6;
  --ink-100: #ecf2f7;
  --ink-050: #f6fafc;
  --white: #ffffff;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--ink-050);
  --text: var(--ink-800);
  --text-muted: var(--ink-500);
  --accent: var(--brand-700);
  --accent-strong: var(--brand-800);

  /* Type */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4: clamp(2.6rem, 1.7rem + 4vw, 5rem);

  /* Space & shape */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(11 22 32 / 0.06), 0 2px 8px rgb(11 22 32 / 0.05);
  --shadow: 0 10px 30px -12px rgb(11 22 32 / 0.25);
  --shadow-lg: 0 40px 80px -30px rgb(11 22 32 / 0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  /* Decorative elements (hero glow, marquee track) stick out past the page
     edge. Clipping here as well as on body keeps the layout viewport at the
     screen width, otherwise a fixed element is laid out against the wider
     box and the mobile action bar ends up off-screen. `clip` rather than
     `hidden` so neither element turns into a scroll container, with
     `hidden` first for Safari below 16, which does not know `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

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

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--alt {
  background: var(--bg-alt);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  line-height: 1.55;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--brand-800);
  color: #fff;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-700);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 28px -14px rgb(21 101 160 / 0.9);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

/* Liquid fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -18px rgb(21 101 160 / 0.95);
}

.btn:hover::before {
  transform: translateY(0);
}

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

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  box-shadow: none;
  border: 1.5px solid var(--ink-200);
}

.btn--ghost:hover {
  --btn-fg: #fff;
  border-color: transparent;
  box-shadow: 0 18px 36px -18px rgb(21 101 160 / 0.8);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--brand-800);
  box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.5);
}

.btn--light:hover {
  --btn-fg: #fff;
}

.btn--lg {
  padding: 1.15rem 2.4rem;
  font-size: var(--step-1);
}

.btn .arrow {
  transition: transform 0.35s var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   5. Topbar + header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink-050);
  border-bottom: 1px solid var(--ink-100);
  font-size: var(--step--1);
  color: var(--ink-700);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.25rem);
  padding-block: 0.7rem;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  transition: color 0.25s;
}

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

.topbar__item svg {
  flex: none;
  color: var(--accent);
}

.stars {
  color: #f5a623;
  letter-spacing: 0.08em;
}

/* On a phone the topbar is reduced to the two things worth tapping. */
@media (max-width: 700px) {
  .topbar__inner {
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
  }

  .topbar__item--optional {
    display: none;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgb(255 255 255 / 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}

.site-header.is-stuck {
  border-color: var(--ink-100);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.brand__logo {
  display: block;
  height: 50px;
  width: auto;
}

/* On the dark footer the logo's own white background would show as a
   hard-edged box, so it sits on a small white card instead. */
.brand__logo-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
}

.brand__logo-chip .brand__logo {
  height: 38px;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.1rem);
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.1rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink-700);
  transition: color 0.25s;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--brand-800);
}

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

.header__cta {
  display: none;
}

@media (min-width: 1100px) {
  .header__cta {
    display: inline-flex;
    padding: 0.7rem 1.4rem;
  }
}

/* Burger */
/* The menu is driven by a checkbox rather than a script, so it works with
   JavaScript unavailable, which is how a downloaded file is previewed on a
   phone. The input sits just before .nav so the sibling selectors reach it. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Tapping anywhere outside the open menu closes it, again without a script.
   Only present while the menu is open, and only on the narrow layout. */
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(11 22 32 / 0.35);
}

@media (max-width: 959px) {
  .nav-toggle:checked ~ .nav-scrim {
    display: block;
  }

  /* The scrim has to stay below the header so the burger remains tappable,
     which leaves the fixed bars stacked above it. Drop them under the scrim
     while the menu is open, so a tap anywhere outside the menu closes it. */
  .nav-toggle:checked ~ .action-bar,
  .nav-toggle:checked ~ .floaties,
  .nav-toggle:checked ~ .demo-note {
    z-index: 60;
  }
}

/* Flex column, not grid: the bars must sit a known distance apart for the
   close-state rotation below to land them on top of each other. */
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.2s;
}

.nav-toggle:checked ~ .site-header .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked ~ .site-header .burger span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked ~ .site-header .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Keyboard users still need to see where they are. */
.nav-toggle:focus-visible ~ .site-header .burger {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
}

@media (min-width: 960px) {
  .burger {
    display: none;
  }
}

@media (max-width: 959px) {
  .nav {
    position: fixed;
    inset: calc(var(--header-h)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: #fff;
    border-bottom: 1px solid var(--ink-100);
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.35s var(--ease-out),
      visibility 0.3s;
  }

  .nav-toggle:checked ~ .site-header .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }


  .nav__link {
    padding: 0.85rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--ink-100);
  }

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

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 10vw, 9rem);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Just enough zoom to hide the edge the crop leaves behind: 1.08 cropped
     in far enough on a wide hero to cut the van off oddly at the bottom. */
  transform: scale(1.02);
  object-position: 50% 38%;
  will-change: transform;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgb(8 26 44 / 0.92) 0%,
      rgb(8 26 44 / 0.72) 42%,
      rgb(8 26 44 / 0.35) 70%,
      rgb(8 26 44 / 0.55) 100%
    ),
    radial-gradient(
      120% 80% at 0% 100%,
      rgb(21 101 160 / 0.5),
      transparent 60%
    );
}

/* Animated accent blob */
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  background: radial-gradient(circle, var(--brand-500), transparent 65%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero__glow--a {
  left: -10vw;
  bottom: -18vw;
}

.hero__glow--b {
  right: -8vw;
  top: -14vw;
  animation-duration: 24s;
  animation-direction: alternate-reverse;
  opacity: 0.32;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6vw, -4vw, 0) scale(1.18);
  }
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  }
}

.hero h1 {
  font-size: var(--step-4);
  margin-bottom: 1rem;
}

/* The accent line is not split into words: `overflow: hidden` on a child of
   a background-clip:text element stops the gradient from painting, so the
   whole line gets one clipping wrapper and the gradient sits on the inner
   span instead. */
.hero h1 .accent {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero h1 .accent__inner {
  display: inline-block;
  background: linear-gradient(100deg, var(--brand-400), #bfe9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: 280ms;
}

.is-revealed .hero h1 .accent__inner,
h1.is-revealed .accent__inner {
  transform: translateY(0);
}

.hero__text {
  max-width: 46ch;
  font-size: var(--step-1);
  color: rgb(255 255 255 / 0.82);
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.hero__actions .btn--ghost {
  --btn-fg: #fff;
  border-color: rgb(255 255 255 / 0.35);
}

/* Trust row under the hero copy */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2.25rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.8);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.hero__trust svg {
  color: var(--brand-400);
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Quote card (glass form)
   -------------------------------------------------------------------------- */
.quote-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  background: rgb(22 36 47 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-lg);
}

.quote-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand-400);
  margin-bottom: 0.35rem;
}

.quote-card__badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 0 rgb(111 199 236 / 0.7);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 10px rgb(111 199 236 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(111 199 236 / 0);
  }
}

.quote-card h2 {
  font-size: var(--step-2);
  color: #fff;
  margin-bottom: 1.5rem;
}

.form-grid {
  display: grid;
  gap: 1.35rem 1.1rem;
}

@media (min-width: 520px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .field--full {
    grid-column: 1 / -1;
  }
}

/* Floating-label field */
.field {
  position: relative;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 1.4rem 0 0.55rem;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgb(255 255 255 / 0.28);
  border-radius: 0;
  transition: border-color 0.3s;
}

.field textarea {
  min-height: 108px;
  resize: vertical;
}

.field select {
  appearance: none;
  cursor: pointer;
}

.field select option {
  color: var(--ink-800);
}

.field label {
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-size: var(--step-0);
  color: rgb(255 255 255 / 0.65);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.28s var(--ease-out), color 0.28s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--brand-400);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select[data-filled="true"] + label {
  transform: translateY(-1.15rem) scale(0.78);
  color: var(--brand-400);
}

.field__chevron {
  position: absolute;
  right: 0;
  top: 1.5rem;
  color: rgb(255 255 255 / 0.5);
  pointer-events: none;
}

/* Extra questions in the quote form. The more of these a visitor answers, the
   better the price can be estimated before anyone drives out there. */
.choice-set {
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
}

.choice-set legend {
  padding: 0;
  margin-bottom: 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.55);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.8);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}

.choice:hover {
  border-color: rgb(255 255 255 / 0.35);
}

.choice input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--brand-400);
  cursor: pointer;
}

/* :has is what turns the whole pill on; without it the checkbox still works,
   the pill just does not fill in. */
.choice:has(input:checked) {
  background: rgb(255 255 255 / 0.12);
  border-color: var(--brand-400);
  color: #fff;
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

.form-note {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: rgb(255 255 255 / 0.55);
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status--ok {
  background: rgb(52 168 83 / 0.16);
  color: #b6f2cc;
  border: 1px solid rgb(52 168 83 / 0.4);
}

.form-status--err {
  background: rgb(255 107 107 / 0.14);
  color: #ffc9c9;
  border: 1px solid rgb(255 107 107 / 0.4);
}

/* Honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   8. Marquee (logo / usp strip)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--brand-900);
  color: rgb(255 255 255 / 0.85);
  padding-block: 1rem;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: scroll-x 32s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.marquee__item svg {
  color: var(--brand-400);
}

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

/* --------------------------------------------------------------------------
   9. Intro / about split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-left {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.section__title {
  font-size: var(--step-3);
  margin: 0.8rem 0 1.2rem;
}

.ghost-word {
  position: absolute;
  left: 50%;
  top: 2rem;
  transform: translateX(-50%);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink-100);
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

.check-list {
  display: grid;
  gap: 0.85rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-weight: 500;
}

.check-list svg {
  flex: none;
  margin-top: 0.25rem;
  color: var(--brand-600);
}

.figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

@media (min-width: 780px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat__value {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(160deg, var(--brand-600), var(--brand-800));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

/* The company is new, so the band carries promises instead of invented
   figures. This variant drops the gradient-clipped number and draws an icon. */
.stat__value--icon {
  display: flex;
  justify-content: center;
  color: var(--brand-600);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.stat__value--icon svg {
  width: clamp(2rem, 4vw, 2.6rem);
  height: auto;
}

.stat__label {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
}

.stat__label strong {
  color: var(--ink-800);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */
.services {
  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
}

.services__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.services__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(11 22 32 / 0.9),
    rgb(11 22 32 / 0.82)
  );
}

.services__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.8rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1060px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .services__intro {
    grid-column: span 1;
  }
}

.services__intro h2 {
  font-size: var(--step-3);
  margin-bottom: 1rem;
}

.services__intro p {
  color: rgb(255 255 255 / 0.72);
  margin-bottom: 1.75rem;
}

/* Card with tilt + reveal
   Two transform speeds: quick while the pointer is actively tilting it
   (.is-tilting, toggled in main.js) so the card tracks the cursor instead
   of chasing it, and a slower, easing glide back to flat once the pointer
   leaves. One shared 0.4s felt laggy in both directions. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}

.card.is-tilting {
  transition: transform 0.12s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card__img {
  position: absolute;
  inset: 0;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
}

.card:hover .card__img img {
  transform: scale(1.08);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(11 22 32 / 0.15) 0%,
    rgb(11 22 32 / 0.55) 55%,
    rgb(11 22 32 / 0.92) 100%
  );
  transition: opacity 0.4s;
}

.card__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 1.5rem;
}

.card__title {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

.card__desc {
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.75);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out), opacity 0.35s,
    margin-top 0.5s var(--ease-out);
}

.card:hover .card__desc,
.card:focus-within .card__desc {
  max-height: 7rem;
  opacity: 1;
  margin-top: 0.35rem;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--brand-400);
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  counter-reset: step;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
    border-color 0.4s;
}

.step:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.step__num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--brand-600), var(--brand-800));
  box-shadow: 0 12px 24px -12px rgb(21 101 160 / 0.9);
}

.step__num::before {
  content: counter(step);
}

.step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.45rem;
}

.step p {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Connecting line on desktop */
@media (min-width: 640px) {
  .step::before {
    content: "";
    position: absolute;
    top: 3rem;
    right: -1.2rem;
    width: 1.2rem;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      var(--ink-200) 0 4px,
      transparent 4px 8px
    );
  }
  .step:nth-child(2n)::before,
  .step:last-child::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */
.reviews {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review {
  padding: 1.9rem 1.6rem 1.6rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.review:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.review__stars {
  color: #f5a623;
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
}

.review p {
  font-size: 0.98rem;
  color: var(--ink-700);
}

.review__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink-100);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-800);
  background: var(--ink-100);
}

.review__name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.review__meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Placeholder shown while there are no real reviews yet. It has to look like a
   deliberate statement, not a broken section. */
.reviews-empty {
  display: flex;
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: flex-start;
  max-width: 760px;
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  background: var(--bg);
  border: 1px dashed var(--ink-200);
  border-radius: var(--radius-lg);
}

.reviews-empty > svg {
  flex: none;
  color: var(--brand-500);
}

.reviews-empty h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

.reviews-empty p {
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 820px;
}

.faq__item {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.faq__item[open] {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q .icon {
  flex: none;
  color: var(--accent);
  transition: transform 0.35s var(--ease-out);
}

.faq__item[open] .faq__q .icon {
  transform: rotate(45deg);
}

.faq__a {
  padding: 0 1.4rem 1.35rem;
  font-size: 0.98rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(120deg, var(--brand-800), var(--brand-900));
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-600), transparent 65%);
  filter: blur(70px);
  opacity: 0.55;
  z-index: -1;
  animation: drift 20s ease-in-out infinite alternate;
}

.cta-band__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  text-align: center;
  justify-items: center;
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: 1.4fr auto;
    text-align: left;
    justify-items: start;
  }
}

.cta-band h2 {
  font-size: var(--step-3);
  margin-bottom: 0.6rem;
}

.cta-band p {
  color: rgb(255 255 255 / 0.8);
  max-width: 55ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-800);
  color: rgb(255 255 255 / 0.72);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: 0.95rem;
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer h3 {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 1.1rem;
}

.footer__list {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  list-style: none;
}

.footer__list a {
  transition: color 0.25s, transform 0.25s var(--ease-out);
  display: inline-block;
}

.footer__list a:hover {
  color: var(--brand-400);
  transform: translateX(4px);
}

.footer__contact {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.footer__contact a,
.footer__contact span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer__contact svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--brand-400);
}

.footer__contact a:hover {
  color: var(--brand-400);
}

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.55);
}

/* --------------------------------------------------------------------------
   17. Floating actions (WhatsApp + back to top)
   -------------------------------------------------------------------------- */
.floaties {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  gap: 0.7rem;
  justify-items: end;
}

.fab {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}

.fab:hover {
  transform: translateY(-4px) scale(1.05);
}

.fab--wa {
  background: #25d366;
}

.fab--top {
  width: 46px;
  height: 46px;
  background: var(--ink-800);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.fab--top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fab--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(37 211 102 / 0.6);
  animation: pulse 2.6s infinite;
  pointer-events: none;
}

.fab-wrap {
  position: relative;
}

/* --------------------------------------------------------------------------
   17b. Mobile action bar
   --------------------------------------------------------------------------
   On a phone the two things a visitor actually wants are always one thumb
   away, pinned to the bottom of the screen.
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 92;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.92);
  border-top: 1px solid var(--ink-100);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 -8px 24px -18px rgb(11 22 32 / 0.6);
}

.action-bar .btn {
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.action-bar__main {
  flex: 1;
  min-width: 0;
}

.action-bar__icon {
  flex: none;
  width: 52px;
  padding: 0.85rem 0;
}

.action-bar__icon--wa {
  color: #128c40;
  border-color: rgb(18 140 64 / 0.35);
}

@media (max-width: 780px) {
  .action-bar {
    display: flex;
  }

  /* Keep the page clear of the bar, and retire the floating buttons: the
     bar already carries calling and WhatsApp. */
  body {
    padding-bottom: 5rem;
  }

  .floaties {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   17c. Phone refinements
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero {
    padding-block: 2.5rem 3.5rem;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .hero__actions .btn {
    width: 100%;
    padding-inline: 1.25rem;
    font-size: 1rem;
  }

  .hero__trust {
    gap: 0.45rem 1rem;
    margin-top: 1.75rem;
  }

  .cta-band__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cta-band__actions .btn {
    width: 100%;
  }

  /* The oversized watermark word costs more than it adds on a narrow screen. */
  .ghost-word {
    display: none;
  }

  .service-row {
    padding-block: 2.25rem;
  }

  .timeline__item {
    padding-left: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   18. Scroll progress bar
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  height: 3px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
}

/* --------------------------------------------------------------------------
   19. Subpage hero
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: linear-gradient(115deg, var(--brand-900), var(--ink-800));
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: auto -5% -60% auto;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-600), transparent 65%);
  filter: blur(80px);
  opacity: 0.45;
  z-index: -1;
  animation: drift 22s ease-in-out infinite alternate;
}

.page-hero h1 {
  font-size: var(--step-3);
  margin: 0.6rem 0 1rem;
  max-width: 18ch;
}

.page-hero p {
  max-width: 58ch;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--step-1);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.6);
}

.breadcrumbs a:hover {
  color: var(--brand-400);
}

.breadcrumbs span[aria-current] {
  color: #fff;
}

/* --------------------------------------------------------------------------
   20. Service detail rows
   -------------------------------------------------------------------------- */
.service-row {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--ink-100);
}

.service-row:last-child {
  border-bottom: 0;
}

@media (min-width: 880px) {
  .service-row {
    grid-template-columns: 1fr 1fr;
  }
  .service-row:nth-child(even) .service-row__media {
    order: -1;
  }
}

.service-row h2 {
  font-size: var(--step-2);
  margin: 0.7rem 0 0.9rem;
}

.service-row__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pill {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-800);
  background: rgb(47 159 214 / 0.1);
  border: 1px solid rgb(47 159 214 / 0.22);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   21. Values / team
   -------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 700px) {
  .value-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value {
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.value:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.value__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  color: var(--brand-700);
  background: rgb(47 159 214 / 0.12);
}

.value h3 {
  font-size: var(--step-1);
  margin-bottom: 0.45rem;
}

.value p {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Timeline */
.timeline {
  display: grid;
  gap: 0;
  max-width: 720px;
  margin-top: 2.5rem;
}

.timeline__item {
  position: relative;
  padding: 0 0 2.25rem 2.5rem;
  border-left: 2px solid var(--ink-100);
}

.timeline__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0.35rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-600);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgb(47 159 214 / 0.2);
}

.timeline__year {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.timeline__item h3 {
  font-size: var(--step-1);
  margin: 0.25rem 0 0.4rem;
}

.timeline__item p {
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   22. Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.contact-card {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-list {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--brand-700);
  background: rgb(47 159 214 / 0.12);
}

.contact-list__label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-list__value {
  font-weight: 600;
  font-size: 1.05rem;
}

.contact-list a.contact-list__value:hover {
  color: var(--accent);
}

/* The quote card is dark by default; on the contact page it sits on white. */
.quote-card--light {
  background: var(--ink-800);
  border-color: rgb(255 255 255 / 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.map-embed {
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}

.map-embed img,
.map-embed iframe {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border: 0;
}

/* --------------------------------------------------------------------------
   23. Scroll reveal
   --------------------------------------------------------------------------
   One transition, several entrances. Set the direction with the attribute
   value; `--reveal-delay` (or data-stagger on a parent) handles sequencing.

     <div data-reveal>            fades up      (default)
     <div data-reveal="left">     slides in from the left
     <div data-reveal="right">    slides in from the right
     <div data-reveal="scale">    settles in from slightly small
     <div data-reveal="wipe">     uncovers itself, for imagery
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 28px), 0)
    scale(var(--reveal-scale, 1));
  transition: opacity 0.75s var(--ease-out), transform 0.85s var(--ease-out),
    clip-path 0.9s var(--ease-out), filter 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="left"] {
  --reveal-x: -44px;
  --reveal-y: 0;
}

[data-reveal="right"] {
  --reveal-x: 44px;
  --reveal-y: 0;
}

[data-reveal="scale"] {
  --reveal-y: 18px;
  --reveal-scale: 0.94;
}

[data-reveal="wipe"] {
  --reveal-y: 0;
  --reveal-scale: 1.06;
  clip-path: inset(0 0 100% 0);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: none;
}

/* Once the entrance has played, stop reserving a compositor layer and drop
   the clip: a lingering clip-path would cut off anything an element draws
   outside its own box, such as a card's hover shadow. */
[data-reveal].is-settled {
  will-change: auto;
  clip-path: none;
}

/* --------------------------------------------------------------------------
   24. Line reveal for headings
   --------------------------------------------------------------------------
   JS wraps each word in .line > .line__inner. The outer span clips, the
   inner one slides up from behind it, so the text appears to rise off the
   baseline rather than simply fade.
   -------------------------------------------------------------------------- */
.line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
}

.line__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}

.is-revealed .line__inner,
.line.is-revealed .line__inner {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   25. Parallax
   --------------------------------------------------------------------------
   JS writes --parallax; the element keeps whatever transform it already had
   by composing on top of this translate.
   -------------------------------------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   26. Magnetic buttons
   -------------------------------------------------------------------------- */
/* At rest (pointer just left) the button eases back over half a second;
   while it is actively being pulled toward the cursor it switches to a
   quick transition so it tracks the pointer instead of trailing behind it. */
.btn[data-magnetic] {
  transition: transform 0.5s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.btn[data-magnetic].is-pulled {
  transition: transform 0.12s ease-out, box-shadow 0.35s var(--ease-out);
  transform: translate3d(var(--mx, 0), calc(var(--my, 0px) - 3px), 0);
}

/* --------------------------------------------------------------------------
   27. Entrances without JavaScript
   --------------------------------------------------------------------------
   <html> ships with class="no-js"; a one-line script in the head swaps it
   for "js". So this block applies exactly when scripts are unavailable,
   which is how a downloaded file is previewed on a phone.

   Where the browser supports scroll-driven animations the entrance is tied
   to the element scrolling into view, same as the scripted version. Where it
   does not, `animation-timeline` is ignored and the same keyframes simply
   play on load, staggered by the delays already on the markup.
   -------------------------------------------------------------------------- */
@keyframes rv-up {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-left {
  from { opacity: 0; transform: translate3d(-44px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-right {
  from { opacity: 0; transform: translate3d(44px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-scale {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-wipe {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}

@keyframes rv-line {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
  animation: rv-up 0.8s var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
  animation-timeline: view();
  animation-range: entry 0% entry 55%;
}

.no-js [data-reveal="left"]  { animation-name: rv-left; }
.no-js [data-reveal="right"] { animation-name: rv-right; }
.no-js [data-reveal="scale"] { animation-name: rv-scale; }
.no-js [data-reveal="wipe"]  { animation-name: rv-wipe; }

/* The gradient headline has no script to lift it, so it lifts itself. */
.no-js .accent__inner {
  animation: rv-line 0.9s var(--ease-out) 0.28s both;
}

/* --------------------------------------------------------------------------
   27. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .line__inner {
    transform: none;
  }

  [data-parallax] {
    --parallax: 0px !important;
  }

  .no-js [data-reveal],
  .no-js .accent__inner {
    animation: none !important;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

.field-block {
  margin-top: 1.75rem;
}

/* The offerte form runs taller than its intro card, so on desktop the card
   follows the scroll instead of leaving a slab of empty space beside it. */
@media (min-width: 940px) {
  .quote-aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.field-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.field-label__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  background: var(--ink-100);
  color: var(--brand-700);
}

.field-label__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.field-label__hint {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.file-input {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1.5px dashed var(--ink-200);
  border-radius: var(--radius);
  cursor: pointer;
}

.file-input::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-700);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* --- Light form fields (on white, unlike the dark hero card) ----------- */
.form-grid--light .field input,
.form-grid--light .field textarea,
.form-grid--light .field select {
  color: var(--ink-900);
  border-bottom-color: var(--ink-200);
}

.form-grid--light .field label {
  color: var(--text-muted);
}

.form-grid--light .field input:focus,
.form-grid--light .field textarea:focus,
.form-grid--light .field select:focus {
  border-bottom-color: var(--brand-600);
}

.form-grid--light .field input:focus ~ label,
.form-grid--light .field input:not(:placeholder-shown) ~ label,
.form-grid--light .field textarea:focus ~ label,
.form-grid--light .field textarea:not(:placeholder-shown) ~ label,
.form-grid--light .field select:focus ~ label,
.form-grid--light .field select:valid ~ label {
  color: var(--brand-700);
}

.wizard__note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- Fallback below the wizard ----------------------------------------- */
.quote-help__inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 780px) {
  .quote-help__inner {
    grid-template-columns: 1fr auto;
  }
}

.quote-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --- Hero launcher on the homepage --------------------------------------
   Tinted rather than whitened: the photo behind the card (the van) needs
   to stay recognisable, so this leans on a dark, brand-coloured wash for
   legibility rather than a heavy blur. A near-white card at a strong blur
   used to turn the van into an unrecognisable smear. */
.launcher {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(165deg, rgb(8 26 44 / 0.8), rgb(10 37 64 / 0.62));
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}

.launcher__title {
  font-size: var(--step-1);
  line-height: 1.25;
  margin: 0.7rem 0 0.35rem;
  color: #fff;
}

.launcher__sub {
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.62);
  margin-bottom: 1.25rem;
}

.launcher__foot {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.55);
}

.launcher__foot a {
  color: #fff;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   29. Legal pages (privacy.php)
   -------------------------------------------------------------------------- */
.legal {
  max-width: 760px;
}

.legal__updated {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-bottom: 2.5rem;
}

.legal h2 {
  font-size: var(--step-1);
  margin: 2.75rem 0 0.9rem;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p,
.legal li {
  color: var(--text-muted);
  line-height: 1.7;
}

.legal p + p {
  margin-top: 1rem;
}

.legal ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.legal strong {
  color: var(--ink-800);
}

/* --------------------------------------------------------------------------
   30. Corrections
   -------------------------------------------------------------------------- */

/* Some elements are inline-flex, which beats the browser's own [hidden]
   rule, so a hidden control could still show up in the layout. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   31. Cookie banner
   --------------------------------------------------------------------------
   Built by tracking.php only when the Google Ads tag is on and the visitor
   has not chosen yet. "Weigeren" and "Accepteren" are the same size on
   purpose: refusing must be as easy as accepting.
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  z-index: 1000;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  padding: 1.4rem 1.5rem 1.5rem;
  color: rgb(255 255 255 / 0.82);
  background: var(--brand-900);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--step--1);
  line-height: 1.55;
  animation: cookie-in 0.5s var(--ease-out) both;
}

.cookie-banner__title {
  margin-bottom: 0.35rem;
  color: #fff;
  font-weight: 700;
  font-size: var(--step-0);
}

.cookie-banner__text a {
  color: var(--brand-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.cookie-banner .btn {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
}

.cookie-banner .btn--ghost {
  --btn-fg: #fff;
  border-color: rgb(255 255 255 / 0.35);
}

@media (max-width: 560px) {
  .cookie-banner {
    left: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    width: calc(100vw - 1.5rem);
    padding: 1.15rem 1.15rem 1.2rem;
  }
}

@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}