/* ============================================================
   THE FOOTHILLS FLOORING COMPANY — shared stylesheet
   Type: Oswald (display/UI) · Lora (prose) · Source Sans 3 (forms)
   Color tokens follow the kit's role-based system.
   ============================================================ */

/* ── WEBFONTS (self-hosted, latin subset, variable) ──
   Served from /css/fonts/ so the existing /css/* immutable
   cache rule in _headers covers them without editing that file.
   Filenames carry the Google Fonts version — bump the name, not
   a query string, if a face is ever re-pulled. */
@font-face{
  font-family:"Oswald";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/css/fonts/oswald-latin-v57.woff2") format("woff2");
  unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Lora";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/css/fonts/lora-latin-v37.woff2") format("woff2");
  unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;
  src:url("/css/fonts/lora-italic-latin-v37.woff2") format("woff2");
  unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/css/fonts/source-sans-3-latin-v19.woff2") format("woff2");
  unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── METRIC-MATCHED FALLBACKS ──
   These are the CLS fix. Each one takes a font already on the
   device and stretches it so its advance widths, ascent and
   descent match the webfont exactly. When the real face swaps
   in there is nothing left to reflow.
   size-adjust = avg advance width (webfont ÷ base font);
   ascent/descent overrides are the webfont's own metrics
   divided by that size-adjust. Measured from the actual font
   files, not estimated. Base fonts: Arial for Oswald and
   Source Sans 3, Times New Roman for Lora. */
@font-face{
  font-family:"Oswald Fallback";font-style:normal;font-weight:400 500;
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:79.77%;ascent-override:149.55%;descent-override:36.23%;line-gap-override:0%;
}
@font-face{
  font-family:"Oswald Fallback";font-style:normal;font-weight:700;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");
  size-adjust:84.05%;ascent-override:141.93%;descent-override:34.38%;line-gap-override:0%;
}
@font-face{
  font-family:"Lora Fallback";font-style:normal;font-weight:400;
  src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif");
  size-adjust:111.61%;ascent-override:90.14%;descent-override:24.55%;line-gap-override:0%;
}
@font-face{
  font-family:"Lora Fallback";font-style:normal;font-weight:600;
  src:local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT"),local("Liberation Serif Bold");
  size-adjust:107.33%;ascent-override:93.73%;descent-override:25.53%;line-gap-override:0%;
}
@font-face{
  font-family:"Lora Fallback";font-style:italic;font-weight:400;
  src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic");
  size-adjust:109.97%;ascent-override:91.48%;descent-override:24.92%;line-gap-override:0%;
}
@font-face{
  font-family:"Source Sans 3 Fallback";font-style:normal;font-weight:400;
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:91.82%;ascent-override:111.52%;descent-override:43.56%;line-gap-override:0%;
}
@font-face{
  font-family:"Source Sans 3 Fallback";font-style:normal;font-weight:600;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");
  size-adjust:89.13%;ascent-override:114.89%;descent-override:44.88%;line-gap-override:0%;
}

*{box-sizing:border-box;margin:0;padding:0}

/* Skip link — first focusable element, visible only on focus (a11y: bypass blocks) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:#0d1f35;padding:12px 20px;font-family:var(--font-disp);font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
:root{
  --navy:#0d1f35;        /* primary dark — nav, footer, dark sections */
  --navy-mid:#122844;    /* slightly lighter dark — anchor strip, hovers */
  --blue:#1a3f6f;        /* primary accent — buttons, CTAs, eyebrows */
  --blue-light:#1e5491;  /* hover/border accent */
  --tan:#9aa3ab;         /* secondary accent — slate gray (stars, trim) */
  --tan-light:#bcc4cc;   /* light accent — light slate gray (eyebrows on dark, hovers) */
  --silver:#e8edf5;
  --cream:#f5f2ec;       /* warm neutral — alt sections */
  --text:#1a1e25;
  --muted:#5a6070;
  --white:#fff;
  --border:#ddd8ce;
  --font-disp:"Oswald","Oswald Fallback",Arial,sans-serif;
  --font-serif:"Lora","Lora Fallback","Times New Roman",serif;
  --font-sans:"Source Sans 3","Source Sans 3 Fallback",Arial,sans-serif;
}
body{font-family:var(--font-sans);color:var(--text);background:#fff !important;padding-bottom:74px;width:100%;max-width:100%;overflow-x:hidden;line-height:1.5}
img{max-width:100%;height:auto;display:block}
html{scroll-behavior:smooth}
a{color:var(--blue)}

/* ── MARQUEE TOP BAR ── */
.top-bar{background:var(--tan);padding:0;overflow:hidden;display:block;white-space:nowrap;border-bottom:1px solid rgba(13,31,53,.15)}
.marquee-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:marquee-scroll 34s linear infinite}
.top-bar:hover .marquee-track{animation-play-state:paused}
.marquee-track .mq-item{font-family:var(--font-disp);font-size:13px;font-weight:700;color:var(--navy);letter-spacing:1.2px;text-transform:uppercase;padding:9px 0;display:inline-flex;align-items:center}
.marquee-track .mq-sep{color:var(--navy);opacity:.45;padding:0 22px;font-size:11px}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;justify-content:center;width:100%;white-space:normal;flex-wrap:wrap}}

/* ── NAV ── */
nav{background:var(--navy);padding:0 48px;display:flex;align-items:center;justify-content:space-between;height:74px;border-bottom:3px solid var(--blue);position:sticky;top:0;z-index:100}
.logo-wrap{display:flex;align-items:center;gap:12px;height:100%;overflow:hidden;text-decoration:none}
.logo-img{height:auto;max-height:52px !important;width:auto;max-width:240px !important;display:block;align-self:center}
.nav-links{display:flex;gap:0}
.nav-links a{font-family:var(--font-disp);font-size:13px;font-weight:500;color:rgba(255,255,255,.78);text-decoration:none;padding:0 13px;height:74px;display:flex;align-items:center;letter-spacing:.5px;text-transform:uppercase;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover{color:#fff;border-bottom-color:var(--blue-light)}

.nav-right{display:flex;align-items:center;gap:10px}
.nav-phone{font-family:var(--font-disp);font-size:16px;font-weight:700;color:var(--tan-light);border:2px solid var(--tan);padding:6px 16px;border-radius:4px;text-decoration:none}
.nav-cta{font-family:var(--font-disp);font-size:13px;font-weight:700;background:var(--blue);color:#fff;padding:9px 18px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none}
.mobile-nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.mobile-nav-toggle span{display:block;width:22px;height:2px;background:#fff}
.mobile-nav-open{display:none;position:fixed;top:74px;left:0;right:0;background:var(--navy);border-top:2px solid var(--blue);padding:12px 20px;z-index:99;flex-direction:column;max-height:calc(100vh - 74px);overflow-y:auto}
.mobile-nav-open a{font-family:var(--font-disp);font-size:16px;color:rgba(255,255,255,.85);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);text-transform:uppercase;letter-spacing:.5px;display:block}
.mobile-nav-open.active{display:flex}


/* ── HERO (split) ── */
.hero{background:linear-gradient(150deg,#060f1c 0%,var(--navy) 45%,#0d1f35 80%,#1a1508 100%);padding:0;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.hero-copy{padding:64px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.hero-media{position:relative;min-height:460px;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,31,53,.55) 0%,rgba(13,31,53,.12) 30%,rgba(13,31,53,0) 60%);pointer-events:none}
.hero::before{content:"";position:absolute;right:-60px;top:-80px;width:500px;height:500px;border-radius:50%;background:rgba(26,63,111,.08);z-index:0;pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(196,168,130,.15);border:1px solid rgba(196,168,130,.5);border-radius:3px;padding:5px 14px;margin-bottom:16px;align-self:flex-start}
.hb-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-light);flex-shrink:0}
.hb-text{font-family:var(--font-disp);font-size:11px;font-weight:700;color:var(--tan-light);letter-spacing:2px;text-transform:uppercase}
.hero h1{font-family:var(--font-disp);font-size:50px;font-weight:700;color:#fff;line-height:1.0;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.hero h1 em{color:var(--tan-light);font-style:normal;display:block;font-size:.6em;margin-top:8px}
.hero-sub{font-family:var(--font-serif);font-size:17px;color:rgba(255,255,255,.8);line-height:1.75;margin-bottom:22px}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.tbadge{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:6px 12px}
.tbadge span{font-size:12px;color:#fff;font-weight:600}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{font-family:var(--font-disp);font-size:15px;font-weight:700;background:var(--blue);color:#fff;padding:14px 28px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;display:inline-block;border:2px solid var(--blue-light);text-decoration:none}
.btn-primary:hover{background:var(--blue-light)}
.btn-outline{font-family:var(--font-disp);font-size:15px;font-weight:500;background:transparent;color:#fff;padding:14px 26px;border:2px solid rgba(255,255,255,.3);border-radius:4px;display:inline-block;text-decoration:none}
.btn-outline:hover{border-color:#fff}

/* ── PAGE HEADER (inner pages) ── */
.page-header{background:linear-gradient(150deg,#060f1c 0%,var(--navy) 50%,#0d1f35 100%);padding:54px 48px;position:relative;overflow:hidden}
.page-header::before{content:"";position:absolute;right:-60px;top:-80px;width:420px;height:420px;border-radius:50%;background:rgba(26,63,111,.10);pointer-events:none}
.ph-kicker{font-family:var(--font-disp);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--tan-light);margin-bottom:10px;position:relative}
.ph-title{font-family:var(--font-disp);font-size:44px;font-weight:700;color:#fff;line-height:1.04;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;position:relative}
.ph-sub{font-family:var(--font-serif);font-size:16px;color:rgba(255,255,255,.8);line-height:1.7;max-width:680px;position:relative}
.breadcrumbs{margin-top:16px;font-family:var(--font-disp);font-size:12px;letter-spacing:.5px;text-transform:uppercase;position:relative}
.breadcrumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs span{color:rgba(255,255,255,.3);padding:0 8px}

/* ── PROOF BAR ── */
.proof-bar{background:var(--navy);border-top:3px solid var(--tan);border-bottom:1px solid rgba(255,255,255,.06);padding:18px 48px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.ps{text-align:center;flex-shrink:0}
.ps-num{font-family:var(--font-disp);font-size:30px;font-weight:700;color:var(--tan-light);display:block;line-height:1}
.ps-label{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.pdiv{width:1px;height:44px;background:rgba(255,255,255,.1);flex-shrink:0}
.pq{flex:1}

.pq-text{font-family:var(--font-serif);font-size:13px;color:rgba(255,255,255,.78);line-height:1.55;font-style:italic}
.pq-name{font-family:var(--font-disp);font-size:11px;color:var(--tan-light);letter-spacing:.5px;margin-top:5px;text-transform:uppercase}
.pb-logos{display:flex;gap:10px;flex-shrink:0;align-items:center}
.pb-logo{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:6px 12px;font-family:var(--font-disp);font-size:11px;color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.5px}

/* ── LEAD CAPTURE / ESTIMATE SECTION ── */
.estimate-section{background:var(--cream);padding:64px 48px}
.estimate-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;max-width:1180px;margin:0 auto}
.est-kicker{font-family:var(--font-disp);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.est-head{font-family:var(--font-disp);font-size:40px;font-weight:700;color:var(--navy);line-height:1.04;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px}
.est-lead{font-family:var(--font-serif);font-size:16px;color:var(--text);line-height:1.7;margin-bottom:24px}
.est-list{list-style:none;padding:0;margin:0 0 26px}
.est-list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-sans);font-size:15px;color:var(--text);line-height:1.4;padding:8px 0}
.est-check{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-top:1px}
.est-check svg{width:14px;height:14px;fill:#fff}
.est-call{display:flex;align-items:center;gap:16px;background:var(--navy);border-radius:6px;padding:18px 22px}

.est-call-num{font-family:var(--font-disp);font-size:26px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:.5px;line-height:1}
.est-form-card{background:#fff;border-radius:8px;padding:30px;box-shadow:0 10px 40px rgba(13,31,53,.10);border:1px solid var(--border)}
.hf-title{font-family:var(--font-disp);font-size:18px;font-weight:700;color:var(--navy);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.hf-sub{font-family:var(--font-serif);font-size:13px;color:var(--muted);margin-bottom:18px;font-style:italic}

/* ── LEAD FORM ── */
._gotcha{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}
.lead-form{margin:0;padding:0}
.lead-form label{display:block;margin-bottom:10px;font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:.5px}
.lead-form label input,.lead-form label textarea,.lead-form label select{width:100%;background:#f4f6f2;border:1.5px solid var(--border);border-radius:4px;padding:10px 14px;font-size:13px;color:var(--text);font-family:var(--font-sans);margin-top:5px;text-transform:none;letter-spacing:0;font-weight:400;box-sizing:border-box}
.lead-form label input:focus,.lead-form label textarea:focus,.lead-form label select:focus{outline:none;border-color:var(--blue);background:#fff}
.lead-form label textarea{resize:vertical;min-height:64px}
.lead-form label select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231a3f6f' d='M5 6L0 0h10z'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:32px}

.submit-btn{font-family:var(--font-disp);font-size:14px;font-weight:700;background:var(--blue);color:#fff;border:none;border-radius:4px;padding:12px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;width:100%;margin-top:4px}
.submit-btn:hover{background:var(--navy)}

.submit-btn{flex:1}

.hc-note{font-family:var(--font-serif);font-size:11px;color:var(--muted);text-align:center;margin-top:8px;font-style:italic}
.hc-error{margin-top:10px;padding:9px 11px;background:#fee;border:1px solid #f99;border-radius:4px;color:#900;font-size:12px;font-family:var(--font-sans)}

/* ── SECTIONS ── */
.section{padding:72px 48px;background:#fff !important}
.section-alt{padding:72px 48px;background:var(--cream) !important}
.section-navy{padding:72px 48px;background:var(--navy)}

.sec-kicker{font-family:var(--font-disp);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.sec-kicker-lite{font-family:var(--font-disp);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--tan-light);margin-bottom:8px}
.sec-title{font-family:var(--font-disp);font-size:40px;font-weight:700;color:var(--navy);line-height:1.05;margin-bottom:12px}
.sec-title-w{font-family:var(--font-disp);font-size:40px;font-weight:700;color:#fff;line-height:1.05;margin-bottom:12px}
.sec-sub{font-family:var(--font-serif);font-size:16px;color:var(--muted);line-height:1.75;max-width:640px;margin-bottom:48px}

/* ── SERVICES GRID ── */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.svc-card{border:1px solid var(--border);background:#fff;padding:0;overflow:hidden;position:relative;transition:box-shadow .2s}
.svc-card:hover{box-shadow:0 4px 20px rgba(26,63,111,.14);z-index:1}

.svc-body{padding:22px}
.svc-icon{width:42px;height:42px;background:var(--navy);border-radius:5px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.svc-icon svg{width:22px;height:22px;fill:#fff}
.svc-card h3{font-family:var(--font-disp);font-size:17px;font-weight:700;color:var(--navy);margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px;line-height:1.2}
.svc-card p{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:12px}
.svc-bullets{list-style:none;padding:0;margin-bottom:14px}
.svc-bullets li{font-size:12px;color:var(--text);padding:3px 0;padding-left:14px;position:relative;line-height:1.4}
.svc-bullets li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--blue);pointer-events:none}
.svc-price{font-family:var(--font-disp);font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;background:rgba(26,63,111,.08);border-radius:3px;display:inline-block;margin-bottom:12px}
.svc-link{font-family:var(--font-disp);font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;text-decoration:none}
.svc-link:hover{color:var(--navy)}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-main-img{width:100%;height:340px;object-fit:cover;border-radius:8px;display:block;margin-bottom:12px}
.about-creds-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cred-badge{background:#fff;border:1.5px solid var(--border);border-radius:6px;padding:14px;text-align:center}
.cred-badge-icon{font-size:24px;display:block;margin-bottom:6px}
.cred-badge-name{font-family:var(--font-disp);font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;line-height:1.3}

.about-body{font-family:var(--font-serif);font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:18px}
.cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.cred-item{background:var(--cream);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:0 5px 5px 0;padding:10px 12px}
.cred-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.cred-val{font-family:var(--font-disp);font-size:13px;font-weight:700;color:var(--navy)}

/* ── WHY US ── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.why-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:22px;display:flex;align-items:flex-start;gap:14px}
.why-check{width:22px;height:22px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.why-check svg{width:10px;height:10px;fill:#fff}
.why-title{font-family:var(--font-disp);font-size:14px;font-weight:700;color:#fff;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.why-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}

/* ── PROCESS ── */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.process-grid::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;background:rgba(26,63,111,.25);pointer-events:none}
.proc-step{text-align:center;padding:0 14px}
.proc-circle{width:68px;height:68px;border-radius:50%;border:2px solid var(--blue);background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 3px 14px rgba(26,63,111,.18);position:relative;z-index:1}
.proc-num{font-family:var(--font-disp);font-size:24px;font-weight:700;color:var(--blue)}
.proc-title{font-family:var(--font-disp);font-size:14px;font-weight:700;color:#fff;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.proc-desc{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}

/* ── GALLERY ── */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gallery-img{width:100%;height:210px;object-fit:cover;display:block;border-radius:4px;transition:opacity .2s}
.gallery-img:hover{opacity:.88}

/* Homepage project gallery: portrait floor photos, taller tiles cropped toward the floor. */
.gallery-floors .gallery-img{height:300px;object-position:50% 70%}
@media(max-width:560px){.gallery-floors .gallery-img{height:220px}}

/* ── FAQ ── */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.faq-item{border-bottom:1px solid var(--border);padding:18px 0}
.faq-col .faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{font-family:var(--font-disp);font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px;line-height:1.3}
.faq-a{font-family:var(--font-serif);font-size:14px;color:var(--muted);line-height:1.7}

/* ── SERVICE AREA ── */

.area-intro{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:20px 28px;margin-bottom:24px}
.area-intro p{font-family:var(--font-serif);font-size:15px;color:rgba(255,255,255,.8);line-height:1.75}
.area-intro strong{color:var(--tan-light)}

/* ── CTA BANNER ── */
.cta-banner{background:var(--blue);padding:60px 48px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.cb-title{font-family:var(--font-disp);font-size:40px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1.5px;line-height:1.05;margin-bottom:12px}
.cb-sub{font-family:var(--font-serif);font-size:16px;color:rgba(255,255,255,.9);line-height:1.7;max-width:560px}
.cb-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-end;flex-shrink:0}
.cb-phone{font-family:var(--font-disp);font-size:34px;font-weight:700;color:#fff;text-align:center;letter-spacing:.5px;text-decoration:none}

.cb-btn{font-family:var(--font-disp);font-size:15px;font-weight:700;background:#fff;color:var(--blue);padding:14px 32px;border-radius:4px;text-decoration:none;text-transform:uppercase;letter-spacing:.5px;display:block;text-align:center;white-space:nowrap}

/* ── MOBILE STICKY ── */
.mobile-sticky{display:flex;background:var(--blue);border-top:2px solid rgba(255,255,255,.2);padding:10px 14px;align-items:center;justify-content:space-between;gap:10px;position:fixed;bottom:0;left:0;right:0;z-index:90}
.ms-estimate{flex:1;font-family:var(--font-disp);font-size:14px;font-weight:700;background:#fff;color:var(--blue);padding:12px 10px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none;text-align:center}
.ms-call{flex:1;font-family:var(--font-disp);font-size:15px;font-weight:700;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.5);color:#fff;padding:11px 10px;border-radius:5px;letter-spacing:.3px;text-decoration:none;text-align:center;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:7px}
.ms-call-icon{width:16px;height:16px;fill:#fff;flex-shrink:0}

/* ── FOOTER ── */
footer{background:var(--navy);border-top:3px solid var(--tan);padding:48px 48px 28px}
.footer-logo{max-height:54px;width:auto;margin-bottom:16px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.fg-col h2{font-family:var(--font-disp);font-size:13px;font-weight:700;color:var(--tan-light);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgba(196,168,130,.2)}
.fg-col p,.fg-col li{font-size:13px;color:rgba(255,255,255,.5);line-height:2}
.fg-col ul{list-style:none}
.fg-col ul li a{color:rgba(255,255,255,.5);text-decoration:none}
.fg-col ul li a:hover{color:#fff}
.fg-nap{font-size:13px;color:rgba(255,255,255,.55);line-height:2}
.fg-nap strong{color:rgba(255,255,255,.85)}
.fg-nap a{color:rgba(255,255,255,.55);text-decoration:none}
.fg-lic{font-size:11px;color:rgba(255,255,255,.55);line-height:1.7;margin-top:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.55)}
.footer-copy a{color:rgba(255,255,255,.55);text-decoration:underline}

/* ── CONTACT ── */
.contact-quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px}
.contact-info-card{background:#fff;border:1.5px solid var(--border);border-top:4px solid var(--blue);border-radius:8px;padding:26px;text-align:center}
.cic-icon{width:54px;height:54px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.cic-icon svg{width:26px;height:26px;fill:#fff}
.cic-label{font-family:var(--font-disp);font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.cic-value{font-family:var(--font-disp);font-size:20px;font-weight:700;color:var(--navy);text-decoration:none;line-height:1.25;display:block}
.cic-sub{font-size:13px;color:var(--muted);margin-top:4px}

/* ── PROSE (service, financing & location pages) ── */
.prose-wrap em{font-style:italic;color:var(--navy)}
.prose-wrap{max-width:820px;margin:0 auto}
.prose-wrap h2{font-family:var(--font-disp);font-size:24px;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;margin:28px 0 10px}
.prose-wrap p{font-family:var(--font-serif);font-size:15px;color:var(--text);line-height:1.8;margin-bottom:14px}
.prose-wrap ul{margin:0 0 16px 22px}
.prose-wrap li{font-family:var(--font-serif);font-size:15px;color:var(--text);line-height:1.7;margin-bottom:6px}
.prose-wrap h3{font-family:var(--font-disp);font-size:18px;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin:24px 0 8px}
.prose-wrap a{color:var(--blue)}
.section-navy .prose-wrap h2{color:#fff}

/* ── RESPONSIVE ── */
.top-bar,.section,.section-navy,.section-alt,.cta-banner,footer,nav,.proof-bar,.page-header{width:100%;box-sizing:border-box}

@media(max-width:1024px){
  nav,.section,.section-navy,.section-alt,.cta-banner,footer,.page-header{padding-left:32px;padding-right:32px}
  .hero{grid-template-columns:1fr;gap:0}
  .hero-copy{padding:48px 32px}
  .hero-media{min-height:300px;order:-1}
  .estimate-section{padding:52px 32px}
  .estimate-wrap{grid-template-columns:1fr;gap:32px}
  .est-head{font-size:34px}
  .proof-bar{flex-wrap:wrap;gap:12px;padding:16px 32px}
  .pdiv{display:none}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .why-grid{grid-template-columns:1fr 1fr}
  .process-grid::before{display:none}
  
  .faq-grid{grid-template-columns:1fr}
  
  .cta-banner{grid-template-columns:1fr;gap:24px;text-align:center}
  .cb-actions{align-items:center}
  .cb-sub{max-width:none}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  
  
  
  
  .ph-title{font-size:36px}
  
}
@media(max-width:768px){
  .marquee-track .mq-item{font-size:12px;letter-spacing:1px}
  .marquee-track .mq-sep{padding:0 16px}
  nav{padding:0 20px;height:62px}
  .nav-links,.nav-phone,.nav-right{display:none}
  
  .mobile-nav-open{top:62px}
  .mobile-nav-toggle{display:flex}
  .nav-cta{font-size:12px;padding:7px 13px}
  .logo-img{max-height:42px !important;max-width:190px !important}
  .hero-copy{padding:36px 20px}
  .hero-media{min-height:230px}
  .estimate-section{padding:40px 20px}
  .est-head{font-size:28px}
  .est-form-card{padding:22px}
  .hero h1{font-size:36px}
  .hero-sub{font-size:14px}
  .hero-ctas{flex-direction:column}
  .hero-ctas a{text-align:center}
  .proof-bar{padding:14px 20px}
  .pq{display:none}
  .section,.section-navy,.section-alt,.page-header{padding:44px 20px}
  .sec-title,.sec-title-w{font-size:30px}
  .ph-title{font-size:30px}
  .services-grid{grid-template-columns:1fr}
  .about-main-img{height:240px}
  
  .why-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:repeat(2,1fr);gap:24px 0}
  
  
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .cta-banner{padding:36px 20px}
  .cb-title{font-size:28px}
  .cb-phone{font-size:26px}
  footer{padding:36px 20px 90px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .contact-quick-row{grid-template-columns:1fr}
  body{padding-bottom:0}
}
@media(max-width:480px){
  .hero h1{font-size:30px}
  .sec-title,.sec-title-w,.ph-title{font-size:25px}
  .cb-title{font-size:23px}
  .gallery-grid{grid-template-columns:1fr 1fr}
}

/* ── STICKY CALL BAR — all breakpoints ── */
@media(min-width:769px){
  .mobile-sticky{justify-content:center;gap:14px;padding:11px 24px}
  .ms-estimate,.ms-call{flex:0 0 auto;min-width:215px;font-size:15px;padding:12px 26px}
}
@media(max-width:400px){
  .ms-estimate,.ms-call{font-size:13px;padding:11px 6px}
}

/* ── Service & contact pages ── */
.prose-figure{margin:22px 0 26px}
.prose-figure img{width:100%;height:440px;object-fit:cover;object-position:50% 70%;border-radius:6px;display:block}
.prose-figure figcaption{font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--muted);margin-top:8px}
.spec-table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14px}
.spec-table th{background:var(--navy);color:#fff;font-family:var(--font-disp);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:10px 12px}
.spec-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text);line-height:1.5}
.spec-table tbody tr:nth-child(even){background:rgba(26,63,111,.04)}
.gallery-floors.gallery-3{grid-template-columns:repeat(3,1fr)}

.prose-wrap .faq-item{margin-bottom:6px}
.prose-wrap .faq-q{font-size:16px;text-transform:none;letter-spacing:0;margin:18px 0 6px}
@media(max-width:560px){.prose-figure img{height:300px}.gallery-floors.gallery-3{grid-template-columns:1fr 1fr}.spec-table{font-size:13px}.spec-table th,.spec-table td{padding:8px}}

/* ── Maps (R08 location/contact, R20 homepage) ── */
.gbp-map{width:100%;margin:0}
.gbp-map-frame{position:relative;width:100%;height:360px;overflow:hidden;background:#e9e9e9}
.gbp-map-frame.gbp-map-tall{height:540px}
.gbp-map-frame iframe,.home-city-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;max-width:none;border:0;border-radius:0}
.home-city-map{width:100%}
.home-city-map-frame{position:relative;width:100%;height:360px;overflow:hidden;background:#e9e9e9}
@media(max-width:768px){.gbp-map-frame,.home-city-map-frame{height:300px}.gbp-map-frame.gbp-map-tall{height:380px}}

/* ── County grid (R14 Block A) ── */
.area-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;margin-top:8px}
.area-col h3,.area-col h4,.area-col-title{font-family:var(--font-disp);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--navy);color:#fff;padding:12px 16px;margin:0}
.area-col ul{list-style:none;margin:0;padding:6px 0}
.area-col a{display:block;padding:8px 16px;font-size:14px;color:var(--navy);text-decoration:none}
.area-col a:hover{background:rgba(26,63,111,.06);color:var(--blue)}
.section-navy .area-columns{border-color:rgba(255,255,255,.15)}
@media(max-width:1024px){.area-columns{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.area-columns{grid-template-columns:1fr}}

/* ── Location pages ── */
.loc-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1100px;margin:28px auto 0}
.loc-svc-card{display:block;background:#fff;border:1px solid var(--border);border-top:3px solid var(--blue);border-radius:6px;padding:16px;font-family:var(--font-disp);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--navy);text-decoration:none}
.loc-svc-card:hover{box-shadow:0 4px 16px rgba(26,63,111,.14)}
.loc-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:6px auto 28px}
.loc-insight{background:var(--cream,#f6f4ef);border:1px solid var(--border);border-radius:8px;padding:20px}
.loc-insight h3{font-family:var(--font-disp);font-size:16px;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin:0 0 8px}
.loc-insight p{font-family:var(--font-serif);font-size:14px;line-height:1.7;color:var(--text);margin:0}
.why-local{background:var(--navy);border-radius:8px;padding:20px 22px;margin:4px 0 8px}
.why-local .why-title{color:#fff;font-family:var(--font-disp);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.why-local .why-desc{color:rgba(255,255,255,.85);font-size:14px;line-height:1.65}
.nearby-cities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.nearby-link{display:block;background:#fff;border:1px solid var(--border);border-radius:6px;padding:12px 14px;font-size:14px;color:var(--navy);text-decoration:none;font-weight:600}
.nearby-link:hover{border-color:var(--blue);color:var(--blue)}
.nearby-all{margin-top:18px;font-size:14px}
.nearby-all a{color:var(--blue)}
@media(max-width:900px){.loc-svc-grid,.nearby-cities-grid{grid-template-columns:repeat(2,1fr)}.loc-insights{grid-template-columns:1fr}}
.price-note{font-size:13px!important;color:var(--muted)!important;font-style:italic}
.price-ranges td:first-child{font-weight:600;color:var(--navy)}

/* ── Nav: 8 items — keep labels on one line and tighten below 1280px ── */
.nav-links a,.nav-phone,.nav-cta{white-space:nowrap}
@media(max-width:1280px){nav{padding:0 24px}.nav-links a{padding:0 9px;font-size:12px}.nav-phone{font-size:14px;padding:6px 10px}.nav-cta{padding:9px 12px;font-size:12px}}
@media(max-width:1140px){.nav-phone{display:none}}

/* ── MOBILE HERO — copy first, photo below it ── */
@media(max-width:1024px){
  .hero-media{order:1}
}
@media(max-width:768px){
  .hero{display:flex;flex-direction:column}
  .hero-media{min-height:260px}
  .hero-media::after{display:none}
  .hero::before{display:none}
  .hero-copy{padding:40px 20px 36px}
  .hero-badge{padding:5px 10px;margin-bottom:14px}
  .hb-text{font-size:10px;letter-spacing:1px}
  .hero h1{font-size:32px;letter-spacing:.5px;margin-bottom:12px}
  .hero h1 em{font-size:.62em;margin-top:6px}
  .hero-sub{font-size:15px;line-height:1.6;margin-bottom:18px}
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
  .tbadge{padding:6px 8px}
  .tbadge span{font-size:11px}
}
@media(max-width:480px){
  .hero h1{font-size:28px}
}