/* ===== Epic Glass Tinting — Mock v2 (Build-Standard) · Rise Local ===== */
/* Dark, cinematic auto-services aesthetic driven by the vetted tint/glass exemplars
   (The Windows Tinting / WindshieldGo / D'Andrea). All real Epic photography.
   Strategy: lead with the 157-review COUNT (most-reviewed tint/glass shop in town),
   embody a fast + secure + working front door. Verified services only (PPF + ceramic
   owner-confirmed 2026-07-01; film brands + email 🟡 owner-claim off their own site).

   PALETTE RE-SKIN 2026-07-31 — RED + BLACK, David's actual brand (he asked for it directly).
   Sourced, not guessed: his EPIC GLASS wordmark is red on black (logo pulled from the archived
   epicglass.com, sampled deep-crimson family ~#8B0011), and his old site's header ground was
   near-black (images/top.jpg). Both mirrored on his truck decal. The previous amber/orange
   palette was exemplar-driven drift, never his — see FACTS `brand_palette:`.
   ⚠️ Deliberate exception: STAR RATINGS stay GOLD (--gold). Recolouring stars red would fight a
   universal convention and weaken the 157-review proof, which is Epic's single strongest asset.
   --gold is now stars-only; every other former --gold usage moved to --accent. */

:root{
  /* neutral blacks (was blue-black #0b0c10/#101218 — his ground is true black) */
  --bg:#08080a; --bg-2:#0f0f12; --bg-3:#16161a; --bg-4:#1e1e23;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --text:#eef1f6; --muted:#a7afbe; --muted-2:#7d8595;
  --accent:#e9000a; --accent-2:#8b0011; --gold:#ffce7a; /* --gold = STAR RATINGS ONLY */
  --accent-rgb:233,0,10;
  --heat:linear-gradient(135deg,#e9000a 0%,#b00d20 45%,#8b0011 100%);
  --radius:16px; --radius-sm:11px;
  --shadow:0 18px 50px -22px rgba(0,0,0,.7);
  --maxw:1180px;
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --display:"Sora",var(--font);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- Preview banner ---------- */
.preview-banner{
  background:linear-gradient(90deg,#1a1410,#241a12);
  color:#f3d8b6; font-size:13px; line-height:1.5; text-align:center;
  padding:9px 16px; border-bottom:1px solid rgba(255,165,80,.25);
}
.preview-banner a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.preview-banner strong{color:#ffe9cf}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display); font-weight:700; font-size:15px;
  padding:14px 22px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s; white-space:nowrap;
}
.btn-primary{background:var(--heat); color:#fff; box-shadow:0 12px 30px -12px rgba(var(--accent-rgb),.55)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(var(--accent-rgb),.65)}
.btn-call{background:#1c2029; color:var(--text); border-color:var(--line-2)}
.btn-call:hover{background:#232834; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.btn-full{width:100%}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--heat);box-shadow:0 0 10px rgba(var(--accent-rgb),.8)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(8,8,10,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{height:38px;width:auto;flex:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.01em}
.logo-tag{font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:26px}
.nav>a{font-size:14.5px;font-weight:500;color:var(--muted);transition:color .15s}
.nav>a:hover{color:var(--text)}
.nav-phone{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;color:var(--text)!important}
.nav-phone svg{color:var(--accent)}
.nav-cta{background:var(--heat);color:#fff!important;font-family:var(--display);font-weight:700;font-size:14px;padding:10px 17px;border-radius:9px;transition:transform .15s}
.nav-cta:hover{transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.2s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(7,8,11,.96) 0%, rgba(7,8,11,.82) 38%, rgba(7,8,11,.30) 70%, rgba(7,8,11,.55) 100%),
    linear-gradient(0deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,.08) 42%);
}
.hero-grid{position:relative;z-index:2;padding:120px 22px 56px;width:100%}
.hero-copy{max-width:660px}
.hero-title{font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.04;font-size:clamp(2.5rem,6.2vw,4.5rem);margin-bottom:20px}
.hero-line{display:block}
.hero-line.accent{background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(1.02rem,1.7vw,1.2rem);color:#d4dae4;max-width:580px;margin-bottom:24px}
.hero-sub strong{color:#fff}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.hp-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  background:rgba(16,16,20,.72);border:1px solid var(--line-2);border-radius:30px;padding:8px 15px;backdrop-filter:blur(4px);
}
.hp-rating .hp-stars{color:var(--gold);letter-spacing:1px}
.hp-rating strong{color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px}

.hero-ribbon{position:relative;z-index:2;border-top:1px solid var(--line);background:rgba(9,9,12,.7);backdrop-filter:blur(8px)}
.hero-ribbon-inner{display:flex;flex-wrap:wrap;gap:8px 30px;padding:15px 22px;justify-content:center}
.ribbon-item{font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
a.ribbon-item:hover{color:var(--text)}

/* ---------- Proof band (review COUNT leads) ---------- */
.proofband{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line)}
.proofband-inner{display:grid;grid-template-columns:auto 1fr;gap:30px 44px;align-items:center;padding:34px 22px}
.pb-feature{display:flex;align-items:center;gap:18px;padding-right:30px;border-right:1px solid var(--line)}
.pb-num{
  font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,7vw,4.6rem);line-height:.9;
  background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pb-feature-text{display:flex;flex-direction:column;max-width:230px}
.pb-feature-text strong{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--text)}
.pb-feature-text span{font-size:13.5px;color:var(--muted);line-height:1.4;margin-top:3px}
.pb-stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pb-stats li{display:flex;flex-direction:column;gap:3px}
.pb-stat-k{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#fff;line-height:1}
.pb-star{color:var(--gold);font-size:1.1rem;margin-left:1px}
.pb-stat-v{font-size:12.5px;color:var(--muted);line-height:1.35}

/* ---------- Section heads ---------- */
section{position:relative}
.services-section,.work-section,.request-section,.reviews-section,.faq-section,.visit-section{padding:84px 0}
.section-head{max-width:700px;margin-bottom:44px}
.section-title{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.1;font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:14px}
.section-lead{font-size:1.05rem;color:var(--muted)}
.section-lead em{color:var(--muted-2);font-style:italic;font-size:.95em}

/* ---------- Services ---------- */
.services-section{background:var(--bg)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{
  position:relative;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 24px;transition:transform .18s ease,border-color .18s ease,background .18s;
}
.svc-card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--bg-4)}
.svc-feature{border-color:rgba(var(--accent-rgb),.4);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),var(--bg-3))}
.svc-badge{position:absolute;top:16px;right:16px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--heat);padding:4px 10px;border-radius:20px}
.svc-ico{width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:var(--bg);border:1px solid var(--line-2);color:var(--accent);margin-bottom:18px}
.svc-feature .svc-ico{color:#fff;background:var(--heat)}
.svc-feature .svc-ico svg path{fill:#fff}
.svc-card h3{font-family:var(--display);font-weight:700;font-size:1.22rem;margin-bottom:10px}
.svc-card p{color:var(--muted);font-size:.97rem;margin-bottom:16px}
.svc-tag{display:inline-block;font-size:12.5px;font-weight:600;color:var(--accent);background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.2);border-radius:20px;padding:5px 12px}
.svc-cta-card{background:linear-gradient(180deg,var(--bg-4),var(--bg-3));border-color:var(--line-2);display:flex;flex-direction:column;grid-column:span 2;align-items:center;text-align:center}
.svc-cta-card .svc-ico{color:var(--accent)}
.svc-card-link{margin-top:auto;font-family:var(--display);font-weight:700;font-size:.97rem;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.svc-card-link:hover{color:#fff}

/* ---------- Work mosaic ---------- */
.work-section{background:var(--bg-2)}
.work-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:218px;gap:16px;grid-auto-flow:dense}
.work-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);grid-column:span 2}
.work-card.work-tall{grid-column:span 1;grid-row:span 2}
.work-card.work-wide{grid-column:span 2}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.work-card:hover img{transform:scale(1.05)}
.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,7,10,.82) 0%,rgba(6,7,10,0) 50%)}
.wc-tag{position:absolute;top:13px;left:13px;z-index:2;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--heat);padding:4px 11px;border-radius:20px}
.work-card figcaption{position:absolute;left:15px;bottom:13px;z-index:2;font-family:var(--display);font-weight:600;font-size:14.5px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);padding-right:14px}

/* ---------- Request / quote ---------- */
.request-section{background:var(--bg)}
.request-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.request-main{min-width:0;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.rq-steps{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.rq-step{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted-2);flex:1;min-width:120px;opacity:.6;transition:.2s;cursor:default}
.rq-step.done{cursor:pointer}
.rq-step .rs-num{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);font-family:var(--display);font-weight:700;font-size:13px}
.rq-step.active{opacity:1;color:var(--text)}
.rq-step.active .rs-num{background:var(--heat);color:#fff;border-color:transparent}
.rq-step.done{opacity:1}
.rq-step.done .rs-num{background:rgba(var(--accent-rgb),.18);color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.rq-content{display:none}
.rq-content.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-title{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:18px}
.service-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.service-picker:not(.service-picker-2) .service-card:last-child:nth-child(odd){grid-column:1/-1}
.service-picker-2{grid-template-columns:repeat(3,1fr)}
.service-card{
  display:flex;align-items:center;gap:13px;text-align:left;
  background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:15px 16px;cursor:pointer;
  transition:.16s;color:var(--text);font-family:var(--font);
}
.service-card:hover{border-color:var(--accent);background:var(--bg-4)}
.service-card.selected{border-color:var(--accent);background:rgba(var(--accent-rgb),.1);box-shadow:0 0 0 1px var(--accent) inset}
.service-emoji{font-size:24px;flex:none}
.service-text{display:flex;flex-direction:column;font-weight:600;font-size:15px}
.service-sub{font-weight:400;font-size:12.5px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field-full{grid-column:1/-1}
.field span{font-size:13px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--bg);border:1px solid var(--line-2);border-radius:10px;color:var(--text);
  padding:12px 13px;font-family:var(--font);font-size:15px;width:100%;transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical}
.rq-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}

.request-side{min-width:0;position:sticky;top:90px}
.dispatch-card{background:linear-gradient(180deg,var(--bg-4),var(--bg-3));border:1px solid var(--line-2);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.dispatch-head{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pulse{width:9px;height:9px;border-radius:50%;background:#42d977;box-shadow:0 0 0 0 rgba(66,217,119,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(66,217,119,.6)}70%{box-shadow:0 0 0 9px rgba(66,217,119,0)}100%{box-shadow:0 0 0 0 rgba(66,217,119,0)}}
.dispatch-empty{color:var(--muted-2);font-size:14px;font-style:italic}
.dl-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
.dl-key{font-size:12.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em;flex:none}
.dl-val{font-size:14px;font-weight:600;text-align:right}
.dispatch-call{margin:18px 0 14px}
.qcard-trust{border-top:1px solid var(--line);padding-top:16px}
.qtrust-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.qtrust-list li{display:flex;gap:9px;font-size:13.5px;color:var(--muted)}
.qtrust-list li span{color:#42d977;font-weight:800}
.dispatch-note{margin-top:14px;font-size:12.5px;color:var(--muted-2);text-align:center}

.confirm-success{text-align:center;padding:14px 0}
.cs-mark{width:60px;height:60px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:rgba(66,217,119,.15);color:#42d977;font-size:30px;border:1px solid rgba(66,217,119,.4)}
.confirm-success h4{font-family:var(--display);font-size:1.4rem;margin-bottom:10px}
.confirm-success>p{color:var(--muted);max-width:460px;margin:0 auto 22px}
.confirm-success a{color:var(--accent);text-decoration:underline}
.cs-detail{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;max-width:460px;margin:0 auto}
.cs-line{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line)}
.cs-line:last-child{border-bottom:0}
.cs-label{font-size:12.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em}
.cs-value{font-size:14px;font-weight:600;text-align:right}

/* ---------- Reviews ---------- */
.reviews-section{background:var(--bg-2)}
.rev-score{display:flex;align-items:center;gap:18px;margin-top:18px;flex-wrap:wrap}
.rs-big{
  font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;
  background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.rs-stack{display:flex;flex-direction:column;gap:4px}
.rev-score .rs-stars{color:var(--gold);font-size:1.25rem;letter-spacing:2px}
.rs-meta{color:var(--muted);font-size:1rem;max-width:420px}
.rs-meta strong{color:var(--text)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.review-card .rev-stars{color:var(--gold);letter-spacing:2px;margin-bottom:14px;font-size:1.05rem}
.review-card blockquote{font-size:1rem;line-height:1.65;color:#dfe4ec;margin-bottom:16px}
.review-card figcaption{font-size:13.5px;color:var(--muted-2);font-weight:600}
.review-foot{margin-top:26px;color:var(--muted);font-size:.95rem}
.review-foot a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq-section{background:var(--bg)}
.faq-list{max-width:820px;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:4px 22px;transition:border-color .15s}
.faq-item[open]{border-color:var(--line-2)}
.faq-item summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.06rem;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;color:var(--accent);font-weight:400;line-height:1;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted);padding:0 0 20px;font-size:.98rem;max-width:90%}
.faq-item p a{color:var(--accent);text-decoration:underline}

/* ---------- Find us ---------- */
.visit-section{background:var(--bg-2)}
.visit-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.area-lead{color:var(--muted);margin-bottom:22px;font-size:1.05rem}
.visit-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-bottom:26px}
.visit-list li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.visit-list strong{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);width:110px;flex:none;padding-top:2px}
.visit-list span{font-size:15px}
.visit-list a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.visit-cta{display:flex;flex-wrap:wrap;gap:12px}
.visit-media{display:flex;flex-direction:column;gap:16px}
.map-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.map-embed{width:100%;height:300px;border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.map-pin{display:block;background:var(--bg-3);padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--accent);border-top:1px solid var(--line)}
.shop-photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.shop-photo img{width:100%;height:230px;object-fit:cover}
.shop-photo figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(6,7,10,.9),transparent);color:#fff;font-size:13.5px;font-weight:600;padding:22px 16px 13px}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding-top:54px}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1.3fr;gap:30px;padding-bottom:36px}
.footer-brand .logo{margin-bottom:14px}
.footer-tag{color:var(--muted);font-size:14px;max-width:360px}
.footer-nav{display:flex;flex-direction:column;gap:11px}
.footer-nav a{color:var(--muted);font-size:14.5px}
.footer-nav a:hover{color:var(--text)}
.footer-contact{display:flex;flex-direction:column;gap:9px}
.footer-contact a,.footer-contact span{color:var(--muted);font-size:14px}
.footer-contact a:hover{color:var(--accent)}
.footer-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted-2)}
.footer-credit a{color:var(--accent)}

/* ---------- Mobile sticky bar ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(11,12,16,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line-2);padding:10px 14px;gap:10px}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:11px;font-family:var(--display);font-weight:700;font-size:15px}
.mb-call{background:#1c2029;color:var(--text);border:1px solid var(--line-2)}
.mb-call svg{color:var(--accent)}
.mb-book{background:var(--heat);color:#fff}

/* ---------- Shade picker ---------- */
.shade-section{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);border-top:1px solid var(--line);padding:84px 0}
.shade-tabs{display:inline-flex;gap:8px;background:var(--bg-3);border:1px solid var(--line);border-radius:14px;padding:6px;margin-bottom:26px}
.shade-tab{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--muted);background:transparent;border:0;border-radius:10px;padding:11px 20px;cursor:pointer;transition:.18s}
.shade-tab:hover{color:var(--text)}
.shade-tab.active{background:var(--heat);color:#fff}
.shade-pane{display:none}
.shade-pane.active{display:block;animation:fade .25s ease}
.shade-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:stretch}
.shade-stage{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}
.shade-svg{width:100%;height:auto;border-radius:12px;display:block}
.shade-readout{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:2px 6px}
.sr-pct{font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:96px}
.sr-text{font-size:14.5px;color:var(--muted);max-width:440px;line-height:1.5}
.shade-fine{font-size:12px;color:var(--muted-2);padding:0 6px}
.shade-side{display:flex;flex-direction:column;gap:16px}
.shade-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shade-chip{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;padding:12px 8px 10px;cursor:pointer;color:var(--text);font-family:var(--font);transition:.16s;text-align:center}
.shade-chip:hover{border-color:var(--accent);background:var(--bg-4)}
.shade-chip.selected{border-color:var(--accent);background:rgba(var(--accent-rgb),.1);box-shadow:0 0 0 1px var(--accent) inset}
.chip-swatch{width:44px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.25)}
.chip-label{font-family:var(--display);font-weight:700;font-size:15px;line-height:1}
.chip-sub{font-size:11px;color:var(--muted);line-height:1.25}
.shade-legal{background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.22);border-radius:12px;padding:16px 18px;font-size:13.5px;color:var(--muted);line-height:1.55}
.shade-legal strong{display:block;font-family:var(--display);color:var(--accent);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.shade-legal p{margin:0}
.shade-home-title{font-family:var(--display);font-weight:700;font-size:1.2rem}
.benefit-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.benefit-list li{display:flex;gap:11px;font-size:15px;color:var(--muted);line-height:1.5}
.benefit-list li span{color:#42d977;font-weight:800;flex:none}
.film-band{margin-top:46px;padding-top:34px;border-top:1px solid var(--line);text-align:center}
.film-label{display:inline-block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.film-names{display:flex;justify-content:center;align-items:baseline;gap:22px;flex-wrap:wrap;font-family:var(--display);font-weight:800;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:.01em;color:#e8ecf3}
.film-dot{color:var(--accent);font-weight:400}
.film-note{margin-top:12px;font-size:13.5px;color:var(--muted)}
.film-note em{color:var(--muted-2);font-size:.95em}
@media(max-width:1120px){
  .nav{gap:18px}
  .nav>a{font-size:13.5px}
}
@media(max-width:980px){
  .shade-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .shade-section{padding:60px 0}
  .shade-tab{padding:10px 14px;font-size:13.5px}
  .sr-pct{font-size:1.8rem;min-width:78px}
  .film-names{gap:14px}
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-cta-card{grid-column:auto}
  .proofband-inner{grid-template-columns:1fr;gap:24px}
  .pb-feature{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:22px}
  .request-grid{grid-template-columns:1fr}
  .request-side{position:static}
  .review-grid{grid-template-columns:1fr}
  .visit-inner{grid-template-columns:1fr;gap:28px}
  .work-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;grid-auto-flow:row}
  .work-card,.work-card.work-wide,.work-card.work-tall{grid-column:span 1;grid-row:span 1}
  .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:900px){
  .nav{
    position:fixed;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 0;
    transform:translateY(-130%);transition:transform .28s ease;z-index:55;
  }
  .nav.open{transform:none}
  .nav>a,.nav-phone{padding:14px 22px;border-bottom:1px solid var(--line)}
  .nav-cta{margin:12px 22px;text-align:center;padding:13px}
  .nav-toggle{display:flex}
  .pb-stats{grid-template-columns:1fr 1fr;gap:16px}
  .hero{min-height:92vh}
  .hero-grid{padding:96px 22px 40px}
  .hero-bg img{object-position:60% center}
  .section-head{margin-bottom:32px}
  .services-section,.work-section,.request-section,.reviews-section,.faq-section,.visit-section{padding:60px 0}
  .request-main{padding:22px 18px}
  .form-grid{grid-template-columns:1fr}
  .service-picker{grid-template-columns:1fr}
  .service-picker-2{grid-template-columns:1fr}
  .rev-score .rs-stars{font-size:1.1rem}
  .rs-big{font-size:2.8rem}
  .footer-inner{grid-template-columns:1fr}
  .footer-base{flex-direction:column;gap:8px}
  .mobile-bar{display:flex}
  body{padding-bottom:74px}
  .rq-step .rs-label{display:none}
  .rq-step{min-width:0;flex:0 0 auto}
}
@media(max-width:420px){
  .pb-stats{grid-template-columns:1fr}
  .work-mosaic{grid-template-columns:1fr;grid-auto-rows:230px}
  .work-card,.work-card.work-wide,.work-card.work-tall{grid-column:span 1;grid-row:span 1}
  .hp-chip{font-size:12.5px;padding:7px 12px}
}

/* The footer logo stands alone rather than beside nav items, so it can be bigger. */
.footer-brand .logo-mark{height:46px}
@media(max-width:560px){.logo-mark{height:30px}.footer-brand .logo-mark{height:38px}}

/* The logo carries the name; the descriptor beside it only cost header width and
   wrapped five nav elements onto two lines. It stays in the footer. */
.site-header .logo-text{display:none}

/* Measured 40x32 at 390px -- under the 44x44 tap floor, on the one control that opens
   the whole menu. Padding rather than a bigger icon, so nothing shifts visually. */
.nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* ---- mobile pass 2026-08-06: tap targets to 44px, text floor to 12px ---- */
@media (max-width: 900px) {
  /* Standalone controls. display:flex/inline-flex + min-height, so the hit area grows
     without moving anything visually. */
  .ribbon-item { min-height: 44px; display: inline-flex; align-items: center; }
  #tabAuto, #tabHome, .shade-tab { min-height: 44px; }
  .footer-nav a,
  .footer-contact a { min-height: 44px; display: flex; align-items: center; }
  .site-header .logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* The Find Us list. These three -- directions, phone, email -- are the highest-intent
     taps on the whole page, and all three were 19-43px. My first selector (.area-contact)
     matched nothing; the real container is ul.visit-list. Measured, not assumed. */
  .visit-list li a { min-height: 44px; display: inline-flex; align-items: center; }
  .review-foot a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 0; }

  /* Text floor. These are read, not decoration -- shade names and service labels are
     exactly what someone squints at when choosing. */
  .svc-badge { font-size: 12px; }
  .chip-sub  { font-size: 12px; }
  .wc-tag    { font-size: 12px; }
  .logo-tag  { font-size: 12px; }
  /* .svc-grid was left at repeat(2,1fr) by the 980px query all the way down to 360px.
     1fr is minmax(auto,1fr), and auto floors at MIN-CONTENT -- so the tracks refused to
     shrink and three cards hung 31px past the viewport, side-scrolling the page.
     minmax(0,1fr) lets them actually shrink. Measured at 360px: 376 > 360. */
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  /* Two columns of body copy under 560px is unreadable regardless of overflow. */
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The logo must SCALE, never stretch: object-fit holds the ratio if the box is ever
   constrained, and flex:0 0 auto stops the header squeezing it in the first place. */
.logo-mark{object-fit:contain}
.site-header .logo,.footer-brand .logo{flex:0 0 auto}

/* One of these is the CALL link. 44px everywhere, not just under 560px -- it was
   anchored inside the small-phone query by mistake and measured 175x25 at 768. */
.svc-card-link{min-height:44px;display:inline-flex;align-items:center}

/* His own tagline, off the brand files he supplied. It sits in the FOOTER, not the hero:
   the hero eyebrow carries "Klamath Falls - auto - home - business", which is doing real
   search work, and personality should not evict keywords from the one line above the fold. */
.logo-slogan{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);margin-bottom:2px}

/* ================================================================
   FLUID SCALE — the LAYOUT fills the screen; the TYPE stays put
   ================================================================
   Steve, 2026-08-07, twice. First: "on a 2k screen it looks off to the right."
   Then, after a stepped-breakpoint pass: "still doesn't fill out completely.
   we got to have something built so it can scale perfectly." And then the
   correction that decided the shape of this fix:

     "the thing is tho text probably doesnt need to be the element that scales
      because then itll just be gigantic letters"

   He is right, and it rules out the obvious implementation. Scaling a fluid
   root font-size (the standard fluid-type trick) would have taken the hero
   headline from 72px to 90px and the body from 16px to 20px on his cousin's
   monitor -- that is a page that looks ZOOMED, not a page that fills. Bigger
   letters are not more content.

   What actually fills a wide screen is LAYOUT: a wider shell, bigger media,
   and more generous gutters and gaps, with the reading size held constant.
   So this pass moves the shell and the spacing continuously with the viewport
   and does not touch a single font-size. Every headline keeps the exact clamp
   ceiling it has today.

   ⛔ THE FLOOR IS EXACT: every fluid term below resolves to its existing value
   at 1440px and stops there, so laptop, iPad and phone are unchanged. */

:root{
  /* One ramp, 0 -> 1 across 1440..2560, reused by everything below so the whole
     page grows on a single continuous curve instead of popping at breakpoints. */

  /* Shell: 1180 at <=1440, growing to 1900 at 2560 (~75% of the screen, up from
     46%). The max() arm keeps ultrawide filling -- without it the shell would
     freeze at 1900 and a 3440 monitor drifts back to the same sparse ribbon,
     just further out. At <=1440 the vw arm is smaller than 1180 so it never
     wins, which is what keeps the floor exact. */
  /* ONE inset for header, hero and sections alike. Sized so the content edge stays
     modest on a big screen instead of ballooning: ~180px at 2560 (was 347px, and 704px
     before any of this). Purely additive off the 1440 floor, so <=1440 is EXACT and the
     curve is continuous -- no jump at any width.
       1440 -> 1180   |   1920 -> ~1650   |   2560 -> 2280 (90% of screen)   |   cap 2900
     ⛔ Do NOT give the hero its own wider inset. That was tried and it pulled the headline
     to 171px while the logo above it and the sections below sat at 348px -- three different
     left edges on one screen, which reads as broken alignment. A full-bleed photo behind a
     shared content edge is the correct shape; a second edge is not. */
  --maxw: clamp(1180px, calc(1180px + 1100 * ((100vw - 1440px) / 1120)), 2900px);

  /* ⭐ ADDITIVE, never absolute. Every spacing rule below is written as
     "the value it already had  +  --grow", and --grow is 0px at and below
     1440px. That is what makes the floor EXACT: at 1440 and under, every
     padding and gap computes to the identical value it had before this file
     was touched, asymmetric ones included.

     The first draft of this block did it the obvious way -- one --pad token
     applied as `padding:var(--pad)` -- and silently broke five things at
     EVERY width including mobile: .svc-card lost its 26/24/24 asymmetry and
     shrank to 22, .work-mosaic's gap went 16 -> 18, .shade-grid's 26 -> 18,
     .visit-inner's 40 -> 27. A shared token overwrites whatever each element
     already had; a delta cannot. Caught by diffing computed values against a
     pre-change baseline rather than by looking at the page.
     (Steve 2026-08-07: a build that varies is a build with defects nobody sees.) */
  --grow: clamp(0px, calc((100vw - 1440px) / 1120 * 16), 16px);
}

/* Gutters: 22px as before, opening to ~48px at 2560 so content never touches
   the glass on a wide screen. */
.container,.hero-grid{
  padding-left:calc(22px + var(--grow) * 1.6);
  padding-right:calc(22px + var(--grow) * 1.6);
}

/* The grids that carry the page. Column COUNTS are deliberately unchanged --
   six service cards read as 3x2 at every size. Re-flowing them per width would
   make the rendered composition differ from the designed one, which is the
   variance Steve ruled out. They get wider, with proportionally more air. */
.svc-grid,.review-grid{ gap:calc(18px + var(--grow)) }
.work-mosaic{ gap:calc(16px + var(--grow)) }
.shade-grid,.request-grid{ gap:calc(26px + var(--grow)) }
.visit-inner{ gap:calc(40px + var(--grow)) }

/* Card interiors breathe with the card, keeping their original asymmetry. */
.svc-card{ padding:calc(26px + var(--grow)) calc(24px + var(--grow)) calc(24px + var(--grow)) }
.review-card{ padding:calc(26px + var(--grow)) calc(24px + var(--grow)) }

/* The photo mosaic is the section that genuinely benefits from width -- its rows
   are a fixed 218px, so on a wide screen the tiles go long and letterboxed.
   Growing the row height with the shell keeps the tiles in proportion. */
@media (min-width:1500px){
  .work-mosaic{ grid-auto-rows:clamp(218px, calc(218px + 90 * ((100vw - 1500px) / 1060)), 308px) }
}

/* The hero is min-height:88vh -- on a 1440px-tall monitor that is a 1267px wall,
   and the source photo is only 1600px wide so it upscales 1.6x at 2560 and goes
   soft exactly where it is largest. Cap the floor; content still sets the real
   height. Untouched below 1500px. */
@media (min-width:1500px){ .hero{ min-height:min(88vh,880px) } }

/* Measure control -- the one place a cap is RIGHT. These four ran uncapped and
   inherited the full container width; .film-note was already ~168 characters per
   line at 1180px, roughly double the readable maximum, and a 1900px shell would
   have pushed it past 250. Capping the reading column in ch is exactly what lets
   everything AROUND it keep growing safely. Inert on mobile. */
.section-lead{ max-width:62ch }
.shade-fine{ max-width:80ch }
.film-note,.review-foot{ max-width:78ch; margin-left:auto; margin-right:auto }

/* The "Not sure what you need?" card was `grid-column:span 2` inside a 3-column
   grid, so it always left the third column empty. At the old 1180px shell that
   hole was 385px and read as deliberate negative space; at a 1946px shell it is
   724px and reads as a broken layout. The hole was ALWAYS there -- widening the
   shell only made it obvious.

   Spanning the full row fixes it with ONE rule that behaves identically at every
   width. ⛔ Deliberately not a width-conditional span: making the composition
   differ between screen sizes is what produces builds that vary and defects
   nobody sees (Steve 2026-08-07 -- "then one build would vary a lot and can have
   silent defects or doesnt have the same impact as it was originally intended").
   The narrow-screen override below 980px is untouched. */
.svc-cta-card{ grid-column:1/-1 }

/* The hero's left gap (Steve 2026-08-07: "my cousin is using a 2k monitor and it still
   has a gap on the left of the hero") is fixed by the shared --maxw above, NOT by giving
   the hero its own inset. The photo is full-bleed; the copy sits on the same content edge
   as the logo above it and the sections below it. One edge, every screen. */