:root {
    --ink: #f7f1e6;
    --muted: #bbb3a7;
    --dim: #817b72;
    --black: #080806;
    --panel: #11100d;
    --panel-2: #191711;
    --line: rgba(247, 241, 230, 0.16);
    --acid: #d8ff3e;
    --ember: #ff4b22;
    --gold: #f2aa22;
    --aqua: #00d9b2;
    --steel: #a8b0aa;
    --shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
    --max: 1180px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    background: var(--black);
    overflow-x: clip;
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background:
        linear-gradient(120deg, rgba(216, 255, 62, 0.045), transparent 28%, rgba(255, 75, 34, 0.05) 74%, transparent),
        linear-gradient(180deg, #050504 0%, #0d0c09 42%, #060604 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0;
    overflow-x: clip;
}

body::after {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    content: "";
    opacity: 0.12;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}

img,
svg,
canvas {
    display: block;
    max-width: 100%;
}

section[id] {
    scroll-margin-top: 104px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    color: #11100d;
    background: var(--acid);
}

:focus-visible {
    outline: 3px solid var(--acid);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    padding: 10px 14px;
    color: #11100d;
    background: var(--acid);
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 0 max(18px, calc((100% - var(--max)) / 2));
    border-bottom: 1px solid rgba(247, 241, 230, 0.11);
    background: rgba(3, 3, 2, 0.58);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(22px) saturate(1.25);
    transition: min-height 180ms ease, background 180ms ease, border-color 180ms ease;
}

.site-header.is-scrolled {
    min-height: 48px;
    border-color: rgba(247, 241, 230, 0.16);
    background: rgba(3, 3, 2, 0.86);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 900;
    text-transform: uppercase;
}

.brand img {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
}

.brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-nav a,
.nav-toggle {
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid transparent;
    color: rgba(247, 241, 230, 0.78);
    background: transparent;
    font-size: 0.84rem;
    font-weight: 760;
    cursor: pointer;
}

.site-nav a:hover,
.nav-toggle:hover {
    color: var(--ink);
    border-color: rgba(247, 241, 230, 0.16);
    background: rgba(247, 241, 230, 0.06);
}

.site-nav a {
    position: relative;
    overflow: hidden;
}

.site-nav a::after {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    content: "";
    background: var(--acid);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

.site-nav a:hover::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
}

.hero {
    position: relative;
    display: grid;
    min-height: 100svh;
    padding: 92px 24px 54px;
    overflow: clip;
    isolation: isolate;
    perspective: 1600px;
    contain: layout paint;
    --hero-px: 0.72;
    --hero-py: 0.38;
    --hero-depth: 0;
}

.hero__image,
.hero__light,
.hero__canvas,
.hero__shade,
.hero__grid {
    position: absolute;
    inset: 0;
}

.hero__image {
    z-index: -5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 54%;
    filter: saturate(0.56) contrast(1.42) brightness(0.42);
    transform: scale(1.06);
    will-change: transform;
}

.hero__light {
    z-index: -4;
    pointer-events: none;
    background:
        radial-gradient(circle at calc(var(--hero-px) * 100%) calc(var(--hero-py) * 100%), rgba(216, 255, 62, 0.26), transparent 22vw),
        linear-gradient(104deg, transparent 0 31%, rgba(247, 241, 230, 0.2) 42%, rgba(216, 255, 62, 0.26) 47%, transparent 60%),
        linear-gradient(90deg, transparent 0 48%, rgba(216, 255, 62, 0.12) 74%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.62;
    transform: translateX(-42%) skewX(-14deg);
}

.hero__canvas {
    z-index: -3;
    width: 100%;
    height: 100%;
    opacity: 0.62;
}

.hero__shade {
    z-index: -2;
    background:
        radial-gradient(ellipse at 73% 50%, rgba(216, 255, 62, 0.14), transparent 28%),
        radial-gradient(ellipse at 58% 58%, rgba(255, 75, 34, 0.16), transparent 34%),
        linear-gradient(90deg, rgba(5, 5, 4, 0.98) 0%, rgba(5, 5, 4, 0.78) 34%, rgba(5, 5, 4, 0.2) 100%),
        linear-gradient(180deg, rgba(5, 5, 4, 0.08) 0%, rgba(5, 5, 4, 0.14) 48%, #050504 100%),
        linear-gradient(135deg, rgba(255, 75, 34, 0.18), transparent 32%, rgba(216, 255, 62, 0.12) 72%, transparent);
}

.hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(90deg, rgba(216, 255, 62, 0.16), transparent 16% 84%, rgba(216, 255, 62, 0.1)),
        linear-gradient(180deg, rgba(247, 241, 230, 0.05), transparent 18% 78%, rgba(247, 241, 230, 0.04));
    opacity: 0.22;
    mask-image:
        linear-gradient(#000 0 0),
        repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 190px),
        repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 132px);
    mask-composite: intersect;
}

.hero__grid {
    z-index: -1;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(247, 241, 230, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 241, 230, 0.08) 1px, transparent 1px);
    background-size: 78px 78px;
    transform: translate3d(calc((var(--hero-px) - 0.5) * -28px), calc((var(--hero-py) - 0.5) * -18px), 0);
    mask-image: radial-gradient(ellipse at 60% 54%, black 0 48%, transparent 78%);
}

.hero__wordmark {
    --wordmark-opacity: 0.98;

    position: absolute;
    right: -2vw;
    bottom: 2svh;
    z-index: -1;
    display: grid;
    justify-items: end;
    color: rgba(216, 255, 62, 0.025);
    font-size: clamp(7rem, 20vw, 19.5rem);
    font-weight: 1000;
    line-height: 0.78;
    text-transform: uppercase;
    opacity: var(--wordmark-opacity);
    -webkit-text-fill-color: rgba(216, 255, 62, 0.025);
    -webkit-text-stroke: 1.35px rgba(216, 255, 62, 0.24);
    text-shadow:
        0 0 18px rgba(216, 255, 62, 0.42),
        0 0 64px rgba(216, 255, 62, 0.28),
        0 0 148px rgba(216, 255, 62, 0.18),
        0 0 220px rgba(255, 75, 34, 0.12);
    filter: drop-shadow(0 0 34px rgba(216, 255, 62, 0.2));
    mix-blend-mode: screen;
    transform: translate3d(calc((var(--hero-px) - 0.5) * -28px), calc((var(--hero-py) - 0.5) * -16px), 0) skewY(-5deg);
    animation: wordmark-glide 7600ms ease-in-out 8s infinite alternate;
}

.hero__monolith {
    position: absolute;
    top: 56px;
    right: max(-116px, calc((100% - var(--max)) / 2 - 150px));
    bottom: -4svh;
    z-index: -1;
    width: min(62vw, 820px);
    pointer-events: none;
    opacity: 0.96;
    mix-blend-mode: screen;
    transform:
        translate3d(calc((var(--hero-px) - 0.5) * -34px), calc((var(--hero-py) - 0.5) * -18px), 0)
        scale(calc(1 + var(--hero-depth) * 0.04));
    transform-origin: 58% 54%;
}

.hero__monolith img,
.hero__monolith-glow,
.hero__monolith-line,
.hero__monolith-heat {
    position: absolute;
    inset: 0;
}

.hero__monolith img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 54% 52%;
    filter: grayscale(1) contrast(1.42) brightness(0.58);
    transform: scale(1.12);
    mask-image:
        radial-gradient(ellipse at 55% 54%, black 0 48%, rgba(0, 0, 0, 0.88) 56%, transparent 76%),
        linear-gradient(90deg, transparent 0%, black 18%, black 88%, transparent 100%);
    mask-composite: intersect;
}

.hero__monolith-glow {
    inset: 9% -12% 3% 4%;
    background:
        radial-gradient(ellipse at 56% 54%, rgba(216, 255, 62, 0.26), transparent 38%),
        radial-gradient(ellipse at 66% 72%, rgba(255, 75, 34, 0.2), transparent 36%);
    filter: blur(34px);
    opacity: 0.86;
}

.hero__monolith-line {
    top: 15%;
    left: 12%;
    right: -8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(216, 255, 62, 0.66), rgba(255, 75, 34, 0.32), transparent);
    box-shadow: 0 0 26px rgba(216, 255, 62, 0.38);
    transform: rotate(-8deg);
    animation: monolith-line 3400ms ease-in-out 8s infinite alternate;
}

.hero__monolith-heat {
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px),
        linear-gradient(112deg, transparent 0 43%, rgba(247, 241, 230, 0.16) 48%, transparent 56%);
    opacity: 0.24;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse at 56% 54%, black 0 46%, transparent 72%);
    transform: translateX(-18%);
    animation: monolith-heat 5200ms cubic-bezier(0.16, 0.84, 0.24, 1) 8s infinite;
}

.hero__signal {
    position: absolute;
    z-index: -1;
    display: grid;
    gap: 12px;
    width: 14vw;
    max-width: 220px;
    min-width: 110px;
    opacity: 0.18;
}

.hero__signal span {
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--acid), var(--ember), transparent);
    transform: skewX(-24deg);
    animation: signal-scan 1800ms ease-in-out 8s infinite alternate;
}

.hero__signal span:nth-child(2) {
    animation-delay: 160ms;
}

.hero__signal span:nth-child(3) {
    animation-delay: 320ms;
}

.hero__signal--left {
    left: 3vw;
    top: 34svh;
}

.hero__signal--right {
    right: 2vw;
    top: 20svh;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.76fr);
    align-items: center;
    gap: clamp(28px, 4vw, 68px);
    width: min(var(--max), 100%);
    margin: auto;
}

.hero__copy {
    position: relative;
    z-index: 5;
    max-width: 900px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: 0 0 16px;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--acid);
    color: var(--acid);
    background: transparent;
    font-size: 0.76rem;
    font-weight: 860;
    text-transform: uppercase;
}

.hero__logo {
    width: 88px;
    height: 88px;
    margin: 0 0 16px;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px rgba(216, 255, 62, 0.12));
}

.hero h1,
.local-hero h1 {
    max-width: 940px;
    margin: 0;
    font-size: clamp(3.45rem, 5.25vw, 6.3rem);
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 22px 80px rgba(0, 0, 0, 0.52);
}

.hero h1 span {
    display: block;
    color: rgba(247, 241, 230, 0.88);
    background: linear-gradient(90deg, #f7f1e6 0%, #d8ff3e 42%, #a8b0aa 82%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__lead,
.local-hero p {
    max-width: 610px;
    margin: 18px 0 0;
    color: rgba(247, 241, 230, 0.76);
    font-size: clamp(1.02rem, 1.12vw, 1.18rem);
    font-weight: 650;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.hero__microstats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 780px;
    margin-top: 14px;
}

.hero__microstats span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid rgba(247, 241, 230, 0.14);
    color: rgba(247, 241, 230, 0.72);
    background: rgba(8, 8, 6, 0.42);
    font-size: 0.8rem;
    font-weight: 760;
    backdrop-filter: blur(10px);
}

.hero__microstats strong {
    margin-right: 6px;
    color: var(--ink);
}

.button {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 850;
    text-align: center;
    text-transform: none;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.button::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.42) 47%, transparent 61%);
    transform: translateX(-130%);
    transition: transform 520ms ease;
}

.button:hover::before {
    transform: translateX(130%);
}

.button:hover {
    transform: translateY(-2px);
}

.button--primary {
    color: #050504;
    background: linear-gradient(180deg, #efffc0, var(--acid));
    box-shadow: 0 12px 40px rgba(216, 255, 62, 0.2), 0 0 0 1px rgba(216, 255, 62, 0.42) inset;
}

.button--ghost {
    color: var(--ink);
    border-color: rgba(247, 241, 230, 0.2);
    background: rgba(247, 241, 230, 0.045);
}

.hero__pricebar {
    position: absolute;
    right: clamp(18px, 6vw, 80px);
    bottom: clamp(44px, 7vh, 86px);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 7px 7px 7px 22px;
    border: 1px solid rgba(247, 241, 230, 0.12);
    border-radius: 999px;
    color: rgba(247, 241, 230, 0.72);
    background: rgba(31, 31, 29, 0.72);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(1.2);
}

.hero__pricebar::before {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(216, 255, 62, 0.2);
    border-radius: 999px;
    color: var(--acid);
    background: rgba(216, 255, 62, 0.06);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    content: "Sin compromiso";
}

.hero__pricebar strong {
    color: var(--ink);
    font-size: 1.06rem;
}

.hero__pricebar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #050504;
    background: var(--acid);
    font-weight: 850;
}

.hero__session {
    display: none;
}

.hero__session {
    position: relative;
    align-self: end;
    padding: 24px;
    border: 1px solid rgba(247, 241, 230, 0.2);
    background:
        linear-gradient(135deg, rgba(247, 241, 230, 0.08), transparent 35%),
        linear-gradient(135deg, rgba(17, 16, 13, 0.96), rgba(17, 16, 13, 0.68)),
        linear-gradient(90deg, rgba(255, 75, 34, 0.22), transparent);
    box-shadow: var(--shadow), 0 0 56px rgba(216, 255, 62, 0.08);
    backdrop-filter: blur(16px);
    transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transform-style: preserve-3d;
    transition: transform 160ms ease, border-color 180ms ease;
}

.hero__session::before {
    position: absolute;
    top: -1px;
    left: 18px;
    right: 18px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--acid), var(--ember), transparent);
}

.hero__session::after {
    position: absolute;
    inset: 8px;
    pointer-events: none;
    content: "";
    border: 1px solid rgba(247, 241, 230, 0.08);
}

.session__topline {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.session__label {
    margin: 0 0 18px;
    color: var(--acid);
    font-size: 0.9rem;
    font-weight: 950;
    text-transform: uppercase;
}

.session__dial {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(8, 8, 6, 0.96) 0 54%, transparent 55%),
        conic-gradient(var(--acid) 0 72%, rgba(247, 241, 230, 0.1) 72% 100%);
    box-shadow: 0 0 38px rgba(216, 255, 62, 0.12);
}

.session__dial span {
    font-size: 1.35rem;
    font-weight: 1000;
    line-height: 1;
}

.session__dial small {
    color: var(--dim);
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.session__metrics {
    display: grid;
    gap: 16px;
    margin: 0;
}

.session__metrics div {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(247, 241, 230, 0.12);
}

.session__metrics dt {
    color: var(--dim);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.session__metrics dd {
    margin: 4px 0 0;
    font-size: 1.1rem;
    font-weight: 850;
}

.session__meter {
    height: 8px;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid rgba(247, 241, 230, 0.14);
    background: rgba(247, 241, 230, 0.08);
}

.session__meter span {
    display: block;
    width: 74%;
    height: 100%;
    background: linear-gradient(90deg, var(--ember), var(--gold), var(--acid));
    animation: charge 2400ms ease-in-out infinite alternate;
}

.session__caption {
    margin: 16px 0 0;
    color: rgba(247, 241, 230, 0.78);
    font-size: 0.95rem;
    font-weight: 780;
}

.impact-strip {
    overflow: clip;
    border-top: 1px solid rgba(247, 241, 230, 0.14);
    border-bottom: 1px solid rgba(247, 241, 230, 0.14);
    background: rgba(5, 5, 4, 0.94);
    color: rgba(216, 255, 62, 0.88);
    contain: layout paint;
}

.impact-strip__track {
    display: flex;
    width: max-content;
    min-width: 100%;
    animation: marquee 24s linear infinite;
}

.impact-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 62px;
    padding: 0 34px;
    border-right: 1px solid rgba(247, 241, 230, 0.12);
    font-size: 1.04rem;
    font-weight: 900;
    white-space: nowrap;
}

.apple-highlights {
    width: min(1480px, calc(100% - 40px));
    margin: 0 auto;
    padding: 112px 0 104px;
    overflow: clip;
}

.apple-highlights__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 34px;
}

.apple-highlights__header h2 {
    max-width: 840px;
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 5.6rem);
    line-height: 0.94;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
}

.highlight-controls {
    display: inline-flex;
    gap: 10px;
}

.highlight-controls button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(247, 241, 230, 0.12);
    border-radius: 50%;
    color: rgba(247, 241, 230, 0.86);
    background: rgba(247, 241, 230, 0.07);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.highlight-controls button:hover {
    border-color: rgba(216, 255, 62, 0.42);
    background: rgba(216, 255, 62, 0.11);
    transform: translateY(-2px);
}

.highlight-rail {
    display: flex;
    gap: 20px;
    padding: 0 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-padding: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}

.highlight-rail::-webkit-scrollbar {
    display: none;
}

.highlight-card {
    position: relative;
    flex: 0 0 min(400px, 78vw);
    min-height: 590px;
    overflow: hidden;
    border: 1px solid rgba(247, 241, 230, 0.12);
    border-radius: 8px;
    background: #050503;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
    isolation: isolate;
    scroll-snap-align: start;
    transform: translateY(calc(var(--parallax, 0px) * 0.18));
    transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.highlight-card--wide {
    flex-basis: min(980px, 88vw);
    min-height: 640px;
}

.highlight-card img {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.16) brightness(0.54);
    transform: scale(1.06);
    transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 320ms ease;
}

.highlight-card:nth-child(1) img {
    object-position: 52% 58%;
}

.highlight-card:nth-child(2) img {
    object-position: 48% 30%;
}

.highlight-card:nth-child(3) img {
    object-position: 52% 58%;
}

.highlight-card:nth-child(4) img {
    object-position: 52% 42%;
}

.highlight-card:nth-child(5) img {
    object-position: 50% 45%;
}

.highlight-card::before,
.highlight-card::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.highlight-card::before {
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(5, 5, 3, 0.04) 0%, rgba(5, 5, 3, 0.22) 38%, rgba(5, 5, 3, 0.96) 100%),
        linear-gradient(120deg, rgba(216, 255, 62, 0.075), transparent 44%, rgba(255, 75, 34, 0.09));
}

.highlight-card::after {
    z-index: -1;
    border: 1px solid rgba(247, 241, 230, 0.055);
    transform: translate(10px, 10px);
}

.highlight-card:hover img {
    filter: saturate(0.88) contrast(1.2) brightness(0.62);
    transform: scale(1.1);
}

.highlight-card:hover {
    border-color: rgba(216, 255, 62, 0.34);
    box-shadow: 0 36px 110px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(216, 255, 62, 0.08) inset;
    transform: translateY(calc(var(--parallax, 0px) * 0.18 - 6px));
}

.highlight-card div {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 26px;
}

.highlight-card span {
    display: block;
    margin-bottom: 14px;
    color: var(--acid);
    font-size: 0.74rem;
    font-weight: 880;
    text-transform: uppercase;
}

.highlight-card h3 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.45rem, 1.8vw, 2.35rem);
    line-height: 1;
    text-transform: none;
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.highlight-card--wide h3 {
    max-width: 16ch;
    font-size: clamp(2rem, 2.8vw, 3.25rem);
}

.highlight-card p {
    max-width: 34ch;
    margin: 16px 0 0;
    color: rgba(247, 241, 230, 0.74);
    font-size: 0.98rem;
}

.program-cinema {
    position: relative;
    height: 360svh;
    min-height: 2340px;
    overflow: clip;
    isolation: isolate;
    --sp: 0;
    --sp-eased: 0;
    --accent: var(--acid);
    --accent-rgb: 216, 255, 62;
    background:
        radial-gradient(ellipse at 72% 34%, rgba(var(--accent-rgb), 0.14), transparent 36%),
        linear-gradient(180deg, #050503 0%, #0d0c09 48%, #050503 100%);
}

.program-cinema[data-scene="1"] { --accent: var(--ember); --accent-rgb: 255, 75, 34; }
.program-cinema[data-scene="2"] { --accent: var(--aqua); --accent-rgb: 0, 217, 178; }
.program-cinema[data-scene="3"] { --accent: var(--gold); --accent-rgb: 242, 170, 34; }

.program-cinema__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.program-cinema__stage,
.program-cinema__visual,
.program-cinema__shade {
    position: absolute;
    inset: 0;
}

.program-cinema__stage {
    z-index: 0;
    pointer-events: none;
    background: #050503;
}

.program-cinema__visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(0.58) contrast(1.26) brightness(0.4);
    transform: scale(calc(1.1 + var(--sp) * 0.12)) translate3d(calc((var(--sp) - 0.5) * -4vw), 0, 0);
    transition: opacity 760ms ease, filter 760ms ease;
    will-change: opacity, transform;
}

.program-cinema__visual--0 {
    object-position: 50% 58%;
}

.program-cinema__visual--1,
.program-cinema__visual--2,
.program-cinema__visual--3 {
    object-position: 50% 40%;
}

.program-cinema[data-scene="0"] .program-cinema__visual--0,
.program-cinema[data-scene="1"] .program-cinema__visual--1,
.program-cinema[data-scene="2"] .program-cinema__visual--2,
.program-cinema[data-scene="3"] .program-cinema__visual--3 {
    opacity: 1;
}

.program-cinema__spotlight {
    position: absolute;
    top: -20%;
    left: 48%;
    width: 56%;
    height: 140%;
    background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb), 0.2) 46%, transparent 82%);
    filter: blur(42px);
    opacity: 0.62;
    transform: translateX(calc((var(--sp) - 0.5) * 34vw)) rotate(10deg);
    transition: background 620ms ease;
}

.program-cinema__rings {
    position: absolute;
    right: clamp(28px, 8vw, 140px);
    top: 50%;
    width: min(520px, 42vw);
    aspect-ratio: 1;
    border: 1px solid rgba(var(--accent-rgb), 0.26);
    transform: translateY(-50%) rotate(calc(var(--sp) * 150deg)) scale(calc(0.74 + var(--sp-eased) * 0.22));
    opacity: 0.42;
}

.program-cinema__rings::before,
.program-cinema__rings::after {
    position: absolute;
    inset: 13%;
    content: "";
    border: 1px solid rgba(247, 241, 230, 0.12);
}

.program-cinema__rings::after {
    inset: 28%;
    border-color: rgba(var(--accent-rgb), 0.22);
}

.program-cinema__meter {
    position: absolute;
    right: clamp(20px, 6vw, 108px);
    bottom: clamp(86px, 12vh, 150px);
    z-index: 1;
    display: grid;
    gap: 4px;
    min-width: 220px;
    padding: 16px 18px;
    border: 1px solid rgba(247, 241, 230, 0.12);
    border-radius: 999px;
    background: rgba(24, 24, 20, 0.58);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.2);
    transform: translate3d(0, calc((0.5 - var(--sp)) * 54px), 0);
}

.program-cinema__meter span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.program-cinema__meter strong {
    color: var(--accent);
    font-size: 1.38rem;
    font-weight: 1000;
    transition: color 620ms ease;
}

.program-cinema__shade {
    background:
        linear-gradient(90deg, rgba(5, 5, 3, 0.95) 0%, rgba(5, 5, 3, 0.74) 34%, rgba(5, 5, 3, 0.22) 70%, rgba(5, 5, 3, 0.72) 100%),
        linear-gradient(180deg, rgba(5, 5, 3, 0.8) 0%, transparent 24%, rgba(5, 5, 3, 0.92) 100%),
        radial-gradient(ellipse at 70% 46%, transparent 36%, rgba(5, 5, 3, 0.76) 100%);
}

.program-cinema__hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 0 clamp(24px, 7vw, 120px);
    pointer-events: none;
}

.program-cinema__hud .eyebrow {
    color: var(--accent);
    transition: color 620ms ease;
}

.program-cinema__hud h2 {
    max-width: 11ch;
    margin: 0 0 34px;
    font-size: clamp(3.3rem, 6.6vw, 7.4rem);
    line-height: 0.86;
    text-transform: none;
    text-wrap: balance;
}

.program-cinema__chapters {
    position: relative;
    width: min(600px, 100%);
    min-height: 330px;
}

.program-chapter {
    position: absolute;
    inset: 0 auto auto 0;
    display: grid;
    align-content: start;
    gap: 14px;
    width: 100%;
    opacity: 0;
    transform: translate3d(0, 46px, 0) scale(0.98);
    transition: opacity 520ms ease, transform 720ms cubic-bezier(0.16, 0.84, 0.24, 1);
    pointer-events: none;
}

.program-chapter.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.program-chapter__index {
    color: transparent;
    font-size: clamp(2rem, 4.4vw, 4rem);
    font-weight: 1000;
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.72);
}

.program-chapter__label {
    margin: 0;
    color: rgba(247, 241, 230, 0.62);
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.program-chapter h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(3.6rem, 8vw, 8.8rem);
    line-height: 0.78;
    text-transform: none;
    text-shadow: 0 16px 70px rgba(0, 0, 0, 0.7);
}

.program-chapter p:not(.program-chapter__label) {
    max-width: 42ch;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.3vw, 1.14rem);
}

.program-chapter a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 42px;
    color: var(--accent);
    font-weight: 950;
    pointer-events: auto;
    transition: color 620ms ease;
}

.program-chapter a::after {
    content: ">";
    margin-left: 8px;
}

.program-cinema .cinema-timeline {
    left: clamp(24px, 7vw, 120px);
    width: min(520px, calc(100% - 48px));
}

html:not(.has-js) .program-cinema {
    height: auto;
    min-height: 0;
}

html:not(.has-js) .program-cinema__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 92px clamp(24px, 7vw, 120px);
}

html:not(.has-js) .program-cinema__stage {
    display: none;
}

html:not(.has-js) .program-cinema__hud {
    position: relative;
    display: block;
    padding: 0;
}

html:not(.has-js) .program-cinema__chapters {
    display: grid;
    gap: 42px;
    min-height: 0;
}

html:not(.has-js) .program-chapter {
    position: static;
    opacity: 1;
    transform: none;
}

html:not(.has-js) .program-cinema .cinema-timeline {
    position: static;
    margin-top: 34px;
}

.scroll-cinema {
    position: relative;
    height: 360svh;
    min-height: 2260px;
    overflow: clip;
    background:
        radial-gradient(circle at 64% 42%, rgba(216, 255, 62, 0.08), transparent 30%),
        linear-gradient(180deg, #060605 0%, #0c0b08 48%, #060605 100%);
    isolation: isolate;
    --sp: 0;
    --sp-eased: 0;
    --accent: var(--acid);
    --accent-rgb: 216, 255, 62;
    transition: --accent 600ms ease;
}

/* Per-scene colour grade: the whole rig shifts hue with the narrative */
.scroll-cinema[data-scene="1"] { --accent: var(--aqua); --accent-rgb: 0, 217, 178; }
.scroll-cinema[data-scene="2"] { --accent: var(--steel); --accent-rgb: 168, 176, 170; }
.scroll-cinema[data-scene="3"] { --accent: var(--ember); --accent-rgb: 255, 75, 34; }
.scroll-cinema[data-scene="4"] { --accent: var(--acid); --accent-rgb: 216, 255, 62; }

.scroll-cinema__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/* --- Cinematic reel: one real shot per theme --------------------------- */
.scroll-cinema__reel {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.reel__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(calc(1.06 + var(--sp) * 0.2));
    transform-origin: 60% 42%;
    filter: saturate(0.9) contrast(1.12) brightness(0.66);
    transition: opacity 1200ms cubic-bezier(0.33, 0, 0.2, 1);
    will-change: opacity, transform;
}

.reel__shot.is-active {
    opacity: 1;
}

/* Per-scene colour grade wash over the footage. */
.reel__grade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 62% 42%, rgba(var(--accent-rgb), 0.22), transparent 58%),
        linear-gradient(120deg, rgba(var(--accent-rgb), 0.14), transparent 46%);
    mix-blend-mode: overlay;
    transition: background 700ms ease;
    pointer-events: none;
}

/* Legibility scrim behind the narrative (left + bottom). */
.reel__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 4, 3, 0.92) 0%, rgba(4, 4, 3, 0.55) 38%, rgba(4, 4, 3, 0.12) 70%),
        linear-gradient(0deg, rgba(4, 4, 3, 0.82), transparent 42%);
    pointer-events: none;
}

/* Cinematic top/bottom letterbox fade + subtle grain seat. */
.reel__bars {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 4, 3, 0.72), transparent 15%, transparent 85%, rgba(4, 4, 3, 0.72));
    pointer-events: none;
}

/* --- Atmosphere ------------------------------------------------------- */
.cinema-atmos {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cinema-atmos__grid {
    position: absolute;
    inset: -10%;
    background:
        repeating-linear-gradient(90deg, rgba(247, 241, 230, 0.05) 0 1px, transparent 1px 108px),
        repeating-linear-gradient(0deg, rgba(247, 241, 230, 0.03) 0 1px, transparent 1px 108px);
    transform: perspective(900px) rotateX(62deg) translateY(calc(var(--sp) * -220px)) scale(1.8);
    transform-origin: 50% 30%;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
}

.cinema-atmos__beam {
    position: absolute;
    top: -20%;
    left: 50%;
    width: 60%;
    height: 140%;
    background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.16) 45%, transparent);
    filter: blur(46px);
    transform: translateX(-50%) translateX(calc((var(--sp) - 0.5) * 42vw)) rotate(9deg);
    opacity: calc(0.35 + var(--sp) * 0.5);
    transition: background 600ms ease;
}

.cinema-atmos__glow {
    position: absolute;
    top: 50%;
    left: 58%;
    width: 62vw;
    height: 62vw;
    max-width: 900px;
    max-height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 62%);
    filter: blur(26px);
    transform: translate(-50%, -50%) scale(calc(0.7 + var(--sp) * 0.6));
    opacity: calc(0.4 + var(--sp) * 0.45);
    transition: background 600ms ease;
}

.cinema-atmos__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 60% 46%, transparent 42%, rgba(4, 4, 3, 0.72) 100%),
        linear-gradient(90deg, rgba(4, 4, 3, 0.9), transparent 46%);
}

/* --- 3D stage -------------------------------------------------------- */
.scroll-cinema__stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cinema3d {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 900ms ease;
}

.is-3d-ready .cinema3d {
    opacity: 1;
}

/* Scroll-scrubbed cinematic sequence: static poster + canvas that fades in. */
.cinema-poster,
.cinema-seq {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.76) contrast(1.18) brightness(0.54);
}

.cinema-seq {
    opacity: 0;
    transition: opacity 600ms ease;
}

.is-seq-ready .cinema-seq {
    opacity: 1;
}

/* Legibility scrim + cinematic vignette over the 3D. */
.cinema-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(4, 4, 3, 0.95) 0%, rgba(4, 4, 3, 0.5) 40%, transparent 70%),
        radial-gradient(ellipse at 62% 46%, transparent 42%, rgba(4, 4, 3, 0.72) 100%);
}

.assembly-shadow {
    position: absolute;
    left: 58%;
    bottom: 16%;
    width: min(560px, 46vw);
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.26), rgba(0, 0, 0, 0.36) 46%, transparent 72%);
    filter: blur(26px);
    transform: translateX(-50%) scaleX(calc(0.9 + var(--sp) * 0.4));
    transition: background 600ms ease;
}

.assembly-float {
    transform: translateX(9vw);
    animation: rig-float 9s ease-in-out infinite;
    transform-style: preserve-3d;
}

.assembly {
    position: relative;
    width: min(560px, 74vw);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform:
        rotateX(calc(62deg - var(--sp-eased) * 34deg))
        rotateZ(calc(-20deg + var(--sp-eased) * 32deg))
        scale(calc(0.82 + var(--sp-eased) * 0.24))
        translate3d(0, calc((var(--sp) - 0.5) * -26px), 0);
}

/* Barbell view: a floating 3/4 product angle that slowly turns as you scroll. */
.assembly--barbell {
    transform:
        rotateX(calc(15deg - var(--sp-eased) * 5deg))
        rotateY(calc(-34deg + var(--sp-eased) * 24deg))
        rotateZ(calc(-3deg + var(--sp-eased) * 5deg))
        scale(calc(0.86 + var(--sp-eased) * 0.16))
        translate3d(0, calc((var(--sp) - 0.5) * -22px), 0);
}

/* ---- Barbell components ------------------------------------------------ */
.bb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    will-change: transform;
}

.bb-bar {
    width: 470px;
    height: 22px;
    margin: -11px 0 0 -235px;
    border-radius: 11px;
    background: linear-gradient(180deg, #f4f4ec 0%, #c3c3b8 24%, #8f8f85 48%, #4b4b45 72%, #24241f 100%);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 3px rgba(0, 0, 0, 0.5);
}

.bb-bar__knurl {
    position: absolute;
    inset: 0 33%;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0 1.5px, transparent 1.5px 5px);
    mix-blend-mode: multiply;
}

.bb-sleeve {
    width: 132px;
    height: 34px;
    margin: -17px 0 0 -66px;
    border-radius: 7px;
    background: linear-gradient(180deg, #e7e7dd 0%, #a6a69b 42%, #5c5c54 74%, #2a2a24 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.bb-collar {
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    border-radius: 50%;
    border: 7px solid rgba(216, 255, 62, 0.85);
    background: radial-gradient(circle, transparent 42%, rgba(216, 255, 62, 0.12) 60%, transparent 64%), rgba(10, 10, 7, 0.7);
    box-shadow: 0 0 26px rgba(216, 255, 62, 0.32), inset 0 0 14px rgba(216, 255, 62, 0.2);
}

/* Bumper plate: colour rim, rubber body, steel hub and centre hole. */
.bb-plate {
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.26), transparent 44%),
        radial-gradient(circle, rgba(var(--plate-rgb), 0) 0 30%, rgba(var(--plate-rgb), 0.16) 32% 60%, rgba(var(--plate-rgb), 0) 62%),
        radial-gradient(circle, #17170f 60%, #0a0a07 63%);
    border: 8px solid var(--plate);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(var(--plate-rgb), 0.4),
        inset 0 0 36px rgba(0, 0, 0, 0.72);
}

.bb-plate::before {
    position: absolute;
    inset: 29%;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, #d7d7cd, #7c7c72 52%, #33332d);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.bb-plate::after {
    position: absolute;
    inset: 43%;
    content: "";
    border-radius: 50%;
    background: #050503;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
}

.bb-plate--xl { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
.bb-plate--l  { width: 210px; height: 210px; margin: -105px 0 0 -105px; }
.bb-plate--m  { width: 174px; height: 174px; margin: -87px 0 0 -87px; }
.bb-plate--s  { width: 138px; height: 138px; margin: -69px 0 0 -69px; }

.bb-plate--ember { --plate: #ff5a34; --plate-rgb: 255, 90, 52; }
.bb-plate--gold  { --plate: #ffc23d; --plate-rgb: 255, 194, 61; }
.bb-plate--aqua  { --plate: #25e0c0; --plate-rgb: 37, 224, 192; }
.bb-plate--acid  { --plate: #d8ff3e; --plate-rgb: 216, 255, 62; }

.assembly__piece {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.assembly__piece[data-fade] {
    opacity: 0;
}

.assembly__frame {
    width: 78%;
    height: 78%;
    margin: -39% 0 0 -39%;
    border: 2px solid rgba(var(--accent-rgb), 0.56);
    background:
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), transparent 18%, transparent 82%, rgba(var(--accent-rgb), 0.08)),
        rgba(8, 8, 6, 0.12);
    box-shadow: 0 0 70px rgba(var(--accent-rgb), 0.12), inset 0 0 44px rgba(var(--accent-rgb), 0.08);
    transition: border-color 600ms ease, box-shadow 600ms ease;
}

.assembly__corner {
    position: absolute;
    width: 58px;
    height: 58px;
    border-color: rgba(var(--accent-rgb), 1);
    border-style: solid;
    opacity: 0.94;
    transition: border-color 600ms ease;
}

.assembly__corner--tl {
    top: -2px;
    left: -2px;
    border-width: 4px 0 0 4px;
}

.assembly__corner--tr {
    top: -2px;
    right: -2px;
    border-width: 4px 4px 0 0;
}

.assembly__corner--bl {
    bottom: -2px;
    left: -2px;
    border-width: 0 0 4px 4px;
}

.assembly__corner--br {
    right: -2px;
    bottom: -2px;
    border-width: 0 4px 4px 0;
}

.assembly__glass {
    display: grid;
    place-items: end start;
    width: 68%;
    height: 68%;
    margin: -34% 0 0 -34%;
    padding: 22px;
    border: 1px solid rgba(247, 241, 230, 0.18);
    background:
        linear-gradient(135deg, rgba(247, 241, 230, 0.12), rgba(247, 241, 230, 0.02)),
        linear-gradient(45deg, transparent 0 48%, rgba(216, 255, 62, 0.16) 49% 51%, transparent 52% 100%);
    backdrop-filter: blur(10px);
}

.assembly__glass span {
    color: rgba(247, 241, 230, 0.68);
    font-size: 0.82rem;
    font-weight: 1000;
    text-transform: uppercase;
}

.assembly__photo {
    overflow: hidden;
    border: 1px solid rgba(247, 241, 230, 0.16);
    background: #050503;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.44);
}

.assembly__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.74) contrast(1.16) brightness(0.82);
}

.assembly__photo--main {
    width: 48%;
    height: 58%;
    margin: -29% 0 0 -24%;
}

.assembly__photo--side {
    width: 36%;
    height: 27%;
    margin: -13.5% 0 0 -18%;
}

.assembly__core {
    display: grid;
    place-items: center;
    width: 188px;
    height: 188px;
    margin: -94px 0 0 -94px;
}

.assembly__core-ring,
.assembly__core-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.assembly__core-ring {
    border: 8px solid rgba(var(--accent-rgb), 0.9);
    box-shadow: 0 0 46px rgba(var(--accent-rgb), 0.34), inset 0 0 34px rgba(var(--accent-rgb), 0.18);
    transition: border-color 600ms ease, box-shadow 600ms ease;
}

.assembly__core-pulse {
    inset: 30px;
    border: 1px solid rgba(255, 75, 34, 0.72);
    background: radial-gradient(circle, rgba(216, 255, 62, 0.22), rgba(255, 75, 34, 0.08), transparent 68%);
    animation: core-breathe 1500ms ease-in-out infinite alternate;
}

.assembly__core strong {
    position: relative;
    color: var(--ink);
    font-size: 1.28rem;
    font-weight: 1000;
    text-shadow: 0 0 18px rgba(216, 255, 62, 0.58);
}

.assembly__circuit {
    display: grid;
    place-items: center;
    width: 176px;
    height: 58px;
    margin: -29px 0 0 -88px;
    border: 1px solid rgba(247, 241, 230, 0.22);
    background:
        linear-gradient(90deg, rgba(247, 241, 230, 0.08), transparent),
        rgba(8, 8, 6, 0.72);
    box-shadow: inset 0 0 22px rgba(247, 241, 230, 0.05);
    transition: border-color 400ms ease, box-shadow 400ms ease, background 400ms ease;
}

.assembly__circuit span {
    color: rgba(247, 241, 230, 0.66);
    font-size: 0.82rem;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 400ms ease, text-shadow 400ms ease;
}

/* The layer that matches the current chapter lights up */
.scroll-cinema[data-scene="1"] .assembly__circuit--breath,
.scroll-cinema[data-scene="2"] .assembly__circuit--coach,
.scroll-cinema[data-scene="3"] .assembly__circuit--force,
.scroll-cinema[data-scene="4"] .assembly__circuit--team {
    border-color: rgba(var(--accent-rgb), 0.8);
    background:
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.28), transparent),
        rgba(8, 8, 6, 0.82);
    box-shadow: 0 0 32px rgba(var(--accent-rgb), 0.22), inset 0 0 22px rgba(var(--accent-rgb), 0.12);
}

.scroll-cinema[data-scene="1"] .assembly__circuit--breath span,
.scroll-cinema[data-scene="2"] .assembly__circuit--coach span,
.scroll-cinema[data-scene="3"] .assembly__circuit--force span,
.scroll-cinema[data-scene="4"] .assembly__circuit--team span {
    color: var(--ink);
    text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.7);
}

.assembly__bar {
    background: linear-gradient(90deg, transparent, rgba(247, 241, 230, 0.5), rgba(var(--accent-rgb), 0.92), transparent);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.18);
    transition: background 600ms ease, box-shadow 600ms ease;
}

.assembly__bar--top,
.assembly__bar--bottom {
    width: 72%;
    height: 7px;
    margin: -3.5px 0 0 -36%;
}

.assembly__bar--left,
.assembly__bar--right {
    width: 7px;
    height: 72%;
    margin: -36% 0 0 -3.5px;
}

/* --- Narrative HUD --------------------------------------------------- */
.scroll-cinema__hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 0 clamp(24px, 6vw, 104px);
    pointer-events: none;
}

.scroll-cinema__hud::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(90deg, rgba(4, 4, 3, 0.9) 0%, rgba(4, 4, 3, 0.46) 36%, transparent 66%);
}

.scroll-cinema__hud .eyebrow {
    margin: 0 0 18px;
    color: var(--accent);
    transition: color 600ms ease;
}

.cinema-standfirst {
    max-width: 31ch;
    margin: 0 0 30px;
    color: rgba(247, 241, 230, 0.64);
    font-size: clamp(1.02rem, 1.35vw, 1.32rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
}

.cinema-chapters {
    position: relative;
    width: min(560px, 100%);
    min-height: clamp(280px, 40vh, 380px);
}

.cinema-chapter {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    align-content: start;
    gap: 16px;
    width: 100%;
    opacity: 0;
    will-change: opacity, transform;
}

.cinema-chapter__index {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.72);
    transition: -webkit-text-stroke-color 600ms ease;
}

.cinema-chapter__title {
    margin: 0;
    font-size: clamp(3.1rem, 6.4vw, 6.4rem);
    line-height: 0.88;
    text-transform: none;
    text-wrap: balance;
    color: var(--ink);
    text-shadow: 0 6px 44px rgba(0, 0, 0, 0.66);
}

.cinema-chapter__body {
    margin: 0;
    max-width: 42ch;
    color: var(--muted);
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    line-height: 1.5;
}

.cinema-timeline {
    position: absolute;
    left: clamp(24px, 6vw, 104px);
    bottom: clamp(30px, 6vh, 66px);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    width: min(560px, calc(100% - 48px));
    margin: 0;
    padding: 0;
    list-style: none;
}

.cinema-timeline li {
    padding-top: 12px;
    color: rgba(247, 241, 230, 0.4);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 2px solid rgba(247, 241, 230, 0.16);
    transition: color 320ms ease, border-color 320ms ease;
}

.cinema-timeline li span {
    display: block;
    margin-bottom: 3px;
    color: rgba(247, 241, 230, 0.34);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    transition: color 320ms ease;
}

.cinema-timeline li.is-passed {
    border-top-color: rgba(var(--accent-rgb), 0.5);
    color: rgba(247, 241, 230, 0.62);
}

.cinema-timeline li.is-active {
    color: var(--ink);
    border-top-color: var(--accent);
}

.cinema-timeline li.is-active span {
    color: var(--accent);
}

.cinema-hint {
    position: absolute;
    right: clamp(24px, 6vw, 72px);
    bottom: clamp(30px, 6vh, 66px);
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: rgba(247, 241, 230, 0.52);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transition: opacity 400ms ease;
}

.cinema-hint span {
    position: relative;
    width: 1px;
    height: 34px;
    background: rgba(var(--accent-rgb), 0.4);
    overflow: hidden;
}

.cinema-hint span::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent, var(--accent));
    transform: translateY(-100%);
    animation: hint-drop 1.8s ease-in-out infinite;
}

/* No-JS fallback: the pinned cinema collapses to a readable, static block so
   the narrative text is fully visible to crawlers and no-script visitors. The
   3D rig is decorative (aria-hidden) and simply hidden without JS. */
html:not(.has-js) .scroll-cinema {
    height: auto;
    min-height: 0;
}

html:not(.has-js) .scroll-cinema__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 92px 0;
}

html:not(.has-js) .scroll-cinema__stage,
html:not(.has-js) .scroll-cinema__reel {
    display: none;
}

html:not(.has-js) .scroll-cinema__hud {
    position: relative;
    align-content: start;
    padding: 0 clamp(24px, 6vw, 104px);
}

html:not(.has-js) .scroll-cinema__hud::before {
    display: none;
}

html:not(.has-js) .cinema-chapters {
    display: grid;
    gap: 40px;
    min-height: 0;
}

html:not(.has-js) .cinema-chapter {
    position: static;
    opacity: 1;
    transform: none;
}

html:not(.has-js) .cinema-timeline {
    position: static;
    margin-top: 34px;
}

html:not(.has-js) .cinema-hint {
    display: none;
}

/* ===================================================================
   "El ritmo del día" — pinned schedule/pricing scene (horarios).
   =================================================================== */
.day-cinema {
    position: relative;
    height: 300svh;
    min-height: 1900px;
    overflow: clip;
    isolation: isolate;
    --sp: 0;
    --sp-eased: 0;
    --accent: var(--gold);
    --accent-rgb: 242, 170, 34;
    /* JS updates this continuous left-to-right route from the real class hours.
       These values are just the no-hydration first frame. */
    --astro-x: 24%;
    --astro-y: 48%;
    --sun-op: 1;
    --moon-op: 0;
    --star-op: 0;
    --night: 0;
    --horizon-glow: 0.34;
    --sun-halo: 0.34;
    --sun-scale: 1;
    --moon-scale: 0.78;
}

/* Mañana (09:30-11:30): east-left, rising light. */
.day-cinema[data-scene="0"] { --astro-x: 28%; --astro-y: 39%; --sun-op: 1; --moon-op: 0; --star-op: 0; --night: 0; --horizon-glow: 0.42; --sun-halo: 0.36; }
/* Tarde (17:00-21:00): west-right, lower and warmer toward closing. */
.day-cinema[data-scene="1"] { --accent: var(--ember); --accent-rgb: 255, 75, 34; --astro-x: 78%; --astro-y: 48%; --sun-op: 0.82; --moon-op: 0; --star-op: 0.22; --night: 0.28; --horizon-glow: 0.58; --sun-halo: 0.46; }
/* Sábado (10:00-11:00): a new morning slot, not a night scene. */
.day-cinema[data-scene="2"] { --accent: var(--aqua); --accent-rgb: 0, 217, 178; --astro-x: 30%; --astro-y: 38%; --sun-op: 1; --moon-op: 0; --star-op: 0; --night: 0; --horizon-glow: 0.36; --sun-halo: 0.32; }
/* Tarifas: the same route closes into night, with the moon taking over. */
.day-cinema[data-scene="3"] { --accent: var(--acid); --accent-rgb: 216, 255, 62; --astro-x: 70%; --astro-y: 25%; --sun-op: 0; --moon-op: 1; --star-op: 1; --night: 1; --horizon-glow: 0.12; --sun-halo: 0; }

.day-cinema__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.day-atmos {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.day-atmos__image {
    position: absolute;
    inset: -10% 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    filter: saturate(0.54) contrast(1.24) brightness(0.22);
    opacity: calc(0.28 + var(--night) * 0.18);
    transform: scale(1.08) translate3d(0, calc(var(--sp) * -5vh), 0);
}

.day-atmos__sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--astro-x) var(--astro-y), rgba(255, 232, 168, calc(var(--sun-halo) * 0.78)) 0 7%, rgba(255, 150, 64, calc(var(--sun-halo) * 0.32)) 13%, transparent 34%),
        radial-gradient(ellipse at 50% 112%, rgba(var(--accent-rgb), var(--horizon-glow)), transparent 62%),
        linear-gradient(180deg, rgba(12, 18, 42, calc(var(--night) * 0.85)) 0%, transparent 55%),
        linear-gradient(180deg, rgba(23, 36, 61, 0.74) 0%, rgba(16, 20, 25, 0.84) 42%, #080806 100%);
    mix-blend-mode: screen;
    opacity: 0.74;
    transition: background 700ms ease;
}

.day-atmos__stars {
    position: absolute;
    inset: 0 0 40% 0;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.2px 1.2px at 27% 12%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.6px 1.6px at 44% 26%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 63% 14%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.3px 1.3px at 77% 23%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.1px 1.1px at 88% 11%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 35% 7%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 54% 17%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.1px 1.1px at 7% 34%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.3px 1.3px at 71% 33%, rgba(255, 255, 255, 0.7), transparent);
    opacity: var(--star-op);
    transform: translate3d(calc(var(--sp) * -18px), calc(var(--sp) * 8px), 0);
    transition: opacity 700ms ease;
}

.day-atmos__grid {
    position: absolute;
    inset: 40% -20% -10%;
    background:
        repeating-linear-gradient(90deg, rgba(247, 241, 230, 0.05) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg, rgba(247, 241, 230, 0.04) 0 1px, transparent 1px 96px);
    transform: perspective(760px) rotateX(70deg) translateY(calc(var(--sp) * -120px));
    transform-origin: 50% 0;
    mask-image: linear-gradient(180deg, #000, transparent 82%);
    opacity: 0.32;
}

/* Realistic sun: warm core + corona + slow rays. Position follows the single
   schedule astro path driven by --astro-x / --astro-y. */
.day-atmos__sun {
    position: absolute;
    left: var(--astro-x);
    top: var(--astro-y);
    width: 172px;
    height: 172px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.96) 0 6%, transparent 17%),
        radial-gradient(circle at 50% 47%, #fff7d8 0%, #ffe08e 21%, #ffad35 43%, rgba(255, 122, 39, 0.62) 60%, transparent 74%);
    box-shadow: 0 0 70px 22px rgba(255, 180, 90, 0.42), 0 0 190px 70px rgba(255, 150, 60, 0.2);
    opacity: var(--sun-op);
    transform: translate3d(-50%, -50%, 0) scale(var(--sun-scale));
    transition: opacity 500ms ease, filter 700ms ease;
    filter: saturate(calc(1 + var(--night) * 0.24)) contrast(calc(1 + var(--night) * 0.12));
    will-change: left, top, opacity, transform;
}

.day-atmos__sun::after {
    position: absolute;
    inset: -70%;
    content: "";
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(255, 205, 130, 0.16) 0deg 4deg, transparent 4deg 26deg,
        rgba(255, 205, 130, 0.16) 26deg 30deg, transparent 30deg 52deg,
        rgba(255, 205, 130, 0.16) 52deg 56deg, transparent 56deg 78deg,
        rgba(255, 205, 130, 0.16) 78deg 82deg, transparent 82deg 104deg,
        rgba(255, 205, 130, 0.16) 104deg 108deg, transparent 108deg 130deg,
        rgba(255, 205, 130, 0.16) 130deg 134deg, transparent 134deg 156deg,
        rgba(255, 205, 130, 0.16) 156deg 160deg, transparent 160deg 182deg,
        rgba(255, 205, 130, 0.16) 182deg 186deg, transparent 186deg 360deg);
    mask-image: radial-gradient(circle, #000 26%, transparent 62%);
    -webkit-mask-image: radial-gradient(circle, #000 26%, transparent 62%);
    animation: sun-rays 90s linear infinite;
}

/* Realistic moon: same astro route, with lit terminator + craters. */
.day-atmos__moon {
    position: absolute;
    left: var(--astro-x);
    top: var(--astro-y);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #fbfbf3 0%, #d7dad4 45%, #9fa6a7 100%);
    box-shadow: 0 0 52px 10px rgba(200, 220, 255, 0.28), inset -18px -10px 28px rgba(0, 0, 12, 0.52);
    opacity: var(--moon-op);
    transform: translate3d(-50%, -50%, 0) scale(var(--moon-scale));
    transition: opacity 700ms ease;
    will-change: left, top, opacity, transform;
}

.day-atmos__moon::before {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle at 24% 42%, transparent 0 38%, rgba(6, 8, 20, 0.16) 50%, rgba(6, 8, 20, 0.42) 100%);
    mix-blend-mode: multiply;
}

.day-atmos__moon::after {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(7px 7px at 60% 40%, rgba(0, 0, 0, 0.14), transparent 60%),
        radial-gradient(10px 10px at 40% 62%, rgba(0, 0, 0, 0.11), transparent 60%),
        radial-gradient(4px 4px at 67% 66%, rgba(0, 0, 0, 0.13), transparent 60%),
        radial-gradient(5px 5px at 50% 30%, rgba(0, 0, 0, 0.1), transparent 60%);
}

@keyframes sun-rays {
    to { transform: rotate(360deg); }
}

.day-atmos__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%, transparent 44%, rgba(4, 4, 3, 0.72) 100%);
}

.day-cinema__hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    padding: 0 clamp(24px, 6vw, 80px);
    text-align: center;
}

.day-cinema__hud .eyebrow {
    margin: 0 0 16px;
    color: var(--accent);
    transition: color 600ms ease;
}

.day-cinema .cinema-standfirst {
    max-width: 34ch;
    margin: 0 0 30px;
    text-align: center;
}

.day-chapters {
    position: relative;
    width: min(760px, 100%);
    min-height: clamp(320px, 44vh, 440px);
}

.day-chapter {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(46px) scale(0.97);
    transition: opacity 520ms ease, transform 640ms cubic-bezier(0.16, 0.84, 0.24, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.day-chapter.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.day-chapter__index {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 1000;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.7);
    transition: -webkit-text-stroke-color 600ms ease;
}

.day-chapter__label {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.day-chapter__title {
    margin: 0;
    font-size: clamp(3.4rem, 8vw, 7rem);
    line-height: 0.86;
    text-transform: none;
    color: var(--ink);
    text-shadow: 0 6px 44px rgba(0, 0, 0, 0.6);
}

.day-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.day-chip {
    padding: 12px 22px;
    color: var(--ink);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 1000;
    letter-spacing: 0.02em;
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: inset 0 0 20px rgba(var(--accent-rgb), 0.1);
    transition: border-color 600ms ease, background 600ms ease;
}

.day-prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 230px));
    gap: 12px;
    margin-top: 6px;
}

.day-prices div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid rgba(247, 241, 230, 0.14);
    background: rgba(247, 241, 230, 0.04);
}

.day-prices span {
    color: var(--muted);
    font-weight: 800;
}

.day-prices strong {
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 1000;
    transition: color 600ms ease;
}

.day-chapter__note {
    max-width: 48ch;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
}

.day-cinema .cinema-timeline {
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
}

/* No-JS fallback: static, fully readable stacked schedule + prices. */
html:not(.has-js) .day-cinema {
    height: auto;
    min-height: 0;
}

html:not(.has-js) .day-cinema__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 92px 0;
}

html:not(.has-js) .day-atmos__sun,
html:not(.has-js) .day-atmos__moon,
html:not(.has-js) .day-atmos__stars,
html:not(.has-js) .day-atmos__grid {
    display: none;
}

html:not(.has-js) .day-cinema__hud {
    position: relative;
}

html:not(.has-js) .day-chapters {
    display: grid;
    gap: 48px;
    min-height: 0;
}

html:not(.has-js) .day-chapter {
    position: static;
    opacity: 1;
    transform: none;
}

html:not(.has-js) .day-cinema .cinema-timeline {
    position: static;
    margin: 40px auto 0;
    transform: none;
}

.cinema-wall {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(520px, 0.9fr);
    align-items: center;
    gap: 54px;
    width: min(1320px, calc(100% - 40px));
    min-height: 780px;
    margin: 0 auto;
    padding: 112px 0 84px;
    border-bottom: 1px solid rgba(247, 241, 230, 0.1);
    isolation: isolate;
}

.cinema-wall::before {
    position: absolute;
    inset: 8% -6% auto;
    z-index: -1;
    height: 58%;
    content: "";
    background:
        linear-gradient(100deg, rgba(255, 75, 34, 0.16), transparent 38%),
        linear-gradient(260deg, rgba(0, 217, 178, 0.12), transparent 42%),
        repeating-linear-gradient(90deg, rgba(247, 241, 230, 0.05) 0 1px, transparent 1px 84px);
    transform: skewY(-4deg);
}

.cinema-wall__copy h2 {
    margin: 0;
    font-size: clamp(3.1rem, 5.5vw, 6.3rem);
    line-height: 0.88;
    text-transform: uppercase;
    text-wrap: balance;
}

.cinema-wall__copy p:not(.eyebrow) {
    color: var(--muted);
    font-size: 1.1rem;
}

.cinema-wall__frames {
    position: relative;
    min-height: 650px;
}

.cinema-frame {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(247, 241, 230, 0.18);
    background: var(--panel);
    box-shadow: var(--shadow);
    transform: rotate(var(--base-rotate, 0deg)) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: transform 180ms ease, filter 180ms ease;
}

.cinema-frame::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(180deg, transparent 46%, rgba(8, 8, 6, 0.86)),
        linear-gradient(90deg, rgba(216, 255, 62, 0.14), transparent 36%);
}

.cinema-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.18);
    transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 180ms ease;
}

.cinema-frame:hover img {
    transform: scale(1.07);
    filter: saturate(0.98) contrast(1.14);
}

.cinema-frame figcaption {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;
    color: var(--acid);
    font-size: 0.82rem;
    font-weight: 1000;
    text-transform: uppercase;
}

.cinema-frame--large {
    left: 0;
    top: 52px;
    width: 66%;
    aspect-ratio: 4 / 5;
    --base-rotate: -2deg;
}

.cinema-frame--lift {
    right: 0;
    top: 0;
    width: 48%;
    aspect-ratio: 4 / 3;
    --base-rotate: 2.3deg;
}

.cinema-frame--pulse {
    right: 6%;
    bottom: 12px;
    width: 50%;
    aspect-ratio: 4 / 3;
    --base-rotate: -1.6deg;
}

.section {
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
    padding: 96px 0;
}

.section--split {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
    align-items: center;
    gap: 58px;
}

.section__copy,
.section__header,
.method__copy,
.coach__copy,
.contact__copy {
    max-width: 720px;
}

.section h2,
.contact h2,
.method h2,
.coach h2 {
    margin: 0;
    font-size: 3.4rem;
    line-height: 0.98;
    letter-spacing: 0;
    text-wrap: balance;
}

.section p,
.contact p {
    color: var(--muted);
    font-size: 1.06rem;
}

.text-link,
.program a,
.local-links a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: var(--acid);
    font-weight: 900;
}

.text-link::after,
.program a::after,
.local-links a::after {
    content: ">";
    margin-left: 8px;
}

.photo-cinema {
    position: relative;
    min-height: 560px;
}

/* "El box" cinematic video panel */
.box-media {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(247, 241, 230, 0.14);
    background: #050503;
    box-shadow: var(--shadow);
    isolation: isolate;
}

.box-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.68) contrast(1.22) brightness(0.48);
    transform: scale(1.06);
}

.box-media__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 5, 3, 0.64) 0%, rgba(5, 5, 3, 0.22) 45%, rgba(5, 5, 3, 0.5) 100%),
        linear-gradient(180deg, rgba(5, 5, 3, 0.28) 0%, rgba(5, 5, 3, 0.12) 42%, rgba(4, 4, 3, 0.84) 100%),
        radial-gradient(circle at 74% 24%, rgba(216, 255, 62, 0.08), transparent 48%);
}

.box-media__frame {
    position: absolute;
    inset: 14px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(247, 241, 230, 0.22);
    mix-blend-mode: overlay;
}

.photo-cinema figure {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(247, 241, 230, 0.18);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.photo-cinema img,
.method__image img,
.coach__portrait img,
.contact__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.method__image img {
    object-position: 50% 40%;
}

.contact__image {
    object-position: 54% 58%;
}

.photo-cinema__main {
    left: 0;
    bottom: 0;
    width: 72%;
    aspect-ratio: 4 / 5;
    transform: rotate(-1.5deg);
}

.photo-cinema__side {
    right: 0;
    width: 42%;
    aspect-ratio: 4 / 3;
}

.photo-cinema__side--top {
    top: 0;
    transform: rotate(2deg);
}

.photo-cinema__side--bottom {
    bottom: 44px;
    transform: rotate(-2.5deg);
}

.programs {
    width: min(1320px, calc(100% - 40px));
}

.section__header {
    margin-bottom: 36px;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(247, 241, 230, 0.14);
    background: rgba(247, 241, 230, 0.14);
}

.program {
    min-height: 360px;
    padding: 28px;
    background:
        linear-gradient(180deg, rgba(247, 241, 230, 0.04), transparent),
        var(--panel);
    transition: transform 220ms ease, background 220ms ease;
}

.program:hover {
    z-index: 1;
    background:
        linear-gradient(145deg, rgba(216, 255, 62, 0.16), transparent 56%),
        var(--panel-2);
    transform: translateY(-8px);
}

.program__num {
    display: block;
    margin-bottom: 44px;
    color: var(--ember);
    font-size: 0.86rem;
    font-weight: 950;
}

.program h3 {
    margin: 0;
    font-size: 2rem;
    text-transform: uppercase;
}

.program p {
    min-height: 110px;
}

.method {
    display: grid;
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 56px;
}

.method__image {
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(247, 241, 230, 0.16);
    box-shadow: var(--shadow);
}

.method-list {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 30px 0 0;
    padding: 0 0 0 8px;
    list-style: none;
    counter-reset: method;
}

/* Vertical spine running through the numbered nodes. */
.method-list::before {
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 25px;
    width: 2px;
    content: "";
    background: linear-gradient(180deg, var(--acid), rgba(216, 255, 62, 0.12));
}

.method-list li {
    position: relative;
    padding: 18px 18px 18px 66px;
    border: 1px solid rgba(247, 241, 230, 0.13);
    background: rgba(247, 241, 230, 0.05);
    color: var(--muted);
    transition: border-color 320ms ease, background 320ms ease, transform 320ms ease;
}

.method-list li::before {
    position: absolute;
    top: 50%;
    left: 8px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--acid);
    font-size: 0.9rem;
    font-weight: 950;
    background: var(--black);
    border: 2px solid var(--acid);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(216, 255, 62, 0.28);
    transform: translateY(-50%);
    counter-increment: method;
    content: counter(method, decimal-leading-zero);
}

.method-list li:hover {
    border-color: rgba(216, 255, 62, 0.4);
    background: rgba(216, 255, 62, 0.07);
    transform: translateX(6px);
}

.method-list strong {
    color: var(--ink);
}

.schedule-pricing {
    width: min(1320px, calc(100% - 40px));
}

.schedule-pricing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
    gap: 22px;
}

.timetable,
.pricing,
.local-proof,
.trial-form {
    border: 1px solid rgba(247, 241, 230, 0.16);
    background:
        linear-gradient(180deg, rgba(247, 241, 230, 0.05), transparent),
        var(--panel);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
}

.timetable,
.pricing {
    min-height: 420px;
    padding: 28px;
}

.timetable h3,
.pricing h3 {
    margin: 0 0 22px;
    font-size: 1.8rem;
}

.timetable__rows,
.price-list {
    display: grid;
    gap: 12px;
}

.timetable__rows div,
.price-list div {
    display: grid;
    grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 70px;
    padding: 16px;
    border: 1px solid rgba(247, 241, 230, 0.12);
    background: rgba(8, 8, 6, 0.38);
}

.timetable__rows span,
.price-list span {
    color: var(--dim);
    font-weight: 850;
}

.timetable__rows strong,
.price-list strong {
    color: var(--ink);
    font-size: 1.12rem;
}

.price-list strong {
    color: var(--acid);
    font-size: 1.8rem;
}

.coach {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: center;
    gap: 46px;
    border-top: 1px solid rgba(247, 241, 230, 0.12);
    border-bottom: 1px solid rgba(247, 241, 230, 0.12);
}

.coach__portrait {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(216, 255, 62, 0.28);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.coach__portrait::after {
    position: absolute;
    inset: auto 0 0;
    height: 36%;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(8, 8, 6, 0.74));
}

.local-seo {
    padding-top: 64px;
}

.local-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.local-links a {
    min-height: 96px;
    padding: 18px;
    border: 1px solid rgba(247, 241, 230, 0.14);
    background: rgba(247, 241, 230, 0.05);
}

.local-links a:hover {
    border-color: rgba(216, 255, 62, 0.5);
    background: rgba(216, 255, 62, 0.09);
}

.faq {
    padding-top: 40px;
}

.faq-list {
    display: grid;
    gap: 12px;
}

details {
    border: 1px solid rgba(247, 241, 230, 0.14);
    background: rgba(247, 241, 230, 0.05);
}

summary {
    min-height: 66px;
    padding: 20px 22px;
    font-size: 1.12rem;
    font-weight: 900;
    cursor: pointer;
}

details p {
    margin: 0;
    padding: 0 22px 22px;
}

.contact {
    position: relative;
    display: grid;
    gap: 0;
    min-height: 740px;
    margin-top: 40px;
    overflow: hidden;
    isolation: isolate;
}

.contact__image,
.contact__shade {
    position: absolute;
    inset: 0;
}

.contact__image {
    z-index: -3;
    filter: saturate(0.88) contrast(1.12) brightness(0.48);
}

.contact__shade {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(8, 8, 6, 0.94), rgba(8, 8, 6, 0.7), rgba(8, 8, 6, 0.32)),
        linear-gradient(180deg, #080806 0%, transparent 24%, #080806 100%);
}

.contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.48fr);
    align-items: center;
    gap: 44px;
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
    padding: 96px 0 56px;
}

address {
    margin-top: 28px;
    color: var(--ink);
    font-style: normal;
    font-weight: 850;
}

address a,
.site-footer a {
    color: var(--acid);
}

.contact__copy > p:not(.eyebrow) {
    max-width: 46ch;
    color: rgba(247, 241, 230, 0.78);
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
    font-weight: 650;
}

.contact__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.contact__proof span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(247, 241, 230, 0.14);
    color: rgba(247, 241, 230, 0.78);
    background: rgba(8, 8, 6, 0.46);
    font-size: 0.78rem;
    font-weight: 850;
}

.trial-form {
    display: grid;
    gap: 16px;
    padding: 24px;
    backdrop-filter: blur(22px) saturate(1.12);
}

.trial-form label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 850;
}

.trial-form input,
.trial-form select {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(247, 241, 230, 0.2);
    border-radius: 0;
    color: var(--ink);
    background: rgba(8, 8, 6, 0.62);
}

.trial-form input {
    padding: 0 12px;
}

.trial-form select {
    padding: 0 10px;
}

.contact iframe {
    width: min(var(--max), calc(100% - 40px));
    height: 320px;
    margin: 0 auto 52px;
    border: 1px solid rgba(247, 241, 230, 0.16);
    filter: grayscale(1) contrast(1.1) invert(0.92);
}

.site-footer {
    display: grid;
    gap: 6px;
    padding: 34px 20px 44px;
    border-top: 1px solid rgba(247, 241, 230, 0.14);
    color: var(--muted);
    text-align: center;
}

.site-footer p {
    margin: 0;
}

body,
body * {
    letter-spacing: 0;
}

/* ===================================================================
   Site-wide cinematic motion layer (progressive enhancement).
   All hidden states are scoped to .has-js, so a no-JS render — and any
   crawler that doesn't execute scripts — always sees the full content.
   =================================================================== */

.has-js.is-leaving body {
    opacity: 0;
    transition: opacity 300ms ease;
    animation: none;
}

.has-js [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 760ms ease, transform 860ms cubic-bezier(0.16, 0.84, 0.24, 1);
    will-change: opacity, transform;
}

.has-js [data-reveal="left"] {
    transform: translateX(-46px);
}

.has-js [data-reveal="right"] {
    transform: translateX(46px);
}

.has-js [data-reveal="scale"] {
    transform: scale(0.92);
}

.has-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Staggered groups: each child enters a beat after the previous one. */
.has-js [data-stagger] > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 680ms ease, transform 760ms cubic-bezier(0.16, 0.84, 0.24, 1);
    transition-delay: calc(var(--i, 0) * 85ms);
    will-change: opacity, transform;
}

.has-js [data-stagger].is-visible > * {
    opacity: 1;
    transform: none;
}

.hero__session.is-visible {
    transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.cinema-frame.is-visible {
    transform: rotate(var(--base-rotate, 0deg)) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

/* Section parallax drift — JS sets --parallax per element. */
.has-js [data-parallax] {
    transform: translate3d(0, var(--parallax, 0px), 0);
    will-change: transform;
}

/* Image parallax keeps an overscale so drifting never reveals frame edges. */
.has-js img[data-parallax] {
    transform: translate3d(0, var(--parallax, 0px), 0) scale(1.14);
}

/* Global scroll-progress rail. */
.page-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1200;
    height: 3px;
    pointer-events: none;
    background: rgba(247, 241, 230, 0.06);
    --page-progress: 0;
}

.page-progress span {
    display: block;
    height: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--page-progress));
    background: linear-gradient(90deg, var(--acid), var(--gold) 52%, var(--ember));
    box-shadow: 0 0 16px rgba(216, 255, 62, 0.5);
}

.local-hero {
    position: relative;
    min-height: 72svh;
    padding: 130px 24px 62px;
    overflow: hidden;
    isolation: isolate;
}

.breadcrumb {
    position: relative;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
    padding: 104px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 850;
}

.breadcrumb a {
    color: var(--acid);
}

.local-hero__image,
.local-hero__shade {
    position: absolute;
    inset: 0;
}

.local-hero__image {
    z-index: -5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.12) brightness(0.56);
}

.local-hero__shade {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(8, 8, 6, 0.94), rgba(8, 8, 6, 0.62), rgba(8, 8, 6, 0.34)),
        linear-gradient(180deg, transparent, #080806);
}

.local-hero__inner {
    width: min(var(--max), 100%);
    margin: 0 auto;
    padding-top: 14svh;
}

.local-hero h1 {
    max-width: 980px;
}

.section--article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
    gap: 42px;
}

.section--article article {
    max-width: 800px;
}

.section--article h2 {
    margin-top: 42px;
    font-size: 2.4rem;
}

.article-intro {
    color: var(--acid);
    font-size: 1.22rem;
    font-weight: 850;
}

.local-proof {
    align-self: start;
    padding: 24px;
}

.local-proof img {
    width: 92px;
    height: 92px;
    margin-bottom: 20px;
}

.local-proof h2 {
    font-size: 1.8rem;
}

.detail-grid {
    padding-top: 28px;
}

.detail-grid__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.detail-grid__items article {
    min-height: 220px;
    padding: 24px;
    border: 1px solid rgba(247, 241, 230, 0.14);
    background:
        linear-gradient(180deg, rgba(216, 255, 62, 0.06), transparent),
        rgba(247, 241, 230, 0.045);
}

.detail-grid__items h3 {
    margin: 0 0 18px;
    font-size: 1.6rem;
}

.detail-grid__items p {
    margin: 0;
}

.data-section {
    padding-top: 28px;
}

.data-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(247, 241, 230, 0.14);
    background:
        linear-gradient(180deg, rgba(247, 241, 230, 0.05), transparent),
        var(--panel);
}

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(247, 241, 230, 0.12);
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    color: var(--acid);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-table tbody th {
    color: var(--ink);
    font-size: 1.08rem;
}

.data-table td {
    color: var(--muted);
}

.data-table strong {
    color: var(--acid);
    font-size: 1.28rem;
}

.not-found {
    position: relative;
    display: grid;
    min-height: 100svh;
    padding: 160px 24px 80px;
    overflow: hidden;
    isolation: isolate;
}

.not-found__image,
.not-found__shade {
    position: absolute;
    inset: 0;
}

.not-found__image {
    z-index: -5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.12) brightness(0.44);
}

.not-found__shade {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(8, 8, 6, 0.94), rgba(8, 8, 6, 0.62), rgba(8, 8, 6, 0.34)),
        linear-gradient(180deg, transparent, #080806);
}

.not-found__inner {
    width: min(820px, 100%);
    margin: auto;
}

.not-found h1 {
    margin: 0 0 24px;
    font-size: clamp(3rem, 7vw, 6.8rem);
    line-height: 0.94;
    letter-spacing: 0;
}

.not-found p {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.12rem;
}

@keyframes charge {
    from {
        width: 54%;
    }
    to {
        width: 92%;
    }
}

@keyframes monolith-line {
    from {
        opacity: 0.22;
        transform: rotate(-8deg) translateX(-26px);
    }
    to {
        opacity: 0.78;
        transform: rotate(-8deg) translateX(28px);
    }
}

@keyframes monolith-heat {
    0%, 32% {
        opacity: 0.08;
        transform: translateX(-34%);
    }
    52% {
        opacity: 0.32;
    }
    84%, 100% {
        opacity: 0.1;
        transform: translateX(28%);
    }
}

@keyframes wordmark-glide {
    from {
        translate: 0 0;
    }
    to {
        translate: -1.6vw -1.2vh;
    }
}

@keyframes signal-scan {
    from {
        opacity: 0.28;
        transform: translateX(-12px) skewX(-24deg);
    }
    to {
        opacity: 0.92;
        transform: translateX(18px) skewX(-24deg);
    }
}

@keyframes core-breathe {
    from {
        opacity: 0.54;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes rig-float {
    0%, 100% {
        transform: translateX(9vw) translateY(0) rotateZ(0deg);
    }
    50% {
        transform: translateX(9vw) translateY(-16px) rotateZ(0.6deg);
    }
}

@keyframes hint-drop {
    0% {
        transform: translateY(-100%);
    }
    60%, 100% {
        transform: translateY(100%);
    }
}

@media (max-width: 1080px) {
    .hero {
        min-height: 100svh;
    }

    .hero__inner,
    .cinema-wall,
    .section--split,
    .method,
    .contact__inner,
    .section--article {
        grid-template-columns: 1fr;
    }

    .hero h1,
    .local-hero h1 {
        font-size: 4.15rem;
    }

    .hero__session {
        display: none;
    }

    .hero__copy {
        max-width: 720px;
    }

    .hero__monolith {
        right: -18vw;
        width: min(72vw, 700px);
        opacity: 0.72;
    }

    .hero__wordmark {
        right: 0;
        bottom: 14svh;
        font-size: clamp(6rem, 22vw, 13rem);
    }

    .cinema-wall {
        min-height: 0;
        padding-top: 86px;
    }

    .cinema-wall__frames {
        min-height: 620px;
    }

    .scroll-cinema {
        height: 340svh;
        min-height: 1820px;
    }

    .assembly-float {
        animation: none;
        transform: translateX(2vw) scale(0.8);
    }

    .assembly {
        width: min(440px, 62vw);
    }

    .cinema-chapters {
        width: min(520px, 100%);
        min-height: clamp(240px, 34vh, 320px);
    }

    .photo-cinema {
        min-height: 520px;
    }

    .program-grid,
    .local-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-pricing__grid {
        grid-template-columns: 1fr;
    }

    .apple-highlights__header {
        align-items: flex-start;
    }

    .highlight-card,
    .highlight-card--wide {
        min-height: 460px;
    }

    .program-cinema {
        height: 340svh;
        min-height: 2040px;
    }

    .program-cinema__hud h2 {
        max-width: 12ch;
        font-size: clamp(3rem, 9vw, 6rem);
    }

    .program-cinema__rings {
        right: -8vw;
        width: min(460px, 56vw);
    }
}

@media (max-height: 760px) and (min-width: 1081px) {
    .hero {
        min-height: 100svh;
        padding: 82px 24px 32px;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.62fr);
        gap: 26px;
    }

    .eyebrow {
        margin-bottom: 10px;
    }

    .hero__logo {
        width: 68px;
        height: 68px;
        margin-bottom: 12px;
    }

    .hero h1 {
        max-width: 650px;
        font-size: clamp(3.2rem, 5.4vw, 5.7rem);
        line-height: 0.92;
    }

    .hero__lead {
        max-width: 540px;
        margin-top: 14px;
        font-size: 1rem;
    }

    .hero__actions {
        margin-top: 18px;
    }

    .button {
        min-height: 44px;
        padding: 11px 18px;
    }

    .hero__microstats {
        margin-top: 10px;
    }

    .hero__microstats span {
        min-height: 28px;
        padding: 4px 8px;
        font-size: 0.74rem;
    }

    .hero__monolith {
        width: min(54vw, 680px);
    }

    .hero__pricebar {
        bottom: 28px;
        min-height: 50px;
    }

    .hero__pricebar a {
        min-height: 38px;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 15px;
    }

    .site-header {
        width: 100%;
        margin-top: 0;
        padding: 0 12px;
    }

    .apple-highlights {
        width: calc(100% - 28px);
        padding: 76px 0 64px;
    }

    .apple-highlights__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .highlight-controls {
        align-self: flex-end;
    }

    .apple-highlights__header h2 {
        font-size: clamp(2.7rem, 13vw, 4.8rem);
    }

    .highlight-rail {
        gap: 12px;
    }

    .highlight-card,
    .highlight-card--wide {
        min-height: 390px;
    }

    .highlight-card div {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .highlight-card h3 {
        font-size: clamp(1.85rem, 9vw, 3.1rem);
    }

    .program-cinema {
        height: 340svh;
        min-height: 1760px;
    }

    .program-cinema__visual {
        filter: saturate(0.58) contrast(1.2) brightness(0.38);
        transform: scale(calc(1.12 + var(--sp) * 0.1));
    }

    .program-cinema__shade {
        background:
            linear-gradient(180deg, rgba(5, 5, 3, 0.82) 0%, rgba(5, 5, 3, 0.44) 32%, rgba(5, 5, 3, 0.92) 100%),
            radial-gradient(ellipse at 62% 40%, transparent 22%, rgba(5, 5, 3, 0.76) 100%);
    }

    .program-cinema__hud {
        align-content: center;
        justify-items: center;
        padding: 96px 22px 112px;
        text-align: center;
    }

    .program-cinema__hud h2 {
        max-width: 10ch;
        margin-bottom: 18px;
        font-size: clamp(2.7rem, 14vw, 4.9rem);
    }

    .program-cinema__chapters {
        min-height: 430px;
    }

    .program-chapter {
        justify-items: center;
    }

    .program-chapter__label {
        font-size: 0.68rem;
    }

    .program-chapter h3 {
        font-size: clamp(3.2rem, 18vw, 5rem);
    }

    .program-chapter p:not(.program-chapter__label) {
        max-width: 32ch;
    }

    .program-cinema__meter {
        right: 18px;
        bottom: 96px;
        min-width: 0;
        width: min(220px, calc(100% - 36px));
        border-radius: 18px;
        opacity: 0.72;
    }

    .program-cinema__rings {
        top: 38%;
        right: -32vw;
        width: 86vw;
        opacity: 0.28;
    }

    .program-cinema .cinema-timeline {
        left: 50%;
        bottom: 24px;
        width: min(350px, calc(100% - 48px));
        transform: translateX(-50%);
        text-align: left;
    }

    .day-cinema {
        height: 300svh;
        min-height: 1560px;
    }

    .day-atmos__sun {
        width: 112px;
        height: 112px;
    }

    .day-atmos__moon {
        width: 80px;
        height: 80px;
    }

    .day-chapter__label,
    .day-chapter__note,
    .day-chip {
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.72);
    }

    .day-chapters {
        min-height: clamp(300px, 52vh, 420px);
    }

    .day-prices {
        grid-template-columns: 1fr;
        width: min(320px, 100%);
    }

    .day-chip {
        padding: 10px 16px;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: none;
        grid-template-columns: 1fr;
        padding: 8px;
        border: 1px solid rgba(247, 241, 230, 0.14);
        background: rgba(5, 5, 4, 0.99);
        backdrop-filter: blur(18px);
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
    }

    .site-nav.is-open {
        display: grid;
    }

    .site-nav a {
        justify-content: flex-start;
        min-height: 46px;
    }

    .hero {
        min-height: 100svh;
        padding: 88px 18px 30px;
    }

    .hero__shade {
        background:
            linear-gradient(180deg, rgba(8, 8, 6, 0.72) 0%, rgba(8, 8, 6, 0.72) 48%, #080806 100%),
            linear-gradient(135deg, rgba(255, 75, 34, 0.16), transparent 40%, rgba(216, 255, 62, 0.11));
    }

    .hero__light,
    .hero__grid,
    .hero__monolith,
    .hero__wordmark {
        display: none;
    }

    .hero__inner {
        gap: 26px;
    }

    .hero__monolith {
        top: 31%;
        right: -52vw;
        bottom: -9svh;
        width: 116vw;
        opacity: 0.3;
    }

    .hero__monolith img {
        filter: saturate(0.66) contrast(1.26) brightness(0.58);
        mask-image: radial-gradient(ellipse at 56% 54%, black 0 38%, rgba(0, 0, 0, 0.64) 48%, transparent 68%);
    }

    .hero__monolith-glow {
        opacity: 0.44;
    }

    .hero__monolith-line {
        opacity: 0.36;
    }

    .hero__pricebar {
        display: none;
    }

    .hero__wordmark {
        right: 0;
        bottom: 22svh;
        --wordmark-opacity: 0.56;
    }

    .hero__signal {
        display: none;
    }

    .hero__logo {
        width: 92px;
        height: 92px;
        margin-bottom: 16px;
    }

    .hero h1,
    .local-hero h1 {
        font-size: 3.25rem;
    }

    .hero__lead,
    .local-hero p {
        font-size: 1.03rem;
    }

    .hero__actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero__microstats {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero__session {
        padding: 18px;
    }

    .session__dial {
        width: 72px;
        height: 72px;
    }

    .impact-strip span {
        min-height: 52px;
        padding: 0 22px;
        font-size: 1rem;
    }

    .cinema-wall {
        width: calc(100% - 28px);
        gap: 34px;
        padding: 70px 0;
    }

    .cinema-wall__copy h2 {
        font-size: 2.8rem;
    }

    .cinema-wall__frames {
        display: grid;
        gap: 14px;
        min-height: 0;
    }

    .cinema-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        transform: none;
    }

    .cinema-frame--large,
    .cinema-frame--lift,
    .cinema-frame--pulse {
        inset: auto;
        width: 100%;
    }

    .cinema-frame.is-visible {
        transform: none;
    }

    /* Mobile: machine on top, narrative stacked below */
    .scroll-cinema {
        height: 300svh;
        min-height: 1560px;
    }

    .scroll-cinema__stage {
        inset: 0 0 auto;
        height: 48svh;
        place-items: center;
    }

    .assembly-float {
        animation: none;
        transform: scale(0.58);
    }

    .assembly {
        width: min(330px, 74vw);
    }

    .assembly-shadow {
        left: 50%;
        bottom: auto;
        top: 42svh;
        width: min(320px, 70vw);
    }

    .assembly__core {
        width: 132px;
        height: 132px;
        margin: -66px 0 0 -66px;
    }

    .assembly__core-ring {
        border-width: 6px;
    }

    .assembly__circuit {
        width: 128px;
        height: 46px;
        margin: -23px 0 0 -64px;
    }

    .scroll-cinema__hud {
        align-content: end;
        padding: 0 24px 84px;
    }

    .scroll-cinema__hud::before {
        background: linear-gradient(0deg, rgba(4, 4, 3, 0.95) 32%, rgba(4, 4, 3, 0.5) 58%, transparent 82%);
    }

    .cinema-standfirst {
        display: none;
    }

    .cinema-chapters {
        width: 100%;
        min-height: 216px;
    }

    .cinema-chapter__title {
        font-size: clamp(2.6rem, 11vw, 3.6rem);
    }

    .cinema-chapter__body {
        font-size: 0.98rem;
    }

    .cinema-timeline {
        position: static;
        width: 100%;
        margin-top: 22px;
        gap: 6px;
    }

    .cinema-timeline li {
        padding-top: 8px;
        font-size: 0.6rem;
    }

    .cinema-timeline li span {
        font-size: 0.54rem;
    }

    .program-cinema .cinema-timeline {
        position: absolute;
        left: 50%;
        bottom: 22px;
        width: min(330px, calc(100% - 48px));
        margin: 0;
        transform: translateX(-50%);
    }

    .day-cinema .cinema-timeline {
        position: absolute;
        left: 50%;
        bottom: 22px;
        width: min(330px, calc(100% - 48px));
        margin: 0;
        transform: translateX(-50%);
    }

    .cinema-hint {
        display: none;
    }

    .section {
        width: calc(100% - 28px);
        padding: 70px 0;
    }

    .section h2,
    .contact h2,
    .method h2,
    .coach h2 {
        font-size: 2.34rem;
    }

    .photo-cinema {
        display: grid;
        gap: 12px;
        min-height: 0;
    }

    .photo-cinema figure {
        position: static;
        width: 100%;
        transform: none;
    }

    .photo-cinema__main,
    .photo-cinema__side {
        aspect-ratio: 4 / 3;
    }

    .program-grid,
    .local-links,
    .detail-grid__items {
        grid-template-columns: 1fr;
    }

    .program {
        min-height: 280px;
        padding: 22px;
    }

    .program__num {
        margin-bottom: 28px;
    }

    .program p {
        min-height: 0;
    }

    .method__image {
        min-height: 380px;
    }

    .timetable,
    .pricing {
        min-height: auto;
        padding: 20px;
    }

    .timetable__rows div,
    .price-list div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .coach {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .coach__portrait {
        width: min(260px, 100%);
    }

    .contact {
        min-height: 0;
    }

    .contact__inner {
        width: calc(100% - 28px);
        padding: 72px 0 42px;
    }

    .trial-form {
        padding: 18px;
    }

    .contact iframe {
        width: calc(100% - 28px);
        height: 280px;
        margin-bottom: 34px;
    }

    .local-hero {
        min-height: auto;
        padding: 104px 18px 56px;
    }

    .breadcrumb {
        width: calc(100% - 36px);
        padding-top: 92px;
    }

    .local-hero__inner {
        padding-top: 70px;
    }

    .section--article h2 {
        font-size: 2rem;
    }

    .detail-grid__items article {
        min-height: 0;
        padding: 20px;
    }

    .data-table {
        min-width: 0;
    }

    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td {
        display: block;
    }

    .data-table tr {
        padding: 16px;
        border-bottom: 1px solid rgba(247, 241, 230, 0.12);
    }

    .data-table th,
    .data-table td {
        display: grid;
        grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
        gap: 12px;
        padding: 8px 0;
        border-bottom: 0;
    }

    .data-table th::before,
    .data-table td::before {
        content: attr(data-label);
        color: var(--acid);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .data-table strong {
        font-size: 1.18rem;
    }

    .not-found {
        padding: 128px 18px 58px;
    }
}

@media (max-width: 430px) {
    .brand span {
        max-width: 120px;
    }

    .hero h1,
    .local-hero h1 {
        font-size: 2.72rem;
    }

    .section h2,
    .contact h2,
    .method h2,
    .coach h2 {
        font-size: 2.05rem;
    }

    .hero__session {
        display: none;
    }

    .hero__pricebar {
        align-items: stretch;
        flex-direction: column;
        border-radius: 22px;
        padding: 14px;
    }

    .hero__pricebar a {
        justify-content: center;
        width: 100%;
    }

    .hero__microstats span {
        align-items: center;
        flex-direction: row;
        gap: 0;
    }

    .hero__microstats strong {
        margin-right: 6px;
    }

    .cinema-wall__copy h2 {
        font-size: 2.25rem;
    }

    .scroll-cinema {
        min-height: 1360px;
    }

    .program-cinema__hud h2 {
        font-size: clamp(2.4rem, 13vw, 3.9rem);
    }

    .program-chapter h3 {
        font-size: clamp(2.9rem, 17vw, 4.3rem);
    }

    .cinema-chapter__title {
        font-size: clamp(2.3rem, 12vw, 3rem);
    }

    .cinema-chapter__index {
        font-size: 2rem;
    }

    .assembly {
        width: min(300px, 84vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .hero__wordmark,
    .hero__signal,
    .hero__canvas {
        display: none;
    }

    [data-reveal] {
        transform: none;
        opacity: 1;
    }

    /* Cinema section becomes a calm, fully-readable stacked block */
    .scroll-cinema {
        height: auto;
        min-height: 0;
    }

    .scroll-cinema__sticky {
        position: static;
        height: auto;
        overflow: visible;
        padding: 92px 0;
    }

    .scroll-cinema__stage,
    .scroll-cinema__reel {
        display: none;
    }

    .assembly-float {
        animation: none;
        transform: none;
    }

    .assembly__piece[data-fade] {
        opacity: 0.9;
    }

    .scroll-cinema__hud {
        position: relative;
        align-content: start;
        padding: 40px clamp(24px, 6vw, 104px) 0;
    }

    .scroll-cinema__hud::before {
        display: none;
    }

    .cinema-chapters {
        display: grid;
        gap: 40px;
        min-height: 0;
    }

    .cinema-chapter {
        position: static;
        opacity: 1;
        transform: none;
    }

    .cinema-timeline {
        position: static;
        margin-top: 34px;
    }

    .cinema-hint {
        display: none;
    }

    .program-cinema {
        height: auto;
        min-height: 0;
    }

    .program-cinema__sticky {
        position: static;
        height: auto;
        overflow: visible;
        padding: 92px clamp(24px, 7vw, 120px);
    }

    .program-cinema__stage {
        display: none;
    }

    .program-cinema__hud {
        position: relative;
        display: block;
        padding: 0;
        text-align: left;
    }

    .program-cinema__chapters {
        display: grid;
        gap: 42px;
        min-height: 0;
    }

    .program-chapter {
        position: static;
        opacity: 1;
        transform: none;
    }

    .program-cinema .cinema-timeline {
        position: static;
        margin-top: 34px;
        transform: none;
    }

    /* Schedule scene also collapses to a static, readable stack. */
    .day-cinema {
        height: auto;
        min-height: 0;
    }

    .day-cinema__sticky {
        position: static;
        height: auto;
        overflow: visible;
        padding: 92px 0;
    }

    .day-atmos__sun,
    .day-atmos__moon,
    .day-atmos__stars,
    .day-atmos__grid {
        display: none;
    }

    .day-cinema__hud {
        position: relative;
    }

    .day-chapters {
        display: grid;
        gap: 48px;
        min-height: 0;
    }

    .day-chapter {
        position: static;
        opacity: 1;
        transform: none;
    }

    .day-cinema .cinema-timeline {
        position: static;
        margin: 40px auto 0;
        transform: none;
    }
}