/* ═══════════════════════════════════════════════════
       DESIGN SYSTEM — exact copy from videonitch-index.html
       (nav, footer, buttons, typography, variables)
    ═══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #0d1117;
  --ink-soft: #1a2030;
  --navy: #0f1e3a;
  --teal: #0d7a6e;
  --teal-lit: #10937f;
  --teal-pale: #e6f4f1;
  --teal-mid: #c2e8e2;
  --sky: #3b82f6;
  --rule: #e2e8f0;
  --rule-dark: #1e2d45;
  --mid: #64748b;
  --muted: #94a3b8;
  --offwhite: #f8fafc;
  --cream: #f1f5f9;
  --white: #ffffff;
  --amber: #f59e0b;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --nav-h: 68px;
  --max: 1160px;
  --r: 8px;
  --r-lg: 14px;
}

html { scroll-behavior: smooth; }

body {
      font-family: var(--font-sans);
      font-weight: 400;
      background: var(--white);
      color: var(--ink-soft);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

img { display: block; max-width: 100%; height: auto; }

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

/* ─── NAV (identical to homepage) ───────────────────── */

.nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--rule);
      height: var(--nav-h);
    }

.nav__inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 2rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }

.nav__logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-shrink: 0;
    }

.nav__logo img { height: 34px; width: auto; }

.nav__links {
      display: flex;
      align-items: center;
      gap: 0.1rem;
      list-style: none;
    }

.nav__links a {
      display: block;
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--mid);
      padding: 0.5rem 0.9rem;
      border-radius: 6px;
      transition: color 0.15s, background 0.15s;
      white-space: nowrap;
    }

.nav__links a:hover,
    .nav__links a.active {
      color: var(--navy);
      background: var(--cream);
    }

body[data-page="about"] .nav__links a.active { color: var(--teal); font-weight: 600; }

body[data-page="clients"] .nav__links a.active, body[data-page="contact"] .nav__links a.active, body[data-page="demo"] .nav__links a.active, body[data-page="solutions"] .nav__links a.active, body[data-page="videos"] .nav__links a.active { color: var(--teal); font-weight: 600; background: var(--teal-pale); }

.nav__demo {
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--white);
      background: var(--teal);
      padding: 0.55rem 1.3rem;
      border-radius: 6px;
      white-space: nowrap;
      transition: background 0.2s, transform 0.15s;
      flex-shrink: 0;
    }

.nav__demo:hover {
      background: var(--teal-lit);
      transform: translateY(-1px);
    }

.nav__toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      flex-direction: column;
      gap: 5px;
    }

.nav__toggle span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--ink-soft);
      transition: transform 0.25s, opacity 0.25s;
    }

.nav__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }

.nav__toggle.open span:nth-child(2) { opacity: 0; }

.nav__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

body[data-page="about"] .nav__mobile, body[data-page="clients"] .nav__mobile, body[data-page="contact"] .nav__mobile, body[data-page="demo"] .nav__mobile, body[data-page="privacy"] .nav__mobile, body[data-page="solutions"] .nav__mobile, body[data-page="videos"] .nav__mobile {
      display: none;
      flex-direction: column;
      background: var(--white);
      border-top: 1px solid var(--rule);
      padding: 1rem 2rem 2rem;
    }

body[data-page="index"] .nav__mobile {
      display: none;
      flex-direction: column;
      background: var(--white);
      border-top: 1px solid var(--rule);
      padding: 1rem 2rem 2rem;
      gap: 0;
    }

body[data-page="about"] .nav__mobile.open, body[data-page="clients"] .nav__mobile.open, body[data-page="contact"] .nav__mobile.open, body[data-page="demo"] .nav__mobile.open, body[data-page="index"] .nav__mobile.open, body[data-page="privacy"] .nav__mobile.open, body[data-page="solutions"] .nav__mobile.open, body[data-page="videos"] .nav__mobile.open { display: flex; }

.nav__mobile a {
      padding: 0.65rem 0;
      font-size: 0.9rem;
      color: var(--mid);
      border-bottom: 1px solid var(--rule);
      transition: color 0.15s;
    }

.nav__mobile a:hover { color: var(--navy); }

/* ─── SHARED BUTTONS ─────────────────────────────────── */

.btn-teal {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--white);
      background: var(--teal);
      padding: 0.85rem 1.8rem;
      border-radius: var(--r);
      transition: background 0.2s, transform 0.15s;
    }

.btn-teal:hover {
      background: var(--teal-lit);
      transform: translateY(-1px);
    }

/* ─── SHARED TYPOGRAPHY HELPERS ─────────────────────── */

.pill-label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal);
      background: var(--teal-pale);
      padding: 0.35rem 0.9rem;
      border-radius: 100px;
      margin-bottom: 1.25rem;
    }

/* ─── PAGE HERO (dark — matches homepage hero style) ─ */

body[data-page="about"] .page-hero, body[data-page="clients"] .page-hero, body[data-page="contact"] .page-hero, body[data-page="solutions"] .page-hero, body[data-page="videos"] .page-hero {
      background: var(--navy);
      padding: 5rem 2rem 4.5rem;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

body[data-page="demo"] .page-hero {
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }

body[data-page="privacy"] .page-hero {
      background: var(--navy);
      padding: 4.5rem 2rem 4rem;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

body[data-page="about"] .page-hero::before, body[data-page="clients"] .page-hero::before, body[data-page="contact"] .page-hero::before, body[data-page="solutions"] .page-hero::before, body[data-page="videos"] .page-hero::before {
      content: '';
      position: absolute;
      top: -40%;
      left: -10%;
      width: 70%;
      height: 180%;
      background: radial-gradient(ellipse at center, rgba(13,122,110,0.2) 0%, transparent 65%);
      pointer-events: none;
    }

body[data-page="demo"] .page-hero::before {
      content: '';
      position: absolute;
      top: -40%; left: -10%;
      width: 70%; height: 180%;
      background: radial-gradient(ellipse at center, rgba(13,122,110,0.22) 0%, transparent 65%);
      pointer-events: none;
    }

body[data-page="privacy"] .page-hero::before {
      content: '';
      position: absolute;
      top: -40%; left: -10%;
      width: 70%; height: 180%;
      background: radial-gradient(ellipse at center, rgba(13,122,110,0.18) 0%, transparent 65%);
      pointer-events: none;
    }

body[data-page="about"] .page-hero::after, body[data-page="clients"] .page-hero::after, body[data-page="contact"] .page-hero::after, body[data-page="solutions"] .page-hero::after, body[data-page="videos"] .page-hero::after {
      content: '';
      position: absolute;
      top: 20%;
      right: -5%;
      width: 50%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(59,130,246,0.06) 0%, transparent 65%);
      pointer-events: none;
    }

body[data-page="demo"] .page-hero::after {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 45%; height: 100%;
      background: radial-gradient(ellipse at top right, rgba(59,130,246,0.07) 0%, transparent 65%);
      pointer-events: none;
    }

body[data-page="about"] .page-hero__inner, body[data-page="solutions"] .page-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 720px;
      margin: 0 auto;
    }

body[data-page="clients"] .page-hero__inner, body[data-page="contact"] .page-hero__inner, body[data-page="videos"] .page-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 680px;
      margin: 0 auto;
    }

body[data-page="demo"] .page-hero__inner {
      position: relative;
      z-index: 1;
      max-width: var(--max);
      margin: 0 auto;
      padding: 5.5rem 2rem 5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

body[data-page="privacy"] .page-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 600px;
      margin: 0 auto;
    }

body[data-page="about"] .page-hero__eyebrow, body[data-page="clients"] .page-hero__eyebrow, body[data-page="contact"] .page-hero__eyebrow, body[data-page="demo"] .page-hero__eyebrow, body[data-page="solutions"] .page-hero__eyebrow, body[data-page="videos"] .page-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-lit);
      background: rgba(13,122,110,0.15);
      border: 1px solid rgba(13,122,110,0.25);
      padding: 0.35rem 0.85rem;
      border-radius: 100px;
      margin-bottom: 1.5rem;
    }

body[data-page="privacy"] .page-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-lit);
      background: rgba(13,122,110,0.15);
      border: 1px solid rgba(13,122,110,0.25);
      padding: 0.35rem 0.85rem;
      border-radius: 100px;
      margin-bottom: 1.4rem;
    }

body[data-page="about"] .page-hero__eyebrow::before, body[data-page="clients"] .page-hero__eyebrow::before, body[data-page="contact"] .page-hero__eyebrow::before, body[data-page="demo"] .page-hero__eyebrow::before, body[data-page="privacy"] .page-hero__eyebrow::before, body[data-page="solutions"] .page-hero__eyebrow::before, body[data-page="videos"] .page-hero__eyebrow::before {
      content: '';
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--teal-lit);
    }

body[data-page="about"] .page-hero__h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 400;
      line-height: 1.15;
      color: var(--white);
      margin-bottom: 1.25rem;
      letter-spacing: -0.01em;
    }

body[data-page="clients"] .page-hero__h1 {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      font-weight: 400;
      line-height: 1.15;
      color: var(--white);
      margin-bottom: 1.25rem;
      letter-spacing: -0.01em;
    }

body[data-page="contact"] .page-hero__h1, body[data-page="videos"] .page-hero__h1 {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      font-weight: 400;
      line-height: 1.15;
      color: var(--white);
      margin-bottom: 1.25rem;
    }

body[data-page="demo"] .page-hero__h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.2rem, 4vw, 3.6rem);
      font-weight: 400;
      line-height: 1.12;
      color: var(--white);
      margin-bottom: 1.25rem;
      letter-spacing: -0.01em;
    }

body[data-page="privacy"] .page-hero__h1 {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 400;
      line-height: 1.15;
      color: var(--white);
      margin-bottom: 1rem;
    }

body[data-page="solutions"] .page-hero__h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 400;
      line-height: 1.12;
      color: var(--white);
      margin-bottom: 1.25rem;
    }

.page-hero__h1 em {
      font-style: italic;
      color: var(--teal-lit);
    }

body[data-page="about"] .page-hero__sub {
      font-size: 1rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.85;
      max-width: 560px;
      margin: 0 auto 2rem;
    }

body[data-page="clients"] .page-hero__sub, body[data-page="contact"] .page-hero__sub, body[data-page="videos"] .page-hero__sub {
      font-size: 1rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.85;
      max-width: 520px;
      margin: 0 auto;
    }

body[data-page="demo"] .page-hero__sub {
      font-size: 1rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.85;
      margin-bottom: 2rem;
      max-width: 460px;
    }

body[data-page="solutions"] .page-hero__sub {
      font-size: 1rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.85;
      max-width: 580px;
      margin: 0 auto 2.5rem;
    }

/* ─── STAT ROW ───────────────────────────────────────── */

.stats {
      background: var(--ink-soft);
      border-bottom: 1px solid var(--rule-dark);
    }

.stats__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

.stat {
      padding: 1.75rem 1.5rem;
      border-right: 1px solid var(--rule-dark);
      text-align: center;
    }

.stat:last-child { border-right: none; }

.stat__num {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      font-weight: 400;
      font-style: italic;
      color: var(--teal-lit);
      line-height: 1;
      margin-bottom: 0.3rem;
    }

.stat__label {
      font-size: 0.78rem;
      font-weight: 400;
      color: var(--muted);
    }

/* ─── ABOUT INTRO ────────────────────────────────────── */

.about-intro {
      padding: 6rem 2rem;
      background: var(--white);
    }

.about-intro__inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

body[data-page="about"] .section-h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.4rem;
    }

body[data-page="clients"] .section-h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1rem;
    }

body[data-page="contact"] .section-h2, body[data-page="solutions"] .section-h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.25rem;
    }

.section-h2 em { font-style: italic; color: var(--teal); }

body[data-page="about"] .body-text {
      font-size: 1rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1.1rem;
    }

body[data-page="contact"] .body-text, body[data-page="solutions"] .body-text {
      font-size: 0.97rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

/* ─── STORY SECTIONS (alternating) ──────────────────── */

.story {
      padding: 6rem 2rem;
    }

.story--light { background: var(--white); }

.story--dark { background: var(--navy); }

.story--off { background: var(--offwhite); }

.story__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

/* Dark section text overrides */

body[data-page="about"] .story--dark .story__tag { color: var(--teal-lit); }

body[data-page="about"] .story--dark .story__tag {
      background: rgba(13,122,110,0.18);
      border: 1px solid rgba(13,122,110,0.28);
    }

.story--dark .story__h2 { color: var(--white); }

.story--dark .story__text { color: var(--muted); }

.story__tag {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal);
      background: var(--teal-pale);
      padding: 0.3rem 0.8rem;
      border-radius: 100px;
      margin-bottom: 1.1rem;
    }

.story__h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.7rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.25rem;
    }

.story__h2 em { font-style: italic; color: var(--teal); }

.story--dark .story__h2 em { color: var(--teal-lit); }

.story__text {
      font-size: 0.97rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

.story__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 4/3;
      object-fit: cover;
    }

.story--dark .story__img img {
      border: 1px solid rgba(255,255,255,0.07);
    }

/* ─── VALUES STRIP ───────────────────────────────────── */

.values {
      padding: 5rem 2rem;
      background: var(--teal-pale);
      border-top: 1px solid var(--teal-mid);
      border-bottom: 1px solid var(--teal-mid);
    }

.values__inner {
      max-width: var(--max);
      margin: 0 auto;
    }

.values__header {
      text-align: center;
      margin-bottom: 3rem;
    }

.values__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

.value-card {
      background: var(--white);
      border: 1px solid var(--teal-mid);
      border-radius: var(--r-lg);
      padding: 1.75rem 1.75rem 2rem;
      transition: box-shadow 0.25s, transform 0.2s;
    }

.value-card:hover {
      box-shadow: 0 10px 32px rgba(13,122,110,0.1);
      transform: translateY(-3px);
    }

.value-card__icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: var(--teal-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.1rem;
    }

.value-card__icon svg {
      width: 20px; height: 20px;
      stroke: var(--teal);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.value-card__title {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 0.6rem;
    }

.value-card__text {
      font-size: 0.87rem;
      color: var(--mid);
      line-height: 1.75;
    }

/* ─── CTA BAND (matches homepage) ────────────────────── */

.ctaband {
      background: linear-gradient(135deg, var(--navy) 0%, #0a3020 100%);
      padding: 5rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

.ctaband::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(13,122,110,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,122,110,0.07) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
    }

.ctaband__inner {
      position: relative;
      z-index: 1;
      max-width: 680px;
      margin: 0 auto;
    }

.ctaband__heading {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 400;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 1rem;
    }

.ctaband__heading em { font-style: italic; color: var(--teal-lit); }

.ctaband__sub {
      font-size: 0.95rem;
      color: var(--muted);
      margin-bottom: 2.5rem;
      line-height: 1.8;
    }

/* ─── FOOTER (identical to homepage) ─────────────────── */

footer {
      background: var(--ink);
      padding: 4rem 2rem 2rem;
    }

.footer__inner { max-width: var(--max); margin: 0 auto; }

.footer__grid {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr;
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid var(--rule-dark);
    }

.footer__brand {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: -0.02em;
      margin-bottom: 0.5rem;
    }

.footer__brand span { color: var(--teal-lit); }

body[data-page="about"] .footer__tagline, body[data-page="clients"] .footer__tagline, body[data-page="contact"] .footer__tagline, body[data-page="demo"] .footer__tagline, body[data-page="privacy"] .footer__tagline, body[data-page="solutions"] .footer__tagline, body[data-page="videos"] .footer__tagline {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 1rem;
      max-width: 280px;
    }

body[data-page="index"] .footer__tagline {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 1.25rem;
      max-width: 280px;
    }

.footer__contact {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 2.1;
    }

.footer__contact a { color: var(--muted); transition: color 0.2s; }

.footer__contact a:hover { color: var(--teal-lit); }

.footer__col-title {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-lit);
      margin-bottom: 1.2rem;
    }

.footer__links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

.footer__links a {
      font-size: 0.84rem;
      color: var(--muted);
      transition: color 0.2s;
    }

.footer__links a:hover { color: var(--white); }

.footer__bottom {
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

.footer__copy { font-size: 0.78rem; color: var(--mid); }

.footer__legal { display: flex; gap: 1.5rem; }

.footer__legal a { font-size: 0.78rem; color: var(--mid); transition: color 0.2s; }

.footer__legal a:hover { color: var(--muted); }

/* ─── RESPONSIVE ─────────────────────────────────────── */

/* ─── FADE-IN ─────────────────────────────────────────── */

body[data-page="about"] .fade-up, body[data-page="clients"] .fade-up, body[data-page="contact"] .fade-up, body[data-page="demo"] .fade-up, body[data-page="index"] .fade-up, body[data-page="solutions"] .fade-up, body[data-page="videos"] .fade-up {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

body[data-page="privacy"] .fade-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

body[data-page="about"] .fade-up.visible, body[data-page="clients"] .fade-up.visible, body[data-page="contact"] .fade-up.visible, body[data-page="demo"] .fade-up.visible, body[data-page="index"] .fade-up.visible, body[data-page="privacy"] .fade-up.visible, body[data-page="solutions"] .fade-up.visible, body[data-page="videos"] .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

/* ═══════════════════════════════════════════════════
       DESIGN SYSTEM — identical to videonitch-index.html
    ═══════════════════════════════════════════════════ */

/* ─── NAV ────────────────────────────────────────────── */

.nav__links a:hover { color: var(--navy); background: var(--cream); }

/* ─── BUTTONS ────────────────────────────────────────── */

.btn-outline-teal {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--teal);
      border: 1.5px solid var(--teal);
      padding: 0.85rem 1.8rem;
      border-radius: var(--r);
      transition: background 0.2s, color 0.2s;
    }

.btn-outline-teal:hover { background: var(--teal); color: var(--white); }

/* ─── SHARED ─────────────────────────────────────────── */

/* ─── PAGE HERO ──────────────────────────────────────── */

/* ─── INTRO TEXT ─────────────────────────────────────── */

.clients-intro {
      padding: 5rem 2rem 3rem;
      background: var(--white);
      text-align: center;
    }

.clients-intro__inner {
      max-width: 680px;
      margin: 0 auto;
    }

/* ─── LOGO GRID ──────────────────────────────────────── */

.logo-section {
      padding: 2rem 2rem 5rem;
      background: var(--white);
    }

.logo-section__inner {
      max-width: var(--max);
      margin: 0 auto;
    }

.logo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }

/* Each logo tile */

body[data-page="clients"] .logo-tile {
      background: var(--offwhite);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      aspect-ratio: 16/9;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }

body[data-page="clients"] .logo-tile { transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, opacity 0.5s ease, transform 0.5s ease; opacity: 0; transform: translateY(16px); }

body[data-page="clients"] .logo-tile:hover {
      border-color: var(--teal-mid);
      background: var(--teal-pale);
      box-shadow: 0 6px 24px rgba(13,122,110,0.08);
    }

.logo-tile img {
      max-width: 100%;
      max-height: 80px;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: grayscale(30%);
      transition: filter 0.2s;
    }

.logo-tile:hover img { filter: grayscale(0%); }

/* ─── DIVIDER COUNT ──────────────────────────────────── */

.client-count {
      background: var(--ink-soft);
      padding: 3rem 2rem;
      text-align: center;
    }

.client-count__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--rule-dark);
      border: 1px solid var(--rule-dark);
      border-radius: var(--r-lg);
      overflow: hidden;
    }

.count-item {
      background: var(--ink-soft);
      padding: 2rem 1.5rem;
      text-align: center;
    }

.count-item__num {
      font-family: var(--font-serif);
      font-size: 2.8rem;
      font-weight: 400;
      font-style: italic;
      color: var(--teal-lit);
      line-height: 1;
      margin-bottom: 0.4rem;
    }

.count-item__label {
      font-size: 0.82rem;
      font-weight: 400;
      color: var(--muted);
      line-height: 1.5;
    }

/* ─── GET STARTED ────────────────────────────────────── */

.get-started {
      padding: 6rem 2rem;
      background: var(--offwhite);
    }

.get-started__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

.get-started__tag {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal);
      background: var(--teal-pale);
      padding: 0.3rem 0.8rem;
      border-radius: 100px;
      margin-bottom: 1.1rem;
    }

.get-started__h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.4rem;
    }

.get-started__h2 em { font-style: italic; color: var(--teal); }

.get-started__text {
      font-size: 0.97rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

.get-started__actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }

.get-started__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 3/2;
      object-fit: cover;
    }

/* ─── CTA BAND ───────────────────────────────────────── */

/* ─── FOOTER ─────────────────────────────────────────── */

/* Staggered delay for logo tiles */

body[data-page="clients"] .logo-tile.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════
       DESIGN SYSTEM — identical to videonitch site
    ═══════════════════════════════════════════════════ */

/* ─── CONTACT INTRO ──────────────────────────────────── */

.contact-intro {
      padding: 5rem 2rem 0;
      background: var(--white);
    }

.contact-intro__inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

/* ─── CONTACT DETAIL CARDS (info row) ────────────────── */

.contact-details {
      padding: 3rem 2rem;
      background: var(--white);
    }

.contact-details__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

.detail-card {
      background: var(--offwhite);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 1.5rem 1.75rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

.detail-card:hover {
      border-color: var(--teal-mid);
      box-shadow: 0 4px 20px rgba(13,122,110,0.07);
    }

.detail-card__icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--teal-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }

.detail-card__icon svg {
      width: 18px; height: 18px;
      stroke: var(--teal);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.detail-card__label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.3rem;
    }

.detail-card__value {
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--navy);
      line-height: 1.5;
    }

.detail-card__value a {
      color: var(--navy);
      transition: color 0.2s;
    }

.detail-card__value a:hover { color: var(--teal); }

/* ─── MAIN CONTACT LAYOUT ────────────────────────────── */

.contact-main {
      padding: 3rem 2rem 6rem;
      background: var(--white);
    }

.contact-main__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 3rem;
      align-items: start;
    }

/* ─── MAP ────────────────────────────────────────────── */

.map-wrap {
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--rule);
      box-shadow: 0 4px 24px rgba(15,30,58,0.06);
    }

.map-wrap iframe {
      display: block;
      width: 100%;
      height: 420px;
      border: 0;
    }

.map-address {
      padding: 1.25rem 1.5rem;
      background: var(--offwhite);
      border-top: 1px solid var(--rule);
    }

.map-address p {
      font-size: 0.85rem;
      color: var(--mid);
      line-height: 1.8;
    }

.map-address strong { color: var(--navy); font-weight: 600; }

/* ─── FORM WRAP ──────────────────────────────────────── */

.form-wrap {
      background: var(--offwhite);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 2rem;
      box-shadow: 0 4px 24px rgba(15,30,58,0.05);
    }

.form-wrap__heading {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 0.4rem;
    }

.form-wrap__heading em { font-style: italic; color: var(--teal); }

.form-wrap__sub {
      font-size: 0.84rem;
      color: var(--mid);
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--rule);
      line-height: 1.7;
    }

/* ─── PAGE HERO (full dark, action-oriented) ─────────── */

/* "No commitment" trust note */

.page-hero__trust {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.82rem;
      color: var(--muted);
    }

.page-hero__trust svg {
      width: 15px; height: 15px;
      stroke: var(--teal-lit);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

/* Form card in hero */

.hero-form {
      background: var(--white);
      border-radius: var(--r-lg);
      padding: 2.25rem 2rem;
      box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    }

.hero-form__heading {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 0.3rem;
    }

.hero-form__heading em { font-style: italic; color: var(--teal); }

.hero-form__sub {
      font-size: 0.82rem;
      color: var(--mid);
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--rule);
      line-height: 1.6;
    }

/* ─── WHAT TO EXPECT ─────────────────────────────────── */

.expect {
      padding: 6rem 2rem;
      background: var(--offwhite);
    }

.expect__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

.expect__h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }

.expect__h2 em { font-style: italic; color: var(--teal); }

/* Step list */

.expect__steps {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

.expect__step {
      display: flex;
      gap: 1.25rem;
      align-items: flex-start;
      padding: 1.25rem 0;
      border-bottom: 1px solid var(--rule);
    }

.expect__step:last-child { border-bottom: none; }

.expect__step-num {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--teal-pale);
      border: 1.5px solid var(--teal-mid);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 1rem;
      color: var(--teal);
      line-height: 1;
      margin-top: 2px;
    }

.expect__step-text {
      font-size: 0.94rem;
      color: var(--mid);
      line-height: 1.75;
      padding-top: 0.4rem;
    }

.expect__step-text strong {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 0.2rem;
    }

/* Visual block */

.expect__visual {
      position: relative;
    }

.expect__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 4/3;
      object-fit: cover;
    }

/* Floating "no commitment" badge */

.expect__badge {
      position: absolute;
      bottom: -1rem;
      right: -1rem;
      background: var(--white);
      border: 1px solid var(--teal-mid);
      border-radius: var(--r-lg);
      padding: 1rem 1.25rem;
      box-shadow: 0 8px 24px rgba(13,122,110,0.12);
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

.expect__badge-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: var(--teal-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

.expect__badge-icon svg {
      width: 18px; height: 18px;
      stroke: var(--teal);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.expect__badge-text strong {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--navy);
    }

.expect__badge-text span {
      font-size: 0.72rem;
      color: var(--mid);
    }

/* ─── TRUST STRIP ────────────────────────────────────── */

.truststrip {
      background: var(--ink-soft);
      border-top: 1px solid var(--rule-dark);
      border-bottom: 1px solid var(--rule-dark);
      padding: 2.5rem 2rem;
    }

.truststrip__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--rule-dark);
      border: 1px solid var(--rule-dark);
      border-radius: var(--r-lg);
      overflow: hidden;
    }

.trust-item {
      background: var(--ink-soft);
      padding: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.85rem;
    }

.trust-item__icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: rgba(13,122,110,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

.trust-item__icon svg {
      width: 17px; height: 17px;
      stroke: var(--teal-lit);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.trust-item__text strong {
      display: block;
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 1px;
    }

.trust-item__text span {
      font-size: 0.72rem;
      color: var(--muted);
    }

/* ─── RESET ──────────────────────────────────────────────── */

/* ─── NAV ────────────────────────────────────────────────── */

/* Mobile toggle */

/* ─── HERO ───────────────────────────────────────────────── */

.hero {
      background: var(--navy);
      overflow: hidden;
      position: relative;
    }

/* Radial glow behind hero content */

.hero::before {
      content: '';
      position: absolute;
      top: -40%;
      left: -10%;
      width: 70%;
      height: 180%;
      background: radial-gradient(ellipse at center, rgba(13,122,110,0.22) 0%, transparent 65%);
      pointer-events: none;
    }

.hero::after {
      content: '';
      position: absolute;
      top: 20%;
      right: -5%;
      width: 50%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(59,130,246,0.07) 0%, transparent 65%);
      pointer-events: none;
    }

.hero__inner {
      position: relative;
      z-index: 1;
      max-width: var(--max);
      margin: 0 auto;
      padding: 5.5rem 2rem 5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }

.hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-lit);
      background: rgba(13,122,110,0.15);
      border: 1px solid rgba(13,122,110,0.25);
      padding: 0.35rem 0.85rem;
      border-radius: 100px;
      margin-bottom: 1.5rem;
    }

.hero__eyebrow::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal-lit);
    }

.hero__h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.4rem, 4.5vw, 4rem);
      font-weight: 400;
      line-height: 1.1;
      color: var(--white);
      margin-bottom: 1.5rem;
      letter-spacing: -0.01em;
    }

.hero__h1 em {
      font-style: italic;
      color: var(--teal-lit);
    }

.hero__sub {
      font-size: 1rem;
      font-weight: 300;
      color: var(--muted);
      max-width: 460px;
      line-height: 1.85;
      margin-bottom: 2.5rem;
    }

.hero__actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
    }

.btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--muted);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 0.85rem 1.8rem;
      border-radius: var(--r);
      transition: color 0.2s, border-color 0.2s;
    }

.btn-ghost:hover {
      color: var(--white);
      border-color: rgba(255,255,255,0.3);
    }

/* Hero image with play overlay */

.hero__media {
      position: relative;
    }

.hero__media::before {
      content: '';
      position: absolute;
      inset: -8px;
      background: linear-gradient(135deg, rgba(13,122,110,0.3), rgba(59,130,246,0.15));
      border-radius: calc(var(--r-lg) + 8px);
      z-index: 0;
    }

.hero__media img {
      position: relative;
      z-index: 1;
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 16/10;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.08);
    }

/* ─── TRUST BAR ──────────────────────────────────────────── */

.trustbar {
      background: var(--offwhite);
      border-bottom: 1px solid var(--rule);
      padding: 1.25rem 2rem;
    }

.trustbar__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 2rem;
      flex-wrap: wrap;
      justify-content: center;
    }

.trustbar__label {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      flex-shrink: 0;
    }

.trustbar__items {
      display: flex;
      align-items: center;
      gap: 2rem;
      flex-wrap: wrap;
    }

.trustbar__item {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--mid);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

.trustbar__item svg {
      width: 15px;
      height: 15px;
      color: var(--teal);
      flex-shrink: 0;
    }

/* ─── INTRO ──────────────────────────────────────────────── */

body[data-page="index"] .intro {
      padding: 6rem 2rem;
      background: var(--white);
    }

body[data-page="solutions"] .intro {
      padding: 5.5rem 2rem;
      background: var(--white);
    }

body[data-page="index"] .intro__inner {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }

body[data-page="solutions"] .intro__inner {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }

.intro__heading {
      font-family: var(--font-serif);
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }

.intro__heading em { font-style: italic; color: var(--teal); }

.intro__text {
      font-size: 1rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

/* ─── CHANNEL SECTION ────────────────────────────────────── */

.channel {
      padding: 6rem 2rem;
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }

.channel::before {
      content: '';
      position: absolute;
      bottom: -20%;
      right: -10%;
      width: 50%;
      height: 120%;
      background: radial-gradient(ellipse, rgba(13,122,110,0.15) 0%, transparent 70%);
      pointer-events: none;
    }

.channel__inner {
      position: relative;
      z-index: 1;
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

.channel__tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal-lit);
      background: rgba(13,122,110,0.15);
      border: 1px solid rgba(13,122,110,0.25);
      padding: 0.35rem 0.85rem;
      border-radius: 100px;
      margin-bottom: 1.25rem;
    }

.channel__heading {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }

.channel__heading em { font-style: italic; color: var(--teal-lit); }

.channel__text {
      font-size: 0.95rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

.channel__features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 1.5rem;
    }

.channel__features li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: 0.9rem;
      color: var(--muted);
    }

.channel__features li::before {
      content: '';
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(13,122,110,0.25);
      border: 1px solid rgba(13,122,110,0.4);
      flex-shrink: 0;
      margin-top: 3px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2310937f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px;
    }

.channel__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 16/10;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.07);
    }

/* ─── BENEFITS ───────────────────────────────────────────── */

.benefits {
      padding: 6rem 2rem;
      background: var(--offwhite);
    }

.benefits__inner {
      max-width: var(--max);
      margin: 0 auto;
    }

.section-header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

.section-header__h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-top: 0.8rem;
    }

.section-header__sub {
      font-size: 0.95rem;
      color: var(--mid);
      max-width: 600px;
      margin: 1rem auto 0;
      line-height: 1.8;
    }

.benefits__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }

/* ─── BENEFIT CARD ───────────────────────────────────────── */

.bcard {
      background: var(--white);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    }

.bcard:hover {
      box-shadow: 0 12px 40px rgba(13,30,58,0.09);
      transform: translateY(-3px);
      border-color: var(--teal-mid);
    }

.bcard__img {
      width: 100%;
      aspect-ratio: 5/3;
      object-fit: cover;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

.bcard__body {
      padding: 1.5rem 1.6rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

.bcard__icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: var(--teal-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }

.bcard__icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--teal);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.bcard__title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 0.6rem;
      letter-spacing: -0.01em;
    }

.bcard__text {
      font-size: 0.86rem;
      color: var(--mid);
      line-height: 1.75;
      flex: 1;
    }

/* ─── REVOLUTION SECTION ─────────────────────────────────── */

.revolution {
      padding: 6rem 2rem;
      background: var(--white);
    }

.revolution__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

.revolution__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 16/9;
      object-fit: cover;
    }

.revolution__heading {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }

.revolution__heading em { font-style: italic; color: var(--teal); }

.revolution__text {
      font-size: 0.95rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

/* ─── GET STARTED ────────────────────────────────────────── */

.getstarted {
      padding: 6rem 2rem;
      background: var(--offwhite);
    }

.getstarted__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

.getstarted__heading {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }

.getstarted__text {
      font-size: 0.95rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

.getstarted__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 16/9;
      object-fit: cover;
    }

/* ─── CTA BAND ───────────────────────────────────────────── */

/* ─── FOOTER ─────────────────────────────────────────────── */

/* ─── RESPONSIVE ─────────────────────────────────────────── */

/* ─── FADE-IN ─────────────────────────────────────────────── */

.page-hero__meta {
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 0.5rem;
    }

/* ─── LAYOUT ─────────────────────────────────────────── */

.privacy-layout {
      padding: 5rem 2rem 6rem;
      background: var(--white);
    }

.privacy-layout__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 4rem;
      align-items: start;
    }

/* ─── STICKY SIDEBAR TOC ─────────────────────────────── */

.toc {
      position: sticky;
      top: calc(var(--nav-h) + 2rem);
    }

.toc__label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 1rem;
    }

.toc__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-left: 2px solid var(--teal-mid);
    }

.toc__list a {
      display: block;
      font-size: 0.82rem;
      color: var(--mid);
      padding: 0.45rem 1rem;
      border-left: 2px solid transparent;
      margin-left: -2px;
      transition: color 0.15s, border-color 0.15s;
      line-height: 1.4;
    }

.toc__list a:hover {
      color: var(--teal);
      border-left-color: var(--teal);
    }

/* ─── POLICY CONTENT ─────────────────────────────────── */

.policy {
      min-width: 0; /* prevent grid blowout */
    }

/* Section blocks */

.policy-section {
      padding-bottom: 2.5rem;
      margin-bottom: 2.5rem;
      border-bottom: 1px solid var(--rule);
    }

.policy-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

.policy-section__h2 {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

.policy-section__h2::before {
      content: '';
      display: block;
      width: 4px;
      height: 1.2em;
      background: var(--teal);
      border-radius: 2px;
      flex-shrink: 0;
    }

.policy-section p {
      font-size: 0.94rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

.policy-section p:last-child { margin-bottom: 0; }

/* Legal uppercase sections get a distinct treatment */

.policy-section--legal p {
      font-size: 0.82rem;
      color: var(--mid);
      line-height: 1.85;
      background: var(--offwhite);
      border: 1px solid var(--rule);
      border-radius: var(--r);
      padding: 1.25rem 1.5rem;
      margin-bottom: 1rem;
    }

.btn-ghost-dark {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.88rem;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.18);
      padding: 0.85rem 1.8rem;
      border-radius: var(--r);
      transition: color 0.2s, border-color 0.2s;
    }

.btn-ghost-dark:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }

/* ─── SHARED HELPERS ─────────────────────────────────── */

.pill-label--dark {
      color: var(--teal-lit);
      background: rgba(13,122,110,0.18);
      border: 1px solid rgba(13,122,110,0.28);
    }

/* Bullet list, reused across sections */

.feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 1.25rem;
    }

.feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: 0.93rem;
      line-height: 1.7;
    }

.feature-list li::before {
      content: '';
      display: block;
      width: 20px; height: 20px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 11px;
    }

/* Light version — teal checks on pale bg */

.feature-list--light li { color: var(--mid); }

.feature-list--light li::before {
      background-color: var(--teal-pale);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230d7a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E");
    }

/* Dark version — teal checks on dark bg */

.feature-list--dark li { color: var(--muted); }

.feature-list--dark li::before {
      background-color: rgba(13,122,110,0.22);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2310937f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E");
    }

.page-hero__actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

/* ─── INTRO ──────────────────────────────────────────── */

.body-text strong { color: var(--navy); font-weight: 600; }

/* ─── SOLUTION SECTIONS ──────────────────────────────── */

/* Dark alternating section */

.sol-dark {
      background: var(--navy);
      padding: 6rem 2rem;
      position: relative;
      overflow: hidden;
    }

.sol-dark::before {
      content: '';
      position: absolute;
      bottom: -20%; right: -10%;
      width: 50%; height: 120%;
      background: radial-gradient(ellipse, rgba(13,122,110,0.14) 0%, transparent 70%);
      pointer-events: none;
    }

.sol-dark__inner {
      position: relative;
      z-index: 1;
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

.sol-dark__h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--white);
      line-height: 1.2;
      margin-bottom: 1.1rem;
    }

.sol-dark__h2 em { font-style: italic; color: var(--teal-lit); }

.sol-dark__text {
      font-size: 0.97rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

.sol-dark__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 4/3;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.07);
    }

/* Light section */

.sol-light {
      background: var(--white);
      padding: 6rem 2rem;
    }

.sol-light__inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

.sol-light__h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 1.1rem;
    }

.sol-light__h2 em { font-style: italic; color: var(--teal); }

.sol-light__text {
      font-size: 0.97rem;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 1rem;
    }

.sol-light__img img {
      width: 100%;
      border-radius: var(--r-lg);
      aspect-ratio: 4/3;
      object-fit: cover;
    }

/* ─── VIDEO SECTION ──────────────────────────────────── */

.video-section {
      padding: 5rem 2rem 6rem;
      background: var(--white);
    }

.video-section__inner {
      max-width: var(--max);
      margin: 0 auto;
    }

.video-section__header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

.video-section__h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 400;
      color: var(--navy);
      line-height: 1.2;
      margin-top: 0.75rem;
    }

.video-section__sub {
      font-size: 0.97rem;
      color: var(--mid);
      max-width: 600px;
      margin: 1rem auto 0;
      line-height: 1.85;
    }

/* Video grid — two columns, last one centered if odd */

.video-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }

/* Single wide card for the third video */

.video-grid .video-card--wide {
      grid-column: 1 / -1;
      max-width: 640px;
      margin: 0 auto;
      width: 100%;
    }

/* ─── VIDEO CARD ─────────────────────────────────────── */

.video-card {
      background: var(--ink);
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--rule-dark);
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.25s, transform 0.25s;
    }

.video-card:hover {
      box-shadow: 0 16px 48px rgba(13,122,110,0.15);
      transform: translateY(-3px);
    }

/* Responsive video wrapper — forces 16:9 */

.video-card__embed {
      position: relative;
      width: 100%;
      padding-top: 56.25%; /* 16:9 */
      background: var(--ink-soft);
    }

.video-card__embed video {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

.video-card__body {
      padding: 1.25rem 1.5rem 1.5rem;
      flex: 1;
    }

.video-card__num {
      font-family: monospace;
      font-size: 0.62rem;
      color: var(--teal-lit);
      letter-spacing: 0.1em;
      margin-bottom: 0.4rem;
    }

.video-card__title {
      font-family: var(--font-serif);
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--white);
      line-height: 1.3;
      margin-bottom: 0.4rem;
    }

.video-card__desc {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.65;
    }

/* ─── DARK QUOTE STRIP ───────────────────────────────── */

.quote-strip {
      background: var(--ink-soft);
      padding: 4.5rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

.quote-strip::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(13,122,110,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,122,110,0.06) 1px, transparent 1px);
      background-size: 44px 44px;
      pointer-events: none;
    }

.quote-strip__inner {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin: 0 auto;
    }

.quote-strip__icon {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: rgba(13,122,110,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
    }

.quote-strip__icon svg {
      width: 22px; height: 22px;
      fill: var(--teal-lit);
    }

.quote-strip__heading {
      font-family: var(--font-serif);
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 400;
      color: var(--white);
      line-height: 1.25;
      margin-bottom: 1rem;
    }

.quote-strip__heading em { font-style: italic; color: var(--teal-lit); }

.quote-strip__text {
      font-size: 0.97rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.9;
    }

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

  .stat:nth-child(2) { border-right: none; }

  .story__inner { grid-template-columns: 1fr; gap: 3rem; }

  .values__grid { grid-template-columns: 1fr 1fr; }

  body[data-page="about"] .footer__grid, body[data-page="clients"] .footer__grid, body[data-page="contact"] .footer__grid, body[data-page="demo"] .footer__grid, body[data-page="solutions"] .footer__grid, body[data-page="videos"] .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  body[data-page="index"] .footer__grid { grid-template-columns: 1fr 1fr; }

  .get-started__inner { grid-template-columns: 1fr; gap: 3rem; }

  .client-count__inner { grid-template-columns: 1fr 1fr; }

  .contact-details__inner { grid-template-columns: 1fr 1fr; }

  .contact-main__inner { grid-template-columns: 1fr; gap: 2.5rem; }

  body[data-page="about"] .page-hero__inner, body[data-page="clients"] .page-hero__inner, body[data-page="contact"] .page-hero__inner, body[data-page="demo"] .page-hero__inner, body[data-page="privacy"] .page-hero__inner, body[data-page="solutions"] .page-hero__inner, body[data-page="videos"] .page-hero__inner { grid-template-columns: 1fr; gap: 3rem; padding: 4rem 2rem; }

  .expect__inner { grid-template-columns: 1fr; gap: 3rem; }

  .expect__badge { position: static; margin-top: 1rem; }

  .truststrip__inner { grid-template-columns: 1fr 1fr; }

  .hero__inner { grid-template-columns: 1fr; gap: 3rem; padding: 4rem 2rem; }

  .channel__inner { grid-template-columns: 1fr; gap: 3rem; }

  .revolution__inner { grid-template-columns: 1fr; gap: 3rem; }

  .getstarted__inner { grid-template-columns: 1fr; gap: 3rem; }

  .benefits__grid { grid-template-columns: 1fr 1fr; }

  .sol-dark__inner { grid-template-columns: 1fr; gap: 3rem; }

  .sol-light__inner { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 680px) {
  .nav__links { display: none; }

  .nav__demo-desktop { display: none; }

  .nav__toggle { display: flex; }

  .stats__inner { grid-template-columns: repeat(2, 1fr); }

  .values__grid { grid-template-columns: 1fr; }

  body[data-page="about"] .footer__grid, body[data-page="clients"] .footer__grid, body[data-page="contact"] .footer__grid, body[data-page="demo"] .footer__grid, body[data-page="privacy"] .footer__grid, body[data-page="solutions"] .footer__grid, body[data-page="videos"] .footer__grid { grid-template-columns: 1fr; }

  body[data-page="index"] .footer__grid { grid-template-columns: 1fr; gap: 2rem; }

  .logo-grid { grid-template-columns: repeat(2, 1fr); }

  .client-count__inner { grid-template-columns: 1fr; }

  .contact-details__inner { grid-template-columns: 1fr; }

  .truststrip__inner { grid-template-columns: 1fr; }

  .benefits__grid { grid-template-columns: 1fr; }

  .trustbar__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1020px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .privacy-layout__inner { grid-template-columns: 1fr; }

  .toc { position: static; margin-bottom: 2.5rem; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .video-grid { grid-template-columns: 1fr; }

  .video-card--wide { grid-column: auto; max-width: 100%; }
}