/*
 * styles.css — Modulus Dynamics marketing site.
 *
 * Visual language: premium, modern aerospace / industrial contract
 * manufacturing. A light, airy layout on soft neutral surfaces, brand blue
 * accents, and deep-navy bands (hero, pre-footer CTA, footer) for contrast.
 *
 * Goals (Req 7.1, 7.4, 7.5, 7.6):
 *   - Responsive layout with NO horizontal scrolling of primary content from
 *     320px to 1920px (fluid layouts, max-width containers, flexbox/grid,
 *     box-sizing: border-box, responsive images max-width:100%).
 *   - Clearly visible keyboard focus indicators (:focus-visible) meeting a
 *     3:1 contrast against adjacent colors.
 *   - Color custom properties in :root matching EXACTLY the palette tokens in
 *     script.js. Contrast ratios (all meet WCAG 2.1 AA):
 *       --color-text        #16202e on #ffffff .... 15.7:1 (normal text)
 *       --color-text        #16202e on #f3f6fb .... 14.9:1 (normal text)
 *       --color-text-muted  #475569 on #ffffff ....  7.6:1 (muted text)
 *       --color-on-primary  #ffffff on #0b5cad ....  6.7:1 (button label)
 *       --color-primary     #0b5cad on #ffffff ....  6.7:1 (headings/links)
 *       --color-primary     #0b5cad on #f3f6fb ....  6.0:1 (links on surface)
 *       --color-navy-text   #eef4fc on #0a1a2f .... 16.6:1 (text on navy)
 *       --color-navy-accent #7cb8ff on #0a1a2f ....  8.4:1 (accent on navy)
 *       --color-focus       #0b5cad ................ focus ring (>=3:1)
 */

/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
  /* LIGHT PREMIUM PALETTE — MUST match script.js palette tokens EXACTLY.
     See the header comment above for measured WCAG contrast ratios. */
  --color-bg: #ffffff;
  --color-surface: #f3f6fb;            /* soft neutral surface */
  --color-text: #16202e;              /* near-navy ink body text */
  --color-text-muted: #475569;        /* slate muted text (7.6:1 on white) */
  --color-primary: #0b5cad;           /* brand blue */
  --color-on-primary: #ffffff;
  --color-focus: #0b5cad;

  /* Deep navy — used for the hero, pre-footer CTA band, and footer. */
  --color-navy: #0a1a2f;
  --color-navy-2: #0f2742;            /* lighter navy gradient stop */
  --color-navy-text: #eef4fc;         /* body text on navy (16.6:1) */
  --color-navy-muted: #b9c7dc;        /* muted text on navy (~9.3:1) */
  --color-navy-accent: #7cb8ff;       /* accent / links on navy (8.4:1) */
  --color-navy-border: rgba(255, 255, 255, 0.14);
  --color-navy-tile: rgba(255, 255, 255, 0.05);

  /* Supporting neutrals / accents. */
  --color-surface-2: #e9eff7;         /* deeper neutral inset */
  --color-card: #ffffff;              /* elevated card surface */
  --color-primary-hover: #094a8d;     /* darker primary for hover states */
  --color-primary-soft: rgba(11, 92, 173, 0.08);   /* tinted primary wash */
  --color-primary-tint: rgba(11, 92, 173, 0.14);   /* stronger tint */
  --color-border: #e2e8f0;            /* hairline border */
  --color-border-strong: #cbd5e1;     /* stronger divider */
  --color-accent: #0e7fb8;            /* teal-blue accent (decorative) */
  --color-accent-bright: #38bdf8;     /* bright cyan (decorative stops only) */

  /* Status colors (verified on white; surfaces are soft tints). */
  --color-error: #b91c1c;             /* 7.9:1 on #ffffff (AA) */
  --color-error-wash: #fdecec;        /* soft red message wash */
  --color-success: #15803d;           /* 5.0:1 on #ffffff (AA) */
  --color-success-wash: #eafaf0;      /* soft green confirmation wash */

  /* Typography — polished Google Fonts pairing with system fallbacks. */
  --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;              /* 16px normal text */
  --line-height-base: 1.7;

  /* Spacing scale. */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.75rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* Layout. */
  --container-max: 1200px;
  --content-max: 68ch;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --header-height: 4.5rem;

  /* Elevation scale — soft, layered shadows for a premium light surface. */
  --shadow-sm: 0 1px 2px rgba(15, 39, 66, 0.06), 0 1px 3px rgba(15, 39, 66, 0.08);
  --shadow-card: 0 1px 2px rgba(15, 39, 66, 0.05), 0 18px 40px -24px rgba(15, 39, 66, 0.28);
  --shadow-card-hover: 0 2px 6px rgba(15, 39, 66, 0.08),
    0 30px 55px -28px rgba(11, 92, 173, 0.35),
    0 0 0 1px rgba(11, 92, 173, 0.16);
  --shadow-header: 0 8px 24px -18px rgba(15, 39, 66, 0.4);

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   Reset / base
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* Prevent any accidental horizontal overflow of primary content (Req 7.1). */
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Offset fixed header so the first section is not hidden beneath it. */
  padding-top: var(--header-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
}

/* Responsive media never forces horizontal scroll (Req 7.1). */
img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Never let long words / URLs blow out narrow (320px) viewports. */
p,
li,
h1,
h2,
h3,
h4,
a,
label,
figcaption {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* =========================================================================
   Typography
   ========================================================================= */
h1,
h2,
h3,
h4 {
  color: var(--color-text);
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0 0 var(--space-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  /* Oversized display heading; large text needs >=3:1 (Req 7.5). */
  font-size: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.9rem, 3.5vw + 1rem, 3rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: clamp(1.2rem, 1.4vw + 0.75rem, 1.5rem);
}

h4 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--space-md);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration-color: currentColor;
}

.text-muted {
  color: var(--color-text-muted);
}

/* Reusable section eyebrow: small uppercase label above section headings. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.section-eyebrow__mark {
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* =========================================================================
   Focus indicators (Req 7.6) — visible, >=3:1 vs adjacent colors.
   --color-focus (#0b5cad) has 6.7:1 vs #ffffff and 6.0:1 vs #f3f6fb.
   ========================================================================= */
:focus {
  outline: none; /* fall through to :focus-visible for keyboard users */
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* On the dark navy bands a dark-blue ring lacks contrast; use the lighter
   navy accent instead (8.4:1 vs the navy surface, Req 7.6). */
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-navy-accent);
}

/* =========================================================================
   Layout helpers
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Skip link (Req 7.7) — visually hidden until focused.
   ========================================================================= */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: 0;
  transform: translateY(-120%);
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-on-primary);
  outline: var(--focus-ring-width) solid var(--color-on-primary);
  outline-offset: -1px;
}

/* =========================================================================
   Fixed header + navigation (Req 6.1, 6.2)
   Classes from renderNav(): .site-nav, .nav-link (+ .skip-link sibling).
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--header-height);
  padding-inline: max(var(--space-lg), calc((100% - var(--container-max)) / 2));
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  transition: background-color var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
}

/* Progressive enhancement: script.js adds .is-scrolled once the page scrolls. */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--color-border-strong);
  box-shadow: var(--shadow-header);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  white-space: nowrap;
}

/* Company logo <img class="site-logo"> inside the brand link. The shipped
   logo.svg uses brand blue + navy, so it reads cleanly on the light header. */
.site-logo {
  height: 2.2rem;
  width: auto;
  transition: transform var(--transition);
}

.site-brand:hover .site-logo {
  transform: translateY(-1px);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav .nav-link {
  position: relative;
  display: inline-block;
  padding: var(--space-xs) var(--space-2xs);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transition);
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: var(--space-2xs);
  right: var(--space-2xs);
  bottom: -2px;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.site-nav .nav-link:hover {
  color: var(--color-text);
}

.site-nav .nav-link:hover::after {
  transform: scaleX(1);
}

.site-nav .nav-link[aria-current="page"],
.site-nav .nav-link.is-active {
  color: var(--color-primary);
}

.site-nav .nav-link[aria-current="page"]::after,
.site-nav .nav-link.is-active::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-link::after {
    transition: none;
  }
}

/* Small-screen nav reflow (Req 7.1): stack brand over nav and let links wrap. */
@media (max-width: 640px) {
  :root {
    --header-height: 7rem;
  }
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
  }
  .site-nav {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-xs) var(--space-sm);
  }
  .site-nav .nav-link {
    padding: 0.35rem var(--space-xs);
  }
}

@media (max-width: 380px) {
  .site-nav .nav-link {
    font-size: 0.9rem;
  }
}

/* =========================================================================
   Buttons / CTA
   ========================================================================= */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-surface);
}

.btn--block {
  display: block;
  width: 100%;
}

/* Primary call-to-action button. Used for the hero CTA link, the pre-footer
   CTA band, and the contact submit button (class="cta-primary"). */
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.9rem 1.9rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  color: var(--color-on-primary); /* #ffffff on #0b5cad = 6.7:1 (Req 7.4) */
  background-image: linear-gradient(135deg, #1268bd 0%, var(--color-primary) 55%, #084a91 100%);
  background-color: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 24px -12px rgba(11, 92, 173, 0.55);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    filter var(--transition);
}

.cta-primary:hover {
  color: var(--color-on-primary);
  filter: saturate(112%) brightness(1.03);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -12px rgba(11, 92, 173, 0.7);
}

.cta-primary:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cta-primary,
  .cta-primary:hover,
  .cta-primary:active {
    transform: none;
  }
}

/* =========================================================================
   Page sections (#home/.hero, #services/.services, #about/.about,
   #contact/.contact) + pre-footer .cta-band.

   Section content lives directly inside each <section> (no inner wrapper),
   so the section provides the vertical rhythm and the centered max-width
   content column via the padding-centering trick. Alternating surface
   backgrounds give visual rhythm between sections.
   ========================================================================= */
.hero,
.services,
.about,
.contact {
  position: relative;
  padding-block: var(--space-3xl);
  padding-inline: max(var(--space-lg), calc((100% - var(--container-max)) / 2));
}

/* Alternating surface backgrounds for section rhythm. */
.services {
  background-color: var(--color-surface);
}

.about {
  background-color: var(--color-bg);
}

.contact {
  background-color: var(--color-surface);
}

/* Hairline dividers between the light content sections. */
.services,
.about,
.contact {
  border-top: 1px solid var(--color-border);
}

/* Section H2 heading — statement-line scale. */
.section-title {
  margin-bottom: var(--space-xl);
}

/* Section lead paragraphs sit at a comfortable reading measure, left-aligned. */
.about__intro,
.contact__intro {
  max-width: var(--content-max);
  margin-top: calc(var(--space-lg) * -1);
  margin-bottom: var(--space-xl);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.2rem);
  color: var(--color-text-muted);
}

/* =========================================================================
   Hero / Landing (#home) — deep navy band with a layered mesh background.
   Classes: .hero__image, .hero__content, .hero__eyebrow(+-dot), .hero__title,
   .hero__tagline, .hero__value-prop, .hero__cta-wrap, .hero__cta-secondary,
   .hero__cta-arrow, .hero__trust(+-item,-name,-status), .hero__services,
   .hero__service(-link,-name,-summary)
   ========================================================================= */
.hero {
  isolation: isolate;
  overflow: hidden; /* clip decorative background (Req 7.1) */
  color: var(--color-navy-text);
  border-bottom: 1px solid var(--color-navy);
  background-color: var(--color-navy);
  background-image:
    radial-gradient(1100px 520px at 82% -8%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(11, 92, 173, 0.55), transparent 62%),
    radial-gradient(760px 700px at 62% 120%, rgba(14, 127, 184, 0.25), transparent 60%),
    linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
}

/* Decorative blueprint SVG overlay: sits behind content, never overflows. */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 25%, transparent 100%);
}

/* Faint top hairline of light for a premium edge. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 184, 255, 0.5), transparent);
  z-index: -1;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 62rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-lg);
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-navy-accent);
  background-color: rgba(124, 184, 255, 0.08);
  border: 1px solid var(--color-navy-border);
  border-radius: var(--radius-pill);
}

.hero__eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-navy-accent);
  box-shadow: 0 0 0 4px rgba(124, 184, 255, 0.18);
}

.hero__title {
  margin-bottom: var(--space-sm);
  color: var(--color-navy-text);
}

/* Safe gradient sheen on the display title; only applied when supported so
   the text never disappears. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title {
    background-image: linear-gradient(180deg, #ffffff 0%, #cfe0f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero__tagline {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.5vw + 1rem, 1.9rem);
  font-weight: 600;
  color: var(--color-navy-accent);
  letter-spacing: -0.01em;
}

.hero__value-prop {
  max-width: 46rem;
  font-size: clamp(1.1rem, 1.2vw + 0.95rem, 1.35rem);
  line-height: 1.6;
  color: var(--color-navy-muted);
  margin-bottom: var(--space-xl);
}

.hero__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin: 0 0 var(--space-xl);
}

.hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--color-navy-text);
  text-decoration: none;
}

.hero__cta-secondary:hover {
  color: var(--color-navy-accent);
}

.hero__cta-arrow {
  transition: transform var(--transition);
}

.hero__cta-secondary:hover .hero__cta-arrow {
  transform: translateX(4px);
}

/* Trust / certification strip beneath the CTA. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
  padding: var(--space-md) 0 0;
  list-style: none;
  border-top: 1px solid var(--color-navy-border);
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-left: var(--space-md);
  border-left: 2px solid rgba(124, 184, 255, 0.5);
}

.hero__trust-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-navy-text);
}

.hero__trust-status {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy-accent);
}

/* Service-summary grid on the landing hero (5, equal weight). */
.hero__services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-md);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

.hero__service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: var(--color-navy-tile);
  border: 1px solid var(--color-navy-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform var(--transition), border-color var(--transition),
    background-color var(--transition);
}

.hero__service:hover {
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(124, 184, 255, 0.45);
}

.hero__service-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-navy-text);
}

.hero__service-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero__service-link:hover .hero__service-name {
  color: var(--color-navy-accent);
}

.hero__service-name {
  font-size: 1.05rem;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.hero__service-summary {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-navy-muted);
}

@media (prefers-reduced-motion: reduce) {
  .hero__service:hover,
  .hero__cta-secondary:hover .hero__cta-arrow {
    transform: none;
  }
}

/* =========================================================================
   Marquee band (decorative, aria-hidden). Seamless translateX loop; paused
   under prefers-reduced-motion.
   ========================================================================= */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.marquee__track {
  display: inline-flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}

.marquee__group {
  display: inline-flex;
  align-items: center;
}

.marquee__item {
  display: inline-block;
  padding-inline: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy-muted);
}

.marquee__sep {
  color: var(--color-navy-accent);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* =========================================================================
   Services section — classes from renderServices()
   .services__statement, .services__grid, .service-card(+__image,__header,
   __title,__description,__capabilities,__capability,__details,__group)
   ========================================================================= */
.services__statement {
  max-width: var(--content-max);
  margin: 0 0 var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.8vw + 1rem, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-primary-soft), var(--color-bg));
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-lg);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}

/* Refined top accent line on every card (all services equal weight). */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity var(--transition);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.service-card:hover::before,
.service-card:focus-within::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .service-card:hover {
    transform: none;
  }
}

/* Service card icon/illustration — small framed, tinted container. */
.service-card__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  padding: var(--space-md);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--color-primary-soft), var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.service-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.service-card__title {
  margin: 0;
  font-size: 1.3rem;
}

.service-card__description {
  margin: 0;
  color: var(--color-text-muted);
}

.service-card__capabilities {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.service-card__capability {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition), background-color var(--transition);
}

.service-card:hover .service-card__capability {
  border-color: color-mix(in srgb, var(--color-primary) 34%, transparent);
}

/* Processes / Equipment sub-lists inside each service card. */
.service-card__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.service-card__group {
  min-width: 0;
}

.capability__group-title {
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.capability__process-list,
.capability__equipment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.capability__process,
.capability__equipment-item {
  position: relative;
  margin-bottom: var(--space-xs);
  padding-left: 1.1rem;
  line-height: 1.5;
}

.capability__process::before,
.capability__equipment-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

/* =========================================================================
   About section — classes from renderAbout()
   .about__content, .about__mission, .about__differentiators,
   .about__subtitle, .about__differentiator-list, .about__differentiator
   (+__-title,__-description), .about__quality(+-note), .about__cert-list,
   .about__cert(+__-head,__-name,__-status,__-description)
   ========================================================================= */
.about__content {
  display: grid;
  gap: var(--space-2xl);
}

.about__mission {
  max-width: var(--content-max);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1vw + 1rem, 1.55rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.about__subtitle {
  font-size: 1.35rem;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

/* "Why Modulus Dynamics" differentiator cards. */
.about__differentiator-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-lg);
}

.about__differentiator {
  position: relative;
  padding: var(--space-lg);
  padding-top: calc(var(--space-lg) + 0.4rem);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}

.about__differentiator::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.about__differentiator:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

@media (prefers-reduced-motion: reduce) {
  .about__differentiator:hover {
    transform: none;
  }
}

.about__differentiator-title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.about__differentiator-description {
  margin: 0;
  color: var(--color-text-muted);
}

/* Quality & Certifications callout — sits on a soft primary-tinted panel. */
.about__quality {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  background:
    radial-gradient(120% 140% at 0% 0%, var(--color-primary-soft), var(--color-surface) 65%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.about__quality .about__subtitle {
  border-bottom-color: var(--color-border-strong);
}

.about__quality-note {
  max-width: var(--content-max);
  margin: 0 0 var(--space-lg);
  font-size: 1.05rem;
  color: var(--color-text);
}

.about__cert-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-md);
}

.about__cert {
  padding: var(--space-lg);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.about__cert-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
}

.about__cert-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.about__cert-status {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.about__cert-description {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* =========================================================================
   Pre-footer CTA band — deep navy, full-width.
   Classes: .cta-band(+__inner,__text,__eyebrow,__title,__subtitle,__button)
   ========================================================================= */
.cta-band {
  color: var(--color-navy-text);
  background-color: var(--color-navy);
  background-image:
    radial-gradient(700px 300px at 100% 0%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(700px 320px at 0% 100%, rgba(11, 92, 173, 0.45), transparent 60%),
    linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-2xl) max(var(--space-lg), calc((100% - var(--container-max)) / 2));
}

.cta-band__text {
  max-width: 46rem;
}

.cta-band__eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-navy-accent);
}

.cta-band__title {
  margin: 0 0 var(--space-xs);
  color: var(--color-navy-text);
}

.cta-band__subtitle {
  margin: 0;
  font-size: clamp(1.02rem, 0.6vw + 0.9rem, 1.2rem);
  color: var(--color-navy-muted);
}

.cta-band__button {
  flex-shrink: 0;
}

/* =========================================================================
   Contact form (#contact-form) — Req 5.x
   ========================================================================= */
.contact__direct {
  max-width: var(--content-max);
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  background:
    radial-gradient(140% 140% at 0% 0%, var(--color-primary-soft), var(--color-bg) 70%);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.contact__direct a {
  font-weight: 700;
  white-space: nowrap;
}

.contact-form {
  display: grid;
  gap: var(--space-lg);
  max-width: 42rem;
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.form-field {
  display: grid;
  gap: var(--space-xs);
}

.form-field label,
.contact-form label {
  font-weight: 600;
  color: var(--color-text);
}

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

.contact-form input,
.contact-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--color-primary);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Invalid fields (Req 5.5, 5.6): visible non-color-only cue + red border. */
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
  background-color: var(--color-error-wash);
}

.contact-form__submit {
  justify-self: start;
}

/* Per-field error message (<p class="form-field__error">). Hidden when empty. */
.form-field__error {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-error);
}

.form-field__error:empty {
  display: none;
}

.form-field__error::before {
  content: "\26A0"; /* warning sign, reinforces meaning beyond color */
  margin-right: 0.35rem;
}

/* aria-live status region (<p class="contact-form__status">). Hidden when empty. */
.contact-form__status {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status--success {
  color: var(--color-success);
  background-color: var(--color-success-wash);
  border: 1px solid var(--color-success);
}

.contact-form__status--error {
  color: var(--color-error);
  background-color: var(--color-error-wash);
  border: 1px solid var(--color-error);
}

.contact-form__status--pending {
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
}

/* =========================================================================
   Error / unavailable messages + retry banner (role="alert")
   Req 1.6, 1.7, 2.6, 6.4
   ========================================================================= */
.retry-banner,
[role="alert"].retry-banner {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-md) max(var(--space-lg), calc((100% - var(--container-max)) / 2)) 0;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-error-wash);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-weight: 600;
}

.retry-banner.is-visible,
.retry-banner[data-visible="true"],
.retry-banner:not([hidden]).is-visible {
  display: flex;
}

.retry-banner__message {
  margin: 0;
}

.retry-banner__button,
#retry-button {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: 700;
  color: var(--color-on-primary);
  background-color: var(--color-error);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.retry-banner__button:hover,
#retry-button:hover {
  background-color: #8f1512;
  border-color: #8f1512;
}

/* Non-blocking "unavailable" messages created by script.js (role="status"). */
.nav-message {
  margin: var(--space-sm) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.nav-message--inline {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-error);
  background-color: var(--color-error-wash);
  border-left: 3px solid var(--color-error);
  border-radius: var(--radius-sm);
}

[hidden] {
  display: none !important;
}

/* =========================================================================
   Footer — deep navy, multi-column.
   ========================================================================= */
.site-footer {
  color: var(--color-navy-muted);
  background-color: var(--color-navy);
  background-image:
    radial-gradient(800px 300px at 100% 0%, rgba(56, 189, 248, 0.1), transparent 60%),
    radial-gradient(700px 320px at 0% 0%, rgba(11, 92, 173, 0.35), transparent 60%);
}

.site-footer a {
  color: var(--color-navy-accent); /* 8.4:1 on navy */
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.2fr;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-2xl) max(var(--space-lg), calc((100% - var(--container-max)) / 2));
}

@media (max-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.site-footer__logo {
  height: 2.6rem;
  width: auto;
  margin-bottom: var(--space-md);
}

.site-footer__tagline {
  margin: 0 0 var(--space-sm);
  max-width: 34ch;
  color: var(--color-navy-muted);
  line-height: 1.6;
}

.site-footer__cert {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy-accent);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__col-label {
  margin: 0 0 var(--space-2xs);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy-text);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__nav a {
  font-weight: 600;
  width: max-content;
}

.site-footer__contact {
  margin: 0;
  font-weight: 600;
}

.site-footer__contact a {
  white-space: nowrap;
}

.site-footer__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.site-footer__bar {
  padding: var(--space-lg) max(var(--space-lg), calc((100% - var(--container-max)) / 2));
  border-top: 1px solid var(--color-navy-border);
  text-align: center;
}

.site-footer__bar p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-navy-muted);
}

/* =========================================================================
   Progressive scroll-reveal (aesthetic only). Content is visible by default;
   the hidden state applies ONLY under the .js-reveal class script.js adds when
   IntersectionObserver + no reduced-motion. Never blanks content.
   ========================================================================= */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   Wide-screen refinements (up to 1920px). Container caps width so content
   stays readable; no horizontal scroll at any width in range (Req 7.1).
   ========================================================================= */
@media (min-width: 1400px) {
  :root {
    --container-max: 1320px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }
}