/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4: PUBLIC SITE — chrome and marketing sections
   Depends on 1-tokens, 2-base, 3-components. Authors no colour of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   TOPBAR + HEADER
   ─────────────────────────────────────────────────────────────────────────── */

.site-topwrap {
  position: sticky;
  top: 0;
  /* Must out-rank --z-overlay: the mobile nav-menu drawer is nested inside
     this wrapper, and a positioned ancestor's z-index caps every descendant's
     paint order regardless of the descendant's own z-index. */
  z-index: var(--z-drawer);
}

.topbar {
  background: var(--color-primary-darker);
  color: var(--color-text-on-dark-dim);
  font-size: var(--text-caption);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  min-height: var(--topbar-h);
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-on-dark-dim);
  font-weight: var(--weight-medium);
}

.topbar a:hover { color: var(--color-text-inverse); }
.topbar .icon-svg { width: 15px; height: 15px; }

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

/* Condensed state, toggled by site.js once the page scrolls. */
.site-topwrap.is-scrolled .site-header { box-shadow: var(--shadow-md); }
.site-topwrap.is-scrolled .brand img { height: 46px; }
.site-topwrap.is-scrolled .nav { min-height: var(--header-h-shrunk); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-h);
  transition: min-height var(--duration-base) var(--ease-out);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  color: var(--color-text-primary);
}

.brand img {
  height: 56px;
  width: auto;
  transition: height var(--duration-base) var(--ease-out);
}

.brand-text { display: flex; flex-direction: column; line-height: var(--leading-flat); }

.brand-text strong {
  font-family: var(--font-display);
  font-size: var(--text-brand);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

.brand-text span {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-success);
}

/* ── Desktop menu ───────────────────────────────────────────────────────── */

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-menu > li { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.nav-link:hover { color: var(--color-primary); background: var(--color-primary-light); }

.nav-menu > li.active > .nav-link {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* Active underline. Uses a pseudo-element so it never shifts layout. */
.nav-menu > li.active > .nav-link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -2px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  transition: transform var(--duration-base) var(--ease-out);
}

.has-sub.is-open > .nav-link .nav-caret { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 288px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
}

.has-sub:hover > .submenu,
.has-sub.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: none) {
  .has-sub:hover > .submenu { opacity: 0; visibility: hidden; transform: translateY(-8px); }
  .has-sub.is-open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
}

.submenu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.submenu a:hover { background: var(--color-primary-light); color: var(--color-primary-hover); }

.nav-cta { margin-left: var(--space-3); }

/* ── Hamburger ──────────────────────────────────────────────────────────── */

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.nav-toggle:hover { background: var(--color-surface-sunken); }

.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  border-radius: var(--radius-full);
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle span + span { margin-top: 5px; }

/* Animated hamburger → X */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ──────────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }

  .nav-menu {
    position: fixed;
    top: 0; right: 0;
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: min(360px, 88vw);
    height: 100dvh;
    padding: var(--space-6) var(--space-5) var(--space-10);
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .nav-menu.is-open { transform: translateX(0); }

  /* Leave room for the close button injected by site.js. */
  .nav-menu::before {
    content: "";
    display: block;
    height: var(--space-8);
  }

  /* Prevent the first <li> (which wraps the close button) from being a
     positioning context. The close button needs to position relative to
     .nav-menu itself, not its parent <li>. */
  .nav-menu > li:first-child { position: static; }

  .nav-link {
    padding: var(--space-4);
    font-size: var(--text-body);
    border-radius: var(--radius-md);
    justify-content: space-between;
  }

  .nav-menu > li.active > .nav-link {
    background: var(--color-primary-light);
  }
  .nav-menu > li.active > .nav-link::after { display: none; }

  /* Submenu becomes an inline accordion rather than a floating panel. */
  .submenu {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0 0 0 var(--space-4);
    margin: 0;
    border: none;
    border-left: 2px solid var(--color-primary-subtle);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-out),
                margin var(--duration-base) var(--ease-out);
  }

  .has-sub:hover > .submenu { max-height: 0; }
  .has-sub.is-open > .submenu {
    max-height: 520px;
    margin: var(--space-2) 0 var(--space-3) var(--space-4);
  }

  .nav-cta { margin: var(--space-4) 0 0; }
  .nav-cta .btn { width: 100%; }
}

.nav-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: none;
}

@media (max-width: 940px) {
  .nav-close { display: inline-flex; }
}


/* ───────────────────────────────────────────────────────────────────────────
   HERO
   ─────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y-hero);
  background: var(--gradient-brand);
  color: var(--color-text-on-dark);
}

/* Layered motif: fine grid + radial glow. Purely decorative. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--motif-grid);
  background-size: var(--motif-grid-size);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, var(--mask-ink) 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, var(--mask-ink) 20%, transparent 78%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--motif-glow);
}

.hero h1 {
  color: var(--color-text-inverse);
  font-size: var(--text-display);
  margin-block: var(--space-5) var(--space-5);
  max-width: 15ch;
}

.hero p {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark);
  max-width: 54ch;
}

.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap-layout);
  align-items: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ── Hero visual ─────────────────────────────────────────────────────────
   The stat panel that used to overlap this slot (.hero-stats / .hero-stat /
   .stat-note) has been removed along with the figures it displayed — they
   were placeholders the client never supplied. Do not reinstate the markup
   without real, client-approved numbers to put in it. */

.hero-visual { position: relative; }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}


/* ───────────────────────────────────────────────────────────────────────────
   PHOTO SLOT
   A designed brand panel that stands on its own if no photograph is ever
   supplied, and is replaced by a single <img> when one is.
   ─────────────────────────────────────────────────────────────────────────── */

.photo-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--gradient-brand);
  border: 1px solid var(--color-border-inverse);
  box-shadow: var(--shadow-xl);
  aspect-ratio: var(--slot-ratio, 4 / 3);
  isolation: isolate;
}

/* On a dark brand surface the slot would otherwise melt into its background,
   so it gets a lighter translucent fill and a brighter edge instead. */
:is(.hero, .page-banner) .photo-slot {
  background: var(--color-glass-06);
  border-color: var(--color-glass-16);
  backdrop-filter: blur(2px);
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arc motif — a literal bridge span, drawn in CSS so it costs no request. */
.photo-slot-motif {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--motif-grid);
  background-size: var(--motif-grid-size);
}

.photo-slot-motif::before,
.photo-slot-motif::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -46%;
  translate: -50% 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-inverse);
  aspect-ratio: 1;
}

.photo-slot-motif::before { width: 118%; border-width: 2px; }
.photo-slot-motif::after  { width: 78%; border-color: var(--color-glass-16); }

/* A third, tighter arc reads as the bridge deck and keeps the panel from
   looking like an empty box. */
.photo-slot-motif {
  border-radius: inherit;
  opacity: .9;
}

.photo-slot-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--motif-glow);
}

.photo-slot-cap {
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-glass-10);
  border: 1px solid var(--color-border-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  backdrop-filter: blur(8px);
}

.photo-slot-cap .icon-svg { width: 15px; height: 15px; }


/* ───────────────────────────────────────────────────────────────────────────
   PAGE BANNER (inner pages)
   ─────────────────────────────────────────────────────────────────────────── */

.page-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y-band);
  background: var(--gradient-brand);
  color: var(--color-text-on-dark);
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--motif-grid);
  background-size: var(--motif-grid-size);
  mask-image: radial-gradient(ellipse 80% 100% at 20% 0%, var(--mask-ink) 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 20% 0%, var(--mask-ink) 10%, transparent 76%);
}

.page-banner h1 { color: var(--color-text-inverse); margin-bottom: var(--space-3); }
.page-banner .crumbs { margin-bottom: var(--space-4); }
.page-banner .lead { max-width: 62ch; }

.page-banner-media {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--gap-layout-sm);
  align-items: center;
}

@media (max-width: 900px) {
  .page-banner-media { grid-template-columns: 1fr; }
  .page-banner-media .photo-slot { display: none; }
}


/* ───────────────────────────────────────────────────────────────────────────
   REMOVED: TRUST BAR and CLIENT LOGO STRIP

   .trust-bar / .trust-row / .trust-item carried four compliance assertions
   ("Compliant with PF, ESIC, TDS & PT", "Contract Labour (CLRA) compliant",
   …) that the client never wrote and has not verified. .logo-strip was markup
   reserved for client brand logos that were never supplied, and depended on an
   assets/img/clients/ directory that does not exist.

   Both are gone rather than left commented out. If the client later supplies
   verified compliance registrations or written permission to display customer
   brands, rebuild from the .pillars and .media-band patterns already here.
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   SPLIT — the two-column copy + form/visual pattern
   ─────────────────────────────────────────────────────────────────────────── */

/* The two -wide- variants are listed here, not treated as modifiers that must
   accompany .split. They were previously column-ratio declarations only, so
   `class="container split-wide-left"` — which is how both the service detail
   and job detail pages are written — set grid-template-columns on a plain
   block element and did nothing. The sticky enquiry form on those pages has
   been stacking underneath the content instead of sitting beside it. */
.split,
.split-wide-left,
.split-wide-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-layout);
  align-items: start;
}

.split-wide-left  { grid-template-columns: 1.25fr 1fr; }
.split-wide-right { grid-template-columns: 1fr 1.25fr; }

@media (max-width: 940px) {
  .split,
  .split-wide-left,
  .split-wide-right { grid-template-columns: 1fr; }
}

/* Sticky sidebar for service and job detail pages. */
.sticky-side { position: sticky; top: calc(var(--header-h) + var(--space-6)); }

@media (max-width: 940px) {
  .sticky-side { position: static; }
}


/* ───────────────────────────────────────────────────────────────────────────
   MEDIA BAND — alternating copy/image rows

   The client asked for imagery in the body of a page rather than at the top
   beside the main details. This is the pattern that delivers that: a copy
   column and a picture column, with `.media-band-flip` swapping the order on
   alternate rows so a long stack (the eight Industries sectors) does not read
   as eight identical blocks.

   The flip is done with `order`, not by reversing the DOM, so the copy always
   precedes the image for screen readers and in the single-column layout.
   ─────────────────────────────────────────────────────────────────────────── */

.media-band {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gap-layout);
  align-items: center;
}

.media-band-flip .media-band-copy  { order: 2; }
.media-band-flip .media-band-media { order: 1; }

/* The image column is centred against tall copy rather than stretched. */
.media-band-media { align-self: center; }

/* The copy column is always running text, so it flows by default — callers
   do not have to remember to add .flow. */
.media-band-copy         { --flow-gap: var(--space-4); }
.media-band-copy > * + * { margin-top: var(--flow-gap); }
.media-band-copy > * + :is(h2, h3) { margin-top: var(--space-8); }
.media-band-copy > :is(h2, h3) + * { margin-top: var(--space-3); }
/* The eyebrow/tagline pair sits tight under its heading. */
.media-band-copy > h2 + .eyebrow-lead { margin-top: var(--space-2); }

@media (max-width: 900px) {
  .media-band { grid-template-columns: 1fr; gap: var(--gap-layout-sm); }
  /* Reset the flip so the copy always leads on narrow screens. */
  .media-band-flip .media-band-copy  { order: 0; }
  .media-band-flip .media-band-media { order: 0; }
}

/* The client's italic one-liner under each sector heading. Sits between the
   H2 and the supporting paragraph, so it reads as a subtitle, not body copy. */
.eyebrow-lead {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-primary);
}


/* ───────────────────────────────────────────────────────────────────────────
   BENTO GRID — services on the home page
   One feature tile spanning two columns, five standard tiles.
   ─────────────────────────────────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.bento-feature {
  grid-column: span 2;
  background: var(--gradient-brand-soft);
  border-color: var(--color-primary-subtle);
}

/* The feature tile is distinguished by its tinted background, its larger icon
   and the two columns it spans — NOT by a larger heading. It used to render
   its h3 at --text-h2 and its paragraph at --text-body while the plain cards
   beside it in the same grid used h3 / --text-body-sm, so two tiles sitting
   side by side disagreed about what an h3 is. */
.bento-feature p { max-width: 52ch; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-feature { grid-column: span 2; }
}

@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-feature { grid-column: span 1; }
}


/* ───────────────────────────────────────────────────────────────────────────
   PILLARS — offset "why choose us" rows with numbered rules
   ─────────────────────────────────────────────────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background-color var(--duration-base) var(--ease-out);
}

.pillar:hover { background: var(--color-primary-light); }
.pillar:first-child { border-left: none; }
.pillar h3 { margin: 0; }
.pillar p  { margin: 0; font-size: var(--text-body-sm); }

.pillar-num {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(odd) { border-left: none; }
}

@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: none; }
}


/* ───────────────────────────────────────────────────────────────────────────
   STATUTE MATRIX — compliance coverage without nine boxes
   ─────────────────────────────────────────────────────────────────────────── */

.matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.matrix-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  transition: background-color var(--duration-base) var(--ease-out);
}

.matrix-item:hover { background: var(--color-primary-light); }

/* Remove the trailing rules on the last column and last row. */
.matrix-item:nth-child(3n) { border-right: none; }
.matrix-item:nth-last-child(-n+3) { border-bottom: none; }

.matrix-item .icon-svg { color: var(--color-primary); margin-top: 2px; }
.matrix-item h4 { margin-bottom: var(--space-1); }
.matrix-item p  { font-size: var(--text-body-sm); color: var(--color-text-muted); }

@media (max-width: 900px) {
  .matrix { grid-template-columns: 1fr 1fr; }
  .matrix-item:nth-child(3n) { border-right: 1px solid var(--color-divider); }
  .matrix-item:nth-child(2n) { border-right: none; }
  .matrix-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-divider); }
  .matrix-item:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 620px) {
  .matrix { grid-template-columns: 1fr; }
  .matrix-item { border-right: none !important; }
  .matrix-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-divider); }
  .matrix-item:last-child { border-bottom: none; }
}


/* ───────────────────────────────────────────────────────────────────────────
   QUADRANT — mission / vision / values / promise
   ─────────────────────────────────────────────────────────────────────────── */

.quadrant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.quadrant > * {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.quadrant > *:nth-child(2n) { border-right: none; }
.quadrant > *:nth-last-child(-n+2) { border-bottom: none; }
.quadrant h3 { margin: 0; }
.quadrant p  { margin: 0; font-size: var(--text-body-sm); }

@media (max-width: 560px) {
  .quadrant { grid-template-columns: 1fr; }
  .quadrant > * { border-right: none; }
  .quadrant > *:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
  .quadrant > *:last-child { border-bottom: none; }
}


/* ───────────────────────────────────────────────────────────────────────────
   CTA BAND
   ─────────────────────────────────────────────────────────────────────────── */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section-y-band) clamp(24px, 5vw, 64px);
  background: var(--gradient-brand);
  border-radius: var(--radius-2xl);
  text-align: center;
  color: var(--color-text-on-dark);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--motif-grid);
  background-size: var(--motif-grid-size);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, var(--mask-ink) 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, var(--mask-ink) 5%, transparent 72%);
}

.cta-band h2 { color: var(--color-text-inverse); margin-bottom: var(--space-4); }
.cta-band p  { max-width: 58ch; margin-inline: auto; color: var(--color-text-on-dark); }

.cta-band .hero-actions { justify-content: center; margin-top: var(--space-8); }


/* ───────────────────────────────────────────────────────────────────────────
   PROSE — service detail and job description bodies
   ─────────────────────────────────────────────────────────────────────────── */

/* Body headings keep the global h2 size. They previously rendered at
   --text-h3, which meant "Overview" on a service page and "Who We Are" on the
   About page — both <h2> — differed by roughly 14px. */
.prose h2 {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.prose h2:not(:first-child) { margin-top: var(--space-10); }
.prose p { margin-bottom: var(--space-4); }

/* Checked list with hairline rules — used for "What's included". */
.check-list { display: flex; flex-direction: column; }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-body-sm);
}

.check-list li:last-child { border-bottom: none; }

.check-list .icon-svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 19px; height: 19px;
  color: var(--color-success);
}

/* Plain bulleted list for job requirements. */
.bullet-list { display: flex; flex-direction: column; gap: var(--space-3); }

.bullet-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-body-sm);
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}


/* ───────────────────────────────────────────────────────────────────────────
   CAREERS
   ─────────────────────────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.filter-bar .field { margin-bottom: 0; flex: 1 1 190px; }
/* Labels here match every other form label in the app. They were a step
   smaller, so the same control read differently inside a filter bar. */
.filter-bar .field > label { font-size: var(--text-body-sm); }

.job-list { display: flex; flex-direction: column; gap: var(--space-4); }

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.job-card:hover {
  border-color: var(--color-primary-subtle);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.job-card h3 { margin-bottom: var(--space-3); }
.job-card-main { flex: 1 1 320px; }

@media (max-width: 560px) {
  .job-card .btn { width: 100%; }
}


/* ───────────────────────────────────────────────────────────────────────────
   FOOTER
   ─────────────────────────────────────────────────────────────────────────── */

.site-footer {
  padding-top: var(--section-y);
  background: var(--color-primary-darker);
  color: var(--color-text-on-dark-dim);
  font-size: var(--text-body-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr 1.5fr;
  gap: var(--gap-layout-sm);
  padding-bottom: var(--space-12);
}

.footer-brand img {
  height: 52px;
  width: auto;
  margin-bottom: var(--space-5);
  /* The logo is a dark mark; invert it to sit on the dark footer. */
  filter: brightness(0) invert(1);
  opacity: .95;
}

.footer-brand p { max-width: 40ch; }

/* DELIBERATE VARIANT — the footer column titles are labels, not headings.
   They stay small, uppercase and wide-tracked on purpose; the <h4> tag is
   there for document outline, not for size. This is the one heading override
   in the public site that is intentional. */
.site-footer h4 {
  margin-bottom: var(--space-5);
  color: var(--color-text-inverse);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }

.footer-links a {
  color: var(--color-text-on-dark-dim);
  transition: color var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out);
}

.footer-links a:hover { color: var(--color-text-inverse); padding-left: var(--space-1); }

.footer-contact { display: flex; flex-direction: column; gap: var(--space-4); }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer-contact .icon-svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary-muted);
}

.footer-contact a { color: var(--color-text-on-dark-dim); overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--color-text-inverse); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border-inverse);
  font-size: var(--text-caption);
  color: var(--color-text-on-dark-dim);
}

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

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
}


/* ───────────────────────────────────────────────────────────────────────────
   ERROR PAGES
   ─────────────────────────────────────────────────────────────────────────── */

.error-page {
  display: grid;
  place-items: center;
  min-height: 76vh;
  padding: var(--space-12) var(--container-pad);
  text-align: center;
}

.error-code {
  font-family: var(--font-display);
  font-size: var(--text-error-code);
  font-weight: var(--weight-extra);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page h1 { margin-block: var(--space-5) var(--space-4); }
.error-page p  { max-width: 52ch; margin-inline: auto; }
.error-page .hero-actions { justify-content: center; }