/* Valeika Drifting 2027 – asphalt black, car-yellow accent, condensed italic display type, diagonal cuts. Single dark look by design. */
:root{
  --ink:#0E1012; --ink2:#15181C; --ink3:#1E2227; --line:#2A2F36;
  --fg:#F3F1EA; --body:#C6CBD2; --mut:#8F96A0;
  --y:#F7C600; --y-ink:#2B2405; --blue:#2F6BFF; --paper:#CDCCCA;
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --text:'Barlow','Helvetica Neue',Arial,sans-serif;
  --barH:68px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--fg);font-family:var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0;padding:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
a{color:inherit}

/* ================= LANDING ================= */
#landing{position:fixed;inset:0;overflow:hidden;background:var(--ink);z-index:5}
.l-bg{position:absolute;inset:0;overflow:hidden}
.l-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.12);animation:kb 22s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
.l-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,18,.96) 0%,rgba(14,16,18,.82) 38%,rgba(14,16,18,.25) 70%,rgba(14,16,18,.55) 100%),linear-gradient(0deg,rgba(14,16,18,.9),rgba(14,16,18,0) 45%)}
.l-rail{position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--y)}
.l-wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-inline:clamp(24px,6vw,110px);padding-block:clamp(24px,5vh,56px) clamp(24px,6vh,64px);gap:32px;overflow-y:auto}
.l-brand{font:italic 800 clamp(18px,1.6vw,26px)/1 var(--display);letter-spacing:5px;text-transform:uppercase}
.l-brand span{color:var(--y)}
.l-hero{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px)}
.l-year{font:italic 900 clamp(64px,10vw,170px)/.85 var(--display);color:transparent;-webkit-text-stroke:2px var(--y);letter-spacing:-2px}
.l-name{font:italic 900 clamp(56px,9vw,160px)/.88 var(--display);text-transform:uppercase;letter-spacing:-1px;text-wrap:balance}
.l-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;font:500 clamp(14px,1.2vw,19px)/1.3 var(--text);color:var(--body)}
.l-tags li:first-child{color:var(--y)}
.l-choose{font:600 clamp(12px,1vw,15px)/1.3 var(--text);letter-spacing:3px;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.l-langs{display:grid;grid-template-columns:repeat(3,minmax(0,280px));gap:14px}
.l-lang{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 24px 18px;background:rgba(30,34,39,.82);border-top:5px solid var(--y);text-decoration:none;transition:background .25s,transform .25s,color .25s;backdrop-filter:blur(6px);min-width:0}
.l-lang b{font:italic 900 clamp(44px,4.2vw,68px)/.9 var(--display)}
.l-lang span{font:600 clamp(16px,1.3vw,20px)/1.2 var(--text)}
.l-lang i{font:normal 500 14px/1.3 var(--text);color:var(--mut);margin-top:6px}
.l-lang:hover,.l-lang:focus-visible{background:var(--y);color:var(--ink);transform:translateY(-4px);outline:none}
.l-lang:hover i,.l-lang:focus-visible i{color:var(--y-ink)}
@media (prefers-reduced-motion:no-preference){
  .l-year{animation:pop .8s .15s both cubic-bezier(.2,1.4,.4,1)}
  .l-name{animation:slam .8s .35s both cubic-bezier(.16,1,.3,1)}
  .l-tags{animation:up .7s .8s both ease-out}
  .l-pick{animation:up .7s 1s both ease-out}
}
@keyframes slam{from{opacity:0;transform:translateX(-60px) skewX(-12deg) scale(1.12)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .l-langs{grid-template-columns:1fr}
  .l-lang{flex-direction:row;align-items:baseline;gap:14px;padding:14px 18px}
  .l-lang i{display:none}
  .l-shade{background:linear-gradient(0deg,rgba(14,16,18,.97) 30%,rgba(14,16,18,.55) 70%,rgba(14,16,18,.75))}
}

/* ================= APP / STAGE ================= */
#app{position:fixed;inset:0;display:grid;grid-template-rows:1fr var(--barH);background:#000}
#viewport{position:relative;overflow:hidden;touch-action:pan-y}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--k,.5));overflow:hidden;background:var(--ink)}
.slide{position:absolute;inset:0;overflow:hidden;visibility:hidden;background:var(--ink);color:var(--fg)}
.slide.on{visibility:visible}
.slide > *{position:absolute}
.ph > *{position:absolute}
.bg{left:0;top:0;width:100%;height:100%;object-fit:cover}
.fill{left:0;top:0;width:100%;height:100%}
.rail{left:0;top:0;width:14px;height:1080px;background:var(--y)}
.stack{display:flex;flex-direction:column}
.eb{font:600 26px/1 var(--text);letter-spacing:6px;text-transform:uppercase;color:var(--y)}
.h1{font:italic 900 190px/.9 var(--display);text-transform:uppercase;letter-spacing:-2px}
.h2{font:italic 800 104px/.95 var(--display);text-transform:uppercase;letter-spacing:-1px;text-wrap:balance}
.pill{background:var(--y);color:var(--ink);font:700 24px/1 var(--text);letter-spacing:5px;text-transform:uppercase;padding:14px 22px}
.outline{font:italic 900 250px/1 var(--display);color:transparent;-webkit-text-stroke:3px var(--y);letter-spacing:-4px}
.brand{font:italic 800 32px/1 var(--display);letter-spacing:5px;text-transform:uppercase;color:var(--y)}
.num{font:italic 800 1em/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.y{color:var(--y)}
.cut-r{clip-path:polygon(150px 0,100% 0,100% 100%,0 100%)}
.cut-l{clip-path:polygon(0 0,100% 0,calc(100% - 150px) 100%,0 100%)}
.stripe-r{width:180px;height:1080px;background:var(--y);clip-path:polygon(150px 0,176px 0,26px 100%,0 100%)}
.stripe-l{width:180px;height:1080px;background:var(--y);clip-path:polygon(0 0,26px 0,176px 100%,150px 100%)}
.note{font:400 24px/1.5 var(--text);color:var(--mut)}
.lead{font:400 32px/1.5 var(--text);color:var(--body)}
.body{font:400 30px/1.5 var(--text);color:var(--body)}

/* numbers */
.stats{left:128px;right:128px;top:520px;display:flex;gap:44px;color:var(--ink)}
.stats .stack{border-top:10px solid var(--ink);padding-top:30px;gap:14px}
.stats .num{font-size:164px}
.slbl{font:600 34px/1.3 var(--text)}
/* story */
.line{font:500 36px/1.35 var(--text)}
.line em,.quote em{font-style:normal;color:var(--y)}
.quote{font:500 28px/1.45 var(--text);color:var(--body);border-left:6px solid var(--y);padding:4px 0 4px 28px;margin-top:10px}
/* titles */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--ink3);padding:30px 34px;display:flex;flex-direction:column;gap:10px}
.lbl{font:600 22px/1 var(--text);letter-spacing:4px;text-transform:uppercase;color:var(--mut)}
.ctitle{font:600 32px/1.25 var(--text)}
/* season */
.chip{font:italic 700 40px/1 var(--display);text-transform:uppercase;padding:13px 24px;background:var(--ink3);border-left:8px solid var(--y);white-space:nowrap}
.chip.w{border-left-color:var(--fg)}
/* social */
.sgrid{column-gap:32px;row-gap:34px}
.sgrid .stack{gap:8px;padding-top:18px}
.sgrid .num{font-size:84px}
.slbl2{font:600 26px/1.3 var(--text)}
.phone-wrap{top:110px;width:380px;height:850px}
.phone-lbl{position:absolute;left:0;top:-14px;font:600 20px/1 var(--text);letter-spacing:4px;text-transform:uppercase;color:var(--mut)}
.phone{position:absolute;left:0;top:18px;width:380px;height:810px;border-radius:52px;background:#050607;border:10px solid #2A2E34;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.ph{position:absolute;inset:0}
.pgrid{left:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.pgrid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.pgrid.tt img{aspect-ratio:3/4}
/* value */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.vcard{background:var(--ink3);border-top:6px solid var(--y);padding:40px 36px;display:flex;flex-direction:column;gap:18px}
.vcard h3{font:italic 700 40px/1.05 var(--display);text-transform:uppercase}
.vcard p{font:400 25px/1.5 var(--text);color:var(--body)}
/* car */
.carnote{left:128px;right:128px;bottom:56px;font:500 24px/1.4 var(--text);color:#2F3236}
.legend{display:flex;gap:52px}
.legend > div{display:flex;gap:14px;align-items:flex-start}
.legend span{width:26px;height:26px;margin-top:3px;flex:none}
.legend p{display:flex;flex-direction:column}
.legend b{font:700 26px/1.2 var(--text)}
.legend small{font:500 23px/1.3 var(--text);color:#33363B}
.lg{display:flex;align-items:center;justify-content:center;text-align:center}
.lg p{font:700 26px/1 var(--display);letter-spacing:2px;text-transform:uppercase}
.lg.main{background:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.lg.main p{font:italic 800 34px/1 var(--display);letter-spacing:1px;color:var(--y);padding:0 16px}
.lg.season{width:260px;height:50px;background:var(--blue)}
.lg.season p{color:#fff}
.lg.team{top:858px;width:196px;height:40px;background:var(--fg);border:2px solid var(--ink)}
.lg.team p{font-size:22px;letter-spacing:1px;color:var(--ink)}
/* packages */
.pk{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.15fr;gap:28px;align-items:stretch}
.pcard{background:var(--ink3);padding:40px 36px;display:flex;flex-direction:column;gap:16px}
.pcard.gold{background:var(--y);color:var(--ink)}
.pt{font:700 26px/1.2 var(--text)}
.price{font-size:92px;height:92px}
.price.any{font-size:50px;line-height:46px;white-space:normal}
.slot{align-self:flex-start;font:700 19px/1 var(--text);letter-spacing:3px;text-transform:uppercase;background:var(--ink);color:var(--y);padding:8px 13px}
.pp{font:600 26px/1.35 var(--text)}
.pcard hr{width:100%;border:0;border-top:2px solid var(--line);margin:0}
.pcard.gold hr{border-top-color:rgba(14,16,18,.3)}
.pd{font:400 22px/1.5 var(--text);color:var(--body)}
.pcard.gold .pd{color:var(--y-ink)}
/* contact */
.cta{font:italic 800 54px/1.05 var(--display);text-transform:uppercase;color:var(--y)}
.contact{display:flex;flex-direction:column;gap:12px;border-left:6px solid var(--y);padding:6px 0 6px 30px;margin-top:6px}
.contact .who{font:600 28px/1.3 var(--text);color:var(--body)}
.contact .tel{font:700 76px/1.05 var(--display);letter-spacing:1px;text-decoration:none;white-space:nowrap}
.contact .mail{font:600 40px/1.2 var(--text);text-decoration:none;white-space:nowrap}
.contact .soc{font:500 28px/1.3 var(--text);color:var(--body)}
.contact .soc a{text-decoration:none}
.contact a:hover{color:var(--y)}

#wipe{position:absolute;top:-100px;height:1280px;width:2500px;left:-3200px;background:var(--y);transform:skewX(-18deg);z-index:50}
#wipe2{position:absolute;top:-100px;height:1280px;width:160px;left:-3300px;background:var(--ink);transform:skewX(-18deg);z-index:51}

/* ================= BOTTOM MENU ================= */
#bar{display:flex;align-items:center;gap:20px;padding-inline:max(16px,env(safe-area-inset-left,0px));padding-block:0 env(safe-area-inset-bottom,0px);background:var(--ink);border-top:1px solid var(--line);min-width:0}
.b-left,.b-right{display:flex;align-items:center;gap:6px;flex:none}
.b-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.b-now{display:flex;gap:12px;align-items:baseline;font:600 14px/1 var(--text);white-space:nowrap;overflow:hidden}
.b-now span{color:var(--y);font:italic 800 18px/1 var(--display);font-variant-numeric:tabular-nums}
.b-now b{font-weight:600;letter-spacing:2px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.b-segs{display:flex;gap:4px}
.seg{flex:1;height:6px;background:#2A2F36;border:0;padding:0;cursor:pointer;position:relative;overflow:hidden}
.seg i{position:absolute;inset:0;background:var(--y);transform-origin:0 50%;transform:scaleX(0)}
.seg:hover{background:#3A4049}
.seg:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.ib{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--fg);cursor:pointer;text-decoration:none}
.ib svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ib:hover{color:var(--y)}
.ib:focus-visible,.b-langs button:focus-visible{outline:2px solid var(--y);outline-offset:1px}
.ib.play{background:var(--y);color:var(--ink)}
.ib.play:hover{color:var(--ink);filter:brightness(1.08)}
.ib.txt{width:auto;padding:0 10px;font:700 14px/1 var(--text);letter-spacing:2px;border:1px solid var(--line);height:34px}
.play .i-play,.play .i-replay{display:none}
.play.paused .i-pause{display:none}.play.paused .i-play{display:block}
.play.ended .i-pause,.play.ended .i-play{display:none}.play.ended .i-replay{display:block}
.b-langs{display:flex;border:1px solid var(--line);margin-right:4px}
.b-langs button{background:transparent;border:0;padding:0 11px;height:34px;font:700 14px/1 var(--text);letter-spacing:1px;cursor:pointer;color:var(--mut)}
.b-langs button.on{background:var(--y);color:var(--ink)}
.b-langs button:hover:not(.on){color:var(--fg)}
@media (max-width:820px){
  :root{--barH:58px}
  #bar{gap:10px}
  .b-now{display:none}
  #bHome,#bFull{display:none}
  .ib{width:36px;height:36px}
  .b-langs button{padding:0 7px}
}
@media (max-width:480px){ #bPdf{display:none} .b-left{gap:2px} }

#rotate{position:fixed;inset:0;z-index:30;background:rgba(14,16,18,.94);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
#rotate > div{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:320px}
#rotate svg{fill:none;stroke:var(--y);stroke-width:1.6;stroke-linecap:round}
#rotate p{font:500 18px/1.45 var(--text)}
#rotate button{background:var(--y);color:var(--ink);border:0;padding:12px 26px;font:700 15px var(--text);cursor:pointer}

/* ================= PRINT (PDF export) ================= */
body.print{background:var(--ink)}
body.print #landing,body.print #bar,body.print #rotate,body.print #wipe,body.print #wipe2{display:none!important}
body.print #app{position:static;display:block;background:var(--ink)}
body.print #viewport{overflow:visible}
body.print #stage{position:static;transform:none;width:auto;height:auto;overflow:visible;background:none}
body.print .slide{position:relative;width:1920px;height:1080px;visibility:visible;break-after:page}
@page{size:1920px 1080px;margin:0}
@media (max-height:520px) and (orientation:landscape){
  :root{--barH:46px}
  #bar{gap:10px}
  .b-now{display:none}
  .ib{width:34px;height:34px}
  .ib svg{width:19px;height:19px}
  .ib.txt,.b-langs button{height:28px}
}