/* ==========================================================================
   Vision Window Tinting — visionwindowtinting.net

   Dark, always. Navy, but never a flat navy: four soft light sources bleed
   into each other over a navy gradient so the background has depth.
   Restrained type, rounded corners, gold used only for CTAs and accents.

   SHARED FILE. Every page in this site loads it. If you remove or rename a
   class here, open every page before you call it done — that mistake broke
   all five service pages on 2026-07-27.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --navy:#103056; --deep:#071a31; --blue:#00aff5; --gold:#ea9c0b; --off:#f7f7f7;
  --muted:rgba(247,247,247,.68);
  --faint:rgba(247,247,247,.58);
  --line:rgba(247,247,247,.14);
  --r:18px;
  --wrap:1200px;
  --gutter:clamp(1.25rem,4vw,2.75rem);
  --section-y:clamp(3.5rem,7vw,6rem);
  --display:"Quicksand",system-ui,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--deep);scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;color:var(--off);
  font-family:var(--body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(1100px 780px at 8% -8%,  rgba(234,156,11,.20), rgba(234,156,11,0) 60%),
    radial-gradient(1000px 900px at 96% 4%,  rgba(0,175,245,.20),  rgba(0,175,245,0) 62%),
    radial-gradient(900px 800px at 2% 62%,   rgba(0,175,245,.10),  rgba(0,175,245,0) 60%),
    radial-gradient(1000px 800px at 88% 88%, rgba(234,156,11,.10), rgba(234,156,11,0) 62%),
    linear-gradient(180deg,#0e2a4d 0%,#103056 26%,#0c2440 58%,#081c33 82%,#061525 100%);
  background-attachment:fixed,fixed,fixed,fixed,scroll;
}

img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.04}
h2{font-size:clamp(1.7rem,2.8vw,2.4rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.02em}
h4{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-family:var(--body)}

p{margin:0 0 1.1em;color:var(--muted)}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.lede{font-size:clamp(1.05rem,1.25vw,1.19rem);line-height:1.62;color:rgba(247,247,247,.82);max-width:46ch}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:#20160a;padding:.75rem 1.25rem;font-weight:600;border-radius:999px}
.skip-link:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* The header must outrank main, or the Services dropdown renders behind the
   page content. Equal z-index here is what broke it on 2026-07-28. */
main,.site-footer{position:relative;z-index:1}
.site-header{position:sticky;top:0;z-index:200}

/* --------------------------------------------------------------------------
   3. SHARED PIECES
   -------------------------------------------------------------------------- */
.pill,.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--body);font-size:.7rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(247,247,247,.9);
  margin-bottom:1.1rem;
}
.pill::before,.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border-radius:999px;padding:.95rem 1.75rem;text-decoration:none;
  font-family:var(--body);font-size:.85rem;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn-primary{background:var(--gold);color:#20160a}
.btn-primary:hover{background:#ffb32a;transform:translateY(-2px)}
.btn-ghost,.btn-quiet{border-color:rgba(247,247,247,.28);color:var(--off)}
.btn-ghost:hover,.btn-quiet:hover{border-color:var(--off);background:rgba(255,255,255,.06)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

main p a{
  color:var(--off);text-decoration:none;
  background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/100% 1px;
  padding-bottom:1px;transition:color .3s var(--ease),background-size .3s var(--ease);
}
main p a:hover{color:var(--gold);background-size:100% 2px}

.arrow-link{display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-decoration:none;margin-top:1.25rem}
.arrow-link span{transition:transform .35s var(--ease)}
.arrow-link:hover span{transform:translateX(7px)}

.hairline{height:1px;width:100%;background:linear-gradient(90deg,rgba(234,156,11,.45),rgba(234,156,11,0));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);margin-block:2rem}
.hairline.is-drawn{transform:scaleX(1)}

.shot-tag{position:absolute;left:1.1rem;bottom:1.1rem;background:rgba(6,21,37,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(247,247,247,.16);border-radius:999px;padding:.5rem 1rem;font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(247,247,247,.92)}

.section{padding-block:var(--section-y);position:relative}
.section--alt,.section--sunk{background:rgba(4,14,26,.35);border-block:1px solid var(--line)}
.section-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head h2{max-width:20ch}

/* --------------------------------------------------------------------------
   4. PRELOADER — house icon, gold arc. Joe likes it; it stays.
   -------------------------------------------------------------------------- */
#loader{position:fixed;inset:0;z-index:9999;background:#061525;display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
#loader.is-done{opacity:0;visibility:hidden}
.loader-stage{position:relative;display:grid;place-items:center;width:190px;height:190px}
.loader-icon-wrap{display:contents}
.loader-ring{position:absolute;inset:0;border:1px solid rgba(234,156,11,.16);border-top-color:var(--gold);border-radius:50%;animation:spin 1.15s linear infinite}
.loader-icon{width:72px;height:auto;animation:breathe 1.8s var(--ease) infinite}
.loader-line{position:absolute;bottom:-34px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:draw 1.5s var(--ease) forwards}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.07);opacity:1}}
@keyframes draw{to{transform:scaleX(1)}}

/* --------------------------------------------------------------------------
   5. HEADER + DROPDOWN NAV
   -------------------------------------------------------------------------- */
.site-header{padding-block:1.5rem;transition:background .4s var(--ease)}
.site-header.is-stuck{background:rgba(6,18,31,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding-block:.85rem;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(.75rem,2vw,2rem);position:relative}
/* The logo and the toggle must never shrink: without this the header row
   squashed the wordmark to a sliver on a phone and clipped the hamburger. */
.site-header .logo,.site-header .nav-toggle{flex:none}
.site-header .btn{white-space:nowrap;flex:none}
.site-header .head-right{min-width:0}

/* The logo is NEVER on a plate, box or panel. Transparent, always. */
.logo,.logo-plate,.brand{display:inline-flex;align-items:center;text-decoration:none}
.logo img,.logo-plate img,.brand img{height:46px;width:auto}


/* ---- THE MENU: three bars, one compact panel, every screen size ---- */
.nav-primary{display:none}
.nav-primary.is-open{
  display:flex;
  position:absolute;top:calc(100% + .7rem);right:var(--gutter);left:auto;
  width:min(320px,calc(100vw - 2*var(--gutter)));
  flex-direction:column;align-items:stretch;gap:0;padding:.6rem;
  background:rgba(8,24,42,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:80;
  max-height:calc(100vh - 8rem);overflow-y:auto;
}
.nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;list-style:none;margin:0;padding:0}
.nav-links > li + li{border-top:1px solid var(--line)}
.nav-links a{display:block;width:100%;text-align:left;padding:.75rem .7rem;border-radius:9px;font-size:.92rem;text-decoration:none;color:rgba(247,247,247,.84);transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(255,255,255,.07);color:var(--off)}
.navbtn{display:block;width:100%;text-align:left;padding:.75rem .7rem;background:none;border:0;
  font-family:var(--body);color:var(--faint);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
.navbtn svg{display:none}
.menu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
  background:none;border:0;box-shadow:none;padding:0 0 .4rem;min-width:0;list-style:none;margin:0}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .7rem;border-radius:9px;font-size:.92rem;color:rgba(247,247,247,.84);
  text-decoration:none;transition:background .2s,color .2s}
.menu a:hover{background:rgba(255,255,255,.07);color:var(--off)}
.menu a small{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.menu hr{border:0;border-top:1px solid var(--line);margin:.3rem .7rem}
.nav-toggle{display:block}

.head-right{display:flex;align-items:center;gap:1.5rem}
.head-right{display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem);margin-left:clamp(1.5rem,3vw,2.5rem)}
.head-phone{font-family:var(--display);font-weight:700;color:var(--off);text-decoration:none;
  font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.02em;white-space:nowrap}
.head-phone:hover{color:var(--gold)}

.nav-toggle{width:46px;height:46px;background:none;border:1px solid var(--line);border-radius:12px;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:13px;right:13px;height:1.5px;background:var(--off);transition:transform .35s var(--ease),opacity .2s}
.nav-toggle::before{top:17px}
.nav-toggle span{top:22px}
.nav-toggle::after{top:27px}
.nav-toggle[aria-expanded="true"]::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span{opacity:0}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(-5px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   6. HERO — homepage (two column) and service pages (.page-hero)
   -------------------------------------------------------------------------- */
.hero{padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-copy{max-width:40rem}
.hero-copy h1{margin:1.5rem 0 1.3rem}
.hero-figure{position:relative}
/* Photographs support the page, they don't take it over. Heights are
   capped so nothing ever fills the viewport. */
.hero-figure{max-width:300px;margin-left:auto}
.hero-figure img{width:100%;height:auto;aspect-ratio:4/5;max-height:340px;object-fit:cover;object-position:center 22%;border-radius:var(--r)}

/* service pages */
.page-hero{padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem);position:relative}
.page-hero .hero-media{display:none}          /* legacy full-bleed slot, retired */
.page-hero .hero-glare{display:none}
.hero-content{max-width:44rem}
.hero-content h1{margin-bottom:1.3rem}
.hero-content .lede{max-width:46ch}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.75rem;border-top:1px solid var(--line)}
.fact span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:.45rem}
.fact b{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--off);letter-spacing:-.01em}

/* --------------------------------------------------------------------------
   7. CREED — Joe's precision line
   -------------------------------------------------------------------------- */
.creed{padding-block:clamp(2.5rem,5vw,4.5rem)}
.creed .wrap{max-width:940px}
.creed p{font-family:var(--display);font-weight:600;color:var(--off);font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.35;letter-spacing:-.025em}
.creed .quiet{color:rgba(247,247,247,.55)}

/* --------------------------------------------------------------------------
   8. BEFORE / AFTER PAIR
   -------------------------------------------------------------------------- */
.pair{padding-block:clamp(1.5rem,3vw,2.5rem)}
/* scoped to .pair-grid, not .pair — vision-home-performance uses the grid
   without the .pair wrapper and its images escaped the cap. */
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.75rem);max-width:860px;margin-inline:auto}
.pair figure{position:relative}
.pair-grid img{width:100%;height:auto;aspect-ratio:4/3;max-height:240px;object-fit:cover;border-radius:var(--r)}

/* --------------------------------------------------------------------------
   9. SERVICE LIST
   -------------------------------------------------------------------------- */
.services .wrap{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.services-head{position:sticky;top:6rem}
.svc{text-decoration:none;border-top:1px solid var(--line);padding:1.4rem .75rem;margin-inline:-.75rem;border-radius:10px;display:grid;grid-template-columns:2.5rem 1fr auto;gap:1.25rem;align-items:center;transition:background .35s var(--ease)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc:hover{background:rgba(255,255,255,.035)}
.svc > *{transition:transform .35s var(--ease)}
.svc:hover > *{transform:translateX(6px)}
.svc-n{font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--gold)}
.svc h3{margin:0 0 .25rem}
.svc p{margin:0;font-size:.93rem;line-height:1.55}
.svc-go{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--off);font-size:.85rem;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.svc:hover .svc-go{background:var(--gold);color:#20160a;border-color:var(--gold)}

/* --------------------------------------------------------------------------
   10. ESTIMATOR — five panes, running total
   -------------------------------------------------------------------------- */
.est-grid{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.panel{border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.25rem,2.5vw,2rem);background:rgba(6,20,36,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.est-labels{display:grid;grid-template-columns:2rem minmax(0,1fr) minmax(0,1fr) minmax(5.5rem,auto);gap:.75rem;font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem}
.est-labels span:last-child{text-align:right}
.est-row{display:grid;grid-template-columns:2rem minmax(0,1fr) minmax(0,1fr) minmax(5.5rem,auto);gap:.75rem;align-items:center;padding-block:.6rem;border-top:1px solid var(--line)}
.est-row:first-of-type{border-top:0}
.est-row .n{font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--gold)}
.est-row input{min-width:0;width:100%;padding:.6rem .7rem;background:rgba(255,255,255,.07);border:1px solid rgba(247,247,247,.34);border-radius:9px;color:var(--off);font-family:var(--body);font-size:1rem}
.est-row input:focus{border-color:var(--gold);outline:none}
.est-row .sub{text-align:right;font-family:var(--display);font-weight:600;color:rgba(247,247,247,.9);font-size:.98rem}
.est-row .sub.pane{color:var(--gold);font-size:.8rem}
.est-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.est-total span{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.est-total b{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.04em;color:var(--gold);line-height:1}
.est-note{font-size:.82rem;color:var(--faint);line-height:1.6;margin-top:.9rem}

/* --------------------------------------------------------------------------
   11. SERVICE PAGE BODY + CROSS-LINKS
   -------------------------------------------------------------------------- */
/* .wrap and .content-block sit on the SAME element on service pages, so
   .content-block must not set its own max-width or the column auto-centres. */
.content-block{max-width:var(--wrap)}
.content-block > *{max-width:64ch}
.content-block h2{font-size:clamp(1.6rem,2.6vw,2.3rem);margin:clamp(2.5rem,5vw,3.75rem) 0 1.2rem;max-width:22ch}
.content-block h2:first-child{margin-top:0}
.content-block h2::before{content:"";display:block;width:42px;height:1px;background:var(--gold);opacity:.85;margin-bottom:1.4rem}
.content-block p{font-size:1.06rem}

.crosslink-grid{border-top:1px solid var(--line)}
.crosslink-card{display:grid;grid-template-columns:minmax(0,24rem) 1fr auto;gap:clamp(1rem,3vw,2.5rem);align-items:baseline;padding-block:clamp(1.2rem,2.2vw,1.9rem);border-bottom:1px solid var(--line);transition:border-color .4s var(--ease)}
.crosslink-card:hover{border-bottom-color:rgba(234,156,11,.45)}
.crosslink-card span{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:-.028em;color:var(--off)}
.crosslink-card a{grid-column:3;justify-self:end;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.crosslink-card a:hover{color:#ffb32a}

/* --------------------------------------------------------------------------
   12. REVIEWS
   -------------------------------------------------------------------------- */
.voices{display:grid;gap:0}
.voice{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2rem);padding-block:clamp(1.75rem,3.5vw,2.75rem);border-top:1px solid var(--line)}
.voice:last-child{border-bottom:1px solid var(--line)}
.voice-stars{grid-column:1/3;color:var(--gold);font-size:.8rem;letter-spacing:.18em}
.voice blockquote{grid-column:3/11;margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.9vw,1.6rem);letter-spacing:-.025em;line-height:1.32;color:rgba(247,247,247,.92)}
.voice cite{grid-column:11/13;font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-align:right}

/* --------------------------------------------------------------------------
   13. LOCATION / MAP
   -------------------------------------------------------------------------- */
.place{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.place-copy{grid-column:1/6}
.place-copy h2{margin-bottom:1.5rem}
.location-details{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.9;color:var(--off);margin-bottom:1.4rem}
.map-panel{grid-column:7/13;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:rgba(3,10,20,.5)}
.map-panel iframe{width:100%;height:100%;border:0;display:block;filter:invert(.92) hue-rotate(185deg) saturate(.7) brightness(.95) contrast(1.05)}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{padding-block:clamp(3rem,5vw,4.5rem) 2rem;border-top:1px solid var(--line);background:rgba(3,8,16,.5)}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem)}
.footer-tagline{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--gold);margin:1.3rem 0 .9rem}
.footer-brand p{font-size:.92rem;max-width:36ch}
.site-footer h4{color:var(--off);margin:0 0 1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.7rem;font-size:.92rem;color:var(--muted);line-height:1.6}
.site-footer li a{text-decoration:none;color:var(--muted);transition:color .3s var(--ease)}
.site-footer li a:hover{color:var(--gold)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--faint)}

/* --------------------------------------------------------------------------
   15. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .place-copy{grid-column:1/7}
  .map-panel{grid-column:7/13}
}

@media(max-width:1080px){
  .hero-figure{max-width:260px}
}

@media(max-width:900px){
  /* .nav-links was display:none here, left over from when this was a desktop
     bar. Nothing re-enabled it, so the hamburger opened an empty panel and no
     link on the site was reachable on a phone. Fixed 2026-07-28. */
  .head-phone{font-size:1.15rem}
  .nav-toggle{display:block}

  .hero-grid,.est-grid,.pair-grid,.place,.services .wrap{grid-template-columns:1fr}
  .services-head{position:static}
  .place-copy,.map-panel{grid-column:1/-1}
  .facts{grid-template-columns:1fr;gap:1.25rem}
  .hero-figure{max-width:100%;margin-left:0}
  .hero-figure img{aspect-ratio:16/10;max-height:280px}
  .pair-grid img{max-height:220px}
  .lifestyle img{max-height:220px}
  .est-row,.est-labels{grid-template-columns:1.4rem 1fr 1fr minmax(4.5rem,auto);gap:.5rem}
  .crosslink-card{grid-template-columns:1fr;gap:.5rem}
  .crosslink-card a{grid-column:1;justify-self:start}
  .voice-stars,.voice blockquote,.voice cite{grid-column:1/-1;text-align:left}
  .voice cite{margin-top:.9rem}
}

@media(max-width:620px){ .head-phone{display:none} }

@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  /* Full-width buttons are for in-page calls to action, never the header's —
     stretching that one wrapped "Get a Quote" onto two lines. */
  main .btn,.site-footer .btn{width:100%}
  .logo img,.logo-plate img,.brand img{height:36px}
}

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

/* --------------------------------------------------------------------------
   17. QUOTE PAGE
   -------------------------------------------------------------------------- */
.quote-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.quote-side h2{margin-bottom:1.5rem}
.steps-list{counter-reset:s;list-style:none;margin:0;padding:0}
.steps-list li{counter-increment:s;position:relative;padding-left:3rem;padding-block:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.98rem;line-height:1.6}
.steps-list li:last-child{border-bottom:1px solid var(--line)}
.steps-list li::before{content:"0" counter(s);position:absolute;left:0;top:1rem;font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--gold)}
.steps-list b{color:var(--off);font-weight:600}
.quote-alt{margin-top:1.75rem;font-size:.95rem}
/* The Jobber embed renders dark text, so it needs a light panel to sit on. */
.quote-form-wrap{background:var(--off);color:#14181f;border-radius:var(--r);padding:clamp(1.25rem,2.5vw,2rem);min-height:320px}
.quote-form-wrap a{color:#103056}
@media(max-width:900px){ .quote-grid{grid-template-columns:1fr} }
.form-fallback{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(16,48,86,.14);font-size:.85rem;color:#4a5b70}
.form-fallback a{color:#103056;font-weight:600}

/* --------------------------------------------------------------------------
   18. LIFESTYLE BAND — wide photo, not a hero
   -------------------------------------------------------------------------- */
.lifestyle{padding-block:clamp(1rem,2vw,2rem)}
.lifestyle figure{max-width:820px;margin-inline:auto;padding-inline:var(--gutter)}
.lifestyle img{width:100%;height:auto;aspect-ratio:21/9;max-height:300px;object-fit:cover;object-position:center 40%;border-radius:var(--r)}
@media(max-width:900px){ .lifestyle img{aspect-ratio:16/10} }

/* --------------------------------------------------------------------------
   19. FLOATING QUOTE BUTTON — always reachable, thumb zone on mobile
   -------------------------------------------------------------------------- */
.quote-float{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:300;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gold);color:#20160a;text-decoration:none;
  font-family:var(--body);font-size:.9rem;font-weight:600;
  padding:1rem 1.6rem;border-radius:999px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.quote-float:hover{background:#ffb32a;transform:translateY(-3px)}
@media(max-width:560px){ .quote-float{left:1rem;right:1rem;justify-content:center} }
@media print{ .quote-float{display:none} }

/* --------------------------------------------------------------------------
   20. GALLERY — small tiles, deliberately not big
   -------------------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(.6rem,1.2vw,1rem)}
.tile{position:relative;overflow:hidden;border-radius:12px;background:rgba(0,0,0,.25)}
.tile img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  filter:saturate(.9);transition:transform .6s var(--ease),filter .4s var(--ease)}
.tile:hover img{transform:scale(1.05);filter:saturate(1)}
@media(max-width:560px){ .tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} }

/* --------------------------------------------------------------------------
   HOME HERO — statement-led. Added 2026-07-28.
   Scoped entirely to .home-hero / .hh-*. The service pages use .hero-grid,
   .hero-copy and .hero-figure and are untouched by anything below.

   Three groups, not four lines: [statement + service line] · [lede] · [CTA].
   The service line is a heading at reading size, never a tracked-out label
   above one — that reads as clutter the moment it is scaled up.
   -------------------------------------------------------------------------- */
.home-hero{padding-top:clamp(1rem,3vw,2.25rem);padding-bottom:clamp(3rem,6vw,5rem)}

.hh-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(150px,19vw,250px);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:stretch;
}

.hh-copy{max-width:48rem;align-self:center}

/* 1. The statement. Largest, display face, carries the voice. */
.hh-statement{
  font-family:var(--display);font-weight:700;color:var(--off);
  font-size:clamp(2.5rem,6.6vw,5rem);
  line-height:.97;letter-spacing:-.042em;
  max-width:17ch;
  margin:0;
  text-wrap:balance;
}

/* 2. The service line — still the H1 for the local pack. Set as a real
      heading in the display face, close under the statement so the two
      read as one headline block. */
.hh-h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.15vw,1.8rem);
  line-height:1.24;letter-spacing:-.022em;
  color:rgba(247,247,247,.9);
  max-width:24ch;
  margin:clamp(.8rem,1.4vw,1.1rem) 0 0;
  text-wrap:balance;
}

/* 3. The lede. Separated from the headline block by space, not a rule. */
.hh-copy .lede{
  font-size:clamp(1.2rem,1.5vw,1.4rem);
  line-height:1.62;
  max-width:54ch;
  margin:clamp(1.6rem,2.8vw,2.1rem) 0 0;
}

/* 4. The action. */
.hh-copy .btn-row{margin-top:clamp(1.8rem,3vw,2.3rem)}

/* Hero entrance. Keyframes rather than a JS-toggled class on purpose: an
   animation runs on its own, so a stale or failed main.js can never leave the
   hero stuck at opacity 0. Delays are tuned to the preloader's 1s minimum, so
   the statement rises as the loader fades rather than behind it.
   fill-mode both holds the finished state. */
.hh-l{display:block;overflow:hidden;padding-bottom:.04em}
.hh-l > span{display:block;animation:heroLineUp 1.05s var(--ease) 1.02s both}
.hh-l:nth-child(2) > span{animation-delay:1.14s}
@keyframes heroLineUp{from{transform:translateY(108%)}to{transform:none}}

.hh-h1{animation:heroUp .9s var(--ease) 1.4s both}
.hh-copy .lede{animation:heroUp .9s var(--ease) 1.54s both}
.hh-copy .btn-row{animation:heroUp .9s var(--ease) 1.68s both}
@keyframes heroUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

/* Tall slice, cut to the photograph's real proportions instead of fighting them. */
.hh-figure{position:relative;margin:0}
.hh-figure img{
  display:block;width:100%;height:100%;
  min-height:clamp(300px,38vw,470px);
  object-fit:cover;object-position:center 18%;
  border-radius:var(--r);
}

@media(max-width:900px){
  .hh-grid{grid-template-columns:1fr;gap:1.75rem}
  .hh-statement{max-width:19ch}
  .hh-figure img{min-height:0;aspect-ratio:16/11;max-height:250px}
}

/* --------------------------------------------------------------------------
   STAKES — homepage only, sits between the hero and the before/after pair.
   Added 2026-07-28. One typographic moment: the setup recedes, the line
   that asks for the decision is at full strength.
   -------------------------------------------------------------------------- */
.stakes{padding-block:clamp(2.5rem,5vw,4rem)}
.stakes-line{
  font-family:var(--display);font-weight:600;color:var(--off);
  font-size:clamp(1.45rem,3vw,2.35rem);
  line-height:1.3;letter-spacing:-.03em;
  max-width:32ch;margin:0;
  text-wrap:balance;
}
/* The parent only supplies the .is-visible hook; the two lines animate
   themselves, so the generic fade-up is switched off here. */
.stakes-line.reveal{opacity:1;transform:none;transition:none}

/* Setup: emerges out of heat haze. Blur is the point — it is the villain
   of this page rendered as motion, not decoration. */
.stakes-setup{
  display:block;color:rgba(247,247,247,.62);
  opacity:0;filter:blur(8px);transform:translateY(10px);
  transition:opacity 1s var(--ease),filter 1.2s var(--ease),transform 1s var(--ease);
}
.stakes-line.is-visible .stakes-setup{opacity:1;filter:blur(0);transform:none}

/* The ask: wipes in sharp, once the haze has cleared. */
.stakes-ask{
  display:block;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease) .5s;
}
.stakes-line.is-visible .stakes-ask{clip-path:inset(0 0 0 0)}

/* Heat strips. The cartoon rising-wave lines, gold, staggered, slow enough
   to register as ambient rather than as an effect. */
.heat{display:block;width:clamp(32px,4.6vw,44px);height:auto;overflow:visible;margin-bottom:.6rem}
.heat path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;opacity:0}
.stakes-line.is-visible .heat path{animation:heatrise 3.4s var(--ease) infinite}
.stakes-line.is-visible .heat path:nth-child(2){animation-delay:.55s}
.stakes-line.is-visible .heat path:nth-child(3){animation-delay:1.1s}
@keyframes heatrise{
  0%  {opacity:0;   transform:translateY(7px)  scaleY(.9)}
  20% {opacity:.8}
  68% {opacity:.45}
  100%{opacity:0;   transform:translateY(-15px) scaleY(1.08)}
}

/* --------------------------------------------------------------------------
   AUTHORITY — homepage only. Restructured 2026-07-28.
   The 50/50 photo-beside-paragraph row is gone: the photograph and the words
   now INTERLOCK. The image bleeds off the left edge and the copy column
   overlaps its right edge, its padding carrying the overlap so the picture
   shows through underneath and the text still starts clear of it. The frame's
   top corner lands on the photograph on purpose.
   -------------------------------------------------------------------------- */
.authority{padding-block:clamp(3rem,6vw,5.25rem)}
.auth-grid{
  display:grid;grid-template-columns:repeat(12,1fr);align-items:center;
  width:100%;
  max-width:min(calc(100vw - var(--gutter)), calc(50vw + (var(--wrap) / 2) - var(--gutter)));
  margin-right:auto;
}
.auth-figure{grid-column:1 / 7;grid-row:1;margin:0}
.auth-figure img{
  display:block;width:100%;
  height:clamp(380px,46vw,580px);
  object-fit:cover;object-position:center 16%;
  border-radius:0 var(--r) var(--r) 0;
}
.auth-copy{
  grid-column:6 / 13;grid-row:1;position:relative;z-index:1;
  padding:clamp(1.35rem,2.4vw,2rem) 0 clamp(1.35rem,2.4vw,2rem) clamp(2.5rem,5vw,4.5rem);
}
.auth-copy::before,.auth-copy::after{
  content:"";position:absolute;pointer-events:none;
  width:clamp(26px,3.8vw,52px);height:clamp(26px,3.8vw,52px);
  border-style:solid;border-color:rgba(234,156,11,.5);
  opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.auth-copy::before{top:0;left:clamp(1rem,2.2vw,2rem);border-width:1px 0 0 1px;transform:translate(-7px,-7px)}
.auth-copy::after{bottom:0;right:0;border-width:0 1px 1px 0;transform:translate(7px,7px)}
.auth-copy.is-visible::before,.auth-copy.is-visible::after{opacity:1;transform:none}

.auth-copy p{
  font-size:clamp(1.06rem,1.25vw,1.16rem);
  line-height:1.68;color:rgba(247,247,247,.76);
  max-width:46ch;margin:0 0 1.15rem;
}
.auth-copy .auth-lead{
  font-family:var(--display);font-weight:600;color:var(--off);
  font-size:clamp(1.28rem,1.9vw,1.68rem);
  line-height:1.33;letter-spacing:-.026em;
  max-width:30ch;margin-bottom:1.3rem;text-wrap:balance;
}
.auth-copy .auth-ask{color:var(--off);font-weight:500;margin-bottom:0}
.auth-sign{
  margin-top:clamp(1.4rem,2.4vw,1.9rem);padding-top:1rem;
  border-top:1px solid rgba(234,156,11,.28);
  font-size:.92rem;color:var(--faint);max-width:46ch;
}
.auth-sign b{font-family:var(--display);font-weight:600;color:var(--off);margin-right:.55rem}

@media(max-width:900px){
  .auth-grid{grid-template-columns:1fr;gap:1.5rem;max-width:none;padding-inline:var(--gutter)}
  .auth-figure,.auth-copy{grid-column:1;grid-row:auto}
  .auth-figure img{height:clamp(250px,58vw,330px);border-radius:var(--r)}
  .auth-copy{padding:1.25rem 0 1.25rem 1.25rem}
  .auth-copy::before{left:0}
  /* Measure caps stay: 'none' here produced 90+ character lines on any
     window between 700 and 900px, which is a very common laptop width. */
  .auth-copy p,.auth-sign{max-width:54ch}
}

/* --------------------------------------------------------------------------
   PURPLE TINT — homepage only. Restructured 2026-07-28.
   Not another two-column row. A full-bleed photographic band edge to edge,
   then the notice set centred in a narrow measure beneath it — the only
   centred passage on the page, so the change of subject is unmistakable and
   the scroll gets a different density here than anywhere else.
   Purple is allowed on this site only here, because purple is the subject.
   -------------------------------------------------------------------------- */
.purple{position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,4rem)}
.purple::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1000px 560px at 50% 22%, rgba(150,88,220,.26), rgba(150,88,220,0) 66%);
}
.purple-band{
  position:relative;margin:0 0 clamp(2rem,4vw,3.25rem);
  height:clamp(210px,30vw,400px);
}
.purple-band img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 44%;
}
/* Left aligned, in a real measure. Centring three paragraphs of body copy
   was the defect: ragged on both edges, no entry point, and every line the
   same size. The full-bleed band above already supplies the structural
   break, so the notice does not need to be centred to feel different.
   The number is the focal point, because calling it is the whole ask. */
.purple-notice{position:relative;max-width:56ch}
.purple-notice h2{max-width:24ch;margin-bottom:1.2rem}
.purple-notice p{
  font-size:clamp(1.05rem,1.22vw,1.14rem);
  line-height:1.66;color:rgba(247,247,247,.78);
  max-width:50ch;margin:0 0 1rem;
}
.purple-notice .purple-guarantee{color:var(--off)}

.purple-hotline{
  display:block;margin:clamp(1.5rem,3vw,2.1rem) 0 .3rem;
  font-family:var(--display);font-weight:700;color:var(--off);
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:-.035em;line-height:1.05;text-decoration:none;
  transition:color .3s var(--ease);
}
.purple-hotline:hover{color:var(--gold)}
/* Label and the Avery lockup share one line, not stacked. */
.purple-hotline-row{
  display:flex;align-items:center;
  gap:clamp(1.1rem,2.5vw,2rem);
  flex-wrap:wrap;
}
/* Needs the parent in the selector: `.purple-notice p` (0,1,1) otherwise
   outranks a bare `.purple-hotline-label` (0,1,0) and its 1.05rem bottom
   margin knocks this off the flex row's centre line. */
.purple-notice .purple-hotline-label{
  font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0;
}
.purple-avery{
  height:32px;width:auto;opacity:.85;flex:none;
  padding-left:clamp(1.1rem,2.5vw,2rem);
  border-left:1px solid var(--line);
}

@media(max-width:900px){
  .purple-band{height:clamp(180px,44vw,260px)}
  .purple-notice{max-width:none}
  .purple-notice p{max-width:54ch}
}

/* --------------------------------------------------------------------------
   MOTION SAFETY — every authored entrance resolves to its end state.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .stakes-setup{opacity:1;filter:none;transform:none;transition:none}
  .stakes-ask{clip-path:none;transition:none}
  .stakes-line.is-visible .heat path{animation:none;opacity:.5}
  .hh-l > span,.hh-h1,.hh-copy .lede,.hh-copy .btn-row{animation:none;opacity:1;transform:none}
  .auth-copy::before,.auth-copy::after{opacity:1;transform:none;transition:none}
  .plan-step.is-visible .ic-quote circle{animation:none;opacity:.85}
  .plan-step.is-visible .ic-sample .sw{animation:none;opacity:1;transform:none}
  .plan-step.is-visible .ic-chill line{animation:none;opacity:1}
}

/* --------------------------------------------------------------------------
   THE PLAN — three steps. Added 2026-07-28, compacted the same day.
   Horizontal and tight: icon and title share one row. The subtitles reveal
   themselves on a loop, one at a time, so it works on touch where there is no
   hover at all; on a real pointer, hovering the row stops the loop and hands
   control over to whichever step you are on. Space for the subtitle is
   reserved either way, so nothing on the page moves.
   Not three cards — each step is opened by a gold rule, the device the
   services list and crosslinks already use.
   -------------------------------------------------------------------------- */
.plan{padding-block:clamp(2.25rem,4vw,3.25rem)}
.plan .section-head{margin-bottom:clamp(1.35rem,2.4vw,1.9rem)}
.plan-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,2.25rem);
}
.plan-step{padding-top:1rem;border-top:1px solid rgba(234,156,11,.32)}

.plan-head{display:flex;align-items:center;gap:.8rem}
.plan-icon{flex:none;display:block}
.plan-icon svg{display:block;width:34px;height:34px;overflow:visible}
.plan-icon svg *{
  fill:none;stroke:var(--gold);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s var(--ease);
}
.plan-titles{display:block;min-width:0}
.plan-n{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.66rem;letter-spacing:.16em;color:var(--gold);margin-bottom:.1rem;
}
.plan-step h3{
  margin:0;line-height:1.2;color:var(--off);
  font-size:clamp(.98rem,1.2vw,1.1rem);
}
.plan-sub{
  margin:.65rem 0 0;font-size:.94rem;line-height:1.5;
  color:rgba(247,247,247,.74);
}

/* All three subtitles stay readable. The cycling version hid each one for
   5.3 of every 8 seconds, so only one step could be read at a time and a
   visitor could not choose to read step 2. Removed 2026-07-28. */
@media (hover:hover) and (pointer:fine){
  .plan-step:hover .plan-icon svg *{stroke:#ffb32a}
}

/* 01 — the three dots type, because step one is you telling us the problem. */
.ic-quote circle{fill:var(--gold);stroke:none;opacity:.25}
.plan-step.is-visible .ic-quote circle{animation:dot 1.5s var(--ease) infinite}
.plan-step.is-visible .ic-quote .d2{animation-delay:.2s}
.plan-step.is-visible .ic-quote .d3{animation-delay:.4s}
@keyframes dot{0%,100%{opacity:.22}40%{opacity:1}}

/* 02 — the sample appears on the pane, holds, then clears. */
.ic-sample .sw{fill:rgba(234,156,11,.3);stroke:var(--gold);opacity:0;transform-origin:29px 14px}
.plan-step.is-visible .ic-sample .sw{animation:swatch 3.6s var(--ease) infinite}
@keyframes swatch{
  0%{opacity:0;transform:scale(.55)}
  18%{opacity:1;transform:scale(1)}
  70%{opacity:1;transform:scale(1)}
  88%,100%{opacity:0;transform:scale(1)}
}

/* 03 — the rays reach the glass and stop there. That is the whole product. */
.ic-chill .glass{stroke:rgba(234,156,11,.55)}
.plan-step.is-visible .ic-chill .r1,
.plan-step.is-visible .ic-chill .r2,
.plan-step.is-visible .ic-chill .r3{animation:blocked 2.6s var(--ease) infinite}
.plan-step.is-visible .ic-chill .r2{animation-delay:.18s}
.plan-step.is-visible .ic-chill .r3{animation-delay:.36s}
@keyframes blocked{0%{opacity:1}55%{opacity:.12}100%{opacity:1}}

/* Three across down to real phone widths, then stacks. */
@media(max-width:560px){
  .plan-steps{grid-template-columns:1fr;gap:0}
  .plan-step{padding-block:1rem 1.3rem;min-height:0}
}