/* ==========================================================================
   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).
   -------------------------------------------------------------------------- */
.as-header-3-area,
.as-header-3-area.has-sticky {
    top: 14px; /* float the pill just below the viewport edge */
    bottom: auto !important;
}
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; }

/* Brand lockup inside the white logo pill - stretched for the full
   official lockup (icon + wordmark), charcoal art on the white ground. */
.as-header-3-logo.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 68px;
    border-radius: 999px;
    line-height: 1;
    text-decoration: none;
    flex: 0 0 auto;
}
.as-header-3-logo.brand .brand__lockup {
    display: block;
    width: 118px;
    height: auto;
}
.as-header-3-area.has-sticky .as-header-3-logo.brand {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1199px) {
    .as-header-3-logo.brand { width: 122px; height: 54px; }
    .as-header-3-logo.brand .brand__lockup { width: 92px; }
}
@media (max-width: 575px) {
    /* Phone band: the pill must not price the action cluster off-screen.
       At 122px wide the wrap measured 34px past a 375px viewport and the
       offcanvas toggle was clipped entirely at 320px. The pill shrinks
       first; the two text links give up their 30px track gap (they sit in
       the offcanvas too) if a 320px screen still needs the room. */
    .as-header-3-logo.brand { width: 100px; height: 46px; }
    .as-header-3-logo.brand .brand__lockup { width: 76px; }
    .as-header-3-action-link { gap: 14px; }
}
@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);
}
@media (max-width: 1399px) {
    .as-header-3-action-link .site-header__cart,
    .as-header-3-action-link .site-header__account { font-size: 13px; }
}

/* 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;
   the white-art lockup and the repurposed link blocks are ours. */
.wa-offcanvas-top-logo.brand {
    display: inline-flex;
    text-decoration: none;
    line-height: 1;
}
.wa-offcanvas-top-logo.brand .brand__lockup {
    display: block;
    width: 132px;
    height: auto;
}
.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: #898989;
    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:#8c8a8a}
.bench-caption dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.bench-caption dt{color:#8c8a8a;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 li { color: #b3b3b3; 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; }
}

/* Brand assets — the official Spider Digitizing art.
   Icon PNGs are square (1:1), lockup PNGs 2.864:1 (716x250 files); the
   -dark suffix means light art FOR a dark ground, -light the reverse.
   Pick by the surrounding ground, never by the file's own name alone. */
/* Official art only: no brand__mark (icon) usages remain in the nav -
   the lockup replaces the whole stack. Kept here so a future icon use
   finds the sizing convention next to the lockup rules. */
.brand .brand__lockup {
    display: block;
    height: auto;
}

/* Keyboard focus ring for the logo links. The pill keeps its own radius
   on focus - the old 50% rule was for the circular chip and morphed the
   156x68 pill into an ellipse on every tab-through. */
.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; }

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

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