/*
Theme Name: Computer Wall
Theme URI: https://computer-wall.com
Author: Computer Wall
Author URI: https://computer-wall.com
Description: Conversion-focused custom theme for Computer Wall — honest local computer repair in Stony Plain, Spruce Grove, and Parkland County. Built on the people-first approach: clear answer, clear price, honest repair-or-replace advice.
Version: 5.5.9
Requires at least: 5.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: computer-wall
Tags: one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   Computer Wall — Brand stylesheet (v2)
   Design language: editorial, premium, tech-confident.
   No external fonts. System stack only. Custom SVG icons.
   ========================================================= */

:root {
  /* Surfaces */
  --bg: #FBFCFD;
  --surface: #FFFFFF;
  --surface-2: #F4F7FA;
  --surface-3: #EAF0F4;

  /* Ink */
  --ink-950: #060B14;
  --ink-900: #0F172A;
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;

  /* Brand */
  --teal-950: #042F2E;
  --teal-900: #134E4A;
  --teal-800: #115E59;
  --teal-700: #0F766E;
  --teal-600: #0D9488;
  --teal-500: #14B8A6;
  --teal-400: #2DD4BF;
  --teal-100: #CCFBF1;
  --teal-50:  #F0FDFA;

  /* Accent */
  --gold-500: #F59E0B;

  /* Type */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Radii / shadow */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
  --shadow-2: 0 4px 14px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
  --shadow-3: 0 18px 48px rgba(15,23,42,.10), 0 6px 18px rgba(15,23,42,.06);
  --shadow-glow: 0 30px 80px -30px rgba(13,148,136,.45);

  /* Containers */
  --max: 1240px;
  --max-narrow: 880px;
  --gutter: clamp(1rem, 2.5vw, 2rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-900); }

h1, h2, h3, h4 { color: var(--ink-900); margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw + .2rem, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h2 { font-size: clamp(1.8rem, 2.6vw + .8rem, 2.6rem); letter-spacing: -0.025em; }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.015em; }

p { margin: 0 0 1em; }
.muted { color: var(--ink-500); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--teal-700);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--teal-600); display: inline-block;
}
.eyebrow.on-dark { color: var(--teal-400); }
.eyebrow.on-dark::before { background: var(--teal-400); }

.big-text { font-size: 1.15rem; color: var(--ink-700); line-height: 1.6; }
.centered { text-align: center; }

.skip-link {
  position: absolute; left: -9999px; top: auto;
  background: var(--ink-900); color: #fff; padding: .5rem .75rem; border-radius: 4px;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; }

/* ---------- Icon system ---------- */
.icon { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 1.6; vertical-align: middle; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }
.icon-inline { width: 1.05em; height: 1.05em; margin-right: .25em; vertical-align: -0.1em; }
.icon-spr { display: none !important; }

/* ---------- Layout ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: var(--max-narrow); }
.section { padding: clamp(3rem, 6vw, 6rem) 0; }
.section-tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section-light { background: var(--surface-2); }
.section-dark { background: var(--ink-950); color: var(--ink-100); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .muted { color: var(--ink-400); }

.section-head { max-width: 720px; margin: 0 auto 2.5rem; }
.section-head.centered { text-align: center; }
.section-sub { color: var(--ink-500); font-size: 1.05rem; margin-top: .5rem; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--teal-700);
  --fg: #fff;
  --bd: transparent;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.4rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -0.005em;
  border: 1.5px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.btn-lg { padding: 1.05rem 1.7rem; font-size: 1.02rem; }
.btn-xl { padding: 1.2rem 2rem; font-size: 1.08rem; }

.btn-primary { --bg: var(--teal-700); --fg: #fff; box-shadow: 0 6px 24px -10px rgba(13,148,136,.6); }
.btn-primary:hover { --bg: var(--teal-900); color: #fff; box-shadow: 0 12px 32px -8px rgba(13,148,136,.6); }

.btn-secondary { --bg: #fff; --fg: var(--ink-900); --bd: var(--ink-200); }
.btn-secondary:hover { --bd: var(--teal-700); --fg: var(--teal-700); }

.btn-ghost { --bg: transparent; --fg: var(--ink-700); --bd: transparent; padding-left: .25rem; padding-right: .25rem; }
.btn-ghost:hover { --fg: var(--teal-700); }

.btn-on-dark.btn-secondary { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.25); }
.btn-on-dark.btn-secondary:hover { --bd: #fff; --fg: #fff; }

.btn .icon { width: 18px; height: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cta-row.centered { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.header-grid {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem var(--gutter);
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--ink-900); }
.brand:hover { text-decoration: none; color: var(--ink-900); }
.brand-mark,
.brand .custom-logo,
.brand img.custom-logo,
.site-header .custom-logo { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 10px; object-fit: contain; }
/* Neutralize WP's default custom-logo-link wrapper if it ever appears */
.site-header .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; padding: 0; margin: 0; }
.brand-name { font-size: 1.08rem; letter-spacing: -0.015em; }
.primary-nav { display: flex; gap: 2rem; align-items: center; position: relative; }
.primary-nav > ul,
ul.primary-nav { display: flex; gap: 2rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.primary-nav > ul > li,
ul.primary-nav > li { position: relative; list-style: none; }
.primary-nav a {
  color: var(--ink-700);
  font-weight: 600;
  font-size: 0.94rem;
  position: relative;
  padding: .25rem 0;
}
.primary-nav a:hover { color: var(--ink-900); }
.primary-nav a.is-active { color: var(--teal-700); }

/* ===== Primary-nav dropdowns (Services, Service Areas, etc.) =====
   WordPress emits .menu-item-has-children > .sub-menu for nested menus.
   Desktop: hover + focus-within reveals the submenu.
   Mobile: handled separately by the .is-open drawer rules below. */
.primary-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: .4rem;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .6;
  transition: transform .15s ease;
}
.primary-nav .menu-item-has-children:hover > a::after,
.primary-nav .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); opacity: 1; }

.primary-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ink-100, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.primary-nav .sub-menu li { list-style: none; margin: 0; }
.primary-nav .sub-menu a {
  display: block;
  padding: .65rem 1.1rem;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-800, #0b1220);
  border-bottom: none;
  white-space: nowrap;
}
.primary-nav .sub-menu a:hover { background: var(--ink-50, #f4f7fa); color: var(--teal-700); }
/* Add a tiny invisible bridge so the dropdown doesn't disappear when the mouse crosses the gap. */
.primary-nav .menu-item-has-children::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.header-actions { display: inline-flex; align-items: center; gap: .75rem; }
.open-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700;
  padding: .35rem .65rem;
  border-radius: var(--r-pill);
  background: rgba(20,184,166,.10);
  color: var(--teal-800);
  border: 1px solid rgba(20,184,166,.25);
}
.open-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-500); box-shadow: 0 0 0 4px rgba(20,184,166,.18);
}
.open-pill.is-closed { background: rgba(100,116,139,.08); color: var(--ink-600); border-color: rgba(100,116,139,.2); }
.open-pill.is-closed .dot { background: var(--ink-400); box-shadow: none; }

.header-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ink-900); color: #fff;
  padding: .55rem 1rem; border-radius: var(--r-pill);
  font-weight: 700; font-size: .9rem;
  border: 1px solid var(--ink-900);
  transition: background .15s ease;
}
.header-phone:hover { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.header-phone .icon { width: 16px; height: 16px; }

/* mobile menu toggle */
.menu-toggle {
  display: none;
  background: transparent; border: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  color: var(--ink-900);
  cursor: pointer;
}
.menu-toggle .icon { width: 24px; height: 24px; }
.menu-toggle[aria-expanded="true"] { background: var(--ink-100); }

/* mobile drawer (when nav.is-open on small screens) */
.primary-nav.is-open,
nav.primary-nav.is-open {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 60px) !important;
  height: calc(100dvh - 60px) !important;
  background: #ffffff !important;
  padding: 1rem var(--gutter) !important;
  z-index: 200 !important;
  overflow-y: auto !important;
  border-top: 1px solid var(--ink-200);
  margin: 0 !important;
  list-style: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  align-items: stretch !important;
  justify-content: flex-start !important;
}
.primary-nav.is-open ul,
.primary-nav.is-open ul.primary-nav,
nav.primary-nav.is-open ul,
nav.primary-nav.is-open ul.primary-nav {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  gap: 0 !important;
}
.primary-nav.is-open li,
nav.primary-nav.is-open li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}
.primary-nav.is-open a,
nav.primary-nav.is-open a,
.primary-nav.is-open li a,
nav.primary-nav.is-open li a {
  display: block !important;
  padding: 1.05rem .5rem !important;
  font-size: 1.15rem !important;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-900) !important;
  text-decoration: none !important;
  width: 100%;
}
.primary-nav.is-open a:hover,
nav.primary-nav.is-open a:hover { color: var(--teal-700) !important; background: var(--ink-50); }
/* Mobile drawer: flatten submenus into the column, indent slightly so hierarchy reads. */
.primary-nav.is-open .sub-menu,
nav.primary-nav.is-open .sub-menu {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.primary-nav.is-open .sub-menu a,
nav.primary-nav.is-open .sub-menu a {
  padding-left: 1.75rem !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  color: var(--ink-700, #334155) !important;
}
.primary-nav.is-open .menu-item-has-children > a::after,
nav.primary-nav.is-open .menu-item-has-children > a::after { display: none !important; }
/* lock body scroll when menu is open */
body.cw-menu-open { overflow: hidden; }

/* ---------- Blog: post grid + cards ---------- */
.post-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
  border-color: var(--teal-500);
}
.post-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.post-card-link:hover { text-decoration: none; color: inherit; }
.post-card-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--surface-2);
}
.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--teal-50) 0%, var(--surface-2) 100%);
}
.post-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.post-card-meta {
  font-size: .82rem;
  color: var(--ink-500);
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.post-card-cat { color: var(--teal-700); }
.post-card-title {
  font-size: 1.15rem;
  margin: 0 0 .5rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink-900);
}
.post-card:hover .post-card-title { color: var(--teal-700); }
.post-card-excerpt {
  color: var(--ink-600);
  font-size: .96rem;
  margin: 0 0 .75rem;
  line-height: 1.5;
}
.post-card-more {
  color: var(--teal-700);
  font-weight: 700;
  font-size: .92rem;
}

/* Pagination */
.post-pagination { margin-top: 2.5rem; text-align: center; }
.post-pagination .nav-links { display: inline-flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.post-pagination a, .post-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: .55rem .85rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  transition: border-color .15s ease, color .15s ease;
}
.post-pagination a:hover { border-color: var(--teal-700); color: var(--teal-700); }
.post-pagination .current {
  background: var(--teal-700);
  color: #fff;
  border-color: var(--teal-700);
}

/* Single post */
.post-hero h1 { max-width: 22ch; }
.post-hero .post-meta {
  display: inline-flex; flex-wrap: wrap; gap: .25rem;
  font-size: .9rem; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  margin-bottom: 1rem;
}
.post-hero .post-meta a { color: var(--teal-700); }
.post-featured {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.post-featured img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.post-article { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.post-content { font-size: 1.08rem; line-height: 1.7; color: var(--ink-700); }
.post-content h2 { font-size: 1.7rem; margin: 2rem 0 .75rem; color: var(--ink-900); }
.post-content h3 { font-size: 1.3rem; margin: 1.5rem 0 .5rem; color: var(--ink-900); }
.post-content h4 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; color: var(--ink-900); }
.post-content p { margin: 0 0 1.1em; }
.post-content ul, .post-content ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.post-content li { margin: .35em 0; }
.post-content a { color: var(--teal-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.post-content a:hover { color: var(--teal-900); }
.post-content blockquote {
  border-left: 3px solid var(--teal-600);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 1.15rem;
  color: var(--ink-900);
  font-style: italic;
}
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 1.25rem 0;
}
.post-content code {
  background: var(--ink-100);
  padding: .15rem .4rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .92em;
}
.post-content pre {
  background: var(--ink-950);
  color: var(--ink-100);
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: .92rem;
}
.post-content pre code { background: transparent; padding: 0; color: inherit; }
.post-content hr { border: 0; border-top: 1px solid var(--ink-200); margin: 2.25rem 0; }

.post-tags {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-200);
  font-size: .9rem;
  color: var(--ink-500);
}
.post-tags a {
  display: inline-block;
  margin: 0 .25rem .35rem 0;
  padding: .3rem .7rem;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  color: var(--ink-700);
  text-decoration: none;
  font-weight: 500;
}
.post-tags a:hover { background: var(--teal-50); color: var(--teal-700); }

.post-comments { margin-top: 2rem; }
.post-comments .comments-title { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 105% -10%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(800px 360px at -10% 110%, rgba(13,148,136,.10), transparent 60%),
    linear-gradient(180deg, #FFF 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--ink-200);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 30%, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 70% 30%, #000 30%, transparent 70%);
  pointer-events: none;
  opacity: .55;
}
.hero-grid {
  position: relative;
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.hero h1 { max-width: 16ch; margin-bottom: 1.25rem; }
.hero h1 .accent { color: var(--teal-700); }
.hero .lede { max-width: 56ch; font-size: 1.18rem; color: var(--ink-700); margin-bottom: .75rem; }
.hero .hero-support {
  max-width: 60ch;
  font-size: .98rem;
  color: var(--ink-500);
  font-style: italic;
  margin: 0 0 1.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--teal-100);
}
.hero-ctas { margin-bottom: 1.75rem; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  font-size: .92rem; color: var(--ink-700);
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust .icon { color: var(--teal-700); width: 18px; height: 18px; }

/* hero stat panel */
.stat-panel {
  background: linear-gradient(180deg, #fff 0%, var(--teal-50) 100%);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-3);
  position: relative;
}
.stat-panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(20,184,166,.4), transparent 50%);
  z-index: -1; filter: blur(16px); opacity: .35;
}
.stat-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--ink-500);
  margin-bottom: 1rem;
}
.stat-panel-head .open-pill { font-size: .72rem; padding: .25rem .55rem; }
.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1.25rem;
}
.stat-tile {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: 1rem;
}
.stat-tile .num {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  line-height: 1;
}
.stat-tile .num .star { color: var(--gold-500); width: 22px; height: 22px; }
.stat-tile .label { font-size: .85rem; color: var(--ink-600); margin-top: .35rem; }

.next-window {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  background: var(--ink-950);
  color: #fff;
  border-radius: var(--r-md);
  font-size: .9rem;
}
.next-window .icon { color: var(--teal-400); }
.next-window strong { color: #fff; }

/* ---------- Symptom selector ---------- */
.symptoms-section { padding-top: clamp(3rem, 5vw, 5rem); }
.symptoms-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.symptoms-head h2 { max-width: 18ch; margin: 0; }
.symptoms-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(4, 1fr);
}
.symptom {
  display: flex; flex-direction: column; gap: .65rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  color: var(--ink-900);
  font-weight: 600;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  position: relative;
  min-height: 110px;
}
.symptom:hover {
  border-color: var(--teal-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: var(--ink-900);
}
.symptom .icon { width: 26px; height: 26px; color: var(--teal-700); }
.symptom-arrow {
  position: absolute; right: 1rem; bottom: 1rem;
  color: var(--ink-300);
  transition: color .15s ease, transform .15s ease;
}
.symptom:hover .symptom-arrow { color: var(--teal-700); transform: translateX(2px); }

/* ---------- Process timeline ---------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-200, #99F6E4), var(--teal-600), var(--teal-200, #99F6E4));
  background: linear-gradient(90deg, rgba(20,184,166,.2), rgba(13,148,136,.7), rgba(20,184,166,.2));
  z-index: 0;
}
.t-step { position: relative; z-index: 1; text-align: center; padding: 0 .5rem; }
.t-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: #fff;
  border: 2px solid var(--teal-600);
  border-radius: 50%;
  color: var(--teal-700);
  margin-bottom: 1rem;
  box-shadow: 0 6px 18px -8px rgba(13,148,136,.5);
}
.t-bubble .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.t-step h3 { font-size: 1rem; margin-bottom: .35rem; letter-spacing: -0.01em; }
.t-step p { font-size: .92rem; color: var(--ink-600); margin: 0; }

/* ---------- Repair-or-replace (dark) ---------- */
.rr-section {
  position: relative;
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(700px 360px at -10% 120%, rgba(13,148,136,.12), transparent 60%),
    var(--ink-950);
  color: var(--ink-100);
}
.rr-section h2 { color: #fff; max-width: 22ch; }
.rr-section .lede { color: rgba(255,255,255,.7); max-width: 60ch; }
.rr-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.5rem;
}
.rr-grid.rr-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .rr-grid.rr-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rr-grid.rr-grid-4 { grid-template-columns: 1fr; } }
.rr-grid.rr-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px)  { .rr-grid.rr-grid-3 { grid-template-columns: 1fr; } }
.rr-card p { color: rgba(255,255,255,.78); margin: 0; font-size: .96rem; line-height: 1.55; }
.rr-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  position: relative;
}
.rr-card.is-best { border-color: rgba(20,184,166,.5); background: linear-gradient(180deg, rgba(20,184,166,.10), rgba(20,184,166,.04)); }
.rr-card .tag {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: .35rem .65rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  margin-bottom: 1rem;
}
.rr-card.is-best .tag { background: rgba(20,184,166,.18); color: var(--teal-400); }
.rr-card h3 { color: #fff; margin-bottom: .75rem; font-size: 1.25rem; }
.rr-card ul { list-style: none; padding: 0; margin: 0; }
.rr-card li { padding: .45rem 0 .45rem 1.6rem; position: relative; color: rgba(255,255,255,.78); font-size: .96rem; }
.rr-card li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 12px; height: 1.5px; background: var(--teal-400);
}

/* ---------- Bento services ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1rem;
}
.bento .tile {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: var(--ink-900);
}
.bento .tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
  border-color: var(--teal-500);
  text-decoration: none;
}
.bento .tile h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.bento .tile p { color: var(--ink-600); margin: 0; font-size: .96rem; }
.bento .tile .icon { width: 28px; height: 28px; color: var(--teal-700); }
.bento .tile .head { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem; font-weight: 700; color: var(--ink-900); }
.bento .tile .arrow { color: var(--ink-300); align-self: flex-end; transition: color .15s ease, transform .15s ease; }
.bento .tile:hover .arrow { color: var(--teal-700); transform: translateX(2px); }

.bento .tile.span-3 { grid-column: span 3; }
.bento .tile.span-2 { grid-column: span 2; }
.bento .tile.span-4 { grid-column: span 4; }
.bento .tile.feature {
  background:
    radial-gradient(420px 160px at 80% -10%, rgba(20,184,166,.18), transparent 60%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900));
  color: #fff;
  border-color: var(--ink-800);
}
.bento .tile.feature h3 { color: #fff; }
.bento .tile.feature p { color: rgba(255,255,255,.72); }
.bento .tile.feature .icon { color: var(--teal-400); }
.bento .tile.feature .head { color: #fff; }
.bento .tile.feature .arrow { color: rgba(255,255,255,.4); }
.bento .tile.feature:hover .arrow { color: var(--teal-400); }

/* ---------- "Answer comes before the invoice" callout card ---------- */
.exam-section { padding: clamp(3rem, 5vw, 5rem) 0; }
.exam-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.exam-left {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  color: #fff;
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
}
.exam-left::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,.35), transparent 60%);
}
.exam-left h2 { color: #fff; max-width: 18ch; }
.exam-left .price-block { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .5rem; }
.exam-left .price-block .dollar { font-size: 1.5rem; color: rgba(255,255,255,.6); font-weight: 600; vertical-align: super; line-height: 1; }
.exam-left .price-block .price-num {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 5rem);
  font-weight: 800; line-height: .9;
  letter-spacing: -0.05em; color: #fff;
}
.exam-left .price-block .price-suffix { color: rgba(255,255,255,.7); font-size: 1rem; font-weight: 600; }
.exam-left .lede { color: rgba(255,255,255,.78); }
.exam-left .ctas { margin-top: auto; display: flex; flex-wrap: wrap; gap: .65rem; padding-top: .75rem; }

.exam-right { padding: clamp(1.75rem, 3vw, 2.5rem); }
.exam-right h3 { font-size: 1.05rem; margin-bottom: 1rem; color: var(--ink-700); font-weight: 700; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.check-list li {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .45rem 0;
  color: var(--ink-700);
  font-size: .98rem;
}
.check-list li .icon { color: var(--teal-700); width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }

/* ---------- Stat banner ---------- */
.stat-banner {
  background:
    radial-gradient(700px 320px at 80% -20%, rgba(20,184,166,.35), transparent 60%),
    linear-gradient(180deg, var(--teal-900), var(--teal-800));
  color: #fff;
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}
.stat-banner-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  align-items: end;
}
.stat-banner-tile { text-align: left; }
.stat-banner-tile .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.stat-banner-tile .num .star { color: var(--gold-500); width: 26px; height: 26px; vertical-align: -.05em; margin-right: .25rem; }
.stat-banner-tile .label { color: rgba(255,255,255,.78); margin-top: .35rem; font-size: .95rem; }

/* ---------- Reviews CTA block ---------- */
.reviews-block {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.reviews-block .meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.reviews-block .stars { color: var(--gold-500); font-size: 1.25rem; letter-spacing: .15em; }
.reviews-block .meta .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}
.reviews-block .quote-cell {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
}
.reviews-block .quote-cell h3 { font-size: 1rem; color: var(--ink-700); margin-bottom: .5rem; }
.reviews-block .quote-cell p { color: var(--ink-600); margin: 0 0 1rem; font-size: .96rem; }

/* ---------- Local credibility ---------- */
.cred-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.cred-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.cred-points li { display: flex; gap: 1rem; align-items: flex-start; }
.cred-points .icon-bubble {
  width: 40px; height: 40px;
  background: var(--teal-50); border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--teal-700); flex: 0 0 auto;
}
.cred-points strong { color: var(--ink-900); display: block; margin-bottom: .15rem; }
.cred-points span { color: var(--ink-600); font-size: .96rem; }

.visit-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
}
.visit-card h3 { font-size: 1.05rem; }
.visit-card .pair { display: flex; gap: .65rem; padding: .5rem 0; color: var(--ink-700); }
.visit-card .pair-headline {
  background: linear-gradient(135deg, var(--teal-50) 0%, #fff 100%);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  margin: 0 0 .5rem;
}
.visit-card .pair-headline strong { color: var(--teal-900); }
.visit-card .pair-headline .icon { color: var(--teal-700); }
.visit-card .pair .icon { color: var(--teal-700); width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.visit-card .pair strong { color: var(--ink-900); display: block; margin-bottom: .1rem; }
.visit-card .pair span { font-size: .94rem; }

.map-block {
  margin-top: 1rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--ink-200);
  aspect-ratio: 16/9;
  background: var(--ink-100);
}
.map-block iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .5rem; }
.faq details {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
}
.faq summary {
  font-weight: 700; color: var(--ink-900); cursor: pointer;
  list-style: none; position: relative; padding-right: 2rem;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 14px no-repeat;
  color: var(--teal-700);
  transform: translateY(-50%) rotate(0deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: .65rem 0 0; color: var(--ink-600); }

/* ---------- Final dark CTA ---------- */
.final-cta {
  background:
    radial-gradient(1100px 500px at 50% -30%, rgba(20,184,166,.32), transparent 65%),
    var(--ink-950);
  color: #fff; padding: clamp(3.5rem, 6vw, 5rem) 0;
  text-align: center;
}
.final-cta h2 { color: #fff; max-width: 22ch; margin-left: auto; margin-right: auto; }
.final-cta .lede { color: rgba(255,255,255,.78); max-width: 60ch; margin: 1rem auto 1.75rem; }
.final-cta .muted { color: rgba(255,255,255,.55); margin-top: 1rem; font-size: .92rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-950);
  color: rgba(255,255,255,.78);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer h4 { color: #fff; font-size: .95rem; margin: 0 0 .9rem; letter-spacing: -0.01em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .3rem 0; }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.site-footer .brand-name { color: #fff; }
.site-footer p { color: rgba(255,255,255,.65); font-size: .94rem; }
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-top: 1.5rem;
  font-size: .88rem; color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.6); }

/* ---------- Mobile call bar ---------- */
.mobile-call-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--ink-950); color: #fff;
  padding: .85rem 1rem;
  align-items: center; justify-content: center; gap: .6rem;
  font-weight: 700;
  z-index: 60;
  box-shadow: 0 -10px 24px rgba(0,0,0,.18);
  border-top: 1px solid var(--teal-700);
}
.mobile-call-bar:hover { color: #fff; text-decoration: none; }
.mobile-call-bar .icon { color: var(--teal-400); }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero {
  position: relative;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
  background:
    radial-gradient(900px 360px at 90% -10%, rgba(20,184,166,.16), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--ink-200);
}
.page-hero h1 { max-width: 22ch; }
.page-hero .lede { max-width: 60ch; color: var(--ink-700); font-size: 1.1rem; margin-bottom: 1.5rem; }
.bluf {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-1);
  margin-top: 1.5rem;
  color: var(--ink-700);
  font-size: .98rem;
}
.bluf strong { color: var(--ink-900); }

/* ---------- Generic prose ---------- */
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.5rem; color: var(--ink-900); font-weight: 700; }
.prose ul li { margin: .35rem 0; color: var(--ink-700); }
.prose ol li { margin: .35rem 0; color: var(--ink-700); }

/* ---------- Photo placeholders ---------- */
/*
 * Used as placeholders where a real photo will be swapped in.
 * To swap: replace the .photo-placeholder div with <img src="..." alt="...">
 * (or wrap it in an <img> with the same class; the placeholder will be hidden by default).
 *
 * Add aspect modifiers: .is-wide (16:9), .is-square (1:1), .is-tall (3:4), .is-ultrawide (21:9)
 */
.photo-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .65rem;
  aspect-ratio: 4/3;
  background:
    radial-gradient(420px 200px at 30% 20%, rgba(20,184,166,.18), transparent 60%),
    linear-gradient(135deg, var(--teal-50) 0%, var(--surface-2) 100%);
  border: 2px dashed var(--teal-600);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  color: var(--ink-700);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.photo-placeholder.is-wide { aspect-ratio: 16/9; }
.photo-placeholder.is-ultrawide { aspect-ratio: 21/9; }
.photo-placeholder.is-square { aspect-ratio: 1/1; }
.photo-placeholder.is-tall { aspect-ratio: 3/4; }
.photo-placeholder.is-portrait { aspect-ratio: 4/5; }
.photo-placeholder.on-dark {
  background:
    radial-gradient(420px 200px at 30% 20%, rgba(20,184,166,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-color: rgba(20,184,166,.5);
  color: rgba(255,255,255,.85);
}
.photo-placeholder .ph-icon {
  width: 44px; height: 44px;
  color: var(--teal-700);
  opacity: .85;
}
.photo-placeholder.on-dark .ph-icon { color: var(--teal-400); }
.photo-placeholder .ph-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--teal-700);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .65rem;
  border-radius: var(--r-pill);
}
.photo-placeholder .ph-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-900);
  margin: 0;
  max-width: 28ch;
}
.photo-placeholder.on-dark .ph-label { color: #fff; }
.photo-placeholder .ph-hint {
  font-size: .82rem;
  color: var(--ink-500);
  margin: 0;
  font-weight: 500;
  max-width: 32ch;
  line-height: 1.4;
}
.photo-placeholder.on-dark .ph-hint { color: rgba(255,255,255,.65); }
.photo-placeholder .ph-dim {
  position: absolute;
  bottom: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-400);
  background: rgba(255,255,255,.7);
  padding: .15rem .5rem;
  border-radius: 4px;
}
.photo-placeholder.on-dark .ph-dim {
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.25);
}

/* Real photo when swapped in — same shape as placeholder */
.trust-photo,
.section-photo,
.hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: 60% 45%;        /* default: favors the technician + bench, crops edge clutter */
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  filter: brightness(1.06) contrast(1.03) saturate(1.04); /* subtle lift */
  background: var(--surface-2);
}
.hero-photo {
  object-position: center 50%;     /* hero counter shot — keep both subjects + branding visible */
}
.section-photo.is-wide { aspect-ratio: 16/9; }
.section-photo.is-ultrawide { aspect-ratio: 21/9; }
.section-photo.is-portrait { aspect-ratio: 4/5; }

/* Photo frame: shows <img> by default; if image fails to load, JS adds .is-missing
 * which hides the img and reveals a placeholder figcaption telling you what to put there.
 */
.photo-frame {
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}
.photo-frame .photo-frame-fallback { display: none; }
.photo-frame.is-missing img { display: none; }
.photo-frame.is-missing .photo-frame-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  aspect-ratio: 16/10;
  background:
    radial-gradient(420px 200px at 30% 20%, rgba(20,184,166,.18), transparent 60%),
    linear-gradient(135deg, var(--teal-50) 0%, var(--surface-2) 100%);
  border: 2px dashed var(--teal-600);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  text-align: center;
  position: relative;
}
.photo-frame .photo-frame-fallback .ph-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--teal-700); color: #fff;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .65rem; border-radius: var(--r-pill);
}
.photo-frame .photo-frame-fallback .ph-icon { width: 44px; height: 44px; color: var(--teal-700); opacity: .85; }
.photo-frame .photo-frame-fallback .ph-label { font-weight: 700; font-size: 1rem; color: var(--ink-900); margin: 0; }
.photo-frame .photo-frame-fallback .ph-label code { background: rgba(20,184,166,.12); padding: .15rem .4rem; border-radius: 4px; font-family: var(--font-mono); font-size: .9em; }
.photo-frame .photo-frame-fallback .ph-hint { font-size: .82rem; color: var(--ink-500); margin: 0; max-width: 36ch; line-height: 1.4; }

/* Photo-frame variants */
.photo-frame.photo-frame-grid {
  aspect-ratio: 1/1;
}
.photo-frame.photo-frame-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-md);
  display: block;
  filter: brightness(1.04) contrast(1.02);
  box-shadow: var(--shadow-1);
}
.photo-frame.photo-frame-grid.is-missing .photo-frame-fallback {
  aspect-ratio: 1/1;
  padding: 1rem;
  border-radius: var(--r-md);
  border-width: 1.5px;
}
.photo-frame.photo-frame-grid .photo-frame-fallback .ph-icon { width: 28px; height: 28px; }
.photo-frame.photo-frame-grid .photo-frame-fallback .ph-tag { font-size: .58rem; padding: .2rem .45rem; top: 8px; left: 8px; }
.photo-frame.photo-frame-grid .photo-frame-fallback .ph-label { font-size: .82rem; }
.photo-frame.photo-frame-grid .photo-frame-fallback .ph-hint { display: none; }

/* Photo-frame ultrawide variant for arrival hero on Contact page */
.photo-frame.photo-frame-arrival img {
  aspect-ratio: 21/9;
  object-fit: cover;
  object-position: center 60%;
  border-radius: var(--r-lg);
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(1.04) contrast(1.03) saturate(1.04);
  box-shadow: var(--shadow-2);
}
.photo-frame.photo-frame-arrival.is-missing .photo-frame-fallback {
  aspect-ratio: 21/9;
}

/* ===== Hide dev-time photo placeholder text on the live site =====
   These .ph-label / .ph-hint / .ph-tag lines were placeholders during the
   build to remind the team to upload a real photo. They should never be
   visible to customers — even on image load failure, only the icon shows. */
.photo-frame-fallback .ph-tag,
.photo-frame-fallback .ph-label,
.photo-frame-fallback .ph-hint { display: none !important; }

/* ===== Problem cards (homepage — directly under hero, conversion-first) ===== */
.problem-cards-section { padding-top: 0; }
.problem-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.problem-card {
  background: #fff;
  border: 1px solid var(--ink-100, #e2e8f0);
  border-radius: 14px;
  padding: 1.25rem 1.35rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.04);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.problem-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.08); border-color: var(--teal-200, #99F6E4); }
.problem-card .head {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  color: var(--ink-900, #0b1220);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.problem-card .head a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.problem-card .head a:hover { color: var(--teal-700, #0F766E); }
.problem-card .head svg.icon { width: 22px; height: 22px; color: var(--teal-700, #0F766E); flex-shrink: 0; }
.problem-card p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-700, #334155); }
.problem-card .mini-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  font-size: .92rem;
  font-weight: 700;
  color: var(--teal-700, #0F766E);
  text-decoration: none;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: var(--teal-50, #f0fdfa);
  border: 1px solid var(--teal-200, #99F6E4);
  transition: background .15s ease, color .15s ease;
}
.problem-card .mini-cta:hover { background: var(--teal-700, #0F766E); color: #fff; }
.problem-card .mini-cta svg.icon { width: 14px; height: 14px; }
@media (max-width: 880px) {
  .problem-cards { grid-template-columns: 1fr; }
}

/* ===== Edge-cases section (homepage callout) ===== */
.edge-cases {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  background: linear-gradient(135deg, var(--surface-2, #f4f7fa) 0%, var(--surface-3, #eaf0f4) 100%);
  border-radius: var(--r-lg, 18px);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--ink-100, #e2e8f0);
}
.edge-cases-copy h2 { max-width: 18ch; }
.edge-cases-copy .big-text { margin: .75rem 0 1rem; }
.edge-cases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.edge-cases-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-800, #0b1220);
  background: #fff;
  padding: .65rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--ink-100, #e2e8f0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.edge-cases-list svg.icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--teal-700, #0F766E);
  margin-top: .2rem;
}
@media (max-width: 880px) {
  .edge-cases { grid-template-columns: 1fr; }
  .edge-cases-copy h2 { max-width: none; }
}

/* photo grid (used for location photos in the visit card) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: 0 0 1rem;
}
.photo-grid .photo-placeholder {
  aspect-ratio: 1/1;
  padding: 1rem;
  border-radius: var(--r-md);
  border-width: 1.5px;
  overflow: hidden;
}
.photo-grid .photo-placeholder .ph-icon { width: 28px; height: 28px; }
.photo-grid .photo-placeholder .ph-tag { font-size: .58rem; padding: .2rem .45rem; top: 8px; left: 8px; }
.photo-grid .photo-placeholder .ph-label { font-size: .82rem; font-weight: 700; }
.photo-grid .photo-placeholder .ph-hint { display: none; }
.photo-grid .photo-placeholder .ph-dim { display: none; }

/* When a photo is dropped in via .ph-swap, it covers the placeholder text */
.photo-placeholder .ph-swap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 2;
  filter: brightness(1.04) contrast(1.02);
}
.photo-placeholder { position: relative; } /* ensure absolute positioning context */

/* ---------- Pricing rows ---------- */
.price-list {
  list-style: none; padding: 0; margin: 1rem 0;
  display: grid; gap: .35rem;
}
.price-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: .97rem;
}
.price-list .price { color: var(--teal-700); font-weight: 800; }

/* ---------- Contact form ---------- */
.contact-form {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-1);
}
.contact-form .row { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.contact-form .field { display: block; margin: 0 0 .9rem; }
.contact-form label { display: block; font-weight: 600; color: var(--ink-700); margin-bottom: .25rem; font-size: .92rem; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--ink-300);
  border-radius: var(--r-md); font: inherit; color: var(--ink-900); background: #fff;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 2px solid var(--teal-500); outline-offset: 1px; border-color: var(--teal-500);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .tile.span-3 { grid-column: span 2; }
  .bento .tile.span-4 { grid-column: span 4; }
  .stat-banner-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 980px) {
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .open-pill { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .stat-panel { max-width: 520px; }
  .symptoms-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline::before { display: none; }
  .rr-grid { grid-template-columns: 1fr; }
  .exam-card { grid-template-columns: 1fr; }
  .reviews-block { grid-template-columns: 1fr; }
  .cred-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .tile.span-2, .bento .tile.span-3, .bento .tile.span-4 { grid-column: span 2; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .timeline { grid-template-columns: 1fr; }
  .symptoms-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-phone { display: none; }
  .mobile-call-bar { display: inline-flex; }
  body.has-sticky-call { padding-bottom: 4rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-banner-grid { grid-template-columns: 1fr 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento .tile.span-2, .bento .tile.span-3, .bento .tile.span-4 { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   v2.20 — Visual polish pass.
   Layered on top of the existing structure. No markup changes —
   every rule below uses selectors that target existing elements.
   Goal: elevate from "clean" to "real tech brand."
   ========================================================= */

/* ---------- Atmospheric backdrops ---------- */

/* Hero — soft radial glow + subtle grid pattern in the background.
   Sets the tech-shop tone immediately without overwhelming. */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 800px 600px at 85% -10%, rgba(20, 184, 166, 0.10), transparent 55%),
    radial-gradient(ellipse 600px 400px at 10% 100%, rgba(13, 148, 136, 0.06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 118, 110, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 70%);
          mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

/* Dark sections — richer gradient + subtle dot grid */
.section-dark,
.rr-section {
  position: relative;
  background:
    radial-gradient(ellipse 1000px 500px at 50% 0%, rgba(20, 184, 166, 0.18), transparent 60%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  color: #fff;
  overflow: hidden;
}
.section-dark::before,
.rr-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  opacity: 0.5;
  pointer-events: none;
}
.section-dark > .container,
.rr-section > .container { position: relative; z-index: 1; }

/* ---------- Premium buttons ---------- */

.btn { transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), background .18s ease; }

.btn-primary {
  background: linear-gradient(180deg, var(--teal-600) 0%, var(--teal-700) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 1px 2px rgba(15,23,42,.10),
    0 6px 16px -4px rgba(13,148,136,.35);
  border: 1px solid var(--teal-800);
  color: #fff;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 2px 4px rgba(15,23,42,.12),
    0 12px 28px -6px rgba(13,148,136,.50);
  background: linear-gradient(180deg, var(--teal-500) 0%, var(--teal-700) 100%);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: #fff;
  border: 1px solid var(--ink-200);
  color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.btn-secondary:hover {
  border-color: var(--teal-400);
  color: var(--teal-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(13,148,136,.18);
}

.btn-secondary.btn-on-dark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.btn-secondary.btn-on-dark:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.40);
}

/* ---------- Cards: multi-layer shadow, accent border on hover ---------- */

.tile,
.rr-card,
.problem-card,
.review-card,
.price-card {
  position: relative;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .18s ease;
}
.tile:hover,
.problem-card:hover,
.review-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(15,23,42,.04),
    0 12px 32px -6px rgba(13,148,136,.18),
    0 24px 48px -16px rgba(15,23,42,.10);
}

/* Dark rr-cards — softer glass-like treatment */
.rr-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.rr-card:hover {
  border-color: rgba(45, 212, 191, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.4);
}
.rr-card.is-best {
  background: linear-gradient(180deg, rgba(20,184,166,.12), rgba(13,148,136,.04));
  border: 1px solid rgba(45,212,191,.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 20px 60px -20px rgba(13,148,136,.45);
}
.rr-card .tag {
  display: inline-block;
  padding: .3rem .65rem;
  background: rgba(20,184,166,.15);
  color: var(--teal-400);
  border: 1px solid rgba(45,212,191,.25);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .85rem;
}

/* ---------- Hero photo frame: tech-edge corners ---------- */

.hero-visual .photo-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 30px 80px -30px rgba(13,148,136,.35),
    0 12px 32px -8px rgba(15,23,42,.18);
}
.hero-visual .photo-frame::before,
.hero-visual .photo-frame::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--teal-400);
  pointer-events: none;
  z-index: 2;
}
.hero-visual .photo-frame::before {
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}
.hero-visual .photo-frame::after {
  bottom: 14px;
  right: 14px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}
.hero-photo {
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.hero-visual .photo-frame:hover .hero-photo { transform: scale(1.02); }

/* ---------- Open-pill: tech status indicator ---------- */

.open-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  background: linear-gradient(180deg, rgba(20,184,166,.10), rgba(20,184,166,.04));
  border: 1px solid rgba(45,212,191,.30);
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal-700);
  letter-spacing: .01em;
  white-space: nowrap;
}
.open-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55);
  animation: pulse-dot 2s cubic-bezier(.4,0,.2,1) infinite;
  flex-shrink: 0;
}
.open-pill.is-closed {
  background: linear-gradient(180deg, rgba(248,113,113,.08), rgba(248,113,113,.04));
  border-color: rgba(248,113,113,.35);
  color: #b91c1c;
}
.open-pill.is-closed .dot {
  background: #ef4444;
  animation: none;
  box-shadow: 0 0 8px rgba(248,113,113,.4);
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(20, 184, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

/* ---------- Stat banner: bigger, glowy numbers ---------- */

.stat-banner {
  background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-700) 50%, var(--teal-600) 100%);
  position: relative;
  overflow: hidden;
}
.stat-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 100%, rgba(255,255,255,.15), transparent 50%),
    radial-gradient(circle at 80% 0%, rgba(20,184,166,.30), transparent 50%);
  pointer-events: none;
}
.stat-banner > .container { position: relative; z-index: 1; }
.stat-banner-tile {
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.stat-banner-tile .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.20);
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.stat-banner-tile .num .icon { width: 32px; height: 32px; vertical-align: middle; }
.stat-banner-tile .num .star { color: var(--gold-500); filter: drop-shadow(0 0 8px rgba(245,158,11,.6)); }
.stat-banner-tile .label {
  font-size: .92rem;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
}

/* ---------- Section heads: tech treatment ---------- */

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-700);
  position: relative;
  padding-left: 28px;
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-700));
  border-radius: 2px;
  transform: translateY(-50%);
}
.eyebrow.on-dark {
  color: var(--teal-400);
}
.eyebrow.on-dark::before {
  background: linear-gradient(90deg, var(--teal-400), transparent);
}

/* Headline: tighter tracking on h1/h2 */
h1, h2 { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h1 .accent {
  background: linear-gradient(180deg, var(--teal-600), var(--teal-700));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--teal-700); /* fallback */
}

/* ---------- Trust strip / hero-trust: status-chip look ---------- */

.hero-trust { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1.5rem; }
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-700);
}
.hero-trust .icon { width: 14px; height: 14px; color: var(--teal-700); }

/* ---------- Symptoms grid: card hover lift + arrow slide ---------- */

.symptom {
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.symptom:hover {
  border-color: var(--teal-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(13,148,136,.25);
}
.symptom .symptom-arrow { transition: transform .18s ease; }
.symptom:hover .symptom-arrow { transform: translateX(4px); color: var(--teal-600); }

/* ---------- Bento services: feature tile glow ---------- */

.bento .tile {
  position: relative;
  overflow: hidden;
}
.bento .tile.feature {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: #fff;
  border: 1px solid rgba(45,212,191,.25);
}
.bento .tile.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(20,184,166,.25), transparent 50%);
  pointer-events: none;
}
.bento .tile.feature .head,
.bento .tile.feature p,
.bento .tile.feature .arrow { position: relative; }
.bento .tile .arrow { color: var(--teal-600); transition: transform .2s ease; }
.bento .tile:hover .arrow { transform: translate(2px, -2px); }
.bento .tile.feature .arrow { color: var(--teal-400); }

/* ---------- Edge-cases section: punchier visual ---------- */

.edge-cases {
  background: linear-gradient(135deg, #fff 0%, var(--teal-50) 100%);
  border: 1px solid var(--teal-100);
  border-left: 4px solid var(--teal-600);
  position: relative;
  overflow: hidden;
}
.edge-cases::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(20,184,166,.10), transparent 70%);
  pointer-events: none;
}
.edge-cases-list li {
  transition: transform .15s ease, border-color .15s ease;
}
.edge-cases-list li:hover {
  transform: translateX(3px);
  border-color: var(--teal-400);
}

/* ---------- Exam-section "answer comes before the invoice" callout ---------- */

.exam-card {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(45,212,191,.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 40px 80px -30px rgba(13,148,136,.30),
    0 24px 48px -16px rgba(15,23,42,.40);
  overflow: hidden;
  position: relative;
}
.exam-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 100%, rgba(20,184,166,.20), transparent 50%);
  pointer-events: none;
}
.exam-left { position: relative; z-index: 1; }
.exam-right {
  background: #fff;
  position: relative;
  z-index: 1;
}

/* ---------- Final CTA section: gradient + glow ---------- */

.final-cta {
  position: relative;
  background:
    radial-gradient(ellipse 800px 400px at 50% 100%, rgba(20,184,166,.35), transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  color: #fff;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity: .5;
  pointer-events: none;
}
.final-cta > .container { position: relative; z-index: 1; }
.final-cta h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  background: linear-gradient(180deg, #fff, #cbd5e1);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Trust strip: status-chip look ---------- */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  padding: 0;
  list-style: none;
  margin: 1.25rem 0 0;
}
.trust-strip li {
  padding: .5rem 1rem;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: var(--r-pill);
  font-size: .88rem;
  color: var(--ink-700);
}
.trust-strip li strong { color: var(--teal-700); }

/* ---------- Page hero: subtle backdrop ---------- */

.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse 700px 400px at 50% -20%, rgba(20, 184, 166, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,118,110,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center top, #000, transparent 75%);
          mask-image: radial-gradient(ellipse at center top, #000, transparent 75%);
  opacity: .55;
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }

/* ---------- Reveal-on-scroll polish ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Focus states (accessibility + polish) ---------- */

:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible {
  outline-offset: 4px;
}

/* ---------- Section divider — subtle gradient line ---------- */

.section + .section,
.section + .section-light,
.section + .section-dark {
  position: relative;
}
.section + .section::before,
.section + .section-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 800px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-200) 30%, var(--ink-200) 70%, transparent);
  opacity: .6;
}

/* ---------- Mobile call bar: floating glow ---------- */

.mobile-call-bar {
  background: linear-gradient(180deg, var(--teal-600), var(--teal-700));
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -4px 16px -4px rgba(13,148,136,.40),
    0 -8px 24px -8px rgba(15,23,42,.25);
}

/* ---------- Footer polish ---------- */

.site-footer {
  background:
    radial-gradient(ellipse 1200px 400px at 50% 0%, rgba(20,184,166,.12), transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  color: #d1d5db;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal-500) 50%, transparent);
  opacity: .45;
}
.site-footer h4 {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}
.site-footer a { color: #cbd5e1; transition: color .15s ease; }
.site-footer a:hover { color: var(--teal-400); }

/* ---------- Header polish ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
          backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(15, 118, 110, 0.08);
  box-shadow: 0 1px 0 rgba(15, 118, 110, 0.04);
}

/* ---------- "Walk-in today" little pill in hero ---------- */

.next-window {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem 1rem;
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.88));
  border: 1px solid rgba(45,212,191,.25);
  border-radius: var(--r-md);
  color: #fff;
  font-size: .9rem;
  box-shadow: 0 8px 20px -6px rgba(15,23,42,.25);
}
.next-window .icon { color: var(--teal-400); flex-shrink: 0; }

/* Screen-reader-only text utility — used to inject punctuation/spacing between
   inline elements that Google's snippet extractor concatenates without spaces.
   The result: search engines + screen readers get clean separated text;
   sighted users see no visual change. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hero owner attribution — sits above the H1, small and grounded. */
.hero-owner-line {
  font-size: .95rem;
  font-weight: 600;
  color: var(--teal-700);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: .35rem 0 0;
}

/* Hero extended-hours callout — Wed/Fri are the new customer-facing benefit,
   so this gets its own line and a subtle badge treatment (amber pill on a
   light amber ground) so it reads as a promise, not fine print. Small clock
   icon leads it to reinforce the "hours" meaning at a glance. */
.hero-hours-line {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .95rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid #fde68a;
  margin: .55rem 0 0;
}
.hero-hours-line .icon {
  width: 1em;
  height: 1em;
  color: #b45309;
}
@media (prefers-color-scheme: dark) {
  .hero-hours-line {
    color: #fde68a;
    background: rgba(120,53,15,.35);
    border-color: rgba(180,83,9,.55);
  }
  .hero-hours-line .icon { color: #fbbf24; }
}

/* Tertiary CTA style — for the third hero button (Start Free Triage).
   Less visual weight than primary/secondary so a three-button row does
   not read as a color competition. Ghosted, underline on hover. */
.btn-tertiary {
  background: transparent;
  color: var(--ink-800);
  border: 1px solid transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: .35em;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.btn-tertiary:hover,
.btn-tertiary:focus-visible {
  color: var(--teal-700);
  text-decoration-color: var(--teal-600);
}

/* =========================================================
   "What repairs cost" pricing block. Two visual jobs: (1) reassure
   the caller that asking and looking cost nothing, (2) anchor a
   price range so they have a rough number before they call. Both
   promises live in the highlight card. Plain sentences underneath,
   no table, no per-service prices anywhere (a range plus a phone
   quote is the mechanism, not a menu).
   ========================================================= */
.pricing-band {
  background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}
.pricing-band h2 {
  max-width: 22ch;
  margin-bottom: 1.5rem;
}
/* Intro paragraph — sits between the heading and the anchor card. The
   "you owe us nothing" clause is bolded inside the paragraph to prevent
   it from getting skimmed past. */
.pricing-band .pricing-intro {
  margin-top: .5rem;
  margin-bottom: 1.5rem;
}

/* Anchor card — top row holds two "Free" promises (Free to ask / Free to
   look). Bottom row holds the price range ($179 to $249). Rows divided by
   a hairline so the free promises read as one paired declaration and the
   range reads as the numerical anchor. The "Free" word in each promise is
   the emotional hero of the top row; the price range is the numerical
   hero of the bottom row. */
.pricing-anchor {
  display: block;
  padding: 1.15rem 1.5rem;
  margin: 0 0 1.75rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-left: 4px solid var(--teal-600);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.pricing-anchor-row {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .3rem 0;
}
.pricing-anchor-row.pricing-anchor-promises {
  gap: 1.5rem 2rem;
  padding-bottom: .55rem;
}
.pricing-anchor-rule {
  height: 1px;
  background: var(--ink-200);
  margin: .15rem 0;
}

/* Free-promise phrase — the "to ask." / "to look." text sits at a
   comfortable body size; the "Free" word inside is the emphasis. */
.pricing-anchor-promise {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-size: 1.15rem;
  color: var(--ink-700);
  font-weight: 500;
  line-height: 1.2;
}
.pricing-anchor-key {
  color: var(--teal-700);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.pricing-anchor-label {
  font-size: 1.05rem;
  color: var(--ink-600);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.pricing-anchor-number {
  font-size: clamp(2.2rem, 4.8vw, 3.1rem);
  line-height: 1;
  font-weight: 800;
  color: var(--teal-700);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Highlight callout — the $99 credited-toward-repair sentence. */
.pricing-band .pricing-hook {
  padding: 1rem 1.25rem;
  background: rgba(20,184,166,.08);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--r-sm);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Closing line — "Once you approve a price, that price does not move."
   Given a touch more weight than a normal paragraph so it lands. */
.pricing-band .pricing-close {
  font-size: 1.1rem;
  color: var(--ink-900);
  padding: .5rem 0;
  border-top: 1px solid var(--ink-200);
  margin-top: 1.25rem;
}

@media (max-width: 640px) {
  .pricing-anchor {
    padding: 1rem 1.15rem;
  }
  .pricing-anchor-row {
    gap: .5rem;
  }
}

/* =========================================================
   v3 — Major visual transformation.
   Real display font · dark hero · dramatic typography ·
   neon teal accents · floating geometry · serious presence.
   Overrides earlier rules where needed.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html, body {
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* ============================================================
   HERO — full dark slab with massive type and neon teal accents
   ============================================================ */

.hero {
  background:
    radial-gradient(ellipse 1200px 800px at 80% 20%, rgba(20,184,166,.18), transparent 55%),
    radial-gradient(ellipse 800px 600px at 10% 90%, rgba(13,148,136,.12), transparent 60%),
    linear-gradient(160deg, #050B1A 0%, #0B1426 50%, #060D1C 100%) !important;
  color: #fff !important;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 10vw, 8rem) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,212,191,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 100%);
  opacity: .7;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(20,184,166,.35), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: float-blob 14s ease-in-out infinite;
}
@keyframes float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 30px) scale(1.1); }
}

.hero .container { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--teal-400) !important; }
.hero .eyebrow::before { background: linear-gradient(90deg, var(--teal-400), transparent) !important; }

.hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 5.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 1.5rem !important;
  max-width: 22ch;
}
.hero h1 .accent {
  /* All bright tints — was running from #5EEAD4 to #14B8A6 (dark teal-500)
     which got swallowed by the navy hero background on mobile night mode.
     New stops stay in the mint-200 → teal-400 range so the bottom of the
     gradient is still readable against #050B1A. */
  background: linear-gradient(135deg, #CCFBF1 0%, #99F6E4 35%, #5EEAD4 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #5EEAD4 !important; /* solid mint fallback if background-clip fails */
  /* NO `filter` or `display:inline-block` — both break background-clip:text. */
}

.hero .lede {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.78) !important;
  max-width: 56ch;
  margin: 0 0 1.25rem !important;
}
.hero .hero-support {
  font-size: 1.02rem !important;
  color: rgba(94,234,212,.92) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: 52ch;
  margin: 0 0 1.75rem !important;
}

.hero .hero-trust span {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(94,234,212,.20) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: .85rem !important;
}
.hero .hero-trust .icon { color: var(--teal-400) !important; }

/* Hero photo frame on dark */
.hero .photo-frame {
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(45,212,191,.25),
    0 30px 80px -20px rgba(20,184,166,.40),
    0 80px 120px -40px rgba(0,0,0,.60) !important;
}
.hero .photo-frame::before,
.hero .photo-frame::after {
  border-color: var(--teal-400) !important;
  border-width: 2px !important;
  width: 36px !important;
  height: 36px !important;
}

/* Hero buttons */
.hero .btn-primary {
  font-size: 1.05rem !important;
  padding: 1rem 1.75rem !important;
  background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%) !important;
  border-color: var(--teal-500) !important;
  color: #042F2E !important;
  font-weight: 700 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.40) inset,
    0 2px 4px rgba(0,0,0,.10),
    0 14px 32px -6px rgba(45,212,191,.55),
    0 0 60px -10px rgba(94,234,212,.40) !important;
}
.hero .btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #5EEAD4 0%, #14B8A6 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.50) inset,
    0 4px 8px rgba(0,0,0,.15),
    0 20px 40px -6px rgba(45,212,191,.70),
    0 0 80px -10px rgba(94,234,212,.60) !important;
}
.hero .btn-secondary {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  padding: 1rem 1.75rem !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.hero .btn-secondary:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(94,234,212,.40) !important;
  color: var(--teal-400) !important;
}

/* "Walk-in today" pill in hero */
.hero .next-window {
  background: rgba(20,184,166,.10) !important;
  border: 1px solid rgba(94,234,212,.30) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.hero .next-window strong { color: var(--teal-400); }

/* ============================================================
   HEADER — dark when stuck to a dark hero. Still glass.
   ============================================================ */

.site-header {
  background: rgba(6, 13, 28, 0.82) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(94,234,212,.10) !important;
  box-shadow: 0 1px 0 rgba(94,234,212,.06) !important;
}
.site-header .brand-name { color: #fff !important; }
.primary-nav a { color: rgba(255,255,255,.80) !important; }
.primary-nav a:hover { color: var(--teal-400) !important; }
.header-phone { color: #fff !important; }
.header-phone:hover { color: var(--teal-400) !important; }
.menu-toggle { color: #fff !important; }

/* Open pill on dark header */
.site-header .open-pill {
  background: rgba(20,184,166,.12) !important;
  border-color: rgba(94,234,212,.30) !important;
  color: var(--teal-400) !important;
}
.site-header .open-pill.is-closed {
  background: rgba(248,113,113,.10) !important;
  border-color: rgba(248,113,113,.30) !important;
  color: #FCA5A5 !important;
}

/* ============================================================
   TYPOGRAPHY — display weight everywhere
   ============================================================ */

h1, h2, h3 { font-family: var(--font-display); }
h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; }
h3 { font-weight: 700; letter-spacing: -0.015em; }

.section h2 + .lede,
.section h2 + .section-sub { font-size: 1.1rem; color: var(--ink-600); max-width: 60ch; }

/* Display monospace for numbers and stats */
.stat-banner-tile .num,
.num,
.review-card .stars,
.meta .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ============================================================
   STAT BANNER — massive type, real glow
   ============================================================ */

.stat-banner {
  padding: clamp(3rem, 6vw, 5rem) 0 !important;
}
.stat-banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 880px) {
  .stat-banner-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-banner-tile .num {
  font-size: clamp(2.5rem, 5.5vw, 4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.75) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}
.stat-banner-tile .label {
  font-size: .98rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  max-width: 24ch;
  margin: 0 auto;
}

/* ============================================================
   PROBLEM CARDS — bigger, more dramatic
   ============================================================ */

.problem-cards-section { padding: clamp(2.5rem, 5vw, 4.5rem) 0 !important; margin-top: -1px; background: var(--bg); }
.problem-card {
  padding: 2rem 1.75rem 1.75rem !important;
  border: 1px solid var(--ink-100);
  border-radius: 20px !important;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 12px 32px -16px rgba(15,23,42,.10);
  position: relative;
  overflow: hidden;
}
.problem-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-700));
  opacity: 0;
  transition: opacity .2s ease;
}
.problem-card:hover::before { opacity: 1; }
.problem-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px rgba(15,23,42,.06),
    0 24px 48px -12px rgba(13,148,136,.18),
    0 40px 80px -20px rgba(15,23,42,.12);
  border-color: var(--teal-200);
}
.problem-card .head {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin-bottom: .5rem !important;
}
.problem-card .head svg.icon {
  width: 36px !important;
  height: 36px !important;
  padding: 7px;
  background: linear-gradient(135deg, var(--teal-50), var(--teal-100));
  color: var(--teal-700) !important;
  border-radius: 10px;
  flex-shrink: 0;
}
.problem-card p {
  font-size: 1.02rem !important;
  color: var(--ink-600);
  margin-bottom: 1rem !important;
}

/* ============================================================
   FOUR-CARD section — massive headline, glassmorphism cards
   ============================================================ */

.section-dark, .rr-section {
  padding: clamp(4rem, 8vw, 7rem) 0 !important;
}
.section-dark h2, .rr-section h2 {
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.1;
  color: #fff !important;
  max-width: 24ch;
  margin-bottom: 1.25rem !important;
}
.section-dark .lede, .rr-section .lede {
  color: rgba(255,255,255,.72) !important;
  font-size: 1.1rem !important;
  max-width: 56ch;
}
.rr-grid { gap: 1rem; margin-top: 2.5rem; }
.rr-card {
  padding: 1.75rem 1.5rem !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.rr-card h3 {
  font-size: 1.3rem !important;
  font-weight: 700;
  color: #fff !important;
  line-height: 1.25;
  margin: .25rem 0 .75rem !important;
}
.rr-card p { color: rgba(255,255,255,.72) !important; font-size: .98rem; line-height: 1.55; }
.rr-card .tag {
  background: rgba(20,184,166,.18) !important;
  border-color: rgba(94,234,212,.30) !important;
  color: var(--teal-400) !important;
}

/* ============================================================
   BENTO services — bigger, more visual
   ============================================================ */

.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.bento { gap: 1rem !important; }
.bento .tile {
  padding: 1.75rem 1.5rem !important;
  border-radius: 18px !important;
  border: 1px solid var(--ink-100);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.bento .tile .head {
  font-size: 1.3rem !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .5rem;
}
.bento .tile .head .icon-lg {
  width: 28px !important;
  height: 28px !important;
  padding: 8px;
  background: var(--teal-50);
  color: var(--teal-700);
  border-radius: 10px;
  flex-shrink: 0;
}
.bento .tile.feature {
  background: linear-gradient(135deg, #0B1426 0%, #060D1C 100%) !important;
  border: 1px solid rgba(94,234,212,.20) !important;
  color: #fff;
}
.bento .tile.feature::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(20,184,166,.30), transparent 50%);
  filter: blur(60px);
  pointer-events: none;
}
.bento .tile.feature .head .icon-lg {
  background: rgba(20,184,166,.20);
  color: var(--teal-400);
}
.bento .tile.feature p { color: rgba(255,255,255,.78); }
.bento .tile.feature .arrow { color: var(--teal-400); }

/* ============================================================
   "Answer comes before the invoice" exam-card — full presence
   ============================================================ */

.exam-section { padding: clamp(3rem, 6vw, 6rem) 0 !important; }
.exam-card {
  border-radius: 24px !important;
  border: 1px solid rgba(94,234,212,.25) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 60px 120px -40px rgba(20,184,166,.30),
    0 32px 64px -16px rgba(0,0,0,.50) !important;
}
.exam-card .exam-left h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  color: #fff !important;
  line-height: 1.1;
  margin-bottom: 1rem !important;
}
.exam-card .exam-left .lede {
  color: rgba(255,255,255,.78) !important;
  font-size: 1.08rem !important;
}

/* ============================================================
   FINAL CTA — full bleed dramatic
   ============================================================ */

.final-cta { padding: clamp(4rem, 8vw, 7rem) 0 !important; }
.final-cta h2 {
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  max-width: 24ch;
  margin: 0 auto 1.25rem !important;
}
.final-cta .lede {
  font-size: 1.15rem !important;
  color: rgba(255,255,255,.78) !important;
  max-width: 50ch;
  margin: 0 auto 2rem !important;
}
.final-cta .btn-primary {
  font-size: 1.1rem !important;
  padding: 1.1rem 2rem !important;
  background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%) !important;
  color: #042F2E !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.40) inset,
    0 14px 32px -6px rgba(45,212,191,.55),
    0 0 80px -10px rgba(94,234,212,.50) !important;
}

/* ============================================================
   FOOTER — dramatic, gradient top edge
   ============================================================ */

.site-footer { padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem) !important; }
.site-footer h4 { font-size: .8rem !important; }

/* ============================================================
   Smaller universal polish on existing rules
   ============================================================ */

.section-head h2 + .section-sub,
.section-head h2 + p { font-size: 1.05rem; color: var(--ink-600); }

.container { max-width: 1280px; padding: 0 clamp(1rem, 3vw, 2.5rem); }

/* Subtle scroll-prompt cursor on the hero */
.hero { cursor: default; }

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .hero .hero-trust { display: none; } /* hide trust chips on mobile to save space */
  .stat-banner-tile .num { font-size: clamp(2rem, 8vw, 3rem) !important; }
}

/* =========================================================
   v5.2 — Night-mode / dark-OS readability fix.
   Two things going wrong on mobile in night mode:
   1. Some browsers (Brave, Samsung Internet, Firefox) auto-darken
      pages on top of our already-dark hero, killing contrast.
   2. The 78% white-on-dark text was on the edge of WCAG even
      in good light — on a phone outdoors it's too dim.
   Fix: declare color-scheme so the browser leaves us alone,
   then bump text opacity across every dark surface.
   ========================================================= */

:root, html, body {
  color-scheme: light only;
}
html { background: #ffffff; }

/* Hero — sharper white text */
.hero .lede {
  color: rgba(255, 255, 255, 0.92) !important;
}
.hero .hero-support {
  color: #5EEAD4 !important;   /* solid mint instead of rgba — readable in any light */
  font-weight: 600 !important;
}
.hero .hero-support strong {
  color: #99F6E4 !important;
}
.hero .next-window {
  background: rgba(20, 184, 166, 0.18) !important;
  color: #ffffff !important;
}
.hero .next-window strong { color: #5EEAD4 !important; }
.hero .next-window span { color: rgba(255, 255, 255, 0.90) !important; }

/* Hero trust chips — sharper if they ever appear */
.hero .hero-trust span {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(94, 234, 212, 0.35) !important;
  color: #ffffff !important;
}

/* Hero buttons — make the dark-on-mint primary fully opaque */
.hero .btn-primary { color: #042F2E !important; }

/* Dark-section text bumps */
.section-dark, .rr-section, .section-dark *, .rr-section * {
  /* baseline color for any inherited text */
}
.section-dark h2, .rr-section h2 { color: #ffffff !important; }
.section-dark .lede,
.rr-section .lede {
  color: rgba(255, 255, 255, 0.88) !important;
}
.section-dark p,
.rr-section p {
  color: rgba(255, 255, 255, 0.86);
}
.rr-card h3 { color: #ffffff !important; }
.rr-card p { color: rgba(255, 255, 255, 0.85) !important; }
.rr-card .tag {
  background: rgba(20, 184, 166, 0.22) !important;
  border-color: rgba(94, 234, 212, 0.40) !important;
  color: #5EEAD4 !important;
}

/* Stat banner labels — bigger contrast */
.stat-banner-tile .label {
  color: rgba(255, 255, 255, 0.93) !important;
}

/* "Answer comes before the invoice" exam card */
.exam-card .exam-left .lede {
  color: rgba(255, 255, 255, 0.90) !important;
}
.exam-card .exam-left h2 { color: #ffffff !important; }

/* Final CTA */
.final-cta .lede { color: rgba(255, 255, 255, 0.90) !important; }
.final-cta .muted { color: rgba(255, 255, 255, 0.75) !important; }

/* Footer text */
.site-footer { color: #e5e7eb !important; }
.site-footer p { color: #d1d5db !important; }
.site-footer a { color: #e5e7eb !important; }
.site-footer a:hover { color: #5EEAD4 !important; }
.site-footer h4 { color: #ffffff !important; }
.site-footer .footer-bottom { color: rgba(255, 255, 255, 0.65) !important; }

/* Header on dark — keep contrast for nav */
.site-header .brand-name { color: #ffffff !important; }
.primary-nav a { color: rgba(255, 255, 255, 0.90) !important; }
.primary-nav a:hover { color: #5EEAD4 !important; }
.header-phone { color: #ffffff !important; }
.header-phone svg { color: #5EEAD4 !important; }

/* Open pill — high contrast on both states */
.site-header .open-pill {
  background: rgba(20, 184, 166, 0.18) !important;
  border-color: rgba(94, 234, 212, 0.45) !important;
  color: #5EEAD4 !important;
  font-weight: 700;
}
.site-header .open-pill.is-closed {
  background: rgba(248, 113, 113, 0.18) !important;
  border-color: rgba(252, 165, 165, 0.50) !important;
  color: #FCA5A5 !important;
}

/* Mobile-specific extra contrast pass — phones in night mode are the worst case */
@media (max-width: 768px) {
  .hero .lede { color: #ffffff !important; }
  .hero .hero-support { color: #99F6E4 !important; }
  .section-dark .lede,
  .rr-section .lede { color: #ffffff !important; }
  .rr-card p { color: rgba(255, 255, 255, 0.92) !important; }
  .rr-card h3 { color: #ffffff !important; }
  .stat-banner-tile .label { color: #ffffff !important; }
  .final-cta .lede { color: #ffffff !important; }
  .exam-card .exam-left .lede { color: #ffffff !important; }
  .site-footer p { color: #f1f5f9 !important; }
}

/* =========================================================
   v3.1 — ACTUAL motion: animated mesh hero, live terminal,
   marquee, 3D tilt cards, animated stats, circuit decorations.
   ========================================================= */

/* ----- Hero grid layout — 2 column with proper sizing ----- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-visual { position: relative; }
.hero-photo {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- Animated mesh-gradient hero background ----- */
.hero {
  background:
    radial-gradient(at 27% 37%, hsla(173, 80%, 36%, 0.40) 0px, transparent 50%),
    radial-gradient(at 97% 21%, hsla(170, 80%, 50%, 0.25) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(220, 80%, 30%, 0.45) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(180, 80%, 45%, 0.25) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(190, 70%, 40%, 0.30) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(173, 80%, 30%, 0.40) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(160, 70%, 45%, 0.25) 0px, transparent 50%),
    linear-gradient(160deg, #050B1A 0%, #0B1426 50%, #060D1C 100%) !important;
  background-size: 200% 200%, 180% 180%, 220% 220%, 160% 160%, 200% 200%, 240% 240%, 180% 180%, 100% 100% !important;
  animation: mesh-drift 28s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%, 100% 100%, 50% 50%, 80% 50%, 0% 0%; }
  50%  { background-position: 100% 50%, 0% 100%, 0% 0%, 100% 0%, 0% 50%, 100% 0%, 0% 100%, 0% 0%; }
  100% { background-position: 50% 100%, 50% 50%, 100% 50%, 50% 100%, 50% 0%, 0% 100%, 50% 0%, 0% 0%; }
}

/* ----- Hero stack (photo + floating terminal widget) ----- */
.hero-stack {
  position: relative;
  display: block;
  max-width: 100%;
}
.hero-photo-frame {
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(45,212,191,.30),
    0 30px 80px -20px rgba(20,184,166,.40),
    0 80px 120px -40px rgba(0,0,0,.60) !important;
  transform: perspective(1400px) rotateY(-3deg) rotateX(2deg);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.hero-photo-frame:hover {
  transform: perspective(1400px) rotateY(-1deg) rotateX(1deg) translateY(-4px);
}

/* ----- Live terminal widget (floating over hero photo) ----- */
.live-terminal {
  position: absolute;
  bottom: -28px;
  left: -32px;
  width: min(380px, 80%);
  background: rgba(8, 14, 28, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(94, 234, 212, 0.20);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 30px 60px -20px rgba(0,0,0,.6),
    0 0 80px -10px rgba(20,184,166,.35);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: #e2e8f0;
  z-index: 3;
  animation: float-terminal 6s ease-in-out infinite;
}
@keyframes float-terminal {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.lt-header {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  border-radius: 14px 14px 0 0;
}
.lt-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.lt-dot-r { background: #ff5f56; }
.lt-dot-y { background: #ffbd2e; }
.lt-dot-g { background: #27c93f; }
.lt-title {
  margin-left: .65rem;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.lt-body {
  padding: .85rem 1rem 1rem;
}
.lt-line { margin: .15rem 0; }
.lt-prompt { color: var(--teal-400); font-weight: 700; margin-right: .5rem; }
.lt-flag { color: #94a3b8; }
.lt-out { color: rgba(255,255,255,.82); }
.lt-ok { color: var(--teal-400); font-weight: 700; }
.lt-no { color: #fca5a5; font-weight: 700; }
.lt-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--teal-400);
  vertical-align: text-bottom;
  animation: cursor-blink 1.1s steps(2) infinite;
}
@keyframes cursor-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (max-width: 980px) {
  .live-terminal {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 1rem;
  }
  .hero-photo-frame { transform: none; }
}

/* ----- Marquee section (tech-stack scrolling band) ----- */
.marquee-section {
  background: linear-gradient(180deg, #050B1A 0%, #0B1426 100%);
  border-top: 1px solid rgba(94,234,212,.12);
  border-bottom: 1px solid rgba(94,234,212,.12);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative;
}
.marquee-section::before,
.marquee-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-section::before {
  left: 0;
  background: linear-gradient(90deg, #050B1A, transparent);
}
.marquee-section::after {
  right: 0;
  background: linear-gradient(270deg, #050B1A, transparent);
}
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}
.marquee-section:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.m-item {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  letter-spacing: 0;
  white-space: nowrap;
}
.m-dot {
  color: var(--teal-400);
  font-size: 10px;
}

/* ----- Animated stat counters ----- */
.stat-banner-tile .num[data-count] {
  font-variant-numeric: tabular-nums;
}
.stat-banner-tile {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.stat-banner-tile.is-visible {
  opacity: 1;
  transform: none;
}
.stat-banner-tile:nth-child(1).is-visible { transition-delay: 0s; }
.stat-banner-tile:nth-child(2).is-visible { transition-delay: .1s; }
.stat-banner-tile:nth-child(3).is-visible { transition-delay: .2s; }
.stat-banner-tile:nth-child(4).is-visible { transition-delay: .3s; }

/* ----- 3D tilt on cards (light, subtle) ----- */
.problem-card,
.rr-card,
.tile,
.symptom {
  transform: perspective(1000px) rotateX(0) rotateY(0);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .2s ease;
  transform-style: preserve-3d;
}
.problem-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-5px) translateZ(0);
}
.rr-card:hover {
  transform: perspective(1000px) rotateX(1.5deg) rotateY(-1.5deg) translateY(-5px);
}
.tile:hover {
  transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) translateY(-3px);
}

/* ----- Hero entry animation ----- */
.hero h1,
.hero .lede,
.hero .hero-support,
.hero .hero-ctas,
.hero .hero-trust,
.hero .hero-stack,
.hero .next-window {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-in .85s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .eyebrow            { animation-delay: 0s; }
.hero h1                  { animation-delay: .08s; }
.hero .lede               { animation-delay: .18s; }
.hero .hero-support       { animation-delay: .26s; }
.hero .hero-ctas          { animation-delay: .34s; }
.hero .hero-trust         { animation-delay: .42s; }
.hero .hero-stack         { animation-delay: .22s; }
.hero .next-window        { animation-delay: .50s; }
@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* ----- Section reveal-on-scroll stagger ----- */
.section .section-head,
.section .rr-grid > *,
.section .problem-cards > *,
.section .bento > *,
.section .symptoms-grid > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.section.is-in-view .section-head,
.section.is-in-view .rr-grid > *,
.section.is-in-view .problem-cards > *,
.section.is-in-view .bento > *,
.section.is-in-view .symptoms-grid > * {
  opacity: 1;
  transform: none;
}
.section.is-in-view .rr-grid > *:nth-child(1),
.section.is-in-view .problem-cards > *:nth-child(1),
.section.is-in-view .bento > *:nth-child(1) { transition-delay: 0s; }
.section.is-in-view .rr-grid > *:nth-child(2),
.section.is-in-view .problem-cards > *:nth-child(2),
.section.is-in-view .bento > *:nth-child(2) { transition-delay: .08s; }
.section.is-in-view .rr-grid > *:nth-child(3),
.section.is-in-view .problem-cards > *:nth-child(3),
.section.is-in-view .bento > *:nth-child(3) { transition-delay: .16s; }
.section.is-in-view .rr-grid > *:nth-child(4),
.section.is-in-view .bento > *:nth-child(4) { transition-delay: .24s; }
.section.is-in-view .bento > *:nth-child(5) { transition-delay: .32s; }
.section.is-in-view .bento > *:nth-child(6) { transition-delay: .4s; }

/* ----- Animated circuit decoration for dark sections ----- */
.section-dark::after,
.rr-section::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%232DD4BF' stroke-width='1' opacity='0.18'><circle cx='100' cy='100' r='4' fill='%232DD4BF'/><circle cx='300' cy='180' r='4' fill='%232DD4BF'/><circle cx='480' cy='80' r='4' fill='%232DD4BF'/><circle cx='200' cy='350' r='4' fill='%232DD4BF'/><circle cx='460' cy='300' r='4' fill='%232DD4BF'/><circle cx='120' cy='480' r='4' fill='%232DD4BF'/><circle cx='340' cy='500' r='4' fill='%232DD4BF'/><circle cx='540' cy='460' r='4' fill='%232DD4BF'/><path d='M100 100 L300 100 L300 180 L480 180 L480 80'/><path d='M200 350 L460 350 L460 300'/><path d='M120 480 L340 480 L340 500'/><path d='M340 500 L540 500 L540 460'/><path d='M300 180 L300 350 L200 350'/><path d='M460 300 L460 460 L540 460'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
  animation: circuit-pulse 6s ease-in-out infinite;
  z-index: 0;
}
@keyframes circuit-pulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: .8; }
}

/* ----- Animated glow accent under section heads ----- */
.section .section-head h2 {
  position: relative;
}

/* Magnetic CTA button (subtle shimmer) */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: rotate(20deg);
  transition: left .8s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.btn-primary:hover::after {
  left: 150%;
}

/* Match symptom grid hover to 3D tilt */
.symptom { transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease; }
.symptom:hover { transform: perspective(800px) translateY(-3px) translateZ(0); }

@media (prefers-reduced-motion: reduce) {
  .hero, .mesh, .live-terminal, .marquee-track, .stat-banner-tile,
  .hero h1, .hero .lede, .hero .hero-support, .hero .hero-ctas, .hero .hero-stack {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee-track { animation: none !important; }
}