:root {
  --navy: #054b72;
  --navy-deep: #02314f;
  --navy-mid: #0a5d86;
  --cream: #e4f5f7;
  --cream-bright: #f7fcfd;
  --gold: #1a6e80;
  --gold-soft: #7ec9d6;
  --ink: #02314f;
  --muted: #3a5f6e;
  --line: #c5e0e6;
  --paper: #ffffff;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-sans: "Outfit", system-ui, sans-serif;
  --radius: 12px;
  --shadow: 0 0 0 1px rgba(11, 31, 58, 0.06), 0 1px 2px -1px rgba(11, 31, 58, 0.06);
}

.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 80;
  display: inline-flex; height: 44px; align-items: center;
  background: var(--navy); color: var(--cream); padding: 0 16px;
  border-radius: 8px; font-size: 14px; font-weight: 500;
  clip-path: inset(50%); width: 1px; overflow: hidden; white-space: nowrap;
}
.skip-link:focus, .skip-link:focus-visible {
  clip-path: none; width: auto; overflow: visible;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.honey { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="slider"]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream-bright);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

.wrap { width: min(1152px, calc(100% - 32px)); margin-inline: auto; }
.wrap-wide { width: min(1152px, calc(100% - 48px)); margin-inline: auto; }

.header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cream-bright) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 10%, transparent);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 44px; height: 44px; border-radius: 999px; background: var(--paper);
  display: grid; place-items: center; color: var(--cream); overflow: hidden;
}
.logo-mark img { height: 44px; width: 44px; object-fit: contain; outline: none; }
.logo-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); display: block; }
.logo-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); margin-top: 4px; display: block; }
.nav { display: none; gap: 12px; }
.nav a { font-size: 13px; font-weight: 500; color: var(--muted); }
.nav a:hover, .nav a.is-active { color: var(--navy); }
.header-call { display: none; }
.menu-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); cursor: pointer; }
.mobile-nav { display: none; padding: 8px 0 16px; border-top: 1px solid color-mix(in srgb, var(--navy) 10%, transparent); }
.mobile-nav.open { display: grid; gap: 4px; }
.mobile-nav a { min-height: 48px; display: flex; align-items: center; padding: 0 12px; font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 8px; font-weight: 500; font-size: 14px;
  border: 0; cursor: pointer; font-family: inherit;
}
.btn:active { transform: scale(0.96); }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-cream { background: var(--cream); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--cream); border: 1px solid color-mix(in srgb, var(--cream) 35%, transparent); }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; border-radius: 10px; }

.hero { position: relative; min-height: 100svh; color: var(--cream); background: var(--navy); isolation: isolate; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--navy-deep), color-mix(in srgb, var(--navy) 55%, transparent) 50%, color-mix(in srgb, var(--navy) 25%, transparent)); }
.hero-copy { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 112px 0 80px; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.kicker.light { color: var(--gold-soft); }
.hero h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); max-width: 16ch; }
.hero h1 em { display: block; font-style: italic; color: var(--gold-soft); }
.hero p { max-width: 36rem; color: color-mix(in srgb, var(--cream) 85%, transparent); margin-top: 20px; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }

.trust { background: var(--cream); border-bottom: 1px solid var(--line); }
.trust ul { list-style: none; margin: 0; padding: 24px 0; display: grid; gap: 12px; }
.trust li { font-size: 14px; color: var(--navy); }

.section { padding: 64px 0; }
.section h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--navy); }
.muted { color: var(--muted); }
.split { display: grid; gap: 40px; }
.navy-block { background: var(--navy); color: var(--cream); }
.navy-block h2, .navy-block h3 { color: var(--cream); }
.navy-block .muted { color: color-mix(in srgb, var(--cream) 75%, transparent); }

.ba { position: relative; border-radius: 16px; overflow: hidden; background: var(--navy); aspect-ratio: 4/3; touch-action: none; cursor: ew-resize; user-select: none; }
.ba.portrait { aspect-ratio: 3/4; max-width: 32rem; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--cream); z-index: 2; }
.ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px; background: var(--cream); color: var(--navy);
  display: grid; place-items: center;
}
.ba-tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: 4px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.ba-tag.after { left: 12px; background: color-mix(in srgb, var(--navy) 80%, transparent); }
.ba-tag.before { right: 12px; background: color-mix(in srgb, var(--ink) 70%, transparent); }

.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 32px; }
.steps li { border-top: 1px solid var(--line); padding-top: 20px; }
.steps .n { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--gold); }
.rounded { border-radius: 16px; }
.mt-8 { margin-top: 32px; }
.mt-4 { margin-top: 16px; }

.cards { display: grid; gap: 24px; margin-top: 40px; }
.card { background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card-body { padding: 24px; }
.card h3 { font-size: 24px; color: var(--navy); }

.quote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--navy); line-height: 1.3; }
.license-card { background: var(--navy); color: var(--cream); border-radius: 16px; padding: 32px; }
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding: 0; list-style: none; }
.cities li { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--navy); }

.form { display: grid; gap: 20px; }
.grid-2 { display: grid; gap: 20px; }
label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; color: var(--navy); }
input, select, textarea {
  height: 48px; width: 100%; border: 1px solid var(--line); background: var(--paper);
  border-radius: 8px; padding: 0 16px; font: inherit; color: var(--ink);
}
textarea { height: auto; min-height: 128px; padding: 12px 16px; }
.err { color: #8b1e1e; font-size: 14px; font-weight: 400; }
.success { background: var(--navy); color: var(--cream); border-radius: 16px; padding: 32px; }

.page-head { background: var(--cream); border-bottom: 1px solid var(--line); padding: 56px 0; }
.page-head h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); color: var(--navy); max-width: 16ch; }

.footer { background: var(--navy); color: var(--cream); padding: 56px 0 0; }
.footer-grid { display: grid; gap: 40px; padding-bottom: 56px; }
.footer a:hover { color: var(--cream); }
.footer .logo-kicker { color: var(--cream); }
.footer .logo-mark { background: color-mix(in srgb, var(--cream) 10%, transparent); }
.subfoot { border-top: 1px solid color-mix(in srgb, var(--cream) 10%, transparent); padding: 20px 0; font-size: 12px; color: color-mix(in srgb, var(--cream) 70%, transparent); display: flex; flex-direction: column; gap: 8px; }

.mobile-cta {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: color-mix(in srgb, var(--cream-bright) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--navy) 10%, transparent);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pad-cta { padding-bottom: 96px; }

.gallery-grid { display: grid; gap: 16px; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }

.looks { display: grid; gap: 24px; margin-top: 40px; }
.looks article { background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.looks img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.looks h3 { padding: 0 24px; margin-top: 20px; font-size: 24px; color: var(--navy); }
.looks p { padding: 8px 24px 24px; }

.bases { display: grid; gap: 32px; margin-top: 40px; }
.bases img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; }

.fixtures { display: grid; gap: 20px; margin-top: 40px; }
.fixtures article { background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.fixtures img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fixtures h3 { padding: 16px 20px 0; font-size: 20px; color: var(--navy); }
.fixtures p { padding: 4px 20px 20px; }

.finishes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; list-style: none; padding: 0; }
.finish { background: var(--paper); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.swatch { height: 96px; border-radius: 10px; }
.swatch.chrome { background: linear-gradient(145deg, #f3f3f3, #8d8d8d); }
.swatch.nickel { background: linear-gradient(145deg, #ddd6c8, #7a7468); }
.swatch.bronze { background: linear-gradient(145deg, #8a5a34, #3a2214); }
.swatch.black { background: linear-gradient(145deg, #3a3a3a, #0c0c0c); }
.finish p { margin-top: 12px; font-family: var(--font-display); font-size: 20px; color: var(--navy); }

.therapy { display: grid; gap: 32px; margin-top: 40px; }
.therapy img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; }

.look-row { display: grid; gap: 16px; }
.look-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }

.hero-ticks { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hero-ticks li { font-size: 14px; color: color-mix(in srgb, var(--cream) 85%, transparent); padding-left: 22px; position: relative; }
.hero-ticks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 999px; background: var(--gold-soft); }

.compare { overflow-x: auto; }
.compare table { width: 100%; min-width: 36rem; border-collapse: collapse; text-align: left; }
.compare th, .compare td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.compare tbody th { font-family: var(--font-display); font-size: 18px; color: var(--navy); font-weight: 600; }
.compare td { font-size: 14px; color: var(--muted); }
.compare tbody td:last-child { color: var(--navy); }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 18px; color: var(--navy); padding: 16px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; max-width: 42rem; color: var(--muted); font-size: 14px; }

@media (min-width: 640px) {
  .hero-actions { flex-direction: row; }
  .hero-ticks { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
  .trust ul { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .looks { grid-template-columns: 1fr 1fr; }
  .fixtures { grid-template-columns: 1fr 1fr; }
  .look-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1100px) {
  .nav, .header-call { display: flex; }
  .menu-btn, .mobile-cta { display: none; }
  .pad-cta { padding-bottom: 0; }
  .split { grid-template-columns: 5fr 7fr; align-items: center; }
  .split-equal { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 5fr 3fr 4fr; }
  .subfoot { flex-direction: row; justify-content: space-between; }
  .gallery-grid { grid-template-columns: 1fr 1fr 1fr; }
  .fixtures { grid-template-columns: 1fr 1fr 1fr; }
  .finishes { grid-template-columns: repeat(4, 1fr); }
  .therapy { grid-template-columns: 1fr 1fr 1fr; }
  .bases { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Reviews page */
.review-asks { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 900px) {
  .review-asks { grid-template-columns: 1fr 1fr; }
}
.review-ask-row { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 640px) {
  .review-ask-row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.review-qr { width: 160px; height: 160px; background: var(--cream-bright); padding: 8px; border-radius: 12px; outline: 1px solid color-mix(in srgb, var(--navy) 10%, transparent); flex-shrink: 0; }
.review-actions { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }

/* 2026-10-03: one clear click-to-call in the sticky header, every page */
.header-call {
  display: inline-flex;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.header-inner { gap: 8px; }
.mobile-cta { display: none; }
body.pad-cta { padding-bottom: 0; }
@media (max-width: 540px) {
  .logo-name { display: none; }
  .header-call { height: 40px; padding: 0 10px; font-size: 12px; }
}
/* 2026-10-10 Website SEO (STAGED, approval pending): phones only (max 767px).
   Turns on the existing "Call | Free estimate" bottom bar, makes the header call button 44px tall,
   and adds bottom room to the body so the bar never covers the footer or the form button.
   Tablet and desktop (768px and up) are unchanged. */
@media (max-width: 767px) {
  .mobile-cta { display: grid; }
  body.pad-cta { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  .header-call { height: 44px; }
}

/* ===== ADA / WCAG 2.1 AA fixes (2026-10-20, preview only) ===== */
/* 1.4.11: form field borders were #c5e0e6 on white (1.38:1); now 3.68:1 */
input, select, textarea { border-color: #6b8a96; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #8b1e1e; border-width: 2px; }
/* 2.4.7 / 1.4.11: focus ring #1a6e80 on navy was 1.59:1; light ring on dark areas (4.97:1) */
.footer a:focus-visible, .footer button:focus-visible, .navy-block a:focus-visible, .navy-block button:focus-visible,
.navy-block input:focus-visible, .navy-block select:focus-visible, .navy-block textarea:focus-visible,
.btn-navy:focus-visible, .mobile-cta a:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-width: 3px; }
/* 1.4.1: links inside text blocks must not rely on color alone */
.footer-cities a, .footer p.muted a, .muted a, main p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
/* Readability: smallest text raised (13px nav -> 14px, 12px -> 13px) */
.nav a { font-size: 14px; }
.subfoot { font-size: 13px; }
.kicker, .steps .n, .compare thead th { font-size: 13px; }
.rp-type { font-size: 13px !important; }
.ba-tag { font-size: 12px; }
form[data-quote] p.muted[style*="font-size:12px"] { font-size: 13px !important; }
/* 2.1.1: scrollable comparison table reachable by keyboard (tabindex added in HTML) */
.compare:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }


/* 2026-10-20 header fix (iOS Safari): sticky + translucent backdrop-filter header was being
   painted mid-screen during momentum scroll on long pages. On phones/tablets the header is now
   position:fixed with a solid background (no backdrop blur), and the page is padded by its height. */
@media (max-width: 1099px) {
  .header { position: fixed; top: 0; left: 0; right: 0; background: var(--cream-bright);
    -webkit-backdrop-filter: none; backdrop-filter: none; transform: translateZ(0); }
  body { padding-top: 65px; }
  .mobile-nav.open { max-height: calc(100dvh - 65px); overflow-y: auto; }
}
/* keep focused fields and anchor targets clear of the header (ADA 2.4.11) */
html { scroll-padding-top: 80px; }
input, select, textarea, [id] { scroll-margin-top: 96px; }

/* 2026-10-21 bigger text (approved preview 10/21/2026): body 17px phones / 18px from 768px, menu 16px,
   header call button 15px, nothing under 14px. h1 sizes untouched. Appended; no earlier rule edited. */
body { font-size: 17px; line-height: 1.6; }
@media (min-width: 768px) { body { font-size: 18px; } }
/* paragraphs, list items, table cells, captions, labels that were 13-15px -> body size */
p, li, td, figcaption, blockquote footer, .faq details p, .trust li, .hero-ticks li, .compare td, .err { font-size: 1em; }
body p:not(.kicker):not(.rp-type)[style*="font-size:12px"], body p:not(.kicker):not(.rp-type)[style*="font-size:13px"],
body p:not(.kicker):not(.rp-type)[style*="font-size:14px"], body p:not(.kicker):not(.rp-type)[style*="font-size:15px"],
body li[style*="font-size:14px"], body td[style*="font-size:14px"] { font-size: 1em !important; }
label { font-size: 16px; }
/* menu links 16px */
.nav a, .mobile-nav a { font-size: 16px; }
/* header phone button 15px (phones too) */
.header-call { font-size: 15px; }
@media (max-width: 540px) { .header-call { font-size: 15px; padding: 0 10px; } }
/* smallest text anywhere: 14px */
.kicker, .steps .n, .compare thead th, .logo-kicker, .logo-name, .ba-tag { font-size: 14px; }
.subfoot, .skip-link { font-size: 14px; }
.rp-type { font-size: 14px !important; }
[style*="font-size:11px"], [style*="font-size:12px"], [style*="font-size:13px"],
[style*="font-size: 11px"], [style*="font-size: 12px"], [style*="font-size: 13px"] { font-size: 14px !important; }
form[data-quote] p.muted[style*="font-size:12px"] { font-size: 14px !important; }
.project-card .muted, .rp-card .muted { font-size: 1em !important; }
/* keep each menu link and the logo on one line at the bigger size */
.nav a, .logo-kicker, .logo-name, .header-call { white-space: nowrap; }
.nav { gap: 16px; }
/* the full menu needs ~1240px at 16px: from 1100-1279px keep the menu button instead */
@media (min-width: 1100px) and (max-width: 1279px) { .nav { display: none; } .menu-btn { display: inline-block; } }

/* hero text legibility, approved by Tony 10/21/2026 11:21 PM PT (overlay + photo unchanged) */
.hero h1, .hero h1 em { font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.6); }
.hero p:not(.hero-note), .hero-ticks li, .hero .kicker { color: #fff; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.55); }
.hero-copy > h1, .hero-copy > p:not(.direct-line):not(#reviews-stars):not(.hero-note) { background: rgba(2,49,79,.72); padding: 6px 12px; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-ticks { background: rgba(2,49,79,.72); padding: 8px 12px; border-radius: 8px; }

/* 2026-10-22 c7 PREVIEW: obvious mobile navigation (Tony 10/22/2026 1:14 + 1:15 AM PT).
   Labeled Menu button, quick-links row under the header (phones/tablets), hero "Find more details" button. */
.menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 44px; height: 44px;
  padding: 0 12px; border: 2px solid var(--navy); border-radius: 8px; background: var(--cream); color: var(--navy);
  font: 700 15px/1 var(--font-sans, inherit); flex: 0 0 auto; }
.menu-btn .menu-ico { font-size: 18px; line-height: 1; }
.menu-btn[aria-expanded="true"] { background: var(--navy); color: var(--cream); }
.quick-links { display: none; }
@media (max-width: 1099px) {
  .quick-links { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 6px 12px 8px; border-top: 1px solid color-mix(in srgb, var(--navy) 10%, transparent); background: var(--cream-bright); }
  .quick-links::-webkit-scrollbar { display: none; }
  .quick-links a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
    background: var(--navy); color: var(--cream); font-size: 15px; font-weight: 600; white-space: nowrap; }
  body.has-quick { padding-top: 123px; }
  html { scroll-padding-top: 135px; }
  body.has-quick .mobile-nav.open { max-height: calc(100dvh - 123px); }
}
@media (max-width: 540px) {
  .header-inner { width: calc(100% - 24px); gap: 6px; }
  .logo { gap: 8px; }
  .menu-btn { padding: 0 10px; }
}
.btn-more { background: #ffd23f; color: var(--navy-deep, #02314f); font-weight: 700; border: 2px solid #fff; }
.hero-more { margin-top: 14px; }
.hero-copy > p.hero-more { background: none !important; padding: 0 !important; }
.hero .btn-more, .hero .hero-more { text-shadow: none !important; }
.hero-more .svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; background: none !important; padding: 0 !important; text-shadow: none !important; }
.hero-more .svc-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: #fff; color: var(--navy); font-size: 15px; font-weight: 600; border: 2px solid #ffd23f; white-space: nowrap; }
.hero-more .svc-chips a { text-decoration: none; }
/* 10/22/2026 header fit fix (Website SEO, preview 20261022hdr1). Root cause: the "Labeled Menu button" block above sets
   .menu-btn display:inline-flex with no media query, after the min-width:1100px rule that hid it, so on desktop the
   Menu button showed next to the full nav; logo+nav+call+Menu (~1300px) overflowed the 1152px .wrap (page 1406px at 1366).
   The stray <br /> inside .nav also added an extra 16px flex gap. */
.nav br { display: none; }
@media (min-width: 1280px) {
  .menu-btn { display: none; }
  .header-inner { width: min(1240px, calc(100% - 32px)); }
  .nav { gap: 14px; flex-wrap: nowrap; min-width: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .nav { display: none; } .menu-btn { display: inline-flex; } }
.header-inner { max-width: 100%; }
.header-inner > * { min-width: 0; }
/* 10/22/2026 hero photo visible (Tony 1:30 PM PT): lighter scrim; every hero text block keeps its own navy box
   (rgba(2,49,79,.72) => white text >= 5:1 and gold-soft h1 line >= 3:1 large text, over any photo pixel). Boxes hug the text. */
.hero-scrim { background: linear-gradient(to top, rgba(2,49,79,.45), rgba(2,49,79,.12) 55%, rgba(2,49,79,0)); }
.hero-copy > h1, .hero-copy > p:not(.hero-more), .hero-copy > .kicker, .hero-ticks { width: fit-content; max-width: min(100%, 40rem); }
.hero-copy > p.direct-line, .hero-copy > #reviews-stars { background: rgba(2,49,79,.78) !important; padding: 8px 12px !important; border-radius: 8px; }
.hero-copy > #reviews-stars { padding: 6px 12px !important; }

/* 10/22 use-test: project card photos forced to 3:2 were stretched on desktop -> crop instead */
.rp-grid .rp-card img{object-fit:cover}
/* 10/23/2026 trust list side space on phones (Tony 10:44 AM PT). Root cause: ".trust ul { margin: 0 }" overrides
   .wrap's margin-inline:auto, so the list sat flush left. Phones only; desktop unchanged. */
@media (max-width: 639px) {
  .trust ul { margin-inline: auto; padding-inline: 20px; box-sizing: border-box; }
}
/* 10/23/2026 home H1 phone fit (Tony 10:46 AM PT): "A new bathroom." on one line at 375-430px. Desktop unchanged. */
@media (max-width: 430px) {
  .hero h1 .h1-l1 { display: block; white-space: nowrap; font-size: clamp(1.9rem, 9.4vw, 2.5rem); }
  .hero h1 em { font-size: clamp(1.75rem, 8.4vw, 2.25rem); }
}
/* variant B: white first line with thin yellow underline accent */
.hero h1.h1-b .h1-l1 { color: #fff; text-decoration: underline; text-decoration-color: #ffd23f; text-decoration-thickness: 3px; text-underline-offset: 6px; }
/* 10/23/2026 finished-project photos full view (Tony 10:48 + 10:49 AM PT). Root cause: inline style="aspect-ratio:3 / 2"
   on .rp-card photos with object-fit:cover cut off tubs/showers. Show each photo at its own shape, no crop. */
.rp-card img, .project-card img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }