/* ============================================================
   PAGE: index — Vellum homepage
   Two-layer system: Grid + Free
   ============================================================ */

@layer pages {

    /* ──────────── 1 · HERO ──────────────────────────
       FREE: bg image (left, 62% width)
       GRID: 4-col grid for all content
       Pen: 1440×900, 4 rows: nav / headline / meta / bottom
       ──────────────────────────────────────────────── */
    .s-hero {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto 1fr auto auto;
        column-gap: var(--ds-gap);
        min-height: 100vh;
        padding-block: 30px 40px;
        overflow: hidden;
        background: var(--color-bg-inv);
    }

    /* FREE: Background image — positioned left, 62% width */
    .s-hero__bg {
        /* pen: child image x=-71, y=-37, 892×1008 in section 1440×900 */
        left: -4.93%;
        /* -71 / 1440 */
        top: 0;
        width: 61.94%;
        /* 892 / 1440 */
        height: 100%;
        z-index: 0 !important;
    }

    .s-hero__bg canvas {
        width: 100%;
        height: 100%;
        opacity: 0.7;
        object-fit: contain;
        object-position: bottom;
    }

    /* Row 1: Navigation — col 1 / col 3 / col 4 */
    .s-hero__brand {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .s-hero__nav-link {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .s-hero__nav-btn {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }

    /* Row 2: Headline — col 3-4, centered vertically */
    .s-hero__headline {
        grid-column: 3 / -1;
        grid-row: 2;
        align-self: center;
        max-width: 670px;
    }

    /* Clip-path text reveal */
    .hero-line {
        display: block;
    }

    .hero-line__inner {
        display: block;
        opacity: 0;
    }

    /* Row 3: Meta — col 3 / col 4 */
    .s-hero__meta1 {
        grid-column: 3;
        grid-row: 3;
        margin-top: clamp(20px, 5vh, 80px);
    }

    .s-hero__meta2 {
        grid-column: 4;
        grid-row: 3;
        margin-top: clamp(20px, 5vh, 80px);
    }

    /* Row 4: Bottom info — col 1-2 / col 3 / col 4 */
    .s-hero__copy {
        grid-column: 1 / 3;
        grid-row: 4;
        margin-top: clamp(40px, 10vh, 160px);
        align-self: end;
    }

    .s-hero__addr {
        grid-column: 3;
        grid-row: 4;
        margin-top: clamp(40px, 10vh, 160px);
        line-height: 1.5;
    }

    .s-hero__contact {
        grid-column: 4;
        grid-row: 4;
        margin-top: clamp(40px, 10vh, 160px);
        line-height: 1.5;
    }


    /* ──────────── 2 · SERVICES & CREDENTIALS ─────
       GRID: all content (two columns + 3-col Why)
       ──────────────────────────────────────────────── */
    .s-services__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
    }

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

    .s-services__why-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    /* ──────────── 3 · CASE STUDY ─────────────────
       GRID: top row (headline + subtitle)
       FREE: bottom canvas (photos + text, art-directed)
       Pen Group 3: 1440×839, coordinates relative to group
       ──────────────────────────────────────────────── */

    /* GRID: Top row */
    .s-case__top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
        align-items: start;
    }

    .s-case__headline {
        max-width: 540px;
    }

    .s-case__subtitle {
        max-width: 576px;
    }

    /* FREE: Canvas — big photo determines height (static), others float */
    .s-case__canvas {
        /* Big photo (static) defines height; free elements float inside */
        min-height: 0;
    }

    .s-case__big-photo {
        /* STATIC: this element defines the canvas height */
        position: static !important;
        width: 33.82%;
        /* 460 / 1360 */
        aspect-ratio: 460 / 489;
        z-index: 1;
    }

    .s-case__small-photo {
        /* pen: x=700, y=0, 200×160 — top of right area */
        left: 51.47%;
        /* 700 / 1360 */
        top: 0;
        width: 14.71%;
        /* 200 / 1360 */
        aspect-ratio: 200 / 160;
    }

    .s-case__caption {
        /* pen: x=958, y=0, w=200 — right of small photo, top */
        left: 70.44%;
        /* 958 / 1360 */
        top: 0;
        width: 14.71%;
        /* 200 / 1360 */
        line-height: 1.5;
    }

    .s-case__bottom-block {
        /* BOTTOM-ANCHOR: entire block flush with photo bottom */
        left: 39.71%;
        /* 540 / 1360 — art-directed, off-grid */
        bottom: 0;
        /* flush with photo bottom edge */
        width: 41.18%;
        /* 560 / 1360 */
    }


    /* ──────────── 4 · PROCESS HERO ──────────────
       GRID: nav, content
       FULL-BLEED: photo
       ──────────────────────────────────────────────── */
    .s-process-hero__nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
        align-items: center;
    }

    .s-process-hero__nav .btn {
        grid-column: 3;
        justify-self: start;
    }

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

    .s-process-hero__meta {
        align-self: end;
    }

    .s-process-hero__text {
        display: flex;
        flex-direction: column;
        gap: 40px;
        max-width: 541px;
    }

    .s-process-hero__photo {
        aspect-ratio: 1440 / 607;
    }


    /* ──────────── 5 · PROCESS & INSURANCE ────────
       GRID: two columns
       ──────────────────────────────────────────────── */
    .s-process__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ds-gap);
    }


    /* ──────────── 6 · FOOTER ────────────────────
       GRID: photos (3-col), links (4-col), bottom
       HARD-FREE: big brand text (bleeds off canvas)
       ──────────────────────────────────────────────── */
    .s-footer__photos {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--ds-gap);
    }

    .s-footer__photo {
        aspect-ratio: 440 / 340;
    }

    .s-footer__photo:nth-child(3) img {
        transform: scale(2);
    }

    .s-footer__links {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
    }

    .s-footer__links>div {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .s-footer__list {
        line-height: 1.6 !important;
    }

    .s-footer__bottom {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
    }

    .s-footer__bottom span:last-child {
        grid-column: 4;
        text-align: right;
    }

    /* HARD-FREE: big brand — full viewport width, bleeds both sides */
    .s-footer__brand {
        width: 100vw;
        margin-left: calc(-1 * var(--ds-edge));
        overflow: hidden;
        margin-top: var(--ds-space-4);
        text-align: center;
    }

    .s-footer__brand .t-brand-big {
        display: block;
        white-space: nowrap;
    }


    /* ──────────── RESPONSIVE ────────────────────── */
    @media (max-width: 1024px) {

        /* Hero: 2 columns, rearrange */
        .s-hero {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto 1fr auto auto;
        }

        .s-hero__brand {
            grid-column: 1;
            grid-row: 1;
        }

        .s-hero__nav-link {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            margin-right: 20px;
        }

        .s-hero__nav-btn {
            display: none;
        }

        .s-hero__headline {
            grid-column: 1 / -1;
            grid-row: 2;
            max-width: 100%;
        }

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

        .s-hero__meta2 {
            grid-column: 2;
            grid-row: 3;
        }

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

        .s-hero__addr {
            grid-column: 1;
            grid-row: 5;
            margin-top: 20px;
        }

        .s-hero__contact {
            grid-column: 2;
            grid-row: 5;
            margin-top: 20px;
        }

        /* Grids → single column on tablet */
        .s-services__grid,
        .s-process__grid {
            grid-template-columns: 1fr;
            row-gap: var(--ds-space-3);
        }

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

        /* Compact rows on mobile */
        .service-row,
        .cred-row {
            padding-block: 12px;
            gap: 12px;
        }

        /* Arrows: always right-aligned */
        .row-arrow {
            justify-self: end;
        }

        /* Why cards: 2-col on tablet, scroll on phone */
        .s-services__why {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-3);
        }

        /* Footer photos: 2 on top, 1 below */
        .s-footer__photos {
            grid-template-columns: repeat(2, 1fr);
            row-gap: var(--ds-space-2);
        }

        .s-footer__photo:nth-child(3) {
            grid-column: 1 / -1;
        }

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

        /* Case study canvas: smart flow */
        .s-case__canvas {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--ds-space-2);
        }

        .s-case__big-photo {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 460 / 489;
            grid-column: 1 / -1;
        }

        .s-case__small-photo {
            position: static !important;
            width: 100% !important;
            aspect-ratio: 200 / 160;
        }

        .s-case__caption {
            position: static !important;
            width: 100% !important;
        }

        .s-case__bottom-block {
            position: static !important;
            width: 100% !important;
            grid-column: 1 / -1;
        }

        /* Case top */
        .s-case__top {
            grid-template-columns: 1fr;
            row-gap: var(--ds-space-2);
        }

        /* Process hero nav */
        .s-process-hero__nav {
            grid-template-columns: 1fr auto;
        }

        .s-process-hero__nav .btn {
            grid-column: auto;
        }
    }

    @media (max-width: 640px) {

        /* Hero: full-screen with BG image */
        .s-hero {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr auto auto auto auto;
            min-height: 100svh;
            row-gap: 0;
            padding-block: 20px 24px;
            overflow: hidden;
        }

        .s-hero__brand {
            grid-column: 1;
            grid-row: 1;
        }

        .s-hero__nav-link {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            text-align: right;
            font-size: 12px;
            margin-right: 0;
        }

        .s-hero__nav-btn {
            display: inline-flex !important;
            grid-column: 1;
            grid-row: 3;
            align-self: start;
            justify-self: start;
            font-size: 12px;
            padding: 10px 20px;
            margin-top: var(--ds-space-2);
        }

        .s-hero__headline {
            grid-column: 1 / -1;
            grid-row: 2;
            max-width: 100%;
            align-self: start;
            margin-top: var(--ds-space-2);
        }

        .s-hero__meta1 {
            grid-column: 1;
            grid-row: 4;
            margin-top: 0;
            align-self: end;
        }

        .s-hero__meta2 {
            grid-column: 2;
            grid-row: 4;
            justify-self: end;
            align-self: end;
        }

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

        .s-hero__addr {
            grid-column: 1;
            grid-row: 6;
            margin-top: var(--ds-space-2);
        }

        .s-hero__contact {
            grid-column: 2;
            grid-row: 6;
            margin-top: var(--ds-space-2);
            justify-self: end;
        }

        /* BG image: absolute with extra height for Safari toolbar */
        .s-hero__bg {
            position: absolute !important;
            width: 130% !important;
            height: calc(100% + 50px) !important;
            left: -15% !important;
            top: -25px !important;
            z-index: 0 !important;
        }

        /* Why cards: single column on phone */
        .s-services__why {
            grid-template-columns: 1fr;
            row-gap: var(--ds-space-3);
        }

        /* Footer photos: single column */
        .s-footer__photos {
            grid-template-columns: 1fr 1fr;
        }

        /* Footer links: 2 columns */
        .s-footer__links {
            grid-template-columns: repeat(2, 1fr);
        }

        /* Footer bottom: spread out */
        .s-footer__bottom {
            grid-template-columns: 1fr 1fr;
            row-gap: 12px;
        }

        .s-footer__bottom span:last-child {
            grid-column: 1 / -1;
            text-align: left;
        }

        /* Process hero nav: stack */
        .s-process-hero__nav {
            grid-template-columns: 1fr;
            row-gap: var(--ds-space-2);
        }

        .s-process-hero__nav .btn {
            justify-self: start;
        }

        /* Process hero text smaller */
        .s-process-hero__text {
            gap: 20px;
        }
    }
}