/* Art layer: painted scenes with depth parallax, drifting mist and floating product frames.
   Used by index, about and contact. Only transform and opacity animate. Layout for those pages lives here
   so their inline <style> stays small. */

/* The scrim, veil and 1px hero shadow follow the theme: dark ink over a dark-veiled painting, light ink
   with a pale veil in light theme. The pale veil sits at 0.44 (was 0.30) so dark copy stays readable. */
:root,
.art-scene {
  --art-scrim: 10, 11, 16;
  --art-scrim-a: 0.6;
  --art-veil: rgba(10, 11, 16, 0.5);
  --art-mist: 0.9;
  --hero-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.emboss-grey { text-shadow: var(--emboss-grey); }
/* Light theme keeps dark ink pressed into the painting: a pale highlight under the glyphs reads as an
   emboss. Headings go bold so the ink holds against the dark paint. */
[data-theme="light"],
[data-theme="light"] .art-scene:not([data-theme="dark"]) {
  --art-scrim: 244, 240, 230;
  --art-scrim-a: 0.78;
  --art-veil: rgba(244, 240, 230, 0.44);
  --hero-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(255, 255, 255, 0.4);
}
[data-theme="light"] .art-scene:not([data-theme="dark"]) :is(h1, h2) {
  font-weight: 700;
  text-shadow: var(--hero-shadow);
}
[data-theme="light"] .art-scene:not([data-theme="dark"]) :is(.lead, .reassure, .byline) {
  font-weight: 600;
  color: var(--text-1);
  text-shadow: var(--hero-shadow);
}

/* Scene: a section whose background is a painting. */
.art-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--text-2);
}
.art-scene :is(h1, .lead, .reassure) { text-shadow: var(--hero-shadow); }
.art-scene .lead { color: var(--text-1); }
.art-scene .reassure { color: var(--text-1); font-size: var(--fs-small); }
.art-scene .btn--secondary { --btn-border: var(--glass-hi); }
.art-scene > .container,
.art-scene > .cta-band__inner { position: relative; z-index: 2; }

.art-bg {
  position: absolute;
  inset: -10% -6%;
  z-index: 0;
  pointer-events: none;
}
/* Only layers that parallax need bleed past the scene; fixed layers (pinned proof, contact) stay edge to edge, so
   the translate never exposes the ground at the top and left. */
.art-bg--zsky:not([data-depth]) { inset: 0; }
.art-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--art-pos, 50% 50%);
  transform-origin: 50% 50%;
  animation: art-breathe 46s ease-in-out infinite alternate;
}
/* Floor veil under heroes whose page-level scrim is thin: copy over a bright painting must stay AA. */
.art-scene:is(.art-hero, .hero):not(.art-hero--home) .art-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--art-scrim), 0.3);
}
@media (max-width: 767px) {
  .art-scene:is(.art-hero, .hero):not(.art-hero--home) .art-bg::before { background: rgba(var(--art-scrim), 0.52); }
}
[data-theme="light"] .art-scene:is(.art-hero, .hero):not(.art-hero--home) .art-bg::before { background: rgba(var(--art-scrim), 0.1); }
.art-bg--zsky img { animation: none; }
.art-hero--home .art-bg--zsky img { animation: none; }
/* A painting is a colour field: it meets the ground on a hard edge. The only gradient is the scrim
   under the copy (text side, and under the nav); nothing fades into the page ground. */
.art-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--art-scrim), var(--art-scrim-a)) 0%, rgba(var(--art-scrim), calc(var(--art-scrim-a) * 0.5)) 46%, rgba(var(--art-scrim), 0.04) 100%),
    linear-gradient(180deg, rgba(var(--art-scrim), 0.45) 0%, transparent 26%);
}
.art-bg--center::after {
  background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(var(--art-scrim), calc(var(--art-scrim-a) * 0.85)), rgba(var(--art-scrim), 0.1) 75%, transparent 100%);
}
.art-bg--soft::after { background: var(--art-veil); }

.art-mist {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--art-mist);
}

/* Quiet the blue light fields where a painting already carries the colour. */
.art-scene .fx-ambient { z-index: 1; }
.art-scene .fx-field, .art-scene .fx-aurora { opacity: 0.45; }
.art-scene .fx-glow { opacity: 0.5; }

@keyframes art-breathe {
  from { transform: scale(1.04) translate3d(-1.2%, 0.6%, 0); }
  to { transform: scale(1.12) translate3d(1.2%, -0.8%, 0); }
}
@keyframes art-hover {
  from { transform: translate3d(0, -6px, 0); }
  to { transform: translate3d(0, 8px, 0); }
}

/* Depth layers: art.js moves [data-depth] with scroll and pointer. The wrapper takes the JS translate,
   the inner element the idle hover, so the two transforms never fight. */
.art-scene.is-live [data-depth] { will-change: transform; }
.art-float > * { animation: art-hover 9s ease-in-out infinite alternate; }

/* Floating browser frame with a real screenshot. */
.art-frame {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-0) 55%, transparent);
  border: 1px solid var(--ix-hair);
  border-radius: 0;
}
.art-frame__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 36px;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--ix-hair);
  font-size: var(--fs-meta);
  color: var(--text-3);
  white-space: nowrap;
}
.art-frame__bar a { color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.art-frame__bar a:hover { color: var(--accent-text); }
.art-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* One hero height for every inner page: the same minimum, content centred, and the same clearance under
   the nav. A hero taller than the minimum is only ever so because its content needs the room. The home
   hero (.art-hero--home) is the landing screen and takes the full viewport instead. */
:root { --hero-min-h: min(88svh, 820px); }
.art-scene:is(.art-hero, .ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero, .sv-hero):not(.art-hero--home) {
  min-height: var(--hero-min-h);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--s-8));
}
.art-scene:is(.ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero, .sv-hero) > .container,
.sv-hero > .hero__inner { width: 100%; }

/* Small hero lines (reassurance, live badge, byline): regular weight at the stat-label size, with a tight 1px
   emboss and no blurred halo, so the glow stays off the painting. The `body` prefix outranks the per-page
   font-size rules (.hero__live .live-line etc.) without !important. */
body .art-scene :is(.reassure, .byline, .live-line, figcaption) {
  font-size: calc(var(--fs-small) + 2px);
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.art-scene .metric :is(.metric__value, .metric__label) { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.art-scene .metric__label { font-size: calc(var(--fs-small) + 2px); font-weight: 400; color: var(--text-1); }
[data-theme="light"] .art-scene:not([data-theme="dark"]) .metric__value { font-weight: 700; color: var(--text-1); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
[data-theme="light"] .art-scene:not([data-theme="dark"]) .metric__label { color: #000; text-shadow: var(--emboss-grey); }
[data-theme="light"] .art-scene:not([data-theme="dark"]) :is(.reassure, .byline, .live-line, figcaption) {
  font-weight: 400;
  color: #000;
  text-shadow: var(--emboss-grey);
}

/* Hero copy, one spec for every inner page: the same h1 scale, weight and measure, the same lead size and
   measure, and the same gap above the buttons. Page CSS only sets what is specific to that page. */
:root { --fs-h1-inner: clamp(2.5rem, 1.2rem + 4.8vw, 4.75rem); }
.art-scene:is(.art-hero, .ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero, .sv-hero):not(.art-hero--home) h1 {
  font-size: var(--fs-h1-inner);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 24ch;
  margin-bottom: var(--s-5);
}
.art-scene:is(.art-hero, .ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero, .sv-hero):not(.art-hero--home) .lead {
  font-size: var(--fs-lead);
  max-width: 44ch;
}
.art-scene:is(.art-hero, .ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero, .sv-hero):not(.art-hero--home) :is(.hero__actions, .btn-row) {
  margin-top: var(--s-6);
}
.art-scene:is(.art-hero, .ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero, .sv-hero):not(.art-hero--home) .eyebrow {
  color: var(--text-1);
  font-weight: 600;
  text-shadow: var(--hero-shadow);
}
@media (max-width: 479px) {
  .art-scene:is(.art-hero, .ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero, .sv-hero):not(.art-hero--home) h1 { font-size: 2.25rem; }
}

/* Light theme: one pale mask behind the copy on every inner-page hero (the service heroes carry their own in pages.css). */
[data-theme="light"] .art-scene:is(.ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero) .art-bg::after {
  background: linear-gradient(90deg, rgba(var(--art-scrim), 0.66) 0%, rgba(var(--art-scrim), 0.5) 45%, rgba(var(--art-scrim), 0.14) 75%, transparent 100%);
}
@media (max-width: 767px) {
  [data-theme="light"] .art-scene:is(.ab-hero, .contact-head, .proc-hero, .work-hero, .case-hero) .art-bg::after {
    background: rgba(var(--art-scrim), 0.55);
  }
}

/* Hero */
.art-hero {
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-9);
  display: flex;
  align-items: center;
}
.art-hero .hero__inner {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
.art-hero h1 {
  font-size: clamp(2.75rem, 1.3rem + 5.2vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 15ch;
  margin-bottom: var(--s-5);
}
.art-hero .lead { max-width: 44ch; }
.art-hero .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.art-hero .reassure { margin-top: var(--s-3); }

.live-line {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: 0;
  background: color-mix(in srgb, var(--bg-0) 55%, transparent);
  border: 1px solid var(--ix-hair);
  color: var(--text-1);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.live-line:hover { border-color: var(--ix-blue); }
.live-line .icon { color: var(--accent-text); }

/* About: portrait and print side by side */
.facts-line { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); margin: var(--s-7) 0 0; }
.facts-line div { display: flex; flex-direction: column; gap: 2px; }
.facts-line dt { font-size: var(--fs-meta); color: var(--text-3); }
.facts-line dd { color: var(--text-1); font-weight: 500; }
.facts-line a:hover { color: var(--accent-text); }

/* Contact */
.contact-lines { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-7); padding: 0; list-style: none; }
.contact-lines li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-1); font-weight: 500; min-height: 44px; }
.contact-lines .icon { color: var(--accent-text); }
.contact-lines a:hover { color: var(--accent-text); }
.contact-grid { display: grid; gap: var(--s-6); align-items: start; }
.panel { padding: var(--s-6); }
.panel h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }
.panel__lead { margin-top: var(--s-3); color: var(--text-2); }
.panel .btn { margin-top: var(--s-5); }
/* The skeleton holds the calendar's space from first paint, so the embed arriving never shifts the page. */
.cal-wrap { position: relative; margin-top: var(--s-6); min-height: 520px; }
.cal-inline { position: relative; z-index: 1; min-height: 520px; max-height: 680px; border: 1px solid var(--ix-hair); border-radius: 0; overflow: auto; }
.cal-skel { position: absolute; inset: 0; z-index: 0; display: grid; align-content: start; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--ix-hair); border-radius: 0; background: transparent; }
.cal-skel__head { width: 40%; height: 18px; background: var(--ix-hair); }
.cal-skel__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-2); }
.cal-skel__grid i { aspect-ratio: 1; border: 1px solid var(--ix-hair); }
.cal-wrap.is-ready .cal-skel { display: none; }
.cal-wrap.is-ready .cal-inline { background: var(--bg-0); }
.cal-slow { position: absolute; inset: auto var(--s-5) var(--s-5); z-index: 2; display: none; gap: var(--s-3); padding: var(--s-4); background: var(--bg-0); border: 1px solid var(--ix-hair); }
.cal-wrap.is-slow:not(.is-ready) .cal-slow { display: grid; }
.cal-fallback { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .cal-wrap:not(.is-ready) .cal-skel__grid i { animation: cal-pulse 1.6s ease-in-out infinite; }
  @keyframes cal-pulse { 50% { opacity: 0.55; } }
}
.cal-fallback a, .form__consent a { color: var(--accent-text); }
#form { scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.form .panel__lead { margin-top: calc(-1 * var(--s-3)); }
.form__consent { font-size: var(--fs-meta); color: var(--text-3); }
.next-steps { display: grid; gap: var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.next-steps h3 { font-size: var(--fs-h3); }
.next-steps p { margin-top: var(--s-2); color: var(--text-2); max-width: 34ch; }

@media (min-width: 640px) {
  .next-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .art-hero .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-7); }
  .next-steps { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (max-width: 479px) {
  .art-hero .hero__actions .btn { width: 100%; }
  .live-line { font-size: var(--fs-h4); }
}

@media (prefers-reduced-motion: reduce) {
  .art-bg img, .art-float > * { animation: none; }
}

/* Per-scene focal point and glow position (kept out of page markup). */
.art-pos-a { --glow-x: 80%; --glow-y: 40%; --art-pos: 100% 40%; }
.art-pos-b { --art-pos: 100% 100%; }
.art-pos-c { --glow-x: 50%; --glow-y: 56%; --art-pos: 50% 45%; }
.art-pos-d { --glow-x: 75%; --glow-y: 45%; --art-pos: 55% 30%; }

/* Legibility over bright paintings: captions in the full ink, a heavier veil on narrow screens. */
@media (max-width: 767px) {
  .art-scene { --art-scrim-a: 0.78; --art-veil: rgba(10, 11, 16, 0.64); }
  .art-bg::after {
    background:
      linear-gradient(180deg, rgba(var(--art-scrim), 0.5) 0%, rgba(var(--art-scrim), calc(var(--art-scrim-a) * 1.1)) 30%, rgba(var(--art-scrim), calc(var(--art-scrim-a) * 0.9)) 100%);
  }
}

/* Headlines stay within two lines at every width. */
.footer__bottom { max-width: 80ch; }
@media (max-width: 639px) {
  .cta-final h2 { font-size: 2.25rem; }
}
@media (max-width: 479px) {
  .art-hero h1 { font-size: 2.25rem; }
}

/* ===== Stage 2 home: hero, pinned proof, showreel, founder, FAQ, CTA ===== */

/* Hero: the painting owns the screen; legibility comes from type size and a 1px shadow, not a heavy scrim. */
.art-hero--home {
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + var(--s-7));
  padding-bottom: var(--s-9);
}
.art-hero--home .hero__inner { display: block; }
.art-hero--home .art-bg::after {
  background:
    linear-gradient(90deg, rgba(var(--art-scrim), 0.35) 0%, rgba(var(--art-scrim), 0.14) 42%, transparent 68%);
}
/* Dark ink wants a little more pale behind the small copy, but the painting must keep its colour. */
[data-theme="light"] .art-hero--home .art-bg::after {
  background: linear-gradient(90deg, rgba(var(--art-scrim), 0.62) 0%, rgba(var(--art-scrim), 0.46) 45%, rgba(var(--art-scrim), 0.14) 75%, transparent 100%);
}
.art-hero--home h1 {
  font-size: clamp(3rem, 1.5rem + 6.5vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  max-width: none;
  margin-bottom: var(--s-6);
}
.h-line { display: block; overflow: hidden; padding: 0 0.08em 0.14em 0; margin-bottom: -0.14em; }
.h-line__in { display: block; }
.art-hero--home .lead {
  max-width: 36ch;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
}
.hero__live { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.hero__live .live-line { margin-top: 0; font-size: var(--fs-body); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3); }
.byline { margin: 0; font-size: var(--fs-small); color: var(--text-1); text-shadow: var(--hero-shadow); }

@keyframes art-rise-mask { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
@keyframes art-rise-fade { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes art-settle { from { scale: 1.06; } to { scale: 1; } }
.art-hero--home .h-line__in { animation: art-rise-mask 640ms var(--ease-out) both; }
.art-hero--home .h-line + .h-line .h-line__in { animation-delay: 80ms; }
.art-hero--home .intro { animation: art-rise-fade 520ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 80ms); }
.art-hero--home .art-bg img { animation: art-settle 1.4s var(--ease-out) both, art-breathe 46s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .art-hero--home .h-line__in, .art-hero--home .intro, .art-hero--home .art-bg img { animation: none; }
}
@media (max-width: 767px) {
  .art-hero--home { --art-pos: 100% 40%; }
  .art-hero--home .art-bg::after {
    background: linear-gradient(180deg, rgba(var(--art-scrim), 0.2) 0%, rgba(var(--art-scrim), 0.4) 100%);
  }
}

/* Pinned proof. Static by default; art.js adds .is-pinned at >= 1024px. */
.art-pin__stage { padding-block: var(--sec-y); }
.art-pin__stage > .pin-stage { position: relative; z-index: 2; }
.art-pin__stage .art-bg--soft::after {
  background:
    rgba(var(--art-scrim), 0.4);
}
.pin-head h2 { max-width: 18ch; margin-bottom: var(--s-7); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.pin-stage { display: grid; gap: var(--s-7); width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.pin-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  width: fit-content;
  max-width: 100%;
  margin-top: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--ix-hair);
  background: color-mix(in srgb, var(--bg-0) 62%, transparent);
  font-size: var(--fs-small);
  color: var(--text-1);
  text-shadow: var(--hero-shadow);
}
.pin-cap .badge--live { color: var(--text-1); }
@media (min-width: 768px) {
  .pin-stage { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); align-items: start; }
  .pin-layer--riddhi { margin-top: var(--s-9); }
}
@media (min-width: 1024px) {
  .art-pin.is-pinned { height: 220vh; }
  .is-pinned .art-pin__stage { position: sticky; top: 0; height: 100vh; padding: 0; }
  .is-pinned .pin-head { position: absolute; top: calc(var(--nav-h) + var(--s-6)); left: 0; right: 0; margin-inline: auto; }
  .is-pinned .pin-head h2 { margin: 0; }
  .is-pinned .pin-stage { position: absolute; inset: 0; display: block; width: auto; }
  .is-pinned .pin-layer { position: absolute; height: fit-content; }
  .is-pinned.is-live .pin-layer { will-change: transform, opacity; }
  .pin-layer.is-off { visibility: hidden; }
  .is-pinned .pin-layer--zocept { z-index: 2; left: 0; right: 0; margin: 0 auto; top: 26vh; width: min(54vw, 940px, calc((62vh - 76px) * 1.6)); }
  .is-pinned .pin-layer--riddhi { z-index: 1; right: 4vw; top: 36vh; margin: 0; width: min(33vw, 620px, calc((50vh - 76px) * 1.6)); }
}

/* Services showreel */
.reel-section { padding-block: var(--sec-y); }
.reel__eyebrow { font-size: var(--fs-h2); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-1); max-width: 18ch; }
.reel { display: grid; gap: var(--s-8); margin-top: var(--s-7); }
.reel__list { display: grid; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.reel__shot { margin-bottom: var(--s-4); }
.reel__shot img { aspect-ratio: 1200 / 813; }
.reel__link {
  display: block;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-1);
  text-wrap: balance;
}
.reel__link:hover { color: var(--accent-text); }
.reel__item p { margin-top: var(--s-3); color: var(--text-2); }
.reel__stage { display: none; }
/* Desktop: one topic per viewport of scroll. The stage is a 100vh sticky box with the frame centred in it,
   so it holds still through topics 1 and 2 and releases exactly when topic 3 fills the viewport
   (sticky box bottom meets the grid's bottom), riding out with that topic. */
@media (min-width: 1024px) {
  .reel { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.55fr); gap: var(--s-8); align-items: start; margin-top: var(--s-6); }
  .reel__list { gap: 0; }
  /* Every topic, first and last, is centred in its viewport-high slot so it sits level with the
     centred frame: topic 1 arrives beside the frame and topic 3 leaves with it. */
  .reel__item { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  .reel__shot { display: none; }
  .reel__item .reel__link { color: var(--text-2); transition: color 400ms; }
  .reel__item.is-active .reel__link { color: var(--text-1); }
  .reel__item.is-active .reel__link:hover { color: var(--accent-text); }
  .reel__stage { display: flex; align-items: center; justify-content: flex-end; position: sticky; top: 0; height: 100vh; }
  /* The frame owns the screen: as tall as the viewport allows above and below the nav. */
  .reel__stage .art-frame { width: min(100%, calc((100vh - 2 * var(--nav-h) - var(--s-6)) * 1200 / 813)); aspect-ratio: 1200 / 813; }
  .reel__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top; opacity: 0; transition: opacity 400ms; }
  .reel__img.is-active { opacity: 1; }
  /* Before the first topic reaches the centre no item is active; show topic 1's frame rather than an empty stage. */
  .reel__stage:not(:has(.reel__img.is-active)) .reel__img:first-child { opacity: 1; }
  /* Topic 3's lower half is empty by construction (the frame must ride out centred), so the link sits up inside it. */
  .reel-section .sec-cta { margin-top: calc(var(--s-7) - 20vh); }
  .reel-section { padding-bottom: var(--s-7); }
}
@media (prefers-reduced-motion: reduce) {
  .reel__img, .reel__item .reel__link { transition: none; }
  .reel__img { opacity: 1; visibility: hidden; }
  .reel__img.is-active { visibility: visible; }
}

/* Founder */
/* The reel section above already supplies bottom padding, so a full top pad doubles the gap on mobile. */
#founder { padding-top: var(--s-7); }
@media (min-width: 768px) { #founder { padding-top: var(--sec-y); } }
.founder-block { display: grid; gap: var(--s-7); align-items: center; }
.founder-block__photo { width: 100%; max-width: 480px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: 0; }
.founder-block h2 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.founder-block p { margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-lead); max-width: 44ch; }
.founder-block .btn { margin-top: var(--s-6); }
@media (min-width: 768px) {
  .founder-block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); }
}

/* FAQ: two columns on wide screens */
.faq-wide .faq { margin-top: var(--s-6); max-width: none; }
@media (min-width: 1024px) {
  .faq-wide .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-9); align-items: start; }
  .faq-wide .faq__item summary { padding-block: var(--s-4); }
}

/* Final CTA: Call. Plan. Build. Run. */
.anchor-offset { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.art-scene.cta-final--home .art-bg--center::after {
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, rgba(var(--art-scrim), 0.5), rgba(var(--art-scrim), 0.08) 75%, transparent 100%);
}
.art-scene.cta-final--home { --art-pos: 50% 100%; }
@media (max-width: 767px) { .art-scene.cta-final--home { --art-pos: 100% 100%; } }
.art-scene.cta-final--home .cta-band__inner { max-width: 1000px; }
.art-scene.cta-final--home h2 { font-size: clamp(2.5rem, 1.2rem + 5vw, 5.5rem); max-width: none; text-shadow: var(--hero-shadow); }
/* Light: dark ink over a bright picture needs a wider, denser pale core than the dark theme's 0.5. */
[data-theme="light"] .art-scene.cta-final--home:not([data-theme="dark"]) .art-bg--center::after {
  background: radial-gradient(ellipse 75% 80% at 50% 55%, rgba(var(--art-scrim), 0.72), rgba(var(--art-scrim), 0.45) 65%, transparent 100%);
}
/* The dawn picture is bright: a soft halo in the theme's scrim colour keeps small copy AA; scrim stays at 0.5. */
.cta-final--home .lead, .cta-final--home .reassure { text-shadow: 0 1px 2px rgba(var(--art-scrim), 0.55), 0 0 12px rgba(var(--art-scrim), 0.5); }
/* Light: a blurred halo reads as glow on dark ink, so use the same sharp 1px emboss as the other hero lines. */
[data-theme="light"] .cta-final--home:not([data-theme="dark"]) :is(.lead, .reassure) { color: #000; text-shadow: var(--emboss-grey); }
[data-theme="light"] .cta-final--home:not([data-theme="dark"]) .lead { font-weight: 700; }
[data-theme="light"] .cta-final--home:not([data-theme="dark"]) .reassure { font-weight: 400; }
@media (max-width: 767px) {
  .art-scene.cta-final--home .art-bg--center::after {
    background:
      radial-gradient(ellipse 110% 70% at 50% 58%, rgba(var(--art-scrim), 0.5), rgba(var(--art-scrim), 0.3) 70%, transparent 100%);
  }
}
.lit { display: inline-block; }
html.js .lit { opacity: 0.35; transition: opacity 500ms var(--ease-out); transition-delay: calc(var(--w, 0) * 120ms); }
html.js .lit-words.is-lit .lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .lit { opacity: 1; transition: none; }
}

/* ===== Stage 3 interaction kit (art.js): rail, stagger, wipe, tilt ===== */
/* Rail: a hairline on the container's left whose fill follows --rail-progress. Markup may add
   <span class="rail__line" aria-hidden="true"> instead of the pseudo-elements. Static by default. */
[data-rail] { position: relative; --rail-progress: 1; }
[data-rail]:not(:has(> .rail__line))::before,
[data-rail]:not(:has(> .rail__line))::after,
.rail__line,
.rail__line::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-1); pointer-events: none; }
[data-rail]:not(:has(> .rail__line))::after,
.rail__line::after { background: var(--accent-text); transform-origin: top; transform: scaleY(var(--rail-progress)); }
.rail__line::after { left: 0; }
.rail__num { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--text-1); }
.rail__label, .ab-step__label { font-family: var(--font-sans, inherit); font-style: normal; font-size: var(--fs-small); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--text-2); }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-rail]:not(:has(> .rail__line))::after,
  .rail__line::after { transition: transform 160ms linear; }
  .rail__num { color: var(--text-3); transition: color 300ms var(--ease-out); }
  .is-current .rail__num, .is-passed .rail__num { color: var(--accent-text); }
  [data-rail-index] a { transition: color 300ms var(--ease-out); }
  [data-rail-index] a.is-current { color: var(--accent-text); }
}
/* data-rail="x": the line runs under a horizontal row of steps instead of down the left. */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  [data-rail] { --rail-progress: 1 !important; }
  .rail__num { color: var(--text-1) !important; }
}

/* Stagger: children tick in 60ms apart. Hidden only when JS is on; art.js adds .is-in. */
html.js [data-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
html.js [data-stagger] > .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-stagger] > * { transform: none; transition: opacity 400ms; transition-delay: 0s; }
}

/* Wipe: frame revealed top-down on first entry. The 1px sliver at the top keeps the frame observable (a fully
   clipped target never intersects) and fires as soon as the frame's top edge enters, so a frame taller than the
   remaining viewport (the showreel stage) is never left blank. Reduced motion: shown at once (no hidden content). */
html.js [data-wipe] { clip-path: inset(0 0 calc(100% - 1px) 0); transition: clip-path 700ms var(--ease-out); }
html.js [data-wipe].is-in { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-wipe] { clip-path: none; transition: none; }
}

/* Tilt: art.js writes --tilt-x/--tilt-y (max 4deg) on fine pointers; the transition eases the reset. */
@media (pointer: fine) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-tilt] { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 250ms var(--ease-out); }
  [data-tilt]:hover { will-change: transform; }
}

/* Boxes over a painting need a veil for legibility: tinted but transparent, no blur. */
.art-scene :is(.glass-card, .card) { background: color-mix(in srgb, var(--bg-0) 55%, transparent); }