/* ==========================================================
   Eversafe Roofing — shared styles
   Tokens lifted verbatim from the original assets/index-cd7yliew.css
   ========================================================== */
:root{
  --paper:38 44% 97%; --paper-2:36 34% 94%; --linen:34 28% 90%;
  --surface:0 0% 100%; --ink:210 30% 16%; --ink-soft:210 12% 36%;
  --brand:205 84% 22%; --brand-foreground:38 44% 97%;
  --brand-dark:206 85% 14%; --brand-light:205 40% 93%;
  --steel:210 10% 40%; --steel-soft:210 14% 72%; --steel-wash:210 24% 95%;
  --moss:96 18% 38%; --gold:38 74% 50%;
  --border:34 24% 87%; --muted-foreground:210 12% 40%;
  --radius:1rem;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background-color:hsl(var(--paper));color:hsl(var(--ink));
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv11"}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid hsl(var(--brand));outline-offset:3px}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.narrow{width:min(820px,92vw);margin-inline:auto}

.font-display{font-family:var(--display)}
.eyebrow{font-family:var(--display);font-size:1.125rem;line-height:1.75rem;font-style:italic;
  color:hsl(var(--steel));margin:0 0 .75rem}
.on-dark .eyebrow{color:hsl(var(--steel-soft))}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0}
h1{font-size:clamp(2.6rem,5.6vw,4.1rem);line-height:1.08}
h2{font-size:clamp(2.15rem,3.6vw,3.1rem);line-height:1.12}
h3{font-size:1.5rem;line-height:1.2}
h4{font-size:1.2rem;line-height:1.25}
p{margin:0 0 1.05rem}
.lede{font-size:1.125rem;line-height:1.8;color:hsl(var(--muted-foreground))}
.on-dark .lede,.on-dark p{color:hsl(var(--paper) / .82)}
.small{font-size:.92rem;line-height:1.7;color:hsl(var(--muted-foreground))}
.rule-fade{height:1px;background:linear-gradient(90deg,transparent,hsl(var(--steel) / .32),transparent);border:0;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:.95rem;text-decoration:none;
  padding:.85rem 1.6rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-brand{background:hsl(var(--brand));color:hsl(var(--brand-foreground));box-shadow:0 14px 36px -8px hsl(205 84% 22%/.55)}
.btn-brand:hover{background:hsl(var(--brand-dark))}
.btn-outline{border-color:hsl(var(--border));color:hsl(var(--ink));background:hsl(var(--surface))}
.btn-outline:hover{border-color:hsl(var(--brand));color:hsl(var(--brand))}
.on-dark .btn-outline{border-color:hsl(var(--paper) / .34);color:hsl(var(--paper));background:transparent}
.on-dark .btn-outline:hover{border-color:hsl(var(--paper));background:hsl(var(--paper) / .08)}

/* header */
.hdr{background:hsl(var(--surface));border-bottom:1px solid hsl(var(--border));position:sticky;top:0;z-index:50}
.hdr .wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:1.4rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand img{height:40px;width:auto}
.brand b{font-family:var(--display);font-weight:600;font-size:1.35rem;color:hsl(var(--brand))}
.nav{display:flex;flex-wrap:nowrap;gap:1.15rem;margin-left:auto}
.nav a{font-size:.86rem;font-weight:500;white-space:nowrap;text-decoration:none;color:hsl(var(--ink-soft));padding:.3rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:hsl(var(--brand));border-bottom-color:hsl(var(--gold))}
.hdr .btn{flex:none;padding:.7rem 1.25rem;font-size:.9rem}
.menu-btn{display:none;margin-left:auto;background:transparent;border:1px solid hsl(var(--border));
  color:hsl(var(--ink));border-radius:var(--radius);padding:.55rem 1rem;font-family:var(--body);font-size:.9rem;font-weight:500}

/* page hero */
.phero{background:hsl(var(--brand-dark));color:hsl(var(--paper));position:relative;overflow:hidden}
.phero-img{position:absolute;inset:0}
.phero-img img{width:100%;height:100%;object-fit:cover}
.phero-scrim{position:absolute;inset:0;background:
  linear-gradient(to right,hsl(var(--brand-dark)/.92) 0%,hsl(var(--brand-dark)/.62) 58%,hsl(var(--brand-dark)/.42) 100%),
  linear-gradient(to top,hsl(var(--brand-dark)/.88) 0%,hsl(var(--brand-dark)/.35) 55%,hsl(var(--brand-dark)/.2) 100%)}
.phero .wrap{position:relative;z-index:2;padding:clamp(4rem,8vw,6.5rem) 0}
.phero-copy{max-width:46rem}
.phero .lede{max-width:38rem}

/* sections */
.sec{padding:clamp(4rem,7.5vw,6.5rem) 0}
.sec-surface{background:hsl(var(--surface))}
.sec-paper2{background:hsl(var(--paper-2))}
.sec-wash{background:hsl(var(--steel-wash))}
.sec-brand{background:hsl(var(--brand));color:hsl(var(--paper))}
.sec-head{max-width:44rem;margin-bottom:2.75rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}

figure.plate{margin:0}
.plate img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:0 14px 44px -16px hsl(210 25% 30%/.26)}
.plate figcaption{font-family:var(--display);font-style:italic;font-size:1.02rem;color:hsl(var(--steel));padding-top:.9rem}
.on-dark .plate figcaption{color:hsl(var(--steel-soft))}

/* cards */
.card{background:hsl(var(--surface));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.9rem 1.75rem}
.cards{display:grid;gap:1.5rem}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}

/* timeline (insurance process) */
.steps{display:flex;flex-direction:column;gap:1.5rem;position:relative}
.step{background:hsl(var(--surface));border:1px solid hsl(var(--border));border-left:4px solid hsl(var(--brand));
  border-radius:var(--radius);padding:1.9rem 1.8rem}
.step-meta{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-bottom:.85rem}
.pill{background:hsl(var(--brand-light));color:hsl(var(--brand));border-radius:999px;
  padding:.3rem .85rem;font-size:.8rem;font-weight:600}
.pill-num{background:hsl(var(--brand));color:hsl(var(--paper));width:2rem;height:2rem;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;flex:none}
.when{font-size:.85rem;color:hsl(var(--steel));font-weight:500}
.step h3{margin-bottom:.6rem}
.step p{color:hsl(var(--muted-foreground));margin-bottom:0}
.line-note{background:hsl(var(--steel-wash));border-left:3px solid hsl(var(--brand));border-radius:calc(var(--radius) - 6px);
  padding:1.1rem 1.25rem;margin-top:1.25rem}
.line-note > strong:first-child{display:block;font-family:var(--display);font-style:italic;font-weight:600;
  font-size:1.05rem;color:hsl(var(--brand));margin-bottom:.5rem}
.line-note p{font-size:.95rem;margin-bottom:0}
.line-note p + p{margin-top:.7rem}
.line-note p strong{font-family:var(--body);font-style:normal;font-weight:600;
  color:hsl(var(--ink));display:inline;font-size:inherit}

/* state cards */
/* state cards — icon chip + serif state name + bold sans headline, matching the original */
.state-card{background:hsl(var(--surface));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:2rem 1.85rem}
.state-card .st-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.state-card .ico{width:3.5rem;height:3.5rem;border-radius:.85rem;background:hsl(var(--brand-light));
  display:flex;align-items:center;justify-content:center;flex:none}
.state-card .ico svg{width:1.6rem;height:1.6rem;stroke:hsl(var(--brand));fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* default state label (home markets, locations licensing) — unchanged */
.state-card .st{font-family:var(--display);font-size:1.35rem;color:hsl(var(--brand));display:block;margin-bottom:.6rem}
/* icon-card variant only */
.state-card .st-head .st{font-size:1.9rem;font-weight:500;color:hsl(var(--ink));
  line-height:1.1;margin-bottom:0;display:inline}
.state-card .st-head + h4{font-family:var(--body);font-weight:600;font-size:1.12rem;line-height:1.4;
  color:hsl(var(--ink));margin-bottom:.75rem;letter-spacing:-.005em}
.state-card .st-head ~ p{font-size:1rem;line-height:1.7}
.state-card p{font-size:1rem;line-height:1.7;color:hsl(var(--muted-foreground));margin-bottom:0}
/* variant used on the locations page, where the state name is a small gold label */
.market .st{font-family:var(--display);font-style:italic;font-size:1.15rem;color:hsl(var(--gold))}

/* notice */
.notice{background:hsl(var(--surface));border:1px solid hsl(var(--border));border-left:4px solid hsl(var(--brand));
  border-radius:var(--radius);padding:clamp(1.8rem,3vw,2.6rem)}
.notice h3{margin-bottom:.85rem;color:hsl(var(--brand))}
.notice p{color:hsl(var(--muted-foreground))}
.notice p:last-child{margin-bottom:0}
.notice strong{color:hsl(var(--ink));font-weight:600}

/* job listings */
.jobs{display:flex;flex-direction:column;gap:1.5rem}
.job{background:hsl(var(--surface));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:2rem 1.9rem}
.job-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.tag{background:hsl(var(--brand-light));color:hsl(var(--brand));border-radius:999px;padding:.3rem .85rem;font-size:.8rem;font-weight:600}
.job-meta{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.9rem;color:hsl(var(--steel));margin:.7rem 0 1rem}
.job-meta b{color:hsl(var(--brand));font-weight:600}
.job details{margin-top:1.2rem;border-top:1px solid hsl(var(--border));padding-top:1.1rem}
.job summary{cursor:pointer;color:hsl(var(--brand));font-weight:600;font-size:.95rem;list-style:none}
.job summary::-webkit-details-marker{display:none}
.job summary::after{content:" ↓";font-size:.85rem}
.job details[open] summary::after{content:" ↑"}
.job details h4{margin:1.3rem 0 .6rem;font-size:1.15rem}
.ck{list-style:none;padding:0;margin:0}
.ck li{position:relative;padding-left:1.6rem;margin-bottom:.55rem;font-size:.95rem;color:hsl(var(--muted-foreground));line-height:1.6}
.ck li::before{content:"✓";position:absolute;left:0;color:hsl(var(--brand));font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.25rem 0 0;list-style:none}
.chips li{background:hsl(var(--surface));border:1px solid hsl(var(--brand) / .15);border-radius:999px;
  padding:.45rem 1rem;font-size:.9rem;color:hsl(var(--ink))}
.chips li.hl{background:hsl(var(--brand-light));border-color:hsl(var(--brand) / .3);color:hsl(var(--brand));font-weight:600}

/* ---------- footer: symmetric, built on the three offices ---------- */
.ftr{background:hsl(var(--brand));color:hsl(var(--paper) / .8);
  padding:clamp(3rem,5vw,4.25rem) 0 2rem;font-size:.93rem;text-align:center}
.ftr a{color:hsl(var(--paper));text-decoration:none}
.ftr a:hover{color:hsl(var(--gold))}
.ftr hr.rule-fade{margin:clamp(1.75rem,3vw,2.5rem) 0;
  background:linear-gradient(90deg,transparent,hsl(var(--paper) / .22),transparent)}

.ftr-brand{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.ftr-brand img{height:38px;width:auto}
.ftr-brand b{font-family:var(--display);font-weight:600;font-size:1.5rem;color:hsl(var(--paper))}
.ftr-blurb{max-width:46ch;margin:0 auto;color:hsl(var(--paper) / .72);line-height:1.75}

.ftr-offices{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.office{padding:0 1.5rem;border-left:1px solid hsl(var(--paper) / .16)}
.office:first-child{border-left:0}
.office .st{display:block;font-family:var(--display);font-style:italic;
  font-size:1rem;color:hsl(var(--gold));margin-bottom:.25rem}
.office b{display:block;font-family:var(--display);font-weight:600;font-size:1.3rem;
  color:hsl(var(--paper));margin-bottom:.4rem}
.office span{display:block;color:hsl(var(--paper) / .70);font-size:.88rem;line-height:1.6}
.office a.tel{display:inline-block;margin-top:.5rem;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;position:relative}

.ftr-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.5rem 0;flex-direction:row}
.ftr-nav a{padding:0 1.1rem;position:relative;font-size:.95rem}
.ftr-nav a + a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:.95em;background:hsl(var(--paper) / .22)}

.ftr-base{border-top:1px solid hsl(var(--paper) / .16);margin-top:clamp(1.75rem,3vw,2.5rem);
  padding-top:1.6rem}
.disclaimer{font-size:.8rem;line-height:1.75;color:hsl(var(--paper) / .58);
  max-width:74ch;margin:0 auto 1.4rem}
.ftr-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.4rem 0;font-size:.84rem;color:hsl(var(--paper) / .6)}
.ftr-meta > *{padding:0 1.1rem;position:relative}
.ftr-meta > * + *::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:.95em;background:hsl(var(--paper) / .2)}
.crafted{color:hsl(var(--paper) / .6) !important;transition:color .25s ease}
.crafted:hover{color:hsl(var(--gold)) !important}
.crafted i{font-style:normal;font-family:var(--display);font-size:1.02em;letter-spacing:.01em}

@media(max-width:820px){
  .ftr-offices{grid-template-columns:1fr}
  .office{border-left:0;border-top:1px solid hsl(var(--paper) / .16);padding:1.4rem 0 0;margin-top:1.4rem}
  .office:first-child{border-top:0;padding-top:0;margin-top:0}
}

.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* between the hamburger breakpoint and a wide desktop, drop the header CTA
   so eight nav items never have to compete with it */
@media(max-width:1279px){.hdr .wrap > .btn{display:none}}
@media(max-width:1120px){
  .split,.cards-2,.cards-3,.ftr-grid{grid-template-columns:1fr}
  .nav,.hdr .btn{display:none}
  .menu-btn{display:block}
}
@media(max-width:560px){
  body{font-size:16px}
  .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}

/* ---------- mobile navigation ---------- */
.menu-btn{position:relative;z-index:60}
.mnav{display:none;position:fixed;inset:0;z-index:55;background:hsl(var(--brand-dark) / .97);
  padding:6rem 2rem 2rem;overflow-y:auto}
.mnav.open{display:block}
.mnav a{display:block;font-family:var(--display);font-size:1.9rem;color:hsl(var(--paper));
  text-decoration:none;padding:.7rem 0;border-bottom:1px solid hsl(var(--paper) / .15)}
.mnav a:hover,.mnav a[aria-current]{color:hsl(var(--gold))}
.mnav .tel{font-family:var(--body);font-size:1rem;font-weight:600;border:0;padding-top:1.6rem}
.mnav .tel span{display:block;font-size:.8rem;color:hsl(var(--paper) / .6);font-weight:400}
body.nav-open{overflow:hidden}
@media(min-width:1121px){.mnav{display:none !important}}

/* icon cards (denial options, what-we-can-do) */
.icard .st-head{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.9rem}
.icard .st-head h4{margin:0;padding-top:.35rem}
.icard .ico{width:3rem;height:3rem;border-radius:.8rem;background:hsl(var(--brand-light));
  display:flex;align-items:center;justify-content:center;flex:none}
.icard .ico svg{width:1.4rem;height:1.4rem;stroke:hsl(var(--brand));fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icard .small strong{color:hsl(var(--ink));font-weight:600}

/* icon cards on the dark brand section */
/* Any card sitting on a dark section: translucent panel, light type.
   Without this a .card keeps its white background while inheriting the
   section's cream text colour — white on white, invisible. */
.sec-brand .card,.sec-brand .icard,.sec-brand .state-card,.sec-brand .wty,
.cta .card,.cta .icard,.cta .state-card{
  background:hsl(var(--paper) / .06);border-color:hsl(var(--paper) / .18)}
.sec-brand .card h3,.sec-brand .card h4,.sec-brand .icard h3,.sec-brand .icard h4,
.sec-brand .state-card h3,.sec-brand .state-card h4,.sec-brand .wty h3,
.cta .card h3,.cta .card h4{color:hsl(var(--paper))}
.sec-brand .card p,.sec-brand .card .small,.sec-brand .icard p,.sec-brand .icard .small,
.sec-brand .state-card p,.sec-brand .wty p,.sec-brand .card li,
.cta .card p,.cta .card .small{color:hsl(var(--paper) / .82)}
.sec-brand .card strong,.sec-brand .icard strong{color:hsl(var(--paper))}
.sec-brand .icard .ico,.cta .icard .ico{background:hsl(var(--paper) / .12)}
.sec-brand .icard .ico svg,.cta .icard .ico svg{stroke:hsl(var(--paper))}
.sec-brand .card:hover,.sec-brand .icard:hover,.sec-brand .state-card:hover{
  background:hsl(var(--paper) / .10);box-shadow:none}

/* inline emphasis inside stage cards */
.stage p strong{color:hsl(var(--ink));font-weight:600}
.layer .why strong{color:hsl(var(--ink));font-weight:600}

/* ============================================================
   MOTION SYSTEM
   One orchestrated moment (the hero "clearing"), quiet elsewhere.
   Palette and typefaces unchanged.
   ============================================================ */

/* ---------- full-bleed hero ---------- */
.hero-xl{position:relative;min-height:clamp(560px,86svh,880px);display:flex;align-items:flex-end;
  background:hsl(var(--brand-dark));color:hsl(var(--paper));overflow:hidden;isolation:isolate}
.hero-xl .hero-media{position:absolute;inset:-4% 0 0;z-index:0}
/* --- original composite: storm atmosphere under a completed roof --- */
.hero-atmos{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-xl .hero-media{position:absolute;inset:0;z-index:1}
.hero-xl .hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 48%;
  opacity:.75;transform:scale(1);will-change:transform}
.hero-xl.lit .hero-media img{animation:slowZoom 22s ease-out forwards}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.09)}}

/* the veil that lifts */
.hero-veil{position:absolute;inset:0;z-index:1;background:hsl(var(--brand-dark));opacity:1}
.hero-xl.lit .hero-veil{animation:veilLift 1250ms cubic-bezier(.4,0,.2,1) forwards}
@keyframes veilLift{to{opacity:0}}

@keyframes bloom{0%{opacity:0}34%{opacity:1}100%{opacity:0}}

/* legibility scrim, above the bloom */
/* the original three overlays, in the original order */
.hero-xl .hero-scrim{position:absolute;inset:0;z-index:3;background:
  linear-gradient(to right,hsl(205 60% 12% / .92) 0%,hsl(205 55% 14% / .62) 50%,hsl(210 40% 20% / .25) 100%),
  linear-gradient(to top,hsl(205 60% 11% / .72) 0%,transparent 33%),
  radial-gradient(50ch 36ch at 88% 8%,hsl(206 55% 70% / .22),transparent 65%)}
.hero-xl .wrap{position:relative;z-index:4;padding:0 0 clamp(4.5rem,9vw,7rem);width:min(1180px,92vw)}
.hero-xl .hero-copy{max-width:min(56rem,94%)}
.hero-xl h1{font-size:clamp(2.9rem,7.2vw,6.2rem);line-height:1.015;letter-spacing:-.018em;
  margin:0 0 1.5rem;font-weight:600}
.hero-xl .lede{font-size:clamp(1.05rem,1.55vw,1.3rem);max-width:40rem;margin-bottom:2.25rem}

/* ---------- word reveal (the signature) ---------- */
.rw .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.rw .w > i{display:inline-block;font-style:inherit;transform:translateY(108%);opacity:0}
.hero-xl.lit .rw .w > i{animation:wordRise 900ms cubic-bezier(.16,.84,.34,1) forwards;
  animation-delay:calc(var(--i) * 65ms + 380ms)}
@keyframes wordRise{to{transform:translateY(0);opacity:1}}

/* ---------- cascade for the rest of the hero ---------- */
.cascade{opacity:0;transform:translateY(14px)}
.hero-xl.lit .cascade{animation:cascadeIn 760ms cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(var(--d,0) * 1ms)}
@keyframes cascadeIn{to{opacity:1;transform:none}}

/* ---------- scroll cue ---------- */
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--display);font-style:italic;font-size:.95rem;color:hsl(var(--paper) / .58);opacity:0}
.hero-xl.lit .scroll-cue{animation:cascadeIn 900ms ease forwards;animation-delay:1900ms}
.scroll-cue span{width:1px;height:2.1rem;background:linear-gradient(hsl(var(--paper)/.6),transparent);
  animation:cueDrift 2400ms ease-in-out infinite}
@keyframes cueDrift{0%,100%{transform:scaleY(.5);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- header condense ---------- */
.hdr{transition:min-height .3s ease,background .3s ease,box-shadow .3s ease}
.hdr.slim{box-shadow:0 6px 26px -14px hsl(210 25% 30%/.4)}
.hdr.slim .wrap{min-height:60px}
.hdr .wrap{transition:min-height .3s ease}

/* ---------- staggered section reveals ---------- */
.rv.stagger > *{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.rv.stagger.in > *{opacity:1;transform:none}
.rv.stagger.in > *:nth-child(1){transition-delay:0ms}
.rv.stagger.in > *:nth-child(2){transition-delay:90ms}
.rv.stagger.in > *:nth-child(3){transition-delay:180ms}
.rv.stagger.in > *:nth-child(4){transition-delay:270ms}
.rv.stagger.in > *:nth-child(5){transition-delay:360ms}
.rv.stagger.in > *:nth-child(6){transition-delay:450ms}

/* ---------- image wipe ---------- */
.plate img,.stage img{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.22,.75,.3,1)}
.rv.in .plate img,.plate.rv.in img,.stage.rv.in img,.rv.in .stage img{clip-path:inset(0 0 0 0)}

/* ---------- card lift ---------- */
.state-card,.card,.mkt,.sw,.wty,.job,.step{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.state-card:hover,.card:hover,.mkt:hover,.sw:hover{transform:translateY(-3px);
  box-shadow:0 18px 40px -22px hsl(210 25% 30%/.45)}

@media(max-width:760px){
  .hero-xl{min-height:clamp(520px,80svh,760px)}
  .hero-xl .hero-media img{object-position:58% 44%}
  .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-xl .hero-media img,.hero-xl.lit .hero-media img{transform:none;animation:none}
  .hero-veil{display:none}
  .rw .w > i{transform:none;opacity:1;animation:none}
  .cascade,.scroll-cue{opacity:1;transform:none;animation:none}
  .rv.stagger > *{opacity:1;transform:none;transition:none}
  .plate img,.stage img{clip-path:none;transition:none}
  .state-card:hover,.card:hover,.mkt:hover,.sw:hover{transform:none}
}

/* ---------- interior page heroes: same language, less drama ---------- */
.phero{min-height:62svh;display:flex;align-items:flex-end}
.phero .wrap{padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem)}
.phero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.04;letter-spacing:-.015em}
.phero .phero-img img{transform:scale(1.06);transition:transform 3s cubic-bezier(.16,.7,.28,1)}
.phero.lit .phero-img img{transform:scale(1)}
.phero .cascade{opacity:0;transform:translateY(14px)}
.phero.lit .cascade{animation:cascadeIn 720ms cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--d,0) * 1ms)}
@media(max-width:760px){.phero{min-height:54svh}}
@media(prefers-reduced-motion:reduce){
  .phero .phero-img img,.phero.lit .phero-img img{transform:none;transition:none}
  .phero .cascade{opacity:1;transform:none;animation:none}
}

/* ============================================================
   AMBIENT LAYERS — "roof and weather"
   Light sections carry the shingle course. Dark sections carry
   drifting sky. Both are near-invisible and autonomous, so they
   never compete with the hero.
   ============================================================ */

.sec,.cta,.spec,.ftr{position:relative;isolation:isolate}
.sec-brand,.cta,.ftr{overflow:hidden}
.sec > *,.cta > *,.spec > *,.ftr > *{position:relative;z-index:1}

/* --- the roof: faint shingle courses on light ground --- */
.sec:not(.sec-brand):not(.cta-band)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27168%27%20height%3D%27104%27%20viewBox%3D%270%200%20168%20104%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523000%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M0%2023h168M0%2049h168M0%2075h168M0%20101h168%27%2F%3E%3Cpath%20d%3D%27M40%200v23M82%200v23M124%200v23M166%200v23%27%2F%3E%3Cpath%20d%3D%27M19%2026v23M61%2026v23M103%2026v23M145%2026v23%27%2F%3E%3Cpath%20d%3D%27M40%2052v23M82%2052v23M124%2052v23M166%2052v23%27%2F%3E%3Cpath%20d%3D%27M19%2078v23M61%2078v23M103%2078v23M145%2078v23%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:168px 104px;
  opacity:.045;
  animation:courseDrift 120s linear infinite;
}
@keyframes courseDrift{
  from{background-position:0 0}
  to{background-position:168px 104px}
}

/* --- the weather: slow cloud movement on dark ground --- */
.sec-brand:not(.cta-band)::before,.ftr::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(38% 46% at 22% 30%,hsl(205 60% 62% / .16),transparent 68%),
    radial-gradient(44% 40% at 78% 66%,hsl(38 60% 70% / .09),transparent 66%),
    radial-gradient(30% 34% at 58% 12%,hsl(200 50% 70% / .10),transparent 70%);
  animation:skyDrift 74s ease-in-out infinite alternate;
}
@keyframes skyDrift{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,1.5%,0) scale(1.08)}
}

/* --- read progress: a hairline of gold --- */
.progress{position:fixed;top:0;left:0;height:2px;z-index:80;width:0;
  background:linear-gradient(90deg,hsl(var(--brand)),hsl(var(--gold)));
  transition:width .12s linear;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .sec:not(.sec-brand):not(.cta-band)::before{animation:none}
  .sec-brand:not(.cta-band)::before,.ftr::before{animation:none}
  .progress{transition:none}
}

/* ============================================================
   ROOF PLAN — the measurement report, drawing itself.
   Sits on dark ground beneath content. Draws once when its
   section comes into view, then holds.
   ============================================================ */
.planwrap{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.2s ease}
.planwrap.on{opacity:1}
.roofplan{width:100%;height:100%;display:block}

.roofplan .pl,.roofplan .pd{fill:none;stroke:hsl(var(--gold));vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.roofplan .pl{stroke-width:1.5;opacity:.30}
.roofplan .pd{stroke-width:1;opacity:.17}
.roofplan .pv{fill:hsl(var(--gold));opacity:0;r:3}

.planwrap.on .pl,.planwrap.on .pd{
  animation:planDraw 1.5s cubic-bezier(.4,0,.25,1) forwards;
  animation-delay:calc(var(--n) * 55ms + 200ms)}
.planwrap.on .pv{
  animation:planPip .5s ease forwards;
  animation-delay:calc(var(--n) * 22ms + 900ms)}
@keyframes planDraw{to{stroke-dashoffset:0}}
@keyframes planPip{to{opacity:.5}}

/* keep it well behind the copy on dark sections */
.sec-brand .planwrap,.cta .planwrap{opacity:0}
.sec-brand .planwrap.on,.cta .planwrap.on{opacity:.85}
.phero .planwrap.on{opacity:.55}

@media(max-width:760px){ .planwrap{display:none} }
@media(prefers-reduced-motion:reduce){
  .planwrap{transition:none}
  .roofplan .pl,.roofplan .pd{stroke-dashoffset:0;animation:none}
  .roofplan .pv{opacity:.5;animation:none}
}

/* ============================================================
   INTERACTIVE HIGHLIGHTS
   Pointer-tracked gradient glow on content boxes, plus animated
   underlines. Hover-capable pointers only.
   ============================================================ */
@media (hover:hover) and (pointer:fine){

  /* --- gradient glow that follows the cursor --- */
  .glow{position:relative}
  .glow::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      hsl(var(--gold)) 0%, hsl(var(--brand)) 42%, transparent 72%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:2}
  .glow:hover::before{opacity:1}
  .glow:hover{box-shadow:0 14px 44px -26px hsl(var(--brand) / .55),
                         0 0 0 1px hsl(var(--gold) / .06)}

  /* on navy the trace reads better gold-forward */
  .sec-brand .glow::before,.cta .glow::before{
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      hsl(var(--gold)) 0%, hsl(38 74% 62%) 38%, transparent 70%)}
  .sec-brand .glow:hover,.cta .glow:hover{box-shadow:0 14px 44px -26px hsl(0 0% 0% / .5)}

  /* --- nav underline: wipes in from the left, out to the right --- */
  .nav a{position:relative;border-bottom:1px solid transparent}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:linear-gradient(90deg,hsl(var(--brand)),hsl(var(--gold)));
    transform:scaleX(0);transform-origin:right center;
    transition:transform .42s cubic-bezier(.4,0,.2,1)}
  .nav a:hover,.nav a:focus-visible{color:hsl(var(--brand));border-bottom-color:transparent}
  .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
  .nav a[aria-current]::after{transform:scaleX(1);transform-origin:left center}

  /* --- footer links and inline tel links get the same wipe --- */
  .ftr-nav a,.mkt a.tel,.loc a.tel{position:relative;display:inline-block}
  .ftr-nav a::after,.mkt a.tel::after,.loc a.tel::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
    background:hsl(var(--gold));transform:scaleX(0);transform-origin:right center;
    transition:transform .38s cubic-bezier(.4,0,.2,1)}
  .ftr-nav a:hover::after,.mkt a.tel:hover::after,.loc a.tel:hover::after{
    transform:scaleX(1);transform-origin:left center}

  /* --- buttons: a light sweep across on hover --- */
  .btn{position:relative;overflow:hidden}
  .btn > *{position:relative;z-index:1}
  .btn::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 32%,hsl(var(--paper) / .22) 48%,transparent 64%);
    transform:translateX(-120%);transition:transform .62s cubic-bezier(.3,0,.2,1)}
  .btn:hover::after{transform:translateX(120%)}
}

@media(prefers-reduced-motion:reduce){
  .glow::before{transition:none}
  .nav a::after,.ftr-nav a::after,.mkt a.tel::after,.loc a.tel::after{transition:none}
  .btn::after{display:none}
}

/* ============================================================
   TYPOGRAPHIC POLISH
   No content changes — only how the type sets.
   ============================================================ */

/* --- line breaking ---
   balance keeps headings from dropping a single orphaned word onto
   the last line; pretty does the same for the tail of a paragraph. */
h1,h2,h3,h4,.lede,.eyebrow,.sw h4,.state-card h4,.step h3,.job h3{
  text-wrap:balance}
p,.small,dd,li,figcaption{text-wrap:pretty}

/* --- numerals ---
   Cormorant carries oldstyle figures, which sit on the baseline with
   ascenders and descenders — right for numbers inside running serif
   text. Data that stacks in columns gets lining tabular figures so
   the digits align vertically. */
h1,h2,h3,h4,.eyebrow,.pull,.st,blockquote,.sw h4{
  font-variant-numeric:oldstyle-nums proportional-nums}
.wty dd,.wty dt,.mkt a.tel,.loc a.tel,.util-phones,.job-meta,.size b,.size span,
.storm-row .date,.cta-tel,.step-meta .when,.cc-opts dt,.layer-n,.pill-num{
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* --- quote marks hang into the margin instead of indenting the text --- */
.pull{text-indent:-.42em}
@supports (hanging-punctuation: first){ .pull{hanging-punctuation:first;text-indent:0} }

/* --- selection --- */
::selection{background:hsl(var(--gold) / .28);color:hsl(var(--ink))}
.on-dark ::selection,.sec-brand ::selection,.cta ::selection,.hero ::selection{
  background:hsl(var(--gold) / .38);color:hsl(var(--paper))}

/* --- focus: a ring that reads on both grounds --- */
:focus-visible{outline:2px solid hsl(var(--gold));outline-offset:3px;
  box-shadow:0 0 0 5px hsl(var(--brand) / .18)}
.on-dark :focus-visible,.sec-brand :focus-visible,.cta :focus-visible{
  box-shadow:0 0 0 5px hsl(var(--paper) / .16)}

/* --- scrollbar, kept in palette --- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:hsl(var(--paper-2))}
::-webkit-scrollbar-thumb{background:hsl(var(--steel-soft));border-radius:99px;
    border:3px solid hsl(var(--paper-2))}
::-webkit-scrollbar-thumb:hover{background:hsl(var(--brand))}
html{scrollbar-color:hsl(var(--steel-soft)) hsl(var(--paper-2));scrollbar-width:thin}

/* --- optical detail --- */
.lede{text-wrap:pretty;max-width:62ch}
h1{font-kerning:normal;font-optical-sizing:auto}
.plate figcaption,.dmg figcaption{font-feature-settings:"liga" 1,"dlig" 1}
img{-webkit-user-drag:none}

/* ============================================================
   CTA BAND — "the sweep"
   Shingle courses with a band of low sun travelling across them.
   Deliberately unlike the hero (photographic) and unlike the
   ambient dark sections (drifting cloud + static blueprint):
   this one is directional and rhythmic, so it catches the eye
   in peripheral vision without ever being loud.
   ============================================================ */
.cta-band{position:relative;overflow:hidden;isolation:isolate}
.cta-band > *{position:relative;z-index:2}

/* courses */
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27128%27%20height%3D%2780%27%20viewBox%3D%270%200%20128%2080%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%25231d2935%27%20stroke-width%3D%272.2%27%3E%3Cpath%20d%3D%27M0%2018h128M0%2038h128M0%2058h128M0%2078h128%27%2F%3E%3Cpath%20d%3D%27M32%200v18M64%200v18M96%200v18M128%200v18%27%2F%3E%3Cpath%20d%3D%27M16%2020v18M48%2020v18M80%2020v18M112%2020v18%27%2F%3E%3Cpath%20d%3D%27M32%2040v18M64%2040v18M96%2040v18M128%2040v18%27%2F%3E%3Cpath%20d%3D%27M16%2060v18M48%2060v18M80%2060v18M112%2060v18%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:128px 80px;opacity:.055;
  animation:ctaCourse 90s linear infinite}
.sec-brand.cta-band::before{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27128%27%20height%3D%2780%27%20viewBox%3D%270%200%20128%2080%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523fbf8f4%27%20stroke-width%3D%272.2%27%3E%3Cpath%20d%3D%27M0%2018h128M0%2038h128M0%2058h128M0%2078h128%27%2F%3E%3Cpath%20d%3D%27M32%200v18M64%200v18M96%200v18M128%200v18%27%2F%3E%3Cpath%20d%3D%27M16%2020v18M48%2020v18M80%2020v18M112%2020v18%27%2F%3E%3Cpath%20d%3D%27M32%2040v18M64%2040v18M96%2040v18M128%2040v18%27%2F%3E%3Cpath%20d%3D%27M16%2060v18M48%2060v18M80%2060v18M112%2060v18%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");opacity:.10}
@keyframes ctaCourse{from{background-position:0 0} to{background-position:0 80px}}

/* the streak: a wide soft glow with a sharp bright core riding inside it.
   Two elements so each can carry its own blur — one gradient can't. */
.cta-band .sweep{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cta-band .sweep::before,.cta-band .sweep::after{
  content:"";position:absolute;top:-55%;bottom:-55%;left:0}

.cta-band .sweep::before{width:64%;
  background:linear-gradient(100deg,transparent 0%,
    hsl(208 92% 50% / .28) 26%, hsl(202 96% 60% / .52) 42%,
    hsl(196 100% 72% / .62) 50%, hsl(202 96% 60% / .52) 58%,
    hsl(208 92% 50% / .28) 74%, transparent 100%);
  filter:blur(30px);
  transform:translateX(-116%) rotate(9deg);
  animation:sweepGlow 8.5s linear infinite}

.cta-band .sweep::after{width:13%;
  background:linear-gradient(100deg,transparent 0%,
    hsl(198 100% 76% / .55) 38%, hsl(190 100% 90% / .92) 50%,
    hsl(198 100% 76% / .55) 62%, transparent 100%);
  filter:blur(7px);
  transform:translateX(-180%) rotate(9deg);
  animation:sweepCore 8.5s linear infinite}

@keyframes sweepGlow{to{transform:translateX(172%) rotate(9deg)}}
@keyframes sweepCore{to{transform:translateX(846%) rotate(9deg)}}

/* on cream the same values go neon — deeper blue, pulled back */
.cta-band:not(.sec-brand) .sweep::before{
  background:linear-gradient(100deg,transparent 0%,
    hsl(210 88% 44% / .20) 26%, hsl(206 90% 48% / .34) 42%,
    hsl(202 92% 54% / .40) 50%, hsl(206 90% 48% / .34) 58%,
    hsl(210 88% 44% / .20) 74%, transparent 100%)}
.cta-band:not(.sec-brand) .sweep::after{
  background:linear-gradient(100deg,transparent 0%,
    hsl(204 92% 52% / .34) 38%, hsl(199 96% 62% / .58) 50%,
    hsl(204 92% 52% / .34) 62%, transparent 100%)}

@media(max-width:760px){ .cta-band .sweep::before{width:92%} .cta-band .sweep::after{width:22%} }
@media(prefers-reduced-motion:reduce){
  .cta-band::before{animation:none}
  .cta-band .sweep::before{animation:none;transform:translateX(30%) rotate(9deg)}
  .cta-band .sweep::after{animation:none;transform:translateX(330%) rotate(9deg)}}

/* ---------- hail size scale: true-scale stones ---------- */
.hail-scale{position:relative;overflow:hidden;isolation:isolate}
@media(max-width:900px){.stones{--base:min(190px,38vw);gap:1.75rem 1rem}}
@media(max-width:560px){.stones{--base:min(140px,34vw);gap:1.5rem .75rem}
  .stone{padding:.25rem}
  .stone-lab b{font-size:1.15rem}
  .stone-lab em{font-size:.7rem}}
.hail-scale .hs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.10;z-index:0}
.hail-scale .hs-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,hsl(var(--steel-wash) / .85),
    hsl(var(--steel-wash) / .70) 45%,hsl(var(--steel-wash)))}
.hail-scale > .wrap{position:relative;z-index:2}

.stones{--base:260px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:2.25rem 1.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
.stone{background:none;border:0;padding:.5rem;cursor:pointer;border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;gap:.85rem;font:inherit}
.stone-well{display:flex;align-items:flex-end;height:var(--base)}
.stone-dot{display:block;border-radius:50%;background:hsl(var(--brand) / .20);
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
  transform:scale(.4);opacity:0}
.stones.shown .stone-dot{animation:stoneIn .7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--d) * 90ms)}
@keyframes stoneIn{to{transform:scale(1);opacity:1}}
.stone:hover .stone-dot{background:hsl(var(--brand) / .35)}
.stone[aria-pressed="true"] .stone-dot{background:hsl(var(--brand));
  box-shadow:0 14px 36px -8px hsl(205 84% 22% / .55)}
.stone-lab{text-align:center;display:block}
.stone-lab b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;
  color:hsl(var(--steel-soft));transition:color .3s ease;
  font-variant-numeric:lining-nums tabular-nums}
.stone-lab em{display:block;font-style:normal;font-size:.78rem;color:hsl(var(--steel-soft));
  transition:color .3s ease}
.stone[aria-pressed="true"] .stone-lab b{color:hsl(var(--brand))}
.stone[aria-pressed="true"] .stone-lab em{color:hsl(var(--steel))}
.stone:focus-visible{outline:2px solid hsl(var(--gold));outline-offset:2px}

.hs-readout{max-width:38rem;margin:clamp(2.5rem,4vw,3.5rem) auto 0;text-align:center;min-height:6.5rem}
.hs-note b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.25;color:hsl(var(--brand));font-variant-numeric:lining-nums}
.hs-note span{display:block;margin-top:.75rem;line-height:1.75;color:hsl(var(--muted-foreground))}

@media(prefers-reduced-motion:reduce){
  .stone-dot,.stones.shown .stone-dot{transform:none;opacity:1;animation:none}}

/* ---------- hail report map ---------- */
.hm-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .9rem;
  margin:clamp(1.75rem,3.5vw,2.5rem) 0}
.hm-group{display:flex;flex-wrap:wrap;gap:.3rem;background:hsl(var(--paper-2));
  border:1px solid hsl(var(--border));border-radius:999px;padding:.28rem}
.hm-btn{font:inherit;font-size:.84rem;font-weight:500;border:0;cursor:pointer;
  padding:.5rem .95rem;border-radius:999px;background:transparent;color:hsl(var(--ink-soft));
  transition:background .25s ease,color .25s ease;min-height:40px}
.hm-btn:hover{color:hsl(var(--brand))}
.hm-btn.is-on{background:hsl(var(--brand));color:hsl(var(--brand-foreground))}
.hm-btn:focus-visible{outline:2px solid hsl(var(--gold));outline-offset:2px}

.hm-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.hm-stage{position:relative}
.hm-svg{width:100%;height:auto;display:block}
.hm-plate{fill:hsl(var(--steel-wash));stroke:hsl(var(--border))}
.hm-rings circle{fill:none;stroke:hsl(var(--steel) / .28);stroke-width:1;stroke-dasharray:4 6}
.hm-rings text{fill:hsl(var(--steel) / .75);font-family:var(--body);font-size:12px;
  font-variant-numeric:lining-nums}
.hm-card{fill:hsl(var(--steel) / .55);font-family:var(--display);font-size:17px;font-style:italic}
.hm-home circle{fill:hsl(var(--brand))}
.hm-home .hm-halo{fill:none;stroke:hsl(var(--brand));stroke-opacity:.4;stroke-width:1.5}
.hm-hometxt{fill:hsl(var(--brand));font-family:var(--display);font-size:19px;font-weight:600}
.hm-dots circle{opacity:0;stroke:#fff;stroke-width:1.25;cursor:pointer;
  animation:hmPop .45s cubic-bezier(.2,1.2,.4,1) forwards}
@keyframes hmPop{from{opacity:0;r:0}to{opacity:.9}}
.hm-dots circle.is-hi{stroke:hsl(var(--ink));stroke-width:2.5;opacity:1}
.hm-status{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-family:var(--display);font-style:italic;font-size:1.05rem;
  color:hsl(var(--steel));margin:0;pointer-events:none}
.hm-status[hidden]{display:none}

.hm-side{display:flex;flex-direction:column;min-width:0}
.hm-tally{display:flex;align-items:baseline;gap:.5rem;padding-bottom:.75rem;
  border-bottom:1px solid hsl(var(--border))}
.hm-tally b{font-family:var(--display);font-size:2.6rem;line-height:1;color:hsl(var(--brand));
  font-variant-numeric:lining-nums}
.hm-tally span{font-size:.9rem;color:hsl(var(--steel))}
.hm-list{list-style:none;margin:0;padding:0;max-height:430px;overflow-y:auto}
.hm-list li{display:grid;grid-template-columns:3.4rem 1fr auto;gap:.75rem;align-items:center;
  padding:.6rem .25rem;border-bottom:1px solid hsl(var(--border));cursor:pointer;
  transition:background .2s ease}
.hm-list li:hover,.hm-list li:focus-visible{background:hsl(var(--steel-wash))}
.hm-list .sz{font-family:var(--display);font-size:1.15rem;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;text-align:right}
.hm-list .pl{font-size:.9rem;color:hsl(var(--ink));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-list .dt{font-size:.78rem;color:hsl(var(--steel));font-variant-numeric:lining-nums tabular-nums}
.hm-src{font-size:.75rem;color:hsl(var(--steel) / .85);margin:.9rem 0 0;line-height:1.6}

.hm-legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.5rem 1.3rem;margin-top:1.5rem;font-size:.8rem;color:hsl(var(--steel))}
.hm-legend span{display:inline-flex;align-items:center;gap:.4rem}
.hm-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}

@media(max-width:820px){
  .hm-panel{grid-template-columns:1fr}
  .hm-list{max-height:280px}
  .hm-btn{font-size:.8rem;padding:.5rem .8rem}
}
@media(prefers-reduced-motion:reduce){
  .hm-dots circle{animation:none;opacity:.82}}

/* ============================================================
   MOBILE PASS
   ============================================================ */
@media(max-width:760px){
  /* touch targets */
  .btn{min-height:48px;padding:.9rem 1.4rem}
  .nav a,.ftr-nav a,.hm-btn,.stone,.job summary{min-height:44px}
  .job summary{display:flex;align-items:center}

  /* type doesn't need desktop scale on a phone */
  .hero-xl h1{font-size:clamp(2.3rem,9.5vw,3.4rem);line-height:1.06}
  .hero-xl .lede{font-size:1.02rem}
  .phero h1{font-size:clamp(2rem,8vw,2.9rem)}
  h2{font-size:clamp(1.85rem,6.4vw,2.4rem)}
  .pull{font-size:1.25rem}

  /* dense grids collapse */
  .swatches{grid-template-columns:repeat(2,1fr);gap:1rem}
  .sw h4{font-size:1.15rem}
  .sw p{font-size:.8rem}
  .dmg{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .sizes{grid-template-columns:1fr 1fr}
  .layers .layer{padding:1.4rem 1.15rem}
  .wty,.step,.job,.card,.state-card,.market{padding:1.5rem 1.25rem}
  .wty dl>div{grid-template-columns:1fr;gap:.1rem;padding:.65rem 0}
  .step-meta{gap:.5rem}
  .job-meta{gap:.5rem 1rem;font-size:.85rem}
  .cc-opts dt{font-size:1.15rem}

  /* stop long strings blowing out the viewport */
  .ftr,.wrap,.narrow{overflow-wrap:anywhere}
  .hm-list .pl{white-space:normal}

  /* the ambient plan is noise at this size */
  .planwrap{display:none}
}
@media(max-width:420px){
  .swatches{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .sizes{grid-template-columns:1fr}
  .hm-group{width:100%;justify-content:center}
}

/* ============================================================
   FORMS — Netlify Forms, no backend required
   ============================================================ */
.formcard{background:hsl(var(--surface));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:clamp(1.6rem,3.5vw,2.6rem);
  box-shadow:0 22px 60px -40px hsl(210 25% 30%/.5)}
.formcard h3{margin:0 0 .4rem}
.formcard .form-lede{color:hsl(var(--muted-foreground));margin:0 0 1.6rem;font-size:.98rem;line-height:1.7}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.f-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.01em;color:hsl(var(--ink))}
.field .req{color:hsl(var(--gold));margin-left:.15rem}
.field .hint{font-size:.76rem;color:hsl(var(--steel));line-height:1.5}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;width:100%;padding:.8rem .9rem;min-height:48px;
  color:hsl(var(--ink));background:hsl(var(--paper-2));
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 8px);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,hsl(var(--steel)) 50%),
                   linear-gradient(135deg,hsl(var(--steel)) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:hsl(var(--steel) / .55)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:hsl(var(--surface));border-color:hsl(var(--brand));
  box-shadow:0 0 0 4px hsl(var(--brand) / .13)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#b91c1c}
.field input:user-invalid:focus{box-shadow:0 0 0 4px hsl(0 72% 45% / .15)}
.field input[type=file]{padding:.6rem;background:hsl(var(--paper-2))}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.6rem}
.form-actions .btn{min-height:52px}
.form-note{font-size:.8rem;color:hsl(var(--steel));line-height:1.6;flex:1 1 16rem;margin:0}
.formcard button[disabled]{opacity:.6;cursor:progress}

/* on dark ground the card stays light — deliberate, it should read as a panel */
.sec-brand .formcard,.cta-band.sec-brand .formcard{background:hsl(var(--surface))}
.sec-brand .formcard h3,.sec-brand .formcard label{color:hsl(var(--ink))}

@media(max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .formcard{padding:1.4rem 1.15rem}
}

/* contact page layout */
.contact-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.contact-side{display:grid;gap:1rem}
.office-card{background:hsl(var(--surface));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:1.25rem 1.35rem}
.office-card .st{display:block;font-family:var(--display);font-style:italic;
  font-size:.95rem;color:hsl(var(--gold));margin-bottom:.15rem}
.office-card b{display:block;font-family:var(--display);font-size:1.35rem;color:hsl(var(--ink))}
.office-card span:not(.st){display:block;font-size:.88rem;color:hsl(var(--muted-foreground));
  line-height:1.6;margin-top:.3rem}
.office-card .tel{display:inline-block;margin-top:.55rem;font-weight:600;color:hsl(var(--brand));
  font-variant-numeric:lining-nums tabular-nums;text-decoration:none}
.office-card .tel:hover{color:hsl(var(--gold))}
@media(max-width:900px){.contact-split{grid-template-columns:1fr}}

/* ---------- hero with an inline form ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,4vw,4rem);align-items:end;width:100%}
.hero-xl .hero-copy{max-width:34rem}
.hero-alt a{color:hsl(var(--paper) / .82);text-decoration:none;font-size:.98rem;
  border-bottom:1px solid hsl(var(--paper) / .3);padding-bottom:.15rem}
.hero-alt a:hover{color:hsl(var(--gold));border-bottom-color:hsl(var(--gold) / .6)}

.hero-form{max-width:23rem;margin-left:auto;background:hsl(var(--surface) / .93);border:1px solid hsl(var(--paper) / .26);
  border-radius:var(--radius);padding:clamp(1.25rem,2vw,1.6rem);
  box-shadow:0 34px 80px -40px hsl(210 40% 6% / .85);backdrop-filter:blur(7px)}
.hf-title{font-size:clamp(1.35rem,1.8vw,1.6rem);margin:0 0 .3rem;color:hsl(var(--ink));text-wrap:balance}
.hf-sub{font-size:.83rem;line-height:1.55;color:hsl(var(--muted-foreground));margin:0 0 .95rem}
.hero-form .field{margin-bottom:.62rem}
.hero-form .field input{min-height:43px;padding:.62rem .8rem;font-size:.95rem}
.hero-form .field label{font-size:.76rem}
.hf-go{width:100%;justify-content:center;min-height:50px;margin-top:.35rem}
.hf-note{font-size:.78rem;color:hsl(var(--steel));margin:.8rem 0 0;text-align:center;line-height:1.6}
.hf-note a{color:hsl(var(--brand));font-weight:600;font-variant-numeric:lining-nums}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;align-items:start;gap:2rem}
  .hero-xl{min-height:auto;padding-top:clamp(6rem,16vw,8rem)}
  .hero-xl .wrap{padding-bottom:clamp(3rem,7vw,4.5rem)}
  .scroll-cue{display:none}
}

/* contact: get the form above the fold */
.contact-top{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
.contact-head{margin-bottom:clamp(1.5rem,3vw,2rem)}
.contact-head h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:.2rem 0 0;line-height:1.05}

/* ---------- glossary ---------- */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 2.5rem;margin:0}
.gloss > div{padding:1.35rem 0;border-top:1px solid hsl(var(--border))}
.gloss dt{font-family:var(--display);font-size:1.35rem;color:hsl(var(--brand));margin-bottom:.35rem}
.gloss dd{margin:0;font-size:.94rem;line-height:1.7;color:hsl(var(--muted-foreground))}

/* ---------- denial reasons ---------- */
.denials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.deny{display:flex;gap:1rem;align-items:flex-start;background:hsl(var(--steel-wash));
  border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.5rem 1.4rem}
.deny.wide{grid-column:span 2}
.deny-x{flex:none;width:2rem;height:2rem;border-radius:999px;background:hsl(var(--surface));
  border:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:center;margin-top:.15rem}
.deny-x svg{width:.95rem;height:.95rem;stroke:hsl(var(--steel));fill:none;stroke-width:2;stroke-linecap:round}
.deny h3{font-size:1.3rem;margin:0 0 .35rem;line-height:1.25}
.deny p{margin:0;font-size:.93rem;line-height:1.7;color:hsl(var(--muted-foreground))}
@media(max-width:900px){.denials{grid-template-columns:1fr}.deny.wide{grid-column:auto}}

/* ---------- steps: numbered rail, as the original had ---------- */
@media(min-width:781px){
  .steps{padding-left:4.5rem}
  .steps::before{content:"";position:absolute;left:1.5rem;top:.5rem;bottom:.5rem;width:1px;
    background:linear-gradient(hsl(var(--border)),hsl(var(--border)) 70%,transparent)}
  .step{position:relative}
  .step .pill-num{position:absolute;left:-4.5rem;top:1.75rem;width:3rem;height:3rem;
    font-size:1rem;box-shadow:0 0 0 6px hsl(var(--surface))}
}

/* ---------- home: what we do ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.svc-card{display:flex;flex-direction:column;background:hsl(var(--paper-2));
  border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.8rem 1.6rem}
.svc-card h3{font-size:1.55rem;margin:0 0 .6rem;line-height:1.2}
.svc-card p{margin:0 0 1.1rem;font-size:.95rem;line-height:1.7;color:hsl(var(--muted-foreground));flex:1}
.svc-link{font-size:.92rem;font-weight:600;color:hsl(var(--brand));text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem}
.svc-link span{transition:transform .3s cubic-bezier(.2,.7,.3,1);display:inline-block}
.svc-link:hover{color:hsl(var(--gold))}
.svc-link:hover span{transform:translateX(4px)}

/* ---------- home: first four claim steps ---------- */
.ministeps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.ministeps li{display:flex;gap:1.1rem;background:hsl(var(--surface));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:1.5rem 1.4rem}
.ministeps .n{font-family:var(--display);font-size:2.4rem;line-height:.9;color:hsl(var(--gold));
  font-variant-numeric:lining-nums;flex:none}
.ministeps h3{font-size:1.3rem;margin:0 0 .35rem;line-height:1.25}
.ministeps p{margin:0;font-size:.92rem;line-height:1.65;color:hsl(var(--muted-foreground))}

/* ---------- home: six layers ---------- */
.sysgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.layerlist{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.layerlist li{display:flex;align-items:center;gap:1rem;background:hsl(var(--paper-2));
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 4px);padding:1rem 1.2rem}
.layerlist span{flex:none;width:2.2rem;height:2.2rem;border-radius:.6rem;background:hsl(var(--brand));
  color:hsl(var(--paper));display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.05rem;font-variant-numeric:lining-nums}
.layerlist div{font-size:.98rem;color:hsl(var(--muted-foreground))}
.layerlist b{color:hsl(var(--ink));font-weight:600}
@media(max-width:820px){.sysgrid{grid-template-columns:1fr}.ministeps{grid-template-columns:1fr}}

/* ============================================================
   MOTION PASS 2 — quiet additions, no new vocabulary
   ============================================================ */

/* headings draw a short gold rule as they arrive */
.sec-head h2{position:relative;padding-bottom:.55rem}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,hsl(var(--gold)),hsl(var(--gold) / 0));
  transition:width .9s cubic-bezier(.2,.8,.3,1) .15s}
.sec-head.in h2::after,.rv.in .sec-head h2::after{width:3.2rem}


/* eyebrows fade up just ahead of their heading */
.sec-head .eyebrow{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease}
.sec-head.in .eyebrow{opacity:1;transform:none}

/* list items arrive in sequence */
.ck li,.gloss > div,.layerlist li,.cc-opts > div,.hm-list li{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease}
.rv.in .ck li,.rv.in .gloss > div,.rv.in .layerlist li,.rv.in .cc-opts > div,
.gloss.in > div,.layerlist.in li,.ck.in li,.cc-opts.in > div{
  opacity:1;transform:none}
.hm-list li{opacity:1;transform:none}
.rv.in .ck li:nth-child(2),.rv.in .gloss > div:nth-child(2),.rv.in .layerlist li:nth-child(2),.gloss.in > div:nth-child(2),.layerlist.in li:nth-child(2){transition-delay:60ms}
.rv.in .ck li:nth-child(3),.rv.in .gloss > div:nth-child(3),.rv.in .layerlist li:nth-child(3),.gloss.in > div:nth-child(3),.layerlist.in li:nth-child(3){transition-delay:120ms}
.rv.in .ck li:nth-child(4),.rv.in .gloss > div:nth-child(4),.rv.in .layerlist li:nth-child(4),.gloss.in > div:nth-child(4),.layerlist.in li:nth-child(4){transition-delay:180ms}
.rv.in .ck li:nth-child(5),.rv.in .gloss > div:nth-child(5),.rv.in .layerlist li:nth-child(5),.gloss.in > div:nth-child(5),.layerlist.in li:nth-child(5){transition-delay:240ms}
.rv.in .ck li:nth-child(n+6),.rv.in .gloss > div:nth-child(n+6),.rv.in .layerlist li:nth-child(n+6),.gloss.in > div:nth-child(n+6),.layerlist.in li:nth-child(n+6){transition-delay:300ms}

/* the numbered rail draws downward as the steps come into view */
@media(min-width:781px){
  .steps::before{transform:scaleY(0);transform-origin:top;
    transition:transform 1.4s cubic-bezier(.3,.7,.3,1)}
  .steps.railed::before{transform:scaleY(1)}
}

/* photographs settle rather than snap */
.stage img,.plate img,.dmg figure img{transition:clip-path 1s cubic-bezier(.22,.75,.3,1),
  transform 1.2s cubic-bezier(.22,.75,.3,1);transform:scale(1.04)}
.rv.in .stage img,.rv.in .plate img,.plate.rv.in img,.stage.rv.in img,.rv.in .dmg figure img{transform:scale(1)}

/* anchor jumps ease instead of snapping */
html{scroll-behavior:smooth;scroll-padding-top:96px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sec-head h2::after{width:3.2rem;transition:none}
  .sec-head .eyebrow{opacity:1;transform:none;transition:none}
  .ck li,.gloss > div,.layerlist li,.cc-opts > div{opacity:1;transform:none;transition:none}
  .steps::before,.steps.railed::before{transform:none;transition:none}
  .stage img,.plate img,.dmg figure img{transform:none;transition:none}
}

/* ============================================================
   LAYOUT SYSTEM
   One measure, one rhythm, one way to centre. Replaces ~76
   ad-hoc inline styles that had drifted to five different
   max-widths and six different top margins for the same jobs.
   ============================================================ */
:root{
  --measure-head:46rem;      /* section heads and ledes */
  --measure-prose:66ch;      /* running body copy       */
  --step-1:.75rem; --step-2:1.25rem; --step-3:2rem; --step-4:3rem;
}

/* section heads: one width, one bottom margin, everywhere */
.sec-head{max-width:var(--measure-head);margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.sec-head > *:last-child{margin-bottom:0}
.sec-head .lede{max-width:none}

/* centred variant — the rule and the eyebrow follow automatically */
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center h2::after,.sec-head.center h1::after{left:50%;transform:translateX(-50%)}
.sec-head.center + *{margin-inline:auto}

/* button rows */
.actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:var(--step-3)}
.actions.center{justify-content:center}

/* a single stack rhythm rather than six different margin-tops */
.mt-1{margin-top:var(--step-1)}
.mt-2{margin-top:var(--step-2)}
.mt-3{margin-top:var(--step-3)}
.mt-4{margin-top:var(--step-4)}

/* running prose keeps a readable measure without being told each time */
.sec p:not(.lede):not(.small):not(.eyebrow):not(.form-lede){max-width:var(--measure-prose)}
.sec-head.center ~ * p:not(.lede):not(.small){margin-inline:auto}
.center-block{text-align:center}
.center-block .sec-head,.center-block .lede{margin-inline:auto}
.center-block .eyebrow{justify-content:center}
.center-block h2::after{left:50%;transform:translateX(-50%)}
.center-block p:not(.small){max-width:var(--measure-head);margin-inline:auto}

/* ---------- hero: original composition ---------- */
.hero-xl .hero-copy{max-width:48rem}
.h1-soft{color:hsl(var(--steel-soft));display:inline}
@media(min-width:640px){.h1-soft{display:block}}

.hero-stats{display:flex;flex-wrap:wrap;gap:1.25rem 3rem;margin:0 0 2.25rem}
.hero-stats > div{min-width:0}
.hero-stats dt{display:flex;align-items:baseline;gap:.25rem;margin:0;
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,4.2vw,3.1rem);line-height:1;color:hsl(var(--paper));
  font-variant-numeric:lining-nums tabular-nums}
.hero-stats .star{color:hsl(var(--gold));font-size:.55em}
.hero-stats dd{margin:.55rem 0 0;font-size:.86rem;letter-spacing:.02em;
  color:hsl(var(--paper) / .72);line-height:1.4}

.hero-xl .actions{margin-top:0}
@media(max-width:760px){
  .hero-stats{gap:1rem 2rem;margin-bottom:1.75rem}
  .hero-stats dt{font-size:2rem}
}

/* Google reviews widget: hide its built-in title, our section heading does that job */
.reviews-sec .jf-reviews-title-bar{display:none!important}
.reviews-sec [id^=JFWebsiteWidget]{margin-top:-8px}

/* ---- Always-on call bar (all main-site pages) ---- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:hsl(var(--surface) / .96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border));box-shadow:0 -10px 30px -18px rgba(7,43,69,.45)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none}
.callbar-call{flex:1.4;background:hsl(var(--gold));color:hsl(var(--brand-dark))}
.callbar-call svg{width:20px;height:20px;flex:none}
.callbar-book{flex:1;background:hsl(var(--brand));color:hsl(var(--brand-foreground))}
body{padding-bottom:78px}
@media (min-width:900px){
  .callbar{left:auto;right:22px;bottom:22px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
  .callbar a{min-height:54px;padding:0 22px;box-shadow:0 14px 34px -10px rgba(7,43,69,.55)}
  .callbar .callbar-book{display:none}
  .callbar-call{flex:none;white-space:nowrap}
  body{padding-bottom:0}
}
/* ---- Homeowner videos ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);max-width:860px;margin:0 auto}
.tvid{margin:0;position:relative}
.tvid video{width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;background:#0b1b26;border-radius:18px;display:block;
  box-shadow:0 20px 40px -26px rgba(7,43,69,.6)}
.tvid figcaption{margin-top:10px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--steel, 205 15% 40%))}
.tplay{position:absolute;left:50%;top:calc(50% - 16px);transform:translate(-50%,-50%);width:66px;height:66px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(251,248,243,.94);color:hsl(var(--brand));display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(7,43,69,.7);transition:transform .2s ease}
.tplay:hover{transform:translate(-50%,-50%) scale(1.06)}
.tplay svg{width:30px;height:30px;margin-left:3px}
.tvid.playing .tplay{display:none}
.vids-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.btn-ghost-dark{border:1.5px solid hsl(var(--brand) / .35);color:hsl(var(--brand));background:transparent}
.btn-ghost-dark:hover{border-color:hsl(var(--brand))}
.also-serving{margin-top:1.5rem;text-align:center;font-size:.95rem;color:hsl(var(--steel, 205 15% 40%))}
.also-serving a{color:hsl(var(--brand));font-weight:600}
@media (max-width:899px){
  .tgrid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(50% - 50vw);padding:0 16px 8px;scrollbar-width:none}
  .tgrid::-webkit-scrollbar{display:none}
  .tvid{scroll-snap-align:center}
  .tplay{width:58px;height:58px}
  .vids-cta .btn{width:100%}
}