/* ============================================================
   NUTOAST — Refined Homepage Design System
   Keeps the existing brand language (pistachio/olive green,
   cream, nut-brown, Fenix display + DM Sans body) and elevates
   it with a disciplined token system, rhythm, and motion.
   ============================================================ */

/* ----------  DESIGN TOKENS  ---------- */
:root {
  /* Brand palette (cleaned: dropped off-brand teal/blue) */
  --cream:        #fefff7;   /* page base            */
  --cream-2:      #f6f4e6;   /* alt section          */
  --sand:         #e9e7d3;   /* muted surface/border */
  --olive-ink:    #141604;   /* primary text         */
  --olive-deep:   #33370a;   /* headings / dark green */
  --olive:        #5a6322;   /* mid olive            */
  --olive-soft:   #757f41;   /* secondary text       */
  --avocado:      #9ea700;   /* PRIMARY brand green  */
  --lime:         #e7ea6b;   /* bright accent        */
  --lime-bright:  #d7dd2e;   /* accent hover         */
  --nut:          #8e7648;   /* nut brown            */
  --nut-soft:     #b79e74;

  /* Functional */
  --bg:           var(--cream);
  --text:         var(--olive-ink);
  --muted:        #6b6f54;
  --line:         rgba(20,22,4,.10);
  --line-soft:    rgba(20,22,4,.06);

  /* Typography — display matches the logo wordmark (geometric / Futura-style) */
  --font-display: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: .72rem;
  --fs-body:    clamp(1rem, .96rem + .2vw, 1.075rem);
  --fs-lead:    clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --fs-h4:      clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --fs-hero:    clamp(2.1rem, 1.3rem + 2.3vw, 3.2rem);
  --fs-stat:    clamp(2.6rem, 1.8rem + 3vw, 4.2rem);

  /* Spacing scale (8pt) */
  --sp-1: .5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4rem;  --sp-7: 6rem;    --sp-8: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Radii / shadows / motion */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,22,4,.05), 0 4px 14px rgba(20,22,4,.05);
  --shadow-md: 0 6px 18px rgba(20,22,4,.07), 0 24px 50px rgba(20,22,4,.09);
  --shadow-lg: 0 12px 30px rgba(20,22,4,.10), 0 40px 80px rgba(45,50,8,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --maxw: 1240px;
  --tb-h: 40px;   /* utility top bar height (0 on mobile) */
}

/* ----------  RESET  ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  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; color: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; color: var(--olive-deep); }
::selection { background: var(--lime); color: var(--olive-ink); }

/* Organic grain overlay for warmth/depth */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ----------  LAYOUT  ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--cream-2); }
.section--ink { background: var(--olive-deep); color: #efeedd; }
.section--ink h2,.section--ink h3 { color: #fff; }

/* ----------  SHARED HEADER BLOCK  ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--olive-soft);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--avocado); border-radius: 2px; }
.eyebrow--center::after { content: ""; width: 26px; height: 2px; background: var(--avocado); border-radius: 2px; }
.section-head { max-width: 720px; margin-bottom: clamp(2.2rem,4vw,3.6rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin-top: 1rem; }
.section-head p { margin-top: 1rem; color: var(--muted); font-size: var(--fs-lead); }
.section--ink .section-head p { color: #c7cbab; }

/* highlight word inside a heading */
.hl { position: relative; white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .06em; height: .32em;
  background: var(--lime); z-index: -1; border-radius: 3px; transform: skewX(-6deg);
  opacity: .9;
}

/* ----------  BUTTONS  ---------- */
.btn {
  --bg-btn: var(--olive-deep); --fg-btn: var(--cream);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .92em 1.5em; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  background: var(--bg-btn); color: var(--fg-btn);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(45,50,8,.28); }
.btn:hover svg { transform: translateX(4px); }
.btn--accent { --bg-btn: var(--lime); --fg-btn: var(--olive-ink); }
.btn--accent:hover { background: var(--lime-bright); }
.btn--ghost {
  --bg-btn: transparent; --fg-btn: var(--olive-deep);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--olive-deep); background: rgba(20,22,4,.03); }
.btn--lg { padding: 1.05em 1.9em; font-size: 1rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--olive); }
.link-arrow svg { width: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   UTILITY TOP BAR (phone + social)
   ============================================================ */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: var(--tb-h);
  display: flex; align-items: center;
  background: var(--cream-2); border-bottom: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--olive-soft);
}
.top-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tb-item { display: inline-flex; align-items: center; gap: .42rem; color: var(--olive-soft); font-weight: 500; transition: color .2s var(--ease); }
.tb-item:hover { color: var(--olive-deep); }
.tb-item svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tb-phone { font-weight: 600; color: var(--olive); }
.tb-social { display: flex; align-items: center; gap: 1.15rem; }
@media (max-width: 1040px){
  .tb-social .tb-item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .tb-social { gap: .95rem; }
}
@media (max-width: 768px){ :root { --tb-h: 0px; } .top-bar { display: none; } }
/* behaviour: "Show on scroll down" (default) — bar is hidden at the very top
   and slides in once the page is scrolled; header sits flush at top until then. */
.topbar-scroll .top-bar { transform: translateY(-100%); transition: transform .4s var(--ease); will-change: transform; }
.topbar-scroll.is-scrolled .top-bar { transform: translateY(0); }
.topbar-scroll .site-header { top: 0; transition: top .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease); }
.topbar-scroll.is-scrolled .site-header { top: var(--tb-h); }
@media (prefers-reduced-motion: reduce){ .topbar-scroll .top-bar, .topbar-scroll .site-header { transition: none; } }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed; top: var(--tb-h, 0px); left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding-block: 1.1rem;
}
.site-header.scrolled {
  background: rgba(254,255,247,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(20,22,4,.05);
  padding-block: .7rem;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .55rem; }
/* leaf icon cropped from the real logo (wordmark below is clipped out) */
.brand-mark { width: 40px; height: 40px; flex: 0 0 auto;
  background: url("../images/logo.png") no-repeat -10px 0 / 60px auto; }
.brand .wordmark { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500;
  color: var(--olive-deep); letter-spacing: .005em; text-transform: lowercase; }
.nav-menu { display: flex; align-items: center; gap: .35rem; }
.nav-menu > li > a {
  display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .85rem;
  border-radius: var(--r-pill); font-weight: 500; font-size: .95rem; color: var(--olive-ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-menu > li > a:hover { background: rgba(20,22,4,.05); color: var(--olive-deep); }
.nav-menu .caret { width: 12px; opacity: .6; }
.nav-actions { display: flex; align-items: center; gap: .7rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; }
.nav-toggle span { display:block; width: 22px; height: 2px; background: var(--olive-ink); margin: 4px auto; transition: .3s var(--ease); }

@media (max-width: 1080px) {
  .nav-menu, .nav-actions .btn--ghost { display: none; }
  .nav-toggle { display: block; }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); z-index: 110;
  background: var(--cream); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .5s var(--ease-out);
  padding: 6rem 2rem 2rem; display: flex; flex-direction: column; gap: .25rem;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { padding: .9rem .5rem; font-size: 1.15rem; font-family: var(--font-display); border-bottom: 1px solid var(--line-soft); }
.mobile-nav .btn { margin-top: 1.5rem; justify-content: center; }
.nav-scrim { position: fixed; inset: 0; background: rgba(20,22,4,.4); opacity: 0; visibility: hidden; transition: .4s; z-index: 105; }
.nav-scrim.open { opacity: 1; visibility: visible; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(8rem, 12vw, 11rem); padding-bottom: clamp(3rem,6vw,5rem); overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 55% at 85% 18%, rgba(231,234,107,.45), transparent 60%),
    radial-gradient(50% 50% at 8% 90%, rgba(158,167,0,.16), transparent 60%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; }
.hero .est { margin-bottom: 1.4rem; }
.hero-lead { margin-top: 1.6rem; max-width: 33ch; color: var(--muted); font-size: var(--fs-lead); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero-trust { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.4rem; color: var(--olive-soft); font-size: .9rem; }
.hero-trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--avocado); }

.hero-visual { position: relative; }
.hero-visual .frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4/4.4; background: var(--sand);
}
.hero-visual .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; left: -1.5rem; bottom: 1.8rem; z-index: 3;
  background: var(--cream); border-radius: var(--r-md); padding: 1rem 1.2rem;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .85rem;
  border: 1px solid var(--line-soft);
}
.hero-badge .ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); font-family: var(--font-display); font-size: 1.1rem; color: var(--olive-deep); }
.hero-badge b { font-family: var(--font-display); font-size: 1.15rem; color: var(--olive-deep); display: block; line-height: 1; }
.hero-badge span { font-size: .78rem; color: var(--muted); }
.hero-leaf { position: absolute; z-index: -1; opacity: .5; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 460px; }
}

/* ---- Hero layout modes ---- */
.hero--bg { min-height: clamp(480px, 72vh, 720px);
  background-image:
    linear-gradient(100deg, var(--cream) 0%, var(--cream) 30%, rgba(254,255,247,.82) 44%, rgba(254,255,247,.18) 62%, rgba(254,255,247,0) 76%),
    var(--hero-img, none);
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
}
.hero--bg::before { display: none; }
.hero--bg .hero-grid { grid-template-columns: 1fr; }
.hero--bg .hero-copy { max-width: 600px; }
@media (max-width: 768px){
  .hero--bg { min-height: 0;
    background-image: linear-gradient(rgba(254,255,247,.74), rgba(254,255,247,.74)), var(--hero-img, none);
    background-position: center;
  }
  .hero--bg .hero-copy { max-width: none; }
}
.hero--split .hero-visual .frame { box-shadow: none; border-radius: var(--r-md); }

/* ============================================================
   STATS BAR
   ============================================================ */
/* frameless band on a soft, slowly-drifting olive gradient (base #33370A) */
.stats { position: relative; overflow: hidden; background: var(--olive-deep); }
.stats::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 50% at 22% 28%, rgba(158,167,0,.22), transparent 62%),
    radial-gradient(42% 52% at 78% 72%, rgba(231,234,107,.12), transparent 62%),
    radial-gradient(50% 60% at 55% 16%, rgba(86,99,34,.50), transparent 66%),
    radial-gradient(45% 55% at 28% 88%, rgba(20,22,4,.55), transparent 60%);
  animation: statsMesh 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes statsMesh {
  0%   { transform: translate3d(-2%, -1.5%, 0) scale(1.06) rotate(.4deg); }
  50%  { transform: translate3d(2.5%, 2%, 0) scale(1.14) rotate(-.4deg); }
  100% { transform: translate3d(-1.5%, 2.5%, 0) scale(1.08) rotate(.3deg); }
}
@media (prefers-reduced-motion: reduce){ .stats::before { animation: none; } }
.stats .wrap { position: relative; z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { background: transparent; padding: clamp(1rem,2vw,1.5rem) 1rem; text-align: center; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.14), transparent);
}
.stat .num { font-family: var(--font-display); font-size: var(--fs-stat); color: var(--lime); line-height: 1; }
.stat .num .plus { color: #fff; }
.stat .label { margin-top: .45rem; color: #c7cbab; font-size: .92rem; letter-spacing: .02em; }
@media (max-width: 680px){ .stats-grid { grid-template-columns: repeat(2,1fr); } .stat + .stat::before { display: none; } }

/* ============================================================
   INDUSTRIES — "Who Choose Nutoast?"
   ============================================================ */
#industries { padding-block: clamp(2.4rem, 4.5vw, 4rem); }
#industries .section-head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.ind-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; }
.ind-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5;
  box-shadow: var(--shadow-sm); isolation: isolate; background: var(--sand);
}
.ind-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.ind-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,22,4,.82) 0%, rgba(20,22,4,.18) 50%, transparent 78%); }
.ind-card .meta { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.3rem; z-index: 2; color: #fff; }
.ind-card .meta h3 { color: #fff; font-size: 1.45rem; }
.ind-card .meta p { font-size: .88rem; color: rgba(255,255,255,.78); margin-top: .25rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease); }
.ind-card .tag { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; background: rgba(231,234,107,.92); color: var(--olive-ink); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--r-pill); }
.ind-card:hover img { transform: scale(1.07); }
.ind-card:hover .meta p { max-height: 5rem; opacity: 1; }
@media (max-width: 900px){ .ind-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .ind-grid { grid-template-columns: 1fr;} .ind-card{aspect-ratio:16/10;} }

/* ============================================================
   WHAT WE SUPPLY
   ============================================================ */
/* three equal product cards (image + footer), uniform height */
.supply-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.supply-card {
  border-radius: var(--r-lg); background: var(--cream); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.supply-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.supply-card .ph { aspect-ratio: 1/1; overflow: hidden; background: var(--sand); }
.supply-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.supply-card:hover .ph img { transform: scale(1.06); }
.supply-card .pad { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.supply-card h3 { font-size: 1.5rem; color: var(--olive-deep); }
.supply-card p { color: var(--muted); font-size: .94rem; margin-top: .5rem; }
.supply-card .link-arrow { margin-top: auto; padding-top: 1.1rem; }
@media (max-width: 880px){ .supply-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .supply-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SPLIT BLOCKS (Application Support / Quality)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4.5rem); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 5/4; background: var(--sand); position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { font-size: var(--fs-h2); margin-top: 1rem; }
.split p.lead { margin-top: 1rem; color: var(--muted); font-size: var(--fs-lead); }
.feature-list { margin-top: 1.6rem; display: grid; gap: .9rem; }
.feature-list li { display: flex; gap: .8rem; align-items: flex-start; }
.feature-list .ic { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: var(--lime); display: grid; place-items: center; color: var(--olive-deep); }
.feature-list .ic svg { width: 16px; }
.feature-list b { color: var(--olive-deep); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; }
.feature-list span { color: var(--muted); font-size: .92rem; }
.split .btn { margin-top: 2rem; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split.reverse .split-media{ order: -1; } }

/* fade carousel (reusable; used inside .split-media) */
.nut-carousel { position: absolute; inset: 0; }
.nut-carousel__track { position: absolute; inset: 0; }
.nut-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.nut-carousel__slide.is-active { opacity: 1; }
.nut-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.nut-carousel__dots { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; display: flex; gap: .5rem; justify-content: center; }
.nut-carousel__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(20,22,4,.25); cursor: pointer; transition: width .3s var(--ease), background .3s var(--ease); }
.nut-carousel__dots button:hover { background: #fff; }
.nut-carousel__dots button.is-active { width: 26px; border-radius: 5px; background: var(--lime); }
@media (prefers-reduced-motion: reduce){ .nut-carousel__slide { transition: none; } }

/* ============================================================
   WORLDWIDE REACH
   ============================================================ */
.reach { position: relative; }
.reach-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.reach-map { position: relative; }
.reach-map img { width: 100%; opacity: .96; }
.reach-stats { display: flex; gap: 2.2rem; margin-top: 1.8rem; flex-wrap: wrap; }
.reach-stats .num { font-family: var(--font-display); font-size: 2.2rem; color: var(--lime); }
.reach-stats .label { font-size: .85rem; color: #c7cbab; }
@media (max-width: 820px){ .reach-inner { grid-template-columns: 1fr; } }

/* ============================================================
   HOW WE WORK — numbered timeline
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; position: relative; }
.steps::before { content:""; position: absolute; top: 38px; left: 7%; right: 7%; height: 2px; background: repeating-linear-gradient(to right, var(--avocado) 0 8px, transparent 8px 16px); opacity:.5; }
.step { position: relative; text-align: center; padding-top: 0; }
.step .node { width: 76px; height: 76px; margin: 0 auto 1.3rem; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-sm); position: relative; z-index: 2; transition: transform .4s var(--ease); }
.step .node img { width: 38px; height: 38px; object-fit: contain; }
.step:hover .node { transform: translateY(-5px); }
.step .idx { display: inline-block; font-family: var(--font-display); font-size: .8rem; color: var(--avocado); letter-spacing: .2em; }
.step h3 { font-size: 1.2rem; margin: .3rem 0 .5rem; }
.step p { color: var(--muted); font-size: .9rem; }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr 1fr; } .steps::before{ display:none; } }
@media (max-width: 460px){ .steps { grid-template-columns: 1fr; } }

/* ============================================================
   TRADE SHOWS — "Where You Can Meet Us"
   ============================================================ */
.shows { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.show {
  position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/4;
  box-shadow: var(--shadow-sm); background: var(--sand);
}
.show img { width:100%; height:100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.show::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(20,22,4,.78), transparent 55%); }
.show .meta { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; z-index: 2; color:#fff; }
.show .meta .city { font-family: var(--font-display); font-size: 1.2rem; }
.show .meta .date { font-size: .8rem; color: rgba(255,255,255,.8); }
.show:hover img { transform: scale(1.06); }
@media (max-width: 860px){ .shows { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-band { position: relative; overflow: clip; }
.cta-card {
  position: relative; border-radius: var(--r-lg); padding: clamp(2.5rem,6vw,5rem);
  background: linear-gradient(135deg, var(--avocado), #6f7a17 60%, var(--olive-deep));
  color: #fff; text-align: center; overflow: hidden; box-shadow: var(--shadow-lg);
}
.cta-card::before { content:""; position:absolute; inset:0; opacity:.5; background: radial-gradient(40% 60% at 80% 10%, rgba(231,234,107,.6), transparent 60%); }
.cta-card h2 { color:#fff; font-size: var(--fs-h2); position: relative; }
.cta-card p { color: rgba(255,255,255,.86); max-width: 52ch; margin: 1rem auto 0; position: relative; }
.cta-card .hero-cta { justify-content: center; margin-top: 2.2rem; position: relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--olive-ink); color: #b9bd9f; padding-top: clamp(4rem,7vw,6rem); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand .wordmark { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: .005em; text-transform: lowercase; color:#fff; }
.footer-brand p { margin-top: 1rem; max-width: 32ch; font-size: .92rem; color:#9da284; }
.footer-col h4 { color:#fff; font-family: var(--font-body); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col a { display: block; padding: .35rem 0; color:#b9bd9f; font-size: .94rem; transition: color .25s; }
.footer-col a:hover { color: var(--lime); }
.footer-sub p { font-size: .92rem; color:#9da284; margin-bottom: 1rem; }
.sub-form { display: flex; gap: .5rem; background: rgba(255,255,255,.06); padding: .4rem; border-radius: var(--r-pill); }
.sub-form input { flex: 1; background: none; border: 0; color:#fff; padding: .55rem .9rem; font: inherit; font-size: .9rem; }
.sub-form:focus-within { box-shadow: inset 0 0 0 2px var(--lime); }
.sub-form input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: var(--r-pill); }
.sub-form input::placeholder { color:#8a8e72; }
.sub-form button { background: var(--lime); color: var(--olive-ink); border-radius: var(--r-pill); padding: .6rem 1.1rem; font-weight: 600; font-size: .9rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.6rem 0; font-size: .85rem; color:#8a8e72; }
.footer-bottom a { color:#8a8e72; }
@media (max-width: 860px){ .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top { grid-template-columns: 1fr; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in { 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; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

/* ============================================================
   WORDPRESS OUTPUT HELPERS (a11y, menus, content)
   ============================================================ */
.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
  position: fixed !important; top: 1rem; left: 1rem; z-index: 1000; width: auto; height: auto;
  clip: auto; clip-path: none; padding: .7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--olive-deep); color: #fff; box-shadow: var(--shadow-md);
}
/* wp_nav_menu output keeps the same look as the hand-built lists */
.footer-menu { margin: 0; }
.nav-menu .sub-menu { display: none; } /* top-level only for now */
.entry-content > * + * { margin-top: 1.1rem; }
.entry-content h2, .entry-content h3 { margin-top: 2rem; }
.entry-content a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: var(--r-md); }
/* pagination */
.pagination, .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem;
  border-radius: var(--r-pill); background: var(--cream-2); color: var(--olive-ink); font-weight: 600;
}
.pagination .page-numbers.current { background: var(--olive-deep); color: #fff; }

/* ============================================================
   ARCHIVES / SINGLE / BLOG / SEARCH / 404
   ============================================================ */
.page-hero { position: relative; padding: clamp(7rem,11vw,9.5rem) 0 clamp(1.5rem,3vw,2.5rem); overflow: clip; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(55% 70% at 82% 0%, rgba(231,234,107,.42), transparent 60%); }
.page-hero h1 { font-size: var(--fs-h2); margin-top: .8rem; }
.page-hero p.lead { margin-top: 1rem; color: var(--muted); font-size: var(--fs-lead); max-width: 60ch; }

.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
@media (max-width:900px){ .post-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .post-grid { grid-template-columns: 1fr;} }
.post-grid .show { display: block; }

.post-meta { display: flex; gap: .8rem; align-items: center; font-size: .8rem; color: var(--olive-soft); letter-spacing: .04em; text-transform: uppercase; }
.post-meta .cat { color: var(--olive); font-weight: 700; }

.term-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.term-chips a { padding: .45rem .95rem; border-radius: var(--r-pill); background: var(--cream-2); border:1px solid var(--line-soft); font-size:.85rem; font-weight:600; color: var(--olive-ink); transition: background .25s, color .25s; }
.term-chips a:hover, .term-chips a.active { background: var(--olive-deep); color:#fff; }

.article { max-width: 760px; margin-inline: auto; }
.article .post-meta { justify-content: center; margin-bottom: 1rem; }
.article h1 { font-size: clamp(2rem,1.6rem + 1.8vw,3rem); text-align: center; }
.article .featured { margin: clamp(2rem,4vw,3rem) 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }

.single-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.single-hero .media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.single-hero .media img { width:100%; height:100%; object-fit: cover; }
@media (max-width:820px){ .single-hero { grid-template-columns: 1fr;} }

.empty-state { text-align:center; padding: clamp(3rem,8vw,6rem) 0; }
.empty-state h2 { font-size: var(--fs-h3); }

.search-form { display: inline-flex; gap: .5rem; background: var(--cream-2); padding: .4rem; border-radius: var(--r-pill); border:1px solid var(--line-soft); }
.search-form label { flex: 1; margin: 0; }
.search-form .search-field { width: 100%; border:0; background:none; padding:.55rem .9rem; font:inherit; color:var(--olive-ink); }
.search-form .search-field:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: var(--r-pill); }
.search-form .search-submit { background: var(--olive-deep); color:#fff; border-radius: var(--r-pill); padding:.55rem 1.1rem; font-weight:600; cursor:pointer; }

/* ============================================================
   INQUIRY LIST (multi-product RFQ)
   ============================================================ */
.wc-cat-filter { margin-bottom: 1.8rem; }

.nutoast-add-inquiry .ok { display: none; }
.nutoast-add-inquiry.is-added { background: var(--olive-deep); color: #fff; box-shadow: none; }
.nutoast-add-inquiry.is-added .lbl { display: none; }
.nutoast-add-inquiry.is-added .ok { display: inline; }
.nutoast-add-inquiry.is-added .ok::before { content: "✓ "; }
.nutoast-loop-actions { margin: .8rem 1.3rem 1.4rem; }
.nutoast-sample-link { margin-top: 1rem; }

.nutoast-inq-launcher {
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 95;
  width: 60px; height: 60px; border-radius: 50%; background: var(--olive-deep); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform .35s var(--ease);
}
.nutoast-inq-launcher:hover { transform: translateY(-3px); }
.nutoast-inq-launcher svg { width: 24px; height: 24px; }
.nutoast-inq-launcher .count {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--lime); color: var(--olive-ink);
  font: 700 .75rem/22px var(--font-body); text-align: center;
}
/* author display:grid above would beat the UA [hidden] rule — restore it */
.nutoast-inq-launcher[hidden] { display: none; }
.nutoast-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.nutoast-inq-scrim { position: fixed; inset: 0; background: rgba(20,22,4,.45); opacity: 0; visibility: hidden; transition: .35s; z-index: 110; }
.nutoast-inq-scrim.open { opacity: 1; visibility: visible; }
.nutoast-inq-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw,420px); z-index: 115;
  background: var(--cream); box-shadow: var(--shadow-lg); transform: translateX(100%);
  transition: transform .5s var(--ease-out); display: flex; flex-direction: column;
}
.nutoast-inq-drawer.open { transform: none; }
.nutoast-inq-head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--line-soft); }
.nutoast-inq-head h2 { font-size: 1.3rem; font-weight: 500; }
.nutoast-inq-close { font-size: 1.8rem; line-height: 1; color: var(--olive-soft); width: 40px; height: 40px; border-radius: 10px; }
.nutoast-inq-close:hover { background: rgba(20,22,4,.05); }
.nutoast-inq-items { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.5rem; }
.nutoast-inq-empty { color: var(--muted); text-align: center; padding: 2.5rem 1rem; }
.nutoast-inq-item { display: grid; grid-template-columns: 52px 1fr auto auto; gap: .8rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.nutoast-inq-item img, .nutoast-inq-item .ph { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--sand); }
.nutoast-inq-item .meta strong { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--olive-deep); display: block; }
.nutoast-inq-item .meta span { font-size: .78rem; color: var(--muted); }
.nutoast-inq-item .qty { width: 52px; padding: .4rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: center; }
.nutoast-inq-item .rm { font-size: 1.3rem; color: var(--olive-soft); width: 30px; height: 30px; border-radius: 8px; }
.nutoast-inq-item .rm:hover { background: rgba(118,18,18,.08); color: #761212; }
.nutoast-inq-form { padding: 1.3rem 1.5rem; border-top: 1px solid var(--line); background: var(--cream-2); display: grid; gap: .7rem; }
.nutoast-inq-formtitle { font-family: var(--font-display); font-size: 1.1rem; color: var(--olive-deep); margin: 0 0 .2rem; }
.nutoast-inq-form input, .nutoast-inq-form textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md); font: inherit; background: var(--cream); color: var(--olive-ink); }
.nutoast-inq-form input:focus-visible, .nutoast-inq-form textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.nutoast-inq-form .btn { justify-content: center; margin-top: .3rem; }
.nutoast-inq-msg { font-size: .88rem; min-height: 1.2em; }
.nutoast-inq-msg.ok { color: var(--olive); }
.nutoast-inq-msg.err { color: #761212; }
@media (prefers-reduced-motion: reduce){ .nutoast-inq-drawer, .nutoast-inq-scrim { transition: none; } }

/* ============================================================
   CERTIFICATIONS + CLIENT LOGOS + ABOUT FEATURE
   ============================================================ */
.about-feature { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/7; background: var(--sand); }
.about-feature img { width: 100%; height: 100%; object-fit: cover; }

.cert-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.cert-badge {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
  min-width: 130px; padding: 1.5rem 1.6rem; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); background: var(--cream); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cert-badge:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cert-badge img { height: 50px; width: auto; max-width: 120px; object-fit: contain; }
.cert-badge .cert-mark { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--olive-deep); }
.cert-badge .cert-mark svg { width: 26px; height: 26px; }
.cert-badge .cert-name { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--olive-deep); letter-spacing: .01em; }

.client-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem,4vw,3rem); margin-top: clamp(2rem,4vw,3rem); opacity: .72; filter: grayscale(1); }
.client-logos img { height: 38px; width: auto; }
@media (max-width: 520px){ .cert-badge { min-width: 0; flex: 1 1 40%; } }

/* scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0);
  transform-origin: 0 50%; background: linear-gradient(90deg, var(--avocado), var(--lime));
  z-index: 200; will-change: transform; pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ .scroll-progress { display: none; } }

/* inquiry drawer — embedded FluentForm container */
.nutoast-inq-ff { padding: 1.3rem 1.5rem; border-top: 1px solid var(--line); background: var(--cream-2); }
.nutoast-inq-ff .nutoast-inq-formtitle { font-family: var(--font-display); font-size: 1.1rem; color: var(--olive-deep); margin: 0 0 .6rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tm-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
@media (max-width:900px){ .tm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:600px){ .tm-grid { grid-template-columns: 1fr; } }
.tm-card {
  margin: 0; background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 1.8rem; display: flex; flex-direction: column; gap: 1rem;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); position: relative; overflow: hidden;
}
.tm-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tm-card::before { content: "\201C"; position: absolute; top: .2rem; right: 1.2rem; font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--lime); opacity: .5; }
.tm-stars { display: flex; gap: 2px; color: var(--sand); font-size: 1rem; }
.tm-stars .on { color: #e0b400; }
.tm-card blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--olive-ink); position: relative; }
.tm-author { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.tm-ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--sand); display: grid; place-items: center; }
.tm-ava img { width: 100%; height: 100%; object-fit: cover; }
.tm-ava--ph { background: var(--olive-deep); color: var(--lime); font-family: var(--font-display); font-size: 1.2rem; }
.tm-meta strong { display: block; font-family: var(--font-display); font-weight: 500; color: var(--olive-deep); }
.tm-meta span { font-size: .82rem; color: var(--muted); }

/* ============================================================
   PRODUCT COMPARE (bar is global; table on the compare page)
   ============================================================ */
.nutoast-compare-loop { margin: -.3rem 1.3rem 1.2rem; }
.nutoast-add-compare.btn-mini { background: none; box-shadow: none; padding: .2rem 0; font-size: .82rem; font-weight: 600; color: var(--olive-soft); display: inline-flex; align-items: center; gap: .3rem; border-radius: 0; }
.nutoast-add-compare.btn-mini::before { content: "\21C4"; font-size: .95rem; }
.nutoast-add-compare.btn-mini:hover { color: var(--olive-deep); transform: none; }
.nutoast-add-compare .ok { display: none; }
.nutoast-add-compare.is-added .lbl { display: none; }
.nutoast-add-compare.is-added .ok { display: inline; }
.nutoast-add-compare.btn-mini.is-added { color: var(--olive); }

.nutoast-compare-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: clamp(1rem,3vw,1.5rem); z-index: 96;
  display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem .7rem 1rem;
  background: var(--olive-ink); color: #fff; border-radius: var(--r-pill); box-shadow: var(--shadow-lg);
  max-width: calc(100% - 2rem);
}
.nutoast-compare-bar[hidden] { display: none; }
.nutoast-compare-bar.is-max { animation: nutoastShake .4s; }
@keyframes nutoastShake { 25%{ transform: translateX(-50%) translateX(-6px); } 75%{ transform: translateX(-50%) translateX(6px); } }
.nutoast-compare-items { display: flex; gap: .5rem; }
.nutoast-cmp-thumb { position: relative; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.nutoast-cmp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nutoast-cmp-thumb .rm { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--olive-ink); font-size: 12px; line-height: 1; display: grid; place-items: center; }
.nutoast-compare-actions { display: flex; align-items: center; gap: .6rem; }
.nutoast-cmp-clear { color: #b9bd9f; font-size: .85rem; }
.nutoast-cmp-clear:hover { color: #fff; }
@media (max-width:520px){ .nutoast-compare-bar { flex-direction: column; gap: .6rem; border-radius: var(--r-lg); } }

.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-size: .92rem; }
.cmp-table thead th { vertical-align: bottom; border-bottom: 2px solid var(--line); }
.cmp-table tbody th[scope="row"] { width: 22%; color: var(--olive-soft); font-weight: 600; background: rgba(20,22,4,.025); }
.cmp-head { display: block; }
.cmp-head img { width: 100%; max-width: 150px; aspect-ratio: 16/12; object-fit: cover; border-radius: var(--r-md); }
.cmp-name { display: block; margin-top: .6rem; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--olive-deep); }
.cmp-cta-row td { border-bottom: 0; }

/* currency switcher slot (header) */
.nutoast-currency { display: flex; align-items: center; font-size: .9rem; color: var(--olive-ink); }
.nutoast-currency select { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--cream); }
@media (max-width: 1080px){ .nutoast-currency { display: none; } }

/* certificate showcase — unframed, full-width fan on the cream ground */
#quality .cert-showcase { margin-top: clamp(1.4rem, 3vw, 2.6rem); }
#quality .cert-showcase img { display: block; width: 100%; max-width: 1180px; height: auto; margin-inline: auto; }