/* Aevos Fitness: 3D scroll walkthrough */
:root {
  --day: #cfc7bd;
  --dusk: #27302d;
  --bg: #cfc7bd;
  --ink: #1f2326;
  --ink-2: #4b4f51;
  --paper: #f3efe9;
  --stone: #c7bdb3;
  --line: rgba(31, 35, 38, 0.2);
  --fd: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --fb: "Instrument Sans", system-ui, sans-serif;
  --gutter: clamp(20px, 4.5vw, 64px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--dusk); color: var(--ink); font: 400 17px/1.55 var(--fb); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--paper); color: var(--ink); padding: 8px 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; font: 600 15px/1 var(--fb); text-decoration: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: #000; }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--line { border-color: rgba(243, 239, 233, 0.5); color: var(--paper); }
.btn--line:hover { border-color: var(--paper); }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); pointer-events: none; }
.top > * { pointer-events: auto; }
.top__logo { position: relative; display: block; width: 128px; }
.top__logo img { width: 100%; transition: opacity .5s; }
.logo-dusk { position: absolute; inset: 0; opacity: 0; }
.is-dusk .logo-day { opacity: 0; }
.is-dusk .logo-dusk { opacity: 1; }
.top__cta { min-height: 42px; padding: 0 18px; font-size: 14px; }
.is-dusk .top__cta { background: var(--paper); color: var(--ink); }

/* journey */
.journey { position: relative; height: 760vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--bg); color: var(--ink); transition: color .5s; }
.stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 65% 45%, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.10)); pointer-events: none; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 24%, transparent 50%); }
.is-dusk .stage { color: var(--paper); }

/* chapters */
.chapter { position: absolute; left: var(--gutter); top: 50%; width: min(430px, 36vw); transform: translateY(-46%); opacity: 0; visibility: hidden; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s .45s; z-index: 5; }
.chapter.is-active { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .55s ease .15s, transform .7s cubic-bezier(.2,.7,.2,1) .15s, visibility 0s; }
.chapter__where { margin: 0 0 12px; font-size: 15px; font-weight: 500; opacity: .72; }
.chapter h1, .chapter h2 { font-family: var(--fd); font-weight: 600; font-variation-settings: "opsz" 96; letter-spacing: -0.025em; line-height: 0.98; margin: 0 0 18px; text-wrap: balance; }
.chapter h1 { font-size: clamp(40px, 4.6vw, 72px); }
.chapter h2 { font-size: clamp(36px, 3.8vw, 58px); }
.chapter--hero { width: min(560px, 44vw); }
.chapter > p:not(.chapter__where) { margin: 0 0 18px; max-width: 42ch; }
.chapter img { width: 100%; aspect-ratio: 16 / 9; max-height: 24vh; object-fit: cover; border-radius: 10px; margin: 0 0 16px; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.55); }
.pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin: 0 0 16px; }
.pair img { margin: 0; height: 100%; aspect-ratio: auto; max-height: 190px; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; border-color: var(--line); font-size: 15px; }
.facts li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.is-dusk .facts, .is-dusk .facts li { border-color: rgba(243, 239, 233, 0.22); }
.chapter__actions { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.scrollcue { position: relative; padding-left: 34px; font-size: 14px; opacity: .75; }
.scrollcue::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .scrollcue::before { animation: cue 1.8s ease-in-out infinite; transform-origin: left; } @keyframes cue { 0%,100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } } }

/* rail */
.rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 6; display: grid; gap: 4px; justify-items: end; }
.rail button { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; background: none; border: 0; padding: 5px 0; color: transparent; font: 500 13px var(--fb); opacity: .55; cursor: pointer; transition: opacity .3s; }
.rail button::before { content: ""; width: 18px; height: 1px; background: var(--rail, #1f2326); transition: width .3s; }
.is-dusk .rail { --rail: #f3efe9; }
.rail button:hover, .rail button:focus-visible, .rail button.is-active { color: var(--rail, #1f2326); }
.rail button:hover { opacity: .85; }
.rail button.is-active { opacity: 1; }
.rail button.is-active::before { width: 38px; height: 2px; }

/* form */
.form { display: grid; gap: 14px; margin-top: 6px; }
.form label { display: grid; gap: 6px; font-size: 14px; opacity: .95; }
.form input { font: 400 17px var(--fb); min-height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(243, 239, 233, 0.35); background: rgba(243, 239, 233, 0.08); color: inherit; }
.form input:focus { outline: 2px solid var(--paper); outline-offset: 0; }
.form .btn { justify-self: start; margin-top: 4px; }
.form__error { margin: 0; color: #f3b3a4; font-size: 15px; }
.form__done { padding: 22px; border: 1px solid rgba(243, 239, 233, 0.4); border-radius: 12px; }
.form__done h3 { font-family: var(--fd); font-weight: 600; font-size: 26px; margin: 0 0 6px; }
.form__done p { margin: 0; }
.form__done:focus { outline: none; }

/* visit + footer (page ends at dusk) */
.visit { background: var(--dusk); color: var(--paper); padding: clamp(72px, 12vh, 130px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); align-items: end; }
.visit h2 { font-family: var(--fd); font-weight: 600; font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -0.025em; line-height: 1; margin: 0 0 18px; }
.visit address { font-style: normal; font-size: 21px; line-height: 1.5; margin-bottom: 24px; }
.visit__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(243, 239, 233, 0.22); }
.visit__facts li { padding: 15px 0; border-bottom: 1px solid rgba(243, 239, 233, 0.22); color: #c4cbc7; }
.visit__facts strong { color: var(--paper); font-weight: 600; }
.foot { background: var(--dusk); color: #aab3ae; border-top: 1px solid rgba(243, 239, 233, 0.14); padding: 44px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; }
.foot img { width: 150px; }
.foot p { margin: 0; font-size: 14px; }

/* phones: model on top, text sheet below */
@media (max-width: 900px) {
  .rail { display: none; }
  .stage::after { display: none; }
  .chapter, .chapter--hero { left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 56px var(--gutter) 26px; transform: translateY(14px); background: linear-gradient(180deg, transparent, var(--bg) 22%); }
  .chapter.is-active { transform: none; }
  .chapter h1 { font-size: clamp(32px, 9vw, 44px); }
  .chapter h2 { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 12px; }
  .chapter img { display: none; }
  .pair { display: none; }
  .chapter > p:not(.chapter__where) { margin-bottom: 12px; font-size: 16px; }
  .facts { font-size: 14px; }
  .facts li { padding: 7px 0; }
  .top__logo { width: 104px; }
  .top__cta { padding: 0 14px; font-size: 13px; }
  .visit { grid-template-columns: minmax(0, 1fr); }
}

/* no WebGL: plain stacked page */
.no-3d .journey { height: auto; }
.no-3d .stage { position: static; height: auto; padding: 110px 0 40px; }
.no-3d .stage__canvas, .no-3d .rail, .no-3d .scrollcue { display: none; }
.no-3d .chapter, .no-3d .chapter--hero { position: static; opacity: 1; visibility: visible; transform: none; width: auto; max-width: 620px; margin: 0 var(--gutter) 72px; padding: 0; background: none; }
.no-3d .chapter img, .no-3d .pair { display: block; }
.no-3d .chapter--join { color: var(--ink); }
.no-3d .form input { border-color: var(--line); }
.no-3d .btn--light { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01s !important; animation: none !important; } }