/* =========================================================
     TIDEWATER DESIGN TOKENS
     ========================================================= */
  :root {
    /* Light (Tidewater Day) */
    --bg:        #C9DDD7;
    --surface:   #D7E5E0;
    --surface-2: #B0C7C0;
    --text:      #102222;
    --muted:     #4F6361;
    --border:    #A6BCB5;
    --accent:    #2A8B83;
    --accent-hover: #1F6E68;
    --accent-text: #FFFFFF;
    --success: #4A7A52;
    --warning: #A87B24;
    --error:   #984037;
    --shadow:  0 1px 2px rgba(16,34,34,0.06), 0 4px 12px rgba(16,34,34,0.04);

    --font-heading: 'Cormorant Garamond', Garamond, Georgia, serif;
    --font-body:    'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono:    "SF Mono", Consolas, Menlo, monospace;
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
  }
  [data-theme="dark"] {
    --bg:        #14283A;
    --surface:   #1D3447;
    --surface-2: #264258;
    --text:      #DCE6E7;
    --muted:     #8395A0;
    --border:    #2C4358;
    --accent:    #5FCFC8;
    --accent-hover: #7CDDD7;
    --accent-text: #102222;
    --success: #6FAB78;
    --warning: #DBA763;
    --error:   #D26B61;
    --shadow:  0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.25);
  }

  /* RESET + BASE */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.55;
    transition: background-color 200ms, color 200ms;
  }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
  code, .mono { font-family: var(--font-mono); font-size: 0.9em; color: var(--muted); }
  h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; margin: 0; }

  /* =========================================================
     PAGE CHROME
     ========================================================= */

  /* ----------------------------------------------------------
     DARK-CHROME HEADER — TWO TONES
     The site's top chrome (topbar + primary nav) always renders
     in a "darker than body" palette, but the exact tone differs
     per theme so the light and dark versions remain visually
     distinct:
       · Light body → Tidewater Dusk (softer slate-teal)
       · Dark body  → Tidewater Night (full navy)
     The mega-menu inherits this scope intentionally so dropdowns
     feel like a continuation of the nav.
     ---------------------------------------------------------- */

  /* Light theme — Tidewater Mist (medium slate-teal, clearly lifted) */
  .topbar,
  .nav-a {
    --bg:        #4A6770;
    --surface:   #54727A;
    --surface-2: #5F7D86;
    --text:      #F0F5F6;
    --muted:     #C3CED2;
    --border:    #708890;
    --accent:    #5FCFC8;
    color: #F0F5F6;
  }
  /* Dark theme — Tidewater Night (deeper, dramatic) */
  [data-theme="dark"] .topbar,
  [data-theme="dark"] .nav-a {
    --bg:        #14283A;
    --surface:   #1D3447;
    --surface-2: #264258;
    --text:      #DCE6E7;
    --muted:     #8395A0;
    --border:    #2C4358;
    --accent:    #5FCFC8;
    color: #DCE6E7;
  }

  /* Topbar — light theme (Mist) */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background:
      linear-gradient(180deg,
        #4A6770 0%,
        #506E78 100%);
    border-bottom: 1px solid #708890;
    box-shadow:
      0 1px 0 0 color-mix(in srgb, #5FCFC8 28%, transparent),
      0 10px 24px -16px rgba(20, 40, 58, 0.22);
    backdrop-filter: saturate(120%);
  }
  /* Topbar — dark theme (Night) */
  [data-theme="dark"] .topbar {
    background:
      linear-gradient(180deg,
        #14283A 0%,
        #182D40 100%);
    border-bottom: 1px solid #2C4358;
    box-shadow:
      0 1px 0 0 color-mix(in srgb, #5FCFC8 22%, transparent),
      0 10px 24px -16px rgba(0, 0, 0, 0.35);
  }
  .topbar .wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 16px; padding-bottom: 16px;
  }
  .topbar .brand { display: flex; align-items: center; gap: 12px; }
  .topbar .brand img { width: 36px; height: auto; }
  .topbar .brand .wm { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: 0.01em; }

  /* ============== BRAND-MARK LINK ==============
     The logo grows slightly and gets a soft glow that stays while
     hovered. The matte sheen is masked by the logo's own alpha
     channel so it only crosses the visible mark — never the empty
     bounding box. No rotation, no distortion, no square shadow. */
  a.brand-link,
  a.brand-link:visited {
    display: inline-flex; align-items: center; gap: inherit;
    text-decoration: none; color: inherit;
  }
  a.brand-link .logo-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
  }
  /* Logo lifts 2px on hover — translation only, no raster resampling. */
  a.brand-link .logo-wrap {
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  a.brand-link .logo-wrap img {
    display: block;
  }
  a.brand-link .wm,
  a.brand-link .wm .amp {
    transition: color 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  a.brand-link:hover .logo-wrap { transform: translateY(-2px); }
  a.brand-link:hover .wm { color: var(--accent); }

  /* Sheen mask — the logo's alpha clips the wash so it only appears
     on the visible mark, not the wordmark and not the bounding box.
     A CSS animation runs ONCE per hover (not a transition), so it
     plays forward to completion and doesn't reverse on un-hover. */
  a.brand-link .sheen-mask {
    position: absolute; inset: 0;
    -webkit-mask: url('catalyst-logo.png') center / contain no-repeat;
            mask: url('catalyst-logo.png') center / contain no-repeat;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
  }
  a.brand-link .sheen-mask::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--text) 8%, transparent) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  @keyframes brand-sheen-sweep {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
  }
  a.brand-link:hover .sheen-mask::before {
    animation: brand-sheen-sweep 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  a.brand-link:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px;
  }
  .topbar .toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border);
    font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text);
  }
  .topbar .toggle:hover { background: var(--surface-2); }

  .hero {
    padding: 72px 0 56px; border-bottom: 1px solid var(--border);
  }
  .hero .tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
  .hero h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; }
  .hero p { font-size: 17px; color: var(--muted); margin: 0; max-width: 760px; }

  section.sec { padding: 64px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 24px; }
  html { scroll-behavior: smooth; }
  section.sec:last-of-type { border-bottom: none; }
  .sec-head { margin-bottom: 32px; }
  .sec-head .num { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
  .sec-head h2 { font-size: 38px; letter-spacing: -0.015em; margin: 0 0 12px; }
  .sec-head p { color: var(--muted); margin: 0; font-size: 15px; max-width: 720px; }

  .demo {
    background: var(--surface);
    border: 1.5px solid var(--border); border-radius: var(--radius-lg);
    padding: 32px; margin-bottom: 24px;
    box-shadow: 0 0 0 0 transparent;
    transition: border-color 280ms cubic-bezier(.2,.7,.2,1),
                box-shadow 360ms cubic-bezier(.2,.7,.2,1),
                background-color 280ms;
  }
  .demo:hover, .demo:focus-within {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
      0 12px 32px -12px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .demo + .demo { margin-top: 0; }
  .demo-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
  .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .row + .row { margin-top: 14px; }
  .col { display: flex; flex-direction: column; gap: 12px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 800px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }

  /* =========================================================
     1 — BUTTONS · three dynamic variants
     ========================================================= */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1;
    border: 1px solid transparent;
    cursor: pointer; text-decoration: none; user-select: none;
    position: relative; overflow: hidden;
    isolation: isolate;
  }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn .icon { width: 16px; height: 16px; flex: 0 0 16px; transition: transform 280ms cubic-bezier(.2,.7,.2,1); }
  .btn-sm { padding: 8px 14px; font-size: 12.5px; }
  .btn-lg { padding: 15px 30px; font-size: 15px; }
  .btn-block { width: 100%; }
  .icon { width: 16px; height: 16px; flex: 0 0 16px; }

  /* -----------------------------------------------------------
     VARIANT A — SOLID LIFT
     Solid fill, soft shadow that grows on hover.
     Press dips by 1px. Most premium / "luxury" feel.
     -----------------------------------------------------------*/
  .btn-a {
    border-radius: 10px;
    transition: transform 180ms cubic-bezier(.2,.7,.2,1),
                box-shadow 220ms cubic-bezier(.2,.7,.2,1),
                background-color 160ms,
                border-color 160ms,
                color 160ms;
    box-shadow: 0 1px 2px rgba(16,34,34,0.06);
  }
  .btn-a.primary { background: var(--accent); color: var(--accent-text); }
  .btn-a.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent) 65%, transparent),
                0 2px 4px rgba(16,34,34,0.06);
    background: var(--accent-hover);
  }
  .btn-a.primary:hover:not(:disabled) .icon { transform: translateX(2px); }
  .btn-a.primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(16,34,34,0.06); }

  .btn-a.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
  .btn-a.secondary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(16,34,34,0.18);
    background: var(--surface-2);
  }

  .btn-a.ghost { background: transparent; color: var(--text); border-color: var(--border); }
  .btn-a.ghost:hover:not(:disabled) { background: var(--surface-2); }

  /* -----------------------------------------------------------
     VARIANT B — SLIDE FILL (pill)
     Pill shape. Outlined by default; accent slides in from the
     left on hover, like a door opening. Most distinctive.
     -----------------------------------------------------------*/
  .btn-b {
    border-radius: 999px;
    background: transparent; color: var(--accent);
    border: none;
    transition: color 220ms cubic-bezier(.2,.7,.2,1);
  }
  /* Slide-in gradient fill */
  .btn-b::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    border-radius: 999px;
    transform: translateX(-101%);
    transition: transform 360ms cubic-bezier(.65,.05,.36,1);
    z-index: -2;
  }
  /* Gradient outline ring — hidden at rest, slides in alongside the fill
     so the entire pill (outline + fill) builds itself on hover. */
  .btn-b.primary::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 999px;
    padding: 1.5px;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    -webkit-mask:
      linear-gradient(#fff, #fff) content-box,
      linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff, #fff) content-box,
      linear-gradient(#fff, #fff);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    transform: translateX(-101%);
    transition: transform 360ms cubic-bezier(.65,.05,.36,1);
  }
  .btn-b.primary:hover:not(:disabled) { color: #FFFFFF; }
  .btn-b.primary:hover:not(:disabled)::before,
  .btn-b.primary:hover:not(:disabled)::after { transform: translateX(0); }
  .btn-b.primary:hover:not(:disabled) .icon { transform: translateX(3px); }
  .btn-b.primary:active:not(:disabled) { transform: scale(0.98); }

  /* Secondary — borderless at rest, ink-colored ring + ink fill
     slide in together on hover. */
  .btn-b.secondary { color: var(--text); border: none; }
  .btn-b.secondary::before { background: var(--text); }
  .btn-b.secondary::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 999px;
    padding: 1.5px;
    background: var(--text);
    -webkit-mask:
      linear-gradient(#fff, #fff) content-box,
      linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff, #fff) content-box,
      linear-gradient(#fff, #fff);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    transform: translateX(-101%);
    transition: transform 360ms cubic-bezier(.65,.05,.36,1);
  }
  .btn-b.secondary:hover:not(:disabled) { color: var(--bg); }
  .btn-b.secondary:hover:not(:disabled)::before,
  .btn-b.secondary:hover:not(:disabled)::after { transform: translateX(0); }

  /* Ghost — borderless at rest, muted ring + surface fill slide in. */
  .btn-b.ghost { color: var(--muted); border: none; }
  .btn-b.ghost::before { background: var(--surface-2); }
  .btn-b.ghost::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 999px;
    padding: 1.5px;
    background: var(--border);
    -webkit-mask:
      linear-gradient(#fff, #fff) content-box,
      linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff, #fff) content-box,
      linear-gradient(#fff, #fff);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    transform: translateX(-101%);
    transition: transform 360ms cubic-bezier(.65,.05,.36,1);
  }
  .btn-b.ghost:hover:not(:disabled) { color: var(--text); }
  .btn-b.ghost:hover:not(:disabled)::before,
  .btn-b.ghost:hover:not(:disabled)::after { transform: translateX(0); }

  /* -----------------------------------------------------------
     VARIANT C — ARCHITECTURAL WEDGE
     Sharp corners. A thin accent bar on the left grows wider
     on hover (drafted / blueprint feel). Letter-spacing tightens.
     -----------------------------------------------------------*/
  .btn-c {
    border-radius: 2px;
    letter-spacing: 0.04em;
    padding-left: 26px;
    transition: padding-left 220ms cubic-bezier(.2,.7,.2,1),
                background-color 200ms,
                color 200ms,
                border-color 200ms;
  }
  .btn-c::before {
    content: ""; position: absolute; top: 0; left: 0; bottom: 0;
    width: 4px; background: var(--accent);
    transition: width 220ms cubic-bezier(.2,.7,.2,1);
  }
  .btn-c.primary { background: var(--text); color: var(--bg); }
  .btn-c.primary:hover:not(:disabled) {
    padding-left: 34px;
    background: var(--accent);
    color: var(--accent-text);
  }
  .btn-c.primary:hover:not(:disabled)::before { width: 10px; background: var(--text); }
  .btn-c.primary:hover:not(:disabled) .icon { transform: translateX(2px); }
  .btn-c.primary:active:not(:disabled) { padding-left: 30px; }

  .btn-c.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
  .btn-c.secondary:hover:not(:disabled) { padding-left: 34px; border-color: var(--accent); color: var(--accent); }
  .btn-c.secondary:hover:not(:disabled)::before { width: 10px; }

  .btn-c.ghost { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
  .btn-c.ghost::before { background: var(--muted); }
  .btn-c.ghost:hover:not(:disabled) { color: var(--text); padding-left: 34px; }
  .btn-c.ghost:hover:not(:disabled)::before { width: 10px; background: var(--accent); }

  /* Locked CTA family — same Glass Pane gradient + dynamic feel as the nav CTA and burger.
     Used by .btn-primary throughout the page (modal, forms, hero CTAs). */
  .btn-primary, .btn-secondary, .btn-ghost {
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
    border: 1.5px solid transparent;
    position: relative; overflow: hidden;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1),
                filter 200ms, color 200ms, background 200ms, border-color 200ms;
  }
  .btn-primary {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF; border: none;
    box-shadow: 0 2px 4px rgba(16,34,34,0.08),
                0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  /* Soft sweep highlight */
  .btn-primary::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 4px 8px rgba(16,34,34,0.10),
                0 14px 36px -10px color-mix(in srgb, var(--accent) 75%, transparent);
    filter: saturate(1.1);
  }
  .btn-primary:hover:not(:disabled)::before { left: 130%; }
  .btn-primary:hover:not(:disabled) .icon { transform: translateX(3px); }
  .btn-primary:active:not(:disabled) { transform: translateY(0) scale(1); }

  .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
  .btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text); }
  .btn-ghost { background: transparent; color: var(--muted); border-color: transparent; }
  .btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }

  /* =========================================================
     2 — FORM INPUTS
     ========================================================= */
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field label {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;
    padding-left: 4px;
  }
  .field .hint { font-size: 12px; color: var(--muted); padding-left: 4px; }
  .field .err  { font-size: 12px; color: var(--error); padding-left: 4px; font-weight: 600; }

  /* =====================================================================
     INPUT · TEXTAREA · SELECT — share the CTA family's visual language:
     12px radius (matches the burger), 1.5px border, accent border + glow
     on hover, deeper glow + 1px lift on focus, white sweep on focus.
     ===================================================================== */
  .input, .textarea, .select {
    font-family: var(--font-body); font-size: 14px; color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 13px 16px;
    width: 100%;
    position: relative;
    transition: border-color 240ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms cubic-bezier(.2,.7,.2,1),
                background 280ms,
                transform 240ms cubic-bezier(.2,.7,.2,1);
  }
  .input::placeholder, .textarea::placeholder { color: var(--muted); font-weight: 400; }

  /* Hover — border lights to accent + soft accent glow (same language
     as checkbox/radio/dropdown hover) */
  .input:hover:not(:disabled):not(.error),
  .textarea:hover:not(:disabled):not(.error),
  .select:hover:not(:disabled):not(.error) {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  /* Focus — border accent, stronger glow, slight lift, background shifts
     toward the surface so the field reads as "active" */
  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
                0 6px 18px -8px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .input:disabled, .textarea:disabled, .select:disabled {
    opacity: 0.5; cursor: not-allowed;
    background: var(--surface);
  }

  /* Error state — error border + matching error-tinted glow */
  .input.error, .textarea.error, .select.error {
    border-color: var(--error);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 14%, transparent);
  }
  .input.error:focus, .textarea.error:focus, .select.error:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 24%, transparent),
                0 6px 18px -8px color-mix(in srgb, var(--error) 45%, transparent);
  }

  .textarea { resize: vertical; min-height: 120px; line-height: 1.55; }

  /* Select — custom rounded caret in the brand accent.
     Caret rotates 180° while the select is focused (open). */
  .select {
    appearance: none; -webkit-appearance: none;
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%232A8B83' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    transition: border-color 240ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms cubic-bezier(.2,.7,.2,1),
                background 280ms,
                background-position 280ms cubic-bezier(.2,.7,.2,1),
                transform 240ms cubic-bezier(.2,.7,.2,1);
  }
  .select:hover:not(:disabled):not(.error) {
    background-position: right 13px center;
  }
  .select:focus { background-position: right 16px center; }

  /* =========================================================
     CHECKBOX · RADIO · SWITCH — share the CTA family's
     Glass Pane gradient, soft accent glow, and lift behavior
     ========================================================= */
  .check, .radio, .switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: 14px; }
  .check input, .radio input, .switch input { position: absolute; opacity: 0; pointer-events: none; }

  /* Box + radio dot — base */
  .check .box, .radio .dot {
    width: 20px; height: 20px; background: var(--bg);
    border: 1.5px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: background 220ms cubic-bezier(.2,.7,.2,1),
                border-color 220ms, transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1);
  }
  .check .box { border-radius: 6px; }
  .radio .dot { border-radius: 50%; }

  /* Hover (unchecked) — border lights up, soft glow */
  .check:hover .box, .radio:hover .dot {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  /* Checked state — fill with the Glass Pane gradient, lift slightly,
     emit the same accent-tinted glow used on the CTA family. */
  .check input:checked + .box {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    border-color: transparent;
    transform: scale(1.06);
    box-shadow: 0 2px 4px rgba(16,34,34,0.06),
                0 6px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  /* Checkmark — animates in (scales + draws) */
  .check input:checked + .box::after {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg) translate(-1px, -1.5px);
    animation: checkPop 280ms cubic-bezier(.2,.7,.2,1);
  }
  @keyframes checkPop {
    from { transform: rotate(45deg) translate(-1px, -1.5px) scale(0); opacity: 0; }
    to   { transform: rotate(45deg) translate(-1px, -1.5px) scale(1); opacity: 1; }
  }

  /* Radio checked — outer ring becomes accent, inner dot is gradient */
  .radio input:checked + .dot {
    border-color: var(--accent);
    box-shadow: 0 2px 4px rgba(16,34,34,0.06),
                0 4px 10px -2px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .radio input:checked + .dot::after {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    animation: dotPop 280ms cubic-bezier(.2,.7,.2,1);
  }
  @keyframes dotPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  /* Focus rings */
  .check input:focus-visible + .box, .radio input:focus-visible + .dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  /* Switch — off state */
  .switch .track {
    position: relative; width: 44px; height: 24px;
    background: var(--surface-2); border-radius: 999px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: background 320ms cubic-bezier(.2,.7,.2,1),
                border-color 280ms,
                box-shadow 320ms cubic-bezier(.2,.7,.2,1);
  }
  /* Soft sweep highlight (mirrors the CTA buttons) — only visible when on */
  .switch .track::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  /* Thumb */
  .switch .track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16,34,34,0.12), 0 2px 6px -1px rgba(16,34,34,0.08);
    transition: transform 320ms cubic-bezier(.4,1.4,.5,1),
                box-shadow 280ms,
                width 280ms cubic-bezier(.2,.7,.2,1);
  }
  /* Switch hover (off) — track border lifts to accent */
  .switch:hover .track { border-color: var(--accent); }
  .switch:hover .track::after { width: 22px; }   /* squish nudge */

  /* Switch ON state — track becomes Glass Pane gradient, glows, sweep crosses */
  .switch input:checked + .track {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(16,34,34,0.08),
                0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .switch input:checked + .track::before { left: 130%; }
  .switch input:checked + .track::after {
    transform: translateX(20px);
    width: 18px;
    box-shadow: 0 1px 2px rgba(16,34,34,0.16), 0 3px 8px -1px rgba(16,34,34,0.12);
  }
  .switch input:focus-visible + .track {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  /* =========================================================
     DROPDOWN — toggle reads like a quieter member of the CTA
     family; menu animates in, items get the nav-link treatment
     ========================================================= */
  .dropdown { position: relative; display: inline-block; z-index: 1; }
  .dropdown.open { z-index: 100; }
  .dropdown-menu { z-index: 100; }
  .dropdown-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 22px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
    background: transparent; color: var(--text);
    border: 1.5px solid var(--border); border-radius: 999px;
    cursor: pointer; position: relative; overflow: hidden;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1),
                color 200ms, border-color 200ms, background 280ms;
  }
  /* Sweep highlight — only fires when open */
  .dropdown-toggle::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .dropdown-toggle .caret {
    width: 10px; height: 6px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
  }
  .dropdown-toggle::after { display: none; }   /* old caret, replaced */
  .dropdown-toggle:hover {
    border-color: var(--accent); color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  /* When open: full gradient fill, white text, glow */
  .dropdown.open .dropdown-toggle {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF; border-color: transparent;
    box-shadow: 0 4px 8px rgba(16,34,34,0.10),
                0 12px 30px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  }
  .dropdown.open .dropdown-toggle::before { left: 130%; }
  .dropdown.open .dropdown-toggle .caret { transform: rotate(180deg); }

  /* Menu panel */
  .dropdown-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 6px 16px -6px rgba(16,34,34,0.10),
                0 18px 44px -16px rgba(16,34,34,0.18);
    padding: 8px;
    visibility: hidden; opacity: 0;
    transform: translateY(-6px) scale(0.98); transform-origin: top left;
    transition: opacity 220ms cubic-bezier(.2,.7,.2,1),
                transform 240ms cubic-bezier(.2,.7,.2,1),
                visibility 240ms;
  }
  .dropdown.open .dropdown-menu {
    visibility: visible; opacity: 1;
    transform: translateY(0) scale(1);
  }
  .dropdown-menu a {
    display: block; padding: 10px 14px; font-size: 14px; color: var(--text);
    border-radius: 8px; text-decoration: none;
    position: relative;
    transition: color 200ms, background 220ms, padding-left 240ms cubic-bezier(.2,.7,.2,1);
  }
  .dropdown-menu a::before {
    content: ""; position: absolute; left: 6px; top: 50%; width: 0; height: 1.5px;
    background: var(--accent);
    transform: translateY(-50%);
    transition: width 240ms cubic-bezier(.2,.7,.2,1);
  }
  .dropdown-menu a:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding-left: 22px;
  }
  .dropdown-menu a:hover::before { width: 10px; }
  .dropdown-menu .sep { height: 1px; background: var(--border); margin: 6px 4px; }
  .dropdown-menu .meta { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

  /* =========================================================
     DROPDOWN — FIELD VARIANT
     Same animated menu, same accent hover on items, but the
     toggle looks like a form input (full width, 12px radius,
     left-aligned, normal-weight text). Use this in place of
     a native <select> wherever the rest of the form uses the
     custom input/textarea styling.
     ========================================================= */
  .dropdown.field { display: block; width: 100%; }
  .dropdown.field .dropdown-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    font-family: var(--font-body); font-weight: 400; font-size: 14px;
    text-align: left; letter-spacing: 0;
    transition: border-color 240ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms cubic-bezier(.2,.7,.2,1),
                background 280ms, transform 240ms cubic-bezier(.2,.7,.2,1);
  }
  .dropdown.field .dropdown-toggle .caret {
    width: 12px; height: 8px; flex: 0 0 12px;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
  }
  .dropdown.field .dropdown-toggle:hover {
    border-color: var(--accent);
    color: var(--text); transform: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
    background: var(--bg);
  }
  .dropdown.field.open .dropdown-toggle {
    background: var(--surface);
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
                0 6px 18px -8px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .dropdown.field.open .dropdown-toggle .caret { transform: rotate(180deg); }
  /* Suppress the sweep highlight that's used on the pill variant */
  .dropdown.field .dropdown-toggle::before { display: none; }
  /* Menu panel matches the toggle width */
  .dropdown.field .dropdown-menu { left: 0; right: 0; min-width: 0; }
  /* Placeholder styling when no value is selected */
  .dropdown.field .dropdown-toggle.placeholder { color: var(--muted); }

  /* =========================================================
     3 — NAVIGATION
     ========================================================= */
  /* ============== NAV VARIANT A — TWO-ROW PREMIUM ============== */
  /* Nav-a — light theme (Tidewater Mist) */
  .nav-a {
    /* Subtle vertical gradient gives the nav band depth.
       Mist palette by default; Night palette under [data-theme="dark"]. */
    background:
      linear-gradient(180deg,
        #506E78 0%,
        #4A6770 50%,
        #557580 100%);
    border: 1px solid #708890;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 0 color-mix(in srgb, #5FCFC8 22%, transparent),
      0 18px 40px -24px rgba(20, 40, 58, 0.32);
    position: relative;
  }
  /* Nav-a — dark theme (Tidewater Night) */
  [data-theme="dark"] .nav-a {
    background:
      linear-gradient(180deg,
        #182D40 0%,
        #14283A 50%,
        #18324B 100%);
    border: 1px solid #2C4358;
    box-shadow:
      inset 0 1px 0 0 color-mix(in srgb, #5FCFC8 18%, transparent),
      0 18px 40px -24px rgba(0, 0, 0, 0.45);
  }
  /* Hairline accent glow along the top edge of the nav (both themes) */
  .nav-a::before {
    content: "";
    position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, #5FCFC8 55%, transparent) 50%,
      transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* Util row — light theme (Mist) */
  .nav-a .util {
    background: color-mix(in srgb, #5FCFC8 7%, #54727A);
    padding: 8px 24px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: #D6DEE1;
    border-bottom: 1px solid #708890;
    position: relative;
  }
  /* Util row — dark theme (Night) */
  [data-theme="dark"] .nav-a .util {
    background: color-mix(in srgb, #5FCFC8 6%, #1D3447);
    color: #B6C4CB;
    border-bottom: 1px solid #2C4358;
  }
  .nav-a .util .left, .nav-a .util .right { display: flex; gap: 18px; align-items: center; }
  .nav-a .util a { color: var(--muted); text-decoration: none; transition: color 120ms; display: inline-flex; align-items: center; gap: 6px; }
  .nav-a .util a:hover { color: var(--accent); }
  .nav-a .util .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--text); font-weight: 600; }
  .nav-a .main {
    padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  }
  .nav-a .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
  .nav-a .brand img { width: 80px; height: auto; }
  .nav-a .brand .wm { font-family: var(--font-heading); font-weight: 700; font-size: 26px; letter-spacing: -0.005em; line-height: 1.05; }
  .nav-a .brand .wm .amp {
    font-style: italic; font-weight: 500; color: var(--accent);
    font-size: 1.5em; line-height: 0;
    padding: 0 4px;
    vertical-align: -0.08em;
  }
  .nav-a .brand .sub { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
  .nav-a nav.primary { display: flex; gap: 4px; align-items: center; flex: 1; justify-content: center; }
  .nav-a nav.primary > a, .nav-a nav.primary > .has-mega {
    text-decoration: none; color: var(--text);
    font-family: var(--font-body); font-size: 14px; font-weight: 500;
    padding: 10px 14px; border-radius: 6px;
    position: relative; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    letter-spacing: 0;
    transition: color 220ms, letter-spacing 320ms cubic-bezier(.2,.7,.2,1),
                background-color 220ms, transform 220ms cubic-bezier(.2,.7,.2,1);
  }
  /* DYNAMIC HOVER — color shifts to accent, letter-spacing opens up,
     a soft accent-tinted background fades in, link lifts slightly. */
  .nav-a nav.primary > a:hover,
  .nav-a nav.primary > .has-mega:hover > .label {
    letter-spacing: 0.12em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
  }
  .nav-a nav.primary > a::after, .nav-a nav.primary > .has-mega > .label::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  }
  /* Active link gets a small accent dot before the text */
  .nav-a nav.primary > a.active::before,
  .nav-a nav.primary > .has-mega.active > .label::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-right: 6px;
    display: inline-block;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
    animation: pulseDot 2.4s ease-in-out infinite;
  }
  @keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  .nav-a nav.primary > a.active,
  .nav-a nav.primary > .has-mega.active > .label { color: var(--accent); }
  .nav-a nav.primary > a:hover::after,
  .nav-a nav.primary > .has-mega:hover > .label::after { transform: scaleX(1); }
  .nav-a .has-mega > .label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; position: relative; transition: color 160ms; }
  .nav-a .has-mega .caret { width: 8px; height: 5px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 200ms; }
  .nav-a .has-mega:hover .caret { transform: rotate(180deg); }

  .nav-a .mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-top: 1px solid var(--border);
    box-shadow: 0 12px 32px -16px rgba(16,34,34,0.18);
    padding: 28px 32px;
    display: none; z-index: 30;
  }
  .nav-a .has-mega:hover .mega { display: block; }
  .nav-a .mega .grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: 28px; }
  .nav-a .mega h6 { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
  .nav-a .mega a { display: block; color: var(--text); text-decoration: none; padding: 6px 0; font-size: 14px; font-weight: 500; transition: color 120ms, padding-left 200ms; }
  .nav-a .mega a:hover { color: var(--accent); padding-left: 6px; }
  .nav-a .mega .feature {
    background: linear-gradient(135deg, var(--surface-2), var(--accent));
    border-radius: 10px; padding: 18px; min-height: 160px;
    display: flex; flex-direction: column; justify-content: flex-end;
    color: var(--accent-text);
  }
  .nav-a .mega .feature .lab { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; }
  .nav-a .mega .feature .ttl { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin-top: 6px; }
  .nav-a .mega .feature .link { font-size: 13px; font-weight: 600; margin-top: 12px; }

  .nav-a .cta { flex: 0 0 auto; }
  /* Nav CTA — louder, more vibrant version of btn-a primary so it draws the eye. */
  .nav-a .cta .btn {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 600; font-size: 14px;
    letter-spacing: 0.01em;
    border: none;
    box-shadow: 0 2px 4px rgba(16,34,34,0.08),
                0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1),
                filter 200ms;
    position: relative; overflow: hidden;
  }
  /* Soft sweep highlight */
  .nav-a .cta .btn::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
  }
  .nav-a .cta .btn:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 4px 8px rgba(16,34,34,0.10),
                0 14px 36px -10px color-mix(in srgb, var(--accent) 75%, transparent);
    filter: saturate(1.1);
  }
  .nav-a .cta .btn:hover::before { left: 130%; }
  .nav-a .cta .btn:hover .icon { transform: translateX(3px); }
  .nav-a .cta .btn:active { transform: translateY(0) scale(1); }

  /* ============== NAV VARIANT B — CENTERED CLASSICAL ============== */
  .nav-b {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .nav-b .util {
    background: var(--bg);
    padding: 10px 24px;
    display: flex; align-items: center; justify-content: center; gap: 22px;
    font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
  }
  .nav-b .util a { color: var(--muted); text-decoration: none; transition: color 120ms; }
  .nav-b .util a:hover { color: var(--accent); }
  .nav-b .util .dot { color: var(--border); }
  .nav-b .main {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px;
    padding: 24px 32px;
  }
  .nav-b nav.left, .nav-b nav.right { display: flex; gap: 30px; align-items: center; }
  .nav-b nav.left { justify-content: flex-end; }
  .nav-b nav.right { justify-content: flex-start; }
  .nav-b nav a {
    text-decoration: none; color: var(--text);
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 6px 0; position: relative; transition: color 160ms;
  }
  .nav-b nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: center;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .nav-b nav a:hover, .nav-b nav a.active { color: var(--accent); }
  .nav-b nav a:hover::after, .nav-b nav a.active::after { transform: scaleX(1); }
  .nav-b .center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .nav-b .center img { width: 56px; height: auto; }
  .nav-b .center .wm { font-family: var(--font-heading); font-weight: 700; font-size: 24px; letter-spacing: 0.04em; line-height: 1; text-align: center; }
  .nav-b .center .sub { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

  /* ============== NAV VARIANT C — MINIMAL + FULL-SCREEN OVERLAY ============== */
  .nav-c {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  .nav-c .brand { display: flex; align-items: center; gap: 12px; }
  .nav-c .brand img { width: 36px; }
  .nav-c .brand .wm { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
  .nav-c .right { display: flex; align-items: center; gap: 16px; }
  .nav-c .phone {
    font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text);
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    transition: color 120ms;
  }
  .nav-c .phone:hover { color: var(--accent); }
  .nav-c .phone .ic { width: 14px; height: 14px; color: var(--accent); }

  .nav-c .burger {
    width: 44px; height: 44px; border-radius: 8px;
    background: var(--text); color: var(--bg);
    border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    transition: background-color 180ms;
  }
  .nav-c .burger:hover { background: var(--accent); }
  .nav-c .burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 240ms, opacity 200ms; }
  .nav-c.open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-c.open .burger span:nth-child(2) { opacity: 0; }
  .nav-c.open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .nav-c .overlay {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--text); color: var(--bg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 0; overflow: hidden;
    max-height: 0;
    transition: max-height 460ms cubic-bezier(.16,.84,.32,1);
  }
  .nav-c.open .overlay { max-height: 600px; }
  .nav-c .overlay-inner {
    padding: 44px 36px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
    opacity: 0; transform: translateY(-12px);
    transition: opacity 320ms 120ms, transform 320ms 120ms;
  }
  .nav-c.open .overlay-inner { opacity: 1; transform: translateY(0); }
  .nav-c .overlay nav { display: flex; flex-direction: column; gap: 8px; }
  .nav-c .overlay nav a {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 38px; line-height: 1.1; letter-spacing: -0.01em;
    color: var(--bg); text-decoration: none;
    transition: color 160ms, padding-left 220ms;
    padding: 4px 0; position: relative;
  }
  .nav-c .overlay nav a::before {
    content: ""; position: absolute; left: -22px; top: 50%; width: 12px; height: 1.5px;
    background: var(--accent); transform: translateY(-50%) scaleX(0); transform-origin: left;
    transition: transform 220ms;
  }
  .nav-c .overlay nav a:hover { color: var(--accent); padding-left: 14px; }
  .nav-c .overlay nav a:hover::before { transform: translateY(-50%) scaleX(1); }
  .nav-c .overlay .aside { color: var(--surface-2); font-size: 14px; line-height: 1.7; }
  .nav-c .overlay .aside .lab { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
  .nav-c .overlay .aside a { color: var(--bg); text-decoration: none; }
  .nav-c .overlay .aside a:hover { color: var(--accent); }
  @media (max-width: 720px) {
    .nav-c .overlay-inner { grid-template-columns: 1fr; gap: 32px; }
    .nav-c .overlay nav a { font-size: 28px; }
  }

  /* ============== RESPONSIVE — NAV A & B collapse to a burger on phones ============== */
  /* Below 880px, hide the inline primary nav and show a phone burger. */
  .phone-burger {
    display: none;
    width: 48px; height: 48px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #DCE6E7; cursor: pointer;
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    position: relative; overflow: hidden;
    box-shadow:
      0 2px 6px rgba(16,34,34,0.08),
      0 8px 22px -8px color-mix(in srgb, var(--accent) 65%, transparent);
    transition:
      transform 240ms cubic-bezier(.2,.7,.2,1),
      box-shadow 320ms cubic-bezier(.2,.7,.2,1),
      filter 200ms;
  }
  /* Subtle ambient sheen */
  .phone-burger::before {
    content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-22deg);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .phone-burger span {
    display: block; width: 22px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition:
      transform 320ms cubic-bezier(.65,.05,.36,1),
      width 280ms cubic-bezier(.2,.7,.2,1),
      opacity 200ms;
  }
  .phone-burger:hover {
    transform: translateY(-2px) scale(1.04);
    filter: saturate(1.12);
    box-shadow:
      0 4px 10px rgba(16,34,34,0.10),
      0 16px 36px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  }
  .phone-burger:hover::before { left: 130%; }
  .phone-burger:hover span:nth-child(1) { width: 16px; transform: translateX(-3px); }
  .phone-burger:hover span:nth-child(3) { width: 16px; transform: translateX(3px); }
  .phone-burger:active { transform: translateY(0) scale(1); }
  /* Open state: lines snap into an X */
  .phone-burger.open span:nth-child(1) { width: 22px; transform: translateY(7px) rotate(45deg); }
  .phone-burger.open span:nth-child(2) { opacity: 0; }
  .phone-burger.open span:nth-child(3) { width: 22px; transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 880px) {
    /* Nav A — stack and collapse */
    .nav-a .util { flex-direction: column; gap: 6px; align-items: stretch; padding: 8px 16px; }
    .nav-a .util .left, .nav-a .util .right { flex-wrap: wrap; gap: 12px; justify-content: center; }
    .nav-a .main { padding: 14px 16px; gap: 14px; }
    .nav-a .brand .wm { font-size: 18px; }
    .nav-a .brand .sub { font-size: 9px; }
    .nav-a nav.primary { display: none; }
    .nav-a .cta { display: none; }
    .nav-a .phone-burger { display: inline-flex; }

    /* Nav B — collapse split nav, keep centered brand */
    .nav-b .util { flex-wrap: wrap; gap: 10px; font-size: 11px; padding: 8px 16px; }
    .nav-b .main { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px; text-align: center; }
    .nav-b nav.left, .nav-b nav.right { display: none; }
    .nav-b .center img { width: 48px; }
    .nav-b .center .wm { font-size: 22px; }
    .nav-b .phone-burger {
      display: inline-flex;
      position: absolute; top: 14px; right: 14px;
    }
    .nav-b { position: relative; }

    /* Nav C — already mobile-friendly, just trim padding */
    .nav-c { padding: 14px 16px; }
    .nav-c .phone .ic + * { display: none; } /* hide phone number text; keep icon only */
    .nav-c .phone { padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
  }
  @media (max-width: 480px) {
    .nav-a .brand .sub { display: none; }
    .nav-b .center .sub { font-size: 8.5px; }
  }

  /* =========================================================
     BREADCRUMBS — same hover language as the nav links:
     letter-spacing nudges, accent line slides in below.
     Current page anchored with the pulsing accent dot.
     ========================================================= */
  .crumbs {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-size: 13px; color: var(--muted);
    flex-wrap: wrap;
  }
  .crumbs a {
    position: relative;
    color: var(--muted); text-decoration: none;
    padding: 6px 8px; border-radius: 6px;
    letter-spacing: 0;
    transition: color 200ms, letter-spacing 280ms cubic-bezier(.2,.7,.2,1),
                background 220ms;
  }
  .crumbs a::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 1.5px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .crumbs a:hover {
    color: var(--accent);
    letter-spacing: 0.08em;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  .crumbs a:hover::after { transform: scaleX(1); }
  /* Separator — small accent chevron, animates softly */
  .crumbs .sep {
    color: var(--border); font-size: 11px;
    transform: translateY(-1px);
    transition: color 240ms, transform 320ms cubic-bezier(.2,.7,.2,1);
  }
  .crumbs:hover .sep { color: var(--accent); }
  /* Current page — same pulsing accent dot we used for the active nav link */
  .crumbs .cur {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text); font-weight: 700;
    padding: 6px 8px;
  }
  .crumbs .cur::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); display: inline-block;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
    animation: pulseDot 2.4s ease-in-out infinite;
  }

  /* =========================================================
     TABS — accent-tinted hover background, animated underline
     slides in from the left, active state uses the Glass Pane
     gradient under the text.
     ========================================================= */
  .tabs {
    display: flex; gap: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    flex-wrap: wrap;
    padding-bottom: 2px;
  }
  .tab {
    position: relative;
    padding: 12px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
    color: var(--muted); cursor: pointer; letter-spacing: 0;
    border-radius: 10px 10px 0 0;
    transition: color 220ms, background 240ms cubic-bezier(.2,.7,.2,1),
                letter-spacing 280ms cubic-bezier(.2,.7,.2,1),
                transform 220ms cubic-bezier(.2,.7,.2,1);
  }
  /* Underline indicator — slides in on hover, locks in on active */
  .tab::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2.5px;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  }
  .tab:hover {
    color: var(--accent);
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    transform: translateY(-1px);
  }
  .tab:hover::after { transform: scaleX(1); }
  .tab.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .tab.active::after { transform: scaleX(1); }

  /* =========================================================
     4 — CARDS · two static mitered corners — a larger one at the
     top-right and a smaller one at the bottom-left, creating a
     diagonal axis like an architectural section detail. Cards lift
     and brighten their shadow on hover; no fold animation.
     ========================================================= */

  .card,
  .project-card,
  .service-tile,
  .stat {
    --miter-tr: 44px;                       /* top-right miter (larger) */
    --miter-bl: 22px;                       /* bottom-left miter (smaller) */
    position: relative;
    background: var(--surface);
    overflow: hidden;
    /* Cut both corners directly on the card. The clip-path defines
       the visible shape; the rest is genuinely transparent. */
    clip-path: polygon(
      0 0,
      calc(100% - var(--miter-tr)) 0,
      100% var(--miter-tr),
      100% 100%,
      var(--miter-bl) 100%,
      0 calc(100% - var(--miter-bl))
    );
    transition: transform 320ms cubic-bezier(.2,.7,.2,1),
                filter 320ms cubic-bezier(.2,.7,.2,1);
    filter:
      drop-shadow(0 1px 2px rgba(16,34,34,0.06))
      drop-shadow(0 6px 16px rgba(16,34,34,0.05));
  }

  /* Matte sweep — a quiet diagonal that crosses the card on hover.
     Lower opacity, wider falloff, no white highlight band — reads as
     a gentle wash rather than glass-glare. */
  .card::after,
  .project-card::after,
  .service-tile::after,
  .stat::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--text) 5%, transparent) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 820ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
    z-index: 3;
  }
  .card:hover::after,
  .project-card:hover::after,
  .service-tile:hover::after,
  .stat:hover::after { transform: translateX(110%); }

  /* HOVER — card lifts with a deeper neutral drop-shadow (no accent tint). */
  .card:hover,
  .project-card:hover,
  .service-tile:hover,
  .stat:hover {
    transform: translateY(-4px);
    filter:
      drop-shadow(0 4px 12px rgba(16,34,34,0.12))
      drop-shadow(0 18px 36px rgba(16,34,34,0.18));
  }

  /* ============== BASIC CARD ============== */
  .card .body { padding: 22px; position: relative; z-index: 0; }
  .card h3 { font-size: 22px; margin: 0 0 8px; }
  .card .meta { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; }
  .card p { font-size: 14px; color: var(--text); margin: 0 0 14px; }

  /* ============== PROJECT CARD ==============
     Image set via the --img custom property on the card itself:
       <article class="project-card" style="--img: url('path/to/photo.jpg')">
     The card's clip-path handles the mitered corners — the image just
     fills the top section and is naturally clipped by the card shape. */
  .project-card .image {
    aspect-ratio: 4 / 3;
    background-color: var(--surface-2);
    background-image: var(--img, linear-gradient(135deg, var(--surface-2), var(--accent)));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; z-index: 0;
  }
  .project-card .info { padding: 18px 22px; position: relative; z-index: 0; }
  .project-card .loc {
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 6px;
    transition: letter-spacing 280ms cubic-bezier(.2,.7,.2,1);
  }
  .project-card:hover .loc { letter-spacing: 0.20em; }
  .project-card h4 {
    font-family: var(--font-heading); font-weight: 700; font-size: 20px; margin: 0 0 6px;
    transition: color 220ms;
  }
  .project-card:hover h4 { color: var(--accent); }
  .project-card .spec { font-size: 13px; color: var(--muted); }

  /* ============== SERVICE TILE ==============
     Default: surface background. To add a background image, set --bg-image
     and add the .has-bg modifier:
       <a class="service-tile has-bg"
          style="--bg-image: url('path/to/photo.jpg')"> */
  .service-tile {
    padding: 26px; display: flex; flex-direction: column; gap: 14px;
    cursor: pointer; text-decoration: none; color: var(--text);
    min-height: 220px;
    /* background is inherited from the shared card rule (var(--surface));
       has-bg variant replaces it with the photo + overlay below. */
  }
  /* has-bg: photo + readability overlay directly on the tile. The card's
     clip-path naturally clips the image at the mitered corners. */
  .service-tile.has-bg {
    background-image:
      linear-gradient(to top, rgba(16,34,34,0.85) 0%, rgba(16,34,34,0.35) 55%, rgba(16,34,34,0.05) 100%),
      var(--bg-image, linear-gradient(135deg, var(--surface-2), var(--accent)));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    min-height: 280px;
  }
  .service-tile.has-bg h4 { color: #FFFFFF; }
  .service-tile.has-bg p { color: rgba(255,255,255,0.86); }
  .service-tile.has-bg .more { color: #7FE3DC; }
  .service-tile.has-bg .glyph {
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.2);
  }

  .service-tile .glyph {
    width: 48px; height: 48px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 0;
    transition: background 280ms, color 280ms, transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .service-tile:hover .glyph {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    transform: scale(1.08) rotate(-3deg);
  }
  .service-tile.has-bg:hover .glyph {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    border-color: transparent;
  }
  .service-tile h4 {
    font-size: 20px; margin: 0; position: relative; z-index: 0;
    transition: color 220ms;
  }
  .service-tile:hover h4 { color: var(--accent); }
  .service-tile.has-bg:hover h4 { color: #7FE3DC; }
  .service-tile p { font-size: 14px; color: var(--muted); margin: 0; position: relative; z-index: 0; }
  .service-tile .more {
    color: var(--accent); font-size: 13px; font-weight: 600; margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    position: relative; z-index: 0;
    transition: gap 240ms cubic-bezier(.2,.7,.2,1);
  }
  .service-tile:hover .more { gap: 12px; }

  /* ============== STAT BLOCK ============== */
  .stat { padding: 28px 24px; text-align: center; }
  .stat .num {
    font-family: var(--font-heading); font-weight: 700; font-size: 54px;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    line-height: 1; margin-bottom: 8px;
    position: relative; z-index: 0;
    transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  }
  .stat:hover .num { transform: scale(1.06); }
  .stat .lab {
    font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
    position: relative; z-index: 0;
    transition: color 220ms, letter-spacing 280ms cubic-bezier(.2,.7,.2,1);
  }
  .stat:hover .lab { color: var(--text); letter-spacing: 0.20em; }

  /* =========================================================
     5 — FEEDBACK
     ========================================================= */
  /* Alerts — gradient tint per variant, hover lift + accent halo
     scoped to that variant's color. Uses currentColor on the icon
     so the per-variant rule does double-duty. */
  .alert {
    --tint: var(--accent);  /* default; .alert.success etc. override */
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-radius: var(--radius); font-size: 14px;
    border: 1px solid var(--border);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--tint) 8%, var(--surface)),
        var(--surface) 60%);
    border-left: 3px solid var(--tint);
    position: relative; overflow: hidden;
    transition:
      transform 280ms cubic-bezier(.2,.7,.2,1),
      box-shadow 320ms cubic-bezier(.2,.7,.2,1),
      border-color 280ms cubic-bezier(.2,.7,.2,1);
  }
  .alert:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tint) 50%, var(--border));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--tint) 10%, transparent),
      0 12px 28px -10px color-mix(in srgb, var(--tint) 38%, transparent);
  }
  .alert .icon {
    width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px;
    color: var(--tint);
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .alert:hover .icon { transform: scale(1.08); }
  .alert .body { flex: 1; }
  .alert .body strong { display: block; margin-bottom: 2px; }
  .alert.info    { --tint: var(--accent); }
  .alert.success { --tint: var(--success); }
  .alert.warning { --tint: var(--warning); }
  .alert.error   { --tint: var(--error); }

  /* Badges — same Glass Pane language as the CTA family on .solid,
     soft tint-bloom on hover for every variant. */
  .badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px; font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.04em;
    position: relative;
    transition:
      transform 240ms cubic-bezier(.2,.7,.2,1),
      box-shadow 280ms cubic-bezier(.2,.7,.2,1),
      filter 200ms,
      background-color 240ms,
      letter-spacing 280ms;
  }
  .badge:hover { transform: translateY(-1px); letter-spacing: 0.06em; }
  .badge.solid {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    box-shadow:
      0 1px 2px rgba(16,34,34,0.10),
      0 4px 12px -4px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .badge.solid:hover {
    filter: brightness(1.05);
    box-shadow:
      0 2px 4px rgba(16,34,34,0.14),
      0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  .badge.subtle  { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
  .badge.subtle:hover  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
  .badge.outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
  .badge.outline:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
  .badge.success { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
  .badge.success:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent); }
  .badge.warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
  .badge.warning:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 14%, transparent); }
  .badge.error   { background: color-mix(in srgb, var(--error)   18%, transparent); color: var(--error); }
  .badge.error:hover   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 14%, transparent); }

  /* Tooltips — fade + lift on hover with the house easing curve */
  .tooltip { position: relative; display: inline-block; }
  .tooltip .tip {
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text); color: var(--bg);
    font-size: 12px; font-weight: 500;
    padding: 7px 11px; border-radius: 7px;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    box-shadow: 0 6px 18px -6px rgba(16,34,34,0.25);
    transition:
      opacity 220ms cubic-bezier(.2,.7,.2,1),
      transform 240ms cubic-bezier(.2,.7,.2,1);
  }
  .tooltip .tip::after {
    content: ""; position: absolute;
    bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 8px; height: 8px; background: var(--text);
  }
  .tooltip:hover .tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* =========================================================
     6 — TABLES
     ========================================================= */
  .data-table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
    background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  }
  .data-table th, .data-table td {
    padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border);
    transition: background 220ms cubic-bezier(.2,.7,.2,1), color 220ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms cubic-bezier(.2,.7,.2,1);
  }
  .data-table th {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface-2)), var(--surface-2));
    color: var(--muted); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700;
    position: relative;
  }
  .data-table th::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 35%, transparent) 50%,
      transparent 100%);
  }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--accent) 5%, var(--bg));
    color: var(--text);
  }
  .data-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 0 var(--accent);
  }
  .data-table td.num { text-align: right; font-family: var(--font-mono); font-size: 13px; }

  /* =========================================================
     7 — ACCORDION
     ========================================================= */
  details.acc {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0; overflow: hidden;
    transition:
      border-color 240ms cubic-bezier(.2,.7,.2,1),
      box-shadow 280ms cubic-bezier(.2,.7,.2,1),
      background 240ms cubic-bezier(.2,.7,.2,1);
  }
  details.acc + details.acc { margin-top: 8px; }
  details.acc:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  details.acc[open] {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%,
      var(--surface) 70%);
    box-shadow:
      inset 3px 0 0 0 var(--accent),
      0 8px 22px -10px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  details.acc summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--text);
    letter-spacing: 0;
    transition:
      color 220ms cubic-bezier(.2,.7,.2,1),
      letter-spacing 320ms cubic-bezier(.2,.7,.2,1);
  }
  details.acc:hover summary { color: var(--accent); letter-spacing: 0.005em; }
  details.acc[open] summary { color: var(--accent); }
  details.acc summary::-webkit-details-marker { display: none; }
  /* Single glyph (×, rotated) replaces +/− swap so the transition is smooth */
  details.acc summary::after {
    content: "+";
    font-family: var(--font-body); font-size: 26px; font-weight: 300;
    color: var(--accent);
    line-height: 1; width: 22px; text-align: center;
    transition: transform 320ms cubic-bezier(.2,.7,.2,1);
    transform-origin: center;
  }
  details.acc[open] summary::after { transform: rotate(45deg); }
  details.acc .body { padding: 0 20px 18px; font-size: 14px; color: var(--text); }

  /* =========================================================
     8 — MODAL / DRAWER (static for showcase)
     ========================================================= */
  .modal-shell {
    background: rgba(16,34,34,0.4); border-radius: var(--radius-lg);
    padding: 36px; display: flex; align-items: center; justify-content: center;
    min-height: 280px;
  }
  /* Modal — fade + slight rise on appearance. The showcase plays this
     once when the modal-shell scrolls into view. */
  @keyframes modal-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  .modal {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
    max-width: 460px; width: 100%;
    box-shadow:
      0 24px 60px -20px rgba(16,34,34,0.40),
      0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
    padding: 26px;
    position: relative;
    animation: modal-enter 360ms cubic-bezier(.2,.7,.2,1) both;
  }
  /* Accent hairline glow along the top edge, parallels the footer */
  .modal::before {
    content: ""; position: absolute;
    top: 0; left: 18px; right: 18px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 60%, transparent) 50%,
      transparent 100%);
    pointer-events: none;
  }
  /* Styled close button — accent halo + lift on hover (bubble language) */
  .modal .close {
    position: absolute; top: 14px; right: 14px;
    width: 30px; height: 30px; border-radius: 8px;
    background: transparent; border: 1px solid var(--border);
    color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition:
      color 200ms,
      border-color 220ms,
      background 240ms,
      transform 220ms cubic-bezier(.2,.7,.2,1),
      box-shadow 280ms cubic-bezier(.2,.7,.2,1);
  }
  .modal .close:hover {
    color: var(--accent); border-color: var(--accent);
    transform: translateY(-1px) rotate(90deg);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 10%, transparent),
        color-mix(in srgb, var(--accent) 18%, transparent));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent),
      0 6px 14px -3px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .modal h4 { font-size: 22px; margin: 0 0 6px; padding-right: 32px; }
  .modal p { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
  .modal .actions { display: flex; justify-content: flex-end; gap: 10px; }

  /* =========================================================
     9 — FORMS / QUOTE REQUEST (Catalyst-specific)
     ========================================================= */
  .quote-form {
    background: var(--surface);
    border: 1.5px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    transition:
      border-color 280ms cubic-bezier(.2,.7,.2,1),
      box-shadow 360ms cubic-bezier(.2,.7,.2,1),
      background 280ms cubic-bezier(.2,.7,.2,1);
  }
  .quote-form::before {
    content: ""; position: absolute;
    top: -1px; left: 24px; right: 24px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 50%, transparent) 50%,
      transparent 100%);
    pointer-events: none;
  }
  .quote-form:hover, .quote-form:focus-within {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: color-mix(in srgb, var(--accent) 3%, var(--surface));
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
      0 14px 32px -14px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  .quote-form .grid-2 { gap: 14px; }
  .quote-form h3 { font-size: 24px; margin: 0 0 6px; }
  .quote-form .sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

  /* =========================================================
     10 — HERO PATTERNS
     ========================================================= */
  .web-hero {
    border-radius: var(--radius-lg); padding: 80px 48px; overflow: hidden;
    background: linear-gradient(135deg, var(--bg) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    position: relative;
  }
  /* Slow accent sheen that drifts across the hero — about 6.5s
     for one full pass. Subtle enough to feel like reflected light
     on glass rather than an obvious sweep. */
  .web-hero::before {
    content: ""; position: absolute;
    top: 0; bottom: 0; left: -40%; width: 50%;
    background: linear-gradient(110deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 8%, transparent) 50%,
      transparent 100%);
    transform: skewX(-14deg);
    pointer-events: none;
    animation: web-hero-sheen 6.5s ease-in-out infinite;
  }
  /* Subtle accent hairline glow at the top, parallels footer/modal */
  .web-hero::after {
    content: ""; position: absolute;
    top: 0; left: 48px; right: 48px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 55%, transparent) 50%,
      transparent 100%);
    pointer-events: none;
  }
  @keyframes web-hero-sheen {
    0%   { left: -50%; }
    55%  { left: 110%; }
    100% { left: 110%; }
  }
  /* Staggered fade-up entry on hero content */
  @keyframes web-hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .web-hero .tag, .web-hero h1, .web-hero p, .web-hero .cta-row {
    animation: web-hero-rise 700ms cubic-bezier(.2,.7,.2,1) both;
    position: relative; z-index: 1;
  }
  .web-hero .tag      { animation-delay: 0ms;  }
  .web-hero h1        { animation-delay: 90ms; }
  .web-hero p         { animation-delay: 180ms; }
  .web-hero .cta-row  { animation-delay: 270ms; }

  /* The tag breathes slightly — a tiny letter-spacing oscillation
     that reads as a slow inhale/exhale on the eyebrow label. */
  @keyframes web-hero-tag-breath {
    0%, 100% { letter-spacing: 0.18em; }
    50%      { letter-spacing: 0.22em; }
  }
  .web-hero .tag {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 16px;
    /* Compose two animations: the staggered rise (above) plus the breath */
    animation:
      web-hero-rise 700ms cubic-bezier(.2,.7,.2,1) both,
      web-hero-tag-breath 5.5s ease-in-out 1.2s infinite;
  }
  .web-hero h1 { font-size: 60px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 720px; }
  .web-hero p  { font-size: 18px; color: var(--text); margin: 0 0 28px; max-width: 560px; }
  .web-hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

  .web-hero.dark {
    background: linear-gradient(135deg, #14283A 0%, #1D3447 100%);
    color: #DCE6E7;
    border-color: #2C4358;
  }
  .web-hero.dark h1, .web-hero.dark p { color: #DCE6E7; }
  .web-hero.dark .tag { color: #5FCFC8; }
  .web-hero.dark::before {
    background: linear-gradient(110deg,
      transparent 0%,
      color-mix(in srgb, #5FCFC8 10%, transparent) 50%,
      transparent 100%);
  }

  /* =========================================================
     10 — REQUEST A QUOTE · audience-aware multi-step flow
     ========================================================= */

  /* Shell wrapping the entire flow */
  .qflow {
    display: grid; grid-template-columns: 1fr 280px; gap: 24px;
    align-items: start;
  }
  @media (max-width: 880px) { .qflow { grid-template-columns: 1fr; } }
  .qflow .main {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    min-height: 540px;
    position: relative;
  }
  .qflow .aside {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 96px;
  }
  @media (max-width: 880px) { .qflow .aside { position: static; } }
  .qflow .aside .card-aside {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
  }
  .qflow .aside .card-aside h6 {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 8px;
  }
  .qflow .aside .phone-cta {
    font-family: var(--font-heading); font-weight: 700; font-size: 22px;
    color: var(--text); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 200ms;
  }
  .qflow .aside .phone-cta:hover { color: var(--accent); }
  .qflow .aside .phone-cta svg { width: 18px; height: 18px; color: var(--accent); }
  .qflow .aside .hint {
    font-size: 12.5px; color: var(--muted); margin-top: 4px;
  }
  .qflow .aside .trust {
    display: flex; flex-direction: column; gap: 4px;
  }
  .qflow .aside .trust .num {
    font-family: var(--font-heading); font-weight: 700; font-size: 28px; color: var(--accent);
    line-height: 1;
  }
  .qflow .aside .trust .lab {
    font-size: 11.5px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  }

  /* ---- Validation states ---- */
  .qflow .field.invalid > .input,
  .qflow .field.invalid > .textarea {
    border-color: #D26B61;
    box-shadow: 0 0 0 3px rgba(210, 107, 97, 0.18);
  }
  .qflow .field-error {
    display: block;
    margin-top: 6px;
    color: #D26B61;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .qflow .step-error {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, #D26B61 12%, transparent);
    border: 1px solid color-mix(in srgb, #D26B61 38%, transparent);
    color: #B0524A;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .qflow .step-error svg {
    flex: 0 0 auto;
    color: #D26B61;
  }
  @keyframes qflow-step-error-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
  }
  .qflow .step-error.shake {
    animation: qflow-step-error-shake 360ms ease;
  }

  /* Progress stepper at the top */
  .qsteps {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  .qstep {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 12px; font-weight: 600;
    color: var(--muted);
    transition: color 240ms;
  }
  .qstep .num {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    transition: all 240ms cubic-bezier(.2,.7,.2,1);
  }
  .qstep.active { color: var(--text); }
  .qstep.active .num {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF; border-color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  .qstep.done { color: var(--accent); }
  .qstep.done .num {
    background: var(--accent); color: #FFFFFF; border-color: transparent;
  }
  .qsteps .bar {
    flex: 0 1 32px; height: 1.5px; background: var(--border);
    min-width: 18px;
  }
  .qsteps .bar.done { background: var(--accent); }

  /* Step container — only one visible at a time */
  .qstep-pane { display: none; }
  .qstep-pane.active { display: block; animation: qFadeIn 320ms cubic-bezier(.2,.7,.2,1); }
  @keyframes qFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Step header — centered (locked 2026-05-17) */
  .qhead {
    text-align: center;
  }
  .qhead h3 {
    font-family: var(--font-heading); font-weight: 700; font-size: 30px;
    margin: 0 0 6px; letter-spacing: -0.01em;
  }
  .qhead p {
    font-size: 14.5px; color: var(--muted); margin: 0 auto 24px; max-width: 580px;
  }
  .qhead .audience-label {
    display: inline-block;
  }

  /* Step 0 — Audience selector tiles */
  .audience-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  }
  .audience-tile.homeowner-wide { grid-column: 1 / -1; }
  @media (max-width: 620px) { .audience-grid { grid-template-columns: 1fr; } }
  .audience-tile {
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 22px 22px 18px;
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color 240ms, transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1),
                background 280ms;
    position: relative; overflow: hidden;
  }
  .audience-tile::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-22deg);
    transition: left 720ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .audience-tile:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  }
  .audience-tile:hover::before { left: 130%; }
  .audience-tile .glyph {
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    transition: background 280ms, color 280ms, transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .audience-tile:hover .glyph {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    transform: scale(1.06) rotate(-3deg);
  }
  .audience-tile h4 {
    font-family: var(--font-heading); font-weight: 700; font-size: 20px;
    margin: 0; color: var(--text);
  }
  .audience-tile p {
    font-size: 13.5px; color: var(--muted); margin: 0;
  }
  .audience-tile .for {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); margin-top: 6px;
  }
  .audience-skip {
    margin-top: 18px; font-size: 13px; color: var(--muted);
    text-align: center;
  }
  .audience-skip a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

  /* Project type tiles (homeowner path) */
  .ptype-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  @media (max-width: 620px) { .ptype-grid { grid-template-columns: repeat(2, 1fr); } }
  .ptype-tile {
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 18px 14px;
    cursor: pointer;
    text-align: center;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
    position: relative; overflow: hidden;
    transition: border-color 240ms, background 280ms cubic-bezier(.2,.7,.2,1),
                transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms cubic-bezier(.2,.7,.2,1);
  }
  /* Subtle sweep across on hover */
  .ptype-tile::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-22deg);
    transition: left 720ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .ptype-tile:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
    transform: translateY(-3px);
    box-shadow:
      0 4px 10px rgba(16,34,34,0.08),
      0 12px 28px -10px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .ptype-tile:hover::before { left: 130%; }
  .ptype-tile:hover .icn { transform: scale(1.1) rotate(-3deg); }
  .ptype-tile.selected {
    border-color: transparent;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    box-shadow:
      0 4px 10px rgba(16,34,34,0.10),
      0 16px 36px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  .ptype-tile.selected .icn,
  .ptype-tile.selected .lbl { color: #FFFFFF; }
  .ptype-tile .icn {
    width: 36px; height: 36px;
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    transition: color 280ms, transform 320ms cubic-bezier(.2,.7,.2,1);
  }
  .ptype-tile .lbl {
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    color: var(--text); line-height: 1.3;
    transition: color 280ms;
  }

  /* Mobile photo capture button (homeowner path) */
  .photo-row {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .photo-btn {
    flex: 1 1 200px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg); color: var(--text);
    font-family: var(--font-body); font-size: 14px; font-weight: 600;
    cursor: pointer;
    position: relative; overflow: hidden; isolation: isolate;
    transition: border-color 240ms, color 240ms cubic-bezier(.2,.7,.2,1),
                transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms cubic-bezier(.2,.7,.2,1);
  }
  /* Gradient fill slides in on hover (matches the locked CTA family) */
  .photo-btn::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    transform: translateX(-101%);
    transition: transform 380ms cubic-bezier(.65,.05,.36,1);
    z-index: -1;
  }
  /* Light sweep highlight */
  .photo-btn::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
    z-index: 0;
  }
  .photo-btn:hover {
    color: #FFFFFF;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow:
      0 4px 8px rgba(16,34,34,0.10),
      0 14px 36px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  }
  .photo-btn:hover::before { transform: translateX(0); }
  .photo-btn:hover::after  { left: 130%; }
  .photo-btn:hover svg     { transform: scale(1.05) translateX(-1px); }
  .photo-btn:active        { transform: translateY(0); }
  .photo-btn input { position: absolute; opacity: 0; pointer-events: none; }
  .photo-btn svg {
    width: 18px; height: 18px;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  }

  /* Step navigation bar — centered button group (locked 2026-05-17).
     Primary CTA centered; back button sits to its left as a discreet
     ghost link. Stacks on narrow screens. */
  .qnav {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 18px;
    margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
  }
  .qnav .back {
    background: transparent; border: none; cursor: pointer;
    color: var(--muted); font-family: var(--font-body); font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 200ms;
    order: 1;
  }
  .qnav .btn-primary { order: 2; }
  .qnav .back:hover { color: var(--accent); }
  .qnav .back svg { width: 14px; height: 14px; }
  @media (max-width: 480px) {
    .qnav { flex-direction: column-reverse; gap: 14px; }
    .qnav .back, .qnav .btn-primary { width: auto; }
  }

  /* AI preview card (step 3) */
  .ai-preview {
    background: linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 6%, var(--bg)) 100%);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 18px;
  }
  .ai-preview .tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px;
  }
  .ai-preview .tag .pulse {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    animation: pulseDot 2.4s ease-in-out infinite;
  }
  .ai-preview .range {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 38px; letter-spacing: -0.01em;
    color: var(--text); margin: 0 0 4px; line-height: 1.1;
  }
  .ai-preview .range em {
    color: var(--muted); font-weight: 600; font-style: normal;
    font-size: 18px;
  }
  .ai-preview .summary {
    font-size: 14.5px; color: var(--text); margin: 6px 0 18px;
  }
  .ai-preview .specs {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px;
    padding-top: 14px; border-top: 1px dashed var(--border);
  }
  @media (max-width: 620px) { .ai-preview .specs { grid-template-columns: 1fr; } }
  .ai-preview .spec-row {
    display: flex; flex-direction: column; gap: 2px;
  }
  .ai-preview .spec-row .lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
  }
  .ai-preview .spec-row .val {
    font-size: 13.5px; color: var(--text);
  }
  .ai-preview .disclaimer {
    font-size: 12px; color: var(--muted); margin-top: 14px;
    font-style: italic;
  }

  /* AI loading state */
  .ai-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 24px; text-align: center;
  }
  .ai-loading .spinner {
    width: 56px; height: 56px; border-radius: 50%;
    border: 3px solid var(--surface-2);
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
    margin-bottom: 18px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .ai-loading h4 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; margin: 0 0 6px; }
  .ai-loading p { color: var(--muted); margin: 0; max-width: 360px; }

  /* Status tracker (step 4 success) — centered (locked 2026-05-17) */
  .qtracker {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 18px auto 24px;
    flex-wrap: wrap;
  }
  .qtracker .node {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
    color: var(--text);
  }
  .qtracker .node .dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); color: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .qtracker .node.pending .dot {
    background: var(--surface-2); color: var(--muted);
    border: 1.5px solid var(--border);
  }
  .qtracker .node.pending { color: var(--muted); }
  .qtracker .conn {
    width: 28px; height: 2px; background: var(--accent);
    border-radius: 1px;
  }
  .qtracker .conn.pending { background: var(--border); }

  /* Embedded scheduling — site-survey booking widget. Static availability
     for now; will be wired to a live capacity calendar so unavailable days
     can be greyed out and selectable slots reflect real openings.
     Locked layout 2026-05-17: 10-day (2-week weekday) view with bigger
     day cards, centered actions, max-width 720px. */
  .scheduler-wrap {
    max-width: 720px; margin: 24px auto 0;
  }
  .scheduler {
    background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px; margin-top: 14px;
  }
  .scheduler-lg { padding: 24px 26px; }
  .scheduler-head { text-align: center; margin-bottom: 16px; }
  .scheduler h6 {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 6px;
  }
  .scheduler-sub {
    font-size: 13.5px; color: var(--muted); margin: 0;
  }
  .scheduler .days {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px;
    margin-bottom: 18px;
  }
  @media (max-width: 880px) { .scheduler .days { grid-template-columns: repeat(5, 1fr); } }
  @media (max-width: 480px) { .scheduler .days { grid-template-columns: repeat(4, 1fr); } }
  .slots-label {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 10px;
  }
  .scheduler-actions {
    margin-top: 18px;
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  }
  @media (max-width: 480px) {
    .scheduler-actions { flex-direction: column-reverse; align-items: stretch; }
  }
  .scheduler .day {
    padding: 10px 8px; border-radius: 10px;
    background: var(--surface); border: 1.5px solid var(--border);
    text-align: center; cursor: pointer;
    transition: border-color 240ms, background 240ms,
                transform 200ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1);
  }
  .scheduler-lg .day { padding: 14px 10px; }
  .scheduler-lg .day .dn { font-size: 22px; }
  .scheduler-lg .slot {
    padding: 10px 18px; font-size: 13.5px;
  }
  .scheduler .day:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .scheduler .day.selected {
    border-color: transparent;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    box-shadow:
      0 4px 10px rgba(16,34,34,0.10),
      0 14px 30px -10px color-mix(in srgb, var(--accent) 65%, transparent);
  }
  .scheduler .day .wd {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 2px;
  }
  .scheduler .day.selected .wd { color: rgba(255,255,255,0.85); }
  .scheduler .day .dn {
    font-family: var(--font-heading); font-weight: 700; font-size: 18px;
    color: var(--text);
  }
  .scheduler .day.selected .dn { color: #FFFFFF; }
  .scheduler .slots {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .scheduler .slot {
    padding: 8px 14px; border-radius: 999px;
    background: var(--surface); border: 1.5px solid var(--border);
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
    color: var(--text); cursor: pointer;
    transition: border-color 200ms, background 200ms, color 200ms;
  }
  .scheduler .slot:hover { border-color: var(--accent); color: var(--accent); }
  .scheduler .slot.selected {
    border-color: var(--accent); color: #FFFFFF;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
  }

  /* Audience-aware language hints */
  .audience-label {
    display: inline-block;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }

  /* Energy report + drawings — two dropzones side by side */
  .upload-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-bottom: 14px;
  }
  @media (max-width: 720px) { .upload-pair { grid-template-columns: 1fr; } }
  .upload-pair .dropzone {
    padding: 24px 18px;
    min-height: 180px;
  }
  .upload-pair .dropzone .ttl { font-size: 14px; }
  .upload-pair .dropzone .sub { font-size: 11.5px; }
  .upload-pair .dropzone .icon-wrap { width: 44px; height: 44px; }
  .upload-pair .dropzone .icon-wrap svg { width: 22px; height: 22px; }
  .upload-pair .dropzone .badge-tag {
    position: absolute; top: 10px; right: 10px;
    font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
    padding: 3px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .upload-pair .dropzone { position: relative; }

  /* Energy match results panel — shows extracted targets vs product picks */
  .energy-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 14px;
  }
  .energy-block .lab {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 10px;
  }
  .energy-block h5 {
    font-family: var(--font-heading); font-weight: 700; font-size: 20px;
    margin: 0 0 14px;
  }
  .energy-targets {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px; border-bottom: 1px dashed var(--border);
  }
  .energy-target {
    display: flex; flex-direction: column; gap: 2px;
  }
  .energy-target .t-lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
  }
  .energy-target .t-val {
    font-family: var(--font-mono); font-size: 14px; color: var(--text); font-weight: 600;
  }
  .energy-target .t-note { font-size: 11px; color: var(--muted); }

  /* Product match cards */
  .match-list {
    display: flex; flex-direction: column; gap: 8px;
  }
  .match-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    align-items: center;
    transition: border-color 200ms, background 200ms;
  }
  .match-row.best {
    border-color: color-mix(in srgb, var(--success) 50%, var(--border));
    background: color-mix(in srgb, var(--success) 6%, var(--surface));
  }
  .match-row .rank {
    width: 28px; height: 28px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  }
  .match-row.best .rank {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
  }
  .match-row .info { min-width: 0; }
  .match-row .info .name {
    font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--text);
    margin-bottom: 2px;
  }
  .match-row .info .spec {
    font-size: 12px; color: var(--muted); font-family: var(--font-mono);
  }
  .match-row .meet {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
  }
  .match-row.partial .meet {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
  }

  /* =========================================================
     LEGACY STAFF REVIEW (kept below for reference)
     ========================================================= */
  .quote-shell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
  }
  .quote-shell h3 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 28px; margin: 0 0 6px;
  }
  .quote-shell .lede {
    font-size: 14px; color: var(--muted); margin: 0 0 24px;
  }
  .quote-shell .grid-2 { gap: 16px; }

  /* Drag-and-drop file upload zone */
  .dropzone {
    display: block;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg);
    cursor: pointer;
    transition: border-color 240ms, background 240ms cubic-bezier(.2,.7,.2,1),
                transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 320ms cubic-bezier(.2,.7,.2,1);
    position: relative; overflow: hidden;
  }
  /* Light sweep on hover — matches the CTA family */
  .dropzone::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-22deg);
    transition: left 720ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
    z-index: 0;
  }
  .dropzone:hover, .dropzone.dragging {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--bg));
    transform: translateY(-2px);
    box-shadow:
      0 4px 10px rgba(16,34,34,0.06),
      0 14px 32px -12px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .dropzone.dragging { border-style: solid; }
  .dropzone:hover::before { left: 130%; }
  /* Keep dropzone content above the sweep */
  .dropzone .icon-wrap, .dropzone .ttl, .dropzone .sub, .dropzone .badge-tag { position: relative; z-index: 1; }
  .dropzone .icon-wrap {
    width: 56px; height: 56px; margin: 0 auto 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .dropzone:hover .icon-wrap, .dropzone.dragging .icon-wrap {
    transform: scale(1.06) rotate(-3deg);
  }
  .dropzone .ttl {
    font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text);
    margin-bottom: 4px;
  }
  .dropzone .sub {
    font-size: 12.5px; color: var(--muted);
  }
  .dropzone .browse {
    color: var(--accent); font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .dropzone input[type="file"] {
    position: absolute; opacity: 0; pointer-events: none;
  }

  /* File list — rows of uploaded files */
  .file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .file-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-body); font-size: 13px;
  }
  .file-row .ic {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
  }
  .file-row .meta { flex: 1; min-width: 0; }
  .file-row .meta .name {
    font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .file-row .meta .size { font-size: 11.5px; color: var(--muted); }
  .file-row .remove {
    background: transparent; border: none; cursor: pointer;
    color: var(--muted); padding: 6px; border-radius: 6px;
    transition: color 180ms, background 180ms;
  }
  .file-row .remove:hover { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }

  /* Success state shown after submit */
  .quote-success {
    text-align: center; padding: 48px 24px;
  }
  .quote-success .check {
    width: 64px; height: 64px; margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
  }
  .quote-success h4 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; margin: 0 0 6px; }
  .quote-success p { color: var(--muted); margin: 0 0 18px; }

  /* ======= STAFF REVIEW INTERFACE ======= */
  .review-shell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .review-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .review-header .left { display: flex; align-items: center; gap: 14px; }
  .review-header .id {
    font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  }
  .review-header h4 {
    font-family: var(--font-heading); font-weight: 700; font-size: 19px; margin: 0;
  }
  .review-header .meta { font-size: 12px; color: var(--muted); }

  .review-body {
    display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 0;
    min-height: 540px;
  }
  @media (max-width: 980px) { .review-body { grid-template-columns: 1fr; } }

  .drawing-pane {
    background: var(--bg);
    border-right: 1px solid var(--border);
    padding: 22px;
    display: flex; flex-direction: column; gap: 14px;
  }
  @media (max-width: 980px) { .drawing-pane { border-right: none; border-bottom: 1px solid var(--border); } }

  .drawing-frame {
    flex: 1;
    background:
      linear-gradient(165deg,
        rgba(12, 34, 54, 0.55) 0%,
        rgba(20, 64, 92, 0.45) 35%,
        rgba(31, 107, 115, 0.32) 70%,
        rgba(42, 139, 131, 0.22) 100%);
    border-radius: 10px;
    min-height: 360px;
    position: relative; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: flex-start;
    padding: 18px;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
  }
  .drawing-frame::before {
    content: ""; position: absolute; inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255,255,255,0.08) 28px, rgba(255,255,255,0.08) 29px),
      repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(255,255,255,0.08) 28px, rgba(255,255,255,0.08) 29px);
    pointer-events: none;
  }
  .drawing-frame .stamp {
    background: rgba(16,34,34,0.85);
    color: #DCE6E7;
    font-family: var(--font-body); font-size: 11px;
    padding: 8px 12px; border-radius: 8px;
    z-index: 1;
    letter-spacing: 0.06em;
  }
  .drawing-toolbar {
    display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted);
  }
  .drawing-toolbar .btn-icon {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 180ms, color 180ms, background 180ms;
  }
  .drawing-toolbar .btn-icon:hover { border-color: var(--accent); color: var(--accent); }

  /* Extraction panel — list of AI-extracted fields */
  .extract-pane {
    padding: 22px; display: flex; flex-direction: column; gap: 14px;
  }
  .extract-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .extract-toolbar .summary {
    font-family: var(--font-body); font-size: 13px; color: var(--text);
  }
  .extract-toolbar .summary strong { color: var(--accent); font-weight: 700; }
  .extract-rows {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 460px; overflow-y: auto;
    padding-right: 4px;
  }
  .extract-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative;
    transition:
      transform 320ms cubic-bezier(.2,.7,.2,1),
      border-color 280ms cubic-bezier(.2,.7,.2,1),
      background 280ms cubic-bezier(.2,.7,.2,1),
      box-shadow 360ms cubic-bezier(.2,.7,.2,1);
  }
  .extract-row:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 4%, var(--bg));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
      0 12px 28px -10px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .extract-row.confirmed {
    background: color-mix(in srgb, var(--success) 8%, var(--bg));
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  }
  /* Confirmed row hover — keeps the green identity, still lifts */
  .extract-row.confirmed:hover {
    border-color: color-mix(in srgb, var(--success) 60%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, var(--bg));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent),
      0 12px 28px -10px color-mix(in srgb, var(--success) 40%, transparent);
  }
  .extract-row .field {
    grid-column: 1; grid-row: 1;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase;
  }
  /* Confidence pills — gradient bubble, inset highlight, soft outer
     glow, animated pulsing dot. The chip's text color drives every
     accent (currentColor) so all three states share one rule. */
  .extract-row .conf {
    grid-column: 2; grid-row: 1;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, currentColor 22%, transparent) 0%,
        color-mix(in srgb, currentColor 10%, transparent) 100%);
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    box-shadow:
      inset 0 1px 0 0 color-mix(in srgb, currentColor 22%, transparent),
      0 1px 4px -1px color-mix(in srgb, currentColor 26%, transparent);
    transition:
      transform 240ms cubic-bezier(.2,.7,.2,1),
      box-shadow 280ms cubic-bezier(.2,.7,.2,1),
      border-color 240ms;
    position: relative; overflow: hidden;
  }
  /* Soft sheen sweep that crosses the chip on row hover */
  .extract-row .conf::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg,
      transparent 30%,
      color-mix(in srgb, currentColor 14%, transparent) 50%,
      transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  @keyframes extract-conf-sheen {
    from { transform: translateX(-120%); }
    to   { transform: translateX(120%); }
  }
  .extract-row:hover .conf {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, currentColor 45%, transparent);
    box-shadow:
      inset 0 1px 0 0 color-mix(in srgb, currentColor 28%, transparent),
      0 4px 12px -2px color-mix(in srgb, currentColor 45%, transparent);
  }
  .extract-row:hover .conf::before {
    animation: extract-conf-sheen 900ms cubic-bezier(.2,.7,.2,1) forwards;
  }

  /* Pulsing dot — same rhythm as the nav active-link dot */
  .extract-row .conf .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    animation: extract-conf-dot-pulse 2.6s ease-in-out infinite;
  }
  @keyframes extract-conf-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%,  transparent); }
  }

  /* Per-state color (drives everything above via currentColor) */
  .extract-row .conf.high { color: var(--success); }
  .extract-row .conf.med  { color: var(--warning); }
  .extract-row .conf.low  { color: var(--error); }

  .extract-row .value {
    grid-column: 1 / -1; grid-row: 2;
    font-family: var(--font-body); font-size: 14px; color: var(--text);
    background: transparent; border: none; padding: 4px 0;
    width: 100%;
    transition: color 200ms;
  }
  .extract-row .value:focus { outline: none; color: var(--accent); }
  .extract-row .actions {
    grid-column: 1 / -1; grid-row: 3;
    display: flex; gap: 8px; align-items: center; justify-content: flex-end;
    margin-top: 4px;
  }

  /* Action buttons — accent halo + lift on hover, slight scale,
     gradient fill on confirm. Same Glass Pane language as the rest. */
  .extract-row .actions button {
    width: 30px; height: 30px; border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition:
      color 200ms,
      border-color 220ms,
      background 240ms,
      transform 220ms cubic-bezier(.2,.7,.2,1),
      box-shadow 280ms cubic-bezier(.2,.7,.2,1);
  }
  .extract-row .actions button::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg,
      transparent 30%,
      rgba(255,255,255,0.18) 50%,
      transparent 70%);
    transform: translateX(-140%);
    pointer-events: none;
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  }
  .extract-row .actions button:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 10%, transparent),
        color-mix(in srgb, var(--accent) 18%, transparent));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent),
      0 6px 14px -3px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .extract-row .actions button:hover::before { transform: translateX(140%); }
  .extract-row .actions button:active { transform: translateY(0) scale(0.96); }

  /* Confirm — same treatment but tinted with success */
  .extract-row .actions .confirm:hover {
    color: var(--success); border-color: var(--success);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--success) 14%, transparent),
        color-mix(in srgb, var(--success) 24%, transparent));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent),
      0 6px 14px -3px color-mix(in srgb, var(--success) 50%, transparent);
  }
  /* Confirmed steady-state — soft success gradient holds */
  .extract-row.confirmed .actions .confirm {
    color: var(--success); border-color: var(--success);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--success) 18%, transparent),
        color-mix(in srgb, var(--success) 28%, transparent));
    box-shadow:
      inset 0 1px 0 0 color-mix(in srgb, var(--success) 24%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--success) 32%, transparent);
  }
  .extract-row .actions .label {
    font-family: var(--font-body); font-size: 11px; color: var(--muted); margin-right: auto;
  }

  /* Quote draft preview */
  .quote-draft {
    margin-top: 14px;
    padding: 18px 22px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .quote-draft h5 {
    font-family: var(--font-heading); font-weight: 700; font-size: 18px;
    margin: 0 0 12px;
  }
  .quote-draft .line {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 8px 0;
    font-family: var(--font-body); font-size: 13px;
    border-bottom: 1px dashed var(--border);
  }
  .quote-draft .line:last-of-type { border-bottom: none; }
  .quote-draft .line .name { color: var(--text); }
  .quote-draft .line .amount { font-family: var(--font-mono); color: var(--text); }
  .quote-draft .total {
    display: flex; justify-content: space-between; padding-top: 12px; margin-top: 8px;
    border-top: 2px solid var(--text);
    font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  }
  .quote-draft .total .amount { color: var(--accent); font-family: var(--font-heading); }

  /* =========================================================
     FOOTER — compact band with popover categories
     Single ~52px top row (brand, category triggers, phone CTA)
     and ~32px bottom strip (legal · meta). Category triggers
     open popovers that float upward with the same Mist/Night
     chrome language used everywhere else in the site.
     ========================================================= */

  /* Theme-scoped variable overrides (light = Mist, dark = Night) */
  footer.site {
    --bg:        #4A6770;
    --surface:   #54727A;
    --surface-2: #5F7D86;
    --text:      #F0F5F6;
    --muted:     #C3CED2;
    --border:    #708890;
    --accent:    #5FCFC8;
    color: #F0F5F6;
  }
  [data-theme="dark"] footer.site {
    --bg:        #14283A;
    --surface:   #1D3447;
    --surface-2: #264258;
    --text:      #DCE6E7;
    --muted:     #8395A0;
    --border:    #2C4358;
    --accent:    #5FCFC8;
    color: #DCE6E7;
  }

  /* Container — light theme (Tidewater Mist) */
  footer.site {
    margin-top: 48px;
    padding: 0;
    background:
      linear-gradient(180deg,
        #506E78 0%,
        #4A6770 50%,
        #557580 100%);
    border: 1px solid #708890;
    border-radius: var(--radius-lg);
    position: relative;
    /* No overflow:hidden — popovers float above the band */
    box-shadow:
      inset 0 1px 0 0 color-mix(in srgb, #5FCFC8 22%, transparent),
      0 18px 40px -24px rgba(20, 40, 58, 0.32);
  }
  /* Container — dark theme (Tidewater Night) */
  [data-theme="dark"] footer.site {
    background:
      linear-gradient(180deg,
        #182D40 0%,
        #14283A 50%,
        #18324B 100%);
    border: 1px solid #2C4358;
    box-shadow:
      inset 0 1px 0 0 color-mix(in srgb, #5FCFC8 18%, transparent),
      0 18px 40px -24px rgba(0, 0, 0, 0.45);
  }

  /* Accent hairline glow along the very top edge */
  footer.site::before {
    content: "";
    position: absolute; top: 0; left: 28px; right: 28px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, #5FCFC8 55%, transparent) 50%,
      transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Top stack — everything centered vertically */
  footer.site .top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 32px 28px 28px;
    position: relative;
  }

  /* Brand cluster — logo on top, wordmark below, centered */
  footer.site .brand-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }
  footer.site .brand-cluster .brand-link { display: inline-flex; align-items: center; }
  footer.site .brand-cluster .brand-link .logo-wrap img {
    width: 84px; height: auto; display: block;
  }
  footer.site .brand-cluster .wm {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 22px; letter-spacing: -0.005em; line-height: 1.1;
    color: var(--text);
    transition: color 240ms cubic-bezier(.2,.7,.2,1);
  }
  footer.site .brand-cluster .wm .amp {
    font-style: italic; font-weight: 500; color: var(--accent);
    font-size: 1.3em; padding: 0 3px; vertical-align: -0.08em;
  }
  footer.site .brand-cluster .brand-link:hover ~ .wm,
  footer.site .brand-cluster:hover .wm { color: var(--text); }

  /* Menu — horizontal row of category triggers, centered */
  footer.site .menu {
    display: flex; gap: 6px; align-items: center;
    flex: 0 0 auto; justify-content: center;
    flex-wrap: wrap;
  }
  footer.site .menu .item { position: relative; }
  footer.site .menu .trigger {
    background: transparent; border: none; cursor: pointer;
    color: var(--text);
    font-family: var(--font-body); font-size: 14px; font-weight: 500;
    padding: 9px 14px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 8px;
    position: relative;
    letter-spacing: 0;
    transition: color 220ms, background-color 220ms,
                letter-spacing 320ms cubic-bezier(.2,.7,.2,1);
  }
  footer.site .menu .trigger .caret {
    width: 8px; height: 5px; background: currentColor;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  }
  footer.site .menu .item:hover > .trigger,
  footer.site .menu .item.open > .trigger {
    color: var(--accent);
    letter-spacing: 0.08em;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  footer.site .menu .item:hover > .trigger .caret,
  footer.site .menu .item.open > .trigger .caret {
    transform: rotate(180deg);
  }

  /* Popover */
  footer.site .menu .popover {
    position: absolute;
    bottom: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 240px;
    background: linear-gradient(180deg, #506E78 0%, #4A6770 100%);
    border: 1px solid #708890;
    border-radius: 12px;
    padding: 18px 18px 14px;
    box-shadow:
      0 24px 48px -16px rgba(20, 40, 58, 0.45),
      inset 0 1px 0 0 color-mix(in srgb, #5FCFC8 24%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms cubic-bezier(.2,.7,.2,1),
                transform 240ms cubic-bezier(.2,.7,.2,1),
                visibility 0s linear 240ms;
    z-index: 20;
  }
  [data-theme="dark"] footer.site .menu .popover {
    background: linear-gradient(180deg, #182D40 0%, #14283A 100%);
    border-color: #2C4358;
    box-shadow:
      0 24px 48px -16px rgba(0,0,0,0.6),
      inset 0 1px 0 0 color-mix(in srgb, #5FCFC8 18%, transparent);
  }
  /* Invisible bridge between popover and trigger so the cursor can travel down */
  footer.site .menu .popover::before {
    content: ""; position: absolute;
    bottom: -14px; left: 0; right: 0; height: 14px;
  }
  /* Caret pointing down to the trigger */
  footer.site .menu .popover::after {
    content: ""; position: absolute;
    bottom: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: linear-gradient(180deg, #557580 0%, #4A6770 100%);
    border: 1px solid #708890;
    border-top: none; border-left: none;
    z-index: -1;
  }
  [data-theme="dark"] footer.site .menu .popover::after {
    background: linear-gradient(180deg, #18324B 0%, #14283A 100%);
    border-color: #2C4358;
  }
  /* Open states — hover OR click pinned */
  footer.site .menu .item:hover > .popover,
  footer.site .menu .item.open > .popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 240ms cubic-bezier(.2,.7,.2,1),
                transform 240ms cubic-bezier(.2,.7,.2,1),
                visibility 0s;
  }
  /* Popover heading */
  footer.site .menu .popover h6 {
    font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 12px;
    padding-bottom: 8px;
    position: relative;
  }
  footer.site .menu .popover h6::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 24px; height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 2px;
  }
  /* Popover link list */
  footer.site .menu .popover .links {
    display: flex; flex-direction: column; gap: 2px;
  }
  footer.site .menu .popover .links a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text); text-decoration: none;
    font-size: 13.5px; font-weight: 500;
    padding: 7px 10px; border-radius: 6px;
    letter-spacing: 0;
    position: relative;
    transition: color 200ms, letter-spacing 280ms cubic-bezier(.2,.7,.2,1),
                transform 200ms cubic-bezier(.2,.7,.2,1),
                background-color 200ms;
  }
  footer.site .menu .popover .links a:hover {
    color: var(--accent);
    letter-spacing: 0.03em;
    transform: translateX(2px);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  /* Contact popover variant — address block + email block */
  footer.site .menu .popover .info {
    display: flex; flex-direction: column; gap: 10px;
    font-size: 13px; color: var(--muted); line-height: 1.55;
  }
  footer.site .menu .popover .info strong {
    color: var(--text); font-weight: 600;
  }

  /* Phone CTA — centered in its own row below the category triggers */
  footer.site .cta-cluster {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
  }
  footer.site .phone-cta {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 600;
    letter-spacing: 0.01em;
    border: none;
    box-shadow:
      0 2px 4px rgba(16,34,34,0.10),
      0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms cubic-bezier(.2,.7,.2,1),
                filter 200ms;
    position: relative; overflow: hidden;
  }
  footer.site .phone-cta::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 700ms cubic-bezier(.2,.7,.2,1);
  }
  footer.site .phone-cta:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow:
      0 4px 8px rgba(16,34,34,0.12),
      0 14px 36px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  }
  footer.site .phone-cta:hover::before { left: 120%; }
  footer.site .phone-cta svg { width: 14px; height: 14px; }

  /* Bottom strip — centered */
  footer.site .bottom {
    padding: 14px 28px 16px;
    font-size: 11.5px;
    color: var(--muted);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    gap: 6px;
    text-align: center;
    position: relative;
  }
  footer.site .bottom::before {
    content: ""; position: absolute;
    top: 0; left: 28px; right: 28px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 30%, var(--border)) 30%,
      color-mix(in srgb, var(--accent) 30%, var(--border)) 70%,
      transparent 100%);
  }
  footer.site .bottom .legal { letter-spacing: 0.01em; }
  footer.site .bottom .legal a {
    color: inherit; text-decoration: none;
    transition: color 180ms;
  }
  footer.site .bottom .legal a:hover { color: var(--accent); }
  footer.site .bottom .meta {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in srgb, var(--muted) 85%, var(--accent));
  }

  /* Responsive */
  @media (max-width: 820px) {
    footer.site .top-row { gap: 18px; padding: 26px 18px 22px; }
    footer.site .brand-cluster .brand-link .logo-wrap img { width: 72px; }
    footer.site .brand-cluster .wm { font-size: 20px; }
    footer.site::before, footer.site .bottom::before { left: 18px; right: 18px; }
    footer.site .bottom { padding: 14px 18px 16px; }
  }
  @media (max-width: 520px) {
    footer.site .top-row { gap: 16px; padding: 24px 16px 20px; }
    footer.site .brand-cluster .brand-link .logo-wrap img { width: 64px; }
    footer.site .brand-cluster .wm { font-size: 18px; }
    footer.site .menu .trigger { padding: 8px 12px; font-size: 13px; }
    footer.site .menu .popover { min-width: min(260px, 88vw); }
  }

  /* =========================================================
     11 — BC STEP CODE CALCULATOR (centerpiece)
     ========================================================= */
  .stepcode-calc {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px;
  }
  @media (max-width: 980px) { .stepcode-calc { grid-template-columns: 1fr; } }

  .sc-panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    transition:
      border-color 280ms cubic-bezier(.2,.7,.2,1),
      box-shadow 320ms cubic-bezier(.2,.7,.2,1);
  }
  .sc-panel::before {
    content: ""; position: absolute;
    top: -1px; left: 20px; right: 20px; height: 1px;
    background: linear-gradient(90deg,
      transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
    pointer-events: none;
  }
  .sc-panel:hover, .sc-panel:focus-within {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent),
      0 14px 30px -14px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .sc-panel h3 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 22px; margin: 0 0 4px;
  }
  .sc-panel .sub {
    color: var(--muted); font-size: 13px;
    margin: 0 0 22px;
  }

  /* Configuration panel — centered layout */
  .sc-inputs { text-align: center; }
  .sc-inputs > h3,
  .sc-inputs > .sub { text-align: center; }

  /* Performance panel — same centered layout for continuity */
  .sc-outputs { text-align: center; }
  .sc-outputs > h3,
  .sc-outputs > .sub { text-align: center; }

  /* Field block */
  .sc-field { margin-bottom: 18px; }
  .sc-field > label {
    display: block;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 10px; padding: 0;
    text-align: center;
  }

  /* Chip selector — centered, equal width per chip so rows line up
     visually across fields with different chip counts. */
  .sc-chips {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: center;
  }
  .sc-chip {
    flex: 0 1 auto;
    min-width: 116px;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text);
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    position: relative; overflow: hidden;
    text-align: center;
    transition:
      color 220ms,
      background 280ms cubic-bezier(.2,.7,.2,1),
      border-color 220ms,
      transform 220ms cubic-bezier(.2,.7,.2,1),
      box-shadow 280ms cubic-bezier(.2,.7,.2,1),
      letter-spacing 280ms;
  }
  .sc-chip::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg,
      transparent 30%,
      rgba(255,255,255,0.20) 50%,
      transparent 70%);
    transform: translateX(-140%);
    pointer-events: none;
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  }
  .sc-chip:hover {
    border-color: var(--accent); color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .sc-chip:hover::before { transform: translateX(140%); }
  .sc-chip.selected {
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow:
      0 2px 4px rgba(16,34,34,0.10),
      0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .sc-chip.selected:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
  }

  /* Native select dressed up to match the inputs — centered, with a
     constrained width so it lines up under the chip rows above. */
  .sc-field select {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    appearance: none; -webkit-appearance: none;
    font-family: var(--font-body); font-size: 14px; color: var(--text);
    background:
      linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 3%, transparent)) ,
      var(--bg);
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 12px 38px 12px 16px;
    cursor: pointer;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' width='10' height='6'><path fill='%232A8B83' d='M0 0l4 5 4-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    text-align: center;
    text-align-last: center;
    transition: border-color 240ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms;
  }
  .sc-field select:hover, .sc-field select:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  /* Output side */
  .sc-target-row {
    font-size: 13px; color: var(--muted);
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .sc-target-row strong { color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }

  .sc-metric {
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    position: relative;
    transition:
      transform 280ms cubic-bezier(.2,.7,.2,1),
      border-color 240ms cubic-bezier(.2,.7,.2,1),
      box-shadow 320ms cubic-bezier(.2,.7,.2,1);
  }
  .sc-metric:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .sc-metric .m-lbl {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 6px;
  }
  .sc-metric .m-val {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 26px; color: var(--text);
    display: flex; align-items: baseline; justify-content: center; gap: 6px;
    line-height: 1;
    margin-bottom: 10px;
    transition: color 240ms;
  }
  .sc-metric .m-val .m-unit {
    font-family: var(--font-body); font-size: 12px; font-weight: 500;
    color: var(--muted); letter-spacing: 0.04em;
  }
  .sc-metric .m-bar {
    height: 6px; border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-bottom: 8px;
  }
  .sc-metric .m-fill {
    height: 100%; border-radius: inherit;
    width: var(--pct, 0%);
    background: linear-gradient(90deg, #2A8B83 0%, #5FCFC8 100%);
    transition: width 480ms cubic-bezier(.2,.7,.2,1), background 320ms;
  }
  .sc-metric.exceeds .m-fill {
    background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 40%, var(--accent)));
  }
  .sc-metric.below .m-fill {
    background: linear-gradient(90deg, var(--error), var(--warning));
  }
  .sc-metric .m-target {
    font-size: 12px; color: var(--muted);
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  }
  .sc-metric .m-target strong { color: var(--text); font-weight: 600; }
  .sc-metric .m-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  }
  .sc-metric .m-status.meets {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  }
  .sc-metric .m-status.exceeds {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .sc-metric .m-status.below {
    color: var(--error);
    background: color-mix(in srgb, var(--error) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--error) 28%, transparent);
  }
  /* Informational state — used by SHGC since it's a design choice,
     not a hard pass/fail target. Neutral muted appearance. */
  .sc-metric .m-status.note {
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
  }
  .sc-metric:hover .m-status { transform: translateY(-1px); }

  /* Summary pill — centered for continuity with the rest of the panel */
  .sc-summary {
    margin: 18px 0 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, var(--surface)),
        var(--surface) 70%);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 14px; font-weight: 600;
    text-align: center;
  }
  .sc-summary.all-pass {
    color: var(--success);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--success) 14%, var(--surface)),
        var(--surface) 70%);
    border-color: color-mix(in srgb, var(--success) 32%, var(--border));
  }
  .sc-summary.all-fail {
    color: var(--error);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--error) 14%, var(--surface)),
        var(--surface) 70%);
    border-color: color-mix(in srgb, var(--error) 32%, var(--border));
  }
  .sc-summary svg { flex: 0 0 auto; }

  /* Product recommendation — centered card with per-metric pills
     that animate to a compatibility state (pass / exceed / fail / note)
     whenever the configuration changes. */
  .sc-rec-h {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
    margin: 22px 0 12px;
    text-align: center;
  }
  .sc-rec {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    text-align: center;
    transition:
      transform 280ms cubic-bezier(.2,.7,.2,1),
      border-color 240ms,
      box-shadow 320ms cubic-bezier(.2,.7,.2,1);
  }
  .sc-rec:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
      0 12px 26px -10px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .sc-rec .r-rank {
    flex: 0 0 28px; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A8B83 0%, #5FCFC8 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .sc-rec .r-info { min-width: 0; }
  .sc-rec .r-name {
    font-size: 14px; font-weight: 600; color: var(--text);
  }

  /* Per-metric pills inside a rec card */
  .sc-rec .r-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
    margin-top: 4px;
  }
  .sc-rec .r-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
    color: var(--muted);
    transition:
      background 360ms cubic-bezier(.2,.7,.2,1),
      border-color 360ms cubic-bezier(.2,.7,.2,1),
      color 360ms cubic-bezier(.2,.7,.2,1);
  }
  /* Compatibility pop — fires on (re)render whenever a pill becomes
     pass or exceed, so the green/cyan animates in each time the
     configuration changes. */
  @keyframes sc-rec-pill-pop {
    0%   { transform: scale(0.94); }
    55%  { transform: scale(1.10); }
    100% { transform: scale(1); }
  }
  .sc-rec .r-pill.pass {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    border-color: color-mix(in srgb, var(--success) 42%, transparent);
    color: var(--success);
    animation: sc-rec-pill-pop 480ms cubic-bezier(.2,.7,.2,1);
  }
  .sc-rec .r-pill.exceed {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent);
    animation: sc-rec-pill-pop 480ms cubic-bezier(.2,.7,.2,1);
  }
  .sc-rec .r-pill.fail {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    border-color: color-mix(in srgb, var(--error) 30%, transparent);
    color: var(--error);
  }
  .sc-rec .r-pill.note {
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    border-color: color-mix(in srgb, var(--muted) 24%, transparent);
    color: var(--muted);
  }
  /* Tiny check icon — shown only when a pill is pass or exceed.
     Scales in alongside the colour shift for a satisfying tick. */
  .sc-rec .r-pill .check {
    width: 11px; height: 11px;
    display: inline-flex;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 260ms 80ms, transform 360ms cubic-bezier(.2,.7,.2,1) 80ms;
  }
  .sc-rec .r-pill.pass .check,
  .sc-rec .r-pill.exceed .check {
    opacity: 1;
    transform: scale(1);
  }
  .sc-rec .r-meet {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
    padding: 4px 12px; border-radius: 999px;
    text-transform: uppercase;
    margin-top: 2px;
  }
  .sc-rec .r-meet.exceeds {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }

  /* Actions row — centered */
  .sc-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    justify-content: center;
    margin-top: 18px;
  }

  /* Provenance line — shows when the targets were last verified
     against the official BC sources. Updated automatically by the
     scheduled quarterly check task. */
  .sc-source {
    margin: 18px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
    font-size: 12px; color: var(--muted);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: center;
    line-height: 1.5;
  }
  .sc-source svg { color: var(--success); flex: 0 0 auto; }
  .sc-source strong { color: var(--text); font-weight: 600; }
  .sc-source a { color: var(--accent); text-decoration: none; font-weight: 500; }
  .sc-source a:hover { text-decoration: underline; }