/* ==========================================================================
   Virtuatainment — Design System
   Monochrome: pure black canvas, pure white ink, inverted white panels
   for emphasis. No colour anywhere. DM Sans + Inter.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&family=Inter:wght@300;400;450;500;600;700&display=swap');

:root {
  /* Surfaces */
  --bg:            #000000;
  --bg-alt:        #0B0B0B;
  --bg-deep:       #060606;
  --bg-raise:      #141414;
  --ink:           #FFFFFF;
  --ink-soft:      #A8A8A8;
  --ink-mute:      #767676;
  --line:          rgba(255, 255, 255, 0.12);
  --line-strong:   rgba(255, 255, 255, 0.26);
  --line-gold:     rgba(255, 255, 255, 0.26);   /* kept as an alias so the
                                                   Google Business block and the
                                                   tick lists resolve cleanly */

  /* Emphasis (white, used where a brand colour would normally go) */
  --accent:        #FFFFFF;
  --accent-2:      #DEDEDE;
  --accent-ink:    #000000;
  --accent-soft:   rgba(255, 255, 255, 0.10);
  --gradient:      linear-gradient(135deg, #FFFFFF 0%, #C4C4C4 100%);

  /* Inverted panels */
  --invert-bg:     #FAFAFA;
  --invert-ink:    #0A0A0A;
  --invert-soft:   #4E4E4E;
  --invert-mute:   #6A6A6A;
  --invert-line:   rgba(10, 10, 10, 0.14);

  /* Type */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:  'DM Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Rhythm */
  --shell: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(72px, 11vw, 148px);
  --radius: 18px;
  --radius-lg: 26px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.display {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7.6vw, 5.9rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.045em;
}

.h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); line-height: 1.03; font-weight: 800; letter-spacing: -0.042em; }
.h2 { font-size: clamp(1.85rem, 4vw, 3.05rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; }
.h3 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.22; font-weight: 700; }
.h4 { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.32; font-weight: 700; }

/* `.serif` is a legacy hook — it maps to the display face. */
.serif, .serif-it {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.042em;
}
.serif-it { font-style: italic; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--ink-soft);
  line-height: 1.7;
  font-weight: 350;
  max-width: 62ch;
}

.muted { color: var(--ink-mute); }
.soft  { color: var(--ink-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
/* The eyebrow used to carry a 24px rule before the text. Removed — the
   uppercase letterspacing already separates it from the heading, and the
   dashes were adding visual noise on every section. */

.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section { position: relative; }
.section { padding-block: var(--section); }
.section-sm { padding-block: clamp(52px, 7vw, 96px); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-bottom: clamp(38px, 5vw, 68px);
}
@media (min-width: 900px) {
  .section-head.split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    align-items: end;
    gap: 48px;
  }
}

.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 100px;
  background: var(--gradient);
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.4s, color 0.4s, border-color 0.4s;
  will-change: transform;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -16px rgba(255, 255, 255, 0.45); }
.btn:hover::after { opacity: 1; }
.btn .arw { transition: transform 0.4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost::after { background: var(--gradient); }
.btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent); }

/* Used inside inverted (white) panels */
.btn-light {
  background: #0A0A0A;
  color: #FFFFFF;
  border-color: transparent;
}
.btn-light::after { background: #1F1F1F; }
.btn-light:hover { color: #FFFFFF; box-shadow: 0 16px 38px -18px rgba(0, 0, 0, 0.7); }

.btn-sm { padding: 11px 20px; font-size: 0.82rem; }

.link-u {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease), opacity 0.3s;
}
.link-u:hover { background-size: 100% 1px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 16px;
  transition: background 0.5s var(--ease-soft), padding 0.5s var(--ease-soft), border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
  padding-block: 10px;
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: block;
  transition: transform 0.6s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-top: -2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  position: relative;
  padding: 9px 15px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.3s, background 0.3s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
}
.nav-cta { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  place-items: center;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.burger span + span { margin-top: 4.5px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  body.menu-open .nav-links { opacity: 1; pointer-events: auto; transform: none; }
  .nav-links a { font-size: 1.9rem; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; padding: 10px 22px; }
  .nav-links a.active::after { display: none; }
  .burger { display: grid; }
  .nav-cta .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 116px;
  padding-bottom: 72px;
  overflow: hidden;
  background:
    radial-gradient(1200px 620px at 78% -12%, rgba(255, 255, 255, 0.14), transparent 62%),
    radial-gradient(900px 520px at -8% 6%, rgba(255, 255, 255, 0.07), transparent 62%),
    linear-gradient(180deg, #000000, #070707);
}

/* Faint grid */
.hero::before, .phero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(110% 78% at 50% 22%, #000 0%, transparent 74%);
  mask-image: radial-gradient(110% 78% at 50% 22%, #000 0%, transparent 74%);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-canvas canvas { display: block; width: 100%; height: 100%; }

/* Full-bleed hero scenes sit BEHIND copy. Only a whisper of defocus. */
.hero > .hero-canvas,
.phero > .hero-canvas {
  filter: blur(2px);
  opacity: 1;
  transform: scale(1.02);
  transform-origin: center;
}
@media (max-width: 999px) {
  .hero > .hero-canvas,
  .phero > .hero-canvas { filter: blur(5px); opacity: 0.72; }
}

/* Scrim — heavy only under the copy column, near-clear on the open side. */
.hero::after,
.phero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.6) 28%, rgba(0,0,0,0.16) 58%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.6) 100%);
}
@media (max-width: 999px) {
  .hero::after,
  .phero::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.42) 42%, rgba(0,0,0,0.76) 100%);
  }
}

/* ---------- Centred hero ----------
   The scene runs unblurred and full strength; only a soft radial pool sits
   under the copy, so the 3D reads clearly all around the text. */
.hero-center { text-align: center; }
.hero-center > .hero-canvas { filter: none; opacity: 1; transform: none; }
@media (max-width: 999px) {
  .hero-center > .hero-canvas { filter: blur(2px); opacity: 0.85; }
}
.hero-center::after {
  background:
    radial-gradient(52% 42% at 50% 46%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.52) 46%, rgba(0,0,0,0) 76%),
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 68%, rgba(0,0,0,0.78) 100%);
}
@media (max-width: 999px) {
  .hero-center::after {
    background:
      radial-gradient(80% 42% at 50% 44%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0.2) 82%),
      linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.72) 100%);
  }
}
.hero-center .hero-inner {
  max-width: 62rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-center .eyebrow,
.hero-center .flex-btns,
.hero-center .hero-meta { justify-content: center; }
.hero-center .lead { margin-inline: auto; max-width: 56ch; }
.hero-center .display { max-width: 17ch; }

/* Small credibility line under the hero CTAs */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-meta span::before {
  content: '';
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
  border: 1px solid var(--line-strong);
}

.hero .shell { position: relative; z-index: 2; }

.hero .display, .hero .h1, .hero .lead,
.phero .h1, .phero .lead {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hero .card, .phero .card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.hero-grid {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.75fr); }
}

.hero-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.4;
  z-index: 1;
  pointer-events: none;
}
.aura-a { width: 44vw; height: 44vw; top: -14%; right: -8%; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 68%); }
.aura-b { width: 38vw; height: 38vw; bottom: -18%; left: -12%; background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 68%); }

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.scroll-hint i {
  display: block;
  width: 1px; height: 40px;
  background: linear-gradient(var(--line-strong), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint i::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px; height: 14px;
  background: var(--accent);
  animation: trickle 2.1s var(--ease-soft) infinite;
}
@keyframes trickle {
  0% { transform: translateY(-16px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}

/* Page hero (inner pages) */
.phero {
  position: relative;
  padding-top: clamp(140px, 17vw, 200px);
  padding-bottom: clamp(50px, 7vw, 92px);
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 76% -22%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(180deg, #000000, #070707);
}
.phero .shell { position: relative; z-index: 2; }
.phero-grid { display: grid; gap: 30px; }
@media (min-width: 940px) {
  .phero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr); align-items: end; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: linear-gradient(170deg, #101010, #080808);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 32px);
  overflow: hidden;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s;
  transform-style: preserve-3d;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.10), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -34px rgba(255, 255, 255, 0.22);
  border-color: var(--line-gold);
}
.card:hover::before { opacity: 1; }

.card-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  margin-bottom: 16px;
  transition: -webkit-text-stroke-color 0.4s;
}
.card:hover .card-num { -webkit-text-stroke-color: var(--accent); }

.card h3 { margin-bottom: 10px; }
.card p { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.94rem; }

.icon-badge {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--line-gold);
  color: var(--accent);
  margin-bottom: 18px;
}
.icon-badge svg { width: 21px; height: 21px; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.tag {
  font-size: 0.73rem;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* ---------- Inverted panel (white on black layout) ---------- */
.card-dark {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-ink);
}
.card-dark h3, .card-dark h4 { color: var(--invert-ink); }
.card-dark p { color: var(--invert-soft); }
.card-dark .card-num { -webkit-text-stroke-color: rgba(10, 10, 10, 0.28); }
.card-dark:hover { box-shadow: 0 30px 60px -30px rgba(255, 255, 255, 0.3); }
.card-dark:hover .card-num { -webkit-text-stroke-color: var(--invert-ink); }
.card-dark::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(10,10,10,0.07), transparent 62%); }
.card-dark .icon-badge { background: var(--invert-ink); border-color: var(--invert-ink); color: var(--invert-bg); }
.card-dark .tag { background: rgba(10, 10, 10, 0.06); border-color: var(--invert-line); color: var(--invert-soft); }
.card-dark .eyebrow { color: var(--invert-ink); }
.card-dark .link-u { color: var(--invert-ink); }
.card-dark .checks li { color: var(--invert-soft); }
.card-dark .checks li b { color: var(--invert-ink); }
.card-dark .checks li::before {
  background-color: rgba(10, 10, 10, 0.08);
  border-color: var(--invert-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  background: #0B0B0B;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 28px);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span { font-size: 0.82rem; color: var(--ink-mute); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 20px;
  background: #050505;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  color: var(--ink-mute);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee-track span::after { content: '✦'; font-size: 0.62em; color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split.rev > *:first-child { order: 2; }
}

.visual {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(600px 400px at 68% 8%, rgba(255, 255, 255, 0.10), transparent 65%),
    linear-gradient(150deg, #0E0E0E, #040404);
  border: 1px solid var(--line);
}
.visual canvas { width: 100%; height: 100%; display: block; }

/* ---------- Photography ----------
   Real photographs of the studio, in the frames the 3D used to occupy.
   object-fit means a portrait phone shot and a wide interior both fill the
   frame without distorting; the slow zoom on hover keeps the page feeling
   alive now that the ambient 3D is gone. */
.visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.visual:hover img { transform: scale(1.045); }

/* Set by JS when a photo 404s. The frame keeps its gradient and its size, so a
   missing file reads as a design choice rather than a broken page. */
.img-missing img { display: none; }
.gallery figure.img-missing {
  background:
    radial-gradient(420px 300px at 66% 14%, rgba(255, 255, 255, 0.08), transparent 66%),
    linear-gradient(150deg, #101010, #050505);
}

/* A hairline inner edge so a bright photo doesn't bleed into the black page. */
.visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -70px 90px -50px rgba(0, 0, 0, 0.85);
}

/* A caption sitting on the photo, reusing the existing pill treatment.
   One pill per frame — .visual-label was removed from any frame that carries a
   .visual-cap. Stacking two of these on a 300px-wide image was unreadable
   whichever corners they sat in. */
.visual-cap {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* A narrow frame for portrait shots and for photos whose source file is small.
   Displaying a 141px photo across a 540px panel is what makes a site look
   cheap; holding it to ~280px keeps it honest. Remove the class once a
   full-resolution file replaces the original. */
.visual.visual-narrow {
  max-width: 300px;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
}

/* The signage shot is portrait (582x802). In the default 4:3.4 landscape frame
   object-fit would crop away the top and bottom of the sign, which is the whole
   subject. A taller ratio keeps the board intact, and object-position pulls the
   crop upward so the neighbouring clinic signage stays out of frame. */
.visual.visual-sign { aspect-ratio: 4 / 4.3; }
.visual.visual-sign img { object-position: 50% 30%; }

/* ---------- Location strip ----------
   Two small frames side by side — the building and the sign. Deliberately
   modest in size: these read as "here is where we are", not as hero imagery,
   and small frames keep modest source files looking sharp. */
.locstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 420px;
}
.locstrip figure {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-raise);
}
.locstrip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Single-image variant: one column, and a touch wider than half the pair so
   the frame still has presence on its own. */
.locstrip-one { grid-template-columns: 1fr; max-width: 260px; }
.locstrip-one figure { aspect-ratio: 4 / 5; }

@media (max-width: 620px) { .locstrip { max-width: none; } }

/* ---------- Carousel ----------------------------------------------------
   Built on scroll-snap rather than a JS slider. The browser handles the
   physics, so touch swipe, trackpad, keyboard and momentum all work for free
   and it still works if the JS fails to load. The buttons and dots just call
   scrollTo. */
.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  position: relative;
  flex: 0 0 auto;
  width: min(620px, 78%);
  aspect-ratio: 16 / 10;
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(420px 300px at 66% 14%, rgba(255, 255, 255, 0.08), transparent 66%),
    linear-gradient(150deg, #101010, #050505);
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.55;
  transform: scale(1.02);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The centred slide comes forward; its neighbours sit back. Gives the strip
   depth without any 3D. */
.carousel-slide.is-active img { opacity: 1; transform: scale(1); }

.carousel-slide figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.carousel-slide.is-active figcaption { opacity: 1; }

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
}
.carousel-btns { display: flex; gap: 10px; }
.carousel-btn {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.carousel-btn:hover { background: var(--accent-soft); border-color: var(--ink); }
.carousel-btn:active { transform: scale(0.94); }
.carousel-btn:disabled { opacity: 0.32; cursor: default; }
.carousel-btn svg { width: 18px; height: 18px; }

.carousel-dots { display: flex; gap: 8px; align-items: center; }
.carousel-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.carousel-dot.is-active { background: var(--ink); width: 22px; border-radius: 100px; }

@media (max-width: 700px) {
  .carousel-slide { width: 86%; aspect-ratio: 4 / 3; }
  .carousel-nav { justify-content: center; flex-direction: column-reverse; }
}

/* ---------- Studio gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
}
.gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-raise);
}
.gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery figure:hover img { transform: scale(1.06); }

/* Two feature tiles carry the layout; the rest fill in around them. */
.gallery .g-wide { grid-column: span 2; grid-row: span 2; }
.gallery .g-tall { grid-row: span 2; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery .g-wide { grid-column: span 2; grid-row: span 2; }
  .gallery .g-tall { grid-row: span 1; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .gallery .g-wide, .gallery .g-tall { grid-column: span 1; grid-row: span 1; }
}
.visual-label {
  position: absolute;
  left: 18px; bottom: 18px;
  padding: 9px 15px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  font-size: 0.76rem;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}

/* ---------- Checklist ---------- */
.checks { display: grid; gap: 13px; margin: 26px 0 0; }
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.checks li::before {
  content: '';
  width: 20px; height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 11px;
  background-repeat: no-repeat;
}
.checks li b { color: var(--ink); font-weight: 600; }

/* ---------- Process ---------- */
.steps { counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--line); }
.step {
  counter-increment: s;
  display: grid;
  gap: 8px 30px;
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease);
}
@media (min-width: 860px) {
  .step { grid-template-columns: 90px minmax(0, 0.9fr) minmax(0, 1.15fr); align-items: baseline; }
  .step:hover { padding-left: 16px; }
}
.step-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.04em;
  color: var(--ink-mute);
  transition: color 0.4s;
}
.step:hover .step-n { color: var(--accent); }
.step-n::before { content: '0' counter(s); }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Pricing ---------- */
.price-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #101010, #060606);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s;
}
.price-card:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: 0 34px 66px -38px rgba(255, 255, 255, 0.22); }

/* Feature plan = inverted white panel */
.price-card.feature {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-ink);
}
.price-card.feature .price-name { color: var(--invert-mute); }
.price-card.feature .price-old { color: var(--invert-mute); }
.price-card.feature p { color: var(--invert-soft); }
.price-card.feature .price-card-list li { color: var(--invert-soft); }
.price-card.feature .price-card-list li::before {
  background-color: rgba(10, 10, 10, 0.07);
  border-color: var(--invert-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.price-badge {
  align-self: flex-start;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--gradient);
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.price-name { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.price-amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.05rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin: 10px 0 2px;
}
.price-old { text-decoration: line-through; color: var(--ink-mute); font-size: 1rem; }

/* The billing period rides alongside the number rather than under it, so the
   eye reads "₹80,000/month" as one price instead of two lines of data. Kept
   small and muted so it never competes with the figure itself. */
.price-per {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-mute);
  margin-left: 4px;
}
.price-card.feature .price-per { color: var(--invert-mute); }
.price-card-list { display: grid; gap: 11px; margin: 24px 0 28px; font-size: 0.92rem; color: var(--ink-soft); }
.price-card-list li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; }
.price-card-list li::before {
  content: '';
  width: 17px; height: 17px; margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 10px;
  background-repeat: no-repeat;
}
.price-card .btn { margin-top: auto; }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.acc-q:hover, .acc-item.open .acc-q { color: var(--accent); }
.acc-ic {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  position: relative;
  color: var(--ink);
  transition: background 0.4s, border-color 0.4s, transform 0.5s var(--ease), color 0.4s;
}
.acc-ic::before, .acc-ic::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.3s;
}
.acc-ic::before { width: 11px; height: 1.5px; }
.acc-ic::after  { width: 1.5px; height: 11px; }
.acc-item.open .acc-ic { background: var(--gradient); border-color: transparent; color: var(--accent-ink); transform: rotate(90deg); }
.acc-item.open .acc-ic::after { opacity: 0; }
.acc-a { overflow: hidden; height: 0; transition: height 0.5s var(--ease); }
.acc-a p { margin: 0 0 24px; color: var(--ink-soft); font-size: 0.96rem; max-width: 70ch; padding-right: 40px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid var(--line-strong);
  background: #131313;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field input::placeholder, .field textarea::placeholder { color: #8A8A8A; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #1A1A1A;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.field select option { background: #131313; color: var(--ink); }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.form-note { font-size: 0.82rem; color: var(--ink-mute); }
.form-status {
  display: none;
  padding: 14px 16px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--line-gold);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
}
.form-status.show { display: block; }

/* Failure needs to read as failure. The palette has no red, so the signal is
   a heavier border and a left rule — legible without relying on colour. */
.form-status.is-error {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-strong);
  border-left: 3px solid var(--ink);
  color: var(--ink-soft);
}

/* ---------- Contact rows ---------- */
.crow {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.crow:first-child { border-top: 1px solid var(--line); }
.crow .icon-badge { margin: 0; width: 44px; height: 44px; }
.crow h4 { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 5px; }
.crow p, .crow a { margin: 0; font-size: 1rem; color: var(--ink); display: block; }
.crow a { transition: opacity 0.3s; }
.crow a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- CTA band — inverted white panel ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--invert-bg);
  color: var(--invert-ink);
  padding: clamp(40px, 6vw, 82px) clamp(26px, 5vw, 72px);
  isolation: isolate;
}
.cta-band > .hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.85;
  filter: blur(3px);
  transform: scale(1.03);
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(250,250,250,0.9) 0%, rgba(250,250,250,0.6) 45%, rgba(250,250,250,0.2) 100%);
}
.cta-band > *:not(.hero-canvas) { position: relative; z-index: 2; }
.cta-band h2, .cta-band h3 { color: var(--invert-ink); }
.cta-band .lead { color: var(--invert-soft); }
.cta-band .eyebrow { color: var(--invert-ink); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-band .btn-ghost { color: var(--invert-ink); border-color: rgba(10, 10, 10, 0.28); background: transparent; }
.cta-band .btn-ghost::after { background: #0A0A0A; }
.cta-band .btn-ghost:hover { color: #FFFFFF; border-color: #0A0A0A; }

/* ---------- Footer ---------- */
.footer {
  background: #030303;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding-top: clamp(52px, 7vw, 88px);
  margin-top: clamp(52px, 7vw, 96px);
}
.footer-grid {
  display: grid;
  gap: 36px;
  padding-bottom: 48px;
}
@media (min-width: 880px) {
  .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 44px; }
}
.footer h5 {
  margin: 0 0 16px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.footer li + li { margin-top: 10px; }
.footer a { font-size: 0.92rem; transition: color 0.3s; }
.footer a:hover { color: var(--accent); }
.footer p { font-size: 0.92rem; line-height: 1.7; max-width: 40ch; color: var(--ink-soft); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: var(--ink-mute);
}
.social { display: flex; gap: 9px; }
.social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.35s var(--ease);
}
.social a:hover { background: var(--gradient); border-color: transparent; color: var(--accent-ink); transform: translateY(-2px); }
.social svg { width: 15px; height: 15px; }

/* ---------- Reveal animations ---------- */
[data-rise] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-rise].in { opacity: 1; transform: none; }

[data-clip] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-clip].in { clip-path: inset(0 0 0 0); }

.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease);
  transition-delay: var(--d, 0s);
}
.in .word, .word.in { transform: none; }

.tilt-wrap { perspective: 1000px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-rise], [data-clip], .word { opacity: 1; transform: none; clip-path: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 44px; }
.mb-2 { margin-bottom: 20px; }
.center { text-align: center; }
.max-60 { max-width: 60ch; }
.flex-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bg-alt { background: linear-gradient(180deg, #040404, #0B0B0B, #040404); }
.bg-deep { background: linear-gradient(180deg, #000000, #080808); }

/* ==========================================================================
   3D SECTION BACKDROPS
   Any section can carry a live scene behind its content.
   <section class="section section-fx">
     <div class="fx" data-scene="knot" data-theme="light"></div>
     ...
   ========================================================================== */
.section-fx { overflow: hidden; isolation: isolate; }
.section-fx > .fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(1px);
}
.section-fx > .fx canvas { display: block; width: 100%; height: 100%; }
.section-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0) 85%),
    linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,0.85) 100%);
}
.section-fx > .shell { position: relative; z-index: 2; }
/* Scene parked to one side so it frames rather than fights the copy */
.section-fx.fx-right > .fx { left: 42%; opacity: 0.7; }
.section-fx.fx-left  > .fx { right: 42%; opacity: 0.7; }
@media (max-width: 900px) {
  .section-fx.fx-right > .fx, .section-fx.fx-left > .fx { left: 0; right: 0; opacity: 0.4; }
}

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #6E6E6E, #FFFFFF);
  z-index: 120;
  pointer-events: none;
}

/* ---------- Sticky conversion bar ---------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 160%);
  z-index: 95;
  width: min(920px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 12px 12px 22px;
  border-radius: 100px;
  background: rgba(12, 12, 12, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  transition: transform 0.6s var(--ease), opacity 0.4s;
  opacity: 0;
}
.sticky-cta.show { transform: translate(-50%, 0); opacity: 1; }
.sticky-cta p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.sticky-cta b { color: var(--ink); font-weight: 600; display: block; font-size: 0.98rem; }
.sticky-cta .btn { flex: 0 0 auto; }
.sticky-close {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-mute);
  transition: color 0.3s, background 0.3s;
}
.sticky-close:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
@media (max-width: 720px) {
  .sticky-cta { padding: 10px 10px 10px 16px; gap: 10px; bottom: 12px; }
  .sticky-cta p { font-size: 0.8rem; }
  .sticky-cta b { font-size: 0.88rem; }
  .sticky-cta .btn { padding: 11px 16px; font-size: 0.8rem; }
  .sticky-cta .hide-sm { display: none; }
}

/* ---------- Trust chips ---------- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.badge-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.badge-row span::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- Problem / pain cards ---------- */
.pain {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #0C0C0C, #060606);
  transition: transform 0.5s var(--ease), border-color 0.4s;
}
.pain:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.pain .x {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  margin-bottom: 16px;
  position: relative;
}
.pain .x::before, .pain .x::after {
  content: '';
  position: absolute;
  width: 13px; height: 1.6px;
  background: var(--ink-soft);
  border-radius: 2px;
}
.pain .x::before { transform: rotate(45deg); }
.pain .x::after  { transform: rotate(-45deg); }
.pain h3 { font-size: 1.05rem; margin-bottom: 8px; }
.pain p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- With / without comparison ---------- */
.compare {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 860px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-col {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(170deg, #0A0A0A, #050505);
}
.compare-col.win {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-ink);
}
.compare-col h3 { margin-bottom: 6px; }
.compare-col > p.soft { margin: 0 0 22px; font-size: 0.9rem; }
.compare-col.win > p.soft { color: var(--invert-soft); }
.compare-list { display: grid; gap: 14px; }
.compare-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.compare-list li::before {
  content: '';
  width: 18px; height: 18px; margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.compare-col.win .compare-list li { color: var(--invert-soft); }
.compare-col.win .compare-list li::before {
  border-color: var(--invert-line);
  background-color: rgba(10,10,10,0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.compare-col.win .compare-list li b { color: var(--invert-ink); }

/* ---------- Testimonials ---------- */
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #101010, #070707);
  overflow: hidden;
  transition: transform 0.55s var(--ease), border-color 0.4s, box-shadow 0.55s var(--ease);
}
.quote:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: 0 34px 66px -38px rgba(255,255,255,0.22); }
.quote::before {
  content: '"';
  position: absolute;
  top: -26px; right: 14px;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.quote .stars {
  display: flex; gap: 3px;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 2px;
}
.quote blockquote {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.quote-result {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  margin-bottom: 18px;
  border-block: 1px solid var(--line);
}
.quote-result b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.quote-result span { font-size: 0.84rem; color: var(--ink-mute); }
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-av {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}
.quote-who p { margin: 0; font-size: 0.9rem; line-height: 1.35; }
.quote-who p b { display: block; font-weight: 600; color: var(--ink); }
.quote-who p span { color: var(--ink-mute); font-size: 0.84rem; }

/* Featured (inverted) testimonial */
.quote.feature {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-ink);
}
.quote.feature::before { color: rgba(10, 10, 10, 0.07); }
.quote.feature .stars { color: #0A0A0A; }
.quote.feature blockquote { color: var(--invert-ink); }
.quote.feature .quote-result { border-color: var(--invert-line); }
.quote.feature .quote-result span { color: var(--invert-mute); }
.quote.feature .quote-av { background: #0A0A0A; color: #FFFFFF; }
.quote.feature .quote-who p b { color: var(--invert-ink); }
.quote.feature .quote-who p span { color: var(--invert-mute); }

/* ---------- Results grid ---------- */
.result {
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #0C0C0C, #060606);
  transition: transform 0.5s var(--ease), border-color 0.4s;
}
.result:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.result b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin-bottom: 10px;
}
.result p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Offer / lead-capture panel ---------- */
.offer {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, #121212, #060606 60%, #0C0C0C);
  padding: clamp(28px, 4.5vw, 60px);
  isolation: isolate;
}
.offer > .fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.offer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(80% 70% at 30% 40%, rgba(0,0,0,0.72), rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 90%);
}
.offer > *:not(.fx) { position: relative; z-index: 2; }
.offer-grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 940px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: start; }
}
.offer-form {
  background: var(--invert-bg);
  color: var(--invert-ink);
  border-radius: var(--radius);
  padding: clamp(22px, 2.8vw, 32px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.offer-form h3 { color: var(--invert-ink); margin-bottom: 4px; }
.offer-form > p { margin: 0 0 20px; font-size: 0.88rem; color: var(--invert-soft); }
.offer-form .field label { color: var(--invert-mute); }
.offer-form .field input,
.offer-form .field select,
.offer-form .field textarea {
  background: #FFFFFF;
  border-color: rgba(10, 10, 10, 0.18);
  color: var(--invert-ink);
}
.offer-form .field input::placeholder,
.offer-form .field textarea::placeholder { color: #9A9A9A; }
.offer-form .field input:focus,
.offer-form .field select:focus,
.offer-form .field textarea:focus {
  border-color: #0A0A0A;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.10);
}
.offer-form .field select option { background: #FFFFFF; color: var(--invert-ink); }
.offer-form .btn { background: #0A0A0A; color: #FFFFFF; }
.offer-form .btn::after { background: #262626; }
.offer-form .btn:hover { color: #FFFFFF; box-shadow: 0 16px 38px -18px rgba(0,0,0,0.8); }
.offer-form .form-note { color: var(--invert-mute); }
.offer-form .form-status {
  background: rgba(10, 10, 10, 0.06);
  border-color: var(--invert-line);
  color: var(--invert-ink);
}
.offer-list { display: grid; gap: 14px; margin: 26px 0 0; }
.offer-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.offer-list li::before {
  content: '';
  width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.offer-list li b { color: var(--ink); font-weight: 600; }

/* ---------- Deeper card depth on hover ---------- */
.tilt-wrap .card,
.tilt-wrap .quote { will-change: transform; }
.card > *, .quote > * { transform: translateZ(0.01px); }

/* ==========================================================================
   ANALYTICS PANEL
   A Shopify-style dashboard, rebuilt monochrome. Markup is generated by
   assets/js/dashboard.js from a single <div class="dash" data-dash></div>.
   ========================================================================== */
.dash {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #0E0E0E, #060606);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(255, 255, 255, 0.18);
}

/* ---------- KPI tabs ---------- */
.dash-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .dash-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dash-tab {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px clamp(14px, 1.8vw, 22px);
  background: #0A0A0A;
  transition: background 0.35s var(--ease-soft);
}
.dash-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}
.dash-tab:hover { background: #101010; }
.dash-tab.is-active { background: #131313; }
.dash-tab.is-active::after { transform: scaleX(1); }

.dash-tab-label {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.dash-tab.is-active .dash-tab-label { color: var(--ink-soft); }

.dash-tab-row { display: flex; align-items: center; gap: 10px; }

.dash-tab-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-spark {
  width: 54px;
  height: 22px;
  flex: 0 0 auto;
  overflow: visible;
}
.dash-spark path {
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* --len is measured from the real path by dashboard.js */
  stroke-dasharray: var(--len, 120);
  stroke-dashoffset: var(--len, 120);
  transition: stroke-dashoffset 1.2s var(--ease) 0.15s, stroke 0.35s;
}
.dash.is-drawn .dash-spark path { stroke-dashoffset: 0; }
.dash-tab.is-active .dash-spark path { stroke: var(--accent); }
@media (max-width: 520px) { .dash-spark { display: none; } }

.dash-delta {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dash-delta.up { background: var(--accent-soft); border-color: var(--line-gold); color: var(--accent); }

/* ---------- Chart body ---------- */
.dash-body { padding: clamp(20px, 2.6vw, 30px); }

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 6px;
}
.dash-title {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--line-strong);
  padding-bottom: 2px;
  margin: 0;
}
.dash-total {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}
.dash-total-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.dash-plot {
  position: relative;
  margin-top: 16px;
}
.dash-chart {
  display: block;
  width: 100%;
  height: clamp(230px, 30vw, 330px);
  overflow: visible;
}

/* gridlines + axis text */
.dash-grid line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.dash-axis text {
  fill: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* the two series */
.dash-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1600);
  stroke-dashoffset: var(--len, 1600);
  transition: stroke-dashoffset 1.8s var(--ease) 0.1s;
}
.dash.is-drawn .dash-line { stroke-dashoffset: 0; }
.dash-line.is-cur { stroke: var(--accent); stroke-width: 2.6; }
.dash-line.is-prev {
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.8;
  /* the previous period is a dotted reference line, revealed by fade not draw */
  stroke-dasharray: 7 7 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.9s;
}
.dash.is-drawn .dash-line.is-prev { opacity: 1; }

.dash-area {
  /* fill is set inline to a per-instance gradient id by dashboard.js */
  opacity: 0;
  transition: opacity 1s var(--ease) 0.7s;
}
.dash.is-drawn .dash-area { opacity: 1; }

.dash-dot {
  fill: #000000;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(0.9s + var(--i) * 0.045s);
}
.dash.is-drawn .dash-dot { opacity: 1; transform: scale(1); }

/* hover readout */
.dash-hover { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-dasharray: 3 4; }
.dash-hover-dot { fill: var(--accent); opacity: 0; transition: opacity 0.2s; }
.dash-plot.is-hover .dash-hover-dot { opacity: 1; }

.dash-tip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 16px));
  pointer-events: none;
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.94);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  font-size: 0.82rem;
  line-height: 1.45;
}
.dash-tip b { display: block; color: var(--accent); font-weight: 600; margin-bottom: 2px; }
.dash-tip span { display: block; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dash-tip span.is-prev { color: var(--ink-mute); }

/* legend */
.dash-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.dash-legend span { display: inline-flex; align-items: center; gap: 9px; }
.dash-legend span::before {
  content: '';
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.dash-legend span.is-prev { color: var(--ink-mute); }
.dash-legend span.is-prev::before {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 5px, transparent 5px 10px);
}

.dash-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--ink-mute);
}

@media (prefers-reduced-motion: reduce) {
  .dash-line, .dash-area, .dash-dot, .dash-spark path {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   GOOGLE BUSINESS PROFILE
   Map embed + the details Google shows, so the studio page carries the same
   trust signals as the listing itself.
   ========================================================================== */
.gmb {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  align-items: stretch;
}
@media (min-width: 940px) { .gmb { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.gmb-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 320px;
  background: #0D0D0D;
}
.gmb-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  /* Google's embed is light; tone it down so it sits in a dark page without
     glaring, and restore it on hover when someone actually wants to read it. */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.35) contrast(0.92);
  transition: filter 0.5s var(--ease);
}
.gmb-map:hover iframe { filter: none; }

.gmb-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #101010, #070707);
}
.gmb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.gmb-brand svg { width: 22px; height: 22px; flex: 0 0 auto; }
.gmb-brand span {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.gmb-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  letter-spacing: -0.035em;
  margin: 0 0 6px;
}
.gmb-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.gmb-rating b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.gmb-stars { color: var(--accent); letter-spacing: 2px; font-size: 0.95rem; }

.gmb-rows { display: grid; gap: 0; margin: 0 0 24px; }
.gmb-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.gmb-row:first-child { border-top: 1px solid var(--line); }
.gmb-row svg { width: 17px; height: 17px; margin-top: 3px; color: var(--accent); }
.gmb-row a { color: var(--ink); }
.gmb-row a:hover { color: var(--accent); }
.gmb-row b { display: block; color: var(--ink); font-weight: 600; }
.gmb-open { color: var(--accent); font-weight: 600; }

.gmb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

/* ---------- Anchor offset for the fixed nav ---------- */
[id] { scroll-margin-top: 96px; }

/* ---------- Scene fallback ----------------------------------------------
   If Three.js never loads, or the device has no WebGL, a [data-scene] div is
   an empty box and the section reads as a hole in the page. This paints a
   slow monochrome aurora in its place. The engine adds .scene-ready the
   moment a real canvas is attached, which switches the fallback off — so in
   the normal case this is never seen. */
[data-scene] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.visual > [data-scene] { position: absolute; }

[data-scene]::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 44% at 32% 34%, rgba(255, 255, 255, 0.20), transparent 62%),
    radial-gradient(30% 38% at 70% 62%, rgba(255, 255, 255, 0.13), transparent 66%),
    radial-gradient(46% 40% at 52% 88%, rgba(255, 255, 255, 0.08), transparent 70%);
  filter: blur(28px);
  animation: sceneDrift 22s ease-in-out infinite alternate;
}
[data-scene][data-theme="dark"]::before {
  background:
    radial-gradient(38% 44% at 32% 34%, rgba(0, 0, 0, 0.22), transparent 62%),
    radial-gradient(30% 38% at 70% 62%, rgba(0, 0, 0, 0.14), transparent 66%);
}
[data-scene].scene-ready::before { display: none; }

@keyframes sceneDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: 0.85; }
  50%  { transform: translate3d(2%, 3%, 0)   scale(1.08); opacity: 1; }
  100% { transform: translate3d(4%, -3%, 0)  scale(1.03); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene]::before { animation: none; }
}