/* ==========================================================================
   Golden Floors — Sacramento, CA
   Design system. Brand palette carried over from the existing brand assets:
   gold #DFA320 / #B87F09, ink #101010, warm neutrals — with charcoal taken
   from the Golden Floors logo (gold sun, white installer, charcoal planks).
   ========================================================================== */

:root{
  /* Brand */
  --charcoal:      #1A1A1A;
  --charcoal-deep: #0E0E0E;
  --charcoal-mid:  #35322C;
  --gold:        #E7A322;
  --gold-deep:   #B87F09;
  --gold-light:  #F6D18A;

  /* Neutrals */
  --white:       #FFFFFF;
  --ink:         #101010;
  --ink-soft:    #1A1A1A;
  --text:        #2B2B2B;
  --text-soft:   #5C5C5C;
  --text-dark:   #D6D3CD;
  --text-dark-soft:#9C9891;
  --warm:        #F7F5F0;
  --warm-2:      #EFEDE8;
  --line:        #E3E0D9;
  --line-dark:   rgba(255,255,255,.14);

  /* Elevation */
  --shadow-sm:   0 1px 2px rgba(16,16,16,.05);
  --shadow:      0 1px 2px rgba(16,16,16,.04), 0 8px 24px rgba(16,16,16,.06);
  --shadow-lg:   0 2px 4px rgba(16,16,16,.05), 0 18px 48px rgba(16,16,16,.13);

  /* Geometry */
  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   20px;
  --max-w:       1240px;
  --measure:     68ch;
  --header-h:    88px;
  --pad:         104px;
  --pad-m:       64px;
  --ease:        260ms cubic-bezier(.4,0,.2,1);

  /* Type */
  --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:   'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* No overflow-x here on purpose: any overflow value other than visible on an
   ancestor silently disables position:sticky on the header. The layout is
   built not to overflow in the first place, and the test suite checks it. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:0 0 .55em;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,5.4vw,4.15rem);letter-spacing:-.032em}
h2{font-size:clamp(1.95rem,3.7vw,3rem);letter-spacing:-.028em}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem)}
h4{font-size:1.06rem;letter-spacing:-.012em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:2000;
  background:var(--charcoal);color:#fff;padding:12px 20px;border-radius:0 0 8px 8px;font-weight:600;
}
.skip-link:focus{top:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:24px}
.section{padding-block:var(--pad)}
.section--tight{padding-block:calc(var(--pad) * .66)}
.section--warm{background:var(--warm)}
.section--warm2{background:var(--warm-2)}
.section--dark{background:var(--charcoal);color:var(--text-dark)}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}

/* ---------- Section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);
  font-size:.735rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:18px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold);border-radius:2px}
.section--dark .eyebrow{color:var(--gold)}
.section--dark .eyebrow::before{background:var(--gold)}

.head{max-width:var(--measure);margin-bottom:60px}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow::before{display:none}
.head p{color:var(--text-soft);font-size:1.09rem;margin-top:-.1em}
.section--dark .head p{color:var(--text-dark-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border:1.5px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:.98rem;font-weight:650;letter-spacing:-.01em;
  cursor:pointer;transition:transform var(--ease),background var(--ease),box-shadow var(--ease),border-color var(--ease),color var(--ease);
  text-align:center;white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--gold{background:var(--gold);color:var(--charcoal-deep);box-shadow:0 4px 14px rgba(223,163,32,.30)}
.btn--gold:hover{background:var(--gold-light);box-shadow:0 8px 22px rgba(223,163,32,.42)}

.btn--dark{background:var(--charcoal);color:#fff}
.btn--dark:hover{background:var(--charcoal-mid)}

.btn--ghost{background:transparent;color:var(--charcoal);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--charcoal);background:var(--warm)}

.btn--ghost-light{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.32)}
.btn--ghost-light:hover{background:rgba(255,255,255,.15);border-color:#fff}

.btn--lg{padding:19px 38px;font-size:1.05rem}
.btn--block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row--center{justify-content:center}

.textlink{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:650;color:var(--charcoal);font-size:.96rem;
  border-bottom:1.5px solid rgba(26,26,26,.24);padding-bottom:2px;
  transition:gap var(--ease),border-color var(--ease),color var(--ease);
}
.textlink:hover{gap:12px;color:var(--gold-deep);border-color:var(--gold)}
.textlink svg{width:15px;height:15px}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  background:var(--charcoal-deep);color:var(--text-dark);
  font-size:.83rem;letter-spacing:.005em;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
.topbar-list{display:flex;align-items:center;gap:22px;list-style:none;flex-wrap:wrap}
.topbar-list li{display:inline-flex;align-items:center;gap:7px}
.topbar-list svg{width:14px;height:14px;color:var(--gold);flex:none}
.topbar a:hover{color:var(--gold)}
.topbar-social{display:flex;gap:14px;align-items:center}
.topbar-social a{display:inline-flex;color:var(--text-dark-soft);transition:color var(--ease)}
.topbar-social a:hover{color:var(--gold)}
.topbar-social svg{width:16px;height:16px}

/* Header stays visible the whole way down the page.
   No backdrop-filter here on purpose: that property would make the header a
   containing block for any position:fixed descendant, and the mobile nav
   panel is exactly that — it would then be trapped inside the bar. */
.site-header{
  position:sticky;top:0;z-index:1001;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(16,16,16,.06);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:var(--header-h);
}

/* Brand lockup — the supplied logo artwork, horizontal variant for the bar */
.brand{display:inline-flex;align-items:center;flex:none}
.brand-logo{width:auto;height:clamp(42px,4.5vw,52px)}
.site-footer .brand-logo{height:56px}

/* Nav */
.nav{display:flex;align-items:center;gap:4px}
/* The CTA block only exists inside the phone panel */
.nav-cta{display:none}
.nav > li{position:relative;list-style:none}
.nav a.nav-link,.nav button.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 15px;border:0;background:none;border-radius:8px;
  font-size:.95rem;font-weight:550;color:var(--text);
  transition:color var(--ease),background var(--ease);
}
.nav a.nav-link:hover,.nav button.nav-link:hover{color:var(--charcoal);background:var(--warm)}
.nav .is-active > .nav-link{color:var(--charcoal);font-weight:700}
.nav .is-active > .nav-link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:var(--gold);border-radius:2px;
}
.nav-caret{width:11px;height:11px;transition:transform var(--ease);opacity:.6}
.nav > li:hover .nav-caret,.nav > li:focus-within .nav-caret{transform:rotate(180deg)}

/* Dropdown */
.dropdown{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,10px);
  min-width:315px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--ease),transform var(--ease),visibility var(--ease);
}
.nav > li:hover .dropdown,.nav > li:focus-within .dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.dropdown a{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 13px;border-radius:var(--radius-sm);transition:background var(--ease);
}
.dropdown a:hover{background:var(--warm)}
.dropdown-ico{
  width:34px;height:34px;flex:none;border-radius:8px;
  background:var(--warm-2);color:var(--gold-deep);
  display:grid;place-items:center;
}
.dropdown-ico svg{width:18px;height:18px}
.dropdown b{display:block;font-family:var(--font-body);font-size:.93rem;font-weight:650;color:var(--ink);line-height:1.35}
.dropdown span{display:block;font-size:.79rem;color:var(--text-soft);line-height:1.4}
.dropdown .dropdown-all{border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.dropdown .dropdown-all b{color:var(--charcoal)}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:14px;flex:none}
.header-phone{
  display:flex;flex-direction:column;line-height:1.2;text-align:right;
}
.header-phone small{font-size:.7rem;color:var(--text-soft);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.header-phone b{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--charcoal);letter-spacing:-.02em}
.header-phone:hover b{color:var(--gold-deep)}

.hamburger{
  display:none;width:46px;height:46px;border:1px solid var(--line);
  background:#fff;border-radius:var(--radius-sm);
  place-items:center;transition:border-color var(--ease);
}
.hamburger:hover{border-color:var(--charcoal)}
.hamburger span{
  display:block;width:20px;height:2px;background:var(--charcoal);border-radius:2px;
  position:relative;transition:transform var(--ease),background var(--ease);
}
.hamburger span::before,.hamburger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--charcoal);border-radius:2px;
  transition:transform var(--ease),top var(--ease);
}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.hamburger[aria-expanded="true"] span{background:transparent}
.hamburger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;background:var(--charcoal-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(12,12,12,.93) 0%,rgba(14,14,14,.84) 42%,rgba(26,26,24,.55) 100%);
}
.hero-grain{
  position:absolute;inset:0;z-index:-1;opacity:.5;
  background:
    radial-gradient(80% 55% at 8% 100%,rgba(223,163,32,.16),transparent 62%),
    radial-gradient(60% 50% at 100% 0%,rgba(223,163,32,.14),transparent 60%);
}
/* Less air on top than underneath — the header already provides separation,
   and every pixel above the headline is a pixel of CTA pushed below the fold. */
.hero .wrap{position:relative;padding-block:clamp(40px,4.4vw,66px) clamp(60px,7vw,100px)}
.hero-inner{max-width:820px}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 12px;border-radius:100px;
  background:rgba(223,163,32,.13);border:1px solid rgba(223,163,32,.42);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light);
  margin-bottom:24px;
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 4px rgba(223,163,32,.22)}

/* Rating badge: same pill, but real casing for "5.0 · 60 reviews on Google"
   reads better than the all-caps treatment other badges use, and the star
   icons need their own smaller size to sit comfortably in the pill. */
.badge--rating{text-transform:none;letter-spacing:0}
.badge--rating .stars{display:inline-flex;gap:2px;color:var(--gold);vertical-align:-3px}
.badge--rating .stars svg{width:13px;height:13px}

/* Toned down from the global h1 (which reaches 4.15rem at weight 700): a
   smaller ceiling and a lighter display weight read as confident rather
   than shouted. Archivo only ships 400/500/600/700/800, so 600 is the
   nearest step down from bold without falling back to the body face. */
.hero h1{
  color:#fff;margin-bottom:.5em;
  font-size:clamp(2.15rem,4.3vw,3.4rem);
  font-weight:600;line-height:1.16;letter-spacing:-.02em;
}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero-lede{
  font-size:clamp(1.06rem,1.55vw,1.24rem);color:rgba(255,255,255,.86);
  max-width:62ch;margin-bottom:2.1em;
}

/* Rating + service area above the fold — the two things a visitor from an ad
   checks first: "are they any good" and "do they even come to me". */
.hero-proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 26px;font-size:.93rem;color:rgba(255,255,255,.82);
}
.hero-proof b{color:#fff;font-weight:600}
.hero-proof .stars svg{width:17px;height:17px}
.hero-proof-sep{width:1px;height:15px;background:rgba(255,255,255,.28)}
/* The rule only makes sense when both halves sit on one line */
@media (max-width:780px){ .hero-proof-sep{display:none} }
.hero .btn-row{margin-bottom:44px}

.hero-trust{
  display:flex;flex-wrap:wrap;gap:12px 30px;list-style:none;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.16);
}
.hero-trust li{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:rgba(255,255,255,.82);font-weight:500}
.hero-trust svg{width:17px;height:17px;color:var(--gold);flex:none}

/* Page hero (interior pages) */
.pagehero{position:relative;background:var(--charcoal-deep);color:#fff;overflow:hidden;isolation:isolate}
.pagehero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 60% at 6% 100%,rgba(223,163,32,.17),transparent 60%),
    radial-gradient(60% 70% at 96% 0%,rgba(223,163,32,.13),transparent 62%);
}
/* Optional photo behind a page hero. Sits below the ::before glow (-1) so the
   gold wash still reads, and carries its own scrim because a photo alone
   never guarantees contrast for white text — the overlay is what does. */
.pagehero-bg{position:absolute;inset:0;z-index:-2}
.pagehero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.pagehero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.82) 45%,rgba(20,20,20,.55) 100%);
}
@media (max-width:780px){
  /* Narrow screens put the text over the lighter end of the gradient, so
     flatten it to an even scrim instead of letting the headline drift onto
     the bright part of the photo. */
  .pagehero-bg::after{background:rgba(20,20,20,.86)}
}

.pagehero .wrap{padding-block:clamp(36px,3.8vw,56px) clamp(48px,5.5vw,76px)}
.pagehero h1{
  color:#fff;max-width:19ch;margin-bottom:.4em;
  font-size:clamp(2rem,3.6vw,2.75rem);font-weight:600;line-height:1.18;letter-spacing:-.018em;
}
.pagehero p{color:rgba(255,255,255,.82);max-width:60ch;font-size:1.09rem}
.pagehero .btn-row{margin-top:34px}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:.83rem;color:rgba(255,255,255,.62);margin-bottom:22px}
.crumbs li::after{content:"/";margin-left:8px;opacity:.5}
.crumbs li:last-child::after{display:none}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--gold)}

/* ==========================================================================
   Stat strip
   ========================================================================== */
.stats{background:var(--warm);border-bottom:1px solid var(--line)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);list-style:none;
}
.stats-grid li{padding:34px 22px;text-align:center;border-right:1px solid var(--line)}
.stats-grid li:last-child{border-right:0}
.stats-grid b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,2.5vw,2.05rem);color:var(--charcoal);letter-spacing:-.03em;line-height:1.15;
  white-space:nowrap;
}
/* Direct child only — the accent span inside <b> must stay inline */
.stats-grid > li > span{display:block;font-size:.86rem;color:var(--text-soft);margin-top:5px;font-weight:500}
.stats-grid b .gold{color:var(--gold-deep);display:inline}

/* ==========================================================================
   Service cards
   ========================================================================== */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.svc{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px 28px;position:relative;overflow:hidden;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.svc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc-ico{
  width:56px;height:56px;border-radius:var(--radius-sm);
  background:var(--warm-2);color:var(--gold-deep);
  display:grid;place-items:center;margin-bottom:22px;
  transition:background var(--ease),color var(--ease);
}
.svc:hover .svc-ico{background:var(--charcoal);color:var(--gold)}
.svc-ico svg{width:27px;height:27px}
.svc h3{margin-bottom:.5em;font-size:1.24rem}
.svc p{color:var(--text-soft);font-size:.96rem;margin-bottom:1.5em;flex:1}
.svc .textlink{align-self:flex-start}

/* ==========================================================================
   Split (image + text)
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5.5vw,78px);align-items:center}
.split--reverse .split-media{order:2}
.split-media{position:relative}
.split-media img{
  width:100%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);object-fit:cover;
}
.split-media--tall img{aspect-ratio:4/5}
.split-media--wide img{aspect-ratio:4/3}
.media-badge{
  position:absolute;right:-18px;bottom:-18px;
  background:var(--charcoal);color:#fff;border-radius:var(--radius);
  padding:20px 26px;box-shadow:var(--shadow-lg);text-align:center;
  border:1px solid rgba(255,255,255,.1);
}
.media-badge b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.85rem;color:var(--gold);letter-spacing:-.03em;line-height:1;
}
.media-badge span{display:block;font-size:.79rem;color:var(--text-dark);margin-top:6px;letter-spacing:.03em}

.checklist{list-style:none;display:grid;gap:15px;margin:30px 0}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-size:.99rem;line-height:1.55}
.checklist svg{width:21px;height:21px;color:var(--gold-deep);flex:none;margin-top:2px}
.checklist b{color:var(--ink);font-weight:650}
.section--dark .checklist svg{color:var(--gold)}
.section--dark .checklist b{color:#fff}

.quote{
  border-left:3px solid var(--gold);padding:6px 0 6px 24px;margin:32px 0 0;
  font-family:var(--font-display);font-size:1.16rem;font-weight:600;
  font-style:italic;color:var(--ink);line-height:1.5;letter-spacing:-.015em;
}
.section--dark .quote{color:#fff}

/* ==========================================================================
   Process
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;list-style:none;counter-reset:step}
.step{position:relative;padding-top:34px}
.step::before{
  content:"";position:absolute;top:16px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--gold) 0 38px,var(--line) 38px);
}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--charcoal);color:var(--gold);
  font-family:var(--font-display);font-weight:800;font-size:.86rem;
  position:absolute;top:-1px;left:0;
}
.step h3{font-size:1.14rem;margin-bottom:.45em;margin-top:10px}
.step p{color:var(--text-soft);font-size:.94rem}
.section--dark .step p{color:var(--text-dark-soft)}
.section--dark .step::before{background:linear-gradient(90deg,var(--gold) 0 38px,rgba(255,255,255,.16) 38px)}
.section--dark .step-n{background:var(--gold);color:var(--charcoal-deep)}

/* ==========================================================================
   Reviews
   ========================================================================== */
.rating-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  justify-content:center;margin-bottom:52px;
}
.stars{display:inline-flex;gap:3px;color:var(--gold)}
.stars svg{width:19px;height:19px}
.rating-line b{font-family:var(--font-display);font-size:1.12rem;color:var(--ink)}
/* .stars is a span too — exclude it or it loses its gold */
.rating-line > span:not(.stars){color:var(--text-soft);font-size:.94rem}

.review{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;display:flex;flex-direction:column;
  transition:transform var(--ease),box-shadow var(--ease);
}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.review .stars{margin-bottom:18px}
.review blockquote{
  margin:0 0 22px;font-size:1rem;line-height:1.65;color:var(--text);flex:1;
}
.review figcaption{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:19px}
.review-avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--charcoal);color:var(--gold);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.95rem;
}
.review cite{font-style:normal;font-weight:650;color:var(--ink);font-size:.95rem;display:block;line-height:1.3}
.review small{color:var(--text-soft);font-size:.8rem}

/* ==========================================================================
   Review marquee — two rows scrolling in opposite directions
   ========================================================================== */
.marquee{
  display:grid;gap:20px;
  /* fade the cards in and out at the edges instead of cutting them dead */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-row{overflow:hidden}
.marquee-track{
  display:flex;gap:20px;width:max-content;
  animation:marquee-left var(--marquee-speed,64s) linear infinite;
  will-change:transform;
}
.marquee-row--right .marquee-track{animation-name:marquee-right}

/* The track holds the cards twice, so -50% lands exactly on the seam. */
@keyframes marquee-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes marquee-right{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

.marquee .review{
  width:clamp(290px,25vw,360px);flex:none;margin:0;
  padding:26px 26px 24px;
}
.marquee .review blockquote{font-size:.97rem;line-height:1.6}
.marquee .review:hover{transform:none}

.marquee-note{
  text-align:center;color:var(--text-soft);font-size:.88rem;margin-top:26px;
}

@media (prefers-reduced-motion:reduce){
  /* Motion off: fall back to a normal horizontal scroll the visitor drives */
  .marquee-track{animation:none}
  .marquee-row{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ==========================================================================
   Service area
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:11px;list-style:none;margin-top:8px}
.chips li{
  padding:11px 21px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.19);
  font-size:.94rem;font-weight:550;color:#fff;
  transition:background var(--ease),border-color var(--ease);
}
.chips li:hover{background:rgba(223,163,32,.16);border-color:var(--gold)}
.chips li:has(a){padding:0}
.chips li a{display:block;padding:11px 21px;border-radius:100px}
.chips li a:hover{color:var(--gold)}
.chips--light li{background:var(--white);border-color:var(--line);color:var(--text)}
.chips--light li:hover{border-color:var(--gold);background:var(--warm)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:900px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:26px 4px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:clamp(1.03rem,1.5vw,1.16rem);font-weight:650;
  color:var(--ink);letter-spacing:-.015em;transition:color var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-deep)}
.faq-plus{
  width:30px;height:30px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;
  transition:transform var(--ease),background var(--ease),border-color var(--ease);
  position:relative;
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;background:var(--charcoal);border-radius:2px;transition:opacity var(--ease),background var(--ease);
}
.faq-plus::before{width:12px;height:2px}
.faq-plus::after{width:2px;height:12px}
.faq details[open] .faq-plus{background:var(--gold);border-color:var(--gold);transform:rotate(90deg)}
.faq details[open] .faq-plus::after{opacity:0}
.faq details[open] .faq-plus::before{background:var(--charcoal-deep)}
.faq-body{padding:0 60px 28px 4px;color:var(--text-soft);font-size:1rem;max-width:78ch}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gal-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.gal-filter{
  padding:11px 22px;border-radius:100px;border:1.5px solid var(--line);
  background:#fff;font-size:.92rem;font-weight:600;color:var(--text-soft);
  transition:all var(--ease);
}
.gal-filter:hover{border-color:var(--charcoal);color:var(--charcoal)}
.gal-filter[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:#fff}

.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gal-item{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--warm-2);border:0;padding:0;display:block;width:100%;
  aspect-ratio:4/3;cursor:zoom-in;
}
.gal-item--tall{aspect-ratio:3/4}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.4,0,.2,1)}
.gal-item:hover img{transform:scale(1.06)}
.gal-cap{
  position:absolute;inset:auto 0 0 0;padding:44px 20px 18px;text-align:left;
  background:linear-gradient(to top,rgba(10,10,10,.92),rgba(10,10,10,0));
  color:#fff;transform:translateY(6px);opacity:0;transition:all var(--ease);
}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{transform:translateY(0);opacity:1}
.gal-cap b{display:block;font-family:var(--font-display);font-size:1.02rem;font-weight:650}
.gal-cap span{display:block;font-size:.82rem;color:rgba(255,255,255,.78);margin-top:3px}

/* Placeholder tile — used where a real project photo still needs to be added */
.gal-ph{
  display:grid;place-items:center;align-content:center;gap:10px;
  background:
    repeating-linear-gradient(115deg,var(--warm) 0 22px,var(--warm-2) 22px 44px);
  color:var(--text-soft);text-align:center;padding:24px;height:100%;
}
.gal-ph svg{width:34px;height:34px;color:var(--gold-deep);opacity:.7}
.gal-ph b{font-family:var(--font-display);font-size:.98rem;color:var(--charcoal)}
.gal-ph span{font-size:.8rem;max-width:24ch;line-height:1.45}

/* Before / after pairs */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.ba-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--warm-2);
}
.ba-shot{position:relative;margin:0;background:var(--charcoal-deep)}
.ba-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.ba-tag{
  position:absolute;top:12px;left:12px;
  padding:5px 12px;border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.ba-tag--before{background:rgba(255,255,255,.94);color:var(--charcoal)}
.ba-tag--after{background:var(--gold);color:var(--charcoal-deep)}
.ba-cap{
  grid-column:1/-1;padding:18px 20px;background:#fff;border-top:1px solid var(--line);
}
.ba-cap b{display:block;font-family:var(--font-display);font-size:1.02rem;color:var(--ink);letter-spacing:-.015em}
.ba-cap span{display:block;font-size:.86rem;color:var(--text-soft);margin-top:3px;line-height:1.45}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:1200;display:none;
  background:rgba(10,10,10,.96);
  align-items:center;justify-content:center;padding:28px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:min(1100px,92vw);max-height:84vh;border-radius:var(--radius);object-fit:contain}
.lightbox-cap{
  position:absolute;left:0;right:0;bottom:26px;text-align:center;
  color:rgba(255,255,255,.86);font-size:.94rem;padding-inline:24px;
}
.lightbox-close,.lightbox-nav{
  position:absolute;width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;display:grid;place-items:center;transition:background var(--ease);
}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.26)}
.lightbox-close{top:24px;right:24px}
.lightbox-nav{top:50%;transform:translateY(-50%)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox svg{width:21px;height:21px}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,44px);box-shadow:var(--shadow-lg);
}
.form-card h3{font-size:1.42rem;margin-bottom:.3em}
.form-card > p{color:var(--text-soft);font-size:.95rem;margin-bottom:26px}

.field{display:block;margin-bottom:18px}
.field span{
  display:block;font-size:.85rem;font-weight:650;color:var(--ink);
  margin-bottom:7px;letter-spacing:-.005em;
}
.field span .req{color:#B4231F;margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;font:inherit;font-size:.98rem;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--warm);transition:border-color var(--ease),background var(--ease),box-shadow var(--ease);
}
.field textarea{min-height:118px;resize:vertical}
.field select{
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:#fff;
  box-shadow:0 0 0 4px rgba(223,163,32,.16);
}
.field input::placeholder,.field textarea::placeholder{color:#A29E96}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* Hidden pricing is the top anxiety driver in a quote-based trade.
   Answering it next to the form beats burying it in the FAQ. */
.why-quote{
  margin-top:30px;padding:20px 22px;
  background:var(--warm-2);border-left:3px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.why-quote b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink);margin-bottom:6px}
.why-quote p{font-size:.92rem;color:var(--text-soft);margin:0}
.section--dark .why-quote{background:rgba(255,255,255,.06)}
.section--dark .why-quote b{color:#fff}
.section--dark .why-quote p{color:var(--text-dark-soft)}

/* Featured single review on a service page */
.review--feature{background:var(--warm);border-color:transparent}
.review--feature blockquote{font-size:1.12rem;line-height:1.6}

/* Optional fields folded away — the form reads as 3 fields, not 6.
   Everything still submits whether the block is open or closed. */
.field-more{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:20px;background:var(--warm)}
.field-more summary{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:13px 16px;cursor:pointer;list-style:none;
  font-size:.9rem;font-weight:650;color:var(--charcoal);
}
.field-more summary::-webkit-details-marker{display:none}
.field-more summary::before{
  content:"+";display:inline-grid;place-items:center;
  width:20px;height:20px;flex:none;border-radius:50%;
  background:var(--charcoal);color:var(--gold);
  font-size:.95rem;font-weight:700;line-height:1;
}
.field-more[open] summary::before{content:"–"}
.field-more summary span{font-weight:450;color:var(--text-soft);font-size:.83rem}
.field-more-body{padding:2px 16px 4px}
.field-more-body .field:last-child{margin-bottom:14px}

.form-error{
  padding:13px 16px;margin:0 0 20px;border-radius:var(--radius-sm);
  background:#FDEDEC;border-left:3px solid #B4231F;
  color:#8A1A16;font-size:.92rem;font-weight:500;
}

.form-note{
  display:flex;gap:9px;align-items:flex-start;
  font-size:.83rem;color:var(--text-soft);margin-top:16px;line-height:1.5;
}
.form-note svg{width:15px;height:15px;color:var(--gold-deep);flex:none;margin-top:2px}
.form-trust{
  display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
}
.form-trust li{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;color:var(--text-soft);font-weight:500}
.form-trust svg{width:15px;height:15px;color:var(--gold-deep);flex:none}
.honey{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* CTA band with form */
.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px);align-items:start}

/* ==========================================================================
   Contact cards
   ========================================================================== */
.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.contact-card-ico{
  width:46px;height:46px;border-radius:var(--radius-sm);
  background:var(--warm-2);color:var(--gold-deep);display:grid;place-items:center;margin-bottom:18px;
}
.contact-card-ico svg{width:22px;height:22px}
.contact-card h3{font-size:1.02rem;margin-bottom:.35em}
.contact-card p,.contact-card a{color:var(--text-soft);font-size:.95rem;line-height:1.55}
.contact-card a{font-weight:600;color:var(--charcoal)}
.contact-card a:hover{color:var(--gold-deep)}

/* ==========================================================================
   Trade / callout band
   ========================================================================== */
.callout{
  background:var(--charcoal);color:var(--text-dark);border-radius:var(--radius-lg);
  padding:clamp(34px,4.4vw,58px);
  display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,4vw,52px);align-items:center;
  position:relative;overflow:hidden;isolation:isolate;
}
.callout::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 100% at 100% 0,rgba(223,163,32,.2),transparent 62%);
}
.callout h2{color:#fff;font-size:clamp(1.6rem,2.7vw,2.2rem);margin-bottom:.5em}
.callout p{color:var(--text-dark-soft);margin-bottom:0}
.callout .btn-row{flex-direction:column;align-items:stretch}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--charcoal-deep);color:var(--text-dark-soft);font-size:.94rem}
.footer-top{padding-block:74px 56px;border-bottom:1px solid var(--line-dark)}
.footer-grid{display:grid;grid-template-columns:1.7fr .9fr .9fr .8fr 1.1fr;gap:clamp(24px,2.8vw,44px)}
.footer-brand .brand{margin-bottom:20px}
.footer-brand p{color:var(--text-dark-soft);max-width:38ch;font-size:.93rem;margin-bottom:24px}
.footer-social{display:flex;gap:11px;margin-top:24px}
.footer-social a{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-dark);display:grid;place-items:center;
  color:var(--text-dark);transition:all var(--ease);
}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--charcoal-deep)}
.footer-social svg{width:17px;height:17px}

.site-footer h4{
  color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:700;margin-bottom:20px;
}
.footer-links{list-style:none;display:grid;gap:11px}
.footer-links a{color:var(--text-dark-soft);transition:color var(--ease),padding-left var(--ease);font-size:.93rem}
.footer-links a:hover{color:var(--gold);padding-left:4px}

.footer-contact{list-style:none;display:grid;gap:15px}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;line-height:1.5}
.footer-contact svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:3px}
.footer-contact a:hover{color:var(--gold)}
.footer-contact b{color:#fff;font-weight:600;display:block}

.footer-bottom{
  padding-block:26px;display:flex;flex-wrap:wrap;gap:12px 28px;
  align-items:center;justify-content:space-between;font-size:.85rem;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none}
.footer-legal a:hover{color:var(--gold)}

/* ==========================================================================
   Mobile action bar — always-visible call / text / quote on phones
   ========================================================================== */
/* Compact two-button bar: call, or start a quote. Icons sit beside the label
   instead of above it, which halves the height and leaves more of the page
   visible on a phone. */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:950;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:7px 10px calc(7px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1.15fr;gap:8px;
  box-shadow:0 -3px 14px rgba(16,16,16,.07);
}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 8px;border-radius:8px;
  font-size:.85rem;font-weight:650;letter-spacing:-.01em;line-height:1;
  border:1.5px solid var(--line);color:var(--charcoal);background:#fff;
  min-height:40px;
}
.mobile-bar a svg{width:16px;height:16px;flex:none}
.mobile-bar .mb-primary{background:var(--gold);border-color:var(--gold);color:var(--charcoal-deep)}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

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

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1120px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .contact-cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px 26px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:44px 36px}
  .footer-brand{grid-column:1/-1}
}

@media (max-width:980px){
  :root{--pad:74px;--header-h:78px}
  .header-phone,.topbar-list li.hide-md{display:none}
  .hamburger{display:grid}

  /* Mobile nav panel.
     Faded in place rather than slid in from the right — an off-screen
     translateX panel doubles the document width and makes mobile Safari
     zoom the whole page out. */
  /* Panel sits below the pinned header and fills the rest of the screen.
     Faded in place rather than slid in from the right — an off-screen
     translateX panel doubles the document width and makes mobile Safari
     zoom the whole page out. */
  .nav{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:1000;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:12px 22px 100px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--ease),transform var(--ease),visibility var(--ease);
  }
  .nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav > li{border-bottom:1px solid var(--line)}
  .nav a.nav-link,.nav button.nav-link{
    width:100%;justify-content:space-between;padding:17px 4px;font-size:1.06rem;border-radius:0;
  }
  .nav .is-active > .nav-link::after{display:none}
  .nav .is-active > .nav-link{color:var(--gold-deep)}
  .dropdown{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border:0;border-radius:0;min-width:0;padding:0 0 12px;
    display:none;background:transparent;
  }
  .nav > li.is-expanded .dropdown{display:block}
  .nav > li:hover .dropdown,.nav > li:focus-within .dropdown{transform:none}
  .nav > li.is-expanded .nav-caret{transform:rotate(180deg)}
  .dropdown a{padding:12px 10px}
  .dropdown a:hover{background:var(--warm)}

  /* The bottom bar is covered while the panel is open, so the panel carries
     its own way to convert. */
  .nav-cta{display:block;border-bottom:0;padding-top:26px;text-align:center}
  .nav-cta .btn{margin-bottom:16px}
  .nav-cta-tel{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--font-display);font-size:1.15rem;font-weight:700;
    color:var(--charcoal);letter-spacing:-.02em;
  }
  .nav-cta-tel svg{width:18px;height:18px;color:var(--gold-deep)}
  .nav-cta small{display:block;margin-top:10px;font-size:.79rem;color:var(--text-soft)}

  .split,.cta-split,.callout{grid-template-columns:1fr}
  .split--reverse .split-media{order:0}
  .split-media--tall img{aspect-ratio:4/3}
  .media-badge{right:16px;bottom:-16px;padding:16px 20px}
  .callout .btn-row{flex-direction:row;flex-wrap:wrap}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .ba-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid li:nth-child(2n){border-right:0}
  .stats-grid li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .mobile-bar{display:grid}
  body{padding-bottom:76px}
  .faq-body{padding-right:12px}
}

@media (max-width:680px){
  :root{--pad:52px;--pad-m:40px;--header-h:72px}
  body{font-size:16px}
  .wrap{padding-inline:18px}

  /* ---- Phone hero: start the copy right under the header ---- */
  .hero .wrap{padding-block:30px 40px}
  .badge{margin-bottom:16px;padding:6px 13px 6px 10px;font-size:.72rem}
  .hero h1{font-size:clamp(2.05rem,8.6vw,2.6rem);line-height:1.08;margin-bottom:.4em}
  .hero-proof{margin-bottom:18px;font-size:.86rem;gap:6px 10px}
  .hero-proof .stars svg{width:15px;height:15px}
  .hero-lede{font-size:1rem;margin-bottom:1.5em}
  .hero .btn-row{margin-bottom:28px;gap:10px}
  .hero-trust{padding-top:20px;gap:9px 18px}
  .hero-trust li{font-size:.83rem}
  .hero-bg img{object-position:center 55%}

  /* ---- Interior page heroes ---- */
  .pagehero .wrap{padding-block:30px 38px}
  .crumbs{margin-bottom:14px;font-size:.78rem}
  .pagehero p{font-size:1rem}
  .pagehero .btn-row{margin-top:24px}

  /* ---- Tighter rhythm throughout ---- */
  .head{margin-bottom:34px}
  .eyebrow{margin-bottom:13px;font-size:.7rem}
  h2{font-size:clamp(1.7rem,7vw,2.1rem)}
  .head p{font-size:1rem}
  .grid{gap:18px}
  .btn{padding:15px 26px}
  .btn--lg{padding:16px 28px;font-size:1rem}
  .section--tight{padding-block:calc(var(--pad) * .8)}

  /* Room for the bottom bar without a big dead gap */
  body{padding-bottom:60px}
  .topbar .wrap{justify-content:center;min-height:36px}
  .topbar-list{gap:16px;justify-content:center}
  .topbar-social{display:none}
  .grid-3,.grid-2,.grid-4,.contact-cards,.gal-grid,.steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  .hero .btn-row{margin-bottom:36px}
  .head{margin-bottom:42px}
  .stats-grid li{padding:24px 14px}
  .review,.svc{padding:26px 22px}
  .media-badge{position:static;margin-top:16px;display:inline-block}
  /* The sticky bottom bar already carries the CTA on phones */
  .header-actions .btn{display:none}
  .footer-grid{grid-template-columns:1fr;gap:38px}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .brand-mark{height:44px}
  .brand-name{font-size:1.3rem}
  .brand-sub{font-size:.58rem;letter-spacing:.42em}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.topbar,.mobile-bar,.site-footer,.btn,.lightbox{display:none !important}
  body{padding:0;font-size:12pt;color:#000}
  .section{padding-block:18pt}
}