/* ==========================================================================
   Mirjan Gjergjevica, Film Director
   Design: dark base, Corfu-sunset orange, bold geometric sans, rounded cards.
   Motion: film language (shutter, rack focus, flicker, end credits).
   Every animation is disabled under prefers-reduced-motion.
   ========================================================================== */

:root {
  --bg: #0e0e0e;
  --panel: #171717;
  --panel-2: #1f1f1f;
  --ink: #f6f4f0;
  --muted: #a6a29b;
  --dim: #8a867f; /* quietest text colour; still ≥ 4.5:1 on --bg and --panel */
  --line: rgba(255, 255, 255, 0.1);
  --accent: #ff5a1f;
  --accent-soft: #ffb089;

  --font: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 20px;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* Delay before entrance animations start; longer while the intro plays. */
  --d0: 0.1s;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.has-intro { --d0: 2.45s; }

/* Greek pages: Plus Jakarta Sans has no Greek glyphs; Inter Tight does. */
html:lang(el) { --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, iframe, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #0e0e0e; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 300; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; }
.skip:focus { left: 12px; }

/* ------------------------------------------------------------- typography */

.h-display {
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0.25em 0 0.35em;
}
.h-xl {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.lead--ink { color: var(--ink); font-weight: 500; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; margin-bottom: 14px; }
.eyebrow a:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.num--big { font-size: 1.1rem; }
.badge { display: inline-block; vertical-align: middle; margin-left: 0.4em; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--accent); color: var(--accent); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; }

.link-arrow { display: inline-flex; gap: 0.5em; font-weight: 600; }
.link-arrow span { transition: transform 0.4s var(--ease-out); }
.link-arrow:hover span { transform: translateX(6px); }

/* ----------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 11vw, 150px) 0; }
.section--tight { padding-top: clamp(48px, 6vw, 80px); }
.section--flush { padding-top: 0; }
.section__more { margin-top: 36px; }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.behind__cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: 28px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 40px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ------------------------------------------------------------------- pills */

.pill {
  --dot: 34px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 6px 0 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.45s var(--ease-out), border-color 0.45s;
}
.pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 6px;
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.65s var(--ease-out);
}
.pill:hover::before, .pill:focus-visible::before { transform: scale(16); }
.pill__dot { width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; flex: none; }
.pill__dot svg { grid-area: 1 / 1; width: 15px; height: 15px; transition: transform 0.5s var(--ease-out); }
.pill__dot svg + svg { transform: translateX(-220%); }
.pill:hover .pill__dot svg:first-child, .pill:focus-visible .pill__dot svg:first-child { transform: translateX(220%); }
.pill:hover .pill__dot svg + svg, .pill:focus-visible .pill__dot svg + svg { transform: none; }

.pill--light { background: #fff; color: #0e0e0e; }
.pill--accent { background: var(--accent); color: #0e0e0e; }
.pill--accent::before { background: #0e0e0e; }
.pill--accent:hover, .pill--accent:focus-visible { color: #fff; }
.pill--ghost { border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; }
.pill--ghost:hover, .pill--ghost:focus-visible { color: #0e0e0e; border-color: var(--accent); }

.chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); font-size: 0.8rem; font-weight: 500; transition: border-color 0.3s, color 0.3s; }
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  padding: 14px var(--gutter);
  view-transition-name: site-header;
}
.site-header__bar {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 7px 7px 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: max-width 0.7s var(--ease-out), background 0.5s, border-color 0.5s, backdrop-filter 0.5s;
}
.is-scrolled .site-header__bar {
  max-width: 900px;
  background: rgba(22, 22, 22, 0.72);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 0.98rem; }
.brand__mark { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #0e0e0e; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; transition: transform 0.6s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(-360deg); }
.site-nav { margin-left: auto; display: flex; gap: 30px; font-size: 0.9rem; font-weight: 500; }
.site-nav a { position: relative; color: rgba(255, 255, 255, 0.86); transition: color 0.3s; }
.site-nav a:hover, .site-nav a[aria-current] { color: #fff; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale 0.45s var(--ease-out); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { scale: 1 1; transform-origin: left; }
.site-nav__contact { display: none; }
.menu-toggle { display: none; }
.site-nav { align-items: center; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }
.site-nav .lang-switch a { padding: 5px 9px; border-radius: 999px; color: rgba(255, 255, 255, 0.75); transition: background 0.3s, color 0.3s; }
.site-nav .lang-switch a::after { display: none; }
.site-nav .lang-switch a:hover { color: #fff; }
.site-nav .lang-switch a[aria-current] { background: #fff; color: #0e0e0e; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  min-height: max(640px, min(100svh, 960px));
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
  display: flex;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(158deg, #c93d10 0%, #9a2a0b 34%, #4a1206 66%, #170604 100%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.22;
  mix-blend-mode: overlay;
}
.hero__glow {
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  left: 38%;
  top: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 128, 58, 0.95) 0%, rgba(255, 92, 31, 0.5) 32%, rgba(255, 92, 31, 0) 66%);
  animation: glow-drift 16s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  45% { transform: translate(-6%, 5%) scale(1.06); opacity: 0.8; }
  100% { transform: translate(4%, 2%) scale(0.96); opacity: 1; }
}

/* Visual layer: no z-index/filter/transform here so the portrait can multiply onto the gradient. */
.hero__visual { position: absolute; inset: 0; pointer-events: none; }
.hero__inner { pointer-events: none; }
.hero__inner > * { pointer-events: auto; }
.hero__portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 94%;
  width: auto;
  max-width: none;
  translate: -38% 0;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15) blur(0);
  mix-blend-mode: multiply;
  animation: rack-portrait 2.4s var(--ease-out) var(--d0) both, ken-burns 30s ease-in-out calc(var(--d0) + 2.4s) infinite alternate;
}
@keyframes rack-portrait { from { filter: grayscale(1) contrast(1.15) blur(22px); opacity: 0; transform: scale(1.06); } }
@keyframes ken-burns { to { transform: scale(1.04); } }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.85; }

/* Placeholder visual until a portrait or reel exists: a cinema lens that racks into focus. */
.lens {
  position: absolute;
  right: 6%;
  top: 40%;
  width: min(40vw, 540px);
  aspect-ratio: 1;
  translate: calc(var(--px, 0) * 14px) calc(-50% + var(--py, 0) * 14px);
  transition: translate 1.2s var(--ease-out);
  animation: rack-lens 2.4s var(--ease-out) var(--d0) both;
}
@keyframes rack-lens { from { filter: blur(26px); opacity: 0; scale: 1.1; } }
.lens__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.5) 0 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 62.5% 66%, transparent 66.5% 69%, #000 69.5% 70.2%, transparent 70.7%);
  mask: radial-gradient(circle, transparent 0 62%, #000 62.5% 66%, transparent 66.5% 69%, #000 69.5% 70.2%, transparent 70.7%);
  animation: spin 90s linear infinite;
}
.lens__glass {
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.4) 0 3%, transparent 11%),
    radial-gradient(circle at 64% 70%, rgba(255, 170, 110, 0.35) 0 2.5%, transparent 9%),
    radial-gradient(circle at 50% 50%, #2b0904 0 52%, #120302 53% 68%, #3d1006 69% 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 90px rgba(0, 0, 0, 0.65), 0 50px 140px rgba(0, 0, 0, 0.45);
}
.lens__glass::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(255, 140, 70, 0), rgba(255, 140, 70, 0.28), rgba(120, 160, 255, 0.18), rgba(255, 140, 70, 0));
  filter: blur(6px);
  animation: spin 24s linear infinite reverse;
}
@keyframes spin { to { rotate: 360deg; } }

/* The hero's 3D film strip: frames with the film titles turn around the portrait (or the lens).
   pages.mjs filmRing() sets --n (frames) and --r (radius / frame width); main.js turns --a and
   lets visitors drag it. Sizes use container units, so it scales with the stage. */
.reel3d {
  position: absolute;
  right: 4%;
  top: 41%;
  width: min(40vw, 540px);
  aspect-ratio: 1;
  container-type: size;
  perspective: 1500px;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  translate: calc(var(--px, 0) * 14px) calc(-50% + var(--py, 0) * 14px);
  transition: translate 1.2s var(--ease-out);
  animation: rack-lens 2.4s var(--ease-out) var(--d0) both;
}
.reel3d.is-grabbing { cursor: grabbing; }
.reel3d__stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.reel3d__center { position: absolute; inset: 17%; transform: translateZ(0); }
.reel3d .lens { position: absolute; top: 0; right: 0; width: 100%; height: 100%; translate: none; transition: none; animation: none; }
.reel3d__portrait { position: absolute; inset: -20% -10% 0; width: 120%; height: 120%; object-fit: contain; object-position: bottom; filter: grayscale(1) contrast(1.1); }
.reel3d__ring {
  --w: 21cqw;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateZ(-9deg) rotateX(-13deg) rotateY(var(--a, 0deg));
}
.reel3d__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--w) + 1px);
  height: calc(var(--w) * 0.8);
  margin: calc(var(--w) * -0.4) 0 0 calc(var(--w) * -0.5);
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--w) * var(--r)));
}
.reel3d__face, .reel3d__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 35mm base: four sprocket holes along each edge */
  background:
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(255, 222, 190, 0.7) 8% 16%, transparent 16% 25%) 0 5% / 100% 7% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(255, 222, 190, 0.7) 8% 16%, transparent 16% 25%) 0 95% / 100% 7% no-repeat,
    rgba(18, 7, 4, 0.92);
}
.reel3d__face {
  display: grid;
  place-content: center;
  gap: 0.25em;
  padding: 0 9%;
  text-align: center;
  color: #fff3e6;
}
/* the picture area between the sprockets */
.reel3d__face::before {
  content: "";
  position: absolute;
  inset: 18% 5%;
  border-radius: 3px;
  background: radial-gradient(120% 90% at 50% 40%, rgba(255, 120, 50, 0.38), rgba(120, 30, 8, 0.25) 60%, rgba(0, 0, 0, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 220, 190, 0.18);
}
.reel3d__face strong, .reel3d__face small { position: relative; display: block; line-height: 1.1; }
.reel3d__face strong { font-size: 2.15cqw; font-weight: 800; letter-spacing: -0.01em; }
.reel3d__face small { font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 220, 190, 0.75); }
.reel3d__back { transform: rotateY(180deg); filter: brightness(0.55); }

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  grid-template-rows: 1fr auto;
  column-gap: 40px;
  padding-top: clamp(120px, 15vh, 170px);
  padding-bottom: clamp(28px, 4vh, 44px);
}
.hero__title {
  align-self: center;
  font-size: clamp(3.4rem, 9.6vw, 9.2rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-shadow: 0 2px 40px rgba(60, 10, 0, 0.25);
}
.hero__hello {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.7em;
}
/* Sits low on the right, under the lens, so the hero visual stays clear. */
.hero__aside { align-self: end; justify-self: end; max-width: 330px; padding-bottom: 8px; position: relative; }
.hero__claim { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; margin-bottom: 14px; }
.hero__sub { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; line-height: 1.55; }
.hero__aside .actions { margin-top: 24px; }
.hero__services {
  grid-column: 1 / -1;
  list-style: none;
  margin: 48px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hero__services a { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); width: fit-content; }
.hero__services .num { color: var(--accent-soft); font-size: 0.8rem; }
.hero__services a:hover { color: #fff; }
.hero__services a::after { content: ""; height: 1.5px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale 0.5s var(--ease-out); }
.hero__services a:hover::after { scale: 1 1; }

/* Line-by-line title rise (used in hero and page heads). */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.js .rise { display: inline-block; animation: rise 1.15s var(--ease-out) both; animation-delay: calc(var(--d0) + var(--i, 0) * 90ms); }
.js .rise-soft { animation: rise-soft 1s var(--ease-out) both; animation-delay: calc(var(--d0) + var(--i, 0) * 90ms); }
@keyframes rise { from { transform: translateY(110%) rotate(3deg); } }
@keyframes rise-soft { from { opacity: 0; transform: translateY(18px); } }

/* ---------------------------------------------------- recognition strip */

.strip {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--r-xl));
  padding: calc(var(--r-xl) + 30px) 0 34px;
  background: var(--panel);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.strip__inner { display: flex; align-items: center; gap: 48px; }
.strip__label { flex: none; font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.marquee {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { flex: none; display: flex; gap: 64px; padding: 0 64px 0 0; margin: 0; list-style: none; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee li { display: grid; gap: 2px; white-space: nowrap; }
.marquee li a { display: grid; gap: 2px; }
.marquee strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.marquee span { font-size: 0.78rem; color: var(--muted); }
.marquee a:hover strong { color: var(--accent); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ------------------------------------------------------------------ cards */

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 20px; }
.card[hidden] { display: none; }
.card__link { display: block; }
.card .card__media { aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.card__media img, .card__media .frame__ph {
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.7s var(--ease-out), transform 1.1s var(--ease-out);
}
.card__link:hover .card__media img, .card__link:hover .card__media .frame__ph,
.card__link:focus-visible .card__media img, .card__link:focus-visible .card__media .frame__ph { filter: grayscale(0) contrast(1); transform: scale(1.045); }
.card__link:hover .card__media { animation: flicker 0.5s linear; }
@keyframes flicker {
  0%, 100% { filter: brightness(1); }
  10% { filter: brightness(1.7); }
  22% { filter: brightness(0.75); }
  34% { filter: brightness(1.35); }
  48% { filter: brightness(0.92); }
  60% { filter: brightness(1.08); }
}
.card__meta { display: flex; gap: 10px; margin: 18px 0 6px; font-size: 0.8rem; color: var(--muted); }
.card__title { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; transition: color 0.3s; }
.card__link:hover .card__title { color: var(--accent); }

/* ------------------------------------------------------------------ frame */

.frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tone, #444); border-radius: var(--r-md); }
.frame--scope { aspect-ratio: 2.39 / 1; }
.frame img, .frame video, .frame__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__ph {
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 2vw, 26px);
  background:
    radial-gradient(110% 85% at 22% 12%, color-mix(in oklab, var(--tone) 80%, white 20%), transparent 62%),
    linear-gradient(165deg, var(--tone), color-mix(in oklab, var(--tone) 30%, #050505) 82%);
}
.frame__ph::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.3; mix-blend-mode: overlay; }
.frame__ph span { position: relative; font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.2rem, 2.3vw, 2rem); line-height: 1.05; color: rgba(255, 255, 255, 0.88); max-width: 11ch; }
.frame__preview { opacity: 0; transition: opacity 0.5s; }
.is-previewing .frame__preview { opacity: 1; }

/* -------------------------------------------------------------- spotlight */

.spotlight { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.spotlight .h-xl { margin-bottom: 16px; }
.spotlight .h-xl a:hover { color: var(--accent); }
.spotlight__frame .frame { border-radius: var(--r-md); }

/* ----------------------------------------------------------------- laurel */

.laurels { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.laurel { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); }
.laurel__branch { width: 34px; height: 64px; flex: none; }
.laurel__branch--r { transform: scaleX(-1); }
.laurel figcaption { display: grid; justify-items: center; text-align: center; gap: 2px; max-width: 190px; line-height: 1.2; }
.laurel strong { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; }
.laurel__label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.js .laurel ellipse { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale 0.55s var(--ease-out); transition-delay: calc(0.25s + var(--i) * 70ms); }
.js .laurel.is-in ellipse { scale: 1; }
.js .laurel__stem { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) 0.1s; }
.js .laurel.is-in .laurel__stem { stroke-dashoffset: 0; }

/* ----------------------------------------------------------------- player */

.player { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.player .frame { border-radius: 0; }
.player.is-playing { aspect-ratio: 16 / 9; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 24px 8px 8px;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #0e0e0e;
  font-weight: 600;
  font-size: 0.92rem;
  transition: scale 0.5s var(--ease-out);
}
.player__play:hover { scale: 1.06; }
.player__icon { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); flex: none; }
.player__icon::after { content: ""; position: absolute; left: 53%; top: 50%; translate: -50% -50%; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #0e0e0e; }
.player__icon::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--accent); animation: pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse { from { opacity: 0.9; scale: 0.85; } to { opacity: 0; scale: 1.5; } }

/* Clean YouTube player (main.js cleanYouTube): iframe at the bottom, our poster on top while
   loading / paused / ended, a click layer that keeps YouTube's hover UI away, and our own bar. */
.player.yt .frame { position: absolute; inset: 0; z-index: 1; height: 100%; aspect-ratio: auto; transition: opacity 0.6s var(--ease-out); }
.player.yt.is-live .frame { opacity: 0; pointer-events: none; }
.player.yt.is-paused .frame, .player.yt.is-ended .frame { opacity: 1; }
.yt-hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.player.yt .player__play { z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.4s, scale 0.5s var(--ease-out); }
.player.yt.is-paused .player__play, .player.yt.is-ended .player__play { opacity: 1; pointer-events: auto; }
.player.yt.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent); animation: yt-spin 0.9s linear infinite; }
@keyframes yt-spin { to { rotate: 1turn; } }
.yt-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 12px; padding: 40px clamp(12px, 2vw, 22px) 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  opacity: 0; transition: opacity 0.5s;
}
.player.yt.is-awake .yt-bar, .player.yt.is-paused .yt-bar, .player.yt:focus-within .yt-bar { opacity: 1; }
.player.yt.is-loading .yt-bar { opacity: 0; pointer-events: none; }
.player.yt.is-live:not(.is-awake):not(:focus-within) { cursor: none; }
.player.yt.is-live:not(.is-awake):not(:focus-within) .yt-hit { cursor: none; }
.yt-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: var(--ink); transition: background 0.3s; }
.yt-btn:hover, .yt-btn:focus-visible { background: rgba(255, 255, 255, 0.14); }
.yt-time { flex: none; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(246, 244, 240, 0.85); }
.yt-seek { flex: 1; min-width: 40px; height: 18px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --p: 0%; }
.yt-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, 0.28) var(--p)); }
.yt-seek::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, 0.28) var(--p)); }
.yt-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--ink); }
.yt-seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--ink); }
/* Icons drawn in CSS: play, pause, sound, muted, full screen. */
.yt-ico { position: relative; display: block; width: 14px; height: 14px; }
.yt-ico--play::before { content: ""; position: absolute; left: 2px; top: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.yt-ico--pause::before, .yt-ico--pause::after { content: ""; position: absolute; top: 0; width: 4px; height: 14px; border-radius: 1px; background: currentColor; }
.yt-ico--pause::before { left: 2px; } .yt-ico--pause::after { right: 2px; }
.yt-ico--sound::before, .yt-ico--muted::before { content: ""; position: absolute; left: 0; top: 0; border-style: solid; border-width: 7px 8px 7px 0; border-color: transparent currentColor transparent transparent; }
.yt-ico--sound::after { content: ""; position: absolute; left: 9px; top: 3px; width: 5px; height: 8px; border: 2px solid currentColor; border-left: 0; border-radius: 0 8px 8px 0; }
.yt-ico--muted::after { content: "×"; position: absolute; left: 9px; top: -4px; font-size: 15px; font-weight: 700; line-height: 1; }
.yt-ico--full { border: 2px solid currentColor; border-radius: 2px; clip-path: polygon(0 0, 40% 0, 40% 15%, 60% 15%, 60% 0, 100% 0, 100% 40%, 85% 40%, 85% 60%, 100% 60%, 100% 100%, 60% 100%, 60% 85%, 40% 85%, 40% 100%, 0 100%, 0 60%, 15% 60%, 15% 40%, 0 40%); }
/* Autoplay blocked by the browser: step aside so YouTube's own play button can be pressed. */
.player.yt.is-fallback .frame, .player.yt.is-fallback .yt-hit, .player.yt.is-fallback .yt-bar, .player.yt.is-fallback::after { display: none; }
.player.yt:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
@media (max-width: 560px) { .yt-bar { gap: 6px; } .yt-time[data-yt="dur"] { display: none; } }
.player__soon { position: absolute; right: 18px; top: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.8rem; font-weight: 500; }

/* -------------------------------------------------------------- page head */

.page-head { padding-top: clamp(130px, 17vw, 200px); padding-bottom: clamp(36px, 5vw, 64px); }
.page-head .lead { margin-top: 4px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.filters button { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; font-weight: 600; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.filters button:hover { border-color: rgba(255, 255, 255, 0.35); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #0e0e0e; border-color: var(--ink); }

/* ---------------------------------------------------------------- project */

.project__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.project__synopsis p:not(.eyebrow) { font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.7; color: #d9d6d0; margin-bottom: 1.1em; max-width: 62ch; }
.project__links { display: flex; flex-wrap: wrap; gap: 8px; }
.facts { display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts > div:first-child { padding-top: 0; }
.facts dt { color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.facts dd { font-weight: 600; font-size: 0.95rem; }
.facts a { color: var(--accent); }
.project__facts .laurels { justify-content: center; }
.project__poster { margin: 0 auto 28px; max-width: 300px; }
.project__poster img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); }

.credits-section { text-align: center; }
.credits-section .eyebrow { margin-bottom: 36px; }
.credits--roll { display: grid; gap: 16px; max-width: 780px; margin-inline: auto; }
.credits--roll > div { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
.credits--roll dt { text-align: right; color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
.credits--roll dd { font-weight: 600; font-size: 1.02rem; }
.credits--roll a:hover { color: var(--accent); }

.stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stills figure { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; }
.stills img { width: 100%; height: 100%; object-fit: cover; }

.next-film { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); }
.next-film a { display: grid; gap: 6px; padding-block: clamp(40px, 6vw, 72px); }
.next-film__title { font-size: clamp(2rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; transition: color 0.4s; }
.next-film__title span { display: inline-block; transition: transform 0.5s var(--ease-out); }
.next-film a:hover .next-film__title { color: var(--accent); }
.next-film a:hover .next-film__title span { transform: translateX(14px); }

/* ------------------------------------------------------------------ about */

.about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 6vw, 88px); align-items: start; }
.about__portrait { aspect-ratio: 4 / 5; border-radius: var(--r-lg); position: sticky; top: 110px; }
.about__portrait img { filter: grayscale(1) contrast(1.05); transition: filter 0.8s var(--ease-out); }
.about__portrait:hover img { filter: none; }
.about__text p:not(.eyebrow):not(.lead) { color: #d9d6d0; line-height: 1.75; margin-top: 1.1em; max-width: 60ch; }
.about__text .lead { margin-top: 0; }
.about .h-display { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline p { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; }

.press { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.press a { display: grid; gap: 6px; padding: 24px 28px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.5s var(--ease-out); }
.press a:hover { border-color: var(--accent); transform: translateY(-3px); }
.press__meta { color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.press__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.clients { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 40px; font-weight: 700; font-size: 1.2rem; }

/* --------------------------------------------------------------- services */

.services { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.service { display: grid; grid-template-columns: 80px 1.3fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; scroll-margin-top: 110px; transition: border-color 0.4s; }
.prose h2[id] { scroll-margin-top: 110px; }
.service:hover { border-color: rgba(255, 90, 31, 0.5); }
.service h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 10px; }
.service__for { color: var(--accent-soft); font-weight: 500; margin-bottom: 12px; }
.service__main p:not(.service__for) { color: #d0cdc7; line-height: 1.7; }
.service__side { display: grid; gap: 20px; justify-items: start; }
.service h2 a { transition: color 0.3s; }
.service h2 a:hover { color: var(--accent); }
.service__main .service__more { margin-top: 14px; }
.service__more .link-arrow { color: var(--ink); }

/* Service landing page (/services/<slug>/) */
.service-aside .eyebrow:not(:first-child) { margin-top: 26px; }
.service-aside__for { color: #d0cdc7; line-height: 1.6; }
.service-aside .actions { margin-top: 30px; }
.service-links { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.service-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; transition: color 0.3s; }
.service-links a span:last-child { color: var(--accent); transition: transform 0.4s var(--ease-out); }
.service-links a:hover { color: var(--accent); }
.service-links a:hover span:last-child { transform: translateX(8px); }

/* ------------------------------------------------------------------- blog */

.posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.post-card__link { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); transition: border-color 0.4s; }
.post-card__link:hover { border-color: rgba(255, 90, 31, 0.5); }
.post-card__media { border-radius: var(--r-md); }
.post-card__media img, .post-card__media .frame__ph { filter: grayscale(1) contrast(1.06); transition: filter 0.7s var(--ease-out), transform 1.1s var(--ease-out); }
.post-card__link:hover .post-card__media img, .post-card__link:hover .post-card__media .frame__ph,
.post-card__link:focus-visible .post-card__media img { filter: none; transform: scale(1.04); }
.post-card__text { padding: 8px clamp(4px, 1.5vw, 20px) 8px 0; }
.post-card__meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
.post-card__title { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; margin-bottom: 12px; transition: color 0.3s; }
.post-card__link:hover .post-card__title { color: var(--accent); }
.post-card__desc { color: #d0cdc7; line-height: 1.6; max-width: 58ch; }

.post .h-display { font-size: clamp(2.2rem, 5.6vw, 5rem); line-height: 1.02; max-width: 18ch; }
.post__cover { margin: 0 0 clamp(40px, 5vw, 64px); }
.post__cover .frame { border-radius: var(--r-lg); }

/* Long-form reading: one comfortable column. */
.prose { max-width: 68ch; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.75; color: #d9d6d0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; color: var(--ink); font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.prose h3 { margin-top: 1.8em; color: var(--ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color 0.3s; }
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose blockquote { padding-left: 1.2em; border-left: 2px solid var(--accent); color: var(--ink); font-size: 1.1em; }
.prose figure img { width: 100%; height: auto; border-radius: var(--r-md); }
.prose figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.prose code { font-size: 0.9em; padding: 2px 6px; border-radius: 6px; background: var(--panel-2); }
.post__updated { font-size: 0.85rem; color: var(--muted); }

/* Blog motion, in film language: post cards open like a frame and flicker on hover,
   the cover racks into focus, scene numbers draw in, and a film strip runs as you read. */
.js .post-card[data-reveal] .post-card__media { clip-path: inset(9% 9% 9% 9% round var(--r-md)); transition: clip-path 1.3s var(--ease-out); transition-delay: inherit; }
.js .post-card[data-reveal].is-in .post-card__media { clip-path: inset(0 0 0 0 round var(--r-md)); }
.post-card__link:hover .post-card__media { animation: flicker 0.5s linear; }

.js .post__cover img { animation: rack-cover 2.2s var(--ease-out) var(--d0) both; }
@keyframes rack-cover { from { filter: grayscale(1) contrast(1.15) blur(20px); opacity: 0; transform: scale(1.05); } }

.prose { counter-reset: scene; }
.prose h2::before {
  counter-increment: scene;
  content: "#" counter(scene, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  padding-bottom: 12px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--accent), transparent 70%) left bottom / 100% 1px no-repeat;
}
.js .prose h2[data-reveal]::before { background-size: 0% 1px; transition: background-size 1.4s var(--ease-out) 0.25s; }
.js .prose h2[data-reveal].is-in::before { background-size: 100% 1px; }

.reel-progress { position: fixed; inset: 0 0 auto; z-index: 90; height: 5px; pointer-events: none; }
.reel-progress span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 16px, transparent 16px 20px); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }

.process { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.process li { display: grid; gap: 10px; align-content: start; }
.process strong { font-size: 1.2rem; letter-spacing: -0.02em; }
.process p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }

/* ----------------------------------------------------------------- guides */

/* Free PDF guides. The cover sits like a sheet of paper on a desk: it lands (rotates into place)
   when it scrolls in and lifts on hover. `rotate` and `translate` are separate properties so the
   reveal and the hover never fight over `transform`. */
.guide-cover { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1273; object-fit: cover; border-radius: 10px; background: var(--panel-2); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.07); }
.guide-cover--empty { display: grid; align-items: end; padding: 12%; background: radial-gradient(90% 60% at 90% 100%, var(--accent), #6e2a12 40%, #1f1f1f 80%); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.1; }

.guides { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guide-card__link { display: grid; gap: 10px; align-content: start; height: 100%; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); transition: border-color 0.4s; }
.guide-card__link:hover { border-color: rgba(255, 90, 31, 0.5); }
.guide-card__paper { display: block; width: 70%; margin: 8px auto 20px; rotate: -2deg; transition: rotate 1.2s var(--ease-out), translate 0.7s var(--ease-out); }
.js .guide-card[data-reveal]:not(.is-in) .guide-card__paper { rotate: -9deg; }
.guide-card__link:hover .guide-card__paper, .guide-card__link:focus-visible .guide-card__paper { rotate: 0deg; translate: 0 -8px; }
.guide-card__meta { font-size: 0.8rem; color: var(--muted); }
.guide-card__title { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; transition: color 0.3s; }
.guide-card__link:hover .guide-card__title { color: var(--accent); }
.guide-card__for { color: #d0cdc7; font-size: 0.92rem; line-height: 1.55; }
.section .guides { margin-top: 20px; }

/* Landing page: the cover beside the panel with the download button. */
.guide { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.guide__paper { margin: 0; width: 100%; max-width: 440px; justify-self: center; position: sticky; top: 110px; }
.guide__paper .guide-cover { rotate: -1.5deg; transition: rotate 1.4s var(--ease-out); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.07); }
.js .guide__paper[data-reveal]:not(.is-in) .guide-cover { rotate: -8deg; }
.guide__panel .eyebrow:not(:first-child) { margin-top: 26px; }
.guide__inside { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.guide__inside li { position: relative; padding-left: 28px; color: #d9d6d0; line-height: 1.55; }
.guide__inside li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 13px; height: 13px; border: 1.5px solid var(--accent); border-radius: 4px; }
.guide__panel .actions { margin-top: 32px; }
.guide__small { margin-top: 16px; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.guide__small a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.guide__talk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; }
.guide__talk .link-arrow { color: var(--accent); }

/* Promo band on service, film and blog pages. */
.guide-promos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.guide-promo { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: center; padding: clamp(18px, 2.6vw, 32px) clamp(20px, 3.5vw, 48px); border-radius: var(--r-lg); background: radial-gradient(70% 140% at 0% 100%, rgba(255, 90, 31, 0.16), transparent 70%), var(--panel); border: 1px solid var(--line); transition: border-color 0.4s; }
.guide-promo:hover { border-color: rgba(255, 90, 31, 0.5); }
.guide-promo__paper { display: block; rotate: -4deg; transition: rotate 0.7s var(--ease-out), translate 0.7s var(--ease-out); }
.guide-promo:hover .guide-promo__paper, .guide-promo:focus-visible .guide-promo__paper { rotate: 0deg; translate: 0 -6px; }
.guide-promo__text { display: grid; gap: 10px; justify-items: start; }
.guide-promo__text .eyebrow { margin: 0; }
.guide-promo__title { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; transition: color 0.3s; }
.guide-promo:hover .guide-promo__title { color: var(--accent); }
.guide-promo__lede { color: #d0cdc7; line-height: 1.6; max-width: 62ch; }
.guide-promo .link-arrow { margin-top: 4px; color: var(--ink); }

/* ------------------------------------------------------------------ tools */

/* Free tools: light calendar, planner, cost estimator, locations, events (src/templates/tools.mjs). */
.tool { display: grid; gap: 28px; }
.tool__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.field > span { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.field input[type="range"] { padding: 0; height: 28px; border: 0; background: transparent; accent-color: var(--accent); }
.field input[type="date"] { color-scheme: dark; }
.tool__h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 20px; }
.tool__note { margin-top: 14px; color: var(--muted); font-size: 0.86rem; line-height: 1.6; max-width: 70ch; }
.tool__sources { padding-left: 1.2em; color: var(--muted); font-size: 0.86rem; line-height: 1.8; }
.tool__sources a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.table-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); }

/* Light calendar: a 24-hour strip of night, blue, golden and day. */
.light__strip {
  height: 14px; border-radius: 999px;
  background: linear-gradient(90deg,
    #11131c 0 var(--dawn, 25%), #2a4a7a var(--dawn, 25%) var(--blue-end, 26%), #6a5a7a var(--blue-end, 26%) var(--rise, 27%),
    #ff9a3c var(--rise, 27%) var(--golden-end, 30%), #f3e3c3 var(--golden-end, 30%) var(--golden-start, 75%),
    #ff9a3c var(--golden-start, 75%) var(--set, 78%), #6a5a7a var(--set, 78%) var(--blue-start, 79%), #2a4a7a var(--blue-start, 79%) var(--dusk, 80%), #11131c var(--dusk, 80%) 100%);
}
.light__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.light__list { margin: 10px 0 0; display: grid; }
.light__slot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.light__slot dt { color: var(--muted); font-size: 0.9rem; }
.light__slot dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.light__slot--goldenAm dd, .light__slot--goldenPm dd { color: #ffb36b; }
.light__slot--blueAm dd, .light__slot--bluePm dd { color: #8fb3ff; }
.light__length { color: var(--muted); }
.light__length strong { color: var(--ink); }
.light__year { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.light__year th, .light__year td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.light__year thead th { color: var(--muted); font-size: 0.78rem; font-weight: 600; background: var(--panel); }
.light__year tbody th { font-weight: 600; }
.light__year td:nth-child(3), .light__year td:nth-child(4) { color: #ffb36b; }

/* Planner and estimator: answers as chips. */
.planner { gap: 34px; }
.planner__q { border: 0; padding: 0; margin: 0; }
.planner__q legend { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.planner__n { color: var(--accent); font-size: 0.8rem; margin-right: 6px; vertical-align: middle; }
.planner__a, .cost__extras { display: flex; flex-wrap: wrap; gap: 10px; }
.cost__extras { border: 0; padding: 0; margin: 0; }
.cost__extras legend { margin-bottom: 12px; }
.choice-chip { position: relative; display: inline-flex; cursor: pointer; }
.choice-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-chip span { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); font-size: 0.92rem; line-height: 1.35; transition: border-color 0.3s, background 0.3s, color 0.3s; }
.choice-chip:hover span { border-color: rgba(255, 255, 255, 0.3); }
.choice-chip input:checked + span { background: var(--ink); color: #0e0e0e; border-color: var(--ink); }
.choice-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.planner__result { padding-top: 28px; border-top: 1px solid var(--line); }
.planner__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em; margin: 6px 0 10px; }
.planner__advice { color: #d9d6d0; line-height: 1.7; max-width: 62ch; }
.planner__more { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; }
.planner__more .link-arrow { color: var(--accent); }
.planner__again { margin-top: 20px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cost__range { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; color: var(--accent); }

/* Locations */
.places { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.place { display: grid; gap: 10px; align-content: start; padding: 14px 14px 22px; }
.place > :not(.place__img) { margin-inline: 8px; }
.place__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); margin-bottom: 6px; }
.place__img--empty { display: grid; place-items: end start; padding: 16px; background: radial-gradient(90% 80% at 90% 100%, rgba(255, 90, 31, 0.45), transparent 70%), var(--panel-2); color: var(--accent-soft); font-size: 0.8rem; font-weight: 600; }
.place[data-faces="sunrise"] .place__img--empty { background: radial-gradient(90% 80% at 10% 100%, rgba(255, 154, 60, 0.45), transparent 70%), var(--panel-2); }
.place__area { color: var(--muted); font-size: 0.8rem; }
.place__name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.place__text { color: #d0cdc7; line-height: 1.6; font-size: 0.95rem; }
.place__facts { display: grid; gap: 6px; margin: 4px 0 0; font-size: 0.86rem; }
.place__facts div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.place__facts dt { color: var(--muted); }
.place__facts dd { font-weight: 600; }
.place__links { font-size: 0.86rem; color: var(--muted); }
.place__links a { color: var(--accent); }

/* Events calendar */
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px; }
.events__month { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.events__name { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.035em; position: sticky; top: 110px; align-self: start; }
.events__month > ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.event { display: grid; gap: 8px; }
.event__when { color: var(--accent-soft); font-size: 0.86rem; font-weight: 600; }
.event__next { color: var(--muted); font-weight: 500; }
.event__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.event__text { color: #d0cdc7; line-height: 1.65; }
.event__crowds { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.event__crowds--high { color: #ff8a65; }
.seasons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.seasons h3 { font-size: 1.15rem; font-weight: 700; margin: 6px 0 8px; }
.seasons p:not(.eyebrow) { color: #d0cdc7; line-height: 1.6; font-size: 0.95rem; }

@media (max-width: 820px) {
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events__month { grid-template-columns: 1fr; gap: 12px; }
  .events__name { position: static; }
}
@media (max-width: 560px) {
  .light__grid { grid-template-columns: 1fr; }
  .places { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- CTA band */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: clamp(36px, 6vw, 84px);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, #d4430f 0%, #8f240a 50%, #2a0904 100%);
}
.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  right: -12%;
  top: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 70, 0.8), rgba(255, 140, 70, 0) 65%);
  animation: glow-drift 14s ease-in-out infinite alternate;
}
.cta-band::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; }
.cta-band .eyebrow { color: #ffd6c2; margin: 0; }
.cta-band__title { font-size: clamp(2.2rem, 5.6vw, 5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; max-width: 14ch; }
.cta-band__text { color: rgba(255, 255, 255, 0.82); max-width: 52ch; }
.cta-band .pill { margin-top: 10px; }

/* ---------------------------------------------------------------- contact */

.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact .h-display { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.contact .facts { margin-top: 36px; }
.contact__form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.3s, background 0.3s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a6a29b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.field option { background: var(--panel-2); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.22); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #232120; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.form-status { font-size: 0.9rem; color: var(--muted); }
.form-status.is-ok { color: #8fd18f; }
.form-status.is-error { color: #ff8a65; }
.form-note { margin-top: 14px; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.form-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
[aria-busy="true"] .pill { opacity: 0.6; pointer-events: none; }

/* ------------------------------------------------------------ reel dialog */

.reel-dialog { width: min(94vw, 1400px); padding: 0; border: 0; border-radius: var(--r-lg); background: #000; color: var(--ink); overflow: hidden; }
.reel-dialog::backdrop { background: rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reel-dialog__frame { aspect-ratio: 16 / 9; }
.reel-dialog__frame iframe { width: 100%; height: 100%; border: 0; }
.reel-dialog__close { position: absolute; top: 12px; right: 12px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #0e0e0e; font-weight: 600; font-size: 0.82rem; }

/* ----------------------------------------------------------------- footer */

.site-footer { padding-top: clamp(80px, 10vw, 140px); }
.end-credits { text-align: center; padding-block: clamp(64px, 9vw, 120px) clamp(40px, 5vw, 64px); }
.end-credits .eyebrow { margin-bottom: 32px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0 32px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--dim); }
.tc { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
.tc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0.15; } }

/* ------------------------------------------------------------------ intro */

.intro { display: none; }
.has-intro .intro { display: block; position: fixed; inset: 0; z-index: 200; cursor: pointer; }
.intro-done .intro { display: none; }
.intro__bar { position: absolute; left: 0; right: 0; height: 50.5%; background: #050505; animation: shutter-top 1.05s var(--ease-in-out) 2.05s forwards; }
.intro__bar--top { top: 0; }
.intro__bar--bottom { bottom: 0; animation-name: shutter-bottom; }
@keyframes shutter-top { to { transform: translateY(-100%); } }
@keyframes shutter-bottom { to { transform: translateY(100%); } }
.intro__text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 12px; padding: 24px; animation: fade-out 0.45s ease 1.7s forwards; }
.intro__pre { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: fade-up 0.9s var(--ease-out) 0.2s forwards; }
.intro__name { font-size: clamp(1.7rem, 4.6vw, 3.4rem); font-weight: 400; letter-spacing: -0.035em; opacity: 0; animation: fade-up 1s var(--ease-out) 0.65s forwards; }
.intro__name strong { font-weight: 800; }
.intro__skip { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font-size: 0.72rem; color: var(--dim); animation: fade-out 0.3s 1.7s forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------------------------------------------------------- scroll reveal */

.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .card[data-reveal] .card__media { clip-path: inset(9% 9% 9% 9% round var(--r-md)); transition: clip-path 1.3s var(--ease-out); transition-delay: inherit; }
.js .card[data-reveal].is-in .card__media { clip-path: inset(0 0 0 0 round var(--r-md)); }
.js .laurel[data-reveal] { transform: none; }

/* Words light up as the heading scrolls through the viewport. */
/* Unlit words stay readable (--dim passes WCAG AA); lit words go to --ink. */
.js .lit .w { color: var(--dim); transition: color 0.5s ease; }
.js .lit .w.on { color: var(--ink); }

/* Custom "Watch" cursor over film cards (fine pointers only). */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
    border-radius: 50%;
    background: var(--accent);
    color: #0e0e0e;
    font-size: 0.82rem;
    font-weight: 700;
    pointer-events: none;
    translate: var(--cx, -200px) var(--cy, -200px);
    scale: 0;
    transition: scale 0.45s var(--ease-out);
  }
  .cursor.is-on { scale: 1; }
  .cursor-hidden, .cursor-hidden * { cursor: none; }
}

/* ----------------------------------------------------- page transitions */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.35s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 0.6s var(--ease-out) both; }
::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: var(--ease-out); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* ------------------------------------------------------------- responsive */

/* Tablet widths: tighter header so the name stays on one line next to the nav and the CTA. */
.brand__name { white-space: nowrap; }
@media (max-width: 1040px) {
  .site-header__bar { gap: 18px; }
  .site-nav { gap: 18px; }
}

@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .service { grid-template-columns: 60px 1fr; }
  .service__side { grid-column: 2; }
}

@media (max-width: 820px) {
  .site-header { padding: 10px 12px; }
  .site-header__bar { padding-left: 6px; }
  .is-scrolled .site-header__bar { max-width: 100%; }
  .brand__name { font-size: 0.92rem; }
  [data-header-cta] { display: none; }
  .menu-toggle { position: relative; z-index: 2; display: grid; place-items: center; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; background: #fff; }
  .menu-toggle__lines, .menu-toggle__lines::before { display: block; width: 18px; height: 1.8px; background: #0e0e0e; border-radius: 2px; transition: transform 0.45s var(--ease-out); }
  .menu-toggle__lines { position: relative; transform: translateY(-3px); }
  .menu-toggle__lines::before { content: ""; position: absolute; top: 6px; }
  .nav-open .menu-toggle__lines { transform: translateY(0) rotate(45deg); }
  .nav-open .menu-toggle__lines::before { transform: translateY(-6px) rotate(-90deg); }
  .nav-open .site-header__bar { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--gutter);
    margin: 0;
    background: var(--bg);
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    clip-path: circle(0 at calc(100% - 40px) 34px);
    visibility: hidden;
    transition: clip-path 0.7s var(--ease-in-out), visibility 0s 0.7s;
  }
  .nav-open .site-nav { clip-path: circle(150% at calc(100% - 40px) 34px); visibility: visible; transition: clip-path 0.7s var(--ease-in-out), visibility 0s; }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current] { color: var(--accent); }
  .site-nav__contact { display: block; }
  .site-nav { align-items: flex-start; }
  .lang-switch { margin-top: 28px; font-size: 0.85rem; letter-spacing: 0.04em; }
  .site-nav .lang-switch a { padding: 8px 16px; }
  .nav-open { overflow: hidden; }

  .hero { min-height: max(680px, 100svh); }
  .hero__inner { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; padding-top: 120px; }
  .hero__title { align-self: end; font-size: clamp(3.4rem, 17vw, 6rem); }
  .hero__aside { justify-self: start; max-width: 460px; padding-top: 28px; }
  .hero__services { grid-template-columns: repeat(2, 1fr); margin-top: 36px; row-gap: 20px; }
  .lens { width: 78vw; right: -18vw; top: 26%; opacity: 0.75; }
  .reel3d { width: 82vw; right: -20vw; top: 25%; opacity: 0.9; }
  .hero__portrait { height: 70%; translate: -50% 0; opacity: 0.9; }

  .strip__inner { flex-direction: column; align-items: stretch; gap: 20px; }

  .split, .spotlight, .project__grid, .about, .contact { grid-template-columns: 1fr; }
  .about__portrait { position: relative; top: 0; max-width: 420px; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .stills { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .post-card__link { grid-template-columns: 1fr; gap: 16px; }
  .post-card__text { padding: 0 8px 10px; }
  .guide { grid-template-columns: 1fr; }
  .guide__paper { position: relative; top: 0; max-width: 300px; }
  .guide-promo { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
}

@media (max-width: 560px) {
  .guides { grid-template-columns: 1fr; }
  .guide-card__paper { width: 62%; }
  .guide-promo { grid-template-columns: 1fr; }
  .guide-promo__paper { width: 120px; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .card .card__media { aspect-ratio: 4 / 4.4; }
  .process { grid-template-columns: 1fr; }
  .service { grid-template-columns: 1fr; }
  .service__side { grid-column: auto; }
  .field-row { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 96px 1fr; }
  .credits--roll > div { grid-template-columns: 1fr; gap: 2px; text-align: center; }
  .credits--roll dt { text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .pill { height: 44px; }
}

/* Phones: the same entrance, shorter, so the first screen settles fast (no intro there either, see layout.mjs). */
@media (max-width: 767px) {
  .js .rise { animation-duration: 0.7s; animation-delay: calc(var(--d0) + var(--i, 0) * 45ms); }
  .js .rise-soft { animation-duration: 0.6s; animation-delay: calc(var(--d0) + var(--i, 0) * 45ms); }
  .lens, .reel3d { animation-duration: 1.1s; }
  .hero__portrait { animation-duration: 1.1s, 30s; }
}

/* ---------------------------------------------------------- reduced motion */

/* `.force-motion` (set by ?motion=on) lets the owner preview animations on a reduced-motion system. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.force-motion) { scroll-behavior: auto; }
  :root:not(.force-motion) *, :root:not(.force-motion) *::before, :root:not(.force-motion) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  :root:not(.force-motion) [data-reveal] { opacity: 1; transform: none; }
  :root:not(.force-motion) .card[data-reveal] .card__media,
  :root:not(.force-motion) .post-card[data-reveal] .post-card__media { clip-path: none; }
  :root:not(.force-motion) .lit .w { color: var(--ink); }
  :root:not(.force-motion) .marquee { -webkit-mask: none; mask: none; flex-wrap: wrap; }
  :root:not(.force-motion) .marquee__track { animation: none; flex-wrap: wrap; row-gap: 16px; }
  :root:not(.force-motion) .marquee__track[aria-hidden] { display: none; }
  :root:not(.force-motion)::view-transition-group(*),
  :root:not(.force-motion)::view-transition-old(*),
  :root:not(.force-motion)::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------- director's site: words, on set, press kit */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.quote { margin: 0; display: grid; gap: 24px; align-content: space-between; }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; letter-spacing: -0.01em; }
.quote blockquote p::before { content: '“'; display: block; color: var(--accent); font-size: 3rem; line-height: 0.6; margin-bottom: 14px; font-weight: 800; }
.quote figcaption { display: grid; gap: 2px; font-size: 0.92rem; }
.quote figcaption span { color: var(--muted); }

.process--3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.statement__text p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--ink); margin: 0 0 1em; }
.gallery__lede { max-width: 60ch; margin-bottom: 28px; }
.stills figure { position: relative; margin: 0; }
.stills figcaption { position: absolute; inset: auto 0 0; padding: 28px 16px 12px; font-size: 0.82rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { color: var(--muted); font-size: 0.78rem; font-weight: 600; background: var(--panel); white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:first-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.data-table a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.press-kit__gap { margin-top: 32px; }
.press-kit__note { margin-top: 18px; font-size: 0.9rem; }
.press-kit-link { margin: -4px 0 20px; }
.press-images { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.press-images a { display: grid; gap: 8px; padding: 10px 10px 16px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); transition: border-color 0.3s; }
.press-images a:hover { border-color: var(--accent); }
.press-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-md) - 8px); }
.press-images .press__meta, .press-images__title { padding: 0 6px; }
.press-images__title { font-weight: 600; font-size: 0.95rem; }

@media (max-width: 980px) {
  .process--3 { grid-template-columns: 1fr; }
  .press-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .data-table th, .data-table td { padding: 12px 14px; }
}