@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Offside&display=swap');

html,body{height:100%;margin:0;background:#000;overflow:hidden;overscroll-behavior:none}

/* Root knobs */
:root{
  --rail-w:96px;
  --shadow:0 2px 10px rgba(0,0,0,.45);
  --step:900ms;
  --wwd-scale-x:.60;
}

/* Rail (force vertical-left; avoid theme inset quirks) */
.hs-rail{
  position:fixed; top:0; bottom:0; left:0;
  width:var(--rail-w); z-index:5000;
  display:grid; grid-template-rows:auto 1fr auto;
  align-items:center; justify-items:center;
  pointer-events:none;
}
.hs-rail>*{pointer-events:auto}

.hs-btn{margin-top:14px;width:40px;height:40px;display:grid;place-items:center;color:#fff;background:none;border:none;padding:0;cursor:pointer}
.hs-btn svg{width:22px;height:22px}
.hs-btn svg line{transition:transform .18s ease}
.hs-btn:hover svg line:nth-of-type(1){transform:translateX(3px)}
.hs-btn:hover svg line:nth-of-type(3){transform:translateX(-3px)}

.hs-brand{color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);font:26px 'Zen Dots',sans-serif;letter-spacing:.18em;text-transform:uppercase;background:transparent;border:0;position:relative;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.hs-brand.glow{animation:brandGlow .65s ease-out;text-shadow:0 0 18px rgba(255,255,255,.85),0 0 36px rgba(255,255,255,.45),0 2px 6px rgba(0,0,0,.6);filter:drop-shadow(0 0 18px rgba(255,255,255,.32))}
@keyframes brandGlow{
  0%{text-shadow:0 0 0 rgba(255,255,255,0),0 2px 6px rgba(0,0,0,.6)}
  45%{text-shadow:0 0 20px rgba(255,255,255,.95),0 0 40px rgba(255,255,255,.55),0 2px 6px rgba(0,0,0,.6)}
  100%{text-shadow:0 0 0 rgba(255,255,255,0),0 2px 6px rgba(0,0,0,.6)}
}

.hs-shop{margin-bottom:22px;display:inline-grid;place-items:center;min-width:54px;height:28px;padding:0 10px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;text-decoration:none;font:10px 'Zen Dots',sans-serif;letter-spacing:.10em;text-transform:uppercase;opacity:.92}
.hs-shop:hover{opacity:1;background:rgba(255,255,255,.08)}

.hs-rail-bar{position:absolute;right:0;top:0;bottom:0;width:2px;background:rgba(255,255,255,.25)}
#railDot{position:absolute;right:0;top:0;width:10px;height:10px;border-radius:999px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.6);transform:translate(45%,0)}

/* Menu */
.menu-overlay{--cx:40px;--cy:80px;position:fixed;inset:0;z-index:5250;pointer-events:auto;opacity:0;clip-path:circle(0% at var(--cx) var(--cy));background:radial-gradient(1200px 1200px at 20% 20%, rgba(255,255,255,.06), transparent 60%),radial-gradient(1200px 1200px at 80% 80%, rgba(255,255,255,.06), transparent 60%),rgba(10,10,12,.92);backdrop-filter:blur(10px);transition:clip-path .56s cubic-bezier(.2,.8,.2,1),opacity .26s ease}
.menu-overlay::after{content:"";position:absolute;inset:0;opacity:.12;background-image:radial-gradient(#fff 1px, transparent 1px);background-size:3px 3px;mix-blend-mode:overlay;pointer-events:none}
.menu-overlay.show{opacity:1;clip-path:circle(150% at var(--cx) var(--cy))}
.menu-inner{position:absolute;inset:0;display:grid;place-items:center;padding:6vh 6vw}
.menu-grid{max-width:1200px;width:100%;display:grid;grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
.menu-item{color:#fff;text-decoration:none;display:inline-block;font:clamp(16px,3.2vw,44px) 'Zen Dots',sans-serif;letter-spacing:.10em;text-transform:uppercase;opacity:0;transform:translateY(12px) scale(.98);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .42s ease}
.menu-overlay.show .menu-item{opacity:1;transform:none}
.menu-close{position:absolute;right:4vw;top:3.2vh;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.28);padding:10px 14px;border-radius:999px;font:12px 'Zen Dots',sans-serif;letter-spacing:.12em}

/* Logo */
#hsLogo{position:fixed;inset:0;display:grid;place-items:center;z-index:3500;pointer-events:none;opacity:0;transform:scale(1.08);transition:opacity .9s ease,transform .9s ease}
#hsLogo.show{opacity:1;transform:scale(1)}
#hsLogo.hide{opacity:0;transform:scale(1.08)}
/* Bigger, dramatic exit */
#hsLogo.exit-big{opacity:0;transform:scale(3.4);transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.9,.2,1)}
#hsLogo img{width:22vw;max-width:340px;min-width:140px;height:auto;filter:drop-shadow(0 0 12px rgba(0,0,0,.35))}

/* Intro layers */
.layer{position:fixed;inset:0;display:grid;place-items:center;z-index:3400;pointer-events:none;opacity:0;transform:translateY(0)}
.enter{opacity:0;transform:translateY(60px)}
.leave{opacity:0;transform:translateY(-60px)}
.show{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
.txt{color:#fff;text-shadow:var(--shadow)}
.wec .txt{font:clamp(22px,4.3vw,56px) 'Offside',cursive;opacity:0;transition:transform .8s ease,opacity .8s ease}
.layer.wec.show .txt{opacity:1;transform:none}

/* WHAT WE DO */
.what{justify-items:start}
.what .wrap{position:fixed;left:calc(var(--rail-w) + 10vw);top:52%;transform:translateY(-50%)}
.what .main{font:clamp(30px,6.6vw,130px) 'Zen Dots',sans-serif;text-transform:uppercase;letter-spacing:.1em;transform-origin:left top;transform:scaleX(var(--wwd-scale-x))}
.what .sub{margin-top:.35em;max-width:42ch;opacity:.9;font:clamp(15px,1.6vw,24px) 'Offside',cursive}

/* Backgrounds (pointer-events:none so they can't swallow UI) */
.bg,#bgVid,#fade{position:fixed;inset:-8px;transform:translateZ(0) scale(1.035);backface-visibility:hidden}
.bg{z-index:3330;opacity:0;background-size:cover;background-position:center;transition:opacity .9s ease,transform 1.2s ease;pointer-events:none}
#bgTop{z-index:3335}
.bg.show{opacity:1}
#bgVid{z-index:3334;opacity:0;object-fit:cover;transition:opacity .6s ease,transform .9s ease;pointer-events:none}
#bgVid.show{opacity:1}
#bgVid::-webkit-media-controls{display:none!important}

/* Fade overlay for transitions */
#fade{z-index:5995;background:#000;opacity:0;pointer-events:none;transition:opacity .25s ease}
#fade.show{opacity:1}

/* Foreground video overlay */
#video{position:fixed;inset:0;background:#000;opacity:0;z-index:6000;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .35s ease}
#video.show{opacity:1;pointer-events:auto}

/* Sections */
.section{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .6s ease;--reveal:28px}
.section.show{opacity:1;pointer-events:auto}
.section.ready{--reveal:0px}
.sec-title{position:fixed;left:calc(var(--rail-w) + 9vw);top:50%;--baseY:-50%;transform:translateY(calc(var(--baseY) + var(--reveal)));color:#fff;text-shadow:var(--shadow);font:clamp(24px,3.6vw,72px) 'Zen Dots',sans-serif;letter-spacing:.09em;line-height:1.02;max-width:16ch;opacity:0;transition:transform .7s ease,opacity .7s ease;transition-delay:120ms;z-index:3716}
.section.ready .sec-title{opacity:1}

/* Carousels */
.caro{position:fixed;right:6vw;top:50%;--baseY:-50%;transform:translateY(calc(var(--baseY) + var(--reveal)));display:flex;gap:22px;align-items:center;opacity:0;transition:transform .7s ease,opacity .7s ease;transition-delay:220ms;overflow:visible}
.ctrl{position:fixed;right:6vw;bottom:8vh;width:min(40vw,880px);border-top:1px solid rgba(255,255,255,.28);padding-top:12px;display:flex;justify-content:space-between;gap:14px;opacity:0;transform:translateY(var(--reveal));transition:transform .7s ease,opacity .7s ease;transition-delay:320ms}
.section.ready .caro,.section.ready .ctrl{opacity:1}

.card{flex:0 0 min(34vw,320px);max-width:320px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:0 10px 36px rgba(0,0,0,.38);transition:transform .45s ease,box-shadow .45s ease;scroll-snap-align:center}
.card img{display:block;width:100%;height:auto}
.card.active{transform:scale(1.14);box-shadow:0 16px 60px rgba(0,0,0,.55)}
.cap{font:clamp(15px,1.8vw,22px) 'Offside',cursive;color:#fff;text-align:center;margin-top:8px}
.ctrl button{background:none;border:none;color:#fff;font:14px 'Zen Dots',sans-serif;text-transform:uppercase;opacity:.85}
.ctrl button:hover{opacity:1;transform:translateY(-1px)}

/* Specific z */
.adv{z-index:3704}
.tv{z-index:3705}
.hero{z-index:3708}
.poetry{z-index:3708}
.unreal{z-index:3709}
.books{z-index:3706}
.vegas{z-index:3712}
.packages,.contact{z-index:3707}

/* HERO SHOTS */
.hero{opacity:0;pointer-events:none;transition:opacity .6s ease;--reveal:28px}
.hero.show{opacity:1;pointer-events:auto}
.hero.ready .sec-title{opacity:1}
#heroTitle{z-index:3716}
#heroCluster{position:fixed;inset:0;z-index:3708;opacity:0;transition:opacity .7s ease}
.hero.ready #heroCluster{opacity:1}

/* Moving tiles */
.hs-float{position:absolute;left:0;top:0;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:0 10px 36px rgba(0,0,0,.38);transition:box-shadow .25s ease; visibility:hidden}
.hs-float img{display:block;width:100%;height:auto;pointer-events:none}
/* Prevent top-left flash before first positioning */
.hs-float.pending{opacity:0;transform:translate3d(-200vw,-200vh,0)}
.hs-float.ready{opacity:1;visibility:visible}
/* scale only inner, not mover */
.hs-float .hs-inner{transform:scale(1);transition:transform .18s ease}
.hs-float.selected .hs-inner{transform:scale(1.06)}
.hs-float.selected{box-shadow:0 18px 80px rgba(0,0,0,.72),0 0 0 2px rgba(255,255,255,.85)}

/* Focused hero */
#heroFocus{position:fixed;left:50%;top:50%;transform:translate(-50%,-52%) scale(.94);opacity:0;z-index:3812;pointer-events:none;transition:opacity .38s ease, transform .42s ease}
#heroFocus.show{opacity:1;transform:translate(-50%,-52%) scale(1);pointer-events:auto}
#heroFocus .frame{border-radius:18px;overflow:hidden;background:rgba(0,0,0,.18);box-shadow:0 24px 120px rgba(0,0,0,.68), 0 0 0 2px rgba(255,255,255,.85)}
#heroFocus img{display:block;max-width:min(58vw,860px);max-height:min(72vh,860px)}
.hs-cap{font:clamp(14px,1.4vw,18px) 'Offside',cursive; color:#fff; text-align:center; margin-top:6px}

/* VISUAL POETRY */
.poetry .caro{right:6vw}
.poetry .card{flex:0 0 min(30vw,300px)}

/* LAS VEGAS */
#vegasWrap{
  position:fixed; right:8vw; top:44%;
  transform:translateY(calc(-50% + var(--reveal)));
  width:min(58vw,1040px); aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  background:rgba(0,0,0,.25); box-shadow:0 18px 80px rgba(0,0,0,.62), 0 0 0 2px rgba(255,255,255,.65);
  z-index:3805; opacity:0; transition:transform .7s ease, opacity .7s ease; transition-delay:240ms;
}
.vegas.ready #vegasTitle,.vegas.ready #vegasSub,.vegas.ready #vegasWrap{opacity:1}
#vegasPlayer{width:100%;height:100%;display:block;object-fit:cover;background:#000}
#vegasSub{position:fixed;left:calc(var(--rail-w) + 9vw);top:calc(50% + 5.2em);transform:translateY(calc(-50% + var(--reveal)));max-width:32ch;opacity:0;transition:transform .7s ease,opacity .7s ease;transition-delay:220ms;color:#fff}
.vegas.instaHide{opacity:0!important;transition:none!important}

/* PACKAGES / CONTACT */
.pkg-wrap{position:fixed;left:calc(var(--rail-w) + 9vw);right:6vw;bottom:6vh;top:30vh;transform:translateY(var(--reveal));display:grid;grid-template-columns:2fr 1fr;gap:22px;opacity:0;transition:transform .7s ease,opacity .7s ease;transition-delay:220ms}
.packages.ready .sec-title,.packages.ready .pkg-wrap,.contact.ready .sec-title,.contact.ready .pkg-wrap{opacity:1}
.pkg-grid{display:grid;grid-template-columns:repeat(3, minmax(220px,1fr));gap:18px;align-content:start}
.pkg-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.38);padding:16px 18px;color:#fff}
.pkg-card h4{font:20px 'Zen Dots',sans-serif;letter-spacing:.08em;margin:0 0 6px;color:#fff}
.pkg-price{font:28px 'Zen Dots',sans-serif;margin:4px 0 14px;color:#fff}
.pkg-subhead,.pkg-feat,.pkg-sub{color:#fff}
/* Added breathing room above the CTA */
.pkg-cta{margin-top:16px}
.btn{display:inline-block;border:1px solid rgba(255,255,255,.35);padding:8px 12px;border-radius:999px;background:transparent;font:12px 'Zen Dots',sans-serif;letter-spacing:.12em;color:#fff;text-decoration:none}
.btn:hover{background:rgba(255,255,255,.12)}
.btn-primary{border-color:#fff}
.payments{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.38);padding:16px 18px;color:#fff;height:fit-content}
.payments h4{margin:0 0 10px;font:18px 'Zen Dots',sans-serif;letter-spacing:.1em}
.payments .badge{display:flex;gap:8px;align-items:center;margin:6px 0;padding:8px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;width:max-content;font:12px 'Zen Dots',sans-serif}

/* CONTACT form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:block;color:#fff;font:12px 'Zen Dots',sans-serif;letter-spacing:.1em;margin:6px 0 6px}
.form .input,.form select,.form textarea{width:100%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:10px 12px;font:14px/1.3 'Offside',cursive;outline:none}
.form textarea{min-height:120px;resize:vertical}
select:invalid{color:rgba(255,255,255,.8)}
select option{background:#111;color:#fff}
.budgets{display:flex;flex-wrap:wrap;gap:8px}
.budgets .chip{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 12px;background:transparent;color:#fff;cursor:pointer;font:14px 'Offside',sans-serif;opacity:.9}
.budgets .chip.active{background:rgba(255,255,255,.15);opacity:1}
/* Stronger Send button */
.form .send{justify-self:start;margin-top:8px;background:#fff;color:#000;border-color:#fff;font-weight:700;box-shadow:0 6px 24px rgba(255,255,255,.18)}
.form .send:hover{opacity:.95;transform:translateY(-1px)}

/* Cursor */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  body.playing{cursor:auto!important}
  .card,.ctrl button,.hs-rail a,.hs-rail button,.hs-float{cursor:none!important}
  #cursor{position:fixed;left:0;top:0;z-index:5200;pointer-events:none;transform:translate(-50%,-50%)}
  #cursor.hidden{display:none}
  #cursor .triWrap{width:24px;height:24px}
  #cursor .tri{overflow:visible}
  #cursor .tri polygon{fill:none;stroke:#fff;stroke-width:1.5;opacity:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 50%;transition:transform .12s,opacity .12s,fill .12s}
  #cursor .d{position:absolute;border-radius:999px;background:#fff;opacity:.9;left:0;top:0;transform:translate(-50%,-50%)}
  #cursor .d.d1{width:6px;height:6px}
  #cursor .d.d2{width:4px;height:4px;opacity:.75}
  #cursor .playBadge{display:none;place-items:center;width:92px;height:92px;border:2px solid #fff;border-radius:999px;font:13px 'Zen Dots',sans-serif;letter-spacing:.12em;color:#fff;text-transform:uppercase;background:rgba(0,0,0,.18);position:relative;overflow:visible}
  #cursor.play .triWrap,#cursor.play .d{display:none}
  #cursor.play .playBadge{display:grid}
  #cursor .tri.pulse polygon{fill:#fff;stroke:#fff;animation:cursorClick 350ms ease-out forwards}
  @keyframes cursorClick{0%{transform:scale(1);opacity:1}40%{transform:scale(1.35);opacity:.9}100%{transform:scale(1);opacity:1}}
  #cursor.play.wave .playBadge::before,#cursor.play.wave .playBadge::after{content:"";position:absolute;left:50%;top:50%;width:92px;height:92px;border-radius:999px;border:2px solid rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(1);opacity:.9;animation:hsRipple 650ms ease-out forwards}
  #cursor.play.wave .playBadge::after{border-color:rgba(255,255,255,.35);animation-delay:120ms}
  @keyframes hsRipple{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
}

/* Mobile */
@media (max-width:800px){
  :root{--rail-w:64px}
  .hs-shop{min-width:0;width:auto;height:auto;padding:6px 6px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px}
  .sec-title{left:calc(var(--rail-w) + 4vw);top:14vh;transform:none;max-width:20ch}
  .caro{right:4vw;top:auto;bottom:24vh;transform:none;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .card{flex:0 0 clamp(46vw, 52vw, 58vw);max-width:none;border-radius:12px;transform:none!important}
  .card.active{transform:none!important;box-shadow:0 10px 36px rgba(0,0,0,.38)}
  .cap{font-size:clamp(12px,3.6vw,16px);margin-top:6px}
  .ctrl{left:calc(var(--rail-w) + 4vw);right:4vw;width:auto;bottom:6vh;transform:none;justify-content:space-between}
  #heroCluster{pointer-events:auto}
  .hs-float{width:clamp(96px, 32vw, 160px)!important;border-radius:12px}
  #heroFocus img{max-width:92vw;max-height:70vh}
  .poetry .card{flex:0 0 60vw}
  #vegasSub{left:calc(var(--rail-w) + 4vw)!important;top:calc(14vh + 3.4em)!important;transform:none!important;max-width:32ch;opacity:1!important}
  #vegasWrap{right:4vw;width:92vw;top:auto;bottom:12vh;aspect-ratio:16/9}
  .pkg-wrap{left:calc(var(--rail-w) + 4vw);right:4vw;top:22vh!important;bottom:8vh!important;overflow:auto;-webkit-overflow-scrolling:touch;grid-template-columns:1fr}
  .pkg-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;gap:12px}
}

/* NEW: Mid-screen tiers to prevent title/carousel overlap (laptops & small desktops) */
@media (max-width:1200px) and (min-width:801px){
  .sec-title{left:calc(var(--rail-w) + 5vw); top:18vh; transform:none!important; max-width:24ch}
  .caro{right:4vw; top:auto; bottom:26vh; transform:none!important; gap:14px}
  .ctrl{left:calc(var(--rail-w) + 5vw); right:4vw; width:auto; bottom:10vh; transform:none!important}
  .card{flex:0 0 clamp(24vw,28vw,300px); max-width:300px}
  .cap{font-size:clamp(12px,1.6vw,18px)}
  #vegasSub{left:calc(var(--rail-w) + 5vw)!important; top:calc(18vh + 3.4em)!important; transform:none!important; max-width:34ch; opacity:1!important}
  #vegasWrap{right:4vw; width:84vw; top:auto; bottom:18vh; transform:none!important}
  .pkg-wrap{left:calc(var(--rail-w) + 5vw); right:4vw; top:24vh; bottom:8vh; grid-template-columns:1.4fr 1fr}
}

@media (max-width:1024px) and (min-width:801px){
  .sec-title{top:16vh}
  .caro{bottom:24vh}
  .ctrl{bottom:8vh}
}

/* Tight-height safety: avoid collisions on short viewports */
@media (max-height:800px) and (min-width:801px){
  .sec-title{top:12vh}
  .caro{bottom:20vh}
  .ctrl{bottom:6vh}
}

@supports (padding: env(safe-area-inset-bottom)){
  .ctrl{ bottom: calc(6vh + env(safe-area-inset-bottom)); }
  .pkg-wrap{ bottom: calc(6vh + env(safe-area-inset-bottom)); }
}

/* Standalone responsive and accessibility refinements. */
*{box-sizing:border-box}
body{font-family:'Offside',sans-serif;color:#fff}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:400}
button,a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{opacity:.3;cursor:default}
:focus-visible{outline:2px solid #fff!important;outline-offset:6px}
.section-focus-target:focus{outline:none!important}
.hs-rail,.section-nav,#motionToggle{cursor:auto}
.hs-rail{padding-bottom:16px}
.menu-overlay{pointer-events:none}
.menu-overlay.show{pointer-events:auto}
.menu-inner{overflow-y:auto;overscroll-behavior:contain}
.menu-grid{padding:48px 0;gap:clamp(10px,2vh,20px)}
.menu-item{font-size:clamp(16px,3vw,36px)}
.layer{left:var(--rail-w);padding:0 5vw;text-align:center}
.what .wrap{text-align:left}
.wec .txt{font-family:'Zen Dots',sans-serif;font-size:clamp(30px,5vw,82px);max-width:14ch;line-height:1.14;text-transform:none}
.layer,.layer.wec .txt{transition:opacity .52s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
#hsLogo.exit-big{transform:scale(1.8);transition:opacity .48s ease,transform .62s cubic-bezier(.2,.8,.2,1)}
#hsLogo{left:var(--rail-w)}
#bgVid{width:calc(100% + 16px);height:calc(100% + 16px);filter:brightness(.58)}
#video,#vegasPlayer{object-fit:contain}
.caro,.poetry .caro{left:auto;right:4vw;width:50vw;max-height:76vh;overflow:auto;padding:28px 26px;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;align-items:center}
.card{position:relative;margin:0;flex:0 0 min(25vw,280px);max-width:280px;cursor:pointer!important;scroll-snap-align:center;outline-offset:4px}
.poster-play{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:grid;place-items:center;width:60px;height:60px;padding-left:4px;border:1px solid #fff9;border-radius:50%;background:#0009;color:#fff;font:23px sans-serif;box-shadow:0 4px 30px #0008;pointer-events:none;transition:transform .2s ease,background .2s ease}
.card:hover .poster-play,.card:focus-visible .poster-play{transform:translate(-50%,-50%) scale(1.12);background:#ffffff;color:#070707}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover;background:linear-gradient(135deg,#141414,#050505)}
.card.active{transform:scale(1.035);box-shadow:0 0 0 1px #fff,0 14px 48px #0009}
.cap{padding:8px 10px 12px;margin:0;line-height:1.3;font-size:14px}
.ctrl{right:5vw;bottom:10vh;width:48vw;align-items:center}
.ctrl button{min-height:44px;cursor:pointer!important}
.ctrl .play-film{border:1px solid #fff;border-radius:999px;padding:14px 24px;font-size:13px;line-height:1.4;min-height:52px;background:#fff;color:#080808;box-shadow:0 6px 30px #0005;margin:auto;text-transform:none;font-weight:700}
.sec-title{left:calc(var(--rail-w) + 5vw);font-size:clamp(25px,3.5vw,64px);max-width:10ch;line-height:1.14}
#unrealCaro,#booksCaro{justify-content:center}
#unrealCaro .card{flex-basis:min(40vw,540px);max-width:540px}
#unrealCaro .card img{aspect-ratio:16/9;object-fit:contain}
#booksCaro .card img{object-fit:contain}
.pkg-wrap{left:calc(var(--rail-w) + 5vw);overflow:auto;overscroll-behavior:contain;padding:8px 12px 30px 0;grid-template-columns:minmax(0,1fr) 200px;gap:24px}
.pkg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pkg-card{min-width:0}
.pkg-card h4{font-size:16px;line-height:1.3}
.pkg-feat{font-size:13px;line-height:1.75}
.pkg-subhead{margin:0 0 12px;font-size:15px;letter-spacing:.1em}
.pkg-price{margin:12px 0 18px}
.pkg-cta a{font-size:10px;line-height:1.5}
.payments h4{font-size:14px;line-height:1.5}
.contact .pkg-wrap{max-width:960px}
#packages .pkg-wrap{align-content:start}
.package-before-order{grid-column:1/-1;position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border:1px solid #b980c266;border-radius:16px;background:linear-gradient(120deg,#1b0e20,#0b070f);box-shadow:0 12px 26px #0009;color:#fff}
.package-before-order h3{font:20px/1.35 'Offside',sans-serif;margin:0 0 7px;text-transform:none}
.package-before-order p{font:13px/1.6 'Offside',sans-serif;margin:0;max-width:62ch;color:#e1d4e5}
.package-before-order .package-contact{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;min-height:46px;box-sizing:border-box;background:#f6eafa;color:#150b1b;border-color:#f6eafa;letter-spacing:.02em;padding:12px 17px;cursor:pointer!important}
.package-before-order .package-contact:hover{background:#e9c8f0}
.package-order-status{margin:0 0 18px;font:12px/1.6 'Offside',sans-serif;color:#c5b6cd}
#packages .pkg-cta .btn{min-height:44px;box-sizing:border-box;cursor:pointer!important;text-transform:none;letter-spacing:.03em}
#packages .pkg-cta button[disabled]{color:#e4dbe8;background:#22182b;border-color:#716779;opacity:.68;cursor:not-allowed!important}
.payment-contact{display:inline-flex;align-items:center;min-height:44px;color:#f4d7fb;text-underline-offset:4px;font:13px 'Offside',sans-serif;cursor:pointer!important}
@media(max-width:600px){
  .package-before-order{position:relative;top:auto;flex-direction:column;align-items:stretch;padding:17px;gap:14px}
  .package-before-order h3{font-size:18px}
  .package-before-order p{font-size:13px}
  .package-before-order .package-contact{align-self:start;font-size:11px}
}
.form{height:fit-content}
.form .input{line-height:1.5}
.form .full label{line-height:1.5}
#formStatus{line-height:1.5;grid-column:1/-1}
.section-nav{position:fixed;right:22px;bottom:18px;z-index:5200;display:flex;gap:8px}
.section-nav button{background:#080808b8;color:#fff;border:1px solid #ffffff55;border-radius:50%;width:42px;height:42px;font:22px sans-serif;backdrop-filter:blur(10px)}
#motionToggle{position:fixed;left:calc(var(--rail-w) + 20px);bottom:22px;z-index:5200;color:#fff;background:#0008;border:1px solid #ffffff40;border-radius:999px;padding:9px 13px;font:10px 'Offside',sans-serif;backdrop-filter:blur(10px)}
.intro-hint{position:fixed;bottom:10vh;left:calc(50% + var(--rail-w)/2);transform:translateX(-50%);z-index:3502;pointer-events:auto;text-align:center;font:11px 'Offside',sans-serif;letter-spacing:.14em;opacity:.9;min-height:44px;padding:8px 20px;background:#07090cb3;color:white;border:1px solid #ffffff3b;border-radius:999px;cursor:pointer}
.intro-hint span{display:inline-block;font-size:17px;padding-left:10px}
#heroFocus{max-width:calc(100vw - var(--rail-w) - 30px);left:calc(50% + var(--rail-w)/2)}
#heroFocus .frame{margin:0;max-width:100%;background:#090909}
#heroFocus img{max-width:100%;max-height:72vh;object-fit:contain}
#heroFocusClose{position:absolute;right:0;top:-48px;color:white;background:#111;border:1px solid #fff8;border-radius:999px;padding:10px 16px;cursor:pointer}
#mediaStatus{position:fixed;bottom:82px;left:calc(var(--rail-w) + 20px);right:20px;z-index:6020;font:13px/1.5 'Offside',sans-serif;pointer-events:none}
#mediaStatus:not(:empty){padding:12px 18px;background:#111;border:1px solid #fff3;border-radius:10px}
.no-js{position:fixed;inset:0;z-index:9000;background:#000;padding:15vh 10vw;font-family:sans-serif}
.no-js a{color:white}
body.playing .section-nav,body.playing #motionToggle{visibility:hidden}
body:has(.menu-overlay.show) #motionToggle,body:has(.menu-overlay.show) .section-nav{visibility:hidden}
@media(min-width:801px) and (max-width:1200px){
  .sec-title{top:12vh;max-width:none;font-size:32px}
  .caro,.poetry .caro{left:calc(var(--rail-w) + 5vw);right:4vw;width:auto;top:26vh;bottom:20vh;max-height:none;transform:none!important}
  .card{flex-basis:200px;max-width:240px}
  .card img{max-height:39vh;object-fit:contain}
  .ctrl{left:calc(var(--rail-w) + 5vw);width:auto;bottom:12vh}
  .pkg-wrap{grid-template-columns:1fr;top:24vh;bottom:12vh}
  .payments{display:none}
  #unrealCaro .card img{max-height:35vh}
  #vegasWrap{left:calc(var(--rail-w) + 5vw);right:4vw;width:auto;bottom:15vh;top:33vh;transform:none}
}
@media(max-width:800px){
  :root{--rail-w:54px}
  .hs-brand{font-size:18px}
  .hs-btn{width:42px;height:42px}
  .hs-shop{margin-bottom:10px}
  .sec-title{left:calc(var(--rail-w) + 5vw);top:11vh;font-size:clamp(22px,5.5vw,35px);max-width:15ch}
  .caro,.poetry .caro{left:calc(var(--rail-w) + 3vw);right:3vw;width:auto;top:23vh;bottom:23vh;transform:none;max-height:none;padding:14px 12px;gap:16px}
  .card,.poetry .card{flex:0 0 58vw;max-width:260px}
  .card img{height:36vh;object-fit:contain;aspect-ratio:auto}
  .ctrl{left:calc(var(--rail-w) + 5vw);right:5vw;width:auto;bottom:15vh;padding-top:8px}
  .ctrl button{font-size:10px}
  .ctrl .play-film{font-size:10px;padding:8px 12px}
  .cap{font-size:12px}
  .pkg-wrap{left:calc(var(--rail-w) + 5vw);right:3vw;top:23vh!important;bottom:14vh!important;grid-template-columns:1fr;padding-right:8px}
  .pkg-grid{grid-template-columns:1fr}
  .form{display:flex;flex-direction:column}
  .payments{display:none}
  #packagesTitle,#contactTitle{top:11vh!important}
  #vegasSub{top:20vh!important;left:calc(var(--rail-w) + 5vw)!important;font-size:11px;max-width:32ch;text-align:left;padding:0}
  #vegasWrap{left:calc(var(--rail-w) + 4vw);right:4vw;width:auto;top:34vh;bottom:18vh;transform:none;aspect-ratio:auto;background:#000}
  #unrealCaro .card{flex-basis:100%;max-width:100%}
  #unrealCaro .card img{height:auto;aspect-ratio:16/9}
  #motionToggle{left:calc(var(--rail-w) + 12px);bottom:22px;font-size:9px;padding:8px 10px}
  .section-nav{right:12px;gap:5px}
  .section-nav button{width:36px;height:36px}
  #heroFocus{max-width:calc(100vw - var(--rail-w) - 24px)}
  .what .wrap{left:calc(var(--rail-w) + 6vw);right:6vw}
  .what .main{font-size:clamp(36px,11vw,72px)}
  .what .sub{font-size:15px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #cursor{display:none!important}
  body,.card,.ctrl button,.hs-rail a,.hs-rail button,.hs-float{cursor:auto!important}
}

/* A procedural universe shared by the opening, Packages and Contact screens. */
#cosmosScene {
  --cosmos-purple: 177, 77, 174;
  position: fixed;
  inset: 0;
  z-index: 3332;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 82% 25%, #30233f 0, #0c0712 5%, transparent 5.2%),
    radial-gradient(ellipse at 55% 46%, #110913 0, #070407 42%, #010102 100%);
  transition: opacity 350ms ease, visibility 0s linear 350ms;
  contain: strict;
}
#cosmosScene.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms ease, visibility 0s;
}
#cosmosCanvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #cosmosScene, #cosmosScene.is-visible { transition: none; }
}

/* Transparent dust continues over portfolio backgrounds, below cards and text. */
#cosmosParticleScene {
  position: fixed;
  inset: 0;
  z-index: 3338;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
  contain: strict;
}
#cosmosParticleScene.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms ease, visibility 0s;
}
#cosmosParticleCanvas { width: 100%; height: 100%; display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #cosmosParticleScene, #cosmosParticleScene.is-visible { display: none; transition: none; }
}

#hsLogo #logoStage {
  position: relative;
  width: min(66vw, 560px);
  height: min(68vh, 610px);
  min-height: 280px;
  isolation: isolate;
  pointer-events: none;
}
#hsLogo.show:not(.hide):not(.exit-big):not([aria-hidden="true"]) #logoStage {
  pointer-events: auto;
}
#hsLogo #logoFallback {
  position: absolute;
  left: 50%;
  top: 43%;
  width: clamp(140px, 23vw, 340px);
  height: auto;
  max-width: 85%;
  min-width: 0;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity .45s ease;
  pointer-events: none;
}
#hsLogo #logoModel {
  display: none;
  position: absolute;
  inset: 0 0 80px;
  width: 100%;
  height: calc(100% - 80px);
  min-width: 0;
  background: transparent;
  opacity: 0;
  transition: opacity .65s ease;
  --poster-color: transparent;
  --progress-bar-height: 0;
  --progress-mask: transparent;
  --progress-bar-color: transparent;
  touch-action: none;
  cursor: var(--howlin-logo-cursor, crosshair);
}

#hsLogo #logoModel::part(default-progress-bar) { display: none; }
#hsLogo .logo-ready #logoModel { opacity: 1; }
#hsLogo .logo-ready #logoFallback { opacity: 0; }
/* Only the rendered logo breathes and trembles; controls stay completely still.
   Separate compositor properties keep the two rhythms independent of 3D orbit. */
#hsLogo .logo-ready #logoModel {
  --logo-jitter: 1;
  transform-origin: 50% 50%;
  animation: hs-logo-breathe 5.8s ease-in-out infinite,
             hs-logo-tremble .87s linear infinite;
  animation-play-state: paused;
}
#hsLogo .logo-ready.logo-alive-active #logoModel { animation-play-state: running; }
#hsLogo .logo-ready.logo-alive-active.logo-held #logoModel {
  --logo-jitter: 2.6;
  animation-duration: 3.4s, .24s;
}
@keyframes hs-logo-breathe {
  0%, 100% { scale: 1; }
  48% { scale: 1.014; }
}
@keyframes hs-logo-tremble {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  11% { transform: translate3d(calc(.55px * var(--logo-jitter)), calc(-.35px * var(--logo-jitter)), 0) rotate(.025deg); }
  23% { transform: translate3d(calc(-.45px * var(--logo-jitter)), calc(.65px * var(--logo-jitter)), 0) rotate(-.035deg); }
  39% { transform: translate3d(calc(.75px * var(--logo-jitter)), calc(.2px * var(--logo-jitter)), 0) rotate(.02deg); }
  51% { transform: translate3d(calc(-.3px * var(--logo-jitter)), calc(-.75px * var(--logo-jitter)), 0) rotate(-.02deg); }
  66% { transform: translate3d(calc(.4px * var(--logo-jitter)), calc(.55px * var(--logo-jitter)), 0) rotate(.035deg); }
  82% { transform: translate3d(calc(-.65px * var(--logo-jitter)), calc(-.15px * var(--logo-jitter)), 0) rotate(-.025deg); }
  94% { transform: translate3d(calc(.2px * var(--logo-jitter)), calc(-.45px * var(--logo-jitter)), 0) rotate(.015deg); }
}
#hsLogo #logoStage button {
  border: 1px solid #ffffff45;
  border-radius: 999px;
  color: #f5f5f7;
  background: #0a0b10c9;
  padding: 10px 16px;
  min-height: 40px;
  font: 10px 'Offside', sans-serif;
  letter-spacing: .035em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color .2s ease, background .2s ease;
}
#hsLogo #logoStage button:hover:not(:disabled) { border-color: #ffffffb3; background: #20212bcf; }
#hsLogo #logoStage button:disabled { cursor: progress; opacity: .7; }
#hsLogo #logoStage button:focus-visible, #hsLogo #logoModel:focus-visible {
  outline: 2px solid #eef2ff;
  outline-offset: 5px;
}
#hsLogo #loadLogo3d, #hsLogo #logoControls {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
}
#hsLogo #logoControls { display: flex; align-items: center; gap: 8px; }
#hsLogo #logoControls [data-logo-turn] { width: 40px; padding: 8px; font-size: 16px; }
#hsLogo #logo3dStatus {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 400px);
  min-height: 28px;
  margin: 0;
  color: #c1c2cc;
  text-align: center;
  font: 10px/1.65 'Offside', sans-serif;
  letter-spacing: .03em;
  pointer-events: none;
}
#hsLogo #logoLocalButton {
  position: absolute;
  left: 50%;
  bottom: -52px;
  transform: translateX(-50%);
}
#hsLogo #logoStage [hidden] { display: none !important; }
#hsLogo.hide #logoStage, #hsLogo.exit-big #logoStage, #hsLogo[aria-hidden="true"] #logoStage {
  pointer-events: none;
}
#hsLogo.hide #logoControls, #hsLogo.exit-big #logoControls,
#hsLogo.hide #loadLogo3d, #hsLogo.exit-big #loadLogo3d,
#hsLogo.hide #logo3dStatus, #hsLogo.exit-big #logo3dStatus { visibility: hidden; }
@media (max-width: 600px) {
  #hsLogo .logo-ready.logo-alive-active.logo-held #logoModel { --logo-jitter: 2; }
  #hsLogo #logoStage { width: 82vw; height: min(65vh, 520px); }
  #hsLogo #logoFallback { width: min(47vw, 255px); }
  #hsLogo #logo3dStatus { width: 78vw; font-size: 9px; }
  #hsLogo #logoStage button { min-height: 42px; }
}
@media (max-height: 540px) and (min-width: 601px) {
  #hsLogo #logoStage { width: 44vw; height: 74vh; min-height: 235px; }
  #hsLogo #logoFallback { width: min(21vw, 205px); }
  #hsLogo #logo3dStatus { bottom: -4px; }
  #hsLogo #logoLocalButton { bottom: -40px; }
}
@media (prefers-reduced-motion: reduce) {
  #hsLogo #logoFallback, #hsLogo #logoModel, #hsLogo #logoStage button { transition: none; }
  #hsLogo .logo-ready #logoModel { animation: none; transform: none; scale: 1; }
}
/* Native 31px orbital cursors stay crisp without another animation loop. */
@media (any-hover: hover) and (any-pointer: fine) {
  #hsLogo #logoModel {
    --howlin-logo-idle-cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231%22%20height%3D%2231%22%20viewBox%3D%220%200%2031%2031%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210%22%20fill%3D%22%23090909%22%20fill-opacity%3D%22.65%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.2%22%2F%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2215%22%20rx%3D%2213.5%22%20ry%3D%225.5%22%20transform%3D%22rotate%28-35%2015%2015%29%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M15%201v4M15%2025v4M1%2015h4M25%2015h4%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%221.5%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E") 15 15, crosshair;
    --howlin-logo-held-cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231%22%20height%3D%2231%22%20viewBox%3D%220%200%2031%2031%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210%22%20fill%3D%22%23090909%22%20fill-opacity%3D%22.8%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2215%22%20rx%3D%2214%22%20ry%3D%226%22%20transform%3D%22rotate%2835%2015%2015%29%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M15%200v5M15%2025v5M0%2015h5M25%2015h5%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22m15%2010%205%205-5%205-5-5z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E") 15 15, crosshair;
    --howlin-logo-cursor: var(--howlin-logo-idle-cursor);
  }
  #hsLogo .logo-pointer-held #logoModel { --howlin-logo-cursor: var(--howlin-logo-held-cursor); }
  body.logo-orbit-cursor #cursor { display: none !important; }
}

/* Phone layout: a stable canvas, generous controls, and native content scrolling. */
@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  :root {
    --rail-w: 50px;
    --phone-height: var(--app-height, 100dvh);
    --phone-top: env(safe-area-inset-top, 0px);
    --phone-bottom: env(safe-area-inset-bottom, 0px);
    --phone-right: env(safe-area-inset-right, 0px);
    --phone-footer: calc(72px + var(--phone-bottom));
  }
  html, body { width: 100%; min-width: 0; overflow: hidden; }
  body, button, a, .card, .ctrl button, .hs-rail a, .hs-rail button, .hs-float { cursor: auto !important; }
  #cursor { display: none !important; }
  .section, .hero, .layer, #hsLogo, #cosmosScene, #videoDialog {
    height: var(--phone-height);
    bottom: auto;
  }
  .hs-rail {
    height: var(--phone-height);
    bottom: auto;
    padding-top: var(--phone-top);
    padding-bottom: calc(12px + var(--phone-bottom));
    background: linear-gradient(90deg, #030305b8, #03030520);
  }
  .hs-btn { width: 44px; height: 44px; margin-top: 8px; }
  .hs-brand { min-width: 44px; padding: 8px 0; font-size: 17px; letter-spacing: .12em; }
  .hs-shop {
    width: 44px;
    min-width: 44px;
    min-height: 58px;
    margin-bottom: 0;
    padding: 8px 9px;
    writing-mode: vertical-rl;
    font-size: 9px;
    letter-spacing: .09em;
  }
  .hs-rail-bar { width: 1px; }
  #railDot { width: 7px; height: 7px; }
  .section-nav {
    right: calc(12px + var(--phone-right));
    bottom: calc(10px + var(--phone-bottom));
    gap: 8px;
  }
  .section-nav button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 22px; }
  #motionToggle {
    left: calc(var(--rail-w) + 10px);
    bottom: calc(10px + var(--phone-bottom));
    min-height: 44px;
    max-width: calc(100vw - var(--rail-w) - 124px - var(--phone-right));
    padding: 8px 12px;
    font-size: 10px;
    line-height: 1.35;
  }
  .layer { left: var(--rail-w); right: 0; padding: 28px 22px calc(var(--phone-footer) + 20px); }
  .wec .txt {
    font-size: clamp(28px, 7.7vw, 52px);
    line-height: 1.17;
    letter-spacing: -.035em;
    text-transform: none;
    max-width: 100%;
    overflow-wrap: normal;
    text-wrap: balance;
  }
  .what .wrap {
    position: absolute;
    left: 24px;
    right: 24px;
    top: calc((var(--phone-height) - var(--phone-footer)) / 2);
    max-width: 540px;
    transform: translateY(-50%);
  }
  .what .main {
    font-size: clamp(27px, 7.4vw, 48px);
    line-height: 1.25;
    letter-spacing: -.025em;
    transform: none;
    white-space: normal;
    text-wrap: balance;
  }
  .what .sub {
    margin-top: 22px;
    max-width: 34ch;
    font-size: clamp(15px, 3.7vw, 18px);
    line-height: 1.65;
  }
  #hsLogo { left: var(--rail-w); padding-bottom: calc(68px + var(--phone-bottom)); }
  #hsLogo #logoStage {
    width: calc(100vw - var(--rail-w) - 20px - var(--phone-right));
    max-width: 520px;
    height: min(570px, calc(var(--phone-height) - 150px - var(--phone-top) - var(--phone-bottom)));
    min-height: 230px;
    max-height: calc(var(--phone-height) - 150px - var(--phone-top) - var(--phone-bottom));
  }
  #hsLogo #logoModel { inset: 0 0 82px; width: 100%; height: calc(100% - 82px); touch-action: pan-y; }
  #hsLogo #logoFallback { width: min(57vw, 270px); max-width: 84%; top: 41%; }
  #hsLogo #logoStage button { min-width: 44px; min-height: 44px; padding: 9px 12px; font-size: 11px; }
  #hsLogo #logoControls { bottom: 28px; gap: 6px; max-width: 100%; }
  #hsLogo #logoControls [data-logo-turn] { width: 44px; padding: 8px; font-size: 20px; }
  #hsLogo #logoControls span { font-size: 9px; letter-spacing: .045em; }
  #hsLogo #loadLogo3d { bottom: 28px; }
  #hsLogo #logo3dStatus { bottom: -8px; width: 100%; min-height: 20px; font-size: 10px; line-height: 1.45; }
  #hsLogo #logoLocalButton { bottom: -46px; }
  #hsLogo .logo-ready #logo3dStatus { display: none; }
  .intro-hint {
    color: #fff;
    background: transparent;
    border: 0;
    min-height: 44px;
    pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
    left: calc(var(--rail-w) + 10px);
    right: calc(10px + var(--phone-right));
    bottom: calc(var(--phone-footer) + 13px);
    transform: none;
    margin: 0;
    padding: 6px 0;
    font-size: 9px;
    letter-spacing: .12em;
  }
  .intro-hint span { display: inline; padding: 0 0 0 8px; font-size: 16px; }
  .sec-title, #packagesTitle, #contactTitle {
    left: calc(var(--rail-w) + 20px);
    right: calc(16px + var(--phone-right));
    top: calc(var(--phone-top) + 34px) !important;
    max-width: none;
    transform: none !important;
    font-size: clamp(23px, 5.8vw, 34px);
    line-height: 1.18;
    letter-spacing: .025em;
  }
  .caro, .poetry .caro {
    left: calc(var(--rail-w) + 10px);
    right: calc(10px + var(--phone-right));
    width: auto;
    top: calc(var(--phone-top) + 123px);
    bottom: calc(var(--phone-bottom) + 162px);
    max-height: none;
    transform: none !important;
    gap: 18px;
    padding: 12px 10px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 10px;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    align-items: center;
  }
  .card, .poetry .card {
    flex: 0 0 min(255px, calc(100vw - var(--rail-w) - 62px - var(--phone-right)));
    max-width: 255px;
    border-radius: 12px;
    transform: none !important;
    scroll-snap-align: center;
  }
  .card img {
    width: 100%;
    height: min(44vh, calc(var(--phone-height) - 350px - var(--phone-top) - var(--phone-bottom)));
    min-height: 100px;
    aspect-ratio: auto;
    object-fit: contain;
  }
  .card.active { box-shadow: 0 0 0 2px #fafafa, 0 12px 34px #0007; }
  .cap { padding: 10px 8px; margin: 0; font-size: 13px; line-height: 1.4; }
  .ctrl {
    left: calc(var(--rail-w) + 20px);
    right: calc(18px + var(--phone-right));
    width: auto;
    bottom: calc(var(--phone-bottom) + 85px);
    min-height: 60px;
    padding-top: 12px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: center;
    transform: none !important;
  }
  .ctrl button { min-width: 44px; min-height: 44px; margin: 0; padding: 8px 0; font-size: 10px; line-height: 1.3; }
  .ctrl .play-film {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: break-word;
  }
  #unreal .ctrl, #books .ctrl { display: flex; justify-content: center; }
  #unreal .ctrl .play-film, #books .ctrl .play-film { max-width: 400px; }
  #unrealCaro .card { flex-basis: 100%; max-width: 100%; }
  #unrealCaro .card img { height: auto; max-height: calc(var(--phone-height) - 360px); min-height: 100px; aspect-ratio: 16/9; object-fit: contain; }
  #booksCaro .card img { object-fit: contain; }
  #heroCluster {
    inset: calc(var(--phone-top) + 102px) calc(14px + var(--phone-right)) calc(var(--phone-footer) + 12px) calc(var(--rail-w) + 16px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 16px 10px;
    align-content: start;
    align-items: start;
    padding: 8px 4px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #heroCluster .hs-float {
    position: relative;
    left: auto;
    top: auto;
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    margin: 0;
    align-self: start;
    transform: none !important;
    border-radius: 10px;
  }
  #heroCluster .hs-float .hs-inner { display: grid; grid-template-rows: auto max-content; width: 100%; height: auto; transform: none !important; }
  #heroCluster .hs-float img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
  #heroCluster .hs-cap { margin: 0; padding: 9px 6px; font-size: 11px; line-height: 1.4; }
  #heroFocus { left: calc(50% + var(--rail-w)/2); top: 50%; width: calc(100vw - var(--rail-w) - 28px - var(--phone-right)); max-width: 620px; }
  #heroFocus .frame { max-height: calc(var(--phone-height) - 155px - var(--phone-top) - var(--phone-bottom)); }
  #heroFocus img { width: 100%; max-height: calc(var(--phone-height) - 205px - var(--phone-top) - var(--phone-bottom)); object-fit: contain; }
  #heroFocus .hs-cap { padding: 10px 8px; margin: 0; font-size: 13px; line-height: 1.4; }
  #heroFocusClose { top: -58px; min-height: 44px; min-width: 44px; padding: 10px 15px; font-size: 11px; }
  #vegasSub {
    left: calc(var(--rail-w) + 20px) !important;
    right: calc(18px + var(--phone-right));
    top: calc(var(--phone-top) + 90px) !important;
    max-width: 45ch;
    padding: 0;
    text-align: left;
    font-size: 12px;
    line-height: 1.7;
    transform: none !important;
  }
  #vegasWrap {
    left: calc(var(--rail-w) + 18px);
    right: calc(18px + var(--phone-right));
    top: calc(var(--phone-top) + 200px);
    bottom: calc(var(--phone-footer) + 26px);
    width: auto;
    aspect-ratio: auto;
    transform: none !important;
    border-radius: 12px;
  }
  .pkg-wrap, .contact .pkg-wrap {
    left: calc(var(--rail-w) + 16px);
    right: calc(12px + var(--phone-right));
    top: calc(var(--phone-top) + 100px) !important;
    bottom: calc(var(--phone-footer) + 10px) !important;
    max-width: none;
    min-height: 0;
    padding: 4px 6px 28px 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-block: 20px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
  }
  .pkg-grid { grid-template-columns: 1fr; gap: 18px; }
  .pkg-card { padding: 18px 16px; }
  .pkg-card h4 { font-size: 17px; letter-spacing: .02em; }
  .pkg-subhead { font-size: 14px; line-height: 1.5; letter-spacing: .04em; }
  .pkg-feat, .pkg-sub { font-size: 14px; line-height: 1.75; }
  .pkg-price { font-size: 29px; margin: 15px 0 18px; }
  .pkg-cta .btn { display: flex; min-height: 46px; align-items: center; justify-content: center; text-align: center; font-size: 11px; line-height: 1.5; letter-spacing: .03em; padding: 10px 12px; }
  .payments { display: none; }
  .form { display: flex; flex-direction: column; gap: 16px; }
  .form label { margin-top: 0; font-size: 11px; line-height: 1.55; letter-spacing: .025em; }
  .form .input, .form select, .form textarea { min-height: 48px; font-size: 16px; line-height: 1.5; padding: 11px 10px; }
  .form textarea { min-height: 150px; }
  .budgets { gap: 8px; }
  .budgets .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 8px 11px; font-size: 11px; }
  .form .send { min-height: 48px; margin-top: 4px; padding: 12px; font-size: 12px; letter-spacing: .025em; }
  #formStatus { font-size: 12px !important; line-height: 1.6; overflow-wrap: break-word; }
  .menu-overlay { height: var(--phone-height); bottom: auto; }
  .menu-inner { padding: calc(var(--phone-top) + 74px) 22px calc(var(--phone-bottom) + 28px); display: block; overflow-y: auto; }
  .menu-grid { gap: 6px; padding: 0; }
  .menu-item { display: flex; min-height: 48px; align-items: center; justify-content: center; font-size: clamp(15px, 4.2vw, 23px); letter-spacing: .035em; padding: 8px 0; line-height: 1.4; }
  .menu-close { top: calc(var(--phone-top) + 14px); right: calc(16px + var(--phone-right)); min-height: 44px; padding: 10px 15px; font-size: 11px; }
  #video { width: 100%; height: var(--phone-height); padding: calc(var(--phone-top) + 68px) 0 calc(var(--phone-bottom) + 6px); object-fit: contain; }
  #close { top: calc(var(--phone-top) + 12px) !important; right: calc(12px + var(--phone-right)) !important; min-width: 70px; min-height: 44px; background: #0c0d11ed !important; }
  #mediaStatus { left: calc(var(--rail-w) + 14px); right: calc(14px + var(--phone-right)); bottom: calc(var(--phone-footer) + 10px); font-size: 12px; }
}

/* Landscape phones need a side-by-side film layout and a shorter logo stage. */
@media (max-height: 500px) and (pointer: coarse) {
  :root { --rail-w: 48px; }
  .hs-btn { margin-top: 2px; }
  .hs-brand { font-size: 14px; letter-spacing: .06em; }
  .hs-shop { min-height: 48px; padding: 6px 8px; }
  .hs-rail { padding-bottom: calc(6px + var(--phone-bottom)); }
  #hsLogo { padding-bottom: 32px; }
  #hsLogo #logoStage { width: min(62vw, 500px); height: calc(var(--phone-height) - 85px - var(--phone-top) - var(--phone-bottom)); min-height: 170px; max-height: none; }
  #hsLogo #logoModel { inset: 0 0 54px; height: calc(100% - 54px); }
  #hsLogo #logoFallback { width: min(25vw, 175px); top: 36%; }
  #hsLogo #logoControls, #hsLogo #loadLogo3d { bottom: 4px; }
  #hsLogo #logo3dStatus { bottom: -20px; min-height: 16px; font-size: 9px; }
  .intro-hint { bottom: calc(10px + var(--phone-bottom)); left: calc(var(--rail-w) + 165px); right: calc(122px + var(--phone-right)); }
  .layer { padding-bottom: calc(44px + var(--phone-bottom)); }
  .wec .txt { font-size: clamp(30px, 5.2vw, 46px); max-width: 16ch; }
  .what .wrap { top: calc((var(--phone-height) - 44px) / 2); left: 7vw; right: 7vw; max-width: 680px; }
  .what .main { font-size: clamp(28px, 4.6vw, 40px); }
  .what .sub { margin-top: 14px; max-width: 52ch; font-size: 15px; line-height: 1.55; }
  .sec-title, #packagesTitle, #contactTitle { top: calc(var(--phone-top) + 30px) !important; font-size: clamp(21px, 3.5vw, 29px); max-width: 11ch; }
  .sec-title { font-size: clamp(18px, 2.8vw, 25px); max-width: calc(31vw - 30px); }
  .caro, .poetry .caro { left: calc(var(--rail-w) + 31vw); top: calc(var(--phone-top) + 20px); bottom: calc(var(--phone-bottom) + 130px); padding: 8px 10px; gap: 16px; }
  .card, .poetry .card { flex-basis: min(190px, 29vw); max-width: 220px; }
  .card img { height: max(85px, calc(var(--phone-height) - 223px - var(--phone-top) - var(--phone-bottom))); min-height: 85px; }
  .cap { font-size: 11px; padding: 7px 8px; }
  .ctrl { left: calc(var(--rail-w) + 31vw); right: calc(18px + var(--phone-right)); bottom: calc(var(--phone-bottom) + 67px); padding-top: 8px; min-height: 56px; }
  .ctrl .play-film { min-height: 44px; font-size: 11px; }
  #unrealCaro .card { flex-basis: 100%; }
  #unrealCaro .card img { min-height: 85px; max-height: calc(var(--phone-height) - 215px); width: 100%; height: auto; aspect-ratio: 16/9; }
  #heroCluster { top: calc(var(--phone-top) + 86px); bottom: calc(var(--phone-footer) + 2px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #heroCluster .hs-float img { aspect-ratio: 1/1; }
  #heroFocus { top: 55%; width: min(470px, 68vw); }
  #heroFocus .frame { max-height: calc(var(--phone-height) - 115px); }
  #heroFocus img { max-height: calc(var(--phone-height) - 155px); }
  #heroFocusClose { top: -50px; }
  #vegasSub { top: calc(var(--phone-top) + 97px) !important; left: calc(var(--rail-w) + 20px) !important; width: 27vw; font-size: 11px; }
  #vegasWrap { left: calc(var(--rail-w) + 33vw); top: calc(var(--phone-top) + 27px); bottom: calc(var(--phone-footer) + 12px); }
  .pkg-wrap, .contact .pkg-wrap { top: calc(var(--phone-top) + 85px) !important; bottom: calc(var(--phone-footer) + 2px) !important; }
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact .form .full, .contact .form .send, #formStatus { grid-column: 1 / -1; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .menu-item { font-size: 16px; }
}

@media (max-width: 350px) and (min-height: 501px) {
  :root { --rail-w: 48px; }
  .wec .txt { font-size: 27px; }
  .what .wrap { left: 18px; right: 18px; }
  .what .main { font-size: 26px; }
  .what .sub { font-size: 15px; }
  #hsLogo #logoControls { gap: 4px; }
  #hsLogo #logoControls span { max-width: 70px; white-space: normal; text-align: center; font-size: 9px; line-height: 1.5; }
  #hsLogo #logoStage button { padding-inline: 8px; }
  .ctrl { left: calc(var(--rail-w) + 14px); right: 12px; gap: 4px; }
  .ctrl .play-film { padding-inline: 6px; font-size: 11px; }
  #motionToggle { padding-inline: 9px; font-size: 9px; }
}

/* Packages and Contact use one continuous page surface, not inner scroll boxes. */
#packages,
#contact {
  box-sizing: border-box;
  height: var(--app-height, 100dvh);
  bottom: auto;
  padding: clamp(50px, 8vh, 88px) 5vw 112px calc(var(--rail-w) + 5vw);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: 28px 100px;
  scrollbar-width: thin;
  scrollbar-color: #82618a66 transparent;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#packages .sec-title,
#contact .sec-title {
  position: relative;
  inset: auto !important;
  transform: none !important;
  width: auto;
  max-width: none;
  margin: 0 0 34px;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.18;
}

#packages .pkg-wrap,
#contact .pkg-wrap {
  position: static;
  inset: auto !important;
  transform: none !important;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  max-width: none;
  box-sizing: border-box;
  overflow: visible;
  padding: 0;
  display: grid;
  align-content: start;
  align-items: start;
  gap: 26px;
}

#packages .pkg-wrap {
  grid-template-columns: minmax(0, 1fr) 200px;
}

#packages .package-before-order {
  position: relative;
  top: auto;
}

#packages .pkg-wrap > div,
#contact .pkg-wrap > * {
  min-width: 0;
}

#contact .pkg-wrap {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
  gap: clamp(26px, 4vw, 64px);
}

#contact .form {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#contact .form > div,
#contact .input {
  min-width: 0;
}

#contact .contact-orbit {
  width: 100%;
  min-width: 0;
  margin: 0;
  align-self: center;
}

@media (max-width: 1200px) {
  #packages .pkg-wrap { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  #contact .pkg-wrap { grid-template-columns: minmax(0, 1fr) !important; }
  #contact .contact-orbit { max-width: 580px; justify-self: center; }
}

@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  #packages,
  #contact {
    height: var(--phone-height, var(--app-height, 100dvh));
    padding: calc(var(--phone-top, 0px) + 36px)
      calc(18px + var(--phone-right, 0px))
      calc(var(--phone-footer, 72px) + 34px)
      calc(var(--rail-w) + 20px);
    scroll-padding-block: 22px calc(var(--phone-footer, 72px) + 22px);
  }
  #packages .sec-title,
  #contact .sec-title {
    margin-bottom: 27px;
    font-size: clamp(23px, 5.8vw, 34px);
    letter-spacing: .025em;
  }
  #packages .pkg-wrap,
  #contact .pkg-wrap { gap: 24px; }
  #packages .package-before-order { position: relative; }
  #contact .form { display: flex; }
}

@media (max-height: 500px) and (pointer: coarse) {
  #packages,
  #contact { padding-top: calc(var(--phone-top, 0px) + 26px); }
  #packages .sec-title,
  #contact .sec-title { font-size: 25px; margin-bottom: 24px; }
  #contact .form { display: grid; }
}

.contact-orbit {
  position: relative;
  align-self: center;
  min-width: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  color: #e9d9ef;
  pointer-events: none;
  isolation: isolate;
}
.contact-orbit-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.02;
  min-height: 290px;
}
.contact-orbit-stage::before {
  content: '';
  position: absolute;
  inset: 12% 4%;
  background: radial-gradient(ellipse at 50% 53%, #72219a26 0%, #77219b0d 36%, transparent 69%);
  z-index: -1;
}
.contact-orbit canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-orbit figcaption {
  margin: -3% auto 0;
  padding: 0 14px 20px;
  text-align: center;
  font: 15px/1.6 'Offside', sans-serif;
  letter-spacing: .035em;
  color: #decae8;
  text-wrap: balance;
}
.contact-orbit figcaption::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto 18px;
  background: linear-gradient(90deg, transparent, #c575dc, transparent);
}
@media (max-width: 800px) {
  .contact-orbit { max-width: 420px; margin-top: 20px; }
  .contact-orbit-stage { aspect-ratio: 1.15 / 1; min-height: 230px; }
  .contact-orbit figcaption { font-size: 13px; padding-bottom: 16px; }
}

/* The hidden logo reward lives in the browser's top layer. */
dialog#howlinReward {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  padding: max(80px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  border: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: #fff;
  background: transparent;
  font-family: 'Offside', sans-serif;
  cursor: auto;
  isolation: isolate;
}
dialog#howlinReward[open] { display: grid; place-items: center; }
dialog#howlinReward[data-phase="revealed"] { background: #05020a; }
dialog#howlinReward::backdrop { background: #05020926; }
body.reward-open #cursor { display: none !important; }
dialog#howlinReward, dialog#howlinReward * { cursor: auto; }
#howlinReward .reward-cosmos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#howlinReward .reward-panel {
  position: relative;
  width: min(100%, 660px);
  box-sizing: border-box;
  padding: clamp(26px, 5vw, 60px) clamp(20px, 5vw, 52px);
  border: 1px solid #ba72dd55;
  border-radius: 26px;
  text-align: center;
  background: linear-gradient(145deg, #1c0d2ae8, #08040df5 70%);
  box-shadow: 0 0 100px #9a26c324, inset 0 1px 0 #ffffff10;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  visibility: hidden;
  transition: opacity .65s ease, transform .85s cubic-bezier(.16,1,.3,1), visibility .65s;
}
#howlinReward[data-phase="revealed"] .reward-panel { opacity: 1; transform: none; visibility: visible; }
#howlinReward .reward-kicker { margin: 0 0 20px; color: #d7a9eb; font-size: 11px; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; }
#howlinReward .reward-title { margin: 0; color: #fff; font-size: clamp(25px, 3.4vw, 43px); font-weight: 400; line-height: 1.38; letter-spacing: -.025em; text-transform: none; overflow-wrap: anywhere; }
#howlinReward .reward-title em { color: #e1b2f2; font-style: normal; }
#howlinReward .reward-continue, #howlinReward .reward-close, #howlinReward .reward-copy {
  appearance: none;
  font: 12px/1.4 'Offside', sans-serif;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid #dcb4e866;
  cursor: pointer;
  letter-spacing: .01em;
  transition: background .2s ease, border-color .2s ease;
}
#howlinReward .reward-continue { margin-top: 30px; padding: 14px 25px; color: #13081b; background: #f5ebff; }
#howlinReward .reward-continue:hover { background: #e9cafa; }
#howlinReward .reward-code-block { margin-top: 27px; }
#howlinReward .reward-code-label { margin: 0 0 10px; color: #d7a9eb; font-size: 11px; letter-spacing: .08em; }
#howlinReward .reward-code-row { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 10px; }
#howlinReward .reward-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 18px; box-sizing: border-box;
  border: 1px dashed #ce97e899; border-radius: 12px;
  color: #f8ecff; background: #100719; font: 19px/1.5 'Offside', sans-serif;
  letter-spacing: .09em; cursor: text; user-select: all; -webkit-user-select: all;
}
#howlinReward .reward-code:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#howlinReward .reward-copy { padding: 10px 18px; color: #efd8fb; background: #311343; }
#howlinReward .reward-copy:hover { border-color: #ebc4ff; background: #44205a; }
#howlinReward .reward-copy:disabled { opacity: .65; cursor: progress; }
#howlinReward .reward-code-note { margin: 12px 0 0; color: #bc9dc9; font-size: 11px; line-height: 1.6; }
#howlinReward .reward-copy-status { margin: 8px 0 0; color: #eee0f6; font-size: 11px; line-height: 1.6; }
#howlinReward .reward-copy-status:empty { display: none; }
#howlinReward .reward-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 2;
  padding: 10px 16px;
  color: #fff;
  background: #10091ddd;
}
#howlinReward .reward-close:hover { background: #2c153e; border-color: #e2b6f8; }
#howlinReward button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
#hsLogo #logoStage #rewardReopen { color: #e7c6f4; border-color: #ba72dd99; background: #21102fe6; }
@media (max-width: 400px) {
  dialog#howlinReward { padding-inline: 16px; }
  #howlinReward .reward-panel { padding: 28px 20px; border-radius: 22px; }
  #howlinReward .reward-title { font-size: 25px; }
  #howlinReward .reward-kicker { font-size: 10px; letter-spacing: .15em; }
  #howlinReward .reward-code { flex: 1 1 auto; }
  #howlinReward .reward-copy { flex: 1 1 auto; }
}
@media (max-height: 450px) and (orientation: landscape) {
  dialog#howlinReward { padding-top: 72px; padding-bottom: 24px; }
  #howlinReward .reward-panel { padding: 22px 28px; }
  #howlinReward .reward-title { font-size: 25px; }
  #howlinReward .reward-kicker { margin-bottom: 12px; }
  #howlinReward .reward-continue { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #howlinReward .reward-panel, #howlinReward button { transition: none; }
}

/* An event-driven game HUD: progress stays charged between deliberate spins. */
#hsLogo { padding-bottom: 64px; box-sizing: border-box; }
#hsLogo #logoModel { inset: 0 0 150px; height: calc(100% - 150px); }
#hsLogo #logoControls { bottom: 92px; width: max-content; }
#hsLogo #logoControls span { white-space: nowrap; max-width: none; flex-shrink: 0; }
#hsLogo .logo-ready #logo3dStatus { display: none; }
#hsLogo #logoCharge {
  --charge-progress: 0%;
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: min(360px, calc(100% - 20px));
  box-sizing: border-box;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  color: #e9d6fa;
  font-family: 'Offside', sans-serif;
  text-align: left;
}
#hsLogo .logo-ready #logoCharge { opacity: 1; visibility: visible; }
#hsLogo.hide #logoCharge, #hsLogo.exit-big #logoCharge,
#hsLogo[aria-hidden="true"] #logoCharge { visibility: hidden; }
#logoCharge .charge-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-inline: 2px;
  margin-bottom: 7px;
}
#logoCharge .charge-label {
  color: #cda7e9;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .19em;
  white-space: nowrap;
}
#logoCharge .charge-label::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 8px 1px 0;
  background: #bb71df;
  transform: rotate(45deg);
}
#logoCharge .charge-percent {
  color: #f0dfff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}
#logoCharge .charge-track {
  position: relative;
  height: 24px;
  box-sizing: border-box;
  padding: 5px;
  background: linear-gradient(100deg, #85519e, #482458 55%, #b670d1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
#logoCharge .charge-track::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: #0c0712;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
#logoCharge .charge-fill {
  position: relative;
  display: block;
  width: var(--charge-progress);
  max-width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #6d32b2, #a75cdb 62%, #edb5ff);
  box-shadow: 0 0 12px #c57be777;
  transition: width .12s linear, filter .18s ease;
}
#logoCharge .charge-segments {
  position: absolute;
  inset: 5px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(5% - 3px), #0c0712 calc(5% - 3px), #0c0712 5%);
}
#logoCharge .charge-hint {
  margin: 8px 0 0;
  color: #b79ac9;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .035em;
  text-align: center;
}
#logoCharge.is-charging .charge-fill { filter: brightness(1.28); }
#logoCharge.is-charging .charge-label::before { background: #f3caff; box-shadow: 0 0 9px #bc73e6; }
#logoCharge.is-earned .charge-track { background: linear-gradient(100deg, #dfb9f9, #8c52ab 55%, #e6c2fa); }
#logoCharge.is-earned .charge-fill { background: linear-gradient(90deg, #a471d1, #e6bcfb); }
#logoCharge.is-earned .charge-hint { color: #e3bef8; }
#logoCharge .charge-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Leave the separate Explore and motion/navigation controls unobstructed. */
@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  #hsLogo { padding-bottom: calc(68px + var(--phone-bottom)); }
  #hsLogo #logoStage {
    height: min(570px, calc(var(--phone-height) - 200px - var(--phone-top) - var(--phone-bottom)));
    min-height: 220px;
    max-height: calc(var(--phone-height) - 200px - var(--phone-top) - var(--phone-bottom));
  }
  #hsLogo #logoModel { inset: 0 0 146px; height: calc(100% - 146px); }
  #hsLogo #logoControls { bottom: 91px; }
  #hsLogo #logoCharge { width: min(340px, calc(100% - 16px)); bottom: 6px; }
  #logoCharge .charge-label { font-size: 9px; letter-spacing: .14em; }
  #logoCharge .charge-percent { font-size: 13px; }
  #logoCharge .charge-hint { font-size: 9px; }
}
/* A side-by-side instrument strip preserves height for the logo on landscape phones. */
@media (max-height: 500px) and (min-width: 601px) {
  #hsLogo { padding-bottom: 32px; }
  #hsLogo #logoStage {
    width: min(70vw, 540px);
    height: calc(var(--app-height, 100dvh) - 85px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 170px;
    max-height: none;
  }
  #hsLogo #logoModel { inset: 0 0 84px; height: calc(100% - 84px); }
  #hsLogo #logoControls { left: auto; right: 0; bottom: 19px; transform: none; gap: 6px; }
  #hsLogo #logoCharge { left: 0; bottom: 10px; width: calc(100% - 225px); transform: none; }
  #logoCharge .charge-meta { margin-bottom: 5px; }
  #logoCharge .charge-track { height: 21px; }
  #logoCharge .charge-hint { margin-top: 5px; font-size: 9px; }
  #logoCharge .charge-label { font-size: 9px; letter-spacing: .1em; }
  #logoCharge .charge-percent { font-size: 12px; }
}
body:has(#motionToggle[aria-pressed="true"]) #logoCharge .charge-fill { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #logoCharge .charge-fill { transition: none; }
}

/* Select a still with the poster; use the dedicated Play button for the film. */
#caro .card[data-project="hamilton"] img { aspect-ratio: 4/5; object-fit: contain; object-position: center; }
#unrealCaro { justify-content: flex-start; }
#unrealCaro .card { flex: 0 0 min(25vw, 280px, calc((76vh - 100px) * .5625)); max-width: 280px; }
#unrealCaro .card img { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 9/16; object-fit: contain; }
#unrealCaro .cap { background: rgba(5, 5, 8, .88); }
@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  #unreal .ctrl { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  #unrealCaro .card { flex-basis: min(255px, calc(100vw - var(--rail-w) - 62px - var(--phone-right)), calc((var(--phone-height) - 375px - var(--phone-top) - var(--phone-bottom)) * .5625)); }
}
@media (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  #unrealCaro .card { flex-basis: max(60px, calc((var(--phone-height) - 240px - var(--phone-top) - var(--phone-bottom)) * .5625)); }
  #unrealCaro .cap { padding: 5px; font-size: 10px; }
}

/* Both film carousels use 4:5 frames while preserving the full artwork. */
#caro, #unrealCaro {
  --poster-width: min(280px, calc((76vh - 170px) * .8));
  top: 50%;
  bottom: auto;
  height: 76vh;
  max-height: 76vh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
#caro::-webkit-scrollbar, #unrealCaro::-webkit-scrollbar { display: none; width: 0; height: 0; }
#caro .card, #unrealCaro .card {
  flex: 0 0 var(--poster-width);
  width: var(--poster-width);
  max-width: none;
  background: #08070b;
}
#caro .card img, #unrealCaro .card img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
}
#caro .cap, #unrealCaro .cap { background: #08070bea; }

/* Keep the carousel and its controls together on the right on wide monitors. */
@media (min-width: 1201px) {
  #caro, #unrealCaro { width: min(50vw, 960px); }
  #adv .ctrl, #unreal .ctrl { width: min(48vw, calc(960px - 2vw)); }
}

/* A square Las Vegas player preserves the full video with contain. */
#vegasWrap {
  left: auto;
  right: 6vw;
  top: 48%;
  bottom: auto;
  width: min(48vw, 66vh, 690px);
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translateY(calc(-50% + var(--reveal)));
}
#vegasPlayer { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }

/* Lift the Las Vegas copy clear of the projected artwork behind it. */
#vegasTitle, #vegasSub { translate: 0 clamp(-64px, -5vh, -28px); }
@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  #vegasTitle, #vegasSub { translate: 0 -10px; }
}

@media (min-width: 801px) and (max-width: 1200px) {
  #caro, #unrealCaro {
    --poster-width: min(240px, calc((56vh - 110px) * .8));
    top: 24vh;
    bottom: 20vh;
    height: auto;
    max-height: none;
    transform: none !important;
  }
  #vegasTitle { top: 40% !important; max-width: 10ch; }
  #vegasSub { left: calc(var(--rail-w) + 5vw) !important; top: 57% !important; max-width: 26ch; width: 28vw; }
  #vegasWrap { left: auto; right: 4vw; top: 48%; bottom: auto; width: min(44vw, 64vh); transform: translateY(-50%) !important; }
}
@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  #caro, #unrealCaro {
    --poster-width: min(255px, calc(100vw - var(--rail-w) - 62px - var(--phone-right)), calc((var(--phone-height) - 365px - var(--phone-top) - var(--phone-bottom)) * .8));
    top: calc(var(--phone-top) + 123px);
    bottom: calc(var(--phone-bottom) + 162px);
    height: auto;
    max-height: none;
    transform: none !important;
  }
  #vegasWrap {
    left: calc(var(--rail-w) + (100vw - var(--rail-w) - var(--vegas-size)) / 2);
    right: auto;
    top: calc(var(--phone-top) + 190px);
    bottom: auto;
    --vegas-size: min(calc(100vw - var(--rail-w) - 36px - var(--phone-right)), calc(var(--phone-height) - 300px - var(--phone-top) - var(--phone-bottom)));
    width: var(--vegas-size);
    height: var(--vegas-size);
    aspect-ratio: 1;
    transform: none !important;
  }
}
@media (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  #caro, #unrealCaro {
    --poster-width: max(60px, calc((var(--phone-height) - 240px - var(--phone-top) - var(--phone-bottom)) * .8));
    top: calc(var(--phone-top) + 20px);
    bottom: calc(var(--phone-bottom) + 130px);
  }
  #caro .cap, #unrealCaro .cap { padding: 5px; font-size: 10px; }
  #vegasWrap {
    --vegas-size: min(43vw, calc(var(--phone-height) - 130px - var(--phone-top) - var(--phone-bottom)));
    left: auto;
    right: 7vw;
    top: calc(var(--phone-top) + 32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #caro, #unrealCaro { scroll-behavior: auto; }
}

/* Keep the fixed-position heading anchored while its layer fades out. A
   transform on the parent would change its containing block by the rail width. */
.layer.what,
.layer.what.enter,
.layer.what.leave,
.layer.what.show {
  transform: none;
  transition: opacity .48s ease;
}

#contactOrbit .contact-orbit-stage {
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
#contactOrbit .contact-orbit-stage:focus-visible {
  outline: 1px solid #ffffff80;
  outline-offset: -12px;
  border-radius: 50%;
}
#contactOrbit .orbit-hint {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #ffffff99;
}
@media (prefers-reduced-motion: reduce) {
  .layer.what { transition: none; }
}

/* Keep package choices inside a single screen. Each category remains one click away. */
#packages.packages-fit {
  overflow: hidden;
  padding: clamp(24px, 5vh, 52px) 4vw 80px calc(var(--rail-w) + 4vw);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 18px);
}
#packages.packages-fit .sec-title {
  margin: 0;
  flex: 0 0 auto;
  font-size: clamp(26px, 3.1vw, 42px);
}
#packages.packages-fit .pkg-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 18px);
  width: 100%;
  min-height: 0;
}
#packages.packages-fit .package-before-order {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  gap: 16px;
  border-radius: 12px;
  flex-shrink: 0;
}
#packages.packages-fit .package-before-order h3 { font-size: 17px; margin: 0 0 3px; }
#packages.packages-fit .package-before-order p { font-size: 12px; line-height: 1.4; }
#packages.packages-fit .package-before-order .package-contact { min-height: 44px; padding: 10px 14px; font-size: 12px; }
#packages.packages-fit .package-comparison { width: 100%; min-height: 0; }
#packages.packages-fit .package-types {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: #ffffff08;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  margin-bottom: 10px;
}
#packages.packages-fit .package-types button,
#packages.packages-fit .package-picker button {
  cursor: pointer !important;
  font: 12px/1.3 'Offside', sans-serif;
  color: #ded4e3;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 22px;
  min-height: 38px;
}
#packages.packages-fit .package-types [aria-selected="true"],
#packages.packages-fit .package-picker [aria-pressed="true"] { color: #0a080d; background: #f5edf8; }
#packages.packages-fit .package-types button:focus-visible,
#packages.packages-fit .package-picker button:focus-visible { outline: 2px solid white; outline-offset: 4px; }
#packages.packages-fit .package-picker { display: none; }
#packages.packages-fit .package-order-status { margin: 0 0 9px; font-size: 11px; line-height: 1.4; }
#packages.packages-fit .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#packages.packages-fit .pkg-grid[hidden] { display: none !important; }
#packages.packages-fit .pkg-card {
  display: flex;
  flex-direction: column;
  padding: 15px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, #201428c7, #0c0813b8);
  min-width: 0;
}
#packages.packages-fit .pkg-card h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; letter-spacing: .025em; }
#packages.packages-fit .pkg-sub { font-size: 12px; line-height: 1.4; }
#packages.packages-fit .pkg-price { font-size: 28px; line-height: 1.2; margin: 12px 0; }
#packages.packages-fit .package-inclusions {
  margin: 0 0 15px;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
  font: 12px/1.45 'Offside', sans-serif;
  color: #e1d8e6;
}
#packages.packages-fit .package-inclusions li { position: relative; padding-left: 15px; }
#packages.packages-fit .package-inclusions li::before { content: '·'; position: absolute; left: 1px; color: #fff; }
#packages.packages-fit .pkg-cta { margin-top: auto; }
#packages.packages-fit .pkg-cta .btn { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 12px; }
#packages.packages-fit .package-payments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#packages.packages-fit .package-payments h4 { font: 11px/1.5 'Offside', sans-serif; margin: 0 4px 0 0; letter-spacing: 0; opacity: .8; }
#packages.packages-fit .package-payments .badge { font: 10px/1.5 'Offside', sans-serif; margin: 0; padding: 4px 9px; border-color: #ffffff24; }
@media (min-width: 801px) and (max-height: 800px) {
  #packages.packages-fit { padding-top: 28px; gap: 10px; }
  #packages.packages-fit .sec-title { font-size: 30px; }
  #packages.packages-fit .pkg-wrap { gap: 10px; }
  #packages.packages-fit .package-before-order { padding-block: 10px; }
  #packages.packages-fit .pkg-card { padding: 13px 15px; }
  #packages.packages-fit .package-inclusions { gap: 4px; margin-bottom: 12px; }
}
@media (max-width: 800px), (max-height: 500px) and (pointer: coarse) {
  #packages.packages-fit {
    padding: calc(var(--phone-top, 0px) + 28px) calc(16px + var(--phone-right, 0px))
      calc(var(--phone-footer, 72px) + 18px) calc(var(--rail-w) + 16px);
    gap: 10px;
  }
  #packages.packages-fit .sec-title { font-size: 24px; }
  #packages.packages-fit .pkg-wrap { gap: 10px; }
  #packages.packages-fit .package-before-order { flex-direction: row; align-items: center; gap: 9px; padding: 11px 12px; }
  #packages.packages-fit .package-before-order h3 { font-size: 13px; margin-bottom: 4px; }
  #packages.packages-fit .package-before-order p { font-size: 11px; line-height: 1.45; }
  #packages.packages-fit .package-before-order .package-contact { font-size: 10px; padding: 8px; gap: 5px; align-self: center; }
  #packages.packages-fit .package-types { display: flex; margin-bottom: 8px; }
  #packages.packages-fit .package-types button { flex: 1; font-size: 11px; min-height: 40px; padding: 9px; }
  #packages.packages-fit .package-picker { display: flex; gap: 5px; margin-bottom: 10px; }
  #packages.packages-fit .package-picker button { flex: 1; min-width: 0; font-size: 10px; min-height: 40px; padding: 7px 3px; border-color: #ffffff30; border-radius: 9px; }
  #packages.packages-fit .package-order-status { font-size: 10px; margin-bottom: 9px; }
  #packages.packages-fit .pkg-grid { display: block; }
  #packages.packages-fit .pkg-card { display: none; padding: 14px; }
  #packages.packages-fit .pkg-card.package-picked { display: flex; }
  #packages.packages-fit .package-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  #packages.packages-fit .pkg-card h4 { font-size: 15px; }
  #packages.packages-fit .pkg-sub { font-size: 10px; }
  #packages.packages-fit .pkg-price { font-size: 27px; margin: 9px 0; }
  #packages.packages-fit .package-inclusions { font-size: 11px; gap: 4px; margin-bottom: 12px; }
  #packages.packages-fit .package-payments { gap: 5px; }
  #packages.packages-fit .package-payments h4 { font-size: 10px; margin-right: 2px; }
  #packages.packages-fit .package-payments .badge { font-size: 9px; padding: 3px 6px; }
}
@media (max-height: 700px) {
  #packages.packages-fit { padding-top: 20px; gap: 8px; }
  #packages.packages-fit .pkg-wrap { gap: 8px; }
  #packages.packages-fit .package-before-order p { display: none; }
  #packages.packages-fit .package-before-order h3 { margin: 0; }
  #packages.packages-fit .package-before-order { padding: 8px 12px; }
  #packages.packages-fit .package-inclusions { font-size: 11px; gap: 3px; }
  #packages.packages-fit .pkg-card { padding: 11px 13px; }
  #packages.packages-fit .pkg-price { margin: 8px 0; font-size: 25px; }
}
@media (max-width: 800px) and (max-height: 620px) {
  #packages.packages-fit { padding-top: 12px; gap: 7px; }
  #packages.packages-fit .sec-title { font-size: 21px; }
  #packages.packages-fit .pkg-wrap { gap: 7px; }
  #packages.packages-fit .package-before-order { padding: 7px 9px; gap: 7px; }
  #packages.packages-fit .package-before-order h3 { font-size: 12px; }
  #packages.packages-fit .package-before-order .package-contact { font-size: 9px; padding: 7px; }
  #packages.packages-fit .package-types { margin-bottom: 6px; }
  #packages.packages-fit .package-types button { min-height: 32px; padding: 6px; }
  #packages.packages-fit .package-picker { margin-bottom: 7px; }
  #packages.packages-fit .package-picker button { min-height: 33px; padding-block: 5px; font-size: 9px; }
  #packages.packages-fit .package-order-status { font-size: 9px; margin-bottom: 6px; }
  #packages.packages-fit .pkg-card { padding: 10px 12px; }
  #packages.packages-fit .pkg-card h4 { font-size: 13px; }
  #packages.packages-fit .pkg-price { font-size: 24px; margin: 7px 0; }
  #packages.packages-fit .package-inclusions { font-size: 10px; line-height: 1.4; gap: 3px; margin-bottom: 9px; }
  #packages.packages-fit .package-payments .badge { padding: 2px 4px; font-size: 8px; }
}

/* Contact delivery and resilient logo presentation. */
#hsLogo .logo-static #logoFallback{opacity:1;filter:drop-shadow(0 0 22px rgba(166,88,201,.25))}
#hsLogo .logo-static #logoModel,#hsLogo .logo-static #logoControls,#hsLogo .logo-static #loadLogo3d,#hsLogo .logo-static #logo3dStatus,#hsLogo .logo-static #logoCharge{display:none!important}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#poetryCaro .card img{object-fit:contain}
body[data-section="poetry"] .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050307b3,transparent 65%),linear-gradient(0deg,#050307bf,transparent 45%)}
#poetryCaro .cap{background:#100d14}
#poetry .ctrl button{background:#100d14e6;border:1px solid #ffffff55;border-radius:999px;padding:10px 14px;font-size:12px;opacity:1}
#poetry .ctrl #poetryView{background:#fff;color:#100d14;border-color:#fff;text-transform:none}
.what .main{margin:0}
.what .studio-about{max-width:620px;margin:24px 0;font:clamp(14px,1.45vw,19px)/1.7 'Offside',sans-serif;color:#d6cbdc;letter-spacing:0;text-transform:none}
.what .studio-contact{min-height:44px;display:inline-flex;align-items:center;letter-spacing:.02em;pointer-events:auto}
@media(max-width:800px){.what .studio-about{margin:18px 0;line-height:1.6}.what .studio-contact{font-size:11px}#poetry .ctrl button{font-size:10px;padding:10px}}
.contact-status,.contact-direct{font:14px/1.6 'Offside',sans-serif;margin:0;color:#d6cbdc}
.contact-direct a{color:#fff;text-decoration:underline;text-underline-offset:4px}
#contact label{font-size:14px}#contact .input{font-size:16px}
#contact .send:disabled{opacity:.55;cursor:wait}
@media(max-width:600px){.contact-actions .btn{flex:1 1 100%;min-height:44px}.contact-direct a{overflow-wrap:anywhere}}