:root{
  color-scheme:light dark;
  --on-gold:#2a1a16;
  --espresso:#2a1a16;--crust:#4a2c22;--gold:#c9973a;--gold-text:#7d5a12;--gold-soft:#e9c880;
  --bg:#ffffff;--flour:#faf6ee;--wheat:#f1e6d0;--ink:#241915;--muted:#665651;--line:#e6dccb;
  --card:#ffffff;--on-dark:#f6ecda;--on-dark-muted:#d3bfa8;
  --serif:Newsreader,Cambria,Georgia,serif;--sans:Figtree,"Segoe UI",Calibri,sans-serif;
  --r:6px;--maxw:1200px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#171010;--flour:#1f1513;--wheat:#2b1d19;--ink:#f3e6d2;--muted:#c4b09f;--line:#412f29;--card:#21170f;--gold-text:#e2b45e}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h1[data-pt]{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.01em}
h2,
h1[data-pt]{font-size:clamp(30px,4vw,46px);max-width:22ch;text-wrap:balance}
h3{font-size:23px}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:var(--on-gold);padding:10px 16px;border-radius:var(--r);z-index:100;font-weight:700}
.skip:focus{top:12px}
section{padding:clamp(60px,8vw,104px) 0}
.tint{background:var(--flour)}
.lead{font-size:19px;max-width:42em;color:var(--muted);margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:var(--r);font:700 16px var(--sans);text-decoration:none;border:2px solid var(--gold);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn.fill{background:var(--gold);color:var(--on-gold)}
.btn.fill:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn.ghost{background:transparent;color:var(--on-dark);border-color:rgba(246,236,218,.5)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn.dark{background:var(--espresso);border-color:var(--espresso);color:var(--on-dark)}
.btn.dark:hover{background:var(--crust);border-color:var(--crust)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:var(--bg)}

/* utility bar */
.util{background:#1c110e;color:var(--on-dark-muted);font-size:14px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:40px;flex-wrap:wrap}
.util a{text-decoration:none}
.util a:hover{color:var(--gold-soft)}
.util .l,.util .r{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.util .badge{display:inline-flex;align-items:center;gap:7px}
.util .badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}

/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--espresso);color:var(--on-dark);border-bottom:1px solid rgba(255,255,255,.08);transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 8px 26px rgba(0,0,0,.28)}
header.site .wrap{display:flex;align-items:center;gap:28px;height:76px}
.logo{display:block;background:#fff;border-radius:8px;padding:3px 9px;line-height:0;flex:none}
.logo img{height:52px;width:auto;display:block}
nav.primary{margin-left:auto;display:flex;align-items:center;gap:18px}
nav.primary>ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
nav.primary>ul>li{position:relative}
nav.primary>ul>li>a{display:block;padding:28px 14px;text-decoration:none;font-weight:500;font-size:16px;position:relative}
nav.primary>ul>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:18px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav.primary>ul>li>a:hover::after,nav.primary>ul>li>a.on::after,nav.primary>ul>li:focus-within>a::after{transform:scaleX(1)}
.sub{position:absolute;top:100%;left:0;min-width:290px;background:var(--bg);color:var(--ink);border-top:3px solid var(--gold);box-shadow:0 22px 44px rgba(0,0,0,.28);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;border-radius:0 0 var(--r) var(--r)}
li:hover>.sub,li:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:11px 14px;text-decoration:none;border-radius:4px}
.sub a b{display:block;font-weight:700}
.sub a span{display:block;font-size:14px;color:var(--muted);line-height:1.4}
.sub a:hover{background:var(--wheat)}
.hcta{flex:none}
.hcta .btn{padding:10px 20px;font-size:15px}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(246,236,218,.4);color:var(--on-dark);border-radius:var(--r);width:46px;height:46px;cursor:pointer;font-size:0}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:currentColor;position:relative;margin:0 auto;transition:transform .25s,top .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* hero */
.hero{background:var(--espresso);color:var(--on-dark);position:relative;overflow:hidden;padding:0}
.hero::before{content:"";position:absolute;right:-8%;top:-20%;width:62vw;height:62vw;max-width:880px;max-height:880px;border-radius:50%;background:radial-gradient(circle,#5a3629 0,#3a2219 55%,transparent 70%);opacity:.9}
.slides{display:grid;position:relative}
.slide{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:620px;padding:70px 0 110px;visibility:hidden}
.slide.on{visibility:visible}
.slide .tx{opacity:0;transform:translateY(18px);transition:opacity .7s .1s,transform .7s .1s}
.slide.on .tx{opacity:1;transform:none}
.slide .pics{opacity:0;transform:translateX(40px);transition:opacity .8s .15s,transform .8s .15s}
.slide.on .pics{opacity:1;transform:none}
.hero h1,.hero h2.hh,.hero h1[data-pt].hh{font-size:clamp(40px,5vw,66px);max-width:13ch;font-weight:500}
.hero p.sub-h{font-size:clamp(18px,1.9vw,21px);max-width:26em;margin:22px 0 32px;color:var(--on-dark-muted)}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap}
.pics{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,1.4vw,20px);min-height:300px;min-width:0}
.pics::before{content:"";position:absolute;left:50%;bottom:-2%;width:min(92%,520px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(201,151,58,.55);box-shadow:inset 0 0 0 18px rgba(201,151,58,.06)}
.pics img{position:relative;height:clamp(190px,25vw,350px);width:auto;filter:drop-shadow(0 22px 22px rgba(0,0,0,.5))}
.pics img:nth-child(2){height:clamp(210px,28vw,390px)}
.pics img.big{height:clamp(230px,30vw,400px)}
.htabs{position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.12);background:rgba(28,17,14,.55);backdrop-filter:blur(6px)}
.htabs .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;height:auto;padding:0 24px}
.htab{background:none;border:0;color:var(--on-dark-muted);font:500 15px var(--sans);text-align:left;padding:18px 18px 18px 0;cursor:pointer;position:relative}
.htab::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:calc(100% - 14px);background:rgba(255,255,255,.14)}
.htab::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--gold)}
.htab[aria-selected="true"]{color:var(--on-dark)}
.htab[aria-selected="true"]::after{width:calc(100% - 14px);transition:width 4s linear}
.htabs.paused .htab[aria-selected="true"]::after{transition:none}
.htab:hover{color:var(--on-dark)}
.pp{position:absolute;right:24px;top:-46px;background:rgba(28,17,14,.7);border:1px solid rgba(255,255,255,.25);color:var(--on-dark);border-radius:var(--r);padding:6px 12px;font:500 13px var(--sans);cursor:pointer}

/* stats */
.stats{padding:0;border-bottom:1px solid var(--line)}
.stats ul{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:0}
.stats li{padding:34px 22px;border-right:1px solid var(--line)}
.stats li:first-child{padding-left:0}
.stats li:last-child{border:0}
.stats b{display:block;font:600 clamp(36px,4vw,52px)/1 var(--serif);color:var(--gold-text)}
.stats span{display:block;margin-top:8px;color:var(--muted);font-size:15px;line-height:1.35}

/* product marquee */
.strip{overflow:hidden;background:var(--flour);padding:30px 0;border-bottom:1px solid var(--line)}
.track{display:flex;gap:56px;width:max-content;align-items:flex-end;animation:scroll 44s linear infinite}
.strip:hover .track,.logos:hover .track{animation-play-state:paused}
.track img{height:120px;width:auto}
@keyframes scroll{to{transform:translateX(-50%)}}

/* about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start}
.about p+p{margin-top:16px}
.about .lead{margin-top:20px}
.promise{margin-top:30px;padding:24px 26px;background:var(--espresso);color:var(--on-dark);border-radius:var(--r);border-left:6px solid var(--gold)}
.promise h3{font-size:22px;margin-bottom:8px}
.promise p{color:var(--on-dark-muted);font-size:16px}
.values{list-style:none;margin:0;padding:0}
.values li{padding:24px 0;border-top:1px solid var(--line)}
.values li:last-child{border-bottom:1px solid var(--line)}
.values h3{margin-bottom:6px}
.values p{color:var(--muted)}

/* journey */
.journey ol{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.journey ol::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:var(--gold)}
.journey li{position:relative;padding:38px 22px 0 0}
.journey li::before{content:"";position:absolute;left:0;top:4px;width:19px;height:19px;border-radius:50%;background:var(--bg);border:4px solid var(--gold-text)}
.tint .journey li::before{background:var(--flour)}
.journey b{display:block;font:600 30px var(--serif);color:var(--gold-text);margin-bottom:8px}
.journey span{color:var(--muted);font-size:16px;line-height:1.5;display:block}

/* why */
.why-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:48px}
.why-head .lead{margin:0}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.why div{padding:30px 30px 34px 0;border-bottom:1px solid var(--line)}
.why div:not(:nth-child(3n)){margin-right:30px}
.why h3{font-size:22px;margin-bottom:8px}
.why p{color:var(--muted);font-size:16px}
.why svg{width:34px;height:34px;stroke:var(--gold-text);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px;display:block}

/* flow */
.dark{background:var(--espresso);color:var(--on-dark)}
.dark .lead{color:var(--on-dark-muted)}
.dark h2,
.dark h1[data-pt]{color:var(--on-dark)}
.flow{list-style:none;margin:50px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:f}
.flow li{counter-increment:f;padding:0 30px 0 0;position:relative}
.flow li::before{content:counter(f);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--on-gold);font:600 22px var(--serif);margin-bottom:20px;position:relative;z-index:1}
.flow li::after{content:"";position:absolute;top:22px;left:56px;right:10px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px);opacity:.6}
.flow li:last-child::after{display:none}
.flow h3{font-size:22px;margin-bottom:8px}
.flow p{color:var(--on-dark-muted);font-size:16px}

/* products */
.phead{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 28px}
.filters button{padding:10px 20px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:500 15px var(--sans);cursor:pointer;transition:all .2s}
.filters button:hover{border-color:var(--gold)}
.filters button[aria-pressed="true"]{background:var(--espresso);color:var(--on-dark);border-color:var(--espresso)}
.filters button small{opacity:.65;margin-left:6px;font-size:13px}
.xnote{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);padding:16px 20px;margin:-6px 0 24px}.xnote[hidden]{display:none}.xnote p{margin:0;flex:1 1 320px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px}
.pcard[hidden]{display:none}
.pbtn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.pbtn:hover{border-color:var(--gold);box-shadow:0 14px 30px rgba(42,26,22,.12)}
.pbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pbtn .ph{display:flex;align-items:center;justify-content:center;height:210px;background:var(--wheat);padding:16px}
.pbtn .ph img{max-height:100%;width:auto;transition:transform .35s}
.pbtn:hover .ph img{transform:scale(1.06)}
.pbtn .pn{font:600 20px/1.2 var(--serif);padding:18px 18px 4px}
.pbtn .pm{padding:0 18px;color:var(--muted);font-size:15px;line-height:1.5}
.pbtn .pv{margin-top:auto;padding:14px 18px 18px;font-weight:700;font-size:15px;color:var(--gold-text)}
.more{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.more>div{padding:22px 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.more h3{font-size:20px;margin-bottom:6px}
.more p{color:var(--muted);font-size:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.more .notify{margin-top:16px}
.pills span{padding:6px 14px;border:1px dashed var(--gold-text);border-radius:var(--r);font-size:14px;color:var(--gold-text);font-weight:500}

dialog{border:0;padding:0;border-radius:10px;max-width:760px;width:calc(100% - 32px);background:var(--bg);color:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.45)}
dialog::backdrop{background:rgba(20,10,8,.62)}
.dl{display:grid;grid-template-columns:.9fr 1.1fr}
.dl .im{background:var(--wheat);display:flex;align-items:center;justify-content:center;padding:30px;min-height:300px}
.dl .im img{max-height:340px;width:auto}
.dl .bd{padding:34px 34px 30px;position:relative}
.dl h3{font-size:30px;margin:0 0 4px}
.dl .cat{color:var(--gold-text);font-weight:700;font-size:15px;margin-bottom:18px}
.dl dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 26px;font-size:16px}
.dl dt{color:var(--muted)}
.dl dd{margin:0;font-weight:700}
.dl .x{position:absolute;right:12px;top:10px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--muted);padding:6px 10px}

/* white label */
.pl{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px);align-items:center}
.pl .lead{margin-top:20px}
.pl .btn{margin-top:30px}
.plbox{background:rgba(255,255,255,.05);border:1px solid rgba(246,236,218,.18);border-radius:var(--r);padding:34px}
.plbox h3{font-size:20px;color:var(--on-dark-muted);font-family:var(--sans);font-weight:500;margin-bottom:22px}
.plrow{display:flex;align-items:center;gap:20px;padding:18px 0;border-top:1px solid rgba(246,236,218,.15)}
.plrow:first-of-type{border-top:0;padding-top:0}
.plrow .lg{width:120px;height:68px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:8px;flex:none}
.plrow .lg img{max-height:100%;max-width:100%}
.plrow b{display:block;font-size:18px}
.plrow span{color:var(--on-dark-muted);font-size:15px}

/* certs */
.certs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.cert{border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--r);padding:30px 32px;background:var(--card)}
.cert h3{margin-bottom:6px}
.cert .tag{display:inline-block;margin-bottom:18px;color:var(--gold-text);font-weight:700;font-size:15px}
.cert dl{margin:0;display:grid;grid-template-columns:150px 1fr;gap:12px 18px;font-size:16px}
.cert dt{color:var(--muted)}
.cert dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.cert a{color:var(--gold-text)}
.cert .cn{margin-right:2px}.cert .vh{display:block;margin-top:2px;font-weight:500;color:var(--muted);font-size:14px}.cert .creq{margin-top:22px}.cert a.btn{color:var(--ink)}.cert button.cp{color:var(--gold-text)}
.verify{margin-top:28px;padding:20px 26px;background:var(--wheat);border-radius:var(--r);display:flex;gap:16px;align-items:flex-start}
.verify svg{flex:none;width:28px;height:28px;stroke:var(--gold-text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}

/* our presence */
.net-top{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,6vw,80px);align-items:end}
.netstats{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-left:1px solid var(--line)}
.netstats div{padding:4px 0 4px clamp(14px,2.5vw,28px)}
.netstats dt{font-size:15px;color:var(--muted);order:2}
.netstats dd{margin:0;font:600 clamp(36px,4.5vw,56px)/1 var(--serif);color:var(--gold-text)}
.netstats div{display:flex;flex-direction:column}
.emirates{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.emirates li{padding:16px 14px;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r);background:var(--card);display:flex;flex-direction:column;gap:2px}
.emirates li span{font:600 19px/1.2 var(--serif)}
.emirates li small{font-size:13.5px;color:var(--muted);line-height:1.35}
.emirates li.hq{background:var(--espresso);border-color:var(--espresso);border-top-color:var(--gold);color:var(--on-dark)}
.emirates li.hq small{color:var(--gold-soft)}
.nethead{margin-top:72px;display:flex;justify-content:space-between;align-items:end;gap:10px 40px;flex-wrap:wrap}
.nethead h3{font-size:28px}
.nethead p{margin:0;color:var(--muted);max-width:30em;font-size:16px}
.lgrid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lt{position:relative;height:104px;background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:16px}
.lt img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lt.vet{border-color:var(--gold)}
.lt b{position:absolute;top:0;left:0;background:var(--gold);color:var(--on-gold);font:700 12px/1 var(--sans);padding:5px 8px;border-radius:5px 0 6px 0}
.note{margin-top:22px;color:var(--muted);font-size:15px;max-width:52em}
@media(max-width:900px){.net-top{grid-template-columns:1fr;align-items:start}.netstats{border-left:0;border-top:1px solid var(--line);padding-top:18px}.netstats div{padding-left:0}.emirates{grid-template-columns:repeat(2,1fr)}.emirates li:last-child{grid-column:1/-1}.lgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.lt{height:92px}}

/* our presence motion */
.rmap{margin:44px 0 0;background:var(--espresso);border-radius:var(--r);padding:clamp(14px,3vw,34px) clamp(8px,2vw,28px) 10px;border-bottom:4px solid var(--gold)}
.rmap svg{display:block;width:100%;height:auto}
.rmap figcaption{color:var(--on-dark-muted);font-size:13px;text-align:right;margin-top:4px}
.rt{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.85}
.nd circle{fill:var(--espresso);stroke:var(--gold-soft);stroke-width:2.5;transition:fill .3s}
.nd text,.hub text{fill:var(--on-dark);font:600 19px var(--sans)}
.hub circle{fill:var(--gold)}.hub .ring{fill:none;stroke:var(--gold);stroke-width:2;opacity:.5}
.van{fill:var(--gold-soft)}
.mo .rt{stroke-dashoffset:1;transition:stroke-dashoffset .9s ease-out}
.mo .nd{opacity:.25;transition:opacity .4s}
.mo .van{opacity:0}
.mo .rmap.go .van{opacity:1;transition:opacity .6s 5s}
.mo .rt.on{stroke-dashoffset:0}
.mo .nd.on{opacity:1}.nd.on circle{fill:var(--gold)}
.hub .ring{transform-origin:250px 235px;animation:hp 2.6s ease-out infinite}
@keyframes hp{from{transform:scale(1);opacity:.6}to{transform:scale(2.4);opacity:0}}
.emirates li{transition:background .4s,border-color .4s,box-shadow .4s}
.emirates li.on:not(.hq){background:var(--wheat);border-top-color:var(--gold-text)}
@media(max-width:600px){.nd text,.hub text{font-size:28px}.rmap{padding:12px 4px 8px}}
@media(prefers-reduced-motion:reduce){.hub .ring{animation:none}.van{display:none}}
/* oven to outlet timeline */
.flow li::after{background:linear-gradient(var(--gold-soft),var(--gold-soft)) left/100% 100% no-repeat,repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px);opacity:1;transition:background-size .9s ease-out}
.mo .flow li::before{opacity:.3;transition:opacity .4s}
.mo .flow li::after{background-size:0% 100%,auto}
.mo .flow.go li::before{opacity:1}
.mo .flow.go li::after{background-size:100% 100%,auto}
.mo .flow.go li:nth-child(1)::before{transition-delay:0s}.mo .flow.go li:nth-child(1)::after{transition-delay:.3s}
.mo .flow.go li:nth-child(2)::before{transition-delay:1.2s}.mo .flow.go li:nth-child(2)::after{transition-delay:1.5s}
.mo .flow.go li:nth-child(3)::before{transition-delay:2.4s}.mo .flow.go li:nth-child(3)::after{transition-delay:2.7s}
.mo .flow.go li:nth-child(4)::before{transition-delay:3.6s}

/* retailer reveal */
.mo .lgrid:not(.in) .lt{opacity:0;transform:translateY(10px)}
.mo .lgrid:not(.in) .lt b{opacity:0;transform:scale(.8)}
.mo .lgrid .lt{transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--i)*45ms)}
.mo .lgrid .lt b{transition:opacity .4s,transform .4s;transition-delay:1.3s}

/* ---- extras ---- */

#bwprog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:90;pointer-events:none}
#bwload{position:fixed;inset:0;z-index:200;background:var(--espresso);display:grid;place-items:center;transition:opacity .25s,visibility .25s}
html:not(.js) #bwload{display:none}
#bwload img{background:#fff;border-radius:12px;padding:6px 14px;animation:bwp 1.2s ease-in-out infinite}
#bwload.out{opacity:0;visibility:hidden}
@keyframes bwp{50%{transform:scale(1.06);box-shadow:0 0 0 14px rgba(201,151,58,.18)}}
.htools{display:flex;gap:6px;flex:none}
.htools button{width:42px;height:42px;display:grid;place-items:center;background:none;border:1px solid rgba(246,236,218,.35);border-radius:var(--r);color:var(--on-dark);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.htools button:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(255,255,255,.05)}
.htools button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.htools button[aria-pressed="true"] svg{fill:currentColor}
.htools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.htools{margin-left:auto}.burger{margin-left:0;order:9}}
#bwtop{position:fixed;left:18px;bottom:18px;z-index:40;width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);background:var(--espresso);color:var(--gold-soft);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}
#bwtop.show{opacity:1;visibility:visible;transform:none}
#bwtop:hover{background:var(--gold);color:var(--on-gold)}
#bwtop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#bwck{position:fixed;left:50%;bottom:18px;transform:translate(-50%,30px);width:min(640px,calc(100% - 28px));z-index:80;background:var(--espresso);color:var(--on-dark);border:1px solid rgba(201,151,58,.5);border-radius:var(--r);padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:0 18px 44px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.35s}
#bwck.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
#bwck p{margin:0;flex:1 1 280px;font-size:14.5px;line-height:1.5}
#bwck a{color:var(--gold-soft);text-decoration:underline}
#bwck .btn{padding:9px 18px;font-size:14.5px}
dialog.bwd{border:0;border-radius:10px;padding:0;max-width:min(560px,calc(100% - 28px));width:100%;background:var(--bg);color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.45)}
dialog.bwd::backdrop{background:rgba(20,10,8,.62)}
.bwd .in{padding:30px}
.bwd h3{font-size:28px;margin-bottom:8px}
.bwd .tick{width:56px;height:56px;border-radius:50%;background:#1d6b3a;display:grid;place-items:center;margin-bottom:16px}
.bwd .tick svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bwd .row{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
#bwsq{width:100%;font:400 18px var(--sans);padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink)}
#bwres{list-style:none;margin:14px 0 0;padding:0;max-height:52vh;overflow:auto}
#bwres a{display:block;padding:12px 10px;text-decoration:none;border-radius:var(--r);border-top:1px solid var(--line)}
#bwres a:hover,#bwres a:focus-visible{background:var(--wheat)}
#bwres b{display:block;font:600 18px var(--serif)}
#bwres span{display:block;font-size:14.5px;color:var(--muted)}
#bwres mark{background:var(--gold-soft);color:#2a1a16;border-radius:2px}
.bwe{color:#b3261e;font-size:13.5px;margin-top:5px;font-weight:500}
[aria-invalid="true"]{border-color:#b3261e!important;background:rgba(179,38,30,.05)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .bwe{color:#ff8a80}}

.btn.busy{position:relative;pointer-events:none;opacity:.85}
.btn.busy::after{content:"";width:16px;height:16px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bws .7s linear infinite}
@keyframes bws{to{transform:rotate(360deg)}}
button.cp{margin-left:8px;font:600 12px var(--sans);padding:3px 9px;border-radius:99px;border:1px solid currentColor;background:none;color:inherit;opacity:.8;cursor:pointer;vertical-align:middle}
button.cp:hover{opacity:1;border-color:var(--gold);color:var(--gold-soft)}
.fab a{transition:transform .2s,box-shadow .2s}.fab a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.mo .lgrid .lt:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 22px rgba(42,26,22,.14);transition-delay:0s}
.lgrid .lt{transition:border-color .2s,box-shadow .2s,transform .2s}
@media(prefers-reduced-motion:reduce){#bwload img,.btn.busy::after{animation:none}#bwprog{display:none}}
@media print{
 #bwload,#bwprog,#bwtop,#bwck,.util,header.site,.fab,.htools,.hero,.fmapcol,.subnav,.skip,button.cp,iframe,.rmap .van{display:none!important}
 body{background:#fff;color:#000;font-size:11.5pt}
 section,.dark,.tint{background:#fff!important;color:#000!important;padding:18px 0!important;break-inside:avoid-page}
 .dark h2,.dark h3,.dark p,.dark .lead,
 .dark h1[data-pt]{color:#000!important}
 a{color:#000;text-decoration:underline}
 main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
 footer.site{background:#fff!important;color:#000!important;border-top:1px solid #999}
 footer.site *{color:#000!important}
 .rt{stroke:#7d5a12}.rmap{background:#fff!important;border:1px solid #ccc}.nd text,.hub text{fill:#000!important}
}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:start}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font:600 21px/1.3 var(--serif);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:18px;font:400 32px/1 var(--sans);color:var(--gold-text);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 44px 24px 0;color:var(--muted)}

/* contact */
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:start}
form.enq{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--r);padding:34px}
form.enq h3{font-size:28px;margin-bottom:6px}
form.enq .hint{color:var(--muted);font-size:15px;margin-bottom:24px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg .full{grid-column:1/-1}
label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
input,select,textarea{width:100%;font:400 16px var(--sans);padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
textarea{min-height:110px;resize:vertical}
form.enq .btn{margin-top:22px}
/* step-by-step enquiry form (falls back to the full form if JS is off) */
.enq.steps .step{display:none}
.enq.steps .step.on{display:block;animation:stepin .25s ease both}
.enq.steps .fg{display:block}
.enq .q{font:600 22px var(--serif);margin:0 0 16px}
.enq .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enq .fld+.fld,.enq .chips+.fld{margin-top:16px}
.enq .pair .fld+.fld{margin-top:0}
.enq.steps .step .fld label{font:700 15px var(--sans);margin-bottom:6px}
.enq.steps .step input:not([type=radio]),.enq.steps .step select{font-size:17px;padding:14px 15px}
.enq.steps .step textarea{min-height:84px}
.enq .chips{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.enq.steps .chips label{font:600 15.5px var(--sans);padding:13px 14px;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){.enq .pair{grid-template-columns:1fr}form.enq{padding:24px 20px}}
.enq .opt{font:400 15px var(--sans);color:var(--muted)}
.prog{display:none;margin-bottom:22px}
.enq.steps .prog{display:block}
.prog span{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:8px}
.prog .bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:3px;transition:width .3s ease}
.opts{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.opts legend{float:left;width:100%}
.opts legend+input+label,.opts legend~label{clear:both}
.opts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opts label{margin:0;padding:15px 16px;border:1.5px solid var(--line);border-radius:var(--r);font:600 17px var(--sans);cursor:pointer;background:var(--bg);transition:border-color .2s,background .2s}
.enq.steps .opts label{font:600 17px var(--sans);padding:15px 16px;margin:0}
.opts label:hover{border-color:var(--gold)}
.opts input:checked+label{border-color:var(--gold);background:var(--flour);box-shadow:inset 0 0 0 1.5px var(--gold)}
.opts input:focus-visible+label{outline:3px solid var(--gold);outline-offset:1px}
.enq .nav{display:flex;gap:12px;margin-top:22px}
.enq .nav .btn{margin-top:0}
.enq .nav .btn[hidden]{display:none}
.enq .nav #enq-next,.enq .nav #enq-send{flex:1}
@keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.enq.steps .step.on{animation:none}.prog .bar i{transition:none}}
.fnote{margin-top:14px;font-size:14px;color:var(--muted)}
.fnote a{text-decoration:underline;font-weight:600}
.people{display:grid;gap:0}
.person{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line);align-items:flex-start}
.person:last-child{border-bottom:1px solid var(--line)}
.av{flex:none;width:54px;height:54px;border-radius:50%;background:var(--espresso);color:var(--gold-soft);display:grid;place-items:center;font:600 20px var(--serif)}
.person h3{font-size:22px}
.person .role{color:var(--muted);font-size:15px;margin-bottom:6px}
.person a{text-decoration:none;font-weight:500}
.person a:hover{color:var(--gold-text);text-decoration:underline}
.gen{margin-top:26px;padding:20px 24px;background:var(--wheat);border-radius:var(--r);font-size:16px}
.gen a{font-weight:700;color:var(--gold-text)}

/* location */
.loc{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:center}
.loc address{font-style:normal;font-size:19px;margin:18px 0 10px;line-height:1.6}
.loc .sub2{color:var(--muted);margin-bottom:26px}
.loc .btns{display:flex;gap:12px;flex-wrap:wrap}
.mapbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--wheat);aspect-ratio:16/10}
.mapcard{display:block;position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:0 18px 40px rgba(42,26,22,.1);transition:box-shadow .25s,border-color .25s}
.mapcard:hover{border-color:var(--gold);box-shadow:0 22px 48px rgba(42,26,22,.2)}
.mapcard svg{display:block;width:100%;height:auto}
.m-bg{fill:var(--wheat)}
.m-blocks rect{fill:var(--bg);stroke:var(--line);stroke-width:1}
.m-site{fill:var(--gold-soft);stroke:var(--gold);stroke-width:2}
.m-hwy{stroke:var(--gold);stroke-width:20;fill:none;stroke-linecap:round}
.m-t1{font:700 13px var(--sans);fill:var(--espresso)}
.m-t2{font:500 13px var(--sans);fill:var(--muted)}
.m-t3{font:700 15px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--wheat);stroke-width:4px}
.m-pin{fill:var(--espresso)}
.m-dot{fill:var(--gold)}
.m-pulse{display:none}
.m-go{position:absolute;right:14px;bottom:14px;background:var(--espresso);color:var(--on-dark);font:700 15px var(--sans);padding:10px 18px;border-radius:var(--r)}
.mapcard:hover .m-go{background:var(--crust)}
@media(prefers-reduced-motion:reduce){.m-pulse{animation:none}}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--gold-text);text-decoration:underline;cursor:pointer}
.mapnote{margin-top:12px;font-size:15px;color:var(--muted)}
.mapnote a{color:var(--gold-text);font-weight:700}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* footer */
footer.site{background:#1c110e;color:var(--on-dark-muted);padding:68px 0 64px;font-size:16px}
.fgrid{display:grid;grid-template-columns:1.3fr .9fr .9fr 1.2fr 1.3fr;gap:36px;padding-bottom:50px}
.fmap{position:relative;height:190px;border-radius:var(--r);overflow:hidden;border:1px solid rgba(246,236,218,.2);background:#2a1a16}
.fmap iframe{width:100%;height:100%;border:0;display:block}
.fmapl{display:inline-block;margin-top:10px;font-size:15px;font-weight:600;color:var(--gold-soft)}
.fmapl:hover{text-decoration:underline}
footer.site h4{font:700 17px var(--sans);color:var(--on-dark);margin-bottom:16px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--gold-soft)}
footer.site .logo{display:inline-block;margin-bottom:18px}
.fbadges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.fbadges span{border:1px solid rgba(246,236,218,.25);border-radius:var(--r);padding:5px 14px;font-size:14px;color:var(--on-dark)}
.flinks a{margin-left:20px}
.flinks a:first-child{margin-left:0}
.fbot{border-top:1px solid rgba(246,236,218,.14);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}

.social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(246,236,218,.3);border-radius:var(--r);padding:8px 16px;color:var(--on-dark);font-size:15px;font-weight:500}
.social a:hover{border-color:var(--gold);color:var(--gold-soft)}
.social svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gen+.gen{margin-top:12px}
.fab{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;gap:10px}
.fab a{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--on-gold);text-decoration:none;font-weight:700;padding:13px 20px;border-radius:var(--r);box-shadow:0 10px 28px rgba(0,0,0,.35);font-size:15px}
.fab a:hover{background:var(--gold-soft)}
.fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* about + careers */
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:54px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.subnav a{padding:9px 18px;border:1.5px solid var(--line);border-radius:var(--r);text-decoration:none;font-weight:500;font-size:15px;background:var(--card);transition:border-color .2s,background .2s}
.subnav a:hover{border-color:var(--gold);background:var(--wheat)}
.storyviz{position:relative;min-height:420px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.6vw,20px);padding:46px 18px 0;background:var(--wheat);border-radius:var(--r);overflow:hidden}
.storyviz::before{content:"";position:absolute;left:50%;bottom:-30%;width:90%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--bg);opacity:.55}
.storyviz img{position:relative;height:clamp(150px,16vw,220px);min-width:0;width:auto;filter:drop-shadow(0 16px 14px rgba(42,26,22,.3))}
.storyviz img:nth-child(2){height:clamp(160px,17vw,230px)}
.since{position:absolute;left:22px;top:22px;width:118px;height:118px;border-radius:50%;background:var(--espresso);color:var(--on-dark);display:grid;place-content:center;text-align:center;border:3px solid var(--gold);z-index:2}
.since b{font:600 34px/1 var(--serif);color:var(--gold-soft)}
.since span{font-size:13px;line-height:1.3;color:var(--on-dark-muted)}
.values.four{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line)}
.values.four li{padding:26px 26px 0 0;border:0}
.values.four li:last-child{border:0}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:46px}
.pillar{padding:30px;border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--r);background:var(--card)}
.pillar h3{margin-bottom:8px}
.pillar p{color:var(--muted);font-size:16px}
.leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:44px}
.leader{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.leader .top{background:var(--espresso);padding:30px;display:flex;align-items:center;gap:18px;color:var(--on-dark)}
.leader .av{width:68px;height:68px;font-size:24px;background:var(--gold);color:var(--on-gold)}
.leader h3{color:var(--on-dark);font-size:23px}
.leader .role{color:var(--on-dark-muted);font-size:15px}
.leader .bd{padding:22px 30px 26px;display:grid;gap:4px}
.leader a{text-decoration:none;font-weight:500}
.leader a:hover{color:var(--gold-text);text-decoration:underline}
.careers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:start}
.areas{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.areas li{padding:22px;border:1px solid rgba(246,236,218,.2);border-radius:var(--r);background:rgba(255,255,255,.04)}
.areas h3{font-size:20px;margin-bottom:6px;color:var(--on-dark)}
.areas p{font-size:15px;color:var(--on-dark-muted)}
.apply{margin-top:30px;display:grid;gap:14px;padding:0;list-style:none;counter-reset:a}
.apply li{counter-increment:a;display:flex;gap:14px;align-items:flex-start;color:var(--on-dark-muted);font-size:16px}
.apply li::before{content:counter(a);flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font:600 16px var(--serif)}
form.cform{background:var(--card);color:var(--ink);border-radius:var(--r);border-top:5px solid var(--gold);padding:34px}
form.cform h3{font-size:28px;margin-bottom:6px}
form.cform .hint{color:var(--muted);font-size:15px;margin-bottom:24px}
form.cform .btn{margin-top:22px}
@media(max-width:900px){.values.four,.pillars,.leaders,.careers,.areas{grid-template-columns:1fr}.values.four li{padding:22px 0}.storyviz{min-height:340px}}
@media(max-width:1080px){
  nav.primary>ul>li>a{padding:28px 9px;font-size:15px}
  nav.primary .hcta{display:none}
  .why{grid-template-columns:1fr 1fr}
  .why div:not(:nth-child(3n)){margin-right:0}
  .why div:nth-child(odd){margin-right:30px}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid>.fmapcol{grid-column:1/-1}
  .fmap{height:240px}
}
@media(max-width:900px){
  .util .l a.hide-s{display:none}
  .util .r{display:none}
  .util .wrap{min-height:36px}
  .burger{display:block}
  nav.primary{flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--espresso);border-top:1px solid rgba(255,255,255,.1);display:none;max-height:calc(100vh - 76px);overflow:auto}
  nav.primary.open{display:flex}
  nav.primary>ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px}
  nav.primary>ul>li>a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  nav.primary>ul>li>a::after{display:none}
  .sub{display:none}
  nav.primary .hcta{display:block;margin:0;padding:0 24px 24px}
  .hcta .btn{width:100%}
  header.site .wrap{height:70px}
  .logo img{height:46px}
  .slide{grid-template-columns:1fr;min-height:0;padding:36px 0 120px;gap:10px}
  .pics{order:-1;min-height:0}
  .pics img{height:clamp(170px,48vw,260px)}
  .pics img:nth-child(2),.pics img.big{height:clamp(190px,54vw,290px)}
  .htab{font-size:13px;padding:14px 8px 14px 0}
  .pp{display:none}
  .stats ul{grid-template-columns:1fr 1fr}
  .stats li{border-right:0;border-bottom:1px solid var(--line);padding:24px 16px 24px 0}
  .stats li:nth-child(odd){border-right:1px solid var(--line)}
  .stats li:last-child{grid-column:1/-1;border-bottom:0}
  .split,.why-head,.pl,.faq,.cgrid,.loc,.certs,.more{grid-template-columns:1fr}
  .journey ol{grid-template-columns:1fr;gap:0}
  .journey ol::before{left:9px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .journey li{padding:0 0 28px 40px}
  .journey li::before{top:2px;left:0}
  .flow{grid-template-columns:1fr 1fr;row-gap:36px}
  .flow li:nth-child(2)::after{display:none}
  .why{grid-template-columns:1fr}
  .why div,.why div:nth-child(odd){margin-right:0;padding-right:0}
  .dl{grid-template-columns:1fr}
  .dl .im{min-height:0;padding:22px}
  .dl .im img{max-height:220px}
  .fg{grid-template-columns:1fr}
  .cert dl{grid-template-columns:1fr;gap:2px}
  .cert dt{margin-top:10px}
}
@media(max-width:560px){
  .flow{grid-template-columns:1fr}
  .flow li::after{display:none}
  .fgrid{grid-template-columns:1fr;gap:30px}
  .fab a span{display:none}
  .fab a{padding:14px}
  .hero .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important}
  .track{animation:none}
  .strip,.logos{overflow-x:auto}
  .slide .tx,.slide .pics{transition:none}
}

/* each nav item is its own page, same tab */
html.js[data-v="home"] #journey,html.js[data-v="home"] #promise,html.js[data-v="home"] #leadership,html.js[data-v="home"] #products,html.js[data-v="home"] #white-label,html.js[data-v="home"] #quality,html.js[data-v="home"] #our-presence,html.js[data-v="home"] #careers,html.js[data-v="home"] #faq,html.js[data-v="home"] #contact,html.js[data-v="home"] #location{display:none!important}
html.js[data-v="about"] main>.hero,html.js[data-v="about"] main>.stats,html.js[data-v="about"] main>.strip,html.js[data-v="about"] main>.slogan-band,html.js[data-v="about"] #why,html.js[data-v="about"] #process,html.js[data-v="about"] #products,html.js[data-v="about"] #white-label,html.js[data-v="about"] #our-presence,html.js[data-v="about"] #careers,html.js[data-v="about"] #faq,html.js[data-v="about"] #contact,html.js[data-v="about"] #location{display:none!important}
html.js[data-v="products"] main>.hero,html.js[data-v="products"] main>.stats,html.js[data-v="products"] main>.strip,html.js[data-v="products"] main>.slogan-band,html.js[data-v="products"] #about,html.js[data-v="products"] #journey,html.js[data-v="products"] #promise,html.js[data-v="products"] #leadership,html.js[data-v="products"] #why,html.js[data-v="products"] #process,html.js[data-v="products"] #white-label,html.js[data-v="products"] #quality,html.js[data-v="products"] #our-presence,html.js[data-v="products"] #careers,html.js[data-v="products"] #faq,html.js[data-v="products"] #contact,html.js[data-v="products"] #location{display:none!important}
html.js[data-v="white-label"] main>.hero,html.js[data-v="white-label"] main>.stats,html.js[data-v="white-label"] main>.strip,html.js[data-v="white-label"] main>.slogan-band,html.js[data-v="white-label"] #about,html.js[data-v="white-label"] #journey,html.js[data-v="white-label"] #promise,html.js[data-v="white-label"] #leadership,html.js[data-v="white-label"] #why,html.js[data-v="white-label"] #process,html.js[data-v="white-label"] #products,html.js[data-v="white-label"] #quality,html.js[data-v="white-label"] #our-presence,html.js[data-v="white-label"] #careers,html.js[data-v="white-label"] #faq,html.js[data-v="white-label"] #contact,html.js[data-v="white-label"] #location{display:none!important}
html.js[data-v="quality"] main>.hero,html.js[data-v="quality"] main>.stats,html.js[data-v="quality"] main>.strip,html.js[data-v="quality"] main>.slogan-band,html.js[data-v="quality"] #about,html.js[data-v="quality"] #journey,html.js[data-v="quality"] #promise,html.js[data-v="quality"] #leadership,html.js[data-v="quality"] #why,html.js[data-v="quality"] #process,html.js[data-v="quality"] #products,html.js[data-v="quality"] #white-label,html.js[data-v="quality"] #our-presence,html.js[data-v="quality"] #careers,html.js[data-v="quality"] #faq,html.js[data-v="quality"] #contact,html.js[data-v="quality"] #location{display:none!important}
html.js[data-v="our-presence"] main>.hero,html.js[data-v="our-presence"] main>.stats,html.js[data-v="our-presence"] main>.strip,html.js[data-v="our-presence"] main>.slogan-band,html.js[data-v="our-presence"] #about,html.js[data-v="our-presence"] #journey,html.js[data-v="our-presence"] #promise,html.js[data-v="our-presence"] #leadership,html.js[data-v="our-presence"] #why,html.js[data-v="our-presence"] #process,html.js[data-v="our-presence"] #products,html.js[data-v="our-presence"] #white-label,html.js[data-v="our-presence"] #quality,html.js[data-v="our-presence"] #careers,html.js[data-v="our-presence"] #faq,html.js[data-v="our-presence"] #contact,html.js[data-v="our-presence"] #location{display:none!important}
html.js[data-v="careers"] main>.hero,html.js[data-v="careers"] main>.stats,html.js[data-v="careers"] main>.strip,html.js[data-v="careers"] main>.slogan-band,html.js[data-v="careers"] #about,html.js[data-v="careers"] #journey,html.js[data-v="careers"] #promise,html.js[data-v="careers"] #leadership,html.js[data-v="careers"] #why,html.js[data-v="careers"] #process,html.js[data-v="careers"] #products,html.js[data-v="careers"] #white-label,html.js[data-v="careers"] #quality,html.js[data-v="careers"] #our-presence,html.js[data-v="careers"] #faq,html.js[data-v="careers"] #contact,html.js[data-v="careers"] #location{display:none!important}
html.js[data-v="faq"] main>.hero,html.js[data-v="faq"] main>.stats,html.js[data-v="faq"] main>.strip,html.js[data-v="faq"] main>.slogan-band,html.js[data-v="faq"] #about,html.js[data-v="faq"] #journey,html.js[data-v="faq"] #promise,html.js[data-v="faq"] #leadership,html.js[data-v="faq"] #why,html.js[data-v="faq"] #process,html.js[data-v="faq"] #products,html.js[data-v="faq"] #white-label,html.js[data-v="faq"] #quality,html.js[data-v="faq"] #our-presence,html.js[data-v="faq"] #careers,html.js[data-v="faq"] #contact,html.js[data-v="faq"] #location{display:none!important}
html.js[data-v="contact"] main>.hero,html.js[data-v="contact"] main>.stats,html.js[data-v="contact"] main>.strip,html.js[data-v="contact"] main>.slogan-band,html.js[data-v="contact"] #about,html.js[data-v="contact"] #journey,html.js[data-v="contact"] #promise,html.js[data-v="contact"] #leadership,html.js[data-v="contact"] #why,html.js[data-v="contact"] #process,html.js[data-v="contact"] #products,html.js[data-v="contact"] #white-label,html.js[data-v="contact"] #quality,html.js[data-v="contact"] #our-presence,html.js[data-v="contact"] #careers,html.js[data-v="contact"] #faq{display:none!important}
html.js:not([data-v="about"]) #about .subnav{display:none!important}
header.site{padding-top:env(safe-area-inset-top,0px)}
footer.site{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.hero .eyebrow{margin:0 0 18px;font:600 13px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
.hero h1.slogan{margin-top:22px;max-width:none;display:block;font:600 clamp(40px,4.3vw,62px)/1.02 var(--serif);letter-spacing:-.025em;color:var(--on-dark);border-left:3px solid var(--gold);padding-left:clamp(16px,2vw,28px)}
.hero h1.slogan .sl{display:block;white-space:nowrap}
.hero h1.slogan .a{font-style:italic;font-weight:400;font-size:clamp(20px,2.1vw,29px);line-height:1.3;letter-spacing:.01em;color:var(--on-dark);margin:0}
.hero h1.slogan .sl.b{display:table;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 3px no-repeat;padding-bottom:.1em}
.hero h1.slogan .b{color:var(--on-dark);margin:4px 0 12px}
.hero h1.slogan .b.g{color:var(--on-dark);margin-bottom:0}
@media(max-width:900px){.story2{min-height:400px}}

.story2{position:relative;width:100%}
.story2>img{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:0 22px 48px rgba(42,26,22,.22)}
.story2 .since{left:auto;top:14px;right:14px;bottom:auto;width:clamp(96px,13vw,128px);height:clamp(96px,13vw,128px);box-shadow:0 0 0 5px rgba(255,255,255,.85),0 12px 26px rgba(42,26,22,.35)}
.story2 .since b{font-size:clamp(28px,3.4vw,38px)}
.story2 .since span{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.logo{display:grid;place-items:center;width:92px;height:92px;padding:0;border-radius:50%;background:var(--flour);border:2px solid var(--gold);box-shadow:0 0 0 4px var(--espresso),0 10px 24px rgba(0,0,0,.35);transition:transform .25s}
.logo img{width:82%;height:auto}
.logo:hover{transform:scale(1.05) rotate(-2deg)}
header.site .logo{position:relative;z-index:3;margin:8px 0 -26px}
footer.site .logo{display:inline-grid;margin:0 0 18px;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
@media(max-width:900px){.logo{width:70px;height:70px;border-width:1.5px}header.site .logo{margin:4px 0 -12px}}
@media(prefers-reduced-motion:reduce){.logo{transition:none}.logo:hover{transform:none}}
/* one sweep-fill hover (cream) for every button and pill */
.btn,.fab a,.subnav a,.filters button{position:relative;overflow:hidden;isolation:isolate}
.btn::before,.fab a::before,.subnav a::before,.filters button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--on-dark);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn:hover::before,.btn:focus-visible::before,.fab a:hover::before,.fab a:focus-visible::before,.subnav a:hover::before,.subnav a:focus-visible::before,.filters button:hover::before,.filters button:focus-visible::before{transform:scaleX(1);transform-origin:left}
.filters button[aria-pressed="true"]::before{display:none}
.btn,.fab a{transition:color .3s .1s,border-color .3s}
.btn.fill:hover,.btn.fill:focus-visible{background:var(--gold);border-color:var(--gold)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--espresso);border-color:var(--gold)}
.btn.dark:hover,.btn.dark:focus-visible{background:var(--espresso);border-color:var(--espresso);color:var(--espresso)}
.btn.outline:hover,.btn.outline:focus-visible{background:transparent;color:var(--ink);border-color:var(--ink)}
.fab a:hover,.fab a:focus-visible{background:var(--gold);color:var(--on-gold)}
.subnav a:hover{background:var(--card)}
@media(prefers-reduced-motion:reduce){.btn::before,.fab a::before,.subnav a::before,.filters button::before{transition:none}}
@property --ac{syntax:"<color>";inherits:true;initial-value:#2a4fd0}
html.js:not([data-v="products"]) #showcase{display:none!important}
.sc{--ac:#2a4fd0;position:relative;overflow:hidden;min-height:clamp(720px,96vh,840px);background:#0b0605;color:#fff;transition:--ac .9s}
.sc-bg{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 44%,color-mix(in srgb,var(--ac) 70%,#000),transparent 72%),radial-gradient(ellipse 120% 50% at 50% 108%,color-mix(in srgb,var(--ac) 55%,#fff 10%),transparent 70%),linear-gradient(#0b0605,#150d0b)}
.sc-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 40%,rgba(0,0,0,.55));}
.sc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--ac),color-mix(in srgb,var(--ac) 45%,#000));opacity:0;transition:opacity .8s}
.sc.detail .sc-bg::after{opacity:1}
.sc-ghost{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);white-space:nowrap;font:800 clamp(64px,14vw,220px)/1 var(--serif);letter-spacing:-.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.15);transition:opacity .5s;pointer-events:none}
.sc[data-mode=line] .sc-ghost,.sc.detail .sc-ghost{opacity:0}
.sc-head{position:absolute;left:0;right:0;top:30px;z-index:5;text-align:center;transition:opacity .5s}
.sc-head span{font:600 12px var(--sans);letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sc-head h2,
.sc-head h1[data-pt]{margin:8px 0 0;font:700 clamp(26px,3.4vw,40px)/1.1 var(--serif);color:#fff}
.sc-pad{position:absolute;left:50%;z-index:1;width:min(440px,64vw);height:54px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.7),var(--ac) 42%,transparent 72%);box-shadow:0 0 70px 6px var(--ac);opacity:.85;transition:top .7s,width .7s,opacity .5s}
.sc.detail .sc-pad{opacity:0}
.sc-stage{position:absolute;inset:0;z-index:2;perspective:1500px;outline:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sc-stage.drag{cursor:grabbing}.sc-stage.drag .sc-it{transition:none}
.sc-it{position:absolute;left:50%;top:51%;width:calc(clamp(120px,15vw,200px)*var(--k,1));padding:0;border:0;background:none;cursor:inherit;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;will-change:transform}
.sc-it img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 22px rgba(0,0,0,.5))}
.sc[data-mode=line] .sc-it img{animation:none}
.sc-it:focus-visible{outline:2px solid #fff;outline-offset:6px}
.sc-arrow{position:absolute;z-index:8;top:51%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.sc-arrow.l{left:max(14px,3vw)}.sc-arrow.r{right:max(14px,3vw)}
.sc-arrow:hover{background:#fff;color:#1a0f0c}.sc-arrow.l:hover{transform:translateY(-50%) translateX(-3px)}.sc-arrow.r:hover{transform:translateY(-50%) translateX(3px)}
.sc-label{position:absolute;left:0;right:0;bottom:104px;z-index:4;text-align:center;transition:opacity .4s;pointer-events:none}
.sc-label small{display:block;margin-bottom:8px;font:600 12px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sc-label b{display:block;font:800 clamp(24px,3.2vw,40px)/1 var(--serif);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.sc[data-mode=line] .sc-label{opacity:0}
.sc-info{position:absolute;z-index:6;left:clamp(24px,7vw,110px);top:50%;max-width:430px;opacity:0;pointer-events:none;transform:translateY(-50%) translateX(-34px);transition:opacity .6s .15s,transform .6s .15s}
.sc.detail .sc-info{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.sc-info .eb{margin:0 0 12px;font:600 12px var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.sc-info h3{margin:0 0 14px;font:800 clamp(34px,5vw,64px)/1 var(--serif);text-transform:uppercase}
.sc-info .ds{margin:0 0 14px;font-size:17px;line-height:1.6;opacity:.92}
.sc-info .mt{margin:0 0 24px;font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.sc-act{display:flex;flex-wrap:wrap;gap:12px}
.sc.detail .sc-label,.sc.detail .sc-head,.sc.detail .sc-hint{opacity:0;pointer-events:none}
.sc-foot{position:absolute;left:0;right:0;bottom:26px;z-index:7;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(20px,3vw)}
.sc-count{font:600 14px var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.75)}
.sc-hint{justify-self:end;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.65);transition:opacity .4s}
.sc-seg{display:flex;padding:4px;border-radius:var(--r);background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.sc-seg button{height:38px;padding:0 20px;border:0;border-radius:var(--r);background:transparent;color:#fff;font:600 14px var(--sans);cursor:pointer;transition:background .25s,color .25s}
.sc-seg button.on{background:#fff;color:#1a0f0c}
@media(max-width:760px){.sc-info{left:20px;right:20px;top:auto;bottom:100px;max-width:none;transform:translateY(20px)}.sc.detail .sc-info{transform:none}.sc-info .ds{font-size:15px;margin-bottom:10px}.sc-info h3{font-size:34px}.sc-info .mt{margin-bottom:16px}.sc-arrow{width:42px;height:42px;font-size:24px}.sc.detail .sc-arrow{display:none}.sc-label{bottom:112px}.sc-hint{display:none}.sc-foot{grid-template-columns:auto 1fr;gap:12px}.sc-seg{justify-self:end}}
@media(prefers-reduced-motion:reduce){.sc-it,.sc-bg::after,.sc-info,.sc-pad{transition:none}.sc-it.act img{animation:none}}
/* light, flat showcase */
.sc{background:var(--flour);color:var(--ink)}
.sc-bg{background:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 72%),linear-gradient(var(--flour),var(--wheat))}
.sc-bg::before,.sc-bg::after,.sc.detail .sc-bg::after{display:none}
.sc-ghost{-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 11%,transparent)}
.sc-head span,.sc-label small,.sc-info .eb{color:color-mix(in srgb,var(--ink) 65%,transparent)}
.sc-head h2,.sc-label b,.sc-info h3,
.sc-head h1[data-pt]{color:var(--ink);text-shadow:none}
.sc-stage{perspective:none}
.sc-it img{filter:drop-shadow(0 22px 16px rgba(42,26,22,.3))}
.sc-pad{height:auto;aspect-ratio:1;transform:translate(-50%,-50%);box-shadow:none;opacity:1;border-radius:50%;background:color-mix(in srgb,var(--ac) 22%,var(--flour));border:2px solid color-mix(in srgb,var(--ac) 45%,transparent);transition:left .7s,top .7s,width .7s,background .9s,border-color .9s}
.sc[data-mode=line]:not(.detail) .sc-pad{aspect-ratio:auto;height:3px;border:0;border-radius:3px;background:color-mix(in srgb,var(--ac) 50%,transparent)}
.sc.detail .sc-pad{opacity:1}
.sc-arrow{border-color:color-mix(in srgb,var(--ink) 28%,transparent);background:var(--card);color:var(--ink);box-shadow:0 6px 18px rgba(42,26,22,.1)}
.sc-arrow:hover{background:var(--espresso);color:var(--on-dark)}
.sc-count,.sc-hint{color:color-mix(in srgb,var(--ink) 60%,transparent)}
.sc-seg{background:var(--card);border-color:var(--line)}
.sc-seg button{color:var(--ink)}
.sc-seg button.on{background:var(--espresso);color:var(--on-dark)}
.sc-info .btn.ghost{color:var(--ink);border-color:var(--ink)}
.sc-info .btn.ghost:hover,.sc-info .btn.ghost:focus-visible{color:var(--espresso);border-color:var(--gold)}
/* showcase heading */
.sc-head{top:36px}
.sc-head .eyb{display:inline-flex;align-items:center;gap:14px;font:600 12px var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text)}
.sc-head .eyb i{width:clamp(28px,6vw,64px);height:1px;background:var(--gold)}
.sc-head h2,
.sc-head h1[data-pt]{margin:14px 0 10px;font:600 clamp(32px,4.8vw,58px)/1.08 var(--serif);letter-spacing:-.015em}
.sc-head h2 em,
.sc-head h1[data-pt] em{font-style:italic;font-weight:500;color:var(--gold-text)}
.sc-head p{margin:0;font-size:15px;letter-spacing:.02em;color:color-mix(in srgb,var(--ink) 62%,transparent)}
@media(max-width:760px){.sc-head{top:28px}.sc-head .eyb{font-size:11px;letter-spacing:.28em}.sc-head p{display:none}}
/* centre the heading, remove the faint background word */
.sc-head{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 20px;box-sizing:border-box}
.sc-head h2,.sc-head p,
.sc-head h1[data-pt]{max-width:none;margin-left:auto;margin-right:auto;text-align:center}
.sc-head h2,
.sc-head h1[data-pt]{margin-top:14px;margin-bottom:10px;text-wrap:balance}
.sc-ghost{display:none!important}
/* crisp sizes, floor shadow instead of the circle */
.sc-it{width:calc(clamp(110px,13vw,160px)*var(--k,1))}
.sc-pad{height:20px;aspect-ratio:auto;border:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(42,26,22,.4),transparent 70%);filter:blur(5px);box-shadow:none}
.sc[data-mode=line]:not(.detail) .sc-pad{height:3px;filter:none;border-radius:3px;background:color-mix(in srgb,var(--ac) 50%,transparent)}
.sc.detail .sc-pad{opacity:0}
/* click a product: its colour sweeps across the whole section */
.sc-bg::after,.sc.detail .sc-bg::after{display:block;opacity:1;background:linear-gradient(120deg,var(--ac),color-mix(in srgb,var(--ac) 45%,#000));clip-path:circle(0% at 50% 51%);transition:clip-path .95s cubic-bezier(.7,0,.2,1)}
.sc.detail .sc-bg::after{clip-path:circle(150% at 50% 51%)}
.sc.detail .sc-info .eb,.sc.detail .sc-info h3,.sc.detail .sc-info .ds,.sc.detail .sc-info .mt{color:#fff}
.sc.detail .sc-info .btn.ghost{color:#fff;border-color:#fff}
.sc.detail .sc-info .btn.ghost:hover,.sc.detail .sc-info .btn.ghost:focus-visible{color:var(--espresso);border-color:var(--gold)}
.sc.detail .sc-count{color:rgba(255,255,255,.8)}
.sc.detail .sc-it img{filter:drop-shadow(0 30px 24px rgba(0,0,0,.45))}
.sc-label{bottom:92px}
@media(prefers-reduced-motion:reduce){.sc-bg::after{transition:none}}
/* About page banner + tabs */
html.js:not([data-v="about"]) .abanner:not(.pbanner){display:none!important}
html.js:not([data-v="products"]) .pbanner{display:none!important}
html.js[data-v="about"]:not([data-ab="about"]) #about,html.js[data-v="about"]:not([data-ab="journey"]) #journey,html.js[data-v="about"]:not([data-ab="promise"]) #promise,html.js[data-v="about"]:not([data-ab="leadership"]) #leadership,html.js[data-v="about"]:not([data-ab="quality"]) #quality{display:none!important}
html.js[data-v="products"] #products{padding-top:clamp(36px,5vw,64px)}
/* slim product tab strip so the carousel stays the focus */
.pbanner{padding:12px 0!important;background:var(--espresso)!important;border-top:0!important}
.pbanner .subnav a{padding:7px 16px;font-size:14px}
html.js[data-v="products"] .sc{min-height:clamp(640px,calc(100vh - 130px),800px)}

.abanner{position:relative;background:radial-gradient(ellipse 60% 120% at 50% 0%,rgba(201,151,58,.22),transparent 70%),var(--espresso);color:var(--on-dark);text-align:center;padding:clamp(34px,5vw,60px) 0 clamp(30px,4vw,44px);border-top:1px solid rgba(255,255,255,.08)}
.abanner .crumb{margin:0 0 18px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:13px;letter-spacing:.04em;color:rgba(246,236,218,.65)}
.abanner .crumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}.abanner .crumb a:hover{border-color:var(--gold-soft)}
.abanner .eyb2{display:inline-flex;align-items:center;gap:14px;font:600 12px var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft)}
.abanner .eyb2 i{width:clamp(28px,6vw,60px);height:1px;background:var(--gold)}
.abanner h1,.abanner h2.hh,.abanner h1[data-pt].hh{max-width:none;margin:14px auto 28px;font:600 clamp(32px,5vw,58px)/1.1 var(--serif);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.abanner h1 em,.abanner h2.hh em,.abanner h1[data-pt].hh em{font-style:italic;font-weight:500;color:var(--gold-soft)}
.abanner .subnav{justify-content:center;gap:10px;margin:0;padding:0;border:0}
.abanner .subnav a{padding:11px 22px;border:1.5px solid rgba(246,236,218,.28);background:rgba(255,255,255,.04);color:var(--on-dark);backdrop-filter:blur(4px);transition:color .3s .1s,border-color .3s,background .3s}
.abanner .subnav a:hover,.abanner .subnav a:focus-visible{background:rgba(255,255,255,.04);color:var(--espresso);border-color:var(--gold)}
.abanner .subnav a.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.abanner .subnav a.on::before{display:none}
html.js[data-v="about"] #about{padding-top:clamp(44px,6vw,76px)}
@media(max-width:700px){.abanner .subnav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -24px;padding:0 24px 6px;scrollbar-width:none}.abanner .subnav::-webkit-scrollbar{display:none}.abanner .subnav a{flex:none}.abanner .crumb{margin-bottom:12px}}

/* slim product strip, mobile-safe (placed last so it wins) */
.abanner.pbanner .subnav a{padding:7px 16px;font-size:14px}
@media(max-width:700px){
  .abanner.pbanner{padding:10px 0!important}
  .abanner.pbanner .subnav{margin:0 -24px;padding:0 24px}
  .abanner.pbanner .subnav a{padding:6px 14px;font-size:13px}
  html.js[data-v="products"] .sc{min-height:clamp(560px,calc(100svh - 120px),760px)}
  html.js[data-v="products"] .fab a:not(.wa):not(.call){display:none}
}

/* mobile menu dropdowns for About and Products */
.subtg{display:none}
@media(max-width:900px){
  nav.primary>ul>li:has(>.sub){display:flex;flex-wrap:wrap;align-items:stretch}
  nav.primary>ul>li:has(>.sub)>a{flex:1 1 0;min-width:0}
  .subtg{display:flex;align-items:center;justify-content:center;flex:none;width:52px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.1);color:var(--on-dark);cursor:pointer;padding:0}
  .subtg svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
  nav.primary>ul>li.open>.subtg svg{transform:rotate(180deg)}
  nav.primary>ul>li>.sub{display:none;position:static;flex:0 0 100%;width:100%;min-width:0;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(255,255,255,.05);color:var(--on-dark);border-top:0;border-left:3px solid var(--gold);border-radius:0 0 6px 6px;padding:6px 8px;margin:0 0 8px}
  nav.primary>ul>li.open>.sub{display:block}
  nav.primary .sub a{padding:10px 12px;border-bottom:0}
  nav.primary .sub a b{font-weight:600;font-size:16px}
  nav.primary .sub a span{color:var(--on-dark-muted);font-size:13px}
  nav.primary .sub a:hover{background:rgba(255,255,255,.08)}
}

/* clientele carousel (our presence page) */
.rcar{touch-action:pan-y;margin:22px 0 0;padding:26px 0 34px;overflow:hidden;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rcar::-webkit-scrollbar{display:none}
.rcar.drag{cursor:grabbing}
.rcar:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rtrack{display:flex;width:max-content;list-style:none;margin:0;padding:0}
.rc{position:relative;flex:none;width:200px;height:120px;margin-right:16px;display:grid;place-items:center;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;will-change:transform}
.rc.tilt{transition:transform .12s linear,box-shadow .35s,border-color .35s;border-color:var(--gold);box-shadow:0 22px 38px rgba(42,26,22,.2)}
.rc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.75),transparent 55%);transition:opacity .3s}
.rc.tilt::after{opacity:.55}
.rc img{max-width:150px;max-height:76px;width:auto;height:auto;object-fit:contain;pointer-events:none;-webkit-user-drag:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rc.tilt img{transform:translateZ(18px)}
.rc.vet{border-color:var(--gold)}
.rc b{position:absolute;top:0;left:0;background:var(--gold);color:var(--on-gold);font:700 12px/1 var(--sans);padding:5px 8px;border-radius:5px 0 6px 0}
.rhint{margin:-10px 0 0;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
@media(max-width:900px){.rc{width:160px;height:100px;padding:16px;margin-right:12px}.rc img{max-width:118px;max-height:58px}}
@media(prefers-reduced-motion:reduce){.rc,.rc img{transition:none}}

/* mobile hero: product centred in its ring, no empty gap, no sideways entrance */
@media(max-width:900px){
  .slide{padding:20px 0 120px}
  .pics{min-height:clamp(230px,56vw,330px);align-items:center;padding:10px 0 0}
  .pics::before{bottom:auto;top:50%;width:min(86%,clamp(240px,66vw,380px));transform:translate(-50%,-50%)}
  .slide .pics{transform:none;transition:opacity .6s .1s}
  .slide .tx{transform:none}
  .hero::before{top:-8%}
}

/* baking status inside the mobile menu */
.live{display:inline-flex;align-items:center;gap:9px;min-width:0}
.live b{color:var(--on-dark);font-weight:600}
.stag{display:none}
@media(max-width:900px){
  .stag{display:flex;flex-direction:column;justify-content:center;margin-left:-4px;text-decoration:none;color:var(--on-dark);line-height:1.15}
  .stag b{font:600 19px var(--serif)}
  .stag span{font-size:12px;color:var(--gold-soft);margin-top:3px}
  header.site .wrap{gap:14px}
}
.fstatus{border-top:1px solid rgba(246,236,218,.14);padding:18px 0;display:flex;justify-content:flex-end;font-size:14px}
@media(max-width:900px){.fstatus{justify-content:flex-start}}
.fab{flex-direction:column;align-items:flex-end;gap:10px}
.fab a,.fab a:hover,.fab a:focus-visible{width:auto;min-width:48px;height:48px;padding:0 13px;justify-content:flex-start;gap:0;border-radius:24px;white-space:nowrap}
.fab svg{width:22px;height:22px;flex:none}
.fab a span{display:block;max-width:0;opacity:0;margin-left:0;overflow:hidden;transition:max-width .28s ease,margin-left .28s ease,opacity .2s ease}
.fab a:focus-visible span{max-width:120px;margin-left:9px;opacity:1}
@media(hover:hover){.fab a:hover span{max-width:120px;margin-left:9px;opacity:1}}
@media(prefers-reduced-motion:reduce){.fab a span{transition:none}}
@media(max-width:900px){.fab{right:14px;bottom:14px}.fab a,.fab a:hover,.fab a:focus-visible{min-width:46px;height:46px;padding:0 12px}}
.fab a.call{display:none}
@media(max-width:900px){.fab a.call{display:inline-flex}}
.fab a.wa{background:#25d366;color:#08351b}.fab a.wa:hover,.fab a.wa:focus-visible{background:#25d366;color:#08351b}
:where(img[width][height]){height:auto}
/* careers page extras */
.cbtns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 8px}
.cwhy{padding-top:72px}
.cwhy h2,.cduo h3,
.cwhy h1[data-pt]{font-family:var(--serif);color:var(--on-dark)}
.cwhy h2,
.cwhy h1[data-pt]{font-size:clamp(28px,3.6vw,40px);margin:0 0 28px}
.cwgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cwgrid article{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--gold);border-radius:var(--r);padding:26px 22px}
.cwgrid h3{font-family:var(--serif);font-size:21px;color:var(--gold-soft);margin:0 0 10px}
.cwgrid p{margin:0;line-height:1.55;color:var(--on-dark);opacity:.88;font-size:15.5px}
.cduo{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:40px;padding-bottom:72px}
.cwp{background:var(--card);color:var(--ink);border-radius:var(--r);padding:34px}
.cwp h3{font-size:28px;color:var(--ink);margin:0 0 12px}
.cwp p{margin:0 0 22px;line-height:1.6}
@media(max-width:900px){.cwgrid{grid-template-columns:1fr 1fr}.cduo{grid-template-columns:1fr}}
@media(max-width:560px){.cwgrid{grid-template-columns:1fr}.cwhy{padding-top:48px}}

/* home motion: only when motion is allowed (html.hm set by script) */
html.hm .rvl{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*90ms)}
html.hm .rvl.in{opacity:1;transform:none}
@keyframes bwfloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
html.hm .slide.on .pics img{animation:bwfloat 6s ease-in-out infinite}
html.hm .slide.on .pics img:nth-child(2){animation-duration:7s;animation-delay:-2s}
html.hm .slide.on .pics img:nth-child(3){animation-duration:6.5s;animation-delay:-4s}

/* values row */
.values.four{gap:16px;border-top:0;margin-top:56px}
.values.four li{position:relative;padding:28px 24px 26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,box-shadow .3s}
.values.four li::before{content:"";position:absolute;left:0;top:0;height:3px;width:44px;background:var(--gold);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.values.four li:last-child{border:1px solid var(--line)}
.values.four li:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,35,20,.12)}
.values.four li:hover::before{width:100%}
.values.four .vi{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--gold) 18%,transparent);margin-bottom:16px}
.values.four .vi svg{width:23px;height:23px;fill:none;stroke:var(--gold-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.values.four h3{font-size:22px;margin-bottom:8px}
.values.four p{line-height:1.6;margin:0}
@media(max-width:900px){.values.four{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.values.four{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.values.four li,.values.four li::before{transition:none}}

/* ---- polish pass ---- */
/* logo keeps a light cream disc in dark mode so the artwork stays visible */
.logo{background:#faf6ee}
/* mobile stats: no stray divider on the full-width last item */
@media(max-width:900px){.stats li:last-child{border-right:0}}
/* hero pause button sits above the tab bar, not on top of the 4th tab */
.pp{top:-90px}
@media(max-width:900px){.pp{display:none}}
/* products: two columns on phones instead of one very long column */
@media(max-width:560px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pbtn .ph{height:150px;padding:10px}
  .pbtn .pn{font-size:17px;padding:12px 12px 2px}
  .pbtn .pm{padding:0 12px;font-size:13.5px}
  .pbtn .pv{padding:10px 12px 14px;font-size:14px}
}
/* comfortable tap targets for small controls */
button.cp{min-height:28px;padding:5px 11px;font-size:12.5px}
.linkbtn,.fmapl{display:inline-block;padding:8px 0}
@media(pointer:coarse){
  button.cp{min-height:36px;padding:7px 14px}
  .leader a,.person a,footer.site li a,.fnote a,.mapnote a{display:inline-block;padding:7px 0}
  .subnav a{padding-top:11px;padding-bottom:11px}
  .htab{padding-top:20px;padding-bottom:20px}
}
/* storage notice: compact on phones so it does not cover the hero */
@media(max-width:560px){
  #bwck{padding:12px 14px;gap:10px;bottom:12px}
  #bwck p{flex:1 1 100%;font-size:13px;line-height:1.45}
  #bwck .btn{flex:1;padding:9px 12px;font-size:14px}
}
/* keep the floating buttons clear of the footer text on small screens */
@media(max-width:560px){footer.site{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* ---- our journey (redesigned) ---- */
.jny .lead{margin-top:16px}
.jw{position:relative;margin-top:56px}
.jl{list-style:none;margin:0;padding:0;position:relative}
.jl::before,.jl::after{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:3px;margin-left:-1.5px;border-radius:3px;background:var(--line)}
.jl::after{background:linear-gradient(var(--gold),var(--gold-text));bottom:auto;height:calc((100% - 16px)*var(--p,1))}
.jl li{position:relative;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;margin-bottom:30px}
.jl li:last-child{margin-bottom:0}
.jl li::before{content:"";grid-column:2;grid-row:1;justify-self:center;width:20px;height:20px;border-radius:50%;background:var(--flour);border:4px solid var(--gold-text);z-index:1;transition:background .4s,transform .4s,box-shadow .4s}
.jl li.in::before{background:var(--gold);border-color:var(--gold-text);box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 22%,transparent)}
.jl .jy{font:600 clamp(44px,5.4vw,72px)/1 var(--serif);color:var(--gold-text);letter-spacing:-.02em}
.jl .jc{position:relative;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r);padding:26px 28px 28px;transition:transform .3s,box-shadow .3s}
.jl .jc:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(42,26,22,.13)}
.jl .ji{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--gold) 18%,transparent);margin-bottom:14px}
.jl .ji svg{width:23px;height:23px;fill:none;stroke:var(--gold-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jl h3{font-size:24px;margin-bottom:6px}
.jl p{color:var(--muted);font-size:16.5px;line-height:1.55}
.jl li:nth-child(odd) .jc{grid-column:1;grid-row:1}
.jl li:nth-child(odd) .jy{grid-column:3;grid-row:1;padding-left:34px}
.jl li:nth-child(even) .jc{grid-column:3;grid-row:1}
.jl li:nth-child(even) .jy{grid-column:1;grid-row:1;text-align:right;padding-right:34px}
.jl li.now .jc{background:var(--espresso);border-color:var(--espresso);border-top-color:var(--gold);color:var(--on-dark)}
.jl li.now h3{color:var(--on-dark)}
.jl li.now p{color:var(--on-dark-muted)}
.jl li.now .ji{background:var(--gold)}
.jl li.now .ji svg{stroke:var(--espresso)}
.jl li.now .jc::after{content:"Now";position:absolute;top:18px;right:20px;font:700 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.jstats{list-style:none;margin:64px 0 0;padding:28px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.jstats b{display:block;font:600 clamp(34px,4vw,48px)/1 var(--serif);color:var(--gold-text)}
.jstats span{display:block;margin-top:6px;color:var(--muted);font-size:15px}
html.jm .jl li{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.jm .jl li.in{opacity:1;transform:none}
@media(max-width:900px){
  .jw{margin-top:40px}
  .jl::before,.jl::after{left:19px;margin-left:-1.5px;top:12px;bottom:12px}
  .jl::after{bottom:auto;height:calc((100% - 24px)*var(--p,1))}
  .jl li{grid-template-columns:1fr;padding-left:54px;margin-bottom:26px;align-items:start}
  .jl li::before{position:absolute;left:9px;top:10px;grid-column:auto;grid-row:auto;justify-self:auto}
  .jl li .jy,.jl li:nth-child(odd) .jy,.jl li:nth-child(even) .jy{grid-column:1;grid-row:1;text-align:left;padding:0 0 10px;font-size:44px}
  .jl li .jc,.jl li:nth-child(odd) .jc,.jl li:nth-child(even) .jc{grid-column:1;grid-row:2;padding:22px 22px 24px}
  .jstats{grid-template-columns:1fr 1fr;margin-top:48px}
}
@media(prefers-reduced-motion:reduce){.jl .jc{transition:none}.jl .jc:hover{transform:none}}

/* ---- mobile data: lite mode ---- */
html.lite .track{animation:none}
html.lite .hub .ring{animation:none}
html.lite .strip{overflow-x:auto}
.mapbox:not([data-ready]) iframe,.fmap:not([data-ready]) iframe{display:none}

/* ---- slicing loaf, micro-interactions ---- */
.pbtn .ph{position:relative;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .btn{transition:color .3s .1s,border-color .3s,background .2s,transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
  .btn:active,.filters button:active,.burger:active,#bwsearch:active,.fab a:active,#bwtop:active{transform:scale(.95)}
  .pbtn{transition:border-color .2s,box-shadow .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
  .pbtn:active{transform:translateY(-1px) scale(.985)}
  .cert,.person{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
  .filters button{transition:all .2s,transform .15s}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:not(.busy):hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(42,26,22,.2)}
  .btn:not(.busy):active{transform:translateY(0) scale(.97);box-shadow:none}
  .pbtn:hover{transform:translateY(-4px)}
  .cert:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(42,26,22,.1)}
  .pbtn:hover .ph img{transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.07);transition-duration:.12s}
}
/* ---- motion pack ---- */
/* 1. page transition */
@keyframes pgin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#main.pgin{animation:pgin .5s cubic-bezier(.2,.7,.2,1)}
/* 3. delivery van on the journey line */
.jvan{display:none}
html.jm .jvan{display:grid;place-items:center;position:absolute;z-index:3;left:50%;top:calc(8px + (100% - 16px)*var(--p,0));width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:var(--espresso);border:2px solid var(--gold);box-shadow:0 6px 16px rgba(42,26,22,.3);transition:top .18s linear;pointer-events:none}
.jvan svg{width:20px;height:20px;fill:none;stroke:var(--gold-soft);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){html.jm .jvan{left:19px;top:calc(12px + (100% - 24px)*var(--p,0))}}
/* 4. certification stamps */
html.cm .cert{opacity:0;transform:scale(1.07) rotate(-1deg)}
html.cm .cert.in{opacity:1;transform:none;transition:opacity .35s,transform .6s cubic-bezier(.3,1.55,.5,1);animation:stampflash .9s ease-out}
@keyframes stampflash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent)}100%{box-shadow:0 0 0 22px color-mix(in srgb,var(--gold) 0%,transparent)}}
/* 6. product dialog backdrop */
dialog[open]::backdrop{animation:bdfade .35s ease-out}
@keyframes bdfade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#main.pgin,html.cm .cert.in,dialog[open]::backdrop{animation:none}}
.pdacts{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:560px){.pdacts .btn{flex:1 1 100%}}

/* hierarchy update: eyebrow tier + closing CTA */
.hk{margin:0 0 14px;font:700 13px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.dark .hk{color:var(--gold-soft)}
html.js:not([data-v="home"]) .hk,html.js:not([data-v="home"]) .home-cta{display:none!important}
.home-cta{background:var(--wheat);padding:clamp(56px,7vw,88px) 0;border-top:1px solid var(--line)}
.home-cta .wrap{display:grid;grid-template-columns:1.5fr auto;gap:clamp(24px,5vw,72px);align-items:center}
.home-cta h2,
.home-cta h1[data-pt]{max-width:26ch}
.home-cta .lead{margin-top:14px;max-width:34em}
.home-cta .acts{display:flex;gap:14px;flex-wrap:wrap}
.home-cta .btn.fill{padding:16px 32px;font-size:17px}
@media(max-width:900px){.home-cta .wrap{grid-template-columns:1fr}}
.plx{display:block}.plx-head{max-width:46em}.plx-eye{font:700 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 12px}
.plx-steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plx-steps li{background:rgba(255,255,255,.05);border:1px solid rgba(246,236,218,.18);border-radius:var(--r);padding:24px}
.plx-steps b{font:600 28px var(--serif,Georgia,serif);color:var(--gold-soft)}
.plx-steps h3{font-size:20px;margin:10px 0 6px;color:var(--on-dark)}.plx-steps p{margin:0;color:var(--on-dark-muted);font-size:15px}
.plx-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);align-items:center;margin-top:36px}
.plx-why{list-style:none;margin:0;padding:0;display:grid;gap:14px}.plx-why li{display:flex;gap:12px;font-size:17px;color:var(--on-dark)}
.plx-why span{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-size:14px;font-weight:700}
.plx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}.plx-cta .btn{margin-top:0}
@media(max-width:900px){.plx-steps{grid-template-columns:1fr 1fr}.plx-grid{grid-template-columns:1fr}}
@media(max-width:520px){.plx-steps{grid-template-columns:1fr}}
.plpart h3{font-size:20px;color:var(--on-dark-muted);font-family:var(--sans);font-weight:500;margin:0 0 16px}
.plcards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plcard{background:rgba(255,255,255,.06);border:1px solid rgba(246,236,218,.2);border-radius:var(--r);padding:22px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.plcard .tile{width:150px;height:140px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden;margin-bottom:10px}
.plcard .tile img{display:block;width:auto;height:auto;max-width:112px;max-height:116px}
.plcard .tile.gala{padding:0}.plcard .tile.gala img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.plcard b{font-size:18px;color:var(--on-dark)}.plcard span{color:var(--on-dark-muted);font-size:15px}
@media(max-width:520px){.plcards{grid-template-columns:1fr}}
/* ---- motion pack 2: dialog polish + micro-interactions ---- */
dialog[open] .im>img{animation:dimg .7s cubic-bezier(.2,.7,.2,1) both}
dialog[open] .bd>*{animation:dup .5s cubic-bezier(.2,.7,.2,1) both}
dialog[open] .bd>:nth-child(2){animation-delay:.08s}dialog[open] .bd>:nth-child(3){animation-delay:.14s}dialog[open] .bd>:nth-child(4){animation-delay:.2s}dialog[open] .bd>:nth-child(5){animation-delay:.28s}
@keyframes dimg{from{opacity:0;transform:scale(.88) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes dup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pdtilt{transition:transform .15s ease-out}
.rip{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;pointer-events:none;background:rgba(201,151,58,.38);transform:scale(0);animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(20);opacity:0}}
@media (prefers-reduced-motion:reduce){dialog[open] .im>img,dialog[open] .bd>*,.rip{animation:none!important}}
html.lite dialog[open] .im>img,html.lite dialog[open] .bd>*{animation:none}

/* former inline style attributes (CSP: no 'unsafe-inline' for styles) */
.u-tabbar{position:relative;height:0;padding:0}
.u-mt28{margin-top:28px}
.u-m0b24{margin:0 0 24px}
.u-mt44{margin-top:44px}
.u-hide{display:none}
.bw-nores{padding:12px 4px;color:var(--muted)}

/* contact: compact 2x2 people grid so the right column is no taller than the form (no empty space under the form) */
.cgrid{grid-template-columns:1fr 1fr}
.cgrid>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-content:start}
.people{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-bottom:1px solid var(--line)}
.person{padding:16px 0;gap:12px}
.person:last-child{border-bottom:0}
.person .av{width:44px;height:44px;font-size:17px}
.person h3{font-size:20px}
.cgrid .gen,.cgrid .gen+.gen{margin-top:20px;padding:16px 18px;font-size:15px}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}
@media(max-width:600px){.cgrid>div:last-child,.people{grid-template-columns:1fr}}

/* Bread roll pack is a landscape image, so it is sized by width, never by a fixed height */
/* Hero "Pav and rolls" slide: both packs share the picture column as percentages, so they always fit */
.pics.duo{align-items:center}
.pics.duo img{height:auto;min-width:0;flex:0 1 auto}
.pics.duo img:first-child{width:55%}
.pics.duo img.roll{width:41%}
/* Scrolling strip: same visual height as its neighbours (about 114px vs 120px) */
.track img.roll{height:auto;width:200px;flex:none}
/* Product grid card and product dialog: never wider than their box */
.pbtn .ph img.roll{max-width:100%;height:auto}
.dl .im img{max-width:100%}

/* ---- fixes: header fits on one line at every desktop width ---- */
@media(min-width:901px){nav.primary>ul>li>a{white-space:nowrap}}
@media(min-width:901px) and (max-width:1200px){
  nav.primary>ul>li>a{padding:28px 9px;font-size:15px}
  nav.primary>ul>li>a::after{left:9px;right:9px}
  nav.primary .hcta{display:none}
}
@media(min-width:901px) and (max-width:1000px){
  header.site .wrap{gap:14px}
  nav.primary>ul{gap:0}
  nav.primary>ul>li>a{padding:28px 7px;font-size:14.5px}
  nav.primary>ul>li>a::after{left:7px;right:7px}
}
/* ---- fixes: contact people list no longer runs off the side on small laptops and tablets in landscape ---- */
@media(min-width:901px) and (max-width:1100px){.cgrid>div:last-child,.people{grid-template-columns:1fr}}
/* ---- fixes: phones ---- */
@media(max-width:760px){
  /* keep the Carousel / Line-up switch clear of the floating call and WhatsApp buttons */
  .sc-foot{padding-right:76px}
}
@media(max-width:600px){
  /* route map: stop the Sharjah and Ajman labels running into each other */
  .nd text,.hub text{font-size:26px}
  .nd[data-e="Ajman"] text{text-anchor:start;transform:translate(14px,-22px)}
}
@media(max-width:760px){
  /* product name under the carousel stays clear of the floating buttons */
  .sc-label{padding:0 64px 0 12px}
  .sc-label b{font-size:clamp(18px,5.4vw,28px);line-height:1.15}
  .sc-seg button{white-space:nowrap}
}
@media(max-width:400px){
  .sc-seg button{padding:0 14px}
  /* header tagline stays on two tidy lines on small phones */
  .stag b{font-size:17px;white-space:nowrap}
  .stag span{font-size:11px;white-space:nowrap}
  header.site .wrap{gap:10px}
}
@media(max-width:340px){.stag{display:none}}

/* ---- contact people: tidy cards, one line per phone/email, small copy icon ---- */
button.cp.ic{flex:none;width:32px;height:32px;min-height:0;padding:0;margin:0 0 0 8px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);opacity:1;vertical-align:middle;transition:border-color .2s,color .2s,background .2s}
button.cp.ic svg{grid-area:1/1;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s}
button.cp.ic .i2{opacity:0}
button.cp.ic.ok .i1{opacity:0}button.cp.ic.ok .i2{opacity:1}
button.cp.ic:hover,button.cp.ic:focus-visible{border-color:var(--gold);color:var(--gold-text)}
button.cp.ic.ok{border-color:var(--gold);background:var(--gold);color:var(--on-gold)}
footer.site button.cp.ic{border-color:rgba(246,236,218,.3);color:var(--on-dark-muted)}
footer.site button.cp.ic:hover,footer.site button.cp.ic:focus-visible{border-color:var(--gold);color:var(--gold-soft)}
@media(pointer:coarse){button.cp.ic{width:38px;height:38px;padding:0}}

#contact .cgrid>div:last-child{display:flex;flex-direction:column;gap:16px}
#contact .people{display:grid;grid-template-columns:1fr 1fr;gap:16px;border:0}
#contact .person,#contact .person:last-child{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px 18px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
#contact .ptop{display:flex;align-items:center;gap:12px;min-width:0}
#contact .person .av{width:44px;height:44px;font-size:17px}
#contact .person h3{font-size:20px;line-height:1.2}
#contact .person .role{margin:2px 0 0;font-size:14px}
#contact .lns{display:flex;flex-direction:column;min-width:0}
#contact .ln{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:4px 0;border-top:1px solid var(--line)}
#contact .ln a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;font-weight:500;padding:0}
#contact .ln button.cp.ic{margin:0}
#contact .cgrid .gen,#contact .cgrid .gen+.gen{margin:0;padding:14px 18px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
#contact .gen button.cp.ic{margin-left:2px}
/* small laptops: one card per row */
@media(max-width:1200px){#contact .people{grid-template-columns:1fr}}
/* tablets (form above, people below at full width): name on the left, contact lines on the right, all cards lined up */
@media(min-width:640px) and (max-width:900px){
  #contact .person,#contact .person:last-child{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:8px 20px;padding:12px 18px}
  #contact .ln:first-child{border-top:0}
}
#contact .gml{display:inline-flex;align-items:center;white-space:nowrap}
#contact .ptop h3{white-space:nowrap}

/* floating buttons step aside (set by script on phones and tablets) */
.fab{transition:opacity .25s,transform .25s,visibility .25s}
.fab.away{opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.fab{transition:none}}
/* hero tabs: visible keyboard focus */
.htab:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;color:var(--on-dark)}
.hero .eyebrow{text-wrap:balance}

/* ---- rotating gold glow on the key call-to-action buttons ----
   a bright comet of gold light orbits just outside the button, the button edge shimmers,
   and a soft halo breathes underneath */
@property --ga{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn.fill.glow{overflow:visible}
.btn.fill.glow,.btn.fill.glow:hover,.btn.fill.glow:focus-visible{
  border-color:transparent;
  background:linear-gradient(var(--gold),var(--gold)) padding-box,
    conic-gradient(from var(--ga),var(--gold) 0deg,var(--gold) 200deg,#fff6dc 300deg,#ffe7a8 330deg,var(--gold) 360deg) border-box;
  animation:bwga 3s linear infinite,bwgp 1.5s ease-in-out infinite alternate}
.btn.fill.glow:not(.busy)::after{content:"";position:absolute;inset:-7px;border-radius:calc(var(--r) + 7px);padding:4px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ga),transparent 0deg,transparent 150deg,rgba(201,151,58,.25) 220deg,rgba(233,200,128,.75) 290deg,#fff3cf 335deg,#ffffff 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:bwga 3s linear infinite}
/* header button: slower and softer, so the page's own button stays the star */
.btn.fill.glow.glow-soft,.btn.fill.glow.glow-soft:hover{animation:bwga 5s linear infinite,bwgps 2.5s ease-in-out infinite alternate}
.btn.fill.glow.glow-soft:not(.busy)::after{inset:-5px;padding:3px;border-radius:calc(var(--r) + 5px);opacity:.75;animation-duration:5s}
@keyframes bwga{to{--ga:360deg}}
@keyframes bwgp{from{box-shadow:0 0 10px 0 rgba(201,151,58,.35)}to{box-shadow:0 0 26px 5px rgba(233,200,128,.6)}}
@keyframes bwgps{from{box-shadow:0 0 6px 0 rgba(201,151,58,.25)}to{box-shadow:0 0 16px 2px rgba(233,200,128,.42)}}
.btn.fill.glow.busy{animation:none!important}
/* still glow, no movement, for reduced motion and data-saver visitors */
@media(prefers-reduced-motion:reduce){.btn.fill.glow,.btn.fill.glow.glow-soft,.btn.fill.glow::after{animation:none!important}.btn.fill.glow{box-shadow:0 0 14px 1px rgba(201,151,58,.42)}.btn.fill.glow::after{display:none}}

.dl .im{position:relative}

.dl .im{flex-direction:column}

/* ---- product packs: tilt moves to the wrapper, plus a light glint across the bag ---- */
.pbtn .ph .pk{position:relative;display:flex;align-items:center;justify-content:center;height:100%;max-width:100%;transition:transform .35s}
.pbtn .ph .pk img{max-height:100%;max-width:100%}
.pbtn:hover .ph .pk img{transform:none}
.pbtn:hover .ph .pk{transform:scale(1.06)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .pbtn:hover .ph .pk{transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.07);transition-duration:.12s}
}
.pbtn .ph .pk .gl{position:absolute;inset:0;margin:auto;max-height:100%;max-width:100%;width:auto;height:auto;pointer-events:none;opacity:0;
  filter:brightness(0) invert(1);
  -webkit-mask-image:linear-gradient(105deg,transparent 40%,rgba(0,0,0,.55) 46%,#000 50%,rgba(0,0,0,.55) 54%,transparent 60%);mask-image:linear-gradient(105deg,transparent 40%,rgba(0,0,0,.55) 46%,#000 50%,rgba(0,0,0,.55) 54%,transparent 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:120% 0;mask-position:120% 0}
.pbtn .ph .pk img.gl,.pbtn:hover .ph .pk img.gl{transform:none}
.pbtn .ph .pk.shine .gl{animation:bwshine2 .9s ease-in-out both}
/* the band starts just off the left edge of the pack and leaves past the right edge */
@keyframes bwshine2{0%{opacity:1;-webkit-mask-position:95% 0;mask-position:95% 0}90%{opacity:1}100%{opacity:0;-webkit-mask-position:5% 0;mask-position:5% 0}}
@media(prefers-reduced-motion:reduce){.pbtn .ph .pk.shine .gl{animation:none}.pbtn .ph .pk{transition:none}}

/* ---- gold crumb burst when an enquiry goes out ---- */
.bwcrumb{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;border-radius:40%;will-change:transform,opacity;
  animation:bwcrumb var(--t,1s) cubic-bezier(.15,.7,.35,1) forwards}
.bwcrumb.grain{border-radius:50%}
@keyframes bwcrumb{
  0%{transform:translate(var(--x0),var(--y0)) rotate(0) scale(.4);opacity:1}
  60%{transform:translate(calc(var(--x0) + var(--dx)*.85),calc(var(--y0) + var(--dy))) rotate(calc(var(--r)*.7)) scale(1);opacity:1}
  100%{transform:translate(calc(var(--x0) + var(--dx)),calc(var(--y0) + var(--dy) + var(--g))) rotate(var(--r)) scale(.9);opacity:0}}

/* ---- enquiry list ("basket") ---- */
.pcard{position:relative}
.addq{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px 0 9px;border-radius:99px;
  border:1.5px solid var(--gold);background:var(--card);color:var(--gold-text);font:700 13px var(--sans);cursor:pointer;box-shadow:0 4px 10px rgba(42,26,22,.12);transition:background .2s,color .2s,transform .15s}
.addq svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.addq .ck{display:none}.addq.on .pl{display:none}.addq.on .ck{display:inline}
.addq:hover{background:var(--gold);color:var(--on-gold)}
.addq.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.addq:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.addq:active{transform:scale(.94)}
@media(pointer:coarse){.addq{height:36px}}
.pcard.inq .pbtn{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.pdacts .addq-dl[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.qbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);
  padding:8px 8px 8px 18px;border-radius:99px;background:var(--espresso);color:var(--on-dark);border:1px solid rgba(201,151,58,.6);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.qbar[hidden]{display:none}
.qtxt{margin:0;font:600 14.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.qclear{background:none;border:0;color:var(--on-dark-muted);font:500 13.5px var(--sans);text-decoration:underline;cursor:pointer;padding:6px 4px;flex:none}
.qclear:hover{color:var(--gold-soft)}
.qbar .qsend{padding:9px 18px;font-size:14px;border-radius:99px;flex:none}
.qbar.pop{animation:qpop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes qpop{0%{transform:translateX(-50%) scale(.94)}100%{transform:translateX(-50%) scale(1)}}
html.js[data-v="contact"] .qbar{display:none}
html.hasq #bwtop{bottom:84px}
@media(max-width:900px){
  .qbar{left:14px;right:76px;bottom:14px;transform:none;max-width:none;padding:6px 6px 6px 14px;gap:8px}
  .qbar.pop{animation:qpopm .35s cubic-bezier(.3,1.6,.5,1)}
  @keyframes qpopm{0%{transform:scale(.95)}100%{transform:none}}
  .qtxt{font-size:13px}
  .qbar .qsend{padding:8px 14px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.qbar.pop{animation:none}}

/* ---- Products: Cards | Table switch and comparison table ---- */
.pctrl{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:34px 0 28px}
.pctrl .filters{margin:0}
.vsw{display:inline-flex;padding:4px;border-radius:var(--r);background:var(--card);border:1.5px solid var(--line);flex:none}
.vsw button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:4px;background:transparent;color:var(--ink);font:600 14px var(--sans);cursor:pointer}
.vsw button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vsw button[aria-pressed="true"]{background:var(--espresso);color:var(--on-dark)}
.vsw button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#products.tview .pgrid{display:none}
.ptable[hidden]{display:none}
.ptable{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.ptable table{width:100%;border-collapse:collapse;font-size:16px}
.ptable caption{text-align:left;padding:16px 20px 0;color:var(--muted);font-size:14px}
.ptable th{font:700 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 20px;border-bottom:2px solid var(--line);white-space:nowrap}
.ptable th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ptable th button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.ptable th button::after{content:"↕";font-size:13px;opacity:.45;letter-spacing:0}
.ptable th[aria-sort="ascending"] button::after{content:"↑";opacity:1;color:var(--gold-text)}
.ptable th[aria-sort="descending"] button::after{content:"↓";opacity:1;color:var(--gold-text)}
.ptable td{padding:12px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable tbody tr{cursor:pointer;transition:background .15s}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover td{background:color-mix(in srgb,var(--wheat) 45%,transparent)}
.ptable tr[hidden]{display:none}
.ptable tr.inq td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
.ptable .pcell{display:flex;align-items:center;gap:8px 14px;min-width:0}
.ptable .pcell img{flex:none;width:44px;height:60px;object-fit:contain;background:var(--wheat);border-radius:4px;padding:4px}
.ptable .nm{all:unset;cursor:pointer;font:600 19px/1.25 var(--serif);color:var(--ink)}
.ptable .nm:hover{color:var(--gold-text)}
.ptable .nm:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.ptable .tag{font:700 11px/1 var(--sans);letter-spacing:.04em;padding:4px 8px;border-radius:99px}

.ptable .cat{color:var(--muted)}
.ptable .num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ptable .go{width:1%;color:var(--gold-text)}
.ptable .go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}
@media(max-width:640px){
  .ptable{background:transparent;border:0;overflow:visible}
  .ptable table,.ptable tbody,.ptable tr,.ptable td,.ptable caption{display:block}
  .ptable thead{display:none}
  .ptable caption{padding:0 0 10px}
  .ptable tbody{display:grid;gap:10px}
  .ptable tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"pr go" "cat cat" "pk lf";gap:6px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
  .ptable tr[hidden]{display:none}
  .ptable tr.inq{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
  .ptable tr.inq td:first-child{box-shadow:none}
  .ptable td{padding:0;border:0}
  .ptable .pr{grid-area:pr;min-width:0}.ptable .go{grid-area:go;align-self:center;width:auto}.ptable .cat{grid-area:cat;font-size:14px}
  .ptable td.num:nth-of-type(3){grid-area:pk}.ptable td.num:nth-of-type(4){grid-area:lf;text-align:right}
  .ptable td.num::before{content:attr(data-l);display:block;font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .ptable .nm{font-size:18px}
  .ptable tbody tr:hover td{background:none}
  .pctrl{margin:30px 0 22px}
}

/* copy product link (in the product popup) */
.pdlink{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 0;background:none;border:0;color:var(--muted);font:600 14px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pdlink svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pdlink:hover{color:var(--gold-text)}
.pdlink.ok{color:var(--gold-text);text-decoration:none}
.pdlink:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* product popup photo gallery */
.pgal{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pgal[hidden]{display:none}
.pgal button{width:52px;height:64px;padding:4px;border:1.5px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer;display:block;overflow:hidden;flex:none}
.dl .im .pgal button img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;animation:none}
.pgal button:hover{border-color:var(--gold)}
.pgal button[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.pgal button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.b3grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.b3tx h2,
.b3tx h1[data-pt]{font:600 clamp(40px,4.6vw,64px)/1.02 var(--serif);margin:0 0 20px;letter-spacing:-.02em;color:var(--on-dark)}
.b3tx h2 em,
.b3tx h1[data-pt] em{font-style:italic;font-weight:400;color:var(--gold-soft)}
.b3lead{font-size:clamp(17px,1.5vw,19px);color:var(--on-dark-muted);max-width:30em;margin:0 0 22px}

.b3acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.b3count{font:500 14px var(--sans);color:var(--gold-soft)}
.b3stagewrap{position:relative;border-radius:24px;background:radial-gradient(ellipse 70% 60% at 50% 42%,#f6f5f2,#e3e1dc);box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden}
.b3stage{position:relative;width:100%;touch-action:pan-y;cursor:grab}
.b3stage.on{touch-action:none}
.b3stage{height:clamp(380px,38vw,520px)}
.b3stage:active{cursor:grabbing}
.p3gl{position:absolute;inset:0}
.p3gl canvas{display:block;width:100%!important;height:100%!important}
.p3photo{position:absolute;inset:8% 10% 10%;width:80%;height:82%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18))}
.p3photo[hidden]{display:none}

.b3msg{position:absolute;right:16px;top:12px;margin:0;font:500 12.5px var(--sans);color:#665651;z-index:2}
.b3msg:empty{display:none}
.b3label{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:column;background:rgba(255,255,255,.9);border-radius:12px;padding:8px 14px;color:#241915;z-index:2}
.b3label b{font:600 16px var(--serif)}
.b3label span{font-size:12.5px;color:#665651}
.b3sw{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.b3sw button{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:99px;border:1px solid rgba(233,200,128,.35);background:rgba(255,255,255,.06);color:var(--on-dark);font:500 14px var(--sans);cursor:pointer;min-height:40px}
.b3sw button img{width:28px;height:28px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.12);padding:2px}
.b3sw button:hover{border-color:var(--gold-soft)}
.b3sw button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#241915}
.b3sw button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
@media(max-width:900px){.b3grid{grid-template-columns:minmax(0,1fr)}.b3stage{height:400px}.b3sw{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.b3sw button{flex:none}}

@media (min-width:1201px) and (max-width:1599px){nav.primary>ul>li>a{padding-left:10px;padding-right:10px}nav.primary>ul>li>a::after{left:10px;right:10px}}
@media (min-width:1560px){header.site .wrap{max-width:1500px}}

/* ---- FAQ: topics, search, groups ---- */
.fqside .lead a{color:var(--gold-text)}
@media(min-width:901px){.fqside{position:sticky;top:110px}}
.fqtools{display:none;margin-top:26px;gap:16px}
html.fqjs .fqtools{display:grid}
.fqsearch{display:flex;align-items:center;gap:10px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--card)}
.fqsearch:focus-within{border-color:var(--gold)}
.fqsearch svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.fqsearch input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 16px var(--sans);padding:13px 0;outline:none}
.fqcats{display:flex;flex-wrap:wrap;gap:8px}
.fqcats button{padding:8px 15px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:500 14.5px var(--sans);cursor:pointer}
.fqcats button:hover{border-color:var(--gold)}
.fqcats button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fqcats button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fqgroup{margin:34px 0 4px;font:700 12.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.fqlist .fqgroup:first-child{margin-top:0}
.fqlist details+details{border-top:1px solid var(--line)}
.fqlist details:last-of-type{border-bottom:1px solid var(--line)}
.fqgroup+details{border-top:1px solid var(--line)}
.fqlist details p a{color:var(--gold-text);text-underline-offset:3px}
.fqnone{margin:12px 0 0;color:var(--muted)}
.fqnone a{color:var(--gold-text)}

/* ---- White label preview ("See your brand on our bag") ---- */
.plv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(40px,6vw,72px);padding:clamp(22px,3vw,36px);border:1px solid rgba(233,200,128,.22);border-radius:24px;background:rgba(255,255,255,.035)}
.plv-h{font:600 clamp(28px,3vw,40px)/1.08 var(--serif);margin:6px 0 12px;color:var(--on-dark)}
.plv-lead{color:var(--on-dark-muted);margin:0 0 22px;max-width:34em}
.plv-form{display:grid;gap:16px}
.plv-row{display:grid;gap:7px}
.plv-lab{font:600 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-soft)}
.plv-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.plv input[type=text]{width:100%;min-width:0;padding:11px 13px;border-radius:var(--r);border:1.5px solid rgba(246,236,218,.28);background:rgba(0,0,0,.18);color:var(--on-dark);font:500 16px var(--sans)}
.plv input[type=text]:focus{outline:none;border-color:var(--gold)}
.plv-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.plv-up{padding:9px 16px;font-size:14.5px;cursor:pointer;border-color:rgba(246,236,218,.5)!important;color:var(--on-dark)!important}
#plv-logo:focus-visible+.plv-logoname,.plv-up:focus-within{outline:2px solid var(--gold-soft)}
.plv-file:focus-within .plv-up{outline:2px solid var(--gold-soft);outline-offset:2px}
.plv-logoname{font-size:14px;color:var(--on-dark-muted);min-width:0;overflow-wrap:anywhere}
.plv-clear{background:none;border:0;color:var(--gold-soft);font:600 14px var(--sans);text-decoration:underline;cursor:pointer;padding:4px}
.plv-sw{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.plv-sw button{width:34px;height:34px;border-radius:50%;border:2px solid rgba(246,236,218,.35);cursor:pointer;padding:0}
.plv-sw button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px var(--gold)}
.plv-sw button:focus-visible,.plv-seg button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.plv-sw [data-plvc="#1f6b45"]{background:#1f6b45}.plv-sw [data-plvc="#c62828"]{background:#c62828}.plv-sw [data-plvc="#1557b0"]{background:#1557b0}.plv-sw [data-plvc="#e3801c"]{background:#e3801c}.plv-sw [data-plvc="#5b2a86"]{background:#5b2a86}.plv-sw [data-plvc="#1e1a18"]{background:#1e1a18}
.plv-custom{display:inline-flex;align-items:center;gap:7px;font:500 14px var(--sans);color:var(--on-dark-muted);cursor:pointer;margin-left:4px}
.plv-custom input{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer}
.plv-seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.plv-seg button{padding:8px 16px;border-radius:99px;border:1.5px solid rgba(246,236,218,.35);background:transparent;color:var(--on-dark);font:600 14px var(--sans);cursor:pointer}
.plv-seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#241915}
.plv-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.plv-talk{border-color:rgba(246,236,218,.5)!important;color:var(--on-dark)!important}
.plv-stagewrap{position:relative;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 42%,#f6f5f2,#e0ddd7);min-height:clamp(420px,46vw,560px)}

.plv-flat{position:absolute;left:50%;top:6%;height:80%;width:auto;max-width:90%;transform:translateX(-50%);border-radius:10px;box-shadow:0 18px 30px rgba(0,0,0,.18)}
.plv.on .plv-flat{display:none}

.plv-note{position:absolute;left:14px;bottom:10px;margin:0;font:500 12px var(--sans);color:#665651;z-index:2}
@media(max-width:900px){.plv{grid-template-columns:minmax(0,1fr)}.plv-stagewrap{order:-1;min-height:420px}}
@media(max-width:480px){.plv-two{grid-template-columns:1fr}}

/* white label: the cream sweep on hover needs dark text, or the label disappears */
.plv-up,.plv-talk{transition:color .35s ease .1s,border-color .35s}
.plv-up:hover,.plv-talk:hover,.plv-talk:focus-visible{color:var(--espresso)!important;border-color:var(--on-dark)!important}
@media(hover:none){.plv-up:hover,.plv-talk:hover{color:var(--on-dark)!important}.plv-up:hover::before,.plv-talk:hover::before{transform:scaleX(0)}}
/* the hover sweep is always cream, so whenever it shows the label turns dark (any theme, any background) */
:is(.btn,.subnav a:not(.on),.filters button:not([aria-pressed="true"])):is(:hover,:focus-visible){color:var(--espresso)!important}
:is(.btn,.subnav a:not(.on),.filters button:not([aria-pressed="true"])):is(:hover,:focus-visible) :is(svg,small){color:inherit}
@media(hover:none){.plv-up:hover,.plv-talk:hover{color:var(--on-dark)!important}}
/* home: quality and delivery banners (each leads to its full page) */
html.js:not([data-v="home"]) :is(.hbq,.hbn){display:none}
.hb-btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px}
.hb-ar{width:18px;height:18px;transition:transform .3s}
.hb-btn:hover .hb-ar{transform:translateX(4px)}
/* quality */
.hbq{background:var(--flour);border-top:1px solid var(--line);padding:0}
.hbq-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.hbq-pic{position:relative;min-height:420px}
.hbq-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.hbq-body{padding:clamp(48px,6vw,88px) clamp(24px,5vw,72px);max-width:720px}
.hbq h2,
.hbq h1[data-pt]{font-size:clamp(30px,3.4vw,44px)}
.hbq .lead{margin-top:14px;max-width:34em}
.hbq-certs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.hbq-c{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:12px;padding:22px 20px 18px;box-shadow:0 18px 40px -28px rgba(42,26,22,.45)}
.hbq-c h3{font-size:21px}
.hbq-s{color:var(--muted);font-size:14.5px;margin-top:4px}
.hbq-c dl{margin:14px 0 0;display:grid;gap:2px}
.hbq-c dt{font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-top:8px}
.hbq-c dd{margin:0;font-weight:600;font-size:15.5px;overflow-wrap:anywhere}
.hbq-f{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
/* delivery */
.hbn{position:relative;overflow:hidden;isolation:isolate;padding:clamp(56px,6vw,84px) 0 0;min-height:calc(50vw + 170px);display:flex;flex-direction:column;background:var(--espresso)}
.hbn-bg{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:-2}
.hbn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--espresso) 0,var(--espresso) calc(100% - 50vw),rgba(42,26,22,.78) calc(100% - 50vw + 6vw),rgba(42,26,22,.18) calc(100% - 50vw + 22vw),rgba(42,26,22,0) 62%,rgba(20,12,10,.55) 86%,rgba(20,12,10,.9) 100%),
  linear-gradient(90deg,rgba(42,26,22,.55),rgba(42,26,22,0) 45%)}
.hbn-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px);align-items:start;flex:1;width:100%}
.hbn h2,
.hbn h1[data-pt]{font-size:clamp(34px,4.6vw,58px);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hbn .lead{margin-top:16px;color:var(--on-dark);max-width:30em;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hbn-fig{margin:-10px 0 0;justify-self:end;width:100%;max-width:450px}
.hbn-map{display:block;width:100%;height:auto;overflow:visible}
.hbn-map .hb-land{fill:#f3e6d0;stroke:#e9c880;stroke-width:2;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.hbn-map .hb-rt{fill:none;stroke:#c9973a;stroke-width:2.2;stroke-dasharray:5 6}
.hbn-map .hb-lead{stroke:rgba(246,236,218,.45);stroke-width:1.2;fill:none}
.hbn-map .hb-pin{fill:#d4521e;stroke:#fff;stroke-width:2}
.hbn-map .hb-lbl{font:600 15px var(--sans);fill:var(--on-dark)}
.hbn-map .hb-hub{fill:#2a1a16}.hbn-map .hb-ring{fill:none;stroke:#2a1a16;stroke-width:2;opacity:.4}
.hbn-map .hb-hubt{font:700 14px var(--sans);fill:#2a1a16}.hbn-map .hb-hubt tspan{font-weight:500}
@media(prefers-reduced-motion:no-preference){.hbn-map .hb-rt{animation:hbdash 1.6s linear infinite}@keyframes hbdash{to{stroke-dashoffset:-22}}}
.hbn-stats{grid-column:1/-1;align-self:end;list-style:none;margin:0 0 clamp(20px,3vw,36px);padding:clamp(16px,2vw,22px) clamp(16px,2.4vw,30px);border:1px solid rgba(233,200,128,.28);border-radius:14px;background:rgba(24,15,12,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hbn-stats li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start}
.hbn-stats svg{grid-row:span 2;width:34px;height:34px;color:var(--gold-soft)}
.hbn-stats b{font:600 clamp(24px,2.4vw,30px)/1.1 var(--serif);color:var(--on-dark)}
.hbn-stats span{font-size:14.5px;color:var(--on-dark-muted)}
@media(max-width:900px){.hbq-in,.hbn-in{grid-template-columns:minmax(0,1fr)}.hbq-pic{min-height:0;aspect-ratio:3/2}.hbq-body{max-width:none}
 .hbn{min-height:0;padding-bottom:0}.hbn-bg{position:relative;order:2;z-index:0;display:block;margin-top:20px}.hbn::before{display:none}
 .hbn-in{display:contents}.hbn-txt,.hbn-fig{padding:0 24px}.hbn-txt{order:0}.hbn-fig{order:1;justify-self:auto;max-width:none;margin:24px 0 0;position:relative;z-index:1}
 .hbn-stats{order:3;margin:0;border-radius:0;border:0;border-top:1px solid rgba(233,200,128,.28);background:var(--espresso);grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;padding:22px 24px 30px}
 .hbn-in>*{max-width:100%}}
@media(max-width:560px){.hbq-certs{grid-template-columns:minmax(0,1fr);gap:14px}.hbq-c{padding:20px 20px 16px}.hbq-seal{width:36px;height:36px;margin-bottom:10px}.hbq-c dl{margin-top:12px}.hbq-f{margin-top:12px;padding-top:10px}.hbn-map .hb-lbl{font-size:19px}.hbn-map .hb-hubt{font-size:16px}.hbn-stats{column-gap:12px}.hbn-stats li{column-gap:10px;align-items:start}.hbn-stats svg{width:26px;height:26px;margin-top:4px}.hbn-stats b{font-size:22px}.hbn-stats span{font-size:13.5px;line-height:1.35}}
.hbq-badge{width:78px;height:78px;display:block;margin-bottom:16px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.14))}
.hbq-brc{border-top-color:#1f9d48}.hbq-hac{border-top-color:#1565c0}
.hbq-brc{background:linear-gradient(180deg,rgba(31,157,72,.07),transparent 46%),var(--card)}
.hbq-hac{background:linear-gradient(180deg,rgba(21,101,192,.07),transparent 46%),var(--card)}
.hbq-brc dt{color:#177a38}.hbq-hac dt{color:#1257a6}
.hbq-f{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hbq-ok{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.hbq-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:#1f9d48;box-shadow:0 0 0 3px rgba(31,157,72,.18)}
.hbq-f a{font-weight:700;font-size:14px;color:var(--gold-text);text-decoration:none}
.hbq-f a::after{content:" →"}
.hbq-f a:hover{text-decoration:underline}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hbq-brc dt{color:#5fd08a}:root:not([data-theme="light"]) .hbq-hac dt{color:#7fb3f0}}
@media(max-width:560px){.hbq-badge{width:62px;height:62px;margin-bottom:12px}}
/* v79: shorter home banners */
@media(min-width:961px){
 .hbn{min-height:0;height:clamp(600px,44vw,700px);padding:clamp(36px,3.4vw,48px) 0 0}
 .hbn-bg{top:0;bottom:auto;height:100%;object-fit:cover;object-position:50% 18%}
 .hbn::before{background:linear-gradient(180deg,rgba(42,26,22,.92) 0,rgba(42,26,22,.55) 28%,rgba(42,26,22,0) 50%,rgba(20,12,10,0) 72%,rgba(20,12,10,.55) 100%),linear-gradient(90deg,rgba(42,26,22,.6),rgba(42,26,22,0) 42%)}
 .hbn-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:24px}
 .hbn h2,
 .hbn h1[data-pt]{font-size:clamp(40px,3.7vw,54px);max-width:none;white-space:nowrap}
 .hbn .lead{margin-top:10px;font-size:17px;max-width:32em}
 .hbn .hb-btn{margin-top:20px}
 .hbn-fig{max-width:390px;margin-top:-8px}
 .hbn-stats{justify-self:end;width:min(100%,620px);gap:10px;padding:14px 20px;margin-bottom:22px}
 .hbn-stats span{white-space:nowrap}
 .hbn-stats li{column-gap:10px}
 .hbn-stats svg{width:26px;height:26px}
 .hbn-stats b{font-size:22px}
 .hbn-stats span{font-size:13px}
}
@media(max-width:960px){.hbn-in{grid-template-columns:minmax(0,1fr)}
 .hbn{min-height:0;padding-bottom:0}.hbn-bg{position:relative;order:2;z-index:0;display:block;margin-top:20px}.hbn::before{display:none}
 .hbn-in{display:contents}.hbn-txt,.hbn-fig{padding:0 24px}.hbn-txt{order:0}.hbn-fig{order:1;justify-self:auto;max-width:440px;margin:20px 0 0;position:relative;z-index:1}
 .hbn-stats{order:3;margin:0;border-radius:0;border:0;border-top:1px solid rgba(233,200,128,.28);background:var(--espresso);grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px;padding:22px 24px 30px;backdrop-filter:none}}
@media(max-width:700px){.hbn-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hbn-fig{max-width:none}}
@media(min-width:701px) and (max-width:960px){.hbn-fig{max-width:380px;margin-left:auto;margin-right:auto}}
/* quality: tighter */
.hbq-body{padding:clamp(40px,4.4vw,60px) clamp(24px,4vw,60px)}
.hbq h2,
.hbq h1[data-pt]{font-size:clamp(28px,2.9vw,38px)}
.hbq .lead{font-size:16.5px;margin-top:10px}
.hbq-certs{margin-top:22px;gap:14px}
.hbq-c{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:18px 18px 14px}
.hbq-c .hbq-badge{width:56px;height:56px;margin:0;grid-row:span 2}
.hbq-c h3{font-size:19px;align-self:end}
.hbq-s{margin-top:0;font-size:13.5px;align-self:start}
.hbq-c dl,.hbq-f{grid-column:1/-1}
.hbq-c dl{margin-top:12px}
.hbq-c dt{margin-top:6px;font-size:10.5px}
.hbq-c dd{font-size:15px}
.hbq-f{margin-top:12px;padding-top:10px;font-size:13.5px}
.hbq .hb-btn{margin-top:22px}
.hbq-pic{min-height:0}
@media(max-width:900px){.hbq-pic{aspect-ratio:16/9}}
.hbn-stats b{white-space:nowrap}
@media(max-width:700px){
 .hbn{padding-top:44px}.hbn .lead{font-size:16px;margin-top:10px}.hbn .hb-btn{margin-top:18px}
 .hbn-fig{max-width:330px;margin:14px auto 0;padding:0 16px}
 .hbn-bg{margin-top:10px}
 .hbn-stats{padding:16px 20px 20px;row-gap:14px;column-gap:10px}
 .hbn-stats b{font-size:20px}.hbn-stats span{font-size:13px}
 .hbq-body{padding:30px 20px 36px}.hbq .lead{font-size:15.5px}
 .hbq-certs{margin-top:18px;gap:12px}
 .hbq-c{padding:14px 16px 12px;column-gap:12px}
 .hbq-c .hbq-badge{width:44px;height:44px}
 .hbq-c h3{font-size:18px}
 .hbq-c dl{margin-top:8px;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:baseline}
 .hbq-c dt{margin-top:0}
 .hbq-f{margin-top:10px;padding-top:8px}
 .hbq .hb-btn{margin-top:18px}
}
/* v81 */
.mo .rmap.go .van{transition:opacity .5s 2s}
.hbn-map .hb-van{fill:#fff3d6;stroke:#c9973a;stroke-width:1.5}
@media(prefers-reduced-motion:reduce){.hbn-map .hb-van{display:none}}
.plx-grid{grid-template-columns:1fr}
.ptag{margin:0 0 6px;font:italic 500 clamp(20px,2vw,26px)/1.2 var(--serif);color:var(--gold-text);letter-spacing:.01em}
/* quality banner without the photo */
.hbq-in{grid-template-columns:minmax(0,1fr)}
.hbq-body{max-width:var(--maxw);margin:0 auto;width:100%;padding:clamp(48px,6vw,80px) 24px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(28px,5vw,64px);align-items:center}
.hbq-body>:not(.hbq-certs){grid-column:1}
.hbq-certs{grid-column:2;grid-row:1 / span 5;margin-top:0}
@media(max-width:900px){.hbq-body{grid-template-columns:minmax(0,1fr)}.hbq-certs{grid-column:1;grid-row:auto;margin-top:22px}.hbq-body>.hb-btn{grid-row:auto}}
@media(max-width:700px){.hbq-body{padding:40px 20px}}
.hbq-body>.hb-btn{justify-self:start}
/* ===== v82 ===== */
/* our line on the products page */
.ptag{display:inline-flex;flex-direction:column;gap:2px;margin:0 0 18px;padding:14px 26px 16px 22px;border-left:5px solid var(--gold);border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(201,151,58,.16),rgba(201,151,58,0));font:inherit;letter-spacing:normal}
.ptag-l{font:700 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.ptag-t{font:italic 600 clamp(32px,4.4vw,56px)/1.05 var(--serif);color:var(--gold-text);letter-spacing:-.01em}
/* customers-first line in About */
.creed{margin:22px 0 0;padding:14px 18px;border-left:4px solid var(--gold);background:var(--flour);border-radius:0 10px 10px 0;font:italic 500 clamp(19px,1.8vw,22px)/1.4 var(--serif);color:var(--ink)}
/* call / WhatsApp chooser */
.fabpick{position:fixed;right:18px;bottom:84px;z-index:41;width:min(300px,calc(100vw - 36px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.35);padding:14px 14px 12px}
.fabpick[hidden]{display:none}
.fp-h{margin:0 30px 10px 2px;font:700 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.fp-o{display:grid;gap:2px;padding:11px 12px;border-radius:9px;text-decoration:none;color:inherit;border:1px solid var(--line)}
.fp-o+.fp-o{margin-top:8px}
.fp-o b{font-size:16px}.fp-o span{font-size:14px;color:var(--muted)}
.fp-o:hover,.fp-o:focus-visible{border-color:var(--gold);background:var(--flour)}
.fp-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.fp-x:hover{background:var(--flour);color:var(--ink)}
/* feedback form */
.fbk{margin-top:clamp(40px,6vw,64px)}
.fbform{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--r);padding:clamp(22px,3vw,34px);max-width:860px}
.fb-head h3{font-size:clamp(24px,2.4vw,30px)}
.fb-head .hint{margin-top:6px}
.fb-rate{border:0;padding:0;margin:20px 0 6px}
.fb-rate legend{font-weight:700;font-size:15px;margin-bottom:8px;padding:0}
.stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars label{margin:0;width:40px;height:40px;cursor:pointer;font-size:0;color:transparent;background:var(--line);clip-path:polygon(50% 4%,61% 37%,96% 37%,68% 58%,79% 92%,50% 72%,21% 92%,32% 58%,4% 37%,39% 37%);transition:background .15s}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{background:var(--gold)}
.stars input:focus-visible+label{outline:3px solid var(--gold);outline-offset:2px}
.fbform .fg{margin-top:16px}
.fbform .fld.full{grid-column:1/-1}
.fbform .btn{margin-top:20px}
@media(max-width:700px){.fbform .fg{display:grid;grid-template-columns:1fr;gap:14px}.fabpick{bottom:80px}}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stars label{background:#6e5848}}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stars input:checked~label,:root:not([data-theme="light"]) .stars label:hover,:root:not([data-theme="light"]) .stars label:hover~label{background:var(--gold)}}
/* Cloudflare human check (only shown when switched on) */
.cf-turnstile{margin-top:16px;min-height:65px}

/* ---- floating buttons: bread-slice shape ---- */
.fab{align-items:center;gap:12px}
.fab a,.fab a:hover,.fab a:focus-visible,.fab a.call,.fab a.wa{
  --bf:var(--gold);width:56px!important;min-width:56px!important;height:56px!important;padding:6px 0 0!important;
  justify-content:center!important;border-radius:0!important;overflow:visible!important;background:transparent!important;
  box-shadow:none!important;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));color:var(--espresso)}
.fab a.wa{--bf:#25d366;color:#08351b}
.fab a::before{display:block;z-index:-1;background:var(--on-dark);-webkit-mask:url("../assets/fab-loaf.svg") center/100% 100% no-repeat;mask:url("../assets/fab-loaf.svg") center/100% 100% no-repeat}
.fab a::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--bf);transition:transform .2s,filter .2s;
  -webkit-mask:url("../assets/fab-loaf.svg") center/100% 100% no-repeat;
          mask:url("../assets/fab-loaf.svg") center/100% 100% no-repeat}
.fab svg{width:22px!important;height:22px!important}
.fab a span,.fab a:hover span,.fab a:focus-visible span{display:block!important;position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  max-width:0!important;overflow:hidden;margin:0!important;padding:6px 0;border-radius:14px;background:var(--espresso);color:var(--on-dark);
  font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:max-width .28s ease,padding .28s ease,opacity .2s}
@media(hover:hover){.fab a:hover span{max-width:120px!important;padding:6px 12px;opacity:1}}
.fab a:focus-visible span{max-width:120px!important;padding:6px 12px;opacity:1}
.fab a::before{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.fab a:hover::before,.fab a:focus-visible::before{transform:scaleX(1);transform-origin:left}
/* slice expands sideways to hold its label */
.fab{align-items:flex-end}
.fab a,.fab a:hover,.fab a:focus-visible,.fab a.call,.fab a.wa{width:auto!important;min-width:56px!important;box-sizing:border-box;padding:6px 17px 0!important;justify-content:flex-start!important;transition:padding .3s ease}
.fab a::after,.fab a::before{-webkit-mask-size:100% 100%;mask-size:100% 100%}
.fab svg{flex:none}
.fab a span,.fab a:hover span,.fab a:focus-visible span{position:static!important;transform:none!important;background:transparent!important;color:inherit!important;border-radius:0;padding:0!important;margin:0!important;max-width:0!important;opacity:0;font-size:14px}
@media(hover:hover){.fab a:hover span{max-width:150px!important;margin-left:10px!important;opacity:1}}
.fab a:focus-visible span{max-width:150px!important;margin-left:10px!important;opacity:1}
/* expanded state: wider loaf so icon and label sit on the slice */
.fab a:hover::before,.fab a:hover::after,.fab a:focus-visible::before,.fab a:focus-visible::after{
  -webkit-mask-image:url("../assets/fab-loaf-wide.svg");
  mask-image:url("../assets/fab-loaf-wide.svg")}

/* product pages: link in the product popup and the list under the product grid (same tab) */
.pdpage{display:inline-flex;margin-top:16px;font:600 15.5px var(--sans);color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.pdpage:hover{text-decoration:none}
.pdpage+.pdlink{margin-left:18px}
.plinks{margin-top:30px}
.plinks h3{font-size:20px;margin-bottom:10px}
.plinks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.plinks li{margin:0}
.plinks a{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:inherit;text-decoration:none;font-size:15px;transition:border-color .2s}
.plinks a:hover{border-color:var(--gold)}
@media(prefers-reduced-motion:reduce){.plinks a{transition:none}}

/* without JavaScript the enquiry form shows every question at once */
html:not(.js) .enq.steps .step{display:block}
html:not(.js) .enq.steps .prog{display:none}

/* moving between pages: no logo screen, and a short cross-fade in browsers that support it */
html.bwnav #bwload{display:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---- 3D on the product cards: badge, popup viewer, filter ---- */
.dl .im.is360{padding:0;align-items:stretch}
.v360{position:relative;width:100%;height:clamp(320px,56vh,460px);touch-action:none;cursor:grab;background:radial-gradient(ellipse 70% 60% at 50% 42%,#f4f5f7,#e4e6ea)}
.v360:active{cursor:grabbing}
.v360[hidden]{display:none}
.v360 canvas{display:block;width:100%;height:100%}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .v360{background:radial-gradient(ellipse 70% 60% at 50% 42%,#262a31,#17191d)}
}
.t360bar{position:absolute;left:12px;top:12px;z-index:3;display:flex;gap:8px;flex-wrap:wrap}
.t360bar[hidden]{display:none}
.t360,.t360full{font:600 13px var(--sans);border-radius:99px;padding:7px 14px;cursor:pointer;text-decoration:none;line-height:1.2}
.t360{background:#c81d25;color:#fff;border:1px solid #c81d25}
.t360:hover{background:#a8161d;border-color:#a8161d}
.t360[aria-pressed="true"]{background:#fff;color:#1d1f24;border-color:rgba(29,31,36,.2)}
.t360full{background:rgba(255,255,255,.85);color:#1d1f24;border:1px solid rgba(29,31,36,.15)}
.t360full:hover{border-color:#c81d25;color:#c81d25}
.t360:focus-visible,.t360full:focus-visible{outline:2px solid #c81d25;outline-offset:2px}
.t360msg{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:12.5px;color:#5e636d;pointer-events:none;padding:0 10px}
.t360msg:empty{display:none}
.dl .im:not(.is360) .t360msg{position:static;margin-top:10px}
@media(max-width:900px){.v360{height:clamp(280px,48vh,380px)}
}
.pbtn .ph .b360{position:absolute;top:8px;right:8px;z-index:1;background:#c81d25;color:#fff;font:700 11.5px/1 var(--sans);letter-spacing:.04em;padding:5px 8px;border-radius:99px;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.dl .im.is360 .v360{flex:1 1 auto}
.ptable .t360{background:#c81d25;color:#fff}
.dl .im.is360 .pgal:not(.models){display:none}
.dl .im.is360 .pgal.models{position:absolute;left:0;right:0;bottom:30px;z-index:3;margin:0}
.dl .im.is360 .pgal.models button{background:rgba(255,255,255,.88)}
html.no3d .b360,html.no3d .ptable .t360,html.no3d #pd-360bar{display:none!important}
.lead3d{display:flex;align-items:flex-start;gap:10px;margin:4px 0 24px;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);font:600 16px/1.45 var(--sans);color:var(--ink);max-width:620px}
.lead3d svg{width:22px;height:22px;flex:none;color:var(--gold-text);margin-top:1px}
.filters button.f3d{display:inline-flex;align-items:center;gap:7px;border-color:var(--gold)}
.filters button.f3d svg{width:16px;height:16px;color:var(--gold-text)}
.filters button.f3d[aria-pressed="true"] svg{color:var(--gold-soft)}
html.no3d .lead3d,html.no3d .filters .f3d{display:none!important}

/* ---- v105: calmer, more hand-made finish ---- */
#bwload{display:none!important}
.pics::before,.hero::before{display:none}
.btn{border-radius:3px}
.btn.fill.glow{border-radius:var(--r)}
.stats ul{display:flex;flex-wrap:wrap;gap:0 clamp(28px,4.5vw,64px)}
.stats li,.stats li:first-child{border:0;padding:30px 0 28px}
.stats b{font-size:clamp(28px,3vw,38px)}
.stats span{margin-top:4px}
.flow li::before,.flow li::after{display:none}
.flow li{border-top:1px solid var(--gold);padding:16px 28px 0 0;margin-right:24px}
.flow li:last-child{margin-right:0}
.values.four{gap:0 32px;border-top:0;margin-top:48px}
.values.four li,.values.four li:last-child{background:none;border:0;border-top:1px solid var(--ink);border-radius:0;padding:16px 0 0;box-shadow:none}
.values.four li::before{display:none}
.values.four li:hover{transform:none;box-shadow:none}

/* what we bake: four colour panels, one per range */
.range{padding:0;display:grid;grid-template-columns:repeat(4,1fr);min-height:clamp(380px,38vw,520px)}
.rg{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff;text-decoration:none;padding:clamp(18px,2.4vw,32px);isolation:isolate}
.rg img{position:absolute;left:50%;top:7%;height:56%;width:72%;object-fit:contain;transform:translateX(-50%) rotate(-2deg);filter:drop-shadow(0 16px 16px rgba(0,0,0,.35));transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
.rg:hover img,.rg:focus-visible img{transform:translateX(-50%) translateY(-8px) rotate(1deg)}
.rg-t{font:400 15.5px/1.4 var(--sans);max-width:23ch;min-height:112px}
.rg-t b{display:block;font:600 clamp(25px,2.6vw,34px)/1.1 var(--serif);margin-bottom:6px}
.rg:focus-visible{outline-offset:-6px;outline-color:#fff}
.c-bread{background:#9c2a2d}.c-pav{background:#85551a}.c-arabic{background:#2b6a45}.c-rusk{background:#2b4b86}
@media(max-width:800px){.range{padding:0;grid-template-columns:1fr 1fr;min-height:0}.rg{min-height:320px}}
@media(prefers-reduced-motion:reduce){.rg img{transition:none}}

/* from the bakery: dated article list */
.hj{padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px)}
.hj-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px}
.hj-head h2{font-size:clamp(28px,3.4vw,38px)}
.hj-head a{color:var(--ink);font-weight:600}
.hj-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 38px;border-top:1px solid var(--ink)}
.hj-list li{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:22px 0}
.hj-date b{display:block;font:600 36px/1 var(--serif);color:var(--ink)}
.hj-date span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
.hj-list h3{font-size:20px;line-height:1.25;margin:0 0 8px}
.hj-list h3 a{color:var(--ink);text-decoration:none}
.hj-list h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.hj-list p{font-size:15.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){.hj-list{grid-template-columns:1fr}.hj-list li{border-bottom:1px solid var(--line)}}

/* ---- dark mode: the bands that are dark in light mode turn light, so the page keeps its contrast ----
   (the page itself turns dark and its dark text turns light, via the tokens at the top of this file).
   Inside each band the "dark" tokens are swapped, so its own background and text flip together. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) :is(header.site,.hero,.dark:not(.hbn),.promise,.rmap,.leader .top,.emirates li.hq,.pbanner,.abanner,footer.site,.util,#bwck,#bwtop,.jl li.now .jc,.since,.av,.btn.dark,nav.primary,.m-go,.sc-seg button.on,.vsw button[aria-pressed="true"],.filters button[aria-pressed="true"]){
  --espresso:#f1e6d0;--crust:#e4d3b3;--on-dark:#2a1a16;--on-dark-muted:#5d483f;--gold-soft:#7d5a12;--gold-text:#7d5a12;--line:#d9c9a8}
:root:not([data-theme="light"]) :is(footer.site,.util){background:#f1e6d0}
:root:not([data-theme="light"]) :is(header.site,.hero,.dark:not(.hbn),footer.site,.abanner,.pbanner) :is(.btn.ghost,.btn.outline){border-color:rgba(42,26,22,.5);color:#2a1a16}
:root:not([data-theme="light"]) :is(header.site,footer.site) {border-color:rgba(42,26,22,.14)}
:root:not([data-theme="light"]) :is(header.site,.dark:not(.hbn),footer.site) :is(.btn.fill){color:var(--on-gold)}

:root:not([data-theme="light"]) .htabs{background:rgba(241,230,208,.82);border-top-color:rgba(42,26,22,.15)}
:root:not([data-theme="light"]) .htabs .htab{color:#5d483f}
:root:not([data-theme="light"]) .htabs .htab[aria-selected="true"]{color:#2a1a16}
:root:not([data-theme="light"]) footer.site :is(.fbadges span,.social a){border-color:rgba(42,26,22,.3)}
}