/* =============================================
   Louie Fordham — Photography & Film
   Editorial · Modern · Vibrant
   ============================================= */

:root {
  --bg: #0a0a0a;
  --bg-2: #0f0f0f;
  --bg-cream: #f4efe8;
  --fg: #f5f1ea;
  --fg-dim: rgba(245, 241, 234, 0.55);
  --fg-mute: rgba(245, 241, 234, 0.35);
  --line: rgba(245, 241, 234, 0.12);
  --line-strong: rgba(245, 241, 234, 0.25);
  --accent: #ff5b2e;
  --accent-2: #ffb347;
  --ink: #0a0a0a;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radius: 22px;
  --radius-lg: 32px;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --max: 1440px;
  --pad: clamp(20px, 5vw, 64px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  cursor: none;
}

@media (max-width: 900px) {
  body { cursor: auto; }
}

img, video, canvas, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Lenis */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Custom cursor ---------- */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 999px;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  opacity: 0;
}
.cursor {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--fg);
  background: transparent;
}
.cursor-dot {
  width: 5px;
  height: 5px;
  background: var(--fg);
}
.cursor.is-active {
  width: 70px;
  height: 70px;
  background: var(--fg);
  border-color: transparent;
}
@media (max-width: 900px) {
  .cursor, .cursor-dot { display: none; }
}

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: grid;
  place-items: center;
  gap: 24px;
  align-content: center;
}
.loader__bar {
  width: min(420px, 60vw);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.loader__fill {
  height: 100%;
  width: 0%;
  background: var(--fg);
}
.loader__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad);
  mix-blend-mode: difference;
  color: var(--fg);
}
.nav__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.nav__brand-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.nav__brand-name { font-size: 13px; opacity: 0.85; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  padding: 9px 16px 9px 18px !important;
  opacity: 1 !important;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__cta:hover { background: var(--fg); color: var(--ink); }
.nav__cta svg { transition: transform 0.3s var(--ease); }
.nav__cta:hover svg { transform: translate(2px, -2px); }

@media (max-width: 720px) {
  .nav__brand-name { display: none; }
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  align-items: end;
  padding: 110px var(--pad) 70px;
  overflow: hidden;
  background: #050505;
  isolation: isolate;
}
.hero__strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__strip-track {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  padding: 0 clamp(14px, 1.4vw, 22px);
  height: 100%;
  will-change: transform;
}
.hero__tile {
  flex: 0 0 auto;
  width: clamp(280px, 30vw, 520px);
  height: 78vh;
  border-radius: clamp(14px, 1.2vw, 22px);
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7);
}
.hero__tile--tall { height: 88vh; }
.hero__tile--wide {
  width: clamp(420px, 42vw, 720px);
  height: 70vh;
}
.hero__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.62) contrast(1.06) saturate(1.05);
  display: block;
}
.hero__bg-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 80% 110%, rgba(255, 91, 46, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.hero__noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.4vh, 38px);
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.hero__overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--fg);
  display: inline-block;
  animation: pulse 2.4s var(--ease) infinite;
}
.dot--accent { background: var(--accent); box-shadow: 0 0 18px var(--accent); }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.45; }
}

.hero__title-wrap {
  perspective: 1400px;
  perspective-origin: 50% 50%;
  width: 100%;
}
.hero__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(44px, 8.5vw, 132px);
  /* line-height bumped to 1.0 so italic Instrument Serif descenders
     ('g', 'p', '.' tail) fit inside the line-box. Without this, the
     overflow:hidden on .split-line was clipping them. */
  line-height: 1.0;
  letter-spacing: -0.045em;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  text-shadow: 0 14px 60px rgba(0, 0, 0, 0.5);
}
.hero__line {
  display: block;
  overflow: hidden;
  transform-style: preserve-3d;
}
.hero__word {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform;
  backface-visibility: hidden;
}

.hero__line--italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-left: clamp(40px, 9vw, 160px);
}
.hero__line--for {
  font-weight: 300;
  color: var(--fg-dim);
  font-size: 0.62em;
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.hero__line--accent {
  color: var(--accent);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-left: clamp(20px, 5vw, 80px);
  font-size: 0.92em;
}

.hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 640px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__meta-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.hero__meta-value {
  font-size: 14px;
  color: var(--fg);
  letter-spacing: 0.01em;
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  right: var(--pad);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero__scroll-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, var(--fg) 50%, transparent 50%);
  background-size: 100% 200%;
  animation: scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { background-position: 0 -64px; }
  100% { background-position: 0 64px; }
}

.hero__corner {
  position: absolute;
  z-index: 3;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-feature-settings: "tnum";
}
.hero__corner--tl { top: 86px; left: var(--pad); }
.hero__corner--tr { top: 86px; right: var(--pad); }
.hero__corner--bl { bottom: 32px; left: var(--pad); }
.hero__corner--br { bottom: 32px; left: 50%; transform: translateX(-50%); color: var(--accent); }

@media (max-width: 720px) {
  .hero__corner--tr,
  .hero__corner--br { display: none; }
  .hero__scroll { display: none; }
  .hero__meta { grid-template-columns: 1fr; }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 24px 0;
  position: relative;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 38px;
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4.5vw, 56px);
  letter-spacing: -0.02em;
  will-change: transform;
}
.marquee__star {
  color: var(--accent);
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.55em;
}

/* ---------- Manifesto ---------- */
.manifesto {
  background: var(--bg-cream);
  color: var(--ink);
  padding: clamp(100px, 18vh, 220px) var(--pad);
  position: relative;
}
@media (max-width: 760px) {
  /* Tighter padding on mobile + drop the bottom padding to almost zero
     because the next section (Campaign) is the same cream background —
     the combined padding was creating ~280px of empty cream space. */
  .manifesto { padding: 80px var(--pad) 32px; }
  .manifesto__inner { gap: 48px; }
}
.manifesto__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 80px;
}
.manifesto__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
}
.manifesto__label .dot { background: var(--ink); }
.manifesto__statement {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 7.6vw, 132px);
  /* 1.08 gives Instrument Serif italic 'g' descender room to fully
     render inside its line-box without being clipped by .split-line's
     overflow:hidden. */
  line-height: 1.08;
  letter-spacing: -0.04em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.14em 0.28em;
}
.manifesto__statement .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.manifesto__statement > span {
  display: inline-block;
  overflow: hidden;
}
.manifesto__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  max-width: 1040px;
  margin-left: auto;
}
.manifesto__columns p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.78);
  margin: 0;
}
@media (max-width: 720px) {
  .manifesto__columns { grid-template-columns: 1fr; }
}

/* ---------- Reel / Work ---------- */
.reel {
  background: var(--bg);
  padding: clamp(100px, 16vh, 200px) var(--pad);
}
@media (max-width: 760px) {
  /* Same mobile-padding trim as Process — keeps section transitions
     feeling continuous instead of having huge black voids between them. */
  .reel { padding: 56px var(--pad); }
  .reel__head { margin-bottom: 36px; }
}
.reel__head {
  max-width: var(--max);
  margin: 0 auto clamp(48px, 8vh, 110px);
  display: grid;
  gap: 28px;
}
.reel__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.reel__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.reel__title .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.reel__intro {
  max-width: 560px;
  font-size: 15px;
  color: var(--fg-dim);
  margin: 0;
}
.reel__grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
.reel__grid > .card {
  aspect-ratio: 4 / 5;
}

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

.card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1a1a;
  isolation: isolate;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  transform: translateZ(0);
  transition: transform 0.6s var(--ease-out);
  cursor: none;
}
.card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.card__media img,
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease);
  filter: brightness(0.78) saturate(1.05);
}
.card:hover .card__media img,
.card:hover .card__media video {
  transform: scale(1.1);
  filter: brightness(0.88) saturate(1.1);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 35%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.card__index {
  position: absolute;
  top: 22px;
  left: 22px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.85);
  z-index: 3;
}
.card__type {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  z-index: 3;
}
.card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 3;
  transform: translateY(8px);
  transition: transform 0.6s var(--ease-out);
}
.card:hover .card__info { transform: translateY(0); }
.card__category {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.card__title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.card__client {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.01em;
}

.reel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: clamp(48px, 8vh, 96px);
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.reel__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.reel__more:hover {
  background: var(--fg);
  color: var(--ink);
  border-color: var(--fg);
}
.reel__more svg { transition: transform 0.3s var(--ease); }
.reel__more:hover svg { transform: translate(3px, -3px); }
.reel__more--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-dim);
  padding-left: 8px;
}
.reel__more--ghost:hover {
  background: transparent;
  color: var(--fg);
  border-color: transparent;
}

/* ---------- OFFER ---------- */
.offer {
  position: relative;
  padding: clamp(100px, 16vh, 200px) var(--pad);
  background: #050505;
  overflow: hidden;
  isolation: isolate;
}
.offer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.offer__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(120px);
  opacity: 0.65;
  will-change: transform;
}
.offer__orb--1 { width: 540px; height: 540px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); top: -120px; left: -120px; }
.offer__orb--2 { width: 620px; height: 620px; background: radial-gradient(circle, #5b2eff 0%, transparent 65%); bottom: -200px; right: -200px; opacity: 0.5; }
.offer__orb--3 { width: 380px; height: 380px; background: radial-gradient(circle, var(--accent-2) 0%, transparent 65%); top: 30%; right: 20%; opacity: 0.35; }

.offer__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: clamp(48px, 8vh, 90px);
}
.offer__head {
  display: grid;
  gap: 24px;
  max-width: 1100px;
}
.offer__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.offer__eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.offer__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 1.0;
  letter-spacing: -0.045em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.18em;
  color: var(--fg);
}
.offer__title-strong,
.offer__title-strong .split-line__inner {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.offer__title-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.offer__sub {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--fg);
  max-width: 720px;
  margin: 0;
}

.offer__card {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  overflow: hidden;
  isolation: isolate;
}
.offer__card-glow {
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, var(--accent) 60deg, transparent 120deg, transparent 360deg);
  opacity: 0.5;
  z-index: -1;
  animation: rotateGlow 12s linear infinite;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateGlow {
  to { --angle: 360deg; }
}

.offer__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.offer__price {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.offer__price-currency {
  font-size: clamp(28px, 3vw, 42px);
  color: var(--fg-dim);
  margin-top: 12px;
}
.offer__price-figure {
  font-size: clamp(80px, 12vw, 180px);
  background: linear-gradient(135deg, #fff 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.offer__price-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}
.offer__price-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-self: flex-end;
}
.offer__price-detail {
  font-size: 13px;
  color: var(--fg-dim);
  max-width: 280px;
}

.offer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.offer__list li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.offer__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.offer__list-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--accent);
  line-height: 1;
  margin-top: 4px;
}
.offer__list h4 {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.offer__list p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.5;
}

.offer__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.offer__honest {
  display: grid;
  gap: 8px;
  max-width: 540px;
}
.offer__honest-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.offer__honest p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--fg);
}
@media (max-width: 760px) {
  .offer__bottom { grid-template-columns: 1fr; }
}

/* ============================================================
   A/B compare marker — small banner above the v3 variant.
   ============================================================ */
.ab-marker {
  position: relative;
  z-index: 5;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 90, 31, 0.06), #050505);
  color: var(--accent);
}
.ab-marker--v3 { border-color: rgba(255, 90, 31, 0.25); }

/* ============================================================
   OFFER · V2 — Editorial rebuild.
   Reuses .offer / .offer__orb / .offer__list typography for
   visual continuity. Only the new layout pieces live here.
   ============================================================ */
.offer--v2 .offer__inner {
  gap: clamp(64px, 10vh, 130px);
  max-width: 1280px;
}

/* ----- Editorial running header ----- */
.offer-v2__chrome {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-bottom: clamp(-16px, -1vh, -8px);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.offer-v2__chrome-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-transform: none;
  line-height: 1;
}
.offer-v2__chrome-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  max-width: 280px;
}
.offer-v2__chrome-rule:first-of-type { max-width: 60px; }
.offer-v2__chrome-label {
  color: var(--fg);
}
.offer-v2__chrome-meta {
  margin-left: auto;
  color: var(--fg-mute);
}
@media (max-width: 760px) {
  .offer-v2__chrome { flex-wrap: wrap; gap: 12px; }
  .offer-v2__chrome-rule { display: none; }
  .offer-v2__chrome-meta { margin-left: 0; flex-basis: 100%; opacity: 0.7; }
}

/* ----- Problem hook headline ----- */
.offer-v2__head {
  display: grid;
  gap: clamp(28px, 4vh, 44px);
  max-width: 1240px;
}
.offer-v2__problem {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(54px, 9.4vw, 156px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--fg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.08em 0.24em;
}
.offer-v2__problem-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ----- Transformation block ----- */
.offer-v2__transform-wrap {
  display: grid;
  grid-template-columns: clamp(28px, 3vw, 44px) 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  max-width: 960px;
  padding-top: clamp(8px, 1.5vh, 16px);
}
.offer-v2__transform-mark {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  color: var(--accent);
  margin-top: 4px;
  opacity: 0.9;
}
.offer-v2__transform {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.38;
  color: var(--fg);
  letter-spacing: -0.008em;
}
.offer-v2__transform em {
  font-style: italic;
  color: var(--accent);
}
.offer-v2__name {
  margin: clamp(8px, 1.5vh, 16px) 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.offer-v2__name-rule {
  width: 56px;
  height: 1px;
  background: var(--accent);
}
.offer-v2__name .offer__title-strong {
  letter-spacing: 0.16em;
}

/* ----- Sectioned blocks (with leading editorial mark) ----- */
.offer-v2__section {
  display: grid;
  gap: clamp(28px, 4vh, 44px);
}
.offer-v2__section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.offer-v2__section-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
  transform: translateY(2px);
}
.offer-v2__section-label {
  color: var(--fg);
}

/* ----- Outcomes list ----- */
.offer-v2__outcomes {
  max-width: 1120px;
  gap: clamp(24px, 3vh, 36px);
}
.offer-v2__outcomes li {
  grid-template-columns: 72px 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(8px, 1.5vh, 16px) 0 clamp(28px, 3.5vh, 40px);
  position: relative;
  transition: padding-left 0.5s var(--ease), border-color 0.5s var(--ease);
}
.offer-v2__outcomes li:hover {
  padding-left: 8px;
  border-color: rgba(255, 90, 31, 0.4);
}
.offer-v2__outcomes .offer__list-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 2.6vw, 36px);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-top: 6px;
}
.offer-v2__outcomes h4 {
  font-size: clamp(20px, 1.95vw, 28px);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.014em;
  margin-bottom: 10px;
}
.offer-v2__outcomes p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 720px;
}

/* ----- Social proof ----- */
.offer-v2__proof {
  position: relative;
  margin: 0;
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4.5vw, 56px) clamp(32px, 4vw, 44px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-width: 980px;
  overflow: hidden;
  isolation: isolate;
}
.offer-v2__proof::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.offer-v2__proof-mark {
  position: absolute;
  top: -28px;
  left: clamp(20px, 3vw, 36px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(120px, 14vw, 200px);
  line-height: 1;
  color: var(--accent);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.offer-v2__proof blockquote,
.offer-v2__proof figcaption {
  position: relative;
  z-index: 1;
}
.offer-v2__proof blockquote {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.4;
  color: var(--fg);
  letter-spacing: -0.008em;
}
.offer-v2__proof blockquote p { margin: 0; }
.offer-v2__proof blockquote em {
  font-style: italic;
  color: var(--fg-dim);
}
.offer-v2__proof figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.offer-v2__proof-dash {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0;
}

/* ----- Why this rate (rationale callout) ----- */
.offer-v2__rationale {
  display: grid;
  gap: clamp(16px, 2vh, 22px);
  padding: clamp(36px, 5vh, 56px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-left: 1px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background:
    radial-gradient(140% 200% at 0% 0%, rgba(255, 90, 31, 0.08), transparent 60%);
  max-width: 980px;
}
.offer-v2__rationale-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.offer-v2__rationale-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.offer-v2__rationale-decor {
  font-size: 11px;
  color: var(--accent);
  opacity: 0.6;
  letter-spacing: 0;
}
.offer-v2__rationale p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.75vw, 26px);
  line-height: 1.5;
  color: var(--fg);
  letter-spacing: -0.008em;
  max-width: 760px;
}
.offer-v2__rationale em {
  font-style: italic;
  color: var(--accent);
}

/* ----- Price block ----- */
.offer-v2__price-block {
  display: grid;
  gap: clamp(28px, 4vh, 44px);
  max-width: 980px;
}
.offer-v2__price-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  opacity: 0.8;
}
.offer-v2__price-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding: clamp(8px, 1.5vh, 16px) 0;
}
.offer-v2__price-figure-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.82;
}
.offer-v2__price-currency {
  font-size: clamp(28px, 3vw, 44px);
  color: var(--fg-dim);
  margin-top: 14px;
}
.offer-v2__price-figure {
  font-size: clamp(96px, 14vw, 220px);
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-2) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.05em;
}
.offer-v2__price-suffix {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--fg-mute);
  text-transform: uppercase;
  align-self: flex-end;
  padding-bottom: 18px;
  margin-left: 12px;
}
.offer-v2__scarcity {
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
  justify-items: start;
}
.offer-v2__scarcity .offer__price-tag {
  margin-bottom: 4px;
}
.offer-v2__scarcity p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 380px;
}
.offer-v2__scarcity strong {
  font-weight: 500;
  color: var(--fg);
}
@media (max-width: 760px) {
  .offer-v2__price-inner { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .offer-v2__price-suffix { padding-bottom: 8px; margin-left: 8px; }
}

/* ----- CTA ----- */
.offer-v2__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px clamp(24px, 3vw, 40px);
  padding-top: clamp(4px, 1vh, 12px);
}
.offer-v2__cta .btn--primary {
  padding: 18px 30px;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.offer-v2__cta-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--fg);
  letter-spacing: -0.008em;
  max-width: 460px;
}

/* ----- Sign-off ----- */
.offer-v2__signoff {
  margin: clamp(8px, 1.5vh, 20px) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--fg-mute);
  letter-spacing: 0.04em;
}

/* ============================================================
   OFFER · V3 — Reading-view rebuild.
   Same copy as v2, compressed into a single viewport (no
   intra-section scroll). Three zones: Hero / Body grid / Footer.
   ============================================================ */
.offer--v3 {
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;          /* iOS safe vh */
  display: flex;
  align-items: center;
}
.offer-v3__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 120px) clamp(20px, var(--pad), 64px) clamp(40px, 6vh, 80px);
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: clamp(20px, 2.6vh, 36px);
}

/* ----- Chrome ----- */
.offer-v3__chrome {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.offer-v3__chrome-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
  text-transform: none;
  line-height: 1;
}
.offer-v3__chrome-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  max-width: 240px;
}
.offer-v3__chrome-rule:first-of-type { max-width: 50px; }
.offer-v3__chrome-label { color: var(--fg); }
.offer-v3__chrome-meta { margin-left: auto; }

/* ----- Hero zone (problem headline + transformation) ----- */
.offer-v3__hero {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: end;
  padding-bottom: clamp(12px, 1.8vh, 22px);
  border-bottom: 1px solid var(--line);
}
.offer-v3__problem {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--fg);
  max-width: 14ch;
}
.offer-v3__problem-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.offer-v3__transform {
  display: grid;
  grid-template-columns: clamp(20px, 2vw, 30px) 1fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: start;
  padding-bottom: 6px;
}
.offer-v3__transform-mark {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  color: var(--accent);
  margin-top: 2px;
}
.offer-v3__transform p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.42;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.offer-v3__transform em {
  font-style: italic;
  color: var(--accent);
}

/* ----- Body zone (outcomes left | trust right) ----- */
.offer-v3__body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
}
.offer-v3__col {
  display: grid;
  gap: clamp(12px, 1.6vh, 18px);
}
.offer-v3__col-label {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.offer-v3__col-label::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--accent);
}

/* ----- Outcomes (compact 2x2 grid) ----- */
.offer-v3__outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vh, 22px) clamp(20px, 2.4vw, 32px);
}
.offer-v3__outcomes li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  padding-top: clamp(10px, 1.4vh, 16px);
  border-top: 1px solid var(--line);
}
.offer-v3__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1;
  color: var(--accent);
  margin-top: 2px;
}
.offer-v3__outcomes h4 {
  margin: 0 0 4px;
  font-size: clamp(13px, 1.05vw, 15.5px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--fg);
}
.offer-v3__outcomes p {
  margin: 0;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.45;
  color: var(--fg-dim);
}

/* ----- Trust column (rationale + proof) ----- */
.offer-v3__rationale {
  display: grid;
  gap: 8px;
  padding: clamp(14px, 2vh, 22px) clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line);
  border-left: 1px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: radial-gradient(140% 200% at 0% 0%, rgba(255, 90, 31, 0.07), transparent 60%);
}
.offer-v3__rationale p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.45;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.offer-v3__rationale em {
  color: var(--accent);
  font-style: italic;
}

.offer-v3__proof {
  position: relative;
  margin: 0;
  padding: clamp(16px, 2vh, 22px) clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
  isolation: isolate;
}
.offer-v3__proof-mark {
  position: absolute;
  top: -8px;
  left: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 80px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.offer-v3__proof blockquote,
.offer-v3__proof figcaption {
  position: relative;
  z-index: 1;
  margin: 0;
}
.offer-v3__proof blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.05vw, 15.5px);
  line-height: 1.42;
  color: var(--fg-dim);
  margin-bottom: 8px;
}
.offer-v3__proof blockquote em {
  color: var(--fg);
  font-style: italic;
}
.offer-v3__proof figcaption {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ----- Footer zone (price | CTA) ----- */
.offer-v3__footer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(16px, 2.4vh, 28px);
  border-top: 1px solid var(--line);
}
.offer-v3__price {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 6px clamp(14px, 1.6vw, 22px);
  align-items: end;
}
.offer-v3__price-currency {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.04em;
  color: var(--fg-dim);
  align-self: start;
  margin-top: 12px;
}
.offer-v3__price-figure {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(64px, 8.5vw, 132px);
  letter-spacing: -0.05em;
  line-height: 0.85;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-2) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.offer-v3__price-meta {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
}
.offer-v3__price-detail {
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.02em;
}
.offer-v3__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 2.5vw, 32px);
  justify-self: end;
}
.offer-v3__cta .btn--primary {
  padding: 14px 26px;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.offer-v3__cta-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--fg);
  max-width: 320px;
  line-height: 1.4;
}

/* ----- Tablet collapse (≤980px) ----- */
@media (max-width: 980px) {
  .offer--v3 {
    /* Remove the desktop reading-view sizing/flex-centering. On mobile
       the section needs to flow naturally — flex centering inside a
       min-height: 100vh container leaves a huge black void below the
       content because the content can't fill a phone viewport vertically
       and the flex pushes everything up but reserves the space. */
    min-height: auto !important;
    display: block;
    align-items: initial;
  }
  .offer-v3__inner { padding-top: 80px; padding-bottom: 60px; }
  .offer-v3__hero { grid-template-columns: 1fr; }
  .offer-v3__body { grid-template-columns: 1fr; }
  .offer-v3__outcomes { grid-template-columns: 1fr 1fr; }
  .offer-v3__footer { grid-template-columns: 1fr; }
  .offer-v3__cta { justify-self: start; }
  .offer-v3__chrome { flex-wrap: wrap; gap: 12px; }
  .offer-v3__chrome-rule { display: none; }
  .offer-v3__chrome-meta { margin-left: 0; flex-basis: 100%; opacity: 0.7; }
}
@media (max-width: 600px) {
  .offer-v3__outcomes { grid-template-columns: 1fr; }
  .offer-v3__problem { font-size: clamp(32px, 9vw, 56px); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn--primary {
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 0 rgba(255,91,46, 0.5);
}
.btn--primary:hover {
  background: #ff7a52;
  box-shadow: 0 0 60px 0 rgba(255,91,46, 0.45);
}
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  background: var(--fg);
  color: var(--ink);
  border-color: var(--fg);
}

/* ---------- Process ---------- */
/* ============================================================
   PROCESS — Static 5-step timeline (always-visible).
   Replaces the previous Apple-style horizontal-pinned scroll
   which was fragile and could leave the section in a black
   pinned state. This version always shows all 5 steps in one
   row on desktop, collapses to 1 column on mobile.
   ============================================================ */
.process {
  background: var(--bg);
  padding: clamp(100px, 16vh, 200px) var(--pad);
  overflow: hidden;
}
@media (max-width: 760px) {
  /* Trim the giant section padding on mobile — was creating ~200px of
     black void between Offer and Process content. */
  .process { padding: 56px var(--pad) 56px; }
  .process__head { margin-bottom: 48px; gap: 16px; }
}
.process__head {
  max-width: var(--max);
  margin: 0 auto clamp(70px, 11vh, 130px);
  display: grid;
  gap: 24px;
}
.process__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.process__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  display: grid;
}
.process__title .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.process__intro {
  margin: 6px 0 0;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 640px;
}

/* ----- Timeline grid ----- */
.process__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.4vw, 44px);
}
.process__rail {
  position: absolute;
  top: 32px;            /* aligned to centre of node circle (64/2) */
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 90, 31, 0.6) 6%,
    var(--line-strong) 50%,
    rgba(255, 90, 31, 0.6) 94%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* ----- Each step ----- */
.step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  text-align: left;
  /* leave room above title so the node circle sits on the rail */
}
.step__node {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #131313, #0a0a0a);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.step__node span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.step:hover .step__node {
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(255, 90, 31, 0.18);
}
.step__day {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.step__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.step__body {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15.5px);
  line-height: 1.5;
  color: var(--fg-dim);
}

/* ----- Tablet (3 cols) ----- */
@media (max-width: 1080px) {
  .process__timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vh, 48px) clamp(20px, 3vw, 32px);
  }
  .process__rail { display: none; }
  .step__node { margin-bottom: 8px; }
}

/* ----- Mobile (vertical timeline, circles in their own left gutter) ----- */
@media (max-width: 640px) {
  .process__timeline {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 0;
    position: relative;
  }
  .step {
    position: relative;
    /* Reserve a 60px gutter on the left for the circle so the day +
       title + body text never overlaps it. */
    padding-left: 60px;
    min-height: 44px;
  }
  .step__node {
    position: absolute;
    left: 0;
    top: 2px;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
  }
  .step__node span { font-size: 18px; }
  .step__day,
  .step__title,
  .step__body {
    /* Force these into the gutter-padded column rather than starting
       at the row's left edge. */
    margin-left: 0;
  }
  .step__title { font-size: clamp(22px, 6vw, 28px); }
  /* Vertical rail through circle centers. The circle is 44px wide and
     starts at left:0 of each step (after padding-left:60px on the step
     pushes content right), so the rail runs at x = 22px from the step
     left edge. Use ::before on the timeline to span the full column. */
  .process__timeline::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 22px;
    bottom: 22px;
    width: 1px;
    background: linear-gradient(180deg, var(--accent), var(--line-strong) 50%, var(--accent));
    opacity: 0.45;
    pointer-events: none;
  }
}

/* ---------- Campaign ---------- */
.campaign {
  background: var(--bg-cream);
  color: var(--ink);
  padding: clamp(100px, 16vh, 200px) var(--pad);
}
@media (max-width: 760px) {
  /* Trim top padding so Campaign visually flows from Manifesto rather
     than starting a whole new "section" on the same cream background. */
  .campaign { padding: 32px var(--pad) 80px; }
  .campaign__inner { gap: 36px; }
}
.campaign__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 8vh, 80px);
}
.campaign__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
}
.campaign__label .dot { background: var(--ink); }
.campaign__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(48px, 9vw, 160px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  display: flex;
  flex-direction: column;
}
.campaign__title .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-left: clamp(20px, 5vw, 80px);
}
.campaign__body {
  max-width: 720px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.78);
  margin: 0;
}
.campaign__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.campaign__item {
  background: rgba(10, 10, 10, 0.04);
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: var(--radius);
  padding: 32px;
  display: grid;
  gap: 12px;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.campaign__item:hover { background: rgba(10, 10, 10, 0.07); transform: translateY(-4px); }
.campaign__item-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
}
.campaign__item h3 {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.campaign__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.65);
}
.campaign__cta {
  justify-self: start;
  background: var(--ink);
  color: var(--bg-cream);
  border-color: var(--ink);
}
.campaign__cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
@media (max-width: 760px) {
  .campaign__grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact {
  position: relative;
  background: var(--bg);
  padding: clamp(120px, 20vh, 240px) var(--pad);
  overflow: hidden;
}
.contact__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(255,91,46,0.18), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(91,46,255,0.12), transparent 50%);
  z-index: 0;
}
.contact__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 8vh, 80px);
}
.contact__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact__title .ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-left: clamp(20px, 5vw, 80px);
}

.contact__rows {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.contact__row {
  display: grid;
  grid-template-columns: 160px 1fr 32px;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.4s var(--ease), color 0.4s var(--ease);
  position: relative;
}
.contact__row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: -1;
}
.contact__row:hover { padding-left: 24px; color: var(--accent); }
.contact__row:hover::before { opacity: 0.06; }
.contact__row-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.contact__row-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -0.01em;
}
.contact__row-arrow {
  text-align: right;
  font-size: 22px;
  transition: transform 0.4s var(--ease);
}
.contact__row:hover .contact__row-arrow { transform: translateX(8px); }

@media (max-width: 600px) {
  .contact__row { grid-template-columns: 1fr 24px; }
  .contact__row-label { display: none; }
}

.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  justify-self: start;
  background: var(--accent);
  color: var(--ink);
  padding: 32px 44px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: -0.01em;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
  box-shadow: 0 30px 80px -20px rgba(255,91,46, 0.5);
}
.contact__cta:hover {
  background: #ff7a52;
  transform: translateY(-2px);
}
.contact__cta-arrow {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
  transition: transform 0.4s var(--ease);
}
.contact__cta:hover .contact__cta-arrow { transform: rotate(45deg); }

/* ---------- Footer ---------- */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 40px var(--pad);
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
}
.footer__col { display: flex; flex-direction: column; gap: 4px; }
.footer__col--mid { text-align: center; }
.footer__col--end { text-align: right; flex-direction: row; justify-content: flex-end; gap: 18px; }
.footer__col--end a { color: var(--fg-dim); transition: color 0.3s var(--ease); }
.footer__col--end a:hover { color: var(--fg); }
.footer__brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr; text-align: left; }
  .footer__col--mid, .footer__col--end { text-align: left; justify-content: flex-start; }
}

/* ---------- Reveal helpers ---------- */
/* Reveal initial states are managed by JS (gsap.fromTo) so that if JS fails
   the content is still readable. */
/* ============================================================
   MOBILE PERFORMANCE BUDGET
   ============================================================
   On touch devices we sacrifice visual flourishes for content
   visibility. The bug — sections appearing invisible during
   scroll-down — is caused by mobile GPUs/CPUs unable to keep up
   with multiple compounding effects:
     • backdrop-filter: blur(20px) on the offer card + nav (~4 instances)
     • filter: blur(120px) on three offer orbs
     • filter: brightness/saturate on every card and gallery image
     • transform + will-change forcing GPU layer creation
   The browser falls behind on repaints during fast scroll, content
   appears invisible until the queue clears (typically at the bottom
   of the page). Disabling these effects eliminates the issue.
   ============================================================ */
@media (max-width: 980px) {
  /* 1. Force content visibility regardless of GSAP state. */
  :is(.process, .reel, .manifesto, .campaign, .offer, .contact) .split-line__inner,
  :is(.process, .reel, .manifesto, .campaign, .offer, .contact) [data-reveal] {
    transform: none !important;
    opacity: 1 !important;
  }

  /* 2. Kill all backdrop-filters — single most expensive paint op on mobile. */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3. Hide the offer orbs entirely (each has filter:blur(120px), 3 of them). */
  .offer__orb,
  .offer__bg {
    display: none !important;
  }

  /* 4. Strip image filters / scales / will-change. The colour grading
     was a desktop polish; on mobile it doubles paint cost per image. */
  .gallery-item img,
  .gallery-item video,
  .card__media img,
  .project__hero-bg img {
    filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* 5. Remove will-change on hero strip track — it runs a constant rAF
     transform anyway; will-change just costs GPU memory. */
  .hero__strip-track,
  .hero__title {
    will-change: auto !important;
  }
}

.split-line {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  /* Extend the clip box below the line-box so descenders (g, p, y, j, period
     tail) fit without being cropped. Negative margin neutralises the extra
     padding so surrounding layout is unchanged. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
  clip-path: inset(0 0 -0.2em 0);
}
.split-line__inner {
  display: inline-block;
  line-height: inherit;
  will-change: transform;
  /* Match the parent's padding so the inner element occupies the full
     extended box during transform animations. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}