/* ============================================================
   LDJ Marketing — one-page site
   Design language: warm dark-brown canvas that the cinematic video header
   fades into, editorial serif display, one warm accent, hairline borders.
   ============================================================ */

:root {
  /* --- brand --- */
  --accent: #ff7a1a;            /* the one accent — change here */
  --accent-dim: #e8620b;
  --accent-text: var(--accent); /* orange as text — reads fine on the dark brown */
  --accent-large: var(--accent);
  --on-accent: #1f1b16;

  /* --- surface: near-black with a hint of brown, continuous with the video header --- */
  --bg: #0e0b09;                /* page canvas — change here (the header fades into it) */
  --bg-2: #17120e;              /* alternate sections, cards */
  --bg-3: #211a14;              /* card hover */
  --line: rgba(255, 240, 225, 0.1);
  --line-strong: rgba(255, 240, 225, 0.2);
  --glass: rgba(14, 11, 9, 0.84);

  /* --- type --- */
  --text: #f3ebe0;
  --muted: #bcab99;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 16px;
  --radius-lg: 22px;
  --shell: min(1180px, 100% - 40px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Near-black scope: the nav while it sits over the video, and the work tiles.
   Components read the same tokens, so they switch automatically. The header
   itself uses the page tokens, so its bottom fade lands exactly on --bg. */
.reel,
.nav:not(.past-hero) {
  --bg: #15120f;
  --bg-2: #1d1915;
  --bg-3: #26211c;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --glass: rgba(21, 18, 15, 0.72);
  --text: #f6f1e8;
  --muted: #b3aa9c;
  --accent-text: var(--accent);
  --accent-large: var(--accent);
  color: var(--text);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 100;
  font-weight: 600;
}
.skip:focus { left: 20px; }

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

.container { width: var(--shell); margin: 0 auto; }

.section { padding: 88px 0; position: relative; }

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

h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.01em; }

h1 {
  font-family: var(--display);
  font-size: clamp(44px, 9vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 14ch;
}

h2 {
  font-family: var(--display);
  font-size: clamp(34px, 6.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

h1 em, h2 em {
  font-style: italic;
  color: var(--accent-large);
}

h3 {
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head.wide { max-width: 760px; }

.section-sub {
  color: var(--muted);
  font-size: 17px;
  margin-top: 20px;
  max-width: 52ch;
}

/* ---------- buttons ---------- */

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms var(--ease), background 180ms var(--ease),
              border-color 180ms var(--ease), color 180ms var(--ease),
              box-shadow 180ms var(--ease);
}

.btn {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
}
.btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(255, 122, 26, 0.6);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}

.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  margin-top: 28px;
}
.link-arrow span { transition: transform 200ms var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background 300ms var(--ease), border-color 300ms var(--ease),
              backdrop-filter 300ms var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav-inner {
  width: var(--shell);
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .dot { color: var(--accent); }
.wordmark-sub {
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}

.nav-links { display: none; gap: 30px; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  transition: color 160ms var(--ease);
}
.nav-links a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { display: none; }

.burger {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.nav.open .burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.open .burger span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav-mobile {
  display: grid;
  gap: 4px;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  background: var(--bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: max-height 320ms var(--ease), padding 320ms var(--ease),
              border-color 320ms var(--ease);
}
.nav.open .nav-mobile {
  max-height: 460px; /* headroom above the ~380px content height */
  padding: 12px 20px 24px;
  border-bottom-color: var(--line);
}
.nav-mobile a:not(.btn) {
  color: var(--text);
  text-decoration: none;
  font-size: 17px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.nav-mobile .btn { margin-top: 16px; }

/* ---------- aurora atmosphere ---------- */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.blob-a {
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  top: -14vw; left: -8vw;
  background: radial-gradient(circle, #8a5424 0%, transparent 68%);   /* amber glow */
}
.blob-b {
  width: 38vw; height: 38vw;
  min-width: 260px; min-height: 260px;
  top: 18vh; right: -10vw;
  background: radial-gradient(circle, #ff7a1a 0%, transparent 66%);
  opacity: 0.22;
}
.blob-c {
  width: 40vw; height: 40vw;
  min-width: 280px; min-height: 280px;
  bottom: -18vw; left: 32vw;
  background: radial-gradient(circle, #c2601c 0%, transparent 68%);   /* ember glow */
  opacity: 0.32;
}

/* ---------- hero: full-bleed video, cinematic open ---------- */

.hero {
  --p: 0;                                  /* scroll progress 0→1, set in script.js */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -72px;                       /* slide under the transparent nav */
  padding: calc(72px + 30vh) 0 44px;
  padding-top: calc(72px + 30svh);         /* mobile: keep the subject clear of the headline */
  overflow: hidden;
  background: var(--bg);                   /* same as the page, so there is no seam */
}

.hero-media {
  position: absolute;
  top: -7vh;                               /* phones: lift the subject's face above the headline block */
  top: -7svh;
  left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: -1;
  overflow: hidden;
  background: #000;
  transform: translate3d(0, calc(var(--p) * 16vh), 0);   /* moves slower than the page */
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(0.9) contrast(1.06);
  animation: hero-open 2800ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes hero-open {
  from { opacity: 0; transform: scale(1.16); }
  to   { opacity: 1; transform: none; }
}

/* darkens as you scroll away */
.hero-dim {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: calc(var(--p) * 0.75);
}

/* legibility shade: dark under the nav, deep at the bottom, fades into the page */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(21, 18, 15, 0.6) 0%, rgba(21, 18, 15, 0) 24%),
    linear-gradient(to top, var(--bg) 0%, rgba(14, 11, 9, 0.9) 24%,
                    rgba(14, 11, 9, 0.4) 56%, rgba(14, 11, 9, 0.08) 100%);
  background:                              /* follows --bg automatically */
    linear-gradient(to bottom, rgba(21, 18, 15, 0.6) 0%, rgba(21, 18, 15, 0) 24%),
    linear-gradient(to top, var(--bg) 0%,
                    color-mix(in srgb, var(--bg) 90%, transparent) 24%,
                    color-mix(in srgb, var(--bg) 40%, transparent) 56%,
                    color-mix(in srgb, var(--bg) 8%, transparent) 100%);
}

/* letterbox bars that pull away on load */
.hero-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 14vh;
  background: #000;
  z-index: 3;
  pointer-events: none;
  transform: scaleY(0);                    /* resting state: gone */
  animation: bar-open 1500ms cubic-bezier(0.77, 0, 0.175, 1) 300ms backwards;
}
.hero-bar-top    { top: 0; transform-origin: top; }
.hero-bar-bottom { top: calc(100vh - 14vh); top: calc(100svh - 14vh); transform-origin: bottom; }

@keyframes bar-open {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}

.hero-inner {
  position: relative;
  z-index: 1;
  transform: translate3d(0, calc(var(--p) * -56px), 0);
  opacity: calc(1 - var(--p) * 1.3);
}

.hero-enter { animation: rise 900ms var(--ease) var(--hd, 0ms) backwards; }

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.hero-top .pill { margin-bottom: 0; }

.hero .pill {
  background: rgba(21, 18, 15, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-title {
  font-size: clamp(48px, 12.4vw, 136px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  max-width: none;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}

/* each line rises out of its own mask */
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;                  /* room for descenders inside the mask */
  margin-bottom: -0.08em;
}
.hero-title .line > span {
  display: inline-block;
  animation: line-up 1100ms cubic-bezier(0.16, 1, 0.3, 1) var(--hd, 0ms) backwards;
}

@keyframes line-up {
  from { transform: translateY(110%); }
  to   { transform: none; }
}

.hero .lede {
  color: rgba(246, 241, 232, 0.82);
  max-width: 46ch;
}

/* pause / play — moving video needs a stop control */
.hero-toggle {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: rgba(21, 18, 15, 0.45);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color 180ms var(--ease);
}
.hero-toggle[hidden] { display: none; }
.hero-toggle:hover { border-color: var(--text); }

.hero-toggle .icon { position: relative; width: 12px; height: 12px; }
.hero-toggle .icon::before,
.hero-toggle .icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3.5px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
}
.hero-toggle .icon::before { left: 1.5px; }
.hero-toggle .icon::after  { right: 1.5px; }

.hero-toggle.is-paused .icon::before {       /* play triangle */
  left: 2.5px;
  width: 0;
  height: 0;
  background: none;
  border-radius: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.hero-toggle.is-paused .icon::after { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  margin-bottom: 26px;
}

.ping {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.6);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 122, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
}

.lede {
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--muted);
  max-width: 50ch;
  margin: 22px 0 30px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  max-width: 720px;
}
.hero-stats dt {
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-stats dd {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- logo marquee ---------- */

.proof {
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.proof-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  list-style: none;
  width: max-content;
  animation: scroll-x 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track li {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.marquee-track li:hover { color: var(--text); }

@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 32px)); }
}

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

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  overflow: hidden;
  transition: border-color 260ms var(--ease), transform 260ms var(--ease),
              background 260ms var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.card:hover {
  border-color: var(--line-strong);
  background: var(--bg-3);
  transform: translateY(-4px);
}
.card:hover::before { opacity: 0.8; }

.card-index {
  font-family: var(--display);
  font-size: 15px;
  color: var(--accent-text);
  letter-spacing: 0.08em;
}

.card h3 { margin: 14px 0 12px; }

.card p { color: var(--muted); font-size: 15.5px; }

.card-list {
  list-style: none;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.card-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--muted);
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}

/* ---------- work / reels ---------- */

.section-work { background: var(--bg-2); border-block: 1px solid var(--line); }

.reels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.reel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 320ms var(--ease), border-color 320ms var(--ease);
  cursor: pointer;
}
.reel:hover { transform: translateY(-6px); border-color: var(--line-strong); }

/* Placeholder tile — swap .reel-media for a real <video> in 9:16 */
.reel-media {
  position: relative;
  aspect-ratio: 9 / 16;
  display: grid;
  place-content: center;
  background:
    linear-gradient(160deg,
      hsl(var(--tint, 26) 55% 22%) 0%,
      hsl(calc(var(--tint, 26) + 14) 48% 11%) 55%,
      var(--bg) 100%);
}
.reel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21, 18, 15, 0.92) 0%, transparent 48%);
}

/* Real video fills the tile; the gradient stays behind it as the loading state. */
.reel-media video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-media::after { z-index: 1; }

/* Once a file actually loads, drop the "reel-1.mp4" hint. */
.reel.has-video .reel-slot { display: none; }

.reel-slot {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.reel-play {
  position: absolute;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  top: 12px; left: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(21, 18, 15, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
  transition: background 260ms var(--ease), transform 260ms var(--ease);
}
.reel-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  border-left: 8px solid var(--accent);
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}
.reel:hover .reel-play { background: var(--accent); transform: scale(1.08); }
.reel:hover .reel-play::after { border-left-color: var(--on-accent); }

/* Sound on (or, with reduced motion, playing). */
.reel-play.is-live { background: var(--accent); border-color: var(--accent); }
.reel-play.is-live::after { border-left-color: var(--on-accent); }

.reel-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reel-client { font-size: 14px; font-weight: 600; }
.reel-views { font-size: 12.5px; color: var(--accent); }

/* ---------- results ---------- */

.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}

.figures {
  display: grid;
  gap: 32px;
  margin-top: 44px;
}
.figures dt {
  font-family: var(--display);
  font-size: clamp(48px, 9vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-large);
}
.figures dd {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
  max-width: 34ch;
}

.quote {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 8px; left: 24px;
  font-family: var(--display);
  font-size: 76px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.28;
}
.quote blockquote {
  position: relative;
  font-family: var(--display);
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin-top: 24px;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.quote figcaption strong { display: block; font-weight: 600; }
.quote figcaption em { font-style: normal; color: var(--muted); font-size: 13.5px; }

.avatar {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, #5a4535, #3a2c22);
  border: 1px solid var(--line-strong);
}

/* ---------- process steps ---------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.step {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 300ms var(--ease);
}
.step:hover { padding-left: 12px; }

.step-num {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}
.step h3 { margin: 10px 0 10px; }
.step p { color: var(--muted); font-size: 15.5px; max-width: 60ch; }

/* ---------- pricing ---------- */

.section-pricing { background: var(--bg-2); border-block: 1px solid var(--line); }

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.tier {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 260ms var(--ease), transform 260ms var(--ease);
}
.tier:hover { border-color: var(--line-strong); transform: translateY(-4px); }

.tier-featured {
  border-color: rgba(255, 122, 26, 0.4);
  box-shadow: 0 24px 60px -32px rgba(255, 122, 26, 0.35);
}

.tier-badge {
  position: absolute;
  top: -11px; left: 28px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.tier-price {
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 16px 0 10px;
}
.tier-price span {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 4px;
}

.tier-note { color: var(--muted); font-size: 14.5px; }

.tier ul {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 26px 0 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex: 1;
}
.tier li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--muted);
}
.tier li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 10px; height: 6px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

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

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.portrait {
  position: relative;
  display: block;
  width: 100%;
  height: auto;                            /* let aspect-ratio win over the height attribute */
  aspect-ratio: 4 / 5;
  max-width: 460px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  object-fit: cover;                       /* the photo is 3:4, so it crops a little */
  /* stays visible as a backdrop while the photo loads */
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255, 122, 26, 0.14), transparent 60%),
    linear-gradient(150deg, var(--bg-3), var(--bg));
}
.slot-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 7px 16px;
}

.about-text p:not(.eyebrow) {
  color: var(--muted);
  font-size: 16.5px;
  margin-top: 20px;
  max-width: 54ch;
}

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

.cta {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta-inner { position: relative; z-index: 1; }
.cta h2 { margin-inline: auto; max-width: 16ch; }
.cta p {
  color: var(--muted);
  font-size: 17px;
  max-width: 50ch;
  margin: 24px auto 36px;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

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

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-top: 64px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
  padding-bottom: 56px;
}

.footer-brand { grid-column: 1 / -1; }
.footer-tag { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

.footer-col { display: grid; align-content: start; gap: 12px; }
.footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}
.footer-col a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 160ms var(--ease);
  width: fit-content;
}
.footer-col a:hover { color: var(--accent-text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

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

/* Uses animation rather than transition so that elements which also have
   their own hover transitions (cards, tiers, reels) keep them intact.
   Only hidden when JS is running, so the page stays readable without it. */
.js .reveal { opacity: 0; }

/* `backwards` (not `both`) covers the delay without holding the from-state
   afterwards — so the resting value is always the visible `opacity: 1`,
   even if the animation never gets a chance to run. */
.js .reveal.in {
  opacity: 1;
  animation: rise 700ms var(--ease) var(--rd, 0ms) backwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.delay-1 { --rd: 90ms; }
.delay-2 { --rd: 180ms; }
.delay-3 { --rd: 270ms; }
.delay-4 { --rd: 360ms; }

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ============================================================
   Breakpoints (mobile-first)
   ============================================================ */

@media (min-width: 640px) {
  .section { padding: 108px 0; }
  .hero { padding: calc(72px + 22vh) 0 52px; padding-top: calc(72px + 22svh); }

  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .reels { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }

  .footer-inner { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: auto; }
}

@media (min-width: 900px) {
  .section { padding: 132px 0; }

  /* desktop: video fills the whole hero, content anchored bottom-left */
  .hero { padding: 180px 0 60px; }
  .hero-media { top: 0; bottom: 0; height: auto; }
  .hero-media::after {
    background:
      linear-gradient(to bottom, rgba(21, 18, 15, 0.6) 0%, rgba(21, 18, 15, 0) 22%),
      linear-gradient(to right, rgba(21, 18, 15, 0.78) 0%, rgba(21, 18, 15, 0.3) 42%, rgba(21, 18, 15, 0) 66%),
      linear-gradient(to top, var(--bg) 0%, rgba(14, 11, 9, 0.82) 20%,
                      rgba(14, 11, 9, 0.2) 52%, rgba(14, 11, 9, 0) 100%);
    background:
      linear-gradient(to bottom, rgba(21, 18, 15, 0.6) 0%, rgba(21, 18, 15, 0) 22%),
      linear-gradient(to right, rgba(21, 18, 15, 0.78) 0%, rgba(21, 18, 15, 0.3) 42%, rgba(21, 18, 15, 0) 66%),
      linear-gradient(to top, var(--bg) 0%,
                      color-mix(in srgb, var(--bg) 82%, transparent) 20%,
                      color-mix(in srgb, var(--bg) 20%, transparent) 52%,
                      transparent 100%);
  }
  .section-work { padding: 140px 0; }

  .nav-links { display: flex; }
  .nav-actions .btn { display: inline-flex; }
  .burger { display: none; }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .tiers { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .reels { grid-template-columns: repeat(5, 1fr); }

  .results-grid { grid-template-columns: 6fr 5fr; gap: 72px; }
  .about-grid { grid-template-columns: 5fr 7fr; gap: 72px; }

  .steps { border-top: none; }
  .step { display: grid; grid-template-columns: 90px 260px 1fr; gap: 32px; align-items: baseline; }
  .step h3 { margin: 0; }
  .step p { margin-top: 0; }
}

@media (min-width: 1100px) {
  .hero-stats { max-width: 780px; }
  .tiers { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .tier { padding: 28px 22px; }
}