* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #000; color: #fff; }

/* hero pins behind the content for the whole scroll; sections scroll up over it */
#hero-pin { position: sticky; top: 0; height: 100vh; z-index: 0; }
#stage { position: relative; height: 100vh; width: 100%; overflow: hidden; background: #000; }

.layer { position: absolute; inset: 0; display: none; }
body.v1 .layer-v1 { display: flex; align-items: center; justify-content: center; }
body.v2 .layer-v2, body.v3 .layer-v2, body.v4 .layer-v2, body.v5 .layer-v2, body.v6 .layer-v2 { display: block; }

/* VARIANT 1 — feathered focal video */
#video-wrap {
  position: relative; width: clamp(320px, 48vw, 900px); aspect-ratio: 832 / 464; will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse closest-side at center,#000 0%,#000 38%,rgba(0,0,0,0) 82%);
          mask-image: radial-gradient(ellipse closest-side at center,#000 0%,#000 38%,rgba(0,0,0,0) 82%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
#v1-video { width: 100%; height: 100%; object-fit: cover; }
.v1-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.v1-title h1 { font-size: clamp(34px,6vw,76px); font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 50px rgba(0,0,0,.8); }

/* VARIANT 2 — WebGL liquid glass */
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gl-fallback { position:absolute; inset:0; display:none; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:13px; }

.scroll-hint { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); z-index: 6; animation: bob 2s ease-in-out infinite; transition: opacity .4s; }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ===================== content sections ===================== */
#content { position: relative; z-index: 1; }
.sec { position: relative; padding: 14vh 7vw; }
.sec-inner { max-width: 1180px; width: 100%; margin: 0 auto; }
/* scroll-scrubbed sticky sections: pin while the reveal is driven by scroll */
.scrub-sec { position: relative; height: var(--scrub-h); }
.scrub-sec .pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 14vh 7vw; }
.scrub-sec .pin.center { justify-content: center; text-align: center; }
/* in scrub mode (v6) JS drives opacity/scale directly, so kill CSS transitions (welcome keeps them) */
body.scrubmode .scrub-sec:not(.auto-sec) .reveal,
body.scrubmode .scrub-sec:not(.auto-sec) .hline,
body.scrubmode .scrub-sec:not(.auto-sec) .vline { transition: none !important; }

/* staggered reveal — duration/easing are live-tunable via the panel */
:root { --rv-dur: 2.2s; --rv-ease: cubic-bezier(.16,1,.3,1); --scrub-h: 150vh; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* large sentence type (shared by hero welcome, paragraph, testimonials) */
.sentence { font-size: clamp(40px, 7vw, 104px); line-height: 1.04; font-weight: 600; letter-spacing: -0.025em; color: #fff; max-width: 16ch; text-align: left;
  text-shadow: 0 0 40px #000000; }
.sentence .word { display: inline-block; }

/* hero welcome — auto-reveals on load, scrolls up out of focus */
.hero-welcome { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; padding: 0 7vw; }
.hero-welcome .sentence { text-align: center; max-width: none; }

/* testimonials */
.testimonial-sec .quote { font-size: clamp(30px, 5.2vw, 74px); max-width: 18ch; }
.attrib { margin-top: 30px; font-size: 15px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }

/* 2 — logo wall (rectilinear grid spanning the fixed content width) */
.sec-eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 36px; }
.logo-wall { position: relative; width: 100%; }
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
.logo-cell { display: flex; align-items: center; justify-content: center; height: 168px; }
.logo-cell img { height: 54px; width: auto; max-width: 76%; opacity: 0.82; transition: opacity .25s; }
.logo-cell:hover img { opacity: 1; }
/* grid lines that draw in (scale) with the logo reveal */
.grid-lines span { position: absolute; background: rgba(255,255,255,0.16); pointer-events: none; }
.grid-lines .hline { left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left center; transition: transform var(--rv-dur) var(--rv-ease); }
.grid-lines .vline { top: 0; height: 100%; width: 1px; transform: scaleY(0); transform-origin: top center; transition: transform var(--rv-dur) var(--rv-ease); }
.logo-wall.group-in .hline { transform: scaleX(1); }
.logo-wall.group-in .vline { transform: scaleY(1); }

/* 3 — services (glass cards over the live background) */
.services-sec { background: transparent; }
.services-head { font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; }
.services-sub { color: rgba(255,255,255,0.5); margin-bottom: 48px; font-size: 16px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.glass-card {
  position: relative; padding: 30px 26px; min-height: 180px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease), border-color .25s ease;
}
.glass-card::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(120% 80% at 0% 0%, rgba(255,90,60,0.10), transparent 55%); pointer-events: none; }
.glass-card:hover { border-color: rgba(255,255,255,0.22); }
.glass-card .num { font-size: 12px; letter-spacing: 0.14em; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }
.glass-card h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.18; }

/* 4 — schedule */
.schedule-inner { width: 100%; max-width: 1180px; }
.schedule-head { font-size: clamp(30px, 4.5vw, 56px); font-weight: 600; letter-spacing: -0.025em; color: #fff; margin-bottom: 12px; }
.schedule-sub { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 17px; }
.cal-card {
  text-align: left; border-radius: 22px; padding: 38px;
  background: linear-gradient(150deg, rgba(20,22,28,0.86), rgba(12,14,18,0.82));
  border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
}
.cal-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #ff8a72; border: 1px solid rgba(255,90,60,0.3); background: rgba(255,90,60,0.08); border-radius: 999px; padding: 5px 12px; margin-bottom: 22px; }
.cal-badge .d { width: 7px; height: 7px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 10px #ff5a3c; }
.cal-month { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 600; margin-bottom: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .dow { font-size: 11px; color: rgba(255,255,255,0.4); text-align: center; padding: 4px 0; }
.cal-grid .day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 13px; color: rgba(255,255,255,0.7); }
.cal-grid .day.muted { color: rgba(255,255,255,0.18); }
.cal-grid .day.avail { background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; }
.cal-grid .day.sel { background: #ff5a3c; color: #111; font-weight: 600; }
.cal-times { display: flex; flex-direction: column; gap: 8px; }
.cal-times .tlabel { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 4px; }
.cal-slot { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); border-radius: 10px; padding: 11px; color: #fff; font-size: 14px; text-align: center; cursor: pointer; transition: all .18s; }
.cal-slot:hover { border-color: #ff5a3c; background: rgba(255,90,60,0.1); }
.cal-foot { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.35); text-align: center; }

@media (max-width: 820px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: repeat(1, 1fr); }
  .cal-card { grid-template-columns: 1fr; }
}

/* version nav (links to each page) */
#variant-menu { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 12; display: flex; gap: 4px; padding: 4px; background: rgba(16,18,22,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; }
#variant-menu a { text-decoration: none; cursor: pointer; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.7); background: transparent; transition: all .18s; white-space: nowrap; }
#variant-menu a.active { background: #fff; color: #111; }

#controls { position: fixed; top: 16px; right: 16px; z-index: 12; width: 232px; padding: 16px 16px 14px; background: rgba(16,18,22,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; font-size: 12px; color: rgba(255,255,255,.85); user-select: none; }
#controls .title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#controls .title { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); }
#controls #refreshBtn { appearance: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 7px; font-size: 11px; padding: 4px 9px; cursor: pointer; transition: all .18s; }
#controls #refreshBtn:hover { background: rgba(255,255,255,.14); }
#controls .ctrl { margin-bottom: 14px; } #controls .ctrl:last-child { margin-bottom: 0; }
#controls .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
#controls .val { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
#controls input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); outline: none; cursor: pointer; }
#controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
#controls input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0; }
#controls .divider { margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
#controls select { width: 100%; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
#controls select option { background: #11151c; color: #fff; }