/* ==========================================================
   Oceanhold Exports — site styles
   Palette & type follow the Website Strategy blueprint
   ========================================================== */

/* Times New Roman reads small next to these sizes, so scale it up without touching the headings */
@font-face {
  font-family: "Body Times";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times");
  font-weight: 400;
  size-adjust: 112%;
}
@font-face {
  font-family: "Body Times";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Times Bold");
  font-weight: 600 700;
  size-adjust: 112%;
}

:root {
  --forest: #24372b;
  --forest-deep: #1a2a20;
  --forest-soft: #34493b;
  --linen: #f6f1e7;
  --linen-2: #ede4d3;
  --linen-3: #e3d6bf;
  --earth: #ad8055;
  --earth-dark: #8a6440;
  --gold: #b88a4a;
  --charcoal: #35342f;
  --muted: #6b675d;
  --line: rgba(53, 52, 47, 0.14);
  --white: #fffdf8;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Body Times", "Times New Roman", Times, Georgia, serif;

  --wrap: 1200px;
  --header-h: 86px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(36, 30, 20, 0.06), 0 8px 24px rgba(36, 30, 20, 0.07);
  --shadow-lg: 0 2px 4px rgba(36, 30, 20, 0.06), 0 18px 40px rgba(36, 30, 20, 0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.section { padding: 104px 0; }
.section--tight { padding: 72px 0; }
.bg-linen-2 { background: var(--linen-2); }
.bg-white { background: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--forest); color: var(--white); padding: 10px 16px; border-radius: 6px;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--earth); outline-offset: 3px; border-radius: 4px; }

/* ---------- Eyebrow / headings ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--earth-dark);
  margin-bottom: 18px;
}
.eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--earth); opacity: 0.7; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { content: ""; width: 56px; height: 1px; background: var(--earth); opacity: 0.7; }
.eyebrow--light { color: #d9bf94; }
.eyebrow--light::after, .eyebrow--light::before { background: #d9bf94; }

.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.section-head--left { text-align: left; margin-left: 0; }

.lead { font-size: 1.12rem; color: #4a4840; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--forest); color: var(--white); }
.btn--primary:hover { background: var(--forest-deep); box-shadow: 0 8px 20px rgba(26, 42, 32, 0.25); }
.btn:disabled { opacity: 0.65; cursor: wait; box-shadow: none; }
.btn--outline { border-color: var(--earth); color: var(--forest-deep); background: transparent; }
.btn--outline:hover { background: var(--earth); color: var(--white); }
.btn--light { background: var(--linen); color: var(--forest-deep); }
.btn--light:hover { background: var(--white); }
.btn--ghost-light { border-color: rgba(246, 241, 231, 0.5); color: var(--linen); }
.btn--ghost-light:hover { background: rgba(246, 241, 231, 0.1); border-color: var(--linen); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.92rem; color: var(--forest);
  border-bottom: 1px solid var(--earth); padding-bottom: 2px;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 241, 231, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(36, 30, 20, 0.05); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 86px; gap: 24px; }

.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.logo__name {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.9rem; letter-spacing: 0.02em; color: var(--forest-deep);
}
.logo__sub {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.42em; color: var(--earth-dark);
  padding-left: 0.42em;
}
.logo__sub::before, .logo__sub::after { content: ""; width: 26px; height: 1px; background: var(--earth); }
.logo--light .logo__name { color: var(--linen); }
.logo--light .logo__sub { color: #d9bf94; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__list { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; font-family: var(--serif); font-size: 1.12rem; font-weight: 500;
  color: var(--charcoal); padding: 6px 0; transition: color 0.2s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--earth); transform: scaleX(0); transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--forest-deep); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--forest-deep); font-weight: 600; }
.nav .btn { padding: 11px 20px; font-size: 1.02rem; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 1.6px; background: var(--forest-deep);
  position: relative; transition: all 0.3s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* Header over a dark section (photo banners, dark bands, footer): see-through with a white brand */
.logo__name, .logo__sub, .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: color 0.35s, background-color 0.35s; }
/* At the very top of the page (before scrolling) the header has no background over the banner */
body:not(.nav-open) .site-header.on-dark:not(.is-scrolled) {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Over any dark background (banners, dark green bands, footer): white OCEANHOLD with gold EXPORTS */
body:not(.nav-open) .site-header.on-dark .logo__name { color: #fff; }
body:not(.nav-open) .site-header.on-dark .logo__sub { color: #e6c88e; }
body:not(.nav-open) .site-header.on-home-hero .logo__name { color: #fff; }
body:not(.nav-open) .site-header.on-home-hero .logo__sub { color: #e6c88e; }
body:not(.nav-open) .site-header.on-dark .logo__sub::before,
body:not(.nav-open) .site-header.on-dark .logo__sub::after { background: #d9bf94; }
body:not(.nav-open) .site-header.on-dark .nav__link { color: rgba(255, 255, 255, 0.86); }
body:not(.nav-open) .site-header.on-dark .nav__link:hover,
body:not(.nav-open) .site-header.on-dark .nav__link[aria-current="page"] { color: #fff; }
body:not(.nav-open) .site-header.on-dark .nav__link::after { background: #f2dcb2; }
body:not(.nav-open) .site-header.on-dark .nav .btn--primary { background: #f2dcb2; border-color: #f2dcb2; color: var(--forest-deep); }
body:not(.nav-open) .site-header.on-dark .nav-toggle { border-color: rgba(255, 255, 255, 0.4); }

/* Once scrolling starts, the full-width bar takes the colour of the section behind it
   (cream on cream, white on white, beige on beige, dark on dark). The script sets --hdr-bg */
body:not(.nav-open) .site-header.is-scrolled { background: var(--hdr-bg, rgba(246, 241, 231, 0.94)); }
body:not(.nav-open) .site-header.is-scrolled.on-dark { border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); }
body.nav-open .site-header { background: rgba(246, 241, 231, 0.97); }
body:not(.nav-open) .site-header.on-dark .nav-toggle span,
body:not(.nav-open) .site-header.on-dark .nav-toggle span::before,
body:not(.nav-open) .site-header.on-dark .nav-toggle span::after { background: #fff; }

/* The first banner on every page slides up behind the header */
.hero-sea, .story-hero, .page-hero { margin-top: calc(-1 * var(--header-h)); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(100deg, var(--linen) 0%, var(--linen) 40%, var(--linen-2) 100%); }
.hero__inner { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; min-height: 620px; }
.hero__copy { position: relative; z-index: 2; padding: 80px 0; max-width: 540px; }
.hero__copy h1 { margin-bottom: 26px; }
.hero__copy h1 em { font-style: italic; color: var(--earth-dark); font-weight: 500; }
.hero__copy .lead { max-width: 480px; margin-bottom: 36px; }
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--linen) 0%, rgba(246, 241, 231, 0.6) 14%, rgba(246, 241, 231, 0) 36%);
}
.hero__tagline {
  position: absolute; z-index: 2; right: 28px; bottom: 26px;
  background: rgba(26, 42, 32, 0.82); color: var(--linen);
  font-family: var(--serif); font-style: italic; font-size: 1.1rem;
  padding: 10px 18px; border-radius: 6px; backdrop-filter: blur(4px);
}

/* Page hero (inner pages) */
.page-hero { position: relative; background: var(--forest-deep); color: var(--linen); overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26, 42, 32, 0.96) 0%, rgba(26, 42, 32, 0.78) 50%, rgba(26, 42, 32, 0.45) 100%);
}
/* Full-screen photo banner (Products): the photo shows at full strength and fills the first screen */
.page-hero--full { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; background: #1c120b; }
.page-hero--full .wrap { width: 100%; padding-top: calc(40px + var(--header-h)); padding-bottom: 56px; }
.page-hero--full .page-hero__bg img { opacity: 1; object-position: 18% 50%; }
/* Keep the heading and intro on the dark, empty side of the photo */
.page-hero.page-hero--full h1 { max-width: 560px; }
.page-hero.page-hero--full p { max-width: 470px; }
.page-hero--full .page-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(20, 12, 6, 0.78) 0%, rgba(20, 12, 6, 0.5) 38%, rgba(20, 12, 6, 0) 62%),
    linear-gradient(180deg, rgba(10, 6, 3, 0.5) 0%, rgba(10, 6, 3, 0) 170px);
}
@media (max-width: 900px) {
  .page-hero--full .page-hero__bg img { object-position: 70% 50%; }
  .page-hero--full .page-hero__bg::after {
    background: linear-gradient(180deg, rgba(20, 12, 6, 0.7) 0%, rgba(20, 12, 6, 0.55) 55%, rgba(20, 12, 6, 0.3) 100%);
  }
}
/* Sea photo banner (Contact cargo ship): open sea on the left carries the text, ship and port on the right.
   Phones load a portrait photo with sea at the top, so the text moves to the top there */
.page-hero__bg picture { display: block; width: 100%; height: 100%; }
.page-hero--sea { background: #011d2f; }
.page-hero--sea .page-hero__bg img { object-position: 50% 50%; }
.page-hero--sea .page-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(1, 22, 34, 0.75) 0%, rgba(1, 22, 34, 0.45) 38%, rgba(1, 22, 34, 0) 60%),
    linear-gradient(180deg, rgba(1, 22, 34, 0.45) 0%, rgba(1, 22, 34, 0) 160px);
}
@media (max-width: 900px) {
  .page-hero--sea { align-items: flex-start; }
  .page-hero--sea .page-hero__bg img { object-position: 50% 50%; }
  .page-hero--sea .page-hero__bg::after {
    background: linear-gradient(180deg, rgba(1, 22, 34, 0.8) 0%, rgba(1, 22, 34, 0.55) 40%, rgba(1, 22, 34, 0) 62%);
  }
}
/* Green photo banner (Our Sourcing tea field): the whole photo is busy green, so a deep green fade
   covers the left for the text, and the photo is anchored right to keep the pickers in view */
.page-hero--green { background: #0b2414; }
.page-hero.page-hero--green h1 { max-width: 700px; }
.page-hero.page-hero--green p { max-width: 580px; }
.page-hero--green .wrap { padding-top: calc(24px + var(--header-h)); padding-bottom: 40px; }
/* A light contrast and colour lift keeps the tea rows crisp; the fade only darkens the text side */
.page-hero--green .page-hero__bg img { object-position: 72% 50%; filter: contrast(1.08) saturate(1.12); }
.page-hero--green .page-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(5, 22, 11, 0.82) 0%, rgba(5, 22, 11, 0.58) 34%, rgba(5, 22, 11, 0.08) 56%, rgba(5, 22, 11, 0) 64%),
    linear-gradient(180deg, rgba(5, 22, 11, 0.45) 0%, rgba(5, 22, 11, 0) 150px);
}
@media (max-width: 900px) {
  .page-hero--green .page-hero__bg img { object-position: 74% 50%; }
  .page-hero--green .page-hero__bg::after {
    background: linear-gradient(180deg, rgba(5, 22, 11, 0.8) 0%, rgba(5, 22, 11, 0.6) 55%, rgba(5, 22, 11, 0.25) 100%);
  }
}
/* Home banner on narrower laptops: the photo is cropped tighter, so the left side is darkened more for the text */
@media (min-width: 901px) and (max-width: 1279px) {
  .hero-sea__img::after {
    background:
      linear-gradient(90deg, rgba(0, 20, 32, 0.82) 0%, rgba(0, 20, 32, 0.6) 42%, rgba(0, 20, 32, 0) 70%),
      linear-gradient(180deg, rgba(0, 20, 32, 0.55) 0%, rgba(0, 20, 32, 0) 170px);
  }
}
.page-hero .wrap { position: relative; z-index: 1; padding-top: calc(110px + var(--header-h)); padding-bottom: 100px; }
.page-hero h1 { color: var(--linen); max-width: 760px; }
.page-hero p { max-width: 620px; font-size: 1.1rem; color: rgba(246, 241, 231, 0.82); margin: 0; }
.breadcrumb { font-size: 0.82rem; color: rgba(246, 241, 231, 0.6); margin-bottom: 22px; letter-spacing: 0.04em; }
.breadcrumb a:hover { color: var(--linen); }

/* ---------- Highlights route (home): a ship sails India to the world as you scroll ---------- */
.route-band { position: relative; overflow: hidden; padding: 80px 0 24px; background: var(--linen); color: #4d4033; }
.route-band__head { position: relative; text-align: center; margin-bottom: 26px; }
.route-band__head .eyebrow { margin-bottom: 0; color: #7a4f2a; }
.route-band__head .eyebrow::before, .route-band__head .eyebrow::after { background: #9a6c43; }
.route-band__route { position: relative; }
.route-band__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100px; overflow: visible; }
.route-band__svg path { fill: none; vector-effect: non-scaling-stroke; }
.route-band__base { stroke: rgba(90, 58, 30, 0.5); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.route-band__done { stroke: #7a4f2a; stroke-width: 2.2; }
.route-band__ship {
  position: absolute; left: 0; top: 50px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--forest-deep); color: #f2dcb2; display: grid; place-items: center; z-index: 2;
  box-shadow: 0 0 0 6px rgba(26, 42, 32, 0.14), 0 6px 14px rgba(45, 28, 12, 0.3);
}
.route-band__ship .icon { width: 24px; height: 24px; stroke-width: 1.6; }
.route-band__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.route-band__stops li { position: relative; padding: 124px 18px 0; text-align: center; }
.route-band__stops li::before {
  content: ""; position: absolute; left: 50%; top: 50px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--linen); border: 1.5px solid rgba(90, 58, 30, 0.6); transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.route-band__stops li.is-on::before { background: #7a4f2a; box-shadow: 0 0 0 6px rgba(122, 79, 42, 0.2); }
.route-band__stops .icon { width: 30px; height: 30px; color: #7a4f2a; margin-bottom: 12px; opacity: 0.5; transition: opacity 0.6s var(--ease); }
.route-band__stops li.is-on .icon { opacity: 1; }
.route-band__stops h3 { font-size: clamp(1.25rem, 1.7vw, 1.45rem); font-weight: 600; line-height: 1.2; color: var(--forest-deep); margin-bottom: 10px; }
.route-band__stops h3 em { display: block; font-weight: 500; color: #7a4f2a; }
.route-band__stops p { margin: 0 auto; max-width: 250px; font-size: 0.93rem; line-height: 1.6; color: #4d4033; }
.route-band__vsvg { display: none; }
@media (max-width: 860px) {
  .route-band { padding: 64px 0 8px; }
  .route-band__svg, .route-band__ship { display: none; }
  .route-band__stops { position: relative; grid-template-columns: 1fr; gap: 34px; padding-left: 34px; }
  .route-band__stops::before { content: ""; position: absolute; left: 12.5px; top: 8px; bottom: 8px; width: 1px; background: rgba(90, 58, 30, 0.45); }
  .route-band__stops li { padding: 0; text-align: left; }
  .route-band__stops li::before { left: -28px; top: 9px; margin: 0; }
  .route-band__stops p { margin: 0; max-width: none; }
  /* The script draws a wavy route through the dots; it replaces the straight line */
  .route-band__stops.has-curve::before { display: none; }
  .route-band__vsvg { display: block; position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
  .route-band__vsvg path { fill: none; }
}
/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-badge {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--linen-2); color: var(--earth-dark); flex: none;
}
.icon-badge .icon { width: 30px; height: 30px; }

/* ---------- Product cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.p-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.p-card__img { aspect-ratio: 1 / 0.92; overflow: hidden; }
.p-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.p-card:hover .p-card__img img { transform: scale(1.05); }
.p-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.p-card__tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--earth-dark); margin-bottom: 6px; }
.p-card h3 { font-size: 1.5rem; margin-bottom: 6px; }
.p-card p { font-size: 0.92rem; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
.p-card__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--forest);
}
.p-card__foot svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.p-card:hover .p-card__foot svg { transform: translateX(4px); }

/* Additional sourcing */
.sourcing-band {
  margin-top: 56px; padding: 40px; border-radius: var(--radius);
  background: var(--linen-2); border: 1px solid var(--line);
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center;
}
.sourcing-band h3 { font-size: 1.9rem; font-weight: 500; }
.sourcing-band p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chip {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--forest-deep);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.chip:hover { border-color: var(--earth); transform: translateY(-2px); }
.chip .icon { color: var(--earth); width: 26px; height: 26px; flex: none; }

/* ---------- Split sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split--wide-media { grid-template-columns: 1.1fr 0.9fr; }
.split__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--tall { aspect-ratio: 4 / 4.6; }
.split__media--land { aspect-ratio: 4 / 3.3; }
.quote {
  border-left: 2px solid var(--earth); padding: 6px 0 6px 22px; margin: 28px 0 32px;
  font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.45; color: var(--forest);
}

.check-list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .icon { color: var(--earth); width: 22px; height: 22px; flex: none; margin-top: 3px; }

/* ---------- Dark feature section ---------- */
.dark { background: var(--forest-deep); color: rgba(246, 241, 231, 0.82); position: relative; overflow: hidden; }
.dark h2, .dark h3, .dark h4 { color: var(--linen); }
.dark .section-head p { color: rgba(246, 241, 231, 0.7); }
.dark__pattern { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(246, 241, 231, 0.12); border: 1px solid rgba(246, 241, 231, 0.12); border-radius: var(--radius); overflow: hidden; }
.feature { background: var(--forest-deep); padding: 38px 34px; transition: background 0.3s; }
.feature:hover { background: #20332a; }
.feature .icon { width: 38px; height: 38px; color: #d9bf94; margin-bottom: 20px; }
.feature h3 { font-size: 1.5rem; margin-bottom: 10px; }
.feature p { font-size: 0.94rem; margin: 0; line-height: 1.65; }

.statement { text-align: center; margin-top: 56px; font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-style: italic; color: var(--linen); }
.statement span { color: #d9bf94; }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; counter-reset: step; }
.process::before {
  content: ""; position: absolute; top: 36px; left: 10%; right: 10%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--earth) 0 6px, transparent 6px 12px);
}
.step { position: relative; text-align: center; padding: 0 14px; }
.step__icon {
  position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--earth);
  display: flex; align-items: center; justify-content: center; color: var(--forest);
  transition: background 0.3s, color 0.3s;
}
.step:hover .step__icon { background: var(--forest); color: var(--linen); }
.step__icon .icon { width: 30px; height: 30px; }
.step__num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; color: var(--earth-dark); margin-bottom: 6px; }
.step h4 { font-size: 1.28rem; margin-bottom: 8px; }
.step p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* Process — detailed list (sourcing page) */
.process-list { display: grid; gap: 18px; counter-reset: pl; }
.process-row {
  display: grid; grid-template-columns: 90px 1fr 1.3fr; gap: 32px; align-items: center;
  background: var(--white); border-radius: var(--radius); padding: 30px 34px; box-shadow: var(--shadow);
}
.process-row__num { font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--earth); font-weight: 500; }
.process-row h3 { margin: 0; font-size: 1.6rem; }
.process-row p { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* ---------- Docs / certs ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.doc {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line);
}
.doc h4 { margin: 2px 0 4px; font-size: 1.3rem; }
.doc p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

.cert-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cert {
  text-align: center; padding: 32px 22px; background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.cert .icon-badge { display: flex; width: 74px; height: 74px; margin: 0 auto 16px; }
.cert .icon-badge .icon { width: 34px; height: 34px; }
.cert h4 { margin-bottom: 8px; }
.cert p { margin: 0; font-size: 0.88rem; color: var(--muted); }

/* ---------- Product detail (products page) ---------- */
.subnav { position: sticky; top: 86px; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.subnav__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 12px 0; overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
/* Auto margins centre the items but still let a narrow screen scroll to the first one */
.subnav__list li:first-child { margin-left: auto; }
.subnav__list li:last-child { margin-right: auto; }
.subnav a {
  display: block; padding: 8px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 0.88rem; font-weight: 600; color: var(--muted); border: 1px solid transparent;
  transition: all 0.2s;
}
.subnav a:hover { color: var(--forest-deep); border-color: var(--line); }
.subnav a.is-active { background: var(--forest); color: var(--linen); }



.uses { margin-bottom: 28px; }
.uses h4 { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--earth-dark); margin-bottom: 12px; }
.uses ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.uses li { position: relative; padding-left: 18px; font-size: 0.95rem; }
.uses li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--earth); }

.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; font-size: 0.92rem; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.spec-table th, .spec-table td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 38%; font-weight: 600; color: var(--forest-deep); background: #fbf8f1; }
.spec-table td { color: var(--muted); }


/* Additional sourcing cards (products page) */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.more-card {
  padding: 30px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.more-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.more-card .icon { width: 40px; height: 40px; color: var(--earth); margin-bottom: 16px; }
.more-card h3 { font-size: 1.5rem; margin-bottom: 6px; }
.more-card p { font-size: 0.9rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* Packaging */
.pack-strip { border-radius: var(--radius); overflow: hidden; margin-top: 56px; box-shadow: var(--shadow); }
.pack-strip img { width: 100%; height: auto; }   /* shows the whole photo at its own shape, no cropping */
.pack-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.pack-opt { text-align: center; padding: 26px 18px; }
.pack-opt .icon { width: 38px; height: 38px; color: var(--forest); margin-bottom: 14px; }
.pack-opt h4 { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.pack-opt p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.55; }
.pack-opt + .pack-opt { border-left: 1px solid var(--line); }

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 28px; }
.tag-list li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.88rem; background: var(--white); }

/* Values (about) */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value { padding: 32px 26px; background: var(--white); border-radius: var(--radius); border-top: 3px solid var(--earth); box-shadow: var(--shadow); }
.value .icon { width: 34px; height: 34px; color: var(--forest); margin-bottom: 16px; }
.value h3 { font-size: 1.45rem; margin-bottom: 8px; }
.value p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.65; }

.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv__card { padding: 44px; border-radius: var(--radius); background: var(--forest); color: rgba(246, 241, 231, 0.85); }
.mv__card:nth-child(2) { background: var(--linen-2); color: var(--charcoal); }
.mv__card h3 { color: inherit; font-size: 2rem; font-weight: 500; }
.mv__card:first-child h3 { color: var(--linen); }
.mv__card p { margin: 0; font-size: 1.02rem; }

.audience { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.audience div {
  padding: 22px 18px; border: 1px solid rgba(246, 241, 231, 0.18); border-radius: 8px; text-align: center;
  font-family: var(--serif); font-size: 1.2rem; color: var(--linen);
}
.audience .icon { display: block; margin: 0 auto 12px; width: 32px; height: 32px; color: #d9bf94; }

/* ---------- CTA band ---------- */
.cta { position: relative; background: var(--forest); color: rgba(246, 241, 231, 0.85); overflow: hidden; text-align: center; }
.cta .wrap { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 96px; }
.cta h2 { color: var(--linen); max-width: 760px; margin: 0 auto 18px; }
.cta p { max-width: 620px; margin: 0 auto 34px; font-size: 1.05rem; }
.cta .btn-row { justify-content: center; }
.cta__art { position: absolute; color: rgba(217, 191, 148, 0.13); pointer-events: none; }
.cta__art--l { left: -40px; bottom: -40px; width: 340px; }
.cta__art--r { right: -30px; top: -30px; width: 300px; transform: scaleX(-1) rotate(20deg); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.contact-card { background: var(--forest-deep); color: rgba(246, 241, 231, 0.82); border-radius: var(--radius); padding: 44px 40px; position: sticky; top: 110px; }
.contact-card h3 { color: var(--linen); font-size: 2rem; font-weight: 500; }
.contact-item { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(246, 241, 231, 0.14); }
.contact-item:first-of-type { border-top: 0; }
.contact-item .icon { flex: none; width: 24px; height: 24px; color: #d9bf94; margin-top: 3px; }
.contact-item strong { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #d9bf94; margin-bottom: 4px; }
.contact-item a:hover { color: var(--linen); text-decoration: underline; text-underline-offset: 3px; }
.contact-item address { font-style: normal; }

.form { background: var(--white); border-radius: var(--radius); padding: 44px; box-shadow: var(--shadow); }
.form h3 { font-size: 2rem; font-weight: 500; }
.form > p { color: var(--muted); margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--forest-deep); }
.field label span { color: var(--earth-dark); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--linen-3); border-radius: 6px;
  background: #fdfbf6; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--earth); box-shadow: 0 0 0 3px rgba(173, 128, 85, 0.15); background: var(--white); }
.field.has-error input, .field.has-error select { border-color: #b4483a; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.form-note { font-size: 0.82rem; color: var(--muted); margin: 0; max-width: 360px; }
.form-status { margin-top: 18px; padding: 14px 18px; border-radius: 6px; background: var(--linen-2); font-size: 0.92rem; display: none; }
.form-status.is-visible { display: block; }

.quick-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.quick-ctas button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--linen);
  font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.quick-ctas button:hover, .quick-ctas button.is-active { background: var(--forest); color: var(--linen); border-color: var(--forest); }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-deep); color: rgba(246, 241, 231, 0.7); font-size: 0.92rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 340px); gap: 48px 96px; padding-top: 80px; padding-bottom: 56px; }
.footer-top h4 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #d9bf94; margin-bottom: 20px; }
.footer-top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-top a:hover { color: var(--linen); }
.footer-brand p { margin: 22px 0 0; max-width: 320px; line-height: 1.7; }
.footer-brand .logo { align-items: flex-start; }
.footer-brand .logo__sub::before { display: none; }
.footer-contact li { display: flex; gap: 10px; }
.footer-contact .icon { width: 18px; height: 18px; color: #d9bf94; flex: none; margin-top: 4px; }
/* The divider line spans exactly the content width, with the page's side margins kept on every screen */
.footer-bottom.wrap {
  width: calc(100% - 56px); max-width: calc(var(--wrap) - 56px); padding: 24px 0;
  border-top: 1px solid rgba(246, 241, 231, 0.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem;
}
.footer-bottom em { font-family: var(--serif); font-size: 1.05rem; color: var(--linen); }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: #1f8f57; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); transition: transform 0.25s var(--ease);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Sea hero (home) ---------- */
.btn--gold { background: #f2dcb2; color: var(--forest-deep); }
.btn--gold:hover { background: #f8e8c8; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); }
.hero-sea { position: relative; overflow: hidden; padding-top: var(--header-h); background: #011d2f; color: rgba(246, 241, 231, 0.88); }
.hero-sea__img { position: absolute; inset: 0; }
.hero-sea__img picture { display: block; width: 100%; height: 100%; }
.hero-sea__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-sea__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 20, 32, 0.66) 0%, rgba(0, 20, 32, 0.4) 34%, rgba(0, 20, 32, 0) 56%),
    linear-gradient(180deg, rgba(0, 20, 32, 0.55) 0%, rgba(0, 20, 32, 0) 170px);
}
.hero-sea .wrap { position: relative; z-index: 1; width: 100%; }
.hero-sea__copy { max-width: 540px; padding: 52px 0 56px; }
/* Laptops and desktops: the banner fills the whole first screen with the photo behind the headline.
   The photo is wider than most screens, so it is anchored to the right to keep the ship and spices in view */
@media (min-width: 901px) {
  .hero-sea { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; }
  .hero-sea__img img { object-position: 78% 50%; }
  .hero-sea__copy { padding: 24px 0 32px; }
}
.hero-sea .eyebrow { margin-bottom: 14px; }
.hero-sea h1 { color: var(--white); font-size: clamp(2.5rem, 4.3vw, 3.6rem); margin-bottom: 30px; }
.hero-sea h1 em { color: #f2dcb2; font-style: italic; }
.hero-sea .lead { color: rgba(246, 241, 231, 0.9); font-size: 1rem; line-height: 1.65; margin-bottom: 26px; max-width: 460px; }
.hero-sea .btn { padding: 12px 22px; }

/* ---------- Product catalogue ---------- */
.range-link { text-align: center; margin: 40px 0 0; }
.cat-meta { font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--earth-dark) !important; margin: 0; }
.showcase { scroll-margin-top: 150px; }
.no-js .showcase__picks, .no-js .showcase__hint, .no-js .panel__close, .no-js .panel__nav { display: none; }
.showcase__picks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pick {
  display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; overflow: hidden;
  background: var(--white); border: 2px solid transparent; border-radius: 10px; box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s, opacity 0.3s;
}
.pick:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.is-open .pick:not([aria-expanded="true"]) { opacity: 0.68; }
.is-open .pick:hover { opacity: 1; }
.pick[aria-expanded="true"] { border-color: var(--earth); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.pick__img { display: block; aspect-ratio: 1 / 0.82; overflow: hidden; background: #0f3a37; }
.is-open .pick__img { aspect-ratio: 16 / 7; }
.is-open .pick__text { padding: 6px 9px 7px; }
.is-open .pick__text b { font-size: 0.98rem; }
.is-open .pick__text small { display: none; }
.pick__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pick:hover .pick__img img, .pick[aria-expanded="true"] .pick__img img { transform: scale(1.07); }
.pick__text { display: block; flex: 1; padding: 9px 11px 10px; transition: background 0.3s; }
.pick__text b { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.15; color: var(--forest-deep); transition: color 0.3s; }
.pick__text small { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--muted); transition: color 0.3s; }
.pick[aria-expanded="true"] .pick__text { background: var(--forest); }
.pick[aria-expanded="true"] .pick__text b { color: var(--linen); }
.pick[aria-expanded="true"] .pick__text small { color: #e6c996; }
.showcase__hint { text-align: center; margin: 18px 0 0; font-size: 0.9rem; font-style: italic; color: var(--muted); }
.is-open .showcase__hint { display: none; }
.showcase__stage { position: relative; margin-top: 20px; }
.panel { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: var(--white); border-radius: 12px; overflow: clip; box-shadow: var(--shadow-lg); animation: panel-open 0.45s var(--ease) both; }
.panel[hidden] { display: none; }
.no-js .panel + .panel { margin-top: 20px; }
@keyframes panel-open { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes media-in { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes info-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.panel__media { position: relative; overflow: hidden; background: #0f3a37; animation: media-in 0.6s var(--ease) both; }
.panel__media img, .panel__media .cc__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 28, 26, 0.34) 0%, rgba(8, 28, 26, 0) 28%); }
.panel__num { position: absolute; z-index: 1; left: 16px; top: 12px; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; line-height: 1; color: var(--white); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.panel__info { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-content: start; padding: 20px 52px 20px 28px; }
.panel__info > * { grid-column: 1 / -1; }
.panel__info > .plist { grid-column: 1; }
.panel__info > .pabout { grid-column: 2; }
.panel__info > * { animation: info-in 0.5s var(--ease) both; }
.panel__info > :nth-child(2) { animation-delay: 0.05s; }
.panel__info > :nth-child(3) { animation-delay: 0.1s; }
.panel__info > :nth-child(4) { animation-delay: 0.15s; }
.panel__info > :nth-child(5) { animation-delay: 0.2s; }
.panel__info > :nth-child(6) { animation-delay: 0.25s; }
.panel__info > :nth-child(7) { animation-delay: 0.3s; }
.panel__info > :nth-child(8) { animation-delay: 0.35s; }
.panel__info > :nth-child(n + 9) { animation-delay: 0.4s; }
.panel__info .eyebrow { margin-bottom: 4px; font-size: 0.66rem; }
.panel__sub { display: none; }
.panel__name { font-size: 1.75rem; font-weight: 500; margin-bottom: 12px; }
.panel__info .lead { font-size: 0.92rem; line-height: 1.45; margin-bottom: 10px; }
.plist { margin-bottom: 14px; }
.plist h4, .pabout h4 { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--earth-dark); margin: 0 0 9px; }
.plist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pitem {
  width: 100%; height: 100%; padding: 8px 11px; text-align: left; cursor: pointer; background: var(--linen);
  border: 1px solid var(--linen-3); border-radius: 7px;
  font-family: var(--serif); font-size: 1.04rem; font-weight: 600; line-height: 1.15; color: var(--forest-deep);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.pitem:hover { border-color: var(--earth); background: var(--white); transform: translateY(-1px); }
.pitem[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--linen); }
.pabout { min-height: 190px; margin-bottom: 14px; padding: 15px 18px; background: #faf6ee; border-radius: 10px; }
.pabout__item { display: none; }
.pabout__item.is-on { display: block; animation: pane-in 0.35s var(--ease) both; }
.no-js .pabout__item { display: block; margin-top: 14px; }
@keyframes pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pabout p { font-size: 0.94rem; line-height: 1.5; margin: 0 0 12px; }
.pabout h5 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--forest-deep); margin: 0 0 8px; }
.pabout p.pabout__note { margin: 0; font-size: 0.8rem; font-style: italic; color: var(--muted); }
.panel__info .btn-row { gap: 8px; }
.panel__info .btn { padding: 8px 16px; font-size: 0.96rem; }
.panel__close {
  position: absolute; z-index: 2; right: 12px; top: 10px; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--white); color: var(--forest-deep); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.panel__close:hover { background: var(--forest); color: var(--linen); }
.panel__nav {
  position: absolute; z-index: 3; top: 50%; width: 42px; height: 42px; display: none; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--forest-deep); box-shadow: var(--shadow-lg); cursor: pointer;
  transform: translateY(-50%); transition: background 0.2s, color 0.2s, transform 0.25s var(--ease);
}
.is-open .panel__nav { display: flex; }
.panel__nav--prev { left: -23px; }
.panel__nav--next { right: -23px; }
.panel__nav--prev .icon { transform: rotate(180deg); }
.panel__nav:hover { background: var(--forest); color: var(--linen); transform: translateY(-50%) scale(1.08); }
.cc__art {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #e6c996;
  background:
    radial-gradient(circle at 50% 50%, rgba(230, 201, 150, 0.16) 0 26%, transparent 26.5%),
    radial-gradient(circle at 50% 50%, rgba(230, 201, 150, 0.08) 0 40%, transparent 40.5%),
    linear-gradient(145deg, #17504a, #0a2f2d);
}
.cc__art .icon { width: 46px; height: 46px; stroke-width: 1; }
.pick .cc__art .icon { width: 34px; height: 34px; }
.product-grid.product-grid--cats { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.product-grid--cats .p-card { border-radius: 10px; }
.product-grid--cats .p-card__img { aspect-ratio: 1 / 0.85; }
.product-grid--cats .p-card__body { padding: 12px 12px 13px; }
.product-grid--cats .p-card__tag { font-size: 0.6rem; letter-spacing: 0.14em; margin-bottom: 3px; }
.product-grid--cats h3 { font-size: 1.14rem; line-height: 1.15; margin-bottom: 10px; }
.product-grid--cats p { display: none; }
.product-grid--cats .p-card__foot { padding-top: 9px; font-size: 0.9rem; }
.product-grid--cats .p-card__foot svg { width: 14px; height: 14px; }
.p-card__img .cc__art .icon { width: 42px; height: 42px; }
.values--3 { grid-template-columns: repeat(3, 1fr); }

/* Phones and small tablets: the photo fills the whole first screen behind the text, like desktop.
   The text sits over the darker sea at the top, with the ship and spices showing below it */
@media (max-width: 900px) {
  .hero-sea { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100vh; min-height: 100svh; }
  .hero-sea__img img { object-position: 50% 50%; }   /* phones load the portrait photo made for this screen */
  .hero-sea__img::after {
    background: linear-gradient(180deg, rgba(1, 22, 34, 0.9) 0%, rgba(1, 22, 34, 0.72) 38%, rgba(1, 22, 34, 0.2) 66%, rgba(1, 22, 34, 0.35) 100%);
  }
  .hero-sea__copy { max-width: 680px; padding: 40px 0 28px; }
  .hero-sea .eyebrow::after { display: none; }
}
@media (max-width: 1100px) {
  .product-grid.product-grid--cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  /* Keep every category in one line: the row becomes a swipeable strip */
  .showcase__picks { display: flex; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -28px; padding: 6px 28px 12px; scrollbar-width: thin; }
  .pick { flex: 0 0 150px; scroll-snap-align: center; }
  .showcase__hint { margin-top: 8px; }
  .panel { grid-template-columns: 1fr; }
  .panel__media { aspect-ratio: 16 / 6; }
  .panel__info { padding: 18px 20px 20px; grid-template-columns: minmax(0, 1fr); }
  .panel__info > .plist, .panel__info > .pabout { grid-column: 1; }
  .pabout { min-height: 0; }
  /* Stacked: sit the arrows on the middle of the photo, inside the panel */
  .panel__nav { top: calc((100vw - 56px) * 3 / 16); }
  .panel__nav--prev { left: 10px; }
  .panel__nav--next { right: 10px; }
  .values--3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .product-grid.product-grid--cats { grid-template-columns: 1fr 1fr; }
  .showcase__picks { margin: 0 -18px; padding: 6px 18px 12px; }
  .pick { flex-basis: 132px; }
  .panel__info { padding: 16px 16px 18px; }
  .panel__media { aspect-ratio: 16 / 7; }
  .panel__nav { top: calc((100vw - 36px) * 7 / 32); width: 36px; height: 36px; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
  .nav__list { gap: 22px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .sourcing-band { grid-template-columns: 1fr; gap: 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .footer-top .footer-brand { grid-column: 1 / -1; }
  .audience { grid-template-columns: repeat(3, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .section { padding: 80px 0; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 86px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--linen); border-bottom: 1px solid var(--line); padding: 8px 28px 28px;
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all 0.3s var(--ease);
    box-shadow: 0 20px 30px rgba(36, 30, 20, 0.08);
  }
  .nav-open .nav { transform: none; opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: 14px 0; font-size: 1.3rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 20px; }

  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 56px 0 36px; }
  .hero__media { position: relative; width: auto; height: 360px; margin: 0 -28px; }
  .hero__media::before { background: linear-gradient(180deg, var(--linen) 0%, rgba(246, 241, 231, 0) 26%); }

  .split, .split--wide-media, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr; gap: 28px; }
  .process::before { top: 0; bottom: 0; left: 36px; right: auto; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, var(--earth) 0 6px, transparent 6px 12px); }
  .step { display: grid; grid-template-columns: 72px 1fr; gap: 0 22px; text-align: left; padding: 0; }
  .step__icon { margin: 0; grid-row: span 3; }
  .process-row { grid-template-columns: 64px 1fr; gap: 10px 22px; padding: 26px; }
  .process-row p { grid-column: 2; }
  .process-row__num { font-size: 2.6rem; grid-row: span 2; }
  .doc-grid, .cert-row, .mv { grid-template-columns: 1fr; }
  .more-grid { grid-template-columns: 1fr 1fr; }
  .pack-options { grid-template-columns: 1fr 1fr; }
  .pack-opt:nth-child(3) { border-left: 0; }
  .contact-card { position: relative; top: 0; }
  .subnav { top: 86px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 18px; }
  .hero__media { margin: 0 -18px; height: 300px; }
  .section { padding: 64px 0; }
  :root { --header-h: 74px; }
  .header-inner { height: 74px; }
  .nav { inset: 74px 0 auto 0; padding: 8px 18px 24px; }
  .subnav { top: 74px; }
  .logo__name { font-size: 1.55rem; }
  .product-grid, .feature-grid, .more-grid, .values, .chip-grid { grid-template-columns: 1fr; }
  .chip-grid { grid-template-columns: 1fr 1fr; }
  .sourcing-band { padding: 26px 20px; }
  .form, .contact-card, .mv__card { padding: 30px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .uses ul { grid-template-columns: 1fr; }
  .audience { grid-template-columns: 1fr 1fr; }
  .pack-options { grid-template-columns: 1fr; }
  .pack-opt { border-left: 0 !important; border-top: 1px solid var(--line); }
  .pack-opt:first-child { border-top: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-top: 60px; padding-bottom: 40px; }
  .footer-bottom.wrap { width: calc(100% - 36px); }
  .page-hero .wrap { padding-top: calc(72px + var(--header-h)); padding-bottom: 64px; }
  .spec-table th, .spec-table td { padding: 10px 12px; }
  .btn { white-space: normal; text-align: center; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* ---------- Our story (about page) ---------- */
.story-hero {
  position: relative; display: flex; align-items: flex-end; min-height: calc(min(82vh, 760px) + var(--header-h));
  background: #011d2f; color: var(--linen); overflow: hidden;
}
.story-hero__img { position: absolute; inset: 0; }
.story-hero__img picture { display: block; width: 100%; height: 100%; }
.story-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
/* Laptops and desktops: the banner fills the whole first screen; the photo is close to screen shape,
   so only a sliver is trimmed */
@media (min-width: 861px) {
  .story-hero { align-items: center; min-height: 100vh; min-height: 100svh; }
  .story-hero__img img { object-position: 50% 50%; }
  .story-hero .wrap { padding-top: calc(24px + var(--header-h)) !important; padding-bottom: 24px !important; }
}
/* Sea-cliff photo: open sea on the left carries the text, cliffs stay bright on the right */
.story-hero__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 29, 47, 0.82) 0%, rgba(1, 29, 47, 0.55) 40%, rgba(1, 29, 47, 0) 66%),
    linear-gradient(0deg, rgba(1, 29, 47, 0.6) 0%, rgba(1, 29, 47, 0) 42%),
    linear-gradient(180deg, rgba(1, 29, 47, 0.45) 0%, rgba(1, 29, 47, 0) 160px);
}
.story-hero .wrap { position: relative; z-index: 1; padding-top: calc(96px + var(--header-h)); padding-bottom: 88px; }
.story-hero h1 { color: var(--white); max-width: 720px; margin-bottom: 22px; }
.story-hero h1 em { display: block; color: #f2dcb2; }
.story-hero__lead {
  max-width: 520px; margin: 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.4; color: rgba(246, 241, 231, 0.92);
}

.story { padding: 112px 0 40px; }
.story__wrap { position: relative; max-width: 1080px; }
.story__route {
  --route: 0; position: absolute; top: 12px; bottom: 112px; left: 298px; width: 1px; background: var(--linen-3);
}
.story__progress {
  position: absolute; inset: 0; background: var(--earth);
  transform: scaleY(var(--route)); transform-origin: top;
}
.chapter { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 100px; padding-bottom: 96px; }
.chapter__mark { position: sticky; top: 124px; align-self: start; }
.chapter__mark::after {
  content: ""; position: absolute; top: 5px; right: -56px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--linen); border: 1px solid var(--earth); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.chapter__mark.is-reached::after { background: var(--earth); box-shadow: 0 0 0 5px rgba(173, 128, 85, 0.18); }
.chapter__when {
  display: block; margin-bottom: 10px; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--earth-dark);
}
.chapter__mark h2 { margin: 0; font-size: clamp(1.8rem, 2.8vw, 2.3rem); }
.chapter__body > p { font-size: 1.14rem; line-height: 1.85; margin-bottom: 1.4em; color: #45433b; }
.chapter__first::first-letter {
  float: left; margin: 0.08em 0.1em 0 0; font-family: var(--serif); font-size: 4.4em;
  line-height: 0.78; color: var(--earth-dark);
}
.chapter__body > .story-pull {
  margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--earth);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.3; color: var(--forest);
}
.story-name { font-family: var(--serif); font-size: 1.16em; font-weight: 600; line-height: 1; color: var(--earth-dark); }
.story-grains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.story-grains figure { margin: 0; }
.story-grains img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.story-grains figcaption { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted); text-align: center; }
.story-photo { margin: 36px 0 38px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }

.story-year { padding: 104px 0; background: var(--forest-deep); color: rgba(246, 241, 231, 0.82); }
.story-year__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; max-width: 1080px; }
.story-year__num { font-family: var(--serif); font-size: clamp(5.5rem, 13vw, 10.5rem); line-height: 0.9; color: #d9bf94; }
.story-year__lead { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.25rem); line-height: 1.25; color: var(--linen); }
.story-year p:last-child { margin-bottom: 0; font-size: 1.08rem; line-height: 1.8; }

.story-belief { padding: 112px 0; text-align: center; }
.story-belief .wrap { max-width: 800px; }
.story-belief p { font-size: 1.12rem; line-height: 1.85; color: #45433b; }
.story-belief p:last-child { margin-bottom: 0; }
.story-belief .story-belief__lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.65rem); line-height: 1.4; color: var(--earth-dark); margin-bottom: 30px; }
.story-belief .story-belief__main { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.3; color: var(--forest-deep); margin-bottom: 36px; }

.story-close { position: relative; padding: 112px 0 124px; background: #011d2f; text-align: center; overflow: hidden; }
.story-close__waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 110px; fill: none; stroke: rgba(217, 191, 148, 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.story-close__waves path { vector-effect: non-scaling-stroke; }
.story-close .wrap { position: relative; max-width: 880px; }
.story-close p { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.18; color: var(--linen); text-wrap: balance; }
.story-close span { display: block; margin-top: 18px; font-style: italic; color: #f2dcb2; }

@media (max-width: 860px) {
  /* Phones load the portrait photo: sky and sea at the top carry the text, the cliffs fill the bottom */
  .story-hero { align-items: flex-start; min-height: 100vh; min-height: 100svh; }
  .story-hero__img img { object-position: 50% 50%; }
  .story-hero__img::after { background: linear-gradient(180deg, rgba(1, 29, 47, 0.88) 0%, rgba(1, 29, 47, 0.62) 42%, rgba(1, 29, 47, 0) 68%); }
  .story-hero .wrap { padding-top: calc(36px + var(--header-h)); padding-bottom: 40px; }
  .story { padding: 72px 0 8px; }
  .story__wrap { padding-left: 20px; padding-right: 20px; }
  .story__route { top: 10px; bottom: 64px; left: 20px; }
  .chapter { display: block; padding: 0 0 64px 34px; }
  .chapter__mark { position: relative; top: 0; margin-bottom: 22px; }
  .chapter__mark::after { top: 4px; right: auto; left: -39px; }
  .chapter__body > p { font-size: 1.08rem; line-height: 1.75; }
  .story-year { padding: 72px 0; }
  .story-year__grid { grid-template-columns: 1fr; gap: 28px; }
  .story-belief { padding: 76px 0; }
  .story-close { padding: 76px 0 112px; }
}
@media (max-width: 520px) {
  .story-grains { gap: 8px; }
  .story-grains figcaption { font-size: 0.95rem; }
}

/* Hidden sections stay hidden even if a rule gives them a display value */
[hidden] { display: none !important; }

/* Phones and tablets: the Edible Oils and Natural Flours (on request) photos show in full
   inside a square frame, with a soft blurred copy of the same photo filling any spare space */
.panel__media-blur { display: none; }
@media (max-width: 960px) {
  #cat-oils .panel__media, #cat-processed .panel__media { aspect-ratio: 1 / 1 !important; }
  #cat-oils .panel__media img, #cat-processed .panel__media img { object-fit: contain; z-index: 1; }
  #cat-oils .panel__media .panel__media-blur, #cat-processed .panel__media .panel__media-blur { display: block; z-index: 0; object-fit: cover; filter: blur(22px) brightness(0.85); transform: scale(1.15); }
  #cat-oils .panel__num, #cat-processed .panel__num { z-index: 2; }
  /* Flour photo: fill the card edge to edge, keeping the top (the bowl) in view */
  #cat-processed .panel__media img { object-fit: cover; object-position: 50% 0; }
  #cat-processed .panel__media .panel__media-blur { display: none; }
  #cat-oils .panel__media::after, #cat-processed .panel__media::after { z-index: 1; }
  .showcase:has(#cat-oils:not([hidden])) .panel__nav,
  .showcase:has(#cat-processed:not([hidden])) .panel__nav { top: calc((100vw - 56px) / 2); }
}
@media (max-width: 640px) {
  .showcase:has(#cat-oils:not([hidden])) .panel__nav,
  .showcase:has(#cat-processed:not([hidden])) .panel__nav { top: calc((100vw - 36px) / 2); }
}

/* About: founders (dark band, soft-cornered square portraits) */
.founders { position: relative; overflow: hidden; background: var(--forest-deep); color: var(--linen); padding: 96px 0 120px; }
.founders__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.founders__eyebrow { display: block; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.founders__head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1.15; color: var(--linen); margin: 12px 0 10px; }
.founders__head p { color: rgba(246, 241, 231, 0.72); margin: 0; }
.founders__grid { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(40px, 9vw, 120px); }
.founders__card { width: 260px; text-align: center; }
.founders__photo { width: 230px; height: 230px; margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
.founders__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founders__card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.8rem; line-height: 1.1; color: var(--linen); margin: 24px 0 8px; }
.founders__role { display: block; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.founders__area { display: block; margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: rgba(246, 241, 231, 0.78); }
.founders__waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; fill: var(--linen-2); }
@media (max-width: 640px) {
  .founders { padding: 68px 0 96px; }
  .founders__photo { width: 200px; height: 200px; }
}