/* blankfac3 liquid glass, v2 (2026-11-03).
   Every control and card is a glass object. Light comes from the pointer: a bright band rolls around the rim of each
   object toward the cursor, with a weaker opposite reflection (fresnel) and thin prismatic fringes (chromatic aberration).
   Only surfaces that float over content refract it (header bar, menus, phone menu, controls over images): Chromium bends
   the live page through an SVG lens map built for each size; Safari and Firefox blur it. Everything else is a glass slab
   without a backdrop filter, so the page stays fast.
   The signature pill slides between items like a drop of liquid: the leading edge moves first, the trailing edge follows.
   Pasha's LiquidGlass panel values live in window.BF3_GLASS (assets/glass.js). */

@property --x1    { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --x2    { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --py    { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ph    { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* the per-element SVG lens filter must never inherit into descendants (menus live inside the header bar) */
@property --lg-f  { syntax: "*"; inherits: false; }

:root {
  --lg-spring: linear(0, 0.033, 0.115, 0.226, 0.348, 0.471, 0.586, 0.689, 0.778, 0.852, 0.911, 0.956, 0.989, 1.012, 1.026, 1.035, 1.038, 1.038, 1.036, 1.032, 1.027, 1.022, 1.018, 1.014, 1.01, 1.007, 1.004, 1.002, 1.001, 1);
  --lg-out: cubic-bezier(.2, .8, .2, 1);
  --lg-lens: rgba(18, 18, 24, .22);
  --lg-lens-thick: rgba(16, 16, 21, .72);
  --lg-menu: rgba(22, 22, 28, .80);
  --lg-menu-blur: 24px; /* 2026-11-04: was 32px; same read over pictures with the .80 tint, a cheaper pass while the menu animates */
  --lg-slab-top: rgba(255, 255, 255, .075);
  --lg-slab-bot: rgba(255, 255, 255, .02);
  --lg-prom: rgba(240, 240, 243, .94);
  --lg-ink: 255, 255, 255;
  /* 12.11: the owner's glass settings (Studio > Site texts > Glass) reach the CSS material too, not only the SVG/WebGL
     paths (Firefox and Safari have only this one): glass.js sets --lg-blur, --lg-sat, --lg-bright, --lg-rim, --lg-so and
     --lg-ss on <html>; the defaults below equal the original panel values */
  --lg-shadow: 0 1px calc(var(--lg-ss, 10) * 1px) rgba(0, 0, 0, var(--lg-so, .30));
  --lg-blur: 1.5px;
}
[data-theme="light"] {
  --lg-lens: rgba(255, 255, 255, .58);
  --lg-lens-thick: rgba(250, 250, 248, .82);
  --lg-menu: rgba(250, 250, 247, .84);
  --lg-slab-top: rgba(255, 255, 255, .62);
  --lg-slab-bot: rgba(255, 255, 255, .28);
  --lg-prom: rgba(28, 28, 36, .86);
  --lg-shadow: 0 1px calc(var(--lg-ss, 10) * .6px) rgba(20, 20, 28, calc(var(--lg-so, .30) * .4));
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --lg-spring: cubic-bezier(.3, 1.25, .5, 1); } }

/* ---------- host and layer ---------- */
.lg-host { isolation: isolate; background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: transform .14s var(--lg-out), color .12s ease; }
.lg-static { position: relative !important; }
.lg-layer {
  position: absolute; inset: calc(-1 * var(--lg-bw, 0px)); z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--lg-slab-top), var(--lg-slab-bot));
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(var(--lg-ink), .10), inset 0 0 0 1px rgba(var(--lg-ink), .05);
}
/* rim: a neutral, even hairline all the way round (::before, never coloured, never moves).
   glint (svg.lg-gl, made by assets/glass.js): a 1 px stroke along the same outline with a soft white radial
   gradient centred from the pointer. The face of the glass never changes. */
.lg-layer::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 var(--lg-rimw, 1px) rgba(var(--lg-ink), var(--lg-rim, .11));
}
svg.lg-gl { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
[data-theme="light"] .lg-layer::before { box-shadow: inset 0 0 0 var(--lg-rimw, 1px) rgba(255, 255, 255, calc(.49 + var(--lg-rim, .11))); }
@media (prefers-reduced-motion: reduce) { svg.lg-gl { display: none !important; } }

/* lens: floats over content and refracts it */
.lg-lens > .lg-layer { background: var(--lg-lens); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat, 1.5)) brightness(var(--lg-bright, 1)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat, 1.5)) brightness(var(--lg-bright, 1)); }
html.lg-svg .lg-lens > .lg-layer { -webkit-backdrop-filter: var(--lg-f, blur(var(--lg-blur)) saturate(1.5)); backdrop-filter: var(--lg-f, blur(var(--lg-blur)) saturate(1.5)); }
/* menu: thick frosted material (HIG "thick"): heavy blur and tint so text reads over any picture.
   No displacement map on menus. --lg-f is not inherited (see @property above): the header bar's own lens map used to
   flow into the menus inside it, so a 1134x66 map with 1.5px blur ran over an 800x400 menu: everything under the map's
   bottom edge was displaced by half the map scale (the hero picture under the menu showed as a shifted ghost) and the
   text behind was barely blurred. */
.lg-menu > .lg-layer { background: var(--lg-menu); -webkit-backdrop-filter: blur(var(--lg-menu-blur)) saturate(calc(var(--lg-sat, 1.5) * 1.2)); backdrop-filter: blur(var(--lg-menu-blur)) saturate(calc(var(--lg-sat, 1.5) * 1.2)); }
/* prominent: the primary action is solid glass */
.lg-prominent > .lg-layer { background: var(--lg-prom); }
/* rim only: image cards keep the picture and get a glass edge on top */
.lg-rim > .lg-layer { z-index: 3; background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.lg-rim > .lg-layer { --lg-rimw: 1.5px; }
html.lg-solid .lg-layer { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lg-solid .lg-lens > .lg-layer, html.lg-solid .lg-menu > .lg-layer { background: var(--surface); }
@media (prefers-contrast: more) { .lg-layer { box-shadow: inset 0 0 0 1px var(--key); } }

/* ---------- response: immediate on hover, springy on release ---------- */
.lg-host:is(a, button) { transition: transform .4s var(--lg-spring), color .12s ease; }
.lg-host:is(a, button):active { transform: scale(.97); transition: transform .08s var(--lg-out); }

/* ---------- shapes ---------- */
.btn.lg-host, .icon-btn.lg-host, .status-btn.lg-host, .proj-filter.lg-host, .acct-btn.lg-host,
.pstage-tab.lg-host, .psub-tab.lg-host, .bd-tab.lg-host, .fn-expand.lg-host, .sc-arrow.lg-host, .ct-copy.lg-host { border-radius: 999px !important; }
.btn.lg-host { padding-left: 24px; padding-right: 24px; }
.btn.sm.lg-host { padding-left: 18px; padding-right: 18px; }
.btn.primary.lg-host, .acct-btn.lg-prominent { color: var(--bg); }
.btn.primary.lg-host:hover { background: transparent !important; color: var(--bg); transform: none; }
.btn.ghost.lg-host, .icon-btn.lg-host, .status-btn.lg-host { color: var(--text); }
.btn.lg-host:is(:disabled, [aria-disabled="true"], .is-disabled) { transform: none; color: var(--muted) !important; cursor: not-allowed; }
.btn.lg-host:is(:disabled, [aria-disabled="true"], .is-disabled) > .lg-layer { background: linear-gradient(180deg, var(--lg-slab-top), var(--lg-slab-bot)); }
.status-block.lg-host, .fn-card.lg-host, .config-mode-option.lg-host, .lvl.lg-host { border-radius: 22px; }
.pstage-tab, .psub-tab, .bd-tab { font-family: "Hanken Grotesk", system-ui, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; font-size: .9375rem !important; }
.bd-tab.lg-host { box-shadow: none !important; }
.lg-host:is(.pstage-tab, .psub-tab, .bd-tab, .status-block).active { color: var(--text) !important; }
.lg-host:is(.pstage-tab, .psub-tab, .bd-tab, .status-block).active > .lg-layer { background: linear-gradient(180deg, rgba(var(--lg-ink), .2), rgba(var(--lg-ink), .08)); }
[data-theme="light"] .lg-host:is(.pstage-tab, .psub-tab, .bd-tab, .status-block).active > .lg-layer { background: rgba(255,255,255,.98); box-shadow: 0 2px 10px rgba(20,20,28,.14); }
.fn-card.lg-host.active > .lg-layer, .config-mode-option.lg-host.active > .lg-layer, .lvl.lg-host.active > .lg-layer {
  background: linear-gradient(180deg, rgba(var(--lg-ink), .14), rgba(var(--lg-ink), .05)); box-shadow: var(--lg-shadow), inset 0 0 0 1.5px rgba(var(--lg-ink), .7); }
[data-theme="light"] .fn-card.lg-host.active > .lg-layer, [data-theme="light"] .config-mode-option.lg-host.active > .lg-layer, [data-theme="light"] .lvl.lg-host.active > .lg-layer { background: #fff; box-shadow: 0 2px 12px rgba(20,20,28,.12), inset 0 0 0 1.5px var(--text); }
/* icon-only actions (the label is in aria-label and the tooltip) */
.lg-iconbtn { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0 !important; gap: 0 !important; flex: none; border-radius: 999px !important; color: var(--text); }
.lg-iconbtn .ico { width: 20px; height: 20px; }
.label.back-link.lg-iconbtn { margin: 0 0 20px; font-size: 0 !important; }
.about-links-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 16px 0 32px; }
.about-links-row .bio-links { margin: 0; }
.about-contact-link.lg-iconbtn { margin: 0; }
.site-foot a.sf-top.lg-iconbtn { color: var(--text); }
.pp-go.lg-iconbtn { width: 52px; height: 52px; }

/* cards and panels */
.lg-host:is(.config-summary-card, .acct-panel, .cm-rail, .contact-bar, .cr-card, .ghost-tile, .as-preview, .as-order, .svc-collapse, .tech-renders, .gallery-empty, .nav-stage, .calc-side) { border-radius: 24px; }
.lg-host:is(.as-msg) { border-radius: 16px; }
/* <details> cannot hold a layer before its summary, so collapsibles get the slab look directly */
details.svc-collapse, details.tech-renders { border-radius: 24px !important; border: 0 !important; overflow: hidden;
  background: linear-gradient(180deg, var(--lg-slab-top), var(--lg-slab-bot)) !important;
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(var(--lg-ink), .14), inset 0 0 0 1px rgba(var(--lg-ink), .07) !important; }
.lg-host:is(.dept-card, .proj-preview, .split-card, .hero-art) { border-radius: 24px; overflow: hidden; }

/* ---------- header bar ---------- */
.site-hd .nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-hd .nav.lg-host { border-radius: 999px; }
.site-hd .nav > .lg-layer { transition: background-color .3s ease; }
header.site-hd.is-scrolled .nav > .lg-layer { background: var(--lg-lens-thick); }
header.site-hd::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg) 0, color-mix(in srgb, var(--bg) 70%, transparent) 30%, color-mix(in srgb, var(--bg) 0%, transparent) 100%); opacity: 0; transition: opacity .3s ease; }
header.site-hd.is-scrolled::before { opacity: 1; }
.site-hd .nav-links > a, .nav-dd-btn { position: relative; z-index: 1; border-radius: 999px; background: transparent !important; color: color-mix(in srgb, var(--text) 82%, transparent); transition: color .12s ease; }
.site-hd .nav-links > a:hover, .nav-dd-btn:hover, .site-hd .nav-links > a.active, .nav-dd-btn.active, .nav-dd-btn[aria-expanded="true"] { color: var(--text); }
.site-hd .brand, .site-hd .icon-btn { color: var(--text); }
.site-hd .icon-btn { width: 40px; height: 40px; border-color: transparent; border-radius: 999px; transition: background .12s ease; }
.site-hd .icon-btn:hover, .site-hd .icon-btn[aria-expanded="true"] { background: rgba(var(--lg-ink), .08); border-color: transparent; }

/* ---------- menus: short, quick, no scaling (scaling a lens smears it) ---------- */
.com-menu.lg-host, .acct-menu.lg-host { border-radius: 28px; }
.com-menu.lg-host { padding: 10px; }
.com-est { border-radius: 20px; background: rgba(var(--lg-ink), .04); border-color: rgba(var(--lg-ink), .08); }
[data-theme="light"] .com-est { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.cm-ico { border-radius: 12px; background: rgba(var(--lg-ink), .05); border-color: rgba(var(--lg-ink), .08); }
[data-theme="light"] .cm-ico { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.06); }
.nav-links .com-menu a.cm-row, .acct-menu a, .acct-menu button.am-item { position: relative; z-index: 1; border-radius: 16px; background: transparent !important; }
.acct-menu a.am-cta { border-radius: 999px; background: var(--text) !important; }
/* open and close motion: assets/v2.js menu-motion (Web Animations: the panel grows from its trigger, the material
   fades in, the contents arrive from a soft blur; the close plays the same path back). Nothing here animates, so the
   two never stack. While a menu leaves it no longer takes the pointer. */
.com-menu.is-closing, .acct-menu.is-closing, .site-hd .nav.is-closing-m .nav-links { pointer-events: none; }
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the liquid pill ---------- */
.lg-pill-host.lg-static-pill { position: relative; }
.lg-pill {
  position: absolute; z-index: 0; left: var(--x1); top: var(--py); width: calc(var(--x2) - var(--x1)); height: var(--ph);
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--lg-ink), .13), rgba(var(--lg-ink), .05));
  box-shadow: inset 0 1px 0 rgba(var(--lg-ink), .28), inset 0 -1px 0 rgba(var(--lg-ink), .06), inset 0 0 14px rgba(var(--lg-ink), .07), 0 2px 8px rgba(0,0,0,.18);
  transition: --x1 var(--d1, .3s) var(--lg-spring), --x2 var(--d2, .3s) var(--lg-spring), --py .32s var(--lg-spring), --ph .32s var(--lg-spring), opacity .14s ease, transform .3s var(--lg-spring);
}
.lg-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--lg-ink), .18); }
.lg-pill.is-on { opacity: 1; }
/* hover drop: fainter, no rim, sits under the selection */
.lg-pill.is-ghost { z-index: 0; background: rgba(var(--lg-ink), .06); box-shadow: inset 0 1px 0 rgba(var(--lg-ink), .1); }
.lg-pill.is-ghost::before, .lg-pill.is-ghost svg.lg-gl { display: none; }
.lg-pill.is-ghost.is-on { opacity: 1; }
[data-theme="light"] .lg-pill.is-ghost { background: rgba(0,0,0,.05); box-shadow: none; }
.lg-pill.is-moving { transform: scaleY(.88); }
.lg-pill.no-anim { transition: none; }
[data-theme="light"] .lg-pill { background: rgba(255,255,255,.95); box-shadow: 0 1px 6px rgba(20,20,28,.12), inset 0 1px 0 #fff; }
.cm-tabs .lg-pill.is-sel, .proj-filter .lg-pill.is-sel { background: linear-gradient(180deg, rgba(var(--lg-ink), .2), rgba(var(--lg-ink), .08)); }
[data-theme="light"] .cm-tabs .lg-pill.is-sel, [data-theme="light"] .proj-filter .lg-pill.is-sel { background: #fff; }
.cm-tabs.lg-host { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; border-bottom: 0; overflow: visible; max-width: 100%; }
.cm-tabs.lg-host .cm-tab { position: relative; z-index: 1; margin: 0; padding: 10px 18px; min-height: 44px; border: 0; border-radius: 999px; background: transparent !important; transition: color .12s ease; }
.cm-tabs.lg-host .cm-tab.active { color: var(--text); border: 0; }
.proj-filter.lg-host { padding: 4px; gap: 2px; }
.proj-filter button { position: relative; z-index: 1; border-radius: 999px; background: transparent !important; }
.proj-filter button[aria-selected="true"] { color: var(--text); }
.info-toc a { position: relative; z-index: 1; border-radius: 999px; background: transparent !important; box-shadow: none !important; }
@media (max-width: 760px) { .cm-tabs.lg-host { border-radius: 26px; } .cm-tabs.lg-host .cm-tab { padding: 10px 14px; font-size: .9375rem; } }

/* tree navigation on work pages */
.nav-leaf, .nav-head { border-radius: 999px; }
.nav-leaf.active { background: rgba(var(--lg-ink), .1); color: var(--text); box-shadow: inset 0 1px 0 rgba(var(--lg-ink), .2); }
.nav-leaf.active .nav-count, .nav-leaf.active .nav-name { color: var(--text); }
[data-theme="light"] .nav-leaf.active { background: #fff; box-shadow: 0 1px 6px rgba(20,20,28,.1); }

/* fields */
.promo-input, .acct input[type=email], .acct input[type=text], .acct input[type=number], .acct textarea, .acct select {
  border-radius: 999px !important; background: linear-gradient(180deg, rgba(var(--lg-ink), .02), rgba(var(--lg-ink), .06)) !important;
  border: 1px solid rgba(var(--lg-ink), .12) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); transition: border-color .12s ease, box-shadow .12s ease; }
.acct textarea { border-radius: 20px !important; }
.promo-input:focus, .acct input:focus, .acct textarea:focus { border-color: rgba(var(--lg-ink), .45) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 0 0 3px rgba(var(--lg-ink), .08); outline: none; }
[data-theme="light"] :is(.promo-input, .acct input, .acct textarea) { background: #fff !important; border-color: rgba(0,0,0,.12) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }

/* ---------- step rail handle: a lens while held ---------- */
.cm-rail .cm-progress-dot.lg-host { border: 0 !important; width: 48px; height: 48px; border-radius: 50%; transition: left .5s var(--lg-spring), transform .3s var(--lg-spring); }
.cm-rail .cm-progress-dot.lg-host > .lg-layer { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, #fff 8%), var(--surface)); }
.cm-rail .cm-progress-track.dragging .cm-progress-dot.lg-host { transform: translate(-50%, -50%) scale(1.22); transition: transform .3s var(--lg-spring); }
.cm-rail .cm-progress-dot .ico { transition: opacity .15s ease; }
.cm-rail .cm-progress-fill { transition: width .5s var(--lg-spring); }

/* ---------- media cards and controls over images ---------- */
.dept-card, .proj-preview, .split-card, .hero-art { --lg-lens: rgba(14, 14, 18, .58); --lg-ink: 255, 255, 255; }
.work-tile.dept-card { justify-content: flex-end; padding: 0; }
.dept-card .wt-media, .work-tile.dept-card:hover .wt-media { background-size: cover !important; background-position: center; transition: none; }
.dept-card .wt-media::after { background: linear-gradient(to top, rgba(8,8,11,.55) 0%, rgba(8,8,11,0) 55%); }
.dc-plate, .proj-preview > .pp-cap {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 18px 16px 16px 20px; border-radius: 22px; color: #ECECEF; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.dc-plate .dc-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-plate :is(h2, h3) { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -.015em; line-height: 1; color: #fff; }
.dc-plate p { margin: 0; font-size: 1rem; line-height: 1.45; color: rgba(255,255,255,.86); }
.dc-plate .dc-count { font-size: .8125rem; color: rgba(255,255,255,.7); white-space: nowrap; }
/* every plate has the same shape: title, a description held to three lines, count and arrow in the right column */
.dc-plate .dc-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 10px; align-self: stretch; }
.dc-plate .dc-txt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(3 * 1.45em); line-height: 1.45; margin: 0; }
.dc-plate .dc-txt :is(h2, h3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-plate .dc-go, .pp-cap .pp-arrow { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); color: #fff; }
.proj-preview > .pp-cap { background: none; }
.pp-cap .pp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* the plates' text and the library canvas: text above the glass */
.dc-plate > :not(canvas):not(.lg-layer), .pp-cap > :not(canvas):not(.lg-layer) { position: relative; z-index: 2; }
.lg-webgl > .lg-layer { display: none; }
/* plates on cards without WebGL: CSS lens over the image */
.dc-plate.lg-host > .lg-layer, .pp-cap.lg-host > .lg-layer { background: rgba(14,14,18,.44); } /* .44: white 28px text keeps 3:1+ over bright renders */
/* m4 (2026-11-04): where the WebGL plate takes over (desktop, WebGL 2), the CSS plate shown while it loads has the WebGL
   plate's shade per theme (measured on the same card: dark plate about 8 % darker than the picture, light plate about
   3 % lighter), so the hand-over is not a visible change. Phones and browsers without WebGL keep the .44 plate. */
html.lg-gl-plates .dept-card:not(.pw-tile) > .dc-plate.lg-host > .lg-layer { background: rgba(14,14,18,.1); }
[data-theme="light"].lg-gl-plates .dept-card:not(.pw-tile) > .dc-plate.lg-host > .lg-layer { background: rgba(255,255,255,.03); }
/* a card re-rendered between two frames can paint once before glass.js gives its plate a layer: the same shade then */
.dept-card > .dc-plate:not(.lg-host):not(.lg-webgl) { background: rgba(14,14,18,.44); }
html.lg-gl-plates .dept-card:not(.pw-tile) > .dc-plate:not(.lg-host):not(.lg-webgl) { background: rgba(14,14,18,.1); }
[data-theme="light"].lg-gl-plates .dept-card:not(.pw-tile) > .dc-plate:not(.lg-host):not(.lg-webgl) { background: rgba(255,255,255,.03); }
[data-theme="light"] .dept-card:not(:has(.wt-media[style])) > .dc-plate:not(.lg-host):not(.lg-webgl) { background: rgba(255,255,255,.62); }
/* styles.css caps every canvas at max-width:100%, which squeezed the library's padded canvas to half width */
.lg-webgl > canvas { max-width: none !important; max-height: none !important; }
.lg-webgl { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .lg-host, .lg-pill, .cm-rail .cm-progress-dot.lg-host, .cm-rail .cm-progress-fill { transition-duration: .01ms !important; }
}
@media (max-width: 680px) {
  .site-hd .nav.lg-host { border-radius: 30px; }
  .site-hd .nav-links.lg-host { border-radius: 26px; }
  .com-menu, [data-theme="light"] .com-menu { box-shadow: none; background: transparent; }
  .site-hd .nav.is-closing-m .nav-links { display: flex; }
}

/* ---------- collapsibles (estimator packages, add-ons, info accordions): glass rows that open smoothly ---------- */
:root { interpolate-size: allow-keywords; }
details.svc { border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--lg-slab-top), var(--lg-slab-bot)); box-shadow: inset 0 1px 0 rgba(var(--lg-ink), .1), inset 0 0 0 1px rgba(var(--lg-ink), .06); }
details.svc + details.svc { margin-top: 8px; }
details.svc > summary, details.svc-collapse > summary, details.tech-renders > summary { border-bottom: 0 !important; }
details.svc > summary:hover { background: transparent; }
details.svc > summary::after, details.svc-collapse > summary::after {
  content: "" !important; width: 18px; height: 18px; flex: none; background: currentColor; color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s var(--lg-spring); }
details[open].svc > summary::after, details[open].svc-collapse > summary::after { transform: rotate(180deg); }
.svc-price { font-family: "Hanken Grotesk", system-ui, sans-serif !important; color: var(--muted) !important; }
details.svc::details-content, details.svc-collapse::details-content, details.tech-renders::details-content, .info-accordion-list details::details-content {
  height: 0; overflow: clip; transition: height .38s var(--lg-out), content-visibility .38s allow-discrete; }
details[open].svc::details-content, details[open].svc-collapse::details-content, details[open].tech-renders::details-content, .info-accordion-list details[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) { details::details-content { transition: none !important; } }
.tr-ico .ico, .tr-caret .ico { width: 18px; height: 18px; }
details[open] .tr-caret .ico { transform: rotate(180deg); }
.tr-caret .ico { transition: transform .35s var(--lg-spring); }

/* ---------- motion pass: selection settles with a small spring; cards lift without distorting their image ---------- */
.fn-card.lg-host, .config-mode-option.lg-host, .lvl { transition: transform .45s var(--lg-spring), color .12s ease; }
.fn-card.lg-host.active, .config-mode-option.lg-host.active { animation: lg-settle .45s var(--lg-spring); }
@keyframes lg-settle { 0% { transform: scale(.97); } 100% { transform: none; } }
.calc-step.active { animation: lg-step-in .32s var(--lg-out); }
@keyframes lg-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.work-tile, .feat-card, .work-card { transition: border-color .2s ease, transform .45s var(--lg-spring); }
.work-tile:hover, .work-card:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .calc-step.active, .fn-card.lg-host.active, .config-mode-option.lg-host.active { animation: none; } .work-tile:hover, .work-card:hover { transform: none; } }

/* ---------- Info: segmented tabs, sections open in place, full width ---------- */
.info-wrap { padding-top: clamp(28px, 4vw, 48px); }
.info-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin: 0 0 clamp(28px, 4vw, 44px); border-radius: 999px; max-width: 100%; }
.info-tabs .info-tab { position: relative; z-index: 1; flex: none; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: transparent !important;
  color: var(--muted); font: 500 1rem "Hanken Grotesk", system-ui, sans-serif; letter-spacing: normal; text-transform: none; cursor: pointer; transition: color .12s ease; }
.info-tabs .info-tab:hover, .info-tabs .info-tab.active { color: var(--text); background: transparent !important; }
.info-tabs .lg-pill.is-sel { background: linear-gradient(180deg, rgba(var(--lg-ink), .2), rgba(var(--lg-ink), .08)); }
[data-theme="light"] .info-tabs .lg-pill.is-sel { background: #fff; }
.info-main .info-panel { display: block; border-top: 0 !important; }
.info-main .info-panel[hidden] { display: none !important; }
.info-main .info-panel > section, .info-main .info-panel + .info-panel > section { padding: 0 0 48px !important; }
.info-main .info-panel:not([hidden]) { animation: lg-step-in var(--t-panel, .32s) var(--ease-out, var(--lg-out)); }
.info-main .wrap { max-width: none; padding: 0; }
hr.div:has(+ .about-sections:empty), .about-sections:empty { display: none; }
/* the Privacy tab uses the Privacy page cards (assets/info.css .pv-page) */
@media (max-width: 760px) { .info-tabs { border-radius: 26px; } .info-tabs .info-tab { padding: 10px 14px; font-size: .9375rem; } }
/* footer bar actions */
.sf-bar-actions { display: inline-flex; gap: 8px; }
.site-foot a.sf-report.lg-iconbtn { color: var(--text); }
/* coverless discipline cards in the light theme: light plate, dark text */
[data-theme="light"] .dept-card .wt-media:not([style]) { background: linear-gradient(155deg, #E7E7E2, #D7D7D1) !important; }
[data-theme="light"] .dept-card:not(:has(.wt-media[style])) .dc-plate { color: var(--text); text-shadow: none; }
[data-theme="light"] .dept-card:not(:has(.wt-media[style])) .dc-plate :is(h2, h3, p, .dc-count, .dc-go) { color: var(--text); }
[data-theme="light"] .dept-card:not(:has(.wt-media[style])) .dc-plate .dc-go { border-color: rgba(0,0,0,.18); }
[data-theme="light"] .dept-card:not(:has(.wt-media[style])) .wt-media::after { background: none; }


/* 12.11: inside menus the hover / current highlight is a soft fill with no outline, rounded concentric with the menu
   (28px corner - 8px padding = 20px). With its own outline and pill rounding it sat a few px inside the menu's edge
   and read as a doubled corner (Pasha's screenshot). */
:is(.acct-menu, .com-menu) .lg-pill { border-radius: 20px; box-shadow: none; background: rgba(var(--lg-ink), .075); }
:is(.acct-menu, .com-menu) .lg-pill::before, :is(.acct-menu, .com-menu) .lg-pill svg.lg-gl { display: none; }
[data-theme="light"] :is(.acct-menu, .com-menu) .lg-pill { background: rgba(0, 0, 0, .055); box-shadow: none; }
:is(.acct-menu, .com-menu) :is(a.cm-row, a, button.am-item) { border-radius: 20px; }
.nav-links .com-menu .com-est { border-radius: 20px; } /* 12.11: concentric with the menu corner (28 - 8) */