/*
 * industries.css — page-specific styles for industries.html.
 *
 * Extracted from an inline <style> block in industries.html for caching and
 * HTML-payload reduction. Loaded after css/style.css so these rules can
 * override shared component styling where the industries page needs to.
 *
 * The .svc-modal* base now lives in css/style.css (shared with services.html).
 *
 * Scope:
 *   - Split-Hero page overrides (.home-hero__grid, credential pills, mobile)
 *   - "Who We Serve" service-card overrides (#industries-overview)
 *   - Pointer references to shared rules (svc-modal, cta-banner)
 */

/* ── Split Hero — shared core in css/style.css; page overrides only ──
   Per the "Hero Section Standard" in CLAUDE.md, the home page hero
   (index.html) is the canonical reference for spacing, font color,
   and other styling details. Page-specific content (title, copy,
   button labels, credential labels, photo) stays unique to this page. */
.home-hero__grid {
  display: grid;
  /* Single column, matching the home hero — the photo is no longer a
     grid column; it pins to the section's right half (see
     .home-hero__bleed below). */
  grid-template-columns: 1fr;
}
/* ── Hero photo — full-bleed feathered, mirroring the home hero
   (design handoff "Hero — Image Treatments", Option 2). The photo
   pins to the section's right half and dissolves into the navy via
   mask gradients (fade-in from the left over 24%, fade-out at the
   bottom past 78%), with a navy wash over the dissolve so the
   headline stays legible. ── */
.home-hero__content { position: relative; max-width: 690px; }
.home-hero__bleed {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  /* Above the section's grid overlay (z 0); .container (z 1) comes
     later in the DOM so text still paints on top. */
  z-index: 1;
  pointer-events: none;
}
.home-hero__bleed-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  display: block;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.home-hero__bleed-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,29,69,0.55) 0%, rgba(11,29,69,0) 34%);
  pointer-events: none;
}
.home-hero__credentials {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  /* flex-wrap kept (not in home hero) because this page has 4 credentials
     vs home's 2 — safety net so they wrap to a second line on narrow
     viewports instead of overflowing the column. */
  flex-wrap: wrap;
}
.home-hero__cred {
  /* display/align/gap match home hero so credentials with inner icons
     would render identically; for plain text creds (which is what this
     page uses) it's a no-op. */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  /* Muted slate at rest, brand teal on hover — trust-strip styling
     from the design handoff (Hero — Image Treatments); the hover
     tint is decorative since the row isn't interactive. Mirrors the
     home page hero. */
  color: rgba(160, 178, 206, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
  cursor: default;
  transition: color 0.2s ease;
}
.home-hero__cred:hover {
  color: var(--teal);
}
/* Credential pill variant that keeps the literal case of its label, instead
   of upper-casing it. Used for "PEOs" — uppercasing an already-uppercase
   abbreviation re-letterspaces the S and looks odd. */
.home-hero__cred--literal {
  text-transform: none;
}
/* Industries-page divider override matching home (global rule in
   css/style.css is 2px x 20px at rgba(255,255,255,0.15)). Design
   handoff trust-strip hairline, thickened to 2px wide. */
.home-hero__cred-divider {
  width: 2px;
  height: 13px;
  background: rgba(255, 255, 255, 0.22);
}
/* Hero glow customizations — mirror the home page hero per CLAUDE.md.
   - Top-right circle glow removed; ::before repurposed as the
     grid-line layer, radially masked (per the design handoff's
     bg-grid) so the grid fades out toward the lower-right and never
     shows behind the full-bleed photo's feathered edges.
   - All glows removed: ::after (which carried the bottom-edge teal
     ellipse glow) is disabled entirely. */
.home-hero::before {
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
  mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
}
/* When the full-bleed photo is showing (>1100px), also clamp the grid
   horizontally so it ends around the section midpoint and never
   reaches the photo's feathered edge — same values as the home hero. */
@media (min-width: 1101px) {
  .home-hero::before {
    -webkit-mask-image:
      radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
      linear-gradient(to right, #000 45%, transparent 53%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
      linear-gradient(to right, #000 45%, transparent 53%);
    mask-composite: intersect;
  }
}
.home-hero::after {
  display: none;
}
/* Below ~1100px the text column would run into the photo's opaque
   zone, so the bleed hides and the hero goes text-only — same
   breakpoint as the home hero. */
@media (max-width: 1100px) {
  .home-hero__bleed { display: none; }
}
@media (max-width: 900px) {
  .home-hero__title { font-size: 38px; }
}

/* ── "Industries" section header + spacing ── */
/* Tighter bottom padding than the default .section so the 12 industry cards
   sit closer to the CTA banner that follows, instead of leaving an obvious
   visual gap. Originally set when a partners row sat between this section
   and the CTA banner; kept because the tighter rhythm still reads well. */
#industries-overview {
  padding-bottom: 32px;
}
/* Use the same serif header treatment as other section titles on this site;
   the global .section__title (sans-serif) doesn't match the editorial feel
   we want on this page. */
#industries-overview .section__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 38px;
}

/* .svc-modal* base styling lives in css/style.css (shared
   with services.html). No industry-specific overrides needed. */

/* .cta-banner narrow width + bottom-edge teal glow now live in css/style.css
   on .cta-banner.cta-banner--with-image and its ::after — shared site-wide. */

/* Each "Who We Serve" card is a <button> so keyboard users get native
   Enter / Space activation and a focus ring (a <div onclick> is unreachable
   by keyboard). Reset the few <button> browser defaults that the
   .service-card class doesn't already override: font / color / width come
   from the user agent and would otherwise leak through. */
#industries-overview button.service-card {
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
/* Visible focus ring for keyboard users only — mouse clicks don't trigger
   :focus-visible, so this doesn't add a ring around clicked cards. */
#industries-overview button.service-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ── Who We Serve panel headers — match the section's main header font ── */
#industries-overview .service-card__name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 17px;
}
/* Make every Who We Serve panel the same exact size regardless of content */
#industries-overview .services-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
#industries-overview .service-card {
  height: 100%;
}

/* ── Who We Serve panels — match the services-page "What We Do" style ── */
#industries-overview .service-card {
  border: none;
  padding: 26px 16px;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.06),
    0 12px 32px rgba(11, 27, 61, 0.06),
    0 2px 8px rgba(11, 27, 61, 0.06);
}
#industries-overview .service-card { overflow: hidden; }
#industries-overview .service-card::before {
  display: block;
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
#industries-overview .service-card:hover::before { transform: scaleX(1); }
#industries-overview .service-card:hover {
  border: none;
  box-shadow: 0 18px 44px rgba(43, 191, 154, 0.28), 0 4px 12px rgba(43, 191, 154, 0.14);
  transform: translateY(-3px);
}