/* 07_pitch: experimental pitch build, NOT Questum house style. Questum's web system: 06_production-context/web/ */
/* Questum pitch page: layout only (2026-09-30). Every colour, type size, radius, easing and component comes from the
   motion kit (../motion-kit/questum-motion.css, apple-layer.css, ad-field.css, questum-curtain.css). Add nothing
   here that changes the design system; if something new is needed, add it to the kit and document it in ../DESIGN.md.

   ONE VERTICAL RHYTHM (Questum tokens; Fable review 2026-09-30):
     standard section ............ 120 / 120        full-screen section (hero, episode, close) ... 100svh, 120 top / 80 bottom
     label → title ............... 16 (kit)          title → body ... 24          body / lead → button ... 40
     head → main content ......... 64                content → caption / small print ... 24
     sibling blocks in a stack ... 32                sign-off: 80 above the rule, 40 below it
     widths: centred H2 ≤ 800px · body under it ≤ 560px · lead ≤ 480–560px · small print ≤ 260px
   No box shadows on content (DESIGN.md); only the phone, a product render, carries one. */

/* ---------- precision layer (Apple-quality pass, Fable + Claude, 2026-09-30) ---------- */
html { background: #000; }                                   /* iOS overscroll at both ends is black, never white */
p, .text-16, .text-20, .text-14 { text-wrap: pretty; }       /* no one-word last lines */
h1, h2 { hanging-punctuation: first allow-end; }             /* Safari: an opening „ hangs outside the text edge */
.animated-title .word { hanging-punctuation: none; }          /* …but not inside a split word's mask (each word is its own box: the „ would hang out of it and be clipped) */
:focus-visible { outline: 2px solid var(--purple4); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .glass-nav a:focus-visible, .segmented button:focus-visible, .player-controls button:focus-visible, .player-big:focus-visible { border-radius: 999px; }
.glass-nav { top: max(16px, env(safe-area-inset-top)); }
html.q-locked { overscroll-behavior: none; }                 /* no rubber-band of the black page behind the curtain during the signature */
.glass-nav a { transition: background .2s, transform var(--spring-press-dur) var(--spring-press); }
.glass-nav a:active { transform: scale(.97); }
.glass-nav.glass--light { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 .5px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06); }   /* hairline + a breath of shadow */
.section-label::before, .section-label.has-after::after { width: 12px; }   /* 20 × tan 30.6° ≈ 11.8: the brand's own angle */

/* ---------- shared: section heads (label, title, one short paragraph), centred ---------- */
.head { text-align: center; max-width: 800px; margin: 0 auto; }
.head h2 { text-wrap: balance; }
.nw { white-space: nowrap; }   /* split titles ignore balance (per-word boxes): keep the last two words together by hand */
.head .section-label { justify-content: center; }
.head .text-16 { max-width: 560px; margin: 24px auto 0; }
/* section intros (Fable's layout pass, 2026-10-01): the body reads as a rectangle under the headline, never a pillar
   (measure ≥ 85% of the headline's widest line; headline : body ≤ 3 : 1); paragraphs wrap "pretty", headlines "balance" */
.head .text-20 { max-width: 680px; margin: 24px auto 0; color: var(--black-80); }
.bg-black .head .text-20 { color: var(--white-80); }

/* ---------- 1. Hero: pure typography, revealed like an editorial film title ---------- */
/* Once the curtain lifts (.is-in, pitch.js), a short measured cascade (the button is usable ~3 s after first paint):
     label  (0 s)     fades in; its brand slashes grow in from nothing
     line 1 (0.1 s)   rises out of its mask, 0.9 s expo-out
     line 2 (0.35 s)  the same, a beat later: a second title card
     lead   (0.6 s)   fades up, then the button (0.75 s)
   Stability rules (no shimmer, no landing snap): only opacity and transform move, never letter-spacing, blur or scale on
   text; each moving block keeps its own GPU layer (will-change) and ends on translate3d(0,0,0), so it never re-rasterises
   when it lands. The block also rises with the curtain's uncover (questum-curtain.css). Reduced motion: all shown. */
.hero { position: relative; overflow: hidden; min-height: 100svh; display: grid; align-items: center; padding-block: 100px; text-align: center; }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; will-change: opacity; }
.hero { --film: cubic-bezier(.19, 1, .22, 1); }
.hero-label { justify-content: center; margin: 0 0 24px; opacity: 0; will-change: opacity; transition: opacity .8s ease; }   /* small text: opacity only */
.hero-label::before, .hero-label::after { transform: scaleY(0); transition: transform .8s var(--film) .25s; }
.hero-title { font-size: clamp(48px, 7.2vw, 104px); font-weight: 500; line-height: 1.02; letter-spacing: -.025em; margin: 0; }
.hero-title .line { display: block; overflow: hidden; padding: 0 .04em .1em; }   /* room for ogoneks and descenders */
.hero-title .line > span { display: inline-block; opacity: 0; transform: translate3d(0, var(--rise, 105%), 0); will-change: transform, opacity;
  transition: transform .9s var(--film), opacity .8s ease; }   /* continuous easing, with a stable transform layer */
.hero-title .line:nth-child(1) > span { transition-delay: .1s; }
.hero-title .line:nth-child(2) > span { transition-delay: .35s; }
.hero-lead { max-width: 780px; margin: 32px auto 0; font-size: 22px; line-height: 1.5; letter-spacing: -.01em; color: var(--white-60);   /* wider than the title's 2nd line: a column, not a funnel */
  text-wrap: pretty; opacity: 0; transform: translate3d(0, 12px, 0); will-change: transform, opacity;
  transition: opacity .9s ease .6s, transform 1s var(--film) .6s; }
.hero-cta { margin-top: 40px; opacity: 0; transform: translate3d(0, 12px, 0); will-change: transform, opacity;
  transition: opacity .9s ease .75s, transform 1s var(--film) .75s, color var(--dur-micro); }
.hero.is-in .hero-label { opacity: 1; }
.hero.is-in .hero-title .line > span, .hero.is-in .hero-lead, .hero.is-in .hero-cta { opacity: 1; transform: translate3d(0, 0, 0); }
.hero.is-in .hero-label::before, .hero.is-in .hero-label::after { transform: none; }
.hero.is-settled .hero-cta { transition: transform var(--spring-press-dur) var(--spring-press), color var(--dur-micro); }   /* normal press feedback after the entrance */
.hero.is-settled .hero-cta:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .hero-label, .hero-label::before, .hero-label::after, .hero-title .line > span, .hero-lead, .hero-cta { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 1199px) { .hero-lead { max-width: 640px; font-size: 20px; } }
@media (max-width: 639px)  { .hero-lead { font-size: 17px; line-height: 25px; margin-top: 32px; color: var(--white-60); } .hero-label { margin-bottom: 20px; } }   /* the body token, in the copy's tone */
.nw.nw-free { white-space: normal; }   /* a held phrase that cannot physically fit its heading's width may wrap (pitch.js decides, on any screen) */

/* ---------- 2. Episode: full screen of black; words left, the phone centre, small print right ---------- */
.episode { position: relative; overflow: hidden; min-height: 100svh; display: grid; align-items: center; padding-block: 100px; background: #000; }
.episode::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s cubic-bezier(.33, 0, .15, 1);
  background: radial-gradient(42% 50% at 50% 55%, rgba(143,132,218,.18), rgba(143,132,218,0) 70%), radial-gradient(28% 36% at 50% 52%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%); }
/* The light and the phone are tied to the scroll: as the section rises into view, the glow comes up and the phone
   rises and grows towards the reader, both reaching full exactly when the section fills the screen (the magnetic
   settle then holds it there). Scroll-driven CSS animations on the section's own view timeline: run by the browser,
   no script per frame. Without scroll-timeline support: the same look, triggered once (.is-lit, pitch.js). */
.episode { view-timeline-name: --ep; }
@supports (animation-timeline: view()) {
  .episode::before { transition: none; animation: ep-glow linear both; animation-timeline: --ep; animation-range: entry 12% entry 100%; }   /* from the moment the phone's top is on screen (Fable rhythm pass) */
  .episode .device { animation: ep-rise linear both; animation-timeline: --ep; animation-range: entry 12% entry 100%; }
  @keyframes ep-glow { from { opacity: 0; } 35% { opacity: 0; animation-timing-function: cubic-bezier(.33, 0, .15, 1); } to { opacity: 1; } }
  @keyframes ep-rise { from { transform: translateY(80px); scale: .86; animation-timing-function: cubic-bezier(.33, 0, .15, 1); } to { transform: none; scale: 1; } }   /* rests at exactly 1: crisp hairlines */
}
@supports not (animation-timeline: view()) {
  .episode.is-lit::before { opacity: 1; }
  .episode .device { scale: .92; transition: scale 1.8s cubic-bezier(.33, 0, .15, 1); }
  .episode.is-lit .device { scale: 1; }
}
.episode .container { position: relative; }
.episode-grid { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 64px; }
.episode .head { text-align: center; }
.episode .under-player { text-align: center; }
.episode .under-player .text-14 { color: var(--white-60); }
.under-player .text-14 + .text-14 { margin-top: 4px; }
.episode .under-player .strong { color: #fff; font-weight: 500; }
.episode .head .after-watch { margin-top: 16px; }   /* what the episode shows: a series without separate shoots; the same voice as the words above, its own paragraph */
@media (min-width: 1200px) {
  .episode-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 64px; }   /* equal sides: the phone sits on the page's centre line */
  .episode .head { text-align: left; justify-self: start; align-self: center; max-width: 380px; margin: 0; }
  .episode .head .section-label { justify-content: flex-start; white-space: nowrap; }   /* "RATAS · Trumpų epizodų serialas" on one line */
  .episode .head h2 { font-size: clamp(32px, 2.6vw, 40px); }   /* "žmonės atpažįsta save." fits the side column on one line (344px at 1280) */
  .episode .head .text-16 { margin-left: 0; }
  .episode .under-player { text-align: right; justify-self: end; align-self: end; max-width: 260px; }
}
/* the phone: an iPhone 17 Pro in Deep Blue, drawn to its real front proportions (71.9 × 150.0 mm body, thin uniform
   black border, aluminium edge, Dynamic Island, Action + volume left, side button + Camera Control right) */
.device { scroll-margin-top: 120px; position: relative; }
.device .player { width: 100%; height: 100%; }
.device .player video { object-fit: cover; }
.device .player-controls { left: 8%; right: 8%; bottom: 4.5%; }
@media (min-width: 1024px) {
  .device {
    --dh: min(calc(100svh - 200px), 1400px);                  /* body height; every part below is a share of it */
    height: var(--dh); width: calc(var(--dh) * .4793);
    padding: calc(var(--dh) * .0058);                         /* the aluminium edge seen from the front */
    border-radius: calc(var(--dh) * .0835);
    background:
      linear-gradient(180deg, rgba(255,255,255,.28) 0, rgba(255,255,255,0) 1.2%, rgba(255,255,255,0) 98.6%, rgba(0,0,0,.4) 100%),
      linear-gradient(90deg, #0f1522 0%, #4a5670 2.2%, #1c2333 5%, #262e42 12%, #2b3448 50%, #262e42 88%, #1c2333 95%, #4a5670 97.8%, #0f1522 100%);
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 0 0 1.5px rgba(0,0,0,.35),
      0 0 0 .5px rgba(120,135,170,.25), 0 40px 90px -20px rgba(0,0,0,.9);
  }
  .bezel { position: relative; height: 100%; padding: calc(var(--dh) * .0105); border-radius: calc(var(--dh) * .0778); background: #030303;
    box-shadow: inset 0 0 0 1px #000; }
  .bezel .player { border-radius: calc(var(--dh) * .0672); }
  .bezel::after { content: ""; position: absolute; inset: calc(var(--dh) * .0105); border-radius: calc(var(--dh) * .0672); pointer-events: none; z-index: 4;
    background: linear-gradient(118deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 38%); }   /* the glass */
  .island { position: absolute; z-index: 5; left: 0; right: 0; margin-inline: auto;
    top: calc(var(--dh) * (.0105 + .0118)); width: calc(var(--dh) * .1305); height: calc(var(--dh) * .0395); border-radius: 999px; background: #000; }
  .island::after { content: ""; position: absolute; right: 16%; top: 0; bottom: 0; margin-block: auto; width: calc(var(--dh) * .0118); height: calc(var(--dh) * .0118); border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2a3350 0, #0b0e18 45%, #000 70%); }   /* the front camera */
  .hw { position: absolute; width: calc(var(--dh) * .0036); border-radius: 2px; background: linear-gradient(90deg, #111827, #56617b 45%, #1f2637); }
  .hw-l { left: calc(var(--dh) * -.0032); border-radius: 2px 0 0 2px; }
  .hw-r { right: calc(var(--dh) * -.0032); border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #111827, #56617b 45%, #1f2637); }
  .hw-action { top: 17.2%; height: 3.6%; }
  .hw-volup  { top: 24.6%; height: 6.2%; }
  .hw-voldn  { top: 32.4%; height: 6.2%; }
  .hw-side   { top: 26.4%; height: 9.8%; }
  .hw-cam    { top: 55%;   height: 5.6%; background: linear-gradient(270deg, #0b0f18, #3a4254 50%, #141a26); }   /* Camera Control: sapphire */
}
@media (max-width: 1199px) { .device-wrap { width: 100%; display: grid; justify-items: center; } }   /* one column: the wrapper spans it, the phone centres */
/* continuous (squircle) corners where the browser supports them; circular radii elsewhere */
@supports (corner-shape: superellipse(1)) { .device, .bezel, .bezel .player, .bezel::after { corner-shape: superellipse(1.7); } }

/* the scrubber: only while the pointer is over the phone (hover screens) or for a moment after a tap (touch) */
.device .player-controls, .device .player::before { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform var(--spring-smooth-dur) var(--spring-smooth); }
@media (hover: hover) and (pointer: fine) {
  .device:hover .player.is-started .player-controls, .device:hover .player.is-started::before { opacity: 1; transform: none; }
  .device video { cursor: pointer; }
}
.device.show-controls .player.is-started .player-controls, .device.show-controls .player.is-started::before { opacity: 1; transform: none; }
.device .player::before { transform: none; }

/* ---------- 3. One ad, dozens of versions: head, then the pinned ad field (ad-field.css) ---------- */
/* The curtain (Dip, 2026-10-02/03; Fable reviews). The episode lifts away upwards and uncovers the ad section's words,
   which already lie under it, still (layout only: the section is pulled up under the episode by one screen and its
   first screen is held by position: sticky). Scroll budget inside .reveal: 100svh uncover (the episode's own last
   screen) + 50vh to read the words (the page's hold beat); then the screen scrolls away and the ad rises 64px under the words (--reveal-gap
   from pitch.js measures the words' distance from the screen's foot). The uncover is the words' entrance: nothing
   fires under the curtain. Phones too (2026-10-04), with a shorter hold (30svh). (A cover version, the ad sliding over
   still words, was tried and dropped on 2026-10-04: Dip prefers this push-up.) */
.episode { z-index: 2; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 24px 48px -16px rgba(0,0,0,.25); }   /* the lifting sheet's own shadow */
@media (max-width: 639px) { .episode { box-shadow: 0 12px 32px -16px rgba(0,0,0,.25); } }   /* phones: lighter, a smaller blurred layer */
.reklama { position: relative; z-index: 1; background: #fff; margin-top: -100vh; margin-top: -100svh; }
.reklama .anchor { position: absolute; top: 100vh; top: 100svh; }
.reveal { position: relative; z-index: 1; height: calc(200vh + 50vh); height: calc(200svh + 50vh); }
.reveal-screen { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; }
.reklama .head { padding: 0 var(--gutter); }
.reklama .af-track { z-index: 2; margin-top: calc(64px - var(--af-lead, 13vh) - var(--reveal-gap, 0px)); }   /* the original's starting top sits 64px under the words; --af-lead from ad-field.js */
.reveal-screen .animated-title, .reveal-screen .fade-up, .reveal-screen .fade-up-later { opacity: 1; transform: none; transition: none; }
.reveal-screen .animated-title .wi { transform: none; transition: none; }
@media (max-width: 639px) {   /* phones: a shorter hold, and the pinned screen in lvh (it is scrolled with Safari's toolbar collapsed) */
  .reklama { margin-top: -100lvh; } .reklama .anchor { top: 100lvh; }
  .reveal { height: calc(200lvh + 30lvh); } .reveal-screen { height: 100lvh; }
}
/* the proof line under the ad section's text: small, grey, one monochrome link (no borrowed logo, no foreign colour) */
.proof { margin: 20px auto 0; max-width: 560px; font-size: 14px; line-height: 1.6; color: var(--black-60); }
.proof a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: #000; text-decoration: none; border-bottom: 1px solid var(--black-20); transition: border-color .2s; }
.proof a:hover { border-color: #000; }
.proof .ext { width: 9px; height: 9px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4. Character: a full screen of its own (so the next heading never shares the view), centred ---------- */
#personazas { min-height: 100svh; display: grid; align-content: center; }
/* The three formats rise with the scroll (Dip, 2026-10-04): tied to the row's position, not a timer. They start rising
   as the row enters at the foot of the screen, travel a long path (240px), and land one after another, left to right,
   all settled by the time the frames' centre reaches just below the middle of the screen (58%). No fade (the frames
   are always opaque), translate only (a scale would re-rasterise the media), retaining translate3d through the landing.
   On the cover range of the row, 50% = the row centred, so "cover calc(50% - 8vh)" = the row's centre at 58% of the
   screen. The frame moves, never the .variant (the phone crossfade owns that).
   Phones and browsers without scroll-driven animations: a timed staggered rise when the row is 25% up the screen
   ([data-reveal-group="25"], questum-motion.js). */
.variant-stage .frame.fade-up { opacity: 1; transform: translate3d(0, 96px, 0); transition: transform 1.4s cubic-bezier(.33, 0, .15, 1); }
.variant-stage .frame.fade-up.in-view { transform: translate3d(0, 0, 0); }
.variant-stage .variant:nth-child(2) .frame { transition-delay: .14s; }
.variant-stage .variant:nth-child(3) .frame { transition-delay: .28s; }
.variant-stage { view-timeline-name: --chs; }
@supports (animation-timeline: view()) {
  @media (min-width: 640px) {
    .variant-stage .frame.fade-up, .variant-stage .frame.fade-up.in-view { transition: none;
      animation: ch-rise linear both; animation-timeline: --chs; animation-range: cover 0% cover calc(50% - 14vh); }
    .variant-stage .variant:nth-child(2) .frame.fade-up { animation-range: cover 4vh cover calc(50% - 11vh); }
    .variant-stage .variant:nth-child(3) .frame.fade-up { animation-range: cover 8vh cover calc(50% - 8vh); }
    @keyframes ch-rise { from { transform: translate3d(0, 240px, 0);   /* an even ease-out, 1-(1-t)^1.6: the travel is spread over the part of the scroll where the frames are on screen (a steeper ease-out spent it below the fold) */
                                animation-timing-function: linear(0, .13, .253, .369, .477, .578, .67, .754, .828, .891, .943, .981, 1); }
                         to { transform: translate3d(0,0,0); } }
  }
}
.switcher { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 64px; }
.segmented { background: #E9E9EB; }                                                /* Apple's light system fill */
.segmented .thumb { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.04); }
.variant { margin: 0; text-align: center; }
.variant-cap { margin-top: 12px; font-size: 13px; letter-spacing: .02em; color: var(--black-60); }
.variant-stage .frame { height: clamp(360px, calc(100svh - 500px), 640px); width: auto; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #e9e9e9;
  border: 1px solid var(--black-10); display: grid; place-items: center; }
.variant-stage .frame img, .variant-stage .frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.variant-stage .frame:has(img, video) { border: 0; background: transparent; }   /* real media: no placeholder border, and nothing dark behind the rounded edge (a black fill showed through the transparent border as a thin outline) */
.variant-stage .frame:has(video[data-restart]) { background: #000; }   /* the motion ad opens on black: keep its card present before the first decoded frame */
.variant-stage .frame { clip-path: inset(0 round 16px); }   /* one explicit rounded clip through fractional scroll positions and the final landing */
.variant-stage .frame > video, .variant-stage .frame > .still { grid-area: 1 / 1; }   /* the loop's first frame as a real image over the video, until the video has painted a frame (iOS shows nothing between the poster and that frame: a blink) */
.variant-stage .frame > .still { pointer-events: none; }
.variant-stage .frame > .still.gone { visibility: hidden; }
.placeholder-note { font-size: 14px; line-height: 1.7; color: var(--black-60); text-align: center; padding: 0 24px; }
.segmented button { font-size: 15px; }
@media (min-width: 640px) {                                                         /* side by side: the same person, three formats */
  .switcher .segmented { display: none; }
  .variant-stage { grid-auto-flow: column; gap: 24px; align-items: start; }
  .variant-stage > .variant { grid-area: auto; opacity: 1; transform: none; filter: none; pointer-events: auto; transition: none; }
}
@media (min-width: 1024px) { .variant-stage { gap: 32px; } }                     /* desktop: a little more air between the three formats */
@media (min-width: 640px) and (max-width: 1023px) { .variant-stage .frame { height: auto; width: calc((100vw - 2 * var(--gutter) - 48px) / 3); } }

/* ---------- 5. Team: a full-screen section, pinned while the closing section slides up over it (Fable review 2026-10-02) ---------- */
.team { position: sticky; top: 0; z-index: 0; background: #fff; min-height: 100svh; display: grid; align-content: center; padding-block: 100px; }   /* full screen, like every section; the close still slides over it */
.team-inner { will-change: opacity; }
/* the intro as a feature head: headline left, copy right, on the page's 80 px axis like the episode and the close */
.team-head { max-width: none; margin: 0; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 96px; align-items: start; }
.team-head h2 { margin: 0; }
.team-copy { margin-top: 6px; }                                 /* optical: the body's cap height on the headline's first line */
.team-head .text-20 { max-width: 560px; margin: 0; color: var(--black-80); }
.team-head .text-20 + .text-20 { margin-top: 16px; }
.team-head .team-note.text-16 { max-width: 560px; margin: 24px 0 0; color: var(--purple2); }   /* the payoff, set apart: the small body size in the eyebrow's purple (Dip) */
@media (max-width: 1023px) {
  .team-head { grid-template-columns: minmax(0, 1fr); column-gap: 0; max-width: 640px; margin: 0; }
  .team-copy { margin-top: 24px; }
}
/* the slide-over on the compositor (the strip dims as it is covered; it does not move): the closing section's own view timeline, shared up to <main> so the strip above can
   follow it (0 → 1 while the close enters). Browsers without timeline-scope use the fallback loop in pitch.js. */
main { timeline-scope: --cover; }
.final { view-timeline-name: --cover; }
@supports (timeline-scope: --a) and (animation-timeline: --a) {
  .team-inner { animation: team-sink linear both; animation-timeline: --cover; animation-range: entry 0% entry 100%; }
  @keyframes team-sink { from { opacity: 1; } to { opacity: .55; } }   /* opacity only: text tied to the scroll never moves by fractions of a pixel */
}
/* "Kaip vyktų bendradarbiavimas?" (Fable, 2026-10-01, final; Dip: "a line that is filled in", not gimmicky). One road,
   no vehicle: a 2 px hairline across the block fills with Questum deep purple from left to right in one calm ease-in-out
   stroke when the block comes into view (.is-on from pitch.js), and each step fades in (opacity only) as the fill
   reaches its column. A centred title echoing the section, small tracked purple numerals above the line as mile markers,
   black 16/24 text left-aligned in four equal columns. One transform and a few opacities; the rest state is exact
   pixels; reduced motion renders the finished road. Timing: fill 1600 ms cubic-bezier(.4, 0, .6, 1) from +200 ms; the
   fill crosses columns 2–4 at ≈ 540 / 800 / 1060 ms. */
.process { --p-ease-fill: cubic-bezier(.4, 0, .6, 1); --p-ease-fade: cubic-bezier(.25, .1, .25, 1); --p-fill-dur: 1600ms; --p-start: 200ms;
  box-sizing: border-box; width: 100%; max-width: none; margin: 80px 0 0; padding: 0; text-align: left; }
.process__title { margin: 0 0 48px; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; color: #000; text-align: left; }   /* on the intro's left edge */
.process__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.process__steps::before, .process__steps::after { content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 2px; pointer-events: none; }   /* numeral 28 px + 16 px gap */
.process__steps::before { background: var(--black-10); }                                   /* the track */
.process__steps::after { background: var(--purple2); transform-origin: 0 50%; transform: scaleX(1); }   /* the fill */
.process__step { position: relative; margin: 0; padding: 0; min-width: 0; }
/* the point: a 10 px rounded square on the line at the start of each column, filled as the purple reaches it */
.process__step::before { content: ""; position: absolute; z-index: 1; left: 0; top: 40px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 3px;
  background: #fff; border: 1.5px solid rgba(0, 0, 0, .18); }
.process.is-on .process__step::before, .process:not(.loop) .process__step::before { background: var(--purple2); border-color: var(--purple2); }
.process__num { display: block; height: 28px; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--purple2); }
.process__text { margin: 30px 0 0; font-size: 16px; line-height: 24px; font-weight: 450; letter-spacing: -.005em; color: #000; text-wrap: pretty; }   /* text at 76 px: 28 + 16 + 2 + 30 */
@media (prefers-reduced-motion: no-preference) {
  .process.loop .process__steps::after { transition: transform var(--p-fill-dur) var(--p-ease-fill) var(--p-start); }
  .process.loop .process__title, .process.loop .process__step { transition: opacity 500ms var(--p-ease-fade); }
  .process.loop .process__step::before { transition: background-color 300ms ease, border-color 300ms ease; transition-delay: inherit; }   /* fills with its step */
  .process.loop .process__step:nth-child(1) { transition-delay: var(--p-start); }
  .process.loop .process__step:nth-child(2) { transition-delay: calc(var(--p-start) + 540ms); }
  .process.loop .process__step:nth-child(3) { transition-delay: calc(var(--p-start) + 800ms); }
  .process.loop .process__step:nth-child(4) { transition-delay: calc(var(--p-start) + 1060ms); }
  .process.loop:not(.is-on) .process__steps::after { transform: scaleX(0); }
  .process.loop:not(.is-on) .process__title, .process.loop:not(.is-on) .process__step { opacity: 0; }
}
/* small laptops: the section still fits one screen and centres */
@media (min-width: 1024px) and (max-height: 760px) {
  .team { padding-block: 72px; }
  .process { margin-top: 56px; }
  .process__title { margin-bottom: 40px; }
}
/* tablets: the same, compact */
@media (max-width: 1023px) {
  .process { margin-top: 80px; }
  .process__title { margin-bottom: 48px; }
  .process__steps { column-gap: 24px; }
  .process__text { font-size: 15px; line-height: 22px; }
}
/* phones: the road runs down the left */
@media (max-width: 699px) {
  .process { margin-top: 64px; }
  .process__title { font-size: 22px; line-height: 28px; margin-bottom: 40px; }
  .process__steps { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-left: 32px; }   /* 2 px road + 30 px gutter */
  .process__steps::before, .process__steps::after { top: 0; bottom: 0; right: auto; width: 2px; height: auto; }
  .process__step::before { left: -36px; top: 9px; }                                         /* on the line, level with the numeral */
  .process__steps::after { transform-origin: 50% 0; transform: scaleY(1); }
  .process__text { margin-top: 8px; font-size: 16px; line-height: 24px; }
  @media (prefers-reduced-motion: no-preference) {
    .process.loop:not(.is-on) .process__steps::after { transform: scaleY(0); }
    .process.loop .process__step:nth-child(2) { transition-delay: calc(var(--p-start) + 400ms); }   /* uneven heights: an even cadence */
    .process.loop .process__step:nth-child(3) { transition-delay: calc(var(--p-start) + 800ms); }
    .process.loop .process__step:nth-child(4) { transition-delay: calc(var(--p-start) + 1200ms); }
  }
}

/* ---------- 6. Close: a full screen, two columns centred on each other ---------- */
/* Left, strongest first: the question (title-64) → who is asking and what he offers (subhead) → the one action.
   Right: the portrait with the credentials directly beneath it. Both columns are centred on the same middle line. */
.final { position: relative; z-index: 1; min-height: 100svh; display: grid; align-items: center; padding-block: 100px; }
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 96px; align-items: center; }   /* the question gets every pixel the portrait does not need */
.final .ask { text-align: left; }
.final h2 { text-wrap: balance; }   /* "Kurią „Questum“ idėją / verta išplėtoti / pirmiausia?": no orphans */
.final .subhead { margin-top: 32px; max-width: 560px; color: var(--white-80); }
.final .subhead--ask { margin-top: 16px; color: var(--white); }   /* the invitation itself, one step brighter than who is asking */
.final .btn-cta { margin-top: 40px; padding: 18px 44px; font-size: 17px; }
.maker { margin: 0; justify-self: end; width: min(100%, 400px); }
.maker .photo { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--grey-light);
  display: flex; align-items: flex-end; justify-content: center; }
.maker .photo img { height: 90%; width: auto; max-width: none; flex: none; display: block; }
/* credentials: three equal columns under the photo, no rules; each label always on two lines; the three rise in one
   after another with Questum's own fade-up timing (no counting) */
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.creds b { display: block; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; white-space: nowrap; }
.creds span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--white-60); }

@media (prefers-reduced-motion: reduce) {
  .device, .episode .device, .episode::before { animation: none; }
  .episode .device, .episode.is-lit .device { scale: 1; transition: none; transform: none; }
  .episode::before { opacity: 1; }
  .team-inner { animation: none; }
  .episode::before { transition: none; }
}
@media (max-width: 1023px) {
  .device { width: min(100%, 440px); aspect-ratio: 9 / 16; }   /* no frame below desktop: the video alone, 9:16 */
  .device .player { border-radius: 24px; }
  .hw, .island { display: none; }
  .final-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .maker { justify-self: start; }
  .segmented button { padding: 10px 14px; font-size: 13px; }
  .episode::before { background: radial-gradient(60% 30% at 50% 70%, rgba(143,132,218,.16), rgba(143,132,218,0) 70%); }   /* the light sits on the video, not the words */
  .player video::cue { font-size: 14px; }
}
@media (max-width: 639px) {
  .final h2 br { display: none; }                               /* too narrow for the two-part break: balance does it */
  .hero, .episode { padding-block: 80px; }
  .hero-title { font-size: var(--t-h1); line-height: var(--t-h1-lh); }   /* the display token (questum-motion.css) */
  .reklama .af-track { margin-top: calc(48px - var(--af-lead, 14vh) - var(--reveal-gap, 0px)); }
  .team { top: calc(100lvh - var(--team-h, 100lvh)); min-height: 0; }   /* phones: taller than a screen, so it scrolls until its foot meets the screen's foot, then holds while the close slides over it (--team-h from pitch.js) */
  .variant-cap { display: none; }
  #personazas { min-height: 0; }
}

/* The close arrives as one cascade, like the hero (Fable rhythm pass, 2026-10-03): the whole group is revealed at once
   (questum-motion.js [data-reveal-group]) and the delays set the order: title, subhead, portrait, button, credentials. */
.final .subhead { transition-delay: .2s; }
.final .maker { transition-delay: .2s; }
.final .btn-cta { transition-delay: .4s; }
.final .creds > :nth-child(1) { transition-delay: .4s; }
.final .creds > :nth-child(2) { transition-delay: .55s; }
.final .creds > :nth-child(3) { transition-delay: .7s; }

/* ---------- Phones (Fable + Sol consult, 2026-10-04): their own choreography in the same visual language ----------
   Native scroll (the weighted wheel is desktop only). One composed screen per beat. Type on whole-pixel line boxes.
   Two physical transitions (the episode lifting off section 3's words; the ad decode), the rest one-shot reveals. */
@media (max-width: 639px) {
  body { background: #000; }                                   /* the page's base agrees with html; every section carries its own colour */
  .section { padding-block: 80px; }
  .team { padding-bottom: calc(80px + 100lvh - 100svh); }      /* the team holds with its foot on the LARGE viewport's foot, which sits behind the browser's bottom toolbar: add exactly the toolbar's height, so the visible padding above the toolbar is still the 80px token and step 04's text is never under it */
  .final { margin-top: 25svh; }                                 /* a hold, not a gap: the team keeps the standard 80px and stays put (sticky) for a quarter screen of scroll before the close arrives, so step 04 is read first (Dip; Apple adds dwell, never one-off padding) */
  .player-controls .player-cc { display: none; }                /* no subtitles button on phones (Dip) */
  /* the team's intro centred, like every other section head on a phone (the road below stays on its left line) */
  .team-head { text-align: center; }
  .team-head .text-20, .team-head .team-note.text-16 { margin-inline: auto; }
  .team-head .team-note.text-16 { font-size: 15px; line-height: 20px; }   /* the small token (.text-14 on phones): on a phone .text-16 is the body size */
  /* the hierarchy (Apple's levers, as far as a 500-weight face allows): copy in the 60% tone, 32px under its headline */
  .head .text-20, .head .text-16, .team-copy { margin-top: 32px; }
  .head .text-20, .head .text-16, .team-head .text-20 { color: var(--black-60); }
  .bg-black .head .text-20, .bg-black .head .text-16, .final .subhead { color: var(--white-60); }
  .proof a { padding-block: 12px; margin-block: -12px; }       /* a 44 px tap target on the small link */

  /* hero: three title cards (pitch.js splits "Didesnės ambicijos." on phones), each out of its own mask */
  .hero-title .line:nth-child(2) > span { transition-delay: .25s; }
  .hero-title .line:nth-child(3) > span { transition-delay: .4s; }
  .hero-lead { transition-delay: .55s, .55s; }
  .hero-cta { transition-delay: .7s, .7s, 0s; }

  /* episode: two beats. The words in the first ~60% of a screen; the film alone on its own screen, as large as the
     screen allows (9:16), with the small print under it. The hero's button lands on the film, centred. */
  .episode { --dev-h: min(calc(100svh - 160px), 608px, calc((100vw - 48px) * 16 / 9)); display: block; min-height: 0; padding-block: 0 80px;
    overflow: clip; }   /* clip, not hidden: a hidden overflow is a scroll container and would capture the film's view timeline */
  .episode::before { display: none; }
  .episode-grid { gap: 0; }
  .episode .head { min-height: 60svh; display: grid; align-content: center; padding-top: 48px; }
  .device-wrap { position: relative; min-height: 100svh; place-items: center; view-timeline-name: --epd; }
  .device { height: var(--dev-h); width: auto; aspect-ratio: 9 / 16; scroll-margin-top: calc((100svh - var(--dev-h)) / 2); }
  .device .player { box-shadow: 0 0 0 1px rgba(255,255,255,.1); }   /* a hairline edge on black */
  .device-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s cubic-bezier(.33, 0, .15, 1);
    background: radial-gradient(70% 42% at 50% 50%, rgba(143,132,218,.16), rgba(143,132,218,0) 70%); }   /* the light sits on the film */
  .episode.is-lit .device-wrap::before { opacity: 1; }
  .episode .under-player { padding-top: 8px; }
  @media (hover: none) { .device .player.is-started:not(.is-playing) .player-controls, .device .player.is-started:not(.is-playing)::before { opacity: 1; transform: none; } }   /* paused: the controls stay */

  /* section 4: the words, then the formats on a screen of their own: a swipe row (the neighbours peek in at the sides,
     so the same face in three formats reads at a glance), the segmented control under it, in the thumb's reach, as its
     indicator and selector (pitch.js) */
  #personazas .switcher { min-height: 100svh; justify-content: center; gap: 16px; margin-top: 16px; }
  .switcher .segmented { order: 2; }
  .segmented button { padding: 12px 18px; font-size: 15px; line-height: 20px; }   /* 44 px tall */
  #personazas { grid-template-columns: minmax(0, 1fr); }
  .variant-stage { --fw: min(78vw, 320px, calc((100svh - 140px) * 9 / 16)); position: relative; display: flex; gap: 12px; align-self: stretch;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: calc((100vw - var(--fw)) / 2);   /* edge to edge, without widening the column */ overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .variant-stage::-webkit-scrollbar { display: none; }
  .variant-stage > .variant { flex: none; scroll-snap-align: center; grid-area: auto; opacity: 1; transform: none; filter: none; pointer-events: auto; transition: none; }
  .variant-stage .frame { width: var(--fw); height: auto; }
  .variant-stage .frame.fade-up, .variant-stage .frame.fade-up.in-view { transform: none; transition: none; }   /* the row rises, not the cards (they would be clipped by the row) */

  /* close (Fable + Sol, 2026-10-04): the question, the voice, the face, the facts, then the one action under the thumb.
     It may run past a screen. The portrait is the desktop's own 4:5 box, gutter to gutter; the credentials keep their
     desktop styles, three across; the button is the kit's .btn (the hero's). */
  .final { min-height: 0; padding-block: 96px calc(64px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr); }   /* the column never widens to its content */
  /* Safari 26 paints its top and bottom bars from the fixed/sticky layer at each edge (it ignores theme-color): the held,
     white team would tint both bars white under the black close. As the last child of main the close can never actually
     stick, but being a sticky layer above the team it is the one Safari samples once it covers an edge (Fable, from
     WebKit's LocalFrameView::fixedContainerEdges) */
  .final { position: sticky; top: 0; }
  .final-grid { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .final .ask { display: contents; text-align: center; }        /* its title, subhead and button join the column's order */
  .final h2 { order: 1; align-self: stretch; }                  /* the column's width, not its content's: it wraps where it should */
  .final .subhead { order: 2; margin: 32px auto 0; max-width: 340px; }
  .maker { order: 3; justify-self: auto; width: 100%; margin-top: 40px; }
  .creds { text-align: left; }
  .final .btn-cta { order: 4; margin-top: 48px; padding: 15px 32px; font-size: 16px; }
}
/* phones, scroll-linked where the browser can (Safari 26+, Chrome): the film rises with its own screen; the swipe row and
   its control rise (160px) with a slight lag, from the row's top at the fold to its centre at 58% of the screen (the desktop curve) */
.switcher { view-timeline-name: --chm; }
@supports (animation-timeline: view()) {
  @media (max-width: 639px) {
    .episode .device { animation-timeline: --epd; animation-range: entry 20% entry 100%; }
    .device-wrap::before { transition: none; animation: ep-glow linear both; animation-timeline: --epd; animation-range: entry 20% entry 100%; }
    .variant-stage, .switcher .segmented { animation: ch-rise-m linear both; animation-timeline: --chm; }
    .variant-stage { animation-range: cover 14svh cover calc(50% - 12svh); }   /* from the row's top at the fold (the switcher is a screen tall, the row centred in it) */
    .switcher .segmented, .switcher .segmented.in-view { opacity: 1; transition: none; animation-range: cover 18svh cover calc(50% - 8svh); }
    @keyframes ch-rise-m { from { transform: translate3d(0, 160px, 0); animation-timing-function: linear(0, .13, .253, .369, .477, .578, .67, .754, .828, .891, .943, .981, 1); }
                           to { transform: none; } }
  }
}
@supports not (animation-timeline: view()) {
  @media (max-width: 639px) {
    .variant-stage { transform: translate3d(0, 64px, 0); transition: transform .6s cubic-bezier(.33, 0, .15, 1); }
    .variant-stage:has(.in-view) { transform: translate3d(0, 0, 0); }
  }
}

/* ---------- Landscape phones: not supported, by design (Dip). A web page cannot lock rotation (iOS Safari has no
   screen.orientation.lock(); Android allows it only in fullscreen), so a sideways phone gets one calm line instead of a
   half-switched layout. Height ≤ 500 + coarse pointer keeps it to phones: never iPads, never a short desktop window. */
.rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .rotate-note { position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; padding: 24px; background: #000; color: #fff; text-align: center; }
  .rotate-note .section-label { margin: 0 0 20px; }               /* the hero's eyebrow, its phone spacing */
  .rotate-line { font-size: 40px; line-height: 44px; letter-spacing: -.02em; font-weight: 500; }   /* the phone h2 token (questum-motion.css:52), stated here: a sideways phone is wider than that token's 639px query */
}