/* ===== Local Custom Fonts ===== */

@font-face {
    font-family: 'CONDENSO FONT';
    src: url('fonts/Condenso Demo.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Huf Script';
    src: url('fonts/Huf Script Font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gelato Typewriter';
    src: url('fonts/Gelato Typewriter/GelatoTypewriter-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gelato Typewriter';
    src: url('fonts/Gelato Typewriter/GelatoTypewriter-ExtraLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gelato Typewriter';
    src: url('fonts/Gelato Typewriter/GelatoTypewriter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gelato Typewriter';
    src: url('fonts/Gelato Typewriter/GelatoTypewriter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== Reset ===== */

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

:root {
    --dark-brown: #1e0f0a;
    --tan: #8b6347;
    --light-tan: #c49a72;
    --coral: #e07050;
    --cream: #d4b896;
    --parchment: #ede8d8;
    --pink: #c9607a;
    --olive: #6b7a3a;
    --red-orange: #d94f2b;
    --stamp-pink: #c97a9a;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    font-family: 'Gelato Typewriter', sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding-top: 288px;
    /* Offset for the fixed header */
    background-color: var(--dark-brown);
    /* Matches solid header color to hide padding gap */
}

/* ============================================================
   SECTION 1 · BRAND BOOK COVER
   ============================================================ */

/* .section-cover {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: calc(72px + 3vw) 8vw 5vw 8vw;
    overflow: hidden;
    background: var(--dark-brown);
}

.texture {
    position: absolute;
    inset: 0;
    background-image: url("assets/texture-brandbook.png");
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    mix-blend-mode: overlay;
}

.vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 4, 2, 0.75) 100%);
    pointer-events: none;
    z-index: 2;
}

.glow {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    background: radial-gradient(ellipse, rgba(140, 80, 40, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.divider {
    position: absolute;
    left: 50%;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--tan) 30%, var(--tan) 70%, transparent);
    opacity: 0.25;
    z-index: 5;
    transform: translateX(-50%);
} */

/* ── LEFT: logo section ── */
/* .logo-section {
    position: relative;
    z-index: 10;
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
}

.brand-book-logo {
    width: clamp(160px, 28vw, 380px);
}

.logo-text-part {
    width: 100%;
    height: auto;
    display: block; */
/* Invert dark-brown SVG fills to cream/white on dark background */
/* filter: brightness(0) invert(1) drop-shadow(0 3px 14px rgba(0, 0, 0, 0.6));
} */

/* .coconuts {
    display: flex;
    gap: 0.4em;
    margin-left: 1em;
}

.coconut {
    font-size: clamp(1.2rem, 2.5vw, 2.8rem);
    opacity: 0.75;
    filter: sepia(1) brightness(0.6);
    animation: bob 3s ease-in-out infinite;
}

.coconut:nth-child(2) {
    animation-delay: 0.4s;
}

.coconut:nth-child(3) {
    animation-delay: 0.8s;
    font-size: clamp(0.9rem, 1.8vw, 2rem);
}

.logo-co {
    font-family: 'Huf Script', cursive;
    font-size: clamp(1rem, 2vw, 2rem);
    color: var(--tan);
    opacity: 0.6;
    margin-left: 1.2em;
    margin-top: -0.3em;
} */



/* ── RIGHT: title section ── */
/* .title-section {
    position: relative;
    z-index: 10;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.brand-book-title {
    font-family: 'CONDENSO FONT', sans-serif;
    line-height: 0.88;
    color: var(--cream);
    text-align: right;
    letter-spacing: 0.04em;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4), 8px 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0.82;
}

.brand-line,
.book-line {
    font-size: clamp(5rem, 13vw, 14rem);
    display: block;
}



.tagline {
    font-family: 'Huf Script', cursive;
    font-size: clamp(1.1rem, 2.2vw, 2.2rem);
    color: var(--coral);
    margin-top: 1.2em;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: right;
} */

/* ── ANIMATIONS ── */
/* @keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
} */

/* ── RESPONSIVE ── */
/* @media (max-width: 900px) {
    .section-cover {
        flex-direction: column;
        justify-content: center;
        gap: 6vw;
        padding: calc(72px + 6vw) 6vw 10vw 6vw;
    }

    .logo-section,
    .title-section {
        flex: 0 0 auto;
        width: 100%;
        align-items: flex-start;
    }

    .title-section {
        align-items: flex-start;
    }

    .brand-book-title {
        text-align: left;
    }

    .tagline {
        text-align: left;
    }

    .divider {
        display: none;
    }

    .brand-line,
    .book-line {
        font-size: clamp(4rem, 18vw, 9rem);
    } */
/* } */

/* ============================================================
   SECTION 2 · INDEX
   ============================================================ */
.section-index {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--parchment);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 6vw 7vw;
    overflow: hidden;
}

.section-index::before {
    content: '';
    position: absolute;
    inset: 0;

    background-image: url("assets/coco boat coloured.png");
    /* FIXED */
    background-size: cover;
    /* optional but recommended */
    background-position: center;
    /* optional */
    background-repeat: no-repeat;
    /* optional */

    pointer-events: none;
    opacity: 0.9;
    mix-blend-mode: multiply;
    z-index: 0;
}

.index-word {
    position: relative;
    z-index: 1;
    font-family: 'CONDENSO FONT', serif;
    /* ← change this */
    font-size: clamp(5rem, 18vw, 16rem);
    color: var(--pink);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    /* ← add this */

    opacity: 0;
    transform: translateX(-60px);
    animation: slideInIndex 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes slideInIndex {
    0% {
        opacity: 0;
        transform: translateX(-60px);
        letter-spacing: 0.1em;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        letter-spacing: -0.01em;
    }
}

/* Capital I pops in after */
.cap-idx {
    display: inline-block;
    font-size: 1.15em;
    line-height: 1;
    opacity: 0;
    animation: capPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards;
}

@keyframes capPop {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }

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

/* ============================================================
   SECTION 3 · INTRODUCTION
   ============================================================ */

.section-intro {
    position: relative;
    width: 100%;
    min-height: auto;
    padding-bottom: 18vw;
    /* Fixed padding bottom for stamps instead of forcing 100vh height */
    background-color: #eedfcc;
    background-image: url('assets/texture-introduction.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.intro-top {
    display: grid;
    grid-template-columns: auto 28px 1fr 1fr;
    gap: 0 2.5vw;
    align-items: start;
    padding: 4vw 5vw 2vw 5vw;
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
}

.fun-fact {
    font-family: 'Gelato Typewriter', monospace;
    font-size: clamp(0.9rem, 1.25vw, 1.2rem);
    line-height: 1.65;
    color: #f5ead0;
    text-align: justify;
    background: var(--olive);
    padding: 1.4em 1.6em;
    max-width: clamp(220px, 25vw, 320px);
}

.fun-fact-title {
    font-family: 'Huf Script', cursive;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    font-weight: 700;
    display: block;
    margin-bottom: 0.5em;
    color: #f5ead0;
}

.zig-divider {
    width: 14px;
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;

}

.zig-divider svg {
    width: 14px;
    height: 100%;
    min-height: 200px;
}

.intro-col {
    font-family: 'Gelato Typewriter', monospace;
    font-size: clamp(2rem, 2.4vw, 2rem);
    /* ← increased font size */
    line-height: 1.78;
    color: #2a1a10;
    text-align: justify;
    position: relative;
    top: 0px;
    /* ← move up (negative) or down (positive) */
    left: 0px;
    /* ← move left (negative) or right (positive) */
}

.intro-col strong {
    font-weight: 700;
}

.intro-bottom-wrap {
    position: relative;
    flex: 1;
    min-height: clamp(200px, 32vh, 380px);
}

.intro-title-wrap {
    position: absolute;
    top: 78%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    padding: 0 2vw;
    display: flex;
    align-items: center;
}

.intro-title {
    font-family: 'CONDENSO FONT', serif;
    font-size: clamp(5rem, 14vw, 17rem);
    color: #d94f2b;
    line-height: 1;
    letter-spacing: 0.01em;
    display: block;
    width: 100%;
    white-space: nowrap;
    user-select: none;
    text-transform: lowercase;
}

.cap-i {
    font-size: 1.15em;
    line-height: 1;
}

.stamp-wrap {
    position: absolute;
    bottom: 6vw;
    left: 30%;
    transform: translateX(-50%);
    width: clamp(120px, 15vw, 200px);
    height: clamp(120px, 15vw, 200px);
    z-index: 6;
}

.stamp-img {
    width: 300%;
    height: 300%;
    object-fit: contain;
    display: block;
    opacity: 0.55;
    filter: grayscale(0.3);
}

.intro-subtitle-wrap {
    position: absolute;
    bottom: clamp(16px, 3vw, 40px);
    left: 4vw;
    z-index: 3;
}

.intro-subtitle {
    font-family: 'Huf Script', cursive;
    font-size: clamp(1.2rem, 2.5vw, 3rem);
    color: var(--olive);
    display: block;
    line-height: 1.1;
    font-style: italic;
}

.gift-wrap {
    position: absolute;
    bottom: -7vw;
    left: 60%;
    transform: translateX(-10%) rotate(10deg);
    width: clamp(500px, 50vw, 700px);
    z-index: 5;
    pointer-events: none;
}

.gift-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0.75;
}

@media (max-width: 900px) {
    .intro-top {
        grid-template-columns: 1fr;
        gap: 4vw 0;
    }

    .zig-divider {
        display: none;
    }

    .fun-fact {
        max-width: 100%;
    }

    .intro-title {
        font-size: clamp(3.5rem, 16vw, 8rem);
        letter-spacing: -0.01em;
    }

    .gift-wrap {
        width: clamp(80px, 20vw, 130px);
    }
}

/* ============================================================
   SECTION 4 · BRAND PHILOSOPHY
   ============================================================ */

.section-philosophy {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    margin-left: calc(50% - 50vw);

}

.philosophy-bg-img {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
    transform: translateX(-50%) scaleY(1.15);
    left: 50%;

}

/* ── MAIN LAYOUT ── */
.philosophy-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 4rem);
    width: 100%;
    padding: 5vh clamp(2.5rem, 5vw, 6rem) clamp(3rem, 5vw, 5rem);
    margin: 0 auto;
}

/* ── LEFT: title block, no card ── */
.philosophy-left {
    flex: 0 0 auto;
    width: clamp(400px, 60%, 700px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.philosophy-title {
    font-family: 'CONDENSO FONT', serif;
    font-weight: 700;
    font-size: clamp(4rem, 9vw, 9rem);
    white-space: nowrap;
    color: #607236;
    line-height: 0.88;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
}

.philosophy-subtitle {
    font-family: 'Huf Script', cursive;
    display: block;
    margin-top: 1rem;
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    color: #d94f2b;
    line-height: 1.35;
    font-style: italic;
}

.philosophy-stamp {
    margin-top: 1.5rem;
    width: clamp(70px, 8vw, 110px);
}

.philosophy-stamp img {
    width: 300%;
    height: auto;
    opacity: 0.55;
    filter: grayscale(0.2);
    position: relative;
    top: -50px;
    /* ← move up (negative) or down (positive) */
    left: 300px;
    /* ← move left (negative) or right (positive) */
}

/* ── RIGHT: two columns side-by-side ── */
.philosophy-right {
    flex: 1 1 auto;
    max-width: 1300px;
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-left: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    align-items: flex-start;
    align-self: flex-end;
    margin-bottom: clamp(1rem, 3vw, 3rem);
}

.philosophy-col {
    flex: 1 1 0;
    color: #1f1410;
    font-family: 'Gelato Typewriter', monospace;
    font-size: clamp(0.78rem, 1.1vw, 1.05rem);
    line-height: 1.65;
    text-align: center;
    max-width: 50%;
    padding: 0 clamp(0.8rem, 1.4vw, 1.4rem);
    background: none;
    border-radius: 0;
}

/* Desktop-only: constrain text to a fixed area */
@media (min-width: 901px) {
    .philosophy-right {
        max-height: 50vh;
        overflow: hidden;
    }

    .philosophy-col {
        overflow: hidden;
    }
}

/* ── zigzag divider BETWEEN the two columns ── */
.phil-zig {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.phil-zig svg {
    width: 12px;
    height: 100%;
    min-height: 160px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .section-philosophy {
        min-height: auto;
        padding: 2rem 0 0 0;
    }

    .philosophy-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: clamp(1.5rem, 5vw, 3rem);
        padding-bottom: clamp(6rem, 18vw, 12rem);
    }

    .philosophy-left {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .philosophy-title {
        font-size: clamp(3rem, 12vw, 5rem);
        white-space: normal;
    }

    .philosophy-subtitle {
        font-size: clamp(1rem, 4vw, 1.6rem);
    }

    .philosophy-right {
        max-width: 100%;
        margin-left: 0;
        flex-direction: column;
        gap: 1rem;
        max-height: 240px;
        overflow-y: auto;
        padding: 1rem;
        background: rgba(237, 232, 216, 0.88);
        border-radius: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .philosophy-col {
        max-width: 100%;
        text-align: left;
        padding: 0.5rem;
    }

    /* scrollbar styling */
    .philosophy-right::-webkit-scrollbar {
        width: 4px;
    }

    .philosophy-right::-webkit-scrollbar-thumb {
        background: #d94f2b;
        border-radius: 10px;
    }

    .philosophy-right::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    .phil-zig {
        display: none;
    }
}

/* ═══════════════════════════════
         SECTION 4 · Ends
         ═══════════════════════════════  */

/* ═══════════════════════════════
         SECTION 5 · we promise you
         ═══════════════════════════════  */
/* ══════════════════════════════
   LEFT PANEL – cream paper texture
══════════════════════════════ */
.bv-left {
    position: absolute;
    inset: 0;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAHaCAYAAADhZ1RtAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nOzdd3MUebbv668sCNd+era5N2Kfl3be9z17enZPN14YSUjInT9WrpupQtAYmVLqeSIqSggBJUFDdX5qrd9Kkv+d5H8l2QoAAAAAAAAAN9G7JP9n9bofBQAAAAAAAAAXQwAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCYEYAAAAAAAAICZEIABAAAAAAAAZkIABgAAAAAAAJgJARgAAAAAAABgJgRgAAAAAAAAgJkQgAEAAAAAAABmQgAGAAAAAAAAmAkBGAAAAAAAAGAmBGAAAAAAAACAmRCAAQAAAAAAAGZCAAYAAAAAAACYCQEYAAAAAAAAYCbWr/sBAPDNTpOcLLxvNcnKNTwWAAAAAADgGgnAADfTSSr8Hic5SnI43Cf1d/vGcFuNGAwAAAAAALcGAAAAAAAA');
    background-color: #e7dcc4;
    background-image: url('assets/texture-introduction.png');
    background-size: cover;
    background-position: center center;
    clip-path: polygon(0.0% 0.0%, 48.2% 0.0%, 48.2% -0.0%, 48.3% 1.1%, 47.3% 2.0%, 47.4% 3.6%, 46.3% 4.1%, 45.3% 4.7%, 45.6% 5.9%, 44.9% 7.0%, 45.5% 8.0%, 45.7% 9.1%, 45.3% 10.2%, 44.9% 11.3%, 45.2% 12.5%, 45.1% 13.7%, 44.5% 14.7%, 44.3% 15.9%, 44.5% 17.1%, 44.3% 18.2%, 44.0% 19.4%, 44.3% 20.6%, 44.5% 21.9%, 44.8% 23.1%, 44.4% 24.4%, 44.5% 25.7%, 44.7% 26.9%, 45.2% 28.1%, 45.7% 29.2%, 46.0% 30.3%, 46.2% 31.4%, 47.2% 32.1%, 46.8% 33.4%, 47.3% 34.4%, 47.8% 35.5%, 47.2% 36.8%, 47.4% 38.0%, 48.6% 38.7%, 48.8% 39.9%, 49.2% 41.0%, 50.1% 41.8%, 50.3% 43.0%, 50.4% 44.2%, 51.2% 45.2%, 51.7% 46.4%, 51.2% 47.6%, 51.3% 48.8%, 51.5% 50.0%, 52.1% 51.0%, 53.0% 51.7%, 52.9% 53.1%, 53.8% 53.9%, 53.8% 55.2%, 53.9% 56.4%, 54.3% 57.5%, 54.3% 58.7%, 55.4% 59.6%, 54.7% 61.0%, 55.6% 62.1%, 55.0% 63.4%, 55.2% 64.5%, 55.9% 65.7%, 55.2% 66.9%, 55.6% 68.1%, 55.7% 69.3%, 55.3% 70.5%, 55.9% 71.7%, 55.6% 72.9%, 55.9% 74.1%, 55.3% 75.3%, 55.4% 76.5%, 55.8% 77.6%, 56.0% 78.8%, 55.5% 79.9%, 55.3% 81.1%, 55.7% 82.3%, 55.0% 83.3%, 55.6% 84.6%, 55.3% 85.7%, 55.1% 86.9%, 54.2% 87.8%, 54.1% 89.0%, 54.5% 90.3%, 54.4% 91.5%, 54.4% 92.7%, 53.6% 93.8%, 53.6% 95.0%, 53.9% 96.2%, 53.3% 97.4%, 53.6% 98.6%, 53.4% 99.8%, 53.4% 100.0%, 53.4% 100.0%, 0.0% 100.0%);
    z-index: 4;
}

/* palm leaf illustration */
.bv-leaf {
    position: absolute;
    top: -115px;
    left: -20px;
    width: 680px;
    height: auto;
    opacity: .75;
    z-index: 2;
    display: block;
    object-fit: contain;
    pointer-events: none;
    mix-blend-mode: multiply;
    transform: rotate(165deg);
}

.bv-subheading {
    font-family: 'Huf Script', cursive;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #5a3522;
    line-height: 1.2;
}

.bv-main-heading {
    font-family: 'CONDENSO FONT', sans-serif;
    font-size: clamp(3rem, 7vw, 6.5rem);
    color: var(--pink);
    line-height: .88;
    letter-spacing: -.01em;
    text-shadow: 3px 3px 0 rgba(100, 20, 40, .12);
}

/* ══════════════════════════════
   RIGHT PANEL – dark JPEG texture
══════════════════════════════ */
.bv-right {
    position: absolute;
    inset: 0;
    background-color: #c8b99a;
    background-image: url('assets/texture-introduction.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
    clip-path: polygon(48.2% 0.0%, 100.0% 0.0%, 100.0% 100.0%, 53.4% 100.0%, 53.4% 100.0%, 53.4% 99.8%, 53.6% 98.6%, 53.3% 97.4%, 53.9% 96.2%, 53.6% 95.0%, 53.6% 93.8%, 54.4% 92.7%, 54.4% 91.5%, 54.5% 90.3%, 54.1% 89.0%, 54.2% 87.8%, 55.1% 86.9%, 55.3% 85.7%, 55.6% 84.6%, 55.0% 83.3%, 55.7% 82.3%, 55.3% 81.1%, 55.5% 79.9%, 56.0% 78.8%, 55.8% 77.6%, 55.4% 76.5%, 55.3% 75.3%, 55.9% 74.1%, 55.6% 72.9%, 55.9% 71.7%, 55.3% 70.5%, 55.7% 69.3%, 55.6% 68.1%, 55.2% 66.9%, 55.9% 65.7%, 55.2% 64.5%, 55.0% 63.4%, 55.6% 62.1%, 54.7% 61.0%, 55.4% 59.6%, 54.3% 58.7%, 54.3% 57.5%, 53.9% 56.4%, 53.8% 55.2%, 53.8% 53.9%, 52.9% 53.1%, 53.0% 51.7%, 52.1% 51.0%, 51.5% 50.0%, 51.3% 48.8%, 51.2% 47.6%, 51.7% 46.4%, 51.2% 45.2%, 50.4% 44.2%, 50.3% 43.0%, 50.1% 41.8%, 49.2% 41.0%, 48.8% 39.9%, 48.6% 38.7%, 47.4% 38.0%, 47.2% 36.8%, 47.8% 35.5%, 47.3% 34.4%, 46.8% 33.4%, 47.2% 32.1%, 46.2% 31.4%, 46.0% 30.3%, 45.7% 29.2%, 45.2% 28.1%, 44.7% 26.9%, 44.5% 25.7%, 44.4% 24.4%, 44.8% 23.1%, 44.5% 21.9%, 44.3% 20.6%, 44.0% 19.4%, 44.3% 18.2%, 44.5% 17.1%, 44.3% 15.9%, 44.5% 14.7%, 45.1% 13.7%, 45.2% 12.5%, 44.9% 11.3%, 45.3% 10.2%, 45.7% 9.1%, 45.5% 8.0%, 44.9% 7.0%, 45.6% 5.9%, 45.3% 4.7%, 46.3% 4.1%, 47.4% 3.6%, 47.3% 2.0%, 48.3% 1.1%, 48.2% -0.0%);
    z-index: 3;
}

.bv-right-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(180deg) scale(1.5);
    transform-origin: center;
}



/* ── values layout ── */
.bv-values-wrap {
    position: absolute;
    inset: 0;
    padding: 5vw 5vw 24px 48%;
    /* reduced left padding to give more room; right padding responsive */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 3;
    overflow: hidden;
    /* prevent top clip */

}

.title-with-coco {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2rem;
    margin-bottom: 0.4em;
}

.bv-coco-decor {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

.bv-coco-decor.top-center {
    top: 6vh;
    left: 50%;
    transform: translateX(-50%);
}

.bv-coco-decor.bottom-left {
    bottom: 12vh;
    left: 12vw;
}

.bv-coco-decor.bottom-right {
    bottom: 12vh;
    right: 22vw;
}

.coco-anim {
    font-size: clamp(1.2rem, 1.8vw, 2.2rem);
    animation: gentle-float 4s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes gentle-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-8px) rotate(4deg);
    }

    66% {
        transform: translateY(4px) rotate(-3deg);
    }
}

/* ── notice prose block ── */
.bv-notice {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    text-align: right;
}

.bv-notice-title {
    font-family: 'Huf Script', cursive;
    font-size: clamp(1.9rem, 2.5vw, 2.9rem);
    color: #e8623a;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0;
}

.bv-notice-line {
    font-family: 'Gelato Typewriter', monospace;
    font-size: clamp(0.85rem, 1.2vw, 1.3rem);
    color: #000000;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin: 0;
}

.bv-notice-closing {
    margin-top: 0.6em;
    font-style: italic;
    opacity: 0.85;
    line-height: 1.75;
}

/* ══════════════════════════════
   STAMP centred on seam
══════════════════════════════ */
.bv-stamp {
    position: absolute;
    top: 65%;
    left: 35%;
    transform: translate(-70%, -50%);
    z-index: 4;
    width: 300px;
    height: 300px;
    pointer-events: none;
    opacity: .35;
}

.bv-stamp img {
    width: 200%;
    height: 200%;
    display: block;
    object-fit: contain;
}

/* section 5 
end */



/* ============================================================
   SECTION 6 · BRAND NON-NEGOTIABLES
   Top tear  → NCC_texture_assets_4.svg  (viewBox 0 0 1920 342)
   Bottom tear → NCC_texture_assets_5.svg (viewBox 0 0 1920 203)
   ============================================================ */

.section-non-negotiables {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 4vw 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #eedfcc;
    background-image: url('assets/texture-introduction.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* background image */
.nn-bg-img {
    position: absolute;
    inset: 0;
    width: 120%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.nn-top-img {
    position: absolute;
    left: 2vw;
    top: 2vw;
    width: clamp(130px, 30vw, 360px);
    height: auto;
    object-fit: contain;
    opacity: 0.5;
    transform: rotate(155deg);
}

.nn-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    z-index: 2;
    padding-right: 5vw;
}

.nn-subtitle {
    font-family: 'Huf Script', cursive;
    font-size: clamp(3.5rem, 4.8vw, 5.5rem);
    color: var(--coral);
    text-align: right;
    transform: rotate(-3deg);
    margin: 0;
}

/* cream bottom */
.nn-bottom {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 2vw 5vw 8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    background: transparent;
    /* ← no background, shows section 6.png */
    justify-content: center;
    /* vertical centering */

}

.nn-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3.5vw;
    margin-left: auto;
    width: 80%;
    max-width: 900px;
    margin-top: 2vw;
    margin-right: auto;

    /* small adjustment only */
}

.nn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}

.nn-row-2 {
    justify-content: center;
}

.nn-item {
    font-family: 'Gelato Typewriter', monospace;
    font-weight: 700;
    font-size: clamp(0.75rem, 1.2vw, 1.1rem);
    color: var(--dark-brown);
    text-align: center;
    line-height: 1.5;
    flex: 1;
    max-width: 260px;
}

.nn-zag {
    width: clamp(6px, 1vw, 10px);
    height: clamp(50px, 6vw, 70px);
    flex-shrink: 0;
}

.nn-zag svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
}


.nn-stamp {
    position: absolute;
    bottom: 18%;
    right: 10%;
    width: clamp(120px, 16vw, 220px);
    height: clamp(120px, 16vw, 220px);
    z-index: 3;
    opacity: .45;
}

.nn-stamp img {
    width: 200%;
    height: 200%;
    object-fit: contain;
    border-radius: 50%;

}

/* responsive */
@media (max-width: 900px) {
    .nn-content {
        margin-left: 0;
        width: 100%;
        gap: 6vw;
    }

    .nn-row {
        flex-direction: column;
        gap: 4vw;
    }

    .nn-zag {
        transform: rotate(90deg);
    }

    .nn-stamp {
        bottom: 4%;
        right: 4%;
        opacity: 0.35;
    }
}

.footer-address {
    font-family: 'Gelato Typewriter', monospace;
    font-size: clamp(0.65rem, 0.85vw, 0.82rem);
    color: rgba(139, 99, 71, 0.6);
    line-height: 1.8;
    font-style: normal;
    margin-top: 0.8rem;
}



/* ── OUTER WRAPPER ── */
.bv-section {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    height: 100vh;
    overflow: visible;
    background-color: #eedfcc;
    background-image: url('assets/texture-introduction.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}