/* ==========================================================================
   TR Mechanical · Heating and Air
   Brand colors live here. Change them once and the whole site follows.
   Red and blue are sampled straight from the logo (flame = heat, waves = air).
   ========================================================================== */
/* Archivo (SIL Open Font License), hosted with the site instead of loaded from Google Fonts.
   Trimmed to English characters, weights 300–800 and widths 100–125%, which is all the site uses.
   If you ever replace the file, give it a new name too: /fonts/* is cached for a year (see _headers). */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --flame: #f13136;      /* logo red */
  --flame-600: #d4242b;  /* buttons (white text passes WCAG AA) */
  --flame-700: #b81d23;
  --flame-ink: #c11f26;  /* red text on white */
  --flame-50: #fef0f0;

  --air: #17a6e3;        /* logo blue */
  --air-600: #0b85c2;
  --air-700: #076fa8;    /* blue text on white */
  --air-50: #e8f6fd;

  --ink-950: #060a12;
  --ink-900: #0b1220;    /* header, dark sections */
  --ink-800: #141f33;
  --ink-700: #1f2b42;
  --ink-600: #334058;

  --text: #0b1220;
  --muted: #4a5568;
  --line: #e3e8ef;
  --line-strong: #cbd3df;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --star: #f5a623;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 1px rgba(11, 18, 32, 0.03);
  --shadow-md: 0 2px 4px rgba(11, 18, 32, 0.04), 0 16px 36px -14px rgba(11, 18, 32, 0.2);
  --shadow-lg: 0 4px 10px rgba(11, 18, 32, 0.05), 0 32px 64px -24px rgba(11, 18, 32, 0.3);

  --max: 1200px;
  --gutter: 20px;
  --header-h: 64px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* drawer/sheet curve */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);      /* accelerate out, for closing */
}
@media (min-width: 720px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1080px) {
  :root { --header-h: 76px; }
}

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

html {
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  /* Stops iOS Safari's double-tap zoom (e.g. tapping the menu button twice); pinch-zoom still works */
  touch-action: manipulation;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--air-700); text-underline-offset: 3px; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
strong { font-weight: 700; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.3vw, 3.05rem); }
h3 { font-size: 1.25rem; font-stretch: 104%; letter-spacing: -0.012em; line-height: 1.2; }

:focus-visible { outline: 3px solid var(--air); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(23, 166, 227, 0.25); }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.stars { width: 5.4rem; height: 1rem; flex: none; color: var(--star); }
.g-logo { width: 18px; height: 18px; flex: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nowrap { white-space: nowrap; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 0.75rem 1rem; border-radius: 8px;
  background: #fff; color: var(--ink-900); font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* Section rhythm */
.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section-head { max-width: 740px; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-lead { font-size: clamp(1.075rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--muted); }
.section-head .section-lead:last-child { margin-bottom: 0; }

/* Eyebrow label with the red|blue "heat and air" bar used across the brand */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1rem;
  font-size: 0.78rem; font-weight: 700; font-stretch: 125%;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--air-700);
}
.eyebrow::before {
  content: ""; flex: none; width: 28px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--flame) 0 50%, var(--air) 50% 100%);
}
.eyebrow-light { color: #7fd0f4; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.8rem 1.4rem;
  border: 1.5px solid transparent; border-radius: 12px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; }
.btn-lg { min-height: 58px; padding-inline: 1.7rem; font-size: 1.0625rem; }
.btn-sm { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.9375rem; gap: 0.45rem; }
.btn-sm .icon { width: 17px; height: 17px; }

.btn-primary {
  background: var(--flame-600); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px -10px rgba(212, 36, 43, 0.7);
}
.btn-primary:hover { background: var(--flame-700); }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.04); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-700); }
.btn-outline { background: #fff; color: var(--ink-900); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink-900); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; color: #fff; }
/* The header's background (and bottom border) live on this layer, so the mobile menu tray
   can sit between it and the page and slide out from underneath the header bar. */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1;
  /* Solid, not frosted: a blur would have to be redrawn every frame while the tray slides beneath it */
  background: var(--ink-900);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.site-header.scrolled::before {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px -14px rgba(6, 10, 18, 0.55);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--header-h);
}

.brand { display: flex; flex: none; color: #fff; border-radius: 6px; }
.brand-logo { width: auto; height: 34px; aspect-ratio: 1978.12 / 422; }
@media (min-width: 1080px) {
  .brand-logo { height: 40px; }
}

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-call { min-height: 44px; padding: 0 1rem; font-size: 0.975rem; }
@media (max-width: 559px) {
  .header-call { width: 44px; padding: 0; }
  .header-call-text { display: none; }
}

.nav-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s, background-color 0.2s;
}
.nav-toggle:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); }

/* Hamburger: three bars stacked on the center line, offset with transforms so they can rotate into an X */
.burger { position: relative; display: block; width: 20px; height: 14px; }
.burger span {
  position: absolute; left: 0; top: 6px;
  width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.2s ease;
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: rotate(-45deg); }

/* ---- Mobile / tablet tray ---- */
@media (max-width: 1079px) {
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 0.25rem var(--gutter) 1.5rem;
    background: var(--ink-900);
    /* Hairline edge so the tray still reads as a panel over the dark hero, where the shadow can't show */
    border: 1px solid rgba(255, 255, 255, 0.09); border-top: 0;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 30px 50px -18px rgba(6, 10, 18, 0.65), 0 4px 10px -4px rgba(6, 10, 18, 0.3);
    /* Tucked up behind the header bar (z-index below the header's background layer). The extra
       64px lifts the shadow out of sight too, so tray, contents and shadow move as one piece. */
    z-index: -2;
    visibility: hidden;
    transform: translateY(calc(-100% - 64px));
    will-change: transform;
    /* Scrolls only if the menu is taller than the screen (phones in landscape) */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.open { visibility: visible; transform: none; }
  /* Transitions exist only while the menu button is being used (script.js adds .animating),
     so page load, rotation, or resizing across the breakpoint never visibly slides the tray.
     Opening decelerates into place; closing accelerates away behind the header. */
  .site-nav.animating { transition: transform 0.3s var(--ease-exit), visibility 0s linear 0.3s; }
  .site-nav.animating.open { transition: transform 0.5s var(--ease-sheet), visibility 0s; }

  /* Links settle in one after another as the tray opens */
  .nav-list li, .nav-cta {
    opacity: 0; transform: translateY(-10px);
    transition: opacity 0.15s, transform 0.15s;
  }
  .site-nav.open .nav-list li, .site-nav.open .nav-cta {
    opacity: 1; transform: none;
    transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
    transition-delay: calc(80ms + var(--i, 0) * 45ms);
  }

  .nav-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0.25rem;
    font-size: 1.2rem; font-weight: 650; color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
  }
  .nav-list a::after {
    content: ""; flex: none; width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a6e3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.25s var(--ease-out);
  }
  .nav-list a:hover, .nav-list a:active { color: #7fd0f4; }
  .nav-list a:hover::after, .nav-list a:active::after { transform: translateX(4px); }

  .nav-cta { display: grid; gap: 0.65rem; margin-top: 1.5rem; }
  .nav-cta .btn { width: 100%; }
  .nav-note {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    margin: 0.4rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.65);
  }
  .nav-note .icon { width: 16px; height: 16px; color: #ff5a5f; }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .nav-cta { grid-template-columns: 1fr 1fr; }
  .nav-note { grid-column: 1 / -1; }
}

/* Invisible layer behind the open tray: tapping outside the menu closes it.
   Deliberately no dim color. iOS Safari (26+) recolors its toolbar to match anything dark at the
   screen edges, and it snaps rather than fades, so the tray's shadow provides the separation instead. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 40;
  visibility: hidden;
  touch-action: none; /* keeps iOS from scrolling the page behind the open menu */
}
.nav-open .nav-scrim { visibility: visible; }
.nav-open { overflow: hidden; }
.nav-open .site-header::before { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* ---- Desktop nav ---- */
@media (min-width: 1080px) {
  .nav-toggle, .nav-scrim, .nav-cta { display: none; }
  .site-nav { margin-left: auto; }
  .nav-list { display: flex; align-items: center; gap: 0.15rem; }
  .nav-list a {
    position: relative; display: block;
    padding: 0.55rem 0.8rem;
    font-size: 0.975rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); text-decoration: none;
    transition: color 0.2s;
  }
  /* Red|blue underline that draws in from the left on hover and marks the section you're in */
  .nav-list a::after {
    content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--flame) 0 50%, var(--air) 50% 100%);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.35s var(--ease-out);
  }
  .nav-list a:hover, .nav-list a[aria-current="true"] { color: #fff; }
  .nav-list a:hover::after, .nav-list a[aria-current="true"]::after { transform: scaleX(1); }
  .header-actions { margin-left: 1rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(6.5rem, 10vw, 9rem);
  background: var(--ink-900); color: #fff;
}
/* Warm glow on the left, cool glow on the right, like the logo (flame left, air right) */
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48% 60% at 6% 96%, rgba(241, 49, 54, 0.2), transparent 70%),
    radial-gradient(52% 62% at 96% 6%, rgba(23, 166, 227, 0.22), transparent 70%);
}
/* Faint blueprint grid */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 70% 40%, #000 20%, transparent 75%);
}

.hero-grid { display: grid; gap: clamp(3rem, 6vw, 4rem); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; }
}

.rating-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.rating-chip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); }
.rating-chip .g-logo { width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: #fff; }
.rating-chip .stars { width: 4.6rem; height: 0.85rem; }
.rating-chip strong { color: #fff; }

.hero h1 {
  margin: 1.4rem 0 1.25rem;
  font-size: clamp(2.6rem, 6.6vw, 4.75rem);
  font-stretch: 104%;
  line-height: 1.01;
  letter-spacing: -0.035em;
  color: #fff;
}
.t-heat { color: #ff4f55; }
.t-air { color: #3dbbf0; }
.hero h1 .amp { font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.hero-lead {
  max-width: 34rem; margin: 0;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.hero-note {
  display: flex; align-items: flex-start; gap: 0.65rem;
  margin: 1.4rem 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.66);
}
.hero-note .icon { width: 16px; height: 16px; margin-top: calc(0.825em - 8px); color: #ff5a5f; } /* centered on the first line if it wraps */
@media (max-width: 519px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .hero-note { font-size: 0.9rem; }
}

/* Hero visual: a thermostat dial inside the logo's offset bracket frame */
.hero-visual {
  position: relative;
  width: min(100%, 470px); margin-inline: auto;
  padding: clamp(18px, 6%, 30px);
}
.hero-visual::before, .hero-visual::after {
  content: ""; position: absolute; width: 44%; height: 44%;
  border: 0 solid rgba(255, 255, 255, 0.16); pointer-events: none;
}
.hero-visual::before { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.hero-visual::after { right: 0; bottom: 0; border-bottom-width: 3px; border-right-width: 3px; }

.dial {
  position: relative; aspect-ratio: 1; border-radius: 50%;
  container-type: inline-size;
  background: radial-gradient(circle at 50% 30%, #1b2943 0%, #0f1828 58%, #080d17 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 50px 90px -40px rgba(0, 0, 0, 0.9);
}
.dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-rim { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.dial-inner { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.dial-ticks { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 14; stroke-dasharray: 1 4; }
.dial-ticks-lit { stroke: url(#dial-spectrum); }
.sweep { fill: none; stroke: #fff; stroke-width: 36; stroke-dasharray: 100; }
.dial-setpoint { fill: #fff; }
.dial-setpoint-glow { fill: rgba(255, 255, 255, 0.16); }
.dial-setpoint, .dial-setpoint-glow { transform-box: fill-box; transform-origin: center; }

.dial-readout {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.dial-label {
  font-size: 3.3cqi; font-weight: 700; font-stretch: 125%;
  letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.dial-temp {
  position: relative; margin-top: 1cqi;
  font-size: 30cqi; font-weight: 300; line-height: 0.95; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.dial-temp .deg {
  position: absolute; left: 100%; top: 0.04em;
  font-size: 0.4em; font-weight: 400; color: rgba(255, 255, 255, 0.6);
}
.dial-mode {
  display: flex; align-items: center; gap: 2.6cqi; margin-top: 3.4cqi;
  font-size: 3.2cqi; font-weight: 700; font-stretch: 125%;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8);
}
.dial-mode > span {
  padding: 1.1cqi 2.8cqi 1.1cqi 3.2cqi; border-radius: 99px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
}
.dial-mode .icon { width: 5.2cqi; height: 5.2cqi; stroke-width: 2.2; }
.dial-mode .is-heat { color: #ff5a5f; }
.dial-mode .is-cool { color: #4cc0f2; }

.float-card {
  position: absolute; z-index: 2;
  background: #fff; color: var(--ink-900);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 24px 44px -18px rgba(0, 0, 0, 0.65);
}
.float-review { left: -3%; bottom: -4%; width: min(64%, 252px); padding: 0.9rem 1rem 0.85rem; }
.float-review .stars { width: 4.9rem; height: 0.9rem; }
.float-review p {
  margin: 0.45rem 0 0.3rem;
  font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
}
.float-review span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
/* Phones: the review card drops below the dial's mode pill instead of covering it */
@media (max-width: 599px) {
  .hero-visual { margin-bottom: 2rem; }
  .float-review { left: 0; bottom: -9%; padding: 0.75rem 0.85rem; }
  .float-review p { font-size: 0.92rem; }
}

/* Load-in choreography: copy rises in, then the dial sweeps from heat and cool toward 72° */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 0.9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.32s; }
  .hero-visual { animation: rise 1.1s var(--ease-out) 0.15s both; }
  .sweep { animation: sweep 1.7s var(--ease-out) 0.55s both; }
  .dial-setpoint { animation: pop 0.6s var(--ease-out) 1.85s both; }
  .dial-setpoint-glow { animation: pop 0.6s var(--ease-out) 1.85s both, glow 3.2s ease-in-out 2.5s infinite; }
  .float-review { animation: float-in 0.8s var(--ease-out) 1.2s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sweep { from { stroke-dashoffset: 100; } }
@keyframes pop { from { opacity: 0; transform: scale(0.2); } }
@keyframes glow { 50% { transform: scale(1.5); opacity: 0.35; } }
@keyframes float-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* ---------- Trust strip (overlaps the bottom of the hero) ---------- */
.trust { position: relative; z-index: 2; margin-top: calc(-1 * clamp(3.25rem, 6vw, 4rem)); }
.trust-list {
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.trust-list > li { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1rem; min-width: 0; }
.trust-list > li:nth-child(even) { border-left: 1px solid var(--line); }
.trust-list > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
.trust-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2); color: var(--ink-800);
}
.trust-icon .icon { width: 22px; height: 22px; }
.trust-icon.is-star { background: #fff5e3; color: var(--star); }
.trust-icon.is-star .icon { stroke: none; width: 24px; height: 24px; }
.trust-list strong { display: block; font-size: 1rem; font-stretch: 104%; line-height: 1.25; color: var(--ink-900); }
.trust-list strong + span { display: block; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 419px) {
  .trust-list > li { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1rem 0.9rem; }
  .trust-icon { width: 38px; height: 38px; border-radius: 10px; }
}
@media (min-width: 960px) {
  .trust-list { grid-template-columns: repeat(4, 1fr); }
  .trust-list > li { padding: 1.5rem 1.6rem; }
  .trust-list > li:nth-child(n) { border-top: 0; border-left: 0; }
  .trust-list > li + li { border-left: 1px solid var(--line); }
}

/* ---------- Services ---------- */
.services { padding-top: clamp(4.5rem, 8vw, 6.5rem); }
.services-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.service-card {
  --accent: linear-gradient(90deg, var(--flame) 0 50%, var(--air) 50% 100%);
  --accent-soft: #eef1f6;
  --accent-ink: var(--ink-800);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 1.85rem);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.service-card.is-heat { --accent: var(--flame); --accent-soft: var(--flame-50); --accent-ink: var(--flame-ink); }
.service-card.is-cool { --accent: var(--air); --accent-soft: var(--air-50); --accent-ink: var(--air-700); }
/* Accent bar that wipes across the top on hover */
.service-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) {
  .service-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
  .service-card:hover::before { transform: scaleX(1); }
}
.service-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 1.25rem; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.service-icon .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.service-card h3 { margin-bottom: 0.45rem; font-size: 1.3rem; }
.service-card > p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.service-tags li {
  padding: 0.3rem 0.6rem; border-radius: 7px;
  background: var(--surface-2); color: var(--ink-700);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
}
.service-link {
  display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start;
  margin-top: 1.25rem; padding-top: 1.1rem; width: 100%;
  border-top: 1px solid var(--line);
  font-size: 0.95rem; font-weight: 700; color: var(--accent-ink); text-decoration: none;
}
.service-link .icon { width: 17px; height: 17px; transition: transform 0.25s var(--ease-out); }
.service-link:hover .icon { transform: translateX(4px); }

/* Last tile: a dark "text me" card that fills out the grid */
.service-card.is-help {
  --accent-soft: rgba(255, 255, 255, 0.08); --accent-ink: #7fd0f4;
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(23, 166, 227, 0.2), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(241, 49, 54, 0.16), transparent 70%),
    var(--ink-900);
  border-color: var(--ink-900);
}
.service-card.is-help:hover { border-color: var(--ink-900); }
.service-card.is-help h3 { color: #fff; }
.service-card.is-help > p { color: rgba(255, 255, 255, 0.74); }
.help-cta { margin-top: auto; width: 100%; }
.service-link:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* Phones: compact cards (icon beside the title, no tags) so six services don't become a long scroll */
@media (max-width: 639px) {
  .service-card {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 0.9rem; align-items: center;
    padding: 1.2rem 1.25rem 1.1rem;
  }
  .service-icon { width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .service-icon .icon { width: 22px; height: 22px; }
  .service-card h3 { margin: 0; font-size: 1.2rem; }
  .service-card > p { grid-column: 1 / -1; margin: 0.8rem 0 0; font-size: 0.975rem; }
  .service-tags { display: none; }
  .service-link { grid-column: 1 / -1; margin-top: 0.9rem; padding-top: 0.85rem; }
  .help-cta { grid-column: 1 / -1; margin-top: 1.1rem; }
}

/* ---------- Second opinion ---------- */
.opinion { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-900); color: #fff; }
.opinion-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(45% 55% at 88% 30%, rgba(23, 166, 227, 0.16), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(241, 49, 54, 0.14), transparent 70%);
}
.opinion-grid { display: grid; gap: 3rem; align-items: center; }
.opinion-grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .opinion-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
.opinion h2 { color: #fff; }
.opinion .section-lead { color: rgba(255, 255, 255, 0.74); }
.check-list { display: grid; gap: 0.6rem; margin: 1.75rem 0 2.25rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 600; line-height: 1.45; }
.check-list .icon {
  width: 24px; height: 24px; padding: 4px; margin-top: -1px;
  border-radius: 50%; background: rgba(34, 197, 94, 0.16); color: #4ade80; stroke-width: 3;
}
@media (max-width: 519px) {
  .opinion-copy .btn { width: 100%; white-space: normal; text-align: center; }
}

.compare-card {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: #fff; color: var(--text); border-radius: 22px;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.85);
}
.compare-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 1rem; row-gap: 0.3rem;
  padding: 1.1rem 0;
}
.compare-row.is-old { padding-top: 0.2rem; }
.compare-row.is-new { border-top: 2px dashed var(--line-strong); }
.compare-label {
  grid-column: 1 / -1;
  font-size: 0.72rem; font-weight: 700; font-stretch: 120%;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}
.compare-what { grid-column: 1; grid-row: 2; font-weight: 600; line-height: 1.35; color: var(--ink-900); }
.compare-amount {
  grid-column: 2; grid-row: 2;
  font-size: clamp(2.2rem, 5.4vw, 3.25rem); font-weight: 800; font-stretch: 104%;
  line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.is-old .compare-amount { color: #8a94a6; }
.is-new .compare-amount { color: var(--ink-900); }
.compare-amount s { position: relative; text-decoration: none; }
.compare-amount s::after {
  content: ""; position: absolute; left: -5%; right: -5%; top: 50%;
  height: 4px; margin-top: -2px; border-radius: 4px; background: var(--flame);
  transform: rotate(-9deg); transform-origin: left center;
}
/* The strike draws across once the card scrolls into view */
.reveal-ready .compare-card:not(.is-in) .compare-amount s::after { transform: rotate(-9deg) scaleX(0); }
.reveal-ready .compare-card .compare-amount s::after { transition: transform 0.6s var(--ease-out) 0.6s; }

.compare-card blockquote {
  margin-top: 0.4rem; padding: 1.15rem 1.25rem;
  border-radius: 14px; background: var(--surface-2);
  font-size: 1.04rem; line-height: 1.6; color: var(--ink-800);
}
.compare-card blockquote p { margin: 0; }
.compare-card figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.1rem; }
.compare-card figcaption .stars { margin-left: auto; }

.mini-quote {
  margin-top: 1rem; padding: 1.2rem 1.35rem;
  border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}
.mini-quote p { margin: 0; color: rgba(255, 255, 255, 0.86); line-height: 1.55; }
.mini-quote figcaption { margin-top: 0.65rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }
.mini-quote figcaption strong { color: #fff; }
.fine-print { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }

/* Reviewer initials */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--av, var(--ink-700)); color: #fff;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em;
}
.cite { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cite strong { color: var(--ink-900); }
.cite span { font-size: 0.875rem; color: var(--muted); }

/* ---------- About ---------- */
.about { background: var(--surface-2); overflow-x: clip; }
.about-grid { display: grid; gap: 3rem; align-items: center; }
.about-grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .about-grid { grid-template-columns: 0.92fr 1.08fr; gap: 5rem; }
}

/* Business-card composition (swap for a real photo of Todd: see the TODO in index.html) */
.card-stack {
  position: relative; container-type: inline-size;
  width: min(100% - 2rem, 460px); margin: 1.5rem auto; aspect-ratio: 1.75;
}
.biz-card { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; }
.biz-back {
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(241, 49, 54, 0.32), transparent 70%),
    radial-gradient(70% 90% at 100% 0%, rgba(23, 166, 227, 0.32), transparent 70%),
    var(--ink-900);
  transform: rotate(-8deg) translate(-4%, 9%);
  box-shadow: 0 30px 60px -28px rgba(11, 18, 32, 0.6);
}
.biz-back-mark { position: absolute; right: 7%; bottom: 10%; width: 34%; height: auto; aspect-ratio: 676.33 / 422; color: #fff; }
.biz-front {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 7.5cqi 7.5cqi 8.5cqi;
  background: #fff; color: var(--ink-900);
  border: 1px solid var(--line);
  transform: rotate(3deg) translate(3%, -5%);
  box-shadow: 0 2px 4px rgba(11, 18, 32, 0.06), 0 40px 70px -30px rgba(11, 18, 32, 0.5);
}
.biz-front::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2cqi;
  background: linear-gradient(90deg, var(--flame) 0 50%, var(--air) 50% 100%);
}
.biz-logo { width: 58%; height: auto; aspect-ratio: 1978.12 / 422; }
.biz-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqi; }
.biz-name { margin: 0; font-size: 6cqi; font-weight: 800; font-stretch: 104%; letter-spacing: -0.02em; line-height: 1.1; }
.biz-role {
  margin: 0.8cqi 0 0; font-size: 2.7cqi; font-weight: 700; font-stretch: 125%;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.biz-lines li {
  display: flex; align-items: center; gap: 1.4cqi;
  font-size: 2.85cqi; font-weight: 500; line-height: 1.75; color: var(--ink-700); white-space: nowrap;
}
.biz-lines .icon { width: 3.2cqi; height: 3.2cqi; color: var(--flame-600); stroke-width: 2.2; }

.about-photo {
  width: min(100%, 460px); height: auto; margin-inline: auto;
  aspect-ratio: 9 / 11; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg);
}

.about-copy .section-lead { color: var(--ink-700); }
.about-copy header p:not(.eyebrow):not(.section-lead) { color: var(--muted); }
.promise-grid { display: grid; gap: 0.85rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 600px) {
  .promise-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (min-width: 1000px) {
  .promise-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.promise-grid li {
  padding: 1.25rem 1.3rem 1.2rem;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.promise-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 0.9rem; border-radius: 11px;
  background: var(--ink-900); color: #ff6b70;
}
.promise-grid li:nth-child(even) .promise-icon { color: #4cc0f2; }
.promise-icon .icon { width: 20px; height: 20px; stroke-width: 2; }
.promise-grid h3 { margin-bottom: 0.3rem; font-size: 1.1rem; }
.promise-grid p { margin: 0; font-size: 0.975rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 599px) {
  .promise-grid li { display: grid; grid-template-columns: 40px 1fr; column-gap: 0.9rem; padding: 1.1rem 1.15rem; }
  .promise-icon { grid-row: span 2; margin: 0; }
  .promise-grid h3 { align-self: center; margin: 0.45rem 0 0.2rem; }
  .promise-grid p { grid-column: 2; }
}

/* ---------- Reviews ---------- */
.reviews-head { display: grid; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews-head .section-head { margin-bottom: 0; }
@media (min-width: 960px) {
  .reviews-head { grid-template-columns: 1fr auto; align-items: end; gap: 4rem; }
}
.rating-card {
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px;
}
@media (min-width: 960px) {
  .rating-card { width: 370px; }
}
.rating-top { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--ink-700); }
.rating-score { display: flex; align-items: center; gap: 1rem; margin: 0.6rem 0 1.15rem; }
.rating-score strong {
  font-size: 3.4rem; font-weight: 800; font-stretch: 104%;
  line-height: 1; letter-spacing: -0.04em; color: var(--ink-900);
}
.rating-score .stars { width: 7.1rem; height: 1.32rem; }
.rating-count { display: block; margin-top: 0.3rem; font-size: 0.9rem; color: var(--muted); }
.rating-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rating-actions .btn { flex: 1 1 auto; }

.review-card figure {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.3rem, 2.5vw, 1.6rem);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.review-card blockquote { flex: 1; }
.review-card blockquote p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--ink-800); }
.review-card.is-featured blockquote p { font-size: 1.1rem; }
.review-card figcaption {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}

/* Tablet/desktop: masonry columns. Phones: swipeable row. */
@media (min-width: 720px) {
  .review-list { columns: 2; column-gap: 1.25rem; }
  .review-card { break-inside: avoid; margin-bottom: 1.25rem; }
}
@media (min-width: 1080px) {
  .review-list { columns: 3; }
}
@media (max-width: 719px) {
  .review-scroller {
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .review-scroller::-webkit-scrollbar { display: none; }
  .review-scroller:focus-visible { outline-offset: -3px; }
  .review-list { display: flex; gap: 0.75rem; width: max-content; padding: 0.25rem var(--gutter) 0.75rem; }
  .review-card { flex: none; width: min(84vw, 360px); scroll-snap-align: start; }
}
.swipe-hint {
  display: none; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--muted);
}
.swipe-hint .icon { width: 16px; height: 16px; }
@media (max-width: 719px) {
  .swipe-hint { display: flex; }
}

/* ---------- Service area ---------- */
.area { background: var(--surface-2); }
.area-grid { display: grid; gap: 3rem; align-items: center; }
.area-grid > * { min-width: 0; }
@media (min-width: 960px) {
  .area-grid { grid-template-columns: 1fr 1.1fr; gap: 4.5rem; }
}
.town-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.75rem 0 1.5rem; }
.town-list li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 0.975rem; font-weight: 600; color: var(--ink-800);
}
.town-list .is-home { padding-left: 0.75rem; background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.town-list .icon { width: 16px; height: 16px; color: #ff5a5f; }
.text-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; color: var(--air-700); text-decoration: none;
}
.text-link .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease-out); }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link:hover .icon { transform: translateX(4px); }

.area-map {
  padding: clamp(0.5rem, 2vw, 1.25rem);
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-md);
}
.map { width: 100%; height: auto; color: #e7ecf3; font-family: var(--font); }
.map-zone { fill: rgba(23, 166, 227, 0.07); }
.map-ring { fill: none; stroke: var(--air); stroke-opacity: 0.6; stroke-width: 1.5; stroke-dasharray: 4 6; }
/* Ring labels sit on the dashed line with a halo that breaks it, map-style */
.map-ring-label {
  font-size: 11px; font-weight: 700; font-stretch: 120%; letter-spacing: 0.08em; fill: var(--air-700);
  paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round;
}
.map-town circle { fill: #fff; stroke: var(--ink-900); stroke-width: 2.5; }
.map-town text, .map-home-label {
  paint-order: stroke; stroke: #fff; stroke-linejoin: round;
  font-weight: 700; fill: var(--ink-800);
}
.map-town text { font-size: 15px; stroke-width: 4px; }
.map-home-dot { fill: var(--flame); stroke: #fff; stroke-width: 3; }
.map-pulse { fill: var(--flame); opacity: 0.3; transform-box: fill-box; transform-origin: center; }
.map-home-label { font-size: 17px; font-weight: 800; stroke-width: 5px; fill: var(--ink-900); }
.map-compass path { fill: var(--ink-600); }
.map-compass text { font-size: 10px; font-weight: 800; fill: var(--ink-600); }
/* The map scales down on phones; bump its labels so they stay readable */
@media (max-width: 599px) {
  .map-town text { font-size: 19px; }
  .map-home-label { font-size: 21px; }
  .map-ring-label { font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .map-pulse { animation: map-pulse 2.6s ease-out infinite; }
}
@keyframes map-pulse {
  from { transform: scale(1); opacity: 0.4; }
  to { transform: scale(3.4); opacity: 0; }
}

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-900); color: #fff; }
.contact-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(45% 60% at 100% 0%, rgba(23, 166, 227, 0.18), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(241, 49, 54, 0.16), transparent 70%);
}
.contact-head { max-width: 780px; }
.contact h2 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); color: #fff; }
.contact .section-lead { margin: 0; color: rgba(255, 255, 255, 0.74); }
.contact-cards { display: grid; gap: 0.85rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .contact-cards { grid-template-columns: 1fr 1fr 1.3fr; gap: 1.25rem; }
}
.contact-card {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff; text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
@media (hover: hover) {
  .contact-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
  .contact-card:hover .cc-arrow { transform: translateX(4px); color: #fff; }
}
.cc-icon {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
}
.cc-icon .icon { width: 24px; height: 24px; }
.is-call .cc-icon { background: var(--flame-600); box-shadow: 0 10px 24px -10px rgba(212, 36, 43, 0.8); }
.is-text .cc-icon { background: var(--air-600); box-shadow: 0 10px 24px -10px rgba(11, 133, 194, 0.8); }
.cc-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cc-label {
  font-size: 0.72rem; font-weight: 700; font-stretch: 120%;
  letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58);
}
.cc-value { font-size: 1.3rem; font-weight: 800; font-stretch: 104%; line-height: 1.3; letter-spacing: -0.01em; }
.cc-email { font-size: 1.05rem; }
/* Three cards across on a small laptop: tighten so the phone number stays on one line */
@media (min-width: 900px) and (max-width: 1199px) {
  .contact-card { gap: 0.85rem; padding: 1.1rem 1rem; }
  .cc-icon { width: 44px; height: 44px; border-radius: 12px; }
  .cc-icon .icon { width: 21px; height: 21px; }
  .cc-value { font-size: 1.15rem; white-space: nowrap; }
  .cc-email { font-size: 0.98rem; white-space: normal; }
  .cc-arrow { display: none; }
}
.cc-note { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.cc-arrow { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.45); transition: transform 0.25s var(--ease-out), color 0.25s; }

.contact-meta {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  margin-top: 2rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.66);
}
.contact-meta li, .contact-meta a { display: inline-flex; align-items: center; gap: 0.5rem; }
.contact-meta a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.contact-meta a:hover { color: #fff; text-decoration: underline; }
.contact-meta .icon { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.55); }

/* ---------- Footer ---------- */
.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  background: var(--ink-950); color: rgba(255, 255, 255, 0.64);
  font-size: 0.95rem;
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 0.9fr 1.2fr; gap: 3rem; }
}
.footer-brand .brand-logo { height: 42px; }
.footer-brand p { max-width: 23rem; margin: 1.15rem 0 1rem; }
.footer-rating { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 600; text-decoration: none; }
.footer-rating:hover span { text-decoration: underline; }
.footer-title {
  margin: 0 0 0.8rem;
  font-size: 0.75rem; font-weight: 700; font-stretch: 120%;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.footer-col p { margin: 0; }
.footer-col p + .footer-title { margin-top: 1.5rem; }
.footer-col li + li { margin-top: 0.55rem; }
.footer-col a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem; color: rgba(255, 255, 255, 0.5);
}
.footer-bottom p { margin: 0; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.2s, color 0.2s;
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.footer-social .icon { width: 18px; height: 18px; }

/* ---------- Phone call/text bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -14px rgba(11, 18, 32, 0.28);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease-out);
}
.action-bar.show { transform: none; }
.nav-open .action-bar { transform: translateY(110%); }
.action-bar .btn { min-height: 50px; }
@media (min-width: 720px) {
  .action-bar { display: none; }
}

/* ---------- Scroll reveal (script.js adds .reveal-ready, then .is-in per element) ---------- */
.reveal-ready [data-reveal] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 404 ---------- */
.not-found {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;
  padding: 2rem var(--gutter);
  background: var(--ink-900); color: #fff; text-align: center;
}
.not-found .hero-bg { position: absolute; }
.not-found-mark { width: 120px; height: auto; aspect-ratio: 676.33 / 422; margin: 0 auto 2rem; color: #fff; }
.not-found h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); color: #fff; }
.not-found p { max-width: 30rem; margin: 0 auto 2rem; color: rgba(255, 255, 255, 0.74); }
.not-found .btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }