/* division.css — page-specific styles for /divisions/* pages.
   Builds on shared.css: hero, glossy body container, sub-section labels,
   pill CTA, feature cards, proof block, closing CTA. */

.division-section { padding: clamp(4rem, 8vw, 8rem) 3.5%; }
.division-container { max-width: 1240px; margin: 0 auto; }

/* HERO ------------------------------------------------------------- */
.division-hero { padding: clamp(8rem, 14vw, 12rem) 3.5% clamp(4rem, 8vw, 7rem); }

.division-eyebrow {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.division-title {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 1100px;
  margin-bottom: clamp(2.25rem, 3.5vw, 3.5rem);
}

/* GLOSSY BODY CONTAINER -------------------------------------------- */
.glossy-container {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: clamp(1rem, 1.5vw, 1.4rem);
  max-width: 880px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease;
}

/* Top inner highlight — 1px gradient suggesting glass surface */
.glossy-container::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0) 6%);
  opacity: 0.85;
}

/* Diagonal shine that sweeps on hover */
.glossy-container::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(255,255,255,0.08) 50%,
    transparent 65%);
  background-size: 220% 100%;
  background-position: 120% 0;
  transition: background-position 1.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.glossy-container:hover::after { background-position: -20% 0; }
.glossy-container:hover { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.045); }

@media (prefers-reduced-motion: reduce) {
  .glossy-container { transition: border-color 0.2s ease; }
  .glossy-container::after { display: none; }
  .glossy-container:hover { transform: none !important; }
}

/* Body text inside the glossy container */
.glossy-body {
  position: relative;
  font-family: 'Neue Haas Grotesk Text Pro', 'Neue Haas Grotesk Text', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.glossy-body p + p,
.glossy-body p + .sub-section { margin-top: 1.4em; }
.glossy-body .sub-section + .sub-section { margin-top: 1.1em; }

.sub-section-label {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--accent);
  margin-right: 0.4em;
}

/* LEARN MORE pill button ------------------------------------------- */
.learn-more {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  min-width: 140px; padding: 0.9rem 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.78rem, 0.92vw, 0.92rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.learn-more:hover { filter: brightness(1.12); transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .learn-more:hover { transform: none; }
}

/* SECTION HEADERS -------------------------------------------------- */
.section-eyebrow {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-heading {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: clamp(1.5rem, 2vw, 2rem);
  max-width: 900px;
}
.section-body {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  max-width: 720px;
}
.section-body p + p { margin-top: 1.25em; }

/* FEATURE CARDS ---------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
@media (min-width: 760px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  position: relative;
  padding: clamp(1.5rem, 2vw, 2rem);
  border-radius: 1rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.feature-card:hover {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.14);
}
@media (prefers-reduced-motion: no-preference) {
  .feature-card:hover { transform: translateY(-3px); }
}

.feature-card-eyebrow {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.feature-card-title {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.35vw, 1.4rem);
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 0.6rem;
}
.feature-card-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
}

/* PROOF BLOCK ------------------------------------------------------ */
.proof-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 2.5rem);
  margin-top: clamp(2rem, 3vw, 3rem);
}
@media (min-width: 800px) {
  .proof-row { grid-template-columns: repeat(4, 1fr); }
}
.proof-stat {
  border-left: 1px solid rgba(85,122,193,0.28);
  padding-left: 1.25rem;
}
.proof-stat-value {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 3vw, 3rem);
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
}
.proof-stat-label {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

/* CLOSING CTA BLOCK ----------------------------------------------- */
.cta-block {
  position: relative;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem);
  border-radius: 1.5rem;
  background:
    linear-gradient(135deg, rgba(85,122,193,0.10), rgba(34,65,158,0.04)),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(85,122,193,0.22);
  text-align: center;
}
.cta-heading {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk',
               'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1rem;
}
.cta-sub {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  margin: 0 auto 2rem;
}

/* ============================================================
   WHITE-BG OVERRIDE — invert the division pages so they read as
   a clean white document with dark-navy text. Loaded last so it
   wins over earlier dark-mode rules in this file (and any
   white-text rules in shared.css). Per-page custom styles (e.g.
   the inline .pas-* stack on the ancillary services page) may
   need their own targeted overrides if a regression appears.

   DEFENSIVE NOTE: division.css is NOT linked from the homepage
   (the homepage encodes its own dark hero). The body/html invert
   below was previously universal, which leaked the white bg into
   the homepage when index.html had a stale `<link>` to this file.
   The homepage link has since been removed; we also no longer
   target html/body universally — division sub-pages opt in to
   the white theme via the body's natural styles below.
   ============================================================ */
:root {
  --bg-inv:   #FFFFFF;
  --ink-inv:  #0F2436;
  --ink-2:    #4A6072;
  --muted-i:  #7A8A99;
  --rule-i:   #E3E8ED;
}

/* Legacy white-theme inversion block removed (audit F-11 root cause).
   Its `footer a { color: var(--ink-inv) !important }` painted footer
   links near-invisible (#0F2436 on #020A14, 1.25:1) on every dark
   division page. No shipped page uses the .division-* white theme;
   the variables above are kept for reference only. */

/* prefers-reduced-motion — kills any looping animation on the
   inverted (white) division pages. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}