/* ==========================================================================
   NATFISH V1
   National Fishermen Producers' Co-operative Society Ltd.
   Concept stylesheet. No build step, no external dependencies.
   ========================================================================== */

:root {
  /* Palette: deep Caribbean navy, ocean teal, turquoise, white.
     Coral is a restrained accent only, never a section fill. */
  --navy-900: #03192a;
  --navy-800: #052b45;
  --navy-700: #0a3c5c;
  --teal-700: #0b6675;
  --teal-600: #0e7c8b;
  --turq-500: #22a7bc;
  --turq-300: #7fd7e4;
  --coral: #d9503a;

  --sand: #f4f8fa;
  --sand-200: #e5eef2;
  --white: #ffffff;

  --ink: #10293a;
  --ink-soft: #4a6376;
  --ink-onDark: rgba(255, 255, 255, 0.82);
  --line: rgba(16, 41, 58, 0.14);
  --line-onDark: rgba(255, 255, 255, 0.16);

  --shadow-sm: 0 2px 8px rgba(5, 43, 69, 0.06);
  --shadow-md: 0 14px 38px rgba(5, 43, 69, 0.1);
  --shadow-lg: 0 28px 70px rgba(5, 43, 69, 0.16);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Bitter is a slab serif: sturdy and editorial, and it reads as a working
     institution rather than a hospitality brand. Source Sans 3 carries every
     word a visitor actually reads. Both self-hosted, see css/fonts.css. */
  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.75rem, 8vw, 7rem);
  --header-h: 88px;
}

/* --------------------------------------------------------------- base -- */

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

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  /* Source Sans 3 runs a touch smaller than the old system stack at the same
     px, so the base size and measure are nudged up to compensate. */
  font-size: 1.09rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Slab serifs carry more ink per character than the old grotesque, so the
   tracking is far less negative and the leading is a little looser than the
   sans-serif settings these replaced. */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--navy-800);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.05rem, 4.9vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
}

h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.011em;
}

h3 {
  font-size: clamp(1.12rem, 1.75vw, 1.3rem);
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -0.004em;
}

h4 {
  font-weight: 650;
}

p {
  margin: 0 0 1.1em;
}

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

a {
  color: var(--teal-700);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--navy-800);
}

ul {
  margin: 0 0 1.1em;
  padding-left: 1.15rem;
}

li {
  margin-bottom: 0.4rem;
}

strong {
  font-weight: 650;
  color: var(--navy-800);
}

:focus-visible {
  outline: 3px solid var(--turq-500);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 999;
  background: var(--navy-800);
  color: var(--white);
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--white);
}

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

/* ---------------------------------------------------------- structure -- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 880px;
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}

.section--sand {
  background: var(--sand);
}

.section--navy {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(34, 167, 188, 0.24), transparent 58%),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--ink-onDark);
}

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

.section--navy a {
  color: var(--turq-300);
}

.section--navy a:hover {
  color: var(--white);
}

.section-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  margin-bottom: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-600);
}

.section--navy .eyebrow {
  color: var(--turq-300);
}

.eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-left: 0.7rem;
  vertical-align: 0.22em;
  background: currentColor;
  opacity: 0.55;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 62ch;
}

.section--navy .lede {
  color: var(--ink-onDark);
}

.note {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.8rem 1.65rem;
  border: 1.5px solid transparent;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--navy-800);
}

.btn--outline:hover {
  border-color: var(--teal-600);
  color: var(--teal-700);
  background: rgba(14, 124, 139, 0.05);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 42px;
  padding: 0.5rem 1.15rem;
  font-size: 0.88rem;
}

/* Text link with a moving arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--teal-700);
}

.arrow-link::after {
  content: "→";
  transition: transform 0.18s ease;
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

/* ------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

/* --- logo lockup --- */
/* The header carries a compact lockup (mark + NATFISH wordmark). The full logo
   including the legal-name lines is only legible at large sizes, so it runs in
   the footer panel and on the About page instead. The artwork is never
   recoloured or filtered. */

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

.logo img {
  width: auto;
  height: 62px;
}

/* The compact lockup is ~1.97:1, so 50px tall is a 98px-wide box: clear of the
   46px menu button even at 320px. */
@media (max-width: 1279px) {
  .logo img {
    height: 50px;
  }
}

/* Full logo on a light panel so the dark footer never forces a recolour. */
.footer-logo-panel {
  display: inline-block;
  padding: 0.9rem 1.15rem;
  margin-bottom: 1.15rem;
  background: var(--white);
  border-radius: var(--radius);
}

.footer-logo-panel img,
.logo-full {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* --- primary nav --- */

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.45rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-block;
  padding: 0.45rem 0.1rem;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  position: relative;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--teal-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav__link:hover {
  color: var(--teal-700);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--navy-800);
  font-weight: 700;
}

.header-cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--navy-800);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  transform: translateY(-6px);
}

.nav-toggle__bars::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

@media (max-width: 1279px) {
  .nav-toggle {
    display: inline-flex;
    position: relative;
  }

  .header-cta {
    display: none;
  }

  /* A compact header on phones. */
  :root {
    --header-h: 76px;
  }

  /* backdrop-filter makes an element the containing block for its fixed
     descendants, so the frosted header was trapping the overlay inside its own
     89px box: the menu opened 64px tall with the hero showing underneath. The
     header is opaque here instead, which puts the fixed .nav back on the
     viewport. Desktop keeps the frosted treatment and has no fixed child. */
  .site-header {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Full-screen overlay menu. It fades in place rather than sliding from
     off-canvas, because an element translated past the right edge is counted
     in the document scroll width and shows up as horizontal overflow. */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    /* Explicit height so the overlay always reaches the bottom of the screen,
       with dvh accounting for mobile browser chrome. */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin: 0;
    background: var(--white);
    padding: 1.25rem var(--gutter) 2.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li {
    margin: 0;
  }

  .nav__link {
    display: block;
    padding: 1rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--line);
  }

  .nav__link::after {
    display: none;
  }

  .nav__cta {
    margin-top: 1.75rem;
  }

  .nav__cta .btn {
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .nav__cta {
    display: none;
  }
}

body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------- hero -- */

/* Split editorial hero. The photographs are the strongest asset in this build,
   so they get their own unobstructed panel instead of being darkened into
   wallpaper behind the headline. No scrim, no text over the image. */
.hero {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: stretch;
  background: var(--navy-800);
}

.hero > * {
  min-width: 0;
}

.hero__panel {
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 90% at 8% 4%, rgba(34, 167, 188, 0.22), transparent 62%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 100%);
  padding: clamp(2.75rem, 5vw, 5rem) clamp(1.5rem, 3.2vw, 3.5rem);
}

.hero__content {
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
}

.hero__eyebrow {
  margin-bottom: 1rem;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--turq-300);
}

.hero h1 {
  font-size: clamp(1.95rem, 3.3vw, 2.85rem);
  color: var(--white);
  line-height: 1.13;
  letter-spacing: -0.016em;
  margin-bottom: 1.1rem;
}

.hero__copy {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.02rem, 1.4vw, 1.13rem);
  margin-bottom: 2rem;
  max-width: 36ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero__actions .btn {
  white-space: nowrap;
  padding-block: 0.6rem;
}

/* The image panel: full colour, no overlay. */
.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  min-height: clamp(420px, 60vh, 660px);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide picture,
.hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* object-position is set per slide inline, so each photograph keeps its own
   subject in frame rather than sharing one crop. */
.hero__slide img {
  object-fit: cover;
}

/* A thin turquoise seam where the panel meets the photograph. */
.hero__media::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2;
  background: linear-gradient(180deg, var(--turq-500), rgba(34, 167, 188, 0.15));
}

@media (max-width: 900px) {
  /* Stacked: photograph first at full width, then the navy panel. Nothing is
     printed over the image on mobile. */
  .hero {
    grid-template-columns: 1fr;
  }

  .hero__media {
    order: -1;
    min-height: 0;
    height: clamp(250px, 46vw, 360px);
  }

  .hero__media::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, var(--turq-500), rgba(34, 167, 188, 0.15));
  }

  .hero__content {
    max-width: none;
    margin-left: 0;
  }

  .hero__copy {
    max-width: 34ch;
  }
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ------------------------------------------------- identity ribbon -- */
/* The registered name as a registry line, not hero copy. */

.identity-ribbon {
  background: var(--navy-900);
  border-top: 1px solid rgba(34, 167, 188, 0.35);
  border-bottom: 1px solid rgba(217, 80, 58, 0.4);
}

.identity-ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.75rem;
  padding-block: 0.85rem;
}

.identity-ribbon__name {
  margin: 0;
  font-size: clamp(0.82rem, 1.35vw, 0.97rem);
  font-weight: 600;
  letter-spacing: 0.055em;
  color: var(--white);
}

.identity-ribbon__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--turq-300);
}

.identity-ribbon__sep {
  width: 22px;
  height: 1px;
  background: var(--coral);
  opacity: 0.85;
}

@media (max-width: 620px) {
  .identity-ribbon__inner {
    justify-content: flex-start;
  }

  .identity-ribbon__name {
    letter-spacing: 0.03em;
  }
}

/* Page hero used on inner pages. */
.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6rem);
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(34, 167, 188, 0.3), transparent 60%),
    linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--ink-onDark);
  overflow: hidden;
}

.page-hero h1 {
  color: var(--white);
  max-width: 18ch;
}

.page-hero .lede {
  color: rgba(255, 255, 255, 0.84);
}

.breadcrumb {
  margin-bottom: 1.1rem;
  font-size: 0.83rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--turq-300);
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--white);
  text-decoration: underline;
}

.breadcrumb span {
  opacity: 0.5;
  margin-inline: 0.45rem;
}

/* --------------------------------------------------------- trust strip -- */

.trust {
  background: var(--navy-800);
  color: var(--white);
}

.trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem clamp(1.5rem, 5vw, 4.5rem);
  list-style: none;
  margin: 0;
  padding-block: 1.15rem;
}

.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.trust__item svg {
  width: 17px;
  height: 17px;
  color: var(--turq-300);
  flex-shrink: 0;
}

/* -------------------------------------------------------------- grids -- */

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

.grid > * {
  min-width: 0;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------- cards -- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.24s ease, box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(14, 124, 139, 0.34);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sand-200);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card__media img {
  transform: scale(1.045);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
}

.card__body h3 {
  margin-bottom: 0.55rem;
}

.card__body p {
  color: var(--ink-soft);
  font-size: 0.975rem;
  /* Keeps cards from becoming excessively tall on mobile. */
  margin-bottom: 1.15rem;
}

.card__body .arrow-link {
  margin-top: auto;
}

/* Icon-led block used on navy bands. */
.pillar {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line-onDark);
  border-radius: var(--radius-lg);
}

.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: var(--radius);
  background: rgba(34, 167, 188, 0.18);
  color: var(--turq-300);
}

.pillar__icon svg {
  width: 26px;
  height: 26px;
}

.pillar p {
  font-size: 0.975rem;
  color: var(--ink-onDark);
}

/* --------------------------------------------------------------- flow -- */
/* FISHERS -> COOPERATIVE -> PROCESSING -> MARKET */

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 0.6rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  list-style: none;
  padding: 0;
}

.flow__step {
  position: relative;
  margin: 0;
  padding: clamp(1.2rem, 2.2vw, 1.6rem) 1rem;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.6rem;
  width: 0.6rem;
  height: 2px;
  background: var(--turq-500);
  transform: translateY(-50%);
  z-index: 1;
}

.flow__num {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--turq-500);
  margin-bottom: 0.5rem;
}

.flow__label {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.86rem, 1.5vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy-800);
  line-height: 1.25;
}

.flow__note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .flow__step:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -1.05rem;
    width: 2px;
    height: 0.9rem;
    transform: translateX(-50%);
  }
}

/* -------------------------------------------------------------- split -- */

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4rem);
}

.split > * {
  min-width: 0;
}

.split--media-right .split__media {
  order: 2;
}

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--sand-200);
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split__media--tall img {
  aspect-ratio: 3 / 4;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split--media-right .split__media {
    order: 0;
  }

  .split__media img,
  .split__media--tall img {
    aspect-ratio: 16 / 10;
  }
}

/* ------------------------------------------------------------- stats  -- */

.factlist {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}

.factlist li {
  margin: 0;
  padding: 1.05rem 1.25rem;
  background: var(--white);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
}

.factlist dt,
.factlist .factlist__key {
  font-weight: 650;
  color: var(--navy-800);
}

.factlist .factlist__val {
  color: var(--ink-soft);
  text-align: right;
}

/* -------------------------------------------------------------- video -- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
}

.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--white);
}

.video__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 25, 42, 0.36) 0%,
    rgba(3, 25, 42, 0.58) 100%
  );
}

.video__play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 9vw, 84px);
  height: clamp(64px, 9vw, 84px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--teal-700);
  box-shadow: 0 10px 40px rgba(3, 25, 42, 0.35);
  transition: transform 0.22s ease, background-color 0.22s ease;
}

.video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}

.video__poster:hover .video__play {
  transform: scale(1.07);
  background: var(--white);
}

.video__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.5rem clamp(1.15rem, 3vw, 2rem);
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 1px 10px rgba(3, 25, 42, 0.5);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-credit {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.section--navy .video-credit {
  color: rgba(255, 255, 255, 0.62);
}

/* -------------------------------------------------------------- forms -- */

.form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  box-shadow: var(--shadow-md);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.form-grid > * {
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--navy-800);
}

.field .opt {
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--sand);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.field textarea {
  min-height: 130px;
  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='%234a6376' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(14, 124, 139, 0.16);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--turq-500);
  outline-offset: 1px;
}

.field .error {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--coral);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--coral);
  background: rgba(217, 80, 58, 0.04);
}

.field.is-invalid .error {
  display: block;
}

.form-foot {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.form-foot .note {
  flex: 1 1 240px;
}

/* Success panel shown in place of the form. */
.form-success {
  display: none;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
}

.form-success.is-visible {
  display: block;
}

.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: rgba(14, 124, 139, 0.12);
  color: var(--teal-600);
}

.form-success__icon svg {
  width: 30px;
  height: 30px;
}

.form-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn--whatsapp {
  background: #1ea952;
  border-color: #1ea952;
  color: var(--white);
}

.btn--whatsapp:hover {
  background: #16853f;
  border-color: #16853f;
  color: var(--white);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.form-success__restart {
  margin-top: 1.25rem;
  font-size: 0.88rem;
}

.form-success__restart button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--teal-700);
  text-decoration: underline;
  cursor: pointer;
}

/* --------------------------------------------------------------- news -- */

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--turq-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.news-card__tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.28rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--teal-700);
  background: rgba(14, 124, 139, 0.1);
  border-radius: 999px;
}

.news-card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.6rem;
}

.news-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}

.news-card__source {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.news-card__source a {
  font-weight: 600;
}

/* ------------------------------------------------------------ gallery -- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}

.gallery > * {
  min-width: 0;
}

.gallery__item {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sand-200);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.3s ease;
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 25, 42, 0.45));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__item:hover::after {
  opacity: 1;
}

.gallery__item--wide {
  grid-column: span 2;
}

.gallery__item--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}

@media (max-width: 860px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__item--tall {
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 460px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery__item--wide {
    grid-column: span 1;
  }
}

/* --- lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 25, 42, 0.94);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.lightbox__caption {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__btn svg {
  width: 20px;
  height: 20px;
}

.lightbox__close {
  top: clamp(0.75rem, 2.5vw, 1.5rem);
  right: clamp(0.75rem, 2.5vw, 1.5rem);
}

.lightbox__prev {
  left: clamp(0.5rem, 2vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: clamp(0.5rem, 2vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------ contact -- */

.contact-band {
  position: relative;
  background: var(--navy-900);
  color: var(--ink-onDark);
  overflow: hidden;
}

.contact-band__media {
  position: absolute;
  inset: 0;
}

.contact-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(3, 25, 42, 0.95) 0%,
    rgba(3, 25, 42, 0.8) 48%,
    rgba(3, 25, 42, 0.5) 100%
  );
}

.contact-band .container {
  position: relative;
  z-index: 1;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.contact-list svg {
  width: 20px;
  height: 20px;
  margin-top: 0.22rem;
  color: var(--turq-300);
  flex-shrink: 0;
}

.contact-list a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 215, 228, 0.5);
}

.contact-list a:hover {
  color: var(--turq-300);
  border-bottom-color: var(--turq-300);
}

.contact-list__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.15rem;
  font-weight: 600;
}

/* ------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.68);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.94rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-onDark);
}

.footer-grid > * {
  min-width: 0;
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.site-footer h4 {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--turq-300);
  margin-bottom: 1.1rem;
}

.site-footer .logo {
  margin-bottom: 1.1rem;
}

.footer-about p {
  max-width: 42ch;
  font-size: 0.92rem;
  line-height: 1.6;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 0.6rem;
}

.footer-list a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.footer-list a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p {
  margin: 0;
}

/* ----------------------------------------------------------- reveal  -- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .card:hover,
  .news-card:hover {
    transform: none;
  }
}

/* Without JS the reveal elements must still be visible. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Seven-page restructure: carousel and page components
   ========================================================================== */

/* ----------------------------------------------------- hero carousel -- */
/* Slides stack in the same box and cross-fade, so nothing reflows as the
   carousel advances. The existing .hero__media rules already position and crop
   the images; only the stacking and fade are added here. */

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero--carousel .hero__inner {
  z-index: 2;
}

/* ------------------------------------------------------ section heads -- */

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: none;
}

.section-head--split h2 {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ notices -- */

.notice {
  padding: 1.05rem 1.25rem;
  margin: 0;
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 3px solid var(--turq-500);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.section--sand .notice {
  background: var(--white);
}

/* Small disclosure under image-led sections. */
.concept-note {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ----------------------------------------------------- identity panel -- */

.identity-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.identity-panel > * {
  min-width: 0;
}

.identity-panel .logo-full {
  max-width: 380px;
  flex: 1 1 260px;
}

.identity-panel > div {
  flex: 1 1 300px;
}

/* --------------------------------------------------------- timeline  -- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding-bottom: 2rem;
  margin: 0;
  border-left: 2px solid var(--line);
  padding-left: clamp(1rem, 3vw, 1.75rem);
}

.timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.timeline__year {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
  padding-top: 0.3rem;
}

.timeline h3 {
  margin-bottom: 0.4rem;
}

.timeline p {
  color: var(--ink-soft);
  font-size: 0.975rem;
}

@media (max-width: 620px) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* ------------------------------------------------------ update cards -- */

.update-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.update-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.update-card__media {
  aspect-ratio: 16 / 9;
  background: var(--sand-200);
  overflow: hidden;
}

.update-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.update-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.3rem, 2.4vw, 1.75rem);
}

.update-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.update-card__tag {
  padding: 0.28rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--teal-700);
  background: rgba(14, 124, 139, 0.1);
  border-radius: 999px;
}

.update-card__date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.update-card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.55rem;
}

.update-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.update-card__source {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.update-card__source a {
  font-weight: 600;
}

/* Featured update: media beside body on desktop. */
.feature-update {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.feature-update > * {
  min-width: 0;
}

.feature-update__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.feature-update__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem, 3.5vw, 3rem);
}

@media (max-width: 860px) {
  .feature-update {
    grid-template-columns: 1fr;
  }

  .feature-update__media img {
    aspect-ratio: 16 / 9;
  }
}

/* ------------------------------------------------------- gallery page -- */

.gallery {
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.gallery__figure {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  min-width: 0;
}

.gallery__figure--wide {
  grid-column: span 2;
}

.gallery__figure figcaption {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.gallery__figure .gallery__item {
  width: 100%;
}

@media (max-width: 860px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery__figure--wide {
    grid-column: span 1;
  }
}

/* Homepage gallery teaser: four crops that link through. */
.gallery-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
}

.gallery-preview > * {
  min-width: 0;
}

.gallery-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.4s ease, filter 0.3s ease;
}

.gallery-preview:hover img {
  filter: brightness(1.06);
}

@media (max-width: 700px) {
  .gallery-preview {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------- cta bands -- */

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.btn--onDark {
  border-color: var(--line-onDark);
  color: var(--white);
}

.btn--onDark:hover {
  border-color: var(--turq-300);
  color: var(--turq-300);
  background: rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------ contact strip -- */

.contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.contact-strip > * {
  min-width: 0;
}

.contact-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-strip__list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.95rem;
}

.contact-strip__list svg {
  width: 18px;
  height: 18px;
  color: var(--teal-600);
  flex-shrink: 0;
}

.contact-strip__list a {
  text-decoration: none;
  font-weight: 600;
}

.contact-strip__list a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------- enquiry blocks -- */

.enquiry {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.enquiry > * {
  min-width: 0;
}

@media (max-width: 860px) {
  .enquiry {
    grid-template-columns: 1fr;
  }
}

.enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.75rem 0 0.9rem;
}

.enquiry__actions .btn {
  flex: 1 1 230px;
}

.btn--whatsapp {
  background: #1ea952;
  border-color: #1ea952;
  color: var(--white);
}

.btn--whatsapp:hover {
  background: #16853f;
  border-color: #16853f;
  color: var(--white);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.enquiry__checklist {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.enquiry__checklist h3 {
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.checklist li:last-child {
  margin-bottom: 0;
}

.checklist svg {
  width: 16px;
  height: 16px;
  margin-top: 0.28rem;
  color: var(--teal-600);
  flex-shrink: 0;
}

/* -------------------------------------------------------- contact card -- */

.contact-card {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  background: rgba(14, 124, 139, 0.1);
  color: var(--teal-600);
}

.contact-card__icon svg {
  width: 22px;
  height: 22px;
}

.contact-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.contact-card p {
  color: var(--ink-soft);
  font-size: 0.975rem;
  margin-bottom: 0.9rem;
}

/* ----------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }

  .update-card:hover,
  .gallery-preview:hover img {
    transform: none;
  }
}

/* ==========================================================================
   Icon system and editorial de-templating
   ========================================================================== */

/* One family: 24px viewBox, 1.85 stroke, navy from currentColor, turquoise on
   accented paths, coral kept for the rare highlight. */
.ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.ico__accent {
  stroke: var(--turq-500);
}

.ico__coral {
  stroke: var(--coral);
}

/* On navy the accent needs to lift off the ground. */
.section--navy .ico__accent,
.identity-ribbon .ico__accent,
.contact-band .ico__accent,
.site-footer .ico__accent {
  stroke: var(--turq-300);
}

/* Feature icons sit on an open baseline rule rather than in yet another
   rounded square. The repeated icon-in-a-tile is the single most template-like
   pattern in the previous build. */
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-radius: 0;
  background: none;
  border-bottom: 2px solid rgba(34, 167, 188, 0.5);
  color: var(--turq-300);
}

.pillar__icon .ico {
  width: 30px;
  height: 30px;
}

.contact-card__icon {
  display: inline-flex;
  width: auto;
  height: auto;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-radius: 0;
  background: none;
  border-bottom: 2px solid rgba(14, 124, 139, 0.35);
  color: var(--teal-600);
}

.contact-card__icon .ico {
  width: 26px;
  height: 26px;
}

/* A species mark set beside its own heading. */
.h-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.h-icon .h-icon__mark {
  margin-top: 0.12em;
}

.h-icon__mark {
  width: 30px;
  height: 30px;
  color: var(--teal-600);
  flex-shrink: 0;
}

/* Icons in running lists inherit the text colour and sit on the first line. */
.contact-list .ico,
.contact-strip__list .ico,
.trust__item .ico,
.checklist .ico {
  width: 19px;
  height: 19px;
}

.checklist .ico {
  margin-top: 0.2rem;
  color: var(--teal-600);
}

.btn .ico {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------- editorial rhythm -- */

/* A rope-and-wave rule, used sparingly to break the run of identical
   section headings. */
.rule-wave {
  display: block;
  width: 118px;
  height: 8px;
  margin: 0 0 1.25rem;
  color: var(--turq-500);
}

.section-head--center .rule-wave {
  margin-inline: auto;
}

.section--navy .rule-wave {
  color: var(--turq-300);
}

/* Editorial heads: left-aligned with a hairline above, so not every section
   opens with the same centred stack. */
.section-head--rule {
  padding-top: 1.4rem;
  border-top: 2px solid var(--navy-800);
}

.section--navy .section-head--rule {
  border-top-color: var(--turq-300);
}

.section-head--rule .eyebrow {
  margin-bottom: 0.7rem;
}

/* Bitter carries the numerals in the timeline and the flow, which is where the
   display face earns its keep. */
.timeline__year,
.flow__num {
  font-family: var(--font-display);
  font-weight: 700;
}

.timeline__year {
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Pull quote / significant date, set in the display face. */
.stat-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  color: var(--navy-800);
  letter-spacing: -0.012em;
}

.section--navy .stat-line {
  color: var(--white);
}

/* ==========================================================================
   Bilingual control, branding and alignment corrections
   ========================================================================== */

/* ------------------------------------------------------ language toggle -- */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.42rem 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.lang-toggle:hover {
  border-color: var(--teal-600);
  color: var(--teal-700);
  background: rgba(14, 124, 139, 0.05);
}

.lang-toggle__globe {
  display: inline-flex;
  color: var(--teal-600);
}

.lang-toggle__globe svg {
  width: 17px;
  height: 17px;
}

/* On mobile it sits between the compact logo and the hamburger. */
@media (max-width: 1279px) {
  .lang-toggle {
    margin-left: auto;
    margin-right: 0.6rem;
  }
}

@media (max-width: 400px) {
  .lang-toggle {
    padding-inline: 0.55rem;
  }

  .lang-toggle__label {
    font-size: 0.8rem;
  }
}

/* Above the drawer breakpoint the toggle sits after the nav, before the CTA. */
@media (min-width: 1280px) {
  .lang-toggle {
    margin-left: 0.9rem;
    margin-right: 0.15rem;
  }
}

/* --------------------------------------------------------- brand weight -- */

/* The registered name is the point of the ribbon, so it carries more weight. */
.identity-ribbon__name {
  font-size: clamp(0.9rem, 1.5vw, 1.09rem);
  font-weight: 700;
  letter-spacing: 0.045em;
}

.hero__eyebrow strong {
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hero__eyebrow-sep {
  opacity: 0.5;
  margin-inline: 0.15rem;
}

/* Oversized NATFISH behind inner-page headings. Understated: it sits under the
   content, clipped by the band, and never competes with the h1. */
.page-hero {
  position: relative;
  isolation: isolate;
}

.page-hero__watermark {
  position: absolute;
  right: -0.06em;
  bottom: -0.3em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 17vw, 13rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 700px) {
  .page-hero__watermark {
    font-size: clamp(4rem, 26vw, 8rem);
    color: rgba(255, 255, 255, 0.045);
  }
}

/* ------------------------------------------------------ site credit -- */

.site-credit {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-onDark);
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
}

.site-credit a {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.site-credit a:hover {
  color: var(--turq-300);
  border-bottom-color: var(--turq-300);
}

/* ------------------------------------------- alignment corrections -- */

/* Headings that introduce a card grid are centred, with their wave rule and
   lede centred too. Long editorial copy stays left-aligned for readability. */
.section-head--center .lede,
.section-head--center .rule-wave {
  margin-inline: auto;
}

/* Card-based icon groups centre as a unit. */
.pillar--center,
.contact-card {
  text-align: center;
}

.pillar--center .pillar__icon,
.contact-card__icon {
  justify-content: center;
  align-self: center;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.contact-card .arrow-link {
  justify-content: center;
}

/* The homepage contact strip centres on mobile, where it stacks. */
@media (max-width: 820px) {
  .contact-strip {
    text-align: center;
    justify-content: center;
  }

  .contact-strip__list {
    justify-content: center;
  }

  .contact-strip__list li {
    justify-content: center;
  }

  .contact-strip .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Seafood Seasons
   ========================================================================== */

/* Inner-page split hero, same composition as the homepage. */
.hero--page .hero__media {
  min-height: clamp(360px, 46vh, 540px);
}

.hero--page .breadcrumb {
  margin-bottom: 1.1rem;
}

.notice--strong {
  background: rgba(217, 80, 58, 0.06);
  border-left-color: var(--coral);
  color: var(--ink);
}

.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.15rem, 2.2vw, 1.6rem);
  align-items: stretch;
}

.season-grid > * {
  min-width: 0;
}

.season-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-600);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.season-card--note {
  border-top-color: var(--coral);
}

.season-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.season-card__icon {
  display: inline-flex;
  color: var(--teal-600);
}

.season-card__icon .ico {
  width: 30px;
  height: 30px;
}

.season-card__head h3 {
  margin: 0;
  font-size: 1.12rem;
}

/* Status wording is drawn from a fixed permitted set: it describes the
   regulatory period only, never stock. */
.season-status {
  margin: 0 0 1.1rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--sand);
  color: var(--ink-soft);
}

.season-status--open {
  background: rgba(14, 124, 139, 0.1);
  color: var(--teal-700);
}

.season-status--closed {
  background: rgba(217, 80, 58, 0.09);
  color: #a8381f;
}

.season-status--varies {
  background: rgba(217, 80, 58, 0.09);
  color: #a8381f;
}

.season-facts {
  margin: 0 0 0.9rem;
  display: grid;
  gap: 0.55rem;
}

.season-facts div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 1rem;
  align-items: baseline;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.season-facts div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.season-facts dt {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.season-facts dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: right;
  color: var(--navy-800);
}

@media (max-width: 400px) {
  .season-facts div {
    grid-template-columns: 1fr;
  }

  .season-facts dd {
    text-align: left;
  }
}

.season-card__note,
.season-card__body {
  margin: auto 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.season-card__note {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.season-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 2px solid var(--navy-800);
  font-size: 0.88rem;
}

.season-meta p {
  margin: 0;
}

.season-meta__label {
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.season-meta__value {
  font-weight: 650;
  color: var(--navy-800);
  margin-left: 0.4rem;
}

/* ------------------------------------------ homepage seasons feature -- */

.season-feature {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: stretch;
  background: var(--navy-800);
}

.season-feature > * {
  min-width: 0;
}

.season-feature__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 42vh, 520px);
}

.season-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.season-feature__panel {
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1.5rem, 3vw, 3.5rem);
  background:
    radial-gradient(120% 90% at 92% 6%, rgba(34, 167, 188, 0.22), transparent 62%),
    linear-gradient(196deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

.season-feature__inner {
  max-width: 32rem;
}

.season-feature h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .season-feature {
    grid-template-columns: 1fr;
  }

  .season-feature__media {
    min-height: 0;
    height: clamp(230px, 42vw, 330px);
  }
}

/* ------------------------------------------------------- journey links -- */

.season-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 3px solid var(--turq-500);
  border-radius: var(--radius);
}

.season-callout p {
  margin: 0;
  flex: 1 1 18rem;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.season-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.season-hint {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--sand);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.season-card__contact {
  margin: -0.5rem 0 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-700);
}

/* ------------------------------------------------- bilingual header fit -- */
/* Spanish navigation labels are markedly longer than the English ones
   ("Temporadas de Mariscos" against "Seafood Seasons"), and the 1200px
   container was clipping the header before the nav had room. The header alone
   spreads wider than the content column, and the nav runs a little tighter, so
   the horizontal layout survives Spanish rather than only English. */
.site-header .container {
  max-width: 1560px;
}

@media (min-width: 1280px) {
  .nav__list {
    gap: clamp(0.4rem, 0.95vw, 0.9rem);
  }

  .nav__link {
    font-size: 0.88rem;
  }

  .header-cta .btn {
    padding-inline: 1rem;
  }
}