:root{
--ink:#0a0a0b;
--ink-soft:#131315;
--coal:#17171a;
--line-dark:rgba(255,255,255,0.09);
--cream:#eceae6;
--cream-deep:#e3e0d9;
--line-light:rgba(10,10,11,0.12);
--yellow:#ffc600;
--yellow-deep:#f0b400;
--blue:#1863dc;
--red:#d63d29;
--white:#ffffff;
--muted-on-dark:rgba(236,234,230,0.68);
--muted-on-light:rgba(10,10,11,0.62);
--font-display:'Anton','Arial Narrow',sans-serif;
--font-label:'Montserrat','Helvetica Neue',sans-serif;
--font-body:'Inter','Helvetica Neue',sans-serif;
--ease-out:cubic-bezier(0.16,1,0.3,1);
--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
--ease-inout:cubic-bezier(0.83,0,0.17,1);
--dur-fast:0.35s;
--dur:0.8s;
--dur-slow:1.2s;
--container:1180px;
--pad:clamp(20px,4vw,48px);
--radius:22px;
--radius-lg:34px;
}
*,::before,::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--ink);
color:var(--cream);
font-family:var(--font-body);
font-size:17px;
line-height:1.65;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:var(--yellow); color:var(--ink); }
.display{
font-family:var(--font-display);
font-weight:400;
text-transform:uppercase;
line-height:0.94;
letter-spacing:0.005em;
margin:0;
}
.display-xl{ font-size:clamp(3.4rem,11vw,9.5rem); }
.display-lg{ font-size:clamp(2.6rem,7vw,6rem); }
.display-md{ font-size:clamp(2rem,5vw,4rem); }
.display-sm{ font-size:clamp(1.5rem,3.2vw,2.4rem); }
.label{
font-family:var(--font-label);
font-weight:800;
font-size:0.72rem;
letter-spacing:0.22em;
text-transform:uppercase;
}
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.6; }
.txt-yellow{ color:var(--yellow); }
.txt-outline{
color:transparent;
-webkit-text-stroke:2px var(--cream);
}
.on-light .txt-outline,.panel-cream .txt-outline{ -webkit-text-stroke:2px var(--ink); }
.txt-outline-yellow{ color:transparent; -webkit-text-stroke:2px var(--yellow); }
.container{ max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ position:relative; padding:clamp(80px,11vw,150px) 0; }
.section-tight{ padding:clamp(56px,7vw,90px) 0; }
.panel-cream{
background:var(--cream);
color:var(--ink);
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.panel-cream + .panel-dark-round,
.panel-dark-round{
background:var(--ink);
color:var(--cream);
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
margin-top:calc(var(--radius-lg) * -1);
}
.panel-cream.rounded-both{ border-radius:var(--radius-lg); }
.kicker{
display:flex;
align-items:center;
gap:16px;
font-family:var(--font-label);
font-weight:800;
font-size:0.72rem;
letter-spacing:0.24em;
text-transform:uppercase;
}
.kicker .k-num{
font-family:var(--font-display);
font-weight:400;
font-size:1.05rem;
letter-spacing:0.04em;
color:var(--yellow);
}
.kicker .k-bar{
width:44px;
height:3px;
background:var(--yellow);
transform:scaleX(0);
transform-origin:0 50%;
transition:transform 0.9s var(--ease-out) 0.15s;
}
.kicker .k-label{
opacity:0;
transform:translateX(-14px);
transition:opacity 0.7s var(--ease-out) 0.35s,transform 0.7s var(--ease-out) 0.35s;
}
.kicker.is-in .k-bar,.is-in .kicker .k-bar{ transform:scaleX(1); }
.kicker.is-in .k-label,.is-in .kicker .k-label{ opacity:1; transform:none; }
.ghost{
position:absolute;
top:clamp(-30px,-3vw,-10px);
right:var(--pad);
z-index:0;
font-family:var(--font-display);
font-size:clamp(7rem,18vw,15rem);
line-height:1;
color:transparent;
-webkit-text-stroke:1.5px rgba(236,234,230,0.13);
pointer-events:none;
user-select:none;
}
.panel-cream .ghost{ -webkit-text-stroke:1.5px rgba(10,10,11,0.1); }
.logo{
display:inline-flex;
align-items:center;
gap:2px;
font-family:var(--font-display);
font-size:1.7rem;
letter-spacing:0.02em;
line-height:1;
text-transform:uppercase;
user-select:none;
}
.logo .ct{ color:var(--cream); padding-top:2px; }
.panel-cream .logo .ct,.logo.logo-dark .ct{ color:var(--ink); }
.logo .pt{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.05em;
height:2.05em;
border-radius:50%;
background:var(--yellow);
color:var(--ink);
padding-top:0.08em;
transition:transform 0.5s var(--ease-spring);
}
.logo:hover .pt{ transform:rotate(-12deg) scale(1.08); }
.btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:19px 34px;
border-radius:14px;
font-family:var(--font-label);
font-weight:800;
font-size:0.85rem;
letter-spacing:0.14em;
text-transform:uppercase;
overflow:hidden;
white-space:nowrap;
transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease,color var(--dur-fast) ease;
will-change:transform;
}
.btn .t,.btn .arr{ position:relative; z-index:1; transition:color 0.5s ease; }
@media (pointer:fine){
.btn::before{
content:'';
position:absolute;
top:var(--y,50%); left:var(--x,50%);
width:0; height:0;
border-radius:50%;
opacity:0;
transform:translate(-50%,-50%);
transition:width 0.9s ease,height 0.9s ease,opacity 0.6s ease;
}
.btn:hover::before{ width:340%; height:950%; opacity:1; }
.btn-yellow::before{ background:var(--yellow-deep); }
.btn-ghost::before,.btn-dark::before{ background:rgba(255,198,0,0.16); }
.btn-ghost:hover .t,.btn-ghost:hover .arr{ color:var(--yellow); }
}
.btn-yellow{ background:var(--yellow); color:var(--ink); box-shadow:0 10px 30px -10px rgba(255,198,0,0.5); }
.btn-yellow:hover{ box-shadow:0 18px 44px -12px rgba(255,198,0,0.65); }
.btn-dark{ background:var(--ink); color:var(--cream); box-shadow:0 10px 30px -12px rgba(0,0,0,0.5); }
.btn-ghost{ border:1.5px solid var(--line-dark); color:var(--cream); background:rgba(255,255,255,0.03); }
.btn-ghost:hover{ border-color:var(--yellow); color:var(--yellow); }
.panel-cream .btn-ghost{ border-color:var(--line-light); color:var(--ink); }
.panel-cream .btn-ghost:hover{ border-color:var(--ink); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(0.98); }
.btn .arr{ display:inline-block; transition:transform var(--dur-fast) var(--ease-spring),color 0.5s ease; }
.btn:hover .arr{ transform:translateX(5px); }
.btn-lg{ padding:24px 44px; font-size:0.95rem; }
.btn-block{ width:100%; }
@media (max-width:480px){
.btn{ padding:16px 24px; font-size:0.76rem; letter-spacing:0.1em; max-width:100%; }
.btn-lg{ padding:19px 28px; font-size:0.82rem; }
.site-header .btn{ padding:12px 18px; font-size:0.66rem; }
}
.site-header{
position:fixed;
top:0; left:0; right:0;
z-index:900;
padding:18px 0;
transition:background var(--dur-fast) ease,box-shadow var(--dur-fast) ease,padding var(--dur-fast) ease,transform 0.45s var(--ease-out);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-header.is-scrolled{
padding:10px 0;
background:rgba(10,10,11,0.82);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:0 1px 0 var(--line-dark);
}
.site-header.is-hidden{ transform:translateY(-110%); }
.header-right{ display:flex; align-items:center; gap:22px; }
.header-phone{ font-family:var(--font-label); font-weight:700; font-size:0.8rem; letter-spacing:0.08em; color:var(--muted-on-dark); transition:color var(--dur-fast) ease; }
.header-phone:hover{ color:var(--yellow); }
.site-header .btn{ padding:13px 24px; font-size:0.72rem; }
@media (max-width:640px){
.header-phone{ display:none; }
}
.scroll-progress{
position:fixed;
top:0; left:0;
height:3px;
width:100%;
background:var(--yellow);
transform-origin:0 50%;
transform:scaleX(0);
z-index:1000;
}
.marquee{
overflow:hidden;
white-space:nowrap;
user-select:none;
--marquee-dur:26s;
transform:skewX(var(--skew,0deg));
will-change:transform;
}
.marquee-track{
display:inline-flex;
align-items:center;
animation:marquee var(--marquee-dur) linear infinite;
will-change:transform;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
.marquee-item{
display:inline-flex;
align-items:center;
gap:clamp(18px,3vw,34px);
padding-right:clamp(18px,3vw,34px);
font-family:var(--font-display);
text-transform:uppercase;
font-size:clamp(1.6rem,3.4vw,2.8rem);
letter-spacing:0.02em;
}
.marquee-item .star{ color:var(--yellow); font-size:0.7em; }
.card{
border-radius:var(--radius);
border:1px solid var(--line-dark);
background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));
transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) ease,background var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.panel-cream .card{ border-color:var(--line-light); background:rgba(255,255,255,0.62); }
.card:hover,.card.is-live{ transform:translateY(-6px); border-color:rgba(255,198,0,0.55); box-shadow:0 24px 50px -24px rgba(0,0,0,0.45); }
.media-card{ overflow:hidden; display:flex; flex-direction:column; }
.media-card .media{
position:relative;
aspect-ratio:4 / 3;
overflow:hidden;
background:var(--coal);
}
.media-card .media img{
width:100%; height:100%;
object-fit:cover;
filter:grayscale(1) contrast(1.05);
transform:scale(1.04);
transition:filter 0.9s var(--ease-out),transform 1.1s var(--ease-out);
}
.media-card:hover .media img,.media-card.is-live .media img{ filter:grayscale(0); transform:scale(1.12); }
.media-card .media .num{
position:absolute;
top:14px; left:14px;
display:grid; place-items:center;
width:52px; height:52px;
border-radius:50%;
background:var(--yellow);
color:var(--ink);
font-family:var(--font-display);
font-size:1.15rem;
padding-top:3px;
transition:transform 0.5s var(--ease-spring);
}
.media-card:hover .media .num,.media-card.is-live .media .num{ transform:rotate(-10deg) scale(1.12); }
.media-card .body{ padding:26px 26px 30px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tilt{
transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));
transition:transform 0.25s var(--ease-out);
}
[data-reveal]{
opacity:0;
transform:translateY(34px);
filter:blur(8px);
transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out);
transition-delay:var(--d,0s);
will-change:opacity,transform,filter;
}
[data-reveal='left']{ transform:translateX(-44px); }
[data-reveal='right']{ transform:translateX(44px); }
[data-reveal='scale']{ transform:scale(0.86); }
[data-reveal='none']{ transform:none; filter:none; }
[data-reveal].is-in{ opacity:1; transform:none; filter:none; }
[data-reveal].is-in,.is-in .ch,.is-in .line-inner,.is-in .word > span{ will-change:auto; }
[data-reveal='clip']{ transform:none; filter:none; }
[data-reveal='clip'] .clip{
clip-path:inset(100% 0 0 0);
transition:clip-path var(--dur-slow) var(--ease-out);
transition-delay:var(--d,0s);
}
[data-reveal='clip'].is-in .clip{ clip-path:inset(0 0 0 0); }
.line{ display:block; overflow:hidden; padding-bottom:0.08em; margin-bottom:-0.08em; }
.line-inner{
display:block;
transform:translateY(115%) rotate(2.5deg);
transform-origin:0 100%;
transition:transform 1s var(--ease-out);
transition-delay:var(--d,0s);
will-change:transform;
}
.is-in .line-inner,.lines-in .line-inner{ transform:translateY(0) rotate(0); }
.word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.1em; margin-bottom:-0.1em; }
.word > span{
display:inline-block;
transform:translateY(110%);
transition:transform 0.8s var(--ease-out);
transition-delay:var(--d,0s);
}
.is-in .word > span{ transform:translateY(0); }
.chw{ display:inline-block; white-space:nowrap; }
.ch{
display:inline-block;
transform:translateY(115%) rotate(6deg);
transform-origin:0 100%;
transition:transform 0.9s var(--ease-out);
transition-delay:var(--d,0s);
will-change:transform;
}
.is-in .ch,.lines-in .ch{ transform:translateY(0) rotate(0); }
[data-scrub] .w{
display:inline-block;
opacity:0.14;
transform:translateY(0.08em);
transition:opacity 0.35s ease,transform 0.45s var(--ease-out),color 0.35s ease;
}
[data-scrub] .w.on{ opacity:1; transform:none; }
[data-scrub] .w.on.w-hot{ color:var(--yellow); }
.hl{
position:relative;
z-index:0;
white-space:nowrap;
}
.hl::after{
content:'';
position:absolute;
left:0; right:0; bottom:0.02em;
height:0.16em;
background:var(--yellow);
transform:scaleX(0);
transform-origin:0 50%;
transition:transform 0.9s var(--ease-out) 0.45s;
z-index:-1;
}
.is-in .hl::after,.hl.is-in::after{ transform:scaleX(1); }
.stat-num{
font-family:var(--font-display);
font-size:clamp(3rem,7vw,5.6rem);
line-height:1;
letter-spacing:0.01em;
}
.stat-label{ margin-top:8px; }
.testi-card{ padding:30px; display:flex; flex-direction:column; gap:18px; height:100%; }
.testi-head{ display:flex; align-items:center; gap:16px; }
.testi-head img{
width:62px; height:62px;
border-radius:50%;
object-fit:cover;
border:2.5px solid var(--yellow);
filter:grayscale(0.4);
transition:filter var(--dur-fast) ease,transform 0.5s var(--ease-spring);
}
.testi-card:hover .testi-head img,.testi-card.is-live .testi-head img{ filter:grayscale(0); transform:scale(1.08) rotate(-3deg); }
.stars{ color:var(--yellow); letter-spacing:3px; font-size:0.9rem; }
.testi-quote{ font-size:1rem; color:var(--muted-on-dark); font-style:italic; }
.panel-cream .testi-quote{ color:var(--muted-on-light); }
.journey{ position:relative; }
.journey-line{
position:absolute;
left:31px; top:10px; bottom:10px;
width:3px;
background:var(--line-light);
border-radius:3px;
}
.journey-line .fill{
position:absolute;
inset:0;
background:var(--yellow);
transform:scaleY(var(--p,0));
transform-origin:0 0;
}
.journey-line .comet{
position:absolute;
left:50%;
top:calc(var(--p,0) * 100%);
width:14px; height:14px;
margin:-7px 0 0 -7px;
border-radius:50%;
background:var(--yellow);
box-shadow:0 0 0 5px rgba(255,198,0,0.25),0 0 22px 6px rgba(255,198,0,0.45);
}
.journey-step{
position:relative;
display:flex;
gap:26px;
padding:22px 0;
}
.journey-step .idx{
flex:0 0 auto;
display:grid; place-items:center;
width:62px; height:62px;
border-radius:50%;
background:var(--white);
border:2px solid var(--line-light);
font-family:var(--font-display);
font-size:1.25rem;
padding-top:3px;
z-index:1;
transition:background 0.45s var(--ease-out),border-color 0.45s var(--ease-out),transform 0.45s var(--ease-spring),color 0.3s ease;
}
.journey-step.is-live .idx{ background:var(--yellow); border-color:var(--yellow); transform:scale(1.1); }
.journey-step h3{ margin:6px 0 6px; font-family:var(--font-label); font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.04em; }
.journey-step p{ margin:0; color:var(--muted-on-light); max-width:52ch; }
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.check-list li{ display:flex; gap:14px; align-items:flex-start; }
.check-list .tick{
flex:0 0 auto;
display:grid; place-items:center;
width:28px; height:28px;
margin-top:2px;
border-radius:50%;
background:var(--yellow);
color:var(--ink);
font-weight:900;
font-size:0.8rem;
transition:transform 0.5s var(--ease-spring);
}
.check-list li:hover .tick{ transform:scale(1.18) rotate(-8deg); }
.faq-item{ border-bottom:1px solid var(--line-light); }
.faq-q{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
text-align:left;
padding:26px 4px;
font-family:var(--font-label);
font-weight:800;
font-size:clamp(1rem,1.6vw,1.2rem);
transition:color var(--dur-fast) ease,padding-left var(--dur-fast) var(--ease-out);
}
.faq-q:hover{ padding-left:12px; }
.faq-icon{
flex:0 0 auto;
position:relative;
width:34px; height:34px;
border-radius:50%;
border:1.5px solid var(--line-light);
transition:transform 0.5s var(--ease-spring),background var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.faq-icon::before,.faq-icon::after{
content:'';
position:absolute;
top:50%; left:50%;
width:12px; height:2px;
background:currentColor;
transform:translate(-50%,-50%);
transition:transform var(--dur-fast) var(--ease-out);
}
.faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.open .faq-icon{ transform:rotate(135deg); background:var(--yellow); border-color:var(--yellow); }
.faq-a{
overflow:hidden;
max-height:0;
transition:max-height 0.6s var(--ease-out);
}
.faq-a p{ margin:0; padding:0 4px 26px; color:var(--muted-on-light); max-width:68ch; }
.disc{
position:absolute;
border-radius:50%;
background:radial-gradient(circle at 32% 30%,#ffd84d,var(--yellow) 55%,var(--yellow-deep));
will-change:transform;
}
.disc-ghost{ background:transparent; border:2px dashed rgba(255,198,0,0.35); }
.ring{
position:absolute;
border-radius:50%;
border:1.5px solid var(--line-dark);
}
.spin-slow{ animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.rotor{ position:relative; width:132px; height:132px; }
.rotor svg{ width:100%; height:100%; animation:spin 14s linear infinite; }
.rotor text{ font-family:var(--font-label); font-weight:800; font-size:10.5px; letter-spacing:3.1px; text-transform:uppercase; }
.rotor .rotor-core{
position:absolute; inset:0;
display:grid; place-items:center;
font-size:1.7rem;
}
.float-card{
position:absolute;
padding:14px 18px;
border-radius:16px;
background:rgba(19,19,21,0.82);
border:1px solid var(--line-dark);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 24px 50px -20px rgba(0,0,0,0.6);
animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-12px); }
}
.cursor-dot,.cursor-ring{ display:none; }
@media (pointer:fine){
.cursor-dot{
display:block;
position:fixed;
top:0; left:0;
width:8px; height:8px;
margin:-4px 0 0 -4px;
border-radius:50%;
background:var(--yellow);
pointer-events:none;
z-index:3000;
}
.cursor-ring{
display:block;
position:fixed;
top:0; left:0;
width:38px; height:38px;
margin:-19px 0 0 -19px;
border-radius:50%;
border:1.5px solid rgba(255,198,0,0.55);
pointer-events:none;
z-index:3000;
transition:transform 0.22s var(--ease-out),opacity 0.22s ease,border-color 0.22s ease;
}
.cursor-ring.is-hovering{ transform:scale(1.7); border-color:var(--yellow); }
}
.video-card{ overflow:hidden; display:flex; flex-direction:column; cursor:pointer; }
.video-card .media{
position:relative;
aspect-ratio:16 / 9;
overflow:hidden;
background:var(--coal);
}
.video-card .media img{
width:100%; height:100%;
object-fit:cover;
filter:grayscale(0.85) contrast(1.05);
transform:scale(1.03);
transition:filter 0.8s var(--ease-out),transform 1s var(--ease-out);
}
.video-card:hover .media img,.video-card.is-live .media img{ filter:grayscale(0); transform:scale(1.08); }
.video-card .media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.play-disc{
position:absolute;
top:50%; left:50%;
width:64px; height:64px;
margin:-32px 0 0 -32px;
border-radius:50%;
background:var(--yellow);
display:grid; place-items:center;
transition:transform 0.45s var(--ease-spring);
box-shadow:0 0 0 0 rgba(255,198,0,0.4);
animation:play-pulse 2.4s var(--ease-inout) infinite;
}
@keyframes play-pulse{
0%,100%{ box-shadow:0 0 0 0 rgba(255,198,0,0.45); }
50%{ box-shadow:0 0 0 14px rgba(255,198,0,0); }
}
.play-disc::before{
content:'';
width:0; height:0;
margin-left:4px;
border-style:solid;
border-width:11px 0 11px 18px;
border-color:transparent transparent transparent var(--ink);
}
.video-card:hover .play-disc,.video-card.is-live .play-disc{ transform:scale(1.14) rotate(8deg); }
.video-card.is-playing .play-disc{ display:none; }
.video-card .body{ padding:20px 22px 24px; }
.video-card .body .who{ font-family:var(--font-label); font-weight:800; margin-bottom:4px; }
.video-card .body p{ margin:0; font-size:0.92rem; color:var(--muted-on-dark); }
.cross-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.cross-list li{ display:flex; gap:14px; align-items:flex-start; color:var(--muted-on-light); }
.cross-list .cross{
flex:0 0 auto;
display:grid; place-items:center;
width:28px; height:28px;
margin-top:2px;
border-radius:50%;
border:1.5px solid var(--line-light);
color:var(--muted-on-light);
font-weight:700;
font-size:0.75rem;
}
.booking-shell{
border-radius:var(--radius-lg);
overflow:hidden;
border:1px solid var(--line-dark);
background:var(--ink-soft);
box-shadow:0 40px 90px -40px rgba(0,0,0,0.7);
}
.booking-grid{ display:grid; grid-template-columns:340px 1fr; min-height:520px; }
@media (max-width:860px){ .booking-grid{ grid-template-columns:1fr; } }
.booking-side{
padding:34px 30px;
background:linear-gradient(165deg,#141416,#0c0c0d);
border-right:1px solid var(--line-dark);
display:flex; flex-direction:column; gap:18px;
}
@media (max-width:860px){ .booking-side{ border-right:0; border-bottom:1px solid var(--line-dark); } }
.booking-main{ padding:34px 30px; position:relative; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-head .cal-month{ font-family:var(--font-label); font-weight:800; letter-spacing:0.08em; text-transform:uppercase; font-size:0.95rem; }
.cal-nav{
display:grid; place-items:center;
width:38px; height:38px;
border-radius:50%;
border:1px solid var(--line-dark);
transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.cal-nav:hover:not(:disabled){ border-color:var(--yellow); color:var(--yellow); }
.cal-nav:disabled{ opacity:0.3; cursor:default; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ text-align:center; font-family:var(--font-label); font-weight:700; font-size:0.62rem; letter-spacing:0.14em; color:var(--muted-on-dark); padding:8px 0; text-transform:uppercase; }
.cal-day{
aspect-ratio:1;
display:grid; place-items:center;
border-radius:12px;
font-weight:600;
font-size:0.92rem;
color:var(--muted-on-dark);
transition:background var(--dur-fast) ease,color var(--dur-fast) ease,transform 0.3s var(--ease-spring);
}
.cal-day.is-avail{ color:var(--cream); background:rgba(255,198,0,0.09); cursor:pointer; position:relative; }
.cal-day.is-avail::after{
content:'';
position:absolute; bottom:6px; left:50%;
width:4px; height:4px;
margin-left:-2px;
border-radius:50%;
background:var(--yellow);
}
.cal-day.is-avail:hover{ background:rgba(255,198,0,0.22); transform:scale(1.07); }
.cal-day.is-selected{ background:var(--yellow) !important; color:var(--ink); font-weight:800; transform:scale(1.07); }
.cal-day.is-selected::after{ background:var(--ink); }
.cal-day.is-off{ opacity:0.28; }
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin-top:20px; }
.slot{
padding:13px 8px;
border-radius:12px;
border:1px solid var(--line-dark);
text-align:center;
font-family:var(--font-label);
font-weight:700;
font-size:0.82rem;
letter-spacing:0.05em;
transition:all var(--dur-fast) var(--ease-out);
}
.slot:hover{ border-color:var(--yellow); color:var(--yellow); transform:translateY(-2px); }
.slot.is-selected{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.booking-note{
display:inline-flex; align-items:center; gap:8px;
padding:7px 14px;
border-radius:10px;
background:rgba(255,198,0,0.1);
border:1px dashed rgba(255,198,0,0.45);
color:var(--yellow);
font-family:var(--font-label);
font-weight:700;
font-size:0.62rem;
letter-spacing:0.14em;
text-transform:uppercase;
}
.booking-success{ text-align:center; padding:40px 20px; }
.booking-success .big-tick{
width:84px; height:84px;
margin:0 auto 22px;
border-radius:50%;
background:var(--yellow);
color:var(--ink);
display:grid; place-items:center;
font-size:2rem;
font-weight:900;
animation:pop-in 0.6s var(--ease-spring) both;
}
@keyframes pop-in{
from{ transform:scale(0); }
to{ transform:scale(1); }
}
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,36px); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,30px); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,26px); }
@media (max-width:980px){
.grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
.grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}
.site-footer{ padding:60px 0 42px; border-top:1px solid var(--line-dark); }
.footer-grid{ display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start; }
.site-footer a:hover{ color:var(--yellow); }
.footer-meta{ color:var(--muted-on-dark); font-size:0.85rem; }
.cta-dock{
position:fixed;
left:14px; right:14px; bottom:14px;
z-index:950;
display:none;
transform:translateY(140%);
transition:transform 0.5s var(--ease-out);
}
.cta-dock.is-visible{ transform:translateY(0); }
@media (max-width:760px){
.cta-dock{ display:block; }
}
.cta-dock .btn{ width:100%; box-shadow:0 14px 40px -8px rgba(255,198,0,0.55); }
.loader{
position:fixed;
inset:0;
z-index:5000;
display:grid;
place-items:center;
background:var(--ink);
transition:transform 0.75s var(--ease-inout);
}
.loader.done{ transform:translateY(-101%); }
.loader-logo{
display:inline-flex;
align-items:center;
gap:3px;
font-family:var(--font-display);
font-size:clamp(2.6rem,7vw,4.4rem);
color:var(--cream);
text-transform:uppercase;
}
.loader-logo .pt-disc{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.05em; height:2.05em;
border-radius:50%;
background:var(--yellow);
color:var(--ink);
padding-top:0.08em;
animation:loader-disc 0.9s var(--ease-spring) both;
}
@keyframes loader-disc{
from{ transform:scale(0) rotate(-120deg); }
to{ transform:scale(1) rotate(0); }
}
.loader-bar{
position:absolute;
bottom:0; left:0;
height:4px;
width:100%;
background:var(--yellow);
transform-origin:0 50%;
animation:loader-bar 0.85s var(--ease-inout) both;
}
@keyframes loader-bar{
from{ transform:scaleX(0); }
to{ transform:scaleX(1); }
}
.scroll-cue{
position:absolute;
left:50%;
bottom:26px;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
color:var(--muted-on-dark);
z-index:5;
}
.scroll-cue .cue-line{
position:relative;
width:2px; height:52px;
background:var(--line-dark);
overflow:hidden;
border-radius:2px;
}
.scroll-cue .cue-line::after{
content:'';
position:absolute;
left:0; top:0;
width:100%; height:18px;
background:var(--yellow);
animation:cue-drop 1.6s var(--ease-inout) infinite;
}
@keyframes cue-drop{
0%{ transform:translateY(-20px); }
70%,100%{ transform:translateY(56px); }
}
@media (max-height:700px){ .scroll-cue{ display:none; } }
.glare{ position:relative; }
.glare::after{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(255,198,0,0.16),transparent 65%);
opacity:0;
transition:opacity 0.4s ease;
z-index:2;
}
.glare:hover::after,.glare.is-live::after{ opacity:1; }
.cursor-tag{
position:fixed;
top:0; left:0;
z-index:3001;
padding:10px 16px;
border-radius:12px;
background:var(--yellow);
color:var(--ink);
font-family:var(--font-label);
font-weight:800;
font-size:0.68rem;
letter-spacing:0.14em;
text-transform:uppercase;
pointer-events:none;
white-space:nowrap;
transform:translate(14px,18px) scale(0);
transform-origin:0 0;
transition:transform 0.3s var(--ease-spring);
}
.cursor-tag.on{ transform:translate(14px,18px) scale(1); }
@media (pointer:coarse){ .cursor-tag{ display:none; } }
.queue-viz{
--jump:-348px;
display:flex;
align-items:flex-end;
justify-content:center;
gap:14px;
min-height:96px;
}
.queue-viz .q{
display:grid;
place-items:center;
width:54px; height:54px;
border-radius:50%;
background:rgba(236,234,230,0.1);
border:1.5px solid var(--line-dark);
color:var(--muted-on-dark);
font-family:var(--font-label);
font-weight:800;
font-size:0.72rem;
transition:transform 0.5s var(--ease-spring);
}
.queue-viz .q-you{
order:10;
width:62px; height:62px;
background:var(--yellow);
border-color:var(--yellow);
color:var(--ink);
font-family:var(--font-display);
font-size:0.95rem;
padding-top:2px;
box-shadow:0 12px 30px -10px rgba(255,198,0,0.6);
}
.queue-viz.is-in .q-you{ animation:queue-jump 1.5s var(--ease-inout) 0.5s both; }
@keyframes queue-jump{
0%{ transform:translate(0,0); }
35%{ transform:translate(calc(var(--jump,-270px) * 0.5),-85px) rotate(-14deg); }
70%{ transform:translate(var(--jump,-270px),0) rotate(0); }
80%{ transform:translate(var(--jump,-270px),-10px); }
100%{ transform:translate(var(--jump,-270px),0); }
}
.queue-viz.is-in .q:not(.q-you){ animation:queue-shuffle 0.45s var(--ease-spring) 1.55s both; }
@keyframes queue-shuffle{
0%{ transform:translateX(0); }
50%{ transform:translateX(34px); }
100%{ transform:translateX(0); }
}
@media (max-width:560px){
.queue-viz{ gap:8px; --jump:-258px; }
.queue-viz .q{ width:42px; height:42px; font-size:0.6rem; }
.queue-viz .q-you{ width:50px; height:50px; }
}
.weeks{ background:var(--ink); }
.weeks-track{ height:calc(100vh * 6.6); position:relative; }
.weeks-sticky{
position:sticky;
top:0;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
gap:clamp(18px,3vh,40px);
overflow:hidden;
padding:clamp(70px,10vh,110px) 0 clamp(24px,4vh,44px);
}
.weeks-sticky > .container{ width:100%; position:relative; z-index:1; }
.weeks-body{
display:grid;
grid-template-columns:minmax(180px,0.8fr) 1.4fr 1fr;
gap:clamp(24px,4vw,60px);
align-items:center;
flex:1;
min-height:0;
}
.weeks-num{ display:flex; flex-direction:column; gap:6px; }
.weeks-num .wk-label{ color:var(--yellow); }
.weeks-num-mask{
height:clamp(9rem,30vh,17rem);
overflow:hidden;
}
.weeks-num-strip{
display:flex;
flex-direction:column;
transform:translateY(calc(var(--wk,0) * -1 * 100% / 6));
transition:transform 0.75s var(--ease-out);
}
.weeks-num-strip span{
font-family:var(--font-display);
font-size:clamp(9rem,30vh,17rem);
line-height:1;
height:clamp(9rem,30vh,17rem);
color:var(--cream);
-webkit-text-stroke:0;
}
.weeks-num-strip span:nth-child(even){ color:var(--yellow); }
.weeks-panels{ position:relative; min-height:clamp(220px,34vh,320px); }
.wk-panel{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:14px;
opacity:0;
transform:translateY(36px);
transition:opacity 0.55s var(--ease-out),transform 0.65s var(--ease-out);
pointer-events:none;
}
.wk-panel.on{ opacity:1; transform:none; pointer-events:auto; transition-delay:0.12s; }
.wk-panel h3{ margin:0; }
.wk-panel p{ margin:0; color:var(--muted-on-dark); max-width:34rem; }
.wk-meta{
list-style:none;
margin:6px 0 0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:8px 22px;
}
.wk-meta li{
display:flex;
align-items:center;
gap:8px;
font-family:var(--font-label);
font-weight:700;
font-size:0.68rem;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--muted-on-dark);
}
.wk-meta li::before{ content:''; width:7px; height:7px; background:var(--yellow); }
.weeks-photo{
position:relative;
aspect-ratio:4 / 5;
max-height:52vh;
justify-self:end;
width:100%;
border-radius:var(--radius);
overflow:hidden;
}
.weeks-photo img{
position:absolute;
inset:0;
width:100%; height:100%;
object-fit:cover;
opacity:0;
transform:scale(1.12);
filter:grayscale(1);
transition:opacity 0.7s ease,transform 1.2s var(--ease-out),filter 0.7s ease;
}
.weeks-photo img.on{ opacity:1; transform:scale(1); filter:grayscale(0); }
.weeks-progress{
display:flex;
align-items:center;
gap:20px;
}
.weeks-progress .wk-count{ color:var(--yellow); min-width:108px; }
.weeks-segs{ display:flex; gap:8px; flex:1; }
.weeks-segs .seg{
flex:1;
height:4px;
background:var(--line-dark);
border-radius:4px;
overflow:hidden;
}
.weeks-segs .seg i{
display:block;
height:100%;
width:0;
background:var(--yellow);
}
.weeks-hint{ color:var(--muted-on-dark); opacity:0.6; }
@media (max-width:980px){
.weeks-body{ grid-template-columns:minmax(120px,auto) 1fr; position:static; }
.weeks-num,.weeks-panels{ position:relative; z-index:1; }
.weeks-photo{
position:absolute;
inset:0;
z-index:0;
max-height:none;
aspect-ratio:auto;
border-radius:0;
justify-self:stretch;
}
.weeks-photo::after{
content:'';
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(180deg,rgba(10,10,11,0.92) 0%,rgba(10,10,11,0.62) 42%,rgba(10,10,11,0.8) 100%);
}
.weeks-num-mask,.weeks-num-strip span{ height:clamp(6rem,20vh,10rem); font-size:clamp(6rem,20vh,10rem); }
.weeks-num-mask{ font-size:0; }
.weeks-hint{ display:none; }
}
@media (max-width:760px){
.weeks-sticky{ padding-bottom:104px; }
}
@media (max-width:560px){
.weeks-body{ grid-template-columns:1fr; align-items:start; gap:10px; }
.weeks-num{ flex-direction:row; align-items:baseline; gap:14px; }
.weeks-num-mask,.weeks-num-strip span{ height:clamp(4.4rem,12vh,6rem); font-size:clamp(4.4rem,12vh,6rem); }
.wk-panel{ justify-content:flex-start; }
.weeks-panels{ min-height:300px; }
}
@media (prefers-reduced-motion:reduce){
.weeks-track{ height:auto; }
.weeks-sticky{ position:static; height:auto; }
.weeks-panels{ min-height:0; }
.wk-panel{ position:static; opacity:1; transform:none; pointer-events:auto; margin-bottom:40px; }
.weeks-num,.weeks-progress,.weeks-photo{ display:none; }
}
.slot{
animation:slot-in 0.55s var(--ease-spring) both;
animation-delay:var(--d,0s);
}
@keyframes slot-in{
from{ opacity:0; transform:translateY(14px) scale(0.9); }
to{ opacity:1; transform:none; }
}
.stat-num.pop{ animation:stat-pop 0.5s var(--ease-spring); }
@keyframes stat-pop{
0%{ transform:scale(1); }
45%{ transform:scale(1.14) rotate(-2deg); }
100%{ transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
,::before,::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
[data-reveal],.line-inner,.word > span,.ch,[data-scrub] .w{
opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important;
}
.loader{ display:none !important; }
}

/* Side-by-side calendar layout */
.cal-split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.cal-times{
  border-left:1px solid var(--line-dark);
  padding-left:24px;
  min-height:300px;
}
.cal-times-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:300px;
  text-align:center;
}
@media (max-width:680px){
  .cal-split{ grid-template-columns:1fr; gap:20px; }
  .cal-times{ border-left:0; padding-left:0; border-top:1px solid var(--line-dark); padding-top:20px; min-height:auto; }
  .cal-times-empty{ min-height:120px; }
}