/* Layout: white, airy, grid-based logistics site — green/gold brand with a deep-navy anchor; illustrated containers, pallets, boxes and an animated shipping route carry the "movement". */
:root{
  --bg:#0F1310; --soft:#161C16; --soft-2:#1A221A; --panel:#161C16;
  --ink:#EEF3EA; --text:#C3CFBF; --muted:#889781; --faint:#5E6B59;
  --line:#273127; --line-2:#364236;
  --green:#46B055; --green-deep:#74CC80; --green-bright:#8FE09A;
  --gold:#D9B24A; --gold-deep:#E6C266; --gold-soft:#F3E2BF;
  --navy:#13331C; --navy-2:#46B055; --teal:#46B055;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(clamp(64px,9vw,96px) + 32px + env(safe-area-inset-top,0px));}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; color:var(--ink); margin:0; line-height:1.08; letter-spacing:-.5px; text-wrap:balance;}
a{color:inherit;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
section{padding-block:76px; position:relative;}
.eyebrow{font-family:'Mulish',sans-serif; font-weight:600; font-size:12px; letter-spacing:2.6px; text-transform:uppercase; color:var(--green-deep); margin-bottom:14px; display:flex; align-items:center; gap:9px;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); display:inline-block;}
.sec-title{font-size:clamp(28px,4.2vw,44px); font-weight:700; max-width:680px;}
.sec-lead{font-size:18px; color:var(--muted); max-width:650px; margin-top:16px; font-weight:400; line-height:1.6;}

/* ---- top bar ---- */
header.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line);}
.bar-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px; max-width:1140px; margin:0 auto;}
.bar-brand{display:flex; align-items:center; gap:11px; font-family:'Fraunces',Georgia,serif; font-weight:700; color:var(--ink); font-size:19px; letter-spacing:-.3px;}
.bar-brand img{height:clamp(64px,9vw,96px); width:auto; display:block;}
.bar-nav{display:flex; gap:26px; font-size:14.5px; font-weight:500;}
.bar-nav a{color:var(--text); text-decoration:none; transition:color .2s; position:relative; padding:4px 0;}
.bar-nav a:hover{color:var(--green-deep);}
.bar-cta{background:var(--green); color:#fff; padding:10px 20px; border-radius:7px; font-weight:600; font-size:14px; text-decoration:none; transition:background .2s, transform .15s; white-space:nowrap;}
.bar-cta:hover{background:var(--green-deep); transform:translateY(-1px);}
.bar-brand{text-decoration:none;}
.bar-actions{display:flex; align-items:center; gap:10px;}
.bar-menu{display:none; width:44px; height:44px; border-radius:9px; border:1px solid var(--line-2); background:var(--panel); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;}
.bar-menu span{display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s, opacity .2s;}
.bar-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.bar-menu[aria-expanded="true"] span:nth-child(2){opacity:0;}
.bar-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:860px){
  .bar-menu{display:flex;}
  .bar-nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; padding:8px 24px 18px;
    background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(0,0,0,.35);}
  .bar-nav.open{display:flex;}
  .bar-nav a{padding:14px 0; font-size:16px; border-bottom:1px solid var(--line);}
  .bar-nav a:last-child{border-bottom:0;}
}
@media(max-width:400px){ .bar-cta{padding:10px 14px; font-size:13px;} .bar-in{padding:10px 16px;} }
@media(max-width:600px){ .bar-name{display:none;} }

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; background:
    radial-gradient(130% 80% at 88% 0%, var(--soft-2), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, var(--soft), transparent 55%), var(--bg);}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center; padding-block:68px 72px;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:34px; padding-block:46px 50px;} }
.hero-kick{display:inline-flex; align-items:center; gap:10px; background:var(--soft); border:1px solid var(--line); color:var(--green-deep); font-weight:600; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; padding:8px 15px; border-radius:40px;}
.hero-kick .pip{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(216,153,42,.18);}
.hero h1{font-size:clamp(40px,6.6vw,70px); font-weight:800; margin:22px 0 0; letter-spacing:-1.5px;}
.hero h1 em{font-style:normal; color:var(--green); position:relative; white-space:nowrap;}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:11px; background:var(--gold-soft); z-index:-1; border-radius:3px;}
.hero .lede{font-size:clamp(16px,1.7vw,19px); color:var(--muted); max-width:530px; margin:22px 0 0; line-height:1.62;}
.hero-cta{margin-top:30px; display:flex; gap:13px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 26px; font-weight:600; font-size:15px; text-decoration:none; border-radius:8px; transition:all .18s; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 8px 22px rgba(61,168,90,.26);}
.btn-primary:hover{background:var(--green-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(61,168,90,.32);}
.btn-ghost{background:var(--panel); border-color:var(--line-2); color:var(--ink);}
.btn-ghost:hover{border-color:var(--green); color:var(--green-deep); transform:translateY(-2px);}
.hero-meta{margin-top:30px; display:flex; gap:26px; flex-wrap:wrap;}
.hero-meta .hm{display:flex; flex-direction:column; gap:1px;}
.hero-meta .hm b{font-family:'Fraunces',Georgia,serif; font-size:26px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.hero-meta .hm span{font-size:12.5px; color:var(--muted); letter-spacing:.3px;}

/* route dash + moving dot */
.route{stroke-dasharray:7 9; animation:flow 1.6s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-32;}}
.mover{animation:none;}
@media(prefers-reduced-motion:reduce){ .route{animation:none;} }

/* ---- services scroll strip ---- */
.svcstrip{border-block:1px solid var(--line); background:var(--soft); overflow:hidden;}
.svc-track{display:flex; width:max-content; align-items:center; animation:marq 34s linear infinite;}
.svcstrip:hover .svc-track{animation-play-state:paused;}
.svc-chip{display:flex; align-items:center; gap:10px; margin:14px 9px; padding:10px 18px; background:var(--panel); border:1px solid var(--line); border-radius:40px; white-space:nowrap;}
.svc-chip svg{width:19px; height:19px; flex-shrink:0;}
.svc-chip span{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:15px; color:var(--ink);}
@keyframes marq{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){ .svc-track{animation:none; flex-wrap:wrap; justify-content:center;} }

/* ---- journey band ---- */
.journey{background:var(--navy); color:#fff; overflow:hidden;}
.journey .eyebrow{color:var(--green-bright);}
.journey .eyebrow::before{background:var(--gold);}
.journey .sec-title{color:#fff;}
.journey .sec-lead{color:rgba(255,255,255,.72);}
.jtrack{position:relative; margin-top:52px;}
.jline{position:absolute; left:6%; right:6%; top:38px; height:3px; background:rgba(255,255,255,.16); border-radius:3px; overflow:hidden;}
.jline::after{content:""; position:absolute; top:0; left:0; height:100%; width:30%; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--green-bright),transparent); animation:travel 3.4s linear infinite;}
@keyframes travel{from{transform:translateX(-120%);} to{transform:translateX(460%);}}
@media(prefers-reduced-motion:reduce){ .jline::after{animation:none; opacity:.5;} }
.jnodes{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; position:relative;}
@media(max-width:760px){ .jnodes{grid-template-columns:repeat(2,1fr); gap:26px;} .jline{display:none;} }
@media(max-width:420px){ .jnodes{grid-template-columns:1fr;} }
.jnode{text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;}
.jbadge{width:76px; height:76px; border-radius:20px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px rgba(0,0,0,.22); position:relative; z-index:2;}
.jbadge svg{width:40px; height:40px;}
.jnode h4{font-family:'Fraunces',Georgia,serif; font-size:16px; font-weight:700; margin:0; color:#fff;}
.jnode p{margin:0; font-size:13px; color:rgba(255,255,255,.66); line-height:1.5; max-width:180px;}

/* ---- showcase: containers / pallets / boxes ---- */
.show-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px;}
@media(max-width:860px){ .show-grid{grid-template-columns:1fr;} }
.show{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(74,54,30,.05); transition:transform .25s, box-shadow .25s;}
.show:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(74,54,30,.11);}
.show-pic{aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; padding:22px; background:linear-gradient(160deg,var(--soft),#fff);}
.show:nth-child(2) .show-pic{background:linear-gradient(160deg,var(--soft-2),#fff);}
.show-pic svg{width:100%; height:100%; max-width:100%;}
.show-txt{padding:22px 24px 26px;}
.show-txt h3{font-size:22px; font-weight:700; margin-bottom:7px;}
.show-txt p{margin:0; font-size:15px; color:var(--muted); line-height:1.55;}

/* ---- expandable what-we-do ---- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px; align-items:start;}
@media(max-width:860px){ .trio{grid-template-columns:1fr;} }
.xcard{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 26px rgba(74,54,30,.05); cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s; overflow:hidden;}
.xcard:hover{border-color:var(--green); box-shadow:0 14px 36px rgba(61,168,90,.12); transform:translateY(-2px);}
.xcard-head{padding:28px 24px; position:relative;}
.xcard .mark{width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.xcard:nth-child(1) .mark{background:rgba(61,168,90,.12); color:var(--green-deep);}
.xcard:nth-child(2) .mark{background:rgba(74,54,30,.10); color:var(--navy-2);}
.xcard:nth-child(3) .mark{background:rgba(216,153,42,.14); color:var(--gold-deep);}
.xcard .mark svg{width:27px; height:27px;}
.xcard h3{font-size:21px; font-weight:700; margin-bottom:7px;}
.xcard-sub{font-size:14.5px; color:var(--muted); margin:0; line-height:1.5; padding-right:30px;}
.xchev{position:absolute; top:26px; right:22px; width:30px; height:30px; border-radius:50%; background:var(--soft); color:var(--green-deep); font-size:21px; display:flex; align-items:center; justify-content:center; line-height:1; transition:transform .28s, background .2s, color .2s;}
.xcard.open .xchev{transform:rotate(45deg); background:var(--green); color:#fff;}
.xcard-body{max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease, padding .35s ease; padding:0 24px;}
.xcard.open .xcard-body{max-height:560px; opacity:1; padding:0 24px 28px;}
.xcard-body p{font-size:14.5px; color:var(--text); line-height:1.65; margin:0 0 12px;}
.xcard-body p:last-child{margin-bottom:0;}
.svc-mini{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.svc-mini span{background:var(--soft); border:1px solid var(--line); color:var(--green-deep); font-weight:600; font-size:13px; padding:7px 13px; border-radius:7px;}

/* ---- how to start ---- */
.howto{background:var(--soft);}
.howto-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px;}
@media(max-width:860px){ .howto-grid{grid-template-columns:1fr;} }
.step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:30px 26px; position:relative; box-shadow:0 8px 24px rgba(74,54,30,.05);}
.step .snum{font-family:'Fraunces',Georgia,serif; font-size:15px; font-weight:700; color:var(--green); letter-spacing:1px; background:var(--soft); width:fit-content; padding:5px 12px; border-radius:7px; margin-bottom:16px;}
.step h3{font-size:21px; font-weight:700; margin-bottom:8px;}
.step p{font-size:15px; color:var(--muted); margin:0; line-height:1.56;}
.promise{margin-top:28px; background:linear-gradient(135deg,var(--green-deep),var(--green)); color:#fff; border-radius:18px; padding:40px; text-align:center; position:relative; overflow:hidden; box-shadow:0 18px 40px rgba(61,168,90,.26);}
.promise::after{content:""; position:absolute; inset:0; opacity:.5; background:radial-gradient(circle at 85% 10%, rgba(216,153,42,.5), transparent 45%);}
.promise .pk{font-weight:600; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-soft); position:relative; z-index:2;}
.promise .pbig{font-family:'Fraunces',Georgia,serif; font-size:clamp(26px,4vw,40px); font-weight:800; margin:8px 0 8px; position:relative; z-index:2; letter-spacing:-.5px;}
.promise .pbig em{font-style:normal; color:var(--gold-soft);}
.promise .psub{font-size:16px; color:rgba(255,255,255,.88); position:relative; z-index:2; max-width:620px; margin:0 auto;}

/* ---- brands ---- */
.brandgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:44px;}
@media(max-width:860px){ .brandgrid{grid-template-columns:repeat(2,1fr);} }
.brand{aspect-ratio:3/2; border:1px solid var(--line); background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .22s, border-color .2s;}
.brand:hover{transform:translateY(-3px); border-color:var(--gold);}
.brand .bname{font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:700; color:var(--ink); line-height:1;}
.brand small{font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); font-weight:500;}
.brand::before{content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--green),var(--gold)); z-index:1;}
.brand img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.foot-note{margin-top:30px; font-size:14.5px; color:var(--muted); max-width:680px; line-height:1.6;}
.foot-note em{color:var(--green-deep); font-style:normal; font-weight:600;}

/* ---- story ---- */
.story-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; margin-top:20px;}
@media(max-width:860px){ .story-grid{grid-template-columns:1fr; gap:34px;} }
.story p{color:var(--muted); font-size:16.5px; margin:0 0 15px; line-height:1.68;}
.stat-stack{display:flex; flex-direction:column; gap:14px;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 24px; display:flex; align-items:center; gap:20px; box-shadow:0 8px 22px rgba(74,54,30,.05); position:relative; overflow:hidden;}
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;}
.stat:nth-child(1)::before{background:var(--green);}
.stat:nth-child(2)::before{background:var(--gold);}
.stat:nth-child(3)::before{background:var(--green-bright);}
.stat .num{font-family:'Fraunces',Georgia,serif; font-size:48px; font-weight:800; color:var(--ink); line-height:1; min-width:84px; font-variant-numeric:tabular-nums;}
.stat:nth-child(1) .num{color:var(--green-deep);}
.stat:nth-child(2) .num{color:var(--gold-deep);}
.stat:nth-child(3) .num{color:var(--navy-2);}
.stat .lbl{font-size:14.5px; color:var(--muted); line-height:1.5;}

/* ---- compliance ---- */
.docs{background:linear-gradient(160deg,var(--soft-2),var(--soft));}
.doc-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px;}
.chip{background:var(--panel); border:1px solid var(--line-2); padding:13px 20px; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:10px; border-radius:40px; font-weight:500; box-shadow:0 4px 14px rgba(74,54,30,.05);}
.chip svg{width:17px; height:17px; color:var(--green); flex-shrink:0;}

/* ---- contact ---- */
.contact{text-align:center;}
.contact .sec-title{margin:0 auto;}
.contact .lede{max-width:560px; margin:16px auto 0; color:var(--muted);}
.cinfo{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:42px;}
.cbox{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px 28px; min-width:230px; box-shadow:0 10px 26px rgba(74,54,30,.06); position:relative; overflow:hidden;}
.cbox::before{content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--green);}
.cbox:nth-child(2)::before{background:var(--gold);}
.cbox:nth-child(3)::before{background:var(--green-bright);}
.ci-lbl{display:block; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted); margin-bottom:9px; font-weight:600;}
.ci-val{font-family:'Fraunces',Georgia,serif; font-size:17px; font-weight:600; color:var(--ink); word-break:break-word; text-decoration:none;}
a.ci-val:hover{color:var(--green-bright); text-decoration:underline;}
.ci-copy{margin-top:10px; font-size:12px; color:var(--green-deep); background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:5px 11px; cursor:pointer; font-weight:600; font-family:inherit;}
.ci-copy:hover{background:var(--green); color:#fff; border-color:var(--green);}

/* ---- footer marquee ---- */
.marquee{background:#0a0e0b; border-top:1px solid var(--line); overflow:hidden; padding:18px 0;}
.marquee-track{display:flex; width:max-content; animation:marq 42s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{font-family:'Fraunces',Georgia,serif; font-size:19px; color:rgba(255,255,255,.62); white-space:nowrap; padding:0 26px; display:flex; align-items:center; gap:26px; font-weight:600;}
.marquee-item::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);}
footer.legal{background:#0a0e0b; color:rgba(255,255,255,.6); text-align:center; padding:26px 0; font-size:13px; border-top:1px solid rgba(255,255,255,.1); font-weight:400; letter-spacing:.2px;}

/* ---- entry gate ---- */
#gate{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px;
  background:
    linear-gradient(rgba(10,14,11,.50), rgba(10,14,11,.58)),
    url("../images/photos/ware_gate.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .55s ease, visibility .55s; }
#gate.hidden{opacity:0; visibility:hidden; pointer-events:none;}
html.gate-seen #gate{display:none;}
#gate::before{content:""; position:absolute; top:0; left:0; right:0; height:clamp(54px,9vh,88px); background:#0a0e0b; z-index:1;}
#gate::after{content:""; position:absolute; bottom:0; left:0; right:0; height:clamp(54px,9vh,88px); background:#0a0e0b; z-index:1;}
#gate > *{position:relative; z-index:2;}
.gate-tag{position:absolute; top:16px; left:0; right:0; text-align:center; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.55);}
.gate-logo{background:none; padding:0; box-shadow:none; margin-bottom:32px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.45)) drop-shadow(0 0 42px rgba(226,172,72,.50)) drop-shadow(0 0 85px rgba(226,172,72,.28));}
.gate-logo img{height:clamp(170px,32vw,310px); width:auto; display:block;}
#gate .gate-title{font-family:'Fraunces',Georgia,serif; color:#fff; font-size:clamp(30px,5.4vw,52px); font-weight:800; letter-spacing:-1px; margin:0; max-width:14ch; text-shadow:0 2px 20px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);}
#gate p{color:#fff; font-size:clamp(15px,2vw,19px); margin:16px 0 0; max-width:38ch; text-shadow:0 1px 12px rgba(0,0,0,.6);}
.gate-opts{display:flex; gap:18px; margin-top:38px; flex-wrap:wrap; justify-content:center;}
.gate-btn{display:flex; flex-direction:column; align-items:center; gap:8px; width:148px; max-width:40vw; padding:17px 14px; border-radius:13px; border:2px solid rgba(255,255,255,.14); background:rgba(6,9,7,.7); backdrop-filter:blur(6px); cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s; box-shadow:0 14px 34px rgba(0,0,0,.26); font-family:inherit;}
.gate-btn:hover{transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.5);}
.gate-btn .gi{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;}
.gate-btn .gi svg{width:23px; height:23px;}
.gate-btn.cust{background:linear-gradient(160deg,#17301f,#0a140d); border-color:rgba(70,176,85,.55);}
.gate-btn.cust .gi{background:rgba(70,176,85,.22); color:var(--green-bright);}
.gate-btn.cust:hover{border-color:var(--green); background:linear-gradient(160deg,#1f3e28,#0e1b13);}
.gate-btn.supp{background:linear-gradient(160deg,#2b1c11,#120b06); border-color:rgba(201,162,75,.5);}
.gate-btn.supp .gi{background:rgba(217,178,74,.2); color:var(--gold);}
.gate-btn.supp:hover{border-color:var(--gold); background:linear-gradient(160deg,#39260f,#17100a);}
.gate-btn b{font-family:'Fraunces',Georgia,serif; font-size:16px; font-weight:700; color:var(--ink);}
.gate-btn span{font-size:11.5px; color:var(--muted); line-height:1.35;}
.gate-skip{margin-top:26px; background:none; border:none; color:rgba(255,255,255,.72); font-size:13.5px; cursor:pointer; text-decoration:underline; font-family:inherit;}
.gate-skip:hover{color:#fff;}
/* owner-only stats */
#ownerstats{position:fixed; right:16px; bottom:16px; z-index:210; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; box-shadow:0 12px 30px rgba(74,54,30,.16); font-size:13px; display:flex; gap:16px; align-items:center;}
#ownerstats[hidden]{display:none;}
#ownerstats .os-t{font-weight:700; color:var(--ink); font-family:'Fraunces',Georgia,serif;}
#ownerstats .os-n{font-family:'Fraunces',Georgia,serif; font-weight:800; font-size:20px; font-variant-numeric:tabular-nums;}
#ownerstats .os-c .os-n{color:var(--green-deep);}
#ownerstats .os-s .os-n{color:var(--gold-deep);}
#ownerstats .os-lbl{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:block;}

:root{ --img-gate:url("../images/photos/front_highlight.jpg"); --img-hero:url("../images/photos/hero_main.jpg"); --img-hand:url("../images/photos/ware_3.jpg"); --squiggle:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2010'%3E%3Cpath%20d='M2%207%20C8%201%2013%201%2020%206%20S32%2011%2038%204'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'/%3E%3C/svg%3E"); }
.show-pic.photo{padding:0; background-size:cover; background-position:center; background-repeat:no-repeat;}
.show-pic.photo.p1{background-image:var(--img-gate);}
.show-pic.photo.p2{background-image:var(--img-hero);}
.show-pic.photo.p3{background-image:var(--img-hand);}
.eyebrow::before{ width:36px; height:10px; background:var(--gold); border-radius:2px;
  -webkit-mask:var(--squiggle) center/contain no-repeat; mask:var(--squiggle) center/contain no-repeat; }
.hero h1 em::after{ content:""; position:absolute; left:-3px; right:-3px; bottom:-9px; top:auto; height:12px;
  background:var(--gold); border-radius:0; z-index:0;
  -webkit-mask:var(--squiggle) left center/46px 100% repeat-x; mask:var(--squiggle) left center/46px 100% repeat-x; }

/* ---- FULL-BLEED HERO with photo background ---- */
.hero{ background:linear-gradient(rgba(28,22,12,.50), rgba(18,20,12,.60)), var(--img-hero);
       background-size:cover; background-position:center; }
.hero-grid{ grid-template-columns:1fr; max-width:780px; padding-block:104px 112px; }
.hero h1{ color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
.hero h1 em{ color:var(--gold-soft); }
.hero .lede{ color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(0,0,0,.55); }
.hero-kick{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34); color:#fff; backdrop-filter:blur(4px); }
.hero-meta .hm b{ color:#fff; } .hero-meta .hm span{ color:rgba(255,255,255,.82); }
.btn-ghost{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); color:#fff; backdrop-filter:blur(4px); }
.btn-ghost:hover{ background:rgba(255,255,255,.22); border-color:#fff; color:#fff; }
@media(max-width:900px){ .hero-grid{ padding-block:76px 84px; } }

/* --- scroll-scrubbed frame sequences (ported from the Astro build) --- */
.seq{ position:relative; block-size:300vh; background:var(--bg); }
.seq__stage{ position:sticky; top:0; block-size:100svh; display:grid; overflow:hidden; }
.seq__frame{ position:relative; width:100%; height:100%; overflow:hidden; background:var(--soft); }
.seq__layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.seq__layer[hidden]{ display:none; }
.seq__caption{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:26px; justify-content:center; align-items:center; padding:24px 16px; background:linear-gradient(180deg,transparent,rgba(20,16,8,.6)); }
.seq__step{ --on:0; font-family:'Mulish',sans-serif; font-size:15px; font-weight:700; letter-spacing:.3px; color:rgb(255 255 255 / calc(45% + 55% * var(--on))); display:flex; align-items:center; gap:8px; transition:color .24s ease; }
.seq__dot{ width:8px; height:8px; border-radius:50%; background:rgb(255 255 255 / calc(40% + 60% * var(--on))); transform:scale(calc(.8 + .4*var(--on))); transition:background-color .24s ease, transform .24s ease; }
@media(max-width:720px){ .seq__caption{ flex-wrap:wrap; justify-content:flex-start; gap:8px 16px; padding:16px 20px 24px; } .seq__step{ font-size:12px; } }
@media(prefers-reduced-motion:reduce){ .seq{ block-size:auto; } .seq__stage{ position:static; block-size:auto; } .seq__frame{ block-size:auto; aspect-ratio:16/9; } .seq__caption{ position:static; background:none; padding:16px 20px; border-top:1px solid var(--line); } .seq__step{ --on:1; color:var(--muted); } .seq__dot{ background:var(--green); } }