/* ===== Persistent "Talk to a Remodeling Expert" AI search — shared component =====
   The bar (.ai-ask) is injected INTO the hero's .cta-row so it sits inline with
   the CTA button; the answer panel (.ai-ans) is injected right AFTER the row so
   it can go full width. Self-contained classes — no reliance on page CSS.
   Link this AFTER the page's inline <style>. Uses the site's design tokens. */
@keyframes aisSparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(10deg)}}
@keyframes aisDot{0%,80%,100%{transform:scale(.4);opacity:.5}40%{transform:scale(1);opacity:1}}
@keyframes aisPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}50%{box-shadow:0 0 0 7px rgba(192,57,43,0)}}

/* ---- the bar (sits inline in .cta-row) ---- */
.ai-ask{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line-strong);border-radius:999px;padding:6px 6px 6px 18px;width:400px;max-width:100%;transition:width .35s var(--ease),border-color .25s var(--ease),box-shadow .35s var(--ease);box-shadow:0 2px 0 rgba(40,30,15,.04)}
.ai-ask:hover{border-color:var(--ink-soft)}
.ai-ask:focus-within{width:560px;border-color:var(--navy);box-shadow:0 14px 36px -14px rgba(13,84,140,.42),0 0 0 4px rgba(13,84,140,.08)}
.ai-ask .ha-spark{display:inline-flex;align-items:center;justify-content:center;color:var(--warm-accent);flex-shrink:0;animation:aisSparkle 2.6s ease-in-out infinite}
.ai-ask .ha-spark svg{width:18px;height:18px}
.ai-ask input{flex:1;min-width:0;border:none;background:none;font-family:var(--sans);font-size:1rem;color:var(--ink);padding:11px 4px;outline:none}
.ai-ask input::placeholder{color:var(--ink-soft)}
.ai-ask .ha-mic{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;background:rgba(13,84,140,.08);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;transition:background .2s var(--ease),color .2s var(--ease)}
.ai-ask .ha-mic:hover{background:rgba(13,84,140,.16)}
.ai-ask .ha-mic svg{width:17px;height:17px}
.ai-ask .ha-mic.listening{background:#C0392B;color:#fff;animation:aisPulse 1.2s ease-in-out infinite}
.ai-ask .ha-btn{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:filter .2s var(--ease),transform .2s var(--ease)}
.ai-ask .ha-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.ai-ask .ha-btn svg{width:18px;height:18px}
.ai-ask .ha-btn.loading{pointer-events:none;opacity:.7}
@media(max-width:640px){.ai-ask,.ai-ask:focus-within{width:100%}}

/* ---- expanding answer panel (full width, below the CTA row) ---- */
.ai-ans{width:100%;max-width:780px;max-height:0;overflow:hidden;background:#fff;border:1px solid transparent;box-shadow:0 14px 36px -22px rgba(40,30,15,0);opacity:0;text-align:left;border-radius:4px;transition:max-height .55s var(--ease),margin-top .35s var(--ease),padding .35s var(--ease),opacity .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.ai-ans.show{max-height:1600px;margin-top:20px;padding:24px 28px 22px;opacity:1;border-color:var(--line-strong);box-shadow:0 14px 36px -22px rgba(40,30,15,.32)}
.ai-ans .q-echo{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow-ink,#8F6E42);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-ans .q-echo .q-text{color:var(--ink);text-transform:none;letter-spacing:.01em;font-style:normal;font-weight:400;font-size:1rem;font-family:var(--serif)}
.ai-ans .a-body{font-size:.98rem;color:var(--ink);line-height:1.7;white-space:pre-wrap}
.ai-ans .a-body.err{color:#9B2C2C}
/* answer shape (2026-10-06): short answer, a line of detail, then site pages to read more */
.ai-ans .a-body p{margin:0}
.ai-ans .a-body .a-lead{font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.6}
.ai-ans .a-body .a-more{margin-top:8px;font-size:.95rem;color:var(--ink-soft);line-height:1.65}
.ai-ans .a-loading{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:.92rem;padding:2px 0}
.ai-ans .ask-dots{display:inline-flex;gap:5px}
.ai-ans .ask-dots span{width:8px;height:8px;border-radius:50%;background:#1E527E;animation:aisDot 1.4s infinite ease-in-out both}
.ai-ans .ask-dots span:nth-child(1){animation-delay:-.32s}
.ai-ans .ask-dots span:nth-child(2){animation-delay:-.16s}

/* ---- follow-up "keep exploring" chips ---- */
/* radius = half a one-line chip's height: a pill on one line, a squarer rounded box when a long page name wraps (2026-10-26) */
.ai-ans .ai-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--navy);background:rgba(13,84,140,.07);border:1px solid rgba(13,84,140,.16);border-radius:18px;padding:8px 14px;text-align:left;line-height:1.35;cursor:pointer;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.ai-ans .ai-chip:hover{background:rgba(13,84,140,.13);border-color:rgba(13,84,140,.3);transform:translateY(-1px)}
.ai-ans .ai-chip svg{width:13px;height:13px;flex-shrink:0}

/* ---- the follow-up field: stays open under the chips so the panel reads as a
        conversation rather than a one-shot search result ---- */
.ai-ans .ai-more{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.ai-ans .ai-more input{flex:1;min-width:0;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:999px;padding:12px 18px;outline:none;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.ai-ans .ai-more input::placeholder{color:var(--ink-soft)}
.ai-ans .ai-more input:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(13,84,140,.1)}
.ai-ans .ai-more button{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:filter .2s var(--ease),transform .2s var(--ease)}
.ai-ans .ai-more button:hover{filter:brightness(1.1);transform:translateY(-1px)}
.ai-ans .ai-more button svg{width:18px;height:18px}
/* its prompt and the common questions slide through in place of a placeholder while it is empty (ai-search.js, 2026-11-02) */
.ai-ans .ai-more-field{position:relative;flex:1;min-width:0;display:flex}
.ai-ans .ai-more-ph{position:absolute;top:0;bottom:0;left:19.5px;right:18px;overflow:hidden;pointer-events:none;font-family:var(--sans);font-size:.95rem;color:var(--ink-soft)}
.ai-ans .ai-more-field.has-text .ai-more-ph{display:none}
.ai-ans .ai-more-ph .ph-line{position:absolute;left:0;right:0;top:50%;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(30%);transition:transform .45s var(--ease),opacity .3s var(--ease)}
.ai-ans .ai-more-ph .ph-line.in{opacity:1;transform:translateY(-50%);transition-delay:.15s}   /* enters as the old one is nearly gone */
.ai-ans .ai-more-ph .ph-line.out{opacity:0;transform:translateY(-120%);transition-duration:.35s,.18s;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.ai-ans .ai-more-ph .ph-line{transition:none}}
@media(max-width:480px){   /* a phone-width bar fits ~20 characters: a question wraps to two lines instead of losing its end */
  .ai-ans .ai-more-ph{font-size:.84rem}
  .ai-ans .ai-more-ph .ph-line{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* booking button right under the answer, beside the related pages (2026-10-26; was a footer line at the bottom;
   Paul's "Every project is different..." line over it removed 2026-11-02) */
.ai-ans .a-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;margin:20px 0 4px}   /* booking button + the most relevant page, one row */
/* 2026-11-02: the button is the size of the page chip beside it (Paul felt it was too much on every answer) */
.ai-ans .ai-consult-btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));
  color:#fff !important;font-weight:600;font-size:.86rem;line-height:1.35;padding:8px 14px;border:1px solid transparent;border-radius:18px;
  cursor:pointer;text-decoration:none;transition:filter .2s ease,transform .2s ease;box-shadow:0 6px 14px -10px rgba(11,44,73,.5)}
.ai-ans .ai-consult-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ai-ans .ai-consult-btn svg{width:13px;height:13px;flex-shrink:0}
/* "Read more here:" leads the page chip's own text (Paul 2026-11-02: the chip alone was unclear) */
.ai-ans .ai-chip .a-read-lbl{font-weight:400;opacity:.8}

/* nav sparkle button + header popover (2026-09-24) */
.ai-nav-li{display:flex;align-items:center}
.menu .ai-nav-btn,.ai-nav-btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;width:180px;height:40px;
  padding:0 16px 0 14px;border:1px solid #DEDAD1;border-radius:999px !important;background:#fff;color:var(--navy);cursor:text;
  box-shadow:inset 0 1px 2px rgba(31,26,20,.06);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.menu .ai-nav-btn:hover,.menu .ai-nav-btn.is-on,.ai-nav-btn:hover,.ai-nav-btn.is-on{background:#fff;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(10,82,139,.10)}
.ai-nav-lbl{font-family:inherit;font-size:.88rem;font-weight:400;color:var(--ink-soft);line-height:1;white-space:nowrap}
.menu .ai-nav-li .ai-nav-btn svg,.ai-nav-btn svg{width:24px !important;height:24px !important;display:block}
/* the provided glyph, recolored to brand navy via filter (black first, then to var(--navy)) */
.menu .ai-nav-li .ai-nav-btn .ai-nav-ic,.ai-nav-btn .ai-nav-ic{width:16px !important;height:16px !important;display:block;object-fit:contain;flex:none;
  filter:brightness(0) saturate(100%) invert(23%) sepia(64%) saturate(1900%) hue-rotate(190deg) brightness(94%) contrast(96%)}
.menu .ai-nav-li .ai-nav-btn{color:var(--navy) !important}
.ai-nav-pop{position:fixed;top:80px;left:auto;right:22px;z-index:140;width:min(660px,94vw);background:var(--paper-soft);
  border:1px solid var(--line-strong);border-radius:16px;padding:20px 20px 14px;box-shadow:0 30px 70px -28px rgba(15,25,40,.55);display:none}
.ai-nav-pop.show{display:block}
.ai-nav-pop .anp-tail{position:absolute;top:-8px;width:15px;height:15px;background:var(--paper-soft);
  border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);transform:rotate(45deg)}
.ai-nav-pop .anp-intro{margin:0 0 14px;font-size:.95rem;color:var(--ink);line-height:1.5}
.ai-nav-pop .ai-ask{width:100%}
.ai-nav-pop .ai-ans{position:static;margin-top:12px}
.ai-nav-pop .anp-examples{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px}
.ai-nav-pop .anp-q{font-family:inherit;font-size:.86rem;color:var(--ink);background:#fff;border:1px solid var(--line-strong);
  border-radius:999px;padding:8px 15px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.ai-nav-pop .anp-q:hover{border-color:var(--navy);background:rgba(10,82,139,.05)}
.ai-nav-pop.asked .anp-examples{display:none}
.ai-nav-pop .anp-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-soft);text-align:center}
@media(max-width:980px){.ai-nav-pop{top:68px}}
/* keep menu labels on one line now that the nav holds a search field;
   .nav-right clears the absolutely-positioned heart (.mb-account-edge) under 1420px */
@media(min-width:981px){.menu>li>a,.menu>li>button{white-space:nowrap}.menu>li>a,.menu>li>button:not(.ai-nav-btn){padding-left:12px;padding-right:12px}}
@media(min-width:981px) and (max-width:1480px){.menu>li>a,.menu>li>button:not(.ai-nav-btn){padding-left:11px;padding-right:11px}}
@media(min-width:981px) and (max-width:1420px){.nav-right{margin-right:46px}}
@media(min-width:981px) and (max-width:1190px){.menu .ai-nav-btn,.ai-nav-btn{width:140px}.nav-inner{margin-left:18px}.menu>li>a,.menu>li>button:not(.ai-nav-btn){padding-left:7px;padding-right:7px}}
@media(min-width:981px) and (max-width:1040px){.nav-inner{margin-left:10px;gap:20px}.menu>li>a,.menu>li>button:not(.ai-nav-btn){padding-left:5px;padding-right:5px}}
@media(min-width:981px) and (max-width:1010px){.menu>li>a,.menu>li>button:not(.ai-nav-btn){padding-left:4px;padding-right:4px}}

/* site-wide (2026-10-06): the closed mobile menu sits off-screen to the right, and phone
   browsers widened the whole page to fit it (390px screen -> 780px layout), so pages could
   be dragged sideways and anything centered (popups) landed off-center. `clip` cuts that
   overflow without creating a scroll container, so the sticky header keeps working. */
html,body{overflow-x:clip}

/* Ask field centered between "Contact" and the phone number (2026-10-12).
   The menu stretches to the phone link and the field's auto margins split the
   leftover space evenly; the 16px padding keeps a minimum gap on tight laptops.
   The nav-inner gap is zeroed so it doesn't push the field off-center. */
@media(min-width:981px){.nav-inner{column-gap:0}.menu{flex:1 1 auto}.menu>.ai-nav-li{margin-left:auto;margin-right:auto;padding:0 16px}}
@media(min-width:981px) and (max-width:1060px){.menu>.ai-nav-li{padding:0 8px}}

/* footer credit (2026-10-14): right corner of the copyright row; stacks under it on phones */
.ft-bottom .ft-credit{text-align:right;font-size:.82rem;color:#9E9075}
.ft-bottom .ft-credit a{color:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.ft-bottom .ft-credit a:hover{color:#fff}
@media(max-width:640px){.ft-bottom .ft-credit{text-align:left}}

/* Mobile header (2026-10-15; breakpoint 980 since the 921-980 band fix): the heart and the new tap-to-call icon line up with the menu
   button. The header has 14px top padding on phones, so "50%" of the header sat 7px above the
   bar's center; offset by that. The phone icon sits left of the heart (or in its slot when a
   page has no heart). */
.mb-call-edge,.mb-search-edge{display:none}
@media(max-width:980px){
  .mb-account-edge{top:calc(50% + 7px)}
  .mb-call-edge{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:calc(50% + 7px);right:106px;
    transform:translateY(-50%);z-index:120;width:42px;height:42px;border-radius:50%;color:var(--ink);text-decoration:none}
  .mb-call-edge.is-solo{right:64px}
  /* magnifying glass: opens the shared Ask popup (ai-search.js) */
  .mb-search-edge{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:calc(50% + 7px);right:148px;
    transform:translateY(-50%);z-index:120;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
  .mb-search-edge.is-solo{right:106px}
  .mb-search-edge svg{width:21px;height:21px;display:block}
  .mb-search-edge.is-on,.mb-search-edge:active{background:rgba(10,82,139,.09);color:var(--navy)}
  .mb-call-edge svg{width:20px;height:20px;display:block}
  .mb-call-edge:active{background:rgba(10,82,139,.09)}
}

/* Mobile menu (2026-10-15): a clean dropdown list in the phone drawer instead of stacked
   mega-menu cards. Each group is closed until tapped (nav-mobile.js keeps one open at a time);
   inside, plain text links with a thin gold rule. Desktop mega menus are untouched. */
@media(max-width:980px){
  .nav-inner{background:#FCFAF6;padding-top:108px}
  .menu>li{border-bottom:1px solid rgba(60,45,30,.10)}
  .menu>li>a,.menu>li>.dd-btn{padding:17px 4px;font-size:1.1rem;font-weight:500;color:var(--ink);background:none !important;border-radius:0}
  .menu>li>.dd-btn{color:var(--ink) !important}   /* phones keep :hover after a tap; only the OPEN group is blue */
  .menu>.has-mega.open>.dd-btn{color:var(--navy) !important}
  .menu .mega,.menu .mega .mega-layout,.menu .mega .mega-tabs{background:none !important;box-shadow:none !important}
  .menu>li.ai-nav-li{border-bottom:0;padding:22px 0 6px}
  .menu .ai-nav-li .ai-nav-btn{width:100%}
  .menu .mega .tabs-head,.menu .mega .mega-preview,.menu .mega .mt-sub,.menu .mega .mt-arrow{display:none !important}
  .menu .mega{border:0 !important}   /* a sitewide !important 1px border left a 2px line under every closed group */
  .menu .mega .mega-layout{display:block}
  .menu .has-mega.open .mega{padding:0 !important;max-height:520px}
  .menu .mega .mega-tabs{display:flex;flex-direction:column;gap:0;margin:0 0 14px 6px;padding-left:16px;border-left:2px solid rgba(184,150,104,.45)}
  .menu .mega .mtab{display:block;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;padding:11px 0 !important}
  .menu .mega .mtab .mt-label{font-family:var(--sans) !important;font-size:1rem !important;font-weight:400 !important;color:#5A4F40 !important;line-height:1.3}
  .menu .mega .mtab:active .mt-label,.menu .mega .mtab:focus-visible .mt-label{color:var(--navy) !important}
}

/* very small phones (≤360px): four header icons + logo need a little less room */
@media(max-width:360px){
  .brand .logo{height:35px !important}
  .mb-account-edge,.mb-call-edge,.mb-search-edge{width:36px !important;height:36px !important}
  .mb-call-edge{right:100px}
  .mb-search-edge{right:136px}
  .mb-call-edge.is-solo{right:64px}
  .mb-search-edge.is-solo{right:100px}
}

/* Global footer (2026-10-15): the footer markup now comes from _partials/footer.html on every page,
   with five columns (brand, Services, Resources, Service Areas, Contact). The page stylesheets still
   say four, so the desktop grid is set here; the 2-column (<=920px) and 1-column (<=560px) phone
   layouts stay with each page. */
@media(min-width:921px){footer.site-foot .ft-grid{grid-template-columns:1.4fr 1fr 1fr .9fr 1fr}}

/* ===== Global component: 3 Ways to Work With Us (_partials/sections/ways.html, synced by _partials/sync.py).
   Moved here from index.html 2026-10-15 so every page that has the section looks identical. ===== */
/* "3 Ways to Work With Us" + "How To Get Started" — added 2026-08-31 from
   Paul's homepage rewrite. Copy is his, verbatim. */
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1140px;margin:0 auto}
.way-card{background:#fff;border:1px solid var(--navy);border-radius:var(--r-md);padding:28px 26px;display:flex;flex-direction:column}
.way-card .wc-num{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.way-card h3{font-family:var(--serif);font-size:1.36rem;font-weight:400;color:var(--ink);margin-bottom:10px;line-height:1.25}
.way-card p{color:var(--ink-soft);line-height:1.62;font-size:.97rem;margin:0}
.way-card.is-lead{background:#fff;border-color:var(--navy)}
.way-card.is-lead .wc-num{color:var(--navy)}
/* card buttons to each option's page (2026-10-14) */
.way-card .wc-btn{margin-top:auto;align-self:flex-start;padding:12px 22px;font-size:.92rem}
.ways-grid .way-card p{margin-bottom:24px}
/* 3 Ways explainer video (2026-10-14): click-to-play with sound; captions are burned in */
.ways-video{max-width:1140px;margin:34px auto 0}
.wv-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#EFE7DA;border:8px solid #fff;box-shadow:0 0 0 1px var(--line),var(--shadow)}
@media(max-width:640px){.wv-frame{border-width:5px}}
.wv-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wv-play{position:absolute;inset:0;z-index:2;display:block;width:100%;padding:0;border:0;border-radius:0;cursor:pointer;background:none;text-align:center;font-family:var(--sans);color:inherit}
/* cover (2026-10-14): calm cream card in the video's own end-card style, so the frame isn't busy before play */
.wv-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;
  background:radial-gradient(ellipse 70% 60% at 50% 40%,#FBF8F2 0%,rgba(251,248,242,0) 70%),linear-gradient(160deg,#F6F1E8,#ECE3D4)}
.wv-corner{position:absolute;width:64px;height:64px;border:3px solid;pointer-events:none}
.wv-tl{top:34px;left:38px;border-color:#66B73C;border-right:0;border-bottom:0}
.wv-br{right:38px;bottom:34px;border-color:var(--navy);border-left:0;border-top:0}
.wv-eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow-ink,#8F6E42)}
.wv-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.wv-title em{color:var(--navy);font-style:normal}
.wv-sub{font-size:1rem;color:var(--ink-soft);margin-top:-2px}
.wv-btn{margin-top:14px;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));box-shadow:0 20px 44px -16px rgba(6,60,102,.75),0 0 0 9px rgba(255,255,255,.7);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wv-btn svg{width:38px;height:38px}
.wv-play:hover .wv-btn,.wv-play:focus-visible .wv-btn{transform:scale(1.06);box-shadow:0 24px 50px -16px rgba(6,60,102,.85),0 0 0 12px rgba(255,255,255,.75)}
.wv-play:focus-visible{outline:none}
.wv-frame.is-playing .wv-play{display:none}
@media(max-width:640px){
  .wv-cover{gap:8px;padding:20px}
  .wv-corner{width:34px;height:34px;border-width:2px}
  .wv-tl{top:16px;left:16px} .wv-br{right:16px;bottom:16px}
  .wv-eyebrow{font-size:.6rem}
  .wv-sub{display:none}
  .wv-btn{margin-top:8px;width:64px;height:64px;box-shadow:0 14px 30px -12px rgba(6,60,102,.8),0 0 0 6px rgba(255,255,255,.7)}
  .wv-btn svg{width:26px;height:26px}
}
.ways-foot{max-width:760px;margin:30px auto 0;text-align:center;color:var(--ink-soft);line-height:1.65;font-size:1.02rem}
@media(max-width:900px){.ways-grid{grid-template-columns:1fr}}
/* "You are here" on the card for the current page (service pages) */
.way-card .wc-here{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:12px 0 2px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow-ink,#8F6E42)}
.way-card .wc-here::before{content:"";width:18px;height:1px;background:currentColor}

/* Hero call to action (client 2026-10-20): ONE button with its note under it, from _partials/hero-cta.html.
   Three classes so it wins over the older two-button hero rules (.hero-copy .btn-with-note stretches the button). */
.cta-row .btn-with-note.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:11px;max-width:440px}
.cta-row .btn-with-note.hero-cta .btn{justify-content:center}
.cta-row .btn-with-note.hero-cta .btn-note{font-size:.86rem;font-style:normal;line-height:1.5;color:var(--ink-soft);text-align:left;white-space:normal}
@media(max-width:600px){.cta-row .btn-with-note.hero-cta{align-items:stretch;max-width:none;width:100%}}

/* Booking popup, date + times side by side like Calendly (client 2026-10-21; markup _partials/booking.html).
   Scoped to #bookingModal so it wins over the older per-page copies of the popup styles. */
#bookingModal .bk-card{transition:max-width .25s var(--ease)}
#bookingModal .bk-card.is-wide{max-width:820px}
#bookingModal .bk-pick{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px;align-items:stretch}
#bookingModal .bk-cal-grid{gap:5px}
#bookingModal .bk-day{aspect-ratio:auto;height:48px}
#bookingModal .bk-day.is-sel,#bookingModal .bk-day.is-sel:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:none}   /* hover kept turning the picked day white-on-white */
#bookingModal .bk-slots{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--line);padding-left:28px}
#bookingModal .bk-slots-date{font-family:var(--serif);font-size:1.08rem;line-height:1.3;color:var(--ink);min-height:34px;display:flex;align-items:center;margin-bottom:12px}
#bookingModal .bk-times{display:flex;flex-direction:column;gap:9px;max-height:372px;overflow-y:auto;padding:2px 6px 2px 0}
#bookingModal .bk-time{flex:none;width:100%;padding:12px 10px;background:#fff;border-color:rgba(30,82,126,.4);color:var(--navy);font-weight:600}
#bookingModal .bk-time:hover{background:#F4F8FB;border-color:var(--navy);transform:none}
#bookingModal .bk-time.is-sel{background:var(--navy);color:#fff;border-color:var(--navy)}
#bookingModal .bk-slots-empty{font-size:.9rem;line-height:1.55;color:var(--ink-soft);margin:0}
@media(max-width:760px){
  #bookingModal .bk-pick{grid-template-columns:1fr;gap:20px}
  #bookingModal .bk-day{height:42px}
  #bookingModal .bk-slots{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px;scroll-margin-top:12px}
  #bookingModal .bk-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;padding:0}
}
@media(max-width:400px){#bookingModal .bk-times{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Charcoal header and mobile drawer. */
header .menu > li > a,
header .menu > li > .dd-btn,
header .phone-link,
header .phone-link svg,
header .mb-search-edge,
header .mb-call-edge{color:var(--on-charcoal) !important}
header .burger span{background:var(--on-charcoal)}
header .menu > li > a:hover,
header .menu > li > .dd-btn:hover,
header .menu > .has-mega.open > .dd-btn,
header .phone-link:hover,
header .mb-search-edge.is-on,
header .mb-search-edge:active,
header .mb-call-edge:active{background:rgba(255,255,255,.12) !important;color:#fff !important}
header :is(a,button):focus-visible{outline:2px solid currentColor;outline-offset:3px}

header .menu .ai-nav-li .ai-nav-btn{
  width:236px;background:rgba(255,255,255,.08);color:var(--on-charcoal) !important;
  border:1px solid rgba(255,255,255,.48);box-shadow:none;cursor:pointer
}
header .menu .ai-nav-li .ai-nav-btn:is(:hover,.is-on){
  background:rgba(255,255,255,.18);border-color:#fff;box-shadow:none
}
header .ai-nav-btn .ai-nav-lbl{color:inherit}
header .menu .ai-nav-li .ai-nav-btn .ai-nav-ic{filter:brightness(0) invert(1)}
@media(min-width:981px) and (max-width:1040px){
  header .menu .ai-nav-li .ai-nav-btn{width:212px;padding:0 12px}
}
@media(max-width:980px){
  header .nav-inner{background:var(--charcoal)}
  header .menu > li{border-color:rgba(255,255,255,.2)}
  header .menu .mega .mega-tabs{border-color:rgba(255,255,255,.36)}
  header .menu .mega .mtab .mt-label{color:var(--on-charcoal) !important}
  header .menu .has-mega.open .mega{max-height:1600px}
  header .menu .ai-nav-li .ai-nav-btn{width:100%}
}

/* Header spacing (client 2026-10-21, after "How We Help" left and the search pill grew): from 1191px up the free
   space is shared evenly between logo | menu links | search pill | phone, instead of the links hugging the logo. */
@media(min-width:1191px){.nav-inner{margin-left:0}.menu>li:first-child{margin-left:auto}.menu>.ai-nav-li{padding:0 22px 0 10px}}

/* "Ask your own question" bar as the first row of an FAQ list (2026-10-26, on the homepage first to judge the design).
   Same squared-off shape, height and font as the accordion rows, plus the header pill's blue-to-green ring, lasting glow
   and magnifier. ai-search.js docks the shared answer panel right under it (form[data-ai-dock]). */
.faq-ask{display:flex;align-items:center;gap:14px;margin:0;padding:12px 12px 12px 24px;border:1.5px solid transparent;border-radius:4px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#2C8BE0,#5AA9EA 45%,#7DBB45) border-box;
  box-shadow:0 0 26px -4px rgba(44,139,224,.42),-14px 6px 26px -8px rgba(44,139,224,.4),14px 6px 26px -8px rgba(125,187,69,.45);transition:box-shadow .25s ease}   /* a wide bar: halo all round, blue left, green right */
.faq-ask:hover,.faq-ask:focus-within{box-shadow:0 0 30px -3px rgba(44,139,224,.55),-16px 6px 30px -6px rgba(44,139,224,.5),16px 6px 30px -6px rgba(125,187,69,.58)}
.faq-ask-ic{width:20px;height:20px;flex:none;display:block;object-fit:contain;
  filter:brightness(0) saturate(100%) invert(23%) sepia(64%) saturate(1900%) hue-rotate(190deg) brightness(94%) contrast(96%)}
.faq-ask input{flex:1;min-width:0;margin:0;padding:10px 0;border:0;outline:0;background:transparent;font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.faq-ask input::placeholder{color:var(--navy);opacity:.85}
.faq-ask button{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:4px;background:var(--navy);color:#fff;cursor:pointer;transition:background .2s ease}
.faq-ask button:hover{background:#083F6B}
.faq-ask button svg{width:18px;height:18px;display:block}
.faq-ask button.loading{opacity:.6;pointer-events:none}
@media(max-width:640px){.faq-ask{padding:10px 10px 10px 18px;gap:11px}.faq-ask input{font-size:1rem}}
/* the shared answer panel docked under the bar: full list width, squared corners; while closed it cancels the list gap */
.faq-list > .ai-ans{max-width:none;margin-top:-10px}
.faq-list > .ai-ans.show{margin-top:0}

.ai-ask .ha-mic[hidden]{display:none}

header .menu > .nav-home > a{justify-content:flex-start}

header .nav-right{flex-direction:column;align-items:stretch;gap:0}
@media(min-width:981px){
  header .nav-right .phone-link{padding-block:4px}
}