:root {
  --bg: #0a0a12;
  --bg-alt: #0d0d17;
  --card: #12121d;
  --border: #27272f;
  --accent: #eab93e;
  --accent-strong: #d19f2c;
  /* Placeholder lavender for panel-hover glow, pending the real brand hex codes */
  --lavender: #a78bfa;
  --lavender-strong: #8b6fd6;
  --white: #f5f5f7;
  --muted: #dcdad4;
  --muted-2: #b0aea8;
  --font-display: 'Poppins', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --max-width: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* ---------- AMBIENT BACKGROUND ---------- */

/* Everything else needs to sit above the ambient background layer */
.site-header, main, .site-footer { position: relative; z-index: 2; }

.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 100px 40px;
  scroll-margin-top: 100px;
  position: relative;
}

#about {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.section-bg-scene {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  pointer-events: none;
  /* Soft fade only top/bottom, so scenes blend into the section above/below —
     no left/right tint, no dividing line. Photos read at true, realistic color. */
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}

.section-llama {
  position: absolute;
  width: 130px;
  height: auto;
  top: 24px;
  right: 24px;
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
}
.section-llama.flip { transform: scaleX(-1); }

@media (max-width: 900px) {
  .section-llama { width: 90px; top: 12px; right: 12px; }
}
@media (max-width: 600px) {
  .section-llama { display: none; }
}

.kicker {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 20px;
  padding: 6px 14px;
  border-radius: 7px;
  background: rgba(8, 8, 12, 0.55);
  border: 1px solid rgba(234, 185, 62, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.kicker:hover {
  background: rgba(8, 8, 12, 0.78);
  border-color: var(--accent);
  color: #f5cf5f;
  box-shadow: 0 0 26px rgba(234, 185, 62, 0.35);
}

/* ---------- SCROLL REVEAL ---------- */
/* Placed early so component-specific :hover rules (defined later) still win the cascade. */
.reveal {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.body-text {
  font-size: 16px;
  color: var(--white);
  margin-bottom: 20px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95);
}
.body-text.muted { color: var(--muted); font-style: italic; }
.intro-text { color: var(--muted); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95); }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 20px 40px;
  transition: all 0.3s ease;
}

.site-header.scrolled {
  padding: 14px 40px;
}

.nav-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 13, 23, 0.32);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled .nav-inner {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(13, 13, 23, 0.5);
}

@media (prefers-reduced-transparency: reduce) {
  .nav-inner {
    background: rgba(13, 13, 23, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-icon { width: 52px; height: 52px; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-word {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
}
.logo-sub {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--muted-2);
}

.nav-links-wrap {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}
.nav-links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Tablet / narrow-desktop: the full link list still fits without a hamburger,
   it just needs to sit tighter once the "Book a Call" button has dropped out. */
@media (max-width: 1040px) {
  .nav-links { gap: 15px; }
  .nav-link { font-size: 13px; }
}
.nav-link {
  font-size: 14px;
  color: var(--muted);
  padding-bottom: 4px;
  transition: color 0.2s, transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
  display: inline-block;
}
.nav-link:hover { color: var(--white); }
.nav-link.active { color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link:hover { transform: none; }
}

.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: rgba(167, 139, 250, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.18);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1), height 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease;
}
.nav-indicator.visible { opacity: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s, opacity 0.2s;
}
.btn:hover { transform: translateY(-1px); opacity: 0.9; }
.btn-primary { background: var(--white); color: #0a0a12; }
.btn-outline { border: 1px solid var(--border); color: var(--white); }
.arrow { display: inline-block; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span {
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero { padding-top: 60px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.hero-copy { max-width: 480px; }

.hero-stagger {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-stagger.in { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .hero-stagger { opacity: 1; transform: none; transition: none; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: rgba(10, 10, 18, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 28px;
}
.badge-dot { color: var(--accent); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.9);
}
.hero-title em { font-size: 1.05em; font-weight: 600; }
.hero-title-line { display: inline-block; }

.hero-desc {
  color: var(--muted);
  font-size: 17px;
  max-width: 480px;
  margin-bottom: 36px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95);
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.llama-companion {
  position: fixed;
  bottom: 0;
  left: 24px;
  width: 150px;
  --tx: 0px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateY(40px) translateX(var(--tx));
  transition:
    opacity 0.5s ease,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.llama-companion.visible { opacity: 1; transform: translateY(0) translateX(var(--tx)); }
.llama-companion::before {
  /* A soft glow that always travels with the llama, so whatever page card
     happens to be scrolling behind it at any given moment never shows
     through on its own and reads as a second, misaligned box. */
  content: '';
  position: absolute;
  inset: -14% -20%;
  background: radial-gradient(ellipse at 50% 55%, rgba(10, 10, 18, 0.55) 0%, rgba(10, 10, 18, 0.28) 45%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.llama-companion canvas {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  /* Kept tight and subtle on purpose: the transparent margin added around the
     llama (for ear breathing room) gives a large blur radius empty space to
     visibly spread into, reading as a soft rectangular halo/box instead of a
     shadow hugging the llama itself. */
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

@media (max-width: 600px) {
  .llama-companion { width: 96px; }
}

/* ---------- STATS ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.45s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s ease, background 0.45s ease;
}

.stat-row .stat-card:nth-child(1):not(.revealed),
.stat-row .stat-card:nth-child(2):not(.revealed) {
  transform: translateX(-45px);
}
.stat-row .stat-card:nth-child(3):not(.revealed),
.stat-row .stat-card:nth-child(4):not(.revealed) {
  transform: translateX(45px);
}
.stat-card:hover {
  border-color: var(--lavender);
  transform: translateY(-5px);
  background: rgba(35, 28, 54, 0.14);
  box-shadow: 0 18px 44px rgba(167, 139, 250, 0.32), 0 0 0 1.5px rgba(167, 139, 250, 0.55) inset;
}
.stat-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ---------- SERVICES ---------- */
.services-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0;
  transition: gap 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 50px;
}
.services-grid {
  flex: 1 1 100%;
  min-width: 0;
  transition: flex-basis 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.services-wrap.panel-open .services-grid {
  flex-basis: 44%;
  grid-template-columns: repeat(2, 1fr);
}

.service-detail-panel {
  flex: 0 0 0%;
  min-width: 0;
  margin-top: 50px;
  border-radius: 20px;
  border: 1px solid transparent;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  max-height: 640px;
  overflow-y: auto;
  transition: flex-basis 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.35s ease 0.1s, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.services-wrap.panel-open .service-detail-panel {
  flex-basis: 52%;
  opacity: 1;
  padding: 32px;
}
.service-detail-close {
  position: sticky;
  top: 0;
  float: right;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(10, 10, 18, 0.6);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, transform 0.2s;
}
.service-detail-close:hover { border-color: var(--lavender-strong); transform: scale(1.08); }
.service-detail-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.service-detail-body h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 12px; clear: both; }
.service-detail-intro { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.service-detail-chart { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 12px; margin-bottom: 20px; }
.service-detail-chart svg { display: block; }
.chart-caption { font-size: 12px; color: var(--muted-2); margin-top: 10px; line-height: 1.5; }
.service-detail-section { margin-bottom: 20px; }
.service-detail-section h4 { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--white); }
.service-detail-section p, .service-detail-section li { font-size: 14px; color: var(--muted); line-height: 1.6; }
.service-detail-section ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.service-detail-section ul li { position: relative; padding-left: 16px; }
.service-detail-section ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--lavender); }

@media (max-width: 1040px) {
  .services-wrap { flex-direction: column; }
  .services-wrap.panel-open .services-grid { flex-basis: auto; }
  .services-wrap.panel-open .service-detail-panel { flex-basis: auto; width: 100%; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-wrap, .services-grid, .service-detail-panel { transition: none; }
}
.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.45s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s ease;
}
.service-card:hover {
  border-color: var(--lavender-strong);
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(167, 139, 250, 0.55);
}

.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; position: relative; z-index: 1; }
.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.corner-arrow { color: var(--muted-2); font-size: 16px; }
.service-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 10px; position: relative; z-index: 1; }
.service-card p { font-size: 14px; color: var(--muted); position: relative; z-index: 1; }

/* ---------- WHY ENPLYRA ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 50px;
}
.why-card {
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.45s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s ease, background 0.45s ease;
}
.why-card:hover {
  border-color: var(--lavender-strong);
  transform: translateY(-6px);
  background: rgba(35, 28, 54, 0.55);
  box-shadow: 0 24px 48px -24px rgba(167, 139, 250, 0.5);
}
.why-card .icon-box { margin-bottom: 20px; transition: border-color 0.25s ease, color 0.25s ease; }
.why-card:hover .icon-box { border-color: var(--lavender-strong); color: var(--lavender); }
.why-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.why-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }


/* ---------- TIMELINE ---------- */
.timeline { max-width: 720px; margin-top: 50px; }
.timeline-item { display: flex; gap: 28px; padding-bottom: 24px; }
.timeline-marker { display: flex; flex-direction: column; align-items: center; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 24px; }
.timeline-line { width: 1px; flex: 1; background: var(--border); margin-top: 4px; }
.timeline-content {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px 24px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.timeline-content:hover {
  border-color: var(--lavender-strong);
  box-shadow: 0 14px 32px -18px rgba(167, 139, 250, 0.45);
}
.timeline-num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--muted-2);
  font-weight: 300;
  display: block;
}
.timeline-content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 4px 0 10px;
}
.timeline-content p {
  color: var(--muted);
  font-size: 15px;
  max-width: 520px;
}

.process-layout {
  display: grid;
  grid-template-columns: 1fr;
}
.process-left .timeline { margin-top: 50px; max-width: 720px; }

/* ---------- FAQ + CONTACT ---------- */
.faq-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-category-group {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.faq-category-group:last-child { border-bottom: none; padding-bottom: 0; }
.faq-category-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
}
.faq-category-chevron { font-size: 20px; line-height: 1; color: var(--accent); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.faq-category-group.open .faq-category-chevron { transform: rotate(180deg); }
.faq-category-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-category-group.open .faq-category-items { grid-template-rows: 1fr; }
.faq-category-items-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-category-group.open .faq-category-items-inner { padding-top: 4px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.faq-item:hover {
  border-color: var(--lavender-strong);
  box-shadow: 0 14px 32px -18px rgba(167, 139, 250, 0.45);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-align: left;
}
.faq-chevron { transition: transform 0.25s; color: var(--muted-2); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer p { color: var(--muted); font-size: 14px; padding: 0 22px 18px; margin: 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-left { display: flex; flex-direction: column; }
.kicker.small { margin-bottom: 10px; }
.founder-page-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.founder-page-body .body-text { max-width: 640px; }
.founder-signoff { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 15px; margin-top: 2px; }

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.contact-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
a.contact-info-row:hover { color: var(--accent); }
.contact-info-row .icon-box { color: var(--accent); flex-shrink: 0; }

.strategy-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  overflow: hidden;
}
.strategy-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 175, 107, 0.35), transparent 70%);
}
.strategy-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 8px 0 10px; position: relative; }
.strategy-card p { color: var(--muted); font-size: 14px; margin-bottom: 20px; max-width: 380px; position: relative; }
.strategy-card .btn { position: relative; }

.contact-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 100px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.form-field input, .form-field textarea, .form-field select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7897' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.form-field select:invalid { color: var(--muted); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted-2); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--accent-strong);
}
.form-field-label { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.form-actions .btn { flex: 1 1 200px; justify-content: center; }
.form-consent { font-size: 12px; color: var(--muted-2); }
.form-status { font-size: 14px; color: var(--accent); min-height: 20px; }

/* ---------- FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 60px 40px;
}
.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-logo { width: 40px; height: 40px; object-fit: contain; margin-bottom: 16px; }
.footer-tagline { color: var(--muted); font-size: 14px; max-width: 320px; margin-bottom: 20px; }
.social-row { display: flex; gap: 10px; }
.social-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--muted);
}
.footer-heading { display: block; font-size: 12px; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 18px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a:not(.btn), .footer-text { font-size: 14px; color: var(--muted); }
.footer-col a:hover { color: var(--white); }
.footer-email { color: var(--white) !important; }
.footer-cta { margin-top: 10px; width: fit-content; }

/* ---------- BLOG ---------- */
.blog-header { max-width: var(--max-width); margin: 0 auto; padding: 40px 40px 0; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin-bottom: 30px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95); }
.back-link:hover { color: var(--white); }
.blog-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 5vw, 48px); margin-bottom: 20px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9); }
.blog-desc { color: var(--muted); max-width: 560px; margin-bottom: 50px; font-size: 16px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95); }

.post-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.post-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease;
}
.post-card:hover {
  border-color: var(--lavender-strong);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -22px rgba(167, 139, 250, 0.45);
}
.post-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-2); margin-bottom: 16px; }
.post-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.post-card p { color: var(--muted); font-size: 14px; margin-bottom: 20px; flex: 1; }
.read-link { color: var(--accent); font-size: 14px; font-weight: 600; }

/* ---------- GLASS PANELS ----------
   Same frosted material as the navbar: translucent + blurred, so photo
   backgrounds show through instead of a flat opaque box. */
.stat-card,
.service-card,
.why-card,
.faq-item,
.timeline-content,
.post-card,
.contact-form-card,
.strategy-card,
.service-detail-panel,
.icon-box {
  background: rgba(18, 18, 29, 0.28);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.08);
  /* At this opacity, bright parts of the photo behind (sky, light grass)
     can wash out light/muted text. text-shadow is inherited, so this one
     declaration keeps every label/date/body line inside these cards
     legible regardless of what's behind it, without adding back opacity. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-transparency: reduce) {
  .stat-card,
  .service-card,
  .why-card,
  .faq-item,
  .timeline-content,
  .post-card,
  .contact-form-card,
  .strategy-card,
  .service-detail-panel,
  .icon-box {
    background: #171724;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- RESPONSIVE ---------- */
/* "Book a Call" is the first thing to drop — frees enough room that the
   full (compacted) link list keeps working as a real nav well past this,
   instead of switching to a hamburger while there's still tablet/desktop
   space to work with. */
@media (max-width: 1040px) {
  .nav-cta { display: none; }
}

@media (max-width: 900px) {
  .section-grid, .hero-grid, .faq-contact-grid, .contact-grid, .process-layout { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
}

/* Hamburger only kicks in once the full (already compacted) link list
   genuinely stops fitting — measured at ~820px. Above that (tablet
   landscape, laptops, desktop) the real nav stays visible. Below that
   (phones, and portrait tablets) it switches to the hamburger. */
@media (max-width: 830px) {
  .nav-links { display: none; }
  .nav-indicator { display: none; }
  .menu-toggle { display: flex; }
  /* nav-links-wrap collapses to zero width once its only children (nav-links,
     nav-indicator) are hidden — being position:relative, it would otherwise
     become the positioning context for the dropdown below, anchoring it to
     that zero-width point instead of spanning the header. Let .nav-inner
     (which is also position:relative) be the anchor instead. */
  .nav-links-wrap { position: static; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(13, 13, 23, 0.92);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    transform-origin: top right;
    animation: navMenuIn 0.22s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .nav-links.open .nav-link {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s;
  }
  .nav-links.open .nav-link:hover,
  .nav-links.open .nav-link.active {
    background: rgba(255, 255, 255, 0.07);
  }
  @media (hover: hover) and (pointer: fine) {
    .nav-links.open .nav-link:hover { transform: none; }
  }
}

@keyframes navMenuIn {
  from { opacity: 0; transform: scale(0.95) translateY(-6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links.open { animation: none; }
}

/* Below ~430px the logo lockup (icon + wordmark + tagline) no longer fits
   next to the hamburger button — nav-inner doesn't clip overflow, so the
   button was rendering outside the pill entirely instead of wrapping or
   shrinking. Drop the tagline and shrink the icon so the row fits again. */
@media (max-width: 430px) {
  .logo-sub { display: none; }
  .logo-icon { width: 36px; height: 36px; }
  .logo-lockup { gap: 8px; }
  .logo-word { font-size: 17px; }
}

@media (max-width: 900px) {
  /* 100vw can overshoot the true viewport width on mobile browsers, causing
     horizontal overflow that gets clipped on the right. Drop the full-bleed
     breakout below tablet width and just fill the section itself instead. */
  .section-bg-scene {
    left: 0;
    transform: none;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .section { padding: 70px 22px; }
  .contact-form-card { padding: 28px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}