
/* Layout: full-bleed cinematic bands (hero, journey) alternate with calm cream bands; one brand-yellow band carries the globe. The footer is anchored behind the page and revealed at the end. */
:root{
  --ink:#2B1810; --ink-2:#4A2C1E; --cream:#FFFBF6; --sand:#F6EEE3; --yellow:#F4C430; --yellow-2:#FFD65A; --amber:#B0701A; --muted:#6E5647;
  --display:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  --script:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,.84,.24,1);
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gutR:max(16px, env(safe-area-inset-right, 0px));
  --H:clamp(52px,8.4vw,150px);
  --H3:clamp(40px,5vw,88px);
  color-scheme: light;
}
@property --rad{syntax:'<percentage>';inherits:false;initial-value:0%}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:1400px;margin:0 auto;padding-left:max(24px,var(--gut));padding-right:max(24px,var(--gutR))}
.wrap.wide{max-width:1760px}
@media(min-width:900px){.wrap{padding-left:56px;padding-right:56px}}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance}
h1,h2,.zq,.hp h3,.jbig h3,.rl h3{text-transform:uppercase;letter-spacing:-.03em;line-height:.9}
em{font-style:normal;font-family:inherit;font-weight:inherit;color:var(--amber)}
.h2{font-size:var(--H)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.script{font-weight:500}
.lead{font-weight:500;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:700;font-size:16px;border:0;cursor:pointer;transition:transform .45s var(--ease),background .3s,color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);background:var(--yellow-2)}
.btn.dark{background:var(--ink);color:var(--cream)}.btn.dark:hover{background:var(--ink-2)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(43,24,16,.28)}.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.rnd{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--yellow);border:0;cursor:pointer;transition:transform .45s var(--ease),background .3s;flex:none}
.rnd:hover{transform:scale(1.08)}
.rnd.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(43,24,16,.3)}.rnd.o:hover{background:var(--ink);color:var(--yellow)}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rv .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em 0 .08em;margin:-.16em 0 -.08em}
.rv .w>span{display:inline-block;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.rv.pre .w>span{transform:translateY(108%)}
.fade-up{transition:opacity .9s ease,transform 1s var(--ease)}
.fade-up.pre{opacity:0;transform:translateY(30px)}
.hdr{position:fixed;left:0;right:0;top:0;z-index:50;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,var(--gutR)) 0 max(16px,var(--gut));pointer-events:none}
.bar{pointer-events:auto;position:relative;max-width:1520px;margin:0 auto;height:72px;border-radius:22px;display:flex;align-items:center;padding:0 10px 0 22px;color:var(--cream);background:rgba(43,24,16,.36);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);transition:background .4s,color .4s,box-shadow .4s}
.hdr.solid .bar{background:rgba(255,251,246,.93);color:var(--ink);box-shadow:0 10px 40px rgba(43,24,16,.12)}
.nav{display:flex;align-items:center;flex:1;gap:2px}
.nav.r{justify-content:flex-end}
.ni>a,.ni>button{display:flex;align-items:center;gap:6px;height:72px;padding:0 14px;font-weight:700;font-size:17px;background:none;border:0;cursor:pointer;transition:color .3s}
.ni>a:hover,.ni>button:hover,.ni.open>button{color:var(--yellow)}
.hdr.solid .ni>a:hover,.hdr.solid .ni>button:hover,.hdr.solid .ni.open>button{color:var(--amber)}
.ni .chev{width:12px;height:12px;transition:transform .35s var(--ease)}
.ni.open .chev{transform:rotate(180deg)}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.logo:hover{transform:translate(-50%,-50%) scale(1.06)}
.logo img{height:66px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,251,246,.14);margin:0 6px;transition:background .3s}
.hdr.solid .ico{background:rgba(43,24,16,.06)}
.mega{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--cream);color:var(--ink);border-radius:28px;padding:32px;box-shadow:0 40px 90px rgba(20,10,5,.28);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .45s var(--ease),visibility .3s;display:grid;gap:28px}
.ni.open .mega{opacity:1;visibility:visible;transform:none}
.mega h4{margin:0 0 16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-weight:600;font-size:18px}
.mega ul a{transition:color .25s,padding .3s var(--ease)}.mega ul a:hover{color:var(--amber);padding-left:4px}
.burger{display:none}
#page{position:relative;z-index:2;background:var(--cream);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.rx{padding:140px 0 110px;position:relative}
.rhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}
.rcar{display:flex;gap:22px;overflow-x:auto;scroll-padding-left:max(24px,var(--gut));padding:10px max(24px,var(--gutR)) 30px max(24px,var(--gut));scrollbar-width:none;cursor:grab}
.rcar::-webkit-scrollbar{display:none}
@media(min-width:900px){.rcar{padding-left:calc(max(56px,(100vw - 1760px)/2 + 56px));scroll-padding-left:calc(max(56px,(100vw - 1760px)/2 + 56px))}}
.rcar.drag{cursor:grabbing;scroll-snap-type:none}
.rk2{flex:0 0 min(460px,82vw);height:600px;border-radius:30px;overflow:hidden;position:relative;color:var(--cream);scroll-snap-align:start;user-select:none}
.rk2.hide{display:none}
.rk2>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);pointer-events:none}
.rk2:hover>img{transform:scale(1.06)}
.rk2::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,10,5,.85),rgba(20,10,5,0) 55%)}
.rk2 .in{position:absolute;left:28px;right:28px;bottom:26px;z-index:1}
.rk2 .in small{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.rk2 h3{font-size:clamp(30px,2.6vw,42px);text-transform:uppercase;line-height:.95;margin-top:8px}
.rk2 .m{display:flex;gap:16px;margin-top:12px;font-weight:700;font-size:15px}
.buy{background:var(--sand);padding:140px 0 120px;overflow:hidden}
.bhead{text-align:center;display:grid;justify-items:center;gap:16px}
.marq{margin:46px 0 40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mtrack{display:flex;gap:14px;width:max-content;animation:hbscroll 38s linear infinite}
.marq:hover .mtrack{animation-play-state:paused}
.chn{height:76px;min-width:210px;padding:0 22px 0 14px;border-radius:20px;background:var(--cream);border:0;display:flex;align-items:center;gap:14px;cursor:pointer;box-shadow:0 0 0 1.5px rgba(43,24,16,.06);transition:transform .4s var(--ease),box-shadow .3s,background .3s}
.chn:hover{transform:translateY(-3px)}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:1;background:var(--yellow);color:var(--ink);padding:60px 0 calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden}
.spacer{height:var(--fh,720px)}
@keyframes hbscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
