@view-transition { navigation: auto; }

:root {
  --orange: #FF6804;
  --orange-2: oklch(72% 0.2 45);
  --navy: #0F1B2D;
  --navy-2: #1A2A47;
  --gold: #D3B574;
  --cream: #F5F0E6;
  --ink: #0A0A0A;
  --ink-2: #4A4A4A;
  --ink-3: #8A8A8A;
  --bg: #FAF8F4;
  --line: color-mix(in oklch, var(--navy) 12%, transparent);
  --radius: 12px;
  --radius-lg: 24px;
  --container: 1600px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-variation-settings: 'opsz' 144; }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); font-variation-settings: 'opsz' 72; }
h3 { font-size: 1.4rem; font-variation-settings: 'opsz' 36; }
p { color: var(--ink-2); text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.italic-grad {
  font-style: italic; font-weight: 500;
  background: linear-gradient(120deg, var(--orange), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Fluid gutters: content grows with the viewport up to --container, then centers.
   Gutter = clamp(40px, 8vw, 128px) total, so ~20px each side on phones scaling to
   ~64px each side on wide screens. rem-based, respects zoom; no vw-only sizing. */
.container { width: min(100% - clamp(3.5rem, 10.5vw, 8rem), var(--container)); margin-inline: auto; }
.eyebrow {
  color: var(--orange); font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em;
}
.lead { font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--ink-2); max-width: 640px; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px 0; transition: all .3s var(--ease-out);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.nav.transparent { background: transparent; border-color: transparent; }
.nav.dark { background: color-mix(in oklch, var(--ink) 80%, transparent); border-color: rgba(255,255,255,.06); }
.nav.dark .logo { color: #fff; }
.nav.dark .nav-links a { color: rgba(255,255,255,.7); }
.nav.dark .nav-links a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.5rem; color: var(--navy); letter-spacing: -0.03em; }
.logo span { color: var(--orange); }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 14px; border-radius: 100px; font-size: 0.9rem; font-weight: 500;
  color: var(--ink); transition: all .2s var(--ease-out);
}
.nav-links a:hover { background: color-mix(in oklch, var(--navy) 8%, transparent); }
.nav-links a.financing { color: var(--orange); }
/* Injected mobile-drawer contact block — hidden on desktop; revealed only inside
   the ≤1100px drawer (see the mobile nav media query). */
.nav-drawer-extras { display: none; }
/* Services dropdown */
.nav-dd { position: relative; display: flex; }
.nav-dd-toggle { font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; transition: all .2s var(--ease-out); }
.nav-dd-toggle .dd-caret { font-size: 0.7em; transition: transform .2s; }
.nav-dd:hover .nav-dd-toggle, .nav-dd:focus-within .nav-dd-toggle { background: color-mix(in oklch, var(--navy) 8%, transparent); }
.nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret { transform: rotate(180deg); }
.nav.transparent .nav-dd-toggle { color: rgba(255,255,255,.85); }
.nav.dark .nav-dd-toggle { color: rgba(255,255,255,.7); }
.nav-dd-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(15,27,45,.18); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s; z-index: 200; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu a { padding: 10px 14px; border-radius: 9px; font-size: 0.92rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.nav-dd-menu a:hover { background: color-mix(in oklch, var(--navy) 8%, transparent); }
/* menu is always a light floating panel on desktop — force items dark over any nav variant or page-level inline nav-link colors */
@media (min-width: 1101px) { .nav-dd-menu a { color: var(--ink) !important; } }
.cta-pill {
  background: var(--ink); color: var(--bg);
  padding: 12px 22px; border-radius: 100px;
  font-weight: 600; font-size: 0.92rem;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s var(--ease-spring);
}
.cta-pill:hover { background: var(--orange); color: #fff; transform: scale(1.04); }

/* ============ BUTTONS ============ */
.btn-primary {
  background: var(--ink); color: var(--bg);
  padding: 18px 32px; border-radius: 100px;
  font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; gap: 12px;
  transition: all .3s var(--ease-spring);
  border: none; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { transform: translateY(-2px); background: var(--orange); box-shadow: 0 20px 40px -10px color-mix(in oklch, var(--orange) 50%, transparent); color: #fff; }
.btn-ghost {
  padding: 16px 28px; border-radius: 100px;
  font-weight: 500; font-size: 0.95rem; color: var(--navy);
  border: 1px solid color-mix(in oklch, var(--navy) 30%, transparent);
  transition: all .25s var(--ease-out);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-ghost-light {
  padding: 16px 28px; border-radius: 100px;
  font-weight: 500; font-size: 0.95rem; color: #fff;
  border: 1px solid rgba(255,255,255,.25); display: inline-flex; align-items: center; gap: 10px;
  transition: all .25s var(--ease-out);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

/* ============ MESH BG ============ */
.mesh-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mesh-bg::before {
  content:''; position: absolute; inset: 0;
  background:
    radial-gradient(at 20% 30%, color-mix(in oklch, var(--gold) 60%, transparent) 0%, transparent 40%),
    radial-gradient(at 80% 20%, color-mix(in oklch, var(--orange) 30%, transparent) 0%, transparent 45%),
    radial-gradient(at 60% 80%, color-mix(in oklch, var(--navy) 20%, transparent) 0%, transparent 50%),
    radial-gradient(at 10% 90%, color-mix(in oklch, var(--gold) 40%, transparent) 0%, transparent 40%);
  filter: blur(40px); animation: drift 24s ease-in-out infinite alternate;
}
.mesh-bg.dark::before {
  background:
    radial-gradient(at 75% 30%, color-mix(in oklch, var(--orange) 30%, transparent) 0%, transparent 55%),
    radial-gradient(at 20% 80%, color-mix(in oklch, var(--gold) 35%, transparent) 0%, transparent 50%);
}
@keyframes drift {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-3%, 2%) scale(1.05); }
  100% { transform: translate(2%, -3%) scale(0.98); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--orange) 60%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rise { from { transform: translateY(110%); } to { transform: translateY(0); } }

/* ============ HEROS ============ */
.page-hero { padding: 140px 0 80px; position: relative; overflow: hidden; }
.page-hero.dark { background: var(--ink); color: #fff; }
.page-hero.dark h1, .page-hero.dark h2, .page-hero.dark h3 { color: #fff; }
.page-hero.dark p { color: rgba(255,255,255,.78); }
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 24px; }
.breadcrumb a { color: var(--ink-3); }
.dark .breadcrumb { color: rgba(255,255,255,.5); }
.dark .breadcrumb a { color: rgba(255,255,255,.6); }
.glass-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 100px;
  background: color-mix(in oklch, white 60%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in oklch, white 80%, transparent);
  font-size: 0.85rem; font-weight: 500; color: var(--navy);
  margin-bottom: 24px;
  animation: fadeUp .8s var(--ease-out) both;
}
.glass-pill.dark {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
}
.glass-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 2s infinite; }

.page-hero h1 { color: var(--navy); margin-bottom: 24px; max-width: 1000px; }
.page-hero h1 em { font-style: italic; font-weight: 500;
  background: linear-gradient(120deg, var(--orange), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero .lead { margin-bottom: 32px; }

/* SPEC STRIP — for service page headers */
.spec-strip {
  margin-top: 48px; padding: 28px;
  background: color-mix(in oklch, white 70%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid color-mix(in oklch, white 80%, transparent);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px;
}
.spec-strip .cell .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 6px; font-weight: 600; }
.spec-strip .cell .val { font-family: 'Fraunces',serif; font-size: 1.3rem; color: var(--navy); font-weight: 600; }

/* ============ SECTIONS ============ */
.section { padding: 120px 0; }
.section.compact { padding: 80px 0; }
.section.dark { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.section.dark::before {
  content:''; position:absolute; top:-30%; right:-20%; width:80%; height:160%;
  background: radial-gradient(circle, color-mix(in oklch, var(--orange) 20%, transparent), transparent 60%);
  filter: blur(80px); pointer-events: none;
}
.section.dark .container { position: relative; }
.section.dark h2 { color: #fff; }
.section.dark p { color: rgba(255,255,255,.75); }
.section.cream { background: var(--cream); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { color: var(--navy); margin-top: 16px; }
.section.dark .section-head h2 { color: #fff; }
.section-head p { font-size: 1.1rem; margin-top: 16px; }

/* ============ CARDS ============ */
.card-grid { display: grid; gap: 24px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px;
  display: flex; flex-direction: column; gap: 16px;
  transition: all .3s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px color-mix(in oklch, var(--navy) 20%, transparent); }
.card .step-num {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 3rem; line-height: 1;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card.glass {
  background: color-mix(in oklch, white 5%, transparent);
  backdrop-filter: blur(20px);
  border-color: color-mix(in oklch, white 10%, transparent);
  color: #fff;
}
.card.glass:hover { background: color-mix(in oklch, white 8%, transparent); border-color: var(--orange); }
.card.glass h3 { color: #fff; }
.card.glass p { color: rgba(255,255,255,.75); }

/* ============ INCLUDES LIST ============ */
.includes { list-style: none; }
.includes li {
  display: flex; gap: 16px; padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: padding .3s var(--ease-out);
}
.includes li:hover { padding-left: 12px; }
.includes li::before {
  content: '✓'; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}
.includes strong { color: var(--navy); font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.05rem; display: block; margin-bottom: 4px; }
.includes p { font-size: 0.92rem; }

/* ============ FAQ (HTML5 details) ============ */
.faq details { border-bottom: 1px solid var(--line); padding: 24px 0; }
.faq summary {
  font-family: 'Fraunces',serif; font-size: 1.2rem; color: var(--navy); font-weight: 600;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--orange); font-size: 1.5rem; font-weight: 400; transition: transform .3s var(--ease-spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; font-size: 0.98rem; line-height: 1.6; }

/* ============ MARQUEE ============ */
/* Served-area band — static (was a 30s scrolling, in-marquee-separated marquee; de-telled 2026-07-08 per anti-patterns.md) */
.served-band { background: var(--ink); color: var(--bg); padding: 22px 0; border-block: 1px solid color-mix(in oklch, white 10%, transparent); }
.served-band .container { display: flex; align-items: baseline; justify-content: center; gap: 14px 18px; flex-wrap: wrap; text-align: center; }
.served-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); font-weight: 600; }
.served-cities { font-family: 'Fraunces', serif; font-size: 1.15rem; font-style: italic; color: color-mix(in oklch, var(--bg) 85%, transparent); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ============ CTA BAND ============ */
.cta-band { padding: 120px 0; background: var(--ink); color: #fff; position: relative; overflow: hidden; text-align: center; }
.cta-band::before { content:''; position:absolute; inset:-10%; background: radial-gradient(at 50% 50%, color-mix(in oklch, var(--orange) 30%, transparent), transparent 50%); filter: blur(80px); pointer-events: none; }
.cta-band .container { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(2rem, 5vw, 4rem); max-width: 900px; margin: 16px auto 24px; }
.cta-band h2 em { font-style: italic; background: linear-gradient(120deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-band p { color: rgba(255,255,255,.78); font-size: 1.15rem; max-width: 580px; margin: 0 auto 36px; }
.cta-band .btn-primary { background: var(--orange); }
.cta-band .btn-primary:hover { background: #fff; color: var(--orange) !important; }

/* ============ FOOTER ============ */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 80px 0 28px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer h4 { color: #fff; font-family: 'Inter',sans-serif; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 18px; font-weight: 600; }
.footer a { color: rgba(255,255,255,.6); display: block; padding: 5px 0; font-size: 0.9rem; transition: color .2s; }
.footer a:hover { color: var(--orange); }
.footer-logo { font-family: 'Fraunces',serif; font-weight: 700; font-size: 1.7rem; color: #fff; margin-bottom: 14px; }
.footer-logo span { color: var(--orange); }
.footer .small { color: rgba(255,255,255,.5); font-size: 0.88rem; max-width: 260px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; display: flex; justify-content: space-between; font-size: 0.82rem; color: rgba(255,255,255,.4); flex-wrap: wrap; gap: 12px; }
.footer-bottom a { display: inline; color: rgba(255,255,255,.5); }

/* ============ MEDIA ============ */
@media (max-width: 1000px) {
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .card-grid.cols-2, .card-grid.cols-3 { grid-template-columns: 1fr; }
  .spec-strip { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section, .page-hero { padding: 80px 0 56px; }
  .page-hero { padding-top: 96px; } /* clear the fixed nav (~73px) on mobile */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ============================================================
   Mobile menu + spacing fixes — appended v1.0.2
   ============================================================ */

/* Hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  transition: background .2s;
}
.nav-toggle:hover { background: color-mix(in oklch, var(--navy) 8%, transparent); }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  /* nav bar is dark (ink 80%) in every context incl. transparent-over-hero, so bars are white.
     Was var(--navy) → invisible dark-on-dark on all non-.nav.dark pages + homepage hero. */
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease-spring), opacity .2s;
  transform-origin: center;
}
.nav.dark .nav-toggle span { background: #fff; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Lock body scroll when menu open */
body.nav-overlay { overflow: hidden; }

/* Mobile / narrow-desktop nav — hamburger at ≤1100px.
   Oryn-style full-screen drawer: left-aligned numbered nav rows with dividers,
   then a contact block (phone, address, email), a CTA, and a company-info footer.
   The contact block is injected once by the menu JS into `.nav-links` (see page
   footer script) so it stays single-source across all pages. */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .nav .cta-pill { display: none; }
  .nav-links {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: var(--bg);
    flex-direction: column !important;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    padding: 92px 28px 44px;
    gap: 0;
    counter-reset: navidx;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease-out);
    display: flex !important;
    z-index: 99;
  }
  .nav.nav-open .nav-links {
    opacity: 1;
    pointer-events: auto;
  }
  /* Full-screen menu bg is light on the transparent (homepage) nav — make the
     logo + hamburger/X dark so the close control stays visible over the cream drawer. */
  .nav.nav-open:not(.dark) .logo { color: var(--navy); }
  .nav.nav-open:not(.dark) .nav-toggle span { background: var(--navy); }
  /* nav has backdrop-filter (own stacking context) so the fixed drawer (z99) would paint
     over the logo + X — lift them above it so the close control stays visible/clickable. */
  .nav .logo, .nav-toggle { position: relative; z-index: 101; }
  .nav.dark .nav-links {
    background: var(--ink);
  }
  /* When open, cover the bar area with an opaque strip so the logo + X sit on a
     solid fill and scrolled drawer rows are hidden behind them. The drawer
     (`.nav-links`), the logo and the X all live INSIDE `.container` (its own
     stacking context, z-index:2), so the strip must live there too — at z-100 it
     sits ABOVE the drawer rows (z-99) and BELOW the logo + X (z-101). Fixed + full
     width so it spans past the container's side padding. */
  .nav.nav-open .container::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 68px;
    background: var(--bg); z-index: 100;
  }
  .nav.dark.nav-open .container::before { background: var(--ink); }

  /* Numbered nav rows with hairline dividers (only real nav links, not the
     injected contact links — those live inside .nav-drawer-extras). */
  .nav .nav-links > a,
  .nav .nav-links .nav-dd-menu a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-family: 'Fraunces', serif;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--navy);
    padding: 15px 2px;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav .nav-links > a::before,
  .nav .nav-links .nav-dd-menu a::before {
    counter-increment: navidx;
    content: counter(navidx, decimal-leading-zero);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--orange);
    min-width: 22px;
    line-height: 1;
    padding-top: 6px;
  }
  .nav .nav-links a.financing { color: var(--orange); }
  .nav .nav-links > a:hover,
  .nav .nav-links .nav-dd-menu a:hover { background: transparent; color: var(--orange); }
  /* dark-nav drawer link colors */
  .nav.dark .nav-links > a,
  .nav.dark .nav-links .nav-dd-menu a { color: #fff; border-color: rgba(255,255,255,.10); }
  .nav.dark .nav-links > a:hover,
  .nav.dark .nav-links .nav-dd-menu a:hover { color: var(--orange); }

  /* Services dropdown flattens into the drawer list */
  .nav-dd { flex-direction: column; width: 100%; }
  .nav-dd-toggle { display: none; }
  .nav-dd-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0; min-width: 0; gap: 0; display: flex; flex-direction: column; }
  .nav-dd-menu a { white-space: normal; }

  /* Injected contact / company / CTA block (Oryn-style). Hidden by default so it
     stays invisible in the desktop nav bar it's appended into; shown only here. */
  .nav-drawer-extras { display: block; margin-top: 32px; }
  .nde-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--orange);
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  /* Extras links are scoped through .nav-drawer-extras so they out-specify the
     base `.nav-links a { color: … }` rule (incl. the homepage's white links). */
  .nav-drawer-extras .nde-phone {
    display: block; font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.9rem; letter-spacing: -0.02em; color: var(--navy); line-height: 1.1;
  }
  .nav-drawer-extras .nde-phone:hover { color: var(--orange); }
  .nde-addr {
    font-style: normal; color: var(--ink-3); font-size: 0.95rem;
    line-height: 1.55; margin: 10px 0 14px;
  }
  .nav-drawer-extras .nde-email { display: block; width: fit-content; color: var(--ink-2); font-size: 0.95rem; }
  .nav-drawer-extras .nde-email:hover { color: var(--orange); }
  .nav-drawer-extras .nde-cta {
    display: flex; align-items: center; justify-content: center;
    margin: 26px 0 22px; padding: 16px 28px;
    background: var(--orange); color: #fff;
    font-weight: 600; font-size: 1rem; border-radius: 100px;
  }
  .nav-drawer-extras .nde-cta:hover { background: color-mix(in oklch, var(--orange) 88%, #000); }
  .nde-meta { color: var(--ink-3); font-size: 0.78rem; line-height: 1.5; }
  /* dark-nav drawer variants for the injected block */
  .nav.dark .nde-phone { color: #fff; }
  .nav.dark .nde-addr, .nav.dark .nde-meta { color: rgba(255,255,255,.55); }
  .nav.dark .nde-email { color: rgba(255,255,255,.75); }
  .nav.dark .nde-label { border-color: rgba(255,255,255,.12); }
  .nav.dark .nav-drawer-extras .nde-label,
  .nav.dark .nav-links > a { border-color: rgba(255,255,255,.10); }
}

/* ============================================================
   Spacing fixes: WP admin bar offset, sticky nav, hero polish
   ============================================================ */

/* Account for WP admin bar on logged-in views (32px desktop, 46px mobile) */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
  .admin-bar .nav-links { top: 116px; }
}

/* Hero-stats + hero h1/actions responsive rules used to be duplicated here; they
   are fully covered by the body.home responsive block below (higher specificity,
   wider breakpoint), so only the global h1/h2 clamps remain. */
@media (max-width: 720px) {
  h1 { font-size: clamp(2rem, 9vw, 3.5rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
}

/* Sticky guarantee cards margin fix for mobile */
@media (max-width: 720px) {
  .g-card { margin: 0 16px; padding: 32px 24px !important; }
  .marquee-item { font-size: 1.15rem !important; gap: 36px !important; }
  .marquee-track { gap: 36px !important; }
}

/* Spec strip stack on tablet, single column on mobile */
@media (max-width: 900px) {
  .spec-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 540px) {
  .spec-strip { grid-template-columns: 1fr 1fr !important; gap: 16px !important; padding: 20px !important; }
}

/* Footer grid: tighten on mobile */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 540px) {
  .section, .page-hero { padding: 60px 0 48px; }
  .page-hero { padding-top: 96px; } /* clear the fixed nav (~73px) on mobile */
}

/* Prevent horizontal scroll caused by .mesh-bg or gradients overflowing */
.mesh-bg, .mesh-bg::before { contain: layout paint; }
html, body { overflow-x: hidden; max-width: 100vw; }

/* Img tags should display block and respect container radius if provided */
.svc img, .gal-item img, .gallery-grid img, .atype img, .team-card img, .mat img, .sec-block img,
.story-img img, .local-photo img, .area-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-img, .local-photo { overflow: hidden; }


/* Image override for ::before-styled cards */
.svc[style*="--bg-img"]::before,
.sec-block[style*="--bg-img"]::before {
  background: var(--bg-img) center / cover no-repeat !important;
}

/* ─── Hero h1 animation fix ───────────────────────────────────────────────
   At ≤900px disable the translateY reveal so prefers-reduced-motion users
   and any slow-render context see the headline rather than a blank space.
   The real browser animation still runs normally for everyone else.     */
@media (max-width: 900px) {
  body.home .hero h1 .line { overflow: visible !important; }
  body.home .hero h1 .word { transform: none !important; animation: none !important; display: inline !important; }
}
/* ─── Homepage responsive layout (body.home = WP front page) ─────────────
   Scoped to body.home so rules don't bleed onto service/about pages.
   All px values — no rem conversion.                                    */

@media (max-width: 1100px) {
  body.home .hero-stats { position: static !important; flex-wrap: wrap; margin-top: 40px; justify-content: flex-start; gap: 32px; }
  body.home .hero-stat { text-align: left; }
  body.home .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 32px; }
  body.home .t-grid { grid-template-columns: 1fr !important; }
  body.home .svc-grid { grid-template-columns: 1fr !important; }
  body.home .areas-grid { grid-template-columns: 1fr !important; gap: 40px; }
  body.home .areas-list { grid-template-columns: 1fr 1fr; }
  body.home .area-map { position: relative; aspect-ratio: 16/9; } /* relative (not static) so the absolute .label stays anchored to the map, not escaping into the hero */
}

@media (max-width: 720px) {
  /* Hero */
  body.home .hero { min-height: unset !important; padding: 90px 0 48px !important; align-items: flex-start; }
  body.home .hero h1 { font-size: clamp(1.75rem, 8vw, 3rem) !important; margin-bottom: 16px; }
  body.home .hero p.lead { font-size: 1rem !important; max-width: 100% !important; margin-bottom: 24px; animation: none; }
  body.home .hero-actions { flex-direction: column !important; gap: 12px; animation: none; }
  body.home .hero-actions .btn-primary,
  body.home .hero-actions .btn-ghost { justify-content: center; width: 100%; }
  body.home .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; position: static !important; }
  body.home .hero-stat .num { font-size: 1.875rem; }
  body.home .glass-pill { font-size: 0.78rem; padding: 6px 14px; }
  /* Areas */
  body.home .areas-section { padding: 64px 0; }
  body.home .areas-list { grid-template-columns: 1fr !important; gap: 0; }
  body.home .area-map { display: none !important; }
  /* Guarantees */
  body.home .guarantees-intro { min-height: unset; padding: 48px 0 32px; }
  body.home .guarantees-intro h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  body.home .g-card { margin: 0 12px; padding: 40px 24px; min-height: unset; }
  body.home .g-card .num { font-size: 2.5rem; }
  body.home .g-card h3 { font-size: clamp(1.5rem, 5vw, 2.25rem); }
  body.home .g-card p { font-size: 1rem; }
  body.home .g-card .contract-line { padding: 16px 20px; margin-top: 24px; }
  /* Stats */
  body.home .stats-section { padding: 56px 0; }
  body.home .stat .num { font-size: clamp(2.25rem, 8vw, 3rem); }
  body.home .stat .lbl { font-size: 0.875rem; max-width: 100%; }
  /* Services */
  body.home .svc { min-height: 280px; padding: 80px 32px 32px; } /* top room for the absolute badges so they don't overlap the heading */
  body.home .svc h3 { font-size: 1.5rem; }
  /* Testimonials */
  body.home .testimonials-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  body.home .testimonials-head h2 { font-size: clamp(1.75rem, 5.5vw, 2.5rem); }
  body.home .t-card blockquote { font-size: 1.1rem; }
  body.home .rating-card { align-self: flex-start; }
  /* CTA */
  body.home .cta-band { padding: 72px 0; }
  body.home .cta-band h2 { font-size: clamp(1.75rem, 7vw, 2.75rem); }
}

/* ============================================================
   Homepage — page-specific CSS
   ============================================================ */
/* ⚠️ DUPLICATED IN index.html's inline critical <style>, which loads AFTER this
   file and WINS. Editing these homepage rules HERE alone does nothing on the
   live homepage — you must edit the inline block too (or de-duplicate). The
   build guard (scripts/postbuild.mjs + critical-css-overlap.json) enforces this.
   See playbooks/fluid-design.md. */
/* HERO is now sole-sourced in index.html's inline critical <style> (de-duplicated
   2026-08-25, Approach A). The old duplicate .hero/.hero-inner/.hero h1/.hero-stats
   rules were fully overridden by the inline block and have been removed. `.hero p`
   stays because it is v4.css-only (inline defines `.hero p.lead`, not bare `.hero p`). */
.hero p { margin-bottom: 36px; animation: fadeUp 1s .6s var(--ease-out) both; }

/* Homepage services / stats / testimonials / areas base styles are all
   sole-sourced in index.html's inline critical <style> (de-duplicated
   2026-08-25, Approach A). Home-specific responsive rules stay below, scoped
   to body.home. Only `.areas-grid h2` remains here (no inline twin). */
.areas-grid h2 { color: var(--navy); }

/* MARQUEE */
.marquee-item-num { font-size: 0.8rem; color: var(--gold); font-style: normal; opacity: 0.6; margin-right: 12px; }

/* STICKY GUARANTEES */
.guarantees-stack { background: var(--ink); color: var(--bg); position: relative; }
.guarantees-intro { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 80px 0; }
.guarantees-intro h2 { color: var(--bg); max-width: 800px; }
.guarantees-intro h2 em { font-style: italic; color: var(--orange); }
.guarantees-intro p { color: color-mix(in oklch, white 60%, transparent); max-width: 560px; margin-top: 24px; font-size: 1.15rem; }
.g-card { position: sticky; margin: 0 32px; border-radius: var(--radius-lg); padding: 64px; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; border: 1px solid color-mix(in oklch, white 10%, transparent); box-shadow: 0 -40px 80px -20px rgba(0,0,0,.5); }
.g-card:nth-of-type(1) { top: 10vh; background: linear-gradient(135deg, #1a2438, #2d3f5f); }
.g-card:nth-of-type(2) { top: 14vh; background: linear-gradient(135deg, #2d1810, #5a3520); }
.g-card:nth-of-type(3) { top: 18vh; background: linear-gradient(135deg, #2a2418, #4a3e22); }
.g-card:nth-of-type(4) { top: 22vh; background: linear-gradient(135deg, var(--orange), #b84800); }
.g-card .num { font-family: 'Fraunces',serif; font-size: 4rem; color: rgba(255,255,255,.3); font-weight: 600; }
.g-card h3 { font-size: clamp(2rem, 4vw, 3.5rem); color: #fff; max-width: 700px; margin: 12px 0 20px; }
.g-card p { color: rgba(255,255,255,.75); max-width: 560px; font-size: 1.1rem; }
.g-card .contract-line { margin-top: 40px; padding: 20px 24px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); font-family: 'JetBrains Mono','Courier New',monospace; font-size: 0.85rem; color: rgba(255,255,255,.85); max-width: 680px; }
.g-card .contract-line::before { content: '§ '; color: var(--gold); }
.g-card:nth-of-type(4) .contract-line { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.2); }

/* TESTIMONIALS — background glow only (section + cards are inline-sourced) */
.testimonials-section::before { content: ''; position: absolute; top: -50%; left: -10%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(255,104,4,.25), transparent 60%); filter: blur(60px); animation: drift 18s ease-in-out infinite alternate; }


/* ============================================================
   Kitchen — page-specific CSS
   ============================================================ */
.page-hero .gallery-grid { position: sticky; top: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-hero .gallery-grid > div { border-radius: var(--radius-lg); aspect-ratio: 4/5; transition: transform .4s var(--ease-out); }
.page-hero .gallery-grid > div:nth-child(1) { background: linear-gradient(135deg,#a88858,#5a3d20); }
.page-hero .gallery-grid > div:nth-child(2) { background: linear-gradient(135deg,#4a6580,#233040); aspect-ratio: 4/3; margin-top: 60px; }
.page-hero .gallery-grid > div:nth-child(3) { background: linear-gradient(135deg,#6a583c,#3a2f1c); aspect-ratio: 4/3; }
.page-hero .gallery-grid > div:nth-child(4) { background: linear-gradient(135deg,#5c4d68,#2f253c); aspect-ratio: 4/5; margin-top: 60px; }
.scope-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tier { padding: 40px; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); transition: all .3s var(--ease-out); display: flex; flex-direction: column; gap: 16px; }
.tier:hover { background: rgba(255,255,255,.08); transform: translateY(-6px); border-color: var(--orange); }
.tier.featured { background: linear-gradient(135deg, rgba(255,104,4,.25), rgba(211,181,116,.15)); border-color: var(--orange); }
.tier .tier-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); font-weight: 600; }
.tier h3 { color: #fff; font-size: 1.6rem; }
.tier .range { font-family: 'Fraunces',serif; font-size: 2.25rem; color: var(--gold); font-weight: 600; }
.tier.featured .range { color: #fff; }
.tier p { color: rgba(255,255,255,.75); font-size: 0.95rem; }
.tier ul { list-style: none; }
.tier ul li { padding: 6px 0; color: rgba(255,255,255,.85); font-size: 0.9rem; display: flex; gap: 8px; }
.tier ul li::before { content: '+'; color: var(--orange); font-weight: 700; }
.timeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto; }
.tl-week { padding: 24px 18px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: all .3s var(--ease-out); min-height: 200px; }
.tl-week:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(15,27,45,.15); }
.tl-week .wk { font-family: 'Fraunces',serif; font-size: 1.5rem; color: var(--orange); font-weight: 600; line-height: 1; }
.tl-week .ph { font-size: 0.78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.tl-week .desc { font-size: 0.85rem; color: var(--ink-2); margin-top: auto; }
.materials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mat-card { background: #fff; border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--line); }
.mat-card h4 { font-size: 0.95rem; margin-bottom: 6px; color: var(--navy); }
.mat-card small { color: var(--ink-3); font-size: 0.82rem; }
.mat-card .pill { display: inline-block; padding: 4px 10px; background: var(--cream); border-radius: 100px; font-size: 0.72rem; color: var(--navy); font-weight: 600; margin-top: 12px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
@media(max-width: 1000px){ .scope-grid, .tiers, .faq-grid, .materials-grid { grid-template-columns: 1fr; } .timeline { grid-template-columns: repeat(2,1fr); } .page-hero .gallery-grid { position: static; } }

/* ============================================================
   Bathroom — page-specific CSS
   ============================================================ */
.bath-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.btype { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 12px; transition: all .3s var(--ease-out); }
.btype:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(15,27,45,.12); border-color: var(--orange); }
.btype .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--navy); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; }
.btype h3 { font-size: 1.2rem; color: var(--navy); }
.btype p { font-size: 0.9rem; }
.btype .range { font-family: 'Fraunces',serif; font-weight: 600; color: var(--orange); font-size: 1.15rem; margin-top: auto; }
.scope-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; }
/* SPECIAL-PURPOSE: sticky, staggered sidebar tuned for EXACTLY 4 tiles inside a .scope-grid
   (kitchen + bath "what's included" sections). The nth-child rules below hard-code 4 tiles'
   aspect-ratios + offsets, and position:sticky assumes a tall text column beside it.
   Do NOT reuse for standalone "recent projects" galleries or any tile count != 4 — it will
   clip/overlap. Use .proj-gallery (above) for those instead. */
.gallery-grid { position: sticky; top: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.gallery-grid > div { border-radius: var(--radius-lg); aspect-ratio: 4/5; overflow: hidden; min-width: 0; }
.gallery-grid > div:nth-child(1) { background: linear-gradient(135deg,#a8c5d4,#324a5e); }
.gallery-grid > div:nth-child(2) { background: linear-gradient(135deg,#d4cab8,#7a6b58); aspect-ratio: 4/3; margin-top: 60px; }
.gallery-grid > div:nth-child(3) { background: linear-gradient(135deg,#c5b8a8,#6b5d4a); aspect-ratio: 4/3; }
.gallery-grid > div:nth-child(4) { background: linear-gradient(135deg,#a8b5d4,#3a4a6e); aspect-ratio: 4/5; margin-top: 60px; }
/* Mobile: drop the sticky editorial stagger for a clean, fully-visible 2×2 grid */
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery-grid > div,
  .gallery-grid > div:nth-child(1),
  .gallery-grid > div:nth-child(2),
  .gallery-grid > div:nth-child(3),
  .gallery-grid > div:nth-child(4) { aspect-ratio: 4/3; margin-top: 0; }
}
/* Standalone "Recent projects" galleries (built-ins / basement / additions) — uniform, non-sticky */
.proj-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.proj-gallery > div { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.proj-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media(max-width:900px){ .proj-gallery { grid-template-columns: 1fr 1fr; } }
/* Keep photo galleries as a balanced 2-col grid on phones (e.g. 2x3) instead of a 1-wide stack.
   `.trio` galleries (3 photos) stay 3-across, then drop straight to one column, never a 2+1 orphan. */
.proj-gallery.trio { grid-template-columns: repeat(3, 1fr); }
@media(max-width:560px){ .proj-gallery.trio { grid-template-columns: 1fr; } }
/* Portrait mini-gallery (small-projects "other services") — 3:4 tiles, no crop for portrait shots */
.mini-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 36px auto 0; max-width: 980px; }
.mini-gallery > div { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; }
.mini-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 900px; margin: 36px auto 0; }
.svc-pair h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 8px; }
.svc-pair p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
@media(max-width:700px){ .mini-gallery { grid-template-columns: 1fr 1fr; } .svc-pair { grid-template-columns: 1fr; gap: 24px; } }
.materials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mat-card { background: #fff; border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--line); }
.mat-card h4 { font-size: 0.95rem; color: var(--navy); margin-bottom: 6px; }
.mat-card small { color: var(--ink-3); font-size: 0.82rem; display: block; margin-bottom: 12px; }
.mat-card .options { font-size: 0.85rem; color: var(--ink-2); line-height: 1.7; }
.timeline-bath { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 900px; margin: 0 auto; }
.timeline-bath .tl-week { padding: 24px 18px; border-radius: var(--radius-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.timeline-bath .tl-week .wk { font-family: 'Fraunces',serif; font-size: 1.5rem; color: var(--orange); font-weight: 600; line-height: 1; }
.timeline-bath .tl-week .ph { font-size: 0.78rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.timeline-bath .tl-week .desc { font-size: 0.85rem; color: rgba(255,255,255,.8); margin-top: auto; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
@media(max-width:1000px){ .bath-types, .materials-grid, .timeline-bath { grid-template-columns: 1fr 1fr; } .scope-grid, .faq-grid { grid-template-columns: 1fr; } .gallery-grid { position: static; } }

/* ============================================================
   Home Additions — page-specific CSS
   ============================================================ */
.addition-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.atype { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: all .3s var(--ease-out); display: flex; flex-direction: column; }
.atype:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(15,27,45,.12); }
.atype .img { aspect-ratio: 4/3; background: linear-gradient(135deg,#8a6638,#4a341d); }
.atype:nth-child(2) .img { background: linear-gradient(135deg,#a8c5d4,#324a5e); }
.atype:nth-child(3) .img { background: linear-gradient(135deg,#5c4d68,#2f253c); }
.atype:nth-child(4) .img { background: linear-gradient(135deg,#a8b598,#52624a); }
.atype:nth-child(5) .img { background: linear-gradient(135deg,#d4cab8,#7a6b58); }
.atype:nth-child(6) .img { background: linear-gradient(135deg,#c5b8a8,#6b5d4a); }
.atype .body { padding: 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.atype h3 { font-size: 1.25rem; color: var(--navy); }
.atype p { font-size: 0.92rem; }
.atype .meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.atype .meta strong { color: var(--orange); }
.phases { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.phase { padding: 32px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 12px; }
.phase .ph-num { font-family: 'Fraunces',serif; font-size: 3rem; line-height: 1; background: linear-gradient(135deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phase h3 { color: #fff; font-size: 1.2rem; }
.phase p { color: rgba(255,255,255,.75); font-size: 0.92rem; }
.phase .duration { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 0.82rem; color: var(--gold); font-family: 'Fraunces',serif; }
.permit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.permit-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.permit-list h3 { color: var(--navy); margin-bottom: 16px; font-size: 1.2rem; }
.permit-list ul { list-style: none; }
.permit-list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; }
.permit-list li:last-child { border: none; }
.permit-list .juris { font-family: 'Fraunces',serif; color: var(--navy); font-weight: 600; }
.permit-list .badge { padding: 4px 10px; background: var(--cream); border-radius: 100px; font-size: 0.78rem; color: var(--navy); font-weight: 600; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
@media(max-width:1000px){ .addition-types, .phases { grid-template-columns: 1fr 1fr; } .permit-grid, .faq-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Basement — page-specific CSS
   ============================================================ */
.uses-section { padding: 120px 0; }
.uses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.use { padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px; transition: all .3s var(--ease-out); }
.use:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 20px 40px -10px rgba(15,27,45,.12); }
.use .icon { width: 56px; height: 56px; border-radius: 14px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.use h3 { color: var(--navy); }
.use p { font-size: 0.95rem; }
.use .add { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.moisture-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.moisture-grid h2 em { font-style: italic; color: var(--orange); }
.moisture-card { padding: 36px; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); }
.moisture-card h4 { color: #fff; font-family: 'Fraunces',serif; font-size: 1.2rem; margin-bottom: 10px; }
.moisture-card p { color: rgba(255,255,255,.75); font-size: 0.95rem; margin-bottom: 16px; }
.moisture-card .layers { display: grid; gap: 8px; }
.moisture-card .layer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.04); border-radius: var(--radius); color: rgba(255,255,255,.9); font-size: 0.92rem; }
.moisture-card .layer span { width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
.scope-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1100px; margin: 0 auto; }
.tl-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto; }
.tl-row .tl-week { padding: 24px 18px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.tl-row .tl-week .wk { font-family: 'Fraunces',serif; font-size: 1.4rem; color: var(--orange); font-weight: 600; line-height: 1; }
.tl-row .tl-week .ph { font-size: 0.78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.tl-row .tl-week .desc { font-size: 0.84rem; color: var(--ink-2); margin-top: auto; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
@media(max-width:1000px){ .uses-grid, .scope-includes { grid-template-columns: 1fr; } .moisture-grid, .faq-grid { grid-template-columns: 1fr; } .tl-row { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Showroom — page-specific CSS
   ============================================================ */
.showroom-hero { padding: 140px 0 60px; position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.showroom-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 75% 30%, color-mix(in oklch, var(--orange) 30%, transparent), transparent 55%); filter: blur(80px); pointer-events: none; }
.showroom-hero::after { content:''; position:absolute; bottom:-30%; left:-15%; width:60%; height:140%; background: radial-gradient(circle, color-mix(in oklch, var(--gold) 30%, transparent), transparent 55%); filter: blur(80px); pointer-events: none; }
.showroom-hero .container { position: relative; z-index: 2; }
.showroom-hero h1 { color: #fff; max-width: 920px; margin-bottom: 24px; }
.showroom-hero h1 em { font-style: italic; background: linear-gradient(120deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.showroom-hero .lead { color: rgba(255,255,255,.8); max-width: 640px; }
.address-card { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 48px; padding: 32px; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); }
.address-card .col h4 { color: var(--gold); font-family: 'Inter',sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; font-weight: 600; }
.address-card .col .val { font-family: 'Fraunces',serif; color: #fff; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.address-card .col .sub { color: rgba(255,255,255,.65); font-size: 0.92rem; margin-top: 4px; }

.map-block { padding: 0; }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.map-side { padding: 64px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.map-side h2 { color: var(--navy); }
.map-side h2 em { font-style: italic; color: var(--orange); }
.map-side .hours { display: grid; gap: 8px; margin-top: 8px; }
.map-side .hours-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.map-side .hours-row strong { color: var(--navy); font-family: 'Fraunces',serif; }
.map-side .hours-row span { color: var(--ink-2); }
.map-viz { background: linear-gradient(135deg, #2a3a5a, #1a2438); position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; background-size: cover; background-position: center; }
.map-viz::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,104,4,.3), transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255,104,4,.4), transparent 6%),
    radial-gradient(circle at 70% 60%, rgba(255,104,4,.3), transparent 8%);
}
.map-viz .pin { width: 60px; height: 60px; background: var(--orange); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.map-viz .pin::after { content: ''; width: 24px; height: 24px; border-radius: 50%; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.map-viz .label-card { position: absolute; bottom: 32px; left: 32px; background: rgba(0,0,0,.6); backdrop-filter: blur(20px); padding: 16px 20px; border-radius: var(--radius); color: #fff; font-size: 0.88rem; }
.map-viz .label-card strong { font-family: 'Fraunces',serif; display: block; font-size: 1.05rem; }

.sections-grid { padding: 120px 0; }
.sections-grid .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sec-block { aspect-ratio: 4/3; border-radius: var(--radius-lg); position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; transition: transform .4s var(--ease-spring); }
.sec-block:hover { transform: translateY(-4px); }
.sec-block::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #8a6638, #4a341d); transition: transform .6s var(--ease-out); }
.sec-block:hover::before { transform: scale(1.05); }
.sec-block::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%); }
.sec-block:nth-child(2)::before { background: linear-gradient(135deg, #4a6580, #233040); }
.sec-block .ico { position: absolute; top: 32px; left: 32px; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.sec-block h3 { color: #fff; font-size: 1.8rem; margin-bottom: 8px; }
.sec-block p { color: rgba(255,255,255,.85); font-size: 0.95rem; }
.sec-block ul { margin-top: 14px; list-style: none; color: rgba(255,255,255,.85); font-size: 0.88rem; }
.sec-block ul li { padding: 4px 0; }
.sec-block ul li::before { content: '·'; margin-right: 10px; color: var(--orange); font-weight: 700; }

.brands-section { background: var(--cream); padding: 120px 0; }
.brand-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.brand-card { background: #fff; padding: 24px; border-radius: var(--radius); text-align: center; border: 1px solid var(--line); transition: all .2s; }
.brand-card:hover { transform: translateY(-3px); border-color: var(--orange); }
.brand-card h4 { font-size: 1rem; color: var(--navy); font-family: 'Fraunces',serif; }
.brand-card small { color: var(--ink-3); font-size: 0.78rem; }

.visit-section { padding: 120px 0; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.visit-section::before { content:''; position:absolute; inset:-10%; background: radial-gradient(at 50% 50%, color-mix(in oklch, var(--orange) 25%, transparent), transparent 55%); filter: blur(80px); }
.visit-section .container { position: relative; z-index: 2; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.visit-grid h2 { color: #fff; }
.visit-grid h2 em { font-style: italic; background: linear-gradient(120deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.visit-grid p { color: rgba(255,255,255,.78); }
.visit-list { display: grid; gap: 14px; margin-top: 24px; }
.visit-row { display: flex; gap: 16px; padding: 18px 24px; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); }
.visit-row .n { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-family: 'Fraunces',serif; }
.visit-row strong { color: #fff; font-family: 'Fraunces',serif; display: block; font-size: 1.05rem; margin-bottom: 4px; }
.visit-row small { color: rgba(255,255,255,.7); font-size: 0.9rem; }

@media(max-width:1000px){
  .sections-grid .container, .map-grid, .visit-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .address-card { grid-template-columns: 1fr; }
}

/* ============================================================
   Gallery — page-specific CSS
   ============================================================ */
.filter-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 auto 56px; max-width: 800px; }
.filter-bar .chip { padding: 10px 20px; border-radius: 100px; background: #fff; border: 1.5px solid var(--line); color: var(--navy); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: all .25s var(--ease-spring); font-family: inherit; }
.filter-bar .chip:hover { border-color: var(--orange); color: var(--orange); }
.filter-bar .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.gal-grid { columns: 3; column-gap: 16px; }
.gal-item { break-inside: avoid; margin-bottom: 16px; position: relative; border-radius: var(--radius-lg); overflow: hidden; transition: transform .4s var(--ease-out); cursor: pointer; }
.gal-item:hover { transform: scale(1.02); }
.gal-item .img { width: 100%; display: block; }
.gal-item .meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  opacity: 0; transition: opacity .3s;
}
.gal-item:hover .meta { opacity: 1; }
.gal-item .meta .tag { display: inline-block; padding: 4px 10px; background: rgba(255,104,4,.85); border-radius: 100px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.gal-item .meta h4 { color: #fff; font-family: 'Fraunces',serif; font-size: 1.05rem; margin-bottom: 4px; }
.gal-item .meta small { color: rgba(255,255,255,.8); font-size: 0.82rem; }

.gal-item .img { aspect-ratio: 4/5; background: linear-gradient(135deg,#a88858,#5a3d20); }
.gal-item:nth-child(2) .img { aspect-ratio: 4/3; background: linear-gradient(135deg,#a8c5d4,#324a5e); }
.gal-item:nth-child(3) .img { aspect-ratio: 1; background: linear-gradient(135deg,#d4cab8,#7a6b58); }
.gal-item:nth-child(4) .img { aspect-ratio: 4/5; background: linear-gradient(135deg,#6a583c,#3a2f1c); }
.gal-item:nth-child(5) .img { aspect-ratio: 4/3; background: linear-gradient(135deg,#5c4d68,#2f253c); }
.gal-item:nth-child(6) .img { aspect-ratio: 1; background: linear-gradient(135deg,#8a6638,#4a341d); }
.gal-item:nth-child(7) .img { aspect-ratio: 4/5; background: linear-gradient(135deg,#a8b598,#52624a); }
.gal-item:nth-child(8) .img { aspect-ratio: 4/3; background: linear-gradient(135deg,#c5b8a8,#6b5d4a); }
.gal-item:nth-child(9) .img { aspect-ratio: 1; background: linear-gradient(135deg,#4a6580,#233040); }
.gal-item:nth-child(10) .img { aspect-ratio: 4/5; background: linear-gradient(135deg,#7a6b88,#3a3148); }
.gal-item:nth-child(11) .img { aspect-ratio: 4/3; background: linear-gradient(135deg,#b58a68,#5a4028); }
.gal-item:nth-child(12) .img { aspect-ratio: 1; background: linear-gradient(135deg,#88a8b5,#3a5a6e); }
.gal-item:nth-child(13) .img { aspect-ratio: 4/5; background: linear-gradient(135deg,#a8a098,#5a5448); }
.gal-item:nth-child(14) .img { aspect-ratio: 4/3; background: linear-gradient(135deg,#9a8868,#4e4030); }
.gal-item:nth-child(15) .img { aspect-ratio: 1; background: linear-gradient(135deg,#b89878,#5a4628); }

.privacy-note { padding: 56px 0; background: var(--cream); }
.privacy-note .container { display: flex; align-items: center; gap: 24px; }
.privacy-note .ico { width: 64px; height: 64px; border-radius: 16px; background: var(--navy); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; }
.privacy-note h3 { color: var(--navy); margin-bottom: 8px; font-size: 1.5rem; }
.privacy-note p { font-size: 1rem; }
@media(max-width: 1000px) { .gal-grid { columns: 2; } .privacy-note .container { flex-direction: column; text-align: center; } }
@media(max-width: 600px) { .gal-grid { columns: 2; column-gap: 12px; } }

/* ============================================================
   Contact — page-specific CSS
   ============================================================ */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 0; background: color-mix(in oklch, var(--ink) 80%, transparent); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav .container { position: relative; z-index: 2; }
.logo { font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; color:#fff; }
.logo span { color: var(--orange); }
.nav-links { display:flex; gap:8px; }
.nav-links a { padding:8px 16px; border-radius:100px; font-size:0.92rem; font-weight:500; color:rgba(255,255,255,.7); }
.nav-links a:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Services dropdown toggle must match nav links over the dark nav (was falling back to dark ink → black-on-dark when scrolled past the hero) */
.nav-dd-toggle { color: rgba(255,255,255,.7); }
.nav-dd:hover .nav-dd-toggle, .nav-dd:focus-within .nav-dd-toggle { color: #fff; }
.cta-pill { background:var(--orange); color:#fff; padding:12px 22px; border-radius:100px; font-weight:600; font-size:0.92rem; display:inline-flex; align-items:center; gap:8px; }
.cta-pill:hover { transform: scale(1.04); }

/* HERO */
.consult-hero { padding: 140px 0 56px; color: #fff; position: relative; overflow: hidden; background: var(--ink); }
.consult-hero::before { content:''; position:absolute; top:-30%; right:-20%; width:80%; height:160%; background: radial-gradient(circle, color-mix(in oklch, var(--orange) 30%, transparent), transparent 55%); filter: blur(80px); animation: drift 22s ease-in-out infinite alternate; }
.consult-hero::after { content:''; position:absolute; bottom:-40%; left:-20%; width:70%; height:140%; background: radial-gradient(circle, color-mix(in oklch, var(--gold) 35%, transparent), transparent 55%); filter: blur(80px); animation: drift 18s ease-in-out infinite alternate-reverse; }

.consult-hero .container { position: relative; z-index: 2; }
.consult-hero .pill { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); border-radius:100px; font-size:0.82rem; color:rgba(255,255,255,.9); margin-bottom:24px; }
.consult-hero .pill .dot { width:6px; height:6px; border-radius:50%; background:var(--orange); animation: pulse 2s infinite; }

.consult-hero h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 4.5rem); max-width: 880px; margin-bottom: 20px; font-variation-settings: 'opsz' 144; }
.consult-hero h1 em { font-style: italic; background: linear-gradient(120deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.consult-hero .lead { color: rgba(255,255,255,.82); max-width: 680px; }

/* FORM — light theme, consistent with the rest of the site */
.form-section { padding: 80px 0 120px; background: var(--bg); position: relative; }
.form-section .container { position: relative; }
.form-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; max-width: 1180px; margin: 0 auto; }

.form-shell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15,27,45,.18);
}
.form-shell-top { padding: 24px 36px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.form-shell-top h2 { color: var(--navy); font-size: 1.3rem; }
.form-shell-top .resp { padding: 6px 12px; background: color-mix(in oklch, var(--orange) 12%, transparent); border: 1px solid color-mix(in oklch, var(--orange) 40%, transparent); color: var(--orange); border-radius: 100px; font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.form-shell-top .resp::before { content: ''; width:6px; height:6px; border-radius:50%; background:var(--orange); animation: pulse 2s infinite; }

.form-body { padding: 36px; }
.field { margin-bottom: 18px; }
.field label { display: block; color: var(--navy); font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink); font-family: inherit; font-size: 0.95rem;
  transition: all .2s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); background: #fff;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--orange) 15%, transparent);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-body .submit {
  width: 100%; margin-top: 8px;
  background: var(--orange); color: #fff;
  padding: 16px 32px; border-radius: 100px;
  font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .3s var(--ease-spring); cursor: pointer; border: none;
  font-family: inherit;
}
.form-body .submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px color-mix(in oklch, var(--orange) 60%, transparent); }
.form-body .privacy { color: var(--ink-3); font-size: 0.82rem; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }

/* SIDEBAR */
.sidebar-card {
  background: var(--navy); color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 16px;
  position: sticky; top: 100px;
}
.sidebar-card .eyebrow { color: var(--gold); }
.sidebar-card h3 { color: #fff; font-family: 'Fraunces',serif; font-size: 1.4rem; margin: 12px 0 16px; }
.sidebar-card > p { color: rgba(255,255,255,.7); font-size: 0.92rem; margin-bottom: 24px; }

.promise-list { list-style: none; }
.promise-list li { position: relative; padding: 0 0 24px 36px; }
.promise-list li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--gold));
}
.promise-list li::after {
  content: '✓'; position: absolute; left: 0; top: 4px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.78rem;
}
.promise-list li:not(:last-child) {
  border-left: 1px dashed rgba(255,255,255,.2);
  margin-left: 11px; padding-left: 25px;
}
.promise-list li strong { color: #fff; font-family: 'Fraunces',serif; font-weight: 600; display: block; margin-bottom: 4px; }
.promise-list li small { color: rgba(255,255,255,.65); font-size: 0.85rem; line-height: 1.5; }

.phone-tile {
  margin-top: 16px; padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}
.phone-tile small { color: var(--ink-3); font-size: 0.82rem; }
.phone-tile .ph { font-family: 'Fraunces',serif; font-weight: 600; color: var(--navy); font-size: 1.6rem; margin: 6px 0; }

/* FOOTER */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 60px 0 28px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer h4 { color: #fff; font-family: 'Inter',sans-serif; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 20px; font-weight: 600; }
.footer a { color: rgba(255,255,255,.6); display: block; padding: 6px 0; font-size: 0.92rem; }
.footer a:hover { color: var(--orange); }
.footer-logo { font-family: 'Fraunces',serif; font-weight: 700; font-size: 1.8rem; color: #fff; margin-bottom: 16px; }
.footer-logo span { color: var(--orange); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; justify-content: space-between; font-size: 0.82rem; color: rgba(255,255,255,.4); }

@media(max-width: 900px) {
  .form-layout, .field-row, .footer-grid { grid-template-columns: 1fr; }
  .form-body { padding: 28px; }
  .sidebar-card { position: static; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; } }

/* ============================================================
   About — page-specific CSS
   ============================================================ */
.story-section { padding: 120px 0; }
.story-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.story-grid h2 { color: var(--navy); }
.story-grid h2 em { font-style: italic; color: var(--orange); }
.story-grid .prose p { font-size: 1.08rem; line-height: 1.7; margin-bottom: 20px; color: var(--ink-2); }
.story-grid .prose strong { color: var(--navy); }
.story-img { aspect-ratio: 4/5; border-radius: var(--radius-lg); background: linear-gradient(135deg,#8a6638,#3a2a18); position: sticky; top: 100px; overflow: hidden; }

.values-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.value-card { padding: 36px; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px; transition: all .3s var(--ease-out); }
.value-card:hover { background: rgba(255,255,255,.08); border-color: var(--orange); }
.value-card .num { font-family: 'Fraunces',serif; font-size: 3rem; line-height: 1; background: linear-gradient(135deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.value-card h3 { color: #fff; }
.value-card p { color: rgba(255,255,255,.75); font-size: 0.95rem; }

.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: all .3s var(--ease-out); }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(15,27,45,.12); }
.team-card .portrait { aspect-ratio: 1; background: linear-gradient(135deg,#a88858,#5a3d20); }
.team-card:nth-child(2) .portrait { background: linear-gradient(135deg,#4a6580,#233040); }
.team-card:nth-child(3) .portrait { background: linear-gradient(135deg,#6a583c,#3a2f1c); }
.team-card:nth-child(4) .portrait { background: linear-gradient(135deg,#5c4d68,#2f253c); }
.team-card:nth-child(5) .portrait { background: linear-gradient(135deg,#8a6638,#4a341d); }
.team-card:nth-child(6) .portrait { background: linear-gradient(135deg,#a8b598,#52624a); }
.team-card .body { padding: 24px; }
.team-card h3 { color: var(--navy); font-size: 1.2rem; margin-bottom: 4px; }
.team-card .role { color: var(--orange); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.team-card p { font-size: 0.92rem; }

.credentials-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.cred { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; }
.cred .icon { width: 56px; height: 56px; border-radius: 14px; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; margin-bottom: 16px; }
.cred h4 { color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.cred small { color: var(--ink-3); font-size: 0.82rem; display: block; }
.cred .badge { display: inline-block; margin-top: 10px; padding: 4px 10px; background: var(--cream); border-radius: 100px; font-size: 0.78rem; color: var(--navy); font-weight: 600; }

@media(max-width:1000px){ .story-grid, .values-grid, .team-grid, .credentials-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr 1fr; } .credentials-grid { grid-template-columns: 1fr 1fr; } .story-img { position: static; } }

/* ============================================================
   Service Area — page-specific CSS
   ============================================================ */
.area-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 48px; }
.area-stat { padding: 24px; background: color-mix(in oklch, white 70%, transparent); backdrop-filter: blur(20px); border: 1px solid color-mix(in oklch, white 80%, transparent); border-radius: var(--radius-lg); }
.area-stat .num { font-family: 'Fraunces',serif; font-size: 2.5rem; color: var(--navy); font-weight: 600; line-height: 1; }
.area-stat .lbl { font-size: 0.88rem; color: var(--ink-2); margin-top: 6px; }

.map-section { padding: 80px 0; }
.map-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; }
.region-map { aspect-ratio: 4/5; border-radius: var(--radius-lg); background: linear-gradient(135deg, #2a3a5a, #1a2438); position: sticky; top: 100px; position: relative; overflow: hidden; }
.region-map::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,104,4,.15), transparent 60%); }
.region-svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 24px; }

/* Mapbox service-area map (shared by /service-area/ and homepage .area-map) */
.qr-map { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.qr-map .mapboxgl-ctrl-logo { opacity: .7; }
.qr-marker { display: flex; align-items: center; gap: 7px; transform: translateX(-7px); cursor: default; }
.qr-marker .qr-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(255,104,4,.3); flex: 0 0 auto; }
.qr-marker .qr-lbl { font-family: 'Fraunces',serif; font-weight: 600; font-size: 0.82rem; color: #fff; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.qr-marker.hq .qr-dot { width: 19px; height: 19px; box-shadow: 0 0 0 6px rgba(255,104,4,.35); }
.qr-marker.hq .qr-lbl { font-size: 0.95rem; }
.region-map .pin { position: absolute; width: 14px; height: 14px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,104,4,.3); transform: translate(-50%, -50%); }
.region-map .pin.hq { width: 24px; height: 24px; background: var(--orange); box-shadow: 0 0 0 6px rgba(255,104,4,.4), 0 0 0 18px rgba(255,104,4,.15); animation: pulse 2s infinite; z-index: 2; }
.region-map .pin-label { position: absolute; transform: translate(12px, -50%); color: rgba(255,255,255,.85); font-size: 0.72rem; font-weight: 600; white-space: nowrap; font-family: 'Fraunces',serif; }
.region-map .legend { position: absolute; bottom: 24px; left: 24px; color: rgba(255,255,255,.75); font-size: 0.8rem; }
.region-map .legend strong { color: #fff; font-family: 'Fraunces',serif; display: block; font-size: 1rem; margin-bottom: 4px; }

.area-list-section h2 em { font-style: italic; color: var(--orange); }
.county-group { margin-bottom: 48px; }
.county-group h3 { color: var(--navy); font-size: 1.4rem; margin-bottom: 8px; }
.county-group .meta { color: var(--ink-3); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 20px; }
.area-cards { display: grid; gap: 8px; }
.area-card { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: all .25s var(--ease-out); }
.area-card:hover { border-color: var(--orange); transform: translateX(4px); }
.area-card .name { font-family: 'Fraunces',serif; font-weight: 600; color: var(--navy); font-size: 1.05rem; }
.area-card .info { display: flex; gap: 16px; align-items: center; }
.area-card .dist { font-size: 0.78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.area-card .arrow { color: var(--orange); font-size: 1.1rem; transition: transform .2s; }
.area-card:hover .arrow { transform: translateX(4px); }

.specialty-section { padding: 120px 0; background: var(--cream); }
.specialty-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.spec-card { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 12px; }
.spec-card h3 { color: var(--navy); font-size: 1.2rem; }
.spec-card p { font-size: 0.92rem; }
.spec-card ul { margin-top: 8px; list-style: none; font-size: 0.88rem; color: var(--ink-2); }
.spec-card li { padding: 4px 0; }
.spec-card li::before { content: '·'; color: var(--orange); margin-right: 8px; font-weight: 700; }

@media(max-width:1000px){ .area-stats, .specialty-grid { grid-template-columns: 1fr 1fr; } .map-grid { grid-template-columns: 1fr; } .region-map { position: relative; top: 0; aspect-ratio: 16/10; } }

/* ============================================================
   Chevy Chase — page-specific CSS
   ============================================================ */
.local-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; padding: 28px; background: color-mix(in oklch, white 70%, transparent); backdrop-filter: blur(20px); border: 1px solid color-mix(in oklch, white 80%, transparent); border-radius: var(--radius-lg); }
.local-quick .cell .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 6px; font-weight: 600; }
.local-quick .cell .val { font-family: 'Fraunces',serif; font-size: 1.2rem; color: var(--navy); font-weight: 600; }

.local-context { padding: 120px 0; }
.local-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
.local-photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); background: linear-gradient(135deg,#a8987a,#5a4828); position: sticky; top: 100px; }
.local-prose h2 { color: var(--navy); }
.local-prose h2 em { font-style: italic; color: var(--orange); }
.local-prose h3 { color: var(--navy); margin: 32px 0 12px; font-size: 1.3rem; }
.local-prose p { font-size: 1.02rem; line-height: 1.7; margin-bottom: 16px; color: var(--ink-2); }
.local-prose strong { color: var(--navy); }

.svc-section { padding: 120px 0; background: var(--cream); }
.svc-grid-local { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.svc-card-local { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 14px; transition: all .3s var(--ease-out); }
.svc-card-local:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 20px 40px -10px rgba(15,27,45,.12); }
.svc-card-local h3 { color: var(--navy); }
.svc-card-local p { font-size: 0.95rem; }
.svc-card-local .meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.svc-card-local .range { font-family: 'Fraunces',serif; color: var(--orange); font-weight: 600; font-size: 1.1rem; }
.svc-card-local .arrow { color: var(--orange); font-weight: 600; font-size: 0.92rem; }

.permits-section { padding: 120px 0; }
.permits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.permit-block { padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.permit-block h3 { color: var(--navy); margin-bottom: 8px; }
.permit-block p { font-size: 0.95rem; margin-bottom: 16px; }
.permit-block ul { list-style: none; }
.permit-block li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; display: flex; justify-content: space-between; }
.permit-block li:last-child { border: none; }
.permit-block li strong { color: var(--navy); font-family: 'Fraunces',serif; }
.permit-block li span { color: var(--ink-3); }

.local-testimonials { padding: 120px 0; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.local-testimonials::before { content:''; position:absolute; inset:-10%; background: radial-gradient(at 30% 50%, rgba(255,104,4,.2), transparent 55%); filter: blur(80px); }
.local-testimonials .container { position: relative; z-index: 2; }
.lt-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.lt-card { padding: 36px; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 16px; }
.lt-card .neighborhood { font-size: 0.72rem; color: var(--orange); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.lt-card blockquote { font-family: 'Fraunces',serif; font-size: 1.2rem; line-height: 1.45; color: #fff; font-style: italic; }
.lt-card .cite { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 0.88rem; }
.lt-card .cite strong { color: #fff; display: block; margin-bottom: 2px; }

.nearby-strip { padding: 60px 0; background: var(--cream); border-top: 1px solid var(--line); }
.nearby-strip .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nearby-strip strong { font-family: 'Fraunces',serif; color: var(--navy); font-size: 1.1rem; }
.nearby-strip a { padding: 8px 16px; background: #fff; border: 1px solid var(--line); border-radius: 100px; font-size: 0.9rem; color: var(--navy); font-weight: 600; transition: all .2s; }
.nearby-strip a:hover { border-color: var(--orange); color: var(--orange); }

@media(max-width:1000px) { .local-quick, .svc-grid-local, .permits-grid, .lt-grid { grid-template-columns: 1fr 1fr; } .local-grid { grid-template-columns: 1fr; } .local-photo { position: static; aspect-ratio: 16/10; } }
@media(max-width:700px) { .local-quick, .svc-grid-local, .permits-grid, .lt-grid { grid-template-columns: 1fr; } }
/* Footer-bottom links: inline, not block */
.footer-bottom a { display: inline; padding: 0; }

/* CTA band button */
.cta-band .btn-primary { color: #fff !important; }

/* Team portrait: photos cover gradient background */
.team-card .portrait { position: relative; overflow: hidden; }
.team-card .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Homepage: hide breadcrumb */
body.home .breadcrumb { display: none !important; }

/* Footer-bottom links: inline */
.footer-bottom a { display: inline; padding: 0; }

/* ===== Top utility bar (Santiago round-1, FineCraft-style) ===== */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: var(--navy); color: rgba(255,255,255,.85); font-size: 0.82rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.topbar a { color: rgba(255,255,255,.85); transition: color .2s; }
.topbar a:hover { color: var(--orange); }
.topbar .tb-left { color: rgba(255,255,255,.6); display: flex; gap: 18px; align-items: center; }
.topbar .tb-right { display: flex; gap: 24px; align-items: center; }
.nav { top: 36px; }
@media (max-width: 1100px) { .topbar { display: none; } .nav { top: 0; } }

/* ===== Footer partner block (Bethesda Cabinets) ===== */
.footer-partner { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-partner .fp-label { color: var(--orange); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.footer-partner a { color: rgba(255,255,255,.7); display: inline-flex; gap: 8px; font-size: 0.92rem; }
.footer-partner a strong { color: #fff; }
.footer-partner a:hover { color: var(--orange); }

/* ===== Reviews block (first-party, SEO/AIO; Santiago round-1) ===== */
.reviews { background: var(--cream, #faf7f2); padding: 80px 0; }
.reviews .container { max-width: 1100px; }
.reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.reviews-head .eyebrow { color: var(--orange); }
.reviews-head h2 { margin: 6px 0 0; }
.reviews-agg { text-align: right; }
.reviews-agg .stars { color: #e8a33d; font-size: 1.4rem; letter-spacing: 2px; }
.reviews-agg .agg-meta { color: var(--ink-soft, #6b6258); font-size: 0.9rem; margin-top: 2px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 26px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.review-card .stars { color: #e8a33d; letter-spacing: 1px; font-size: 0.95rem; }
.review-card p { margin: 12px 0 18px; color: var(--ink, #2c2620); line-height: 1.6; font-size: 0.96rem; }
.review-card .rv-author { font-weight: 700; color: var(--navy); font-size: 0.92rem; }
.review-card .rv-meta { color: var(--ink-soft, #8a8178); font-size: 0.8rem; margin-top: 2px; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } .reviews-head { flex-direction: column; } .reviews-agg { text-align: left; } }

/* Reviews carousel (kitchen + bath) — swipe / drag / arrow-controlled (reviews.js).
   Was an auto-scrolling marquee; now a native horizontal scroller users control. */
.review-slider { position: relative; margin-top: 8px; }
.review-slider .review-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 12px; cursor: grab; }
.review-slider .review-track::-webkit-scrollbar { display: none; }
.review-slider .review-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.review-slider .review-card { width: 340px; flex: 0 0 340px; display: flex; flex-direction: column; scroll-snap-align: start; }
.review-slider .review-card p { flex: 1; }
.reviews-cta { text-align: center; margin-top: 28px; }
.reviews-cta a { color: var(--orange); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.reviews-cta a:hover { text-decoration: underline; }
/* Homepage tunes the reviews CTA slightly (was inline-duplicated). */
body.home .reviews-cta { margin-top: 44px; }
body.home .reviews-cta a { font-size: 1.02rem; }
@media (prefers-reduced-motion: reduce) { .review-slider .review-track { scroll-behavior: auto; } }
@media (max-width: 700px) { .review-slider .review-card { width: 280px; flex-basis: 280px; } }

/* Reviews carousel arrow controls — shared by homepage (.review-marquee) and
   service pages (.review-slider). Buttons hide (opacity:0) at the ends. */
.rev-btn { position: absolute; top: 46%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(10,16,28,.16); z-index: 4; transition: opacity .2s ease, background .2s ease, color .2s ease; }
.rev-btn svg { width: 22px; height: 22px; }
.rev-btn:hover { background: var(--orange); color: #fff; border-color: transparent; }
.rev-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rev-btn:disabled { opacity: 0; pointer-events: none; }
.rev-prev { left: 4px; }
.rev-next { right: 4px; }
@media (max-width: 700px) { .rev-btn { width: 38px; height: 38px; } .rev-btn svg { width: 19px; height: 19px; } .rev-prev { left: 2px; } .rev-next { right: 2px; } }

/* Lightbox — full-size, uncropped photo viewer for service-page montages (lightbox.js) */
.lb-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,12,20,.93); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.lb-overlay.show { opacity: 1; visibility: visible; }
.lb-figure { margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lb-img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.5); object-fit: contain; background: #111; }
.lb-cap { color: #e8e2d8; font-size: .9rem; margin-top: 12px; text-align: center; max-width: 70ch; line-height: 1.5; }
.lb-close { position: absolute; top: 16px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-close:hover { background: rgba(255,255,255,.24); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-nav svg { width: 26px; height: 26px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 700px) { .lb-nav { width: 44px; height: 44px; } .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-overlay { padding: 12px; } }

/* Referral program: 4-up reward tiers */
.tiers-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tiers-4 { grid-template-columns: 1fr; } }

/* Selections & allowances table (kitchen + bath) */
.allow-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 20px 40px -24px rgba(15,27,45,.18); -webkit-overflow-scrolling: touch; }
.allow-table { width: 100%; border-collapse: collapse; min-width: 760px; background: #fff; }
.allow-table thead th { text-align: left; padding: 20px 18px; background: var(--navy); color: #fff; font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.1rem; vertical-align: top; }
.allow-table thead th:first-child { background: var(--ink); }
.allow-table thead th span { display: block; font-family: 'Inter',sans-serif; font-weight: 600; font-size: 0.72rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 5px; }
.allow-table tbody tr { border-top: 1px solid var(--line); }
.allow-table tbody th { text-align: left; padding: 16px 18px; font-family: 'Fraunces',serif; font-weight: 600; color: var(--navy); font-size: 0.98rem; background: var(--bg); white-space: nowrap; }
.allow-table tbody th small { display: block; color: var(--ink-3); font-family: 'Inter',sans-serif; font-weight: 400; font-size: 0.76rem; white-space: normal; margin-top: 2px; }
.allow-table td { padding: 16px 18px; color: var(--navy); font-weight: 600; font-size: 0.95rem; border-left: 1px solid var(--line); vertical-align: top; }
.allow-table td small { display: block; color: var(--ink-2); font-weight: 400; font-size: 0.82rem; margin-top: 3px; }
.allow-table tbody tr:nth-child(even) th { background: color-mix(in oklch, var(--bg) 50%, #fff); }
.allow-table tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--bg) 35%, #fff); }
.allow-table td.best, .allow-table thead th.best { box-shadow: inset 3px 0 0 color-mix(in oklch, var(--orange) 55%, transparent); }
.allow-note { text-align: center; color: var(--ink-3); font-size: 0.86rem; line-height: 1.6; margin: 20px auto 0; max-width: 780px; }
.allow-pending { background: color-mix(in oklch, var(--orange) 12%, #fff); border: 1px solid color-mix(in oklch, var(--orange) 45%, transparent); color: var(--navy); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px; font-size: 0.92rem; line-height: 1.55; }
.allow-pending strong { color: var(--orange); font-family: 'Fraunces',serif; font-weight: 600; margin-right: 4px; }

/* Bethesda Cabinets partner page — brand logo strip + photo trio */
.brand-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: center; max-width: 880px; margin: 0 auto; padding: 8px 16px; }
.brand-strip .blogo { display: flex; align-items: center; justify-content: center; padding: 18px 20px; background: var(--ink); border-radius: var(--radius); min-height: 96px; }
.brand-strip .blogo img { max-width: 100%; max-height: 56px; height: auto; width: auto; object-fit: contain; filter: brightness(1.02); }
@media (max-width: 700px) { .brand-strip { grid-template-columns: 1fr; gap: 14px; } }
.partner-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.partner-photos .pp { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; }
.partner-photos .pp img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) { .partner-photos { grid-template-columns: 1fr; } }

/* ── Ask-a-question CTA: keep the Cloudflare Turnstile widget inside the card ──
   The Turnstile iframe has a fixed ~300px min width. On narrow screens the card's
   padding squeezed the content box below 300px, so the widget overflowed the right
   edge. These rules (higher specificity than the per-page inline CTA styles) trim
   the padding on small screens so 300px fits, and center the widget so any residual
   gap is even on both sides. Applies to the stacked CTA (.ask-section .ask-form) and
   the hero bar (.hero-ask .ask-bar) across every page that uses them. */
.ask-section .ask-form .cf-turnstile,
.hero-ask .ask-bar .cf-turnstile { display: flex; justify-content: center; max-width: 100%; }
.ask-section .ask-form .cf-turnstile { margin-left: auto; margin-right: auto; }
/* Hero ask-bar footer row — shared base (was inline-duplicated on every service page). */
.hero-ask .ask-bar-foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .ask-section > .container { padding-left: 14px; padding-right: 14px; }
  .ask-section .ask-form { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 700px) {
  .hero-ask > .container { padding-left: 12px; padding-right: 12px; }
  /* .ask-form.ask-bar (0,3,0) outranks the per-page inline .hero-ask .ask-bar rule */
  .hero-ask .ask-form.ask-bar { width: 100%; padding-left: 12px; padding-right: 12px; }
  .hero-ask .ask-bar-foot { justify-content: center; }
}