/* ============================================================
   ANIBA FOOD SERVICES — "TERRA" DESIGN SYSTEM  (v2 · copper)
   A venture of ANIBA GROUP.

   Chromatic identity is taken from the ANIBA Food Service mark:
   copper #D26B34 → #97522D → near-black. Surfaces use a pale,
   faded green; contrast comes from soft black panels. Geometry
   follows the reference direction — large radii, rounded inset
   section panels, pill badges, circular arrow affordances.

   1  Tokens            9  Stats            17  Presence / Map
   2  Base              10 Bento            18  Testimonials
   3  Typography        11 Industries       19  News / Updates
   4  Layout            12 Process          20  Careers
   5  Buttons           13 Feature rows     21  FAQ
   6  Header            14 Capability       22  Forms / Contact
   7  Hero              15 Certifications   23  Footer
   8  Cards             16 Media / Figures  24  Utilities
                                            25  Motion
                                            26  Responsive
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand — ANIBA copper, sampled from the logo gradient */
  --copper:       #D26B34;
  --copper-600:   #B85826;
  --copper-700:   #97522D;
  --copper-800:   #6E3A1E;
  --copper-400:   #E28B5C;
  --copper-300:   #EFBB99;
  --copper-tint:  #FBF0E9;
  --copper-tint-2:#F6E1D3;

  /* Secondary — faded green surfaces */
  --lime:      #DFF2C9;
  --lime-2:    #EAF7DC;
  --lime-3:    #F4FAED;
  --lime-deep: #C9E6A8;
  --lime-ink:  #33471F;

  /* Ink & soft black */
  --ink:    #0F1110;
  --ink-2:  #191C1A;
  --black:  #0B0D0C;   /* dark panels, footer */
  --black-2:#141715;

  /* Neutrals — warm grey */
  /* Greys are tuned so every one clears WCAG AA (4.5:1) on all three
     light surfaces — white cards, the canvas, and the paper panels. */
  --slate:   #565C57;
  --muted:   #616861;
  --muted-2: #686F69;
  --line:    #E7E7E3;
  --line-2:  #D8D8D2;
  --paper:   #F2F2EF;   /* grey inset panels */
  --paper-2: #EAEAE6;
  --white:   #FFFFFF;
  --canvas:  #FCFCFB;

  /* Card surfaces */
  --card:            #FFFFFF;
  --card-hover:      #FFFFFF;
  --card-line:       #E7E7E3;
  --card-line-hover: #D6C0AE;

  /* Semantic */
  --bg: var(--canvas); --bg-alt: var(--paper);
  --text: var(--slate); --heading: var(--ink);
  --brand: var(--copper); --brand-600: var(--copper-600);

  /* Gradients */
  --grad-copper: linear-gradient(135deg, #D9773D 0%, #B85826 100%);
  --grad-black:  linear-gradient(165deg, #141715 0%, #0B0D0C 60%, #101311 100%);
  --grad-lime:   linear-gradient(150deg, #EAF7DC 0%, #D6EDBD 100%);
  --sheen:       linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 70%);

  /* Type */
  --font-display: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;   --space-7:3rem;   --space-8:4rem; --space-9:6rem;

  /* Radii & shadows — generous, per the reference direction */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-2xl:40px; --r-3xl:48px; --r-pill:999px;
  --shadow-xs:  0 1px 2px rgba(20,14,10,.05);
  --shadow-sm:  0 2px 10px rgba(20,14,10,.05), 0 1px 2px rgba(20,14,10,.04);
  --shadow-md:  0 14px 34px rgba(20,14,10,.09), 0 3px 8px rgba(20,14,10,.05);
  --shadow-lg:  0 36px 74px rgba(20,14,10,.13), 0 10px 24px rgba(20,14,10,.07);
  --shadow-copper: 0 14px 34px rgba(184,88,38,.26);

  /* Frame */
  --container: 1200px; --container-wide: 1480px; --nav-h: 96px;
  --panel-inset: clamp(.5rem, 1.6vw, 1.25rem);
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); max-width:100%; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.68;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul,ol { list-style: none; padding: 0; }
input,textarea,select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(210,107,52,.20); color: var(--ink); }
.skip-link { position:absolute; left:12px; top:-64px; z-index:2000; background: var(--black); color:#fff; padding:.7rem 1.1rem; border-radius: var(--r-sm); transition: top .2s var(--ease); }
.skip-link:focus { top:12px; }

/* ---------- 3. TYPOGRAPHY ---------- */
/* `pretty`, not `balance`. Balance minimises the longest line, which turns a
   heading needing 1.7 lines into three short ones — the opposite of what we
   want here. `pretty` keeps the greedy line count and only avoids orphans. */
h1,h2,h3,h4,h5 { font-family: var(--font-display); color: var(--heading); line-height:1.06; font-weight:800; letter-spacing:-.032em; text-wrap: pretty; }
.display-1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); font-weight:800; letter-spacing:-.042em; line-height:1.0; }
.display-2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing:-.036em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); letter-spacing:-.038em; }
h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing:-.035em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing:-.022em; }
h4 { font-size: 1.1rem; letter-spacing:-.014em; }
p  { text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height:1.6; color: var(--muted); font-weight:400; }
.lead.on-dark { color: #A6ADA6; }

/* Pill eyebrow — the reference's badge treatment */
.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--font-display); font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color: var(--lime-ink);
  background: var(--lime); border:1px solid var(--lime-deep);
  padding:.42rem .95rem; border-radius: var(--r-pill);
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--copper); flex:none; }
.eyebrow.on-dark { color:#E8F3DA; background: rgba(223,242,201,.12); border-color: rgba(223,242,201,.24); }
.eyebrow.on-dark::before { background: var(--copper-400); }
.eyebrow.saffron { color: var(--copper-700); background: var(--copper-tint); border-color: var(--copper-tint-2); }
.eyebrow.saffron::before { background: var(--copper); }

.text-gradient { background: linear-gradient(120deg,#D9773D,#97522D); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-saffron { color: var(--copper); }

.index-num { font-family: var(--font-display); font-weight:800; font-size:.76rem; letter-spacing:.14em; color: var(--muted-2); text-transform:uppercase; }

/* ---------- 4. LAYOUT ---------- */
.container { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: clamp(1.15rem,4vw,2rem); }
.container.wide { max-width: var(--container-wide); }
.container.narrow { max-width: 860px; }

.section { padding-block: clamp(4rem, 8vw, 8rem); position:relative; }
.section.tight { padding-block: clamp(2.5rem,5vw,4.5rem); }
/* Denser rhythm for sections that sit immediately under the hero, where a
   full-height block would read as a second landing screen. */
.section--compact { padding-block: clamp(2.75rem, 5.5vw, 5rem); }

/* Inset rounded panels — the reference's signature section device */
.section--alt {
  background: var(--paper); border-radius: var(--r-3xl);
  margin-inline: var(--panel-inset);
}
.section--ink {
  background: var(--grad-black); color:#A6ADA6;
  border-radius: var(--r-3xl); margin-inline: var(--panel-inset);
  position:relative; overflow:hidden;
}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4 { color:#fff; }
.section--ink .lead { color:#A6ADA6; }
.section--ink::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 84% 12%, rgba(210,107,52,.20), transparent 46%),
                    radial-gradient(circle at 10% 90%, rgba(223,242,201,.08), transparent 48%);
}
.section--ink > * { position:relative; z-index:1; }

.section-head { max-width: 780px; margin-bottom: clamp(2.4rem,4vw,3.6rem); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head .eyebrow { margin-bottom:1.2rem; }
.section-head h2 + .lead { margin-top:1.2rem; }

/* Top-aligned. Bottom-aligning left the two columns 8–20px apart, which reads
   as a near-miss rather than a deliberate offset. */
.section-head--split {
  max-width:none; display:grid; gap: clamp(1.2rem,3vw,3rem);
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items:start;
}
.section-head--split .lead { margin-top:0; padding-bottom:.35rem; }

.grid { display:grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }

.rule { height:1px; background: var(--line); border:0; }
.rule.on-dark { background: rgba(255,255,255,.12); }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  font-family: var(--font-display); font-weight:700; font-size:.94rem; letter-spacing:-.012em;
  padding:.8rem .85rem .8rem 1.5rem; border-radius: var(--r-pill); cursor:pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  border:1px solid transparent; white-space:nowrap;
}
/* Circular arrow affordance inside the pill */
.btn svg {
  width:30px; height:30px; flex:none; padding:7px; border-radius:50%;
  background: rgba(255,255,255,.20); transition: transform .3s var(--ease), background .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:not(:has(svg)) { padding-inline: 1.5rem; }

.btn--primary { background: var(--grad-copper); color:#fff; box-shadow: var(--shadow-copper); }
.btn--primary:hover { box-shadow: 0 20px 44px rgba(184,88,38,.34); }

/* Pale green CTA — reads as the primary action on dark panels */
.btn--saffron { background: var(--lime); color: var(--lime-ink); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn--saffron svg { background: rgba(51,71,31,.14); }
.btn--saffron:hover { background: var(--lime-deep); }

.btn--dark { background: var(--black); color:#fff; }
.btn--dark svg { background: rgba(255,255,255,.16); }

.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-xs); }
.btn--ghost svg { background: var(--paper); }
.btn--ghost:hover { border-color: var(--copper-300); color: var(--copper-700); box-shadow: var(--shadow-sm); }

.btn--outline-light { background: rgba(255,255,255,.07); color:#fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.btn--outline-light svg { background: rgba(255,255,255,.16); }
.btn--outline-light:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.55); }

.btn--sm { padding:.55rem .55rem .55rem 1.15rem; font-size:.87rem; }
.btn--sm svg { width:26px; height:26px; padding:6px; }
.btn--lg { padding:.95rem 1rem .95rem 1.8rem; font-size:1.01rem; }
.btn--lg svg { width:34px; height:34px; padding:8px; }

.link-arrow {
  display:inline-flex; align-items:center; gap:.65rem; font-family: var(--font-display);
  font-weight:700; font-size:.92rem; color: var(--ink);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow svg {
  width:28px; height:28px; padding:6px; border-radius:50%; flex:none;
  background: var(--lime); color: var(--lime-ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.link-arrow:hover { color: var(--copper-700); gap:.9rem; }
.link-arrow:hover svg { background: var(--copper); color:#fff; }
.link-arrow.on-dark { color:#fff; }
.link-arrow.on-dark svg { background: rgba(255,255,255,.14); color:#fff; }
.link-arrow.on-dark:hover svg { background: var(--copper); }

/* ---------- 6. HEADER ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index:1000;
  background: rgba(252,252,251,.80);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-scrolled, .site-header.is-open {
  background: rgba(252,252,251,.96);
  box-shadow: 0 8px 30px rgba(20,14,10,.07);
  border-bottom-color: var(--line);
}
.site-header__bar {
  max-width: var(--container-wide); margin-inline:auto;
  padding-inline: clamp(1.15rem,4vw,2rem); height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand { display:flex; align-items:center; gap:.7rem; flex:none; }
/* Scales with the viewport so the wordmark and its "Food Service" subtext
   stay legible from small phones up to large desktops. */
.brand__logo { height: clamp(40px, 3.6vw, 60px); width:auto; }
.brand__mark { height:38px; width:auto; }
.brand__text { display:flex; flex-direction:column; line-height:1.1; }
.brand__name { font-family: var(--font-display); font-weight:800; font-size:1.02rem; letter-spacing:-.02em; color: var(--ink); }
.brand__sub  { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); font-weight:600; }

.nav { display:flex; align-items:center; gap:.15rem; }
.nav__link {
  position:relative; font-family: var(--font-display); font-weight:600; font-size:.92rem;
  color: var(--ink-2); padding:.55rem .8rem; border-radius: var(--r-pill);
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--lime-ink); background: var(--lime); }
.nav__link[aria-current="page"] { color: var(--copper-700); background: var(--copper-tint); }
.nav__caret { width:12px; height:12px; transition: transform .3s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.header__actions { display:flex; align-items:center; gap:.6rem; flex:none; }

/* Mega menu */
.mega {
  position:absolute; left:0; right:0; top: var(--nav-h);
  background: rgba(255,255,255,.98); backdrop-filter: blur(20px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mega.is-open { opacity:1; visibility:visible; transform:none; }
.mega__inner {
  max-width: var(--container-wide); margin-inline:auto;
  padding: clamp(1.6rem,3vw,2.4rem) clamp(1.15rem,4vw,2rem);
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,2.1fr); gap: clamp(1.5rem,3vw,2.6rem);
}
.mega__aside { background: var(--grad-black); color:#A6ADA6; border-radius: var(--r-lg); padding:1.7rem; display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem; }
.mega__aside-t { font-family: var(--font-display); font-weight:800; color:#fff; font-size:1.3rem; letter-spacing:-.025em; margin-bottom:.6rem; }
.mega__aside p { font-size:.89rem; line-height:1.6; }
.mega__list { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:.35rem 1rem; align-content:start; }
.mega__item { display:flex; gap:.8rem; padding:.7rem .8rem; border-radius: var(--r-sm); transition: background .25s var(--ease); }
.mega__item:hover { background: var(--lime-3); }
.mega__ico { width:34px; height:34px; border-radius:10px; background: var(--lime); color: var(--lime-ink); display:grid; place-items:center; flex:none; transition: background .25s var(--ease), color .25s var(--ease); }
.mega__ico svg { width:17px; height:17px; }
.mega__item:hover .mega__ico { background: var(--copper); color:#fff; }
.mega__t { font-family: var(--font-display); font-weight:700; font-size:.91rem; color: var(--ink); display:block; }
.mega__d { font-size:.78rem; color: var(--muted); line-height:1.45; margin-top:.1rem; }

/* Simple dropdown panel — nav items carrying `children` */
.drop {
  position:absolute; top: calc(var(--nav-h) - 8px); left:50%;
  width: min(540px, calc(100vw - 3rem));
  background: rgba(255,255,255,.99); backdrop-filter: blur(20px);
  border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding:.6rem;
  display:grid; gap:.15rem;
  opacity:0; visibility:hidden; transform: translate(-50%, -10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drop.is-open { opacity:1; visibility:visible; transform: translate(-50%, 0); }
.drop .mega__item[aria-current="page"] { background: var(--copper-tint); }
.drop .mega__item[aria-current="page"] .mega__ico { background: var(--copper); color:#fff; }

/* Mobile nav */
.nav-toggle { display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); place-items:center; background: var(--white); }
.nav-toggle span { display:block; width:18px; height:2px; background: var(--ink); border-radius:2px; position:relative; transition: background .2s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; width:18px; height:2px; background: var(--ink); border-radius:2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
.nav-toggle.is-active span { background:transparent; }
.nav-toggle.is-active span::before { top:0; transform: rotate(45deg); }
.nav-toggle.is-active span::after  { top:0; transform: rotate(-45deg); }

.mobile-nav {
  position:fixed; inset: var(--nav-h) 0 0 0; z-index:999;
  background: var(--canvas); overflow-y:auto; padding: 1.5rem clamp(1.15rem,4vw,2rem) 3rem;
  transform: translateX(100%); transition: transform .4s var(--ease-out); visibility:hidden;
}
.mobile-nav.is-open { transform:none; visibility:visible; }
/* :not(.btn) so this list-link styling never touches the CTA buttons at the
   foot of the drawer — otherwise it would strip their padding, recolour
   their text and force space-between, splitting the label from its icon. */
.mobile-nav a:not(.btn), .mobile-nav summary {
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-display); font-weight:700; font-size:1.12rem; color: var(--ink);
  padding:.95rem 0; border-bottom:1px solid var(--line); cursor:pointer;
}
/* The caret is an inline SVG with no intrinsic size — without this it
   inherits the global `max-width:100%` and fills the drawer. */
.mobile-nav summary svg { width:18px; height:18px; flex:none; transition: transform .3s var(--ease); }
.mobile-nav details[open] summary { color: var(--copper-700); }
.mobile-nav details[open] summary svg { transform: rotate(180deg); }
.mobile-nav details ul { padding-bottom:.4rem; }
.mobile-nav details ul a { font-size:.98rem; font-weight:600; color: var(--slate); padding-left:1rem; }
.mobile-nav__cta { margin-top:1.6rem; display:grid; gap:.7rem; }
.mobile-nav__cta .btn { width:100%; }

/* ---------- 7. HERO ---------- */
.hero { position:relative; padding-top: calc(var(--nav-h) + clamp(2.5rem,6vw,5rem)); padding-bottom: clamp(3rem,7vw,6rem); overflow:hidden; }

/* The home hero is sized to exactly one screen so nothing is cut off and the
   visitor never has to scroll to read it. Interior sizing is driven by vh as
   well as vw, so the block shrinks to fit short laptops rather than spilling.
   svh (small viewport height) keeps mobile browser chrome from pushing the
   stat rail out of view. */
.hero--home {
  height: 100vh; height: 100svh;
  min-height: 560px;
  padding-top: var(--nav-h);
  padding-bottom: clamp(.75rem, 2vh, 1.6rem);
  display: flex; align-items: stretch;
}
.hero--home .hero__inner { display:flex; flex-direction:column; height:100%; }
.hero--home .hero__copy { flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0; }

.hero__bg { position:absolute; inset:0; z-index:0; background: var(--grad-black); }
.hero__bg::before {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 78% 20%, rgba(210,107,52,.30), transparent 52%),
                    radial-gradient(circle at 12% 84%, rgba(223,242,201,.10), transparent 55%);
}
.hero__bg img, .hero__bg video { width:100%; height:100%; object-fit:cover; }
/* Video sits above the fallback gradient but below the tint overlay, so a
   missing or still-buffering file simply shows the poster, then the brand
   gradient — never a black or empty frame. */
/* Clips are stacked and crossfaded by opacity — only the active one is
   visible, so a still-buffering clip never flashes into view. */
.hero__video { position:absolute; inset:0; z-index:1; opacity:0; transition: opacity 1.1s var(--ease); }
.hero__video.is-active { opacity:1; }
@media (prefers-reduced-motion: reduce) { .hero__video { transition:none; } }

/* WCAG 2.2.2 — any auto-playing motion over 5s needs a pause control. */
/* Top-right, below the header. The stat rail now occupies the full width of
   the hero foot, so a bottom-right control would sit on top of it. */
.hero__videoctl {
  position:absolute; right: clamp(1.15rem,4vw,2rem); top: calc(var(--nav-h) + .75rem); z-index:5;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem .55rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); color:#fff;
  font-family: var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.06em;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hero__videoctl:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.hero__videoctl svg { width:16px; height:16px; }
.hero__videoctl .ico-pause { display:inline; } .hero__videoctl .ico-play { display:none; }
.hero__videoctl.is-paused .ico-pause { display:none; } .hero__videoctl.is-paused .ico-play { display:inline; }
/* Legibility tint. Must sit ABOVE the clips (which are z-index:1) — footage
   is bright and variable, and the hero copy is white. A second vertical wash
   protects the stat rail along the bottom edge. */
.hero__bg::after {
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(105deg, rgba(11,13,12,.94) 0%, rgba(11,13,12,.88) 40%, rgba(11,13,12,.60) 72%, rgba(11,13,12,.42) 100%),
    linear-gradient(180deg, rgba(11,13,12,.30) 0%, rgba(11,13,12,0) 30%, rgba(11,13,12,.55) 100%);
}
.hero__grid-lines {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 100%);
}
.hero__inner { position:relative; z-index:2; width:100%; }
.hero--home .hero__copy { max-width: 900px; color:#fff; }
.hero__badge {
  display:inline-flex; align-items:center; gap:.6rem; padding:.42rem 1rem .42rem .5rem;
  border-radius: var(--r-pill); background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px); font-size:.74rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#EDE8E3; font-family: var(--font-display); margin-bottom:1.7rem;
}
.hero__badge img { height:22px; width:auto; }
/* Type scales on the smaller of width and height so the hero still fits a
   1366×768 laptop without clipping. */
.hero--home h1 {
  color:#fff; margin-bottom: clamp(.7rem, 1.8vh, 1.4rem);
  font-size: clamp(1.9rem, min(5vw, 6.6vh), 4.4rem);
}
/* The copy column is a flex container, which would otherwise stretch the
   inline-flex badge to the full column width. */
.hero--home .hero__badge { align-self: flex-start; margin-bottom: clamp(.7rem, 1.8vh, 1.5rem); }
.hero--home .hero__sub {
  font-size: clamp(.95rem, min(1.35vw, 2.05vh), 1.18rem);
  line-height:1.6; color:#B4BAB4; max-width:56ch;
}
.hero__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top: clamp(1rem, 2.6vh, 2.1rem); }

.hero__creds { display:flex; flex-wrap:wrap; gap:.5rem 1.8rem; margin-top: clamp(.9rem, 2.4vh, 2.2rem); }
.hero__cred { display:flex; align-items:center; gap:.55rem; font-size:.87rem; color:#A6ADA6; font-weight:500; }
.hero__cred svg { width:17px; height:17px; color: var(--copper-400); flex:none; }

.hero__rail {
  position:relative; z-index:2; flex:none;
  margin-top: clamp(1rem, 2.6vh, 2.4rem);
  border-top:1px solid rgba(255,255,255,.16);
  display:grid; grid-template-columns: repeat(4,minmax(0,1fr));
}
.hero__rail-item { padding: clamp(.7rem,1.8vh,1.4rem) 1.2rem 0 0; }
.hero__rail-item + .hero__rail-item { border-left:1px solid rgba(255,255,255,.16); padding-left:1.4rem; }
.hero__rail-n { font-family: var(--font-display); font-weight:800; font-size: clamp(1.35rem, min(2.6vw,3.4vh), 2.4rem); color:#fff; letter-spacing:-.035em; line-height:1; }
.hero__rail-l { font-size: clamp(.7rem,.95vh,.8rem); color:#959B95; margin-top:.4rem; line-height:1.35; }

/* ---- Interior page hero ----
   A self-contained rounded panel: copy and calls to action on the left,
   a framed image on the right, with a quick-facts strip underneath the
   copy so the page states its scale before the reader scrolls. */
.hero--page {
  background: var(--canvas); color: var(--slate);
  padding-top: calc(var(--nav-h) + clamp(1.4rem,3vw,2.4rem));
  padding-bottom: clamp(1.5rem,4vw,3rem);
}
.page-hero {
  position:relative; overflow:hidden;
  /* The copy column carries a 42px h1; too narrow a column forces it to
     three lines on almost every page. */
  display:grid; grid-template-columns: minmax(0,1.22fr) minmax(0,.78fr);
  gap: clamp(1.6rem,3.5vw,3rem); align-items:stretch;
  padding: clamp(1.7rem,3.2vw,2.8rem);
  border:1px solid var(--line); border-radius: var(--r-3xl);
  background: linear-gradient(128deg, #FFFFFF 0%, #FBFDF7 42%, var(--lime-3) 72%, var(--copper-tint) 100%);
}
.page-hero::before {
  content:""; position:absolute; inset:auto -80px -120px auto; width:340px; height:340px;
  background: radial-gradient(circle, rgba(210,107,52,.16), transparent 68%); pointer-events:none;
}
.page-hero__body { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; }
.page-hero .eyebrow { margin-block:1rem 1.3rem; align-self:flex-start; }
/* Sized to the column, not the page — the full h1 scale wraps to six lines here. */
/* Sized so a typical page title wraps to two lines in this column rather
   than three — at 2.9vw the first line was breaking a few pixels early. */
.page-hero h1 { color: var(--ink); margin-bottom:1.1rem; font-size: clamp(1.8rem, 2.55vw, 2.6rem); letter-spacing:-.034em; }
.page-hero__lead { color: var(--muted); font-size: clamp(1rem,1.35vw,1.13rem); line-height:1.68; max-width:58ch; }
.page-hero__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }

.page-hero__facts { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.9rem; padding-top:1.6rem; border-top:1px solid var(--line-2); }
.page-hero__facts li {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-display); font-weight:600; font-size:.81rem; color: var(--ink-2);
  background: rgba(255,255,255,.78); border:1px solid var(--line); border-radius: var(--r-pill);
  padding:.42rem .9rem;
}
.page-hero__facts li::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--copper); flex:none; }

/* The image fills the panel height rather than sitting as a small centred
   block, so the hero reads as one composed unit at any copy length. */
.page-hero__media { position:relative; z-index:1; display:flex; }
.page-hero__media .figure {
  flex:1; aspect-ratio:auto; min-height: clamp(320px, 30vw, 440px);
  border-radius: var(--r-2xl); box-shadow: var(--shadow-md);
}

/* Legal / short pages — no media column */
.page-hero--compact { grid-template-columns: minmax(0,1fr); max-width: 900px; }
.page-hero--compact .page-hero__lead { max-width: 68ch; }

.crumbs { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color: var(--muted-2); font-weight:600; }
.crumbs a:hover { color: var(--copper-700); }
.crumbs span { opacity:.6; }

/* ---------- 8. CARDS ---------- */
.card {
  background: var(--card); border:1px solid var(--card-line); border-radius: var(--r-lg);
  padding: clamp(1.5rem,2.4vw,2.1rem); position:relative; overflow:hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out), background .45s var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--card-line-hover); }
.card__ico {
  width:52px; height:52px; border-radius:16px; background: var(--lime); color: var(--lime-ink);
  display:grid; place-items:center; margin-bottom:1.4rem; flex:none;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease-out);
}
.card__ico svg { width:24px; height:24px; }
.card:hover .card__ico { background: var(--grad-copper); color:#fff; transform: scale(1.06); }
.card h3 { margin-bottom:.6rem; }
.card p { font-size:.95rem; line-height:1.65; color: var(--muted); }
.card__link { margin-top:1.2rem; display:inline-flex; }

.card--num .card__n {
  font-family: var(--font-display); font-weight:800; font-size:.76rem; letter-spacing:.14em;
  color: var(--copper); display:block; margin-bottom:1.1rem;
}
/* Pale green card — alternating surface from the reference */
.card--lime { background: var(--lime-2); border-color: var(--lime-deep); }
.card--lime .card__ico { background: rgba(255,255,255,.75); }
.card--lime p { color: #58614F; }

/* Soft-black card */
.card--dark { background: var(--black); border-color: rgba(255,255,255,.10); }
.card--dark:hover { border-color: rgba(255,255,255,.24); }
.card--dark h3 { color:#fff; }
.card--dark p { color:#9AA19A; }
.card--dark .card__ico { background: rgba(255,255,255,.10); color: var(--copper-400); }
.card--dark:hover .card__ico { background: var(--copper); color:#fff; }

.list-card { display:flex; gap:1.1rem; padding:1.3rem; border-radius: var(--r-md); border:1px solid var(--card-line); background: var(--white); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.list-card:hover { border-color: var(--card-line-hover); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.list-card__ico { width:42px; height:42px; border-radius:12px; background: var(--lime); color: var(--lime-ink); display:grid; place-items:center; flex:none; }
.list-card__ico svg { width:20px; height:20px; }
.list-card h3 { font-size:1.08rem; margin-bottom:.25rem; }
.list-card p { font-size:.88rem; color: var(--muted); line-height:1.55; }

.checklist { display:grid; gap:.85rem; }
.checklist li { display:flex; gap:.75rem; align-items:flex-start; font-size:.96rem; color: var(--slate); }
.checklist svg { width:20px; height:20px; color: var(--copper); flex:none; margin-top:.15rem; }
.checklist.on-dark li { color:#A6ADA6; }
.checklist.on-dark svg { color: var(--lime); }

.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .9rem; border-radius: var(--r-pill); background: var(--lime); color: var(--lime-ink); font-size:.78rem; font-weight:700; font-family: var(--font-display); border:1px solid var(--lime-deep); }
.pill--saffron { background: var(--copper-tint); color: var(--copper-700); border-color: var(--copper-tint-2); }
.pill--dark { background: rgba(255,255,255,.08); color:#D8DCD6; border-color: rgba(255,255,255,.16); }
.pills { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---------- 9. STATS ---------- */
.stats { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius: var(--r-xl); overflow:hidden; background: var(--white); }
.stat { padding: clamp(1.6rem,3vw,2.4rem); border-right:1px solid var(--line); position:relative; }
.stat:last-child { border-right:0; }
.stat__n { font-family: var(--font-display); font-weight:800; font-size: clamp(2rem,4vw,3.2rem); letter-spacing:-.045em; color: var(--ink); line-height:1; display:flex; align-items:baseline; }
.stat__n .suffix { color: var(--copper); }
.stat__l { margin-top:.7rem; font-size:.9rem; color: var(--muted); line-height:1.45; }
.stat__d { margin-top:.5rem; font-size:.8rem; color: var(--muted-2); line-height:1.5; }
.stats--dark { background: transparent; border-color: rgba(255,255,255,.14); }
.stats--dark .stat { border-right-color: rgba(255,255,255,.14); }
.stats--dark .stat__n { color:#fff; } .stats--dark .stat__n .suffix { color: var(--copper-400); }
.stats--dark .stat__l { color:#A6ADA6; } .stats--dark .stat__d { color:#7C837C; }

/* ---------- 10. BENTO ---------- */
.bento { display:grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(.85rem,1.6vw,1.2rem); }
.bento > * { border-radius: var(--r-xl); }
.b-6 { grid-column: span 6; } .b-4 { grid-column: span 4; } .b-8 { grid-column: span 8; }
.b-3 { grid-column: span 3; } .b-5 { grid-column: span 5; } .b-7 { grid-column: span 7; }
.b-12 { grid-column: span 12; }
.bento__panel {
  background: var(--white); border:1px solid var(--card-line); padding: clamp(1.5rem,2.4vw,2.2rem);
  display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem; overflow:hidden; position:relative;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.bento__panel:hover { border-color: var(--card-line-hover); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.bento__panel--ink { background: var(--grad-black); border-color: transparent; color:#A6ADA6; }
.bento__panel--ink h2, .bento__panel--ink h3 { color:#fff; }
.bento__panel--saffron { background: var(--grad-lime); border-color: var(--lime-deep); }
.bento__panel--saffron p { color:#58614F; }
.bento__panel--saffron .card__ico { background: rgba(255,255,255,.72); color: var(--lime-ink); }
.bento__panel--saffron .link-arrow { color: var(--lime-ink); }
.bento__panel--saffron .link-arrow svg { background: rgba(255,255,255,.72); }
.bento__panel--media { padding:0; min-height:260px; }

/* ---------- 11. INDUSTRIES ---------- */
.ind-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--r-xl); overflow:hidden; }
.ind {
  background: var(--white); padding: clamp(1.5rem,2.6vw,2.1rem); min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem;
  transition: background .4s var(--ease); position:relative; overflow:hidden;
}
.ind::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background: var(--grad-copper); transition: width .5s var(--ease-out); }
.ind:hover { background: var(--lime-3); }
.ind:hover::after { width:100%; }
.ind__ico { width:44px; height:44px; color: var(--lime-ink); display:grid; place-items:center; border-radius:13px; background: var(--lime); transition: transform .4s var(--ease-out); }
.ind__ico svg { width:22px; height:22px; }
.ind:hover .ind__ico { transform: translateY(-3px); }
.ind h3 { font-size:1.15rem; }
.ind p { font-size:.88rem; color: var(--muted); line-height:1.55; margin-top:.45rem; }
.ind__meta { font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--muted-2); font-family: var(--font-display); }

/* ---------- 12. PROCESS / TIMELINE ---------- */
.phases { display:grid; gap:0; }
.phase {
  display:grid; grid-template-columns: 110px minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1rem,3vw,2.5rem);
  padding: clamp(1.6rem,3vw,2.3rem) clamp(1rem,2vw,1.6rem);
  border-top:1px solid var(--line); align-items:start;
  transition: background .4s var(--ease), border-radius .4s var(--ease);
}
.phase:last-child { border-bottom:1px solid var(--line); }
.phase:hover { background: var(--lime-3); border-radius: var(--r-md); }
.phase__n { font-family: var(--font-display); font-weight:800; font-size: clamp(1.8rem,3vw,2.6rem); color: var(--line-2); letter-spacing:-.045em; line-height:1; transition: color .4s var(--ease); }
.phase:hover .phase__n { color: var(--copper); }
.phase h3 { margin-bottom:.5rem; }
.phase p { font-size:.95rem; color: var(--muted); }
.phase__tags { display:flex; flex-wrap:wrap; gap:.45rem; }
.phase__tags span { font-size:.76rem; padding:.34rem .75rem; border-radius: var(--r-pill); background: var(--white); border:1px solid var(--line-2); color: var(--slate); font-weight:600; }
.phase:hover .phase__tags span { border-color: var(--lime-deep); }

/* Dark variant, used inside .section--ink */
.section--ink .phase { border-top-color: rgba(255,255,255,.13); }
.section--ink .phase:last-child { border-bottom-color: rgba(255,255,255,.13); }
.section--ink .phase:hover { background: rgba(255,255,255,.04); }
.section--ink .phase__n { color: rgba(255,255,255,.22); }
.section--ink .phase:hover .phase__n { color: var(--copper-400); }
.section--ink .phase p { color:#A6ADA6; }
.section--ink .phase__tags span { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color:#D8DCD6; }
.section--ink .phase:hover .phase__tags span { border-color: rgba(223,242,201,.35); }

.timeline { position:relative; padding-left: 2.2rem; }
.timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background: linear-gradient(180deg,var(--copper),var(--line)); border-radius:2px; }
.tl-item { position:relative; padding-bottom: 2.4rem; }
.tl-item::before { content:""; position:absolute; left:-2.2rem; top:5px; width:16px; height:16px; border-radius:50%; background:var(--white); border:3px solid var(--copper); box-shadow:0 0 0 4px var(--copper-tint); }
.tl-item__y { font-family: var(--font-display); font-weight:800; color: var(--copper-700); font-size:.95rem; letter-spacing:.04em; }
.tl-item h3 { margin:.35rem 0 .4rem; font-size:1.15rem; }
.tl-item p { font-size:.93rem; color: var(--muted); }

/* ---------- 13. FEATURE ROWS ---------- */
/* ONE standard feature band, used on every page:
   copy left, image right, equal 50/50 columns, top-aligned, identical gap
   and identical image proportion. Alternating sides is deliberately not
   used — consistency reads as more considered than variety here. */
.feature { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.8rem,4vw,3.5rem); align-items:stretch; }
.feature + .feature { margin-top: clamp(3rem,6vw,5rem); }
/* Order is forced rather than inherited from markup, so a section that
   happens to list its media first still renders copy-left / image-right.
   .feature--rev is retained only so existing markup stays valid. */
.feature__body  { order:1; }
.feature__media { order:2; }
.feature--rev .feature__media { order:2; }
/* The image fills its column so the two halves are exactly equal and no
   dead space is left under a short picture. object-fit keeps the crop
   sensible whatever height the copy dictates. */
.feature__media { display:flex; flex-direction:column; }
.feature__media > .figure { flex:1 1 auto; width:100%; min-height: clamp(300px, 24vw, 460px); }
/* Tighter column gap and a shorter media panel, for feature rows that need to
   read as a band rather than a full screen. */
.feature--tight { gap: clamp(1.5rem, 3.5vw, 3rem); }
.feature--tight .feature__body h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); margin-block:.9rem 1rem; }
.feature--tight .feature__body > p { font-size:1rem; }
.feature--tight .feature__body .btn { margin-top:1.6rem; }

/* Feature headings sit in a half-width column, so they take a smaller step
   than a full-width section head — at the default h2 scale they ran to three
   lines beside their image. */
.feature__body h2 { margin-block:1.1rem 1.2rem; font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.feature__body > p { color: var(--muted); font-size:1.03rem; }
.section--ink .feature__body > p { color:#A6ADA6; }
.feature__body .checklist { margin-top:1.8rem; }
.feature__body .btn { margin-top:2rem; }

.metric-row { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:1.2rem; margin-top:2rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.metric-row .m-n { font-family: var(--font-display); font-weight:800; font-size:1.8rem; color: var(--ink); letter-spacing:-.035em; }
.metric-row .m-l { font-size:.82rem; color: var(--muted); margin-top:.25rem; }

/* ---------- 14. CAPABILITY / SPEC TABLE ---------- */
.spec { width:100%; border-collapse:collapse; font-size:.94rem; }
.spec th, .spec td { text-align:left; padding:1rem 1.15rem; border-bottom:1px solid var(--line); vertical-align:top; }
.spec thead th { font-family: var(--font-display); font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); background: var(--lime-3); border-bottom-color: var(--line-2); }
.spec tbody tr { transition: background .25s var(--ease); }
.spec tbody tr:hover { background: var(--lime-3); }
.spec td:first-child { font-weight:600; color: var(--ink); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius: var(--r-xl); background: var(--white); }

/* ---------- 15. CERTIFICATIONS ---------- */
.cert-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(.8rem,1.6vw,1.2rem); }
.cert {
  background: var(--white); border:1px solid var(--line); border-radius: var(--r-lg);
  padding:1.6rem 1.3rem; text-align:center; transition: transform .4s var(--ease-out), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.cert:hover { transform: translateY(-4px); border-color: var(--copper-300); box-shadow: var(--shadow-sm); }
.cert__seal { width:56px; height:56px; margin:0 auto .95rem; border-radius:50%; display:grid; place-items:center; background: var(--lime); color: var(--lime-ink); }
.cert__seal svg { width:24px; height:24px; }
.cert__t { font-family: var(--font-display); font-weight:800; font-size:.98rem; color: var(--ink); }
.cert__d { font-size:.79rem; color: var(--muted); margin-top:.35rem; line-height:1.5; }

.logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(1.5rem,4vw,3.5rem); }
.logo-item { font-family: var(--font-display); font-weight:800; font-size:1rem; color: var(--muted-2); opacity:.85; transition: color .3s var(--ease), opacity .3s var(--ease); }
.logo-item:hover { color: var(--copper-700); opacity:1; }

/* ---------- 16. MEDIA / FIGURES ---------- */
/* ONE image-card treatment used everywhere: same radius, same hairline,
   same shadow, same slow zoom on hover, same subtle bottom scrim so any
   overlaid caption stays legible against a bright photograph. */
.figure {
  position:relative; border-radius: var(--r-xl); overflow:hidden;
  background: var(--paper-2); isolation:isolate;
  box-shadow: var(--shadow-md); border:1px solid rgba(11,13,12,.06);
  transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}
.figure img { width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease-out); }
.figure::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(0deg, rgba(11,13,12,.30) 0%, rgba(11,13,12,.06) 26%, rgba(11,13,12,0) 55%);
}
.figure:hover { box-shadow: var(--shadow-lg); }
.figure:hover img { transform: scale(1.045); }
/* On dark panels the hairline reads as a light edge instead. */
.section--ink .figure, .bento__panel--ink .figure { border-color: rgba(255,255,255,.10); }
/* A figure already inside a card or panel must not carry a second border,
   radius and shadow — the parent owns those. */
.news .figure, .bento__panel--media .figure {
  box-shadow:none; border:0; border-radius:0;
}
.news:hover .figure, .bento__panel--media:hover .figure { box-shadow:none; }
.figure--tall { aspect-ratio: 4/5; }
.figure--wide { aspect-ratio: 16/10; }
.figure--square { aspect-ratio: 1/1; }
/* Bottom information overlay. Sits above the standard scrim. */
.figure__cap {
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:2.4rem 1.4rem 1.15rem;
  background: linear-gradient(0deg, rgba(11,13,12,.94) 0%, rgba(11,13,12,.72) 45%, rgba(11,13,12,0) 100%);
  color:#fff; font-family: var(--font-display); font-size:.92rem; font-weight:700; letter-spacing:-.01em;
}
.figure__cap small {
  display:block; font-family: var(--font-body); font-weight:500; color:#B9C0B9;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; margin-top:.28rem;
}

/* Placeholder shown until a real photograph is supplied. */
.figure.is-placeholder { background: linear-gradient(150deg, #141715 0%, #2A1B12 55%, #55291180 100%), var(--black); }
/* Hidden by opacity, never display:none — a lazy-loaded image that is
   display:none never intersects the viewport, so it would never load and the
   placeholder would never clear. */
.figure img { opacity:1; transition: opacity .5s var(--ease); }
.figure.is-placeholder img { opacity:0; }
.figure.is-placeholder::before {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.figure.is-placeholder::after {
  content: attr(data-label); position:absolute; inset:0; display:grid; place-items:center;
  padding:2rem; text-align:center; color: rgba(255,255,255,.66);
  font-family: var(--font-display); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.7;
}

/* The dot-grid flourish behind feature images has been retired: with real
   photography in every slot it competed with the picture and made the
   bands inconsistent, since only some carried it. The class is kept so
   existing markup stays valid. */
.media-frame { position:relative; }
.media-frame > * { position:relative; z-index:1; }

.gallery { display:grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(.7rem,1.4vw,1rem); }
.gallery .figure { grid-column: span 4; aspect-ratio: 4/3; }
.gallery .figure.is-lg { grid-column: span 6; aspect-ratio: 16/10; }

/* ---------- 17. PRESENCE / MAP ---------- */
.presence { display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1.6rem,4vw,3.5rem); align-items:start; }
.map-panel { position:relative; border-radius: var(--r-2xl); background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); padding: clamp(1.2rem,3vw,2rem); overflow:hidden; }
.map-panel__stage { position:relative; aspect-ratio:1/1; width:100%; }
.map-panel__stage .map-outline { width:100%; height:100%; object-fit:contain; opacity:.30; }
.map-dot { position:absolute; width:11px; height:11px; border-radius:50%; background: var(--copper); }
.map-dot::after { content: attr(data-city); position:absolute; left:16px; top:-4px; white-space:nowrap; font-size:.72rem; font-weight:700; color:#D8DCD6; font-family: var(--font-display); letter-spacing:.04em; }
.map-dot.is-hub { background: var(--lime); width:14px; height:14px; }
@keyframes pulseDot { 0%{ box-shadow:0 0 0 0 rgba(210,107,52,.5);} 70%{ box-shadow:0 0 0 16px rgba(210,107,52,0);} 100%{ box-shadow:0 0 0 0 rgba(210,107,52,0);} }
.map-dot { animation: pulseDot 3.2s var(--ease-out) infinite; }
.region-list { display:grid; gap:0; }
.region { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
/* The left column (region name + state list) takes the slack and wraps if
   needed; the hub label on the right always stays on one clean line. */
.region > div:first-child { min-width:0; }
.region:first-child { border-top:1px solid rgba(255,255,255,.12); }
.region__n { font-family: var(--font-display); font-weight:700; color:#fff; font-size:1rem; }
.region__s { font-size:.83rem; color:#8B928B; }
.region__v { font-family: var(--font-display); font-weight:800; color: var(--copper-400); font-size:1rem; white-space:nowrap; flex:none; text-align:right; }

/* ---------- 18. TESTIMONIALS ---------- */
.quote-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1rem,2vw,1.4rem); }
.quote { background: var(--lime-2); border:1px solid var(--lime-deep); border-radius: var(--r-xl); padding: clamp(1.6rem,2.6vw,2.1rem); display:flex; flex-direction:column; gap:1.4rem; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease); }
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Alternating dark card, as in the reference carousel */
.quote:nth-child(2) { background: var(--black); border-color: rgba(255,255,255,.10); }
.quote:nth-child(2) p { color:#D8DCD6; }
.quote:nth-child(2) .quote__mark { color: var(--copper-400); }
.quote:nth-child(2) .quote__by { border-top-color: rgba(255,255,255,.14); }
.quote:nth-child(2) .quote__n { color:#fff; }
.quote:nth-child(2) .quote__r { color:#8B928B; }
.quote:nth-child(2) .quote__av { background: rgba(255,255,255,.12); color: var(--lime); }
.quote__mark { font-family: var(--font-display); font-size:2.6rem; font-weight:800; color: var(--copper); line-height:.6; }
.quote p { font-size:1rem; line-height:1.7; color: var(--ink-2); flex:1; }
.quote__by { display:flex; align-items:center; gap:.85rem; padding-top:1.2rem; border-top:1px solid var(--lime-deep); }
.quote__av { width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.7); color: var(--copper-700); display:grid; place-items:center; font-family: var(--font-display); font-weight:800; font-size:.9rem; flex:none; }
.quote__n { font-family: var(--font-display); font-weight:700; font-size:.92rem; color: var(--ink); }
.quote__r { font-size:.8rem; color: var(--muted); }

/* ---------- 19. NEWS / UPDATES ---------- */
.news-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1rem,2vw,1.4rem); }
.news { display:flex; flex-direction:column; border:1px solid var(--line); border-radius: var(--r-xl); overflow:hidden; background: var(--white); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.news:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--copper-300); }
.news__media { aspect-ratio:16/9; border-radius:0; }
.news__body { padding: 1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.news__meta { display:flex; align-items:center; gap:.7rem; font-size:.74rem; color: var(--muted-2); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-family: var(--font-display); }
.news__meta .dot { width:3px; height:3px; border-radius:50%; background: var(--copper); }
.news h3 { font-size:1.1rem; line-height:1.35; }
.news p { font-size:.9rem; color: var(--muted); flex:1; }

/* ---------- 20. CAREERS ---------- */
.jobs { display:grid; gap:.8rem; }
.job { display:grid; grid-template-columns: minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.6fr) auto; gap:1rem; align-items:center; padding:1.35rem 1.6rem; border:1px solid var(--line); border-radius: var(--r-md); background: var(--white); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.job:hover { border-color: var(--copper-300); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.job__t { font-family: var(--font-display); font-weight:700; color: var(--ink); font-size:1.02rem; }
.job__m { font-size:.87rem; color: var(--muted); }
.empty-state { text-align:center; padding: clamp(2.5rem,6vw,4.5rem); border:1px dashed var(--line-2); border-radius: var(--r-xl); background: var(--lime-3); }

/* ---------- 21. FAQ ---------- */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.45rem 0; cursor:pointer; font-family: var(--font-display); font-weight:700; font-size:1.05rem; color: var(--ink); list-style:none; transition: color .25s var(--ease); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color: var(--copper-700); }
.faq summary::after { content:""; width:24px; height:24px; flex:none; background: var(--lime); border-radius:50%; transition: background .3s var(--ease), transform .3s var(--ease); }
.faq details[open] summary::after { background: var(--copper); transform: rotate(45deg); }
.faq details > div { padding-bottom:1.5rem; color: var(--muted); font-size:.98rem; line-height:1.7; max-width: 78ch; }
.faq details[open] summary { color: var(--copper-700); }

/* ---------- 22. FORMS / CONTACT ---------- */
.form { display:grid; gap:1.1rem; }
.field { display:grid; gap:.45rem; }
.field label { font-family: var(--font-display); font-weight:700; font-size:.84rem; color: var(--ink); }
.field label .req { color: var(--copper); }
.field input, .field textarea, .field select {
  width:100%; padding:.9rem 1.05rem; border-radius: var(--r-sm); border:1px solid var(--line-2);
  background: var(--white); font-size:.96rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--copper); box-shadow: 0 0 0 4px rgba(210,107,52,.14); }
.field textarea { min-height:140px; resize:vertical; }
.field__hint { font-size:.79rem; color: var(--muted-2); }
.form__status { font-size:.9rem; padding:.85rem 1rem; border-radius: var(--r-sm); display:none; }
.form__status.is-ok { display:block; background: var(--lime-2); color: var(--lime-ink); border:1px solid var(--lime-deep); }
.form__status.is-err { display:block; background: var(--copper-tint); color: var(--copper-800); border:1px solid var(--copper-tint-2); }
.form-row { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:1.1rem; }

.contact-card { background: var(--white); border:1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem,2.4vw,2.1rem); }
.contact-item { display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.contact-item:last-child { border-bottom:0; padding-bottom:0; }
.contact-item__ico { width:42px; height:42px; border-radius:12px; background: var(--lime); color: var(--lime-ink); display:grid; place-items:center; flex:none; }
.contact-item__ico svg { width:19px; height:19px; }
.contact-item__l { font-family: var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
.contact-item__v { font-size:.98rem; color: var(--ink); margin-top:.25rem; line-height:1.55; }
.contact-item__v a:hover { color: var(--copper-700); }

/* CTA band */
.cta-band { position:relative; overflow:hidden; background: var(--grad-black); border-radius: var(--r-3xl); padding: clamp(2.6rem,6vw,4.8rem); text-align:center; }
.cta-band::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 22% 18%, rgba(210,107,52,.30), transparent 50%), radial-gradient(circle at 80% 82%, rgba(223,242,201,.14), transparent 52%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; max-width: 20ch; margin-inline:auto; }
.cta-band p { color:#A6ADA6; max-width: 62ch; margin:1.2rem auto 0; font-size:1.05rem; }
.cta-band .hero__actions { justify-content:center; }

/* ---------- 23. FOOTER ---------- */
.site-footer { background: var(--black); color:#8B928B; padding-top: clamp(3rem,6vw,5rem); }
.footer__top { display:grid; grid-template-columns: minmax(0,1.5fr) repeat(4,minmax(0,.85fr)); gap: clamp(1.4rem,3vw,2.4rem); padding-bottom: clamp(2.5rem,5vw,3.5rem); }
.footer__top--contact { grid-template-columns: repeat(3,minmax(0,1fr)); }
/* Matches the header lockup's scale so the mark reads at the same weight
   at the foot of the page as it does at the top. */
.footer__brand .brand__logo { height: clamp(46px, 3.4vw, 58px); }
.footer__brand p { font-size:.92rem; line-height:1.7; margin-top:1.3rem; max-width:42ch; }
.footer__group { margin-top:1.6rem; display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1.05rem; border-radius: var(--r-pill); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:.8rem; font-weight:600; color:#D8DCD6; }
.footer__group svg { width:16px; height:16px; color: var(--copper-400); }
.footer__col h3 { color:#fff; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.2rem; font-weight:800; }
.footer__col ul { display:grid; gap:.7rem; }
.footer__col a { font-size:.9rem; color:#8B928B; transition: color .25s var(--ease), padding-left .25s var(--ease); display:inline-block; }
.footer__col a:hover { color:#fff; padding-left:4px; }
.footer__bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.6rem; border-top:1px solid rgba(255,255,255,.10); font-size:.83rem; }
.footer__legal { display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer__legal a:hover { color:#fff; }
.socials { display:flex; gap:.6rem; }
.socials a { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.socials a:hover { background: var(--copper); border-color: var(--copper); transform: translateY(-2px); }
.socials svg { width:17px; height:17px; }

/* ---------- 24. UTILITIES ---------- */
.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-5{margin-top:1.5rem}.mt-6{margin-top:2rem}.mt-7{margin-top:3rem}.mt-8{margin-top:4rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.5rem}.mb-6{margin-bottom:2rem}
.text-center{text-align:center}.flex{display:flex}.wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.max-60{max-width:60ch}.max-70{max-width:70ch}

/* ---------- 25. MOTION ---------- */
/* Scoped to html.js so that without JavaScript the content is simply
   visible rather than permanently transparent. */
.js [data-reveal] { opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible { opacity:1; transform:none; }
[data-reveal][data-delay="1"] { transition-delay:.08s }
[data-reveal][data-delay="2"] { transition-delay:.16s }
[data-reveal][data-delay="3"] { transition-delay:.24s }
[data-reveal][data-delay="4"] { transition-delay:.32s }
[data-reveal][data-delay="5"] { transition-delay:.40s }
[data-reveal].from-left  { transform: translateX(-30px); }
[data-reveal].from-right { transform: translateX(30px); }
[data-reveal].from-left.is-visible, [data-reveal].from-right.is-visible { transform:none; }

.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}

/* ---------- 26. RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .nav { display:none; }
  .nav-toggle { display:grid; }
  .header__actions .btn { display:none; }
  .mega { display:none; }
  .ind-grid, .stats, .cert-grid, .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stat:nth-child(2n) { border-right:0; }
  .stats--dark .stat { border-color: rgba(255,255,255,.14); }
  .hero__rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero__rail-item:nth-child(odd) { border-left:0; padding-left:0; }
  .hero__rail-item { border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:1.4rem; }
}
@media (max-width: 980px) {
  .grid-3, .quote-grid, .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature, .presence, .page-hero, .section-head--split { grid-template-columns: minmax(0,1fr); }
  .page-hero__media { order:-1; }
  .page-hero__media .figure { aspect-ratio: 16/9; min-height:0; }
  /* Single column: the image no longer has a copy column to match, so it
     falls back to a fixed proportion instead of stretching. */
  .feature__media > .figure { aspect-ratio: 16/10; min-height:0; flex:0 0 auto; }
  .b-8,.b-7,.b-6,.b-5,.b-4,.b-3 { grid-column: span 12; }
  .b-6.keep-half, .b-4.keep-third { grid-column: span 6; }
  .phase { grid-template-columns: 60px minmax(0,1fr); }
  .phase__tags { grid-column: 2; }
  .job { grid-template-columns: minmax(0,1fr); gap:.4rem; }
  .job .btn { justify-self:start; margin-top:.6rem; }
  .gallery .figure, .gallery .figure.is-lg { grid-column: span 6; }
  .footer__top { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  :root { --nav-h: 72px; --r-3xl: 32px; }
  body { font-size: 1rem; }
  .grid-2, .grid-3, .grid-4, .ind-grid, .cert-grid, .quote-grid, .news-grid, .form-row, .metric-row { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: minmax(0,1fr); }
  .stat { border-right:0; }
  .b-6.keep-half, .b-4.keep-third { grid-column: span 12; }
  /* Two columns, not one — a four-item stack is ~310px tall and pushes the
     headline off a one-screen hero. */
  .hero__rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero__rail-item { padding-right:.9rem; }
  .hero__rail-item:nth-child(odd) { border-left:0; padding-left:0; }
  .hero__rail-item:nth-child(even) { border-left:1px solid rgba(255,255,255,.16); padding-left:1rem; }
  .hero__rail-item:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:.85rem; }
  .hero__actions .btn { width:100%; }
  .gallery .figure, .gallery .figure.is-lg { grid-column: span 12; }
  .footer__top { grid-template-columns: minmax(0,1fr); }
  .footer__bottom { flex-direction:column; align-items:flex-start; }
  .section { padding-block: 3.5rem; }
  .cta-band { padding: 2.2rem 1.4rem; border-radius: var(--r-2xl); }
  .timeline { padding-left:1.8rem; }
  .tl-item::before { left:-1.8rem; }
  .brand__logo { height:34px; }
}

/* ---------- 26b. SHORT-VIEWPORT HERO ----------
   The home hero is committed to one screen. On a short phone the credential
   strip is the one block that can go: those three claims are stated again in
   the Food Safety section and on the capability statement, so nothing is
   lost — whereas a clipped headline would be a defect. */
@media (max-width: 820px) and (max-height: 780px) {
  .hero__creds { display:none; }
  .hero--home .hero__actions .btn { padding-block:.7rem; font-size:.9rem; }
}
@media (max-height: 620px) {
  .hero--home .hero__sub { display:none; }
}

@media print {
  .site-header, .mobile-nav, .site-footer, .hero__bg, .btn { display:none !important; }
  body { color:#000; background:#fff; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}