/* ------------------------------------------------------------------
   hvac-premier — A+++ template stylesheet
   PALETTE LAW: zero hardcoded brand colors. Every brand-bearing color is
   var(--wss-*). Defaults live in @layer wss-defaults so the engine's
   unlayered :root override always wins, on every build.
   ------------------------------------------------------------------ */
@layer wss-defaults, base, layout, components, motion, responsive;

/* ------------------------------------------------------------------
   ORIGIN-MATCH LANE (2026-09-04): the donor family's own display faces,
   self-hosted so the compiled build wears the premier design on every
   machine without a CDN round-trip. Latin variable subsets, OFL-licensed:
   Fraunces carries the display serif (roman + italic), Inter the text
   sans, JetBrains Mono the field-ledger microtype.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
}

@layer wss-defaults {
  :root {
    --wss-accent: #c2703b;
    --wss-accent-ink: #98552b;
    --wss-accent-text: #ffffff;
    --wss-surface: #fdfcfa;
    --wss-surface-alt: #f3efe9;
    --wss-slab: #1c1712;
    --wss-slab-ink: #faf6f1;
    --wss-text: #191410;
    --wss-border: #e2dad0;
    --wss-card-title-size: 1.375rem;
    --wss-card-body-size: 1rem;
    --wss-card-pad: 1.5rem;
    --wss-stack-gap: 1.25rem;
    /* THE PREMIER FIELD BANDS. The engine's mirror theme rewrites the slab
       token per client canvas (light prior), so the navy bands that make
       this design the design ride on their own tokens: a light page wearing
       deep navy field bands, warm cream ink on them, and an accent tone
       that holds AA on the navy. The engine never sets these names, so the
       donor defaults survive every theme. */
    --wss-band: #0e1a2b;
    --wss-band-ink: #f6f1e7;
    --wss-band-muted: color-mix(in oklab, #f6f1e7, transparent 38%);
    --wss-band-accent: #e09257;
    /* Button ink on the accent fill. The mirror theme rewrites
       --wss-accent-text per client theme (it can become a mid accent tone),
       so the AA-safe ink on a solid accent fill rides its own token the
       theme never touches. */
    --wss-btn-ink: #ffffff;
    --wss-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --wss-font-text: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --wss-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  }
}

@layer base {
  :root {
    --header-h: 76px;
    --measure: 68ch;
    --radius: 14px;
    --radius-lg: 22px;
    --shell: min(1200px, 100% - 2.5rem);
    /* one z-index scale, no ad-hoc numbers anywhere else */
    --z-base: 0; --z-raised: 10; --z-scrim: 20; --z-header: 60; --z-floater: 70; --z-drawer: 80;
    --ink-soft: color-mix(in oklab, var(--wss-text), transparent 28%);
    --hairline: 1px solid color-mix(in oklab, var(--wss-border), transparent 20%);
    --shadow-card:
      0 1px 1px color-mix(in oklab, var(--wss-text), transparent 92%),
      0 4px 10px color-mix(in oklab, var(--wss-text), transparent 90%),
      0 18px 40px color-mix(in oklab, var(--wss-text), transparent 88%);
    --shadow-lift:
      0 2px 4px color-mix(in oklab, var(--wss-text), transparent 88%),
      0 12px 26px color-mix(in oklab, var(--wss-text), transparent 82%),
      0 32px 70px color-mix(in oklab, var(--wss-text), transparent 80%);
    --step--1: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --step-3: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
    --step-4: clamp(2.25rem, 6vw, 5.5rem);
    color-scheme: light dark;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--wss-surface);
    color: var(--wss-text);
    font-family: var(--wss-font-text);
    font-size: var(--step-0);
    font-optical-sizing: auto;
    line-height: 1.65;
    letter-spacing: 0.002em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  h1, h2, h3, .display {
    font-family: var(--wss-font-display);
    font-weight: 600;
    font-variation-settings: "wght" 600;
    font-optical-sizing: auto;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 0.4em;
    text-wrap: balance;
  }
  h2 { font-size: var(--step-3); letter-spacing: -0.018em; line-height: 1.08; }
  h3 { font-size: var(--wss-card-title-size); letter-spacing: -0.02em; line-height: 1.2; }
  p { margin: 0 0 1em; max-width: var(--measure); }
  img, video, svg { max-width: 100%; display: block; }
  img { height: auto; background: var(--wss-surface-alt); }
  a { color: inherit; }
  /* every anchor target clears the sticky header */
  :target, [id] { scroll-margin-block-start: calc(var(--header-h) + 1rem); }
  ::selection { background: var(--wss-accent); color: var(--wss-accent-text); }
  :focus-visible {
    outline: 3px solid var(--wss-accent);
    outline-offset: 3px;
    border-radius: 6px;
  }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .skip {
    position: absolute; left: 1rem; top: -100px; z-index: var(--z-drawer);
    background: var(--wss-accent); color: var(--wss-accent-text);
    padding: 0.85rem 1.25rem; border-radius: var(--radius); font-weight: 650;
  }
  .skip:focus { top: 1rem; }
}

@layer layout {
  .shell { width: var(--shell); margin-inline: auto; }
  section { padding-block: clamp(3.5rem, 7vw, 7rem); position: relative; }
  .slab {
    background: var(--wss-band);
    color: var(--wss-band-ink);
    --wss-text: var(--wss-band-ink);
    --ink-soft: var(--wss-band-muted);
  }
  .alt { background: var(--wss-surface-alt); }
  .grain::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url("grain.svg");
    background-size: 220px 220px; opacity: 0.03; mix-blend-mode: overlay;
    z-index: var(--z-raised);
  }
  .section-head { max-width: 42ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
  .grid { display: grid; gap: calc(var(--wss-stack-gap) * 1.15); }
  .stack > * + * { margin-top: var(--wss-stack-gap); }
}

@layer components {
  /* ---------- chips, eyebrows ---------- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: var(--wss-font-mono);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0; border-radius: 0; border: none;
    background: none; backdrop-filter: none;
    margin-bottom: 1.1rem;
  }
  .eyebrow::before {
    content: ""; width: 2.4em; height: 2px; border-radius: 1px;
    background: var(--wss-accent);
    box-shadow: none;
  }
  /* ---------- buttons: 48px floor everywhere ---------- */
  .btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 52px; padding: 0.9rem 1.5rem;
    border-radius: var(--radius); border: 2px solid transparent;
    font: inherit; font-size: var(--step-0); font-weight: 680; letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer;
    transition: transform 180ms ease, box-shadow 220ms ease, background-color 180ms ease;
    will-change: transform;
  }
  .btn-primary {
    background: var(--wss-accent); color: var(--wss-accent-text);
    box-shadow: 0 10px 24px color-mix(in oklab, var(--wss-accent), transparent 70%);
  }
  .btn-primary::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 20%,
      color-mix(in oklab, var(--wss-accent-text), transparent 78%) 50%, transparent 80%);
  }
  .btn-primary:hover::after { transform: translateX(120%); transition: transform 620ms ease; }
  .btn-primary:hover { transform: translateY(-2px); }
  .btn-ghost {
    background: color-mix(in oklab, var(--wss-surface), transparent 20%);
    color: var(--wss-text); border-color: var(--wss-border);
    backdrop-filter: blur(8px);
  }
  .btn-ghost:hover { transform: translateY(-2px); border-color: var(--wss-accent); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

  /* ---------- header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    min-height: var(--header-h);
    background: color-mix(in oklab, var(--wss-surface), transparent 8%);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: var(--hairline);
  }
  .header-inner {
    display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.5rem);
    min-height: var(--header-h);
  }
  .brand { display: flex; align-items: center; gap: 0.7rem; min-height: 52px; min-width: min(220px, 100%); text-decoration: none; flex: 1 1 auto; }
  /* logo luminance plate — logo never disappears into a same-luminance header.
     ORIGIN-MATCH: the plate grows to FIT the engine's wordmark logo (the
     mirror theme pins the img sizing, so the plate adapts instead). */
  .logo-plate {
    display: grid; place-items: center; flex: 0 0 auto;
    width: auto; min-width: 46px; max-width: min(13rem, 45vw);
    height: 46px; padding: 5px 10px; border-radius: 12px;
    background: var(--wss-surface-alt);
    border: var(--hairline);
  }
  .logo-plate img { width: 100%; height: 100%; object-fit: contain; background: none; }
  .brand-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .brand-name {
    font-family: var(--wss-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .brand-locality { font-size: 1rem; color: var(--ink-soft); white-space: nowrap; }
  .header-chips { display: flex; gap: 0.5rem; flex: 0 1 auto; min-width: 0; overflow: hidden; }
  @media (max-width: 1439px) { .header-chips { display: none; } }
@media (max-width: 1599px) { .header-chips .chip:nth-child(n+2) { display: none; } }
  .chip {
    font-size: 1rem; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 999px;
    border: var(--hairline); background: var(--wss-surface-alt); white-space: nowrap;
    flex: 0 0 auto; max-width: 30ch; overflow: hidden; text-overflow: ellipsis;
  }
  .nav { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }
  .nav a {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 0.85rem;
    border-radius: 10px; text-decoration: none; font-size: var(--step--1); font-weight: 600;
  }
  .nav a:hover { background: var(--wss-surface-alt); color: var(--wss-accent-ink); }
  .header-cta { flex: 0 0 auto; }
  .nav-toggle { display: none; font-size: 1rem; }

  /* ---------- hero ---------- */
  .hero { position: relative; isolation: isolate; padding-block: clamp(3rem, 8vw, 6.5rem); overflow: clip; }
  .hero-media { position: absolute; inset: 0; z-index: var(--z-base); }
  .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
  /* scrim with an opacity floor — AA holds against the lightest poster band.
     The wash reads from the field band, not the themed slab token: the navy
     cinematic scrim survives every engine theme. */
  .hero-scrim {
    position: absolute; inset: 0; z-index: var(--z-scrim);
    background:
      linear-gradient(100deg,
        color-mix(in oklab, var(--wss-band), transparent 8%) 0%,
        color-mix(in oklab, var(--wss-band), transparent 22%) 46%,
        color-mix(in oklab, var(--wss-band), transparent 46%) 100%),
      radial-gradient(120% 90% at 12% 18%,
        color-mix(in oklab, var(--wss-band-accent), transparent 84%) 0%, transparent 60%);
  }
  .hero-inner { position: relative; z-index: calc(var(--z-scrim) + 1); }
  .hero-grid {
    display: grid; gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
  .hero h1 {
    font-size: var(--step-4);
    max-width: 20ch;
    text-wrap: balance;
    letter-spacing: -0.015em;
  }
  /* THE .text-gradient LAW: accent line is painted from --wss-accent and
     NEVER uses -webkit-text-fill-color: transparent. Flat accent is the
     rendered color; the sheen is a background wash behind the glyphs.
     ORIGIN-MATCH: the accent line is the display serif's italic voice. */
  .accent-line {
    color: var(--wss-accent);
    font-style: italic;
    font-weight: 600;
    position: relative; display: inline-block;
    padding-inline: 0.06em;
    background-image: linear-gradient(100deg,
      color-mix(in oklab, var(--wss-accent), transparent 82%),
      color-mix(in oklab, var(--wss-accent), transparent 94%));
    background-repeat: no-repeat;
    background-size: 100% 0.42em; background-position: 0 88%;
  }
  .hero.on-slab .accent-line { color: var(--wss-band-accent); }
  .accent-line::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 0.09em;
    background: var(--wss-accent); transform-origin: left center; transform: scaleX(var(--wipe, 1));
    border-radius: 2px;
  }
  .hero-lede { font-size: var(--step-1); max-width: 46ch; color: var(--wss-band-ink); opacity: 0.94; }
  .hero.on-slab, .hero.on-slab :is(h1, p) { color: var(--wss-band-ink); }
  .hero-visual {
    position: relative;
    border-radius: var(--radius-lg); overflow: hidden; border: var(--hairline);
    box-shadow: var(--shadow-lift); aspect-ratio: 4 / 5;
  }
  .hero-visual img { width: 100%; height: 100%; object-fit: cover; }
  .hero-safe { max-width: 40rem; } /* copy stays out of the center-safe video zone */

  /* ---------- stats ---------- */
  .stat-strip {
    display: grid; gap: var(--wss-stack-gap);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: clamp(2rem, 4vw, 3rem);
  }
  .stat {
    padding: var(--wss-card-pad); border-radius: var(--radius);
    background: color-mix(in oklab, var(--wss-surface), transparent 6%);
    border: var(--hairline); box-shadow: var(--shadow-card); color: var(--wss-text);
  }
  .stat b {
    display: block; font-family: var(--wss-font-display); font-size: var(--step-3);
    letter-spacing: -0.01em; color: var(--wss-accent-ink); line-height: 1;
  }
  .stat span { font-size: var(--wss-card-body-size); color: var(--ink-soft); }

  /* ---------- ticker ---------- */
  .ticker { border-block: none; background: var(--wss-band); color: var(--wss-band-ink); padding-block: 0.9rem; overflow: hidden; }
  .ticker-track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 38s linear infinite; }
  .ticker-track span {
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-family: var(--wss-font-mono);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    white-space: nowrap; color: var(--wss-band-muted);
  }
  .ticker-track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wss-band-accent); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- bento services ---------- */
  .bento { display: grid; gap: calc(var(--wss-stack-gap) * 1.05); grid-template-columns: repeat(6, 1fr); }
  .card {
    grid-column: span 2;
    position: relative; overflow: hidden;
    padding: var(--wss-card-pad); border-radius: var(--radius-lg);
    background: var(--wss-surface); border: var(--hairline);
    box-shadow: var(--shadow-card);
    transition: transform 220ms ease, box-shadow 260ms ease, border-color 220ms ease;
  }
  .card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--wss-accent),
      color-mix(in oklab, var(--wss-accent), white 30%));
    transform: scaleX(0); transform-origin: left; transition: transform 320ms ease;
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--wss-accent), transparent 55%); }
  .card:hover::before { transform: scaleX(1); }
  .card p { font-size: var(--wss-card-body-size); color: var(--ink-soft); margin-bottom: 0; }
  .card-wide { grid-column: span 3; }
  .card-icon {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in oklab, var(--wss-accent), transparent 86%);
    color: var(--wss-accent-ink); margin-bottom: 1rem; font-weight: 800;
  }
  .card-link {
    display: inline-flex; align-items: center; min-height: 48px; gap: 0.4rem;
    color: var(--wss-accent-ink); font-weight: 650; text-decoration: none; margin-top: 0.5rem;
  }
  .card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* ---------- gallery ---------- */
  .gallery { display: grid; gap: var(--wss-stack-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: var(--hairline); background: var(--wss-surface-alt); box-shadow: var(--shadow-card); }
  .gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
  .gallery figcaption { padding: 0.85rem var(--wss-card-pad); font-size: var(--wss-card-body-size); color: var(--ink-soft); }

  /* ---------- process ---------- */
  .rail { display: grid; gap: calc(var(--wss-stack-gap) * 1.2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
  .rail li { list-style: none; position: relative; padding-top: 3.25rem; }
  .rail li::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; top: -0.35rem; left: 0;
    font-family: var(--wss-font-display); font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1;
    color: color-mix(in oklab, var(--wss-accent), transparent 62%); letter-spacing: -0.02em;
  }

  /* ---------- reviews ---------- */
  .reviews { display: grid; gap: calc(var(--wss-stack-gap) * 1.1); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .review { padding: var(--wss-card-pad); border-radius: var(--radius-lg); background: var(--wss-surface); border: var(--hairline); box-shadow: var(--shadow-card); }
  .review blockquote { margin: 0 0 1rem; font-size: var(--wss-card-body-size); }
  .review-who { display: flex; align-items: center; gap: 0.75rem; }
  .avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    background: color-mix(in oklab, var(--wss-accent), transparent 80%);
    color: var(--wss-accent-ink); font-weight: 760;
  }
  .stars { color: var(--wss-accent-ink); letter-spacing: 0.12em; font-size: 1rem; }

  /* ---------- partners ---------- */
  .partners { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .partners span {
    padding: 0.7rem 1.1rem; border-radius: 999px; border: var(--hairline);
    background: var(--wss-surface-alt); font-size: var(--step--1); font-weight: 620;
  }

  /* ---------- faq ---------- */
  .faq { display: grid; gap: 0.75rem; max-width: 62rem; }
  .faq details {
    border: var(--hairline); border-radius: var(--radius); background: var(--wss-surface);
    padding: 0.35rem var(--wss-card-pad);
  }
  .faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    min-height: 56px; cursor: pointer; font-weight: 660; font-size: var(--step-0); list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--wss-accent-ink); font-size: 1.5rem; line-height: 1; }
  .faq details[open] summary::after { content: "\2212"; }
  .faq p { font-size: var(--wss-card-body-size); color: var(--ink-soft); }

  /* ---------- final cta ---------- */
  .cta-panel {
    border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem);
    background:
      radial-gradient(90% 130% at 88% 8%, color-mix(in oklab, var(--wss-band-accent), transparent 74%) 0%, transparent 62%),
      var(--wss-band);
    color: var(--wss-band-ink); border: var(--hairline);
  }
  .cta-panel h2, .cta-panel p { color: var(--wss-band-ink); }

  /* ---------- footer ---------- */
  .site-footer { background: var(--wss-band); color: var(--wss-band-ink); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
  .footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .site-footer a { color: var(--wss-band-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
  .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .site-footer h3 { font-size: 1.0625rem; letter-spacing: 0.01em; }
  .footer-bottom {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 82%);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    font-size: var(--step--1); opacity: 0.85;
  }

  /* ---------- floater: exactly one, one z-index ---------- */
  .floater {
    position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-floater);
    display: inline-flex; align-items: center; gap: 0.55rem;
    min-height: 52px; padding: 0.85rem 1.35rem; border-radius: 999px;
    background: var(--wss-accent); color: var(--wss-accent-text);
    font-weight: 700; text-decoration: none;
    box-shadow: 0 12px 30px color-mix(in oklab, var(--wss-text), transparent 70%);
  }
}

@layer motion {
  .reveal { opacity: 1; transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  /* FIRST-IMPRESSION LAW (2026-09-04 robustness lane): the hidden state
     is progressive enhancement. It exists ONLY while the root gate
     (html.js-reveal-armed) is present — set by the reveal script
     immediately before observation. A page whose JS never ran, or died
     before arming, keeps every section visible: content is never hidden
     as its pre-JS state. */
  html.js-reveal-armed .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
  .js .reveal.in { opacity: 1; transform: none; transition: opacity 620ms ease, transform 620ms cubic-bezier(.22,.61,.36,1); }
  .js .hero-word { display: inline-block; opacity: 0; transform: translateY(0.5em); animation: rise 700ms cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--d, 0ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .js .accent-line::after { --wipe: 0; animation: wipe 800ms cubic-bezier(.22,.61,.36,1) 520ms forwards; }
  @keyframes wipe { to { --wipe: 1; } }
  @property --wipe { syntax: "<number>"; inherits: true; initial-value: 1; }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .hero-word { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .ticker-track { animation: none; }
    .js .accent-line::after { animation: none; --wipe: 1; }
    .btn, .card { transition: none !important; }
  }
}

@layer responsive {
  @media (max-width: 1023px) {
    .nav {
      position: fixed; inset: var(--header-h) 0 auto 0; z-index: var(--z-drawer);
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--wss-surface); border-bottom: var(--hairline);
      padding: 0.5rem 1.25rem 1.25rem; display: none;
    }
    .nav a { min-height: 52px; font-size: var(--step-0); }
    .nav-open .nav { display: flex; }
    .nav-toggle {
      font-size: 1rem;
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      min-height: 48px; min-width: 48px; padding: 0 0.9rem; border-radius: 12px;
      border: var(--hairline); background: var(--wss-surface-alt); color: var(--wss-text);
      font: inherit; font-size: var(--step--1); font-weight: 640; cursor: pointer;
    }
    .header-chips { display: none; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { aspect-ratio: 16 / 10; }
    .card, .card-wide { grid-column: span 3; }
  }
  @media (max-width: 700px) {
    .card, .card-wide { grid-column: 1 / -1; }
    .bento { grid-template-columns: 1fr; }
  }
  @media (max-width: 479px) {
    .brand-locality { display: none; }
    .header-cta { display: none; }   /* no collision with the hamburger */
    .btn-row .btn-primary, .btn-row .btn-ghost { width: 100%; }
    .floater { left: 1rem; right: 1rem; justify-content: center; }
    .hero h1 { letter-spacing: -0.03em; }
  }
  @media (min-width: 1024px) { .nav-toggle { display: none; } }
  @media print { .site-header, .floater, .ticker { display: none; } }
}


/* ==================================================================
   PROMPT A — conversion surfaces. Palette law holds: every brand-bearing
   value is var(--wss-*); nothing here hardcodes a brand color.
   ================================================================== */
@layer components {
  /* --- trust strip ------------------------------------------------ */
  .trust-strip { padding: 1.5rem 0; background: var(--wss-surface-alt); border-block: var(--hairline); }
  .badge-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem 1.5rem; list-style: none; margin: 0; padding: 0; }
  .badge { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; line-height: 1.35; color: var(--ink-soft); }
  .badge strong { color: var(--wss-text); font-size: 1rem; }
  .badge-mark { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    background: color-mix(in oklab, var(--wss-accent), transparent 86%); color: var(--wss-accent-ink); font-size: .95rem; }

  /* --- before / after slider -------------------------------------- */
  .ba { margin: 0; }
  .ba-stage { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: var(--hairline);
    box-shadow: var(--shadow-card); background: var(--wss-surface-alt); touch-action: pan-y; user-select: none; }
  .ba-img { display: block; width: 100%; height: auto; }
  .ba-clip { position: absolute; inset: 0; width: var(--ba-pos, 50%); overflow: hidden; }
  .ba-clip .ba-img { width: calc(100% * 100 / var(--ba-num, 50)); max-width: none; }
  .ba-tag { position: absolute; top: 1rem; z-index: var(--z-raised); padding: .35rem .7rem; border-radius: 999px;
    font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in oklab, var(--wss-slab), transparent 15%); color: var(--wss-slab-ink); }
  .ba-tag-l { left: 1rem; } .ba-tag-r { right: 1rem; background: var(--wss-accent); color: var(--wss-accent-text); }
  .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); width: 3px; margin-left: -1.5px;
    background: var(--wss-accent-text); box-shadow: 0 0 0 1px color-mix(in oklab, var(--wss-slab), transparent 60%); z-index: var(--z-raised); }
  .ba-grip { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%; background: var(--wss-accent); color: var(--wss-accent-text); font-size: 1.1rem; }
  .ba-control { display: block; margin-top: 1rem; }
  .ba-range { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; cursor: ew-resize; }
  .ba-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--wss-accent), transparent 78%); }
  .ba-range::-moz-range-track { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--wss-accent), transparent 78%); }
  .ba-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%;
    background: var(--wss-accent); border: 3px solid var(--wss-surface); box-shadow: var(--shadow-card); }
  .ba-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--wss-accent); border: 3px solid var(--wss-surface); }
  .ba-range:focus-visible { outline: 3px solid var(--wss-accent-ink); outline-offset: 4px; }
  .ba-caption { margin-top: .85rem; font-size: .95rem; color: var(--ink-soft); max-width: var(--measure); }
  .no-js .ba-clip { position: static; width: auto; }
  .no-js .ba-clip .ba-img { width: 100%; }
  .no-js .ba-stage { display: grid; gap: .5rem; }
  .no-js .ba-handle, .no-js .ba-control { display: none; }

  /* --- offer band -------------------------------------------------- */
  .offer-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .chip-row { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
  .chip { padding: .45rem .85rem; border-radius: 999px; font-size: .95rem; color: inherit;
    background: color-mix(in oklab, currentColor, transparent 92%); border: 1px solid color-mix(in oklab, currentColor, transparent 65%); }
  .capacity { padding: var(--wss-card-pad); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--wss-band-ink), transparent 88%); border: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 78%); }
  .capacity-line { font-size: 1.1rem; margin: .35rem 0 .5rem; }
  .capacity .btn-ghost { background: transparent; color: var(--wss-band-ink); border: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 55%); }
  .capacity .btn-ghost:hover { background: var(--wss-accent); color: var(--wss-accent-text); border-color: var(--wss-accent); }
  .capacity-note { font-size: .95rem; opacity: .82; }

  /* --- service x city ---------------------------------------------- */
  .areas-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .area-cell { display: grid; gap: .2rem; padding: 1rem 1.15rem; min-height: 68px; align-content: center; border-radius: var(--radius);
    border: var(--hairline); background: var(--wss-surface); color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
  .area-cell span { font-size: .92rem; color: var(--ink-soft); }
  .area-cell:hover { border-color: var(--wss-accent); transform: translateY(-2px); }

  /* --- rating chips ------------------------------------------------ */
  .rating-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
  .rating-chip { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border-radius: 999px;
    border: var(--hairline); background: var(--wss-surface-alt); font-size: .95rem; }
  .rating-chip a { min-height: 44px; display: flex; align-items: center; color: var(--wss-accent-ink); }
  .rating-num { font-weight: 700; font-size: 1.05rem; color: var(--wss-accent-ink); }
  .rating-stars { color: var(--wss-accent); letter-spacing: .06em; }

  /* --- gallery thumbs become lightbox triggers ---------------------- */
  .shot { display: block; position: relative; border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; }
  .shot img { display: block; width: 100%; height: auto; }
  .shot::after { content: "\002B"; position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%; background: var(--wss-accent); color: var(--wss-accent-text);
    font-size: 1rem; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
  .shot:hover::after, .shot:focus-visible::after { opacity: 1; transform: none; }
  .shot:focus-visible { outline: 3px solid var(--wss-accent); outline-offset: 3px; }

  /* --- lightbox ----------------------------------------------------- */
  .lightbox[hidden] { display: none; }
  .lightbox { position: fixed; inset: 0; z-index: var(--z-drawer); display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2rem); }
  .lb-scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--wss-slab), transparent 8%); }
  .lb-frame { position: relative; width: min(1100px, 100%); max-height: 92dvh; display: grid; }
  .lb-figure { margin: 0; display: grid; gap: .75rem; justify-items: center; }
  .lb-img { max-width: 100%; max-height: 74dvh; width: auto; height: auto; border-radius: var(--radius); background: var(--wss-surface-alt); }
  .lb-caption { color: var(--wss-band-ink); font-size: 1rem; text-align: center; max-width: 62ch; }
  .lb-count { opacity: .7; margin-left: .4rem; }
  .lb-btn { position: absolute; z-index: var(--z-raised); display: grid; place-items: center; width: 48px; height: 48px;
    border-radius: 50%; border: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 70%);
    background: color-mix(in oklab, var(--wss-band), transparent 25%); color: var(--wss-band-ink); font-size: 1.4rem; cursor: pointer; }
  .lb-btn:hover, .lb-btn:focus-visible { background: var(--wss-accent); color: var(--wss-accent-text); }
  .lb-close { top: -4px; right: 0; }
  .lb-prev { left: 0; top: 50%; translate: 0 -50%; }
  .lb-next { right: 0; top: 50%; translate: 0 -50%; }
  html.lb-open, html.lb-open body { overflow: hidden; }
}

@layer responsive {
  @media (max-width: 900px) {
    .offer-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 620px) {
    .lb-close { top: 0; right: 0; }
    .lb-prev { left: 0; } .lb-next { right: 0; }
    .lb-img { max-height: 62dvh; }
    .ba-tag { font-size: .95rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .area-cell, .shot::after { transition: none; }
  }
}

/* ==================================================================
   ORIGIN-MATCH (2026-09-04) — the premier field ledger. Ports the
   donor family's own signature anatomy: FILE / VOLUME side rails, the
   corner-bracket field frame with REEL / FIELD chips, the SERVICE
   WINDOW and DISPATCH overlay cards, the comfort temperature ticker
   (data-slot contract — see the JSON block in index.html; values are
   engine-fillable and OMIT THEMSELVES when absent, truth law), and
   the free-quotes chip row. Every color rides --wss-* tokens; the
   navy field rides the --wss-band family the mirror theme never
   overrides.
   ================================================================== */
@layer components {
  /* --- FILE / VOLUME side rails (decorative, never content) -------- */
  .field-rail {
    position: absolute; top: 0; bottom: 0; z-index: calc(var(--z-scrim) + 1);
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: 3rem; padding: 1.5rem 0.35rem;
    font-family: var(--wss-font-mono);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--wss-band-muted); pointer-events: none;
  }
  .field-rail-start { left: 0; border-right: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 86%); }
  .field-rail-end { right: 0; border-left: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 86%); }
  .field-rail .field-rail-word { writing-mode: vertical-rl; overflow: hidden; max-height: 100%; }
  .field-rail span { display: inline-flex; flex-direction: column; align-items: center; gap: 0.9rem; }
  @media (max-width: 1359px) { .field-rail { display: none; } }

  /* --- corner-bracket field frame + reel chips ----------------------
     The brackets live on .hero-field: .hero-visual clips its own paint
     (radius + cover img), so brackets drawn there would never show. */
  .hero-field { position: relative; }
  .hero-field .hero-visual { border: none; border-radius: 10px; }
  .hero-field::before,
  .hero-field::after {
    content: ""; position: absolute; width: 1.6rem; height: 1.6rem; z-index: calc(var(--z-raised) + 1);
    border: 2px solid var(--wss-band-accent); pointer-events: none;
  }
  .hero-field::before { top: -0.55rem; left: -0.55rem; border-right: none; border-bottom: none; }
  .hero-field::after { bottom: -0.55rem; right: -0.55rem; border-left: none; border-top: none; }
  .frame-chip {
    position: absolute; top: 0.9rem; z-index: var(--z-raised);
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.42rem 0.72rem; border-radius: 4px;
    background: color-mix(in oklab, var(--wss-band), transparent 22%);
    border: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 84%);
    color: var(--wss-band-ink);
    font-family: var(--wss-font-mono);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    backdrop-filter: blur(6px);
  }
  .frame-chip-live { left: 0.9rem; }
  .frame-chip-field { right: 0.9rem; }
  .frame-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--wss-band-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--wss-band-accent), transparent 70%);
    animation: field-pulse 2.6s ease-in-out infinite;
  }
  @keyframes field-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  /* --- SERVICE WINDOW / DISPATCH overlay cards ---------------------- */
  .field-card {
    position: absolute; z-index: calc(var(--z-raised) + 1);
    width: min(14.5rem, 62%);
    padding: 0.95rem 1.05rem; border-radius: 10px;
    background: color-mix(in oklab, var(--wss-band), transparent 16%);
    border: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 82%);
    color: var(--wss-band-ink);
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(12px) saturate(1.1);
  }
  .field-card-window { left: -1.4rem; top: 16%; }
  .field-card-dispatch { right: -1.4rem; bottom: 34%; }
  .field-card p { margin: 0; max-width: none; }
  .field-card-eyebrow {
    font-family: var(--wss-font-mono);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--wss-band-accent); margin-bottom: 0.35rem !important;
  }
  .field-card-title { font-family: var(--wss-font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.01em; }
  .field-card-note { font-size: 0.82rem; line-height: 1.4; color: var(--wss-band-muted); margin-top: 0.3rem !important; }

  /* --- comfort temperature ticker (data-slot contract) --------------
     The degree readouts render ONLY from real data (the JSON slot beside
     them, filled by the engine from verified weather). No data, no
     numbers — the card reads as labels + span + caption and stays honest. */
  .comfort-ticker {
    position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: var(--z-raised);
    padding: 0.95rem 1.1rem; border-radius: 10px;
    background: color-mix(in oklab, var(--wss-band), transparent 14%);
    border: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 80%);
    color: var(--wss-band-ink);
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(12px) saturate(1.1);
  }
  .comfort-ticker p { margin: 0; max-width: none; }
  .comfort-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
  .comfort-cell-end { text-align: right; }
  .comfort-label {
    font-family: var(--wss-font-mono);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--wss-band-muted); margin-bottom: 0.25rem !important;
  }
  .comfort-value {
    display: none;
    font-family: var(--wss-font-display); font-weight: 600;
    font-size: 2rem; line-height: 1; letter-spacing: -0.01em;
  }
  .comfort-value.is-live { display: block; }
  .comfort-bar {
    position: relative; height: 4px; border-radius: 2px; overflow: hidden;
    background: color-mix(in oklab, var(--wss-band-ink), transparent 80%);
    margin: 0.85rem 0 0.55rem;
  }
  .comfort-bar span {
    position: absolute; inset: 0; width: 58%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wss-band-accent), color-mix(in oklab, var(--wss-band-accent), white 35%));
  }
  .comfort-caption { font-size: 0.8rem; line-height: 1.45; color: var(--wss-band-muted); }

  /* --- free-quotes chip row + field meta ---------------------------- */
  .field-chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
    list-style: none; margin: 1.4rem 0 0; padding: 0;
  }
  .field-chips li {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--wss-font-mono);
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: color-mix(in oklab, var(--wss-band-ink), transparent 22%);
    white-space: nowrap;
  }
  .field-chips li::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--wss-band-accent);
  }
  .field-meta {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin: 2.2rem 0 0; padding-top: 0.9rem;
    border-top: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 84%);
    font-family: var(--wss-font-mono);
    font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--wss-band-muted);
  }

  @media (max-width: 719px) {
    .field-card { display: none; }
    .comfort-ticker { position: static; margin-top: 0.9rem; left: auto; right: auto; bottom: auto; }
    .hero-field::before, .hero-field::after { display: none; }
    .hero-field .hero-visual { border: var(--hairline); }
  }
}

/* ==================================================================
   ORIGIN-MATCH re-assertions. The mirror engine APPENDS its theme to
   this stylesheet at compile time (unlayered, later in the cascade):
   the component-variant pass can pin a different CTA treatment and a
   compressed type scale per build. The premier design's display scale
   and solid-accent CTAs are load-bearing, so they are re-asserted here
   at HIGHER SPECIFICITY with author-important declarations — for
   important declarations the cascade ranks specificity before source
   order, so these win on every build without touching the engine.
   ================================================================== */
.hero .hero-safe h1 {
  font-family: var(--wss-font-display) !important;
  font-size: clamp(2.8rem, 5.6vw, 4.9rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  font-weight: 600 !important;
}
main .shell .section-head h2 {
  font-family: var(--wss-font-display) !important;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em !important;
  font-weight: 600 !important;
}
main .shell .cta-panel h2 {
  font-family: var(--wss-font-display) !important;
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.018em !important;
  font-weight: 600 !important;
}
main .btn-row a.btn.btn-primary {
  background: var(--wss-accent) !important;
  color: var(--wss-btn-ink) !important;
  border: 2px solid transparent !important;
  border-radius: var(--radius) !important;
  padding: 0.9rem 1.5rem !important;
  box-shadow: 0 10px 24px color-mix(in oklab, var(--wss-accent), transparent 70%) !important;
}
main .btn-row a.btn.btn-ghost {
  background: color-mix(in oklab, var(--wss-surface), transparent 20%) !important;
  color: var(--wss-text) !important;
  border: 2px solid var(--wss-border) !important;
  border-radius: var(--radius) !important;
  padding: 0.9rem 1.5rem !important;
  backdrop-filter: blur(8px) !important;
}
.hero .btn-row a.btn.btn-ghost {
  background: color-mix(in oklab, var(--wss-band), transparent 35%) !important;
  color: var(--wss-band-ink) !important;
  border: 1px solid color-mix(in oklab, var(--wss-band-ink), transparent 60%) !important;
}
.site-header .header-inner a.btn.header-cta {
  background: var(--wss-accent) !important;
  color: var(--wss-btn-ink) !important;
  border: 2px solid transparent !important;
  border-radius: var(--radius) !important;
  font-family: var(--wss-font-text) !important;
}
@media (prefers-reduced-motion: reduce) {
  .frame-dot { animation: none !important; }
}

/* wss-logo-identity: the deterministic fallback is a wordmark, never an avatar. */img[src*="brand-logo"]{width:auto!important;height:auto!important;max-width:min(13rem,45vw)!important;max-height:3.25rem!important;object-fit:contain!important;border-radius:0.375rem!important;border-color:transparent!important}

/* WSS mirror theme — light by default, built from the client's own colours. */
:root,[data-wss-theme="light"]{--wss-surface:#FDFCFC;--wss-surface-alt:#F6EFF0;--wss-text:#321B1F;--wss-muted:#836369;--wss-border:#E9DDDF;--wss-slab:#F8F1F3;--wss-slab-ink:#361C21;--wss-slab-muted:#7C5A61;--wss-accent:#D40029;--wss-accent-hsl:348 100% 42%;--wss-accent-hover:#A30021;--wss-accent-ink:#FFFFFF;--wss-accent-text:#D40029;--wss-accent-on-slab:#D40029;--wss-accent-soft:#C20027;--accent-soft:#C20027;--background:#FDFCFC;--foreground:#321B1F;--card:#F6EFF0;--card-foreground:#321B1F;--popover:#F6EFF0;--popover-foreground:#321B1F;--muted-foreground:#836369;--border:#E9DDDF;--input:#E9DDDF;--primary:#321B1F;--accent:#D40029;--accent-foreground:#FFFFFF;--ring:#D40029;--primary-foreground:#361C21;--sidebar-background:#FDFCFC;--sidebar-foreground:#321B1F;--sidebar-primary:#D40029;--sidebar-primary-foreground:#FFFFFF;--sidebar-accent:#F8F1F3;--sidebar-accent-foreground:#361C21;--sidebar-border:#E9DDDF;--sidebar-ring:#D40029;--wss-band-ink:#361C21;--wss-band-accent:#D40029;color-scheme:light}
[data-wss-theme="dark"],:root.dark{--wss-surface:#191011;--wss-surface-alt:#25181B;--wss-text:#F6F4F4;--wss-muted:#C2AEB2;--wss-border:#422E32;--wss-slab:#25181B;--wss-slab-ink:#F6F4F4;--wss-slab-muted:#C3ACB1;--wss-accent:#D40029;--wss-accent-hsl:348 100% 42%;--wss-accent-hover:#AD0023;--wss-accent-ink:#FFFFFF;--wss-accent-text:#FF1F4B;--wss-accent-on-slab:#FF1F4B;--wss-accent-soft:#FF5C7C;--accent-soft:#FF5C7C;--background:#191011;--foreground:#F6F4F4;--card:#25181B;--card-foreground:#F6F4F4;--popover:#25181B;--popover-foreground:#F6F4F4;--muted-foreground:#C2AEB2;--border:#422E32;--input:#422E32;--primary:#F6F4F4;--accent:#D40029;--accent-foreground:#FFFFFF;--ring:#D40029;--primary-foreground:#F6F4F4;--sidebar-background:#191011;--sidebar-foreground:#F6F4F4;--sidebar-primary:#D40029;--sidebar-primary-foreground:#FFFFFF;--sidebar-accent:#25181B;--sidebar-accent-foreground:#F6F4F4;--sidebar-border:#422E32;--sidebar-ring:#D40029;--wss-band-ink:#F6F4F4;--wss-band-accent:#FF1F4B;color-scheme:dark}
html,body{background-color:var(--wss-surface);color:var(--wss-text)}
:root{--wss-hero-scrim:#25181B;--gradient-hero:linear-gradient(115deg,color-mix(in srgb,var(--wss-hero-scrim) 92%,transparent) 0%,color-mix(in srgb,var(--wss-hero-scrim) 78%,transparent) 45%,color-mix(in srgb,var(--wss-accent) 22%,transparent) 100%);--gradient-primary:linear-gradient(135deg,var(--wss-slab) 0%,color-mix(in srgb,var(--wss-slab) 84%,var(--wss-accent)) 100%);--gradient-accent:linear-gradient(135deg,var(--wss-accent) 0%,var(--wss-accent-hover) 100%);--gradient-subtle:linear-gradient(180deg,var(--wss-surface) 0%,var(--wss-slab) 100%)}
:root{--gradient-mesh:radial-gradient(at 18% 18%,color-mix(in srgb,var(--wss-accent) 14%,transparent) 0px,transparent 45%),radial-gradient(at 82% 12%,color-mix(in srgb,var(--wss-accent-hover) 10%,transparent) 0px,transparent 50%),radial-gradient(at 65% 88%,color-mix(in srgb,var(--wss-accent) 10%,transparent) 0px,transparent 45%)}
.text-accent{color:var(--wss-accent-soft)!important}
.nav a:hover,.stat b,.card-icon,.card-link,.avatar,.stars,.faq summary::after,.badge-mark,.rating-chip a,.rating-num{color:var(--wss-accent-text)}
::selection,.skip,.btn-primary,.floater,.ba-tag-r,.ba-grip,.capacity .btn-ghost:hover,.shot::after,.lb-btn:hover,.lb-btn:focus-visible{color:var(--wss-accent-ink)}
.accent-line,.rating-stars{color:var(--wss-accent-text)}
.text-gradient-warm{background-image:linear-gradient(135deg,var(--wss-slab-ink),color-mix(in srgb,var(--wss-accent-soft) 60%,var(--wss-slab-ink)),var(--wss-accent-soft))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.wss-theme-toggle{position:fixed;top:auto;right:max(16px,env(safe-area-inset-right));bottom:calc(156px + var(--wss-chat-clear,0px) + var(--wss-chat-keyboard,0px) + env(safe-area-inset-bottom));z-index:2147483000;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid var(--wss-border);background:var(--wss-surface-alt);color:var(--wss-text);font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.10)}
.wss-theme-toggle:hover{border-color:var(--wss-accent)}
.wss-theme-toggle svg{width:14px;height:14px;display:block}
body:has(#wss-chat-root[data-open="true"]) .wss-theme-toggle{display:none}
@media print{.wss-theme-toggle{display:none}}
@media (max-width:640px){nav a,nav button,footer a,footer button{min-height:44px;display:inline-flex;align-items:center}}

/* wss-button-ink: label chosen by contrast against EACH mode's own fill, scoped per mode (attr + .dark class twin) so neither mode wears the other's ink. */:root:not([data-wss-theme="dark"]):not(.dark) .bg-primary,:root:not([data-wss-theme="dark"]):not(.dark) .bg-primary *,:root:not([data-wss-theme="dark"]):not(.dark) [class*="bg-primary"]:not([class*="bg-primary/"]){color:hsl(0 0% 98%)!important}[data-wss-theme="dark"] .bg-primary,[data-wss-theme="dark"] .bg-primary *,[data-wss-theme="dark"] [class*="bg-primary"]:not([class*="bg-primary/"]),:root.dark .bg-primary,:root.dark .bg-primary *,:root.dark [class*="bg-primary"]:not([class*="bg-primary/"]){color:hsl(240 6% 10%)!important}:root:not([data-wss-theme="dark"]):not(.dark) .bg-accent,:root:not([data-wss-theme="dark"]):not(.dark) .bg-accent *,:root:not([data-wss-theme="dark"]):not(.dark) .bg-gradient-accent,:root:not([data-wss-theme="dark"]):not(.dark) .bg-gradient-accent *{color:hsl(0 0% 98%)!important}[data-wss-theme="dark"] .bg-accent,[data-wss-theme="dark"] .bg-accent *,[data-wss-theme="dark"] .bg-gradient-accent,[data-wss-theme="dark"] .bg-gradient-accent *,:root.dark .bg-accent,:root.dark .bg-accent *,:root.dark .bg-gradient-accent,:root.dark .bg-gradient-accent *{color:hsl(0 0% 98%)!important}
/* === wss component variants (component-variants@v1) === */
/* wss hero variant: card-based intro */
html[data-wss-variant="card-intro"] :is(section.hero){min-height:0!important;display:grid!important;place-items:center!important;padding-block:clamp(2rem,5vw,4rem)!important}
html[data-wss-variant="card-intro"] :is(section.hero)>:first-child{background:var(--wss-surface-alt,transparent);border:1px solid var(--wss-border,transparent);border-radius:1rem;padding:clamp(1.5rem,3vw,2.5rem);max-width:44rem;margin-inline:auto;box-shadow:0 18px 50px -24px rgba(11,18,32,.35)}
html[data-wss-variant="card-intro"] :is(section.hero) h1{font-size:clamp(2rem,4.5vw,3.4rem)}
@media (max-width:768px){html[data-wss-variant="card-intro"] :is(section.hero){padding-block:clamp(1.25rem,6vw,2rem)!important}}
/* wss cta treatment: sharp outline */
html[data-wss-cta="sharp-outline"] :is(a[class*="cta" i],button[class*="cta" i],[data-cta],a[class*="btn" i],button[class*="btn" i],a[class*="button" i],button[class*="button" i],a.btn,a.button){border-radius:2px!important;padding:.7em 1.4em!important;background:transparent!important;color:var(--wss-accent-text,var(--wss-text,inherit))!important;border:2px solid var(--wss-accent,currentColor)!important}
section[data-wss-section="services"]{display:flex!important;flex-wrap:wrap!important;gap:.75rem}
section[data-wss-section="services"]>*{border:1px solid var(--wss-border,transparent);border-radius:999px;padding:.5em 1.1em}
section[data-wss-section="about"]{border-top:4px solid var(--wss-accent,transparent);padding-top:1.5rem}
section[data-wss-section="about"] :is(strong,b){font-size:1.35em;line-height:1.1;display:inline-block}
@media (min-width:700px){section[data-wss-section="gallery"]{columns:2;column-gap:.75rem}section[data-wss-section="gallery"]>*{break-inside:avoid;margin-bottom:.75rem}}
section[data-wss-section="testimonials"]>*{border:1px solid var(--wss-border,transparent);border-radius:.9rem;padding:1.25rem;margin-bottom:1rem;background:var(--wss-surface-alt,transparent)}
section[data-wss-section="contact"]{background:var(--wss-slab,transparent);color:var(--wss-slab-ink,inherit);text-align:center;padding-block:clamp(2.5rem,6vw,4rem)}
@media (min-width:800px){section[data-wss-section="footer"]{display:flex!important;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}}

/* --- client hero wash (wss photo bank) ------------------------------
   Their own photograph behind every page hero, under a scrim in their
   accent at 0.8649 alpha. That alpha is not a taste call: it is the smallest
   opacity for which the WORST possible photograph still leaves the hero
   text at 4.62:1, against a 4.5:1 requirement.
   Remove this block to revert; no donor rule was edited. */
:is(section.hero) {
  background-image: linear-gradient(rgba(41, 15, 33, 0.8649), rgba(41, 15, 33, 0.8649)), url("../assets/hero-wash.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  :is(section.hero) { background-attachment: scroll; }
}
@media (max-width: 640px) {
  :is(section.hero) {
    background-image: linear-gradient(to bottom, rgba(41, 15, 33, 0.8649) 0%, rgba(41, 15, 33, 0.8649) 38%, rgba(41, 15, 33, 0.2595) 100%), url("../assets/hero-wash.webp");
  }
}

/* --- wss hero ink (the pair to the dark cinematic scrim) --------------
   Solid headline + one-step-dimmer sub-line/reviews line, both PROVEN
   against the scrim's worst case. -webkit-text-fill-color because a
   gradient-text donor sets it transparent and ignores color; opacity:1
   because a 60%-tinted reviews line is transparent text over a scrim. */
:is(section.hero) h1, :is(section.hero) h1 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
:is(section.hero) h1 + p, :is(section.hero) h1 + p * {
  color: #e8edf2 !important;
  -webkit-text-fill-color: #e8edf2 !important;
  opacity: 1 !important;
}
/* --- wss hero ink, light state: the themed pale hero layers paint over
   the wash there, so the proven pair is the light palette's own band ink
   (walked 7:1 against the slab) and its muted step. */
:root:not([data-wss-theme="dark"]):not(.dark) :is(section.hero) h1,
:root:not([data-wss-theme="dark"]):not(.dark) :is(section.hero) h1 *,
[data-wss-theme="light"] :is(section.hero) h1,
[data-wss-theme="light"] :is(section.hero) h1 * {
  color: #361C21 !important;
  -webkit-text-fill-color: #361C21 !important;
  opacity: 1 !important;
}
:root:not([data-wss-theme="dark"]):not(.dark) :is(section.hero) h1 + p,
:root:not([data-wss-theme="dark"]):not(.dark) :is(section.hero) h1 + p *,
[data-wss-theme="light"] :is(section.hero) h1 + p,
[data-wss-theme="light"] :is(section.hero) h1 + p * {
  color: #7C5A61 !important;
  -webkit-text-fill-color: #7C5A61 !important;
  opacity: 1 !important;
}

/* --- wss HVAC outline hero-call: proven ink on dark wash -------- */
:is(section.hero) [data-cta="hero-call"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 40%, transparent) !important;
}
:root:not([data-wss-theme="dark"]):not(.dark) :is(section.hero) [data-cta="hero-call"],
[data-wss-theme="light"] :is(section.hero) [data-cta="hero-call"] {
  color: #361C21 !important;
  -webkit-text-fill-color: #361C21 !important;
  border-color: color-mix(in srgb, #361C21 40%, transparent) !important;
}


/* --- wss mobile fold (owner spec 2026-08-12): name/logo, ONE line,
   rating stars, call button — the rest scrolls. Desktop untouched. */
@media (max-width: 640px) {
  :is(section.hero) :is(p, ul, dl, aside) { display: none !important; }
  :is(section.hero) div:has(> dl) { display: none !important; }
  :is(section.hero) > div { padding-top: 16px !important; padding-bottom: 28px !important; gap: 12px !important; }
  :is(section.hero) > div > div:not(:has(h1)) { display: none !important; }
  :is(section.hero) h1 { display: block !important; visibility: visible !important; opacity: 1 !important; min-height: 40px !important; font-size: 0 !important; line-height: 0 !important; }
  :is(section.hero) h1 > * { display: none !important; }
  :is(section.hero) h1::after { content: "HVAC in North Georgia, GA"; display: block !important; font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.15 !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
  [data-cta="dock-call"], [data-cta="dock-quote"] { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; padding-left: 8px !important; padding-right: 8px !important; gap: 6px !important; }
  [data-cta="dock-call"] > span, [data-cta="dock-quote"] > span { min-width: 0 !important; max-width: 100% !important; }
  [data-cta="dock-call"] > span:last-child, [data-cta="dock-quote"] > span:first-child { flex: 1 1 auto !important; overflow: hidden !important; }
  [data-cta="dock-call"] > span:last-child > span:first-child, [data-cta="dock-quote"] > span:first-child > span:first-child { max-width: 100% !important; overflow: hidden !important; letter-spacing: .11em !important; white-space: nowrap !important; }
  [data-cta="dock-call"] > span:last-child > span:last-child, [data-cta="dock-quote"] > span:first-child > span:last-child { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: clamp(12px, 3.35vw, 15px) !important; }
  [data-cta="dock-quote"] > svg { flex: 0 0 auto !important; width: 14px !important; height: 14px !important; }
  :is(section.hero) { overflow-x: clip !important; }
  html, body { box-sizing: border-box !important; max-width: 100% !important; overflow-x: clip !important; }
  .mask-fade-edges { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  .animate-marquee { animation: none !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; gap: 0 !important; }
  .animate-marquee > * { display: none !important; }
  .animate-marquee > :first-child { display: flex !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  .animate-marquee > :first-child > * { min-width: 0 !important; }
  .animate-marquee > :first-child > :nth-child(2) { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  :is(section.hero) [data-cta="hero-quote"] { display: none !important; }
}


/* wss: hide donor giant faint section-number watermark */
.text-\[120px\]{display:none!important}


/* wss: keep the theme toggle off the mobile header (owner) */
@media (max-width:640px){.wss-theme-toggle{top:auto!important;bottom:calc(86px + env(safe-area-inset-bottom))!important;right:auto!important;left:12px!important;}}