/* ------------------------------------------------------------------
   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;

@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;
  }
}

@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: "Arial", "Inter var", "SF Pro Text", "Segoe UI Variable Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--step-0);
    font-optical-sizing: auto;
    line-height: 1.65;
    letter-spacing: 0.005em;
    overflow-x: hidden;
  }
  h1, h2, h3, .display {
    font-family: "SF Pro Display", "Segoe UI Variable Display", "Helvetica Neue", system-ui, sans-serif;
    font-weight: 760;
    font-variation-settings: "wght" 760;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0 0 0.4em;
    text-wrap: balance;
  }
  h2 { font-size: var(--step-3); }
  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-slab);
    color: var(--wss-slab-ink);
    --wss-text: var(--wss-slab-ink);
    --ink-soft: color-mix(in oklab, var(--wss-slab-ink), transparent 26%);
  }
  .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.5rem;
    font-size: var(--step--1); font-weight: 620; letter-spacing: 0.01em;
    padding: 0.5rem 0.9rem; border-radius: 999px;
    border: var(--hairline);
    background: color-mix(in oklab, var(--wss-surface-alt), transparent 30%);
    backdrop-filter: blur(10px) saturate(1.2);
    margin-bottom: 1.1rem;
  }
  .eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--wss-accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--wss-accent), transparent 78%);
  }
  /* ---------- 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 */
  .logo-plate {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 46px; height: 46px; padding: 6px; 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: "SF Pro Display", "Segoe UI Variable Display", "Helvetica Neue", system-ui, sans-serif; font-weight: 740; font-size: 1.0625rem; letter-spacing: -0.02em;
    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 */
  .hero-scrim {
    position: absolute; inset: 0; z-index: var(--z-scrim);
    background:
      linear-gradient(100deg,
        color-mix(in oklab, var(--wss-slab), transparent 8%) 0%,
        color-mix(in oklab, var(--wss-slab), transparent 22%) 46%,
        color-mix(in oklab, var(--wss-slab), transparent 46%) 100%),
      radial-gradient(120% 90% at 12% 18%,
        color-mix(in oklab, var(--wss-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.04em;
  }
  /* 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. */
  .accent-line {
    color: var(--wss-accent);
    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: color-mix(in oklab, var(--wss-accent), white 14%); }
  .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-slab-ink); opacity: 0.94; }
  .hero.on-slab, .hero.on-slab :is(h1, p) { color: var(--wss-slab-ink); }
  .hero-visual {
    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: "SF Pro Display", "Segoe UI Variable Display", "Helvetica Neue", system-ui, sans-serif; font-size: var(--step-3);
    letter-spacing: -0.03em; 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: var(--hairline); background: var(--wss-surface-alt); 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-size: var(--step--1); font-weight: 620; white-space: nowrap; }
  .ticker-track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wss-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: "SF Pro Display", "Segoe UI Variable Display", "Helvetica Neue", system-ui, sans-serif; font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1;
    color: color-mix(in oklab, var(--wss-accent), transparent 62%); letter-spacing: -0.05em;
  }

  /* ---------- 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-accent), transparent 74%) 0%, transparent 62%),
      var(--wss-slab);
    color: var(--wss-slab-ink); border: var(--hairline);
  }
  .cta-panel h2, .cta-panel p { color: var(--wss-slab-ink); }

  /* ---------- footer ---------- */
  .site-footer { background: var(--wss-slab); color: var(--wss-slab-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-slab-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-slab-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-slab-ink), transparent 88%); border: 1px solid color-mix(in oklab, var(--wss-slab-ink), transparent 78%); }
  .capacity-line { font-size: 1.1rem; margin: .35rem 0 .5rem; }
  .capacity .btn-ghost { background: transparent; color: var(--wss-slab-ink); border: 1px solid color-mix(in oklab, var(--wss-slab-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-slab-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-slab-ink), transparent 70%);
    background: color-mix(in oklab, var(--wss-slab), transparent 25%); color: var(--wss-slab-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; }
  }
}

/* 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-logo-fit: measured client mark is non-square (267.7x166.4); a round object-cover slot would crop it to salad. */img[src*="client-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:#FCFCFD;--wss-surface-alt:#EFEFF6;--wss-text:#1B1C32;--wss-muted:#636583;--wss-border:#DDDEE9;--wss-slab:#F1F2F8;--wss-slab-ink:#1C1D36;--wss-slab-muted:#5A5C7C;--wss-accent:#9C1D20;--wss-accent-hsl:359 69% 36%;--wss-accent-hover:#701516;--wss-accent-ink:#FFFFFF;--wss-accent-text:#9C1D20;--wss-accent-on-slab:#9C1D20;--wss-accent-soft:#9C1D20;--accent-soft:#9C1D20;--background:#FCFCFD;--foreground:#1B1C32;--card:#EFEFF6;--card-foreground:#1B1C32;--popover:#EFEFF6;--popover-foreground:#1B1C32;--muted-foreground:#636583;--border:#DDDEE9;--input:#DDDEE9;--primary:#1B1C32;--accent:#9C1D20;--accent-foreground:#FFFFFF;--ring:#9C1D20;--primary-foreground:#1C1D36;--sidebar-background:#FCFCFD;--sidebar-foreground:#1B1C32;--sidebar-primary:#9C1D20;--sidebar-primary-foreground:#FFFFFF;--sidebar-accent:#F1F2F8;--sidebar-accent-foreground:#1C1D36;--sidebar-border:#DDDEE9;--sidebar-ring:#9C1D20;color-scheme:light}
[data-wss-theme="dark"],:root.dark{--wss-surface:#101019;--wss-surface-alt:#181925;--wss-text:#F4F4F6;--wss-muted:#AEAFC2;--wss-border:#2E2F42;--wss-slab:#181925;--wss-slab-ink:#F4F4F6;--wss-slab-muted:#ACAEC3;--wss-accent:#9C1D20;--wss-accent-hsl:359 69% 36%;--wss-accent-hover:#791618;--wss-accent-ink:#FFFFFF;--wss-accent-text:#DE4A4C;--wss-accent-on-slab:#DF5355;--wss-accent-soft:#E46C6E;--accent-soft:#E46C6E;--background:#101019;--foreground:#F4F4F6;--card:#181925;--card-foreground:#F4F4F6;--popover:#181925;--popover-foreground:#F4F4F6;--muted-foreground:#AEAFC2;--border:#2E2F42;--input:#2E2F42;--primary:#F4F4F6;--accent:#9C1D20;--accent-foreground:#FFFFFF;--ring:#9C1D20;--primary-foreground:#F4F4F6;--sidebar-background:#101019;--sidebar-foreground:#F4F4F6;--sidebar-primary:#9C1D20;--sidebar-primary-foreground:#FFFFFF;--sidebar-accent:#181925;--sidebar-accent-foreground:#F4F4F6;--sidebar-border:#2E2F42;--sidebar-ring:#9C1D20;color-scheme:dark}
html,body{background-color:var(--wss-surface);color:var(--wss-text)}
:root{--wss-hero-scrim:#181925;--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}
.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:14px;right:14px;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}
@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: split — text left, media right */
html[data-wss-variant="split-media"] :is(section.hero){min-height:min(76vh,44rem)!important;display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center!important;gap:clamp(1.5rem,4vw,3.5rem)!important;padding-block:clamp(2.5rem,6vw,4.5rem)!important}
html[data-wss-variant="split-media"] :is(section.hero)>:nth-child(n+2){grid-column:2}
html[data-wss-variant="split-media"] :is(section.hero)>:first-child{grid-column:1;min-width:0}
html[data-wss-variant="split-media"] :is(section.hero) h1{max-width:20ch;font-size:clamp(2.4rem,5.5vw,4rem)}
@media (max-width:768px){html[data-wss-variant="split-media"] :is(section.hero){grid-template-columns:minmax(0,1fr);min-height:0!important;padding-block:clamp(2rem,8vw,3rem)!important}}
/* wss cta treatment: slab block */
html[data-wss-cta="slab-block"] :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:.45rem!important;padding:.9em 1.5em!important;background:var(--wss-slab,inherit)!important;color:var(--wss-slab-ink,inherit)!important;border-color:transparent!important;border-top:4px solid var(--wss-accent,transparent)!important}
section[data-wss-section="services"]>*{padding-block:clamp(1.25rem,3vw,2rem)}
section[data-wss-section="services"]>*:nth-child(even){padding-inline-start:clamp(1rem,4vw,3rem)}
section[data-wss-section="about"]>:first-child{font-size:clamp(1.5rem,3vw,2.25rem);font-style:italic;max-width:32ch;line-height:1.2}
@media (min-width:700px){section[data-wss-section="gallery"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}section[data-wss-section="gallery"]>:first-child{grid-column:1/-1}}
@media (min-width:800px){section[data-wss-section="testimonials"]>*{max-width:60ch;margin-inline:auto;text-align:center}}
@media (min-width:900px){section[data-wss-section="contact"]{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}}
@media (min-width:800px){section[data-wss-section="footer"]{display:flex!important;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}}
/* wss typography scale: wide-short — Wide / short */
html[data-wss-type-scale="wide-short"]{--wss-h1-size:clamp(2.1rem, 5vw, 3.4rem);--wss-h2-size:clamp(1.55rem, 3.2vw, 2.2rem);--wss-h3-size:clamp(1.15rem, 2.2vw, 1.5rem)}
html[data-wss-type-scale="wide-short"] h1{font-size:var(--wss-h1-size)!important;letter-spacing:0.012em!important;line-height:1.14!important}
html[data-wss-type-scale="wide-short"] h2{font-size:var(--wss-h2-size)!important;letter-spacing:calc(0.012em / 2)!important;line-height:calc(1.14 + 0.08)!important}
html[data-wss-type-scale="wide-short"] h3{font-size:var(--wss-h3-size)!important;line-height:calc(1.14 + 0.14)!important}

/* --- 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(33, 20, 32, 0.8649), rgba(33, 20, 32, 0.8649)), url("/assets/hero-wash.jpg");
  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(33, 20, 32, 0.8649) 0%, rgba(33, 20, 32, 0.8649) 38%, rgba(33, 20, 32, 0.2595) 100%), url("/assets/hero-wash.jpg");
  }
}

/* --- 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;
}

/* --- client hero color grade (wss hero-media) ------------------------
   Their own hero photograph, graded toward the brand palette at
   0.3 opacity, UNDER the proven text scrim (the AA proof
   bounds the worst backdrop, so the grade cannot break it). The photo
   stays recognizable as THEIRS; the surface speaks their palette. */
:is(section.hero) {
  background-image: linear-gradient(rgba(33, 20, 32, 0.8649), rgba(33, 20, 32, 0.8649)), linear-gradient(rgba(156, 29, 32, 0.3), rgba(156, 29, 32, 0.3)), url("/assets/hero-wash.jpg");
}
@media (max-width: 640px) {
  :is(section.hero) {
    background-image: linear-gradient(to bottom, rgba(33, 20, 32, 0.8649) 0%, rgba(33, 20, 32, 0.8649) 38%, rgba(33, 20, 32, 0.2595) 100%), linear-gradient(rgba(156, 29, 32, 0.3), rgba(156, 29, 32, 0.3)), url("/assets/hero-wash.jpg");
  }
}

/* --- 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;
}


/* --- 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 br, :is(section.hero) h1 br ~ * { display: none !important; }
  :is(section.hero) h1 { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.15 !important; margin-top: 12px !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; }
}


/* 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;}}