/* ==========================================================================
   Good Graphics Co. — Site Styles (v4)
   Modeled on originalautostyling.com (same ownership): Inter typography in
   sentence case, a dark-dominant theme with occasional warm off-white
   sections, a floating pill nav, fully-rounded buttons, and dark cards.
   Brand accent kept as hot pink per client direction.
   Mobile-first, no framework, tuned for good Core Web Vitals.
   ========================================================================== */

:root {
  /* Surfaces — dark-dominant, matching the OAS #0a0a0a base */
  --bg: #0a0a0a;
  --bg-elev: #121214;
  --bg-panel: #16171a;
  --bg-panel-2: #1c1d21;
  --border: #26272c;
  --border-soft: #1e1f23;

  /* Warm off-white light section (OAS uses ~#f5f0eb) */
  --light: #f5f0eb;
  --light-panel: #ffffff;

  --white: #ffffff;
  --text: #f4f4f5;          /* body text on dark */
  --text-muted: #a1a5ad;    /* secondary text on dark */
  --text-faint: #7b7f88;
  --ink: #14151a;           /* text on light sections */
  --ink-muted: #565b66;

  /* Brand accent — hot pink (kept from prior build).
     --accent  : bright pink for eyebrows, icons, rules, links on dark.
     --accent-btn : deepened so WHITE text clears WCAG AA (4.5:1) on it.
     --accent-ink : darkened pink for accent TEXT on the light section (on #f5f0eb). */
  --accent: #ff2d73;
  --accent-hot: #ff0055;
  --accent-btn: #e11157;
  --accent-dark: #b10a43;
  --accent-ink: #c20045;
  --accent-2: #ffd6e3;

  --gold: #f5b301;          /* review stars only */
  --success: #2fbf71;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --pill: 999px;
  --container: 1200px;
  --container-wide: 1320px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);

  /* Spacing scale. Sections used bare 92px/120px values that doubled up at
     every seam and left dead space between blocks; these fluid tokens keep the
     vertical rhythm consistent and collapse sensibly on small screens. */
  /* 8px grid. Component spacing was 68 distinct hand-picked values; these are
     the rungs everything should snap to. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  --space-section: clamp(56px, 6.5vw, 88px);
  --space-section-tight: clamp(40px, 4.5vw, 60px);
  /* Seam between two sections that share a background: no colour change to
     explain a gap, so it only needs enough room to separate content blocks. */
  --space-seam: clamp(32px, 4vw, 48px);
  --space-block: clamp(28px, 3.5vw, 44px);

  --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(255, 45, 115, 0.10), transparent 70%);
  --ease: cubic-bezier(.16, .84, .44, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--accent-btn); color: #fff; padding: 12px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Typography ----------
   OAS uses Inter in sentence case — no uppercase display face. Headings are
   heavy (700-800) with tight tracking; that single change is most of the
   family resemblance. */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--white);
}
h1, .display {
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.018em;
  line-height: 1.16;
  /* Evens out line lengths instead of leaving a short orphan. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 3.6vw + 0.9rem, 3.5rem); }
h2 { font-size: clamp(1.8rem, 2.6vw + 1rem, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.1vw + 1rem, 1.4rem); font-weight: 700; }
p { margin: 0 0 16px; color: var(--text-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; border-radius: 2px; }

.lede { font-size: 1.16rem; color: var(--text-muted); max-width: 64ch; line-height: 1.65; }
.section-head { max-width: 760px; margin-bottom: var(--space-block); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- Buttons — fully rounded pills (OAS) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 1rem; padding: 12px 24px; border-radius: var(--pill);
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[data-loading] { pointer-events: none; position: relative; color: transparent; }
.btn[data-loading]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: btn-spin .7s linear infinite;
  color: #fff;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[data-loading]::after { animation-duration: 2s; } }

.btn-primary { background: var(--accent-btn); color: #fff; box-shadow: 0 4px 22px rgba(225, 17, 87, 0.28); }
.btn-primary:hover { background: var(--accent-hot); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255, 0, 85, 0.38); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn-dark { background: var(--white); color: var(--ink); }
.btn-dark:hover { background: #ececec; transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-sm { padding: 12px 20px; font-size: 0.92rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Header — free-floating nav (no bar) ----------
   Per client direction: no glass/frosted capsule. The logo, links, and phone
   button float directly over the hero photo, held legible by text-shadow. On
   scroll the header gains a SOLID (not translucent/blurred) dark fill so the
   white nav stays readable once it passes over lighter sections. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding: 16px 16px;
  background: transparent; box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.is-scrolled {
  background: var(--bg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  padding: 12px 16px;
}
.site-header .nav-pill {
  max-width: var(--container-wide); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0;
  background: transparent; border: 0; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}

.logo { display: flex; align-items: center; gap: 8px; flex: none; }
.logo-img { height: 40px; width: auto; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
@media (min-width: 900px) { .logo-img { height: 44px; } }

.nav-pill { display: flex; }
.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: 32px; }
.nav-desktop a, .dropdown-btn {
  color: rgba(255,255,255,0.9); font-weight: 500; font-size: 0.95rem; padding: 8px 0; position: relative;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.35);
}
.nav-desktop a:hover, .dropdown-btn:hover, .nav-desktop a[aria-current="page"] { color: #fff; }
/* Once the solid header fill is in, the shadow is no longer needed. */
.site-header.is-scrolled .nav-desktop a,
.site-header.is-scrolled .dropdown-btn { text-shadow: none; }
.nav-desktop a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav-desktop a:hover::before, .nav-desktop a[aria-current="page"]::before { transform: scaleX(1); }

.header-cta { display: none; align-items: center; gap: 12px; }
/* Phone rendered as the accent pill button, like OAS's phone CTA */
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-btn); color: #fff; font-weight: 600; font-size: 0.92rem;
  padding: 12px 20px; border-radius: var(--pill);
  box-shadow: 0 8px 22px rgba(225,17,87,0.30); transition: background .2s ease, transform .15s ease;
}
.header-phone:hover { background: var(--accent-hot); transform: translateY(-1px); }
.header-phone .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .9; }

.nav-toggle {
  pointer-events: auto;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--pill);
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex: none;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: #fff; position: relative; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg) translate(4px, 5px); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translate(4px, -5px); }

.nav-mobile {
  display: none; position: fixed; inset: 84px 0 0 0; z-index: 99;
  background: var(--bg); overflow-y: auto; padding: 12px 24px 40px;
}
.nav-mobile.open { display: block; }
.nav-mobile a { display: block; padding: 16px 4px; color: #fff; font-weight: 600; font-size: 1.12rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-mobile .btn { margin-top: 20px; }
.nav-mobile .header-phone { margin-top: 16px; justify-content: center; width: 100%; }

@media (min-width: 960px) {
  .nav-desktop { display: block; }
  .header-cta { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* ---------- Hero (full-bleed) ---------- */
.hero-full {
  position: relative; overflow: hidden; color: #fff;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 150px 0 72px; margin-top: -78px;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 560px at 50% 6%, rgba(10,10,12,0.30), transparent 62%),
    linear-gradient(180deg, rgba(6,6,8,0.68) 0%, rgba(6,6,8,0.60) 40%, rgba(6,6,8,0.92) 100%);
}
.hero-content {
  position: relative; z-index: 1; max-width: 900px; margin: 0 auto;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.hero-full h1 { color: #fff; margin-bottom: 24px; font-size: clamp(1.9rem, 3.2vw + 0.85rem, 3.15rem); line-height: 1.18; max-width: 30ch; }
.hero-full .lede { color: #e7e7ea; max-width: 56ch; margin: 0 auto; font-size: 1.06rem; line-height: 1.6; text-wrap: pretty; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.hero-badges-center { justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16); color: #eceef2; font-size: 0.82rem; font-weight: 600;
  padding: 8px 16px; border-radius: var(--pill); backdrop-filter: blur(6px);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cta-row-center { justify-content: center; margin-top: 32px; }
.hero-trust-line { margin-top: 20px; margin-bottom: 0; font-size: 0.88rem; font-weight: 400; color: rgba(255,255,255,0.7); max-width: 46ch; text-wrap: balance; }
.hero-phone-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero-phone-link:hover { color: var(--accent-2); }

/* Thin credential strip that sits under the hero content. Lighter weight than
   .badge so it reads as supporting detail, not a second row of buttons. */
.cred-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 24px; margin-top: 24px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14); max-width: 900px;
}
.cred-strip span {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.66); display: inline-flex; align-items: center; gap: 8px;
}
.cred-strip span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none;
}
@media (max-width: 600px) { .cred-strip { gap: 8px 16px; } .cred-strip span { font-size: 0.68rem; letter-spacing: 0.06em; } }

@media (min-width: 700px) { .hero-full { padding-top: 170px; } }
@media (min-width: 960px) { .hero-full { margin-top: -94px; min-height: 100vh; min-height: 100dvh; } }

/* ---------- Stat callout ---------- */
.stat-section { padding-bottom: var(--space-section-tight); }
.stat-section-inner {
  display: grid; gap: 28px; align-items: center;
  padding: 48px 32px; background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  background-image: var(--glow);
}
.stat-section-num { text-align: center; }
.stat-section-num strong { display: block; font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--accent); line-height: 1; letter-spacing: -0.03em; }
.stat-section-num span { display: block; margin-top: 8px; color: var(--text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: .08em; }
.stat-section-copy .eyebrow { color: var(--accent); }
.stat-section-copy .lede { color: var(--text-muted); max-width: none; }
@media (min-width: 800px) {
  .stat-section-inner { grid-template-columns: 220px 1fr; padding: 60px 68px; text-align: left; }
  .stat-section-num { text-align: left; }
}

/* ---------- Plain dark page hero (OAS service/about style) ----------
   No background photo: a small badge, accent eyebrow, big sentence-case
   headline, lede, and CTA, centered on the near-black body. Photos live in the
   content below. */
.plain-hero {
  padding: 150px 0 84px; text-align: center; position: relative; overflow: hidden;
}
@media (min-width: 700px) { .plain-hero { padding: 172px 0 96px; } }
.plain-hero-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.plain-hero .breadcrumbs { margin-bottom: 20px; }
.plain-hero .eyebrow { justify-content: center; }
.plain-hero h1 { margin-bottom: 16px; }
.plain-hero .lede { margin: 0 auto 28px; color: var(--text-muted); }
.plain-hero .cta-row { justify-content: center; }

/* Outlined pill badge (OAS "STEK CERTIFIED" chip) */
.badge-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,45,115,0.5); color: var(--accent);
  background: rgba(255,45,115,0.06);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--pill); margin-bottom: 20px;
}
.section-head.center .badge-outline { margin-left: auto; margin-right: auto; }
.section-alt .badge-outline { border-color: rgba(194,0,69,0.4); color: var(--accent-ink); background: rgba(194,0,69,0.06); }

/* ---------- Page heroes / breadcrumbs ---------- */
.page-hero .breadcrumbs { margin-bottom: 16px; }
.page-hero-plain { background: var(--bg); color: #fff; padding: 140px 0 90px; }
.page-hero-plain h1 { color: #fff; }
.page-hero-plain .lede { color: var(--text-muted); }
.breadcrumbs { font-size: 0.82rem; color: rgba(255,255,255,0.72); margin-bottom: 16px; }
.breadcrumbs a { color: var(--accent-2); }
.breadcrumbs a:hover { color: #fff; }

/* ---------- Sections ----------
   Dark-dominant: the default section is dark (over the body). .section-alt is
   the warm off-white light break used sparingly. .section-dark and
   .section-reviews are explicit dark variants. */
section { padding: var(--space-section) 0; position: relative; }
.section-tight { padding: var(--space-section-tight) 0; }

/* Seam padding depends on whether the background ACTUALLY changes.
   .section-alt is the only light surface; everything else (default,
   .section-dark, .stat-section, .section-reviews, .cta-band) sits on the same
   dark body colour. Two dark sections in a row therefore have no visible
   boundary, and a full pad on each side of that invisible seam is what was
   reading as a void. Only a real colour change earns the full pad. */
section + section { padding-top: var(--space-seam); }
section + .cta-band { padding-top: var(--space-section); }

/* Padding-top alone only fixes half of a seam: the section above still
   contributes a full bottom pad, and CSS can't select a previous sibling. So
   :has() looks forward instead, and any section followed by another drops its
   bottom pad to match. Result is a uniform ~96px between every pair of
   sections; the colour change at a light band is doing the separating, it
   doesn't need extra padding on top of that. Verified in-browser 2026-07-31.
   .cert-band and .section-tight are excluded because they set their own,
   deliberately smaller padding and :has() would out-specify them. Browsers
   without :has() keep the roomier old spacing, which is cosmetic, not broken. */
section:not(.cert-band):not(.section-tight):has(+ section:not(.cta-band)) { padding-bottom: var(--space-seam); }

/* ---------- Section differentiation ----------
   Tightening the seams made a long run of dark sections read as one endless
   block, because they all sit on the same body colour. Two cheap signals fix
   that without adding weight:
     1. alternate the surface, so no two neighbouring sections share a shade
     2. a hairline on any seam where the colour DOESN'T change
   Light bands (.section-alt), the white film strip (.cert-band) and the
   closing .cta-band are excluded from both: they already read as distinct. */
main > section:not(.section-alt):not(.cta-band):not(.cert-band):not(.hero):nth-of-type(even) {
  background: var(--bg-elev);
}
main > section:not(.cert-band):not(.section-alt):has(+ section:not(.section-alt):not(.cta-band):not(.cert-band)) {
  border-bottom: 1px solid var(--border-soft);
}

/* Same problem on the light band: /wall-wraps/ and /signs-and-banners/ each
   run two .section-alt blocks back to back, which merge into one cream slab.
   Same hairline, in the light-section border colour used by the cards. */
main > .section-alt:has(+ .section-alt) { border-bottom: 1px solid #e6ded3; }

.section-alt { background: var(--light); color: var(--ink); }
.section-alt h1, .section-alt h2, .section-alt h3, .section-alt h4 { color: var(--ink); }
.section-alt p, .section-alt .lede { color: var(--ink-muted); }
.section-alt .eyebrow { color: var(--accent-ink); }
.section-alt .eyebrow::before { background: var(--accent-ink); }

.section-dark, .section-reviews { background: var(--bg); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: var(--text-muted); }

/* A soft accent glow at the top of the first dark content section, echoing the
   radial glow behind OAS's "Certified Partners" band. */
.section-glow { background-image: var(--glow); }

/* ---------- Grids / Cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Default card = dark elevated panel (the site is dark-dominant now). */
.card {
  position: relative; overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(255,45,115,0.35); box-shadow: var(--shadow); }
.card:hover::before { transform: scaleY(1); }
.card .icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,45,115,0.14); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 16px; font-size: 1.15rem; }
.card h3 { margin-bottom: 8px; color: #fff; }
.card p { margin-bottom: 12px; font-size: 0.96rem; color: var(--text-muted); }
.card a.card-link, .card .card-link { font-weight: 700; color: var(--accent); font-size: 0.92rem; display: inline-flex; gap: 4px; margin-top: auto; }
a.card { display: flex; flex-direction: column; }
a.card:hover .card-link { gap: 12px; }

/* On the warm light section, cards invert to white with dark text. */
.section-alt .card { background: var(--light-panel); border-color: #e6ded3; color: var(--ink); }
.section-alt .card h3 { color: var(--ink); }
.section-alt .card p { color: var(--ink-muted); }
.section-alt .card .icon { background: rgba(194,0,69,0.10); color: var(--accent-ink); }
.section-alt .card a.card-link { color: var(--accent-ink); }

/* Explicit dark card helper (used inside section-dark grids) */
.card-dark { background: var(--bg-panel); border-color: var(--border); color: var(--text-muted); }
.card-dark h3 { color: #fff; }
.card-dark p { color: var(--text-muted); }
.card-dark .icon { background: rgba(255,45,115,0.16); color: var(--accent); }
.section-dark .eyebrow { color: var(--accent); }
.section-dark .lede { color: var(--text-muted); }

/* Service cards — photo tiles with overlay text (OAS-style) */
.service-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-elev); color: #fff; padding: 24px; min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--border);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover { transform: translateY(-5px); border-color: rgba(255,45,115,0.4); box-shadow: var(--shadow-lg); }
.service-card-bg { position: absolute; inset: 0; z-index: 0; }
.service-card-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0.10) 0%, rgba(8,8,10,0.55) 52%, rgba(8,8,10,0.95) 100%);
}
.service-card h3, .service-card p, .service-card .card-link, .service-card .tag, .service-card .tag-specialty { position: relative; z-index: 1; }
.service-card h3 { color: #fff; margin-bottom: 4px; }
.service-card p { color: #dcdfe6; font-size: 0.9rem; margin-bottom: 12px; }
.service-card .card-link { display: inline-flex; gap: 4px; color: #fff; font-weight: 700; font-size: 0.9rem; transition: gap .25s var(--ease); }
.service-card:hover .card-link { gap: 12px; }
.service-card .tag { position: absolute; top: 16px; left: 16px; background: var(--accent-btn); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 4px 12px; border-radius: var(--pill); text-transform: uppercase; letter-spacing: 0.06em; }
.service-card .tag-specialty { position: absolute; top: 16px; right: 16px; background: #fff; color: var(--ink); font-size: 0.66rem; font-weight: 700; padding: 4px 12px; border-radius: var(--pill); text-transform: uppercase; letter-spacing: 0.06em; }
.service-card--pattern { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 14px, rgba(255,255,255,0) 14px 28px), var(--bg-elev); }
.service-card img { transition: transform .6s var(--ease); }
.service-card:hover img { transform: scale(1.05); }

.industry-pill { background: var(--bg-panel); color: #fff; border: 1px solid var(--border); border-radius: var(--pill); padding: 8px 16px; font-size: 0.88rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.section-alt .industry-pill { background: #fff; color: var(--ink); border-color: #e6ded3; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Gallery filter pills (OAS gallery) */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.filter-pill {
  background: var(--bg-elev); color: var(--text-muted); border: 1px solid var(--border);
  border-radius: var(--pill); padding: 8px 20px; font-size: 0.9rem; font-weight: 600; font-family: inherit;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-pill:hover { color: #fff; border-color: rgba(255,45,115,0.4); }
.filter-pill.is-active { background: var(--accent-btn); color: #fff; border-color: var(--accent-btn); }
.portfolio-item.is-hidden { display: none; }

/* Portfolio */
.portfolio-item { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elev); border: 1px solid var(--border); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.portfolio-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.portfolio-media { aspect-ratio: 4/3; background: var(--bg-panel); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 0.82rem; font-weight: 600; text-align: center; padding: 20px; overflow: hidden; }
.portfolio-body { padding: 16px 16px; }
.portfolio-body h3 { font-size: 1.02rem; margin-bottom: 4px; color: #fff; }
.portfolio-body span { font-size: 0.78rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* Testimonials — dark cards with a divider above the author (OAS reviews) */
.testi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; }
.stars { color: var(--gold); font-weight: 800; letter-spacing: 3px; margin-bottom: 12px; font-size: 1.05rem; }
.testi p { color: #d6d9e0; font-size: 0.98rem; line-height: 1.65; }
.testi footer { font-weight: 700; font-size: 0.92rem; color: #fff; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.testi footer span { display: block; font-weight: 500; color: var(--text-faint); font-size: 0.82rem; margin-top: 2px; }
.testi--photo { padding: 0; overflow: hidden; }
.testi-media { aspect-ratio: 4/3; overflow: hidden; background: #101012; }
.testi-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.testi--photo:hover .testi-media img { transform: scale(1.05); }
.testi-body { padding: 24px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.testi-body footer { margin-top: auto; }
.reviews-note { margin: 32px auto 0; max-width: 62ch; text-align: center; font-size: 0.85rem; color: var(--text-faint); }
.pricing-note { margin: 32px auto 0; max-width: 64ch; text-align: center; font-size: 0.88rem; color: var(--text-faint); }

/* Process */
.process-step { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--border); }
.process-step:last-child { border-bottom: none; }
.process-num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-btn); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.section-alt .process-step { border-color: #e6ded3; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.section-alt .faq-item { border-color: #e6ded3; }
.faq-item summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 1.04rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--accent); flex: none; transition: transform .25s var(--ease); }
.section-alt .faq-item summary::after { color: var(--accent-ink); }
.faq-item[open] summary::after { content: "\2212"; transform: rotate(180deg); }
.faq-item p { margin-top: 12px; }
.faq-item[open] p { animation: faq-open .3s var(--ease) both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Broker/national panel. NOTE: .check-list is the single checkmark-list
   component. The old .list-check duplicate was merged into it 2026-07-31. */
.panel { background: var(--bg-elev); color: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px; display: grid; gap: 24px; }
.panel h2, .panel h3 { color: #fff; }
.panel p { color: var(--text-muted); }
.check-list { margin: var(--space-5) 0; }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); color: var(--text); font-weight: 500; font-size: 0.98rem; }
.check-list li::before { content: "\2713"; color: var(--accent); font-weight: 900; flex: none; }
.panel .check-list li, .section-dark .check-list li { color: #e4e7ec; }
.section-alt .check-list li { color: var(--ink); }
.section-alt .check-list li::before { color: var(--accent-ink); }

/* Contact / form */
.contact-grid { display: grid; gap: 32px; }
.contact-card { background: var(--bg-elev); color: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.contact-card h3 { color: #fff; }
.contact-card p { color: var(--text-muted); }
.contact-list li { padding: 12px 0; border-bottom: 1px solid var(--border); font-weight: 500; }
.contact-list li strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.form-embed { background: var(--bg-elev); border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 44px 24px; text-align: center; color: var(--text-muted); }
.form-embed strong { display: block; color: #fff; margin-bottom: 4px; font-size: 1.05rem; }

/* ---------------------------------------------------------------------------
   QUOTE PANEL — the lead capture block. Wraps either the Tally embed or the
   direct-contact fallback in the same premium card so the section reads as
   part of the site, not a bolted-on third-party form.
   --------------------------------------------------------------------------- */
.quote-panel {
  /* CTA buttons across the site link to /contact/#quote so people land on the
     form, not above a full-viewport hero. Offset clears the sticky header. */
  scroll-margin-top: 110px;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.quote-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-hot), var(--accent), transparent 85%);
}
.quote-panel-head { padding: 32px 32px 0; }
.quote-panel-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 4px 0 8px; }
.quote-panel-head p { color: var(--text-muted); font-size: 0.96rem; margin: 0; max-width: 52ch; }
.quote-panel-body { padding: 24px 32px 32px; }
.quote-panel-body iframe { display: block; border: 0; width: 100%; }
.quote-panel-foot {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding: 16px 32px; border-top: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.25);
  font-size: 0.82rem; color: var(--text-faint);
}
.quote-panel-foot strong { color: var(--accent-2); font-weight: 600; }

.quote-direct-lede { color: var(--text); font-size: 1.02rem; margin: 0 0 16px; }
.quote-direct .cta-row { margin-bottom: 12px; }
.quote-direct-or { color: var(--text-faint); font-size: 0.9rem; margin: 0 0 24px; }
.quote-direct-or a { color: var(--accent); }
.quote-checklist { border-top: 1px solid var(--border-soft); padding-top: 24px; }
.quote-checklist-title { display: block; font-weight: 600; color: #fff; font-size: 0.92rem; margin-bottom: 12px; }
.quote-checklist .check-list { margin: 0; }

@media (max-width: 640px) {
  .quote-panel-head { padding: 24px 20px 0; }
  .quote-panel-body { padding: 20px 20px 24px; }
  .quote-panel-foot { padding: 12px 20px; gap: 4px 16px; }
}

/* Answer box — a short, self-contained summary near the top of city pages.
   Written so an answer engine can lift it whole and still be accurate. */
.answer-box {
  border-left: 3px solid var(--accent);
  background: rgba(255, 45, 115, 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 24px; margin-bottom: 32px;
}
.answer-box p { margin: 0; color: var(--text); font-size: 1.02rem; }
.answer-box strong { color: #fff; }
.section-alt .answer-box { background: #fff; border-left-color: var(--accent-ink); }
.section-alt .answer-box p { color: var(--ink); }

/* Link list — contextual internal links with descriptions. Used on city pages
   to push authority out to the service pages with meaningful anchor text. */
.link-list { list-style: none; margin: 16px 0 0; padding: 0; }
.link-list li { border-bottom: 1px solid var(--border-soft); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { display: block; padding: 12px 0; color: var(--text-muted); font-size: 0.94rem; transition: color .18s var(--ease), padding-left .18s var(--ease); }
.link-list a strong { color: #fff; display: inline; }
.link-list a:hover { color: var(--text); padding-left: 4px; }
.link-list a:hover strong { color: var(--accent); }

/* Header quote button — desktop.
   The phone link was already a solid accent pill, so adding a second solid pill
   beside it gave the header two competing primary actions at mismatched
   heights. Now there's one primary (quote) and one secondary (phone), with
   identical box metrics so they sit level. Spacing comes from .header-cta's
   gap — no extra margin, or the two rules fight. */
.header-quote {
  display: none;
  align-items: center;
  background: var(--accent-btn); color: #fff;
  font-weight: 600; font-size: 0.92rem;
  padding: 12px 20px; border-radius: var(--pill);
  /* Transparent border matches the 1.5px on .header-phone. Without it the two
     pills differ by 3px in height — border adds to the box even under
     border-box, which only governs explicit width/height. */
  border: 1.5px solid transparent;
  white-space: nowrap; transition: transform .2s var(--ease), background .2s var(--ease);
}
.header-quote:hover { background: var(--accent-hot); color: #fff; transform: translateY(-1px); }
@media (min-width: 1000px) { .header-quote { display: inline-flex; } }

/* Phone steps down to secondary now that Quote carries the accent. Same
   padding, font-size and radius as .header-quote so their heights match. */
.site-header .header-phone {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
}
.site-header .header-phone:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.site-header .header-phone .dot { background: var(--accent); opacity: 1; }

/* Final CTA band */
.cta-band { background: linear-gradient(120deg, var(--accent-hot), var(--accent-dark)); color: #fff; text-align: center; padding: 84px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.92); }
.cta-band .btn-dark { background: #fff; color: var(--ink); }
.cta-band .btn-ghost { border-color: rgba(255,255,255,0.6); }

/* Footer */
.site-footer { background: #060607; color: var(--text-muted); padding: 64px 0 28px; border-top: 1px solid var(--border-soft); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 44px; }
.footer-col h4 { color: #fff; font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col li { margin-bottom: 8px; font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-col p { color: var(--text-faint); font-size: 0.92rem; }
.footer-bottom { border-top: 1px solid var(--border-soft); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; text-align: center; font-size: 0.82rem; }
.footer-bottom a { color: var(--accent); }

/* Build credit. Its own quiet line rather than a second column in the legal
   row: it reads as a signature instead of competing with the copyright. The
   link is a plain brand anchor (no keyword stuffing, which on a sitewide
   footer link reads as manipulation) and carries no rel="nofollow", so it
   passes equity normally. */
.footer-credit { margin-top: 18px; text-align: center; font-size: 0.76rem; color: var(--text-faint); letter-spacing: 0.02em; }
.footer-credit a {
  color: var(--text-muted); text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer-credit a:hover, .footer-credit a:focus-visible { color: #fff; border-bottom-color: var(--accent); }
.social-row { display: flex; gap: 12px; }
.social-row a { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-panel); display: flex; align-items: center; justify-content: center; font-weight: 700; border: 1px solid var(--border); transition: background .2s ease, border-color .2s ease; }
.social-row a:hover { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.social-row a { color: var(--text-muted); }
.social-row svg { width: 18px; height: 18px; display: block; }

/* Google map embed on /contact/. Its own class rather than .portfolio-media,
   which carries padding meant for a text placeholder. */
.map-embed { aspect-ratio: 21/9; border-radius: 14px; overflow: hidden; background: var(--bg-panel); border: 1px solid #e6ded3; }
/* Light desaturation only. An inverted "dark mode" map filter mangles road
   and label colours, and this sits on the light section anyway. */
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.3); transition: filter .3s var(--ease); }
.map-embed:hover iframe { filter: none; }
@media (max-width: 700px) { .map-embed { aspect-ratio: 4/3; } }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }

/* Sticky mobile call bar */
.mobile-call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.35);
}
.mobile-call-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; font-weight: 700; font-size: 0.95rem; }
.mobile-call-bar .call { background: var(--accent-btn); color: #fff; }
.mobile-call-bar .quote { background: var(--bg-elev); color: #fff; }
@media (min-width: 960px) { .mobile-call-bar { display: none; } }
body { padding-bottom: 62px; }
@media (min-width: 960px) { body { padding-bottom: 0; } }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.two-col { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; align-items: center; } }
.note-box { background: rgba(255,45,115,0.06); border: 1px solid rgba(255,45,115,0.28); border-radius: var(--radius); padding: 16px 20px; font-size: 0.92rem; color: #ffc4d8; }
.section-alt .note-box { background: #fff2f6; border-color: #ffd0e0; color: #8a1039; }

/* ---------- Services dropdown ---------- */
.has-dropdown { position: relative; }
.dropdown-btn { background: transparent; border: none; font-family: inherit; display: flex; align-items: center; gap: 4px; padding: 8px 0; }
.dropdown-btn .caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .15s ease; }
.dropdown-btn[aria-expanded="true"] .caret { transform: rotate(-135deg); margin-top: 2px; }
.dropdown-panel {
  display: none; position: absolute; top: 100%; left: -16px; margin-top: 16px;
  background: rgba(16,16,18,0.98); border: 1px solid var(--border); border-radius: 16px;
  padding: 8px; min-width: 320px; box-shadow: var(--shadow-lg); backdrop-filter: blur(12px);
}
.dropdown-panel.open { display: block; }
.dropdown-panel a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 10px; color: #dfe3e9; }
.dropdown-panel a::before { display: none; }
.dropdown-panel a:hover { background: rgba(255,45,115,0.10); color: #fff; }
.dropdown-panel a strong { font-size: 0.92rem; font-weight: 600; }
.dropdown-panel a span { font-size: 0.78rem; color: var(--text-faint); font-weight: 400; }

.mobile-services-group { margin: 4px 0 8px; }
.mobile-services-group summary { padding: 16px 4px; color: #fff; font-weight: 600; font-size: 1.12rem; border-bottom: 1px solid rgba(255,255,255,0.08); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mobile-services-group summary::-webkit-details-marker { display: none; }
.mobile-services-group summary::after { content: "+"; color: var(--accent); }
.mobile-services-group[open] summary::after { content: "\2212"; }
.mobile-services-group a { padding-left: 16px; font-size: 1rem; font-weight: 500; color: #cfd6de; }

/* ---------- Real photo treatments ---------- */
.portfolio-media img, .service-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Scroll reveal ----------
   Fires as soon as an element enters the viewport (rootMargin/threshold set in
   main.js), with a short transition. A JS failsafe force-reveals everything
   shortly after load so nothing can get stuck invisible. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: .02s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .12s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .17s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: .22s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: .27s; }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Film manufacturer strip ----------
   White band on purpose: both logo files are JPEGs on white, so a white
   background is the only way they sit flush with no visible box around them. */
.cert-band { background: #fff; padding: 20px 0; }
.cert-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; }
.cert-band-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7280;  /* 4.83:1 on white, was #8a8f98 at 3.25:1 */
}
.cert-band img { height: 26px; width: auto; display: block; }
@media (max-width: 600px) { .cert-band-inner { gap: 8px 24px; } .cert-band img { height: 19px; } }

/* ---------- Tap targets ----------
   WCAG 2.5.5 wants interactive controls at roughly 44px. Pills and inline nav
   links were sized purely by their text, which put several under that on
   phones. Padding is left alone; this only enforces a floor. */
@media (max-width: 900px) {
  .filter-pill, .industry-pill, .btn, .nav-mobile a, .site-footer a, .call-bar a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .site-footer li { margin-bottom: var(--space-1); }
}

/* ---------- Utilities ----------
   These replace the inline style="" attributes that build.py was emitting. */
.u-center { justify-content: center; }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.u-mt-4 { margin-top: var(--space-4); }
.cta-band .lede { margin: 0 auto var(--space-5); color: rgba(255,255,255,0.92); }
.section-dark .section-head .lede { color: #c7cdd8; }
.compare-cell--label { background: #12151a; color: #fff; font-weight: 800; }
.portfolio-media--portrait { aspect-ratio: 4/5; border-radius: 14px; }

/* ---------- <picture> wrappers ----------
   webpify() in build.py wraps every <img> in a <picture> for the WebP source.
   That inserts a box between the frame and the image, and every frame here
   sizes its image with height:100%, which then resolves against the picture
   (auto height) instead of the frame. The image letterboxes inside its own
   frame. display:contents removes the picture from the layout tree so the img
   is once again the frame's direct layout child. */
picture { display: contents; }

/* .portfolio-media carries 20px of padding so the "Photo: add from ..." text
   placeholder has room to breathe. With a real photo in it that padding shows
   as a panel-coloured inset border around the image. Drop it when there's an
   actual image. */
.portfolio-media:has(img) { padding: 0; }
@supports not (display: contents) {
  .hero-bg picture, .service-card-bg picture, .testi-media picture,
  .portfolio-media picture, .service-photo picture { display: block; width: 100%; height: 100%; }
}

/* ---------- Image fade-up ---------- */
.media-fade img { opacity: 0; transform: scale(1.02); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.media-fade img.is-loaded { opacity: 1; transform: scale(1); }

/* ---------- Hero settle ---------- */
.hero-bg img { animation: hero-settle 1.6s var(--ease) both; }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-content > * { animation: hero-rise .8s var(--ease) backwards; }
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .13s; }
.hero-content > *:nth-child(3) { animation-delay: .21s; }
.hero-content > *:nth-child(4) { animation-delay: .29s; }
.hero-content > *:nth-child(5) { animation-delay: .37s; }
.hero-content > *:nth-child(6) { animation-delay: .45s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; display: none; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.6); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  transition: opacity .4s ease, transform .4s ease;
}
.scroll-cue.is-hidden { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--accent) 60%, var(--accent) 100%); animation: cue-drop 2.1s var(--ease) infinite; transform-origin: top; }
@keyframes cue-drop { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 75% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0) translateY(34px); opacity: 0; } }
@media (min-height: 620px) { .scroll-cue { display: flex; } }

/* ---------- Button hover arrow ---------- */
.btn-primary::after, .btn-dark::after {
  content: "\2192"; font-size: 1.05em; line-height: 1; transform: translateX(-4px); opacity: 0;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.btn-primary:hover::after, .btn-dark:hover::after { transform: translateX(0); opacity: 1; }
.btn-primary:active, .btn-dark:active, .btn-ghost:active { transform: translateY(1px); }

/* ---------- Lightbox ---------- */
.portfolio-item { cursor: zoom-in; }
.portfolio-item .portfolio-media img { transition: transform .5s var(--ease); }
.portfolio-item:hover .portfolio-media img { transform: scale(1.06); }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5,5,7,0.95); display: none; align-items: center; justify-content: center; padding: 40px 20px; }
.lightbox.open { display: flex; }
.lightbox figure { max-width: min(92vw, 1100px); max-height: 88vh; margin: 0; text-align: center; animation: lb-in .32s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox img { max-width: 100%; max-height: 78vh; border-radius: 12px; box-shadow: var(--shadow-lg); }
.lightbox figcaption { color: #fff; margin-top: 16px; font-weight: 700; }
.lightbox figcaption span { display: block; color: var(--accent-2); font-weight: 500; font-size: 0.85rem; margin-top: 4px; }
.lightbox-close { position: absolute; top: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; }
.lightbox-close:hover { background: var(--accent-btn); border-color: var(--accent-btn); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; }
.lightbox-nav:hover { background: var(--accent-btn); border-color: var(--accent-btn); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-count { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 0.8rem; font-weight: 600; letter-spacing: .08em; }
@media (max-width: 640px) { .lightbox-nav { width: 42px; height: 42px; } .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } }

/* ---------- Comparison table ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--border); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.compare-row { display: grid; grid-template-columns: 1fr; gap: 2px; }
.compare-row.compare-head div { background: #0d0d0f; color: #fff; font-weight: 700; text-align: center; padding: 16px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.compare-row.compare-head div:first-child { color: var(--text-faint); }
.compare-row.compare-head div:last-child { color: var(--accent-2); }
.compare-cell { background: var(--bg-elev); color: var(--text-muted); padding: 16px 20px; font-size: 0.95rem; }
.compare-cell.typical { color: var(--text-faint); }
.compare-cell.typical::before { content: "\2717 "; color: #6b6f78; font-weight: 900; }
.compare-cell.ggc { color: #fff; font-weight: 500; background: #22101a; }
.compare-cell.ggc::before { content: "\2713 "; color: var(--accent); font-weight: 900; }
@media (min-width: 700px) { .compare-row { grid-template-columns: 220px 1fr 1fr; } }

/* ---------- Standard callout ---------- */
.standard-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 12px; }
.section-alt .standard-mark { color: var(--accent-ink); }


/* ---------- Hero responsive tuning ----------
   The hero stack (headline, lede, buttons, badges, trust line) has to clear the
   fold from a 667px-tall iPhone SE up to a desktop display. Rather than hide
   elements at small sizes, the scale steps down so everything stays visible. */
@media (max-width: 600px) {
  .hero-full { padding: 118px 0 56px; min-height: 100svh; }
  .hero-full h1 { font-size: clamp(1.6rem, 6.4vw, 2.15rem); line-height: 1.2; max-width: 20ch; margin-bottom: 16px; }
  .hero-full .lede { font-size: 1rem; line-height: 1.55; }
  .cta-row-center { margin-top: 24px; gap: 8px; }
  .cta-row-center .btn { width: 100%; max-width: 320px; }
  .hero-badges { margin-top: 24px; gap: 8px; }
  .hero-badges .badge { font-size: 0.72rem; padding: 4px 12px; }
  .hero-trust-line { margin-top: 16px; font-size: 0.82rem; }
}

/* Short landscape viewports (phone rotated, small laptops) — a 100vh hero with
   fixed padding overflows here, so release the min-height and let it size to
   its content. */
@media (max-height: 620px) and (orientation: landscape) {
  .hero-full { min-height: auto; padding: 110px 0 48px; }
}

/* Tablet portrait: headline can take more width than on a phone but shouldn't
   reach the desktop maximum. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-full h1 { font-size: clamp(2rem, 4.4vw, 2.65rem); line-height: 1.18; max-width: 24ch; }
  .cta-row-center .btn { flex: 0 1 auto; }
}


/* ---------- Comparison table on small screens ----------
   The row has three cells (label, typical, ours). Below the 700px breakpoint
   it was still laid out in two columns, so the third cell wrapped and the row
   label ended up beside the wrong value. Stacked single-column instead, with
   the column headings folded into each cell since a header row is meaningless
   once the table stacks. */
@media (max-width: 699px) {
  .compare-row.compare-head { display: none; }
  .compare-cell { padding: 12px 16px; font-size: 0.92rem; }
  .compare-cell.typical::before { content: "\2717  Typical installer: "; font-weight: 700; }
  .compare-cell.ggc::before { content: "\2713  Good Graphics Co.: "; font-weight: 700; }
}

/* ---------- Overflow safety ----------
   Long unbroken strings (an email address, a pasted URL in future copy) can
   push a page wider than the viewport and create a horizontal scrollbar on
   phones. clip rather than hidden, so position:sticky on the header still
   works. */
html, body { overflow-x: clip; max-width: 100%; }
p, li, h1, h2, h3, h4, a, td, dd, dt, figcaption, summary { overflow-wrap: break-word; }
.container, .hero-content, .plain-hero-inner { min-width: 0; }
.grid > *, .two-col > *, .compare-row > * { min-width: 0; }