/* ==========================================================================
   CAULEY - marketing site

   The theme is derived from hero_header.mp4, not the other way round.
   Every colour below was sampled out of the clip itself:
     canvas  #eeeff2  the clip's own plate background (most common pixel)
     accent  #425cae  its dominant blue, from a 16-colour palettegen pass
     deep    #292f56  the darkest cluster in that palette
   Because the canvas IS the clip's background, the hero plate has no visible
   edge against the page. Hand-written CSS, no framework.
   ========================================================================== */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: "Geist";
  src: url("./font/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./font/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --canvas: #eeeff2;      /* sampled: the clip's plate background */
  --canvas-2: #f7f8fa;    /* raised surfaces */
  --canvas-3: #e4e6ec;    /* recessed / hover fills */

  --accent: #425cae;      /* sampled: the clip's dominant blue */
  --accent-bright: #6272be;
  --accent-deep: #292f56;

  --ink: #171a2e;
  --ink-dim: #4e5470;
  --ink-faint: #656a80;

  /* text sitting on a dark scrim over photography (image cards only) */
  --on-media: #f4f5f8;
  --on-media-dim: #c6c9d6;

  --line: rgba(23, 26, 46, 0.12);
  --line-soft: rgba(23, 26, 46, 0.07);

  /* glass, light */
  --glass-10: rgba(255, 255, 255, 0.72);
  --glass-20: rgba(255, 255, 255, 0.84);
  --glass-40: rgba(246, 247, 250, 0.94);
  --edge-hi: rgba(255, 255, 255, 0.9);
  --edge-hi-hover: rgba(255, 255, 255, 1);

  --depth:
    0 1px 2px rgba(23, 26, 46, 0.06),
    0 8px 20px rgba(23, 26, 46, 0.06),
    0 28px 56px rgba(23, 26, 46, 0.07);

  /* one radius system: inputs 8, controls 12, panels 18 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --shell: 1400px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 72px;

  /* type scale */
  --t-display: clamp(2.75rem, 6.4vw, 5.25rem);
  --t-h1: clamp(2.25rem, 4.8vw, 3.75rem);
  --t-h2: clamp(1.75rem, 3.2vw, 2.75rem);
  --t-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-body: clamp(1rem, 1.05vw, 1.125rem);
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;

  /* easing */
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.35, 0.42, 1);

  --z-grain: 60;
  --z-nav: 50;
  --z-menu: 55;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: #fff; }

.num { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   ambient wash + grain
   Very low opacity on a light canvas: enough to keep large empty areas from
   reading as flat white, never enough to tint the type. Fixed and
   pointer-events:none so neither layer repaints on scroll.
   ========================================================================== */
.ambient {
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 20% 14%, rgba(66, 92, 174, 0.10), transparent 62%),
    radial-gradient(34vmax 30vmax at 84% 70%, rgba(98, 114, 190, 0.09), transparent 64%),
    radial-gradient(30vmax 26vmax at 56% 108%, rgba(41, 47, 86, 0.06), transparent 66%);
  filter: blur(24px);
  will-change: transform;
  animation: drift 64s var(--in-out) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* ==========================================================================
   layout primitives
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main { position: relative; z-index: 1; }
section { position: relative; }
.band { padding-block: clamp(5rem, 11vw, 10rem); }
.band--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* glass panel: white frost, hairline edge, soft ambient depth */
.glass {
  position: relative;
  background: var(--glass-10);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-radius: var(--r-lg);
  box-shadow: var(--depth);
}
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--edge-hi), rgba(23, 26, 46, 0.06) 46%, rgba(23, 26, 46, 0.1) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

/* ---------- type helpers ---------- */
.display {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.h1 { font-size: var(--t-h1); font-weight: 600; line-height: 1.06; letter-spacing: -0.032em; }
.h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.12; letter-spacing: -0.026em; }
.h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.28; letter-spacing: -0.018em; }
.lede { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.55; color: var(--ink-dim); max-width: 34ch; }
.body { color: var(--ink-dim); max-width: 62ch; }
.small { font-size: var(--t-sm); color: var(--ink-dim); }
.fine { font-size: var(--t-xs); color: var(--ink-faint); }
.gold { color: var(--accent); }

/* ==========================================================================
   navigation - single line, 72px
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* No backdrop blur: the nav sits directly over the hero film, and
     a backdrop filter there smears the frame beneath it. Flat alpha instead. */
  background: var(--nav-bg, rgba(238, 239, 242, 0.88));
  transition: background 260ms var(--out), box-shadow 260ms var(--out);
}
.nav::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.nav[data-scrolled="true"] {
  background: var(--nav-bg-solid, rgba(246, 247, 250, 0.92));
  box-shadow: 0 10px 30px rgba(23, 26, 46, 0.08);
}
.nav__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.brand { display: flex; align-items: center; gap: 0.625rem; flex: 0 0 auto; }
.brand__mark { width: 22px; height: 22px; color: var(--accent); }
.brand__word {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2rem); margin-left: auto; }
.nav__link {
  font-size: var(--t-sm);
  color: var(--ink-dim);
  white-space: nowrap;
  transition: color 160ms ease-out;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }
.nav__cta { margin-left: clamp(0.75rem, 1.6vw, 1.5rem); }
.nav__toggle { display: none; }

/* mobile menu */
.menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: var(--z-menu);
  background: var(--glass-40);
  backdrop-filter: blur(40px) saturate(130%);
  -webkit-backdrop-filter: blur(40px) saturate(130%);
  padding: 2rem var(--gutter) 3rem;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 220ms var(--out), transform 220ms var(--out), visibility 220ms;
}
.menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.menu__link {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.024em;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line-soft);
}
.menu__cta { margin-top: 2rem; justify-self: start; }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.75rem 1.375rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: transform 140ms var(--out), background 180ms ease-out, box-shadow 180ms var(--out);
  box-shadow: 0 1px 2px rgba(23, 26, 46, 0.14), 0 10px 24px rgba(66, 92, 174, 0.22);
}
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn svg { width: 16px; height: 16px; }

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.7);
  --btn-fg: var(--ink);
  box-shadow: none;
  position: relative;
  background: var(--btn-bg);
}
.btn--ghost::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(23, 26, 46, 0.22), rgba(23, 26, 46, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.btn--ghost:hover { background: #ffffff; }
.btn--lg { padding: 0.9375rem 1.75rem; font-size: 1rem; }

.link-out {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: gap 200ms var(--out);
}
.link-out svg { width: 15px; height: 15px; }
.link-out:hover { gap: 0.6875rem; }

/* ==========================================================================
   1. HERO - the clip plays and repeats on its own, centred copy over it.
   It loops cleanly because both ends of the film are the same flat frame of
   the page colour, so the loop point is a colour match rather than a cut, and
   the motion only ever runs forwards.
   ========================================================================== */
.hero {
  position: relative;
  padding-top: var(--nav-h);
  /* The next section is transparent and sits on the same canvas colour, so it
     can ride up into the tail of the hero's fade. Without this the fade finishes
     and then the band's own padding opens a dead gap before the first line. */
  margin-bottom: clamp(-9rem, -7vw, -4rem);
}

.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--canvas);
  /* the copy's scrim is deliberately larger than the copy, so it has to be
     clipped here or it widens the page on narrow screens */
  overflow: hidden;
}

/* Edge to edge. The film spans the full page width and keeps its 16/9, so it
   is never cropped and never letterboxed. On a short viewport that makes the
   hero taller than the screen, which is why the copy anchors to the visible
   area rather than to the middle of the film (see .hero__copy). */
.hero__film {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* The base of the frame is the busiest part of the film, so a short fade
     reads as a cut. The bottom dissolves over roughly a fifth of the height on
     an eased ramp, which is what makes the hand-off to the next section read as
     a transition rather than an edge. The multiple stops are the ease: a single
     linear stop still shows a band. */
  --film-mask:
    linear-gradient(to bottom,
      transparent 0%, rgba(0, 0, 0, 0.6) 1.5%, #000 4%,
      #000 79%,
      rgba(0, 0, 0, 0.95) 85%,
      rgba(0, 0, 0, 0.78) 90%,
      rgba(0, 0, 0, 0.48) 94.5%,
      rgba(0, 0, 0, 0.18) 98%,
      transparent 100%),
    linear-gradient(to right,
      transparent 0%, rgba(0, 0, 0, 0.5) 1.2%, #000 4%,
      #000 96%, rgba(0, 0, 0, 0.5) 98.8%, transparent 100%),
    radial-gradient(152% 164% at 50% 46%, #000 78%, rgba(0, 0, 0, 0.8) 92%, transparent 100%);
  -webkit-mask-image: var(--film-mask);
  mask-image: var(--film-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__film video,
.hero__film img {
  width: 100%;
  height: 100%;
  /* the box is already 16/9, so this crops nothing. The wording is burned into
     the frame and must never be cut. */
  object-fit: cover;
  display: block;
}

/* Hand-off out of the hero. Opacity only: an alpha fade to the page colour.
   No blur of any kind - a blurred backdrop was reading as a smeared edge. */
.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(150px, 32%, 340px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(238, 239, 242, 0) 0%,
    rgba(238, 239, 242, 0.22) 40%,
    rgba(238, 239, 242, 0.72) 74%,
    var(--canvas) 96%);
}

/* The copy sits in the middle of what you can actually see. On a screen tall
   enough to hold the whole 16/9 film that is the middle of the film; on a
   shorter one it stays centred in the visible band instead of dropping below
   the fold with the film's midpoint. */
.hero__copy {
  grid-area: 1 / 1;
  position: absolute;
  left: 0;
  right: 0;
  top: min(50%, calc((100dvh - var(--nav-h)) * 0.5));
  transform: translateY(-50%);
  z-index: 2;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

/* The scrim travels with the copy rather than sitting at the middle of the
   stage. Opacity is set by measurement, not taste: the darkest pixel that ever
   passes behind the copy is pure black (the TikTok mark), and 0.66 over black
   still gives the ink 6.3:1. Anything heavier only washes the film. */
.hero__copy::before {
  content: "";
  position: absolute;
  inset: -7rem -10rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(238, 239, 242, 0.86) 0%,
    rgba(238, 239, 242, 0.66) 58%,
    rgba(238, 239, 242, 0) 100%);
}
.hero__title { margin-bottom: 1.25rem; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lede { margin-bottom: 2rem; max-width: 44ch; margin-inline: auto; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}

/* ==========================================================================
   2. THE PROBLEM - editorial manifesto, single column
   ========================================================================== */
.manifesto { max-width: 26ch; }
.manifesto__body {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
  max-width: 54ch;
  color: var(--ink-dim);
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.62;
}
.manifesto__body strong { color: var(--ink); font-weight: 500; }
.manifesto__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

/* ==========================================================================
   3. SERVICES - accordion image panels
   The service objects are bright studio photographs, so the cards carry a
   light scrim and ink type: the photographs stay luminous and the page keeps
   one light theme throughout.
   ========================================================================== */
.panels {
  display: grid;
  grid-template-columns: 1.24fr 0.88fr 0.88fr;
  gap: 0.75rem;
  height: clamp(30rem, 62vh, 40rem);
  transition: grid-template-columns 620ms var(--out);
}
/* Collapsed columns stay wide enough to hold their own title. A sliver that
   clips the word is worse than a smaller expansion. */
.panels:has(.panel:nth-child(1):hover) { grid-template-columns: 1.7fr 0.65fr 0.65fr; }
.panels:has(.panel:nth-child(2):hover) { grid-template-columns: 0.65fr 1.7fr 0.65fr; }
.panels:has(.panel:nth-child(3):hover) { grid-template-columns: 0.65fr 0.65fr 1.7fr; }
.panels:has(.panel:nth-child(1):focus-visible) { grid-template-columns: 1.7fr 0.65fr 0.65fr; }
.panels:has(.panel:nth-child(2):focus-visible) { grid-template-columns: 0.65fr 1.7fr 0.65fr; }
.panels:has(.panel:nth-child(3):focus-visible) { grid-template-columns: 0.65fr 0.65fr 1.7fr; }
.panels:has(.panel:hover) .panel:not(:hover) .panel__title { color: var(--ink-faint); }

.panel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--depth);
  isolation: isolate;
  color: var(--ink);
  background: var(--canvas-2);
}
/* the three studio shots already sit in one exposure family; keep them level */
.panel { --panel-b: 1; }
.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) brightness(var(--panel-b)) contrast(1.02);
  transform: scale(1.04);
  transition: transform 900ms var(--out), filter 500ms ease-out;
}
.panel:hover img, .panel:focus-visible img {
  transform: scale(1.1);
  filter: saturate(1) brightness(calc(var(--panel-b) * 1.04)) contrast(1.02);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* a light scrim: enough frost at the base to carry AA ink type on a
     bright photograph, fading to nothing over the object itself */
  background:
    linear-gradient(0deg, rgba(247, 248, 250, 0.94) 8%, rgba(247, 248, 250, 0.62) 38%, rgba(247, 248, 250, 0) 72%),
    linear-gradient(100deg, rgba(247, 248, 250, 0.28), transparent 52%);
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 180ms ease-out;
  opacity: 0.8;
}
.panel:hover::after { opacity: 1; background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 62%); }

.panel__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: grid;
  gap: 0.625rem;
}
.panel__title {
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.14;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  hyphens: auto;               /* last-resort guard, never clip mid-word */
  transition: color 260ms ease-out;
}
.panel__title svg {
  width: 20px; height: 20px;
  color: var(--accent-bright);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 300ms var(--out), transform 300ms var(--out);
}
.panel:hover .panel__title svg, .panel:focus-visible .panel__title svg { opacity: 1; transform: none; }
.panel__text {
  color: var(--ink-dim);
  font-size: var(--t-sm);
  max-width: 32ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms var(--out) 60ms, transform 380ms var(--out) 60ms;
}
.panel:hover .panel__text, .panel:focus-visible .panel__text { opacity: 1; transform: none; }

/* ==========================================================================
   4. HOW IT RUNS - sticky headline left, real stepped content right
   ========================================================================== */
.how {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.how__sticky { position: sticky; top: calc(var(--nav-h) + 3rem); }
.how__list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--depth);
}
.how__item {
  background: var(--canvas-2);
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: start;
  transition: background 260ms ease-out;
}
.how__item:hover { background: #ffffff; }
.how__key {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--accent);
  letter-spacing: 0.04em;
  padding-top: 0.375rem;
  min-width: 5.5rem;
}
.how__name { margin-bottom: 0.5rem; }

/* ==========================================================================
   5. INTEGRATIONS - logo strip only, no labels
   ========================================================================== */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: 3rem;
}
.logos li { display: grid; place-items: center; }
/* the source SVGs carry no fill, so they render black: opacity alone is the
   whole treatment, no filter needed */
.logos img {
  height: 26px;
  width: auto;
  opacity: 0.45;
  transition: opacity 220ms ease-out;
}
.logos li:hover img { opacity: 0.92; }

/* ==========================================================================
   6. PROOF - full-bleed media, washed light, dark type
   ========================================================================== */
.proof {
  position: relative;
  min-height: min(84vh, 46rem);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.proof__bg { position: absolute; inset: 0; z-index: 0; }
.proof__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.12) saturate(0.6); }
/* Both horizontal edges of this band get a long eased ramp to the canvas for
   the same reason as the hero film: a short fade on a full-bleed image still
   reads as a ruled line across the page. */
.proof__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(238, 239, 242, 0.97) 8%, rgba(238, 239, 242, 0.8) 48%, rgba(238, 239, 242, 0.92)),
    linear-gradient(0deg,
      var(--canvas) 0%,
      rgba(238, 239, 242, 0.92) 12%,
      rgba(238, 239, 242, 0.66) 24%,
      rgba(238, 239, 242, 0.28) 34%,
      transparent 44%,
      transparent 56%,
      rgba(238, 239, 242, 0.28) 66%,
      rgba(238, 239, 242, 0.66) 76%,
      rgba(238, 239, 242, 0.92) 88%,
      var(--canvas) 100%);
}
.proof__inner { position: relative; z-index: 1; }
.proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.proof__list { display: grid; gap: 1.5rem; margin-top: 2.5rem; max-width: 44ch; }
.proof__row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.proof__row svg { width: 18px; height: 18px; color: var(--accent); margin-top: 0.3125rem; flex: none; }
.quote {
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
}
.quote__body { font-size: clamp(1.125rem, 1.5vw, 1.4375rem); line-height: 1.42; letter-spacing: -0.02em; }
.quote__by { display: grid; gap: 0.125rem; }

/* ==========================================================================
   7. PRICING - a stepped ladder, current rung live
   ========================================================================== */
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  align-items: end;
  margin-top: 3.5rem;
}
.rung {
  position: relative;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--canvas-2);
  display: grid;
  gap: 0.5rem;
  align-content: end;
  transition: transform 300ms var(--out), background 300ms ease-out, box-shadow 300ms var(--out);
  box-shadow: 0 1px 2px rgba(23, 26, 46, 0.05);
}
.rung::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(23, 26, 46, 0.14), rgba(23, 26, 46, 0.05) 66%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.rung:nth-child(1) { min-height: 15rem; }
.rung:nth-child(2) { min-height: 17rem; }
.rung:nth-child(3) { min-height: 19rem; }
.rung:nth-child(4) { min-height: 21rem; }
.rung:hover { transform: translateY(-3px); background: #ffffff; box-shadow: var(--depth); }

.rung--live {
  background: linear-gradient(180deg, rgba(66, 92, 174, 0.14), rgba(66, 92, 174, 0.04));
  box-shadow: var(--depth);
}
.rung--live:hover { background: linear-gradient(180deg, rgba(66, 92, 174, 0.2), rgba(66, 92, 174, 0.06)); }
.rung--live::after { background: linear-gradient(135deg, rgba(66, 92, 174, 0.6), rgba(66, 92, 174, 0.16) 60%, transparent); }
.rung__state {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.rung--live .rung__state { color: var(--accent); }
.rung__price {
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.034em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rung__meta { font-size: var(--t-xs); color: var(--ink-dim); }
.price-note {
  margin-top: 2.25rem;
  display: grid;
  gap: 0.5rem;
  max-width: 62ch;
}

/* ==========================================================================
   8. FAQ - disclosure accordion
   ========================================================================== */
.faq { display: grid; gap: 0; margin-top: 3rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 180ms ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary svg { width: 18px; height: 18px; color: var(--accent); transition: transform 300ms var(--out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__answer { padding-bottom: 1.75rem; color: var(--ink-dim); max-width: 68ch; }

/* ==========================================================================
   9. CONTACT - split, real form
   ========================================================================== */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }

/* The booking card that replaced the contact form. Same panel treatment the form
   had, so the section keeps its two-column balance. */
.book { padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: 1rem; justify-items: start; }
.book p { margin: 0; }
.book__rule { width: 100%; height: 1px; border: 0; background: rgba(23, 26, 46, 0.12); margin: 0.75rem 0 0; }
.book__line {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(66, 92, 174, 0.32);
  transition: border-color 180ms ease-out;
}
.book__line:hover { border-bottom-color: var(--accent); }
.form { padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.field .hint { font-size: var(--t-xs); color: var(--ink-dim); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(23, 26, 46, 0.2);
  background: #ffffff;
  color: var(--ink);
  transition: border-color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(23, 26, 46, 0.34); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(66, 92, 174, 0.2);
}
.field .error { font-size: var(--t-xs); color: #a4231b; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #a4231b; }
.field[data-invalid="true"] .error { display: block; }

.form__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; }
.form__status { font-size: var(--t-sm); color: var(--ink-dim); }
.btn[data-busy="true"] { pointer-events: none; opacity: 0.72; }
.form[data-sent="true"] .form__fields { display: none; }
.form__done { display: none; gap: 0.75rem; }
.form[data-sent="true"] .form__done { display: grid; }
.form__fields { display: grid; gap: 1.25rem; }

/* ==========================================================================
   footer
   ========================================================================== */
.foot { padding-block: clamp(3rem, 6vw, 5rem) 3rem; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.foot__col h3 { font-size: var(--t-xs); color: var(--ink-faint); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.foot__col li + li { margin-top: 0.625rem; }
.foot__col a { font-size: var(--t-sm); color: var(--ink-dim); transition: color 160ms ease-out; }
.foot__col a:hover { color: var(--ink); }
.foot__bar { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }

/* ==========================================================================
   sub-page pieces
   ========================================================================== */
.page-hero {
  position: relative;
  min-height: min(76vh, 40rem);
  display: grid;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 42%; filter: brightness(1.04) saturate(0.8); }
.page-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(238, 239, 242, 0.97) 6%, rgba(238, 239, 242, 0.78) 52%, rgba(238, 239, 242, 0.94)),
    linear-gradient(0deg,
      var(--canvas) 0%,
      rgba(238, 239, 242, 0.84) 11%,
      rgba(238, 239, 242, 0.4) 24%,
      transparent 40%);
}
/* the shell keeps this flush with the rest of the page; constrain the type,
   not the container, or the block centres itself away from the grid */
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__inner h1 {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 24ch;
}
.page-hero .lede { max-width: 48ch; margin-top: 1.5rem; }
.crumb { font-size: var(--t-sm); color: var(--accent); margin-bottom: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.crumb svg { width: 14px; height: 14px; transform: rotate(180deg); }

.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.stack { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }

.tiles { display: grid; gap: 0.75rem; }
.tiles--2 { grid-template-columns: 1.32fr 0.68fr; }
.tiles--3 { grid-template-columns: 0.8fr 1.4fr 0.8fr; }
.tile {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--canvas-2);
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-height: 13rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 26, 46, 0.05);
}
.tile::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(23, 26, 46, 0.14), rgba(23, 26, 46, 0.04) 64%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* image card: same treatment as .panel, dark scrim and light type */
.tile--media { padding: 0; min-height: 16rem; color: var(--on-media); }
.tile--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.85); }
.tile--media .tile__cap { position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 2vw, 1.75rem); z-index: 1; }
.tile--media .small { color: var(--on-media-dim); }
/* the caption sits on the image, so the scrim has to carry AA on its own */
.tile--media::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8, 8, 12, 0.97) 22%, rgba(8, 8, 12, 0.74) 52%, rgba(8, 8, 12, 0.28) 100%);
}
/* class name kept so the HTML does not have to change; it is the accent tile */
.tile--gold { background: linear-gradient(160deg, rgba(66, 92, 174, 0.16), rgba(66, 92, 174, 0.03)); }
.tile--gold::after { background: linear-gradient(135deg, rgba(66, 92, 174, 0.5), transparent 62%); }

.tiers { display: grid; gap: 0; margin-top: 2.5rem; }
.tier {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  padding-block: 1.75rem;
  align-items: start;
}
.tier + .tier { border-top: 1px solid var(--line); }
.tier__k { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.05em; padding-top: 0.3125rem; }

.cta-band { position: relative; overflow: hidden; }
.cta-band__inner { display: grid; gap: 2rem; justify-items: start; max-width: 46rem; }

/* ==========================================================================
   reveal on scroll (IntersectionObserver adds [data-in])
   Motivation: hierarchy. Content arrives in reading order.
   ========================================================================== */
/* Driven by animation, not transition, on purpose: a `transition` shorthand
   here would override each component's own hover transition (the services
   accordion, the ladder lift, the row tint) and make them snap. The keyframes
   use `translate` rather than `transform` for the same reason.
   Content is visible by default; the hidden start state is only armed by the
   inline head script, so no-JS, a script error or a throttled tab can never
   leave a section blank. */
@media (prefers-reduced-motion: no-preference) {
  [data-anim="on"] [data-reveal] { opacity: 0; }
  [data-anim="on"] [data-reveal][data-in="true"] {
    animation: reveal 720ms var(--out) calc(var(--i, 0) * 70ms) both;
  }
  @keyframes reveal {
    from { opacity: 0; translate: 0 22px; }
    to   { opacity: 1; translate: none; }
  }
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--t-sm);
    color: var(--ink);
    padding: 0.5rem 0;
  }
  .manifesto__wrap { grid-template-columns: 1fr; }
  .manifesto { max-width: 20ch; }
  .how { grid-template-columns: 1fr; }
  .how__sticky { position: static; }
  .proof__grid { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .tiles--2, .tiles--3 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .rung:nth-child(n) { min-height: 13rem; }
}

@media (max-width: 767px) {
  :root { --gutter: 1.25rem; }
  /* 16/9 stays on phones too, so the burned-in wording is never cut. But a
     full-width 16/9 frame is only ~230px tall on a phone, which cannot carry
     an overlaid headline. So the hero stacks: film full-bleed on top, copy
     directly under it, still centred. */
  /* stacked, the copy sits below the film's fade, so there is nothing left to
     overlap: the negative margin would just crowd the CTAs into the next
     section instead */
  .hero { margin-bottom: 0; }
  .hero__stage { grid-template-columns: 1fr; overflow: visible; }
  .hero__film { grid-area: auto; }
  .hero__copy {
    grid-area: auto;
    position: static;
    transform: none;
    top: auto;
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
    margin-bottom: 0.5rem;
  }
  .hero__copy::before { display: none; }
  .panels {
    grid-template-columns: 1fr;
    height: auto;
    gap: 0.75rem;
  }
  .panels:has(.panel:hover) { grid-template-columns: 1fr; }
  .panel { min-height: 17rem; }
  .panel:nth-child(2) { min-height: 20rem; }
  .panel__text { opacity: 1; transform: none; }
  .panel__title svg { opacity: 1; transform: none; }
  .how__item { grid-template-columns: 1fr; gap: 0.75rem; }
  .how__key { padding-top: 0; }
  .ladder { grid-template-columns: 1fr; }
  .rung:nth-child(n) { min-height: auto; }
  .foot__grid { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 1fr; gap: 0.5rem; }
  .proof { min-height: auto; padding-block: 5rem; }
}

/* ==========================================================================
   OS preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ambient { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; translate: none; }
  /* the film falls back to a still frame: same composition, no movement */
  .panel__text, .panel__title svg { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .nav, .menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #f7f8fa;
  }
  .nav[data-scrolled="true"] { background: #ffffff; }
  .grain { display: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-dim: #2c3049; --ink-faint: #3d4259; --line: rgba(23, 26, 46, 0.3); }
}

@media print {
  .ambient, .grain, .nav, .menu { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   REEL - a reproduction of the Instagram Reels UI, used to show work in the
   place it will actually be seen. Measured off a 1170x2532 (390x844pt @3x)
   screenshot, so it is accurate rather than approximate.

   Two switches:
     .reel--cta      shows the sponsored "Learn more" bar
     --reel-w        sets the size; everything else scales from it
   Swap the video by replacing the contents of .reel__media.
   ========================================================================== */
.reel {
  --reel-w: 390px;
  --u: calc(var(--reel-w) / 390);   /* 1u = one device point. Measured values drop straight in. */
  --rail-x: 92.14%;
  position: relative;
  width: var(--reel-w);
  aspect-ratio: 390 / 844;
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-synthesis-weight: none;
  color: #fff;
  background: #000;
  border-radius: calc(44 * var(--u));
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  box-shadow:
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(15, 18, 34, 0.14),
    0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(15, 18, 34, 0.18),
    0 calc(46 * var(--u)) calc(90 * var(--u)) rgba(15, 18, 34, 0.20);
}

/* ---------- 1. the video ---------------------------------------------- */
.reel__media { position: absolute; inset: 0; z-index: 0; background: #0e1116; }
.reel__media > img,
.reel__media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__media--demo {
  background:
    linear-gradient(180deg, #6ea8dc 0%, #9cc4e6 26%, #c6dcee 44%, #7d838a 52%,
                    #4a4d53 60%, #34373c 78%, #26282c 100%);
}
.reel__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.10) 7%, transparent 14%),
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 12%, transparent 28%);
}

/* ---------- 2. iOS status bar ----------------------------------------- */
.reel__status {
  position: absolute; z-index: 4;
  top: calc(18.7 * var(--u)); left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(26.2 * var(--u)) 0 calc(37 * var(--u));
  line-height: 1;
}
.reel__time {
  display: inline-flex; align-items: center; gap: calc(5.7 * var(--u));
  font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -0.01em;
}
.reel__time svg { width: calc(13.3 * var(--u)); height: calc(13.3 * var(--u)); display: block; }
.reel__sys { display: inline-flex; align-items: center; gap: calc(7.7 * var(--u)); }
.reel__sys svg { display: block; }
.reel__sig  { width: calc(19.3 * var(--u)); height: calc(11 * var(--u)); }
.reel__wifi { width: calc(17 * var(--u)); height: calc(12 * var(--u)); }
.reel__batt {
  position: relative;
  width: calc(24.7 * var(--u)); height: calc(13.7 * var(--u));
  border-radius: calc(4.3 * var(--u));
  background: #fff; color: #0b0b0c;
  display: grid; place-items: center;
  font-size: calc(9 * var(--u)); font-weight: 600; letter-spacing: -0.02em;
}
.reel__batt::after {
  content: ""; position: absolute; right: calc(-3.2 * var(--u)); top: 50%; translate: 0 -50%;
  width: calc(2.5 * var(--u)); height: calc(3.7 * var(--u));
  border-radius: 0 calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0;
  background: rgba(255, 255, 255, 0.55);
}

/* ---------- 3. right action rail --------------------------------------- */
.reel__rail { position: absolute; z-index: 3; left: var(--rail-x); top: 0; bottom: 0; width: 0; }
.reel__rail > * {
  position: absolute; left: 0;
  bottom: calc(var(--cy) * var(--u));
  transform: translate(-50%, 50%);
}
/* the global media reset clamps to the parent, and the rail is a zero-width axis */
.reel svg { max-width: none; }
.reel__rail svg { display: block; }
.reel__like { width: calc(25.67 * var(--u)); height: calc(22.67 * var(--u)); }
.reel__cmt { width: calc(24 * var(--u)); height: calc(24.7 * var(--u)); }
.reel__rep { width: calc(22 * var(--u)); height: calc(28.67 * var(--u)); }
.reel__snd { width: calc(23.67 * var(--u)); height: calc(23.4 * var(--u)); }
.reel__more { width: calc(19.3 * var(--u)); height: calc(10 * var(--u)); }
/* the sponsored label belongs to the ad variant only */
.reel__ad { display: none; }
.reel--cta .reel__ad { display: block; }
.reel__n, .reel__ad {
  font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -0.01em;
}

/* ---------- 4. sponsored call to action -------------------------------- */
.reel__cta { display: none; }
.reel--cta .reel__cta {
  display: flex; align-items: center; justify-content: space-between;
  position: absolute; z-index: 3;
  left: 4.04%; width: 78.72%;
  bottom: calc(235.6 * var(--u)); height: calc(48 * var(--u));
  padding: 0 calc(15.8 * var(--u)) 0 calc(16 * var(--u));
  border-radius: calc(12.4 * var(--u));
  background: #4a5ef4;
}
.reel__cta b {
  font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -0.005em;
}
.reel__cta svg { width: calc(7.7 * var(--u)); height: calc(13.3 * var(--u)); display: block; }

/* ---------- 5. account, caption, sponsored line ------------------------ */
.reel__who {
  position: absolute; z-index: 3;
  left: calc(15.8 * var(--u)); bottom: calc(181.85 * var(--u));
  display: flex; align-items: center;
}
.reel__avatar {
  width: calc(35.7 * var(--u)); height: calc(35.7 * var(--u));
  border-radius: 50%; flex: none;
  background: #171a2e; display: grid; place-items: center;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.30);
}
.reel__avatar svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); color: #c9a227; }
.reel__handle {
  margin-left: calc(7.6 * var(--u));
  font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -0.012em;
}
.reel__follow {
  margin-left: calc(12.4 * var(--u));
  height: calc(26.6 * var(--u));
  display: grid; place-items: center;
  padding: 0 calc(8 * var(--u));
  border: calc(1.23 * var(--u)) solid rgba(255, 255, 255, 0.30);
  border-radius: calc(10 * var(--u));
  background: transparent;
  font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1;
}
.reel__cap {
  position: absolute; z-index: 3;
  left: calc(16 * var(--u)); right: calc(96 * var(--u));
  bottom: calc(153.2 * var(--u));
  font-size: calc(16 * var(--u)); font-weight: 400; line-height: 1;
  display: flex; align-items: baseline; gap: calc(6.7 * var(--u));
  white-space: nowrap;
}
.reel__cap span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.reel__cap i { font-style: normal; color: #c2c2c1; flex: none; }
.reel__tag {
  position: absolute; z-index: 3;
  left: calc(16 * var(--u)); bottom: calc(122.1 * var(--u));
  font-size: calc(14 * var(--u)); font-weight: 400; line-height: 1; color: #c1c1c0;
}
.reel__tag b { font-weight: 600; color: inherit; }

/* ---------- 6. progress + floating nav --------------------------------- */
.reel__bar {
  position: absolute; z-index: 3;
  left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(97 * var(--u));
  height: calc(2 * var(--u)); border-radius: calc(1 * var(--u));
  background: rgba(255, 255, 255, 0.30);
}
.reel__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7%;
  border-radius: inherit; background: #fff;
}
.reel__nav {
  position: absolute; z-index: 3;
  left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(22 * var(--u));
  height: calc(60.2 * var(--u)); border-radius: calc(30.1 * var(--u));
  background: rgba(28, 28, 30, 0.60);
  box-shadow: inset 0 0 0 calc(0.8 * var(--u)) rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(calc(30 * var(--u))) saturate(1.4);
  -webkit-backdrop-filter: blur(calc(30 * var(--u))) saturate(1.4);
}
.reel__tab {
  position: absolute; top: 50%; left: var(--x); translate: -50% -50%;
  display: grid; place-items: center;
}
.reel__tab svg { display: block; }
.reel__thome, .reel__treels, .reel__tsearch {
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
}
.reel__tsend { width: calc(22 * var(--u)); height: calc(21.35 * var(--u)); }
.reel__chip {
  position: absolute; top: 50%; left: 31.07%; translate: -50% -50%;
  width: calc(74.7 * var(--u)); height: calc(49.7 * var(--u));
  border-radius: calc(22 * var(--u));
  background: rgba(255, 255, 255, 0.20);
}
.reel__dot {
  position: absolute; right: calc(-2 * var(--u)); bottom: calc(0.5 * var(--u));
  width: calc(7.2 * var(--u)); height: calc(7.2 * var(--u));
  border-radius: 50%; background: #fb2f3c;
}
.reel__me {
  width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%;
  background: radial-gradient(60% 55% at 42% 32%, #d9c3a6 0%, #a98d6d 38%, #6b5340 72%, #3f3228 100%);
  box-shadow: inset 0 0 0 calc(0.8 * var(--u)) rgba(255, 255, 255, 0.22);
}

/* the band that carries a phone beside its explanation */
.showcase {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.showcase .reel { --reel-w: min(360px, 74vw); }
.showcase__cap { margin-top: 1.25rem; max-width: 46ch; }
@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; justify-items: center; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__film video { display: none; }
  .hero__film { background: var(--canvas) center / cover no-repeat url("./img/hero-poster.webp"); }
  .reel__media video { display: none; }
}