/* ==========================================================================
   AM Local Garage Door & Gate Service — styles.css
   Design tokens: see DESIGN.md
   Mobile-first. Breakpoints: 640 / 900 / 1200
   ========================================================================== */

:root {
  --canvas: #050d1c;
  --canvas-deep: #03080f;
  --surface: #0b1930;
  --surface-2: #102642;
  --cyan: #2bd2e6;
  --cyan-strong: #00b8d9;
  --cyan-deep: #0e7c9e;
  --red: #d92b2b;
  --red-deep: #a31f1f;
  --gold: #f5b301;
  --ink: #ffffff;
  --body: #b6c2d4;
  --body-strong: #dbe4ef;
  --muted: #7b8aa0;
  --hairline: #1b2f4d;
  --hairline-cyan: rgba(43, 210, 230, 0.25);
  --on-cyan: #03121c;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --container: 1180px;
  --header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background-color: var(--canvas);
  /* Layered signature background: glows + hexagon grid + navy gradient */
  background-image:
    radial-gradient(ellipse 80% 45% at 50% -5%, rgba(43, 210, 230, 0.13), transparent 60%),
    radial-gradient(ellipse 60% 35% at 100% 45%, rgba(30, 100, 200, 0.08), transparent 65%),
    radial-gradient(ellipse 60% 35% at 0% 80%, rgba(43, 210, 230, 0.06), transparent 65%),
    url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232bd2e6' fill-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #071527 0%, #050d1c 45%, #081a33 100%);
  background-size: auto, auto, auto, 56px 98px, auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* the rotated marquee strip must never create horizontal scroll */
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }

/* ---------- Type helpers ---------- */
.preheading {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ffffff 30%, #bfccdc 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}

.section__title .hl,
.hero__title .hl {
  background: linear-gradient(180deg, #7ce9f5 15%, #17aed3 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section rhythm scales with the viewport — phones got airy gaps between bands
   at the old flat 60px, so the base is tighter and only widens on bigger screens. */
.section__lead { max-width: 620px; margin: 0 auto 22px; color: var(--body); }
.section { padding: 42px 0; }
@media (min-width: 640px) {
  .section__lead { margin-bottom: 30px; }
  .section { padding: 56px 0; }
}
@media (min-width: 900px) {
  .section__lead { margin-bottom: 36px; }
  .section { padding: 72px 0; }
}

/* Inline emphasis — key facts sit brighter and get a cyan underline that
   draws itself when the phrase scrolls into view (JS adds .is-lit).
   Uses a background layer, not ::after, so it survives line wrapping. */
.mark {
  color: var(--ink);
  font-weight: 600;
  padding-bottom: 3px;
  background-image: linear-gradient(90deg, var(--cyan), #1c69d4);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.85s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.85s ease;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.mark.is-lit {
  background-size: 100% 2px;
  text-shadow: 0 0 22px rgba(43, 210, 230, 0.3);
}

/* ---------- Icons ---------- */
.ico {
  width: 1.15em; height: 1.15em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ico--yelp { fill: #FF1A1A; stroke: none; } /* official Yelp burst is fill-based */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 8px;
  min-height: 48px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn--lg { padding: 15px 28px; font-size: 16px; }

.btn--primary {
  background: linear-gradient(180deg, #35dcef 0%, #0e9fc4 100%);
  color: var(--on-cyan);
  box-shadow: 0 6px 22px rgba(43, 210, 230, 0.32);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(43, 210, 230, 0.45); }

.btn--outline {
  background: rgba(43, 210, 230, 0.06);
  border: 1.5px solid rgba(43, 210, 230, 0.55);
  color: var(--cyan);
}
.btn--outline:hover { background: rgba(43, 210, 230, 0.14); border-color: var(--cyan); transform: translateY(-2px); }

.btn--emergency {
  background: linear-gradient(180deg, #e33d3d 0%, #b82020 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(217, 43, 43, 0.35);
  margin-top: 18px;
}
.btn--emergency:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(217, 43, 43, 0.5); }

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- Skip link (first focusable element) ---------- */
.skip-link {
  position: fixed; top: 8px; left: 8px;
  z-index: 300;
  transform: translateY(-160%);
  background: var(--cyan); color: var(--on-cyan);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 12px 20px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease;
}
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Motion toggle ----------
   WCAG 2.2.2 (Pause, Stop, Hide) — the marquees, carousel autoplay and drifting
   background all start on their own and never end, so users need one control that
   stops them. It sits in the top bar, above any moving content, and its state is
   remembered in localStorage. `prefers-reduced-motion` is honoured separately. */
.topbar__motion {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--body-strong);
  font-size: 12.5px;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  min-height: 28px;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.topbar__motion:hover { border-color: var(--hairline-cyan); color: var(--cyan); background: rgba(43, 210, 230, 0.08); }
.topbar__motion .ico { width: 13px; height: 13px; fill: currentColor; stroke: none; }
/* paused state shows a play glyph instead */
.topbar__motion[aria-pressed="true"] { border-color: var(--hairline-cyan); color: var(--cyan); }
.topbar__motion[aria-pressed="true"] .ico { clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Everything that loops forever freezes when motion is switched off */
html[data-motion="off"] .marquee__track,
html[data-motion="off"] .reviews__track,
html[data-motion="off"] .fx-blob,
html[data-motion="off"] .hero__title .hl,
html[data-motion="off"] .glow-beam::before { animation-play-state: paused; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--canvas-deep);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--body-strong);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  padding-top: 8px; padding-bottom: 8px;
  flex-wrap: wrap;
}
.topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar__item .ico { color: var(--cyan); width: 1em; height: 1em; }
.topbar .stars { color: var(--gold); letter-spacing: 2px; font-size: 12px; }
.topbar__short { display: none; }
@media (max-width: 639px) {
  /* One compact line on phones — never two rows */
  .topbar__item--mid { display: none; }
  .topbar__inner { flex-wrap: nowrap; gap: 10px; justify-content: space-between; }
  .topbar { font-size: 12px; }
  .topbar__item { gap: 5px; }
  .topbar .stars { letter-spacing: 0; font-size: 12px; }
  .stars__rest { display: none; }
  .topbar__long { display: none; }
  .topbar__short { display: inline; }
  /* icon-only toggle on phones so the row still fits one line */
  .topbar__motion-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .topbar__motion { padding: 4px 8px; }
}
@media (max-width: 400px) {
  /* At 360px the motion button was overflowing the container by ~7px */
  .topbar { font-size: 11px; }
  .topbar__inner { gap: 8px; }
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4, 10, 22, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.header__inner {
  display: flex; align-items: center; gap: 20px;
  height: var(--header-h);
}
.header__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.header__logo { height: 52px; width: auto; }
.header__brandtext { display: flex; flex-direction: column; line-height: 1.1; }
.header__brandname {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: 1px; color: #e8eef5; text-transform: uppercase;
}
.header__brandname em { font-style: normal; color: var(--cyan); }
.header__brandsub {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; gap: 26px; }
.nav__link {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--body-strong);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav__link:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

.header__call { white-space: nowrap; }

.header__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 10px;
  border: 1.5px solid var(--hairline-cyan); border-radius: 8px;
}
.header__burger span {
  display: block; height: 2px; width: 100%;
  background: var(--cyan); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.is-open span:nth-child(2) { opacity: 0; }
.header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1099px) {
  .nav {
    position: fixed;
    top: calc(var(--header-h)); left: 0; right: 0;
    z-index: 99;
    flex-direction: column; gap: 0;
    background: #040a16;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
    padding: 8px 20px 16px;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__link { padding: 13px 4px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
  .nav__link:last-child { border-bottom: none; }
  .header__burger { display: flex; }
}
@media (max-width: 767px) {
  /* Icon-only call button keeps tap-to-call one touch away at all times */
  .header__inner { gap: 10px; }
  .header__call { width: 46px; min-height: 46px; padding: 0; flex-shrink: 0; }
  .header__call .ico { width: 21px; height: 21px; }
  .header__call-num { display: none; }
  .header__logo { height: 44px; }
  .header__brand { gap: 9px; margin-right: auto; }
  .header__brandname { font-size: 17px; }
  .header__brandsub { font-size: 9px; letter-spacing: 1.6px; }
}
@media (max-width: 419px) {
  .header__brandsub { display: none; }
}

/* ---------- Hero ----------
   Split layout at 960px+: copy left, layered photo composition right.
   Below that it stacks and the copy re-centers, with the photo after the CTAs
   so tap-to-call always comes first on a phone. */
.hero { padding: 64px 0 56px; overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center;
}
.hero__head, .hero__body { text-align: center; max-width: 780px; margin: 0 auto; width: 100%; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.1rem, 5.6vw, 3.4rem);
  line-height: 1.1; letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ffffff 30%, #bfccdc 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 14px;
}
.hero__text { max-width: 520px; margin: 0 auto 28px; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.hero__trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--body-strong);
}
.hero__trust .ico { color: var(--cyan); }

/* --- Layered photo composition ---
   Three tricks keep the photos from reading as pasted-on rectangles:
   1. a cyan halo bleeds out behind the frame, so it emerges from the background
   2. each shot carries a navy gradient wash, pulling the photo into the palette
   3. a second, rotated shot overlaps the first — depth instead of a flat cut-out */
.hero__media {
  position: relative;
  max-width: 560px; width: 100%;
  margin: 0 auto 46px;
}
.hero__media::before {
  content: "";
  position: absolute; inset: -14% -10% -6%;
  background: radial-gradient(ellipse at 55% 45%, rgba(43, 210, 230, 0.22), transparent 68%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}
.hero__shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-cyan);
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__shot::after {
  /* navy wash — grades the photo into the page palette */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 13, 28, 0) 52%, rgba(5, 13, 28, 0.5) 100%),
    linear-gradient(255deg, rgba(5, 13, 28, 0) 55%, rgba(6, 18, 38, 0.42) 100%);
  pointer-events: none;
}
.hero__shot--main {
  z-index: 1;
  aspect-ratio: 3 / 2;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(43, 210, 230, 0.08);
}
.hero__shot--sub {
  /* kept low and small on purpose — it must not cover the truck's branding */
  position: absolute;
  left: -26px; bottom: -50px;
  width: 36%;
  aspect-ratio: 4 / 3;
  z-index: 2;
  transform: rotate(-3.5deg);
  border-color: rgba(43, 210, 230, 0.4);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65);
}
.hero__badge {
  position: absolute; right: -8px; bottom: -18px;
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #10253f, #0a1830);
  border: 1px solid var(--hairline-cyan);
  border-radius: var(--radius);
  padding: 12px 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.hero__badge-num {
  font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1;
  background: linear-gradient(180deg, #7ce9f5, #17aed3);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__badge-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--body-strong);
  line-height: 1.35;
}

@media (min-width: 960px) {
  /* Split hero: copy stacked in the left column, photo composition spanning right */
  .hero { padding: 84px 0 78px; }
  .hero__inner {
    grid-template-columns: 1.02fr 0.98fr;
    grid-template-areas: "head media" "body media";
    gap: 18px 52px;
  }
  .hero__head { grid-area: head; align-self: end; }
  .hero__body { grid-area: body; align-self: start; }
  .hero__media { grid-area: media; align-self: center; }
  .hero__head, .hero__body { text-align: left; max-width: none; margin: 0; }
  .hero__text { margin-left: 0; margin-right: 0; }
  .hero__cta, .hero__trust { justify-content: flex-start; }
}
@media (max-width: 959px) {
  /* Phones: headline → garage door photo → CTAs. The sticky bar keeps Call Now
     on screen the whole time, so the photo can come before the buttons. */
  .hero { padding: 40px 0 34px; }
  .hero__cta {
    flex-direction: column; align-items: stretch;
    max-width: 400px; margin-left: auto; margin-right: auto;
  }
  .hero__trust { gap: 8px 20px; }
  .hero__inner { gap: 26px; }
  .hero__media { max-width: 470px; margin-bottom: 44px; }
  .hero__title { font-size: clamp(1.95rem, 7.4vw, 2.8rem); }
}
@media (max-width: 639px) {
  .hero__badge { right: 4px; bottom: -16px; padding: 9px 14px; gap: 8px; }
  .hero__badge-num { font-size: 30px; }
  .hero__badge-label { font-size: 10.5px; letter-spacing: 1.2px; }
  .hero__shot--sub { left: -10px; bottom: -32px; width: 42%; }
}

/* ---------- Trust badges ---------- */
.badges {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(5, 15, 32, 0.55);
}
.badges__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  padding-top: 22px; padding-bottom: 22px;
}
.badge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--body-strong);
  line-height: 1.35;
}
.badge__ico {
  width: 34px; height: 34px;
  stroke: var(--cyan); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
@media (min-width: 640px) { .badges__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .badges__grid { grid-template-columns: repeat(6, 1fr); } .badge { justify-content: center; } }
@media (max-width: 639px) {
  .badges__grid { gap: 2px 8px; padding-top: 16px; padding-bottom: 16px; }
  .badge { font-size: 11.5px; letter-spacing: 1px; gap: 10px; padding: 9px 2px; }
  .badge__ico { width: 28px; height: 28px; }
}

/* ---------- Offers ----------
   One `.offer-chip` component, used twice on purpose: a slim band right under the
   trust badges (so the discount lands early) and again inside the contact panel at
   the point of decision. The full-size coupon cards stay in Why Us. */
.offers {
  border-top: 1px solid var(--hairline-cyan);
  border-bottom: 1px solid var(--hairline-cyan);
  background:
    radial-gradient(ellipse 62% 120% at 50% 0%, rgba(43, 210, 230, 0.11), transparent 72%),
    rgba(43, 210, 230, 0.045);
}
.offers__inner { text-align: center; padding-top: 34px; padding-bottom: 30px; }
.offers__lead {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 20px;
}
.offers__lead svg { width: 13px; height: 13px; fill: var(--cyan); stroke: none; opacity: 0.8; }
.offers__row {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
}
.offers__note { font-size: 13px; color: var(--muted); margin-top: 18px; }

/* The discount badge — deliberately large, it is a headline offer, not fine print */
.offer-badge {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline-cyan);
  background: linear-gradient(180deg, rgba(16, 38, 66, 0.72), rgba(9, 22, 42, 0.92));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), 0 0 30px rgba(43, 210, 230, 0.09);
  text-align: left;
}
.offer-badge > svg {
  width: 30px; height: 30px; flex-shrink: 0;
  stroke: var(--cyan); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.offer-badge__text { display: flex; flex-direction: column; line-height: 1.05; }
.offer-badge__amount {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #7ce9f5 10%, #17aed3 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.offer-badge__amount sup { font-size: 0.5em; top: -0.55em; }
.offer-badge__amount em {
  font-style: normal; font-size: 0.62em; letter-spacing: 2px;
}
.offer-badge__label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--body-strong);
  margin-top: 5px;
}
.offer-badge--red { border-color: rgba(217, 43, 43, 0.45); }
.offer-badge--red > svg { stroke: #f26666; fill: rgba(242, 102, 102, 0.15); }
.offer-badge--red .offer-badge__amount {
  background: linear-gradient(180deg, #ff8a8a 10%, #d92b2b 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact__offers {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
  margin: 0 auto 26px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.contact__offers-note {
  width: 100%;
  font-size: 12.5px; color: var(--muted);
}

@media (max-width: 719px) {
  /* Full-width stacked badges read louder on a phone than two cramped ones */
  .offers__inner { padding-top: 24px; padding-bottom: 20px; }
  .offers__row, .contact__offers { flex-direction: column; align-items: stretch; }
  .offers__row { max-width: 400px; margin: 0 auto; gap: 12px; }
  /* Full-width badges centre their contents — left-aligning them leaves a dead
     gap on the right once the card stretches across the screen. */
  .offer-badge { justify-content: center; padding: 13px 20px; gap: 14px; }
  .offers__lead { font-size: 12.5px; letter-spacing: 2.2px; margin-bottom: 14px; }
  .offers__note { margin-top: 13px; }
}
@media (max-width: 400px) {
  .offer-badge__amount { font-size: 30px; }
  .offer-badge > svg { width: 26px; height: 26px; }
}

/* ---------- Services ---------- */
.services__grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(16, 38, 66, 0.55), rgba(9, 22, 42, 0.9));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-cyan);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(43, 210, 230, 0.08);
}
.card__ico {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43, 210, 230, 0.09);
  border: 1px solid var(--hairline-cyan);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.card__ico svg {
  width: 28px; height: 28px;
  stroke: var(--cyan); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.card__ico--red { background: rgba(217, 43, 43, 0.1); border-color: rgba(217, 43, 43, 0.35); }
.card__ico--red svg { stroke: #f26666; }
.card__title {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink);
  margin-bottom: 10px;
}
.card__text { font-size: 15px; }
.card__flag {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--on-cyan);
  background: linear-gradient(180deg, #35dcef, #0e9fc4);
  border-radius: 999px; padding: 4px 12px;
}
.card--emergency {
  border-color: rgba(217, 43, 43, 0.4);
  background: linear-gradient(180deg, rgba(64, 16, 20, 0.5), rgba(24, 8, 12, 0.85));
}
.card--emergency:hover { border-color: rgba(217, 43, 43, 0.7); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(217, 43, 43, 0.12); }

@media (min-width: 640px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .card--emergency { grid-column: span 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 24px; }
  .card--emergency .card__ico { margin-bottom: 0; grid-row: span 2; }
  .card--emergency .card__title { margin-bottom: 2px; }
  .card--emergency .card__text { grid-column: 2; }
  .card--emergency .btn--emergency { margin-top: 0; grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Marquee strip ---------- */
.marquee {
  overflow: hidden;
  /* End stop is #2196d6, not a darker blue: the navy marquee text needs 4.5:1
     against every point of this gradient (#1287c9 measured 4.28 — a WCAG fail). */
  background: linear-gradient(90deg, #0fb4d3 0%, #2bd2e6 45%, #2196d6 100%);
  transform: rotate(-1.2deg) scale(1.02);
  margin: 26px 0;
  box-shadow: 0 10px 40px rgba(43, 210, 230, 0.25);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee__group {
  display: flex; align-items: center;
  padding: 13px 0;
}
.marquee__group span {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: #04202b;
  white-space: nowrap;
  padding: 0 18px;
}
.marquee__group i {
  font-style: normal; color: rgba(4, 32, 43, 0.55); font-size: 13px;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 639px) {
  .marquee { margin: 18px 0; }
  .marquee__group { padding: 11px 0; }
  .marquee__group span { font-size: 14px; letter-spacing: 1.5px; padding: 0 13px; }
}

/* ---------- Before / After ---------- */
.ba__slider {
  position: relative;
  max-width: 760px; margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-cyan);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(43, 210, 230, 0.1);
  touch-action: pan-y;
  --pos: 50%;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba__img { width: 100%; display: block; pointer-events: none; }
.ba__before {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 3px; margin-left: -1.5px;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(43, 210, 230, 0.8);
}
.ba__handle-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #35dcef, #0e9fc4);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.ba__handle-btn svg {
  width: 22px; height: 22px;
  stroke: var(--on-cyan); fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.ba__label {
  position: absolute; top: 14px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(3, 10, 20, 0.72);
  backdrop-filter: blur(4px);
}
.ba__label--before { left: 14px; color: #e8eef5; }
.ba__label--after { right: 14px; color: var(--cyan); }

/* Card-stack gallery (vanilla port of the CardStack fan carousel)
   Geometry note: cards rotate around their BOTTOM-CENTER, so a fanned card's
   outer bottom corner dips below the baseline (≈ halfWidth × sin(angle)).
   --stack-floor reserves that clearance so nothing is ever clipped. */
.stack {
  outline: none;
  --card-w: min(480px, 44vw);
  --card-h: calc(var(--card-w) * 0.667);
  --stack-floor: 66px;
  --stack-head: 46px;
}
.stack:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: var(--radius); }
.stack__stage {
  position: relative;
  height: calc(var(--card-h) + var(--stack-floor) + var(--stack-head));
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  /* soft edges so fanned cards dissolve instead of hard-cutting */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.stack__stage.is-dragging { cursor: grabbing; }
.stack__card {
  position: absolute;
  left: 50%; bottom: var(--stack-floor);
  width: var(--card-w);
  aspect-ratio: 3 / 2;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-cyan);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, box-shadow 0.3s ease;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.stack__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.stack__card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(2, 8, 16, 0.88));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.stack__card figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: #fff;
}
.stack__card figcaption span { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 767px) {
  /* Phones: bigger hero card, neighbours peek in from both sides and fade at the edges */
  .stack {
    --card-w: min(400px, 82vw);
    --stack-floor: 44px;
    --stack-head: 22px;
  }
  .stack__stage {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .stack__card { border-radius: var(--radius); }
  .stack__card figcaption { padding: 36px 14px 13px; }
  .stack__card figcaption strong { font-size: 15px; letter-spacing: 0.6px; }
  .stack__card figcaption span { font-size: 12.5px; }
  .stack__nav { gap: 14px; margin-top: 16px; }
  .stack__dots { gap: 8px; }
  .stack__dots button { width: 8px; height: 8px; }
  /* keep the dots small but comfortably tappable */
  .stack__dots button::after {
    content: ""; position: absolute; inset: -15px -4px;
  }
  .stack__dots button.is-on { transform: scale(1.4); }
}
.stack__card.is-active { box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 42px rgba(43, 210, 230, 0.14); }
.stack__card.is-active figcaption { opacity: 1; }
.stack__card:not(.is-active) { cursor: pointer; }

.stack__nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 18px;
}
.stack__dots { display: flex; align-items: center; gap: 9px; }
.stack__dots button {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(43, 210, 230, 0.25);
  cursor: pointer; padding: 0;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.stack__dots button:hover { background: rgba(43, 210, 230, 0.5); }
.stack__dots button.is-on {
  background: var(--cyan);
  transform: scale(1.25);
  box-shadow: 0 0 9px rgba(43, 210, 230, 0.6);
}
.stack__arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-cyan);
  border-radius: 50%;
  background: rgba(43, 210, 230, 0.06);
  color: var(--cyan);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.stack__arrow:hover { background: rgba(43, 210, 230, 0.16); transform: translateY(-1px); }
.stack__arrow svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Why us + coupons ---------- */
.why__inner { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.why__text { margin-bottom: 26px; max-width: 560px; }
.why__list { display: flex; flex-direction: column; gap: 18px; }
.why__list li { display: flex; gap: 14px; align-items: flex-start; }
.why__list .ico { color: var(--cyan); width: 26px; height: 26px; margin-top: 2px; }
.why__list strong { display: block; color: var(--ink); font-size: 16px; }
.why__list span { font-size: 14px; color: var(--muted); }

/* Headline numbers — count up when they scroll into view (JS) */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.stat { position: relative; text-align: center; padding: 0 6px; }
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline) 25%, var(--hairline) 75%, transparent);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.7rem);
  font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #7ce9f5 10%, #17aed3 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__label {
  display: block; margin-top: 9px;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); line-height: 1.45;
}

.why__coupons { display: grid; gap: 18px; max-width: 420px; width: 100%; margin: 0 auto; }
.coupon {
  position: relative;
  text-align: center;
  border: 2px dashed rgba(43, 210, 230, 0.55);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 0 50%, var(--canvas) 12px, transparent 12.5px),
    radial-gradient(circle at 100% 50%, var(--canvas) 12px, transparent 12.5px),
    linear-gradient(180deg, rgba(16, 38, 66, 0.6), rgba(9, 22, 42, 0.9));
  padding: 26px 20px 20px;
}
.coupon__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: 1; color: var(--ink);
}
.coupon__value sup { font-size: 26px; }
.coupon__value span {
  font-size: 30px; letter-spacing: 2px;
  background: linear-gradient(180deg, #7ce9f5, #17aed3);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.coupon--red { border-color: rgba(217, 43, 43, 0.55); }
.coupon--red .coupon__value span {
  background: linear-gradient(180deg, #f26666, #c22525);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.coupon__label {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--body-strong);
  margin-top: 6px;
}
.coupon__note {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px; letter-spacing: 0.4px; color: var(--muted);
}
@media (min-width: 900px) {
  .why__inner { grid-template-columns: 1.1fr 0.9fr; gap: 60px; }
}

/* ---------- Reviews ---------- */
.reviews__score {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 36px;
}
.glogo { width: 30px; height: 30px; }
.glogo--sm { width: 18px; height: 18px; margin-left: auto; opacity: 0.95; }
.reviews__score-text { color: var(--body-strong); font-size: 15px; }
.reviews__score-text strong { color: var(--ink); font-size: 19px; }

.reviews__marquee {
  overflow: hidden;
  padding: 6px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews__track { display: flex; width: max-content; }
.reviews__track.is-ready { animation: marquee-scroll 55s linear infinite; }
.reviews__marquee:hover .reviews__track,
.reviews__track:focus-within { animation-play-state: paused; }
.reviews__group { display: flex; }

.review {
  width: 330px;
  margin: 0 10px;
  background: linear-gradient(180deg, rgba(16, 38, 66, 0.55), rgba(9, 22, 42, 0.9));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px;
  flex-shrink: 0;
}
.review__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.review__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--av, var(--cyan-deep));
  color: #fff; font-weight: 700; font-size: 17px;
}
.review__head strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.25; }
.review__head span { font-size: 12.5px; color: var(--muted); }
.review__stars { color: var(--gold); letter-spacing: 3px; font-size: 14px; margin-bottom: 8px; }
.review p { font-size: 14px; line-height: 1.6; }
@media (max-width: 480px) { .review { width: 285px; } }

.reviews__yelp { margin-top: 30px; }

/* ---------- Service areas ---------- */
.areas__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
  max-width: 900px; margin: 0 auto;
}
.areas__grid li {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; color: var(--body-strong);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(16, 38, 66, 0.3);
  border: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.areas__grid li:hover { border-color: var(--hairline-cyan); }
.areas__grid li::before {
  content: "";
  width: 17px; height: 17px; flex-shrink: 0;
  background-color: var(--cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 640px) { .areas__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .areas__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Contact (call/text CTA panel — no form) ---------- */
.contact {
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(43, 210, 230, 0.07), transparent 65%);
}
.contact__panel {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(180deg, rgba(16, 38, 66, 0.6), rgba(9, 22, 42, 0.92));
  border: 1px solid var(--hairline-cyan);
  border-radius: var(--radius-lg);
  padding: 38px 20px 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 60px rgba(43, 210, 230, 0.08);
}
.contact__text { max-width: 430px; margin: 0 auto 26px; }
.contact__actions {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 400px; margin: 0 auto 28px;
}
.btn--xl { padding: 17px 30px; font-size: 17px; width: 100%; }
.contact__email {
  font-size: 14.5px; color: var(--muted);
  margin-bottom: 22px;
}
.contact__email a {
  color: var(--cyan);
  text-decoration: underline; text-underline-offset: 3px;
  word-break: break-word;
}
.contact__email a:hover { color: #7ce9f5; }

.contact__points {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; margin: 0 auto 26px; width: fit-content;
}
.contact__points li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--body-strong); }
.contact__points .ico { color: var(--cyan); }
.contact__social {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 14px; color: var(--muted);
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
}
.contact__social a {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-cyan); border-radius: 50%;
  transition: background 0.18s ease, transform 0.18s ease;
}
.contact__social a:hover { background: rgba(43, 210, 230, 0.12); transform: translateY(-2px); }
.contact__social svg { width: 19px; height: 19px; fill: var(--cyan); stroke: none; }
@media (min-width: 640px) {
  .contact__panel { padding: 52px 48px 40px; }
  .contact__actions { flex-direction: row; justify-content: center; max-width: none; }
  .btn--xl { width: auto; }
  .contact__points {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    width: auto; gap: 12px 28px;
  }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--hairline);
  background: var(--canvas-deep);
  position: relative;
}
.footer::before {
  /* signature stripe: cyan → blue → red, a nod to the logo */
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan) 0%, #1c69d4 55%, var(--red) 100%);
}
.footer__grid {
  display: grid; grid-template-columns: 1fr;
  gap: 36px;
  padding-top: 52px; padding-bottom: 40px;
}
.footer__brand p { font-size: 14px; max-width: 300px; margin: 16px 0 18px; }
.footer__logo { height: 92px; width: auto; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 50%;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.footer__social a:hover { border-color: var(--cyan); background: rgba(43, 210, 230, 0.1); }
.footer__social svg { width: 17px; height: 17px; fill: var(--body-strong); stroke: none; }

.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h4 {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
  margin-bottom: 6px;
}
.footer__col a, .footer__line {
  font-size: 14px; color: var(--body);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.18s ease;
}
.footer__col a:hover { color: var(--cyan); }
.footer__col .ico { color: var(--cyan); width: 1em; height: 1em; }
.footer__phone { font-weight: 600; color: var(--cyan) !important; font-size: 16px !important; }
.footer__email { font-size: 13.5px !important; word-break: break-word; }
.footer__seal {
  margin-top: 10px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 9px 12px; text-align: center; max-width: 280px;
}
.footer__bottom {
  border-top: 1px solid var(--hairline);
  padding: 18px 0 calc(18px + 72px); /* room for sticky bar on mobile */
  font-size: 13px; color: var(--muted);
  text-align: center;
}
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.3fr 0.8fr 1fr 1.1fr; gap: 40px; }
  .footer__bottom { padding-bottom: 18px; }
}
@media (max-width: 899px) {
  /* Centered footer reads cleaner on phones */
  .footer__grid { text-align: center; padding-top: 42px; gap: 32px; }
  .footer__logo { height: 76px; margin: 0 auto; }
  .footer__brand p { margin-left: auto; margin-right: auto; }
  .footer__social { justify-content: center; }
  .footer__col { align-items: center; }
  .footer__seal { margin-left: auto; margin-right: auto; }
}

/* ---------- Legal pages (privacy / terms / accessibility) ---------- */
.legal { padding: 52px 0 68px; }
.legal__inner { max-width: 780px; }
.legal__title {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1; letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ffffff 30%, #bfccdc 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.legal__title .hl {
  background: linear-gradient(180deg, #7ce9f5 15%, #17aed3 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.legal__meta {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 34px;
}
.legal__callout {
  background: linear-gradient(180deg, rgba(16, 38, 66, 0.6), rgba(9, 22, 42, 0.9));
  border: 1px solid var(--hairline-cyan);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  margin-bottom: 38px;
}
.legal__callout h2 { margin-top: 0; }
.legal__callout p:last-child { margin-bottom: 0; }
.legal__body h2 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--ink);
  margin: 36px 0 12px;
}
.legal__body p, .legal__body li { color: var(--body); }
.legal__body p { margin-bottom: 14px; }
.legal__body strong, .legal__body em { color: var(--body-strong); }
.legal__body ul { margin: 0 0 18px; padding-left: 4px; }
.legal__body li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.legal__body li::before {
  content: "";
  position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
}
.legal__body a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal__body a:hover { color: #7ce9f5; }
.legal__back { margin-top: 44px; }

/* Legal links in the footer bottom row */
.footer__legal {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 20px;
  margin-top: 10px;
}
.footer__legal a {
  font-size: 13px; color: var(--muted);
  transition: color 0.18s ease;
}
.footer__legal a:hover { color: var(--cyan); }
.footer__legal a[aria-current="page"] { color: var(--body-strong); }

/* ---------- Sticky mobile bar ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex;
  border-top: 1px solid rgba(43, 210, 230, 0.35);
  background: rgba(3, 8, 15, 0.97);
  backdrop-filter: blur(8px);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.stickybar__btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  min-height: 48px; border-radius: 8px;
}
.stickybar__btn--call {
  background: linear-gradient(180deg, #35dcef, #0e9fc4);
  color: var(--on-cyan);
  box-shadow: 0 4px 18px rgba(43, 210, 230, 0.35);
}
.stickybar__btn--text {
  border: 1.5px solid rgba(43, 210, 230, 0.55);
  color: var(--cyan);
}
@media (min-width: 900px) { .stickybar { display: none; } }

/* ==========================================================================
   FX layer — premium-landing-effects (adapted to vanilla, brand colors only)
   ========================================================================== */

/* --- Scroll progress bar (tricolor, echoes the footer stripe) --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 210; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--cyan) 0%, #1c69d4 55%, var(--red) 100%);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
  box-shadow: 0 0 8px rgba(43, 210, 230, 0.5);
}

/* --- Drifting mesh-gradient blobs (cyan/blue only — brand, not AI-purple) --- */
.fx-blobs {
  position: absolute; inset: -10% -5%;
  pointer-events: none; z-index: 0;
  will-change: transform;
}
.fx-blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: fx-drift 19s ease-in-out infinite;
  will-change: transform;
}
.fx-blob--1 {
  width: 520px; height: 520px; top: -12%; left: -10%;
  background: radial-gradient(circle at center, rgba(43, 210, 230, 0.16), transparent 60%);
}
.fx-blob--2 {
  width: 460px; height: 460px; top: 22%; right: -12%;
  background: radial-gradient(circle at center, rgba(28, 105, 212, 0.15), transparent 60%);
  animation-delay: -6s;
}
.fx-blob--3 {
  width: 380px; height: 380px; bottom: -18%; left: 30%;
  background: radial-gradient(circle at center, rgba(43, 210, 230, 0.1), transparent 60%);
  animation-delay: -12s;
}
.fx-blobs--alt .fx-blob--1 { left: auto; right: -8%; top: 5%; }
.fx-blobs--alt .fx-blob--2 { right: auto; left: -10%; top: 45%; }
@keyframes fx-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(42px, -55px) scale(1.08); }
  66%      { transform: translate(-32px, 30px) scale(0.94); }
}
.hero { position: relative; }
.hero__inner { position: relative; z-index: 1; }
.ba { position: relative; overflow: hidden; }
.ba > .container { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .fx-blob { filter: blur(46px); }
  .fx-blob--1 { width: 340px; height: 340px; }
  .fx-blob--2 { width: 300px; height: 300px; }
  .fx-blob--3 { display: none; }
}

/* --- Animated gradient on the hero keyword (seamless from→via→from loop) --- */
.hero__title .hl {
  background-image: linear-gradient(90deg, #7ce9f5 0%, #17aed3 40%, #4dd6ff 70%, #7ce9f5 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-text-pan 7s linear infinite;
}
@keyframes fx-text-pan {
  to { background-position: -220% 0; }
}

/* --- Rotating border beam on the contact panel --- */
@property --fx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.glow-beam { position: relative; }
.glow-beam::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--fx-angle),
    transparent 0%, transparent 62%,
    rgba(43, 210, 230, 0.95) 78%,
    rgba(28, 105, 212, 0.6) 88%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: fx-spin 6s linear infinite;
  pointer-events: none;
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* --- Cursor spotlight on service cards (desktop / fine pointers only) --- */
@media (hover: hover) and (pointer: fine) {
  .card::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
                rgba(43, 210, 230, 0.08), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .services__grid:hover .card::after { opacity: 1; }
}

/* --- Film-grain noise overlay --- */
.fx-noise {
  position: fixed; inset: 0;
  z-index: 220; pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Header gains depth once scrolling --- */
.header { transition: box-shadow 0.25s ease, background 0.25s ease; }
.header.is-scrolled {
  background: rgba(3, 8, 17, 0.97);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal--delay { transition-delay: 0.12s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  .reviews__track.is-ready { animation: none; }
  .marquee { transform: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}