/* ===================== tokens.css ===================== */
/* ==========================================================================
   aCXend — Design tokens
   Brand: Royal Blue #0E4FC4 · Deep Navy #0A1F4C
   Single source of truth for color, spacing, radius, motion, depth, z-index.
   Load this file first on every page.
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #0A1F4C;
  --navy-deep:   #061434;
  --ink:         #0B1220;
  --royal:       #0E4FC4;
  --royal-hover: #0B40A3;
  --azure:       #2F7BE0;
  --sky:         #6FA8F2;
  --cta-1:       #0A5BFF;
  --cta-2:       #4DA3FF;

  /* Neutrals */
  --white: #FFFFFF;
  --cloud: #F2F5FA;
  --slate: #5B6B85;
  --line:  #E3E8F1;

  /* Layout */
  --container: 1240px;
  --gutter: 28px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-lux: cubic-bezier(.16,1,.3,1);
  --dur: .3s;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(10,31,76,.06);
  --shadow-md: 0 12px 30px -12px rgba(10,31,76,.18);
  --shadow-lg: 0 30px 60px -20px rgba(10,31,76,.25);
  --shadow-cta: 0 12px 28px rgba(10,91,255,.32);

  /* Z-scale */
  --z-nav: 100;
  --z-skip: 1000;
}


/* Responsive token overrides */
@media (max-width: 640px) {
  :root { --gutter: 20px; }
}

/* ===================== base.css ===================== */
/* ==========================================================================
   aCXend — Base
   Reset, base element styles, layout primitives (container/section/eyebrow),
   and the button system. Depends on tokens.css. Load on every page.
   ========================================================================== */

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a, button, [role="button"] { cursor: pointer; touch-action: manipulation; }
button { font: inherit; border: 0; background: none; color: inherit; }
ul { list-style: none; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', sans-serif;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 6.4vw, 5.2rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.3; }
h4 { font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; }
p  { color: var(--slate); max-width: 62ch; }
.accent { color: var(--royal); }

/* Focus — visible, on-brand */
:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 4px; }

/* Skip link */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: var(--z-skip);
  background: var(--navy); color: var(--white);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- 3. Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 820px; }
.section { padding-block: clamp(72px, 9vw, 136px); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--cloud { background: var(--cloud); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--royal);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow--light { color: var(--sky); }
.eyebrow--sky { color: var(--sky); }

.section h2 { margin-bottom: 20px; }
.section p + p { margin-top: 14px; }
.section .btn { margin-top: 30px; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: .95rem;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn .arrow { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-icon { width: 15px; height: 15px; flex: none; }

.btn-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -8px rgba(10,91,255,.45); }

.btn-secondary { color: var(--navy); border: 1px solid var(--line); background: var(--white); }
.btn-secondary:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-ghost { color: var(--white); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); transform: translateY(-2px); }

.btn-light { color: var(--navy); background: var(--white); box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(0,0,0,.45); }

.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-nav { padding: 11px 22px; min-height: 44px; font-size: .88rem; }


/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .btn-lg { width: 100%; justify-content: center; }
}

/* Prevent horizontal overflow site-wide (item 2).
   Use clip (not hidden): hidden on the root turns it into a scroll container
   whose height equals its content, which freezes native/reduced-motion
   scrolling. clip contains the x-overflow while leaving vertical scrolling
   to the viewport. */
html, body { overflow-x: clip; }
body { max-width: 100%; }

/* ===================== components.css ===================== */
/* ==========================================================================
   aCXend — Components
   Reusable, page-agnostic UI blocks: navigation, footer, marquee, split
   sections, capability/value/model cards, CTA banner, page-hero, services,
   contact form, and FAQ accordion. Depends on tokens.css + base.css.
   Load on every page that uses these blocks.
   ========================================================================== */

/* ---------- 5. Navigation ---------- */
/* Floating "pill" navigation: the wrapper is a transparent, fixed layer with
   side/top inset; the inner .nav (a .container) is the rounded white capsule
   that lifts off the page with a soft shadow. */
.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: 14px clamp(12px, 2.5vw, 32px) 8px;
  background: transparent;
  border-bottom: 0;
  transition: padding var(--dur) var(--ease);
}
.nav-wrap.scrolled { padding-top: 8px; }
.nav-wrap.scrolled .nav { box-shadow: 0 16px 40px -12px rgba(10,31,76,.30), 0 3px 10px rgba(10,31,76,.10); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 34px -10px rgba(10,31,76,.22), 0 2px 8px rgba(10,31,76,.08);
  padding: 9px 12px 9px 26px;
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 40px; width: auto; }
.brand-word { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--navy); letter-spacing: -.02em; }
.brand-word b { color: var(--royal); }
.brand-word--light { color: var(--white); }

.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #2a3140;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover { color: var(--royal); background: var(--cloud); }
.nav-link.active { color: var(--ink); }
/* Active indicator: a small teal/cyan dot after the label (replaces the
   previous underline). Sits inline via the nav-link's flex gap. */
.nav-link.active::after {
  content: ""; position: static;
  width: 7px; height: 7px; border-radius: 50%;
  background: #12b8c6;
}

.caret { display: inline-flex; padding: 4px; border-radius: 6px; color: currentColor; }
.caret svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }

/* Dropdown — desktop hover + keyboard focus-within */
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 230px; padding: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dropdown a:hover { background: var(--cloud); color: var(--royal); }

@media (min-width: 992px) {
  .nav-item:hover > .dropdown,
  .nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-item:hover .caret svg,
  .nav-item:focus-within .caret svg { transform: rotate(180deg); }
}

.nav-cta { display: flex; align-items: center; gap: 14px; }
/* Nav CTA stays a rounded blue pill (from .btn/.btn-primary) — just uppercase
   to match the new nav treatment. */
.btn-nav { text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; border-radius: var(--radius-sm);
}
.menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--navy); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ---------- 7. Marquee — capability strip ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--white); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track.js-marquee { animation: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: stretch; }

/* Each capability is a fixed-width cell — icon badge, bold label, short
   supporting line — separated by hairline dividers so the strip reads as
   one continuous premium ribbon rather than a row of floating cards. */
.mq-item {
  /* Each cell hugs its own content and never wraps, so every ticker box is
     a clean single-line title + single-line descriptor at a consistent
     height. (Fixed-width cells used to force long labels to wrap onto a
     second line, breaking the alignment.) */
  flex: none; width: auto; white-space: nowrap;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 26px 34px;
  border-right: 1px solid var(--line);
}
.mq-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1;
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  box-shadow: 0 8px 16px -8px rgba(10,91,255,.45);
}
.mq-icon--dark {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  box-shadow: 0 8px 16px -8px rgba(6,20,52,.5);
}
.mq-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .95rem; color: var(--navy); white-space: nowrap; }
.mq-desc { font-size: .82rem; color: var(--slate); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }


/* ---------- 8. Split sections ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(40px, 6vw, 90px);
}
.split--reverse .split-body { order: 2; }
.split--reverse .split-visual { order: 1; }

/* Visual panels — professional imagery, replacing the earlier SVG/board/
   meter panels so the "How we work", "Where we add value", and "Flexible
   by design" sections lean on real photography instead of illustrated
   data that a new company doesn't yet have. */
.split-visual { margin: 0; }
.split-photo {
  position: relative;
  /* Section images are forced to a perfect 1:1 square so image + text
     columns stay balanced across every page (About, Overview, service
     detail, etc.). object-fit: cover on the <img> prevents distortion. */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: clip;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--cloud); /* shows while the image decodes */
}
.split-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.panel-tag {
  margin-top: 22px; font-family: 'Manrope', sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  color: var(--slate); text-transform: uppercase;
}


/* ---------- 9. Capabilities ---------- */
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end; gap: 32px; margin-bottom: clamp(44px, 5vw, 64px);
}
.section-head h2 { margin-bottom: 0; }
.section-head p { justify-self: end; align-self: end; }

/* Centered variant — heading and supporting text stack in a single
   column instead of sitting side by side in the default two-column grid. */
.section-head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 16px;
}
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { justify-self: center; align-self: auto; max-width: 640px; margin-inline: auto; }

.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cap-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 26px 26px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-lux), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  overflow: clip;
}
.cap-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--cta-1), var(--cta-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-lux);
}
.cap-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47,123,224,.4); }
.cap-card:hover::before { transform: scaleX(1); }

.cap-num {
  position: absolute; top: 20px; right: 22px;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .82rem;
  color: var(--line); letter-spacing: .08em;
  transition: color var(--dur) var(--ease);
}
.cap-card:hover .cap-num { color: var(--sky); }
.cap-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(10,91,255,.08), rgba(77,163,255,.14));
  color: var(--royal);
  transition: transform var(--dur) var(--ease-lux), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cap-icon svg { width: 26px; height: 26px; }
.cap-card:hover .cap-icon { transform: scale(1.06) rotate(-3deg); background: linear-gradient(135deg, var(--cta-1), var(--cta-2)); color: var(--white); }
.cap-card p { font-size: .92rem; flex: 1; }
.cap-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .86rem; color: var(--royal);
}
.cap-link .arrow { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.cap-card:hover .cap-link .arrow { transform: translateX(4px); }


/* ---------- 10. CTA banner ---------- */
.cta-banner {
  position: relative; overflow: clip;
  padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 88px);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(140deg, var(--navy-deep), var(--navy) 55%, #10306E);
  box-shadow: var(--shadow-lg);
}
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: rgba(226,236,252,.78); }

/* Background video (layer 0) — muted/looped ambient footage, subtle rather
   than distracting; sits on top of the gradient fallback above. */
.cta-video-wrap { position: absolute; inset: 0; z-index: 0; }
.cta-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease-lux);
}
.cta-video.is-ready { opacity: .5; }

/* Dark readability scrim (layer 1) — echoes the brand gradient so the video
   feels integrated rather than pasted on top. */
.cta-video-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(140deg, rgba(6,20,52,.90), rgba(10,31,76,.82) 55%, rgba(16,48,110,.80));
}

/* Ambient glow (layer 2) + content (layer 3) sit above the video/overlay */
.cta-glow {
  position: absolute; z-index: 2; width: 500px; height: 500px; top: -220px; right: -140px;
  border-radius: 50%; filter: blur(90px);
  background: radial-gradient(circle, rgba(77,163,255,.4), transparent 65%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Centered content column */
.cta-content {
  position: relative; z-index: 3;
  max-width: 640px; margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.cta-content .eyebrow { justify-content: center; }
.cta-content p { margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .cta-video-wrap, .cta-video { display: none !important; }
}


/* ---------- 11. Footer ---------- */
.footer { background: var(--navy-deep); color: rgba(226,236,252,.75); padding-block: clamp(56px, 7vw, 88px) 28px; }
.footer a { transition: color var(--dur) var(--ease); }
.footer a:hover { color: var(--white); }

.footer-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(36px, 5vw, 72px); }
.footer-logo img { height: 42px; width: auto; }
.footer-address { font-style: normal; margin-top: 20px; display: grid; gap: 10px; font-size: .92rem; }

.footer-primary { display: grid; gap: 8px; margin-bottom: 34px; }
.footer-primary a { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--white); }
.footer-primary a:hover { color: var(--sky); }

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-cols h4 { color: var(--sky); font-size: .74rem; margin-bottom: 6px; }
.footer-cols ul { display: grid; gap: 9px; align-content: start; font-size: .9rem; }

.footer-giant {
  display: flex; align-items: baseline; gap: 8px;
  margin-block: clamp(40px, 6vw, 72px) 30px;
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(4rem, 14vw, 12.5rem); line-height: .95; letter-spacing: -.04em;
  color: rgba(255,255,255,.08);
  user-select: none;
  transition: color .6s var(--ease);
}
.footer-giant:hover { color: rgba(111,168,242,.16); }
.footer-giant svg { width: .5em; height: .5em; stroke-width: 2; }

.footer-bar {
  display: flex; align-items: center; gap: 18px;
  padding-block: 22px; border-top: 1px solid rgba(255,255,255,.1);
}
.footer-follow-label { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,.08); border-color: var(--sky); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: rgba(226,236,252,.5);
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 20px; }


/* ---------- Page hero ----------
   Premium cinematic video hero for every inner page (About, Services,
   Contact, individual service pages, etc). Full-width autoplay/muted/
   loop/playsinline background video + a subtle dark overlay (20–35%,
   per spec) for text legibility, spanning the entire hero behind BOTH
   columns below.

   Two-column composition, mirroring the Home hero's own two-column
   layout so inner pages read as an extension of it: left column is
   left-aligned content (eyebrow, H1, paragraph, CTAs), right column is
   a large rounded photo. Stacks to one column (content, then image) on
   mobile. The Home page hero itself is a separate, unique component
   (see home.css) — this is not it.

   The extra .page-hero-dim layer (opacity 0 by default) is NOT part of
   this static look — it's owned by the reverse curtain-reveal engine in
   effects.css, which scrubs its opacity as the hero gets covered. */
.page-hero {
  position: relative;
  min-height: clamp(560px, 86vh, 900px);
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: clip;
  /* Fallback fill — visible only if no video is supplied, or while it loads */
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 1s var(--ease-lux);
}
.page-hero-video.is-ready { opacity: 1; }
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  /* 20–35% dark overlay per spec — spans the full hero behind both columns */
  background: rgba(6, 20, 52, .3);
}

/* Two-column grid: left content, right image. Same technique as the Home
   hero's .hero-inner, so the two heroes feel like the same family. */
.page-hero-inner {
  position: relative; z-index: 3; width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(64px, 8vw, 110px);
}
.page-hero-content { text-align: left; }
.page-hero-content .crumbs,
.page-hero-content .eyebrow { justify-content: flex-start; }
.page-hero h1 { color: var(--white); margin-bottom: 18px; font-size: clamp(2.5rem, 4.6vw, 4rem); }
.page-hero-desc { color: rgba(226,236,252,.88); font-size: clamp(1rem, 1.25vw, 1.15rem); max-width: 50ch; }
.page-hero-cta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin-top: 32px; }

/* Right column — premium image, same rounded/bordered/shadow treatment as
   the Home hero's .hero-photo and the split sections' .split-photo, plus
   a slow continuous float so it feels alive without needing hover. */
.page-hero-visual { position: relative; }
.page-hero-photo {
  position: relative;
  aspect-ratio: 4 / 3.3;
  border-radius: calc(var(--radius) + 4px);
  overflow: clip;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.55);
  animation: focus-card-float 6.5s ease-in-out infinite;
}
.page-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 1.4s var(--ease-lux);
}
.page-hero-photo:hover img { transform: scale(1.045); }
@keyframes focus-card-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.crumbs {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 26px;
  font-family: 'Manrope', sans-serif; font-size: .8rem; font-weight: 600;
  color: rgba(226,236,252,.55);
}
.crumbs a { color: rgba(226,236,252,.75); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--white); }
.crumbs svg { width: 12px; height: 12px; opacity: .5; }
.crumbs [aria-current] { color: var(--sky); }

.page-hero-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.page-hero-jump a {
  padding: 9px 18px; min-height: 40px; display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-pill);
  font-family: 'Manrope', sans-serif; font-size: .84rem; font-weight: 600;
  color: rgba(226,236,252,.85);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-hero-jump a:hover { background: rgba(255,255,255,.08); border-color: var(--sky); color: var(--white); transform: translateY(-2px); }

@media (max-width: 991px) {
  /* Tablet: keep two columns, just tighten spacing and the photo's aspect
     ratio so it doesn't dominate a narrower viewport. */
  .page-hero-inner { gap: clamp(24px, 4vw, 40px); }
  .page-hero-photo { aspect-ratio: 4 / 3.6; }
}
@media (max-width: 768px) {
  /* Mobile: stack — content first, then image (source order already
     matches, so no reordering needed). */
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-photo { aspect-ratio: 16 / 11; animation: none; }
}
@media (max-width: 640px) {
  .page-hero { min-height: clamp(480px, 92vh, 760px); }
}
@media (prefers-reduced-motion: reduce) {
  /* main.js removes the whole .page-hero-media (video) node for reduced
     motion; this is a defensive fallback in case JS hasn't run yet. */
  .page-hero-video { display: none; }
  .page-hero-photo { animation: none; }
  .page-hero-photo:hover img { transform: none; }
}


/* ---------- Stats band (light pages) ---------- */
.band-stats { background: var(--navy-deep); padding-block: 8px; }
.band-stats .stat-num { color: var(--white); }
.band-stats .stat-lbl { color: rgba(226,236,252,.65); }


/* ---------- Services ---------- */
.svc { scroll-margin-top: 90px; }
.svc-list { display: grid; gap: 12px; margin-top: 22px; }
.svc-list li {
  position: relative; padding-left: 32px;
  color: var(--ink); font-weight: 500; font-size: .95rem;
}
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(10,91,255,.12), rgba(77,163,255,.2));
}
.svc-list li::after {
  content: ""; position: absolute; left: 6px; top: 5px;
  width: 6px; height: 9px;
  border: solid var(--royal); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.svc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  color: var(--white); box-shadow: var(--shadow-cta);
}
.svc-badge svg { width: 30px; height: 30px; }

/* Browser mock (website development panel) */
.browser-mock { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: clip; }
.browser-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--cloud); border-bottom: 1px solid var(--line); }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.browser-bar span:first-child { background: var(--sky); }
.browser-body { display: grid; gap: 12px; padding: 20px; }
.browser-cta { width: 110px; height: 32px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--cta-1), var(--cta-2)); margin-top: 4px; }


/* ---------- Value & model cards ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card {
  display: grid; gap: 12px; align-content: start;
  padding: 30px 26px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-lux), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47,123,224,.4); }
.value-num {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .8rem;
  letter-spacing: .1em; color: var(--azure);
}
.value-card p { font-size: .92rem; }

.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.model-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-lux), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.model-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47,123,224,.4); }
.model-card p { font-size: .94rem; flex: 1; }


/* ---------- Contact ---------- */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.contact-h { margin-bottom: 12px; }
.contact-form { display: grid; gap: 22px; margin-top: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .86rem; color: var(--navy); }
.req { color: var(--royal); }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit; color: var(--ink);
  min-height: 50px; padding: 13px 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #9AA7BE; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: #C6D2E4; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(47,123,224,.18);
}
.form-help { font-size: .8rem; color: var(--slate); }
.form-status { display: none; padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 500; font-size: .92rem; }
.form-status.show { display: block; }
.form-status.ok { background: #EBF9F0; color: #14683A; border: 1px solid #BFE8CF; }
.form-status.err { background: #FDF0F0; color: #A02929; border: 1px solid #F2CBCB; }

/* Leading icon inside text/email/textarea fields (not selects — those get
   a trailing chevron instead, styled below). */
.input-icon { position: relative; }
.input-icon svg {
  position: absolute; left: 16px; top: 24px; transform: translateY(-50%);
  width: 18px; height: 18px; color: #9AA7BE; pointer-events: none;
}
.input-icon input,
.input-icon textarea { padding-left: 46px; }
.input-icon--top svg { top: 30px; }

/* Custom trailing chevron on <select>, replacing the native arrow —
   reuses the same chevron path as the nav dropdown caret for consistency. */
.form-field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%230A5BFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
  cursor: pointer;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.contact-aside { display: grid; gap: 18px; }
.contact-card {
  display: grid; gap: 8px; padding: 26px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-lux), box-shadow var(--dur) var(--ease);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-card h3 { font-size: 1.02rem; }
.contact-card a { color: var(--slate); transition: color var(--dur) var(--ease); }
.contact-card a:hover { color: var(--royal); }
.contact-card p { font-size: .92rem; }
.contact-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 4px;
  background: linear-gradient(135deg, rgba(10,91,255,.08), rgba(77,163,255,.14));
  color: var(--royal);
}
.contact-ic svg { width: 22px; height: 22px; }
.contact-card--dark {
  background: linear-gradient(140deg, var(--navy-deep), var(--navy));
  border-color: transparent; color: var(--white);
}
.contact-card--dark h3 { color: var(--white); }

/* ---------- Contact panel — photo + "Get in Touch" info list ----------
   The right-hand column of the contact form section: one unified card
   (photo on top, info rows + social links below), rather than several
   separate floating .contact-card elements. */
.contact-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: clip; box-shadow: var(--shadow-lg);
}
.contact-panel-photo { position: relative; aspect-ratio: 16 / 11; background: var(--cloud); }
.contact-panel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-info { padding: clamp(24px, 3vw, 32px); }
.contact-info h3 { margin-bottom: 8px; }
.contact-info > p { color: var(--slate); font-size: .92rem; margin-bottom: 8px; }

.contact-info-list { display: grid; margin-top: 18px; }
.contact-info-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.contact-info-item:first-child { border-top: 0; padding-top: 0; }
.contact-info-ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(10,91,255,.08), rgba(77,163,255,.14));
  color: var(--royal);
  display: grid; place-items: center;
}
.contact-info-ic svg { width: 19px; height: 19px; }
.contact-info-item h4 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: 3px; }
.contact-info-item p, .contact-info-item a { font-size: .87rem; color: var(--slate); line-height: 1.5; }
.contact-info-item a:hover { color: var(--royal); }

.contact-social { display: flex; gap: 10px; margin-top: 24px; }
.contact-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cloud); color: var(--royal);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-social a:hover { background: var(--royal); color: var(--white); transform: translateY(-2px); }
.contact-social svg { width: 16px; height: 16px; }

.next-steps { display: grid; gap: 12px; margin-top: 6px; padding-left: 0; counter-reset: step; list-style: none; }
.next-steps li {
  position: relative; padding-left: 40px;
  color: rgba(226,236,252,.85); font-size: .92rem;
  counter-increment: step;
}
.next-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .76rem; color: var(--sky);
}

.text-link { color: var(--royal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--royal-hover); }


/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
.faq-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) + 8px);
  overflow: clip;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--cloud);
}
.faq-visual img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

.faq-list { display: grid; gap: 14px; }
.faq-item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  overflow: clip;
}
.faq-item:hover { border-color: rgba(47,123,224,.4); }
.faq-item[open] { border-color: var(--azure); box-shadow: var(--shadow-md); }

.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 26px; min-height: 48px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--navy);
  cursor: pointer; list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--royal); }

/* Plus / minus glyph — drawn from two bars rather than a badge, matching
   a plain, editorial accordion mark rather than a filled icon button. */
.faq-icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--navy); border-radius: 2px;
  transition: transform .3s var(--ease-lux), background var(--dur) var(--ease);
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item summary:hover .faq-icon::before,
.faq-item summary:hover .faq-icon::after { background: var(--royal); }
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: var(--royal); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-body { padding: 0 26px 24px; }
.faq-body p { font-size: .95rem; }
.faq-body strong { color: var(--navy); }

@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-visual { aspect-ratio: 16 / 9; max-width: 480px; margin-inline: auto; }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

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

@media (max-width: 991px) {
  /* Nav → panel */
  .menu-toggle { display: flex; }
  .btn-nav { display: none; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px var(--gutter) 22px;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-menu.open { opacity: 1; visibility: visible; transform: none; }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 10px; font-size: 1rem; }
  .nav-link.active::after { display: none; }
  .caret { width: 44px; height: 44px; justify-content: center; align-items: center; margin: -10px -10px -10px 0; }

  .dropdown {
    position: static; min-width: 0; padding: 0 0 0 14px;
    border: 0; box-shadow: none; background: transparent;
    opacity: 1; visibility: visible; transform: none;
    display: grid; max-height: 0; overflow: hidden;
    transition: max-height .35s var(--ease);
  }
  .nav-item.open > .dropdown { max-height: 260px; }
  .nav-item.open .caret svg { transform: rotate(180deg); }

  /* Layout stacks */
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split-visual { order: 2; }
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .section-head p { justify-self: start; }
  .footer-top { grid-template-columns: 1fr; }

  /* Inner pages */
  .contact-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .model-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }

  /* Inner pages */
  .form-row { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .page-hero-jump a { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

/* ---------- Dark section variant ----------
   Gives an existing content section the same navy/grid/glowing-node visual
   language as the Home hero — used on ONE content section per inner page
   (not a separate empty divider) so it does real work as a section while
   still reading as a recognizable, recurring beat between pages. Reuses
   the same grid-line technique as the Home hero's background, at lower
   opacity, so it's related but distinct — a beat, not a repeat. */
.section--dark {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}
.section--dark > *:not(.section-grid-bg):not(.section-node) { position: relative; z-index: 1; }

.section--dark .eyebrow { color: var(--sky); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: rgba(226,236,252,.78); }
.section--dark .accent { color: var(--sky); }
.section--dark .panel-tag { color: rgba(226,236,252,.65); }
.section--dark .btn-secondary { color: var(--white); border-color: rgba(255,255,255,.25); background: transparent; }
.section--dark .btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,.06); }

.section-grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(111,168,242,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,168,242,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.section-node {
  position: absolute; z-index: 0;
  top: 64px; left: clamp(20px, 6vw, 80px);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  pointer-events: none;
}
.section-node .node-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 12px 2px rgba(77,163,255,.7);
  animation: node-drift 6s ease-in-out infinite;
}
.section-node .node-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(77,163,255,.5);
  animation: node-pulse 3.2s ease-in-out infinite;
}
@keyframes node-pulse {
  0%, 100% { transform: scale(.82); opacity: .55; }
  50% { transform: scale(1.15); opacity: 1; }
}
@keyframes node-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
  .section-node .node-dot,
  .section-node .node-ring { animation: none; }
}

/* ==========================================================================
   Hero video — readability without an overlay
   Per the video-forward hero direction, the dark scrim that used to sit on
   top of hero videos was removed site-wide (no semi-transparent layer
   blocking the footage). White hero text stays legible via a soft
   text-shadow instead of a blocking overlay.
   ========================================================================== */
.page-hero-content .eyebrow,
.page-hero h1,
.page-hero-desc,
.page-hero .crumbs {
  text-shadow: 0 2px 22px rgba(6,20,52,.45), 0 1px 4px rgba(6,20,52,.55);
}

/* Solo hero (Customer Support, Website Operations): the side image overlay
   was removed, so the hero content spans a single left-aligned column over
   the full-bleed background video. */
.page-hero--solo .page-hero-inner {
  grid-template-columns: 1fr;
  max-width: 880px;
}

/* ==========================================================================
   Hero readability overlay (item 3) — shared, site-wide
   A dark left-weighted gradient sits between the hero background media and
   the text content on every inner-page hero, so light text meets WCAG AA
   contrast over video/imagery. Applied once here as a shared ::after layer
   (z-index 1: above the video at z-0, below the content at z-3) rather than
   per-page markup. The right column photo (z-3) stays fully visible.
   ========================================================================== */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Rebalanced: enough darkness on the left for AA-legible text, fading to
     near-transparent through the centre/right so the video reads clearly. */
  background: linear-gradient(to right,
    rgba(8,18,38,.74) 0%,
    rgba(8,18,38,.46) 34%,
    rgba(8,18,38,.16) 64%,
    rgba(8,18,38,.04) 100%);
}

/* Footer redesign (item 5) */
.brand-word b {
  background: linear-gradient(120deg, #1B7BE8, #4DA3FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-bar { justify-content: space-between; flex-wrap: wrap; }
.footer-follow { display: flex; align-items: center; gap: 18px; }
.footer-hours { font-size: .82rem; color: rgba(226,236,252,.62); text-align: right; margin: 0; }
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* FAQ list without the side image (per-page FAQ sections, item 7) */
.faq-list--solo { max-width: 820px; width: 100%; margin-inline: auto; }

/* Website Development "What We Support" — 3-card grid (item 8) */
.cap-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split-subhead { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin-bottom: 6px; }
@media (max-width: 992px) { .cap-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cap-grid--three { grid-template-columns: 1fr; }
  .footer-hours { text-align: left; width: 100%; margin-top: 6px; } }

/* ==========================================================================
   Round-4 fixes
   ========================================================================== */

/* Item 1 — floating hero image removed on EVERY inner page; hero is now a
   single left-aligned content column over the full-bleed video. */
.page-hero-inner { grid-template-columns: 1fr; }
.page-hero-content { max-width: 820px; }

/* Item 2 — real logo image (assets/images/logo.png) */
.brand-logo { height: 48px; }
.footer-logo img { height: 62px; width: auto; border-radius: 10px; display: block; }

/* Item 4 — anchor targets clear the fixed nav when scrolled to */
.section { scroll-margin-top: 96px; }

/* Item 5 — striped/line (navy grid) section pattern removed SITE-WIDE:
   every .section--dark is now plain white with normal dark text. */
.section--dark { background: #FFFFFF; }
.section--dark .section-grid-bg,
.section--dark .section-node { display: none; }
.section--dark .eyebrow { color: var(--royal); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--navy); }
.section--dark p { color: var(--slate); }
.section--dark .accent { color: var(--royal); }
.section--dark .panel-tag { color: var(--slate); }
.section--dark .btn-secondary { color: var(--navy); border-color: var(--line); background: var(--white); }
.section--dark .btn-secondary:hover { border-color: var(--navy); background: var(--white); }

/* Logo sizing — transparent PNGs (no white box); footer uses the white-text
   variant so it reads on the navy footer. */
.brand-logo { height: 40px; width: auto; }
.footer-logo img { height: 46px; width: auto; border-radius: 0; display: block; }

/* Item 6 — uniform hero text measure + vertical rhythm across every page */
.page-hero-content { max-width: 720px; }

/* ==========================================================================
   Footer — Ideal Index.html structure
   footer-cols holds three named columns (primary big links, Services list,
   Engagement Models list); footer-bar puts "Follow Us" + social + the hours
   line on one row (hours pushed to the right).
   ========================================================================== */
.footer-cols { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
.footer-col-primary, .footer-col-services, .footer-col-engagement { display: grid; align-content: start; }
.footer-col-primary { gap: 12px; }
.footer-col-primary a { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.02rem, 1.4vw, 1.25rem); color: var(--white); }
.footer-col-primary a:hover { color: var(--sky); }
.footer-col-services, .footer-col-engagement { gap: 9px; font-size: .9rem; }
.footer-col-services h4, .footer-col-engagement h4 { color: var(--sky); font-size: .74rem; margin-bottom: 6px; }

.footer-bar { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.footer-hours { margin: 0 0 0 auto; font-size: .82rem; color: rgba(226,236,252,.62); }

@media (max-width: 991px) { .footer-cols { grid-template-columns: 1fr 1fr; row-gap: 28px; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } .footer-hours { margin-left: 0; width: 100%; } }

/* ===================== animations.css ===================== */
/* ==========================================================================
   aCXend — Animations
   Generic, reusable motion utilities: scroll-reveal, word-by-word text
   reveal, and the base reduced-motion contract. Depends on tokens.css.
   Load on every page — these classes (.reveal, .split-text) are meant to
   be reused on any future page's headings/content.
   ========================================================================== */

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-lux), transform .7s var(--ease-lux); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }


/* ---------- Word-by-word text reveal (headings + lead copy) ---------- */
.split-text.reveal { opacity: 1; transform: none; }
.split-text .sp-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-text .sp-word-i {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  transition: transform .8s var(--ease-lux), opacity .5s var(--ease-lux);
  transition-delay: var(--wd, 0s);
}
.split-text.in .sp-word-i { transform: translateY(0); opacity: 1; }


/* ---------- Base reduced-motion contract ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .split-text .sp-word-i { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ===================== effects.css ===================== */
/* ==========================================================================
   aCXend — Site-wide interaction effects
   Styling hooks for the JS-driven engines in js/main.js: the inertia
   smooth-scroll container, the footer curtain reveal, the reverse
   curtain-reveal hero transition, the custom cursor, and magnetic buttons.
   Depends on tokens.css. Load on every page — these engines run globally
   regardless of page content.
   ========================================================================== */

/* ---------- Smooth-scroll container ---------- */
html.has-smooth-scroll body { overflow-x: clip; }
#smooth-content {
  position: fixed;
  top: 0; left: 0; width: 100%;
  will-change: transform;
  /* No top padding: it used to reserve a nav-height band whose white
     background showed behind the floating pill nav. The hero now fills to the
     very top so the video/background shows directly behind the nav; the
     nav-height offset lives on the hero's own top padding (below). */
  padding-top: 0;
  background: var(--white);
  z-index: 2;
}
/* Push each page's hero content down clear of the fixed nav, while the hero's
   full-bleed video/background still fills behind it. Flat-scroll pages already
   sit at the top, so only the smooth-scroll pages need this. */
html.has-smooth-scroll .hero,
html.has-smooth-scroll .page-hero { padding-top: var(--nav-h, 86px); }
#smooth-spacer { width: 100%; pointer-events: none; }
html.no-smooth-scroll #smooth-content { position: static; padding-top: 0; background: none; z-index: auto; }
html.no-smooth-scroll #smooth-spacer { display: none; }

/* ---------- Footer curtain reveal ----------
   The footer sits pinned to the bottom of the viewport, behind the opaque
   scrolling content. It stays hidden until the user scrolls past the end
   of the page content, at which point the content (the "curtain") has
   nowhere left to cover it, so the footer appears to rise into view. */
html.has-smooth-scroll .footer-curtain {
  position: fixed;
  left: 0; bottom: 0; width: 100%;
  z-index: 1;
}
html.no-smooth-scroll .footer-curtain { position: static; }

/* Elements that shift on scroll progress (read by JS) */
[data-parallax] { will-change: transform; }

/* ---------- Custom reactive cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-smooth-scroll, html.has-smooth-scroll * { cursor: none; }
}
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  transform: translate3d(-50%,-50%,0);
  will-change: transform;
}
.cursor-dot {
  width: 7px; height: 7px; background: var(--royal);
  transition: opacity .2s var(--ease), width .25s var(--ease), height .25s var(--ease);
}
.cursor-ring {
  width: 36px; height: 36px; border: 1.5px solid rgba(14,79,196,.45);
  transition: opacity .2s var(--ease), width .3s var(--ease-lux), height .3s var(--ease-lux), border-color .3s var(--ease);
}
html:not(.cursor-ready) .cursor-dot,
html:not(.cursor-ready) .cursor-ring { opacity: 0; }
.cursor-dot.is-hover { width: 10px; height: 10px; }
.cursor-ring.is-hover { width: 64px; height: 64px; border-color: rgba(14,79,196,.7); background: rgba(14,79,196,.06); }
.cursor-ring.is-down { width: 30px; height: 30px; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}


/* ---------- Reverse curtain reveal ----------
   Runs on EVERY page: the hero (.hero on the Home page, .page-hero on every
   inner page) is pinned, and the section immediately after it inside <main>
   rides up over it like a curtain closing from the bottom. Reused as-is by
   js/main.js's curtainReveal() — same HTML structure, easing, and timing
   everywhere; only the selector list below grew from home-only to sitewide.

   Layering model:
   · The hero sits underneath (z:1). GSAP pins it with pinSpacing:false, so
     the section after it keeps its natural scroll motion and physically
     rides UP over the hero.
   · Everything else after the hero inside <main> paints above it (z:2)
     with an opaque background, so no hero pixels bleed through mid-reveal.
   · Decorative panel styles are gated behind .curtain-active (added by JS)
     so the no-JS / reduced-motion layout renders untouched. */
#main > .hero, #main > .page-hero { z-index: 1; }
#main > :not(.hero):not(.page-hero) { position: relative; z-index: 2; }
/* Plain sections have no background of their own; they need one to act
   as an opaque curtain while they travel across the hero. */
/* #main > .section:not(.section--cloud):not(.section--dark) { background: var(--white); } */

/* Dim scrim over the hero — GSAP scrubs opacity 0 → .55 as it is covered,
   selling the "underneath" depth. Animates opacity only (GPU-composited).
   .hero-dim is the Home hero's scrim; .page-hero-dim is the inner-page
   hero's equivalent (kept as a separate class so the Home page's markup
   never needs to change). */
.hero-dim, .page-hero-dim {
  position: absolute; inset: 0; z-index: 10;
  background: var(--navy-deep);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* The section riding up over the hero — soft upward shadow while it
   overlaps, and a premium light texture instead of a flat white fill.
   Promoted to its own compositor layer to prevent flicker during the
   scrub. Not scoped to any one page's section — JS adds this class to
   whichever section follows the hero, on every page. */
.curtain-active {
  /* Plain white — the striped/reeded light texture was removed site-wide. */
  background: #FFFFFF;
  box-shadow:
    0 -28px 60px -18px rgba(6, 20, 52, .45),
    0 -8px 24px -10px rgba(6, 20, 52, .30);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Hint the compositor about the hero layers GSAP will move */
.curtain-active ~ *,
.curtain-hero-active .hero-inner,
.curtain-hero-active .page-hero-inner,
.curtain-hero-active .hero-stats { backface-visibility: hidden; }
.curtain-hero-active .hero-inner,
.curtain-hero-active .page-hero-inner,
.curtain-hero-active .hero-stats { will-change: transform; }


/* ---------- Magnetic buttons ---------- */
.btn[data-magnetic] { will-change: transform; }
.btn[data-magnetic] .btn-label,
.btn[data-magnetic] .arrow { will-change: transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #smooth-content { position: static !important; padding-top: 0 !important; background: none !important; z-index: auto !important; }
  #smooth-spacer { display: none !important; }
  .footer-curtain { position: static !important; }
  html.has-smooth-scroll, html.has-smooth-scroll * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .hero-dim, .page-hero-dim { display: none !important; }
  .curtain-active { box-shadow: none; }
}

/* ===================== home.css ===================== */
/* ==========================================================================
   aCXend — Home page
   Styles unique to index.html: the hero (imagery, focus card, proof strip)
   and the centered About-preview block. Depends on tokens.css, base.css,
   components.css, animations.css, effects.css. Load ONLY on index.html.

   Note: the reverse-curtain-reveal system itself now lives in effects.css
   (generalized to run on every page, not just this one) — see that file.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 70%, #0C2558 100%);
  color: var(--white);
  overflow: clip;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111,168,242,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,168,242,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 100%);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.hero-glow--1 { width: 560px; height: 560px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(14,79,196,.55), transparent 65%); }
.hero-glow--2 { width: 460px; height: 460px; bottom: -160px; left: -140px; background: radial-gradient(circle, rgba(47,123,224,.35), transparent 65%); }

.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(88px, 11vw, 150px) clamp(72px, 9vw, 120px);
}
.hero-title { color: var(--white); margin-block: 4px 22px; }
.hero-title .line { display: block; }
.hero-title em { font-style: normal; color: var(--white); }
.hero-accent {
  background: linear-gradient(120deg, var(--sky), var(--cta-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-desc { color: rgba(226,236,252,.82); font-size: clamp(1.02rem, 1.3vw, 1.2rem); max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Signature — professional imagery + service focus card
   (replaces the former live-metrics/progress-bar panel: this is a young,
   growing company, so the hero leans on real imagery and plain service
   labels rather than fabricated stats.) */
.hero-panel { position: relative; }
.hero-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.55);
  background: var(--navy-deep); /* shows while the image decodes */
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
}
.hero-photo::after {
  /* Soft brand-tinted wash so the photo sits naturally in the navy hero */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(10,31,76,.35), rgba(10,31,76,0) 45%),
              linear-gradient(0deg, rgba(6,20,52,.55), rgba(6,20,52,0) 38%);
  pointer-events: none;
}

.hero-focus-card {
  position: absolute; left: -18px; bottom: -28px; z-index: 2;
  width: min(240px, 62%);
  padding: 20px 22px;
  display: grid; gap: 14px;
  background: rgba(10,31,76,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.55);
  animation: focus-card-float 5.5s ease-in-out infinite;
}
.hero-focus-head {
  font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky);
}
.focus-list { display: grid; gap: 11px; }
.focus-item {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif; font-size: .84rem; font-weight: 600;
  color: rgba(226,236,252,.92); line-height: 1.25;
}
.focus-ic {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  color: var(--white);
}
.focus-ic svg { width: 14px; height: 14px; }

/* Proof strip */
.hero-stats { position: relative; border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.hero-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 30px; }
.stat { display: grid; gap: 4px; }
.stat-num { font-family: 'Manrope', sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .84rem; color: rgba(226,236,252,.65); }

.hero-scroll {
  position: absolute; right: 34px; bottom: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(226,236,252,.55); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll-line { width: 1px; height: 52px; background: linear-gradient(180deg, rgba(255,255,255,.5), transparent); overflow: hidden; position: relative; }
.hero-scroll-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sky); transform: translateY(-100%);
  animation: scroll-hint 2.4s var(--ease) infinite;
}
@keyframes scroll-hint { 0% { transform: translateY(-100%);} 60% { transform: translateY(100%);} 100% { transform: translateY(100%);} }


/* ---------- Hero title line-mask reveal ---------- */
.hero-title .line { overflow: hidden; }
.hero-title .line-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1s var(--ease-lux);
}
.hero-title .line:nth-child(1) .line-inner { transition-delay: .06s; }
.hero-title .line:nth-child(2) .line-inner { transition-delay: .17s; }
.hero-title.in .line-inner { transform: translateY(0); }


/* ---------- Mouse-tilt hero panel ---------- */
.hero-panel { transform-style: preserve-3d; will-change: transform; transition: transform .15s var(--ease); }
.hero-panel .hero-photo, .hero-panel .hero-focus-card { transition: transform .15s var(--ease); }

/* ---------- About Us preview — centered layout ---------- */
#about-preview .container.narrow {
  text-align: center;
}
#about-preview .eyebrow {
  justify-content: center;
  margin-bottom: 22px;
}
#about-preview h2 {
  margin-inline: auto;
  margin-bottom: 28px;
}
#about-preview p {
  margin-inline: auto;
}
#about-preview p + p {
  margin-top: 16px;
}


/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 72px 64px; }
  .hero-panel { max-width: 480px; }
  .hero-scroll { display: none; }
}

@media (max-width: 640px) {
  .hero-stats-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-focus-card { left: 0; bottom: -18px; width: min(210px, 58%); padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .line-inner { transform: none !important; transition: none !important; }
  .hero-focus-card { animation: none; }
  .hero-panel, .hero-panel .hero-photo, .hero-panel .hero-focus-card { transition: none !important; }
}

/* ==========================================================================
   Home hero — full-bleed background video
   The muted/looped video sits behind the hero content; the navy gradient on
   .hero stays as the fallback fill while it loads and under
   prefers-reduced-motion (js/main.js removes the video node there).
   ========================================================================== */
.hero > .page-hero-media { z-index: 0; }
.hero > .hero-bg { z-index: 1; }
.hero-inner, .hero-stats, .hero-scroll { z-index: 2; }
.hero-dim { z-index: 4; }

/* Keep white hero text legible over live footage without a blocking overlay. */
.hero-copy .eyebrow,
.hero-title,
.hero-desc,
.stat-num,
.stat-lbl { text-shadow: 0 2px 22px rgba(6,20,52,.5), 0 1px 4px rgba(6,20,52,.55); }

/* ==========================================================================
   Home hero — single column (floating card removed, item 2) + readability
   ========================================================================== */
.hero { max-width: 100%; }
.hero-inner { grid-template-columns: 1fr; }
.hero-copy { max-width: 760px; }

/* Dark readability overlay over the home hero video (item 3), matching the
   shared inner-page pattern — z-1: above the video, below the content. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Rebalanced to match the inner-page heroes — dark enough on the left for
     legible text, fading out through the centre/right so the video shows. */
  background: linear-gradient(to right,
    rgba(8,18,38,.74) 0%,
    rgba(8,18,38,.46) 34%,
    rgba(8,18,38,.16) 64%,
    rgba(8,18,38,.04) 100%);
}

/* Match inner-page hero measure */
.hero-copy { max-width: 720px; }

/* Item 3 — hero content area sized to match Ideal Index.html's content column
   (container width + hero-inner padding are already the shared values). */
.hero-copy { max-width: 680px; }

/* ==========================================================================
   Homepage hero fixes (index.html only)
   ========================================================================== */

/* Issue 2 — more breathing room between the hero subtext and the CTA buttons
   so they no longer sit cramped against the paragraph. */
.hero-ctas { margin-top: 44px; }

/* Issue 1 — keep the whole hero (content + the 3 stat blocks) within the
   viewport on shorter laptop screens (1366×768, 1440×900, and 1920×1080 minus
   browser chrome). The hero is pinned by the curtain-reveal, so when it grows
   taller than the viewport the stat row falls below the fold and gets covered.
   Height-based sizing only — content, copy, video and layout order untouched;
   tall desktops keep their current look. */
@media (max-height: 1100px) {
  .hero-inner { padding-block: clamp(40px, 6.5vh, 130px) clamp(20px, 3vh, 90px); }
  .hero-title { font-size: clamp(2.3rem, 7vh, 5rem); }
  .hero-ctas { margin-top: clamp(32px, 3.6vh, 44px); }
  .hero-stats-grid { padding-block: clamp(14px, 2.4vh, 30px); }
  .hero-scroll { display: none; }
}