/* ═══════════════════════════════════════════════════════
   pages.css — Unison Systems
   Inner page hero · Industries page · Secondary page styles
   Loaded on all secondary pages (NOT index.html)
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════
   INNER PAGE HERO — LIGHT THEME
   Modeled on careers.html. White background, big Sora 900
   watermark word, black h1 with purple <em>, muted gray subtitle,
   right-side stat rail with purple right-border.

   Per-page watermark: set data-watermark="SERVICES" on <section class="page-hero">.
   Omit data-watermark on pages that should not show one.

   nav (~137px) + subnav (~53px) = 190px of fixed chrome.
   Top padding 220px gives breathing room below the subnav.
══════════════════════════════ */
.page-hero {
  background: #ffffff;
  padding: 340px 48px 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8e6f0;
}

/* Giant decorative watermark word — driven by data-watermark attribute.
   top:200px clears the subnav bar (ends ~198px). font-size clamp max
   ~220px means watermark bottom ≈ 380–400px — h1 flows just below. */
.page-hero[data-watermark]::before {
  content: attr(data-watermark);
  position: absolute;
  top: 200px;
  right: -20px;
  font-family: var(--font-head);
  font-size: clamp(100px, 16vw, 220px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(91,79,207,0.13);
  letter-spacing: -6px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

/* Legacy decorative layers — kept as no-ops so existing markup doesn't leak
   dark gradients through. Safe to remove from HTML later. */
.page-hero .hero-bg,
.page-hero .hero-grid { display: none; }

/* Content wrapper */
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}

/* Page title */
.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 900; line-height: 0.95; letter-spacing: -3px;
  color: #141318; margin-bottom: 24px;
  animation: fadeUp 0.6s ease 0.1s both;
}
.page-hero h1 em { font-style: normal; color: var(--purple); }

/* Eyebrow on light hero — purple text + line, darker than on dark bg */
.page-hero .section-eyebrow {
  color: var(--purple);
  animation: fadeUp 0.6s ease 0.05s both;
}
.page-hero .section-eyebrow::before,
.page-hero .section-eyebrow::after { background: var(--purple); }

/* Hero subtitle */
.page-hero .hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  color: #6B6882; font-weight: 400; line-height: 1.7;
  max-width: 560px;
  animation: fadeUp 0.6s ease 0.2s both;
}

/* Right-column stat rail — vertical list, purple right-border, no card.
   align-self:center vertically centers the rail against the taller text column. */
.hero-stats-panel {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  padding-bottom: 8px;
  animation: fadeUp 0.6s ease 0.3s both;
}
/* Hide the legacy "By the numbers" header — new rail has no label */
.hero-stats-panel h3 { display: none; }

.stats-list { display: flex; flex-direction: column; gap: 2px; }

.stat-row {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  padding: 14px 22px;
  background: transparent;
  border: none;
  border-right: 3px solid var(--purple);
  border-radius: 0;
}
.stat-row .s-num {
  font-family: var(--font-head);
  font-size: 36px; font-weight: 900;
  color: #141318; letter-spacing: -1.5px; line-height: 1;
  white-space: nowrap; min-width: 0;
}
.stat-row .s-lbl {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  color: #6B6882;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
  max-width: 220px;
}

/* ══════════════════════════════
   SECTION THEME SYSTEM
   Add to any <section> on secondary pages to alternate backgrounds.
   .section-light — white, dark text
   .section-gray  — off-white/neutral, dark text
   .section-dark  — navy, white text (site default on dark sections)
══════════════════════════════ */
.section-light { background: #ffffff; }
.section-gray  { background: #AAAAAA; }
.section-dark  { background: var(--navy); }

/* Light / gray section typography — invert from the dark-theme defaults */
.section-light,
.section-gray { color: #141318; }

.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light h5,
.section-gray  h1, .section-gray  h2, .section-gray  h3,
.section-gray  h4, .section-gray  h5 { color: #141318; }

.section-light h2 em, .section-gray h2 em { color: var(--purple); }

.section-light p  { color: #4A4860; }
.section-gray  p  { color: #141318; }

.section-light .section-sub { color: #6B6882; }
.section-gray  .section-sub { color: #2a2840; }

.section-light .section-eyebrow,
.section-gray  .section-eyebrow { color: var(--purple); }
.section-light .section-eyebrow::before,
.section-light .section-eyebrow::after,
.section-gray  .section-eyebrow::before,
.section-gray  .section-eyebrow::after { background: var(--purple); }

/* ══════════════════════════════
   SUBNAV NOTE
   The sticky subnav pill bar is now the unified
   .nav-subnav system defined in components.css.
   The old .industry-subnav / .ind-pill classes
   have been removed.

   On destination pages (services.html, industries.html,
   about.html) the parent <li> in the nav carries
   class="active" which keeps the subnav bar
   always visible and pinned below the nav.
══════════════════════════════ */

/* ══════════════════════════════
   INDUSTRIES — Section structure
   Full-width cinematic photo strip → content below
══════════════════════════════ */
.ind-section { border-bottom: 1px solid rgba(255,255,255,0.06); }
.ind-section.bg-alt { background: var(--gray-1); }

/* Photo banner */
.ind-photo {
  width: 100%; height: 500px;
  position: relative; overflow: hidden;
}
.ind-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
  filter: brightness(0.75) saturate(0.88);
  transition: transform 8s ease, filter 0.5s;
}
/* Subtle Ken Burns on section hover */
.ind-section:hover .ind-photo img {
  transform: scale(1.035);
  filter: brightness(0.85) saturate(1);
}

/* Gradient: transparent → section background at bottom */
.ind-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,12,24,0.15) 0%,
    transparent 35%,
    rgba(13,12,24,0.5) 72%,
    rgba(13,12,24,1) 100%
  );
}
/* Alt background sections need a different end color */
.ind-section.bg-alt .ind-photo::after {
  background: linear-gradient(
    to bottom,
    rgba(30,28,38,0.15) 0%,
    transparent 35%,
    rgba(30,28,38,0.5) 72%,
    rgba(30,28,38,1) 100%
  );
}

/* Title overlay — bottom-left of photo */
.ind-photo-label {
  position: absolute; bottom: 32px; left: 48px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.ind-photo-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ey-line { width: 20px; height: 1.5px; flex-shrink: 0; }

.ind-photo-title {
  font-family: var(--font-head);
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 800; letter-spacing: -1.5px; line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.ind-photo-title em   { font-style: normal; color: var(--purple-l); }
.ind-photo-title em.t { color: var(--teal); }

/* Stat badge — top-right corner of photo */
.photo-badge {
  position: absolute; top: 32px; right: 48px; z-index: 2;
  background: var(--purple); border-radius: 14px; padding: 16px 22px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(91,79,207,0.65);
  backdrop-filter: blur(4px);
}
.photo-badge.teal {
  background: var(--teal);
  box-shadow: 0 8px 32px rgba(0,198,162,0.55);
}
.photo-badge .b-num {
  font-family: var(--font-head); font-size: 26px; font-weight: 800;
  color: #fff; line-height: 1; white-space: nowrap;
}
.photo-badge .b-lbl {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.88);
  text-transform: uppercase; letter-spacing: 0.07em; margin-top: 5px;
}

/* ── Industry content grid (below photo) ── */
.ind-content {
  max-width: 1200px; margin: 0 auto;
  padding: 60px 48px 80px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start;
}

/* Left column — body text */
.text-col p {
  font-size: 15px; color: var(--gray-lt); font-weight: 300;
  line-height: 1.75; margin-bottom: 14px;
}
.text-col p:last-of-type { margin-bottom: 0; }

/* Role chips — content-width pills, wrap naturally, rows centered.
   Moved out of .text-col, now a full-width row inside .ind-content. */
.role-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ind-content > .role-grid {
  grid-column: 1 / -1;
  margin-top: 16px;
}

/* Injected by JS when the last row would otherwise be a single orphan pill.
   Acts as a full-width zero-height break to push the previous pill down. */
.role-grid-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}
.role-chip {
  background: var(--gray-2); border: 1px solid rgba(91,79,207,0.40);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; font-weight: 500; color: var(--white);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
}
.role-chip span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-l); flex-shrink: 0;
}

/* Right column — support box */
.support-box {
  background: var(--gray-2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: 36px;
  position: relative; overflow: hidden;
}
/* Decorative radial glow in corner */
.support-box::after {
  content: ''; position: absolute; bottom: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(91,79,207,0.18) 0%, transparent 70%);
}
.support-box h4 {
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); margin-bottom: 20px;
}

/* Pillar list inside support-box */
.pillars { display: flex; flex-direction: column; }
.pillar {
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: flex-start; gap: 14px;
}
.pillar:last-child { border-bottom: none; }
.pillar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--purple); margin-top: 5px; flex-shrink: 0;
}
.pillar h5 {
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  margin-bottom: 3px; color: var(--white);
}
.pillar p {
  font-size: 12px; color: var(--white); line-height: 1.55; margin: 0;
}

/* Subsection divider — between sub-blocks within a single .ind-section.
   ~½ inch above the hairline, ~¾ inch below. Used on services.html
   Aerospace & Marine and industries.html Aerospace & Marine. */
.ind-subsection-divider {
  grid-column: 1 / -1;
  clear: both;
  height: 1px;
  background: rgba(0,0,0,0.10);
  margin: 48px 0 72px;
}
.ind-section:not(.section-light) .ind-subsection-divider {
  background: rgba(255,255,255,0.10);
}

/* ── Flow layout — text wraps around a floated card or photo.
   Used on services.html (ERP, Applied AI, Cybersecurity, Cloud, Aerospace
   & Marine) and industries.html (Aerospace sub-block). Switches the parent
   .ind-content from a 2-col grid to block flow so the support-box floats
   right and the body paragraphs wrap around it. Card has equal left + bottom
   margin so wrapped text has consistent breathing room on both sides. */
.ind-content--flow {
  display: block;
}
.ind-content--flow .support-box {
  float: right;
  width: calc(50% - 32px);
  margin: 0 0 36px 36px;
}
.ind-content--flow .text-col p:last-of-type {
  margin-bottom: 14px;
}
.ind-content--flow .role-grid {
  clear: both;
  margin-top: 32px;
}
/* Subsection photo — same float behavior as support-box, used when an image
   replaces the card (e.g. Marine sub-block on services.html). */
.ind-content--flow .subsection-photo {
  float: right;
  width: calc(50% - 32px);
  margin: 0 0 36px 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}
.ind-content--flow .subsection-photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* Clearfix so a tall floated card/photo at the end of a sub-block doesn't
   overflow the section's bottom edge. */
.ind-content--flow::after {
  content: '';
  display: block;
  clear: both;
}
@media (max-width: 768px) {
  .ind-content--flow .support-box,
  .ind-content--flow .subsection-photo {
    float: none;
    width: 100%;
    margin: 24px 0;
  }
}

/* Inline <strong> in body paragraphs — body weight is 300, so an explicit
   weight makes inline discipline labels read clearly bold. */
.text-col p strong { font-weight: 700; }

/* Quote block */
.quote-block {
  background: var(--gray-2); border: 1px solid rgba(91,79,207,0.2);
  border-left: 4px solid var(--purple); border-radius: 16px;
  padding: 36px 44px; position: relative; overflow: hidden;
}
.quote-block::before {
  content: '"'; position: absolute; top: 8px; left: 36px;
  font-size: 96px; line-height: 1; color: var(--purple); opacity: 0.18;
  font-family: Georgia, serif; pointer-events: none;
}
.quote-block blockquote {
  font-family: var(--font-head); font-size: 17px; font-weight: 600;
  font-style: italic; color: var(--white); line-height: 1.65; margin-top: 14px;
}
.quote-attr {
  font-size: 12px; font-weight: 700; color: var(--purple-l);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 16px;
}

/* Arrow list (Healthcare use cases) */
.highlight-list { list-style: none; margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.highlight-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; line-height: 1.6; color: var(--gray-lt);
}
.highlight-list li::before {
  content: '→'; color: var(--purple-l); font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}

/* ══════════════════════════════
   LIGHT + GRAY THEME OVERRIDES
   For .ind-section components on white/gray sections.
   Reusable across services.html + industries.html.
══════════════════════════════ */

/* ── Gray section ── */
.section-gray.ind-section { border-bottom: 1px solid rgba(0,0,0,0.10); }

.section-gray .ind-photo::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 55%,
    rgba(170,170,170,0.55) 80%,
    #AAAAAA 100%
  );
}
/* Maritime: crisp photo edge, all title text white including em */
#maritime .ind-photo::after { display: none; }
#maritime .ind-photo-title em { color: var(--purple-d); }

/* Financial: deep purple em on photo title */
#financial .ind-photo-title em { color: var(--purple-d); }

/* Healthcare: amber em + amber badge */
#healthcare .ind-photo-title em { color: #FFBE74; }
#healthcare .photo-badge {
  background: #FFBE74;
  box-shadow: 0 8px 32px rgba(255,160,50,0.55);
}

/* Oil & Gas: light lavender badge, dark purple text */
#oil-gas .photo-badge {
  background: #C4BEF0;
  box-shadow: 0 8px 32px rgba(91,79,207,0.20);
}
#oil-gas .photo-badge .b-num,
#oil-gas .photo-badge .b-lbl { color: var(--purple-d); }

.section-gray .text-col p { color: #141318; }

.section-gray .role-chip {
  background: #F5F3FF;
  border: 1px solid rgba(91,79,207,0.32);
  color: #141318;
  box-shadow: 0 1px 3px rgba(91,79,207,0.10);
}
.section-gray .role-chip span { background: var(--purple); }

.section-gray .support-box {
  background: #ffffff;
  border: 1px solid #D0CEDC;
  border-left: 4px solid var(--purple);
  box-shadow: 0 4px 6px rgba(0,0,0,0.06), 0 16px 40px rgba(91,79,207,0.14);
}
.section-gray .support-box::after { display: none; }
.section-gray .support-box h4 { color: #4A4860; }

.section-gray .pillar { border-bottom-color: rgba(0,0,0,0.09); }
.section-gray .pillar h5 { color: #141318; }
.section-gray .pillar p  { color: #2a2840; }

.section-gray .quote-block {
  background: #ffffff;
  border: 1px solid rgba(91,79,207,0.15);
  border-left: 4px solid var(--purple);
  box-shadow: 0 1px 2px rgba(20,19,24,0.05), 0 8px 24px rgba(91,79,207,0.09);
}
.section-gray .quote-block blockquote { color: #141318; }

.section-gray .highlight-list li { color: #141318; }

/* ── Light section ── */
.section-light.ind-section { border-bottom: 1px solid rgba(0,0,0,0.07); }

/* Kill the dark gradient on light section photos */
.section-light .ind-photo::after { display: none; }

/* Photo image — brighter on light sections */
.section-light .ind-photo img { filter: brightness(0.88) saturate(0.92); }
.section-light.ind-section:hover .ind-photo img { filter: brightness(0.95) saturate(1); }

/* Body text */
.section-light .text-col p { color: #141318; }

/* Role chips — lavender tint, stronger border */
.section-light .role-chip {
  background: #F5F3FF;
  border: 1px solid rgba(91,79,207,0.32);
  color: #141318;
  box-shadow: 0 1px 3px rgba(91,79,207,0.10);
}
.section-light .role-chip span { background: var(--purple); }

/* Support box — white card, purple left stripe, lifted shadow */
.section-light .support-box {
  background: #ffffff;
  border: 1px solid #E2E0EC;
  border-left: 4px solid var(--purple);
  box-shadow: 0 4px 6px rgba(0,0,0,0.06), 0 16px 40px rgba(91,79,207,0.14);
}
.section-light .support-box::after { display: none; }
.section-light .support-box h4 { color: #6B6882; }

/* Pillars inside support box */
.section-light .pillar { border-bottom-color: rgba(0,0,0,0.07); }
.section-light .pillar h5 { color: #141318; }
.section-light .pillar p  { color: #4A4860; }

/* Quote block — white card */
.section-light .quote-block {
  background: #ffffff;
  border: 1px solid rgba(91,79,207,0.15);
  border-left: 4px solid var(--purple);
  box-shadow: 0 1px 2px rgba(20,19,24,0.04), 0 8px 24px rgba(91,79,207,0.08);
}
.section-light .quote-block blockquote { color: #141318; }

/* Arrow list */
.section-light .highlight-list li { color: #141318; }

/* ══════════════════════════════
   RESPONSIVE — Inner pages
══════════════════════════════ */
@media (max-width: 960px) {
  .page-hero { padding: 200px 24px 60px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .hero-stats-panel { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .stat-row { align-items: flex-start; padding: 10px 16px; }
  .stat-row .s-num { font-size: 28px; letter-spacing: -1px; }
  .page-hero[data-watermark]::before { font-size: clamp(80px, 18vw, 140px); top: 120px; }
  .ind-photo { height: 320px; }
  .ind-photo-label { left: 24px; bottom: 20px; }
  .photo-badge { top: 16px; right: 24px; }
  .ind-content { grid-template-columns: 1fr; padding: 40px 24px 60px; gap: 40px; }
}

@media (max-width: 768px) {
  .page-hero { padding: 100px 24px 48px; }
  .page-hero[data-watermark]::before { display: none; }
  .page-hero h1 { font-size: clamp(36px, 7.5vw, 52px); letter-spacing: -1.2px; }
  .hero-stats-panel { padding: 20px; }

  .ind-photo { height: 280px; }
  .ind-photo-title { font-size: clamp(24px, 6vw, 34px); }
  .photo-badge { padding: 10px 14px; }
  .photo-badge .b-num { font-size: 20px; }

  /* Text-only sections: anchor lands tight to the eyebrow/h2.
     Photo-first sections keep breathing room below the photo. */
  .ind-content { padding: 6px 20px 32px; gap: 24px; }
  .ind-photo + .ind-content { padding-top: 28px; }
  .support-box { padding: 24px; }
}