/* ============================================================
   VAISHNAVMATA AGRO INDUSTRIES
   Gen5 — premium light: ivory canvas, frosted glass, aurora glow
   ============================================================ */
:root{
  /* surfaces */
  --ivory:#F7F5EE;
  --cream:#FFFDF7;
  --paper:#FFFFFF;
  --sand:#F0EDE2;

  /* ink */
  --ink:#122A1C;
  --ink-2:#2B4335;
  /* Was #6E7F73, which measured 3.62:1 on the sand ground — under the 4.5:1
     AA floor for body text. This is the lightest value on the same hue that
     clears it on both white and sand (5.37:1 / 4.58:1). */
  --muted:#606E64;

  /* accents */
  --green:#1B6B45;
  --green-dk:#12492F;
  --green-lt:#2E8C5C;
  --gold:#C9A227;
  /* sampled from the emblem artwork, so the wordmark matches the mark exactly */
  --brand-navy:#142342;
  --brand-gold-hi:#EED28E;
  --brand-gold:#D0AB65;
  --brand-gold-dp:#987131;
  --brand-gold-solid:#B4883A;
  --gold-dk:#8A6510;
  --violet:#6C4CA6;
  --teal:#127A75;
  --rust:#B5541F;
  --blue:#1F5C9E;

  /* glass */
  --glass:rgba(255,255,255,.66);
  --glass-2:rgba(255,255,255,.86);
  --glass-bd:rgba(255,255,255,.9);
  --stroke:rgba(18,42,28,.10);
  --stroke-2:rgba(18,42,28,.16);
  --sh-s:0 2px 8px -4px rgba(18,42,28,.16);
  --sh-m:0 18px 40px -28px rgba(18,42,28,.38);
  --sh-l:0 40px 80px -50px rgba(18,42,28,.55);

  --serif:'Fraunces',"Iowan Old Style",Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --maxw:1280px;
  --pad:clamp(18px,4.6vw,60px);
  --r:5px;
  --r-s:4px;
  --r-p:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);position:relative;
  background:
    radial-gradient(1100px 700px at 82% -6%,rgba(201,162,39,.13),transparent 62%),
    radial-gradient(900px 620px at 8% 12%,rgba(27,107,69,.10),transparent 60%),
    linear-gradient(180deg,#FFFDF7 0%,#F7F5EE 30%,#F4F2EA 100%);
  background-attachment:fixed;
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
.im{display:block;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}
.im-blue{background-image:url("../img/hero-blue.jpg")}
.im-red{background-image:url("../img/plant-hall.jpg")}
.im-pack{background-image:url("../img/hero-pack.jpg")}
.im-ex{background-image:url("../img/plant-front.jpg")}
/* first hero slide — the mill frontage. Its own class so the facility
   grid below can keep using .im-ex without the two matching. */
.im-front{background-image:url("../img/mill/vm-mill-front.jpg")}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.025em;line-height:1.06}
p{margin:0}
::selection{background:rgba(201,162,39,.32);color:var(--ink)}

/* ---------- Focus ----------
   There was no visible focus state anywhere on the site, which makes it
   unusable by keyboard. One ring, two tones: gold on light ground, white on
   the dark sections so it stays visible against the photography. */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--gold-dk);outline-offset:3px;border-radius:2px;
}
.on-dark :focus-visible,.hero :focus-visible,.quote :focus-visible,
.hero-trust :focus-visible,footer :focus-visible{
  outline-color:#fff;
}
.fld :is(select,input,textarea):focus-visible{outline-offset:0}

/* Keyboard-only route past the navigation. */
.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:11px 18px;background:var(--green-dk);color:#fff;border-radius:var(--r-s);
  font-size:13px;font-weight:500;letter-spacing:.02em;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip:focus-visible{transform:none;outline-color:#fff}

/* Figures line up in columns wherever they are compared. */
.hs .n,.sb b,.statband b,.glance b,.spec td,.spec th{font-variant-numeric:tabular-nums}

/* ---------- Ambient layers ---------- */
.aurora{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;filter:blur(58px)}
.blob{position:absolute;border-radius:50%;opacity:.5;will-change:transform}
.b1{width:46vw;height:46vw;left:-12vw;top:-8vw;background:radial-gradient(circle,rgba(46,140,92,.42),transparent 66%);animation:fl1 26s var(--ease) infinite alternate}
.b2{width:40vw;height:40vw;right:-10vw;top:4vw;background:radial-gradient(circle,rgba(201,162,39,.44),transparent 66%);animation:fl2 32s var(--ease) infinite alternate}
.b3{width:44vw;height:44vw;left:24vw;top:52vh;background:radial-gradient(circle,rgba(108,76,166,.26),transparent 66%);animation:fl3 38s var(--ease) infinite alternate}
.b4{width:34vw;height:34vw;right:6vw;bottom:-6vw;background:radial-gradient(circle,rgba(18,122,117,.28),transparent 66%);animation:fl1 30s var(--ease) infinite alternate-reverse}
@keyframes fl1{to{transform:translate3d(7vw,5vh,0) scale(1.16)}}
@keyframes fl2{to{transform:translate3d(-6vw,7vh,0) scale(1.1)}}
@keyframes fl3{to{transform:translate3d(5vw,-8vh,0) scale(1.2)}}
.gridbg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(18,42,28,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,42,28,.055) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(18,42,28,.16) .5px,transparent .5px);background-size:3px 3px;
}
/* (cursor-follow glow removed — green-on-green, and it tinted the photos) */

/* ---------- Type helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:var(--gold)}
.on-dark .eyebrow{color:var(--gold)}
.lead{color:var(--muted);font-size:clamp(15px,1.12vw,17px);line-height:1.75;max-width:60ch}
.on-dark .lead{color:rgba(255,255,255,.76)}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-p);border:1px solid var(--green-dk);cursor:pointer;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  background:var(--green);color:#fff;box-shadow:0 8px 18px -12px rgba(18,73,47,.8);
  transition:background .35s var(--ease),transform .3s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--green-dk);transform:translateY(-1px);box-shadow:0 14px 26px -14px rgba(18,73,47,.75)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn.gold{background:var(--gold);border-color:#A8830F;color:#241A05}
.btn.gold:hover{background:#A8830F;color:#fff}
.btn.glass{background:#fff;color:var(--ink);border-color:var(--stroke-2);box-shadow:var(--sh-s)}
.btn.glass:hover{background:var(--sand);border-color:var(--green);color:var(--green-dk)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.tlink{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green);
}
.tlink .ar{transition:transform .4s var(--ease)}
.tlink:hover{color:var(--gold-dk)}
.tlink:hover .ar{transform:translateX(5px)}

/* ---------- Top bar ---------- */
.topbar{
  position:relative;z-index:60;font-size:11.5px;letter-spacing:.05em;padding:9px 0;
  color:var(--ink-2);background:rgba(255,255,255,.5);border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(10px);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.topbar b{color:var(--green);font-weight:600}
.topbar .tb-r{display:flex;gap:22px;align-items:center}
.topbar a:hover{color:var(--gold-dk)}

/* ---------- Nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  /* Gen5 frosted glass: the hero and page imagery blur through the bar rather
     than being hidden behind it. Opacity is the readability control — enough
     to keep the nav legible over a photograph, not so much that it reads solid. */
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 0 var(--stroke),0 8px 30px -26px rgba(18,42,28,.5);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
/* Scrolled: a touch more opaque, because by then it is sitting over body copy
   rather than the hero, and text-on-text needs the extra separation. */
header.nav.solid{
  background:rgba(255,255,255,.86);
  border-bottom-color:var(--stroke);
  box-shadow:0 1px 0 var(--stroke),0 14px 34px -24px rgba(18,42,28,.6);
}
/* Without backdrop-filter the translucency would just look washed out, so
   those browsers get the solid bar they had before. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.nav,header.nav.solid{background:#fff}
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:11px var(--pad);
  transition:padding .4s var(--ease);
}
header.nav.solid .nav-in{padding:9px var(--pad)}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand .mark{width:60px;height:60px;flex:none;object-fit:contain;transition:width .35s var(--ease),height .35s var(--ease),transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-6deg) scale(1.04)}
header.nav.solid .brand .mark{width:50px;height:50px}
.f-brand .brand .mark{width:88px;height:88px;padding:0;background:none;border-radius:0}
.brand .bn{line-height:1.05}
.brand .bn strong{
  display:block;font-family:var(--serif);font-size:17.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  /* solid gold is the fallback; the gradient below is the foil effect */
  color:var(--brand-gold-solid);
  background:linear-gradient(180deg,
    var(--brand-gold-hi) 0%, var(--brand-gold) 30%,
    var(--brand-gold-dp) 56%, var(--brand-gold) 78%, #EADAA7 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand .bn strong{-webkit-text-fill-color:transparent}
}
/* The wordmark sets the lockup width; the two lines beneath are justified out
   to exactly that width, so the block reads as one rectangle rather than three
   ragged lines. Tracking is the thing that stretches, which is how the printed
   logo is set too. */
.brand .bn{display:inline-block;width:max-content}
.brand .bn strong{width:100%}
/* The wordmark is the full width of the lockup; the two lines beneath are
   centred within it. .bn takes its width from its widest child, which is the
   wordmark, so the block stays a tidy rectangle at any font size. */
.brand .bn span,
.brand .bn em{width:100%;text-align:center}
.brand .bn span{
  display:block;font-family:var(--serif);font-size:10.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brand-navy);
  white-space:nowrap;margin-top:4px;
}
.brand .bn em{
  display:block;font-style:normal;font-size:6.4px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brand-navy);
  opacity:.72;white-space:nowrap;margin-top:5px;
}
@media(max-width:860px){header.nav .brand .bn em{display:none}}

.menu{display:flex;align-items:center;gap:2px}
.mi{position:relative;padding:8px 0}
.mi > a{
  position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
  font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--ink-2);white-space:nowrap;
  transition:color .3s var(--ease);
}
.mi > a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.mi:hover > a::after,.mi > a.active::after{transform:scaleX(1);transform-origin:left}
.mi:hover > a,.mi > a.active{color:var(--green)}
.mi .cv{opacity:.55;transition:transform .35s var(--ease)}
.mi:hover .cv{transform:rotate(180deg);opacity:1}
.dd{
  position:absolute;top:100%;left:0;min-width:256px;padding:6px 0;
  background:#fff;border:1px solid var(--stroke-2);border-top:2px solid var(--green);border-radius:0 0 var(--r-s) var(--r-s);
  box-shadow:0 26px 50px -32px rgba(18,42,28,.7);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);transform-origin:top left;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:5;
}
.mi.has-dd:hover .dd,.mi.has-dd.open .dd{opacity:1;visibility:visible;transform:none}
.dd a{
  display:block;padding:10px 18px;font-size:13px;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease);
}
.dd a b{font-weight:600;color:var(--gold-dk);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.dd a:hover{background:var(--sand);color:var(--green);padding-left:23px}
.dd a:first-child{border-bottom:1px solid var(--stroke);margin-bottom:4px;padding-bottom:12px}

/* ---------- Mega menu ----------
   Panels span the header rather than hanging off a single item, so the menu
   reads as part of the page furniture instead of a floating list. The item
   goes position:static so the panel resolves against the sticky header. */
.mi.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:6;
  background:#fff;border-top:1px solid var(--stroke-2);
  box-shadow:0 40px 60px -46px rgba(18,42,28,.75);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* visibility is stepped, not eased: it flips to visible the instant the panel
     opens (so the first link is focusable straight away) and only back to
     hidden once the fade-out has finished. Transitioning it directly leaves the
     panel unfocusable for the length of the transition. */
  transition:opacity .26s var(--ease),transform .26s var(--ease),
             visibility 0s linear .26s;
}
.mi.has-mega:hover > .mega,.mi.has-mega.open > .mega{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s;
}
.mega-in{
  max-width:var(--maxw);margin:0 auto;padding:26px var(--pad) 30px;
  display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:34px;align-items:start;
}
.mega-narrow .mega-in{grid-template-columns:minmax(0,1fr);max-width:min(var(--maxw),720px);margin:0 auto 0 0;
  padding-left:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)))}
.mega-eyebrow{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dk);font-weight:600;margin-bottom:14px}

/* product cards */
.mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:2px}
.mcard{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:var(--r-s);
  transition:background .22s var(--ease),transform .22s var(--ease)}
.mcard:hover{background:var(--sand);transform:translateX(3px)}
.mcard-im{width:46px;height:46px;flex:none;border-radius:8px;overflow:hidden;background:var(--sand);
  border:1px solid var(--stroke-2)}
.mcard-im img{width:100%;height:100%;object-fit:cover;display:block}
.mcard-t{min-width:0}
.mcard-t b{display:block;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.005em}
.mcard-t i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px;
  letter-spacing:.04em}
/* Compact variant for the country and company panels, where the label is the
   payload and the image is there to make the menu scannable, not to sell. */
.mcard-sm{padding:8px 10px;gap:11px}
.mcard-sm .mcard-im{width:40px;height:40px;border-radius:6px}
.mcard-sm .mcard-t b{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.mcard-sm:hover .mcard-t b{color:var(--green)}
.mega-col .mcard-sm{margin-left:-10px}
.mcard:hover .mcard-t b{color:var(--green)}

/* region / link columns */
.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
.mega-col-h{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dk);font-weight:600;padding-bottom:9px;margin-bottom:5px;
  border-bottom:1px solid var(--stroke)}
.mrow{display:block;padding:8px 10px 8px 0;border-radius:var(--r-s);
  transition:color .2s var(--ease),padding-left .22s var(--ease)}
.mrow b{display:block;font-size:13px;font-weight:500;color:var(--ink-2)}
.mrow i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px}
.mrow:hover{padding-left:9px}
.mrow:hover b{color:var(--green)}

/* right rail */
.mega-rail{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--stroke);
  padding-left:26px;align-self:stretch}
.mrail-a,.mrail-dl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:var(--r-s);transition:background .22s var(--ease)}
.mrail-a b,.mrail-dl b{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.mrail-a .ar,.mrail-dl .ar{color:var(--gold-dk);transition:transform .28s var(--ease)}
.mrail-a:hover,.mrail-dl:hover{background:var(--sand)}
.mrail-a:hover b,.mrail-dl:hover b{color:var(--green)}
.mrail-a:hover .ar{transform:translateX(4px)}
.mrail-dl{margin-top:auto;background:var(--sand);border:1px solid var(--stroke-2)}
.mrail-dl:hover .ar{transform:translateY(3px)}
.mrail-wide{margin-top:22px;max-width:320px}

/* the page dims behind an open panel */
.mega-veil{position:fixed;inset:0;z-index:40;background:rgba(18,32,24,.28);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.mega-veil.on{opacity:1;visibility:visible}

@media(max-width:1080px){.mega{display:none}}

.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:12px 20px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--stroke-2);background:#fff;border-radius:var(--r-p);cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:20.5px}.burger i:nth-child(3){top:26px}
.burger.on i:nth-child(1){top:20.5px;transform:rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){top:20.5px;transform:rotate(-45deg)}

.mobile{
  position:fixed;inset:0;z-index:45;background:rgba(247,245,238,.96);backdrop-filter:blur(24px);
  padding:104px var(--pad) 40px;transform:translateY(-102%);transition:transform .55s var(--ease);overflow:auto;
}
.mobile.on{transform:translateY(0)}
.macc{border-top:1px solid var(--stroke)}
.mobile .mtop,.mobile .mhead{
  display:flex;width:100%;align-items:center;justify-content:space-between;text-align:left;
  font-family:var(--serif);font-size:25px;color:var(--ink);padding:15px 0;
  border:0;border-bottom:1px solid var(--stroke);background:none;cursor:pointer;
}
.mhead .pm{position:relative;width:14px;height:14px;flex:none}
.mhead .pm::before,.mhead .pm::after{content:"";position:absolute;background:var(--gold-dk);transition:.35s var(--ease)}
.mhead .pm::before{left:0;right:0;top:6.5px;height:1.5px}
.mhead .pm::after{top:0;bottom:0;left:6.5px;width:1.5px}
.mgrp.open .mhead .pm::after{transform:scaleY(0)}
.msub{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.mgrp.open .msub{max-height:520px}
.msub a{display:block;font-family:var(--sans);font-size:14.5px;color:var(--muted);padding:11px 0 11px 16px;border-bottom:1px solid var(--stroke)}
.msub a:hover{color:var(--green)}
.mobile .btn{margin-top:24px;width:100%;justify-content:center}
.mobile .mcon{margin-top:22px;color:var(--muted);font-size:13px}

/* ---------- Hero (inset media card) ---------- */
.hero{
  position:relative;overflow:hidden;
  /* Sized so the hero AND the trust line that closes it both land inside the
     first screen. --hdr is the real header height, measured in main.js; the
     128px fallback is the desktop top bar (42) plus nav (86). */
  min-height:min(calc(100vh - var(--hdr,128px)),760px);
  min-height:min(calc(100svh - var(--hdr,128px)),760px);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#0d2418;isolation:isolate;
}
.hero-slides{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.slide.on{opacity:1}
.slide img,.slide .im{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);filter:saturate(1.02) contrast(1.03);
  will-change:transform;backface-visibility:hidden}
.hero-slides .slide:first-child .im{background-position:84% center}

/* ---------- Hero footage ----------
   Three things made the old treatment read as a slideshow rather than film:
   every slide ran the SAME move, it was eased so it visibly decelerated to a
   stop, and it finished before the cut. A camera does none of that. So each
   slide gets its own move — a push, a pull, a rise, a drift — all linear, and
   all far longer than the 6.4s a slide is on screen, so we only ever see the
   middle of the move and it is still travelling when we dissolve away.
   Transform only: nothing here tints or darkens the photograph. */
.slide.on img,.slide.on .im{animation:none 15s linear forwards}
.hero-slides .slide:nth-child(1).on .im,
.hero-slides .slide:nth-child(1).on img{animation-name:kb-push}
.hero-slides .slide:nth-child(2).on .im,
.hero-slides .slide:nth-child(2).on img{animation-name:kb-pull}
.hero-slides .slide:nth-child(3).on .im,
.hero-slides .slide:nth-child(3).on img{animation-name:kb-rise}
.hero-slides .slide:nth-child(4).on .im,
.hero-slides .slide:nth-child(4).on img{animation-name:kb-drift}

/* Overscan always exceeds the travel, so no edge is ever exposed. */
@keyframes kb-push { from{transform:scale(1.06) translate3d( 1.1%, 0.3%,0)}
                       to{transform:scale(1.19) translate3d(-1.5%,-1.0%,0)} }
@keyframes kb-pull { from{transform:scale(1.20) translate3d(-1.2%, 0.9%,0)}
                       to{transform:scale(1.06) translate3d( 0.8%,-0.5%,0)} }
@keyframes kb-rise { from{transform:scale(1.08) translate3d( 0.2%, 1.7%,0)}
                       to{transform:scale(1.18) translate3d(-0.6%,-1.5%,0)} }
@keyframes kb-drift{ from{transform:scale(1.07) translate3d(-1.5%,-1.1%,0)}
                       to{transform:scale(1.18) translate3d( 1.3%, 1.1%,0)} }
.hero-slides::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(9,26,17,.55) 0%,rgba(9,26,17,.12) 26%,rgba(9,26,17,.5) 62%,rgba(9,26,17,.92) 100%),
    linear-gradient(90deg,rgba(9,26,17,.84) 0%,rgba(9,26,17,.3) 56%,rgba(9,26,17,.04) 100%);
}
.hero-grain{position:absolute;inset:0;z-index:1;opacity:.4;mix-blend-mode:overlay;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) .5px,transparent .5px);background-size:3px 3px}
.hero-in{position:relative;z-index:3;width:100%;padding:clamp(60px,9vh,110px) 0 0;flex:1;display:flex;align-items:flex-end}

.hero-copy{position:relative;display:flex;align-items:flex-end;min-height:clamp(196px,20vw,286px)}
.hc{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hc.on{position:relative;opacity:1;transform:none;pointer-events:auto;width:100%;align-self:flex-end;
  transition:opacity .85s var(--ease) .28s,transform .85s var(--ease) .28s}
.hero h1,.hero .hc h2{font-size:clamp(38px,5.9vw,80px);color:#fff;font-weight:400;letter-spacing:-.03em;max-width:16ch;margin:20px 0 0}
.hero h1 em,.hero .hc h2 em{font-style:italic;font-weight:300;background:linear-gradient(100deg,#F3DC91,var(--gold) 55%,#EBD07A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:rgba(255,255,255,.8);margin-top:20px;max-width:50ch;font-size:clamp(15px,1.15vw,17.5px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.hero-ui{position:relative;z-index:4;margin-top:clamp(18px,2.8vh,30px);padding-bottom:clamp(16px,2.4vh,26px)}
.hero-ui-in{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.dots{display:flex;align-items:center;gap:8px}
.dot{position:relative;background:none;border:0;padding:0 0 9px;cursor:pointer;color:rgba(255,255,255,.45);transition:color .35s var(--ease)}
.dot .dn{font-size:10.5px;letter-spacing:.16em;font-weight:600;padding-right:12px}
.dot i{position:absolute;left:0;right:12px;bottom:0;height:1.5px;background:rgba(255,255,255,.22);border-radius:2px;display:block;overflow:hidden}
.dot i::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#F0DA9B)}
.dot:hover{color:rgba(255,255,255,.85)}
.dot.on{color:#fff}
.dot.on i::after{width:100%;transition:width 6.4s linear}
.hero-caps{display:flex;align-items:center;gap:18px;position:relative;min-height:38px;flex:1 1 auto;min-width:0;justify-content:flex-end}
.hcap{position:absolute;right:96px;bottom:2px;width:300px;text-align:right;opacity:0;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);
  transition:opacity .7s var(--ease);pointer-events:none}
.hcap.on{opacity:1;transition:opacity .8s var(--ease) .3s}
.arrows{display:flex;gap:8px;margin-left:auto}
.arw{width:40px;height:40px;border-radius:var(--r-p);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.35s var(--ease)}
.arw:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* floating glass stat bar */
.hero-strip{position:relative;z-index:5;background:#fff;border-bottom:1px solid var(--stroke-2)}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.hs{padding:26px 26px 26px 0;border-right:1px solid var(--stroke);position:relative}
.hs:last-child{border-right:0}
.hs .n{font-family:var(--serif);font-size:clamp(25px,2.4vw,36px);font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:var(--green-dk)}
.hs .l{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ---------- Trust line: the hero's footer ----------
   The certifications used to sit below the fold, under the stat strip. They are
   the first thing an unfamiliar importer looks for, so they now close the hero
   itself — dark glass over the photograph, legible without dimming the image. */
.hero-trust{
  position:relative;z-index:5;margin-top:auto;
  border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(7,24,15,.42),rgba(7,24,15,.74));
  -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);
}
.hero-trust .certs{background:none;border:0}
.hero-trust .cert{padding:13px 36px;border-right:1px solid rgba(255,255,255,.15)}
.hero-trust .cert b{color:#fff}
.hero-trust .cert i{color:rgba(255,255,255,.68)}
/* The strip below the hero already carries a top edge of its own. */
.hero + .hero-strip{border-top:0}

/* ---------- Certification marquee ---------- */
.certs{overflow:hidden;
  border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.45)}
.mq{display:flex;width:max-content;animation:mq 46s linear infinite}
.certs:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-set{display:flex;align-items:center}
.cert{display:flex;align-items:center;gap:12px;padding:18px 40px;border-right:1px solid var(--stroke);white-space:nowrap;transition:background .25s var(--ease)}
.cert:hover{background:rgba(255,255,255,.07)}
.cert:hover b{color:var(--gold)}
.cert b{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.cert i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.03em;display:block;text-transform:none}
.cert svg{flex:none}

/* Lives in style.css, not pages.css: the walkthrough runs on the homepage as
   well as the mill page, and pages.css is only loaded on inner pages. */
/* ---------- walkthrough footage ----------
   Portrait phone footage, so the cells are 9:16 rather than letterboxed into a
   landscape frame with bars down the sides. Nothing autoplays: these are 7.6 MB
   between them and the visitor decides. */
.vwall{
  display:grid;gap:clamp(12px,1.6vw,20px);
  /* Explicit counts, not auto-fit: six clips against a fluid minmax landed on
     five across with one orphan underneath. 6 / 3 / 2 always divides evenly. */
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:1000px){.vwall{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vcell{margin:0;display:flex;flex-direction:column;gap:9px}
.vcell video{
  width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  background:var(--ink);border-radius:var(--r-s);
  border:1px solid var(--stroke-2);
}
/* Homepage cut: three clips, so they sit as a row rather than a contact sheet,
   and they stay clearly secondary to the stills above them. */
.facility .vwall{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px;max-width:760px}
@media (max-width:760px){.facility .vwall{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facility .vcell video{aspect-ratio:4/5;max-height:340px}
.facility .vcell figcaption{font-size:11.5px}
.fac-filmlabel{
  margin:clamp(26px,3vw,38px) 0 10px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dk);font-weight:600;
}

.vcell figcaption{
  font-size:12.5px;line-height:1.45;color:var(--muted);letter-spacing:.01em;
}
@media (max-width:560px){.vwall{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Request-a-quote modal ----------
   The form section inside carries its own dark treatment, so the dialog only
   supplies the frame, the scroll container and the close control. */
.qmodal{
  border:0;padding:0;background:transparent;max-width:min(980px,94vw);width:100%;
  max-height:92vh;overflow:visible;
}
.qmodal::backdrop{background:rgba(9,22,15,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.qmodal-in{
  position:relative;border-radius:var(--r);overflow:hidden auto;max-height:92vh;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}
/* the section was built as a full-bleed page block; inside the dialog it is a card */
.qmodal .sec.quote{padding:clamp(28px,4vw,44px) 0}
.qmodal .sec.quote .wrap{padding-inline:clamp(18px,3vw,34px)}
/* In a dialog the section is a card, not a full-bleed page block: the
   background photograph washes out at this size and the display headline eats
   the space the form needs. Solid ground, smaller type, tighter rhythm. */
.qmodal .sec.quote .bgimg{display:none}
.qmodal .sec.quote{background:var(--green-dk);padding:clamp(26px,3.4vw,38px) 0 clamp(22px,3vw,32px)}
.qmodal .sec.quote .sec-head{margin-bottom:clamp(18px,2.2vw,26px)}
.qmodal .sec.quote h2.tt{font-size:clamp(21px,2.4vw,29px);max-width:24ch}
.qmodal .sec.quote .lead{font-size:14.5px;line-height:1.6;max-width:56ch}
.qmodal .sec.quote .eyebrow{margin-bottom:4px}

.qmodal-x{
  position:absolute;top:14px;right:14px;z-index:5;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.qmodal-x:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.qmodal-x:hover{transform:none}}

/* ---------- Grain magnifier ----------
   A loupe over the photo: circular, edged, lifted off the surface, and sized in
   JS so the lens and its magnification stay in step. */
.has-zoom{position:relative}
.zoomlens{
  position:absolute;z-index:3;pointer-events:none;
  border-radius:50%;
  background-repeat:no-repeat;
  /* depth under the loupe, so it reads as an object resting on the photo */
  box-shadow:0 8px 20px -8px rgba(12,32,22,.45),
             0 1px 3px rgba(12,32,22,.25);
  opacity:0;transform:scale(.88);will-change:transform,left,top;
  transition:opacity .16s var(--ease),transform .16s var(--ease);
}
/* Liquid rim.
   Drawn as a RING, not a filled disc: the element is masked so only its outer
   band paints. The previous version relied on z-index:-1 to sit behind the
   lens image, but .zoomlens has z-index and opacity, so it forms a stacking
   context — and inside one, a negative-z-index child paints ABOVE the parent's
   background. The gradient covered the grain entirely. */
.zoomlens::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 200deg,
    rgba(255,255,255,.96) 0deg, rgba(186,212,200,.72) 46deg,
    rgba(255,255,255,.92) 102deg, rgba(146,178,165,.66) 166deg,
    rgba(255,255,255,.94) 226deg, rgba(174,201,189,.68) 290deg,
    rgba(255,255,255,.96) 360deg);
  /* keep only the outer 11px as a band */
  /* a slim band, not a thick bezel */
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
          mask:radial-gradient(closest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  /* No drop-shadow here: a filter over a masked conic gradient is expensive to
     rasterise, and this element moves with the pointer every frame. The depth
     comes from the lens's own box-shadow, which the compositor handles. */
}
/* Edge highlight only — no fill, so the magnified grain stays untouched. */
.zoomlens::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 0 6px rgba(12,32,22,.10);
}
.zoomlens.on{opacity:1;transform:scale(1)}
/* a quiet cue that the grain can be inspected, gone once the loupe is up */
.has-zoom::after{
  content:"";position:absolute;right:10px;bottom:10px;z-index:2;
  width:26px;height:26px;border-radius:50%;pointer-events:none;
  background:rgba(12,32,22,.55) no-repeat center/13px 13px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5M11 8v6M8 11h6'/></svg>");
  opacity:.85;transition:opacity .2s var(--ease);
}
.has-zoom:hover::after{opacity:0}
@media (prefers-reduced-motion:reduce){
  .zoomlens{transition:opacity .16s linear;transform:none}
  .zoomlens.on{transform:none}
}

/* ---------- Certificate viewer ---------- */
.tile-act{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--green-dk);background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid var(--stroke);padding-bottom:3px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.tile-act .ar{color:var(--gold-dk);transition:transform .25s var(--ease)}
.tile-act:hover{color:var(--green);border-color:var(--gold)}
.tile-act:hover .ar{transform:translateX(4px)}
.tone-dark .tile-act{color:#fff;border-color:rgba(255,255,255,.3)}

.certviews{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:6px}

.certmodal{
  border:0;padding:0;background:transparent;
  width:min(960px,94vw);max-height:92vh;
}
.certmodal::backdrop{background:rgba(9,22,15,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.certmodal-in{
  display:flex;flex-direction:column;max-height:92vh;
  background:var(--paper);border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}
.certmodal-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px 14px 20px;background:var(--green-dk);color:#fff;flex:none;
}
.certmodal-t{font-size:15px;font-weight:600;letter-spacing:.01em;margin:0;color:#fff}
.certmodal-acts{display:flex;align-items:center;gap:14px;flex:none}
.certmodal-dl{
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;white-space:nowrap;
}
.certmodal-dl:hover{border-color:var(--gold)}
.certmodal-x{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex:none;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;transition:background .25s var(--ease);
}
.certmodal-x:hover{background:rgba(255,255,255,.2)}
/* the pages scroll, the bar stays put */
.certmodal-pages{
  overflow:auto;padding:18px;display:flex;flex-direction:column;gap:18px;
  background:#E9E9E4;
}
.certpage{margin:0}
.certpage img{
  display:block;width:100%;height:auto;background:#fff;
  border:1px solid var(--stroke-2);border-radius:3px;
  box-shadow:0 6px 18px -10px rgba(12,32,22,.4);
}
.certpage figcaption{
  margin-top:7px;text-align:center;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
@media (max-width:560px){
  .certmodal-bar{padding:12px 12px 12px 14px}
  .certmodal-t{font-size:13.5px}
  .certmodal-dl{font-size:11.5px}
  .certmodal-pages{padding:12px;gap:12px}
}

/* ---------- Section shell ---------- */
section{position:relative}
.sec{padding:clamp(70px,9.5vw,126px) 0}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:clamp(36px,5vw,58px)}
.sec-head.center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:760px;margin-inline:auto}
h2.tt{font-size:clamp(30px,4.2vw,55px);font-weight:400;letter-spacing:-.03em;margin-top:18px;color:var(--ink)}
h2.tt em{font-style:italic;font-weight:300;background:linear-gradient(100deg,var(--green-lt),var(--gold) 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.on-dark h2.tt{color:#fff}
.on-dark h2.tt em{background:linear-gradient(100deg,#F3DC91,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Cards (glass + spotlight) ---------- */
.card{
  position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border:1px solid var(--stroke-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-s);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* (gold hover wash removed — it dulled the grain photography) */
.card:hover{transform:translateY(-5px);box-shadow:0 30px 56px -38px rgba(18,42,28,.6);border-color:var(--stroke-2)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px)}

/* product imagery — always true colour so buyers can judge the grain */
.card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand);border-bottom:1px solid var(--stroke)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .ph img{transform:scale(1.045)}
.card .tag{
  position:absolute;top:0;left:0;z-index:2;background:var(--green);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:7px 12px;
}
.card .bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;position:relative;z-index:2}
.card h3{font-size:21px;color:var(--ink);font-weight:500}
.card .ds{color:var(--muted);font-size:13.8px;margin-top:9px;line-height:1.65;flex:1}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.specs span{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--stroke-2);padding:5px 10px;border-radius:var(--r-p);background:var(--sand);
}
.card .tlink{margin-top:17px}

.prod-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;margin-top:30px}
.also{font-size:13.5px;color:var(--muted);max-width:56ch}
.also b{color:var(--ink);font-weight:600}

/* ---------- Full range index ---------- */
.range{
  margin-top:clamp(36px,4.6vw,58px);border:1px solid var(--glass-bd);border-radius:var(--r);
  background:rgba(255,255,255,.62);backdrop-filter:blur(14px);box-shadow:var(--sh-m);
  padding:clamp(24px,3.2vw,42px);
}
.range-head{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end;padding-bottom:22px;border-bottom:1px solid var(--stroke)}
.range-head h3{font-size:clamp(22px,2.3vw,30px);color:var(--ink);margin-top:14px}
.range-note{font-size:13.5px;color:var(--muted);line-height:1.75}
.range-note b{color:var(--green);font-weight:600}
.range-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2px 24px}
.range-list li{position:relative;padding:10px 0 10px 20px;font-size:13.8px;color:var(--ink-2);
  border-bottom:1px dashed var(--stroke);transition:color .3s var(--ease),padding-left .3s var(--ease)}
.range-list li::before{content:"";position:absolute;left:2px;top:18px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.range-list li:hover{color:var(--green);padding-left:25px}
.range-list li em{font-style:normal;color:var(--muted);font-size:12.5px}

/* ---------- Facility ---------- */
.facility{position:relative}
.facility{background:rgba(255,255,255,.5);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(186px,auto);gap:clamp(10px,1.1vw,15px)}
.fac{margin:0;position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--sand);min-height:186px;border:1px solid var(--stroke-2)}
.fac.big{grid-column:span 2;grid-row:span 2;min-height:392px}
.fac img,.fac .im{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.fac:hover img,.fac:hover .im{transform:scale(1.06)}
.fac figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:11px 16px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fac-quote{
  grid-column:span 2;border-radius:var(--r-s);padding:26px 26px;display:flex;flex-direction:column;justify-content:center;
  min-height:186px;color:#fff;box-shadow:var(--sh-m);
  background:linear-gradient(135deg,var(--green-lt),var(--green) 48%,var(--green-dk));
  position:relative;overflow:hidden;
}
.fac-quote::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.4),transparent 66%)}
.fac-quote svg{position:relative;z-index:2}
.fac-quote p{font-family:var(--serif);font-size:20px;line-height:1.35;margin-top:12px;letter-spacing:-.01em;position:relative;z-index:2}
.fac-quote span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:14px;position:relative;z-index:2}
.fac-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(24px,3vw,38px);padding-top:26px;border-top:1px solid var(--stroke)}
/* Route from the homepage's mill section into the mill page itself. */
.fac-more{margin:clamp(18px,2.4vw,28px) 0 0}
.fac-more a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:var(--green-dk);
  border-bottom:1px solid var(--stroke);padding-bottom:4px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.fac-more a .ar{color:var(--gold-dk);transition:transform .3s var(--ease)}
.fac-more a:hover{color:var(--green);border-color:var(--gold)}
.fac-more a:hover .ar{transform:translateX(5px)}
.fs b{display:block;font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);font-weight:500;
  background:linear-gradient(120deg,var(--green-dk),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.fs span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.6}

/* ---------- Why / leadership ---------- */
.split{display:grid;grid-template-columns:1fr 1fr}
.split-l{
  padding:clamp(44px,5vw,78px) clamp(30px,5vw,72px);color:#fff;box-shadow:var(--sh-l);position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--green) 0%,var(--green-dk) 62%,#0D3A24 100%);
  display:flex;flex-direction:column;justify-content:center;
}
.split-l::after{content:"";position:absolute;left:-80px;bottom:-110px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.22),transparent 66%)}
.split-l .inner{max-width:540px;margin-left:auto;width:100%;position:relative;z-index:2}
.reasons{margin-top:32px;display:flex;flex-direction:column}
.reason{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-top:1px solid rgba(255,255,255,.16);align-items:start}
.reason:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.reason .num{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:.06em;padding-top:3px}
.reason h4{font-size:15.5px;font-family:var(--sans);font-weight:600;color:#fff}
.reason p{font-size:13.6px;color:rgba(255,255,255,.68);margin-top:6px;line-height:1.7}
.split-r{position:relative;overflow:hidden;display:flex;align-items:center;min-height:560px}
.split-r .photo{position:absolute;inset:0}
.split-r .photo img,.split-r .photo .im{width:100%;height:100%;object-fit:cover}
.split-r .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,17,.15),rgba(10,26,17,.55))}
.lead-card{
  position:relative;z-index:2;margin:clamp(20px,2.4vw,34px);padding:clamp(26px,3vw,40px);max-width:440px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-bd);border-radius:var(--r-s);box-shadow:var(--sh-l);
}
.lead-card h3{font-size:clamp(23px,2.4vw,31px);color:var(--ink);margin-top:14px}
.lead-card p{font-size:14.2px;color:var(--muted);margin-top:14px;line-height:1.78}
.lead-card p b{color:var(--ink)}
.who{margin-top:24px;padding-top:20px;border-top:2px solid var(--gold)}
.who b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:0;color:var(--ink)}
.who span{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dk);margin-top:4px}
.photo-cap{position:absolute;right:clamp(20px,2.4vw,34px);bottom:18px;z-index:2;color:rgba(255,255,255,.72);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;max-width:250px;text-align:right}

/* ---------- Process ---------- */
/* ---------- Export process: connected cards ----------
   Eight stages read better as a 4x2 card grid than a single eight-column
   track — the old layout squeezed each stage into ~11% of the width, which
   left the descriptions almost unreadable. Chevrons between cards carry the
   sense of flow that the rail used to. */
.pflow{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(34px,4vw,52px);
}
.pcard{
  position:relative;padding:26px 22px 24px;
  border:1px solid var(--stroke-2);border-radius:var(--r);
  background:rgba(255,255,255,.74);backdrop-filter:blur(10px);
  box-shadow:var(--sh-s);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.pcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,var(--green-lt),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:rgba(201,162,39,.5)}
.pcard:hover::before{transform:scaleX(1)}

/* the flow cue: a chevron sitting in the gap to the right of each card */
.pcard::after{
  content:"";position:absolute;top:50%;right:calc(-1 * clamp(14px,1.6vw,20px) / 2 - 4px);
  width:8px;height:8px;margin-top:-4px;
  border-top:1.5px solid var(--stroke-2);border-right:1.5px solid var(--stroke-2);
  transform:rotate(45deg);
}
/* no chevron at the end of a row, or after the final stage */
.pflow .pcard:nth-child(4n)::after,
.pflow .pcard:last-child::after{display:none}

.pcard-n{
  display:block;font-family:var(--serif);font-size:12px;font-weight:400;
  letter-spacing:.2em;color:var(--gold-dk);
}
.pcard-ico{
  display:grid;place-items:center;width:46px;height:46px;margin-top:14px;
  border-radius:var(--r-p);background:var(--sand);color:var(--green);
  border:1px solid var(--stroke);
}
.pcard-ico svg{width:23px;height:23px}
.pcard h3{margin-top:16px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.pcard p{margin-top:8px;font-size:13.4px;line-height:1.62;color:var(--muted)}

@media(max-width:1180px){
  .pflow{grid-template-columns:repeat(2,1fr)}
  .pflow .pcard:nth-child(4n)::after{display:block}
  .pflow .pcard:nth-child(2n)::after{display:none}
}
@media(max-width:620px){
  .pflow{grid-template-columns:1fr}
  .pcard::after{display:none !important}
}
[dir="rtl"] .pcard::after{
  right:auto;left:calc(-1 * clamp(14px,1.6vw,20px) / 2 - 4px);
  transform:rotate(225deg);
}

/* ---------- Markets ---------- */
.mk-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:start}
.routes{position:relative;margin-top:32px;max-width:560px}
.routes svg{width:100%;height:auto;overflow:visible}
.dashline{stroke-dasharray:4 6;animation:dash 22s linear infinite}
@keyframes dash{to{stroke-dashoffset:-260}}
.mk-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mk-col{background:rgba(255,255,255,.66);backdrop-filter:blur(14px);border:1px solid var(--glass-bd);
  border-radius:var(--r-s);padding:20px 18px;box-shadow:var(--sh-m)}
.mk-col h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk);font-family:var(--sans);
  font-weight:600;padding-bottom:11px;border-bottom:1px solid var(--stroke)}
.mk-col ul{list-style:none;margin:0;padding:12px 0 0}
.mk-col li{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.6px;color:var(--ink-2);transition:color .3s var(--ease)}
.mk-col li:hover{color:var(--green)}
.mk-col li .fl{font-size:15px;line-height:1}
.mk-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--stroke);display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.ports{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.ports b{color:var(--green);font-weight:600}

/* ---------- Shipping band ---------- */
.band{position:relative;overflow:hidden;min-height:min(66vh,520px);display:flex;align-items:center}
/* <picture> is layout-transparent so every existing `img` rule keeps working
   after the WebP wrapper was introduced; the selector below is widened
   from `>img` for the same reason (selectors still see the wrapper). */
picture{display:contents}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,26,17,.92) 0%,rgba(9,26,17,.66) 46%,rgba(9,26,17,.2) 100%)}
.band-in{position:relative;z-index:2;padding:clamp(44px,6vw,80px) clamp(28px,5vw,68px);width:100%;color:#fff;max-width:var(--maxw);margin:0 auto}
.band-in .tt{color:#fff;max-width:16ch}
.band-in .lead{color:rgba(255,255,255,.76);margin-top:18px}
.band-ports{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.band-ports span{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);
  padding:10px 18px;border-radius:var(--r-p);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.86);transition:.35s var(--ease)}
.band-ports span:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- Private label ---------- */
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.6vw,66px);align-items:center}
.pl-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--sh-l);border:1px solid var(--glass-bd)}
.pl-media img,.pl-media .im{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pl-media:hover img,.pl-media:hover .im{transform:scale(1.05)}
.pl-media .badge{position:absolute;left:14px;bottom:14px;right:auto;max-width:calc(100% - 28px);width:max-content;padding:13px 18px;border-radius:var(--r-s);
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);box-shadow:var(--sh-m)}
.pl-media .badge b{display:block;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-dk)}
.pl-media .badge span{font-size:13px;color:var(--ink)}
.bags{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.bag{border:1px solid var(--glass-bd);background:rgba(255,255,255,.72);backdrop-filter:blur(12px);
  border-radius:var(--r-s);padding:14px 18px;text-align:center;flex:1;min-width:86px;box-shadow:var(--sh-s);transition:.4s var(--ease)}
.bag:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.bag b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;
  background:linear-gradient(120deg,var(--green-dk),var(--green-lt));-webkit-background-clip:text;background-clip:text;color:transparent}
.bag span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;color:var(--ink-2)}
.checks li svg{flex:none;margin-top:3px}

/* ---------- Quote / CTA band (vivid green) ---------- */
.quote{position:relative;overflow:hidden;
  background:linear-gradient(140deg,#2E8C5C 0%,#1B6B45 42%,#0F4530 100%);color:#fff;padding:clamp(52px,7vw,96px) 0}
.quote .bgimg{position:absolute;inset:0;opacity:.16;mix-blend-mode:luminosity}
.quote .bgimg img{width:100%;height:100%;object-fit:cover}
.quote::before{content:"";position:absolute;right:-8%;top:-24%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.42),transparent 64%);pointer-events:none}
.quote::after{content:"";position:absolute;left:-12%;bottom:-30%;width:48%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(108,76,166,.3),transparent 64%);pointer-events:none}
.quote .wrap{position:relative;z-index:2}
.qform{
  margin-top:clamp(28px,3.6vw,44px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r);padding:clamp(20px,2.8vw,36px);backdrop-filter:blur(10px);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.7);
}
.qrow{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.fld{position:relative;display:flex;flex-direction:column;gap:7px}
.fld label{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600}
.fld select,.fld input,.fld textarea{
  width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:11px;
  padding:13px 14px;color:#fff;font-size:14px;transition:.35s var(--ease);appearance:none;
}
/* iOS Safari zooms the whole page in when a focused control is under 16px, and
   does not zoom back out. On the enquiry form that is a real cost, so controls
   go to 16px at touch widths; 14px stays on desktop where it is a density
   choice, not an accident. */
@media (max-width:760px){
  .fld select,.fld input,.fld textarea{font-size:16px}
}
.fld select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.fld select option{background:#12492F;color:#fff}
.fld input::placeholder{color:rgba(255,255,255,.45)}
/* Live load read-out. Sits in the form's own dark palette, reserves no space
   until it has something to say, and never shifts the fields below it. */
.qload{
  margin:7px 0 0;font-size:11.5px;letter-spacing:.03em;line-height:1.45;
  color:rgba(255,255,255,.66);
  opacity:0;transform:translateY(-2px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.qload.on{opacity:1;transform:none}
.qload:empty{display:none}

.fld :is(select,input,textarea):focus{outline:none;border-color:#fff;background:rgba(255,255,255,.2);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.fld.bad :is(select,input,textarea){border-color:#FFC2A0;background:rgba(255,140,90,.16)}
.qrow2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-top:13px}
.qsub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:20px}
.qsub small{font-size:11.5px;color:rgba(255,255,255,.7);max-width:44ch;line-height:1.6}
.qsub .btn{background:#fff;color:var(--green-dk);box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.qsub .btn:hover{background:linear-gradient(135deg,#F3DC91,var(--gold));color:#22190A}
.assures{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(26px,3.4vw,42px);padding-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.assure{display:flex;gap:11px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.86)}
.assure svg{flex:none}
/* Confirmation. Sits above the submit row and is colour-coded, because the
   previous version was a white-on-white note below the button — a buyer could
   press send and see nothing change. */
.okmsg{
  display:none;margin:4px 0 16px;padding:14px 16px 14px 46px;position:relative;
  font-size:14px;line-height:1.5;color:#fff;border-radius:11px;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);
}
.okmsg.on{display:block;animation:okpop .32s var(--ease)}
@keyframes okpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.okmsg::before{
  content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;border-radius:50%;background:no-repeat center/11px 11px;
}
/* sending */
.okmsg.busy{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.okmsg.busy::before{
  background-color:rgba(255,255,255,.3);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M12 3a9 9 0 1 0 9 9'/></svg>");
  animation:okspin .8s linear infinite;
}
@keyframes okspin{to{transform:translateY(-50%) rotate(360deg)}}
/* success — clearly green, not the form's own white */
.okmsg.ok{
  background:rgba(86,200,133,.20);border-color:rgba(120,224,163,.72);
  color:#EAFFF3;box-shadow:0 0 0 1px rgba(120,224,163,.25) inset;
}
.okmsg.ok::before{
  background-color:#4FC783;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'><path d='M20 6 9 17l-5-5'/></svg>");
}
/* problem — amber-red, distinct from success at a glance */
.okmsg.err{
  background:rgba(232,120,104,.22);border-color:rgba(245,164,150,.75);
  color:#FFEFEC;box-shadow:0 0 0 1px rgba(245,164,150,.25) inset;
}
.okmsg.err::before{
  background-color:#E0715D;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'><path d='M12 7v6M12 17v.01'/></svg>");
}
.okmsg a{color:#fff;text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  .okmsg.on{animation:none}
  .okmsg.busy::before{animation:none}
}

/* ---------- Footer ---------- */
footer{background:#0E3122;color:rgba(255,255,255,.66);padding:clamp(52px,6.5vw,86px) 0 0}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,40px)}
/* The footer carries the full stacked lockup — emblem above the wordmark,
   centred — matching how the logo artwork itself is drawn. The header keeps
   the horizontal version, which is what a nav bar has room for. */
.f-brand{text-align:center}
.f-brand .brand{flex-direction:column;align-items:center;gap:14px}
.f-brand .brand .bn strong{font-size:24px;letter-spacing:.075em}
.f-brand .brand .bn span{color:rgba(255,255,255,.88);font-size:10.5px;letter-spacing:.3em;margin-top:5px}
.f-brand .brand .bn em{color:rgba(255,255,255,.5);opacity:1;font-size:8px;margin-top:6px}
.f-brand p{font-size:12.8px;line-height:1.8;margin:20px auto 0;max-width:34ch;color:rgba(255,255,255,.55)}
.f-brand .socials{justify-content:center}
.f-col .f-h{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin:0 0 15px;font-weight:600}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-col a{font-size:13.2px;color:rgba(255,255,255,.6);transition:.3s var(--ease)}
.f-col a:hover{color:var(--gold)}
.f-con a{display:flex;gap:10px;align-items:flex-start;font-size:13.2px;color:rgba(255,255,255,.75);word-break:break-word}
.f-con .row{margin-bottom:13px}
.socials{display:flex;gap:9px;margin-top:20px}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-p);display:grid;place-items:center;transition:.35s var(--ease)}
.socials a:hover{background:var(--gold);border-color:var(--gold)}
.socials a:hover svg{stroke:#22190A}
.f-bot{margin-top:clamp(36px,4.6vw,60px);border-top:1px solid rgba(255,255,255,.1);padding:20px 0;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.4)}
.f-bot a{color:rgba(255,255,255,.62)}
.f-bot a:hover{color:var(--gold)}

/* ---------- Toast + FAB ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:80;
  display:flex;align-items:center;gap:14px;max-width:min(560px,92vw);
  background:rgba(255,255,255,.9);backdrop-filter:blur(20px);color:var(--ink);
  border:1px solid var(--glass-bd);border-left:3px solid var(--gold);
  padding:15px 18px;border-radius:var(--r-s);box-shadow:var(--sh-l);
  transition:transform .55s var(--ease),opacity .55s var(--ease);opacity:0;
}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast svg{flex:none}
.toast p{font-size:12.8px;line-height:1.6;color:var(--muted)}
.toast p b{color:var(--green);font-weight:600;display:block;font-size:11.5px;letter-spacing:.05em;margin-bottom:2px}
.toast button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:0 2px;margin-left:auto}
.toast button:hover{color:var(--ink)}
/* ---------- Floating actions (WhatsApp + quote) ---------- */
.fabs{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;flex-direction:column;gap:12px}
.fab{
  position:relative;width:52px;height:52px;border-radius:var(--r-p);
  background:var(--green);color:#fff;display:grid;place-items:center;
  box-shadow:0 18px 34px -14px rgba(27,107,69,.8);transition:.4s var(--ease);
}
/* WhatsApp is always available — a buyer on a phone should never have to
   scroll to find it. The quote button still fades in on scroll. */
.fab-wa{background:#25D366;box-shadow:0 18px 34px -14px rgba(37,211,102,.85)}
.fab-quote{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none}
.fab-quote.on{opacity:1;transform:none;pointer-events:auto}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab-quote.on:hover{transform:translateY(-3px) scale(1.04)}

/* label on hover, desktop only */
.fab-tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;letter-spacing:.02em;
  padding:7px 12px;border-radius:var(--r-s);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.fab:hover .fab-tip{opacity:1;transform:translateY(-50%)}
@media (hover:none){.fab-tip{display:none}}
[dir="rtl"] .fabs{right:auto;left:20px}
[dir="rtl"] .fab-tip{right:auto;left:calc(100% + 12px)}

/* ---------- Reveal ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .menu{display:none}
  .burger{display:block}
  .nav-cta .btn{display:none}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split-r{min-height:500px}
  .mk-grid,.pl-grid{grid-template-columns:1fr}
  .qrow{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr 1fr}
  .f-brand{grid-column:1/-1}
  .range-list{grid-template-columns:repeat(2,1fr)}
  .range-head{grid-template-columns:1fr;align-items:start}
  .fac-grid{grid-template-columns:1fr 1fr}
  .fac.big{grid-column:span 2;grid-row:auto;min-height:300px}
  .fac-stats{grid-template-columns:1fr 1fr}
  .hero-strip{max-width:none}
}
@media(max-width:760px){
  .topbar .tb-r{display:none}
  /* Same reasoning as the desktop rule: the hero ends where the viewport does,
     so the trust line stays on the first screen instead of just below it. */
  .hero{min-height:calc(100vh - var(--hdr,128px));min-height:calc(100svh - var(--hdr,128px))}
  .hero-trust .cert{padding:11px 22px}
  .hcap{display:none}
  .hero-caps{min-height:0}
  .hero-strip .wrap{grid-template-columns:1fr 1fr}
  .hs{border-bottom:1px solid var(--stroke);padding:18px 16px}
  .hs:nth-child(2n){border-right:0}
  .hs:nth-last-child(-n+2){border-bottom:0}
  .sec-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .prod-grid{grid-template-columns:1fr}
  .mk-cols{grid-template-columns:1fr}
  .qrow,.qrow2{grid-template-columns:1fr}
  .assures{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .lead-card{margin:14px}
  .range-list{grid-template-columns:1fr}
  .fac-grid{grid-template-columns:1fr}
  .fac.big,.fac-quote{grid-column:span 1}
  .fac{min-height:200px}
  .band{min-height:auto}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}
/* ==========================================================================
   Language switcher
   Top-bar dropdown (and a wider variant inside the mobile drawer).
   ========================================================================== */
.lang{position:relative;display:inline-flex}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:11.5px;letter-spacing:.05em;color:var(--ink-2);
  background:none;border:0;padding:2px 0;cursor:pointer;
  transition:color .25s var(--ease);
}
/* These sit in a deliberately compact top bar, so the visual box stays small
   and the touch target is extended past it instead — 23px of hit area is under
   the 24px floor and awkward on a phone. Layout is untouched. */
.lang-btn,.lang-more-btn,.tb-r a,.crumbs a,.f-bot a{position:relative}
.lang-btn::after,.lang-more-btn::after,
.tb-r a::after,.crumbs a::after,.f-bot a::after{
  content:"";position:absolute;inset:-7px 0;   /* vertical only: adjacent links must not overlap */
}
.lang-btn:hover,.lang.open .lang-btn{color:var(--gold-dk)}
.lang-btn .cv{transition:transform .3s var(--ease)}
.lang.open .lang-btn .cv{transform:rotate(180deg)}
.lang-cur{font-weight:600}

.lang-menu{
  position:absolute;top:calc(100% + 9px);right:0;min-width:212px;padding:6px 0;
  background:#fff;border:1px solid var(--stroke-2);border-top:2px solid var(--green);
  border-radius:0 0 var(--r-s) var(--r-s);box-shadow:0 26px 50px -32px rgba(18,42,28,.7);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);transform-origin:top right;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:70;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{
  display:flex;align-items:baseline;gap:9px;padding:9px 16px;
  font-size:13px;letter-spacing:0;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lang-menu a:hover{background:var(--sand);color:var(--green)}
.lang-menu a.on{color:var(--green);font-weight:600;background:rgba(27,107,69,.06)}
.lang-flag{font-size:14px;line-height:1}
.lang-name{flex:1;unicode-bidi:isolate}
.lang-en{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lang-menu a.on .lang-en{color:var(--green-lt)}

/* drawer variant — full width, always open below the CTA */
.mlang{margin-top:26px;padding-top:22px;border-top:1px solid var(--stroke)}
.mlang .lang{display:block;width:100%}
.mlang .lang-btn{font-size:12px;width:100%;justify-content:flex-start;margin-bottom:10px}
.mlang .lang-menu{
  position:static;opacity:1;visibility:visible;transform:none;
  min-width:0;box-shadow:none;background:transparent;border:0;border-top:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;
}
.mlang .lang-menu a{padding:10px 12px;border:1px solid var(--stroke);border-radius:var(--r-s)}

@media (max-width:860px){
  .topbar .lang{display:none}
}

/* ---------- "More languages" (Google Translate, on demand) ---------- */
.lang-more{border-top:1px solid var(--stroke);margin-top:6px;padding:8px 16px 10px}
.lang-more-btn{
  display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;
  color:var(--muted);background:none;border:0;padding:2px 0;cursor:pointer;
  transition:color .25s var(--ease);
}
.lang-more-btn:hover{color:var(--green)}
.lang-more.asked .lang-more-btn{display:none}
.gt-slot{display:none;padding-top:2px}
.gt-slot.on{display:block}
.lang-more-note{font-size:10px;letter-spacing:.04em;color:var(--muted);opacity:.75;margin-top:7px}

/* Google injects its own chrome — keep it from moving the page or clashing.
   Scoped to the classes Google itself puts on <html>, so none of this touches
   the page unless Google is actually running. */
.translated-ltr .goog-te-banner-frame,
.translated-rtl .goog-te-banner-frame,
.translated-ltr .skiptranslate iframe,
.translated-rtl .skiptranslate iframe{display:none !important}
.translated-ltr body,.translated-rtl body{top:0 !important}
.goog-te-gadget{font-family:var(--sans) !important;font-size:0 !important;line-height:0 !important}
.goog-te-gadget .goog-te-combo{
  font-family:var(--sans);font-size:12.5px;color:var(--ink-2);
  width:100%;max-width:100%;padding:7px 9px;margin:0;
  background:#fff;border:1px solid var(--stroke-2);border-radius:var(--r-s);
}
.goog-te-gadget .goog-te-combo:focus{outline:none;border-color:var(--green)}
/* strip Google's logo / "Powered by" chrome; keep only the select */
.goog-te-gadget>span,.goog-te-gadget img,.goog-logo-link,
.goog-te-gadget .goog-te-gadget-icon{display:none !important}
font[style]{background:none !important;box-shadow:none !important}

/* Countries that have their own page are links (homepage markets list). */
.mk-col li a{border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.mk-col li a:hover{color:var(--green);border-bottom-color:var(--gold)}
.card h3 a{transition:color .3s var(--ease)}
.card:hover h3 a{color:var(--green)}