/* ═══ Brand Guidelines v2.0 — nested-droplet identity ═══════════════════════ */
:root{
  --blue:#3C6BA7; --current:#5391BE; --teal:#62AC9F; --green:#81C782;
  --harbor:#16325C; --navy:#2D5286; --blue-hover:#325A8D;
  --sky:#8FBEDD; --vapor:#DCEAF5; --cloud:#F4F8FB;
  --teal-deep:#26766B; --green-deep:#2F7D4A;
  --ink:#16202C; --slate:#4F5B6B; --line:#D8E2EC;
  --ok:#2F7D4A; --elev:#8A5A06; --act:#C0431B;
  --ok-bg:#EAF5EE; --elev-bg:#FBF3E2; --act-bg:#FBEDE9; --none-bg:#EEF2F6;

  --page:var(--cloud); --surface:#fff; --panel:var(--vapor);
  --body:var(--ink); --muted:var(--slate); --head:var(--harbor);
  --rule:var(--line); --accent:var(--green-deep); --link:var(--blue);
  --sans:Montserrat,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 1px 2px rgba(22,50,92,.05),0 8px 24px rgba(22,50,92,.07);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#0A1626; --surface:#101F35; --panel:#1629410;
  --panel:#152841; --body:#DCE7F2; --muted:#9DB2C9; --head:#EAF2FA;
  --rule:#24405F; --accent:#8FD79B; --link:#8FBEDD;
  --ok:#7FCC97; --elev:#E0B963; --act:#F09070;
  --ok-bg:#123527; --elev-bg:#33290F; --act-bg:#3B1D14; --none-bg:#17293F;
  --vapor:#152841; --cloud:#0A1626; --sky:#8FBEDD;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --page:#0A1626; --surface:#101F35; --panel:#152841;
  --body:#DCE7F2; --muted:#9DB2C9; --head:#EAF2FA;
  --rule:#24405F; --accent:#8FD79B; --link:#8FBEDD;
  --ok:#7FCC97; --elev:#E0B963; --act:#F09070;
  --ok-bg:#123527; --elev-bg:#33290F; --act-bg:#3B1D14; --none-bg:#17293F;
  --vapor:#152841; --cloud:#0A1626;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
/* the canvas below the footer (iOS bounce, short pages) matches the footer */
html{background:#061120}
textarea{vertical-align:top}
body{background:var(--page);color:var(--body);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
img{max-width:100%}
h1,h2,h3,h4{color:var(--head);text-wrap:balance;font-weight:600}
h1{font-size:clamp(2rem,1.4rem + 2.7vw,3.1rem);line-height:1.05;font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.05rem);line-height:1.18;letter-spacing:-.015em}
h3{font-size:1.14rem;line-height:1.35}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,36px)}
.lede{font-size:1.1rem;line-height:1.6;color:var(--muted);max-width:60ch;margin-top:14px}
p.sm{font-size:.93rem;line-height:1.62;color:var(--muted)}

/* ── graphic elements ─────────────────────────────────────────────────────── */
/* Stage bar: the four ring colors laid flat, in order. */
.stagebar{display:flex;height:5px;border-radius:3px;overflow:hidden}
.stagebar i{flex:1}
.stagebar i:nth-child(1){background:var(--blue)}
.stagebar i:nth-child(2){background:var(--current)}
.stagebar i:nth-child(3){background:var(--teal)}
.stagebar i:nth-child(4){background:var(--green)}
/* The green core: one per layout, marking the result. */
.core{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
/* The ring echo: concentric arcs off a corner, dark panels only. */
.echo{position:absolute;pointer-events:none;opacity:.45}

/* ── chrome ───────────────────────────────────────────────────────────────── */
.hdr{position:relative;z-index:50;background:var(--surface);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:1.06;font-weight:700;letter-spacing:.01em}
.brand .wm span:nth-child(1){color:var(--current)}
.brand .wm span:nth-child(2){color:var(--blue)}
.brand .wm span:nth-child(3){color:var(--navy)}
:root[data-theme="dark"] .brand .wm span:nth-child(3){color:var(--sky)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .wm span:nth-child(3){color:var(--sky)}
}
.hdrNav{display:flex;align-items:center;gap:20px;margin-left:auto;flex:1;justify-content:flex-end}
nav.main{display:flex;gap:2px;flex-wrap:wrap}
/* a top-level item and the panel it opens on hover */
.navItem{position:relative}
.navTop{display:inline-flex;align-items:center}
.navCar{width:13px;height:13px;margin-left:6px;flex:none;opacity:0;
  transform:translateY(-2px);transition:opacity .18s ease,transform .18s ease}
.navItem:hover .navCar,.navItem:focus-within .navCar{opacity:.8;transform:none}
/* on the section you are already in, the arrow stays put inside the blue box */
nav.main .navTop[aria-current="page"] .navCar{opacity:.85;transform:none}
.navMenu{position:absolute;top:100%;left:0;z-index:70;padding-top:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.navItem:hover .navMenu,.navItem:focus-within .navMenu{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.navCard{min-width:252px;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;padding:6px;display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgba(22,50,92,.17)}
nav.main .navCard a{display:flex;align-items:center;text-decoration:none;font:inherit;text-align:left;white-space:nowrap;
  font-size:14px;font-weight:500;line-height:1.3;min-height:38px;padding:8px 12px;border-radius:8px;color:var(--body);cursor:pointer}
nav.main .navCard a:hover{background:var(--panel);color:var(--head)}
nav.main .navCard a:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
nav.main .navCard button{text-align:left;white-space:nowrap;font-size:14px;font-weight:500;
  min-height:38px;padding:8px 12px;border-radius:8px;color:var(--body)}
nav.main .navCard button:hover{background:var(--panel);color:var(--head)}
nav.main .navCard button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.navContact{display:none}
.navToggle{display:none;appearance:none;border:0;background:transparent;cursor:pointer;
  width:46px;height:46px;margin-left:auto;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.navToggle span{display:block;width:24px;height:2px;border-radius:1px;background:var(--head);
  transition:transform .26s cubic-bezier(.3,0,.2,1),opacity .16s ease}
body.navOpen .navToggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.navOpen .navToggle span:nth-child(2){opacity:0}
body.navOpen .navToggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── phones and small tablets: one row, the rest behind the toggle ───────── */
@media (max-width:900px){
  .hdr .wrap{height:64px;gap:12px}
  .navToggle{display:flex}
  .hdrNav{position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--surface);border-top:1px solid var(--rule);
    box-shadow:0 16px 34px rgba(22,50,92,.16);
    padding:8px clamp(18px,4vw,36px) 16px;
    display:none}
  body.navOpen .hdrNav{display:flex}
  .hdrNav nav.main{flex-direction:column;align-items:stretch;gap:0}
  .hdrNav nav.main button{text-align:left;font-size:16px;min-height:52px;
    border-radius:8px;padding:0 12px}
  /* on a phone the top-level item opens its list rather than navigating */
  .navCar{display:block;opacity:.55;transform:none;margin-left:auto;
    transition:transform .22s ease}
  .navItem.open > .navTop .navCar{transform:rotate(180deg);opacity:.9}
  .hdrNav nav.main .navTop{display:flex;width:100%;align-items:center}
  .navMenu{position:static;opacity:1;visibility:visible;transform:none;padding:0 0 6px;
    display:none}
  .navItem.open .navMenu{display:block}
  .navCard{min-width:0;background:transparent;border:0;border-radius:0;padding:0 0 0 12px;
    box-shadow:none;border-left:2px solid var(--rule);margin-left:12px}
  .hdrNav nav.main .navCard button{font-size:15px;min-height:44px;color:var(--muted)}
  .hdrNav nav.main .navCard a{font-size:15px;min-height:44px;color:var(--muted)}
  /* the panel is navigation; the consultation CTA lives on the pages */
  .hdrNav .btn.p{display:none}
  .hdrNav .navContact{display:block}
  /* the open panel covers the hero hamburger; the ribbon X is the close control */
  body.navOpen .burger{opacity:0;pointer-events:none}
}
nav.main button{appearance:none;border:0;background:transparent;font:inherit;font-size:14.5px;min-height:44px;
  font-weight:500;color:var(--body);padding:9px 14px;border-radius:8px;cursor:pointer;min-height:40px}
nav.main button[aria-current="page"]{background:var(--panel);color:var(--head);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-family:inherit;font-weight:600;font-size:15px;padding:12px 22px;border-radius:8px;
  border:0;cursor:pointer;min-height:46px;transition:background .15s,border-color .15s}
.btn.p{background:var(--blue);color:#fff}
.btn.p:hover{background:var(--blue-hover)}
.btn.g{background:var(--green);color:#12301D}
.btn.o{background:transparent;color:var(--link);border:1.5px solid var(--rule)}
.btn.o:hover{border-color:var(--link)}
.btn.lg{font-size:16.5px;padding:15px 24px;min-height:54px}
.btn.w{width:100%}
.hdr .btn{flex:none}

/* ── sections ─────────────────────────────────────────────────────────────── */
section.band{padding:clamp(48px,6vw,84px) 0;position:relative}
.band.panel{background:var(--panel)}
.band.surface{background:var(--surface)}
.band.dark{background:var(--harbor);color:var(--sky);overflow:hidden}
.band.dark h2,.band.dark h3{color:#fff}
.band.dark .eyebrow{color:var(--green)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:24px;min-width:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid}
.chip.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.chip.elev{background:var(--elev-bg);border-color:transparent;color:var(--elev)}
.chip.act{background:var(--act-bg);border-color:transparent;color:var(--act)}
.chip.none{background:var(--none-bg);border-color:transparent;color:var(--muted)}
.chip.std{background:var(--ok-bg);border-color:transparent;color:var(--teal-deep,var(--teal))}
/* trade tiles on the Businesses hub */
.bizTile{appearance:none;font:inherit;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.bizTile:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(22,50,92,.10)}
.bizTile:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bizTile h3{font-size:1.06rem;letter-spacing:-.01em;margin:0;color:var(--head)}
.bizTile p{margin:0;font-size:14.4px;line-height:1.55;color:var(--muted)}
.bizTile .pLink{margin-top:6px;pointer-events:none}
/* links styled as the buttons they replaced */
a.bizTile,a.featBtn,a.pLink{text-decoration:none}
a.bizTile{color:var(--body)}
.chip.sample{background:transparent;border-color:var(--elev);color:var(--elev)}
.chipBtn{font-family:inherit;cursor:pointer;border-width:1px;border-style:solid;
  border-color:transparent;transition:box-shadow .18s}
.chipBtn i{font-style:normal;margin-left:8px;width:15px;height:15px;border-radius:50%;
  display:inline-grid;place-items:center;border:1px solid currentColor;opacity:.6;
  font-size:9.5px;font-family:var(--mono)}
.chipBtn:hover{box-shadow:0 0 0 2px currentColor}
.chipBtn:hover i{opacity:1}

.wl{stroke-dasharray:1;stroke-dashoffset:1}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.wl{animation:none!important;stroke-dashoffset:0}}


/* ── the top bar: absent over the hero, arriving on scroll ─────────────── */
body{--topH:75px}
@media (max-width:900px){html body{--topH:65px}}
.topbar{position:fixed;top:0;left:0;right:0;z-index:70;
  transition:transform .38s cubic-bezier(.3,0,.2,1),opacity .28s ease}
main{padding-top:var(--topH)}
body.home main{padding-top:0}
/* Opened from the hamburger, the ribbon takes its own space: the page slides
   down under it and the hero re-fits to what is left, instead of being
   covered. Scrolling the bar into view keeps the old overlay behaviour. */
main{transition:padding-top .38s cubic-bezier(.3,0,.2,1)}
body.home.barPushed main{padding-top:var(--topH)}
body.home.barPushed .film,
body.home.barPushed .filmUI{min-height:calc(100svh - var(--topH))}
@media (prefers-reduced-motion:reduce){main{transition:none}}
body.home:not(.topShown) .topbar{transform:translateY(-102%);opacity:0;pointer-events:none}
/* Stated positively so no leftover state can strand a page without a ribbon */
body:not(.home) .topbar{transform:none;opacity:1;pointer-events:auto}
body:not(.home) main{padding-top:var(--topH)}
.deskMarks{display:none}
@media (min-width:901px){
  /* only on pages that are not home: home draws its own marks inside the film,
     and the home rules for .heroLogo and .burger would otherwise light these
     up too — two menu buttons, and two crosses once the ribbon is open */
  body.heroPage .deskMarks{display:block}
  .deskMarks{position:fixed;top:0;left:0;right:0;z-index:69;
    pointer-events:none;max-width:1320px;margin:0 auto;
    padding:clamp(26px,3.4vw,48px) clamp(20px,3.4vw,48px) 0;
    transition:top .38s cubic-bezier(.3,0,.2,1)}
  body.heroPage main{padding-top:0}
  body.heroPage .pHero{min-height:100svh}
  body.heroPage:not(.topShown) .topbar{transform:translateY(-102%);opacity:0;pointer-events:none}
  body.heroPage:not(.topShown) .deskMarks .heroLogo,
  body.heroPage:not(.topShown) .deskMarks .burger{opacity:1;transform:none;pointer-events:auto}
  /* opened from the menu control: the ribbon takes its own space, the hero
     re-fits beneath it, and the control stays put as the way to close */
  .deskMarks .burger span{box-shadow:0 1px 5px rgba(0,0,0,.45)}
  .deskMarks .heroLogo .wm span{text-shadow:0 1px 6px rgba(0,0,0,.45)}
  body.heroPage.barPushed main{padding-top:var(--topH)}
  body.heroPage.barPushed .pHero{min-height:calc(100svh - var(--topH))}
  body.heroPage.barPushed .deskMarks{top:var(--topH)}
  body.heroPage.barPushed .deskMarks .burger{opacity:1;transform:none;pointer-events:auto}
  body.heroPage.barPushed .deskMarks .burger span:nth-child(1){width:26px;transform:translateY(7px) rotate(45deg)}
  body.heroPage.barPushed .deskMarks .burger span:nth-child(2){opacity:0;width:26px}
  body.heroPage.barPushed .deskMarks .burger span:nth-child(3){width:26px;transform:translateY(-7px) rotate(-45deg)}
}
.hdr{position:static}
/* the lockup that stands in for it, at the foot of the hero */
.heroLogo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none;
  opacity:0;transform:translateY(8px);transition:opacity .32s ease,transform .32s ease;pointer-events:none}
body.home:not(.topShown) .heroLogo{opacity:1;transform:none;pointer-events:auto}
.heroLogo .wm{display:flex;flex-direction:column;line-height:1.06;font-weight:700;
  font-size:17px;letter-spacing:.02em}
.heroLogo .wm span:nth-child(1){color:#8FBEDD}
.heroLogo .wm span:nth-child(2){color:#C6DEF0}
.heroLogo .wm span:nth-child(3){color:#fff}
.fBottom{display:flex;align-items:flex-end}

/* ══ SpaceX-model home ═══════════════════════════════════════════════════ */
/* The hero fills what is left of the viewport under the ribbon and header.
   svh rather than vh so mobile browser chrome does not overshoot it. */
.film{position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  background:radial-gradient(ellipse at 58% 42%,#153050 0%,#0C1E38 52%,#071426 100%)}
.filmBg{position:absolute;inset:0;z-index:0}
/* Two cuts of the same footage, both real H.264 video so the phone's own
   decoder does the work. The phone cut used to be an animated WebP, which is
   decoded frame by frame in software: at 24 frames a second and full size it
   could not keep up on a phone and played slow and stepped. */
/* The desktop cut is the source shrunk to 88% inside its own blurred, mirrored
   edges, so the close-up reads a little wider than it was shot; at the frame
   the edge is indistinguishable from the lens's own depth of field. */
.heroVid,.heroAnim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.heroAnimP{display:none}
@media (max-width:820px){
  .heroVid{display:none}
  .heroAnimP{display:block}
  /* the first frame sits behind the image while it arrives */
  .filmBg{background:#0C1E38 url("/media/hero-phone.jpg") center/cover no-repeat}
}
@media (max-width:820px){
  .heroVid{object-position:50% center}
  /* A portrait cut centred on the fruit: 758px of the 1920x1080 source, from
     x=520, shrunk to 80% inside its own blurred, mirrored top and bottom, so
     the berries, fingers and stream sit comfortably inside the frame. Both cuts run the whole clip, first
     frame to last, at the speed it was shot: 121 frames at 24 a second. */
}
/* Scrims: dark down the left for the copy, and a soft floor so nothing floats. */
/* Light touch: enough to hold the copy, not so much that the drawing dims. */
/* Footage is bright and warm, so this does more work than it did over the
   drawing: a cool tint to pull the orange back toward the palette, then the
   usual left and bottom falls so white type holds everywhere it lands. */
.filmScrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,12,22,.88) 0%,rgba(5,14,26,.55) 15%,rgba(6,16,30,.14) 33%,rgba(6,16,30,0) 50%),
             linear-gradient(180deg,rgba(5,13,25,.60) 0%,rgba(5,13,25,.06) 20%,rgba(5,13,25,0) 52%,rgba(4,11,21,.82) 100%),
             radial-gradient(ellipse 50% 36% at 3% 99%,rgba(3,9,18,.85) 0%,rgba(3,9,18,0) 100%),
             linear-gradient(0deg,rgba(10,26,46,.10),rgba(10,26,46,.10))}
.filmUI{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;max-width:1320px;margin:0 auto;
  padding:clamp(26px,3.4vw,48px) clamp(20px,3.4vw,48px) clamp(30px,3.6vw,52px)}
.fTop{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,60px)}
.filmH1{color:#fff;font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2rem,1.2rem + 3vw,3.9rem);margin:0 0 clamp(14px,1.6vw,22px);
  max-width:16ch;text-wrap:balance}
/* Desktop keeps it on one row; the phone is left to wrap. */
@media (min-width:821px){
  .filmH1{max-width:none;white-space:nowrap;text-wrap:nowrap;
    font-size:clamp(2.2rem,4.6vw,4.2rem)}
}
.fRight{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.burger{appearance:none;border:0;background:transparent;cursor:pointer;padding:11px 4px;
  width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  flex:none;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
body.home:not(.topShown) .burger{opacity:1;transform:none;pointer-events:auto}
/* Pushed open, the hamburger stays put and becomes the way to close again. */
body.home.barPushed .burger{opacity:1;transform:none;pointer-events:auto}
body.home.barPushed .burger span:nth-child(1){width:26px;transform:translateY(7px) rotate(45deg)}
body.home.barPushed .burger span:nth-child(2){opacity:0;width:26px}
body.home.barPushed .burger span:nth-child(3){width:26px;transform:translateY(-7px) rotate(-45deg)}
.burger span{display:block;height:2px;border-radius:1px;background:#fff;
  transition:width .28s ease,transform .28s cubic-bezier(.3,0,.2,1),opacity .18s ease}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:20px}
.burger span:nth-child(3){width:26px}
.burger:hover span{width:26px}
.fBelief{display:flex;flex-direction:column;align-items:flex-start}
.filmBelief{color:#C6DEF0;font-size:clamp(1.02rem,.9rem + .5vw,1.34rem);line-height:1.56;
  max-width:46ch;text-wrap:pretty}
/* On a phone the copy sat on the floor with a dead band above it. */
@media (max-width:820px){
  .film .filmUI{padding-bottom:clamp(96px,22vh,220px)}
}

/* captions drawn over the equipment, as in the film */
.un{font-family:var(--mono);font-size:15px;font-weight:500;fill:#8FD3C5;letter-spacing:.04em}
.ut{font-family:var(--sans);font-size:19px;font-weight:700;fill:#fff;letter-spacing:.13em}
.ulab{opacity:0}
.filmBg svg.on .ulab{animation:lab .55s cubic-bezier(.3,0,.2,1) forwards;animation-delay:var(--d)}
@keyframes lab{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.ulab{opacity:1!important;animation:none!important}}
.filmBg svg.on .wl{animation:draw 4.2s cubic-bezier(.35,0,.15,1) forwards}

/* thin verification strip */
.strip{margin-top:clamp(30px,3.4vw,46px);padding-top:clamp(22px,2.4vw,32px);
  border-top:1px solid var(--rule)}
.stripIn{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px clamp(20px,4vw,54px)}
.strip span{display:inline-flex;align-items:center;gap:9px;font-size:12.6px;font-weight:600;
  letter-spacing:.02em;color:var(--head)}
.strip svg{color:var(--teal-deep);flex:none}
@media (prefers-color-scheme:dark){:root[data-theme="dark"] .strip svg,:root:not([data-theme="light"]) .strip svg{color:var(--green)}}

/* ── a sector, full bleed and full height ─────────────────────────────── */
.feat{position:relative;overflow:hidden;background:#050F1D;
  min-height:100svh;display:flex;align-items:center;padding:clamp(48px,6vw,90px) 0}
.featArt{position:absolute;inset:0}
.featArt svg{width:100%;height:100%;display:block}
.featPhoto{width:100%;height:100%;display:block;object-fit:cover;object-position:26% center}
/* The drawings paint their own scrim; a photograph needs one over the top,
   falling from whichever side the copy sits on. */
.feat.lt .featArt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.96) 24%,rgba(255,255,255,.74) 40%,rgba(255,255,255,.24) 54%,rgba(255,255,255,0) 68%)}
.feat.lt.rt .featArt::after{
  background:linear-gradient(270deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.96) 24%,rgba(255,255,255,.74) 40%,rgba(255,255,255,.24) 54%,rgba(255,255,255,0) 68%)}
.feat:not(.lt) .featArt::after{content:none}
@media (max-width:820px){
  .feat.lt .featArt::after,.feat.lt.rt .featArt::after{
    background:linear-gradient(0deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 36%)}
}
.featIn{position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(20px,3vw,44px)}
/* the copy alternates sides down the page; the artwork is drawn to leave it room */
.featTxt{grid-column:1 / span 6;min-width:0}
.feat.rt .featTxt{grid-column:7 / span 6}
@media (max-width:1000px){.featTxt,.feat.rt .featTxt{grid-column:1 / span 12}}
.featEy{margin:0;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green)}
.featH{margin:16px 0 0;color:var(--sky);letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(2.1rem,1.35rem + 2.9vw,3.9rem);text-wrap:balance}
.featP{margin:22px 0 0;max-width:54ch;color:#C6DEF0;line-height:1.64;
  font-size:clamp(.98rem,.93rem + .24vw,1.12rem);text-wrap:pretty}
.featP i{font-style:italic;color:#fff}
/* The action sits in a box the same width as the paragraph above it — the
   text column is wider than the copy, so aligning to the column would not line
   up with anything. `ch` is relative to font size, so this carries the
   paragraph's size to make the measure identical. */
.featAct{display:flex;width:100%;max-width:54ch;
  font-size:clamp(.98rem,.93rem + .24vw,1.12rem)}
.feat.rt .featAct{justify-content:flex-end}
@media (max-width:820px){
  .featAct{max-width:none}
  .feat.rt .featAct{justify-content:flex-start}
}
.featBtn{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(24px,2.6vw,36px);
  appearance:none;background:transparent;border:0;border-bottom:2px solid rgba(143,190,221,.42);
  padding:11px 2px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;min-height:44px;
  transition:border-color .2s ease,gap .2s ease}
.featBtn i{font-style:normal;color:var(--green)}
.featBtn:hover{border-color:var(--green);gap:16px}
.featBtn:focus-visible{outline:3px solid var(--green);outline-offset:5px}
/* the bands alternate dark and light down the page; the artwork is
   recolored to match, so only the type needs to flip here */
.feat.lt{background:#FFFFFF}
.feat.lt .featEy{color:var(--green-deep)}
.feat.lt .featH{color:#3C6BA7}
.feat.lt .featP{color:#3B4756}
.feat.lt .featP i{color:var(--harbor)}
.feat.lt .featBtn{color:var(--harbor);border-bottom-color:#C6D6E6}
.feat.lt .featBtn i{color:var(--green-deep)}
.feat.lt .featBtn:hover{border-bottom-color:var(--green-deep)}
.feat.lt .featBtn:focus-visible{outline-color:var(--green-deep)}

@media (max-width:820px){
  /* the art is 1.6:1 — on a phone it stops being a backdrop and becomes a banner,
     but the pane still owns the screen the way it does on desktop */
  .feat{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:0}
  .featArt{position:relative;inset:auto;width:100%;aspect-ratio:4/3;overflow:hidden}
  .featArt svg{position:absolute;inset:0}
  .featIn{padding-top:clamp(26px,6vw,38px);padding-bottom:clamp(38px,9vw,56px)}
  .featP{max-width:none}
}

/* process over the droplet */
/* ── a page hero: one photograph, the title over it ───────────────────────
   The same treatment as the home film — bold white title, copy beneath, an
   underlined action — at a height that leaves the next section showing. */
.pHero{position:relative;isolation:isolate;overflow:hidden;background:#08182E;
  min-height:calc(100svh - var(--topH));display:flex;align-items:flex-end;
  padding:clamp(40px,6vw,80px) 0 clamp(40px,5vw,70px)}
@media (max-width:820px){
  .pHero{padding-bottom:clamp(28px,5vw,44px)}
  .pHeroP{font-size:15.2px;line-height:1.52;margin-top:12px}
  .pHeroImg{object-position:58% 34%}
  /* dental: one of the two clinicians stands middle-right of the frame */
  .pHeroImg[data-from="hpanel-dental"]{object-position:70% 34%}
}
.pHeroImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 38%;display:block;z-index:0}
.pHeroScrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,12,22,.80) 0%,rgba(5,14,26,.52) 26%,rgba(6,16,30,.14) 52%,rgba(6,16,30,0) 76%),
             linear-gradient(180deg,rgba(5,13,25,.42) 0%,rgba(5,13,25,0) 26%,rgba(5,13,25,.12) 52%,rgba(4,11,21,.84) 100%)}
.pHeroIn{position:relative;z-index:2;width:100%}
.pHeroH{color:#fff;font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2rem,1.2rem + 3vw,3.9rem);margin:0;max-width:16ch;text-wrap:balance}
@media (min-width:821px){.pHeroH{max-width:none;white-space:nowrap;
  font-size:clamp(2.2rem,4.6vw,4.2rem)}}
.pHeroP{color:#C6DEF0;margin:clamp(14px,1.6vw,22px) 0 0;max-width:56ch;
  font-size:clamp(1rem,.94rem + .3vw,1.16rem);line-height:1.6;text-wrap:pretty}
.pHero .featBtn{margin-top:clamp(20px,2.4vw,32px)}

/* ── contact ──────────────────────────────────────────────────────────── */
.cForm{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow)}
.cRow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.cRow{grid-template-columns:1fr}}
.cf{display:block;margin-top:16px}
.cf span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.cf input,.cf select,.cf textarea{width:100%;font:inherit;font-size:15px;color:var(--body);
  background:var(--page);border:1px solid var(--rule);border-radius:8px;
  padding:11px 12px;min-height:46px;transition:border-color .2s,box-shadow .2s}
.cf textarea{min-height:104px;resize:vertical;line-height:1.55}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.cf input:user-invalid,.cf select:user-invalid{border-color:var(--act)}
.cNote{margin-top:14px;font-size:12.8px;line-height:1.5;color:var(--muted)}
.cNote.ok{color:var(--ok);font-weight:600}
.cDuo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);align-items:stretch}
@media (max-width:760px){.cDuo{grid-template-columns:1fr}}
.cDuo .cBig{margin-top:0;height:100%}
.cForm.wide{margin-top:0}
.cFormBand{padding-top:0}
.cSide .cItem{padding:16px 0;border-bottom:1px solid var(--rule)}
.cSide .cItem:first-of-type{padding-top:18px}
.cSide .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.cSide .v{margin-top:6px;font-size:1.06rem;font-weight:600;color:var(--head)}
.cSide .v a{color:inherit;text-decoration:none;border-bottom:2px solid var(--rule);
  transition:border-color .2s}
.cSide .v a:hover{border-color:var(--green)}
.cSide .sm{margin-top:7px;font-size:13.6px;line-height:1.55;color:var(--muted)}
.cList{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:7px}
.cList li{position:relative;padding-left:17px;font-size:13.8px;line-height:1.5;color:var(--muted)}
.cList li::before{content:"";position:absolute;left:0;top:.56em;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}

/* what happens next */
.cSteps{list-style:none;display:grid;gap:clamp(18px,2.2vw,28px);margin-top:clamp(24px,3vw,38px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.cSteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cSteps{grid-template-columns:1fr}}
.cSteps li{border-top:2px solid var(--rule);padding-top:16px;min-width:0}
.cSteps .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);
  letter-spacing:.06em}
.cSteps h3{margin-top:8px;font-size:1.08rem;letter-spacing:-.015em}
.cSteps p:not(.n){margin-top:8px;font-size:13.8px;line-height:1.58;color:var(--muted)}

/* questions */
.cFaq{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule)}
.cFaq details{border-bottom:1px solid var(--rule)}
.cFaq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-size:1.02rem;font-weight:600;color:var(--head);min-height:56px;
  display:flex;align-items:center}
.cFaq summary::-webkit-details-marker{display:none}
.cFaq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease}
.cFaq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.cFaq details p{padding:0 0 18px;margin:0;font-size:14.4px;line-height:1.62;
  color:var(--muted);max-width:74ch}
.cFaq summary:hover{color:var(--link)}

/* the questions at the foot of a system or business page: plain text, so it
   is what gets quoted */
.faqBand{background:var(--surface);border-top:1px solid var(--rule)}
.faqH{margin-top:8px;font-size:clamp(1.45rem,1.15rem + 1.3vw,2.1rem);letter-spacing:-.025em}
.faqList{max-width:860px}
.faqList details p{max-width:72ch}

/* the engineering view: a drawn plant you can click through */
.egWrap{margin-top:clamp(18px,2.6vh,30px)}
.egArt{display:block;width:100%;height:auto;max-height:clamp(220px,30vh,330px);overflow:visible}
.egPipe{fill:none;stroke:var(--sky);stroke-width:7;stroke-linecap:round;opacity:.55}
.egEnd{fill:none;stroke:var(--slate);stroke-width:2.2;stroke-linejoin:round}
.egEnd text{fill:var(--muted);stroke:none;font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-anchor:middle}
.egHit{fill:transparent;cursor:pointer}
.egNode{cursor:pointer}
.egKit{fill:var(--surface);stroke:var(--slate);stroke-width:2.4;stroke-linejoin:round;
  transition:stroke .2s ease}
.egKit .ray{stroke-width:2.2;stroke-linecap:round}
.egDot{fill:var(--rule);transition:fill .2s ease,r .2s ease}
.egNum{fill:var(--muted);font-family:var(--mono);font-size:13px;font-weight:700;
  text-anchor:middle;transition:fill .2s ease}
.egLbl{fill:var(--body);font-size:14px;font-weight:600;text-anchor:middle;
  transition:fill .2s ease}
.egNode:hover .egKit,.egNode:focus-visible .egKit{stroke:var(--accent)}
.egNode:hover .egLbl,.egNode:focus-visible .egLbl{fill:var(--head)}
.egNode[aria-pressed="true"] .egKit{stroke:var(--blue);stroke-width:3}
.egNode[aria-pressed="true"] .egDot{fill:var(--blue);r:7}
.egNode[aria-pressed="true"] .egNum{fill:var(--blue)}
.egNode[aria-pressed="true"] .egLbl{fill:var(--head);font-weight:700}
.egNode:focus-visible{outline:none}
.egNode:focus-visible .egHit{outline:2px solid var(--green);outline-offset:-2px}
.egHint{margin:0 0 4px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.egPanel{position:relative;margin-top:14px;min-height:132px}
.egCard{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
  max-width:62ch;margin:0 auto;text-align:center}
.egCard.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.egCard h3{margin:0;font-size:1.1rem;letter-spacing:-.01em;color:var(--head)}
.egCard p{margin:9px 0 0;font-size:15.2px;line-height:1.6;color:var(--muted)}
/* the same plant, drawn as a column so a phone can actually read it */
.dfCard .dfList{list-style:none;margin:10px auto 0;padding:0;display:flex;
  flex-direction:column;gap:5px;text-align:left;max-width:31ch}
.dfCard .dfList li{position:relative;padding-left:15px;font-size:14.2px;line-height:1.45;
  color:var(--muted)}
.dfCard .dfList li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--green-deep)}
@media (max-width:620px){.dfCard .dfList li{font-size:13.4px}}
.egArtV{display:none}
.egEndT{fill:var(--muted);font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.14em}
.egNumV{fill:var(--muted);font-family:var(--mono);font-size:12px;font-weight:700;
  transition:fill .2s ease}
.egLblV{fill:var(--head);font-size:18px;font-weight:600;transition:fill .2s ease}
.egSel{fill:transparent;transition:fill .2s ease}
.egArtV .egKit{stroke-width:3.3}
.egArtV .egEnd{stroke-width:3}
.egArtV .egNode[aria-pressed="true"] .egKit{stroke-width:4.4}
.egNode[aria-pressed="true"] .egSel{fill:var(--panel)}
.egNode[aria-pressed="true"] .egNumV{fill:var(--blue)}
.egNode[aria-pressed="true"] .egLblV{font-weight:700}
@media (max-width:820px){
  .egArt{display:none}
  .egArtV{display:block;width:100%;height:auto;max-height:min(54vh,520px);margin-inline:auto}
  .egWrap{margin-top:10px}
  .egLede{display:none}
  .egHint{display:none}
  .egPanel{min-height:136px}
  .egCard h3{font-size:1.02rem}
  .egCard p{margin-top:7px;font-size:14.2px;line-height:1.52}
  .deskSigns{display:none}
}

/* the reviews rail */
.revBand{background:var(--surface);border-top:1px solid var(--rule);
  padding-block:clamp(56px,7vh,96px);overflow:hidden}
.revH{margin:10px auto 0;text-align:center;white-space:nowrap;
  font-size:min(2.8rem,4.55vw);letter-spacing:-.03em;line-height:1.1}
.revBand .eyebrow{text-align:center}
.revH.lng{white-space:nowrap;text-wrap:nowrap;max-width:none;
  font-size:min(2.45rem,3.42vw)}
.revRow{margin-top:clamp(52px,8vh,104px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.revTrack{display:flex;gap:20px;width:max-content;animation:revRoll 68s linear infinite}
.revRow:hover .revTrack,.revRow:focus-within .revTrack{animation-play-state:paused}
@keyframes revRoll{to{transform:translateX(-50%)}}
.revCard{flex:0 0 clamp(268px,26vw,340px);margin:0;display:flex;flex-direction:column;gap:12px;
  background:var(--page);border:1px solid var(--rule);border-radius:12px;padding:22px 22px 20px}
.revStars{display:inline-flex;gap:3px}
.revStars svg{width:15px;height:15px;fill:#E8A33D}
.revCard blockquote{margin:0;font-size:15px;line-height:1.62;color:var(--body)}
.revCard figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:4px}
.revWho{font-size:14.4px;font-weight:700;color:var(--head)}
.revWhere{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.revNote{margin:clamp(20px,2.4vh,30px) 0 0;text-align:center;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);opacity:.8}
@media (prefers-reduced-motion:reduce){
  .revTrack{animation:none}
  .revRow{overflow-x:auto}
}

/* what makes us different */
.bwgDiff{background:var(--surface);border-bottom:1px solid var(--rule);
  padding-block:clamp(64px,8vh,110px)}
#difference{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
#difference > .wrap{width:100%}
@media (max-width:820px){#difference{padding-block:clamp(44px,9vw,72px)}}
.bwgDiff .eyebrow{text-align:center}
.dfH{margin:10px auto 0;max-width:none;text-align:center;white-space:nowrap;
  font-size:min(2.8rem,4.6vw);letter-spacing:-.03em;line-height:1.08}
@media (max-width:620px){
  /* the section heading leads: bolder and clearly larger than the card
     titles beneath it, which were the same size on a phone */
  .dfH{font-size:clamp(1.5rem,6.4vw,1.85rem);font-weight:700;letter-spacing:-.025em;
    white-space:normal;text-wrap:balance}
  .dfCard h3,.dfGrid.dfRow .dfCard h3{font-size:1.1rem}
}
.dfGrid{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(30px,3.4vw,52px);margin-top:clamp(52px,8vh,104px)}
.dfGrid > *{flex:0 1 clamp(250px,28%,330px)}
@media (max-width:940px){.dfGrid > *{flex:0 1 clamp(250px,42%,340px)}}
/* the reasons, laid out on as many columns as the page asks for */
.dfRow{--n:3;--g:clamp(18px,2.2vw,40px);gap:clamp(30px,3.6vh,52px) var(--g);
  max-width:1180px;margin-inline:auto;width:100%}
.dfRow > *{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n))}
.dfRow .dfCard p{max-width:32ch;font-size:15px}
.dfRow .dfCard h3{font-size:1.14rem}
@media (max-width:1080px){
  .dfRow{--n:2}
}
@media (max-width:620px){.dfRow{--n:1}}
@media (max-width:620px){.dfGrid{gap:30px}.dfGrid > *{flex:1 1 100%}}
.dfCard{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;min-width:0}
.dfIco{display:grid;place-items:center;width:auto;height:auto;flex:none}
.dfIco svg{width:62px;height:62px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.dfIco.c-blue svg{stroke:var(--blue)}
.dfIco.c-current svg{stroke:var(--current)}
.dfIco.c-teal svg{stroke:var(--teal-deep,var(--teal))}
.dfIco.c-green svg{stroke:var(--green-deep,var(--green))}
.dfCard h3{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.28;color:var(--head);text-wrap:balance}
.dfCard p{margin:0;font-size:15px;line-height:1.62;color:var(--muted)}
.dfCard p{max-width:34ch}
@media (min-width:941px){
  .dfCard h3{font-size:1.2rem}
  .dfIco svg{width:70px;height:70px;stroke-width:2.5}
}

/* the four reasons, stood up as pillars across the screen */
.pillars{align-items:stretch}
.pillar{position:relative;display:flex;flex-direction:column;gap:9px;min-width:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:26px 22px 24px;overflow:hidden}
.pillar .pTop{position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--current) 45%,var(--teal) 78%,var(--green))}
.pillar .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em}
.pillar.phase h3{font-size:1.12rem}
/* contact: the two things people actually want, then the process as pills */
.cGreen{color:var(--green-deep,var(--green))}
.cBig{display:flex;flex-direction:column;gap:5px;text-decoration:none;margin-top:22px;
  padding:18px 20px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);
  transition:border-color .18s ease,transform .18s ease}
a.cBig:hover{border-color:var(--accent);transform:translateY(-2px)}
.cBigPlain{cursor:default}
.cBigBtn{appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%}
.cBigBtn:hover{border-color:var(--accent);transform:translateY(-2px)}
.cBigBtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cBigGo{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--link)}
.cBigGo i{font-style:normal;margin-left:7px}
/* both headings share one size, and the title holds a single line at every
   width - the vw term is what keeps it off a second row on a narrow phone */
.cFormH,.cPageH{font-size:min(3.2rem,5.4vw);font-weight:700;
  letter-spacing:-.03em;line-height:1.08}
.cPageH{margin-top:12px;max-width:none;white-space:nowrap}
.cReq{margin-top:10px;font-size:13.4px;line-height:1.55;color:var(--muted)}
.rq{font-style:normal;margin-left:8px;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--act)}
.cReq .rq{margin:0 2px}
/* where we work, shown as the map */
.covDlg{border:0;border-radius:16px;padding:0;max-width:min(880px,94vw);width:100%;
  margin:auto;max-height:92vh;overflow:auto;
  background:var(--surface);color:var(--body);box-shadow:0 30px 80px rgba(8,20,36,.36)}
.covDlg::backdrop{background:rgba(8,20,36,.55)}
.covIn{padding:clamp(22px,3vw,34px)}
.covIn .eyebrow{text-align:center}
.covIn h3{margin-top:8px;text-align:center;font-size:clamp(1.15rem,1rem+.7vw,1.5rem)}
.covMap{margin-top:18px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:var(--page);padding:10px}
.covMap svg{width:100%;height:auto;max-height:58vh;display:block;pointer-events:none}
.covIn .sm{margin-top:14px;text-align:center}
.cBigK{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.cBigV{font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);font-weight:700;letter-spacing:-.015em;
  color:var(--accent);word-break:break-word}
.cBigPlain .cBigV{color:var(--head)}
.cBigS{margin-top:4px;font-size:14.2px;line-height:1.55;color:var(--muted)}
.cPills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cPill{appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  border-radius:999px;border:1.5px solid var(--rule);background:var(--surface);color:var(--body);
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.cPill:hover{border-color:var(--head)}
.cPill[aria-selected="true"]{background:var(--head);border-color:var(--head);color:#fff}
.cPill:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cPill .pd{width:9px;height:9px;border-radius:50%;flex:none}
.cPanel{position:relative;margin-top:14px;min-height:104px}
.cCard{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s}
.cCard.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cCard p{margin:0;font-size:14.6px;line-height:1.62;color:var(--muted)}
/* the booking fields */
.cSet{border:1px solid var(--rule);border-radius:12px;padding:16px 16px 18px;margin-top:16px;min-width:0}
.cSet legend{padding:0 8px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cHint{margin:0 0 12px;font-size:13.4px;line-height:1.5;color:var(--muted)}
.cChoice{display:flex;gap:8px;flex-wrap:wrap}
.cOpt{position:relative;display:inline-flex}
.cOpt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cOpt span{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;
  border-radius:999px;border:1.5px solid var(--rule);background:var(--surface);
  font-size:14px;font-weight:600;color:var(--body);transition:.16s}
.cOpt input:checked + span{background:var(--head);border-color:var(--head);color:#fff}
.cOpt input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}
/* each choice is its own labelled block, so it is obvious which date goes
   with which time and what is being asked for */
.cSlot{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.cSlot:first-of-type{margin-top:8px;padding-top:0;border-top:0}
.cSlotK{margin:0;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cSlotIn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cSlotIn .cf{margin-top:8px}
/* The date and the time belong to one answer, so they are one box in two
   halves: equal columns side by side, equal height when they stack. A date
   input is taller than a select by a few pixels left to itself, which reads
   as a mistake when one sits directly under the other. */
.cSlotIn .cf input[type="date"],
.cSlotIn .cf select{height:48px;min-height:48px;padding-block:0;line-height:1.2}
.cSlotIn .cf input[type="date"]{-webkit-appearance:none;appearance:none}
@media (max-width:560px){.cSlotIn{grid-template-columns:1fr;gap:0}}
/* the protect band: the first pillar is there, the rest arrive behind it */
.pxPillars{margin-top:clamp(22px,3vh,36px)}
.pxArt.anim .pxPillars .pillar{opacity:0;transform:translateY(14px)}
.pxArt.anim.play .pxPillars .pillar{animation:pxRise .52s cubic-bezier(.22,.9,.3,1) var(--d) forwards}
@keyframes pxRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pxArt.anim .pxPillars .pillar{opacity:1;transform:none;animation:none}
}
.pillar h3{margin:2px 0 0;font-size:1.02rem;line-height:1.25;letter-spacing:-.01em;
  color:var(--head);text-wrap:balance}
.pillar p{margin:0;font-size:14.4px;line-height:1.58;color:var(--muted)}
@media (min-width:941px){.pillar{padding:30px 24px 28px}}
/* the four reasons carry the screen, so they are built taller */
.pillars.big{gap:20px}
.pillars.big .pillar{padding:32px 26px 30px;justify-content:flex-start;gap:12px}
.pillars.big .pillar h3{font-size:1.2rem;line-height:1.22}
.pillars.big .pillar p{font-size:15.2px;line-height:1.62}
.pillars.big .pillar .pTop{height:5px}
@media (min-width:941px){
  .pillars.big .pillar{padding:38px 30px 34px;min-height:clamp(320px,44vh,440px)}
  .pillars.big .pillar h3{font-size:1.3rem}
  .pillars.big .pillar p{font-size:15.6px}
}

/* ── pricing ──────────────────────────────────────────────────────────── */
.pricing{background:var(--surface);border-block:1px solid var(--rule)}
.prTop{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px clamp(20px,3vw,44px);flex-wrap:wrap}
.prTopL{min-width:0}
.prH{margin:6px 0 0;text-align:left;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.6rem,1.1rem+1.5vw,2.3rem)}
.prRoll{margin:8px 0 0;max-width:60ch;text-align:left;
  font-size:13.6px;line-height:1.5;color:var(--muted)}
.prSeg{display:flex;justify-content:flex-end;margin:0;flex:none}
.prSegIn{display:inline-flex;gap:3px;padding:4px;border-radius:999px;
  background:var(--panel);border:1px solid var(--rule)}
.prSegBtn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:13.5px;
  font-weight:600;padding:9px 22px;min-height:40px;border-radius:999px;white-space:nowrap;
  background:transparent;color:var(--muted);transition:background .2s ease,color .2s ease}
.prSegBtn:hover{color:var(--head)}
.prSegBtn[aria-selected="true"]{background:var(--surface);color:var(--head);
  box-shadow:0 2px 8px rgba(22,50,92,.12)}
.prSegBtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.prGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.5vw,20px);margin-top:clamp(18px,2.4vh,30px);align-items:stretch}
@media (max-width:940px){.prGrid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.prCard{position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:22px 20px 20px}
.prCard.hi{border-color:var(--blue);box-shadow:0 14px 38px rgba(22,50,92,.13)}
.prTag{position:absolute;top:-10px;left:20px;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:4px 11px;border-radius:999px}
.prStage{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.prCard h3{margin:6px 0 0;font-size:1.12rem;line-height:1.26;letter-spacing:-.02em;
  color:var(--blue)}
@media (min-width:941px){.prCard h3{min-height:2.52em}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .prCard h3{color:var(--sky)}}
:root[data-theme="dark"] .prCard h3{color:var(--sky)}
.prHead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.prKind{display:inline-flex;gap:3px;padding:3px;border-radius:999px;flex:none;
  background:var(--panel);border:1px solid var(--rule)}
.prKindBtn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:11.6px;
  font-weight:600;padding:5px 13px;min-height:28px;border-radius:999px;white-space:nowrap;
  background:transparent;color:var(--muted);transition:background .2s ease,color .2s ease}
.prKindBtn:hover{color:var(--head)}
.prKindBtn[aria-selected="true"]{background:var(--surface);color:var(--head);
  box-shadow:0 1px 5px rgba(22,50,92,.14)}
.prKindBtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.prBody{display:flex;flex-direction:column;flex:1;min-width:0}
.prCard[data-kind="new"] [data-k="retro"]:not(.prKindBtn),
.prCard[data-kind="retro"] [data-k="new"]:not(.prKindBtn){display:none}
.prRoll strong{color:var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the commercial note reads as one line rather than folding at 60 characters */
.pricing .prRoll[data-pay="full"]{max-width:none}
.prAmt{margin-top:2px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.prNum{font-size:clamp(1.45rem,1.15rem+.85vw,1.85rem);font-weight:700;letter-spacing:-.03em;
  color:var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.prUnit{font-size:12.6px;font-weight:600;line-height:1.4;color:var(--muted)}
.prCard ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.prCard li{position:relative;padding-left:22px;font-size:13.3px;line-height:1.42;color:var(--body)}
.prCard li::before{content:"";position:absolute;left:2px;top:.22em;width:11px;height:6px;
  border-left:2.2px solid var(--green-deep);border-bottom:2.2px solid var(--green-deep);
  transform:rotate(-45deg)}
.prFoot{margin-top:auto;padding-top:12px;font-size:11.8px;line-height:1.45;color:var(--muted)}
.prHi{color:var(--head);font-weight:700}
.prNote{margin:clamp(12px,1.5vh,18px) 0 0;max-width:none;text-align:left;
  border-top:1px solid var(--rule);padding-top:clamp(9px,1.1vh,13px);
  font-size:11.2px;line-height:1.46;color:var(--muted);text-wrap:pretty}
/* the whole thing is built to land inside one desktop screen */
[data-page="res"] section.band.pricing,
[data-page="biz"] section.band.pricing{padding-block:clamp(20px,2.8vh,40px)}
/* a short laptop screen gets the same three cards, set tighter */
@media (min-width:941px) and (max-height:820px){
  .prGrid{margin-top:14px;gap:14px}
  .prCard{padding:18px 17px 17px}
  .prCard h3{font-size:1.05rem;min-height:2.5em}
  .prNum{font-size:1.55rem}
  .prCard ul{margin:10px 0 0;gap:5px}
  .prCard li{font-size:12.8px;line-height:1.38;padding-left:21px}
  .prFoot{padding-top:10px;font-size:11.3px}
  .prNote{font-size:10.7px;line-height:1.44}
  .prH{font-size:clamp(1.5rem,1.05rem+1.3vw,2rem)}
}
@media (min-width:941px) and (max-height:742px){
  .prTop{gap:12px}
  .prRoll{font-size:12.5px;margin-top:5px}
  .prCard{padding:15px 15px 14px}
  .prHead{min-height:27px}
  .prAmt{margin-top:0}
  .prCard ul{margin:9px 0 0;gap:4px}
  .prCard li{font-size:12.3px;line-height:1.34}
  .prFoot{padding-top:8px;font-size:10.9px}
  .prNote{font-size:10.2px}
}
.pricing[data-pay="full"] [data-pay="mo"],
.pricing[data-pay="mo"] [data-pay="full"]{display:none}

/* every band on a residential system page is its own screen */
[data-page="res"] section.band,
[data-page="biz"] section.band{min-height:calc(100svh - var(--topH));
  display:flex;flex-direction:column;justify-content:center;
  scroll-margin-top:var(--topH);padding-block:clamp(28px,4vh,56px)}
[data-page="res"] section.band > .wrap,
[data-page="biz"] section.band > .wrap{width:100%}
[data-page="res"] section.band.close,
[data-page="biz"] section.band.close{min-height:0;display:block;
  padding-block:clamp(58px,7vw,104px) clamp(34px,4vw,52px)}
@media (max-width:820px){
  [data-page="res"] section.band,
  [data-page="biz"] section.band{padding-block:clamp(34px,7vw,56px)}
  /* the close band is deliberately slim on both, as on desktop */
  [data-page="res"] section.band.close,
  [data-page="biz"] section.band.close{min-height:0;display:block;
    padding-block:clamp(58px,7vw,104px) clamp(34px,4vw,52px)}
}

/* the questions are read, not presented: they take the room they need
   rather than a screen of their own */
[data-page="res"] section.band.faqBand,[data-page="biz"] section.band.faqBand{
  min-height:0;display:block;padding-block:clamp(40px,6vh,72px)}

/* terms, privacy, accessibility: a readable column of plain text */
.legal{max-width:760px}
.legalH{margin-top:10px;font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);letter-spacing:-.03em;line-height:1.1}
.legalDate{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
section.band.legalTop{padding-bottom:0}
section.band.legalBody{padding-top:clamp(22px,3vw,36px)}
.legal h2{margin-top:clamp(26px,3vw,36px);font-size:1.2rem;letter-spacing:-.01em}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--body);max-width:68ch}
.legal h2 + p,.legal h2 + ul{margin-top:8px}
.legal p + p{margin-top:12px}
.legal ul,.legal ol{margin-top:8px;padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.legal a{color:var(--link)}

.closeDrop{display:none}
.closeDropOff{width:.62em;height:1em;display:inline-block;vertical-align:-.14em;
  margin-right:.30em;flex:none}
.close{background:var(--panel);text-align:center;
  padding-block:clamp(58px,7vw,104px) clamp(34px,4vw,52px)}
/* One row: the size is driven by the width so the line never wraps, with a
   floor that keeps it readable and a ceiling so it does not run away. */
/* One row at every width. The size is driven by the viewport so the line
   never wraps; on a phone the section also gives up its side padding to buy
   the extra characters. */
/* A single continuous function rather than breakpoints: two rules meeting at
   a breakpoint made the type jump larger as the screen got smaller. */
.closeH{font-size:min(3.1rem,4.9vw);letter-spacing:-.03em;
  line-height:1.1;margin:0 auto;white-space:nowrap}
.closeH.lng{max-width:none;font-size:min(3.1rem,3.35vw)}
.closeH.lng .closeDrop{vertical-align:-.10em}
@media (max-width:520px){.close > .wrap{padding-left:10px;padding-right:10px}}
.close .btn{margin-top:clamp(26px,3vw,40px)}
.close .btn i{font-style:normal;margin-left:9px}

/* ── how we work: one drawn wave, three stages ─────────────────────────── */
.howWork{min-height:100svh;display:flex;align-items:center}
.howWork > .wrap{width:100%}
@media (max-width:820px){.howWork{min-height:100svh;padding-block:clamp(40px,9vw,64px)}}
.hwTop{display:grid;grid-template-columns:minmax(180px,244px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:center}
@media (max-width:820px){.hwTop{grid-template-columns:1fr;gap:14px}}
.hwLead h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3.1rem);letter-spacing:-.03em;
  line-height:1.34;margin-top:12px}
@media (max-width:820px){.hwLead h2 br{display:none}}
.hwArt{min-width:0}
.hwArt .wv{width:100%;height:auto;display:block;overflow:visible}

/* the droplet holds the frame; the water line draws in on a choice */
.wv .sea,.wv .seaC{stroke-dasharray:1;stroke-dashoffset:1}
.hwArt .sea{stroke-dashoffset:0}
.hwArt.play .sea{animation:wvDraw 1.5s ease forwards}
@keyframes wvDraw{to{stroke-dashoffset:0}}

.wv .mk{transform:translate(544px,46px) scale(.85);
  animation:dpBob 6.5s ease-in-out infinite alternate}
@keyframes dpBob{from{transform:translate(544px,50px) scale(.85)}
                 to{transform:translate(544px,30px) scale(.87)}}
.wv .glow{animation:dpGlowA 6.5s ease-in-out infinite alternate}
@keyframes dpGlowA{from{opacity:.7}to{opacity:1}}
.wv .echo path{transform-origin:600px 164px;opacity:.2;
  transition:stroke .3s ease}
/* A press lights the rings in the color of the stage, rather than
   replaying the splash — that one is the scroll's job. */
.hwArt[data-stage="test"] .echo path{stroke:var(--blue)}
.hwArt[data-stage="solve"] .echo path{stroke:var(--current)}
.hwArt[data-stage="install"] .echo path{stroke:var(--teal)}
.hwArt[data-stage="protect"] .echo path{stroke:var(--green)}
.hwArt.pulse .e1{animation:dpFlare 1s cubic-bezier(.2,.7,.3,1)}
.hwArt.pulse .e2{animation:dpFlare 1s cubic-bezier(.2,.7,.3,1) .11s}
.hwArt.pulse .e3{animation:dpFlare 1s cubic-bezier(.2,.7,.3,1) .22s}
@keyframes dpFlare{0%{opacity:.12;transform:scale(.94);stroke-width:1.4}
                   32%{opacity:.95;transform:scale(1.02);stroke-width:2.8}
                   100%{opacity:.12;transform:scale(1.14);stroke-width:1.2}}
.wv .e1{animation:dpEcho 4.8s ease-in-out infinite}
.wv .e2{animation:dpEcho 4.8s ease-in-out .55s infinite}
.wv .e3{animation:dpEcho 4.8s ease-in-out 1.1s infinite}
@keyframes dpEcho{0%,100%{opacity:.12;transform:scale(.96)}
                  50%{opacity:.46;transform:scale(1.04)}}

/* The drop falls into the water and throws a crown. It runs when the section
   comes into view, again on every pill press, and resets on the way out so it
   replays rather than sitting spent. */
.wv .fall{opacity:0}
.wv .splash{opacity:0}
.wv .ripple ellipse{opacity:0;transform-origin:600px 294px}
.wv .sp{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.wv .bd{opacity:0}

.hwArt.play .mk{animation:dpFallIn 1.15s cubic-bezier(.55,0,.85,.55) forwards,
                          dpBack .5s ease 1.9s forwards}
@keyframes dpFallIn{0%{transform:translate(544px,50px) scale(.85);opacity:1}
                    82%{opacity:1}
                    100%{transform:translate(556px,196px) scale(.62);opacity:0}}
@keyframes dpBack{from{transform:translate(544px,74px) scale(.78);opacity:0}
                  to{transform:translate(544px,50px) scale(.85);opacity:1}}

.hwArt.play .splash{opacity:1}
.hwArt.play .sp{animation:dpCrown .7s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(1.12s + var(--i)*22ms)}
@keyframes dpCrown{0%{stroke-dashoffset:1;opacity:1}
                   55%{stroke-dashoffset:0;opacity:1}
                   100%{stroke-dashoffset:0;opacity:0}}
.hwArt.play .bd{animation:dpBead .9s cubic-bezier(.2,.6,.4,1) forwards;
  animation-delay:calc(1.14s + var(--i)*26ms)}
@keyframes dpBead{0%{opacity:1;transform:translate(0,0) scale(.5)}
                  55%{opacity:1}
                  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
.hwArt.play .r1{animation:wvRip 1.6s ease-out 1.16s}
.hwArt.play .r2{animation:wvRip 1.6s ease-out 1.4s}
.hwArt.play .r3{animation:wvRip 1.6s ease-out 1.64s}
@keyframes wvRip{0%{opacity:.85;transform:scale(.3)}100%{opacity:0;transform:scale(3.4)}}

/* Treat: the four stages light in turn, then run the length of the water */
.wv .seaC{opacity:0}
.hwArt[data-stage="solve"] .seaC,.hwArt[data-stage="install"] .seaC{opacity:1;animation:wvDraw 1.5s ease forwards .18s}

/* Maintain: the ripple keeps its schedule once the splash has settled */
.hwArt[data-stage="protect"] .r1{animation:wvRip 2.8s ease-out .3s infinite}
.hwArt[data-stage="protect"] .r2{animation:wvRip 2.8s ease-out 1.23s infinite}
.hwArt[data-stage="protect"] .r3{animation:wvRip 2.8s ease-out 2.16s infinite}

/* ── treat: four full-bleed panes ─────────────────────────────────────── */
.tFull{position:relative;isolation:isolate;overflow:hidden;background:#050F1D;
  height:100svh;min-height:520px}
.tTrack{display:flex;height:100%;
  transition:transform .62s cubic-bezier(.32,0,.16,1);will-change:transform}
.tSlide{flex:0 0 100%;position:relative;height:100%;min-width:0}
/* stands in until the photograph arrives */
.tPh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,#33465A 0%,#22303F 52%,#16202C 100%)}
.tPh span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.34);border:1px dashed rgba(255,255,255,.24);
  padding:11px 18px;border-radius:9px}
/* who this is for — the switch above the carousel */
.seg{pointer-events:auto;display:inline-flex;gap:3px;margin-top:clamp(14px,1.9vh,22px);
  padding:4px;border-radius:999px;background:rgba(10,20,32,.42);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18)}
.segBtn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;
  padding:9px 20px;min-height:38px;border-radius:999px;white-space:nowrap;
  background:transparent;color:rgba(255,255,255,.74);
  transition:background .22s ease,color .22s ease}
.segBtn:hover{color:#fff}
.segBtn[aria-selected="true"]{background:#fff;color:var(--ink);
  box-shadow:0 2px 8px rgba(8,18,30,.22)}
.segBtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:520px){.segBtn{font-size:12.5px;padding:8px 15px}}
.tImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 46%;display:block;z-index:0}
/* Dark at the top for the title, darker at the foot for the list, and a fall
   from the left so the type never sits on a bright part of the photograph. */
.tScrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(4,12,22,.74) 0%,rgba(4,12,22,.34) 20%,rgba(4,12,22,0) 40%),
  linear-gradient(0deg,rgba(3,10,20,.94) 0%,rgba(3,10,20,.80) 20%,rgba(4,12,22,.30) 46%,rgba(4,12,22,0) 68%),
  linear-gradient(90deg,rgba(4,12,22,.62) 0%,rgba(4,12,22,.22) 40%,rgba(4,12,22,0) 68%)}

/* the title block, held at the top left across all four panes */
.tHead{position:absolute;top:0;left:0;right:0;z-index:4;pointer-events:none;
  padding-top:calc(var(--topH) + clamp(20px,3.4vh,48px))}
.tEy{margin:0;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green)}
.tH{margin:clamp(11px,1.4vh,18px) 0 0;color:#fff;font-weight:700;
  letter-spacing:-.032em;line-height:1.05;text-wrap:balance;
  font-size:clamp(1.42rem,1.1rem + 1.9vw,2.1rem)}
@media (min-width:821px){.tH{white-space:nowrap;text-wrap:nowrap;
  font-size:min(2.35rem,3.12vw)}}

/* the list, layered over the foot of the photograph */
.tCopy{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding-bottom:clamp(72px,9.4vh,104px)}
.tCopy > .wrap{max-width:1160px}
.tNum{margin:0;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;color:var(--sky)}
.tCopy h3{margin:7px 0 0;color:#fff;letter-spacing:-.024em;line-height:1.08;
  font-size:clamp(1.34rem,1.05rem + 1.35vw,2.05rem)}
.tLede{margin:clamp(9px,1.1vh,14px) 0 0;color:#C6DEF0;max-width:52ch;
  font-size:clamp(.94rem,.9rem + .3vw,1.1rem);line-height:1.52;text-wrap:pretty}
.tList{list-style:none;margin:clamp(13px,1.7vh,20px) 0 0;padding:0;
  display:grid;gap:clamp(5px,.7vh,9px);max-width:74ch}
.tList li{position:relative;padding-left:19px;color:#E4EFF8;
  font-size:clamp(13px,12.6px + .2vw,14.6px);line-height:1.46;text-wrap:pretty}
.tList li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--green)}
.tList li b{color:#fff;font-weight:700}

/* the four bubbles, centred on the foot of the photograph */
.tDots{position:absolute;left:0;right:0;bottom:clamp(12px,2vh,24px);z-index:6;
  display:flex;justify-content:center;align-items:center;gap:6px}
.tDot{width:44px;height:44px;display:grid;place-items:center;padding:0;
  background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tDot::after{content:"";display:block;width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.42);box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:width .34s cubic-bezier(.32,0,.16,1),background .34s ease}
.tDot:hover::after{background:rgba(255,255,255,.78)}
.tDot:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:8px}
.tDot[aria-selected="true"]::after{width:32px;background:#fff}
.tDot[data-c="blue"][aria-selected="true"]::after{background:var(--sky)}
.tDot[data-c="current"][aria-selected="true"]::after{background:var(--current)}
.tDot[data-c="teal"][aria-selected="true"]::after{background:var(--teal)}
.tDot[data-c="green"][aria-selected="true"]::after{background:var(--green)}
/* eight businesses: on a phone the bubbles close up so the row still fits
   between the arrows */
@media (max-width:820px){
  .tDots:has(.tDot:nth-child(6)){gap:2px}
  .tDots:has(.tDot:nth-child(6)) .tDot{width:28px}
  .tDots:has(.tDot:nth-child(6)) .tDot[aria-selected="true"]{width:40px}
  .tDots:has(.tDot:nth-child(6)) .tDot[aria-selected="true"]::after{width:26px}
}

/* prev / next, held on the same row as the bubbles and to the same measure
   as the copy above them */
.tNavRow{position:absolute;left:0;right:0;bottom:clamp(12px,2vh,24px);z-index:7;
  max-width:1160px;margin:0 auto;padding:0 clamp(8px,2.4vw,26px);
  display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.tNav{pointer-events:auto;width:44px;height:44px;display:grid;place-items:center;
  padding:0;border:0;cursor:pointer;color:#fff;border-radius:11px;
  background:rgba(8,20,34,.44);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,transform .2s cubic-bezier(.3,0,.2,1)}
.tNav svg{width:24px;height:24px;display:block}
.tNav:hover{background:rgba(8,20,34,.74)}
.tNav.prev:hover{transform:translateX(-3px)}
.tNav.next:hover{transform:translateX(3px)}
.tNav:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:820px){
  .tFull{height:100svh}
  .tHead{padding-top:calc(var(--topH) + clamp(16px,2.6vh,30px))}
  .tCopy{padding-bottom:clamp(62px,8.4vh,86px)}
  /* on a phone the bar floats over full-screen sections and goes away when
     scrolling stops, so the title block does not keep room for it: it sits
     up in the top-left corner */
  body.phoneBar .tHead{padding-top:clamp(18px,2.8svh,26px)}
  body.phoneBar .tHead .tH{margin-top:6px}
  body.phoneBar .tHead .seg{margin-top:12px}
  .tLede{max-width:none}
  .tList{max-width:none}
}
@media (max-height:640px) and (min-width:821px){
  .tList li:nth-child(n+5){display:none}
}

/* ── proof: one reading, before and after ─────────────────────────────── */
.proof{margin:clamp(26px,3.4vh,44px) 0 0;max-width:560px}
.proofCap{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.proofSvg{width:100%;height:auto;display:block;overflow:visible}
.proofNote{margin:14px 0 0;font-size:13.4px;line-height:1.55;color:var(--muted);max-width:52ch}
.proofNote b{color:var(--head);font-weight:600}
.proof .bl{stroke:var(--rule);stroke-width:1}
.proof .lim{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:7 5;opacity:0}
.proof .limT{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.07em;
  fill:var(--muted);opacity:0}
.proof .pb{transform-box:view-box;transform-origin:0 168px;transform:scaleY(0)}
.proof .b1{fill:var(--elev)}
.proof .b2{fill:var(--ok)}
.proof .nm{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--muted);
  letter-spacing:.02em}
.proof .vl{font-family:var(--mono);font-size:16px;font-weight:600;fill:var(--head)}
.proof .drop{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--ok);opacity:0}
.proof .dropA{stroke:var(--ok);stroke-width:1.4;fill:none;opacity:0}
.proof.play .pb{animation:pbGrow .95s cubic-bezier(.22,.8,.28,1) forwards}
.proof.play .b2{animation-delay:.26s}
.proof.play .lim,.proof.play .limT{animation:pbFade .5s ease .55s forwards}
.proof.play .drop,.proof.play .dropA{animation:pbFade .5s ease .95s forwards}
@keyframes pbGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pbFade{from{opacity:0}to{opacity:1}}
@media (max-width:820px){.proof{margin-top:26px}.proofSvg{max-width:420px}}

/* ── protect: the run of the line, the points, and the droplet ────────── */
.protectBand{background:var(--surface)}
@media (min-width:821px){
  .protectBand{min-height:100svh;display:flex;align-items:center;
    padding-block:clamp(56px,7vw,92px)}
  .protectBand > .wrap{width:100%}
}
.pxH{margin-top:clamp(10px,1.4vh,16px);letter-spacing:-.024em;line-height:1.2;
  font-size:clamp(1.32rem,1.02rem + 1.4vw,2rem)}
@media (min-width:821px){.pxH{white-space:nowrap;text-wrap:nowrap;
  font-size:min(1.72rem,2.28vw)}}
.pxArt{margin-top:clamp(26px,4.4vh,58px)}
.pxLine{width:100%;height:auto;display:block;overflow:visible}
.pxSea{fill:none;stroke:var(--current);stroke-width:1.7;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.pxArt.play .pxSea{animation:pxDraw 1.5s cubic-bezier(.35,0,.15,1) .15s forwards}
@keyframes pxDraw{to{stroke-dashoffset:0}}

/* the droplet waits at the end of the line and lights when the run finishes */
.pxDrop{opacity:.16}
.pxArt.play .pxDrop{animation:pxBloom 1s cubic-bezier(.2,.8,.3,1) 5.05s forwards}
@keyframes pxBloom{to{opacity:1;filter:drop-shadow(0 0 16px rgba(129,199,130,.55))}}

/* each point lights as the ball passes it */
.pxLine .nd{opacity:.16}
.pxArt.play .nd{animation:pxLit .45s ease var(--d) forwards}
@keyframes pxLit{to{opacity:1}}
.pxLine .tk{stroke-width:1.2;opacity:.4}
.pxLine .dot{stroke:var(--surface);stroke-width:3}
.pxLine .hal{fill:none;stroke-width:1.8;opacity:0;
  transform-box:fill-box;transform-origin:center}
.pxLine .nd.on .hal{animation:pxHalo .9s cubic-bezier(.2,.7,.3,1)}
@keyframes pxHalo{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.9)}}
.f-blue{fill:var(--blue)} .f-current{fill:var(--current)}
.f-teal{fill:var(--teal)} .f-green{fill:var(--green)}
.s-blue{stroke:var(--blue)} .s-current{stroke:var(--current)}
.s-teal{stroke:var(--teal)} .s-green{stroke:var(--green)}
.c-blue{stroke:var(--blue)} .c-current{stroke:var(--current)}
.c-teal{stroke:var(--teal)} .c-green{stroke:var(--green)}
.pxBall{display:none;fill:var(--green)}
@supports (offset-path: path("M0 0 L1 1")){
  .pxBall{display:block;opacity:0;offset-rotate:0deg;offset-distance:0%;
    offset-path:path("M20,151.6 L30,152.3 L40,152.9 L50,153.5 L60,154.0 L70,154.3 L80,154.5 L90,154.6 L100,154.5 L110,154.4 L120,154.0 L130,153.6 L140,153.1 L150,152.4 L160,151.7 L170,151.0 L180,150.2 L190,149.4 L200,148.6 L210,147.9 L220,147.2 L230,146.6 L240,146.1 L250,145.8 L260,145.5 L270,145.4 L280,145.4 L290,145.6 L300,145.9 L310,146.3 L320,146.8 L330,147.4 L340,148.1 L350,148.9 L360,149.6 L370,150.4 L380,151.2 L390,152.0 L400,152.6 L410,153.3 L420,153.8 L430,154.2 L440,154.4 L450,154.6 L460,154.6 L470,154.5 L480,154.2 L490,153.8 L500,153.3 L510,152.7 L520,152.0 L530,151.3 L540,150.5 L550,149.7 L560,148.9 L570,148.2 L580,147.5 L590,146.9 L600,146.3 L610,145.9 L620,145.6 L630,145.4 L640,145.4 L650,145.5 L660,145.7 L670,146.1 L680,146.6 L690,147.1 L700,147.8 L710,148.5 L720,149.3 L730,150.1 L740,150.9 L750,151.6 L760,152.4 L770,153.0 L780,153.6 L790,154.0 L800,154.3 L810,154.5 L820,154.6 L830,154.5 L840,154.3 L850,154.0 L860,153.5 L870,153.0 L880,152.3 L890,151.6 L900,150.9 L910,150.1 L920,149.3 L930,148.5 L940,147.8 L950,147.1 L960,146.6 L970,146.1 L980,145.7 L990,145.5 L1000,145.4 L1010,145.4 L1020,145.6 L1030,145.9 L1040,146.3 L1050,146.9 L1060,147.5 L1070,148.2 L1080,149.0");
    filter:drop-shadow(0 0 8px rgba(129,199,130,.95))}
  .pxArt.play .pxBall{animation:pxRun 4.6s linear .5s forwards}
}
@keyframes pxRun{0%{opacity:1;offset-distance:0%}
                 88%{opacity:1}
                 100%{opacity:0;offset-distance:100%}}

/* the times, sitting under their points and opening a card */
.pxTimes{position:relative;height:52px;margin-top:2px}
.pxT{position:absolute;top:0;left:var(--x);transform:translateX(-50%);
  appearance:none;cursor:pointer;font:inherit;font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.11em;color:var(--head);white-space:nowrap;
  background:transparent;border:1.5px solid var(--rule);border-radius:999px;
  padding:0 16px;min-height:44px;display:inline-flex;align-items:center;gap:8px;
  opacity:0;transition:border-color .2s,background .2s}
.pxArt.play .pxT{animation:pxFadeIn .45s ease var(--d) forwards}
@keyframes pxFadeIn{to{opacity:1}}
.pxT:hover{border-color:var(--head)}
.pxT[aria-selected="true"]{background:var(--head);color:#fff;border-color:var(--head)}
.pxT:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.pxT .pd{width:9px;height:9px;border-radius:50%;flex:none}
.pxT[data-p="0"] .pd{background:var(--blue)}
.pxT[data-p="1"] .pd{background:var(--current)}
.pxT[data-p="2"] .pd{background:var(--teal)}
.pxT[data-p="3"] .pd{background:var(--green)}
.pxT[aria-selected="true"] .pd{box-shadow:0 0 0 2px rgba(255,255,255,.35)}

/* one card slot, cross-faded, so opening one never moves the page */
.pxPanel{margin-top:clamp(20px,2.6vh,32px);display:grid;align-items:start}
.pxCard{grid-area:1/1;background:var(--page);border:1px solid var(--rule);
  border-radius:12px;padding:clamp(18px,2.2vw,26px);max-width:66ch;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.3,0,.2,1),visibility .28s}
.pxCard.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.pxCard .pt{font-size:1.2rem;font-weight:700;color:var(--head);letter-spacing:-.015em;
  margin-top:10px;line-height:1.15}
.pxCard .n{font-size:14.4px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:60ch}

@media (max-width:820px){
  .pxLine .tk{display:none}
  .pxTimes{position:static;height:auto;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
  .pxT{position:static;transform:none;justify-content:center;padding:0 10px;font-size:11.5px}
  .pxCard{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .pxSea{stroke-dashoffset:0}
  .pxDrop,.pxLine .nd,.pxT{opacity:1}
  .pxBall{display:none}
}

/* ── the chart: a pale sea, tinted land, and where the testing stops ──── */
.mapFull{position:relative;background:var(--page);color:var(--body);overflow:hidden;
  scroll-margin-top:var(--topH);
  min-height:calc(100svh - var(--topH));
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(28px,4vh,56px)}
@media (max-width:1000px){.mapFull{padding-top:clamp(28px,5vw,44px)}}
@media (min-width:1001px){
  .mapFull{align-items:center;padding-block:clamp(24px,3vh,40px)}
  .mapFull > .wrap{width:100%;max-width:1340px}
}
.mapWrap{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  grid-template-rows:auto auto;gap:0 clamp(24px,3.4vw,56px);align-items:center}
.mapCopy{grid-column:1;grid-row:1;align-self:end}
.mapWrap .mapClose{grid-column:1;grid-row:2;align-self:start}
.mapWrap .mapBox{grid-column:2;grid-row:1 / span 2}
@media (max-width:1000px){
  .mapWrap{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  /* align-self:end is a grid instruction; in a column flex it pushed the copy
     right and shrank it, so it no longer lined up with the map beneath */
  .mapCopy{order:1;align-self:stretch}
  .mapWrap .mapBox{order:2} .mapWrap .mapClose{order:3;margin-top:0;align-self:stretch}
  .mapCopy .eyebrow,.mapCopy .mapH,.mapCopy .townFind{text-align:left;margin-inline:0}
}
.mapFull .eyebrow{color:var(--accent)}
.mapH{color:var(--head);letter-spacing:-.03em;line-height:1.08;margin-top:12px;
  font-size:clamp(1.7rem,1.2rem + 2.1vw,2.7rem)}
@media (max-width:820px){.mapH br{display:none}}
.hMob{display:none}
@media (max-width:1000px){.hDesk{display:none}.hMob{display:inline}}


/* find your town */
.townFind{display:block;margin-top:clamp(16px,2vw,22px);position:relative;max-width:340px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.townFind input{width:100%;font:inherit;font-size:15px;color:var(--body);min-height:50px;
  background:var(--surface);border:1.5px solid var(--rule);
  border-radius:10px;padding:0 16px;transition:border-color .2s,box-shadow .2s}
.townFind input::placeholder{color:var(--muted)}
.townFind input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 20%,transparent)}

/* the key, in the corner of the chart, and it explains itself */
.mapKeyWrap{position:absolute;top:14px;right:14px;z-index:7}
.keyPill{display:inline-flex;align-items:center;gap:8px;appearance:none;cursor:pointer;
  font:inherit;font-family:var(--mono);font-size:10.2px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:0 15px;min-height:36px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--rule);box-shadow:0 6px 18px rgba(22,50,92,.14);
  transition:color .16s ease}
.keyPill:hover{color:var(--head)}
.keyPill:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.keyCar{width:12px;height:12px;flex:none;opacity:0;transform:translateY(-2px);
  transition:opacity .18s ease,transform .22s ease}
.mapKeyWrap:hover .keyCar,.mapKeyWrap:focus-within .keyCar{opacity:.85;transform:none}
.mapKeyWrap.open .keyCar{opacity:.85;transform:rotate(180deg)}
.mapKey2{position:absolute;top:calc(100% + 8px);right:0;z-index:7;width:212px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  display:grid;gap:1px;padding:8px 8px 7px;border-radius:12px;background:var(--surface);
  border:1px solid var(--rule);box-shadow:0 16px 36px rgba(22,50,92,.20)}
.mapKeyWrap:hover .mapKey2,.mapKeyWrap:focus-within .mapKey2,.mapKeyWrap.open .mapKey2{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mapFlip.flipped .mapKeyWrap{display:none}
.keyH{margin:0 0 7px 8px;font-family:var(--mono);font-size:9.6px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.keyItem{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;
  padding:4px 8px;border:0;border-radius:8px;cursor:pointer;background:none;
  font:inherit;font-size:12.4px;color:var(--body);text-align:left;
  transition:background .15s,color .15s}
.keyItem:hover{background:var(--panel);color:var(--head)}
.keyItem:focus-visible{outline:2px solid var(--green);outline-offset:-1px}
.keyItem::after{content:"?";margin-left:auto;flex:none;
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);color:var(--muted);
  font-family:var(--mono);font-size:9.5px;font-weight:600}
.keyItem:hover::after{border-color:var(--accent);color:var(--accent)}
.mapKey2 .sw{width:13px;height:13px;border-radius:4px;border:1px solid var(--rule);flex:none}
.k-ok{background:#D8EDDF} .k-elev{background:#F8E7C2}
.k-act{background:#F7D7CC} .k-well{background:#DEDDF2} .k-unk{background:#EDE7DC}

/* the definition */
.keyDlg{border:0;padding:0;background:transparent;margin:auto;
  max-width:min(440px,92vw);width:100%;overflow:visible}
.keyDlg::backdrop{background:rgba(6,16,30,.42)}
.keyDlg:focus{outline:none}
.keyBody{position:relative;background:var(--surface);border-radius:14px;
  padding:clamp(22px,3vw,30px);box-shadow:0 30px 80px rgba(6,18,34,.3)}
.keyBody .kd{margin:14px 0 18px;font-size:14.6px;line-height:1.62;color:var(--body)}
/* the acknowledgement after a request is sent */
.cThanksBody{text-align:center}
.cThanksMark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;
  border-radius:50%;background:var(--ok-bg);color:var(--green-deep)}
.cThanksMark svg{width:34px;height:34px;display:block}
.cThanksBody h2{margin:0;font-size:clamp(1.5rem,1.1rem+1.2vw,2rem);letter-spacing:-.03em;
  color:var(--head)}
.cThanksBody p{margin:10px auto 20px;max-width:34ch;font-size:15px;line-height:1.6;
  color:var(--muted)}
/* The same box carries the whole submission: it opens on the press saying the
   request is on its way, and turns into the acknowledgement when the server
   answers. Only one state's contents are ever in the flow. */
#cThanks[data-state="sending"] .cDone,
#cThanks[data-state="done"] .cSend{display:none}
#cThanks[data-state="sending"] .cThanksMark{background:var(--vapor);color:var(--blue)}
.cSpin{width:34px;height:34px;display:block;animation:cSpin 1.1s linear infinite;
  transform-origin:50% 50%}
@keyframes cSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cSpin{animation-duration:3.2s}}

/* the closing line under the search */
.mapClose{margin:clamp(22px,3vw,32px) 0 0;font-size:14px;line-height:1.6;
  color:var(--muted);max-width:42ch}

/* the map itself */
.mapFull .mapBox{position:relative;background:#D3E4F2;perspective:1900px;
  border:1px solid var(--rule);border-radius:16px;padding:10px;overflow:hidden}
/* the chart turns over to show the record */
.mapFlip{position:relative;transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.4,0,.2,1)}
.mapFlip.flipped{transform:rotateY(180deg)}
.mapFace{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* only the face that is turned towards the reader takes clicks */
.mapFlip.flipped .mapFront{pointer-events:none}
.mapFlip:not(.flipped) .mapBack{pointer-events:none}
.mapBack{pointer-events:auto}
.mapBack{position:absolute;inset:0;transform:rotateY(180deg);overflow-y:auto;
  background:var(--surface);border-radius:8px}
.mapUnflip{position:sticky;top:0;z-index:6;pointer-events:auto;width:100%;display:flex;align-items:center;gap:10px;
  min-height:48px;padding:0 clamp(18px,2.4vw,26px);border:0;cursor:pointer;
  background:var(--surface);border-bottom:1px solid var(--rule);
  font:inherit;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);transition:color .2s}
.mapUnflip i{font-style:normal;font-size:15px;color:var(--accent)}
.mapUnflip span{border-bottom:1.5px solid var(--rule);padding-bottom:2px;
  transition:border-color .2s,color .2s}
.mapUnflip:hover{color:var(--head)}
.mapUnflip:hover span{border-color:var(--accent);color:var(--head)}
.mapUnflip:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.mapBack .detail{border:0;border-radius:0;box-shadow:none;max-height:none;position:static;
  max-width:660px;margin:0 auto}
@media (prefers-reduced-motion:reduce){.mapFlip{transition:none}}
@media (max-width:820px){
  .mapKeyWrap{top:10px;right:10px}
  .keyPill{font-size:9.4px;padding:0 12px;min-height:32px}
}
.mapFull #mapSlot svg{width:100%;display:block;border-radius:8px;
  height:calc(100svh - var(--topH) - 150px);max-height:900px}
@media (max-width:1000px){.mapFull #mapSlot svg{height:auto;max-height:none}}
.sea{fill:#D3E4F2;transition:opacity .4s ease}
.seaw{fill:none;stroke:var(--blue);stroke-width:1.6;opacity:.10;transition:opacity .35s ease}
.mapFull .twn{stroke:#fff;stroke-width:1.25}
.mapFull .twn.s-ok{fill:#D8EDDF} .mapFull .twn.s-elev{fill:#F8E7C2}
.mapFull .twn.s-act{fill:#F7D7CC} .mapFull .twn.s-well{fill:#DEDDF2}
.mapFull .twn.s-unk{fill:#EDE7DC}
.mapFull .twn:hover{fill:var(--current)}
.mapFull .twn[aria-pressed="true"]{fill:var(--blue);stroke:#fff;stroke-width:2.2}
.mapFull .tlab{fill:var(--head);stroke:#fff;stroke-width:2.8px}
.mlabs{transition:opacity .35s ease}
.tlab{vector-effect:non-scaling-stroke}
/* the water, lettered the way a chart letters it */
.seaT{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;
  fill:#4E88B4;letter-spacing:.01em;pointer-events:none;
  transition:opacity .3s ease}
.seaT.caps{text-transform:uppercase;letter-spacing:.10em;font-weight:700;fill:#3F7BA8}
:root[data-theme="dark"] .seaT{fill:#6FA6CE}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .seaT{fill:#6FA6CE}
}

/* zoom controls, bottom-left of the chart */
.mapStage{position:relative}
/* names the map has no room to print are read out on hover instead */
.mapTip{position:absolute;left:0;top:0;z-index:8;pointer-events:none;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  background:var(--head);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(10,24,42,.28);
  opacity:0;transform:translate(-50%,-140%) scale(.96);
  transition:opacity .13s ease,transform .13s ease}
.mapTip.on{opacity:1;transform:translate(-50%,-140%) scale(1)}
.mapCtl{position:absolute;left:14px;bottom:14px;z-index:5;display:flex;align-items:center;gap:4px;
  padding:4px;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);
  border:1px solid var(--rule);box-shadow:0 6px 18px rgba(22,50,92,.14)}
.mapCtl button{appearance:none;border:0;cursor:pointer;font:inherit;background:transparent;
  color:var(--head);width:34px;height:34px;border-radius:999px;font-size:19px;line-height:1;
  display:grid;place-items:center;transition:background .15s,color .15s}
.mapCtl button:hover:not(:disabled){background:var(--panel)}
.mapCtl button:disabled{color:var(--rule);cursor:default}
.mapCtl button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.mapCtl .mapRst{color:var(--muted)}
.mapCtl .mapRst svg{width:19px;height:19px;display:block}
.mapCtl .mapRst:hover{color:var(--accent)}
#mapLvl{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);
  min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.mapHint{position:absolute;right:14px;bottom:22px;z-index:5;margin:0;text-align:right;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);opacity:.85;pointer-events:none}
.mapFull .mapBox.zoomed{cursor:grab}
.mapFull .mapBox.zoomed:active{cursor:grabbing}
.mapFlip.flipped .mapCtl,.mapFlip.flipped .mapHint{display:none}
@media (max-width:560px){
  .mapCtl{left:10px;bottom:10px}
  .mapHint{right:10px;bottom:14px;font-size:8.5px;letter-spacing:.06em}
}

.dlgX{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;border:0;border-radius:9px;cursor:pointer;
  background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--muted);
  font-size:24px;line-height:1;font-family:var(--sans)}
.dlgX:hover{color:var(--head);background:var(--panel)}
table.rdg{width:100%;border-collapse:collapse;margin-top:10px}
table.rdg td{padding:8px 8px 8px 0;border-bottom:1px solid var(--rule);
  font-size:13.2px;vertical-align:middle}
table.rdg td:first-child{color:var(--head);font-weight:600}
table.rdg td.mono{font-family:var(--mono);font-weight:600;color:var(--head);white-space:nowrap}
table.rdg td.lim{color:var(--muted);font-size:12.2px;text-align:right;white-space:nowrap}
table.rdg .chip{font-size:10px;padding:3px 8px}
.detail .tNote{margin-top:10px;padding-left:12px;border-left:2px solid var(--rule);
  color:var(--head);font-weight:600}
.detail .dLink{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--head);text-decoration:none;min-height:40px;
  border-bottom:2px solid var(--rule);transition:border-color .2s,gap .2s}
.detail .dLink i{font-style:normal;color:var(--accent)}
.detail .dLink:hover{border-color:var(--green);gap:13px}
.detail .dCta{margin-top:0;font-size:13px}
/* the way to reach a person stays in view while the record scrolls */
.mapBack .dFoot{position:sticky;bottom:0;z-index:2;background:var(--surface);
  border-top:1px solid var(--rule);box-shadow:0 -10px 18px -12px rgba(22,50,92,.28)}
.detail .rdg .rh td{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding-bottom:4px}
.detail .rdg .rh td:first-child{color:var(--muted);font-weight:600}
.detail .src{margin-top:10px;font-size:12.2px;line-height:1.5;color:var(--muted)}
@media (max-width:560px){
  table.rdg .rh{display:none}
  table.rdg tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;
    align-items:center;padding:11px 0;border-bottom:1px solid var(--rule)}
  table.rdg td{display:block;border:0;padding:0}
  table.rdg td:first-child{grid-column:1;font-size:14px}
  table.rdg td.mono{grid-column:2;text-align:right}
  table.rdg td:nth-child(3){grid-column:1;justify-self:start}
  table.rdg td.lim{grid-column:2;text-align:right}
}

/* the action under a slide */
.tAct{margin-top:clamp(12px,1.6vh,20px)}
.tAct .featBtn{margin-top:0}

/* the home carousel: the phone gets photographs cut for a phone */
#hpanel-well .tImg{object-position:34% center}
#hpanel-home .tImg{object-position:18% center}
#hpanel-ih .tImg{object-position:72% center}
#hpanel-ls .tImg{object-position:center center}
#hpanel-daycares .tImg{object-position:58% center}
#hpanel-dental .tImg{object-position:62% center}
@media (max-width:820px){#hpanel-dental .tImg{object-position:50% center}}
#hpanel-gyms .tImg{object-position:56% center}
#hpanel-salons .tImg{object-position:60% center}
#hpanel-vets .tImg{object-position:64% center}
#hpanel-offices .tImg{object-position:62% center}
@media (max-width:820px){
  #homeSolutions .tImg{object-position:50% center}
}

/* the picker */
.hwPick{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);flex-wrap:wrap;
  margin-top:clamp(30px,4vw,56px)}
.hwQ{font-size:clamp(1rem,.95rem + .3vw,1.18rem);font-weight:600;color:var(--head);
  line-height:1.3;margin:0;flex:none}
@media (max-width:640px){.hwQ br{display:none}}
.hwArrow{flex:none;width:clamp(50px,9vw,130px);height:1.5px;background:var(--head);
  position:relative;opacity:.75}
.hwArrow::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;
  border-top:1.5px solid var(--head);border-right:1.5px solid var(--head);
  transform:translateY(-50%) rotate(45deg)}
@media (max-width:640px){.hwArrow{display:none}}
.hwPills{display:flex;gap:clamp(14px,2.2vw,30px);flex-wrap:wrap}
.hwPill{appearance:none;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--head);
  background:transparent;border:1.5px solid var(--head);border-radius:999px;
  padding:0 clamp(16px,2vw,26px);min-height:46px;
  transition:background .2s,color .2s,border-color .2s}
.hwPill:hover{background:color-mix(in srgb,var(--head) 8%,transparent)}
.hwPill[aria-selected="true"]{background:var(--head);color:#fff;border-color:var(--head)}
.hwPill:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* the panel each pill opens */
.hwPanel{margin-top:clamp(30px,3.6vw,50px);padding-bottom:clamp(16px,2vw,28px);
  display:grid;align-items:start}
.hwCard{grid-area:1/1;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;box-shadow:var(--shadow);padding:clamp(20px,2.4vw,30px);max-width:64ch;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.3,0,.2,1),visibility .28s}
.hwCard.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.hwCard .pt{font-size:1.24rem;font-weight:700;color:var(--head);letter-spacing:-.015em;
  margin-top:10px;line-height:1.1}
.hwCard .n{font-size:14.6px;line-height:1.62;color:var(--muted);margin-top:8px;max-width:60ch}
@media (prefers-reduced-motion:reduce){
  .wv *,.hwCard{animation:none!important}
  .wv .hx,.wv .lip,.wv .sea{stroke-dashoffset:0}
}

.pLink{appearance:none;border:0;background:transparent;padding:9px 0 0;margin-top:auto;
  cursor:pointer;font:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--head);text-align:left;
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  border-bottom:2px solid transparent;transition:border-color .2s,gap .2s;align-self:flex-start}
.pLink i{font-style:normal;color:var(--accent)}
.pLink:hover{border-color:var(--green);gap:13px}
.pLink:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.pcard{max-width:min(36%,318px)}
/* Two at the top corners, one centred below — the droplet sits in the middle
   of the triangle they make. */
/* Each card overlaps the droplet: Test at its top left, Engineer at its right
   shoulder, Maintain low and centred. */
.p1{top:3%;left:3%} .p2{top:36%;right:3%}
.p3{bottom:-4%;left:50%;transform:translateX(-50%)}
.howWork .dropArt{max-width:1000px;min-height:clamp(540px,52vw,700px)}
/* Big enough that the three cards sit over it rather than beside it. Sized by
   height so it cannot outgrow the container as the viewport changes. */
.howWork .dropArt .mk{width:min(40%,400px);height:auto}
.howWork .dropArt .halo{width:min(70%,560px)}
/* The lede runs on one row wherever there is room for it. */
@media (min-width:1000px){.howWork .lede{max-width:none}}
.howWork .pcard{padding:16px 18px}
.howWork .pcard .n{font-size:13.4px;line-height:1.55;margin-top:6px}
/* Below the point where three floating cards would collide, the same content
   becomes the plain stacked list. */
@media (max-width:900px){
  .howWork .dropArt{display:block;min-height:0;margin-top:clamp(22px,3vw,32px)}
  .howWork .dropArt .halo{display:none}
  .howWork .dropArt .mk{display:block;width:96px;margin:0 auto clamp(20px,3vw,30px)}
  .howWork .pcard{position:static;inset:auto;transform:none;
    max-width:none;background:transparent;border:0;
    box-shadow:none;padding:20px 0 20px 30px;border-top:1px solid var(--rule);
    border-radius:0}
  .howWork .pcard .pdot{position:absolute;margin-left:-30px;margin-top:9px}
  .howWork .pcard .pt{margin-top:0}
}
.steps3{display:flex;flex-direction:column;gap:0;margin-top:26px}
.st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;padding:20px 0;
  border-top:1px solid var(--rule)}
.st:last-child{border-bottom:1px solid var(--rule)}
.st .dot{width:14px;height:14px;border-radius:50%;margin-top:8px}
.st h3{font-size:1.28rem;letter-spacing:-.01em}
.st p{font-size:14.4px;line-height:1.6;color:var(--muted);margin-top:6px}

/* simplified footer */
.ft2{background:#0A1A2F;color:var(--sky);
  padding:clamp(22px,2.2vw,30px) 0 calc(16px + env(safe-area-inset-bottom,0px))}
@media (prefers-color-scheme:dark){:root[data-theme="dark"] .ft2,:root:not([data-theme="light"]) .ft2{background:#061120}}

.ft2 h2{color:#fff;font-size:clamp(1.2rem,1rem + .85vw,1.62rem);letter-spacing:-.02em}
.ft2 .midRow{display:flex;align-items:center;justify-content:space-between;
  gap:10px clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:clamp(10px,1.2vw,16px)}
.ft2 .midRow h2{flex:none;white-space:nowrap}
.ft2 .ftLead{flex:none;min-width:0}
/* the links, and the address under them, both hard right */
.ft2 .ftRight{flex:1;min-width:0;display:flex;flex-direction:column;
  align-items:flex-end;gap:2px}
.ft2 .ftMail{display:inline-flex;align-items:center;min-height:34px;
  color:var(--sky);text-decoration:none;text-align:right;
  font-size:13px;font-weight:600;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s}
.ft2 .ftMail:hover{color:#fff;border-color:var(--green)}
.ft2 nav{display:flex;gap:clamp(13px,2vw,30px);flex-wrap:wrap;
  justify-content:flex-end;min-width:0}
.ft2 nav button,.ft2 nav a{appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;
  font-size:12.4px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  white-space:nowrap;
  text-decoration:none;padding:6px 0;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;transition:border-color .2s}
.ft2 nav button:hover,.ft2 nav a:hover{border-color:var(--green)}
@media (max-width:1120px){
  .ft2 nav button,.ft2 nav a{font-size:11.4px;letter-spacing:.1em}
  .ft2 nav{gap:clamp(11px,1.6vw,20px)}
  .ft2 .midRow h2{font-size:clamp(1.05rem,.85rem + .7vw,1.35rem)}
}
@media (max-width:960px){
  .ft2 > .wrap{padding-left:16px;padding-right:16px}
  .ft2 nav button,.ft2 nav a{font-size:10.4px;letter-spacing:.07em}
  .ft2 nav{gap:10px}
  .ft2 .midRow{gap:8px 16px}
  .ft2 .midRow h2{font-size:1.02rem}
}
.ft2 .bot{margin-top:clamp(12px,1.4vw,18px);padding-top:12px;border-top:1px solid rgba(143,190,221,.2);
  display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;font-size:12.4px}
.ft2 .bot a{color:var(--sky);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;padding:0 7px;margin:0 -7px}
.ft2 .bot a:hover{color:#fff;text-decoration:underline}

/* ── the footer on a phone ────────────────────────────────────────────────
   The motto comes up beside the logo, the section links go (the menu already
   carries them), and the legal line shares one row with the copyright. */
@media (max-width:820px){
  .ft2 > .wrap{display:flex;flex-wrap:wrap;align-items:center;
    gap:12px clamp(12px,3vw,20px)}
  .ft2 .brand{flex:none}
  .ft2 nav{display:none}
  .ft2 .midRow{flex:1;min-width:0;margin:0;justify-content:flex-end}
  .ft2 .midRow h2{font-size:clamp(1rem,4.4vw,1.35rem);margin:0;text-align:right}
  /* the rule under the logo row goes on a phone */
  .ft2 .bot{border-top:0;padding-top:0;
    flex-basis:100%;flex-wrap:nowrap;align-items:center;
    justify-content:space-between;gap:8px;margin-top:12px;
    font-size:clamp(9.4px,2.72vw,11.4px)}
  .ft2 .bot > span{white-space:nowrap}
  .ft2 .bot a{padding:0 3px;margin:0 -3px}
  .ft2 .bot .sep{opacity:.55;padding:0 1px}
  .ftTrim{display:none}          /* the row only fits without these words */
}


/* ── how we work ──────────────────────────────────────────────────────────── */
.watchline{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding:16px 18px;
  background:var(--panel);border-radius:10px}
.watchline span{display:inline-flex;align-items:center;gap:9px;font-size:13.4px;font-weight:600;color:var(--head)}
.watchline i.w{width:10px;height:10px;border-radius:50%;flex:none}
.watchline i.w.yes{background:var(--teal)}
.watchline i.w.no{background:transparent;border:2px dashed var(--slate)}
.steps4{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px;counter-reset:s}
@media (max-width:1040px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps4{grid-template-columns:1fr}}
.steps4 li{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:26px 22px 24px;min-width:0;display:flex;flex-direction:column}
.steps4 li::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:12px 12px 0 0}
.steps4 li:nth-child(1)::before{background:var(--blue)}
.steps4 li:nth-child(2)::before{background:var(--current)}
.steps4 li:nth-child(3)::before{background:var(--teal)}
.steps4 li:nth-child(4)::before{background:var(--green)}
.sIcon{width:46px;height:46px;border-radius:12px;background:var(--panel);display:grid;place-items:center;
  color:var(--blue);margin-bottom:16px}
.steps4 li:nth-child(4) .sIcon{color:var(--green-deep)}
.sNum{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.steps4 h3{margin-top:5px;font-size:1.42rem;letter-spacing:-.015em}
.sLead{font-size:13.6px;line-height:1.45;font-weight:600;color:var(--teal-deep);margin-top:8px}
@media (prefers-color-scheme:dark){:root[data-theme="dark"] .sLead,:root:not([data-theme="light"]) .sLead{color:var(--green)}}
.sBody{font-size:14px;line-height:1.6;color:var(--muted);margin-top:11px}
.whyBox{margin-top:24px;padding:20px 22px;border:1px solid var(--rule);border-left:4px solid var(--green);
  border-radius:12px;background:var(--surface);display:flex;gap:14px;align-items:flex-start}
/* town select in the quiz */
.qLabel{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:7px}
.qSelect{width:100%;font:inherit;font-size:15px;color:var(--body);background:var(--surface);
  border:1.5px solid var(--rule);border-radius:10px;padding:13px 14px;min-height:50px;
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
.qSelect:focus{border-color:var(--blue)}
.qSub{font-size:13px;color:var(--muted);margin-top:9px;min-height:1.4em}
.qSub b{color:var(--head)}


/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--panel) 0%,var(--page) 100%);padding:clamp(40px,5vw,68px) 0 clamp(44px,5vw,72px);position:relative;overflow:hidden}
.heroGrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,52px);align-items:center}
@media (max-width:900px){.heroGrid{grid-template-columns:1fr;gap:34px}}
.heroCtas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.trust span{display:inline-flex;align-items:center;gap:7px;font-size:12.8px;color:var(--muted);font-weight:500}
.trust svg{color:var(--teal-deep);flex:none}
@media (prefers-color-scheme:dark){:root[data-theme="dark"] .trust svg,:root:not([data-theme="light"]) .trust svg{color:var(--green)}}
/* hero visual: the mark as the product shot, with a result card against it */
.shot{position:relative;display:flex;align-items:center;justify-content:center;min-height:330px}
.shot .halo{position:absolute;width:min(88%,380px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--current) 26%,transparent) 0%,transparent 68%)}
.shot .mark{position:relative;width:min(48%,190px);filter:drop-shadow(0 18px 34px rgba(22,50,92,.22))}
.rcard{position:absolute;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:13px 15px;box-shadow:var(--shadow);min-width:0}
.rcard .k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.rcard .v{font-family:var(--mono);font-size:1.32rem;font-weight:600;color:var(--head);line-height:1.1;margin-top:3px}
.rcard .n{font-size:11.5px;color:var(--muted);margin-top:2px}
.rc1{top:4%;left:-2%}
.rc2{bottom:16%;right:-2%}
.rc3{bottom:1%;left:6%}
@media (max-width:520px){.rc1{left:0}.rc2{right:0}.rc3{left:2%}.shot{min-height:290px}}

/* ── benefit / stage strip ────────────────────────────────────────────────── */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--rule);
  border-radius:12px;overflow:hidden;background:var(--surface)}
@media (max-width:820px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.stages{grid-template-columns:1fr}}
.stg{padding:22px 20px 20px;border-right:1px solid var(--rule);position:relative;min-width:0}
.stg:last-child{border-right:0}
@media (max-width:820px){.stg:nth-child(2){border-right:0}.stg:nth-child(1),.stg:nth-child(2){border-bottom:1px solid var(--rule)}}
@media (max-width:440px){.stg{border-right:0;border-bottom:1px solid var(--rule)}.stg:last-child{border-bottom:0}}
.stg::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.stg:nth-child(1)::before{background:var(--blue)}
.stg:nth-child(2)::before{background:var(--current)}
.stg:nth-child(3)::before{background:var(--teal)}
.stg:nth-child(4)::before{background:var(--green)}
.stg .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted)}
.stg h3{margin-top:7px;font-size:1.05rem}
.stg p{font-size:13.6px;line-height:1.55;color:var(--muted);margin-top:7px}

/* ── quiz ─────────────────────────────────────────────────────────────────── */
.quizWrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3.5vw,44px);align-items:start}
@media (max-width:900px){.quizWrap{grid-template-columns:1fr}}
.quiz{background:var(--surface);border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.quizTop{padding:18px 22px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.steps{display:flex;gap:6px;margin-left:auto}
.dot{width:26px;height:5px;border-radius:3px;background:var(--rule)}
.dot.on{background:var(--blue)}
.dot.done{background:var(--green)}
.quizBody{padding:22px}
.qq{font-size:1.16rem;font-weight:600;color:var(--head);line-height:1.3}
.opts{display:grid;gap:9px;margin-top:16px}
.opts.two{grid-template-columns:1fr 1fr}
@media (max-width:480px){.opts.two{grid-template-columns:1fr}}
.opt{appearance:none;text-align:left;font:inherit;font-size:14.6px;background:var(--surface);
  border:1.5px solid var(--rule);border-radius:10px;padding:13px 15px;cursor:pointer;color:var(--body);
  min-height:48px;display:flex;align-items:center;gap:10px;transition:border-color .13s,background .13s}
.opt:hover{border-color:var(--current)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,transparent)}
.opt .tick{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--rule);flex:none;
  display:grid;place-items:center;font-size:11px;color:#fff}
.opt[aria-pressed="true"] .tick{background:var(--blue);border-color:var(--blue)}
.quizFoot{display:flex;gap:10px;align-items:center;padding:16px 22px;border-top:1px solid var(--rule);background:var(--panel);flex-wrap:wrap}
.quizFoot .hint{font-size:12.5px;color:var(--muted)}
.res{display:flex;flex-direction:column;gap:11px}
.resRow{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--rule);border-radius:10px;padding:13px 15px;background:var(--surface)}
.resRow .ic{width:34px;height:34px;border-radius:9px;background:var(--panel);display:grid;place-items:center;color:var(--blue);flex:none}
.resRow b{display:block;color:var(--head);font-size:15px;font-weight:600}
.resRow p{font-size:13.4px;color:var(--muted);line-height:1.55;margin-top:2px}

/* ── map ──────────────────────────────────────────────────────────────────── */
.mapGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:22px;align-items:start;margin-top:28px}
@media (max-width:1000px){.mapGrid{grid-template-columns:1fr}}
.mapBox{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px;position:relative;min-width:0}
#mapSlot svg{display:block;width:100%;height:min(76vh,720px)}
@media (max-width:1000px){#mapSlot svg{height:min(80vh,640px)}}
.twn{fill:var(--none-bg);stroke:var(--surface);stroke-width:1.6;cursor:pointer;
  vector-effect:non-scaling-stroke;
  transition:fill .12s,opacity .34s ease,filter .4s ease}
.twn:hover{fill:var(--current)}
.twn.s-ok{fill:var(--ok-bg)} .twn.s-elev{fill:var(--elev-bg)} .twn.s-act{fill:var(--act-bg)}
.twn.s-well{fill:var(--none-bg)} .twn.s-unk{fill:var(--none-bg)}
.twn[aria-pressed="true"]{fill:var(--current);stroke:var(--harbor);stroke-width:2.4;
  filter:drop-shadow(0 8px 18px rgba(22,50,92,.30))}
.tlab{font-weight:600;fill:var(--head);pointer-events:none;paint-order:stroke;
  stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:12px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;border:1px solid var(--rule);flex:none}
.detail{background:var(--surface);border:1px solid var(--rule);border-radius:14px;overflow:hidden;position:sticky;top:92px}
@media (max-width:1000px){.detail{position:static}}
.detail .dTop{padding:18px 20px 16px;border-bottom:1px solid var(--rule)}
.detail h3{font-size:1.32rem;letter-spacing:-.01em}
.detail .sup{font-size:12.5px;color:var(--muted);margin-top:3px}
.dRow{padding:15px 20px;border-bottom:1px solid var(--rule)}
.dRow .k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.dRow .v{font-family:var(--mono);font-size:1.28rem;font-weight:600;color:var(--head);margin-top:4px;line-height:1.15}
.dRow p{font-size:13.2px;line-height:1.55;color:var(--muted);margin-top:6px}
.dRow.empty .v{color:var(--muted);font-size:1rem}
.dFoot{padding:16px 20px}


/* ── proof, doors, faq, cta, footer ───────────────────────────────────────── */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:820px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
.num .v{font-family:var(--mono);font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);font-weight:600;color:var(--head);line-height:1;letter-spacing:-.02em}
.band.dark .num .v{color:#fff}
.num .k{font-size:12.6px;color:var(--muted);margin-top:8px;line-height:1.45}
.band.dark .num .k{color:var(--sky)}
.quote{display:flex;flex-direction:column;gap:12px}
.quote .stars{color:var(--green);letter-spacing:2px;font-size:13px}
.quote p{font-size:15px;line-height:1.6}
.quote .who{font-size:12.8px;color:var(--muted);margin-top:auto;padding-top:10px;border-top:1px solid var(--rule)}
.door{display:flex;flex-direction:column;position:relative;overflow:hidden;padding:0}
.door .top{height:5px;display:flex}
.door .top i{flex:1}
.door .in{padding:26px 24px 24px;display:flex;flex-direction:column;flex:1}
.door ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:16px 0 22px}
.door li{position:relative;padding-left:19px;font-size:14.3px;line-height:1.55;color:var(--muted)}
.door li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.door .btn{margin-top:auto}
details.faq{border-bottom:1px solid var(--rule)}
details.faq summary{cursor:pointer;list-style:none;padding:17px 40px 17px 0;font-weight:600;
  color:var(--head);font-size:15.6px;position:relative;min-height:56px;display:flex;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
details.faq[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.faq .a{padding:0 0 18px;font-size:14.8px;line-height:1.65;color:var(--muted);max-width:70ch}
.cta{background:var(--harbor);color:var(--sky);position:relative;overflow:hidden}
.cta .wrap{position:relative;z-index:2;padding:clamp(48px,6vw,80px) clamp(18px,4vw,36px)}
.cta h2{color:#fff;max-width:18ch}
.cta p{color:var(--sky);margin-top:14px;max-width:52ch;font-size:1.06rem}
footer.ft{background:#0C2244;color:var(--sky);padding:52px 0 30px;font-size:14px}
@media (prefers-color-scheme:dark){:root[data-theme="dark"] footer.ft,:root:not([data-theme="light"]) footer.ft{background:#071120}}
.ftGrid{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));gap:30px}
@media (max-width:820px){.ftGrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftGrid{grid-template-columns:1fr}}
footer.ft h4{color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
footer.ft ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer.ft a{color:var(--sky);text-decoration:none}
footer.ft a:hover{color:#fff;text-decoration:underline}
.motto{color:var(--green);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-top:14px}
.ftBot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(143,190,221,.22);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
/* memo chrome (prototype-only) */
.memo{background:var(--harbor);color:#fff;padding:34px 0 30px;position:relative;overflow:hidden}
.memo .eyebrow{color:var(--green)}
.memo h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);color:#fff;margin-top:8px}
.memo p{color:var(--sky);max-width:64ch;margin-top:10px;font-size:15.5px;line-height:1.6}
.pgTitle{padding:clamp(34px,4vw,52px) 0 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr}}
table.reg{width:100%;border-collapse:collapse;font-size:14px;margin-top:18px}
table.reg th{text-align:left;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  padding:0 12px 9px 0;border-bottom:1px solid var(--rule);font-weight:700}
table.reg td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--muted);line-height:1.5}
table.reg td:first-child{color:var(--head);font-weight:600;white-space:nowrap}
@media (max-width:560px){table.reg td:first-child{white-space:normal}table.reg td.d{white-space:normal}}
table.reg td.d{font-family:var(--mono);color:var(--accent);font-weight:600;white-space:nowrap}
.scrollx{overflow-x:auto}
[hidden]{display:none!important}

/* the signs card: inside the schematic screen on a desktop, a screen of its
   own on a phone — stated here so the section rules cannot outrank it */
[data-page="biz"] section.band.mobSigns{display:none}
@media (max-width:820px){
  [data-page="biz"] section.band.mobSigns{display:flex}
  [data-page="biz"] section.band.mobSigns .card{margin-top:0}
}

/* stated against the class the script sets, for the case where the width
   query and the device disagree */
body.phoneBar main{transition:none}
body.phoneBar .fTop{display:none}
body.phoneBar .navToggle{display:flex}
body.phoneBar .topbar .brand{display:flex;opacity:1;visibility:visible}
html body.phoneBar main,
html body.phoneBar.home main{padding-top:0}
html body.phoneBar.home .film,
html body.phoneBar.home .filmUI{min-height:100svh}
/* the hero runs the full screen and the bar floats over it */
body.phoneBar .pHero{min-height:100svh}
body.phoneBar [data-page="res"] section.band:not(.close):not(.faqBand),
body.phoneBar [data-page="biz"] section.band:not(.close):not(.faqBand),
body.phoneBar .mapFull{min-height:100svh}
body.phoneBar [data-page="res"] section.band.close,
body.phoneBar [data-page="biz"] section.band.close{min-height:0}

/* Pricing on a phone: the box is as tall as the card showing, so its bottom
   edge follows the number of bullets. The section keeps its full-screen height
   and the note sits on its floor, so switching pills moves only the box edge —
   the page itself never shifts. */
@media (max-width:940px){
  body .pricing .prBox{flex:0 0 auto}
  body .pricing .prGrid{display:block;flex:0 0 auto}
  body .pricing .prGrid > .prCard{display:none}
  body .pricing[data-card="0"] .prGrid > .prCard[data-c="0"],
  body .pricing[data-card="1"] .prGrid > .prCard[data-c="1"],
  body .pricing[data-card="2"] .prGrid > .prCard[data-c="2"]{display:flex}
  body .pricing .prBox{margin-bottom:0}
  body .pricing .prNote{margin-top:clamp(6px,calc(2.6svh - 10px),16px)}
  /* the card grows with the screen, so a tall phone is filled by the
     content rather than left with an empty band under it */
  body.phoneBar .pricing .prCard{padding:min(20px,calc(3svh - 8px)) 16px min(18px,calc(3svh - 10px))}
  body.phoneBar .pricing .prCard h3{font-size:max(1rem,min(1.25rem,calc(3svh - 4px)))}
  body.phoneBar .pricing .prNum{font-size:max(1.25rem,min(1.8rem,calc(4.4svh - 9px)))}
  body.phoneBar .pricing .prCard ul{margin-top:clamp(6px,calc(2svh - 6px),12px);gap:clamp(3px,calc(2.4svh - 13px),9px)}
  body.phoneBar .pricing .prCard li{font-size:max(12px,min(14.5px,calc(2.6svh - 7.5px)));line-height:calc(1.08em + .5svh);padding-left:22px}
  body.phoneBar .pricing .prNote{font-size:max(10.3px,min(11.6px,1.4svh))}

  /* the heading centred, the pay pills under it, then the box */
  body .pricing .prTop{flex-direction:column;align-items:center;flex-wrap:nowrap;text-align:center;
    gap:min(12px,1.4svh)}
  body .pricing .prTopL{flex:none;text-align:center}
  body .pricing .prH{text-align:center}
  body .pricing .prSeg{justify-content:center}
  /* every card lays out on the same lines, so switching tabs changes the
     words and never where they sit: the "Most homes" tag joins the stage label
     instead of stacking above it, and the head row is one fixed height
     whether or not it carries the New / Retrofit switch */
  body .pricing .prTag{display:none}
  body .pricing .prStage[data-tag]::after{content:" \00b7  " attr(data-tag);color:var(--blue)}
  body .pricing .prHead{height:38px;min-height:0;align-items:center}
  body .pricing .prStage{white-space:nowrap;letter-spacing:.1em;font-size:10px}
  body .pricing .prKindBtn{padding-inline:12px}
  /* one line for every title, so the price below never moves either */
  body.phoneBar .pricing .prCard h3{white-space:nowrap;min-height:0;
    font-size:min(1.2rem,calc((100vw - 84px) / 19))}
  body .pricing .prH{font-size:1.4rem;margin-top:4px}
  body .pricing .prCard{text-align:left;align-items:stretch}
  body .pricing .prCard h3,body .pricing .prAmt,body .pricing .prCard ul{text-align:left}
}

/* the one-line prompt above a tap-to-open list, phones only */
.tapHint{display:none}
@media (max-width:820px){
  body.phoneBar .tapHint{display:flex;align-items:center;gap:8px;margin:min(12px,1.4svh) 0 0;
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  body.phoneBar .tapHint::before{content:"";width:12px;height:12px;flex:none;border-radius:50%;
    background:var(--green-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--green-deep) 22%,transparent)}
}

/* How it is put together, on a phone: the stages as a list down one pipe,
   each opening in place to say what it does, sized to fill one screen. */
.egList{display:none}
@media (max-width:820px){
  body.phoneBar .egArtV,body.phoneBar .egPanel{display:none}
  body.phoneBar section.band.panel:not(.howWork) > .wrap{display:flex;flex-direction:column;
    min-height:calc(100svh - 2 * min(40px,4svh))}
  body.phoneBar section.band.panel:not(.howWork){padding-block:min(40px,4svh);display:flex;align-items:stretch}
  body.phoneBar section.band.panel:not(.howWork) > .wrap{width:100%}
  body.phoneBar section.band.panel:not(.howWork) h2{font-size:max(1.45rem,min(2.1rem,3.7svh))}
  body.phoneBar .egWrap{flex:1 1 auto;display:flex;flex-direction:column;margin-top:min(18px,2svh)}
  .egList{display:flex;flex-direction:column;justify-content:space-evenly;flex:1 1 auto;
    list-style:none;margin:0;padding:0;position:relative;--ico:min(52px,6.2svh)}
  .egList::before{content:"";position:absolute;left:calc(max(36px,var(--ico)) / 2 - 3px);top:calc(max(36px,var(--ico)) / 2);bottom:calc(max(36px,var(--ico)) / 2);width:6px;
    border-radius:3px;background:var(--sky);opacity:.5}
  .egList li{position:relative}
  .egIco{flex:none;width:var(--ico);height:var(--ico);min-width:36px;min-height:36px;display:grid;place-items:center;
    border-radius:14px;background:var(--surface);border:1.5px solid var(--rule);position:relative;z-index:1}
  .egIco svg{width:78%;height:78%;overflow:visible}
  .egIco .egKit{stroke-width:4}
  .egIco .egEnd{stroke-width:4;fill:none}
  .egEndRow{display:flex;align-items:center;gap:14px}
  .egEndRow .egIco{background:transparent;border-color:transparent}
  .egEndL{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .egRowB{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:14px;
    padding:min(4px,.5svh) 0;text-align:left;cursor:pointer;font:inherit;color:inherit}
  .egRowT{flex:1;min-width:0;font-weight:700;font-size:max(1rem,min(1.2rem,2.3svh));color:var(--head);letter-spacing:-.01em;line-height:1.25}
  .egRowN{display:block;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.08em;margin-bottom:1px}
  .egChev{flex:none;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .2s}
  .egRow.open .egChev{transform:rotate(-135deg);margin-bottom:-4px}
  .egRow.open .egIco{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
  .egRow.open .egKit{stroke:var(--blue)}
  .egRow.open .egRowN{color:var(--blue)}
  .egRowM{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;
    margin-left:calc(max(36px,var(--ico)) + 14px)}
  .egRowM > div{overflow:hidden;min-height:0}
  .egRow.open .egRowM{grid-template-rows:1fr}
  .egRowM p{margin:4px 0 2px;font-size:max(13px,min(15px,1.95svh));line-height:1.45;color:var(--muted)}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.egRowM{transition:none}}

/* How we work, on a phone: four numbered steps down one line, each with its
   one-sentence promise visible, and one opened for the detail. Replaces the
   drop, the pills and the empty panel, which needed a tap before saying
   anything. Sized to sit inside one screen. */
.hwSteps{display:none}
@media (max-width:820px){
  body.phoneBar .howWork .hwArt,
  body.phoneBar .howWork .hwPick,
  body.phoneBar .howWork .hwPanel{display:none}
  body.phoneBar section.howWork{align-items:center;padding-block:min(44px,4.4svh)}
  /* the steps take whatever height the screen has, spread evenly down it */
  body.phoneBar section.howWork > .wrap{display:flex;flex-direction:column;
    min-height:calc(100svh - 2 * min(44px,4.4svh))}
  body.phoneBar section.howWork .hwSteps{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly}
  /* one row, sized to the width the line needs */
  body.phoneBar .howWork .hwLead h2{white-space:nowrap;
    font-size:min(2.3rem,max(1.5rem,3.9svh),calc((100vw - 40px) / 15))}
  .hwSteps{display:block;list-style:none;margin:min(34px,2.4svh) 0 0;padding:0;position:relative}
  .hwSteps::before{content:"";position:absolute;left:calc(min(46px,5.4svh) / 2 - 1px);top:22px;bottom:22px;width:2px;
    background:linear-gradient(var(--blue),var(--current),var(--teal),var(--green));opacity:.45}
  .hwStep{position:relative}
  .hwStep + .hwStep{margin-top:min(16px,calc(2.6svh - 14px))}
  .hwStepB{appearance:none;border:0;background:transparent;width:100%;text-align:left;cursor:pointer;
    display:flex;align-items:flex-start;gap:16px;padding:min(10px,calc(2svh - 6px)) 0;font:inherit;color:inherit}
  .hwNum{flex:none;width:min(46px,5.4svh);height:min(46px,5.4svh);min-width:34px;min-height:34px;border-radius:50%;display:grid;place-items:center;
    font-weight:700;font-size:min(18px,2.2svh);color:var(--c);background:var(--surface);border:2px solid var(--c);
    position:relative;z-index:1;transition:background .2s,color .2s}
  .hwStep.open .hwNum{background:var(--c);color:#fff}
  .hwTx{display:flex;flex-direction:column;gap:2px;padding-top:1px;min-width:0}
  .hwT{font-weight:700;font-size:max(1.05rem,min(1.35rem,2.55svh));color:var(--head);letter-spacing:-.015em}
  .hwS{font-size:max(13.2px,min(16px,1.95svh));line-height:1.4;color:var(--muted)}
  .hwStep.open .hwS{color:var(--body)}
  .hwMore{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;margin-left:calc(max(34px,min(46px,5.4svh)) + 16px)}
  .hwMore > *{overflow:hidden;min-height:0}
  .hwStep.open .hwMore{grid-template-rows:1fr}
  .hwMore{grid-template-columns:1fr}
  .hwMore p{font-size:max(12.6px,min(15px,1.95svh));line-height:1.45;color:var(--muted);margin:4px 0 0}
  .hwMore .pLink{margin-top:4px;padding:6px 0 4px;display:inline-flex}
  .hwStepB:focus-visible .hwNum{outline:3px solid var(--green);outline-offset:2px}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.hwMore{transition:none}}

/* ── one screen, one section ──────────────────────────────────────────────────
   These sections are each meant to be read without scrolling. They are sized
   to 100svh, but on a short phone the content inside them was taller than the
   box and pushed the section past a screen, which threw every section after it
   out of step with the screen edge too.

   Every value below is min(what it was, the same thing as a share of the
   screen). Above about 844px of viewport the first term wins and nothing
   changes; below it the section's vertical rhythm shrinks in proportion, so
   the content lands inside one screen on a 667px phone as well as on a 932px
   one. Type has a floor, because legibility beats fitting. */
@media (max-width:900px){
  /* How we work — the tallest of them, and the one that overran furthest */
  body.phoneBar .howWork{padding-block:min(48px,5.7svh)}
  body.phoneBar .hwLead h2{font-size:max(1.42rem,min(1.9rem,3.6svh))}
  body.phoneBar .hwArt .wv{max-height:min(124px,11.5svh)}
  body.phoneBar .hwPick{margin-top:min(30px,2.4svh);gap:min(16px,1.9svh) 14px}
  body.phoneBar .hwQ{font-size:max(.96rem,min(1.1rem,2.1svh))}
  body.phoneBar .hwPills{gap:min(14px,1.6svh) 10px}
  body.phoneBar .hwPill{min-height:max(38px,min(46px,5.4svh));
    padding:0 max(11px,min(16px,1.9svh));
    font-size:max(10.5px,min(12px,1.42svh));letter-spacing:.1em}
  body.phoneBar .hwPanel{margin-top:min(30px,2.4svh);padding-bottom:min(28px,2.4svh)}
  body.phoneBar .hwCard{padding:min(20px,1.9svh) min(20px,2.3svh)}
  body.phoneBar .hwCard .pt{font-size:max(1.06rem,min(1.24rem,2.3svh));margin-top:min(10px,1.2svh)}
  body.phoneBar .hwCard .n{font-size:max(13px,min(14.6px,1.73svh));margin-top:min(8px,.95svh)}

  /* The map */
  body.phoneBar .mapFull{padding-block:min(28px,3.3svh)}
  body.phoneBar .mapFull .mapWrap{gap:min(24px,2svh)}
  /* clear air between the town search and the map beneath it */
  body.phoneBar .mapFull .mapCopy{margin-bottom:min(14px,2svh)}
  body.phoneBar .mapFull #mapSlot svg{max-height:min(380px,50svh)}
  body.phoneBar .mapFull .townFind input{min-height:max(42px,min(50px,6svh))}
  /* one row on any phone: the size is capped by the width the line needs */
  body.phoneBar .mapFull .mapCopy h2{white-space:nowrap;
    font-size:min(2.1rem,max(1.5rem,4.1svh),calc((100vw - 40px) / 12.6))}
  body.phoneBar .mapFull .mapClose{margin-top:min(22px,2.6svh);
    font-size:max(13px,min(14px,1.66svh))}
  body.phoneBar .mapFull .mapBox{padding:min(10px,1.2svh)}

  /* Pricing, which cleared a screen by only a few pixels on the shortest phone */
  body.phoneBar [data-page="res"] section.band.pricing,
  body.phoneBar [data-page="biz"] section.band.pricing{padding-block:min(20px,2.2svh)}
}
/* a jump lands on the top of a section: the bar floats over it and goes away */
body.phoneBar section{scroll-margin-top:0}
/* the bar floats away on a phone, so a jump lands flush with the top */
body.phoneBar [data-page="res"] section.band,
body.phoneBar [data-page="biz"] section.band{scroll-margin-top:0}
/* the one page that opens on a title rather than a photograph keeps clear
   of the bar on its own */
body.phoneBar .pgTitle{padding-top:calc(var(--topH) + clamp(22px,4vw,44px))}

/* over a photograph the bar is only its marks: no panel, no rule, white */
body.phoneBar.barOver:not(.navOpen) .hdr{background:transparent;
  border-bottom-color:transparent}
body.phoneBar.barOver:not(.navOpen) .brand .wm span:nth-child(1){color:#8FBEDD}
body.phoneBar.barOver:not(.navOpen) .brand .wm span:nth-child(2){color:#C6DEF0}
body.phoneBar.barOver:not(.navOpen) .brand .wm span:nth-child(3){color:#fff}
body.phoneBar.barOver:not(.navOpen) .navToggle span{background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}
body.phoneBar.barOver:not(.navOpen) .brand .wm span{text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* on a phone the footer carries the address under the line, and the contact
   page drops the two big cards so the form is the first thing you reach */
@media (max-width:820px){
  /* the motto keeps its place beside the logo; the address sits under it */
  .ft2 .midRow{flex-direction:column;align-items:flex-end;gap:2px}
  .ft2 .ftRight{flex:none;width:auto}
  .ft2 .ftMail{min-height:30px;font-size:clamp(11.6px,3.2vw,13.6px)}
}
[data-page="contact"] .cSide{display:none}
body.phoneBar .cFormBand{padding-top:clamp(20px,3.6vh,38px)}
body.phoneBar [data-page="contact"] .pgTitle{padding-bottom:0}

/* the pricing heading leads the section, centred, with the pay toggle under
   it rather than out on the right */
@media (min-width:941px){
  .pricing .prTop{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .pricing .prTopL{text-align:center;max-width:none}
  .pricing .prH{text-align:center}
  .pricing .prRoll{text-align:center;margin-inline:auto}
  .pricing .prSeg{justify-content:center}
  /* room between the label, the heading, the pay toggle and the cards — scaled
     to the screen height so a short laptop still gets the section in one view */
  .pricing .prH{margin-top:clamp(8px,1.5vh,16px)}
  .pricing .prTop{gap:clamp(12px,calc(4vh - 10px),28px)}
  .pricing .prGrid{margin-top:clamp(16px,calc(7vh - 24px),46px)}
  .pricing .prCard ul{gap:clamp(5px,calc(1.6vh - 4px),12px)}
}
/* the per-card note goes: the section note below carries what matters */
.prFoot{display:none}

/* ══ phones: the pricing pillars behind one row of pills ═════════════════ */
.prTabs{display:none}
.prBox{display:contents}
.nMob{display:none}
@media (max-width:940px){
  .prTabs{display:flex;gap:4px;margin:12px auto 0;max-width:520px;padding:3px;
    border-radius:999px;background:var(--panel);border:1px solid var(--rule)}
  .prTabBtn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:12.8px;
    font-weight:600;flex:1 1 0;min-width:0;padding:7px 6px;min-height:36px;
    border-radius:999px;white-space:nowrap;background:transparent;color:var(--muted);
    transition:background .2s ease,color .2s ease}
  .prTabBtn[aria-selected="true"]{background:var(--surface);color:var(--head);
    box-shadow:0 2px 8px rgba(22,50,92,.12)}
  .prTabBtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  /* the pills sit inside the box they switch, and all three cards share one
     grid cell — so the box is as tall as the tallest of them and nothing
     moves under your thumb when you change pill */
  .pricing > .wrap{display:flex;flex-direction:column;flex:1 0 auto}
  .prBox{display:flex;flex-direction:column;flex:1 0 auto;margin-top:13px;padding:8px 8px 2px;
    background:var(--surface);border:1px solid var(--rule);border-radius:12px;
    box-shadow:0 10px 30px rgba(22,50,92,.07)}
  .pricing .prTabs{margin:0}
  .pricing .prGrid{display:grid;grid-template-columns:1fr;margin-top:2px;max-width:none;
    flex:1 0 auto}
  .pricing .prGrid > .prCard{grid-area:1/1;display:flex;border:0;background:transparent;
    box-shadow:none;border-radius:0;padding:12px 8px 8px;
    visibility:hidden;opacity:0;pointer-events:none;transition:opacity .22s ease}
  .pricing[data-card="0"] .prGrid > .prCard[data-c="0"],
  .pricing[data-card="1"] .prGrid > .prCard[data-c="1"],
  .pricing[data-card="2"] .prGrid > .prCard[data-c="2"]{visibility:visible;opacity:1;
    pointer-events:auto}
  .pricing .prCard.hi{border:0;box-shadow:none}
  .pricing .prTag{position:static;align-self:flex-start;margin:0 0 9px}
  /* the heading leads the section rather than floating in the middle of it */
  [data-page="res"] section.band.pricing,
  [data-page="biz"] section.band.pricing{justify-content:flex-start}
  /* the pay toggle sits on the top right, level with the heading */
  /* the quoted-per-site line is desktop only; the phone has no room for it */
  .pricing .prRoll[data-pay="full"]{display:none}
  .pricing .prTop{gap:10px;flex-wrap:nowrap;align-items:center}
  .pricing .prTopL{flex:1 1 auto;min-width:0}
  .pricing .prH{font-size:1.4rem}
  .pricing .prSeg{flex:none;justify-content:flex-end}
  .pricing .prSegIn{padding:3px}
  .pricing .prSegBtn{padding:7px 11px;min-height:32px;font-size:11.8px}
  /* the chosen pill takes the same green that shades the stage label */
  .prTabs .prTabBtn[aria-selected="true"]{background:var(--green-deep);color:#fff;
    box-shadow:0 2px 8px rgba(47,125,74,.26)}
  .pricing .prCard{padding:17px 16px 15px}
  .pricing .prCard h3{font-size:1.06rem}
  .pricing .prAmt{margin-top:0}
  .pricing .prCard ul{margin:8px 0 0;gap:clamp(3px,calc(2svh - 9.5px),7px)}
  .pricing .prCard li{font-size:12.7px;line-height:1.36;padding-left:21px}
  .pricing .prFoot{padding-top:9px;font-size:10.9px;line-height:1.42}
  .pricing .prNote{font-size:10.3px;line-height:1.44;margin-top:9px;padding-top:8px}
  .prNote .nMob{display:inline}
  .prNote .nDesk{display:none}
}

/* ══ phones: the ribbon on every page, the menu as a right-hand drawer ════ */
@media (max-width:900px){
  /* 1 · the ribbon is permanent here — home included — so the logo and the
       menu control are in the same place on every page. */
  html body.home:not(.topShown) .topbar{transform:none;opacity:1;pointer-events:auto}
  /* the hero's own logo and hamburger are hidden here, so if the script has
     not run the ribbon must not be hidden as well */
  html body:not(.phoneBar) .topbar{transform:none!important;opacity:1!important;
    visibility:visible!important;pointer-events:auto!important}
  .topbar{position:fixed;top:0;
    transition:transform .32s cubic-bezier(.3,0,.2,1),background .22s ease}
  html body main,
  html body.home main{padding-top:0}
  html body.home .film,
  html body.home .filmUI{min-height:100svh}
  /* the ribbon carries the logo and the menu here, so the hero's own pair
     would only double them up — the headline takes the floor instead */
  .fTop{display:none}
  html .film .filmUI{justify-content:flex-end;
    padding-bottom:clamp(30px,5vh,58px)}
  html .film .fBottom{margin-top:auto;align-items:flex-end}

  /* 2 · the menu slides in from the right, below the ribbon, so the logo
       and the close control stay on screen the whole time. */
  .topbar::after{content:"";position:fixed;left:0;right:0;bottom:0;
    top:var(--topH);z-index:1;background:rgba(22,50,92,.42);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility 0s linear .3s}
  body.navOpen .topbar::after{opacity:1;visibility:visible;transition-delay:0s}

  /* iOS renders a backdrop-filter inside a fixed bar unreliably — the bar can
     come up as an empty pane with the logo and the toggle missing. On a phone
     it is a plain opaque bar instead, with nothing to composite. */
  /* translucent, so what is behind stays half-visible — but with no
     backdrop-filter, which is the part iOS renders as an empty pane */
  .hdr{position:relative;z-index:2;background:var(--surface);
    background:color-mix(in srgb,var(--surface) 82%,transparent);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .topbar .brand,.topbar .navToggle{opacity:1;visibility:visible}
  .topbar .brand svg,.topbar .brand .wm{opacity:1}
  /* the drawer is placed against .hdr and given the height of the screen
     below the ribbon */
  .hdr .wrap .hdrNav{position:fixed;left:auto;right:0;bottom:0;top:var(--topH);
    height:auto;
    z-index:2;width:min(84vw,340px);max-width:100vw;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;margin:0;flex:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--surface);border-top:1px solid var(--rule);
    border-left:1px solid var(--rule);
    box-shadow:-22px 0 48px rgba(22,50,92,.22);
    padding:14px 16px calc(24px + env(safe-area-inset-bottom));
    transform:translateX(100%);visibility:hidden;
    transition:transform .3s cubic-bezier(.3,0,.2,1),visibility 0s linear .3s}
  body.navOpen .hdr .wrap .hdrNav{transform:none;visibility:visible;transition-delay:0s}
  @media (prefers-reduced-motion:reduce){.hdr .wrap .hdrNav{transition:none}}

  /* the hero hamburger is gone with .fTop, so the ribbon toggle is the one
     control — it turns into the X while the drawer is open. */
  body.navOpen .burger{opacity:0;pointer-events:none}
}