/* P&L England — design system */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Archivo+Black&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&display=swap');

/* Force the ampersand to render in a heavy upright form, identically across
   every device. Archivo Black is loaded from Google Fonts so iOS, Android,
   Windows and macOS all render the same "&" glyph. We still keep Arial Black
   / Helvetica Bold local() fallbacks in case the webfont fails to load. */
@font-face {
  font-family: 'NormalAmp';
  src: local('Archivo Black'), local('ArchivoBlack-Regular'),
       local('Arial Black'), local('Arial-Black'),
       local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'),
       local('Helvetica-Bold'), local('Helvetica Bold'),
       url('https://fonts.gstatic.com/s/archivoblack/v22/HTxqL289NzCGg4MzN6KJ7eW6OYuP_x7yx3A.woff2') format('woff2');
  unicode-range: U+0026;
  font-display: swap;
}

:root {
  /* Paper palette (default) */
  --paper: #FEFDF8;
  --paper-2: #F8F3E5;
  --ink: #1A2418;
  --ink-2: #4A5448;
  --ink-3: #8A8E84;
  --line: #ECE4CE;
  --line-soft: #F4EEDB;

  --forest: #3F6B3A;
  --forest-deep: #2C4F29;
  --leaf: #6FB155;
  --tomato: #D63B27;
  --tomato-deep: #A82A1B;
  --amber: #E89A3C;
  --cream: #FAF6EC;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: var(--sans);

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }

::selection { background: var(--tomato); color: var(--cream); }

/* Theme: ink (dark) */
body.theme-ink {
  --paper: #0E1410;
  --paper-2: #161D17;
  --ink: #F4EFE2;
  --ink-2: #B8B0A0;
  --ink-3: #6E6A5E;
  --line: #2A312A;
  --line-soft: #1F2520;
  --forest: #4A8B5C;
  --leaf: #6FB37F;
  --cream: #F4EFE2;
}

/* ─────────────────────────────────────────────────────────────────
   Alternative palettes — toggled live from the Tweaks panel.
   Each redefines the same token surface (--paper, --ink, --tomato as
   primary CTA colour, --forest-deep as dark-section bg, --leaf as
   "in season" accent) so every component stays semantically consistent
   without touching component code.
   ───────────────────────────────────────────────────────────────── */

/* Market Hall — deep navy primary, sun yellow accent, ivory paper.
   Authoritative B2B / produce-trader signage feel. */
body.theme-market {
  --paper: #FBF8F2;
  --paper-2: #F1ECDF;
  --ink: #0E2A47;
  --ink-2: #3D5773;
  --ink-3: #8A99AB;
  --line: #DCD3BC;
  --line-soft: #EAE3CE;

  --forest: #0E2A47;
  --forest-deep: #0A1F36;
  --leaf: #2F8F3F;
  --tomato: #F5C842;        /* primary CTA: sun yellow */
  --tomato-deep: #D9AE2A;
  --amber: #E89A3C;
  --cream: #FBF8F2;
}
body.theme-market .btn-primary { color: #0E2A47; box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 8px 24px -10px rgba(245,200,66,0.55); }
body.theme-market ::selection { background: #F5C842; color: #0E2A47; }

/* Market — Cool off-white (option 2): same navy + yellow keys, swap the warm
   ivory paper for a near-white with a microscopic blue-grey tint. Reads more
   modern / corporate than the standard Market Hall palette. */
body.theme-market-cool {
  --paper: #F7F8FA;
  --paper-2: #ECEEF2;
  --ink: #0E2A47;
  --ink-2: #3D5773;
  --ink-3: #8A99AB;
  --line: #DCE0E6;
  --line-soft: #E8EBF0;

  --forest: #0E2A47;
  --forest-deep: #0A1F36;
  --leaf: #2F8F3F;
  --tomato: #F5C842;
  --tomato-deep: #D9AE2A;
  --amber: #E89A3C;
  --cream: #F7F8FA;
}
body.theme-market-cool .btn-primary { color: #0E2A47; box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 8px 24px -10px rgba(245,200,66,0.55); }
body.theme-market-cool .eyebrow,
body.theme-market-cool .h-display em,
body.theme-market-cool .tomato { color: #0E2A47 !important; }
body.theme-market-cool .pill.pill-tomato {
  background: rgba(14,42,71,0.08); color: #0E2A47; border-color: rgba(14,42,71,0.2);
}
body.theme-market-cool ::selection { background: #F5C842; color: #0E2A47; }

/* Market — Two-tone (option 7): pure white paper, deep navy carries the
   weight in dark sections (Quote, Footer, Products feature block). Editorial
   FT.com / annual-report rhythm — alternating white and navy. */
body.theme-market-twotone {
  --paper: #FFFFFF;
  --paper-2: #F4F6F9;
  --ink: #0E2A47;
  --ink-2: #3D5773;
  --ink-3: #8A99AB;
  --line: #DCE0E6;
  --line-soft: #EAEDF1;

  --forest: #0E2A47;
  --forest-deep: #0A1F36;
  --leaf: #2F8F3F;
  --tomato: #D63B27;        /* primary CTA: tomato red */
  --tomato-deep: #A82A1B;
  --amber: #E89A3C;
  --cream: #FFFFFF;
}
body.theme-market-twotone .btn-primary { color: #FFFFFF; box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 8px 24px -10px rgba(214,59,39,0.45); }
body.theme-market-twotone ::selection { background: #D63B27; color: #FFFFFF; }
body.theme-market-twotone section.section-pad:nth-of-type(even) {
  background: #F4F6F9;
}

/* Crate — kraft paper, deep forest, ripe orange.
   Heritage / supplier-direct, "from the farm" warmth. */
body.theme-crate {
  --paper: #EFE6D2;
  --paper-2: #E4D9BE;
  --ink: #2A2418;
  --ink-2: #5C4F3A;
  --ink-3: #8E826B;
  --line: #CDBE9C;
  --line-soft: #DCD0B0;

  --forest: #1F3A2A;
  --forest-deep: #15281D;
  --leaf: #3F7A48;
  --tomato: #E36B1F;        /* primary CTA: ripe orange */
  --tomato-deep: #B6541A;
  --amber: #E89A3C;
  --cream: #F5EBD3;
}
body.theme-crate ::selection { background: #E36B1F; color: #F5EBD3; }

/* Cold Chain — clean white, graphite ink, electric leaf green.
   Modern logistics / operations rigour. */
body.theme-cold {
  --paper: #FFFFFF;
  --paper-2: #F4F6F4;
  --ink: #1B1F23;
  --ink-2: #4A5258;
  --ink-3: #98A0A6;
  --line: #E1E5E2;
  --line-soft: #EEF1EE;

  --forest: #1B1F23;
  --forest-deep: #0F1216;
  --leaf: #3FB950;
  --tomato: #2EA043;        /* primary CTA: electric green */
  --tomato-deep: #238636;
  --amber: #E89A3C;
  --cream: #FFFFFF;
}
body.theme-cold ::selection { background: #3FB950; color: #FFFFFF; }

/* Sun-ripened — pale apricot, deep plum, olive accents.
   Premium / boutique grocer feel for high-end retail buyers. */
body.theme-sun {
  --paper: #FBEFE0;
  --paper-2: #F4E4CE;
  --ink: #2E1820;
  --ink-2: #5C3F4A;
  --ink-3: #9A8088;
  --line: #E3D0BB;
  --line-soft: #F0E1CA;

  --forest: #4A1F2E;
  --forest-deep: #321420;
  --leaf: #7A8B3F;
  --tomato: #C84A2D;        /* primary CTA: blood-orange */
  --tomato-deep: #9F3920;
  --amber: #E89A3C;
  --cream: #FBEFE0;
}
body.theme-sun ::selection { background: #C84A2D; color: #FBEFE0; }

/* Market Hall: yellow tomato is unreadable as small accent text — promote
   navy ink for eyebrows + italic display accents, keep yellow for CTAs only. */
body.theme-market .eyebrow,
body.theme-market .h-display em,
body.theme-market .tomato { color: #0E2A47 !important; }
body.theme-market .pill.pill-tomato {
  background: rgba(14,42,71,0.08);
  color: #0E2A47;
  border-color: rgba(14,42,71,0.2);
}

/* Cold Chain: green CTA reads OK as small accent but pill background tone is
   re-keyed to match the new tomato. */
body.theme-cold .pill.pill-tomato {
  background: rgba(46,160,67,0.10);
  color: #1B7F33;
  border-color: rgba(46,160,67,0.25);
}
body.theme-cold .eyebrow,
body.theme-cold .h-display em,
body.theme-cold .tomato { color: #1B7F33 !important; }

/* Type scale */
.h-display {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.h-display em {
  font-family: 'Instrument Serif', var(--serif), serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tomato);
}
.h-display .leaf { color: var(--forest); font-style: italic; }

.h-1 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.h-1 em, .h-2 em {
  font-family: 'Instrument Serif', var(--serif), serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  display: inline-block;
  color: var(--tomato);
  letter-spacing: 0;
}
.h-2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.h-3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  display: flex;
  width: fit-content;
  margin: 0 auto 20px;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}
.eyebrow::before { display: none; }

.lead {
  font-family: var(--sans);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}

.mono {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Hero meta row pills sit on a photo crop — needs to read with more weight */
.hero-meta-pill { color: var(--ink-2); font-weight: 500; }

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

.divider {
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--tomato);
  color: var(--cream);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 8px 24px -10px rgba(214,59,39,0.45);
}
.btn-primary:hover { background: var(--tomato-deep); }

.btn-ink {
  background: var(--ink);
  color: var(--cream);
}
.btn-ink:hover { background: #000; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }

.btn-whatsapp {
  background: #25D366;
  color: #053B1F;
}
.btn-whatsapp:hover { background: #1EBC59; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
}
.pill.pill-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.pill.pill-tomato {
  background: rgba(214,59,39,0.08);
  color: var(--tomato);
  border-color: rgba(214,59,39,0.2);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Route-line status marker: the shared graphics.jsx icons are stroke-only at
   1.4/24, which goes sub-pixel when shrunk. Bump the stroke for this small
   usage so the plane/tick keep their state colour and stay legible. */
.tracker-marker svg path { stroke-width: 2.6; }

/* Tracker status dot — inherits the state colour (tomato / amber / leaf) */
.tracker-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; position: relative; flex-shrink: 0; }
.tracker-dot-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: inherit; opacity: 0.35; animation: ping 2s ease-out infinite;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
  position: relative;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #22C55E;
  opacity: 0.3;
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Hero shipment counters — live counts pulled from Google Sheet */
.hero-counter {
  white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hero-counter:hover {
  border-color: var(--ink-3);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08);
}
.counter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: counterFlicker 2.4s ease-in-out infinite;
}
@keyframes counterFlicker {
  0%, 60%, 100% { opacity: 1; transform: scale(1); }
  20%          { opacity: 0.45; transform: scale(0.85); }
  40%          { opacity: 1;    transform: scale(1.15); }
}
.counter-sep {
  display: none;
}

/* Hide iOS Safari's native start-playback overlay on autoplay videos.
   Without this, when autoplay is blocked the user sees a giant ▶ button on
   top of the hero video. */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-enclosure,
video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none !important;
}

/* Pill label — small rounded section-eyebrow, white bg + dark text, always centered */
.pill-label {
  display: flex; width: fit-content; margin: 0 auto 20px; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0; padding: 8px 18px; border-radius: 999px;
  background: #fff; border: none;
  color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}
.pill-label.dark {
  background: #fff; border: none;
  color: var(--ink);
}
/* Mixed-typography headline: heavy sans base, italic serif accent on em */
.h-mixed { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; }
.h-mixed em { font-family: 'Instrument Serif', var(--serif), serif; font-style: italic; font-weight: 400; color: var(--tomato); letter-spacing: 0; }

/* Site-wide: no uppercase text anywhere — every word displays as typed */
*, *::before, *::after { text-transform: none !important; }

/* Live tracker bar: stack into two clean rows on mobile instead of truncating */
@media (max-width: 640px) {
  .hero-tracker-bar a[href] {
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    padding: 16px 18px !important;
  }
  .hero-tracker-bar a[href] > span:nth-of-type(2) {
    order: 5; flex-basis: 100% !important; min-width: 0 !important;
  }
  .hero-tracker-bar a[href] > span:nth-of-type(2) span {
    overflow: visible !important; text-overflow: unset !important; white-space: normal !important;
  }
  .hero-tracker-bar a[href] > span[data-track-cta] {
    order: 6; margin-left: auto !important;
  }
}

/* Card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Marquee */
.marquee {
  overflow: hidden;
  display: flex;
}
.marquee-track {
  display: flex;
  gap: 56px;
  flex-shrink: 0;
  animation: marquee 40s linear infinite;
  padding-right: 56px;
}
@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* Section padding */
.section-pad {
  padding: clamp(72px, 10vw, 140px) 0;
}
.section-pad-sm {
  padding: clamp(48px, 6vw, 80px) 0;
}

/* Utility */
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.tomato { color: var(--tomato); }
.forest { color: var(--forest); }

.grid-lines {
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}

/* Smooth-scroll */
html { scroll-behavior: smooth; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--tomato);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Inputs */
input, textarea, select {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26,36,24,0.08);
}
label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: 6px;
}

/* Hide the seasonality scroll hint on desktop; show only on mobile */
.season-scroll-hint {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,239,226,0.45);
  text-align: center;
  margin-bottom: 14px;
}

/* Seasonality scroll arrows — desktop hides them; mobile shows. */
.season-scroll-controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.season-nudge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(244,239,226,0.25);
  background: rgba(0,0,0,0.25);
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.season-nudge:hover { background: rgba(0,0,0,0.4); border-color: rgba(244,239,226,0.5); }
.season-nudge:active { transform: scale(0.96); }
.season-scroll-hint-text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,239,226,0.5);
}

/* ─── Hero: side-by-side band ───────────────────────────────────────
   The video panel is inline-styled `right:0; width:56%`, so its left edge
   sits at 44% of the container at EVERY width. The headline column must
   therefore resolve to less than 44% at every width where the layout is
   still two-column — otherwise the headline runs under the panel. One
   rule for the whole range, not a per-viewport patch. */
@media (min-width: 901px) {
  .hero-col-left { max-width: 42% !important; }
  .hero-col-left .h-display { max-width: 100% !important; }
}

/* Narrow desktop additionally needs smaller type: at 901–1120px a 42%
   column is only ~370-470px wide, too tight for the full display size. */
@media (min-width: 901px) and (max-width: 1120px) {
  .hero-col-left .h-display { font-size: clamp(30px, 4.2vw, 44px) !important; }
}

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --gutter: 18px; }
  .section-pad { padding: 64px 0; }
  .section-pad-sm { padding: 48px 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .section-pad { padding: 56px 0; }
  .h-display { font-size: clamp(28px, 8vw, 44px); line-height: 1.08; }
  .h-1 { font-size: clamp(28px, 7vw, 38px) !important; }
  .h-2 { font-size: clamp(22px, 5.6vw, 30px) !important; }
  .lead { font-size: 15px !important; }

  /* Buttons: full-width-friendly, slightly tighter */
  .btn { padding: 12px 18px; font-size: 14px; }

  /* Section header rows: stack instead of squeezing */
  .container .eyebrow { font-size: 11px; }

  /* Hero meta row + buttons: stack cleanly */
  .hero-tagline span { font-size: 18px !important; }

  /* Hero lead + CTA row: center-stack instead of squeezing under photo */
  .hero-lead-row {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: center;
    justify-items: center !important;
    align-items: center !important;
    max-width: 100% !important;
  }
  .hero-lead-row .lead { max-width: 36ch; }
  .hero-lead-row .hero-cta-row { justify-content: center; }

  /* Hero meta row: shipment counters centered on mobile */
  .hero-meta-row { justify-content: center !important; }

  /* Hero shipment counters — center, smaller, full row */
  .hero-meta-row { padding: 8px 0 24px !important; gap: 8px !important; }
  .hero-counter { padding: 6px 12px 6px 10px !important; }
  .hero-counter .mono:nth-of-type(1) { font-size: 13px !important; }
  .hero-counter .mono:nth-of-type(2) { font-size: 10px !important; }

  /* Hero tagline: bigger + centered on mobile, both lines */
  .hero-tagline { text-align: center; align-items: center !important; }
  .hero-tagline span { font-size: 22px !important; line-height: 1.18 !important; }
  .hero-tagline + .hero-lead-row .lead,
  .hero-lead-row .lead { font-size: 17px !important; }

  /* Eyebrow + headline centered when stacked on mobile */
  .hero-col-left, [class~="hero-col-left"] { text-align: center; }
  .hero-col-left .eyebrow { margin-left: auto !important; margin-right: auto !important; }
  .hero-col-left .h-display { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }

  /* Mobile-only: fade the top of the hero photo/video to white so the
     headline reads clearly; the image becomes visible lower down instead. */
  .hero-bg-media {
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 70%, #000 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 70%, #000 100%) !important;
  }

  /* Mobile-only: hero video/photo fills full width (no white side strip) */
  .hero-row, .hero-col-left { /* no-op anchor; rule below targets the bg layer */ }
  .hero-bg-media {
    width: 100% !important;
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 70%, #000 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 70%, #000 100%) !important;
  }

  /* Hero visual card padding */
  .hero-visual-card { padding: 28px 22px !important; min-height: 380px !important; }

  /* About: 3-col story blocks + stats rebalance */
  .about-grid { gap: 24px !important; }
  .about-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

  /* How it works: 5-step row → 2 columns */
  .steps-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Produce photo grid: 6 → 3 columns on mobile */
  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

  /* Catalogue header row: stack search + filters under the title */
  .cat-header { flex-direction: column !important; align-items: stretch !important; }
  .cat-header .cat-controls { align-items: stretch !important; width: 100%; margin-top: 16px !important; }
  .cat-header input[placeholder] { width: 100% !important; }

  /* Product list rows: allow name/meta to wrap, keep tags from crushing */
  .product-grid > div { flex-wrap: wrap; gap: 8px !important; padding: 12px 16px !important; }

  /* Routes map: full-width corridor pills scroll horizontally already */
  .corridor-strip { -webkit-overflow-scrolling: touch; }

  /* Documentation sample grid: 4 → 2 columns */
  .doc-sample-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats row ("By the numbers"): 4 → 2 columns */
  .bignum-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

  /* Shipment tracker: card layout instead of grid columns */
  .ship-row {
    grid-template-columns: 1fr !important;
    padding: 18px 18px !important;
    gap: 10px !important;
  }
  .ship-row > * { grid-column: 1 / -1 !important; }
  .ship-row > a { justify-self: stretch !important; }

  /* Quote form: 2-col contact rows → single column */
  .q-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .q-grid > div:nth-child(2) { padding: 24px 20px !important; }
  .q-grid input, .q-grid textarea { font-size: 16px; } /* prevents iOS zoom on focus */
  .q-grid > div:nth-child(2) > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* FAQ: stack the two-column layout, bigger tap targets */
  .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .faq-grid button { padding: 20px 0 !important; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* Chat FAB: smaller, lower so it doesn't sit on top of CTAs */
  .wa-fab {
    width: 50px !important; height: 50px !important;
    bottom: 16px !important; right: 16px !important;
  }
  .wa-fab-panel {
    right: 16px !important; bottom: 78px !important;
    width: calc(100vw - 32px) !important; max-width: 320px;
  }

  /* Nav: keep brand visible, drop subtitle on tiny widths */
  header .container { gap: 12px !important; }
}

@media (max-width: 480px) {
  .h-display { font-size: clamp(24px, 7.5vw, 34px); }
  .steps-row { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .about-stats { grid-template-columns: 1fr !important; }
  .doc-sample-grid { grid-template-columns: 1fr !important; }
  .bignum-grid { grid-template-columns: 1fr !important; }
  .product-grid > div { flex-wrap: wrap; }
  /* Hero CTAs: stack so they don't get clipped */
  .hero-cta-row { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .hero-cta-row .btn { justify-content: center; }

  /* Keep the "Simply Fresh" tagline under brand on small screens too */
  .brand-tagline { display: block !important; font-size: 8.5px !important; letter-spacing: 0.28em !important; }

  /* Nav buttons: hide WhatsApp ghost button text label, keep icon only */
  header .btn-ghost { padding: 8px 10px !important; }

  /* About stats: 2 col still, smaller numbers */
  .stats-grid > div > div:first-child { font-size: 40px !important; }

  /* Hero card route tracker padding */
  .hero-visual-card { padding: 24px 18px !important; }
  .hero-visual-card .h-3, .hero-visual-card [style*="font-size:32px"] { font-size: 24px !important; }
}