/* ============================================================
   Floada — Homepage "Enterprise Dark" re-tone
   Scoped entirely under body.v2-dark so it never touches other pages.
   Loaded AFTER styles.css so it overrides the base theme.

   Design tokens taken from the reference:
     bg #090c11 · card #131720 · lavender #b9accf
     DM Sans (body) + Instrument Serif italic (emphasis)
   ============================================================ */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-sans-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-sans-500-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/dm-sans-600-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-400-italic.woff2') format('woff2');}

/* ============================================================
   1. Scope tokens — remap the SAFE base variables and add a
      dark palette. --accent and --font are only ever used as an
      accent colour / body font, so remapping them here flips every
      downstream usage (eyebrows, chips, showcase highlights, glows)
      to the new tone for free.
   ============================================================ */
body.v2-dark{
  /* accent → lavender */
  --accent:#b9accf;
  --accent-rgb:185,172,207;
  /* body font → DM Sans */
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* dark palette */
  --v2-bg:#090c11;
  --v2-bg-2:#0c1017;
  --v2-surface:#131720;
  --v2-surface-2:#171b23;
  --v2-line:rgba(255,255,255,0.10);
  --v2-line-2:rgba(255,255,255,0.16);
  --v2-ink:#f2f3f6;
  --v2-ink-2:#d6dbe3;
  --v2-ink-3:#a8acb6;
  --v2-ink-4:#7f8593;
  --v2-lav:#b9accf;
  --v2-primary:#f0ebfa;
  --v2-primary-ink:#121019;

  background:var(--v2-bg);
  color:var(--v2-ink-3);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   2. Typography base
   ============================================================ */
body.v2-dark h1,
body.v2-dark h2,
body.v2-dark h3,
body.v2-dark h4{
  color:var(--v2-ink);
  font-family:var(--font);
  font-weight:500;
  letter-spacing:-0.025em;
}
body.v2-dark p{font-family:var(--font);}
body.v2-dark strong{color:var(--v2-ink);}
body.v2-dark .text-white{color:var(--v2-ink);}
body.v2-dark ::selection{background:var(--v2-lav);color:var(--v2-primary-ink);}

/* Emphasis words: Instrument Serif italic, lavender.
   Reused across the page (hero "what's yours", hiw "custom software",
   enterprise "Nervous System"). */
body.v2-dark .hero-title-emph{
  font-family:'Instrument Serif','Fraunces',serif;
  font-style:italic;
  font-weight:400;
  color:var(--v2-lav);
  letter-spacing:0.005em;
}

/* ============================================================
   3. Navigation — transparent over the dark hero, dark glass on scroll
   ============================================================ */
body.v2-dark .nav-logo img{filter:brightness(0) invert(1);opacity:0.95;}
/* The shared stylesheet now paints every nav in dark glass. On this page the
   hero video sits behind the nav, so the un-scrolled nav must be transparent
   and only gain the glass once scrolled. */
body.v2-dark .nav:not(.scrolled){
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:none;
}
body.v2-dark .nav.scrolled{
  background:rgba(9,12,17,0.72);
  backdrop-filter:blur(20px) saturate(1.1);
  border-bottom:1px solid var(--v2-line);
}
body.v2-dark .nav-links a,
body.v2-dark .nav-dropdown-toggle{color:rgba(242,243,246,0.82);}
/* The base :hover paints a light off-white pill — on the dark nav that
   reads as a white blob behind the light text. Use a subtle translucent
   white pill with light text instead. */
body.v2-dark .nav-links a:hover,
body.v2-dark .nav-dropdown-toggle:hover,
body.v2-dark .nav-link-muted:hover{
  color:var(--v2-ink);
  background:rgba(255,255,255,0.09);
}
body.v2-dark .nav-social{color:rgba(242,243,246,0.7);}
body.v2-dark .nav-social:hover{color:var(--v2-ink);}
/* base declares nav-link-muted color with !important — match it so
   "Sign in" reads light on the dark nav */
body.v2-dark .nav-link-muted{color:rgba(242,243,246,0.72)!important;}
body.v2-dark .nav-dropdown-menu{
  background:var(--v2-surface-2);
  border:1px solid var(--v2-line);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
body.v2-dark .nav-dropdown-menu a{color:rgba(242,243,246,0.78);}
body.v2-dark .nav-dropdown-menu a:hover{color:var(--v2-ink);background:rgba(255,255,255,0.05);}
body.v2-dark .nav-toggle span{background:var(--v2-ink);}
/* Mobile menu panel */
body.v2-dark .mobile-menu{background:var(--v2-bg);color:var(--v2-ink);}
body.v2-dark .mobile-menu-label,
body.v2-dark .mobile-menu-item{color:rgba(242,243,246,0.82);}
body.v2-dark .mobile-menu-section{border-color:var(--v2-line);}

/* ============================================================
   4. Buttons — reference primary is a near-white pill
   ============================================================ */
body.v2-dark .btn-primary{
  background:var(--v2-primary);
  color:var(--v2-primary-ink);
  border-color:var(--v2-primary);
}
body.v2-dark .btn-primary:hover{
  background:#fff;
  border-color:#fff;
  box-shadow:0 12px 34px rgba(185,172,207,0.30);
  transform:translateY(-2px);
}
body.v2-dark .btn-primary .btn-arrow{color:var(--v2-primary-ink);}
body.v2-dark .btn:hover .btn-arrow{color:var(--v2-primary-ink);}

/* ============================================================
   5. Section backgrounds — flat near-black with hairline seams
   ============================================================ */
body.v2-dark .section{border-top:1px solid var(--v2-line);}
body.v2-dark .section-light,
body.v2-dark .section-cream{background:var(--v2-bg);}
body.v2-dark .section-light#moments{background:var(--v2-bg-2);border-top:1px solid var(--v2-line);}
body.v2-dark #hiw-summary{border-bottom:1px solid var(--v2-line);}

/* The base .section-dark uses soft-black + a purple grid/aurora. Re-base it
   to the reference near-black; the aurora keeps lavender via --accent remap
   but softened. */
body.v2-dark .section-dark{background:var(--v2-bg);}
body.v2-dark .section-dark::before{opacity:0.5;}
body.v2-dark .section-dark::after{opacity:0.55;}

/* ============================================================
   6. HERO — reference photo hero + route bar
   ============================================================ */
body.v2-dark .hero-v2{
  background:var(--v2-bg);
  /* Fill the full browser window, whatever its size (still scrollable —
     min-height, not height, so the content below stays reachable). */
  min-height:100vh;
  min-height:100svh;
  padding:7rem 0 1.6rem;
  display:flex;
  align-items:stretch;
  overflow:hidden;
}
/* neutralise the base light-hero gradient animation */
body.v2-dark .hero-v2::before{content:none;}
body.v2-dark .hero-v2 .hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:left center;
  opacity:0.88;
  /* Zoom toward the left so the bottom-right sparkle watermark is cropped
     off the right edge (and give the "zoomed to the left" framing).
     The zoom also provides overscan so the handheld drift never reveals
     an edge. */
  transform:scale(1.16);
  transform-origin:left center;
  animation:heroHandheld 13s ease-in-out infinite;
  will-change:transform;
  /* Filmic grade: punchier contrast, slightly desaturated. */
  filter:contrast(1.1) saturate(0.88);
  -webkit-mask-image:none;
          mask-image:none;
  z-index:0;
}
/* Poster <img> carries the hero until the <video> is actually playing. The
   video sits on top but stays transparent until hero.is-playing is set (on the
   video's "playing" event), then crossfades in as the poster fades out. When
   autoplay is blocked (iOS Low Power Mode) the event never fires, so the video
   stays invisible — the still poster shows, with no native play-button badge. */
body.v2-dark .hero-v2.hero-has-poster .hero-bg{transition:opacity 0.6s ease;}
body.v2-dark .hero-v2.hero-has-poster video.hero-bg{opacity:0;}
body.v2-dark .hero-v2.hero-has-poster.is-playing video.hero-bg{opacity:0.88;}
body.v2-dark .hero-v2.hero-has-poster.is-playing .hero-bg-poster{opacity:0;}
/* Cinematic camera move — a slow Ken Burns push (scale breathes 1.17→1.23)
   over a wider handheld drift. The translate is biased leftward (x always
   negative): with transform-origin:left the overscan is on the right, so the
   left edge must never move past the container edge or a black gap shows.
   The growing scale only ever adds right-side overscan, so it stays safe. */
@keyframes heroHandheld{
  0%   { transform:scale(1.11) translate(-9px,0px)    rotate(0deg); }
  15%  { transform:scale(1.14) translate(-16px,5px)   rotate(0.24deg); }
  33%  { transform:scale(1.12) translate(-7px,-6px)   rotate(-0.18deg); }
  50%  { transform:scale(1.14) translate(-15px,-7px)  rotate(0.22deg); }
  67%  { transform:scale(1.15) translate(-7px,5px)    rotate(-0.24deg); }
  84%  { transform:scale(1.12) translate(-12px,7px)   rotate(0.14deg); }
  100% { transform:scale(1.11) translate(-9px,0px)    rotate(0deg); }
}
body.v2-dark .hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* Vignette + scrim: darkened edges, a soft wash behind the headline on the
     left, mostly clear over the footage on the right, plus a top/bottom fade
     for nav + route-bar legibility and the section transition. */
  background:
    /* vignette — darken the edges for cinematic depth/focus */
    radial-gradient(ellipse 130% 118% at 50% 42%,transparent 50%,rgba(9,12,17,0.55) 100%),
    linear-gradient(90deg,rgba(9,12,17,0.48) 0%,rgba(9,12,17,0.24) 42%,rgba(9,12,17,0.30) 74%,rgba(9,12,17,0.48) 100%),
    linear-gradient(180deg,rgba(9,12,17,0.42) 0%,rgba(9,12,17,0.10) 36%,rgba(9,12,17,0.80) 100%);
}
/* Film grain — faint texture with a stepped flicker, like real film. */
body.v2-dark .hero-shade::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:0.09;
  mix-blend-mode:overlay;
  animation:heroGrain 0.55s steps(1) infinite;
}
@keyframes heroGrain{
  0%{transform:translate(0,0);}
  25%{transform:translate(-5%,4%);}
  50%{transform:translate(4%,-4%);}
  75%{transform:translate(-4%,-3%);}
  100%{transform:translate(3%,3%);}
}
/* Reduced motion: hold the camera move and the grain flicker still. */
@media (prefers-reduced-motion: reduce){
  body.v2-dark .hero-v2 .hero-bg,
  body.v2-dark .hero-shade::after{animation:none;}
}
body.v2-dark .hero-v2 .container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  position:relative;
  z-index:2;
  gap:0;
  grid-template-columns:none;
  /* Left-align the hero to the viewport gutter (not the centered container)
     so the copy sits clearly to the left. */
  max-width:none;
  width:100%;
  margin:0;
  padding-left:clamp(1.5rem,5vw,5.5rem);
  padding-right:clamp(1.5rem,4vw,4rem);
}
body.v2-dark .hero-v2 .hero-content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  max-width:1000px;
}
/* font-family / weight / colour inherit from the base h1 rule (section 2) */
body.v2-dark .hero-v2 .hero-title{
  /* Sized against viewport height as well as width (min of the two) so the
     tall multi-line headline never pushes the "Catch it in" route bar below
     the fold on short windows (e.g. a MacBook Air), while still growing to the
     cap on roomy displays. */
  font-size:clamp(2.6rem,min(5.6vw,7.9vh),5.4rem);
  line-height:1.02;
  letter-spacing:-0.035em;
  margin:0 0 clamp(1.9rem,2.6vw,2.6rem);
  max-width:13ch;
}
body.v2-dark .hero-v2 .hero-title-emph{
  font-size:1.06em;
  letter-spacing:-0.01em;
}
body.v2-dark .hero-v2 .hero-subtitle{
  font-size:clamp(1.3rem,1.95vw,1.62rem);
  line-height:1.5;
  color:var(--v2-ink-2);
  margin:0 0 2.1rem;
  max-width:34ch;
  text-align:left;
}
body.v2-dark .hero-v2 .hero-content .btn{margin:0;}

/* Route bar ("CATCH IT IN …") pinned to the hero's lower edge */
body.v2-dark .hero-routebar{
  flex:0 0 auto;
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.4vw,2.5rem);
  padding-top:1.2rem;
  margin-top:1.5rem;
  border-top:1px solid var(--v2-line-2);
}
body.v2-dark .hero-routebar .persona-chips-label{
  font-family:var(--font);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--v2-ink-4);
  margin:0;
  white-space:nowrap;
}
body.v2-dark .hero-routebar-items{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}
body.v2-dark .hero-routebar .persona-chip{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:none;
  border:0;
  border-radius:0;
  padding:0.3rem 1.6rem 0.3rem 0;
  color:var(--v2-ink-2);
  font-size:clamp(0.85rem,1vw,0.98rem);
  font-weight:400;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
body.v2-dark .hero-routebar .persona-chip + .persona-chip{
  padding-left:1.6rem;
  border-left:1px solid var(--v2-line-2);
}
body.v2-dark .hero-routebar .persona-chip::after{
  content:"↗";
  color:var(--v2-ink-4);
  font-size:0.9em;
  transition:transform .25s var(--ease-soft),color .25s var(--ease-soft);
}
body.v2-dark .hero-routebar .persona-chip:hover{
  color:var(--v2-ink);
  background:none;
}
body.v2-dark .hero-routebar .persona-chip:hover::after{
  color:var(--v2-lav);
  transform:translate(2px,-2px);
}
body.v2-dark .hero-down{
  flex:0 0 auto;
  color:var(--v2-ink-4);
  font-size:1.1rem;
  animation:v2HeroDown 2.2s ease-in-out infinite;
}
@keyframes v2HeroDown{0%,100%{transform:translateY(0);opacity:0.5;}50%{transform:translateY(4px);opacity:1;}}

/* ============================================================
   7. Efficiency statement (moved out of the hero) — big centred line
   ============================================================ */
body.v2-dark .efficiency-statement{
  padding:clamp(5rem,9vw,8rem) 0 clamp(4rem,7vw,6rem);
  text-align:center;
  background:var(--v2-bg);
}
body.v2-dark .efficiency-statement .hero-efficiency-line{
  max-width:20ch;
  margin:0 auto;
  font-family:var(--font);
  font-weight:500;
  font-size:clamp(2.1rem,5.2vw,4rem);
  line-height:1.08;
  letter-spacing:-0.035em;
  color:var(--v2-ink-4);
  white-space:normal;
  text-wrap:balance;
}
body.v2-dark .efficiency-statement .hero-efficiency-line strong{
  color:var(--v2-lav);
  font-weight:500;
}

/* ============================================================
   8. ROI stats
   ============================================================ */
/* Rules separate the stats from each other only — the stack is open at both
   ends so the section's top and bottom whitespace read the same. */
body.v2-dark .roi-row{border-top:1px solid var(--v2-line);}
body.v2-dark .roi-row:first-child{border-top:none;}
body.v2-dark .roi-row:last-child{border-bottom:none;}
body.v2-dark .roi-num{
  font-family:var(--font);
  font-weight:500;
  color:var(--v2-ink);
  letter-spacing:-0.04em;
}
body.v2-dark .roi-caption{color:var(--v2-ink-2);}
body.v2-dark .roi-who{color:var(--v2-lav);font-family:var(--font);}
body.v2-dark .roi-desc{color:var(--v2-ink-4);}

/* ============================================================
   9. LIGHT SURFACES — the two light-island sections and the showcase
      card reuse the original light-site accent + font, undoing the
      page-level remap so they render exactly like the light site.
   ============================================================ */
body.v2-dark #moments,
body.v2-dark #hiw-summary,
body.v2-dark .platform-showcase{
  --accent:#7B6D8E;
  --accent-rgb:123,109,142;
  --font:'Zen Kaku Gothic New',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* 9a. Moments / card-trio ("Three things that slip through") */
body.v2-dark #moments{
  background:#f1f0ed;
  border-top:1px solid rgba(11,11,10,0.08);
  color:var(--warm-gray-600);
}
body.v2-dark #moments .card-trio-header h2{color:var(--black);}
body.v2-dark #moments .card-trio-block:nth-child(1){background:#fefefc;}
body.v2-dark #moments .card-trio-block:nth-child(2){background:#f8f8f5;}
body.v2-dark #moments .card-trio-block:nth-child(3){background:#fbfbf8;}
body.v2-dark #moments .card-trio-meta{color:var(--accent);}
body.v2-dark #moments .card-trio-head{color:var(--black);}
body.v2-dark #moments .card-trio-detail{color:var(--warm-gray-700);}

/* ============================================================
   10. LIGHT ISLAND — "Introducing Floada" (#hiw-summary) renders in
       the original light theme, as a bright section within the dark
       page. We reset the scope vars back to the light-site values and
       restore light surfaces/text.
   ============================================================ */
body.v2-dark #hiw-summary{
  background:var(--off-white);
  border-top:1px solid rgba(11,11,10,0.08);
  color:var(--warm-gray-600);
}
body.v2-dark #hiw-summary h2{color:var(--black);}
body.v2-dark #hiw-summary strong{color:var(--warm-gray-800);}
body.v2-dark #hiw-summary .hero-title-emph{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:300;
  color:var(--accent);
}
body.v2-dark .hiw-summary-eyebrow{color:var(--accent);}
body.v2-dark .hiw-summary-text h2{color:var(--black);}
body.v2-dark .hiw-summary-body{color:var(--warm-gray-700);}
body.v2-dark .hiw-summary-flow{
  background:var(--white);
  border:1px solid rgba(11,11,10,0.06);
  box-shadow:var(--shadow-xl);
}
body.v2-dark .hiw-summary-step{border-bottom:1px solid rgba(11,11,10,0.05);}
body.v2-dark .hiw-summary-step-num{color:var(--accent);}
body.v2-dark .hiw-summary-step-label{color:var(--black);}
body.v2-dark .hiw-summary-step-desc{color:var(--warm-gray-600);}
/* Light-island CTA: restore the original dark pill (the near-white pill
   would vanish on the light background). */
body.v2-dark #hiw-summary .btn-primary{
  background:var(--black);
  color:var(--white);
  border-color:var(--black);
}
body.v2-dark #hiw-summary .btn-primary .btn-arrow{color:var(--white);}
body.v2-dark #hiw-summary .btn-primary:hover{background:var(--warm-gray-800);border-color:var(--warm-gray-800);}

/* ============================================================
   10b. Routing "Three places it shows up" — DARK, matching the page.
   ============================================================ */
body.v2-dark #routing.section-dark{background:var(--v2-bg);}
body.v2-dark #routing .routing-showcase-header h2{color:var(--v2-ink);}
body.v2-dark #routing .routing-showcase-header .dark-subtitle{color:var(--v2-ink-4);}
body.v2-dark #routing .routing-showcase-title{color:var(--v2-ink);}
body.v2-dark #routing .routing-showcase-desc{color:var(--v2-ink-3);}

/* Relocated platform-showcase block — sits under the hero with the
   "…Floada catches in minutes." statement. */
body.v2-dark .efficiency-showcase{margin-top:clamp(2.75rem,5vw,4.25rem);}
/* Showcase-first variant: the demo leads (so it sits closer to the hero) and
   the "catches in minutes" statement lands underneath it as the payoff. */
body.v2-dark .efficiency-statement.is-showcase-first .efficiency-showcase{margin-top:0;}
body.v2-dark .efficiency-statement.is-showcase-first .hero-efficiency-line{
  margin-top:clamp(2.5rem,4.5vw,3.75rem);
}

/* ============================================================
   11. Platform showcase — keep its ORIGINAL LIGHT theme (light-site
       accent + font reset in section 9). Its surface tokens (--white,
       --off-white, --warm-gray-*, --black) still resolve to their :root
       defaults, so the widget renders as a bright card "island" exactly
       as it does on the light site — just add a frame for the dark bg.
   ============================================================ */
body.v2-dark .platform-showcase .proto-stage{
  box-shadow:0 40px 120px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06);
}
/* The global "strong → light ink" rule (section 2) is for the dark page; on
   the LIGHT showcase card it renders bold labels white-on-white ("Your Custom
   Screen", the reasoning figures, status text). Restore the widget's own
   dark/accent bold colours. */
body.v2-dark .platform-showcase strong{color:var(--warm-gray-800);}
body.v2-dark .platform-showcase .rsn-key strong{color:var(--accent);}

/* ============================================================
   12. Objections ("But we've got ERP … for that")
   ============================================================ */
body.v2-dark .obj-hero--inline{
  background:linear-gradient(135deg,#0a0d13 0%,#12141c 100%);
}
body.v2-dark .obj-word{
  font-family:'Instrument Serif','Fraunces',serif;
  font-style:italic;
  font-weight:400;
  /* Instrument Serif italic needs air — undo the base -0.02em tracking
     and nudge the size up so it optically matches the DM Sans line. */
  letter-spacing:0.015em;
  font-size:1.06em;
}
body.v2-dark .obj-word.is-active{color:var(--v2-lav);}
body.v2-dark .obj-word-inner{
  padding:3px 22px 9px;
  background:rgba(255,255,255,0.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
body.v2-dark .obj-word.is-active .obj-word-inner{background:rgba(185,172,207,0.12);box-shadow:inset 0 0 0 1px rgba(185,172,207,0.28);}
body.v2-dark .obj-card-body{color:var(--v2-ink-2);}
body.v2-dark .obj-card-cta{background:var(--v2-primary);color:var(--v2-primary-ink);}
body.v2-dark .obj-card-cta:hover{background:#fff;}

/* ============================================================
   13. Enterprise "Nervous System"
   ============================================================ */
body.v2-dark #enterprise-trust .enterprise-copy h2{color:var(--v2-ink);}
body.v2-dark #enterprise-trust .enterprise-copy p{color:var(--v2-ink-3);}
/* the light backdrop panel behind the UI shot reads wrong on near-black;
   swap it for a subtle lavender wash */
body.v2-dark .enterprise-photo-bleed .enterprise-photo-backdrop{
  background-color:#0c1017;
  background-image:
    radial-gradient(ellipse 50% 40% at 18% 20%,rgba(185,172,207,0.14) 0%,transparent 66%),
    radial-gradient(ellipse 46% 46% at 86% 78%,rgba(120,140,200,0.10) 0%,transparent 64%);
}

/* ============================================================
   14. Enterprise security grid
   ============================================================ */
body.v2-dark .enterprise-security-header h2{color:var(--v2-ink);}
body.v2-dark .enterprise-security-header .dark-subtitle{color:var(--v2-ink-4);}
body.v2-dark .enterprise-security-cell{color:var(--v2-ink-2);border-color:var(--v2-line);}
body.v2-dark .enterprise-security-cell p{color:var(--v2-ink-2);}
body.v2-dark #enterprise-security{border-top:1px solid var(--v2-line);border-bottom:1px solid var(--v2-line);}

/* ============================================================
   15. Contact ("Book a Call")
   ============================================================ */
body.v2-dark .contact-section{background:var(--v2-bg);}
body.v2-dark .contact-section h2{color:var(--v2-ink);}
body.v2-dark .contact-subtitle{color:var(--v2-ink-3);}

/* ============================================================
   16. Misc — scroll progress + dark-subtitle
   ============================================================ */
body.v2-dark .scroll-progress-fill{background:var(--v2-lav);}
body.v2-dark .dark-subtitle{color:var(--v2-ink-4);}

/* ============================================================
   17. Responsive
   ============================================================ */
@media (max-width:900px){
  body.v2-dark .hero-v2{min-height:auto;padding:6.5rem 0 2rem;}
  body.v2-dark .hero-v2 .hero-title{font-size:clamp(2.2rem,8vw,3rem);max-width:none;}
  /* The 16:9 clip crops hard to portrait on narrow screens — centre it so
     the subject shows instead of the empty left band (the heavy side-crop
     still hides the bottom-right watermark). */
  body.v2-dark .hero-v2 .hero-bg{object-position:center center;transform-origin:center center;}
  body.v2-dark .hero-routebar{
    flex-direction:column;
    align-items:flex-start;
    gap:0.75rem;
  }
  body.v2-dark .hero-routebar-items{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  body.v2-dark .hero-routebar .persona-chip{
    width:100%;
    padding:0.7rem 0;
    border-left:0;
    border-top:1px solid var(--v2-line);
  }
  body.v2-dark .hero-routebar .persona-chip + .persona-chip{padding-left:0;border-left:0;}
  /* Suppress the base mobile "·" separator between chips */
  body.v2-dark .hero-routebar .persona-chip + .persona-chip::before{content:none;margin:0;}
  body.v2-dark .hero-routebar .persona-chip{font-size:0.95rem;font-weight:400;color:var(--v2-ink-2);}
  body.v2-dark .hero-routebar .persona-chips-label{flex-basis:auto;text-align:left;}
  body.v2-dark .hero-down{display:none;}
}