/* ============================================================
   MTO AUTO DETAILING — CORE THEME  ·  "STEEL DUOTONE"
   ------------------------------------------------------------
   Single source of truth for palette + shared primitives.
   Loaded FIRST by every page, before the page-specific sheet:
     index / gallery / services / ceramic-coating → css/style.css
     contact                                      → css/lander.css
     booking                                      → css/booking.css

   The duotone system: the page alternates between PEARL bands
   (light steel-grey, white cards) and GRAPHITE bands (deep
   gunmetal, glass cards). Sections opt in with .tone-dark or
   .tone-light — those classes REDEFINE the ink/surface/line
   tokens locally, so every component adapts automatically
   without a single duplicated dark-mode rule.

   Change a brand colour HERE and it moves everywhere.
   ============================================================ */

:root {
  /* ---- grounds ---- */
  --pearl:      #dfe3ea;   /* light band  (steel grey)         */
  --pearl-2:    #d5dae3;   /* deeper light band                */
  --white:      #ffffff;   /* card on light                    */

  --graphite:   #171c24;   /* dark band                        */
  --graphite-2: #1d232d;   /* dark band, raised                */
  --graphite-3: #232b36;   /* card on dark                     */
  --graphite-4: #2c3543;   /* card on dark, hover              */
  --obsidian:   #0f1319;   /* footer floor / deepest           */

  /* ---- brand (immutable — never re-scoped by a tone) ---- */
  --brand-blue: #007bff;
  --brand-gold: #f5a417;

  --blue:       #007bff;
  --blue-dark:  #0060cc;
  --blue-lift:  #3d9fff;   /* legible blue for dark bands      */
  /* Brand blue at 12–13px only hits 3.1:1 on the steel-grey band, under
     the 4.5:1 needed for small text. Large type (headings, prices) still
     uses --blue; anything small and blue uses --blue-ink, which clears
     4.5:1 on both the grey band and white cards. */
  --blue-ink:   #0a5ab5;
  --blue-tint:  #e7f1ff;
  --blue-glass: rgba(0, 123, 255, .12);

  --gold:       #f5a417;
  --gold-deep:  #d98a00;
  --gold-soft:  #ffc555;
  --gold-ink:   #3a2500;
  --star:       #ffb400;
  --danger:     #d93025;
  --ok:         #0f9d58;

  /* ---- semantic tokens (LIGHT default — .tone-dark flips them) ---- */
  --band:       var(--pearl);
  --surface:    var(--white);
  --surface-2:  #f7f9fc;
  --ink:        #10151d;
  --ink-soft:   #39424f;
  --muted:      #5b6472;   /* darkened for the grey band (4.5:1) */
  --line:       #dde3ec;
  --line-2:     #c9d2df;
  --field-bg:   #f4f6fa;

  /* ---- geometry ---- */
  --radius:     18px;
  --radius-sm:  12px;
  --radius-btn: 10px;
  --wrap:       1180px;

  /* ---- elevation (light) ---- */
  --shadow:     0 2px 4px rgba(16, 21, 29, .04), 0 10px 26px rgba(16, 21, 29, .07);
  --shadow-md:  0 4px 8px rgba(16, 21, 29, .05), 0 18px 44px rgba(16, 21, 29, .11);
  --shadow-lg:  0 8px 16px rgba(16, 21, 29, .07), 0 34px 80px rgba(16, 21, 29, .18);
  --glow:       var(--shadow);

  /* ---- type ---- */
  --fd: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fb: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--fd);
  --font-body: var(--fb);

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- texture: fine metal grain for the dark bands ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  /* legacy aliases kept so older selectors still resolve */
  --bg: var(--pearl);
  --bg-soft: var(--pearl-2);
  --bg-tint: var(--blue-tint);
  --navy: var(--graphite);
  --navy-2: var(--graphite-2);
  --platinum: var(--ink);
  --text: var(--ink-soft);
  --text-dim: var(--muted);
  --panel: var(--graphite);
  --card: var(--surface);
  --cyan: var(--blue);
}

/* ============================================================
   TONE SCOPES — the heart of the duotone system
   ============================================================ */
.tone-dark {
  --band:      var(--graphite);
  --surface:   var(--graphite-3);
  --surface-2: var(--graphite-4);
  --ink:       #f2f5f9;
  --ink-soft:  #b8c2cf;
  --muted:     #8a95a4;
  --line:      rgba(255, 255, 255, .09);
  --line-2:    rgba(255, 255, 255, .18);
  --field-bg:  rgba(255, 255, 255, .05);
  --blue:      var(--blue-lift);
  --blue-ink:  var(--blue-lift);
  --blue-tint: rgba(61, 159, 255, .13);
  --shadow:    0 2px 4px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .34);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, .34), 0 22px 52px rgba(0, 0, 0, .42);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, .38), 0 40px 90px rgba(0, 0, 0, .55);

  background-color: var(--graphite);
  background-image: var(--grain);
  background-blend-mode: overlay;
  color: var(--ink-soft);
}
.tone-light  { background: var(--pearl); color: var(--ink-soft); }
.tone-pearl  { background: var(--pearl-2); color: var(--ink-soft); }
.tone-white  { background: var(--white); color: var(--ink-soft); }

/* a hairline of light where a dark band meets a light one */
.tone-dark + .tone-light,
.tone-dark + .tone-pearl,
.tone-dark + .tone-white { border-top: 1px solid rgba(255, 255, 255, .06); }

/* ============================================================
   RESET / BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
*::selection { background: rgba(0, 123, 255, .22); color: inherit; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html { scroll-padding-top: 90px; }

body {
  background: var(--pearl);
  color: var(--ink-soft);
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

.container, .wrap { width: min(var(--wrap), 92%); margin-inline: auto; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display, h1, h2, h3, h4 {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  line-height: .95;
  letter-spacing: .005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.85rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.2rem; }
p  { color: var(--ink-soft); }

.accent-blue, .accent-cyan, .accent {
  color: var(--blue);
}
/* headline accent gets a subtle metallic sheen */
h1 .accent-blue, h1 .accent-cyan, h1 .accent,
h2 .accent-blue, h2 .accent-cyan, h2 .accent {
  background: linear-gradient(96deg, var(--blue) 8%, #6fc0ff 52%, var(--blue) 96%);
  background-size: 260% 100%;
  background-position: 50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* …and the sheen travels across the word once, as the heading arrives */
.reveal.visible h2 .accent-blue,
.reveal.visible h2 .accent-cyan,
.reveal.visible h2 .accent {
  animation: chrome-sweep 1.7s var(--ease) .2s both;
}
@keyframes chrome-sweep {
  from { background-position: 135% 0; }
  to   { background-position: 20% 0; }
}

/* ⚠ The hero headline (home + contact lander) is split into one
   inline-block <span class="ltr"> per letter by main.js for the entrance
   animation. An inline-block child breaks the parent's
   background-clip:text — the gradient stops filling those glyphs, and
   because the text itself is painted transparent the accent words go
   INVISIBLE ("Showroom Quality at Your Doorstep" reads as "Showroom at
   Your"). So the split headline gets a solid brand colour instead.
   Do not add background-clip:text to anything inside .hero h1. */
.hero h1 .accent-blue,
.hero h1 .accent-cyan,
.hero h1 .accent {
  background: none;
  -webkit-text-fill-color: var(--blue);
  color: var(--blue);
  animation: none;
}

.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 56ch; }
.dim  { color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fb);
  font-style: normal;
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-ink));
}
.eyebrow .stars { color: var(--star); letter-spacing: 1px; font-size: .86rem; }

/* discount treatment */
.was {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--muted);
  font-weight: 400;
  margin-right: 6px;
}
.save-tag {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--gold-ink);
  font-family: var(--fb);
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 8px;
  box-shadow: 0 3px 10px rgba(245, 164, 23, .34);
}
.save-inline { color: var(--gold-deep); font-weight: 700; font-size: .85em; }
.tone-dark .save-inline { color: var(--gold-soft); }

.offer-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, #fff6e5, #ffeccb);
  border: 1px solid rgba(245, 164, 23, .55);
  color: #7a5200;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 17px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(245, 164, 23, .2);
}
.offer-pill::before { content: "★"; color: var(--gold-deep); }
.tone-dark .offer-pill {
  background: rgba(245, 164, 23, .12);
  border-color: rgba(245, 164, 23, .45);
  color: var(--gold-soft);
  box-shadow: none;
}
.tone-dark .offer-pill::before { color: var(--gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--radius-btn);
  font-family: var(--fb);
  font-weight: 700;
  font-size: .93rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* light sweep that crosses the button on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .65s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::after { transform: translateX(120%); }

.btn-primary {
  background: linear-gradient(180deg, #1a89ff, var(--brand-blue));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 10px 26px rgba(0, 123, 255, .34);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #0d80ff, var(--blue-dark));
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 16px 38px rgba(0, 123, 255, .44);
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 10px 26px rgba(245, 164, 23, .36);
}
.btn-gold:hover {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 16px 38px rgba(245, 164, 23, .46);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-tint);
  transform: translateY(-3px);
}
.tone-dark .btn-ghost { color: var(--ink); border-color: rgba(255, 255, 255, .26); }
.tone-dark .btn-ghost:hover { color: #fff; border-color: var(--blue-lift); background: rgba(61, 159, 255, .16); }

.btn-sm { padding: 11px 22px; font-size: .8rem; }
.btn-lg { padding: 17px 38px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:active { transform: translateY(-1px) scale(.99); }

.btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 42px;
  text-align: center;
}

/* ============================================================
   CARD PRIMITIVE  (+ cursor spotlight, driven by main.js)
   ============================================================ */
.card, .surface {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.tone-dark .card, .tone-dark .surface {
  background: linear-gradient(168deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card:hover, .surface:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}

/* spotlight: main.js writes --mx/--my as the pointer moves.
   NOTE: this lives on ::after on purpose — several components
   (.package.featured ribbon, .testimonial/.review quote mark,
   .ceramic-promo, .coat-price-card glow) already own ::before on the
   same cards, and sharing one pseudo-element merged the two rules
   (the ribbon inherited inset/opacity and blew up to full-card size).
   Never attach a component decoration to .spot::after. */
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(0, 123, 255, .09), transparent 62%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.tone-dark .spot::after {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
              rgba(93, 176, 255, .16), transparent 60%);
}
.spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ============================================================
   SCROLL PROGRESS RAIL (injected by main.js)
   ============================================================ */
.scroll-prog {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-prog span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-blue), #59b0ff 55%, var(--gold));
  box-shadow: 0 0 12px rgba(0, 123, 255, .6);
  transition: width .1s linear;
}

/* ============================================================
   TOP DEAL STRIP
   ============================================================ */
.deal-strip {
  position: relative;
  background: linear-gradient(90deg, #ffbe45 0%, var(--gold) 48%, #e08e00 100%);
  color: var(--gold-ink);
  text-align: center;
  padding: 10px 0;
  font-weight: 800;
  font-size: .83rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow: hidden;
}
.deal-strip .was { text-decoration: line-through; color: var(--gold-ink); opacity: .6; margin: 0 4px; }
.deal-strip strong { color: #000; }
.deal-strip .ds-reg { font-weight: 700; }

/* ---------- ticker ----------
   main.js wraps the strip's contents in .ds-track and duplicates the
   set exactly once, so translating the track by -50% lands on an
   identical frame and the loop is seamless. Speed is set from the
   measured width (constant px/sec), so a long strip doesn't crawl. */
.deal-strip.is-ticker { padding-inline: 0; }
.deal-strip .ds-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ds-scroll var(--ds-dur, 34s) linear infinite;
}
.deal-strip .ds-item {
  flex-shrink: 0;
  padding-right: 3.5rem;
  white-space: nowrap;
}
/* soft fade at both ends so text doesn't hard-clip at the edges */
.deal-strip.is-ticker::before,
.deal-strip.is-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 46px;
  z-index: 2;
  pointer-events: none;
}
.deal-strip.is-ticker::before { left: 0;  background: linear-gradient(90deg, #ffbe45, rgba(255, 190, 69, 0)); }
.deal-strip.is-ticker::after  { right: 0; background: linear-gradient(270deg, #e08e00, rgba(224, 142, 0, 0)); }

@keyframes ds-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* let people stop it to actually read the offer */
.deal-strip:hover .ds-track { animation-play-state: paused; }

@media (max-width: 520px) {
  .deal-strip { font-size: .76rem; padding: 9px 0; }
  .deal-strip .ds-item { padding-right: 2.5rem; }
  .deal-strip.is-ticker::before, .deal-strip.is-ticker::after { width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .deal-strip .ds-track { animation: none; }
}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
/* One slim line, never wrapping. It used to stack into three rows on
   narrow screens and swallow the top of the fold, so below 900px it
   drops out entirely — the rating already shows on the hero badge and
   the phone lives in the nav button and the sticky bar. */
.topbar {
  background: var(--obsidian);
  color: #aab4c2;
  font-size: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.topbar .container, .topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16px;
  flex-wrap: nowrap;
  padding: 6px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.topbar .container > span, .topbar .wrap > span { flex-shrink: 0; }
/* the service-area sentence is the first thing to go when space is tight */
@media (max-width: 1100px) {
  .topbar .container > span:nth-child(3),
  .topbar .wrap > span:nth-child(3),
  .topbar .container > span:nth-child(4),
  .topbar .wrap > span:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  .topbar { display: none; }
}
.topbar b { color: #fff; font-weight: 700; }
.topbar .tb-star { color: var(--star); letter-spacing: 1px; }
.topbar a { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .28); transition: border-color .2s ease, color .2s ease; }
.topbar a:hover { color: var(--blue-lift); border-color: var(--blue-lift); }
.topbar .tb-dot { opacity: .35; }

/* ============================================================
   NAV — glass rail, condenses on scroll
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 252, .82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.nav.scrolled {
  background: rgba(247, 249, 252, .94);
  box-shadow: 0 10px 34px rgba(16, 21, 29, .13);
  border-bottom-color: transparent;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  transition: padding .3s var(--ease);
}
.nav.scrolled .nav-inner { padding: 8px 0; }

.nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-brand img {
  height: 52px;
  width: auto;
  transition: height .3s var(--ease), filter .3s ease;
  filter: drop-shadow(0 3px 8px rgba(16, 21, 29, .18));
}
.nav.scrolled .nav-brand img { height: 42px; }
.nav-brand .brand-name {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-size: 1.22rem;
  line-height: 1.05;
  letter-spacing: .05em;
}

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a {
  white-space: nowrap;
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 7px 0;
  position: relative;
  transition: color .2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-blue), #6fc0ff);
  transition: width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--blue-ink); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links .mobile-only { display: none; }

.nav-phone {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--blue-tint);
  border: 1px solid rgba(0, 123, 255, .16);
  display: grid;
  place-items: center;
  transition: transform .25s var(--ease), background .25s ease, box-shadow .25s ease;
}
.nav-phone:hover {
  transform: translateY(-3px);
  background: var(--brand-blue);
  box-shadow: 0 10px 24px rgba(0, 123, 255, .4);
}
.nav-phone svg { width: 22px; height: 22px; fill: var(--brand-blue); transition: fill .2s ease; }
.nav-phone:hover svg { fill: #fff; }
.nav-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 10px 11px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.nav-toggle:hover { border-color: var(--blue); }
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform .3s var(--ease), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field { margin-bottom: 13px; }
.field label {
  display: block;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field label .opt { font-weight: 500; letter-spacing: 0; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 1rem;
  padding: 14px 15px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa4b2; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 123, 255, .14);
}
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.form-grid .full { grid-column: 1 / -1; }
.form-status { margin-top: 12px; font-weight: 600; font-size: .95rem; display: none; }
.form-status.ok  { display: block; color: var(--ok); }
.form-status.err { display: block; color: var(--danger); }

/* ============================================================
   TRUST ROWS
   ============================================================ */
.trust-row, .trust {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 24px 0 0;
  padding: 0;
}
.trust-row li, .trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.trust-row li::before, .trust li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue-ink);
  font-size: .68rem;
  font-weight: 800;
  flex-shrink: 0;
}
.trust-row.left, .trust.left { justify-content: flex-start; }
.trust { justify-content: flex-start; }
.page-hero .trust, .trust.center { justify-content: center; }

/* ============================================================
   GUARANTEE BAND
   ============================================================ */
.guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  padding: 26px 32px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--blue-tint), var(--surface) 130%);
  border: 1px solid rgba(0, 123, 255, .22);
  box-shadow: var(--shadow);
}
.guarantee svg { width: 46px; height: 46px; fill: var(--blue); flex-shrink: 0; }
.guarantee p { margin: 0; font-size: .96rem; color: var(--ink-soft); }
.guarantee strong { color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--obsidian);
  background-image: var(--grain);
  background-blend-mode: overlay;
  padding: 64px 0 28px;
  color: #a5b0bf;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 300px;
  background: radial-gradient(ellipse at center, rgba(0, 123, 255, .14), transparent 68%);
  pointer-events: none;
}
.footer .container, .footer .wrap { position: relative; }
.footer .foot-logo { display: flex; justify-content: center; margin-bottom: 32px; }
.footer .foot-logo img { height: 92px; filter: drop-shadow(0 10px 26px rgba(0, 123, 255, .3)); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; text-align: center; }
.footer h4 {
  font-family: var(--fd);
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.28rem;
  margin-bottom: 12px;
  letter-spacing: .04em;
}
.footer p { color: #a5b0bf; font-size: .96rem; }
.footer a { color: #dbe2ec; transition: color .2s ease; }
.footer a:hover { color: var(--blue-lift); }
.footer .socials, .socials { display: flex; justify-content: center; gap: 15px; margin: 38px 0 28px; }
.socials a {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .17);
  display: grid;
  place-items: center;
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);
}
.socials a:hover {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 123, 255, .4);
}
.socials svg { width: 19px; height: 19px; fill: #fff; }
.copyright {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-top: 26px;
  text-align: center;
  font-size: .87rem;
  color: #78838f;
}

/* ============================================================
   STICKY MOBILE ACTION BAR (injected by main.js)
   ============================================================ */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(23, 28, 36, .93);
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(115%);
  transition: transform .38s var(--ease);
}
.sticky-cta.up { transform: translateY(0); }
.sticky-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: var(--radius-btn);
  font-family: var(--fb);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform .2s ease;
}
.sticky-btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.sticky-btn.primary {
  flex: 1.35;
  background: linear-gradient(180deg, #1a89ff, var(--brand-blue));
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 123, 255, .45);
}
.sticky-btn.ghost {
  background: rgba(255, 255, 255, .07);
  color: #eef2f7;
  border-color: rgba(255, 255, 255, .2);
}
.sticky-btn:active { transform: scale(.97); }

@media (max-width: 880px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta .footer { padding-bottom: 96px; }
}

/* ============================================================
   MOTION — reveals, stagger, counters
   ============================================================ */
html.js .reveal {
  opacity: 0;
  /* a touch of scale alongside the rise — it reads as the panel settling into
     place rather than sliding, which is the difference between "animated" and
     "expensive". transform resolves to none once shown, so no stacking context
     is left behind on the section afterwards. */
  transform: translateY(26px) scale(.985);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
html.js .reveal.visible { opacity: 1; transform: none; }

/* children of a .stagger container cascade in */
html.js .stagger > * {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
  transition-delay: var(--d, 0ms);
}
html.js .stagger.visible > * { opacity: 1; transform: none; }

/* count-up numerals hold their width so nothing jumps */
.count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .deal-strip::after { animation: none; display: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   MOTION EXTRAS
   Effects that lean on the brand — liquid beading, wet-paint sheen,
   magnetic buttons. All of it is either pointer-driven (so it never
   runs on touch) or one-shot, and all of it is killed by the
   reduced-motion block further down.
   ============================================================ */

/* ---------- magnetic CTAs (main.js writes --tx/--ty) ---------- */
.btn.magnetic {
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s ease;
}
.btn.magnetic:hover { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 3px)); }

/* ---------- click ripple ---------- */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  opacity: .8;
  pointer-events: none;
  animation: ripple-out .62s var(--ease) forwards;
  z-index: 0;
}
.btn-ghost .ripple { background: rgba(0, 123, 255, .28); }
@keyframes ripple-out {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- water beading ----------
   Hydrophobic beads rolling off the paint — the whole point of a
   ceramic coating, so it doubles as product demo. Purely decorative:
   injected by main.js into .bead-field, never blocks pointer events. */
.bead-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.bead {
  position: absolute;
  top: -12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(circle at 65% 72%, rgba(120, 195, 255, .5), rgba(120, 195, 255, 0) 70%);
  box-shadow: inset 0 -1px 3px rgba(255, 255, 255, .5), 0 2px 6px rgba(0, 0, 0, .18);
  opacity: 0;
  animation: bead-roll linear infinite;
}
@keyframes bead-roll {
  0%   { transform: translateY(0) scale(.85); opacity: 0; }
  12%  { opacity: .85; }
  78%  { opacity: .7; }
  100% { transform: translateY(115vh) scale(1); opacity: 0; }
}

/* ---------- wet-paint sheen on card imagery ---------- */
.service-card .media,
.numbered-card .media,
.gallery-grid a,
.proof-strip a,
.proof-grid a { position: relative; }
.service-card .media::before,
.numbered-card .media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, .3) 50%, transparent 58%);
  transform: translateX(-110%);
  transition: transform .85s var(--ease);
  pointer-events: none;
}
.service-card:hover .media::before,
.numbered-card:hover .media::before { transform: translateX(110%); }

/* ---------- booking total pulse (main.js toggles .bump) ---------- */
.wiz-total .amt.bump { animation: amt-bump .45s var(--ease); }
@keyframes amt-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.16); color: var(--gold); }
  100% { transform: scale(1); }
}

/* ---------- nav logo catches the light on hover ---------- */
.nav-brand:hover img { animation: logo-tilt .7s var(--ease); }
@keyframes logo-tilt {
  30% { transform: rotate(-5deg) scale(1.06); }
  60% { transform: rotate(3deg) scale(1.03); }
  100%{ transform: none; }
}

/* ---------- guarantee shield pulses once when it arrives ---------- */
.reveal.visible .guarantee svg { animation: shield-in .8s var(--ease) both; }
@keyframes shield-in {
  from { transform: scale(.6) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(3deg); opacity: 1; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bead-field { display: none; }
  .btn .ripple { display: none; }
  .btn.magnetic { transform: none !important; }
  .reveal.visible h2 .accent-blue,
  .reveal.visible h2 .accent-cyan,
  .reveal.visible h2 .accent,
  .hero h1 .accent-blue,
  .hero h1 .accent-cyan,
  .hero h1 .accent,
  .reveal.visible .guarantee svg,
  .nav-brand:hover img { animation: none !important; }
}

/* ============================================================
   RESPONSIVE — shared chrome
   ============================================================ */
@media (max-width: 1220px) {
  .nav-toggle { display: block; flex-shrink: 0; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(247, 249, 252, .98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 44px rgba(16, 21, 29, .16);
    padding: 10px 5% 20px;
    display: none;
  }
  .nav-links.open { display: flex; animation: navdrop .3s var(--ease); }
  @keyframes navdrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { display: block; padding: 15px 0; font-size: 1rem; letter-spacing: .08em; }
  .nav-links a::after { display: none; }
  .nav-links .mobile-only { display: block; }
}

@media (max-width: 880px) {
  .nav-inner { gap: 12px; }
  .nav-brand { gap: 9px; min-width: 0; }
  .nav-brand img { height: 44px; }
  .nav-brand .brand-name { font-size: 1.02rem; max-width: 150px; }
  .nav-phone { width: 42px; height: 42px; }
  .nav-cta { display: none; }
}

/* Small phones: the brand block used to be flex-shrink:0, which pushed
   the burger past the right edge at 320px. Let it shrink, then drop the
   tagline entirely on the narrowest screens — the shield alone is enough. */
@media (max-width: 560px) {
  .nav-brand { flex-shrink: 1; min-width: 0; }
  .nav-brand .brand-name {
    max-width: 116px;
    font-size: .92rem;
    overflow: hidden;
  }
}
@media (max-width: 400px) {
  .nav-inner { gap: 8px; padding: 10px 0; }
  .nav-brand img { height: 40px; }
  .nav-brand .brand-name { display: none; }
  .nav-phone { width: 40px; height: 40px; border-radius: 11px; }
  .nav-phone svg { width: 20px; height: 20px; }
  .nav-toggle { padding: 9px; }
  .nav-toggle span { width: 20px; }
}

/* Inline call/text links are real conversions, but as bare text inside a
   paragraph they were only ~18px tall — too small to hit reliably on a
   phone. Give them a proper tap area without changing how they read. */
@media (max-width: 880px) {
  p a[href^="tel:"],
  p a[href^="sms:"],
  .footer p a,
  .fc-note a {
    display: inline-block;
    padding-block: 11px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .btn { padding: 14px 26px; }
  /* keep the small uppercase badges above the legibility floor */
  .save-tag { font-size: .68rem; padding: 4px 9px; }
  .footer-cols { grid-template-columns: 1fr; gap: 30px; }
  .guarantee { flex-direction: column; text-align: center; gap: 14px; padding: 26px 22px; }
  .trust-row, .trust { gap: 8px 18px; }
  .trust-row li, .trust li { font-size: .82rem; }
  .btn-row { margin-top: 30px; }
}

/* ---------- hero headline entrance ----------
   Defined here rather than in the page sheets so the contact lander gets it
   too — it loads lander.css, which never had these rules, so its headline and
   quote card simply appeared while everything around them faded in. */
.hero h1 .word { display: inline-block; white-space: nowrap; }
.hero h1 .ltr {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  animation: letter-in .34s var(--ease) forwards;
}
@keyframes letter-in { to { opacity: 1; transform: none; } }

.hero-follow { opacity: 0; animation: follow-in .55s ease forwards; }
@keyframes follow-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .ltr, .hero-follow { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ============================================================
   PAGE ENTRANCE
   A short staged arrival on every page: the strip, bar and nav
   settle first, then the hero. ~1.1s end to end at the longest,
   so it reads as the page composing itself rather than as a wait.

   Applied by JS, so nothing is ever hidden if the script fails —
   and skipped entirely under reduced-motion.
   ============================================================ */
html.js .page-in {
  opacity: 0;
  animation: page-in .62s var(--ease) both;
}
/* fade only — used on the sticky nav and the thin bars, where a transform
   would create a containing block and break stickiness while it runs */
html.js .page-in-soft {
  opacity: 0;
  animation: page-in-soft .55s ease both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-in-soft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* safety net: if animations are throttled (background tab), force the end
   state so a page can never be left sitting blank */
html.js.intro-done .page-in,
html.js.intro-done .page-in-soft {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js .page-in, html.js .page-in-soft {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}