/* =============================================================
   GLOBAL MARKETING MASTERS INDIA PRIVATE LTD — MAIN STYLESHEET
   Mobile-first base styles. Breakpoint overrides live in
   responsive.css so each file can be handed to a dev separately.
   ============================================================= */

/* -------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-green: #2E7D32;
  --color-green-dark: #245F27;
  --color-green-light: #E8F3E9;
  /* Accent green tuned for legibility on dark navy surfaces (hero image,
     Industries section) — the base --color-green is too dark to read
     against navy, so this is the deliberate "green on dark" pairing. */
  --color-green-accent: #7FD989;
  --color-navy: #0B1F3A;
  --color-navy-light: #16305A;
  --color-navy-deep: #081527;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-text: #333B44;
  --color-text-muted: #6B7280;
  --color-border: #E3E7EC;
  --color-bg-alt: #F5F7FA;

  /* The only red in the palette — reserved exclusively for form
     validation (error borders/text, required-field markers). Never
     use it decoratively. */
  --color-error: #C0392B;

  /* WhatsApp's own brand green — a deliberate, one-off exception to
     "brand icons use the site's own palette" (Design Polish Principle
     #8; see the footer social icons, which use --color-green rather
     than LinkedIn/Facebook/YouTube's real brand colors). A floating
     WhatsApp button's recognizability specifically depends on
     WhatsApp's own brand color, so it's excluded from that rule on
     purpose — kept as a named token (not a bare hardcoded hex) so
     that reasoning is easy to find, not because it's meant to be
     reused elsewhere. */
  --color-whatsapp: #25D366;

  /* Typography — Sora carries more character for headings (a little
     geometric personality without tipping into decorative), Inter
     stays the clean workhorse for body copy. */
  --font-heading: 'Sora', 'Inter', Arial, sans-serif;
  --font-body: 'Inter', 'Sora', Arial, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Radius — deliberately tiered by element weight rather than one
     value reused everywhere: sharp/assertive for buttons & small
     chips, a step softer for card containers, most generous for
     large standalone photography. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows — depth scale tied to hierarchy, not copy-pasted per
     component. Low = resting cards, Mid = hover lift, High = the
     one or two elements meant to visually float (About badge). */
  --shadow-low: 0 1px 3px rgba(11, 31, 58, 0.05);
  --shadow-mid: 0 16px 32px rgba(11, 31, 58, 0.12);
  --shadow-high: 0 22px 44px rgba(11, 31, 58, 0.16), 0 4px 10px rgba(46, 125, 50, 0.07);
  /* Colored shadow paired with any hover state that fills a
     background with --color-green, so the lift reads as branded
     rather than a generic dark drop shadow. */
  --shadow-green: 0 10px 22px rgba(46, 125, 50, 0.28);

  /* Layout */
  --container-width: 1200px;
  /* Unscrolled desktop header height — bumped from 96px to fit the
     final, larger 76px logo (see .logo-mark and CLAUDE.md §5) with
     comfortable breathing room rather than the ~4px total slack 96px
     would leave. Shrinks further once .is-scrolled is added on
     scroll; see that state's own rules. */
  --header-height: 116px;
  /* Offset for anchor-nav scrolling so a section's heading doesn't
     land flush under the sticky header — header height + a little
     breathing room. Overridden at the 768px header-height jump in
     responsive.css. */
  --scroll-offset: 104px;

  /* Motion */
  --transition-fast: 0.2s ease;
  --transition-reveal: 0.35s ease;
}

/* Respect the user's OS-level motion preference: all scroll-reveal
   and hover-lift motion collapses to an instant, static state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-white);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.3;
}

/* Large display headings get tighter line-height and a touch of
   negative tracking — loose line-height on big type is one of the
   fastest ways a page reads as an unstyled template. */
h1, h2 {
  line-height: 1.12;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

/* Anchor-nav targets: offsets each section so its heading clears the
   sticky header instead of landing underneath it. See the nav's
   href="#id" list in the header/footer and the scroll-spy observer
   in main.js — this selector list must stay in sync with both. */
#home,
#about,
#services,
#careers,
#contact {
  scroll-margin-top: var(--scroll-offset);
}

.text-accent {
  color: var(--color-green);
}

/* Screen-reader only utility (kept for future forms/labels) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll-reveal utility: elements start faded/offset, get .is-visible
   added once by the shared IntersectionObserver in main.js (which
   unobserves immediately after), so re-scrolling past a section never
   re-triggers the animation. Kept fast (350ms) and a small 16px
   offset — a nudge, not an entrance. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Small stagger for multi-piece reveals (e.g. the About triptych) —
   delay only, so each piece still animates in at the same fast speed */
.reveal-delay-1.is-visible { transition-delay: 0.1s; }
.reveal-delay-2.is-visible { transition-delay: 0.2s; }

/* -------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

/* The arrow glyph nudges forward on hover instead of just sitting there */
.btn span[aria-hidden] {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn:hover span[aria-hidden],
.btn:focus-visible span[aria-hidden] {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  box-shadow: var(--shadow-green);
}

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-white);
  color: var(--color-navy);
}

.btn-quote {
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* -------------------------------------------------------------
   4. HEADER
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-fast);
}

/* Compact "scrolled" state — added by main.js once the page scrolls
   past a small threshold. Keeps the sticky header from sitting at
   full hero-adjacent height for the whole scroll; see the mobile
   values here and the 768px override in responsive.css. A subtle
   shadow also replaces the flat border-bottom once content is
   visibly scrolling underneath it. */
.site-header.is-scrolled {
  box-shadow: var(--shadow-low);
}

.site-header.is-scrolled .header-inner {
  min-height: 72px;
}

.site-header.is-scrolled .logo-mark {
  height: 42px;
}

.site-header.is-scrolled .header-topbar {
  display: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  min-height: var(--header-height);
  transition: min-height var(--transition-fast);
}

/* Logo — a single image now (full horizontal lockup: mark + wordmark
   baked in by the design team), not an icon + separately-typeset
   wordmark, so there's no adjacent text element to lay out here. */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 76px is the final desktop resting size — a deliberate, noticeable
   jump from the previous 60px after the wordmark still read as too
   small to comfortably make out. Treat this as settled; don't keep
   incrementally bumping it further without a specific new complaint
   (see CLAUDE.md §5). logo.png's actual source file is 600x200 —
   comfortably supports this render size with room to spare well
   past it (downscaling only; no upscaling/blur risk until well
   beyond 600px wide, and this renders at 76*3=228px wide). */
.logo-mark {
  display: block;
  height: 76px;
  width: auto;
  transition: height var(--transition-fast);
}

/* Thin contact-info strip — a genuinely separate row, direct child of
   .site-header, sitting above .header-inner rather than nested inside
   it. Previously this was nested inside a shared .header-right column
   alongside .header-navbar, which meant .header-inner's
   align-items: center centered .logo against that whole two-row
   column (topbar+gap+navbar combined) rather than against .header-navbar
   specifically — since .header-navbar was the BOTTOM row of that
   column, its own center sat noticeably below the logo's (confirmed:
   roughly half of (topbar height + gap) ≈ 15px lower, given this
   component's actual sizes) even though .header-inner's flex
   alignment was already correct. Pulling this row out entirely
   removes the stacked-column complication rather than patching it —
   see CLAUDE.md §5 for the full trace. Small vertical padding of its
   own keeps it visually close under the header's top edge and above
   .header-inner, echoing the old column's tight 0.5rem gap.
   Navy background gives it clear visual separation from the white
   .header-inner row below (previously blended into the same white) —
   full-bleed on this outer element; .header-topbar-inner (a
   .container) keeps the links themselves aligned with the row below,
   the same full-bleed-background/container-content split
   .hero-media/.hero-inner already uses. */
.header-topbar {
  background: var(--color-navy);
}

.header-topbar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-md);
  padding-block: 0.4rem;
}

/* Base .topbar-link stays navy-on-white — this class is reused by
   .mobile-menu-contact (the slide-in panel, white background), so the
   header's navy-background override below is scoped specifically to
   .header-topbar-inner rather than changed here, which would have made
   the mobile-menu copies invisible (white text on their white panel). */
.topbar-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.topbar-link:hover,
.topbar-link:focus-visible {
  color: var(--color-green);
}

.topbar-link .icon {
  color: var(--color-green);
  font-size: 1rem;
}

/* White/green-accent override for the header's own copy only, now
   that .header-topbar has a navy background — the base navy text
   above would disappear against it. --color-green-accent (not the
   base --color-green) for the same reason every other green-on-navy
   element on the page uses it — see CLAUDE.md §2's token note: base
   --color-green is too dark to read on navy. */
.header-topbar-inner .topbar-link {
  color: var(--color-white);
}

.header-topbar-inner .topbar-link:hover,
.header-topbar-inner .topbar-link:focus-visible {
  color: var(--color-green-accent);
}

.header-topbar-inner .topbar-link .icon {
  color: var(--color-green-accent);
}

/* flex: 1 (was width: 100% of the now-removed .header-right column) —
   takes the remaining row width next to .logo directly, so
   .header-inner's align-items: center centers it against the logo
   with nothing else in between. */
.header-navbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
  flex: 1;
  min-width: 0;
}

/* Primary nav */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  gap: var(--space-lg);
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-green);
}

/* Hover underline grows from the left, independent of the always-on
   active-state underline below */
.nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-green);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.nav-link:hover::before,
.nav-link:focus-visible::before {
  transform: scaleX(1);
}

.nav-link.active {
  color: var(--color-green);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-green);
  border-radius: var(--radius-pill);
}

/* Hamburger toggle (hidden on desktop, shown via responsive.css) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bar {
  width: 24px;
  height: 2px;
  background: var(--color-navy);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Toggle -> "X" state when menu is open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile slide-in menu panel (positioned/animated in responsive.css) */
.mobile-menu {
  display: none;
}

.mobile-menu-backdrop {
  display: none;
}

/* -------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Defensive fallback, shown behind/instead of hero.jpg if it's
     ever missing or fails to load (hero-img has onerror to hide a
     broken <img>) — a soft light falloff from the upper-right
     (echoing the real photo's sunset) layered over the base navy
     diagonal, rather than one flat gradient stop. hero.jpg is a real
     photo now, so this normally isn't visible. */
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(22, 48, 90, 0.65), transparent 60%),
    linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Verified via simulated crops at both extremes: on wide desktop
     viewports object-fit:cover only trims top/bottom slightly (the
     photo is already wider than most hero aspect ratios); on
     narrow/tall mobile viewports it crops hard to a vertical slice,
     and center keeps that slice on the India-map/solar-and-wind
     panel — the strongest, most brand-relevant part of the photo —
     rather than an arbitrary edge. */
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Re-centered (from a left-heavy gradient) now that .hero-content
     sits in the middle of the section instead of the left column —
     dark band across the middle 30-70% for text contrast, lighter
     (but never fully transparent — .45 floor) at both edges so the
     toll-plaza/city on the left and warehouse/security on the right
     both stay visible. This is the >=992px value, where
     .hero-content's 820px max-width actually creates visible
     flanking margins; below that .hero-content still spans close to
     full width, so responsive.css uses a flatter tint instead — see
     the note there and in CLAUDE.md §5. */
  background: linear-gradient(
    90deg,
    rgba(11, 31, 58, 0.45) 0%,
    rgba(11, 31, 58, 0.72) 30%,
    rgba(11, 31, 58, 0.72) 70%,
    rgba(11, 31, 58, 0.45) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* Symmetric padding is deliberate: this is just a safety floor for
     very short content, not the thing doing the vertical centering.
     justify-content: center below is — asymmetric top/bottom padding
     would bias the centered content group away from true center. */
  padding-block: var(--space-xl);
  /* Desktop (992px+) resting height — see the 768px/mobile overrides
     in responsive.css for the shorter tablet/mobile values, and the
     hero-sizing note in CLAUDE.md §5 for why these specific numbers. */
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Centered layout: label/heading/desc/buttons/trust all sit in one
   centered column, per an explicit request to move away from
   Design/homepage.png's left-aligned treatment (flagged here since
   it's a deliberate departure from the design reference, not an
   oversight). align-items: center above centers .hero-content and
   .hero-trust as flex children. */
.hero-content {
  max-width: 820px;
  text-align: center;
}

.hero-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-green-accent);
  /* Tightened from --space-sm (16px) to --space-xs (8px) — label
     should sit close under the heading, not floating a full 16px
     above it. Part of a deliberate tighter rhythm across the whole
     centered content block; see CLAUDE.md §5 for the full set. */
  margin-bottom: var(--space-xs);
}

.hero-heading {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-white);
  /* Tightened from --space-md (24px) to --space-sm (16px) — heading
     and paragraph read as one grouped statement rather than two
     evenly-spaced blocks. */
  margin-bottom: var(--space-sm);
}

.hero-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  /* Narrower than .hero-content on purpose (a common wide-heading/
     narrower-flowing-paragraph pattern) — needs its own auto margins
     to actually sit centered within that wider column, since
     text-align only centers the text inside the box, not the box
     itself. */
  max-width: 480px;
  margin-inline: auto;
  /* Tightened from --space-lg (40px) to --space-md (24px) — still a
     clear, deliberate break before the CTAs (more than the label/
     heading gaps above), just not as loose as the old value. */
  margin-bottom: var(--space-md);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* Trust indicators row — centered as a flex child of .hero-inner
   (align-items: center there); justify-content here centers the
   items among themselves once they wrap on narrow screens. */
.hero-trust {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
}

.hero-trust-item .icon {
  font-size: 1.6rem;
  color: var(--color-white);
}

/* Left-side callout badge. Hidden by default — only shown at 1200px+
   (see responsive.css), where .hero-content's centered 820px column
   actually leaves enough flanking margin for this to sit beside it
   without crowding. Positioned absolute within .hero-inner exactly
   like the removed .hero-script corner accent used to be (see
   CLAUDE.md §5) — independent of the flex-centered content, not a
   flex child of it. */
.hero-tag {
  display: none;
}

.hero-tag-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-white);
}

.hero-tag-underline {
  display: block;
  width: 32px;
  height: 2px;
  margin-top: var(--space-xs);
  background: var(--color-green-accent);
  border-radius: var(--radius-pill);
}

/* Service icon strip — a visually secondary supporting row below the
   primary CTA/trust row (smaller scale, dark glass badges, never
   competing with .hero-actions for attention). Mobile: a single
   horizontally-scrolling row rather than a multi-row grid — 8 items
   stacked in a 2-column grid would add real height to an
   already-tall mobile hero (see CLAUDE.md §5); scrolling sideways
   keeps the hero's mobile height essentially unchanged. Wraps into a
   proper grid at 768px+ once there's enough width per item — see
   responsive.css. */
.hero-services {
  display: flex;
  width: 100%;
  max-width: 720px;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-bottom: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  position: relative;
  z-index: 1;
}

.hero-service-item {
  flex: 0 0 108px;
  scroll-snap-align: start;
}

.hero-service-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  height: 100%;
  padding: var(--space-sm) var(--space-xs);
  background: rgba(11, 31, 58, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  text-align: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.hero-service-link:hover,
.hero-service-link:focus-visible {
  background: rgba(11, 31, 58, 0.75);
  border-color: var(--color-green-accent);
}

.hero-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-green-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.hero-service-icon .icon {
  width: 19px;
  height: 19px;
}

.hero-service-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--color-white);
}

/* Short colored bar under the label — same visual language as
   .hero-tag-underline above, following the site's established
   "2px, --radius-pill, --color-green(-accent)" underline-accent
   convention (see .nav-link.active::after) rather than a new one. */
.hero-service-link::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-green-accent);
  border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------
   6. SECTION HEADING (reused by any centered section intro)
   ------------------------------------------------------------- */
.section-heading {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.section-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-xs);
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.section-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* -------------------------------------------------------------
   7. SERVICES SECTION
   ------------------------------------------------------------- */
.services {
  /* The flagship section right after the hero gets the most generous
     breathing room on the page — deliberately more than About/CTA. */
  padding-block: var(--space-2xl);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-low);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.service-card:hover,
.service-card:focus-within {
  box-shadow: var(--shadow-mid);
  transform: translateY(-3px);
}

.service-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card-media img {
  transform: scale(1.06);
}

.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-sm);
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-xs);
}

/* Small badge holding either an inline SVG icon or a text glyph (e.g. "P") */
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background-color var(--transition-fast);
}

/* Badge shifts to brand green on card hover — same "interaction ==
   green" language used on buttons/links/social icons across the site */
.service-card:hover .service-icon {
  background: var(--color-green);
}

.service-icon .icon {
  width: 18px;
  height: 18px;
}

.service-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.service-card-desc {
  flex: 1;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}

/* "Enquire" link, pinned bottom-left of the card — text + arrow-nudge,
   the same established pattern as .career-card-link (see Careers
   section), not the icon-only circle this used to be. A named CTA on
   every card reads as intentional; an unlabeled arrow-in-a-circle was
   the one CTA on the whole site with no visible label. Kept as a
   lightweight text link rather than a bordered/filled button — 9
   solid or outlined buttons in one grid would compete with the
   section's other CTAs for attention. */
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  color: var(--color-green);
  font-weight: 600;
  font-size: 0.85rem;
  transition: color var(--transition-fast);
}

.service-card-link span[aria-hidden] {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.service-card-link:hover,
.service-card-link:focus-visible {
  color: var(--color-green-dark);
}

.service-card-link:hover span[aria-hidden],
.service-card-link:focus-visible span[aria-hidden] {
  transform: translateX(3px);
}

/* -------------------------------------------------------------
   8. ABOUT SECTION
   ------------------------------------------------------------- */
.about {
  /* Light green wash — separates this section from the white Services
     section above and the light-gray (--color-bg-alt) Stats bar below,
     using an existing brand token rather than a new color. Because the
     section itself now carries this tint, .about-highlights below
     switches to a plain white card (was the same --color-green-light)
     so it still reads as a distinct floating card, not just more of
     the section background. */
  background: var(--color-green-light);
  padding-block: var(--space-xl);
}

/* Rebuilt with explicit, named tracks at every breakpoint (see the
   768px/992px overrides in responsive.css) rather than relying on
   implicit auto-sizing — a prior version used bare `1fr`/`0.85fr`
   tracks plus `align-items: stretch` at 992px, which combined with
   .about-media's `aspect-ratio` in an ambiguous way (stretch forces a
   definite height on the item while aspect-ratio wants to derive
   height from width, a genuinely contested case across browsers) and
   was the likely source of the image column bleeding into content.
   The 992px override now uses `align-items: start` and a fixed
   (not `fr`) highlights track instead. */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "content"
    "highlights";
  gap: var(--space-lg);
  align-items: start;
}

/* Grid items default to min-width: auto, which lets their content's
   intrinsic size push past the track width instead of shrinking to
   fit it — the classic cause of a grid column bleeding into its
   neighbor. Reset all three so each one respects its own track.
   Belt-and-suspenders with the minmax(0, ...) tracks in
   responsive.css, which enforce the same floor at the track level. */
.about-media,
.about-content,
.about-highlights {
  min-width: 0;
}

.about-media {
  grid-area: media;
  position: relative;
  aspect-ratio: 4 / 3;
  /* Standalone photography gets the most generous radius on the
     page — a step up from the 8px used on card containers.
     NOTE: no overflow:hidden here — .about-badge is a child that
     must be able to overflow this box (it intentionally overlaps
     the bottom-left corner, see .about-badge below). The rounded
     corners instead live on the background (border-radius alone
     rounds a background) and on the img itself below. */
  border-radius: var(--radius-lg);
  /* Doubles as the letterbox fill behind .about-media img's
     object-fit: contain (see below) as well as the 404 fallback —
     with about.jpg's own ratio (1.334) this close to this box's 4/3
     (1.333), any letterboxing is sub-pixel, but the gradient is here
     regardless so neither case shows raw white. */
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
}

/* object-fit: contain, not cover — a deliberate choice so the full
   photo is always guaranteed visible, never cropped by this box.
   about.jpg's own ratio (1.334) already nearly matches this box's
   aspect-ratio (4/3 = 1.333, set above), so cover's crop would have
   been sub-pixel anyway — but contain makes that a hard guarantee
   instead of a near-match that could still shave a sliver at some
   viewport width/zoom level. See CLAUDE.md §5 "About photo". */
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

/* White "About Us" card overlapping the image's bottom-left corner —
   the one element on the page meant to visually float, so it gets
   the strongest shadow tier plus a card-level radius (bigger/softer
   than the small icon-badge radius used elsewhere). */
.about-badge {
  position: absolute;
  left: var(--space-md);
  bottom: calc(-1 * var(--space-md));
  background: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-high);
}

.about-badge-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-green);
}

.about-content {
  grid-area: content;
}

.about-heading {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.about-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

.about-highlights {
  grid-area: highlights;
  /* White, not --color-green-light — the section itself now carries
     that tint (see .about above), so the card needs a contrasting fill
     to still read as a distinct floating card rather than blending
     into the section background. */
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  /* Barely-there lift — this card is differentiated from the page
     mainly by its (now white-on-green-tint) background, not by shadow,
     so it stays the lightest shadow tier rather than matching the
     service cards. */
  box-shadow: var(--shadow-low);
}

.about-highlights-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}

.about-highlight-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.about-highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(46, 125, 50, 0.15);
  color: var(--color-green);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.about-highlight-item:hover .about-highlight-icon {
  background: var(--color-green);
  color: var(--color-white);
}

.about-highlight-icon .icon {
  width: 20px;
  height: 20px;
}

.about-highlight-title {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.about-highlight-desc {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------
   9. STATS BAR
   ------------------------------------------------------------- */
.stats-bar {
  background: var(--color-bg-alt);
  padding-block: var(--space-lg);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-sm);
  justify-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.stat-item.is-visible {
  opacity: 1;
  transform: none;
}

.stat-icon {
  flex-shrink: 0;
  font-size: 2.25rem;
  color: var(--color-navy);
}

.stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------
   10. INDUSTRIES SECTION
   ------------------------------------------------------------- */
.industries {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  /* Asymmetric on purpose: more room opening into this dark section
     from the light Stats bar above, a touch less closing into the
     light CTA banner below — a deliberate transition, not a copy of
     the xl padding used on Services/About. */
  padding-block: var(--space-2xl) var(--space-xl);
}

.industries-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fallback shows even before/without industries-bg.jpg in place —
     a soft horizon-glow radial (evoking dusk light on the highway
     photo this will become) over the base navy diagonal, so the
     placeholder reads as designed depth rather than a flat tint. */
  background:
    radial-gradient(140% 100% at 20% 100%, rgba(22, 48, 90, 0.7), transparent 55%),
    linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
}

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

.industries-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 31, 58, 0.9) 0%,
    rgba(11, 31, 58, 0.75) 100%
  );
}

.industries-inner {
  position: relative;
  z-index: 1;
}

/* Recolor the shared section-heading pattern for this dark section.
   --color-green-accent matches the light green already used for
   .hero-label on the navy hero image — the same two dark sections on
   the page share one deliberate "green on navy" pairing, kept
   distinct from the base --color-green (too low-contrast on navy). */
.industries .section-label,
.industries .section-title .text-accent {
  color: var(--color-green-accent);
}

.industries .section-title {
  color: var(--color-white);
}

.industries .section-desc {
  color: rgba(255, 255, 255, 0.85);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-sm);
  text-align: center;
}

.industry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.industry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.industry-item:hover .industry-icon {
  background: rgba(127, 217, 137, 0.18);
  border-color: var(--color-green-accent);
  color: var(--color-green-accent);
}

.industry-icon .icon {
  width: 26px;
  height: 26px;
}

.industry-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.85rem;
}

/* -------------------------------------------------------------
   11. CAREERS SECTION
   ------------------------------------------------------------- */
.careers {
  padding-block: var(--space-xl);
}

.careers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.career-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-low);
  padding: var(--space-md);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.career-card:hover,
.career-card:focus-within {
  box-shadow: var(--shadow-mid);
  transform: translateY(-3px);
}

.career-card-title {
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}

.career-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.career-card-meta li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.career-card-meta .icon {
  color: var(--color-green);
  font-size: 0.95rem;
}

/* Same arrow-nudge micro-interaction used on .btn — reused here on a
   plain text link rather than inventing a new hover treatment */
.career-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-green);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.career-card-link span[aria-hidden] {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.career-card-link:hover,
.career-card-link:focus-visible {
  color: var(--color-green-dark);
}

.career-card-link:hover span[aria-hidden],
.career-card-link:focus-visible span[aria-hidden] {
  transform: translateX(3px);
}

.careers-cta {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.careers-cta a {
  color: var(--color-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.careers-cta a:hover,
.careers-cta a:focus-visible {
  color: var(--color-green-dark);
}

/* -------------------------------------------------------------
   12. CTA BANNER
   ------------------------------------------------------------- */
.cta-banner {
  /* Tighter and punchier than the full-content sections around it —
     a banner interlude, not another full section, so it shouldn't
     match Services/Industries padding. */
  padding-block: var(--space-lg);
  background: var(--color-bg-alt);
}

.cta-banner .container {
  text-align: center;
}

.cta-banner-heading {
  max-width: 760px;
}

/* -------------------------------------------------------------
   13. CONTACT SECTION (info column + form card)
   Merged in from the former standalone contact.html — now the last
   content section before the footer in the single-page site. Its
   top intro uses the standard centered .section-heading pattern
   (matching Services/Industries) in place of the old .page-banner.
   ------------------------------------------------------------- */
.contact {
  /* Matches About's role as a main informational section — the same
     weight tier, not the Services "flagship" 2xl. */
  padding-block: var(--space-xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.contact-detail-label {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.contact-detail-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.contact-detail-text a {
  color: inherit;
  transition: color var(--transition-fast);
}

.contact-detail-text a:hover,
.contact-detail-text a:focus-visible {
  color: var(--color-green);
}

.contact-social {
  display: flex;
  gap: var(--space-xs);
}

/* Same hover language as .footer-social-link (green fill, lift,
   green shadow) recolored for a light background */
.contact-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-navy);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.contact-social-link:hover,
.contact-social-link:focus-visible {
  background: var(--color-green);
  color: var(--color-white);
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--shadow-green);
}

.contact-social-link .icon {
  width: 18px;
  height: 18px;
}

/* Form card — a resting card like .about-highlights, not a hover
   surface, so it stays at the low shadow tier */
.contact-form-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-low);
  padding: var(--space-lg);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-navy);
  margin-bottom: 0.4rem;
}

.form-label .required {
  color: var(--color-error);
  margin-left: 0.15rem;
}

.form-control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.form-control.is-invalid {
  border-color: var(--color-error);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

.form-error {
  display: block;
  color: var(--color-error);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.form-submit {
  grid-column: 1 / -1;
}

/* Success state shown in place of the form after client-side
   "submission" — see js/contact-form.js */
.form-success {
  text-align: center;
  padding-block: var(--space-md);
}

.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-green-light);
  color: var(--color-green);
  margin-bottom: var(--space-sm);
}

.form-success-icon .icon {
  width: 28px;
  height: 28px;
}

.form-success-title {
  font-size: 1.2rem;
  margin-bottom: var(--space-xs);
}

.form-success-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

.form-success-reset {
  color: var(--color-green);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-success-reset:hover,
.form-success-reset:focus-visible {
  color: var(--color-green-dark);
}

/* -------------------------------------------------------------
   14. MAP EMBED
   ------------------------------------------------------------- */
.contact-map {
  width: 100%;
  aspect-ratio: 21 / 8;
  background: var(--color-bg-alt);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------- */
.site-footer {
  /* Subtle depth rather than one flat navy block — darkens slightly
     toward the bottom bar. */
  background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: rgba(255, 255, 255, 0.75);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}

.footer-col-title {
  color: var(--color-white);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  position: relative;
  display: inline-block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast);
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-green-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-white);
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
}

/* Brand column — the real logo's navy/green wordmark has no
   transparency (opaque near-white background baked into the source
   file) and reads poorly straight on the navy footer, so it sits on
   a small white card instead. Small-chip radius tier, since this is
   a compact UI element, not a card container or standalone photo. */
.footer-logo {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.footer-logo-mark {
  display: block;
  height: 40px;
  width: auto;
}

.footer-tagline {
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: var(--space-xs);
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition: background-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  background: var(--color-green);
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--shadow-green);
}

.footer-social-link .icon {
  width: 18px;
  height: 18px;
}

/* Contact column */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.footer-contact .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  color: var(--color-green);
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--color-white);
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  font-size: 0.85rem;
  text-align: center;
}

.footer-legal-links {
  display: flex;
  gap: var(--space-sm);
}

.footer-legal-links li:not(:last-child)::after {
  content: '|';
  margin-left: var(--space-sm);
  color: rgba(255, 255, 255, 0.3);
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--color-white);
}

/* -------------------------------------------------------------
   16. FLOATING WHATSAPP BUTTON
   Persistent, fixed-position contact shortcut anchored to the
   viewport rather than any section — lives right before </body> in
   index.html, outside every <section>/<footer>, so it stays visible
   and in the same spot regardless of scroll position. Base rule here
   is the mobile size; responsive.css bumps it up at 768px+ (same
   mobile-first pattern as everything else — see CLAUDE.md §5).
   ------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  /* Above the sticky header (z-index: 100) so it's never hidden
     behind it, per the brief — but deliberately BELOW the mobile
     slide-in menu and its backdrop (z-index: 200 / 150), so opening
     the hamburger menu naturally covers this button instead of it
     floating awkwardly on top of an open modal-style panel. */
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  animation: whatsapp-pulse 2.5s ease-in-out infinite;
}

.whatsapp-fab svg {
  width: 26px;
  height: 26px;
}

/* Hover/keyboard-focus: scale + a stronger, generic elevation shadow
   (--shadow-high, the site's "floating element" tier — used here for
   its depth, not its color, since it's a neutral navy/green mix that
   still reads fine over a green circle). Native browser focus outline
   is intentionally left in place (no outline: none anywhere here) —
   same pattern as every other :focus-visible rule on this page:
   additive to the default outline, not a replacement for it. */
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: scale(1.08);
  box-shadow: var(--shadow-high);
}

/* Gentle "breathing" pulse, box-shadow only — not a scale/transform
   animation, so it can't visibly fight the transform-based hover
   state above (an infinite transform loop would conflict with
   :hover's own transform the moment a visitor's cursor lands on it).
   prefers-reduced-motion is already handled globally (style.css §1's
   blanket animation-duration override collapses this to a single,
   effectively static frame) — no separate override needed here, per
   CLAUDE.md's "don't add per-component reduced-motion overrides on
   top of it" rule. */
@keyframes whatsapp-pulse {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  }
  50% {
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35), 0 0 0 10px rgba(37, 211, 102, 0.25);
  }
}

/* -------------------------------------------------------------
   17. LEADERSHIP TEAM SECTION
   NOTE on numbering: this section sits in the DOM between About
   and Services (CLAUDE.md §1), but is appended here at the end of
   the numbered list rather than renumbering 9-16 — matching the
   file's existing precedent where Services (7) already precedes
   About (8) despite About coming first in the actual page. CSS
   section number is build order, not DOM position; see CLAUDE.md
   §1 for the authoritative DOM order.
   ------------------------------------------------------------- */
.leadership {
  /* Supporting section, same weight as About rather than the
     flagship Services spacing (Design Polish Principle #4). */
  padding-block: var(--space-xl);
  /* Same light-gray tint as the Stats bar (reused token, not a new
     color) — gives this section visual separation from the
     light-green About section above and the white Services section
     below, keeping the page's alternating background rhythm intact
     now that Leadership sits directly between them. See CLAUDE.md §5
     "Leadership Team section" for the full rhythm reasoning. */
  background: var(--color-bg-alt);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  /* Narrower than the full .container so a 2-up pair reads as
     centered content, not a stretched-thin full-width grid. */
  max-width: 600px;
  margin: 0 auto;
}

.team-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-low);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  /* Same lift-on-hover vocabulary as .service-card/.career-card. */
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.team-card:hover,
.team-card:focus-within {
  box-shadow: var(--shadow-mid);
  transform: translateY(-3px);
}

.team-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  overflow: hidden;
  /* Same letterbox/404-fallback gradient used behind .about-media img. */
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
}

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

.team-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.team-role {
  color: var(--color-green);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

/* Same icon+text meta pattern as .career-card-meta li. */
.team-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.team-phone .icon {
  color: var(--color-green);
  font-size: 0.95rem;
}

.team-phone:hover,
.team-phone:focus-visible {
  color: var(--color-green-dark);
}