/* ==========================================================================
   Elkoubasy iced tea case study (standalone preview)
   Uses Voila's own tokens: --title-font-family (Black Mango), --main-font-family (Inter),
   --dark-color (#151515). Product colours are sampled from the campaign assets.
   ========================================================================== */

.it-page {
    --it-ink: var(--dark-color, #151515);
    --it-ink-soft: #4b4744;
    --it-paper: #f2ede7;          /* high-key backdrop, sampled from the film */
    --it-night: #151515;
    --it-night-2: #1d1b1a;
    --it-on-night: #f4f0eb;
    --it-on-night-soft: #b9b2ab;
    --it-line-night: rgba(244, 240, 235, .14);
    --it-cap: #e2672a;            /* bottle cap orange */
    --it-juice: #ec9940;          /* tea liquid, sampled from the caramel frame */
    --it-flavor: #ef8a45;        /* follows the selected label (JS updates it) */
    --it-title: var(--title-font-family, 'Black Mango', serif);
    --it-body: var(--main-font-family, 'Inter', sans-serif);
    --it-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --it-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --it-gutter: clamp(16px, 4vw, 56px);
    --it-radius: 14px;
    --it-header: 90px;

    display: block;
    background: var(--it-night);
    color: var(--it-ink);
    font-family: var(--it-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* This page opens on a light stage, so the (normally transparent, white-link) header gets its
   solid state from the start. Scoped to this page only; the shared header file is untouched. */
/* The theme sets overflow-x:hidden on html AND body, which turns body into a (non-scrolling) scroll
   container and breaks position:sticky. On this page only, clip instead: same horizontal clipping,
   no scroll container. */
body:has(#ice-tea-case-study) { overflow: visible; overflow-x: clip; }

html body #voila-header { background: var(--vmm-dark, #151515); box-shadow: 0 4px 24px rgba(0, 0, 0, .25); }

.it-page ::selection { background: var(--it-juice); color: var(--it-ink); }
.it-page :focus-visible { outline: 2px solid var(--it-cap); outline-offset: 3px; border-radius: 4px; }
.it-page img { display: block; max-width: 100%; height: auto; }
.it-page figure { margin: 0; }
.it-page p { margin: 0; }
.it-page h1, .it-page h2, .it-page h3, .it-page dt { color: inherit; }
.it-page ul, .it-page dl, .it-page dd { margin: 0; padding: 0; list-style: none; }
.it-page button { font: inherit; color: inherit; }

.it-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.it-wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--it-gutter); }

.it-h2 {
    font-family: var(--it-title);
    font-weight: 600;
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

/* ---------- Buttons & links ---------- */
.it-btn {
    display: inline-flex; align-items: center; gap: .65em;
    min-height: 52px; padding: 0 1.6em;
    border-radius: 999px;
    font-weight: 600; font-size: 1rem; white-space: nowrap;
    text-decoration: none;
    transition: transform .16s var(--it-ease-out), background-color .2s ease, color .2s ease;
}
.it-btn:active { transform: scale(.97); }
.it-btn--dark { background: var(--it-ink); color: #fff; }
.it-btn--dark:hover, .it-btn--dark:focus-visible { background: #000; color: #fff; }
.it-btn .fa-play { font-size: .8em; }

.it-link {
    display: inline-flex; align-items: center; gap: .55em;
    font-weight: 600; color: var(--it-ink); text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    padding-bottom: 3px;
    transition: background-size .3s var(--it-ease-out), color .2s ease;
}
.it-link:hover, .it-link:focus-visible { background-size: 100% 1.5px; color: var(--it-ink); }
.it-link i { font-size: .8em; transition: transform .25s var(--it-ease-out); }
.it-link--light, .it-link--light:hover, .it-link--light:focus-visible { color: var(--it-on-night); }

@media (hover: hover) and (pointer: fine) {
    .it-link:hover i.fa-arrow-right { transform: translateX(4px); }
    .it-link:hover i.fa-arrow-down { transform: translateY(3px); }
}

/* ==========================================================================
   STAGE (hero + 3D showcase share one sticky canvas)
   ========================================================================== */
.it-stage {
    position: relative;
    /* Fallback lighting when WebGL is off: high-key stage that dims into the film section */
    background:
        radial-gradient(60% 40% at 72% 30%, color-mix(in srgb, var(--it-flavor) 38%, transparent), transparent 70%),
        linear-gradient(180deg, var(--it-paper) 0%, var(--it-paper) 62%, var(--it-night) 92%);
    transition: background-color .6s ease;
}

.it-stage__sticky {
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    overflow: hidden;
    z-index: 0;
}

.it-stage__canvas {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .9s var(--it-ease-out);
    touch-action: pan-y;               /* vertical swipes still scroll the page */
    cursor: grab;
    outline: none;
}
.it-stage__canvas:active { cursor: grabbing; }
.it-stage__canvas canvas { display: block; width: 100%; height: 100%; }
.it-stage__canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--it-cap); }
.it-stage[data-3d="ready"] .it-stage__canvas { opacity: 1; }

/* Fallback image: shown only when WebGL is unavailable */
.it-stage__fallback {
    position: absolute;
    right: 9vw; top: calc(var(--it-header) + 6vh);
    width: min(25vw, 360px);
    border-radius: var(--it-radius);
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(75, 40, 15, .45);
    display: none;
}
.it-stage[data-3d="fallback"] .it-stage__fallback { display: block; }
.it-stage[data-3d="fallback"] .it-stage__canvas,
.it-stage[data-3d="fallback"] .it-markers,
.it-stage[data-3d="fallback"] .it-show__hint { display: none; }

/* Loading indicator: a thin line under where the bottle will appear */
.it-stage__loading {
    position: absolute; right: 18vw; top: 58%;
    width: 120px; height: 2px;
    background: rgba(21, 21, 21, .12);
    overflow: hidden; border-radius: 2px;
    transition: opacity .4s ease;
}
.it-stage__loading-bar {
    position: absolute; inset: 0;
    background: var(--it-ink);
    transform-origin: 0 50%;
    transform: scaleX(var(--it-progress, .05));
    transition: transform .3s var(--it-ease-out);
}
.it-stage:not([data-3d="loading"]) .it-stage__loading { opacity: 0; pointer-events: none; }

/* Content scrolls over the sticky canvas */
.it-stage__content {
    position: relative; z-index: 1;
    margin-top: -100vh; margin-top: -100dvh;
    pointer-events: none;
}
.it-stage__content a,
.it-stage__content button { pointer-events: auto; }

/* ---------- A. Opening ---------- */
.it-hero {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center;
    padding: calc(var(--it-header) + 4vh) 0 8vh;
}
.it-hero__inner { position: relative; }
.it-hero__client {
    font-family: var(--it-title);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--it-cap);
    line-height: 1;
    margin-bottom: .6rem;
    width: fit-content;
}
.it-hero__title {
    font-family: var(--it-title);
    font-weight: 600;
    font-size: clamp(3.4rem, 8vw, 6rem);
    line-height: .94;
    letter-spacing: -0.035em;
    color: var(--it-ink);
    margin: 0 0 1.75rem;
}
.it-line { display: block; overflow: hidden; padding-bottom: .06em; }
.it-line > span { display: block; }
.it-hero__lede {
    max-width: 30ch;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.55;
    color: var(--it-ink-soft);
    margin-bottom: 2.25rem;
}
.it-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* ---------- B. Showcase ---------- */
.it-show {
    min-height: 150vh; min-height: 150dvh;
    padding: 20vh 0 10vh;
}
.it-show__inner { position: sticky; top: calc(var(--it-header) + 6vh); }
.it-show__panel {
    width: min(440px, 100%);
    color: var(--it-ink);
}
.it-show__lede { margin: 1rem 0 1.75rem; line-height: 1.6; color: var(--it-ink-soft); max-width: 38ch; }

.it-flavors { display: flex; gap: .5rem; margin-bottom: 1.75rem; }
.it-flavor {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 44px; padding: 0 1.1rem 0 .55rem;
    border: 1px solid rgba(21, 21, 21, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    font-weight: 600; font-size: .95rem;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .16s var(--it-ease-out);
}
.it-flavor:active { transform: scale(.97); }
.it-flavor [lang="ar"] { font-weight: 400; color: var(--it-ink-soft); }
.it-flavor__swatch {
    width: 28px; height: 28px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.it-flavor[data-flavor="peach"] .it-flavor__swatch { background: radial-gradient(circle at 35% 30%, #f8b27c, #e1692c); }
.it-flavor[data-flavor="lemon"] .it-flavor__swatch { background: radial-gradient(circle at 35% 30%, #f6e27a, #c9b31f); }
.it-flavor.is-active { background: var(--it-ink); border-color: var(--it-ink); color: #fff; }
.it-flavor.is-active [lang="ar"] { color: rgba(255, 255, 255, .7); }
@media (hover: hover) and (pointer: fine) {
    .it-flavor:not(.is-active):hover { border-color: var(--it-ink); background: #fff; }
}

.it-notes { border-top: 1px solid rgba(21, 21, 21, .14); }
.it-notes li { border-bottom: 1px solid rgba(21, 21, 21, .14); }
.it-note {
    display: grid; gap: .25rem;
    width: 100%; padding: .95rem 0 .95rem 1.4rem;
    background: none; border: 0; text-align: left;
    cursor: pointer; position: relative;
}
.it-note::before {
    content: ""; position: absolute; left: 0; top: 1.35rem;
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.5px solid var(--it-ink);
    transition: background-color .2s ease, transform .2s var(--it-ease-out);
}
.it-note__title { font-weight: 600; }
.it-note__body { font-size: .92rem; line-height: 1.5; color: var(--it-ink-soft); }
.it-note[aria-pressed="true"]::before,
.it-note.is-hover::before { background: var(--it-cap); border-color: var(--it-cap); transform: scale(1.25); }

.it-note:disabled { cursor: default; padding-left: 0; color: inherit; }
.it-note:disabled::before { display: none; }

.it-show__hint { margin-top: 1.25rem; font-size: .85rem; color: var(--it-ink-soft); display: flex; gap: .5rem; align-items: center; }
.it-hint-touch { display: none; }
.it-credits { margin-top: 1.5rem; font-size: .75rem; line-height: 1.6; color: var(--it-on-night-soft); max-width: 90ch; }
.it-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.it-credits a:hover, .it-credits a:focus-visible { color: var(--it-on-night); }
.it-stage[data-3d="fallback"] .it-credits { display: none; }
@media (hover: none) and (pointer: coarse) {
    .it-hint-fine { display: none; }
    .it-hint-touch { display: inline; }
}

/* 3D hotspot markers (positioned by scene.js) */
.it-markers { position: absolute; inset: 0; pointer-events: none; }
.it-marker {
    position: absolute; left: 0; top: 0;
    width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border: 0; padding: 0; background: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    pointer-events: auto;
}
.it-marker span {
    position: absolute; inset: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--it-ink), 0 4px 10px rgba(0, 0, 0, .2);
    transition: transform .2s var(--it-ease-out), background-color .2s ease;
}
.it-marker::after {
    content: ""; position: absolute; inset: 4px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .9);
    animation: it-ping 2.4s var(--it-ease-out) infinite;
}
.it-marker.is-visible { opacity: 1; visibility: visible; }
.it-marker.is-active span, .it-marker.is-hover span { background: var(--it-cap); transform: scale(1.2); }
@keyframes it-ping {
    0% { transform: scale(.6); opacity: .9; }
    70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- Facts (stage dims to night here) ---------- */
.it-facts {
    min-height: 80vh; min-height: 80dvh;
    display: flex; align-items: flex-end;
    padding: 0 0 12vh;
    color: var(--it-on-night);
}
.it-facts__list {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    border-top: 1px solid var(--it-line-night);
    padding-top: 1.5rem;
}
.it-facts__list dt { font-size: .8rem; color: var(--it-on-night-soft); margin-bottom: .35rem; }
.it-facts__list dd { font-family: var(--it-title); font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.2; }

/* ==========================================================================
   C. Film
   ========================================================================== */
.it-film { background: var(--it-night); color: var(--it-on-night); padding: 6vh 0 14vh; }
.it-film__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 2rem; }
.it-film__head p { color: var(--it-on-night-soft); font-size: 1.05rem; }
.it-film__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--it-radius);
    overflow: hidden;
    background: #0d0d0d;
    box-shadow: 0 40px 90px -40px rgba(236, 153, 64, .35);
    transform-origin: 50% 0;
}
.it-film__poster { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--it-ease-out); }
.it-film__frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 8, 6, .55));
}
.it-film__play {
    position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px);
    z-index: 2;
    display: inline-flex; align-items: center; gap: 1rem;
    color: #fff; text-decoration: none; font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.it-film__play-icon {
    display: grid; place-items: center;
    width: clamp(64px, 7vw, 96px); aspect-ratio: 1;
    border-radius: 50%;
    background: #fff; color: var(--it-ink);
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    transition: transform .25s var(--it-ease-out), background-color .2s ease;
}
.it-film__play-icon i { margin-left: .18em; }
.it-film__time { color: rgba(255, 255, 255, .7); font-weight: 400; margin-left: .35em; font-variant-numeric: tabular-nums; }
.it-film__play:hover, .it-film__play:focus-visible { color: #fff; }
.it-film__play:active .it-film__play-icon { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) {
    .it-film__frame:hover .it-film__poster { transform: scale(1.025); }
    .it-film__play:hover .it-film__play-icon { transform: scale(1.06); background: var(--it-juice); }
}
.it-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.it-film__frame.is-playing::after, .it-film__frame.is-playing .it-film__play { display: none; }
.it-film__note { margin-top: 1rem; font-size: .85rem; color: var(--it-on-night-soft); }
.it-film__note a { color: var(--it-on-night); text-underline-offset: 3px; }

/* ==========================================================================
   D. Story
   ========================================================================== */
.it-story { background: var(--it-night); color: var(--it-on-night); padding: 4vh 0 16vh; }
.it-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "still text" "still labels";
    gap: 3rem clamp(2rem, 5vw, 6rem);
    align-items: start;
}
.it-story__still { grid-area: still; border-radius: var(--it-radius); overflow: hidden; background: #cfd3d3; }
.it-story__still img { width: 100%; }
.it-story__still figcaption,
.it-label figcaption,
.it-frame figcaption {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-size: .85rem; color: var(--it-on-night-soft);
    padding-top: .75rem;
}
.it-story__still figcaption { background: var(--it-night); padding-top: .75rem; }
.it-story__text { grid-area: text; padding-top: 4vh; }
.it-story__text p { margin-top: 1.5rem; font-size: 1.1rem; line-height: 1.65; color: var(--it-on-night-soft); max-width: 58ch; }
.it-story__labels { grid-area: labels; display: grid; gap: 2rem; }
.it-label img { border-radius: 10px; width: 100%; background: #fff; }
.it-label:nth-child(2) { margin-left: clamp(0px, 6vw, 96px); }
.it-label figcaption [lang="ar"] { font-family: var(--it-title); font-size: 1rem; color: var(--it-on-night); }

/* ==========================================================================
   E. Breakdown
   ========================================================================== */
.it-breakdown { background: var(--it-night-2); color: var(--it-on-night); padding: 14vh 0; }
.it-breakdown__lede { margin: 1rem 0 3rem; color: var(--it-on-night-soft); font-size: 1.05rem; max-width: 56ch; }
.it-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1.25rem;
}
.it-frame--wide { grid-row: span 2; }
.it-frame img { width: 100%; border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; }
.it-frame--wide img { aspect-ratio: auto; height: calc(100% - 2.4rem); }
.it-chips { display: inline-flex; gap: 4px; }
.it-chips span { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }

.it-points {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem clamp(2rem, 5vw, 5rem);
    margin-top: 5rem;
}
.it-point { border-top: 1px solid var(--it-line-night); padding-top: 1.25rem; }
.it-point dt { font-family: var(--it-title); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.15; margin-bottom: .6rem; }
.it-point dd { color: var(--it-on-night-soft); line-height: 1.6; max-width: 46ch; }

/* ==========================================================================
   F. Services
   ========================================================================== */
.it-services { background: var(--it-night); color: var(--it-on-night); padding: 14vh 0 12vh; }
.it-services__list { margin: 2.5rem 0 2.5rem; border-top: 1px solid var(--it-line-night); }
.it-services__list a {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center; gap: 1rem 2.5rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--it-line-night);
    color: var(--it-on-night); text-decoration: none;
    transition: color .2s ease;
}
.it-services__name { transition: transform .35s var(--it-ease-out); }
.it-services__name { font-family: var(--it-title); font-size: clamp(1.35rem, 2.6vw, 2.25rem); line-height: 1.1; }
.it-services__desc { color: var(--it-on-night-soft); line-height: 1.5; }
.it-services__list i { color: var(--it-juice); transition: transform .3s var(--it-ease-out); }
.it-services__list a:focus-visible { color: var(--it-juice); }
@media (hover: hover) and (pointer: fine) {
    .it-services__list a:hover { color: var(--it-juice); }
    .it-services__list a:hover .it-services__name { transform: translateX(.75rem); }
    .it-services__list a:hover i { transform: translateX(6px); }
}

/* ==========================================================================
   G. CTA (the liquid colour, as a closing colour block)
   ========================================================================== */
.it-cta { background: var(--it-juice); color: var(--it-ink); padding: 16vh 0; }
.it-cta__title {
    font-family: var(--it-title); font-weight: 600;
    font-size: clamp(2.4rem, 6vw, 5.25rem);
    line-height: 1; letter-spacing: -0.03em;
    max-width: 14ch; margin: 0 0 1.5rem;
    text-wrap: balance;
}
.it-cta p { font-size: 1.15rem; margin-bottom: 2.25rem; color: #3b2410; }
.it-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* ==========================================================================
   Responsive art direction
   ========================================================================== */
@media (max-width: 1023px) {
    .it-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .it-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Phones and portrait tablets: the showcase panel docks to the bottom, the bottle stands above it */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
    /* copy sits on top, the bottle stands below it */
    .it-hero { align-items: flex-start; padding-top: calc(var(--it-header) + 3.5vh); }
    .it-stage__loading { right: auto; left: 50%; margin-left: -60px; top: 72%; }
    .it-stage__fallback { right: auto; left: 50%; top: auto; bottom: 6vh; width: 46vw; transform: translateX(-50%); }

    /* the panel docks to the bottom of the screen for the whole showcase; the bottle sits above it */
    .it-show { min-height: 170vh; min-height: 170dvh; padding: 0 0 12px; display: flex; flex-direction: column; justify-content: flex-end; }
    .it-show__inner { top: auto; bottom: 12px; }
    .it-show__panel {
        background: rgba(242, 237, 231, .9);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-radius: var(--it-radius);
        padding: 1.25rem 1.1rem 1rem;
        box-shadow: 0 20px 40px -24px rgba(60, 30, 10, .35);
    }
    .it-show__lede { margin: .6rem 0 1rem; font-size: .95rem; }
    .it-flavors { margin-bottom: 1rem; }
    .it-note { padding: .6rem 0 .6rem 1.3rem; }
    /* compact on phones: only the selected note opens, so the bottle stays visible above the panel */
    .it-note__body { font-size: .86rem; display: none; }
    .it-note[aria-pressed="true"] .it-note__body,
    .it-note:disabled .it-note__body { display: block; }
    .it-note::before { top: .95rem; }
    .it-show__hint { margin-top: .75rem; }
}

@media (max-width: 767px) {
    .it-page { --it-header: 76px; }
    /* Mobile: copy sits on top, the bottle stands below it */
    .it-hero { align-items: flex-start; padding-top: calc(var(--it-header) + 3.5vh); }
    .it-hero__title { font-size: clamp(3rem, 15vw, 4.5rem); margin-bottom: 1rem; }
    .it-hero__lede { font-size: 1rem; margin-bottom: 1.25rem; max-width: 34ch; }
    .it-hero__actions { gap: .75rem 1.5rem; }
    .it-btn { min-height: 48px; }


    .it-facts__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    .it-story__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "still" "labels"; gap: 2rem; }
    .it-story__text { padding-top: 0; }
    .it-story__still { max-width: 420px; }
    .it-label:nth-child(2) { margin-left: 0; }

    .it-sheet { grid-template-columns: minmax(0, 1fr); }
    .it-frame--wide { grid-row: auto; }
    .it-frame--wide img { height: auto; aspect-ratio: 16 / 9; }
    .it-points { grid-template-columns: minmax(0, 1fr); margin-top: 3rem; gap: 2rem; }

    .it-services__list a { grid-template-columns: minmax(0, 1fr) auto; }
    .it-services__desc { grid-column: 1 / 2; grid-row: 2; font-size: .92rem; }
    .it-services__list i { grid-column: 2; grid-row: 1 / span 2; }
}

/* Reduced motion: no pulsing markers, no hover zooms; the 3D scene stops its idle motion in JS */
@media (prefers-reduced-motion: reduce) {
    .it-marker::after { animation: none; opacity: 0; }
    .it-film__poster, .it-stage__canvas, .it-services__list a { transition: none; }
}