/* =========================================================
   Fourdots Digital — Refreshed Landing Prototype
   Dark theme · editorial · dynamic
   Uses real fourdots.io brand tokens:
   fonts (MONT + Steradian), purple #7851ed, pink→orange gradient
========================================================= */

/* Brand fonts pulled from the live fourdots.io CDN */
@font-face {
  font-family: 'MONT';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/MONT-Normal-700-Bold.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/MONT-Normal-700-Bold.woff') format('woff');
  /* Trial font replaces % (U+0025) and / (U+002F) with "DEMO" watermark — exclude those glyphs so browser falls back for just those chars. */
  unicode-range: U+0020-0024, U+0026-002E, U+0030-10FFFF;
}
@font-face {
  font-family: 'Steradian';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-200-ExtraLight.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-200-ExtraLight.woff') format('woff');
}
@font-face {
  font-family: 'Steradian';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-400-Regular.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-400-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Steradian';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-500-Medium.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-500-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Steradian';
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Italic-500-Medium.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Italic-500-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Steradian';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-700-Bold.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-700-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Steradian';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Italic-700-Bold.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Italic-700-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Steradian';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-900-Black.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Normal-900-Black.woff') format('woff');
}
@font-face {
  font-family: 'Steradian';
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Italic-900-Black.woff2') format('woff2'),
       url('https://fourdotsio.swipepages.media/5fb59605eb44eb0028e4086b/fonts/Steradian-Italic-900-Black.woff') format('woff');
}

:root {
  --bg:        #0a0a0a;
  --bg-2:      #121212;
  --bg-3:      #1a1a1a;
  --ink:       #ffffff;
  --ink-dim:   #a9a7b5;
  --ink-mute:  #5c5a6b;

  /* Brand — from fourdots.io */
  --purple:         #7851ed;   /* core CTA */
  --purple-border:  #651eff;   /* CTA border */
  --purple-hover:   #9013fe;   /* CTA hover */
  --navy:           #161652;
  --pink:           #FF6AE6;
  --orange:         #F8B03C;
  --cyan:           #5AE4FF;
  --lime:           #A6FF79;

  /* Accent alias — used everywhere the old acid yellow was */
  --accent:         var(--purple);

  /* Signature headline gradient (from .header-pink on fourdots.io) */
  --gradient-headline: linear-gradient(91.27deg, #FF6AE6 -2.35%, #F8B03C 109.02%);
  --gradient-pink-orange: linear-gradient(45deg, #FF6AE6 0%, #F8B03C 100%);
  --gradient-cyan-pink:   linear-gradient(90.43deg, #5AE4FF -2.38%, #FF6AE6 158.37%);

  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);

  --container: 1320px;
  --radius:    18px;
  --radius-lg: 28px;

  --display: 'MONT', 'Steradian', system-ui, sans-serif;
  --body:    'Steradian', 'Open Sans', system-ui, -apple-system, sans-serif;

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

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* compensate for the sticky nav so anchor targets aren't hidden behind it */
  scroll-padding-top: 96px;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 720px) {
  html { scroll-padding-top: 72px; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }

em { font-style: italic; font-weight: inherit; color: var(--ink); }
.accent {
  background: var(--gradient-cyan-pink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Signature gradient text (pink → orange) */
.gradient-text,
.hero__title,
.h2 em,
.cta__title {
  background: var(--gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Animated flow through all three brand gradients.
   Single wide gradient + background-position animation with `alternate`
   direction so the loop reverses (no seam).
   Applied to "Flavour" in the hero and "revival" in the closing CTA. */
.hero__title .line:first-child,
.cta__title em {
  background: linear-gradient(90deg,
    #FF6AE6 0%,      /* gradient 1 — pink */
    #F8B03C 18%,     /* gradient 1 — orange */
    #5AE4FF 38%,     /* gradient 2 — cyan */
    #FF6AE6 55%,     /* gradient 2 — pink */
    #5AE4FF 72%,     /* gradient 3 — cyan */
    #A6FF79 86%,     /* gradient 3 — lime */
    #5AE4FF 100%     /* gradient 3 — cyan */
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: flavourFlow 14s ease-in-out infinite alternate;
}

@keyframes flavourFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
/* keep the non-em part of h2 as white */
.h2 { color: var(--ink); }

/* -------- Grain overlay -------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------- Labels / eyebrows -------- */
.label, .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 20px var(--pink);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .4; transform: scale(1.4); }
}

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 500; font-size: 14px;
  transition: transform .4s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--purple); color: #fff;
  border: 1px solid var(--purple-border);
  box-shadow: 0 0 0 0 rgba(120,81,237,0);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--purple-hover);
  border-color: var(--purple-hover);
  box-shadow: 0 10px 40px -10px rgba(144,19,254,.5);
}
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(255,255,255,.04); }
.btn--lg  { padding: 18px 28px; font-size: 15px; }
.btn--xl  { padding: 22px 34px; font-size: 16px; }

/* -------- Typography -------- */
.h2 {
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 88px);
  line-height: 0.96; letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 18ch;
}
.lead {
  font-size: clamp(16px, 1.3vw, 20px);
  color: var(--ink-dim);
  max-width: 55ch;
  margin-top: 24px;
}

/* -------- Nav -------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 28px;
  display: flex; align-items: center; gap: 28px;
}
.nav__logo {
  display: inline-flex; align-items: center; gap: 10px;
}
.nav__logo img {
  height: 34px; width: auto; display: block;
}
.footer .nav__logo img { height: 40px; }
.nav__logo:hover .dots i:nth-child(odd) { background: var(--pink); }

.nav__menu {
  display: flex; gap: 28px; margin-left: auto; margin-right: 8px;
  font-size: 14px; font-weight: 500;
}
.nav__menu a { position: relative; padding: 6px 0; color: var(--ink); }
.nav__menu a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gradient-headline);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Industries dropdown ---- */
.nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink);
  background: none; border: 0;
  cursor: pointer;
  position: relative;
}
.nav__dropdown-trigger::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gradient-headline);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__dropdown:hover .nav__dropdown-trigger::after,
.nav__dropdown-trigger.is-active::after,
.nav__dropdown.is-open .nav__dropdown-trigger::after {
  transform: scaleX(1); transform-origin: left;
}
.nav__dropdown-chevron {
  transition: transform .3s var(--ease);
  opacity: 0.7;
}
.nav__dropdown.is-open .nav__dropdown-chevron,
.nav__dropdown:hover .nav__dropdown-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.nav__dropdown-menu {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 340px;
  padding: 10px;
  background: rgba(18,18,22,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.9),
    0 10px 30px -10px rgba(120,81,237,0.3);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s var(--ease), visibility .25s;
  z-index: 10;
}
.nav__dropdown-menu::before {
  content: '';
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(18,18,22,0.94);
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown.is-open .nav__dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Invisible bridge so hover doesn't drop the menu when moving to it */
.nav__dropdown::after {
  content: '';
  position: absolute; top: 100%; left: 0; right: 0;
  height: 24px;
}
.nav__dropdown-menu a {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  color: var(--ink);
  transition: background .2s ease;
}
.nav__dropdown-menu a::after { display: none; } /* kill the underline */
.nav__dropdown-menu a:hover {
  background: rgba(255,255,255,0.04);
}
.nav__dropdown-menu a[aria-current="page"] {
  background: rgba(120,81,237,0.14);
}
.nav__dropdown-label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.nav__dropdown-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.nav__dropdown-more {
  padding: 12px 16px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 1024px) {
  /* Drop the dropdown bridge on touch; rely on click toggle only */
  .nav__dropdown::after { display: none; }
}

.nav__cta { padding: 10px 18px; font-size: 13px; }
.nav__toggle { display: none; }

/* -------- HERO -------- */
.hero {
  position: relative; min-height: 100vh;
  padding: 140px 0 80px;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.35;
}
.hero__mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 10% 110%, rgba(120,81,237,0.28), transparent 55%),
    radial-gradient(700px 500px at 90% 10%, rgba(255,106,230,0.18), transparent 55%),
    radial-gradient(500px 400px at 50% 120%, rgba(248,176,60,0.10), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.9) 80%);
  filter: saturate(1.15);
}
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 50%, transparent 40%, rgba(10,10,10,.7));
}
.hero__content {
  position: relative; z-index: 2;
  max-width: var(--container);
  width: 100%; margin: 0 auto; padding: 0 28px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero__copy { min-width: 0; }
.hero__title {
  font-family: var(--display);
  font-size: clamp(60px, 13vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-top: 24px;
}
/* MONT has no italic — use Steradian Black italic for italic words in display */
.hero__title em,
.h2 em,
.cta__title em {
  font-family: 'Steradian', var(--body);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
}
.hero__title .line { display: block; }
.hero__sub {
  margin-top: 34px;
  max-width: 46ch;
  font-size: clamp(16px, 1.35vw, 22px);
  color: var(--ink-dim);
}
.hero__ctas {
  margin-top: 40px;
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* -------- iPhone mockup -------- */
/* Screen is locked to 9:16 (exact video aspect) → zero crop.
   Phone height is derived from screen + uniform bezel padding. */
.phone {
  --pw: 320px; /* phone width — drives all proportional dimensions */
  position: relative;
  justify-self: end;
  width: var(--pw);
  perspective: 1200px;
}
.phone__glow {
  position: absolute; inset: -40px;
  border-radius: 999px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255,106,230,0.35), transparent 60%),
    radial-gradient(60% 60% at 50% 70%, rgba(120,81,237,0.35), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  animation: phoneGlow 6s ease-in-out infinite;
}
@keyframes phoneGlow {
  0%,100% { opacity: .8; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.05); }
}
.phone__frame {
  position: relative;
  width: 100%;
  border-radius: calc(var(--pw) * 0.15);
  background: linear-gradient(145deg, #2a2a2e 0%, #0d0d10 100%);
  padding: calc(var(--pw) * 0.028);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.1),
    inset 0 0 0 2px rgba(0,0,0,0.8),
    0 30px 80px -20px rgba(0,0,0,0.9),
    0 20px 40px -10px rgba(120,81,237,0.35);
  transform: rotate(-4deg);
  transition: transform .6s var(--ease);
}
.phone:hover .phone__frame { transform: rotate(0deg) translateY(-6px); }

.phone__bezel {
  position: relative;
  width: 100%;
  border-radius: calc(var(--pw) * 0.125);
  background: #000;
  padding: calc(var(--pw) * 0.0125);
}
.phone__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--pw) * 0.1125);
  overflow: hidden;
  background: #000;
}
.phone__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Dynamic island */
.phone__notch {
  position: absolute;
  top: calc(var(--pw) * 0.031); left: 50%;
  transform: translateX(-50%);
  width: calc(var(--pw) * 0.281);
  height: calc(var(--pw) * 0.081);
  background: #000;
  border-radius: 999px;
  z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.phone__notch::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px;
  background: radial-gradient(circle at 30% 30%, #3a3a3a, #0a0a0a);
  border-radius: 50%;
}
/* Side buttons */
.phone__side {
  position: absolute; top: 0; bottom: 0;
  width: 3px;
  pointer-events: none;
}
.phone__side--left  { left: -2px;  }
.phone__side--right { right: -2px; }
.phone__btn {
  position: absolute; left: 0; width: 100%;
  background: linear-gradient(90deg, #1a1a1d, #3a3a3e, #1a1a1d);
  border-radius: 2px;
}
.phone__btn--silent { top: 14%; height: calc(var(--pw) * 0.075); }
.phone__btn--vol    { top: 22%; height: calc(var(--pw) * 0.138); }
.phone__btn--vol + .phone__btn--vol { top: 33%; }
.phone__btn--power  { top: 26%; height: calc(var(--pw) * 0.219); }

/* Below 1100px — keep adjacent layout, scale phone via --pw */
@media (max-width: 1100px) {
  .hero__content {
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
  }
  .phone {
    --pw: 220px;
    justify-self: end;
    margin-top: 0;
  }
  .phone__glow {
    inset: -24px;
    filter: blur(28px);
  }
}

@media (max-width: 860px) {
  .hero__content {
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
  }
  .phone { --pw: 180px; }
}

@media (max-width: 720px) {
  .hero {
    padding: 96px 0 56px;
    min-height: auto;
    align-items: flex-start;
  }
  .hero__content {
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
  }
  .phone { --pw: 140px; }
  .hero__title {
    font-size: clamp(36px, 10.5vw, 64px);
  }
  .hero__sub {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .hero__content { gap: 12px; }
  .phone { --pw: 116px; }
  .hero__title {
    font-size: clamp(30px, 9vw, 52px);
  }
}

@media (max-width: 380px) {
  .phone { --pw: 100px; }
  .hero__title {
    font-size: clamp(28px, 8.5vw, 44px);
  }
}

.hero__scroll {
  position: absolute; bottom: 32px; left: 28px;
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
  z-index: 3;
}
.hero__scroll-line {
  width: 60px; height: 1px; background: var(--line-2);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-headline); transform: translateX(-100%);
  animation: scroll-line 2.2s var(--ease) infinite;
}
@keyframes scroll-line {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* -------- MARQUEE -------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  overflow: hidden;
  background: var(--bg);
}
.marquee__track {
  display: flex; gap: 40px; align-items: center;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4.5vw, 64px);
  letter-spacing: -0.02em;
}
.marquee__track span { color: var(--ink); }
.marquee__track .marquee__dot {
  font-size: 0.4em;
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -------- PHILOSOPHY -------- */
.philosophy {
  padding: 140px 0;
  border-bottom: 1px solid var(--line);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 60px;
  align-items: start;
}
/* Certifications — real brand marks, inline row */
.certs {
  margin-top: 44px;
}
.certs__row {
  display: flex; flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}
.cert {
  height: 36px; width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity .3s ease, transform .3s var(--ease);
}
.cert:hover {
  opacity: 1;
  transform: translateY(-2px);
}
/* TikTok wordmark is all caps baseline — fill the whole frame, so shrink
   to match perceived wordmark height of Meta / Google Ads */
.cert--tight { height: 22px; }

/* Dark-on-light logos (Google Ads) need a light plate to be visible on dark bg */
.cert--light {
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  height: 36px;
  box-shadow: 0 4px 20px -8px rgba(0,0,0,0.4);
}

/* -------- STATS -------- */
.stats {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.stat {
  border-top: 1px solid var(--line-2);
  padding-top: 28px;
}
.stat__num {
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 128px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
}
.stat:nth-child(odd) .stat__num {
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat:nth-child(even) .stat__num { color: var(--ink); }
.stat__label {
  font-size: 14px; color: var(--ink-dim); line-height: 1.4;
}

/* -------- MANIFESTO BREAK -------- */
.manifesto {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.manifesto__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(255,106,230,0.10), transparent 55%),
    radial-gradient(700px 400px at 90% 100%, rgba(120,81,237,0.12), transparent 55%),
    radial-gradient(500px 300px at 50% 50%, rgba(248,176,60,0.06), transparent 60%);
}
.manifesto__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 28px;
  max-width: 1000px;
}
.manifesto__lead {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.manifesto__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 18px;
}
.manifesto__list li {
  display: flex; align-items: center;
  gap: 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.manifesto__list em {
  font-family: 'Steradian', var(--body);
  font-weight: 900; font-style: italic;
  letter-spacing: -0.02em;
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.manifesto__check {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gradient-headline);
  color: #0a0a0a;
  box-shadow: 0 6px 24px -6px rgba(255,106,230,0.35);
}
.manifesto__closer {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink-dim);
  margin-top: 14px;
  letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .manifesto { padding: 70px 0; }
  .manifesto__list li { gap: 16px; }
  .manifesto__check { width: 40px; height: 40px; }
  .manifesto__check svg { width: 18px; height: 18px; }
}

/* -------- SERVICES -------- */
.services { padding: 140px 0; border-bottom: 1px solid var(--line); }
.section-head {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 70px;
}
.section-head .h2 { margin-top: 6px; }
.section-head .lead { margin-top: 10px; }

.services__grid {
  display: grid;
  /* 6-col virtual grid: regulars span 2 (3 per row), wides span 3 (2 per row) */
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service { grid-column: span 2; }
.service {
  display: block;
  padding: 42px 34px 34px;
  background: var(--bg);
  min-height: 320px;
  position: relative; overflow: hidden;
  transition: background .4s ease, color .4s ease;
}
.service__num {
  font-family: var(--display);
  font-size: 14px; color: var(--ink-mute);
  margin-bottom: 80px;
}
.service h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.1;
}
.service p {
  color: var(--ink-dim);
  margin-top: 14px;
  font-size: 15px;
  max-width: 34ch;
  padding-right: 64px;
  transition: color .4s ease;
}
.service__arrow {
  position: absolute; right: 28px; bottom: 28px;
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  transition: background .4s ease, color .4s ease, transform .4s var(--ease);
  font-size: 18px;
}
.service:hover {
  background: var(--purple); color: #fff;
}
.service:hover p { color: rgba(255,255,255,.86); }
.service:hover .service__num { color: rgba(255,255,255,.7); }
.service:hover .service__arrow {
  background: #fff; color: var(--purple); border-color: #fff;
  transform: translate(4px,-4px) rotate(-10deg);
}
.service--wide { grid-column: span 3; }   /* half of 6-col grid → 2 per row */

/* -------- WORK / CASE CAROUSEL -------- */
.work { padding: 140px 0; border-bottom: 1px solid var(--line); }
.work__head {
  flex-direction: row; justify-content: space-between; align-items: end;
  gap: 40px;
}
.work__controls { display: flex; gap: 10px; }
.work__btn {
  width: 56px; height: 56px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 20px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.work__btn:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
/* Native horizontal scroll with snap — works with mouse drag, trackpad,
   touch, and the prev/next buttons (which call scrollBy). */
.work__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  /* extend the track outside the container on the right so the last card
     can scroll fully into view with a little trailing space */
  margin-right: calc(-1 * max(24px, (100vw - var(--container)) / 2));
  padding-right: max(24px, (100vw - var(--container)) / 2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.work__viewport::-webkit-scrollbar { display: none; }
.work__track {
  display: flex; gap: 28px;
  width: max-content;
}
.case {
  flex: 0 0 calc((100vw - 28px * 4 - 2 * max(24px, (100vw - var(--container)) / 2)) / 3);
  max-width: 420px;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.case__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  cursor: pointer;
}
.case__media video,
.case__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.case__media:hover video,
.case__media:hover img { transform: scale(1.04); }
.case__hoverhint {
  position: absolute;
  left: 20px; bottom: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  z-index: 2;
  opacity: 0.9;
  transition: opacity .3s ease, transform .3s ease;
}
.case__media:hover .case__hoverhint {
  opacity: 0;
  transform: translateY(6px);
}
.case__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,.7));
}
.case__body { padding: 28px; }
.case__tag {
  display: inline-block;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 14px;
  font-weight: 500;
}
.case__body h3 {
  font-family: var(--display);
  font-size: 22px; line-height: 1.2; font-weight: 600;
  letter-spacing: -0.01em;
}
.case__kpis {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 14px; margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.case__kpis div { display: flex; flex-direction: column; }
.case__kpis b {
  font-family: var(--display);
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
}
.case__kpis span { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }

/* -------- LOGO MARQUEES -------- */
.logos {
  padding: 100px 0;
  border-bottom: 1px solid var(--line);
}
.logos__label { margin-bottom: 40px; }
.logos__row { overflow: hidden; padding: 14px 0; }
.logos__track {
  display: flex; gap: 72px; align-items: center;
  white-space: nowrap;
}
.logos__row--left .logos__track  { animation: marquee 40s linear infinite; }
.logos__row--right .logos__track { animation: marquee-reverse 45s linear infinite; }
/* Per-logo overrides for logos that read visually too wide
   (Hansler and The LNK have very long wordmarks that dominate the row) */
.logos__track img[src*="hansler"],
.logos__track img[src*="the-lnk"] {
  height: 26px;
}

/* Multi-family marquee — normalize visual weight.
   Source images are all 80px tall; CSS caps both height AND width so
   wide wordmarks shrink proportionally instead of dominating the row. */
.mf-logos .logos__track img {
  height: auto !important;
  width: auto;
  max-height: 40px;
  max-width: 170px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* Per-logo tuning — shrink visually dominant wordmarks */
.mf-logos .logos__track img[src*="west22"],
.mf-logos .logos__track img[src*="pivot"],
.mf-logos .logos__track img[src*="via123"],
.mf-logos .logos__track img[src*="trilogy"],
.mf-logos .logos__track img[src*="element"] {
  max-height: 28px;
  max-width: 130px;
}
/* Per-logo tuning — enlarge low-weight wordmarks */
.mf-logos .logos__track img[src*="parkside-square"],
.mf-logos .logos__track img[src*="rhythm"] {
  max-height: 52px;
  max-width: 220px;
}
/* Brixton is ultra-wide — let width run longer so height reads bigger */
.mf-logos .logos__track img[src*="brixton"] {
  max-height: 52px;
  max-width: 340px;
}
.logos__track img {
  height: 36px; width: auto;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(100%) brightness(1.8);
  transition: opacity .3s ease, filter .3s ease, transform .3s var(--ease);
  flex: 0 0 auto;
}
.logos__track img:hover {
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.06);
}
@keyframes marquee-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* -------- TESTIMONIALS -------- */
.testimonials {
  padding: 140px 0;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  border-bottom: 1px solid var(--line);
}
.testimonials__slider {
  margin-top: 40px; position: relative;
  min-height: 280px;
}
.testimonial {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  max-width: 1000px;
}
.testimonial.is-active { opacity: 1; transform: translateY(0); position: relative; }
.testimonial p {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.15; font-weight: 500;
  letter-spacing: -0.02em;
}
.testimonial footer {
  margin-top: 30px; color: var(--ink-dim);
  font-size: 14px; letter-spacing: .06em;
}
.testimonials__dots {
  display: flex; gap: 10px; margin-top: 50px;
}
.testimonials__dots button {
  width: 36px; height: 4px; border-radius: 999px;
  background: var(--line-2);
  transition: background .3s ease;
}
.testimonials__dots button.is-active { background: var(--gradient-headline); background: var(--purple); }

/* -------- CREATORS -------- */
.creators {
  padding: 140px 0;
  border-bottom: 1px solid var(--line);
}
.creators .grid-2 { grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
/* Single collage image, left-aligned in grid-2 with floating badge */
.creators__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  isolation: isolate; /* keeps blend modes scoped to this container */
}
.creators__media > img,
.creators__media > video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Brand color wash — unifies the varied tones across the 9 images */
.creators__media::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      rgba(255,106,230,0.38) 0%,
      rgba(248,176,60,0.26) 45%,
      rgba(120,81,237,0.42) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
/* Vignette on top — pushes focus to center, unifies edges with page bg */
.creators__media::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 95% 80% at center,
    transparent 15%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.95) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Ensure the badge paints above both overlays */
.creators__media .creators__badge { z-index: 3; }
.creators__badge {
  position: absolute; top: 22px; left: 22px;
  background: var(--gradient-headline); color: #0a0a0a;
  padding: 14px 18px;
  border-radius: 16px;
  font-family: var(--display); font-weight: 700;
  font-size: 13px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .06em;
}
.creators__body .btn { margin-top: 36px; }

/* -------- BIG CTA -------- */
.cta {
  padding: 160px 0;
  text-align: left;
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(120,81,237,0.22), transparent 60%),
    radial-gradient(500px 300px at 10% 100%, rgba(255,106,230,0.14), transparent 60%),
    radial-gradient(400px 300px at 60% 100%, rgba(248,176,60,0.10), transparent 60%),
    var(--bg);
}
.cta__title {
  font-family: var(--display);
  font-size: clamp(48px, 8.5vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-top: 24px;
}
.cta__row {
  margin-top: 60px;
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* -------- FOOTER -------- */
.footer {
  padding: 80px 0 40px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.footer h4 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 500; margin-bottom: 16px;
}
.footer p { font-size: 14px; color: var(--ink); line-height: 1.7; }
.footer a:hover { color: var(--pink); }
.footer__brand p { color: var(--ink-dim); margin-top: 16px; font-size: 14px; max-width: 28ch; }
.footer__mega {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(80px, 20vw, 360px);
  line-height: 0.9; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  margin: 60px 0 40px;
  white-space: nowrap;
  user-select: none;
}
.footer__legal {
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 12px; color: var(--ink-dim);
  letter-spacing: .06em;
  flex-wrap: wrap;
}

/* -------- Reveal animations -------- */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger hero reveal */
.hero .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero .reveal:nth-child(2) { transition-delay: 0.15s; }
.hero .reveal:nth-child(3) { transition-delay: 0.35s; }
.hero .reveal:nth-child(4) { transition-delay: 0.5s; }

/* -------- Responsive -------- */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .service { grid-column: span 1; }
  .service--wide { grid-column: span 2; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  .case { flex: 0 0 calc((100vw - 28px * 3 - 2 * max(20px, (100vw - var(--container)) / 2)) / 2); }
  .grid-2, .creators .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav__inner { padding: 16px 20px; gap: 16px; }
  .nav__menu, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; flex-direction: column; gap: 5px; margin-left: auto; padding: 10px; }
  .nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); }
  .hero { padding: 120px 0 60px; }
  .hero__scroll { display: none; }
  .services__grid { grid-template-columns: 1fr; }
  .service, .service--wide { grid-column: auto; }
  .stats__grid { grid-template-columns: 1fr; gap: 32px; }
  .stat__num { font-size: clamp(56px, 18vw, 120px); }
  .case { flex: 0 0 88%; }
  .case__kpis { gap: 10px; }
  .case__kpis b { font-size: 22px; }
  .cta__title, .hero__title { font-size: clamp(52px, 14vw, 96px); }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__legal { flex-direction: column; gap: 10px; }
  .philosophy, .services, .work, .testimonials, .creators { padding: 90px 0; }
  .stats { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   STRATEGY SESSION MODAL
========================================================= */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility .35s;
}
.modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(6,6,10,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(92vh, 820px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #131318 0%, #0d0d10 100%);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow:
    0 40px 120px -30px rgba(0,0,0,0.9),
    0 20px 60px -20px rgba(120,81,237,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transform: translateY(20px) scale(0.98);
  transition: transform .4s var(--ease);
  overflow: hidden;
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }

/* soft gradient accent along the top edge */
.modal__panel::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient-headline);
  opacity: .9;
}

.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
  z-index: 3;
}
.modal__close:hover {
  color: var(--ink); background: rgba(255,255,255,0.08);
  border-color: var(--ink-dim); transform: rotate(90deg);
}

.modal__header {
  padding: 34px 36px 22px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.modal__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
}
.modal__progress {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
}
.modal__progress-bar {
  flex: 1;
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.modal__progress-fill {
  height: 100%;
  width: 7%;
  background: var(--gradient-headline);
  border-radius: inherit;
  transition: width .5s var(--ease);
}
.modal__step-label {
  font-size: 12px; color: var(--ink-dim);
  letter-spacing: .06em;
  font-family: var(--display);
}
.modal__step-label b { color: var(--ink); font-weight: 700; }

.modal__form {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 36px 24px;
  scrollbar-width: thin;
}
.modal__body::-webkit-scrollbar { width: 8px; }
.modal__body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08); border-radius: 999px;
}

.modal__footer {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.4);
  flex: 0 0 auto;
}
.modal__footer-space { flex: 1; }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn[hidden] { display: none !important; }

/* Steps: stacked; hidden until active */
.step {
  display: none;
  border: 0; padding: 0; margin: 0;
  animation: stepIn .35s var(--ease);
}
.step.is-active { display: block; }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step__legend {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  width: 100%;
}
.step__help {
  font-size: 13px; color: var(--ink-dim);
  margin-bottom: 22px;
}

/* ---- Inputs ---- */
.modal__form input[type="text"],
.modal__form input[type="email"],
.modal__form input[type="tel"],
.modal__form input[type="number"],
.modal__form textarea,
.modal__form select {
  width: 100%;
  padding: 14px 16px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  outline: none;
  font-family: var(--body);
}
.modal__form input::placeholder,
.modal__form textarea::placeholder {
  color: var(--ink-mute);
}
.modal__form input:focus,
.modal__form textarea:focus,
.modal__form select:focus {
  border-color: var(--purple);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(120,81,237,0.25);
}
.modal__form input.has-error,
.modal__form textarea.has-error,
.modal__form select.has-error {
  border-color: #ff4d6d;
  box-shadow: 0 0 0 3px rgba(255,77,109,0.18);
}
.modal__form textarea { resize: vertical; min-height: 120px; }

/* "Other" conditional input — appears under option-grid when "Other" is picked */
.step__other { display: block; margin-top: 16px; }
.step__other[hidden] { display: none; }
.step__other-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}

/* Row with dual fields */
.row { display: grid; gap: 14px; }
.row--2 { grid-template-columns: 1fr 1fr; }
.field label {
  display: block;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}

/* Select with custom chevron */
.select { position: relative; }
.select::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-dim);
  border-bottom: 2px solid var(--ink-dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.modal__form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.modal__form select option { background: #131318; color: var(--ink); }

/* ---- Big radio cards (B2C / B2B) ---- */
.option-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.option-grid--dense {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.option-grid--dense .option-card { padding: 16px 14px; }
.option-grid--dense .option-card__icon {
  font-size: 22px;
  margin-bottom: 6px;
}
.option-grid--dense .option-card__body { font-size: 13.5px; line-height: 1.25; }
.option-grid--dense .option-card__body em { font-size: 10px; }
.option-card {
  position: relative;
  padding: 22px 18px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);
}
.option-card input {
  position: absolute; opacity: 0; pointer-events: none;
}
.option-card__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.3;
}
.option-card__icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.option-card__body em {
  font-family: var(--display);
  font-weight: 700; font-size: 11px; letter-spacing: .14em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-top: 4px;
  font-style: normal;
}
.option-card:hover { border-color: var(--ink-dim); transform: translateY(-2px); }
.option-card:has(input:checked) {
  border-color: var(--purple);
  background: linear-gradient(180deg, rgba(120,81,237,0.15), rgba(120,81,237,0.04));
}
.option-card:has(input:checked) .option-card__body em { color: var(--ink); }

/* ---- Yes / No ---- */
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yesno--four { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.yesno--four .yesno__opt { padding: 14px 8px; font-size: 16px; }
.yesno__opt {
  position: relative;
  padding: 18px;
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  font-family: var(--display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .2s var(--ease);
}
.yesno__opt input { position: absolute; opacity: 0; pointer-events: none; }
.yesno__opt:hover { border-color: var(--ink-dim); }
.yesno__opt:has(input:checked) {
  border-color: var(--purple);
  background: linear-gradient(180deg, rgba(120,81,237,0.18), rgba(120,81,237,0.04));
}

/* ---- Checkboxes ---- */
.check-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.check-grid--2col { grid-template-columns: 1fr 1fr; }
.check-grid--3col { grid-template-columns: repeat(3, 1fr); }
.check {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  font-size: 14.5px; color: var(--ink);
}
.check input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line-2);
  background: transparent;
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
  flex: 0 0 auto;
}
.check input:checked {
  background: var(--purple);
  border-color: var(--purple);
}
.check input:checked::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check:hover { border-color: var(--ink-dim); }
.check:has(input:checked) {
  border-color: var(--purple);
  background: linear-gradient(180deg, rgba(120,81,237,0.12), rgba(120,81,237,0.02));
}
.check.has-error,
.option-card.has-error,
.yesno__opt.has-error {
  border-color: #ff4d6d;
  box-shadow: 0 0 0 3px rgba(255,77,109,0.18);
}

/* ---- Math challenge ---- */
.math {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  font-family: var(--display);
}
.math__num {
  font-size: 26px; font-weight: 700; color: var(--ink);
  min-width: 1.5ch; text-align: center;
}
.math__op, .math__eq {
  font-size: 22px; color: var(--ink-dim);
  font-weight: 500;
}
.math input {
  width: 80px !important;
  text-align: center;
  font-family: var(--display);
  font-size: 22px !important;
  font-weight: 700;
  padding: 10px !important;
}
.math__refresh {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  transition: color .2s ease, background .2s ease, transform .3s var(--ease);
}
.math__refresh:hover {
  color: var(--purple);
  background: rgba(120,81,237,0.12);
  transform: rotate(180deg);
}

/* ---- Success screen ---- */
.success {
  text-align: center;
  padding: 40px 20px 20px;
}
.success__icon {
  width: 72px; height: 72px; border-radius: 999px;
  display: grid; place-items: center; margin: 0 auto 22px;
  background: var(--gradient-headline);
  color: #0a0a0a;
  box-shadow: 0 12px 40px -10px rgba(255,106,230,0.5);
}
.success h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.success p {
  color: var(--ink-dim);
  max-width: 42ch;
  margin: 0 auto 28px;
}
.success[hidden] { display: none !important; }

/* Loader dots shown while redirecting to confirmation */
.loader {
  display: inline-flex; gap: 8px;
  margin: 0 auto 28px;
  padding: 22px 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
}
.loader span {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--purple);
  animation: loaderBounce 1.1s ease-in-out infinite;
}
.loader span:nth-child(2) { animation-delay: .15s; background: #FF6AE6; }
.loader span:nth-child(3) { animation-delay: .3s;  background: #F8B03C; }
@keyframes loaderBounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: .4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .modal { padding: 12px; }
  .modal__panel { max-height: 96vh; border-radius: 20px; }
  .modal__header { padding: 24px 20px 16px; }
  .modal__body { padding: 24px 20px 18px; }
  .modal__footer { padding: 14px 16px; }
  .option-grid { grid-template-columns: 1fr; }
  .option-grid--dense { grid-template-columns: 1fr 1fr; }
  .yesno--four { grid-template-columns: 1fr 1fr; }
  .row--2 { grid-template-columns: 1fr; }
  .check-grid--2col { grid-template-columns: 1fr; }
}

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

/* Creator modal — single-step variant */
.modal--creator .modal__sub {
  margin-top: 18px;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.5;
}
.modal__body--single {
  display: flex; flex-direction: column;
  gap: 22px;
}
.fieldset {
  display: block;
  border: 0; padding: 0; margin: 0;
}
.fieldset .step__legend {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}
.fieldset .step__help {
  margin-top: -4px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .check-grid--3col { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   INDUSTRY-PAGE COLOR THEMES
   Each niche page gets its own accent via a body class.
   The color tokens below override the brand defaults page-wide,
   so CTAs, gradients, hover states, and modal chrome all match.
========================================================= */

/* Multi-Family — champagne → rich gold (warm residential / luxury) */
body.page-multi-family {
  --purple:         #CA8A04;   /* core CTA — rich gold */
  --purple-border:  #A16207;
  --purple-hover:   #854D0E;
  --accent:         #CA8A04;

  --gradient-headline:    linear-gradient(91.27deg, #FDE68A -2.35%, #CA8A04 109.02%);
  --gradient-pink-orange: linear-gradient(45deg,    #FDE68A 0%,     #A16207 100%);
  --gradient-cyan-pink:   linear-gradient(90.43deg, #FEF3C7 -2.38%, #CA8A04 158.37%);
}
body.page-multi-family .eyebrow__dot {
  background: #FBBF24;
  box-shadow: 0 0 20px #FBBF24;
}

/* Multi-family section backgrounds — interior + lobby renders
   with significant dark+gold overlays so text stays readable */
body.page-multi-family .hc-diff,
body.page-multi-family #playbooks {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.page-multi-family .hc-diff {
  background-image: url('assets/industries/multi-family/interior.jpg');
}
body.page-multi-family #playbooks {
  background-image: url('assets/industries/multi-family/hero.jpg');
  background-position: center 30%;
}
/* Heavy darkening + gold tint overlay */
body.page-multi-family .hc-diff::before,
body.page-multi-family #playbooks::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(202,138,4,0.10), transparent 65%),
    linear-gradient(180deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.82) 50%, rgba(10,10,10,0.96) 100%);
}
/* Lift content above the overlay */
body.page-multi-family .hc-diff > .container,
body.page-multi-family #playbooks > .container {
  position: relative;
  z-index: 1;
}

/* Multi-family hero image — residential tower fades in from right */
.mf-hero-image {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60%;
  background-image: url('assets/industries/multi-family/hero.jpg');
  background-size: cover;
  background-position: center right;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 28%, black 65%, black 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 28%, black 65%, black 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
/* Keep the copy layered above the building image */
body.page-multi-family .sub-hero__inner { position: relative; z-index: 2; }
/* Bound the hero copy to the left half so image has clean right-side space */
body.page-multi-family .sub-hero__title,
body.page-multi-family .sub-hero__sub,
body.page-multi-family .sub-hero__ctas,
body.page-multi-family .eyebrow { max-width: 640px; }

@media (max-width: 900px) {
  .mf-hero-image {
    width: 100%;
    opacity: 0.18;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 40%, black 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 40%, black 100%);
  }
  body.page-multi-family .sub-hero__title,
  body.page-multi-family .sub-hero__sub,
  body.page-multi-family .sub-hero__ctas,
  body.page-multi-family .eyebrow { max-width: none; }
}

/* Home Services — Menards green (emerald → pine) */
body.page-home-services {
  --purple:         #10803A;   /* core CTA — Menards green */
  --purple-border:  #0B5F2A;
  --purple-hover:   #084821;
  --accent:         #10803A;

  --gradient-headline:    linear-gradient(91.27deg, #34D399 -2.35%, #10803A 109.02%);
  --gradient-pink-orange: linear-gradient(45deg,    #34D399 0%,     #10803A 100%);
  --gradient-cyan-pink:   linear-gradient(90.43deg, #4ADE80 -2.38%, #0F6B31 158.37%);
}
body.page-home-services .eyebrow__dot {
  background: #34D399;
  box-shadow: 0 0 20px #34D399;
}

/* Healthcare — sky blue → teal */
body.page-healthcare {
  --purple:         #14B8A6;   /* core CTA — teal */
  --purple-border:  #0D9488;   /* CTA border */
  --purple-hover:   #0F766E;   /* CTA hover */
  --accent:         #14B8A6;

  /* Signature headline gradient (sky blue → teal) */
  --gradient-headline:    linear-gradient(91.27deg, #5AE4FF -2.35%, #14B8A6 109.02%);
  --gradient-pink-orange: linear-gradient(45deg,    #5AE4FF 0%,     #14B8A6 100%);
  --gradient-cyan-pink:   linear-gradient(90.43deg, #5AE4FF -2.38%, #2DD4BF 158.37%);
}
/* Pulse dot follows the accent too */
body.page-healthcare .eyebrow__dot {
  background: var(--purple);
  box-shadow: 0 0 20px var(--purple);
}

/* =========================================================
   SUB-PAGE TEMPLATE (healthcare.html, future niches)
========================================================= */
.sub-hero {
  position: relative;
  padding: 170px 0 100px;
  overflow: hidden;
}
.sub-hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 10% 20%, rgba(120,81,237,0.22), transparent 55%),
    radial-gradient(700px 500px at 95% 0%, rgba(255,106,230,0.14), transparent 55%),
    radial-gradient(500px 400px at 50% 100%, rgba(90,228,255,0.08), transparent 60%);
}
.sub-hero__inner { position: relative; z-index: 1; }
.sub-hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(42px, 7.5vw, 104px);
  line-height: 0.98; letter-spacing: -0.03em;
  margin-top: 22px;
  max-width: 20ch;
  color: var(--ink);
}
.sub-hero__title em {
  font-family: 'Steradian', var(--body);
  font-weight: 900; font-style: italic;
  letter-spacing: -0.02em;
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sub-hero__sub {
  margin-top: 26px;
  max-width: 60ch;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-dim);
}
.sub-hero__ctas {
  margin-top: 40px;
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ---- What makes healthcare different ---- */
.hc-diff {
  padding: 120px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hc-diff__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.diff {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  transition: border-color .3s ease, transform .4s var(--ease);
}
.diff:hover { border-color: var(--ink-dim); transform: translateY(-4px); }
.diff__badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(120,81,237,0.15);
  color: var(--ink);
  border: 1px solid rgba(120,81,237,0.4);
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em;
  font-weight: 700;
  margin-bottom: 22px;
}
.diff h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15; letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--ink);
}
.diff p {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Full-funnel stage row ---- */
.funnel { padding: 120px 0; border-bottom: 1px solid var(--line); }
.funnel__stages {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: stage;
  position: relative;
}
.stage {
  position: relative;
  padding: 28px 24px 26px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column;
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease);
}
.stage:hover {
  border-color: var(--purple);
  background: linear-gradient(180deg, rgba(120,81,237,0.08), rgba(255,255,255,0.01));
  transform: translateY(-4px);
}
.stage__num {
  font-family: var(--display); font-weight: 700;
  font-size: 11px; letter-spacing: .18em;
  color: var(--ink-mute);
  margin-bottom: 34px;
}
.stage h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.stage > p {
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 20px;
  flex: 1;
}
.stage__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.stage__tags span {
  font-size: 11px; letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--ink-dim);
}

/* ---- Healthcare partners (verticals we serve) ---- */
.hc-partners {
  padding: 120px 0;
  border-bottom: 1px solid var(--line);
}
.partners__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.partner {
  padding: 32px 28px 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  display: flex; flex-direction: column;
  transition: border-color .3s ease, background .3s ease, transform .4s var(--ease);
}
.partner:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(20,184,166,0.10), rgba(255,255,255,0.01));
  transform: translateY(-4px);
}
.partner__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(20,184,166,0.10);
  color: var(--accent);
  margin-bottom: 22px;
  transition: background .3s ease, color .3s ease, transform .4s var(--ease);
}
.partner:hover .partner__icon {
  background: var(--accent);
  color: #0a0a0a;
  transform: scale(1.05);
}
.partner__icon svg { width: 26px; height: 26px; }
.partner h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.partner p {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .partners__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hc-partners { padding: 80px 0; }
  .partners__grid { grid-template-columns: 1fr; gap: 14px; }
  .partner { padding: 28px 24px; }
}

/* ---- Proof section ---- */
.hc-proof {
  padding: 120px 0;
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(120,81,237,0.10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hc-proof__quote {
  max-width: 1000px;
  margin-top: 30px;
}
.hc-proof__quote p {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ink);
}
.hc-proof__quote footer {
  margin-top: 26px;
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: .06em;
}

/* Featured case study card */
.case-feature {
  position: relative;
  margin-top: 40px;
  padding: 52px clamp(28px, 4vw, 64px);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line-2);
  overflow: hidden;
}
/* gradient accent edge on the left */
.case-feature::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gradient-headline);
}
.case-feature__head { max-width: 72ch; }
.case-feature__tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  margin-bottom: 24px;
}
.case-feature__client {
  display: block;
  height: 44px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
  opacity: 0.95;
  margin: 0 0 28px;
}
.case-feature__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}
.case-feature__title em {
  font-family: 'Steradian', var(--body);
  font-weight: 900; font-style: italic;
  letter-spacing: -0.02em;
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.case-feature__sub {
  color: var(--ink-dim);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  max-width: 62ch;
}

.case-feature__kpis {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Icon KPI (e.g. trending-up arrow) — opts out of gradient-text-clip */
.kpi b.kpi__glyph {
  display: inline-flex; align-items: center;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--accent);
}
.kpi b.kpi__glyph svg {
  width: 1em; height: 1em;
  display: block;
}
.kpi span {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.4;
  max-width: 20ch;
}

/* Testimonial quote inside a featured case study */
.case-feature__quote {
  margin: 40px 0 0;
  padding: 28px 30px 26px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.case-feature__quote::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gradient-headline);
}
.case-feature__stars {
  display: inline-flex;
  gap: 3px;
  color: #F8B03C;
  margin-bottom: 14px;
  line-height: 0;
}
.case-feature__stars svg { display: block; }
.case-feature__quote p {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.case-feature__quote footer {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.case-feature__quote-attr {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}
.case-feature__quote-attr strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.case-feature__quote-attr span {
  color: var(--ink-dim);
  font-size: 13px;
}
.case-feature__quote-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.case-feature__quote-source svg { flex: 0 0 auto; }

.case-feature__stack {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
}
.case-feature__stack-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 6px;
}
.case-feature__chip {
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
}

@media (max-width: 1024px) {
  .case-feature__kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .case-feature { padding: 36px 24px; }
  .case-feature__kpis { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 1024px) {
  .hc-diff__grid { grid-template-columns: 1fr; }
  .funnel__stages { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sub-hero { padding: 130px 0 70px; }
  .hc-diff, .funnel, .hc-proof { padding: 80px 0; }
  .funnel__stages { grid-template-columns: 1fr; }
}

/* ---- Home Services — specific components ---- */

/* Creatives showcase — two-column grid, copy left / IG mockup stack right */
.hs-creatives {
  padding: 120px 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(16,128,58,0.10), transparent 60%),
    var(--bg);
}
.hs-creatives__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px;
  align-items: center;
}
.hs-creatives__copy {
  display: flex; flex-direction: column; gap: 20px;
}
.hs-creatives__copy .h2 { margin-top: 6px; }
.hs-creatives__list {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hs-creatives__list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
}
.hs-creatives__list li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--purple);
}

.hs-ig-stack {
  position: relative;
  width: 100%;
  min-height: 640px;
  pointer-events: none;
}
.ig-mockup {
  position: absolute;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.9),
    0 10px 30px -10px rgba(16,128,58,0.25);
  color: #fff;
  font-family: var(--body);
  transition: transform .5s var(--ease);
}
.ig-mockup--reel {
  top: 0;
  right: 0;
  width: 240px;
  transform: rotate(3deg);
  z-index: 2;
}
.ig-mockup--feed {
  bottom: 0;
  left: 0;
  width: 240px;
  transform: rotate(-3deg);
  z-index: 1;
}
.ig-mockup__header {
  display: flex; align-items: center;
  padding: 9px 10px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ig-mockup__avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888, #F09433);
  flex: 0 0 auto;
  padding: 2px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
}
.ig-mockup__avatar img {
  width: 100%; height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: #0f0f12;
}
.ig-mockup__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ig-mockup__handle {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ig-mockup__dot, .ig-mockup__sponsored { font-weight: 400; color: rgba(255,255,255,0.55); }
.ig-mockup__more {
  font-size: 18px; letter-spacing: 2px;
  color: rgba(255,255,255,0.7);
  flex: 0 0 auto;
  transform: translateY(-4px);
}
.ig-mockup__media { position: relative; background: #000; }
.ig-mockup__media--reel { aspect-ratio: 9/16; }
.ig-mockup__media--feed { aspect-ratio: 4/5; }
.ig-mockup__media video,
.ig-mockup__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ig-mockup__actions {
  display: flex; align-items: center;
  gap: 10px;
  padding: 9px 10px 6px;
  color: #fff;
}
.ig-mockup__bookmark { margin-left: auto; }
.ig-mockup__cta {
  padding: 7px 10px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
@media (max-width: 1024px) {
  .hs-creatives { padding: 80px 0; }
  .hs-creatives__grid { grid-template-columns: 1fr; gap: 60px; }
  .hs-ig-stack { min-height: 560px; max-width: 400px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .ig-mockup--reel, .ig-mockup--feed { width: 210px; }
  .hs-ig-stack { min-height: 520px; }
}

/* Local Lead Machine wordmark above the hero title
   — padding shrinks the visible logo ~20% inside its box */
.hs-hero-logo {
  display: block;
  margin: 24px 0 18px;
  width: 100%;
  max-width: 280px;
  height: auto;
  padding: 12px 28px;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .hs-hero-logo { max-width: 220px; padding: 10px 22px; }
}
.hs-disclaimer {
  margin-top: 22px;
  font-size: 13px; color: var(--ink-dim);
  letter-spacing: .02em;
}

/* 2-column install grid (What gets installed) */
.install__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.install {
  padding: 36px 30px;
  background: var(--bg);
  transition: background .3s ease;
}
.install:hover {
  background: linear-gradient(180deg, rgba(16,128,58,0.08), rgba(16,128,58,0.01));
}
.install__num {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 28px;
  display: block;
}
.install h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.install p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }

/* 2-column variant for the funnel (Phase 1 / Phase 2) */
.funnel__stages--two { grid-template-columns: 1fr 1fr; }
.stage.stage--out {
  background: linear-gradient(180deg, rgba(16,128,58,0.12), rgba(255,255,255,0.01));
  border-color: rgba(16,128,58,0.4);
}

/* Qualification grid (yes/no) */
.qual__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.qual {
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
}
.qual--yes {
  border-color: rgba(16,128,58,0.5);
  background: linear-gradient(180deg, rgba(16,128,58,0.12), rgba(16,128,58,0.02));
}
.qual--no {
  opacity: 0.85;
}
.qual__label {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2);
  margin-bottom: 24px;
}
.qual--yes .qual__label {
  color: #FFD28A;
  border-color: rgba(16,128,58,0.4);
  background: rgba(16,128,58,0.12);
}
.qual__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.qual__list li {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.45;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.qual__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--purple);
}
.qual--no .qual__list li::before { background: var(--ink-mute); }
.qual__list li b { color: var(--ink); font-weight: 700; }

/* Final CTA subcopy (used on home-services page) */
.cta__sub {
  margin-top: 28px;
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
}

/* Emoji partner icons (home-services) */
.partner__emoji {
  font-size: 32px;
  line-height: 1;
  display: block;
}

/* Install section head — headline + animated Local Lead Machine gif */
.install-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  margin-bottom: 70px;
}
.install-head__copy {
  display: flex; flex-direction: column; gap: 10px;
}
.install-head__gif {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .install-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .install-head__copy { align-items: center; }
  .install-head__gif { max-width: 200px; margin: 0 auto; }
}
/* Mobile-only line-break utility (used in install-head h2) */
.br-sm { display: none; }
@media (max-width: 720px) {
  .br-sm { display: inline; }
}
/* install__num: emoji mode sizing (no need for font-mono styling) */
.install__num:has(:empty), .install__num { line-height: 1; }

@media (max-width: 1024px) {
  .install__grid { grid-template-columns: repeat(2, 1fr); }
  .funnel__stages--two { grid-template-columns: 1fr; }
  .qual__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .install__grid { grid-template-columns: 1fr; }
  .install { padding: 28px 22px; }
  .install__num { margin-bottom: 24px; }
}

/* =========================================================
   CONFIRMATION PAGE (/confirmation.html)
========================================================= */
.confirmed { padding-top: 100px; padding-bottom: 80px; }

.confirmed__hero {
  position: relative;
  padding: 80px 0 60px;
  overflow: hidden;
}
.confirmed__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,106,230,0.18), transparent 55%),
    radial-gradient(700px 500px at 85% 100%, rgba(120,81,237,0.20), transparent 55%),
    radial-gradient(500px 400px at 50% 50%, rgba(248,176,60,0.10), transparent 60%);
  pointer-events: none;
}
.confirmed__inner {
  position: relative; z-index: 1;
  text-align: center;
}
.confirmed__inner .eyebrow { justify-content: center; }

.confirmed__title {
  font-family: var(--display);
  font-size: clamp(64px, 11vw, 180px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-top: 24px;
  padding: 0.08em 0;
  background: var(--gradient-headline);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.confirmed__title .line { display: inline-block; padding: 0.05em 0; }
.confirmed__dot { color: transparent; }

.confirmed__sub {
  margin: 28px auto 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-dim);
}

.confirmed__booking {
  padding-top: 20px;
  text-align: center;
}
.confirmed__booking-frame {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 40px 120px -30px rgba(0,0,0,0.8),
    0 20px 60px -20px rgba(120,81,237,0.25);
}
.confirmed__booking-frame::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient-headline);
  z-index: 1;
}
/* LeadConnector's form_embed.js resizes the iframe dynamically via
   postMessage — don't impose any height limits here. */
.confirmed__booking-frame iframe {
  display: block;
  background: #fff;
}
.confirmed__booking-frame br { display: none; }
.confirmed__fallback {
  margin-top: 30px;
  color: var(--ink-dim);
  font-size: 14px;
}
.confirmed__fallback a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.confirmed__fallback a:hover { border-color: var(--ink); }

@media (max-width: 720px) {
  .confirmed { padding-top: 80px; }
  .confirmed__hero { padding: 40px 0 30px; }
}

/* 404 page */
.confirmed__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.notfound-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.notfound-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.notfound-link:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}
.notfound-link__label {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.notfound-link__hint {
  font-size: 14px;
  color: var(--ink-dim);
}
@media (max-width: 720px) {
  .notfound-links { grid-template-columns: 1fr; }
}

/* ========================================================================
   Page-specific overrides — Toronto landing page hero
   "Toronto's growth agency." is meaningfully longer than the root hero
   "Flavour for hire.", so the global hero clamp (max 220px) overflows
   the copy column at desktop widths. Scope a tighter clamp + a slightly
   wider copy column to this page only.
   ======================================================================== */
.page-toronto .hero__title {
  font-size: clamp(52px, 7.4vw, 104px);
  line-height: 1;
  letter-spacing: -0.03em;
  padding-bottom: 0.12em;
}
@media (min-width: 1100px) {
  .page-toronto .hero__content {
    grid-template-columns: 1.5fr 1fr;
  }
}
/* Toronto page — shrink the long title to fit on mobile (must come AFTER the
   unconditional .page-toronto .hero__title rule above; equal specificity means
   later wins on matching viewports). Slightly looser line-height + padding-bottom
   keeps descenders (g, y) from being clipped by the next line's box. */
@media (max-width: 720px) {
  .page-toronto .hero__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 0.98;
    padding-bottom: 0.06em;
  }
}
@media (max-width: 480px) {
  .page-toronto .hero__title {
    font-size: clamp(36px, 10.4vw, 46px);
  }
}
@media (max-width: 380px) {
  .page-toronto .hero__title {
    font-size: clamp(32px, 9.4vw, 40px);
  }
}

/* ========================================================================
   Toronto landing — "Our approach" section: Persona Pulse + Messaging Matrix
   ======================================================================== */
.approach__pulse {
  margin-top: 56px;
  max-width: 880px;
  padding: 32px 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(120, 81, 237, 0.08), rgba(255, 106, 230, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.approach__pulse-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.approach__pulse-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--ink);
}
.approach__pulse-title em {
  font-style: normal;
  background: linear-gradient(90deg, #4ad9c8 0%, #b768ff 50%, #ff44b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.approach__pulse-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0 0 18px;
}
.approach__pulse-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
.approach__pulse-list li {
  font-size: 14.5px;
  color: var(--ink-dim);
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
}
.approach__pulse-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #4ad9c8, #b768ff);
}
.approach__pulse-list strong { color: var(--ink); font-weight: 600; }

/* Matrix block */
.approach__matrix { margin-top: 80px; }
.approach__matrix-head { max-width: 880px; margin-bottom: 36px; }
.approach__matrix-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.approach__matrix-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--ink);
}
.approach__matrix-title em {
  font-style: normal;
  background: linear-gradient(90deg, #4ad9c8 0%, #b768ff 50%, #ff44b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.approach__matrix-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0;
}
.approach__matrix-foot {
  margin-top: 32px;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* Inline CTA cluster used after the matrix and after Liberty Village */
.approach__cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.approach__cta--center {
  justify-content: center;
  margin-top: 36px;
}
.approach__cta-meta {
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .approach__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 24px;
  }
  .approach__cta .btn { justify-content: center; width: 100%; }
  .approach__cta-meta { text-align: center; }
}

/* The funnel itself */
.matrix {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1040px;
  margin: 0 auto;
}
.matrix__cols {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: 20px;
  margin-bottom: 14px;
}
.matrix__col-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
}
.matrix__col-label--center { text-align: center; }
.matrix__col-label--right { text-align: right; }

.matrix__row {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: center;
  gap: 20px;
}
.matrix__side {
  display: flex;
  align-items: center;
  gap: 10px;
}
.matrix__side--right {
  justify-content: flex-end;
}
.matrix__icon {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.matrix__side-label {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.matrix__bar {
  position: relative;
  padding: 24px 28px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  width: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  clip-path: polygon(4% 0, 96% 0, 92% 100%, 8% 100%);
}
.matrix__bar--1 {
  background: linear-gradient(90deg, #4ad9c8 0%, #5a9fef 100%);
  width: 100%;
  padding: 26px 28px;
}
.matrix__bar--2 {
  background: linear-gradient(90deg, #b768ff 0%, #6a86f5 100%);
  width: 84%;
}
.matrix__bar--3 {
  background: linear-gradient(90deg, #ff44b5 0%, #b768ff 100%);
  width: 60%;
}
.matrix__bar--4 {
  background: linear-gradient(90deg, #ff2c6e 0%, #ff44b5 100%);
  width: 32%;
  padding: 16px 18px;
}
.matrix__bar--4 .matrix__name { font-size: 15px; }
.matrix__level {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 4px;
  font-weight: 600;
}
.matrix__name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.matrix__cta {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 14px 0;
  position: relative;
}
.matrix__cta::before,
.matrix__cta::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 12px;
}

/* Tablet */
@media (max-width: 880px) {
  .approach__pulse {
    padding: 24px 22px;
    margin-top: 40px;
  }
  .approach__pulse-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .approach__matrix { margin-top: 56px; }
  .matrix__cols,
  .matrix__row {
    grid-template-columns: 90px 1fr 90px;
    gap: 12px;
  }
  .matrix__icon { font-size: 18px; }
  .matrix__side-label { font-size: 11px; letter-spacing: 0.14em; }
  .matrix__col-label { font-size: 10px; letter-spacing: 0.14em; }
  .matrix__bar { padding: 20px 16px; }
  .matrix__bar--4 { padding: 14px 12px; }
  .matrix__name { font-size: 15px; }
  .matrix__bar--4 .matrix__name { font-size: 13px; }
}

/* Mobile — collapse side labels onto the bar to save horizontal room */
@media (max-width: 600px) {
  .matrix__cols { display: none; }
  .matrix__row {
    grid-template-columns: 56px 1fr 56px;
    gap: 8px;
  }
  .matrix__side { flex-direction: column; gap: 4px; align-items: center; }
  .matrix__side--right { align-items: center; }
  .matrix__icon { font-size: 20px; }
  .matrix__side-label { font-size: 9.5px; letter-spacing: 0.1em; }
  .matrix__bar {
    padding: 16px 10px;
    clip-path: polygon(3% 0, 97% 0, 94% 100%, 6% 100%);
  }
  .matrix__bar--4 { padding: 12px 8px; width: 50%; }
  .matrix__level { font-size: 9.5px; letter-spacing: 0.16em; }
  .matrix__name { font-size: 13.5px; line-height: 1.2; }
  .matrix__bar--4 .matrix__name { font-size: 12px; }
  .matrix__cta { font-size: 10.5px; padding: 10px 0; }
  .matrix__cta::before,
  .matrix__cta::after { width: 14px; margin: 0 8px; }
}

/* ========================================================================
   Cookie consent banner — subtle slim bar, fixed bottom-right
   ======================================================================== */
.consent[hidden],
.consent [hidden] { display: none !important; }

.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 720px;
  margin-left: auto; /* right-aligned on desktop */
  background: rgba(14, 14, 20, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.consent.is-open {
  opacity: 1;
  transform: translateY(0);
}
.consent__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.consent__title { display: none; } /* keep it minimal */
.consent__copy {
  flex: 1 1 280px;
  min-width: 0;
}
.consent__body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.consent__body a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.consent__body a:hover { text-decoration-color: rgba(255, 255, 255, 0.75); }
.consent__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.consent__btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  letter-spacing: 0.01em;
}
.consent__btn--ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.6);
}
.consent__btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.consent__btn--primary {
  background: #fff;
  border-color: #fff;
  color: #0A0A0F;
  font-weight: 600;
}
.consent__btn--primary:hover {
  background: rgba(255, 255, 255, 0.86);
}

/* Customize panel — slides down inside the bar */
.consent__panel {
  flex-basis: 100%;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.consent__panel:not([hidden]) { display: flex; }
.consent__option {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.consent__option:hover { background: rgba(255, 255, 255, 0.03); }
.consent__option input {
  margin: 0;
  flex-shrink: 0;
  accent-color: #ff6ae6;
  width: 14px;
  height: 14px;
}
.consent__option input:disabled { opacity: 0.5; }
.consent__option strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.consent__panel-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Mobile — compact stacked layout */
@media (max-width: 640px) {
  .consent {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.4;
  }
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .consent__copy { flex: 0 0 auto; }
  .consent__body {
    font-size: 11.5px;
    line-height: 1.4;
  }
  .consent__actions {
    justify-content: flex-end;
    gap: 2px;
  }
  .consent__btn {
    font-size: 11.5px;
    padding: 6px 10px;
  }
  .consent__panel {
    margin-top: 2px;
    padding-top: 8px;
    gap: 2px;
  }
  .consent__option {
    font-size: 11.5px;
    padding: 6px 8px;
    gap: 8px;
  }
}

/* ========================================================================
   Legal pages (privacy, terms, etc.)
   ======================================================================== */
.page-legal .nav { background: rgba(10, 10, 15, 0.8); }
.legal {
  padding-top: 100px;
  background: #0A0A0F;
  min-height: 100vh;
}
.legal__hero {
  padding: 60px 0 32px;
  position: relative;
}
.legal__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 15% 0%, rgba(120, 81, 237, 0.18), transparent 60%),
    radial-gradient(500px 300px at 85% 0%, rgba(255, 106, 230, 0.12), transparent 60%);
  pointer-events: none;
}
.legal__hero > .container { position: relative; }
.legal__title {
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 18px 0 14px;
  line-height: 1;
  color: var(--ink);
}
.legal__updated {
  color: var(--ink-dim);
  font-size: 14px;
  margin: 0;
}
.legal__content { padding: 24px 0 120px; }
.legal__prose {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-dim);
}
.legal__prose h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 52px 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.legal__prose h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 10px;
}
.legal__prose p { margin: 0 0 16px; }
.legal__prose ul {
  margin: 0 0 22px;
  padding-left: 20px;
}
.legal__prose li { margin-bottom: 8px; }
.legal__prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 0.15s ease;
}
.legal__prose a:hover { text-decoration-color: rgba(255, 255, 255, 0.8); }
.legal__prose strong { color: var(--ink); font-weight: 600; }
.legal__contact {
  margin-top: 48px;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

/* Legal mobile */
@media (max-width: 720px) {
  .legal { padding-top: 80px; }
  .legal__hero { padding: 32px 0 20px; }
  .legal__title {
    font-size: clamp(34px, 9vw, 52px);
    margin: 12px 0 10px;
    letter-spacing: -0.02em;
  }
  .legal__updated { font-size: 12.5px; }
  .legal__content { padding: 12px 0 80px; }
  .legal__prose {
    font-size: 15px;
    line-height: 1.65;
  }
  .legal__prose h2 {
    font-size: 21px;
    margin: 36px 0 10px;
    line-height: 1.25;
  }
  .legal__prose h3 {
    font-size: 15.5px;
    margin: 22px 0 8px;
  }
  .legal__prose p { margin: 0 0 14px; }
  .legal__prose ul {
    margin: 0 0 18px;
    padding-left: 18px;
  }
  .legal__prose li { margin-bottom: 6px; }
  .legal__contact {
    margin-top: 32px;
    padding: 18px 18px;
    border-radius: 12px;
  }
  .page-legal .nav__menu { display: none; }
  .page-legal .nav__cta { display: inline-flex; font-size: 13px; padding: 8px 12px; }
  .nav--campaign .nav__cta { display: inline-flex; font-size: 13px; padding: 8px 12px; margin-left: auto; }
}

@media (max-width: 480px) {
  .legal__prose { font-size: 14.5px; }
  .legal__prose h2 { font-size: 19px; margin: 30px 0 8px; }
  .legal__prose h3 { font-size: 15px; }
}