/* Layout: bold navy field with orange-to-gold heat. Dark hero and dark Roof Lab
   band bookend bright white working sections, so the page alternates instead of
   sitting on one flat surface. Angled cuts carry the Roof Lab energy.
   Colors sampled directly from the Roof Lab mark. */
:root{
  color-scheme: light;

  /* Brand, sampled from the Roof Lab badge */
  --navy:        #1A3061;
  --navy-deep:   #10204A;
  --navy-ink:    #0A1733;
  --navy-soft:   #2A4A86;
  --navy-line:   #35578F;
  --orange:      #EC6A1E;
  --orange-dark: #CE5411;
  --gold:        #F99816;
  --heat: linear-gradient(135deg, var(--orange) 0%, var(--gold) 100%);

  --ink:        #141C2B;
  --ink-soft:   #46536A;
  --ink-faint:  #6B7A92;
  --surface:    #FFFFFF;
  --wash:       #EFF4FA;
  --wash-deep:  #DDE8F4;
  --line:       #D2DFEE;
  --flag:       #FFF3D6;
  --flag-line:  #E9A91B;
  --flag-ink:   #6B4A00;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --maxw: 1180px;
  --r: 12px;
  --shadow: 0 2px 4px rgba(16,32,74,.07), 0 14px 38px rgba(16,32,74,.11);
  --shadow-lift: 0 4px 10px rgba(16,32,74,.10), 0 22px 54px rgba(16,32,74,.18);
}

*{ box-sizing: border-box }
/* The img rule below sets display:block, which beats the UA stylesheet's
   [hidden]{display:none}. Without this, el.hidden = true does nothing and a
   broken image shows its alt text next to the fallback. */
[hidden]{ display:none !important }
body{
  margin:0; background: var(--surface); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color: var(--navy-soft) }
h1,h2,h3{ font-family: var(--display); color: var(--navy-deep); text-wrap: balance; margin:0 }
h1{ font-size: clamp(2.15rem, 5.6vw, 3.5rem); line-height:1.03; font-weight:700; letter-spacing:-.028em }
h2{ font-size: clamp(1.7rem, 3.9vw, 2.5rem); line-height:1.1; font-weight:700; letter-spacing:-.022em }
h3{ font-size: 1.14rem; line-height:1.3; font-weight:600; letter-spacing:-.01em }
p{ margin:0 }

.wrap{
  max-width: var(--maxw); margin:0 auto; position:relative;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band{ padding-block: clamp(52px, 7.5vw, 94px); position:relative }
.band--wash{ background: var(--wash) }
/* The header is sticky, so an anchor jump must clear it. */
#schedule{ scroll-margin-top: 86px }
@media (max-width:519px){ #schedule{ scroll-margin-top: 74px } }
.band--navy{ background: var(--navy-deep); color:#fff }
.band--navy h2, .band--navy h3{ color:#fff }

/* Eyebrow as an orange pill, not quiet grey text */
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--display); font-weight:700; font-size:.73rem;
  letter-spacing:.15em; text-transform:uppercase; color:#fff;
  background: var(--heat); padding:7px 14px; border-radius:999px;
  align-self:flex-start;
  box-shadow: 0 4px 12px rgba(236,106,30,.3);
}
.band--navy .eyebrow{ box-shadow:none }
.lede{ font-size:1.1rem; color: var(--ink-soft); max-width: 60ch }
.band--navy .lede{ color: #BCD0E8 }

/* Orange rule under headings */
.ruled{ padding-bottom:16px; position:relative }
.ruled::after{
  content:""; position:absolute; left:0; bottom:0; width:72px; height:5px;
  border-radius:3px; background: var(--heat);
}
.head{ display:flex; flex-direction:column; gap:16px; align-items:flex-start }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--display); font-weight:700; font-size:1.04rem;
  padding: 16px 28px; min-height:56px; border-radius: var(--r);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  letter-spacing:-.005em;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease, border-color .14s ease;
}
.btn--primary{ background: var(--heat); color:#fff; box-shadow: 0 6px 18px rgba(236,106,30,.34) }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(236,106,30,.44) }
.btn--ghost{ border-color: var(--navy); color: var(--navy); background:transparent }
.btn--ghost:hover{ background: var(--navy); color:#fff }
.band--navy .btn--ghost, .hero .btn--ghost{ border-color: rgba(255,255,255,.5); color:#fff }
.band--navy .btn--ghost:hover, .hero .btn--ghost:hover{ background:#fff; color: var(--navy-deep) }
.btn--sm{ padding:11px 20px; min-height:46px; font-size:.96rem }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* ---------- Setup bar ---------- */
#setupbar{ background: var(--flag); color: var(--flag-ink); border-bottom:2px solid var(--flag-line); font-size:.9rem }
#setupbar .wrap{ padding-block:10px }
#setupbar strong{ font-family:var(--display) }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top: env(safe-area-inset-top, 0px); z-index:30;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(16,32,74,.04);
}
body::before{
  content:""; position:fixed; inset:0 0 auto; height: env(safe-area-inset-top, 0px);
  background:#fff; z-index:31;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px }
.logo{ display:flex; align-items:center; text-decoration:none }
.logo img{ max-height:46px; width:auto }
.logo .wordmark{ font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--navy-deep); text-decoration:none }
.header-right{ display:flex; align-items:center; gap:14px }
.header-phone{ font-family:var(--display); font-weight:700; color:var(--navy-deep); text-decoration:none; white-space:nowrap; font-size:1rem }
.header-phone .label{ display:none }
@media (min-width:720px){ .header-phone .label{ display:inline; color:var(--ink-faint); font-weight:500 } }
@media (max-width:519px){ .header-phone .num{ display:none } .header-phone::after{ content:"Call" } }

/* ---------- Hero: dark, with the photo carrying it ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 88% 8%, rgba(236,106,30,.26), transparent 62%),
    radial-gradient(760px 420px at 4% 92%, rgba(42,74,134,.75), transparent 60%),
    var(--navy-deep);
  color:#fff; padding-block: clamp(24px, 3.2vw, 44px) clamp(32px, 4.4vw, 58px);
  overflow:hidden;
}
.hero h1{ color:#fff }
.hero h1 .second{ display:block; background: var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero .wrap{ display:grid; gap:clamp(24px,3vw,46px); grid-template-columns:1fr; align-items:center }
@media (min-width:920px){ .hero .wrap{ grid-template-columns: 1.02fr .98fr } }
.hero-copy{ display:flex; flex-direction:column; gap:16px; min-width:0; justify-content:center }
.hero .lede{ color:#C6D7EC }
.hero .punch{
  font-family:var(--display); font-weight:700; font-size:1.12rem; color:#fff;
  display:flex; align-items:center; gap:11px; letter-spacing:-.01em;
}
.hero .punch::before{ content:""; flex:none; width:5px; height:26px; border-radius:3px; background:var(--heat) }
.hero-cta{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-top:4px }
.hero-cta .btn-row{ gap:12px }
@media (max-width:519px){
  .hero-cta .btn-row{ width:100%; flex-direction:column; align-items:stretch }
  .hero-cta .btn{ width:100% }
}
.microcopy{ font-size:.93rem; color: rgba(255,255,255,.72) }
.band:not(.band--navy) .microcopy{ color: var(--ink-faint) }

/* Photo frame with an orange edge and the badge overlapping */
.hero-media{ min-width:0; position:relative; display:flex; align-items:center; align-self:center }
.photo{
  position:relative; border-radius:16px; overflow:hidden; width:100%;
  box-shadow: var(--shadow-lift); border:1px solid rgba(255,255,255,.14);
}
/* In the hero the photo fills its column rather than floating in it. */
.hero-media .photo img{ width:100%; height:auto; display:block }
.photo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background: var(--heat);
}
.photo img{ width:100%; display:block }
.badge{
  position:absolute; width:clamp(78px, 11vw, 108px); height:auto;
  right:-14px; bottom:-18px; z-index:2; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5));
}
@media (max-width:919px){ .badge{ width:72px; right:-6px; bottom:-14px } }

/* Stacked reverse mark, sitting above the photo so the hero column starts
   with brand rather than empty navy */
/* Stacked reverse mark opens the hero, left aligned above the eyebrow, so
   the brand reads first and nothing floats in the middle of the column. */
.vm-stacked{ width:168px; height:auto; margin:0 0 10px }
.hero-geo{
  font-size:.92rem; color:rgba(255,255,255,.66);
  display:flex; align-items:center; gap:8px;
}
.hero-geo svg{ flex:none; width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:2 }
.imgslot{
  border:2px dashed var(--navy-line); border-radius:16px; background: rgba(255,255,255,.06);
  aspect-ratio: 16/9; max-width:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; color:#9CB6D6; font-size:.95rem;
}
.imgslot span{ max-width:32ch }
@media (max-width:919px){ .hero .wrap{ grid-template-areas:"copy" "media" } .hero-copy{grid-area:copy} .hero-media{grid-area:media} }

/* ---------- Trust strip: navy on orange-tinted wash ---------- */
.trust{ background: var(--navy); padding-block:28px; color:#fff }
.trust-grid{ display:grid; gap:18px 26px; grid-template-columns: repeat(2,1fr) }
@media (min-width:880px){ .trust-grid{ grid-template-columns: repeat(4,1fr) } }
.trust-item{ display:flex; gap:12px; align-items:center; min-width:0 }
.trust-item .ic{
  flex:none; width:42px; height:42px; border-radius:11px; background: var(--heat);
  display:flex; align-items:center; justify-content:center;
}
.trust-item svg{ width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.9 }
.trust-item span{ font-family:var(--display); font-weight:600; font-size:.98rem; color:#fff; line-height:1.3 }
.tagline{
  margin-top:26px; text-align:center; font-family:var(--display); font-weight:700;
  font-size:1.08rem; letter-spacing:.01em;
  background: var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Steps ---------- */
.steps{ display:grid; gap:22px; grid-template-columns:1fr; margin-top:36px }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr) } }
.step{
  display:flex; flex-direction:column; gap:10px; min-width:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px 24px; box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.step::before{ content:""; position:absolute; inset:0 0 auto; height:5px; background: var(--heat) }
.step .n{
  font-family:var(--display); font-weight:700; font-size:2.6rem; line-height:1;
  background: var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step p{ color:var(--ink-soft); font-size:1rem }
.closer{
  margin-top:32px; font-family:var(--display); font-weight:700; color:var(--navy-deep);
  font-size:1.15rem; display:flex; align-items:center; gap:12px;
}
.closer::before{ content:""; flex:none; width:5px; height:26px; border-radius:3px; background:var(--heat) }

/* ---------- Scheduler ---------- */
.sched-shell{
  margin-top:32px; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow: var(--shadow-lift); overflow:hidden;
}
.sched-shell .bar{
  background: var(--navy-deep); color:#fff; padding:15px 22px; display:flex; gap:11px; align-items:center;
  font-family:var(--display); font-weight:700; font-size:.97rem; border-bottom:4px solid var(--orange);
}
.sched-shell .bar svg{ width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.9 }
#sched-mount{ position:relative; min-height:620px }
#sched-mount iframe{ display:block; width:100%; height:100%; min-height:620px; border:0 }
/* Always visible. A cross-origin iframe that loads Acuity's own error page
   still fires "load", so the page can never be sure the scheduler is working.
   This guarantees a route to booking either way. */
.sched-help{
  border-top:1px solid var(--line); background: var(--wash);
  padding:13px 20px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  font-size:.94rem; color: var(--ink-soft);
}
.sched-help a{ color: var(--navy-soft); font-weight:600 }
.sched-help .sep{ color: var(--ink-faint) }
.sched-state{ padding:44px 22px; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center }
.sched-state .spinner{
  width:32px; height:32px; border:3px solid var(--wash-deep); border-top-color:var(--orange);
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .sched-state .spinner{ animation:none } }

/* ---------- Why ---------- */
.why-grid{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:36px }
@media (min-width:700px){ .why-grid{ grid-template-columns:repeat(2,1fr) } }
.why-item{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  background: var(--wash); border-left:5px solid var(--orange);
  border-radius:0 var(--r) var(--r) 0; padding:22px 24px;
}
.why-item h3{ display:flex; gap:11px; align-items:center }
.why-item h3 svg{ flex:none; width:22px; height:22px; stroke:var(--orange); fill:none; stroke-width:2 }
.why-item p{ color:var(--ink-soft); font-size:1rem }

/* ---------- Roof Lab band ---------- */
.shingles{ height:0 }
.lab{
  background:
    radial-gradient(900px 440px at 12% 10%, rgba(236,106,30,.3), transparent 60%),
    var(--navy-ink);
}
.lab .wrap{ display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:1fr; align-items:center }
@media (min-width:900px){ .lab .wrap{ grid-template-columns:1.02fr .98fr } }
.lab-copy{ display:flex; flex-direction:column; gap:18px; min-width:0; align-items:flex-start }
.lab-brand{ display:flex; align-items:center; gap:16px }
.lab-brand img{ width:76px; height:76px; flex:none; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)) }
.lab-brand .eyebrow{ margin:0 }
.lab .imgslot{ aspect-ratio:16/9 }
.lab-media{ position:relative; min-width:0 }
.lab-media .photo{ border-color: rgba(255,255,255,.2) }

/* ---------- Reviews ---------- */
.reviews{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:36px }
@media (min-width:820px){ .reviews{ grid-template-columns:repeat(3,1fr) } }
.review{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px;
  display:flex; flex-direction:column; gap:14px; min-width:0; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.review::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background: var(--heat) }
.review blockquote{ margin:0; font-size:1.03rem; color:var(--ink); line-height:1.55 }
.review .who{ margin-top:auto; font-size:.92rem; color:var(--ink-faint) }
.review .who b{ font-family:var(--display); color:var(--navy-deep); display:block; font-size:1rem; font-weight:700 }
.review.is-placeholder{ background: var(--flag); border-color: var(--flag-line) }
.ph-tag{
  align-self:flex-start; font-family:var(--display); font-weight:700; font-size:.68rem;
  letter-spacing:.1em; background:var(--flag-line); color:#4A3200; padding:4px 9px; border-radius:4px;
}

/* ---------- Related videos ---------- */
.videos{ display:grid; gap:22px; grid-template-columns:1fr; margin-top:34px }
@media (min-width:700px){ .videos{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .videos{ grid-template-columns:repeat(3,1fr) } }
.vcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; min-width:0; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vcard:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift) }
.vthumb{
  position:relative; aspect-ratio:16/9; max-width:100%; width:100%; border:0; padding:0;
  background: var(--navy-ink); cursor:pointer; display:block; overflow:hidden;
}
.vthumb img{ width:100%; height:100%; object-fit:cover; display:block }
.vthumb .alt{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  padding:18px; text-align:center; color:#9CB6D6; font-size:.9rem;
}
.vthumb.noimg .alt{ display:flex }
.vthumb.noimg img{ display:none }
.vthumb .play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; background: var(--heat);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.42); transition: transform .15s ease;
}
.vthumb:hover .play{ transform:translate(-50%,-50%) scale(1.08) }
.vthumb .play svg{ width:23px; height:23px; fill:#fff; margin-left:3px }
.vcard iframe{ width:100%; aspect-ratio:16/9; border:0; display:block }
.vtitle{
  padding:16px 18px; font-family:var(--display); font-weight:700; font-size:1rem;
  color:var(--navy-deep); line-height:1.34;
}

/* ---------- Reasons ---------- */
.reasons{ display:grid; gap:11px; grid-template-columns:1fr; margin-top:32px }
@media (min-width:560px){ .reasons{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:900px){ .reasons{ grid-template-columns:repeat(3,1fr) } }
.reason{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:14px 17px; display:flex; gap:11px; align-items:center; min-width:0; font-size:1rem;
  font-weight:600; color:var(--navy-deep);
}
.reason .tick{
  flex:none; width:24px; height:24px; border-radius:50%; background:var(--heat);
  display:flex; align-items:center; justify-content:center;
}
.reason svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:3 }
.reason .txt{ min-width:0 }

/* ---------- Service area ---------- */
.area-card{
  background: var(--navy); color:#fff; border-radius:16px;
  padding:clamp(28px,3.4vw,42px); display:flex; flex-direction:column; gap:14px;
  align-items:flex-start; box-shadow: var(--shadow-lift); position:relative; overflow:hidden;
}
.area-card::before{
  content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px;
  border-radius:50%; background: radial-gradient(circle, rgba(236,106,30,.38), transparent 68%);
}
.area-card h2{ color:#fff }
.area-card .lede{ color:#BCD0E8 }
.area-card .microcopy{ color:rgba(255,255,255,.72) }
.area-card .microcopy a{ color:var(--gold) }
.markets{ display:flex; flex-wrap:wrap; gap:9px; margin-top:4px }
.market{
  font-family:var(--display); font-weight:700; font-size:.92rem;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
  border-radius:999px; padding:8px 16px; color:#fff;
}

/* ---------- FAQ ---------- */
.faq{ margin-top:34px; border-top:2px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:21px 46px 21px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--navy-deep);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:4px; top:50%; width:28px; height:28px; margin-top:-14px;
  border-radius:50%; background:var(--heat);
  -webkit-mask: linear-gradient(#000,#000) center/11px 2.5px no-repeat, linear-gradient(#000,#000) center/2.5px 11px no-repeat;
  mask: linear-gradient(#000,#000) center/11px 2.5px no-repeat, linear-gradient(#000,#000) center/2.5px 11px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after{
  -webkit-mask: linear-gradient(#000,#000) center/11px 2.5px no-repeat;
  mask: linear-gradient(#000,#000) center/11px 2.5px no-repeat;
}
.faq .answer{ padding:0 0 24px; color:var(--ink-soft); max-width:72ch }
.faq .verify{
  display:inline-block; margin-top:10px; font-size:.82rem; background:var(--flag);
  border:1px solid var(--flag-line); color:var(--flag-ink); padding:6px 10px; border-radius:6px;
}

/* ---------- Final CTA ---------- */
.final{
  text-align:center;
  background:
    radial-gradient(800px 380px at 50% 0%, rgba(236,106,30,.3), transparent 62%),
    var(--navy-ink);
}
/* .final is a dark section but not .band--navy, so nothing here inherits the
   light-on-dark treatment. Every colour it needs is set explicitly. */
.final h2{ color:#fff }
.final .lede{ color:#BCD0E8 }
.final .btn--ghost{ border-color: rgba(255,255,255,.5); color:#fff }
.final .btn--ghost:hover{ background:#fff; color: var(--navy-deep) }
.final .wrap{ display:flex; flex-direction:column; gap:20px; align-items:center }
.final h2{ font-size: clamp(1.9rem, 4.4vw, 2.9rem) }
.final .lede{ text-align:center; margin-inline:auto }
.final .btn-row{ justify-content:center }
.final .sign{
  font-family:var(--display); font-weight:700; font-size:1.1rem; margin-top:10px;
  background: var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-ink); color:#8FA8C4; padding-block:42px; font-size:.92rem; border-top:5px solid var(--orange) }
.site-footer .wrap{ display:flex; flex-direction:column; gap:22px }
.site-footer a{ color:#CFE0EF; text-decoration:none }
.site-footer a:hover{ color:var(--gold) }
.foot-top{ display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between }
.foot-links{ display:flex; flex-wrap:wrap; gap:9px 20px }
.foot-social{ display:flex; gap:14px }
.foot-social svg{ width:21px; height:21px; fill:#8FA8C4; transition: fill .14s ease }
.foot-social a:hover svg{ fill:var(--gold) }
.foot-legal{ border-top:1px solid #1C3157; padding-top:20px; display:flex; flex-wrap:wrap; gap:6px 22px }

/* ---------- Mobile sticky CTA ---------- */
#sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
  background: var(--navy-deep); border-top:4px solid var(--orange);
  box-shadow:0 -6px 24px rgba(10,23,51,.34);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(115%); transition: transform .25s ease;
}
#sticky.on{ transform:translateY(0) }
#sticky .inner{
  display:flex; align-items:center; gap:12px;
  padding:11px max(14px, env(safe-area-inset-right,0px)) 11px max(14px, env(safe-area-inset-left,0px));
}
#sticky .msg{ font-family:var(--display); font-weight:700; font-size:.95rem; color:#fff; line-height:1.25; min-width:0 }
#sticky .btn{ flex:none; margin-left:auto }
#sticky .callbtn{
  flex:none; width:48px; height:48px; border:2px solid rgba(255,255,255,.34); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
}
#sticky .callbtn svg{ width:21px; height:21px; stroke:#fff; fill:none; stroke-width:1.9 }
@media (max-width:859px){ #sticky{ display:block } }
@media (prefers-reduced-motion: reduce){ #sticky{ transition:none } }

.reveal{ opacity:1 }
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease }
  .js .reveal.in{ opacity:1; transform:none }
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }