/* ============================================================
   STYLES.CSS — MW Design System (maxshirko.me)
   ============================================================
   Golden standard: mw.pen → Template Page 1920

   ARCHITECTURE:
   - .section = edge padding container (40px sides)
   - .row = 4-column grid inside .section
   - NO sub-elements add their own padding-inline
   - All positioning via grid-column on .row children
   - Mobile: ALL elements → grid-column: 1 / -1

   Typography FROM .pen (pixel-exact at 1920px):
   H1:    55px, 600, lh 1.0,  ls -0.4,  op 0.9
   H2:    40px, 600, lh 0.96, ls -0.4,  op 0.9
   H4:    20px, 700, lh 1.15, ls -0.2,  op 0.9
   Body:  16px, 600, lh 1.45, ls -0.18, op 0.9
   Desc:  16px, 600, lh 1.45, ls -0.18, op 0.7
   Label: 14px, 600, lh 1.4,  ls -0.18, op 0.5
   Small: 14px, 600, lh 1.45, ls -0.14, op 0.9
   Link:  16px, 600, lh 1.15, ls -0.24, op 0.9
   Price: 52px, 600, lh 0.9,  ls -0.52, op 0.9

   Text widths: Body=350, H2=800, CTA=530, Grid=212
   ============================================================ */

/* Fonts loaded via <link> in HTML for non-blocking performance */

/* Custom icon font — MW Iconic */
@font-face {
    font-family: 'MWICONIC';
    src: url('/assets/main/MWICONIC.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Icon font utility class — use on any element */
.t-iconic {
    font-family: 'MWICONIC', sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
}

@layer base, tokens, layout, components, pages;


/* ═══ BASE ═══ */

@layer base {

    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        background: var(--color-bg);
    }

    @media (min-width: 1025px) {
        html {
            scroll-behavior: smooth;
        }
    }

    body {
        background: var(--color-bg);
        color: var(--color-fg);
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.18px;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }

    #smooth-wrapper,
    #smooth-content {
        overflow-x: hidden;
    }

    @media (max-width: 1024px) {

        #smooth-wrapper,
        #smooth-content {
            position: static !important;
            overflow: visible !important;
            width: auto !important;
            height: auto !important;
            transform: none !important;
            will-change: auto !important;
        }
    }

    /* Keep HTML bg perfectly in sync with .inv */
    html.inv {
        background: var(--color-bg-inv);
    }

    img,
    video,
    svg {
        display: block;
        max-width: 100%;
    }

    a {
        color: inherit;
    }
}


/* ═══ TOKENS ═══ */

@layer tokens {
    :root {
        --ds-space-1: 10px;
        --ds-space-2: 20px;
        --ds-space-3: 40px;
        --ds-space-4: 80px;
        --ds-space-5: 160px;
        --ds-space-6: 320px;
        --ds-gap: 20px;
        --ds-edge: 40px;
        --font-heading: 'Inter Tight', sans-serif;
        --font-body: 'Inter Tight', sans-serif;
        --color-bg: #f9f9f9;
        --color-fg: #1e1e1e;
        --color-bg-inv: #1e1e1e;
        --color-fg-inv: #f9f9f9;
        --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ── Typography from .pen ── */

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-heading);
        color: var(--color-fg);
    }

    h1 {
        font-size: 55px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.4px;
    }

    h2 {
        font-size: 40px;
        font-weight: 600;
        line-height: 0.96;
        letter-spacing: -0.4px;
    }

    h3 {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.24px;
    }

    h4 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.2px;
    }

    p {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.18px;
        color: var(--color-fg);
    }

    /* Named styles */
    .t-h1 {
        opacity: 0.9;
    }

    .t-h2 {
        opacity: 0.9;
        max-width: 800px;
    }

    .t-h4 {
        opacity: 0.9;
    }

    .t-body {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.18px;
        opacity: 0.9;
        max-width: 350px;
    }

    .t-desc {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.18px;
        opacity: 0.7;
        max-width: 350px;
    }

    .t-label {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: -0.18px;
        opacity: 0.5;
    }

    .t-small {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.14px;
        opacity: 0.9;
    }

    .t-price {
        font-family: var(--font-heading);
        font-size: 52px;
        font-weight: 600;
        line-height: 0.9;
        letter-spacing: -0.52px;
        opacity: 0.9;
    }

    .t-step-num {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.18px;
        opacity: 0.3;
    }

    .t-link {
        position: relative;
        display: inline;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.24px;
        text-decoration: none;
        color: inherit;
        opacity: 0.9;
        transition: opacity 0.35s var(--ease);
        background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
        background-size: 0% 1px;
        background-position: 0% 100%;
        background-repeat: no-repeat;
        padding-bottom: 4px;
        transition: background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.35s var(--ease);
    }

    .t-link:hover {
        opacity: 1;
        background-size: 100% 1px;
    }

    /* ── Nav link underline hovers (same as .t-link) ── */
    .nav__link {
        background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
        background-size: 0% 1px;
        background-position: 0% 100%;
        background-repeat: no-repeat;
        transition: background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav__link:hover {
        background-size: 100% 1px;
    }

    .nav--dark .nav__link {
        background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35));
    }

    .nav-dropdown__col-link {
        background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
        background-size: 0% 1px;
        background-position: 0% 100%;
        background-repeat: no-repeat;
        transition: background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
    }

    .nav-dropdown__col-link:hover {
        background-size: 100% 1px;
        opacity: 1;
    }

    .nav--dark~.nav-dropdown .nav-dropdown__col-link {
        background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35));
    }

    /* ── Mobile typography ── */
    @media (max-width: 640px) {
        h1 {
            font-size: 32px;
            line-height: 1.15;
        }

        h2 {
            font-size: 28px;
            line-height: 1;
        }

        h3 {
            font-size: 18px;
            line-height: 1.15;
        }

        h4 {
            font-size: 16px;
        }

        p,
        .t-body,
        .t-desc {
            font-size: 14px;
        }

        .t-label {
            font-size: 12px;
        }

        .t-price {
            font-size: 36px;
        }

        .t-body,
        .t-desc,
        .t-h2 {
            max-width: 100%;
        }
    }

    @media (max-width: 1024px) {

        .t-body,
        .t-desc,
        .t-h2 {
            max-width: 100%;
        }
    }
}


/* ═══ LAYOUT ═══ */

@layer layout {

    /* Section = THE ONLY element with edge padding */
    .section {
        padding-inline: var(--ds-edge);
    }

    /* 4-col grid */
    .row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
        width: 100%;
    }

    /* Spacers */
    .sp-10 {
        height: 10px;
    }

    .sp-20 {
        height: 20px;
    }

    .sp-40 {
        height: 40px;
    }

    .sp-80 {
        height: 80px;
    }

    .sp-160 {
        height: 160px;
    }

    .sp-145 {
        height: 145px;
    }

    /* Dark sections */
    .inv {
        background: var(--color-bg-inv);
        color: var(--color-fg-inv);
        margin-top: -1px;
        padding-top: 1px;
    }

    .inv h1,
    .inv h2,
    .inv h3,
    .inv h4,
    .inv p,
    .inv a,
    .inv span,
    .inv .t-body,
    .inv .t-desc,
    .inv .t-label,
    .inv .t-small,
    .inv .t-link,
    .inv .t-step-num {
        color: var(--color-fg-inv);
    }

    .inv .t-link {
        background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35));
    }

    /* Placeholder boxes */
    .ph {
        background: #555;
        overflow: hidden;
    }

    .inv .ph {
        background: #888;
    }

    /* ── Tablet ── */
    @media (max-width: 1024px) {
        .row {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-3);
        }

        .row>[style] {
            grid-column: 1 / -1 !important;
            grid-row: auto !important;
        }
    }

    /* ── Mobile ── */
    @media (max-width: 640px) {
        :root {
            --ds-edge: 20px;
            --ds-space-2: 12px;
            --ds-space-3: 24px;
            --ds-space-4: 40px;
            --ds-space-5: 60px;
            --ds-gap: 16px;
        }

        .row {
            grid-template-columns: 1fr;
            row-gap: var(--ds-space-3);
        }

        .row>[style] {
            grid-column: 1 / -1 !important;
            grid-row: auto !important;
        }

        .sp-160 {
            height: 80px;
        }

        .sp-145 {
            height: 60px;
        }

        .sp-80 {
            height: 40px;
        }

        .sp-40 {
            height: 20px;
        }

        .sp-20 {
            height: 20px;
        }

        .sp-10 {
            height: 10px;
        }
    }
}


/* ═══ COMPONENTS ═══ */

@layer components {
    .btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        padding: 22px 46px;
        border-radius: 900px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.18px;
        border: 2px solid var(--color-fg);
        cursor: pointer;
        text-decoration: none;
        background: var(--color-fg);
        color: #fff;
        overflow: hidden;
        isolation: isolate;
    }

    .btn-primary {
        background: var(--color-fg);
        color: #fff;
    }

    .divider {
        width: 100%;
        height: 1px;
        background: currentColor;
        opacity: 0.15;
    }

    .icon-sq {
        width: 47px;
        height: 47px;
        flex-shrink: 0;
    }

    @media (max-width: 640px) {
        .btn {
            width: 100%;
        }

        .icon-sq {
            width: 32px;
            height: 32px;
        }
    }
}


/* ── Button fill-reveal hover (outside @layer for proper specificity) ── */
.btn {
    transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-bg);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

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

.btn:hover::before {
    transform: scaleX(1);
}

/* ── Nav button fill-reveals (outside @layer / outside menu.html) ── */
.nav__more-btn {
    transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__more-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #1e1e1e;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.nav__more-btn:hover {
    color: #f9f9f9;
}

.nav__more-btn:hover::before {
    transform: scaleX(1);
}

.nav__buy {
    transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__buy::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f9f9f9;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.nav__buy:hover {
    color: #1e1e1e !important;
}

.nav__buy:hover::before {
    transform: scaleX(1);
}

.nav--dark .nav__buy::before {
    background: #1e1e1e;
}

.nav--dark .nav__buy:hover {
    color: #f9f9f9 !important;
}

/* ═══════════════════════════════════════
   PAGES — All sections
   ═══════════════════════════════════════

   CRITICAL RULE: No sub-element adds padding-inline!
   .section handles ALL edge padding.
   Elements inside .section that are NOT .row
   must NOT add padding — they already inherit
   the section's padding.
   ═══════════════════════════════════════ */

@layer pages {

    /* ──────────── 1 · HERO ──────────── */

    .s-hero {
        position: relative;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
        padding: 0 !important;
        /* hero handles its own layout */
        background: var(--color-bg-inv);
        color: var(--color-fg-inv);
    }

    .s-hero h1,
    .s-hero h2,
    .s-hero p,
    .s-hero a,
    .s-hero span {
        color: var(--color-fg-inv);
    }

    /* Light hero variant (Бренд 2) — MUST come AFTER .s-hero rules */
    .s-hero--light {
        background: var(--color-bg);
        color: var(--color-fg);
    }

    .s-hero--light h1,
    .s-hero--light h2,
    .s-hero--light p,
    .s-hero--light a,
    .s-hero--light span {
        color: var(--color-fg);
    }

    .s-hero--light .icon-sq {
        background: none;
    }

    .s-hero--light img.icon-sq,
    .s-cd__feature img[src$=".svg"] {
        filter: invert(1) brightness(0.12);
    }

    /* Don't invert SVGs on dark sections — they're already white */
    .inv .s-cd__feature img[src$=".svg"] {
        filter: none;
    }

    .s-hero--light .s-hero__bg {
        background: #c4c4c4;
    }

    .s-hero__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 44%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
        background: #1e1e1e;
        border-radius: 5px;
    }

    .s-hero__wrap {
        position: relative;
        z-index: 1;
        margin-left: 50%;
        width: 50%;
        min-height: 100vh;
        min-height: 100svh;
        padding: var(--ds-space-3) var(--ds-edge) var(--ds-space-3) calc(var(--ds-gap) / 2);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .s-hero__top {
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-3);
    }

    .s-hero__h1 {
        max-width: 800px;
    }

    .s-hero__bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
    }

    .s-hero__col {
        display: flex;
        flex-direction: column;
    }

    .s-hero__col .icon-sq {
        margin-bottom: var(--ds-space-3);
    }

    .s-hero__col .t-body {
        max-width: 270px;
    }

    .s-hero__col .t-small {
        margin-top: auto;
        padding-top: var(--ds-space-3);
    }

    @media (max-width: 1024px) {
        .s-hero {
            min-height: auto;
        }

        .s-hero__bg {
            position: relative;
            width: 100%;
            height: 42vh;
            height: 42svh;
        }

        .s-hero__wrap {
            position: static;
            margin-left: 0;
            width: 100%;
            min-height: auto;
            padding: var(--ds-space-4) var(--ds-edge);
            gap: var(--ds-space-4);
        }
    }

    @media (max-width: 640px) {
        .s-hero {
            min-height: 100vh;
            min-height: 100svh;
        }

        .s-hero__bg {
            position: relative;
            height: 55vh;
            height: 55svh;
        }

        .s-hero__wrap {
            min-height: 40vh;
            min-height: 40svh;
            padding: var(--ds-space-3) var(--ds-edge);
            gap: var(--ds-space-3);
        }

        /* .pen mobile: btmCol1 x:0, btmCol2 x:185 → 2 columns stay! */
        .s-hero__bottom {
            grid-template-columns: 1fr 1fr;
            column-gap: var(--ds-gap);
        }

        .s-hero__bottom:has(.s-hero__col:only-child) {
            grid-template-columns: 1fr;
        }

        .s-hero__col .t-body {
            max-width: 165px;
        }

        .s-hero__col:only-child .t-body {
            max-width: 80%;
        }

        .s-hero__col .icon-sq {
            width: 30px;
            height: 30px;
        }
    }

    .case-video-wrapper {
        grid-column: 1 / -1;
        width: 33.333%;
    }

    @media (max-width: 640px) {
        .case-video-wrapper {
            width: 100%;
        }
    }


    /* ──────────── 2 · BIO ──────────── */
    /* Label x:0→col1, H2 x:465→col2-4, Avatars x:465→col2, Body x:930→col3-4 */

    .s-bio__label {
        grid-column: 1;
    }

    .s-bio__heading {
        grid-column: 2 / -1;
    }

    .s-bio__avatars {
        grid-column: 2 / span 2;
        display: flex;
        gap: var(--ds-gap);
    }

    .s-bio__avatar {
        width: 160px;
        height: 160px;
        overflow: hidden;
    }

    .s-bio__body {
        grid-column: 3 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
    }

    @media (max-width: 1024px) {

        .s-bio__label,
        .s-bio__heading,
        .s-bio__avatars,
        .s-bio__body {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .s-bio__body {
            grid-template-columns: 1fr;
            gap: var(--ds-space-2);
        }

        .s-bio__avatar {
            width: 100px;
            height: 100px;
        }
    }


    /* ──────────── 3 · PRODUCTS INTRO ──────────── */
    /* Label x:930→col3, Icon x:0→col1 155×129, H1 x:508→col2-4, Sub x:930→col3 */

    .s-pi__label {
        grid-column: 3 / -1;
    }

    /* Breakout row: image doesn't affect row height */
    .s-pi__row {
        position: relative;
        overflow: visible;
    }

    .s-pi__icon {
        grid-column: 1;
        /* 327px / 1840px row = 17.77% — scales proportionally */
        width: 17.77%;
        height: auto;
        position: absolute;
        top: 0;
        z-index: 1;
        overflow: hidden;
    }

    .s-pi__heading {
        grid-column: 2 / -1;
    }

    .s-pi__sub {
        grid-column: 3 / -1;
    }

    /* Label that sits at col3 in the same row as piGrp (pen x:930) */
    .s-pi__sub-label {
        grid-column: 3;
        grid-row: 1;
    }

    @media (max-width: 1024px) {

        .s-pi__label,
        .s-pi__icon,
        .s-pi__heading,
        .s-pi__sub,
        .s-pi__sub-label {
            grid-column: 1 / -1;
        }

        .s-pi__icon {
            position: static;
            width: 40%;
        }
    }

    @media (max-width: 640px) {
        .s-pi__icon {
            width: 100%;
        }
    }


    /* ──────────── BRAND PAGE ──────────── */

    /* Label x:0→col1 */
    .s-br__label {
        grid-column: 1;
    }

    /* H2 x:465→col2-4 (Course Intro) */
    .s-br__heading {
        grid-column: 2 / -1;
    }

    /* H2 x:930→col3-4 (Features, Why Brand) */
    .s-br__heading-c3 {
        grid-column: 3 / -1;
    }

    /* Section 4 hero block: piGrp layout */
    .s-br__cd-hero {
        position: relative;
        min-height: 250px;
    }

    .s-br__cd-img {
        grid-column: 1;
        grid-row: 1;
        width: 284px;
        height: 331px;
        background: #cccccc;
        align-self: start;
        border-radius: 5px;
        overflow: hidden;
    }

    .s-br__cd-heading {
        grid-column: 2 / span 2;
        grid-row: 1;
        align-self: center;
    }

    .s-br__cd-label {
        grid-column: 3 / -1;
        grid-row: 1;
        align-self: start;
        opacity: 0.5;
    }

    .s-br--alt {
        background: #efefef;
    }

    /* Avatars: 3×160px at x:465→col2 */
    .s-br__avatars {
        grid-column: 2 / -1;
        display: flex;
        gap: 20px;
    }

    .s-br__avatar {
        width: 160px;
        height: 160px;
        background: #c4c4c4;
        border-radius: 5px;
        flex-shrink: 0;
    }

    /* Body text col3 & col4 */
    .s-br__body-c3 {
        grid-column: 3;
    }

    .s-br__body-c4 {
        grid-column: 4;
    }

    /* Feature images: 75% width */
    .s-br__feat-img {
        width: 75%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 5px;
    }

    /* Feature card titles: 50% width (Section 3) */
    .s-cd__feature .t-h4 {
        max-width: 50%;
    }

    /* Section 4 card titles: 75% width */
    .s-br__card-icon~.t-h4 {
        max-width: 75%;
    }

    .s-br__card-icon {
        width: 28px;
        height: 28px;
    }

    @media (max-width: 1024px) {

        .s-br__label,
        .s-br__heading,
        .s-br__heading-c3,
        .s-br__body-c3,
        .s-br__body-c4 {
            grid-column: 1 / -1;
        }

        .s-br__avatars {
            grid-column: 1 / -1;
        }

        .s-br__avatar {
            width: 120px;
            height: 120px;
        }

        .s-br__feat-img {
            width: 100%;
            max-width: none;
            height: auto;
            aspect-ratio: 1;
        }

        .s-cd__feature .t-h4,
        .s-br__card-icon~.t-h4 {
            max-width: 100%;
        }

        .s-br__updates-body {
            grid-template-columns: 1fr;
            row-gap: 16px;
        }

        .s-br__updates-body .t-body {
            max-width: 100%;
        }

        .s-br__updates-img {
            grid-column: 1 / -1;
            width: 100%;
        }

        .s-br__updates-right {
            grid-column: 1 / -1;
        }

        .s-br__cd-img {
            grid-column: 1 / -1;
            width: 100%;
            max-width: none;
            height: auto;
            aspect-ratio: 284 / 331;
        }

        .s-br__cd-heading {
            grid-column: 1 / -1;
            grid-row: auto;
        }

        .s-br__cd-label {
            grid-column: 1 / -1;
            grid-row: auto;
        }
    }

    @media (max-width: 640px) {
        .s-br__avatars {
            gap: 2px;
        }

        .s-br__avatar {
            width: calc((100% - 4px) / 3);
            flex: 0 0 auto;
            height: auto;
            aspect-ratio: 1;
        }
    }

    /* Updates section: video 85% width, content col3-4 */
    .s-br__updates-img {
        grid-column: 1 / span 2;
        grid-row: 1;
        width: 85%;
        height: auto;
        min-height: 400px;
        overflow: hidden;
        border-radius: 5px;
    }

    .s-br__updates-right {
        grid-column: 3 / -1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .s-br__updates-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
        margin-top: auto;
    }

    .s-br__updates-body .t-body {
        max-width: 320px;
    }

    /* Audience: icon col1, title col3-4 */
    .s-br__aud-icon {
        grid-column: 1;
        width: 121px;
        height: 101px;
    }

    .s-br__aud-title {
        grid-column: 3 / -1;
    }

    @media (max-width: 1024px) {
        .s-br__updates-img {
            grid-column: 1 / -1;
            height: 350px;
        }

        .s-br__updates-right {
            grid-column: 1 / -1;
            grid-row: 2;
            margin-top: var(--ds-space-3);
        }

        .s-br__aud-title {
            grid-column: 1 / -1;
            margin-top: var(--ds-space-2);
        }
    }

    @media (max-width: 640px) {
        .s-br__updates-img {
            height: 260px;
            width: 100%;
            margin-left: 0;
            border-radius: 5px;
        }

        .s-br__updates-right .t-h2 {
            margin-bottom: 40px;
        }

        .s-br__updates-body {
            grid-template-columns: 1fr;
            gap: var(--ds-space-2);
        }

        .s-br__aud-icon {
            width: 60px;
            height: 60px;
        }
    }


    /* ──────────── 4 · COURSE FEATURES ──────────── */
    /* H2 x:930→col3-4. Features: 4×350px inside section */

    .s-cd__heading {
        grid-column: 3 / -1;
    }

    .s-cd__features {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
        /* NO padding-inline! .section handles it */
    }

    .s-cd__features--6 {
        row-gap: 80px;
    }

    .s-cd__feature {
        display: flex;
        flex-direction: column;
    }

    .s-cd__img {
        width: 100%;
        aspect-ratio: 1;
        max-width: 260px;
        overflow: hidden;
        border-radius: 5px;
    }

    @media (max-width: 1024px) {
        .s-cd__heading {
            grid-column: 1 / -1;
        }

        .s-cd__features {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-3);
        }

        .s-cd__feature[aria-hidden="true"] {
            display: none;
        }
    }

    @media (max-width: 640px) {

        /* Mobile: 2 columns for feature cards */
        .s-cd__features {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-3);
        }

        .s-cd__feature[aria-hidden="true"] {
            display: none;
        }

        .s-cd__img {
            max-width: 165px;
        }

        .s-cd__feature .t-h4 {
            max-width: 80%;
        }
    }


    /* ──────────── 5 · PATH & PRINCIPLES ──────────── */
    /* Image x:0→col1, Label x:465→col2, H2 x:465→col2-4 */
    /* Principles: x:0→col1, x:930→col3, x:1395→col4 */

    .s-pp__image {
        grid-column: 1;
        width: 100%;
        overflow: hidden;
        border-radius: 5px;
        align-self: start;
    }

    .s-pp__label {
        grid-column: 2;
        grid-row: 1;
    }

    .s-pp__heading {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .s-pp__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
        /* NO padding-inline! */
    }

    .s-pp__item {
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-2);
    }

    .s-pp__item:nth-child(1) {
        grid-column: 1;
    }

    .s-pp__item:nth-child(2) {
        grid-column: 3;
    }

    .s-pp__item:nth-child(3) {
        grid-column: 4;
    }

    @media (max-width: 1024px) {
        .s-pp__image {
            grid-column: 1;
            grid-row: 1;
            width: 120px;
            height: 120px;
        }

        .s-pp__label {
            grid-column: 1 / -1;
            grid-row: 2;
        }

        .s-pp__heading {
            grid-column: 1 / -1;
            grid-row: 3;
        }

        .s-pp__list {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-3);
        }

        .s-pp__item:nth-child(1),
        .s-pp__item:nth-child(2),
        .s-pp__item:nth-child(3) {
            grid-column: auto;
        }
    }

    @media (max-width: 640px) {

        /* .pen mobile: image 120×120, principles stacked */
        .s-pp__image {
            width: 120px;
            height: 120px;
        }

        .s-pp__list {
            grid-template-columns: 1fr;
        }
    }


    /* ──────────── 6 · CONTENT GRID ──────────── */
    /* H2 x:930→col3-4. Grid items 212px in 8-col layout */

    .s-cg__heading {
        grid-column: 3 / -1;
    }

    .s-cg__row {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        column-gap: var(--ds-gap);
        margin-bottom: var(--ds-space-3);
        /* NO padding-inline! */
    }

    .s-cg__row:last-child {
        margin-bottom: 0;
    }

    .s-cg__item {
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-2);
    }

    .s-cg__img {
        width: 100%;
        aspect-ratio: 1;
        max-width: 163px;
        overflow: hidden;
        border-radius: 5px;
    }

    @media (max-width: 1024px) {
        .s-cg__heading {
            grid-column: 1 / -1;
        }

        .s-cg__row {
            grid-template-columns: repeat(3, 1fr);
            row-gap: var(--ds-space-3);
        }

        .s-cg__item {
            grid-column: auto !important;
        }
    }

    @media (max-width: 640px) {
        .s-cg__row {
            grid-template-columns: repeat(2, 1fr);
        }
    }


    /* ──────────── 6a · LESSONS LIST (two-column text) ──────────── */

    .s-lessons__col:first-child {
        grid-column: 3;
    }

    .s-lessons__col:last-child {
        grid-column: 4;
    }

    .s-lessons__col .t-body {
        line-height: 2;
    }

    .s-lessons__col {
        display: flex;
        flex-direction: column;
    }

    .s-lesson {
        display: block;
        line-height: 1.9;
        opacity: 0;
        transform: translateY(8px);
    }

    /* Lessons subtitle (pen x:0 → col1) */
    .s-cg__sub {
        grid-column: 1;
    }

    @media (max-width: 1024px) {

        .s-lessons__col:first-child,
        .s-lessons__col:last-child {
            grid-column: 1 / -1;
        }

        .s-cg__sub {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {

        /* Remove gap between lesson columns so 24→25 flows seamlessly */
        .row:has(.s-lessons__col) {
            row-gap: 0;
        }
    }

    /* ──────────── 7 · UPDATES & AUDIENCE ──────────── */
    /* Image 800×527 x:0→col1-2. Group 100% x:930→col3-4,  H2 w=910, body 2×350 */
    /* Audience: icon x:0→col1, title x:930→col3-4, lists x:930/1395→col3/col4, side x:0→col1-2 */

    .s-ua__image {
        grid-column: 1 / span 2;
        grid-row: 1;
        width: 90%;
        overflow: hidden;
        background: #555;
        border-radius: 5px;
    }

    .s-ua__image video,
    .s-ua__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .s-ua__right {
        grid-column: 3 / -1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
    }

    .s-ua__right .t-h2 {
        max-width: 910px;
    }

    .s-ua__body {
        margin-top: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
    }

    .s-ua__aud-icon {
        grid-column: 1;
        width: 60px;
        height: 50px;
    }

    .s-ua__aud-title {
        grid-column: 3 / -1;
    }

    .s-ua__aud-c1 {
        grid-column: 3;
    }

    .s-ua__aud-c2 {
        grid-column: 1;
    }

    .s-ua__aud-side {
        grid-column: 4;
    }

    @media (max-width: 1024px) {
        .s-ua__image {
            grid-column: 1 / -1;
            width: 100%;
            min-height: 300px;
        }

        .s-ua__right {
            grid-column: 1 / -1;
            grid-row: 2;
            margin-top: var(--ds-space-3);
        }

        .s-ua__body {
            margin-top: var(--ds-space-3);
        }

        .s-ua__aud-icon {
            grid-column: 1;
        }

        .s-ua__aud-title {
            grid-column: 1 / -1;
            margin-top: var(--ds-space-2);
        }

        .s-ua__aud-c1 {
            grid-column: 1;
        }

        .s-ua__aud-c2 {
            grid-column: 2;
        }

        .s-ua__aud-side {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .s-ua__image {
            min-height: 260px;
        }

        /* .pen mobile: 260px */
        .s-ua__body {
            grid-template-columns: 1fr;
            gap: var(--ds-space-2);
        }

        .s-ua__aud-icon {
            width: 60px;
            height: 60px;
        }

        /* .pen mobile: 60×60 */
        .s-ua__aud-c1,
        .s-ua__aud-c2,
        .s-ua__aud-side {
            grid-column: 1 / -1;
        }
    }


    /* ──────────── 8 · PRICING CTA ──────────── */
    /* Card 910px x:930→col3-4. Button inside left col at bottom */

    .s-prc__card {
        grid-column: 3 / -1;
        background: var(--color-bg);
        color: var(--color-fg);
        padding: var(--ds-space-3);
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
        min-height: 460px;
        border-radius: 5px;
        overflow: hidden;
    }

    .s-prc__card h2,
    .s-prc__card h4,
    .s-prc__card p,
    .s-prc__card a:not(.btn) {
        color: var(--color-fg);
    }

    .s-prc__left {
        display: flex;
        flex-direction: column;
    }

    .s-prc__price {
        margin-top: var(--ds-space-4);
    }

    .s-prc__meta {
        margin-top: var(--ds-space-3);
        opacity: 0.5;
    }

    .s-prc__btn {
        margin-top: auto;
    }

    /* pushes button to bottom of left column */

    .s-prc__steps {
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-2);
        /* space between numbered steps */
    }

    @media (max-width: 1024px) {
        .s-prc__card {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .s-prc__card {
            grid-template-columns: 1fr;
            gap: var(--ds-space-3);
            min-height: auto;
        }

        .s-prc__price {
            margin-top: var(--ds-space-3);
        }

        .s-prc__meta {
            margin-top: var(--ds-space-2);
        }

        .s-prc__btn {
            margin-top: var(--ds-space-3);
            width: 100%;
        }
    }

    /* Dark pricing card on light pages */
    .s-prc__card--dark {
        background: var(--color-bg-inv);
        color: var(--color-fg-inv);
    }

    .s-prc__card--dark h2,
    .s-prc__card--dark h4,
    .s-prc__card--dark p,
    .s-prc__card--dark a:not(.btn) {
        color: var(--color-fg-inv);
    }

    .s-prc__btn--light {
        background: var(--color-bg) !important;
        color: var(--color-fg) !important;
        border-color: var(--color-bg) !important;
    }

    .s-prc__btn--light::before {
        background: var(--color-bg-inv) !important;
    }

    .s-prc__btn--light:hover {
        color: var(--color-fg-inv) !important;
    }


    /* ──────────── 9 · PORTFOLIO / HOW WORK ──────────── */
    /* Description x:930→col3-4. Steps 4×350 full-width */

    .s-pw__top {
        grid-column: 3 / -1 !important;
        display: flex;
        flex-direction: column;
    }

    .s-pw__label {
        grid-column: 1 !important;
        margin-bottom: var(--ds-space-3);
    }

    .s-pw__body {
        margin-top: var(--ds-space-5);
    }

    .s-pw__subtitle {
        grid-column: 3 / -1 !important;
    }

    .s-pw__steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
        /* NO padding-inline! */
    }

    .s-pw__step {
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-2);
    }

    @media (max-width: 1024px) {
        .s-pw__top {
            grid-column: 1 / -1 !important;
        }

        .s-pw__label {
            grid-column: 1 / -1 !important;
        }

        .s-pw__subtitle {
            grid-column: 1 / -1 !important;
        }

        .s-pw__steps {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-3);
        }
    }

    @media (max-width: 640px) {

        /* .pen mobile: 2-col (step1/step2 side by side, step3/step4 below) */
        .s-pw__steps {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-3);
        }
    }


    /* ──────────── 10 · CONSULTATION ──────────── */
    /* Icon x:0→col1, H2 x:930→col3-4, Body x:930→col3-4 (2×350) */

    .s-con__icon {
        grid-column: 1;
        width: 121px;
        height: 101px;
        background: #000;
    }

    .s-con__heading {
        grid-column: 3 / -1;
    }

    .s-con__body {
        grid-column: 3 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
    }

    @media (max-width: 1024px) {
        .s-con__icon {
            grid-column: 1;
            width: 80px;
            height: 67px;
        }

        .s-con__heading {
            grid-column: 1 / -1;
        }

        .s-con__body {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .s-con__icon {
            grid-column: 1 / -1;
        }

        .s-con__body {
            grid-template-columns: 1fr;
            gap: var(--ds-space-2);
        }
    }


    /* ──────────── 11 · CTA / OUTRO ──────────── */
    /* Image 843×580 x:0→col1-2. Content at x:970→col3-4 */

    .s-outro__image {
        grid-column: 1 / span 2;
        grid-row: 1;
        width: 100%;
        min-height: 580px;
        background: var(--color-fg);
        border-radius: 5px;
        overflow: hidden;
    }

    .s-outro__content {
        grid-column: 3 / -1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-3);
    }

    .s-outro__sub {
        max-width: 530px;
        opacity: 0.5;
    }

    .s-outro__body {
        margin-top: auto;
        max-width: 530px;
    }

    @media (max-width: 1024px) {
        .s-outro__image {
            grid-column: 1 / -1;
            min-height: 350px;
        }

        .s-outro__content {
            grid-column: 1 / -1;
            grid-row: 2;
            padding-top: var(--ds-space-3);
        }

        .s-outro__body {
            margin-top: var(--ds-space-3);
        }
    }

    @media (max-width: 640px) {
        .s-outro__image {
            min-height: 260px;
        }

        /* .pen mobile: 260px */
        .s-outro__sub,
        .s-outro__body {
            max-width: 100%;
        }
    }


    /* ──────────── 12 · FOOTER ──────────── */
    /* City x:0→col1, Links x:930→col3, Msg x:1395→col4, Copy x:1740→col4 end, Logo x:930→col3 */

    .s-ft__city {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    .s-ft__links {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-3);
        align-self: start;
        align-items: flex-start;
    }

    .s-ft__msg {
        grid-column: 4;
        grid-row: 1;
        align-self: start;
    }

    .s-ft__copy {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }

    .s-ft__logo {
        grid-column: 3;
        width: 50px;
        height: 50px;
        background: none;
    }

    @media (max-width: 1024px) {
        .s-ft__city {
            grid-column: 1;
            grid-row: 1;
        }

        .s-ft__links {
            grid-column: 1 / -1;
            grid-row: 2;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--ds-space-2);
        }

        .s-ft__msg {
            grid-column: 1;
            grid-row: 3;
        }

        .s-ft__copy {
            grid-column: 2;
            grid-row: 3;
            justify-self: start;
        }

        .s-ft__logo {
            grid-column: 1;
            grid-row: 4;
        }
    }

    @media (max-width: 640px) {
        footer .row {
            display: grid !important;
            grid-template-columns: 1fr;
            row-gap: 8px;
        }

        .s-ft__links {
            grid-column: 1;
            grid-row: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            width: 100%;
            margin-bottom: 24px;
        }

        .s-ft__links .t-link {
            font-size: 13px;
        }

        .s-ft__msg {
            grid-column: 1;
            grid-row: 2;
        }

        .s-ft__city {
            grid-column: 1;
            grid-row: 3;
        }

        .s-ft__copy {
            grid-column: 1;
            grid-row: 4;
            justify-self: start;
        }

        .s-ft__logo {
            grid-column: 1;
            grid-row: 5;
            width: 40px;
            height: 40px;
            margin-top: 16px;
        }

        /* Make footer text smaller on mobile */
        footer .t-small {
            font-size: 12px !important;
        }
    }
}

/* ──────────── 8-COLUMN MASONRY GALLERY ──────────── */
.s-gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: var(--ds-gap);
    row-gap: 20px;
    align-items: start;
    width: 100%;
}

.s-gallery__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.s-gallery__media {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    background: #1e1e1e;
    transform: translateZ(0);
    /* Fix Safari column clip bugs */
}

.s-gallery__media img,
.s-gallery__media video {
    width: 100%;
    height: auto;
    display: block;
}

.s-gallery__media--crop-video video {
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
    transform: scale(1.1);
    /* Zoom in by 10% to crop out baked-in white bars */
    object-position: center;
}

@media (max-width: 1024px) {
    .s-gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    .s-gallery__item[style] {
        grid-column: span 2 !important;
    }
}

@media (max-width: 640px) {
    .s-gallery {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--ds-space-3);
    }

    .hide-on-mobile {
        display: none !important;
    }

    .s-gallery__item[style] {
        grid-column: span 1 !important;
    }

    .s-gallery__item.mob-span-2[style],
    .s-gallery__item.mob-span-2 {
        grid-column: 1 / -1 !important;
    }
}

/* ──────────── HERO SLIDER ──────────── */

.s-hero__slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: hero-fade-zoom 25s infinite;
    will-change: transform, opacity;
    contain: layout style paint;
}

@keyframes hero-fade-zoom {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    4% {
        opacity: 1;
        transform: scale(1.02);
    }

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

    24% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* ──────────── PACK PAGE INTRO FIX ──────────── */
.s-pack__intro-img-wrap {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 0;
}

.s-pack__intro-img-inner {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    overflow: hidden;
    width: 140%;
    z-index: -1;
}

.s-pack__intro-heading {
    grid-column: 3 / -1;
    grid-row: 1;
}

@media (max-width: 1024px) {

    .s-pack__intro-img-wrap,
    .s-pack__intro-heading {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .s-pack__intro-img-inner {
        position: relative;
        width: 100%;
        margin-bottom: var(--ds-space-2);
    }
}