/* ---------------------------------------------------------------------------
   Liquid glass, per E (2026-10-20: "can we make the website liquid glass", then
   "Full redesign"). Loaded after home.css or site.css on every agency page; it only
   overrides, so taking this file and glass.js off a page puts it back as it was.

   This is the agency site only. templates/CLAUDE.md Part 5.3 still bans glassmorphism
   and the floating pill nav on templates and client sites; E overrode it here.

   What the glass floats over: the real client sites from the Studio (glass/wall-*,
   built by scripts/glass-wall/build.py from studio-reel/), grey, multiplied onto
   cobalt. Multiply means no pixel of the backdrop is lighter than --lg-base, so white
   text that clears contrast on --lg-base clears it everywhere on the backdrop.

   Surfaces:
     clear  -- buttons and pills on the backdrop, white text; glass.js adds the lens
               (an SVG displacement filter) in Chromium, everyone else gets the frost
     light  -- header capsule, tiles, sheets; ink text
     strong -- long reading, forms, the phone menu
     dark   -- footer, the language pill
   Only a top-level surface blurs. Anything inside a glass surface gets a plain tint:
   a blur nested in a blur samples its parent, not the page.
   --------------------------------------------------------------------------- */

:root {
  --lg-base:#2f4de8;                 /* a shade under --blue, for white-text headroom */
  --lg-clear:rgba(255,255,255,.12);
  --lg-clear-hover:rgba(255,255,255,.15);  /* white text still 4.6:1 on the lightest backdrop */
  --lg-head:rgba(255,255,255,.64);
  --lg-light:rgba(255,255,255,.80);
  --lg-strong:rgba(255,255,255,.90);
  --lg-dark:rgba(12,19,40,.74);
  --lg-blur:22px;
  --lg-sat:1.8;
  --lg-inset:clamp(10px, 1.8vw, 28px);   /* how far a sheet floats in from the window edge */
  --lg-r:28px;
  --lg-r-lg:clamp(26px, 3vw, 40px);
  --lg-edge:0 0 0 1px rgba(16,26,46,.06);
  --lg-lift:0 1px 2px rgba(8,14,40,.08), 0 14px 36px rgba(8,14,40,.22);
  --lg-spring:cubic-bezier(.34,1.56,.64,1);
  /* Muted text sits on glass now, which can pull a little blue from behind: darker
     than the flat site's #5a6377 so it keeps 4.5:1 on the darkest backdrop. */
  --muted:#465066;
  /* Cobalt text on light glass over the darkest backdrop is 3.9:1; the deep blue is 5.3. */
  --lg-link:#2440d6;
  --lg-pad:clamp(20px, 3vw, 44px);
  /* The flat site's grey fills (inputs, hours rows, summaries, the estimate's result
     box) become a faint ink tint: the same grey on white, and on glass a shade of the
     glass rather than a grey patch stuck to it. */
  --ground:rgba(16,26,46,.055);
}

/* The pointer position belongs to the one surface under the pointer: without this a
   rim inside another rim (the account reel in its sheet) inherits the outer one's. */
@property --lx { syntax:"<length-percentage>"; inherits:false; initial-value:22%; }
@property --ly { syntax:"<length-percentage>"; inherits:false; initial-value:0%; }

/* --- the backdrop ----------------------------------------------------------- */

html { background:var(--lg-base); }
/* In-page links (#estimate, #service, #packages) land below the floating header. */
html { scroll-padding-top:92px; }
body, body.studio-page { background:transparent; }
/* Sized to the largest viewport, not inset:0: when a phone's toolbars slide away an
   inset box changes height and background-size:cover rescales the wall mid-scroll. */
body::before {
  content:""; position:fixed; top:0; left:0; right:0; z-index:-1; pointer-events:none;
  height:100vh; height:100lvh;
  background:var(--lg-base) url("glass/wall-2400.webp") center / cover no-repeat;
  background-blend-mode:multiply;
}
@media (max-width:760px) { body::before { background-image:url("glass/wall-1200.webp"); } }

.lead, .sheet, .backstage, .integrations, .close, .band { background:transparent; }

/* --- shared surface recipe ----------------------------------------------------
   The rim: a 1px gradient ring on ::after, bright where light would catch the top-left
   and bottom-right of a curved edge, brighter again under the pointer (--lx/--ly from
   glass.js). Hosts need position:relative, which each block below sets. -------- */

:is(.site-header, .action-ghost, .action-solid, .nav-lang, .reel-window, .steps li > a,
    .backstage, .integrations, .site-footer, .package, .care-plan, .principle, .faq-item,
    .why, .story, .estimate-form, .intake-section, .check-report,
    .studio-page .side, .dock, .lg-surface)::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:
    radial-gradient(180px circle at var(--lx, 22%) var(--ly, 0%), rgba(255,255,255,.9), transparent 70%),
    linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,255,255,.14) 34%, rgba(255,255,255,0) 56%, rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* --- header: a light capsule floating over the page -------------------------
   The glass sits on ::before rather than on the header, so the header is not a
   backdrop root: the phone menu inside it can blur the page, not just the header. */

.site-header {
  position:sticky; top:10px; z-index:40;
  margin:10px var(--lg-inset) 0;
  padding:8px 8px 8px clamp(18px, 2vw, 26px);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
}
.site-header::before {
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--lg-head);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:var(--lg-lens,) blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-edge), var(--lg-lift);
}
/* With the lens the capsule is clearer, so the bend at its ends shows; the nav ink
   still measures 5.5:1 on the darkest backdrop at this tint. */
.lg-lens .site-header::before { background:rgba(255,255,255,.58); backdrop-filter:var(--lg-lens,) blur(10px) saturate(var(--lg-sat)); }
.site-header nav a { color:#27324a; }
.site-header nav a:hover { color:var(--ink); }
.site-header nav a[aria-current="page"] { color:var(--ink); }
.site-header nav a.nav-button {
  padding:11px 20px; border-radius:999px;
  background:var(--blue); color:var(--white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(36,64,214,.32);
  transition:transform .45s var(--lg-spring), background-color .15s ease;
}
.site-header nav a.nav-button:hover { background:var(--blue-deep); color:var(--white); }
.site-header nav a.nav-button:active { transform:scale(.95); transition-duration:.12s; }
.lead .site-header :focus-visible, .site-header :focus-visible { outline-color:var(--ink); }
.nav-toggle { margin:0; color:var(--ink); border-radius:999px; }

@media (max-width:900px) {
  .site-header nav {
    top:calc(100% + 8px); right:0;
    padding:8px 16px 16px;
    border-radius:24px;
    background:var(--lg-strong);
    -webkit-backdrop-filter:blur(26px) saturate(var(--lg-sat));
    backdrop-filter:blur(26px) saturate(var(--lg-sat));
    box-shadow:var(--lg-edge), 0 22px 44px rgba(8,14,40,.28);
  }
  .site-header nav a { border-bottom-color:rgba(16,26,46,.09); color:#2f3a52; }
  .site-header nav a.nav-button { margin-top:12px; border-radius:999px; }
}
/* Without JavaScript site.css lays the phone nav out open inside the header (a tall
   block), so the header is a rounded panel there and its links are ink, not lavender. */
@media (max-width:760px) {
  html:not(.js) .site-header { border-radius:24px; }
  html:not(.js) .site-header nav { -webkit-backdrop-filter:none; backdrop-filter:none; }
  html:not(.js) .site-header nav a { color:#2f3a52; }
  html:not(.js) .site-header nav a.nav-button { color:var(--white); }
}
@media (max-width:760px) {
  .site-header { margin:8px var(--lg-inset) 0; top:8px; padding:6px 6px 6px 18px; }
}

/* --- buttons: capsules ------------------------------------------------------- */

.action {
  position:relative;
  border-radius:999px;
  transition:transform .45s var(--lg-spring), background-color .15s ease, color .15s ease, box-shadow .2s ease;
}
.action:active { transform:scale(.95); transition-duration:.12s; }
/* Clear glass on the backdrop: white text, the page bent through it. */
.action-ghost {
  border-color:transparent;
  background:var(--lg-clear);
  color:var(--white);
  text-shadow:0 1px 2px rgba(8,14,40,.22);
  -webkit-backdrop-filter:blur(10px) saturate(var(--lg-sat));
  backdrop-filter:var(--lg-lens,) blur(10px) saturate(var(--lg-sat));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(8,14,40,.2);
}
.lg-lens .action-ghost { backdrop-filter:var(--lg-lens,) blur(1.5px) saturate(var(--lg-sat)); }
.action-ghost:hover { background:var(--lg-clear-hover); }
/* Milk glass: nearly white, so the cobalt label reads as it always did. */
.action-solid {
  background:rgba(255,255,255,.92);
  color:var(--blue);
  -webkit-backdrop-filter:blur(10px) saturate(var(--lg-sat));
  backdrop-filter:blur(10px) saturate(var(--lg-sat));
  box-shadow:inset 0 1px 0 #fff, 0 8px 22px rgba(8,14,40,.22);
}
.action-solid:hover { background:#fff; }
/* On light glass the buttons are solid colour, never a second blur. */
.action-ink { box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(36,64,214,.28); }
/* The footer is its own glass: its ghost button is a tint inside it. */
.site-footer .action-ghost { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }

/* --- the language pill: dark glass ----------------------------------------- */

.nav-lang {
  background:rgba(16,22,44,.62);
  -webkit-backdrop-filter:blur(14px) saturate(var(--lg-sat));
  backdrop-filter:var(--lg-lens,) blur(14px) saturate(var(--lg-sat));
  box-shadow:0 6px 18px rgba(8,14,40,.28);
}
.lg-lens .nav-lang { backdrop-filter:var(--lg-lens,) blur(6px) saturate(var(--lg-sat)); }
/* site.css's cobalt ring vanished on the cobalt backdrop: white ring, ink halo, so it
   reads on the backdrop and on a light sheet alike. */
.nav-lang:has(select:focus-visible) { outline:2px solid var(--white); outline-offset:2px; box-shadow:0 0 0 5px var(--ink); }
/* In the Studio's dock the pill is in the flow (site.css makes it static); relative
   keeps its rim on the pill instead of drawing round the whole dock, and inset:auto
   drops the offset site.css gives the floating pill on phones (it would lift this one). */
.nav-lang.in-dock { position:relative; inset:auto; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* --- home: the hero reel in a glass window ----------------------------------- */

/* Every reel window holds its own rim (the account reel's sits in the backstage sheet). */
.reel-window { position:relative; }
.hero .reel-window {
  padding:0 8px 8px;
  border-radius:24px;
  background:var(--lg-clear);
  -webkit-backdrop-filter:blur(18px) saturate(var(--lg-sat));
  backdrop-filter:blur(18px) saturate(var(--lg-sat));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 26px 60px rgba(8,14,40,.34);
}
.hero .reel-bar { background:transparent; border-bottom:0; }
.hero .reel-address { background:rgba(255,255,255,.9); border-radius:999px; color:#3d4759; }
.hero .reel-stills { overflow:hidden; border-radius:16px; }
.hero .reel-bar :focus-visible { outline-color:var(--white); }

/* --- home: the three steps, tiles of light glass on the backdrop ------------- */

.sheet:has(.steps) h2 { color:var(--white); }
.steps li > a {
  position:relative;
  border:0;
  border-radius:var(--lg-r);
  background:var(--lg-light);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-edge), var(--lg-lift);
}
.steps li > a:hover { box-shadow:var(--lg-edge), 0 2px 4px rgba(8,14,40,.08), 0 22px 44px rgba(8,14,40,.28); }
.steps .n { box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(36,64,214,.35); }
.steps :focus-visible, .steps a:focus-visible { outline-color:var(--white); }

/* --- home: the account reel and the integrations, each one sheet ------------- */

.backstage, .integrations {
  position:relative;
  margin-inline:var(--lg-inset);
  border-radius:var(--lg-r-lg);
  background:var(--lg-light);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-edge), var(--lg-lift);
}
.integrations { margin-top:clamp(10px, 1.4vw, 18px); background:var(--lg-strong); }
.int-star { color:var(--lg-link); }
@media (min-width:1600px) {
  .integrations { margin-inline:calc((100vw - 1560px) / 2); padding-inline:clamp(40px, 4vw, 72px); }
}
.bs-player .reel-window { border-color:rgba(16,26,46,.1); box-shadow:0 18px 40px rgba(16,26,46,.18); }

/* --- close: straight on the backdrop ---------------------------------------- */

.close { margin-top:clamp(12px, 2vw, 24px); }

/* --- footer: dark glass, floating like the sheets --------------------------- */

.site-footer {
  position:relative;
  margin:0 var(--lg-inset) var(--lg-inset);
  border-radius:var(--lg-r-lg);
  background:var(--lg-dark);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(1.4);
  backdrop-filter:blur(var(--lg-blur)) saturate(1.4);
  box-shadow:0 18px 44px rgba(8,14,40,.3);
}
.site-footer::after { opacity:.45; }

/* --- inner pages: the title and section headings sit on the backdrop ---------- */

.band:not(.check-report) > h2, .band > .reveal > h2, .section-title { color:var(--white); }
/* Not the check report: it is a band, but its text sits on its own sheet. */
.section-lede, .band:not(.check-report) > p, .band > .estimate-note { color:#dfe5ff; }
:is(.section-lede, .band:not(.check-report) > p, .band > .estimate-note) a { color:var(--white); }

/* --- inner pages: tiles of light glass ---------------------------------------- */

.package, .care-plan, .principle, .faq-item {
  position:relative;
  border-radius:var(--lg-r);
  background:var(--lg-light);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-edge), var(--lg-lift);
}

/* --- inner pages: sheets of strong glass for reading and filling in ------------ */

.why, .story, .compare-wrap, .estimate-form, .intake-section, .check-report {
  position:relative;
  border-radius:var(--lg-r-lg);
  background:var(--lg-strong);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-edge), var(--lg-lift);
}
.why, .story { padding:var(--lg-pad); }
.compare-wrap { padding:clamp(10px, 1.6vw, 20px); }
.check-page .check-report { max-width:900px; margin:0 var(--gutter) clamp(48px, 6vw, 80px); padding:var(--lg-pad); }

/* Inside a sheet: tints, never a second blur. */
.compare-table th, .compare-table td { background:rgba(255,255,255,.72); }
.compare-table thead th { background:transparent; }
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea { background:#fff; }
/* Placeholders were #8a92a6, 3.1:1 on white before the glass; 4.6:1 now. */
.form-field input::placeholder, .form-field textarea::placeholder { color:#6b7388; }
#hours-grid input[type="time"] { background:#fff; }

/* Cobalt text on glass is the deeper blue (see --lg-link). */
:is(.story, .why, .faq-item, .principle, .package, .care-plan, .estimate-form, .intake-section, .check-report) a:not(.action),
.text-link, .compare-table .yes, .faq-item summary::after { color:var(--lg-link); }
/* The "not included" dash was #aeb4c4, 2:1 on white before the glass; muted now (5.6:1 or better). */
.compare-table .no { color:var(--muted); }
.story li::marker, .plan-list li::marker { color:var(--lg-link); }
.action-line { border-color:var(--lg-link); color:var(--lg-link); background:rgba(255,255,255,.55); }
.action-line:hover { background:var(--lg-link); color:var(--white); }

/* --- inner pages: the form's own controls between its sheets ------------------
   The progress line, Start over and the send row sit on the backdrop, not in a sheet. */

.intake-progress-label, .intake-top .clear-button, .form-actions .clear-button { color:#dfe5ff; }
.intake-top .clear-button:hover, .form-actions .clear-button:hover { color:var(--white); }
.intake-progress-bar { background:rgba(255,255,255,.28); }
.intake-progress-fill { background:var(--white); }
.form-actions .action-ink { background:rgba(255,255,255,.94); color:var(--blue); box-shadow:inset 0 1px 0 #fff, 0 8px 22px rgba(8,14,40,.22); }
.form-actions .action-ink:hover { background:#fff; }
.form-actions :focus-visible, .intake-top :focus-visible { outline-color:var(--white); }
/* Check's send row sits inside its sheet: there it is the ordinary cobalt button. */
.intake-section .form-actions .action-ink { background:var(--blue); color:var(--white); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(36,64,214,.28); }
.intake-section .form-actions .action-ink:hover { background:var(--blue-deep); }
.intake-section .form-actions .clear-button { color:var(--muted); }
.intake-section .form-actions .clear-button:hover { color:var(--ink); }
.intake-section .form-actions :focus-visible { outline-color:var(--ink); }
.form-success { border-radius:var(--lg-r); box-shadow:var(--lg-lift); }

/* The estimator could not shrink below its labels' width, so at 320 its text ran off
   the sheet onto the cobalt; the column may shrink now and the labels wrap. */
.estimate-form { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.estimate-choices, .estimate-result { min-width:0; }
@media (max-width:760px) { .estimate-form { grid-template-columns:minmax(0,1fr); } }
/* Between the phone cards and a wide window the compare table's 720px floor was wider
   than its sheet; with fixed columns it fits instead of scrolling. */
@media (min-width:761px) and (max-width:900px) { .compare-table { min-width:0; } }
/* Under 360px two packages abreast leave "Choose Essential" wider than its capsule. */
@media (max-width:359px) { .package-grid { grid-template-columns:minmax(0,1fr); } }

@media (max-width:760px) {
  /* site.css runs the form sections edge to edge on phones; as glass they float in. */
  .intake-section { margin-inline:var(--lg-inset); border-radius:24px; }
  /* A 90% sheet shows almost nothing through it, so on a phone its blur is a full
     backdrop pass for no visible effect: near-solid and unblurred instead. */
  .why, .story, .compare-wrap, .estimate-form, .intake-section, .check-report, .integrations {
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .compare-table tbody tr { background:rgba(255,255,255,.72); }
  .compare-table tbody th, .compare-table tbody td { background:transparent; }
  .check-page .check-report { margin-inline:var(--lg-inset); }
}

/* --- the Studio: the same glass around the website being designed -------------
   The header capsule, the controls and the bottom strip float over the backdrop; the
   website itself stays a plain white window. */

@media (min-width:901px) { :root { --dock-h:78px; } }
.studio-page .site-header { margin:10px 10px 0; }
.studio-page .side {
  position:relative;
  margin:10px 0 10px 10px;
  border-right:0;
  border-radius:24px;
  overflow:hidden;
  background:var(--lg-light);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-edge), var(--lg-lift);
}
/* The sticky tab row blurs the controls scrolling under it (the side panel is its
   backdrop root, which here is the point). */
.studio-page .side-modes {
  background:rgba(240,243,255,.74);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.studio-page .stage { padding:10px; background:transparent; }
.studio-page .preview-frame { border-radius:18px; box-shadow:0 0 0 1px rgba(16,26,46,.08), 0 18px 44px rgba(8,14,40,.28); }
.dock {
  position:relative;
  margin:0 10px 10px;
  border-top:0;
  border-radius:22px;
  background:var(--lg-light);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-edge), var(--lg-lift);
}
.dock-switch { background:rgba(255,255,255,.7); border-radius:999px; }
@media (max-width:900px) {
  .studio-page .side { margin:0 10px 10px; border-top:0; }
  .studio-page .stage { padding:8px 10px 10px; }
  .dock { margin:0 10px 10px; background:var(--lg-light); border-top:0; }
}

/* --- reveal on scroll, glass-safe --------------------------------------------
   An ancestor below full opacity cuts a glass surface off from the page behind it
   (it becomes the blur's backdrop root), so a fading-in glass tile would show clear
   and then snap to frosted. Anything holding glass rises without the fade. ----- */

@media (prefers-reduced-motion:no-preference) {
  html.motion :is(.reveal, .reveal-group > *):is(:has(.action-ghost, .action-solid, .package, .care-plan, .principle, .faq-item, .why, .story, .compare-wrap, .estimate-form, .intake-section, .lg-surface), .steps > li, .package, .care-plan, .principle, .faq-item, .why, .story, .compare-wrap, .estimate-form, .intake-section, .check-report, .lg-surface) {
    opacity:1;
    transform:translateY(26px) scale(.985);
    transition:transform .8s var(--lg-spring);
  }
  html.motion :is(.reveal, .reveal-group > *):is(:has(.action-ghost, .action-solid, .package, .care-plan, .principle, .faq-item, .why, .story, .compare-wrap, .estimate-form, .intake-section, .lg-surface), .steps > li, .package, .care-plan, .principle, .faq-item, .why, .story, .compare-wrap, .estimate-form, .intake-section, .check-report, .lg-surface).is-in { transform:none; }
}

/* --- when glass can't or shouldn't be glass ----------------------------------- */

/* No backdrop blur at all (old browsers): the tints go nearly solid so nothing is
   read through a clear pane of busy pictures. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --lg-head:rgba(255,255,255,.96); --lg-light:rgba(255,255,255,.97); --lg-strong:#fff; --lg-dark:rgba(12,19,40,.96); }
  .nav-lang { background:#161b2e; }
}
/* Asked for less transparency or more contrast: flat cobalt, solid surfaces. */
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  body::before { background-image:none; }
  :root { --lg-clear:rgba(255,255,255,0); --lg-clear-hover:rgba(255,255,255,.14); --lg-head:#fff; --lg-light:#fff; --lg-strong:#fff; --lg-dark:var(--ink); }
  .action-ghost { border-color:rgba(255,255,255,.75); }
  .nav-lang { background:#161b2e; }
  :is(.site-header, .nav-lang, .action, .reel-window, .steps li > a, .backstage, .integrations, .site-footer, .site-header nav, .package, .care-plan, .principle, .faq-item, .why, .story, .compare-wrap, .estimate-form, .intake-section, .check-report, .studio-page .side, .studio-page .side-modes, .dock, .lg-surface),
  .site-header::before { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}
@media (forced-colors:active) {
  body::before { display:none; }
  .action, .site-header nav a.nav-button { border:1px solid ButtonText; }
  /* Forced colours keep a background's alpha: what floats over the page goes opaque. */
  .site-header::before, .site-header nav, .nav-lang { background:Canvas; }
  .site-header nav { border:1px solid CanvasText; }
  *, *::before { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  :is(.site-header, .action-ghost, .action-solid, .nav-lang, .reel-window, .steps li > a, .backstage, .integrations, .site-footer, .package, .care-plan, .principle, .faq-item, .why, .story, .compare-wrap, .estimate-form, .intake-section, .check-report, .studio-page .side, .dock, .lg-surface)::after { display:none; }
  :is(.site-header, .steps li > a, .backstage, .integrations, .site-footer, .package, .care-plan, .principle, .faq-item, .why, .story, .compare-wrap, .estimate-form, .intake-section, .check-report, .studio-page .side, .dock, .lg-surface) { border:1px solid CanvasText; }
}
@media (prefers-reduced-motion:reduce) {
  .action, .site-header nav a.nav-button { transition:none; }
  .action:active, .site-header nav a.nav-button:active { transform:none; }
}
@media print {
  html, body { background:#fff; }
  body::before { display:none; }
  .lead, .lead h1, .page-note, .band:not(.check-report) > h2, .band > .reveal > h2, .section-title, .sheet:has(.steps) h2, .close, .close h2 { color:var(--ink); }
  .section-lede, .band:not(.check-report) > p, .band > .estimate-note, .intake-progress-label, .reel-player figcaption { color:var(--muted); }
  :is(.section-lede, .band:not(.check-report) > p, .band > .estimate-note, .page-note) a { color:var(--ink); }
}