/* ============================================================================
   NIGHT GLASS - THE PREMIUM PASS (2026-10-10)

   The client read the site as "too vanilla / too basic": white and lavender
   bands of rounded white cards with drop shadows - the template look. An
   all-dark trial the same day was rejected too ("whole site looks dark and not
   much contrast"): with every band dark there was no rhythm, so nothing stood
   out. What premium needs is CONTRAST AS RHYTHM - dark moments and crisp light
   ones, alternating, each designed for its ground:

     hero        DARK   photograph
     quote band  LIGHT  frosted pane, plum light-box header
     services    DARK   the bento of photograph tiles - the page's neon moment
     why         LIGHT  pearl, a white glass pane of ruled reasons
     areas       LIGHT  white, the radar map as a dark figure
     schedule    DARK   the process light
     faq         LIGHT  pearl, white glass panes
     contact     DARK   photograph
     colophon    DARK
   Interior pages: dark hero, light chapters, the tiles and the process band dark.

   From the design references (method, never costume):
     - one type COLLISION repeated in every heading: the plain words at 300, the
       accented phrase at 700 in the plum (A's system, B's weight version).
     - the services are a COMPOSED object, not a card grid (B's stage, C's
       mosaic): full-photograph tiles of three sizes, captioned on glass.
     - atmosphere on every ground, painted once (no fixed or blended layers).
     - a light that answers the pointer (B's lamp): a glint slides across glass.

   PERFORMANCE (the 2026-09-30 lag fix still holds): no backdrop-filter, no
   fixed full-screen layer, no animated gradients. The glint is one translated
   element per hovered surface.

   Rolling back = remove this file's <link> in inc/header.php and restore
   site.css's tokens (backup: _work/lvexpress/backup/2026-10-10-pre-minimal/).
   ========================================================================= */

/* ===================================================== grounds =========== */
.sec--white,.sec--panel{position:relative;isolation:isolate}
/* light grounds: barely-there plum light in two corners - depth without tint */
.sec--white::before,.sec--panel::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none}
.sec--white::before{background:
  radial-gradient(42% 36% at 0% 0%,rgba(162,75,184,.07),transparent 70%),
  radial-gradient(36% 30% at 100% 100%,rgba(109,47,112,.05),transparent 72%)}
.sec--panel::before{background:
  radial-gradient(40% 40% at 100% 0%,rgba(162,75,184,.08),transparent 70%),
  radial-gradient(40% 34% at 0% 100%,rgba(109,47,112,.06),transparent 72%)}

/* dark grounds: lit from above by the strongest neon on the page */
.dark{background:
  radial-gradient(70% 60% at 50% 0%,rgba(109,47,112,.46),transparent 70%),
  radial-gradient(40% 50% at 100% 100%,rgba(162,75,184,.14),transparent 70%),
  var(--coal)}
.sec--svc{background:
  radial-gradient(55% 45% at 0% 0%,rgba(109,47,112,.5),transparent 70%),
  radial-gradient(45% 40% at 100% 60%,rgba(162,75,184,.16),transparent 72%),
  var(--coal-2)}
.sec--proc{background:
  radial-gradient(60% 55% at 0% 0%,rgba(109,47,112,.42),transparent 70%),
  var(--coal)}

/* ===================================================== type collision ==== */
.h2{font-size:clamp(32px,4.2vw,58px);line-height:1.02;letter-spacing:-.036em;font-weight:300}
.h2 em{font-weight:700;letter-spacing:-.034em}
.on-dark .h2 em{color:#dcb0e8;text-shadow:0 0 34px rgba(162,75,184,.45)}
.h2--sm{font-size:clamp(24px,2.6vw,34px)}
.sec .h2{font-size:clamp(30px,3.4vw,46px)}
.sec--doc .h2.chap__h{font-size:clamp(26px,2.5vw,34px)}
.stmt__h{font-weight:300;letter-spacing:-.034em}
.stmt__h em{font-weight:700}
#services .h2,#why .h2,#areas .h2,#faq .h2,#schedule .h2{font-size:clamp(34px,4.5vw,62px)}

/* the H1: the two working lines heavy, the place light */
.h1{font-size:clamp(36px,4.6vw,66px);line-height:.98;letter-spacing:-.04em}
.h1 .ln--4{font-weight:300;letter-spacing:-.038em}
.h1 .x{color:#dcb0e8;text-shadow:0 0 44px rgba(162,75,184,.5)}
.h1--int{font-size:clamp(32px,4.4vw,62px);font-weight:300;line-height:1;letter-spacing:-.038em}
.h1--int em{font-weight:700;color:#dcb0e8;text-shadow:0 0 40px rgba(162,75,184,.45)}
.hero__c{max-width:830px}
.hero__lede{max-width:56ch}
/* the wider headline reaches further onto the photograph: the ramp holds dark longer */
.hero__scrim{background:
  linear-gradient(90deg,rgba(16,12,21,.96) 0%,rgba(16,12,21,.93) 36%,rgba(16,12,21,.84) 54%,
    rgba(16,12,21,.6) 68%,rgba(16,12,21,.3) 84%,rgba(16,12,21,.16) 100%),
  linear-gradient(180deg,rgba(16,12,21,.55) 0%,rgba(16,12,21,0) 26%)}
@media (max-width:900px){ .hero__scrim{background:linear-gradient(180deg,rgba(16,12,21,.8) 0%,
  rgba(16,12,21,.87) 40%,rgba(16,12,21,.94) 72%,rgba(16,12,21,.97) 100%)} }
.hero__in{min-height:clamp(580px,84vh,840px)}
.hero--int .hero__in{min-height:clamp(460px,62vh,620px)}

/* the label is a lit pill: a small dot and the words */
.eyebrow{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;
  padding:7px 14px 7px 11px;border-radius:999px;margin-bottom:20px;
  background:rgba(109,47,112,.055);border:1px solid rgba(109,47,112,.16);
  font-size:11.4px;letter-spacing:.16em}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--plum-vv);box-shadow:0 0 0 3px rgba(162,75,184,.16)}
.on-dark .eyebrow{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);
  color:var(--plum-lt)}
.on-dark .eyebrow::before{background:var(--plum-br);
  box-shadow:0 0 0 3px rgba(201,143,216,.16),0 0 12px var(--plum-vv)}
.shd--c .eyebrow{margin-inline:auto}

/* section heads lose the rule and tick - the type carries the hierarchy now */
.shd{border-top:0;padding-top:0}
.shd::before{display:none}

/* chapter rails keep a hairline, its start drawn in the accent */
.chap__hd::before{background:linear-gradient(90deg,var(--plum),var(--plum-vv))}
.on-dark .chap__hd::before,.chap__hd--flat::before{background:var(--plum-br);
  box-shadow:0 0 14px rgba(162,75,184,.7)}

/* ===================================================== buttons =========== */
/* pills, lit from above. A base colour under the gradient so the audit reads a
   real ground (white on #7a3580 = 7.9:1; on the top stop #94459a = 5.9:1). */
.btn{border-radius:999px;padding:15px 26px;
  background-color:#7a3580;
  background-image:linear-gradient(180deg,#94459a 0%,#7a3580 55%,#6a2c70 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.22),
    0 12px 26px -14px rgba(109,47,112,.85)}
.btn--lg{padding:17px 30px}
.btn::after{box-shadow:0 0 0 1px rgba(162,75,184,.3),0 18px 40px -14px rgba(162,75,184,.85)}
.btn--ghost{background:rgba(255,255,255,.05);background-image:none;
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn--dark{background-color:var(--coal);background-image:none}
@media (hover:hover){
  .btn:hover{background-color:#86398c;
    background-image:linear-gradient(180deg,#a04ca6 0%,#86398c 55%,#743078 100%)}
  .btn--ghost:hover{background:rgba(255,255,255,.1);background-image:none;
    border-color:rgba(255,255,255,.45)}
  .btn--dark:hover{background-color:var(--coal-3);background-image:none}
}
.btn:focus-visible{background-color:#86398c}
.fab{background-color:#7a3580;background-image:linear-gradient(180deg,#94459a,#6a2c70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px -10px rgba(0,0,0,.6)}

/* ===================================================== glass ============= */
/* light panes: near-opaque white, a bright top edge, a plum-tinted fall-off.
   Hairline borders do the containing; the shadow is depth, not decoration. */
.faq__i,.sec .plate,.sec .faq--v2,.sec .tw,
.sec .sbody > .feat--2,.sec .prg > .grp__i,.sec .bento__i:not(.bento__i--feat),
.sec .arsn__i,.wx,.area__ask,.why__bd .feat{
  background:var(--glass);background-color:#fff;
  border:1px solid var(--glass-bd);box-shadow:var(--glass-hi)}
.sec .sbody--note{background:var(--glass);background-color:#fff;
  border:1px solid var(--glass-bd);border-left:2px solid var(--plum);box-shadow:var(--glass-hi)}
.sec .plate,.sec .faq--v2,.sec .prg > .grp__i,.sec .bento__i,.sec .aidx,
.sec .sbody > .feat--2,.wx,.area__ask,.why__bd .feat{border-radius:var(--r-lg)}
.sec .aidx{background:#fff;box-shadow:var(--glass-hi)}
/* dark bands keep dark glass */
.on-dark .plate,.on-dark .faq--v2,.on-dark .tw,.on-dark .sbody > .feat--2,
.on-dark .prg > .grp__i,.on-dark .bento__i:not(.bento__i--feat),.on-dark .faq__i{
  background:linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.02) 60%);
  background-color:transparent;border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.bento__i--feat{box-shadow:0 30px 60px -30px rgba(109,47,112,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.prg .grp__h::before{background:var(--plum-vv)}

/* FAQ: separate panes, the open one lifted */
.faq{gap:12px}
.faq__i{border-radius:18px}
.faq__i[open]{border-color:rgba(109,47,112,.22);
  box-shadow:inset 0 1px 0 #fff,0 26px 50px -30px rgba(79,31,85,.4)}
.faq--v2 .faq__i{background:transparent;border:0;border-top:1px solid var(--line-2);
  border-radius:0;box-shadow:none}
.faq--v2 .faq__i:first-child{border-top:0}
.faq--v2 .faq__i[open] .faq__x{background-color:#7a3580;border-color:#7a3580}

/* ===================================================== services bento ==== */
/* Eleven services as ONE composed object: full-photograph tiles of three sizes,
   each captioned on a pane of smoked glass. Source order is untouched - grid
   placement does the arranging, so the stripped text still matches the .docx.
   Sizes come from the space the grid has (a container query), so the same rules
   serve the homepage's full wrap and an interior section. */
:has(> .svc__gr){container-type:inline-size}
.svc__gr{grid-auto-rows:minmax(360px,auto);gap:clamp(12px,1.3vw,18px)}
.svc__gr > .card{min-height:360px;background:#120e18;border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;box-shadow:none;
  transition:transform .5s var(--ease),border-color .3s var(--ease)}
.svc__gr > .card::after{display:none}
.svc__gr .card__ph,.svc__gr .card--feat .card__ph,.svc__gr .card--feat + .card .card__ph{
  position:absolute;inset:0;z-index:0;aspect-ratio:auto;min-height:0;border-radius:0;
  background:#120e18}
.svc__gr .card__ph img{filter:saturate(.92) contrast(1.04)}
.svc__gr .card__ph::after{opacity:1;background:
  linear-gradient(180deg,rgba(12,9,17,.2) 0%,rgba(12,9,17,0) 26%,rgba(12,9,17,.35) 55%,rgba(12,9,17,.86) 100%)}
.svc__gr .card__n{left:16px;top:16px;height:30px;min-width:40px;padding:0 11px;
  border-radius:999px;background:rgba(14,11,20,.78);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:12px;letter-spacing:.08em}
/* the caption pane - opaque enough that the copy never depends on the photo */
.svc__gr .card__bd,.svc__gr .card--feat .card__bd{position:relative;z-index:2;flex:0 0 auto;
  margin:auto 12px 12px;padding:18px 20px 20px;gap:8px;
  background:linear-gradient(165deg,rgba(32,25,40,.9),rgba(15,12,21,.9));
  background-color:rgba(15,12,21,.9);
  border:1px solid rgba(255,255,255,.11);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 20px 40px -24px rgba(0,0,0,.8);
  transition:border-color .3s var(--ease)}
.svc__gr .card__t{color:#fff;font-size:clamp(17.5px,1.4vw,20px);font-weight:600;letter-spacing:-.02em}
.svc__gr .card__d{color:rgba(255,255,255,.78);font-size:14.4px;flex:none}
.svc__gr .card__cta{color:#dcb0e8}
@media (hover:hover){
  .svc__gr > .card:hover{transform:translateY(-5px);border-color:rgba(201,143,216,.38)}
  .svc__gr > .card:hover .card__ph img{transform:scale(1.06)}
  .svc__gr > .card:hover .card__bd{border-color:rgba(201,143,216,.3)}
}
.svc__gr > .card:focus-visible{border-color:rgba(201,143,216,.5)}

/* 3 tracks wherever there is room: a 2x2 lead with two squares beside it,
   three squares, a double + a square, a square + a double, and the last service
   as a full-width banner - 18 cells, every row full. (Four tracks made 270px
   squares that were all caption and no photograph.) */
@container (min-width:640px){
  .svc__gr{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(400px,auto)}
  .svc__gr > .card:nth-child(1){grid-column:span 2;grid-row:span 2}
  .svc__gr > .card:nth-child(7),.svc__gr > .card:nth-child(10){grid-column:span 2}
  .svc__gr > .card:nth-child(11){grid-column:1 / -1;min-height:420px}
  .svc__gr > .card:nth-child(1) .card__bd{margin:auto 18px 18px;padding:26px 28px 28px;max-width:600px}
  .svc__gr > .card:nth-child(1) .card__t{font-size:clamp(23px,2.3vw,32px)}
  .svc__gr > .card:nth-child(1) .card__d{font-size:15.6px}
  .svc__gr > .card:nth-child(7) .card__bd,.svc__gr > .card:nth-child(10) .card__bd,
  .svc__gr > .card:nth-child(11) .card__bd{max-width:470px}
  .svc__gr > .card:nth-child(11) .card__ph img{object-position:50% 40%}
}
@container (min-width:500px) and (max-width:639.98px){
  .svc__gr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc__gr > .card:nth-child(1){grid-column:span 2}
}
@container (max-width:499.98px){
  .svc__gr{grid-template-columns:1fr;grid-auto-rows:minmax(340px,auto)}
  .svc__gr > .card{min-height:340px}
}

/* ===================================================== quote band ======== */
/* light, straight after the dark hero: a frosted pane on a pearl ground lit by
   two plum lights, its header a plum light-box */
.qband{background:var(--panel)}
.qband::before{background:
  radial-gradient(40% 70% at 8% 14%,rgba(162,75,184,.16),transparent 70%),
  radial-gradient(36% 64% at 94% 92%,rgba(109,47,112,.13),transparent 70%),
  radial-gradient(28% 50% at 64% 2%,rgba(227,194,236,.5),transparent 72%),
  linear-gradient(112deg,transparent 0 57%,rgba(255,255,255,.75) 57% 58.3%,
    transparent 58.3% 60%,rgba(255,255,255,.5) 60% 60.6%,transparent 60.6%)}
.qcard{box-shadow:inset 0 1px 0 #fff,0 40px 80px -40px rgba(79,31,85,.5),
  0 6px 18px -10px rgba(22,19,32,.14)}
.qcard__hd{background-color:#5a2560;
  background-image:linear-gradient(160deg,#7f3885 0%,#5a2560 46%,#2f1335 100%)}
.qcard__hd::before{background:linear-gradient(118deg,rgba(255,255,255,.11) 0 34%,transparent 34%)}
.qcard__hd::after{background:linear-gradient(90deg,var(--plum-br),rgba(255,255,255,.6) 40%,transparent 90%)}
.qcard__tel svg,.qcard__hrs svg{color:var(--plum-lt)}
.qcard__hrs{color:rgba(255,255,255,.88)}

/* ===================================================== why / areas ======= */
.why__ph,.proc__ph{border-radius:var(--r-xl)}
.why__ph{box-shadow:0 40px 80px -44px rgba(22,19,32,.6)}
.why__badge{border-radius:0 18px 0 0}
/* the reasons read as one glass pane of ruled rows */
.why__bd .feat{padding:10px clamp(18px,2.2vw,30px)}
.why__bd .feat__i:first-child{padding-top:17px}
.why__bd .feat__i{border-top-color:var(--line)}
.feat__ic{border:1px solid rgba(109,47,112,.14);border-radius:11px}
.on-dark .feat__ic{border-color:rgba(201,143,216,.22)}
.vm{border-radius:var(--r-xl)}
.map{border-radius:var(--r-lg)}

/* ===================================================== closing / colophon */
.ccard{border-radius:var(--r-xl)}
.foot{background:
  radial-gradient(50% 120% at 50% 0%,rgba(109,47,112,.18),transparent 70%),var(--coal-2)}

/* ===================================================== the glint ========= */
/* site.js gives a hovered surface one .glint and MOVES it (transform only) */
.glint{position:absolute;left:0;top:0;z-index:1;width:560px;height:560px;
  margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at center,rgba(240,214,247,.18) 0,rgba(201,143,216,.08) 26%,
    rgba(162,75,184,.035) 46%,transparent 66%);
  transition:opacity .45s var(--ease);will-change:transform}
/* on white glass the light reads as a faint plum sheen */
.why__bd .feat > .glint,.qcard > .glint{background:radial-gradient(circle at center,
  rgba(162,75,184,.09) 0,rgba(162,75,184,.04) 30%,transparent 62%)}
.is-glint > .glint{opacity:1}
.why__bd .feat,.qcard{position:relative;overflow:hidden}
.why__bd .feat > .glint{z-index:0}
.why__bd .feat > :not(.glint){position:relative;z-index:1}

/* the hours row inside the schedule band is a sub-head, not a section head */
#schedule .hours .h2,.hours .h2{font-size:clamp(24px,2.6vw,34px)}

/* ===================================================== THE ROUTE ========= */
/* "How to schedule" as a split stage (home-page.php). Grid AREAS place the
   three source blocks - head, steps, hours - so the DOM keeps the source
   order while the hours become an instrument under the head. The steps run
   down a vertical route whose light the reader drives (site.js measures the
   rule's orientation itself), each a glass card with a ghost numeral that
   lights when the light reaches it. Behind it all, a windshield in hairline. */
.sch-band{overflow:hidden}
.sch-band .wrap{position:relative;z-index:1}
.sch__glass{position:absolute;z-index:0;pointer-events:none;
  width:min(1100px,92vw);right:-14vw;top:50%;transform:translateY(-46%) rotate(-4deg)}
.sch{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:"head steps" "hours steps";grid-template-rows:auto 1fr;
  gap:clamp(26px,3vw,40px) clamp(36px,5vw,84px);align-items:start}
.sch__hd{grid-area:head;grid-template-columns:1fr;margin:0}
.sch__lede{margin-top:16px;max-width:44ch}
.sch .steps{grid-area:steps}
.sch .hours{grid-area:hours;align-self:end}

/* the route */
.sch .steps{display:grid;grid-template-columns:1fr;gap:16px;margin:0;counter-reset:route}
.sch .steps .steps__rule,.sch .steps.steps--live .steps__rule,.sch .steps.steps--live.in .steps__rule{
  left:27px;right:auto;top:30px;bottom:30px;width:2px;height:auto;
  background:linear-gradient(180deg,rgba(201,143,216,.3),var(--plum-br));
  box-shadow:0 0 14px rgba(162,75,184,.6);transform-origin:50% 0}
.sch .steps .steps__rule{transform:scaleY(0);transition:transform 1.1s var(--ease)}
.sch .steps.in .steps__rule{transform:scaleY(1)}
.sch .steps.steps--live .steps__rule,.sch .steps.steps--live.in .steps__rule{
  transform:scaleY(var(--p,0));transition:none}
/* the unlit route under the light */
.sch .steps::before{content:"";position:absolute;left:27px;top:30px;bottom:30px;width:2px;
  background:rgba(255,255,255,.1);border-radius:2px}

.sch .steps__s{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:0 22px;padding:0;counter-increment:route;isolation:isolate}
/* the glass card behind the words; the node stays out on the route */
.sch .steps__s::before{content:"";position:absolute;z-index:-1;left:78px;right:0;top:0;bottom:0;
  border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 55%),rgba(18,14,24,.55);
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .5s var(--ease),background-color .5s var(--ease)}
/* the ghost numeral - decoration, drawn by CSS, never read as copy */
.sch .steps__s::after{content:"0" counter(route);position:absolute;z-index:-1;right:22px;top:50%;
  transform:translateY(-50%);font-family:var(--f-disp);font-weight:800;
  font-size:clamp(84px,8vw,128px);line-height:1;letter-spacing:-.05em;
  color:rgba(255,255,255,.045);transition:color .6s var(--ease),text-shadow .6s var(--ease);
  pointer-events:none}
.sch .steps__n{grid-row:1 / span 2;margin:22px 0 0;width:56px;height:56px}
.sch .steps__t{grid-column:2;padding:26px clamp(20px,2.4vw,32px) 0;margin:0;
  font-size:clamp(19px,1.7vw,24px);font-weight:600;letter-spacing:-.022em;max-width:30ch}
.sch .steps__d{grid-column:2;padding:9px clamp(20px,2.4vw,32px) 26px;max-width:48ch;
  font-size:15.4px;color:rgba(255,255,255,.8)}
/* lit: the card catches the light */
.sch .steps__s.is-lit::before{border-color:rgba(201,143,216,.42);background-color:rgba(46,24,52,.6)}
.sch .steps__s.is-lit::after{color:rgba(220,176,232,.16);text-shadow:0 0 40px rgba(162,75,184,.5)}
/* no live light (reduced motion / no script): every card simply shows lit-free */
@media (hover:hover){
  .sch .steps__s:hover::before{border-color:rgba(201,143,216,.32)}
}

/* the hours instrument */
.sch .hours{display:block;margin:0;padding:clamp(24px,2.6vw,32px);border:1px solid rgba(255,255,255,.12);
  border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 50%),rgba(18,14,24,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 80px -40px rgba(0,0,0,.8)}
.sch .hours::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--plum-vv),var(--plum-br) 42%,transparent 88%)}
.sch .hours__l{margin-bottom:14px}
.sch .hours__l svg{width:30px;height:30px}
.sch .hours .h2{font-size:clamp(22px,2vw,28px)}
.sch .hours__v{font-size:15.6px}
.sch .now{margin-top:16px}
.sch__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1)}

@media (max-width:980px){
  .sch{grid-template-columns:1fr;grid-template-areas:"head" "steps" "hours";grid-template-rows:auto}
  .sch__glass{right:-40vw;top:auto;bottom:4%;transform:rotate(-4deg);width:140vw}
}
@media (max-width:560px){
  .sch .steps__s{grid-template-columns:44px minmax(0,1fr);gap:0 14px}
  .sch .steps__s::before{left:58px}
  .sch .steps__n{width:44px;height:44px;font-size:18px;margin-top:20px}
  .sch .steps .steps__rule,.sch .steps.steps--live .steps__rule,.sch .steps::before{left:21px}
  .sch .steps__t{padding:22px 18px 0}
  .sch .steps__d{padding:8px 18px 22px}
  .sch__acts .btn{flex:1 1 100%;justify-content:center}
}

/* route polish: the cards fill the column so both sides end level; the ghost
   numeral gets its own lane instead of sitting under the copy */
@media (min-width:981px){
  .sch .steps{align-self:stretch;grid-auto-rows:1fr;gap:18px}
  .sch .steps__s{align-content:center}
  .sch .steps__t,.sch .steps__d{padding-right:clamp(120px,10vw,160px)}
  .sch .steps__n{margin-top:0;align-self:center;grid-row:1 / span 2}
}
@media (max-width:980px){
  .sch .steps__s::after{top:14px;right:16px;transform:none;font-size:56px;color:rgba(255,255,255,.04)}
  .sch .steps__s.is-lit::after{color:rgba(220,176,232,.1)}
  .sch .steps__t{padding-right:76px}
}

/* ===================================================== THE GLASS CAR ===== */
/* (inc/glass-car.php) The services section's centrepiece and the site's WOW:
   a car drawn from above in hairline that draws itself in, then names its own
   glass - each pane lights in the neon in turn until the visitor takes over;
   hover or focus a pane and it lights, names its service, and the matching
   photo tile below rises to meet it. Every pane is a link. */
.svc__hd{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;
  margin-bottom:clamp(40px,5vw,70px)}
.svc__lede{margin-top:20px}
.svc__lede .lede{max-width:46ch}
.gcar{margin:0;position:relative;perspective:1400px}
.gcar::before{content:"";position:absolute;left:8%;right:8%;top:18%;bottom:10%;z-index:0;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(162,75,184,.34),rgba(109,47,112,.12) 60%,transparent)}
.gcar__stage{position:relative;z-index:1;transform:rotateX(16deg) rotateZ(-6deg);
  transition:transform .9s var(--ease);will-change:transform}
.gc{display:block;width:100%;height:auto;overflow:visible}
.gc__body path,.gc__body rect,.gc__body ellipse{fill:none;stroke:rgba(227,194,236,.62);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gc__body path:first-child{fill:rgba(255,255,255,.035);stroke:rgba(240,214,247,.85);stroke-width:1.8}
.gc__lamp path{fill:none;stroke:#fff6ee;stroke-width:3;stroke-linecap:round}
.gc__lamp .gc__tail{stroke:#e98bd0}
.gc__p{stroke:rgba(201,143,216,.7);stroke-width:1.3;
  transition:fill .35s var(--ease),stroke .35s var(--ease)}
.gc__a{cursor:pointer;outline:none}
.gc__a:hover .gc__p,.gc__a:focus-visible .gc__p,.gc__a.is-on .gc__p{fill:rgba(170,80,190,.62);
  stroke:#f6e2fb;stroke-width:2.2;filter:drop-shadow(0 0 9px rgba(214,150,232,.95))}
.gc__hit{fill:transparent}
.gc__dot{fill:#f6e2fb;transition:fill .3s var(--ease)}
.gc__ping{fill:none;stroke:var(--plum-br);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center}
.gc__m:hover .gc__dot,.gc__m:focus-visible .gc__dot,.gc__m.is-on .gc__dot{fill:#fff}
.gc__m:hover .gc__ping,.gc__m:focus-visible .gc__ping,.gc__m.is-on .gc__ping{
  animation:gc-ping 1.6s var(--ease) infinite}
@keyframes gc-ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}

/* drawn on: the body, line by line, then the glass fades up */
.js .gc--map .gc__body > *{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.7s var(--ease)}
.js .svc__hd.in .gc--map .gc__body > *{stroke-dashoffset:0}
.js .svc__hd.in .gc--map .gc__body > :nth-child(n+2){transition-delay:.25s}
.js .svc__hd.in .gc--map .gc__body > :nth-child(n+7){transition-delay:.5s}
.js .gc--map .gc__glass,.js .gc--map .gc__marks,.js .gc--map .gc__lamp{opacity:0;
  transition:opacity .9s var(--ease) 1.1s}
.js .svc__hd.in .gc--map .gc__glass,.js .svc__hd.in .gc--map .gc__marks,
.js .svc__hd.in .gc--map .gc__lamp{opacity:1}

/* the readout names the glass under the light */
.gcar__read{position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:100%;margin:clamp(6px,1vw,14px) auto 0;padding:10px 18px 10px 14px;
  border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(18,14,24,.7);
  font-family:var(--f-disp);font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.gcar__dot{width:8px;height:8px;border-radius:50%;background:var(--plum-br);
  box-shadow:0 0 0 3px rgba(201,143,216,.18),0 0 12px var(--plum-vv)}
.gcar__read svg{width:16px;height:16px;color:var(--plum-lt);opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--ease),transform .4s var(--ease)}
.gcar.is-active .gcar__read svg{opacity:1;transform:none}

/* the tile of the lit service rises to meet it */
.svc__gr > .card.is-hot{transform:translateY(-6px);border-color:rgba(214,166,227,.7);
  box-shadow:0 0 0 1px rgba(201,143,216,.35),0 34px 70px -34px rgba(162,75,184,.85)}
.svc__gr > .card.is-hot .card__bd{border-color:rgba(214,166,227,.45)}

@media (max-width:860px){
  .gcar__stage{transform:none}
  .svc__hd .gcar{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .gcar__stage{transform:none;transition:none}
  .gc__a .gc__ping{animation:none!important}
}

/* the quote card's shade band carries the same car, still, windshield lit */
.qcard__car{display:block;margin:auto -6px;position:relative}
.qcard__car::before{content:"";position:absolute;inset:10% 6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(240,214,247,.22),transparent)}
.qcard__car .gc{position:relative}
.gc--plate .gc__body path,.gc--plate .gc__body rect,.gc--plate .gc__body ellipse{fill:none;
  stroke:rgba(255,255,255,.5);stroke-width:1.6}
.gc--plate .gc__body path:first-child{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.8)}
.gc--plate .gc__p{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.55)}
.gc--plate .gc__p--ws{fill:rgba(240,214,247,.6);stroke:#fff;stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(255,235,252,.85))}
.gc--plate .gc__lamp .gc__tail{stroke:#ffb3e6}
.qcard__hd .qcard__tel{margin-top:0}
@media (max-width:860px){ .qcard__car{display:none} .qcard__hd .qcard__tel{margin-top:0} }

/* glass car, round 2: the heading takes less of the stage, the car sits flatter */
.svc__hd .h2{font-size:clamp(32px,3.7vw,54px)}
.gcar__stage{transform:rotateX(10deg) rotateZ(-7deg)}
@media (max-width:860px){ .gcar__stage{transform:rotateZ(-4deg)} }
#services .svc__hd .h2{font-size:clamp(32px,3.6vw,52px)}
.gc--map .gc__p{fill:rgba(162,75,184,.16)}
@media (max-width:860px){ .svc__hd{grid-template-columns:1fr;gap:22px} .gcar__read{font-size:14px} }
@media (max-width:860px){ .gcar__stage{width:92%;margin-inline:auto} }

/* ===================================================== CREDENTIAL BOARD == */
/* (home-page.php, #why) The photograph as a matted print at the centre, the
   eight reasons as white glass tiles around it, the call line as a dark glass
   bar - the light band's one dark accent. Titles stay at reading weight (the
   client has flagged heavy repeated type three times). */
.wboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)}
.wboard__ph{grid-column:2 / span 2;grid-row:1 / span 2;position:relative;margin:0;min-height:420px;
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:var(--panel-2);
  box-shadow:0 50px 90px -50px rgba(22,19,32,.65),0 0 0 1px rgba(17,14,22,.06)}
.wboard__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  transition:transform 1.4s var(--ease)}
.wboard__ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,12,21,0) 55%,rgba(16,12,21,.55) 100%)}
/* the mat: a hairline frame set inside the print */
.wboard__mat{position:absolute;inset:14px;z-index:2;border-radius:calc(var(--r-xl) - 10px);
  border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.wboard__ph .why__badge{z-index:3;left:14px;bottom:14px;border-radius:0 16px 0 calc(var(--r-xl) - 10px)}
@media (hover:hover){ .wboard__ph:hover img{transform:scale(1.04)} }

.wt{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;
  min-height:220px;padding:clamp(20px,1.9vw,26px);border-radius:22px;
  background:linear-gradient(170deg,#fff 0%,#fff 55%,#fbf7fc 100%);
  border:1px solid rgba(17,14,22,.07);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,14,22,.04),0 24px 46px -32px rgba(79,31,85,.35);
  transition:transform .5s var(--ease),border-color .3s var(--ease),box-shadow .5s var(--ease)}
.wt::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--plum-vv),transparent);opacity:0;transition:opacity .4s var(--ease)}
.wt__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:auto;padding-bottom:18px}
.wt__ic{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:linear-gradient(145deg,#faf3fc,#efe1f4);border:1px solid rgba(109,47,112,.16);
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -10px rgba(109,47,112,.5);color:var(--plum);
  transition:background .4s var(--ease),color .3s var(--ease)}
.wt__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.wt__n{font-family:var(--f-disp);font-weight:300;font-size:34px;line-height:1;letter-spacing:-.04em;
  color:var(--plum-vv);font-variant-numeric:tabular-nums}
.wt__t{display:block;font-family:var(--f-disp);font-weight:500;font-size:clamp(16.5px,1.3vw,18.5px);
  line-height:1.26;letter-spacing:-.016em;color:var(--ink)}
.wt__d{display:block;font-size:14.4px;line-height:1.58;color:var(--gray);text-wrap:pretty}
@media (hover:hover){
  .wt:hover{transform:translateY(-5px);border-color:rgba(109,47,112,.22);
    box-shadow:inset 0 1px 0 #fff,0 40px 70px -36px rgba(79,31,85,.5)}
  .wt:hover::before{opacity:1}
  .wt:hover .wt__ic{background:linear-gradient(145deg,#94459a,#6a2c70);color:#fff;border-color:transparent}
}
.wt > .glint{background:radial-gradient(circle at center,rgba(162,75,184,.09) 0,rgba(162,75,184,.035) 30%,transparent 62%)}
.wt > :not(.glint){position:relative;z-index:1}

/* the call line: a dark glass bar */
.wask{margin-top:clamp(16px,1.6vw,22px);padding:clamp(20px,2.2vw,28px) clamp(22px,2.6vw,34px);
  border:0;border-radius:var(--r-xl);position:relative;overflow:hidden;
  background:radial-gradient(60% 140% at 0% 0%,rgba(162,75,184,.45),transparent 70%),
    linear-gradient(120deg,#231a2e,var(--coal) 60%);background-color:var(--coal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 80px -44px rgba(22,19,32,.8)}
.wask p{color:#fff;font-size:clamp(17px,1.5vw,21px)}

/* 8 reasons around the print: r1 [ph] r2 / r3 [ph] r4 / r5 r6 r7 r8 */
@media (min-width:1101px){
  .wboard > .wt:nth-of-type(1){grid-column:1;grid-row:1}
  .wboard > .wt:nth-of-type(2){grid-column:4;grid-row:1}
  .wboard > .wt:nth-of-type(3){grid-column:1;grid-row:2}
  .wboard > .wt:nth-of-type(4){grid-column:4;grid-row:2}
}
@media (max-width:1100px){
  .wboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wboard__ph{grid-column:1 / -1;grid-row:auto;min-height:0;aspect-ratio:16/9}
}
@media (max-width:620px){
  .wboard{grid-template-columns:1fr}
  .wt{min-height:0}
  .wask .btn{flex:1 1 100%;justify-content:center}
}

/* ===================================================== TYPE: LEXEND ====== */
/* 2026-10-21. Headings in Lexend Giga (wide, airy - the luxury-car-badge voice),
   the collision now 200 against 600; titles/labels/numerals in Lexend Deca via
   --f-disp. Giga sets ~25% wider than Funnel, so every display size steps down
   and the tracking tightens. Hyphens come from 'LV Hyphen' (site.css). */
.h1,.h2,.h1--int,.chap__h,.stmt__h,.stmt__n,.wt__n,.sch .steps__s::after{font-family:var(--f-hero)}
.h1{font-size:clamp(30px,3.85vw,56px);line-height:1.04;letter-spacing:-.06em;font-weight:600}
.h1 .ln--1{font-family:var(--f-disp);letter-spacing:.12em;font-weight:500}
.h1 .ln--4{font-weight:200;letter-spacing:-.055em}
.h1--int{font-size:clamp(27px,3.5vw,50px);font-weight:200;line-height:1.06;letter-spacing:-.055em}
.h1--int em{font-weight:600}
.h2{font-weight:200;letter-spacing:-.055em;line-height:1.08}
.h2 em,.on-dark .h2 em{font-weight:600;letter-spacing:-.05em}
.h2{font-size:clamp(27px,3.4vw,48px)}
.sec .h2{font-size:clamp(25px,2.8vw,40px)}
#services .h2,#why .h2,#areas .h2,#faq .h2,#schedule .h2{font-size:clamp(28px,3.5vw,50px)}
#services .svc__hd .h2{font-size:clamp(27px,3vw,44px)}
.sec--doc .h2.chap__h,.chap__h{font-size:clamp(22px,2.05vw,29px);font-weight:200}
.stmt__h{font-size:clamp(23px,2.3vw,32px);font-weight:200}
.h2--sm,.hours .h2,#schedule .hours .h2,.sch .hours .h2{font-size:clamp(20px,1.9vw,26px)}
.stmt__n{font-weight:600;letter-spacing:-.06em}
.wt__n{font-weight:200;font-size:30px;letter-spacing:-.06em}
.sch .steps__s::after{font-weight:600;letter-spacing:-.08em}
/* titles in Deca: a touch lighter than Funnel's 600 reads the same weight */
.svc__gr .card__t,.sch .steps__t,.wt__t,.feat__t,.steps__t,.area__h,.card__t{letter-spacing:-.02em}
.svc__gr .card__t,.sch .steps__t{font-weight:500}
.wt__t{font-weight:400}
.qcard__t,.ccard__tel,.qcard__tel,.foot__tel{letter-spacing:-.03em}
.brand__tx{letter-spacing:-.035em}

/* ===================================================== VALLEY CONSOLE ==== */
/* (#areas) The radar map and the area pages share one dark console - the
   light band's dark figure. Rows are numbered glass pills; a row lights its
   point on the map and the map lights the row. Neighbourhoods follow as a
   cloud of glass pills on the light ground. */
.vcon{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(18px,2.4vw,36px);padding:clamp(14px,1.6vw,22px);border-radius:32px;isolation:isolate;
  background:radial-gradient(60% 70% at 100% 0%,rgba(162,75,184,.32),transparent 70%),
    radial-gradient(50% 60% at 0% 100%,rgba(109,47,112,.3),transparent 70%),var(--coal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 60px 110px -60px rgba(22,19,32,.85),0 0 0 1px rgba(17,14,22,.08)}
.vcon::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:32px 32px 0 0;
  background:linear-gradient(90deg,transparent 4%,var(--plum-br) 30%,rgba(255,255,255,.7) 50%,var(--plum-br) 70%,transparent 96%)}
.vcon__map .vm{border-radius:22px;max-height:none;height:100%;min-height:clamp(420px,46vw,640px);aspect-ratio:auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vcon__ls{padding:clamp(14px,1.8vw,26px) clamp(6px,1vw,14px) clamp(14px,1.8vw,26px) 0;align-self:center}
.vcon .area__h{color:#fff;font-size:clamp(19px,1.6vw,23px);font-weight:500;margin-bottom:18px}
.vcon .area__i{color:rgba(255,255,255,.72)}
.vcon .area__ls{display:grid;grid-template-columns:1fr;gap:8px;border:0}
.vcon .area__r{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:13px 16px;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  color:rgba(255,255,255,.9);font-family:var(--f-disp);font-size:15.5px;font-weight:400;letter-spacing:-.01em;
  transition:transform .45s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
.vcon a.area__r::after{display:none}
.vcon .area__n{font-family:var(--f-hero);font-weight:300;font-size:13px;letter-spacing:.02em;color:var(--plum-br);
  font-variant-numeric:tabular-nums}
.vcon a.area__r > svg:last-child{opacity:.45;transform:none;color:var(--plum-lt);width:16px;height:16px}
.vcon a.area__r:hover,.vcon a.area__r:focus-visible,.vcon a.area__r.is-lit{transform:translateX(6px);color:#fff;
  border-color:rgba(214,166,227,.55);background-color:rgba(162,75,184,.22);
  box-shadow:0 0 0 1px rgba(201,143,216,.15),0 16px 34px -18px rgba(162,75,184,.8)}
.vcon a.area__r:hover > svg:last-child,.vcon a.area__r.is-lit > svg:last-child,
.vcon a.area__r:focus-visible > svg:last-child{opacity:1;transform:translateX(3px)}
.js .ro.in .vcon__ls .area__r{transition-delay:0s}

/* the neighbourhood cloud */
.acloud{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,3vw,48px);
  align-items:start;margin-top:clamp(36px,4vw,56px)}
.acloud .area__h{font-size:clamp(19px,1.6vw,23px);font-weight:500}
.acloud__ls{display:flex;flex-wrap:wrap;gap:10px}
.achip{display:inline-flex;align-items:center;gap:8px;padding:11px 18px 11px 13px;border-radius:999px;
  background:linear-gradient(170deg,#fff,#fbf7fc);border:1px solid rgba(17,14,22,.08);
  box-shadow:inset 0 1px 0 #fff,0 10px 22px -16px rgba(79,31,85,.45);
  font-family:var(--f-disp);font-size:14.6px;font-weight:400;color:var(--ink-2);
  transition:transform .4s var(--ease),border-color .25s var(--ease)}
.achip svg{width:15px;height:15px;color:var(--plum-vv);fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .achip:hover{transform:translateY(-2px);border-color:rgba(109,47,112,.25)} }
.js .acloud__ls .achip{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.js .acloud.in .achip{opacity:1;transform:none}
.js .acloud.in .achip:nth-child(n+5){transition-delay:.06s}
.js .acloud.in .achip:nth-child(n+9){transition-delay:.12s}
@media (prefers-reduced-motion:reduce){ .js .acloud__ls .achip{opacity:1;transform:none} }

@media (max-width:980px){
  .vcon{grid-template-columns:1fr}
  .vcon__map .vm{min-height:0;height:auto;aspect-ratio:var(--vm-ar)}
  .vcon__ls{padding:6px 4px 10px}
  .acloud{grid-template-columns:1fr}
}

/* the areas call line matches the why section's: a dark glass bar */
.area__ask{border:0;border-radius:var(--r-xl);padding:clamp(20px,2.2vw,28px) clamp(22px,2.6vw,34px);
  background:radial-gradient(60% 140% at 0% 0%,rgba(162,75,184,.45),transparent 70%),
    linear-gradient(120deg,#231a2e,var(--coal) 60%);background-color:var(--coal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 80px -44px rgba(22,19,32,.8)}
.area__ask p{color:#fff}
.area__ask p a{color:#fff;text-decoration-color:var(--plum-br)}

/* the radar's labels are SVG text painted by fill; give the figure the matching colour so audits read what is drawn */
.vm{color:#fff}

/* ===================================================== PLATE CAR MOTION == */
/* The quote card's car, alive (2026-10-21): the headlights breathe, a scan of
   light travels the car nose to tail, and each pane lights in turn as the scan
   passes - the glass being checked - while the car floats a few pixels. All of
   it is opacity/transform on a ~300px SVG, and it runs only while the card is
   on screen (.is-live, site.js); reduced motion keeps the still drawing. */
.gc__beams{opacity:.0}
.gc__scan{opacity:0}
.qcard__car.is-live .gc{animation:pc-float 6s ease-in-out infinite}
.qcard__car.is-live .gc__beams{animation:pc-beam 3.2s ease-in-out infinite}
.qcard__car.is-live .gc__scan{animation:pc-scan 4.8s cubic-bezier(.45,0,.25,1) infinite;
  transform-box:view-box}
.qcard__car.is-live .gc--plate .gc__p{animation:pc-pane 4.8s ease-out infinite;
  animation-delay:calc(var(--sd,0) * 1s)}
/* when the scan reaches each pane (nose -> tail): windshield, front sides, rear sides, rear glass */
.gc--plate .gc__p--ws{--sd:.55}
.gc--plate .gc__p--sd{--sd:1.05}
.gc--plate .gc__p--cw{--sd:1.6}
.gc--plate .gc__p--rg{--sd:2.1}
.qcard__car.is-live .gc__tail{animation:pc-tail 2.4s ease-in-out infinite}
@keyframes pc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pc-beam{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes pc-scan{0%{transform:translateY(0);opacity:0}8%{opacity:1}62%{opacity:1}
  70%{transform:translateY(760px);opacity:0}100%{transform:translateY(760px);opacity:0}}
@keyframes pc-pane{0%,100%{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.55)}
  8%{fill:rgba(255,240,252,.85);stroke:#fff}30%{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.6)}}
@keyframes pc-tail{0%,100%{opacity:.55}50%{opacity:1}}
/* the windshield's resting state stays lit between passes */
.qcard__car.is-live .gc--plate .gc__p--ws{animation-name:pc-ws}
@keyframes pc-ws{0%,100%{fill:rgba(240,214,247,.5)}8%{fill:rgba(255,240,252,.85)}30%{fill:rgba(240,214,247,.55)}}
@media (prefers-reduced-motion:reduce){
  .qcard__car .gc,.qcard__car .gc *{animation:none!important}
  .gc__beams{opacity:.5}
}
/* ===================================================== TYPE: GENERAL SANS */
/* 2026-10-21, the client's pick (supersedes the Lexend block above). One family for
   every heading, title, label and numeral; the collision is 300 against 600. General
   Sans sets at roughly Funnel's width, so the sizes return near the pre-Lexend scale. */
.h1{font-size:clamp(34px,4.5vw,66px);line-height:1;letter-spacing:-.042em;font-weight:600}
.h1 .ln--1{letter-spacing:.14em;font-weight:500}
.h1 .ln--4{font-weight:300;letter-spacing:-.04em}
.h1--int{font-size:clamp(30px,4vw,58px);font-weight:300;line-height:1.02;letter-spacing:-.04em}
.h1--int em{font-weight:600}
.h2{font-weight:300;letter-spacing:-.042em;line-height:1.04;font-size:clamp(30px,3.9vw,56px)}
.h2 em,.on-dark .h2 em{font-weight:600;letter-spacing:-.038em}
.sec .h2{font-size:clamp(28px,3.2vw,44px)}
#services .h2,#why .h2,#areas .h2,#faq .h2,#schedule .h2{font-size:clamp(32px,4.2vw,60px)}
#services .svc__hd .h2{font-size:clamp(30px,3.4vw,50px)}
.sec--doc .h2.chap__h,.chap__h{font-size:clamp(24px,2.3vw,32px);font-weight:300}
.stmt__h{font-size:clamp(25px,2.6vw,35px);font-weight:300}
.h2--sm,.hours .h2,#schedule .hours .h2,.sch .hours .h2{font-size:clamp(21px,2.1vw,28px)}
.stmt__n{font-weight:600;letter-spacing:-.05em}
.wt__n{font-weight:300;font-size:32px;letter-spacing:-.05em}
.sch .steps__s::after{font-weight:600;letter-spacing:-.06em}
.svc__gr .card__t,.sch .steps__t,.wt__t,.feat__t,.steps__t,.area__h,.card__t{letter-spacing:-.015em}
.svc__gr .card__t,.sch .steps__t{font-weight:500}
.wt__t{font-weight:500}
.vcon .area__n{font-weight:400}
/* tracking as approved in the specimen */
.h1{letter-spacing:-.035em}.h1 .ln--4,.h1--int,.h2{letter-spacing:-.034em}.h2 em,.on-dark .h2 em,.h1--int em{letter-spacing:-.03em}

/* a solid base under the radar's gradient, so audits resolve the ground the labels sit on */
.vm{background-color:var(--coal)}