/* =========================================================
   PRIME FOODS - Design System v2 (scroll-driven)
   Palette from the logo: Saffron Gold on Espresso Brown
   ========================================================= */

:root {
  --espresso:      #201704;
  --espresso-2:    #2C2008;
  --espresso-3:    #3B2C0E;
  --gold:          #F4C430;
  --gold-deep:     #D9A520;
  --gold-soft:     #F7D566;
  --gold-ink:      #6E5109;   /* accessible gold for TEXT on light surfaces (~5.6:1 on cream) */

  --cream:         #FBF6EA;
  --cream-2:       #F4EAD4;
  --cream-3:       #EBDCBE;

  --ink:           #2A2011;
  --ink-soft:      #6B5D45;
  --paper:         #FFFDF8;
  --on-dark:       #F3E9D2;
  --on-dark-soft:  #C4B491;

  --radius:        14px;
  --radius-sm:     10px;
  --shadow:        0 18px 50px -20px rgba(20,14,2,.55);
  --shadow-soft:   0 12px 34px -18px rgba(20,14,2,.4);
  --maxw:          1180px;
  --gutter:        clamp(20px, 5vw, 56px);
  --serif:         "Playfair Display", Georgia, serif;
  --sans:          "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ease:          cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream);
  line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.section--dark { background: var(--espresso); color: var(--on-dark); }
.section--cream { background: var(--cream); }
.section--panel { background: var(--cream-2); }

.eyebrow {
  font: 600 12.5px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-ink); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.section--dark .eyebrow { color: var(--gold); }
.eyebrow::before { content:""; width: 30px; height: 2px; background: currentColor; opacity: .8; }

.section-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(30px, 4.6vw, 52px); text-wrap: balance; }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; margin-top: 16px; text-wrap: pretty; }
.section--dark .section-head p { color: var(--on-dark-soft); }
.section--dark .section-head h2 { color: #fff; }
.center { text-align: center; margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px;
  font: 600 15px/1 var(--sans); border: 1.5px solid transparent; transition: all .25s var(--ease); white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn--gold { background: var(--gold); color: #2A1E04; box-shadow: 0 10px 24px -12px rgba(244,196,48,.8); }
.btn--gold:hover { background: var(--gold-deep); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.04); color: var(--gold); border-color: rgba(244,196,48,.55); backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(244,196,48,.1); }
.btn--dark { background: var(--espresso); color: var(--gold); }
.btn--dark:hover { background: var(--espresso-2); transform: translateY(-2px); }
.btn--wa { background: #25D366; color: #05391b; }
.btn--wa:hover { background: #1fbb5a; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); z-index: 90; transition: width .1s linear; }

/* =========================================================
   Header
   ========================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  background: transparent; transition: background .35s var(--ease), border-color .35s, box-shadow .35s;
  border-bottom: 1px solid transparent;
}
.header.solid { background: rgba(28,20,5,.92); backdrop-filter: blur(12px); border-bottom-color: var(--espresso-3); box-shadow: 0 8px 30px -20px #000; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { height: 34px; width: auto; display: block; }
.brand-word { height: 15px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font: 500 14.5px/1 var(--sans); color: var(--on-dark); padding: 8px 0; position: relative; transition: color .2s; }
.nav-links a::after { content:""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--gold); transition: width .25s var(--ease); }
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; padding: 6px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--gold); margin: 5px 0; transition: .3s var(--ease); }

/* =========================================================
   SCROLLYTELLING HERO (scroll-scrubbed video)
   ========================================================= */
.scrolly { position: relative; height: 240vh; background: var(--espresso); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: var(--espresso); will-change: contents;
}
.stage-scrim {
  position: absolute; inset: 0;
  background:
    /* soft spotlight ONLY behind the centred text: keeps video vivid at the edges */
    radial-gradient(66% 50% at 50% 46%, rgba(12,8,1,.42) 0%, rgba(12,8,1,.16) 55%, transparent 78%),
    /* gentle fades so the nav (top) and trust strip (bottom) blend cleanly */
    linear-gradient(180deg, rgba(12,8,1,.36) 0%, transparent 22%, transparent 66%, rgba(18,12,2,.8) 100%);
}
.stage-grain { position: absolute; inset: 0; background-image: radial-gradient(rgba(244,196,48,.10) 1px, transparent 1.5px); background-size: 28px 28px; opacity: .35; mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent); pointer-events: none; }
.stage-content {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center;
  color: #fff; text-align: center; padding: 0 var(--gutter);
}
.stage-content .inner { max-width: 960px; margin: 0 auto; }
.hero-eyebrow { color: var(--gold); font: 600 13px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; margin-bottom: 26px; }
.hero-h1 { text-wrap: balance; font-size: clamp(46px, 9vw, 118px); line-height: .95; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6), 0 8px 44px rgba(0,0,0,.7); letter-spacing: -.02em; }
.hero-h1 .accent { color: var(--gold); font-style: italic; }
.hero-sub { font-size: clamp(16px, 2vw, 21px); color: #fff; max-width: 620px; margin: 28px auto 0; text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 2px 22px rgba(0,0,0,.8); }
.hero-sub strong { color: var(--gold-soft); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 38px; }
.scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 4; color: var(--gold-soft); font: 600 11px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-cue .mouse { width: 22px; height: 34px; border: 2px solid var(--gold-soft); border-radius: 12px; position: relative; }
.scroll-cue .mouse::after { content:""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 6px; background: var(--gold-soft); border-radius: 2px; animation: wheel 1.6s var(--ease) infinite; }
@keyframes wheel { 0%{opacity:0; transform: translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform: translate(-50%,10px);} }

/* Trust strip */
.trust-strip { position: relative; z-index: 2; border-top: 1px solid var(--espresso-3); background: var(--espresso-2); color: var(--on-dark-soft); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; padding-block: 20px; font: 600 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.trust-strip span { display: inline-flex; align-items: center; gap: 10px; }
.trust-strip span::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* =========================================================
   Brands
   ========================================================= */
.brands-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.brand-card {
  position: relative; border-radius: var(--radius); overflow: hidden; padding: 44px 40px; min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end; background: var(--espresso-2);
  border: 1px solid var(--espresso-3); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.brand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.brand-card .bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .46; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.brand-card:hover .bg { opacity: .6; transform: scale(1.06); }
.brand-card::after { content:""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(32,23,4,.24) 0%, rgba(32,23,4,.55) 42%, rgba(32,23,4,.88) 100%); }
.brand-card > * { position: relative; z-index: 2; }
.brand-card .kicker { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.brand-card h3 { font-size: clamp(28px, 3.5vw, 40px); color: #fff; margin-bottom: 14px; }
.brand-logo { display: inline-block; align-self: flex-start; background: #fff; border-radius: 12px; padding: 13px 18px; margin-bottom: 16px; box-shadow: 0 12px 28px -14px rgba(0,0,0,.6); }
.brand-logo img { height: 46px; width: auto; display: block; }
@media (max-width: 620px) { .brand-logo img { height: 40px; } }
.brand-card p { color: var(--on-dark-soft); font-size: .98rem; margin: 0 0 22px; }
.brand-card .link { color: var(--gold); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; }
.brand-card .link svg { width: 16px; transition: transform .25s var(--ease); }
.brand-card:hover .link svg { transform: translateX(5px); }

/* Brand portfolio chips (inside brand cards) */
.brand-list { list-style: none; display: flex; flex-wrap: wrap; gap: 7px 8px; margin: 0 0 20px; padding: 0; }
.brand-list li {
  font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-soft);
  background: rgba(244,196,48,.1); border: 1px solid rgba(244,196,48,.24); padding: 6px 11px; border-radius: 999px;
}

/* =========================================================
   Our Story (heritage timeline)
   ========================================================= */
.story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 72px); align-items: start; }
.story-copy p { color: var(--on-dark-soft); margin: 0 0 18px; }
.story-copy p.promise {
  color: var(--gold-soft); font-family: var(--serif); font-style: italic;
  font-size: 1.2rem; line-height: 1.55; margin-top: 26px;
  border-left: 2px solid rgba(244,196,48,.45); padding-left: 20px;
}
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 34px 32px; border-left: 1px solid var(--espresso-3); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(244,196,48,.16);
}
.t-year { display: block; font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.timeline h3 { font-family: var(--serif); font-size: 1.14rem; color: #fff; margin-bottom: 7px; }
.timeline p { font-size: .92rem; color: var(--on-dark-soft); margin: 0; line-height: 1.55; }

/* =========================================================
   Quality & Certifications
   ========================================================= */
.cert-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.cert-tile {
  background: #fff; border: 1px solid rgba(42,32,17,.09); border-radius: 14px;
  /* Landscape: the real marks run 1.0 to 2.8 aspect, so a square tile
     starved the wide ones (FSSAI, MSME, IEC) of width. */
  width: 172px; height: 132px; display: grid; place-items: center; padding: 20px;
  box-shadow: 0 12px 28px -20px rgba(20,14,2,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cert-tile:hover { transform: translateY(-4px); border-color: rgba(244,196,48,.55); box-shadow: var(--shadow-soft); }
.cert-tile img {
  /* Explicit px caps, not percentages: in a grid tile a percentage max-height
     resolves against an auto row and does not constrain, letting the square
     seals eat the padding. Capping height also normalizes optical weight,
     otherwise the round ISO/HACCP seals render ~2.7x the area of the wide
     FSSAI/MSME/IEC marks. */
  max-width: 132px; max-height: 88px;
  width: auto; height: auto; object-fit: contain; display: block;
}
.cert-copy { max-width: 760px; margin: clamp(36px, 5vw, 52px) auto 0; text-align: center; }
.cert-copy h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 16px; }
.cert-copy p { color: var(--ink-soft); font-size: 1.04rem; }

/* =========================================================
   Parallax band
   ========================================================= */
.parallax { position: relative; height: clamp(360px, 60vh, 620px); overflow: hidden; display: grid; place-items: center; text-align: center; color: #fff; }
.parallax-img { position: absolute; top: -18%; left: 0; width: 100%; height: 136%; background-size: cover; background-position: center; will-change: transform; z-index: 0; }
.parallax::after { content:""; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(76% 66% at 50% 50%, rgba(20,14,2,.66) 0%, rgba(20,14,2,.44) 62%, rgba(20,14,2,.34) 100%); }
.parallax .p-inner { position: relative; z-index: 2; max-width: 760px; padding: 0 var(--gutter); }
.parallax .p-inner .eyebrow { color: var(--gold); justify-content: center; }
.parallax h2 { font-size: clamp(28px, 4.4vw, 50px); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 6px 34px rgba(0,0,0,.6); }
.parallax p { color: rgba(255,255,255,.94); margin-top: 16px; font-size: 1.08rem; text-shadow: 0 2px 10px rgba(0,0,0,.8), 0 4px 22px rgba(0,0,0,.6); }
.parallax .quote { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3.2vw, 34px); color: var(--gold-soft); text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 6px 30px rgba(0,0,0,.55); }

/* =========================================================
   Products
   ========================================================= */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-btn { padding: 10px 20px; border-radius: 999px; border: 1.5px solid rgba(42,32,17,.16); background: transparent; color: var(--ink-soft); font: 600 14px/1 var(--sans); transition: all .2s var(--ease); }
.filter-btn:hover { border-color: var(--gold-deep); color: var(--ink); }
.filter-btn.is-active { background: var(--espresso); color: var(--gold); border-color: var(--espresso); }

.product-grid { display: block; }
.product-card {
  background: var(--paper); border: 1px solid rgba(42,32,17,.08); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, opacity .25s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: rgba(244,196,48,.6); }
.product-thumb { aspect-ratio: 1/1; display: grid; place-items: center; padding: 8px; overflow: hidden; }
.product-thumb.light { background: radial-gradient(120% 120% at 50% 15%, #fff, var(--cream-2)); }
.product-thumb.dark  { background: radial-gradient(120% 120% at 50% 10%, #34260E, #201704); }
.product-thumb img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(20,14,2,.42)); transition: transform .45s var(--ease); }
.product-card:hover .product-thumb img { transform: scale(1.06) translateY(-2px); }
.product-body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.product-cat { font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.product-name { font: 600 17px/1.2 var(--serif); color: var(--ink); }
.product-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.product-actions { display: flex; gap: 8px; margin-top: 12px; }
.chip { flex: 1; text-align: center; padding: 9px 10px; border-radius: 8px; font: 600 13px/1 var(--sans); transition: all .2s var(--ease); }
.chip--enquire { background: var(--espresso); color: var(--gold); }
.chip--enquire:hover { background: var(--espresso-2); }
.chip--wa { background: #EDF7EF; color: #0A5C30; display:flex; align-items:center; justify-content:center; gap:6px; }
.chip--wa:hover { background: #dcefe1; }
.chip--wa svg { width: 15px; height: 15px; }
.product-note { margin-top: 34px; text-align: center; color: var(--ink-soft); font-size: 14px; }

/* Hover zoom preview box (desktop) */
.product-thumb { cursor: zoom-in; }
.zoom-preview { position: fixed; top: 0; left: 0; z-index: 85; pointer-events: none; opacity: 0; transition: opacity .16s var(--ease); will-change: transform; }
.zoom-preview.show { opacity: 1; }
.zoom-inner { width: 380px; padding: 24px; border-radius: 18px; background: var(--paper); border: 1px solid rgba(244,196,48,.55); box-shadow: 0 34px 70px -22px rgba(20,14,2,.7); text-align: center; transition: transform .16s var(--ease); }
.zoom-preview.on-dark .zoom-inner { background: radial-gradient(120% 120% at 50% 12%, #34260E, #1B1305); border-color: rgba(244,196,48,.4); }
.zoom-inner img { width: 100%; height: 310px; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(20,14,2,.5)); }
.zoom-cap { display: block; margin-top: 12px; font: 600 16px/1.25 var(--serif); color: var(--ink); }
.zoom-sub { display: block; margin-top: 3px; font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.zoom-preview.on-dark .zoom-cap { color: var(--gold-soft); }
.zoom-preview.on-dark .zoom-sub { color: var(--gold); }

/* =========================================================
   Craft / Story
   ========================================================= */
.craft-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.craft-copy p { color: var(--on-dark-soft); margin: 0 0 18px; }
.craft-copy p.promise { color: var(--gold-soft); font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.5; }
.pillars { display: grid; gap: 18px; }
.pillar { display: flex; gap: 18px; padding: 22px; border: 1px solid var(--espresso-3); border-radius: var(--radius-sm); background: var(--espresso-2); }
.pillar .num { font: 700 18px/1 var(--serif); color: var(--gold); }
.pillar h4 { color: #fff; font-size: 1.15rem; margin-bottom: 6px; }
.pillar p { color: var(--on-dark-soft); font-size: .93rem; margin: 0; }
.process { margin-top: clamp(44px, 6vw, 72px); border-top: 1px solid var(--espresso-3); padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; justify-content: space-between; }
.process .step { display: inline-flex; align-items: center; gap: 12px; color: var(--on-dark); font: 600 14px/1 var(--sans); letter-spacing: .04em; }
.process .step .dot { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-size: 13px; }
.process .arrow { color: var(--gold-deep); opacity: .6; }

/* Capabilities */
/* Capabilities: warm "craft" cards (round gold spice-badges, no matrix, no numbers) */
.section--business { background: radial-gradient(130% 100% at 50% -5%, #33260C 0%, var(--espresso) 52%, #1A1204 100%); }
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cap {
  position: relative; text-align: center;
  background: linear-gradient(180deg, rgba(60,45,15,.5), rgba(38,28,9,.5));
  border: 1px solid rgba(244,196,48,.15); border-radius: 18px; padding: 36px 24px 32px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.cap:hover {
  transform: translateY(-6px); border-color: rgba(244,196,48,.42);
  box-shadow: 0 26px 52px -26px rgba(244,196,48,.28), 0 12px 30px -20px #000;
  background: linear-gradient(180deg, rgba(78,58,20,.55), rgba(48,36,12,.55));
}
.cap .ico {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center;
  color: var(--gold);
  background: radial-gradient(circle at 50% 32%, rgba(244,196,48,.24), rgba(244,196,48,.05));
  border: 1px solid rgba(244,196,48,.32);
  box-shadow: inset 0 1px 0 rgba(244,196,48,.25), 0 8px 20px -12px rgba(244,196,48,.3);
  transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.cap .ico svg { width: 30px; height: 30px; }
.cap:hover .ico { transform: scale(1.08) rotate(-4deg); color: #3A2A08;
  background: radial-gradient(circle at 50% 32%, var(--gold-soft), var(--gold-deep)); }
.cap h4 { font-family: var(--serif); font-size: 1.18rem; margin-bottom: 9px; color: #fff; }
.cap p { font-size: .92rem; color: var(--on-dark-soft); margin: 0 auto; max-width: 22ch; line-height: 1.55; }
.cap-cta { text-align: center; margin-top: 48px; }

/* Our Customers (client logo wall) */
.client-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.client-tile {
  background: #fff; border: 1px solid rgba(42,32,17,.09); border-radius: 12px;
  height: 104px; display: grid; place-items: center; padding: 14px 20px;
  box-shadow: 0 10px 24px -18px rgba(20,14,2,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.client-tile img { max-height: 54px; max-width: 82%; object-fit: contain; opacity: .92; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.client-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(244,196,48,.55); }
.client-tile:hover img { opacity: 1; transform: scale(1.04); }
@media (max-width: 1000px) { .client-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .client-grid { grid-template-columns: repeat(3, 1fr); } .client-tile { height: 92px; } }
@media (max-width: 460px)  { .client-grid { grid-template-columns: repeat(2, 1fr); } }

/* Why / counters */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); max-width: 900px; margin-inline: auto; }
.why-item { text-align: center; padding: 10px; }
.why-item .big { font: 700 clamp(38px,5vw,52px)/1 var(--serif); color: var(--gold); margin-bottom: 10px; }
.why-item h4 { font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.why-item p { font-size: .88rem; color: var(--on-dark-soft); margin: 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 70px); align-items: start; }
.contact-info .detail { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(42,32,17,.1); }
.contact-info .detail:last-child { border-bottom: 0; }
.contact-info .ico { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--espresso); color: var(--gold); display: grid; place-items: center; }
.contact-info .ico svg { width: 19px; height: 19px; }
.contact-info .label { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 5px; }
.contact-info .val { color: var(--ink); font-size: 1rem; }
.contact-info .val a:hover { color: var(--gold-ink); text-decoration: underline; }
.wa-cta { margin-top: 26px; }
.form { position: relative; background: var(--paper); border: 1px solid rgba(42,32,17,.09); border-top: 3px solid var(--gold); border-radius: 5px 5px var(--radius) var(--radius); padding: clamp(26px, 4vw, 44px); box-shadow: 0 34px 70px -34px rgba(20,14,2,.5); }
.form-title { font: 600 1.2rem/1.1 var(--serif); color: var(--ink); margin-bottom: 4px; }
.form-lead { font-size: .9rem; color: var(--ink-soft); margin-bottom: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font: 700 10.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 9px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--cream-3); border-radius: 10px; font: 400 16px/1.4 var(--sans); color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: #8a7a58; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold-deep); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(244,196,48,.2); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E5109' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.field textarea { resize: vertical; min-height: 118px; }
.form .btn { width: 100%; justify-content: center; margin-top: 8px; padding: 15px 26px; }
.form-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 16px; }

/* Footer */
.footer { background: #17110333; background: #171103; color: var(--on-dark-soft); padding-block: clamp(48px, 7vw, 80px) 30px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px 28px; }
.footer .brand { margin-bottom: 16px; gap: 11px; flex-wrap: nowrap; max-width: 100%; }
.footer .brand-mark { height: 34px; }
.footer .brand-word { height: 14px; }
.footer .tag { font-family: var(--serif); color: var(--gold-soft); font-size: 1.05rem; max-width: 260px; }
.footer h5 { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer ul a, .footer ul li { font-size: 14px; color: var(--on-dark-soft); }
.footer ul a:hover { color: var(--gold); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--espresso-3); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; }

/* =========================================================
   Reveal animations (staggered)
   ========================================================= */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.has-js .reveal { opacity: 0; transform: translateY(30px); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.has-js .stagger > * { opacity: 0; transform: translateY(28px); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.15s}
.stagger.in > *:nth-child(4){transition-delay:.20s}
.stagger.in > *:nth-child(5){transition-delay:.25s}
.stagger.in > *:nth-child(6){transition-delay:.30s}
.stagger.in > *:nth-child(7){transition-delay:.35s}
.stagger.in > *:nth-child(8){transition-delay:.40s}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  .scroll-cue .mouse::after { animation: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-cta .btn { padding: 10px 18px; font-size: 13.5px; }
  .nav-toggle { display: block; }
  .header.open { background: rgba(28,20,5,.98); backdrop-filter: blur(12px); }
  .header.open .nav-links { display: flex; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; background: var(--espresso); padding: 20px var(--gutter) 30px; gap: 6px; border-bottom: 1px solid var(--espresso-3); }
  .header.open .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--espresso-3); }
  .brands-grid, .craft-grid, .contact-grid, .story-grid { grid-template-columns: 1fr; }
  .cert-tile { width: 148px; height: 114px; padding: 15px; }
  .cert-tile img { max-width: 116px; max-height: 76px; }
  .form-row { grid-template-columns: 1fr; }
  .process { justify-content: flex-start; gap: 14px; }
  /* Mobile hero: static image, no scrub video. The per-frame seeking the scrub
     needs is throttled on phones and stutters, so the video is dropped here and
     the stage shows a vibrant still of the spice blast instead. */
  .scrolly { height: auto; }
  .stage { position: relative; height: 100svh; min-height: 540px; }
  /* The still sits on the stage as the resting layer. The autoplay video plays
     on top of it (main.js), fading in when it starts and out when it ends, so it
     settles onto this image. A blocked autoplay just leaves the still showing. */
  .stage {
    background-image:
      linear-gradient(180deg, rgba(12,8,1,.34) 0%, transparent 30%, transparent 60%, rgba(18,12,2,.72) 100%),
      url('../video/hero-mobile.jpg');
    background-size: cover;
    background-position: 50% 42%;
  }
  .stage-video { display: block; opacity: 0; transition: opacity 1s var(--ease); }
  .stage-video.is-live { opacity: 1; }
  .stage-video.is-settled { opacity: 0; }
  .stage-content { opacity: 1 !important; }
  .hero-actions { opacity: 1 !important; }
  .scroll-cue { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .why-item p { display: none; }
  .why-item .big { font-size: clamp(30px, 8vw, 40px); }
  .why-item h4 { font-size: .84rem; line-height: 1.3; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 430px) {

}

/* =========================================================
   Focus, press and touch states
   Design review: the only :focus rule in the sheet was on form
   controls, so every nav link, button, pill and chip fell back to
   the UA outline. Hover transforms were also unguarded, which
   latches them on after a tap on touch devices.
   ========================================================= */
:where(a, button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--cream :focus-visible, .section--panel :focus-visible,
.product-card :focus-visible, .form :focus-visible { outline-color: var(--gold-ink); }

.btn:active, .chip:active, .filter-btn:active { transform: translateY(1px) scale(.985); }

/* Hover effects only where a real pointer exists */
@media (hover: none), (pointer: coarse) {
  .brand-card:hover .bg { opacity: .46; transform: none; }
  .product-card:hover { transform: none; box-shadow: none; border-color: rgba(42,32,17,.08); }
  .product-card:hover .product-thumb img { transform: none; }
  .client-tile:hover img { opacity: .92; transform: none; }
}

/* Filter transition: cards fade rather than snapping in one frame */
.product-card[hidden] { display: none; }
.product-grid.is-filtering .product-card { opacity: 0; }

/* =========================================================
   Small-screen fixes
   ========================================================= */
@media (max-width: 620px) {
  /* Centered ledes ran 8 to 10 ragged lines at phone width */
  .section-head.center p { text-align: left; }
  /* Process chain kept inline arrows, leaving each wrapped row
     ending in an arrow pointing at nothing */
  .process { flex-direction: column; align-items: flex-start; gap: 10px; }
  .process .arrow { display: none; }
}
@media (max-width: 480px) {
  /* Header: wordmark + CTA + burger exceeded 390px, so the gold
     pill rendered on top of the wordmark and it read "PRIME FOO" */
  .brand-word { display: none; }
  .nav-cta .btn { padding: 9px 14px; font-size: 13px; }
  /* Product actions overflowed the card and clipped "WhatsApp" to "Whats" */
  .product-actions { gap: 10px; }
  .chip { padding: 12px 10px; }
  /* Fifth stat orphaned beside an empty cell */
  /* Touch targets under 44px */
  .filter-btn { padding: 12px 16px; }
  .header.open .nav-links a { padding: 14px 0; }
}

/* Reduced motion, final override.
   Must come after the responsive queries: the 820px rule sets .scrolly
   height, which would otherwise beat the collapse above. */
@media (prefers-reduced-motion: reduce) {
  .scrolly { height: auto; }
  .stage { position: relative; height: 100vh; height: 100svh; }
  .stage-content { opacity: 1 !important; }
  .hero-actions { opacity: 1 !important; }
  .scroll-cue { display: none; }
}

/* =========================================================
   Product category bands
   Design review: 26 identical cards ran ~4,700px with no wayfinding,
   and the light/dark thumb change split a row mid-grid. Bands give the
   All view structure and land the tonal change on a labelled boundary.
   ========================================================= */
.cat-band {
  flex: 0 0 100%; max-width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin: 26px 0 2px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(42,32,17,.16);
}
.cat-band:first-child { margin-top: 0; }
.cat-band[hidden] { display: none; }
.cat-band-brand {
  display: block; font: 700 11px/1 var(--sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px;
}
.cat-band-title { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 27px); color: var(--ink); line-height: 1.1; }
.cat-band-meta { font: 500 13.5px/1 var(--sans); color: var(--ink-soft); padding-bottom: 3px; }
@media (max-width: 620px) {
  .cat-band { margin-top: 20px; }
  .cat-band-meta { font-size: 12.5px; }
}

/* =========================================================
   About / stats section: photographic ground
   Design review: after the second parallax band the page ran five
   consecutive heading-plus-grid sections and the bottom 40% of a food
   site contained no food. This gives the stat row a photographic ground
   without adding page length.
   ========================================================= */
.section--about-photo { position: relative; overflow: hidden; isolation: isolate; }
.section--about-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: url('../photos/spice_metal_bowls.jpg');
  background-size: cover; background-position: center;
}
.section--about-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 70% at 50% 42%, rgba(20,14,2,.72) 0%, rgba(20,14,2,.84) 55%, rgba(20,14,2,.92) 100%),
    linear-gradient(180deg, var(--espresso) 0%, transparent 12%, transparent 88%, var(--espresso) 100%);
}
.section--about-photo .why-item {
  background: rgba(24,17,3,.42);
  border: 1px solid rgba(244,196,48,.16);
  border-radius: var(--radius);
  padding: 26px 20px;
  backdrop-filter: blur(3px);
}
@media (max-width: 620px) {
  .section--about-photo .why-item { padding: 20px 14px; }
}

/* =========================================================
   Packshot lightbox + scrollspy + footer reach column
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: clamp(20px, 5vw, 60px);
  background: rgba(12,8,1,.92);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox-fig { max-width: min(560px, 92vw); text-align: center; }
.lightbox-fig img {
  max-width: 100%; max-height: 72vh; width: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.6));
}
.lightbox-fig figcaption {
  margin-top: 22px; color: var(--gold);
  font: 600 14px/1.4 var(--sans); letter-spacing: .04em;
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(244,196,48,.4);
  color: var(--gold); font-size: 28px; line-height: 1; cursor: pointer;
  transition: background .2s var(--ease);
}
.lightbox-close:hover { background: rgba(244,196,48,.18); }

/* Scrollspy: reuses the gold underline already built for hover */
.nav-links a.is-current { color: var(--gold); }
.nav-links a.is-current::after { width: 100%; }

/* Footer Reach Us column */
.footer-reach address { font-style: normal; color: var(--on-dark-soft); font-size: .93rem; line-height: 1.6; margin-bottom: 12px; }

/* Per-child reveal for grids taller than the viewport.
   Container-level reveal cannot work for these: see the threshold note in main.js. */
.has-js .stagger--per-child > * { opacity: 0; transform: translateY(28px); }
.stagger--per-child > *.in-child { opacity: 1; transform: none; }
.stagger--per-child > .cat-band { transform: none; }

/* =========================================================
   Trust-signal placement (psychology audit)
   Measured problem: every hard credential sat at 65% depth or lower, and
   41.8% of the page (the catalogue) carried no credibility cue at all.
   These three surfaces move proof to where doubt actually forms.
   ========================================================= */

/* 1. Hero credentials: one checkable claim above the fold, so the first
      impression is not purely aesthetic. */
@media (max-width: 620px) {
  }

@media (max-width: 620px) {
        }

   the unfiltered interleave put it. Flex order, so no DOM reordering is needed. */
.product-grid.is-filtered 
/* Agency credit */
.footer-credit { color: var(--on-dark-soft); }
.footer-credit a {
  color: var(--gold-soft);
  border-bottom: 1px solid rgba(244,196,48,.28);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer-credit a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Hero certification chips. The marks sit on small white plates: they are mixed
   transparency and mostly dark navy artwork, so neither would read on the dark
   hero video. Chips are a fixed size with object-fit contain, because the marks
   run 1.0 to 2.8 aspect and sizing by height alone made the row wildly uneven. */
.hero-credentials {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 9px; margin-top: 28px;
}
.hero-cred {
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 46px;
  /* pure white, not translucent: the ISO mark carries an opaque white background
     and any tint difference shows as a visible square inside the chip */
  background: #fff;
  border-radius: 8px; padding: 6px 10px;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.6);
}
.hero-cred img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@media (max-width: 820px) {
  .hero-cred { width: 78px; height: 40px; padding: 5px 8px; }
}
@media (max-width: 620px) {
  .hero-credentials { gap: 6px; margin-top: 20px; }
  .hero-cred { width: 60px; height: 32px; padding: 4px 6px; border-radius: 6px; }
}

/* =========================================================
   Hero client marquee
   Two vertical film-strip bands flanking the hero, left rising and right
   falling. Restrained on purpose: the hero already carries the certification
   chips, so these sit at the extreme edges as white knockouts at low opacity,
   masked to fade at top and bottom. Reinforcement, not the main proof.
   ========================================================= */
.hero-marquee {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(78px, 7.5vw, 116px);
  overflow: hidden; pointer-events: none;
  /* fade in and out at both ends so marks emerge rather than pop */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.hero-marquee--left  { left:  clamp(14px, 2.6vw, 44px); }
.hero-marquee--right { right: clamp(14px, 2.6vw, 44px); }

.hero-marquee-track {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(26px, 3vw, 44px);
  will-change: transform;
  animation: hero-mq-up 54s linear infinite;
}
.hero-marquee--right .hero-marquee-track { animation-name: hero-mq-down; }
.hero-marquee.is-paused .hero-marquee-track { animation-play-state: paused; }

.hero-marquee-track img {
  width: 100%; height: clamp(24px, 2.4vw, 34px);
  object-fit: contain;
  /* source marks are dark artwork on transparency: knock them out to white
     so they read against the video, then hold them well back */
  filter: brightness(0) invert(1);
  opacity: .3;
}

@keyframes hero-mq-up   { from { transform: translateY(0);     } to { transform: translateY(-50%); } }
@keyframes hero-mq-down { from { transform: translateY(-50%);  } to { transform: translateY(0);    } }

/* No room for side bands once the hero copy needs the full width */
@media (max-width: 1180px) { .hero-marquee { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track { animation: none; }
  .hero-marquee { opacity: .8; }
}

/* =========================================================
   Category groups and product rails
   Desktop keeps a wrapping grid. Phones get a two-row horizontal rail per
   category: stacking 26 cards in one column made the catalogue about 14600px
   tall, roughly 17 phone screens with no way to skim.
   ========================================================= */
.cat-group[hidden] { display: none; }
.cat-group + .cat-group { margin-top: 8px; }

.product-rail {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
}
.product-rail .product-card { flex: 0 0 calc(25% - 17px); max-width: calc(25% - 17px); }

@media (max-width: 1000px) {
  .product-rail .product-card { flex: 0 0 calc(33.333% - 15px); max-width: calc(33.333% - 15px); }
}

@media (max-width: 700px) {
  .product-rail {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: clamp(148px, 43vw, 190px);
    justify-content: start;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* bleed to the screen edges so the rail reads as scrollable */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    scroll-padding-inline-start: var(--gutter);
  }
  .product-rail .product-card {
    flex: none; max-width: none; width: auto;
    scroll-snap-align: start;
  }
  /* Rail cards are ~168px wide, too narrow for two chips side by side:
     "WhatsApp" was clipping to "WhatsA". Stack them so both labels read
     and each becomes a full-width tap target. */
  .product-rail .product-actions { flex-direction: column; gap: 8px; }
  .product-rail .chip { width: 100%; padding: 11px 10px; }
  /* slim scrollbar so the affordance is visible without being ugly */
  .product-rail::-webkit-scrollbar { height: 4px; }
  .product-rail::-webkit-scrollbar-thumb { background: rgba(42,32,17,.22); border-radius: 4px; }
  .product-rail::-webkit-scrollbar-track { background: transparent; }
  .product-rail { scrollbar-width: thin; scrollbar-color: rgba(42,32,17,.22) transparent; }
}

/* =========================================================
   Rail scroll affordance
   A peeking card and a thin scrollbar are weak cues on touch. Three signals
   instead: a right edge fade that says content continues, a "Swipe" label in
   the category header, and a one-time nudge (in main.js) that demonstrates it.
   ========================================================= */
.rail-wrap { position: relative; }

/* fades sit above the rail, aligned to the section background */
.rail-wrap::before,
.rail-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46px;
  pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .25s var(--ease);
}
.rail-wrap::before {
  left: calc(var(--gutter) * -1);
  background: linear-gradient(90deg, var(--cream-2) 12%, rgba(244,234,212,0) 100%);
}
.rail-wrap::after {
  right: calc(var(--gutter) * -1);
  background: linear-gradient(270deg, var(--cream-2) 12%, rgba(244,234,212,0) 100%);
}
/* only when the rail can actually move, and only on the side there is more to see */
.rail-wrap.is-scrollable:not(.at-end)::after   { opacity: 1; }
.rail-wrap.is-scrollable:not(.at-start)::before { opacity: 1; }

/* Swipe label: only where the rail scrolls, so it never lies */
.swipe-hint { display: none; }
@media (max-width: 700px) {
  .cat-group:has(.rail-wrap.is-scrollable) .swipe-hint {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 10px; padding-left: 10px;
    border-left: 1px solid rgba(42,32,17,.18);
    font-weight: 700; letter-spacing: .04em; color: var(--gold-ink);
    text-transform: uppercase; font-size: 11px;
  }
  .swipe-hint svg { width: 13px; height: 13px; animation: swipe-nudge 1.9s ease-in-out infinite; }
}
@keyframes swipe-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  76%           { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint svg { animation: none; }
}
/* fades are a phone-and-tablet affordance; the desktop grid wraps and needs none */
@media (min-width: 701px) { .rail-wrap::before, .rail-wrap::after { display: none; } }

/* =========================================================
   Enquiry form status + honeypot
   ========================================================= */
/* honeypot must be reachable by bots but never by people:
   display:none is a known tell, so hide it off-canvas instead */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.form-status {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  font: 500 14px/1.5 var(--sans);
}
.form-status.is-pending { background: rgba(42,32,17,.06); color: var(--ink-soft); }
.form-status.is-warn    { background: #FDF3DA; color: #6E5109; }
.form-status.is-ok {
  background: #EAF7EE; color: #0A5C30;
  border: 1px solid rgba(10,92,48,.18);
}

/* =========================================================
   Floating WhatsApp button
   ========================================================= */
.wa-float {
  position: fixed; z-index: 120;
  right: clamp(16px, 2.4vw, 28px);
  bottom: calc(clamp(16px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0 16px;
  border-radius: 999px;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.45), 0 0 0 6px rgba(37,211,102,.14);
  transition: gap .3s var(--ease), padding .3s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float svg { width: 26px; height: 26px; flex: none; }
.wa-float-label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font: 700 14px/1 var(--sans); letter-spacing: .01em;
  transition: max-width .35s var(--ease), margin-left .35s var(--ease);
  margin-left: 0;
}
/* expand to a labelled pill on hover or keyboard focus */
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover, .wa-float:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.5), 0 0 0 8px rgba(37,211,102,.18);
  }
  .wa-float:hover .wa-float-label,
  .wa-float:focus-visible .wa-float-label { max-width: 190px; margin-left: 10px; }
}
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 620px) {
  .wa-float { height: 50px; padding: 0 13px; }
  .wa-float svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float-label { transition: none; }
}

/* Nav landmark wrapper: layout-transparent so the <ul> stays a direct flex child */
.nav-primary { display: contents; }