/* ============================================
   WHISTLE DIGITAL LTD — styles.css
   Charcoal: #1C1C1C  |  Ivory: #FDFBF7
   Font: DM Sans (body/UI) + DM Serif Display (hero headlines)
   ============================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --charcoal: #1C1C1C;
  --ivory: #FDFBF7;
  --ivory-muted: rgba(253, 251, 247, 0.55);
  --ivory-ghost: rgba(253, 251, 247, 0.15);
  --charcoal-muted: rgba(28, 28, 28, 0.55);
  --charcoal-ghost: rgba(28, 28, 28, 0.12);
  --blue: #4FD1F0;
  --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--charcoal);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  height: 64px;
  border-bottom: 0.5px solid var(--ivory-ghost);
  transition: opacity 0.4s var(--ease-out), background 0.4s ease;
  background: rgba(28, 28, 28, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav .nav-logo {
  justify-self: start;
}

.nav .slide-nav {
  justify-self: center;
}

.nav .nav-hamburger {
  justify-self: end;
}

.nav.overlay-open {
  opacity: 0.15;
  pointer-events: none;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.nav-wordmark {
  font-size: 13px;
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  color: var(--ivory-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--ivory);
}

.nav-cta {
  font-size: 12px;
  color: var(--ivory);
  border: 0.5px solid rgba(253, 251, 247, 0.3);
  padding: 8px 18px;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-cta:hover {
  background: var(--ivory-ghost);
  border-color: rgba(253, 251, 247, 0.5);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ivory);
  transition: all 0.3s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--charcoal);
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(28, 28, 28, 0.2) 0%,
    rgba(28, 28, 28, 0.5) 60%,
    rgba(28, 28, 28, 0.85) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding: 0 24px;
}

.hero-eyebrow {
  font-size: 11px;
  color: var(--ivory-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}

.hero-headline {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.hero-subheadline {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--ivory-muted);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 36px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--ivory);
  padding: 13px 28px;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: opacity 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.88;
}

.btn-ghost {
  font-size: 13px;
  color: var(--ivory-muted);
  border: 0.5px solid rgba(253, 251, 247, 0.25);
  padding: 13px 28px;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s ease, border-color 0.2s ease;
  background: none;
  cursor: pointer;
}

.btn-ghost:hover {
  color: var(--ivory);
  border-color: rgba(253, 251, 247, 0.5);
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-scroll span {
  font-size: 10px;
  color: var(--ivory-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scroll-line {
  width: 0.5px;
  height: 36px;
  background: rgba(253, 251, 247, 0.2);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; transform: scaleY(1); }
  50% { opacity: 0.6; transform: scaleY(0.6); }
}

/* ---------- Services Index (below hero) ---------- */
.services-index {
  padding: 100px 40px;
  max-width: 900px;
  margin: 0 auto;
}

.section-eyebrow {
  font-size: 10px;
  color: rgba(253, 251, 247, 0.3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 40px;
  display: block;
}

.section-headline {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 56px;
}

.service-rows {
  display: flex;
  flex-direction: column;
}

.service-row {
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 0.5px solid rgba(253, 251, 247, 0.08);
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 2px;
  gap: 20px;
}

.service-row:first-child {
  border-top: 0.5px solid rgba(253, 251, 247, 0.08);
}

.service-row:hover .service-row-title {
  color: var(--ivory);
}

.service-row:hover .service-row-arrow {
  transform: translateX(4px);
  opacity: 0.7;
}

.service-row-num {
  font-size: 11px;
  color: rgba(253, 251, 247, 0.2);
  letter-spacing: 0.1em;
  width: 28px;
  flex-shrink: 0;
}

.service-row-title {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  color: rgba(253, 251, 247, 0.75);
  flex: 1;
  transition: color 0.2s ease;
  letter-spacing: -0.01em;
}

.service-row-category {
  font-size: 11px;
  color: rgba(253, 251, 247, 0.25);
  letter-spacing: 0.06em;
}

.service-row-arrow {
  font-size: 18px;
  color: rgba(253, 251, 247, 0.2);
  transition: transform 0.25s var(--ease-spring), opacity 0.25s ease;
}

/* ---------- Charcoal Stage (Overlay System) ---------- */
.overlay-stage {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  overflow-y: auto;
  padding: 80px 20px 40px;
}

.overlay-stage.active {
  opacity: 1;
  pointer-events: all;
}

.overlay-close {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 210;
  font-size: 12px;
  color: rgba(253, 251, 247, 0.3);
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  background: none;
  border: none;
  display: none;
  align-items: center;
  gap: 8px;
}

.overlay-close:hover {
  color: rgba(253, 251, 247, 0.65);
}

.overlay-stage.active ~ .overlay-close,
.overlay-stage.active + .overlay-close {
  display: flex;
}

/* ---------- Ivory Content Box ---------- */
.ivory-box {
  background: var(--ivory);
  border-radius: 6px;
  width: 78%;
  max-width: 900px;
  overflow: hidden;
  transform: translateY(24px);
  opacity: 0;
  transition:
    transform 0.42s var(--ease-out),
    opacity 0.42s ease;
  flex-shrink: 0;
}

.overlay-stage.active .ivory-box {
  transform: translateY(0);
  opacity: 1;
}

/* Layout A — image top, copy below */
.ivory-box-media-top {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  background: #d4d0c8;
}

.ivory-box-media-top.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layout B — split (image left, copy right) */
.ivory-box-split {
  display: flex;
  min-height: 420px;
}

.ivory-box-split-media {
  width: 42%;
  flex-shrink: 0;
  background: #d4d0c8;
  overflow: hidden;
}

.ivory-box-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ivory-box-split-body {
  flex: 1;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Body copy shared */
.ivory-box-body {
  padding: 40px 44px 48px;
}

.ivory-eyebrow {
  font-size: 10px;
  color: var(--charcoal-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.ivory-headline {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.ivory-body p {
  font-size: 15px;
  color: var(--charcoal-muted);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ivory-body p:last-child {
  margin-bottom: 0;
}

.ivory-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(28, 28, 28, 0.35);
  padding-bottom: 2px;
  margin-top: 28px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
}

.ivory-cta:hover {
  border-bottom-color: rgba(28, 28, 28, 0.7);
  opacity: 0.8;
}

/* ---------- About Section ---------- */
.about-section {
  padding: 120px 40px;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.about-copy p {
  font-size: 15px;
  color: rgba(253, 251, 247, 0.55);
  line-height: 1.8;
  margin-bottom: 20px;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(253, 251, 247, 0.06);
  border: 0.5px solid rgba(253, 251, 247, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.stat-cell {
  background: var(--charcoal);
  padding: 28px 24px;
}

.stat-number {
  font-size: 32px;
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}

.stat-label {
  font-size: 11px;
  color: rgba(253, 251, 247, 0.35);
  line-height: 1.5;
}

/* ---------- Contact Section ---------- */
.contact-section {
  padding: 100px 40px 120px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.contact-form {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 11px;
  color: rgba(253, 251, 247, 0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-input,
.form-textarea {
  background: transparent;
  border: 0.5px solid rgba(253, 251, 247, 0.15);
  border-radius: 3px;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--ivory);
  font-family: inherit;
  transition: border-color 0.2s ease;
  outline: none;
  width: 100%;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(253, 251, 247, 0.2);
}

.form-input:focus,
.form-textarea:focus {
  border-color: rgba(253, 251, 247, 0.4);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.form-submit {
  margin-top: 8px;
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--ivory);
  padding: 15px 28px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}

.form-submit:hover {
  opacity: 0.88;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 0.5px solid rgba(253, 251, 247, 0.06);
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-copy {
  font-size: 12px;
  color: rgba(253, 251, 247, 0.25);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 12px;
  color: rgba(253, 251, 247, 0.25);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: rgba(253, 251, 247, 0.55);
}

/* ---------- Overlay stagger animations ---------- */
.ivory-eyebrow,
.ivory-headline,
.ivory-body,
.ivory-cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-spring);
}

.overlay-stage.active .ivory-eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.overlay-stage.active .ivory-headline { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.overlay-stage.active .ivory-body { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }
.overlay-stage.active .ivory-cta { opacity: 1; transform: translateY(0); transition-delay: 0.38s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .nav {
    padding: 0 20px;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .services-index {
    padding: 72px 20px;
  }

  .service-row-category {
    display: none;
  }

  .about-section {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 72px 20px;
  }

  .contact-section {
    padding: 72px 20px 80px;
  }

  .footer {
    flex-direction: column;
    padding: 24px 20px;
    text-align: center;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .ivory-box {
    width: 94%;
  }

  .ivory-box-split {
    flex-direction: column;
  }

  .ivory-box-split-media {
    width: 100%;
    height: 220px;
  }

  .ivory-box-split-body {
    padding: 28px 24px 32px;
  }

  .ivory-box-body {
    padding: 24px 24px 32px;
  }

  .overlay-stage {
    padding: 64px 12px 32px;
  }

  .overlay-close {
    right: 20px;
  }
}

/* ---------- Book a call — glowing pill CTA ---------- */
.book-call-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 56px 0 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: inherit;
  overflow: hidden;
  background: #4FD1F0;
  box-shadow: 0 0 24px rgba(79,209,240,0.5), 0 0 60px rgba(79,209,240,0.22);
  transition: padding 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.book-call-btn:hover {
  padding: 0 26px 0 56px;
  box-shadow: 0 0 32px rgba(79,209,240,0.65), 0 0 70px rgba(79,209,240,0.3);
}

.book-call-btn span.btn-label {
  position: relative;
  z-index: 2;
  color: #0A1A1F;
  white-space: nowrap;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.book-call-icon {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1C1C1C;
  color: #4FD1F0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.book-call-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.book-call-btn:hover .book-call-icon {
  right: calc(100% - 48px);
  transform: scale(1.05);
}

.book-call-btn:focus-visible {
  outline: 2px solid #4FD1F0;
  outline-offset: 3px;
}

/* ==============================================
   DESIGN SYSTEM UPDATE — fonts, buttons, parallax
   ============================================== */

/* ---- Serif display headlines ---- */
.hero-headline,
.section-headline,
.ivory-headline {
  font-family: var(--font-serif);
  font-weight: 400;
}

.section-eyebrow,
.hero-eyebrow,
.nav-wordmark,
.nav-links a,
.btn-primary,
.btn-ghost,
.footer-copy,
.footer-links a,
.form-label,
.form-input,
.form-textarea,
.form-submit,
.ivory-eyebrow,
.ivory-body p,
.stat-number,
.stat-label,
.parallax-item-body p,
.parallax-item-cta,
.book-call-btn {
  font-family: var(--font-sans);
}

/* ---- Nav CTA small variant ---- */
.book-call-btn--sm {
  height: 40px;
  padding: 0 44px 0 18px;
  font-size: 12.5px;
}
.book-call-btn--sm .book-call-icon {
  width: 34px;
  height: 34px;
  right: 3px;
  top: 3px;
}
.book-call-btn--sm:hover .book-call-icon {
  right: calc(100% - 37px);
}
.book-call-btn--sm:hover {
  padding: 0 18px 0 44px;
}

/* ---- Ivory glow eyebrow (parallax category labels) ---- */
.parallax-item-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
  text-shadow: 0 0 20px rgba(253,251,247,0.5), 0 0 40px rgba(253,251,247,0.2);
}

/* ---- Parallax item title uses serif ---- */
.parallax-item-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 22px;
}

/* ---- Parallax CTA — no arrow, ivory underline style ---- */
.parallax-item-cta {
  display: inline-block;
  margin-top: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ivory);
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(253,251,247,0.3);
  padding-bottom: 3px;
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, text-shadow 0.25s ease;
}
.parallax-item-cta:hover {
  border-bottom-color: var(--ivory);
  text-shadow: 0 0 16px rgba(253,251,247,0.4);
}

/* ---- Smooth bidirectional parallax transitions ---- */
.parallax-item {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.9s var(--ease-smooth),
    transform 0.9s var(--ease-smooth);
}
.parallax-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.parallax-item-media {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-smooth);
  transition-delay: 0.2s;
}
.parallax-item.reverse .parallax-item-media {
  clip-path: inset(0 0 0 100%);
}
.parallax-item.visible .parallax-item-media {
  clip-path: inset(0 0% 0 0);
}
.parallax-item.reverse.visible .parallax-item-media {
  clip-path: inset(0 0 0 0%);
}
.parallax-item-content {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.8s var(--ease-smooth),
    transform 0.8s var(--ease-smooth);
  transition-delay: 0.35s;
}
.parallax-item.reverse .parallax-item-content {
  transform: translateX(24px);
}
.parallax-item.visible .parallax-item-content {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Remove arrows from About "Start a conversation" ---- */
.btn-ghost {
  letter-spacing: 0.04em;
}

/* ---- Contact form submit uses same font ---- */
.form-submit {
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
}

/* ---- Footer wordmark refinement ---- */
.footer-copy {
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ==============================================
   VT323 TYPEWRITER HERO + FALLING PATTERN + FIXES
   ============================================== */

/* ---- Hero video — sharper / more visible ---- */
.hero-video-wrap video {
  opacity: 0.65 !important;
  filter: contrast(1.08) saturate(1.1);
}
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(28,28,28,0.05) 0%,
    rgba(28,28,28,0.35) 55%,
    rgba(28,28,28,0.78) 100%
  ) !important;
}

/* ---- VT323 typewriter headline ---- */
.hero-headline {
  font-family: 'VT323', monospace !important;
  font-size: clamp(32px, 5vw, 58px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.25 !important;
  color: var(--ivory) !important;
}
.typewriter-wrap {
  display: inline-block;
  min-height: 2.6em;
}
.typewriter-text {
  white-space: pre-wrap;
}
.typewriter-cursor {
  display: inline-block;
  color: var(--ivory);
  opacity: 1;
  margin-left: 2px;
  font-weight: 300;
  animation: cursorBlink 0.75s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- Nav glow "Contact us" button ---- */
.nav-contact-glow {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #4FD1F0;
  text-shadow: 0 0 12px rgba(79,209,240,0.6), 0 0 28px rgba(79,209,240,0.25);
  padding: 6px 14px;
  border-radius: 3px;
  transition: text-shadow 0.25s ease, opacity 0.2s ease;
}
.nav-contact-glow:hover {
  text-shadow: 0 0 18px rgba(79,209,240,0.85), 0 0 40px rgba(79,209,240,0.4);
  opacity: 0.9;
}

/* ---- Remove ALL blue from written content ---- */
/* Parallax eyebrows — ivory glow, not blue */
.parallax-item-eyebrow {
  color: var(--ivory) !important;
  text-shadow: 0 0 20px rgba(253,251,247,0.45), 0 0 40px rgba(253,251,247,0.15) !important;
}
/* Parallax CTAs — ivory, not blue */
.parallax-item-cta {
  color: var(--ivory) !important;
  border-bottom-color: rgba(253,251,247,0.3) !important;
}
.parallax-item-cta:hover {
  border-bottom-color: var(--ivory) !important;
  text-shadow: 0 0 16px rgba(253,251,247,0.4) !important;
  color: var(--ivory) !important;
}
/* Section eyebrows — ivory muted, not blue */
.section-eyebrow {
  color: rgba(253,251,247,0.35) !important;
}
/* Stat numbers stay ivory */
.stat-number { color: var(--ivory); }

/* ---- Falling pattern background ---- */
/* ---- Falling pattern — digital data streams (faithful to original component) ---- */
/*
  Replicates the React component's radial-gradient technique:
  - Tall narrow radial-gradients = the falling line segments
  - Tiny 1.5px radial nodes = bright intersection points
  - 12 rows of streams at different speeds/offsets
  - Two pseudo-elements: ::before = lines layer, ::after = dot-grid mask
*/
.falling-pattern-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Layer 1: The falling line segments + bright nodes */
.falling-pattern-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Stream group 1 — col 0px, tile height 235px */
    radial-gradient(3px 100px at 0px 235px,   rgba(253,251,247,0.55), transparent),
    radial-gradient(3px 100px at 300px 235px, rgba(253,251,247,0.55), transparent),
    radial-gradient(1.5px 1.5px at 150px 117.5px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 2 — col 25px, tile height 252px */
    radial-gradient(3px 100px at 0px 252px,   rgba(253,251,247,0.45), transparent),
    radial-gradient(3px 100px at 300px 252px, rgba(253,251,247,0.45), transparent),
    radial-gradient(1.5px 1.5px at 150px 126px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 3 — col 50px, tile height 150px */
    radial-gradient(3px 100px at 0px 150px,   rgba(253,251,247,0.6), transparent),
    radial-gradient(3px 100px at 300px 150px, rgba(253,251,247,0.6), transparent),
    radial-gradient(1.5px 1.5px at 150px 75px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 4 — col 75px, tile height 253px */
    radial-gradient(3px 100px at 0px 253px,   rgba(253,251,247,0.35), transparent),
    radial-gradient(3px 100px at 300px 253px, rgba(253,251,247,0.35), transparent),
    radial-gradient(1.5px 1.5px at 150px 126.5px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 5 — col 100px, tile height 204px */
    radial-gradient(3px 100px at 0px 204px,   rgba(253,251,247,0.5), transparent),
    radial-gradient(3px 100px at 300px 204px, rgba(253,251,247,0.5), transparent),
    radial-gradient(1.5px 1.5px at 150px 102px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 6 — col 125px, tile height 134px */
    radial-gradient(3px 100px at 0px 134px,   rgba(253,251,247,0.65), transparent),
    radial-gradient(3px 100px at 300px 134px, rgba(253,251,247,0.65), transparent),
    radial-gradient(1.5px 1.5px at 150px 67px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 7 — col 150px, tile height 179px */
    radial-gradient(3px 100px at 0px 179px,   rgba(253,251,247,0.4), transparent),
    radial-gradient(3px 100px at 300px 179px, rgba(253,251,247,0.4), transparent),
    radial-gradient(1.5px 1.5px at 150px 89.5px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 8 — col 175px, tile height 299px */
    radial-gradient(3px 100px at 0px 299px,   rgba(253,251,247,0.3), transparent),
    radial-gradient(3px 100px at 300px 299px, rgba(253,251,247,0.3), transparent),
    radial-gradient(1.5px 1.5px at 150px 149.5px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 9 — col 200px, tile height 215px */
    radial-gradient(3px 100px at 0px 215px,   rgba(253,251,247,0.55), transparent),
    radial-gradient(3px 100px at 300px 215px, rgba(253,251,247,0.55), transparent),
    radial-gradient(1.5px 1.5px at 150px 107.5px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 10 — col 225px, tile height 281px */
    radial-gradient(3px 100px at 0px 281px,   rgba(253,251,247,0.42), transparent),
    radial-gradient(3px 100px at 300px 281px, rgba(253,251,247,0.42), transparent),
    radial-gradient(1.5px 1.5px at 150px 140.5px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 11 — col 250px, tile height 158px */
    radial-gradient(3px 100px at 0px 158px,   rgba(253,251,247,0.6), transparent),
    radial-gradient(3px 100px at 300px 158px, rgba(253,251,247,0.6), transparent),
    radial-gradient(1.5px 1.5px at 150px 79px, rgba(253,251,247,1) 100%, transparent 150%),
    /* Stream group 12 — col 275px, tile height 210px */
    radial-gradient(3px 100px at 0px 210px,   rgba(253,251,247,0.48), transparent),
    radial-gradient(3px 100px at 300px 210px, rgba(253,251,247,0.48), transparent),
    radial-gradient(1.5px 1.5px at 150px 105px, rgba(253,251,247,1) 100%, transparent 150%);

  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;

  background-position:
    0px 220px,    3px 220px,    151.5px 337.5px,
    25px 24px,    28px 24px,    176.5px 150px,
    50px 16px,    53px 16px,    201.5px 91px,
    75px 224px,   78px 224px,   226.5px 230.5px,
    100px 19px,   103px 19px,   251.5px 121px,
    125px 120px,  128px 120px,  276.5px 187px,
    150px 31px,   153px 31px,   301.5px 120.5px,
    175px 235px,  178px 235px,  326.5px 384.5px,
    200px 121px,  203px 121px,  351.5px 228.5px,
    225px 224px,  228px 224px,  376.5px 364.5px,
    250px 26px,   253px 26px,   401.5px 105px,
    275px 75px,   278px 75px,   426.5px 180px;

  animation: dataStreams 8s linear infinite;
}

/* Layer 2: dot-grid mask — exactly as in original (blurIntensity=1em, density=1, backgroundSize=8px) */
.falling-pattern-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  background-image: radial-gradient(
    circle at 50% 50%,
    transparent 0,
    transparent 2px,
    rgba(28,28,28,0.82) 2px
  );
  background-size: 8px 8px;
  pointer-events: none;
}

@keyframes dataStreams {
  0% {
    background-position:
      0px 220px,    3px 220px,    151.5px 337.5px,
      25px 24px,    28px 24px,    176.5px 150px,
      50px 16px,    53px 16px,    201.5px 91px,
      75px 224px,   78px 224px,   226.5px 230.5px,
      100px 19px,   103px 19px,   251.5px 121px,
      125px 120px,  128px 120px,  276.5px 187px,
      150px 31px,   153px 31px,   301.5px 120.5px,
      175px 235px,  178px 235px,  326.5px 384.5px,
      200px 121px,  203px 121px,  351.5px 228.5px,
      225px 224px,  228px 224px,  376.5px 364.5px,
      250px 26px,   253px 26px,   401.5px 105px,
      275px 75px,   278px 75px,   426.5px 180px;
  }
  100% {
    background-position:
      0px 6800px,    3px 6800px,    151.5px 6917.5px,
      25px 13632px,  28px 13632px,  176.5px 13758px,
      50px 5416px,   53px 5416px,   201.5px 5491px,
      75px 17175px,  78px 17175px,  226.5px 17301.5px,
      100px 5119px,  103px 5119px,  251.5px 5221px,
      125px 8428px,  128px 8428px,  276.5px 8495px,
      150px 9876px,  153px 9876px,  301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px,  253px 5082px,  401.5px 5161px,
      275px 6375px,  278px 6375px,  426.5px 6480px;
  }
}

/* Ensure about/contact content sits above the pattern */
.about-section > *:not(.falling-pattern-bg),
.contact-section > *:not(.falling-pattern-bg) {
  position: relative;
  z-index: 1;
}

/* ---- Hero subheadline — ivory, no blue ---- */
.hero-subheadline {
  color: rgba(253,251,247,0.55) !important;
}
.hero-eyebrow {
  color: rgba(253,251,247,0.4) !important;
}

/* ==============================================
   SLIDE-TAB NAV + EDITORIAL STATS + CLEANUP
   ============================================== */

/* ---- Hide old nav-links (replaced by slide-nav) ---- */
.nav-links { display: none !important; }
.nav-contact-glow { display: none !important; }

/* ---- Slide-tab pill nav ---- */
.slide-nav {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(253,251,247,0.05);
  border: 0.5px solid rgba(253,251,247,0.12);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}

.slide-nav-cursor {
  position: absolute;
  top: 4px;
  height: calc(100% - 8px);
  background: rgba(253,251,247,0.1);
  border-radius: 999px;
  transition: left 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              width 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.2s ease;
  pointer-events: none;
  z-index: 0;
}

.slide-nav-item {
  position: relative;
  z-index: 1;
  display: block;
  padding: 7px 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(253,251,247,0.55);
  text-decoration: none;
  border-radius: 999px;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.slide-nav-item:hover {
  color: rgba(253,251,247,0.9);
}

.slide-nav-item.active {
  color: var(--ivory);
}

/* Contact us — glowing blue text in nav */
.slide-nav-contact {
  color: var(--blue) !important;
  text-shadow: 0 0 10px rgba(79,209,240,0.4);
  transition: text-shadow 0.3s ease, color 0.2s ease !important;
}

.slide-nav-contact:hover {
  color: #7ee8f8 !important;
  text-shadow: 0 0 18px rgba(79,209,240,0.7), 0 0 35px rgba(79,209,240,0.3) !important;
}

/* Blue glow outline on hover for Contact us */
.slide-nav-contact::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
}

.slide-nav-contact:hover::before {
  border-color: rgba(79,209,240,0.5);
  box-shadow: 0 0 12px rgba(79,209,240,0.25), inset 0 0 8px rgba(79,209,240,0.06);
}

/* ---- Editorial stat callouts ---- */
.about-stats-editorial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}

.stat-editorial {
  padding: 28px 0;
  border-top: 0.5px solid rgba(253,251,247,0.08);
}

.stat-editorial:last-child {
  border-bottom: 0.5px solid rgba(253,251,247,0.08);
}

.stat-editorial-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat-editorial-num {
  font-family: var(--font-serif);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  min-width: 110px;
}

.stat-editorial-num sup {
  font-size: 0.45em;
  vertical-align: super;
  color: rgba(253,251,247,0.5);
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0;
}

.stat-editorial-rule {
  display: block;
  width: 1px;
  height: 36px;
  background: rgba(253,251,247,0.15);
  flex-shrink: 0;
}

.stat-editorial-label {
  font-size: 13.5px;
  color: rgba(253,251,247,0.45);
  line-height: 1.6;
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* ---- Remove falling pattern from contact/about ---- */
.about-section { overflow: visible; }
.contact-section { overflow: visible; }

/* ---- Mobile nav ---- */
@media (max-width: 768px) {
  .slide-nav { display: none; }
  .nav-hamburger { display: flex !important; }

  .about-stats-editorial { margin-top: 40px; }
  .stat-editorial-num { font-size: 40px; min-width: 80px; }
  .stat-editorial-inner { gap: 16px; }
}

/* ==============================================
   CONVERSION UPGRADES: availability dot, arrow CTA
   ============================================== */

/* Live availability indicator */
.hero-availability {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.availability-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
  animation: availPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes availPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.availability-text {
  font-size: 12px;
  color: rgba(253,251,247,0.45);
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
}

/* Arrow icon — no rotation needed, stays pointing right */
.book-call-btn:hover .book-call-icon {
  transform: scale(1.05);
}

/* About page nav link */
.slide-nav-item[href="about.html"] { }

/* ==============================================
   ABOUT PREVIEW SECTION (index.html)
   ============================================== */
.about-preview-section {
  padding: 100px 40px 120px;
  border-top: 0.5px solid rgba(253,251,247,0.06);
}
.about-preview-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.about-preview-h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 16px 0 28px;
}
.sparkle-phrase {
  display: inline-block;
  position: relative;
  color: #4FD1F0;
}
.sparkle-text {
  display: inline-block;
  color: #4FD1F0;
  text-shadow: 0 0 20px rgba(79,209,240,0.4);
  transition: opacity 0.55s ease, filter 0.55s ease;
}
.sparkle-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}
.about-preview-body {
  font-size: 15px;
  color: rgba(253,251,247,0.5);
  line-height: 1.8;
  font-family: var(--font-sans);
  margin-bottom: 16px;
}

/* Glowing About CTA link */
.about-glow-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: #4FD1F0;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-shadow: 0 0 14px rgba(79,209,240,0.5), 0 0 30px rgba(79,209,240,0.2);
  border-bottom: 0.5px solid rgba(79,209,240,0.3);
  padding-bottom: 3px;
  transition: text-shadow 0.3s ease, border-color 0.3s ease;
}
.about-glow-cta:hover {
  text-shadow: 0 0 22px rgba(79,209,240,0.75), 0 0 50px rgba(79,209,240,0.35);
  border-bottom-color: rgba(79,209,240,0.7);
}
.about-glow-cta-arrow {
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
}
.about-glow-cta:hover .about-glow-cta-arrow {
  transform: translateX(4px);
}

/* About preview flip cards */
.about-preview-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-preview-card {
  background: #1C1C1C;
  border: 0.5px solid rgba(253,251,247,0.08);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.about-preview-card:hover,
.about-preview-card[data-open="true"] {
  border-color: rgba(253,251,247,0.2);
}
.apc-front {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
}
.about-preview-card[data-open="true"] .apc-front {
  display: none;
}
.apc-num {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--ivory);
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 72px;
  flex-shrink: 0;
}
.apc-num sup {
  font-family: var(--font-sans);
  font-size: 0.45em;
  color: rgba(253,251,247,0.4);
  vertical-align: super;
}
.apc-label {
  font-size: 12px;
  color: rgba(253,251,247,0.45);
  line-height: 1.5;
  font-family: var(--font-sans);
  flex: 1;
}
.apc-cue {
  font-size: 9px;
  color: rgba(253,251,247,0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.apc-back {
  display: none;
  padding: 24px;
  flex-direction: column;
  gap: 6px;
}
.about-preview-card[data-open="true"] .apc-back {
  display: flex;
}
.apc-back-tag {
  font-size: 9px;
  color: #4FD1F0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 600;
}
.apc-back-title {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ivory);
  font-weight: 400;
  margin: 4px 0 8px;
}
.apc-back-desc {
  font-size: 13.5px;
  color: rgba(253,251,247,0.5);
  line-height: 1.7;
  font-family: var(--font-sans);
}

/* Mobile */
@media (max-width: 768px) {
  .about-preview-section { padding: 72px 20px 80px; }
  .about-preview-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ==============================================
   IMPACT CARDS — About page stats strip
   ============================================== */
.impact-section {
  padding: 60px 40px 80px;
  max-width: 1000px;
  margin: 0 auto;
  border-top: 0.5px solid rgba(253,251,247,0.06);
}
.impact-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px,3vw,36px);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.impact-section .impact-sub {
  font-size: 14px;
  color: rgba(253,251,247,0.4);
  font-family: var(--font-sans);
  margin-bottom: 40px;
  line-height: 1.6;
}
.impact-cards-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  border: 0.5px solid rgba(253,251,247,0.08);
  border-radius: 6px;
  overflow: hidden;
  /* Fixed height prevents any page-height change when cards open */
  height: 320px;
}
.impact-card {
  flex: 1;
  min-width: 0;
  border-right: 0.5px solid rgba(255,255,255,0.08);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  /* Smooth flex transition — no layout jump */
  transition:
    flex 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
  will-change: flex;
}
.impact-card:last-child { border-right: none; }

/* Individual card colours */
.impact-card:nth-child(1) { background: #FF8C55; } /* sunset orange */
.impact-card:nth-child(2) { background: #6EC6F5; } /* power baby blue */
.impact-card:nth-child(3) { background: #F4A8A0; } /* pastel coral */
.impact-card:nth-child(4) { background: #A8D8B0; } /* pastel green */

/* Hover tint */
.impact-card:hover { filter: brightness(1.05); }

/* Open state: expand to ~3.8x */
.impact-card[data-open="true"] { flex: 3.8; }

/* ── Closed face: number + label ── */
.impact-card-closed {
  position: absolute;
  inset: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.impact-card[data-open="true"] .impact-card-closed {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.impact-metric {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 400;
  color: #1C1C1C;
  line-height: 1;
  letter-spacing: -0.02em;
}
.impact-metric sup {
  font-family: var(--font-sans);
  font-size: 0.4em;
  color: rgba(28,28,28,0.55);
  vertical-align: super;
}
.impact-metric-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(28,28,28,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  margin-top: 8px;
  max-width: 90px;
  line-height: 1.4;
}

/* ── Open face: full content ── */
.impact-card-open {
  position: absolute;
  inset: 0;
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.35s ease 0.2s;
  pointer-events: none;
  overflow: hidden;
}
.impact-card[data-open="true"] .impact-card-open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease 0.25s;
}
.impact-open-tag {
  font-size: 9px;
  color: rgba(28,28,28,0.55);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 700;
}
.impact-open-metric {
  font-family: var(--font-serif);
  font-size: clamp(44px, 5.5vw, 68px);
  font-weight: 400;
  color: #1C1C1C;
  line-height: 1;
  letter-spacing: -0.02em;
}
.impact-open-title {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  font-family: var(--font-sans);
  margin-top: 2px;
}
.impact-open-desc {
  font-size: 13px;
  color: rgba(28,28,28,0.65);
  line-height: 1.7;
  font-family: var(--font-sans);
  max-width: 340px;
}

/* Mobile: stack vertically with auto heights */
@media (max-width: 768px) {
  .impact-section { padding: 48px 20px 60px; }
  .impact-cards-row {
    flex-direction: column;
    height: auto;
    gap: 2px;
    border-radius: 6px;
  }
  .impact-card {
    flex: none;
    height: 80px;
    transition: height 0.55s cubic-bezier(0.22,1,0.36,1);
    position: relative;
    border-right: none;
    border-bottom: 0.5px solid rgba(255,255,255,0.1);
  }
  .impact-card[data-open="true"] {
    height: 240px;
    flex: none;
  }
  .impact-card-closed { padding: 16px 20px; }
  .impact-metric { font-size: 28px; }
}

/* ==============================================
   COMPARISON BLOCK — About page "What makes us different"
   ============================================== */
.comparison-section {
  padding: 60px 40px 80px;
  max-width: 1000px;
  margin: 0 auto;
  border-top: 0.5px solid rgba(253,251,247,0.06);
}
.comparison-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px,3vw,36px);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.comparison-section .comp-sub {
  font-size: 14px;
  color: rgba(253,251,247,0.4);
  font-family: var(--font-sans);
  margin-bottom: 40px;
  line-height: 1.6;
  max-width: 560px;
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.comp-card {
  border-radius: 6px;
  overflow: hidden;
}
.comp-card-ours {
  background: #1C1C1C;
  border: 0.5px solid rgba(79,209,240,0.2);
  box-shadow: 0 0 24px rgba(79,209,240,0.05);
}
.comp-card-theirs {
  background: rgba(253,251,247,0.02);
  border: 0.5px solid rgba(253,251,247,0.06);
}
.comp-card-header {
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid rgba(253,251,247,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.comp-card-theirs .comp-card-header {
  border-bottom-color: rgba(253,251,247,0.04);
}
.comp-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ivory);
  font-family: var(--font-sans);
}
.comp-card-theirs .comp-card-title {
  color: rgba(253,251,247,0.4);
}
.comp-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #4FD1F0;
  color: #0A1A1F;
  padding: 3px 8px;
  border-radius: 20px;
  font-family: var(--font-sans);
}
.comp-card-desc {
  font-size: 12px;
  color: rgba(253,251,247,0.3);
  font-family: var(--font-sans);
  padding: 0 24px 16px;
  line-height: 1.5;
  border-bottom: 0.5px solid rgba(253,251,247,0.05);
}
.comp-list {
  list-style: none;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comp-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(253,251,247,0.7);
  line-height: 1.55;
  font-family: var(--font-sans);
}
.comp-card-theirs .comp-list li {
  color: rgba(253,251,247,0.28);
}
.comp-icon-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: #4FD1F0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.comp-icon-cross {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: rgba(253,251,247,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.comp-icon-check svg,
.comp-icon-cross svg {
  width: 10px;
  height: 10px;
}
.comp-footer {
  margin: 16px 24px 24px;
}
.comp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, box-shadow 0.3s ease;
}
.comp-cta-primary {
  background: #4FD1F0;
  color: #0A1A1F;
  box-shadow: 0 0 16px rgba(79,209,240,0.35);
}
.comp-cta-primary:hover {
  opacity: 0.9;
  box-shadow: 0 0 26px rgba(79,209,240,0.55);
}
.comp-cta-secondary {
  background: rgba(253,251,247,0.04);
  color: rgba(253,251,247,0.35);
  border: 0.5px solid rgba(253,251,247,0.08);
}
.comp-cta-secondary:hover {
  background: rgba(253,251,247,0.08);
  color: rgba(253,251,247,0.55);
}

@media (max-width: 768px) {
  .comparison-section { padding: 48px 20px 60px; }
  .comparison-grid { grid-template-columns: 1fr; }
}

/* ==============================================
   ABOUT PAGE — flip card engine + scroll reveal
   ============================================== */

/* Section wrapper */
.about-engine-section {
  padding: 60px 40px 80px;
  max-width: 1000px;
  margin: 0 auto;
  border-top: 0.5px solid rgba(253,251,247,0.06);
}
.about-engine-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.engine-sub {
  font-size: 12px;
  color: rgba(253,251,247,0.28);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.engine-sub::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 0.5px;
  background: rgba(253,251,247,0.2);
}

/* Grid */
.about-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Card wrapper: perspective container */
.about-flip-card {
  perspective: 1000px;
  height: 300px;
  cursor: pointer;
  /* Scroll reveal start state */
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Staggered reveal delays */
.about-flip-card:nth-child(1) { transition-delay: 0.05s; }
.about-flip-card:nth-child(2) { transition-delay: 0.14s; }
.about-flip-card:nth-child(3) { transition-delay: 0.23s; }
.about-flip-card:nth-child(4) { transition-delay: 0.32s; }

/* Revealed state via IntersectionObserver */
.about-flip-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Also apply to approach page flip cards */
.flip-card {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.flip-card:nth-child(1) { transition-delay: 0.05s; }
.flip-card:nth-child(2) { transition-delay: 0.14s; }
.flip-card:nth-child(3) { transition-delay: 0.23s; }
.flip-card:nth-child(4) { transition-delay: 0.32s; }
.flip-card.revealed { opacity: 1; transform: translateY(0); }

/* Inner — 3D context */
.about-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.about-flip-card.flipped .about-flip-inner {
  transform: rotateY(180deg);
}

/* Both faces */
.about-flip-front,
.about-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
}

/* Front face */
.about-flip-front {
  border: 0.5px solid rgba(253,251,247,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.3s ease;
}
.about-flip-card:hover .about-flip-front {
  border-color: rgba(253,251,247,0.2);
}
.about-flip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(18,18,18,0.82) 0%, rgba(18,18,18,0.55) 100%);
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}
.about-flip-front-content {
  position: relative;
  z-index: 1;
  padding: 22px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-flip-num {
  font-family: var(--font-serif);
  font-size: 54px;
  font-weight: 400;
  color: rgba(253,251,247,0.88);
  line-height: 1;
  text-shadow: 0 2px 20px rgba(253,251,247,0.15);
}
.about-flip-tag {
  font-size: 9px;
  color: rgba(253,251,247,0.32);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  display: block;
  margin-bottom: 4px;
}
.about-flip-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.25;
  font-family: var(--font-serif);
  margin-bottom: 10px;
}
.about-flip-cue {
  font-size: 9px;
  color: rgba(253,251,247,0.22);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  gap: 5px;
}
.about-flip-cue::after {
  content: '→';
  transition: transform 0.25s ease;
}
.about-flip-card:hover .about-flip-cue::after {
  transform: translateX(4px);
}

/* Back face */
.about-flip-back {
  background: #FDFBF7;
  transform: rotateY(180deg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-flip-back-step {
  font-size: 9px;
  font-weight: 600;
  color: rgba(28,28,28,0.3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.about-flip-back-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  color: #1C1C1C;
  margin: 6px 0 10px;
  line-height: 1.2;
}
.about-flip-back-desc {
  font-size: 12px;
  color: rgba(28,28,28,0.62);
  line-height: 1.7;
  font-family: var(--font-sans);
  flex: 1;
}
.about-flip-close {
  background: none;
  border: none;
  font-size: 9px;
  color: rgba(28,28,28,0.28);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-sans);
  padding: 0;
  margin-top: 12px;
  text-align: left;
}

/* Also improve approach.html flip card smoothness */
.flip-card-inner {
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}

/* Mobile */
@media (max-width: 768px) {
  .about-engine-section { padding: 48px 20px 60px; }
  .about-flip-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .about-flip-card { height: 240px; }
  .about-flip-num { font-size: 40px; }
}
@media (max-width: 480px) {
  .about-flip-grid { grid-template-columns: 1fr; }
  .about-flip-card { height: 220px; }
}

/* ==============================================
   GROWTH ENGINE STEPPER — both pages
   ============================================== */
.growth-engine-section {
  padding: 60px 40px 80px;
  max-width: 1000px;
  margin: 0 auto;
  border-top: 0.5px solid rgba(253,251,247,0.06);
}
.growth-engine-header {
  margin-bottom: 56px;
}
.growth-engine-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 12px;
}
.growth-engine-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each step row */
.growth-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0 28px;
  /* Scroll reveal start */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.growth-step.visible {
  opacity: 1;
  transform: translateY(0);
}
.growth-step:nth-child(1) { transition-delay: 0.05s; }
.growth-step:nth-child(2) { transition-delay: 0.18s; }
.growth-step:nth-child(3) { transition-delay: 0.31s; }
.growth-step:nth-child(4) { transition-delay: 0.44s; }

/* Left column: dot + vertical line */
.growth-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
}
.growth-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(253,251,247,0.5);
  background: transparent;
  flex-shrink: 0;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.growth-step.visible .growth-step-dot {
  border-color: var(--ivory);
  background: rgba(253,251,247,0.12);
  box-shadow: 0 0 10px rgba(253,251,247,0.15);
}
.growth-step-connector {
  width: 1px;
  flex: 1;
  background: rgba(253,251,247,0.08);
  margin-top: 8px;
  margin-bottom: 0;
  min-height: 40px;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.growth-step.visible .growth-step-connector {
  transform: scaleY(1);
}

/* Right column: number + content + image */
.growth-step-right {
  display: grid;
  grid-template-columns: 52px 1fr 280px;
  gap: 24px;
  align-items: start;
  padding: 0 0 48px 0;
}
.growth-step--last .growth-step-right {
  padding-bottom: 0;
}
.growth-step-num {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  color: rgba(253,251,247,0.15);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
  padding-top: 2px;
}
.growth-step.visible .growth-step-num {
  color: rgba(253,251,247,0.4);
}
.growth-step-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ivory);
  margin-bottom: 12px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.growth-step-desc {
  font-size: 14px;
  color: rgba(253,251,247,0.5);
  line-height: 1.8;
  font-family: var(--font-sans);
  font-weight: 300;
}
.growth-step-image {
  border-radius: 4px;
  overflow: hidden;
  background: #1e1e1e;
  aspect-ratio: 4/3;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.growth-step.visible .growth-step-image {
  opacity: 1;
  transform: translateX(0);
}
.growth-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.75) saturate(0.7);
  transition: filter 0.4s ease;
}
.growth-step:hover .growth-step-image img {
  filter: brightness(0.88) saturate(0.85);
}

/* Mobile */
@media (max-width: 768px) {
  .growth-engine-section { padding: 48px 20px 60px; }
  .growth-step-right {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .growth-step-image {
    grid-column: 1 / -1;
    transform: translateX(0);
  }
  .growth-step-num {
    font-size: 32px;
    grid-row: 1;
    grid-column: 1;
  }
  .growth-step-content {
    grid-row: 1;
    grid-column: 2;
  }
  .growth-step-right { padding-bottom: 36px; }
}