/* ════════════════════════════════════════════════════════════════════════
   LIA — LIGHT/DARK MATERIAL REVAMP   (home page • preview overlay)
   Token-driven; carousels (#work/#work2/#work3 .ja-work-section) NEVER referenced.
   Pairs with revamp.js (scroll-state + in-menu bulb toggle).
   ════════════════════════════════════════════════════════════════════════ */
/* Inter — SELF-HOSTED variable latin (one 47KB woff2, weights 100-900), replacing the
   render-blocking @import (HTML→revamp.css→Google CSS→woff2 = 4 serial round-trips before the
   hero H1 could paint). font-display:swap = text paints immediately in the fallback, then swaps. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/uploads/lia-fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — SELF-HOSTED variable latin (ONE ~31KB woff2, wght axis 100-800). The original
   @import (customcss.css:400) sits after rules so per CSS spec it is DEAD — the mono tier has been
   silently falling back (Courier New on the literal stacks, Inter via the --font-mono stopgap).
   Same latin subset + swap strategy as Inter above. Weights actually rendered: 500 + 600. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/wp-content/uploads/lia-fonts/jbmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1 · TOKENS (light) ──────────────────────────────────────────────────── */
:root {
  --bg: #FFFFFF; --bg-elevated: #F8F9FA; --bg-card: #FFFFFF;
  --text: #202124; --text-muted: #5F6368; --border: #DADCE0;
  --accent: #C7F23C; --accent-dark: #A8D028;
  --font-display: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;   /* JBMono restored (self-hosted above); Inter stays as the swap-period fallback */
}
html, body { background: var(--bg) !important; color: var(--text) !important; transition: background-color .42s var(--ease), color .42s var(--ease) !important; }

/* ── 2 · TYPOGRAPHY (Inter) ──────────────────────────────────────────────── */
body, p, .ja-sub, .ja-card p, .lia-abt-body, .lia-abt-lead {
  font-family: var(--font-body) !important; font-variation-settings: normal !important; -webkit-font-smoothing: antialiased;
}
.ja-hero-h1, .ja-section-h, .ja-card h3, .ja-cta h2, .site-title a, h1, h2, h3, h4 {
  font-family: var(--font-display) !important; font-variation-settings: normal !important;
  font-style: normal !important; font-weight: 600 !important; letter-spacing: -0.021em !important;
}
.ja-hero-h1, .ja-cta h2 { font-weight: 700 !important; letter-spacing: -0.03em !important; }
.ja-section-eyebrow, .ja-clients-label, .ja-brand-mark, .ja-brand-credit,
.num, .cat, .ja-hero-sub, .ja-btn, .menu-link, .main-header-menu .menu-link {
  font-family: var(--font-mono) !important; font-variation-settings: normal !important; font-weight: 500 !important;
}

/* ── 3 · HEADER — thin; transparent over the reel, SEAMLESS solid on scroll ──
       At top: transparent + light logo. .lia-scrolled (revamp.js, >60px) → the
       WHOLE header (incl. the mobile wrap) becomes var(--bg). NO shadow, no line. */
body.lia-chrome #masthead { padding-top: 0 !important; padding-bottom: 0 !important; }   /* kill the transparent padding-strip around the solid bar */
body.lia-chrome #masthead .ast-primary-header-bar, body.lia-chrome #masthead .main-header-bar, body.lia-chrome #masthead .ast-mobile-header-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
body.lia-chrome #masthead .ast-builder-grid-row, body.lia-chrome #masthead .site-primary-header-wrap { min-height: 56px !important; }   /* thin, premium bar height */
/* in-page menu anchors (About→#what-i-do, Gallery→#work, Contact→#contact): land each section
   FLUSH under the fixed header (rendered ~63px desktop / 64px mobile) so the previous section's
   bottom edge is fully covered — no colour strip peeks through. Each section's own top padding
   supplies the breathing room. revamp.js owns the smooth scroll + mobile off-canvas close. */
body.lia-chrome #work, body.lia-chrome #what-i-do, body.lia-chrome #contact { scroll-margin-top: 56px; }
body.lia-chrome #masthead .site-title a { padding-top: 0 !important; padding-bottom: 0 !important; }
/* AT TOP — transparent, light logo + menu, no shadow */
body.lia-chrome:not(.lia-scrolled) #masthead, body.lia-chrome:not(.lia-scrolled) .site-header,
body.lia-chrome:not(.lia-scrolled) #masthead .ast-primary-header-bar, body.lia-chrome:not(.lia-scrolled) #masthead .main-header-bar,
body.lia-chrome:not(.lia-scrolled) #masthead .ast-mobile-header-wrap {
  background: transparent !important; background-image: none !important;
  box-shadow: none !important; border-bottom: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.lia-chrome:not(.lia-scrolled) #masthead .site-title a,
body.lia-chrome:not(.lia-scrolled) #masthead .menu-link,
body.lia-chrome:not(.lia-scrolled) #masthead .menu-toggle,
body.lia-chrome:not(.lia-scrolled) #masthead .menu-toggle svg { color: #FFFFFF !important; fill: #FFFFFF !important; }
/* SCROLLED — fill the ENTIRE header white (masthead + every child incl mobile wrap); NO shadow/line */
body.lia-chrome.lia-scrolled #masthead, body.lia-chrome.lia-scrolled .site-header,
body.lia-chrome.lia-scrolled #masthead .ast-primary-header-bar,
body.lia-chrome.lia-scrolled #masthead .main-header-bar,
body.lia-chrome.lia-scrolled #masthead .ast-mobile-header-wrap,
body.lia-chrome.lia-scrolled #masthead .ast-mobile-header-content,
body.lia-chrome.lia-scrolled #masthead .site-primary-header-wrap {
  background: var(--bg) !important; background-image: none !important;
  box-shadow: none !important; border-bottom: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.lia-chrome.lia-scrolled #masthead .site-title a { color: var(--text) !important; }
body.lia-chrome.lia-scrolled #masthead .menu-link { color: var(--text-muted) !important; }
body.lia-chrome.lia-scrolled #masthead .menu-toggle,
body.lia-chrome.lia-scrolled #masthead .menu-toggle svg { color: var(--text) !important; fill: var(--text) !important; }
#masthead .menu-link:hover { color: var(--accent-dark) !important; }
/* mobile drawer + search popups */
.ast-mobile-popup-drawer, .ast-mobile-popup-content, #ast-mobile-popup, #ast-hf-mobile-menu,
#ast-mobile-site-navigation, .ast-builder-menu-mobile, .ast-search-menu-icon .search-form {
  background: var(--bg) !important; color: var(--text) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.ast-mobile-popup a, .ast-mobile-popup-inner a { color: var(--text) !important; background: var(--bg) !important; }

/* ── 4 · HERO — dark showreel video; text white ──────────────────────────── */
.ja-hero-h1, .ja-hero-sub, .ja-brand-mark, .ja-brand-credit,
.ja-scroll-cue, .ja-scroll-cue span, .ja-hero-h1 .hl { color: #FFFFFF !important; }
.ja-hero .lime-phrase, .lime-phrase { color: var(--accent) !important; }
.ja-hero .ja-btn-ghost, .ja-hero-content .ja-btn-ghost { color: #FFFFFF !important; border-color: rgba(255,255,255,.55) !important; }
.ja-hero .ja-btn-ghost:hover, .ja-hero-content .ja-btn-ghost:hover { background: #FFFFFF !important; color: #202124 !important; }

/* ── 5 · CONTENT SECTIONS ────────────────────────────────────────────────── */
body .ja-clients, body .lia-abt, body .ja-cta, body .site-footer, body .ast-footer-overlay {
  background: var(--bg) !important; color: var(--text) !important;
}
.ja-client, .lia-abt-lead, .ja-cta h2 { color: var(--text) !important; }
.ja-clients-label, .ja-section-eyebrow, .lia-abt-label, .lia-abt-body { color: var(--text-muted) !important; }
.lia-abt-rule { background: var(--border) !important; }
.site-footer { border-top: 1px solid var(--border) !important; }

/* ── 6 · BUTTONS — Material pill, NO drop-shadow ─────────────────────────── */
.ja-btn { border-radius: 100px !important; border-width: 1.5px !important; box-shadow: none !important; }
.ja-btn-primary { background: var(--accent) !important; color: #1A1A0A !important; border-color: var(--accent) !important; box-shadow: none !important; }
.ja-btn-primary:hover { background: var(--accent-dark) !important; box-shadow: none !important; }
.ja-btn-ghost { background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; }
.ja-btn-ghost:hover { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }

/* ── 7 · ACCENT — lime as highlight, no low-contrast text ────────────────── */
.ja-cta h2 em, .lia-abt-hi { color:#0A0A0A !important; font-style:normal !important; background:var(--accent) !important; border-radius:3px; padding:0.02em 0.2em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }   /* FULL lime highlight, black text (readable in light AND dark) */

/* ── 8 · FOOTER — icons + Film-Amour CTA (cinema/heart/border) + TM: BLACK on
       white, LIME on dark. No underlines anywhere in the footer. ──────────── */
.site-footer, .site-footer p, .site-footer span, .ast-footer-overlay { color: var(--text) !important; }
.site-footer a { text-decoration: none !important; color: var(--text) !important; }
.site-footer a svg, .site-footer a path,
.film-amour-cta svg, .film-amour-cta path, .fa-reel, .fa-heart,
.ast-builder-social-element a svg, .ast-builder-social-element a path { fill: var(--text) !important; color: var(--text) !important; }
.film-amour-cta { border-color: var(--text) !important; color: var(--text) !important; text-decoration: none !important; }
.film-amour-cta:hover, .film-amour-cta:focus { background: var(--accent) !important; color: #1A1A0A !important; border-color: var(--accent) !important; }
.film-amour-cta:hover svg, .film-amour-cta:hover path, .film-amour-cta:focus svg, .film-amour-cta:focus path { fill: #1A1A0A !important; color: #1A1A0A !important; }
body.lia-dark .site-footer a svg, body.lia-dark .site-footer a path,
body.lia-dark .film-amour-cta svg, body.lia-dark .film-amour-cta path,
body.lia-dark .ast-builder-social-element a svg, body.lia-dark .ast-builder-social-element a path { fill: var(--accent) !important; color: var(--accent) !important; }
body.lia-dark .film-amour-cta { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ── 9 · 3D HEAD — container + canvas transparent (no grey box) ──────────── */
body .lia-abt-mid, body .lia-abt-mid canvas, body .lia-face { background: transparent !important; }

/* ── 10 · LIGHT-BULB toggle — lives INSIDE the menu, after Contact ───────── */
.lia-bulb-li { display: flex !important; align-items: center !important; list-style: none !important; margin: 0 !important; }
.lia-bulb-btn { background: transparent !important; border: 0 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 0 0 1.1rem !important; color: #FFFFFF; -webkit-tap-highlight-color: transparent; transition: color .42s var(--ease); }
.lia-bulb-btn svg { width: 19px !important; height: 19px !important; display: block !important; }
@media (max-width: 921px) { .lia-bulb-btn { padding: 16px 24px !important; justify-content: flex-start !important; width: 100%; } .lia-bulb-li { width: 100%; } }

/* ── 11 · DARK MODE — modern charcoal twin (Inter, lime), NO header shadow ── */
/* tokens on html.lia-dark TOO → an early <head> script can set the dark palette before <body>
   exists, killing the white flash on dark-mode loads (revamp.js still adds body.lia-dark for the
   structural §25 glass). */
body.lia-dark, html.lia-dark {
  --bg: #121212; --bg-elevated: #1E1E1E; --bg-card: #1E1E1E;
  --text: #E8EAED; --text-muted: #9AA0A6; --border: #2E2E2E;
  --accent: #C7F23C; --accent-dark: #A8D028;
}
html.lia-dark { background-color: #121212 !important; }
body.lia-dark .ja-btn-ghost { border-color: var(--border) !important; color: var(--text) !important; }
body.lia-dark .ja-btn-ghost:hover { background: var(--text) !important; color: var(--bg) !important; }

/* ── 12 · POLISH ─────────────────────────────────────────────────────────── */
::selection { background: var(--accent); color: #1A1A0A; }
hr { border-color: var(--border) !important; }

/* ════════════ §13 · SENIOR UI/UX AUDIT REFINEMENTS ════════════ */
:root { --text-label:#3C4043; --lia-maxw:1360px; --ease:cubic-bezier(.4,0,.2,1); }
body.lia-dark, html.lia-dark { --text-label:#BDC1C6; --border:#3C4043; }

/* ONE label tier (was 5 sizes + 3 tracking units → systematic) */
body .ja-section-eyebrow, body .ja-clients-label, body .lia-abt-label,
body .ja-brand-mark, body .ja-brand-credit, body .ja-scroll-cue, body .ja-hero-sub {
  font-size:12px !important; letter-spacing:.16em !important; font-weight:600 !important;
  text-transform:uppercase !important; line-height:1 !important;
}
body .ja-section-eyebrow, body .ja-clients-label, body .lia-abt-label { color:var(--text-label) !important; }
body .ja-brand-mark, body .ja-brand-credit, body .ja-scroll-cue, body .ja-scroll-cue span { color:#fff !important; }

/* display type re-tuned for Inter */
.ja-hero-h1 { font-size:clamp(2.5rem,8vw,90px) !important; letter-spacing:-.04em !important; line-height:1.04 !important; }
.ja-cta h2, .ja-cta h2.ja-section-h { font-size:clamp(2.5rem,5vw,4rem) !important; font-weight:700 !important; letter-spacing:-.035em !important; line-height:1.04 !important; font-style:normal !important; }
.lia-abt-body { line-height:1.6 !important; }
.lia-abt-lead { letter-spacing:-.025em !important; line-height:1.1 !important; }

/* client wall: confident wordmarks, hover visible both themes */
body .ja-client { font-weight:600 !important; font-size:1rem !important; letter-spacing:.04em !important; color:var(--text-muted) !important; transition:color .42s var(--ease), transform .25s var(--ease) !important; }
body .ja-client:hover { color:var(--text) !important; transform:translateY(-2px) !important; }

/* ONE button spec (kills the mismatched-twins tell), flat + tactile press */
.ja-btn, .ja-btn-primary, .ja-btn-ghost {
  font-size:.875rem !important; font-weight:600 !important; letter-spacing:.04em !important;
  text-transform:none !important; padding:.92rem 1.6rem .64rem !important; line-height:1 !important; box-shadow:none !important;   /* asymmetric top/bottom (same total height) nudges the no-descender label to OPTICAL centre */
  transition:background-color .42s var(--ease), color .42s var(--ease), border-color .42s var(--ease), transform .1s ease !important;   /* theme props .42s = synced with every other surface; transform stays snappy for hover */
}
.ja-btn:active { transform:translateY(1px) !important; }
@media (min-width:922px){ .ja-btn-primary, .ja-btn-ghost { min-width:177px !important; } }
/* Download CV is an icon+text button: the .92/.64rem asymmetric padding above (which optically centres
   a no-descender TEXT label) pushes the icon+text cluster ~2.24px LOW (measured). Symmetric padding
   re-centres the cluster — the icon anchors the optical centre. Same total height, so the pill is unchanged. */
body .ja-btn.ja-btn-icon { padding-top:.78rem !important; padding-bottom:.78rem !important; }

/* CTA top divider (was invisible white-on-white) */
.ja-cta::before { background:linear-gradient(90deg,transparent,var(--border),transparent) !important; }

/* Film Amour. pill: bigger, centered, eased */
:is(.site-footer, .xp-footer) a.film-amour-cta { background:transparent !important; padding:8px 18px !important; font-size:14px !important; font-weight:600 !important; letter-spacing:.01em !important; margin-left:0 !important; gap:0 !important; transition:background-color .42s var(--ease), color .42s var(--ease), border-color .42s var(--ease) !important; }

/* dark ghost outlines visible */
body.lia-dark .ja-btn-ghost, body.lia-dark .film-amour-cta { border-color:#5F6368 !important; }

/* shared content measure (was 1400/1100/1560) */
body .ja-clients-inner, body .lia-abt-inner, body .ja-cta { max-width:var(--lia-maxw) !important; }
/* About only: on wide screens let the 3-column grid use more of the empty L/R margin so the left/right
   text blocks spread toward the edges instead of crowding the centre figure. Scales with the viewport,
   capped at 2300px, always keeps a margin (~7vw each side at 2560), never narrower than --lia-maxw.
   Clients + CTA keep --lia-maxw (only #what-i-do widens). */
body .lia-abt-inner { max-width: max(var(--lia-maxw), min(2300px, 86vw)) !important; }
/* ── About figure: orbiting type badge — spins continuously on its own (NOT scroll/cursor bound),
   sits BEHIND the figure (shows around the transparent edges), black in light / lime in dark,
   sized to the figure by JS. Honours reduced-motion (no spin). ── */
body .lia-face-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
body .lia-abt-avatar.lia-face { position: relative; z-index: 1; }
/* The character's colour cycle is now the JS "liquid fill" in home-face-clean.js (skin→lime→neutral,
   rising behind a wavy waterline) — drawn straight onto the canvas, so NO CSS filter/animation here. */
body .lia-abt-badge { position: absolute; top: 50%; left: 50%; width: 440px; height: 440px; z-index: 0; pointer-events: none; overflow: visible; transform: translate(-50%,-50%); animation: lia-badge-spin 26s linear infinite; }
body .lia-abt-badge text { font-family: "JetBrains Mono","Courier New",monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; fill: #0A0A0A; transition: fill .42s var(--ease); }
body.lia-dark .lia-abt-badge text { fill: #C7F23C; }
@keyframes lia-badge-spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body .lia-abt-badge { animation: none !important; transform: translate(-50%,-50%) !important; } }

/* motion: theme cross-fade (scoped) + crisp header solidify */
.ja-clients, .lia-abt, .ja-cta, .site-footer, .ja-client, .lia-abt-rule, .film-amour-cta { transition:background-color .42s var(--ease), color .42s var(--ease), border-color .42s var(--ease); }
/* header SOLIDIFY: bg snaps to white INSTANTLY — NO background-color transition. Fading a white
   bg in over the dark hero passes through grey (the ugly two-tone you saw), so background-color
   stays OUT of the transition. BUT the header-fade's opacity + transform (the disappear itself)
   DO need easing: the original home.css eased them (0.18s) and this rule had stripped that, so the
   light fade STEPPED/flickered over the lime first-carousel section. Restore opacity + transform
   easing on the masthead (exactly as the original did), bg still snaps. Children: hairline only. */
body.lia-chrome #masthead { transition: opacity .18s linear, transform .18s linear, border-color .2s cubic-bezier(.4,0,.2,1) !important; }
body.lia-chrome #masthead * { transition: border-color .2s cubic-bezier(.4,0,.2,1) !important; }
/* logo + menu snap to dark from the FIRST scroll threshold (lia-scrolled, 60px) — NOT the legacy
   80px one — so there's no brief white-logo-on-already-white-header flash (the desktop "disappear") */
html body.lia-chrome.lia-scrolled #masthead .site-title a,
html body.lia-chrome.lia-scrolled #masthead .main-header-menu a,
html body.lia-chrome.lia-scrolled #masthead .main-header-menu .menu-link { color: var(--text) !important; }
/* belt-and-suspenders: no glass blur, no scale on any header layer, ever */
body.lia-chrome #masthead, body.lia-chrome #masthead .site-primary-header-wrap, body.lia-chrome #masthead .ast-primary-header-bar, body.lia-chrome #masthead .main-header-bar, body.lia-chrome #masthead .ast-mobile-header-wrap { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* a11y: respect reduced motion (does not touch the WebGL carousels) */
@media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }

/* ════════════ §14 · header thin line (NO drop-shadow) + footer alignment ════════════ */
body.lia-chrome.lia-scrolled #masthead { border-bottom: 1px solid var(--border) !important; box-shadow: none !important; }
/* footer: vertical-center the social/CTA column against the copyright (was top-aligned) */
body .ast-builder-footer-grid-columns { align-items: center !important; }
body .site-footer-below-section-1 .footer-social-inner-wrap { align-items: center !important; }

/* ════════════ §15 · NUKE all header shadows + neutralize the legacy .is-scrolled state ════════════
   A legacy script toggles body.is-scrolled (>80px), re-activating the old dark-glass +
   shadow header rules that .lia-scrolled doesn't cover. Force them flat + white. */
html body.lia-chrome.is-scrolled #masthead, html body.lia-chrome.lia-scrolled #masthead,
html body.lia-chrome #masthead, html body.lia-chrome #masthead * { box-shadow: none !important; }
html body.lia-chrome.is-scrolled #masthead, html body.lia-chrome.is-scrolled #masthead .ast-primary-header-bar,
html body.lia-chrome.is-scrolled #masthead .main-header-bar, html body.lia-chrome.is-scrolled #masthead .ast-mobile-header-wrap {
  background: var(--bg) !important; background-image: none !important;
}
html body.lia-chrome.is-scrolled #masthead .site-title a { color: var(--text) !important; }
html body.lia-chrome.lia-scrolled #masthead { border-bottom: 1px solid var(--border) !important; }

/* ════════════ §16 · mobile footer — centre the stacked content ════════════
   On the stacked footer (≤921px) the flex rows are justify:normal (left) and the
   396px grid column sits left of centre. Centre the column + both rows + text. */
@media (max-width: 921px){
  body .site-footer .ast-builder-footer-grid-columns { justify-content: center !important; }
  body .site-footer .ast-builder-layout-element.ast-flex { justify-content: center !important; }
  body .site-footer-below-section-1, body .site-footer-below-section-2 { text-align: center !important; }
}

/* ════════════ §17 · header — TRUE edge-to-edge white on scroll + kill glass text-shadow ════════════
   The white bg lived only on the centred inner bars (margin:auto, max-width) so transparent
   gaps bled in at the far left/right (esp. desktop). White the FULL-WIDTH masthead + wraps so
   the header is solid edge-to-edge. And the logo/menu carried text-shadow:rgba(0,0,0,.2) 0 1px 2px
   (the old glass drop) — removed everywhere in the header for a flat Material surface. */
html body.lia-chrome.lia-scrolled #masthead,
html body.lia-chrome.is-scrolled #masthead,
html body.lia-chrome.lia-scrolled #masthead .site-header-primary-wrap,
html body.lia-chrome.lia-scrolled #masthead .site-primary-header-wrap,
html body.lia-chrome.is-scrolled #masthead .site-primary-header-wrap,
html body.lia-chrome.lia-scrolled #masthead .ast-primary-header-bar,
html body.lia-chrome.lia-scrolled #masthead .main-header-bar,
html body.lia-chrome.lia-scrolled #masthead .ast-mobile-header-wrap {
  background-color: var(--bg) !important;
  background-image: none !important;
}
/* flat: no glass drop-shadow on any header text/icon, at top or scrolled */
body.lia-chrome #masthead, body.lia-chrome #masthead *,
body.lia-chrome #masthead .site-title a, body.lia-chrome #masthead .main-header-menu a {
  text-shadow: none !important;
}

/* ════════════ §18 · BULLETPROOF edge-to-edge white on scroll (no chopped corners) ════════════
   §17 whited #masthead, but a content-width desktop header puts its bg on a CENTRED, narrower
   layer → the L/R corners stay transparent. Full-bleed every header bg layer to the FULL
   viewport width (100vw, via the negative-margin trick) so the white always reaches both edges. */
html body.lia-chrome.lia-scrolled #masthead,
html body.lia-chrome.is-scrolled #masthead,
html body.lia-chrome.lia-scrolled #masthead .site-primary-header-wrap,
html body.lia-chrome.is-scrolled #masthead .site-primary-header-wrap,
html body.lia-chrome.lia-scrolled #masthead .ast-mobile-header-wrap,
html body.lia-chrome.is-scrolled #masthead .ast-mobile-header-wrap {
  background-color: var(--bg) !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}
/* inner bars: white, geometry untouched (the full-bleed wrap behind them fills the corners) */
html body.lia-chrome.lia-scrolled #masthead .ast-primary-header-bar,
html body.lia-chrome.lia-scrolled #masthead .main-header-bar {
  background-color: var(--bg) !important; border-radius: 0 !important;
}

/* ════════════ §19 · header geometry CONSTANT across scroll states (kills the scroll-jank) ════════════
   The masthead keeps its natural full width in EVERY state — only the background colour fades
   in on scroll. Zero width/margin change on .lia-scrolled toggle = zero horizontal jump. */
html body.lia-chrome #masthead,
html body.lia-chrome #masthead .site-primary-header-wrap,
html body.lia-chrome #masthead .ast-mobile-header-wrap {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ════════════ §21 · middle carousel ("recent snaps") section bg → white in light ════════════
   The WebGL canvas was recoloured white, but home.css sets #work2{background:#0A0A0A} on the
   SECTION — it showed as a black band below the cards. Match it in light; dark keeps the dark band. */
body.lia-chrome:not(.lia-dark) #work2 { background: #FFFFFF !important; }

/* ════════════ §22 · MOBILE menu — solid theme drawer (no lime glass) + bulb in the bar ════════════ */
.lia-bulb-bar { display: none; }   /* bar bulb is mobile-only; desktop uses the in-menu bulb */
@media (max-width: 921px){
  /* drawer: SOLID theme background — kill the lime radial-gradient + the glass blur */
  /* the OPEN drawer's lime glass is set inline by `#ast-mobile-header:has(.menu-toggle.toggled)
     .ast-mobile-header-content` (spec 1,3,0) — must out-specify it with :has() + html body */
  html body #ast-mobile-header:has(.menu-toggle.toggled) .ast-mobile-header-content,
  html body #ast-mobile-header .ast-mobile-header-content,
  html body .ast-mobile-header-content {
    background: var(--bg) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html body .ast-mobile-header-content::before, html body .ast-mobile-header-content::after {
    background: none !important; background-image: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* menu links readable on the solid drawer — must beat the inline 2-id rule
     `#ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu > li > a` (spec 2,2,2) */
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu > li > a,
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu .menu-link,
  html body .ast-mobile-header-content .main-header-menu a { color: var(--text) !important; }
  /* logo readable in the open drawer (was the at-top white logo, faint on the now-solid light drawer) */
  body.lia-chrome #ast-mobile-header:has(.menu-toggle.toggled) .site-title a,
  body.lia-chrome #ast-mobile-header:has(.menu-toggle.toggled) .ast-logo-title-inline { color: var(--text) !important; }
  /* separator lines theme-aware — were fixed rgba(255,255,255,0.06) (invisible on the light drawer) */
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu > li > a,
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu li a,
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu li {
    border-bottom-color: var(--border) !important; border-top-color: var(--border) !important;
  }
  /* hide the in-drawer bulb on mobile — the bar bulb replaces it */
  body .lia-bulb-li { display: none !important; }
  /* bulb in the header bar, left of the hamburger, sized + centred to match it */
  body .lia-bulb-bar {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0 2px 0 0; padding: 0;
    background: none !important; border: 0 !important; box-shadow: none !important;
    vertical-align: middle; cursor: pointer;
  }
  body .lia-bulb-bar svg { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 auto !important; display: block; }
}

/* ════════════ §23 · desktop header — a touch shorter (80px → 64px) ════════════ */
@media (min-width: 922px){
  body.lia-chrome #masthead .site-primary-header-wrap,
  body.lia-chrome #masthead .ast-builder-grid-row,
  body.lia-chrome #masthead .ast-primary-header-bar,
  body.lia-chrome #masthead .main-header-bar { min-height: 0 !important; height: 64px !important; }
  body.lia-chrome #masthead .site-branding { padding-top: 4px !important; padding-bottom: 4px !important; }
}

/* ════════════ §24 · kill the header-fade's blur (the grey "drop shadow" smudge) ════════════
   home-headerfade.js fades the masthead with opacity + an upward translate + filter:blur(). The
   blur is the only grey-producing layer — it bleeds below the bar as a soft drop-shadow smudge.
   Remove just the blur; the opacity fade + translate (the disappear itself) are untouched. */
body.lia-chrome #masthead { filter: none !important; }

/* ════════════ §25 · DARK MODE = LIVE GLASS HEADER + CTA (the fusion) ════════════
   Light mode stays the full temp revamp (NOTHING below touches it). In DARK, the chrome adopts
   the live site's glass: the scrolled header becomes the exact live translucent-dark + blur
   (rgba(10,10,10,.72) + blur(18px) saturate(140%)), text stays light, and the Film-Amour CTA
   takes the live filled-pill look. Header size (§23) + Inter (§2) carry over from temp untouched.
   ADDITIVE ONLY — every rule is .lia-dark-scoped at a specificity that beats the white-header
   rules, so light mode can't regress. Scroll classes: revamp.js adds .lia-scrolled, the legacy
   script adds .is-scrolled — match either. At top (neither class) the revamp's transparent +
   white-text header already suits dark, so §25 only governs the SCROLLED state. */

/* the glass lives on the OUTER masthead (full-width, no chopped corners); inner bars go
   transparent so the translucent layers don't stack into a too-dark slab */
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) .site-header {
  background: rgba(10,10,10,0.72) !important;
  background-color: rgba(10,10,10,0.72) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .site-primary-header-wrap,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .ast-primary-header-bar,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .main-header-bar,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .ast-mobile-header-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* scrolled header text/icons stay light (override the light-mode dark-on-white) */
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .site-title a,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .main-header-menu a,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .main-header-menu .menu-link,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .menu-link,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .menu-toggle,
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .menu-toggle svg {
  color: #F5F5F5 !important; fill: #F5F5F5 !important;
}
html body.lia-chrome.lia-dark:is(.lia-scrolled,.is-scrolled) #masthead .menu-link:hover { color: var(--accent) !important; }

/* Film-Amour CTA in dark → live filled pill (temp size + roundness, lime, dark glass-fill) */
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta {
  background: #0A0A0A !important;
  color: #C7F23C !important;
  border: 1px solid #C7F23C !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
}
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta svg,
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta path,
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta .fa-reel,
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta .fa-heart { fill: #C7F23C !important; color: #C7F23C !important; }
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta:hover,
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta:focus {
  background: #C7F23C !important; color: #0A0A0A !important; border-color: #C7F23C !important;
}
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta:hover svg,
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta:hover path,
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta:focus svg,
html body.lia-dark :is(.site-footer, .xp-footer) a.film-amour-cta:focus path { fill: #0A0A0A !important; color: #0A0A0A !important; }

/* ════════════ §27 · correctness fixes (a11y + dead-layer cleanup) ════════════ */
/* (1) reduced-motion: the §-blanket guard misses the logo heart (its `infinite !important`
   out-specifies the `*` rule) — a pulsing masthead element is exactly the vestibular case. */
@media (prefers-reduced-motion: reduce) {
  .lia-heart, .lia-heart * { animation: none !important; }
  /* the Customizer CSS sets html{scroll-behavior:smooth} (customcss line 663) — neutralize it here;
     NEVER edit the fragile Customizer storage for this */
  html { scroll-behavior: auto !important; }
}
/* (1b) screen-reader-only utility — used by the hidden <h2>s inside the three canvas-only #work
   sections (p835), which otherwise expose zero text to AT. Unscoped on purpose: must work even if
   a section is reused on a non-chrome page; class-only selector cannot collide with Astra. */
.lia-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important;}
/* (2) hero primary CTA carried a leftover skeuomorphic glass from the page-835 inline style —
   §6 reset bg + box-shadow but NOT backdrop-filter (a wasted blur layer on an opaque button) or
   the engraved white text-shadow (fights flat Material). Kill both. */
body.lia-chrome .ja-btn-primary {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  text-shadow: none !important;
}
/* (3) keyboard focus ring — the revamp stripped :focus outline everywhere (0 :focus-visible rules).
   Restore a visible ring for KEYBOARD focus only (mouse clicks stay clean), theme-adaptive. */
.lia-bulb-btn:focus-visible,
.ja-btn:focus-visible,
.main-header-menu a:focus-visible,
#masthead .menu-link:focus-visible,
:is(.site-footer, .xp-footer) a.film-amour-cta:focus-visible {
  outline: 2px solid var(--text) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ════════════ §28 · Material-3 + typography refinements ════════════ */
/* hero sub-line: folded into the label tier (above) → muted white so it reads as a caption under
   the headline, not a competing line. */
body .ja-hero-sub { color: rgba(255,255,255,0.6) !important; }
/* M3 role-token aliases — the system layer; values map to the existing flat palette so the look is
   unchanged, but future Material work + the dark twin can reference roles instead of raw hex. */
:root {
  --md-sys-color-surface: var(--bg);
  --md-sys-color-surface-container: #F1F3F4;
  --md-sys-color-on-surface: var(--text);
  --md-sys-color-on-surface-variant: var(--text-muted);
  --md-sys-color-primary: var(--accent);
  --md-sys-color-outline: var(--border);
}
body.lia-dark { --md-sys-color-surface-container: #1E1E1E; }
/* hybrid elevation: the primary CTA is the ONE raised affordance (subtle M3 elevation-1); every
   other surface + the header stay flat (honouring your earlier flat-header preference). */
body.lia-chrome .ja-btn-primary {
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.07) !important;
  transition: box-shadow .18s var(--ease), background-color .18s var(--ease), transform .1s ease !important;
}
body.lia-chrome .ja-btn-primary:hover { box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10) !important; }
body.lia-dark.home .ja-btn-primary { box-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30) !important; }
/* lime guard: --accent (lime) is HIGHLIGHT / FILL only — 1.3:1 on white = invisible as text. Re-assert
   the at-risk labels to the text token so a stray accent-text rule can't make them vanish. */
body.lia-chrome:not(.lia-dark) .ja-section-eyebrow,
body.lia-chrome:not(.lia-dark) .ja-clients-label,
body.lia-chrome:not(.lia-dark) .lia-abt-label { color: var(--text-label) !important; }
/* body copy leading — Inter reads tighter than Astra's serif-era 1.65 */
body.lia-chrome p { line-height: 1.55 !important; }
/* .lia-abt-lead p→h2 promotion — freeze the exact computed style the <p> had (CDP-verified: with
   this rule the before/after computed-style diff is {} at 1440px AND 412px). Each line pins the
   property to the rule that won when the element was a <p>. */
body.lia-chrome h2.lia-abt-lead {
  line-height: 1.55 !important;                              /* was body.lia-chrome p — rule above */
  margin: 0 0 1.6em !important;                              /* was .entry-content p — astra main.min.css (scales with the font-size clamp exactly as today) */
  font-feature-settings: 'ss01' on, 'cv11' on !important;    /* was customcss `body,.ja-sub,.ja-card p,p` */
  clear: none !important;                                    /* astra h1-h6{clear:both} — belt-and-braces, no floats nearby */
}

/* ════════════ §29 · GLASS-HUNT FIXES — kill surviving skeuomorphism (flat Material in light; the
   dark §25 glass fusion is untouched) + the 4 mobile-header detail bugs ════════════ */

/* (1) SCROLLED HEADER bevel + heavy drop in LIGHT: the wp `#masthead.site-header` rule (1,3,2)
   out-specified §15's killer (1,2,2). Tie the .site-header class + win on source order. Dark keeps
   its glass via §25 (do not touch). The flat var(--border) hairline (§14) stays for separation. */
html body.lia-chrome.is-scrolled #masthead,
html body.lia-chrome.is-scrolled #masthead.site-header,
html body.lia-chrome.lia-scrolled #masthead.site-header { box-shadow: none !important; }

/* (2) GHOST CTA frosted glass ("Download CV" / "View All Work"): revamp nulled its bg + box-shadow
   but never the 14px backdrop-blur — the reel frosts through it. Kill the blur (flat ghost pill). */
body.lia-chrome .ja-btn-ghost, body.lia-chrome .ja-hero .ja-btn-ghost {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

@media (max-width: 921px) {
  /* (3+4) MOBILE DRAWER engrave/letterpress text-shadow on the nav links AND the logo — the live
     emboss you see on About/Gallery/Contact (and the wordmark) when the hamburger menu is open.
     html-body prefix out-specifies the :has()-based source rules. */
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu > li > a,
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu .menu-link,
  html body #ast-hf-mobile-menu li a,
  html body .ast-mobile-header-content a,
  body.lia-chrome #ast-mobile-header:has(.menu-toggle.toggled) .site-title a,
  body.lia-chrome #ast-mobile-header:has(.menu-toggle.toggled) .site-title { text-shadow: none !important; }

  /* (5) DRAWER list (UL) bevel + theme-blind white hairline → flat + theme-aware */
  html body #ast-hf-mobile-menu { box-shadow: none !important; border-top: 1px solid var(--border) !important; }

  /* (6) ONE theme-aware separator owns every item line (was white 6% = invisible on the light
     drawer) — consistent light + dark, none after the last item. */
  html body #ast-hf-mobile-menu li a,
  html body .ast-mobile-header-content a { border-bottom: 1px solid var(--border) !important; }
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu > li:last-child > a { border-bottom: 0 !important; }

  /* MOBILE #1 — Astra renders the bar in .ast-mobile-header-wrap (the desktop .ast-primary-header-bar
     is COLLAPSED on mobile — the earlier fix targeted dead elements). The logo sat ~40px in + the
     icon cluster ~40px from the right (wrap padding + section/element offsets) = the L/R space.
     Tighten to a balanced 14px and zero the inner offsets so the logo hugs the left + the icons hug
     the right. */
  /* zero EVERY inner horizontal offset (nested wraps, the grid + its children, the sections, the
     branding) so nothing pushes the logo/icons inward... */
  html body.lia-chrome #masthead .ast-mobile-header-wrap,
  html body.lia-chrome #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
  html body.lia-chrome #masthead .ast-mobile-header-wrap .site-header-primary-wrap,
  html body.lia-chrome #masthead .ast-mobile-header-wrap .ast-builder-grid-row > *,
  html body.lia-chrome #masthead .ast-mobile-header-wrap .site-header-primary-section-left,
  html body.lia-chrome #masthead .ast-mobile-header-wrap .site-header-primary-section-right,
  html body.lia-chrome #masthead .ast-mobile-header-wrap .ast-builder-layout-element,
  html body.lia-chrome #masthead .ast-mobile-header-wrap .site-branding {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important; max-width: none !important;
  }
  /* ...then the grid itself owns ONE balanced 20px inset (breathing room, not corner-hugging).
     Symmetric because the grid is full-width (0..innerWidth) flex space-between, so logo TEXT hugs
     left+20 and — with the glyph right-align fix below — the hamburger GLYPH hugs right+20. */
  html body.lia-chrome #masthead .ast-mobile-header-wrap .ast-builder-grid-row {
    display: flex !important; grid-template-columns: none !important;
    justify-content: space-between !important; align-items: center !important;
    width: 100% !important; box-sizing: border-box !important;
    padding-left: 20px !important; padding-right: 20px !important; margin: 0 !important;
  }
  html body.lia-chrome #masthead .menu-toggle.main-header-menu-toggle {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding-left: 0 !important; padding-right: 0 !important; min-width: 44px !important; min-height: 44px !important;
  }
  /* CENTRE the hamburger glyph in its 44px tap box (was right-aligned → hugged the edge, felt cramped).
     Centring gives ~11px breathing room on its right while keeping the 44px tap target + 20px grid inset. */
  html body.lia-chrome #masthead .menu-toggle.main-header-menu-toggle > * { margin-left: auto !important; margin-right: auto !important; }
  /* HOME hamburger → PIXEL-MATCH /funstuff/'s burger (22px wide, three 2px bars, 6.5px apart). Astra's
     path-icon drew ~15px-wide bars → looked small. Hide it; draw our own via a 2px bar + two box-shadow
     copies (= identical geometry to .xp-burger-box). currentColor inherits the toggle's existing white
     (over hero) / var(--text) (scrolled) colour, so no extra colour rules are needed. */
  html body.lia-chrome #masthead .menu-toggle svg { display: none !important; }
  html body.lia-chrome #masthead .menu-toggle .mobile-menu-toggle-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 22px !important; height: 15px !important;
  }
  html body.lia-chrome #masthead .menu-toggle .mobile-menu-toggle-icon::before {
    content: '' !important; display: block !important; width: 22px !important; height: 2px !important;
    border-radius: 2px !important; background: currentColor !important;
    box-shadow: 0 -6.5px 0 currentColor, 0 6.5px 0 currentColor !important;
  }

  /* MOBILE #2 — bulb glyph 22→20px to match the hamburger glyph (the 44×44 boxes already match) */
  body .lia-bulb-bar svg { width: 20px !important; height: 20px !important; min-width: 20px !important; }
  body .lia-bulb-bar { margin: 0 !important; }

  /* MOBILE #3 — halve the doubled drawer-item spacing so it tracks the shorter header */
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu > li > a {
    padding-top: 8px !important; padding-bottom: 8px !important;
  }
  html body #ast-mobile-header:has(.menu-toggle.toggled) .ast-mobile-header-content { padding-top: 72px !important; }

  /* MOBILE #4 — the bar bulb is WHITE (right for the dark hero at the top). But when the header
     turns SOLID WHITE in light mode — menu open OR scrolled — a white bulb is invisible. Snap it
     to dark var(--text) in those states ONLY (dark mode keeps white; top-over-hero keeps white). */
  html body.lia-chrome:not(.lia-dark):is(.lia-scrolled,.is-scrolled) .lia-bulb-bar svg,
  html body.lia-chrome:not(.lia-dark) #ast-mobile-header:has(.menu-toggle.toggled) .lia-bulb-bar svg {
    stroke: var(--text) !important; color: var(--text) !important; fill: none !important;
  }
  html body.lia-chrome:not(.lia-dark):is(.lia-scrolled,.is-scrolled) .lia-bulb-bar,
  html body.lia-chrome:not(.lia-dark) #ast-mobile-header:has(.menu-toggle.toggled) .lia-bulb-bar { color: var(--text) !important; }

  /* MOBILE #5 — kill the open-drawer list's own 16px top padding: it stacked on top of the header
     clearance so the FIRST item (ABOUT) sat ~16px lower than the rest = the "ABOUT has too much
     space / not aligned" gap. With it gone every row is the uniform item height + one hairline. */
  html body #ast-mobile-header:has(.menu-toggle.toggled) #ast-hf-mobile-menu,
  html body #ast-hf-mobile-menu { padding-top: 0 !important; }
}

/* ════════════ §30 · INNER PAGES (About/Gallery/Contact) — solid header, no hero ════════════
   The revamp chrome loads site-wide (lia-chrome class). The HOME is a one-pager whose transparent
   white-text header sits over a dark hero video; INNER pages have no hero, so that transparent
   white state renders the logo/menu white-on-white (invisible). For inner pages (lia-chrome but
   NOT .home) force the SOLID header — dark-on-light via tokens, so it also flips right in dark
   mode (var(--text)=light, var(--bg)=dark). High specificity (html prefix) beats the §13 transparent rules. */
html body.lia-chrome:not(.home) #masthead,
html body.lia-chrome:not(.home) #masthead .ast-primary-header-bar,
html body.lia-chrome:not(.home) #masthead .main-header-bar,
html body.lia-chrome:not(.home) #masthead .ast-mobile-header-wrap {
  background: var(--bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.lia-chrome:not(.home) #masthead { border-bottom: 1px solid var(--border) !important; box-shadow: none !important; }
html body.lia-chrome:not(.home) #masthead .site-title a,
html body.lia-chrome:not(.home) #masthead .ast-logo-title-inline,
html body.lia-chrome:not(.home) #masthead .site-title,
html body.lia-chrome:not(.home) #masthead .menu-link,
html body.lia-chrome:not(.home) #masthead .main-header-menu a,
html body.lia-chrome:not(.home) #masthead .menu-toggle,
html body.lia-chrome:not(.home) #masthead .menu-toggle svg {
  color: var(--text) !important; fill: var(--text) !important; text-shadow: none !important;
}
html body.lia-chrome:not(.home) #masthead .lia-bulb-bar svg,
html body.lia-chrome:not(.home) #masthead .lia-bulb-btn svg { stroke: var(--text) !important; color: var(--text) !important; }

/* ════════════ §31 · FLOATING THEME TOGGLE (FAB) — fixed bottom-right, ALWAYS visible ════════════
   The bulb left the header/menu (revamp.js now injects ONE .lia-bulb-fab on <body>). Pinned
   bottom-right on mobile + desktop so the header fade can't hide it. INVERTED surface via tokens —
   dark circle in light mode, light circle in dark — always high-contrast + auto-flips on toggle;
   the bulb glyph (svg stroke=currentColor) is the inverse of the circle. The old .lia-bulb-li /
   .lia-bulb-bar header rules are now dead (no such elements are created). */
.lia-bulb-fab {
  position: fixed !important;
  right: 22px !important;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  width: 52px !important; height: 52px !important;
  border-radius: 50% !important;
  background: var(--text) !important;     /* inverted surface — flips with the theme tokens */
  border: 0 !important;
  color: var(--bg) !important;            /* bulb = inverse of the circle (always reads) */
  box-shadow: 0 3px 12px rgba(0,0,0,.20), 0 1px 4px rgba(0,0,0,.12) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; margin: 0 !important;
  cursor: pointer !important; z-index: 2147482000 !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .2s ease, background-color .42s var(--ease), color .42s var(--ease);   /* bg/color .42s = synced theme fade; transform/shadow stay snappy for hover */
}
.lia-bulb-fab svg { width: 23px !important; height: 23px !important; min-width: 23px !important; display: block !important; stroke: currentColor !important; }
.lia-bulb-fab:hover { transform: translateY(-2px) !important; box-shadow: 0 7px 20px rgba(0,0,0,.26), 0 2px 6px rgba(0,0,0,.14) !important; }
.lia-bulb-fab:active { transform: scale(.94) !important; }
.lia-bulb-fab:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px !important; }
@media (max-width: 921px) { .lia-bulb-fab { right: 18px !important; width: 50px !important; height: 50px !important; } }

/* ════════════ §32 · middle-carousel theme fade — JS-driven, NO css transition ════════════
   The #work2 section bg is faded by cgvfx's retheme: it sets the inline background-color from the SAME
   lerp as the WebGL clear-colour each frame (then clears the inline override on completion so the
   stylesheet owns the final colour). A CSS `transition` here would fight those per-frame inline updates
   (lag → the section splits from the canvas), so there is deliberately NO transition on #work2. */

/* §33 — ABOUT avatar: static 2D character (replaced the rotating 3D head). Centred in the middle grid
   column to match template.png; mobile keeps it centred in the stacked single-column layout. */
body .lia-abt-mid { display:flex !important; align-items:flex-start; justify-content:center; }
body .lia-abt-avatar { display:block; width:auto; height:clamp(280px,27vw,380px); max-width:100%; }
@media (max-width:921px){
  body .lia-abt-mid { justify-content:center !important; margin:10px auto !important; }   /* EVEN top+bottom — paired with the JS wrapper-height reserve so the badge ring gets equal space above/below */
  body .lia-abt-col .lia-abt-body { margin-bottom:0 !important; }   /* kill the trailing 24px under the paragraph (Astra .entry-content p) so the space ABOVE the badge equals the space below it */
  body .lia-abt-avatar { height:clamp(240px,56vw,340px); }
}

/* ════════ SHOWREEL — custom lime player on a theme-aware blurred backdrop ════════ */
body .ja-reel-modal {
  position:fixed !important; inset:0 !important; z-index:2147483600 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:4vmin !important;
  background:#ffffff !important;                                                 /* light: clean material white */
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;       /* kill the Customizer's blur(16px) — clean, no greyish page-leak */
  opacity:0; visibility:hidden; transition:opacity .32s var(--ease), visibility .32s var(--ease), background-color .42s var(--ease) !important;   /* bg fades smoothly when the in-player theme toggle flips light/dark */
}
body.lia-dark .ja-reel-modal { background:#0A0A0A !important; }                 /* dark: clean material dark */
body .ja-reel-modal.is-open { opacity:1 !important; visibility:visible !important; }
body:has(.ja-reel-modal.is-open) .lia-bulb-fab { opacity:0 !important; pointer-events:none !important; }   /* hide the bulb under the player */

body .ja-reel-stage {
  /* scale with the viewport so the player is large on big displays (27"+) yet keeps breathing room;
     height-bound by 84vh*16/9 so 16:9 never letterboxes, capped 2100px so 4K doesn't upscale to mush */
  /* width formula already caps height to 84vh, so the stage is a DEFINITE 16:9 box — do NOT add
     max-height here: it makes the height indefinite, so the video's height:100% can't resolve and the
     1920×1080 reel renders at intrinsic size top-left (huge black void on a 27"). */
  position:relative; width:min(86vw, calc(84vh * 16 / 9), 2100px); aspect-ratio:16/9; line-height:0;
  border-radius:16px; overflow:hidden; background:#0A0A0A;
  box-shadow:0 30px 90px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.18);
  transform:scale(.965); transition:transform .32s var(--ease);
}
body.lia-dark .ja-reel-stage { box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
body .ja-reel-modal.is-open .ja-reel-stage { transform:scale(1); }
body .ja-reel-video { display:block; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain; background:#0A0A0A; cursor:pointer; border-radius:16px; }   /* fill the 16:9 stage. The !important max-width/height OVERRIDE the Customizer base `.ja-reel-video{max-width:1080px;max-height:82vh}` that was capping the 1920×1080 reel to 1080w → it sat in the left half with a black void on big screens. */

/* centre play */
body .ja-reel-bigplay {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:86px; height:86px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#0A0A0A; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 34px rgba(0,0,0,.42); transition:transform .2s var(--ease), opacity .25s var(--ease); z-index:3;
}
body .ja-reel-bigplay:hover { transform:translate(-50%,-50%) scale(1.07); }
body .ja-reel-bigplay svg { width:36px; height:36px; margin-left:4px; }
body .ja-reel-modal.is-playing .ja-reel-bigplay { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.6); }

/* controls overlay */
body .ja-reel-ctrl {
  position:absolute; left:0; right:0; bottom:0; z-index:4; padding:46px 18px 15px; line-height:1;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,0) 100%);
  opacity:1; transition:opacity .3s var(--ease); pointer-events:auto;
}
body .ja-reel-modal.ja-reel-idle .ja-reel-ctrl { opacity:0; }
body .ja-reel-modal.ja-reel-idle .ja-reel-video { cursor:none; }
body .ja-reel-seek { position:relative; height:5px; border-radius:4px; background:rgba(255,255,255,.22); cursor:pointer; margin-bottom:13px; }
body .ja-reel-seek .buf { position:absolute; left:0; top:0; height:100%; width:0; border-radius:4px; background:rgba(255,255,255,.22); }
body .ja-reel-seek .fill { position:absolute; left:0; top:0; height:100%; width:0; border-radius:4px; background:var(--accent); }
body .ja-reel-seek .knob { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:var(--accent); box-shadow:0 1px 5px rgba(0,0,0,.55); opacity:0; transition:opacity .18s; }
body .ja-reel-ctrl:hover .ja-reel-seek { height:6px; }
body .ja-reel-ctrl:hover .knob { opacity:1; }
body .ja-reel-row { display:flex; align-items:center; gap:13px; }
body .ja-rc-btn { background:none !important; border:none !important; color:#fff !important; cursor:pointer; padding:3px !important; display:flex; align-items:center; transition:color .15s, transform .15s; box-shadow:none !important; min-width:0 !important; }
body .ja-rc-btn:hover { color:var(--accent) !important; transform:none !important; }
body .ja-rc-btn svg { width:23px; height:23px; display:block; }
body .ja-reel-time { font:600 12.5px/1 "JetBrains Mono","Courier New",monospace; color:rgba(255,255,255,.82); letter-spacing:.02em; white-space:nowrap; }
body .ja-reel-time .cur { color:#fff; }
body .ja-reel-spacer { flex:1 1 auto; }
body a.ja-reel-dl { display:inline-flex !important; align-items:center; gap:7px; color:#fff !important; text-decoration:none !important;
  font:600 10.5px/1 Inter,-apple-system,sans-serif; text-transform:uppercase; letter-spacing:.1em;
  padding:9px 15px; border:1.5px solid rgba(255,255,255,.42); border-radius:100px; transition:background-color .15s, color .15s, border-color .15s; }
body a.ja-reel-dl:hover { background:var(--accent) !important; border-color:var(--accent) !important; color:#0A0A0A !important; }
body .ja-reel-dl svg { width:15px; height:15px; }

/* close */
body .ja-reel-close {
  position:fixed !important; top:22px !important; right:26px !important; left:auto !important; bottom:auto !important;
  z-index:2147483601 !important; width:44px !important; height:44px !important; max-width:none !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:none !important; border:none !important; -webkit-text-stroke:0 !important;
  color:var(--text) !important; font:300 30px/1 Inter,sans-serif !important; cursor:pointer !important;
  opacity:.65; transition:opacity .15s, color .15s, transform .15s !important;
}
body .ja-reel-close:hover { opacity:1 !important; color:var(--accent) !important; transform:rotate(90deg) !important; }
@media (max-width:600px){ body .ja-reel-dl span { display:none; } body .ja-reel-ctrl { padding:40px 12px 12px; } body .ja-reel-row { gap:10px; } }
@media (prefers-reduced-motion:reduce){ body .ja-reel-stage, body .ja-reel-bigplay, body .ja-reel-close { transition:none !important; } }

/* Show Reel CTA: gentle double-beat (heartbeat) pulse to invite the click. HERO only (not the
   bottom "Hit me Up"); pauses on hover/active; off for reduced-motion. */
@keyframes lia-heartbeat { 0%,42%,100%{transform:scale(1);} 10%,30%{transform:scale(1.05);} 20%{transform:scale(1);} }
body .ja-btn-primary { animation: lia-heartbeat 2.8s ease-in-out infinite; transform-origin:center; will-change:transform; }   /* Show Reel + Hit me Up both pulse */
body .ja-btn-primary:hover, body .ja-btn-primary:active { animation:none; }
@media (prefers-reduced-motion:reduce){ body .ja-btn-primary { animation:none !important; } }

/* ════════ BATCH (2026-06-09): scroll-lock · clients logos · profile pic · contact popup · mobile play ════════ */
html.lia-noscroll { overflow:hidden !important; }                 /* lock page scroll while reel/contact modal is open */
/* Always reserve the vertical scrollbar. The home's body uses `overflow:hidden auto`, so opening the
   mobile menu made the root scrollbar width change (innerWidth 406→399) and the 100vw-anchored header
   slid the hamburger ~8px LEFT. Forcing the scrollbar always-on keeps innerWidth constant → zero shift.
   (.lia-noscroll above still wins for modals; the page is tall so the bar is always there anyway.) */
html { overflow-y: scroll; }

@media (max-width:600px){                                          /* smaller centre play on phones */
  body .ja-reel-modal .ja-reel-bigplay { width:56px !important; height:56px !important; padding:0 !important; box-sizing:border-box !important; }
  body .ja-reel-bigplay svg { width:22px; height:22px; margin-left:3px; }
}

/* ── Selected Clients: grey panel + monochrome logo grid (flips on dark) ── */
body .ja-clients { background:#eeeef0 !important; }
body.lia-dark .ja-clients { background:#1E1E1E !important; }   /* §39 consolidation: was #1a1a1c (stray blue-cast) */
body .ja-clients-label { margin-bottom:54px !important; }          /* breathing room under "SELECTED CLIENTS" */
body .ja-clients-track { display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:36px 54px !important; max-width:1000px !important; margin:0 auto !important; }
body .ja-client-logo { width:clamp(108px,15vw,150px); height:46px; object-fit:contain; opacity:.9; display:block; }
/* dark logo wall: lift the inverted marks from ~56% to ~87% white so hairline/translucent marks
   (Razer, STB) clear the #1a1a1c wall. Uniform on purpose: all 9 sources are the SAME flat grey
   ~112 (verified via GD), so one brightness multiplier shifts them identically, no clipping. */
body.lia-dark .ja-client-logo { filter:invert(1) brightness(1.55); opacity:.9; }
@media (max-width:600px){ body .ja-clients-track { gap:38px 26px !important; max-width:334px !important; } body .ja-client-logo { width:22vw; max-width:86px; height:34px; } body .ja-clients-label { margin-bottom:42px !important; } }   /* more breathing room between logos: col-gap 10→26, row-gap 30→38 */

/* ── Contact: circular profile pic above the eyebrow ── */
body .ja-contact-pic { display:block; margin:0 auto 30px; width:clamp(100px,12vw,150px); height:clamp(100px,12vw,150px); border-radius:50%; object-fit:cover; box-shadow:0 8px 28px rgba(0,0,0,.18); }
body.lia-dark .ja-contact-pic { box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }

/* ── Contact popup (Hit me Up) ── */
body .ja-contact-modal { position:fixed; inset:0; z-index:2147483600; display:flex; align-items:center; justify-content:center; padding:5vmin; background:rgba(10,10,10,.5); opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s var(--ease); }
body.lia-dark .ja-contact-modal { background:rgba(0,0,0,.66); }
body .ja-contact-modal.is-open { opacity:1; visibility:visible; }
body .ja-contact-card { position:relative; width:min(440px,92vw); background:#fff; color:var(--text); border-radius:20px; padding:42px 34px 28px; box-shadow:0 30px 80px rgba(0,0,0,.32); transform:translateY(14px) scale(.98); transition:transform .28s var(--ease); }
body.lia-dark .ja-contact-card { background:#1E1E1E; box-shadow:0 30px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07); }
body .ja-contact-modal.is-open .ja-contact-card { transform:none; }
body .ja-contact-close { position:absolute; top:12px; right:14px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--text); font:300 27px/1 Inter,sans-serif; opacity:.55; cursor:pointer; transition:opacity .15s, color .15s, transform .2s; }
body .ja-contact-close:hover { opacity:1; color:var(--accent); transform:rotate(90deg); }
body .ja-contact-eyebrow { font:600 11px/1 "JetBrains Mono","Courier New",monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--text-label); margin:0 0 9px; }
body .ja-contact-title { font:600 25px/1.15 Inter,-apple-system,sans-serif; letter-spacing:-.01em; color:var(--text); margin:0 0 24px; }
body .ja-contact-list { display:flex; flex-direction:column; gap:5px; }
body a.ja-contact-row { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; text-decoration:none; color:var(--text); transition:background-color .15s; }
body a.ja-contact-row:hover { background:rgba(199,242,60,.16); }
body .ja-contact-row svg { width:21px; height:21px; color:var(--accent); flex:0 0 auto; }
body .ja-contact-row .t { font:500 15px/1.2 Inter,-apple-system,sans-serif; }
body .ja-contact-row .sub { margin-left:auto; font:600 10px/1 "JetBrains Mono","Courier New",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
body .ja-contact-socials { display:flex; gap:11px; justify-content:center; margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
body .ja-contact-socials a { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--text); border:1.5px solid var(--border); text-decoration:none; transition:background-color .15s, color .15s, border-color .15s; }
body .ja-contact-socials a:hover { background:var(--accent); border-color:var(--accent); color:#0A0A0A; }
body .ja-contact-socials svg { width:19px; height:19px; }

/* ── Popups: kill the UA dotted focus ring (it showed on the mailto row); keep a CLEAN lime ring for
   keyboard-only focus. :focus-visible is listed AFTER :focus so it wins for keyboard (equal specificity). ── */
body .ja-contact-modal a:focus, body .ja-contact-modal button:focus,
body .ja-reel-modal a:focus, body .ja-reel-modal button:focus, body .ja-reel-modal video:focus,
body a.ja-contact-row:focus, body .ja-contact-socials a:focus { outline:none !important; box-shadow:none !important; }
body a.ja-contact-row:focus-visible, body .ja-contact-socials a:focus-visible,
body .ja-reel-ctrl a:focus-visible, body .ja-reel-ctrl button:focus-visible { outline:2px solid var(--accent) !important; outline-offset:2px !important; }

/* Scroll behaviour: NORMAL native scroll. The CSS scroll-snap AND the JS section-pager were both
   removed on user request (the snap/paging felt forced + trapped the footer). Nothing to add here. */

/* ════════════ §34 · hero beat sync — 0.7s base grid: header heart 1.4s (2x, lives in Customizer,
   untouched = the metronome) · scroll bob 2.0s→2.1s (3x) · CTA pulse 2.2s→2.8s (4x, edited in place
   at §its rule above). All three re-align every 8.4s instead of drifting forever (1.4/2.0/2.2 only
   co-aligned every 77s — the "three unsynced loops" busy feel). `body` prefix = (0,2,1) beats the
   Customizer's (0,2,0) without !important; revamp.css also loads later. ════════════ */
body .ja-scroll-cue .arrow { animation-duration: 2.1s; }

/* ════════════ §35 · pill equalization — the three CTA pills measured 39/41/43px (shared padding,
   but the ghost carries a 1.5px border the primary lost to customcss border:0, and the icon variant
   flexes around a 16px svg). One flex height for all: 48px ≥ the 44px tap minimum, border-box so
   the ghost's border lives INSIDE the same box. Vertical padding zeroed (flex centers); horizontal
   padding + font metrics untouched. ════════════ */
body .ja-btn, body .ja-btn-primary, body .ja-btn-ghost {
  box-sizing: border-box !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ════════════ §36 · carousel CLS reservation — pre-book the caption margin the JS sets at boot:
   cylEl.style.marginBottom = Math.round(Y_OFFSET/6.25 * cylHeight), Y_OFFSET=2.0 → 0.32*H
   (home-photography-clean.js initSubtexts; same in cgvfx + explorations). Mirrors home.css .ja-cyl
   heights so the post-boot inline style lands on the same value (±0.5px) = zero late shift.
   Desktop only: mobile never runs initSubtexts and #work2/#work3 are display:none ≤921px.
   NO !important — the JS inline style must keep winning on live window-resize. ════════════ */
@media (min-width:1401px){
  /* .ja-cyl height:60vh; min-height:380px (home.css) → 0.32 * max(60vh,380px) */
  .ja-work-section .ja-cyl { margin-bottom: max(19.2vh, 121.6px); }
}
@media (min-width:922px) and (max-width:1400px){
  /* tablet .ja-cyl clamp 42vh / 280-430px (home.css) → ×0.32 */
  .ja-work-section .ja-cyl { margin-bottom: clamp(89.6px, 13.44vh, 137.6px); }
}

/* ════════════ §37 · entrance choreography — below-fold HTML sections (#clients, .lia-abt, .ja-cta)
   reveal on first approach (IO in revamp.js adds .lia-in). Hidden state ONLY exists under html.lia-io,
   which the SAME script adds — no JS, nothing ever hidden (FOUC-v5 philosophy) + a 2.5s reveal-all
   failsafe. Transition-based (never keyframes) so nothing collides with lia-heartbeat on the primary
   buttons. WebGL sections (.ja-work-section) deliberately never matched. ════════════ */
html.lia-io .lia-reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.lia-io .lia-reveal:not(.lia-in) { opacity: 0; transform: translateY(18px); }
html.lia-io #clients.lia-reveal .ja-client-logo { transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.lia-io #clients.lia-reveal:not(.lia-in) .ja-client-logo { opacity: 0; transform: translateY(10px); }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(2) { transition-delay: .06s; }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(3) { transition-delay: .12s; }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(4) { transition-delay: .18s; }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(5) { transition-delay: .24s; }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(6) { transition-delay: .30s; }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(7) { transition-delay: .36s; }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(8) { transition-delay: .42s; }
html.lia-io #clients.lia-reveal .ja-client-logo:nth-child(9) { transition-delay: .48s; }
html.lia-io .lia-abt.lia-reveal .lia-abt-col:nth-child(3) { transition-delay: .12s; }
html.lia-io .lia-abt.lia-reveal .lia-abt-col { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.lia-io .lia-abt.lia-reveal:not(.lia-in) .lia-abt-col { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  html.lia-io .lia-reveal, html.lia-io .lia-reveal * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ════════════ §38 · reel buffering spinner — .ja-reel-loading (set by home-reelmodal.js v13 on
   open-while-cold + 'waiting') shows a lime ring centred on the stage. z-index:2 = above the video,
   below the close/ctrl layers. Under reduced motion the ring doesn't spin — it breathes. ════════════ */
body .ja-reel-modal .ja-reel-stage::after {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body .ja-reel-modal.ja-reel-loading .ja-reel-stage::after {
  opacity: 1; animation: lia-reel-spin .9s linear infinite;
}
@keyframes lia-reel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body .ja-reel-modal.ja-reel-loading .ja-reel-stage::after {
    animation: lia-reel-breathe 1.6s ease-in-out infinite; border-top-color: var(--accent);
  }
  @keyframes lia-reel-breathe { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
}

/* ════════════ §39 · consistency + dark-lime + widows (user-approved batch, 2026-06-10) ════════════ */
/* (a) THEME SNAP: revamp.js adds html.lia-snap for 2 frames around the bulb flip and sets
   __liaFadeMs=0 — CSS transitions AND the WebGL/JS fades all collapse, so light↔dark changes in one
   consistent instant everywhere (was: body fade + instant sections + smooth footer = inconsistent). */
html.lia-snap, html.lia-snap body, html.lia-snap *, html.lia-snap *::before, html.lia-snap *::after { transition: none !important; }
/* (b) dark-lime panel REVERTED (user: "messing up") — lime stays full #C7F23C in both themes.
   The liaPanelLime helpers in photo.js v36 return constant lime; retheme handlers are no-ops. */
/* (c) WIDOWS (typography-3): balance the display headings; on phones drop the hero's hard <br> so
   the balancer owns the rag ("across" was stranding alone). Desktop keeps the authored break. */
body .ja-hero-h1, body .ja-cta h2 { text-wrap: balance; }
@media (max-width:921px){ body .ja-hero-h1 br { display:none; } }

/* ════════════ §40 · Jatin-bot chat widget v3 (lia-chat-2.js) — premium pass: avatar header,
   suggestion chips, toggle FAB, mobile bottom-sheet + scrim. Breaking changes ship under a NEW
   js filename so CDN-stale HTML always loads a consistent pair. ════════════ */
.lia-chat-fab {
  position: fixed !important; right: 22px !important;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  width: 52px !important; height: 52px !important; border-radius: 50% !important;
  background: var(--text) !important; color: var(--bg) !important;
  border: none !important; cursor: pointer !important; z-index: 9998 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.22) !important;
  transition: transform .2s var(--ease) !important;
}
.lia-chat-fab:hover { transform: scale(1.07) !important; }
.lia-chat-fab svg { width: 22px; height: 22px; }
.lia-chat-fab .lia-chat-ic-down { display: none; }
.lia-chat-fab.lia-chat-fab-open .lia-chat-ic-chat { display: none; }
.lia-chat-fab.lia-chat-fab-open .lia-chat-ic-down { display: block; }
@media (max-width: 921px) { .lia-chat-fab { right: 18px !important; width: 50px !important; height: 50px !important; bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; } }

.lia-chat-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.34); z-index: 9997; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .22s var(--ease), visibility .22s var(--ease); }
@media (max-width: 921px) { .lia-chat-scrim.lia-chat-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } }

.lia-chat-panel {
  position: fixed; right: 22px; bottom: calc(152px + env(safe-area-inset-bottom, 0px));
  width: min(384px, calc(100vw - 36px)); height: min(560px, calc(100vh - 200px));
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12), 0 28px 80px rgba(0,0,0,.26);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 9999; transform-origin: 100% 100%;
  /* hidden state: the site's FOUC reveal (body.ja-loaded > * { opacity:1 }) force-shows every
     direct body child, so opacity alone CANNOT hide this panel — visibility does the real work. */
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  transform: translateY(12px) scale(.97);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.lia-chat-panel.lia-chat-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none; }
body.lia-dark .lia-chat-panel { background: #1E1E1E; border-color: rgba(255,255,255,.10); }
@media (max-width: 921px) {
  .lia-chat-panel {
    right: 0; left: 0; bottom: 0; width: 100%;
    height: min(72vh, 620px);
    border-radius: 22px 22px 0 0; border-left: none; border-right: none; border-bottom: none;
    transform: translateY(24px);
  }
}

.lia-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 13px 16px; border-bottom: 1px solid var(--border); flex: none; }
body.lia-dark .lia-chat-head { border-bottom-color: rgba(255,255,255,.09); }
.lia-chat-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lia-chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.lia-chat-namerow { display: flex; align-items: center; gap: 7px; }
.lia-chat-name { font-family: var(--font-body); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.lia-chat-tag { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .16em; color: #0A0A0A; background: var(--accent); border-radius: 4px; padding: 2px 5px; }
.lia-chat-sub { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.lia-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #34C759; flex: none; }
.lia-chat-close { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer; color: var(--text-muted); width: 38px !important; min-width: 38px !important; height: 38px !important; flex: none !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; box-shadow: none !important; transition: background .15s var(--ease), color .15s var(--ease); }
.lia-chat-close svg { width: 17px !important; height: 17px !important; flex: none !important; }
.lia-chat-close:hover { background: var(--bg-elevated); color: var(--text); }
body.lia-dark .lia-chat-close:hover { background: rgba(255,255,255,.08); }

.lia-chat-body { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.lia-chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-family: var(--font-body); font-size: 13.8px; line-height: 1.5; overflow-wrap: break-word; animation: lia-chat-in .22s var(--ease); }
@keyframes lia-chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lia-chat-bot { align-self: flex-start; background: var(--bg-elevated); border-bottom-left-radius: 6px; }
body.lia-dark .lia-chat-bot { background: rgba(255,255,255,.07); }
.lia-chat-user { align-self: flex-end; background: var(--accent); color: #0A0A0A; border-bottom-right-radius: 6px; }
.lia-chat-msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.lia-chat-typing { display: flex; gap: 4px; padding: 13px 14px; }
.lia-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: lia-chat-dotty 1.2s ease-in-out infinite; }
.lia-chat-typing span:nth-child(2) { animation-delay: .15s; }
.lia-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lia-chat-dotty { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.lia-chat-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 14px 10px; flex: none; }
.lia-chat-chip { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; background: none !important; border: 1px solid var(--border) !important; border-radius: 100px !important; padding: 7px 13px !important; min-width: 0 !important; box-shadow: none !important; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.lia-chat-chip:hover { border-color: var(--accent); background: var(--bg-elevated); }
body.lia-dark .lia-chat-chip { border-color: rgba(255,255,255,.14); }
body.lia-dark .lia-chat-chip:hover { background: rgba(255,255,255,.06); }

.lia-chat-form { display: flex; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); flex: none; align-items: center; }
body.lia-dark .lia-chat-form { border-top-color: rgba(255,255,255,.09); }
.lia-chat-input { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; border: 1px solid var(--border) !important; border-radius: 100px !important; padding: 11px 16px !important; font-family: var(--font-body) !important; font-size: 16px; background: var(--bg) !important; color: var(--text) !important; outline: none !important; box-shadow: none !important; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); -webkit-appearance: none; }
@media (min-width: 922px) { .lia-chat-input { font-size: 13.8px; } }   /* 16px on mobile stops iOS zoom-on-focus */
.lia-chat-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(199,242,60,.25) !important; }
body.lia-dark .lia-chat-input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.lia-chat-send { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; padding: 0 !important; margin: 0 !important; flex: none !important; border-radius: 50% !important; border: none !important; background: var(--accent) !important; color: #0A0A0A !important; box-shadow: none !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .15s var(--ease), transform .15s var(--ease); }
.lia-chat-send svg { width: 19px !important; height: 19px !important; flex: none !important; }
.lia-chat-send:hover { background: var(--accent-dark) !important; transform: scale(1.05); }
.lia-chat-send:disabled { opacity: .45; cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lia-chat-panel, .lia-chat-scrim, .lia-chat-fab { transition: opacity .01s linear !important; transform: none !important; }
  .lia-chat-msg { animation: none; }
  .lia-chat-typing span { animation: none; opacity: .6; }
}

/* ============ 42. REEL VOLUME SLIDER ============
   Sits beside the mute toggle in the reel player; same palette as the seek bar
   (white-alpha track, lime fill + knob). ::before fattens the hit area to ~30px
   tall so it is draggable on touch. Slider at 0 = muted; mute button restores. */
body .ja-reel-vol { position:relative; width:84px; height:5px; border-radius:4px; background:rgba(255,255,255,.22); cursor:pointer; flex:none; }
body .ja-reel-vol::before { content:''; position:absolute; left:-8px; right:-8px; top:-13px; bottom:-13px; }
body .ja-reel-vol .vfill { position:absolute; left:0; top:0; height:100%; width:80%; border-radius:4px; background:var(--accent); }
body .ja-reel-vol .vknob { position:absolute; top:50%; left:80%; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:var(--accent); box-shadow:0 1px 5px rgba(0,0,0,.55); }
@media (max-width:600px){ body .ja-reel-vol { width:58px; } }

/* ════════════ §38 · EXPLORE CTA — the blue "fun stuff" pop button → /explore/ ════════════
   injectExploreCTA() (revamp.js) prepends a desktop <li.lia-xplore-li> with an <a.lia-xplore-cta>
   as the FIRST item of ul#ast-hf-menu-1, and inserts a small <a.lia-xplore-circle> just LEFT of
   the mobile hamburger. Deliberately BLUE (a pop colour, NOT the lime accent); a multicolour Rubik
   cube + white "fun stuff" mono label. Reads cleanly over the dark hero, the scrolled-light white
   header AND the scrolled-dark glass header. Own namespace (lia-xplore), no collisions. */
:root { --lia-xplore: #2D6BFF; --lia-xplore-strong: #1E5BFF; }

/* DESKTOP rectangular CTA — first item, inside the 56px header flex row */
body.lia-chrome #masthead .lia-xplore-li { display: flex !important; align-items: center !important; margin: 0 16px 0 0 !important; padding: 0 !important; list-style: none !important; }
body.lia-chrome #masthead .lia-xplore-cta {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  height: 34px !important; padding: 0 14px !important; border-radius: 100px !important;
  background: var(--lia-xplore) !important;
  font-family: var(--font-mono) !important; font-weight: 600 !important; font-size: 12.5px !important;
  letter-spacing: .03em !important; line-height: 1 !important; text-decoration: none !important;
  white-space: nowrap !important; border: 0 !important; box-shadow: 0 1px 3px rgba(45,107,255,.34) !important;
  transition: background-color .18s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease) !important;
}
body.lia-chrome #masthead .lia-xplore-cta:hover, body.lia-chrome #masthead .lia-xplore-cta:focus-visible {
  background: var(--lia-xplore-strong) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(45,107,255,.42) !important;
}
body.lia-chrome #masthead .lia-xplore-cta:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }
body.lia-chrome #masthead .lia-xplore-cta svg { width: 17px !important; height: 17px !important; display: block !important; flex: 0 0 auto !important; }
/* the label/glyph stay WHITE in EVERY header state — out-specify revamp's .main-header-menu a
   colour rules (up to (1,4,3) in dark-scrolled). The 5-class selectors below win on specificity. */
html body.lia-chrome #masthead .main-header-menu a.lia-xplore-cta,
html body.lia-chrome.lia-scrolled #masthead .main-header-menu a.lia-xplore-cta,
html body.lia-chrome.lia-dark #masthead .main-header-menu a.lia-xplore-cta,
html body.lia-chrome.lia-dark.lia-scrolled #masthead .main-header-menu a.lia-xplore-cta,
html body.lia-chrome #masthead .main-header-menu a.lia-xplore-cta:hover,
html body.lia-chrome #masthead .main-header-menu a.lia-xplore-cta .lia-xplore-label { color: #FFFFFF !important; }

/* MOBILE circle — icon only, left of the hamburger */
body.lia-chrome #masthead .lia-xplore-circle {
  display: none; align-items: center; justify-content: center;
  width: 38px !important; height: 38px !important; margin: 0 12px 0 0 !important; padding: 0 !important;
  border-radius: 50% !important; background: var(--lia-xplore) !important; text-decoration: none !important;
  border: 0 !important; box-shadow: 0 1px 4px rgba(45,107,255,.36) !important; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s var(--ease), transform .15s var(--ease) !important;
}
body.lia-chrome #masthead .lia-xplore-circle:active { transform: scale(.93) !important; }
body.lia-chrome #masthead .lia-xplore-circle svg { width: 20px !important; height: 20px !important; display: block !important; }

/* Responsive split: rectangle on desktop only, circle on mobile only (921/922 = home breakpoint) */
@media (max-width: 921px) {
  body.lia-chrome #masthead .lia-xplore-li { display: none !important; }
  body.lia-chrome #masthead .lia-xplore-circle { display: inline-flex !important; }
}
@media (min-width: 922px) {
  body.lia-chrome #masthead .lia-xplore-circle { display: none !important; }
}
/* cube icon −30% on mobile (38→27 circle, 20→14 cube) — matches /funstuff/ */
@media (max-width: 921px) {
  body.lia-chrome #masthead .lia-xplore-circle { width: 27px !important; height: 27px !important; }
  body.lia-chrome #masthead .lia-xplore-circle .lia-rk { font-size: 14px !important; }
  body.lia-chrome #masthead .lia-xplore-circle svg { width: 14px !important; height: 14px !important; }
}

/* §38b — 3D rotating Rubik cube (replaces the flat SVG on the fun-stuff CTA + mobile circle) ──────
   em-sized: cube edge = font-size on .lia-rk. perspective on the wrapper; preserve-3d on the cube. */
body.lia-chrome .lia-rk{display:inline-block !important;flex:none;line-height:0;perspective:6em;width:1em;height:1em;font-size:17px}
body.lia-chrome .lia-xplore-circle .lia-rk{font-size:20px}
body.lia-chrome .lia-rk .rk-cube{position:relative;display:block;width:1em;height:1em;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-30deg);animation:rk-tumble 7s linear infinite}
body.lia-chrome .lia-rk .rk-f{position:absolute;inset:0;border-radius:.18em;background:var(--c);box-shadow:inset 0 0 0 .03em rgba(0,0,0,.22)}
/* the header's "body.home #masthead * {background:transparent}" rule (id-spec 1,1,1) was
   clobbering the cube faces (0,3,1) → faces went see-through. Out-specify with #masthead + !important. */
body.lia-chrome #masthead .lia-rk .rk-f{background:var(--c) !important}
body.lia-chrome .lia-rk .rk-front {--c:#C7F23C;transform:translateZ(.5em)}
body.lia-chrome .lia-rk .rk-back  {--c:#51CF66;transform:rotateY(180deg) translateZ(.5em)}
body.lia-chrome .lia-rk .rk-right {--c:#2D6BFF;transform:rotateY(90deg)  translateZ(.5em)}
body.lia-chrome .lia-rk .rk-left  {--c:#FF4D4D;transform:rotateY(-90deg) translateZ(.5em)}
body.lia-chrome .lia-rk .rk-top   {--c:#FFD43B;transform:rotateX(90deg)  translateZ(.5em)}
body.lia-chrome .lia-rk .rk-bottom{--c:#FF922B;transform:rotateX(-90deg) translateZ(.5em)}
@keyframes rk-tumble{0%{transform:rotateX(-24deg) rotateY(0deg)}100%{transform:rotateX(-24deg) rotateY(360deg)}}
body.lia-chrome .lia-xplore-cta:hover .rk-cube,body.lia-chrome .lia-xplore-circle:hover .rk-cube{animation-duration:1.6s}
@media(prefers-reduced-motion:reduce){body.lia-chrome .lia-rk .rk-cube{animation:none;transform:rotateX(-24deg) rotateY(-32deg)}}

/* mobile: the injected circle sits LEFT of the hamburger, vertically centred (the Astra .ast-button-wrap
   was a plain block, so the circle stacked ABOVE the toggle — force it to a centred flex row) */
body.lia-chrome #ast-mobile-header .ast-button-wrap{display:flex !important;flex-direction:row !important;align-items:center !important}

/* §38c — keep the fun-stuff label lowercase (match the /funstuff page; the Astra menu forces uppercase) */
body.lia-chrome #masthead .lia-xplore-cta, body.lia-chrome #masthead .lia-xplore-cta .lia-xplore-label{text-transform:none !important}

/* ════════════ §41 · HOME MOBILE — STANDALONE right-slide drawer (exact /funstuff/ parity) ════════════
   The earlier approach repositioned Astra's in-#masthead .main-navigation, but #masthead's fixed
   z-999/z-100 sub-contexts trapped it: the scrim grey-drowned the panel, and lifting #masthead floated
   the LOGO + cube + X on TOP of the white panel. Funstuff's drawer is a STANDALONE <nav> that's a sibling
   of the header, layered header z-100 < scrim z-1100 < drawer z-1200 — so the scrim DIMS the logo and the
   drawer cleanly covers it. We mirror that: revamp.js initHomeDrawer() injects .lia-home-scrim +
   .lia-home-drawer (the menu links cloned from #ast-hf-mobile-menu + a 'fun stuff' cube CTA); both are
   driven by body.ast-main-header-nav-open (same open/close wiring Astra already fires). The native
   Astra dropdown is hidden while open. ≤921px only; desktop untouched. */
@media (max-width:921px){
  /* hide Astra's native dropdown — our standalone drawer replaces it (kills the §22 white surface too) */
  html body.lia-chrome.ast-main-header-nav-open #masthead .ast-mobile-header-content{ display:none!important; }
  /* scrim — z-1100, ABOVE the z-100 header so the logo/cube/X dim under it (matches funstuff) */
  body.lia-chrome .lia-home-scrim{
    position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.46);
    opacity:0; pointer-events:none; transition:opacity .26s cubic-bezier(.4,0,.2,1);
  }
  body.lia-chrome.ast-main-header-nav-open .lia-home-scrim{ opacity:1; pointer-events:auto; }
  /* drawer — z-1200, slides in from the right */
  body.lia-chrome .lia-home-drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:1200;
    width:min(82vw,330px); background:#FFFFFF; border-left:1px solid #E2E4E7;
    padding:74px 0 24px; display:flex; flex-direction:column; overflow-y:auto;
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1), background-color .25s linear;
    box-shadow:-14px 0 44px rgba(0,0,0,.22);
  }
  body.lia-chrome.lia-dark .lia-home-drawer{ background:#121212; border-left-color:rgba(255,255,255,.08); }
  body.lia-chrome.ast-main-header-nav-open .lia-home-drawer{ transform:none; }
  /* menu links */
  body.lia-chrome .lia-home-drawer > a{
    font-family:var(--font-mono,'JetBrains Mono',monospace); font-weight:500; font-size:14px;
    letter-spacing:.05em; text-transform:uppercase; padding:16px 30px; text-decoration:none;
    border-bottom:1px solid #EEE; display:flex; align-items:center; gap:10px; color:#16181C;
    transition:color .15s, background-color .15s;
  }
  body.lia-chrome.lia-dark .lia-home-drawer > a{ color:#E8EAED; border-bottom-color:rgba(255,255,255,.07); }
  body.lia-chrome .lia-home-drawer > a:hover{ color:var(--accent-dark,#5a8a00); }
  body.lia-chrome.lia-dark .lia-home-drawer > a:hover{ color:var(--accent,#C7F23C); }
  /* 'fun stuff' CTA — blue, lowercase, 3D cube (matches funstuff .xp-drawer-cta) */
  body.lia-chrome .lia-home-drawer .lia-home-drawer-cta{
    color:var(--lia-xplore,#2D6BFF); text-transform:none; font-weight:600; border-bottom:0; margin-top:8px;
  }
  body.lia-chrome .lia-home-drawer .lia-home-drawer-cta .lia-rk{ font-size:18px; }
  body.lia-chrome .lia-home-drawer .lia-rk .rk-f{ background:var(--c)!important; }  /* cube faces opaque outside #masthead */
  /* close ✕ inside the drawer top-right — Astra's burger→✕ is hidden behind the z-1200 panel when open */
  body.lia-chrome .lia-home-drawer-close{
    position:absolute; top:14px; right:14px; width:42px; height:42px;
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:0; padding:0; cursor:pointer; color:#16181C;
    -webkit-tap-highlight-color:transparent; transition:color .15s;
  }
  body.lia-chrome.lia-dark .lia-home-drawer-close{ color:#E8EAED; }
  body.lia-chrome .lia-home-drawer-close svg{ width:24px; height:24px; }
}
@media (min-width:922px){ body.lia-chrome .lia-home-drawer, body.lia-chrome .lia-home-scrim{ display:none!important; } }

/* Override Astra's inline current-menu-item color for hash links on the home page */
html body.lia-chrome.home:not(.lia-scrolled) #masthead .menu-item.current-menu-item .menu-link { color: #FFFFFF !important; }

/* FIX ASTRA LIME INJECTION ON CURRENT-MENU-ITEM (IN-PAGE LINKS ON HOME PAGE) */
html body.lia-chrome.home.lia-scrolled .site-header .menu-item.current-menu-item .menu-link,
html body.lia-chrome.home.lia-scrolled #ast-mobile-header .menu-item.current-menu-item .menu-link,
html body.lia-chrome.home.is-scrolled .site-header .menu-item.current-menu-item .menu-link,
html body.lia-chrome.home.is-scrolled #ast-mobile-header .menu-item.current-menu-item .menu-link {
  color: var(--text-muted) !important;
  background-color: transparent !important;
}
html body.lia-chrome.home.lia-scrolled.lia-dark .site-header .menu-item.current-menu-item .menu-link,
html body.lia-chrome.home.lia-scrolled.lia-dark #ast-mobile-header .menu-item.current-menu-item .menu-link,
html body.lia-chrome.home.is-scrolled.lia-dark .site-header .menu-item.current-menu-item .menu-link,
html body.lia-chrome.home.is-scrolled.lia-dark #ast-mobile-header .menu-item.current-menu-item .menu-link {
  color: #F5F5F5 !important;
}
html body.lia-chrome.home .menu-item.current-menu-item .menu-link:hover {
  color: var(--accent) !important;
}
html body.lia-chrome.home #ast-mobile-header .menu-item.current-menu-item .menu-link {
  color: var(--text) !important;
  background-color: transparent !important;
}
html body.lia-chrome.home:not(.lia-scrolled) #ast-mobile-header .menu-item.current-menu-item .menu-link {
  color: #FFFFFF !important;
}

/* ABSOLUTE FORCE OVERRIDE FOR ASTRA CURRENT MENU ITEM LIME COLOR INJECTION */
html body.lia-chrome.home .main-header-menu .menu-item.current-menu-item > a.menu-link,
html body.lia-chrome.home #ast-hf-mobile-menu .menu-item.current-menu-item > a.menu-link,
html body.lia-chrome.home .ast-builder-menu .menu-item.current-menu-item > a.menu-link {
  color: var(--text-muted) !important;
  background-color: transparent !important;
}

html body.lia-chrome.home.lia-dark .main-header-menu .menu-item.current-menu-item > a.menu-link,
html body.lia-chrome.home.lia-dark #ast-hf-mobile-menu .menu-item.current-menu-item > a.menu-link,
html body.lia-chrome.home.lia-dark .ast-builder-menu .menu-item.current-menu-item > a.menu-link {
  color: #F5F5F5 !important;
  background-color: transparent !important;
}

html body.lia-chrome.home:not(.lia-scrolled) .main-header-menu .menu-item.current-menu-item > a.menu-link,
html body.lia-chrome.home:not(.lia-scrolled) #ast-hf-mobile-menu .menu-item.current-menu-item > a.menu-link,
html body.lia-chrome.home:not(.lia-scrolled) .ast-builder-menu .menu-item.current-menu-item > a.menu-link {
  color: #FFFFFF !important;
}

html body.lia-chrome.home .main-header-menu .menu-item.current-menu-item > a.menu-link:hover,
html body.lia-chrome.home #ast-hf-mobile-menu .menu-item.current-menu-item > a.menu-link:hover,
html body.lia-chrome.home .ast-builder-menu .menu-item.current-menu-item > a.menu-link:hover {
  color: var(--accent) !important;
}

/* Specific targeting of Astra's inline color injection ID */
#ast-hf-menu-1 .menu-item.current-menu-item .menu-link {
  color: var(--text-muted) !important;
}
html body.lia-chrome.home.lia-dark #ast-hf-menu-1 .menu-item.current-menu-item .menu-link {
  color: #F5F5F5 !important;
}
html body.lia-chrome.home:not(.lia-scrolled) #ast-hf-menu-1 .menu-item.current-menu-item .menu-link {
  color: #FFFFFF !important;
}
html body.lia-chrome.home #ast-hf-menu-1 .menu-item.current-menu-item .menu-link:hover {
  color: var(--accent) !important;
}

@media (min-width:922px){
  html body.lia-chrome.home #masthead .ast-primary-header-bar,
  html body.lia-chrome.home #masthead .main-header-bar{
    height:64px!important;
    min-height:64px!important;
    display:flex!important;
    align-items:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body.lia-chrome.home #masthead .site-primary-header-wrap.ast-container,
  html body.lia-chrome.home #masthead .site-primary-header-wrap{
    width:100%!important;
    max-width:min(1760px,88vw)!important;
    height:44px!important;
    min-height:44px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:clamp(20px,4vw,40px)!important;
    padding-right:clamp(20px,4vw,40px)!important;
    box-sizing:border-box!important;
  }
  html body.lia-chrome.home #masthead .ast-builder-grid-row{
    height:44px!important;
    min-height:44px!important;
    align-items:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body.lia-chrome.home #masthead .site-branding{
    padding-top:0!important;
    padding-bottom:0!important;
  }
  html body.lia-chrome.home #masthead .site-title a{
    transform:translateY(-1px)!important;
  }
  html body.lia-chrome.home #masthead .main-header-menu,
  html body.lia-chrome.home #masthead .main-header-menu > .menu-item,
  html body.lia-chrome.home #masthead .main-header-menu > .menu-item > .menu-link{
    height:44px!important;
    min-height:44px!important;
    line-height:17.856px!important;
    display:inline-flex!important;
    align-items:center!important;
  }
  html body.lia-chrome.home #masthead .lia-xplore-li{
    margin-right:0!important;
  }
}