/* ==========================================================
   Home page — "Who We Are" section
   ========================================================== */


/* ---------- Intro copy ---------- */
.about-copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: color-mix(in srgb, var(--white) 75%, transparent);
    line-height: 1.7;
}

.about-lead {
    font-size: 1.15rem;
    color: var(--white);
}

.about-pullquote {
    border-left: 2px solid var(--fg);
    padding: 0.35rem 0 0.35rem 1.25rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--fg);
}

/* ---------- Stats band ---------- */
.about-stats {
    border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}

    .about-stats .col {
        border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
    }

.about-stat {
    position: relative;
    height: 100%;
    padding: 2.25rem 1.25rem;
    border-left: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    transition: background 0.3s;
}

    .about-stat::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 1.25rem;
        width: 32px;
        height: 2px;
        background: var(--fg);
    }

    .about-stat:hover {
        background: color-mix(in srgb, var(--white) 3%, transparent);
    }

    .about-stat .label {
        color: color-mix(in srgb, var(--white) 60%, transparent);
        line-height: 1.6;
    }

@media (min-width: 992px) {
    .about-stat {
        padding: 2.75rem 2rem;
    }

        .about-stat::before {
            left: 2rem;
        }
}

/* ---------- Cards ---------- */
.about-card-title {
    font-size: 1.75rem;
    line-height: 1.1;
}

/* Specialty chips */
.specialty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.specialty-chip {
    padding: 0.5rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--white) 85%, transparent);
    transition: border-color 0.3s, color 0.3s;
}

    .specialty-chip:hover {
        border-color: var(--fg);
        color: var(--fg);
    }

/* Expandable panel: opens downward with a smooth height animation */
.collapse-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.45s;
}

    .collapse-panel.is-open {
        grid-template-rows: 1fr;
        visibility: visible;
        transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }

.collapse-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.see-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--fg);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg);
    cursor: pointer;
    transition: opacity 0.3s;
}

    .see-more-btn:hover {
        opacity: 0.8;
    }

    .see-more-btn:focus-visible {
        outline: 2px solid var(--fg);
        outline-offset: 4px;
    }

    .see-more-btn i {
        font-size: 0.7rem;
        transition: transform 0.3s;
    }

    .see-more-btn[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

/* Why-us list */
.why-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

    .why-list li {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        color: color-mix(in srgb, var(--white) 85%, transparent);
        line-height: 1.55;
    }

.why-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
    color: var(--fg);
    font-size: 0.9rem;
}

/* ==========================================================
   Home page — "The Apex Difference" cards
   ========================================================== */

.diff-card {
    position: relative;
    padding: 2rem 1.5rem;
    background: color-mix(in srgb, var(--white) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s, background 0.35s;
}
    /* gold line that draws across the top on hover */
    .diff-card::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        height: 2px;
        background: var(--fg);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .diff-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--fg) 45%, transparent);
        background: color-mix(in srgb, var(--white) 5%, transparent);
    }

        .diff-card:hover::before {
            transform: scaleX(1);
        }

    .diff-card .text-fg-dim {
        color: color-mix(in srgb, var(--white) 75%, transparent);
    }

.diff-num {
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

/* ==========================================================
   Home page — "The Apex Impact" (before / after)
   ========================================================== */

.impact-head {
    margin-top: 5rem;
    margin-bottom: 3rem;
    padding-top: 4rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}

.impact-title {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    line-height: 0.95;
}

/* ---------- Before / after comparison ----------
   Mobile: each challenge stacks above its solution.
   Desktop: two columns that read as a "Before" card and an "After" card,
   with every challenge lined up next to the approach that solves it.
   Effect (per row, on scroll): challenge slides in → connector draws →
   solution slides in, gold bar grows, check pops → challenge gets crossed out. */

.impact-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.impact-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.impact-label-gap {
    display: none;
}

.impact-badge {
    padding: 0.3rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.impact-label-before .impact-badge {
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
    color: color-mix(in srgb, var(--white) 70%, transparent);
}

.impact-label-after .impact-badge {
    background: var(--fg);
    color: var(--on-accent);
}

.impact-label-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
    color: color-mix(in srgb, var(--white) 85%, transparent);
}

.impact-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.impact-row {
    --step: 0ms;
    display: flex;
    flex-direction: column;
}

.impact-cell {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.impact-before {
    background: var(--bg-card);
    color: color-mix(in srgb, var(--white) 62%, transparent);
}

.impact-after {
    position: relative;
    background: var(--bg-darker);
    color: color-mix(in srgb, var(--white) 92%, transparent);
}

    .impact-after::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--fg);
        transform-origin: top;
    }

.impact-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
}

.impact-before .impact-mark {
    border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
    color: color-mix(in srgb, var(--white) 50%, transparent);
}

.impact-after .impact-mark {
    background: var(--fg);
    color: var(--on-accent);
}

/* Thin line that sweeps through the challenge text once it has been "solved" */
.impact-strike {
    background: linear-gradient( color-mix(in srgb, var(--white) 35%, transparent), color-mix(in srgb, var(--white) 35%, transparent) ) no-repeat 0 58% / 0% 1px;
}

.impact-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: var(--fg);
    font-size: 0.8rem;
}

.impact-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: color-mix(in srgb, var(--fg) 60%, transparent);
    transform-origin: top;
}

.impact-link i {
    position: relative;
    padding: 0.25rem;
    background: var(--bg-deep);
}

@media (min-width: 992px) {
    .impact-labels,
    .impact-row {
        display: grid;
        grid-template-columns: 1fr 80px 1fr;
    }

    .impact-labels {
        gap: 0;
        margin-bottom: 0;
    }

    .impact-label-gap {
        display: block;
    }

    .impact-label {
        padding: 1.75rem 2rem 1.5rem;
    }

    .impact-label-before {
        background: var(--bg-card);
    }

    .impact-label-after {
        position: relative;
        background: var(--bg-darker);
    }

        .impact-label-after::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 3px;
            background: var(--fg);
        }

    .impact-label-before .impact-label-title {
        color: color-mix(in srgb, var(--white) 70%, transparent);
    }

    .impact-label-after .impact-label-title {
        color: var(--fg);
    }

    .impact-rows {
        gap: 0;
    }

    .impact-row {
        --step: 120ms;
    }

    .impact-cell {
        padding: 1.4rem 2rem;
        border-top: 1px solid color-mix(in srgb, var(--white) 7%, transparent);
    }

    .impact-row:last-child .impact-cell {
        padding-bottom: 1.9rem;
    }

    .impact-link {
        height: auto;
    }

    .impact-line {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        transform-origin: left;
    }
}

/* ----- Animation: hidden start state ----- */
.impact-row .impact-before {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
    transition-delay: calc(var(--i, 0) * var(--step)), calc(var(--i, 0) * var(--step)), 0s;
}

.impact-row .impact-line {
    transform: scaleY(0);
    transition: transform 0.45s ease;
    transition-delay: calc(var(--i, 0) * var(--step) + 0.35s);
}

.impact-row .impact-link i {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s;
    transition-delay: calc(var(--i, 0) * var(--step) + 0.6s), 0s;
}

.impact-row .impact-after {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;
    transition-delay: calc(var(--i, 0) * var(--step) + 0.6s), calc(var(--i, 0) * var(--step) + 0.6s), 0s;
}

    .impact-row .impact-after::before {
        transform: scaleY(0);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(var(--i, 0) * var(--step) + 0.9s);
    }

    .impact-row .impact-after .impact-mark {
        opacity: 0;
        transform: scale(0.4);
        transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        transition-delay: calc(var(--i, 0) * var(--step) + 1s);
    }

.impact-row .impact-strike {
    transition: background-size 0.7s ease;
    transition-delay: calc(var(--i, 0) * var(--step) + 1.2s);
}

@media (min-width: 992px) {
    .impact-row .impact-line {
        transform: scaleX(0);
    }
}

/* ----- Animation: revealed state (class added by site.js on scroll) ----- */
.impact-row.in-view .impact-before,
.impact-row.in-view .impact-after {
    opacity: 1;
    transform: none;
}

.impact-row.in-view .impact-line {
    transform: none;
}

.impact-row.in-view .impact-link i {
    opacity: 1;
}

.impact-row.in-view .impact-after::before {
    transform: none;
}

.impact-row.in-view .impact-after .impact-mark {
    opacity: 1;
    transform: none;
}

.impact-row.in-view .impact-strike {
    background-size: 100% 1px;
}

/* Desktop hover: highlight the pair */
@media (hover: hover) and (min-width: 992px) {
    .impact-row.in-view:hover .impact-before {
        color: color-mix(in srgb, var(--white) 45%, transparent);
    }

    .impact-row.in-view:hover .impact-after {
        background-color: color-mix(in srgb, var(--bg-darker) 85%, var(--fg));
    }

    .impact-row.in-view:hover .impact-link i {
        transform: translateX(4px);
    }
}

/* ==========================================================
   Home page — "Our Complete Service Suite" section
   Mobile: swipeable rail with snap. Tablet: 2 columns. Desktop: 3 columns.
   ========================================================== */



/* Horizontal rail on every screen size: swipe / trackpad / arrow buttons */
.svc-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 340px);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* bleed to the screen edges on mobile, keep cards aligned with the page */
    margin-inline: -1.5rem;
    padding: 0.25rem 1.5rem 1.25rem;
    scroll-padding-inline: 1.5rem;
    scrollbar-width: none;
}

    .svc-grid::-webkit-scrollbar {
        display: none;
    }

    .svc-grid:focus-visible {
        outline: 2px solid var(--fg-on-light);
        outline-offset: 4px;
    }

    .svc-grid > * {
        scroll-snap-align: start;
    }

@media (min-width: 768px) {
    .svc-grid {
        /* two cards + a peek of the next one */
        grid-auto-columns: calc((100% - 1.5rem) / 2.25);
        gap: 1.5rem;
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }
}

@media (min-width: 992px) {
    .svc-grid {
        /* three cards + a peek of the next one */
        grid-auto-columns: calc((100% - 3rem) / 3.3);
    }
}

/* Arrow buttons + progress bar */
.rail-controls {
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--fg-dim) 25%, transparent);
    color: var(--fg-dim);
    transition: background 0.25s, border-color 0.25s, color 0.25s, opacity 0.25s;
}

    .rail-btn:hover:not(:disabled) {
        background: var(--bg-darker);
        border-color: var(--bg-darker);
        color: var(--fg);
    }

    .rail-btn:focus-visible {
        outline: 2px solid var(--fg-on-light);
        outline-offset: 2px;
    }

    .rail-btn:disabled {
        opacity: 0.3;
        cursor: default;
    }

.rail-track {
    position: relative;
    height: 2px;
    margin-top: 0.75rem;
    background: color-mix(in srgb, var(--fg-dim) 12%, transparent);
    overflow: hidden;
}

.rail-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: var(--fg-on-light);
    transition: transform 0.15s linear;
}

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color 0.3s, transform 0.3s;
}

    .svc-card:hover {
        border-color: var(--fg);
        transform: translateY(-4px);
    }

    .svc-card:focus-within {
        outline: 2px solid var(--fg);
        outline-offset: 3px;
    }

.svc-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

    .svc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s;
    }

.svc-card:hover .svc-img img {
    transform: scale(1.08);
    filter: grayscale(80%) contrast(1.4) brightness(0.7);
}

.svc-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-card), transparent 55%);
    pointer-events: none;
}

.svc-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 1.5rem 1.5rem;
}

.svc-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
    color: var(--fg);
}

.svc-title {
    margin: 1.1rem 0 0.75rem;
    font-size: 1.9rem;
    line-height: 1.05;
}

.svc-text {
    flex-grow: 1;
    color: color-mix(in srgb, var(--white) 78%, transparent);
    font-size: 0.9rem;
    line-height: 1.65;
}

.svc-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg);
}

    .svc-more:hover {
        color: var(--fg);
    }

    .svc-more:focus-visible {
        outline: none; /* the whole card shows the focus ring instead */
    }

    .svc-more i {
        font-size: 0.7rem;
        transition: transform 0.3s;
    }

.svc-card:hover .svc-more i {
    transform: translateX(4px);
}

.svc-swipe-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Growth path banner */
.growth-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 3rem;
    padding: 2rem 1.5rem;
    background: var(--bg-darker);
    border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
}

@media (min-width: 992px) {
    .growth-banner {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
        padding: 2.5rem 3rem;
    }
}

.growth-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--fg);
    color: var(--on-accent);
    font-size: 1.25rem;
}

.growth-banner .label {
    color: color-mix(in srgb, var(--white) 60%, transparent);
}

.growth-title {
    font-size: 2rem;
    line-height: 1;
}

.growth-text {
    max-width: 46rem;
    color: color-mix(in srgb, var(--white) 78%, transparent);
    line-height: 1.65;
}

.growth-btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ==========================================================
   Home page — Pricing flip cards
   Front: plan + price. Back: what's included + button.
   Mouse: flips on hover. Touch: flips on tap (site.js).
   Keyboard: flips when the card or its button has focus.
   ========================================================== */

.flip-card {
    height: 540px;
    perspective: 1800px;
    outline: none;
}

    .flip-card:focus-visible {
        outline: 2px solid var(--fg);
        outline-offset: 4px;
    }

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.4, 0.2, 0.2, 1);
}

@media (hover: hover) {
    .flip-card:hover .flip-inner {
        transform: rotateY(180deg);
    }
}

.flip-card.is-flipped .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card:has(a:focus-visible) .flip-inner {
    transform: rotateY(180deg);
}

.flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}

.flip-front {
    background: color-mix(in srgb, var(--bg-darker) 80%, var(--white));
}

.flip-back {
    transform: rotateY(180deg);
    background: var(--bg-deep);
    border-color: color-mix(in srgb, var(--fg) 45%, transparent);
}

    .flip-back::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--fg);
    }

.flip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.flip-badge {
    padding: 0.3rem 0.6rem;
    background: color-mix(in srgb, var(--black) 45%, transparent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg);
}

.flip-price {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.flip-price-value {
    font-size: clamp(4rem, 7vw, 5.5rem);
    line-height: 0.9;
    color: var(--accent);
}

.flip-price-note {
    margin-top: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--white) 65%, transparent);
}

.flip-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}

.flip-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--white) 55%, transparent);
}

.flip-hint-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg);
}

.hint-tap {
    display: none;
}

@media (hover: none) {
    .hint-hover {
        display: none;
    }

    .hint-tap {
        display: inline;
    }
}

.flip-back-label {
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg);
}

.flip-back .plan-features {
    margin-bottom: 1.5rem;
}

.flip-back-price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}

    .flip-back-price .font-display {
        font-size: 2.25rem;
        line-height: 1;
        color: var(--accent);
    }

    .flip-back-price span:last-child {
        font-family: var(--font-heading);
        font-size: 0.75rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--white) 60%, transparent);
    }

@media (max-width: 575.98px) {
    .flip-card {
        height: 500px;
    }

    .flip-face {
        padding: 1.6rem;
    }
}

/* ==========================================================
   Home page — "How We Work" step cards
   Title by default. Desktop: hover swaps it for the description.
   Touch / keyboard: the "i" button does the same.
   ========================================================== */

.step-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
}

.step-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step-info {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--fg) 50%, transparent);
    border-radius: 50%;
    color: var(--fg);
    font-size: 0.8rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

    .step-info:focus-visible {
        outline: 2px solid var(--fg);
        outline-offset: 3px;
    }

    .step-info .icon-close {
        display: none;
    }

.step-card-body {
    position: relative;
    display: grid;
    flex-grow: 1;
    align-items: end;
    margin-top: 0.85rem;
}

.step-card-title,
.step-card-desc {
    grid-area: 1 / 1;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.step-card-title {
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    line-height: 1;
}

.step-card-desc {
    align-self: end;
    font-size: 0.88rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--white) 85%, transparent);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.step-card-desc-title {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg);
}

/* open state: hover (mouse) or .is-open (button) */
.step-card.is-open .step-card-title {
    opacity: 0;
    transform: translateY(-12px);
}

.step-card.is-open .step-card-desc {
    opacity: 1;
    transform: none;
}

.step-card.is-open .step-info {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--on-accent);
}

    .step-card.is-open .step-info .icon-open {
        display: none;
    }

    .step-card.is-open .step-info .icon-close {
        display: inline;
    }

@media (hover: hover) {
    .step-card:hover .step-card-title {
        opacity: 0;
        transform: translateY(-12px);
    }

    .step-card:hover .step-card-desc {
        opacity: 1;
        transform: none;
    }

    .step-card:hover .step-info {
        background: var(--fg);
        border-color: var(--fg);
        color: var(--on-accent);
    }
}

/* ==========================================================
   Home page — "How We Compare" table
   Desktop: real table with the Apex column raised in navy.
   Mobile: every criterion becomes its own card, Apex answer first.
   Effect: each row fades in as it scrolls into view; the Apex
   check pops in a beat later; the column's gold cap draws in.
   ========================================================== */

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .compare-table th,
    .compare-table td {
        padding: 1.25rem 1.5rem;
        vertical-align: middle;
    }

    .compare-table thead th {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid color-mix(in srgb, var(--fg-dim) 15%, transparent);
        font-family: var(--font-heading);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-align: center;
        color: var(--muted);
    }

    .compare-table tbody th {
        width: 34%;
        font-family: var(--font-heading);
        font-size: 1rem;
        font-weight: 500;
        text-align: left;
        color: var(--fg-dim);
    }

    .compare-table tbody td {
        text-align: center;
        font-size: 0.92rem;
        color: #6b6f78;
    }

    .compare-table tbody tr > * {
        border-bottom: 1px solid color-mix(in srgb, var(--fg-dim) 10%, transparent);
        transition: background-color 0.25s;
    }

    .compare-table tbody tr:hover > *:not(.is-apex) {
        background: color-mix(in srgb, var(--accent) 60%, transparent);
    }

    /* Apex column */
    .compare-table .is-apex {
        position: relative;
        background: var(--bg-darker);
        color: var(--white);
        box-shadow: inset 1px 0 0 color-mix(in srgb, var(--fg) 40%, transparent), inset -1px 0 0 color-mix(in srgb, var(--fg) 40%, transparent);
    }

    .compare-table tbody .is-apex {
        border-bottom-color: color-mix(in srgb, var(--white) 8%, transparent);
    }

    .compare-table tbody tr:last-child .is-apex {
        box-shadow: inset 1px 0 0 color-mix(in srgb, var(--fg) 40%, transparent), inset -1px 0 0 color-mix(in srgb, var(--fg) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fg) 40%, transparent);
    }

    .compare-table tbody tr:hover .is-apex {
        background: color-mix(in srgb, var(--bg-darker) 88%, var(--fg));
    }

    .compare-table thead .is-apex {
        padding-top: 1.75rem;
    }

        .compare-table thead .is-apex::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--fg);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
        }

    .compare-table thead tr.in-view .is-apex::before {
        transform: none;
    }

.compare-apex-name {
    font-family: var(--font-display);
    font-size: 1.85rem;
    letter-spacing: 0.06em;
    color: var(--fg);
}

.compare-val-apex {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    color: var(--white);
}

.compare-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fg);
    color: var(--on-accent);
    font-size: 0.65rem;
}

/* Row reveal */
.compare-table tbody tr .compare-val {
    display: inline-flex;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.compare-table tbody tr .is-apex .compare-val {
    transition-delay: 0.15s;
}

.compare-table tbody tr .compare-check {
    transform: scale(0.4);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}

.compare-table tbody tr.in-view .compare-val {
    opacity: 1;
    transform: none;
}

.compare-table tbody tr.in-view .compare-check {
    transform: none;
}

@media (min-width: 768px) {
    .compare {
        background: var(--white);
        border: 1px solid color-mix(in srgb, var(--fg-dim) 10%, transparent);
        box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--fg-dim) 60%, transparent);
    }
}

/* Mobile: one card per criterion */
@media (max-width: 767.98px) {
    .compare-table,
    .compare-table tbody,
    .compare-table tr,
    .compare-table th,
    .compare-table td {
        display: block;
        width: 100%;
    }

        .compare-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
        }

        .compare-table tbody tr {
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
            background: var(--white);
            border: 1px solid color-mix(in srgb, var(--fg-dim) 12%, transparent);
        }

        .compare-table tbody th {
            order: -2;
            width: auto;
            padding: 1.1rem 1.25rem;
            font-size: 1.05rem;
        }

        .compare-table tbody td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.85rem 1.25rem;
            text-align: right;
        }

            .compare-table tbody td::before {
                content: attr(data-label);
                font-family: var(--font-mono);
                font-size: 10px;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                text-align: left;
                color: var(--muted);
            }

            .compare-table tbody td.is-apex {
                order: -1;
            }

                .compare-table tbody td.is-apex::before {
                    color: var(--fg);
                }

        .compare-table .is-apex,
        .compare-table tbody tr:last-child .is-apex {
            box-shadow: none;
        }

        .compare-table tbody tr > *:last-child {
            border-bottom: 0;
        }
}

/* ==========================================================
   Home page — final CTA
   ========================================================== */

.cta-glow {
    overflow: hidden;
}

    .cta-glow::before {
        content: "";
        position: absolute;
        inset: -20% 10%;
        background: radial-gradient( ellipse at center, color-mix(in srgb, var(--fg) 18%, transparent), transparent 60% );
        pointer-events: none;
        animation: cta-breathe 8s ease-in-out infinite;
    }

    .cta-glow > .wrap {
        position: relative;
    }

@keyframes cta-breathe {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* "What happens next" steps under the final CTA */
.cta-steps-wrap {
    margin-top: 4.5rem;
    padding-top: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}

.cta-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

@media (min-width: 768px) {
    .cta-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .cta-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cta-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--white) 85%, transparent);
}

/* ==========================================================
   Home page — sticky consultation bar
   ========================================================== */

.sticky-cta-btn {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sticky-cta-inner {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Phones: just one slim, full-width button */
@media (max-width: 575.98px) {
    .sticky-cta .wrap {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }

    .sticky-cta-btn {
        flex-grow: 1;
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
        letter-spacing: 0.12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flip-inner,
    .step-card-title,
    .step-card-desc,
    .svc-img img,
    .rail-thumb {
        transition: none;
    }

    .diff-card,
    .diff-card::before {
        transition: none;
    }

        .diff-card:hover {
            transform: none;
        }

    .compare-table tbody tr .compare-val,
    .compare-table tbody tr .compare-check,
    .compare-table thead .is-apex::before {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cta-glow::before {
        animation: none;
    }

    .impact-row .impact-before,
    .impact-row .impact-after,
    .impact-row .impact-line,
    .impact-row .impact-link i,
    .impact-row .impact-after::before,
    .impact-row .impact-after .impact-mark {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .impact-row .impact-strike {
        background-size: 100% 1px;
        transition: none;
    }

    .collapse-panel,
    .collapse-panel.is-open,
    .see-more-btn i,
    .svc-card,
    .svc-img img,
    .svc-more i {
        transition: none;
    }

        .svc-card:hover {
            transform: none;
        }
}