/* ==========================================================================
   Spider Digitizing — avista-bridge.css (foundation-owned bridge)
   --------------------------------------------------------------------------
   Loaded LAST in the public layout, after the vendored Avista stack. It is
   the safety net for everything the Avista design system does not know
   about: header docking on inner pages, the Spider
   text lockup, JS-generated shop chrome (cart drawer, quick-view modal,
   toasts, bench rail, uploader), shop page classes, trusted-body article
   typography, placeholder treatments and reduced-motion fallbacks.
   Dark tokens follow the Avista dark skin: bg #050505, card #1D1D1D,
   body text #b3b3b3, headings #f1f1f1, accent --as-clr-pr-1 #fd3f00.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Skip link (a11y) — dark
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--as-clr-pr-1);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 0 0 10px 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   2. Header-3 docking.
   The floating pill nav is fixed at the top of every page. The template
   default rises it from the bottom of the 865px hero; we dock it at the top
   (top:0) on both home and inner pages. The .has-sticky override keeps the JS
   scroll toggle from flinging the header to the viewport bottom (template CSS
   docks .has-sticky to bottom:30px).
   -------------------------------------------------------------------------- */
/* NEW BAND: true edge-to-edge bar — no floating pill. The old pill rules
   floated at top:14px with a pill shape; they are dead and must not win over
   the .as-header-3-band at the top. Keep .has-sticky locked to the same top
   so avista-core's scroll toggle doesn't shift the bar. */
.as-header-3-area,
.as-header-3-area.has-sticky {
    top: 0;
    left: 0;
    width: 100%;
    bottom: auto !important;
    position: fixed;
    z-index: 9;
}
.as-header-3-spacer {
    display: block;
    height: var(--as-header-h, 92px);
}
body:not(.has-hero-3) main#main { margin-top: 0; }
/* Home keeps the template hero; clear the fixed header pill over the hero top. */
body.has-hero-3 .as-hero-3-area { padding-top: 168px; }

/* --------------------------------------------------------------------------
   LOGO-03 BRAND SYSTEM (Spider Digitizing, 2026-09)
   Two honest forms, no boxes anywhere except the favicon chips:
     *-03.png        original: black spider + ember-red type on transparency.
                     LIGHT grounds only (print sheet, schema.org logo).
     *-03-dark.png   recolored for DARK grounds: silver spider (#C6CAD2,
                     cool-tinted lift, shading preserved) + lifted horror red
                     (core #EF1D24, 4.5:1 on near-black). Header, offcanvas,
                     footer, preloader, admin/account rails, OG card.
   Chips (favicon-03 64px, apple-touch-icon-03 180px) keep their ivory slabs:
   a single boxless asset cannot read on both light and dark browser chrome.
   Assets live in public/assets/img/brand/.
   -------------------------------------------------------------------------- */
/* Boxless lockup slot: the dark art sits straight on the chrome, lifted by
   a soft drop shadow for separation. */
.as-header-3-logo.brand,
.wa-offcanvas-top-logo.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    flex: 0 0 auto;
    padding: 2px 0;
    /* The vendor pill is a white disc (background-color:#fff) — Logo-03
       sits boxless, so bury it explicitly. */
    background: transparent;
    border-radius: 0;
}
.as-header-3-logo.brand .brand__lockup,
.wa-offcanvas-top-logo.brand .brand__lockup {
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.65));
}
/* Height-driven lockup: Logo-03 is 1.67:1, far taller than the old art. */
.brand__lockup {
    display: block;
    width: auto;
    height: 60px;
}
.wa-offcanvas-top-logo.brand .brand__lockup { height: 52px; }
@media (max-width: 1199px) {
    .brand__lockup { height: 48px; }
}
@media (max-width: 575px) {
    /* Phone band: the lockup shrinks first so the action cluster (cart,
       sign-in, hamburger) never clips — measured tight at 320px. */
    .brand__lockup { height: 40px; }
    .as-header-3-action-link { gap: 14px; }
}

/* ---- Silk frame around the lockup --------------------------------------
   Logo-03 is a raster, so there is nothing to re-draw: these strands frame the
   mark instead, converging on the spider at its centre. The overlay is
   absolutely positioned over the lockup and deliberately bleeds outside it
   (overflow: visible plus coordinates past the viewBox), so the silk reaches
   past the artwork rather than stopping at its edge.

   Hidden by default and revealed by avista-spider.js. Without JS nothing
   reveals it, so the logo is simply the logo - no empty box, no flash. */
.brand__silk {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.brand__silk-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.brand__silk-strand {
    stroke: rgba(198, 202, 210, 0.5);
    stroke-width: 0.7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.brand__silk-strand--hub { stroke: rgba(253, 63, 0, 0.55); }
.js .as-header-3-logo.brand:hover .brand__silk-svg,
.js .as-header-3-logo.brand:focus-visible .brand__silk-svg,
.js .as-header-3-logo.brand.is-silked .brand__silk-svg { opacity: 1; }

/* Reduced motion: the strands cannot sweep in, so they are simply not part of
   the design. They stay hidden rather than appearing statically, because a
   static decorative ring around a logo reads as a rendering fault. */
@media (prefers-reduced-motion: reduce) {
    .brand__silk-svg { display: none; }
}
/* The pricing-show runner keeps its baked ivory chip (a spider token
   crawling the web) — the only in-page box left, and it is the spider
   itself, not a logo slab. */

/* ---- Logo motion ------------------------------------------------------
   Thread-drop intro: the badge descends on a silk thread that retracts;
   hover pounce lives on the IMG so it never fights the badge animation.
   Preloader mark swings like a hanging spider. All .js-gated (static
   without JS) and killed under reduced motion. */
.js .as-header-3-logo.brand { position: relative; }
.js .as-header-3-logo.brand::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 2px;
    margin-left: -1px;
    height: 0;
    background: linear-gradient(to top, rgba(198, 202, 210, 0.9), rgba(198, 202, 210, 0));
    animation: spidey-thread 1s ease-out 0.1s;
    pointer-events: none;
}
@keyframes spidey-thread {
    0% { height: 130px; opacity: 1; }
    65% { height: 0; opacity: 1; }
    100% { height: 0; opacity: 0; }
}
.js .as-header-3-logo.brand { animation: spidey-drop 0.95s cubic-bezier(0.2, 1.35, 0.4, 1) 0.1s; }
@keyframes spidey-drop {
    0% { transform: translateY(-72px); opacity: 0; }
    55% { transform: translateY(7px); opacity: 1; }
    78% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}
.brand__lockup { transition: transform 0.22s ease, filter 0.22s ease; }
.as-header-3-logo.brand:hover .brand__lockup,
.wa-offcanvas-top-logo.brand:hover .brand__lockup {
    transform: translateY(2px) scale(1.02);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 12px rgba(253, 63, 0, 0.55));
}
.as-preloader-wrap .loader_letter img {
    animation: spidey-swing 1.15s ease-in-out infinite alternate;
    transform-origin: 50% -30%;
}
@keyframes spidey-swing {
    from { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
}
html.reduced-motion .as-header-3-logo.brand,
html.reduced-motion .as-header-3-logo.brand::before,
html.reduced-motion .brand__lockup,
html.reduced-motion .as-preloader-wrap .loader_letter img { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .as-header-3-logo.brand,
    .as-header-3-logo.brand::before,
    .brand__lockup,
    .as-preloader-wrap .loader_letter img { animation: none !important; }
}
@media (max-width: 359px) {
    .as-header-3-action-link .site-header__cart,
    .as-header-3-action-link .site-header__account { display: none; }
}

/* Cart / account text links in the header action cluster. */
.as-header-3-action-link .site-header__cart,
.as-header-3-action-link .site-header__account {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--as-cube-2);
    white-space: nowrap;
}
.as-header-3-action-link .site-header__cart:hover,
.as-header-3-action-link .site-header__account:hover {
    color: var(--as-clr-pr-1);
}
.as-header-3-area.has-sticky .as-header-3-action-link .site-header__cart,
.as-header-3-area.has-sticky .as-header-3-action-link .site-header__account {
    color: #ececf0;
}
.as-header-3-area.has-sticky .as-header-3-action-link .site-header__cart:hover,
.as-header-3-area.has-sticky .as-header-3-action-link .site-header__account:hover {
    color: var(--as-clr-pr-3);
}
/* ==========================================================================
   FLAT NAV — Liberty-style dropdown panels (replaces the as-mega system)

   The giant panels are gone because the CLASS is gone: the desktop li no longer
   carries `dropdown` and the panel no longer carries `dropdown-menu`, so the
   ~55 vendor rules keyed to those two (avista-core.css:2891-3030 / 3226-3238 /
   3255-3258) simply never match. No vendor file is edited.
   Tokens are only the ones that exist (avista-core.css:1-15).
   ========================================================================== */
.as-main-navigation .navbar-nav .as-nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Vendor sets `li a { padding: 12px 32px; display: inline-flex }` at (0,3,2).
   These are (0,4,1), so they win without !important. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item > .as-nav-item__link {
    padding: 12px 20px;
    font-family: var(--as-font-1);
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: color .25s var(--as-cube-1);
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item > .as-nav-item__link:hover,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item:focus-within > .as-nav-item__link,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item > .as-nav-item__link.is-active {
    color: var(--as-clr-pr-1);
}
/* The ember underline. Scoped to the direct child so it never lands on a panel
   link. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item > .as-nav-item__link::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 4px;
    top: auto;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--as-clr-pr-1), var(--as-clr-pr-3));
    transform: translateX(-50%);
    transition: width .3s var(--as-cube-1);
    font-family: inherit;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item:hover > .as-nav-item__link::before,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item:focus-within > .as-nav-item__link::before,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item > .as-nav-item__link.is-active::before {
    width: calc(100% - 30px);
}

/* The chevron is a separate real <button>, which is what lets the LABEL stay a
   live link. Previously the label was hidden under .js and only the button was
   visible, so "Services" was not a link at all. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item--drop > .as-nav-item__toggle {
    position: absolute;
    z-index: 2;
    inset: 0 0 0 auto;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    font-size: 10px;
    opacity: .5;
    transition: opacity .2s var(--as-cube-1), transform .25s var(--as-cube-1);
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item--drop > .as-nav-item__toggle:hover,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item--drop > .as-nav-item__toggle:focus-visible {
    opacity: 1;
    color: var(--as-clr-pr-1);
}
.as-main-navigation .navbar-nav .as-nav-item--drop > .as-nav-item__toggle:focus-visible {
    outline: 2px solid var(--as-clr-pr-1);
    outline-offset: -3px;
    border-radius: 4px;
    opacity: 1;
}
.as-main-navigation .navbar-nav .as-nav-item--drop.is-open > .as-nav-item__toggle {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--as-clr-pr-1);
}

/* CRITICAL: avista-core.css:3204 gives EVERY descendant anchor of
   `.navbar-nav li` a full-size absolutely-positioned ::after at z-index:-1.
   Without this, every panel link carries an invisible white slab. */
.as-main-navigation .navbar-nav .as-nav-drop a::before,
.as-main-navigation .navbar-nav .as-nav-drop a::after {
    content: none !important;
}

/* Closed. The 10px padding IS the hover gap, so there is no dead zone and no
   ::before bridge is needed. */
.as-main-navigation .navbar-nav .as-nav-drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 224px;
    max-width: min(300px, 76vw);
    max-height: min(70vh, 400px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #101013;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s var(--as-cube-1), transform .18s var(--as-cube-1),
                visibility 0s linear .18s;
}

/* Open. `.is-open` is written by exactly one function, so aria-expanded can
   never drift from what is painted. */
.as-main-navigation .navbar-nav .as-nav-item--drop.is-open > .as-nav-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .18s var(--as-cube-1), transform .18s var(--as-cube-1);
}
/* No-JS fallback: without .js the hover rules below never apply, so fall back to
   :hover / :focus-within revealing. */
html:not(.js) .as-main-navigation .navbar-nav .as-nav-item--drop:hover > .as-nav-drop,
html:not(.js) .as-main-navigation .navbar-nav .as-nav-item--drop:focus-within > .as-nav-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* The rows: a plain vertical list of plain text links (0,4,1) beats the vendor's
   descendant `li a` rules at (0,2,2). */
.as-main-navigation .navbar-nav .as-nav-drop__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-drop .as-nav-drop__list li {
    display: block;
    margin: 0;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-drop .as-nav-drop__list a {
    display: block;
    width: 100%;
    font-family: var(--as-font-1);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .01em;
    text-transform: none;
    text-decoration: none;
    color: #e7e7ea;
    padding: 9px 12px;
    border-radius: 8px;
    transition: background-color .15s var(--as-cube-1), color .15s var(--as-cube-1);
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-drop .as-nav-drop__list a:hover,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-drop .as-nav-drop__list a:focus-visible {
    background: rgba(253, 63, 0, .12);
    color: var(--as-clr-pr-1);
    box-shadow: inset 2px 0 0 0 var(--as-clr-pr-1);
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-drop .as-nav-drop__list a:focus-visible {
    outline: 2px solid var(--as-clr-pr-1);
    outline-offset: -2px;
}
/* The sticky header forces #ececf0 on `.navbar-nav li a` (descendant), which
   would beat both colours above on the sticky bar. */
.as-header-3-area:is(.has-sticky) .as-main-navigation .navbar-nav .as-nav-drop .as-nav-drop__list a {
    color: #e7e7ea !important;
}
.as-header-3-area:is(.has-sticky) .as-main-navigation .navbar-nav .as-nav-drop .as-nav-drop__list a:hover,
.as-header-3-area:is(.has-sticky) .as-main-navigation .navbar-nav .as-nav-drop .as-nav-drop__list a:focus-visible {
    color: var(--as-clr-pr-1) !important;
}

/* Desktop pointers only. Never open on hover where there is no hover. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .as-main-navigation .navbar-nav .as-nav-item--drop:hover > .as-nav-drop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}
@media (hover: none) {
    .as-main-navigation .navbar-nav .as-nav-item--drop:hover > .as-nav-drop {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px);
    }
}
/* If the breakpoint ever moves below 1200, degrade to an in-flow accordion
   instead of a floating card. */
@media (max-width: 1199.98px) {
    .as-main-navigation .navbar-nav .as-nav-drop {
        position: static;
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: none;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .as-main-navigation .navbar-nav .as-nav-drop { transition: none; transform: none; }
}

/* The desktop nav now shows from 1200px (was 1400), so the bar has to fit
   1200-1440 without wrapping. Measured needs vs available before tuning:
   1280 needed 600px and had 578. `nowrap` is the guard: a nav that wraps to a
   second row looks broken, and this way an overrun clips instead of reflowing
   the whole header. Below 1200 the drawer stays - the theme container is only
   960px there, and cramming 6 labels plus Cart / Sign in / Start a ticket into
   it overflowed the bar by 166px rather than fitting. */
.as-header-3-wrap { flex-wrap: nowrap; }
.as-main-navigation .navbar-nav { flex-wrap: nowrap; }
.as-main-navigation .navbar-nav > li > .as-mega__toggle { white-space: nowrap; }

@media (max-width: 1399px) {
    .as-header-3-action-link .site-header__cart,
    .as-header-3-action-link .site-header__account { font-size: 13px; }
    /* 1280 and 1366 get a 1140px container - the SAME as 1200 - but they fell
       outside the 1279 tier and so took the roomy 20px label padding. Seven
       labels x 8px of extra padding = 130px of overflow at exactly the two most
       common laptop widths. Label padding has to follow the CONTAINER
       breakpoint (Bootstrap: 1200-1399 -> 1140), not the viewport tier. */
    .as-main-navigation:is(.as-header-3-menu) .navbar-nav .as-nav-item > .as-nav-item__link { padding: 12px 16px; font-size: 15px; }
}
@media (max-width: 1279px) {
    .as-header-3-wrap { gap: 14px; padding: 10px 18px; }
    .as-header-3-nav { gap: 0; }
    .as-header-3-action-link { gap: 13px; }
}
/* The lockup and the CTA have to compact here too, for the same reason: at
   1280 the logo renders 100px wide against 67px at 1200, and the vendor CTA
   carries padding: 17px 49px - 98px of horizontal padding on a single-word
   label. That pair is the last 61px at the two most common laptop widths. */
@media (max-width: 1399px) {
    .as-header-3-logo.brand .brand__lockup { height: 42px; }
    .as-header-3-action-link .as-pr-btn-3 { padding: 13px 24px; font-size: 15px; }
}
@media (max-width: 1199px) {
    .as-header-3-wrap { padding: 10px 16px; }
    .as-header-3-logo.brand .brand__lockup { height: 40px; }
    .as-header-3-action-link { gap: 12px; }
    .as-header-3-action-link .as-pr-btn-3 { padding: 13px 22px; font-size: 15px; }
}
@media (max-width: 991px) {
    .as-header-3-wrap { padding: 10px 16px; }
}

/* Keyboard parity for the desktop dropdowns (theme ships hover only). */
.as-main-navigation .navbar-nav li:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}
.as-main-navigation .navbar-nav li:focus-within > a {
    color: var(--as-clr-pr-1);
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li:focus-within > a::after {
    opacity: 1;
    transform: translateX(0px);
}
/* Dropdown secondary line (service meta / season label) + season badge. */
.as-main-navigation .navbar-nav li .dropdown-menu a span.spec {
    display: block;
    font-family: var(--as-font-2, monospace);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    padding-top: 2px;
}
.as-main-navigation .navbar-nav li .dropdown-menu a .badge--season {
    display: inline-block;
    font-family: var(--as-font-2, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffd9cc;
    border: 1px solid rgba(253, 63, 0, 0.5);
    border-radius: 100px;
    padding: 1px 8px;
    margin-left: 8px;
}
.as-header-3-area.has-sticky .as-main-navigation .navbar-nav li .dropdown-menu a span.spec {
    color: rgba(0, 0, 0, 0.55);
}

/* Offcanvas (mobile menu) — dark via the theme's own has-dark mechanism.
   Logo-03 rides the shared ivory badge (see LOGO-03 block); only the
   offcanvas-specific lockup height lives here. */
.wa-offcanvas-social-link {
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13px;
}
.wa-offcanvas-area .mobile-main-navigation a span.badge--season {
    display: inline-block;
    font-family: var(--as-font-2, monospace);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffd9cc;
    border: 1px solid rgba(253, 63, 0, 0.5);
    border-radius: 100px;
    padding: 1px 7px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Preloader: the spider-mark letter is an <img>; size it to the 2em letters. */
.as-preloader-wrap .loader_letter img {
    width: 1.45em;
    height: 1.45em;
    display: inline-block;
    vertical-align: -0.18em;
}

/* --------------------------------------------------------------------------
   3. Sticky mobile ticket bar (<900px) — always-reachable primary action.
   -------------------------------------------------------------------------- */
.ticket-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.55);
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
}
.ticket-bar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ticket-bar .as-pr-btn-3 { flex: 1; justify-content: center; }
.ticket-bar__cart {
    flex: 0 0 auto;
    color: #f1f1f1;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    padding: 11px 20px;
    white-space: nowrap;
    transition: var(--as-cube-2);
}
.ticket-bar__cart:hover {
    border-color: var(--as-clr-pr-1);
    color: var(--as-clr-pr-1);
}
@media (max-width: 899px) {
    .ticket-bar { display: block; }
    body { padding-bottom: 4.75rem; } /* keep content clear of the bar */
    .toast-region { bottom: 5.75rem; }
}

/* --------------------------------------------------------------------------
   4. Footer-3 port placement.
   The template wrap grid (1fr 2.45fr 1fr) held circle-text + contact +
   one menu; the port adds a second menu list, so the columns are pinned
   explicitly: badge + contact left, the two menus in the wide middle
   column, the ticket CTA block right.
   -------------------------------------------------------------------------- */
.as-footer-3-wrap { align-items: start; }
.as-footer-3-wrap .as-footer-3-circle-text {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}
.as-footer-3-wrap .as-footer-3-contact {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
}
.as-footer-3-wrap .as-footer-3-menu-col {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-self: start;
}
.as-footer-3-wrap .as-footer-3-newsletter {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
}
.as-footer-3-contact .link-el-2 a,
.as-footer-3-contact .link-el-1 a {
    color: #f1f1f1;
    text-decoration: none;
    transition: var(--as-cube-2);
}
.as-footer-3-contact .link-el-2 a:hover,
.as-footer-3-contact .link-el-1 a:hover {
    color: var(--as-clr-pr-1);
}
.as-footer-3-contact p.as-p-1 {
    color: #898989;
    font-size: 14px;
}
.as-footer-3-policies a {
    color: #898989;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.8;
    transition: var(--as-cube-2);
}
.as-footer-3-policies a:hover { color: var(--as-clr-pr-1); }
.as-footer-3-hours,
.as-footer-3-note {
    color: #6d6d6d;
    font-size: 13px;
    margin-bottom: 6px;
}
.as-footer-3-big-text .title a {
    color: inherit;
    text-decoration: none;
}
.as-footer-3-made { color: #6d6d6d; }
@media (max-width: 767px) {
    .as-footer-3-wrap .as-footer-3-circle-text { grid-row: 1; }
    .as-footer-3-wrap .as-footer-3-contact { grid-row: 2; }
    .as-footer-3-wrap .as-footer-3-menu-col {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: 1fr;
        gap: 0;
    }
    .as-footer-3-wrap .as-footer-3-newsletter {
        grid-column: 1;
        grid-row: 4;
    }
}

/* --------------------------------------------------------------------------
   5. Inner-page hero (components/avista/inner-hero partial).
   -------------------------------------------------------------------------- */
.as-inner-hero {
    background-color: #050505;
    padding-top: 161px; /* clears the fixed floating pill nav */
    padding-bottom: 90px;
}
.as-inner-hero .as-subtitle-3 { margin-bottom: 22px; }
.as-inner-hero h1.tx-title {
    max-width: 20ch;
    color: #f1f1f1;
    font-size: 64px;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin-bottom: 26px;
}
.as-inner-hero .disc {
    max-width: 62ch;
    color: #b3b3b3;
    font-size: 18px;
    margin-bottom: 26px;
}
.as-inner-hero .item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 30px;
}
.as-inner-hero .item-tags .as-p-1 {
    color: #898989;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.as-inner-hero .item-tags a.as-p-1 {
    color: #898989;
    text-decoration: none;
    border-bottom: 1px solid rgba(253, 63, 0, 0.4);
    transition: var(--as-cube-2);
}
.as-inner-hero .item-tags a.as-p-1:hover { color: var(--as-clr-pr-1); }
.as-inner-hero__cta { margin-top: 8px; }
@media (max-width: 991px) {
    /* Clear the docked pill: it stands ~106px tall, so the hero copy starts
       below the pill plus a small gap. */
    .as-inner-hero { padding-top: 120px; padding-bottom: 70px; }
    .as-inner-hero h1.tx-title { font-size: 44px; }
}
@media (max-width: 767px) {
    .as-inner-hero { padding-top: 112px; padding-bottom: 55px; }
    .as-inner-hero h1.tx-title { font-size: 34px; }
    .as-inner-hero .disc { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   6. Ticket panel (components/avista/ticket-panel partial) tweaks.
   -------------------------------------------------------------------------- */
.as-cta-2-form-wrap .as-cta-2-form-content .item-disc { margin-bottom: 10px; }
.as-cta-2-form-wrap .as-cta-2-form-content .item-disc strong { color: #f1f1f1; }
.as-cta-2-form-wrap .as-cta-2-form-content .footnote {
    color: #6d6d6d;
    font-size: 13px;
    margin-top: 18px;
    margin-bottom: 0;
}
.as-cta-2-form-wrap .as-cta-2-form-content .item-tags { margin-top: 18px; }
.as-cta-2-form-wrap .as-cta-2-form-content .item-tags .as-p-1 {
    color: #c9c9c9;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   7. Article body — trusted admin/blog HTML on #050505 backgrounds.
   -------------------------------------------------------------------------- */
.article-body {
    color: #b3b3b3;
    font-size: 17px;
    line-height: 1.75;
}
.article-body h2,
.article-body h3,
.article-body h4 {
    color: #f1f1f1;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 2em 0 0.6em;
}
.article-body h2 { font-size: 32px; }
.article-body h3 { font-size: 24px; }
.article-body h4 { font-size: 19px; }
.article-body p { margin: 0 0 1.2em; }
.article-body a {
    color: var(--as-clr-pr-1);
    text-decoration: none;
    border-bottom: 1px solid rgba(253, 63, 0, 0.4);
}
.article-body a:hover { color: var(--as-clr-pr-3); border-bottom-color: var(--as-clr-pr-3); }
.article-body ul,
.article-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.article-body ul { list-style: none; }
.article-body ul li { position: relative; margin-bottom: 0.5em; }
.article-body ul li::before {
    content: "";
    position: absolute;
    left: -1.05em;
    top: 0.72em;
    width: 6px;
    height: 6px;
    background: var(--as-clr-pr-1);
}
.article-body ol li { margin-bottom: 0.5em; }
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin: 1.4em 0;
}
.article-body blockquote {
    margin: 1.6em 0;
    padding: 18px 26px;
    border-left: 3px solid var(--as-clr-pr-1);
    background: #1D1D1D;
    border-radius: 0 14px 14px 0;
    color: #d6d6d6;
    font-size: 19px;
}
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 15px;
}
.article-body table th {
    text-align: left;
    color: #f1f1f1;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px 12px;
}
.article-body table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 12px;
}

/* --------------------------------------------------------------------------
   8. Honest placeholder treatments (work shelf / empty team slots).
   -------------------------------------------------------------------------- */
.as-projects-3-item.is-placeholder .item-img {
    background:
        linear-gradient(135deg, rgba(253, 63, 0, 0.06), transparent 55%),
        repeating-linear-gradient(
            -45deg,
            #141414 0 14px,
            #101010 14px 28px
        );
    border: 1px dashed rgba(255, 255, 255, 0.16);
}
.as-projects-3-item.is-placeholder .item-img::after { display: none; }
.as-team-3-item.is-placeholder {
    background: repeating-linear-gradient(-45deg, #141414 0 14px, #101010 14px 28px);
    border: 1px dashed rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   9. Legacy button set (shop views + JS-built drawer foot).
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--as-font-1);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 100px;
    padding: 11px 24px;
    cursor: pointer;
    transition: var(--as-cube-2);
}
.btn--primary {
    background: var(--as-clr-pr-1);
    color: #fff;
}
.btn--primary:hover {
    background: var(--as-clr-pr-3);
    color: #fff;
}
.btn--secondary {
    background: transparent;
    color: #f1f1f1;
    border-color: rgba(255, 255, 255, 0.25);
}
.btn--secondary:hover {
    border-color: var(--as-clr-pr-1);
    color: var(--as-clr-pr-1);
}
.btn--small { padding: 7px 16px; font-size: 12.5px; }
.btn--large { padding: 14px 30px; font-size: 15px; }

/* --------------------------------------------------------------------------
   10. JS-generated shop chrome (atelier.js builds these; no view has them).
   -------------------------------------------------------------------------- */

/* Cart drawer */
.at-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(440px, 94vw);
    background: #0d0d0d;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -18px 0 60px rgba(0, 0, 0, 0.6);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transform: translateX(102%);
    transition: transform 0.45s var(--as-cube-1);
}
.at-drawer.is-open { transform: none; }
.at-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.at-drawer__title {
    color: #f1f1f1;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.at-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
}
.at-drawer__foot {
    padding: 18px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    gap: 10px;
}
.at-btn-ghost {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #b3b3b3;
    font: inherit;
    font-size: 13px;
    border-radius: 100px;
    padding: 6px 16px;
    cursor: pointer;
    transition: var(--as-cube-2);
}
.at-btn-ghost:hover { border-color: var(--as-clr-pr-1); color: #fff; }
.at-btn-solid {
    background: var(--as-clr-pr-1);
    color: #fff;
    border: 0;
    font: inherit;
    font-weight: 600;
    border-radius: 100px;
    padding: 12px 26px;
    cursor: pointer;
    transition: var(--as-cube-2);
}
.at-btn-solid:hover { background: var(--as-clr-pr-3); }
.at-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}
.at-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Quick-view / size-chart modal */
.at-modal {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: #0d0d0d;
    color: #b3b3b3;
    padding: 0;
    max-width: min(920px, 94vw);
    width: 100%;
}
.at-modal::backdrop {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
}
.at-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #f1f1f1;
    width: 38px;
    height: 38px;
    font-size: 15px;
    cursor: pointer;
    transition: var(--as-cube-2);
}
.at-modal__close:hover { border-color: var(--as-clr-pr-1); color: #fff; }
.at-modal__grid { display: grid; grid-template-columns: 1fr 1fr; }
.at-modal__media {
    min-height: 440px;
    background-size: cover;
    background-position: center;
    border-radius: 20px 0 0 20px;
}
.at-modal__body {
    padding: 34px 34px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.eyebrow {
    font-family: var(--as-font-2, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--as-clr-pr-1);
}
.at-modal__name {
    color: #f1f1f1;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}
.at-modal__blurb { color: #b3b3b3; line-height: 1.7; margin: 0; }
.at-modal ul.at-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
}
.at-modal ul.at-specs li { display: flex; gap: 10px; color: #9a9a9a; }
.at-modal ul.at-specs li::before { content: "—"; color: var(--as-clr-pr-1); }
.at-modal .field { display: grid; gap: 6px; }
.at-modal .field label,
.field > label {
    font-family: var(--as-font-2, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #898989;
}
.at-modal .field input[type="text"],
.at-modal .field input[type="number"],
.at-modal .field select,
.at-modal .field textarea,
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #f1f1f1;
    font: inherit;
    font-size: 15px;
    padding: 10px 14px;
    width: 100%;
}
.at-modal .field select,
.field select { appearance: auto; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.at-modal .field input:focus,
.at-modal .field select:focus {
    outline: none;
    border-color: var(--as-clr-pr-1);
}
.link-stitch {
    color: #898989;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(253, 63, 0, 0.45);
    align-self: flex-start;
}
.link-stitch:hover { color: var(--as-clr-pr-1); }
@media (max-width: 767px) {
    .at-modal__grid { grid-template-columns: 1fr; }
    .at-modal__media { min-height: 240px; border-radius: 20px 20px 0 0; }
}

/* Toasts */
.toast-region {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: min(360px, 86vw);
}
.toast {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid var(--as-clr-pr-1);
    border-radius: 12px;
    color: #f1f1f1;
    font-size: 14px;
    padding: 13px 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s, transform 0.35s;
}
.toast.is-shown { opacity: 1; transform: none; }

/* Bench rail (atelier.js builds nav.bench-rail) */
.bench-rail {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bench-rail a {
    font-family: var(--as-font-2, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #6d6d6d;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px;
    padding: 4px 10px;
    background: rgba(5, 5, 5, 0.72);
    transition: var(--as-cube-2);
}
.bench-rail a:hover { color: #f1f1f1; border-color: rgba(255, 255, 255, 0.35); }
.bench-rail a.is-current {
    color: #fff;
    border-color: var(--as-clr-pr-1);
    background: rgba(253, 63, 0, 0.16);
}
.bench-station { scroll-margin-top: 130px; }
@media (max-width: 991px) {
    .bench-rail { display: none; }
}

/* Bench station (components/bench-station.php) — moved here from the partial
   by the integration sweep: the partial's once-per-request guard could not
   survive View::partial re-includes (each include gets a fresh closure), so
   /contact with 3 stations emitted the block 3x. Styles are fully
   namespaced under .bench-station / .bench-caption. */
.bench-station{position:relative;overflow:hidden;background:#050505;display:flex;flex-direction:column;justify-content:center;min-height:520px}
.bench-station--plate{min-height:360px}
.bench-station__photo{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.34}
.bench-station__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.58) 46%,rgba(5,5,5,.9) 100%)}
.bench-station__numeral{position:absolute;top:10px;right:26px;z-index:1;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);font-size:clamp(88px,15vw,190px);pointer-events:none;user-select:none}
.bench-station__content{position:relative;z-index:2;width:100%;padding-block:clamp(80px,10vw,130px)}
.bench-station--plate .bench-station__content{padding-block:clamp(56px,7vw,90px)}
.bench-station__title{color:#fff;font-size:clamp(2rem,4vw,3.1rem);line-height:1.06;font-weight:600;margin:0 0 18px}
.bench-station__lede{color:#b3b3b3;font-size:clamp(15px,1.3vw,18px);line-height:1.75;max-width:62ch;margin:0 0 26px}
.bench-station__crumbs{margin-bottom:18px}
.bench-station__actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.bench-caption{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(18px,4vw,42px);z-index:2;background:rgba(10,10,10,.86);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px 26px;backdrop-filter:blur(8px);min-width:250px;max-width:330px}
.bench-caption__title{margin:0 0 12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6f6d6a}
.bench-caption dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.bench-caption dt{color:#6f6d6a;font-size:13px;white-space:nowrap}
.bench-caption dd{margin:0;color:#f1f1f1;font-size:14px;word-break:break-word}
html.js .bench-station{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
html.js .bench-station.is-inview{opacity:1;transform:none}
@media (max-width:767px){
.bench-station{min-height:440px}
.bench-station--plate{min-height:300px}
.bench-caption{position:static;margin:22px auto 0;max-width:none;width:100%}
}

/* Uploader / dropzone (spider-public.js) */
.dropzone,
[data-dropzone] {
    display: block;
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: #101010;
    padding: 22px 20px;
    color: #898989;
    cursor: pointer;
    transition: var(--as-cube-2);
}
.dropzone:hover,
[data-dropzone]:hover { border-color: rgba(253, 63, 0, 0.55); color: #b3b3b3; }
.dropzone.is-dragover,
[data-dropzone].is-dragover {
    border-color: var(--as-clr-pr-1);
    background: rgba(253, 63, 0, 0.08);
    color: #f1f1f1;
}
.upload,
.upload-dropzone { display: grid; gap: 10px; }
.upload-list,
.upload__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.upload-list__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--as-font-2, monospace);
    font-size: 12px;
    color: #9a9a9a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 7px 12px;
    background: #0d0d0d;
}
.upload-list__row.is-over { color: var(--as-clr-pr-3); border-color: rgba(251, 13, 31, 0.5); }

/* --------------------------------------------------------------------------
   11. Shop page classes (cart / checkout / quote-path views + drawer body).
   -------------------------------------------------------------------------- */
.cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
.cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
}
.cart-line__photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.cart-line__body { display: grid; gap: 3px; }
.cart-line__body strong { color: #f1f1f1; font-weight: 600; }
.cart-line__spec,
.cart-line__notes {
    color: #898989;
    font-size: 12.5px;
    font-family: var(--as-font-2, monospace);
}
.cart-line__notes { font-style: italic; font-family: var(--as-font-1); }
.cart-line__price {
    font-family: var(--as-font-2, monospace);
    color: #f1f1f1;
    font-size: 14px;
    white-space: nowrap;
}
.cart-line__remove { margin: 0; }
.cart-line__remove button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #898989;
    font: inherit;
    font-size: 11.5px;
    border-radius: 100px;
    padding: 4px 12px;
    cursor: pointer;
    margin-top: 8px;
    transition: var(--as-cube-2);
}
.cart-line__remove button:hover {
    border-color: var(--as-clr-pr-3);
    color: var(--as-clr-pr-3);
}
.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-top: 16px;
}
.cart-total span {
    color: #898989;
    font-family: var(--as-font-2, monospace);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
}
.cart-total strong { color: #f1f1f1; font-size: 24px; font-weight: 600; }
.cart-empty,
.empty-state {
    color: #9a9a9a;
    display: grid;
    gap: 14px;
    justify-items: start;
}
.empty-state h2,
.empty-state h1 {
    color: #f1f1f1;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}
.empty-state p { margin: 0; max-width: 54ch; color: #898989; }
.checkout__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.checkout__lines li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: #b3b3b3;
    font-size: 14.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}
.checkout__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #f1f1f1;
    font-weight: 600;
    font-size: 18px;
}
.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
/* Checklist text: #b3b3b3 passed AA on paper (10:1) but read dim at 14-15px
   on the black cards - panels the owner flagged as unreadable. ~15:1 now. */
.checklist li { color: #dedede; font-size: 15px; }
.tick-mark {
    color: var(--as-clr-pr-1);
    margin-right: 10px;
    font-family: var(--as-font-2, monospace);
}
.notice {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: #111;
    color: #b3b3b3;
    padding: 14px 18px;
    font-size: 14.5px;
}
.notice--ok { border-left: 3px solid #6F8F6A; }
.error-summary {
    border: 1px solid rgba(251, 13, 31, 0.45);
    border-radius: 12px;
    background: rgba(251, 13, 31, 0.07);
    color: #f1f1f1;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.error-summary h2,
.error-summary strong { color: #ff8f97; font-size: 17px; }
.error-summary ul { margin: 8px 0 0; padding-left: 1.2em; color: #d6a0a4; }
.error-summary a { color: #ff8f97; }
.error-summary:focus { outline: 2px solid var(--as-clr-pr-3); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   12. Reduced motion — stand the decorations down (spider-public.js adds
   html.reduced-motion). The preloader hides instantly instead of playing
   its bounce; CSS animations stop; scroll-driven transforms settle.
   -------------------------------------------------------------------------- */
html.reduced-motion .as-preloader {
    display: none;
}
html.reduced-motion .as-preloader-wrap .loader_letter,
html.reduced-motion .as-footer-3-circle-text .circle-text,
html.reduced-motion .as-testimonial-3-slider-preview-item .circle-text,
html.reduced-motion .wa-back-to-top,
html.reduced-motion .as-hero-3-overly span,
html.reduced-motion .animated {
    animation: none !important;
    transition-duration: 0.01ms !important;
}
html.reduced-motion .wow { visibility: visible !important; }
html.reduced-motion .as_mt3_ani_left,
html.reduced-motion .as_mt3_ani_right { transform: none !important; }
html.reduced-motion .bench-station{opacity:1 !important;transform:none !important;transition:none !important}

/* --------------------------------------------------------------------------
   13. Print — keep the useful page, drop the chrome.
   -------------------------------------------------------------------------- */
@media print {
    .as-preloader,
    .as-header-3-area,
    .wa-offcanvas-area,
    .wa-overly,
    .wa-back-to-top,
    .ticket-bar,
    .toast-region,
    .bench-rail,
    .at-drawer,
    .at-scrim { display: none !important; }
    body { background: #fff; color: #000; }
    .page-wrapper { overflow: visible; }
    .bench-station { min-height: auto; }
    .bench-station__photo { opacity: .12; }
}

/* --------------------------------------------------------------------------
   Custom cursor — disable on touch / coarse pointers. The 60px .wa-cursor
   renders as a brown ring even without JS mouse tracking on touch; it is a
   desktop affordance only.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (hover: none) {
    .wa-cursor { display: none !important; }
}

/* --------------------------------------------------------------------------
   Back-to-top must clear the sticky ticket bar on mobile. Ticket bar is
   z-index 3; the button is 4. When the bar is visible it must not sit under
   the button's 40px square.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .wa-back-to-top:is(.active) { bottom: calc(4.75rem + 16px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* --------------------------------------------------------------------------
   Back-to-top must also clear the chat launcher on desktop.

   The vendor parks the button at `bottom: 2.5%`, which at a 900px-tall window
   is 22.5px from the bottom. The chat launcher sits at `bottom: 1.4rem` = 22.4px
   and `right: 1.6rem` against the button's `right: 1.5%` = 21.6px. Within a
   pixel of each other - they were stacked exactly on top of one another.

   libo solves this the same way: its back-to-top sits at 5.5rem with the chat
   launcher BELOW it at 1.4rem. The launcher is the one people reach for, so it
   keeps the corner and the button moves up.

   This lives here rather than in chat.css because chat.css is emitted BEFORE
   this file (see layouts/public.php) - a rule there would lose to the vendor's
   `bottom: 2.5%` on equal specificity.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .wa-back-to-top:is(.active) { bottom: 5.5rem !important; }
}

/* Brand assets — Logo-03 is the only art (see LOGO-03 block above).
   Lockup sizing is height-driven there; nothing may reset it to auto. */

/* Keyboard focus ring for the logo links. */
.brand:focus-visible {
    outline: 2px solid var(--as-clr-pr-1);
    outline-offset: 3px;
}

/* End brand mark */

/* --------------------------------------------------------------------------
   PRODUCTION HERO PASS (Spider)
   The Avista demo hero carried its own mini-header (contact block, status
   pill, secondary link row) plus a full-bleed decorative wordmark. With our
   real header docked at the top those all duplicate or collide, and the
   demo's grey body copy is unreadable over photography. This block makes the
   hero legible and removes the duplicated chrome.
   -------------------------------------------------------------------------- */

/* 1. Drop the hero's mini-header: "Contact"/email duplicate the footer and
      the ledger/journal/ticket links duplicate the main nav. */
.as-hero-3-top { display: none !important; }

/* 2. Scrim. Two unrelated photos meet on a hard vertical seam; a single
      gradient across the whole hero unifies them and buys text contrast. */
.as-hero-3-area::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.78) 38%, rgba(5,5,5,.42) 62%, rgba(5,5,5,.66) 100%),
        linear-gradient(to top, rgba(5,5,5,.95) 0%, rgba(5,5,5,0) 42%);
}
.as-hero-3-area .container { position: relative; z-index: 2; }

/* 2b. The hero's photo seam. Vendor ships img-1 clipped to
       polygon(0 0, 40% 0, 40% 100%, 0 100%) and img-2 to the mirror of it,
       which is a dead-straight vertical cut down the middle of the fold - two
       unrelated photos butted together with a ruler edge. Both halves now meet
       on the same diagonal (52% at the top easing to 38% at the bottom), so
       the transition reads as one image opening out rather than a split. The
       vendor's scroll wipe (img-1 expands to 100%) still lands correctly
       because it only ever grows img-1's right-hand edge. Deliberately no
       `!important`: the bridge loads after the vendor sheet so source order
       wins, while the vendor's GSAP wipe writes an inline clip-path that
       outranks both the moment it starts. */
.as-hero-3-img-1 { clip-path: polygon(0 0, 52% 0, 38% 100%, 0 100%); }
.as-hero-3-img-2 { clip-path: polygon(52% 0, 100% 0, 100% 100%, 38% 100%); }
/* Soften the join so the diagonal does not read as a hard vector edge. */
.as-hero-3-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 26%,
        rgba(5, 5, 5, 0.35) 42%,
        rgba(5, 5, 5, 0.35) 58%,
        transparent 74%
    );
}

/* 3. Legible hero copy. */
.as-hero-3-content .title {
    color: #fff;
    text-wrap: balance;
    max-width: 22ch;
    text-shadow: 0 2px 28px rgba(0,0,0,.55);
}
.as-hero-3-content .disc,
.as-hero-3-content .disc span {
    color: #e6e6e6 !important;
    max-width: 46ch;
    text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
.as-hero-3-content .item-tags .as-p-1 {
    color: #f2f2f2 !important;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    padding: 6px 14px;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,.06);
}

/* 4. The decorative wordmark stays as texture, not as clutter. */
.as-hero-3-big-title {
    opacity: .07 !important;
    mix-blend-mode: normal !important;
    color: #fff !important;
    pointer-events: none;
}

/* 4b. Kill the hero's dead tail - this is the real source of the ~490px
       void below the CTA, not a "spacer". The vendor wraps the whole hero in
       `.as-hero-3-height { height: 2000px }` (1800px at 1200-1799px) to give
       its pinned hero room to travel. avista-spider.js already kills that pin
       because it painted over the pricing section, so the wrapper is now just
       an empty box roughly a screen taller than its contents: content ends,
       black keeps going. `height: auto` makes the wrapper size to the hero. */
.as-hero-3-height { height: auto !important; }

/* The decorative 600px wordmark is texture (see 4a), so it does not need
   600px of box to do its job. Cap it and let the hero end just under the
   CTA row instead of two screens down. */
.as-hero-3-big-title {
    font-size: clamp(140px, 17vw, 300px) !important;
    /* line-height 1, not .82: at anything below 1 the glyph ink overflows the
       line box, and clipping it looked like an accidental crop rather than a
       deliberate bleed. */
    line-height: 1 !important;
    margin-bottom: 0 !important;
}
.as-hero-3-area { padding-bottom: 0 !important; }
/* Breathing room under the CTA row, but a bounded amount. */
.as-hero-3-content { padding-bottom: clamp(48px, 7vw, 96px) !important; }

/* 6. The vendor's "Every" / "Season" display words (team-3) never arrive.
   avista-core.css ships `.as-team-3-title { opacity: 0 }` as the resting
   state, then avista-core.js animates them with `from({ x: 816, opacity: 1 })`.
   A `from()` tween ends at the CSS value, so the scroll-triggered timeline
   drove them 1 -> 0: the two 150px words were fully opaque on load and then
   faded to invisible exactly as you scrolled them into view (measured at 1600,
   1680 and 1920). Below 1600px the vendor hides them with `display: none`.
   Pin the visible state so only the x-slide animates; the words are content,
   not decoration, and they must not be able to animate themselves away. */
.as-team-3-title { opacity: 1 !important; }

/* 6b. The season board hid its own links. Each `.as-team-3-item` is a photo
   card with an absolutely-positioned `.content-wrap` overlay that the vendor
   ships at `opacity: 0; transform: translateY(30%)` and reveals only on
   `:hover` (vendor css:5769). Inside that overlay sit the actual
   `<a href="/sports/<slug>">` links and the season label. Consequences:
   keyboard users could not tab to any sport; touch users had no hover at all,
   so every one of the board's links was unreachable; and the only visible
   text was the tiny `.name` label pinned to the bottom edge.
   Reveal on hover OR focus-within (keyboard parity) and, below 768px, reveal
   by default since there is no hover to wait for. */
.as-team-3-item .content-wrap { z-index: 1; }
.as-team-3-item:hover .content-wrap,
.as-team-3-item:focus-within .content-wrap {
    opacity: 1;
    transform: translateY(0);
}
.as-team-3-item:focus-within { outline: 2px solid var(--as-clr-pr-1); outline-offset: 3px; }
.as-team-3-item .content-wrap .name-2 a { color: #fff; }
.as-team-3-item .content-wrap .name-2 a:focus-visible {
    outline: 2px solid var(--as-clr-pr-1);
    outline-offset: 4px;
}
@media (max-width: 767px), (hover: none) {
    .as-team-3-item .content-wrap { opacity: 1; transform: none; }
}

/* 5. Nav dropdowns must not paint while closed (the demo left them at
      opacity 0 but still laid out and clickable over the page below).
      Scope the hide to the resting state ONLY: this rule and the vendor
      `li:hover > .dropdown-menu` reveal have equal specificity, and the
      bridge loads last — so an unqualified hide silently wins over hover and
      kills every desktop dropdown. Excluding :hover / :focus-within lets the
      reveal through while still hiding the menu at rest. */
.as-main-navigation .navbar-nav li:not(:hover):not(:focus-within) > .dropdown-menu:not(.show) {
    visibility: hidden;
    pointer-events: none;
}

/* Hero CTA row — the demo hero had no action; this is the primary
   conversion path, so it sits directly under the value proposition. */
.as-hero-3-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 36px;
}
.as-hero-3-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 15px;
    letter-spacing: .01em;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,.32);
    transition: border-color .25s ease, gap .25s ease;
}
.as-hero-3-cta__link:hover {
    color: #fff;
    border-bottom-color: var(--as-clr-pr-1);
    gap: 14px;
}
.as-hero-3-cta__link i { font-size: 12px; }

/* --------------------------------------------------------------------------
   DARK-SECTION TYPE CONTRAST (Spider)
   The Avista type scale (.as-h-1 and friends) defaults to near-black — it was
   authored for the light demo. Our sections are .has-dark on a #050505 ground,
   so every heading rendered rgb(10,10,10) on rgb(5,5,5): present in the DOM,
   invisible on screen. Repaint headings light on dark sections, and exclude
   the two genuinely light surfaces (the quote-form card and the journal
   cards) so their dark type survives.
   -------------------------------------------------------------------------- */
.has-dark :is(h1,h2,h3,h4,h5,h6),
.has-dark :is(.as-h-1,.as-h-2,.as-h-3,.tx-title,.title,.name) {
    color: #f4f4f5;
}
.has-dark :is(.as-p-1,.as-p-2,p,li,.disc) {
    color: #b8b8bd;
}

/* Light islands keep their dark type. */
.as-cta-2-form-wrap :is(h1,h2,h3,h4,h5,h6,.as-h-1,.title,.tx-title,.name),
.as-testimonial-3-slider-main-item :is(h1,h2,h3,h4,h5,h6,.as-h-1,.title,.tx-title,.name) {
    color: #0a0a0a;
}
.as-cta-2-form-wrap :is(p,li,.as-p-1,.as-p-2,.disc),
.as-testimonial-3-slider-main-item :is(p,li,.as-p-1,.as-p-2,.disc) {
    color: #3f3f46;
}

/* --------------------------------------------------------------------------
   AUTH CARDS — light type on the solid-dark card (Spider).

   The seven auth views (login, signup, reset, reset-sent, forgot,
   verify-pending, verify-result) render their .as-auth-card through
   layouts/public. That layout carries `has-dark as-inner`, but inner public
   pages sit on the WHITE body ground: avista-core sets no dark background on
   body / .as-inner — the #050505 ground is opt-in per area (cf. the contact
   light island .as-contact-3-content, itself a #f5f5f5 card). What makes the
   form legible is the CARD, not the page: avista-core:8464 ships
   `.as-cta-2-form-wrap { background:#000 }`, the opaque dark surface the view
   was authored against (login.php calls it "the centered dark auth card"; its
   inline accents — .disc #b3b3b3, .field-error #ff8f97, light dividers — are
   all dark-card colours).

   Two defects put near-black text on that card:
     • the unscoped `.as-cta-2-form-wrap :is(...)` rules above (1266-1273)
       painted headings #0a0a0a and body/input text #3f3f46 — near-black on the
       #000 card, present in the DOM but invisible (WCAG 1.4.3): the reported bug;
     • `body{color:#000}` (avista-core:24) bled into bare nodes (the flash
       notice) since no `.has-dark` base colour exists.

   Fix: re-assert light type, scoped to .as-auth-card so the contact light
   island and the dark panels (neither carries .as-auth-card) are untouched. The
   card MUST keep an OPAQUE dark fill — a translucent one collapses to white on
   this white ground (the earlier regression of this very block) — lifted off
   the page with a soft shadow rather than a hairline border it no longer needs.
     • card colour sets the inherited default for bare nodes (the notice text);
     • headings at :is() (0,3,0) beat the rule above (0,2,0);
     • body at :where() (0,2,0) ties it and wins on source order, while still
       yielding to each view's own inline accents (.disc #b3b3b3, item-tags,
       field hints/errors, notice strong) at equal-or-higher specificity;
     • placeholders are the only visible field labels (the real <label> is
       sr-only), so they get a legible grey, not the faint browser default. */
.as-auth-card.as-cta-2-form-wrap {
    color: #b8b8bd;
    background: #050505;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.as-auth-card.as-cta-2-form-wrap :is(h1, h2, h3, h4, h5, h6, .as-h-1, .as-h-2, .as-h-3, .title, .tx-title, .name) {
    color: #f4f4f5;
}
.as-auth-card.as-cta-2-form-wrap :where(p, li, .as-p-1, .as-p-2, .disc) {
    color: #b8b8bd;
}
.as-auth-card.as-cta-2-form-wrap .as-cta-2-form-input::placeholder {
    color: #8a8a90;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   QUOTE WIZARD PANEL — light type on the black card (WCAG 1.4.3 fix).

   Same defect + same fix as the auth cards above: the unscoped light-island
   rules (1266-1273) painted .qf-panel text #0a0a0a/#3f3f46 on the #000 card
   avista-core:8464 gives it — measured 2.01:1. Re-assert light type scoped
   to .qf-panel so the contact light island (no .qf-panel) is untouched.
   -------------------------------------------------------------------------- */
.qf-panel.as-cta-2-form-wrap {
    color: #b8b8bd;
}
.qf-panel.as-cta-2-form-wrap :is(h1, h2, h3, h4, h5, h6, .as-h-1, .as-h-2, .as-h-3, .title, .tx-title, .name) {
    color: #f4f4f5;
}
.qf-panel.as-cta-2-form-wrap :where(p, li, .as-p-1, .as-p-2, .disc) {
    color: #b8b8bd;
}
.qf-panel.as-cta-2-form-wrap :where(.qf-group-label, .qf-micro) {
    color: #9d9da4;
}

/* --------------------------------------------------------------------------
   KEYBOARD FOCUS (WCAG 2.4.7) — the vendor strips outlines globally and never
   restores them. :focus-visible keeps mouse clicks clean while giving
   keyboard users a 2px ember ring (5.7:1 on #050505, 3.27:1 on #f5f5f5 —
   both above the 3:1 UI-component minimum). This also recovers focus on the
   light cards where avista-core's grey :focus-within border beats the ember.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--as-clr-pr-1);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   EMBER FILLS — white on #fd3f00 measured 3.57:1, below the 4.5:1 text
   minimum at 14px/600. Darken just the FILLS one step (the token itself is
   untouched — it passes wherever it colors links/text/decoration); the
   darker ember keeps the brand read and clears AA with white text.
   -------------------------------------------------------------------------- */
.skip-link:focus,
.btn--primary,
.at-btn-solid {
    background-color: #cc3300; /* 5.20:1 with #fff */
}
.btn--primary:hover,
.btn--primary:focus-visible,
.at-btn-solid:hover,
.at-btn-solid:focus-visible {
    background-color: #b32d00; /* 6.38:1 with #fff */
}

/* Bench-rail nav text was #6d6d6d (3.19:1) on the dark ground. */
.bench-rail a { color: #8a8a90; }

/* Numeric stat figures read as the accent, not as body copy. */
.as-marquee-text-3-area .as-h-1.title { color: #fff; }

/* --------------------------------------------------------------------------
   STICKY HEADER — dark glass (Spider)
   The vendor sticky state paints the bar rgba(220,220,220,.8) with black nav
   text; that was the light demo's inverse trick. On our #050505 ground it
   became an opaque pale slab sitting over dark content. Keep the sticky bar
   dark and translucent so the site reads as one surface.
   -------------------------------------------------------------------------- */
.as-header-3-area:is(.has-sticky) .as-header-3-wrap::after {
    background-color: rgba(10, 10, 12, 0.82) !important;
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.as-header-3-area:is(.has-sticky) .as-main-navigation:is(.as-header-3-menu) .navbar-nav li a {
    color: #ececf0 !important;
}
.as-header-3-area:is(.has-sticky) .as-main-navigation:is(.as-header-3-menu) .navbar-nav li .dropdown-menu {
    background-color: rgba(16, 16, 19, 0.97) !important;
}
.as-header-3-area:is(.has-sticky) .as-header-3-action-link a { color: #ececf0; }

/* --------------------------------------------------------------------------
   HEADER-3 NAV — black glass, clean hover, downward dropdowns (Spider)
   The Avista demo pill is navy (rgba(1,20,76)), its hover is a white→black
   gradient slab, and its dropdowns open UPWARD (bottom:100%) — which only
   made sense when the pill floated at the hero bottom. Our header docks at
   the TOP on every inner page, so upward menus opened off-screen. Repaint the
   pill and menus black, replace the hover slab with a tasteful accent, and
   flip the menus to open downward. Kept out of the .has-sticky branch, which
   already has its own dark-glass treatment above.
   -------------------------------------------------------------------------- */

/* 1. The pill itself — black glass instead of navy. */
.as-header-3-area:not(.has-sticky) .as-header-3-wrap::after {
    background-color: rgba(10, 10, 12, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* 2. Hover / active — kill the white→black gradient slab; use a soft dark
      fill with an accent underline so the target reads without shouting. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li a::after {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 100px;
    transform: translateX(0) !important;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li a {
    position: relative;
    transition: color .28s var(--as-cube-1, ease);
}
/* Accent underline pill — a second decorative layer under the label. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li > a::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 6px;
    top: auto;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--as-clr-pr-1), var(--as-clr-pr-3));
    transform: translateX(-50%);
    transition: width .3s var(--as-cube-1, ease);
    font-family: inherit; /* neutralize the vendor FontAwesome caret glyph */
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li:hover > a::before,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li:focus-within > a::before,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li > a.active::before {
    width: calc(100% - 40px);
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li:hover > a,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li:focus-within > a,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li > a.active {
    color: #ffffff;
}

/* 3. Dropdowns open DOWNWARD from the top-docked pill, painted black. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li .dropdown-menu {
    top: 100%;
    bottom: auto;
    transform-origin: top;
    margin-top: 14px;
    background-color: rgba(14, 14, 17, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
/* A hover bridge closes the 14px gap so the menu never dismisses mid-reach. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li .dropdown-menu li a {
    color: #e7e7ea;
    transition: background-color .2s ease, color .2s ease;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li .dropdown-menu li:hover > a {
    color: #ffffff;
    background-color: rgba(253, 63, 0, 0.12);
}
/* Nested submenus (if any) still flank to the side, not upward. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li .dropdown-menu li .dropdown-menu {
    top: 0;
    bottom: auto;
}

/* In-page anchors must clear the fixed header pill. */
:target,
#start-here, #catalog, #shelf { scroll-margin-top: 146px; }

/* Proof tags: the demo let these run together as bare inline spans. */
.sp-quickstart__intro .item-tags,
.as-cta-2-form-wrap .item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.sp-quickstart__intro .item-tags .as-p-1 {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 13px;
    color: #d4d4d8 !important;
}
/* Light-card pill treatment for the ticket-panel / contact form tags. The
   auth cards are dark and style their own item-tags (login.php et al.: #898989
   text, ember underline), so exempt them — otherwise this `!important` colour
   hijacks the auth links to near-black on the dark card. */
.as-cta-2-form-wrap:not(.as-auth-card) .item-tags .as-p-1 {
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12.5px;
    color: #52525b !important;
}

/* ==========================================================================
   JOURNAL SECTION (as-testimonial-3) — height + palette
   avista-core.css:9453 hard-codes `height: 2600px` on .as-testimonial-3-area
   to give its pinned scroll journey room. Our pinned content measures 742px,
   so 1858px of that was dead scroll. 1500px keeps the circle-reveal scrub
   feeling deliberate without the void. The demo's expanding disc is
   --as-clr-pr-3 (#fb0d1f) — a 3000px full-bleed pure red slab, which is the
   Avista brand, not ours. Spider reads dark with #fd3f00 as an accent, so the
   disc becomes a deep ember with the accent only at its edge.
   ========================================================================== */
@media (min-width: 1200px) {
    .as-testimonial-3-area {
        height: 1500px;
    }
}

.as-testimonial-3-area {
    background-color: #050505;
}

.as-testimonial-3-bg-color {
    background: radial-gradient(circle at 50% 50%,
            #1c0a02 0%,
            #170800 58%,
            #2a0d00 84%,
            var(--as-clr-pr-1) 100%) !important;
}

/* The journal card sits on the ember disc, so its own type stays dark on its
   own light card — already handled by the dark-section exclusion list above. */

/* ==========================================================================
   FAQ (as-faqs-3) — the demo's decorative disc is 995px of empty column above
   a 736px accordion. Tighten the disc block so five questions do not occupy
   2250px of page.
   ========================================================================== */
@media (min-width: 1200px) {
    .as-faqs-3-top {
        padding-top: 90px;
        padding-bottom: 0;
    }

    .as-faqs-3-top-bg-circle {
        max-height: 620px;
    }

    .as-faqs-3-bottom-height {
        height: auto;
        min-height: 0;
    }
}

/* ==========================================================================
   HERO SCROLL WRAPPER — avista-core.css:4204 gives .as-hero-3-height a fixed
   1800px (2000px above 1800w) and `background-color:#DCDCDC`. The hero itself
   measures 975px, so the remaining 825px rendered as a bare light-grey slab
   under our dark hero — the single largest colour break on the page. The extra
   height is what the hero's GSAP scrub uses, so keep some of it, painted in
   the page ground instead of the demo's grey.
   ========================================================================== */
.as-hero-3-height {
    background-color: #050505;
}

@media (min-width: 1200px) {
    .as-hero-3-height {
        height: 1250px;
    }
}

/* .as-faqs-3-top is a fixed 995px flex box holding one heading + one line of
   copy behind the decorative disc. Padding cannot shrink a fixed height. */
@media (min-width: 1200px) {
    .as-faqs-3-top {
        height: 560px;
    }
}

/* ==========================================================================
   PRODUCT CARDS (as-projects-3-item) — the demo is a case-study grid: the
   image sits under an 83%-opaque #171717 veil (avista-core.css:10497) and only
   clears on hover, because the demo is selling the reveal. Ours is a shop
   grid — a customer choosing between a crew tee and a piqué polo has to see
   the garment before they hover, and on touch there is no hover at all. Keep a
   light veil so the white card type still holds contrast, and clear it fully
   on hover.
   ========================================================================== */
.as-projects-3-item .item-img::after {
    background: linear-gradient(to top, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.12) 45%, rgba(10, 10, 10, 0.04) 100%);
    opacity: 1;
}

.as-projects-3-item:hover .item-img::after {
    opacity: 0.45;
}

/* The veil gradient is darkest at the bottom, which is exactly where the
   floating action button sits — so it reads without its own scrim. */
.as-projects-3-item .item-img .btn {
    z-index: 2;
}

/* The demo prints its category as {01}; ours prints a real label, so the
   braces read as unrendered template syntax to a customer. */
.as-projects-3-item .categories {
    color: #fff;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12.5px;
    letter-spacing: 0.02em;
}

.as-projects-3-item .categories span {
    color: var(--as-clr-pr-1);
}

/* ---------------------------------------------------------------------------
   Ledger accordion (as-services-3) — collapsed titles.
   avista-core paints collapsed .item-title .text with
   linear-gradient(90deg, #333, transparent) clipped to the glyphs. On our
   #0a0a0a ground that starts at ~1.4:1 and fades to nothing mid-word, so a
   clickable header reads as a rendering bug. Keep the fade, start it legible.
   --------------------------------------------------------------------------- */
.as-services-3-accordion-item .item-title .text {
    background: linear-gradient(90deg, #e4e4e7 0%, #a1a1aa 55%, rgba(161, 161, 170, 0.35) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}
.as-services-3-accordion-item .item-title:is(.collapsed):hover .text {
    background: linear-gradient(90deg, #ffffff 0%, #d4d4d8 55%, rgba(253, 63, 0, 0.55) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

/* ---------------------------------------------------------------------------
   as-about-3 author stack. avista-core fans three #535e64 crescents out from
   behind the avatar. Against our black ground that grey reads as three broken
   image placeholders. Same motif, graded into the brand ramp so it reads as
   a deliberate layered accent.
   --------------------------------------------------------------------------- */
.as-about-3-author-img .img-shape-3 { background: #3f3f46; }
.as-about-3-author-img .img-shape-2 { background: #52525b; }
.as-about-3-author-img .img-shape-1 { background: var(--as-clr-pr-1); }

/* ---------------------------------------------------------------------------
   Shop by sport (as-team-3). avista-core fixes tiles at 195x235 landscape and
   centres a wrapping flex row: our 8 tiles land 6 + 2 orphans, and the portrait
   jersey photography gets cropped to a letterbox. Four across, portrait crop,
   two clean rows. The hover panel is solid #000 upstream, which erases the photo
   you just came to look at — scrim it instead.
   --------------------------------------------------------------------------- */
.as-team-3-members { gap: 16px; }
.as-team-3-item {
    width: calc((100% - 48px) / 4);
    height: auto;
    aspect-ratio: 4 / 5;
}
.as-team-3-item .name { font-size: 17px; padding: 15px 12px; }
.as-team-3-item .content-wrap {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.88) 100%);
    gap: 10px;
}
@media (max-width: 1199px) {
    .as-team-3-item { width: calc((100% - 32px) / 3); }
}
@media (max-width: 767px) {
    .as-team-3-item { width: calc((100% - 16px) / 2); }
    .as-team-3-item .name { font-size: 15px; padding: 12px 8px; }
}

/* Turnaround stats strip. .as-about-3-card-wrap is a 2-up card grid upstream;
   these are four short numbers, so a single row reads as one instrument panel. */
.sp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   FAQ (as-faqs-3) — desktop two-column below 1600px.
   Upstream only builds the accordion-left / form-right layout at >=1600px,
   where GSAP pins .as-faqs-3-accordion-pin against a 1600px-tall track. Below
   that it collapses .as-faqs-3-bottom to a 724px centred column, so at the
   1440 class width the accordion floats in the middle with ~350px of dead
   space on each side and the ticket form lands underneath it instead of beside
   it. Rebuild the two-column intent in plain CSS for 1200-1599, with a sticky
   accordion instead of a GSAP pin (no JS involved, so no pin/Lenis conflict).
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599px) {
    .as-faqs-3-bottom {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 72px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }
    .as-faqs-3-accordion-pin { position: sticky; top: 130px; }
    .as-faqs-3-accordion { padding: 40px 24px; }
    .as-faqs-3-accordion .as-accordion { gap: 20px; }
    .as-faqs-3-accordion .as-accordion-item .item-disc { font-size: 17px; line-height: 1.6; }
    .as-faqs-3-bottom .as-contact-3-content .as-cta-2-form-wrap { padding: 56px 36px; }
}

/* ---------------------------------------------------------------------------
   The ticket card is one component — keep one theme.
   avista-core ships two skins for .as-cta-2-form-wrap: the light #f5f5f5 card
   (.as-contact-3-content, ~8684) and a #1D1D1D dark card scoped to
   .has-dark:is(.as-faqs-3-area) (~13447). We render the same partial in both
   places, so the page showed the identical form light in sp-quickstart and dark
   in the FAQ, and every .quick-quote rule (authored dark-on-light) went
   unreadable in the second. The light card is the deliberate accent against the
   black page — it is where we want the eye — so pin the FAQ instance to it.
   These selectors match the upstream dark block's specificity on purpose.
   --------------------------------------------------------------------------- */
.has-dark:is(.as-faqs-3-area) .as-contact-3-content .as-cta-2-form-wrap {
    background-color: #f5f5f5;
}
.has-dark:is(.as-faqs-3-area) .as-contact-3-content .as-cta-2-form-content .subtitle {
    color: #676767;
}
.has-dark:is(.as-faqs-3-area) .as-contact-3-content .as-cta-2-form-content .title {
    color: #0a0a0a;
}
.has-dark:is(.as-faqs-3-area) .as-contact-3-content .as-cta-2-form-input {
    border-bottom: 1px solid #dadada;
}

/* ---------------------------------------------------------------------------
   reCAPTCHA companion block — components/recaptcha-notice.php
   Every guarded public form ends with this pair: the refusal message (only
   after a refusal) and Google's attribution (always, whenever the guard is
   live). The attribution is load-bearing, not decoration: layouts/public.php
   hides the floating badge because it lands on the back-to-top button, and
   Google's terms allow that only while this text and its two links appear in
   the form flow.
   --------------------------------------------------------------------------- */
.notice--error { border-left: 3px solid var(--as-clr-pr-3); }
.as-recaptcha-alert { margin: 0 0 18px; scroll-margin-top: 140px; }
.as-recaptcha-alert > strong:first-child { display: block; color: #f1f1f1; margin-bottom: 3px; }
.as-recaptcha-alert:focus { outline: none; }
.as-recaptcha-alert:focus-visible { outline: 2px solid var(--as-clr-pr-1); outline-offset: 3px; }
.as-recaptcha-note {
    margin: 16px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #8a8a8a;
}
.as-recaptcha-note a { color: inherit; text-decoration: underline; }
.as-recaptcha-note a:hover,
.as-recaptcha-note a:focus-visible { color: var(--as-clr-pr-1); }
/* The contact and quick-quote cards are the site's one light ground (#f5f5f5),
   so the grey that passes contrast on black fails there. */
.as-contact-3-content .as-recaptcha-note { color: #5f5f5f; }
/* On the light cards the ember hover fails contrast (3.3:1 on #f5f5f5);
   a darker ember keeps the accent legible (5.7:1). */
.as-contact-3-content .as-recaptcha-note a:hover,
.as-contact-3-content .as-recaptcha-note a:focus-visible { color: #b33000; }

/* Floating WhatsApp channel - only rendered when a real number is configured. */
.as-wa-float {
    position: fixed;
    right: 22px;
    bottom: 96px; /* sits above the back-to-top button */
    z-index: 90;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    background: #25d366;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.as-wa-float:hover,
.as-wa-float:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.35);
    color: #fff;
}

/* ==========================================================================
   FULL-WIDTH PREMIUM NAVBAR (Spider) — replaces the floating pill shell.
   Solid dark band edge to edge; no glass, no blur, no neon. The header keeps
   the .as-header-3-area class (avista-core docks it fixed at top via the
   bridge override) and the offcanvas/overlay/markup contracts are unchanged.
   ========================================================================== */
.as-header-3-band {
    background: #0b0b0d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.as-header-3-wrap {
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 24px;
    border-radius: 0;
}
.as-header-3-wrap::after {
    display: none;
}
/* Logo-03 ivory badge owns this slot (see LOGO-03 block) — the old
   background:none reset would strip it. */
.as-header-3-wrap > .as-header-3-action-link {
    margin-left: auto;
}

/* Mega menu toggles + panels. Panels hide at rest (no layout/pointer leak,
   same intent as the vendor-hide guard above) and open downward on hover AND
   :focus-within so keyboard users reach every link. */
/* Mega menu landing controls — one visible label per item, never two.
   No-JS: the fallback link shows (CSS :hover/:focus-within above still opens
   the panel; the link itself reaches the hub). With JS: the toggle button
   takes over as the panel's landing control in the tab order. */
.as-main-navigation:is(.as-header-3-menu) .navbar-nav > li > .as-mega__toggle {
    display: none;
}
.js .as-main-navigation:is(.as-header-3-menu) .navbar-nav > li > .as-mega__toggle {
    display: inline-flex;
}
.js .as-main-navigation:is(.as-header-3-menu) .navbar-nav > li > .as-mega__fallback {
    display: none;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav > li > .as-mega__toggle {
    align-items: center;
    background: none;
    border: 0;
    color: #fff;
    font: inherit;
    font-weight: 500;
    padding: 12px 18px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav > li > .as-mega__toggle:hover,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav li.as-mega.is-open > .as-mega__toggle,
.as-main-navigation:is(.as-header-3-menu) .navbar-nav > li > .as-mega__toggle:focus-visible {
    color: var(--as-clr-pr-1);
}
.as-main-navigation:is(.as-header-3-menu) .navbar-nav > li > .as-mega__toggle::after {
    display: none;
}
.as-main-navigation .navbar-nav li.as-mega {
    position: static;
}
.as-main-navigation .navbar-nav li.as-mega::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    display: none;
}
.as-main-navigation .navbar-nav li.as-mega:hover::after,
.as-main-navigation .navbar-nav li.as-mega:focus-within::after,
.as-main-navigation .navbar-nav li.as-mega.is-open::after {
    display: block;
}
.as-main-navigation .navbar-nav li.as-mega > .as-mega__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0;
    padding-top: 1px;
    background: #101013;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 5;
}
.as-main-navigation .navbar-nav li.as-mega:hover > .as-mega__panel,
.as-main-navigation .navbar-nav li.as-mega:focus-within > .as-mega__panel,
.as-main-navigation .navbar-nav li.as-mega.is-open > .as-mega__panel,
.js .as-main-navigation .navbar-nav li.as-mega:hover > .as-mega__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.as-mega__panel {
    padding: 34px clamp(24px, 4vw, 56px) 38px;
}
.as-mega__grid {
    display: grid;
    gap: 34px;
    max-width: 1200px;
    margin: 0 auto;
}
.as-mega__grid--services {
    grid-template-columns: 1.1fr 1.1fr 1.4fr;
}
.as-mega__grid--apparel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.as-mega__heading {
    font-family: var(--as-font-2, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a8a90;
    margin: 0 0 14px;
}
.as-mega__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.as-mega__col li + li {
    margin-top: 4px;
}
/* Vendor wins on specificity (.navbar-nav li a is inline-flex), so force
   our rows to stack. The name + spec must never sit side by side on one line
   — the screenshot "DST · PES" glued to "Embroidery Digitizing" is that bug. */
.as-main-navigation .navbar-nav li.as-mega .as-mega__col a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: #e7e7ea;
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.as-mega__col a:hover,
.as-mega__col a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.as-mega__col a span.spec {
    display: block;
    font-family: var(--as-font-2, monospace);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    padding-top: 2px;
}
.as-mega__note {
    color: #9a9aa0;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 12px;
    max-width: 34ch;
}
.as-mega__col--feature {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 30px;
}
.as-mega__col--feature .as-mega__note {
    color: #c9c9ce;
}
@media (max-width: 1299px) {
    .as-mega__grid--services {
        grid-template-columns: 1fr 1fr 1fr 1.2fr;
        gap: 24px;
    }
}
@media (max-width: 1199px) {
    .as-main-navigation .navbar-nav li.as-mega > .as-mega__panel {
        display: none;
    }
}

/* Announcement marquee — one duplicated group, CSS-driven, noninteractive.
   Default state (no JS): static, first copy visible. With JS: one seamless
   loop; reduced motion or the pause button stop it. */
.as-marquee {
    position: relative;
    background: #050505;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.as-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}
/* Reserve the pause button's corner so the copy never scrolls underneath the
   control (the track itself is untouched, so the -50% loop math still holds). */
.as-marquee__viewport { padding-right: 44px; }
/* Groups are content-sized, never viewport-sized. `min-width: 100%` made each
   group at least one screen wide, so a short announcement list left a wide
   empty gap at the seam of the -50% loop (the visible "blank" every 46s). */
.as-marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.as-marquee__item {
    display: inline-block;
    white-space: nowrap;
    color: #b8b8bd;
    font-family: var(--as-font-2, monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 9px 0;
}
.as-marquee__dot {
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(253, 63, 0, 0.8);
    margin: 0 22px;
}
.as-marquee__pause {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(10, 10, 12, 0.9);
    color: #e7e7ea;
    font-size: 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.as-marquee__pause:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}
.as-marquee__pause[aria-pressed="true"] {
    color: var(--as-clr-pr-1);
    border-color: rgba(253, 63, 0, 0.6);
}
.js .as-marquee__track {
    animation: as-marquee-scroll var(--as-marquee-duration, 46s) linear infinite;
}
.js .as-marquee[data-paused] .as-marquee__track {
    animation-play-state: paused;
}
.js .as-marquee__pause {
    display: inline-flex;
}
/* -50% is exactly one group only because both groups are content-identical
   and the track is display:flex with no padding on the parent. Padding lives
   on the items (9px 0) so the loop math stays exact. */
@keyframes as-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
html.reduced-motion .as-marquee__track {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .as-marquee__track { animation: none !important; }
}