/**
 * HVAC "End of Season Warehouse Sale" campaign page
 * (page-hvac-savings-event.php)
 *
 * Scoped entirely under .sw-hse so nothing leaks into the rest of the theme.
 *
 * Units are px on purpose: the theme sets a 13px root font-size via theme
 * options, so rem values here would silently scale down.
 *
 * Palette is the Service Wizard logo ramp (navy / sky / gold) — the same
 * tokens used by the Pride Giveaway page. The "warehouse" feel comes from
 * structure (stencil eyebrows, blueprint grid, perforated price tickets),
 * not from new colors.
 */

.sw-hse {
    /* Brand ramp — sampled from logo-servicewizard.svg */
    --hse-navy-deepest: #0b2142;
    --hse-navy: #232e66;
    --hse-navy-deep: #182148;
    --hse-blue-mid: #394b8a;
    --hse-periwinkle: #6f7fb8;
    --hse-sky: #42c3ff;
    --hse-sky-light: #7cd4ff;
    --hse-gold: #efba49;
    /* Hover/active shade. --hse-gold used to serve this role when the base was
       brighter; with one gold it needs its own darker step or the gold buttons
       have no visible hover. Navy on this clears 7.2:1. */
    --hse-gold-deep: #d9a63f;

    /* Text-safe variants. Sky and gold are display-only on light surfaces —
       neither clears 4.5:1 on white, so body copy never uses them. */
    --hse-sky-text: #0b6fa4;   /* 4.8:1 on #ffffff */
    --hse-gold-text: #8a5a00;  /* 5.9:1 on #ffffff */

    --hse-ink: #1b1f3b;
    --hse-body: #45496b;
    --hse-muted: #6b6f8c;
    --hse-bg: #ffffff;
    --hse-soft: #f5f7fb;
    --hse-border: #dfe3ee;
    --hse-on-dark: #dfe3f2;

    --hse-radius: 18px;
    --hse-radius-sm: 12px;
    --hse-shadow: 0 4px 12px rgba(11, 33, 66, .06), 0 12px 32px rgba(11, 33, 66, .08);
    --hse-shadow-lg: 0 8px 24px rgba(11, 33, 66, .10), 0 24px 60px rgba(11, 33, 66, .16);

    --hse-space: 72px;
    --hse-container: 1180px;
    --hse-ease: .22s ease;

    --hse-font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hse-font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-family: var(--hse-font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--hse-body);
    background: var(--hse-bg);
    overflow-x: clip;
}

.sw-hse *,
.sw-hse *::before,
.sw-hse *::after {
    box-sizing: border-box;
}

.sw-hse-container {
    width: 100%;
    max-width: var(--hse-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Anchor targets clear the theme's fixed header when jumped to */
.sw-hse [id] {
    scroll-margin-top: 110px;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.sw-hse .sw-hse-h1 {
    margin: 0;
    font-family: var(--hse-font-display);
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.06;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #ffffff;
    text-wrap: balance;
}

.sw-hse .sw-hse-h1__accent {
    color: var(--hse-gold);
}

.sw-hse .sw-hse-h2 {
    margin: 0;
    font-family: var(--hse-font-display);
    font-size: clamp(27px, 3.2vw, 40px);
    line-height: 1.14;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--hse-navy);
    text-wrap: balance;
}

.sw-hse .sw-hse-h3 {
    margin: 0 0 10px;
    font-family: var(--hse-font-display);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--hse-navy);
}

.sw-hse .sw-hse-h4 {
    margin: 0 0 8px;
    font-family: var(--hse-font-display);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--hse-navy);
}

/* Base paragraph rhythm. Wrapped in :where() so it carries zero specificity —
   otherwise `.sw-hse p` (0,1,1) outranks every component rule below (0,1,0)
   and quietly discards their `margin: … auto` centering. */
:where(.sw-hse) p {
    margin: 0 0 14px;
}

:where(.sw-hse p:last-child) {
    margin-bottom: 0;
}

.sw-hse-lead {
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.6;
    color: var(--hse-body);
    max-width: 68ch;
}

.sw-hse-lead--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Stencil-style section label */
.sw-hse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 7px 14px;
    border: 1px solid var(--hse-border);
    border-radius: 999px;
    background: var(--hse-soft);
    font-family: var(--hse-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hse-navy);
}

.sw-hse-eyebrow i {
    font-size: 13px;
    color: var(--hse-sky-text);
}

.sw-hse-eyebrow--light {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.sw-hse-eyebrow--light i {
    color: var(--hse-gold);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.sw-hse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--hse-font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--hse-ease), border-color var(--hse-ease),
                color var(--hse-ease), transform var(--hse-ease), box-shadow var(--hse-ease);
}

.sw-hse-btn--lg {
    min-height: 56px;
    padding: 16px 32px;
    font-size: 17px;
}

.sw-hse-btn i {
    font-size: 15px;
}

/* Gold — primary action. Navy text on gold clears 10:1. */
.sw-hse-btn--gold {
    background: var(--hse-gold);
    border-color: var(--hse-gold);
    color: var(--hse-navy-deepest);
    box-shadow: 0 6px 18px rgba(239, 186, 73, .32);
}

.sw-hse-btn--gold:hover,
.sw-hse-btn--gold:focus-visible {
    background: var(--hse-gold-deep);
    border-color: var(--hse-gold-deep);
    color: var(--hse-navy-deepest);
    transform: translateY(-2px);
}

/* Ghost — secondary action on dark surfaces */
.sw-hse-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #ffffff;
}

.sw-hse-btn--ghost:hover,
.sw-hse-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Navy — primary action on light surfaces */
.sw-hse-btn--navy {
    background: var(--hse-navy);
    border-color: var(--hse-navy);
    color: #ffffff;
}

.sw-hse-btn--navy:hover,
.sw-hse-btn--navy:focus-visible {
    background: var(--hse-navy-deepest);
    border-color: var(--hse-navy-deepest);
    color: #ffffff;
    transform: translateY(-2px);
}

.sw-hse-btn:focus-visible {
    outline: 3px solid var(--hse-sky);
    outline-offset: 3px;
}

.sw-hse-ctarow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.sw-hse-ctarow--center {
    justify-content: center;
}

/* ============================================================
   SECTION SHELLS
   ============================================================ */

.sw-hse-section {
    padding: var(--hse-space) 0;
}

.sw-hse-section--soft {
    background: var(--hse-soft);
}

.sw-hse-section--navy {
    background: var(--hse-navy);
    color: var(--hse-on-dark);
}

.sw-hse-head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.sw-hse-head .sw-hse-lead {
    margin: 16px auto 0;
}

.sw-hse-head--light .sw-hse-h2 {
    color: #ffffff;
}

.sw-hse-head--light .sw-hse-lead {
    color: var(--hse-on-dark);
}

/* ============================================================
   HERO — 50/50 split: full-height image left, content right
   ============================================================ */

.sw-hse-hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(66, 195, 255, .20), transparent 62%),
        linear-gradient(160deg, var(--hse-navy) 0%, var(--hse-navy-deep) 52%, var(--hse-navy-deepest) 100%);
    color: var(--hse-on-dark);
    overflow: hidden;
}

/* Hazard stripe across the top edge — warehouse cue, brand colors */
.sw-hse-hero__stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 6px;
    background: repeating-linear-gradient(
        -45deg,
        var(--hse-gold) 0 14px,
        var(--hse-navy-deepest) 14px 28px
    );
    pointer-events: none;
}

.sw-hse-hero__split {
    display: grid;
    grid-template-columns: 1fr;
}

.sw-hse-hero--split .sw-hse-hero__split {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

/* ---- Image panel (left) ---- */

.sw-hse-hero__media {
    position: relative;
    margin: 0;
    /* Fills the full height of whatever the content column measures */
    min-height: 100%;
    overflow: hidden;
    background: var(--hse-navy-deepest);
}

.sw-hse-hero__media .sw-hse-hero__img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Feathers the image into the hero gradient at the split line, and takes the
   edge off the upscaling the current 495px-wide source forces. */
.sw-hse-hero__wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 33, 66, .45) 0%, rgba(11, 33, 66, .10) 45%, rgba(24, 33, 72, .85) 100%);
    pointer-events: none;
}

/* ---- Content panel (right) ---- */

.sw-hse-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 52px 24px 60px 56px;
    /* Line the right edge up with the page container rather than the viewport */
    padding-right: max(24px, calc((100vw - var(--hse-container)) / 2));
}

/* Blueprint grid — reads as "warehouse floor", costs nothing to paint */
.sw-hse-hero__grid-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 78%);
    pointer-events: none;
}

.sw-hse-hero__inner {
    width: 100%;
    max-width: 620px;
}

/* Narrower measure than a full-width hero, so the display size steps down */
.sw-hse-hero--split .sw-hse-h1 {
    font-size: clamp(30px, 2.9vw, 42px);
}

.sw-hse-hero__lead {
    margin: 16px 0 0;
    max-width: 48ch;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.6;
    color: var(--hse-on-dark);
}

/* ---- Price tickets: stacked in the content column ---- */

.sw-hse-tickets {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    text-align: left;
}

.sw-hse-ticket {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 20px;
    padding: 15px 20px;
    border-radius: var(--hse-radius-sm);
    background: #ffffff;
    box-shadow: var(--hse-shadow-sm);
    /* Perforated left edge — the "tear here" coupon cue */
    border-left: 6px dashed var(--hse-border);
}

.sw-hse-ticket--gold {
    border-left-color: var(--hse-gold);
}

.sw-hse-ticket--sky {
    border-left-color: var(--hse-sky);
}

.sw-hse-ticket__kicker {
    grid-column: 2;
    margin: 0;
    font-family: var(--hse-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--hse-muted);
}

.sw-hse-ticket__value {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding-right: 20px;
    border-right: 1px solid var(--hse-border);
}

.sw-hse-ticket__num {
    font-family: var(--hse-font-display);
    font-size: clamp(34px, 3.1vw, 44px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--hse-navy);
}

.sw-hse-ticket__unit {
    font-family: var(--hse-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sw-hse-ticket--gold .sw-hse-ticket__unit {
    color: var(--hse-gold-text);
}

.sw-hse-ticket--sky .sw-hse-ticket__unit {
    color: var(--hse-sky-text);
}

.sw-hse-ticket__label {
    grid-column: 2;
    margin: 2px 0 0;
    font-family: var(--hse-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--hse-navy);
}

.sw-hse-ticket__fine {
    grid-column: 2;
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hse-body);
}

.sw-hse-tickets__or {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sw-hse-tickets__or::before,
.sw-hse-tickets__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .22);
}

.sw-hse-tickets__or span {
    font-family: var(--hse-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

/* ---- Hero meta row ---- */

.sw-hse-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    margin-top: 20px;
}

.sw-hse-deadline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hse-gold);
}

.sw-hse-deadline i {
    font-size: 14px;
}

.sw-hse-deadline--center {
    justify-content: center;
    margin-top: 24px;
    width: 100%;
}

.sw-hse-stars {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: var(--hse-on-dark);
}

.sw-hse-stars__icons {
    display: inline-flex;
    gap: 2px;
    color: var(--hse-gold);
    font-size: 13px;
}

.sw-hse-stars__text strong {
    color: #ffffff;
}

/* ============================================================
   COMPARE — photo + stacked reasons
   ============================================================ */

.sw-hse-compare__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.sw-hse-compare__media {
    position: relative;
    margin: 0;
    /* Stretches to whatever the two stacked cards measure */
    min-height: 100%;
    border-radius: var(--hse-radius);
    overflow: hidden;
    box-shadow: var(--hse-shadow-lg);
    background: var(--hse-navy-deepest);
}

.sw-hse-compare__media img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

/* Hazard stripe, in brand gold/navy — the disciplined version of the
   yellow-and-black motif on the existing warehouse-clearance creative. */
.sw-hse-compare__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: repeating-linear-gradient(
        -45deg,
        var(--hse-gold) 0 14px,
        var(--hse-navy) 14px 28px
    );
}

.sw-hse-compare__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    padding: 34px 24px 16px;
    background: linear-gradient(to top, rgba(11, 33, 66, .9), transparent);
    font-family: var(--hse-font-display);
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.sw-hse-compare__list {
    display: grid;
    gap: 22px;
    align-content: stretch;
}

.sw-hse-compare__item {
    padding: 26px 28px;
    border: 1px solid var(--hse-border);
    border-radius: var(--hse-radius);
    background: #ffffff;
    box-shadow: var(--hse-shadow);
}

.sw-hse-compare__item--feature {
    border-color: var(--hse-navy);
    box-shadow: var(--hse-shadow-lg);
}

.sw-hse-compare__item p:not(.sw-hse-compare__tag) {
    font-size: 16px;
    line-height: 1.6;
}

/* The full-width card below the split — its width is worth using, so the
   label sits in its own column beside the copy. */
.sw-hse-compare__item--wide {
    display: grid;
    grid-template-columns: minmax(220px, 330px) 1fr;
    column-gap: 44px;
    align-items: start;
    margin-top: 22px;
    padding: 28px 30px;
}

.sw-hse-compare__item--wide .sw-hse-compare__tag {
    grid-column: 1;
    grid-row: 1;
    /* Grid items stretch by default — keep the pill hugging its label */
    justify-self: start;
}

.sw-hse-compare__item--wide .sw-hse-h3 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

.sw-hse-compare__item--wide p:not(.sw-hse-compare__tag) {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: 72ch;
}

.sw-hse-compare__tag {
    grid-column: 1;
    grid-row: 1;
    /* Grid items stretch by default — keep the pill hugging its label */
    justify-self: start;
}

.sw-hse-compare__item .sw-hse-h3 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

.sw-hse-compare__item p:not(.sw-hse-compare__tag) {
    grid-column: 2;
    grid-row: 1 / 3;
}

.sw-hse-compare__item--feature {
    border-color: var(--hse-navy);
    box-shadow: var(--hse-shadow-lg);
}

.sw-hse-compare__item p:not(.sw-hse-compare__tag) {
    font-size: 16px;
    line-height: 1.6;
    max-width: 72ch;
}

.sw-hse-compare__tag {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--hse-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sw-hse-compare__tag--gold {
    background: #fff5d6;
    color: var(--hse-gold-text);
}

.sw-hse-compare__tag--sky {
    background: #e2f4ff;
    color: var(--hse-sky-text);
}

.sw-hse-compare__tag--navy {
    background: var(--hse-navy);
    color: #ffffff;
}

/* ============================================================
   MID-PAGE BANNER — full-bleed photo band with a CTA
   ============================================================ */

.sw-hse-banner {
    --hse-banner-pad: 64px;

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 460px;
    padding: var(--hse-banner-pad) 0;
    background: var(--hse-navy-deepest);
    overflow: hidden;
}

/* Hazard stripes top and bottom — bookends the band as a "sale" zone */
.sw-hse-banner::before,
.sw-hse-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 2;
    background: repeating-linear-gradient(
        -45deg,
        var(--hse-gold) 0 14px,
        var(--hse-navy-deepest) 14px 28px
    );
}

.sw-hse-banner::before { top: 0; }
.sw-hse-banner::after { bottom: 0; }

.sw-hse-banner__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.sw-hse-banner__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 38%;
}

/* Scrim keeps white text at >7:1 over a busy photo */
.sw-hse-banner__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        260deg,
        rgba(11, 33, 66, .95) 0%,
        rgba(11, 33, 66, .88) 42%,
        rgba(11, 33, 66, .58) 100%
    );
}

/* Image + copy share the page container, so this band lines up with the
   sections above instead of spanning the viewport. The photo and scrim stay
   full-bleed behind them. */
.sw-hse-banner__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 44px;
}

/* Condenser cutout — a transparent PNG product shot, so the banner has a real
   focal point instead of only the scrimmed photo behind it. Decorative: the
   copy carries the meaning, so it's aria-hidden with an empty alt.
   Pulled down by the section padding so its base meets the bottom hazard
   stripe (::after, z-index 2), which grounds it on the band. */
.sw-hse-banner__unit {
    align-self: end;
    width: auto;
    height: clamp(260px, 26vw, 380px);
    margin-bottom: calc(-1 * var(--hse-banner-pad));
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .45));
    pointer-events: none;
}

.sw-hse-banner__inner {
    max-width: 640px;
}

.sw-hse-banner .sw-hse-h2 {
    color: #ffffff;
}

.sw-hse-banner .sw-hse-lead {
    margin-top: 16px;
    color: var(--hse-on-dark);
}

/* ============================================================
   WHAT YOU GET — 4 cards
   ============================================================ */

.sw-hse-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sw-hse-card {
    padding: 26px 22px;
    border: 1px solid var(--hse-border);
    border-radius: var(--hse-radius);
    background: #ffffff;
    box-shadow: var(--hse-shadow);
}

.sw-hse-card__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--hse-navy);
    color: var(--hse-gold);
    font-size: 20px;
}

.sw-hse-card p {
    font-size: 16px;
    line-height: 1.6;
}

/* ============================================================
   HOW IT WORKS — numbered steps
   ============================================================ */

.sw-hse-steps__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.sw-hse-step {
    position: relative;
    padding: 30px 22px 26px;
    border-radius: var(--hse-radius);
    background: var(--hse-soft);
    border: 1px solid var(--hse-border);
}

.sw-hse-step__num {
    position: absolute;
    top: -18px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hse-navy);
    color: var(--hse-gold);
    font-family: var(--hse-font-display);
    font-size: 19px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(11, 33, 66, .18);
}

.sw-hse-step p {
    font-size: 16px;
    line-height: 1.6;
}

/* ============================================================
   WHY US — pillars on navy
   ============================================================ */

.sw-hse-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sw-hse-pillar {
    padding: 26px 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--hse-radius);
    background: rgba(255, 255, 255, .06);
    text-align: center;
}

.sw-hse-pillar > i {
    display: block;
    width: 100%;
    /* XStore's global icon rules reset alignment, so state it here */
    text-align: center;
    margin-bottom: 14px;
    font-size: 26px;
    color: var(--hse-gold);
}

.sw-hse-why .sw-hse-h4 {
    color: #ffffff;
}

.sw-hse-pillar p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--hse-on-dark);
}

.sw-hse-why__note {
    max-width: 680px;
    margin: 44px auto 0;
    padding: 22px 28px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--hse-radius);
    background: rgba(255, 255, 255, .06);
    text-align: center;
    text-wrap: balance;
    font-size: 16px;
    color: var(--hse-on-dark);
}

.sw-hse-why__note a {
    color: var(--hse-sky);
    font-weight: 600;
    text-decoration: underline;
}

.sw-hse-why__note a:hover,
.sw-hse-why__note a:focus-visible {
    color: var(--hse-sky-light);
}

/* ============================================================
   FINANCING PLAN CARD
   ============================================================ */

.sw-hse-plan {
    max-width: 700px;
    margin: 0 auto;
    padding: 32px;
    border: 2px solid var(--hse-navy);
    border-radius: var(--hse-radius);
    background: #ffffff;
    box-shadow: var(--hse-shadow-lg);
}

.sw-hse-plan__head {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hse-border);
}

.sw-hse-plan__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--hse-gold);
    color: var(--hse-navy-deepest);
    font-family: var(--hse-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sw-hse-plan__sub {
    margin: 6px 0 0;
    font-size: 16px;
    color: var(--hse-muted);
}

.sw-hse-plan__list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.sw-hse-plan__list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 16px;
    line-height: 1.55;
    color: var(--hse-body);
}

.sw-hse-plan__list i {
    margin-top: 5px;
    font-size: 13px;
    color: var(--hse-sky-text);
}

.sw-hse-plan__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--hse-border);
}

.sw-hse-plan__expires {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--hse-muted);
}

.sw-hse-financing__link {
    margin: 26px 0 0;
    text-align: center;
    font-size: 16px;
}

.sw-hse-financing__link a {
    color: var(--hse-navy);
    font-weight: 600;
    text-decoration: underline;
}

.sw-hse-financing__link a:hover,
.sw-hse-financing__link a:focus-visible {
    color: var(--hse-sky-text);
}

/* ============================================================
   FAQ — reuses the global .sw-faq accordion (JS in js/nav.js)
   ============================================================ */

.sw-hse-faqwrap {
    padding-bottom: 40px;
}

.sw-hse .sw-faq--campaign {
    padding: 0;
}

.sw-hse .sw-faq--campaign .sw-faq__heading {
    font-family: var(--hse-font-display);
    font-size: clamp(27px, 3.2vw, 40px);
    line-height: 1.14;
    letter-spacing: -.015em;
    font-weight: 700;
    margin-bottom: 36px;
}

.sw-hse .sw-faq__question span {
    font-family: var(--hse-font-body);
    font-size: 17px;
}

.sw-hse .sw-faq__question:focus-visible {
    outline: 3px solid var(--hse-sky);
    outline-offset: 2px;
}

.sw-hse .sw-faq__answer p {
    font-size: 16px;
    color: var(--hse-body);
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.sw-hse-finalcta {
    padding: var(--hse-space) 0;
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(66, 195, 255, .18), transparent 65%),
        linear-gradient(160deg, var(--hse-navy) 0%, var(--hse-navy-deepest) 100%);
    text-align: center;
}

.sw-hse-finalcta .sw-hse-h2 {
    color: #ffffff;
}

.sw-hse-finalcta .sw-hse-lead {
    margin-top: 16px;
    color: var(--hse-on-dark);
}

/* ============================================================
   DISCLAIMER
   ============================================================ */

.sw-hse-disclaimer {
    padding: 44px 0 56px;
    background: var(--hse-soft);
    border-top: 1px solid var(--hse-border);
}

.sw-hse-disclaimer .sw-hse-container {
    max-width: 900px;
}

.sw-hse-disclaimer__heading {
    margin: 0 0 16px;
    font-family: var(--hse-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hse-navy);
}

.sw-hse-disclaimer p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--hse-muted);
}

.sw-hse-disclaimer a {
    color: var(--hse-navy);
    text-decoration: underline;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .sw-hse {
        --hse-space: 56px;
    }

    /* Stack: image becomes a band above the content */
    .sw-hse-hero--split .sw-hse-hero__split {
        grid-template-columns: 1fr;
    }

    .sw-hse-hero__media {
        min-height: 0;
        height: clamp(220px, 34vw, 340px);
    }

    .sw-hse-hero__wash {
        background: linear-gradient(180deg, rgba(11, 33, 66, .35) 0%, rgba(24, 33, 72, .85) 100%);
    }

    .sw-hse-hero__content {
        padding: 44px 24px 56px;
    }

    .sw-hse-hero__inner {
        max-width: 720px;
        margin: 0 auto;
    }

    .sw-hse-hero__lead {
        max-width: 62ch;
    }

    .sw-hse-cards,
    .sw-hse-steps__list,
    .sw-hse-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .sw-hse-banner {
        min-height: 0;
    }

    /* Below this the copy column and the cutout start fighting for width */
    .sw-hse-banner__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sw-hse-banner__unit {
        display: none;
    }
}

@media (max-width: 860px) {
    .sw-hse-compare__item--wide {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .sw-hse-compare__item--wide .sw-hse-compare__tag,
    .sw-hse-compare__item--wide .sw-hse-h3,
    .sw-hse-compare__item--wide p:not(.sw-hse-compare__tag) {
        grid-column: 1;
        grid-row: auto;
    }

}

@media (max-width: 640px) {
    .sw-hse {
        --hse-space: 44px;
        font-size: 16px;
    }

    .sw-hse-container {
        padding: 0 18px;
    }

    .sw-hse-cards,
    .sw-hse-steps__list,
    .sw-hse-pillars {
        grid-template-columns: 1fr;
    }

    .sw-hse-steps__list {
        gap: 34px;
    }

    .sw-hse-ctarow .sw-hse-btn {
        width: 100%;
    }

    .sw-hse-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Stack the value block above the copy once the row gets tight */
    .sw-hse-ticket {
        grid-template-columns: 1fr;
        row-gap: 2px;
        padding: 18px 20px;
    }

    .sw-hse-ticket__value {
        grid-column: 1;
        grid-row: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 4px;
        padding-right: 0;
        border-right: 0;
    }

    .sw-hse-ticket__kicker,
    .sw-hse-ticket__label,
    .sw-hse-ticket__fine {
        grid-column: 1;
    }

    .sw-hse-plan {
        padding: 24px 20px;
    }

    .sw-hse-plan__foot {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .sw-hse-plan__expires {
        justify-content: center;
    }

    .sw-hse-plan__foot .sw-hse-btn {
        width: 100%;
    }

    .sw-hse-ticket {
        padding: 24px 20px;
    }

    .sw-hse-compare__item {
        padding: 22px 20px;
    }

    .sw-hse-banner {
        --hse-banner-pad: 48px;
    }

    .sw-hse-banner__media img {
        object-position: 62% 50%;
    }

    .sw-hse-banner__scrim {
        background: linear-gradient(
            180deg,
            rgba(11, 33, 66, .93) 0%,
            rgba(11, 33, 66, .90) 100%
        );
    }

    .sw-hse-why__note {
        padding: 20px 18px;
    }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .sw-hse *,
    .sw-hse *::before,
    .sw-hse *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .sw-hse-btn:hover,
    .sw-hse-btn:focus-visible {
        transform: none;
    }
}