/* ============================================
   STUDIO SEVEN — shared stylesheet
   Used by index, service pages, testimonials, etc.
   ============================================ */

:root {
  --bg: #06070a;
  --bg-soft: #0c0d12;
  --bg-card: #0f1117;
  --fg: #e8eaef;
  --fg-bright: #ffffff;
  --fg-dim: #8a8d96;
  --fg-mute: #4d4f57;
  --navy: #1a2456;
  --navy-deep: #0e1538;
  --navy-bright: #2a3479;
  --purple: #6f5fd1;
  --purple-soft: #9388e6;
  --slate: #2d2f3a;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --chrome: linear-gradient(180deg, #ffffff 0%, #c9ccd3 45%, #e8eaef 60%, #9aa0ad 100%);
  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 56px);
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--purple); color: var(--fg-bright); }

/* Subtle grain */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .4;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: overlay;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  cursor: pointer;
  margin: 0;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--fg-dim);
  transform: rotate(15deg);
}
.theme-icon { width: 17px; height: 17px; }
/* Show moon by default (dark mode), sun in light mode */
.theme-icon--sun { display: none; }
html.light .theme-icon--sun { display: block; }
html.light .theme-icon--moon { display: none; }
@media (max-width: 760px) { .theme-toggle { margin: 0; } }

/* Right-side nav group — Contact us + theme toggle clustered on the far right */
.nav-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;            /* the "few centimeters" between Contact us and the toggle */
  justify-self: end;    /* hug the right edge in the grid */
}
@media (max-width: 760px) { .nav-right { gap: 10px; } }

/* ============ LIGHT MODE OVERRIDES ============ */
/* Single switch — overrides every CSS variable in :root for an instant theme flip */
html.light {
  --bg: #f3f3f6;
  --bg-soft: #ffffff;
  --bg-card: #ffffff;
  --fg: #0c0d12;
  --fg-bright: #000000;
  --fg-dim: #4d4f57;
  --fg-mute: #8a8d96;
  --navy: #1a2456;
  --navy-deep: #0e1538;
  --navy-bright: #2a3479;
  --purple: #5a4dc7;
  --purple-soft: #6f5fd1;
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.16);
  --chrome: linear-gradient(180deg, #0c0d12 0%, #4d4f57 50%, #0c0d12 100%);
}
/* Logo: in dark mode, white-text PNG uses screen blend to knock out black BG.
   In light mode, invert the PNG so the wordmark becomes black on the light nav. */
html.light .logo img,
html.light footer.bottom .flogo img {
  filter: invert(1);
}
/* Hero video tint — lighter in light mode so the video isn't blacked out */
html.light .hero-tint {
  background:
    /* Edge vignette: center is clear, corners get gentle tint */
    radial-gradient(65% 75% at 50% 50%, transparent 0%, rgba(243,243,246,0.06) 45%, rgba(243,243,246,0.38) 100%),
    /* Vertical fade: 100% transparent at the very top so the hero blends into the nav with no seam.
       Center stays nearly clear. Bottom gets enough wash to anchor the headline + sub copy. */
    linear-gradient(180deg,
      rgba(243,243,246,0) 0%,
      rgba(243,243,246,0) 12%,
      rgba(243,243,246,0.05) 45%,
      rgba(243,243,246,0.20) 75%,
      rgba(243,243,246,0.55) 100%);
}
/* Nav background needs a light-mode equivalent */
/* Light mode nav — strip the direct backdrop-filter (its hard bottom edge was
   drawing a visible white line against the hero video) and rebuild it on a
   pseudo-element that has a soft mask fade-out at the bottom. */
html.light nav.top {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
html.light nav.top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Extend below the nav so the fade region lives in the hero, not over the logo */
  bottom: -80px;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.96) 60%,
    rgba(255,255,255,.55) 82%,
    rgba(255,255,255,0)   100%);
  /* Lighter blur — sharper read but still a touch of glass */
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
          backdrop-filter: blur(8px) saturate(1.05);
  /* Solid through nav content, short soft fade at the bottom only */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  pointer-events: none;
  transition: opacity .3s ease;
}
html.light nav.top.scrolled::before {
  bottom: -50px;
  background: linear-gradient(180deg,
    rgba(255,255,255,1)  0%,
    rgba(255,255,255,.96) 70%,
    rgba(255,255,255,.45) 90%,
    rgba(255,255,255,0)  100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}
/* Lift all nav children above the pseudo background */
html.light nav.top > * { position: relative; z-index: 1; }
/* Dropdown menu needs a light background */
html.light .dropdown {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 24px 60px rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.04) inset;
}
html.light .dropdown a:hover { background: rgba(0,0,0,0.05) !important; color: var(--fg-bright); }
/* Pill button — adjust subtle background in light mode */
html.light .pill { background: rgba(0,0,0,0.02); color: var(--fg); }
html.light .pill:hover { background: rgba(0,0,0,0.05); border-color: var(--fg-mute); }
/* Primary pill stays dark-on-light-bg-only — so in light mode keep white text on its navy gradient */
html.light .pill.primary { color: #ffffff; background: linear-gradient(180deg, #1a2456 0%, #0e1538 100%); border-color: rgba(255,255,255,0.10); }
html.light .pill.primary:hover { background: linear-gradient(180deg, #2a3479 0%, #1a2456 100%); color: #ffffff; }
html.light .audit-form button[type="submit"] { color: #ffffff; }
/* Hero headline + "silver" sweep — chrome gradient is too washed-out on light, force solid dark */
html.light h1.headline .silver { color: var(--fg-bright); -webkit-text-fill-color: var(--fg-bright); background: none; }
html.light h1.headline { color: var(--fg-bright); }
html.light .hero-sub { color: var(--fg); }
/* Pill primary stays the navy gradient — already legible in both modes */
/* Grain overlay is too aggressive on light BG */
html.light body::after { opacity: 0; }
/* Preloader BG also flips */
html.light .preloader { background: var(--bg); }
html.light .pre-logo { filter: invert(1); }
/* Theme toggle button colors for light mode */
html.light .theme-toggle {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.16);
}
html.light .theme-toggle:hover { background: rgba(0,0,0,0.07); }
/* Code/mono / muted text in cards on light mode */
/* Deck cards always have dark brand-gradient previews, so the meta footer
   stays dark in BOTH themes and the brand name stays white. */
html.light .deck-card .deck-meta { background: rgba(0,0,0,.35); border-top-color: rgba(255,255,255,.08); }
html.light .deck-card .deck-name { color: #ffffff; }
html.light .deck-card .deck-tag  { color: rgba(255,255,255,.62); }
html.light .deck-card .deck-chrome { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-bottom-color: rgba(255,255,255,.08); }
html.light .deck-card .deck-url   { color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); }
html.light .deck-card .deck-flip-word { color: rgba(147,136,230,.65); }
/* Back-face text — the cards have brand-color dark gradients on the back too,
   so keep all back text white in light mode (don't follow --fg-bright black flip) */
html.light .deck-card .deck-back-name { color: #ffffff; }
html.light .deck-card .deck-back-cat  { color: var(--purple-soft); }
html.light .deck-card .deck-back-desc { color: rgba(255,255,255,.92); }
html.light .deck-card .deck-back-list li { color: rgba(255,255,255,.96); }
html.light .deck-card .deck-flip-word--back { color: rgba(147,136,230,.85); }
/* Preserve Library's warm cream palette in light mode too */
html.light .deck-card .deck-back--library .deck-back-name { color: #fbf2d9; }
html.light .deck-card .deck-back--library .deck-back-cat { color: #e6c890; }
html.light .deck-card .deck-back--library .deck-back-desc { color: rgba(251,242,217,.78); }
html.light .deck-card .deck-back--library .deck-back-list li { color: rgba(251,242,217,.86); }
/* Partner cards stay light in both modes — no change needed */

/* ============ NAV ============ */
nav.top {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 24px var(--pad);
  /* 3-column grid: logo on the left, ul truly centered, right-group hugged to the right */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  backdrop-filter: blur(18px) saturate(1.1);
  background: linear-gradient(180deg, rgba(6,7,10,.6), rgba(6,7,10,.0));
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, padding .3s ease, background .3s ease;
}
nav.top > .logo { justify-self: start; }
nav.top > ul { justify-self: center; }
nav.top.scrolled { border-bottom-color: var(--line); padding: 14px var(--pad); background: rgba(6,7,10,.78); }
.logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.logo img {
  height: 128px;
  width: auto;
  display: block;
  /* PNG now has a transparent background — no blend mode needed */
  transition: height .3s ease;
  margin: -32px 0; /* compensates for the white-space padding inside the logo PNG so the nav doesn't get absurdly tall */
}
nav.top.scrolled .logo img { height: 92px; margin: -24px 0; }
@media (max-width: 760px) { .logo img { height: 92px; margin: -22px 0; } nav.top.scrolled .logo img { height: 72px; margin: -18px 0; } }
@media (max-width: 480px) { .logo img { height: 72px; margin: -18px 0; } }

nav.top ul { list-style: none; display: flex; gap: 4px; align-items: center; }
nav.top ul li { position: relative; }
nav.top ul a {
  color: var(--fg-dim); text-decoration: none;
  padding: 10px 16px; border-radius: 8px;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .25s ease, background .25s ease;
}
nav.top ul a:hover { color: var(--fg); background: rgba(255,255,255,.03); }
nav.top ul a.is-active { color: var(--fg); }

/* Dropdown menu */
.has-dropdown > a .caret {
  display: inline-block;
  font-size: 9px;
  margin-left: 2px;
  transition: transform .25s ease;
}
.has-dropdown:hover > a .caret,
.has-dropdown:focus-within > a .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  padding: 8px;
  background: rgba(12,13,18,0.94);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.dropdown a {
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: var(--fg-dim);
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 18px;
}
.dropdown a:hover { background: rgba(255,255,255,0.05) !important; color: var(--fg-bright); }
.dropdown a .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-soft);
  opacity: 0;
  transition: opacity .2s ease;
}
.dropdown a:hover .dot { opacity: 1; }

/* Pill button with dot — Adsorb pattern */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--fg);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-strong);
  padding: 10px 16px 10px 20px;
  border-radius: 100px;
  font-weight: 400; font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.pill::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple-soft);
  box-shadow: 0 0 10px rgba(147,136,230,.6);
}
.pill:hover { border-color: var(--fg-dim); background: rgba(255,255,255,0.045); transform: translateY(-1px); }
.pill.primary {
  color: var(--fg-bright);
  background: linear-gradient(180deg, var(--navy-bright), var(--navy));
  border-color: rgba(147,136,230,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px rgba(14,21,56,.5);
}
.pill.primary:hover { background: linear-gradient(180deg, #34408c, #1f2c66); }
.pill.large { padding: 14px 22px 14px 28px; font-size: 13px; }

@media (max-width: 900px) { nav.top ul { display: none; } }

/* ============ HERO (home — with background video) ============ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 200px var(--pad) 60px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* Background video — sits behind everything */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  background: #000;
}
/* Dark tint over the video for legibility */
.hero-tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 80% at 50% 50%, rgba(6,7,10,0.30), rgba(6,7,10,0.55) 70%),
    linear-gradient(180deg, rgba(6,7,10,0.65) 0%, rgba(6,7,10,0.30) 30%, rgba(6,7,10,0.30) 70%, rgba(6,7,10,0.85) 100%);
}
/* Wraps the actual hero content above video + tint */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  max-width: var(--maxw);
  width: 100%;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 36px;
  z-index: 2;
}
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-soft);
  box-shadow: 0 0 8px rgba(147,136,230,.5);
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

h1.headline {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 28px;
  max-width: 16ch;
  color: var(--fg);
  z-index: 2; position: relative;
}
h1.headline em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #b3a8ef 50%, #6f5fd1 100%);
  -webkit-background-clip: text; background-clip: text;
}
h1.headline .silver {
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
}
.hero-sub {
  max-width: 560px;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--fg-dim);
  line-height: 1.6;
  margin-bottom: 40px;
  z-index: 2; position: relative;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; z-index: 2; position: relative; }
.hero-orb-peek {
  position: absolute;
  bottom: -45%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(700px, 90vw, 1100px);
  pointer-events: none;
  opacity: .85;
  z-index: 1;
}

/* ============ ORB ZOOM ============ */
.orb-scene { position: relative; height: 220vh; }
.orb-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.orb-pin::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(26,36,86,.4), transparent 70%),
    var(--bg);
  z-index: 0;
}
.orb-stage {
  position: relative;
  width: clamp(420px, 70vw, 900px);
  aspect-ratio: 1.4 / 1;
  z-index: 1;
  transform: scale(var(--scale, 1));
  transition: transform .05s linear;
}
.orb-stage svg { width: 100%; height: 100%; display: block; }
.orb-stage .core {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.orb-stage .core .seven {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(110px, 24vw, 320px);
  line-height: 1;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  opacity: var(--reveal, 0);
  transform: scale(calc(.7 + var(--reveal, 0) * .3));
  transition: opacity .15s ease, transform .15s ease;
}
.orb-stage .core .caption {
  margin-top: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: var(--reveal, 0);
  transition: opacity .15s ease;
}

/* ============ WORK DECK ============ */
/* The outer .deck-card handles fan position + hover lift + reveal stagger.
   The inner .deck-flipper handles ONLY the 3D rotateY flip — keeps the two
   transform systems from colliding. */
section.work-deck {
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}
.deck {
  position: relative;
  height: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 40px;
  max-width: 1100px;
}

/* OUTER CARD — fan, lift, reveal */
.deck-card {
  position: absolute;
  width: 370px;
  height: 500px;
  cursor: pointer;
  outline: none;
  perspective: 1600px;
  transition:
    transform 1s cubic-bezier(.16, 1, .3, 1),
    opacity 1s cubic-bezier(.16, 1, .3, 1);
  transform-origin: center bottom;
  will-change: transform;
}
.deck-card:focus-visible { outline: 2px solid var(--purple-soft); outline-offset: 8px; border-radius: 24px; }

/* Fan layout — 5 cards spread with rotation */
.deck-card.c-0 { transform: translateX(-380px) translateY(22px) rotate(-12deg); z-index: 1; }
.deck-card.c-1 { transform: translateX(-190px) translateY(7px)  rotate(-6deg);  z-index: 2; }
.deck-card.c-2 { transform: translateX(0)      translateY(0)    rotate(0deg);   z-index: 3; }
.deck-card.c-3 { transform: translateX(190px)  translateY(7px)  rotate(6deg);   z-index: 4; }
.deck-card.c-4 { transform: translateX(380px)  translateY(22px) rotate(12deg);  z-index: 5; }

/* Hover — subtle lift above the deck, slight rotation correction */
.deck-card:hover { z-index: 10; }
.deck-card.c-0:hover { transform: translateX(-380px) translateY(-18px) rotate(-9deg) scale(1.03); }
.deck-card.c-1:hover { transform: translateX(-190px) translateY(-22px) rotate(-4deg) scale(1.03); }
.deck-card.c-2:hover { transform: translateX(0)      translateY(-24px) rotate(0deg)  scale(1.03); }
.deck-card.c-3:hover { transform: translateX(190px)  translateY(-22px) rotate(4deg)  scale(1.03); }
.deck-card.c-4:hover { transform: translateX(380px)  translateY(-18px) rotate(9deg)  scale(1.03); }

/* When flipped, lift more dramatically and zero out rotation so the back is readable head-on */
.deck-card.is-flipped { z-index: 20; }
.deck-card.is-flipped.c-0 { transform: translateX(-380px) translateY(-40px) rotate(0deg) scale(1.06); }
.deck-card.is-flipped.c-1 { transform: translateX(-190px) translateY(-40px) rotate(0deg) scale(1.06); }
.deck-card.is-flipped.c-2 { transform: translateX(0)      translateY(-40px) rotate(0deg) scale(1.06); }
.deck-card.is-flipped.c-3 { transform: translateX(190px)  translateY(-40px) rotate(0deg) scale(1.06); }
.deck-card.is-flipped.c-4 { transform: translateX(380px)  translateY(-40px) rotate(0deg) scale(1.06); }

/* SMOOTH STAGGER REVEAL — cards rise in one at a time */
.deck.reveal .deck-card {
  opacity: 0;
}
.deck.reveal .deck-card.c-0 { transform: translateX(-380px) translateY(120px) rotate(-12deg); }
.deck.reveal .deck-card.c-1 { transform: translateX(-190px) translateY(120px) rotate(-6deg); }
.deck.reveal .deck-card.c-2 { transform: translateX(0)      translateY(120px) rotate(0deg); }
.deck.reveal .deck-card.c-3 { transform: translateX(190px)  translateY(120px) rotate(6deg); }
.deck.reveal .deck-card.c-4 { transform: translateX(380px)  translateY(120px) rotate(12deg); }

.deck.reveal.on .deck-card { opacity: 1; }
.deck.reveal.on .deck-card.c-0 { transform: translateX(-380px) translateY(22px) rotate(-12deg); transition-delay: 0s;    }
.deck.reveal.on .deck-card.c-1 { transform: translateX(-190px) translateY(7px)  rotate(-6deg);  transition-delay: .18s; }
.deck.reveal.on .deck-card.c-2 { transform: translateX(0)      translateY(0)    rotate(0deg);   transition-delay: .36s; }
.deck.reveal.on .deck-card.c-3 { transform: translateX(190px)  translateY(7px)  rotate(6deg);   transition-delay: .54s; }
.deck.reveal.on .deck-card.c-4 { transform: translateX(380px)  translateY(22px) rotate(12deg);  transition-delay: .72s; }

/* INNER FLIPPER — handles the 3D rotateY flip */
.deck-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.6, .05, .2, 1.05);
}
.deck-card.is-flipped .deck-flipper {
  transform: rotateY(180deg);
}

/* FACES — front and back share absolute positioning */
.deck-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow .5s ease, border-color .5s ease;
}
.deck-card:hover .deck-face,
.deck-card.is-flipped .deck-face {
  box-shadow: 0 48px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(147,136,230,0.4);
  border-color: rgba(147,136,230,0.55);
}
.deck-back {
  transform: rotateY(180deg);
}

/* FRONT — browser chrome + preview + meta */
.deck-chrome {
  display: flex; align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.deck-dots { display: flex; gap: 6px; }
.deck-dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25) inset;
}
.deck-dots i:nth-child(1) { background: #ff5f57; } /* close (red)    */
.deck-dots i:nth-child(2) { background: #febc2e; } /* minimize (yellow) */
.deck-dots i:nth-child(3) { background: #28c840; } /* maximize (green)  */
.deck-url {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: .02em;
  flex: 1;
  text-align: center;
  padding: 4px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.deck-preview {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.deck-preview::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(0,0,0,.35), transparent 70%);
  pointer-events: none;
}
.deck-preview img {
  position: relative;
  max-width: 70%;
  max-height: 70%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.4));
}
/* Front-side preview backgrounds — each tied to the brand's vibe */
.deck-preview--kpro     { background: radial-gradient(120% 100% at 50% 0%, #2a4396 0%, #0a1228 100%); }
.deck-preview--aj       { background: radial-gradient(120% 100% at 50% 0%, #6a7c9a 0%, #2c3340 45%, #0a0c12 100%); }
.deck-preview--captains { background: radial-gradient(120% 100% at 50% 0%, #2a6e85 0%, #0a1a22 100%); }
.deck-preview--library  { background: linear-gradient(160deg, #4a3f2e 0%, #2a2520 50%, #100c08 100%); }
.deck-preview--glimpse  { background: radial-gradient(120% 100% at 50% 0%, #6a4830 0%, #2c1c10 60%, #100804 100%); }
/* Library logo needs a lighter shadow on its dark preview */
.deck-preview--library img { filter: drop-shadow(0 4px 24px rgba(247,232,196,.18)); }
.deck-meta {
  padding: 18px 20px 14px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.deck-name {
  font-family: 'Geist', sans-serif;
  font-size: 16px; font-weight: 500;
  color: var(--fg);
  margin-bottom: 4px;
}
.deck-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mute);
}
/* "Flip" word — small, always visible, brightens on hover */
.deck-flip-word {
  position: absolute;
  bottom: 16px; right: 18px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(147, 136, 230, 0.55);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 3;
}
.deck-flip-word span {
  font-size: 13px;
  line-height: 1;
}
.deck-card:hover .deck-flip-word {
  color: rgba(179, 168, 239, 1);
  transform: translateX(-2px);
}
.deck-flip-word--back {
  top: 18px; left: 22px;
  bottom: auto; right: auto;
}

/* BACK — overview + bullets + CTA */
.deck-back {
  padding: 32px 28px 24px;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  color: var(--fg);
}
/* Back-face gradients — brand-aligned, each one unique */
.deck-back--kpro     { background: radial-gradient(120% 100% at 30% 0%, #1c3470 0%, #0a1430 45%, #03060f 100%); }
.deck-back--aj       { background: linear-gradient(155deg, #8190a8 0%, #3a4458 30%, #161a25 70%, #060810 100%); }
.deck-back--captains { background: radial-gradient(120% 100% at 30% 0%, #2c7d96 0%, #103a4a 50%, #04141c 100%); }
.deck-back--library  { background: linear-gradient(160deg, #d6c39a 0%, #6a553a 30%, #2a1f14 70%, #0a0604 100%); }
.deck-back--glimpse  { background: radial-gradient(120% 100% at 30% 0%, #8a5e3c 0%, #4a2d18 45%, #1a0c04 100%); }

/* Library gets a cream/warm text treatment since it's a lighter gradient at the top */
.deck-back--library .deck-back-name { color: #fbf2d9; }
.deck-back--library .deck-back-cat { color: #e6c890; }
.deck-back--library .deck-back-desc { color: rgba(251, 242, 217, 0.78); }
.deck-back--library .deck-back-list li { color: rgba(251, 242, 217, 0.86); }
.deck-back--library .deck-back-list li::before { background: #e6c890; box-shadow: 0 0 8px rgba(230, 200, 144, .5); }
.deck-back--library .deck-flip-word--back { color: rgba(230, 200, 144, 0.7); }

/* AJ's lighter steel gradient also needs text adjustments at the top portion */
.deck-back--aj .deck-back-name { color: #fff; }
.deck-back--aj .deck-back-cat { color: #b8c4d6; }

.deck-back-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--fg-bright);
  margin-bottom: 6px;
  line-height: 1.1;
}
.deck-back-cat {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: 18px;
}
/* Short description above the bullet list */
.deck-back-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 20px 0;
  max-width: 36ch;
  font-style: normal;
  letter-spacing: -.005em;
}

/* Bullet list of what we delivered for the client */
.deck-back-list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto 0;
  display: flex; flex-direction: column;
  gap: 11px;
  width: 100%;
}
.deck-back-list li {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.96);
  padding-left: 22px;
  position: relative;
  letter-spacing: -.005em;
}
.deck-back-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--purple-soft);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 14px rgba(147,136,230,.55);
}
.deck-back-cta {
  margin-top: 24px;
  align-self: stretch;
  justify-content: center;
}
.deck-back-cta span { font-size: 14px; }

/* Footer CTA below the deck */
.deck-footer {
  display: flex; justify-content: center;
  margin-top: 60px;
}

/* Responsive — collapse fan to vertical stack on smaller screens */
@media (max-width: 1000px) {
  .deck { height: auto; flex-direction: column; gap: 18px; padding: 20px 0; max-width: 380px; }
  .deck-card { position: relative; width: 100%; height: 420px; transform: none !important; }
  .deck.reveal .deck-card,
  .deck.reveal.on .deck-card { transform: translateY(0) !important; }
  .deck-card:hover { transform: translateY(-6px) scale(1.02) !important; }
  .deck-card.is-flipped { transform: translateY(-6px) scale(1.02) !important; }
}

/* ============ WHAT WE DO — clean services boxes ============ */
section.what-we-do {
  padding: 140px 0 120px;
  position: relative;
}
.wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .wwd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wwd-grid { grid-template-columns: 1fr; } }

.wwd-box {
  display: flex; flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, background .35s ease;
}
.wwd-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at 50% 0%, rgba(111,95,209,0.10), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.wwd-box:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: var(--bg-soft);
}
.wwd-box:hover::before { opacity: 1; }

.wwd-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(111,95,209,.18), rgba(26,36,86,.4));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  margin-bottom: 24px;
  color: var(--purple-soft);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease;
}
.wwd-icon svg { width: 20px; height: 20px; }
.wwd-box:hover .wwd-icon {
  transform: scale(1.06);
  background: linear-gradient(135deg, rgba(147,136,230,.25), rgba(42,52,121,.5));
}
.wwd-box h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -.015em;
  color: var(--fg);
  margin-bottom: 10px;
}
.wwd-box p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-dim);
  flex: 1;
  margin: 0;
}
.wwd-arrow {
  position: absolute;
  top: 32px; right: 28px;
  font-size: 18px;
  color: var(--fg-mute);
  transition: transform .35s ease, color .35s ease;
}
.wwd-box:hover .wwd-arrow {
  color: var(--purple-soft);
  transform: translate(4px, -4px);
}

/* ============ STATEMENT (legacy — kept in case anything still uses it) ============ */
.statement { padding: 140px 0; text-align: center; }
.statement h2 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 22ch;
  margin: 0 auto;
  color: var(--fg);
}
.statement h2 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: transparent;
  background: linear-gradient(180deg, #b3a8ef, #6f5fd1);
  -webkit-background-clip: text; background-clip: text;
}

/* ============ SECTION HEADER ============ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 60px;
}
.section-head .label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 18ch;
  color: var(--fg);
}
.section-head h2 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: transparent;
  background: linear-gradient(180deg, #b3a8ef, #6f5fd1);
  -webkit-background-clip: text; background-clip: text;
}
.section-head .desc { max-width: 360px; color: var(--fg-dim); font-size: 15px; line-height: 1.6; }

/* ============ SERVICE CARDS (home) ============ */
section.services { padding: 80px 0 140px; }
.service-cards { display: flex; flex-direction: column; gap: 20px; }
.scard {
  position: relative;
  border-radius: 24px;
  padding: clamp(36px, 5vw, 64px);
  min-height: clamp(280px, 36vw, 420px);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .35s ease;
  text-decoration: none;
  color: inherit;
}
.scard:hover { transform: translateY(-4px); }
.scard .num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: auto;
}
.scard .icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center;
  margin-bottom: 24px;
}
.scard .icon svg { width: 28px; height: 28px; opacity: .9; }
.scard h3 {
  font-family: 'Geist', sans-serif; font-weight: 400;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--fg-bright);
  margin-bottom: 18px;
}
.scard h3 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; }
.scard p {
  color: rgba(255,255,255,.78);
  max-width: 56ch;
  font-size: 15px; line-height: 1.6;
}
.scard .more {
  margin-top: 32px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 100px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  align-self: flex-start;
  transition: background .25s ease;
}
.scard .more:hover { background: rgba(255,255,255,.18); }
.scard .more::after { content: '→'; font-size: 14px; }

.scard.s1 { background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.06), transparent 50%), linear-gradient(150deg, #1f2c66, #0e1538); }
.scard.s2 { background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.08), transparent 50%), linear-gradient(150deg, #5a4dab, #2c2360); }
.scard.s3 { background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.05), transparent 50%), linear-gradient(150deg, #2d2f3a, #131419); }
.scard.s4 { background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.10), transparent 50%), linear-gradient(150deg, #6f5fd1, #2a2459); }
.scard.s5 { background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.04), transparent 50%), linear-gradient(150deg, #1a2456, #07091a); }
.scard.s6 { background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.07), transparent 50%), linear-gradient(150deg, #3a3d4c, #1a1c24); }

.scard .echo {
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  opacity: .55;
  pointer-events: none;
}
.scard .echo svg { width: 100%; height: 100%; }

/* ============ PARTNERS GRID ============ */
section.partners { padding: 120px 0; }
.partners-head {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 24ch;
  margin-bottom: 56px;
  color: var(--fg);
}
.partners-head em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: transparent;
  background: linear-gradient(180deg, #b3a8ef, #6f5fd1);
  -webkit-background-clip: text; background-clip: text;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pcard {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 28px 22px 22px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease,
    border-color .4s ease;
}
/* Default fallback gradient (overridden per brand below) */
.pcard {
  background: radial-gradient(80% 100% at 30% 0%, #1a2456 0%, #0e1538 50%, #06070a 100%);
}
/* Vignette so logos always have edge contrast */
.pcard::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 50% 50%, transparent 50%, rgba(0,0,0,.30) 100%);
  pointer-events: none;
  z-index: 1;
}
.pcard:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: var(--purple-soft);
  box-shadow:
    0 32px 70px rgba(111,95,209,.28),
    0 8px 24px rgba(0,0,0,.55);
}
.pcard .pwrap {
  position: relative; z-index: 2;
  flex: 1;
  display: grid; place-items: center;
  width: 100%;
}
.pcard img {
  max-width: 78%;
  max-height: 78%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.45));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.pcard:hover img { transform: scale(1.06); }
.pcard .pcat {
  position: relative; z-index: 2;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: 16px;
}

/* Brand-color gradients per partner card */
.pcard--kpro     { background: radial-gradient(80% 100% at 30% 0%, #2a4690 0%, #0e1d4d 35%, #050a1e 75%, #02050f 100%); }
.pcard--glimpse  { background: radial-gradient(80% 100% at 30% 0%, #b3895c 0%, #6e4a2c 35%, #2d1a0d 75%, #0e0805 100%); }
.pcard--library  { background: linear-gradient(155deg, #d8c39a 0%, #8e6e4a 30%, #3b2a1b 65%, #15100a 100%); }
.pcard--captains { background: radial-gradient(80% 100% at 30% 0%, #4ba6c2 0%, #1d5d75 40%, #07232f 78%, #020c12 100%); }
.pcard--aj       { background: linear-gradient(155deg, #8b97ad 0%, #424c63 30%, #1a1f2c 70%, #060810 100%); }
.pcard--eyeland  { background: radial-gradient(80% 100% at 30% 0%, #c0976a 0%, #7c5a36 35%, #2d1f12 75%, #0e0805 100%); }
.pcard--dwan     { background: linear-gradient(155deg, #6e7a89 0%, #2f3947 35%, #131822 75%, #050810 100%); }
.pcard--sunset   { background: radial-gradient(80% 100% at 30% 0%, #4f8aa6 0%, #1f4a64 40%, #0c1e2c 78%, #03080f 100%); }

/* Logo-specific sizing per brand */
.pcard--kpro img    { max-width: 72%; max-height: 72%; }
.pcard--glimpse img { max-width: 80%; max-height: 60%; }
.pcard--library img { max-width: 62%; max-height: 82%; }
.pcard--captains img{ max-width: 60%; max-height: 80%; }
.pcard--aj img      { max-width: 85%; max-height: 55%; }
.pcard--eyeland img { max-width: 82%; max-height: 65%; }
.pcard--dwan img    { max-width: 60%; max-height: 80%; }
.pcard--sunset img  { max-width: 82%; max-height: 70%; }

@media (max-width: 900px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .partner-grid { grid-template-columns: 1fr; } }

/* ============ NUMBERS ============ */
section.numbers { padding: 120px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat .v {
  font-family: 'Poppins', 'Geist', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(54px, 6.5vw, 94px);
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: 14px;
}
.stat .k {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}
@media (max-width: 800px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ VOICES (testimonial cards) ============ */
.voices-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.voice {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .3s ease;
}
.voice:hover { border-color: var(--line-strong); }
.voice blockquote {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--fg);
  margin-bottom: 32px;
}
.voice blockquote em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; color: var(--purple-soft); }
.voice .attr { display: flex; align-items: center; gap: 14px; }
.voice .av {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--navy));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-size: 18px; font-style: italic;
  color: var(--fg-bright);
}
.voice .who .name { font-size: 14px; color: var(--fg); }
.voice .who .role { font-size: 12px; color: var(--fg-mute); margin-top: 2px; }
@media (max-width: 900px) { .voices-grid { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
section.faq { padding: 120px 0; border-top: 1px solid var(--line); }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); padding: 28px 0; cursor: pointer; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  font-family: 'Geist', sans-serif;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--fg);
}
.faq-q .sign { font-family: 'Geist Mono', monospace; color: var(--fg-dim); transition: transform .3s ease, color .3s ease; }
.faq-item[open] .faq-q .sign { transform: rotate(45deg); color: var(--purple-soft); }
.faq-a {
  color: var(--fg-dim); font-size: 15px; line-height: 1.6;
  max-width: 70ch;
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.faq-item[open] .faq-a { max-height: 400px; padding-top: 18px; }

/* ============ CTA FOOTER CARD ============ */
section.cta { padding: 60px 0 140px; }
.cta-card {
  position: relative;
  border-radius: 32px;
  padding: clamp(56px, 8vw, 120px) clamp(36px, 6vw, 80px);
  overflow: hidden;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(111,95,209,.25), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(26,36,86,.45), transparent 60%),
    linear-gradient(180deg, #1a2456 0%, #0c0d12 100%);
  border: 1px solid var(--line-strong);
  text-align: center;
}
.cta-card h2 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -.03em;
  max-width: 16ch;
  margin: 0 auto 24px;
  color: var(--fg);
}
.cta-card h2 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
}
.cta-card p { color: var(--fg-dim); max-width: 56ch; margin: 0 auto 36px; font-size: 16px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-card .echo-orb {
  position: absolute;
  inset: auto -10% -50% -10%;
  pointer-events: none;
  opacity: .35;
}

/* ============ FOOTER ============ */
footer.bottom {
  border-top: 1px solid var(--line);
  padding: 56px var(--pad) 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
}
footer.bottom .flogo img {
  height: 40px;
  width: auto;
  display: block;
}
footer.bottom .copy { font-size: 11px; color: var(--fg-mute); font-family: 'Geist Mono', monospace; letter-spacing: .05em; }
footer.bottom .links { display: flex; gap: 24px; flex-wrap: wrap; }
footer.bottom .links a { color: var(--fg-dim); text-decoration: none; font-size: 13px; transition: color .25s ease; }
footer.bottom .links a:hover { color: var(--fg); }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
.reveal.on { opacity: 1; transform: translateY(0); }
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.split-char.on { opacity: 1; transform: translateY(0); }

/* ============ SUBPAGE — SHARED ============ */
section.page-hero {
  padding: 200px var(--pad) 100px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
section.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(26,36,86,.32), transparent 60%),
    radial-gradient(40% 40% at 80% 80%, rgba(111,95,209,.10), transparent 60%);
  pointer-events: none;
}
.page-hero .crumb {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 28px;
}
.page-hero .crumb a { color: var(--fg-dim); text-decoration: none; transition: color .2s ease; }
.page-hero .crumb a:hover { color: var(--fg); }
.page-hero h1 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(46px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -.03em;
  max-width: 14ch;
  margin: 0 auto 28px;
  color: var(--fg);
  position: relative; z-index: 2;
}
.page-hero h1 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #b3a8ef 50%, #6f5fd1 100%);
  -webkit-background-clip: text; background-clip: text;
}
.page-hero p {
  max-width: 620px;
  margin: 0 auto 36px;
  color: var(--fg-dim);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  position: relative; z-index: 2;
}
.page-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2; }

/* Service detail page content */
section.service-detail { padding: 60px 0 100px; }
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.dcard {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  transition: border-color .3s ease;
}
.dcard:hover { border-color: var(--line-strong); }
.dcard .ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(111,95,209,.18), rgba(26,36,86,.4));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  margin-bottom: 22px;
  color: var(--purple-soft);
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 20px;
}
.dcard h3 {
  font-family: 'Geist', sans-serif; font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--fg);
  margin-bottom: 12px;
}
.dcard h3 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; color: var(--purple-soft); }
.dcard p { color: var(--fg-dim); font-size: 14px; line-height: 1.6; }

/* Service feature list */
section.feature-list { padding: 80px 0; }
.feature-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.feature-row:last-child { border-bottom: 1px solid var(--line); }
.feature-row .fnum {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 36px;
  color: var(--purple-soft);
  line-height: 1;
}
.feature-row h3 {
  font-family: 'Geist', sans-serif; font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.01em;
  color: var(--fg);
}
.feature-row p { color: var(--fg-dim); font-size: 15px; line-height: 1.6; max-width: 56ch; }
@media (max-width: 800px) {
  .feature-row { grid-template-columns: 1fr; gap: 12px; }
  .feature-row .fnum { font-size: 28px; }
}

/* Pricing card */
section.pricing { padding: 80px 0 120px; }
.price-card {
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(111,95,209,.18), transparent 60%),
    linear-gradient(180deg, #14152a 0%, #0a0b15 100%);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: clamp(40px, 6vw, 80px);
  text-align: center;
}
.price-card .tag {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: 18px;
}
.price-card h2 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--fg);
  margin-bottom: 18px;
}
.price-card h2 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
}
.price-card p { color: var(--fg-dim); max-width: 60ch; margin: 0 auto 32px; font-size: 16px; }

/* ============ PRELOADER (brand intro on initial load) ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 36px;
  transition: opacity .5s cubic-bezier(.4,.2,.2,1), transform .6s cubic-bezier(.4,.2,.2,1);
}
.preloader::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(26,36,86,.28), transparent 60%),
    radial-gradient(40% 40% at 80% 20%, rgba(111,95,209,.10), transparent 60%);
  pointer-events: none;
}
.preloader.done {
  opacity: 0;
  transform: translateY(-1.5vh);
  pointer-events: none;
}
.pre-logo {
  height: clamp(110px, 16vw, 200px);
  width: auto;
  opacity: 0;
  transform: scale(.96);
  animation: preLogoIn .65s cubic-bezier(.2,.7,.2,1) .05s forwards;
  position: relative;
  z-index: 1;
}
@keyframes preLogoIn {
  to { opacity: 1; transform: scale(1); }
}
.pre-bar {
  width: 220px;
  height: 1px;
  background: rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.pre-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(147,136,230,.4), var(--purple-soft), #ffffff);
  animation: preBarFill 1.0s cubic-bezier(.45,.1,.55,1) .35s forwards;
  box-shadow: 0 0 12px rgba(147,136,230,.5);
}
@keyframes preBarFill { to { width: 100%; } }
.pre-meta {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--fg-mute);
  opacity: 0;
  animation: preLogoIn .5s ease .2s forwards;
}
.pre-meta .pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-soft);
  box-shadow: 0 0 8px rgba(147,136,230,.6);
  animation: pulse 1.6s ease-in-out infinite;
}

html.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .preloader { display: none; }
}

/* ============================================
   SERVICE PAGE — VIDEO HEADER (drop-in)
   Replace <section class="page-hero"> with:
   <section class="video-header">
     <video class="vh-bg" autoplay muted loop playsinline poster="...">
       <source src="..." type="video/mp4" />
     </video>
     <div class="vh-tint"></div>
     <div class="vh-content wrap">
       <div class="crumb">...</div>
       <h1>...</h1>
       <p>...</p>
       <div class="actions">...</div>
     </div>
   </section>
   ============================================ */
section.video-header {
  position: relative;
  min-height: 78vh;
  padding: 220px var(--pad) 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.video-header .vh-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.video-header .vh-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,7,10,.55) 0%, rgba(6,7,10,.72) 60%, rgba(6,7,10,.92) 100%),
    radial-gradient(60% 60% at 20% 0%, rgba(26,36,86,.35), transparent 70%),
    radial-gradient(50% 50% at 90% 90%, rgba(111,95,209,.18), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.video-header .vh-content {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.video-header .crumb {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 28px;
}
.video-header .crumb a { color: var(--fg-dim); text-decoration: none; transition: color .2s ease; }
.video-header .crumb a:hover { color: var(--fg); }
.video-header h1 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(46px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -.03em;
  max-width: 16ch;
  margin: 0 auto 28px;
  color: var(--fg-bright);
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.video-header h1 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #b3a8ef 50%, #6f5fd1 100%);
  -webkit-background-clip: text; background-clip: text;
}
.video-header p {
  max-width: 660px;
  margin: 0 auto 36px;
  color: rgba(232,234,239,.86);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.video-header .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Light-mode tint so the video header still reads in light theme */
/* Video header always sits on a dark video — keep dark-theme treatment in BOTH modes
   so brand headlines stay readable regardless of the global theme. */
html.light .video-header .vh-tint {
  background:
    linear-gradient(180deg, rgba(6,7,10,.55) 0%, rgba(6,7,10,.72) 60%, rgba(6,7,10,.92) 100%),
    radial-gradient(60% 60% at 20% 0%, rgba(26,36,86,.35), transparent 70%),
    radial-gradient(50% 50% at 90% 90%, rgba(111,95,209,.18), transparent 70%);
}
/* Force pure white for the headline body; preserve the em's white→purple gradient */
html.light .video-header h1 {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 4px 30px rgba(0,0,0,.55);
}
html.light .video-header h1 em {
  -webkit-text-fill-color: transparent;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #b3a8ef 50%, #6f5fd1 100%);
  -webkit-background-clip: text; background-clip: text;
}
html.light .video-header p { color: rgba(255,255,255,.86); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
html.light .video-header .crumb,
html.light .video-header .crumb a { color: rgba(255,255,255,.65); }
html.light .video-header .crumb a:hover { color: #ffffff; }

/* ============================================
   STATS STRIP — for service pages that brag
   ============================================ */
section.stat-strip { padding: 40px 0 0; }
.stat-strip .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
}
@media (max-width: 900px) { .stat-strip .grid { grid-template-columns: repeat(2, 1fr); } }
.stat-strip .stat { text-align: center; padding: 6px 12px; }
.stat-strip .num {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1; letter-spacing: -.02em;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: 8px;
}
.stat-strip .lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}

/* ============================================
   CASE STUDY BLOCK — reusable
   ============================================ */
section.case-study { padding: 100px 0; position: relative; }
.case-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) { .case-card { grid-template-columns: 1fr; padding: 32px; } }
.case-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(50% 60% at 0% 0%, rgba(111,95,209,.10), transparent 60%);
  pointer-events: none;
}
.case-card .case-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: 18px;
}
.case-card h3 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  color: var(--fg-bright);
}
.case-card h3 em { font-family: 'Fraunces', serif; font-style: italic; color: var(--purple-soft); }
.case-card p { color: var(--fg-dim); font-size: 15px; line-height: 1.65; margin-bottom: 14px; }
.case-numbers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 24px;
}
.case-numbers .cn {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.case-numbers .cn-num {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--purple-soft);
  margin-bottom: 6px;
  line-height: 1;
}
.case-numbers .cn-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim);
}

/* ============================================
   ROAS / PROOF GRID — placeholder for screenshots
   ============================================ */
section.proof-grid { padding: 80px 0; }
.roas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .roas-grid { grid-template-columns: repeat(2, 1fr); } }
.roas-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  aspect-ratio: 4/3;
  padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.roas-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.roas-card .platform {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.roas-card .big {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(28px, 3.4vw, 40px);
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.roas-card .sml { font-size: 13px; color: var(--fg-dim); }
.roas-card .placeholder-tag {
  position: absolute; top: 14px; right: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-soft);
  background: rgba(111,95,209,.10);
  border: 1px solid rgba(111,95,209,.30);
  border-radius: 999px;
  padding: 4px 8px;
}

/* ============================================
   STACK / LOGO STRIP — tools we work with
   ============================================ */
section.stack-strip { padding: 60px 0; }
.stack-strip h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  margin-bottom: 28px;
}
.stack-row {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.stack-pill {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg);
  transition: border-color .25s ease, color .25s ease;
}
.stack-pill:hover { border-color: var(--purple-soft); color: var(--fg-bright); }

/* ============================================
   CASE STUDY — BRAND LOGO IN VIDEO HEADER
   Drops the client's logo into the hero so the page reads as their brand.
   ============================================ */
.video-header .case-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,234,239,.92));
  padding: 22px 36px;
  border-radius: 18px;
  margin: 0 auto 28px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05);
  max-width: 90vw;
}
.video-header .case-brand img {
  height: clamp(54px, 7vw, 92px);
  width: auto;
  display: block;
  max-width: 100%;
}
/* Some logos read better on a dark plate — opt-in via .case-brand--dark */
.video-header .case-brand--dark {
  background: linear-gradient(180deg, #0c0d12 0%, #06070a 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
/* For logos that are already transparent white wordmarks — sit them on a glassy panel */
.video-header .case-brand--glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}

/* ============================================
   CASE STUDY — PHOTO GALLERY
   Placeholder cards; swap each src for the real shot when ready.
   ============================================ */
section.case-gallery { padding: 80px 0; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }
.gtile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(111,95,209,.18) 0%, rgba(26,36,86,.45) 60%, rgba(6,7,10,.9) 100%);
  border: 1px solid var(--line);
  transition: border-color .3s ease, transform .3s ease;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px;
}
.gtile.wide { grid-column: span 2; }
@media (max-width: 560px) { .gtile.wide { grid-column: span 1; } }
.gtile:hover { border-color: var(--purple-soft); transform: translateY(-2px); }
.gtile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gtile .gtag {
  position: relative; z-index: 1;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-soft);
  background: rgba(111,95,209,.10);
  border: 1px solid rgba(111,95,209,.30);
  border-radius: 999px;
  padding: 5px 10px;
  align-self: flex-start;
}
.gtile .gcap {
  position: relative; z-index: 1;
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.4;
}

/* ============================================
   AUDIT FORM — homepage CTA replacement
   ============================================ */
.audit-card {
  background:
    radial-gradient(70% 100% at 80% 0%, rgba(111,95,209,.20), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(26,36,86,.45), transparent 60%),
    linear-gradient(180deg, #14152a 0%, #0c0d12 100%);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  padding: clamp(40px, 5vw, 72px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .audit-card { grid-template-columns: 1fr; } }

.audit-intro .label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-soft);
  margin-bottom: 18px;
}
.audit-intro h2 {
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--fg-bright);
  margin-bottom: 18px;
}
.audit-intro h2 em {
  font-family: 'Fraunces', serif; font-style: italic;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #b3a8ef 50%, #6f5fd1 100%);
  -webkit-background-clip: text; background-clip: text;
}
.audit-intro p { color: var(--fg-dim); font-size: 15px; line-height: 1.65; margin-bottom: 14px; }
.audit-intro .perks {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 10px;
}
.audit-intro .perks li {
  position: relative; padding-left: 22px;
  font-size: 13px; color: var(--fg); line-height: 1.4;
}
.audit-intro .perks li::before {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--chrome);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 12px rgba(147,136,230,.30);
}

.audit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.audit-form .full { grid-column: 1 / -1; }

.audit-field {
  display: flex; flex-direction: column; gap: 7px;
}
.audit-field label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim);
}
.audit-field input,
.audit-field select,
.audit-field textarea {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--fg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 13px 14px;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.audit-field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
  line-height: 1.5;
}
.audit-field select {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%239388e6' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
  cursor: pointer;
}
.audit-field input::placeholder,
.audit-field textarea::placeholder {
  color: var(--fg-mute);
}
.audit-field input:focus,
.audit-field select:focus,
.audit-field textarea:focus {
  outline: none;
  border-color: var(--purple-soft);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(111,95,209,.18);
}
.audit-form button[type="submit"] {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: 14px;
  color: var(--fg-bright);
  background: linear-gradient(180deg, #8a7bea, #6f5fd1);
  border: 1px solid #9388e6;
  border-radius: 10px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  width: 100%;
  letter-spacing: .01em;
}
.audit-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(111,95,209,.35);
  background: linear-gradient(180deg, #9387ee, #7a6cd9);
}
.audit-form .form-note {
  grid-column: 1 / -1;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  margin-top: 4px;
}

/* Light-mode audit form */
html.light .audit-card {
  background:
    radial-gradient(70% 100% at 80% 0%, rgba(111,95,209,.10), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(26,36,86,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f3f3f6 100%);
}
html.light .audit-field input,
html.light .audit-field select,
html.light .audit-field textarea {
  background: rgba(0,0,0,.02);
  color: var(--fg);
}
html.light .audit-field input:focus,
html.light .audit-field select:focus,
html.light .audit-field textarea:focus {
  background: rgba(0,0,0,.04);
}

/* ============================================
   WORK DECK — CURSOR-TRACKING GRID + GLOW FX
   A faint grid revealed only around the mouse, with a soft purple glow.
   JS updates --cx / --cy CSS vars; .is-card-hover fades the FX so cards
   stay the focal point on hover.
   ============================================ */
.deck-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
  transition: opacity .45s ease;
}
.deck-fx::before {
  /* Subtle faded grid — only visible inside the mouse halo via mask */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(147,136,230,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147,136,230,.16) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%),
                       rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,0) 75%);
          mask-image: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%),
                       rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,0) 75%);
  transition: opacity .35s ease;
}
.deck-fx::after {
  /* Soft purple glow following the cursor */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%),
                rgba(111,95,209,.18) 0%, rgba(111,95,209,.06) 35%, transparent 72%);
  transition: opacity .35s ease;
}
section.work-deck.is-card-hover .deck-fx { opacity: 0; }

/* Light-mode tones — slightly more visible against the lighter background */
html.light .deck-fx::before {
  background-image:
    linear-gradient(to right, rgba(111,95,209,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111,95,209,.22) 1px, transparent 1px);
}
html.light .deck-fx::after {
  background: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%),
                rgba(111,95,209,.10) 0%, rgba(111,95,209,.04) 35%, transparent 72%);
}

/* Skip on mobile/touch — purely decorative */
@media (max-width: 760px), (hover: none) {
  .deck-fx { display: none; }
}

/* Make sure the deck content sits above the FX layer */
section.work-deck > .wrap { position: relative; z-index: 1; }

/* ============================================
   SERVICE TICKER — slow horizontal marquee
   Sits between the hero and the work deck. Subtle, mono-uppercase, with star
   separators. Two identical rows + translateX(-50%) = perfectly seamless loop.
   ============================================ */
section.ticker {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  /* Soft edge fades so items dissolve in/out of view */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.ticker-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 70s linear infinite;
  will-change: transform;
}
section.ticker:hover .ticker-track {
  animation-play-state: paused;
}
.ticker-row {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.ticker-row span:not(.dot) {
  transition: color .25s ease;
}
.ticker-row:hover span:not(.dot) {
  color: var(--fg);
}
.ticker-row .dot {
  color: var(--purple-soft);
  font-size: 11px;
  opacity: .55;
  font-family: 'Geist', sans-serif;
  letter-spacing: 0;
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Light-mode tone */
html.light section.ticker {
  background: rgba(0,0,0,.02);
}
html.light .ticker-row { color: var(--fg-dim); }

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}