/* ==========================================================================
   SMART MOBILE ZONE — styles.css
   Dark-mode-first, electric-blue neon identity.

   CONTENTS
   01. Design tokens
   02. Reset & base
   03. Typography & shared primitives
   04. Layout utilities
   05. Buttons
   06. Header & navigation
   07. Mobile overlay menu
   08. Hero
   09. Stats strip
   10. Services
   11. Brands marquee
   12. Why us
   13. How it works
   14. Quote form
   15. Reviews
   16. Contact
   17. Footer
   18. Back to top & page curtain
   19. 404 page
   20. Motion keyframes
   21. Responsive breakpoints
   22. Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Primary — Neon Blue */
  --zone-blue: #2f6bff;   /* core brand: buttons, links, key highlights */
  --electric:  #4c8dff;   /* hover states, gradients, glowing accents */
  --ice-glow:  #cfe0ff;   /* neon glow tint, subtle backgrounds on dark */

  /* Neutrals */
  --ink:       #060709;   /* page background */
  --carbon:    #0b0d11;   /* raised surfaces */
  --graphite:  #1c1f27;   /* cards, borders */
  --steel:     #a2abbf;   /* secondary text — lightened from #8A93A6 to clear 4.5:1 on --ink */
  --cloud:     #f4f6fb;   /* primary text on dark */

  /* Derived surfaces */
  --surface-card: #0e1116;
  --surface-raised: #12151c;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Type scale (fluid) */
  --font-display: "Archivo Black", "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero: clamp(2.35rem, 1.35rem + 4.4vw, 5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.3vw, 3rem);
  --fs-h3: clamp(1.05rem, 0.95rem + 0.42vw, 1.3rem);
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  --fs-small: 0.9rem;
  --fs-eyebrow: clamp(0.66rem, 0.62rem + 0.16vw, 0.76rem);

  /* Spacing */
  --space-section: clamp(4rem, 2.4rem + 6.5vw, 8rem);
  --gutter: clamp(1.15rem, 0.7rem + 2vw, 2.5rem);
  --shell: 1240px;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-slow: 620ms;

  /* Elevation / glow */
  --glow-soft: 0 0 32px rgba(47, 107, 255, 0.28);
  --glow-strong: 0 0 44px rgba(47, 107, 255, 0.45);

  /* Review stars — re-pointed to a deeper amber in light sections. */
  --star: #ffc542;

  /* Header */
  --header-h: 72px;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Offset anchor targets so the sticky header never covers a heading. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--cloud);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img { height: auto; display: block; border: 0; }

a { color: var(--electric); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ice-glow); }

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

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* Visible focus rings on every interactive element — WCAG 2.1 AA. */
:focus-visible {
  outline: 3px solid var(--zone-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader-only utility. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.35rem;
  background: var(--zone-blue);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ==========================================================================
   03. TYPOGRAPHY & SHARED PRIMITIVES
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--electric);
  font-weight: 500;
  margin: 0 0 0.85rem;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cloud);
  margin: 0 0 1rem;
}

.section__lede {
  color: var(--steel);
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.02rem;
}

.section__head {
  text-align: center;
  margin-bottom: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
}

.section__head .eyebrow { display: block; }

.text-glow {
  color: var(--cloud);
  text-shadow:
    0 0 18px rgba(76, 141, 255, 0.55),
    0 0 46px rgba(47, 107, 255, 0.3);
}

.accent { color: var(--zone-blue); }

/* ==========================================================================
   04. LAYOUT UTILITIES
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section--alt { background: linear-gradient(180deg, var(--ink) 0%, var(--carbon) 50%, var(--ink) 100%); }

.section--edge { border-top: 1px solid var(--hairline); }

/* --------------------------------------------------------------------------
   LIGHT SECTIONS
   Rather than re-styling every component, this re-points the design tokens
   inside the section. Anything built on --cloud / --steel / --carbon /
   --graphite adapts on its own, so the light and dark variants can never
   drift apart.

   Blues are darkened here: --zone-blue #2F6BFF only reaches 4.50:1 against
   white, which is exactly on the AA limit. #1D4FD8 gives 6.6:1 for both link
   text and white-on-blue buttons.
   -------------------------------------------------------------------------- */

.section--light {
  --ink: #f4f7fb;             /* section background          */
  --carbon: #ffffff;          /* input fills                 */
  --graphite: #e3e9f2;        /* borders                     */
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --cloud: #0d1420;           /* primary text  — 18.4:1      */
  --steel: #565f70;           /* secondary text — 6.4:1      */
  --zone-blue: #1d4fd8;
  --electric: #1d4fd8;
  --ice-glow: #1746c0;
  --hairline: rgba(13, 20, 32, 0.09);
  --hairline-strong: rgba(13, 20, 32, 0.16);
  --star: #c77700;            /* 3.5:1 on white              */

  /* Neon glows read as grime on white — use real elevation instead. */
  --glow-soft: 0 1px 2px rgba(13, 20, 32, 0.06), 0 4px 16px rgba(13, 20, 32, 0.07);
  --glow-strong: 0 2px 6px rgba(13, 20, 32, 0.1), 0 10px 28px rgba(29, 79, 216, 0.22);

  background: var(--ink);
  color: var(--cloud);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* Consecutive light sections read as one band — no seam between them. */
.section--light + .section--light { border-top: 0; }

/* Cards on light get a soft lift rather than a bright border. */
.section--light .aside-card,
.section--light .form,
.section--light .review,
.section--light .reviews__summary,
.section--light .reviews__fallback {
  box-shadow: 0 1px 2px rgba(13, 20, 32, 0.05), 0 4px 14px rgba(13, 20, 32, 0.05);
}

/* The select chevron is a data-URI, so its colour is baked in. */
.section--light .field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23565f70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.section--light .field__input:focus,
.section--light .field__select:focus,
.section--light .field__textarea:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(29, 79, 216, 0.18);
}

.section--light .field__input[aria-invalid="true"],
.section--light .field__select[aria-invalid="true"],
.section--light .field__textarea[aria-invalid="true"] { border-color: #c02626; }

.section--light .field__error { color: #b31d1d; }

.section--light .form__result--success {
  background: #eef4ff;
  border-color: #b9cdfb;
  color: var(--cloud);
}

.section--light .form__result--error {
  background: #fdeeee;
  border-color: #f0c0c0;
  color: #7a1a1a;
}
.section--light .form__result--error a { color: #8f1d1d; }

.section--light .radio:has(input:checked) { background: #eef4ff; }
.section--light .radio__dot { border-color: #9aa4b6; }

.section--light .btn--ghost {
  background: #fff;
  border-color: var(--graphite);
  color: var(--cloud);
  backdrop-filter: none;
}
.section--light .btn--ghost:hover { background: #eef4ff; border-color: var(--zone-blue); }

.section--light .section__title { text-shadow: none; }

.grid { display: grid; gap: clamp(0.9rem, 0.5rem + 1.4vw, 1.5rem); }

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.btn {
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;             /* ≥44px touch target */
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn svg { flex: none; }

/* Cursor-tracking radial glow, driven by --glow-x / --glow-y from script.js. */
.btn--primary {
  background: var(--zone-blue);
  color: #fff;
  box-shadow: var(--glow-soft);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle 120px at var(--glow-x) var(--glow-y),
    rgba(255, 255, 255, 0.38),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.btn--primary:hover { background: var(--electric); box-shadow: var(--glow-strong); color: #fff; }
.btn--primary:hover::before { opacity: 1; }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hairline-strong);
  color: var(--cloud);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--zone-blue);
  background: rgba(47, 107, 255, 0.12);
  color: var(--cloud);
}

.btn--quiet {
  background: transparent;
  color: var(--steel);
  padding-inline: 1rem;
}
.btn--quiet:hover { color: var(--cloud); }

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

.btn--lg { min-height: 54px; padding: 1rem 2rem; font-size: 1.03rem; }

/* Touch devices: no hover lift, clear pressed state instead. */
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn--primary:hover::before { opacity: 0; }
  .btn:active { background-color: var(--electric); }
}

/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    backdrop-filter var(--dur-med) var(--ease-out);
}

/* Scrolled state — blurred, bordered bar. Toggled by script.js. */
.header.is-stuck {
  background: rgba(6, 7, 9, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hairline);
}

.header__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* Clear space equal to the mark's cap-height on all sides. */
  padding: 6px;
  margin-inline-start: -6px;
  text-decoration: none;
  border-radius: var(--r-sm);
}

/* Horizontal lockup is 904x214 (4.23:1). Dimensions are set here and mirrored
   as width/height attributes in the markup so the header never shifts. */
.header__logo { width: 152px; height: 36px; }

@media (min-width: 480px) { .header__logo { width: 186px; height: 44px; } }

.header__nav { margin-inline-start: auto; }

.nav__list { display: flex; align-items: center; gap: 0.15rem; }

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.7rem;
  color: var(--steel);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.3rem;
  height: 1.5px;
  background: var(--zone-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--cloud); }
.nav__link:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 0.55rem; flex: none; }

.header__cta { display: none; }

/* Icon buttons (call, menu toggle). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cloud);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { border-color: var(--zone-blue); background: rgba(47, 107, 255, 0.14); }

/* Scroll-progress bar along the header's bottom edge. */
.header__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--zone-blue), var(--electric), var(--ice-glow));
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.7);
  will-change: transform;
}

/* Hamburger icon lines. */
.burger__box { display: block; width: 20px; height: 14px; position: relative; }
.burger__line {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 6px; }
.burger__line:nth-child(3) { top: 12px; }

.menu-toggle[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   07. MOBILE OVERLAY MENU
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  background: rgba(6, 7, 9, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s linear var(--dur-med);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.mobile-menu__list { display: flex; flex-direction: column; gap: 0.1rem; }

.mobile-menu__link {
  display: block;
  padding: 0.95rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--cloud);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  /* Staggered reveal: --i is set per item in the markup. */
  opacity: 0;
  transform: translateY(14px);
}

.mobile-menu.is-open .mobile-menu__link {
  animation: menu-item-in var(--dur-med) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 90ms);
}

.mobile-menu__link:hover { color: var(--electric); }

.mobile-menu__footer {
  margin-top: auto;
  padding-top: 1.75rem;
  display: grid;
  gap: 0.7rem;
}

.mobile-menu__phones { display: grid; gap: 0.4rem; }
.mobile-menu__phones a {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--steel);
  text-decoration: none;
}
.mobile-menu__phones a:hover { color: var(--electric); }

/* Lock background scroll while the overlay is open. */
body.menu-open { overflow: hidden; }

/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 7vw, 5.5rem));
  padding-bottom: clamp(3rem, 1.6rem + 5vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* --- Layer 1: ambient neon bloom, slow drifting keyframe loop --- */
.hero__glow {
  position: absolute;
  inset: -25% -10% auto;
  height: 900px;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(48% 42% at 50% 32%, rgba(47, 107, 255, 0.42), transparent 68%),
    radial-gradient(38% 34% at 78% 12%, rgba(76, 141, 255, 0.22), transparent 70%),
    radial-gradient(42% 38% at 18% 22%, rgba(47, 107, 255, 0.16), transparent 72%);
  filter: blur(6px);
  animation: bloom-drift 26s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

/* --- Layer 2: circuit grid, parallax-shifted by cursor (desktop only) --- */
.hero__grid {
  position: absolute;
  inset: -80px;
  z-index: -2;
  pointer-events: none;
  /* --px / --py are updated by script.js on pointer: fine devices only. */
  transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 14px), 0);
  background-image:
    linear-gradient(rgba(76, 141, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 141, 255, 0.075) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 58% at 50% 34%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 58% at 50% 34%, #000 20%, transparent 78%);
}

.hero__dots {
  position: absolute;
  inset: -80px;
  z-index: -2;
  pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -26px), 0);
  background-image: radial-gradient(rgba(76, 141, 255, 0.4) 1px, transparent 1px);
  background-size: 62px 62px;
  background-position: 31px 31px;
  mask-image: radial-gradient(56% 46% at 50% 32%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(56% 46% at 50% 32%, #000 5%, transparent 72%);
}

.hero__inner { position: relative; text-align: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(76, 141, 255, 0.35);
  border-radius: var(--r-pill);
  background: rgba(47, 107, 255, 0.1);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice-glow);
}

.pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 10px var(--electric);
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 1.4rem auto 0;
  max-width: 15ch;
}

/* Word-by-word reveal. Each word is wrapped in .word > .word__inner.
   No overflow clipping here — it would crop the headline's neon glow into
   visible rectangles. The rise is done with transform + opacity instead. */
.word { display: inline-block; }

.word__inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  animation: word-rise 0.72s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}

/* Glow eases to full strength once the words have landed. */
.hero__title .word--glow .word__inner {
  animation-name: word-rise, glow-in;
  animation-duration: 0.72s, 1.1s;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms), calc(var(--i, 0) * 60ms + 520ms);
  animation-fill-mode: forwards, forwards;
}

.hero__lede {
  margin: 1.5rem auto 0;
  max-width: 62ch;
  color: var(--steel);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.13rem);
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 0.62s forwards;
}

.hero__actions {
  margin: 2.15rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 0.76s forwards;
}

.hero__chips {
  margin: 2.25rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out) 0.9s forwards;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--steel);
  font-size: 0.83rem;
  font-weight: 500;
}
.chip svg { color: var(--zone-blue); }

/* ==========================================================================
   09. STATS STRIP
   ========================================================================== */

.stats {
  margin-top: clamp(2.75rem, 1.5rem + 4vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stat {
  padding: clamp(1.15rem, 0.8rem + 1.2vw, 1.75rem) 1rem;
  background: var(--carbon);
  text-align: center;
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1;
  color: var(--cloud);
  letter-spacing: -0.02em;
  text-shadow: 0 0 26px rgba(47, 107, 255, 0.4);
}

.stat__label {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ==========================================================================
   10. SERVICES
   ========================================================================== */

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

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 1rem + 1vw, 1.8rem);
  background: var(--surface-card);
  border: 1px solid var(--graphite);
  border-radius: var(--r-md);
  overflow: hidden;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out);
}

/* Conic-gradient border sweep on hover (desktop only, see media query below). */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--sweep, 0deg),
    transparent 0deg,
    var(--zone-blue) 40deg,
    var(--ice-glow) 80deg,
    transparent 130deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(47, 107, 255, 0.12);
  border: 1px solid rgba(47, 107, 255, 0.28);
  color: var(--electric);
  margin-bottom: 1.05rem;
  flex: none;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

.card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cloud);
  margin-bottom: 0.4rem;
}

.card__text {
  color: var(--steel);
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--electric);
  text-decoration: none;
  padding: 0.35rem 0;
}
.card__link .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.card__link:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   11. BRANDS MARQUEE
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 0.4rem;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 0.85rem;
  animation: marquee-scroll 42s linear infinite;
  will-change: transform;
}

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

/* Second row drifts the other way for depth. */
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 52s; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--graphite);
  border-radius: var(--r-pill);
  background: var(--surface-card);
  color: var(--cloud);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.marquee__item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--zone-blue);
  box-shadow: 0 0 8px var(--zone-blue);
  flex: none;
}

.brand-list {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.7rem;
}
.brand-list li {
  color: var(--steel);
  font-size: 0.9rem;
}
.brand-list li::after { content: " ·"; color: var(--graphite); }
.brand-list li:last-child::after { content: ""; }

.brands__note {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--steel);
  font-size: 0.95rem;
}

/* ==========================================================================
   12. WHY US
   ========================================================================== */

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

.tile {
  display: flex;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--surface-card);
  border: 1px solid var(--graphite);
  border-radius: var(--r-md);
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.tile:hover { border-color: rgba(47, 107, 255, 0.5); transform: translateY(-3px); }

.tile__icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(47, 107, 255, 0.12);
  color: var(--electric);
}

.tile__title { font-size: 1rem; font-weight: 700; color: var(--cloud); margin-bottom: 0.2rem; }
.tile__text { font-size: 0.9rem; color: var(--steel); line-height: 1.55; }

/* ==========================================================================
   13. HOW IT WORKS
   ========================================================================== */

.steps { position: relative; }

/* SVG connector line that draws itself in via stroke-dashoffset. */
.steps__line {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Stroke paint is set per-line in the markup (userSpaceOnUse gradients). */
.steps__line path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.5s var(--ease-out);
}

.steps.is-drawn .steps__line path { stroke-dashoffset: 0; }

/* An <svg> is a replaced element: with left/right (or top/bottom) but an auto
   size, its intrinsic viewBox size wins and it never stretches. Both axes are
   therefore given explicit sizes.
   Mobile: vertical line down the left, behind the numbered badges. */
.steps__line--v {
  left: 27px;
  top: 40px;
  width: 2px;
  height: calc(100% - 80px);
}
.steps__line--h { display: none; }

.steps__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.step { display: flex; gap: 1.1rem; }

.step__badge {
  flex: none;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--carbon);
  border: 1px solid rgba(47, 107, 255, 0.45);
  color: var(--electric);
  font-family: var(--font-display);
  font-size: 1.25rem;
  box-shadow: 0 0 0 6px var(--ink), var(--glow-soft);
}

.step__title {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 700;
  color: var(--cloud);
  margin-bottom: 0.35rem;
}
.step__text { color: var(--steel); font-size: 0.97rem; }

.steps__cta { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3rem); text-align: center; }

/* ==========================================================================
   14. QUOTE FORM
   ========================================================================== */

.quote__layout { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.quote__aside { display: grid; gap: 1rem; align-content: start; }

.aside-card {
  padding: 1.35rem;
  background: var(--surface-card);
  border: 1px solid var(--graphite);
  border-radius: var(--r-md);
}
.aside-card__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 0.6rem;
}
.aside-card p { color: var(--steel); font-size: 0.93rem; }
.aside-card a { color: var(--cloud); text-decoration: none; font-weight: 600; }
.aside-card a:hover { color: var(--electric); text-decoration: underline; }

.form {
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  background: var(--surface-raised);
  border: 1px solid var(--graphite);
  border-radius: var(--r-lg);
}

.form__grid { display: grid; gap: 1.15rem; }

.form__row { display: grid; gap: 1.15rem; }

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

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 56px;
  padding: 1.45rem 1rem 0.5rem;
  background: var(--carbon);
  border: 1px solid var(--graphite);
  border-radius: var(--r-sm);
  color: var(--cloud);
  font-size: 1rem;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  appearance: none;
}

.field__textarea { min-height: 128px; resize: vertical; line-height: 1.55; }

.field__select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23a2abbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.field__select:disabled { opacity: 0.55; cursor: not-allowed; }

.field__label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--steel);
  font-size: 1rem;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Float the label when the control is focused or holds a value. */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
.field__textarea:focus + .field__label,
.field__textarea:not(:placeholder-shown) + .field__label,
.field__select:focus + .field__label,
.field__select.has-value + .field__label {
  transform: translateY(-0.7rem) scale(0.75);
  color: var(--electric);
}

/* Selects have no :placeholder-shown, so JS adds .has-value. */
.field__select:not(.has-value) + .field__label { transform: translateY(-0.7rem) scale(0.75); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--zone-blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.25), 0 0 22px rgba(47, 107, 255, 0.22);
  background: #0d1016;
}

.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] { border-color: #ff6b6b; }

.field__error {
  display: block;
  min-height: 0;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: #ff8f8f;
}
.field__error:empty { margin-top: 0; }

.field__hint { margin-top: 0.35rem; font-size: 0.82rem; color: var(--steel); }

/* --- Radio group --- */
.radio-group { border: 0; padding: 0; margin: 0; }
.radio-group__legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--steel);
}
.radio-group__options { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--graphite);
  border-radius: var(--r-pill);
  background: var(--carbon);
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio__dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--steel);
  flex: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.radio input:checked ~ .radio__dot {
  border-color: var(--zone-blue);
  border-width: 5px;
  box-shadow: 0 0 12px rgba(47, 107, 255, 0.6);
}
.radio:has(input:checked) { border-color: var(--zone-blue); background: rgba(47, 107, 255, 0.1); }
.radio:has(input:focus-visible) { outline: 3px solid var(--zone-blue); outline-offset: 3px; }

/* --- Honeypot: hidden from humans, reachable by bots --- */
.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* --- Submit button spinner state --- */
.form__submit { position: relative; }

.spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  display: none;
}
.form__submit.is-busy .spinner { display: block; }
.form__submit.is-busy .form__submit-label { opacity: 0.75; }
.form__submit[disabled] { cursor: progress; }

/* --- Result panels --- */
.form__result {
  margin-top: 1.15rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  font-size: 0.95rem;
}
.form__result[hidden] { display: none; }

.form__result--success {
  background: rgba(47, 107, 255, 0.1);
  border: 1px solid rgba(47, 107, 255, 0.4);
  color: var(--cloud);
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.form__result--error {
  background: rgba(255, 107, 107, 0.09);
  border: 1px solid rgba(255, 107, 107, 0.42);
  color: #ffd9d9;
}
.form__result--error a { color: #fff; font-weight: 600; }

/* Checkmark stroke-draw. */
.check { flex: none; }
.check__circle,
.check__tick {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: draw-stroke 0.6s var(--ease-out) forwards;
}
.check__tick { stroke-dasharray: 36; stroke-dashoffset: 36; animation-delay: 0.34s; }

/* ==========================================================================
   15. REVIEWS
   ========================================================================== */

/* --- Aggregate summary bar: Google mark · score · stars · count · CTA --- */
.reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.15rem;
  margin-bottom: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) clamp(1.15rem, 0.9rem + 1vw, 1.75rem);
  border: 1px solid var(--graphite);
  border-radius: var(--r-lg);
  background: var(--surface-card);
}
.reviews__summary[hidden] { display: none; }

.reviews__glogo { flex: none; width: 38px; height: 38px; }

.reviews__figures { display: flex; flex-direction: column; gap: 0.15rem; }

.reviews__scoreline { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.reviews__score {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem);
  line-height: 1;
  color: var(--cloud);
}

.stars {
  color: var(--star);
  letter-spacing: 0.1em;
  font-size: 1.02rem;
  white-space: nowrap;
}

.reviews__count { color: var(--steel); font-size: 0.9rem; }

/* Pushes the CTA to the far end on wide screens, full width when stacked. */
.reviews__cta { margin-inline-start: auto; }

@media (max-width: 599px) {
  .reviews__cta { margin-inline-start: 0; width: 100%; }
  .reviews__cta .btn { width: 100%; }
}

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

.review {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.35rem;
  background: var(--surface-card);
  border: 1px solid var(--graphite);
  border-radius: var(--r-md);
}

.review__head { display: flex; align-items: center; gap: 0.75rem; }

/* Avatar tint is picked per-author in script.js via --avatar-bg, so the same
   person always gets the same colour. Falls back to brand blue. */
.review__avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--avatar-bg, #2f6bff);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
}
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }

.review__author { font-weight: 600; color: var(--cloud); font-size: 0.96rem; }
.review__meta { color: var(--steel); font-size: 0.82rem; }

.review__text {
  color: var(--steel);
  font-size: 0.93rem;
  line-height: 1.65;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.review__toggle {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  color: var(--electric);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.review__toggle:hover { color: var(--ice-glow); }

/* Fallback card shown when the Places API is unconfigured or fails. */
.reviews__fallback {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.35rem);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--graphite);
  border-radius: var(--r-lg);
}
.reviews__fallback p { color: var(--steel); margin-bottom: 1.35rem; }

/* ==========================================================================
   15b. FAQ ACCORDION
   ========================================================================== */

.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 0.75rem; }

.faq__item {
  background: var(--surface-card);
  border: 1px solid var(--graphite);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease-out);
}
.faq__item:has(.faq__trigger[aria-expanded="true"]) { border-color: rgba(47, 107, 255, 0.5); }

.faq__trigger {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--cloud);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}
.faq__trigger:hover { color: var(--electric); }

.faq__chevron {
  flex: none;
  color: var(--electric);
  transition: transform var(--dur-med) var(--ease-out);
}
.faq__trigger[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }

/* Modern height animation: 0fr -> 1fr on a grid row. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}
.faq__panel.is-open { grid-template-rows: 1fr; }

.faq__panel > div { overflow: hidden; }

.faq__panel p {
  padding: 0 1.25rem 1.25rem;
  color: var(--steel);
  font-size: 0.95rem;
}

/* No-JS: panels are open so every answer stays readable and crawlable. */
.no-js .faq__panel { grid-template-rows: 1fr; }
.no-js .faq__chevron { display: none; }

/* ==========================================================================
   16. CONTACT
   ========================================================================== */

.contact__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-bottom: 2rem; }

.info-card {
  padding: 1.4rem;
  background: var(--surface-card);
  border: 1px solid var(--graphite);
  border-radius: var(--r-md);
}

.info-card__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(47, 107, 255, 0.12);
  color: var(--electric);
  margin-bottom: 0.9rem;
}

.info-card__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 0.6rem;
}

.info-card address { font-style: normal; color: var(--steel); font-size: 0.93rem; line-height: 1.6; }

.info-card__links { display: grid; gap: 0.3rem; }
.info-card__links a {
  color: var(--cloud);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.97rem;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  padding: 0.2rem 0;
  display: inline-block;
  max-width: 100%;
  /* The email address is a single long token — let it break rather than
     spill out of the card. */
  overflow-wrap: anywhere;
}

.info-card__links a[href^="mailto:"] { font-size: 0.85rem; letter-spacing: 0; }
.info-card__links a:hover { color: var(--electric); text-decoration: underline; }

.hours { display: grid; gap: 0.25rem; font-size: 0.9rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; color: var(--steel); }
.hours dt { color: var(--cloud); font-weight: 500; }
.hours dd { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; }
.hours .is-late dd { color: var(--electric); }

.map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--graphite);
  /* Reserve space to prevent CLS while the iframe loads. */
  aspect-ratio: 16 / 10;
  background: var(--carbon);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.35) contrast(1.05); }

.map__cta { margin-top: 1.25rem; text-align: center; }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footer {
  border-top: 1px solid var(--hairline);
  background: var(--carbon);
  padding-block: clamp(2.5rem, 1.6rem + 3vw, 4rem) 1.75rem;
}

.footer__top {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--hairline);
}

/* Wide single-line lockup is 1236x120 (10.3:1). */
.footer__logo { width: 236px; height: 23px; }

.footer__brand p {
  margin-top: 1rem;
  color: var(--steel);
  font-size: 0.93rem;
  max-width: 42ch;
}

.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 0.85rem;
}
.footer__col li { margin-bottom: 0.5rem; }
.footer__col a {
  color: var(--steel);
  text-decoration: none;
  font-size: 0.92rem;
  display: inline-block;
  max-width: 100%;
  /* break-word rather than anywhere: only break when the word genuinely
     cannot fit, so links don't split while there is still room. */
  overflow-wrap: break-word;
}

/* The email is one long unbreakable token. Sized down so it sits on a single
   line inside the footer column instead of hyphenating across two. */
.footer__col a[href^="mailto:"] { font-size: 0.82rem; }
.footer__col a:hover { color: var(--cloud); text-decoration: underline; }

.footer__bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  align-items: center;
  color: var(--steel);
  font-size: 0.85rem;
}

/* ==========================================================================
   18. BACK TO TOP & PAGE CURTAIN
   ========================================================================== */

.to-top {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 90;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(11, 13, 17, 0.9);
  backdrop-filter: blur(10px);
  color: var(--cloud);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s linear var(--dur-med),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.to-top:hover { border-color: var(--zone-blue); box-shadow: var(--glow-strong); }

/* Page-load curtain — CSS-only, never blocks render, removes itself. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(180deg, var(--zone-blue) 0%, var(--ink) 55%);
  transform-origin: top;
  animation: curtain-lift 460ms var(--ease-in-out) forwards;
}

/* ==========================================================================
   19. 404 PAGE
   ========================================================================== */

.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  position: relative;
  isolation: isolate;
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2rem + 14vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--cloud);
  text-shadow: 0 0 40px rgba(47, 107, 255, 0.55);
}
.error-page__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ==========================================================================
   20. MOTION KEYFRAMES
   ========================================================================== */

@keyframes bloom-drift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); opacity: 0.85; }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.07); opacity: 1; }
  100% { transform: translate3d(-1%, -1.5%, 0) scale(1.02); opacity: 0.9; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}

@keyframes word-rise {
  from { opacity: 0; transform: translateY(0.42em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glow-in {
  from { text-shadow: 0 0 0 rgba(76, 141, 255, 0); }
  to {
    text-shadow:
      0 0 18px rgba(76, 141, 255, 0.55),
      0 0 46px rgba(47, 107, 255, 0.32);
  }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes menu-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Track is duplicated in markup, so -50% is a seamless loop. */
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes draw-stroke { to { stroke-dashoffset: 0; } }

@keyframes curtain-lift {
  0%   { opacity: 1; transform: scaleY(1); }
  70%  { opacity: 0.35; }
  100% { opacity: 0; transform: scaleY(0); }
}

@keyframes sweep-rotate { to { --sweep: 360deg; } }

/* Register --sweep so the conic gradient can be animated smoothly. */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* --- Scroll reveals (shared IntersectionObserver adds .is-revealed) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* No-JS: reveal everything immediately so content is never hidden. */
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .hero__lede,
.no-js .hero__actions,
.no-js .hero__chips { opacity: 1; animation: none; }
.no-js .word__inner { transform: none; opacity: 1; animation: none; }
.no-js .curtain { display: none; }
.no-js .steps__line path { stroke-dashoffset: 0; }

/* ==========================================================================
   21. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (min-width: 480px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
  .quote__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}

@media (min-width: 1024px) {
  :root { --header-h: 80px; }

  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .header__cta { display: inline-flex; }
  .header__call,
  .menu-toggle { display: none; }

  /* Horizontal three-across steps with a drawn connector between them. */
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
  .step { flex-direction: column; text-align: center; align-items: center; gap: 1.1rem; }
  .steps__line--v { display: none; }
  .steps__line--h { display: block; left: 16.66%; width: 66.67%; top: 28px; height: 2px; }
}

@media (min-width: 1280px) {
  .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1536px) {
  :root { --shell: 1360px; }
}

/* Below 1024px the desktop nav is replaced by the overlay menu. */
@media (max-width: 1023px) {
  .header__nav { display: none; }
}

/* --- Desktop-only pointer effects --- */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-6px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    border-color: transparent;
    background: var(--surface-raised);
  }
  .card:hover::before { opacity: 1; animation: sweep-rotate 2.6s linear infinite; }
  .card:hover .card__icon { background: rgba(47, 107, 255, 0.22); color: var(--ice-glow); }
}

/* Touch devices never get the parallax layers moving. */
@media (pointer: coarse) {
  .hero__grid,
  .hero__dots { transform: none; }
}

/* ==========================================================================
   22. REDUCED MOTION & PRINT
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure animated-in content is visible rather than stuck mid-animation. */
  .word__inner { transform: none; opacity: 1; }
  .hero__lede,
  .hero__actions,
  .hero__chips { opacity: 1; }
  .mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }

  .hero__glow,
  .hero__grid,
  .hero__dots { transform: none; animation: none; }

  .marquee__track { animation: none; }
  .card:hover { transform: none; }
  .card:hover::before { animation: none; opacity: 0; }
  .tile:hover { transform: none; }
  .btn:hover { transform: none; }
  .steps__line path { stroke-dashoffset: 0; transition: none; }
  .curtain { display: none; }
  .spinner { animation: none; }
  .check__circle,
  .check__tick { stroke-dashoffset: 0; animation: none; }
}

@media print {
  .header, .mobile-menu, .to-top, .curtain, .marquee, .map { display: none; }
  body { background: #fff; color: #000; }
}