/* Hexora v2. Mobile first; min-width breakpoints at 640 and 1024.
   One accent (orange) used only on the primary button. Everything else is greyscale. */

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist_latin_var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument_serif_italic_latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
}

:root {
  --bg: #050505;
  --text: #ffffff;
  --muted: #a1a1a1;   /* 7.9 to 1 on bg */
  --line: rgb(255 255 255 / 0.1);
  --glass: rgb(38 38 38 / 0.6);
  --glass-line: rgb(255 255 255 / 0.16);
  --orange: #ff5b2e;  /* black on orange 6.79 to 1 */
  --orange-hover: #ff7b52;
  --orange-soft: rgb(255 91 46 / 0.14);
  --ink: #0a0a0a;

  /* Type scale. Desktop steps are about 1.25x apart; mobile drops the top end.
     Fine 13, small 14, body 16, lead 18 to 20, h3 24, h2 32 to 48, h1 48 to 80. */
  --fs-fine: 13px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h3: 24px;
  --fs-h2: clamp(32px, 2.2vw + 20px, 48px);
  --fs-h1: clamp(48px, 3.2vw + 34px, 80px);
  --fs-logo: 26px;

  --sans: 'Geist', 'Geist Fallback', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
@media (min-width: 1024px) {
  :root { --fs-lead: 20px; --fs-logo: 30px; }
}

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- type ---------- */
.display {
  font-size: var(--fs-h1);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.display { text-wrap: balance; }
/* Accent phrase: the wordmark's orange serif italic, so the brand x and the
   headlines share one voice. Serif runs untracked and slightly larger to match cap height. */
.accent {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -0.01em; line-height: 0.9;
  color: var(--orange); padding-right: 0.05em;
  text-shadow: 0 0 48px rgb(255 91 46 / 0.45);
}
.title { font-size: var(--fs-h2); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }

/* ---------- wordmark ---------- */
.wordmark { font-weight: 600; font-size: var(--fs-logo); letter-spacing: -0.02em; line-height: 1; }
.wordmark i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; padding: 0 0.02em; color: var(--orange); }
.wordmark--lg { font-size: clamp(48px, 4vw + 24px, 80px); }

/* ---------- nav ---------- */
.nav { position: absolute; inset: 0 0 auto; z-index: 5; }
.nav__inner { height: 72px; display: flex; align-items: center; }
.nav__home { display: inline-flex; align-items: center; min-height: 48px; }
@media (min-width: 1024px) { .nav__inner { height: 96px; } }

/* ---------- button ----------
   Flat and slim: solid orange, a hairline top highlight, an arrow that nudges on hover. */
.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px 0 26px;
  background: var(--orange); color: var(--ink);
  border-radius: 999px; font-weight: 600; font-size: var(--fs-body);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition: transform 150ms var(--ease), background-color 150ms var(--ease);
}
/* Clicks pass through to the link: Cal.com ignores clicks that land on SVG. */
.btn .icon { pointer-events: none; width: 18px; height: 18px; stroke-width: 2.25; transition: transform 150ms var(--ease); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--orange-hover); }
  .btn:hover .icon { transform: translateX(3px); }
}
.cta__micro { font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 1024px) { .btn { min-height: 56px; font-size: 17px; } }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: 112px; overflow-x: clip; }
/* Orange dawn behind the headline, plus a faint horizon line where the phone sits. */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, rgb(255 91 46 / 0.22), transparent 70%),
    radial-gradient(35% 30% at 50% 0%, rgb(255 140 90 / 0.18), transparent 70%);
}
@media (min-width: 1024px) { .hero { padding-top: 152px; } }
.hero__text { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__text .display { margin-top: 24px; }
.hero__text .lead { max-width: 22em; margin: 20px 0 36px; text-wrap: balance; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-small); color: var(--muted); background: rgb(255 255 255 / 0.03);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }

/* Stage: the phone, its light and the floating cards. */
.stage {
  position: relative; display: flex; justify-content: center;
  margin-top: 64px; padding-bottom: 40px;
}
@media (min-width: 1024px) { .stage { padding-bottom: 64px; } }
.glow {
  position: absolute; left: 50%; top: -12%; width: 1100px; height: 900px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgb(255 91 46 / 0.26), rgb(255 91 46 / 0.06) 55%, transparent 80%),
    radial-gradient(closest-side, rgb(255 255 255 / 0.06), transparent 60%);
  pointer-events: none;
}

/* ---------- phone ----------
   Licensed frame image (src/device/phone_frame.png, 1072 x 2163). Its screen opening
   is 73 px in from the left and top, 69 px from the right, 72 px from the bottom,
   with a 131 px corner radius. The screen sits under the frame at those offsets. */
.phone {
  --w: 272px;
  position: relative; z-index: 1;
  width: var(--w); aspect-ratio: 1072 / 2163;
}
@media (min-width: 1024px) { .phone { --w: 340px; } }
.phone__screen {
  position: absolute;
  top: 3.375%; bottom: 3.33%; left: 6.81%; right: 6.44%;
  overflow: hidden; isolation: isolate;
  border-radius: 14.09% / 6.49%;
  background: #121212;
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.7);
}
.phone__frame, .phone__notch { position: absolute; z-index: 2; pointer-events: none; user-select: none; }
.phone__frame { inset: 0; width: 100%; height: 100%; }
.phone__notch { top: 3.9%; left: 50.19%; width: 28.08%; height: auto; transform: translateX(-50%); }
.reels { position: absolute; inset: 0; }
.reel { position: absolute; inset: 0; transition: transform 700ms var(--ease); }
/* Off screen reels are also hidden: on a fractional screen height, a reel parked
   at 100% can leak a 1px line along the bottom edge. */
.reel:not(:first-child) { transform: translateY(100%); visibility: hidden; }
.reel img, .reel video { width: 100%; height: 100%; object-fit: cover; }
.reel__shade {
  position: absolute; inset: auto 0 0; height: 50%;
  background: linear-gradient(to top, rgb(0 0 0 / 0.85), transparent);
}
.reel__rail {
  position: absolute; right: 10px; bottom: 112px;
  display: flex; flex-direction: column; gap: 18px; color: var(--text);
}
.reel__rail .icon { width: 24px; height: 24px; stroke-width: 1.75; }
.reel__meta { position: absolute; left: 12px; right: 12px; bottom: 14px; }
.reel__handle { font-size: 14px; font-weight: 600; line-height: 1.2; }
.reel__handle span { display: block; font-size: 11px; font-weight: 400; color: rgb(255 255 255 / 0.75); margin-top: 2px; }
.reel__caption {
  margin-top: 6px; padding-right: 40px; font-size: 12.5px; line-height: 1.35; color: rgb(255 255 255 / 0.92);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel__btn {
  margin-top: 10px; display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: rgb(255 255 255 / 0.18); backdrop-filter: blur(6px);
}
.reel__btn .icon { width: 16px; height: 16px; }

/* ---------- floating cards ---------- */
.float {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
  white-space: nowrap;
  rotate: var(--r);
  animation: bob 7s ease-in-out infinite;
}
.float--2 { animation-delay: -2.3s; }
.float--3 { animation-delay: -4.6s; }
.stage.is_off .float { animation-play-state: paused; }
@keyframes bob { 50% { translate: 0 -8px; } }
.float strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.float strong + span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.float__icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: var(--orange-soft); border: 1px solid rgb(255 91 46 / 0.3); color: var(--orange);
}
.float__icon .icon { width: 18px; height: 18px; }

/* Mobile: cards overlap the phone edges but stay inside the 16px gutter. */
.float--1 { --r: 6deg;  top: 9%;  right: 16px; }
.float--2 { --r: -7deg; top: 40%; left: 16px; }
.float--3 { --r: -4deg; top: 66%; right: 16px; }

@media (min-width: 640px) {
  .float { padding: 12px 18px 12px 12px; border-radius: 16px; gap: 12px; }
  .float strong { font-size: 17px; }
  .float strong + span { font-size: var(--fs-small); }
  .float__icon { width: 44px; height: 44px; border-radius: 12px; }
  .float__icon .icon { width: 22px; height: 22px; }
  .float--1 { top: 14%; right: auto; left: calc(50% + 112px); }
  .float--2 { top: 42%; left: auto; right: calc(50% + 116px); }
  .float--3 { top: 68%; right: auto; left: calc(50% + 116px); }
}
@media (min-width: 1024px) {
  .float--1 { left: calc(50% + 128px); }
  .float--2 { right: calc(50% + 132px); }
  .float--3 { left: calc(50% + 132px); }
}

/* ---------- how it works: stacking cards ----------
   Each card sticks a little lower than the one before, so the pile shows its edges.
   main.js shrinks and dims a card as the next one slides over it (--d is depth). */
/* No divider lines between sections: each glow fades in and out so sections run together. */
.how { position: relative; padding: 48px 0 96px; }
.how::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 700px; pointer-events: none;
  background: radial-gradient(50% 50% at 15% 40%, rgb(255 91 46 / 0.10), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
  mask-image: linear-gradient(to bottom, transparent, #000 35%);
}
.how > * { position: relative; }
@media (min-width: 1024px) { .how { padding: 72px 0 128px; } }
.how__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.how__head .title { font-size: clamp(40px, 3.6vw + 22px, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.stack { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 1024px) { .stack { gap: 24px; margin-top: 56px; } }
.card {
  position: sticky; top: calc(24px + var(--i) * 14px);
  display: flex; flex-direction: column;
  height: min(540px, calc(100svh - 112px));
  border-radius: 24px; overflow: hidden;
  background: #101010; border: 1px solid var(--glass-line);
  box-shadow: 0 -12px 40px rgb(0 0 0 / 0.5);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--d, 0) * 0.04));
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: #000; opacity: min(calc(var(--d, 0) * 0.3), 0.6);
}
.card__body { padding: 24px 24px 20px; }
.card__n { font-size: var(--fs-small); font-weight: 600; color: var(--orange); font-variant-numeric: tabular-nums; }
.card h3 { margin-top: 8px; font-size: var(--fs-h3); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.card p { margin-top: 8px; color: var(--muted); }

/* ---------- how it works graphics ----------
   Drawn panels instead of photos. Shared base: near black, a faint honeycomb that
   fades out toward the edges, thin glass rows on top. Orange marks the live moment
   in each one. Animations only run while the panel is on screen (.is_on, main.js). */
.viz {
  position: relative; flex: 1; min-height: 0; margin: 0 8px 8px;
  border-radius: 16px; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 70% at 50% 100%, #161311, #0a0a0a 70%);
  border: 1px solid var(--line);
}
.viz::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='50'%3E%3Cpath d='M14 33L0 25V8L14 0L28 8V25L14 33V50' fill='none' stroke='white' stroke-opacity='.07'/%3E%3C/svg%3E") 0 0 / 28px 50px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent);
}
.viz__inner { position: absolute; inset: 0; }
.js .viz:not(.is_on) *, .js .viz:not(.is_on) *::after { animation-play-state: paused !important; }

/* Shared glass row: icon tile, two lines of text. */
.shoot, .fan__ad, .flow__row {
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.4);
}

/* 01 film: one shoot, many ads. The shoot card lands, then each line draws and
   its ad card fans out after it, once. */
.fan {
  position: absolute; inset: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.25fr); align-items: center;
}
.shoot { position: relative; display: grid; gap: 6px; padding: 10px; border-radius: 16px; }
.badge {
  position: absolute; left: 10px; top: 0; translate: 0 -55%;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--orange);
  background: linear-gradient(var(--orange-soft) 0 0), #141110; border: 1px solid rgb(255 91 46 / 0.4);
}
@media (max-width: 1023px) { .badge { left: 50%; translate: -50% -55%; padding: 2px 7px; font-size: 11px; } }
.shoot__tag { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.shoot__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.shoot__thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(168deg, transparent 52%, rgb(255 255 255 / 0.07) 53%, transparent 58%),
    radial-gradient(120% 90% at 50% 0%, #2a2a2e, #0c0c0e 70%);
  border: 1px solid var(--glass-line);
}
.shoot__car {
  position: absolute; left: 50%; top: 60%; width: 56%; translate: -50% -50%;
  fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.shoot__car * { vector-effect: non-scaling-stroke; }
.shoot__thumb .icon {
  position: relative; width: 28px; height: 28px; padding: 7px; border-radius: 50%;
  fill: currentColor; background: rgb(0 0 0 / 0.55); border: 1px solid var(--glass-line);
}
.shoot strong { font-size: var(--fs-small); font-weight: 600; line-height: 1.25; }
.shoot__meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.shoot__meta .icon { width: 13px; height: 13px; flex: none; }
.fan__lines, .fan__ads { height: min(100%, 360px); }
.fan__lines { width: 100%; overflow: visible; }
.fan__lines path {
  fill: none; stroke: url(#fan_g); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: 0 50%;
}
.fan__ads { display: grid; grid-auto-rows: 1fr; }
.fan__ads li { display: flex; align-items: center; padding: 4px 0; min-height: 0; }
/* Fixed slot for the format frame, so every hook starts at the same edge. */
.fan__ad { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
/* Node where the line meets the card. */
.fan__ad::before {
  content: ''; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; translate: 0 -50%; border-radius: 50%;
  background: #d9d9d9;
}
.fan__ad i {
  height: 26px; max-width: 22px; justify-self: center; border-radius: 3px;
  background: linear-gradient(160deg, #3a3a3a, #121212); border: 1px solid var(--glass-line);
}
.fan__ad > span { min-width: 0; }
.fan__ad strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.fan__ad strong + span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 12px; color: var(--muted); line-height: 1.3;
}
.fan__ads li:first-child .fan__ad { border-color: rgb(255 91 46 / 0.45); }
.fan__ads li:first-child .fan__ad::before { background: var(--orange); }
.js .shoot { opacity: 0; translate: 0 14px; }
.js .fan__lines path { opacity: 0; scale: 0 1; }
.js .fan__ad { opacity: 0; translate: -28px 0; scale: 0.94; }
.js .viz.is_in .shoot { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease), translate 600ms var(--ease); transition-delay: 200ms; }
.js .viz.is_in .fan__lines path {
  opacity: 1; scale: 1 1;
  transition: opacity 300ms var(--ease), scale 500ms var(--ease);
  transition-delay: calc(650ms + var(--k) * 300ms);
}
.js .viz.is_in .fan__ad {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity 500ms var(--ease), translate 600ms var(--ease), scale 600ms var(--ease);
  transition-delay: calc(850ms + var(--k) * 300ms);
}

/* 02 ads: the local radius. The ring opens out from the studio, then the people
   inside it fade in from the centre; a few keep pulsing while on screen. */
.streets { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 58%, #000 30%, transparent);
  mask-image: radial-gradient(75% 75% at 50% 58%, #000 30%, transparent);
}
.streets__minor path { stroke: rgb(255 255 255 / 0.06); stroke-width: 1; }
.streets__main path { stroke: rgb(255 255 255 / 0.1); stroke-width: 3; stroke-linecap: round; }
.streets__park { fill: rgb(255 255 255 / 0.025); }
.aud__top { position: absolute; left: 16px; right: 16px; top: 16px; display: grid; gap: 10px; z-index: 1; }
.aud__h { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.aud__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aud__chips li {
  display: flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px;
  font-size: 12px; white-space: nowrap; color: rgb(255 255 255 / 0.6);
  background: rgb(0 0 0 / 0.55); border: 1px solid var(--line);
}
.aud__chips li.on { color: var(--text); background: linear-gradient(rgb(255 91 46 / 0.16) 0 0), rgb(0 0 0 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 91 46 / 0.6); }
.aud__chips .icon { width: 12px; height: 12px; stroke-width: 3; color: var(--muted); }
.aud__chips .on .icon { color: var(--orange); }
.radius { position: absolute; left: 0; right: 0; top: 104px; bottom: 16px; container-type: size; }
.ring {
  position: absolute; left: 50%; top: 50%; width: min(92cqh, 86cqw); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1.5px solid rgb(255 91 46 / 0.7);
  background: radial-gradient(closest-side, rgb(255 91 46 / 0.12), rgb(255 91 46 / 0.03) 80%, rgb(255 91 46 / 0.1));
  box-shadow: 0 0 28px rgb(255 91 46 / 0.3), inset 0 0 28px rgb(255 91 46 / 0.15);
}
.ring i {
  position: absolute; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%;
  background: #ffc2ad; box-shadow: 0 0 8px rgb(255 91 46 / 0.8);
}
.ring i.p::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; opacity: 0;
  border: 1px solid var(--orange); animation: ping 2.8s var(--ease) infinite; animation-delay: calc(var(--k) * 3s);
}
@keyframes ping { 0% { opacity: 0.9; scale: 0.4; } 70%, 100% { opacity: 0; scale: 2.2; } }
.ring__km {
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--orange); background: #141110; border: 1px solid rgb(255 91 46 / 0.5);
}
.pin { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; translate: -50% -28px; }
.pin .icon { width: 28px; height: 28px; color: var(--ink); fill: var(--orange); stroke-width: 1.75; filter: drop-shadow(0 0 10px rgb(255 91 46 / 0.6)); }
.pin span {
  margin-top: 6px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.js .ring { opacity: 0; scale: 0.25; }
.js .ring i, .js .ring__km, .js .pin span { opacity: 0; }
.js .pin .icon { opacity: 0; translate: 0 -10px; }
.js .viz.is_in .pin .icon { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease), translate 600ms var(--ease); transition-delay: 200ms; }
.js .viz.is_in .ring { opacity: 1; scale: 1; transition: opacity 600ms var(--ease), scale 1100ms var(--ease); transition-delay: 450ms; }
.js .viz.is_in .ring i { opacity: 1; transition: opacity 600ms var(--ease); transition-delay: calc(900ms + var(--k) * 900ms); }
.js .viz.is_in .ring__km, .js .viz.is_in .pin span { opacity: 1; transition: opacity 500ms var(--ease); transition-delay: 1500ms; }

/* 03 leads: enquiry, instant text, booked. Rows land one after another, once. */
.flow {
  position: absolute; left: 16px; right: 16px; top: 50%; translate: 0 -50%;
  max-width: 400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
/* Orange thread joining the icons, so the order reads without arrows. */
.flow::before {
  content: ''; position: absolute; left: 30px; top: 30px; bottom: 30px; width: 2px; translate: -1px 0;
  background: linear-gradient(var(--glass-line), var(--orange));
}
.flow__row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; }
.flow__icon {
  position: relative;
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: rgb(255 255 255 / 0.06); border: 1px solid var(--glass-line);
}
.flow__icon .icon { width: 18px; height: 18px; }
.flow__text { flex: 1; min-width: 0; }
.flow__text strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.flow__text span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow time { align-self: flex-start; font-size: 12px; color: var(--muted); }
.flow__row:first-child .flow__icon { background: var(--orange-soft); border-color: rgb(255 91 46 / 0.3); color: var(--orange); }
.flow__row:first-child .flow__icon::after {
  content: ''; position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px #1c1c1c;
}
.flow__row:last-child { border-color: rgb(255 91 46 / 0.55); box-shadow: 0 0 0 4px var(--orange-soft), 0 16px 40px rgb(255 91 46 / 0.18); }
.flow__row:last-child .flow__icon { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.flow__row:last-child time { color: var(--orange); }
.js .flow__row { opacity: 0; translate: 0 14px; }
.js .viz.is_in .flow__row {
  opacity: 1; translate: 0 0;
  transition: opacity 500ms var(--ease), translate 600ms var(--ease);
  transition-delay: calc(200ms + var(--k) * 650ms);
}

@media (min-width: 1024px) {
  .card {
    top: calc(64px + var(--i) * 16px);
    display: grid; grid-template-columns: 1fr 1.15fr;
    height: 520px;
  }
  .card__body { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
  .card h3 { font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; max-width: 14ch; }
  .card p { font-size: var(--fs-lead); margin-top: 16px; max-width: 22em; }
  .viz { margin: 12px; }
  .fan { inset: 24px; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.1fr); }
  .shoot { padding: 12px; gap: 8px; }
  .shoot strong { font-size: 15px; }
  .fan__ad { padding: 10px 12px; }
  .fan__ad { grid-template-columns: 24px minmax(0, 1fr); }
  .fan__ad i { height: 30px; max-width: 24px; }
  .aud__top { left: 24px; right: 24px; top: 24px; }
  .radius { top: 96px; bottom: 24px; }
}

/* ---------- final ---------- */
/* The glow is not clipped at the bottom: it carries on behind the footer and fades out
   there, so the two read as one surface. Kept within ~220px so it never lengthens the page. */
.final { padding: 96px 0 112px; position: relative; overflow-x: clip; }
.final::before {
  content: ''; position: absolute; left: 50%; bottom: -220px; width: 1400px; height: 760px; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
  mask-image: linear-gradient(to bottom, #000 50%, transparent);
  background:
    radial-gradient(closest-side, rgb(255 91 46 / 0.42), rgb(255 91 46 / 0.12) 55%, transparent),
    radial-gradient(closest-side, rgb(255 160 110 / 0.25), transparent 45%);
  pointer-events: none;
}
.final .title { font-size: clamp(40px, 3.6vw + 22px, 72px); line-height: 1.02; letter-spacing: -0.035em; }
@media (min-width: 1024px) { .final { padding: 144px 0 160px; } }
.final__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.final__inner .title { max-width: 12ch; }
.final__inner .lead { max-width: 30em; margin: 24px 0 40px; }

/* ---------- footer ---------- */
.footer { position: relative; padding: 64px 0 40px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.footer__line { margin-top: 16px; color: var(--muted); font-size: var(--fs-body); }
.iglink {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-body);
  transition: transform 150ms var(--ease), border-color 150ms var(--ease);
}
.iglink:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .iglink:hover { border-color: var(--glass-line); } }
.footer__fine { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-fine); color: var(--muted); }

/* ---------- grain ----------
   A fixed, static noise layer. Takes the digital flatness off the black. */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.045;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal.is_in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel, .btn, .btn .icon, .iglink { transition: none; }
  .float { animation: none; }
  /* main.js marks every panel is_in straight away, so each rests on its final frame. */
  .viz *, .viz *::after { animation: none !important; transition: none !important; }
  .js .flow__row { opacity: 1; translate: 0 0; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}