/* =============================================================
   responsive.css — breakpoints
   1200 · 1080 · 900 · 720 · 560 · 420
   ============================================================= */

/* ---- Large tablet / small desktop ---- */
@media (max-width: 1200px) {

    /* Home's stat grid narrows; the Why We Exist variant is a single
       column at every width, so it is scoped out — see
       .nx-challenge--seq in style.css. */
    .nx-challenge:not(.nx-challenge--seq) .nx-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .nx-stats .nx-stat:nth-child(4),
    .nx-stats .nx-stat:nth-child(5) {
        grid-column: span 1;
    }

    .nx-flips--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .nx-hero__card--1 {
        left: 0;
    }

    .nx-hero__card--2 {
        right: 0;
    }

    /* Six across is a single-desktop-width layout; narrower than this a
       card would be too tight for its title to read comfortably, so it
       steps down to three. The odd/even stagger in style.css only reads
       correctly with a single row — once six cards wrap to two rows of
       three, "odd" and "even" no longer track the same column between
       row 1 and row 2 (three is an odd number of columns), so it is
       turned off here rather than carried forward misaligned. Nothing
       below this point needs to touch it again: every narrower step is
       already flat. */
    .nx-areacards {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1.3rem;
    }

    .nx-areacards .nx-areacard {
        margin-top: 0;
    }
}

@media (max-width: 1080px) {

    .nx-checks,
    .nx-vals,
    .nx-points,
    .nx-tech,
    .nx-flips,
    .nx-reachgrid,
    .nx-areacards,
    .nx-checkgrid,
    .nx-vidrail,
    .nx-contactcards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* The hairline border trick works at any column count on its own —
       .nx-flow4__line is a plain block below the grid now too, so neither
       needs hiding here the way the old absolutely-positioned line and
       per-gap arrows did. */
    .nx-flow4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .nx-newsgrid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .nx-hero__chips {
        gap: 1.4rem;
    }

    .nx-hero__chip-num {
        font-size: 1.5rem;
    }
}

/* ---- AOS: no sideways reveals once the layout is single-column ----
   AOS parks fade-left/right at translate3d(±100px, 0, 0) until the element
   scrolls into view. Once blocks span the full column that pre-animation
   offset sticks 100px past the right edge and the whole page scrolls
   sideways. Below the tablet breakpoint these reveal upward instead.
   Same specificity as AOS's own rules (0,1,0) — this sheet loads later,
   and AOS's .aos-animate end state (0,2,1) still wins. */
@media (max-width: 900px) {

    [data-aos="fade-left"],
    [data-aos="fade-right"],
    [data-aos="fade-up-left"],
    [data-aos="fade-up-right"],
    [data-aos="fade-down-left"],
    [data-aos="fade-down-right"],
    [data-aos="slide-left"],
    [data-aos="slide-right"] {
        transform: translate3d(0, 40px, 0);
    }

    [data-aos="zoom-in-left"],
    [data-aos="zoom-in-right"] {
        transform: translate3d(0, 40px, 0) scale(.6);
    }

    [data-aos="zoom-out-left"],
    [data-aos="zoom-out-right"] {
        transform: translate3d(0, 40px, 0) scale(1.2);
    }
}

/* ---- Tablet: collapse nav, stack heroes ---- */
@media (max-width: 900px) {

    .nx-nav__menu,
    .nx-nav__actions .nx-btn {
        display: none;
    }

    .nx-burger {
        display: flex;
    }

    /* iOS ignores background-attachment: fixed — fall back to a normal
       scrolling backdrop rather than a mis-scaled one. Dropped from
       tablet down, since iPad-width Safari has the same gap. The collage
       carries its backdrop on a child layer, handled further down. */
    .nx-challenge--seq {
        background-attachment: scroll;
    }

    .nx-hero {
        min-height: auto;
        padding: 7.5rem 0 4rem;
        text-align: center;
    }

    .nx-hero__inner {
        grid-template-columns: 1fr;
    }

    .nx-hero__copy {
        order: 2;
    }

    .nx-hero__visual {
        order: 1;
        max-width: 360px;
        margin: 0 auto 1rem;
    }

    .nx-hero__actions,
    .nx-hero__chips {
        justify-content: center;
    }

    .nx-hero__text {
        margin-inline: auto;
    }

    .nx-hero__scroll {
        display: none;
    }

    .nx-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .nx-split--reverse .nx-split__media {
        order: 1;
    }

    .nx-split--reverse .nx-split__copy {
        order: 2;
    }

    .nx-split__copy {
        text-align: center;
    }

    .nx-founders,
    .nx-strands,
    .nx-contactinfo {
        grid-template-columns: 1fr;
    }

    .nx-founders--plain .nx-founder {
        max-width: none;
    }

    .nx-founders--plain .nx-founder__portrait {
        float: none;
        margin: 0 0 1rem;
    }

    .nx-portfolio__grid {
        grid-template-columns: 1fr;
    }

    .nx-reachgrid {
        grid-template-columns: 1fr;
    }

    .nx-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .nx-steps__line {
        display: none;
    }

    .nx-areas {
        grid-template-columns: 1fr;
    }

    /* Side-by-side runs out of room for both a comfortable image and a
       full paragraph well before the site's general 900px tablet
       breakpoint, so this steps down early. Every row goes to a single
       stacked column, image on top, and the alternating row-reverse is
       cancelled — with only one column left, "reversed" and "normal"
       look identical except for source order, so there is nothing left
       for it to usefully do. */
    .nx-ptrow,
    .nx-ptrow:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
        gap: 1.3rem;
    }

    .nx-ptrow__img {
        flex-basis: auto;
        width: 100%;
    }

    /* Same reasoning as .nx-ptrow just above: a fixed ~30% meta column
       has no room left for a title once the card itself is this narrow,
       so meta moves above the video instead of squeezing beside it. */
    .nx-vidfeature {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .nx-vidfeature__cat {
        text-align: center;
    }

    .nx-footer__main {
        grid-template-columns: 1fr;
    }

    .nx-footer__cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .nx-footer__col--contact {
        grid-column: 1 / -1;
    }

    .nx-split__copy.nx-split__copy {
        text-align: center;
    }

    .nx-founder {
        text-align: left;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .nx-founder__body h3 {
        text-align: center;
    }
}

/* ---- Large phone ---- */
@media (max-width: 720px) {
    :root {
        --section-y: clamp(3rem, 12vw, 4.5rem);
    }



    .nx-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .nx-footer__col {
        min-width: 0;
    }

    .nx-footer__col h5 {
        margin-bottom: .75rem;
    }

    .nx-footer__col ul {
        gap: .45rem;
    }

    .nx-footer__col a,
    .nx-footer__col span {
        overflow-wrap: anywhere;
    }

    .nx-glance__panel {
        background-image: url('../images/sections/nuvox-at-a-glance-mobile.webp') !important;
        background-position: 35% center;
        background-size: cover;
    }

    .nx-glance__facts {
        width: min(58%, 18rem);
        margin-right: auto;
        gap: .75rem;
    }

    .nx-glance__fact {
        padding: .85rem 1rem;
        border-radius: .85rem;
        font-size: 1rem;
        line-height: 1.25;
    }

    .nx-glance__fact strong {
        font-size: 1.12em;
    }

    .nx-wellness-products__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .nx-wellness-products__family,
    .nx-wellness-products__showcase {
        width: min(100%, 28rem);
        margin-inline: auto;
    }

    .nx-quality-commitment__orbit {
        display: none;
    }

    .nx-quality-commitment__mobile {
        display: block;
        margin-inline: -1.2rem;
    }

    .nx-quality-commitment__mobile-video {
        height: 23rem;
        overflow: hidden;
        background: var(--ink);
    }

    .nx-quality-commitment__mobile-video video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .nx-quality-commitment__accordion {
        position: relative;
        z-index: 1;
        width: calc(100% - 2.4rem);
        margin: -1.8rem auto 0;
        padding: 1.5rem 1.25rem .5rem;
        overflow: hidden;
        background: #fff;
        border-radius: 1.25rem;
        box-shadow: 0 14px 35px rgba(9, 20, 36, .14);
    }

    .nx-quality-commitment__accordion h3 {
        margin: 0 0 1rem;
        color: var(--accent);
        line-height: 1.25;
    }

    .nx-quality-commitment__accordion-item {
        border-bottom: 1px solid var(--line);
    }

    .nx-quality-commitment__accordion-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 0;
        color: var(--ink);
        font-size: .92rem;
        font-weight: 700;
        line-height: 1.3;
        cursor: pointer;
        list-style: none;
    }

    .nx-quality-commitment__accordion-item summary::-webkit-details-marker {
        display: none;
    }

    .nx-quality-commitment__accordion-item summary i {
        flex: 0 0 auto;
        color: var(--accent);
        transition: transform .25s ease;
    }

    .nx-quality-commitment__accordion-item[open] summary i {
        transform: rotate(180deg);
    }

    .nx-quality-commitment__accordion-item p {
        margin: -.25rem 0 1rem;
        color: var(--ink-2);
        line-height: 1.55;
    }

    .nx-evidence-rule {
        min-height: 30rem;
    }

    .nx-evidence-rule__copy {
        max-width: 100%;
        text-align: center;
    }

    .nx-evidence-rule__copy h2,
    .nx-evidence-rule__copy p {
        margin-inline: auto;
    }

    .nx-stats,
    .nx-checks,
    .nx-vals,
    .nx-points,
    .nx-tech,
    .nx-flips,
    .nx-flips--4,
    .nx-areacards,
    .nx-checkgrid {
        grid-template-columns: 1fr;
    }

    .nx-stats .nx-stat {
        grid-column: span 1 !important;
    }

    /* The 1200px breakpoint's .nx-challenge:not(.nx-challenge--seq) .nx-stats
       rule (3 classes) is more specific than the plain .nx-stats above (1
       class) and its condition still holds at phone widths too, so without
       this it silently wins back to 3 columns here. Repeating the same
       selector is what it takes to beat it on specificity. */
    .nx-challenge:not(.nx-challenge--seq) .nx-stats {
        grid-template-columns: 1fr;
    }

    /* Why We Exist's cards on phone: a plain one-per-row stack, matching
       the home page's mobile treatment, instead of the desktop's
       one-card-per-screen sticky slider. The sticky-centred slot (top:50vh
       + translateY(-50%)) is what was causing the oversized, inconsistent
       gaps between cards on a phone — it positions each card off the
       viewport's centre regardless of its neighbours, which only reads
       right when a full-height row is doing the pacing. Turning it off and
       letting the grid flow normally fixes both problems at once. */
    .nx-challenge--seq .nx-stats {
        grid-auto-rows: auto;
        gap: 1.2rem;
        margin-top: 2.5rem;
    }

    .nx-challenge--seq .nx-stats .nx-stat__slot {
        position: static;
        transform: none;
        width: 100%;
    }

    .nx-challenge--seq.is-reveal .nx-stats .nx-stat {
        transform: none;
    }

    .nx-flow4 {
        grid-template-columns: 1fr;
    }

    .nx-vidrail {
        grid-template-columns: 1fr;
    }

    .nx-contactcards {
        grid-template-columns: 1fr;
    }

    .nx-brandsec__head,
    .nx-head {
        text-align: center;
    }

    .nx-refsplit__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* ---- Health needs: lilly.com "condition support" carousel ----
       One tall portrait card centred with its neighbours peeking at the
       screen edges, name and link centred over the photo, slide counter
       underneath. Swiper stays live on mobile (see libraries.js). */
    .nx-condslider__swiper {
        /* Full-bleed out of the container gutter so the peeking cards are
           clipped by the screen edge, the way the reference does it. */
        overflow: hidden;
        margin-inline: -1.2rem;
        padding: .5rem 1.2rem 1rem;
    }

    .nx-cond {
        width: min(82vw, 360px);
        max-width: none;
        height: min(85vw, 330px);
        aspect-ratio: auto;
        z-index: 0;
        transition: height .45s ease;
    }

    .nx-cond.swiper-slide-active {
        height: auto;
        aspect-ratio: 3 / 4;
        z-index: 1;
    }

    .nx-cond .nx-cond__link {
        transform: none;
    }

    .nx-cond.swiper-slide-active .nx-cond__link {
        transform: none;
    }

    /* Text sits mid-card, so the photo needs an even wash rather than the
       bottom-weighted gradient used on desktop. */
    .nx-cond__scrim {
        background: linear-gradient(180deg, rgba(11, 34, 68, .40) 0%, rgba(11, 34, 68, .60) 55%, rgba(11, 34, 68, .74) 100%);
    }

    .nx-cond__body {
        inset: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: .8rem;
        padding: 1.6rem;
        text-align: center;
    }

    .nx-cond__title {
        font-size: clamp(1.5rem, 6.5vw, 1.9rem);
    }

    .nx-condslider__nav {
        margin-top: 1.2rem;
    }

    .nx-portfolio__cards {
        grid-template-columns: 1fr;
    }

    .nx-quality,
    .nx-quality-verified {
        display: none;
    }

    .nx-qualitytabs__card {
        grid-template-columns: 1fr;
    }

    .nx-qualitytabs__nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 1.6rem;
        gap: 1rem;
    }

    .nx-qualitytabs__panels {
        padding: 2rem 1.6rem;
    }

    .nx-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nx-trust,
    .nx-careers,
    .nx-footer__cta-inner,
    .nx-footer__bar-inner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .nx-trust__body {
        flex-direction: column;
        text-align: center;
    }

    .nx-brandsplit {
        flex-direction: column;
        align-items: center;
    }

    .nx-brandsplit__divider {
        transform: rotate(90deg);
    }

    .nx-subhero {
        padding: 9rem 0 3.5rem;
    }

    .nx-hero__card {
        display: none;
    }

    .nx-hero--video {
        min-height: 70svh;
        padding-block: 7.5rem 4rem;
    }

    .nx-hero--video .nx-hero__video {
        object-position: left center;
    }

    .nx-hero--video .nx-hero__copy {
        max-width: 100%;
    }

    .nx-hero--video .nx-hero__title-navy,
    .nx-hero--video .nx-hero__title-red {
        display: block;
        white-space: nowrap;
    }

    /* "The Scale of Unmet Health Needs": the figure sits on the right of
       why-banner.webp, so a centred cover crop cuts it in half on a narrow
       column. Anchor the photo right on phones, and wash it back with a
       light white veil so the dark body copy stays readable over it. */
    .nx-why .nx-section__bg {
        background-position: right;
    }

    .nx-why .nx-section__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, .40);
    }

    /* "Expanding Access to Better Health.": same story — the globe sits on
       the right of our-reach.webp, so a centred crop on a phone shows only
       empty gradient. Anchor it right and veil it to match .nx-why. */
    .nx-reach .nx-section__bg img {
        object-position: right center;
    }

    .nx-reach .nx-section__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, .40);
    }

    /* The half-width copy column is a desktop measure meant to keep text
       clear of the globe; the veil does that job now, so let it run full
       width instead of wrapping every three words. */
    .nx-reach__head {
        max-width: none;
    }

    /* "Hope. Health. Happiness.": the couple is on the right of
       promise.webp. This one paints its photo directly on the section
       rather than through an .nx-section__bg child, so the veil goes on a
       ::before and the container is lifted above it. The 100vh floor also
       has to go — on a tall phone box, cover zooms so far in that even a
       right anchor only shows a sliver of trees. */
    .nx-promise {
        min-height: 0;
        background-position: right center;
    }

    .nx-promise::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, .40);
    }

    .nx-promise>.nx-container {
        position: relative;
        z-index: 1;
    }

    .nx-promise__copy {
        max-width: none;
    }

    /* "Uniting Evidence with Hope": the doctor and sphere sit on the right
       of about-banner.webp — same treatment again, anchored right under a
       white veil. The veil lightens the photo's dark navy, so the copy
       flips from white to the standard dark text. */
    .nx-about-teaser .nx-section__bg {
        background-position: right center;
    }

    /* Heavier than the .40 used on the light photos — this one starts from
       near-black navy, so it needs more white to lift to the same level. */
    .nx-about-teaser .nx-section__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, .55);
    }

    .nx-about-teaser.nx-section--photo .nx-title {
        color: var(--heading);
    }

    .nx-about-teaser.nx-section--photo .nx-lead,
    .nx-about-teaser.nx-section--photo .nx-muted {
        color: var(--text);
    }

    .nx-vm {
        gap: 1.2rem;
    }

    .nx-qflow {
        gap: .5rem;
    }

    .nx-qflow li {
        font-size: .82rem;
        padding: .55rem 1rem;
    }

    /* Stacked table → cards */
    .nx-table,
    .nx-table thead,
    .nx-table tbody,
    .nx-table th,
    .nx-table td,
    .nx-table tr {
        display: block;
    }

    .nx-table {
        min-width: 0;
    }

    .nx-table thead {
        display: none;
    }

    .nx-table tbody tr {
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        margin-bottom: .9rem;
        padding: .4rem 0;
    }

    .nx-table tbody td {
        border: 0;
        padding: .5rem 1.2rem;
        display: flex;
        gap: .8rem;
    }

    .nx-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--primary-700);
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        min-width: 92px;
        padding-top: .1rem;
    }

    .nx-tablescroll {
        overflow: visible;
    }
}

/* ---- Small phone ---- */
@media (max-width: 480px) {
    .nx-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nx-footer__bar ul {
        justify-content: center;
    }

    .nx-brand__sub {
        display: none;
    }

    .nx-brand__logo img {
        height: 24px;
    }

    /* nowrap makes a long CTA label the block's min-content width, which
       pushes flex containers such as .nx-trust wider than the screen. */
    .nx-btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .nx-hero__actions,
    .nx-subhero__actions {
        width: 100%;
    }

    .nx-nav__actions .nx-burger {
        display: flex;
    }

    .nx-mobile__list a {
        font-size: 1.2rem;
    }

    .nx-hero__chips {
        gap: 1rem 1.6rem;
    }

    .nx-flip {
        min-height: 220px;
    }
}

/* ---- Full-bleed photo hero on smaller screens ---- */
@media (max-width: 900px) {
    .nx-hero--photo {
        min-height: auto;
    }

    .nx-hero--photo .nx-hero__visual {
        display: none;
    }

    .nx-hero--photo .nx-hero__copy {
        max-width: 100%;
    }

    .nx-subhero__motif {
        display: none;
    }
}

/* ---- Video-hero pages: framed video adapts down, then stacks on phones ----
   Originally About-only; every other video-hero page (all of them except
   Contact, which has no hero, and Home, whose hero is full-bleed rather
   than the framed lens shape) shared the same unstyled fallback and broke
   the same way, so the fix now applies to the whole group. */
@media (max-width: 1200px) {

    /* Tablet: the framed video becomes a centred right-side panel so the
       heading keeps room on the left instead of being covered. */
    :is(.page-about, .page-why, .page-standard, .page-values, .page-privacy,
        .page-quality, .page-research, .page-scientific-evidence,
        .page-services, .page-terms, .page-reach, .page-nisce) .nx-subhero__framevideo {
        top: 50%;
        height: auto;
        width: min(52%, 620px);
        transform: translateY(-50%);
    }
}

@media (max-width: 900px) {

    /* Phone: the lens-clipped frame shrinks to a small panel on the right
       so the heading still sits beside it on one line, the way it reads on
       desktop, rather than dropping to a full-bleed band with the title
       stacked underneath. One variable drives both the frame's width and
       the gap reserved for it beside the heading. */
    :is(.page-about, .page-why, .page-standard, .page-values, .page-privacy,
        .page-quality, .page-research, .page-scientific-evidence,
        .page-services, .page-terms, .page-reach, .page-nisce) .nx-subhero--plain {
        --about-frame-w: min(62vw, 460px);
        min-height: clamp(17rem, 64vw, 27rem);
        padding-top: 6.5rem;
        padding-bottom: 2.5rem;
    }

    /* Anchored to the bottom rather than vertically centred — at this height
       a centred frame would slide up under the fixed nav. */
    :is(.page-about, .page-why, .page-standard, .page-values, .page-privacy,
        .page-quality, .page-research, .page-scientific-evidence,
        .page-services, .page-terms, .page-reach, .page-nisce) .nx-subhero__framevideo {
        top: auto;
        bottom: 1.25rem;
        left: auto;
        right: 0;
        width: var(--about-frame-w);
        height: auto;
        aspect-ratio: 965 / 600;
        transform: none;
    }

    :is(.page-about, .page-why, .page-standard, .page-values, .page-privacy,
        .page-quality, .page-research, .page-scientific-evidence,
        .page-services, .page-terms, .page-reach, .page-nisce) .nx-subhero__crumbwrap {
        display: none;
    }

    /* Align the heading beside the frame. */
    :is(.page-about, .page-why, .page-standard, .page-values, .page-privacy,
        .page-quality, .page-research, .page-scientific-evidence,
        .page-services, .page-terms, .page-reach, .page-nisce) .nx-subhero--plain .nx-subhero__title {
        text-align: left;
    }
}

/* ---- Reference-inspired sections ---- */
@media (max-width: 1080px) {
    .nx-svcs {
        grid-template-columns: repeat(2, 1fr);
    }

    .nx-benefits__list {
        grid-template-columns: 1fr 1fr;
    }

    .nx-quality__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .nx-svcs {
        grid-template-columns: 1fr;
    }

    .nx-benefits__list {
        grid-template-columns: 1fr;
    }

    .nx-about-badge {
        right: 10px;
        bottom: -14px;
        padding: .85rem 1.1rem;
    }

    .nx-about-badge__num {
        font-size: 1.7rem;
    }

    .nx-shape--dots {
        width: 90px;
        height: 90px;
    }

    .nx-shape--ring {
        width: 90px;
        height: 90px;
    }

    .nx-keystrip__track {
        gap: 1.5rem;
    }
}

/* =============================================================
   MOBILE VERTICAL RHYTHM
   Phones were inheriting desktop-scale block spacing, so every
   section arrived with 80-180px of empty band above and below it.
   This block is the single place to tune site-wide mobile spacing:
   the --section-y token covers every .nx-section, and the rules
   under it catch the handful of blocks that set their own padding.
   Loads last, so it overrides the earlier breakpoints above.
   ============================================================= */
@media (max-width: 720px) {
    :root {
        --section-y: clamp(2.25rem, 7.5vw, 3.25rem);
    }

    /* Section headings sit closer to their content */
    .nx-head {
        margin-bottom: clamp(1.4rem, 5vw, 2.2rem);
    }

    .nx-head--left {
        margin-bottom: 1.6rem;
    }

    .nx-lead {
        margin-top: .6rem;
    }

    /* Scroll cue between hero and first section — was ~190px tall */
    .nx-scrollcue {
        padding: 1.5rem 1rem 0;
        gap: .4rem;
    }

    .nx-scrollcue__line {
        height: 35px;
    }

    /* Heroes */
    .nx-hero {
        padding: 6rem 0 2.5rem;
    }

    .nx-hero-intro {
        padding-block: var(--section-y);
    }

    .nx-subhero {
        padding: 7.5rem 0 2.75rem;
    }

    .nx-subhero--plain {
        min-height: 0;
        padding: 7rem 0 2.5rem;
    }

    .page-about .nx-about-intro {
        padding: 1.25rem 0 4rem;
    }

    .page-about .nx-about-intro__title,
    .page-about .nx-about-intro__text {
        max-width: 100%;
    }

    .page-about .nx-about-intro__title br,
    .page-about .nx-about-intro__text br {
        display: none;
    }

    .page-about .nx-about-formulations__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .page-about .nx-about-formulations__text {
        width: 100%;
        max-width: 32rem;
    }

    .page-about .nx-about-formulations__bg {
        width: 100%;
        height: auto;
    }

    .page-about .nx-about-formulations__text br {
        display: none;
    }

    .page-about .nx-purpose-vision {
        grid-template-columns: 1fr;
        border-left-width: 2px;
    }

    .page-about .nx-purpose-vision__image,
    .page-about .nx-purpose-vision__copy {
        min-height: clamp(260px, 72vw, 390px);
    }

    .page-about .nx-purpose-vision__copy {
        padding: 2.25rem 1.25rem;
    }

    .page-about .nx-purpose-vision__copy--vision {
        order: 4;
    }

    .page-about .nx-purpose-vision__image--vision {
        order: 3;
    }

    .page-about .nx-purpose-vision__copy p br {
        display: none;
    }

    .page-about .nx-about-wellness {
        padding: 1.25rem 0 3rem;
    }

    .page-about .nx-about-wellness__media {
        aspect-ratio: 16 / 10;
    }

    .page-about .nx-about-wellness__copy {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding-top: 2rem;
    }

    .page-about .nx-about-wellness__copy p {
        line-height: 1.6;
    }

    .page-about .nx-about-footprint {
        padding: 3rem 0;
    }

    .page-about .nx-about-footprint__grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .page-about .nx-about-footprint__stat {
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    .page-about .nx-about-footprint__stat:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .page-about .nx-about-journey {
        padding: 3.5rem 0 4rem;
    }

    .page-about .nx-core-values__head {
        padding: 2.75rem 0 6rem;
    }

    .page-about .nx-core-values__head p br {
        display: none;
    }

    .page-about .nx-core-values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-top: -3.5rem;
    }

    .page-about .nx-value-flip {
        aspect-ratio: .7 / 1;
    }

    .page-about .nx-value-flip__back {
        padding: 1rem;
    }

    .page-about .nx-value-flip__icon {
        width: 62px;
        margin-bottom: .9rem;
    }

    .page-about .nx-value-flip__text {
        font-size: clamp(.78rem, 3.25vw, .95rem);
        line-height: 1.4;
    }

    .page-about .nx-about-certifications {
        padding: 2.5rem 0;
    }

    .page-about .nx-about-certifications .nx-certmarquee__item {
        min-width: calc(52vw - 1rem);
        min-height: 124px;
        margin: .5rem;
        padding: 1.5rem;
        border-radius: 14px;
    }

    .page-about .nx-about-certifications .nx-certmarquee__item img {
        height: clamp(58px, 18vw, 82px);
    }

    .page-about .nx-founder-bands {
        padding: 3rem 0;
    }

    .page-about .nx-founder-band {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .page-about .nx-founder-band__portrait {
        aspect-ratio: 1 / 1;
        border-radius: 14px;
    }

    .page-about .nx-founder-band__copy {
        padding: 0 .25rem;
    }

    .page-about .nx-founder-band blockquote {
        font-size: clamp(1.15rem, 5.3vw, 1.5rem);
        line-height: 1.35;
    }

    .page-about .nx-about-careers,
    .page-about .nx-about-careers__inner {
        min-height: 650px;
    }

    .page-about .nx-about-careers__bg {
        background-position: 68% center;
    }

    .page-about .nx-about-careers__inner {
        align-items: flex-end;
        padding-bottom: 2.5rem;
    }

    .page-about .nx-about-careers__inner::before {
        content: "";
        position: absolute;
        inset: 28% 0 0;
        z-index: -1;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .97) 45%);
    }

    .page-about .nx-about-careers__copy {
        width: 100%;
    }


    .page-about .nx-about-careers h3 br {
        display: none;
    }

    .page-about .nx-about-nisce,
    .page-about .nx-about-nisce__inner {
        min-height: 590px;
    }

    .page-about .nx-about-nisce__video {
        object-position: 45% center;
    }

    .page-about .nx-about-nisce__inner {
        grid-template-columns: 1fr;
        align-content: center;
        gap: 1.5rem;
        padding-block: 3rem;
    }

    .page-about .nx-about-nisce__mark {
        width: min(68vw, 330px);
        opacity: .9;
    }

    .page-about .nx-about-nisce__copy {
        padding: 1.25rem;
        background: rgba(7, 25, 48, .58);
        backdrop-filter: blur(3px);
    }

    .page-about .nx-about-nisce__statement br {
        display: none;
    }

    .page-about .nx-about-journey__timeline {
        display: flex;
        flex-direction: column;
        gap: 2.75rem;
        min-height: 0;
        margin-top: 3rem;
        padding-left: 1.25rem;
    }

    .page-about .nx-about-journey__rail {
        left: 1.25rem;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
        background: #dfe5ec;
        clip-path: none;
    }

    .page-about .nx-about-journey__item {
        margin: 0;
        padding-left: 1.5rem;
    }

    .page-about .nx-about-journey__content {
        padding-left: 0;
    }

    .page-about .nx-about-journey__stem {
        top: 0;
        left: 0;
        height: 100%;
    }

    .page-about .nx-about-journey__dot {
        top: .8rem;
        left: 0;
        width: 22px;
        height: 14px;
    }

    /* The About hero keeps its own frame-aware sizing — see the 900px
       .page-about block above. */

    /* Full-bleed video sections carry their own padding clamps. The Why
       We Exist variant is scoped out — its band is padded by a margin
       and its wash is measured off the section's own padding. */
    .nx-building {
        padding-block: var(--section-y);
    }

    .nx-challenge:not(.nx-challenge--seq) {
        padding-block: 0 var(--section-y);
    }

    .nx-challenge:not(.nx-challenge--seq) .nx-challenge__topband {
        padding-block: var(--section-y);
    }

    .nx-commitbanner {
        min-height: clamp(300px, 62vw, 420px);
        margin-bottom: var(--section-y);
    }

    /* Card grids and split layouts */
    .nx-split {
        gap: 1.6rem;
    }

    .nx-stats,
    .nx-checks,
    .nx-vals,
    .nx-points,
    .nx-tech,
    .nx-flips,
    .nx-flips--4,
    .nx-reachgrid,
    .nx-areas,
    .nx-areacards {
        gap: 1rem;
    }

    /* .nx-flow4 excluded on purpose: its cells share borders with no gap
       by design now (see style.css), so a gap here would pull them apart
       and leave a visible seam between the shared border lines. */
    .nx-points {
        margin-bottom: var(--section-y);
    }

    .nx-steps {
        gap: 1.4rem;
    }

    /* Footer */
    .nx-footer__cta-inner {
        padding: 1.8rem 0;
        gap: 1.1rem;
    }

    .nx-footer__main {
        padding: 2.25rem 0 1.5rem;
        gap: 1.8rem;
    }

    .nx-footer__cols {
        gap: 1.5rem;
    }
}

/* ---- Small phone: one more step down ---- */
@media (max-width: 480px) {
    :root {
        --section-y: 2rem;
    }

    .nx-head {
        margin-bottom: 1.3rem;
    }

    .nx-scrollcue {
        padding: 1.2rem 1rem 0;
    }

    .nx-scrollcue__line {
        height: 30px;
    }

    .nx-hero {
        padding: 5.5rem 0 2rem;
    }

    .nx-subhero {
        padding: 6.5rem 0 2.25rem;
    }

    .nx-subhero--plain {
        padding: 6rem 0 2rem;
    }

    .nx-footer__main {
        padding: 2rem 0 1.25rem;
    }
}

/* ---- Print ---- */
@media print {

    .nx-nav,
    .nx-totop,
    .nx-progress,
    .nx-preloader,
    .nx-hero__scroll,
    .nx-footer__cta {
        display: none !important;
    }

    .nx-section--ink {
        background: #fff;
        color: #000;
    }
}