/* ─────────────────────────────────────────
       RESET & BASE
    ───────────────────────────────────────── */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --cream: #F5EDD7;
            --off-white: #FAF7F0;
            --chocolate: #2C1A0E;
            --dark: #0E0906;
            --hazelnut: #B8956A;
            --gold: #C8963E;
            --gold-light: #D9B070;
            --mid-brown: #6B4226;
            --text-muted: rgba(245, 237, 215, 0.55);

            --font: 'Lexend', sans-serif;
            --section-pad: clamp(88px, 12vw, 190px);
            --ease-premium: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
            --dur-slow: 1.3s;
            --dur-med: 0.8s;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: var(--font);
            background: var(--cream);
            color: var(--chocolate);
            line-height: 24px;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ─────────────────────────────────────────
       GRAIN OVERLAY
    ───────────────────────────────────────── */
        .grain {
            position: fixed;
            inset: 0;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
            opacity: 0.032;
            pointer-events: none;
            z-index: 9000;
        }

        /* ─────────────────────────────────────────
       SCROLLBAR
    ───────────────────────────────────────── */
        ::-webkit-scrollbar {
            width: 2px;
        }

        ::-webkit-scrollbar-track {
            background: var(--dark);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gold);
            border-radius: 2px;
        }

        /* ─────────────────────────────────────────
       NAVIGATION
    ───────────────────────────────────────── */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32px 64px;
            background: rgba(14, 9, 6, 0.83);
            transition: background var(--dur-med) var(--ease-premium),
                padding var(--dur-med) var(--ease-premium),
                backdrop-filter var(--dur-med);
        }

        .nav.scrolled {
            background: rgba(14, 9, 6, 0.88);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            padding: 20px 64px;
        }

        .nav-logo {
            text-decoration: none;
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }

        .nav-logo img {
            height: 40px;
            width: auto;
            display: block;
            filter: brightness(0) invert(1);
        }

        .nav-links {
            display: flex;
            gap: 36px;
            list-style: none;
        }

        .nav-links a {
            font-size: 0.68rem;
            font-weight: 300;
            letter-spacing: 0.16em;
            text-transform: capitalize;
            color: rgba(245, 237, 215, 0.7);
            text-decoration: none;
            transition: color 0.35s;
            position: relative;
            white-space: nowrap;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--gold);
            transition: width 0.4s var(--ease-premium);
        }

        .nav-links a:hover {
            color: var(--cream);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Submenu */
        .nav-links li.has-submenu {
            position: relative;
        }

        .nav-links .submenu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            background: rgba(14, 9, 6, .96);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(200, 150, 62, .15);
            padding: 18px 0 6px;
            min-width: 148px;
            list-style: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility .3s;
        }

        .nav-links li.has-submenu:hover .submenu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .submenu a {
            display: block;
            padding: 10px 20px;
            font-size: .62rem;
            font-weight: 300;
            letter-spacing: .14em;
            color: rgba(245, 237, 215, .58);
            white-space: nowrap;
            text-decoration: none;
            transition: color .25s, background .25s;
        }

        .submenu a::after {
            display: none !important;
        }

        .submenu a:hover,
        .submenu a.active {
            color: var(--cream);
            background: rgba(200, 150, 62, .07);
        }

        /* Language switcher */
        .nav-lang {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .nav-lang-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 26px;
            border-radius: 100px;
            background: var(--chocolate);
            color: var(--cream);
            font-family: var(--font);
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.3s;
        }

        .nav-lang-btn:hover {
            background: var(--mid-brown);
        }

        .nav-lang a {
            font-family: var(--font);
            font-size: 0.6rem;
            font-weight: 300;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(245, 237, 215, 0.5);
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-lang a:hover {
            color: var(--cream);
        }


    /* ── nav fits between 768 and 1200 ── */
    @media (max-width: 1200px) {
      .nav { padding: 26px 36px; }
      .nav.scrolled { padding: 16px 36px; }
      .nav-logo img { height: 34px; }
      .nav-links { gap: 22px; }
      .nav-links a { font-size: .62rem; letter-spacing: .1em; }
      .nav-lang { gap: 8px; }
    }
    @media (max-width: 980px) {
      .nav { padding: 22px 28px; }
      .nav.scrolled { padding: 14px 28px; }
      .nav-logo img { height: 30px; }
      .nav-links { gap: 14px; }
      .nav-links a { font-size: .58rem; letter-spacing: .04em; }
      .nav-lang-btn { width: 30px; height: 22px; }
    }


    /* ── MOBILE MENU ── */
    .nav-burger {
      display: none; position: relative; z-index: 2;
      width: 44px; height: 44px; margin-right: -12px;
      align-items: center; justify-content: center;
      background: none; border: 0; padding: 0; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-burger span {
      position: absolute; left: 11px; width: 22px; height: 1px;
      background: var(--cream); border-radius: 1px;
      transition: transform .45s var(--ease-spring);
    }
    .nav-burger span:nth-child(1) { transform: translateY(-4px); }
    .nav-burger span:nth-child(2) { transform: translateY(4px); }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

    .nav-mobile {
      position: fixed; inset: 0; z-index: 90;
      display: flex; flex-direction: column; justify-content: center;
      padding: 116px 28px 44px;
      background: rgba(14, 9, 6, .985);
      backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .45s var(--ease-premium), visibility .45s;
    }
    .nav-mobile.open { opacity: 1; visibility: visible; pointer-events: auto; }
    .nav-mobile-list { list-style: none; margin: 0; padding: 0; }
    .nav-mobile-list li { overflow: hidden; }
    .nav-mobile-list a {
      display: block; padding: 15px 0;
      font-family: var(--font); font-size: clamp(1.45rem, 7.5vw, 2rem);
      font-weight: 200; letter-spacing: -.02em; line-height: 1.15;
      color: rgba(245, 237, 215, .8); text-decoration: none;
      border-bottom: 1px solid rgba(245, 237, 215, .08);
      transform: translateY(115%);
      transition: transform .75s var(--ease-spring), color .3s;
    }
    .nav-mobile.open .nav-mobile-list a { transform: translateY(0); }
    .nav-mobile-list li:nth-child(1) a { transition-delay: .05s; }
    .nav-mobile-list li:nth-child(2) a { transition-delay: .10s; }
    .nav-mobile-list li:nth-child(3) a { transition-delay: .15s; }
    .nav-mobile-list li:nth-child(4) a { transition-delay: .20s; }
    .nav-mobile-list li:nth-child(5) a { transition-delay: .25s; }
    .nav-mobile-list li:nth-child(6) a { transition-delay: .30s; }
    .nav-mobile-list a.active { color: var(--gold-light); }
    .nav-mobile-foot {
      display: flex; align-items: center; gap: 20px; margin-top: 40px;
      opacity: 0; transition: opacity .5s .38s var(--ease-premium);
    }
    .nav-mobile.open .nav-mobile-foot { opacity: 1; }
    .nav-mobile-foot a {
      font-family: var(--font); font-size: .66rem; font-weight: 300;
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(245, 237, 215, .42); text-decoration: none; transition: color .3s;
    }
    .nav-mobile-foot a.is-current { color: var(--cream); }

    @media (max-width: 768px) { .nav-burger { display: flex; } }
    @media (min-width: 769px) { .nav-mobile { display: none; } }
    @media (prefers-reduced-motion: reduce) {
      .nav-mobile, .nav-mobile-list a, .nav-mobile-foot, .nav-burger span { transition-duration: .01ms; }
      .nav-mobile-list a { transform: none; }
    }

        /* ─────────────────────────────────────────
       HERO
    ───────────────────────────────────────── */
        .hero {
            position: relative;
            height: 100svh;
            min-height: 680px;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            background: var(--dark);
        }

        .hero-bg {
            position: absolute;
            inset: -12%;
            overflow: hidden;
            will-change: transform;
            transition: opacity 1s;
        }

        .hero-bg video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .hero-vignette {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(14, 9, 6, 0.1) 0%,
                    rgba(14, 9, 6, 0.05) 35%,
                    rgba(14, 9, 6, 0.6) 75%,
                    rgba(14, 9, 6, 0.88) 100%);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 0 64px 88px;
            width: 100%;
            max-width: 1300px;
        }

        .hero-eyebrow {
            display: block;
            font-size: 0.7rem;
            font-weight: 300;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: var(--gold-light);
            margin-bottom: 24px;
            opacity: 0;
            transform: translateY(16px);
            animation: fadeUp 1s 0.4s var(--ease-premium) forwards;
        }

        .hero-title {
            font-size: clamp(58px, 10vw, 148px);
            font-weight: 700;
            line-height: 0.88;
            color: var(--cream);
            letter-spacing: -0.025em;
        }

        .hero-title .line {
            display: block;
            overflow: hidden;
        }

        .hero-title .line-inner {
            display: block;
            opacity: 0;
            transform: translateY(110%);
            animation: slideUp 1.3s var(--ease-spring) forwards;
        }

        .hero-title .line:nth-child(1) .line-inner {
            animation-delay: 0.2s;
        }

        .hero-title .line:nth-child(2) .line-inner {
            animation-delay: 0.38s;
        }

        .hero-title .line:nth-child(3) .line-inner {
            animation-delay: 0.54s;
            color: var(--gold-light);
            font-weight: 200;
            font-style: italic;
        }

        .hero-meta {
            margin-top: 44px;
            display: flex;
            align-items: flex-end;
            gap: 48px;
        }

        .hero-subtitle {
            font-size: clamp(0.85rem, 1.1vw, 1rem);
            font-weight: 300;
            line-height: 1.8;
            color: rgba(245, 237, 215, 0.72);
            max-width: 400px;
            letter-spacing: 0.03em;
            opacity: 0;
            animation: fadeUp 1s 0.9s var(--ease-premium) forwards;
        }

        .hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            font-size: 0.72rem;
            font-weight: 400;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--cream);
            text-decoration: none;
            opacity: 0;
            animation: fadeUp 1s 1.1s var(--ease-premium) forwards;
            transition: gap 0.45s var(--ease-premium);
            flex-shrink: 0;
        }

        .hero-cta:hover {
            gap: 22px;
        }

        .hero-cta .cta-line {
            width: 48px;
            height: 1px;
            background: var(--gold);
            transition: width 0.45s var(--ease-premium);
        }

        .hero-cta:hover .cta-line {
            width: 72px;
        }

        .hero-scroll-indicator {
            position: absolute;
            right: 64px;
            bottom: 88px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            opacity: 0;
            animation: fadeUp 1s 1.4s var(--ease-premium) forwards;
        }

        .hero-scroll-indicator span {
            font-size: 0.6rem;
            font-weight: 300;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(245, 237, 215, 0.5);
            writing-mode: vertical-rl;
        }

        .scroll-thread {
            width: 1px;
            height: 64px;
            background: linear-gradient(to bottom, var(--gold), transparent);
            animation: threadPulse 2.4s ease-in-out infinite;
        }

        /* ─────────────────────────────────────────
       KEYFRAMES
    ───────────────────────────────────────── */
        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes threadPulse {

            0%,
            100% {
                opacity: 0.3;
                transform: scaleY(0.8);
                transform-origin: top;
            }

            50% {
                opacity: 1;
                transform: scaleY(1);
                transform-origin: top;
            }
        }

        /* ─────────────────────────────────────────
       SCROLL REVEAL
    ───────────────────────────────────────── */
        .r {
            opacity: 0;
            transform: translateY(52px);
            transition: opacity var(--dur-slow) var(--ease-premium),
                transform var(--dur-slow) var(--ease-premium);
        }

        .r-left {
            opacity: 0;
            transform: translateX(-52px);
            transition: opacity var(--dur-slow) var(--ease-premium),
                transform var(--dur-slow) var(--ease-premium);
        }

        .r-right {
            opacity: 0;
            transform: translateX(52px);
            transition: opacity var(--dur-slow) var(--ease-premium),
                transform var(--dur-slow) var(--ease-premium);
        }

        .r.on,
        .r-left.on,
        .r-right.on {
            opacity: 1;
            transform: translate(0, 0);
        }

        /* ─────────────────────────────────────────
       SECTION — INTRO STATEMENT
    ───────────────────────────────────────── */
        .s-intro {
            padding: var(--section-pad) 64px;
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 0.78fr 1.22fr;
            align-items: start;
            gap: clamp(48px, 7vw, 120px);
            position: relative;
        }

        .s-intro-hazelnut {
            position: absolute;
            top: 30px;
            right: -50px;
            pointer-events: none;
            user-select: none;
            mix-blend-mode: multiply;
            filter: drop-shadow(0 24px 48px rgba(44, 26, 14, .18));
            z-index: 0;
            width: clamp(200px, 15vw, 288px);
        }

        .s-intro-hazelnut.on {
            opacity: .92;
        }

        @media (max-width: 1100px) {
            .s-intro-hazelnut {
                width: clamp(180px, 20vw, 280px);
                bottom: -40px;
            }
        }

        @media (max-width: 768px) {
            .s-intro-hazelnut {
                display: none;
            }
        }

        .intro-text {
            position: sticky;
            top: 120px;
        }

        .label {
            display: block;
            font-size: 0.68rem;
            font-weight: 300;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: var(--hazelnut);
            margin-bottom: 28px;
        }

        .s-intro h2 {
            font-size: clamp(38px, 5.8vw, 79px);
            font-weight: 300;
            line-height: 1.04;
            letter-spacing: -0.015em;
            color: var(--chocolate);
            max-width: 820px;
        }

        .s-intro h2 em {
            font-style: italic;
            font-weight: 200;
            color: var(--mid-brown);
        }

        .gold-rule {
            width: 44px;
            height: 1px;
            background: var(--gold);
            margin: 44px 0;
        }

        .s-intro p {
            font-size: clamp(0.9rem, 1.1vw, 1rem);
            font-weight: 300;
            line-height: 1.9;
            color: var(--mid-brown);
            max-width: 520px;
            letter-spacing: 0.025em;
        }

        .intro-product {
            display: block;
            position: relative;
            padding: 44px 48px 48px;
            background: rgba(245, 237, 215, 0.48);
            border: 1px solid rgba(107, 66, 38, 0.1);
            border-radius: 4px;
        }

        .intro-product::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            width: 52px;
            height: 3px;
            background: var(--gold);
            border-radius: 0 0 2px 0;
        }

        .intro-product img {
            width: 100%;
            max-width: 540px;
            mix-blend-mode: multiply;
            filter: drop-shadow(0 28px 60px rgba(44, 26, 14, 0.13));
            transform: scale(0.93) rotate(-2.5deg);
            transition: transform 1.8s var(--ease-premium),
                filter 1.4s var(--ease-premium);
        }

        .intro-product.on img {
            transform: scale(1) rotate(0deg);
            filter: drop-shadow(0 40px 88px rgba(44, 26, 14, 0.2));
        }

        /* Long-form text column: 2-col newspaper layout + dropcap */
        /* columns live on the box so the two paragraphs flow through them as one text */
        .intro-product {
            column-count: 2;
            column-gap: 2.6em;
            column-rule: 1px solid rgba(107, 66, 38, 0.1);
        }

        .intro-product p + p {
            margin-top: 1.15em;
        }

        .intro-product p {
            font-size: 0.81rem;
            font-weight: 300;
            line-height: 2;
            color: rgba(107, 66, 38, 0.78);
            max-width: none;
            text-align: justify;
            -webkit-hyphens: auto;
            hyphens: auto;
            letter-spacing: 0.016em;
        }

        .intro-product p:first-of-type::first-letter {
            font-family: var(--font);
            font-size: 3.6em;
            font-weight: 700;
            line-height: 0.76;
            float: left;
            margin: 0.06em 0.14em 0 0;
            color: var(--gold);
        }

        /* ─────────────────────────────────────────
       SECTION — ORIGIN (Split)
    ───────────────────────────────────────── */
        .s-origin {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 88vh;
        }

        .split-img {
            position: relative;
            overflow: hidden;
            background: var(--hazelnut);
        }

        .split-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform: scale(1);
            will-change: transform;
            transition: transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .split-img:hover img {
            transform: scale(1.07);
        }

        .split-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: clamp(64px, 9vw, 128px) clamp(52px, 7vw, 108px);
        }

        .s-origin .split-text {
            background: var(--off-white);
        }

        .split-text h2 {
            font-size: clamp(30px, 3.5vw, 54px);
            font-weight: 300;
            line-height: 1.12;
            letter-spacing: -0.015em;
            color: var(--chocolate);
            margin-bottom: 28px;
        }

        .split-text p {
            font-size: 0.92rem;
            font-weight: 300;
            line-height: 1.88;
            color: var(--mid-brown);
            letter-spacing: 0.022em;
            margin-bottom: 18px;
        }

        /* ─────────────────────────────────────────
       SECTION — SHOWCASE (Full-bleed)
    ───────────────────────────────────────── */
        .s-showcase {
            position: relative;
            height: 92vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: var(--dark);
        }

        .showcase-bg {
            position: absolute;
            inset: -12%;
            background-image: url('/img/hazelnut2.jpg');
            background-size: cover;
            background-position: center;
            will-change: transform;
        }

        .showcase-vignette {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(14, 9, 6, 0.28) 0%,
                    rgba(14, 9, 6, 0.52) 100%);
        }

        .showcase-body {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 0 64px;
        }

        .showcase-body .eyebrow {
            display: block;
            font-size: 0.68rem;
            font-weight: 300;
            letter-spacing: 0.36em;
            text-transform: uppercase;
            color: var(--gold-light);
            margin-bottom: 28px;
        }

        .showcase-body h2 {
            font-size: clamp(46px, 8vw, 120px);
            font-weight: 700;
            line-height: 0.9;
            letter-spacing: -0.025em;
            color: var(--cream);
        }

        .showcase-body h2 span {
            display: block;
            font-weight: 200;
            font-style: italic;
            color: var(--gold-light);
        }

        .showcase-body p {
            margin-top: 36px;
            font-size: clamp(0.88rem, 1.1vw, 1rem);
            font-weight: 300;
            line-height: 1.78;
            color: rgba(245, 237, 215, 0.72);
            max-width: 480px;
            margin-left: auto;
            margin-right: auto;
            letter-spacing: 0.025em;
        }

        /* ─────────────────────────────────────────
       SECTION — CRAFT (Split reversed)
    ───────────────────────────────────────── */
        .s-craft {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 84vh;
        }

        .s-craft .split-text {
            background: var(--cream);
        }

        .s-craft .split-img {
            background: var(--mid-brown);
        }

        .s-craft .split-img img {
            object-position: center 60%;
        }

        /* ─────────────────────────────────────────
       SECTION — MARQUEE
    ───────────────────────────────────────── */
        .s-marquee {
            overflow: hidden;
            padding: 26px 0;
            background: var(--chocolate);
            border-top: 1px solid rgba(245, 237, 215, 0.055);
            border-bottom: 1px solid rgba(245, 237, 215, 0.055);
        }

        .marquee-track {
            display: flex;
            white-space: nowrap;
            animation: marqueeRoll 28s linear infinite;
        }

        .marquee-item {
            flex-shrink: 0;
            font-size: 0.66rem;
            font-weight: 300;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: rgba(245, 237, 215, 0.38);
            padding: 0 52px;
        }

        .marquee-dot {
            color: var(--gold);
            opacity: 0.55;
        }

        @keyframes marqueeRoll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* ─────────────────────────────────────────
       SECTION — GREEN / SUSTAINABILITY
    ───────────────────────────────────────── */
        .s-green {
            position: relative;
            overflow: hidden;
            padding: var(--section-pad) 0;
        }

        .s-green-inner {
            position: relative;
            z-index: 2;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 64px;
        }

        /* ─────────────────────────────────────────
       SECTION — OFFER / FEATURE CARDS
    ───────────────────────────────────────── */
        .s-offer {
            padding: var(--section-pad) 0;
            background: url('/img/whtweoffer.jpg') center/cover no-repeat;
            position: relative;
        }

        .s-offer::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(245, 237, 215, 0.72) 0%,
                    rgba(245, 237, 215, 0.55) 40%,
                    rgba(245, 237, 215, 0.68) 100%);
            pointer-events: none;
        }

        .s-offer-inner {
            position: relative;
            z-index: 1;
        }

        .s-offer-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 64px;
        }

        /* ── Offer: head ── */
        .offer-head {
            max-width: 820px;
            margin-bottom: clamp(52px, 5.5vw, 84px);
        }

        .offer-head h2 {
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 300;
            line-height: 1.08;
            letter-spacing: -0.015em;
            color: var(--chocolate);
        }

        .offer-head h2 em {
            font-style: normal;
            font-weight: 200;
            color: var(--mid-brown);
        }

        .offer-lede {
            margin-top: 26px;
            max-width: 640px;
            font-size: clamp(0.88rem, 1.05vw, 1rem);
            font-weight: 300;
            line-height: 1.9;
            color: rgba(107, 66, 38, 0.8);
            letter-spacing: 0.02em;
        }

        /* ── Offer: dual-hemisphere pillars ── */
        .offer-pillars {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(30px, 4vw, 72px);
            border-top: 1px solid rgba(107, 66, 38, 0.16);
            padding-top: 44px;
        }

        .offer-pillar-idx {
            display: block;
            font-size: 0.62rem;
            font-weight: 400;
            letter-spacing: 0.28em;
            color: var(--gold);
            margin-bottom: 20px;
        }

        .offer-pillar h3 {
            font-size: clamp(1.02rem, 1.5vw, 1.32rem);
            font-weight: 400;
            letter-spacing: -0.01em;
            line-height: 1.3;
            color: var(--chocolate);
            margin-bottom: 14px;
        }

        .offer-pillar p {
            font-size: 0.85rem;
            font-weight: 300;
            line-height: 1.85;
            color: rgba(107, 66, 38, 0.72);
            letter-spacing: 0.015em;
        }

        /* ── Offer: stat band ── */
        .offer-stats {
            margin-top: clamp(52px, 5.5vw, 84px);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            border-top: 1px solid rgba(107, 66, 38, 0.16);
            border-bottom: 1px solid rgba(107, 66, 38, 0.16);
            padding: 40px 0;
        }

        .offer-stat .num {
            display: block;
            font-size: clamp(1.55rem, 2.6vw, 2.35rem);
            font-weight: 200;
            letter-spacing: -0.025em;
            color: var(--mid-brown);
            line-height: 1;
        }

        .offer-stat .num sup {
            font-size: 0.42em;
            font-weight: 300;
            letter-spacing: 0;
        }

        .offer-stat .lbl {
            display: block;
            margin-top: 13px;
            font-size: 0.61rem;
            font-weight: 400;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(107, 66, 38, 0.52);
            line-height: 1.6;
        }

        /* ── Offer: capabilities ── */
        .offer-caps {
            margin-top: clamp(44px, 5vw, 68px);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: clamp(24px, 3vw, 52px);
        }

        .offer-cap {
            border-top: 1px solid rgba(200, 150, 62, 0.5);
            padding-top: 22px;
        }

        .offer-cap h4 {
            font-size: 0.83rem;
            font-weight: 500;
            letter-spacing: 0.005em;
            line-height: 1.45;
            color: var(--chocolate);
            margin-bottom: 10px;
        }

        .offer-cap p {
            font-size: 0.78rem;
            font-weight: 300;
            line-height: 1.8;
            color: rgba(107, 66, 38, 0.66);
            letter-spacing: 0.015em;
        }

        @media (max-width: 1024px) {
            .offer-pillars { grid-template-columns: 1fr; gap: 38px; }
            .offer-stats { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
            .offer-caps { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 560px) {
            .offer-stats, .offer-caps { grid-template-columns: 1fr; }
        }

        /* ─────────────────────────────────────────
       SECTION — TESTIMONIALS
    ───────────────────────────────────────── */
        .s-testimonials {
            padding: var(--section-pad) 0;
            background: var(--off-white);
        }

        .testimonials-head {
            max-width: 1400px;
            margin: 0 auto 80px;
            padding: 0 64px;
        }

        .testimonials-head h2 {
            font-size: clamp(28px, 3.6vw, 54px);
            font-weight: 300;
            color: var(--chocolate);
            letter-spacing: -0.012em;
            max-width: 580px;
        }

        .testimonials-body {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 64px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 72px;
        }

        .t-item {
            position: relative;
        }

        .t-mark {
            font-size: 4.8rem;
            font-weight: 700;
            color: var(--gold);
            line-height: 0.75;
            margin-bottom: 28px;
            opacity: 0.35;
            font-family: var(--font);
        }

        .t-text {
            font-size: clamp(0.96rem, 1.3vw, 1.18rem);
            font-weight: 300;
            line-height: 1.72;
            color: var(--chocolate);
            letter-spacing: 0.01em;
            margin-bottom: 32px;
        }

        .t-author .name {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--chocolate);
        }

        .t-author .role {
            margin-top: 5px;
            font-size: 0.67rem;
            font-weight: 300;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--hazelnut);
        }

        /* ─────────────────────────────────────────
       SECTION — FAQ
    ───────────────────────────────────────── */
        .s-faq {
            padding: var(--section-pad) 64px;
            background: var(--cream);
        }

        .faq-wrap {
            max-width: 820px;
            margin: 0 auto;
        }

        .faq-head {
            margin-bottom: 68px;
        }

        .faq-head h2 {
            font-size: clamp(32px, 4.2vw, 64px);
            font-weight: 300;
            letter-spacing: -0.012em;
            color: var(--chocolate);
        }

        .faq-list {
            display: flex;
            flex-direction: column;
        }

        .faq-item {
            border-top: 1px solid rgba(44, 26, 14, 0.11);
        }

        .faq-item:last-child {
            border-bottom: 1px solid rgba(44, 26, 14, 0.11);
        }

        .faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 0;
            cursor: pointer;
            user-select: none;
            gap: 24px;
        }

        .faq-q h3 {
            font-size: clamp(0.88rem, 1.2vw, 1.05rem);
            font-weight: 400;
            color: var(--chocolate);
            letter-spacing: 0.01em;
            line-height: 1.45;
        }

        .faq-toggle {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            border: 1px solid rgba(44, 26, 14, 0.18);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.55s var(--ease-premium),
                background 0.3s, border-color 0.3s;
        }

        .faq-item.open .faq-toggle {
            transform: rotate(45deg);
            background: var(--chocolate);
            border-color: var(--chocolate);
        }

        .faq-toggle svg line {
            stroke: var(--chocolate);
            transition: stroke 0.3s;
        }

        .faq-item.open .faq-toggle svg line {
            stroke: var(--cream);
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.72s var(--ease-premium);
        }

        .faq-item.open .faq-a {
            max-height: 360px;
        }

        .faq-a p {
            font-size: 0.9rem;
            font-weight: 300;
            line-height: 1.88;
            color: var(--mid-brown);
            padding-bottom: 30px;
            letter-spacing: 0.022em;
        }

        .faq-btn {
            margin-top: 44px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font);
            font-size: 0.7rem;
            font-weight: 400;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--hazelnut);
            background: none;
            border: 1px solid rgba(184, 149, 106, 0.3);
            padding: 15px 32px;
            cursor: pointer;
            transition: background 0.4s, color 0.4s, border-color 0.4s;
        }

        .faq-btn:hover {
            background: var(--chocolate);
            color: var(--cream);
            border-color: var(--chocolate);
        }

        /* ─────────────────────────────────────────
       TEXT MASK STATEMENT
    ───────────────────────────────────────── */
        .s-textmask {
            padding: clamp(80px, 11vw, 148px) 64px;
            background: var(--dark);
            overflow: hidden;
            text-align: center;
        }

        .textmask-title {
            display: block;
            font-family: var(--font);
            font-size: clamp(3.5rem, 8vw, 8rem);
            font-weight: 900;
            text-transform: uppercase;
            line-height: 0.9;
            letter-spacing: -0.04em;
            color: transparent;
            background-image: url('/img/greenn.webp');
            background-size: cover;
            background-position: center 50%;
            -webkit-background-clip: text;
            background-clip: text;
            will-change: background-position;
        }

        @media (max-width: 768px) {
            .s-textmask {
                padding: 72px 28px;
            }
        }

        /* ─────────────────────────────────────────
       WHO WE SERVE
    ───────────────────────────────────────── */
        .s-serve {
            background: var(--dark);
            padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 96px);
        }

        .s-serve-head {
            max-width: 620px;
            margin: 0 auto 80px;
            text-align: center;
        }

        .s-serve-head .label {
            display: block;
            margin-bottom: 24px;
        }

        .s-serve-head h2 {
            font-family: var(--font);
            font-size: clamp(2.4rem, 4.5vw, 5rem);
            font-weight: 300;
            line-height: 1.08;
            letter-spacing: -.018em;
            color: var(--cream);
        }

        .s-serve-head h2 em {
            font-style: italic;
            font-weight: 200;
            color: var(--gold-light);
        }

        .s-serve-panels {
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: 1400px;
            margin: 0 auto;
            border: 1px solid rgba(200, 150, 62, .1);
        }

        .s-serve-panel {
            position: relative;
            padding: clamp(48px, 5vw, 80px) clamp(36px, 4vw, 72px);
            display: flex;
            flex-direction: column;
            gap: 28px;
            min-height: 600px;
            overflow: hidden;
        }

        .s-serve-panel--growers {
            background: #1a0e06;
            border-right: 1px solid rgba(200, 150, 62, .1);
        }

        .s-serve-panel--buyers {
            background: #070b0d;
        }

        .s-serve-num {
            font-family: var(--font);
            font-size: clamp(5rem, 10vw, 12rem);
            font-weight: 700;
            line-height: 1;
            letter-spacing: -.04em;
            color: var(--gold);
            opacity: .06;
            position: absolute;
            top: 32px;
            right: 48px;
            pointer-events: none;
        }

        .s-serve-tag {
            font-size: .62rem;
            font-weight: 300;
            letter-spacing: .32em;
            text-transform: uppercase;
            color: var(--hazelnut);
        }

        .s-serve-panel--buyers .s-serve-tag {
            color: var(--gold-light);
        }

        .s-serve-title {
            font-family: var(--font);
            font-size: clamp(1.9rem, 2.8vw, 3.6rem);
            font-weight: 300;
            line-height: 1.1;
            letter-spacing: -.018em;
            color: var(--cream);
            position: relative;
            z-index: 1;
        }

        .s-serve-title em {
            font-style: italic;
            font-weight: 200;
            color: var(--gold-light);
        }

        .s-serve-body {
            font-family: var(--font);
            font-size: clamp(.84rem, .92vw, .96rem);
            font-weight: 300;
            line-height: 1.84;
            color: rgba(245, 237, 215, .52);
            max-width: 440px;
            letter-spacing: .022em;
            position: relative;
            z-index: 1;
        }

        .s-serve-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 14px;
            position: relative;
            z-index: 1;
        }

        .s-serve-list li {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            font-family: var(--font);
            font-size: .8rem;
            font-weight: 300;
            letter-spacing: .02em;
            color: rgba(245, 237, 215, .62);
        }

        .s-serve-list li::before {
            content: '';
            flex-shrink: 0;
            width: 18px;
            height: 1px;
            background: var(--gold);
            margin-top: .6em;
        }

        .s-serve-cta {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            font-family: var(--font);
            font-size: .68rem;
            font-weight: 400;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: var(--gold-light);
            text-decoration: none;
            transition: gap .4s var(--ease-premium);
            margin-top: auto;
            padding-top: 16px;
            position: relative;
            z-index: 1;
        }

        .s-serve-cta:hover {
            gap: 22px;
        }

        .s-serve-cta-line {
            width: 36px;
            height: 1px;
            background: var(--gold);
            transition: width .4s var(--ease-premium);
        }

        .s-serve-cta:hover .s-serve-cta-line {
            width: 56px;
        }

        @media (max-width: 768px) {
            .s-serve-panels {
                grid-template-columns: 1fr;
            }

            .s-serve-panel {
                min-height: auto;
                padding: 56px 28px;
            }

            .s-serve-panel--growers {
                border-right: none;
                border-bottom: 1px solid rgba(200, 150, 62, .1);
            }
        }


        /* ─────────────────────────────────────────
       THE ORIGIN — closing actions
    ───────────────────────────────────────── */
        .s-intro-actions {
            grid-column: 1 / -1;
            margin-top: clamp(28px, 3vw, 48px);
            padding-top: clamp(36px, 4vw, 56px);
            border-top: 1px solid rgba(107, 66, 38, 0.14);
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            position: relative;
            z-index: 1;
        }

        .s-cta-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            padding: clamp(26px, 2.6vw, 34px) clamp(26px, 2.8vw, 40px);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.45s var(--ease-premium), color 0.45s var(--ease-premium),
                border-color 0.45s var(--ease-premium);
        }

        .s-cta-arw {
            flex-shrink: 0;
            transition: transform 0.5s var(--ease-spring);
        }

        .s-cta-btn:hover .s-cta-arw {
            transform: translateX(9px);
        }

        .s-cta-btn--primary {
            background: var(--gold);
            color: var(--dark);
            border: 1px solid var(--gold);
        }

        .s-cta-btn--primary:hover {
            background: var(--gold-light);
            border-color: var(--gold-light);
        }

        .s-cta-btn--ghost {
            background: transparent;
            color: var(--chocolate);
            border: 1px solid rgba(44, 26, 14, 0.24);
        }

        .s-cta-btn--ghost:hover {
            background: var(--chocolate);
            color: var(--cream);
            border-color: var(--chocolate);
        }
        /* ─────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────── */
        footer {
            background: var(--dark);
            padding: 88px 0 52px;
        }

        .footer-grid {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 64px 64px;
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 64px;
            border-bottom: 1px solid rgba(245, 237, 215, 0.055);
        }

        .footer-brand .brand-mark { display: inline-block; }
    .footer-brand .brand-mark img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .92; transition: opacity .3s; }
    .footer-brand .brand-mark:hover img { opacity: 1; }

        .footer-brand .brand-tag {
            margin-top: 18px;
            font-size: 0.82rem;
            font-weight: 300;
            line-height: 1.78;
            color: rgba(245, 237, 215, 0.36);
            letter-spacing: 0.03em;
            max-width: 280px;
        }

        .footer-col h4 {
            font-size: 0.63rem;
            font-weight: 400;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--hazelnut);
            margin-bottom: 28px;
        }

        .footer-col ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .footer-col a {
            font-size: 0.84rem;
            font-weight: 300;
            letter-spacing: 0.05em;
            color: rgba(245, 237, 215, 0.48);
            text-decoration: none;
            transition: color 0.32s;
        }

        .footer-col a:hover {
            color: var(--cream);
        }

        .footer-bottom {
            max-width: 1400px;
            margin: 44px auto 0;
            padding: 0 64px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-bottom p,
        .footer-bottom-links a {
            font-size: 0.67rem;
            font-weight: 300;
            letter-spacing: 0.13em;
            color: rgba(245, 237, 215, 0.22);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-bottom-links {
            display: flex;
            gap: 36px;
            list-style: none;
        }

        .footer-bottom-links a:hover {
            color: rgba(245, 237, 215, 0.55);
        }

        /* ─────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────── */

        @media (max-width: 768px) {
            .nav {
                padding: 24px 28px;
            }

            .nav.scrolled {
                padding: 16px 28px;
            }

            .nav-links {
                display: none;
            }

            .nav-lang {
                display: none;
            }

            .hero-content {
                padding: 0 28px 72px;
            }

            .hero-scroll-indicator {
                display: none;
            }

            .hero-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 28px;
            }

            .s-intro {
                padding: 72px 24px;
                grid-template-columns: 1fr;
            }

            .intro-text {
                position: static;
            }

            .intro-product {
                padding: 32px 28px;
                order: 1;
                max-width: 100%;
                margin: 0;
                column-count: 1;
            }

            /* .intro-product is ordered after the heading, so the buttons must come after it */
            .s-intro-actions {
                order: 2;
                grid-template-columns: 1fr;
                gap: 14px;
                margin-top: 44px;
                padding-top: 36px;
            }

            .intro-product p {
                text-align: left;
            }

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

            .split-img {
                height: 72vw;
            }

            .split-text {
                padding: 56px 28px;
            }

            .s-showcase {
                height: 72vh;
            }

            .showcase-body {
                padding: 0 28px;
            }


            .s-green-inner,
            .s-offer-inner {
                padding-left: 28px;
                padding-right: 28px;
            }




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

            .s-craft .split-img {
                height: 72vw;
                order: -1;
            }

            .s-craft .split-text {
                padding: 56px 28px;
            }

            .s-testimonials {
                padding: 72px 0;
            }

            .testimonials-head {
                margin-bottom: 52px;
                padding: 0 28px;
            }

            .testimonials-body {
                padding: 0 28px;
                grid-template-columns: 1fr;
                gap: 56px;
            }

            .s-faq {
                padding: 72px 28px;
            }

            footer {
                padding: 68px 0 44px;
            }

            .footer-grid {
                padding: 0 28px 52px;
                grid-template-columns: 1fr;
                gap: 44px;
            }

            .footer-bottom {
                padding: 0 28px;
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            .footer-bottom-links {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 14vw;
            }

            .showcase-body h2 {
                font-size: 13vw;
            }
        }

        /* ── Contact Form ── */
        .s-contact {
            padding: var(--section-pad) 0;
            background: url('/img/contactbck.webp') center/cover no-repeat;
            position: relative;
        }

        .s-contact::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(14, 9, 6, 0.48);
            pointer-events: none;
        }

        .s-contact-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 64px;
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 96px;
            align-items: start;
            position: relative;
            z-index: 1;
        }

        .s-contact-left .label {
            display: block;
            margin-bottom: 20px;
        }

        .s-contact-left h2 {
            font-size: clamp(28px, 3.6vw, 52px);
            font-weight: 300;
            color: var(--cream);
            letter-spacing: -0.015em;
            line-height: 1.1;
            margin-bottom: 24px;
        }

        .s-contact-left h2 em {
            font-style: italic;
            font-weight: 200;
            color: var(--gold);
        }

        .s-contact-left p {
            font-size: 0.95rem;
            font-weight: 300;
            line-height: 1.75;
            color: rgba(245, 237, 215, 0.75);
            max-width: 340px;
            margin-bottom: 40px;
        }

        .s-contact-detail {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .s-contact-detail-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.82rem;
            color: rgba(245, 237, 215, 0.85);
            font-weight: 400;
            letter-spacing: 0.01em;
        }

        .s-contact-detail-item span.icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(200, 150, 62, 0.12);
            flex-shrink: 0;
            font-size: 0.9rem;
        }

        .contact-form {
            background: linear-gradient(rgba(14, 9, 6, 0.72), rgba(14, 9, 6, 0.72)), url('/img/contactbck.webp') center/cover no-repeat;
            border-radius: 20px;
            padding: 52px 48px;
            box-shadow: 0 8px 48px rgba(44, 26, 14, 0.35);
            border: 1px solid rgba(200, 150, 62, 0.15);
        }

        .contact-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .contact-form-group {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 20px;
        }

        .contact-form-group:last-of-type {
            margin-bottom: 0;
        }

        .contact-form label {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--cream);
            opacity: 0.65;
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid rgba(44, 26, 14, 0.14);
            border-radius: 10px;
            background: var(--cream);
            font-family: var(--font);
            font-size: 0.88rem;
            font-weight: 300;
            color: var(--chocolate);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            appearance: none;
            -webkit-appearance: none;
        }

        .contact-form input:focus,
        .contact-form select:focus,
        .contact-form textarea:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(200, 150, 62, 0.12);
        }

        .contact-form textarea {
            resize: vertical;
            min-height: 120px;
        }

        .contact-form select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232C1A0E' opacity='.4'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
        }

        .contact-form-submit {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 28px;
            padding: 14px 36px;
            background: var(--chocolate);
            color: var(--cream);
            font-family: var(--font);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            border: none;
            border-radius: 100px;
            cursor: pointer;
            transition: background 0.25s, transform 0.2s;
        }

        .contact-form-submit:hover {
            background: var(--gold);
            transform: translateY(-1px);
        }

        .contact-form-submit svg {
            transition: transform 0.2s;
        }

        .contact-form-submit:hover svg {
            transform: translateX(3px);
        }

        @media (max-width: 1024px) {
            .s-contact-inner {
                grid-template-columns: 1fr;
                gap: 56px;
                padding: 0 40px;
            }

            .s-contact-left p {
                max-width: 100%;
            }
        }

        @media (max-width: 640px) {
            .s-contact-inner {
                padding: 0 24px;
            }

            .contact-form {
                padding: 36px 28px;
            }

            .contact-form-row {
                grid-template-columns: 1fr;
            }
        }

/* ─────────────────────────────────────────
   MOBILE TAP TARGETS
   The design's link sizes come from desktop pointer accuracy. On touch the
   mobile-menu language switcher measured 19x24px and the footer links 17px
   tall — well under the 44x44 minimum in WCAG 2.5.5 and Apple's HIG.
   Padding only: nothing here moves the visual design, the hit area just
   grows around the text.
   ───────────────────────────────────────── */
@media (max-width: 768px) {

  /* Language switcher inside the mobile menu */
  .nav-mobile-foot {
    gap: 4px;
  }

  .nav-mobile-foot a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    font-size: .78rem;
  }

  /* Footer navigation */
  .footer-col ul li a,
  .footer-bottom-links a {
    display: inline-block;
    padding: 12px 0;
    line-height: 20px;
  }

  .footer-col ul li,
  .footer-bottom-links li {
    line-height: 1;
  }

  .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
  }

  /* Hero call-to-action: the primary action on most pages, and only ~24px
     tall from its text alone. */
  .hero-cta,
  .jn-hero-cta,
  .hz-hero-cta,
  .s-cta-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Logos: wide enough to hit, but short. */
  .nav-logo,
  .brand-mark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Footer bottom row: 44px tall already, widen the short ones. */
  .footer-bottom-links a {
    min-width: 44px;
    text-align: center;
  }
}