/* =========================================================
     SELF-HOSTED BRAND FONTS: 12/09/2026
     ---------------------------------------------------------
     Every page used to pull Cormorant Garamond and Inter from
     fonts.googleapis.com, which handed a visitor IP to Google on
     every page view (undisclosed in the privacy policy) and put a
     third party in front of first paint. These are the same brand
     cuts from marketing/truck-wrap/brand-kit/04-fonts, subset to
     Latin plus the arrows, maths and box glyphs the site actually
     uses, as variable woff2: 162 KB for all three, served from our
     own origin and cached with the site.

     They are VARIABLE fonts, so one file covers every weight the
     design uses (Inter 400-700, Cormorant 500-700). Rebuild with:
       python3 -m fontTools.subset <ttf> --unicodes=... --flavor=woff2
     =========================================================  */
  @font-face {
    font-family: 'Inter';
    src: url('fonts/inter-var.woff2') format('woff2-variations'),
         url('fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/cormorant-var.woff2') format('woff2-variations'),
         url('fonts/cormorant-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/cormorant-italic-var.woff2') format('woff2-variations'),
         url('fonts/cormorant-italic-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
  }

  /* =========================================================
     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:     #8A9CA7;
    --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:     #8A9CA7;
    --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: THEME SWAP (Lane D, 21/09/2026) ==============
     catalyst-logo-light.png / catalyst-logo-dark.png replace the old
     no-ampersand catalyst-logo.png in the header/footer brand mark. Both
     images sit in the DOM; CSS shows the one matching data-theme. Every
     page ships data-theme statically and a pre-paint boot script
     re-asserts it, so no prefers-color-scheme fallback is needed here. */
  .logo-img-dark  { display: none !important; }
  .logo-img-light { display: inline-block !important; }
  [data-theme="dark"] .logo-img-light { display: none !important; }
  [data-theme="dark"] .logo-img-dark  { display: inline-block !important; }

  /* ============== 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;
    /* The sheen is clipped by the mark's own alpha, so this MUST track the
       visible logo or the highlight sweeps the wrong silhouette. The light
       and dark marks have different alpha channels (checked, not assumed),
       so one shared mask file will not do. */
    -webkit-mask: url('catalyst-logo-light.png') center / contain no-repeat;
            mask: url('catalyst-logo-light.png') center / contain no-repeat;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
  }
  [data-theme="dark"] a.brand-link .sheen-mask {
    -webkit-mask: url('catalyst-logo-dark.png') center / contain no-repeat;
            mask: url('catalyst-logo-dark.png') center / contain no-repeat;
  }
  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: 18px; 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: 16px; 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: 12px; }
  .btn-lg { padding: 15px 30px; font-size: 16px; }
  .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, .dropdown-menu button[data-option] {
    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, .dropdown-menu button[data-option]::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, .dropdown-menu button[data-option]:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding-left: 22px;
  }
  .dropdown-menu a:hover::before, .dropdown-menu button[data-option]:hover::before { width: 10px; }
  .dropdown-menu button[data-option] { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; min-height: 44px; box-sizing: border-box; }
  .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: 29px; letter-spacing: -0.005em; line-height: 1.05; }
  .nav-a .brand .sub { font-family: var(--font-body); font-size: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 21px; }
    .nav-a .brand .sub { font-size: 11px; }
    .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: 11px; }
  }

  /* =========================================================
     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).
     Lift = -2px per brand-guide § 5 (was -4px; aligned 2026-05-18). */
  .card:hover,
  .project-card:hover,
  .service-tile:hover,
  .stat:hover {
    transform: translateY(-2px);
    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: 13px;
    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, .qflow .aside .card-aside h2 {
    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: 12px; 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: 11px; 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, .qhead h2 {
    font-family: var(--font-heading); font-weight: 700; font-size: 30px;
    margin: 0 0 6px; letter-spacing: -0.01em;
  }
  .qhead p {
    font-size: 14px; 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, .audience-tile h3 {
    font-family: var(--font-heading); font-weight: 700; font-size: 20px;
    margin: 0; color: var(--text);
  }
  .audience-tile p {
    font-size: 13px; 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, .audience-skip .link-btn { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .audience-skip .link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: 44px; }

  /* 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);
  }
  /* The tiles use the Services page's branded line drawings (drawn on a
     64 grid, strokes scaled up 1.6x in the markup to stay crisp small). */
  .ptype-tile .icn svg { width: 100%; height: 100%; }
  .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: 14px; 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: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
  }
  .ai-preview .spec-row .val {
    font-size: 13px; 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, .ai-loading h3 { 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: 12px; 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, .scheduler h2 {
    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: 13px; 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: 13px;
  }
  .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: 12px; 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;
  }

  /* Project files: single unified dropzone (was two side-by-side: drawings + energy report) */
  .upload-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-bottom: 14px;
  }
  .upload-pair-single { grid-template-columns: 1fr; }
  @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: 11px; }
  .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: 11px; 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: 11px; 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: 16px; 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, .quote-shell h2 {
    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: 16px; font-weight: 600; color: var(--text);
    margin-bottom: 4px;
  }
  .dropzone .sub {
    font-size: 12px; 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-empty {
    margin: 0; padding: 14px 16px;
    font-size: 13px; color: var(--muted);
    border: 1px dashed var(--border); border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 40%, transparent);
  }
  .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: 11px; 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, .quote-success h3 { 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; }

  /* Thank-you screen, variant A "Quiet confirmation" (Mike, 05/10/2026).
     Tokens only; the approved mockup is the reference. */
  .quote-success.qs-a { padding: 28px 0 8px; }
  .qs-a h3 { font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 8px; }
  .qs-a .qs-ref {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent);
    border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px;
  }
  .qs-a .qs-lead {
    font-size: 14.5px; line-height: 1.6; color: var(--text);
    max-width: 560px; margin: 16px auto 18px;
  }
  .qs-a .qs-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px 22px; margin: 0 0 18px; text-align: left;
  }
  .qs-a .qs-card h4 {
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
  }
  .qs-a .qs-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .qs-a .qs-steps li {
    display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
    font-size: 14px; line-height: 1.5;
  }
  .qs-a .qs-steps .n {
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--muted);
  }
  .qs-a .qs-steps li.done .n { background: var(--accent); border-color: transparent; color: var(--accent-text); }
  .qs-a .qs-steps b { display: block; color: var(--text); font-weight: 600; }
  .qs-a .qs-steps .t { color: var(--muted); font-size: 13px; }
  .qs-a .qs-call .phone-cta {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-family: var(--font-heading); font-size: 24px; font-weight: 700;
    color: var(--text); text-decoration: none; transition: color 200ms;
  }
  .qs-a .qs-call .phone-cta:hover { color: var(--accent); }
  .qs-a .qs-call .phone-cta svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
  .qs-a .qs-call .hint { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .qs-narrow { display: none; }
  @media (max-width: 600px) {
    .qs-wide { display: none; }
    .qs-narrow { display: inline; }
    .quote-success.qs-a { padding-top: 12px; }
    .qs-a .check { width: 52px; height: 52px; margin-bottom: 12px; }
    .qs-a h3 { font-size: 25px; }
    .qs-a .qs-lead { font-size: 14px; margin-top: 14px; }
    .qs-a .qs-card { padding: 16px; }
  }

  /* Send failed: plain words, nothing lost, the phone as a way back. */
  .ai-loading.is-failed {
    align-items: stretch; justify-content: flex-start; text-align: left;
    border: 1px solid var(--error); border-radius: var(--radius); padding: 16px;
  }
  .ai-loading.is-failed .spinner { display: none; }
  .qnav.is-failed [data-next] { display: none; }
  .ai-loading.is-failed h3 {
    font-family: var(--font-body); font-size: 12px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--error); margin: 0 0 6px;
  }
  .ai-loading.is-failed p { max-width: none; color: var(--text); font-size: 14px; line-height: 1.55; }
  .ai-loading.is-failed p a { color: var(--accent); font-weight: 600; white-space: nowrap; }
  .ai-loading.is-failed .btn-primary { margin-top: 12px; min-height: 44px; }
  @media (max-width: 600px) { .ai-loading.is-failed .btn-primary { width: 100%; } }

  /* ======= 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: 20px; 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: 11px; 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:     #8A9CA7;
    --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 .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, footer.site .menu .popover h2 {
    font-family: var(--font-body); font-size: 11px; 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, footer.site .menu .popover h2::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: 13px; 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;
  }

  /* Bottom strip: centered */
  footer.site .bottom {
    padding: 14px 28px 16px;
    font-size: 11px;
    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: 11px;
    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);
  }
  /* :not() keeps the panel-heading size off .sc-rec-h, which became an h3 when
     the Performance panel became an h2 and would otherwise be caught here. */
  .sc-panel h3:not(.sc-rec-h), .sc-panel h2 {
    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 > h2,
  .sc-inputs > .sub { text-align: center; }

  /* Performance panel: same centered layout for continuity */
  .sc-outputs { text-align: center; }
  .sc-outputs > h3, .sc-outputs > h2,
  .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; }
  /* The Building Code's own prescriptive ceiling, shown under the Catalyst
     recommendation. Deliberately quieter than .m-target: it is context, not
     the thing being checked against. */
  .sc-metric .m-code {
    font-size: 11px; color: var(--muted); opacity: 0.85;
    margin-top: 4px; line-height: 1.45;
    display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  }
  .sc-metric .m-code strong { color: var(--text); font-weight: 600; opacity: 0.95; }
  .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: 11px; 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; }

  /* =========================================================
     PRINT
     ---------------------------------------------------------
     Added 2026-08-24. The site defaults to dark, and browsers drop
     backgrounds when printing, so without this a printed or PDF'd page is
     near-white text on white. Architects and GCs print spec pages and the
     Step Code result, so this matters.
     ========================================================= */
  @media print {
    :root,
    [data-theme="dark"],
    [data-theme="dark"] .topbar,
    [data-theme="dark"] .nav-a,
    [data-theme="dark"] footer.site {
      --bg:        #FFFFFF;
      --surface:   #FFFFFF;
      --surface-2: #F2F5F4;
      --text:      #102222;
      --muted:     #40514F;
      --border:    #B9C6C2;
      --accent:    #1F6B65;
    }
    html, body {
      background: #FFFFFF !important;
      color: #102222 !important;
    }
    /* Chrome and calls to action carry no meaning on paper. */
    .site-nav, .topbar, .nav-a,
    footer.site,
    .burger, .theme-toggle,
    .cta-band, .cta-band-actions,
    .skip-link {
      display: none !important;
    }
    a { color: #102222 !important; text-decoration: underline; }
    /* Keep a card or a spec row from splitting across pages. */
    .sc-rec, .spec-row, .teaser-tile, .card, .file-row {
      break-inside: avoid;
      page-break-inside: avoid;
    }
    /* Gradient fills print as muddy blocks. */
    .r-rank {
      background: none !important;
      color: #102222 !important;
      border: 1px solid #B9C6C2;
    }
  }

  /* =========================================================
     MOBILE INPUT ZOOM
     ---------------------------------------------------------
     iOS Safari zooms the viewport whenever a focused input is under 16px.
     The quote form was 14px, so every field jumped on focus. Do not lower.
     ========================================================= */
  @media (max-width: 767px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="search"], input[type="url"],
    select, textarea, .input, .textarea {
      font-size: 16px;
    }
  }