@font-face {
            font-family: 'Apercu';
            src: url('../fonts/ApercuPro.woff2') format('woff2'),
                url('assets/fonts/apercu.otf') format('opentype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Apercu';
            src: url('../fonts/ApercuPro-Medium.woff2') format('woff2'),
                url('assets/fonts/apercu-medium.otf') format('opentype');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Apercu';
            src: url('../fonts/ApercuPro-Bold.woff2') format('woff2'),
                url('assets/fonts/apercu-bold.otf') format('opentype');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        /* ─── TOKENS ─────────────────────────────────────────────────────────── */
        :root {
            --cream: #f2efe6;
            --sand: #c9b896;
            --olive: #6f7a58;
            --ink: #666557;
            --muted: #888;
            --line: #e0d9cc;
            --font-display: 'Apercu', -apple-system, sans-serif;
            --font-body: 'Apercu', -apple-system, sans-serif;
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: var(--font-body);
            color: var(--ink);
            background: #f2efe6;
            line-height: 1.6;
            overflow-x: hidden;
        }

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

        a {
            text-decoration: none;
            color: inherit
        }

        /* ─── ABOUT PAGE WRAPPER ─────────────────────────────────────────────── */

        /* ═══════════════════════════════════════════════════════════════════════
        SECTION 1 — HERO SPLIT
        Left: two portrait photos stacked / right: tag + heading + body
        ═══════════════════════════════════════════════════════════════════════ */
        .about-hero {
            display: grid;
            grid-template-columns: 50fr 50fr;
            /* foto kiri lebih lebar */
            width: 100%;
            min-height: calc(100vh - 90px);
        }

        .hero-photos {
            position: relative;
            overflow: hidden;
            background: #c8c0b5;
            /* HAPUS semua padding, biarkan foto edge-to-edge */
        }

        .hero-photo-main {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
        }

        .hero-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Padding dalam dari tepi teks ke kanan, bukan dari tepi kolom */
            padding: 80px 50px 80px 50px;
            background: #f2efe6;
        }

        .hero-tag {
            font-size: 30px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #979684;
            margin-bottom: 28px;
        }

        .hero-heading {
            font-family: var(--font-display);
            font-size: clamp(28px, 3.2vw, 48px);
            font-weight: 400;
            /* Apercu regular — sama persis kayak gambar */
            line-height: 1.15;
            color: var(--ink);
            margin-bottom: 32px;
            max-width: 480px;
            letter-spacing: -0.01em;
        }

        .hero-body {
            font-size: 20px;
            line-height: 1.75;
            color: #4a4035;
            max-width: 100%;
            /* narrow column supaya tiap baris pendek kayak di gambar */
        }

        .hero-body p+p {
            margin-top: 16px
        }


        /* ═══════════════════════════════════════════════════════════════════════
        SECTION 2 — MATERIAL BANNER
        Full-width photo with big word overlay + caption below
        ═══════════════════════════════════════════════════════════════════════ */
        .material-section {
            position: relative
        }

        .material-banner {
            position: relative;
            width: 100%;
            height: 52vw;
            max-height: 640px;
            min-height: 320px;
            overflow: hidden;
            background: #1a1a18;
        }

        .material-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: .82;
            transition: transform 8s ease;
        }

        .material-banner:hover .material-bg {
            transform: scale(1.03)
        }

        .material-bg-placeholder {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, #2a2723 0%, #1a1916 100%);
        }

        /* "MATERIAL" overlay word */
        .material-word {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: clamp(60px, 12vw, 120px);
            font-weight: 500;
            letter-spacing: 0.12em;
            color: rgba(255, 255, 255, .92);
            text-transform: uppercase;
            pointer-events: none;
            /* subtle text shadow so it reads on any bg */
            text-shadow: 0 4px 40px rgba(0, 0, 0, .4);
            z-index: 2;
        }

        /* Caption bar below the banner */
        .material-caption {
            background: #f2efe6;
            padding: 60px 48px;
            text-align: center;
        }

        .material-caption p {
            font-size: 25px;
            line-height: 1.8;
            color: #4a4035;
            margin: 0 auto;
        }


        /* ═══════════════════════════════════════════════════════════════════════
   SECTION 3 — COLLECTIONS DYNAMIC ROWS
═══════════════════════════════════════════════════════════════════════ */
.collections-section {
    width: 100%;
}

.col-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
    align-items: stretch;
}

/* Even: copy kiri, foto kanan */
.col-row--photo-right .col-row-copy  { order: 1 }
.col-row--photo-right .col-row-photo { order: 2 }

/* Odd: foto kiri, copy kanan */
.col-row--photo-left .col-row-photo  { order: 1 }
.col-row--photo-left .col-row-copy   { order: 2 }

.col-row-copy {
    padding: 80px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #e1d9ce;
}

.col-row-photo {
    position: relative;
    overflow: hidden;
    background: #c0b8ae;
    min-height: 500px;
}

.col-row-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .8s cubic-bezier(.4,0,.2,1);
}

.collection-photo-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ddd9d0, #ccc8be);
}

/* Divider antar row */
.col-row + .col-row {
    border-top: 1px solid #e0d9cc;
}

/* Shared text styles (sama kayak sebelumnya) */
.collection-tag {
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}
.collection-heading {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 500;
    line-height: 1.0;
    color: var(--ink);
    margin-bottom: 24px;
    letter-spacing: 0.05em;
}
.collection-body {
    font-size: 17px;
    line-height: 1.85;
    color: #959684;
    margin-bottom: 36px;
    text-align: justify;
}
.collection-body p + p { margin-top: 14px }
.collection-cta {
    display: inline-block;
    align-self: flex-start;
    padding: 13px 28px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background .25s, color .25s;
}
.collection-cta:hover {
    background: var(--ink);
    color: #fff;
}

        /* ================================
   RESPONSIVE — SMALL LAPTOP (≤ 1280px)
================================ */
@media (max-width: 1280px) {
    .about-hero         { min-height: calc(100vh - 90px) }
    .hero-copy          { padding: 60px 40px }
    .hero-tag           { font-size: 22px; margin-bottom: 20px }
    .hero-heading       { font-size: clamp(24px, 2.8vw, 38px) }
    .hero-body          { font-size: 16px }

    .material-banner    { max-height: 560px }
    .material-caption   { padding: 40px 48px }
    .material-caption p { font-size: 18px }

    .collection-inner   { min-height: 60vh }
    .collection-copy    { padding: 60px 40px }
    .collection-tag     { font-size: 14px }
    .collection-heading { font-size: clamp(30px, 4vw, 52px) }
    .collection-body    { font-size: 15px }
    .collection-cta     { font-size: 12px; padding: 12px 24px }
}

/* ================================
   RESPONSIVE — MEDIUM LAPTOP (≤ 1024px)
   update dari yang sudah ada
================================ */
@media (max-width: 1024px) {
    .about-hero         { min-height: calc(100vh - 90px) }
    .hero-copy          { padding: 48px 36px }
    .hero-tag           { font-size: 18px; margin-bottom: 16px }
    .hero-heading       { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 20px }
    .hero-body          { font-size: 14px }

    .material-banner    { max-height: 480px }
    .material-caption   { padding: 32px 40px }
    .material-caption p { font-size: 15px }

    .collection-inner   { min-height: 55vh; gap: 0; padding: 0 }
    .collection-copy    { padding: 48px 36px }
    .collection-tag     { font-size: 12px; margin-bottom: 12px }
    .collection-heading { font-size: clamp(26px, 3.5vw, 44px); margin-bottom: 20px }
    .collection-body    { font-size: 13px; margin-bottom: 28px }
    .collection-cta     { font-size: 11px; padding: 11px 22px }
    .collection-photo   { min-height: 400px }
     .col-row-copy  { padding: 60px 36px }
    .col-row-photo { min-height: 400px }
}

        @media (max-width: 768px) {
            .about-hero {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .hero-photos {
                min-height: 55vw
            }

            .hero-copy {
                padding: 40px 28px
            }

            .material-word {
                font-size: clamp(48px, 14vw, 80px)
            }

            .material-caption {
                padding: 24px 28px
            }

            .collection-section {
                padding: 48px 0 60px
            }

            .collection-inner {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .collection-copy {
                padding: 40px 24px;
            }

            .collection-photo {
                min-height: 60vw;
                aspect-ratio: 4/3;
            }

            /* mobile: foto di atas, teks di bawah */
            .collection-photo {
                order: -1
            }
            .col-row {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    /* Mobile: foto selalu di atas, copy di bawah */
    .col-row--photo-right .col-row-photo,
    .col-row--photo-left  .col-row-photo { order: 1 }
    .col-row--photo-right .col-row-copy,
    .col-row--photo-left  .col-row-copy  { order: 2 }

    .col-row-photo { min-height: 60vw; aspect-ratio: 4/3 }
    .col-row-copy  { padding: 40px 24px }
        }

        @media (max-width: 520px) {
            .hero-copy {
                padding: 32px 20px
            }

            .hero-heading {
                font-size: 22px
            }

            .collection-heading {
                font-size: 32px
            }

            .material-caption {
                padding: 20px 20px
            }
             .collection-heading { font-size: 28px }
    .collection-body    { font-size: 15px }
        }
/* \u2500\u2500 MOBILE: hero-body justify + material-caption kecil & center \u2500\u2500 */
@media (max-width: 768px) {
    .hero-body {
        text-align: justify;
    }
    .material-caption p {
        font-size: 13px;
        text-align: center;
    }
}