/* ==========================================================================
   Zero-FOUT Material Symbols Icon Protection
   Eliminates raw text ligatures (e.g. 'expand_more', 'arrow_forward') from flashing
   ========================================================================== */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  vertical-align: middle;
  user-select: none;
  overflow: hidden;
}

/* ==========================================================================
   EVUIZ V4 — Design System stylesheet
   Based on V3. V4 changes: Fraunces display serif; lighter green palette
   (#3AA76D / #237A52 / #0E5A41); near-black pill primary buttons; light footer
   and light mobile nav; tighter section rhythm; richer canvas washes
   (.section-tint, .section-shade); journey .steps restyled as cards;
   desktop services dropdown + mobile services accordion; contact V4
   additions (.contact-panel, .method-mini, .contact-methods).
   Removed: .cta-band, .faq*, .refuse-block (markup removed site-wide).
   Custom CSS only. No libraries. Transform/opacity animation only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET & TOKENS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand tokens */
  --bg: #FFFDF5;
  --surface: #FFFFFF;
  --tint: #F1F8F4;
  --ink: #06170F;
  --muted: #475569;
  --line: rgba(6, 23, 15, 0.09);
  --green: #059669;
  --green-dark: #064E3B;
  --forest: #06170F;
  --sage: #6BAF7A;
  --mint: #DDEEE4;

  /* Motion language — one easing everywhere */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 200ms;
  --t-standard: 700ms;
  --t-hero: 1s;

  /* Radius & rhythm */
  --radius-card: 14px;
  --radius-pill: 999px;
  --section-pad: clamp(1.75rem, 3vw, 2.5rem);
  --container: 1280px;
  --gutter: clamp(1.5rem, 3.5vw, 3rem);

  /* Fonts (loaded via Google Fonts <link> in page <head>) */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { max-width: 68ch; }

ul, ol { list-style: none; }

button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select, textarea { font: inherit; color: var(--ink); }

::selection { background: #BFE6CF; color: var(--forest); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY SCALE
   -------------------------------------------------------------------------- */
h1, .h1 {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

h2, .h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

h3, .h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h4, .h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: var(--muted);
}

.muted { color: var(--muted); }

/* Gradient accent keyword — ONE keyword per H1/H2 max, never whole sentences */
.grad-text {
  background: linear-gradient(100deg, #3AA76D 10%, #8FD0A8 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: clamp(1.5rem, 3.5vw, 3rem) !important;
}

section, .section { padding-block: var(--section-pad); }

.section-tight { padding-block: clamp(2rem, 3.5vw, 3rem); }

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: 1rem;
}

/* Section kicker: green bar + uppercase label */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: 1.25rem;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}
.kicker-light { color: var(--mint); }
.kicker-light::before { background: var(--mint); }

.section-head { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.section-head h2 + p,
.section-head .lead { margin-top: 1rem; }

/* Hairline divider */
.hairline { border: 0; border-top: 1px solid var(--line); }
.hr-pad { margin-block: 0; }

/* Tinted alternate section background */
.tint-bg { background: var(--tint); }
.white-bg { background: var(--surface); }

/* Rich layered canvas washes (V4) */
.section-tint {
  background:
    radial-gradient(700px 380px at 12% 10%, rgba(58, 167, 109, 0.10), transparent 60%),
    radial-gradient(800px 420px at 88% 90%, rgba(58, 167, 109, 0.08), transparent 60%),
    radial-gradient(500px 300px at 70% 20%, rgba(247, 242, 230, 0.9), transparent 65%),
    var(--tint);
}
.section-shade {
  background:
    radial-gradient(600px 340px at 85% 15%, rgba(58, 167, 109, 0.09), transparent 60%),
    radial-gradient(700px 380px at 10% 85%, rgba(240, 230, 200, 0.55), transparent 60%),
    #FAFAF7;
}
/* --------------------------------------------------------------------------
   4. GRAPHIC DEVICES — pure CSS/SVG decorations
   -------------------------------------------------------------------------- */

/* Gradient orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  background: radial-gradient(circle, var(--mint), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.orb-sm { width: 320px; height: 320px; }
.orb-md { width: 440px; height: 440px; }
.orb-lg { width: 560px; height: 560px; }
/* Forest-tinted variant for dark sections */
.orb-forest {
  background: radial-gradient(circle, rgba(58, 167, 109, 0.5), transparent 70%);
  opacity: 0.35;
}

/* Gradient mesh band — layered radial gradients */
.mesh-band {
  background:
    radial-gradient(600px 400px at 15% 20%, #DFF0E4, transparent),
    radial-gradient(500px 500px at 85% 80%, #E9F5EE, transparent),
    var(--bg);
}

/* Dotted grid corner accent — faded via mask */
.dots {
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dots-fade {
  -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 75%);
  mask-image: linear-gradient(135deg, #000 30%, transparent 75%);
}
.dots-accent {
  position: absolute;
  width: 320px;
  height: 240px;
  pointer-events: none;
  z-index: 0;
}

/* Soft blob divider between sections (1 per page max) */
.blob-divider {
  display: block;
  width: 100%;
  height: 90px;
  margin-block: calc(var(--section-pad) * -0.5);
}
.blob-divider path { fill: var(--tint); }

/* "Signal line" motif — rising polyline with dots (growth/automation motif) */
.signal-line { display: block; width: 100%; max-width: 560px; height: auto; }

/* Numbered badges 01–05 */
.num {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--green);
  background: #fff;
}
.num-forest {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--mint);
}

/* Icon system: inline SVG, 1.8px stroke, green/forest */
.ic {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-forest { stroke: var(--forest); }
.ic-mint { stroke: var(--mint); }
.ic-lg { width: 34px; height: 34px; flex-basis: 34px; }
.icon-chip {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  background: var(--tint);
  border: 1px solid var(--line);
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn-primary, .btn-ghost, .btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease),
    box-shadow var(--t-micro) var(--ease);
  will-change: transform;
  white-space: nowrap;
}

.btn-primary {
  background: #202825;
  color: #fff;
  border: 1.5px solid #202825;
}
.btn-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(35, 122, 82, 0.5);
}

.btn-ghost {
  background: #fff;
  color: var(--green);
  border: 1.5px solid var(--green);
}
.btn-ghost:hover {
  background: var(--tint);
  color: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);
}

.btn-light {
  background: #fff;
  color: var(--forest);
  border: 1.5px solid #fff;
}
.btn-light:hover {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--forest);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.35);
}

.btn-sm {
  padding: 0.7rem 1.4rem;
  font-size: 0.9rem;
}

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

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 30px -12px rgba(14, 90, 65, 0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 76px;
  transition: min-height var(--t-micro) var(--ease);
}
.site-header.scrolled .header-inner { min-height: 64px; }

.brand img { height: 38px; width: auto; }
.brand { display: inline-flex; align-items: center; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.main-nav a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  position: relative;
  padding: 0.35rem 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-micro) var(--ease);
}
.main-nav a:hover { color: var(--green); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--green); font-weight: 600; }

.header-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.header-phone {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.header-phone:hover { color: var(--green); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  align-items: center;
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #F4F9F6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 2rem 2.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s 300ms;
}
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s;
}
.mobile-nav a.m-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.mobile-nav.open a.m-link {
  opacity: 1;
  transform: none;
}
.mobile-nav.open a.m-link:nth-child(1) { transition-delay: 60ms; }
.mobile-nav.open a.m-link:nth-child(2) { transition-delay: 120ms; }
.mobile-nav.open a.m-link:nth-child(3) { transition-delay: 180ms; }
.mobile-nav.open a.m-link:nth-child(4) { transition-delay: 240ms; }
.mobile-nav.open a.m-link:nth-child(5) { transition-delay: 300ms; }
.mobile-nav a.m-link[aria-current="page"] { color: var(--green-dark); }
.mobile-nav .m-foot {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-nav .m-foot a { color: var(--green-dark); font-weight: 600; }
.nav-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
  font-size: 1.4rem;
  display: grid;
  place-items: center;
}
body.nav-open { overflow: hidden; }
/* --------------------------------------------------------------------------
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 4vw, 3.75rem) clamp(2rem, 3vw, 2.75rem);
  background:
    radial-gradient(850px 420px at 15% 15%, rgba(5, 150, 105, 0.09), transparent 65%),
    radial-gradient(650px 380px at 85% 20%, rgba(251, 191, 36, 0.08), transparent 60%),
    radial-gradient(500px 320px at 50% 85%, rgba(16, 185, 129, 0.05), transparent 60%),
    transparent;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
}
/* Split hero: copy + animated visual (homepage) */
.hero-split .hero-inner {
  max-width: none;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-visual { position: relative; }
.e4-orbit {
  width: 100%;
  height: auto;
  max-width: 540px;
  margin-inline: auto;
  display: block;
  overflow: visible;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.orbit-ring, .orbit-spin, .orbit-spin-b {
  transform-box: view-box;
  transform-origin: 240px 240px;
}
.orbit-ring { animation: orbit-rotate 70s linear infinite; }
.orbit-ring-b { animation-duration: 100s; animation-direction: reverse; }
.orbit-spin { animation: orbit-rotate 46s linear infinite; }
.orbit-spin-b { animation: orbit-rotate-rev 60s linear infinite; }
.orbit-upright, .orbit-upright-b {
  transform-box: fill-box;
  transform-origin: center;
}
.orbit-upright { animation: orbit-rotate-rev 46s linear infinite; }
.orbit-upright-b { animation: orbit-rotate 60s linear infinite; }
@keyframes orbit-rotate { to { transform: rotate(360deg); } }
@keyframes orbit-rotate-rev { to { transform: rotate(-360deg); } }
.orbit-t { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; fill: var(--forest); }
.orbit-s { font-family: var(--font-display); font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; fill: var(--green); }
.orbit-e4 { font-family: var(--font-display); font-weight: 600; font-size: 36px; fill: #ffffff; }
.orbit-e4s { font-family: var(--font-display); font-weight: 600; font-size: 9.5px; letter-spacing: 0.2em; fill: rgba(255, 255, 255, 0.78); }
@media (max-width: 960px) {
  .hero-split .hero-inner { grid-template-columns: 1fr; }
  .e4-orbit { max-width: 400px; }
}
.hero h1 { margin-block: 1.25rem 1.5rem; }

/* Line-mask reveal: wrap each headline line in .h-line > .h-inner */
.h-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.h-inner {
  display: block;
  transform: translateY(110%);
  animation: rise var(--t-hero) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}
@keyframes rise { to { transform: translateY(0); } }

/* Hero subline, CTAs, trust strip fade-up after */
.hero-fade {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 500ms);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.hero .subline {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 2.25rem;
}
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }

/* Trust strip under hero CTAs */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}
.trust-strip strong { color: var(--ink); font-weight: 600; }
.trust-strip .sep { color: var(--line); }

/* Kinetic section headings: light line-mask reveal on .in */
.k-head { overflow: hidden; }
.k-head > span {
  display: block;
  transform: translateY(104%);
  transition: transform 0.85s var(--ease);
}
.in .k-head > span,
.k-head.in > span { transform: translateY(0); }

/* --------------------------------------------------------------------------
   8. MARQUEE (homepage only, one per page)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  background: #06170F;
  color: #F1F5F9;
  padding-block: 1.15rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: scrollX 35s linear infinite;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F1F5F9;
}
.marquee-track span {
  color: #F1F5F9;
  display: inline-flex;
  align-items: center;
}
.marquee-track span:empty {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
  opacity: 0.75;
  margin: 0 0.35rem;
  flex-shrink: 0;
}
@keyframes scrollX { to { transform: translateX(-50%); } }
.marquee-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F1F5F9;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}
.marquee-item::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
  flex: 0 0 5px;
  opacity: 0.75;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   9. STAT BAND — oversized honest numerals
   -------------------------------------------------------------------------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-block: 1px solid var(--line);
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  color: var(--forest);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
}
/* --------------------------------------------------------------------------
   10. CARDS & GRIDS
   -------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Hover lift (transform + shadow only) */
.lift {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(6, 23, 15, 0.12);
}

/* Capability cards */
.grid-3, .grid-4 { counter-reset: capnum; }
.cap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden;
  counter-increment: capnum;
}
/* Ghost numeral watermark sits fully inside the card's lower corner */
.cap-card::after {
  content: counter(capnum, decimal-leading-zero);
  position: absolute;
  right: 1.25rem;
  bottom: 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(5, 150, 105, 0.05);
  -webkit-text-stroke: 1.5px rgba(5, 150, 105, 0.22);
  pointer-events: none;
  user-select: none;
}
.cap-card h3 { margin-bottom: 0.6rem; font-size: 1.3rem; }
.cap-card p { color: var(--muted); font-size: 0.98rem; flex: 1; }
.cap-card .card-link {
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cap-card .card-link:hover { color: var(--green-dark); gap: 0.65rem; }
.cap-card .card-link { transition: gap var(--t-micro) var(--ease), color var(--t-micro) var(--ease); }
.cap-card .num { margin-bottom: 1.25rem; }

/* Service index rows (services.html): alternating numbered rows */
.svc-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 1.75rem;
  align-items: start;
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
}
.svc-row:last-child { border-bottom: 1px solid var(--line); }
.svc-row .num { margin-top: 0.25rem; }
.svc-row h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 0.5rem; }
.svc-row p { color: var(--muted); max-width: 60ch; }
.svc-row .svc-meta { font-size: 0.9rem; color: var(--green); font-weight: 600; margin-top: 0.5rem; display: block; }
.svc-row .card-link {
  font-weight: 600; color: var(--green); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding-top: 0.4rem;
}

/* Journey steps — V4: same canvas-card language as .cap-card */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  counter-reset: stepnum;
}
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  height: 100%;
  counter-increment: stepnum;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(6, 23, 15, 0.12);
}
/* Ghost numeral watermark sits fully inside the card's lower corner */
.step::after {
  content: counter(stepnum, decimal-leading-zero);
  position: absolute;
  right: 1.25rem;
  bottom: 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(5, 150, 105, 0.05);
  -webkit-text-stroke: 1.5px rgba(5, 150, 105, 0.22);
  pointer-events: none;
  user-select: none;
}
.step .num { margin-bottom: 1.1rem; }
.step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.94rem; color: var(--muted); }

/* Engagement tier cards */
.tier-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.tier-card.featured {
  background: #06170F !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--green);
  box-shadow: 0 24px 60px -24px rgba(58, 167, 109, 0.3);
}
.tier-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tier-card h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.tier-fit { color: #047857; font-weight: 600; font-size: 0.95rem; margin-bottom: 1.25rem; }
.tier-card.featured {
  background: #06170F !important;
  color: #FFFFFF !important;
  border: 1.5px solid #10B981 !important;
  box-shadow: 0 24px 60px -20px rgba(5, 150, 105, 0.4), 0 0 30px rgba(16, 185, 129, 0.25) !important;
}
.tier-card.featured h3,
.tier-card.featured .font-serif {
  color: #FFFFFF !important;
}
.tier-card.featured .tier-fit {
  color: #A6FF3F !important;
  font-weight: 600 !important;
}
.tier-card.featured ul li {
  color: #F8FAFC !important;
}
.tier-card.featured ul li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306170F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat #A6FF3F !important;
}
.tier-card.featured .btn-primary {
  background: #A6FF3F !important;
  color: #06170F !important;
  border-color: #A6FF3F !important;
  font-weight: 700 !important;
}
.tier-card.featured .btn-primary:hover {
  background: #FFFFFF !important;
  color: #06170F !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 12px 28px -8px rgba(166, 255, 63, 0.45) !important;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #047857;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.card-link:hover {
  color: #064E3B;
}
.tier-card ul { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 2rem; flex: 1; }
.tier-card ul li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.96rem; color: var(--ink);
}
.tier-card ul li::before {
  content: "";
  width: 18px; height: 18px; flex: 0 0 18px;
  margin-top: 3px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233AA76D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat,
    var(--tint);
}

/* Differentiator cards */
.diff-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
  height: 100%;
}
.diff-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.diff-card p { color: var(--muted); font-size: 0.96rem; }
/* --------------------------------------------------------------------------
   11. WHATSAPP FORM
   -------------------------------------------------------------------------- */
.wa-form {
  background: #FFFFFF;
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 820px;
  margin-inline: auto;
  box-shadow: 0 20px 50px -15px rgba(6, 23, 15, 0.08), 0 0 0 1px rgba(5, 150, 105, 0.08);
}
.wa-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.75rem 0;
}
.wa-form legend {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #06170F;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-field { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.form-field .req { color: var(--green); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(58, 167, 109, 0.15);
  background: #fff;
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-note {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wa-form .btn-primary {
  width: 100%;
  margin-top: 0.5rem;
  background: #06170F;
  color: #FFFFFF;
  border: 1.5px solid #06170F;
  font-weight: 700;
  padding: 1.1rem 2rem;
  border-radius: var(--radius-pill);
  transition: all var(--t-micro) var(--ease);
}
.wa-form .btn-primary:hover {
  background: #059669;
  border-color: #059669;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(5, 150, 105, 0.5);
}

/* Shortlist / configurator pattern (services & bundles) */
.pick-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
  .pick-list {
    grid-template-columns: 1fr;
  }
}
.pick-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  background: #FFFFFF;
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
  font-weight: 500;
  font-size: 0.93rem;
  user-select: none;
}
.pick-item:hover {
  border-color: var(--sage);
  background-color: #F8FAF9;
  transform: translateY(-1px);
}
.pick-item input {
  accent-color: var(--green);
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.pick-item:has(input:checked) {
  border-color: var(--green);
  background: #F0FDF4;
  color: #064E3B;
  font-weight: 600;
  box-shadow: 0 2px 8px -2px rgba(5, 150, 105, 0.15);
}

/* Contact detail cards */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.contact-card h3 { margin-bottom: 0.75rem; }
.contact-card a.big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--forest);
  display: inline-block;
  margin-bottom: 0.25rem;
}
.contact-card a.big:hover { color: var(--green); }

/* Contact aside: card stack + location chips */
.contact-cards { display: grid; gap: 1.25rem; margin-bottom: 2.75rem; }
.loc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.loc-chip {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.loc-chip:hover { border-color: var(--green); transform: translateY(-2px); }

/* Methodology — E4 Growth System */
.method {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.method-stage {
  position: relative;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: left;
}
.method-stage .num { margin-bottom: 1.25rem; }
.method-stage h3 {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.method-stage .stage-sub {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-bottom: 0.6rem;
}
.method-stage p { font-size: 0.94rem; color: var(--muted); }

/* Mini CTA band (mid-page) */
.mini-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--forest);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 3rem);
  color: #fff;
}
.mini-cta h3 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.mini-cta p { color: rgba(255, 255, 255, 0.75); margin-top: 0.4rem; }
/* --------------------------------------------------------------------------
   12. MOCKUPS — pure CSS/SVG graphic devices
   -------------------------------------------------------------------------- */

/* --- CSS browser mockup --- */
.mockup-browser {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 64px -28px rgba(14, 90, 65, 0.22);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: #FAFAFA;
}
.mockup-dots { display: flex; gap: 7px; }
.mockup-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.mockup-dots i:nth-child(1) { background: #F04438; }
.mockup-dots i:nth-child(2) { background: #F79009; }
.mockup-dots i:nth-child(3) { background: #12B76A; }
.mockup-url {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  font-family: ui-monospace, monospace;
}
.mockup-body { padding: 1.75rem; background: #fff; }
/* Wireframe skeleton blocks */
.skel { border-radius: 8px; background: linear-gradient(100deg, var(--tint), #F2F8F4); }
.skel-hero { height: 150px; margin-bottom: 1.25rem; position: relative; overflow: hidden; }
.skel-hero::after {
  content: "Hero section — headline, subline, CTA";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.78rem; color: var(--green); font-weight: 600;
  letter-spacing: 0.04em;
}
.skel-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.skel-block { height: 74px; }
.skel-line { height: 12px; margin-bottom: 0.6rem; }
.skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; } .skel-line.w40 { width: 40%; }
.skel-btn { height: 34px; width: 120px; border-radius: 999px; background: var(--green); opacity: 0.85; }

/* --- Dashboard mockup --- */
.dash {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 32px 64px -28px rgba(14, 90, 65, 0.22);
  overflow: hidden;
}
.dash-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
}
.dash-head .live {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 600; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.dash-head .live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.dash-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  padding: 1.25rem 1.5rem 0;
}
.kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--bg);
}
.kpi .kpi-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.3rem;
}
.kpi .kpi-val {
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--forest);
}
/* KPI values are illustrative placeholders only — never Evuiz results */
.kpi .kpi-val.illus { color: var(--muted); }
.dash-chart { padding: 1.25rem 1.5rem 1.5rem; }
.dash-chart svg { width: 100%; height: auto; display: block; }
.dash-cap {
  font-size: 0.78rem; color: var(--muted); font-style: italic;
  padding: 0 1.5rem 1.25rem;
}

/* --- Phone / chat-bubble mockup --- */
.phone-mockup {
  width: 300px;
  max-width: 100%;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 36px;
  padding: 14px;
  box-shadow: 0 32px 64px -28px rgba(14, 90, 65, 0.25);
}
.phone-screen {
  background: var(--bg);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.phone-notch {
  width: 110px; height: 22px; background: #fff; border-radius: 0 0 14px 14px;
  margin: 0 auto;
}
.phone-thread {
  flex: 1;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.1rem 0.9rem;
}
.bubble {
  max-width: 82%;
  padding: 0.65rem 0.95rem;
  border-radius: 16px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.bubble.them {
  background: #fff; border: 1px solid var(--line);
  border-bottom-left-radius: 4px; align-self: flex-start; color: var(--ink);
}
.bubble.me {
  background: var(--green); color: #fff;
  border-bottom-right-radius: 4px; align-self: flex-end;
}
.phone-actions {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #fff;
  font-size: 0.8rem; color: var(--muted);
}
.heart-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--muted); padding: 0 0.2rem;
}
.heart-row .h {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tint); display: grid; place-items: center;
  color: var(--green); font-size: 0.7rem;
}
/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: #EFF6F1;
  color: var(--muted);
  margin-top: var(--section-pad);
  border-top: 1px solid var(--line);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--green-dark); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 6vw, 5rem) 3rem;
}
.footer-grid h3 {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1.25rem;
}
.footer-grid nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-grid p { font-size: 0.95rem; margin-top: 1rem; }
.footer-brand img { height: 36px; width: auto; margin-bottom: 1rem; }
.footer-bar {
  border-top: 1px solid var(--line);
  padding-block: 1.4rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.footer-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   14. SCROLL REVEALS & MISC
   -------------------------------------------------------------------------- */
/* data-reveal initial hidden state (JS adds .in); --d stagger step × 90ms */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
/* JS removes will-change after transition to protect mobile compositing */
[data-reveal].settled { will-change: auto; }

/* Delay helper (matches .reveal alias) */
.reveal[data-reveal], .reveal { }

/* Legal draft banner */
.draft-banner {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 0.96rem;
  color: #92400E;
}
.draft-banner strong { display: block; margin-bottom: 0.25rem; color: #78350F; }

/* Founders */
.founder-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  text-align: center;
}
.founder-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tint), var(--mint));
  display: grid; place-items: center;
  margin: 0 auto 1.25rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem;
  color: var(--forest);
}
.founder-card h3 { margin-bottom: 0.3rem; }
.founder-card .role {
  color: var(--green); font-weight: 600; font-size: 0.95rem; margin-bottom: 1rem;
}
.founder-card p { color: var(--muted); font-size: 0.96rem; }

/* Location chips */
.loc-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.4rem;
  font-weight: 600; font-size: 0.95rem;
}
.loc-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.loc-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.loc-note { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }
/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .method { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .orb-lg { width: 420px; height: 420px; }
}

@media (max-width: 900px) {
  /* Header → hamburger */
  .main-nav, .header-cta { display: none; }
  .nav-drop { display: none; }
  .nav-toggle { display: inline-flex; }

  .grid-3, .grid-4, .method { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .svc-row { grid-template-columns: 56px 1fr; }
  .svc-row .card-link { grid-column: 2; padding-top: 0; }
  .mini-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4, .method { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .btn-row .btn-primary, .btn-row .btn-ghost, .btn-row .btn-light { flex: 1 1 100%; }
  .hero .cta-row .btn-primary, .hero .cta-row .btn-ghost { flex: 1 1 100%; }
  .orb { filter: blur(50px); opacity: 0.4; }
  .orb-md, .orb-lg { width: 300px; height: 300px; }
  .dots-accent { width: 200px; height: 150px; }
  .svc-row { grid-template-columns: 44px 1fr; gap: 1rem; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .cap-card, .tier-card, .diff-card { padding: 1.5rem; }
  .footer-bar .container { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   16. POINTER-GATED MOTION — magnetic buttons, parallax targets
   -------------------------------------------------------------------------- */
/* Only enable pointer-motion affordances where a fine pointer + hover exist.
   JS additionally gates with matchMedia before attaching listeners. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary.magnetic { transition: transform 0.3s var(--ease); }
  .lift { /* hover lift defined in §10, desktop-hover only via this gate */ }
  [data-parallax] { will-change: transform; }
}

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 10px 0;
  z-index: 300;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   17. REDUCED MOTION — disable all animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none; }
  .h-inner { transform: none; }
  .hero-fade { opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; }
  .k-head > span { transform: none; }
  .dash-head .live::before { animation: none; }
}
/* --------------------------------------------------------------------------
   18. EXTRA PAGE-BUILDER UTILITIES
   -------------------------------------------------------------------------- */

/* Two-column editorial split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split .split-copy h2 { margin-bottom: 1.25rem; }
.split .split-copy p + p { margin-top: 1rem; }

/* Green check list (scope / deliverables) */
.check-list { display: grid; gap: 0.8rem; }
.check-list li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  font-size: 1rem;
}
.check-list li::before {
  content: "";
  width: 22px; height: 22px; flex: 0 0 22px;
  margin-top: 2px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--green);
}

/* Giant section index watermark */
.chapter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  user-select: none;
}

/* Centered narrow copy column */
.prose-narrow { max-width: 760px; margin-inline: auto; }
.text-center { text-align: center; }
.center-col { display: flex; flex-direction: column; align-items: center; }
.center-col .kicker { justify-content: center; }

/* Section spacing helpers */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }

/* Responsive media frame */
.frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 32px 64px -28px rgba(6, 23, 15, 0.12);
}

/* Decorative positioning helpers for orbs */
.rel { position: relative; }
.orb-tr { top: -140px; right: -140px; }
.orb-tl { top: -140px; left: -140px; }
.orb-br { bottom: -140px; right: -140px; }
.orb-bl { bottom: -140px; left: -140px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* Table of contents (policy pages) */
.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 2rem;
  margin: 0 auto 3rem;
  max-width: 760px;
}
.toc h2 { font-size: 1rem; margin-bottom: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { color: var(--ink); font-weight: 500; text-decoration: none; display: inline-flex; gap: 0.75rem; align-items: baseline; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: 0.8rem; font-weight: 700; color: var(--green); font-family: var(--font-display); }
.toc a:hover { color: var(--green); }

/* Policy article sections */
.policy-sec { max-width: 760px; margin: 0 auto 2.75rem; }
.policy-sec h2 { font-size: 1.5rem; margin-bottom: 1rem; padding-top: 0.5rem; }
.policy-sec p { color: var(--muted); margin-bottom: 1rem; line-height: 1.75; }
.policy-sec ul { color: var(--muted); line-height: 1.75; margin: 0 0 1rem 1.25rem; display: grid; gap: 0.5rem; }
.policy-sec strong { color: var(--ink); }
.updated-line { color: var(--muted); font-size: 0.95rem; margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   19. SERVICES DROPDOWN (desktop nav) + MOBILE SERVICES ACCORDION
   -------------------------------------------------------------------------- */

/* Desktop dropdown */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 0.35rem 0;
  position: relative;
}
.nav-drop-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-micro) var(--ease);
}
.nav-drop:hover .nav-drop-btn,
.nav-drop:focus-within .nav-drop-btn,
.nav-drop.open .nav-drop-btn { color: var(--green); }
.nav-drop:hover .nav-drop-btn::after,
.nav-drop:focus-within .nav-drop-btn::after,
.nav-drop.open .nav-drop-btn::after { transform: scaleX(1); }
.drop-caret {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-micro) var(--ease);
}
.nav-drop:hover .drop-caret,
.nav-drop:focus-within .drop-caret,
.nav-drop.open .drop-caret { transform: rotate(180deg); }
.nav-drop-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 640px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(20, 40, 30, 0.18);
  padding: 1.75rem 2rem;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s 250ms;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel,
.nav-drop.open .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s;
}
.nav-drop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.nav-drop-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-dark);
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.nav-drop-col a {
  display: block;
  padding: 0.45rem 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.nav-drop-col a::after { content: none; }
.nav-drop-col a:hover { color: var(--green-dark); transform: translateX(3px); }
@media (max-width: 1200px) {
  .nav-drop-panel { min-width: 480px; }
  .nav-drop-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile services accordion (inside .mobile-nav) */
.m-services { border-bottom: 1px solid var(--line); }
.m-services-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 0.6rem 0;
}
.m-services-btn .m-caret {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--green-dark);
  transition: transform 300ms var(--ease);
}
.m-services.open .m-services-btn .m-caret { transform: rotate(45deg); }
.m-services-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease);
}
.m-services.open .m-services-list { max-height: 640px; }
.m-services-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-dark);
  margin: 1rem 0 0.25rem;
}
.m-services-list a {
  display: block;
  padding: 0.5rem 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
}
.m-services-list a:hover { color: var(--green-dark); }

/* --------------------------------------------------------------------------
   20. CONTACT V4 ADDITIONS
   -------------------------------------------------------------------------- */

/* Contact hero split — like .hero-split, stacks on mobile */
.contact-hero-split .hero-inner {
  max-width: none;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) {
  .contact-hero-split .hero-inner { grid-template-columns: 1fr; }
}

/* Gradient panel card (green) with dotted texture + glow orb */
.contact-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0E5A41 0%, #237A52 100%);
  color: #fff;
  border-radius: 22px;
  padding: clamp(2rem, 4vw, 2.75rem);
}
.contact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
}
.contact-panel::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -160px;
  top: -260px;
  background: radial-gradient(circle, rgba(143, 208, 168, 0.35), transparent 65%);
  filter: blur(10px);
  animation: panel-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes panel-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-90px, 60px) scale(1.12); }
}
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel h2, .contact-panel h3 { color: #fff; }
.contact-panel .kicker { color: #fff; }
.contact-panel .kicker::before { background: #fff; }
.contact-panel p { color: rgba(255, 255, 255, 0.82); }
/* Journey steps restyled for the dark panel */
.contact-panel .step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}
.contact-panel .step:hover { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.4); }
.contact-panel .step h3 { color: #fff; }
.contact-panel .step p { color: rgba(255, 255, 255, 0.78); }
.contact-panel .step .num {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.contact-panel .step::after { -webkit-text-stroke-color: rgba(255, 255, 255, 0.25); }

/* Small checklist card visual for the contact hero */
.method-mini {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: 0 24px 48px -24px rgba(20, 40, 30, 0.15);
}
.method-mini h3 { font-size: 1.1rem; margin-bottom: 1.1rem; }
.method-mini ul { display: grid; gap: 0.75rem; }
.method-mini li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.95rem;
}
.method-mini li .tick {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 2px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--green);
}

/* Contact method cards grid (reuse .cap-card look in markup) */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .contact-methods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .contact-methods { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. POLICY PAGES (carried from v3 legal build)
   -------------------------------------------------------------------------- */
/* Table of contents (policy pages) */
.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 2rem;
  margin: 0 auto 3rem;
  max-width: 760px;
}
.toc h2 { font-size: 1rem; margin-bottom: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { color: var(--ink); font-weight: 500; text-decoration: none; display: inline-flex; gap: 0.75rem; align-items: baseline; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: 0.8rem; font-weight: 700; color: var(--green); font-family: var(--font-display); }
.toc a:hover { color: var(--green-dark); }

/* Policy article sections */
.policy-sec { max-width: 760px; margin: 0 auto 2.75rem; }
.policy-sec h2 { font-size: 1.5rem; margin-bottom: 1rem; padding-top: 0.5rem; }
.policy-sec p { color: var(--muted); margin-bottom: 1rem; line-height: 1.75; }
.policy-sec ul { color: var(--muted); line-height: 1.75; margin: 0 0 1rem 1.25rem; display: grid; gap: 0.5rem; }
.policy-sec strong { color: var(--ink); }
.updated-line { color: var(--muted); font-size: 0.95rem; margin-top: 1.5rem; }

/* Draft counsel notice (legal pages) */
.draft-banner {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 0.96rem;
  color: #92400E;
}
.draft-banner strong { display: block; margin-bottom: 0.25rem; color: #78350F; }

/* Legal hub document grid */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.doc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.doc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(20, 40, 30, 0.18);
  border-color: var(--mint);
}
.doc-card h3 { margin-bottom: 0.5rem; }
.doc-card p { color: var(--muted); font-size: 0.96rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .doc-grid { grid-template-columns: 1fr; } }

/* Form card elevation + lede (contact page) */
.form-card {
  box-shadow: 0 30px 60px -28px rgba(20, 40, 30, 0.22);
  border-color: rgba(58, 167, 109, 0.25);
}
.form-lede {
  color: var(--muted);
  font-size: 0.98rem;
  margin: -0.5rem 0 1.75rem;
}

/* Accent italic in display headings (serif editorial style) */
h1 em, h2 em, .k-head em { font-style: italic; color: var(--green-dark); }

/* ==========================================================================
   EVUIZ LUXURY DESIGN SYSTEM EXTENSIONS
   ========================================================================== */
.glass-header {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.65) 0%, rgba(254, 243, 199, 0.45) 50%, rgba(255, 255, 255, 0.88) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.18) !important;
  box-shadow: 0 4px 25px -5px rgba(245, 158, 11, 0.08) !important;
}
body, .luxury-ambient-bg {
  background-color: #FAFBF8 !important;
  background-image: 
    radial-gradient(1100px 700px at 15% 5%, rgba(5, 150, 105, 0.08) 0%, transparent 60%),
    radial-gradient(900px 550px at 85% 12%, rgba(251, 191, 36, 0.07) 0%, transparent 55%),
    radial-gradient(1300px 800px at 50% 40%, rgba(16, 185, 129, 0.04) 0%, transparent 65%),
    radial-gradient(900px 650px at 20% 80%, rgba(58, 167, 109, 0.05) 0%, transparent 60%),
    radial-gradient(1000px 700px at 80% 90%, rgba(245, 158, 11, 0.04) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.luxury-grid {
  /* Decoupled to prevent vertical gradient tiling */
  background-size: auto;
}
/* ==========================================================================
   ALL CARDS BORDER GLOW EFFECT (Resting & Hover States)
   Brand-aligned luminous dark green shade & deep emerald perimeter lighting
   ========================================================================== */
.cap-card,
.diff-card,
.step-card,
.step,
.tier-card,
.role-card,
.engine-card,
.case-study-item,
.founder-card,
.contact-card,
.engage-item,
.boxed-glow,
.boxed-glow-light,
[class*="animate-float-"] {
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  box-shadow: 0 8px 24px -4px rgba(6, 23, 15, 0.05), 0 0 0 1px rgba(5, 150, 105, 0.2), 0 0 18px rgba(5, 150, 105, 0.14) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cap-card:hover,
.diff-card:hover,
.step-card:hover,
.step:hover,
.tier-card:hover,
.role-card:hover,
.engine-card:hover,
.case-study-item:hover,
.founder-card:hover,
.contact-card:hover,
.engage-item:hover,
.boxed-glow:hover,
.boxed-glow-light:hover,
[class*="animate-float-"]:hover {
  transform: translateY(-5px);
  border-color: #047857 !important;
  box-shadow: 0 22px 48px -12px rgba(6, 23, 15, 0.14), 0 0 0 1.5px rgba(5, 150, 105, 0.85), 0 0 28px 4px rgba(5, 150, 105, 0.45), 0 0 52px rgba(4, 120, 87, 0.3) !important;
}

.tier-card.featured {
  background: #06170F !important;
  border: 2px solid rgba(5, 150, 105, 0.85) !important;
  box-shadow: 0 24px 60px -20px rgba(4, 120, 87, 0.4), 0 0 0 1px rgba(5, 150, 105, 0.5), 0 0 26px rgba(5, 150, 105, 0.28) !important;
}

.tier-card.featured:hover {
  transform: translateY(-6px);
  border-color: #059669 !important;
  box-shadow: 0 32px 75px -18px rgba(4, 120, 87, 0.55), 0 0 0 2px #059669, 0 0 38px 6px rgba(5, 150, 105, 0.55), 0 0 65px rgba(4, 120, 87, 0.4) !important;
}

.boxed-glow-dark,
.bg-\[\#06170F\].rounded-2xl,
.bg-\[\#06170F\].rounded-3xl,
.bg-slate-900.rounded-2xl {
  border: 1px solid rgba(5, 150, 105, 0.42) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(5, 150, 105, 0.3), 0 0 26px rgba(5, 150, 105, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.boxed-glow-dark:hover,
.bg-\[\#06170F\].rounded-2xl:hover,
.bg-\[\#06170F\].rounded-3xl:hover,
.bg-slate-900.rounded-2xl:hover {
  transform: translateY(-5px);
  border-color: #059669 !important;
  box-shadow: 0 32px 75px -15px rgba(0, 0, 0, 0.85), 0 0 0 2px rgba(5, 150, 105, 0.9), 0 0 42px 6px rgba(5, 150, 105, 0.5), 0 0 75px rgba(4, 120, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.tier-ribbon {
  background: #059669;
}
.grad-text {
  background: linear-gradient(135deg, #06170F 30%, #059669 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-primary {
  background: #06170F;
  color: #FFFFFF;
}
.btn-primary:hover {
  background: #000000;
  color: #10B981;
}

/* ==========================================================================
   EVUIZ BILLBOARD & FLAGSHIP ATRIUM SIGNATURE MOTION STYLES
   ========================================================================== */
/* ========================================================================= */
/* EVUIZ BRAND CINEMATIC SUITE: ANIMATIONS & BOXED GLOW STYLING              */
/* Direct derivation from brand shoots & billboards: Luminous Horizon Arc,   */
/* Obsidian Boxed Glow, Ambient Breathing, and Hairline Orbital Rings        */
/* ========================================================================= */

@keyframes neonHorizonGlow {
  0% {
    opacity: 0.65;
  }
  100% {
    opacity: 1;
  }
}

@keyframes splineDashFlow {
  to { stroke-dashoffset: -200; }
}

@keyframes arcLaserFlow {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: -400; }
}

@keyframes orbitalDriftSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbitalDriftReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes neonGlowPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(5, 150, 105, 0.25), 0 0 30px rgba(4, 120, 87, 0.15);
    border-color: rgba(5, 150, 105, 0.35);
  }
  50% {
    box-shadow: 0 0 34px rgba(5, 150, 105, 0.55), 0 0 65px rgba(4, 120, 87, 0.35);
    border-color: rgba(4, 120, 87, 0.85);
  }
}

@keyframes ambientAuraBreath {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.1);
  }
}

@keyframes beamShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Base Utility Classes */
.neon-horizon-arc {
  filter: drop-shadow(0 0 16px rgba(5, 150, 105, 0.75)) drop-shadow(0 0 35px rgba(4, 120, 87, 0.5));
  animation: neonHorizonGlow 4s ease-in-out infinite alternate;
  will-change: opacity;
}

.spline-flow {
  animation: splineDashFlow 10s linear infinite;
  will-change: stroke-dashoffset;
}

.arc-laser-flow {
  animation: arcLaserFlow 7s linear infinite;
}

.orbital-rings {
  animation: orbitalDriftSlow 60s linear infinite;
  transform-origin: center center;
}

.orbital-rings-reverse {
  animation: orbitalDriftReverse 75s linear infinite;
  transform-origin: center center;
}

.neon-border-pulse {
  animation: neonGlowPulse 4s ease-in-out infinite;
}

.ambient-aura-breath {
  animation: ambientAuraBreath 8s ease-in-out infinite;
}

/* Obsidian Boxed Glow (Billboard Dark Architectural Display) */
.boxed-glow-dark {
  position: relative;
  background: #06170F;
  border: 1px solid rgba(5, 150, 105, 0.42);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 35px -5px rgba(5, 150, 105, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.boxed-glow-dark:hover {
  transform: translateY(-4px);
  border-color: #059669 !important;
  box-shadow: 0 32px 75px -15px rgba(0, 0, 0, 0.85), 0 0 50px 8px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Light Porcelain Boxed Glow (Clean Architectural Cards) */
.boxed-glow,
.boxed-glow-light {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(5, 150, 105, 0.3);
  box-shadow: 0 10px 30px -5px rgba(6, 23, 15, 0.05), 0 0 20px 2px rgba(5, 150, 105, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.boxed-glow:hover,
.boxed-glow-light:hover {
  transform: translateY(-4px);
  border-color: #047857 !important;
  box-shadow: 0 24px 48px -15px rgba(6, 23, 15, 0.14), 0 0 32px 4px rgba(5, 150, 105, 0.35), 0 0 0 1px rgba(5, 150, 105, 0.5) !important;
}

/* Fine Hairline Dot Grid Texture */
.hairline-grid-pattern {
  background-image: radial-gradient(rgba(5, 150, 105, 0.25) 1px, transparent 1px);
  background-size: 24px 24px;
}