:root {
        --ink: #0c1a10;
        --navy: #0b2670;
        --navy2: #071845;
        --green: #0e6b2a;
        --green2: #15a040;
        --green3: #dcefd9;
        --gold: #c8900a;
        --gold2: #f0b820;
        --gold3: #fff5d6;
        --cream: #f8f6f0;
        --white: #ffffff;
        --muted: #5e6e74;
        --border: rgba(12, 26, 16, 0.09);
        --r: 14px;
        --r2: 22px;
        --sh1: 0 2px 14px rgba(11, 38, 112, 0.07);
        --sh2: 0 8px 36px rgba(11, 38, 112, 0.12);
        --sh3: 0 20px 60px rgba(11, 38, 112, 0.16);
      }
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "DM Sans", sans-serif;
        background: var(--cream);
        color: var(--ink);
        overflow-x: hidden;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: "Fraunces", serif;
        line-height: 1.08;
      }
      h1 {
        font-size: clamp(2.6rem, 6vw, 5rem);
      }
      h2 {
        font-size: clamp(1.9rem, 4vw, 3rem);
      }
      h3 {
        font-size: 1.22rem;
      }
      p {
        line-height: 1.78;
        color: var(--muted);
      }

      /* ─────────────────────────────────────────────
   UTILS
───────────────────────────────────────────── */
      .wrap {
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 2rem;
      }
      .wrap-sm {
        max-width: 780px;
        margin: 0 auto;
        padding: 0 2rem;
      }
      .sec {
        padding: 5.5rem 0;
      }
      .sec-sm {
        padding: 3.5rem 0;
      }
      .label {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.38em;
        text-transform: uppercase;
        color: var(--green2);
        margin-bottom: 1rem;
      }
      .label::before {
        content: "";
        width: 20px;
        height: 2px;
        background: var(--green2);
        border-radius: 2px;
      }
      .label.gold {
        color: var(--gold);
      }
      .label.gold::before {
        background: var(--gold);
      }
      .label.white {
        color: rgba(255, 255, 255, 0.7);
      }
      .label.white::before {
        background: rgba(255, 255, 255, 0.5);
      }
      .tag {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.25rem 0.75rem;
        border-radius: 2rem;
      }
      .tag-green {
        background: var(--green3);
        color: var(--green);
      }
      .tag-gold {
        background: var(--gold3);
        color: var(--gold);
      }
      .tag-navy {
        background: rgba(11, 38, 112, 0.1);
        color: var(--navy);
      }
      .tag-white {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      /* Buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.88rem 2.1rem;
        border-radius: 3rem;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: all 0.28s;
        border: none;
        cursor: pointer;
        font-family: "DM Sans", sans-serif;
      }
      .btn-navy {
        background: var(--navy);
        color: #fff;
        box-shadow: 0 4px 20px rgba(11, 38, 112, 0.22);
      }
      .btn-navy:hover {
        background: var(--navy2);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(11, 38, 112, 0.3);
      }
      .btn-green {
        background: var(--green);
        color: #fff;
        box-shadow: 0 4px 18px rgba(14, 107, 42, 0.22);
      }
      .btn-green:hover {
        background: #0a4d1e;
        transform: translateY(-2px);
      }
      .btn-gold {
        background: var(--gold);
        color: #fff;
        box-shadow: 0 4px 18px rgba(200, 144, 10, 0.28);
      }
      .btn-gold:hover {
        background: #a87008;
        transform: translateY(-2px);
      }
      .btn-ghost {
        background: transparent;
        color: var(--ink);
        border: 2px solid var(--border);
      }
      .btn-ghost:hover {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink);
      }
      .btn-ghost-w {
        background: transparent;
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.35);
      }
      .btn-ghost-w:hover {
        background: #fff;
        color: var(--ink);
      }
      .btn-wa {
        background: #25d366;
        color: #fff;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
      }
      .btn-wa:hover {
        background: #1ebe5a;
        transform: translateY(-2px);
      }

      /* Fade-up */
      .fu {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.65s ease,
          transform 0.65s ease;
      }
      .fu.in {
        opacity: 1;
        transform: translateY(0);
      }
      .d1 {
        transition-delay: 0.08s;
      }
      .d2 {
        transition-delay: 0.16s;
      }
      .d3 {
        transition-delay: 0.24s;
      }
      .d4 {
        transition-delay: 0.32s;
      }
      .d5 {
        transition-delay: 0.4s;
      }
      .d6 {
        transition-delay: 0.48s;
      }

      /* Pages */
      .pg {
        display: none;
      }
      .pg.on {
        display: block;
      }

      /* ─────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────── */
      #bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border);
        transition: box-shadow 0.3s;
      }
      #bar.up {
        box-shadow: var(--sh1);
      }
      .bar-in {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .logo-wrap {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        cursor: pointer;
      }
      .logo-wrap img {
        height: 46px;
        width: auto;
        object-fit: contain;
      }
      .logo-words {
        display: flex;
        flex-direction: column;
        gap: 1px;
      }
      .logo-name {
        font-family: "Fraunces", serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--navy);
        letter-spacing: 0.05em;
        line-height: 1;
      }
      .logo-name b {
        color: var(--green);
      }
      .logo-sub {
        font-size: 0.52rem;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--muted);
      }
      nav {
        display: flex;
        align-items: center;
        gap: 0.2rem;
      }
      nav a {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 0.42rem 0.9rem;
        border-radius: 2rem;
        color: var(--muted);
        transition: all 0.2s;
      }
      nav a:hover,
      nav a.on {
        color: var(--navy);
        background: rgba(11, 38, 112, 0.07);
      }
      .nav-cta {
        background: var(--navy) !important;
        color: #fff !important;
        margin-left: 0.4rem;
        box-shadow: 0 3px 14px rgba(11, 38, 112, 0.2);
      }
      .nav-cta:hover {
        background: var(--green) !important;
        box-shadow: 0 6px 20px rgba(14, 107, 42, 0.28) !important;
      }
      .hbg {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
      }
      .hbg span {
        width: 22px;
        height: 2px;
        background: var(--navy);
        border-radius: 2px;
        transition: 0.3s;
      }
      .mob-nav {
        display: none;
        position: fixed;
        top: 70px;
        inset-x: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        padding: 1rem 2rem 1.5rem;
        flex-direction: column;
        gap: 0.3rem;
        box-shadow: var(--sh2);
        z-index: 899;
      }
      .mob-nav.open {
        display: flex;
      }
      .mob-nav a {
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.7rem 1rem;
        border-radius: 10px;
        color: var(--ink);
        transition: background 0.2s;
      }
      .mob-nav a:hover {
        background: var(--green3);
      }

      /* ─────────────────────────────────────────────
   HOME · SECTION 1 · HERO
───────────────────────────────────────────── */
      .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 8rem 0 0;
        background: linear-gradient(
          148deg,
          var(--navy2) 0%,
          var(--navy) 55%,
          #0a4060 100%
        );
        position: relative;
        overflow: hidden;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 70% 60% at 85% 25%,
            rgba(14, 107, 42, 0.22) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 50% 70% at 5% 80%,
            rgba(200, 144, 10, 0.14) 0%,
            transparent 50%
          );
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
          );
        background-size: 64px 64px;
      }
      /* Floating orbs */
      .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        pointer-events: none;
      }
      .orb1 {
        width: 500px;
        height: 500px;
        top: -120px;
        right: -80px;
        background: radial-gradient(
          circle,
          rgba(21, 160, 64, 0.18),
          transparent 70%
        );
      }
      .orb2 {
        width: 350px;
        height: 350px;
        bottom: 0;
        left: -60px;
        background: radial-gradient(
          circle,
          rgba(200, 144, 10, 0.14),
          transparent 70%
        );
      }
      .hero-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 4rem;
        align-items: center;
      }
      .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
        padding: 0.4rem 1rem;
        border-radius: 2rem;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--gold2);
        margin-bottom: 1.8rem;
      }
      .hero-tag span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold2);
        animation: blink 2s infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .hero h1 {
        color: #fff;
        margin-bottom: 1.4rem;
        font-weight: 900;
      }
      .hero h1 i {
        font-style: italic;
        color: var(--gold2);
      }
      .hero-desc {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.05rem;
        max-width: 480px;
        margin-bottom: 2.5rem;
      }
      .hero-btns {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 3rem;
      }
      .hero-proof {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        flex-wrap: wrap;
      }
      .proof-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
      }
      .proof-item::before {
        content: "✓";
        color: var(--green2);
        font-weight: 700;
      }
      /* Right panel */
      .hero-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .hero-card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
        border-radius: var(--r);
        padding: 1.3rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: transform 0.25s;
        cursor: default;
      }
      .hero-card:hover {
        transform: translateX(6px);
      }
      .hci {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
      }
      .hci.g {
        background: rgba(21, 160, 64, 0.25);
      }
      .hci.o {
        background: rgba(200, 144, 10, 0.25);
      }
      .hci.b {
        background: rgba(11, 38, 112, 0.4);
      }
      .hci.r {
        background: rgba(200, 50, 50, 0.2);
      }
      .hct-name {
        font-size: 0.82rem;
        font-weight: 700;
        color: #fff;
      }
      .hct-sub {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 1px;
      }
      .hero-markets {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--r);
        padding: 1.1rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        flex-wrap: wrap;
      }
      .mflag {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        padding: 0.25rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.74rem;
        color: #fff;
        font-weight: 600;
      }
      /* Hero bottom wave */
      .hero-wave {
        position: relative;
        z-index: 1;
        margin-top: 2rem;
        background: linear-gradient(0deg, var(--white) 0%, transparent 100%);
        height: 80px;
      }

      /* ─────────────────────────────────────────────
   HOME · SECTION 2 · TRUST BAR
───────────────────────────────────────────── */
      .trust-bar {
        background: var(--white);
        border-bottom: 1px solid var(--border);
        padding: 0;
      }
      .trust-inner {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-left: 1px solid var(--border);
      }
      .trust-item {
        padding: 1.8rem 1.5rem;
        border-right: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.9rem;
        transition: background 0.2s;
      }
      .trust-item:hover {
        background: var(--green3);
      }
      .ti-icon {
        font-size: 1.6rem;
        flex-shrink: 0;
      }
      .ti-name {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--ink);
      }
      .ti-sub {
        font-size: 0.68rem;
        color: var(--muted);
        margin-top: 1px;
      }

      /* ─────────────────────────────────────────────
   HOME · SECTION 3 · PROBLEM/HOOK
───────────────────────────────────────────── */
      .problem {
        background: var(--cream);
      }
      .problem-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: center;
      }
      .problem-left h2 {
        color: var(--ink);
        margin-bottom: 1.2rem;
      }
      .problem-left h2 i {
        color: var(--green2);
        font-style: italic;
      }
      .problem-left p {
        margin-bottom: 1.5rem;
      }
      .pain-list {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin: 1.8rem 0;
      }
      .pain-item {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1rem 1.2rem;
        border-radius: var(--r);
        background: var(--white);
        border: 1px solid var(--border);
        box-shadow: var(--sh1);
      }
      .pain-icon {
        font-size: 1.2rem;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .pain-item strong {
        font-size: 0.85rem;
        color: var(--ink);
        display: block;
        margin-bottom: 2px;
      }
      .pain-item p {
        font-size: 0.8rem;
        margin: 0;
      }
      .solution-box {
        background: linear-gradient(140deg, var(--navy), var(--green));
        border-radius: var(--r2);
        padding: 2.5rem;
        color: #fff;
      }
      .solution-box h3 {
        color: #fff;
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
      }
      .solution-box p {
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 1.8rem;
      }
      .sol-items {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
      }
      .sol-item {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 0.85rem 1rem;
      }
      .sol-item span {
        font-size: 0.88rem;
        color: #fff;
        font-weight: 600;
      }

      /* ─────────────────────────────────────────────
   HOME · SECTION 4 · PRODUCTS SHOWCASE
───────────────────────────────────────────── */
      .showcase {
        background: var(--white);
      }
      .showcase-head {
        text-align: center;
        margin-bottom: 3.5rem;
      }
      .showcase-head h2 {
        color: var(--ink);
        margin-bottom: 0.8rem;
      }
      .showcase-head p {
        max-width: 520px;
        margin: 0 auto;
      }
      .cat-row {
        display: flex;
        gap: 0.6rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 2.5rem;
      }
      .cat-btn {
        padding: 0.45rem 1.2rem;
        border-radius: 2rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        border: 2px solid var(--border);
        background: #fff;
        color: var(--muted);
        cursor: pointer;
        transition: all 0.22s;
      }
      .cat-btn.on,
      .cat-btn:hover {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
      }
      .prod-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
      }
      .pc {
        background: var(--cream);
        border-radius: var(--r2);
        overflow: hidden;
        border: 1px solid var(--border);
        transition: all 0.3s;
        cursor: pointer;
      }
      .pc:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh2);
        border-color: var(--green2);
      }
      .pc-top {
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
        position: relative;
      }
      .pc-top.bulk {
        background: linear-gradient(135deg, #fff9e8, #fff0c0);
      }
      .pc-top.spice {
        background: linear-gradient(135deg, #fff0e8, #ffdcc8);
      }
      .pc-top.pulse {
        background: linear-gradient(135deg, #f4efe8, #ede3d0);
      }
      .pc-top.sweet {
        background: linear-gradient(135deg, #fff8f0, #ffedd0);
      }
      .pc-badge {
        position: absolute;
        top: 9px;
        right: 9px;
      }
      .pc-body {
        padding: 1.2rem;
      }
      .pc-body h3 {
        color: var(--ink);
        font-size: 1rem;
        margin-bottom: 0.35rem;
      }
      .pc-body p {
        font-size: 0.78rem;
        line-height: 1.6;
        margin-bottom: 0.9rem;
      }
      .pc-link {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--navy);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        transition:
          gap 0.2s,
          color 0.2s;
      }
      .pc:hover .pc-link {
        gap: 0.7rem;
        color: var(--green);
      }
      .showcase-cta {
        text-align: center;
        margin-top: 3rem;
      }
      .showcase-note {
        font-size: 0.82rem;
        color: var(--muted);
        margin-top: 0.8rem;
      }

      /* ─────────────────────────────────────────────
   HOME · SECTION 5 · WHY NUKUMI
───────────────────────────────────────────── */
      .why {
        background: linear-gradient(160deg, var(--navy2), var(--navy));
        position: relative;
        overflow: hidden;
      }
      .why::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 60% 50% at 90% 10%,
            rgba(21, 160, 64, 0.15) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 40% 50% at 5% 90%,
            rgba(200, 144, 10, 0.1) 0%,
            transparent 50%
          );
      }
      .why-inner {
        position: relative;
        z-index: 1;
      }
      .why-head {
        text-align: center;
        margin-bottom: 3.5rem;
      }
      .why-head h2 {
        color: #fff;
      }
      .why-head p {
        color: rgba(255, 255, 255, 0.6);
        max-width: 520px;
        margin: 0.8rem auto 0;
      }
      .why-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
      }
      .wc {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r2);
        padding: 2rem;
        transition: all 0.3s;
      }
      .wc:hover {
        background: rgba(255, 255, 255, 0.12);
        transform: translateY(-4px);
      }
      .wc-top {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin-bottom: 1rem;
      }
      .wc-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
      }
      .wc-icon.g {
        background: rgba(21, 160, 64, 0.25);
      }
      .wc-icon.o {
        background: rgba(200, 144, 10, 0.2);
      }
      .wc-icon.b {
        background: rgba(100, 160, 255, 0.15);
      }
      .wc h3 {
        color: #fff;
        font-size: 1rem;
      }
      .wc p {
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.84rem;
      }
      .why-stat-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-top: 3rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 3rem;
      }
      .ws {
        text-align: center;
      }
      .ws-num {
        font-family: "Fraunces", serif;
        font-size: 2.8rem;
        font-weight: 900;
        color: var(--gold2);
        line-height: 1;
      }
      .ws-label {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 0.4rem;
      }

      /* ─────────────────────────────────────────────
   HOME · SECTION 6 · FINAL CTA
───────────────────────────────────────────── */
      .home-cta {
        background: var(--cream);
        border-top: 1px solid var(--border);
      }
      .cta-box {
        background: linear-gradient(140deg, var(--navy), var(--green));
        border-radius: var(--r2);
        padding: 4rem 3.5rem;
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3rem;
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .cta-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 40px 40px;
      }
      .cta-box-left {
        position: relative;
        z-index: 1;
      }
      .cta-box-left h2 {
        color: #fff;
        margin-bottom: 0.9rem;
      }
      .cta-box-left p {
        color: rgba(255, 255, 255, 0.7);
        max-width: 440px;
      }
      .cta-box-right {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .cta-contact-item {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--r);
        padding: 1rem 1.2rem;
      }
      .cta-contact-item span {
        font-size: 0.82rem;
        color: #fff;
      }
      .cta-contact-item a {
        font-size: 0.82rem;
        color: var(--gold2);
        font-weight: 600;
      }
      .cta-btns {
        display: flex;
        gap: 0.8rem;
        flex-wrap: wrap;
        margin-top: 1.5rem;
      }

      /* ─────────────────────────────────────────────
   ABOUT · SECTION 1 · BRAND STORY HOOK
───────────────────────────────────────────── */
      .about-hook {
        min-height: 60vh;
        display: flex;
        align-items: center;
        padding: 8rem 0 4rem;
        background: linear-gradient(140deg, #071830, var(--navy));
        position: relative;
        overflow: hidden;
      }
      .about-hook::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse 60% 80% at 80% 50%,
          rgba(14, 107, 42, 0.2) 0%,
          transparent 60%
        );
      }
      .about-hook-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }
      .about-hook h1 {
        color: #fff;
        font-weight: 900;
        margin-bottom: 1.2rem;
      }
      .about-hook h1 i {
        color: var(--gold2);
        font-style: italic;
      }
      .about-hook p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.05rem;
        max-width: 480px;
      }
      .about-hook-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .origin-card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
        border-radius: var(--r2);
        padding: 2rem;
      }
      .origin-card h3 {
        color: var(--gold2);
        font-size: 1rem;
        margin-bottom: 0.6rem;
      }
      .origin-card p {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.85rem;
        line-height: 1.7;
      }
      .origin-stat {
        display: flex;
        gap: 1rem;
        margin-top: 1.2rem;
        flex-wrap: wrap;
      }
      .ns {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 0.7rem 1rem;
        text-align: center;
      }
      .ns-n {
        font-family: "Fraunces", serif;
        font-size: 1.4rem;
        font-weight: 700;
        color: #fff;
        line-height: 1;
      }
      .ns-l {
        font-size: 0.6rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
      }

      /* ─────────────────────────────────────────────
   ABOUT · SECTION 2 · MISSION / JOURNEY
───────────────────────────────────────────── */
      .mission {
        background: var(--white);
      }
      .mission-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: center;
      }
      .mission-left h2 {
        color: var(--ink);
        margin-bottom: 1.2rem;
      }
      .mission-left h2 i {
        color: var(--green2);
        font-style: italic;
      }
      .mission-left p {
        margin-bottom: 1.2rem;
      }
      .mission-quote {
        border-left: 4px solid var(--gold);
        padding: 1.2rem 1.5rem;
        margin: 2rem 0;
        background: var(--gold3);
        border-radius: 0 var(--r) var(--r) 0;
      }
      .mission-quote p {
        color: var(--ink);
        font-style: italic;
        font-size: 0.95rem;
        line-height: 1.7;
        margin: 0;
      }
      .mission-quote cite {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--gold);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        display: block;
        margin-top: 0.6rem;
      }
      .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 2rem;
      }
      .val {
        background: var(--cream);
        border-radius: var(--r);
        padding: 1.2rem;
        border: 1px solid var(--border);
        transition: all 0.25s;
      }
      .val:hover {
        background: var(--green3);
        border-color: var(--green2);
      }
      .val-icon {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
      }
      .val h4 {
        font-size: 0.88rem;
        color: var(--ink);
        margin-bottom: 0.3rem;
      }
      .val p {
        font-size: 0.77rem;
        margin: 0;
      }
      /* Timeline on right */
      .timeline {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .tl-item {
        display: flex;
        gap: 1.5rem;
        position: relative;
        padding-bottom: 2rem;
      }
      .tl-item:last-child {
        padding-bottom: 0;
      }
      .tl-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
      }
      .tl-dot {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
        z-index: 1;
      }
      .tl-dot.green {
        background: var(--green3);
        border: 2px solid var(--green2);
      }
      .tl-dot.gold {
        background: var(--gold3);
        border: 2px solid var(--gold);
      }
      .tl-dot.navy {
        background: rgba(11, 38, 112, 0.1);
        border: 2px solid var(--navy);
      }
      .tl-connector {
        width: 2px;
        flex: 1;
        background: var(--border);
        margin-top: 4px;
      }
      .tl-content {
        padding-top: 0.5rem;
      }
      .tl-year {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--green2);
        margin-bottom: 0.3rem;
      }
      .tl-content h4 {
        color: var(--ink);
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
      }
      .tl-content p {
        font-size: 0.8rem;
        line-height: 1.65;
      }

      /* ─────────────────────────────────────────────
   ABOUT · SECTION 3 · TEAM VALUES
───────────────────────────────────────────── */
      .team-vals {
        background: var(--cream);
      }
      .tv-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-top: 3rem;
      }
      .tv-card {
        background: var(--white);
        border-radius: var(--r2);
        padding: 2rem;
        text-align: center;
        border: 1px solid var(--border);
        box-shadow: var(--sh1);
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
      }
      .tv-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--navy), var(--green));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s;
      }
      .tv-card:hover::after {
        transform: scaleX(1);
      }
      .tv-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh2);
      }
      .tv-icon {
        font-size: 2.2rem;
        margin-bottom: 1rem;
      }
      .tv-card h3 {
        color: var(--ink);
        margin-bottom: 0.5rem;
        font-size: 1rem;
      }
      .tv-card p {
        font-size: 0.8rem;
      }

      /* ─────────────────────────────────────────────
   ABOUT · SECTION 4 · CERTIFICATIONS
───────────────────────────────────────────── */
      .certs {
        background: var(--white);
      }
      .cert-hero-text {
        text-align: center;
        max-width: 600px;
        margin: 0 auto 3rem;
      }
      .certs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
      }
      .cert-big {
        background: linear-gradient(140deg, var(--cream), var(--white));
        border-radius: var(--r2);
        padding: 2.5rem;
        border: 1px solid var(--border);
        display: flex;
        gap: 1.5rem;
        align-items: flex-start;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
      }
      .cert-big::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
      }
      .cert-big.apeda::before {
        background: linear-gradient(90deg, #228b22, #00aa44);
      }
      .cert-big.fssai::before {
        background: linear-gradient(90deg, #0066cc, #00aaff);
      }
      .cert-big.msme::before {
        background: linear-gradient(90deg, var(--navy), #4466ff);
      }
      .cert-big.gst::before {
        background: linear-gradient(90deg, var(--gold), #ffcc00);
      }
      .cert-big:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh2);
      }
      .cert-big-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
      }
      .cert-big-icon.apeda {
        background: #e8f7e8;
      }
      .cert-big-icon.fssai {
        background: #e8f0ff;
      }
      .cert-big-icon.msme {
        background: #eef0ff;
      }
      .cert-big-icon.gst {
        background: var(--gold3);
      }
      .cert-big-body h3 {
        color: var(--ink);
        margin-bottom: 0.3rem;
      }
      .cert-big-body .full {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 0.7rem;
      }
      .cert-big-body p {
        font-size: 0.82rem;
        line-height: 1.7;
      }

      /* ─────────────────────────────────────────────
   PRODUCTS · SECTION 1 · CATEGORY HOOK
───────────────────────────────────────────── */
      .prod-hook {
        padding: 8rem 0 4rem;
        background: linear-gradient(140deg, #071830, #0a3a20);
        position: relative;
        overflow: hidden;
      }
      .prod-hook::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 50% 70% at 80% 30%,
            rgba(14, 107, 42, 0.25) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 40% 50% at 10% 80%,
            rgba(200, 144, 10, 0.12) 0%,
            transparent 50%
          );
      }
      .prod-hook-inner {
        position: relative;
        z-index: 1;
        text-align: center;
        max-width: 700px;
        margin: 0 auto;
      }
      .prod-hook h1 {
        color: #fff;
        margin-bottom: 1rem;
      }
      .prod-hook h1 i {
        color: var(--gold2);
        font-style: italic;
      }
      .prod-hook p {
        color: rgba(255, 255, 255, 0.68);
        font-size: 1.05rem;
        margin-bottom: 2rem;
      }
      .prod-hook-cats {
        display: flex;
        gap: 0.7rem;
        justify-content: center;
        flex-wrap: wrap;
      }

      /* ─────────────────────────────────────────────
   PRODUCTS · SECTION 2 · FULL GRID
───────────────────────────────────────────── */
      .prod-full {
        background: var(--white);
      }
      .prod-full-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.8rem;
      }
      .pfc {
        background: var(--cream);
        border-radius: var(--r2);
        overflow: hidden;
        border: 1px solid var(--border);
        transition: all 0.3s;
      }
      .pfc:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh2);
        border-color: var(--green2);
      }
      .pfc-img {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        position: relative;
      }
      .pfc-img.bulk {
        background: linear-gradient(135deg, #fff9e8, #fff0c0);
      }
      .pfc-img.spice {
        background: linear-gradient(135deg, #fff1e8, #ffdccc);
      }
      .pfc-img.pulse {
        background: linear-gradient(135deg, #f5f0e8, #ede3d0);
      }
      .pfc-img.sweet {
        background: linear-gradient(135deg, #fff8f0, #ffedd0);
      }
      .pfc-badge {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      .pfc-body {
        padding: 1.5rem;
      }
      .pfc-body h3 {
        color: var(--ink);
        margin-bottom: 0.4rem;
      }
      .pfc-body p {
        font-size: 0.82rem;
        margin-bottom: 1rem;
      }
      .pfc-specs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-bottom: 1.1rem;
      }
      .pfc-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--border);
        padding-top: 1rem;
      }
      .pfc-origin {
        font-size: 0.68rem;
        color: var(--muted);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .pfc-link {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--navy);
        display: flex;
        align-items: center;
        gap: 0.35rem;
        transition:
          gap 0.2s,
          color 0.2s;
      }
      .pfc:hover .pfc-link {
        gap: 0.65rem;
        color: var(--green);
      }

      /* ─────────────────────────────────────────────
   PRODUCTS · SECTION 3 · QUALITY PROMISE
───────────────────────────────────────────── */
      .quality {
        background: linear-gradient(160deg, var(--navy2), var(--navy));
        position: relative;
        overflow: hidden;
      }
      .quality::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
          );
        background-size: 50px 50px;
      }
      .quality-inner {
        position: relative;
        z-index: 1;
      }
      .quality-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }
      .quality-left h2 {
        color: #fff;
        margin-bottom: 1rem;
      }
      .quality-left p {
        color: rgba(255, 255, 255, 0.68);
        margin-bottom: 2rem;
      }
      .qstep-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .qstep {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        background: rgba(255, 255, 255, 0.08);
        border-radius: var(--r);
        padding: 1.1rem 1.2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .qstep-num {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--gold);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        flex-shrink: 0;
      }
      .qstep h4 {
        color: #fff;
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
      }
      .qstep p {
        color: rgba(255, 255, 255, 0.58);
        font-size: 0.78rem;
        margin: 0;
      }
      .quality-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      .qstat {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r2);
        padding: 2rem;
        text-align: center;
        transition: all 0.3s;
      }
      .qstat:hover {
        background: rgba(255, 255, 255, 0.13);
      }
      .qstat-num {
        font-family: "Fraunces", serif;
        font-size: 2.4rem;
        font-weight: 900;
        color: var(--gold2);
        line-height: 1;
      }
      .qstat-label {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 0.5rem;
      }
      .qstat-icon {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
      }

      /* ─────────────────────────────────────────────
   PRODUCTS · SECTION 4 · CUSTOM SOURCING CTA
───────────────────────────────────────────── */
      .sourcing {
        background: var(--cream);
      }
      .sourcing-box {
        background: var(--white);
        border-radius: var(--r2);
        padding: 3.5rem;
        border: 1px solid var(--border);
        box-shadow: var(--sh2);
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3rem;
        align-items: center;
      }
      .sourcing-left h2 {
        color: var(--ink);
        margin-bottom: 1rem;
      }
      .sourcing-left p {
        margin-bottom: 1.5rem;
      }
      .sourcing-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.8rem;
      }
      .sourcing-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .src-item {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 1rem 1.2rem;
        border-radius: var(--r);
        background: var(--cream);
        border: 1px solid var(--border);
      }
      .src-item span {
        font-size: 0.84rem;
        color: var(--ink);
      }
      .src-item strong {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--green);
        display: block;
      }

      /* ─────────────────────────────────────────────
   WHAT WE DO · SECTION 1 · PROCESS HOOK
───────────────────────────────────────────── */
      .process-hook {
        padding: 8rem 0 5rem;
        background: linear-gradient(155deg, #071830, #0a2040);
        position: relative;
        overflow: hidden;
      }
      .process-hook::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse 55% 65% at 75% 40%,
          rgba(21, 160, 64, 0.18) 0%,
          transparent 55%
        );
      }
      .ph-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }
      .ph-left h1 {
        color: #fff;
        margin-bottom: 1.1rem;
      }
      .ph-left h1 i {
        color: var(--gold2);
        font-style: italic;
      }
      .ph-left p {
        color: rgba(255, 255, 255, 0.68);
        font-size: 1.05rem;
        margin-bottom: 2rem;
      }
      .ph-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      .ph-mini {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r2);
        padding: 1.5rem;
        text-align: center;
      }
      .ph-mini-icon {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
      }
      .ph-mini h4 {
        color: #fff;
        font-size: 0.88rem;
        margin-bottom: 0.2rem;
      }
      .ph-mini p {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.72rem;
        margin: 0;
      }

      /* ─────────────────────────────────────────────
   WHAT WE DO · SECTION 2 · JOURNEY STEPS
───────────────────────────────────────────── */
      .journey {
        background: var(--cream);
      }
      .journey-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        position: relative;
        margin-top: 3rem;
      }
      .journey-steps::before {
        content: "";
        position: absolute;
        top: 42px;
        left: 8%;
        right: 8%;
        height: 3px;
        background: linear-gradient(90deg, var(--navy), var(--green));
        z-index: 0;
      }
      .js {
        text-align: center;
        padding: 0 0.5rem;
        position: relative;
        z-index: 1;
      }
      .js-circle {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: var(--white);
        border: 3px solid var(--navy);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.2rem;
        font-size: 1.8rem;
        box-shadow: var(--sh1);
        transition: all 0.3s;
      }
      .js:hover .js-circle {
        background: var(--navy);
        transform: scale(1.08);
      }
      .js-num {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--green2);
        margin-bottom: 0.3rem;
      }
      .js h3 {
        color: var(--ink);
        font-size: 0.92rem;
        margin-bottom: 0.4rem;
      }
      .js p {
        font-size: 0.76rem;
        line-height: 1.6;
      }
      .journey-detail {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin-top: 4rem;
      }
      .jd {
        background: var(--white);
        border-radius: var(--r2);
        padding: 2rem;
        border: 1px solid var(--border);
        box-shadow: var(--sh1);
        display: flex;
        gap: 1.2rem;
        align-items: flex-start;
        transition: all 0.3s;
      }
      .jd:hover {
        transform: translateX(5px);
        box-shadow: var(--sh2);
      }
      .jd-icon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        background: linear-gradient(135deg, var(--navy), var(--green));
      }
      .jd h4 {
        color: var(--ink);
        margin-bottom: 0.4rem;
      }
      .jd p {
        font-size: 0.82rem;
      }

      /* ─────────────────────────────────────────────
   WHAT WE DO · SECTION 3 · SERVICES
───────────────────────────────────────────── */
      .services-full {
        background: var(--white);
      }
      .sf-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-top: 3rem;
      }
      .sfc {
        border-radius: var(--r2);
        padding: 2rem;
        border: 1px solid var(--border);
        background: var(--cream);
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
      }
      .sfc::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--navy), var(--green));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s;
      }
      .sfc:hover::before {
        transform: scaleX(1);
      }
      .sfc:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh2);
        background: var(--white);
      }
      .sfc-icon {
        width: 54px;
        height: 54px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--navy), var(--green));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        margin-bottom: 1.2rem;
      }
      .sfc h3 {
        color: var(--ink);
        margin-bottom: 0.5rem;
      }
      .sfc p {
        font-size: 0.83rem;
      }
      .sfc ul {
        margin-top: 0.8rem;
        padding-left: 1rem;
      }
      .sfc ul li {
        font-size: 0.78rem;
        color: var(--muted);
        line-height: 1.8;
      }

      /* ─────────────────────────────────────────────
   WHAT WE DO · SECTION 4 · MARKETS
───────────────────────────────────────────── */
      .markets-full {
        background: linear-gradient(155deg, var(--navy2), var(--navy));
        position: relative;
        overflow: hidden;
      }
      .markets-full::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse 60% 50% at 85% 60%,
          rgba(21, 160, 64, 0.18) 0%,
          transparent 55%
        );
      }
      .mf-inner {
        position: relative;
        z-index: 1;
      }
      .mf-head {
        margin-bottom: 3rem;
      }
      .mf-head h2 {
        color: #fff;
        margin-bottom: 0.7rem;
      }
      .mf-head p {
        color: rgba(255, 255, 255, 0.62);
        max-width: 500px;
      }
      .mf-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
      }
      .mc {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: var(--r2);
        padding: 1.8rem;
        transition: all 0.3s;
      }
      .mc:hover {
        background: rgba(255, 255, 255, 0.14);
        transform: translateY(-4px);
      }
      .mc-flag {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
      }
      .mc-name {
        font-weight: 700;
        color: #fff;
        font-size: 1rem;
        margin-bottom: 0.2rem;
      }
      .mc-status {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .active-m {
        color: var(--green2) !important;
      }
      .planned-m {
        color: rgba(255, 255, 255, 0.45);
      }
      .mc-desc {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 0.5rem;
        line-height: 1.6;
      }
      .mf-cta {
        margin-top: 3rem;
        text-align: center;
        padding: 2.5rem;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r2);
      }
      .mf-cta h3 {
        color: #fff;
        margin-bottom: 0.6rem;
      }
      .mf-cta p {
        color: rgba(255, 255, 255, 0.6);
        max-width: 420px;
        margin: 0 auto 1.5rem;
      }

      /* ─────────────────────────────────────────────
   ENQUIRY · SECTION 1 · URGENCY HOOK
───────────────────────────────────────────── */
      .enq-hook {
        padding: 8rem 0 4rem;
        background: linear-gradient(150deg, var(--navy2), #0a3015);
        position: relative;
        overflow: hidden;
      }
      .enq-hook::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 55% 60% at 80% 30%,
            rgba(14, 107, 42, 0.25) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 40% 50% at 10% 80%,
            rgba(200, 144, 10, 0.14) 0%,
            transparent 50%
          );
      }
      .eh-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 3rem;
        align-items: center;
      }
      .eh-inner h1 {
        color: #fff;
        margin-bottom: 1.1rem;
      }
      .eh-inner h1 i {
        color: var(--gold2);
        font-style: italic;
      }
      .eh-inner > div > p {
        color: rgba(255, 255, 255, 0.68);
        margin-bottom: 1.8rem;
      }
      .urgency-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
      }
      .upill {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        padding: 0.38rem 1rem;
        border-radius: 2rem;
        font-size: 0.74rem;
        color: #fff;
        font-weight: 600;
      }
      .enq-hook-right {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
      }
      .enq-mini-card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: var(--r);
        padding: 1rem 1.2rem;
        display: flex;
        align-items: center;
        gap: 0.9rem;
      }
      .enq-mini-card span {
        font-size: 0.84rem;
        color: #fff;
      }
      .enq-mini-card strong {
        color: var(--gold2);
        font-size: 0.72rem;
        display: block;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      /* ─────────────────────────────────────────────
   ENQUIRY · SECTION 2 · FORM
───────────────────────────────────────────── */
      .enq-form-sec {
        background: var(--cream);
      }
      .enq-layout {
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        gap: 2.5rem;
        align-items: start;
      }
      .enq-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
      }
      .enq-card {
        background: var(--white);
        border-radius: var(--r2);
        padding: 2rem;
        border: 1px solid var(--border);
        box-shadow: var(--sh1);
      }
      .enq-card h3 {
        color: var(--ink);
        margin-bottom: 1.2rem;
        font-size: 1rem;
      }
      .ec-row {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--border);
      }
      .ec-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .ec-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: var(--green3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        flex-shrink: 0;
      }
      .ec-text strong {
        font-size: 0.78rem;
        color: var(--ink);
        display: block;
      }
      .ec-text span,
      .ec-text a {
        font-size: 0.78rem;
        color: var(--muted);
      }
      .ec-text a:hover {
        color: var(--green);
      }
      .next-steps {
        background: var(--green3);
        border-radius: var(--r2);
        padding: 1.5rem;
        border: 1px solid rgba(14, 107, 42, 0.15);
      }
      .next-steps h4 {
        color: var(--green);
        font-size: 0.88rem;
        margin-bottom: 0.8rem;
      }
      .ns-row {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        margin-bottom: 0.6rem;
      }
      .ns-row:last-child {
        margin-bottom: 0;
      }
      .ns-num {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--green);
        color: #fff;
        font-size: 0.65rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .ns-row span {
        font-size: 0.78rem;
        color: var(--ink);
      }
      .form-box {
        background: var(--white);
        border-radius: var(--r2);
        padding: 2.5rem;
        border: 1px solid var(--border);
        box-shadow: var(--sh1);
      }
      .form-box h2 {
        color: var(--ink);
        margin-bottom: 0.3rem;
      }
      .form-box .fsub {
        font-size: 0.86rem;
        color: var(--muted);
        margin-bottom: 2rem;
      }
      .fg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
      }
      .f-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }
      .f-group.full {
        grid-column: 1/-1;
      }
      label {
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: 0.02em;
      }
      input,
      select,
      textarea {
        padding: 0.78rem 1rem;
        border-radius: 10px;
        border: 1.5px solid var(--border);
        background: var(--cream);
        font-family: "DM Sans", sans-serif;
        font-size: 0.87rem;
        color: var(--ink);
        transition: all 0.22s;
        outline: none;
        width: 100%;
      }
      input:focus,
      select:focus,
      textarea:focus {
        border-color: var(--navy);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(11, 38, 112, 0.08);
      }
      textarea {
        resize: vertical;
        min-height: 110px;
      }
      .check-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-top: 0.3rem;
      }
      .ci {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.78rem;
        cursor: pointer;
      }
      .ci input[type="checkbox"] {
        width: auto;
        cursor: pointer;
        accent-color: var(--navy);
      }
      .form-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.8rem;
        flex-wrap: wrap;
        gap: 1rem;
      }
      .form-note {
        font-size: 0.73rem;
        color: var(--muted);
      }
      .succ {
        display: none;
        background: var(--green3);
        border: 1px solid rgba(14, 107, 42, 0.2);
        border-radius: var(--r);
        padding: 1rem 1.3rem;
        color: var(--green);
        font-size: 0.88rem;
        font-weight: 600;
        margin-top: 1rem;
      }

      /* ─────────────────────────────────────────────
   ENQUIRY · SECTION 3 · TRUST STRIP
───────────────────────────────────────────── */
      .enq-trust {
        background: linear-gradient(135deg, var(--navy), var(--green));
        padding: 3rem 0;
      }
      .et-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
      }
      .et-item {
        text-align: center;
      }
      .et-num {
        font-family: "Fraunces", serif;
        font-size: 2rem;
        font-weight: 900;
        color: var(--gold2);
        line-height: 1;
      }
      .et-label {
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 0.4rem;
      }

      /* ─────────────────────────────────────────────
   CONTACT · SECTION 1 · OPEN INVITATION
───────────────────────────────────────────── */
      .ct-hook {
        padding: 8rem 0 5rem;
        background: linear-gradient(150deg, var(--navy2), #071830);
        position: relative;
        overflow: hidden;
      }
      .ct-hook::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse 60% 70% at 80% 40%,
          rgba(21, 160, 64, 0.16) 0%,
          transparent 55%
        );
      }
      .cth-inner {
        position: relative;
        z-index: 1;
        text-align: center;
        max-width: 700px;
        margin: 0 auto;
      }
      .cth-inner h1 {
        color: #fff;
        margin-bottom: 1rem;
      }
      .cth-inner h1 i {
        color: var(--gold2);
        font-style: italic;
      }
      .cth-inner p {
        color: rgba(255, 255, 255, 0.68);
        font-size: 1.05rem;
        margin-bottom: 2.5rem;
      }
      .ct-quick {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
      }

      /* ─────────────────────────────────────────────
   CONTACT · SECTION 2 · CARDS
───────────────────────────────────────────── */
      .ct-cards-sec {
        background: var(--white);
      }
      .ct-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 3rem;
      }
      .ctc {
        background: var(--cream);
        border-radius: var(--r2);
        padding: 2.5rem 2rem;
        text-align: center;
        border: 1px solid var(--border);
        transition: all 0.3s;
      }
      .ctc:hover {
        transform: translateY(-5px);
        box-shadow: var(--sh2);
        background: #fff;
      }
      .ctc-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        margin: 0 auto 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
      }
      .ctc-icon.g {
        background: var(--green3);
      }
      .ctc-icon.n {
        background: rgba(11, 38, 112, 0.08);
      }
      .ctc-icon.o {
        background: var(--gold3);
      }
      .ctc h3 {
        color: var(--ink);
        margin-bottom: 0.6rem;
      }
      .ctc p,
      .ctc a {
        font-size: 0.86rem;
        color: var(--muted);
      }
      .ctc a:hover {
        color: var(--green);
      }
      .ctc .chip {
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.28rem 0.85rem;
        border-radius: 2rem;
        background: var(--green3);
        color: var(--green);
      }

      /* ─────────────────────────────────────────────
   CONTACT · SECTION 3 · MAP + SOCIAL
───────────────────────────────────────────── */
      .ct-map-sec {
        background: var(--cream);
      }
      .ct-map-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 2.5rem;
        align-items: start;
      }
      .map-box {
        background: linear-gradient(135deg, #e8f0f8, #eef6e8);
        border-radius: var(--r2);
        border: 1px solid var(--border);
        height: 360px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        position: relative;
        overflow: hidden;
      }
      .map-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(11, 38, 112, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(11, 38, 112, 0.05) 1px, transparent 1px);
        background-size: 32px 32px;
      }
      .map-content {
        position: relative;
        z-index: 1;
        text-align: center;
      }
      .map-pin {
        font-size: 3rem;
        animation: bounce 0.8s ease infinite alternate;
      }
      @keyframes bounce {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(-10px);
        }
      }
      .map-content h3 {
        color: var(--navy);
        font-size: 1.2rem;
        margin: 0.5rem 0 0.3rem;
      }
      .map-content p {
        font-size: 0.82rem;
        color: var(--muted);
        max-width: 220px;
        margin: 0 auto 0.8rem;
      }
      .ct-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
      }
      .ct-info-box {
        background: var(--white);
        border-radius: var(--r2);
        padding: 1.8rem;
        border: 1px solid var(--border);
        box-shadow: var(--sh1);
      }
      .ct-info-box h4 {
        color: var(--ink);
        font-size: 0.9rem;
        margin-bottom: 1rem;
      }
      .ct-info-row {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.8rem;
        color: var(--muted);
      }
      .ct-info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .ct-info-row strong {
        color: var(--ink);
        font-size: 0.75rem;
        display: block;
      }
      .social-btns {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
      }
      .soc-btn {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.85rem 1.2rem;
        border-radius: var(--r);
        border: 1.5px solid var(--border);
        background: var(--white);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink);
        transition: all 0.25s;
        cursor: pointer;
        font-family: "DM Sans", sans-serif;
      }
      .soc-btn:hover {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
      }

      /* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
      footer {
        background: var(--navy2);
        color: #fff;
        padding: 4rem 0 1.8rem;
      }
      .ft-grid {
        display: grid;
        grid-template-columns: 2.2fr 1fr 1fr 1fr;
        gap: 3rem;
        margin-bottom: 3rem;
      }
      .ft-brand img {
        height: 44px;
        margin-bottom: 1rem;
        filter: brightness(1.3);
      }
      .ft-brand p {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.48);
        line-height: 1.75;
        max-width: 260px;
      }
      .ft-cert-row {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
        flex-wrap: wrap;
      }
      .ft-cert {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        padding: 0.22rem 0.7rem;
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.55);
      }
      .ft-col h5 {
        font-size: 0.68rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 1.1rem;
      }
      .ft-col ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .ft-col ul a {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.58);
        transition: color 0.2s;
      }
      .ft-col ul a:hover {
        color: var(--gold2);
      }
      .ft-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.8rem;
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.35);
      }

      /* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
      @media (max-width: 1024px) {
        .hero-inner,
        .about-hook-inner,
        .mission-grid,
        .quality-grid,
        .sourcing-box,
        .ph-inner,
        .enq-layout,
        .ct-map-grid,
        .eh-inner {
          grid-template-columns: 1fr;
        }
        .hero-right,
        .about-hook-right,
        .quality-right,
        .sourcing-right,
        .ph-right {
          display: none;
        }
        .prod-grid,
        .prod-full-grid,
        .sf-grid,
        .tv-grid,
        .certs-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .trust-inner {
          grid-template-columns: repeat(3, 1fr);
        }
        .why-grid,
        .mf-grid,
        .ct-cards {
          grid-template-columns: 1fr 1fr;
        }
        .journey-steps {
          grid-template-columns: repeat(3, 1fr);
        }
        .journey-steps::before {
          display: none;
        }
        .ft-grid {
          grid-template-columns: 1fr 1fr;
        }
        .et-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .enq-layout {
          grid-template-columns: 1fr;
        }
        .ct-map-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 640px) {
        nav {
          display: none;
        }
        .hbg {
          display: flex;
        }
        .prod-grid,
        .prod-full-grid,
        .sf-grid,
        .tv-grid {
          grid-template-columns: 1fr;
        }
        .certs-grid,
        .why-grid,
        .mf-grid,
        .ct-cards {
          grid-template-columns: 1fr;
        }
        .trust-inner {
          grid-template-columns: repeat(2, 1fr);
        }
        .why-stat-row,
        .et-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .journey-steps {
          grid-template-columns: 1fr 1fr;
        }
        .values-grid,
        .journey-detail {
          grid-template-columns: 1fr;
        }
        .ft-grid {
          grid-template-columns: 1fr;
        }
        .hero-btns,
        .cta-btns,
        .ct-quick {
          flex-direction: column;
        }
        .btn {
          width: 100%;
          justify-content: center;
        }
        .cta-box {
          grid-template-columns: 1fr;
        }
        .fg {
          grid-template-columns: 1fr;
        }
        h1 {
          font-size: 2.2rem;
        }
        h2 {
          font-size: 1.6rem;
        }
      }