/* ====================================================
   BONEHEAD DIGITAL — Homepage v0.4
   Studio dark · cream/black/orange · KCTallboy + IBM Plex Mono
   Round 3: light pricing, risk-reversal, are-we-fit, studios moment,
            IG DM card, multi-step form, polish
   ==================================================== */

/* HYBRID BUILD: KCTallboy is rendered as PNGs for the most visible
   headlines (hero, key H2s). Web typography uses Anton (free,
   Google Fonts) which is the closest free match. KCTallboy is NOT
   embedded as @font-face anywhere on this build, complying with the
   Kern Club desktop license. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --black: #151414;
  --black-2: #1c1b1b;
  --black-3: #232121;
  --black-4: #0d0c0c;
  --cream: #cfccc3;
  --cream-2: #e8e5dc;
  --cream-dim: #9b988f;
  --cream-faint: #5a5853;
  --orange: #d75e43;
  --orange-hot: #e57053;
  --orange-glow: rgba(215, 94, 67, 0.3);
  --line: rgba(207, 204, 195, 0.10);
  --line-strong: rgba(207, 204, 195, 0.20);

  --display: "Anton", "Bebas Neue", Impact, sans-serif;
  --header: "Anton", Impact, sans-serif;
  --body: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1240px;
  --gutter: clamp(20px, 5vw, 60px);
  --section-y: clamp(80px, 11vw, 140px);

  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--orange); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--orange); color: var(--black); }

/* Focus rings (a11y) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Top scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--orange);
  z-index: 200;
  transition: width .15s linear;
  pointer-events: none;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100px; left: 0;
  background: var(--orange);
  color: var(--black);
  padding: 12px 20px;
  z-index: 10000;
  font-family: var(--header);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- Page-load curtain (once per session) ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.85,0,.1,1) .3s;
}
.curtain.is-lifted { transform: translateY(-100%); }
.curtain.is-skipped { display: none; }
.curtain__mark {
  width: 80px; opacity: 0;
  animation: curtainFade 1.4s var(--ease) forwards;
}
@keyframes curtainFade {
  0% { opacity: 0; transform: scale(.85); }
  40% { opacity: .9; transform: scale(1); }
  90% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  mix-blend-mode: difference;
  display: none;
}
.cursor.is-active { display: block; }
.cursor__dot {
  position: absolute; top: -3px; left: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform .15s var(--ease);
}
.cursor__ring {
  position: absolute; top: -16px; left: -16px;
  width: 32px; height: 32px;
  border: 1px solid var(--cream);
  border-radius: 50%;
  transition: transform .25s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  opacity: .6;
}
.cursor.is-hover .cursor__ring {
  transform: scale(1.6);
  border-color: var(--orange);
  background: rgba(215,94,67,.12);
  opacity: 1;
}
.cursor.is-hover .cursor__dot { transform: scale(.4); }
@media (hover: none), (max-width: 920px) {
  .cursor { display: none !important; }
}
body.has-cursor, body.has-cursor * { cursor: none !important; }

/* ---------- Type ---------- */
.h2 {
  font-family: var(--header);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 0.92;
  letter-spacing: -0.5px;
  color: var(--cream);
  margin: 0 0 24px;
  text-transform: uppercase;
}
.h2 .accent { color: var(--orange); }
.h2--dark { color: var(--black-4); }

/* Hybrid build: rasterised headline image classes */
.headline-img {
  display: block;
  height: auto;
  max-width: 100%;
  width: auto;
}
.hero__headline { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hero__headline .headline-img { width: clamp(280px, 78vw, 1100px); }
.hero__headline .headline-img--inked { width: clamp(320px, 90vw, 1300px); margin-top: -8px; }
.h2 .h2-img {
  display: block;
  width: clamp(220px, 50vw, 600px);
  height: auto;
  margin: 0 auto;
}
.about__inner .h2 { text-align: center; }
.faq .section__head .h2 { text-align: left; }
.faq .section__head .h2 .h2-img { margin: 0; }
.h2--dark .accent { color: var(--orange); }

.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--orange);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--orange); }
.eyebrow--dark { color: var(--orange); }
.lede {
  font-family: var(--body);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--cream);
  max-width: 62ch;
  line-height: 1.7;
}

/* ---------- Section divider ---------- */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 32px;
  padding: 48px var(--gutter);
  background: var(--black);
  position: relative; z-index: 2;
}
.divider span {
  flex: 1; max-width: 240px; height: 1px;
  background: var(--line-strong);
}
.divider img { width: 44px; opacity: .65; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 28px;
  font-family: var(--header);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 0;
  transition: all .25s var(--ease);
  position: relative;
  border: 1px solid transparent;
  will-change: transform;
}
.btn--primary { background: var(--orange); color: var(--black); }
.btn--primary:hover {
  background: var(--cream);
  color: var(--black);
  box-shadow: 0 0 0 5px var(--orange-glow);
}
.btn--ghost { border: 1px solid var(--cream); color: var(--cream); }
.btn--ghost:hover { background: var(--cream); color: var(--black); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* iOS notch fix: extend background up into safe-area so content doesn't peek through behind the notch */
  padding: calc(18px + env(safe-area-inset-top)) calc(var(--gutter) + env(safe-area-inset-right)) 18px calc(var(--gutter) + env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(21,20,20,.95), rgba(21,20,20,.6) 60%, rgba(21,20,20,0));
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(13,12,12,.92);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding: calc(12px + env(safe-area-inset-top)) calc(var(--gutter) + env(safe-area-inset-right)) 12px calc(var(--gutter) + env(safe-area-inset-left));
  border-bottom-color: var(--line);
}
/* Background block behind notch on iOS so it never shows white/transparent */
html { background: var(--black); }
body { background: var(--black); }
.nav__brand { display: inline-flex; align-items: center; height: 44px; transition: height .3s var(--ease); }
.nav__brand img { height: 100%; width: auto; display: block; }
.nav.is-scrolled .nav__brand { height: 36px; }
.nav__links { display: flex; gap: 28px; align-items: center; }
.nav__links a {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cream);
  position: relative;
  padding: 6px 0;
}
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); }
.nav__cta {
  background: var(--orange);
  color: var(--black) !important;
  padding: 10px 18px;
  font-family: var(--header);
  font-size: 13px;
  letter-spacing: 1.5px;
}
.nav__cta:hover { background: var(--cream); }
.nav__burger { display: none; width: 28px; height: 22px; flex-direction: column; justify-content: space-between; }
.nav__burger span { display: block; height: 2px; background: var(--cream); border-radius: 1px; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: stretch;
  overflow: hidden; isolation: isolate;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  filter: grayscale(.5) contrast(1.05) brightness(.55);
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13,12,12,.85) 0%, rgba(13,12,12,.4) 45%, rgba(13,12,12,.2) 65%, rgba(13,12,12,.6) 100%),
    linear-gradient(180deg, rgba(13,12,12,.4) 0%, transparent 25%, transparent 70%, rgba(13,12,12,.95) 100%);
  z-index: -1;
}
.hero__panel {
  width: 56%;
  min-height: 100vh;
  padding: 0 var(--gutter);
  display: flex; align-items: center;
  position: relative;
  background: linear-gradient(90deg, rgba(13,12,12,.5) 0%, rgba(13,12,12,.15) 80%, transparent 100%);
}
.hero__inner {
  max-width: 720px; width: 100%;
  padding: 140px 0 100px;
  animation: heroIn 1.1s var(--ease) both;
  animation-delay: 1s;
}
.curtain.is-skipped + .cursor + .nav + main .hero__inner { animation-delay: .1s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow {
  font-family: var(--body);
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 3.5px; color: var(--orange);
  margin: 0 0 28px;
  display: inline-flex; align-items: center; gap: 12px;
}
.hero__eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--orange); }
.hero__headline {
  font-family: var(--header); font-weight: 400;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.85; letter-spacing: -2px;
  color: var(--cream); margin: 0 0 28px;
  text-transform: uppercase;
}
.hero__headline--inked {
  font-family: var(--display); color: var(--orange);
  display: inline-block; letter-spacing: -1px;
}
.hero__subline {
  font-family: var(--body);
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--cream-dim);
  margin: 0 0 44px; max-width: 520px;
  letter-spacing: 0.01em;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  width: 24px; height: 40px;
  border: 1px solid var(--cream-faint);
  border-radius: 14px;
  display: flex; justify-content: center;
  z-index: 3;
}
.hero__scroll span {
  display: block; width: 2px; height: 8px;
  background: var(--cream); margin-top: 8px; border-radius: 1px;
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: .3; }
}

/* ---------- STATS BAR ---------- */
.stats {
  background: var(--black-4);
  padding: clamp(50px, 7vw, 90px) var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
}
.stat { text-align: center; display: flex; flex-direction: column; gap: 12px; }
.stat__num {
  font-family: var(--header);
  font-size: clamp(72px, 10vw, 156px);
  line-height: 0.85;
  color: var(--orange);
  letter-spacing: -3px;
  font-weight: 400;
}
.stat__label {
  font-family: var(--body);
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--cream-dim);
}
.stat__sep { width: 1px; height: 80px; background: var(--line-strong); }

/* ---------- INLINE CTA strip ---------- */
.inline-cta {
  background: var(--orange);
  padding: 20px var(--gutter);
}
.inline-cta__inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.inline-cta__text {
  font-family: var(--header);
  font-size: clamp(16px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0;
  line-height: 1.2;
}
.inline-cta__btn {
  font-family: var(--header);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--black);
  background: var(--cream);
  padding: 12px 22px;
  transition: all .25s var(--ease);
}
.inline-cta__btn:hover {
  background: var(--black);
  color: var(--cream);
}

/* ---------- TRUST / MARQUEE ---------- */
.trust {
  background: var(--black-2);
  border-bottom: 1px solid var(--line);
  padding: 22px 0; position: relative; z-index: 2;
}
.trust__caption {
  text-align: center;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0 0 14px;
  padding: 0 var(--gutter);
}
.marquee {
  overflow: hidden; white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track {
  display: inline-flex; gap: 36px;
  animation: marquee 22s linear infinite;
  font-family: var(--header);
  font-size: 22px; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--cream);
}
.marquee__track span:nth-child(even) { color: var(--orange); }
.marquee__track .marquee__sep {
  font-family: var(--body);
  color: var(--cream-faint) !important;
  font-weight: 300;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Section base ---------- */
section { position: relative; z-index: 2; }
.section__head { max-width: var(--max); margin: 0 auto 60px; padding: 0 var(--gutter); }

/* ---------- WHAT WE DO ---------- */
.what { padding: var(--section-y) 0; }
.cards {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.card {
  display: block; background: var(--black-2);
  border: 1px solid var(--line); overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
}
.card::before, .card::after {
  content: ""; position: absolute;
  background: var(--orange);
  transition: transform .4s var(--ease);
  pointer-events: none; z-index: 2;
}
.card::before { top: 0; left: 0; width: 24px; height: 1px; transform-origin: left; transform: scaleX(0); }
.card::after { top: 0; left: 0; width: 1px; height: 24px; transform-origin: top; transform: scaleY(0); }
.card:hover::before { transform: scaleX(1); }
.card:hover::after { transform: scaleY(1); }
.card:hover {
  border-color: var(--orange);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px var(--orange-glow);
}
.card__media {
  height: 280px; background-size: cover; background-position: center;
  filter: grayscale(.4) contrast(1.05) brightness(.65);
  transition: filter .4s var(--ease), transform .8s var(--ease);
}
.card:hover .card__media { filter: grayscale(0) contrast(1.05) brightness(.9); transform: scale(1.04); }
.card__body { padding: 36px 32px; }
.card__title {
  font-family: var(--header);
  font-size: clamp(28px, 3vw, 38px);
  text-transform: uppercase;
  margin: 0 0 14px; color: var(--cream);
  line-height: 1; letter-spacing: -0.5px;
}
.card__body p { color: var(--cream-dim); margin: 0 0 22px; font-size: 14.5px; line-height: 1.7; }
.card__cta { font-family: var(--header); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--orange); }

/* ---------- STUDIOS DEEP DIVE ---------- */
.studio-deep {
  padding: var(--section-y) 0;
  background: var(--black-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.studio-deep__inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 80px; align-items: center;
}
.studio-deep__points {
  list-style: none; padding: 0; margin: 28px 0;
  display: grid; gap: 14px;
}
.studio-deep__points li {
  position: relative; padding-left: 26px;
  color: var(--cream); font-size: 14.5px; line-height: 1.7;
}
.studio-deep__points li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 14px; height: 2px; background: var(--orange);
}
.studio-deep__points strong { color: var(--cream); font-weight: 600; }
.studio-deep__example {
  background: var(--black-2);
  border-left: 2px solid var(--orange);
  padding: 18px 22px;
  font-family: var(--body);
  font-size: 14px; line-height: 1.6;
  color: var(--cream); margin: 0 0 24px;
}
.studio-deep__example span {
  font-family: var(--header);
  text-transform: uppercase;
  font-size: 12px; letter-spacing: 2px;
  color: var(--orange); display: block; margin-bottom: 6px;
}

/* Studio diagram */
.studio-deep__visual { display: flex; justify-content: center; }
.studio-deep__diagram {
  position: relative;
  width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.studio-deep__hub {
  width: 130px; height: 130px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--header);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  color: var(--orange);
  background: var(--black-3);
  z-index: 2;
}
.studio-deep__node {
  position: absolute;
  width: 88px; height: 88px;
  border: 1px solid var(--cream-faint);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--body);
  font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--black-2);
  animation: nodeFloat 4s ease-in-out infinite;
}
.studio-deep__node--1 { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.studio-deep__node--2 { right: 0; top: 50%; transform: translateY(-50%); animation-delay: .8s; }
.studio-deep__node--3 { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 1.6s; }
.studio-deep__node--4 { left: 0; top: 50%; transform: translateY(-50%); animation-delay: 2.4s; }
@keyframes nodeFloat {
  0%, 100% { box-shadow: 0 0 0 0 var(--orange-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
/* SVG connection lines with pulse */
.studio-deep__lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.studio-deep__lines .line {
  stroke: var(--orange);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  opacity: 0.5;
  animation: lineDash 6s linear infinite;
}
@keyframes lineDash {
  to { stroke-dashoffset: -200; }
}

/* ---------- WHAT WE DON'T DO ---------- */
.dont {
  padding: var(--section-y) 0;
  background: var(--black);
}
.dont__list {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none; display: grid; gap: 8px;
}
.dont__list li {
  position: relative;
  padding: 22px 0 22px 56px;
  border-bottom: 1px solid var(--line);
  font-family: var(--header);
  font-size: clamp(20px, 2.6vw, 32px);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: -0.3px; line-height: 1.1;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.dont__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 2px;
  background: var(--orange);
  transition: width .25s var(--ease);
}
.dont__list li:last-child { border-bottom: none; }
.dont__list li:hover {
  color: var(--orange);
  padding-left: 70px;
}
.dont__list li:hover::before { width: 48px; }

/* ---------- REALISTIC EXPECTATIONS ---------- */
.expect {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  background: var(--black);
  text-align: center;
}
.expect__inner {
  max-width: 880px;
  margin: 0 auto;
}
.expect__inner .eyebrow { justify-content: center; }
.expect__quote {
  font-family: var(--header);
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.05;
  color: var(--cream);
  margin: 0 0 24px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.expect__quote .accent { color: var(--orange); }
.expect__sub {
  font-family: var(--body);
  font-size: 15px;
  color: var(--cream-dim);
  max-width: 64ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- WHY TATTOO-ONLY ---------- */
.why {
  padding: var(--section-y) 0;
  background: var(--black-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why__inner { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.why__bullets { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 16px; }
.why__bullets li {
  position: relative; padding-left: 28px;
  color: var(--cream); font-size: 15.5px; line-height: 1.7;
}
.why__bullets li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 14px; height: 2px; background: var(--orange);
}
.why__ecomm-note {
  margin-top: 36px;
  padding: 18px 22px;
  background: var(--black-3);
  border-left: 2px solid var(--orange);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 64ch;
}
.why__ecomm-note strong {
  color: var(--orange);
  font-family: var(--header);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  display: inline-block;
  margin-right: 6px;
}

/* ---------- TRIAL / STEPS / TIMELINE ---------- */
.trial {
  padding: var(--section-y) 0;
  background: var(--black-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter);
  max-width: var(--max);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; counter-reset: step;
}
.step { position: relative; padding-top: 24px; border-top: 1px solid var(--orange); }
.step__num {
  font-family: var(--header);
  font-size: clamp(60px, 7vw, 96px);
  color: var(--orange); line-height: 1;
  display: block; margin-bottom: 14px; letter-spacing: -2px;
}
.step__title {
  font-family: var(--header);
  font-size: clamp(24px, 2.5vw, 30px);
  text-transform: uppercase;
  margin: 0 0 12px; color: var(--cream); letter-spacing: -0.5px;
}
.step p { color: var(--cream-dim); margin: 0; font-size: 14.5px; line-height: 1.7; }
.timeline { max-width: var(--max); margin: 100px auto 0; padding: 0 var(--gutter); }
.timeline__title {
  font-family: var(--header);
  font-size: clamp(22px, 2.5vw, 28px);
  text-transform: uppercase;
  color: var(--cream); margin: 0 0 32px; letter-spacing: -0.3px;
}
.timeline__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-left: 2px solid var(--orange); }
.timeline__list li { padding: 20px 0 20px 32px; position: relative; border-bottom: 1px solid var(--line); }
.timeline__list li:last-child { border-bottom: none; }
.timeline__list li::before {
  content: ""; position: absolute; left: -7px; top: 28px;
  width: 12px; height: 12px;
  background: var(--orange); border-radius: 50%;
  border: 3px solid var(--black-2);
}
.timeline__when {
  font-family: var(--header);
  font-size: 18px; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--orange);
  display: block; margin-bottom: 6px;
}
.timeline__list p { margin: 0; color: var(--cream); font-size: 15px; line-height: 1.6; }
.timeline__note {
  margin: 28px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--orange);
  background: rgba(215, 94, 67, 0.06);
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cream-dim);
  font-style: italic;
}

/* ---------- RISK REVERSAL ---------- */
.risk {
  padding: var(--section-y) 0;
  background: var(--black);
}
.risk__inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter); text-align: center;
}
.risk__inner .eyebrow { justify-content: center; }
.risk__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin-top: 60px;
}
.risk__item {
  text-align: left;
  background: var(--black-2);
  border: 1px solid var(--line);
  padding: 32px 28px;
  position: relative;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.risk__item:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
}
.risk__num {
  font-family: var(--header);
  font-size: 36px;
  color: var(--orange);
  display: block;
  margin-bottom: 16px;
  line-height: 1;
}
.risk__item h3 {
  font-family: var(--header);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.risk__item p {
  margin: 0;
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- PRICING (light cream variant) ---------- */
.pricing--light {
  background: var(--cream-2);
  color: var(--black-4);
  padding: var(--section-y) 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pricing--light .h2 { color: var(--black-4); }
.pricing--light .h2 .accent { color: var(--orange); }
.pricing--light .eyebrow { color: var(--orange); }
.pricing--light .eyebrow::before { background: var(--orange); }
.pricing__inner { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.pricing__standard-note {
  max-width: 920px;
  margin: 0 auto 24px;
  padding: 0 var(--gutter);
  text-align: center;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: rgba(0,0,0,.7);
}
.pricing__standard-note a {
  color: var(--orange);
  border-bottom: 1px solid currentColor;
}
.pricing__standard-note a:hover { color: var(--black-4); }
.pricing--light .tiers { border: 1px solid rgba(0,0,0,.12); border-bottom: none; }
.pricing--light .tier {
  background: var(--cream);
  color: var(--black-4);
  border-right: 1px solid rgba(0,0,0,.12);
}
.pricing--light .tier:hover { background: var(--cream-2); }
.pricing--light .tier.is-active {
  background: var(--black-4);
  color: var(--cream);
  border-bottom: 2px solid var(--orange);
  margin-bottom: -1px;
}
.pricing--light .tier__sub { color: rgba(0,0,0,.55); }
.pricing--light .tier.is-active .tier__sub { color: var(--cream-dim); }
.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-bottom: 0;
  border: 1px solid var(--line-strong); border-bottom: none;
}
.tier {
  padding: 24px 18px; text-align: center;
  background: var(--black-2);
  border-right: 1px solid var(--line-strong);
  transition: background .25s var(--ease), color .25s var(--ease);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
}
.tier:last-child { border-right: none; }
.tier__name { font-family: var(--header); font-size: clamp(16px, 2vw, 20px); text-transform: uppercase; letter-spacing: 1px; }
.tier__sub { font-family: var(--body); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.7; }
.pricing--light {
  border-top: 4px solid var(--orange);
  border-bottom: 4px solid var(--orange);
}
.pricing--light .price-card {
  background: var(--cream);
  border: 1px solid rgba(0,0,0,.12);
  border-top: 2px solid var(--orange);
  color: var(--black-4);
  padding: 56px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  position: relative;
}
.price-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--black);
  font-family: var(--header);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 6px 14px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pricing--light .price { color: var(--orange); }
.pricing--light .price-card__per { color: rgba(0,0,0,.55); }
.pricing--light .price-card__convert { color: rgba(0,0,0,.55); }
.pricing--light .price-card__convert #price-converted { color: var(--black-4); }
.pricing--light .price-card__currency select {
  background: var(--cream-2);
  color: var(--black-4);
  border: 1px solid rgba(0,0,0,.18);
}
.pricing--light .price-card__includes li { color: var(--black-4); }
.pricing--light .price-card__includes li::before { color: var(--orange); }
.pricing--light .price-card__fineprint { color: rgba(0,0,0,.55); }
.price-card {
  background: var(--black);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--orange);
  padding: 56px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.price-card__main { display: inline-flex; align-items: baseline; gap: 6px; overflow: hidden; }
.price {
  color: var(--orange);
  font-family: var(--header);
  font-size: clamp(56px, 8vw, 96px);
  letter-spacing: -2px; line-height: 1;
  display: inline-block;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.price.is-out { transform: translateY(-100%); opacity: 0; }
.price.is-in { animation: priceIn .4s var(--ease) forwards; }
@keyframes priceIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.price-card__per {
  font-family: var(--body); font-size: 16px;
  color: var(--cream-dim);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.price-card__excl {
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--orange);
  margin: 0;
  font-weight: 600;
}
.pricing--light .price-card__excl { color: var(--orange); }
.price-card__convert {
  font-family: var(--body); font-size: 13px;
  color: var(--cream-dim);
  letter-spacing: 1px; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; margin: 0;
}
.price-card__convert #price-converted { color: var(--cream); }
.price-card__currency select {
  background: var(--black-2); color: var(--cream);
  border: 1px solid var(--line-strong);
  padding: 6px 10px;
  font-family: var(--body); font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
}
.price-card__includes {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 10px; text-align: left;
  max-width: 460px;
}
.price-card__includes li {
  position: relative; padding-left: 26px;
  font-size: 14px; color: var(--cream); line-height: 1.5;
}
.price-card__includes li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--orange); font-weight: 600;
}
.price-card__fineprint {
  font-family: var(--body); font-size: 12px;
  color: var(--cream-faint);
  letter-spacing: 0.5px; line-height: 1.7;
  max-width: 480px; margin: 8px 0 16px;
}

/* ---------- ARE WE RIGHT FOR YOU ---------- */
.fit {
  padding: var(--section-y) 0;
  background: var(--black);
}
.fit .section__head { text-align: center; }
.fit .section__head .eyebrow { justify-content: center; }
.fit__grid {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.fit__col {
  padding: 36px 32px;
  border: 1px solid var(--line-strong);
  background: var(--black-2);
  position: relative;
  overflow: hidden;
}
.fit__col--yes {
  background: linear-gradient(180deg, rgba(215,94,67,.08), var(--black-2));
  border-color: var(--orange);
}
.fit__col--no {
  background: var(--black-4);
  border-color: var(--line);
  opacity: 0.85;
}
.fit__col--yes::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--orange);
}
.fit__col--no::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cream-faint);
}
.fit__seal {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--orange);
  color: var(--black);
  font-family: var(--header);
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  text-transform: uppercase;
}
.fit__seal--no {
  background: var(--cream-faint);
  color: var(--cream);
}
.fit__head {
  font-family: var(--header);
  font-size: clamp(22px, 2.5vw, 28px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 24px;
  letter-spacing: -0.3px;
}
.fit__col--yes .fit__head { color: var(--orange); }
.fit__col--no .fit__head { color: var(--cream-dim); }
.fit__col--no .fit__head em { color: var(--cream-faint); font-style: italic; }
.fit__col ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.fit__col li {
  position: relative; padding-left: 28px;
  color: var(--cream);
  font-size: 14.5px; line-height: 1.6;
}
.fit__col--yes li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--orange);
  font-weight: 600;
  font-size: 16px;
}
.fit__col--no li::before {
  content: "×"; position: absolute; left: 0; top: 0;
  color: var(--cream-faint);
  font-weight: 600;
  font-size: 18px;
}
.fit__col li strong { color: var(--cream); font-weight: 600; }
.fit__close {
  text-align: center;
  max-width: 720px; margin: 40px auto 0;
  padding: 0 var(--gutter);
  font-style: italic;
  color: var(--cream-dim);
  font-size: 15px;
}

/* ---------- TESTIMONIALS ---------- */
.proof { padding: var(--section-y) 0; }
.proof__grid {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.proof__grid--four { grid-template-columns: repeat(2, 1fr); max-width: 1100px; }
.proof__grid--four .quote { min-height: 240px; }
.quote {
  margin: 0; background: var(--black-2);
  border: 1px solid var(--line);
  padding: 36px 28px;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  min-height: 280px; overflow: hidden;
}
.quote::before, .quote::after {
  content: ""; position: absolute;
  background: var(--orange);
  transition: transform .35s var(--ease);
  z-index: 1;
}
.quote::before { top: 0; left: 0; width: 30px; height: 1px; transform: scaleX(0); transform-origin: left; }
.quote::after { top: 0; left: 0; width: 1px; height: 30px; transform: scaleY(0); transform-origin: top; }
.quote:hover::before { transform: scaleX(1); }
.quote:hover::after { transform: scaleY(1); }
.quote:hover { border-color: var(--orange); background: var(--black-3); }
.quote__mark {
  position: absolute; top: 12px; left: 24px;
  font-family: var(--display);
  font-size: 80px; color: var(--orange);
  opacity: 0.22; line-height: 1; pointer-events: none;
}
.quote blockquote {
  margin: 28px 0 20px;
  font-family: var(--body);
  font-size: 15px; line-height: 1.6;
  color: var(--cream); quotes: none;
  position: relative; z-index: 1;
}
.quote figcaption {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.quote__name {
  font-family: var(--header); font-size: 15px;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--cream);
}
.quote__handle {
  font-family: var(--body); font-size: 12px;
  letter-spacing: 1px; color: var(--orange);
  text-transform: lowercase;
}

/* IG DM card (mimics iOS Messages screenshot) */
.quote--dm { background: var(--black-4); padding: 0; min-height: 0; overflow: visible; }
.quote--dm figcaption {
  border-top: 1px solid var(--line);
  padding: 16px 28px;
}
.dm-card {
  background: #000;
  padding: 14px 14px 0;
  border-bottom: 1px solid var(--line);
}
.dm-card__header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 16px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: #ddd;
}
.dm-card__back { color: #aaa; font-size: 22px; line-height: 0.8; }
.dm-card__name { flex: 1; font-weight: 600; }
.dm-card__tag { color: #aaa; font-size: 18px; }
.dm-card__body { padding: 0 0 16px; min-height: 220px; }
.dm-bubble {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 18px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
  max-width: 80%;
}
.dm-bubble--in {
  background: #2c2c2e;
  color: #fff;
  border-bottom-left-radius: 4px;
  display: block;
}
.dm-bubble--out {
  background: #a64ddc;
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
  display: block;
  width: fit-content;
}
.dm-heart { font-size: 12px; }
.dm-card__seen {
  text-align: right;
  font-size: 10px;
  color: #888;
  margin-top: 4px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.dm-card__caption {
  background: var(--black-4);
  color: var(--cream);
  text-align: center;
  font-family: var(--header);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px;
  margin: 0 -14px;
}

/* IG-style gothic mock (Three Dice Tattoo card) */
.quote--ig { background: #0a0a0a; padding: 0; overflow: hidden; min-height: 0; }
.quote--ig figcaption {
  padding: 16px 28px;
  border-top: 1px solid var(--line);
}
.ig-mock {
  padding: 28px 24px 32px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(215,94,67,.04), transparent 70%),
    #0a0a0a;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.ig-mock::before, .ig-mock::after {
  content: ""; position: absolute;
  border-color: var(--cream-dim);
  border-style: dashed;
  width: 12px; height: 12px;
}
.ig-mock::before { top: 12px; left: 12px; border-top: 1px; border-left: 1px; }
.ig-mock::after { bottom: 12px; right: 12px; border-bottom: 1px; border-right: 1px; }
.ig-mock__inner {
  text-align: center;
  border: 1px dashed rgba(207,204,195,.2);
  padding: 32px 20px;
  position: relative;
}
.ig-mock__text {
  font-family: "UnifrakturCook", "Goudy Old Style", serif;
  font-size: 17px; line-height: 1.4;
  color: var(--cream);
  margin: 0 0 24px;
  font-style: italic;
}
.ig-mock__credit {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--header);
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.ig-mock__credit img { width: 22px; opacity: 0.8; }

.proof__cta { text-align: center; margin: 60px 0 0; }
.proof__cta a {
  font-family: var(--header);
  font-size: 14px; text-transform: uppercase;
  letter-spacing: 2px; color: var(--orange);
  border-bottom: 1px solid var(--orange);
  padding-bottom: 4px;
}

/* ---------- COMPARE TABLE ---------- */
.compare { padding: var(--section-y) 0; background: var(--black-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); overflow-x: auto; }
.compare__table {
  width: 100%; border-collapse: collapse;
  font-family: var(--body);
  border: 1px solid var(--line-strong);
}
.compare__table th, .compare__table td {
  padding: 18px 20px; text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; vertical-align: top;
}
.compare__table th {
  background: var(--black-3); color: var(--cream-dim);
  font-family: var(--header); font-weight: 400;
  font-size: 14px; text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--line-strong);
  position: relative;
}
.compare__table th.is-us { background: var(--orange); color: var(--black); }
.compare__badge {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--cream); color: var(--black);
  padding: 3px 10px;
  font-family: var(--header);
  font-size: 10px; letter-spacing: 1.5px;
}
.compare__table td.is-us {
  background: rgba(215,94,67,.08);
  color: var(--cream); font-weight: 600;
  border-left: 1px solid var(--orange);
  border-right: 1px solid var(--orange);
}
.compare__table tbody tr:last-child td.is-us { border-bottom: 1px solid var(--orange); }
.compare__group td {
  background: var(--black-4) !important;
  font-family: var(--header) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--orange) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--orange) !important;
  width: auto !important;
}
.compare__table td:first-child {
  font-family: var(--header); text-transform: uppercase;
  letter-spacing: 1px; color: var(--cream);
  font-size: 13px; width: 30%;
}
.compare__table td { color: var(--cream-dim); }

/* ---------- SAMPLE REPORT ---------- */
.report { padding: var(--section-y) 0; }
.report__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
.report__copy .lede { margin-bottom: 24px; }
.report__bullets {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 12px;
}
.report__bullets li {
  position: relative; padding-left: 24px;
  color: var(--cream); font-size: 14.5px;
}
.report__bullets li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 12px; height: 1px; background: var(--orange);
}
.report__visual { display: flex; flex-direction: column; align-items: center; perspective: 1200px; gap: 14px; }
.report__page {
  width: 100%; max-width: 380px;
  aspect-ratio: 210/297;
  background: linear-gradient(180deg, #faf9f6 0%, #ece9e1 100%);
  color: #2a2828;
  padding: 26px 24px;
  position: relative;
  box-shadow: 0 40px 60px -20px rgba(0,0,0,.6), 0 25px 30px -10px rgba(0,0,0,.4), inset 0 0 80px rgba(0,0,0,.05);
  transform: rotateY(-10deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.report__page:hover { transform: rotateY(-4deg) rotateX(1deg); }
.report__page-inner { font-family: var(--body); font-size: 10px; line-height: 1.4; }
.report__page-header {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid #2a2828;
  padding-bottom: 6px; margin-bottom: 14px;
}
.report__page-header strong { font-family: var(--header); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }
.report__page-header span { font-size: 8px; opacity: .7; text-transform: uppercase; letter-spacing: 0.5px; }

.report__page-handle {
  font-family: var(--header);
  font-size: 14px;
  margin: 0 0 14px;
  text-transform: lowercase;
  letter-spacing: -0.3px;
  color: var(--orange);
}

.report__page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.report__page-stat {
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report__page-stat-label {
  font-size: 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.7;
}
.report__page-stat-num {
  font-family: var(--header);
  font-size: 18px;
  line-height: 1;
  color: var(--orange);
  display: flex;
  align-items: center;
}
.report__page-stat-delta { font-size: 7px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; }

.report__page-sub {
  font-family: var(--header);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 12px 0 6px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding-bottom: 4px;
}

.report__chart { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin: 6px 0; }
.report__chart span { flex: 1; background: var(--orange); opacity: .85; }
.report__chart span:nth-child(odd) { background: #2a2828; }

.report__page-note {
  font-size: 9px;
  margin: 0 0 12px;
  line-height: 1.4;
  opacity: 0.85;
}
.report__page-foot {
  position: absolute;
  bottom: 16px; left: 24px; right: 24px;
  font-size: 8px; opacity: .55;
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Redacted blocks (anonymisation) */
.redact {
  display: inline-block;
  background: #2a2828;
  vertical-align: middle;
  border-radius: 1px;
}
.redact--name { width: 120px; height: 14px; margin-bottom: 2px; }
.redact--num { width: 36px; height: 14px; }

.report__note {
  font-family: var(--body);
  font-size: 11px;
  color: var(--cream-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

/* ---------- ABOUT ---------- */
.about {
  padding: var(--section-y) 0;
  background: var(--black-4);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.about__inner { max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.about__inner .eyebrow { justify-content: center; }
.about__mark { width: 90px; margin: 0 auto 28px; opacity: .9; }
.about__inner .lede { margin: 18px auto 0; text-align: center; }
.about__sign {
  font-family: var(--header);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  color: var(--orange);
  margin-top: 32px;
}
.about__pull {
  font-family: var(--header);
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 32px auto;
  padding: 24px 32px;
  border-top: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  letter-spacing: -0.3px;
  line-height: 1.15;
  max-width: 700px;
  text-align: center;
  quotes: none;
}
.about__more {
  margin: 24px 0 0;
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.about__more a { color: var(--orange); border-bottom: 1px solid var(--orange); padding-bottom: 2px; }

/* ---------- FAQ ---------- */
.faq { padding: var(--section-y) 0; }
.faq__list { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.faq__item { border-bottom: 1px solid var(--line); padding: 24px 0; cursor: pointer; }
.faq__item summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--header);
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  color: var(--cream); letter-spacing: 0.5px;
  position: relative; padding-right: 36px;
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 28px;
  color: var(--orange);
  transition: transform .3s var(--ease);
  font-weight: 300; line-height: 1;
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item summary:hover { color: var(--orange); }
.faq__group {
  font-family: var(--header);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--orange);
  margin: 36px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--orange);
  display: inline-block;
  padding-right: 16px;
}
.faq__group:first-child { margin-top: 0; }
.faq__item p {
  color: var(--cream-dim);
  margin: 18px 0 0;
  max-width: 80ch;
  font-size: 15px; line-height: 1.7;
  animation: fadeIn .3s var(--ease);
}
.faq__item p a { color: var(--orange); border-bottom: 1px solid var(--orange); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- CONTACT (multi-step form) ---------- */
.contact {
  padding: var(--section-y) 0;
  background: var(--black-2);
  border-top: 1px solid var(--line);
}
.contact__grid {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start;
}
.contact__copy .lede { margin-bottom: 28px; }
.contact__response {
  font-family: var(--header);
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 24px;
  letter-spacing: -0.3px; line-height: 1.2;
}
.contact__response strong { color: var(--cream); }
.contact__alt {
  font-family: var(--body); font-size: 14px;
  color: var(--cream-dim); line-height: 2; letter-spacing: 0.5px;
}
.contact__alt a { color: var(--orange); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.contact__alt a:hover { border-color: var(--orange); }

.contact__form-wrap { position: relative; }
.contact__form {
  background: var(--black-3);
  padding: 40px;
  border: 1px solid var(--line-strong);
  transition: opacity .35s var(--ease);
  position: relative;
  min-height: 460px;
}
.contact__form.is-sent { opacity: 0; pointer-events: none; }

.contact__progress-wrap {
  margin: 0 0 24px;
}
.contact__progress-text {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--orange);
  margin-bottom: 8px;
}
.contact__progress-bar {
  height: 3px;
  background: var(--black);
  border: 1px solid var(--line);
  overflow: hidden;
}
.contact__progress-fill {
  height: 100%;
  width: 33.33%;
  background: var(--orange);
  transition: width .4s var(--ease);
}

.form-step {
  display: none;
  animation: stepIn .35s var(--ease);
}
.form-step.is-active { display: grid; gap: 18px; }
@keyframes stepIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.form-step__nav {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 6px;
}
.form-step__nav .btn { padding: 14px 22px; font-size: 14px; }

.contact__form label { display: grid; gap: 6px; }
.contact__form span {
  font-family: var(--body); font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--cream-dim); font-weight: 500;
}
.contact__form input,
.contact__form select,
.contact__form textarea {
  background: var(--black);
  color: var(--cream);
  border: 1px solid var(--line);
  padding: 13px 14px;
  font-family: var(--body); font-size: 14.5px;
  border-radius: 0;
  transition: border-color .2s var(--ease);
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: none; border-color: var(--orange);
}
.contact__form textarea { resize: vertical; min-height: 100px; }
.contact__form button.form-next,
.contact__form button[type="submit"] { justify-self: start; }

.contact__thanks {
  position: absolute; inset: 0;
  background: var(--black-3);
  border: 1px solid var(--orange);
  padding: 50px 36px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease) .2s;
}
.contact__thanks.is-active { opacity: 1; pointer-events: auto; }
.contact__thanks img { width: 60px; margin-bottom: 24px; }
.contact__thanks h3 {
  font-family: var(--header); font-size: 36px;
  text-transform: uppercase;
  margin: 0 0 16px; color: var(--orange);
  letter-spacing: -0.5px;
}
.contact__thanks p { margin: 0 0 8px; color: var(--cream); font-size: 15px; max-width: 360px; }
.contact__thanks-while {
  font-family: var(--header);
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 2px;
  color: var(--cream-dim) !important;
  margin: 24px 0 12px !important;
}
.contact__thanks-links {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.contact__thanks-links a {
  color: var(--orange);
  font-size: 14px;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

/* ---------- FOOTER ---------- */
.footer { background: var(--black-4); border-top: 1px solid var(--line); padding: 80px 0 24px; }
.footer__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.footer__brand img { width: 140px; margin-bottom: 16px; opacity: .95; }
.footer__brand p { font-family: var(--header); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--cream-dim); margin: 0 0 6px; }
.footer__by { font-family: var(--body) !important; font-size: 11px !important; letter-spacing: 1.5px !important; color: var(--cream-faint) !important; margin-top: 12px !important; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols h4 { font-family: var(--header); font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--cream); margin: 0 0 16px; }
.footer__cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__cols a, .footer__cols li { color: var(--cream-dim); font-family: var(--body); font-size: 13px; letter-spacing: 0.5px; }
.footer__cols a:hover { color: var(--orange); }
/* Removed: .footer__tools, .footer__tools-label, old .footer__nl form/input/button rules
   These were used in the old footer layout and are no longer in the DOM. */
.footer__bottom {
  max-width: var(--max); margin: 40px auto 0;
  padding: 24px var(--gutter) 0;
  border-top: 1px solid var(--line);
  color: var(--cream-faint);
  font-family: var(--body); font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__inkclient {
  font-size: 11px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream-faint);
  opacity: 0.85;
}
.footer__inkclient a { color: var(--orange); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.footer__inkclient a:hover { border-color: var(--orange); }

/* Footer streamline: collapsible columns + inline newsletter */
.footer__col { margin: 0; }
.footer__col summary {
  list-style: none;
  cursor: default;
}
.footer__col summary::-webkit-details-marker { display: none; }
.footer__col summary h4 {
  font-family: var(--header);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cream);
  margin: 0 0 16px;
  display: inline-block;
}
/* Newsletter signup CSS removed — will return when 13mag is wired up.
   Form markup also removed from footer in index.html. The platform-agnostic
   JS handler in script.js (data-newsletter-form) is dormant; will activate
   when the form is re-added with a real platform endpoint. */

@media (max-width: 720px) {
  .footer__cols { grid-template-columns: 1fr !important; gap: 0 !important; }
  .footer__col { border-bottom: 1px solid var(--line); }
  .footer__col:last-child { border-bottom: none; }
  .footer__col[open] summary h4 { color: var(--orange); }
  .footer__col summary {
    cursor: pointer;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .footer__col summary h4 { margin: 0 !important; }
  .footer__col summary::after {
    content: "+";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-family: var(--body);
    font-size: 22px;
    color: var(--orange);
    transition: transform .2s var(--ease);
  }
  .footer__col[open] summary::after { content: "−"; }
  .footer__col ul { padding: 0 0 16px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Sticky CTA + scroll-to-top ---------- */
.sticky-cta {
  position: fixed; bottom: 24px; right: 24px; z-index: 50;
  background: var(--orange); color: var(--black);
  padding: 14px 22px;
  font-family: var(--header); font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 12px 30px -10px rgba(215,94,67,.5);
  opacity: 0; transform: translateY(20px);
  pointer-events: none;
  transition: all .3s var(--ease);
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-cta:hover { background: var(--cream); transform: translateY(-2px); }
.scroll-top {
  position: fixed; bottom: 24px; left: 24px; z-index: 50;
  padding: 12px 14px;
  background: var(--black-2); color: var(--cream);
  border: 1px solid var(--line-strong);
  font-family: var(--header);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: all .3s var(--ease);
}
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover { background: var(--orange); color: var(--black); border-color: var(--orange); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__panel { width: 70%; }
}
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__links.is-open {
    display: flex; position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--black);
    padding: 24px var(--gutter);
    gap: 18px; border-bottom: 1px solid var(--line);
  }
  .hero__panel { width: 100%; background: linear-gradient(180deg, rgba(13,12,12,.6) 0%, rgba(13,12,12,.85) 100%); }
  .stats__inner { grid-template-columns: 1fr; gap: 32px; }
  .stat__sep { display: none; }
  .stat__num { position: relative; padding-top: 12px; }
  .stat__num::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 2px; background: var(--orange);
  }
  .inline-cta__inner { justify-content: center; text-align: center; }
  .cards { grid-template-columns: 1fr; }
  .studio-deep__inner { grid-template-columns: 1fr; gap: 48px; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .risk__grid { grid-template-columns: 1fr; }
  .fit__grid { grid-template-columns: 1fr; }
  .proof__grid { grid-template-columns: 1fr; }
  .report__inner { grid-template-columns: 1fr; gap: 48px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__inner { grid-template-columns: 1fr; gap: 40px; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .tiers { grid-template-columns: 1fr; border-bottom: 1px solid var(--line-strong); }
  .pricing--light .tiers { border-bottom: 1px solid rgba(0,0,0,.12); }
  .tier { border-right: none; border-bottom: 1px solid var(--line-strong); }
  .pricing--light .tier { border-bottom: 1px solid rgba(0,0,0,.12); }
  .tier:last-child { border-bottom: none; }
  .tier.is-active { border-bottom: 2px solid var(--orange); margin-bottom: 0; }
  .sticky-cta { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 12px; }
  .scroll-top { bottom: 16px; left: 16px; padding: 10px 14px; font-size: 12px; }
  .compare__table { font-size: 12px; }
  .compare__table th, .compare__table td { padding: 12px 10px; }
}

@media (max-width: 640px) {
  .hero__inner { padding: 120px 0 80px; }
  .footer__cols { grid-template-columns: 1fr; }
  .contact__form { padding: 24px; }
  .quote { padding: 28px; min-height: 0; }
  .price-card { padding: 40px 20px; }
  .price-card__convert { flex-direction: column; gap: 8px; }
  .dont__list li { font-size: 18px; }
  .timeline__list li { padding-left: 24px; }
  .studio-deep__diagram { width: 260px; height: 260px; }
  .studio-deep__hub { width: 100px; height: 100px; font-size: 14px; }
  .studio-deep__node { width: 72px; height: 72px; font-size: 9px; }
}

/* ============================================================
   ROUND 6 — Conversion patterns
   ============================================================ */

/* Hero ink reveal animation */
[data-ink-reveal] {
  display: inline-block;
  position: relative;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 50%, transparent 50%, transparent 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: inkReveal 1.6s var(--ease) 1.4s forwards;
  color: transparent;
}
@keyframes inkReveal {
  0% { background-position: 100% 0; -webkit-text-fill-color: transparent; }
  100% { background-position: 0% 0; -webkit-text-fill-color: transparent; }
}

/* Inline Apply CTA in trial section */
.trial__inline-cta {
  text-align: center;
  margin: 60px auto 0;
  padding: 0 var(--gutter);
}

/* Tier cards (3 visible at once) */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 0;
}
.tier-card {
  padding: 32px 20px;
  text-align: center;
  background: var(--cream);
  color: var(--black-4);
  border: 1px solid rgba(0,0,0,.12);
  border-right: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  position: relative;
}
.tier-card:last-child { border-right: 1px solid rgba(0,0,0,.12); }
.tier-card:hover { background: var(--cream-2); }
.tier-card.is-active {
  background: var(--black-4);
  color: var(--cream);
  border-color: var(--orange);
  transform: translateY(-4px);
  z-index: 2;
}
.tier-card__name {
  font-family: var(--header);
  font-size: clamp(16px, 2vw, 20px);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tier-card__sub {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.65;
}
.tier-card.is-active .tier-card__sub { color: var(--cream-dim); opacity: 1; }
.tier-card__price {
  font-family: var(--header);
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -1px;
  line-height: 1;
  color: var(--orange);
  margin-top: 6px;
}
.tier-card__price small {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-left: 6px;
  color: var(--orange);
  opacity: 0.7;
}
.tier-card__excl {
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 4px;
}

/* Compare table footnote */
.compare__note {
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cream-faint);
  text-align: center;
  margin: 16px 0 0;
}

/* Standards callout (above contact form) */
.standards {
  padding: clamp(40px, 6vw, 80px) var(--gutter);
  background: var(--orange);
  color: var(--black);
  text-align: center;
}
.standards__inner {
  max-width: 920px;
  margin: 0 auto;
}
.standards__eyebrow {
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--black);
  margin: 0 0 16px;
  opacity: 0.7;
}
.standards__text {
  font-family: var(--header);
  font-size: clamp(24px, 3.5vw, 44px);
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.standards__text strong { color: var(--cream); background: var(--black); padding: 0 10px; }

/* Last reply timestamp */
.contact__last-reply {
  font-family: var(--body);
  font-size: 12px;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact__last-reply::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* IG handle auto-link preview */
.form-ig { position: relative; }
.form-ig__preview {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: var(--orange);
  border-bottom: 1px dashed var(--orange);
  padding: 4px 0;
  width: fit-content;
  align-self: flex-start;
  margin-top: 4px;
  cursor: pointer;
}
.form-ig__preview:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* Fit-checker gate */
.fit-gate {
  background: var(--black);
  border: 1px solid var(--orange);
  padding: 32px 28px;
  margin-bottom: 0;
  position: relative;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.fit-gate.is-passed {
  display: none;
}
.fit-gate__eyebrow {
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--orange);
  margin: 0 0 8px;
}
.fit-gate__title {
  font-family: var(--header);
  font-size: clamp(18px, 2.5vw, 24px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 24px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.fit-gate__check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px;
  color: var(--cream);
  line-height: 1.5;
  transition: color .2s var(--ease);
}
.fit-gate__check:last-of-type { border-bottom: none; }
.fit-gate__check:hover { color: var(--orange); }
.fit-gate__check input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--orange);
  cursor: pointer;
}
.fit-gate__check input:checked + span {
  color: var(--cream);
  text-decoration: line-through;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
}
.fit-gate__check span strong { color: var(--cream); font-weight: 600; }
.fit-gate__note {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 18px 0 0;
}

/* Form locked behind fit-checker */
[data-form-locked] {
  display: none;
}
[data-form-locked].is-unlocked {
  display: grid;
  animation: gateUnlock .5s var(--ease);
}
@keyframes gateUnlock {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* About flash decorative elements */
.about { overflow: hidden; }
.about__decoration {
  position: absolute;
  width: 280px;
  height: auto;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.about__decoration--left {
  top: 80px;
  left: -80px;
  transform: rotate(-15deg);
}
.about__decoration--right {
  bottom: 80px;
  right: -80px;
  transform: rotate(20deg);
}
.about__inner { position: relative; z-index: 1; }

/* ============ MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; animation: modalIn .3s var(--ease); }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  background: var(--black-2);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--orange);
  padding: 40px 36px;
  max-width: 540px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: modalPanelIn .4s var(--ease);
}
@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  font-size: 22px;
  color: var(--cream-dim);
  background: transparent;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.modal__close:hover { color: var(--orange); border-color: var(--orange); }
.modal__eyebrow {
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--orange);
  margin: 0 0 8px;
}
.modal__title {
  font-family: var(--header);
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  line-height: 1;
}
.modal__title .accent { color: var(--orange); }
.modal__sub {
  font-family: var(--body);
  font-size: 14px;
  color: var(--cream-dim);
  margin: 0 0 24px;
  line-height: 1.6;
}
.fit-gate--modal {
  border: 1px solid var(--line);
  padding: 20px;
  margin-bottom: 24px;
}
.fit-gate--modal .fit-gate__check { padding: 10px 0; font-size: 13px; }
.modal__form {
  display: grid;
  gap: 16px;
}
.modal__form label { display: grid; gap: 6px; }
.modal__form span {
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cream-dim);
}
.modal__form input,
.modal__form select,
.modal__form textarea {
  background: var(--black);
  color: var(--cream);
  border: 1px solid var(--line);
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 14.5px;
  border-radius: 0;
  transition: border-color .2s var(--ease);
}
.modal__form input:focus,
.modal__form select:focus,
.modal__form textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.modal__form textarea { resize: vertical; min-height: 60px; }
.modal__fineprint {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--cream-faint);
  margin: 0;
  text-transform: uppercase;
}
.modal__fineprint a { color: var(--orange); border-bottom: 1px solid var(--orange); }
.modal__form button[type="submit"] { justify-self: start; margin-top: 6px; }
.modal__thanks {
  text-align: center;
  padding: 32px 0;
}
.modal__thanks img { width: 48px; margin: 0 auto 16px; }
.modal__thanks h3 {
  font-family: var(--header);
  font-size: 28px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}
.modal__thanks p { color: var(--cream); font-size: 14px; margin: 0; }
.modal__thanks a { color: var(--orange); border-bottom: 1px solid var(--orange); }

/* Body scroll lock when modal open */
body.modal-open { overflow: hidden; }

@media (max-width: 920px) {
  .tier-cards { grid-template-columns: 1fr; }
  .tier-card { border-right: 1px solid rgba(0,0,0,.12); border-bottom: none; }
  .tier-card:not(:last-child) { border-bottom: none; }
  .modal__panel { padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .curtain { display: none; }
  .cursor { display: none !important; }
  .marquee__track { animation: none; }
  .studio-deep__node { animation: none; }
  .studio-deep__pulse { animation: none !important; }
}

/* ====================================================
   ROUND 7 ADDITIONS
   stats with disclaimers, why-meta, studios upgrade,
   real report mock, mag cover redesign, standards,
   contact local, nav apply padding, last-reply ticker
   ==================================================== */

/* Stats bar — add support for plus/currency/suffix glyphs + note text */
.stat { align-items: center; }
.stat__num {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  width: 100%;
}
.stat__plus,
.stat__suffix,
.stat__currency {
  font-family: var(--header);
  color: var(--orange);
  letter-spacing: -2px;
  line-height: 0.85;
}
.stat__plus { font-size: 0.55em; margin-left: 4px; }
.stat__suffix { font-size: 0.5em; margin-left: 4px; }
.stat__currency { font-size: 0.55em; margin-right: 4px; opacity: 0.85; }
.stat__note {
  font-family: var(--body);
  font-size: 12px;
  color: var(--cream-dim);
  letter-spacing: 0.5px;
  line-height: 1.5;
  max-width: 30ch;
  margin: 0 auto;
  text-transform: none;
}

/* WHY META section (NEW) */
.why-meta {
  padding: var(--section-y) 0;
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-meta__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.why-meta__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}
.why-meta__big {
  text-align: left;
  position: relative;
  padding: 32px 24px;
  border: 1px solid var(--orange);
  background: linear-gradient(180deg, rgba(215,94,67,0.04), transparent);
}
.why-meta__big::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--orange);
}
.why-meta__num {
  display: inline-block;
  font-family: var(--header);
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.85;
  color: var(--orange);
  letter-spacing: -6px;
}
.why-meta__pct { font-size: 0.5em; margin-left: 2px; }
.why-meta__num-label {
  display: block;
  font-family: var(--body);
  font-size: 14px;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.4;
  margin-top: 16px;
  max-width: 24ch;
}
.why-meta__copy .lede + .lede { margin-top: 18px; }
.why-meta__source {
  margin-top: 24px;
  font-size: 12px;
  color: var(--cream-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.why-meta__source a { color: var(--orange); border-bottom: 1px solid var(--orange); }

/* Studios diagram cooler upgrade */
.studio-deep__hub {
  width: 140px; height: 140px !important;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--header);
  text-transform: uppercase;
  font-size: 14px !important;
  color: var(--orange);
  background: var(--black-3);
  z-index: 3;
  letter-spacing: 1px;
  position: relative;
  box-shadow: 0 0 0 0 var(--orange-glow);
  animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215,94,67,.55); }
  50% { box-shadow: 0 0 0 18px rgba(215,94,67,0); }
}
.studio-deep__hub-mark {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 4px;
  opacity: 0.8;
}
.studio-deep__hub-text {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-align: center;
  line-height: 1.1;
  color: var(--cream);
}
.studio-deep__node {
  width: 100px !important;
  height: 100px !important;
  border: 1px solid var(--cream-faint) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--header) !important;
  font-size: 12px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--cream) !important;
  background: var(--black-2) !important;
  text-align: center !important;
  padding: 8px !important;
  z-index: 2;
  transition: all .4s var(--ease) !important;
  cursor: default;
}
.studio-deep__node.is-active {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  box-shadow: 0 0 24px -4px var(--orange-glow);
  transform-origin: center;
}
.studio-deep__node--1.is-active { transform: translateX(-50%) scale(1.12) !important; }
.studio-deep__node--2.is-active { transform: translateY(-50%) scale(1.12) !important; }
.studio-deep__node--3.is-active { transform: translateX(-50%) scale(1.12) !important; }
.studio-deep__node--4.is-active { transform: translateY(-50%) scale(1.12) !important; }
.studio-deep__pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  margin-left: -70px; margin-top: -70px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: nodePulse 4s ease-out infinite;
}
@keyframes nodePulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Compare table — better Us badge that doesn't get clipped */
.compare__table th {
  position: relative;
  vertical-align: bottom;
  padding-top: 22px !important;
}
.compare__table th.is-us {
  vertical-align: bottom;
}
.compare__badge {
  position: absolute;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--cream) !important;
  color: var(--black) !important;
  padding: 3px 10px !important;
  font-family: var(--header) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  z-index: 2;
}
.compare__us-name {
  display: inline-block;
  margin-top: 8px;
}

/* Real report mock additions */
.report__page-handle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--header);
  font-size: 18px !important;
  text-transform: lowercase;
  margin: 0 0 14px !important;
  letter-spacing: -0.3px;
  color: var(--orange) !important;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
  padding-bottom: 10px;
}
.report__page-period {
  font-family: var(--body);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}
.report__page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.report__page-stat {
  background: rgba(0,0,0,0.04);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report__page-stat-label {
  font-family: var(--body);
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
}
.report__page-stat-num {
  font-family: var(--header);
  font-size: 17px;
  letter-spacing: -0.5px;
  color: #2a2828;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report__page-stat-num small {
  font-family: var(--body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(0,0,0,0.5);
  text-transform: lowercase;
}
.report__page-stat-delta {
  font-family: var(--body);
  font-size: 7px !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}
.report__page-stat-delta--up { color: #2a7a3e !important; }
.report__page-stat-delta--mid { color: #b07020 !important; }
.report__page-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  font-family: var(--body);
  font-size: 9px;
  line-height: 1.5;
  color: #2a2828;
}
.report__page-list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 3px;
}
.report__page-list li::before {
  content: "□";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-family: monospace;
}
.report__page-sub {
  font-family: var(--header);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--orange);
  margin: 12px 0 6px !important;
}
.report__page-note {
  font-family: var(--body);
  font-size: 9px;
  line-height: 1.55;
  color: #2a2828;
  margin: 0 0 8px;
}
.report__chart {
  height: 56px !important;
  display: flex;
  gap: 3px;
  align-items: flex-end;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.report__chart span:nth-child(odd) { background: #2a2828 !important; }
.redact {
  display: inline-block;
  background: #1a1a1a;
  border-radius: 1px;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
  vertical-align: middle;
}
.redact--name { width: 120px; height: 14px; }
.redact--num { width: 56px; height: 14px; }
.redact--small { width: 28px; height: 9px; opacity: 0.65; }
.report__note {
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--cream-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

/* Standards section */
.standards {
  padding: 60px var(--gutter);
  background: var(--black);
  text-align: center;
}
.standards__inner {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  padding: 36px 0;
}
.standards__eyebrow {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
.standards__text {
  font-family: var(--header);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.25;
  color: var(--cream);
  margin: 0;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}
.standards__text strong { color: var(--orange); }

/* Contact local visit line */
.contact__local {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  background: rgba(215,94,67,0.08);
  border: 1px solid var(--orange);
  font-family: var(--body);
  font-size: 13px;
  color: var(--cream);
  letter-spacing: 0.3px;
  line-height: 1.5;
  text-transform: none;
}

/* Last reply ticker dot animation */
.contact__last-reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin: 0 0 16px;
}
.contact__last-reply::before {
  content: "";
  width: 8px; height: 8px;
  background: #4ad670;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(74,214,112,0.6);
  animation: lastReplyPulse 2s ease-in-out infinite;
}
@keyframes lastReplyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,214,112,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(74,214,112,0); }
}

/* Nav Apply button — proper padding so highlight fits */
.nav__cta {
  padding: 12px 22px !important;
  border-radius: 2px;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  letter-spacing: 1.5px;
}

/* Manifesto CTA in About: button styling */
.about__manifesto-btn {
  margin-top: 8px;
  display: inline-flex !important;
  font-size: 14px;
  padding: 12px 20px;
}

/* Mobile: hero subline tightened, sticky CTA + scroll-top spaced apart */
@media (max-width: 640px) {
  /* Hero headline: give the two image lines real breathing room.
     The -8px overlap that works on the big desktop render crowds
     the lines at mobile size, so reset it and open the gap. */
  .hero__eyebrow {
    letter-spacing: 2px;
    font-size: 11px;
    margin-bottom: 22px;
    line-height: 1.5;
  }
  .hero__headline {
    gap: 14px;
    margin-bottom: 32px;
  }
  .hero__headline .headline-img { width: clamp(260px, 82vw, 460px); }
  .hero__headline .headline-img--inked {
    width: clamp(280px, 88vw, 500px);
    margin-top: 0;
  }
  .hero__subline {
    font-size: 14px;
    max-width: 32ch;
    line-height: 1.65;
  }
  .sticky-cta {
    bottom: 16px; right: 12px;
    padding: 13px 16px;
    min-height: 44px;
    font-size: 11px;
    max-width: 60vw;
    display: inline-flex;
    align-items: center;
  }
  .scroll-top {
    bottom: 16px; left: 12px;
    width: 44px; height: 44px;
    font-size: 14px;
  }
  /* Always-visible nav Apply on mobile (no need to scroll past hero) */
  .nav__burger { margin-left: 8px; }
  .nav__cta {
    display: inline-flex !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    align-items: center;
    font-size: 11px !important;
  }
  .inline-cta__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Footer InkClient line wraps cleanly */
  .footer__inkclient { width: 100%; }
}

/* Compare table: sticky first column on horizontal scroll */
@media (max-width: 720px) {
  .compare__wrap { -webkit-overflow-scrolling: touch; }
  .compare__table th:first-child,
  .compare__table td:first-child {
    position: sticky;
    left: 0;
    background: var(--black-3) !important;
    z-index: 1;
    box-shadow: 2px 0 8px rgba(0,0,0,0.4);
  }
  .compare__group td {
    background: var(--black-4) !important;
    position: static !important;
  }
}

/* Studios diagram: ultra-narrow viewport, drop the descriptor line so labels fit */
@media (max-width: 420px) {
  .studio-deep__node-meta { display: none !important; }
}

/* ============== Follower quality comparison ============== */
.follower-compare {
  padding: var(--section-y) 0;
  background: var(--black);
  border-top: 1px solid var(--line);
}
.follower-compare__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.follower-compare__inner .eyebrow { justify-content: center; }
.follower-compare__inner .h2 {
  margin: 0 auto 48px;
  max-width: 22ch;
}
.follower-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.follower-compare__col {
  padding: 36px 28px;
  border: 1px solid var(--line-strong);
  text-align: left;
  position: relative;
}
.follower-compare__col--bad {
  background: var(--black-3);
  opacity: 0.85;
}
.follower-compare__col--good {
  background: linear-gradient(180deg, rgba(215,94,67,0.08), var(--black-2));
  border-color: var(--orange);
}
.follower-compare__col--good::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}
.follower-compare__num {
  font-family: var(--header);
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.85;
  letter-spacing: -2px;
  margin: 0 0 8px;
}
.follower-compare__col--bad .follower-compare__num { color: var(--cream-faint); }
.follower-compare__col--good .follower-compare__num { color: var(--orange); }
.follower-compare__label {
  font-family: var(--body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}
.follower-compare__col--bad .follower-compare__label { color: var(--cream-dim); }
.follower-compare__col--good .follower-compare__label { color: var(--cream); }
.follower-compare__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.follower-compare__col li {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
  color: var(--cream);
}
.follower-compare__col--bad li::before {
  content: "×";
  position: absolute;
  left: 0;
  color: var(--cream-faint);
  font-weight: 600;
}
.follower-compare__col--good li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 600;
}
.follower-compare__close {
  font-family: var(--body);
  font-size: 16px;
  color: var(--cream);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}
.follower-compare__close strong {
  color: var(--orange);
  font-weight: 500;
  display: inline-block;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .follower-compare__grid { grid-template-columns: 1fr; gap: 16px; }
  .follower-compare__num { font-size: 48px; }
}

/* Customer journey timeline dots flow animation */
.journey__steps::before {
  background: linear-gradient(to right, transparent 0%, var(--orange) 30%, var(--orange) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: journeyFlow 4s ease-in-out infinite;
  opacity: 0.55;
}
@keyframes journeyFlow {
  0% { background-position: 100% 0%; }
  100% { background-position: -100% 0%; }
}

/* ============== Blog promo banner ============== */
.blog-promo {
  padding: var(--section-y) 0;
  background: var(--black);
}
.blog-promo__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.blog-promo__title {
  font-family: var(--header);
  font-size: clamp(32px, 5vw, 56px);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: -0.5px;
  line-height: 0.95;
  margin: 0 0 16px;
  max-width: 22ch;
}
.blog-promo__lede {
  font-family: var(--body);
  font-size: 15px;
  color: var(--cream-dim);
  max-width: 60ch;
  line-height: 1.65;
  margin: 0 0 36px;
}
.blog-promo__lede a { color: var(--orange); border-bottom: 1px solid var(--orange); }
.blog-promo__articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}
.blog-promo__card {
  display: block;
  padding: 24px 22px;
  background: var(--black-2);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
  text-decoration: none;
  color: inherit;
}
.blog-promo__card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
}
.blog-promo__tag {
  display: inline-block;
  background: var(--orange);
  color: var(--black);
  font-family: var(--header);
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 3px 9px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.blog-promo__card h3 {
  font-family: var(--header);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
  line-height: 1.15;
  transition: color .2s var(--ease);
}
.blog-promo__card:hover h3 { color: var(--orange); }
.blog-promo__card p {
  font-family: var(--body);
  font-size: 13px;
  color: var(--cream-dim);
  line-height: 1.55;
  margin: 0;
}
.blog-promo__all {
  font-size: 13px;
  padding: 12px 22px;
}
@media (max-width: 920px) {
  .blog-promo__articles { grid-template-columns: 1fr; }
}

/* ============== Explore screenshot frame (Why Meta visual) ============== */
.why-meta__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.explore-frame {
  width: 280px;
  max-width: 100%;
  background: var(--black);
  border: 4px solid #2a2828;
  border-radius: 28px;
  padding: 6px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px var(--orange-glow) inset;
  overflow: hidden;
  position: relative;
}
.explore-frame::before {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 22px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.explore-frame__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}
@media (max-width: 920px) { .explore-frame { width: 240px; } }
@media (max-width: 640px) { .explore-frame { width: 200px; } }
/* Removed ~120 lines of unused .phone-mock rules — replaced by .explore-frame
   when we swapped to the real Instagram screenshot. */
.why-meta__visual-cap {
  font-family: var(--body);
  font-size: 11px;
  color: var(--cream-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  max-width: 24ch;
}

/* Update Why Meta layout: visual on left now */
.why-meta__num {
  display: inline-block;
  font-family: var(--header);
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.85;
  color: var(--orange);
  letter-spacing: -6px;
  margin: 0 0 8px;
}
.why-meta__num-figure { display: inline; }
.why-meta__pct { font-size: 0.5em; margin-left: 2px; }
.why-meta__num-label {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 0 0 24px;
  max-width: 30ch;
}

/* ============== Customer journey ============== */
.journey {
  padding: var(--section-y) 0;
  background: var(--black-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.journey__head {
  max-width: 880px;
  margin: 0 auto 60px;
  padding: 0 var(--gutter);
  text-align: center;
}
.journey__head .eyebrow { justify-content: center; }
.journey__head .h2 { margin: 0 auto 20px; max-width: 22ch; }
.journey__lede {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 60ch;
  margin: 0 auto;
}
.journey__rail {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.journey__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.journey__steps::before {
  content: "";
  position: absolute;
  top: 60px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--orange), transparent);
  opacity: 0.4;
  z-index: 0;
}
.journey__step {
  position: relative;
  padding: 0 14px;
  text-align: left;
  z-index: 1;
}
.journey__num {
  display: inline-block;
  font-family: var(--header);
  font-size: 56px;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -2px;
  margin-bottom: 12px;
  position: relative;
}
.journey__num::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 24px; height: 2px;
  background: var(--orange);
}
.journey__title {
  font-family: var(--header);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 16px 0 10px;
  letter-spacing: -0.3px;
  line-height: 1;
}
.journey__step p {
  font-size: 13.5px;
  color: var(--cream-dim);
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 24ch;
}
.journey__tag {
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cream-faint);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: block;
}
.journey__step:last-child .journey__tag {
  color: var(--orange);
}

.journey__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line-strong);
}
.journey__compare-col {
  padding: 28px 28px;
}
.journey__compare-col--them {
  background: var(--black-4);
  border-right: 1px solid var(--line-strong);
}
.journey__compare-col--us {
  background: linear-gradient(180deg, rgba(215,94,67,0.08), transparent);
  border-left: 2px solid var(--orange);
  margin-left: -1px;
}
.journey__compare-col h4 {
  font-family: var(--header);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cream-dim);
  margin: 0 0 12px;
}
.journey__compare-col--us h4 { color: var(--orange); }
.journey__compare-col p {
  font-size: 14px;
  color: var(--cream);
  line-height: 1.6;
  margin: 0;
}

/* ============== Studios diagram upgraded ============== */
.studio-deep__diagram {
  width: 360px !important;
  height: 360px !important;
}
.studio-deep__hub-mark-img {
  width: 28px !important;
  height: auto;
  margin-bottom: 6px;
  opacity: 0.9;
}
.studio-deep__node {
  width: 110px !important;
  height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  padding: 12px 8px !important;
  text-align: center;
}
.studio-deep__node-label {
  font-family: var(--header) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1;
  display: block;
}
.studio-deep__node-meta {
  font-family: var(--body);
  font-size: 8px !important;
  letter-spacing: 0.5px;
  text-transform: none !important;
  color: var(--cream-faint);
  line-height: 1.2;
  display: block;
  opacity: 0.7;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.studio-deep__node.is-active .studio-deep__node-meta {
  color: var(--orange) !important;
  opacity: 1;
}
.studio-deep__pulse--2 {
  animation-delay: 2s;
}
.studio-deep__lines .line {
  stroke-dasharray: 4 6;
  animation: lineDashFlow 2s linear infinite;
}
@keyframes lineDashFlow { to { stroke-dashoffset: -200; } }
.line-pulse {
  fill: var(--orange);
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--orange));
}
.line-pulse--1 { animation: pulseUp 4s linear infinite; }
.line-pulse--2 { animation: pulseRight 4s linear infinite 1s; }
.line-pulse--3 { animation: pulseDown 4s linear infinite 2s; }
.line-pulse--4 { animation: pulseLeft 4s linear infinite 3s; }
@keyframes pulseUp {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(0, -130px); opacity: 0; }
}
@keyframes pulseRight {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(130px, 0); opacity: 0; }
}
@keyframes pulseDown {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(0, 130px); opacity: 0; }
}
@keyframes pulseLeft {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(-130px, 0); opacity: 0; }
}

/* Responsive */
@media (max-width: 920px) {
  .why-meta__grid { grid-template-columns: 1fr; gap: 32px; }
  .stat__note { font-size: 11px; }
  .phone-mock { width: 200px; }
  .journey__steps { grid-template-columns: 1fr; gap: 24px; }
  .journey__steps::before { display: none; }
  .journey__step { padding: 20px 16px; background: var(--black-3); border-left: 2px solid var(--orange); }
  .journey__compare { grid-template-columns: 1fr; }
  .journey__compare-col--them { border-right: none; border-bottom: 1px solid var(--line); }
  .journey__compare-col--us { border-left: none; border-top: 2px solid var(--orange); margin-left: 0; }
  .studio-deep__diagram { width: 300px !important; height: 300px !important; }
  .studio-deep__node { width: 90px !important; height: 90px !important; padding: 8px 6px !important; }
  .studio-deep__node-label { font-size: 11px !important; }
  .studio-deep__node-meta { font-size: 7px !important; }
}
@media (max-width: 640px) {
  .phone-mock { width: 180px; }
  .journey__num { font-size: 44px; }
  .why-meta__num { font-size: clamp(96px, 22vw, 160px); }
}

/* ============================================================
   MISSION micro-section (replaces deleted "What we do" 2-card)
   Single-line punctuation between trust marquee and Artists deep-dive.
   ============================================================ */
.mission {
  padding: clamp(60px, 9vw, 110px) var(--gutter);
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.mission__inner {
  max-width: 980px;
  margin: 0 auto;
}
.mission .eyebrow {
  justify-content: center;
  margin: 0 auto 18px;
}
.mission__h2 {
  font-family: var(--header);
  font-size: clamp(34px, 5.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -1.2px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
}
.mission__h2 .accent { color: var(--orange); }

/* ============================================================
   ARTISTS DEEP-DIVE — mirrors studio-deep structure
   ============================================================ */
.artists-deep {
  padding: var(--section-y) var(--gutter);
  background: var(--black-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.artists-deep__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.artists-deep__copy h2.h2 {
  margin: 14px 0 22px;
  max-width: 18ch;
}
.artists-deep__copy .lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream);
  max-width: 56ch;
  margin: 0 0 28px;
}
.artists-deep__points {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  gap: 14px;
}
.artists-deep__points li {
  position: relative;
  padding: 14px 18px 14px 22px;
  border-left: 2px solid var(--orange);
  background: var(--black-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
}
.artists-deep__points li strong {
  color: var(--cream);
  font-weight: 600;
  display: inline-block;
  margin-right: 4px;
}
.artists-deep__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Mobile: stack the two columns. Text first, broadsheet animation full-width below. */
@media (max-width: 960px) {
  .artists-deep__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: stretch;
  }
  .artists-deep__copy h2.h2 {
    max-width: none;
  }
  .artists-deep__copy .lede {
    max-width: 62ch;
  }
  .artists-deep__visual {
    width: 100%;
  }
  .artists-deep__visual .bs-panel {
    max-width: 480px;
    width: 100%;
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 480px) {
  .artists-deep__visual .bs-panel {
    max-width: 100%;
    aspect-ratio: auto;
    min-height: 560px;
  }
}

/* ============================================================
   BROADSHEET PANEL (V5 · SPECIAL EDITION) — migrated from
   _handoff/stats-mockups/v4-broadsheet-variations.html.
   Replaces .stats-morph in the Artists deep-dive visual slot.
   All rules scoped under .bs-panel to avoid collision.
   ============================================================ */
.bs-panel {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  position: relative;
  background: var(--cream);
  color: var(--black);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,0.25);
  --bs-ink-soft: #2c2a27;
  --bs-ink-dim: #6b6760;
}
/* Subtle paper texture */
.bs-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(21,20,20,0.022) 1px, transparent 1px),
    radial-gradient(rgba(21,20,20,0.016) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
  pointer-events: none;
  z-index: 1;
}
.bs-panel > * { position: relative; z-index: 2; }

/* Masthead — black band, slides down from above */
.bs-panel .bs-mast {
  background: var(--black);
  color: var(--cream-2);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: translateY(-100%);
  transition: transform 300ms var(--ease);
  gap: 8px;
}
.bs-panel .bs-mast.in { transform: translateY(0); }
.bs-panel .bs-dotsep { color: var(--orange); }

/* Body container */
.bs-panel .bs-body {
  flex: 1;
  padding: 26px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* Nº 157 stamp — top-right, rotated */
.bs-panel .bs-stamp {
  position: absolute;
  top: 22px;
  right: 22px;
  text-align: right;
  z-index: 3;
  transform: rotate(-2deg);
  transform-origin: top right;
}
.bs-panel .bs-stamp-num {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 7vw, 58px);
  line-height: 0.86;
  letter-spacing: 0.5px;
  color: var(--orange);
  display: block;
}
.bs-panel .bs-stamp-lbl {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bs-ink-soft);
  margin-top: 2px;
}

/* Headline — full width since stamp was removed */
.bs-panel .bs-head {
  margin: 2px 0 0;
  padding-right: 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  color: var(--black);
  line-height: 0.96;
  letter-spacing: -0.6px;
  font-size: clamp(30px, 5.6vw, 44px);
  max-width: 100%;
}

/* Body line / lede */
.bs-panel .bs-body-line {
  margin: 14px 0 0;
  padding-right: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-style: italic;
  font-size: 11.5px;
  color: var(--bs-ink-soft);
  line-height: 1.45;
}

/* Ledger */
.bs-panel .bs-ledger { margin-top: 10px; display: flex; flex-direction: column; }
.bs-panel .bs-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(21,20,20,0.22);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--black);
  position: relative;
}
.bs-panel .bs-lhs {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.bs-panel .bs-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  font-size: 10.5px;
}
.bs-panel .bs-leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted rgba(21,20,20,0.45);
  height: 0;
  align-self: center;
  margin: 0 6px;
  min-width: 12px;
}
.bs-panel .bs-nums {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.bs-panel .bs-tabular-nums { font-variant-numeric: tabular-nums; }
.bs-panel .bs-before { color: var(--bs-ink-dim); }
.bs-panel .bs-arrow  { color: var(--bs-ink-dim); }
.bs-panel .bs-after  { font-weight: 600; }
.bs-panel .bs-delta  { color: var(--orange); font-weight: 700; margin-left: 4px; }

/* Ink-bleed flash on ledger rows */
.bs-panel .bs-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21,20,20,0);
  pointer-events: none;
  transition: background-color 32ms linear;
}
.bs-panel .bs-bleed.flash::after { background: rgba(21,20,20,0.08); }

/* Narrow-viewport: shrink ledger fonts to prevent overflow */
@media (max-width: 380px) {
  .bs-panel .bs-ledger-row,
  .bs-panel .bs-nums { font-size: 10.5px; }
  .bs-panel .bs-label { font-size: 9.5px; }
}

/* TOTAL — orange band, wipes in from left */
.bs-panel .bs-total {
  background: var(--orange);
  color: var(--cream-2);
  padding: 10px 22px;
  margin: 12px -24px 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 400ms var(--ease);
}
.bs-panel .bs-total.in { clip-path: inset(0 0 0 0); }

/* Callout — value-implication tagline between TOTAL band + signoff */
.bs-panel .bs-callout {
  margin: 18px 0 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 2.6vw, 19px);
  color: var(--black);
  text-align: center;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.bs-panel .bs-callout span {
  display: block;
}
.bs-panel .bs-callout span:last-child {
  color: var(--orange);
  margin-top: 2px;
}

/* Signoff */
.bs-panel .bs-signoff {
  margin: 14px 0 0;
  font-family: "Anton", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}

/* Coda — ornament + footnote that fills the bottom space */
.bs-panel .bs-coda {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
}
.bs-panel .bs-coda-orn {
  font-family: "Anton", sans-serif;
  font-size: 16px;
  line-height: 1;
  color: var(--orange);
  display: inline-block;
}
.bs-panel .bs-coda-note {
  font-family: "IBM Plex Mono", monospace;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--bs-ink-soft);
  text-align: center;
  line-height: 1.55;
  max-width: 88%;
  margin: 0;
}

/* Footer band — black, slides up from below */
.bs-panel .bs-foot {
  background: var(--black);
  color: var(--cream-2);
  padding: 10px 22px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 300ms var(--ease);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bs-panel .bs-foot.in { transform: translateY(0); }

/* Drop motion primitive — used by every animated content line */
.bs-panel .bs-drop {
  opacity: 0;
  transform: translateY(-8px);
}
.bs-panel .bs-drop.in {
  animation: bs-paper-bounce 80ms var(--ease) forwards;
}
@keyframes bs-paper-bounce {
  0%   { opacity: 0; transform: translateY(-8px); }
  60%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Narrow viewports — tighten stamp + headline */
@media (max-width: 380px) {
  .bs-panel .bs-head { font-size: clamp(24px, 5.4vw, 32px); }
  .bs-panel .bs-body-line { font-size: 11px; }
  .bs-panel .bs-callout { font-size: 14px; }
  .bs-panel .bs-coda-note { font-size: 9px; }
  .bs-panel .bs-total { font-size: 18px; padding: 9px 18px; }
}

/* Mobile (Artists deep stack) — match stats-morph behavior */
@media (max-width: 900px) {
  .bs-panel { max-width: 100%; aspect-ratio: 4 / 5; }
}

/* Reduced motion — skip the drop, render end state */
@media (prefers-reduced-motion: reduce) {
  .bs-panel .bs-drop,
  .bs-panel .bs-drop.in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bs-panel .bs-mast,
  .bs-panel .bs-foot { transform: none !important; }
  .bs-panel .bs-total { clip-path: none !important; }
}

/* ============================================================
   STUDIOS TEASER — compressed band (replaces full Studios deep-dive)
   ============================================================ */
.studio-teaser {
  padding: clamp(50px, 7vw, 90px) var(--gutter);
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.studio-teaser__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.studio-teaser__copy { max-width: 60ch; }
.studio-teaser__h3 {
  font-family: var(--header);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 8px 0 12px;
}
.studio-teaser__h3 .accent { color: var(--orange); }
.studio-teaser__lede {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 0;
}
.studio-teaser__cta { white-space: nowrap; }
@media (max-width: 720px) {
  .studio-teaser__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   HONESTY — merged Expectations + Risk reversal section
   Inherits .risk__grid, .risk__item, .risk__num styles from old section.
   ============================================================ */
.honesty {
  padding: var(--section-y) var(--gutter);
  background: var(--black-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.honesty__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: clamp(60px, 8vw, 100px);
}
.honesty__expect {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.honesty__quote {
  font-family: var(--header);
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 20px 0 24px;
}
.honesty__quote .accent { color: var(--orange); }
.honesty__sub {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cream-dim);
  max-width: 60ch;
  margin: 0 auto;
}
.honesty__risk { text-align: center; }
.honesty__h2 {
  margin: 14px auto 32px;
  max-width: 22ch;
}
.honesty__risk .risk__grid {
  max-width: var(--max);
  margin: 0 auto;
}


/* ============================================================
   SUB FEATURE IMAGE — full-width photographic break for
   service pages (artists.html, studios.html) + manifesto.html.
   Treatment: solid black background + 50% opacity grayscale image
   to match the dark, B&W aesthetic of the rest of the site.
   ============================================================ */
.sub-feature-img {
  margin: 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--black);
  overflow: hidden;
  position: relative;
}
.sub-feature-img img {
  display: block;
  width: 100%;
  height: clamp(280px, 38vw, 480px);
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.5;
  transition: opacity 0.6s var(--ease);
}
.sub-feature-img:hover img { opacity: 0.65; }
@media (max-width: 720px) {
  .sub-feature-img img { height: 240px; }
}


/* ============================================================
   NUMBERS STRIP — at-a-glance credibility band.
   Lives directly below the hero on index.html and as a top-of-page
   credibility hit on pmu.html, laser.html. Compact, Anton numbers,
   small captions, brand colours.
   ============================================================ */
.numbers-strip {
  background: var(--black-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 24px;
}
.numbers-strip__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
  text-align: center;
}
.num-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
  position: relative;
}
.num-item + .num-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--cream-faint);
  opacity: 0.4;
}
.num-item__value {
  font-family: var(--header);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  color: var(--orange);
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.num-item__label {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  line-height: 1.4;
}
.numbers-strip__caption {
  text-align: center;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 22px 0 0;
}
@media (max-width: 720px) {
  .numbers-strip { padding: 28px 16px; }
  /* 2x2 grid. Cells stretch to equal height per row so the value
     numbers line up and the dividers are even, regardless of how
     many lines each label wraps to. */
  .numbers-strip__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    align-items: stretch;
  }
  .num-item + .num-item::before { display: none; }
  .num-item {
    padding: 22px 12px;
    justify-content: flex-start;
    gap: 8px;
  }
  /* Clean internal cross dividers for the 2x2 grid */
  .num-item:nth-child(1),
  .num-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .num-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .numbers-strip__caption { font-size: 11px; margin-top: 18px; }
}


/* ============================================================
   DELIVERABLES BLOCK — "What's included" section for service
   pages. Clean list, orange accent ticks, monospace body.
   ============================================================ */
.deliverables {
  background: var(--black);
  padding: 80px 24px;
  border-top: 1px solid var(--line);
}
.deliverables__inner {
  max-width: 980px;
  margin: 0 auto;
}
.deliverables__head { margin-bottom: 40px; }
.deliverables__head h2 {
  font-family: var(--header);
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 8px 0 0;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.deliverables__head h2 .accent { color: var(--orange); }
.deliverables__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.deliverables__list > li {
  padding: 18px 0 18px 32px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
}
.deliverables__list > li:last-child { border-bottom: none; }
.deliverables__list > li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 18px;
  color: var(--orange);
  font-family: var(--header);
  font-size: 18px;
  line-height: 1.4;
}
.deliverables__list strong {
  color: var(--cream-2);
  font-weight: 600;
}
.deliverables__list ul {
  margin: 10px 0 0 18px;
  padding: 0;
  list-style: disc;
  color: var(--cream-dim);
}
.deliverables__list ul li { padding: 4px 0; font-size: 14px; }

/* Collapsible variant — used on artists.html and studios.html
   so the full deliverables fine-print doesn't compete with the
   6-tile sub-features grid above it. */
.deliverables-expand {
  border: 1px solid var(--line);
  background: var(--black-2);
  padding: 0;
}
.deliverables-expand summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 60px 24px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deliverables-expand summary::-webkit-details-marker { display: none; }
.deliverables-expand summary::after {
  content: "+";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--header);
  font-size: 28px;
  color: var(--orange);
  line-height: 1;
}
.deliverables-expand[open] summary::after { content: "−"; }
.deliverables-expand__eyebrow {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
}
.deliverables-expand__title {
  font-family: var(--header);
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.deliverables-expand .deliverables__list {
  padding: 0 28px 24px;
  margin: 8px 0 0;
}


/* ============================================================
   LANDING PAGE NOTE — small follow-on section after deliverables
   on artists.html and studios.html. Neutral framing.
   ============================================================ */
.landing-note {
  background: var(--black-2);
  padding: 60px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.landing-note__inner {
  max-width: 820px;
  margin: 0 auto;
}
.landing-note h2 {
  font-family: var(--header);
  font-size: clamp(24px, 3.2vw, 34px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 8px 0 20px;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.landing-note h2 .accent { color: var(--orange); }
.landing-note p {
  color: var(--cream-dim);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.landing-note p:last-child { margin-bottom: 0; }
.landing-note strong { color: var(--cream); font-weight: 600; }


/* ============================================================
   DM AUTOMATION PHILOSOPHY — small positioning block.
   Used on artists.html.
   ============================================================ */
.dm-philosophy {
  background: var(--black);
  padding: 70px 24px;
  border-top: 1px solid var(--line);
}
.dm-philosophy__inner {
  max-width: 820px;
  margin: 0 auto;
}
.dm-philosophy h2 {
  font-family: var(--header);
  font-size: clamp(24px, 3.2vw, 34px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 8px 0 20px;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.dm-philosophy h2 .accent { color: var(--orange); }
.dm-philosophy p {
  color: var(--cream-dim);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 16px;
}
.dm-philosophy p:last-child { margin-bottom: 0; }
.dm-philosophy strong { color: var(--cream); font-weight: 600; }


/* ============================================================
   STUDIO FAQ — extends the existing FAQ pattern, scoped to
   studios.html.
   ============================================================ */
.studio-faq {
  background: var(--black-2);
  padding: 80px 24px;
  border-top: 1px solid var(--line);
}
.studio-faq__inner {
  max-width: 900px;
  margin: 0 auto;
}
.studio-faq h2 {
  font-family: var(--header);
  font-size: clamp(28px, 4vw, 42px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 8px 0 32px;
  letter-spacing: -0.4px;
  line-height: 1.15;
  text-align: center;
}
.studio-faq h2 .accent { color: var(--orange); }
.studio-faq__item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.studio-faq__item:last-child { border-bottom: none; }
.studio-faq__item summary {
  font-family: var(--header);
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: -0.2px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
  line-height: 1.35;
}
.studio-faq__item summary::-webkit-details-marker { display: none; }
.studio-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 22px;
  font-family: var(--header);
}
.studio-faq__item[open] summary::after { content: "−"; }
.studio-faq__item p {
  color: var(--cream-dim);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  margin: 14px 0 0;
}
.studio-faq__item p + p { margin-top: 10px; }


/* ============================================================
   AUDIENCE BUILD — "What we actually build" homepage section.
   Lives between the Mission section and the Artists deep-dive.
   The strategic explainer of targeted audience building.
   ============================================================ */
.audience-build {
  background: var(--black);
  padding: 100px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.audience-build__inner {
  max-width: 980px;
  margin: 0 auto;
}
.audience-build__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.audience-build__head .eyebrow {
  justify-content: center;
}
.audience-build__head h2 {
  font-family: var(--header);
  font-size: clamp(32px, 5vw, 56px);
  text-transform: uppercase;
  color: var(--cream);
  margin: 14px 0 24px;
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.audience-build__head h2 .accent { color: var(--orange); }
.audience-build__lede {
  color: var(--cream-dim);
  font-family: var(--body);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
  margin: 0;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.audience-build__intro {
  color: var(--cream);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}
.audience-build__steps {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: ab-step;
}
.audience-build__steps li {
  position: relative;
  padding: 28px 0 28px 88px;
  border-bottom: 1px solid var(--line);
  counter-increment: ab-step;
}
.audience-build__steps li:last-child { border-bottom: none; }
.audience-build__steps li::before {
  content: "0" counter(ab-step);
  position: absolute;
  left: 0;
  top: 28px;
  font-family: var(--header);
  font-size: 36px;
  color: var(--orange);
  letter-spacing: -1px;
  line-height: 1;
  min-width: 64px;
}
.audience-build__steps h3 {
  font-family: var(--header);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--cream);
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.audience-build__steps p {
  color: var(--cream-dim);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
.audience-build__outcome {
  max-width: 720px;
  margin: 0 auto 16px;
  color: var(--cream);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.75;
}
.audience-build__outcome + .audience-build__outcome {
  margin-top: 0;
}
.audience-build__outcome strong { color: var(--cream-2); }
.audience-build__callout {
  margin: 48px auto 0;
  max-width: 720px;
  padding: 28px 32px;
  background: var(--black-2);
  border-left: 4px solid var(--orange);
  font-family: var(--header);
  font-size: clamp(20px, 2.5vw, 28px);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: -0.3px;
  line-height: 1.25;
  text-align: center;
}
.audience-build__callout .accent { color: var(--orange); }

@media (max-width: 720px) {
  .audience-build { padding: 70px 18px; }
  .audience-build__head h2 { max-width: 14ch; margin-left: auto; margin-right: auto; }
  .audience-build__steps li { padding: 24px 0 24px 56px; }
  .audience-build__steps li::before {
    font-size: 28px;
    min-width: 48px;
    top: 24px;
  }
  .audience-build__callout {
    padding: 20px 22px;
    border-left-width: 3px;
  }
}