/* ============================================================
   RedRoute Removals — Design tokens
   ============================================================ */
:root{
  --white:        #FFFFFF;
  --grey-light:   #F4F4F2;
  --grey-soft:    #E8E8E5;
  /* Subtle structural grey for hairline borders, dashed connectors and
     text-strokes on white/light backgrounds — replaces ~7 near-identical
     hand-picked greys (#E4E4E4, #D8D8D5/D8, #CFCFCF, #C9C9C5/6/7) that
     were indistinguishable in practice. */
  --grey-border:  #D8D8D5;
  --black:        #111111;
  --text-secondary: #656565;
  --red:          #E10600;
  --red-dark:     #B90400;
  --red-tint:     #FFF1F0;
  --tp-green:     #00B67A;

  --font-display: 'Helvetica Now Display', 'Helvetica Neue', 'Arial Nova', Arial, sans-serif;
  --font-text:    'Helvetica Now Text', 'Helvetica Neue', 'Arial Nova', Arial, sans-serif;

  --container-w:  1760px;
  /* Named container widths for page-specific templates. Each is used
     consistently within its own page family and sized to that family's
     content density (wide editorial layouts vs. dense grids vs. narrow
     text/prose vs. a plain reading list) — not random per-page values. */
  --container-wide:    1600px; /* about / areas / blog / article */
  --container-default: 1250px; /* services overview grid */
  --container-narrow:  1180px; /* individual service detail pages */
  --container-reading:  980px; /* prices — plain row-based list */
  --pad-inline:   64px;
  --header-h:     120px;

  --ease: cubic-bezier(.4,0,.2,1);

  /* Base spacing scale. Reference for new work and for snapping stray
     values during cleanup — not a retroactive rewrite of every existing
     section's padding, which would need individual visual review rather
     than a blind find-and-replace. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;

  /* Shared heading scale for secondary page templates (service detail
     pages, /prices/, and other short-heading sections) — NOT applied to
     the homepage hero or blog post H1s, which have their own documented,
     content-driven constraints (homepage hero is a distinct treatment;
     blog article titles run up to ~60 characters and need a smaller
     ceiling to avoid wrapping to 3+ lines in a 760px column). */
  --text-h1: clamp(2.4rem, 5vw, 4.2rem);
  --text-h2: clamp(1.9rem, 2.8vw, 2.6rem);
}

@media (max-width: 900px){
  :root{ --pad-inline: 24px; --header-h: 96px; }
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
/* scrollbar-gutter keeps the scrollbar's track reserved at all times,
   so locking body scroll (see body.mobile-nav-open) never makes the
   page a scrollbar's-width wider and shifts the right-anchored header
   content (lang-switch/CTA/hamburger) sideways when the mobile menu
   opens/closes. */
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
/* The "How It Works" canvas repaints continuously as its scroll-driven
   animation plays (how-it-works-animation.js). Left to its default,
   Chrome's scroll anchoring reads those repaints as a layout change
   near the viewport and quietly re-targets/halts any in-flight
   programmatic or anchor-triggered smooth scroll (e.g. the header
   CTA's #quote-journey jump) partway through that section instead of
   letting it reach its destination. */
html, body{ overflow-anchor: none; }
body, h1, h2, h3, p, figure{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input{ font: inherit; color: inherit; }

body{
  font-family: var(--font-text);
  font-weight: 400;
  background: var(--white);
  color: var(--black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  width: 100%;
  max-width: var(--container-w);
  margin-left: 0;
  margin-right: auto;
  padding-inline: var(--pad-inline);
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  z-index: 999;
}
.skip-link:focus{ left: 16px; top: 16px; }

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

/* Cookie consent banner — only ever created by analytics.js, on a
   visitor's first visit (or after the consent version changes). Small
   and non-dominant by design, not a full-screen takeover. */
.cookie-consent{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 400;
  /* The banner is its own size container, so the action row below
     re-flows on the banner's real inner width (not the viewport's) and
     can never push a button past the rounded edge. */
  container-type: inline-size;
  width: 480px;
  max-width: calc(100vw - 32px);
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.cookie-consent__title{
  margin: 0 0 8px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--black);
}
.cookie-consent__text{
  margin: 0 0 10px;
  font-family: var(--font-text);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--black);
}
.cookie-consent__text a{
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.cookie-consent__text a:hover{ color: var(--red); }
.cookie-consent__links{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 16px;
  font-family: var(--font-text);
  font-size: 0.82rem;
  line-height: 1.5;
}
.cookie-consent__links a{
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.cookie-consent__links a:hover{ color: var(--red); }
.cookie-consent__actions{
  display: flex;
  flex-wrap: wrap; /* safety net only — the container query below normally takes over first */
  align-items: center;
  gap: 10px;
}
/* Both pill buttons share one fixed height, padding and type size so
   neither reads heavier than the other — Accept is filled, Reject is
   outlined, and that's the only difference. */
.cookie-consent .btn{
  flex: none;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
/* Reject gets a solid black outline so it reads as clearly as Accept. */
.cookie-consent .btn--outline{ border: 1.5px solid var(--black); }
.cookie-consent .btn--outline:hover{ border-color: var(--black); color: var(--black); }
/* Text-style third action — same row as the two buttons, but not a
   button itself, so all three read as comparable weight without two
   of them competing for the same filled/outlined styling. */
.cookie-consent__link{
  margin-right: auto;
  min-height: 44px;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.cookie-consent__link:hover{ color: var(--red); }

/* Not enough width for one row: "Manage preferences" gets its own line,
   the two buttons sit underneath as equal-width columns... */
@container (max-width: 432px){
  .cookie-consent__actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }
  .cookie-consent__link{
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 32px;
  }
  .cookie-consent .btn{ width: 100%; padding: 0 12px; }
}
/* ...and on the narrowest phones they stack full-width instead of
   squeezing or clipping the label. */
@container (max-width: 300px){
  .cookie-consent__actions{ grid-template-columns: 1fr; }
}

/* ---------- Cookie preferences panel ("Manage preferences" / footer
   "Cookie settings") — a centred dialog over a scrim, reusing the same
   red/white/grey language as the banner rather than a new component
   language. ---------- */
.cookie-prefs{
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-prefs__scrim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.cookie-prefs__dialog{
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.24);
  padding: 28px;
}
.cookie-prefs__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cookie-prefs__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--black);
}
.cookie-prefs__close{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--grey-border);
  background: var(--white);
  color: var(--black);
}
.cookie-prefs__close:hover{ background: #F7F7F6; }
.cookie-prefs__intro{
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.cookie-prefs__intro a{ color: var(--black); text-decoration: underline; }
.cookie-prefs__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--grey-soft);
}
.cookie-prefs__row--disabled{ opacity: 0.55; }
.cookie-prefs__row-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-text);
}
.cookie-prefs__row-text strong{
  font-size: 0.92rem;
  color: var(--black);
}
.cookie-prefs__row-text span{
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.cookie-prefs__toggle{
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--grey-border);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.cookie-prefs__toggle-dot{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s var(--ease);
}
.cookie-prefs__toggle[aria-checked="true"]{ background: var(--red); }
.cookie-prefs__toggle:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }
.cookie-prefs__dialog:focus{ outline: none; }
.cookie-prefs__always{
  flex: none;
  padding-top: 2px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--red);
  white-space: nowrap;
}
.cookie-prefs__toggle[aria-checked="true"] .cookie-prefs__toggle-dot{ transform: translateX(16px); }
.cookie-prefs__toggle--locked{ background: var(--black); cursor: default; }
.cookie-prefs__toggle--locked .cookie-prefs__toggle-dot{ transform: translateX(16px); }
.cookie-prefs__toggle--locked.cookie-prefs__toggle--off{ background: var(--grey-border); }
.cookie-prefs__toggle--locked.cookie-prefs__toggle--off .cookie-prefs__toggle-dot{ transform: translateX(0); }
.cookie-prefs__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.cookie-prefs__actions .btn{ flex: 1 1 auto; justify-content: center; padding: 12px 18px; font-size: 0.78rem; }

@media (max-width: 600px){
  .cookie-consent{
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 18px;
    border-radius: 18px;
  }
  .cookie-consent__text{ margin-bottom: 8px; }
  .cookie-consent__links{ margin-bottom: 12px; }
  .cookie-prefs{ padding: 12px; }
  .cookie-prefs__dialog{ padding: 22px 20px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .cookie-consent .btn{ height: 46px; }
}

/* Honeypot spam-trap field (hero quick form + full quote wizard) — off
   screen rather than display:none, since some spam bots specifically
   skip display:none fields when filling everything in. Real visitors
   never see or reach it (aria-hidden + tabindex="-1" on the input). */
.quote-form__hp{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color: var(--grey-soft);
}

/* Mobile: in-app browsers (Telegram etc.) and iOS WebViews let the
   page scroll underneath their own translucent top bar / status bar
   and rubber-band past the top edge, so the strip ABOVE the sticky
   header's box (top:0 of the layout viewport) could show section
   content scrolling by — reading as a see-through header. This white
   extension sits directly above the header's own box, inside the
   header's z-index:100 stacking context, so it covers that strip
   without changing the header's height or anything inside it. No
   transform/will-change on the header itself: .main-nav is a
   position:fixed descendant and would be re-anchored to the header. */
@media (max-width: 900px){
  /* Own stacking context: nothing from the page can interleave with the
     header's layers (its z-index:100 context stays self-contained). */
  .site-header{ background-color: #FFFFFF; isolation: isolate; }
  .site-header::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    background-color: #FFFFFF;
    pointer-events: none;
  }
}

/* .container is left:0/right:auto site-wide (see the same fix on
   .testimonial__inner / .how__inner / .faq__inner) — without this the
   1fr/auto/1fr grid below still centres the nav within .header__inner,
   but .header__inner itself sits flush left on viewports wider than
   --container-w, dragging the whole header (nav included) off the
   page's true centre. */
.header__inner.container{
  margin-left: auto;
  margin-right: auto;
}
.header__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* Left zone: real logo stacked over an invisible, same-classed clone of
   .header__actions (see the HTML comment above the mirror markup). Both
   children share grid-row/column 1 so the column sizes to the WIDER of
   the two — i.e. to match .header__actions on the right — instead of to
   the logo's own much narrower width. That's what makes the outer 1fr
   columns come out equal, so .main-nav lands on the page's true centre. */
.header__left{
  display: grid;
  justify-self: start;
}
.header__left > *{
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}
.header__left > .logo{
  justify-self: start;
  /* .header__inner.container is centred (see the comment above it), but
     the page's other sections (hero included) still use the site-wide
     default LEFT-flush .container. That leaves the logo sitting on the
     centred container's padding edge while hero copy below it sits on
     the viewport's true 64px inset. This cancels exactly the extra
     inset the centring adds, landing the logo back on that same true
     64px line — a translate, not a layout margin, so it doesn't feed
     into the grid's column-width math and can't re-break nav centring. */
  transform: translateX(calc(-1 * max(0px, (var(--vw-safe, 100vw) - var(--container-w)) / 2)));
}
.header__actions-mirror{
  visibility: hidden;
  pointer-events: none;
}

.header__cta{
  margin-left: 8px;
}

/* Quote CTA's own fixed box (unrelated to the phone element, which no
   longer tries to visually pair with it as a matching button — see
   .btn--phone below). Scoped to the full desktop nav (above the
   1400px hamburger breakpoint) so it never fights the button's own
   compact-chip sizing at narrower widths below. */
@media (min-width: 1401px){
  .header__actions .header__cta{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--black);
  }
}
@media (max-width: 1400px){
  .header__phone-cta{ display: none; }
}

/* Logo */
.logo{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  justify-self: start;
}
.logo__image{
  height: 88px;
  width: auto;
  max-width: 125px;
  object-fit: contain;
  transition: transform 0.3s var(--ease);
}
.logo:hover .logo__image{
  transform: translateX(2px);
}

/* Main nav */
.main-nav{
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.1vw, 26px);
  justify-self: center;
}
.main-nav a{
  position: relative;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 15px;
  color: var(--black);
  padding: 8px 0;
  white-space: nowrap;
}
.main-nav__mobile-extra{ display: none; }
.main-nav a::after{
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1.5px;
  background: var(--red);
  transition: right 0.25s var(--ease);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.is-active::after{
  right: 0;
}
.main-nav a:hover{ color: var(--black); }
.main-nav a.is-active{ color: var(--red); }

/* ------------------------------------------------------------
   Services mega menu — desktop hover dropdown (mobile/tablet
   variant, an inline accordion, is handled entirely inside the
   1400px responsive block below).
   ------------------------------------------------------------ */
.nav-item{
  position: relative;
  display: flex;
  align-items: center;
}
.nav-item__toggle{
  display: none;
}

.services-mega{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: min(600px, 90vw);
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 16px 45px rgba(0,0,0,0.08);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 60;
}
.services-mega::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--red);
}
.services-mega.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.services-mega[hidden]{ display: none; }

.services-mega__heading{
  display: block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.services-mega__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  row-gap: 4px;
}
.services-mega__item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  border-radius: 8px;
  color: var(--black);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.services-mega__icon{
  display: flex;
  flex-shrink: 0;
  color: var(--black);
  transition: color 0.2s var(--ease);
}
.services-mega__label{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.86rem;
  flex: 1 1 auto;
  white-space: nowrap;
}
.services-mega__arrow{
  flex-shrink: 0;
  color: var(--red);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.services-mega__item:hover,
.services-mega__item:focus-visible{
  background: var(--red-tint);
  transform: translateX(2px);
}
.services-mega__item:hover .services-mega__icon,
.services-mega__item:focus-visible .services-mega__icon{ color: var(--red); }
.services-mega__item:hover .services-mega__arrow,
.services-mega__item:focus-visible .services-mega__arrow{ opacity: 1; transform: translateX(0); }

.services-mega__viewall{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 5px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--black);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.services-mega__viewall::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--red);
  transition: width 220ms ease;
}
.services-mega__viewall .btn__arrow{ color: var(--red); transition: transform 0.2s var(--ease); }
.services-mega__viewall:hover::after{ width: 100%; }
.services-mega__viewall:hover .btn__arrow{ transform: translateX(3px); }

/* Header actions */
.header__actions{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  justify-self: end;
  /* Mirrors the logo's translate on the opposite side, so the phone +
     CTA cluster also lands on the viewport's true 64px inset instead of
     the centred container's padding edge. Excluded from the invisible
     .header__actions-mirror on purpose — that clone must keep its
     untranslated width so the left column's track-sizing (and hence
     nav centring) stays correct. */
  transform: translateX(calc(max(0px, (var(--vw-safe, 100vw) - var(--container-w)) / 2)));
}
.header__actions-mirror{
  transform: none;
}

/* Simplified header — used only on standalone pages (quote.html) that
   deliberately skip the full site nav: logo left, a single "back home"
   link right, nothing in between. Overrides the 3-column nav-centring
   grid above with a plain 2-item row. */
.header__inner--simple{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quote-header__right{
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.quote-header__back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--black);
  transition: color 0.2s var(--ease);
}
.quote-header__back svg{
  color: var(--red);
  transition: transform 0.2s var(--ease);
}
.quote-header__back:hover{
  color: var(--red);
}
.quote-header__back:hover svg{
  transform: translateX(-3px);
}

/* Language switcher — deliberately understated: no flags, pills or
   dropdown, just two text buttons and a hairline separator. */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 10px;
  border-right: 1px solid rgba(0,0,0,.08);
}
.lang-switch__btn{
  padding: 4px 2px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: #B4B4B2;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lang-switch__btn:hover{
  color: var(--red);
}
.lang-switch__btn:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}
.lang-switch__btn.is-active{
  color: var(--black);
  font-weight: 700;
  border-bottom-color: var(--red);
}
.lang-switch__sep{
  color: var(--grey-soft);
  font-size: 0.8rem;
  user-select: none;
}

.call-us{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.call-us__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--grey-soft);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.call-us:hover .call-us__icon{
  border-color: var(--red);
  background: var(--red-tint);
}
.call-us__text{
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.call-us__label{
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.call-us__number{
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary{
  background: var(--black);
  color: var(--white);
  padding: 15px 26px;
  border-radius: 9999px;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn--primary .btn__arrow{
  color: var(--red);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn--primary:hover{
  background: var(--red);
  transform: translateY(-1px);
}
.btn--primary:hover .btn__arrow{
  color: var(--white);
  transform: translateX(3px);
}
.btn--primary:active{
  transform: translateY(0);
}

.btn--form{
  padding: 18px 30px;
  border-radius: 9999px;
  justify-content: center;
}

.btn--outline{
  background: transparent;
  color: var(--black);
  padding: 15px 26px;
  border-radius: 9999px;
  border: 1.5px solid var(--grey-border);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn--outline:hover{
  border-color: var(--red);
  color: var(--red);
}

/* Header phone contact — deliberately NOT a button/pill anymore: no
   border, no shadow, no capsule shape, no fixed box. Just icon + red
   divider + number sitting directly on the page's own white
   background, next to (not matching) the solid-black quote CTA. Width
   is intrinsic to its content; only height/vertical centring are
   still shared with the row via align-items on the parent. */
.btn--phone{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  color: var(--black);
  padding: 8px 2px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: opacity 0.2s var(--ease);
}
.btn--phone__icon{
  display: inline-flex;
  flex-shrink: 0;
  color: var(--black);
}
.btn--phone__divider{
  flex-shrink: 0;
  width: 1.5px;
  height: 22px;
  background: var(--red);
}
.btn--phone__number{
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--black);
  white-space: nowrap;
}
.btn--phone:hover{
  opacity: 0.7;
}
.btn--phone:active{
  opacity: 0.55;
}

/* ============================================================
   Mobile nav toggle
   ============================================================ */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.nav-toggle span{
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--black);
  margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   Hero
   ============================================================ */
.hero-zone{
  position: relative;
  overflow: hidden;
}

.hero__van{
  display: none;
  position: absolute;
  top: 50%;
  right: -10px;
  /* The 1920×1080 photo is the previous 1520×900 artwork padded with
     white (+400px left, +130px top, +50px bottom). Width is scaled by
     1920/1520 and the offset by 580/1080 so the van/movers render at
     exactly the same size and position as before; the extra white
     margin just blends into the white hero. */
  width: min(90.95vw, 1415px);
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: translateY(calc(-53.7037% + 70px));
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1300px){
  .hero__van{ display: block; }
}

.hero{
  padding-top: 15px;
  padding-bottom: 9px;
}

.hero__inner{
  display: block;
  position: relative;
  z-index: 1;
}

.hero__content{
  max-width: 62rem;
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.9s var(--ease) 0.1s forwards;
}

.hero__eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.hero__eyebrow-line{
  width: 24px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}
.hero__eyebrow-text{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.hero__headline{
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 24px;
  font-size: clamp(1.95rem, 3.05vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
}
/* Page H1 system: every page's single H1 carries .page-h1 and shares the
   landing hero headline's type, so the whole site reads as one family.
   h1.page-h1 (0,1,1) deliberately outranks the per-page heading classes
   (.svcd-hero__heading, .legal-h1, .article-h1 …) and their breakpoints,
   which keep only their layout job (margins, max-width, alignment).
   .h1-accent marks the 1–2 red key phrases inside the heading. */
h1.page-h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 3.05vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
}
/* Even line lengths instead of a lone "London" / "& the UK" dangling on
   the last line. The landing hero keeps its hand-set desktop break. */
h1.page-h1:not(.hero__headline){ text-wrap: balance; }
.h1-accent{ color: var(--red); }

/* Section headings (every H2 in <main>, site-wide) share the landing hero
   headline's letterforms: same face, 700 weight, -0.02em tracking. Size,
   line-height, colour and alignment stay with each section's own rule.
   !important because several pages style their H2s through ID-scoped
   selectors (#principles …, 500/800 weights) that a plain rule can't
   outrank without touching every page stylesheet. */
main h2,
.quote-help-heading{
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
@media (max-width: 900px){
  .hero__br-desktop{ display: none; }
}

.hero__subtext{
  margin-top: 29px;
  max-width: 34.375rem;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

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

/* ============================================================
   Trust points
   ============================================================ */
.trust__inner{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 18px;
}
.trust__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 26px;
  border-left: 1px solid var(--grey-soft);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--black);
}
.trust__item:first-child{
  border-left: none;
  padding-left: 0;
}
.trust__icon{
  display: inline-flex;
  color: var(--red);
  flex-shrink: 0;
}

@media (max-width: 640px){
  .trust__inner{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .trust__item{ border-left: none; padding-inline: 0; }
}

/* ============================================================
   Quote form
   ============================================================ */
.quote{
  padding-top: 18px;
  padding-bottom: 51px;
}
/* This section's own .container is otherwise the site-wide 1760px one —
   narrowed here so its PADDED CONTENT AREA matches .hero__content's
   column (max-width: 62rem) exactly, so the form/Trustpilot strip below
   share the SAME centre axis as the hero heading and trust row above
   instead of centring against the (much wider) page container. The
   container's own padding-inline still counts toward its max-width
   (border-box), so it has to be added back on top of the 62rem target. */
.quote .container{
  position: relative;
  z-index: 1;
  max-width: calc(62rem + var(--pad-inline) * 2);
}

.quote-form{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 550px;
  /* No shared min-height across steps any more — Step 1 and Step 2
     each follow their own natural content height (Step 2 legitimately
     needs more room: contact method + consent + two buttons), so
     Step 1 never reserves dead space it doesn't use, and Trustpilot
     below moves up with the card when it's shorter. Only the success
     state gets its own min-height (below), so it never looks cramped
     regardless of how tall Step 1/2 happen to be. */
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-bottom: 2px solid var(--red);
  border-radius: 30px;
  padding: 9px;
  min-height: 437px;
  /* Neutral drop shadow (depth) + a tight red-tinted one (a close,
     concentrated glow right at the seam) — the wide, soft halo is the
     separate ::after layer below; this pair is the "strong edge" half
     of the effect, not a substitute for it. */
  box-shadow:
    0 8px 28px rgba(0,0,0,0.04),
    0 8px 20px rgba(225,6,0,0.10);
}
/* Soft red glow "emitted" from the card's bottom edge — a dedicated
   blurred layer (not just box-shadow) so it can be wide (128% of the
   card) and spread visibly downward before fading to white, per the
   Arrow Slide-era design system's red accent. z-index:-1 tucks the
   ~20px of it that overlaps the card itself behind the card's own
   (opaque) background, so only the seam and the downward spread show —
   no parent here uses overflow:hidden, so none of this gets clipped. */
.quote-form::after{
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -50px;
  height: 65px;
  background: radial-gradient(
    ellipse at center,
    rgba(225,6,0,0.18) 0%,
    rgba(225,6,0,0.10) 35%,
    rgba(225,6,0,0.04) 65%,
    rgba(225,6,0,0) 100%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}

.quote-form__field{
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 19px 13px;
  min-width: 0;
}

.quote-form__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  flex-shrink: 0;
}

.quote-form__field-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.quote-form__field label{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 9.5px;
  color: var(--text-secondary);
}

.quote-form__field input{
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--black);
  background: transparent;
  width: 100%;
}
.quote-form__field input::placeholder{
  color: #9A9A9A;
  font-weight: 400;
  font-family: var(--font-text);
}
.quote-form__field input:focus{
  outline: none;
}
.quote-form__field:focus-within{
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px var(--red);
}

.quote-form__field input[type="date"]{
  color-scheme: light;
}

.quote-form__divider{
  height: 1px;
  background: var(--grey-soft);
  margin: 0 14px 0 51px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Hero quick-quote form — 2-step lead capture. Step markup/CSS
   lives here (not quote-form.css, which is the separate full
   multi-step wizard further down the page) since this is still
   part of the same compact hero card component.
   ------------------------------------------------------------ */
.quote-form__step-label{
  order: -2;
  margin: 2px 14px 8px;
  font-family: var(--font-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.quote-form__progress{
  order: -1;
  height: 3px;
  margin: 0 14px 12px;
  border-radius: 999px;
  background: var(--grey-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.quote-form__progress-fill{
  display: block;
  height: 100%;
  width: 50%;
  background: var(--red);
  border-radius: inherit;
  transition: width 0.3s var(--ease);
}

/* A flex column in its own right (not just a flex ITEM of .quote-form)
   so that when the shared card height exceeds this step's own natural
   content — e.g. Step 1 sitting in a card sized to fit Step 2's extra
   consent row — the leftover space collects as ONE clean gap directly
   above the primary button (via margin-top:auto below) instead of
   being silently appended as dead space under it. */
.quote-form__step{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.quote-form__step.is-active{
  animation: hqStepIn 0.2s var(--ease);
}
@keyframes hqStepIn{
  from{ opacity: 0; transform: translateY(5px); }
  to{ opacity: 1; transform: translateY(0); }
}
/* A small, constant gap after the last field — NOT margin-top:auto —
   so the button always reads as "right after the form fields" rather
   than pushed down to false-fill the shared card height. Whatever's
   left over between this and the card's own bottom edge shows as
   ordinary (symmetric) bottom padding instead, which reads as
   deliberate breathing room rather than a gap the button is floating
   above. */
.quote-form__step > .btn{ margin-top: 20px; }
.quote-form__step > .quote-form__actions{ margin-top: 12px; }
.quote-form__step[hidden]{ display: none; }

[data-hq-step="2"] .quote-form__field{
  padding: 13px 13px;
}

.quote-form__type-label{
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--black);
}

/* ------------------------------------------------------------
   Move-type custom dropdown — replaces what used to be a 2x3
   grid of large selectable cards. Those pushed Step 1 well past
   a normal first-viewport height; a compact field matching the
   postcode/date inputs recovers that space (see the .qj__tiles
   grid in quote-form.css for the visually larger equivalent used
   in the full multi-step wizard, where height isn't as tight).
   ------------------------------------------------------------ */
.quote-form__field--select{
  position: relative;
}
.quote-form__select-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--black);
  cursor: pointer;
  text-align: left;
}
.quote-form__select-value.is-placeholder{
  color: #9A9A9A;
  font-weight: 400;
  font-family: var(--font-text);
}
.quote-form__select-chevron{
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s var(--ease);
}
.quote-form__select-btn[aria-expanded="true"] .quote-form__select-chevron{
  transform: rotate(180deg);
}

.quote-form__select-menu{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 20;
  max-height: 165px;
  overflow-y: auto;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  padding: 6px;
}
.quote-form__select-menu[hidden]{ display: none; }
.quote-form__select-menu li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--black);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.quote-form__select-menu li svg{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  transition: color 0.15s var(--ease);
}
.quote-form__select-menu li:hover,
.quote-form__select-menu li.is-active{
  background: var(--red-tint);
  color: var(--red);
}
.quote-form__select-menu li:hover svg,
.quote-form__select-menu li.is-active svg{
  color: var(--red);
}

.quote-form__error{
  display: none;
  margin: 6px 14px 0;
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--red);
}
.quote-form__error.is-visible{ display: block; }
.quote-form__error--submit{ margin: 10px 14px 0; }
.quote-form__error--submit a{ text-decoration: underline; text-underline-offset: 2px; }

.quote-form__contact{
  padding: 6px 14px 2px;
}
.quote-form__seg{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quote-form__seg-input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.quote-form__seg-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--grey-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--black);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.quote-form__seg-pill:hover{ border-color: var(--grey-border); }
.quote-form__seg-input:checked + .quote-form__seg-pill{
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red);
}
.quote-form__seg-input:focus-visible + .quote-form__seg-pill{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.quote-form__consent{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 0 14px;
}
.quote-form__consent input[type="checkbox"]{
  margin-top: 3px;
  width: 15px;
  height: 15px;
  accent-color: var(--red);
  flex-shrink: 0;
  cursor: pointer;
}
.quote-form__consent label{
  font-family: var(--font-text);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.quote-form__policy-link{
  border: none;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.quote-form__policy-link:hover{ color: var(--red); }

.quote-form__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 0 14px 10px;
}
.quote-form__actions .quote-form__submit{
  flex: 1 1 auto;
  width: auto;
  margin-top: 0;
}
.quote-form__back{
  flex-shrink: 0;
  padding: 16px 20px;
  border-radius: 9999px;
  font-size: 0.78rem;
}

.quote-form__success{
  flex: 1 1 auto;
  min-height: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 32px 18px;
}
.quote-form__success[hidden]{ display: none; }
.quote-form__success svg{ color: var(--red); }
.quote-form__success p{
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 260px;
}

.btn--form{
  flex-shrink: 0;
  width: 100%;
  margin-top: 7px;
  padding: 15px 24px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
}

@media (max-width: 900px){
  .quote-form{
    padding: 10px;
  }
  .quote-form__field{
    padding: 14px 12px;
  }
  .quote-form__divider{
    margin: 0 12px 0 52px;
  }
}

/* ============================================================
   Trustpilot trust strip
   ============================================================ */
.trustpilot-strip{
  /* Deliberately NOT centred in the wider hero column — .quote-form
     sits flush-left there, so this sits flush-left too (same left edge,
     same width as the card now) with its OWN rows internally centred —
     which means those rows land centred on the form's own centre axis,
     not the column's. Centring the whole strip via margin-inline:auto
     instead would pull it toward the middle of the (much wider) column
     and visibly drift right of the form above it. */
  width: 100%;
  max-width: 550px;
  /* Sits inside the glow's downward reach (~70px past the card) rather
     than past it, so the two visually connect instead of leaving a gap
     of dead white space between them. */
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

.trustpilot-strip__row{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.trustpilot-strip__brand{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 17px;
  color: var(--black);
  flex-shrink: 0;
}

.trustpilot-strip__stars{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.trustpilot-strip__star{
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--grey-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.trustpilot-strip__star-fill{
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--tp-green);
}
.trustpilot-strip__star svg{
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
}

.trustpilot-strip__score{
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}
.trustpilot-strip__score strong{
  font-size: 18px;
  color: var(--black);
  font-weight: 700;
}

.trustpilot-strip__metrics{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 11px;
}

.trustpilot-strip__metric{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}
.trustpilot-strip__metric svg{
  color: var(--text-secondary);
  flex-shrink: 0;
}
.trustpilot-strip__metric strong{
  color: var(--black);
  font-weight: 700;
}

.trustpilot-strip__divider{
  width: 1px;
  height: 20px;
  background: var(--grey-soft);
  flex-shrink: 0;
}

@keyframes tp-rise{
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  .trustpilot-strip{
    opacity: 0;
    transform: translateY(6px);
    animation: tp-rise 0.4s var(--ease) 0.25s forwards;
  }
  .trustpilot-strip__metric{
    opacity: 0;
    transform: translateY(4px);
    animation: tp-rise 0.3s var(--ease) forwards;
  }
  .trustpilot-strip__metric:nth-child(1){ animation-delay: 0.38s; }
  .trustpilot-strip__metric:nth-child(3){ animation-delay: 0.45s; }
  .trustpilot-strip__metric:nth-child(5){ animation-delay: 0.52s; }
}

/* Mobile / in-app WebViews (Telegram etc.): the hero's entrance animations
   used fill-mode "forwards", which keeps each animated element (hero copy,
   Trustpilot strip + its metrics) on its own compositing layer for the
   life of the page. iOS WKWebViews can paint such layers over the sticky
   header while scrolling. Same motion, but the resting state is now the
   element's normal style and the animation only fills BACKWARDS (during
   its delay), so nothing stays promoted once it has played. Timing and
   delays are unchanged; desktop keeps the original rules. */
@keyframes rr-hero-in{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: none; }
}
@keyframes rr-tp-in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}
@keyframes rr-tp-metric-in{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: none; }
}
@media (max-width: 900px){
  .hero__content{ opacity: 1; transform: none; animation-name: rr-hero-in; animation-fill-mode: backwards; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  .trustpilot-strip{ opacity: 1; transform: none; animation-name: rr-tp-in; animation-fill-mode: backwards; }
  .trustpilot-strip__metric{ opacity: 1; transform: none; animation-name: rr-tp-metric-in; animation-fill-mode: backwards; }
}

@media (max-width: 640px){
  .trustpilot-strip__row{
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
  }
  .trustpilot-strip__brand{ font-size: 14px; }
  .trustpilot-strip__stars{ gap: 2px; }
  .trustpilot-strip__star{ width: 18px; height: 18px; border-radius: 3px; }
  .trustpilot-strip__star svg{ width: 10px; height: 10px; }
  .trustpilot-strip__score{ font-size: 12px; white-space: nowrap; }
  .trustpilot-strip__score strong{ font-size: 13px; }

  .trustpilot-strip__metrics{
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    margin-top: 11px;
  }
  .trustpilot-strip__metric{
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
  }
  .trustpilot-strip__metric svg{ width: 14px; height: 14px; }
  .trustpilot-strip__divider{ height: 14px; }
}

/* Tightest phones (~320-400px): sizes/gaps shrink further first, per
   spec — dividers (the least essential visual element) only drop once
   everything else is already as compact as it can reasonably go. */
@media (max-width: 400px){
  .trustpilot-strip__row{ gap: 6px; }
  .trustpilot-strip__brand{ font-size: 12px; }
  .trustpilot-strip__stars{ gap: 2px; }
  .trustpilot-strip__star{ width: 15px; height: 15px; }
  .trustpilot-strip__star svg{ width: 8px; height: 8px; }
  .trustpilot-strip__score{ font-size: 10.5px; }
  .trustpilot-strip__score strong{ font-size: 11.5px; }

  .trustpilot-strip__metrics{ gap: 5px; }
  .trustpilot-strip__metric{ font-size: 9.5px; gap: 3px; }
  .trustpilot-strip__metric svg{ width: 12px; height: 12px; }
  .trustpilot-strip__divider{ display: none; }
}

/* Desktop hero rhythm: heading sits right under the header, then
   24 → 18 → 21 → 14px down to Trustpilot, so heading → form → rating
   fits in the first viewport at 1440×900 / 1536×864 / 1920×1080.
   .hero__van used to hang off top:50% of .hero-zone, so every spacing
   or copy change in the left column dragged the photo up or down. It
   is now pinned to the zone's former midpoint (800.4px of fixed content
   + the two-line headline, 2 × 1.08 × font-size) and no longer depends
   on the left column's height. */
@media (min-width: 901px){
  /* Drops the left column up to 32px below the header, but only as far
     as the viewport allows: the Trustpilot strip ends ~758px + the
     two-line headline below the top of the page, and must stay ≥16px
     above the fold. Short screens (e.g. 1536×864) get less or no drop. */
  .hero{ padding-top: clamp(0px, calc(100vh - 774px - 2.16 * clamp(1.95rem, 3.05vw, 3.2rem)), 32px); }
  .hero__headline{ margin-top: 0; }
  .hero__subtext{ margin-top: 24px; }
  .trust__inner{ margin-top: 18px; }
  .quote{ padding-top: 12px; }
  .trustpilot-strip{ margin-top: 14px; }
  .trustpilot-strip__metrics{ margin-top: 6px; }
  .hero__van{ top: calc(370.2px + 1.08 * clamp(1.95rem, 3.05vw, 3.2rem)); }
}

/* ============================================================
   Reveal-on-scroll utility
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   About
   ============================================================ */
.about{
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding-top: 142px;
  padding-bottom: 120px;
}

.about__inner{
  position: relative;
  z-index: 1;
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 64px;
}

.about__content{
  max-width: 44rem;
}

.about__visual{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: -300px;
}
.about__visual-img{
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  object-fit: contain;
}

.about__heading{
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--black);
}
.about__heading em{
  font-style: normal;
  color: var(--red);
}

.about__text{
  margin-top: 32px;
}
.about__text p{
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.about__text p + p{
  margin-top: 20px;
}
/* Contextual links inside the About copy — global a{} strips all link
   styling, so without this they'd be indistinguishable from the text. */
.about__text p a{
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.about__text p a:hover{ color: var(--red); }

/* Contextual in-copy links (service mentions inside FAQ answers and body
   text) — same treatment as the About copy links above, so a link reads
   as a link without changing the surrounding typography. */
.inline-link{
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.inline-link:hover{ color: var(--red); }
.inline-link:focus-visible{ outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }

.about__closing{
  color: var(--black) !important;
  font-weight: 500;
  font-size: 1.05rem !important;
}

@media (max-width: 900px){
  .about__inner{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .about__content{ max-width: none; }
  .about__visual{
    justify-content: center;
    margin-top: 40px;
    margin-right: 0;
  }
  .about__visual-img{ max-width: 480px; margin: 0 auto; }
}

@media (max-width: 480px){
  .about__visual{ margin-top: 32px; }
  .about__visual-img{ max-width: 100%; }
}

.text-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--black);
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--grey-soft);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
}
.text-link .btn__arrow{
  color: var(--red);
  transition: transform 0.25s var(--ease);
}
.text-link:hover{
  color: var(--red);
  border-color: var(--red);
}
.text-link:hover .btn__arrow{
  transform: translateX(3px);
}

.values__inner{
  padding-top: 72px;
  padding-bottom: 120px;
}
.values__grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.value-card{
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 14px;
  padding: 26px 20px;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.value-card:hover{
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: 0 16px 34px rgba(17,17,17,0.06);
}
.value-card__icon{
  display: inline-flex;
  color: var(--red);
  margin-bottom: 14px;
}
.value-card h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--black);
}
.value-card p{
  margin-top: 8px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (max-width: 1100px){
  .values__grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
  .about{ padding-top: 120px; }
  .values__grid{ grid-template-columns: repeat(2, 1fr); }
  .values__inner{ padding-bottom: 72px; }
}

@media (max-width: 560px){
  .values__grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   Services
   ============================================================ */
.services{
  position: relative;
  background: var(--white);
  padding-top: 120px;
  padding-bottom: 0;
}

.services-header{
  width: min(760px, calc(100% - 40px));
  margin: 0 auto 80px;
  text-align: center;
}
.services-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--red);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.services-eyebrow::before{
  content: '';
  width: 28px;
  height: 2px;
  background: var(--red);
}
.services-header h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--black);
}
.services-header h2 span{
  color: var(--red);
}
.services-header p{
  max-width: 30rem;
  margin: 24px auto 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Route + main services */
.services-timeline{
  position: relative;
  width: calc(100% - 80px);
  max-width: 1240px;
  margin: 0 auto;
}

.service-row{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr);
  align-items: center;
  min-height: 305px;
  padding: 28px 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.service-row.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.service-visual{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
  opacity: 0;
  transform: translateX(-15px);
}
/* Mobile-only badge (see the 900px query below) — a plain child on
   desktop otherwise, so it must default to hidden here. */
.service-icon-badge{
  display: none;
}
.service-image-left .service-visual{
  justify-content: flex-end;
}
.service-image-right .service-visual{
  justify-content: flex-start;
  transform: translateX(15px);
}
.service-row.is-visible .service-visual{
  opacity: 1;
  transform: translateX(0);
}
.service-visual img{
  display: block;
  width: auto;
  max-width: 455px;
  max-height: 300px;
  object-fit: contain;
}
.service-row[data-service="1"] img{ max-width: 435px; }
.service-row[data-service="2"] img{ max-width: 435px; }
.service-row[data-service="3"] img{ max-width: 410px; }
.service-row[data-service="4"] img{ max-width: 455px; }
.service-row[data-service="5"] img{ max-width: 455px; }
.service-row[data-service="6"] img{ max-width: 435px; }

.service-copy{
  position: relative;
  max-width: 24rem;
  min-width: 0;
  z-index: 3;
}
.service-image-left .service-copy{
  justify-self: start;
  text-align: left;
}
.service-image-right .service-copy{
  justify-self: end;
  text-align: right;
}
.service-number{
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 3vw, 3.25rem);
  line-height: 1;
  color: var(--red);
}
.service-copy h3{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.7vw, 1.75rem);
  line-height: 1.15;
  color: var(--black);
}
.service-copy p{
  max-width: 23rem;
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.service-image-right .service-copy p{
  margin-left: auto;
}
.service-copy__link{
  margin-top: 14px;
  gap: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  padding-bottom: 2px;
}
.service-copy__link .btn__arrow{
  width: 10px;
  height: 8px;
}

.services-route-layer{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 140px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}
.services-route-svg{
  position: absolute;
  inset: 0;
  width: 140px;
  height: 100%;
  overflow: visible;
}
.services-route-path{
  fill: none;
  stroke: var(--red);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}

.route-marker{
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.045);
  color: var(--red);
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  z-index: 10;
}
.route-marker:hover{
  border-color: var(--red);
}
.route-marker svg{
  width: 26px;
  height: 26px;
}
.route-marker.is-visible{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.route-space{
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Local connector: text side of the checkpoint icon only — the icon
   sits 64px off the text-facing edge of this 140px column (see the
   marker x-positions in buildServicesRoute()), leaving room for a
   proper dash. The image-facing side of the icon is left bare. */
.service-text-connector{
  width: 52px;
  height: 1px;
  flex: 0 0 52px;
  background-image: repeating-linear-gradient(
    to right,
    #D8D8D8 0px,
    #D8D8D8 4px,
    transparent 4px,
    transparent 8px
  );
  background-repeat: repeat-x;
  pointer-events: none;
}
.service-image-left .route-space{
  justify-content: flex-end;
  padding-right: 8px;
}
.service-image-right .route-space{
  justify-content: flex-start;
  padding-left: 8px;
}

/* Additional services */
.services__extra{
  padding: 92px 24px 100px;
  background: var(--white);
}
.services__extra-header{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.services__extra-eyebrow{
  display: block;
  color: var(--red);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.services__extra-heading{
  margin: 20px auto 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 3vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--black);
}
.services__extra-heading em{
  font-style: normal;
  color: var(--red);
}

.services__extra-list{
  max-width: 820px;
  margin: 56px auto 0;
}

.services__extra-row{
  position: relative;
}
.services__extra-row:not(:last-child)::after{
  content: '';
  position: absolute;
  left: 84px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--grey-soft);
}

.services__extra-trigger{
  width: 100%;
  display: grid;
  grid-template-columns: 64px 1fr 32px;
  align-items: center;
  column-gap: 20px;
  min-height: 92px;
  padding-block: 16px;
  text-align: left;
  border-radius: 10px;
  transition: background-color 0.25s var(--ease);
}
.services__extra-trigger:hover{
  background: rgba(244, 244, 242, 0.6);
}
.services__extra-trigger:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.services__extra-icon{
  display: inline-flex;
  color: #161616;
  transition: color 0.25s var(--ease);
}
.services__extra-icon svg{
  width: 40px;
  height: 40px;
}
.services__extra-trigger:hover .services__extra-icon,
.services__extra-row.is-open .services__extra-icon{
  color: var(--red);
}

.services__extra-copy{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.services__extra-title{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--black);
  transition: color 0.25s var(--ease);
}
.services__extra-trigger:hover .services__extra-title,
.services__extra-row.is-open .services__extra-title{
  color: var(--red);
}
.services__extra-desc{
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.services__extra-toggle{
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--red);
  transition: transform 0.25s var(--ease);
}
.services__extra-trigger:hover .services__extra-toggle{
  transform: translateX(3px);
}

.services__extra-answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.services__extra-row.is-open .services__extra-answer{
  grid-template-rows: 1fr;
}
.services__extra-answer-inner{
  overflow: hidden;
  min-height: 0;
  padding: 0 32px 12px 84px;
}

.services__extra-bullets{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.services__extra-bullets li{
  position: relative;
  padding-left: 16px;
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.services__extra-bullets li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}
.services__extra-row.is-open .services__extra-bullets li{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

.services__extra-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--red);
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.services__extra-row.is-open .services__extra-cta{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}
.services__extra-cta svg{
  transition: transform 0.25s var(--ease);
}
.services__extra-cta:hover svg{
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce){
  .services__extra-answer{ transition: none; }
  .services__extra-bullets li,
  .services__extra-cta{ transition: none; }
}

/* Mobile accordion motion — the answer's height is animated in px by
   window.RedRouteAccordion (about-animation.js), which leaves no inline
   height behind; these are the resting states it settles into. Desktop
   keeps the grid-template-rows transition above. */
@media (max-width: 768px){
  .services__extra-answer{
    display: block;
    height: 0;
    overflow: hidden;
    transition: none;
  }
  .services__extra-row.is-open .services__extra-answer{ height: auto; }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference){
  .services__extra-bullets li,
  .services__extra-cta{
    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .services__extra-row.is-open .services__extra-bullets li{
    transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1) 50ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 50ms;
  }
  .services__extra-row.is-open .services__extra-cta{
    transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1) 90ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 90ms;
  }
  /* +/− is a text glyph: the new glyph rotates/fades in (the
     keyframe only sets its start, so it settles on the glyph's own
     resting transform). */
  .services__extra-toggle.is-swapping{
    animation: rr-extra-toggle-swap 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes rr-extra-toggle-swap{
    from{ opacity: 0; transform: rotate(-90deg); }
  }
}

@media (max-width: 900px){
  .services{ padding-top: 72px; }

  .services-header{ margin-bottom: 55px; }

  /* Route line is a desktop-only device — on mobile every service is a
     plain stacked block, so the whole absolutely-positioned SVG/marker
     layer (and the gutter that was reserved for it) is removed rather
     than just hidden, so the freed width goes back to the content. */
  .services-route-layer{ display: none; }

  .services-timeline{
    width: 100%;
    max-width: none;
    padding-inline: 24px;
  }

  .service-row{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding-block: 32px;
  }
  .service-row::after{ display: none; }

  .route-space{ display: none; }

  .service-visual,
  .service-copy{ width: 100%; }

  .service-image-left .service-copy,
  .service-image-right .service-copy{
    order: 1;
    text-align: left;
    justify-self: auto;
  }
  .service-image-right .service-copy p{ margin-left: 0; }

  /* Same fixed-height, centred stage for every image regardless of its
     own aspect ratio — this is what actually fixes the "images don't
     feel like one system" complaint, not the max-width/max-height caps
     alone (see the [data-service] override below: those desktop caps
     are more specific than a plain .service-visual img rule and would
     otherwise keep winning here and re-introduce the size mismatch). */
  .service-image-left .service-visual,
  .service-image-right .service-visual{
    order: 2;
    position: relative;
    width: 100%;
    height: 280px;
    justify-content: center;
    margin-top: 4px;
    transform: translateY(14px);
  }
  .service-row.is-visible .service-visual{
    transform: translateY(0);
  }
  .service-visual img,
  .service-row[data-service="1"] img,
  .service-row[data-service="2"] img,
  .service-row[data-service="3"] img,
  .service-row[data-service="4"] img,
  .service-row[data-service="5"] img,
  .service-row[data-service="6"] img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
  }

  /* Icon badge — floats over the image's top-left corner, positioned
     purely relative to .service-visual itself. Entirely independent of
     the (now hidden) route layer / marker system. */
  .service-icon-badge{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -18px;
    left: -4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    color: var(--red);
    z-index: 2;
  }

  .service-number{
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 12px;
  }
  .service-copy h3{
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .service-copy p{
    font-size: 1rem;
    line-height: 1.55;
    max-width: 100%;
  }
  .service-copy__link{
    margin-top: 14px;
    margin-bottom: 20px;
    font-size: 0.72rem;
  }

  .services__extra{ padding: 56px 20px 64px; }
  .services__extra-eyebrow{ font-size: 0.7rem; letter-spacing: 0.16em; }
  .services__extra-heading{ margin-top: 14px; font-size: clamp(2rem, 8vw, 2.25rem); }
  .services__extra-list{ margin-top: 40px; }
  .services__extra-row:not(:last-child)::after{ left: 60px; }
  .services__extra-trigger{
    grid-template-columns: 46px 1fr 32px;
    column-gap: 14px;
    min-height: 76px;
    padding-block: 14px;
  }
  .services__extra-icon svg{ width: 28px; height: 28px; }
  .services__extra-title{ font-size: 1rem; }
  .services__extra-desc{ font-size: 0.85rem; }
  .services__extra-toggle{ font-size: 1.3rem; }
  .services__extra-answer-inner{ padding: 0 12px 12px 60px; }
}

@media (max-width: 390px){
  .services-timeline{ padding-inline: 20px; }
}

/* ============================================================
   Mid-page CTA — slim full-width horizontal strip bridging
   Additional Services and Why RedRoute. Not a card: no radius,
   no shadow — just hairline top/bottom borders and a red-tinted
   radial glow washing across the centre.
   ============================================================ */
.mid-cta{
  background: radial-gradient(ellipse at center, rgba(225,6,0,0.06) 0%, rgba(225,6,0,0.03) 50%, rgba(225,6,0,0) 90%), var(--white);
  border-top: 1px solid rgba(225,6,0,0.18);
  border-bottom: 1px solid rgba(225,6,0,0.18);
  padding-block: 27px;
}
.mid-cta__inner{
  width: calc(100% - 80px);
  max-width: 1450px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(300px, 520px) auto;
  column-gap: 80px;
  justify-content: center;
  align-items: center;
}
.mid-cta__col{
  display: flex;
  align-items: center;
  min-width: 0;
}
.mid-cta__col--heading{
  gap: 22px;
}
.mid-cta__col--text{
  justify-content: center;
}
.mid-cta__eyebrow-line{
  width: 24px;
  height: 2px;
  flex-shrink: 0;
  background: var(--red);
}
.mid-cta__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
  white-space: nowrap;
}
.mid-cta__text{
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mid-cta__link{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.mid-cta__link .btn__arrow{
  color: var(--red);
}

@media (max-width: 1024px){
  .mid-cta__inner{
    grid-template-columns: auto minmax(240px, 400px) auto;
    column-gap: 44px;
  }
}

/* 701-860px: the three nowrap columns (+ gaps) were ~12px wider than the
   viewport at 768px, causing sideways scroll. Let only the middle line
   wrap and tighten the gaps in this narrow band. */
@media (min-width: 701px) and (max-width: 860px){
  .mid-cta__inner{ column-gap: 28px; grid-template-columns: auto minmax(180px, 400px) auto; }
  .mid-cta__text{ white-space: normal; }
}

@media (max-width: 700px){
  .mid-cta{ padding-block: 24px; }
  .mid-cta__inner{
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 14px;
  }
  .mid-cta__heading,
  .mid-cta__text{
    white-space: normal;
  }
}

/* ============================================================
   How It Works — locked scroll-driven van animation
   ============================================================ */
.how{
  position: relative;
  background: #FFFFFF;
  /* So the "How It Works" nav link lands the section below the fixed
     header instead of half-hidden under it. */
  scroll-margin-top: var(--header-h);
}

/* .container is left:0/right:auto site-wide (its leftover width past
   1760px collapses entirely into the right margin), which is invisible
   in most sections but throws off a perfectly symmetric layout like
   this timeline. Re-center it here only, without touching the shared
   .container rule used elsewhere on the page. Compound selector so this
   wins on specificity rather than relying on CSS source order. */
.how__inner.container{
  margin-left: auto;
  margin-right: auto;
}

/* The tall scroll runway. Its height above the sticky viewport's own
   height IS the scroll distance the animation plays out over. Native
   position:sticky below is scoped entirely to this element by the CSS
   spec itself — it is structurally impossible for it to engage before
   this track reaches the header, or to stay engaged after the track
   ends, regardless of how/when content elsewhere on the page loads. */
.how__scroll-track{
  position: relative;
  width: 100%;
  /* ~325vh of actual frame-scrub animation (unchanged) + a pure hold
     appended at the end (see HOLD_END in how-it-works-animation.js) —
     roughly one wheel-scroll's worth of scroll distance beyond where
     step 04 completes, so the finished state stays pinned for a brief
     beat before the section releases, instead of unpinning the instant
     the last frame lands. */
  height: 340vh;
  background: #FFFFFF;
}

/* Sticky viewport. On short viewports / reduced motion, JS swaps this
   to position:static (via .how__scroll-track--flow) and the section
   just scrolls with the page instead. */
.how__sticky{
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  min-height: 480px;
  overflow: hidden;
  background: #FFFFFF;
}
@supports (height: 100dvh){
  /* Avoids the sticky viewport jumping in height as mobile browser
     chrome (address bar / toolbars) shows and hides during scroll. */
  .how__sticky{ height: calc(100dvh - var(--header-h)); }
}

.how__scroll-track--flow{
  height: auto;
}
.how__scroll-track--flow .how__sticky{
  position: static;
  height: auto;
  min-height: 0;
}

.how__inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Intro/canvas/timeline are all flex-shrink:0 (the canvas must never
     get visually squashed), so if their combined natural height ever
     exceeds this sticky viewport — a few px of vh/vw rounding is all it
     takes, which browser zoom shifts enough to tip over (this is what
     made the eyebrow vanish at 100% zoom but not 90%: centering an
     over-height block against `overflow:hidden` on .how__sticky clips
     equally off both ends, and the eyebrow, being the topmost/outermost
     element, is the first thing that goes). `safe center` is the
     standards mechanism for exactly this: center when it fits, but
     never clip past a safe start alignment when it doesn't. The
     flex-start line above it is the fallback for browsers that don't
     parse the safe/unsafe keyword (invalid value keeps the last valid
     declaration) — same guarantee, just always top-anchored instead of
     centred-when-it-fits. */
  justify-content: flex-start;
  justify-content: safe center;
  gap: clamp(4px, 0.8vh, 10px);
  padding-block: clamp(8px, 1.3vh, 16px);
  position: relative;
}

.how__intro{
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
}
.how__eyebrow{
  justify-content: center;
  margin-bottom: 6px;
}
.how__heading{
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--black);
}
.how__text{
  margin: 6px auto 0;
  max-width: 640px;
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.how__canvas-wrap{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  /* +15% over the original 748px/36vh — verified live (Playwright sweep
     in 0.1vh steps) as the largest size that still keeps isFlowMode()
     false, i.e. the sticky-pinned scroll animation intact, at both
     1440x900 AND 1440x816 (900 has much more headroom; 816 is the actual
     binding constraint — 41.7vh already trips it). This only fits because
     .how__inner's surrounding padding/gap and the intro/timeline text
     were also tightened (see .how__inner, .how__intro, .how__connector/
     .how__icon/.how__number/.how__title/.how__desc) to buy back room.
     Keep the other three breakpoints below in sync (same 41.5/36 ratio)
     if this is adjusted again. */
  width: min(862px, 61.6vw, calc(41.5vh * 1.7766));
  aspect-ratio: 1400 / 788;
  margin: 0 auto;
  background: #FFFFFF;
}
.how__canvas{
  display: block;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}

.how__timeline{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
}

.how__track{
  position: absolute;
  top: 8px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 1px;
}
.how__track-base{
  position: absolute;
  inset: 0;
  background: var(--grey-soft);
}
.how__track-progress{
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

.how__steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
}
.how__step{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.how__node{
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--grey-soft);
  flex-shrink: 0;
  transition: background-color 350ms ease, border-color 350ms ease;
}
.how__node::after{
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 350ms ease;
}
.how__step.is-current .how__node{
  border-color: var(--red);
}
.how__step.is-current .how__node::after{
  background: var(--red);
}
.how__step.is-reached:not(.is-current) .how__node{
  background: var(--red);
  border-color: var(--red);
}

.how__connector{
  width: 1px;
  height: 22px;
  margin-top: 0;
  background: var(--grey-soft);
  transition: background-color 350ms ease;
}
.how__step.is-reached .how__connector{
  background: var(--red);
}

.how__icon{
  width: 34px;
  height: 34px;
  margin-top: 0;
  color: #A8A8A8;
  opacity: 0.65;
  transform: translateY(5px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s var(--ease);
}
.how__step.is-reached .how__icon{
  color: #202020;
  opacity: 1;
  transform: translateY(0);
}

.how__number{
  margin-top: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  /* Was var(--red) at opacity:0.5 — a washed-out pink with very low
     contrast against the white background, effectively unreadable
     before a step is reached. Matches .how__title/.how__desc's own
     "upcoming vs reached" pattern instead: a solid muted grey, swapping
     to solid red once reached, rather than fading a red that's already
     too pale to read. */
  color: #B9B9B6;
  transition: color 350ms ease;
}
.how__step.is-reached .how__number{
  color: var(--red);
}

.how__title{
  margin: 4px 0 0;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.2rem;
  color: #8F8F8F;
  transition: color 350ms ease;
}
.how__step.is-reached .how__title{
  color: #171717;
}

.how__desc{
  margin: 4px 0 0;
  max-width: 250px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #AAAAAA;
  opacity: 0.85;
  transition: color 350ms ease, opacity 350ms ease;
}
.how__step.is-reached .how__desc{
  color: var(--text-secondary);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .how__node,
  .how__node::after,
  .how__connector,
  .how__icon,
  .how__number,
  .how__title,
  .how__desc{ transition: none !important; transform: none !important; }
  .how__track-progress{ transition: none !important; }
}

@media (max-width: 1100px){
  .how__scroll-track{ height: 300vh; }
  .how__canvas-wrap{ width: min(710px, 63.8vw, calc(43.2vh * 1.7766)); }
  .how__desc{ max-width: 210px; font-size: 0.9rem; }
  .how__icon{ width: 34px; height: 34px; }
}

@media (max-width: 900px){
  .how__scroll-track{ height: 260vh; }
  .how__heading{ font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .how__text{ font-size: 1rem; }

  .how__canvas-wrap{ width: min(532px, 88vw, calc(33vh * 1.7766)); }

  .how__steps{ column-gap: 10px; }
  .how__connector{ height: 16px; }
  .how__icon{ width: 28px; height: 28px; }
  .how__number{ font-size: 0.82rem; margin-top: 8px; }
  .how__title{ font-size: 0.95rem; margin-top: 6px; }
  .how__desc{
    font-size: 0.78rem;
    line-height: 1.32;
    max-width: none;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 480px){
  .how__canvas-wrap{ width: min(457px, 92.4vw, calc(30.4vh * 1.7766)); }
  .how__desc{ font-size: 0.72rem; -webkit-line-clamp: 2; line-clamp: 2; }

  /* Embedded WebViews (Telegram in-app browser etc.) resize the whole
     web view mid-scroll, so vh/dvh change and resized the runway, the
     pinned viewport and the canvas while the user scrolled. Only when
     how-it-works-animation.js detects that (a same-width resize where
     100vh itself changed) does it set --hiw-vh / --hiw-dvh on the track,
     frozen at the pre-resize values. The fallbacks are exactly the
     previous units, so Safari/Chrome and desktop compute the same as
     before. */
  .how__scroll-track{ height: calc(var(--hiw-vh, 1vh) * 260); }
  .how__sticky{ height: calc(var(--hiw-dvh, 1vh) * 100 - var(--header-h)); }
  @supports (height: 100dvh){
    .how__sticky{ height: calc(var(--hiw-dvh, 1dvh) * 100 - var(--header-h)); }
  }
  .how__scroll-track--flow .how__sticky{ height: auto; }
  .how__canvas-wrap{ width: min(457px, 92.4vw, calc(var(--hiw-vh, 1vh) * 30.4 * 1.7766)); }
}

/* ============================================================
   Why RedRoute
   ============================================================ */
.why{
  position: relative;
  background: var(--white);
  padding-block: 100px;
}

.why__inner{
  max-width: 1500px;
  margin: 0 auto;
  padding-inline: var(--pad-inline);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 80px;
}

.why__content{
  max-width: 620px;
}

.why__heading{
  margin-top: 20px;
  max-width: 620px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 3.2vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--black);
}
.why__heading em{
  font-style: normal;
  color: var(--red);
}

.why__benefits{
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 36px;
}

.why__benefit{
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 13px;
  align-items: start;
}

.why__benefit-icon{
  display: inline-flex;
  color: var(--black);
  transition: color 0.2s var(--ease);
}
.why__benefit-icon svg{
  width: 32px;
  height: 32px;
}
.why__benefit:hover .why__benefit-icon{
  color: var(--red);
}

.why__benefit-copy{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-top: 3px;
}
.why__benefit-title{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--black);
  transition: color 0.2s var(--ease);
}
.why__benefit:hover .why__benefit-title{
  color: var(--red);
}
.why__benefit-desc{
  font-family: var(--font-text);
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.why{
  overflow-x: hidden;
}

.why__visual{
  min-height: 560px;
  padding-top: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Layer 1: fades/slides the whole picture in once, on scroll into view.
   Layer 2 (below) owns the separate, continuous float — kept on its own
   element so the two transforms never fight over the same property. */
.why__visual-reveal{
  width: 100%;
  opacity: 0;
  transform: translate3d(46px, 60px, 0) scale(0.92);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
  will-change: transform, opacity;
}
.why__visual-reveal.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.why__visual-float{
  --why-float-y: 15px;
  will-change: transform;
}
.why__visual-float.is-floating{
  animation: whyVisualFloat 5.5s ease-in-out infinite;
}
.why__visual-float.is-paused{
  animation-play-state: paused;
}
@keyframes whyVisualFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(calc(var(--why-float-y) * -1)); }
  100%{ transform: translateY(0); }
}

.why__visual-img{
  display: block;
  width: 96%;
  max-width: 590px;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(3%);
}

@media (prefers-reduced-motion: reduce){
  .why__visual-reveal{ transition: none; }
  .why__visual-float.is-floating{ animation: none; }
}

@media (max-width: 1100px){
  .why__inner{
    grid-template-columns: 1fr 0.9fr;
    gap: 48px;
  }
  .why__heading{ font-size: clamp(2.75rem, 4vw, 3rem); }
  .why__visual{ min-height: 420px; }
  .why__visual-img{ width: 100%; max-width: 480px; }
}

@media (max-width: 900px){
  .why{ padding-top: 64px; padding-bottom: 8px; }
  .why__inner{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .why__content{ max-width: none; }
  .why__heading{ font-size: clamp(2.1rem, 9vw, 2.4rem); }
  .why__benefits{
    grid-template-columns: 1fr;
    row-gap: 28px;
    margin-top: 36px;
  }

  .why__visual{ min-height: 0; margin-top: 40px; }
  .why__visual-reveal{
    transform: translate3d(0, 40px, 0) scale(0.95);
  }
  .why__visual-float{ --why-float-y: 8px; }
  .why__visual-img{
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    transform: none;
  }
}

/* ============================================================
   Reviews / Testimonial
   ============================================================ */
.testimonial{
  position: relative;
  background: var(--white);
  padding-top: 120px;
  padding-bottom: 130px;
  overflow-x: hidden;
  /* So the "Reviews" nav link lands the section below the sticky
     header instead of half-hidden under it (same fix as .how). */
  scroll-margin-top: var(--header-h);
}

/* .container is left:0/right:auto site-wide — see the same fix on
   .how__inner. Re-centered here only. */
.testimonial__inner.container{
  margin-left: auto;
  margin-right: auto;
}

.reviews__intro{
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.reviews__eyebrow{
  justify-content: center;
}
.reviews__heading{
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--black);
}
.reviews__text{
  margin: 16px auto 0;
  max-width: 480px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Testimonial widget ---------- */
.testimonial__widget{
  position: relative;
  margin-top: 72px;
  max-width: 1180px;
  margin-inline: auto;
  padding-bottom: 56px;
}
.testimonial__widget:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 8px;
  border-radius: 4px;
}

/* Oversized index number, bleeding behind the content. */
.testimonial__index{
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: min(19rem, 22vw);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(17, 17, 17, 0.035);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.testimonial__index.is-changing{
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-50%) scale(1.06);
}

.testimonial__body{
  position: relative;
  z-index: 1;
  display: flex;
}

/* Left rail: vertical label + progress line */
.testimonial__rail{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 44px;
  border-right: 1px solid var(--grey-soft);
}
.testimonial__rail-label{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.testimonial__rail-line{
  position: relative;
  width: 1px;
  height: 130px;
  margin-top: 28px;
  background: var(--grey-soft);
}
.testimonial__rail-fill{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--fill, 0%);
  background: var(--black);
  transition: height 0.5s var(--ease);
}

/* Invisible mirror of the rail, placed after .testimonial__content in the
   flex row. It renders the same label text (so it sizes to exactly the
   same width as the real rail) but is visibility:hidden — this gives the
   content column a matching right-hand gutter so the quote/author block
   centres on the same axis as the FAQ accordion, instead of sitting
   shifted toward the rail. */
.testimonial__rail--mirror{
  visibility: hidden;
  padding-right: 0;
  padding-left: 44px;
  border-right: none;
  border-left: 1px solid transparent;
}

/* Right column: badge, quote, footer */
.testimonial__content{
  flex: 1;
  min-width: 0;
  padding-left: 44px;
}

/* Autoplay countdown — fills over one autoplay interval and restarts on
   every change (auto or manual), so the auto-switching is visible. */
.testimonial__countdown{
  width: min(220px, 100%);
  height: 2px;
  margin-bottom: 26px;
  background: var(--grey-soft);
  border-radius: 999px;
  overflow: hidden;
}
.testimonial__countdown-fill{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}
.testimonial__countdown-fill.is-running{
  animation: testimonialCountdown var(--countdown-duration, 10s) linear forwards;
}
.testimonial__countdown-fill.is-paused{
  animation-play-state: paused;
}
@keyframes testimonialCountdown{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

.testimonial__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 0.75rem;
  color: var(--text-secondary);
  border: 1px solid var(--grey-soft);
  border-radius: 999px;
  padding: 6px 14px;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.testimonial__badge.is-changing{
  opacity: 0;
  transform: translateX(-10px);
}
.testimonial__badge-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.testimonial__quote{
  margin: 32px 0 0;
  min-height: 9.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--black);
}
.testimonial__word{
  display: inline-block;
  margin-right: 0.28em;
  opacity: 0;
  transform: translateY(18px);
  animation: testimonialWordIn 0.5s var(--ease) forwards;
  animation-delay: var(--word-delay, 0ms);
}
@keyframes testimonialWordIn{
  to{ opacity: 1; transform: translateY(0); }
}
.testimonial__quote.is-leaving .testimonial__word{
  animation: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.testimonial__footer{
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.testimonial__author{
  display: flex;
  align-items: center;
  gap: 16px;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.testimonial__author.is-changing{
  opacity: 0;
  transform: translateY(10px);
}
.testimonial__author-avatar{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.testimonial__author-avatar img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial__author-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonial__rating{
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 3px;
}
.testimonial__star{
  flex-shrink: 0;
  color: var(--red);
}
.testimonial__star--filled path{ fill: currentColor; }
.testimonial__star--empty{ color: var(--grey-soft); }
.testimonial__star--empty path{ fill: none; stroke: currentColor; stroke-width: 1.4; }
.testimonial__rating-value{
  margin-left: 4px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.testimonial__author-name{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--black);
}
.testimonial__author-role{
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.testimonial__nav{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial__navbtn{
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--grey-soft);
  color: var(--black);
}
.testimonial__navbtn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  transition: transform 0.3s var(--ease);
}
.testimonial__navbtn--prev::before{ transform: translateX(-100%); }
.testimonial__navbtn--next::before{ transform: translateX(100%); }
.testimonial__navbtn:hover::before{ transform: translateX(0); }
.testimonial__navbtn svg{
  position: relative;
  z-index: 1;
  transition: color 0.25s var(--ease);
}
.testimonial__navbtn:hover svg{ color: rgba(255,255,255,0.35); }
.testimonial__navbtn:active{ transform: scale(0.95); }
.testimonial__navbtn:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.testimonial__sr-status{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Faint scrolling ticker of routes, bleeding under the widget */
.testimonial__ticker{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.07;
  pointer-events: none;
}
.testimonial__ticker-track{
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.6rem;
  letter-spacing: -0.02em;
  color: var(--black);
  animation: testimonialTicker 70s linear infinite;
}
@keyframes testimonialTicker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .testimonial__index,
  .testimonial__badge,
  .testimonial__author,
  .testimonial__rail-fill,
  .testimonial__navbtn::before,
  .testimonial__navbtn svg{ transition: none !important; }
  .testimonial__word{ animation: none !important; opacity: 1; transform: none; }
  .testimonial__ticker-track{ animation: none !important; }
  .testimonial__countdown{ display: none; }
}

@media (max-width: 1100px){
  .testimonial__index{ font-size: min(15rem, 24vw); }
  .testimonial__quote{ min-height: 8rem; }
}

@media (max-width: 900px){
  .testimonial{ padding-top: 72px; padding-bottom: 80px; }
  .testimonial__widget{ margin-top: 44px; padding-bottom: 44px; }
  .testimonial__index{ font-size: 20vw; left: -0.25rem; }
  .testimonial__rail{ padding-right: 24px; }
  .testimonial__content{ padding-left: 24px; }
  .testimonial__quote{ min-height: 0; }
  .testimonial__ticker-track{ font-size: 2.6rem; }
  .testimonial__rail--mirror{ padding-right: 0; padding-left: 24px; }
}

@media (max-width: 640px){
  .testimonial__body{ flex-direction: column; }
  .testimonial__rail{
    flex-direction: row;
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid var(--grey-soft);
    align-items: center;
    gap: 16px;
  }
  .testimonial__rail-label{
    writing-mode: horizontal-tb;
    letter-spacing: 0.14em;
  }
  .testimonial__rail-line{
    width: 100%;
    height: 1px;
    margin-top: 0;
  }
  .testimonial__rail-fill{
    height: 100%;
    width: var(--fill, 0%);
    transition: width 0.5s var(--ease);
  }
  .testimonial__content{ padding-left: 0; padding-top: 24px; }
  .testimonial__footer{ flex-direction: column; align-items: flex-start; gap: 20px; }
  .testimonial__index{ font-size: 26vw; }
  /* Rail and content stack full-width here, so there's no side-by-side
     asymmetry left to mirror. */
  .testimonial__rail--mirror{ display: none; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{
  position: relative;
  background: var(--white);
  /* assets/faq-tape-top.png and faq-tape-bottom.png are cropped tight
     to the visible tape (see scripts used to trim Скотч 1 / Скотч 2 —
     their own transparent canvas is gone), so their rendered height at
     full 110vw width is small and scales linearly with viewport width.
     These paddings track that real height (including the extra spread
     rotate() adds) plus a clean ~42px / ~60px gap — no arbitrary or
     oversized spacing. */
  padding-top: calc(10.77vw + 44px);
  padding-bottom: calc(12.52vw + 60px);
  overflow: hidden;
  isolation: isolate;
}

.faq__inner{
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Decorative RedRoute packing-tape strips framing the FAQ section.
   Plain, un-cropped-by-CSS <img> elements — the PNG files themselves
   are already trimmed to the visible tape, so no wrapper/clip-window
   hack is needed. .faq has overflow:hidden, and the bottom tape sits
   on bottom:0, so it tracks the section's real (accordion-driven)
   height automatically — no JS, no fixed height. */
.faq__tape{
  position: absolute;
  left: 50%;
  width: 110vw;
  max-width: none;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.faq__tape--top{
  /* rotate() on a very wide, very short image lifts its right-hand
     corner well above the image's own top edge (width * sin(angle));
     top:0 would clip straight into the visible tape there since the
     PNG is trimmed tight with almost no spare transparent margin. This
     offset pushes the whole (still full-width, still fully rotated)
     image down by exactly that lift so nothing real gets clipped. */
  top: calc(2.4vw + 2px);
  transform: translateX(-50%) rotate(-2.5deg);
  transform-origin: center;
}
.faq__tape--bottom{
  bottom: 0;
  transform: translateX(-50%) rotate(1.5deg);
  transform-origin: center;
}

.faq__eyebrow{
  justify-content: center;
}

.faq__heading{
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--black);
}

.faq__text{
  margin: 18px auto 0;
  max-width: 460px;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.faq__list{
  margin-top: 36px;
  text-align: left;
  border-top: 1px solid var(--grey-soft);
}
.faq__item{
  border-bottom: 1px solid var(--grey-soft);
}

.faq__question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  text-align: left;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--black);
}

.faq__toggle{
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.faq__toggle-line{
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--red);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
.faq__toggle-line--h{ width: 14px; height: 2px; }
.faq__toggle-line--v{ width: 2px; height: 14px; }
.faq__item.is-open .faq__toggle-line--v{
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.faq__item.is-open .faq__answer{
  grid-template-rows: 1fr;
}
.faq__answer-inner{
  overflow: hidden;
  min-height: 0;
}
.faq__answer-inner p{
  margin: 0;
  padding-bottom: 22px;
  max-width: 46rem;
  font-family: var(--font-text);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.faq__item.is-open .faq__answer-inner p{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

.faq__item:nth-child(1).reveal{ transition-delay: 0.05s; }
.faq__item:nth-child(2).reveal{ transition-delay: 0.1s; }
.faq__item:nth-child(3).reveal{ transition-delay: 0.15s; }
.faq__item:nth-child(4).reveal{ transition-delay: 0.2s; }
.faq__item:nth-child(5).reveal{ transition-delay: 0.25s; }
.faq__item:nth-child(6).reveal{ transition-delay: 0.3s; }
/* Same 0.05s-per-item stagger, extended for lists longer than the
   Landing Page's 6 (e.g. the Areas We Cover FAQ, which reuses this
   exact component with 8 items) — a no-op wherever a list has 6 or
   fewer items, since these selectors simply won't match. */
.faq__item:nth-child(7).reveal{ transition-delay: 0.35s; }
.faq__item:nth-child(8).reveal{ transition-delay: 0.4s; }

@media (max-width: 900px){
  .faq{ padding-top: calc(11.27vw + 42px); padding-bottom: calc(15.32vw + 60px); }
  .faq__heading{ font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .faq__text{ max-width: none; }
  .faq__list{ margin-top: 28px; }
  .faq__question{ font-size: 1rem; }
  .faq__tape{ width: 140vw; }
  .faq__tape--top{ top: calc(1.83vw + 2px); transform: translateX(-50%) rotate(-1.5deg); }
  .faq__tape--bottom{ transform: translateX(-50%) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce){
  .faq__answer{ transition: none; }
  .faq__answer-inner p{ transition: none; }
  .faq__toggle-line{ transition: none; }
}

/* Mobile accordion motion — .faq__answer's height is animated in px by
   window.RedRouteAccordion (about-animation.js), which leaves no inline
   height behind; these are the resting states it settles into. Only the
   answer moves — the question row is untouched. Desktop keeps the
   grid-template-rows transition above. */
@media (max-width: 768px){
  .faq__answer{
    display: block;
    height: 0;
    overflow: hidden;
    transition: none;
  }
  .faq__item.is-open .faq__answer{ height: auto; }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference){
  .faq__answer-inner p{
    transform: translateY(8px);
    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .faq__item.is-open .faq__answer-inner p{
    transform: translateY(0);
    transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1) 50ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 50ms;
  }
  .faq__toggle-line{ transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1); }
}

/* ============================================================
   Homepage final CTA — two-column conversion section: left is the
   main pitch (eyebrow, headline, button, social proof), right is a
   2x2 benefits grid. Links out to the dedicated /quote page.
   ============================================================ */
.final-cta{
  background: var(--white);
  padding-block: 120px 130px;
}
.final-cta__inner{
  max-width: 1500px;
  margin: 0 auto;
  padding-inline: var(--pad-inline);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  column-gap: 80px;
}

.final-cta__content{
  max-width: 480px;
}

.final-cta__eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
}
.final-cta__eyebrow-line{
  width: 24px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}
.final-cta__eyebrow span:last-child{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.final-cta__heading{
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--black);
}
.final-cta__heading em{
  font-style: normal;
  color: var(--red);
}
.final-cta__text{
  margin-top: 18px;
  max-width: 420px;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.final-cta__button{
  margin-top: 30px;
}

.final-cta__social{
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.final-cta__avatars{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.final-cta__avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--red-tint);
  border: 2px solid var(--white);
  flex-shrink: 0;
}
.final-cta__avatar img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.final-cta__avatar + .final-cta__avatar{ margin-left: -10px; }
.final-cta__stars{
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--red);
  flex-shrink: 0;
}
.final-cta__social-text{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--black);
}

/* Right side: 2x2 benefit grid — icon, thin red divider, then
   title+description, all vertically centered as a row. No cards, no
   shadows, no borders — hierarchy comes from icon/divider/type/spacing
   only. */
.final-cta__benefits{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 68px;
  row-gap: 48px;
  padding-left: 64px;
}
.final-cta__benefit{
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.final-cta__benefit-icon{
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
}
.final-cta__benefit-divider{
  flex-shrink: 0;
  width: 1px;
  height: 50px;
  background: var(--red);
}
.final-cta__benefit-copy{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.final-cta__benefit-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--black);
}
.final-cta__benefit-text{
  margin-top: 5px;
  max-width: 25ch;
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 1100px){
  .final-cta__inner{ column-gap: 48px; }
  .final-cta__benefits{ padding-left: 40px; column-gap: 40px; row-gap: 36px; }
}

@media (max-width: 860px){
  .final-cta{ padding-block: 72px 80px; }
  .final-cta__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .final-cta__content{ max-width: none; margin-inline: auto; }
  .final-cta__eyebrow{ justify-content: center; }
  .final-cta__text{ margin-inline: auto; }
  .final-cta__social{ margin-top: 28px; justify-content: center; }

  .final-cta__benefits{
    margin-top: 48px;
    padding-left: 0;
  }
  .final-cta__benefit{ text-align: left; }
  .final-cta__benefit-text{ max-width: none; }
}

@media (max-width: 480px){
  .final-cta__benefits{ grid-template-columns: 1fr; row-gap: 28px; }
  .final-cta__benefit-icon{ width: 42px; height: 42px; }
  .final-cta__benefit-divider{ height: 42px; }
  .final-cta__benefit-title{ font-size: 1.05rem; }
  .final-cta__benefit-text{ font-size: 0.87rem; }
}

/* ============================================================
   Quote help — compact support CTA between the quote form and
   the footer. Not a sales CTA: for people who've already reached
   the form and have a question, so it never re-offers "Get A
   Free Quote", only a way to talk to a person.
   ============================================================ */
.quote-help-section{
  background: var(--white);
  padding-block: 88px;
}
.quote-help-inner{
  width: min(calc(100% - 48px), 1280px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.quote-help-copy{
  max-width: 560px;
}
.quote-help-heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--black);
}
.quote-help-desc{
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.quote-help-divider{
  width: 1px;
  height: 64px;
  flex-shrink: 0;
  background: var(--grey-soft);
}
.quote-help-call{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 30px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--grey-soft);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.quote-help-call:hover{
  border-color: var(--grey-border);
  box-shadow: 0 10px 30px rgba(17,17,17,0.07);
}
.quote-help-call-icon{
  display: inline-flex;
  flex-shrink: 0;
  color: var(--red);
}
.quote-help-call-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quote-help-call-label{
  font-family: var(--font-text);
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.quote-help-call-number{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--black);
  white-space: nowrap;
}
.quote-help-call-arrow{
  color: var(--red);
  transition: transform 0.25s var(--ease);
}
.quote-help-call:hover .quote-help-call-arrow{ transform: translateX(4px); }

@media (max-width: 900px){
  .quote-help-inner{ gap: 40px; }
}

@media (max-width: 700px){
  .quote-help-section{ padding-block: 64px; }
  .quote-help-inner{
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }
  .quote-help-copy{
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .quote-help-divider{ display: none; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  position: relative;
  overflow: hidden;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 64px;
  padding-bottom: 0;
}

/* Minimal variant — quote.html only: just the copyright/legal row, no
   nav grid or wordmark, so it needs its own bottom breathing room
   instead of relying on the (absent) wordmark block for it. */
.site-footer--minimal{
  padding-bottom: 8px;
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.45fr 1.25fr 0.9fr 1fr 1fr;
  column-gap: clamp(55px, 6vw, 110px);
  row-gap: 56px;
  align-items: start;
  text-align: left;
}

.footer__brand{
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__logo-badge{
  display: inline-flex;
  line-height: 0;
}
.footer__logo-img{
  display: block;
  height: 46px;
  width: auto;
}
.footer__brand-text{
  margin-top: 24px;
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
}
.footer__brand-trust{
  margin-top: 16px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.85);
}

.footer__heading{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.footer__heading::after{
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 10px;
  background: var(--red);
}

.footer__links{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer__links a{
  display: inline-block;
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer__links a:hover{
  color: var(--white);
  transform: translateX(2px);
}
.footer__links--static li{
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
}

.footer__view-all{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 24px;
  padding: 8px 0 10px;
  border: 0;
  background: transparent;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--white);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer__view-all::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--red);
  transition: width 220ms ease;
}
.footer__view-all span[aria-hidden]{ color: var(--red); transition: transform 0.2s var(--ease); }
.footer__view-all:hover{
  transform: translateX(2px);
}
.footer__view-all:hover::after{
  width: 100%;
}
.footer__view-all:hover span[aria-hidden]{ transform: translateX(3px); }

.footer__social{
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.footer__social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
a.footer__social-link:hover{ border-color: var(--red); color: var(--red); }

.footer__contact-list{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.footer__contact-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.footer__contact-icon{
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(255,255,255,0.55);
}
.footer__contact-list a,
.footer__contact-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer__contact-list a{
  transition: color 0.2s var(--ease);
}
.footer__contact-list a:hover .footer__contact-value{ color: var(--red); }
.footer__contact-label{
  font-family: var(--font-text);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
.footer__contact-value{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--white);
  transition: color 0.2s var(--ease);
}

.footer__divider{
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin-top: 44px;
}

.footer__bottom{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 20px 0;
}
.footer__legal-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer__legal{
  font-family: var(--font-text);
  font-size: 0.82rem;
  line-height: 1;
  color: rgba(255,255,255,0.5);
  text-align: left;
}
.footer__legal-links{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}
.footer__legal-links li{
  display: flex;
  align-items: center;
  font-family: var(--font-text);
  font-size: 0.82rem;
  line-height: 1;
  color: rgba(255,255,255,0.5);
  list-style: none;
}
.footer__legal-links li + li{
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 18px;
}
.footer__legal-cookie-btn{
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.footer__legal-entity{
  margin-top: 4px;
  font-family: var(--font-text);
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.35);
  text-align: left;
}

/* Highlights an unconfirmed legal/business value (company number,
   figures pending owner or solicitor sign-off) wherever it appears —
   in the footer as well as the Privacy/Cookie/Terms pages — so it
   reads as "needs attention" rather than settled copy. */
.legal-placeholder{
  color: var(--red);
  font-weight: 600;
}

/* Giant background wordmark — purely architectural/decorative (hence
   aria-hidden on the markup), so it's kept out of the accessibility
   tree entirely rather than described. The wrap's height is just the
   text's own natural line-box; translateY(15%) then pushes the glyphs
   down far enough that overflow:hidden crops their lower portion,
   giving the "sinking into the footer's floor" look instead of a
   plain oversized heading. Never brighten past these alpha values —
   it must stay a background texture that rewards a second look, not
   a headline. */
.footer__wordmark-wrap{
  width: 100%;
  overflow: hidden;
  margin-top: 48px;
  line-height: 0;
  text-align: center;
}
.footer__wordmark{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(180px, 17vw, 340px);
  line-height: 0.75;
  letter-spacing: -0.055em;
  white-space: nowrap;
  transform: translateY(18%);
}
.footer__wordmark span:first-child{ color: rgba(230,0,0,0.065); }
.footer__wordmark span:last-child{ color: rgba(255,255,255,0.042); }

@media (max-width: 900px){
  .footer__wordmark{ font-size: clamp(110px, 30vw, 170px); }
}

@media (max-width: 1100px){
  .footer__grid{
    grid-template-columns: repeat(2, 1fr);
    row-gap: 48px;
  }
  .footer__brand{
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

@media (max-width: 900px){
  .site-footer{ padding-top: 56px; padding-bottom: 28px; }
  .footer__grid{
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .footer__brand{ grid-column: auto; max-width: none; }
  .footer__divider{ margin-top: 40px; }
  .footer__bottom{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 8px;
  }
  .footer__legal{ text-align: center; }
  .footer__legal-entity{ text-align: center; }
  .footer__legal-links{ justify-content: center; }
}

/* ============================================================
   Responsive — narrow desktop (nav still visible, just tighter)
   ============================================================ */
@media (max-width: 1800px){
  /* The mirror technique that centres the nav (see .header__left above)
     forces both outer grid columns to match .header__actions' width, so
     total header content demand is roughly FIXED regardless of viewport —
     it only fits once the container itself is wide enough to absorb
     that. Below ~1800px it stops fitting with the full-size phone/logo/
     CTA, so this tier compresses those (icon-only phone, smaller logo/
     CTA) to keep real desktop nav usable across common 1366-1536px
     laptops instead of dropping straight to the hamburger — but with
     that room freed up, the nav gap itself can stay generous (confirmed
     up to 32px still fits even at the narrow end of this tier). */
  .header__inner{ gap: 14px; }
  .main-nav{ gap: clamp(12px, 1vw, 20px); }
  .main-nav a{ font-size: 14px; }
  .header__actions{ gap: 10px; }
  .call-us__text{ display: none; }
  .call-us__icon{ margin-right: 0; }
  .logo__image{ height: 64px; }
  .lang-switch{ gap: 3px; padding-right: 8px; }
}

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media (max-width: 1400px){
  .call-us__text{ display: none; }
  .call-us__icon{ margin-right: 0; }
  .header__actions-mirror{ display: none; }

  /* .main-nav has no content left to centre against once it becomes
     the off-canvas panel below, so the nav-centring grid (see the
     .header__left comment near the top of this file) is dead weight
     here — switch to a plain 2-item row so the header doesn't waste
     a gap on the now-empty middle column. */
  .header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .nav-toggle{ display: flex; width: 42px; height: 42px; }
  .header__actions{ margin-right: -6px; }

  /* Full-screen mobile nav overlay. Starts directly BELOW the sticky
     .site-header (top/height are pinned to --header-h) rather than
     covering the whole viewport and relying on z-index to keep the
     header visually on top — that meant the panel's own edge swept
     across the header/logo during the slide-in transform, causing a
     brief flicker. Geometric separation means the panel's box can
     never occupy the same pixels as the header at any animation
     frame, so no stacking order trick is needed for the header to
     "stay above" it. The header (logo + lang-switch + this same
     hamburger, which animates into an X) is reused as the panel's own
     header row instead of duplicating that markup inside it. */
  .main-nav{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100vw;
    height: calc(100dvh - var(--header-h));
    background: var(--white);
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px var(--pad-inline) 28px;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.35s;
  }
  .main-nav.is-open{
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }

  .main-nav a{
    padding: 16px 0;
    width: 100%;
    font-size: 17px;
    border-bottom: 1px solid var(--grey-light);
  }
  .main-nav a::after{ display: none; }

  /* Services becomes a tap-to-expand accordion inline in the mobile
     nav panel — no hover, no floating card, just an indented list
     that pushes the rest of the menu down. */
  .main-nav .nav-item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--grey-light);
  }
  .main-nav .nav-item__link{
    flex: 1 1 auto;
    border-bottom: none;
  }
  .main-nav .nav-item__toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.2s var(--ease), color 0.2s var(--ease);
  }
  .main-nav .nav-item__toggle[aria-expanded="true"]{
    transform: rotate(180deg);
    color: var(--red);
  }

  .main-nav .services-mega{
    flex: 1 1 100%;
    order: 3;
    position: static;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: max-height 0.25s var(--ease);
    max-height: 0;
    overflow: hidden;
    z-index: auto;
  }
  .main-nav .services-mega::before{ display: none; }
  .main-nav .services-mega.is-open{
    max-height: 640px;
    padding-bottom: 12px;
  }
  .main-nav .services-mega__heading{ display: none; }
  .main-nav .services-mega__grid{
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .main-nav .services-mega__item{
    padding: 12px 4px 12px 12px;
    border-bottom: none;
    width: auto;
  }
  .main-nav .services-mega__arrow{ display: none; }
  .main-nav .services-mega__viewall{ margin: 8px 0 0 12px; }

  /* Phone + CTA, pinned toward the foot of the full-screen menu. */
  .main-nav__mobile-extra{
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 24px;
  }
  .main-nav a.main-nav__mobile-phone{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    width: 100%;
    /* .main-nav a{border-bottom:1px solid grey} (mobile list-divider
       rule) otherwise wins on specificity — this pill has no border
       of its own, so just cancel the inherited grey divider. */
    border-bottom: none;
  }
  .main-nav a.main-nav__mobile-cta{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    /* .main-nav a{color:var(--black)} otherwise wins on specificity
       (tag+class beats .btn--primary's single class) and the label
       would render in black text on the button's black background. */
    color: var(--white);
    border-bottom: none;
  }
}

/* Locks page scroll behind the full-screen mobile nav while it's
   open — toggled by script.js alongside .main-nav's own .is-open. */
body.mobile-nav-open{ overflow: hidden; }

@media (max-width: 900px){
  .hero__subtext{ max-width: 100%; }
  .logo__image{ height: 64px; }
}

/* Below ~700px, the full-text "Get A Free Quote" button shrinks into
   a compact black chip instead of disappearing — it now stays visible
   in the closed header bar (between the language switcher and the
   hamburger) without needing the menu opened first. */
@media (max-width: 700px){
  .header__actions{ gap: 10px; }
  .header__actions .header__cta{
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .header__actions .header__cta .btn__arrow{ display: none; }
  .lang-switch{ gap: 3px; padding-right: 8px; }
}

@media (max-width: 560px){
  .btn--form span{ display: inline; }
}

/* Tightest phones (~320-400px): trim the header's own side inset and
   shrink the logo/CTA/lang-switch a little further so the compact CTA
   and the hamburger still sit with clean, non-overlapping spacing. */
@media (max-width: 400px){
  .site-header .header__inner.container{ padding-inline: 16px; }
  .logo__image{ height: 48px; }
  .header__actions{ gap: 5px; margin-right: 0; }
  .header__actions .header__cta{ padding: 6px 7px; font-size: 8.5px; }
  .nav-toggle{ width: 38px; height: 38px; }
  .lang-switch{ gap: 2px; padding-right: 4px; }
}

/* Header overflow fixes. The `.header__phone-cta{display:none}` rule in
   the ≤1400px block above never applied — the later `.btn--phone`
   rule (same specificity) re-shows it — so the phone number kept
   pushing the CTA and hamburger past the right edge:
   - ≤600px: logo + lang-switch + phone + CTA + hamburger needed 472-561px.
     The phone link is hidden here (it's still in the mobile menu panel,
     .main-nav__mobile-phone), which is all it takes to fit.
   - 1401-1499px (full desktop nav): the CTA ran 35-71px off-screen. The
     ≤1800px tier's own comment intends an icon-only phone; the number
     markup never honoured it. Icon-only here, just where it overflows. */
@media (max-width: 600px){
  .header__actions .header__phone-cta{ display: none; }
}
@media (min-width: 1401px) and (max-width: 1499px){
  .header__actions .header__phone-cta{ gap: 0; }
  .header__phone-cta .btn--phone__divider,
  .header__phone-cta .btn--phone__number{ display: none; }
}


/* ============================================================
   Ukrainian-only typography (html[lang="uk"], set by i18n.js).
   The English layout is tuned around its own copy lengths; these
   rules only absorb the longer Ukrainian strings. English never
   matches any selector below.
   ============================================================ */

/* Hero. The desktop rhythm above (padding-top formula, van top) is
   built on a TWO-line headline. The Ukrainian headline ran to three
   lines once the font hit its 3.2rem cap (≥1680px) and the subtext to
   three lines at 34.375rem, pushing Trustpilot below the fold. Capping
   the headline at 3rem keeps it on two lines at every desktop width
   (same formulas, same cap substituted), and a wider subtext column
   keeps the paragraph on two lines, like English. */
@media (min-width: 901px){
  html[lang="uk"] .hero__headline{ font-size: clamp(1.95rem, 3.05vw, 3rem); }
  html[lang="uk"] .hero{ padding-top: clamp(0px, calc(100vh - 774px - 2.16 * clamp(1.95rem, 3.05vw, 3rem)), 32px); }
  html[lang="uk"] .hero__van{ top: calc(370.2px + 1.08 * clamp(1.95rem, 3.05vw, 3rem)); }
  html[lang="uk"] .hero__subtext{ max-width: 40rem; }
}

/* Laptop heights (1366×768, 1440×800, 1536×864): tighten the vertical
   rhythm of the left column only — gaps and the hero form's field
   padding — so the Trustpilot strip lands inside the first viewport.
   Type sizes are unchanged. 774px in the padding formula drops by the
   height saved here (~93px) so the same "≥16px above the fold" rule
   still decides how much top breathing room is left. */
@media (min-width: 901px) and (max-height: 880px){
  html[lang="uk"] .hero{ padding-top: clamp(0px, calc(100vh - 681px - 2.16 * clamp(1.95rem, 3.05vw, 3rem)), 32px); }
  html[lang="uk"] .hero__subtext{ margin-top: 16px; line-height: 1.5; }
  html[lang="uk"] .hero .trust__inner{ margin-top: 14px; }
  html[lang="uk"] .quote{ padding-top: 6px; }
  html[lang="uk"] #heroQuoteForm{ min-height: 360px; }
  html[lang="uk"] #heroQuoteForm .quote-form__step-label{ margin: 0 14px 6px; }
  html[lang="uk"] #heroQuoteForm [data-hq-step="1"] .quote-form__field{ padding-block: 12px; }
  html[lang="uk"] #heroQuoteForm .quote-form__step > .btn{ margin-top: 14px; }
  html[lang="uk"] .quote .trustpilot-strip{ margin-top: 10px; }
}

/* Header (1500-1639px): the Ukrainian nav labels are ~50px wider than
   English, so from 1500px — where the icon-only phone rule above stops —
   the CTA ran up to 28px past the right edge. Same icon-only phone
   treatment, extended for Ukrainian only until the full number fits. */
@media (min-width: 1500px) and (max-width: 1639px){
  html[lang="uk"] .header__actions .header__phone-cta{ gap: 0; }
  html[lang="uk"] .header__phone-cta .btn--phone__divider,
  html[lang="uk"] .header__phone-cta .btn--phone__number{ display: none; }
}

/* Mid-page CTA strip: the three nowrap columns fit English, but the
   Ukrainian sentence and "ОТРИМАТИ БЕЗКОШТОВНУ ОЦІНКУ" link ran into each
   other and past the viewport (page-level sideways scroll at 1024/768).
   Let the middle sentence wrap inside its own grid column, and on the
   narrow tablet band let the link wrap too. */
@media (min-width: 701px){
  html[lang="uk"] .mid-cta__text{ white-space: normal; text-wrap: balance; }
}
@media (min-width: 701px) and (max-width: 1100px){
  html[lang="uk"] .mid-cta__inner{ column-gap: 32px; }
  html[lang="uk"] .mid-cta__link{ white-space: normal; max-width: 210px; }
}
@media (min-width: 701px) and (max-width: 860px){
  html[lang="uk"] .mid-cta__inner{ column-gap: 24px; grid-template-columns: max-content minmax(0, 1fr) max-content; }
  html[lang="uk"] .mid-cta__col--heading{ gap: 14px; }
  html[lang="uk"] .mid-cta__link{ max-width: 180px; gap: 10px; }
}