/* =========================================================================
   BIG BLUE AQUA — Aquaculture and Farming
   Design system + components. Colours sampled from the supplied logo.
   ========================================================================= */

/* ----------------------------------------------------------- 01. Tokens */

:root {
  /* Brand — sampled directly from the Big Blue Aqua logo */
  --navy: #00246a;
  --navy-deep: #001640;
  --navy-ink: #000e2b;
  --blue: #034189;
  --blue-mid: #0a5aa8;
  --aqua: #0db3ba;
  --aqua-bright: #2fd0d6;
  /* Darkened from the logo teal so 12px uppercase labels clear WCAG AA
     (5.25:1 on white, 4.76:1 on the pale blue sections). */
  --aqua-deep: #07787f;

  /* Neutrals */
  --white: #ffffff;
  --pale: #eef5f9;
  --pale-soft: #f6fafc;
  --line: #dde8f0;
  --line-dark: rgba(255, 255, 255, 0.14);
  --ink: #0a1b2e;
  --muted: #4c6479;
  --muted-light: rgba(255, 255, 255, 0.74);

  /* Typography */
  --font: 'Figtree', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1: clamp(2.15rem, 4.6vw, 3.6rem);
  --fs-h2: clamp(1.85rem, 3.4vw, 2.9rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.55rem);
  --fs-lead: clamp(1.0625rem, 1.25vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;
  --lh-tight: 1.06;
  --lh-head: 1.14;
  --lh-body: 1.65;
  --ls-eyebrow: 0.22em;

  /* Space */
  --container: 1240px;
  --container-wide: 1480px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 8.5vw, 140px);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;
  --sp-8: 64px;
  --sp-9: 88px;

  /* Shape + depth */
  --r-sm: 6px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-1: 0 2px 10px rgba(0, 36, 106, 0.06);
  --shadow-2: 0 18px 48px -18px rgba(0, 36, 106, 0.28);
  --shadow-3: 0 30px 80px -28px rgba(0, 22, 64, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-flow: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.25s;
  --t: 0.45s;
  --t-slow: 0.9s;

  --header-h: 84px;
}

@media (max-width: 1023px) {
  :root { --header-h: 68px; }
}

/* ------------------------------------------------------- 02. Base reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  color: inherit;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; }

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

.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: fixed;
  top: 10px; left: 50%;
  z-index: 200;
  padding: 12px 22px;
  background: var(--aqua);
  color: var(--navy-ink);
  font-weight: 700;
  border-radius: var(--r-sm);
  transform: translate(-50%, -160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------- 03. Layout helpers */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(840px + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--pale { background: var(--pale); }
.section--soft { background: var(--pale-soft); }

.section--navy {
  background: var(--navy-deep);
  color: var(--white);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }

.stack > * + * { margin-top: var(--sp-5); }

/* -------------------------------------------------- 04. Typography bits */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--aqua-deep);
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--aqua), rgba(13, 179, 186, 0.15));
  flex: none;
}
.eyebrow--light { color: var(--aqua-bright); }
.eyebrow--center { justify-content: center; }

.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
}
.section--navy .lead { color: var(--muted-light); }

.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }
.text-center { text-align: center; }
.center-block { margin-inline: auto; }

.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: var(--sp-5); }

/* Thin flowing aqua rule — a recurring Big Blue Aqua signature */
.flow-rule {
  width: 132px;
  height: 10px;
  margin-top: var(--sp-5);
  overflow: visible;
}
.flow-rule path {
  fill: none;
  stroke: var(--aqua);
  stroke-width: 2;
  stroke-linecap: round;
}
.js .flow-rule path { stroke-dasharray: 200; stroke-dashoffset: 200; }
.reveal.is-in .flow-rule path,
.flow-rule.is-in path { animation: draw 1.4s var(--ease-flow) forwards; }
.section-head--center .flow-rule { margin-inline: auto; }

@keyframes draw { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------- 05. Button kit */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--navy-ink);
}
.btn--primary:hover {
  background: var(--aqua-bright);
  border-color: var(--aqua-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(13, 179, 186, 0.75);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  border-color: var(--aqua);
  color: var(--navy);
}
.btn--outline:hover {
  background: var(--aqua);
  color: var(--navy-ink);
  transform: translateY(-2px);
}

.btn--sm { padding: 11px 22px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.btn-row--center { justify-content: center; }

/* Inline text link with a sliding aqua underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.link-arrow svg { width: 20px; height: 8px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(6px); }
.section--navy .link-arrow { color: var(--aqua-bright); }

/* --------------------------------------------------------- 06. Reveals */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease-flow),
              transform var(--t-slow) var(--ease-flow);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Cinematic image mask reveal */
.img-reveal { overflow: hidden; }
.js .img-reveal > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08) translateY(14px);
  transition: clip-path 1.25s var(--ease-flow),
              transform 1.5s var(--ease-flow),
              opacity 1s var(--ease-flow);
  opacity: 0.4;
}
.js .img-reveal.is-in > img {
  clip-path: inset(0 0 0 0);
  transform: none;
  opacity: 1;
}

/* ------------------------------------------------------- 07. Site header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  transition: background-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              backdrop-filter var(--t) var(--ease);
}
.site-header::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  /* 0.60 rather than 0.55: with the product banners now filling the full width,
     the nav sits over the brightest part of the artwork. Measured against the
     brightest pixel of all four heroes, 0.55 gave 4.28:1 and 0.60 gives 5.09:1,
     clearing AA for the 15px links. */
  background: linear-gradient(180deg, rgba(0, 14, 43, 0.6), rgba(0, 14, 43, 0));
  opacity: 1;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
  z-index: -1;
}

.site-header.is-stuck {
  background: rgba(0, 22, 64, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 34px -20px rgba(0, 0, 0, 0.8);
}
.site-header.is-stuck::after { opacity: 0; }

.site-header__inner {
  height: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

/* Logo lockup: supplied emblem + typeset wordmark in the exact brand colours */
.logo { display: flex; align-items: center; gap: 14px; flex: none; }
.logo__mark {
  width: 60px;
  height: 60px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 6px 18px -8px rgba(0, 14, 43, 0.55);
}
.logo__mark img { width: 82%; }
.logo__type { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.logo__name-b { color: var(--aqua-bright); }
.logo__tag {
  margin-top: 6px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__list a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  transition: color var(--t-fast) var(--ease);
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--aqua-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav__list a:hover { color: var(--white); }
.nav__list a:hover::after { transform: scaleX(1); }

body[data-page='home'] [data-nav='home'],
body[data-page='about'] [data-nav='about'],
body[data-page='products'] [data-nav='products'],
body[data-page='approach'] [data-nav='approach'],
body[data-page='markets'] [data-nav='markets'],
body[data-page='contact'] [data-nav='contact'] { color: var(--white); }

body[data-page='home'] .nav__list [data-nav='home']::after,
body[data-page='about'] .nav__list [data-nav='about']::after,
body[data-page='products'] .nav__list [data-nav='products']::after,
body[data-page='approach'] .nav__list [data-nav='approach']::after,
body[data-page='markets'] .nav__list [data-nav='markets']::after,
body[data-page='contact'] .nav__list [data-nav='contact']::after { transform: scaleX(1); }

.nav__cta { flex: none; }

.burger {
  display: none;
  width: 46px; height: 46px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
}
.burger__box { display: block; width: 18px; }
.burger__line {
  display: block;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger__line + .burger__line { margin-top: 4px; }
.burger__line:nth-child(2) { width: 13px; }

@media (max-width: 1079px) {
  .nav, .nav__cta { display: none; }
  .burger { display: flex; }
  .logo__mark { width: 48px; height: 48px; }
  .logo__name { font-size: 1.15rem; }
  .logo__tag { display: none; }
}

/* ------------------------------------------------------ 08. Mobile menu */

.mobile-nav { position: fixed; inset: 0; z-index: 150; }
.mobile-nav[hidden] { display: none; }

.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 14, 43, 0.6);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.mobile-nav.is-open .mobile-nav__scrim { opacity: 1; }

.mobile-nav__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  padding: var(--sp-5) clamp(24px, 6vw, 40px) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  overflow-y: auto;
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-ink) 100%);
  color: var(--white);
  transform: translateX(100%);
  transition: transform var(--t) var(--ease-flow);
}
.mobile-nav.is-open .mobile-nav__panel { transform: none; }

.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.logo-plate {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.65);
}
.logo-plate img { width: 70%; }

.mobile-nav__logo { width: 124px; }
.mobile-nav__close {
  width: 44px; height: 44px;
  font-size: 1.75rem;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
}

.mobile-nav__list a {
  display: block;
  padding: 14px 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line-dark);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.mobile-nav__list a:hover { color: var(--aqua-bright); padding-left: 6px; }

.mobile-nav__products { display: grid; gap: 2px; }
.mobile-nav__products a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.mobile-nav__products span {
  font-size: var(--fs-xs);
  font-weight: 400;
  font-style: italic;
  color: var(--aqua-bright);
}

.mobile-nav__foot { margin-top: auto; display: grid; gap: var(--sp-4); justify-items: center; }
.mobile-nav__mail { font-size: var(--fs-sm); color: var(--aqua-bright); }

/* ------------------------------------------------- 09. Homepage hero */

.hero {
  position: relative;
  height: min(100vh, 900px);
  height: min(100svh, 900px);
  min-height: 540px;
  background: var(--navy-ink);
  overflow: hidden;
}

.hero__viewport { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s var(--ease-flow), visibility 0s linear 1.5s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s var(--ease-flow), visibility 0s;
  z-index: 2;
}

/* Ambient blurred backdrop fills the letterbox so nothing is ever cropped.
   A CSS background (not an <img>) so mobile, which crops instead, never
   downloads it. */
.hero__ambient {
  position: absolute;
  inset: -6%;
  background-image: var(--ambient);
  background-size: cover;
  background-position: center;
  filter: blur(46px) saturate(115%) brightness(0.62);
}

.hero__figure { position: absolute; inset: 0; }
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: 62% 50%;
}
.hero__slide.is-active .hero__img { animation: kenburns 9s var(--ease) forwards; }

@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-0.8%, 0, 0); }
}

/* The supplied heroes carry their own typography, so on desktop they are shown
   whole and untouched — no overlay. Below 1024px the artwork is art-directed
   down to its photographic half (all baked-in text sits left of the crop) and
   we set our own type, which stays legible at small sizes. */
.hero__caption { display: none; }

@media (max-width: 1023px) {
  .hero { height: min(86svh, 720px); min-height: 470px; }
  .hero__ambient { background-image: none; }
  .hero__img { object-fit: cover; object-position: center; }
  .hero__slide.is-active .hero__img { animation: kenburns-crop 9s var(--ease) forwards; }

  .hero__figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0, 14, 43, 0.5) 0%, rgba(0, 14, 43, 0.12) 34%, rgba(0, 14, 43, 0.9) 100%);
  }

  .hero__caption {
    position: absolute;
    z-index: 4;
    left: 0; right: 0;
    bottom: clamp(74px, 14vw, 110px);
    display: block;
    padding-inline: var(--gutter);
    color: var(--white);
  }
  .hero__caption .eyebrow { color: var(--aqua-bright); }
  .hero__caption .hero__title {
    margin: 0;
    font-size: clamp(1.85rem, 8.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 24px rgba(0, 14, 43, 0.5);
  }
  .hero__caption .hero__title span { display: block; }
  .hero__caption p {
    margin-top: var(--sp-4);
    max-width: 34ch;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.86);
  }
}

@keyframes kenburns-crop {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-1.2%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active .hero__img { animation: none !important; }
}

/* CTA strip directly under the hero */
.hero-cta {
  position: relative;
  background: linear-gradient(180deg, var(--navy-ink), var(--navy-deep));
  color: var(--white);
  padding-block: clamp(26px, 3.4vw, 40px);
}
.hero-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.hero-cta__text {
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.hero-cta__text strong { color: var(--aqua-bright); font-weight: 700; }

/* ------------------------------------------------- 10. Interior page hero */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 660px);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(44px, 6vw, 88px);
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
}
.page-hero--compact { min-height: clamp(340px, 46vh, 480px); }

.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 14, 43, 0.72) 0%, rgba(0, 14, 43, 0.28) 42%, rgba(0, 14, 43, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 22, 64, 0.86) 0%, rgba(0, 22, 64, 0.2) 68%);
}
.page-hero__inner { position: relative; z-index: 2; width: 100%; }
.page-hero__title { font-size: var(--fs-h1); font-weight: 800; }
.page-hero__lead { margin-top: var(--sp-5); max-width: 54ch; color: rgba(255, 255, 255, 0.82); font-size: var(--fs-lead); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb a:hover { color: var(--aqua-bright); }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; opacity: 0.5; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------- 11. Intro block */

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
}
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 1.05fr 1fr; align-items: start; }
  /* The brand badge makes the first column much taller, so centre the copy
     against it rather than letting it hang at the top. */
  .intro__grid--badge { align-items: center; }
}
.intro__headline {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.intro__headline span { display: block; }
.intro__headline span:nth-child(2) { color: var(--blue); }
.intro__headline span:nth-child(3) { color: var(--aqua-deep); }
.intro__aside { padding-top: clamp(0px, 1.4vw, 18px); }

.intro__badge {
  width: clamp(150px, 20vw, 248px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.intro__badge img { width: 72%; }
.intro__statement {
  margin-top: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--aqua);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--navy);
}

/* --------------------------------------- 12. Farm-to-table scroll journey */

.journey { position: relative; overflow: hidden; }
.journey__head { margin-bottom: clamp(48px, 6vw, 84px); }
.journey__title span { display: block; }

.journey__track { position: relative; }

/* Desktop: a single flowing aqua line runs through all five stages.
   Below 1024px the stages wrap, so the timeline switches to vertical. */
.journey__line {
  position: absolute;
  top: 74px; /* number row (20) + icon margin (16) + half the 76px icon */
  left: 0; right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.journey__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue-mid), var(--aqua) 55%, var(--aqua-bright));
  transform: scaleX(1);
  transform-origin: left;
  box-shadow: 0 0 18px rgba(47, 208, 214, 0.55);
}

.journey__stages {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
  .journey__stages { grid-template-columns: repeat(5, 1fr); }
  /* Start and finish the line on the first and last icon centres rather than
     running it to the container edges. */
  .journey__line {
    left: 38px;
    right: calc((100% - 4 * var(--sp-6)) / 5 - 38px);
  }
}

.journey__stage { position: relative; padding-top: 0; }
.journey__num {
  display: block;
  height: 20px;
  line-height: 20px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--aqua-bright);
  transition: opacity var(--t) var(--ease);
}
.journey__icon {
  position: relative;
  z-index: 2;
  width: 76px; height: 76px;
  margin: var(--sp-4) 0 var(--sp-5);
  display: grid;
  place-items: center;
  background: var(--navy-deep);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease),
              background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.journey__icon svg { width: 32px; height: 32px; }
.journey__stage h3 {
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease);
}
.journey__stage p {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.62);
  max-width: 26ch;
}
.js .journey__line::after { transform: scaleX(var(--progress, 0)); }
.js .journey__stage .journey__num { opacity: 0.5; }
.js .journey__stage .journey__icon { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.6); }
.journey__stage.is-on .journey__num { opacity: 1; }
.journey__stage.is-on .journey__icon {
  border-color: var(--aqua);
  color: var(--aqua-bright);
  background: rgba(13, 179, 186, 0.12);
  transform: translateY(-4px);
}

@media (max-width: 1023px) {
  /* Mobile and tablet: elegant vertical timeline, no scroll-linked effects */
  .journey__line {
    top: 8px; bottom: 8px;
    left: 26px; right: auto;
    width: 2px; height: auto;
  }
  .journey__line::after,
  .js .journey__line::after {
    transform: scaleY(1);
    transform-origin: top;
    background: linear-gradient(180deg, var(--blue-mid), var(--aqua) 55%, var(--aqua-bright));
  }
  .journey__stages { grid-template-columns: 1fr; gap: var(--sp-7); }
  .journey__stage { padding-left: 84px; }
  .journey__icon {
    position: absolute;
    top: 0; left: 0;
    width: 54px; height: 54px;
    margin: 0;
  }
  .journey__icon svg { width: 24px; height: 24px; }
  .journey__stage p { max-width: none; }
}

/* Emotional payoff: the journey resolves into the table.
   Two constraints shaped this. The subject's head sits 3% from the top of the
   frame and the food fills the bottom 45%, so cropping to a band damaged one or
   the other — the picture is shown whole at its own ratio instead. And every
   region of it carries bright specular highlights (white text measured 1.0-1.1:1
   even over the darkest quadrant), so no overlay could be made legible without
   covering the food. The caption therefore sits on navy above the photograph,
   which leaves the image completely unobstructed. */
.journey-payoff {
  background: var(--navy-deep);
  color: var(--white);
}

.journey-payoff__inner {
  padding-block: clamp(40px, 5vw, 76px) clamp(26px, 3.4vw, 44px);
}
.journey-payoff__title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; }
.journey-payoff__meta {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aqua-bright);
  font-weight: 600;
}

.journey-payoff__media { margin: 0; line-height: 0; }
.journey-payoff__media img {
  display: block;
  width: 100%;
  /* No height cap: any cap crops the bottom of the frame, which is the food.
     The band is tall on a large monitor, but that is the point of the payoff. */
  aspect-ratio: 1672 / 941;
  height: auto;
}

/* --------------------------------------------------- 13. Product cards */

.product-grid {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 860px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

.product-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }

.product-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pale); }
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-flow);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 22, 64, 0) 45%, rgba(0, 22, 64, 0.42) 100%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.product-card:hover .product-card__media::after { opacity: 1; }

.product-card__body {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  border-top: 2px solid transparent;
}
.product-card__body::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--aqua-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-flow);
}
.product-card:hover .product-card__body::before { transform: scaleX(1); }

.product-card__name {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 800;
  color: var(--navy);
  transition: transform var(--t) var(--ease);
}
.product-card:hover .product-card__name { transform: translateY(-2px); }
.product-card__latin {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--aqua-deep);
}
.product-card__copy { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.product-card__more {
  margin-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aqua-deep);
  opacity: 0.55;
  transform: translateY(4px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.product-card:hover .product-card__more { opacity: 1; transform: none; }
.product-card__more svg { width: 18px; height: 7px; }

/* ------------------------------------------- 14. Editorial split sections */

.split {
  display: grid;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse .split__media { order: 2; }
}
.split + .split { margin-top: clamp(64px, 8vw, 130px); }

.split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.split__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.split__media--tall img { aspect-ratio: 4 / 5; }

.split__body h2 { font-size: var(--fs-h2); }
.split__body .lead { margin-top: var(--sp-5); }
.split__list { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.split__list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.split__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 16px; height: 2px;
  background: var(--aqua);
  border-radius: 2px;
}
.section--navy .split__list li { color: rgba(255, 255, 255, 0.72); }

/* Full-bleed photographic band with copy over it */
.band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 70vh, 720px);
  overflow: hidden;
  color: var(--white);
  background: var(--navy-ink);
}
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 14, 43, 0.9) 0%, rgba(0, 14, 43, 0.62) 44%, rgba(0, 14, 43, 0.18) 100%);
}
.band--right .band__media::after {
  background: linear-gradient(270deg, rgba(0, 14, 43, 0.9) 0%, rgba(0, 14, 43, 0.62) 44%, rgba(0, 14, 43, 0.18) 100%);
}
.band__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(56px, 7vw, 96px); }
.band__panel { max-width: 46ch; }
.band--right .band__panel { margin-left: auto; }
.band__panel h2 { font-size: var(--fs-h2); }
.band__panel .lead { margin-top: var(--sp-5); color: rgba(255, 255, 255, 0.8); }
.band__panel .btn-row { margin-top: var(--sp-6); }

@media (max-width: 767px) {
  .band__media::after,
  .band--right .band__media::after {
    background: linear-gradient(180deg, rgba(0, 14, 43, 0.55) 0%, rgba(0, 14, 43, 0.82) 55%, rgba(0, 14, 43, 0.95) 100%);
  }
  .band__panel { max-width: none; margin-left: 0; }
}

/* ------------------------------------------------------- 15. Pillar grid */

.pillars {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.pillar {
  position: relative;
  padding: clamp(26px, 2.8vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: transparent; }
.pillar::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--aqua-bright));
  border-radius: 0 0 var(--r) var(--r);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-flow);
}
.pillar:hover::after { transform: scaleX(1); }

.pillar__icon {
  width: 52px; height: 52px;
  margin-bottom: var(--sp-5);
  display: grid;
  place-items: center;
  color: var(--aqua-deep);
}
.pillar__icon svg { width: 100%; height: 100%; }
.pillar h3 {
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.pillar p { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }

.section--navy .pillar {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
}
.section--navy .pillar h3 { color: var(--white); }
.section--navy .pillar p { color: rgba(255, 255, 255, 0.68); }
.section--navy .pillar__icon { color: var(--aqua-bright); }

/* ------------------------------------------ 16. Mud crab sticky sequence */

.crab-story { position: relative; }
.crab-story__grid { display: grid; gap: clamp(32px, 5vw, 72px); }

.crab-story__visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow-3);
}

@media (min-width: 1024px) {
  .crab-story__grid { grid-template-columns: 1.02fr 0.98fr; align-items: start; }
  .crab-story__visual {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - var(--header-h) - 80px);
  }
  .crab-story__steps { padding-block: 8vh 12vh; }
  .crab-story__step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
}
.crab-story__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s var(--ease-flow), transform 1.6s var(--ease-flow);
}
.crab-story__frame.is-active { opacity: 1; transform: none; }
.crab-story__frame img { width: 100%; height: 100%; object-fit: cover; }

.crab-story__counter {
  position: absolute;
  left: 22px; bottom: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 14, 43, 0.9);
}

.crab-story__step { position: relative; padding-left: 62px; }
.crab-story__step + .crab-story__step { margin-top: clamp(44px, 6vw, 0px); }
.crab-story__step::before {
  content: attr(data-step);
  position: absolute;
  left: 0; top: 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--aqua-bright);
  transition: opacity var(--t) var(--ease);
}
.crab-story__step::after {
  content: '';
  position: absolute;
  left: 4px; top: 26px; bottom: -10px;
  width: 1px;
  background: linear-gradient(180deg, rgba(47, 208, 214, 0.5), rgba(47, 208, 214, 0));
}
.crab-story__step:last-child::after { display: none; }
.crab-story__step h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  transition: color var(--t) var(--ease);
}
.crab-story__step p {
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--t) var(--ease);
  max-width: 46ch;
}
.js .crab-story__step h3 { color: rgba(255, 255, 255, 0.42); }
.js .crab-story__step p { color: rgba(255, 255, 255, 0.55); }
.js .crab-story__step::before { opacity: 0.45; }
.crab-story__step.is-on::before { opacity: 1; }
.crab-story__step.is-on h3 { color: var(--white); }
.crab-story__step.is-on p { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 1023px) {
  .crab-story__visual { position: relative; aspect-ratio: 4 / 3; }
  .crab-story__step { padding-left: 0; padding-top: 26px; }
  .crab-story__step::after { display: none; }
  .crab-story__step::before { top: 0; }
  .crab-story__step h3,
  .js .crab-story__step h3 { color: var(--white); }
  .crab-story__step p,
  .js .crab-story__step p { color: rgba(255, 255, 255, 0.75); }
  .js .crab-story__step::before { opacity: 1; }
  .crab-story__step + .crab-story__step { margin-top: var(--sp-7); }
}

.note {
  margin-top: clamp(40px, 5vw, 64px);
  padding: var(--sp-5) var(--sp-6);
  border-left: 2px solid rgba(47, 208, 214, 0.6);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.62);
}
.note--light {
  background: var(--pale);
  border-left-color: var(--aqua);
  color: var(--muted);
}

/* --------------------------------------------------------- 17. Markets */

.market-list { display: grid; gap: clamp(18px, 2.2vw, 28px); }
@media (min-width: 760px) { .market-list { grid-template-columns: repeat(2, 1fr); } }

.market-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 34vw, 420px);
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}
.market-card__media { position: absolute; inset: 0; }
.market-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-flow);
}
.market-card:hover .market-card__media img { transform: scale(1.05); }
.market-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 14, 43, 0.1) 30%, rgba(0, 14, 43, 0.86) 100%);
}
.market-card__body { position: relative; z-index: 2; }
.market-card h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.market-card p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); max-width: 40ch; }
.market-card__rule {
  width: 40px; height: 2px;
  margin-bottom: var(--sp-4);
  background: var(--aqua-bright);
  transition: width var(--t) var(--ease-flow);
}
.market-card:hover .market-card__rule { width: 72px; }

/* -------------------------------------------------- 18. Product detail */

.spec-list { display: grid; gap: 0; margin-top: var(--sp-6); }
.spec-list > div {
  display: grid;
  gap: 4px 24px;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
}
.spec-list > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .spec-list > div { grid-template-columns: 200px minmax(0, 1fr); } }
.spec-list dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aqua-deep);
}
.spec-list dd { margin: 0; color: var(--muted); }

.product-nav {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.product-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-5) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.product-nav a:hover { border-color: var(--aqua); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.product-nav strong { font-size: 1.0625rem; color: var(--navy); }
.product-nav span { font-size: var(--fs-sm); font-style: italic; color: var(--aqua-deep); }
.product-nav a[aria-current='page'] { border-color: var(--aqua); background: var(--pale); }

/* ------------------------------------------------------- 19. Contact form */

.contact-grid { display: grid; gap: clamp(40px, 5vw, 80px); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr 0.85fr; } }

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: 8px; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.field label .opt { font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234c6479' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 42px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(13, 179, 186, 0.18);
}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #c0392b; }

.field__error { display: none; font-size: var(--fs-xs); color: #c0392b; }
.field.has-error .field__error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c0392b; }

.form__hp { position: absolute; left: -9999px; opacity: 0; }

.form__status {
  display: none;
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.form__status.is-visible { display: block; }
.form__status--ok { background: rgba(13, 179, 186, 0.1); border: 1px solid rgba(13, 179, 186, 0.4); color: var(--navy); }
.form__status--err { background: rgba(192, 57, 43, 0.07); border: 1px solid rgba(192, 57, 43, 0.35); color: #96291d; }

.form__note { font-size: var(--fs-xs); color: var(--muted); }

.contact-aside {
  padding: clamp(28px, 3vw, 44px);
  background: var(--navy-deep);
  color: var(--white);
  border-radius: var(--r-lg);
}
.contact-aside h2 { font-size: var(--fs-h3); }
.contact-aside p { margin-top: var(--sp-4); color: rgba(255, 255, 255, 0.74); font-size: var(--fs-sm); }
.contact-aside__mail {
  display: inline-block;
  margin-top: var(--sp-5);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--aqua-bright);
  border-bottom: 1px solid rgba(47, 208, 214, 0.4);
  padding-bottom: 3px;
}
.contact-aside__mail:hover { border-color: var(--aqua-bright); }
.contact-aside__list { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.contact-aside__list li {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.74);
}
.contact-aside__list strong { display: block; color: var(--white); font-weight: 600; margin-bottom: 2px; }

/* ------------------------------------------------------- 20. CTA band */

.cta-band {
  position: relative;
  padding-block: clamp(72px, 9vw, 128px);
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-deep) 52%, var(--navy-ink) 100%);
  color: var(--white);
  overflow: hidden;
  text-align: center;
}
.cta-band__waves { position: absolute; inset: auto 0 -2px; height: 62%; opacity: 0.5; }
.cta-band__waves svg { width: 260%; height: 100%; }
.cta-band__wave--1 { fill: rgba(13, 179, 186, 0.10); }
.cta-band__wave--2 { fill: rgba(47, 208, 214, 0.07); }

.cta-band__inner { position: relative; z-index: 2; }
.cta-band__title { font-size: var(--fs-h2); font-weight: 800; }
.cta-band__copy { margin-top: var(--sp-5); font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.78); }
.cta-band .btn-row { margin-top: var(--sp-7); }
.cta-band__mail { margin-top: var(--sp-6); font-size: var(--fs-sm); letter-spacing: 0.1em; }
.cta-band__mail a { color: var(--aqua-bright); }
.cta-band__mail a:hover { text-decoration: underline; }

/* --------------------------------------------------- 21. Wave dividers */

.wave-divider { line-height: 0; }
.wave-divider svg { width: 100%; height: clamp(48px, 6vw, 96px); display: block; }
.wave-divider--footer svg path { fill: var(--navy-ink); }
.wave-divider--pale svg path { fill: var(--pale); }
.wave-divider--white,
.wave-divider--pale { background: var(--navy-deep); }
.wave-divider--white svg path { fill: var(--white); }

/* ---------------------------------------------------------- 22. Footer */

.site-footer {
  position: relative;
  background: var(--navy-ink);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
}
.site-footer .wave-divider {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  transform: translateY(-99%);
}

.site-footer__inner {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  padding-block: clamp(56px, 6vw, 88px) clamp(32px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.site-footer__logo { width: 172px; margin-bottom: var(--sp-5); }
.site-footer__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__descriptor {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aqua-bright);
}
.site-footer__blurb { margin-top: var(--sp-5); max-width: 34ch; }

.site-footer__heading {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__col ul { display: grid; gap: 12px; }
.site-footer__col a { transition: color var(--t-fast) var(--ease); }
.site-footer__col a:hover { color: var(--aqua-bright); }
.site-footer__col em { font-style: italic; opacity: 0.62; }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__bar p { margin: 0; }
.site-footer__credit { letter-spacing: 0.08em; }

/* ---------------------------------------------- 23. Cursor micro-parallax */

.parallax-media { will-change: transform; }

/* ---------------------------------------------------- 24. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .js .img-reveal > img { clip-path: none; transform: none; opacity: 1; }
  .js .flow-rule path { stroke-dashoffset: 0; }
  .hero__slide.is-active .hero__img { animation: none; }
  .hero__ambient { filter: blur(46px) brightness(0.62); }
  .cta-band__layer { animation: none !important; }
  .crab-story__frame { transform: none; }
  .js .journey__line::after { transform: scaleX(1); }
  .parallax-media { transform: none !important; }
}

/* ------------------------------------- 25. Single-artwork product banner */

/* Product pages open with the supplied hero artwork shown whole — same
   contain-on-ambient treatment as the homepage carousel, minus the controls. */
.hero--single { height: min(74vh, 720px); height: min(74svh, 720px); min-height: 430px; }

@media (min-width: 1024px) {
  /* Sized to the artwork's own 1672x941 ratio so it fills edge to edge. It used
     to be letterboxed into a shorter band with the blurred, darkened poster
     filling the pillarbox either side, which read as dull grey haze. With the
     ratios matched there is nothing left to fill. */
  .hero--single {
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    max-height: 115svh;
    min-height: 0;
  }
  .hero--single .hero__ambient { display: none; }
}
@media (max-width: 1023px) { .hero--single { height: min(64svh, 540px); min-height: 400px; } }
.hero--single .hero__caption { bottom: clamp(26px, 6vw, 44px); }

.breadcrumb--light { color: var(--muted); }
.breadcrumb--light a:hover { color: var(--aqua-deep); }

.lede { margin-bottom: clamp(40px, 5vw, 64px); }
.lede__latin {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--aqua-deep);
}

body[data-product='beri-rouge'] .product-nav [data-prod='beri-rouge'],
body[data-product='barramundi'] .product-nav [data-prod='barramundi'],
body[data-product='scampi'] .product-nav [data-prod='scampi'],
body[data-product='mud-crab'] .product-nav [data-prod='mud-crab'] {
  border-color: var(--aqua);
  background: var(--pale);
}

/* Compact three-up media strip used on interior pages */
.media-strip {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.media-strip figure { margin: 0; }
.media-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
}
.media-strip figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--navy .media-strip figcaption { color: rgba(255, 255, 255, 0.6); }

/* Simple centred page for 404 / thank-you */
.simple-page {
  display: grid;
  place-items: center;
  min-height: 74vh;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: var(--section-y);
  text-align: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 60%, var(--navy-ink) 100%);
  color: var(--white);
}
.simple-page h1 { font-size: var(--fs-h1); }
.simple-page .lead { margin: var(--sp-5) auto 0; max-width: 52ch; color: rgba(255, 255, 255, 0.78); }
.simple-page .btn-row { margin-top: var(--sp-7); }
.simple-page__mark { width: 96px; margin: 0 auto var(--sp-6); }

/* =========================================================================
   26. IMMERSIVE MOTION — hero reveal, moving water, richer entrances
   Everything here is transform/opacity/clip-path only, runs on the GPU, and
   is neutralised by the reduced-motion block that follows it.
   ========================================================================= */

/* ---------------------------------------- 26a. Cinematic hero entrance */

/* The artwork opens from an inset, rounded frame out to full bleed. Opacity is
   deliberately never animated: the image paints on the first frame, so this
   costs nothing in LCP. */
.js .hero__viewport { animation: heroOpen 1.5s var(--ease-flow) both; }

@keyframes heroOpen {
  from { clip-path: inset(9% 12% 14% 12% round 26px); transform: scale(1.07); }
  to   { clip-path: inset(0 0 0 0 round 0); transform: scale(1); }
}

.js .hero__caption > * { animation: riseFade 0.85s var(--ease-flow) both; }
.js .hero__caption > *:nth-child(1) { animation-delay: 0.55s; }
.js .hero__caption > *:nth-child(2) { animation-delay: 0.68s; }
.js .hero__caption > *:nth-child(3) { animation-delay: 0.82s; }

.js .hero-cta__inner > * { animation: riseFade 0.9s var(--ease-flow) 1s both; }
.js .hero-cta__inner > *:nth-child(2) { animation-delay: 1.12s; }

@keyframes riseFade {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------- 26b. Moving water surface */

/* Sits in the transition zone at the foot of the hero, so the artwork appears
   to rest on water that flows into the navy band below. */
.hero__waves {
  position: absolute;
  inset: auto 0 -1px;
  z-index: 3;
  /* Kept low enough to sit under the strapline baked into every supplied
     hero artwork — the water meets the image, it never covers it. */
  height: clamp(52px, 6vw, 92px);
  pointer-events: none;
}

/* Product banners crop tighter, so the artwork's strapline sits lower. */
.hero--single .hero__waves { height: clamp(38px, 4.4vw, 62px); }
.js .hero__waves { animation: riseFade 1.2s var(--ease-flow) 0.7s both; }

.hero__wave-svg {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  max-width: none; /* overrides the global img/svg clamp */
  height: 100%;
}
.hero__wave-svg path { fill: var(--navy-ink); }

.hero__wave-svg--back  { opacity: 0.30; animation: waveDrift 30s linear infinite; }
.hero__wave-svg--mid   { opacity: 0.55; animation: waveDrift 22s linear infinite reverse; }
.hero__wave-svg--front { opacity: 1;    animation: waveDrift 16s linear infinite; }

.hero__wave-svg--mid path { fill: var(--navy-deep); }
.hero__wave-svg--back path { fill: var(--aqua-deep); }

/* A single bright filament riding the crest — the Big Blue Aqua signature */
.hero__wave-svg--crest { opacity: 0.5; animation: waveDrift 30s linear infinite; }
.hero__crest {
  fill: none;
  stroke: var(--aqua-bright);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Translating by exactly half the doubled path width loops with no seam. */
@keyframes waveDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ------------------------------------- 26c. Wave-driven CTA background */

.cta-band__waves { height: 74%; opacity: 0.9; }
.cta-band__layer {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  max-width: none; /* overrides the global img/svg clamp */
  height: 100%;
}
.cta-band__layer--1 { animation: waveDrift 26s linear infinite; }
.cta-band__layer--2 { animation: waveDrift 38s linear infinite reverse; }

/* --------------------------------------- 26d. Richer content entrances */

/* Headline lines wipe up behind their own edge instead of simply fading. */
.js .reveal-lines > span {
  display: block;
  clip-path: inset(0 0 108% 0);
  transform: translateY(0.36em);
  transition: clip-path 1s var(--ease-flow), transform 1s var(--ease-flow);
  transition-delay: calc(var(--line, 0) * 130ms);
}
.js .reveal.is-in .reveal-lines > span,
.js .reveal-lines.is-in > span {
  clip-path: inset(-0.25em 0 -0.15em 0);
  transform: none;
}

/* Section headings get the same wipe, without needing per-line markup. */
.js .reveal-wipe {
  clip-path: inset(0 0 106% 0);
  transform: translateY(0.3em);
  transition: clip-path 1.05s var(--ease-flow), transform 1.05s var(--ease-flow);
  transition-delay: var(--delay, 0ms);
}
.js .reveal-wipe.is-in { clip-path: inset(-0.25em 0 -0.15em 0); transform: none; }

/* Photography now drifts as it uncovers, which reads as depth rather than
   a plain fade. */
.js .img-reveal > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12) translateY(18px);
  transition: clip-path 1.35s var(--ease-flow), transform 1.7s var(--ease-flow),
              opacity 0.9s var(--ease-flow);
}

/* --------------------------------------------- 26e. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .js .hero__viewport,
  .js .hero__caption > *,
  .js .hero-cta__inner > *,
  .js .hero__waves { animation: none !important; clip-path: none; transform: none; opacity: 1; }

  .hero__wave-svg,
  .cta-band__layer { animation: none !important; }

  .js .reveal-lines > span,
  .js .reveal-wipe { clip-path: none !important; transform: none !important; }

  *, *::before, *::after { transition-delay: 0ms !important; }
}

/* Per-line stagger for the wipe-up headlines */
.js .reveal-lines > span:nth-child(1) { --line: 0; }
.js .reveal-lines > span:nth-child(2) { --line: 1; }
.js .reveal-lines > span:nth-child(3) { --line: 2; }
.js .reveal-lines > span:nth-child(4) { --line: 3; }

/* =========================================================================
   27. VIDEO HERO
   The supplied film is 1920x900 (2.13:1) and carries the Big Blue Aqua logo
   in-frame, so on desktop it is contained — never cropped — over a blurred
   backdrop of its own poster. Small screens crop to the subject instead.
   ========================================================================= */

/* The film is 1920x900 (2.133:1) and is shown whole, so the hero is sized to
   that exact ratio plus the header band. Box aspect == film aspect means
   `contain` fills it edge to edge with no pillarbox. Capped at the viewport
   height so the hero never overflows the screen. */
.hero--video {
  --film-aspect: 1920 / 900;
  /* No padding beyond the menu bar itself — the film starts where the menu
     ends. The logo burnt into the film begins 6% down its frame, which still
     leaves 29px of clearance at 1024px and 54px at 1920px. */
  --film-offset: var(--header-h);
  /* content-box carries the film's ratio and the header band is padding on
     top. Sized from the element's own width, so the scrollbar cannot skew it
     the way 100vw would. */
  box-sizing: content-box;
  /* Width must be definite: with only `aspect-ratio` and `min-height` set, the
     ratio derives the WIDTH from the minimum height and can push the section
     wider than the viewport, which caused a horizontal scrollbar at 1024px. */
  width: 100%;
  height: auto;
  aspect-ratio: var(--film-aspect);
  padding-top: var(--film-offset);
  /* Guard rail for ultra-wide monitors only; at every common desktop size the
     natural height is well under this, so the film stays full-bleed. */
  max-height: 115svh;
  min-height: 440px;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* The logo burnt into the film starts 6% down its frame. Relying on the
   letterbox to clear the header fails whenever the hero is wide or short
   enough for the film to fill the full height (e.g. 1920x1080), which put the
   two logos on top of each other. So the film gets a box that begins below the
   header instead — no viewport can collide them. */
@media (min-width: 1024px) {
  .hero--video .hero__video {
    top: var(--film-offset);
    height: calc(100% - var(--film-offset));
  }

  /* The band behind the menu was the blurred poster showing through — washed
     out and grey. It is brand navy instead, closed with an aqua hairline where
     it meets the film. */
  .hero--video::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: var(--film-offset);
    background:
      linear-gradient(180deg, rgba(13, 179, 186, 0) calc(100% - 2px), rgba(13, 179, 186, 0.55) 100%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  }

  /* With the hero matching the film's ratio the film fills its box exactly,
     so the blurred backdrop is never visible — skip loading it. */
  .hero--video .hero__ambient { display: none; }
}

/* Redundant over that solid band, and it would smear the top edge of the film.
   Desktop only — small screens have no band, so the header keeps its scrim for
   contrast against the cropped footage. */
@media (min-width: 1024px) {
  body[data-page='home'] .site-header:not(.is-stuck)::after { opacity: 0; }
}

/* Play / pause — WCAG 2.2.2 requires a control for motion that auto-starts */
/* Only shown when the script that operates it is available. */
.hero__playpause { display: none; }
.js .hero__playpause {
  position: absolute;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  z-index: 6;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(0, 14, 43, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.js .hero__playpause:hover { background: var(--aqua); border-color: var(--aqua); color: var(--navy-ink); }
.js .hero__playpause svg { width: 16px; height: 16px; fill: currentColor; }
.js .hero__playpause .hero__icon-play { display: none; }
.js .hero__playpause[data-playing='false'] .hero__icon-play { display: block; }
.js .hero__playpause[data-playing='false'] .hero__icon-pause { display: none; }

@media (max-width: 1023px) {
  .hero--video {
    /* Small screens crop instead of containing, so the film's ratio and the
       header band do not apply here. */
    box-sizing: border-box;
    aspect-ratio: auto;
    padding-top: 0;
    height: min(74svh, 580px);
    max-height: none;
    min-height: 440px;
  }
  /* Cropped past the logo burnt into the left of the frame — a partial
     white disc at the edge would read as an artefact. */
  .hero__video { object-fit: cover; object-position: 60% center; }
  /* The scrim lives on .hero__figure for the image heroes; the video hero
     needs its own. */
  .hero--video .hero__viewport::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 14, 43, 0.46) 0%, rgba(0, 14, 43, 0.1) 34%, rgba(0, 14, 43, 0.88) 100%);
  }
  .hero--video .hero__caption { z-index: 2; bottom: clamp(64px, 12vw, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  /* JS also pauses the film; this keeps the poster steady if it does not. */
  .hero__video { animation: none !important; }
}

/* =========================================================================
   28. DRIFTING SPECIES MARKS
   White silhouettes that drift slowly across the dark sections. Held at very
   low opacity so they read as texture in the water rather than as illustration
   — the brief rules out cartoon fish, so these must stay near-subliminal.
   ========================================================================= */

.sea-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sea-drift {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--white);
}

.sea-drift__mark {
  position: absolute;
  top: var(--y, 40%);
  left: 0;
  width: var(--size, 120px);
  /* Each symbol has its own viewBox ratio; without this the crab and prawn were
     being letterboxed inside a fish-shaped box and rendering undersized. */
  aspect-ratio: var(--ar, 128 / 56);
  opacity: var(--fade, 0.05);
  animation: swimAcross var(--dur, 80s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* The marks are drawn nose-left, so the eastbound ones are mirrored. */
.sea-drift__mark--rev { animation-name: swimBack; }

@keyframes swimAcross {
  from { transform: translate3d(-30vw, 0, 0) scaleX(-1); }
  25%  { transform: translate3d(3vw, -16px, 0) scaleX(-1); }
  50%  { transform: translate3d(36vw, 8px, 0) scaleX(-1); }
  75%  { transform: translate3d(69vw, -10px, 0) scaleX(-1); }
  to   { transform: translate3d(130vw, 0, 0) scaleX(-1); }
}

@keyframes swimBack {
  from { transform: translate3d(130vw, 0, 0); }
  25%  { transform: translate3d(97vw, 12px, 0); }
  50%  { transform: translate3d(64vw, -8px, 0); }
  75%  { transform: translate3d(31vw, 10px, 0); }
  to   { transform: translate3d(-30vw, 0, 0); }
}

/* Content must sit above the drift layer in every section that hosts one. */
.journey > .container,
.crab-story > .container,
.cta-band__inner { position: relative; z-index: 2; }

/* In the CTA band the marks swim above the waves but below the copy. */
.sea-drift--cta { z-index: 1; }

/* Phones get fewer, slower marks — less to composite while scrolling. */
@media (max-width: 767px) {
  .sea-drift__mark:nth-of-type(n + 3) { display: none; }
  .sea-drift__mark { --size: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .sea-drift__mark { animation: none !important; }
  /* Without the keyframe the mirrored marks would face the wrong way. */
  .sea-drift__mark { transform: translate3d(12vw, 0, 0) scaleX(-1); }
  .sea-drift__mark--rev { transform: translate3d(66vw, 0, 0); }
}

/* =========================================================================
   29. WHATSAPP
   ========================================================================= */

.icon-wa { width: 18px; height: 18px; flex: none; }

/* WhatsApp's own green, so the action is recognisable at a glance. It sits
   apart from the aqua/navy palette deliberately — it is a third-party channel,
   not a brand element. */
.btn--whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #05331a;
}
.btn--whatsapp:hover {
  background: #1fbe5a;
  border-color: #1fbe5a;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(37, 211, 102, 0.7);
}

.wa-link { display: inline-flex; align-items: center; gap: 8px; }
.wa-link .icon-wa { width: 16px; height: 16px; color: #25d366; }

.contact-aside__mail + .contact-aside__mail { margin-top: var(--sp-3); display: block; }
.contact-aside__wa { margin-top: var(--sp-5); }

.cta-band__mail a { color: var(--aqua-bright); }
.cta-band__mail span { color: rgba(255, 255, 255, 0.4); }