/* =========================================================
   Ambioxera website styles
   Brand palette taken from the Ambioxera logo.
   ========================================================= */
/* Fonts are served from this site (no third-party requests) */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hanken-grotesk-600.woff2) format('woff2')}
:root{
  --ink:#1C1A4A;          /* deep brand indigo */
  --ink-2:#262362;        /* logo wordmark navy */
  --ink-3:#36338A;
  --ink-deep:#131234;
  --serum:#E2A33E;        /* the colour of serum itself */
  --serum-deep:#B5761C;
  --straw:#F2E3BD;
  --paper:#F6F6FA;
  --white:#FFFFFF;
  --slate:#5D5C7A;
  --line:rgba(28,26,74,.13);
  --line-dark:rgba(246,246,250,.15);
  --soft:rgba(246,246,250,.74);
  /* logo colours */
  --b-plum:#93298E; --b-violet:#663091; --b-indigo:#2C3691; --b-blue:#0872BA; --b-cyan:#00A7E1; --b-aqua:#6ECDDD; --b-pink:#B9519F;
  --brand-grad:linear-gradient(90deg,#93298E,#663091,#2C3691,#0872BA,#00A7E1,#6ECDDD);
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --gutter:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,.8,.24,1);
  --rot:0deg;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--serum);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--serum);color:var(--ink);padding:8px 14px;z-index:200}
.skip:focus{left:8px}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.018em;margin:0;line-height:1.05}
h2,h3{text-wrap:balance}
/* paragraphs: let the browser avoid leaving a single word on the last line */
p,li,dd,.lede{text-wrap:pretty}
h2{font-size:clamp(34px,4.6vw,64px)}
h3{font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.2}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--slate)}

/* Scroll progress in brand colours */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--brand-grad);transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);padding:16px 26px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-serum{background:var(--serum);color:var(--ink)}
.btn-serum:hover{background:var(--straw)}
.btn-ghost{border-color:rgba(246,246,250,.35);color:var(--paper);background:transparent}
.btn-ghost:hover{border-color:var(--paper)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-3)}

/* ---------- Logo (wordmark + turning mark) ---------- */
.logo{position:relative;display:block;width:158px;aspect-ratio:796/327}
.logo .wm{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s}
.logo .wm-dark{opacity:0}
.logo .gear{position:absolute;left:57%;top:-9.6%;width:45.06%;height:109.7%;max-width:none}
/* floating gear: turns with scroll, takes you back to the top */
.to-top{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:90;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 10px 30px -8px rgba(28,26,74,.45);display:grid;place-items:center;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top img{width:46px;height:46px;transition:transform .6s var(--ease)}
.to-top:hover img{transform:rotate(-90deg)}
/* phones: a smaller button tucked further into the corner, so it covers less of what you are reading */
@media (max-width:600px){.to-top{width:44px;height:44px;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}.to-top img{width:34px;height:34px}}

/* ---------- Header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:100;padding-top:env(safe-area-inset-top,0px);color:var(--paper);transition:background .35s,color .35s,box-shadow .35s}
.site-head.scrolled,.site-head.light{background:rgba(246,246,250,.86);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.site-head.scrolled .wm-light,.site-head.light .wm-light,.site-head.open .wm-light{opacity:0}
.site-head.scrolled .wm-dark,.site-head.light .wm-dark,.site-head.open .wm-dark{opacity:1}
.head-row{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{text-decoration:none;display:block}
.nav{display:flex;align-items:center;gap:32px}
.nav a{text-decoration:none;font-size:15px;font-weight:500;opacity:.82;transition:opacity .2s;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:not(.btn):hover{opacity:1}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{opacity:1;padding:12px 20px}
.site-head.scrolled .nav .btn-ghost,.site-head.light .nav .btn-ghost{color:var(--ink);border-color:var(--line)}
.menu-btn{display:none;background:none;border:0;color:inherit;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1.5px;background:currentColor;margin:6px 0;transition:transform .3s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;background:radial-gradient(120% 90% at 85% 40%,#2A2770 0%,var(--ink) 55%,var(--ink-deep) 100%);color:var(--paper);overflow:hidden;display:flex;align-items:center}
.hero-gear{position:absolute;width:min(1150px,130vw);aspect-ratio:1;right:-26%;top:50%;margin-top:calc(min(1150px,130vw) / -2);opacity:0;transform:rotate(-40deg) scale(.92);transition:opacity 2.4s var(--ease),transform 2.4s var(--ease);pointer-events:none;max-width:none;will-change:transform,rotate}
.hero.ready .hero-gear{opacity:.17;transform:none}
.hero-gear{will-change:transform,rotate}
.hero::after{content:"";position:absolute;width:760px;height:760px;right:4%;top:50%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(226,163,62,.20),rgba(226,163,62,0));pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%;padding-top:130px;padding-bottom:90px}
@media (min-width:981px){.hero-copy{will-change:transform,opacity}}
.hero h1{font-size:clamp(44px,6vw,88px);max-width:13ch}
.hero .lede{color:var(--soft);margin:28px 0 40px;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin:64px 0 0;padding:28px 0 0;border-top:1px solid var(--line-dark);list-style:none;font-size:15px;color:rgba(246,246,250,.66)}
.hero-facts li{display:flex;align-items:center;gap:10px}
.hero-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--serum)}
/* desktop: slightly tighter spacing so the whole top section, key points included, fits a typical laptop screen */
@media (min-width:981px){
  /* the top section scales with screen height as well as width, so the headline, intro, buttons, key points and bottle
     all fit on laptops, including Windows display scaling (125%/150%) where the visible area is short */
  .hero h1{font-size:clamp(40px,min(6vw,calc(11.5vh - 26px)),88px)}
  .hero-grid{padding-top:max(100px,min(112px,14vh));padding-bottom:min(90px,4vh)}
  .hero .lede{margin:min(24px,2.4vh) 0 min(34px,3.4vh);max-width:52ch;font-size:max(17px,min(clamp(19px,1.6vw,22px),2.8vh))}
  .hero-facts{margin-top:min(42px,3.4vh);padding-top:min(22px,2.2vh)}
  .hero .bottle-wrap{width:min(380px,86%,46vh)}
}
.bottle-stage{position:relative;display:flex;justify-content:center;z-index:2}
.bottle-wrap{position:relative;width:min(380px,86%)}
.bottle,.bottle-front{display:block;width:100%;height:auto;overflow:visible}
.bottle-front{position:absolute;inset:0;will-change:transform;pointer-events:none}
/* soft shadow under the bottle: a fixed gradient, so the animated serum never forces a blur to be recalculated */
.bottle-stage::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-6%;width:min(420px,96%);height:34%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(5,4,24,.55),rgba(5,4,24,.22) 55%,rgba(5,4,24,0));pointer-events:none}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;width:24px;height:40px;border:1.5px solid rgba(246,246,250,.4);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;border-radius:2px;background:var(--serum);transform:translateX(-50%);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}100%{opacity:0}}

/* Hero entrance (one orchestrated moment) */
.hero .in-1,.hero .in-2,.hero .in-3,.hero .in-4{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.hero.ready .in-1{opacity:1;transform:none;transition-delay:.15s}
.hero.ready .in-2{opacity:1;transform:none;transition-delay:.35s}
.hero.ready .in-3{opacity:1;transform:none;transition-delay:.55s}
.hero.ready .in-4{opacity:1;transform:none;transition-delay:.8s}

/* ---------- Scroll reveals ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1;transform:none}
.rv-title{clip-path:inset(0 0 100% 0);transform:translateY(40px);transition:clip-path 1.2s var(--ease),transform 1.2s var(--ease)}
.rv-title.in{clip-path:inset(0 0 -10% 0);transform:none}

/* ---------- Generic sections ---------- */
section{position:relative}
.sec{padding:clamp(96px,12vw,168px) 0}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:start}

/* grid columns may shrink; wide content (tables) scrolls inside its own box */
.split>*,.product>*,.journey>*,.origin-grid>*,.fac-grid>*,.retained>*{min-width:0}

/* ---------- About ---------- */
.about h2{max-width:16ch}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(64px,8vw,112px);border-top:1px solid var(--line)}
.pillar{padding:36px 36px 0 0;position:relative}
.pillar + .pillar{padding-left:36px;border-left:1px solid var(--line)}
.pillar::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--brand-grad);transition:width 1.4s var(--ease)}
.pillar + .pillar::before{left:36px}
.pillar.in::before{width:64px}
.pillar h3{margin-bottom:12px}
.pillar p{color:var(--slate);font-size:16px}

/* ---------- Facility photo ---------- */
.facility{padding:0 0 clamp(96px,12vw,168px)}
.facility-head{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.facility-head p{margin:0}
.facility-frame{position:relative;height:min(88vh,860px);overflow:hidden;border-radius:28px;margin:0 clamp(8px,1.2vw,16px);transform:scale(.84);transform-origin:50% 0;will-change:transform;contain:paint;isolation:isolate}
.facility-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.14);will-change:transform;backface-visibility:hidden}
@supports (animation-timeline: view()){
  .facility-frame{animation:frameOpen linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  .facility-frame img{animation:frameImg linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
}
@keyframes frameOpen{from{transform:scale(.84)}to{transform:scale(1)}}
@keyframes frameImg{from{transform:scale(1.14)}to{transform:scale(1)}}
.facility-frame.is-video .fac-still img{animation:none;transform:none}
.facility-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,18,52,.92) 0%,rgba(19,18,52,.55) 18%,rgba(19,18,52,0) 42%),linear-gradient(to bottom,rgba(19,18,52,.25),rgba(19,18,52,0) 20%)}
.facility-cap{position:absolute;z-index:2;left:0;right:0;bottom:0;color:var(--paper)}
.facility-cap .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;padding-bottom:clamp(28px,4vw,48px)}
.facility-cap strong{display:block;font:300 clamp(28px,3vw,44px)/1.1 var(--serif)}
.facility-cap span{color:var(--soft);font-size:15px}
/* Brand film inside the facility frame */
.facility-frame.is-video{height:auto;aspect-ratio:16/9;max-height:90vh;background:#0B1030}
.facility-frame.is-video::after{display:none}
.facility-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.facility-frame .fac-still{display:none}
.facility-frame.use-still .fac-still{display:block}
.facility-frame.use-still video,.facility-frame.use-still .vid-toggle{display:none}
.facility-frame.use-still::after{display:block}
.vid-btns{position:absolute;right:clamp(12px,1.6vw,18px);top:clamp(12px,1.6vw,18px);z-index:3;display:flex;gap:8px}
.vid-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(19,18,52,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.8;transition:opacity .25s,background .25s,transform .25s var(--ease)}
.vid-btn:hover,.vid-btn:focus-visible{opacity:1;background:rgba(19,18,52,.75);transform:scale(1.06)}
.vid-btn svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vid-toggle .i-play{display:none;fill:#fff;stroke:none}
.vid-toggle.paused .i-play{display:block}
.vid-toggle.paused .i-pause{display:none}
.facility-frame.use-still .vid-btns,.use-still ~ .fac-cap .link-btn{display:none}

/* Facility: film on the left, story on the right */
.facility{padding-top:0}
.fac-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.facility-frame.is-video{margin:0;border-radius:22px;animation:none;transform:none;max-height:none;box-shadow:0 40px 80px -44px rgba(28,26,74,.65)}
.facility-frame.is-video video{cursor:zoom-in}
.fac-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:16px 4px 0;max-width:none}
.fac-cap strong{font:400 19px/1.2 var(--serif)}
.link-btn{white-space:nowrap;background:none;border:0;padding:0;font:600 14px var(--sans);color:var(--ink-3);cursor:pointer;border-bottom:1px solid var(--line)}
.link-btn:hover{border-color:var(--ink-3)}
.fac-text{margin:26px 0 30px;color:var(--slate)}
.fac-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.fac-points li{display:flex;align-items:center;gap:14px;font-weight:500}
.fp-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--white);border:1px solid var(--line);display:grid;place-items:center}
.fp-ic svg{width:20px;height:20px;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fac-vision{position:relative;margin:26px 0 0;padding:4px 0 4px 22px}
.fac-vision::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--b-plum),var(--b-indigo),var(--b-cyan))}
.fac-vision p{margin:0;font:300 clamp(20px,1.7vw,24px)/1.4 var(--serif);color:var(--ink-2)}
@media (max-width:980px){.fac-grid{grid-template-columns:1fr}.fac-copy{order:-1}}

/* Full-size film viewer */
.vlight{position:fixed;inset:0;z-index:200;background:rgba(11,10,34,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top,0px)) 20px max(20px,env(safe-area-inset-bottom,0px));opacity:0;transition:opacity .3s var(--ease)}
.vlight.open{opacity:1}
.vlight[hidden]{display:none}
.vl-inner{position:relative;width:min(1400px,100%,calc((100vh - 80px) * 16 / 9))}
.vl-inner video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);transform:scale(.96);transition:transform .35s var(--ease)}
.vlight.open .vl-inner video{transform:none}
.vl-close{position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);display:grid;place-items:center;cursor:pointer}
.vl-close svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.vl-close:hover{background:rgba(255,255,255,.18)}
.fac-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 40px;margin-top:28px}
.fac-bar strong{display:block;font:300 clamp(24px,2.4vw,34px)/1.15 var(--serif)}
.fac-bar span{color:var(--slate);font-size:15px}

/* Interior photo slot, see index.html */
.facility-duo{display:grid;grid-template-columns:7fr 5fr;gap:24px;margin-top:24px}
.facility-duo figure{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3}
.facility-duo img{width:100%;height:100%;object-fit:cover}

/* ---------- Serum / product ---------- */
.serum-sec{background:var(--white)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.droplet-panel{position:relative;aspect-ratio:4/5;border-radius:28px;background:linear-gradient(160deg,#F6E7C4 0%,#EBC780 55%,#D99A35 100%);overflow:hidden;margin:0}
.droplet-panel canvas{position:absolute;inset:0;width:100%;height:100%}
.droplet-panel figcaption{position:absolute;left:28px;bottom:26px;right:28px;font:400 15px/1.4 var(--sans);color:var(--ink)}
.droplet-panel figcaption strong{display:block;font:400 30px/1.1 var(--serif);margin-bottom:6px}
.formats{margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.formats li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.formats strong{font-weight:600}
.formats span{color:var(--slate);font-size:15px;text-align:right}

/* ---------- Applications band (moves with scroll) ---------- */
.apps{background:var(--white);padding:0 0 clamp(96px,12vw,150px);overflow:hidden}
.apps-label{color:var(--slate);font-size:15px;margin-bottom:28px}
.apps-row{display:flex;width:max-content;white-space:nowrap;font:300 clamp(40px,6vw,88px)/1.15 var(--serif);letter-spacing:-.02em;transform:translate3d(0,0,0);backface-visibility:hidden;animation:marquee 48s linear infinite;animation-play-state:paused}
.apps-row.rev{animation-direction:reverse;animation-duration:58s}
.apps.playing .apps-row{animation-play-state:running}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.apps-row + .apps-row{margin-top:10px;color:transparent;-webkit-text-stroke:1px rgba(28,26,74,.35)}
.apps-row span{display:inline-flex;align-items:center;gap:44px;padding-right:44px}
.apps-row span::after{content:"";width:.28em;height:.28em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--serum)}

/* ---------- Origin band ---------- */
.origin{background:var(--straw);padding:clamp(96px,12vw,160px) 0}
.origin-statement{font:300 clamp(32px,3.6vw,54px)/1.15 var(--serif);letter-spacing:-.015em;max-width:20ch;margin:0}
.origin-statement .w{opacity:.18;transition:opacity .25s linear}
.origin-statement .w.on{opacity:1}
.origin-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:72px}
.origin-notes p{font-size:16px;color:var(--ink-2);margin:0}
.origin-notes strong{display:block;font-weight:600;margin-bottom:6px}

/* ---------- About: product receival to sampled batch animation ---------- */
.lineage{margin:56px 0 0;max-width:520px}
.lineage svg{width:100%;height:auto;overflow:visible}
.ln{fill:none;stroke-width:1.7;stroke-opacity:.6;stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.2s var(--ease)}
.ln-a{stroke:url(#lnIn);transition-delay:calc(.5s + var(--i) * 80ms)}
.ln-b{stroke:url(#lnAmb);transition-delay:calc(1.5s + var(--i) * 90ms)}
.ln-c{stroke:var(--serum);stroke-dasharray:4 5;stroke-dashoffset:0;opacity:0;transition:opacity .5s 2.4s}
.lineage.in .ln{stroke-dashoffset:0}
.lineage.in .ln-c{opacity:.8}
.runners circle{opacity:0;transition:opacity .5s 1.4s}
.run-a{fill:#C9561F}
.run-b{fill:var(--serum)}
.lineage.in .runners circle{opacity:1}
.bag{opacity:0;transition:opacity .6s var(--ease);transition-delay:calc(var(--i) * 90ms)}
.lineage.in .bag{opacity:1}
.bag-body{fill:url(#bagFill)}
.bag-port{fill:#6E2A0C}
.bag-tag{fill:#fff;opacity:.8}
.bag-shine{fill:#fff;opacity:.22}
.mfg{opacity:0;transition:opacity .7s .9s}
.lineage.in .mfg{opacity:1}
.cf-bg{fill:#fff}
.cf-ring{fill:none;stroke:url(#lnGrad);stroke-width:2.5}
.rotor{transform-box:view-box;transform-origin:165px 163px;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rotor-arm{stroke:#262362;stroke-width:2.5;stroke-linecap:round}
.rotor-cup{fill:#C9561F}
.rotor-hub{fill:#262362}
.lot{opacity:0;transition:opacity .7s 1.6s}
.lineage.in .lot{opacity:1}
.lot-frame{fill:rgba(102,48,145,.05);stroke:var(--b-violet);stroke-width:1.4;stroke-dasharray:5 5;stroke-opacity:.6}
.can{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(1.7s + var(--i) * 120ms)}
.lineage.in .can{opacity:1}
.can-body{fill:#fff;stroke:#262362;stroke-opacity:.28}
.can-cap{fill:#262362}
.can-fill{fill:var(--serum);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1s var(--ease);transition-delay:calc(2.1s + var(--i) * 160ms)}
.lineage.in .can-fill{transform:none}
.tube{opacity:0;transition:opacity .5s 2.5s}
.lineage.in .tube{opacity:1}
.tube-body{fill:#fff;stroke:#262362;stroke-opacity:.3}
.tube-fill{fill:var(--serum);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s var(--ease) 2.6s}
.lineage.in .tube-fill{transform:scaleY(.6)}
.tick circle{fill:#3E9E72}
.tick path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tick{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .3s 3.1s,transform .5s cubic-bezier(.3,1.6,.5,1) 3.1s}
.lineage.in .tick{opacity:1;transform:none}
.ln-tiny{font:500 9.5px var(--sans);fill:var(--slate)}
.ln-strong{font:600 11px var(--sans);fill:var(--ink)}
.ln-note{font:500 11px var(--sans);fill:var(--b-violet)}
.ln-labels text{font:500 12.5px var(--sans);fill:var(--slate)}

/* ---------- About: one continuous process diagram, receival to air freight ---------- */
.about .lineage{margin:72px 0 0;max-width:none}
/* the About heading now stands alone in its column (the diagram sits below), so give it half the width instead of 40% */
@media (min-width:981px){.about .split{grid-template-columns:1.1fr .9fr}}
.lineage .lbl{opacity:0;transition:opacity .6s var(--ease) var(--t,0s)}
.lineage.in .lbl{opacity:1}
.lineage .lo{transform:translate(540px,0)}
.lineage .lo-stage{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease) var(--t),transform .7s var(--ease) var(--t)}
.lineage.in .lo-stage{opacity:1;transform:none}
.lineage .lo .runners circle{opacity:0;transition:opacity .5s var(--t)}
.lineage.in .lo .runners circle{opacity:1}
.lo-flow{fill:none;stroke-width:1.7;stroke-dasharray:4 5;opacity:0;transition:opacity .6s var(--t)}
.lineage.in .lo-flow{opacity:.75}
.lo-flow-amb{stroke:var(--serum)}
.lo-flow-ice{stroke:var(--b-cyan)}
.run-ice{fill:var(--b-cyan)}
.lo-floor,.lo-road,.lo-lane,.lo-runway,.lo-rwmark{opacity:0;transition:opacity .8s 3.2s}
.lo-road,.lo-lane{transition-delay:4.2s}
.lo-runway,.lo-rwmark{transition-delay:4.8s}
.lineage.in :is(.lo-floor,.lo-road,.lo-lane,.lo-runway,.lo-rwmark){opacity:1}
.lo-floor{stroke:rgba(28,26,74,.16);stroke-width:2}
.lo-road{stroke:rgba(28,26,74,.28);stroke-width:2.5}
.lo-lane{stroke:rgba(28,26,74,.22);stroke-width:1.6;stroke-dasharray:10 10}
.lo-runway{fill:rgba(28,26,74,.1)}
.lo-rwmark{stroke:#fff;stroke-width:2;stroke-dasharray:8 7}
.fz-body{fill:#fff;stroke:#262362;stroke-opacity:.28;stroke-width:1.3}
.fz-foot,.fz-handle{fill:#262362;opacity:.75}
.fz-panel{fill:#262362}
.fz-flake path{fill:none;stroke:var(--b-aqua);stroke-width:1.6;stroke-linecap:round}
.fz-track{fill:rgba(255,255,255,.16)}
.fz-bar{fill:var(--b-cyan);transform-box:fill-box;transform-origin:0 50%}
.fz-fan-ring{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.fz-blades{stroke:#fff;stroke-width:1.7;stroke-linecap:round}
.fz-fan{transform-box:fill-box;transform-origin:center}
.fz-win{fill:#EAF6FB;stroke:#262362;stroke-opacity:.18}
.fz-shelf{stroke:#262362;stroke-opacity:.25;stroke-width:1.5}
.fz-snow circle{fill:#fff;opacity:0}
.lineage .lo .can-fill{transform:none;transition:none}
.fz-frost{fill:#D8F1FB;opacity:.42}
.box-body{fill:#D9B27A;stroke:#A57C42;stroke-width:1}
.box-tape{fill:#E9CB98}
.box-label{fill:#fff}
.box-line{stroke:#262362;stroke-width:1;stroke-opacity:.5}
.pl-wrap{fill:rgba(0,167,225,.05);stroke:var(--b-cyan);stroke-width:1.2;stroke-dasharray:3 4;stroke-opacity:.6}
.pl-deck{fill:#8A6A45}
.pl-block{fill:#6E5236}
.tr-box{fill:#fff;stroke:#262362;stroke-opacity:.28;stroke-width:1.3}
.tr-stripe{fill:url(#loGrad)}
.tr-flake path{fill:none;stroke:var(--b-cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tr-unit{fill:#262362;opacity:.8}
.tr-cab{fill:#262362}
.tr-glass{fill:#BFE6F5}
.tr-light{fill:var(--serum)}
.tr-chassis{fill:#262362;opacity:.85}
.tr-wheel circle{fill:#1C1A4A}
.tr-wheel .hub{fill:#fff;opacity:.85}
.tr-wheel .spoke{stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.8}
.tr-wheel{transform-box:fill-box;transform-origin:center}
.tr-speed line{stroke:var(--b-blue);stroke-width:1.8;stroke-linecap:round;opacity:0}
.ap-trail{fill:none;stroke:var(--b-cyan);stroke-width:1.6;stroke-linecap:butt;stroke-dasharray:200;stroke-dashoffset:200;opacity:0}
.pl-tail{fill:url(#loGrad)}
.pl-fuse{fill:#fff;stroke:#262362;stroke-opacity:.35;stroke-width:1.2}
.pl-win circle{fill:var(--b-blue);opacity:.7}
.pl-wing{fill:#262362;opacity:.85}
.pl-gear{fill:#1C1A4A}
.ap-plane{transform-box:fill-box;transform-origin:center}
.lo-labels text{font:500 12.5px var(--sans);fill:var(--slate)}
.dest-ring{fill:none;stroke:var(--b-cyan);stroke-width:1.4;opacity:.5}
.dest-pin{fill:var(--b-violet)}
.dest-dot{fill:#fff}
.ap-dest{opacity:0}

/* the loop (12 s): freeze, palletise, drive, fly. It starts once every step has been drawn. */
@media (prefers-reduced-motion:no-preference){
  .lineage{--T:12s;--d0:3.9s}
  .lineage.in .fz-frost{animation:lo-frost var(--T) calc(var(--d0) + var(--i) * .15s) infinite both}
  .lineage.in .fz-bar{animation:lo-bar var(--T) var(--d0) infinite both}
  .lineage.in .fz-fan{animation:spin .7s linear infinite}
  .lineage.in .fz-snow circle{animation:lo-snow 2.6s calc(var(--i) * -.37s) linear infinite}
  .lineage.in .pl-box{animation:lo-drop var(--T) calc(var(--d0) + var(--i) * .4s) infinite both}
  .lineage.in .pl-wrap{animation:lo-wrap var(--T) var(--d0) infinite both}
  .lineage.in .tr-wheel{animation:lo-wheel var(--T) var(--d0) infinite both}
  .lineage.in .tr-body{animation:lo-bob var(--T) var(--d0) infinite both}
  .lineage.in .lo-lane{animation:lo-road var(--T) var(--d0) infinite both}
  .lineage.in .tr-speed line{animation:lo-speed var(--T) var(--d0) infinite both}
  .lineage.in .ap-plane{animation:lo-fly var(--T) var(--d0) infinite both}
  .lineage.in .ap-trail{animation:lo-trail var(--T) var(--d0) infinite both}
  .lineage.in .lo-labels text{animation:lo-hl var(--T) calc(var(--d0) + var(--d)) infinite both}
  .lineage.in .ap-dest{animation:lo-dest var(--T) var(--d0) infinite both}
  .lineage.in .dest-ring{animation:lo-ring var(--T) var(--d0) infinite both;transform-box:fill-box;transform-origin:center}
  /* the first loop opens with a full pallet sliding away would look odd, so the cartons start hidden */
}
@keyframes lo-frost{0%{opacity:0}16%,86%{opacity:.5}100%{opacity:0}}
@keyframes lo-bar{0%{transform:scaleX(.16);fill:#E2A33E}16%,86%{transform:none;fill:#00A7E1}100%{transform:scaleX(.16);fill:#E2A33E}}
@keyframes lo-snow{0%{transform:translateY(0);opacity:0}12%{opacity:.95}100%{transform:translateY(126px);opacity:0}}
@keyframes lo-drop{0%,17%{opacity:0;transform:translateY(-34px)}21%{opacity:1;transform:translateY(1.5px)}23%,49%{opacity:1;transform:none}55%,100%{opacity:0;transform:translateX(30px)}}
@keyframes lo-wrap{0%,36%{opacity:0}41%,49%{opacity:1}55%,100%{opacity:0}}
@keyframes lo-wheel{0%,52%{transform:rotate(0)}76%,100%{transform:rotate(1080deg)}}
@keyframes lo-bob{0%,52%,76%,100%{transform:none}56%,64%,72%{transform:translateY(-1.2px)}60%,68%{transform:translateY(.4px)}}
@keyframes lo-road{0%,52%{stroke-dashoffset:0}76%,100%{stroke-dashoffset:200}}
@keyframes lo-speed{0%,52%{opacity:0;transform:translateX(6px)}56%,72%{opacity:.55;transform:none}76%,100%{opacity:0;transform:translateX(-6px)}}
@keyframes lo-fly{0%,75%{transform:none;opacity:1}81%{transform:translateX(30px)}87%{transform:translate(70px,-24px) rotate(-12deg)}94%{transform:translate(118px,-92px) rotate(-17deg) scale(.66);opacity:0}96%{transform:translateX(-26px);opacity:0}100%{transform:none;opacity:1}}
@keyframes lo-trail{0%,79%{stroke-dashoffset:200;opacity:.7}92%{stroke-dashoffset:0;opacity:.7}98%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:200;opacity:0}}
@keyframes lo-dest{0%,88%{opacity:0;transform:translateY(-8px)}91%,98%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes lo-ring{0%,89%{transform:scale(.4);opacity:0}91%{opacity:.6}98%,100%{transform:scale(1.9);opacity:0}}
@keyframes lo-hl{0%{fill:var(--slate)}3%,22%{fill:var(--b-violet)}26%,100%{fill:var(--slate)}}

/* narrower screens: the second half drops under the first (set by site.js) */
.lineage.stacked{max-width:560px}
.lineage.stacked .lo{transform:translate(0,334px) scale(.722)}
.lineage.stacked .lo-f0{display:none}
@media (max-width:600px){
  .lineage.stacked .lo-labels text{font-size:18px}
  .lineage.stacked .lo .ln-note{font-size:15px}
  .lineage.stacked .lo .ln-strong{font-size:14px}
  .lineage.stacked .lo .ln-tiny{display:none}
  .lineage.stacked .lo .dest-label{display:inline;font-size:14px}
}

/* ---------- Origin: animated map ---------- */
.origin-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.origin-caption{margin:28px 0 0;color:var(--ink-2);font-size:16px}
.map-wrap{position:relative}
.map-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.au-map{position:relative}
.au-map{width:100%;height:auto;overflow:visible}
.au-map .dots circle{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d) * 1.5s)}
.au-map .dots circle{fill:url(#auGrad)}
.au-map.in .dots circle{opacity:.62;transform:none}
.au-map .route{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:3 4;opacity:0;transition:opacity .6s;transition-delay:calc(1.4s + var(--i) * 120ms)}
.au-map .src{fill:#fff;stroke:var(--b-violet);stroke-width:1.6;opacity:0;transition:opacity .6s;transition-delay:calc(1.4s + var(--i) * 120ms)}
.au-map .runner{fill:var(--serum);opacity:0;transition:opacity .6s 2.2s}
.au-map.in .route{opacity:.85}
.au-map.in .src,.au-map.in .runner{opacity:1}
.facility-pin{opacity:0;transition:opacity .6s .1s}
.au-map.in .facility-pin{opacity:1}
.facility-pin .ring{fill:none;stroke:var(--serum);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ping 2.6s var(--ease) infinite}
.facility-pin .r2{animation-delay:1.3s}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.6);opacity:0}}
.pin-label{opacity:0;transition:opacity .8s 1.9s}
.au-map.in .pin-label{opacity:1}
.pl-1,.pl-2{paint-order:stroke;stroke:var(--straw);stroke-width:6px;stroke-linejoin:round}
.pl-1{font:400 22px var(--serif);fill:var(--ink)}
.pl-2{font:500 12.5px var(--sans);fill:var(--slate)}

/* ---------- Farm to client ---------- */
.story{background:var(--white)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(64px,8vw,104px) 0 0;border-top:1px solid var(--line)}
.fact{padding:28px 28px 0 0;display:flex;flex-direction:column-reverse;gap:6px}
.fact + .fact{padding-left:28px;border-left:1px solid var(--line)}
.fact dt{font-size:15px;color:var(--slate)}
.fact dd{margin:0;font:300 clamp(44px,5vw,72px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.chain{--p:0;list-style:none;margin:clamp(72px,9vw,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.chain-line{position:absolute;left:12.5%;right:12.5%;top:31px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.chain-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--b-plum),var(--b-indigo),var(--b-cyan),var(--serum));transform:scaleX(var(--p));transform-origin:left;will-change:transform}
.node{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.node-ic{width:64px;height:64px;border-radius:50%;background:var(--white);border:1.5px solid var(--line);display:grid;place-items:center;margin-bottom:18px;transition:border-color .5s,background .5s,transform .5s var(--ease),box-shadow .5s}
.node-ic svg{width:26px;height:26px;fill:none;stroke:var(--slate);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.node.lit .node-ic{border-color:transparent;background:var(--ink);transform:scale(1.06);box-shadow:0 12px 28px -10px rgba(28,26,74,.55)}
.node.lit .node-ic svg{stroke:var(--serum)}
.node strong{font:400 21px/1.2 var(--serif);margin-bottom:6px}
.node > span:last-child{font-size:14.5px;color:var(--slate);max-width:20ch}

/* ---------- Trace-back animation (Traceable section) ---------- */
.story .split{align-items:center}
.traceback{--tb:0;background:var(--ink);color:var(--paper);border-radius:24px;padding:22px 22px 18px;box-shadow:0 40px 80px -40px rgba(28,26,74,.7);position:relative;overflow:hidden}
.traceback::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 0% 0%,rgba(147,41,142,.25),transparent 70%),radial-gradient(50% 50% at 100% 100%,rgba(0,167,225,.18),transparent 70%);pointer-events:none}
.tb-top{position:relative;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft);margin-bottom:22px}
.tb-tag{margin-left:auto;font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(246,246,250,.08);color:rgba(246,246,250,.6)}
.tb-dot{width:8px;height:8px;border-radius:50%;background:var(--serum);box-shadow:0 0 0 4px rgba(226,163,62,.22);transition:background .3s,box-shadow .3s}
.traceback.done .tb-dot{background:#3E9E72;box-shadow:0 0 0 4px rgba(62,158,114,.25)}
.tb-stage{position:relative}
.tb-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tb-lines path{fill:none;stroke:url(#tbGrad);stroke-width:1.6;stroke-linecap:round;transition:stroke-dashoffset .7s var(--ease)}
.tb-lines circle{fill:var(--serum)}
.tb-grid{position:relative;display:grid;grid-template-columns:.95fr 1fr 1.25fr 1fr;gap:24px;align-items:center;min-height:300px}
.tb-col{display:grid;gap:10px}
.tb-card{background:rgba(246,246,250,.06);border:1px solid var(--line-dark);border-radius:12px;padding:10px 12px;display:grid;gap:1px;opacity:.12;transform:translate3d(0,6px,0);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s,background .5s}
.tb-card.on{opacity:1;transform:none}
.tb-card.hot{border-color:rgba(226,163,62,.7);background:rgba(226,163,62,.12)}
.tb-card span{font-size:11.5px;color:var(--soft)}
.tb-card b{font-size:14px;color:var(--white);letter-spacing:.01em;white-space:nowrap}
.tb-card em{white-space:nowrap}
.tb-card em{font-style:normal;font-size:12px;color:rgba(246,246,250,.66)}
.tb-ok::after{content:"";display:inline-block;width:4px;height:8px;border:solid #5BC293;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 0 2px 8px}
.tb-carton{padding:14px 12px}
.tb-carton b{font-size:16px}
.tb-heads{position:relative;display:grid;grid-template-columns:.95fr 1fr 1.25fr 1fr;gap:24px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-dark);font-size:12px;color:rgba(246,246,250,.5)}
@media (max-width:1100px) and (min-width:981px){.tb-grid,.tb-heads{gap:16px}.tb-card b{font-size:13px}}
@media (max-width:600px){
  .tb-grid{grid-template-columns:1fr;gap:26px;min-height:0}
  .tb-cans{grid-template-columns:1fr 1fr}
  .tb-heads{display:none}
}

/* ---------- CoA identity block ---------- */
.coa-id{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.coa-id dt{font-size:12px;color:var(--slate)}
.coa-id dd{margin:2px 0 0;font-weight:600;font-size:15px}

.is-paused *{animation-play-state:paused!important}

/* ---------- Traceability journey ---------- */
.trace{background:var(--ink);color:var(--paper);overflow:clip}
.trace::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 0% 0%,rgba(147,41,142,.18),transparent 70%),radial-gradient(50% 40% at 100% 100%,rgba(0,167,225,.14),transparent 70%);pointer-events:none}
.trace .wrap{position:relative}
.trace-head{max-width:760px}
.trace-head .lede{color:var(--soft);margin-top:24px}
.journey{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);margin-top:clamp(64px,8vw,112px)}
.stages-box{position:relative}
.stages{position:relative;list-style:none;margin:0;padding:0 0 0 56px}
.rail{position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line-dark);border-radius:2px}
.rail i{position:absolute;inset:0;transform:scaleY(0);transform-origin:top;will-change:transform;background:linear-gradient(180deg,var(--b-plum),var(--b-indigo),var(--b-cyan),var(--serum));border-radius:2px}
.stage{position:relative;padding:0 0 clamp(64px,9vh,110px);opacity:.34;transition:opacity .5s var(--ease)}
.stage:last-child{padding-bottom:28vh}
@media (max-width:980px){.stage:last-child{padding-bottom:0}}
.stage.active,.stage.done{opacity:1}
.stage .num{position:absolute;left:-56px;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--sans);background:var(--ink);border:1.5px solid var(--line-dark);color:var(--paper);transition:background .4s,border-color .4s,color .4s,transform .4s var(--ease)}
.stage.active .num{transform:scale(1.15)}
.stage.active .num,.stage.done .num{background:var(--serum);border-color:var(--serum);color:var(--ink)}
.stage h3{margin-bottom:10px;color:var(--white)}
.stage p{color:var(--soft);font-size:16px}
.captured{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.captured span{font-size:13px;padding:6px 12px;border-radius:999px;background:rgba(246,246,250,.08);color:var(--straw)}
.record{position:sticky;top:120px;background:var(--paper);color:var(--ink);border-radius:20px;padding:30px 32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.record::before{content:"";position:absolute;left:32px;right:32px;top:0;height:3px;background:var(--brand-grad);border-radius:0 0 3px 3px}
.record-top{display:flex;justify-content:flex-end;align-items:baseline;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.record-top strong{font:400 26px/1.1 var(--serif)}
.record-top span{font-size:13px;color:var(--slate)}
.record dl{margin:0}
.record .row{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:10px 8px;margin:0 -8px;border-radius:6px;border-bottom:1px dashed var(--line);font-size:15px}
.record dt{color:var(--slate);transition:color .3s}
.record dd{margin:0;font-weight:500;opacity:0;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.record .row.on dd{opacity:1;transform:none}
.record .row.on dt{color:var(--ink)}
.record-foot{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--slate)}
/* record: segmented progress, new-row highlight, completion badge */
.segs{display:flex;gap:4px;width:150px;flex:none}
.segs i{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .4s}
.segs i.on{background:var(--serum)}
.record.complete .segs i{background:#3E9E72}
.record .row.on{animation:rowIn 1.1s var(--ease)}
@keyframes rowIn{0%{background:rgba(226,163,62,.22)}100%{background:rgba(226,163,62,0)}}
.traced-badge{position:absolute;right:24px;bottom:-18px;background:#3E9E72;color:#fff;font:600 13px/1 var(--sans);padding:10px 16px;border-radius:999px;box-shadow:0 10px 24px -8px rgba(62,158,114,.6);opacity:0;transform:translateY(10px) scale(.9);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.traced-badge::before{content:"";display:inline-block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 9px 2px 0}
.record.complete .traced-badge{opacity:1;transform:none}

/* ---------- Quality ---------- */
.quality .split{align-items:center}
.coa{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3vw,40px);box-shadow:0 1px 0 var(--line),0 30px 70px -40px rgba(28,26,74,.5)}
.coa-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.coa-head strong{font:400 24px/1.15 var(--serif);display:block}
.coa-head span{font-size:14px;color:var(--slate)}
.coa-stamp{flex:none;width:76px;height:76px;border-radius:50%;border:1.5px solid #8A5510;color:#8A5510;display:grid;place-items:center;text-align:center;font:600 10.5px/1.25 var(--sans);transform:rotate(-12deg) scale(1.6);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.coa.in .coa-stamp{opacity:1;transform:rotate(-12deg) scale(1);transition-delay:1.1s}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:4px}
.table-scroll:focus-visible{outline:2px solid var(--serum);outline-offset:4px}
@media (max-width:600px){
  .table-scroll{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .table-scroll.end{-webkit-mask-image:none;mask-image:none}
  .coa-note::before{content:"Swipe the table to see all columns. ";font-weight:600}
  .coa-id{grid-template-columns:1fr 1fr}
  .coa-id div:first-child{grid-column:1/-1}
  .coa-id dd{white-space:nowrap}
}
.coa table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.coa th{text-align:left;font-weight:600;font-size:13px;color:var(--slate);padding:14px 10px 10px 0}
.coa td{padding:12px 10px 12px 0;border-top:1px solid var(--line)}
.coa td:last-child,.coa th:last-child{text-align:right;padding-right:0}
.coa td.okc{color:#2E7D59;font-weight:600}
.coa td.okc::before{content:"";display:inline-block;width:4px;height:8px;border:solid #3E9E72;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 8px 2px 0}
.coa tbody tr{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 110ms + .2s)}
.coa.in tbody tr{opacity:1;transform:none}
.coa-note{font-size:13px;color:var(--slate);margin:18px 0 0}
.docs-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(80px,9vw,120px);padding-bottom:28px}
.docs-head h3{font-size:clamp(24px,2.2vw,32px);font-weight:300}
.doc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--white);border:1px solid var(--line);margin-bottom:16px}
.doc-ic svg{width:22px;height:22px;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.docs{margin-top:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.doc{padding:28px 28px 0 0}
.doc + .doc{padding-left:28px;border-left:1px solid var(--line)}
.doc h3{font-size:21px;margin-bottom:8px}
.doc p{font-size:15px;color:var(--slate);margin:0}


/* ---------- ISIA certification (switched on by removing .isia-off from <body>) ---------- */
.isia-off [data-isia]{display:none!important}
.cert{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2.2vw,26px);margin:clamp(72px,9vw,120px) auto 0;max-width:880px;padding:clamp(36px,4.5vw,56px) clamp(24px,4vw,64px);border-radius:28px;border:2px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,linear-gradient(135deg,var(--b-plum),var(--b-violet) 30%,var(--b-indigo) 55%,var(--b-blue) 75%,var(--b-cyan)) border-box;box-shadow:0 30px 70px -45px rgba(28,26,74,.45)}
.cert-seal{width:clamp(110px,12vw,150px);aspect-ratio:1;display:grid;place-items:center}
.cert-seal img{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(28,26,74,.18))}
.cert-seal picture{display:block;width:100%}
.cert .cert-seal{opacity:0;transform:scale(1.35) rotate(-14deg);transition:opacity .35s ease .3s,transform .7s cubic-bezier(.3,1.5,.5,1) .3s}
.cert.in .cert-seal{opacity:1;transform:none}
.cert-seal span{display:none}
.cert-seal.missing{border:1.5px dashed var(--line);border-radius:50%}
.cert-seal.missing img{display:none}
.cert-seal.missing span{display:block;font-size:13px;color:var(--slate)}
.cert-body h3{font-size:clamp(26px,2.4vw,34px);font-weight:300;margin-bottom:12px}
.cert-body p{color:var(--slate);margin:0 auto 26px;max-width:58ch}
.cert-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* a soft light sweep crosses the verify button every few seconds */
.btn-shine{position:relative;overflow:hidden;isolation:isolate}
.btn-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg) translate3d(0,0,0);pointer-events:none;z-index:1}
.cert.in .btn-shine::after{animation:shine 5.5s ease-in-out 1.4s infinite}
@keyframes shine{0%{left:-60%}22%,100%{left:130%}}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink)}


/* ---------- Retained samples ---------- */
.retained{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(80px,10vw,136px)}
.rt-copy h3{font-size:clamp(28px,2.8vw,40px);font-weight:300;line-height:1.1;margin-bottom:18px}
.rt-copy p{color:var(--slate)}
.rack{background:var(--ink);color:var(--paper);border-radius:24px;padding:24px 26px 20px;box-shadow:0 40px 80px -40px rgba(28,26,74,.7);position:relative;overflow:hidden}
.rack::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 100% 0%,rgba(0,167,225,.18),transparent 70%),radial-gradient(50% 50% at 0% 100%,rgba(147,41,142,.22),transparent 70%);pointer-events:none}
.rack-top{position:relative;display:flex;justify-content:space-between;font-size:13px;color:var(--soft);margin-bottom:22px}
.rack-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:14px 10px;padding:18px 14px 10px;border-radius:14px;background:rgba(246,246,250,.05);border:1px solid var(--line-dark)}
.tube-r{display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .45s var(--ease)}
.tube-r .cap{display:block;width:70%;max-width:16px;height:6px;border-radius:2px;background:var(--b-violet)}
.tube-r:nth-child(3n+2) .cap{background:var(--b-blue)}
.tube-r:nth-child(3n) .cap{background:var(--b-cyan)}
.tube-r .glass{position:relative;display:block;width:60%;max-width:13px;height:44px;border-radius:0 0 8px 8px;border:1px solid rgba(246,246,250,.35);border-top:0;overflow:hidden}
.tube-r .glass b{position:absolute;left:0;right:0;bottom:0;height:72%;background:linear-gradient(180deg,#F0C26A,#C98A2A);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.rack.in .tube-r .glass b{transform:none}
.tube-r em{font-style:normal;font-size:9px;color:rgba(246,246,250,.5)}
.tube-r.pick{transform:translate3d(0,-10px,0)}
.tube-r.pick .glass{border-color:var(--serum);box-shadow:0 0 0 3px rgba(226,163,62,.25),0 8px 18px -4px rgba(226,163,62,.6)}
.tube-r.pick em{color:var(--serum)}
.rack-status{position:relative;margin:16px 0 0;font-size:14px;color:var(--straw);min-height:1.5em}
.rack-status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--serum);margin-right:10px;box-shadow:0 0 0 4px rgba(226,163,62,.22)}
@media (max-width:980px){.retained{grid-template-columns:1fr}}
@media (max-width:600px){.rack-grid{grid-template-columns:repeat(6,1fr)}.tube-r:nth-child(n+13){display:none}}

/* ---------- Working with us ---------- */
.steps-sec{background:var(--white)}
.steps{list-style:none;margin:clamp(56px,7vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line)}
.steps::after{content:"";position:absolute;left:0;top:19px;height:1px;width:100%;background:var(--brand-grad);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease)}
.steps.in::after{transform:scaleX(1)}
.steps li{position:relative;padding-top:64px}
.steps .dot{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;font:600 14px/1 var(--sans);z-index:1}
.steps h3{font-size:22px;margin-bottom:10px}
.steps p{font-size:16px;color:var(--slate);margin:0}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font:400 clamp(20px,1.8vw,24px)/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .35s var(--ease),background .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm{transform:rotate(45deg);background:var(--straw)}
.faq details p{color:var(--slate);padding-bottom:26px;margin:0}
.faq details[open] p{animation:open .45s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* section rhythm: Quality flows into the FAQ without a double gap */
.sec.quality{padding-bottom:clamp(72px,8vw,112px)}
.sec.faq{background:var(--white);padding-top:clamp(80px,9vw,128px)}

/* ordering steps inside the FAQ */
.faq-intro{position:sticky;top:120px}
.faq-steps{list-style:none;counter-reset:st;margin:0;padding:0 0 26px;display:grid;gap:16px}
.faq-steps li{counter-increment:st;display:grid;grid-template-columns:34px 1fr;column-gap:14px;position:relative}
.faq-steps li::before{content:counter(st);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--serum);display:grid;place-items:center;font:600 13px/1 var(--sans)}
.faq-steps li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:34px;bottom:-14px;width:1px;background:var(--line)}
.faq-steps strong{font-weight:600}
.faq-steps span{color:var(--slate);font-size:16px}

/* ---------- Contact ---------- */
.contact{background:var(--ink);color:var(--paper);overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 100% 0%,rgba(102,48,145,.3),transparent 70%);pointer-events:none}
.contact .wrap{position:relative}
.contact .lede{color:var(--soft);margin-top:24px}
.contact-details{margin-top:48px;display:grid;gap:22px;font-size:16px}
.contact-details span{display:block;font-size:14px;color:rgba(246,246,250,.55)}
.contact-details a{text-decoration:none;border-bottom:1px solid var(--line-dark)}
.contact-details a:hover{border-color:var(--serum)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:rgba(246,246,250,.05);border:1px solid var(--line-dark);border-radius:24px;padding:clamp(24px,3vw,40px);backdrop-filter:blur(6px)}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;color:rgba(246,246,250,.75)}
.field input,.field select,.field textarea{font:400 16px var(--sans);color:var(--white);background:rgba(19,18,52,.55);border:1px solid var(--line-dark);border-radius:12px;padding:14px 16px;width:100%;transition:border-color .2s}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--straw) 50%),linear-gradient(135deg,var(--straw) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field option{color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--serum)}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.form-foot small{color:rgba(246,246,250,.55);font-size:13px;max-width:44ch}
.form-foot small a{color:var(--straw)}
.form-status{grid-column:1/-1;margin:0;font-size:15px;color:var(--straw);min-height:1.5em}
.hp{position:absolute;left:-9999px}

/* ---------- Footer ---------- */
.foot{position:relative;background:var(--ink-deep);color:rgba(246,246,250,.6);padding:80px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;overflow:hidden}
.foot-gear{position:absolute;width:520px;aspect-ratio:1;right:-150px;bottom:-200px;opacity:.12;pointer-events:none;max-width:none;will-change:rotate}
.foot .wrap{position:relative}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot .logo{width:180px;margin-bottom:22px}
.foot .logo .wm-dark{display:none}
.foot-tag{font:300 22px/1.3 var(--serif);color:var(--paper);margin-bottom:8px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--straw)}
.foot-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* ---------- Legal page ---------- */
.legal-hero{background:var(--ink);color:var(--paper);padding:180px 0 90px;overflow:hidden;position:relative}
.legal-hero h1{font-size:clamp(44px,6vw,84px)}
.legal-hero p{color:var(--soft);margin:20px 0 0}
.legal-hero .hero-gear{opacity:.14;transform:none;right:-30%;width:900px;margin-top:-450px}
.legal{display:grid;grid-template-columns:260px 1fr;gap:clamp(40px,6vw,96px);padding:clamp(72px,9vw,120px) 0}
.toc{position:sticky;top:120px;align-self:start;font-size:15px}
.toc ol{margin:0;padding:0 0 0 20px;display:grid;gap:10px;color:var(--slate)}
.toc a{text-decoration:none}
.toc a:hover{color:var(--ink)}
.legal-body{max-width:70ch}
.legal-body h2{font-size:clamp(28px,2.6vw,36px);margin:56px 0 18px}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{color:#3E3D5E}
.legal-body ul{padding-left:22px;margin:0 0 1em}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--ink-3)}
.note{background:var(--straw);padding:18px 22px;border-radius:14px;font-size:15px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid,.split,.product,.journey,.facility-head,.origin-grid{grid-template-columns:1fr}
  .about .lineage{margin-top:48px}
  .bottle-stage{order:-1}
  .bottle-wrap{width:min(250px,66%)}
  .hero-grid{padding-top:110px;gap:8px}
  .hero-gear{right:-60%;top:28%}
  .hero-facts{margin-top:44px}
  .hero-grid{padding-bottom:56px}
  .scroll-cue{display:none}
  .record-wrap{display:none}
  .pillars,.origin-notes{grid-template-columns:1fr}
  .pillar,.pillar + .pillar{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}
  .pillar + .pillar::before{left:0}
  .docs{grid-template-columns:1fr 1fr}
  .chain{grid-template-columns:1fr;gap:28px;padding-left:0}
  .chain-line{left:31px;right:auto;top:32px;bottom:32px;width:2px;height:auto}
  .chain-line i{transform:scaleY(var(--p));transform-origin:top}
  .node{display:grid;grid-template-columns:64px 1fr;column-gap:18px;text-align:left;align-items:center}
  .node-ic{margin:0;grid-row:span 2}
  .node strong{margin:0;align-self:end}
  .node > span:last-child{max-width:none;align-self:start}
  .doc,.doc + .doc{padding:24px 20px 24px 0;border-left:0}
  .steps{grid-template-columns:1fr 1fr;row-gap:48px}
  .steps::before,.steps::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1/-1}
  .droplet-panel{aspect-ratio:4/3}
  .facility-frame{height:62vh}
  .facility-frame.is-video{height:auto}
  .facility-duo{grid-template-columns:1fr}
  .legal{grid-template-columns:1fr}
  .faq-intro{position:static}
  .toc{position:static}
}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:0;top:calc(84px + env(safe-area-inset-top,0px));background:var(--paper);color:var(--ink);flex-direction:column;align-items:flex-start;padding:32px var(--gutter);gap:22px;transform:translateY(-110%);visibility:hidden;transition:transform .45s var(--ease),visibility .45s}
  .nav a{font:400 30px/1.2 var(--serif);opacity:1}
  .nav a::after{display:none}
  .nav .btn{font:600 16px/1 var(--sans);margin-top:12px}
  .nav .btn-ghost{color:var(--ink);border-color:var(--line)}
  .site-head.open .nav{transform:none;visibility:visible}
  .site-head.open{background:var(--paper);color:var(--ink)}
  .site-head.open .menu-btn span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .site-head.open .menu-btn span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .logo{width:138px}
}
@media (max-width:600px){
  body{font-size:16px}
  .form{grid-template-columns:1fr}
  .docs,.steps{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .fact,.fact + .fact{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}
  .formats li{grid-template-columns:1fr}
  .formats span{text-align:left}
  .record .row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important}
  .rv,.rv-title,.hero .in-1,.hero .in-2,.hero .in-3,.hero .in-4{opacity:1;transform:none;clip-path:none}
  .origin-statement .w{opacity:1}
  .au-map .dots circle,.au-map .route,.au-map .src,.facility-pin,.pin-label,.ln,.ln-c,.bag,.can,.can-fill,.mfg,.lot,.tube,.tick{opacity:1;transform:none;stroke-dashoffset:0}
  .tube-fill{transform:scaleY(.6)}
  .tube-r .glass b{transform:none}
  .rotor{animation:none}
  .lineage .lo-stage,.lineage .lo-flow,.lineage .lbl,.lineage :is(.lo-floor,.lo-road,.lo-lane,.lo-runway,.lo-rwmark){opacity:1;transform:none}
  .facility-frame,.facility-frame img{transform:none;animation:none}
  .cert .cert-seal{opacity:1;transform:none}
  .cert.in .btn-shine::after{animation:none}
  .apps-row{animation:none}
  .facility-frame img{transform:none}
}