/* ------------------------------------------------------------------
   SUBSTANC — built from Figma "Website Final" (555:2918), 1820px frame.
   --u is one Figma pixel for layout: 1px at 1820 wide and up (wider screens
   get more room around the design, not a bigger design), shrinking below that.
   --t is the same unit for type, buttons and the nav, but it stops shrinking
   at 80% so text stays readable on smaller laptops. Only the hero picture
   fills the whole window. Below 1024 the layout re-flows (end of this file).
   ------------------------------------------------------------------ */

:root {
  --u: min(1px, 100vw / 1820);
  --t: max(var(--u), 0.8px);
  --pk: 1; /* nav pill scale */
  --ink: #250d12;
  --white: #ffffff;
  --paper: #f9f9f9;
  --wine: #290f14;
  --wine-card: #49131f;
  --footer: #210c10;
  --accent: #ff0048;

  /* Emil Kowalski's curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html:has(dialog[open]),
html.intro { overflow: hidden; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; font: inherit; }
ol, ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.frame {
  position: relative;
  width: calc(1820 * var(--u));
  margin-inline: auto;
}

.logo-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- Type ---------- */

.eyebrow {
  font-size: calc(18 * var(--t)); /* Figma's 24, three quarters */
  font-weight: 600;
  line-height: calc(16.5 * var(--t)); /* 90%, on Figma's rounded box */
  letter-spacing: 0.12em;
  color: var(--white);
  opacity: 0.7;
  white-space: pre;
}
.eyebrow.dark { color: var(--ink); }
.eyebrow.small {
  font-size: calc(15 * var(--t));
  line-height: calc(13.5 * var(--t));
  text-transform: uppercase;
  opacity: 0.6;
}

.h2 {
  font-size: calc(72 * var(--t));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.h2.light { color: var(--white); }
.h2.tight { line-height: 0.96; }

.line { display: block; }

.body-lg {
  font-size: calc(24 * var(--t));
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--white);
}
.body-lg.dark { color: var(--ink); }
.body-lg strong { font-weight: 700; }

/* CSS adds letter-spacing after the last glyph too; Figma doesn't. On centred
   text that shifts every line by half the spacing — these put it back. */
.c-eyebrow { padding-left: 0.12em; }
.c-h { padding-right: 0.05em; }
.c-body { padding-right: 0.02em; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(12 * var(--t));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #000;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease,
    color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn > span { margin-right: 0.03em; } /* trailing letter-spacing, see .c-h */
.btn:active { transform: scale(0.97); }

.btn-light { background: var(--white); }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-cta {
  width: calc(169.54 * var(--t));
  height: calc(59.14 * var(--t));
  font-size: calc(19.714 * var(--t));
  padding: calc(15.771 * var(--t)) calc(23.657 * var(--t));
}

.btn-nav,
.btn-card {
  font-size: calc(19.714 * var(--t));
  padding: calc(15.771 * var(--t)) calc(23.657 * var(--t));
}
.btn-nav { width: calc(169.54 * var(--t)); height: calc(59.14 * var(--t)); }
.btn-card { width: calc(214 * var(--t)); height: calc(59 * var(--t)); gap: calc(6 * var(--t)); }

/* Hover, after goodspeed.studio: each word of a label rolls up out of its
   window as a copy rolls in from below, 30ms apart (script.js builds the
   windows). clip-path only trims top and bottom, so glyph edges stay whole. */
.roll {
  position: relative;
  display: inline-block;
  clip-path: inset(0 -0.3em);
}
.roll > span {
  display: inline-block;
  transition: transform 600ms var(--ease-out) calc(var(--w) * 30ms);
}
.roll > span + span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(100%);
  user-select: none;
}

/* The arrow leaves the way it points — up and to the right — while its twin
   arrives from the bottom left, on a spring with a hint of overshoot. */
.btn > .arrow { margin-right: 0; }
.arrow {
  position: relative;
  display: block;
  width: calc(24 * var(--t));
  height: calc(24 * var(--t));
  flex: none;
  overflow: hidden;
  overflow: clip;
}
.arrow svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.34, 1.3, 0.64, 1);
  transition: transform 600ms linear(0, 0.048 3.3%, 0.162 6.7%, 0.461 13.3%, 0.604 16.7%, 0.729 20%, 0.831 23.3%, 0.91 26.7%, 0.967 30%, 1.006 33.3%, 1.03 36.7%, 1.042 40%, 1.044 46.7%, 1.005 70%, 0.998 96.7%, 1);
}
.arrow svg + svg { transform: translate(-100%, 100%); }

@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { background: #efecec; }
  .btn-accent:hover { background: #e60041; }
  .btn:hover .roll > span:first-child { transform: translateY(-100%); }
  .btn:hover .roll > span + span { transform: none; }
  .btn-arrow:hover .arrow svg:first-child { transform: translate(100%, -100%); }
  .btn-arrow:hover .arrow svg + svg { transform: none; }
  .ma-links a:hover { opacity: 0.6; }
}

/* ---------- Nav ----------
   Two states of one nav. A is the Figma hero nav, pixel for pixel, over the
   hero card. B is the compact glass pill. Scrolling through the hero scrubs a
   morph between them (script.js): each item travels and resizes to its place
   in the other state while the two crossfade behind a touch of blur, and the
   pill's glass gathers around them. Scrolling back up reverses it. */

.nav {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto 0;
  height: 0; /* only its children take space — nothing invisible blocks the page */
}
.nav :is(a, button) { pointer-events: auto; }
.nav [inert] :is(a, button) { pointer-events: none; }

/* A · the Figma hero nav */
.nav-a {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  top: calc(24 * var(--u));
  height: calc(122 * var(--u));
  color: var(--white);
}
.ma { position: absolute; }
.ma-logo {
  left: calc(96 * var(--u));
  top: calc(37.5 * var(--u));
  width: calc(275 * var(--u));
  height: calc(47 * var(--u));
}
.nav-logo { display: block; width: 100%; height: 100%; color: var(--white); }
html.intro .nav-logo { visibility: hidden; } /* the reveal's logo flies in and lands here */

/* The links sit midway between the logo and Book a Call (as in Figma), 32 apart. */
.ma-nav {
  position: absolute;
  left: calc(50% + 137.5 * var(--u) - 84.77 * var(--t));
  top: calc((122 * var(--u) - 22.5 * var(--t)) / 2);
  transform: translateX(-50%);
  font-size: calc(16 * var(--t));
  line-height: calc(22.5 * var(--t));
}
.ma-links { display: flex; gap: calc(32 * var(--t)); }
.ma-nav .ma { position: relative; white-space: nowrap; }
.ma-links a { display: block; transition: opacity 200ms ease; }
.ma-cta {
  right: calc(96 * var(--u));
  top: calc((122 * var(--u) - 59.14 * var(--t)) / 2);
}
.ma-menu { display: none; }

/* B · the compact glass pill */
.nav-b {
  position: absolute;
  top: calc(16px * var(--pk));
  left: 0;
  right: 0;
  width: fit-content;
  height: calc(56px * var(--pk));
  margin: 0 auto;
  padding: 0 calc(8px * var(--pk)) 0 calc(20px * var(--pk));
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: color 300ms ease;
}
/* B starts hidden; the morph (or the reduced-motion swap) brings it in */
.nav-b [data-m],
.nav-bg { opacity: 0; }

.pb-logo {
  display: block;
  flex: none;
  width: calc(113px * var(--pk));
  height: calc(19.32px * var(--pk));
  margin-right: calc(28px * var(--pk));
}
.pb-nav { position: relative; }
.pb-links { display: flex; gap: calc(2px * var(--pk)); }
.pb-links a,
.pb-pill {
  display: block;
  padding: calc(10px * var(--pk)) calc(14px * var(--pk));
  border-radius: calc(10px * var(--pk));
  font-size: calc(15px * var(--pk));
  line-height: calc(20px * var(--pk));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pb-links span { display: inline-block; }
.pb-links a { opacity: 0.6; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .pb-links a:hover { opacity: 1; }
}
.pb-links-on {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0 round calc(10px * var(--pk)));
  transition:
    clip-path 250ms var(--ease-in-out),
    opacity 200ms ease;
}
.pb-links-on.is-on { opacity: 1; }
.pb-pill { background: rgba(37, 13, 18, 0.07); transition: background-color 300ms ease; }
.pbm { display: inline-flex; flex: none; }
.pbm-cta { margin-left: calc(20px * var(--pk)); }
.pbm-menu { display: none; }
.pb-cta {
  height: calc(40px * var(--pk));
  padding: 0 calc(16px * var(--pk));
  border-radius: calc(10px * var(--pk));
  font-size: calc(15px * var(--pk));
}
.btn-solid { background: var(--ink); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: #3a1820; }
}

/* The pill's glass: placed on B's box and morphed from the hero strip by script.js.
   Kept to the pill's own size at rest so the backdrop blur stays cheap to scroll. */
.nav-bg {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: calc(16px * var(--pk));
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px rgba(37, 13, 18, 0.08);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  transform-origin: 0 0;
  transition:
    background-color 300ms ease,
    box-shadow 300ms ease;
}

/* Over the dark sections the pill turns dark */
.nav[data-theme="dark"] .nav-b { color: var(--white); }
.nav[data-theme="dark"] .nav-bg {
  background: rgba(33, 12, 16, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.nav[data-theme="dark"] .pb-pill { background: rgba(255, 255, 255, 0.12); }
.nav[data-theme="dark"] .btn-solid { background: var(--white); color: #000; }
@media (hover: hover) and (pointer: fine) {
  .nav[data-theme="dark"] .btn-solid:hover { background: #efecec; }
}

.menu-btn {
  position: relative;
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  transition: transform 160ms var(--ease-out);
}
.menu-btn:active { transform: scale(0.95); }
.menu-btn span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 200ms var(--ease-out);
}
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 22.5px; }
.menu-btn.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Hero · Desktop - 21 ---------- */

.hero { position: relative; }

/* The Figma frame is one 1820×1037 screen. Live, it always fills the window
   (100vw × 100vh, keeping the 13px card margin); the design's exact frame is
   kept for ?nomotion renders. */
.hero-frame { width: 100%; height: calc(1037 * var(--u)); }
.js .hero-frame {
  height: 100vh;
  height: 100svh;
  min-height: calc(560 * var(--u));
}

.hero-card {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(24 * var(--u));
  width: calc(100% - 48 * var(--u));
  height: calc(100% - 39 * var(--u)); /* Figma: 24 above, 15 below */
  border-radius: calc(24 * var(--u));
  overflow: hidden;
  overflow: clip;
  background: #1b0f10;
  isolation: isolate;
}

/* Figma: photo → noise tile (colour dodge, 50%) → gradient (70%), all placed at
   -11,-11 and 1794 × 1009.37 — the card was inset from 13 to 24 and the picture
   kept its place on the page. Taller windows grow the box; the photo covers it. */
.hero-media,
.hero-shade {
  position: absolute;
  left: calc(-11 * var(--u));
  top: calc(-11 * var(--u));
  width: calc(100% + 22 * var(--u));
  height: max(calc(100% + 11 * var(--u)), calc(1009.37 * var(--u)));
}
.hero-media { transform-origin: 50% 100%; }
.hero-slides,
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.slide {
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0;
}
.slide.is-current { opacity: 1; }
.slide.is-incoming { z-index: 1; }

.hero-grain {
  position: absolute;
  /* one tile of bleed right and below; the offsets only ever move it up/left,
     so the tile phase stays on the card's origin */
  inset: 0 calc(-510.6 * var(--u)) calc(-345.69 * var(--u)) 0;
  will-change: transform;
  background: url("assets/noise-tile.jpg") calc(-11 * var(--u)) calc(-11 * var(--u)) / calc(510.6 * var(--u)) calc(345.69 * var(--u)) repeat;
  mix-blend-mode: color-dodge;
  opacity: 0.5;
  pointer-events: none;
}

.hero-shade {
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.7;
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  /* Figma: centred, top 647 in a 998 card — anchored to the bottom so it holds
     its place whatever the window height. */
  left: 0;
  right: 0;
  bottom: calc(95.68 * var(--u));
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(49 * var(--t));
  pointer-events: none;
}

.hero-title {
  font-size: calc(96 * var(--t));
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: var(--white);
}

/* ---------- Ads · Desktop - 18 ---------- */

.ads {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  overflow: clip;
}

.ads-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(72 * var(--u));
  padding: calc(112 * var(--u)) calc(120 * var(--u)) calc(160 * var(--u));
  min-height: calc(1470 * var(--u));
}

.rings { position: absolute; inset: 0; pointer-events: none; }
.ring {
  position: absolute;
  left: 50%;
  top: calc(123 * var(--u));
  width: calc(var(--s) * var(--u));
  height: calc(var(--s) * var(--u));
  margin: calc(var(--s) * var(--u) / -2) 0 0 calc(var(--s) * var(--u) / -2);
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.ring-1 { --s: 1324; opacity: 0.3; }
.ring-2 { --s: 1048; opacity: 0.2; }
.ring-3 { --s: 769; opacity: 0.1; }

.section-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.section-head.center { align-items: center; text-align: center; }
.ads .section-head { width: max-content; }

.ad-card,
.screen-card {
  position: relative;
  flex: none;
  width: calc(1580 * var(--u));
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.ad-card {
  --r: calc(15.036 * var(--u));
  height: calc(935 * var(--u));
  border-radius: var(--r);
  background: #242424;
}

.media-inner,
.media-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media-inner { transform-origin: 50% 100%; }
.media-inner img { object-fit: cover; }

.ad-card .media-inner img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ad-card:hover .media-inner img { transform: scale(1.02); }
}

.ad-copy {
  position: absolute;
  left: calc(60 * var(--u));
  bottom: calc(62 * var(--u)); /* Figma: top 667 in the 935 card */
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--t));
  pointer-events: none;
}
.ad-meta { opacity: 1; }
.ad-meta .dim { opacity: 0.3; }

.ad-card .btn-card {
  position: absolute;
  right: calc(74 * var(--u)); /* Figma: 1292, 810 */
  bottom: calc(66 * var(--u));
}

/* ---------- Process · Desktop - 27 ---------- */

.process { background: var(--paper); }

.process-frame {
  display: flex;
  flex-direction: column;
  gap: calc(72 * var(--u));
  padding: calc(112 * var(--u)) calc(120 * var(--u)) calc(160 * var(--u));
  min-height: calc(882 * var(--u));
}

.steps { display: flex; gap: calc(32 * var(--u)); }

.step {
  width: calc(371 * var(--u));
  min-height: calc(348 * var(--u));
  padding: calc(32 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(120 * var(--u));
  background: var(--white);
  border-radius: calc(24 * var(--u));
}

.badge {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(8 * var(--u));
}

.step-text { display: flex; flex-direction: column; gap: calc(16 * var(--t)); }
.step h3 {
  font-size: calc(28 * var(--t));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}
.step p {
  font-size: calc(20 * var(--t));
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* ---------- Originals · Desktop - 28 ---------- */

.originals-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(96 * var(--u));
  padding: calc(160 * var(--u)) calc(80 * var(--u));
  /* Figma 1229.87 minus the Watch buttons (24 gap + 59) that were removed */
  height: calc(1146.87 * var(--u));
}

/* Figma frame 328×113: word (cap-trimmed, 44 tall) · 24 gap · pill 328×45, ™ at 330,0 */
.lockup {
  position: relative;
  width: calc(328 * var(--u));
  height: calc(113 * var(--u));
  color: var(--ink);
}
.lockup-word {
  position: absolute;
  left: 0;
  top: calc(-8.6 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.tm { display: block; }
.lockup-tm {
  position: absolute;
  left: calc(330 * var(--u));
  top: 0;
  width: calc(19.128 * var(--u));
  height: calc(9.696 * var(--u));
}
.pill {
  position: absolute;
  left: 0;
  top: calc(68 * var(--u));
  width: calc(328 * var(--u));
  height: calc(45 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.pill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pill-text {
  position: relative;
  padding-left: 0.37em; /* centred trailing letter-spacing, see .c-h */
  font-size: calc(32 * var(--u));
  font-weight: 600;
  line-height: calc(29 * var(--u));
  letter-spacing: 0.37em;
  color: var(--white);
}

.films { display: flex; gap: calc(48.554 * var(--u)); }

.film { width: calc(494.3 * var(--u)); }

.poster {
  position: relative;
  display: block;
  width: 100%;
  height: calc(617.87 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(12 * var(--u));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: #111;
}
.poster-media,
.poster-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.poster-media { transform-origin: 50% 100%; }
.poster-media img {
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .poster:hover .poster-media img { transform: scale(1.03); }
}

.poster:active { transform: scale(0.99); }
.poster:focus-visible { outline-offset: 4px; }

/* ---------- Screening · Desktop - 29 ----------
   Two halves (texture + copy | photos) so the card can break apart cleanly
   on smaller screens. Side by side they are the exact Figma render. */

.screening { background: var(--wine); }

.screening-frame {
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  min-height: calc(1129.94 * var(--u));
  display: flex;
  justify-content: center;
}

.screen-card {
  --r: calc(24 * var(--u));
  display: flex;
  min-height: calc(889.94 * var(--u));
  border-radius: var(--r);
  background: var(--wine-card);
}

.screen-tex {
  position: relative;
  flex: none;
  width: calc(789 * var(--u));
  overflow: hidden;
  overflow: clip;
}
.screen-tex-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.screen-photos {
  position: relative;
  flex: 1;
  overflow: hidden;
  overflow: clip;
}
.screen-photos-media,
.screen-photos-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.screen-photos-media img { object-fit: cover; }

.screen-copy {
  position: absolute;
  left: calc(59.01 * var(--u));
  top: calc(56.98 * var(--u));
  bottom: calc(57.97 * var(--u)); /* Figma: 775 tall */
  width: calc(646.28 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.laurel { width: calc(116.94 * var(--u)); height: calc(93.5 * var(--u)); }

.screen-text { display: flex; flex-direction: column; gap: calc(24.747 * var(--t)); }

/* ---------- Pricing · Desktop - 31 ---------- */

.pricing { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); }

.pricing-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(72 * var(--u));
  padding: calc(112 * var(--u)) calc(120 * var(--u)) calc(160 * var(--u));
  min-height: calc(1327.14 * var(--u));
}

.plans {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  width: calc(1580 * var(--u));
}
.plan {
  position: relative;
  flex: none;
  border-radius: calc(24 * var(--u));
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.plan-light {
  width: calc(775 * var(--u));
  min-height: calc(733 * var(--u));
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: var(--ink);
}
.plan-dark {
  width: calc(773 * var(--u));
  min-height: calc(731 * var(--u));
  background: var(--wine-card);
  color: var(--white);
}
.plan-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plan-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(96 * var(--u));
  padding: calc(32 * var(--u));
}
.plan-light .plan-body { padding: calc(33 * var(--u)); } /* 1px stroke + 32 */
.plan-icon {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(8 * var(--u));
}
.plan-main { display: flex; flex-direction: column; gap: calc(48 * var(--t)); }
.plan-head { display: flex; flex-direction: column; gap: calc(16 * var(--t)); }
.plan-name {
  font-size: calc(32 * var(--t));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}
.plan-desc {
  font-size: calc(22 * var(--t));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.plan-list { display: flex; flex-direction: column; gap: calc(24 * var(--t)); }
.plan-list li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--t));
  font-size: calc(20 * var(--t));
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.tick {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(24 * var(--t));
  height: calc(24 * var(--t));
  border-radius: calc(4 * var(--t));
  background: var(--accent);
  color: var(--white);
}
.tick svg { width: calc(16 * var(--t)); height: calc(16 * var(--t)); }
.plan-dark .tick { background: var(--white); color: #841f33; }
.plan-price {
  font-size: calc(48 * var(--t));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* ---------- About · Desktop - 32 ---------- */

.about {
  position: relative;
  background: var(--wine);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  overflow: clip;
}
.about-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-frame {
  display: flex;
  align-items: center;
  gap: calc(64 * var(--u));
  padding: calc(160 * var(--u)) calc(120 * var(--u));
  min-height: calc(900 * var(--u));
}
.about-photo {
  position: relative;
  flex: none;
  width: calc(612 * var(--u));
  height: calc(579 * var(--u));
  border-radius: calc(24 * var(--u));
  background: var(--paper);
  overflow: hidden;
  overflow: clip;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma's 1px inside stroke sits over the picture */
.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.about-copy {
  width: calc(904 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24.747 * var(--t));
}
.about-text {
  font-size: calc(20 * var(--t));
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--white);
}
.about-text p + p { margin-top: calc(28 * var(--t)); } /* Figma's blank line between paragraphs */

/* ---------- Book · Desktop - 30 ---------- */

.book-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(96 * var(--u));
  padding: calc(160 * var(--u)) calc(120 * var(--u));
  min-height: calc(1433 * var(--u)); /* grows with the booking page */
}
.book .section-head { width: max-content; }

/* The booking page sits straight on the section (Figma's grey box only marked the
   area). It is as tall as Google's page in its two-column layouts, so nothing
   scrolls inside it. */
.calendar {
  width: calc(1580 * var(--u));
  height: 900px;
  flex: none;
}
/* whatever width/height the pasted embed code carries, it fills the area */
.calendar iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Footer · 20 ---------- */

.footer {
  position: relative;
  background: var(--footer);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* A warm light that follows the cursor across the whole footer */
.footer-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  --mx: 50%;
  --my: 50%;
  background: radial-gradient(
    circle calc(620 * var(--u)) at var(--mx) var(--my),
    rgba(255, 110, 150, 0.13) 0%,
    rgba(255, 110, 150, 0.05) 40%,
    rgba(255, 110, 150, 0) 72%
  );
  transition: opacity 600ms ease;
}
.footer.is-lit .footer-light { opacity: 1; }

.footer-frame {
  --wm: max(1820 * var(--u), 100vw); /* the wordmark's width */
  height: calc(381 * var(--u) + var(--wm) * 256 / 1820);
}

.footer-logo {
  position: absolute;
  z-index: 1;
  left: calc(798.87 * var(--u));
  top: calc(100.19 * var(--u));
  /* the nav logo at 39.576 / 48.784 of its size */
  width: calc(223.09 * var(--u));
  height: calc(38.13 * var(--u));
  color: var(--white);
}

.socials {
  position: absolute;
  left: calc(718 * var(--u));
  top: calc(210.19 * var(--u));
  display: flex;
  gap: calc(16 * var(--u));
  z-index: 1;
}

.social {
  display: grid;
  place-items: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(251, 253, 252, 0.1);
  -webkit-backdrop-filter: blur(11.636px);
  backdrop-filter: blur(11.636px);
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.social img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.social:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .social:hover { background: var(--accent); }
}

.wordmark {
  position: absolute;
  left: calc(50% - var(--wm) / 2);
  top: calc(381 * var(--u));
  width: var(--wm);
  height: calc(var(--wm) * 256 / 1820);
  overflow: visible;
  pointer-events: none;
}
/* Figma: #FF99B6 at 50% soft-light over #210C10. Browsers resolve soft-light
   brighter than Figma, and the backdrop is flat, so paint Figma's result. */
.wordmark path { fill: #2f0d13; }

/* The letters catch more of the light than the background does */
.wordmark-glow {
  opacity: 0;
  --mx: 50%;
  --my: 50%;
  -webkit-mask-image: radial-gradient(circle calc(300 * var(--u)) at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 75%);
  mask-image: radial-gradient(circle calc(300 * var(--u)) at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 75%);
  transition: opacity 500ms ease;
}
.wordmark-glow path { fill: #ff99b6; }
.footer.is-lit .wordmark-glow { opacity: 0.34; }

/* ---------- Play cursor ---------- */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  will-change: transform;
}
.cursor-btn {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 12px 32px -14px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  opacity: 0;
  transform: scale(0.85);
  transition:
    transform 140ms var(--ease-out),
    opacity 120ms ease-out;
}
.cursor-btn svg {
  width: 26px;
  height: 26px;
  margin-left: 3px; /* optical centre of the triangle */
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.25));
}
.cursor.is-active .cursor-btn {
  opacity: 1;
  transform: scale(1);
  transition:
    transform 240ms var(--ease-out),
    opacity 180ms ease-out;
}
.cursor.is-active.is-pressed .cursor-btn {
  transform: scale(0.92);
  transition-duration: 120ms;
}
[data-cursor] { cursor: pointer; }
/* the system cursor only steps aside while the play button is showing */
.has-cursor [data-cursor].is-cursor { cursor: none; }
.has-cursor [data-cursor] :is(a, button) { cursor: pointer; }

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

.player {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  background: transparent;
  place-items: center;
}
.player[open] { display: grid; }
.player::backdrop {
  background: rgba(16, 6, 8, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.player-panel {
  width: min(1180px, 100%, calc((100svh - 160px) * 16 / 9));
  color: var(--white);
  outline: none; /* receives focus on open so the ring doesn't land on the close button */
}

.player-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  overflow: clip;
  background: #000;
  isolation: isolate;
}
.player-backdrop,
.player-still,
.player-embed,
.player-embed > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.player-backdrop {
  object-fit: cover;
  filter: blur(28px) brightness(0.5);
  transform: scale(1.15);
}
.player-still { object-fit: contain; }
.player.is-landscape .player-still { object-fit: cover; }
.player-empty {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.player.has-video .player-empty { display: none; } /* the still shows until the video paints over it */

.player-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}
.player-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.player-title {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}
.player-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease;
}
.player-close svg { width: 20px; height: 20px; }
.player-close:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .player-close:hover { background: rgba(255, 255, 255, 0.18); }
}

/* Modal: stays centred, scale 0.96 → 1 with the backdrop fading as one surface */
.player[open] .player-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 250ms var(--ease-out),
    transform 250ms var(--ease-out);
}
.player[open]::backdrop {
  opacity: 1;
  transition: opacity 250ms var(--ease-out);
}
@starting-style {
  .player[open] .player-panel { opacity: 0; transform: scale(0.96); }
  .player[open]::backdrop { opacity: 0; }
}
.player.is-closing .player-panel {
  opacity: 0;
  transform: scale(0.98);
  transition-duration: 160ms;
}
.player.is-closing::backdrop { opacity: 0; transition-duration: 160ms; }

/* ---------- Menu (phones / tablets) ---------- */

.menu {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--footer);
  color: var(--white);
}
.menu::backdrop { background: transparent; }
.menu-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px max(8px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 10px 0 18px;
}
.menu-logo { display: block; width: 152px; height: 26px; color: var(--white); }
.menu .menu-btn { display: block; }
.menu-links {
  margin-top: 48px;
  padding-left: 18px;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.menu-links a { display: block; padding: 8px 0; }
.menu-cta {
  align-self: flex-start;
  height: 52px;
  margin: 40px 0 0 18px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 17px;
}

/* Sheet: wipes down with the drawer curve, items follow with a short stagger */
.menu[open] {
  clip-path: inset(0 0 0 0);
  transition: clip-path 480ms var(--ease-drawer);
}
.menu[open] :is(.menu-links li, .menu-cta) {
  opacity: 1;
  transform: none;
  transition:
    opacity 400ms var(--ease-out),
    transform 520ms var(--ease-out);
  transition-delay: calc(120ms + var(--i) * 45ms);
}
@starting-style {
  .menu[open] { clip-path: inset(0 0 100% 0); }
  .menu[open] :is(.menu-links li, .menu-cta) { opacity: 0; transform: translateY(16px); }
}
.menu.is-closing {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 260ms var(--ease-in-out);
}

/* ---------- Logo reveal (first load) ---------- */

.loader { display: none; }
.js.intro .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
}
.loader-bg {
  position: absolute;
  inset: 0;
  background: #000;
}
/* transparent canvas: only the logo, so it can fly to the nav on its own */
.loader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}
.loader-logo {
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  color: var(--white);
  transform-origin: 0 0;
  pointer-events: none;
}

/* ==================================================================
   Motion — Emil Kowalski's animate / design-eng rules.
   First-visit marketing page: the "rare" tier, so entrances may run
   longer than UI timing. Only transform / opacity / filter / clip-path.
   ================================================================== */

/* Hero intro — after the logo reveal (or straight away): the first frame
   comes into focus, then the nav and headline follow. */
.js .hero-slides {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(14px);
}
.js .intro {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
}
.js .nav .intro { transform: translateY(-8px); filter: blur(4px); }

.js[data-loaded] .hero-slides {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 1400ms var(--ease-out),
    filter 1400ms var(--ease-out),
    transform 2000ms var(--ease-out);
}
.js[data-loaded] .intro {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 900ms var(--ease-out),
    filter 900ms var(--ease-out),
    transform 1100ms var(--ease-out);
  transition-delay: calc(300ms + var(--i) * 50ms);
}
.js[data-loaded] .hero-copy .intro { transition-delay: calc(150ms + var(--i) * 80ms); }
.js[data-loaded] .btn.intro:active { transform: scale(0.97); }

/* Live film grain: the design's own noise tile, re-dealt ~12 times a second */
.js .hero-grain { animation: grain 820ms steps(1, end) infinite; }
.hero.is-offscreen .hero-grain,
.is-scrolling .hero-grain { animation-play-state: paused; } /* grain re-dealing mid-scroll goes unseen but costs compositing */
@keyframes grain {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(calc(-137 * var(--u)), calc(-254 * var(--u))); }
  20%  { transform: translate(calc(-412 * var(--u)), calc(-48 * var(--u))); }
  30%  { transform: translate(calc(-58 * var(--u)), calc(-163 * var(--u))); }
  40%  { transform: translate(calc(-301 * var(--u)), calc(-317 * var(--u))); }
  50%  { transform: translate(calc(-244 * var(--u)), calc(-21 * var(--u))); }
  60%  { transform: translate(calc(-84 * var(--u)), calc(-196 * var(--u))); }
  70%  { transform: translate(calc(-390 * var(--u)), calc(-140 * var(--u))); }
  80%  { transform: translate(calc(-167 * var(--u)), calc(-301 * var(--u))); }
  90%  { transform: translate(calc(-23 * var(--u)), calc(-62 * var(--u))); }
}

/* Scroll-linked depth. The same push-in the hero has: as a picture leaves the
   top of the screen it drifts slower than the page and leans in; the copy on
   it lifts away. Runs on the
   compositor where supported; script.js covers older browsers. */
@supports (animation-timeline: view()) {
  .js .hero { view-timeline: --hero block; }
  .js .hero-media {
    animation: push-in linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .js .hero-copy {
    animation: lift-away linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 75%;
  }

  .js .ad-card { view-timeline: --ad block; }
  .js .ad-card .media-inner {
    animation: push-in linear both;
    animation-timeline: --ad;
    animation-range: exit 0% exit 100%;
  }
  .js .ad-copy {
    animation: lift-away linear both;
    animation-timeline: --ad;
    animation-range: exit 0% exit 70%;
  }

  .js .poster { view-timeline: --poster block; }
  .js .poster-media {
    animation: push-in-soft linear both;
    animation-timeline: --poster;
    animation-range: exit 0% exit 100%;
  }
}
@keyframes push-in { to { transform: translateY(8%) scale(1.12); } }
@keyframes push-in-soft { to { transform: translateY(5%) scale(1.07); } }
@keyframes lift-away { to { transform: translateY(calc(-64 * var(--u))); opacity: 0; } }

/* Scroll reveals (once) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 900ms var(--ease-out),
    filter 900ms var(--ease-out),
    transform 1100ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Big surfaces rise without blur — blurring a whole card costs a lot of GPU
   for an effect you can barely see on large flat areas */
.js [data-reveal="rise"] { filter: none; transform: translateY(32px); }
.js [data-reveal="rise"].is-in {
  transition:
    opacity 900ms var(--ease-out),
    transform 1100ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Fade + focus only (buttons keep their own transform for press feedback) */
.js [data-reveal="fade"] { transform: none; }
.js .btn[data-reveal].is-in {
  transition:
    opacity 900ms var(--ease-out) var(--d, 0ms),
    filter 900ms var(--ease-out) var(--d, 0ms),
    transform 160ms var(--ease-out),
    background-color 200ms ease;
}
.js .btn[data-reveal]:active { transform: scale(0.97); }

/* Rings grow out from behind the headline */
.js [data-reveal="ring"] {
  transform: scale(0.92);
  filter: none;
}
.js .ring-1[data-reveal],
.js .ring-2[data-reveal],
.js .ring-3[data-reveal] { opacity: 0; }
.js .ring-1.is-in { opacity: 0.3; }
.js .ring-2.is-in { opacity: 0.2; }
.js .ring-3.is-in { opacity: 0.1; }
.js [data-reveal="ring"].is-in {
  transform: none;
  transition:
    opacity 1400ms var(--ease-out),
    transform 1600ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Media cards wipe up while the picture settles inside them */
.js [data-reveal="media"] {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(14% 0 0 0 round var(--r));
}
.js [data-reveal="media"] .reveal-img { transform: scale(1.14); }
.js [data-reveal="media"].is-in {
  clip-path: inset(0 0 0 0 round var(--r));
  transition: clip-path 1200ms var(--ease-in-out);
}
.js [data-reveal="media"].is-in .reveal-img {
  transform: none;
  transition: transform 1700ms var(--ease-out);
}

/* Posters ease out of a slight zoom inside their frames */
.js .film[data-reveal] .reveal-img { transform: scale(1.1); }
.js .film[data-reveal].is-in .reveal-img {
  transform: none;
  transition: transform 1500ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Footer wordmark letters rise in sequence */
.js .wm-letter {
  transform-box: fill-box;
  transform: translateY(40%);
  opacity: 0;
}
.js .wordmark.is-in .wm-letter {
  transform: none;
  opacity: 1;
  transition:
    transform 1300ms var(--ease-out),
    opacity 900ms var(--ease-out);
  transition-delay: calc(var(--i) * 60ms);
}
.js .wordmark-glow .wm-letter { transform: none; opacity: 1; }

/* Reduced motion: keep the fades, drop movement, blur, wipes, grain and pulses */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-slides,
  .js .intro,
  .js [data-reveal],
  .js [data-reveal="ring"],
  .js .wm-letter,
  .js .reveal-img {
    transform: none !important;
    filter: none !important;
  }
  .js .hero-grain,
  .js .hero-media,
  .js .hero-copy,
  .js .media-inner,
  .js .ad-copy,
  .js .poster-media { animation: none !important; }
  .js [data-reveal="media"] { clip-path: none !important; opacity: 0; }
  .js[data-loaded] .hero-slides,
  .js[data-loaded] .intro,
  .js [data-reveal].is-in,
  .js .wordmark.is-in .wm-letter {
    transition: opacity 400ms ease !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal="media"].is-in { opacity: 1; }
  .poster-media img,
  .ad-card .media-inner img { transition: none; }
  .roll > span,
  .arrow svg { transition: none; }
  .roll > span + span { display: none; }
  .btn:hover .roll > span:first-child,
  .btn-arrow:hover .arrow svg:first-child { transform: none; }
  .player[open] .player-panel,
  .menu[open],
  .menu[open] :is(.menu-links li, .menu-cta) { transition: opacity 200ms ease; transform: none; clip-path: none; }
}

/* ==================================================================
   Tablets & phones — the Figma frame is desktop-only, so this is a
   re-flow of the same pieces rather than a scaled-down copy.
   ================================================================== */
@media (max-width: 1023px) {
  :root { --g: 16px; --u: 0.6px; --t: 0.6px; }
  /* the desktop frames grow from Figma's heights; here everything is its content's height */
  .ads-frame, .process-frame, .step, .screening-frame, .screen-card,
  .pricing-frame, .plan-light, .plan-dark, .about-frame { min-height: 0; }

  .frame { width: 100%; }
  .eyebrow { font-size: 10px; line-height: 1.1; }
  .eyebrow.small { font-size: 10px; line-height: 1.1; }
  .h2 { font-size: 40px; }
  .body-lg { font-size: 17px; }
  br.d { display: none; }
  .step p,
  .screen-text .body-lg { white-space: normal; }
  .btn-nav, .btn-card { font-size: 16px; height: 48px; padding: 0 18px; width: auto; border-radius: 10px; }
  .arrow { width: 20px; height: 20px; }

  /* Nav: A is the hero row (logo · Book a Call · menu); B is a full-width pill */
  .nav-a {
    left: 8px;
    right: 8px;
    top: 8px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 18px;
  }
  .nav-a .ma { position: relative; left: auto; right: auto; top: auto; }
  .ma-logo { width: 152px; height: 26px; margin-right: auto; }
  .ma-nav { display: none; }
  .ma-cta .btn-nav { height: 40px; font-size: 15px; padding: 0 14px; }
  .ma-menu,
  .ma-menu .menu-btn,
  .pb-menu { display: block; }
  .pbm-menu { display: inline-flex; }
  /* inset well inside the hero card's 8px margin, centred and capped on tablets */
  .nav-b {
    top: 14px;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: 480px;
    height: 56px;
    margin: 0 auto;
    padding: 0 8px 0 18px;
  }
  .pb-logo { margin-right: auto; }
  .pb-nav { display: none; }
  .pbm-cta { margin-left: 0; margin-right: 6px; }

  /* Hero */
  .hero-frame,
  .js .hero-frame { height: auto; min-height: 0; padding: 8px; }
  .hero-card {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100svh - 16px);
    min-height: 560px;
    border-radius: 18px;
  }
  .hero-media,
  .hero-shade { left: 0; top: 0; width: 100%; height: 100%; }
  .slide { object-position: var(--op, 62%) center; } /* --op: each shot's subject, set in index.html */
  .hero-copy { left: var(--g); right: var(--g); bottom: 32px; width: auto; gap: 18px; margin: 0 auto; }
  .hero-title { font-size: 48px; }

  /* Ads */
  .ads-frame { height: auto; padding: 72px var(--g) 64px; gap: 40px; }
  .ads .section-head { width: auto; }
  .ring { top: 60px; width: calc(var(--s) * 0.42px); height: calc(var(--s) * 0.42px); margin: calc(var(--s) * -0.21px) 0 0 calc(var(--s) * -0.21px); }
  .section-head { gap: 14px; }
  .ad-card { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; --r: 14px; }
  .ad-card .media-inner img { object-position: 30% center; }
  .ad-copy { left: 20px; right: 20px; top: auto; bottom: 92px; width: auto; gap: 16px; }
  .ad-card .h2 { font-size: 34px; }
  .ad-card .btn-card { left: 20px; right: auto; top: auto; bottom: 20px; }

  /* Process */
  .process-frame { height: auto; padding: 72px var(--g); gap: 36px; }
  .steps { flex-direction: column; gap: 12px; }
  .step { width: 100%; height: auto; padding: 24px; gap: 40px; border-radius: 18px; }
  .badge { width: 48px; height: 48px; }
  .step h3 { font-size: 24px; }
  .step p { font-size: 17px; }

  /* Originals */
  .originals-frame { height: auto; padding: 80px var(--g); gap: 48px; }
  .lockup { --u: 0.75px; }
  .films { flex-direction: column; gap: 40px; width: 100%; }
  .film { width: 100%; }
  .poster { height: auto; aspect-ratio: 494.3 / 617.87; }

  /* Screening: the card breaks into its two halves — texture panel with the
     copy, then the photos — instead of shrinking the desktop composition. */
  .screening-frame { height: auto; padding: 48px var(--g); }
  .screen-card { width: 100%; height: auto; flex-direction: column; border-radius: 18px; --r: 18px; }
  .screen-tex { width: 100%; }
  .screen-copy {
    position: relative;
    left: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: auto;
    min-height: 380px;
    padding: 28px 22px 30px;
    gap: 48px;
  }
  .laurel { width: 72px; height: 58px; }
  .screen-photos { flex: none; aspect-ratio: 791 / 890; }

  /* Pricing */
  .pricing-frame { height: auto; padding: 72px var(--g); gap: 36px; }
  .plans { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  .plan-light,
  .plan-dark { width: 100%; height: auto; border-radius: 18px; }
  .plan-body,
  .plan-light .plan-body { padding: 24px; gap: 40px; }
  .plan-icon { width: 48px; height: 48px; border-radius: 8px; }
  .plan-main { gap: 28px; }
  .plan-head { gap: 10px; }
  .plan-name { font-size: 26px; }
  .plan-desc { font-size: 17px; }
  .plan-list { gap: 14px; }
  .plan-list li { align-items: flex-start; gap: 10px; font-size: 16px; }
  .tick { width: 22px; height: 22px; margin-top: 0.5px; }
  .tick svg { width: 14px; height: 14px; }
  .plan-price { font-size: 36px; }
  .btn-cta { height: 48px; padding: 0 18px; width: auto; font-size: 16px; border-radius: 10px; }

  /* About */
  .about-frame { height: auto; flex-direction: column; align-items: stretch; gap: 32px; padding: 72px var(--g); }
  .about-photo { width: 100%; height: auto; aspect-ratio: 612 / 579; border-radius: 18px; }
  .about-copy { width: auto; gap: 18px; }
  .about-text { font-size: 16px; }
  .about-text p + p { margin-top: 16px; }

  /* Book */
  .book-frame { height: auto; padding: 80px var(--g); gap: 40px; }
  .book .section-head { width: auto; }
  .calendar { width: 100%; }

  /* Footer */
  /* logo · icons · wordmark stacked; the wordmark sits in the flow, close under the icons */
  .footer-frame { height: auto; display: flex; flex-direction: column; align-items: center; padding-top: 52px; }
  .footer-logo { position: relative; left: 0; top: 0; width: 176px; height: 30px; }
  .socials { position: relative; left: 0; top: 0; gap: 10px; margin-top: 26px; }
  .social { width: 52px; height: 52px; }
  .social img { width: 20px; height: 20px; }
  .wordmark { position: relative; left: 0; width: 100%; height: auto; top: auto; margin: clamp(28px, 8vw, 56px) 0 -2px; }
  .wordmark-glow { position: absolute; left: 0; top: auto; bottom: -2px; margin: 0; }

  /* Player */
  .player { padding: 12px; }
  .player-title { font-size: 24px; }
}

/* under 600px of width the booking page goes to one column and gets taller */
@media (max-width: 663px) {
  .calendar { height: 1410px; }
}

@media (max-width: 380px) {
  .socials { gap: 8px; }
  .social { width: 48px; height: 48px; }
  .ma-logo { width: 128px; height: 22px; }
  .ma-cta .btn-nav { height: 38px; padding: 0 12px; font-size: 14px; }
  .pbm-cta { display: none; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  :root { --g: 32px; }
  .hero-title { font-size: 72px; }
  .h2 { font-size: 56px; }
  .films { flex-direction: row; gap: 20px; }
  .steps { display: grid; grid-template-columns: 1fr 1fr; }
  .ad-card { aspect-ratio: 16 / 11; }
  .ad-card .h2 { font-size: 48px; }
  .ad-copy { width: 60%; }

  /* Screening: side by side again, half and half */
  .screen-card { flex-direction: row; }
  .screen-tex { width: 50%; flex: none; }
  .screen-photos { flex: 1; aspect-ratio: auto; }
  .screen-copy { min-height: 520px; height: 100%; }
  .screening .h2 { font-size: 44px; }
}