/* ===== BBB BLACK + GOLD LAYER (v2) — loads after styles.css. Remove this file + bbb-fx.js to revert to v1. ===== */
:root{
  --bg:#050403;--ink:#f7f1e4;--muted:#b9b09f;--line:rgba(227,194,122,.15);
  --gold:#e3c27a;--gold-hi:#fbe9b7;--gold-deep:#a47f34;--bronze:#6e4a17;--ember:#c9702a;
  --edge-top:rgba(255,240,200,.30);--edge-hair:rgba(255,226,160,.14);--glass:rgba(255,236,190,.035);
  color-scheme:dark}
html{overflow-x:clip;background:var(--bg)}
body{overflow-x:clip;background:transparent;position:relative;min-height:100vh}
::selection{background:var(--gold);color:#120c02}

/* ---------- SKY: slow drifting gold light behind everything ---------- */
body::before,body::after{content:"";position:fixed;z-index:-2;pointer-events:none;will-change:transform}
body::before{inset:-25%;
  background:
   radial-gradient(38% 34% at 22% 20%,rgba(240,184,80,.62),transparent 70%),
   radial-gradient(34% 30% at 80% 28%,rgba(201,112,42,.34),transparent 70%),
   radial-gradient(40% 36% at 62% 82%,rgba(164,127,52,.38),transparent 72%),
   radial-gradient(28% 26% at 10% 88%,rgba(251,233,183,.20),transparent 70%),
   #050403;
  animation:skyA 38s ease-in-out infinite alternate}
body::after{inset:-30%;z-index:-1;mix-blend-mode:screen;opacity:.85;
  background:
   radial-gradient(26% 24% at 70% 18%,rgba(255,214,130,.22),transparent 70%),
   radial-gradient(30% 28% at 18% 62%,rgba(139,92,22,.30),transparent 72%),
   conic-gradient(from 210deg at 55% 55%,transparent 0 55%,rgba(251,233,183,.07) 62%,transparent 72%);
  animation:skyB 52s ease-in-out infinite alternate}
@keyframes skyA{0%{transform:translate3d(-4%,-2%,0) rotate(0deg) scale(1)}100%{transform:translate3d(5%,4%,0) rotate(7deg) scale(1.12)}}
@keyframes skyB{0%{transform:translate3d(5%,3%,0) rotate(0deg) scale(1.05)}100%{transform:translate3d(-6%,-4%,0) rotate(-9deg) scale(.94)}}
/* dark veil + film grain so text always reads and glass has something to refract */
main,footer,header,.announcement{position:relative}
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(5,4,3,.18),rgba(5,4,3,.66) 72%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .6 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* scroll progress */
.bbb-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi),var(--gold));box-shadow:0 0 14px rgba(227,194,122,.7)}

/* ---------- TYPE: flowing gold ---------- */
em,.workshop-art i{font-style:italic;background:linear-gradient(100deg,#a47f34 0%,#f6dc98 22%,#fff3cf 38%,#e3c27a 55%,#b88a38 75%,#f6dc98 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:goldflow 7s linear infinite;padding-right:.06em}
@keyframes goldflow{to{background-position:-260% 0}}
h1,h2{text-shadow:0 2px 40px rgba(0,0,0,.45)}
.eyebrow,.tiny{background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi),var(--gold),var(--gold-deep));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:goldflow 9s linear infinite}
.mini-glass .tiny,.demo-panel .tiny{animation:none;background:none;-webkit-text-fill-color:currentColor}
p{color:var(--muted)}

/* ---------- CHROME ---------- */
.announcement{background:linear-gradient(100deg,#120d04,#2a1d08 30%,#3a2a0c 50%,#2a1d08 70%,#120d04);background-size:200% 100%;animation:goldflow 14s linear infinite;color:#e8dcc0;border-bottom:1px solid var(--line)}
header{position:sticky;top:0;background:rgba(5,4,3,.55);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border-bottom:1px solid transparent;
  box-shadow:0 1px 0 rgba(227,194,122,.16),0 18px 40px -28px #000}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.brand img{filter:drop-shadow(0 0 18px rgba(227,194,122,.28))}
nav a{position:relative;padding:6px 0;color:#e6dcc4;transition:color .3s}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
.nav-cta{border:1px solid rgba(227,194,122,.45);background:rgba(227,194,122,.06);border-radius:999px;transition:background .3s,box-shadow .3s,transform .3s}
.nav-cta:hover{background:rgba(227,194,122,.16);box-shadow:0 0 28px rgba(227,194,122,.35);color:var(--gold-hi);transform:translateY(-1px)}
.menu{border:1px solid rgba(227,194,122,.4);background:rgba(227,194,122,.06);color:var(--gold-hi);border-radius:12px}

/* ---------- BUTTONS ---------- */
.button{position:relative;overflow:hidden;border:0;border-radius:999px;color:#1a1204;background:linear-gradient(110deg,#b88a38,#f6dc98 35%,#fff0c4 50%,#e3c27a 65%,#b88a38);background-size:240% 100%;animation:goldflow 8s linear infinite;
  box-shadow:0 0 0 1px rgba(255,236,190,.5) inset,0 10px 34px -8px rgba(227,174,70,.55)}
.button::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .8s ease}
.button:hover{color:#120c02;background:linear-gradient(110deg,#b88a38,#f6dc98 35%,#fff0c4 50%,#e3c27a 65%,#b88a38);background-size:240% 100%;transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,236,190,.7) inset,0 18px 44px -8px rgba(227,174,70,.8)}
.button:hover::after{left:130%}
.text-link{transition:color .3s,letter-spacing .3s}

/* ---------- HERO ---------- */
.hero-art{overflow:visible}
.gold-disc{background:radial-gradient(ellipse at 35% 20%,rgba(227,174,70,.30),rgba(110,74,23,.10) 55%,transparent 72%);border:1px solid rgba(227,194,122,.22);animation:breathe 9s ease-in-out infinite}
.gold-disc::after{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;background:conic-gradient(from 0deg,transparent 0 60%,rgba(255,236,190,.8) 75%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 14s linear infinite}
@keyframes breathe{50%{transform:scale(1.035);opacity:.9}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-book{border:1px solid rgba(227,194,122,.35);box-shadow:0 40px 80px #000d,0 0 80px -20px rgba(227,174,70,.45);animation:floatBook 9s ease-in-out infinite}
@keyframes floatBook{0%,100%{translate:0 0}50%{translate:0 -14px}}
.hero-art>.mini-glass{animation:floatGlass 11s ease-in-out infinite}
@keyframes floatGlass{0%,100%{translate:0 0}50%{translate:6px 12px}}
.art-caption{color:var(--gold);letter-spacing:.2em}

/* ---------- DEEP GOLD GLASS (shared material) ---------- */
.mini-glass,.hero-art>.mini-glass,.demo-panel{border:1px solid var(--edge-hair);
  background:radial-gradient(120% 80% at 50% -20%,rgba(255,226,160,.22),transparent 60%),radial-gradient(90% 70% at 100% 110%,rgba(201,112,42,.22),transparent 60%),linear-gradient(140deg,rgba(40,30,12,.62),rgba(8,6,3,.72));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 2px 0 var(--edge-top),inset 0 0 0 .5px var(--edge-hair),inset 1px 0 0 rgba(255,214,130,.22),inset -1px 0 0 rgba(201,112,42,.22),inset 0 -22px 28px -22px #000,0 30px 70px -20px #000,0 0 60px -24px rgba(227,174,70,.5)}
.mini-glass h3{color:#fff6dd}
.mini-orbit{background:radial-gradient(circle at 35% 30%,#fff0c4,#c9962f 40%,#4a3210 80%);box-shadow:0 0 50px rgba(227,174,70,.6);animation:breathe 7s ease-in-out infinite}
.glass-pill{border-color:rgba(255,226,160,.35);background:rgba(255,226,160,.08)}

/* ---------- TICKER (marquee built by JS) ---------- */
.ticker{border-color:var(--line);display:block;padding:0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker .track{display:inline-flex;gap:40px;padding:21px 20px;animation:marquee 38s linear infinite;will-change:transform;color:#d8cdb4}
.ticker .track span{color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- CATALOGUE ---------- */
.filters button{border:1px solid rgba(227,194,122,.18);background:rgba(255,236,190,.03);color:#d9cfb7;border-radius:999px;transition:all .3s}
.filters button:hover{border-color:rgba(227,194,122,.5);color:var(--gold-hi)}
.filters button.active{color:#1a1204;border-color:transparent;background:linear-gradient(110deg,#b88a38,#f6dc98,#e3c27a);box-shadow:0 0 26px -4px rgba(227,174,70,.7)}
.search input{border-bottom:1px solid rgba(227,194,122,.35);transition:border-color .3s,box-shadow .3s}
.search input:focus{outline:none;border-color:var(--gold-hi);box-shadow:0 12px 20px -14px rgba(227,174,70,.9)}
.search input::placeholder{color:#8f8670}
.product{position:relative;padding:12px 12px 20px;border-radius:24px;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,236,190,.055),rgba(255,236,190,.012));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1.5px 0 var(--edge-top),inset 0 0 0 .5px var(--edge-hair),inset 0 -18px 24px -20px #000,0 24px 50px -30px #000;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.product::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,226,160,.20),transparent 55%)}
.product::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(from var(--ang,0deg),rgba(251,233,183,.0),rgba(251,233,183,.9),rgba(201,112,42,.7),rgba(251,233,183,.0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rim 6s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rim{to{--ang:360deg}}
.product:hover{transform:translateY(-8px);box-shadow:inset 0 1.5px 0 var(--edge-top),inset 0 0 0 .5px var(--edge-hair),inset 0 -18px 24px -20px #000,0 40px 70px -26px #000,0 0 70px -26px rgba(227,174,70,.6)}
.product:hover::before,.product:hover::after,.product:focus-within::before,.product:focus-within::after{opacity:1}
.product-art{border-radius:16px;background:#0b0804;box-shadow:inset 0 0 0 1px rgba(227,194,122,.14)}
.product-art::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background-size:200% 200%;animation:shiftbg 16s ease-in-out infinite alternate}
.product-art>*{position:relative;z-index:1}
@keyframes shiftbg{to{transform:translate3d(8%,6%,0) rotate(8deg)}}
.product-art.gold{background:#0b0804}.product-art.gold::before{background:radial-gradient(40% 40% at 30% 20%,rgba(227,174,70,.5),transparent 70%),radial-gradient(40% 40% at 80% 90%,rgba(110,74,23,.55),transparent 70%)}
.product-art.purple{background:#0a0705}.product-art.purple::before{background:radial-gradient(40% 40% at 70% 15%,rgba(255,214,130,.38),transparent 70%),radial-gradient(45% 45% at 15% 95%,rgba(201,112,42,.42),transparent 70%)}
.product-art.glass-art{background:#080603}.product-art.glass-art::before{background:radial-gradient(45% 45% at 25% 25%,rgba(227,174,70,.45),transparent 70%),radial-gradient(40% 40% at 85% 85%,rgba(251,233,183,.25),transparent 70%)}
.product-art.sage{background:#090704}.product-art.sage::before{background:radial-gradient(45% 45% at 80% 20%,rgba(164,127,52,.55),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(255,214,130,.25),transparent 70%)}
.product-art.blue{background:#0a0704}.product-art.blue::before{background:radial-gradient(45% 45% at 50% 10%,rgba(227,194,122,.42),transparent 70%),radial-gradient(40% 40% at 90% 95%,rgba(201,112,42,.4),transparent 70%)}
.product-art.kit{background:#080603}.product-art.kit::before{display:none}
.kit-art:before{background:linear-gradient(160deg,rgba(7,5,2,.82),rgba(7,5,2,.94))}
.kit-art b{background:linear-gradient(100deg,#a47f34,#fff0c4 40%,#e3c27a 70%,#a47f34);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:goldflow 8s linear infinite}
.kit-star{animation:spin 24s linear infinite}
.art-arrow{background:rgba(5,4,3,.55);border:1px solid rgba(227,194,122,.4);color:var(--gold-hi);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .4s,background .4s}
.product:hover .art-arrow{transform:translate(3px,-3px);background:rgba(227,194,122,.25)}
.fake-input{border-color:rgba(227,194,122,.3);background:rgba(255,236,190,.05);border-radius:10px}
.product-meta{color:#c9bfa8}
.product-meta strong{background:linear-gradient(100deg,#e3c27a,#fff0c4,#e3c27a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.product .text-link{border-bottom-color:rgba(227,194,122,.5)}
.product:hover .text-link{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}

/* ---------- SECTIONS ---------- */
.featured,.method,.note{border-top:0;position:relative}
.featured::before,.method::before,.note::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(227,194,122,.55),transparent)}
.feature-media{position:relative;border-radius:20px;padding:10px;background:linear-gradient(160deg,rgba(255,236,190,.07),rgba(255,236,190,.01));
  box-shadow:inset 0 1.5px 0 var(--edge-top),inset 0 0 0 .5px var(--edge-hair),0 40px 80px -30px #000,0 0 90px -30px rgba(227,174,70,.55)}
.feature-media video{border-radius:12px}
.feature-media>span{color:var(--gold)}

/* ---------- GLASS PAGE ---------- */
.glass-stage{border:1px solid rgba(227,194,122,.28);border-radius:26px;box-shadow:0 40px 90px -30px #000,0 0 80px -30px rgba(227,174,70,.5),inset 0 1px 0 rgba(255,240,200,.18)}
.orb{animation:orbfloat 14s ease-in-out infinite alternate}
.orb-two{animation-duration:19s;animation-direction:alternate-reverse}
@keyframes orbfloat{to{translate:40px 30px}}
.glass-options button{border:1px solid rgba(227,194,122,.18);color:#d9cfb7}
.glass-options button.active{color:#1a1204;background:linear-gradient(110deg,#b88a38,#f6dc98,#e3c27a);box-shadow:0 0 26px -4px rgba(227,174,70,.7)}
.demo-panel{position:relative}
.glass-stage.sunlit .demo-panel{border-color:rgba(255,255,255,.6)}
.circle-arrow{border-color:rgba(227,194,122,.5)}
input[type=range]{accent-color:var(--gold)}

/* ---------- FOOTER ---------- */
footer{background:linear-gradient(rgba(5,4,3,.90),rgba(5,4,3,.97)),url(assets/marble.jpg) center/cover;border-top:0;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 24px rgba(227,194,122,.6)}
.footer-top a{transition:color .3s,transform .3s}.footer-top a:hover{color:var(--gold-hi);transform:translateX(4px)}
.footer-bottom{border-top-color:rgba(227,194,122,.16);color:#9d9480}

/* ---------- DETAIL PAGES ---------- */
.resource-facts>*,.facts>*{border-color:rgba(227,194,122,.2)}
.product-detail img,.split img{border-radius:14px;box-shadow:0 40px 80px -30px #000,0 0 70px -30px rgba(227,174,70,.5)}

/* ---------- SCROLL REVEAL (only when JS ran) ---------- */
.js .reveal{opacity:0;transform:translateY(34px) scale(.985);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js .reveal.in.product:hover{transform:translateY(-8px)}

/* ---------- MOBILE ---------- */
@media(max-width:560px){
  .hero-art{overflow:hidden;border-radius:20px}
  .hero-book{left:auto;right:8%}
  body::before{inset:-40%}
  .product-grid{gap:22px}
}
/* ---------- ACCESSIBILITY ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none;filter:none}
  .ticker .track{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  header,.product,.mini-glass,.demo-panel,.art-arrow{-webkit-backdrop-filter:none;backdrop-filter:none}
  header{background:#050403}.product{background:#0e0a04}.mini-glass,.demo-panel{background:#17110a}
}

/* compact sticky header once scrolling */
header{transition:height .4s cubic-bezier(.2,.8,.2,1),padding .4s}
.brand img{transition:height .4s}
header.compact{height:76px;padding-top:8px;padding-bottom:8px}
header.compact .brand img{height:56px}
.glass-options button{border-radius:999px;transition:all .3s}
.glass-options button:hover{border-color:rgba(227,194,122,.5);color:var(--gold-hi)}
@media(max-width:560px){header.compact{height:64px}header.compact .brand img{height:44px}}

/* ---------- detail-page + leftover surfaces: no more green-grey ---------- */
.detail-art,.portrait,.feature-media{background:linear-gradient(160deg,rgba(255,236,190,.07),rgba(255,236,190,.012)) !important;position:relative;overflow:hidden;border-radius:24px;
  box-shadow:inset 0 1.5px 0 var(--edge-top),inset 0 0 0 .5px var(--edge-hair),0 40px 80px -30px #000,0 0 90px -30px rgba(227,174,70,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.detail-art::before,.portrait::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:radial-gradient(40% 40% at 30% 20%,rgba(227,174,70,.40),transparent 70%),radial-gradient(40% 40% at 80% 90%,rgba(110,74,23,.5),transparent 70%);animation:shiftbg 16s ease-in-out infinite alternate}
.detail-art>*,.portrait>*{position:relative;z-index:1}
.workshop-art.big{background:radial-gradient(circle at 20% 20%,rgba(201,150,47,.35),rgba(8,6,3,.9) 80%) !important;border-radius:24px;border:1px solid var(--edge-hair)}
.check-book{box-shadow:12px 20px 40px #000a,0 0 60px -20px rgba(227,174,70,.5)}
@media(max-width:1050px){nav{background:rgba(8,6,3,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}}
.resource-facts span,.facts span{border:1px solid rgba(227,194,122,.28);border-radius:999px;background:rgba(227,194,122,.05);color:#e6dcc4}
.lesson-list li{border-color:rgba(227,194,122,.16)}

/* v4: kits page */
.kit-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px auto 28px}
.kit-showcase figure{margin:0;border:1px solid rgba(227,194,122,.28);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03)}
.kit-showcase img{display:block;width:100%;height:auto}
.kit-showcase figcaption{padding:10px 14px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#e3c27a)}
.kit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 auto 28px}
.kitcard{padding:28px;border-radius:22px;border:1px solid rgba(227,194,122,.28);background:linear-gradient(160deg,rgba(227,194,122,.08),rgba(255,255,255,.02));backdrop-filter:blur(14px)}
.kitcard h2{margin:.4rem 0 .2rem}.kit-tag{margin:0 0 .8rem}.kit-buy{margin-top:16px}
@media(max-width:760px){.kit-showcase,.kit-grid{grid-template-columns:1fr}.kitcard{padding:22px}}

/* ============ v5 · Bespoke lockup header + entrance polish ============ */
.brand{width:auto;flex-shrink:0;position:relative;display:block;line-height:0}
.brand img{width:auto;height:42px;max-width:none;display:block;object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(247,220,126,.38)) drop-shadow(0 0 20px rgba(227,174,70,.22));
  animation:lkGlow 5.5s ease-in-out infinite;transition:height .4s}
.brand::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,251,226,.96) 50%,transparent 62%) 100% 0/250% 100% no-repeat;
  -webkit-mask:url(assets/bbb-lockup.png) center/100% 100% no-repeat;mask:url(assets/bbb-lockup.png) center/100% 100% no-repeat;
  animation:lkSheen 7s cubic-bezier(.4,0,.2,1) infinite}
header.compact .brand img{height:32px}
@keyframes lkGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(247,220,126,.30)) drop-shadow(0 0 16px rgba(227,174,70,.16))}50%{filter:drop-shadow(0 0 10px rgba(255,232,150,.55)) drop-shadow(0 0 28px rgba(227,174,70,.34))}}
@keyframes lkSheen{0%{background-position:100% 0}34%,100%{background-position:0% 0}}
@media(max-width:1100px){.brand img{height:34px}header.compact .brand img{height:28px}}
@media(max-width:760px){.brand img{height:21px}header.compact .brand img{height:20px}}
@media(max-width:380px){.brand img{height:18px}}
@media(prefers-reduced-motion:reduce){.brand img{animation:none}.brand::after{animation:none;opacity:0}}

/* richer entrance: lift + unblur, with a soft gold bloom arriving behind each section head */
.js .reveal{transform:translateY(46px) scale(.98);filter:blur(9px);transition:opacity 1.1s cubic-bezier(.16,.84,.24,1),transform 1.2s cubic-bezier(.16,.84,.24,1),filter 1.1s cubic-bezier(.16,.84,.24,1);transition-delay:var(--d,0s)}
.has-bloom{position:relative;isolation:isolate}
.bloom{position:absolute;left:-12%;top:-70%;width:70%;height:240%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(247,220,126,.17),rgba(227,174,70,.06) 55%,transparent);
  opacity:0;transform:scale(.55) translateX(-6%);transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.16,.84,.24,1)}
.has-bloom.in-view .bloom{opacity:1;transform:none}
.eyebrow{position:relative}
.js .has-bloom .eyebrow::before{content:'';display:inline-block;vertical-align:middle;height:1px;width:0;margin-right:0;background:linear-gradient(90deg,transparent,var(--gold,#dfc17c));transition:width 1.2s cubic-bezier(.16,.84,.24,1) .2s,margin-right 1.2s .2s}
.js .has-bloom.in-view .eyebrow::before{width:38px;margin-right:12px}
@media(prefers-reduced-motion:reduce){.bloom{transition:none;opacity:1;transform:none}.js .has-bloom .eyebrow::before{width:38px;margin-right:12px;transition:none}}

/* ============ v6 · calmer sky, balanced lockup, wordmark title, shape-following surfaces ============ */
/* header lockup: Bespoke no longer dominates */
.brand img{height:34px}
header.compact .brand img{height:28px}
@media(max-width:1100px){.brand img{height:28px}header.compact .brand img{height:25px}}
@media(max-width:760px){.brand img{height:19px}header.compact .brand img{height:18px}}
@media(max-width:380px){.brand img{height:16px}}
/* hero title: the real Bespoke wordmark, metallic + glowing, trailing gold dot */
h1 .bwm{position:relative;display:inline-block;height:.74em;vertical-align:-.02em;line-height:0}
h1 .bwm img{height:100%;width:auto;max-width:none;display:block;filter:drop-shadow(0 0 10px rgba(247,220,126,.35)) drop-shadow(0 0 34px rgba(227,174,70,.25));animation:lkGlow 5.5s ease-in-out infinite}
h1 .bwm::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,251,226,.95) 50%,transparent 62%) 100% 0/250% 100% no-repeat;-webkit-mask:url(assets/bespoke-wordmark.png) center/100% 100% no-repeat;mask:url(assets/bespoke-wordmark.png) center/100% 100% no-repeat;animation:lkSheen 7s cubic-bezier(.4,0,.2,1) 1.2s infinite}
h1 .bdot{font-family:var(--serif);color:var(--gold);font-weight:400;margin-left:.04em}
@media(prefers-reduced-motion:reduce){h1 .bwm img,h1 .bwm::after{animation:none}h1 .bwm::after{opacity:0}}
/* sky: dark and neutral; the gold dot is the light source now */
body::before{background:
   radial-gradient(34% 30% at 20% 18%,rgba(240,184,80,.15),transparent 70%),
   radial-gradient(30% 26% at 82% 30%,rgba(201,112,42,.07),transparent 70%),
   radial-gradient(36% 30% at 60% 85%,rgba(164,127,52,.08),transparent 72%),
   #040302}
body::after{opacity:.35}
@media(max-width:700px){body::before{background:radial-gradient(60% 40% at 30% 10%,rgba(240,184,80,.20),transparent 70%),radial-gradient(60% 40% at 70% 90%,rgba(164,127,52,.10),transparent 70%),#040302}}
/* lamp: follows the gold dot, lights whatever it passes */
#lamp{position:fixed;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none}
#lamp::before{content:'';position:absolute;width:90vmax;height:90vmax;left:-45vmax;top:-45vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,224,140,.15),rgba(227,174,70,.07) 38%,transparent 70%);will-change:transform;mix-blend-mode:screen}
.lit{--lit:0}
.product-art.lit,.bi.lit,.feature-media.lit{box-shadow:0 0 calc(var(--lit)*80px) calc(var(--lit)*-6px) rgba(247,214,120,calc(var(--lit)*.34))}
.section-head.lit h2,.page-title.lit h1,.kits-hero.lit h1,.glass-intro.lit h1,.bt.lit .giant{text-shadow:0 0 calc(var(--lit)*46px) rgba(247,214,120,calc(var(--lit)*.4)),0 4px 60px rgba(0,0,0,.6)}
.lit .eyebrow{filter:brightness(calc(1 + var(--lit)*.5))}
/* surfaces follow the shape of what they hold: no default glass slab */
.portrait,.detail-art,.feature-media{background:none !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;overflow:visible !important;border-radius:0;padding:0 !important}
.portrait::before,.detail-art::before{inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(247,214,120,.30),rgba(227,174,70,.10) 58%,transparent 76%) !important;filter:blur(10px);animation:none;z-index:0}
.portrait img{position:relative;z-index:1;border-radius:50%;box-shadow:0 0 0 1px rgba(227,194,122,.45),0 30px 70px -20px #000,0 0 90px -20px rgba(227,174,70,.55)}
.about .portrait{aspect-ratio:1;display:grid;place-items:center;max-width:520px;width:100%}
.about .portrait img{width:94%;aspect-ratio:1;object-fit:cover}
.detail-art img{border-radius:6px}
.feature-media video{border-radius:18px;box-shadow:0 30px 70px -25px #000,0 0 80px -28px rgba(227,174,70,.5)}

/* ============ v7 · circle arrow buttons, gold sliders, hero load-in, showreel ============ */
.go{display:inline-block;width:1.75em;height:1.75em;min-width:1.75em;border-radius:50%;vertical-align:middle;margin-left:.35em;flex:none;background:linear-gradient(140deg,#fff3cf,#e3c27a 55%,#b88a38);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 16.5 16.5 7.5M8.5 7.5h8v8' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/66% no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 16.5 16.5 7.5M8.5 7.5h8v8' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/66% no-repeat,linear-gradient(#000,#000);mask-composite:exclude;
  filter:drop-shadow(0 0 8px rgba(247,214,120,.35));transition:transform .35s cubic-bezier(.16,.84,.24,1),filter .35s}
.go.dn{transform:rotate(135deg)}
a:hover .go,.button:hover .go{transform:scale(1.14) rotate(10deg);filter:drop-shadow(0 0 12px rgba(247,214,120,.7))}
a:hover .go.dn,.button:hover .go.dn{transform:rotate(145deg) scale(1.14)}
.button .go{background:#14180e;filter:none}
.nav-cta .go{width:24px;height:24px;min-width:24px;margin-left:0}
.nav-cta span{margin-left:14px;display:inline-flex}
.text-link .go{width:1.55em;height:1.55em;min-width:1.55em}
.glass-pill .go,.btn-ghost .go{width:1.5em;height:1.5em;min-width:1.5em}
/* sliders: animated gold fill, glowing thumb */
input[type=range]{-webkit-appearance:none;appearance:none;--p:0;height:10px;border-radius:999px;cursor:pointer;outline-offset:6px;
  background:repeating-linear-gradient(100deg,#a47f34 0,#f6dc98 36px,#fff3cf 56px,#e3c27a 84px,#a47f34 130px) 0 0/calc(11px + (100% - 22px)*var(--p)) 100% no-repeat,rgba(255,236,190,.10);
  box-shadow:inset 0 1px 2px #000b,0 0 20px -6px rgba(227,174,70,.55);animation:rflow 2.4s linear infinite}
@keyframes rflow{to{background-position:130px 0,0 0}}
input[type=range]::-webkit-slider-runnable-track{background:transparent;height:10px;border-radius:999px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-6px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fffbe2,#f3d98a 38%,#c8962f 75%,#8f5f12);box-shadow:0 0 0 3px rgba(247,214,120,.22),0 0 22px rgba(247,214,120,.65),0 3px 6px #000a}
input[type=range]::-moz-range-track{background:transparent;height:10px}
input[type=range]::-moz-range-progress{height:10px;border-radius:999px;background:linear-gradient(90deg,#a47f34,#f6dc98,#e3c27a)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fffbe2,#f3d98a 38%,#c8962f 75%,#8f5f12);box-shadow:0 0 22px rgba(247,214,120,.65)}
@media(prefers-reduced-motion:reduce){input[type=range]{animation:none}}
/* hero: engaging load-in */
@keyframes rise{from{opacity:0;transform:translateY(34px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes wmWipe{0%{opacity:0;transform:scale(.94);filter:blur(16px)}60%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes burst{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:.0;transform:scale(1.6)}}
.hero-copy .eyebrow{animation:rise 1s cubic-bezier(.16,.84,.24,1) .15s both}
.hero-copy h1{animation:rise 1.1s cubic-bezier(.16,.84,.24,1) .35s both}
h1 .bwm{animation:wmWipe 1.5s cubic-bezier(.4,0,.2,1) .8s both}
h1 .bdot{animation:rise .8s ease 2.1s both;display:inline-block}
.hero-copy>p{animation:rise 1s cubic-bezier(.16,.84,.24,1) 1.5s both}
.hero-copy .actions{animation:rise 1s cubic-bezier(.16,.84,.24,1) 1.75s both}
.hero-copy .hero-note{animation:rise 1s cubic-bezier(.16,.84,.24,1) 2s both}
h1 .bwm::before{content:'';position:absolute;left:-10%;top:-60%;width:120%;height:220%;background:radial-gradient(closest-side,rgba(255,230,150,.55),transparent 70%);animation:burst 2.2s ease-out 1.5s both;pointer-events:none;z-index:-1}
@media(prefers-reduced-motion:reduce){.hero-copy .eyebrow,.hero-copy h1,h1 .bwm,h1 .bdot,.hero-copy>p,.hero-copy .actions,.hero-copy .hero-note{animation:none}h1 .bwm::before{display:none}}
/* showreel */
.reel{padding-top:90px;padding-bottom:70px;position:relative}
.reel-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:34px}
.rt{position:relative;margin:0;border-radius:26px;overflow:hidden;background:#07050a;box-shadow:0 30px 70px -30px #000,0 0 70px -34px rgba(227,174,70,.55),inset 0 0 0 1px rgba(227,194,122,.16);isolation:isolate}
.rt img,.rt video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.16,.84,.24,1)}
.rt:hover img,.rt:hover video{transform:scale(1.05)}
.rt::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(5,4,3,.55) 100%),linear-gradient(to top,rgba(5,4,3,.82),transparent 38%)}
.rt figcaption{position:absolute;left:20px;right:20px;bottom:16px;z-index:2}
.rt figcaption small{display:block;font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--gold)}
.rt figcaption b{display:block;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.02em;color:#fff6dd;margin-top:4px;font-weight:600}
.rt.w8{grid-column:span 8;aspect-ratio:16/9}.rt.w4{grid-column:span 4}.rt.w6{grid-column:span 6;aspect-ratio:16/9}.rt.sq{aspect-ratio:1}
.rt.ph{grid-column:span 3;aspect-ratio:9/16;border-radius:34px}
.rt.art{background:#050403}.rt.art img{object-fit:contain;padding:8%}
.rt.art.fill img{object-fit:cover;padding:0}
.rt.pad-w{aspect-ratio:3/4}
@media(max-width:900px){.rt.w8,.rt.w6{grid-column:span 12}.rt.w4{grid-column:span 6}.rt.ph{grid-column:span 6}}
@media(max-width:560px){.reel-grid{gap:12px}.rt.w4{grid-column:span 12}.rt{border-radius:20px}}

.nav-cta{display:inline-flex;align-items:center}
.nav-cta{white-space:nowrap}
@media(max-width:560px){.nav-cta{padding:10px 12px;font-size:11px}.nav-cta span{margin-left:8px}.nav-cta .go{width:20px;height:20px;min-width:20px}}

/* ============ v8 · hero film: gold light draws the bear, resolves to the B; text fades in over it ============ */
main{overflow-x:clip}
.has-film .hs-a{position:relative;isolation:isolate;min-height:calc(100svh - 150px)}
.hero-film{position:absolute;z-index:-1;top:-56px;bottom:0;left:calc(50% - 50vw);width:100vw;overflow:hidden;background:#050403;pointer-events:none}
.hero-film video{width:100%;height:100%;object-fit:cover;display:block;opacity:1;filter:none;transition:opacity 2.4s ease,filter 2.4s ease}
.has-film.film-go .hero-film video{opacity:.3;filter:blur(5px) saturate(1.05)}
.hero-film::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,4,3,0) 55%,rgba(5,4,3,.72) 82%,#050403 100%),linear-gradient(90deg,rgba(5,4,3,.55),transparent 55%);opacity:0;transition:opacity 2.4s ease}
.has-film.film-go .hero-film::after{opacity:1}

/* hold the text back until the film has drawn the bear */
.has-film:not(.film-go) .hs-a .hero-copy *,.has-film:not(.film-go) .hs-a .hero-art,.has-film:not(.film-go) .hs-a .hero-art *{animation-play-state:paused !important}
@media(prefers-reduced-motion:reduce){.hero-film video{transition:none}}

/* v9 · lockup is now three equal words; hero art removed so the film shows */
.brand img{height:30px}
header.compact .brand img{height:26px}
@media(max-width:1100px){.brand img{height:24px}header.compact .brand img{height:22px}}
@media(max-width:760px){.brand img{height:15px}header.compact .brand img{height:14px}}
@media(max-width:380px){.brand img{height:13px}}
.has-film .hero-art{display:none}
.has-film .hs-a{display:flex;align-items:center}
.has-film .hero-copy{max-width:min(720px,100%)}
.has-film.film-go .hero-film video{opacity:.62;filter:blur(2px)}
.has-film.film-go .hero-film::after{background:linear-gradient(to bottom,rgba(5,4,3,0) 55%,rgba(5,4,3,.72) 82%,#050403 100%),linear-gradient(90deg,rgba(5,4,3,.78),rgba(5,4,3,.25) 60%,transparent)}

/* v10 · hero film dissolves into the sky (mask, no hard edge); beat tweaks */
.hero-film{background:transparent;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%);bottom:-14svh}
.has-film.film-go .hero-film::after{background:linear-gradient(90deg,rgba(5,4,3,.78),rgba(5,4,3,.25) 60%,transparent)}
.hero-film::after{background:linear-gradient(90deg,rgba(5,4,3,.55),transparent 55%)}
@media(prefers-reduced-motion:reduce){.anim .beat .bi-cut img{animation:none}}

/* ============ v11 · calm toolbox grid + Bespoke Glass intro ============ */
.gl-sub{max-width:520px;margin:18px auto 0;text-align:center;color:#d8d0bb;font-size:clamp(14px,1.4vw,18px);line-height:1.5}
.anim .gl-head{text-align:center}
.bento{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;align-items:stretch}
.bento .product,.bento .b-guide,.bento .b-work,.bento .b-glass,.bento .b-check,.bento .b-char,.bento .b-kit{grid-column:auto!important;grid-row:auto!important;display:flex!important;flex-direction:column;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bento .product:hover{transform:translateY(-4px)}
.bento .product-art,.bento .b-guide .product-art,.bento .b-work .product-art,.bento .b-glass .product-art,.bento .b-char .product-art,.bento .b-check .product-art,.bento .b-kit .product-art{height:auto!important;min-height:0!important;flex:none!important;aspect-ratio:4/3;display:grid!important;place-items:center;overflow:hidden;position:relative}
.bento .product-art::before{animation:none!important;inset:0!important;background-size:100% 100%!important}
.bento .art-arrow{display:none!important}
.bento .product-art img{position:static!important;transform:none!important;rotate:none!important;translate:none!important;height:86%!important;width:auto!important;max-width:88%!important;object-fit:contain;margin:0!important;box-shadow:0 18px 34px -10px #000c}
.bento .product-art img.character{height:92%!important;box-shadow:none;filter:drop-shadow(0 14px 22px #000a)}
.bento .workshop-art,.bento .mini-glass,.bento .kit-art{position:static!important;transform:none!important;rotate:none!important;translate:none!important;animation:none!important;width:84%!important;max-width:none;height:auto!important;margin:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.bento .mini-glass{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;background:rgba(23,17,10,.85)}
.bento .mini-glass .mini-orbit{position:absolute;right:12%;top:14%;width:56px;height:56px;animation:none}
.bento .mini-glass h3{font-size:clamp(15px,1.6vw,20px);margin:0}
.bento .kit-art b{animation:none}
.bento .product h3{margin-top:14px}
.bento .product .text-link{margin-top:auto;align-self:flex-start}
.bento .product p{flex:1}
@media(max-width:1050px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.bento{grid-template-columns:1fr!important}}
.s-glass .l7 .pane{padding-right:clamp(18px,3.4vw,34px)}
.anim .s-glass .layer-stage.free{width:100%;justify-self:center;display:grid;place-items:center;margin-top:9svh}
.anim .s-glass .layer-stage.free .stack{width:min(540px,56vw);margin:0 auto}
.anim .s-glass .gl-head{padding-top:12svh}
.anim .s-glass .layer-stage.free{padding:0;justify-content:center}
.gl-h{white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.22em;flex-wrap:nowrap}
.gl-h .bwm{position:relative;display:inline-block;height:.78em;line-height:0;vertical-align:middle}
.gl-h .bwm img{height:100%;width:auto;max-width:none;display:block;filter:drop-shadow(0 0 10px rgba(247,220,126,.35)) drop-shadow(0 0 30px rgba(227,174,70,.22))}
.gl-h em{padding-right:.08em}
@media(max-width:520px){.anim .gl-head .mega.gl-h{font-size:clamp(28px,9vw,44px)}}

/* ============ v13 · home glass stack: real art sky, rain in the atmosphere layer, clean body ============ */
.s-glass .l1 .pane{overflow:hidden;border-radius:22px;background:#0a0704;box-shadow:0 0 0 1px rgba(227,194,122,.28),0 30px 60px -24px #000}
.s-glass .l1 .pane::before{display:none}
.skyart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s-glass .l2 .pane{background:linear-gradient(180deg,rgba(150,175,220,.10),rgba(150,175,220,.03));box-shadow:inset 0 0 0 1px rgba(200,220,255,.16)}
.rain{position:absolute;inset:0;width:100%;height:100%;display:block}
.s-glass .l3 .pane{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(255,244,220,.12),rgba(255,244,220,.035));box-shadow:inset 0 0 0 1px rgba(255,226,160,.18)}
.s-glass .stack.asm .l3 .pane{-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
.s-glass .l4 .pane{background:linear-gradient(150deg,rgba(255,240,205,.11),rgba(255,240,205,.03));box-shadow:inset 0 0 46px rgba(255,226,160,.10),inset 0 0 0 1px rgba(255,226,160,.2)}
.s-glass .l5 .pane::before{background:radial-gradient(70% 38% at 50% -8%,rgba(255,236,190,.16),transparent 62%)}

/* ============ v14 · Bespoke Glass explained in plain words ============ */
.gx{position:relative;z-index:1;padding:90px 0 70px}
.gx-head{max-width:780px;margin:0 auto 44px;text-align:center}
.gx-head h2{font-size:clamp(30px,4.4vw,64px);line-height:1.04;letter-spacing:-.045em;margin:14px 0 18px;font-weight:600;color:var(--ink)}
.gx-head p{color:#d8d0bb;font-size:clamp(15px,1.4vw,19px);line-height:1.6;margin:0 auto;max-width:660px}
.gx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gx-card{padding:26px 24px 28px;border-radius:24px;background:linear-gradient(160deg,rgba(255,236,190,.07),rgba(255,236,190,.015));box-shadow:inset 0 1.5px 0 rgba(255,240,200,.22),inset 0 0 0 .5px rgba(255,226,160,.2),0 30px 60px -30px #000}
.gx-n{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--gold)}
.gx-card h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;margin:10px 0 12px;color:#fff6dd}
.gx-card p,.gx-card li{color:#d3cab5;font-size:15px;line-height:1.6;margin:0 0 12px}
.gx-card ul{margin:0 0 12px;padding-left:18px}.gx-card li{margin-bottom:8px}
.gx-code{margin:14px 0;padding:14px 16px;border-radius:14px;background:#0a0704;box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);overflow-x:auto;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;color:#f3dfa6;white-space:pre}
.gx-code b{color:#fff;font-weight:600}
.gx-demo{--b:227,174,70;display:grid;grid-template-columns:1fr 1.05fr;gap:34px;align-items:center;margin-top:34px;padding:34px;border-radius:28px;background:linear-gradient(160deg,rgba(255,236,190,.06),rgba(255,236,190,.012));box-shadow:inset 0 1.5px 0 rgba(255,240,200,.2),inset 0 0 0 .5px rgba(255,226,160,.18)}
.gx-demo h3{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.035em;margin:10px 0 12px;color:#fff6dd}
.gx-demo p{color:#d3cab5;line-height:1.6;margin:0 0 16px}
.gx-sw{display:flex;gap:12px;margin-bottom:6px}
.gx-sw button{width:44px;height:44px;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 18px -6px var(--c);transition:transform .25s,border-color .25s}
.gx-sw button:hover{transform:scale(1.08)}
.gx-sw button[aria-pressed=true]{border-color:#fff;transform:scale(1.1)}
.gx-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:6px}
.gx-demo-art{position:relative;aspect-ratio:3/2;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -26px #000,0 0 0 1px rgba(227,194,122,.25)}
.gx-demo-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gx-pane{position:absolute;left:9%;right:9%;bottom:11%;padding:20px 22px;border-radius:20px;background:linear-gradient(150deg,rgba(var(--b),.30),rgba(var(--b),.10));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.2),0 0 40px -8px rgba(var(--b),.7);transition:background .5s,box-shadow .5s}
.gx-pane .tiny{font-size:9px;color:#fff;background:none;-webkit-text-fill-color:#fff;opacity:.85}
.gx-pane b{display:block;font-size:clamp(18px,2.4vw,28px);letter-spacing:-.03em;color:#fff;margin:6px 0 4px}
.gx-pane p{margin:0 0 12px;font-size:13px;color:rgba(255,255,255,.85)}
.gx-btn{display:inline-block;padding:9px 18px;border-radius:999px;background:rgb(var(--b));color:#fff;font-size:12px;font-weight:700;box-shadow:0 6px 16px -6px rgb(var(--b));transition:background .5s}
@media(max-width:1000px){.gx-grid{grid-template-columns:1fr}.gx-demo{grid-template-columns:1fr;padding:22px}}

/* v20: calmer hero CTA, no black box behind header links */
.hero-copy .button{padding:10px 12px 10px 22px;font-size:13px;gap:16px;min-height:0}
.hero-copy .button .go{width:24px;height:24px;min-width:24px}
@media(min-width:761px){nav{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important}}
@media(min-width:761px) and (max-width:1100px){header{gap:14px;padding-left:28px;padding-right:28px}nav{gap:16px;font-size:11.5px;white-space:nowrap;margin:auto 0 auto auto}.brand{flex:0 1 auto}.brand img{width:auto;max-width:100%;height:60px}.nav-cta{white-space:nowrap}}

/* v21 — toolbox: darker field, gold rails the light travels, clear legend + type badges */
body::before{opacity:.5}body::after{opacity:.18}
#lamp::before{background:radial-gradient(closest-side,rgba(255,224,140,.24),rgba(227,174,70,.1) 38%,transparent 70%)}
.catalog-controls{border-top:1px solid rgba(227,194,122,.55)!important;border-bottom:1px solid rgba(227,194,122,.28)!important;box-shadow:0 -1px 18px -6px rgba(227,174,70,.35)}
.tb-legend{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tb-legend li{font-size:12.5px;line-height:1.5;color:#b9b19c;padding-left:14px;border-left:1px solid rgba(227,194,122,.35)}
.tb-legend b{display:block;color:#f7f1e4;font-size:13px;letter-spacing:.01em;margin-bottom:2px}
.product{position:relative}
.ptype{position:absolute;left:12px;top:12px;z-index:3;font-size:10px;letter-spacing:.08em;font-weight:700;color:#f7f1e4;background:rgba(5,4,3,.72);border:1px solid rgba(227,194,122,.4);padding:6px 10px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:"BBB Sans",Arial,Helvetica,sans-serif}
@media(max-width:900px){.tb-legend{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tb-legend{grid-template-columns:1fr;gap:10px}.ptype{font-size:8.5px;left:8px;top:8px;padding:5px 8px}}

/* v22 — forest-metal CTA + notebook mock */
.film-cta{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.button.forest{position:relative;overflow:visible;color:#eaf3df;font-weight:700;border:1px solid rgba(216,194,122,.65);border-radius:999px;background:linear-gradient(115deg,#0b2417 0%,#1f5535 28%,#6fa07a 46%,#1c4a2e 62%,#0d2a1a 100%);box-shadow:inset 0 1px 0 rgba(220,245,210,.45),inset 0 -8px 16px rgba(0,0,0,.35),0 10px 34px -8px rgba(40,120,70,.55),0 0 0 1px rgba(0,0,0,.4);text-shadow:0 1px 1px rgba(0,0,0,.5);padding-left:44px}
.button.forest:hover{color:#fff;background:linear-gradient(115deg,#0d2c1c 0%,#2a6a42 28%,#86b890 46%,#235a37 62%,#10331f 100%);transform:translateY(-2px)}
.button.forest .go,.button.forest>span{background:linear-gradient(140deg,#f3e3a4,#c9a850);color:#10240f;border-radius:50%}
.button.forest>span{width:24px;height:24px;display:inline-grid;place-items:center;font-size:13px}
.lf{position:absolute;width:38px;height:26px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2395c08a'/><stop offset='.5' stop-color='%232f6b45'/><stop offset='1' stop-color='%230f3320'/></linearGradient></defs><path d='M2 36C8 12 30 2 58 4 52 28 30 40 2 36Z' fill='url(%23g)' stroke='%23d8c27a' stroke-width='1.2'/><path d='M4 35C20 24 36 14 54 7' fill='none' stroke='%23d8c27a' stroke-width='1.1' opacity='.8'/></svg>") center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));pointer-events:none}
.lf-a{left:-12px;top:-9px;transform:rotate(-24deg)}
.lf-b{left:6px;bottom:-12px;width:30px;height:20px;transform:rotate(168deg) scaleX(-1)}
.nb-mock{width:clamp(130px,16vw,230px);height:auto;background:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));transform:rotate(-2deg)}
@media(max-width:700px){.film-cta{gap:18px}.nb-mock{width:120px}}
.button.forest>span{color:#10240f!important;font-size:14px!important;line-height:1;font-weight:700}
.film-cta .nb-mock{margin:-70px 0 -60px -6px;align-self:center}
@media(max-width:700px){.film-cta .nb-mock{margin:-20px 0 -30px 6px}}
.film-cta .nb-mock{width:clamp(110px,12vw,168px);margin:-14px 0 -10px 0}
@media(max-width:700px){.film-cta .nb-mock{width:104px;margin:0}}
.button.forest .go{-webkit-mask:none;mask:none;position:relative;filter:none;background:linear-gradient(140deg,#f3e3a4,#c9a850)}
.button.forest .go::after{content:'↗';position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:700;color:#10240f;line-height:1}

/* v23 — "free." is written by the light */
.free-em{position:relative;display:inline-block;color:transparent!important;-webkit-text-fill-color:transparent;background:none!important}
.free-t{visibility:hidden}
.free-svg{position:absolute;left:0;top:50%;width:100%;height:1.28em;transform:translateY(-55%);overflow:visible;pointer-events:none}
.free-svg .fo{fill:none;stroke:#f1d98f;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(247,214,120,.7))}
.free-svg .ff{opacity:0}
.free-svg .fh{fill:rgba(255,226,140,.28)}.free-svg .fc{fill:#fff3c4}
.free-svg .fpen{opacity:0}
.no-anim .free-svg .ff,.free-svg.done .ff{opacity:1}

/* v24 — layer bouncer rides against each layer's label */
#bdot{position:fixed;left:0;top:0;width:14px;height:14px;z-index:6;pointer-events:none;opacity:0;will-change:transform}
#bdot i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe2,#f7dc7e 38%,#d4a238 72%,#8f5f12);box-shadow:0 0 14px 3px rgba(247,214,120,.55),0 0 38px 8px rgba(227,174,70,.25)}
.lyr .lbl{text-shadow:0 0 calc(var(--hit,0)*16px) rgba(255,226,140,calc(var(--hit,0)*.95));color:color-mix(in srgb,#ffe9a8 calc(var(--hit,0)*100%),currentColor)}

/* v25 — reel: Tribe feature, bear loop, side-scrolling art */
.rt.w12{grid-column:span 12;aspect-ratio:21/9}
.rt.tribe{grid-column:span 4}
.rt.tribe video{position:absolute;inset:0}
.rt.tribe figcaption b.tb-big{font-size:clamp(22px,2.6vw,38px);line-height:1.08;max-width:12ch;color:#fff6dd;text-shadow:0 2px 24px rgba(0,0,0,.7)}
@media(max-width:900px){.rt.tribe{grid-column:span 12;aspect-ratio:9/12}.rt.w12{aspect-ratio:16/9}}
.mq-wrap{margin-top:44px}
.mq-brands{font-size:clamp(14px,1.5vw,19px);letter-spacing:-.01em;color:#f3ead2;margin:0 0 22px;text-align:center;line-height:1.6}
.mq-brands span{display:block;font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--gold);margin-bottom:6px;text-transform:uppercase}
.mq-brands i{color:var(--gold);font-style:normal;margin:0 .35em}.mq-brands small{display:block;font-size:11px;color:#8d8570;margin-top:6px}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);margin-top:18px}
.mq-t{display:flex;gap:20px;width:max-content;animation:mqL 60s linear infinite}
.mq-b .mq-t{animation-name:mqR;animation-duration:70s}
.mq:hover .mq-t{animation-play-state:paused}
.mq-i{position:relative;margin:0;flex:none;height:clamp(180px,22vw,300px);border-radius:18px;overflow:hidden;background:#050403;box-shadow:inset 0 0 0 1px rgba(227,194,122,.16),0 24px 50px -28px #000}
.mq-i img{height:100%;width:auto;display:block}
.mq-i figcaption{position:absolute;left:14px;bottom:10px;font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--gold);text-shadow:0 1px 8px #000}
@keyframes mqL{to{transform:translateX(-50%)}}@keyframes mqR{from{transform:translateX(-50%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.mq-t{animation:none}.mq{overflow-x:auto}}

/* v27 — try-it glass demo, weather inside the glass, feature tiles, comparison */
.try-sec{padding:110px 0 90px;position:relative;z-index:1}
.try-head{max-width:720px;margin:0 auto 44px;text-align:center}.try-head h2{margin-bottom:18px}.try-head p{margin:0 auto;font-size:16px}
.try{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:44px;align-items:center}
.try-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.try-chips button{font-size:13px;font-weight:600;color:#e9e0c8;background:rgba(255,236,190,.05);border:1px solid rgba(227,194,122,.25);border-radius:999px;padding:10px 18px;transition:all .3s}
.try-chips button.on{color:#1a1204;border-color:transparent;background:linear-gradient(110deg,#b88a38,#f6dc98,#e3c27a);box-shadow:0 0 26px -6px rgba(227,174,70,.7)}
.try-say{font-size:13px;margin:0 0 8px}.try-say code,.cmp-col code{font:600 12.5px/1.5 ui-monospace,Menlo,monospace;color:#f3ead2;background:rgba(227,194,122,.09);border:1px solid rgba(227,194,122,.25);border-radius:8px;padding:5px 9px}
.try-desc{font-size:15px;min-height:50px}
.lg{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;counter-reset:l}
.lg li{counter-increment:l;position:relative;padding-left:40px;font-size:13.5px;line-height:1.5;color:#b9b19c}.lg li b{display:block;color:#f7f1e4;font-size:14px}
.lg li::before,.pin{content:counter(l);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 12px/1 "BBB Sans",Arial,sans-serif;color:#1a1204;background:linear-gradient(140deg,#f3e3a4,#c9a850);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.lg li::before{position:absolute;left:0;top:1px}
.try-demo{position:relative;border-radius:34px;padding:0}
.pin{position:absolute;z-index:6}.p1{left:6%;top:30%}.p2{right:-10px;top:12%}.p3{right:12%;bottom:14%}.p4{left:-10px;bottom:10%}
/* the screen */
.ui{position:relative;height:420px;border-radius:30px;overflow:hidden;isolation:isolate;box-shadow:0 40px 80px -40px #000,inset 0 0 0 1px rgba(227,194,122,.2);--tint:rgba(190,150,255,.12);--tint2:rgba(80,40,140,.18);--ink:#fff;--accent:#ffe6a8;--btn:#fff;--btnink:#1a1228;--edge:rgba(255,255,255,.4);--blur:16px}
.ui-art{position:absolute;inset:-4%;z-index:0;background:url(assets/glass-sky.webp) center/cover;filter:saturate(1.05) brightness(.82) hue-rotate(-8deg);transition:filter 1s,opacity 1s}
.ui-slab{position:absolute;left:5%;right:5%;top:8%;bottom:8%;z-index:2;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,var(--tint),var(--tint2));backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -30px 50px -34px rgba(0,0,0,.45),0 24px 50px -22px rgba(0,0,0,.7);transition:background .9s,border-color .9s}
.ui-content{position:relative;z-index:4;height:100%;padding:24px 24px 22px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.ui-row{display:flex;justify-content:space-between;align-items:center}
.ui-pill{font:700 9.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
.ui-time{font:600 13px/1 "BBB Sans",Arial,sans-serif;opacity:.85}
.ui-h{font-size:clamp(26px,3.2vw,36px);line-height:1.08;letter-spacing:-.035em;font-weight:600;margin-top:4px}
.ui-h em{font-family:var(--serif);font-weight:400;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--accent)!important}
.ui-who{display:flex;align-items:center;gap:0;font-size:12.5px}.ui-who span{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.65);margin-right:-8px}
.ui-who .a1{background:linear-gradient(135deg,#f6b26b,#e06666)}.ui-who .a2{background:linear-gradient(135deg,#76a5af,#3d85c6)}.ui-who .a3{background:linear-gradient(135deg,#b4a7d6,#8e7cc3)}.ui-who small{margin-left:18px;font-size:12.5px;opacity:.9}
.ui-btns{display:flex;gap:10px;margin-top:auto}
.ui-go{font:700 13px/1 "BBB Sans",Arial,sans-serif;padding:13px 20px;border-radius:999px;background:var(--btn);color:var(--btnink);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.ui-no{font:600 13px/1 "BBB Sans",Arial,sans-serif;padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1)}
/* weather INSIDE the glass */
.wx{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s}
.wx-a{background:radial-gradient(1.6px 2.2px at 12% 18%,rgba(255,255,255,.75),transparent 60%),radial-gradient(1.4px 2px at 28% 62%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.8px 2.6px at 47% 30%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.4px 2px at 63% 78%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1.8px 2.6px at 78% 22%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.4px 2px at 88% 58%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.6px 2.2px at 38% 86%,rgba(255,255,255,.6),transparent 60%);}
.wx-b{background:repeating-linear-gradient(104deg,transparent 0 22px,rgba(255,255,255,.12) 22px 23px,transparent 23px 58px);background-size:70px 70px}
.wx-c{background:radial-gradient(90% 60% at 50% 110%,rgba(255,255,255,.22),transparent 70%)}
[data-look=atmos] .wx-a,[data-look=atmos] .wx-b,[data-look=atmos] .wx-c{opacity:1}
[data-look=atmos] .wx-b{animation:wxr 2.4s linear infinite}@keyframes wxr{to{background-position:-26px 70px}}
[data-look=atmos] .wx-a{animation:wxd 6s ease-in-out infinite alternate}@keyframes wxd{to{transform:translateY(10px)}}
/* crystal = frost + travelling sheen */
[data-look=crystal] .wx-a{opacity:1;background:radial-gradient(60% 40% at 0% 0%,rgba(255,255,255,.34),transparent 70%),radial-gradient(60% 40% at 100% 100%,rgba(190,225,255,.3),transparent 70%)}
[data-look=crystal] .wx-b{opacity:1;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);background-size:250% 100%;animation:wxs 5.5s ease-in-out infinite}@keyframes wxs{0%{background-position:120% 0}100%{background-position:-20% 0}}
[data-look=crystal] .wx-c{opacity:1;background:linear-gradient(to bottom,rgba(255,255,255,.1),transparent 30%,rgba(120,170,230,.12))}
/* sunlit = warm light drifting through frosted glass */
[data-look=sun] .wx-a{opacity:1;background:radial-gradient(70% 55% at 80% 0%,rgba(255,236,180,.55),transparent 70%);animation:wxg 7s ease-in-out infinite alternate}@keyframes wxg{to{transform:translate(-8%,6%)}}
[data-look=sun] .wx-b{opacity:1;background:linear-gradient(120deg,transparent 30%,rgba(255,244,210,.3) 46%,transparent 62%);background-size:260% 100%;animation:wxs 8s ease-in-out infinite}
[data-look=sun] .wx-c{opacity:1;background:radial-gradient(80% 50% at 20% 100%,rgba(255,200,130,.28),transparent 70%)}
/* look variables */
[data-look=crystal] .ui{--tint:rgba(190,225,255,.16);--tint2:rgba(110,160,225,.1);--accent:#cfe6ff;--edge:rgba(220,240,255,.55);--blur:12px}
[data-look=crystal] .ui-art{filter:saturate(.8) brightness(.78) hue-rotate(150deg)}
[data-look=sun] .ui{--tint:rgba(255,248,226,.46);--tint2:rgba(255,226,170,.28);--ink:#2b1a08;--accent:#8a4a10;--edge:rgba(255,255,255,.7);--btn:#2b1a08;--btnink:#fff3dc;--blur:14px}
[data-look=sun] .ui-art{filter:saturate(1.1) brightness(1.15) sepia(.5) hue-rotate(-12deg)}
[data-look=sun] .ui-pill{background:rgba(255,255,255,.5);border-color:rgba(80,50,10,.25)}[data-look=sun] .ui-no{border-color:rgba(43,26,8,.4);background:rgba(255,255,255,.35)}[data-look=sun] .ui-who span{border-color:rgba(255,255,255,.9)}
/* generic Liquid-Glass-style panel for the comparison */
[data-look=liquid] .ui{--tint:rgba(255,255,255,.2);--tint2:rgba(255,255,255,.12);--edge:rgba(255,255,255,.6);--blur:22px}
[data-look=liquid] .ui-art{filter:saturate(1.7) brightness(1.2) hue-rotate(-40deg)}
[data-look=liquid] .ui-pill{background:rgba(255,255,255,.3)}
.try[data-look] .ui-slab,.cmp .ui-slab{transition:background .9s}
/* hover a legend item to spotlight it */
.try:has(.lg-1:hover) .ui-slab{outline:2px solid rgba(247,214,120,.0)}
.try:has(.lg-1:hover) .ui-content{filter:drop-shadow(0 0 14px rgba(247,214,120,.55))}
.try:has(.lg-2:hover) .ui-slab{box-shadow:0 0 0 2px rgba(247,214,120,.7),0 24px 50px -22px #000}
.try:has(.lg-3:hover) .wx{filter:brightness(1.6)}
.try:has(.lg-4:hover) .ui-art{filter:brightness(1.3) saturate(1.3)}
/* feature tiles */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:70px}
.feat article{padding:26px 22px 24px;border-radius:24px;background:linear-gradient(160deg,rgba(255,236,190,.06),rgba(255,236,190,.015));box-shadow:inset 0 0 0 1px rgba(227,194,122,.16)}
.feat svg{width:44px;height:44px;fill:none;stroke:#e8cf8a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.feat h3{font-size:20px;margin:0 0 8px;letter-spacing:-.025em}.feat p{font-size:14px;line-height:1.55;margin:0}
/* comparison */
.cmp{margin-top:96px;text-align:center}.cmp h3{font-size:clamp(26px,3.4vw,40px);margin:0 0 34px;letter-spacing:-.03em}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align:left}.cmp-col p{font-size:14px;margin:14px 0 0}.cmp-col code{display:block;margin-bottom:14px;padding:9px 12px}
.cmp-col.best code{border-color:rgba(227,194,122,.55);background:rgba(227,194,122,.14)}.cmp .ui{height:360px}
.cmp-note{font-size:12px!important;color:#8d8570;margin:26px 0 12px!important}
@media(max-width:900px){.try{grid-template-columns:1fr;gap:28px}.feat{grid-template-columns:1fr 1fr}.cmp-row{grid-template-columns:1fr}.try-sec{padding:70px 0}.pin{display:none}}
@media(max-width:520px){.feat{grid-template-columns:1fr}.ui{height:380px}}
@media(prefers-reduced-motion:reduce){.wx,.wx *{animation:none!important}}

/* v28: glass explainer = real working examples; scroll-linked header reveals */
.gx-ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:12px}
.ex-card{margin:0}
.ex-stage{position:relative;aspect-ratio:4/3.4;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -28px #000,0 0 0 1px rgba(227,194,122,.22);isolation:isolate}
.ex-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--bp);transform:scale(1.25);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ex-card:hover .ex-stage>img{transform:scale(1.32)}
.ex-card figcaption{padding:14px 6px 0;color:#bdb49e;font-size:14px;line-height:1.4}
.ex-card figcaption b{display:block;color:#f6efe0;font-size:17px;letter-spacing:-.02em;margin-bottom:2px}
.gx .m-nav,.gx .m-card,.gx .m-pc,.gx .m-tab{background:linear-gradient(150deg,rgba(var(--b),.26),rgba(255,255,255,.09));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 30px -12px rgba(0,0,0,.5);color:#fff;transition:background .5s,box-shadow .5s}
.gx{--b:227,174,70}
.m-nav{position:absolute;left:6%;right:6%;top:9%;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:999px;font-size:clamp(10px,1vw,13px);font-weight:600}
.m-nav span{opacity:.9}.m-nav .m-btn{margin-left:auto;background:#fff;color:#1a1308;padding:6px 13px;border-radius:999px;font-weight:700}
.m-logo{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgb(var(--b)))}
.m-hero{position:absolute;left:9%;bottom:12%;font-size:clamp(26px,3.4vw,44px);font-weight:700;letter-spacing:-.04em;line-height:.98;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.m-card{position:absolute;left:9%;right:9%;bottom:10%;padding:18px 20px;border-radius:22px;display:grid;gap:7px}
.m-card small{font-size:10px;letter-spacing:.14em;opacity:.85}.m-card b{font-size:clamp(18px,2vw,24px);letter-spacing:-.03em}
.m-row{display:flex;align-items:center;gap:5px;font-size:12px;opacity:.92}.m-row i{width:20px;height:20px;border-radius:50%;margin-right:-10px;border:2px solid rgba(255,255,255,.7);background:linear-gradient(135deg,#f6c28b,#c97b8e)}.m-row i:nth-child(2){background:linear-gradient(135deg,#9ad0e8,#5b7fc4)}.m-row i:nth-child(3){background:linear-gradient(135deg,#cdb6f0,#8a6fc7);margin-right:8px}
.m-card .m-btn{justify-self:start;margin-top:4px;background:#fff;color:#1a1308;font-weight:700;font-size:13px;padding:9px 18px;border-radius:999px}
.ex-stage.ph{display:grid;grid-template-columns:100%;place-items:center}
.m-phone{position:relative;width:46%;aspect-ratio:9/17.5;border-radius:26px;background:#000;padding:5px;box-shadow:0 0 0 2px #3a3a3e,0 24px 50px -14px #000;overflow:hidden}
.m-phone::before{content:'';position:absolute;inset:5px;border-radius:21px;background:url(assets/glass-sky.webp) 62% 40%/cover}
.m-notch{position:absolute;top:10px;left:50%;width:34%;height:9px;border-radius:9px;background:#000;transform:translateX(-50%);z-index:3}
.m-pc{position:absolute;left:12px;right:12px;top:30%;padding:11px;border-radius:15px;font-size:11px;display:grid;gap:3px;z-index:2}.m-pc small{font-size:8px;letter-spacing:.14em;opacity:.8}.m-pc b{font-size:15px;letter-spacing:-.03em;line-height:1.1}
.m-tab{position:absolute;left:10px;right:10px;bottom:10px;height:15%;border-radius:20px;display:flex;justify-content:space-around;align-items:center;z-index:2}
.m-tab span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;opacity:.7}.m-tab span.on{opacity:1;background:rgba(255,255,255,.28);box-shadow:0 0 14px rgba(var(--b),.8)}
.m-tab svg{width:14px;height:14px;fill:#fff}
.gx-note{text-align:center;color:#a89f88;font-size:14px;margin:6px 0 34px}.gx-note code{color:#f6dc98}
@media(max-width:1000px){.gx-ex{grid-template-columns:1fr}.ex-stage{aspect-ratio:16/11}.m-phone{width:34%}}
.gx-head p{max-width:520px}
/* header reveals tied to scroll */
html.anim .gl-head{--gh:1}
html.anim .gl-head .eyebrow{display:block;opacity:calc(var(--gh)*1.6 - .2);transform:translateY(calc((1 - var(--gh))*24px));letter-spacing:calc(.18em + (1 - var(--gh))*.5em)}
html.anim .gl-head .gl-h{opacity:1;transform:none;filter:none}
html.anim .gl-h .gw{display:inline-block;--a:clamp(0,calc(var(--gh)*3 - .2),1);opacity:var(--a);transform:translateY(calc((1 - var(--a))*50px));filter:blur(calc((1 - var(--a))*14px))}
html.anim .gl-h .bwm{--a:clamp(0,calc(var(--gh)*3 - 1),1);opacity:var(--a);transform:translateY(calc((1 - var(--a))*50px)) scale(calc(.9 + var(--a)*.1));filter:blur(calc((1 - var(--a))*14px))}
html.anim .gl-h em{display:inline-block;--a:clamp(0,calc(var(--gh)*3 - 1.8),1);opacity:var(--a);transform:translateY(calc((1 - var(--a))*50px));filter:blur(calc((1 - var(--a))*14px))}
html.anim .gl-head .gl-sub{opacity:clamp(0,calc(var(--gh)*4 - 3),1);transform:translateY(calc((1 - clamp(0,calc(var(--gh)*4 - 3),1))*22px))}

/* v29: calmer glass section — fewer gold buttons, see-through gold badges, real faces, animated icons & arrows */
.try-chips button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#efe8d6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.try-chips button.on{color:#fff;background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.07));border-color:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 24px -8px rgba(247,214,120,.5)}
.lg li::before,.pin{color:#fff3cf;font-weight:700;background:linear-gradient(150deg,rgba(247,214,120,.34),rgba(227,174,70,.10));border:1px solid rgba(255,236,170,.55);-webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 14px -2px rgba(247,214,120,.45);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.pin{width:26px;height:26px}
.ui-who span{overflow:hidden;background:#222}.ui-who span img{width:100%;height:100%;object-fit:cover;display:block}
.ui-who .a1,.ui-who .a2,.ui-who .a3{background:#222}
.ui-go{display:inline-flex;align-items:center;gap:8px}
.ui-go .ck{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:ckdraw 3.2s ease-in-out infinite}
@keyframes ckdraw{0%,12%{stroke-dashoffset:24}34%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
/* real rain footage inside the pane */
.wx-v{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:0;filter:contrast(1.15) brightness(1.1)}
[data-look=atmos] .wx-v{opacity:.8;filter:contrast(1.5) brightness(.95)}
[data-look=atmos] .wx-a,[data-look=atmos] .wx-b{display:none}
.wx-v{border-radius:inherit}
/* animated icon tiles */
.feat .ic{width:52px;height:52px;overflow:visible}
.feat .ic *{vector-effect:non-scaling-stroke}
.ic-layers .l1{animation:icL1 3.6s ease-in-out infinite}.ic-layers .l3{animation:icL3 3.6s ease-in-out infinite}
@keyframes icL1{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes icL3{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.ic-layers .l1{fill:rgba(232,207,138,.28)}.ic-layers .l2{fill:rgba(232,207,138,.14)}
.ic-rain .d1,.ic-rain .d2,.ic-rain .d3{stroke-dasharray:5 14;animation:icR 1.1s linear infinite}.ic-rain .d2{animation-delay:-.4s}.ic-rain .d3{animation-delay:-.75s}
@keyframes icR{from{stroke-dashoffset:19}to{stroke-dashoffset:0}}
.ic-sw rect{fill:rgba(232,207,138,.10);animation:icSwT 3.4s ease-in-out infinite}.ic-sw .kn{fill:#e8cf8a;stroke:none;animation:icSwK 3.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes icSwK{0%,35%{transform:translateX(0)}50%,85%{transform:translateX(18px)}100%{transform:translateX(0)}}
@keyframes icSwT{0%,35%{fill:rgba(232,207,138,.10)}50%,85%{fill:rgba(232,207,138,.45)}100%{fill:rgba(232,207,138,.10)}}
.ic-ph{transform-origin:50% 60%;animation:icPh 4s ease-in-out infinite}.ic-ph .bar{fill:#e8cf8a;stroke:none;opacity:.8}
@keyframes icPh{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}65%{transform:rotate(7deg)}}
.feat article:hover .ic{filter:drop-shadow(0 0 10px rgba(247,214,120,.55))}
/* arrows: one friendly animated glyph everywhere (replaces the thin diagonal mark) */
.go{position:relative;overflow:hidden;-webkit-mask:none;mask:none;border-radius:50%;background:linear-gradient(145deg,rgba(255,243,207,.95),#e3c27a 60%,#b88a38);filter:drop-shadow(0 0 8px rgba(247,214,120,.3))}
.go::before,.go::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%231a1204' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/58% no-repeat;transition:transform .45s cubic-bezier(.2,.9,.25,1);animation:goNudge 3.6s ease-in-out infinite}
.go::after{transform:translate(-110%,110%);animation:none}
a:hover .go::before,.button:hover .go::before{transform:translate(110%,-110%);animation:none}
a:hover .go::after,.button:hover .go::after{transform:translate(0,0)}
@keyframes goNudge{0%,70%,100%{transform:translate(0,0)}80%{transform:translate(14%,-14%)}90%{transform:translate(-3%,3%)}}
.go.dn{transform:rotate(135deg)}a:hover .go,.button:hover .go{transform:none}a:hover .go.dn,.button:hover .go.dn{transform:rotate(135deg)}
.button .go{background:#14180e}.button .go::before,.button .go::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23f6dc98' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.go::before,.ui-go .ck,.feat .ic *,.ic-ph{animation:none!important}.ui-go .ck{stroke-dashoffset:0}}
.ui-who span{width:36px;height:36px;margin-right:-10px;border-width:2.5px}.ui-who small{margin-left:20px}

/* v30: calmer forest button, living notebook, fairy light, no line ahead of the reader, lit closing CTA */
.button.forest{background:linear-gradient(115deg,#0b2417 0%,#1b4d31 35%,#235f3b 52%,#1a4a2d 70%,#0d2a1a 100%);box-shadow:inset 0 1px 0 rgba(220,245,210,.32),inset 0 -8px 16px rgba(0,0,0,.35),0 10px 34px -8px rgba(40,120,70,.5),0 0 calc(var(--fg,0)*46px) -4px rgba(150,230,150,calc(var(--fg,0)*.55)),0 0 0 1px rgba(0,0,0,.4)}
.button.forest::after{display:none}
.button.forest:hover{background:linear-gradient(115deg,#0d2c1c 0%,#215a38 35%,#2b7048 52%,#1d5233 70%,#10331f 100%)}
.film-cta{position:relative}
.film-cta .nb-mock{animation:nbFloat 6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes nbFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
.fairy{position:absolute;inset:-40px -20px -30px -20px;pointer-events:none;z-index:2;opacity:calc(.25 + var(--fg,0)*.75)}
.fairy i{position:absolute;left:var(--x);bottom:12%;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff8d6 0%,#f6dc7e 40%,rgba(246,220,126,0) 72%);box-shadow:0 0 10px 2px rgba(246,220,126,.55);opacity:0;animation:fairy var(--t) ease-in-out var(--d) infinite}
@keyframes fairy{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}50%{transform:translate(14px,-46px) scale(1)}85%{opacity:.7}100%{opacity:0;transform:translate(-10px,-96px) scale(.5)}}
svg.storyline .base{stroke:none!important;opacity:0}
/* closing */
.end-in p.end-sub{font-size:clamp(20px,2.6vw,34px);letter-spacing:-.02em;max-width:none;margin:30px auto 30px;background:linear-gradient(100deg,#a47f34,#f6dc98 30%,#fff3cf 50%,#e3c27a 70%,#a47f34);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:subShine 7s linear infinite}
@keyframes subShine{to{background-position:-220% 0}}
.end-in p.end-note{font-size:13px;color:#a89f88;margin:16px auto 0}
.end .giant{margin-bottom:10px}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.button.cta-lit{position:relative;isolation:isolate;font-size:clamp(16px,1.6vw,20px);padding:18px 30px;border:1px solid rgba(247,214,120,calc(.25 + var(--lit,0)*.6));background:linear-gradient(160deg,rgba(255,236,190,.10),rgba(255,236,190,.03));color:#fff3cf;box-shadow:0 0 calc(12px + var(--lit,0)*70px) calc(var(--lit,0)*6px) rgba(247,214,120,calc(.12 + var(--lit,0)*.5)),inset 0 0 calc(var(--lit,0)*30px) rgba(247,214,120,calc(var(--lit,0)*.25));transition:transform .3s}
.button.cta-lit::before{content:'';position:absolute;inset:-3px;border-radius:inherit;padding:3px;z-index:-1;background:conic-gradient(from var(--ang),transparent 0 55%,rgba(255,243,207,.95) 72%,#f6c95a 80%,transparent 92%);-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);opacity:calc(.35 + var(--lit,0)*.65);animation:ang 3.4s linear infinite}
@keyframes ang{to{--ang:360deg}}
.button.cta-lit::after{display:none}
.button.cta-lit:hover{transform:translateY(-3px) scale(1.03)}
@media(prefers-reduced-motion:reduce){.fairy i,.film-cta .nb-mock,.button.cta-lit::before,.end-in p.end-sub{animation:none!important}}
.storyline .trail{display:none!important}

.p1{left:-12px!important;top:42%!important}

/* v31: full-screen intro with sound, selected-work scroll scene with gold logos and rising art */
.intro-fs{position:relative;z-index:1;background:#000}
.ifs-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050403}
.anim .intro-fs{height:250svh}
.anim .ifs-stage{position:sticky;top:0;height:100svh;aspect-ratio:auto}
.ifs-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--io,1);transform:scale(calc(1.04 - var(--io,1)*.04));transition:none}
.ifs-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(5,4,3,.82),transparent 38%),radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(5,4,3,.55));opacity:var(--io,1)}
.ifs-cap{position:absolute;left:clamp(20px,5vw,80px);bottom:clamp(26px,7svh,70px);z-index:2;opacity:var(--ic,1);transform:translateY(calc((1 - var(--ic,1))*28px))}
.ifs-cap small{display:block;font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--gold)}
.ifs-cap b{display:block;font-size:clamp(30px,5vw,84px);letter-spacing:-.04em;color:#fff6dd;margin-top:8px;line-height:1}
.ifs-snd{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(26px,7svh,70px);z-index:3;display:inline-flex;align-items:center;gap:12px;padding:13px 20px 13px 16px;border-radius:999px;color:#fff6dd;font:600 14px/1 inherit;font-family:inherit;border:1px solid rgba(255,255,255,.35);background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 34px -12px rgba(0,0,0,.7);cursor:pointer;opacity:var(--ic,1);transition:transform .3s}
.ifs-snd:hover{transform:translateY(-2px) scale(1.04)}
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:18px}.eq i{width:3px;height:5px;border-radius:2px;background:#f6dc98;transition:height .3s}
.ifs-snd.on .eq i{animation:eq 1s ease-in-out infinite}.ifs-snd.on .eq i:nth-child(2){animation-delay:-.3s}.ifs-snd.on .eq i:nth-child(3){animation-delay:-.6s}.ifs-snd.on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:18px}}
.hero8{grid-column:span 8;aspect-ratio:16/9}
@media(max-width:900px){.hero8{grid-column:span 12}}
.work{position:relative;z-index:1}
.anim .work{height:560svh}
.wk-stage{position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(20px,4vw,70px);padding:60px clamp(20px,5vw,80px)}
.anim .wk-stage{position:sticky;top:0;height:100svh;padding:0 clamp(20px,5vw,80px);overflow:hidden}
.wk-left .eyebrow{display:block;margin-bottom:18px}
.wk-logos{position:relative;min-height:clamp(170px,24vw,340px)}
.wk-logo{display:grid;align-content:center;justify-items:start;gap:14px;padding:10px 0}
.anim .wk-logo{position:absolute;inset:0;opacity:0;transform:translateY(46px) scale(.93);filter:blur(18px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1s ease}
.anim .wk-logo.on{opacity:1;transform:none;filter:none}
.wk-mark{position:relative;display:block}
.wk-mark .wk-t{display:block;font-weight:800;font-size:clamp(46px,8.2vw,148px);line-height:.95;letter-spacing:-.045em;background:linear-gradient(105deg,#8f6a28 0%,#e8cf8a 22%,#fff6d8 38%,#e3c27a 52%,#b88a38 70%,#f6dc98 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 26px rgba(247,214,120,.35));animation:wkShine 6s linear infinite}
@keyframes wkShine{to{background-position:-260% 0}}
.wk-mark.img{width:min(100%,560px);aspect-ratio:var(--ar,3/1);background:linear-gradient(105deg,#8f6a28 0%,#e8cf8a 22%,#fff6d8 38%,#e3c27a 52%,#b88a38 70%,#f6dc98 100%);background-size:260% 100%;-webkit-mask:var(--m) left center/contain no-repeat;mask:var(--m) left center/contain no-repeat;filter:drop-shadow(0 0 26px rgba(247,214,120,.4));animation:wkShine 6s linear infinite}
.wk-mark.img .wk-t{display:none}
.wk-logo::before{content:'';position:absolute;left:-10%;top:50%;width:80%;aspect-ratio:2/1;transform:translateY(-50%) scale(.4);background:radial-gradient(closest-side,rgba(247,214,120,.35),transparent 70%);opacity:0;pointer-events:none}
.anim .wk-logo.on::before{animation:wkBloom 1.8s ease-out}
@keyframes wkBloom{0%{opacity:0;transform:translateY(-50%) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(1.5)}}
.wk-logo small{font-size:11px;letter-spacing:.18em;color:#a89f88;text-transform:uppercase}
.wk-idx{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.wk-idx li{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6c654f;transition:color .6s,text-shadow .6s}
.wk-idx li.on{color:#f6dc98;text-shadow:0 0 18px rgba(247,214,120,.6)}
.wk-right{position:relative;height:100%;min-height:60svh}
.anim .wk-right{-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.wk-view{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.anim .wk-view{position:absolute;left:0;right:0;top:0}
.wk-col{display:flex;flex-direction:column;gap:18px;will-change:transform}
.wk-b{margin-top:16svh}
.wk-tile{position:relative;margin:0;border-radius:22px;overflow:hidden;background:#07050a;box-shadow:0 30px 60px -28px #000,0 0 0 1px rgba(227,194,122,.22),0 0 60px -26px rgba(227,174,70,.4)}
.wk-tile img{width:100%;height:100%;object-fit:cover;display:block}
.wk-tile.t-l{aspect-ratio:4/5}.wk-tile.t-m{aspect-ratio:1}.wk-tile.t-m.ph{aspect-ratio:9/14}.wk-tile.t-s{aspect-ratio:16/10}
.wk-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;font-size:10px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:#f6dc98;background:linear-gradient(to top,rgba(5,4,3,.8),transparent)}
.wk-parts{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.wp{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff8d6 0%,#f6dc7e 42%,rgba(246,220,126,0) 72%);box-shadow:0 0 12px 3px rgba(246,220,126,.5);opacity:0;animation:wpUp var(--t) linear var(--d) infinite}
@keyframes wpUp{0%{opacity:0;transform:translate(0,0)}12%{opacity:.95}80%{opacity:.6}100%{opacity:0;transform:translate(24px,-110svh)}}
@media(max-width:900px){.wk-stage{grid-template-columns:1fr}.anim .wk-stage{grid-template-rows:34svh 1fr;gap:0;align-content:start;padding-top:9svh}.wk-logos{min-height:20svh}.wk-mark .wk-t{font-size:clamp(40px,13vw,80px)}.wk-idx{display:none}.wk-right{min-height:50svh}.wk-view{gap:12px}.wk-col{gap:12px}.wk-tile{border-radius:16px}}
@media(prefers-reduced-motion:reduce){.wp,.wk-mark .wk-t,.wk-mark.img,.anim .wk-logo.on::before{animation:none!important}}

/* v32: bigger Bespoke wordmark, no period, body copy sized to its width */
.hs-a h1 .bwm{height:.94em;vertical-align:-.06em;margin-top:.04em}
.hs-a h1 .bwm img{filter:drop-shadow(0 0 14px rgba(247,220,126,.45)) drop-shadow(0 0 46px rgba(227,174,70,.32))}
.hs-a .hero-copy>p{max-width:min(100%,calc(clamp(78px,10.4vw,176px)*4.35));font-size:clamp(16px,1.55vw,22px);line-height:1.55;color:#e6dcc3}

/* v33: hero sound, magic-prompt note */
.hero-snd{position:fixed;opacity:0;pointer-events:none;right:clamp(16px,3.4vw,56px);bottom:clamp(22px,6svh,60px);z-index:60;display:inline-flex;align-items:center;gap:11px;padding:12px 18px 12px 15px;border-radius:999px;color:#fff6dd;font:600 13px/1 inherit;font-family:inherit;border:1px solid rgba(255,255,255,.32);background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -12px rgba(0,0,0,.7);cursor:pointer;transition:transform .3s,box-shadow .3s}
.hero-snd:hover{transform:translateY(-2px) scale(1.04)}
.hero-snd.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 26px -4px rgba(246,220,152,.45),0 12px 30px -12px rgba(0,0,0,.7)}
.hero-snd.on .eq i{animation:eq 1s ease-in-out infinite}.hero-snd.on .eq i:nth-child(2){animation-delay:-.3s}.hero-snd.on .eq i:nth-child(3){animation-delay:-.6s}.hero-snd.on .eq i:nth-child(4){animation-delay:-.15s}
.mp-note{margin:-4px 0 0;font-size:15px;font-style:italic;color:#a9a392;letter-spacing:.01em}
.hero-snd.show{opacity:1;pointer-events:auto}
.hero-snd{transition:transform .3s,box-shadow .3s,opacity .5s}

/* v34: hero audience line */
.hero-copy>p.hero-for{margin:-6px 0 26px;font-size:clamp(13px,1.05vw,15px);font-weight:600;letter-spacing:.05em;color:#e3c27a;max-width:none}

/* v35: Deep Glass look (replaces Sunlit tab) */
[data-look=deep] .wx-a{opacity:1;background:radial-gradient(70% 55% at 85% 0%,rgba(150,110,255,.5),transparent 70%),radial-gradient(60% 45% at 5% 100%,rgba(227,194,122,.28),transparent 70%);animation:wxg 8s ease-in-out infinite alternate}
[data-look=deep] .wx-b{opacity:1;background:linear-gradient(120deg,transparent 34%,rgba(255,236,190,.3) 48%,transparent 60%);background-size:260% 100%;animation:wxs 7s ease-in-out infinite}
[data-look=deep] .wx-c{opacity:1;background:linear-gradient(to bottom,rgba(120,90,220,.14),transparent 35%,rgba(30,12,70,.25))}
[data-look=deep] .ui{--tint:rgba(70,40,130,.34);--tint2:rgba(30,16,70,.3);--accent:#f3d996;--edge:rgba(240,214,150,.65);--blur:16px}
[data-look=deep] .ui-art{filter:saturate(1.05) brightness(.62) hue-rotate(262deg)}

/* v36 · button arrows, full-page video fades, scroll story, portfolio depth, brand marks */
/* forest CTA: gold circle, dark-green arrow, always round */
.button.forest>span.fg-ar{width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;flex:none;aspect-ratio:1/1;box-sizing:border-box;border-radius:50%!important;padding:0!important;margin:0 0 0 .55em!important;display:inline-grid!important;place-items:center;overflow:hidden;font-size:0!important;line-height:0;background:linear-gradient(140deg,#f6e7ab,#d2b25a)!important;box-shadow:inset 0 0 0 1px rgba(255,244,200,.55),0 2px 8px rgba(0,0,0,.35)}
.button.forest>span.fg-ar svg{width:15px;height:15px;display:block}
/* full-page video ends fade into the next section */
.hero-film{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%)}
.intro-fs{background:#050403}
.ifs-stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34svh;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(5,4,3,0),rgba(5,4,3,.65) 55%,#050403)}
.ifs-stage::before{content:'';position:absolute;left:0;right:0;top:0;height:16svh;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(5,4,3,0),#050403)}
/* scroll story: bigger, brighter, framed pictures; every step says what it gives you */
.bs{max-width:min(460px,100%);margin:22px 0 0;font-size:clamp(15px,1.35vw,19px);line-height:1.5;color:#e9dfc6;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.bt-r .bs{margin-left:auto;text-align:right}
html.anim .s-flow .beat .bs{--bk:clamp(0,calc(var(--t)*6 - 1.7),1);opacity:var(--bk);transform:translateY(calc((1 - var(--bk))*16px))}
html.anim .s-flow .beat .giant{max-width:50%;font-size:clamp(40px,5.6vw,104px)}
html.anim .s-flow .beat .bi{width:min(36vw,500px,calc(66svh*.74))}
html.anim .s-flow .beat .bi-tall{width:min(30vw,calc(76svh*.56))}
html.anim .s-flow .beat .bi video,html.anim .s-flow .beat .bi img{-webkit-mask-image:none;mask-image:none;border-radius:22px;box-shadow:0 44px 90px -30px #000,0 0 0 1px rgba(227,194,122,.38),0 0 80px -34px rgba(227,174,70,.55)}
html.anim .s-flow .beat .bi-cut{padding:6% 8% 12%;border-radius:26px;background:linear-gradient(165deg,rgba(255,226,160,.16),rgba(255,226,160,.04) 55%,rgba(0,0,0,.25));box-shadow:0 44px 90px -34px #000,0 0 0 1px rgba(227,194,122,.34)}
html.anim .s-flow .beat .bi-cut{padding:0 0 10%;overflow:hidden}html.anim .s-flow .beat .bi-cut img{width:132%;max-width:none;margin:-4% -16% 0;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 26px #000b)}
html.anim .s-flow .beat .bi figcaption{left:0;right:0;bottom:0;margin:0;padding:34px 12px 14px;font-size:10.5px;color:#f6dc98;border-radius:0 0 22px 22px;background:linear-gradient(to top,rgba(5,4,3,.85),transparent)}
@media(max-width:1050px){html.anim .s-flow .beat .giant{max-width:100%}html.anim .s-flow .beat .bi,html.anim .s-flow .beat .bi-tall{top:34%;width:min(58vw,calc(44svh*.78));opacity:calc(var(--ee)*.9)}html.anim .s-flow .beat .bt{align-self:end;padding-bottom:7svh}html.anim .s-flow .beat .bi-r{right:50%;transform:translate(50%,-50%) scale(calc(.93 + .07*var(--ee)))}html.anim .s-flow .beat .bi-l{left:50%;transform:translate(-50%,-50%) scale(calc(.93 + .07*var(--ee)))}.bt-r .bs{margin-left:0;text-align:left}html.anim .s-flow .beat .bt-r .giant{margin-left:0}html.anim .s-flow .beat .bt-r{text-align:left}}
/* portfolio: staggered tiles, each floats and glows; smaller tiles drift behind */
.wk-tile{overflow:visible;animation:wkFloat var(--ft,8s) ease-in-out var(--fd,0s) infinite alternate}
.wk-tile img{border-radius:22px}
.wk-tile figcaption{border-radius:0 0 22px 22px}
.wk-tile::after{content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:0 0 52px 4px rgba(247,214,120,.42),inset 0 0 0 1px rgba(246,220,152,.55);opacity:0;animation:wkGlow var(--gt,6s) ease-in-out var(--gd,0s) infinite}
@keyframes wkFloat{from{translate:0 -9px}to{translate:0 11px}}
@keyframes wkGlow{0%,100%{opacity:0}50%{opacity:.9}}
.wk-a .wk-tile:nth-child(1){width:100%;--ft:9s;--gd:0s}.wk-a .wk-tile:nth-child(2){width:80%;margin-left:18%;--ft:7s;--fd:-2s;--gd:-2s}.wk-a .wk-tile:nth-child(3){width:92%;margin-left:3%;--ft:10s;--fd:-4s;--gd:-4s}.wk-a .wk-tile:nth-child(4){width:68%;margin-left:26%;--ft:8s;--fd:-1s;--gd:-1s}.wk-a .wk-tile:nth-child(5){width:86%;--ft:11s;--fd:-5s;--gd:-3s}.wk-a .wk-tile:nth-child(6){width:74%;margin-left:20%;--ft:9s;--fd:-3s;--gd:-5s}
.wk-b .wk-tile:nth-child(1){width:76%;margin-left:22%;--ft:8s;--fd:-2s;--gd:-1s}.wk-b .wk-tile:nth-child(2){width:100%;--ft:10s;--fd:-6s;--gd:-3s}.wk-b .wk-tile:nth-child(3){width:84%;margin-left:12%;--ft:7s;--fd:-1s;--gd:-5s}.wk-b .wk-tile:nth-child(4){width:70%;margin-left:28%;--ft:9s;--fd:-4s;--gd:-2s}.wk-b .wk-tile:nth-child(5){width:94%;--ft:11s;--fd:-2s;--gd:-4s}.wk-b .wk-tile:nth-child(6){width:78%;margin-left:16%;--ft:8s;--fd:-5s;--gd:-6s}
.wk-col{gap:clamp(22px,5svh,54px)}
.wk-deep{display:none}
html.anim .wk-deep{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
.wk-dcol{position:absolute;top:0;display:flex;flex-direction:column;gap:9svh;will-change:transform}
.wk-dcol.d1{left:-9%;width:30%}.wk-dcol.d2{right:-10%;width:32%}.wk-dcol.d3{left:36%;width:20%}
.wk-dt{margin:0;rotate:var(--r,0deg);opacity:.55;filter:blur(2.4px) brightness(.62) saturate(.9);animation:wkFloat var(--ft,9s) ease-in-out var(--fd,0s) infinite alternate}
.wk-dt:nth-child(odd){align-self:flex-end}
.wk-dt{width:calc(var(--w,100)*1%)}
.wk-dt img{display:block;width:100%;aspect-ratio:var(--ar,1);object-fit:cover;border-radius:16px}
.wk-view{position:relative;z-index:1}
@media(max-width:900px){.wk-dcol.d3{display:none}.wk-dcol.d1{left:-18%}.wk-dcol.d2{right:-20%}}
@media(prefers-reduced-motion:reduce){.wk-tile,.wk-dt,.wk-tile::after{animation:none!important}.wk-tile::after{opacity:0}}
/* brand names: marks with names, a soft even shine (no hard band) */
@keyframes wkShine2{to{background-position:200% 0}}
html .wk-mark .wk-t{background:linear-gradient(100deg,#b8923f 0%,#dcbc72 25%,#f0dba0 50%,#dcbc72 75%,#b8923f 100%);background-size:200% 100%;background-repeat:repeat-x;-webkit-background-clip:text;background-clip:text;animation:wkShine2 9s linear infinite;font-size:clamp(38px,6.4vw,112px);filter:drop-shadow(0 0 22px rgba(247,214,120,.22))}
.wk-mark .wk-ic{display:block;height:clamp(34px,4.2vw,66px);aspect-ratio:var(--ar,2);max-width:min(100%,520px);margin-bottom:clamp(12px,1.6vw,24px);background:linear-gradient(100deg,#b8923f 0%,#dcbc72 25%,#f0dba0 50%,#dcbc72 75%,#b8923f 100%);background-size:200% 100%;background-repeat:repeat-x;-webkit-mask:var(--ic) left center/contain no-repeat;mask:var(--ic) left center/contain no-repeat;animation:wkShine2 9s linear infinite;filter:drop-shadow(0 0 20px rgba(247,214,120,.28))}
@media(prefers-reduced-motion:reduce){html .wk-mark .wk-t,.wk-mark .wk-ic{animation:none!important}}
.end-in p.end-sub{text-wrap:balance}

/* v36b · sizing fixes */
html.anim .s-flow .beat .bi{width:min(36vw,500px,calc(66svh*.74))}
html.anim .s-flow .beat .bi-cut{padding:0 0 4%;overflow:hidden}
html.anim .s-flow .beat .bi-cut img{width:112%;max-width:none;margin:-3% -6% -9%;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 26px #000b)}
.wk-mark.named .wk-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wk-mark.named .wk-ic{height:auto;width:var(--w,min(44vw,600px));margin-bottom:0}
.wk-mark.named[data-slug=disney] .wk-ic{--w:min(26vw,340px)}
@media(max-width:900px){.wk-mark.named .wk-ic{--w:min(80vw,420px)}.wk-mark.named[data-slug=disney] .wk-ic{--w:min(56vw,280px)}}

/* v37 */
.feat .ic-wx{width:52px;height:52px;overflow:visible}
.ic-wx .wx-cloud{animation:wxCl 10s ease-in-out infinite;transform-origin:24px 24px}
.ic-wx .wx-rain{animation:wxRa 10s linear infinite;opacity:0}.ic-wx .wx-rain path{stroke-dasharray:5 14;animation:icR 1.1s linear infinite}.ic-wx .wx-rain .d2{animation-delay:-.4s}.ic-wx .wx-rain .d3{animation-delay:-.75s}
.ic-wx .wx-snow{animation:wxSn 10s ease-in-out infinite;opacity:0}.ic-wx .wx-snow path{animation:wxFl 2.2s ease-in-out infinite}.ic-wx .wx-snow path+path{animation-delay:-1.1s}
.ic-wx .wx-sun{animation:wxSu 10s ease-in-out infinite;opacity:0;transform-origin:24px 24px}.ic-wx .wx-sun circle{fill:rgba(247,214,120,.35)}
@keyframes wxCl{0%,50%{transform:none;opacity:1}62%{transform:translate(-10px,-6px) scale(.8);opacity:.5}80%{transform:translate(-10px,-6px) scale(.8);opacity:.5}92%,100%{transform:none;opacity:1}}
@keyframes wxRa{0%,6%{opacity:0}12%,28%{opacity:1}34%,100%{opacity:0}}
@keyframes wxSn{0%,32%{opacity:0}38%,52%{opacity:1}58%,100%{opacity:0}}
@keyframes wxSu{0%,54%{opacity:0;transform:rotate(0) scale(.6)}64%,82%{opacity:1;transform:rotate(30deg) scale(1)}92%,100%{opacity:0;transform:rotate(60deg) scale(.6)}}
@keyframes wxFl{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.feat .ic-dv{width:52px;height:52px;overflow:visible}.ic-dv circle{fill:#e8cf8a;stroke:none}
@media(prefers-reduced-motion:reduce){.ic-wx *{animation:none!important}.ic-wx .wx-rain,.ic-wx .wx-snow,.ic-wx .wx-sun{opacity:0}}
/* pins: bigger, solid, inside the picture */
.pin{width:32px;height:32px;font:800 15px/1 var(--gl-font-body,"BBB Sans",Arial,sans-serif);color:#1a1204!important;background:linear-gradient(150deg,#ffe9b8,#e3ae46)!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 0 0 3px rgba(10,8,4,.78),0 8px 18px rgba(0,0,0,.55)!important;transition:transform .3s}
.try .p1{left:7%;top:38%}.try .p2{right:7%;top:11%;left:auto}.try .p3{right:16%;bottom:20%}.try .p4{left:1.5%;top:1.5%;bottom:auto}
.try:has(.lg-1:hover) .p1,.try:has(.lg-2:hover) .p2,.try:has(.lg-3:hover) .p3,.try:has(.lg-4:hover) .p4{transform:scale(1.35)}
.wx-mode{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
.wx-mode button{font:600 13px/1 var(--gl-font-body,"BBB Sans",Arial,sans-serif);padding:9px 14px;border-radius:999px;color:#cfc7b3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);cursor:pointer}
.wx-mode button.on{color:#1a1204;background:linear-gradient(150deg,#ffe9b8,#e3ae46);border-color:transparent}
.wx-note{margin:0 0 12px;font-size:13px;line-height:1.5;color:#a89f88;max-width:46ch}
.wx-drops{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit}
.try:not([data-look=atmos]) .wx-drops,.try:not([data-look=atmos]) .wx-mode,.try:not([data-look=atmos]) .wx-note{display:none}
.try[data-drops="0"] .wx-drops{opacity:0}.try[data-air="0"] .wx-v{opacity:0!important}
.ui-slab{overflow:hidden}
/* work: lead + CTA */
.wk-lead{margin:26px 0 14px;max-width:34ch;font-size:15px;line-height:1.55;color:#cfc7b3}
.wk-cta{display:flex;gap:10px;flex-wrap:wrap}.wk-cta .button{font-size:14px;padding:11px 18px}

/* v38 */
.hero-ctl{position:fixed;right:clamp(16px,3.4vw,56px);bottom:clamp(22px,6svh,60px);z-index:60;display:flex;align-items:center;gap:10px}
.hero-ctl .hero-snd{position:static}
.hero-ctl .hero-skip{order:-1;opacity:0;pointer-events:none}
.hero-ctl .hero-snd.show~.hero-skip{opacity:1;pointer-events:auto}
.hero-skip .hk-i{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-skip .hk-r,.hero-skip[data-mode=replay] .hk-s{display:none}.hero-skip[data-mode=replay] .hk-r{display:block}
.has-film .hs-a .hero-copy{transition:opacity .9s ease}
.has-film.film-replay .hs-a .hero-copy{opacity:0}
.has-film.film-replay .hero-film video{opacity:1;filter:none}
@media(max-width:600px){.hero-ctl{gap:8px}.hero-ctl .hero-snd{padding:11px 14px 11px 12px}}

/* v38c: the dot draws the divider and the filters */
.catalog-controls{position:relative;border-top-color:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}
.catalog-controls::before,.catalog-controls::after{content:"";position:absolute;left:0;height:1px;width:var(--dx,100%);pointer-events:none;background:linear-gradient(90deg,rgba(227,194,122,.15),rgba(227,194,122,.6) 8%,rgba(227,194,122,.6));box-shadow:0 0 14px rgba(227,174,70,.4)}
.catalog-controls::before{top:-1px}
.catalog-controls::after{bottom:-1px;background:linear-gradient(90deg,rgba(227,194,122,.1),rgba(227,194,122,.28) 8%,rgba(227,194,122,.28));box-shadow:none}
.catalog-controls .filters button,.catalog-controls .search{opacity:var(--cr,1);transform:translateY(calc((1 - var(--cr,1))*14px));filter:blur(calc((1 - var(--cr,1))*6px));transition:opacity .25s,transform .25s,filter .25s,border-color .3s,color .3s,background .3s,box-shadow .3s}

/* v39: workbook mock-ups + cut-out tiles + mobile brand tiles */
.bento .product-art img.mock{position:relative!important;height:auto!important;width:auto!important;max-height:90%!important;max-width:84%!important;box-shadow:none!important;border-radius:0!important;object-fit:contain;filter:drop-shadow(0 24px 26px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(247,214,120,.16));animation:mockFloat 7s ease-in-out infinite alternate}
.bento .product-art img.mock.check-book{max-width:90%;max-height:78%}
@keyframes mockFloat{from{top:7px}to{top:-9px}}
.wk-tile.cut,.wk-dt.cut{display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 40%,rgba(247,214,120,.16),transparent 70%),linear-gradient(160deg,#120d07,#07050a)}
.wk-tile.cut{padding:9% 8% 14%}
.wk-tile.cut img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:0;filter:drop-shadow(0 22px 24px rgba(0,0,0,.7))}
.wk-dt.cut{border-radius:16px;padding:8%}.wk-dt.cut img{aspect-ratio:auto;object-fit:contain;border-radius:0}
.wk-brand{display:grid;place-items:center;align-content:center;gap:12px;padding:26px 14px;text-align:center;background:radial-gradient(80% 70% at 50% 35%,rgba(247,214,120,.14),transparent 70%),linear-gradient(160deg,#130e08,#07050a)}
.wk-brand .wk-ic{display:block;height:34px;width:calc(34px*var(--ar,1));max-width:80%;background:linear-gradient(105deg,#8f6a28 0%,#e8cf8a 22%,#fff6d8 38%,#e3c27a 52%,#b88a38 70%,#f6dc98 100%);background-size:200% 100%;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;animation:wkShine2 6s linear infinite}
.wk-brand.named .wk-ic{height:auto;width:76%;aspect-ratio:var(--ar,3);max-height:70px}.wk-brand.named b{display:none}
.wk-brand b{font:800 clamp(18px,5.4vw,24px)/1 inherit;font-family:inherit;letter-spacing:-.02em;background:linear-gradient(105deg,#e8cf8a,#fff6d8,#e3c27a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wk-brand::after{opacity:.0}
@media(max-width:900px){
 .anim .wk-stage{grid-template-rows:auto 1fr;padding-top:78px;gap:0}
 .wk-logos,.wk-idx,.wk-lead{display:none}
 .wk-left .eyebrow{margin-bottom:10px;font-size:10px}
 .wk-cta{gap:8px}.wk-cta .button{font-size:12px;padding:9px 13px}
 .anim .work{height:660svh}
 .anim .wk-right{-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}
}
/* v39b: container-relative sizing so art always fits its card */
.bento .product-art{container-type:size}
.bento .product-art img{height:88cqh!important;max-height:88cqh}
.bento .product-art img.mock.book{height:92cqh!important;width:auto!important;max-width:none!important;max-height:none}
.bento .product-art img.mock.check-book{width:88cqw!important;height:auto!important;max-width:none!important;max-height:80cqh!important}
.bento .product-art img.character{height:90cqh!important}
.bento .kit-art{width:78%!important}
.bento .kit-art b{font-size:clamp(18px,9.5cqh,34px);line-height:1.06}

/* ===== v40: glass hero period, frosted headings, with/without glass, flip tiles, digital mocks ===== */
.gl-per{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe2,#f7dc7e 38%,#d4a238 72%,#8f5f12);box-shadow:0 0 .16em .03em rgba(247,214,120,.5);opacity:var(--pv,1)}
.s-glass .l7 .pane{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:10px!important;padding:clamp(18px,3.4vw,34px)!important}
.s-glass .l7 .tiny{margin-bottom:auto}
.s-glass .l7 b{font-size:clamp(22px,3.1vw,38px);line-height:1.04}
.s-glass .l7 .l6p{margin:0;max-width:34ch;font-size:clamp(11px,1.15vw,14px);line-height:1.45;color:#eadfc3}
.s-glass .l7 .glass-pill{white-space:nowrap;display:inline-flex;align-items:center;margin-top:4px;font-size:clamp(10px,1vw,12px);padding:9px 16px;background:#fff6dd;color:#1a1204;border-color:transparent;font-weight:700}
/* frosted headings: black, a little gold light seeping in, then solid */
html.anim .frost-h{--gx:0;--a:calc(var(--gx)*128% - 26%);width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(100deg,#f6efdc 0,#f6efdc var(--a),#ffe29a calc(var(--a) + 5%),rgba(255,214,120,.5) calc(var(--a) + 11%),rgba(246,239,220,.16) calc(var(--a) + 26%),rgba(246,239,220,.09) 100%);-webkit-background-clip:text;background-clip:text;filter:blur(calc((1 - var(--gx))*6px)) drop-shadow(0 0 calc((1 - var(--gx))*16px) rgba(255,208,110,.5))}
html.anim .frost-h em{color:transparent;-webkit-text-fill-color:transparent;animation:none;background-size:100% 100%;background-image:linear-gradient(100deg,#e9d08c 0,#e9d08c var(--a),#fff0c0 calc(var(--a) + 5%),rgba(255,214,120,.5) calc(var(--a) + 11%),rgba(233,208,140,.16) calc(var(--a) + 26%),rgba(233,208,140,.09) 100%);-webkit-background-clip:text;background-clip:text}
/* with / without glass */
.ex-tog{display:flex;gap:4px;margin:14px 0 0;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);width:fit-content;max-width:100%}
.ex-tog button{font:700 12px/1 "BBB Sans",Arial,sans-serif;color:#d9cfb5;background:none;border:0;border-radius:999px;padding:9px 13px;cursor:pointer;transition:background .3s,color .3s;white-space:nowrap}
.ex-tog button[aria-pressed=true]{color:#1a1204;background:linear-gradient(110deg,#e3b04a,#ffe29a 55%,#e3b04a);box-shadow:0 6px 16px -6px rgba(227,174,70,.8)}
.ex-say{margin:6px 0 0;font-size:13px;line-height:1.45;color:#cfc6af;min-height:2.9em}.ex-say span{display:none}
.ex-card[data-m=glass] .sy-glass,.ex-card[data-m=plain] .sy-plain{display:inline}
.gx .m-nav,.gx .m-card,.gx .m-pc,.gx .m-tab{transition:background .8s,border-radius .8s,box-shadow .8s,border-color .8s,-webkit-backdrop-filter .8s,backdrop-filter .8s}
.ex-card[data-m=plain] .m-nav,.ex-card[data-m=plain] .m-card,.ex-card[data-m=plain] .m-pc,.ex-card[data-m=plain] .m-tab{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#26262b!important;border:1px solid #45454d!important;box-shadow:none!important;border-radius:10px!important}
.ex-card[data-m=plain] .m-tab span.on{background:#4a4a52;box-shadow:none}
.gx .m-nav span,.gx .m-hero{text-shadow:0 1px 10px rgba(0,0,0,.5)}
.gx .ex-card:nth-child(1) .m-nav{background-image:linear-gradient(rgba(10,8,4,.3),rgba(10,8,4,.3)),linear-gradient(150deg,rgba(var(--b),.3),rgba(255,255,255,.1))}
.gx .ex-card:nth-child(2) .m-card{background-image:linear-gradient(rgba(30,18,6,.46),rgba(30,18,6,.36)),linear-gradient(150deg,rgba(var(--b),.3),rgba(255,255,255,.1))}
.m-phone::before{background:url(assets/bg-night.webp) 40% 60%/cover!important}
/* three looks */
.look-card{margin:6px 0 18px;padding:18px 20px;border-radius:20px;background:linear-gradient(160deg,rgba(255,236,190,.08),rgba(255,236,190,.02));box-shadow:inset 0 0 0 1px rgba(227,194,122,.22)}
.look-card b{display:block;font-size:20px;letter-spacing:-.025em;color:#fff6dd;margin-bottom:6px}
.look-card p{margin:0 0 12px;font-size:15px;line-height:1.55;color:#dcd3bd}
.look-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px}
.look-card dt{color:#e3b04a;font-weight:700;letter-spacing:.08em;font-size:10.5px;text-transform:uppercase;padding-top:3px}.look-card dd{margin:0;color:#d3cab5;line-height:1.45}
.try:not([data-look=atmos]) .wx-mode,.try:not([data-look=atmos]) .wx-note{display:none}
.try[data-look=atmos] .ui-art{background-image:url(assets/bg-night.webp);filter:saturate(1.05) brightness(.9)}
.try[data-look=crystal] .ui-art{background-image:url(assets/bg-dusk.webp);filter:saturate(1) brightness(.78)}
.try[data-look=deep] .ui-art{background-image:url(assets/marble.jpg);filter:saturate(1.15) brightness(.7)}
/* mix two looks */
.mixs{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;margin-top:120px}
.mixs-copy h3,.vidd-head h3{font-size:clamp(28px,3.6vw,48px);line-height:1.06;letter-spacing:-.04em;margin:12px 0 16px;font-weight:600}
.mixs-copy p,.vidd-head p{color:#d8d0bb;font-size:16px;line-height:1.6;margin:0 0 18px}
.mixs-pts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mixs-pts li{padding:12px 16px;border-radius:16px;background:rgba(255,236,190,.05);box-shadow:inset 0 0 0 1px rgba(227,194,122,.18);color:#d3cab5;font-size:14px;line-height:1.45}
.mixs-pts b{display:block;color:#fff6dd;font-size:15px;margin-bottom:2px}
.mixs-stage{position:relative;aspect-ratio:4/3.3;border-radius:30px;overflow:hidden;box-shadow:0 40px 80px -40px #000,0 0 0 1px rgba(227,194,122,.25);isolation:isolate}
.mixs-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx-nav{position:absolute;left:7%;right:7%;top:7%;display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:999px;background:linear-gradient(150deg,rgba(190,225,255,.2),rgba(110,160,225,.1));-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(220,240,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);font-size:13px;font-weight:600;color:#fff;z-index:3}
.mx-nav i{font-style:normal;font-weight:800;letter-spacing:-.02em;margin-right:6px}
.mx-nav span.on{background:rgba(255,255,255,.24);padding:5px 12px;border-radius:999px;margin:-5px 0}
.mx-nav em,.mx-card>em{font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal}
.mx-nav em{margin-left:auto;opacity:.85}
.mx-card{position:absolute;left:7%;right:7%;top:27%;bottom:8%;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 24px 50px -22px #000}
.mx-card video,.vd-pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.85;filter:contrast(1.5) brightness(.95)}
.mx-card>em{position:absolute;right:14px;top:12px;z-index:3;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff}
.mx-in{position:relative;z-index:2;height:100%;padding:24px;display:flex;flex-direction:column;gap:10px;color:#fff}
.mx-in small{font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#f3d996}
.mx-in b{font-size:clamp(24px,3.4vw,40px);line-height:1.05;letter-spacing:-.04em;font-weight:600}
.mx-in b i{font-family:var(--serif);font-weight:400;color:#ffe6a8}
.mx-play{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:#fff;color:#1a1228;font:700 13px/1 "BBB Sans",Arial,sans-serif}
.mx-play svg{width:14px;height:14px;fill:currentColor}
/* video in glass vs a video player */
.vidd{margin-top:120px}.vidd-head{text-align:center;max-width:780px;margin:0 auto 40px}.vidd-head p{margin-left:auto;margin-right:auto}
.vidd-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.vd-stage{position:relative;aspect-ratio:4/3.2;border-radius:26px;overflow:hidden;isolation:isolate;box-shadow:0 30px 60px -28px #000,0 0 0 1px rgba(227,194,122,.22)}
.vd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.vd-box{position:absolute;left:11%;right:11%;top:13%;bottom:13%;background:#000;border-radius:3px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.vd-box video{width:100%;height:100%;object-fit:cover;display:block}
.vd-txt{position:absolute;left:18px;bottom:34px;z-index:2;color:#fff}
.vd-txt small{display:block;font:700 9.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#cfc6af;margin-bottom:6px}.vd-txt b{font-size:22px;letter-spacing:-.03em;text-shadow:0 1px 3px #000}
.vd-bar{position:absolute;left:0;right:0;bottom:0;height:24px;background:#141414;display:flex;align-items:center}.vd-bar i{display:block;margin-left:12px;width:52%;height:3px;background:#8b8b8b;border-radius:2px}
.vd-pane{position:absolute;left:11%;right:11%;top:13%;bottom:13%;border-radius:30px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -30px 50px -34px rgba(0,0,0,.45),0 24px 50px -22px #000}
.vd-pane .vd-txt{left:22px;bottom:24px}
.vd figcaption{margin-top:14px;color:#cfc6af;font-size:14px;line-height:1.5}.vd figcaption b{display:block;color:#fff6dd;font-size:17px;margin-bottom:3px}.vd.plain figcaption b{color:#cfc6af}
.vidd-note{text-align:center;color:#8d8570;font-size:12.5px;margin:22px 0 0}.vidd-note .text-link{margin-left:10px}
@media(max-width:900px){.mixs{grid-template-columns:1fr;margin-top:80px}.vidd{margin-top:80px}.vidd-row{grid-template-columns:1fr}}
/* tiles: no light patches, flip to details, badges, digital art */
.bento .product-art::before{display:none!important}
.product-art.lit,.bi.lit,.feature-media.lit{box-shadow:none!important}
.bento .product-art img.mock{filter:drop-shadow(0 24px 26px rgba(0,0,0,.6))!important}
.bento .product-art img.mock.glass-layers{width:94cqw!important;height:auto!important;max-width:none!important;max-height:92cqh!important;animation:none!important;top:0!important}
.wk-tile.cut,.wk-dt.cut{background:linear-gradient(160deg,#120d07,#07050a)}
.bento{perspective:2000px}
.bento .product{display:grid!important;grid-template:minmax(0,1fr) / minmax(0,1fr);padding:0!important;isolation:auto!important;transform-style:preserve-3d;transition:rotate .9s cubic-bezier(.3,.75,.2,1),transform .4s,box-shadow .4s}
.bento .product.flipped{rotate:y 180deg}
.bento .pf,.bento .pb{grid-area:1/1;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden;min-width:0}
.bento .pf{position:relative;display:flex;flex-direction:column;padding:12px 12px 20px;visibility:visible;cursor:pointer}
.bento .pb{display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;transform:rotateY(180deg);visibility:hidden;transition:visibility 0s .45s}
.bento .product.flipped .pb{visibility:visible;transition-delay:0s}
.bento .product.flipped .pf{visibility:hidden;transition:visibility 0s .45s}
.pb-x{align-self:flex-end;font:700 12px/1 "BBB Sans",Arial,sans-serif;color:#e9dcc0;background:rgba(255,255,255,.07);border:1px solid rgba(227,194,122,.35);border-radius:999px;padding:8px 14px;cursor:pointer}.pb-x:hover{background:rgba(255,255,255,.14)}
.pb-tag{font:700 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;color:#e3b04a}
.pb h3{margin:0!important;font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;color:#fff6dd}
.pb-h{margin:6px 0 0!important;font:700 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#bdb39a;flex:none!important}
.pb ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pb li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:#e6ddc6}
.pb li::before{content:"";position:absolute;left:3px;top:.45em;width:10px;height:5px;border-left:2px solid #f0c765;border-bottom:2px solid #f0c765;transform:rotate(-45deg)}
.pb li b{display:block;color:#fff6dd}
.pb-note{margin:2px 0 0!important;font-size:13px;line-height:1.5;color:#a89f88;flex:none!important}
.pb-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pb-facts{font-size:12.5px;color:#cbbf9f}
.pb .pb-2{font-size:13px;color:#e8cf8a;border-bottom:1px solid rgba(232,207,138,.5)}
.bento .product-meta{align-items:center}
.bento .product[data-category=free] .product-meta strong{font-size:14px;letter-spacing:.07em;text-transform:uppercase;padding:8px 18px;border-radius:999px;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#1a1204;color:#1a1204;background:linear-gradient(110deg,#e0a43a,#ffe29a 50%,#f0b24a);box-shadow:0 8px 22px -8px rgba(240,178,74,.85),inset 0 1px 0 rgba(255,255,255,.7)}
.bento .product:not([data-category=free]) .product-meta strong{font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding:7px 14px;border-radius:999px;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#e9dcc0;color:#e9dcc0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(227,194,122,.4)}
.bento .ptype{top:-12px!important;left:22px!important;z-index:5;font-size:10.5px;padding:7px 13px;color:#1a1204;border:0;background:linear-gradient(110deg,#d99a2f,#ffe29a 52%,#e8b04a);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 20px -8px #000,0 0 0 1px rgba(255,240,200,.6),inset 0 1px 0 rgba(255,255,255,.7)}
.bento .b-glass .ptype{background:linear-gradient(110deg,#cbbfa0,#fff6dd 52%,#cbbfa0)}
.bento .b-char .ptype{background:linear-gradient(110deg,#c98b6b,#ffd9c0 52%,#d9a07e)}
.bento .b-kit .ptype{background:#17110a;color:#f0d98c;box-shadow:0 10px 20px -8px #000,0 0 0 1px rgba(240,217,140,.6)}
.bento .kit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:80%;position:relative;z-index:1}
.kg{display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:1.55;border-radius:16px;background:linear-gradient(150deg,rgba(255,236,190,.13),rgba(255,236,190,.03));box-shadow:inset 0 1px 0 rgba(255,244,214,.5),inset 0 0 0 1px rgba(255,226,160,.26),0 14px 24px -14px #000}
.kg svg{width:32%;height:auto;fill:none;stroke:#f0cf7a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.kg svg circle{fill:#ffe9a8;stroke:none}.kg svg .hg{fill:#f0cf7a;stroke:none}
.kg b{font:700 clamp(10px,3.4cqw,14px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:.04em;color:#f6efdc}
.kg svg rect[class^=a]{transform-box:fill-box;animation:kgl 3.2s ease-in-out infinite}.kg .a2{animation-delay:.25s!important}.kg .a3{animation-delay:.5s!important}
@keyframes kgl{50%{transform:translateY(-3px)}}
.kg .ck2{stroke-dasharray:34;stroke-dashoffset:34;animation:kgc 3.6s ease-in-out infinite}
@keyframes kgc{0%,15%{stroke-dashoffset:34}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:34}}
@media(prefers-reduced-motion:reduce){.kg svg rect[class^=a],.kg .ck2{animation:none}.kg .ck2{stroke-dashoffset:0}.bento .product{transition:none}}
@media(max-width:640px){.bento .pb{padding:24px 20px 20px}}

.ex-stage>.m-hero{position:absolute!important;left:9%;bottom:12%;top:auto;right:auto}
.try:not([data-look=atmos]) .lg-3,.try:not([data-look=atmos]) .pin.p3{display:none}
.mx-nav em,.mx-card>em{-webkit-text-fill-color:#fff!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;animation:none!important}
.mx-nav em{-webkit-text-fill-color:#e9d08c!important;background:none!important}
@media(max-width:1000px){.gx-ex{grid-template-columns:minmax(0,1fr)}.ex-card{min-width:0}.ex-tog{max-width:100%}}

/* ===== brand builder ===== */
.bd{--b:227,174,70;--bt:#fff;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:34px;align-items:start;margin-top:34px;padding:34px;border-radius:28px;background:linear-gradient(160deg,rgba(255,236,190,.06),rgba(255,236,190,.012));box-shadow:inset 0 1.5px 0 rgba(255,240,200,.2),inset 0 0 0 .5px rgba(255,226,160,.18)}
.bd h3{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.035em;margin:10px 0 10px;color:#fff6dd}
.bd-ctl>p{color:#d3cab5;line-height:1.6;margin:0 0 18px;font-size:15px}
.bd-f{margin:0 0 16px}.bd-l{display:block;font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e3c27a;margin:0 0 9px}
.bd-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bd-btn{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:linear-gradient(180deg,#f3d58f,#d9a94b);color:#1a1205;font:700 13px/1 "BBB Sans",Arial,sans-serif;cursor:pointer;border:0}
.bd-btn:hover{filter:brightness(1.07)}.bd-ghost{background:rgba(255,255,255,.08);color:#f3e6c4;box-shadow:inset 0 0 0 1px rgba(227,194,122,.4)}
.bd-link{background:none;border:0;color:#cfc3a6;font:13px "BBB Sans",Arial,sans-serif;text-decoration:underline;cursor:pointer;padding:6px}
.bd-hint{display:block;margin-top:8px;color:#a89f8a;font-size:12px}
.bd-sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;padding:0;box-shadow:0 0 0 1px rgba(255,255,255,.25);transition:transform .2s}
.bd-sw:hover{transform:scale(1.12)}.bd-sw[aria-pressed=true]{border-color:#fff;transform:scale(1.12)}
.bd-custom{position:relative;overflow:hidden;background:conic-gradient(#f43,#fd3,#4d4,#3df,#53f,#f4d,#f43);display:inline-block}
.bd-custom input{position:absolute;inset:-6px;width:40px;height:40px;opacity:0;cursor:pointer}
.bd-hex{font:13px ui-monospace,Menlo,monospace;color:#f3e6c4;margin-left:4px}
.bd-th{width:64px;height:44px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#222;position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:transform .2s}
.bd-th img{width:100%;height:100%;object-fit:cover;display:block}.bd-th:hover{transform:translateY(-2px)}.bd-th[aria-pressed=true]{border-color:#fff}
.bd-up{display:grid;place-items:center;font:700 10px/1.15 "BBB Sans",Arial,sans-serif;color:#f3e6c4;text-align:center;background:rgba(255,255,255,.06);border:1.5px dashed rgba(227,194,122,.55)}
.bd-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bd-in{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid rgba(227,194,122,.3);background:rgba(0,0,0,.35);color:#fff6dd;font:14px "BBB Sans",Arial,sans-serif}
.bd-in:focus,.bd-btn:focus-visible,.bd-th:focus-visible,.bd-sw:focus-visible{outline:2px solid #ffe29a;outline-offset:2px}
.bd .gx-code{margin:6px 0 12px}
.bd-pv{position:sticky;top:96px}
.bd-tog{margin:0 0 12px}
.bd-stage{position:relative;aspect-ratio:3/2;border-radius:22px;overflow:hidden;isolation:isolate;box-shadow:0 30px 60px -26px #000,0 0 0 1px rgba(227,194,122,.25);color:#fff}
.bd-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.bd-nav{position:absolute;left:5%;right:5%;top:6%;display:flex;align-items:center;gap:14px;padding:9px 12px 9px 16px;border-radius:999px;font:600 12px "BBB Sans",Arial,sans-serif}
.bd-brand{display:flex;align-items:center;gap:8px;min-width:0;margin-right:auto}
.bd-brand img{max-height:24px;max-width:84px;object-fit:contain;display:block}
.bd-brand b{font-size:13px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.bd-links{display:flex;gap:14px}.bd-links i{font-style:normal;opacity:.92}
.bd-go{display:inline-block;padding:8px 15px;border-radius:999px;background:rgb(var(--b));color:var(--bt);font:700 12px "BBB Sans",Arial,sans-serif;white-space:nowrap;transition:background .4s}
.bd-pane{position:absolute;left:5%;right:5%;bottom:7%;padding:20px 22px;border-radius:20px}
.bd-pane small{display:block;font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;opacity:.9}
.bd-pane b{display:block;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.03em;margin:8px 0 4px;overflow-wrap:anywhere}
.bd-pane p{margin:0 0 14px;font-size:13px;opacity:.92}
.bd-nav,.bd-pane{transition:background .5s,box-shadow .5s,border-radius .5s,backdrop-filter .5s;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.bd[data-m=glass] .bd-nav,.bd[data-m=glass] .bd-pane{background:linear-gradient(150deg,rgba(var(--b),.30),rgba(var(--b),.08)),rgba(8,8,18,.26);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.2),0 0 36px -10px rgba(var(--b),.7)}
.bd[data-m=plain] .bd-nav,.bd[data-m=plain] .bd-pane{background:#26262b;border:1px solid #45454d;box-shadow:none;border-radius:10px;text-shadow:none}
.bd-cap{color:#cfc3a6;font-size:14px;margin:12px 4px 0}
@media(max-width:1000px){.bd{grid-template-columns:minmax(0,1fr);padding:22px}.bd-pv{position:static;order:-1}.bd-links{display:none}}
@media(max-width:420px){.bd-two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bd *{transition:none!important}}
.bd-brand img{max-height:32px;max-width:130px}.bd-pane p{opacity:1;color:#fff}

/* ===== coming soon ===== */
.soon-tag{font:700 9px/1 "BBB Sans",Arial,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#1a1205;background:linear-gradient(180deg,#f3d58f,#d9a94b);border-radius:999px;padding:3px 7px;margin-left:6px;vertical-align:2px}
.soon-page{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-top:80px;padding-bottom:80px;max-width:900px}
.soon-page h1{font-size:clamp(40px,7vw,86px);line-height:.98;letter-spacing:-.04em;margin:0}
.soon-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:#d3cab5;max-width:640px;margin:0}
.soon-list{list-style:none;margin:8px 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.soon-list li{padding:16px 18px;border-radius:16px;background:rgba(255,236,190,.04);box-shadow:inset 0 0 0 1px rgba(227,194,122,.2);color:#cfc3a6;font-size:14px;line-height:1.5}
.soon-list b{display:block;color:#fff6dd;font-size:16px;margin-bottom:4px}
.soon-page .actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:10px}
.soonsec{padding-top:clamp(60px,9vw,120px);padding-bottom:clamp(40px,6vw,80px)}
.soonsec-head h2{font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.04em;margin:12px 0}
.soonsec-head p{color:#d3cab5;max-width:520px;line-height:1.6;margin:0 0 28px}
.soonsec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.soonc{padding:26px 24px;border-radius:22px;background:linear-gradient(160deg,rgba(255,236,190,.06),rgba(255,236,190,.012));box-shadow:inset 0 1.5px 0 rgba(255,240,200,.18),inset 0 0 0 .5px rgba(255,226,160,.18)}
.soonc-tag{display:inline-block;font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;color:#1a1205;background:linear-gradient(180deg,#f3d58f,#d9a94b);border-radius:999px;padding:6px 10px}
.soonc h3{font-size:22px;letter-spacing:-.02em;color:#fff6dd;margin:16px 0 8px}
.soonc p{color:#cfc3a6;line-height:1.55;margin:0;font-size:15px}
@media(max-width:900px){.soonsec-grid{grid-template-columns:minmax(0,1fr)}}
.soon-tag{-webkit-text-fill-color:#1a1205!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;animation:none!important;display:inline-block}

/* ===== email capture ===== */
.cap{margin:6px 0 4px;max-width:520px}
.cap-form{margin:0}.cap-form[hidden],.cap-open[hidden]{display:none}
.cap-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cap-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.cap-in{flex:1 1 220px;min-width:0;box-sizing:border-box;padding:14px 18px;border-radius:999px;border:1px solid rgba(227,194,122,.4);background:rgba(0,0,0,.4);color:#fff6dd;font:16px "BBB Sans",Arial,sans-serif}
.cap-in::placeholder{color:#9b927e}.cap-in:focus{outline:2px solid #ffe29a;outline-offset:2px}
.cap-btn{flex:0 0 auto;border:0;cursor:pointer}.cap-btn:disabled{opacity:.6;cursor:wait}
.cap-fine{font-size:12.5px;line-height:1.5;color:#a89f8a;margin:10px 4px 0}.cap-fine a{color:#e3c27a}
.cap-msg{min-height:1.2em;margin:8px 4px 0;font-size:14px}.cap-msg.err{color:#ff9d8a}.cap-msg.ok{color:#bfe8a8}
.cap-ok{color:#bfe8a8;margin:0 0 12px;font-size:15px}
.cap-open .button,.cap-open .text-link{display:inline-flex;margin:0 14px 8px 0}
.cap-foot{margin:10px 0 14px}.cap-foot .cap-in{padding:10px 14px;font-size:14px}.cap-foot .cap-btn{padding:10px 16px;font-size:13px}
.soon-notify{margin:10px 0 4px;padding:20px 22px;border-radius:20px;background:rgba(255,236,190,.04);box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);max-width:560px}
.soon-notify>b{display:block;color:#fff6dd;font-size:18px;margin-bottom:12px}
.soonsec .soon-notify{margin-top:22px}
.soon-lead p{margin:0 0 12px}

/* v41 · free buttons match the forest button, spiral-notebook cover, learn section */
.nav-cta,.cap-btn,.cap-open .button,.product-detail .button,.soon-page .button{position:relative;color:#eaf3df;font-weight:700;border:1px solid rgba(216,194,122,.65);border-radius:999px;background:linear-gradient(115deg,#0b2417 0%,#1b4d31 35%,#235f3b 52%,#1a4a2d 70%,#0d2a1a 100%);box-shadow:inset 0 1px 0 rgba(220,245,210,.32),inset 0 -8px 16px rgba(0,0,0,.35),0 10px 34px -8px rgba(40,120,70,.5),0 0 0 1px rgba(0,0,0,.4);text-shadow:0 1px 1px rgba(0,0,0,.5)}
.nav-cta:hover,.cap-btn:hover,.cap-open .button:hover,.product-detail .button:hover{color:#fff;background:linear-gradient(115deg,#0d2c1c 0%,#215a38 35%,#2b7048 52%,#1d5233 70%,#10331f 100%);box-shadow:inset 0 1px 0 rgba(220,245,210,.4),0 12px 38px -8px rgba(60,160,95,.65),0 0 0 1px rgba(0,0,0,.4);transform:translateY(-2px)}
.nav-cta span,.cap-open .button>span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(140deg,#f6e7ab,#d2b25a);color:#10240f;font-size:13px;font-weight:700;line-height:1;text-shadow:none}
.cap-btn{padding-left:26px;padding-right:26px}
.cap-foot .cap-btn{padding:10px 16px}
/* spiral notebook cover */
.nb{position:relative;margin:0 auto;width:min(100%,430px);padding:0 14px 18px 22px;transform:rotate(-1.6deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nb:hover{transform:rotate(0)}
.nb-book{position:relative;border-radius:5px 14px 14px 5px}
.nb-book::before,.nb-book::after{content:"";position:absolute;inset:0;border-radius:5px 14px 14px 5px;z-index:-1}
.nb-book::before{transform:translate(8px,8px);background:linear-gradient(90deg,#d8cdb0,#efe6cf);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.nb-book::after{transform:translate(15px,15px);background:linear-gradient(90deg,#b9ad8e,#d8cdb0);box-shadow:0 40px 60px -22px #000,0 0 70px -26px rgba(227,174,70,.55)}
.nb-book img{display:block;width:100%;height:auto;border-radius:5px 14px 14px 5px!important;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 24px 50px -24px #000!important}
.nb-bind{position:absolute;left:0;top:0;bottom:0;width:11%;border-radius:5px 0 0 5px;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.28) 55%,rgba(255,236,190,.1) 86%,transparent)}
.nb-rings{position:absolute;left:-17px;top:2.5%;bottom:2.5%;width:46px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='28' viewBox='0 0 46 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1bd'/%3E%3Cstop offset='.45' stop-color='%23d9b45a'/%3E%3Cstop offset='1' stop-color='%236b4d17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='30' cy='14' rx='6.5' ry='4.6' fill='%230a0806'/%3E%3Crect x='1' y='10.8' width='34' height='6.4' rx='3.2' fill='url(%23g)'/%3E%3Crect x='4' y='11.6' width='24' height='1.5' rx='.75' fill='%23fff8dc' opacity='.6'/%3E%3C/svg%3E") repeat-y;background-size:46px 28px}
.nb figcaption{position:relative;margin:26px 0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;justify-content:center;font-size:13px;color:#d8cfb6;text-align:center}
.nb figcaption b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#10240f;padding:6px 12px;border-radius:999px;background:linear-gradient(140deg,#f6e7ab,#d2b25a)}
@media(max-width:760px){.nb{width:min(86%,360px)}}
/* what you will be able to do */
.learn{padding:10px 0 56px}
.learn h2{font-size:clamp(30px,4.4vw,50px);line-height:1.05;margin:10px 0 12px}
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.learn-grid article{padding:22px 24px;border-radius:18px;border:1px solid rgba(227,194,122,.24);background:linear-gradient(160deg,rgba(255,236,190,.07),rgba(255,236,190,.015))}
.learn-grid b{display:block;font-size:18px;color:#f6dc98;margin-bottom:8px}
.learn-grid p{margin:0;font-size:15px;line-height:1.55;color:#d8dccf}
.lesson-list li b{color:#f6dc98}
.lead{font-size:17px;line-height:1.55;color:#e9dfc6}
.shelf{padding:0 0 56px}
.shelf h3{font-size:26px;margin:8px 0}
.shelf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.shelf-row a{display:block;padding:18px 20px;border-radius:16px;border:1px solid rgba(227,194,122,.24);background:rgba(227,194,122,.04);text-decoration:none;color:#d8dccf;transition:border-color .3s,transform .3s}
.shelf-row a:hover{border-color:rgba(227,194,122,.6);transform:translateY(-2px)}
.shelf-row b{display:block;color:#f6dc98;margin-bottom:4px}
@media(max-width:900px){.learn-grid,.shelf-row{grid-template-columns:minmax(0,1fr)}}

/* v42 · desktop nav: one glass capsule, pill links, tidy SOON tags */
@media(min-width:761px){
header nav{display:flex;align-items:center;gap:2px;padding:5px;margin-left:auto;margin-right:18px;flex-wrap:nowrap;white-space:nowrap;border-radius:999px;border:1px solid rgba(227,194,122,.26);background:linear-gradient(180deg,rgba(255,236,190,.10),rgba(255,236,190,.025));box-shadow:inset 0 1px 0 rgba(255,244,210,.22),inset 0 -1px 0 rgba(0,0,0,.5),0 10px 30px -14px #000}
header nav a{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:999px;font:600 12.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.07em;color:#e8dfc8;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
header nav a::after{display:none}
header nav a:hover,header nav a:focus-visible{color:#fff3cf;background:radial-gradient(120% 140% at 50% 0%,rgba(246,214,130,.26),rgba(246,214,130,.06) 70%);box-shadow:inset 0 0 0 1px rgba(246,220,152,.4),0 0 22px -6px rgba(246,200,100,.55);outline:none}
header nav a[aria-current=page]{color:#2a1c04;background:linear-gradient(180deg,#f8e6a8,#d8ae52);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 16px -6px rgba(227,174,70,.7)}
header nav a[aria-current=page] .soon-tag{background:#2a1c04;-webkit-text-fill-color:#f6dc98!important;color:#f6dc98}
header nav .soon-tag{margin:0;padding:3px 6px;font-size:8px;letter-spacing:.14em;vertical-align:baseline;line-height:1}
}
@media(min-width:761px) and (max-width:1180px){header nav a{padding:9px 11px;font-size:11.5px;letter-spacing:.04em}header nav{margin-right:10px}}
@media(min-width:761px) and (max-width:900px){header nav .soon-tag{display:none}}
@media(min-width:761px) and (max-width:1180px){header nav a{padding:8px 11px;font-size:11.5px;letter-spacing:.04em}header nav{margin-right:8px;padding:4px}}
@media(min-width:761px) and (max-width:1100px){header nav .soon-tag{display:none}}
@media(min-width:761px) and (max-width:900px){header{gap:8px;padding-left:20px;padding-right:20px}header nav a{padding:8px 8px;font-size:10.5px}}

/* v43 · stacked logo on smaller screens, slimmer Start free */
@media(max-width:1180px){.brand{width:auto!important;flex:none}.brand img{width:auto!important;height:56px!important;max-width:none}header.compact .brand img{height:46px!important}}
@media(max-width:760px){.brand img{height:50px!important}header.compact .brand img{height:42px!important}}
.nav-cta{padding:8px 9px 8px 20px!important;min-height:0!important;line-height:1.1;font-size:13px;gap:10px}
.nav-cta span{width:22px!important;height:22px!important;min-width:22px!important;margin-left:0!important;font-size:12px!important}
@media(max-width:560px){.nav-cta{padding:7px 8px 7px 14px!important;font-size:12px}.nav-cta span{width:20px!important;height:20px!important;min-width:20px!important}}
@media(max-width:1180px){.brand::after{-webkit-mask:url(assets/bbb-logo.png) center/100% 100% no-repeat;mask:url(assets/bbb-logo.png) center/100% 100% no-repeat}}

/* v53: clean mobile dropdown menu (replaces the stretched pill-nav on small screens) */
@media(max-width:760px){
 header nav{display:none!important;position:absolute;top:calc(100% + 6px);left:12px;right:12px;margin:0!important;padding:8px!important;border-radius:22px;flex-direction:column;align-items:stretch;gap:2px;white-space:normal;border:1px solid rgba(227,194,122,.32);background:rgba(12,9,5,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 22px 50px rgba(0,0,0,.65);z-index:60}
 header nav.open{display:flex!important}
 header nav a{position:relative;display:flex;justify-content:space-between;align-items:center;width:auto;padding:15px 18px!important;font-size:15px!important;letter-spacing:.03em!important;border-radius:14px;border-bottom:0}
 header nav a+a{border-top:1px solid rgba(227,194,122,.10)}
 header nav a[aria-current=page]{border-top-color:transparent}
 header nav .soon-tag{display:inline-block!important}
}

/* v53: smaller hero Skip/Replay + Sound buttons */
.hero-ctl{gap:7px}
.hero-ctl .hero-snd{padding:8px 13px 8px 11px;font-size:11px;gap:7px;letter-spacing:.02em}
.hero-ctl .hero-snd svg{width:13px;height:13px}
@media(max-width:700px){.hero-ctl{gap:6px}.hero-ctl .hero-snd{padding:7px 11px 7px 9px;font-size:10.5px}}

/* v54: fit the two extra "Soon" nav items on every page */
@media (min-width:761px) and (max-width:1560px){
 header nav a{padding:9px 10px;font-size:11.5px;letter-spacing:.03em;gap:4px}
 header nav a .nav-soon{margin-left:2px;padding:2px 4px;font-size:7.5px;letter-spacing:.08em}
}
@media (min-width:761px) and (max-width:1180px){
 header nav a{padding:8px 6px;font-size:10.5px;letter-spacing:.01em}
 header nav a .nav-soon{display:none}
}