/* ============================================================
   ELECTRO-LITE SOLUTIONS - system.css
   The gray28 elevation layer. Loaded LAST, so it refines the
   existing build into one cohesive, world-class system without
   rewriting it. Concept: the IV line that drives to you.
   Laws held: centered, no eyebrows, no card grids, no overlaps,
   mobile is the main stage.
   ============================================================ */

/* ---------- LIVING BACKGROUND (a material, never a flat fill) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(255,140,42,0.16), transparent 46%),
    radial-gradient(110% 90% at 12% 8%,  rgba(21,101,168,0.30), transparent 52%),
    radial-gradient(140% 120% at 50% 120%, rgba(2,18,40,0.92), transparent 60%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
  background-attachment: fixed;
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; filter: saturate(1); }
  100% { background-position: 3% -2%, -2% 2%, 0 0, 0 0; filter: saturate(1.12); }
}
/* fine grain so nothing ever looks sterile */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Section backgrounds go translucent so the living field shows through,
   but stay legible. Solid navy fills are removed for cohesion. */
#about, #home-pathways, #partners-gunners, #partners-eapc, #services,
.page-hero, .subpage main > section {
  background-color: transparent !important;
}
#home-pathways { background: transparent !important; }
.about-overlay { background: linear-gradient(180deg, rgba(3,36,77,0.55), rgba(2,18,40,0.35)) !important; }

/* ---------- TYPE: push the contrast the brand was missing ---------- */
.section-heading {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
.section-sub {
  font-weight: 300;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* The orange divider becomes a tiny luminous drip, not a flat bar */
.divider-orange {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: var(--glow-hard);
  margin: var(--s-5) auto 0;
}

.section-header { margin-bottom: var(--s-8); }

/* ---------- BUTTONS: scarce, glowing, magnetic-ready ---------- */
.btn {
  border-radius: 999px;
  padding: 16px 38px;
  font-size: 14px;
  letter-spacing: 0.1em;
  will-change: transform;
}
.btn-primary {
  /* background-color stays opaque under the gradient; the shorthand would reset it to
     transparent and leave the label's real backdrop undefined. Ink is navy: the label
     sits on orange, where white reads 2.96:1 and navy reads 5.2:1. */
  background-color: var(--accent);
  background-image: linear-gradient(135deg, var(--accent-glow), var(--accent));
  color: var(--ink-on-accent);
  box-shadow: var(--glow-soft), var(--e1);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--glow-hard), var(--e2);
}
.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
}
.btn-outline:hover { border-color: var(--ink); }

/* ---------- HERO: cinematic, centered, one focal point ---------- */
#hero { min-height: 100svh; }

/* Caustic light: slow sun-through-water shimmer drifting behind the headline. */
.home .hero-overlay { overflow: hidden; }
.home .hero-overlay::after {
  content: '';
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,170,90,0.14), transparent 72%) 18% 28% / 42% 42% no-repeat,
    radial-gradient(closest-side, rgba(120,180,255,0.10), transparent 72%) 76% 62% / 46% 46% no-repeat,
    radial-gradient(closest-side, rgba(255,205,125,0.09), transparent 72%) 56% 16% / 34% 34% no-repeat;
  filter: blur(22px);
  animation: caustic-drift 17s ease-in-out infinite alternate;
}
@keyframes caustic-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    opacity: 0.75; }
  100% { transform: translate3d(3%, 2.5%, 0) scale(1.09); opacity: 1; }
}

/* The accent word breathes a soft neon glow. */
.home .hero-headline .accent {
  animation: accent-breathe 4.6s ease-in-out infinite;
}
@keyframes accent-breathe {
  0%, 100% { text-shadow: 0 0 22px rgba(255,140,42,0.32); }
  50%      { text-shadow: 0 0 46px rgba(255,140,42,0.62); }
}

/* THE HERO MOMENT: the one word fills with fluid, bottom to top, the way the line
   fills. The display face IS the art. Only ONE word carries the accent, so the 10%
   accent ceiling holds and the focal point stays single.

   Built on background-position, not a registered custom property, so it animates in
   every engine. Wrapped in @supports because text-fill-color:transparent without
   background-clip:text would erase the word rather than fill it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home .hero-headline .accent {
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    background-image: linear-gradient(
      to top,
      var(--accent-glow) 50%,
      rgba(255, 255, 255, 0.20) 50%
    ) !important;
    background-size: 100% 200%;
    background-position: 50% 100%;    /* filled: the base state is the finished state */
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: none;
  }
  /* The word fills only once it has hung from the line. */
  html.js .home .hero-headline .accent {
    animation:
      hero-fluid-fill 1400ms var(--ease-expressive) 1.85s both,
      accent-breathe 4.6s ease-in-out 3.3s infinite;
  }
  @keyframes hero-fluid-fill {
    from { background-position: 50% 0%; }   /* the ghost, before the fluid reaches it */
    to   { background-position: 50% 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .home .hero-headline .accent,
    html.js .home .hero-headline .accent {
      background-position: 50% 100%;   /* arrives already full, no fill, no breathe */
      animation: none;
    }
  }
}
.hero-headline {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-shadow: 0 0 60px rgba(255,140,42,0.35);
}
.hero-headline .accent { color: var(--accent-glow); }
/* Override the old gradient-clip hero signature: with word-spans it rendered
   the headline transparent. Solid white + one accent word + glow + kinetic rise. */
.home .hero-headline {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  filter: none !important;
  text-shadow: 0 0 60px rgba(255,140,42,0.35) !important;
  animation: none !important;
}
/* Solid accent is the FLOOR for the accent word. Where background-clip:text is
   supported, the @supports block above upgrades it to the fluid fill. */
.home .hero-headline .accent {
  -webkit-text-fill-color: var(--accent-glow);
  color: var(--accent-glow);
}
.hero-sub {
  max-width: 600px;
  margin-inline: auto;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
}
/* word-by-word reveal targets (JS adds .kin) */
.kin-word { display: inline-block; will-change: transform, opacity; }

/* The scroll cue IS the line's origin. The bag hangs in the first viewport and lets a
   drop go every few seconds: the concept is on screen before a reader scrolls once.
   No bob: the drip is the motion, and two moving things here would be one too many. */
/* The line leaving the hero. An inline <a> takes its width from line boxes, not from the
   svg, which threw translateX(-50%) off; make it a block that is exactly the mark, then
   pad the tap target to the 48px law without moving the art off the centre axis. */
/* Centred by auto margins inside a full-width absolute box, not by translateX(-50%):
   the translate resolves against the border box, so the padding that buys the 48px tap
   target dragged the line 24px off the very axis the seams sit on. */
.hero-scroll-cue {
  opacity: 0.9;
  left: 0;
  right: 0;
  transform: none;
  width: 48px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  box-sizing: border-box;
  line-height: 0;
}
/* The fixed quick-CTA bar owns the bottom edge on a phone. The line stops above it. */
@media (max-width: 768px) {
  .hero-scroll-cue { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
/* On a short viewport the hero copy, the CTA bar and the line cannot all sit clear of
   each other. The line entering at the top already carries the concept, and the nav
   still links to About, so the outgoing tail stands down rather than overlap anything. */
@media (max-height: 700px) {
  .hero-scroll-cue { display: none; }
}
/* The cue is a chevron, not a line. The vertical centre line the old cue drew
   (and the seams it fed) was killed 2026-07-24 on Campbell's word: it read as a
   generic scroll-progress rail down the middle of the page. Never reintroduce a
   vertical rule on the page's centre axis. */
.hero-scroll-cue .hero-cue-chevron {
  stroke: var(--accent-glow);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.72;
  filter: drop-shadow(0 0 6px rgba(255, 140, 42, 0.5));
  animation: hero-cue-nudge 2600ms var(--ease-standard, ease-in-out) infinite;
}
@keyframes hero-cue-nudge {
  0%, 62%, 100% { transform: translateY(0); opacity: 0.72; }
  30%           { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue .hero-cue-chevron { animation: none; opacity: 0.85; }
}

/* ---------- ABOUT: the real trailer photo, lit into the scene ---------- */
.about-photo-frame {
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: var(--e3), var(--glow-soft);
  position: relative;
}
.about-photo-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,18,40,0) 55%, rgba(2,18,40,0.45) 100%);
  pointer-events: none;
}
.about-photo-frame img { transition: transform 1.1s var(--ease-expressive); }
.about-photo-frame:hover img { transform: scale(1.04); }
.info-pill {
  background: var(--surface-4);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.cred-pill {
  background: rgba(3, 18, 38, 0.72);
  border: 1px solid rgba(232,119,34,0.55);
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- PATHWAYS: card grid -> one continuous editorial system ---------- */
#home-pathways .pathway-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
}
.pathway-card {
  min-height: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--s-5);
  text-align: left;
  padding: var(--s-6) var(--s-4) !important;
  transition: background 0.4s var(--ease-standard), padding-left 0.4s var(--ease-standard);
}
.pathway-card:hover {
  transform: none !important;
  background: linear-gradient(90deg, rgba(255,140,42,0.07), transparent 70%) !important;
  padding-left: var(--s-6) !important;
  box-shadow: none !important;
}
.pathway-icon {
  width: 56px; height: 56px;
  background: rgba(232,119,34,0.10);
  border: 1px solid rgba(232,119,34,0.40);
}
.pathway-card h3 {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.05;
}
.pathway-card p {
  grid-column: 2;
  margin-top: 6px;
  font-size: 0.96rem;
  color: var(--ink-faint);
  max-width: 46ch;
}
.pathway-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0 !important;
  color: var(--accent) !important;
  font-size: 12px;
}

/* ---------- PARTNERS (Gunners): centered, glowing, no box ---------- */
.gunners-inner { text-align: center; }
.gunners-badge {
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.5));
  transition: transform 0.8s var(--ease-expressive);
}
.gunners-badge:hover { transform: scale(1.03) rotate(-1deg); }
.gunners-body { max-width: 60ch; margin-inline: auto; color: var(--ink-soft); }

/* ---------- CTA STRIP: a calm seam, glowing line ---------- */
#cta-strip {
  border-top: 1px solid rgba(255,140,42,0.30);
  border-bottom: 1px solid rgba(255,140,42,0.30);
  background: linear-gradient(90deg, transparent, rgba(255,140,42,0.06), transparent) !important;
}

/* ---------- SECTION RHYTHM: one instrument, not a playlist ---------- */
#about, #home-pathways, #partners-gunners, #partners-eapc, #services {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* ---------- MOBILE: the main stage. Center everything, no overlaps ---------- */
@media (max-width: 768px) {
  .about-inner { text-align: center; }
  .about-text, .about-photo-wrap { align-items: center; }
  .about-photo-frame { aspect-ratio: 820 / 345; }
  /* editorial rows stack and center on phone */
  .pathway-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-4) !important;
  }
  .pathway-card:hover { padding-left: var(--s-4) !important; }
  .pathway-card p { grid-column: 1; margin-inline: auto; }
  .pathway-arrow { grid-column: 1; grid-row: auto; }
  .hero-content { padding-inline: var(--s-5); }
}

/* respect reduced motion: still beautiful, just still */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .hero-scroll-cue { animation: none; }
}