/* ===== Gumdent Dental Clinic — multi page layer · Scalus =====
   Extends gd.css. Everything here supports the fanned out pages:
   service, location, blog, gallery, contact, review gate, chat widget. */

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ---------- nav dropdowns ---------- */
.nav .has-sub{position:relative}
.nav .has-sub>a{display:inline-flex;align-items:center;gap:6px}
.car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .25s}
.nav .has-sub:hover .car{transform:rotate(180deg)}
.nav a.on{color:var(--green)}
.nav a.on::after{width:100%}
.sub{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);margin-top:12px;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.24s cubic-bezier(.2,.8,.2,1);z-index:60}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.sub a{display:block;padding:9px 14px;border-radius:12px;font-size:14px;font-weight:500;color:var(--navy);white-space:nowrap}
.sub a:hover{background:var(--mint);color:var(--green-deep)}
.sub a::after{display:none}
.sub-wide{width:300px}
.sub-cols{width:420px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sub-feat{margin-top:6px;border-top:1px solid var(--line);padding-top:12px !important;color:var(--green) !important;font-weight:600 !important}

/* mobile accordions */
.m-acc{border-radius:14px;overflow:hidden}
.m-acc summary{list-style:none;cursor:pointer;padding:12px 14px;border-radius:14px;font-weight:600;
  font-family:var(--disp);font-size:15px;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary::after{content:"›";transform:rotate(90deg);transition:.25s;opacity:.5;font-size:19px}
.m-acc[open] summary::after{transform:rotate(-90deg)}
.m-acc summary:hover{background:var(--mint)}
.m-sub{padding:2px 0 8px 10px;display:flex;flex-direction:column;max-height:44vh;overflow-y:auto}
.m-sub a{font-size:14.5px !important;font-weight:500 !important;padding:9px 14px !important;color:var(--muted) !important}
.m-sub a:hover{color:var(--green) !important}
.m-menu{max-height:calc(100vh - 100px);overflow-y:auto}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:106px 0 0;font-size:13px;color:var(--muted-2)}
.crumbs .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--green)}
.crumbs i{font-style:normal;opacity:.4}
.crumbs span{color:var(--navy);font-weight:600}

/* ---------- page hero ---------- */
.phero{padding:34px 0 54px;overflow:hidden;text-align:center}
.phero .wrap{position:relative;z-index:2;max-width:860px}
.phero h1{font-size:clamp(34px,5.4vw,58px);margin:14px 0 0}
.phero-lead{font-size:clamp(16px,1.9vw,19px);color:var(--muted);margin:18px auto 0;max-width:680px}
.phero-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.phero-trust{margin-top:22px;font-size:13.5px;color:var(--muted)}
.phero-trust .stars{color:#f5a623;letter-spacing:1px}
.phero-trust b{color:var(--navy)}
.phero.urgent .eyebrow{background:#fdeceb;color:#c2352b}
.phero.urgent .eyebrow .dot{background:#e0473b}

.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--green-deep);
  font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.02em;padding:8px 16px;border-radius:100px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ---------- two column body ---------- */
.svc-body{padding:20px 0 70px}
.svc-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:54px;align-items:start}
.svc-main h2{font-size:clamp(25px,3vw,33px);margin:44px 0 16px}
.svc-main h2:first-child{margin-top:0}
.svc-main h3{font-size:20px;margin:28px 0 10px}
.svc-main p{color:var(--muted);margin-bottom:15px}
.lead-p{font-size:17.5px;color:var(--ink);opacity:.86}

.tick-list{list-style:none;display:grid;gap:11px;margin:6px 0 8px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.tick-list li svg{color:var(--green);flex-shrink:0;margin-top:3px}

.steps{list-style:none;counter-reset:s;display:grid;gap:16px;margin-top:6px}
.steps li{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-sm)}
.stp-n{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;font-family:var(--disp);font-weight:700;font-size:15px}
.steps b{font-family:var(--disp);font-size:16.5px;color:var(--navy-ink);display:block;margin-bottom:4px}
.steps p{margin:0;font-size:15px}

/* ---------- sidebar ---------- */
.svc-side{position:sticky;top:104px;display:grid;gap:18px}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-sm);text-align:center}
.side-logo{height:44px;width:auto;margin:0 auto 16px}
.side-card h3{font-size:20px;margin-bottom:8px}
.side-card p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.side-card .btn{margin-bottom:9px}
.side-facts{list-style:none;display:grid;gap:9px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);text-align:left}
.side-facts li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.side-facts svg{color:var(--green);flex-shrink:0;margin-top:2px}
.side-card.alt{background:linear-gradient(160deg,var(--navy),var(--navy-ink));border:0;color:#fff}
.side-card.alt h3,.side-card.alt b{color:#fff}
.side-card.alt p{color:rgba(255,255,255,.76)}
.side-card.alt .stars{color:#ffc94d;font-size:19px;letter-spacing:2px;display:block;margin-bottom:8px}
.side-card.alt b{font-family:var(--disp);font-size:17px;display:block;margin-bottom:8px}
.side-card.alt .svc-link{color:#6ee6ab}
.side-card.alt .hours-list li{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12)}
.side-card.alt .hours-list b{color:#fff}
.side-sa{height:34px;width:auto;margin:16px auto 8px;opacity:.85}
.side-note{display:block;font-size:11.5px;color:var(--muted-2);line-height:1.5}
.cdbs-stat.mini{margin-bottom:18px}
.cdbs-stat.mini .cb-amt{font-size:38px}

/* ---------- mini service grid ---------- */
.mini-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:6px 0 10px}
.mini-svc{display:flex;align-items:center;gap:11px;padding:13px 15px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;transition:.25s}
.mini-svc:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.mini-svc span{color:var(--green);display:grid;place-items:center;flex-shrink:0}
.mini-svc svg{width:20px;height:20px}
.mini-svc b{font-family:var(--disp);font-size:14px;color:var(--navy);font-weight:600}

/* ---------- FAQ ---------- */
.faq{padding:70px 0;background:linear-gradient(180deg,transparent,var(--sky) 40%,transparent)}
.faq-list{display:grid;gap:12px;max-width:860px;margin:0 auto}
.fq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s}
.fq[open]{box-shadow:var(--shadow-sm);border-color:var(--green-2)}
.fq summary{list-style:none;cursor:pointer;padding:19px 24px;font-family:var(--disp);font-weight:600;
  font-size:16.5px;color:var(--navy-ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{width:20px;height:20px;flex-shrink:0;position:relative}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;background:var(--green);border-radius:2px;transition:.28s}
.fq summary i::before{top:9px;left:2px;width:16px;height:2.4px}
.fq summary i::after{left:9px;top:2px;width:2.4px;height:16px}
.fq[open] summary i::after{transform:rotate(90deg);opacity:0}
.fq-a{padding:0 24px 21px}
.fq-a p{color:var(--muted);font-size:15.5px}

/* ---------- reviews ---------- */
.rev-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:30px 0 22px}
.rs{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 30px;text-align:center;min-width:150px;box-shadow:var(--shadow-sm)}
.rs b{display:block;font-family:var(--disp);font-size:34px;color:var(--navy-ink);line-height:1}
.rs .stars{display:block;color:#f5a623;font-size:14px;letter-spacing:2px;margin-top:5px}
.rs small{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}
/* One track of equal columns rather than a flex row, so every pill is the same
   width whatever the word length. Six themes cycle through the palette so the
   row does not read as one flat block of mint. */
.rev-topics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;
  max-width:900px;margin:0 auto 18px}
.rev-topics span{display:grid;place-items:center;text-align:center;font-size:13px;font-weight:600;
  font-family:var(--disp);padding:8px 12px;border-radius:100px;line-height:1.25}
.rev-topics span:nth-child(6n+1){background:var(--mint);color:var(--green-deep)}
.rev-topics span:nth-child(6n+2){background:#e6edfb;color:#2a4a86}
.rev-topics span:nth-child(6n+3){background:#e2f4f3;color:#1a6c68}
.rev-topics span:nth-child(6n+4){background:#f3ecfb;color:#5b3b8c}
.rev-topics span:nth-child(6n+5){background:#fdf0e3;color:#96591c}
.rev-topics span:nth-child(6n+6){background:#fde9ee;color:#96274a}
@media(max-width:900px){.rev-topics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.rev-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rev-cta{text-align:center;margin-top:18px}
.sample-note{text-align:center;color:var(--muted-2);font-size:12.5px;max-width:600px;margin:0 auto}

/* ---------- before and after ---------- */
.ba-teaser,.gal-body{padding:56px 0}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ba-grid.three{grid-template-columns:repeat(3,1fr)}
.ba{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
/* Crossfade, not a drag slider. Both frames sit stacked and the BEFORE layer
   fades away and back on a loop, so the change reads without any interaction.
   The JPEGs are already cut to 4/3 with the teeth registered pair to pair, so
   nothing here shifts or scales them — see baCard() in build-gumdent.js. */
.ba-imgs{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b1020}
.ba-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;pointer-events:none}
/* Every card runs the same 8s clock with no per card delay, so the whole row is
   showing BEFORE together and then AFTER together — one state at a time to read. */
.ba-imgs .ba-before{z-index:2;animation:baFade 8s ease-in-out infinite}
@keyframes baFade{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}

/* the single heading for the row, in place of a badge repeated on every card.
   It swaps rather than crossfades — fading the two words across each other
   stacked BEFORE on AFTER and read as one unreadable word mid transition. */
.ba-phase{display:grid;place-items:center;height:46px;margin:0 0 22px}
.bp{grid-area:1/1;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 26px;border-radius:100px;color:#fff}
.bp-b{background:var(--navy);animation:baTagB 8s ease-in-out infinite}
.bp-a{background:var(--green);opacity:0;animation:baTagA 8s ease-in-out infinite}
@keyframes baTagB{0%,45%{opacity:1}47%,95%{opacity:0}97%,100%{opacity:1}}
@keyframes baTagA{0%,45%{opacity:0}47%,95%{opacity:1}97%,100%{opacity:0}}
/* animation off (reduced motion) must not leave both labels stacked */
@media (prefers-reduced-motion:reduce){
  .ba-imgs .ba-before,.bp-b{opacity:1}
  .bp-a{display:none}
}
.ba figcaption{padding:18px 22px 21px}
.ba figcaption b{display:block;font-family:var(--disp);font-size:17px;color:var(--navy-ink);margin-bottom:5px}
.ba figcaption span{color:var(--muted);font-size:14.5px}
.gal-note{max-width:720px;margin:34px auto 0;text-align:center;color:var(--muted);font-size:14.5px}

/* ---------- about ---------- */
.about-story{padding:20px 0 70px}
.as-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.as-in h2{font-size:clamp(26px,3.2vw,38px);margin:14px 0 18px}
.as-in p{color:var(--muted);margin-bottom:14px}
.as-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.as-stats b{display:block;font-family:var(--disp);font-size:30px;color:var(--green-deep);line-height:1}
.as-stats span{display:block;font-size:13px;color:var(--muted);margin-top:5px;max-width:150px}
.as-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.as-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}
.values{padding:0 0 70px}
.team-grid.big{grid-template-columns:repeat(2,1fr);gap:26px}
.tm.big{text-align:left;padding:0;overflow:hidden}
/* 4/3 rather than a fixed 300px band. The headshots are square, so a 300px band
   on a ~550px card only ever showed 55% of the frame and cut everyone off at the
   nose; at 4/3 the visible slice is 75% of the frame at ANY card width, which
   holds hair to chin. Ratio not pixels, so it survives the responsive columns. */
.tm.big .tm-av{width:100%;height:auto;aspect-ratio:4/3;border-radius:0;margin:0 0 20px}
.tm.big>*:not(.tm-av){padding-left:26px;padding-right:26px}
.tm.big .tm-tags{padding-bottom:6px}
.tm.big .tm-lang{padding-bottom:24px;display:block}
.tm-focus{font-family:var(--disp);font-weight:600;color:var(--green-deep);font-size:14.5px;margin:6px 0 10px !important}
/* centre, not "center top" — the headshots are pre-aligned on the eye line */
.tm-av img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Equal columns, not a wrapping flex row — four attributes across a flex row
   wrapped 3 + 1 and left an orphan hanging under the middle of the section. */
.clinic-attrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  max-width:1040px;margin:28px auto 0}
.clinic-attrs.wide{max-width:none;margin:22px 0 0}
@media(max-width:940px){.clinic-attrs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.clinic-attrs{grid-template-columns:1fr}}
.clinic-attrs span{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:100px;padding:11px 18px;font-size:13.5px;color:var(--muted);
  text-align:left;line-height:1.3}
.clinic-attrs svg{color:var(--green);width:18px;height:18px;flex-shrink:0}

/* ---------- blog ---------- */
.blog-list{padding:10px 0 70px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 26px;
  box-shadow:var(--shadow-sm);transition:.3s cubic-bezier(.2,.8,.2,1);display:block}
.post-card:hover{transform:translateY(-5px);border-color:var(--green-2);box-shadow:var(--shadow)}
.pc-cat{display:inline-block;background:var(--mint);color:var(--green-deep);font-family:var(--disp);
  font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:14px}
.post-card h3{font-size:20.5px;margin-bottom:10px;line-height:1.25}
.post-card p{color:var(--muted);font-size:14.8px;margin-bottom:16px}
.pc-meta{font-size:12.5px;color:var(--muted-2)}

.post{padding:14px 0 0}
.post-head{max-width:820px;text-align:center;padding-top:26px;padding-bottom:34px}
.post-head h1{font-size:clamp(30px,4.6vw,48px);margin:6px 0 0}
.post-lead{font-size:18px;color:var(--muted);margin:18px auto 0;max-width:680px}
.post-meta{margin-top:20px;font-size:13px;color:var(--muted-2);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.post-meta i{opacity:.4;font-style:normal}
.post-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:54px;align-items:start;padding-bottom:70px}
.post-body{max-width:720px}
.post-body h2{font-size:clamp(24px,2.9vw,31px);margin:40px 0 14px}
.post-body h3{font-size:19.5px;margin:26px 0 8px}
.post-body p{color:var(--muted);font-size:16.5px;margin-bottom:16px}
.post-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;padding-top:32px;border-top:1px solid var(--line)}

/* ---------- related ---------- */
.related{padding:0 0 70px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.rel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow-sm);transition:.3s cubic-bezier(.2,.8,.2,1);display:block}
.rel-card:hover{transform:translateY(-4px);border-color:var(--green-2);box-shadow:var(--shadow)}
.rel-card h3{font-size:18.5px;margin-bottom:8px;line-height:1.25}
.rel-card p{color:var(--muted);font-size:14.5px;margin-bottom:12px}

/* ---------- nearby / cta band ---------- */
.nearby{padding:0 0 70px}
.nearby-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.nearby-links a{background:var(--card);border:1px solid var(--line);border-radius:100px;padding:10px 20px;
  font-size:14px;font-weight:500;color:var(--navy);transition:.25s}
.nearby-links a:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-2px)}

.cta-band{padding:0 0 80px}
.cb-in{background:linear-gradient(135deg,var(--navy),var(--navy-ink));border-radius:var(--r-lg);padding:46px 50px;
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  box-shadow:0 30px 70px -34px rgba(27,31,107,.7);position:relative;overflow:hidden}
.cb-in::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,160,106,.4),transparent 70%);top:-160px;right:-120px}
.cb-in>*{position:relative;z-index:2}
.cb-in h2{color:#fff;font-size:clamp(25px,3vw,33px);margin-bottom:9px}
.cb-in p{color:rgba(255,255,255,.76);max-width:480px;font-size:15.5px}
.cb-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- contact ---------- */
.hours-list{list-style:none;display:grid;gap:1px}
.hours-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.hours-list li:last-child{border-bottom:0}
.hours-list b{font-family:var(--disp);color:var(--navy-ink);font-weight:600}
.hours-list.small li{padding:7px 0;font-size:13.5px}
.hours-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm)}
.hours-card.inline{margin-top:26px}
.hours-card h3{font-size:19px;margin-bottom:12px}
.hc-note{margin-top:14px;font-size:13px;color:var(--muted-2)}
.visit-band{padding:70px 0}
.vb-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.vb-in h2{font-size:clamp(26px,3.2vw,36px);margin:12px 0 20px}
.bf-logo{text-align:center;padding:22px 0 20px;margin:-30px -30px 22px;
  background:linear-gradient(180deg,var(--mint),transparent);border-radius:var(--r-lg) var(--r-lg) 0 0}
/* never let the wordmark stretch — bound BOTH axes and let it letterbox itself */
.bf-logo img{height:auto;width:auto;max-height:96px;max-width:min(100%,300px);
  object-fit:contain;margin:0 auto}
.book-form h3{font-size:21px;margin-bottom:18px;text-align:center}

/* ---------- home page booking section ---------- */
.home-book{padding:90px 0 100px;background:radial-gradient(820px 460px at 82% 10%,var(--mint),transparent),var(--bg)}
.hb-in{display:grid;grid-template-columns:1fr 1.02fr;gap:50px;align-items:stretch}
.hb-copy{display:flex;flex-direction:column}
.hb-copy h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-top:12px}
.hb-copy>p{color:var(--muted);margin:16px 0 26px;font-size:1.05rem}
.hb-faces{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 20px;box-shadow:var(--shadow-sm)}
.hb-avatars{display:flex;flex-shrink:0;isolation:isolate}
/* object-position is plain centre because the headshots are pre-aligned on the
   eye line — see faces.py. Don't nudge it here or they fall out of step again. */
.hb-avatars img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center;
  border:3px solid #fff;box-shadow:var(--shadow-sm);position:relative}
.hb-avatars img + img{margin-left:-16px}
/* George leads the practice, so his face overlaps the rest rather than hiding
   under them — paint order would otherwise put the LAST avatar on top. */
.hb-avatars img:nth-child(1){z-index:4}
.hb-avatars img:nth-child(2){z-index:3}
.hb-avatars img:nth-child(3){z-index:2}
.hb-avatars img:nth-child(4){z-index:1}
.hb-faces p{font-size:13.5px;color:var(--muted);line-height:1.5;min-width:200px;flex:1}
.hb-faces p b{display:block;font-family:var(--disp);color:var(--navy-ink);font-size:14.5px;margin-bottom:2px}
/* The photo flexes to whatever height the form card ends up, rather than forcing
   a tall row that the short first step then has to pad out with white. Capped so
   a long form step cannot stretch it into a strip. */
/* The photo flexes to whatever height the form card needs, rather than a fixed
   tall box that forced the row taller than the form and left the short first
   step padding the difference out in white. Range covers step 1 to step 3. */
.hb-photo{margin-top:22px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  flex:1;min-height:240px;max-height:380px}
.hb-photo img{width:100%;height:100%;object-fit:cover;object-position:center 52%;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hb-photo:hover img{transform:scale(1.05)}

/* ---------- three step appointment qualifier ----------
   Two easy taps before we ever ask for a phone number. Same white card and the
   same .ff field styling as the old single form, so nothing else had to move. */
.bf-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px}
.bf-head h3{margin:0;text-align:left}
.bf-step{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--green);white-space:nowrap}
.bf-lead{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.bf-bar{height:5px;border-radius:99px;background:var(--sky-2);overflow:hidden;margin-bottom:24px}
.bf-bar i{display:block;height:100%;width:33.33%;border-radius:99px;
  background:linear-gradient(90deg,var(--green-2),var(--green-deep));transition:width .4s cubic-bezier(.4,0,.2,1)}
/* Each step sizes to its own content — a min-height sized to the tallest step
   just moved the dead space into steps 1 and 2. The photo beside it flexes to
   follow, so the two columns stay flush all the way through. */
.bf-form{flex:1;display:flex;flex-direction:column}
.bstep{display:none}
.bstep.on{display:flex;flex-direction:column;flex:1;animation:bfIn .4s cubic-bezier(.22,1,.36,1)}
.bstep.on .bnav{margin-top:auto}
@keyframes bfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.blabel{display:block;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--navy);margin-bottom:11px}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.chips.one{grid-template-columns:1fr}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 15px;
  border:1.5px solid var(--line);border-radius:14px;background:#fbfcff;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--navy);transition:.2s;line-height:1.3}
.chip span svg{color:var(--green);flex-shrink:0}
.chip span:hover{border-color:var(--green-2);background:var(--mint)}
.chip input:checked + span{border-color:var(--green);background:var(--mint);
  box-shadow:0 0 0 3px rgba(31,138,91,.13)}
.chip input:focus-visible + span{outline:2px solid var(--navy);outline-offset:2px}
.bf-consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted);
  margin:4px 0 18px;cursor:pointer}
.bf-consent input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--green)}
.bnav{display:flex;gap:11px}
.bnav .btn{flex:1}
.bnav .back{flex:0 0 auto;padding-left:22px;padding-right:22px}
.bnav .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.bf-ok{display:none;text-align:center;padding:8px 2px 4px}
.bf-ok.on{display:block}
.bf-ok .tick{width:62px;height:62px;border-radius:50%;background:var(--mint);color:var(--green);
  display:grid;place-items:center;margin:0 auto 16px}
.bf-ok h3{margin-bottom:9px}
.bf-ok p{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.bf-err{color:#c2453a;font-size:13px;text-align:center;margin-top:12px}
.map-band{padding:0 0 70px}
.map-card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);height:420px}
.map-card iframe{width:100%;height:100%;border:0;display:block}
.sec-foot{text-align:center;margin-top:28px}

/* ---------- footer additions ---------- */
.ft-tag{font-family:var(--disp);font-weight:600;color:var(--green-2);margin-bottom:10px}
.ft-rating{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:13.5px;color:rgba(255,255,255,.72)}
.ft-rating .stars{color:#ffc94d;letter-spacing:1px}
.ft-rating b{color:#fff;font-family:var(--disp)}
.ft-hours{list-style:none;margin-top:14px;display:grid;gap:0}
.ft-hours li{display:flex;justify-content:space-between;gap:12px;font-size:12.8px;padding:5px 0;
  color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.08)}
.ft-hours li:last-child{border-bottom:0}
.ft-hours b{color:rgba(255,255,255,.9);font-weight:500}
.ft-visit p{margin-bottom:12px}
.scalus-badge b{color:var(--green-2);font-weight:700}

/* ---------- chat widget ---------- */
.gd-chat-fab{position:fixed;right:20px;bottom:20px;z-index:130;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;display:grid;place-items:center;
  box-shadow:0 16px 36px -12px rgba(31,138,91,.8);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.gd-chat-fab:hover{transform:scale(1.07)}
.gd-chat-fab .ic-close{display:none}
.gd-chat-fab.open .ic-open{display:none}
.gd-chat-fab.open .ic-close{display:block}
.fab-dot{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:#ff5b4a;border:2.5px solid #fff}
.gd-chat-fab.open .fab-dot,.gd-chat-fab.seen .fab-dot{display:none}

/* Liquid glass: the panel is a frosted pane the page shows through, lifted off
   the background by a bright inner top edge and a soft specular sheen. Every
   layer inside is translucent, so the blur reads all the way down. */
.gd-chat{position:fixed;right:20px;bottom:92px;z-index:129;width:376px;max-width:calc(100vw - 32px);
  height:min(560px,calc(100vh - 130px));border-radius:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.58) 42%,rgba(232,247,239,.62));
  backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 30px 80px -26px rgba(20,26,74,.5),
             inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(255,255,255,.35);
  display:flex;flex-direction:column;overflow:hidden;position:fixed;
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:.3s cubic-bezier(.2,.8,.2,1)}
/* the specular highlight that sells it as glass rather than a grey panel */
.gd-chat::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,0) 34%)}
.gd-chat.open{opacity:1;transform:none;pointer-events:auto}
.gd-chat>*{position:relative;z-index:2}
.gc-head{display:flex;align-items:center;gap:12px;padding:15px 16px;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,rgba(27,31,107,.82),rgba(20,26,74,.72));
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.gc-av{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.gc-av img{width:26px;height:26px;object-fit:contain}
.gc-who b{display:block;font-family:var(--disp);font-size:15px}
.gc-who small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.7)}
.gc-who .live{width:6px;height:6px;border-radius:50%;background:#43e08a;display:inline-block}
.gc-x{margin-left:auto;background:rgba(255,255,255,.14);border:0;color:#fff;width:28px;height:28px;
  border-radius:50%;cursor:pointer;font-size:18px;line-height:1}
.gc-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:transparent}
.gc-msg{max-width:82%;padding:11px 15px;border-radius:18px;font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.gc-msg.bot{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -12px rgba(20,26,74,.5),inset 0 1px 0 rgba(255,255,255,.85);
  border-bottom-left-radius:6px;align-self:flex-start;color:var(--ink)}
.gc-msg.me{background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.gc-msg.typing{display:flex;gap:4px;align-items:center;padding:14px 16px}
.gc-msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:gcb 1.3s infinite}
.gc-msg.typing i:nth-child(2){animation-delay:.18s}
.gc-msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes gcb{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.gc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.gc-chips button{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);color:var(--navy);
  font-family:var(--disp);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:100px;cursor:pointer;transition:.22s}
.gc-chips button:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-1px);background:rgba(255,255,255,.92)}
.gc-urgent{padding:9px 16px;background:rgba(232,247,239,.72);font-size:12.5px;color:var(--green-deep);
  text-align:center;flex-shrink:0;border-top:1px solid rgba(255,255,255,.6)}
.gc-urgent a{font-weight:700;text-decoration:underline}
.gc-in{display:flex;gap:8px;padding:12px;flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.5);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.gc-in input{flex:1;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.62);border-radius:100px;
  padding:12px 18px;box-shadow:inset 0 1px 2px rgba(20,26,74,.06);
  font-family:var(--body);font-size:14.5px;color:var(--ink);outline:0;transition:.22s}
.gc-in input::placeholder{color:var(--muted-2)}
.gc-in input:focus{border-color:var(--green-2);background:rgba(255,255,255,.88)}
.gc-in button{width:44px;height:44px;border-radius:50%;border:0;flex-shrink:0;cursor:pointer;
  background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;display:grid;place-items:center}

/* ---------- review gate ---------- */
.rv-page{min-height:100vh;display:grid;place-items:center;padding:26px 18px;
  background:linear-gradient(160deg,var(--sky),var(--bg) 55%,var(--mint))}
.rv-card{width:100%;max-width:470px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:0 30px 26px;text-align:center;overflow:hidden}
.rv-logo{padding:26px 0 22px;margin:0 -30px 24px;background:linear-gradient(180deg,var(--mint),transparent)}
.rv-logo img{height:auto;width:auto;max-height:92px;max-width:min(100%,290px);
  object-fit:contain;margin:0 auto}
.rv-step{display:none}
.rv-step.on{display:block;animation:rvIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes rvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rv-step h1{font-size:26px;margin-bottom:10px}
.rv-step>p{color:var(--muted);font-size:15.5px;margin-bottom:24px}
.rv-stars{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.rv-star{background:none;border:0;cursor:pointer;font-size:42px;line-height:1;color:#dfe4ef;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),color .18s;padding:0 2px}
.rv-star:hover,.rv-star.lit{color:#f5a623;transform:scale(1.14)}
.rv-hint{font-size:13px;color:var(--muted-2)}
.rv-tick{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;font-size:31px}
.rv-skip{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  color:var(--muted-2);font-size:13.5px;text-decoration:underline;font-family:var(--body)}
.rv-card .ff{text-align:left;margin-bottom:14px}
.rv-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:12px;font-size:11.5px;color:var(--muted-2);flex-wrap:wrap}
.rv-foot b{color:var(--green-deep)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .svc-cols,.post-cols{grid-template-columns:1fr;gap:38px}
  .svc-side{position:static;grid-template-columns:1fr 1fr;display:grid}
  .as-in,.vb-in{grid-template-columns:1fr;gap:32px}
  .ba-grid.three{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .team-grid.big{grid-template-columns:1fr}
}
@media (max-width:720px){
  .crumbs{padding-top:96px;font-size:12px}
  .crumbs .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .crumbs .wrap::-webkit-scrollbar{display:none}
  .crumbs a,.crumbs span{white-space:nowrap}
  .phero{padding:24px 0 40px}
  .svc-side{grid-template-columns:1fr}
  .ba-grid,.ba-grid.three{grid-template-columns:1fr}
  .cb-in{padding:32px 26px;flex-direction:column;align-items:flex-start}
  .cb-btns .btn{flex:1 1 auto}
  .steps li{padding:17px 18px;gap:13px}
  .map-card{height:320px}
  .rs{padding:16px 22px;min-width:120px}
  .rs b{font-size:28px}
  .gd-chat{right:10px;left:10px;bottom:84px;width:auto;max-width:none;height:min(520px,calc(100vh - 118px))}
  .gd-chat-fab{right:16px;bottom:16px;width:56px;height:56px}
  .bf-logo img{max-height:74px}
  .rv-logo img{max-height:74px}
  .hb-in{grid-template-columns:1fr;gap:34px}
  .hb-photo{height:260px}
  .chips{grid-template-columns:1fr}
  .bf-head{flex-direction:column;align-items:flex-start;gap:4px}
  .mini-svc-grid{grid-template-columns:1fr 1fr}
  .post-cta .btn{flex:1 1 100%}
}
@media (max-width:420px){
  .mini-svc-grid{grid-template-columns:1fr}
  .rv-star{font-size:36px}
}

/* =========================================================================
   REVIEWS MARQUEE — real Google reviews scrolling past, two rows, opposite ways
   ========================================================================= */
.rv-marquee{margin:34px 0 30px;display:grid;gap:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rv-row{overflow:hidden}
.rv-track{display:flex;width:max-content;animation:rvScroll 68s linear infinite}
.rv-row.rev .rv-track{animation-duration:86s;animation-direction:reverse}
/* Deliberately does NOT pause on hover — the row kept stalling whenever the
   cursor crossed it. Keyboard focus still holds it so a tabbing user can read. */
.rv-marquee:focus-within .rv-track{animation-play-state:paused}
.rv-set{display:flex;gap:18px;padding-right:18px}
@keyframes rvScroll{to{transform:translateX(-50%)}}

/* the green border goes all the way round the tile, not just on hover */
.rv-card{flex:0 0 330px;background:var(--card);border:1.5px solid var(--green-2);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:9px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.rv-card:hover{transform:translateY(-5px);border-color:var(--green-deep);box-shadow:var(--shadow)}
.rv-top{display:flex;align-items:center;gap:11px}
.rv-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),var(--navy));color:#fff;
  font-family:var(--disp);font-weight:700;font-size:16px}
.rv-top b{display:block;font-family:var(--disp);font-size:14.5px;color:var(--navy-ink);line-height:1.2}
.rv-top small{font-size:11.5px;color:var(--muted-2)}
.rv-g{margin-left:auto;flex-shrink:0}
.rv-stars-sm{color:#f5a623;font-size:14px;letter-spacing:2px}
.rv-card blockquote{font-size:14.5px;line-height:1.62;color:var(--muted)}

/* =========================================================================
   STICKY ACTION BAR — Call Us / Book Now
   ========================================================================= */
.act-bar{position:fixed;left:0;right:0;bottom:0;z-index:118;display:none;
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.5);
  border-top:1px solid var(--line);padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  gap:9px;box-shadow:0 -10px 34px -22px rgba(27,31,107,.5)}
.act-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 12px;border-radius:100px;font-family:var(--disp);font-weight:600;transition:transform .25s}
.act-bar a:active{transform:scale(.97)}
.ab-ic{display:grid;place-items:center;flex-shrink:0}
.ab-txt b{display:block;font-size:14px;line-height:1.15}
.ab-txt small{display:block;font-size:10.5px;opacity:.72;font-weight:500;font-family:var(--body)}
.ab-call{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.ab-call .ab-ic{color:var(--green)}
.ab-book{background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;
  box-shadow:0 10px 22px -12px rgba(31,138,91,.85)}
@media (max-width:900px){
  .act-bar{display:flex}
  body{padding-bottom:74px}
  .gd-chat-fab{bottom:82px}
  .gd-chat{bottom:150px;height:min(500px,calc(100vh - 186px))}
  .concept-note{bottom:84px}
}

/* =========================================================================
   MOTION LAYER
   Everything below is opt in per element and fully disabled under
   prefers-reduced-motion (see the block at the end).
   ========================================================================= */

/* directional reveals */
.js .reveal-l{opacity:0;transform:translateX(-46px)}
.js .reveal-r{opacity:0;transform:translateX(46px)}
.js .reveal-s{opacity:0;transform:scale(.9)}
.js .reveal-l,.js .reveal-r,.js .reveal-s{
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}
.js .reveal-l.in,.js .reveal-r.in,.js .reveal-s.in{opacity:1;transform:none}

/* staggered children: the JS sets --i on each child of a .stagger container */
.js .stagger>*{opacity:0;transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 85ms)}
.js .stagger.in>*{opacity:1;transform:none}
/* the why cards sit high enough that the default rise barely registers before
   they are already on screen — give them a longer, slightly scaled entrance */
.js .why-grid.stagger>*{transform:translateY(46px) scale(.965);
  transition-duration:.85s;transition-delay:calc(var(--i,0) * 150ms)}
.js .why-grid.stagger.in>*{transform:none}

/* word by word heading rise */
.js .wsplit .w{display:inline-block;overflow:hidden;vertical-align:top}
.js .wsplit .w i{display:inline-block;font-style:inherit;transform:translateY(105%);opacity:0;
  transition:transform .75s cubic-bezier(.19,1,.22,1),opacity .6s;
  transition-delay:calc(var(--wi,0) * 46ms)}
.js .wsplit.in .w i{transform:none;opacity:1}

/* section entrance: content lifts as the section arrives */
.js [data-lift]{transform:translateY(var(--lift,0));will-change:transform}

/* parallax layers driven by JS */
.js [data-para]{will-change:transform}

/* magnetic / lift hover on cards */
.svc,.why-card,.post-card,.rel-card,.tm,.mini-svc,.ba,.rs{
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.svc:hover,.why-card:hover,.tm:hover{transform:translateY(-7px) scale(1.012)}
.svc-ic,.wc-ic{transition:transform .45s cubic-bezier(.2,.9,.2,1),background .35s,color .35s}
.svc:hover .svc-ic,.why-card:hover .wc-ic{transform:rotate(-8deg) scale(1.12)}

/* buttons get a light sweep on hover */
.btn-book{position:relative;overflow:hidden}
.btn-book::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .75s cubic-bezier(.2,.8,.2,1)}
.btn-book:hover::after{left:130%}

/* animated underline on nav + link arrows that travel */
.svc-link{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.svc:hover .svc-link,.rel-card:hover .svc-link{transform:translateX(6px)}

/* the scroll progress bar gets a soft glow so the motion reads */
.progress{box-shadow:0 0 14px rgba(37,160,106,.75)}

/* floating blobs drift */
.blob{animation:blobDrift 18s ease-in-out infinite alternate}
.b2{animation-duration:24s;animation-delay:-6s}
@keyframes blobDrift{to{transform:translate3d(28px,-34px,0) scale(1.09)}}

/* section kickers slide their dot in */
.kicker{position:relative}

/* counters and stat tiles pop as they land */
.js .rs,.js .as-stats>div{transition:transform .6s cubic-bezier(.2,.9,.2,1),opacity .6s}
.js .pop{opacity:0;transform:translateY(20px) scale(.94)}
.js .pop.in{opacity:1;transform:none}

/* sticky sidebar card breathes slightly on scroll */
.side-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}

/* FAQ open/close smoothing */
.fq-a{overflow:hidden}
.js .fq-a{display:grid;grid-template-rows:1fr}

/* image zoom on hover for gallery figures */
.gallery figure{overflow:hidden}
.gallery figure img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.gallery figure:hover img{transform:scale(1.07)}

/* page enters with a soft fade so navigation feels continuous */
.js body{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .js .reveal-l,.js .reveal-r,.js .reveal-s,
  .js .stagger>*,.js .pop{opacity:1!important;transform:none!important;transition:none!important}
  .js .wsplit .w i{transform:none!important;opacity:1!important}
  .rv-track{animation:none!important}
  .rv-marquee{overflow-x:auto}
  .blob{animation:none!important}
  .js body{animation:none!important}
  .js [data-para],.js [data-lift]{transform:none!important}
}
.rv-marquee.resizing .rv-track{animation-play-state:paused}

/* =========================================================================
   ENQUIRY POP-UP
   The chat hands off to this rather than taking a name and number itself, so
   there is one enquiry path on the site and it is the one wired to /api/lead.
   ========================================================================= */
.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}
.gd-modal[hidden]{display:none}
.gd-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.gd-modal-back{position:absolute;inset:0;background:rgba(11,16,32,.55);backdrop-filter:blur(3px);
  animation:gdmFade .25s ease}
.gd-modal-card{position:relative;width:min(100%,470px);max-height:calc(100vh - 40px);overflow:auto;
  -webkit-overflow-scrolling:touch;animation:gdmUp .32s cubic-bezier(.2,.8,.2,1)}
.gd-modal-card .book-form{margin:0}
/* the step min-height is there to stop the inline card jumping; in the pop-up it
   only adds dead space, because nothing sits beside it to line up with */
.gd-modal-card .bstep.on{min-height:0}
.gd-modal-x{position:absolute;top:10px;right:12px;z-index:3;width:34px;height:34px;border:0;
  border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);font-size:22px;line-height:1;
  cursor:pointer;box-shadow:var(--shadow-sm)}
.gd-modal-x:hover{background:#fff;color:var(--green-deep)}
@keyframes gdmFade{from{opacity:0}to{opacity:1}}
@keyframes gdmUp{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gd-modal-back,.gd-modal-card{animation:none}}