/* =========================================================================
   RAPID ROOFING — "Horizon"
   A cinematic, type-led identity for a Stanislaus County roofing contractor.
   Design principle: the roof is the only thing between you and the sky.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:      #06080b;
  --ink-2:    #0a0d12;
  --ink-3:    #0f131a;
  --ink-4:    #151a23;

  --line:     rgba(255,255,255,.085);
  --line-2:   rgba(255,255,255,.045);
  --line-3:   rgba(255,255,255,.16);

  --fg:       #eef0f3;
  --fg-2:     #a4abb6;
  --fg-3:     #7d8490;

  --ember:    #e4a045;
  --ember-2:  #f2c078;
  --ember-dim:rgba(228,160,69,.14);
  --live:     #ff4a38;

  --shell:    min(1320px, 100% - 2 * var(--gut));
  --gut:      28px;

  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);

  --f-disp:   "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}
@media (min-width:768px){ :root{ --gut:44px } }
@media (min-width:1200px){ :root{ --gut:64px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--ember); color:#0a0700 }

/* Focus — visible, never ugly */
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:2px }
:focus:not(:focus-visible){ outline:none }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ember); color:#0a0700; padding:12px 20px; border-radius:6px;
  font-weight:600; transition:top .2s;
}
.skip:focus{ top:16px }

/* ---------- 2. Typography ---------- */
.shell{ width:var(--shell); margin-inline:auto }

h1,h2,h3,h4{
  font-family:var(--f-disp); font-weight:400;
  letter-spacing:-.035em; line-height:1.02; margin:0;
  text-wrap:balance;
}
.d1{ font-size:clamp(3.4rem, 13vw, 11rem); font-weight:300; letter-spacing:-.05em }
.d2{ font-size:clamp(2.3rem, 6.4vw, 5.2rem); font-weight:300; letter-spacing:-.042em; line-height:1.04 }
.d3{ font-size:clamp(1.7rem, 3.4vw, 3rem);  font-weight:400; letter-spacing:-.035em; line-height:1.1 }
.d4{ font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:500; letter-spacing:-.02em; line-height:1.25 }

p{ margin:0 0 1.1em }
p:last-child{ margin-bottom:0 }
.lede{
  font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.62;
  color:var(--fg-2); font-weight:350; max-width:62ch; text-wrap:pretty;
}
.body-2{ color:var(--fg-2); max-width:64ch; text-wrap:pretty }

.mono{
  font-family:var(--f-mono); font-size:.685rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3);
}
.mono-em{ color:var(--ember) }

/* Section eyebrow: index + label on a hairline */
.eyebrow{
  display:flex; align-items:center; gap:16px;
  padding-bottom:20px; margin-bottom:44px;
  border-bottom:1px solid var(--line-2);
}
.eyebrow .idx{ font-family:var(--f-mono); font-size:.685rem; letter-spacing:.14em; color:var(--ember) }
.eyebrow .lbl{ font-family:var(--f-mono); font-size:.685rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3) }
.eyebrow .rule{ flex:1; height:1px; background:var(--line-2) }

section{ position:relative }
.band{ padding:clamp(88px, 13vw, 190px) 0 }
.band-tight{ padding:clamp(64px, 8vw, 110px) 0 }
.hair{ height:1px; background:var(--line-2); border:0; margin:0 }

/* ---------- 3. Motion primitives ---------- */
.rv{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .95s var(--ease) var(--d,0ms), transform .95s var(--ease) var(--d,0ms);
  will-change:opacity, transform;
}
.rv.in{ opacity:1; transform:none }

/* Line-mask reveal — the premium touch */
.ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em }
.ln > i{
  display:block; font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform 1.05s var(--ease) var(--d,0ms);
  will-change:transform;
}
.in .ln > i, .ln.in > i{ transform:none }

/* Hairline draw */
.draw{ transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) var(--d,0ms) }
.draw.in{ transform:scaleX(1) }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .hero-track{ height:100svh }
  .hero{ position:relative }
  .hero-bolt{ display:none }
  #wx,#flash{ display:none }
  .sky-storm{ opacity:.35 }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .rv{ opacity:1; transform:none }
  .ln > i{ transform:none }
  .draw{ transform:scaleX(1) }
}

/* ---------- 4. Buttons ---------- */
.btn{
  --bg:transparent; --bd:var(--line-3); --tx:var(--fg);
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border-radius:100px;
  background:var(--bg); border:1px solid var(--bd); color:var(--tx);
  font-family:var(--f-body); font-size:.94rem; font-weight:500; letter-spacing:-.01em;
  overflow:hidden; isolation:isolate;
  transition:border-color .5s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--fg); transform:translate3d(0,101%,0);
  transition:transform .6s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--fg) }
.btn:hover::before{ transform:none }
.btn:active{ transform:scale(.98) }
.btn svg{ width:15px; height:15px; flex:none; transition:transform .5s var(--ease) }
.btn:hover svg{ transform:translateX(3px) }

.btn-ember{ --bd:var(--ember); --tx:var(--ember) }
.btn-ember::before{ background:var(--ember) }
.btn-ember:hover{ color:#0a0700; border-color:var(--ember) }

.btn-solid{ --bg:var(--fg); --bd:var(--fg); --tx:var(--ink) }
.btn-solid::before{ background:var(--ember) }
.btn-solid:hover{ color:#0a0700; border-color:var(--ember) }

.btn-lg{ padding:18px 32px; font-size:1rem }

/* Quiet text link with an underline that draws */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  font-weight:500; padding-bottom:3px;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left }
.tlink svg{ width:13px; height:13px; transition:transform .5s var(--ease) }
.tlink:hover svg{ transform:translateX(4px) }

/* Live indicator */
.live{ position:relative; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--live); flex:none }
.live::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--live); opacity:.9; animation:ping 2.4s var(--ease-io) infinite;
}
@keyframes ping{ 0%{transform:scale(.6);opacity:.9} 70%,100%{transform:scale(2.2);opacity:0} }

/* ---------- 5. Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  padding:18px 0; transition:background .6s var(--ease), border-color .6s var(--ease), padding .6s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(6,8,11,.72); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line-2); padding:12px 0;
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:24px }

.brand{ display:flex; align-items:center; gap:11px; flex:none }
.brand-mark{ width:26px; height:26px; flex:none; overflow:visible }
.brand-mark path{ transition:transform .6s var(--ease) }
.brand:hover .brand-mark .rf-a{ transform:translateY(-1.5px) }
.brand:hover .brand-mark .rf-b{ transform:translateY(1.5px) }
.brand-txt{ display:flex; flex-direction:column; line-height:1 }
.brand-txt b{ font-family:var(--f-disp); font-size:.97rem; font-weight:600; letter-spacing:-.02em }
.brand-txt span{ font-family:var(--f-mono); font-size:.53rem; letter-spacing:.22em; color:var(--fg-3); margin-top:3px }

.nav{ display:none; align-items:center; gap:34px }
@media (min-width:1000px){ .nav{ display:flex } }
.nav a{
  position:relative; font-size:.875rem; color:var(--fg-2); font-weight:450;
  transition:color .4s var(--ease); padding:4px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ember); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav a:hover{ color:var(--fg) }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left }

.hdr-cta{ display:flex; align-items:center; gap:14px; flex:none }
.hdr-phone{
  display:none; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--fg); padding:9px 15px; border:1px solid var(--line);
  border-radius:100px; transition:border-color .4s var(--ease), background .4s var(--ease);
}
@media (min-width:620px){ .hdr-phone{ display:inline-flex } }
.hdr-phone:hover{ border-color:var(--line-3); background:rgba(255,255,255,.04) }

/* Menu button + drawer */
.burger{ display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:100px; flex:none }
@media (min-width:1000px){ .burger{ display:none } }
.burger span{ display:block; width:15px; height:1px; background:var(--fg); transition:transform .5s var(--ease), opacity .3s }
.burger span+span{ margin-top:4px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(2.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-2.5px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.drawer.open{ clip-path:inset(0 0 0 0); visibility:visible }
.drawer nav{ display:flex; flex-direction:column; gap:6px }
.drawer nav a{
  font-family:var(--f-disp); font-size:clamp(2rem,8vw,3.2rem); font-weight:300;
  letter-spacing:-.04em; padding:6px 0; opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms), color .3s;
}
.drawer.open nav a{ opacity:1; transform:none }
.drawer nav a:hover{ color:var(--ember) }
.drawer-foot{ margin-top:52px; padding-top:26px; border-top:1px solid var(--line-2); display:grid; gap:14px }

/* ---------- 6. Hero — "The Horizon" ---------- */
/* Pinned for one short beat so the words can close and the bolt can land.
   Kept to ~70vh of extra scroll — this is a business where people arrive leaking. */
.hero-track{ position:relative; height:170svh }
.hero{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; isolation:isolate;
  padding-bottom:clamp(28px,5vh,54px);
}
@media (max-width:559px){ .hero-track{ height:150svh } }

/* Lightning, not a logo: it exists for about 300ms and leaves nothing behind. */
.hero-bolt{
  position:absolute; left:var(--boltX, 50%); bottom:.02em; translate:-50% 0;
  height:var(--boltH, 60vh); width:auto;
  opacity:0; pointer-events:none; z-index:1;
  filter:drop-shadow(0 0 10px rgba(206,226,255,.95))
         drop-shadow(0 0 34px rgba(228,160,69,.65))
         drop-shadow(0 0 72px rgba(228,160,69,.35));
}
.hero-bolt path{ fill:none; stroke-linejoin:miter; stroke-linecap:butt }
.b-halo  { stroke:#e4a045; stroke-width:10; opacity:.45 }
.b-core  { stroke:#f4f8ff; stroke-width:3.4 }
.b-branch{ stroke:#f4f8ff; stroke-width:1.8; opacity:.85 }
/* ---- Page-wide weather. Golden hour at the top, storm over the emergency
   section, clearing again by the time we ask for the call. Driven from JS. ---- */
#sky{ position:fixed; inset:0; z-index:-3; background:var(--ink); overflow:hidden }
.sky-l{ position:absolute; inset:0; will-change:opacity }
.sky-clear{
  background:
    radial-gradient(ellipse 120% 56% at 50% 90%,
      rgba(240,178,88,.44) 0%, rgba(198,118,48,.22) 26%,
      rgba(92,80,124,.13) 52%, transparent 76%),
    linear-gradient(180deg, #060810 0%, #090d16 52%, #0b0f17 100%);
  animation:breathe 16s var(--ease-io) infinite;
}
.sky-storm{
  opacity:0;
  background:
    radial-gradient(ellipse 150% 62% at 50% 99%,
      rgba(132,146,166,.16) 0%, rgba(64,74,90,.10) 34%, transparent 70%),
    linear-gradient(180deg, #04060a 0%, #070a0e 48%, #090c11 100%);
}
.sky-day{
  opacity:0;
  background:
    radial-gradient(ellipse 138% 54% at 50% 92%,
      rgba(255,201,128,.42) 0%, rgba(226,146,70,.24) 26%,
      rgba(112,128,178,.14) 56%, transparent 82%),
    linear-gradient(180deg, #0a1018 0%, #0d1521 46%, #111a26 100%);
}
@keyframes breathe{ 0%,100%{ scale:1 } 50%{ scale:1.03 } }

/* Narrow screens are tall, not wide — the horizon glow has to sit higher
   and flatter or it hides behind the buttons. */
@media (max-width:640px){
  .sky-clear{
    background:
      radial-gradient(ellipse 165% 40% at 50% 76%,
        rgba(240,178,88,.46) 0%, rgba(198,118,48,.24) 30%,
        rgba(92,80,124,.14) 56%, transparent 80%),
      linear-gradient(180deg, #060810 0%, #090d16 52%, #0b0f17 100%);
  }
  .sky-storm{
    background:
      radial-gradient(ellipse 175% 44% at 50% 82%,
        rgba(132,146,166,.17) 0%, rgba(64,74,90,.11) 36%, transparent 74%),
      linear-gradient(180deg, #04060a 0%, #070a0e 48%, #090c11 100%);
  }
}

/* Rain falls in FRONT of the page, so it storms over the solid cards too. */
#wx{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0 }
#flash{
  position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 90% 62% at var(--fx,50%) -4%, rgba(198,216,242,.55), transparent 60%);
}

/* Keeps hero type legible against whatever the sky is doing behind it. */
.hero-veil{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,8,11,.74) 0%, transparent 26%),
             linear-gradient(0deg, rgba(6,8,11,.55) 0%, transparent 24%);
}

/* Grain */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; mix-blend-mode:overlay;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 16%{ transform:translate(-3%,-4%) } 33%{ transform:translate(3%,-2%) }
  50%{ transform:translate(-2%,3%) } 66%{ transform:translate(4%,2%) } 83%{ transform:translate(-4%,1%) }
}

/* Layered rooflines (parallax) */
.ridges{ position:absolute; left:0; right:0; bottom:0; z-index:-1; pointer-events:none }
.ridge{ position:absolute; left:-6%; width:112%; bottom:0; display:block; will-change:transform }
.ridge-far{ fill:#141a25; opacity:.9 }
.ridge-mid{ fill:#0d1219 }
.ridge-near{ fill:#080b11 }

/* Hero type: split to the edges, meeting at the horizon */
.hero-type{
  position:relative; z-index:2; width:var(--shell); margin:0 auto clamp(30px,6vh,64px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
}
.hero-type .word{
  font-family:var(--f-disp); font-weight:250;
  font-size:clamp(2.9rem, 12.2vw, 10.5rem); line-height:.86;
  letter-spacing:-.055em; color:var(--fg);
}
.hero-type .word.r{ text-align:right }
@media (max-width:560px){
  .hero-type{ flex-direction:column; align-items:flex-start; gap:0 }
  .hero-type .word.r{ text-align:left; align-self:flex-end }
}

/* Hero footer row: tagline • CTAs • scroll cue */
.hero-foot{
  position:relative; z-index:2; width:var(--shell); margin-inline:auto;
  display:grid; gap:30px; padding-top:26px; border-top:1px solid var(--line-2);
}
@media (min-width:900px){
  .hero-foot{ grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:48px }
}
.hero-claim{ font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.55; color:var(--fg-2); max-width:46ch; font-weight:350 }
.hero-claim b{ color:var(--fg); font-weight:500 }
.hero-acts{ display:flex; flex-wrap:wrap; gap:12px }

.hero-tag{
  position:absolute; top:calc(56px + 5vh); left:0; right:0; z-index:2;
  width:var(--shell); margin-inline:auto;
}
.hero-tag .pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px 8px 13px; border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.025); backdrop-filter:blur(8px);
}
.hero-tag .pill span{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--fg-2) }

.cue{ display:none }
@media (min-width:900px){
  .cue{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    position:absolute; right:var(--gut); bottom:clamp(28px,5vh,54px); z-index:2;
  }
  .cue i{ display:block; width:1px; height:46px; background:linear-gradient(var(--line-3), transparent); position:relative; overflow:hidden }
  .cue i::after{ content:""; position:absolute; inset:0; background:var(--ember); animation:cue 2.6s var(--ease-io) infinite }
  .cue span{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; color:var(--fg-3); writing-mode:vertical-rl }
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }

/* ---------- 7. Statement ---------- */
.statement{ padding:clamp(90px,15vw,210px) 0 }
.statement p{
  font-family:var(--f-disp); font-weight:300; letter-spacing:-.038em;
  font-size:clamp(1.65rem,4.4vw,3.6rem); line-height:1.16; max-width:20ch; color:var(--fg-3);
}
.statement .w{ color:var(--fg); transition:color .8s var(--ease) }
.statement em{ font-style:normal; color:var(--ember) }

/* ---------- 8. Facts strip (AEO-friendly definition list) ---------- */
.facts{ border-block:1px solid var(--line-2); background:var(--ink-2) }
.facts dl{ margin:0; display:grid; grid-template-columns:1fr 1fr }
@media (min-width:760px){ .facts dl{ grid-template-columns:repeat(4,1fr) } }
.facts .cell{ padding:30px var(--gut); border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2) }
@media (min-width:760px){ .facts .cell{ border-bottom:0; padding:38px 32px } }
.facts .cell:last-child{ border-right:0 }
@media (max-width:759px){ .facts .cell:nth-child(2n){ border-right:0 } }
.facts dt{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); margin-bottom:12px }
.facts dd{ margin:0; font-family:var(--f-disp); font-size:clamp(1.35rem,2.4vw,2rem); font-weight:400; letter-spacing:-.03em; line-height:1.1 }
.facts dd small{ display:block; font-family:var(--f-body); font-size:.78rem; font-weight:400; color:var(--fg-3); letter-spacing:0; margin-top:8px; line-height:1.45 }

/* ---------- 9. Services ---------- */
.svc-grid{ display:grid; gap:1px; background:var(--line-2); border-block:1px solid var(--line-2) }
@media (min-width:900px){ .svc-grid{ grid-template-columns:repeat(3,1fr) } }
.svc{
  position:relative; background:var(--ink); padding:38px var(--gut) 36px; overflow:hidden;
  display:flex; flex-direction:column; min-height:min(74vh,600px); isolation:isolate;
}
@media (min-width:900px){ .svc{ padding:44px 36px 40px } }
.svc-media{ position:absolute; inset:0; z-index:-2 }
.svc-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.5) contrast(1.1) brightness(.52);
  transform:scale(1.06); transition:transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.svc::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,8,11,.72) 0%, rgba(6,8,11,.55) 40%, rgba(6,8,11,.95) 100%);
  transition:background 1s var(--ease);
}
.svc:hover .svc-media img, .svc:focus-within .svc-media img{ transform:scale(1.01); filter:grayscale(.14) contrast(1.05) brightness(.66) }
.svc:hover::after, .svc:focus-within::after{ background:linear-gradient(180deg, rgba(6,8,11,.55) 0%, rgba(6,8,11,.4) 38%, rgba(6,8,11,.93) 100%) }

.svc-num{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; color:var(--ember); margin-bottom:auto }
.svc h3{ font-size:clamp(1.5rem,2.4vw,2.05rem); font-weight:400; letter-spacing:-.035em; margin:44px 0 14px }
.svc p{ color:var(--fg-2); font-size:.94rem; line-height:1.6; margin-bottom:22px; max-width:40ch }
.svc ul{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px }
.svc li{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); display:flex; gap:11px; align-items:center }
.svc li::before{ content:""; width:12px; height:1px; background:var(--ember); flex:none }
.svc .tlink{ color:var(--fg); font-size:.88rem }

/* ---------- 10. The Assembly — scroll-scrubbed exploded roof ---------- */
.assembly{ position:relative }
.asm-track{ height:340vh }
@media (max-width:820px){ .asm-track{ height:280vh } }
.asm-pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden }
.asm-in{ width:var(--shell); margin-inline:auto; display:grid; gap:22px; align-items:center }
@media (min-width:980px){ .asm-in{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:52px } }

.asm-copy h2{ margin-bottom:20px }
.asm-copy .body-2{ font-size:.98rem }

/* Layer readout */
.asm-read{ margin-top:30px; border-top:1px solid var(--line-2); padding-top:22px; min-height:132px }
.asm-read .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ember); margin-bottom:11px }
.asm-read h3{ font-size:clamp(1.25rem,2vw,1.65rem); font-weight:400; margin-bottom:9px; letter-spacing:-.03em }
.asm-read p{ color:var(--fg-2); font-size:.9rem; line-height:1.55; max-width:44ch; margin:0 }
.asm-read .slot{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
.asm-read .slot.on{ opacity:1; transform:none }
.asm-read .slot:not(.on){ position:absolute; pointer-events:none }
.asm-read-wrap{ position:relative }

/* 3D stage */
.asm-stage{ perspective:1400px; perspective-origin:50% 42%; height:min(60svh,520px); position:relative }
.asm-layers{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(-38deg) translateZ(0);
  display:grid; place-items:center;
}
@media (min-width:980px){
  .asm-layers{ inset:0 13% 0 0 }
}
.lyr{
  position:absolute; width:min(54%,300px); aspect-ratio:1.45/1;
  transform-style:preserve-3d; border-radius:3px;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.85);
  transition:transform .1s linear, opacity .5s var(--ease), border-color .5s var(--ease);
  background-size:cover; background-position:center;
}
.lyr.hot{ border-color:var(--ember); box-shadow:0 0 0 1px var(--ember-dim), 0 24px 60px -18px rgba(228,160,69,.4) }
.lyr::after{ content:""; position:absolute; inset:0; border-radius:inherit; transition:background .5s }
.lyr.hot::after{ background:var(--ember-dim) }

/* Steel B-deck — fluted profile running one way */
.lyr-deck{
  background:repeating-linear-gradient(90deg,
    #2d333c 0 15px, #1d222a 15px 19px, #262c35 19px 23px, #1d222a 23px 27px);
}
/* Polyiso board — warm facer, visible board joints */
.lyr-iso{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.36) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.36) 0 1px, transparent 1px 52px),
    linear-gradient(140deg,#4c4639,#3a352b);
}
/* Gypsum cover board — chalky, cooler, staggered from the iso below */
.lyr-gyp{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, transparent 1px 62px),
    linear-gradient(140deg,#585f68,#434951);
}
/* Bonding adhesive — thin, mottled, rolled on */
.lyr-glue{
  background:
    repeating-linear-gradient(58deg, rgba(162,152,134,.20) 0 7px, rgba(98,92,82,.11) 7px 15px),
    linear-gradient(140deg, rgba(114,106,92,.34), rgba(64,60,52,.26));
}
/* 60-mil EPDM — black rubber with a low sheen and one lap seam */
.lyr-epdm{
  background:
    linear-gradient(102deg, transparent 46%, rgba(255,255,255,.06) 47%, rgba(0,0,0,.34) 48.4%, transparent 49.4%),
    linear-gradient(140deg,#1c1f24 0%, #14171b 55%, #0f1216 100%);
}
/* Perimeter flashing & termination bar — a frame, not a plane */
.lyr-flash{
  background:none;
  border-width:6px;
  border-color:#5b646e;
  box-shadow:0 14px 40px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.5);
}
.lyr-flash.hot{ border-color:var(--ember) }

.lyr-tag{
  position:absolute; top:50%; left:100%; translate:0 -50%; margin-left:30px;
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--fg-3); transform:rotateZ(38deg) rotateX(-58deg); transform-origin:left center;
  opacity:0; transition:opacity .45s var(--ease), color .45s var(--ease);
}
.lyr-tag::before{ content:""; width:20px; height:1px; background:var(--line-3) }
.asm-open .lyr-tag{ opacity:1 }
.lyr.hot .lyr-tag{ color:var(--ember) }
.lyr.hot .lyr-tag::before{ background:var(--ember) }

/* progress rail */
.asm-rail{ position:absolute; left:var(--gut); top:50%; translate:0 -50%; display:none; gap:0; flex-direction:column }
@media (min-width:1280px){ .asm-rail{ display:flex } }
.asm-rail b{ width:1px; height:26px; background:var(--line); margin:3px 0; transition:background .4s, height .4s var(--ease) }
.asm-rail b.on{ background:var(--ember); height:34px }

/* At ~1024px the two-column assembly is tight enough that the longest callout
   ("FLASHING & TERMINATIONS") clears the viewport edge by 9px. Pull the stack
   further left and tighten the leader in that band only. */
@media (min-width:980px) and (max-width:1180px){
  .asm-layers{ inset:0 21% 0 0 }
  .lyr-tag{ font-size:.53rem; margin-left:22px }
  .lyr-tag::before{ width:15px }
}

/* ---- Phone/tablet fit for the pinned assembly ----
   The pin is one viewport tall, so everything inside it has to fit inside one
   viewport. On a phone it did not: the heading slid up under the fixed header
   and the layer callouts ran off the right edge. ---- */
@media (max-width:900px){
  .asm-pin{ align-items:center; padding-top:76px; padding-bottom:44px }
  .asm-in{ gap:22px }
  .asm-stage{ height:min(36svh, 300px) }
  .asm-copy .eyebrow{ margin-bottom:18px; padding-bottom:14px }
  .asm-read{ margin-top:18px; padding-top:16px; min-height:132px }
  .asm-read p{ font-size:.86rem }
  .lyr{ width:min(50%,240px) }
  /* bias the stack downward inside its box — the layers project upward,
     and the readout sits directly above it */
  .asm-layers{ inset:13% 0 -6% 0 }
}
/* Short phones (SE-class, 667px tall) cannot afford the full stage. */
@media (max-width:900px) and (max-height:720px){
  .asm-pin{ padding-top:70px; padding-bottom:36px }
  .asm-stage{ height:min(30svh, 240px) }
  .asm-read{ min-height:124px }
}

@media (max-width:767px){
  /* callouts need ~150px to the right of the stack, which a phone does not have.
     The readout directly above already names and describes the active layer. */
  .lyr-tag{ display:none }
  .asm-copy > .body-2{ display:none }
}

/* The grain plate is a 200%-viewport fixed layer with mix-blend-mode, which
   forces the whole page to composite. Invisible on a phone, expensive on one. */
@media (max-width:900px){
  .grain{ display:none }
}

/* ---- Touch targets ----
   Several links were visually correct but only ~26px tall, under the 44px
   minimum for a thumb. Expanded with a pseudo-element so the hit area grows
   without moving any type or shifting layout. ---- */
@media (max-width:900px){
  .tlink{ position:relative }
  .tlink::before{ content:""; position:absolute; inset:-11px -8px; border-radius:6px }
  .drawer-foot{ gap:22px }
  .drawer-foot .tlink::before{ inset:-10px -8px }
  .chip{ min-height:44px; display:inline-flex; align-items:center }
  .brand{ position:relative }
  .brand::before{ content:""; position:absolute; inset:-9px -6px }
  .cov-list a{ padding-block:15px }
  .ftr ul a{ display:inline-block; padding-block:6px }
  .crow dd a{ display:inline-block; padding-block:5px }
}

/* ---------- 11. Coverage — Stanislaus County dispatch ---------- */
.cov-in{ display:grid; gap:44px }
@media (min-width:1000px){ .cov-in{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; align-items:center } }

.radar{ position:relative; aspect-ratio:1/1; width:100%; max-width:660px; margin-inline:auto }
.radar svg{ width:100%; height:100%; overflow:visible }
.rad-ring{ fill:none; stroke:var(--line); stroke-width:.5 }
.rad-ring-lbl{ font-family:var(--f-mono); font-size:3.6px; letter-spacing:.5px; fill:var(--fg-3); text-transform:uppercase }
.rad-sweep{ transform-origin:100px 100px; animation:sweep 8s linear infinite }
@keyframes sweep{ to{ transform:rotate(360deg) } }
.rad-grid{ stroke:var(--line-2); stroke-width:.4 }
.rad-lead{ stroke:var(--line); stroke-width:.35 }
.city.on .rad-lead, .city:hover .rad-lead{ stroke:var(--ember) }
.sweep-edge{ stroke:var(--ember); stroke-width:.45; opacity:.5 }

.city{ cursor:default }
.city circle{ fill:var(--fg-3); transition:fill .4s var(--ease), r .4s var(--ease) }
.city text{ font-family:var(--f-mono); font-size:4.1px; letter-spacing:.34px; fill:var(--fg-2); text-transform:uppercase; transition:fill .4s var(--ease) }
.city:hover circle, .city.on circle{ fill:var(--ember); r:1.9 }
.city:hover text, .city.on text{ fill:var(--fg) }
.city-hq circle{ fill:var(--ember) }
.city-hq text{ fill:var(--fg); font-size:5.2px; letter-spacing:.5px }
.hq-pulse{ fill:none; stroke:var(--ember); stroke-width:.6; opacity:0; animation:hqp 3.4s var(--ease-io) infinite }
@keyframes hqp{ 0%{ r:2; opacity:.85 } 100%{ r:26; opacity:0 } }

.cov-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:0 18px; margin:34px 0 0; padding:0; list-style:none; border-top:1px solid var(--line-2) }
.cov-list li{ border-bottom:1px solid var(--line-2) }
.cov-list a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 0;
  font-size:.85rem; color:var(--fg-2); transition:color .35s var(--ease), padding-left .45s var(--ease);
}
.cov-list a:hover{ color:var(--ember); padding-left:7px }
.cov-list a i{ font-family:var(--f-mono); font-style:normal; font-size:.58rem; color:var(--fg-3); letter-spacing:.1em }

/* ---------- 12. Process ---------- */
.proc{ counter-reset:step }
.proc-row{
  display:grid; gap:14px 32px; padding:34px 0; border-top:1px solid var(--line-2);
  position:relative; transition:background .6s var(--ease);
}
@media (min-width:840px){ .proc-row{ grid-template-columns:88px minmax(0,.9fr) minmax(0,1.1fr); align-items:start; padding:40px 0 } }
.proc-row:last-child{ border-bottom:1px solid var(--line-2) }
.proc-row::before{
  content:""; position:absolute; left:-100vw; right:-100vw; top:0; bottom:0; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(228,160,69,.05) 30%, rgba(228,160,69,.05) 70%, transparent);
  opacity:0; transition:opacity .7s var(--ease);
}
.proc-row:hover::before{ opacity:1 }
.proc-k{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.19em; color:var(--ember) }
.proc-row h3{ font-size:clamp(1.2rem,2vw,1.7rem); font-weight:400; letter-spacing:-.03em }
.proc-row p{ color:var(--fg-2); font-size:.93rem; margin:0; max-width:52ch }
.proc-row .when{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-top:10px; display:block }

/* ---------- 13. Estimator ---------- */
.est{ background:var(--ink-2); border-block:1px solid var(--line-2) }
.est-in{ display:grid; gap:36px }
@media (min-width:960px){ .est-in{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:60px } }

.ctrl{ padding:22px 0; border-bottom:1px solid var(--line-2) }
.ctrl:first-child{ padding-top:0 }
.ctrl-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px }
.ctrl-hd label{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.19em; text-transform:uppercase; color:var(--fg-3) }
.ctrl-val{ font-family:var(--f-disp); font-size:1.35rem; font-weight:450; letter-spacing:-.03em; color:var(--fg) }
.ctrl-val input{
  width:74px; background:none; border:0; border-bottom:1px solid var(--line-3); color:var(--ember);
  font:inherit; text-align:right; padding:0 0 2px; outline:none; -moz-appearance:textfield;
}
.ctrl-val input::-webkit-outer-spin-button,.ctrl-val input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.ctrl-val input:focus{ border-bottom-color:var(--ember) }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:24px; background:none; cursor:grab }
input[type=range]:active{ cursor:grabbing }
input[type=range]::-webkit-slider-runnable-track{ height:1px; background:var(--line-3) }
input[type=range]::-moz-range-track{ height:1px; background:var(--line-3) }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background:var(--ember); margin-top:-6px; border:0;
  box-shadow:0 0 0 0 rgba(228,160,69,.28); transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
input[type=range]:hover::-webkit-slider-thumb{ box-shadow:0 0 0 7px rgba(228,160,69,.16); transform:scale(1.1) }
input[type=range]::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:var(--ember); border:0 }

.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  padding:9px 15px; border:1px solid var(--line); border-radius:100px;
  font-family:var(--f-mono); font-size:.61rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-2);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.chip:hover{ border-color:var(--line-3); color:var(--fg) }
.chip[aria-pressed="true"]{ border-color:var(--ember); color:var(--ember); background:var(--ember-dim) }

.tgl{ display:flex; align-items:center; justify-content:space-between; gap:18px; width:100% }
.tgl-sw{ position:relative; width:42px; height:23px; border-radius:100px; border:1px solid var(--line-3); flex:none; transition:border-color .4s, background .4s }
.tgl-sw::after{ content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:var(--fg-3); transition:transform .45s var(--ease), background .4s }
.tgl[aria-pressed="true"] .tgl-sw{ border-color:var(--ember); background:var(--ember-dim) }
.tgl[aria-pressed="true"] .tgl-sw::after{ transform:translateX(19px); background:var(--ember) }

.est-out{ border:1px solid var(--line); border-radius:6px; padding:32px var(--gut); background:var(--ink); position:relative; overflow:hidden }
@media (min-width:520px){ .est-out{ padding:38px 34px } }
.est-out::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--ember), transparent);
}
.est-fig{ font-family:var(--f-disp); font-weight:300; letter-spacing:-.05em; line-height:1; font-size:clamp(2.6rem,7vw,4.4rem); display:flex; align-items:baseline; gap:2px }
.est-fig .cur{ font-size:.42em; color:var(--fg-3); translate:0 -.9em }
.est-range{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-top:14px }
.est-lines{ list-style:none; margin:28px 0 0; padding:22px 0 0; border-top:1px solid var(--line-2); display:grid; gap:13px }
.est-lines li{ display:flex; justify-content:space-between; gap:16px; font-size:.85rem; color:var(--fg-2) }
.est-lines li b{ color:var(--fg); font-weight:450; text-align:right }
.est-note{ font-size:.76rem; color:var(--fg-3); line-height:1.55; margin-top:24px; padding-top:20px; border-top:1px solid var(--line-2) }

/* ---------- 14. Testimonials ---------- */
.quotes{ display:grid; gap:1px; background:var(--line-2); border-block:1px solid var(--line-2) }
@media (min-width:820px){ .quotes{ grid-template-columns:1fr 1fr } }
.quote{ background:var(--ink); padding:38px var(--gut); display:flex; flex-direction:column; gap:22px }
@media (min-width:820px){ .quote{ padding:46px 40px } }
.quote blockquote{ margin:0; font-family:var(--f-disp); font-weight:350; font-size:clamp(1.05rem,1.7vw,1.32rem); line-height:1.44; letter-spacing:-.024em; color:var(--fg); text-wrap:pretty }
.quote figcaption{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line-2); display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap }
.quote cite{ font-style:normal; font-size:.88rem; color:var(--fg) }
.quote cite span{ display:block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-top:6px }
.stars{ display:flex; gap:3px; flex:none }
.stars svg{ width:12px; height:12px; fill:var(--ember) }

/* ---------- 15. Answers + FAQ ---------- */
.ans{ display:grid; gap:0 }
@media (min-width:960px){ .ans{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:0 60px } }
.ans-side{ position:sticky; top:110px; align-self:start; padding-bottom:40px }

.faq{ border-top:1px solid var(--line-2) }
.faq-i{ border-bottom:1px solid var(--line-2) }
.faq-q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  width:100%; text-align:left; padding:26px 0;
  font-family:var(--f-disp); font-size:clamp(1.02rem,1.6vw,1.24rem); font-weight:400; letter-spacing:-.026em;
  color:var(--fg-2); transition:color .45s var(--ease);
}
.faq-q:hover, .faq-i.open .faq-q{ color:var(--fg) }
.faq-ic{ position:relative; width:13px; height:13px; flex:none; margin-top:6px }
.faq-ic::before,.faq-ic::after{ content:""; position:absolute; background:var(--fg-3); transition:transform .55s var(--ease), background .4s }
.faq-ic::before{ inset:6px 0 6px 0; height:1px }
.faq-ic::after{ inset:0 6px 0 6px; width:1px }
.faq-i.open .faq-ic::after{ transform:scaleY(0) }
.faq-i.open .faq-ic::before{ background:var(--ember) }
.faq-a{ overflow:hidden; height:0; transition:height .6s var(--ease) }
.faq-a > div{ padding:0 0 30px; max-width:66ch }
.faq-a p{ color:var(--fg-2); font-size:.94rem; line-height:1.65 }
.faq-a p:last-child{ margin-bottom:0 }

/* ---------- 16. Contact ---------- */
.cta{ position:relative; overflow:hidden; isolation:isolate }
.cta::before{
  content:""; position:absolute; left:50%; bottom:-40%; z-index:-1;
  width:min(150vw,1500px); aspect-ratio:2/1; translate:-50% 0;
  background:radial-gradient(ellipse at 50% 100%, rgba(228,160,69,.20), transparent 68%);
  filter:blur(30px);
}
.cta-in{ display:grid; gap:44px }
@media (min-width:940px){ .cta-in{ grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:70px; align-items:start } }

.form{ display:grid; gap:0 }
.fld{ position:relative; border-bottom:1px solid var(--line); padding-top:26px }
.fld label{
  position:absolute; left:0; top:26px; font-size:.94rem; color:var(--fg-3);
  pointer-events:none; transform-origin:left top;
  transition:transform .45s var(--ease), color .45s var(--ease);
}
.fld input,.fld textarea,.fld select{
  width:100%; background:none; border:0; outline:none; color:var(--fg);
  font:inherit; font-size:.98rem; padding:2px 0 13px; resize:none;
}
.fld select{ color:var(--fg); cursor:pointer }
.fld select option{ background:var(--ink-3); color:var(--fg) }
.fld input:focus + label, .fld textarea:focus + label,
.fld input:not(:placeholder-shown) + label, .fld textarea:not(:placeholder-shown) + label,
.fld.filled label{ transform:translateY(-24px) scale(.72); color:var(--ember) }
.fld::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ember);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.fld:focus-within::after{ transform:scaleX(1) }
.fld-2{ display:grid; gap:0 24px }
@media (min-width:560px){ .fld-2{ grid-template-columns:1fr 1fr } }
.form-foot{ margin-top:30px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between }
.form-note{ font-size:.74rem; color:var(--fg-3); max-width:34ch; line-height:1.5 }

.contact-rail{ display:grid; gap:0; border-top:1px solid var(--line-2) }
.crow{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line-2) }
.crow dt{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3) }
.crow dd{ margin:0; text-align:right; font-size:.95rem }
.crow dd a:hover{ color:var(--ember) }
.crow dd small{ display:block; color:var(--fg-3); font-size:.76rem; margin-top:5px }

/* ---------- 17. Footer ---------- */
.ftr{ border-top:1px solid var(--line-2); background:rgba(10,13,18,.82); padding:56px 0 30px }
.ftr-top{ display:grid; gap:36px; padding-bottom:44px; border-bottom:1px solid var(--line-2) }
@media (min-width:880px){ .ftr-top{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px } }
.ftr h4{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.19em; text-transform:uppercase; color:var(--fg-3); font-weight:500; margin-bottom:18px }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.ftr a{ font-size:.87rem; color:var(--fg-2); transition:color .35s var(--ease) }
.ftr a:hover{ color:var(--ember) }
.ftr-about{ font-size:.85rem; color:var(--fg-3); line-height:1.62; max-width:40ch; margin-top:16px }
.ftr-bot{ padding-top:24px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between }
.ftr-bot p{ margin:0; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-3) }

/* Sticky mobile call bar */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--line); border-top:1px solid var(--line);
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.callbar.up{ transform:none }
@media (min-width:900px){ .callbar{ display:none } }
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 10px;
  background:var(--ink-3); font-size:.85rem; font-weight:500;
}
.callbar a.em{ background:var(--ember); color:#0a0700 }
.callbar svg{ width:15px; height:15px }
@media (max-width:899px){ .ftr{ padding-bottom:86px } }

/* ---------- 18. Print ---------- */
@media print{
  .hdr,.callbar,.cue,.grain,#rain,.drawer{ display:none !important }
  body{ background:#fff; color:#000 }
  .rv,.ln>i{ opacity:1 !important; transform:none !important }
}

/* Hero pill swaps to a shorter string on narrow screens */
.pill-sm{ display:inline }
.pill-lg{ display:none }
@media (min-width:520px){ .pill-sm{ display:none } .pill-lg{ display:inline } }


/* =========================================================================
   19. Sub-pages (city, service and guide pages)
   Content-forward, lighter than the home page. Same tokens throughout.
   ========================================================================= */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:30px }
.crumbs a, .crumbs span{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3);
}
.crumbs a{ transition:color .35s var(--ease) }
.crumbs a:hover{ color:var(--ember) }
.crumbs i{ font-style:normal; color:var(--line-3); font-size:.6rem }
.crumbs [aria-current]{ color:var(--fg-2) }

.sub-hero{ padding-top:calc(78px + clamp(40px,7vw,90px)) }
.sub-hero h1{
  font-size:clamp(2.1rem,5.4vw,4.2rem); font-weight:300; letter-spacing:-.042em;
  line-height:1.04; max-width:18ch;
}
.sub-hero .lede{ margin-top:26px }
.sub-hero .hero-acts{ margin-top:34px }

.prose{ max-width:68ch }
.prose h2{
  font-size:clamp(1.5rem,2.6vw,2.15rem); font-weight:400; letter-spacing:-.035em;
  margin:0 0 18px; line-height:1.12;
}
.prose h3{
  font-size:clamp(1.08rem,1.7vw,1.32rem); font-weight:500; letter-spacing:-.024em;
  margin:34px 0 12px; color:var(--fg);
}
.prose p{ color:var(--fg-2); line-height:1.68; margin:0 0 1.15em }
.prose strong{ color:var(--fg); font-weight:500 }
.prose a:not(.btn):not(.tlink){ color:var(--ember); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.prose ul{ list-style:none; margin:0 0 1.3em; padding:0; display:grid; gap:11px }
.prose li{ position:relative; padding-left:22px; color:var(--fg-2); line-height:1.6 }
.prose li::before{ content:""; position:absolute; left:0; top:.66em; width:11px; height:1px; background:var(--ember) }

.split{ display:grid; gap:40px }
@media (min-width:940px){ .split{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:70px; align-items:start } }
.aside{ position:sticky; top:104px; align-self:start }
.aside-card{ border:1px solid var(--line); border-radius:6px; padding:26px 24px; background:rgba(15,19,26,.6) }
.aside-card h3{ font-size:1.05rem; font-weight:500; letter-spacing:-.02em; margin:0 0 8px }
.aside-card p{ font-size:.86rem; color:var(--fg-2); line-height:1.6; margin:0 0 18px }

/* Spec / cost tables — wide content scrolls in its own container */
.tw{ overflow-x:auto; margin:0 0 1.5em; border:1px solid var(--line-2); border-radius:6px }
table.spec{ width:100%; border-collapse:collapse; min-width:460px; font-size:.88rem }
table.spec caption{
  text-align:left; padding:16px 18px 0; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
}
table.spec th, table.spec td{ padding:13px 18px; text-align:left; border-bottom:1px solid var(--line-2) }
table.spec th{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-3); font-weight:500;
}
table.spec td{ color:var(--fg-2) }
table.spec td:first-child{ color:var(--fg) }
table.spec td.num{ font-variant-numeric:tabular-nums; white-space:nowrap }
table.spec tr:last-child td{ border-bottom:0 }

/* Related-links grid */
.tiles{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:6px; overflow:hidden }
@media (min-width:640px){ .tiles{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .tiles.t3{ grid-template-columns:repeat(3,1fr) } }
.tile{ background:var(--ink); padding:24px; display:flex; flex-direction:column; gap:8px; transition:background .45s var(--ease) }
.tile:hover{ background:var(--ink-3) }
.tile b{ font-family:var(--f-disp); font-size:1.05rem; font-weight:500; letter-spacing:-.022em; color:var(--fg) }
.tile span{ font-size:.83rem; color:var(--fg-3); line-height:1.5 }

.citylist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0 20px; list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2) }
.citylist li{ border-bottom:1px solid var(--line-2) }
.citylist a{ display:flex; justify-content:space-between; gap:10px; padding:13px 0; font-size:.87rem; color:var(--fg-2); transition:color .35s var(--ease), padding-left .45s var(--ease) }
.citylist a:hover{ color:var(--ember); padding-left:7px }
.citylist a i{ font-style:normal; font-family:var(--f-mono); font-size:.56rem; color:var(--fg-3); letter-spacing:.1em }