/* === Mobile badge centering === */
@media(max-width:991px){
  .ps-mobile-heading,
  .welcome-section .text-center,
  #advantages .lg\:max-w-2xl,
  #contact .text-center{text-align:center;}
  .ps-mobile-heading .inline-flex,
  #advantages .inline-flex,
  #contact .inline-flex{margin-left:auto;margin-right:auto;}
  #advantages .lg\:max-w-2xl{display:flex;flex-direction:column;align-items:center;}
  .advantage-line{margin-left:auto;margin-right:auto;}
}

/* --- Desktop nav animations (moved from inline <style> blocks) --- */
.nav-link{position:relative;padding-bottom:4px;}
.nav-cta{transition:all .4s cubic-bezier(.22,1,.36,1);}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px -6px rgba(251,191,36,.45);background:#fbbf24!important;}
/* The white topbar is what stays. The navy bar below is left in normal flow,
   so it scrolls up behind the topbar and is gone. Once it has gone, menu.js
   moves the nav links up into .dh-tail and hides the contacts, so the sticky
   bar reads: logo + Home ... Get in touch. */
.desktop-topbar{box-shadow:0 1px 3px rgba(10,35,66,.04);background-color:#fafcff!important;position:sticky;top:0;z-index:60;}
/* Navy bar: normal flow, below the topbar's z-index, so it scrolls up behind
   the sticky topbar and disappears. It is deliberately NOT sticky. */
.desktop-nav{
  box-shadow:0 4px 16px -4px rgba(10,35,66,.2);
  position:relative;
  z-index:40;
}
/* Nav typography lives here, not in utility classes on the markup, so the
   size/case/tracking of the bar is set in one place. Title Case rather
   than uppercase: at 800 weight the caps needed +0.03em tracking to stay
   readable, which is what made the bar feel cramped. */
.desktop-nav a:not(.nav-cta),.desktop-nav button{
  color:#fff;
  font-weight:800;
  font-size:1.1875rem;
  letter-spacing:.004em;
  text-transform:none;
}
/* Wider rhythm than the markup's gap-8. Set here because the purged
   Tailwind build carries no gap-10 or gap-12 to switch to.
   Held back below 900px: the bar already wraps to two rows at 768-820px
   (it did before this change too), and the wider gap made that row 11px
   taller. Above 900px there is room for the full rhythm. */
#desktopNavList{gap:2.6rem;}
@media (max-width:899px){#desktopNavList{gap:2rem;}}
/* 1.125rem, deliberately a step under the 1.1875rem nav links. Kept by
   request: the CTA is a button, and the smaller type inside the amber
   pill is what separates it from the links beside it. */
.desktop-nav .nav-cta{color:#0a2342;font-weight:800;font-size:1.125rem;}

/* ---- Products panel (slides down below header, overlays hero) ---- */
.nmg-panel{
  display:none;
  /* Fixed, not absolute: the trigger moves between the navy bar and the sticky
     topbar, so the panel can no longer hang off one ancestor's bottom edge.
     menu.js sets --nmg-top to the bottom of whichever bar the trigger is in. */
  position:fixed;
  top:var(--nmg-top,148px);
  left:0;
  right:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  transform:translateY(-14px);
  /* visibility is stepped, not eased: 0s duration with a 0.38s delay here so it
     flips to hidden only after the fade-out finishes, and 0s/no delay in
     .is-open below so it flips to visible the moment the class lands.
     It used to read "visibility 0.38s", which looks equivalent (the panel still
     stayed visible for the whole fade) but deferred the flip to visible until
     the transition actually started on the NEXT frame. menu.js focuses the
     panel's first link right after opening it on Enter, and .focus() on a
     still-visibility:hidden element is a silent no-op, so keyboard focus never
     entered the panel. Stepping it makes the element focusable synchronously. */
  transition:opacity 0.32s ease,transform 0.38s cubic-bezier(0.22,1,0.36,1),visibility 0s 0.38s;
  z-index:50;
  pointer-events:none;
}
@media(min-width:768px){
  .nmg-panel{display:block;}
}
.nmg-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
  /* No delay on the way in - see the base rule above. */
  transition:opacity 0.32s ease,transform 0.38s cubic-bezier(0.22,1,0.36,1),visibility 0s;
}
.nmg-panel-inner{
  width:100%;
  background:#fafcff;
  /* No bottom padding: .nmg-viewall is the last child and carries its own
     symmetric spacing; any padding here stacks under it unevenly. */
  padding:2.75rem clamp(2.5rem,7vw,7rem) 0;
  box-shadow:0 30px 50px -24px rgba(0,0,0,0.5);
}
/* Product grid */
.nmg-items{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem clamp(1.25rem,3.5vw,3rem);}
.nmg-item{
  display:flex;flex-direction:column;align-items:center;text-decoration:none;min-width:0;
  opacity:0;transform:translateY(18px);
  transition:opacity 0.4s ease,transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.nmg-panel.is-open .nmg-item{opacity:1;transform:translateY(0);}
.nmg-panel.is-open .nmg-item:nth-child(1){transition-delay:0.04s;}
.nmg-panel.is-open .nmg-item:nth-child(2){transition-delay:0.08s;}
.nmg-panel.is-open .nmg-item:nth-child(3){transition-delay:0.12s;}
.nmg-panel.is-open .nmg-item:nth-child(4){transition-delay:0.16s;}
.nmg-panel.is-open .nmg-item:nth-child(5){transition-delay:0.20s;}
.nmg-panel.is-open .nmg-item:nth-child(6){transition-delay:0.24s;}
.nmg-img-wrap{
  position:relative;width:100%;max-width:160px;aspect-ratio:1/1;border-radius:22px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(10,35,66,0.06);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s ease,border-color 0.3s ease;
}
.nmg-img-wrap img{width:100%;height:100%;object-fit:cover;border-radius:16px;padding:0;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);}
.nmg-item:hover .nmg-img-wrap{
  transform:translateY(-8px);
  box-shadow:0 20px 40px -14px rgba(237,137,54,0.35),0 0 0 1px rgba(237,137,54,0.2);
  border-color:rgba(237,137,54,0.4);
}
.nmg-item:hover .nmg-img-wrap img{transform:scale(1.06);}
.nmg-item:focus-visible .nmg-img-wrap{box-shadow:0 0 0 3px #ED8936;border-color:#ED8936;}
.nmg-label{
  margin-top:1rem;
  font-size:0.9rem;font-weight:600;color:#0a2342;text-align:center;letter-spacing:0.02em;
  transition:color 0.25s ease;
}
.nmg-item:hover .nmg-label{color:#01467e;}
/* View All link */
.nmg-viewall{
  display:flex;align-items:center;justify-content:center;gap:0.6rem;
  /* Symmetric 1.25rem above and below the text. The panel's own bottom
     padding is zeroed below so it cannot stack under this and skew it -
     it was 13px above the text vs 36px below (12px/4px link padding with
     the panel's 2rem underneath). */
  margin-top:1.5rem;padding-top:1.25rem;padding-bottom:1.25rem;
  border-top:1px solid rgba(10,35,66,0.08);
  font-size:1.1rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  /* Was rgba(10,35,66,0.4) - navy at 40% over the panel's #fafcff renders as
     rgb(154,165,179), only 2.43:1 against it. At 17.6px it is normal-size text
     under WCAG (bold has to reach 18.66px to count as large), so it needed
     4.5:1 and was effectively invisible. #01467e gives 9.38:1 and is the same
     blue .nmg-label already hovers to, so the panel keeps one palette. */
  color:#01467e;text-decoration:none;
  transition:color 0.3s ease;
}
.nmg-viewall span{transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);}
/* #ED8936 was 2.48:1 here - a hover state has to meet contrast too. Darkening
   to the brand navy gives 15.34:1 and mirrors .nmg-label's navy/blue pair. */
.nmg-viewall:hover{color:#0a2342;}
.nmg-viewall:hover span{transform:translateX(5px);}
@media(max-width:1024px){
  .nmg-items{grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem;}
}
@media(prefers-reduced-motion:reduce){
  .nmg-item{opacity:1;transform:none;transition:none;}
  .nmg-img-wrap,.nmg-img-wrap img,.nmg-viewall span{transition:none;}
}

/* Clean header contact - phone & email text only */
.header-contact-plain{
  font-size:1.2rem;
  font-weight:700;
  color:#01467e;
  text-decoration:none;
  letter-spacing:0.01em;
  white-space:nowrap;
  transition:opacity 0.15s;
}
.header-contact-email{font-size:1.25rem;}
.header-contact-plain:hover{opacity:0.75;}
.header-contact-plain + .header-contact-plain{
  margin-left:2rem;
}

/* Agricultural Commodities Hero Banner */

/* Global Responsive & Accessibility Styles (shared) */
/* Hide form labels on mobile only - visually hidden, NOT display:none, so
   fields (especially the country <select>, which has no placeholder fallback)
   keep their accessible name for screen readers (WCAG 4.1.2) */
.hidden-mobile-label { display: block; }
@media (max-width: 640px) {
  .hidden-mobile-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
/* =========================================
   PREMIUM TYPOGRAPHY SYSTEM - Inter
   Global Corporate Standard
   ========================================= */
:root{
  /* ── Sticky header height ──
     .desktop-topbar is position:sticky;top:0 at z-index:60, so anything else
     that pins itself to the viewport must clear it or it pins UNDERNEATH the
     header and is painted over. Declared once here so there is a single number
     to change if the topbar's height ever does. It stays 4.75rem in both header
     states - menu.js relocates the nav links into the topbar once the navy bar
     scrolls away, and that swap does not change its height. */
  --desktop-topbar-h: 4.75rem;

  /* ── Font stack ──
     Body text: Inter  |  Headlines: Roboto
     (--font-serif retained as the heading-font variable name for back-compat) */
  --font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: 'Roboto', 'Roboto Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ── Font weights ── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  /* ── Letter spacing (refined for optical balance) ── */
  --ls-tighter: -0.035em;
  --ls-tight:   -0.025em;
  --ls-snug:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.015em;
  --ls-wider:    0.03em;
  --ls-widest:   0.05em;

  /* ── Line heights (premium breathing room) ── */
  --lh-heading:  1.12;
  --lh-subhead:  1.25;
  --lh-body:     1.7;
  --lh-caption:  1.5;

  /* ── Type scale (fluid clamp - stronger hierarchy) ── */
  --fs-h1: clamp(2.125rem, 4.5vw + 0.75rem, 3.5rem);
  --fs-h2: clamp(1.625rem, 2.6vw + 0.5rem, 2.625rem);
  --fs-h3: clamp(1.3125rem, 1.5vw + 0.55rem, 1.875rem);
  --fs-h4: clamp(1.125rem, 1vw + 0.5rem, 1.4375rem);
  --fs-h5: clamp(1rem, 0.6vw + 0.5rem, 1.1875rem);
  --fs-h6: clamp(0.875rem, 0.4vw + 0.5rem, 1rem);
  --fs-body: 1rem;

  /* ── Component tokens ── */
  --fs-btn: 0.9375rem;       /* 15px - larger tap targets */
  --fs-nav: 0.9375rem;       /* 15px */
  --fs-input: 1rem;          /* 16px - prevents iOS zoom */
  --fs-copyright: 0.8125rem; /* 13px */
}

/* 1. Reset & base */
*,*::before,*::after{box-sizing:border-box;}
html{font-family:var(--font-sans);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem;font-optical-sizing:auto;}
body{margin:0;min-height:100dvh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#0a2342;background:#fafcff;letter-spacing:var(--ls-normal);line-height:var(--lh-body);font-size:var(--fs-body);font-weight:var(--fw-regular);font-feature-settings:"cv01","cv02","cv03","cv04";font-optical-sizing:auto;} 
body.menu-open{overflow:hidden;touch-action:none;}
img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block;}
img{font-style:italic;background-repeat:no-repeat;background-size:cover;}
/* Image protection (deterrent): reduce drag/copy/long-press behaviors */
img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.hero-video-wrapper{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(1.10) contrast(1.1) saturate(1.34) hue-rotate(2deg);transition:none!important;}
/* Keep video vivid while retaining readable text; slightly lighter overall */
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,35,66,.38),rgba(10,35,66,.18) 50%,rgba(255,255,255,.12));mix-blend-mode:multiply;}
@media (max-width:767px){
  /* On small screens allow slightly more vibrance since text is large & shadowed */
  .hero-bg-video{filter:brightness(1.12) contrast(1.12) saturate(1.42) hue-rotate(3deg);} 
  .hero-video-overlay{background:linear-gradient(180deg,rgba(10,35,66,.32),rgba(10,35,66,.14) 48%,rgba(255,255,255,.10));}
}
@media (min-width:1280px){
  /* Large screens: dial back slightly to avoid washout */
  .hero-bg-video{filter:brightness(1.08) contrast(1.08) saturate(1.30) hue-rotate(2deg);} 
}
@media (prefers-color-scheme: dark){
  /* In dark mode slightly boost brightness less to avoid glare */
  .hero-bg-video{filter:brightness(1.02) contrast(1.08) saturate(1.32) hue-rotate(2deg);} 
  .hero-video-overlay{background:linear-gradient(180deg,rgba(10,35,66,.44),rgba(10,35,66,.22) 52%,rgba(255,255,255,.08));}
}
@media (prefers-reduced-motion: reduce){
  /* Preserve brightness adjustments even when motion reduced */
  .hero-bg-video{animation:none!important;filter:brightness(1.10) contrast(1.08) saturate(1.38) hue-rotate(2deg)!important;}
}
/* Remove solid/gradient background so video is visible */
/* 68.5dvh, desktop only. This base rule needs no min-width guard to be
   desktop-only in practice: every narrower context already overrides it -
   <=767px takes 70dvh below, and short landscape phones take 100dvh - so the
   only viewports that read this value are >=768px.
   All three of height/min-height/max-height move together, which is what pins
   the band so it cannot grow or shrink with its contents. */
.hero-with-video{background:transparent!important;height:68.5dvh;min-height:68.5dvh;max-height:68.5dvh;display:flex;align-items:center;margin-bottom:0;padding-bottom:0;}
/* Ensure hero video reaches very top under transparent mobile header */
@media (max-width:767px){
  /* 73.5dvh on phones, against 68.5dvh everywhere else. All three of height /
     min-height / max-height have to be restated: the base rule pins the same
     value to each, so overriding height alone would still be clamped back by
     max-height. Portrait phones only - 768px and up keeps 68.5dvh, and short
     landscape phones keep the 100dvh !important rule further down (search
     "max-height:480px) and (orientation:landscape"), which stays authoritative
     because a landscape phone has almost no vertical room to give away. */
  .hero-with-video{padding-top:0;height:73.5dvh;min-height:73.5dvh;max-height:73.5dvh;}
  body.index #hero{margin-top:0;}
}
/* Custom hero text sizing (premium corporate) */

 

/* --- HERO MOBILE ENHANCEMENTS --- */
@media (max-width: 767px) {
  
  
  
  .hero-video-overlay {
    background: linear-gradient(180deg,rgba(10,35,66,0.48),rgba(10,35,66,0.28) 60%,rgba(255,255,255,0.10)) !important;
  }
}
/* Center hero content tighter (remove excess top spacing) */
/* Balanced vertical spacing: slight shift upward without crowding header */
.hero-with-video{margin-top:0;}
/* Base (mobile first) hero positioning (reduced gap under tall mobile header)
   Applies at every width/height; the only intentional overrides are the
   !important landscape rules in section 19. */
/* If header height increases, adjust calc below by changing 5rem -> actual header total height */
/* Removed desktop height subtraction to avoid initial scroll jump hiding part of logo */
/* If you still want a subtle overlay tint, adjust .hero-video-overlay above */
 

/* Back To Top Button */
/* Horizontally centered, above the bottom edge. Only visible while the footer
   is on screen (toggled by assets/js/back-to-top.js). */
#backToTop{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(.9rem,1.1vw + .6rem,1.55rem));transform:translate(-50%,14px) scale(.8);width:clamp(42px,6.4vw,52px);height:clamp(42px,6.4vw,52px);display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(255,255,255,0.2);color:#0a2342;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .45s ease,transform .55s cubic-bezier(.19,1,.22,1),background .3s,color .3s,box-shadow .35s;z-index:90;outline:none;padding:0;margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}/* 20% base */
#backToTop::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 2px 4px -2px rgba(0,0,0,.22),0 4px 10px -4px rgba(0,0,0,.18);opacity:.35;transition:opacity .4s;}/* subtle ring */
#backToTop:hover{background:rgba(255,255,255,0.95);} 
#backToTop:focus-visible{background:rgba(255,255,255,0.95);box-shadow:0 0 0 3px rgba(14,165,233,.55),0 6px 18px -6px rgba(0,0,0,.3);} 
#backToTop:hover::before,#backToTop:focus-visible::before{opacity:.6;}
#backToTop:active{transform:translate(-50%,16px) scale(.78);}/* pressed */
#backToTop.visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(.94);}
#backToTop svg{pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));opacity:.9;transition:transform .45s cubic-bezier(.19,1,.22,1);} 
#backToTop:hover svg,#backToTop:focus-visible svg{transform:translateY(-2px);} 
@media (prefers-reduced-motion:reduce){#backToTop{transition:none;}}
@media (max-width:640px){#backToTop{width:56px;height:56px;}}
@media (max-width:480px){#backToTop{width:54px;height:54px;}}
@media (max-width:380px){#backToTop{width:52px;height:52px;}}
@media (max-width:340px){#backToTop{width:50px;height:50px;}}
@media (max-height:520px){#backToTop{bottom:clamp(.55rem,2vh,.9rem);}}
/* High contrast mode improvement */
@media (forced-colors:active){#backToTop{background:ButtonFace;border:1px solid ButtonText;}}

/* Home page: white logo on transparent mobile header (overlays dark hero video) */
body.index #mobileHeader .site-logo{filter:brightness(0) invert(1) !important;}

/* Responsive brand logo (refined sizing) */
/* Strategy: Keep logo comfortably visible on very small phones, scale modestly through tablets, cap ~64px on large desktops. Phones take the 60-80px override below - this base clamp only applies outside a header. */
.site-logo{display:block;width:auto;max-width:100%;height:auto;aspect-ratio:1080/323;object-fit:contain;max-height:clamp(48px,14vw,88px);}
/* Desktop header: logo at 64px; row overridden to 76px so items-center gives 6px breathing room each side */
header .site-logo{max-height:64px;}
/* Ensure logo wrapper and its anchor both participate as flex containers so the img centers correctly */
.header-logo,.header-logo a{display:flex;align-items:center;}
.desktop-topbar .site-logo{height:64px;max-height:64px;}
.desktop-topbar > div{height:4.75rem;}
/* Same 6px each side below 768px, but it cannot come from a fixed row height
   the way it does above. The mobile logo is fluid - clamp(60px,16vw,80px) - so
   any single height leaves a different gap at every width, which is what the
   markup's h-24 did: 21px of air at 360px, 11px at 493px and up. Dropping that
   height and letting the padding set it instead makes the gap the constant and
   the bar the variable. py-2 goes with it, or it would stack on top of the 6px.
   Measured against the logo because the logo is always the tallest thing in the
   row - its 60px floor clears the 48px icon group at every width.
   Both headers: standard pages use .mobile-topbar, the home page its own
   transparent #mobileHeader over the hero video. Same row markup in each.
   :first-child, not > div. The mobile header is also the parent of the drawer
   and its backdrop, and #mobileOverlay is a plain div - so a bare > div reaches
   it too and the height:auto here cancels the inset-0 that stretches it over
   the viewport, leaving the open drawer with no scrim. The row is the first
   element child in all three sources (the partial, index.html and
   thank-you.html, the last two hand-written). .desktop-topbar needs no such
   guard: the row is its only child. */
@media (max-width:767px){
  .mobile-topbar > div:first-child,
  #mobileHeader > div:first-child{height:auto;padding-top:6px;padding-bottom:6px;}
}

/* 3. Typographic scale - Inter unified hierarchy (premium corporate) */
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);letter-spacing:var(--ls-tight);text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:1.08;font-weight:var(--fw-bold);letter-spacing:var(--ls-tighter);}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);}
h3{font-size:var(--fs-h3);line-height:var(--lh-subhead);font-weight:var(--fw-semi);letter-spacing:var(--ls-snug);}
h4{font-size:var(--fs-h4);line-height:var(--lh-subhead);font-weight:var(--fw-semi);letter-spacing:var(--ls-snug);}
h5{font-size:var(--fs-h5);line-height:var(--lh-subhead);font-weight:var(--fw-medium);letter-spacing:var(--ls-normal);}
h6{font-size:var(--fs-h6);line-height:var(--lh-caption);font-weight:var(--fw-medium);letter-spacing:var(--ls-wide);text-transform:uppercase;}
p,li{font-family:var(--font-sans);line-height:var(--lh-body);font-weight:var(--fw-regular);}
p{margin-block:0 1em;}
/* ── Body text: one solid brand-navy across every page ──
   This file is unlayered, so it overrides Tailwind's @layer text-* utilities
   (text-black, text-slate-600/700, text-gray-700, etc.) on body paragraphs.
   Excludes white text on dark backgrounds and intentional orange/amber accents. */
p:not([class*="text-white"]):not([class*="text-[#ED"]):not([class*="text-[#fbbf24"]){color:#0a2342;}
span,a,label,input,select,textarea,button{font-family:var(--font-sans);}
/* NOTE: no desktop (>=1024px) heading lock - desktop uses the fluid clamp()
   type scale from :root. A previous px-based desktop block was never applied
   (parse error made browsers drop it) and activating it would shrink the
   approved desktop heading sizes, so it was removed. */

/* Nav links once menu.js has moved them into the sticky topbar: navy text on
   the white bar rather than white on navy, and tightened to sit beside the
   logo without wrapping. */
.dh-tail{min-width:0;}
.desktop-topbar .dh-tail #desktopNavList{padding:0;gap:1.75rem;flex-wrap:nowrap;}
/* Uppercase in the scrolled bar only. menu.js MOVES these same elements out
   of .desktop-nav and into .dh-tail, so the title-case rule on
   .desktop-nav no longer matches them here and this does not fight it -
   the navy ribbon stays title case, this bar reads as it did before. */
.desktop-topbar .dh-tail #desktopNavList a:not(.nav-cta){
  color:#0a2342;
  font-size:1rem;
  text-transform:uppercase;
}
.desktop-topbar .dh-tail #desktopNavList a:not(.nav-cta):hover{color:#01467e;}
.desktop-topbar .dh-tail #desktopNavList svg{stroke:#0a2342;}
/* .95rem against the links' 1rem - the same deliberate step down the navy
   ribbon makes, held so the CTA reads as a button in both bars. */
.desktop-topbar .dh-tail #desktopNavList .nav-cta{padding:.4rem 1.1rem;font-size:.95rem;}

/* Certification cards.
   Base look only - all eight cards repeated this identical block inline, and
   an inline box-shadow/border cannot be overridden by a stylesheet :hover, so
   the hover below could never have applied while it stayed inline. The cards
   pair this with the site's existing .card class, which is purely the shared
   hover (lift + shadow), so there is no second copy of that behaviour here. */
.cert-card{
  background:#fff;
  border:1px solid #e8ecf1;
  border-radius:1rem;
  box-shadow:0 1px 4px rgba(10,35,66,0.06);
  overflow:hidden;
}
/* .card:hover (0,2,0) outranks .cert-card (0,1,0), so the shared hover shadow
   wins over the base one regardless of source order. Only the border tint is
   specific to these cards. */
@media (min-width:640px){
  .cert-card{transition:border-color .25s ease;}
  .cert-card:hover{border-color:#d7e1ec;}
}
@media (prefers-reduced-motion:reduce){
  .cert-card{transition:none;}
}
/* Logo panel, 4:3 to match the badge sources.
   aspect-ratio IS needed here, despite the images carrying real width/height.
   The old comment claimed height:auto off the intrinsic ratio was enough; it
   is not, because each badge is wrapped in <picture> for its WebP source. The
   <picture> is the flex item, its width is shrink-to-fit, and `img{width:100%}`
   resolves against it - so before the image has intrinsic dimensions the whole
   chain collapses and the panel is 0px tall. Measured: at 67ms, with all three
   stylesheets already applied, the panel was 0px; it jumped to 279px at 113ms
   when the image finished loading, dropping the card body 279px down the page.
   That single shift was the whole of certifications.html's 0.3526 mobile CLS
   (POOR) and most of its 0.1138 on desktop.
   Declaring the ratio on the panel reserves the box at first layout, so
   nothing moves when the badge arrives. It is the same 4:3 the sources are
   authored at, so the rendered result is identical once loaded. */
.cert-card__media{
  background:#f8f9fb;
  overflow:hidden;
  aspect-ratio:4/3;
}
.cert-card__media img{
  width:100%;
  height:auto;
  display:block;
}
/* Certification card titles.
   These carry .text-lg in the markup (1.125rem), but styles.css is unlayered,
   so the bare h2 rule above beats Tailwind's @layer utility no matter what
   class is on the element - the titles rendered at 41px on desktop from
   --fs-h2's clamp, not 18px. Swapping the utility class has no effect; this
   needs an unlayered rule with more specificity than `h2`. .cert-card h2
   (0,1,1) also outranks the bare h2 inside the tablet/mobile typography
   blocks below, so one rule holds at every breakpoint. */
.cert-card h2{
  font-size:1.125rem;
  line-height:1.3;
  letter-spacing:-0.01em;
  color:#0a2342;
}

/* Tablet typography (641px-1023px) - premium corporate */
@media (min-width:641px) and (max-width:1023px){
  h1{font-size:36px;line-height:1.1;letter-spacing:-0.025em;}
  h2{font-size:28px;line-height:1.16;letter-spacing:-0.02em;}
  h3{font-size:22px;line-height:1.24;letter-spacing:-0.015em;}
  h4{font-size:18px;line-height:1.28;letter-spacing:-0.01em;}
  h5{font-size:16px;line-height:1.34;letter-spacing:0;}
  h6{font-size:13px;line-height:1.4;letter-spacing:0.04em;}
  small,
  p,li{line-height:1.7;}
}

/* Mobile typography (<=640px) - premium corporate */
@media (max-width:640px){
  body{font-size:16px;line-height:1.7;}
  h1{font-size:28px;line-height:1.12;letter-spacing:-0.025em;}
  h2{font-size:24px;line-height:1.18;letter-spacing:-0.02em;}
  h3{font-size:20px;line-height:1.24;letter-spacing:-0.015em;}
  h4{font-size:17px;line-height:1.28;letter-spacing:-0.01em;}
  h5{font-size:15px;line-height:1.34;letter-spacing:0;}
  h6{font-size:12.5px;line-height:1.4;letter-spacing:var(--ls-widest);}
  small,
  p,li{line-height:1.7;}
  header nav a,
  #mobileNav a,
  nav a,
  button{
    font-size:15px;
    text-transform:uppercase;
    font-weight:var(--fw-semi);
  }
}

/* Menu / buttons: 15px uppercase across pages (premium) */
header nav a,
#mobileNav a,
nav a,
button{
  font-family:var(--font-sans);
  font-size:var(--fs-nav);
  text-transform:uppercase;
  letter-spacing:var(--ls-wider);
  font-weight:var(--fw-semi);
}

/* 4. Forms */
form{width:100%;max-width:100%;}
.input,form input,form textarea,form select{width:100%;min-width:0;box-sizing:border-box;font:inherit;border:1px solid #e5e7eb;border-radius:0.85rem;padding:0.75rem 1rem;background:#fff;color:#0a2342;transition:border-color .18s,box-shadow .18s;}
.input:focus,form input:focus,form textarea:focus,form select:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px #bae6fd;}
/* Dial-code prefix sitting inside the phone field. The code is deliberately
   NOT part of the input value (see assets/js/contact-form.js for why), so it
   is drawn here instead and has to line up with the field's own left padding:
   1rem normally, 0.75rem below 640px where .input tightens. contact-form.js
   measures this element and pads the input to clear it, so the caret never
   lands on top of the code. pointer-events:none keeps a tap on the code
   falling through to the input behind it. */
.cf-dial{position:absolute;left:1rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#0a2342;font-size:var(--fs-input,15px);line-height:1;white-space:nowrap;}
.cf-dial:empty{display:none;}
@media (max-width:640px){.cf-dial{left:.75rem;}}
/* #contactForm runs the dark underline treatment further down this file, which
   forces padding-left:0.25rem!important on its inputs. The prefix has to start
   where that field's text starts, or the code floats away from the number it
   belongs to. Same 0.25rem at every width here, because that !important rule
   has no mobile variant. */
body.index #contactForm .cf-dial,
body.contact-page #contactForm .cf-dial{left:.25rem;color:#e5e7eb;}
textarea{resize:vertical;}

/* 5. Interactive */
a{text-decoration:none;color:#0a2342;}a:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;border-radius:0.5rem;}
button{cursor:pointer;border:none;font:inherit;background:none;}
button:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;border-radius:0.75rem;}/* Focus rings in the mobile header and drawer are keyboard-only.
   :focus-visible never fires for mouse or touch, so pointer users see nothing;
   removing the ring outright instead would leave keyboard users with no idea
   where they are (WCAG 2.4.7 Focus Visible, AA). The navy ring that used to
   appear on the drawer logo came from menu.js programmatically focusing the
   first link on open - it now focuses the drawer itself, whose own ring is
   suppressed just below. */
#menuBtn:focus:not(:focus-visible),
#closeMenuBtn:focus:not(:focus-visible){outline:none;}
#mobileHeader a:focus:not(:focus-visible){outline:none;}
#mobileNav a:focus:not(:focus-visible),
#mobileNav button:focus:not(:focus-visible){outline:none;}
/* The drawer is the programmatic focus target on open (tabindex=-1, set in
   menu.js). It is a container, not a control - never ring it. */
#mobileNav:focus,
#mobileNav:focus-visible{outline:none!important;}

/* Consistent header contact font size (premium) */
.header-contact{font-size:var(--fs-body);font-weight:var(--fw-medium);letter-spacing:var(--ls-normal);}

/* Footer copyright text (premium) */
footer p.tracking-wide,
footer .text-xs.tracking-wide{font-size:var(--fs-copyright);letter-spacing:var(--ls-wider);line-height:var(--lh-caption);}

/* 7. Media queries tweaks */

/* 8. Utility helpers */

/* 11. Accessibility improvements */
:focus-visible{scroll-margin:6rem;}
/* Skip-to-content link: off-screen until keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#0a2342;color:#fff;padding:0.6rem 1.1rem;border-radius:0 0 0.5rem 0;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;}

/* 12. Print */
@media print{body{background:#fff;}a{color:#000;text-decoration:underline;}}

/* 13. Floating WhatsApp button */
.float{position:fixed;inset:auto 1.75rem 1.75rem auto;width:60px;height:60px;background:#25d366;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:30px;box-shadow:2px 2px 6px rgba(0,0,0,.3);z-index:100;transition:transform .25s,box-shadow .25s,background .25s;}
.float{inset:auto 1.75rem calc(1.75rem + env(safe-area-inset-bottom)) auto;}/* Respect iOS safe-area */
.float:hover{background:#1ebe5a;transform:translateY(-3px);box-shadow:4px 6px 14px rgba(0,0,0,.25);} 
.float:focus-visible{outline:3px solid #0ea5e9;outline-offset:3px;}
.my-float{line-height:1;margin-top:0;}
@media (max-width:640px){.float{width:54px;height:54px;font-size:26px;inset:auto 1rem calc(1rem + env(safe-area-inset-bottom)) auto;}}
@media (prefers-reduced-motion:reduce){.float{transition:none!important;}}

/* 14. Ultra-small viewport refinements (<360px) */
@media (max-width:359px){
  header .site-logo{max-height:52px;}
  h1{font-size:clamp(1.75rem,8vw,2.35rem);} 
}
#mobileNav{will-change:transform;}
#mobileNav .rotate-180{transform:rotate(180deg);} 

/* 19. Orientation & very short viewport refinements */

/* 23a. Global text flow - balanced, premium wrapping */
html, body, p, li, span, div{
  word-break:normal;
  overflow-wrap:break-word;
  white-space:normal;
  text-wrap:pretty;           /* modern browsers: balance line lengths */
}
h1, h2, h3, h4, h5, h6{text-wrap:balance;}

/* Smart justify: only on wide containers (>=42ch equivalent).
   Uses auto-hyphenation + text-align-last:left to prevent
   rivers of white space and short last-line stretching.       */
/* 24. Brand / marketplace scrolling strip (about-us accreditations marquee;
   the animated sequence lives inside .accreditations-strip-scroll) */
.brand-strip-track{width:100%;position:relative;overflow:hidden;}
.brand-strip-sequence{flex:0 0 auto;animation:brandScroll 28s linear infinite;}
.accreditations-strip-scroll:hover .brand-strip-sequence,.accreditations-strip-scroll:focus-within .brand-strip-sequence{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.brand-strip-sequence{animation:none;}}
@keyframes brandScroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
.brand-logo{filter:grayscale(8%) contrast(104%) saturate(108%);opacity:.95;transition:filter .35s,opacity .35s,transform .35s;will-change:filter,opacity;}
.brand-logo:hover,.brand-logo:focus-visible{filter:none;opacity:1;transform:scale(1.04);}

@media (max-width:640px){
  .brand-strip-sequence{animation-duration:20s;}
}

/* Mobile: limit Accreditations strip to ~2 inches tall */
@media (max-width:640px){
  #marketplaces .accreditations-strip{height:2in;padding:0!important;align-items:stretch;}
  #marketplaces .accreditations-strip-scroll{height:100%;}
  #marketplaces .brand-strip-track{height:100%;align-items:stretch;}
  #marketplaces .brand-strip-sequence{height:100%;align-items:stretch;padding-top:0!important;padding-bottom:0!important;gap:2rem!important;}

  /* Standardize tile size so all logos look uniform */
  #marketplaces .brand-logo-box{
    width:120px;
    height:100%;
    padding:0 .75rem;
    box-sizing:border-box;
    flex:0 0 auto;
    overflow:visible;
  }
  #marketplaces .brand-logo,
  #marketplaces .brand-logo-box img{
    max-width:100%!important;
    max-height:100%!important;
    width:auto;
    height:100%;
    object-fit:contain;
  }
}
/* Ensure seamless loop: duplicate sequences inline in markup */
/* Additional layout for static-left logo variant */
.brand-strip-track{gap:0;}
.brand-strip-track>.brand-strip-sequence{padding-top:.5rem;padding-bottom:.5rem;}

/* Slightly slower when static logo present */
section#marketplaces .brand-strip-sequence{animation-duration:20s;}

/* Uniform accreditation logo sizing (responsive square/rect box) */
.brand-logo-box img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
.brand-logo-box{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0.85rem;padding:.25rem;}
@media (min-width:1024px){
  .brand-logo-box{width:clamp(110px,11vw,170px);height:clamp(80px,9vw,138px);} 
}
/* Optional subtle equal-height baseline alignment helper */
.brand-logo-box:before{content:"";position:absolute;inset:0;border-radius:0.85rem;background:linear-gradient(145deg,#ffffff,#f1f5f9);box-shadow:0 2px 4px -2px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);opacity:0;transition:opacity .35s;}
.brand-logo-box:hover:before,.brand-logo-box:focus-within:before{opacity:1;}
.brand-logo-box img{position:relative;z-index:1;}

/* --- Responsive Enhancement Injected (Nov 2025) --- */
/* Mobile navigation drawer adaptive width (overrides Tailwind w-64) */
#mobileNav{width:clamp(14rem,75vw,20rem);}
/* Contact form button touch comfort */
#contactForm button{min-height:48px;}
@media (max-width:380px){#contactForm button{font-size:var(--fs-btn);}}
/* --- Responsive Baseline (global) --- */
body.index form,
body.contact-page form{width:100%;max-width:100vw;box-sizing:border-box;}
body.index .input,
body.contact-page .input{width:100%;min-width:0;box-sizing:border-box;font-size:var(--fs-input);padding:.75rem 1rem;border-radius:.75rem;border:1px solid #e5e7eb;margin-bottom:.5rem;background:#fff;color:#0a2342;transition:border-color .2s;}
body.index #contactForm .input,
body.contact-page #contactForm .input{margin-bottom:0;line-height:var(--lh-caption);transition:none;}
body.index #contactForm .assist-row,
body.contact-page #contactForm .assist-row{margin-top:.1rem;min-height:.3rem;}
body.index #contactForm .field-row,
body.contact-page #contactForm .field-row{min-height:2.75rem;}
body.index #contactForm .status-row,
body.contact-page #contactForm .status-row{min-height:1rem;}
/* These two rules keep an untouched enquiry form calm: no hover chrome, and no
   browser :invalid styling on required fields the visitor has not filled in
   yet. Both used to swallow :focus as well, and both outrank the yellow focus
   rule further down (specificity 320 and 150 vs 130), so a focused field
   computed byte-for-byte identical to its unfocused neighbour - no outline, no
   box-shadow, same underline. Every required field is :invalid while empty,
   which is exactly the state a keyboard visitor tabs into, so the indicator
   was suppressed precisely when it was needed (WCAG 2.4.7 Focus Visible).
   Scope them to the unfocused state and let the focus rule land. */
body.index #contactForm .input:hover:not(:focus):not(.border-red-300):not([aria-invalid="true"]),
body.contact-page #contactForm .input:hover:not(:focus):not(.border-red-300):not([aria-invalid="true"]){border-color:#e5e7eb!important;box-shadow:none!important;outline:none!important;}
body.index #contactForm input:not(#cf-email):not(#cf-phone):invalid:not(:focus),
body.index #contactForm textarea:invalid:not(:focus),
body.index #contactForm select:invalid:not(:focus),
body.contact-page #contactForm input:not(#cf-email):not(#cf-phone):invalid:not(:focus),
body.contact-page #contactForm textarea:invalid:not(:focus),
body.contact-page #contactForm select:invalid:not(:focus){outline:none!important;box-shadow:none!important;border-color:inherit!important;}
@media (max-width:640px){body.index form,body.contact-page form{padding:.5rem!important;}body.index .input,body.contact-page .input{font-size:var(--fs-input);padding:.75rem .75rem;}body.index #contactForm,body.contact-page #contactForm{background:#fff!important;box-shadow:0 2px 16px 0 rgba(0,0,0,.08);border-radius:1rem;padding:1.25rem!important;margin:0 auto;width:100%!important;max-width:100vw!important;}}
body.index section{padding:0;margin-top:0;margin-bottom:0;}
/* Controlled section gaps - padding only, no margin */
body.index main>section{margin-top:0;}
body.index main>section:first-of-type{margin-top:0;}
body.index main>#socials{margin-top:0;}
.card{transition:transform .25s ease,box-shadow .25s ease;}@media (min-width:640px){.card:hover,.card:focus-visible{box-shadow:0 8px 32px 0 rgba(16,42,67,.18),0 1.5px 6px 0 rgba(16,42,67,.10);transform:translateY(-6px) scale(1.02);}}
/* Mobile header overlay: make icons white and add subtle shadow for contrast */
@media (max-width:767px){
  /* Respect iOS safe-area on notched devices so header content (logo) isn't clipped under status bar */
  #mobileHeader{
    padding-top: env(safe-area-inset-top);
  }
  /* Restrict white stroke to hamburger icon only (home page - transparent header over video) */
  #mobileHeader #hamburgerIcon line{stroke:white!important;}
  #mobileHeader a,#mobileHeader button{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
}
/* ---- Sticky headers (mobile) ----
   Standard pages: the solid header sticks. z-index stays under #mobileNav
   (z-50 drawer + its overlay) so the open drawer still covers it.

   The background MUST be set here. The markup carries bg-[#fafcff], but this
   project ships a prebuilt partial Tailwind file and no arbitrary bg-[#hex]
   utility is compiled into it, so that class paints nothing. It went unnoticed
   while the header was static - it sits on a #fafcff body, so the body simply
   showed through and looked identical. The moment it became sticky, page
   content scrolled under a transparent header and straight over the logo.
   .desktop-topbar and #mobileNav already set real backgrounds in CSS for the
   same reason; this was the only header left relying on the no-op class. */
.mobile-topbar{
  background:#fafcff;
}
@media (max-width:767px){
  .mobile-topbar{
    position:sticky;
    top:0;
    z-index:45;
    box-shadow:0 1px 3px rgba(10,35,66,.10);
  }
}
/* Home: the header overlays the video hero transparent, with a white logo and
   white hamburger. It is fixed rather than absolute so it also stays put on
   scroll. Once the hero has passed under it the transparent treatment would
   put a white logo on white content, so .is-solid (set in menu.js) restores
   the normal solid header. */
@media (max-width:767px){
  body.index #mobileHeader{
    transition:background-color .28s ease, box-shadow .28s ease;
  }
  body.index #mobileHeader.is-solid{
    background:#fafcff;
    box-shadow:0 1px 3px rgba(10,35,66,.10);
  }
  body.index #mobileHeader.is-solid .site-logo{filter:none !important;}
  body.index #mobileHeader.is-solid #hamburgerIcon line{stroke:#1886ff !important;}
  body.index #mobileHeader.is-solid a,
  body.index #mobileHeader.is-solid button{filter:none;}
}
@media (prefers-reduced-motion:reduce){
  body.index #mobileHeader{transition:none;}
}

/* All pages mobile: consistent logo size matching home page */
@media (max-width:767px){
  header .site-logo{
    background:transparent!important;
    mix-blend-mode:normal!important;
    -webkit-mask-image:none;
    mask-image:none;
    filter:none!important;
    max-height:clamp(60px,16vw,80px) !important;
  }
  /* Mobile hero tagline tuning (premium) */
  
}

/* --- Contact form: dark style (Nov 2025) --- */
/* Goal: Match dark mockup while keeping existing fields/validation */
/* Charcoal background to match provided mockup (not pure black) */
/* Contact section ash background (slightly lighter than previous charcoal) */
body.index #contact,
body.contact-page #contact{background:#2b2e31!important;color:#e5e7eb;}
body.index #contact a,
body.contact-page #contact a{color:#fde047;} /* yellow-300 for links on dark */
body.index #contact a:hover,
body.contact-page #contact a:hover{color:#facc15;}
/* Error text + required markers: the global .text-red-600/500!important
   below (line ~723) fails WCAG 4.5:1 on this section's charcoal background
   (~2.8:1); needs !important too to win the specificity tie, since both
   declarations carry it. red-300 reads clearly (~6.4:1) and stays "error red" */
body.index #contact .text-red-600,
body.contact-page #contact .text-red-600,
body.index #contact .text-red-500,
body.contact-page #contact .text-red-500{color:#fca5a5!important;}

/* Make the form transparent (no card), remove border/shadow */
body.index #contactForm,
body.contact-page #contactForm{background:transparent!important;border:none!important;box-shadow:none!important;}

/* Labels on dark */
/* Slightly lighter labels to match mock */
body.index #contactForm label,
body.contact-page #contactForm label{color:#e5e7eb;} /* slate-200 */

/* Underline-only inputs on dark */
body.index #contactForm .input,
body.index #contactForm input,
body.index #contactForm textarea,
body.index #contactForm select,
body.contact-page #contactForm .input,
body.contact-page #contactForm input,
body.contact-page #contactForm textarea,
body.contact-page #contactForm select{
  background:transparent!important;
  color:#e5e7eb!important; /* slate-200 */
  border:none!important;
  border-bottom:1px solid rgba(255,255,255,0.85)!important; /* white underline base */
  border-radius:0!important;
  padding-left:0.25rem!important;
  padding-right:0.25rem!important;
  box-shadow:none!important;
  caret-color:#facc15; /* yellow-400 */
}
/* Focus state: brighter underline */
body.index #contactForm .input:focus,
body.index #contactForm input:focus,
body.index #contactForm textarea:focus,
body.index #contactForm select:focus,
body.contact-page #contactForm .input:focus,
body.contact-page #contactForm input:focus,
body.contact-page #contactForm textarea:focus,
body.contact-page #contactForm select:focus{
  outline:none!important;
  border-bottom-color:#facc15!important; /* yellow */
  box-shadow:0 2px 10px -2px rgba(250,204,21,0.6)!important; /* yellow glow */
}
/* Placeholder color on dark */
body.index #contactForm ::placeholder,
body.contact-page #contactForm ::placeholder{color:#94a3b8;opacity:1;}

/* Character counter + assist rows on dark */
body.index #contactForm .assist-row,
body.contact-page #contactForm .assist-row{color:#94a3b8;}
body.index #cf-message-count,
body.contact-page #cf-message-count{color:#9ca3af;}
/* text-red-600/500 rely on a Tailwind CSS var that resolves empty in this build,
   so error text silently inherited the assist-row's slate colour instead of red */
.text-red-600{color:#dc2626!important;}
.text-red-500{color:#ef4444!important;}

/* Consent checkbox text */

/* Submit button: pill outline yellow, invert on hover */
body.index #contactForm #contactSubmitBtn,
body.contact-page #contactForm #contactSubmitBtn{
  background:transparent!important;
  color:#ffffff!important;
  border:2px solid #facc15!important;
  border-radius:9999px!important;
  box-shadow:none!important;
}
body.index #contactForm #contactSubmitBtn:hover,
body.index #contactForm #contactSubmitBtn:focus,
body.contact-page #contactForm #contactSubmitBtn:hover,
body.contact-page #contactForm #contactSubmitBtn:focus{
  background:#facc15!important;
  color:#111827!important; /* slate-900 */
}

/* Error messages remain red for visibility; adjust underline when invalid */
body.index #contactForm [aria-invalid="true"],
body.contact-page #contactForm [aria-invalid="true"]{border-bottom-color:#f87171!important;} /* red-400 */
body.index #contactForm [aria-invalid="true"],
body.contact-page #contactForm [aria-invalid="true"]{box-shadow:0 2px 8px -2px rgba(248,113,113,0.55)!important;}

/* Remove gap above Connect with us section (#socials) */
/* Socials spacing - overridden by premium spacing block at end of file for index */
/* Keep this for non-index pages (catalog pages) */
body:not(.index) #socials{padding-top:1rem!important;padding-bottom:1rem!important;}
@media (min-width:640px){body:not(.index) #socials{padding-top:1.25rem!important;padding-bottom:1.25rem!important;}}
@media (min-width:1024px){body:not(.index) #socials{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}}
/* Footer section is also #socials - zero its bottom padding (specificity 2,0,0 beats above 1,1,1) */
#socials:has(#brandFooter){padding-bottom:0 !important;}
/* Contact section bottom padding - use body.index for specificity */
body.index #contact{padding-bottom:0!important;}

/* --- Brand Footer Panel (under socials) --- */
/* Subtle black glassline under socials logos to separate from content below */
#socials #socialLinks{position:relative;padding-bottom:2.25rem;}
#socials #socialLinks::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:.4rem; /* sits within the increased padding */
  width:100vw; /* full viewport width */
  height:2px;
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.45), rgba(0,0,0,0));
  border-radius:9999px;
  box-shadow:0 6px 16px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
  opacity:.9;
  pointer-events:none;
}
/* === Brand footer - enhanced v3: icon badges, accent lines, arrow hover === */

/* Parent section gets a subtle blue-gray background so the footer stands apart */
section:has(#brandFooter){background:#fafcff;padding-bottom:0 !important;}

#brandFooter.brand-footer-panel{background:transparent;border:none;border-radius:0;padding:0 0 1.25rem;}
@media (min-width:640px){#brandFooter.brand-footer-panel{padding:0 0 1.25rem;}}

/* Force correct 5/3/4 column spans - md:col-span-4 is absent from the prebuilt Tailwind partial */
@media (min-width:768px){
  #brandFooter .grid>div:nth-child(1){grid-column:span 5;}
  #brandFooter .grid>div:nth-child(2){grid-column:span 3;}
  #brandFooter .grid>div:nth-child(3){grid-column:span 4;}
}

/* Section headings: compact uppercase with 2px orange accent underline */
#brandFooter .brand-footer-h{font-family:var(--font-sans);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#0a2342;font-size:0.9rem;margin:0 0 0.85rem 0;position:relative;padding-bottom:0.65rem;}
#brandFooter .brand-footer-h::after{content:'';position:absolute;bottom:0;left:0;width:1.5rem;height:2px;background:#ED8936;border-radius:2px;}

/* Brand description - font-size:1rem/line-height:1.65 applied at every width
   (was two breakpoint media queries covering all widths with identical values) */
#brandFooter .brand-footer-lead{color:#1e293b;line-height:1.65;font-weight:var(--fw-regular);letter-spacing:var(--ls-normal);font-size:1rem;text-align:left;}

/* Logo */
#brandFooter .brand-footer-logo{width:160px;max-width:100%;height:auto;display:block;object-fit:contain;}
@media (max-width:767px){#brandFooter .brand-footer-logo{width:auto;height:clamp(54px,15vw,74px);}}
@media (min-width:640px){#brandFooter .brand-footer-logo{width:200px;}}
@media (min-width:1024px){#brandFooter .brand-footer-logo{width:220px;}}

/* Quick links: clean non-underlined with animated › arrow on hover */
#brandFooter .brand-footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.55rem;}
#brandFooter .brand-footer-list li{position:relative;padding-left:0;transition:padding-left 0.22s cubic-bezier(.22,1,.36,1);}
#brandFooter .brand-footer-list li::before{content:'›';color:#ED8936;font-size:1.1rem;font-weight:700;position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(-3px);opacity:0;transition:opacity 0.22s,transform 0.22s;line-height:1;}
#brandFooter .brand-footer-list li:hover{padding-left:0.9rem;}
#brandFooter .brand-footer-list li:hover::before{opacity:1;transform:translateY(-50%) translateX(0);}
#brandFooter .brand-footer-list a{color:#0a0a0a;text-decoration:none;font-weight:600;font-size:1rem;transition:color 0.2s;display:block;}
#brandFooter .brand-footer-list a:hover{color:#0a2342;}

/* Contact section */
#brandFooter .brand-footer-contact{display:flex;flex-direction:column;gap:1rem;color:#334155;}

/* Contact item: icon badge + label + value */
.contact-item{display:flex;align-items:flex-start;gap:0.75rem;}

.ci-label{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.07em;color:#475569;line-height:1;margin-bottom:0.25rem;}
.ci-val{display:block;font-size:0.9375rem;color:#0a2342;font-weight:600;line-height:1.45;}

/* Contact links - no underline, hover turns orange */
#brandFooter .brand-footer-contact .ci-val a,
#brandFooter .brand-footer-contact .brand-footer-link{color:#0a2342;text-decoration:none;font-weight:600;transition:color 0.2s;display:inline-block;padding:.3rem 0;}
#brandFooter .brand-footer-contact .ci-val a:hover,
#brandFooter .brand-footer-contact .brand-footer-link:hover{color:#b45309;}

/* Blue copyright bar */
footer.sticky-footer .py-5{padding-block:1rem;gap:.4rem;}
footer.sticky-footer .py-5 p{margin-block:0;}
footer.sticky-footer a{color:rgba(255,255,255,0.6);text-decoration:none;}
footer.sticky-footer a:hover{color:#ffffff;}
/* The WhatsApp float lives inside the footer (contentinfo landmark) but is
   not a footer text link: keep its icon solid white, not the 60% link tint
   the rule above would inherit onto currentColor. */
footer.sticky-footer a.float{color:#fff;}

/* --- Social Links Interactive Effects (Nov 2025) --- */
/* Goal: Provide subtle lift, icon emphasis, and brand color hint on hover/focus while keeping mobile minimal */
#socialLinks a{transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s cubic-bezier(.19,1,.22,1),background-color .35s ease,border-color .35s ease,color .3s ease,filter .4s;position:relative;will-change:transform,box-shadow;}
#socialLinks a img{transition:transform .6s cubic-bezier(.19,1,.22,1),filter .5s ease;}
@media (min-width:640px){#socialLinks a{border-radius:1.5rem;}}
/* Hover / keyboard focus: lift + scale */
#socialLinks a:hover,#socialLinks a:focus-visible{transform:translateY(-5px) scale(1.035);box-shadow:0 12px 32px -14px rgba(0,0,0,.24),0 6px 20px -10px rgba(36,67,122,.15);background:#fafcff;}
#socialLinks a:hover img,#socialLinks a:focus-visible img{transform:scale(1.09);filter:saturate(1.15) contrast(1.05);}
/* Active (pressed) state: slight compress */
#socialLinks a:active{transform:translateY(-2px) scale(.98);box-shadow:0 6px 18px -8px rgba(0,0,0,.26),0 3px 10px -6px rgba(36,67,122,.2);}
/* Mobile: gentler motion & shadow */
@media (max-width:639px){#socialLinks a:hover,#socialLinks a:focus-visible{transform:translateY(-3px) scale(1.025);box-shadow:0 8px 22px -12px rgba(0,0,0,.22),0 4px 12px -8px rgba(36,67,122,.16);}}
/* Brand color accents for label text on larger screens */
#socialLinks a[aria-label^="LinkedIn"]:hover span:not(.sr-only),#socialLinks a[aria-label^="LinkedIn"]:focus-visible span:not(.sr-only){color:#0A66C2!important;}
#socialLinks a[aria-label^="Instagram"]:hover span:not(.sr-only),#socialLinks a[aria-label^="Instagram"]:focus-visible span:not(.sr-only){color:#d6249f!important;}
#socialLinks a[aria-label^="X"]:hover span:not(.sr-only),#socialLinks a[aria-label^="X"]:focus-visible span:not(.sr-only){color:#000!important;}
/* Reduced motion: disable transforms */
@media (prefers-reduced-motion:reduce){
  #socialLinks a,#socialLinks a *{transition:none!important;}
  #socialLinks a:hover,#socialLinks a:focus-visible{transform:none!important;box-shadow:0 4px 14px -4px rgba(0,0,0,.12)!important;}
  #socialLinks a:hover img,#socialLinks a:focus-visible img{transform:none!important;filter:none!important;}
}

/* ── PRODUCT CARD V3 - image + label, no button ── */
.product-card-v3{
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid #e8ecf1;
  box-shadow:0 1px 4px rgba(10,35,66,0.06);
  transition:box-shadow 0.3s ease, transform 0.3s ease;
  cursor:default;
}
.product-card-v3:hover{
  box-shadow:0 6px 24px rgba(10,35,66,0.13);
  transform:translateY(-3px);
}
.product-card-v3__img{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f8f9fb;
  flex-shrink:0;
}
.product-card-v3__img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.45s ease;
}
.product-card-v3:hover .product-card-v3__img img{
  transform:scale(1.05);
}
/* Card titles are h2 for heading hierarchy but keep the h3 visual scale */
.product-card-v3 h2{font-size:var(--fs-h3);line-height:var(--lh-subhead);font-weight:var(--fw-semi);letter-spacing:var(--ls-snug);}
@media (min-width:641px) and (max-width:1023px){.product-card-v3 h2{font-size:22px;line-height:1.24;letter-spacing:-0.015em;}}
@media (max-width:640px){.product-card-v3 h2{font-size:20px;line-height:1.24;letter-spacing:-0.015em;}}
.product-card-v3__label{
  padding:0.75rem 0.875rem;
  text-align:center;
  background:#fff;
}
.product-card-v3__label :is(h2,h3){
  font-size:0.9375rem;
  font-weight:700;
  color:#0a2342;
  line-height:1.35;
  margin:0;
  letter-spacing:-0.01em;
}

@media (min-width:768px){
  .product-card-v3__img{aspect-ratio:4/3;}
  .product-card-v3__label{padding:0.875rem 1rem;}
  .product-card-v3__label :is(h2,h3){font-size:1rem;}
}
@media (max-width:374px){
  .product-card-v3__label{padding:0.5rem 0.625rem;}
  .product-card-v3__label :is(h2,h3){font-size:0.8125rem;}
}

/* Mobile tweaks - product grid & hero banner */
@media (max-width:767px){
  .product-grid{gap:0.5rem!important;}
  section[class*="pb-8"] > .max-w-7xl,
  section[class*="pt-3"] > .max-w-7xl{padding-left:0.5rem!important;padding-right:0.5rem!important;}

  section[class*="pt-3"] .bg-\[\#fbbf24\]{
    border-radius:0.875rem!important;padding:1rem 0.875rem!important;min-height:auto!important;
  }
  section[class*="pt-3"] .bg-\[\#fbbf24\] h1{font-size:1.5rem!important;margin-bottom:0.25rem!important;}
  section[class*="pt-3"] .bg-\[\#fbbf24\] nav{font-size:0.75rem!important;margin-top:0.375rem!important;}
  section[class*="pt-3"] .bg-\[\#fbbf24\] p{font-size:0.8125rem!important;margin-top:0.5rem!important;line-height:1.5!important;}
}

/* ── RESPONSIVENESS IMPROVEMENTS ── */

/* Bento grid advantage cards: reduce min-height on mobile */
@media (max-width:767px){
  .advantage-card{min-height:auto!important;padding:1.75rem!important;}
  .advantage-card span[style*="font-size:140px"],
  .advantage-card span[style*="font-size:120px"]{font-size:80px!important;}
}

/* Hero: fill full viewport on ultra-short landscape phones */
@media (max-height:480px) and (orientation:landscape){
  .hero-with-video{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;}
}

/* Welcome section: tighter spacing on mobile */
@media (max-width:639px){
  .welcome-section .mb-10{margin-bottom:1.75rem!important;}
  .welcome-section .mb-12{margin-bottom:2rem!important;}
  .welcome-section .mb-14{margin-bottom:2.5rem!important;}
  .welcome-section p.text-base{font-size:1.0625rem!important;line-height:1.7!important;}
  .welcome-section h1{font-size:2rem!important;font-weight:900!important;width:100%!important;max-width:100%!important;hyphens:none!important;overflow-wrap:normal!important;word-break:normal!important;}
}

/* Contact form: consistent field spacing on mobile */
@media (max-width:639px){
  body.index #contactForm .field-row{min-height:auto!important;margin-bottom:0.25rem;}
  body.index #contactForm .grid.gap-0{gap:0!important;}
}

/* Brand footer: tighter mobile layout */
@media (max-width:767px){
  #brandFooter .grid{gap:1.5rem!important;}
  #brandFooter .brand-footer-list{gap:0.4rem;}
  #brandFooter .brand-footer-list a{font-size:0.9375rem;}
}

/* Sticky footer: safe area padding for notched phones */
footer.sticky-footer{padding-bottom:env(safe-area-inset-bottom,0);}

/* Prevent horizontal overflow from any absolute positioned decorative elements */
@media (max-width:767px){
  .advantage-card .absolute.w-56{display:none!important;}
}

/* Social icons: slightly larger tap targets on mobile */
@media (max-width:639px){
  #socialLinks a img{width:3rem!important;height:3rem!important;}
}

/* Contact form width (narrower on tablet/desktop) */
/* Responsive width tiers for contact form */
@media (min-width:640px){ /* sm */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:36rem!important;}
}
@media (min-width:1024px){ /* lg */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:40rem!important;}
}
@media (min-width:1280px){ /* xl */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:44rem!important;}
}
@media (min-width:1536px){ /* 2xl */
  body.index #contactForm,
  body.contact-page #contactForm{max-width:48rem!important;}
}

/* Anchor jumps must clear the sticky bars: the mobile header is 72-92px (it
   follows the fluid logo) and the desktop sticky topbar 76px. 4.5rem (72px)
   only cleared the retired 68px navy bar. 6.5rem (104px) clears mobile at its
   tallest; 5.5rem (88px) is enough from md up. */
@media (min-width:768px){
  html{scroll-padding-top:5.5rem;}
}

/* 25. Global responsive hardening (site-wide) */
/* Prevent flex/grid children from forcing overflow on narrow devices */
:where(.flex, .grid) > *{min-width:0;}

/* Make mobile drawer robust on all pages, including long menus */
#mobileNav{
  max-height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Tablet optimization: avoid cramped 4-column product grids at md widths */
@media (min-width:768px) and (max-width:1023px){
  .grid.md\:grid-cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Long contact values (email/phone) should wrap instead of pushing layout */
.header-contact,
#brandFooter .brand-footer-link{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Several pages use lg:whitespace-nowrap for taglines; allow wrapping on smaller laptops */
@media (max-width:1279px){
  .lg\:whitespace-nowrap{white-space:normal!important;}
}

/* ============================================================
   Mobile Nav - Full-screen overlay (Reliance-style)
   Overrides the narrow slide-in panel on all pages.
   All rules are unlayered so they beat Tailwind @layer utilities.
   ============================================================ */

/* 1. Expand to full screen + brand-navy background */
#mobileNav{
  inset:0 !important;
  width:100% !important;
  max-width:100% !important;
  background:#0a2342 !important;
  box-shadow:none !important;
  display:flex;
  flex-direction:column;
}

/* 2. The dark JS-injected overlay is redundant now (nav IS the overlay) */
#mobileOverlay{display:none !important;}

/* 3. Header row: logo left, white × right */
#mobileNav > div.flex{
  padding:calc(1.1rem + env(safe-area-inset-top,0px)) 1.5rem 1.1rem !important;
  align-items:center;
}
/* Logo image inside nav header - invert to white on dark bg */
.mobile-nav-logo{
  height:auto;
  max-height:clamp(54px,15vw,74px);
  width:auto;
  object-fit:contain;
  filter:brightness(0) invert(1);
  display:block;
}
/* Close × button */
#mobileNav #closeMenuBtn svg{stroke:#fff !important;width:1.75rem;height:1.75rem;}

/* 4. Nav list: remove white-bg padding/gap, use full-bleed rows */
#mobileNav > ul{
  padding:0 !important;
  gap:0 !important;
  flex:1;
}
/* Each top-level item: left+right padding, bottom separator */
#mobileNav > ul > li{
  padding:0 1.5rem;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* Top-level links + Products toggle button */
#mobileNav > ul > li > a,
#mobileNav > ul > li > button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  padding:1.1rem 0 !important;
  color:#fff !important;
  font-size:1.1rem !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  background:transparent !important;
}
/* Chevron icon on Products button */
#mobileNav > ul > li > button svg{stroke:#fff !important;opacity:1;}

/* 5. Products sub-menu: two-level nested structure
   Level 1 (#productsDropdownMenu): Agri Commodities category rows
   Level 2 (#agriDropdownMenu): individual product links */

#productsDropdownMenu{
  margin:0 -1.5rem !important;
  padding:0 !important;
  background:rgba(255,255,255,.06);
  border-radius:0 !important;
}
/* Category header rows (Agri Commodities) */
#productsDropdownMenu > li{
  padding:0 1.5rem 0 3rem !important;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#productsDropdownMenu > li:last-child{border-bottom:none;}
/* Category toggle buttons */
#productsDropdownMenu > li > button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  padding:.9rem 0 !important;
  color:#fff !important;
  font-size:.95rem !important;
  font-weight:600 !important;
  background:transparent !important;
  letter-spacing:.04em;
  white-space:nowrap;
}
/* Constrain the chevron SVG - w-3/h-3 Tailwind classes may not be compiled */
#productsDropdownMenu > li > button svg{
  stroke:#fff !important;
  width:1rem !important;
  height:1rem !important;
  flex-shrink:0;
}
/* Level-2: individual product lists */
#agriDropdownMenu{
  margin:0 -1.5rem 0 -3rem !important;
  padding:0 !important;
  background:rgba(255,255,255,.05);
}
#agriDropdownMenu li{
  padding:0 1.5rem 0 5rem !important;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#agriDropdownMenu li:last-child{border-bottom:none;}
#agriDropdownMenu li a{
  display:block;
  padding:.65rem 0 !important;
  margin:0 !important;
  color:#fff !important;
  font-size:.88rem !important;
  font-weight:600 !important;
}

/* 6. Contact items (email + phone at bottom of list) */
#mobileNav ul > li > a.header-contact{
  color:rgba(255,255,255,.9) !important;
  font-size:.95rem !important;
  gap:.75rem;
}

/* 7. Safe-area bottom padding for notched phones */
#mobileNav > ul{
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1.5rem) !important;
}

/* =============================================================
   HOME PAGE - TIGHTER SECTION SPACING
   Reduces the default Tailwind py-10/py-20 values down.
   Unlayered → beats all @layer utilities.
   ============================================================= */

/* All main sections: controlled vertical rhythm
   margin-top is now 0 on all sections (see rule above),
   so inter-section gap = pb of prev + pt of next. */
.welcome-section,
#products,
#exports,
#advantages,
#socials{
  padding-top:    2rem !important;
  padding-bottom: 2rem !important;
}
#contact{
  padding-top:    1.25rem !important;
}
body.index #contact{
  padding-bottom: 1.25rem !important;
}

/* Tablet 640px+ */
@media (min-width:640px){
  .welcome-section,
  #products,
  #exports,
  #advantages,
  #socials{ padding-top:2.5rem !important; padding-bottom:2.5rem !important; }
  #contact{ padding-top:1.5rem !important; }
}

/* Desktop 1024px+ */
@media (min-width:1024px){
  .welcome-section,
  #products,
  #exports,
  #advantages,
  #socials{ padding-top:2.25rem !important; padding-bottom:2.25rem !important; }
  #contact{ padding-top:2rem !important; }
}

/* ── Welcome section: tighten internal element spacing ── */
.welcome-section .w-24{ margin-bottom:1rem !important; }
.welcome-section p{ margin-bottom:1.25rem !important; }

/* ── Advantages: tighter header + grid ── */
#advantages .flex.flex-col.lg\:flex-row{ margin-bottom:1.5rem !important; }
#advantages .bento-grid{ gap:0.75rem !important; }

/* ── Contact: tighten heading block ── */
#contact .text-center.mt-4{ margin-top:0 !important; margin-bottom:1rem !important; }

/* ── Socials: tighter internal gaps ── */
#socials .w-16{ margin-top:0.5rem !important; margin-bottom:0.75rem !important; }
#socials .mt-6{ margin-top:1rem !important; }
#brandFooter{ margin-top:1.5rem !important; }

/* ── ALL NON-HOME PAGES: same tight section spacing ─────────────────
   Matches the home page rhythm (1rem / 1.25rem / 1.5rem per side).
   The video hero (.hero-with-video) and the footer section are excluded
   so they keep their full-bleed appearance unchanged. */
body:not(.index) main>section:not(.hero-with-video):not(:has(#brandFooter)){
  padding-top:    1rem !important;
  padding-bottom: 1rem !important;
  margin-top:     0    !important;
  margin-bottom:  0    !important;
}
@media (min-width:640px){
  body:not(.index) main>section:not(.hero-with-video):not(:has(#brandFooter)){
    padding-top:    1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}
@media (min-width:1024px){
  body:not(.index) main>section:not(.hero-with-video):not(:has(#brandFooter)){
    padding-top:    1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* Nav bar and mobile nav */
nav.desktop-nav { background-color: #01467e !important; }
#mobileNav { background-color: #01467e !important; }
#socialLinks a:hover, #socialLinks a:focus-visible { background: #fafcff !important; }

/* ── INDEX PAGE COMPONENTS (consolidated from inline <style>) ── */
.welcome-section {
                position: relative;
                overflow: hidden;
                background: #fafcff;
                margin-top: 0;
            }

.advantage-card {
                transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .advantage-card:hover {
                transform: translateY(-6px);
            }

            .advantage-card-dark:hover {
                box-shadow: 0 36px 72px -12px rgba(10, 35, 66, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
            }

            .advantage-card-green:hover {
                box-shadow: 0 36px 72px -12px rgba(5, 46, 22, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
            }

            .advantage-card-light-green:hover {
                box-shadow: 0 24px 56px -8px rgba(22, 163, 74, 0.24);
            }

            .advantage-card-light-blue:hover {
                box-shadow: 0 24px 56px -8px rgba(19, 78, 142, 0.24);
            }

            .advantage-icon {
                transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .advantage-card:hover .advantage-icon {
                transform: scale(1.1) rotate(-4deg);
            }

            @media (min-width: 768px) {
                .bento-grid {
                    grid-template-rows: auto auto;
                }
            }
.contact-section {
                position: relative;
                overflow: hidden;
            }

            .contact-section::before {
                content: '';
                position: absolute;
                top: -150px;
                right: -150px;
                width: 500px;
                height: 500px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(237, 137, 54, 0.06) 0%, transparent 70%);
                pointer-events: none;
            }

            .contact-section::after {
                content: '';
                position: absolute;
                bottom: -120px;
                left: -120px;
                width: 400px;
                height: 400px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(22, 163, 74, 0.04) 0%, transparent 70%);
                pointer-events: none;
            }

            .contact-form-card {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.06);
                -webkit-backdrop-filter: blur(16px);
                backdrop-filter: blur(16px);
                box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.2);
                padding-bottom: 0 !important;
            }

            .contact-submit-btn {
                position: relative;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .contact-submit-btn::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
                opacity: 0;
                transition: opacity 0.4s ease;
            }

            .contact-submit-btn:hover::before {
                opacity: 1;
            }

            .contact-submit-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 32px -8px rgba(250, 204, 21, 0.35);
            }

            .contact-submit-btn .submit-arrow {
                transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .contact-submit-btn:hover .submit-arrow {
                transform: translateX(4px);
            }

            .contact-form-card .input {
                transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
            }

            .contact-form-card .input:focus {
                border-color: rgba(250, 204, 21, 0.45) !important;
                box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.08) !important;
                background: rgba(255, 255, 255, 0.03) !important;
            }

            .contact-form-card .field-row {
                margin-bottom: 0;
            }

            .contact-form-card .assist-row {
                margin-top: 2px;
                margin-bottom: 0;
                min-height: 1rem;
            }

/* ── INDIVIDUAL PRODUCT PAGE ── */
/* Product page layout with sidebar */
.product-page-layout{
  display:grid;grid-template-columns:1fr;gap:2rem;
}
@media(min-width:1024px){
  .product-page-layout{grid-template-columns:1fr 260px;gap:2.5rem;}
}
.product-page-main{min-width:0;}

/* Product sidebar */
.product-sidebar{
  align-self:start;
  position:sticky;
  /* Must clear the sticky topbar, not just the viewport edge. At top:1.5rem
     this panel pinned 24px from the top while .desktop-topbar occupies the
     first 4.75rem at z-index:60, so the header painted over the panel's whole
     54px navy "SPICES" heading (plus the first row) on all 48 product pages,
     at every scroll position past the pin point. */
  top:calc(var(--desktop-topbar-h) + 1.5rem);
  /* Deliberately NOT height-capped. A max-height with the list scrolling
     inside would keep the navy heading pinned on the longest category, but it
     hides most of the 20 spice products behind an inner scrollbar - and this
     panel exists to show a buyer every product in the category at a glance.
     Full list wins over a permanently visible heading (site owner's call,
     16 Aug 2026). The consequence is that on a category taller than the
     viewport the panel scrolls with the page once its bottom is reached,
     which is normal sticky behaviour. */
  border:1px solid #ddd;
  border-radius:0.5rem;
  overflow:hidden;
  background:#fff;
}
.product-sidebar__header{
  background:#0a2342;color:#fff;
  padding:0.875rem 1rem;
  font-weight:700;font-size:0.9375rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.product-sidebar__list{
  list-style:none;padding:0;margin:0;
}
.product-sidebar__item{
  border-bottom:1px solid #f0f0f0;
}
.product-sidebar__item:last-child{border-bottom:none;}
.product-sidebar__item a{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.6rem 0.875rem;
  text-decoration:none;color:#475569;
  font-size:0.8125rem;font-weight:500;
  transition:all 0.15s;
}
.product-sidebar__item a::before{
  content:'\2192';color:#7a9a3a;font-size:0.7rem;flex-shrink:0;
}
.product-sidebar__item a:hover{
  background:#f8f9fb;color:#0a2342;
  padding-left:1.125rem;
}
.product-sidebar__item--active{background:#c8dda0;}
.product-sidebar__item--active a{
  font-weight:700;color:#0a2342;
}
.product-sidebar__item--active a::before{color:#0a2342;}
@media(max-width:1023px){
  .product-sidebar{display:none;}
}

.product-hero{
  display:grid;gap:2rem;
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:768px){
  .product-hero{grid-template-columns:1fr 1fr;gap:2rem;}
}
.product-hero__img{
  overflow:hidden;
  background:#f8f9fb;
}
.product-hero__img img{
  width:100%;height:auto;
  display:block;
}
.product-hero__cta{
  display:block;width:100%;margin-top:1.5rem;
  padding:0.9rem 1.5rem;
  background:#0a2342;color:#fff;
  font-weight:700;font-size:1rem;
  text-align:center;text-decoration:none;
  transition:background 0.2s;
}
.product-hero__cta:hover{background:#0d2d54;}
.product-hero__content{display:flex;flex-direction:column;gap:0;}
.product-hero__content h1{
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:800;color:#0a2342;
  text-transform:uppercase;
  letter-spacing:-0.01em;line-height:1.15;
  margin:0 0 1rem;
}
.product-hero__desc{
  font-size:0.9375rem;line-height:1.9;
  color:#333;text-align:justify;margin:0 0 0.75rem;
}

/* Section headings */
.product-section-heading{
  font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:800;color:#0a2342;
  margin:2rem 0 1.25rem;text-transform:uppercase;
}
.product-section-heading:first-child{margin-top:0;}

/* CTA strip layout */
.product-cta-strip .product-cta-group{justify-content:center;}

/* Related product cards */
.product-card-v3[href]{text-decoration:none;}

/* Tab panel content */
.prod-tab-content{
  padding:1.25rem 1.5rem;
  background:#fff;
}
.prod-tab-list{
  list-style:disc;padding-left:1.25rem;
  color:#333;line-height:2;font-size:0.9375rem;
}
.product-cta-group{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.5rem;}
.product-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.85rem 2rem;border-radius:0.5rem;
  font-weight:700;font-size:0.9375rem;
  text-decoration:none;
  transition:all 0.2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  min-width:200px;min-height:50px;
}
.product-cta:active{transform:scale(0.97);}
.product-cta--quote{background:#0a2342;color:#fff;}
.product-cta--quote:hover{background:#0d2d54;box-shadow:0 4px 14px rgba(10,35,66,0.3);}
/* WhatsApp's own brand green (#25d366) only gives white text 1.98:1 - fails
   WCAG AA (need 4.5:1). Darkened to green-700 (5.02:1) for the text CTA;
   the floating icon-only button (.float) keeps true brand green since it
   carries no text label and the icon is a recognized third-party brand mark. */
.product-cta--whatsapp{background:#15803d;color:#fff;}
.product-cta--whatsapp:hover{background:#166534;box-shadow:0 4px 14px rgba(21,128,61,0.35);}

.spec-box{border:2px solid #7a9a3a;overflow:hidden;}
.spec-box + .spec-box{margin-top:1rem;}
.spec-box__header{background:#a8c66c;padding:0.75rem 1.25rem;font-size:1.125rem;font-weight:800;color:#0a2342;}

/* Spec rows inside boxes - div-based for full-width stripes */
.spec-row{display:flex;padding:0.7rem 1rem;font-size:0.875rem;background:#fff;}
.spec-row:nth-of-type(odd){background:#c8dda0;}
.spec-row__label{font-weight:700;color:#0a2342;width:45%;flex-shrink:0;}
.spec-row__value{color:#333;font-weight:400;width:55%;}

/* Container section - green header bar with border like reference */
.container-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;}
@media(max-width:640px){.container-grid{grid-template-columns:1fr;}}
.container-box{border:2px solid #7a9a3a;overflow:hidden;}
.container-box__header{
  background:#a8c66c;padding:0.75rem 1.25rem;
  font-size:1.125rem;font-weight:800;color:#0a2342;
}
.container-box__body{
  padding:0.75rem 1.25rem;
  display:flex;gap:0.75rem;align-items:center;
  background:#fff;
}
.container-box__label{font-weight:700;color:#0a2342;font-size:0.9375rem;}
.container-box__value{font-weight:400;color:#333;font-size:0.9375rem;}

/* Tabs - green active tab like reference */
.prod-tab-bar{display:flex;overflow:hidden;border-bottom:2px solid #ddd;}
.prod-tab-v2{
  flex:1;padding:1rem 1.25rem;
  font-weight:700;font-size:1.0625rem;
  border:none;cursor:pointer;
  transition:background 0.2s,color 0.2s;
  color:#0a2342;background:#e8e8e8;
  font-family:inherit;line-height:1.3;
}
.prod-tab-v2--active{background:#8fad5a;color:#0a2342;}
.prod-tab-v2:hover:not(.prod-tab-v2--active){background:#d8d8d8;}

.product-cta-strip{
  background:#fbbf24;border-radius:1rem;
  padding:1.5rem 1.5rem;text-align:center;
}
.product-cta-strip h2{
  font-size:clamp(1.25rem,2.5vw,1.75rem);
  font-weight:800;color:#0a2342;margin:0 0 0.5rem;
}
.product-cta-strip p{font-size:0.9375rem;color:#0a2342;margin:0 0 0.75rem;}
.product-cta-strip .product-cta-group{margin-top:0;}

/* FAQ accordion */
.faq-item-gi{margin-bottom:0.5rem;border:1px solid #e1e1e1;border-radius:0.5rem;overflow:hidden;}
.faq-q-gi{width:100%;background:#f9faf9;border:none;padding:0.875rem 2.5rem 0.875rem 1rem;text-align:left;font-size:0.9375rem;font-weight:500;cursor:pointer;color:#0a2342;position:relative;font-family:inherit;}
.faq-q-gi:hover{background:#c8dda0;}
.faq-q-gi::after{content:'\25BC';position:absolute;right:1rem;font-size:0.7rem;transition:transform 0.2s;}
.faq-q-gi.faq-open::after{transform:rotate(180deg);}
.faq-a-gi{display:none;padding:0.875rem 1rem;background:#fff;border-top:1px solid #eee;font-size:0.9375rem;color:#333;line-height:1.7;}
.faq-hidden-gi{display:none;}
.faq-load-more{
  margin-top:0.75rem;padding:0.5rem 1.5rem;
  border:1px solid #ccc;border-radius:9999px;
  background:#fff;cursor:pointer;
  font-size:0.875rem;font-weight:600;color:#0a2342;
  transition:background 0.2s;
}
.faq-load-more:hover{background:#fbbf24;}

/* Normalize native <select> box height to match plain <input> underlines exactly */
body.index #contactForm select,
body.contact-page #contactForm select{
  -webkit-appearance:none!important;
  appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 0.35rem center!important;
  padding-right:1.25rem!important;
}

/* Legal document pages (Privacy Policy, Terms & Conditions) */
.legal-doc{color:rgba(10,35,66,0.82);font-size:0.9375rem;line-height:1.75;max-width:44rem;margin:0 auto;}
.legal-updated{max-width:44rem;margin:0 auto 1.25rem;font-size:0.8125rem;font-weight:600;color:rgba(10,35,66,0.5);text-transform:uppercase;letter-spacing:0.04em;}
.legal-doc h2{display:flex;align-items:center;gap:0.65rem;font-size:1.15rem;font-weight:800;color:#0a2342;margin:2.25rem 0 0.85rem;scroll-margin-top:1.5rem;}
.legal-doc h2:first-of-type{margin-top:0.5rem;}
.legal-doc h2 .legal-num{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:9999px;background:#0a2342;color:#fff;font-size:0.8125rem;font-weight:800;}
.legal-doc p{margin:0 0 1rem;}
.legal-doc ul{margin:0 0 1rem;padding-left:1.25rem;list-style:disc;}
.legal-doc li{margin:0 0 0.5rem;}
.legal-doc a{color:#01467e;text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.legal-doc a:hover{color:#0a2342;}
.legal-doc strong{color:#0a2342;}

/* Quick-summary callout (plain-English TL;DR above the formal text) */
.legal-summary{max-width:44rem;margin:0 auto 2rem;background:#fffbeb;border:1px solid rgba(251,191,36,0.45);border-radius:1rem;padding:1.25rem 1.5rem;}
.legal-summary h2{margin:0 0 0.75rem;font-size:0.75rem;font-weight:800;color:#0a2342;text-transform:uppercase;letter-spacing:0.04em;display:flex;align-items:center;gap:0.5rem;}
.legal-summary ul{margin:0;padding-left:1.1rem;list-style:disc;}
.legal-summary li{margin:0 0 0.4rem;font-size:0.9rem;line-height:1.6;color:rgba(10,35,66,0.85);}
.legal-summary li:last-child{margin-bottom:0;}
/* Links inside the summary need more than colour to stand out from the
   surrounding text (WCAG 1.4.1) - same underline treatment as .legal-doc a */
.legal-summary a{color:#01467e;text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.legal-summary a:hover{color:#0a2342;}

/* Table of contents on the Privacy Policy / Terms pages. Both documents run to
   ~20 sections, which is a long scroll on a phone with no way to jump; the
   numbered list mirrors the .legal-num badges so the numbering a reader sees
   here matches the headings below. Ordered list, so it is announced as a list
   of N items and each entry keeps its number for screen readers. */
.legal-toc{max-width:44rem;margin:0 auto 2rem;background:#fff;border:1px solid rgba(10,35,66,0.12);border-radius:1rem;padding:1.25rem 1.5rem;}
.legal-toc h2{margin:0 0 0.75rem;font-size:0.75rem;font-weight:800;color:#0a2342;text-transform:uppercase;letter-spacing:0.04em;}
.legal-toc ol{margin:0;padding-left:1.35rem;list-style:decimal;columns:2;column-gap:2rem;}
.legal-toc li{margin:0 0 0.4rem;font-size:0.875rem;line-height:1.5;color:rgba(10,35,66,0.85);break-inside:avoid;}
/* Undo the global "nav a" menu treatment (uppercase, nav font size, wide
   tracking) at line ~459. That rule is meant for the header and breadcrumb;
   this is a nav landmark too, so it inherited it and set 19-23 full section
   titles in wide-tracked uppercase, which is markedly harder to read at
   length and no longer matched the headings it links to. */
.legal-toc a{color:#01467e;text-decoration:underline;text-underline-offset:2px;font-weight:600;
  text-transform:none;font-size:inherit;letter-spacing:normal;}
.legal-toc a:hover{color:#0a2342;}
.legal-toc a:focus-visible{outline:2px solid #0EA5E9;outline-offset:2px;border-radius:0.2rem;}
@media(max-width:640px){.legal-toc ol{columns:1;}}

/* Cookie consent banner (injected by consent.js) */
#consentBanner{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;color:#0a2342;border-top:1px solid rgba(10,35,66,.1);box-shadow:0 -6px 28px rgba(10,35,66,.14);padding:1.1rem clamp(1rem,4vw,2.5rem) calc(1.1rem + env(safe-area-inset-bottom,0px));font-size:0.9rem;line-height:1.55;}
.cb-main{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;max-width:80rem;margin:0 auto;}
.cb-text{flex:1 1 340px;min-width:0;}
.cb-heading{margin:0 0 0.3rem;font-size:1rem;font-weight:800;color:#0a2342;}
.cb-text p{margin:0;color:rgba(10,35,66,0.78);}
.cb-text a{color:#01467e;text-decoration:underline;font-weight:600;}
.cb-actions{display:flex;flex-wrap:wrap;gap:0.6rem;margin-left:auto;}
#consentBanner button{min-height:44px;padding:0.55rem 1.2rem;border-radius:0.55rem;font-weight:600;font-size:0.9rem;cursor:pointer;border:1.5px solid #0a2342;background:#fff;color:#0a2342;}
#consentBanner button.cb-primary{background:#0a2342;color:#fff;}
#consentBanner button:hover{filter:brightness(0.94);}
#consentBanner button:focus-visible{outline:2px solid #0EA5E9;outline-offset:2px;}
/* Cookie preferences modal */
#consentModalOverlay{position:fixed;inset:0;z-index:130;background:rgba(10,35,66,0.55);display:flex;align-items:center;justify-content:center;padding:1rem;}
#consentModal{background:#fff;color:#0a2342;border-radius:0.9rem;box-shadow:0 20px 60px rgba(10,35,66,.35);width:min(640px,100%);max-height:min(85vh,44rem);display:flex;flex-direction:column;overflow:hidden;}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;background:#f5f7fa;border-bottom:1px solid rgba(10,35,66,.08);}
.cm-title{margin:0;font-size:1.3rem;font-weight:800;color:#0a2342;}
#cmClose{border:none;background:transparent;color:#0a2342;font-size:1.3rem;font-weight:700;line-height:1;cursor:pointer;padding:0.4rem 0.55rem;border-radius:0.4rem;min-height:44px;min-width:44px;}
#cmClose:hover{background:rgba(10,35,66,.08);}
#cmClose:focus-visible{outline:2px solid #0EA5E9;outline-offset:2px;}
.cm-body{padding:0.4rem 1.4rem;overflow-y:auto;}
.cm-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.05rem 0;border-bottom:1px solid rgba(10,35,66,.08);}
.cm-row:last-child{border-bottom:none;}
.cm-row-text{min-width:0;}
.cm-row-title{margin:0 0 0.3rem;font-size:1rem;font-weight:800;color:#0a2342;}
.cm-row-desc{margin:0;font-size:0.9rem;line-height:1.5;color:rgba(10,35,66,0.7);}
/* The muted treatment marks the row the visitor cannot switch off ("Strictly
   Necessary"). Both selectors have to out-specify the global paragraph colour
   at the top of this file:

     p:not([class*="text-white"]):not([class*="text-[#ED"]):not([class*="text-[#fbbf24"])
     -> (0,3,1), because each :not() carries its attribute selector's weight

   Written as `.cm-row-locked .cm-row-title` these were (0,2,0) and lost, so the
   locked row rendered at the same full-strength navy as the toggleable ones and
   nothing distinguished it. Qualifying through .cm-row-text with the element
   makes them (0,4,1), which wins outright rather than relying on source order. */
.cm-row.cm-row-locked .cm-row-text p.cm-row-title{color:rgba(10,35,66,0.45);}
.cm-row.cm-row-locked .cm-row-text p.cm-row-desc{color:rgba(10,35,66,0.4);}
.cm-switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto;}
.cm-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.cm-switch input:disabled{cursor:default;}
.cm-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:13px;transition:background .2s;pointer-events:none;}
.cm-slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s;}
.cm-switch input:checked + .cm-slider{background:#0a2342;}
.cm-switch input:checked + .cm-slider::before{transform:translateX(20px);}
.cm-switch input:disabled + .cm-slider{background:#a9c1e0;}
.cm-switch input:focus-visible + .cm-slider{outline:2px solid #0EA5E9;outline-offset:2px;}
.cm-actions{display:flex;justify-content:flex-end;gap:0.7rem;padding:1.05rem 1.4rem;border-top:1px solid rgba(10,35,66,.08);}
#consentModal button#cmSave{min-height:44px;padding:0.55rem 1.4rem;border-radius:0.55rem;font-weight:600;font-size:0.9rem;cursor:pointer;border:1.5px solid #0a2342;background:#fff;color:#0a2342;}
#consentModal button#cmAcceptAll{min-height:44px;padding:0.55rem 1.4rem;border-radius:0.55rem;font-weight:600;font-size:0.9rem;cursor:pointer;border:1.5px solid #0a2342;background:#0a2342;color:#fff;}
#consentModal button:hover{filter:brightness(0.94);}
#consentModal button:focus-visible{outline:2px solid #0EA5E9;outline-offset:2px;}

/* ──────────────────────────────────────────────────────────────────────────
   Exports and Imports rows (home page only, between #products and #advantages)

   Two of them: #exports drifts left, #imports drifts right, both looping.

   Still a native horizontal scroller underneath, not a transform track.
   overflow-x:auto gives touch swipe, trackpad swipe, shift+wheel, keyboard
   arrows and screen-reader scrolling for free, with the platform's own physics
   - none of which a transform-based carousel gets without reimplementing it,
   and all of which overflow:hidden would have thrown away. With JS off the rows
   do not drift, but they are still real scroll containers and every product
   stays reachable. tests/e2e/test_smoke.py holds that guarantee.

   No scroll-snap any more: it re-snapped the container after every programmatic
   scrollLeft write, and the drift makes ~60 of those a second. The JS on the
   page runs that drift, clones each card once for a seamless wrap, wires the
   arrows and the pointer-drag, and stands aside for 1.5s whenever the visitor
   scrolls the row themselves.

   Item width is a flex basis rather than a column count: a clamp below 1024px,
   where two or three cards show and the next one peeks, and an exact quarter of
   the row from 1024px up, where the count is pinned at four. */
/* Background only. Vertical rhythm comes from the shared home-page section
   rule further down (.welcome-section, #products, #exports, #advantages,
   #socials), because body.index section{padding:0} outranks a lone class
   selector - padding set here computed to 0 and left the heading welded to the
   section above. Anything that needs section padding on the home page has to
   join that list. */
/* Same #fafcff as every other light section on the home page (welcome,
   advantages, socials - and the body itself).

   This section's images are dedicated cut-out PNGs in assets/images/exports/
   with real alpha, not the opaque studio shots the product pages share. That
   is why there is no mix-blend-mode here: earlier revisions used one to hide a
   #fefefe backdrop, along with a background on the card link to survive the
   hover transform's stacking context. Transparency removed the need for both,
   and it also means this section is no longer locked to a light background. */
.exports-section{background:#fafcff;}

/* The imports rail is the exports rail with static cards. Everything visual is
   shared by grouping selectors below rather than duplicating ~100 lines; only
   what genuinely differs lives here. No top padding of its own: the two rows
   read as one block, so the shared home-page section rhythm applies once above
   #exports and once below #imports rather than twice in the middle. */
.imports-section{background:#fafcff;padding-top:0!important;}

/* No <a> in these cards, so the <li> is the layout box the link used to be.
   Same metrics as .exports-item a, minus the hover lift and focus ring - both
   promise an interaction that does not exist here. */
.imports-item{
  display:flex;flex-direction:column;align-items:center;gap:0.75rem;
  color:#0a2342;
  padding:0.375rem;
}
/* The track itself takes focus (tabindex="0" in the markup) because no card
   can. outline-offset is negative on purpose: the track clips vertically, so an
   outset ring would be shaved off top and bottom - the same trap the shared
   0.5rem track padding exists to avoid for the exports cards. */
.imports-track:focus-visible{outline:3px solid #0ea5e9;outline-offset:-3px;}

/* True edge to edge: the row itself has no side inset, so the first card starts
   at the left screen edge and the row runs off the right one. Only the heading
   keeps a gutter - centred text hard against the bezel reads as broken rather
   than deliberate on a narrow screen, and it costs the row nothing. */
.exports-head,
.imports-head{
  text-align:center;
  margin-bottom:1.25rem;
  padding-inline:clamp(1rem,4vw,3rem);
}
/* Everything here matches the other large home-page headings (Roboto 900, the
   same clamp and line-height) except the tracking, which is a deliberate
   exception rather than drift. The rest sit at -0.03em, which suits a phrase
   like "Built for global trust." where the eye reads word shapes; this heading
   is a single short word, so the same negative tracking is all the reader sees
   and it closes up. Opened to +0.02em - a 2.1px swing per gap at the desktop
   size. If a second word is ever added here, put it back to -0.03em. */
.exports-head h2,
.imports-head h2{
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:900;
  line-height:1.06;
  letter-spacing:0.02em;
  color:#0a2342;
  margin:0;
}
.exports-rule,
.imports-rule{
  height:3px;width:5rem;border-radius:9999px;margin:1.25rem auto 0;
  background:linear-gradient(90deg,#ED8936,#16a34a);
}

/* WCAG 2.2.2 Pause, Stop, Hide (Level A): the rows move on their own for
   longer than 5s, so there has to be a way to stop them. The visible pill this
   used to be was not wanted on the page, so it takes the same treatment as
   .skip-link above - parked off-screen, and it comes back only when a keyboard
   visitor tabs onto it. Nobody browsing with a mouse or a touchscreen ever sees
   it; a screen reader still finds and announces it.

   left:-9999px rather than display:none or visibility:hidden, both of which
   would take it out of the accessibility tree and leave no mechanism at all.
   It must become visible on focus - a control you can tab to but cannot see
   fails 2.4.7 Focus Visible, which is why this is not simply clipped. */
.exports-toggle,
.imports-toggle{
  position:absolute;left:-9999px;top:auto;
  display:inline-flex;align-items:center;gap:0.45rem;
  padding:0.4rem 0.9rem;
  border-radius:9999px;
  font-family:var(--font-sans);
  font-size:0.8125rem;font-weight:600;letter-spacing:0.01em;
  background:#ffffff;color:#0a2342;
  border:1px solid rgba(10,35,66,0.14);
  box-shadow:0 2px 10px -2px rgba(10,35,66,0.18);
  cursor:pointer;
}
/* position:static, not a left offset - the head is text-align:center, so
   returning the button to normal flow centres it on its own. Nudging it with
   left:50% instead would push it half the row off-centre. */
.exports-toggle:focus,
.imports-toggle:focus{
  position:static;
  margin-top:0.9rem;
  outline:3px solid #0ea5e9;outline-offset:2px;
}
.exports-toggle svg,
.imports-toggle svg{flex:0 0 auto;}
/* One button, two glyphs - the pair is swapped by aria-pressed rather than by
   rewriting the DOM, so assistive tech reads the state change from the button
   it is already on. */
.exports-toggle .icon-play,
.imports-toggle .icon-play{display:none;}
.exports-toggle[aria-pressed="true"] .icon-play,
.imports-toggle[aria-pressed="true"] .icon-play{display:block;}
.exports-toggle[aria-pressed="true"] .icon-pause,
.imports-toggle[aria-pressed="true"] .icon-pause{display:none;}

.exports-carousel,
.imports-carousel{position:relative;}
.exports-track,
.imports-track{
  /* Held in a custom property because the desktop item width is derived from
     it - four cards plus three gaps have to add up to exactly 100%. */
  --exports-gap:clamp(0.75rem,2vw,2rem);
  display:flex;
  gap:var(--exports-gap);
  margin:0;
  /* Vertical padding here is not decoration - it is clearance for the focus
     ring. overflow-x:auto forces overflow-y to auto too, so the track clips
     vertically, and a card's focus outline sits 3px wide at a 3px offset, i.e.
     6px outside the link. Anything under 0.5rem here and a keyboard visitor's
     focus ring gets its top and bottom shaved off. */
  padding:0.5rem 0;
  list-style:none;
  overflow-x:auto;
  /* No scroll-snap and no scroll-behavior:smooth. Both fight the marquee:
     mandatory snap re-snaps the container after every programmatic scrollLeft
     write (it is what made the drag jump a whole card at a time), and CSS
     smooth scrolling animates those writes instead of applying them, so a
     per-frame 0.5px step never lands. The arrows pass behavior:'smooth' to
     scrollBy explicitly, so they stay smooth without the CSS property. */
  scroll-behavior:auto;
  /* Stop a horizontal swipe at either end from being handed to the browser as
     a back/forward navigation gesture. */
  overscroll-behavior-x:contain;
  /* The scrollbar is redundant here - the arrows and the snap points already
     signal the affordance - and on macOS it overlays the product names. */
  scrollbar-width:none;
}
.exports-track::-webkit-scrollbar,
.imports-track::-webkit-scrollbar{display:none;}
.exports-item,
.imports-item{
  flex:0 0 clamp(9.5rem,34vw,13.5rem);
}
/* Desktop shows exactly four, filling the track with no part-visible fifth.
   A fixed clamp cannot do that - it left a remainder for a fifth card to sit
   in. Deriving the basis from the row instead - 100% less the three gaps,
   quartered - keeps it exact at every width from 1024px up, and the cards grow
   with the viewport (~241px at 1024 to ~456px at 1920) rather than the row
   gaining a stray column. */
@media (min-width:1024px){
  .exports-item,
  .imports-item{flex-basis:calc((100% - 3 * var(--exports-gap)) / 4);}
}
.exports-item a{
  display:flex;flex-direction:column;align-items:center;gap:0.75rem;
  text-decoration:none;color:#0a2342;
  padding:0.375rem;border-radius:1rem;
  transition:transform .35s cubic-bezier(0.22,1,0.36,1);
}
.exports-item a:hover{transform:translateY(-6px);}

.exports-item a:focus-visible{outline:3px solid #0ea5e9;outline-offset:3px;}
/* aspect-ratio, not height:auto off the intrinsic size. Each photo sits inside
   <picture>, which is the flex item and shrink-to-fits, so before the image has
   dimensions the box would collapse to 0 and the name below would jump up when
   it decoded - the same trap that produced certifications.html's CLS.

   4/3, matching the artwork's own canvas so contain never letterboxes. It was
   1/1, and a square box is far taller than this content needs: the produce
   averages about half the height of a square, so every card carried a band of
   dead space that pushed its label a long way clear of the photo. The canvas
   and this ratio have to change together - shortening the box alone just
   scales the photo down to fit and makes the produce smaller. */
.exports-img,
.imports-img{
  width:100%;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.exports-img picture,
.imports-img picture{display:block;width:100%;height:100%;}
.exports-img img,
.imports-img img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .45s cubic-bezier(0.22,1,0.36,1);
}
.exports-item a:hover .exports-img img{transform:scale(1.06);}
/* Inter, not Roboto. Roboto (--font-serif) is the heading face; every
   comparable product label on the home page - .nmg-label, .ps-nav links - is
   Inter 600, and these cards are labels rather than headings. */
.exports-name,
.imports-name{
  font-family:var(--font-sans);
  font-size:clamp(0.9375rem,2.4vw,1.0625rem);
  font-weight:600;
  letter-spacing:-0.01em;
  text-align:center;
  line-height:1.3;
}

/* Below 768px "Mandarins / Soft Citrus" is the one label of 25 that wraps to a
   second line. Flex stretches every card in that rail to match, so the whole
   Imports row rendered 168px tall against Exports' 149px - two rails that are
   meant to be identical, stacked directly on top of each other. Reserving the
   second line in BOTH rails keeps them equal, and stays correct if any future
   name wraps. At 768px+ nothing wraps and both rows are already 199px. */
@media (max-width:767px){
  .exports-name,
  .imports-name{min-height:2.6em;}
}

.exports-nav,
.imports-nav{
  position:absolute;top:calc(50% - 1.25rem);transform:translateY(-50%);
  z-index:2;
  width:2.75rem;height:2.75rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;color:#0a2342;
  border:1px solid rgba(10,35,66,0.14);
  box-shadow:0 2px 10px -2px rgba(10,35,66,0.18);
  transition:background .25s,color .25s,border-color .25s,opacity .25s;
}
/* Below 640px there is no gutter left to put these in - the container's own
   padding is 1rem - so an edge-anchored arrow lands on top of the first and
   last product photo. Touch is the primary input at that width and the track
   swipes natively, with the part-visible next card signalling that it scrolls,
   so the arrows are dropped rather than allowed to cover the imagery. They are
   display:none, which also takes them out of the accessibility tree, so nothing
   announces a control that is not there. */
@media (max-width:639.98px){.exports-nav,.imports-nav{display:none;}}
.exports-nav:hover,
.imports-nav:hover{background:#0a2342;color:#ffffff;border-color:#0a2342;}
.exports-nav:focus-visible,
.imports-nav:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;}
/* Pushed to the outer edges, clear of the produce. How far out they can go is
   limited by the gutter, which is the only space that exists outside the
   track: the container caps at max-w-7xl with 2rem of padding, so its content
   box is 1216px and the gutter is (100vw - 1280px)/2 + 32px per side. A 44px
   arrow with a 12px gap needs 56px of that, which arrives at 1328px wide -
   hence the two-stage treatment rather than one large negative offset, which
   would hang the arrows off the side of the viewport on a 1280px screen. */
/* Sitting just inside the screen edge, floating over the ends of the row.
   With the container edge to edge there is no gutter left to park them in, so
   overlaying is the only option - and the earlier versions of this, which
   pushed the buttons outside the track, would now hang them off the screen and
   give the page a horizontal scrollbar at every width. How much produce ends up
   behind a button depends entirely on which card is parked at the end - a wide
   subject like the black pepper reaches right into it, a tall narrow one does
   not - so the button carries its own white fill, border and shadow and does
   not rely on finding empty ground. */
.exports-prev,
.imports-prev{left:0.75rem;}
.exports-next,
.imports-next{right:0.75rem;}
/* aria-disabled rather than the disabled attribute: a disabled button drops out
   of the tab order, so a keyboard visitor who scrolled to the end would have
   focus destroyed under them. This keeps the control focusable and announced,
   and the click handler no-ops. */
.exports-nav[aria-disabled="true"],
.imports-nav[aria-disabled="true"]{opacity:.35;cursor:default;}
.exports-nav[aria-disabled="true"]:hover,
.imports-nav[aria-disabled="true"]:hover{background:#ffffff;color:#0a2342;border-color:rgba(10,35,66,0.14);}
/* Snapping used to be suspended here, because scroll-snap-type:x mandatory
   re-snapped the container after every programmatic scrollLeft write and made
   the drag jump a whole card at a time. The track no longer snaps at all - the
   marquee needs the same freedom the drag did - so this is down to the cursor
   and swallowing clicks on the card being dragged. */
.exports-track.is-dragging,
.imports-track.is-dragging{cursor:grabbing;}
.exports-track.is-dragging .exports-item a{pointer-events:none;}

@media (prefers-reduced-motion:reduce){
  .exports-track{scroll-behavior:auto;}
  /* The marquee never starts under reduced motion (the JS checks the same query
     before its first frame), so the control has nothing to pause and is hidden
     rather than left there doing nothing. The row still scrolls by arrow, drag
     and swipe. */
  .exports-toggle,.imports-toggle{display:none;}
  .exports-item a,.exports-img img{transition:none;}
  .exports-item a:hover{transform:none;}
  .exports-item a:hover .exports-img img{transform:none;}
}