/* ===== 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:italic;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:#FAF6EE;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,#1E527E,#0B2C49);
  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:#0A528B;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:#0A528B;
  box-shadow:0 0 0 3px rgba(10,82,139,.10)}
.ai-nav-lbl{font-family:inherit;font-size:.88rem;font-weight:400;color:#8B8578;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 #0A528B) */
.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:#0A528B !important}
.ai-nav-pop{position:fixed;top:80px;left:auto;right:22px;z-index:140;width:min(660px,94vw);background:#FCF7EC;
  border:1px solid #D8CCB2;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:#FCF7EC;
  border-top:1px solid #D8CCB2;border-left:1px solid #D8CCB2;transform:rotate(45deg)}
.ai-nav-pop .anp-intro{margin:0 0 14px;font-size:.95rem;color:#1F1A14;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:#1F1A14;background:#fff;border:1px solid #D8CCB2;
  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:#0A528B;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 #EDE4D2;font-size:.75rem;color:#8B8578;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:#1F1A14;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:#1F1A14;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:#0A528B}
  .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:#1F1A14;background:none !important;border-radius:0}
  .menu>li>.dd-btn{color:#1F1A14 !important}   /* phones keep :hover after a tap; only the OPEN group is blue */
  .menu>.has-mega.open>.dd-btn{color:#0A528B !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:#0A528B !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:#0A528B;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:italic}
.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:italic;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))}}

/* Header "Click here to ask anything." pill (client 2026-10-21): wide enough for the new text, and a soft blue + green
   glow that travels ONCE around it on page load, then fades away. Desktop header only (phones show an icon).
   One diffused halo, colors continuous all the way round (no gaps, no hard colored ring at the pill's edge). */
@property --ai-glow-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@media(min-width:981px){
  .menu .ai-nav-btn,.ai-nav-btn{width:236px}
  .menu>.ai-nav-li{position:relative;z-index:0}
  .menu .ai-nav-li .ai-nav-btn{position:relative}
  /* the halo sits under the white pill: the li is its stacking context */
  .menu .ai-nav-li .ai-nav-btn::after{content:"";position:absolute;inset:-5px;border-radius:999px;pointer-events:none;z-index:-1;opacity:0;
    background:conic-gradient(from var(--ai-glow-a),#2C8BE0 0deg,#5AA9EA 60deg,#7DBB45 150deg,#A3CF66 190deg,#5AA9EA 280deg,#2C8BE0 360deg);
    filter:blur(18px);animation:aiGlowRun 3s cubic-bezier(.45,.05,.3,1) .6s 1 forwards}
}
@media(min-width:981px) and (max-width:1190px){.menu .ai-nav-btn,.ai-nav-btn{width:228px}}
@media(min-width:981px) and (max-width:1040px){.menu .ai-nav-btn,.ai-nav-btn{width:212px;padding:0 12px}.ai-nav-lbl{font-size:.8rem}}
@keyframes aiGlowRun{0%{--ai-glow-a:0deg;opacity:0}14%{opacity:.8}76%{opacity:.8}100%{--ai-glow-a:360deg;opacity:0}}
@media(prefers-reduced-motion:reduce){.menu .ai-nav-li .ai-nav-btn::after{animation:none}}
/* Stand out more (client 2026-10-26: "maybe it should have a color ... maybe the glow should be persistent after the
   initial flash"): a blue-to-green ring, navy text, and as the travelling flash fades a soft blue + green halo stays on.
   The lasting halo is a box-shadow (painted once with the header), not the blurred layer the flash uses, so it adds
   nothing to scrolling. Hover / open brightens it. */
@media(min-width:981px){
  .menu .ai-nav-li .ai-nav-btn,.menu .ai-nav-li .ai-nav-btn:hover,.menu .ai-nav-li .ai-nav-btn.is-on{border:1.5px solid transparent;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#2C8BE0,#5AA9EA 45%,#7DBB45) border-box}
  .menu .ai-nav-li .ai-nav-btn{box-shadow:-8px 0 18px -2px rgba(44,139,224,.5),8px 0 18px -2px rgba(125,187,69,.5);
    animation:aiGlowIn .9s ease 3.3s backwards}
  .menu .ai-nav-li .ai-nav-btn:hover,.menu .ai-nav-li .ai-nav-btn.is-on{box-shadow:-9px 0 22px -1px rgba(44,139,224,.65),9px 0 22px -1px rgba(125,187,69,.65)}
  .menu .ai-nav-li .ai-nav-btn .ai-nav-lbl{color:#0A528B}
}
@keyframes aiGlowIn{from{box-shadow:0 0 0 0 rgba(44,139,224,0),0 0 0 0 rgba(125,187,69,0)}}
@media(prefers-reduced-motion:reduce){.menu .ai-nav-li .ai-nav-btn{animation:none}}

/* 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:#0A528B;opacity:.85}
.faq-ask button{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:4px;background:#0A528B;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}