/*
  File: css/site-shell.css
  Purpose: Shared page shell — the fixed site header (brand, menu, CSS dropdown,
           mobile burger) and the footer — plus the design tokens and the
           self-hosted Archivo + Source Serif 4 faces (../fonts/, variable woff2,
           SIL OFL, latin + latin-ext). Loaded by BOTH layouts: layouts/home.php
           (header transparent over the hero, solid on scroll) and
           layouts/public.php (data-variant="page" = solid from the start,
           body.has-page-nav pads for the fixed bar; the footer sets its own
           serif/alignment so it looks the same over bootstrap/main.css, whose
           footer,.footer rule centres text and adds a top margin).
           The burger takes over at <=1040px: with eight menu items the row
           needs ~1030px before the brand and the two-word items start wrapping.
           Header classes are prefixed site-* because bootstrap-4.4.1.css and
           main.css already define .nav and .menu on the inner pages.
           Design source of truth: ~/sandbox-artifacts/ispecllc/landing-refresh/index.html.
           2026-09-13: footer is four columns (brand · Services · Quick Links · contact);
           .foot-services lists the hub + six landing pages in one column.
           The scroll-reveal section holds the hidden/shown states for
           [data-reveal] elements driven by js/site-reveal.js (home + About).
           The lead popup section styles the timed lead-capture <dialog>
           (Views/partials/lead_popup.php, driven by js/site-popup.js);
           its classes are prefixed lead-popup for the same reason.
  Used by: Views/layouts/home.php, Views/layouts/public.php
           (+ js/site-nav.js, js/site-popup.js, Views/partials/lead_popup.php)
  Last Modified: 2026-09-16 — the popup's verify panel names the masked EMAIL
           address (.lead-popup-verify-email) and carries the reCAPTCHA v2
           checkbox (.lead-popup-captcha, scaled down on phones so the fixed
           304x78 widget never overflows the sheet).
*/

/* ── self-hosted webfonts (../fonts/) ─────────────────── */
/* Archivo normal — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(../fonts/archivo-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo normal — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(../fonts/archivo-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 normal — latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/source-serif-4-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 normal — latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/source-serif-4-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 italic — latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/source-serif-4-italic-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 italic — latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/source-serif-4-italic-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --ink:#14201f;
  --ink-soft:#33413f;
  --muted:#5f6f6d;
  --ground:#f6f9f8;
  --paper:#ffffff;
  --line:#d9e5e2;
  --teal:#57c1b6;
  --teal-bright:#6fd3c8;
  --teal-deep:#2a8b82;
  --teal-tint:#e4f4f1;
  --band:#0f1a19;
  --display:"Archivo",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:76px;
}
.wrap{width:min(1180px,92vw);margin-inline:auto}
/* Phones/tablets: main.css gives .wrapper2 background-attachment:fixed, which sizes `cover` to the
   VIEWPORT rather than the band — the default bookshelf (blog, blog post, project detail) rendered as
   a zoomed slice ≤1000px and iOS ignores fixed anyway. Scroll attachment lets the photo scale with the
   band; desktop keeps the fixed parallax. Pages with their own photo already set scroll. */
@media (max-width:1000px){.wrapper2{background-attachment:scroll}}

/* ── site type — every public page inherits the landing's faces ──────
   The home page sets these in css/home.css; inner pages used to fall
   back to Bootstrap's system sans. Loaded after main.css, so these win
   at equal specificity; page rules that name a face still override.
   Added 2026-09-13 ("make the fonts match the landing"). */
body{font-family:var(--serif);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--display);font-stretch:112%;font-weight:700;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.btn,button{font-family:var(--display)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── nav ─────────────────────────────────────────────── */
.site-nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;color:#fff;transition:background .35s var(--ease),height .35s var(--ease),box-shadow .35s}
.site-nav.is-scrolled{background:rgba(15,26,25,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);height:62px;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;white-space:nowrap;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.brand img{width:38px;height:auto}
.site-menu{display:flex;align-items:center;gap:1.7rem;list-style:none;margin:0;padding:0;font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase}
.site-menu a{color:inherit;text-decoration:none;opacity:.85;white-space:nowrap;transition:opacity .2s}
.site-menu a:hover,.site-menu a:focus-visible{opacity:1}
.site-menu>li{position:relative}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:.55em}
.sub{position:absolute;top:100%;left:-1rem;min-width:210px;padding:.55rem 0;margin:.7rem 0 0;list-style:none;background:var(--paper);color:var(--ink);border-radius:4px;box-shadow:0 14px 40px rgba(10,20,19,.2);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:.5rem 1.1rem;opacity:1;letter-spacing:.08em}
.sub a:hover{background:var(--teal-tint);color:var(--teal-deep)}
.site-menu .cta a{border:1.5px solid rgba(255,255,255,.65);padding:.55rem 1.05rem;border-radius:999px;opacity:1;transition:.25s var(--ease)}
.site-menu .cta a:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:inherit}
/* mobile-only submenu toggles (Services / Resources accordions) — hidden on desktop where hover opens .sub */
.sub-toggle{display:none}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:.3s var(--ease)}
.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.js .site-nav{animation:fade 1s ease-out .3s both}
.site-menu a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;text-decoration-color:var(--teal)}
/* inner pages: no hero underneath, so the bar is solid from the start */
.site-nav[data-variant="page"],.site-nav[data-variant="page"].is-scrolled{background:rgba(15,26,25,.96);box-shadow:0 1px 0 rgba(255,255,255,.06)}
body.has-page-nav{padding-top:var(--nav-h)}
.js .site-nav[data-variant="page"]{animation:none}

/* ── scroll reveal (js/site-reveal.js adds .is-in) ───── */
.js [data-reveal]{opacity:0;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-reveal="right"]{transform:translateX(90px)}
.js [data-reveal="left"]{transform:translateX(-90px)}
.js [data-reveal="up"]{transform:translateY(34px)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ── footer ─────────────────────────────────────────── */
.footer{font-family:var(--serif);font-size:1.0625rem;line-height:1.7;text-align:left;margin:0;background:var(--band);color:rgba(255,255,255,.78);padding-top:4.5rem;border-top:1px solid rgba(87,193,182,.28)}
.foot-grid{display:grid;grid-template-columns:1.45fr 1fr 1.25fr 1.1fr;gap:3rem 2.5rem;align-items:start}
.foot-brand .brand{color:#fff;font-size:1.4rem}
.foot-brand .brand img{width:46px}
.foot-brand .tag{font-style:italic;font-size:1.2rem;color:#fff;margin:1.1rem 0 1.5rem}
.footer h4{font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:0 0 1.1rem;font-stretch:100%}
.footer ul{list-style:none;margin:0;padding:0}
.footer a{text-decoration:none;color:rgba(255,255,255,.78);transition:color .2s}
.footer a:hover{color:var(--teal)}
.foot-links ul{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem}
.foot-services ul{grid-template-columns:1fr}
.foot-contact{padding-top:2.6rem;border-left:1px solid rgba(255,255,255,.08);padding-left:2.2rem}
.foot-contact ul{display:grid;gap:.45rem}
.foot-contact li:first-child{color:#fff;font-weight:600}
.socials{display:flex;gap:.6rem}
.socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;color:#fff;transition:.25s var(--ease)}
.socials a:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.socials svg{width:17px;height:17px}
.foot-bottom{margin-top:3.5rem;padding:1.3rem 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}


@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── in-copy links ──────────────────────────────────── */
/* body-text links to other site pages (landing pages, guides, contact); main.css
   paints bare <a> white on the inner pages, so copy links carry this class */
.copy-link{color:var(--teal-deep);text-decoration:underline;text-decoration-color:rgba(42,139,130,.35);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.copy-link:hover{color:var(--teal-deep);text-decoration-color:var(--teal-deep)}

/* ── lead popup ─────────────────────────────────────── */
/* Timed lead-capture dialog: Views/partials/lead_popup.php + js/site-popup.js.
   Inner pages load bootstrap-4.4.1.css and main.css BEFORE this file, so every
   selector is prefixed lead-popup and the card/fields set their own font,
   margin and display rather than inheriting whatever those sheets decided. */
.lead-popup[open]{position:fixed;inset:0;display:grid;place-items:center;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:1rem;border:0;background:transparent;color:var(--ink);overflow:auto}
.lead-popup::backdrop{background:rgba(15,26,25,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* the form/thanks swap relies on [hidden]; our own display rules would beat the
   browser default, so restate it inside the popup */
.lead-popup [hidden]{display:none}

.lead-popup-card{position:relative;width:min(480px,100%);max-height:92dvh;overflow:auto;background:var(--paper);color:var(--ink);font-family:var(--serif);border-radius:14px;padding:1.75rem;box-shadow:0 30px 70px rgba(10,20,19,.32);animation:lead-rise .35s var(--ease)}
.lead-popup-card:focus{outline:none}
.lead-popup-card h2{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.25;color:var(--ink);margin:0 2.2rem .55rem 0}
#lead-popup-lede{font-size:1rem;line-height:1.55;color:var(--ink-soft);margin:0 0 1.35rem}

.lead-popup-close{position:absolute;top:.55rem;right:.55rem;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-family:var(--display);font-size:1.4rem;line-height:1;cursor:pointer;transition:.2s var(--ease)}
.lead-popup-close:hover{background:var(--ground);color:var(--ink)}

.lead-popup-form{display:grid;gap:.85rem}
.lead-popup-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.lead-popup-field{display:grid;gap:.3rem}
.lead-popup-field label{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.lead-popup-form input[type="text"],.lead-popup-form input[type="email"],.lead-popup-form input[type="tel"],.lead-popup-form select,.lead-popup-form textarea{font-family:inherit;font-size:1rem;line-height:1.4;color:var(--ink);margin:0;width:100%;padding:.6rem .75rem;border:1px solid var(--line);background:var(--ground);border-radius:8px;box-shadow:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.lead-popup-form textarea{resize:vertical}
.lead-popup-form input[type="text"]:focus,.lead-popup-form input[type="email"]:focus,.lead-popup-form input[type="tel"]:focus,.lead-popup-form select:focus,.lead-popup-form textarea:focus{outline:none;border-color:var(--teal-deep);box-shadow:0 0 0 3px var(--teal-tint)}
/* off-screen instead of display:none — a hidden field bots can still fill */
.lead-popup-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}

.lead-popup-consent{display:flex;align-items:flex-start;gap:.55rem;margin:.15rem 0 0;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
.lead-popup-consent input{width:auto;margin:.2rem 0 0;flex:0 0 auto}
.lead-popup-consent label{margin:0}
.lead-popup-error{margin:0;font-size:.95rem;line-height:1.45;color:#9b2c2c}

.lead-popup-submit{justify-self:start;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;padding:.9rem 1.45rem;border:0;border-radius:999px;background:var(--teal);color:var(--ink);cursor:pointer;transition:.25s var(--ease)}
.lead-popup-submit:hover{background:var(--teal-bright)}
.lead-popup-form[data-state="submitting"] .lead-popup-submit{opacity:.6;pointer-events:none}
.lead-popup-alt{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.lead-popup-alt a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}

.lead-popup-thanks{display:grid;gap:.85rem;justify-items:start}
.lead-popup-thanks p{margin:0;font-size:1rem;line-height:1.55;color:var(--ink-soft)}

/* merged popup — scheduler row above the message fields (Views/partials/lead_popup.php
   renders it only when scheduler_enabled(); js/site-popup.js fills the pills from
   book/next.json). Selected state is aria-checked on the pill, not a class. */
.lead-popup-schedule{display:grid;gap:.6rem;padding:0 0 .25rem;margin:0}
.lead-popup-schedule h3{margin:0;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.3;color:var(--ink)}
.lead-popup-schedule-lede{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.lead-popup-slots{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.lead-popup-slots:empty{display:none}
.lead-popup-slot{display:inline-flex;align-items:center;padding:.45rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--teal-deep);font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.02em;line-height:1.2;cursor:pointer;transition:.2s var(--ease)}
.lead-popup-slot:hover{border-color:var(--teal);background:var(--teal-tint)}
.lead-popup-slot[aria-checked="true"]{background:var(--teal);border-color:var(--teal);color:var(--band)}
.lead-popup-slots-note{margin:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.lead-popup-pickdate{justify-self:start;font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.lead-popup-divider{display:flex;align-items:center;gap:.75rem;margin:.35rem 0;font-family:var(--display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lead-popup-divider::before,.lead-popup-divider::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}

/* the code step the booking path swaps in for the form */
/* the v2 checkbox is a fixed 304x78 iframe — centre it, and scale it down on
   phones so it can never push the sheet sideways */
.lead-popup-captcha{display:flex;justify-content:center}

.lead-popup-verify{display:grid;gap:.85rem}
.lead-popup-verify h2{margin:0 2.2rem .1rem 0}
.lead-popup-verify-lede{margin:0;font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.lead-popup-verify-email{font-family:var(--display);font-weight:700;color:var(--ink);word-break:break-all}
.lead-popup-verify input[type="text"]{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.3em;max-width:11rem;width:100%;margin:0;padding:.6rem .75rem;border:1px solid var(--line);background:var(--ground);border-radius:8px;color:var(--ink)}
.lead-popup-verify input[type="text"]:focus{outline:none;border-color:var(--teal-deep);box-shadow:0 0 0 3px var(--teal-tint)}
.lead-popup-verify-error{margin:0;font-size:.95rem;line-height:1.45;color:#9b2c2c}
.lead-popup-verify-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem}
.lead-popup-verify[data-state="submitting"] .lead-popup-submit{opacity:.6;pointer-events:none}
.lead-popup-textlink{padding:0;border:0;background:none;font-family:var(--serif);font-size:.95rem;color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lead-popup-textlink:hover{color:var(--ink)}
.lead-popup-textlink[disabled]{opacity:.5;cursor:default}

@keyframes lead-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .foot-contact{grid-column:1 / -1;padding:0;border:0;border-top:1px solid rgba(255,255,255,.08);padding-top:2rem}
}
@media (max-width:1040px){
  .burger{display:block}
  .site-menu{position:fixed;inset:var(--nav-h) 0 0 0;overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;background:rgba(15,26,25,.97);padding:.6rem 4vw 1.4rem;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:.3s var(--ease)}
  .is-scrolled .site-menu{inset:62px 0 0 0}
  .is-open .site-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .is-open{background:rgba(15,26,25,.97)}
  .site-menu a{display:block;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
  /* visibility:inherit, not visible — an explicit visible here made the closed menu's
     dropdown links hit-testable through the opacity-0 panel (taps on the page landed on
     Kitchen Remodeling / Warranty…; found via the portfolio dock test 09-13) */
  /* Services / Resources collapse to accordions: parent link + chevron on one row, .sub hidden until data-open */
  .has-sub{display:flex;flex-wrap:wrap;align-items:center}
  .has-sub>a{flex:1 1 auto}
  .sub-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:none;color:inherit;cursor:pointer;opacity:.85}
  .sub-toggle svg{transition:transform .25s var(--ease)}
  .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .sub{display:none;flex:1 1 100%;position:static;opacity:1;visibility:inherit;transform:none;background:none;color:inherit;box-shadow:none;padding:0 0 .4rem 1rem;margin:0}
  .has-sub[data-open="true"] .sub{display:block}
  .sub a{padding:.6rem 0;color:rgba(255,255,255,.7)}
  .sub a:hover{background:none;color:var(--teal)}
  .has-sub>a::after{display:none}
  .site-menu .cta a{display:inline-flex;margin-top:.9rem;border-bottom:1.5px solid rgba(255,255,255,.65)}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  /* popup becomes a bottom sheet on phones */
  .lead-popup[open]{place-items:end center;padding:0}
  .lead-popup-card{width:100%;border-radius:14px 14px 0 0;max-height:92dvh;overflow:auto;padding-bottom:max(1.25rem,env(safe-area-inset-bottom))}
  .lead-popup-row{grid-template-columns:1fr}
  /* two times plus "Pick a date" is all the room a phone has above the fields */
  .lead-popup-slots li:nth-child(n+3){display:none}
  .lead-popup-captcha{justify-content:flex-start;transform:scale(.85);transform-origin:top left}
}
@media (prefers-reduced-motion:reduce){
  .js .site-nav{animation:none;opacity:1;transform:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .site-menu,.burger span,.sub-toggle svg{transition:none}
  .lead-popup-card,.lead-popup::backdrop{animation:none}
}

/* ── .site-cta — dark contact band at the foot of a page ──────────
   Markup lives in Views/partials/site_cta.php (services, hub, blog post,
   sitemap) and as inline copies in pricing/faq/warranty/glossary_public
   (About still carries its own .about-cta). Display heading, one line of
   copy, a teal pill button to /contact and a phone link beside it, plus an
   optional .site-cta-note under the buttons. The base a{color:#fff} /
   a:hover rules in main.css are overridden in both states on purpose.
   Hoisted from css/pricing.css 2026-09-13; partial + note 2026-09-14. */
.site-cta {
  width: min(1180px, 92vw);
  margin: clamp(3.5rem, 7vw, 6rem) auto;
  padding: 2.75rem 1.75rem;
  border-radius: 8px;
  background: var(--band);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}
.site-cta h2 {
  color: #fff;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.site-cta p {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 1.5rem;
}
.site-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem 1.5rem;
}
.site-cta-btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  background: var(--teal);
  border: 1px solid var(--teal);
  color: var(--band);
  font-family: var(--display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.site-cta .site-cta-btn:hover,
.site-cta .site-cta-btn:focus {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: var(--band);
  text-decoration: none;
}
.site-cta-alt {
  color: rgba(255, 255, 255, .85);
  font-family: var(--serif);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}
.site-cta .site-cta-alt:hover,
.site-cta .site-cta-alt:focus {
  color: var(--teal-bright);
  text-decoration-color: var(--teal-bright);
}
/* small line under the buttons (sibling links on the service pages);
   overrides the generic .site-cta p margin/size */
.site-cta .site-cta-note {
  font-size: .95rem;
  color: rgba(255, 255, 255, .7);
  margin: 1.35rem auto 0;
}
.site-cta .site-cta-note a {
  color: var(--teal-bright);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}
.site-cta .site-cta-note a:hover,
.site-cta .site-cta-note a:focus {
  color: #fff;
  text-decoration-color: #fff;
}

@media (max-width: 560px) {
  .site-cta {
    padding: 2.25rem 1.25rem;
  }
}