/*
  Aegis Asset Reliability. Shared design system.
  Plain hand-authored CSS, no build step, no framework.
  One stylesheet, linked from every page.
*/

/* -----------------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------------- */
:root {
  /* Color: warm charcoal + brushed silver/platinum, matching the shield
     mark's own metal-on-black coloring (the mark is pure chrome/silver,
     not a warm hue, so the accent follows the logo rather than the
     photography). */
  --color-bg: #0c0a08;
  --color-bg-raised: #18140f;
  --color-bg-raised-2: #221c15;
  --color-fg: #f7f3ee;
  --color-fg-muted: #c2b7a9;
  /* Needs 4.5:1 minimum, it's used at small sizes (labels, hints, the
     header tagline). 7.24:1 vs --color-bg, 6.71:1 vs --color-bg-raised,
     6.18:1 vs --color-bg-raised-2: clears AA against every surface. */
  --color-fg-faint: #a69b8c;
  --color-border: #2e2820;
  --color-border-strong: #423a2d;
  /* Meets 3:1 non-text contrast against --color-bg; used for boundaries
     that need to read as interactive (secondary button, nav toggle),
     unlike --color-border-strong which is for decorative dividers only. */
  --color-border-interactive: #6b5d49;

  /* Accent: brushed silver/platinum, matching the shield mark's
     metal-on-black coloring. Used for primary buttons, focus rings,
     active nav state, link hover, eyebrow labels, service numerals.
     12.87:1 vs --color-bg, 11.93:1 vs --color-bg-raised, 10.98:1 vs
     --color-bg-raised-2. Clears the 4.5:1 small-text minimum and the
     3:1 UI-boundary minimum against every surface it appears on. */
  --color-platinum: #c9d2d6;
  /* Brighter hover/emphasis state: 16.43:1 vs --color-bg. */
  --color-platinum-bright: #e6ebec;
  /* Near-black text set on the metal button gradient below. 10.94:1
     against the gradient's darkest stop, 15.74:1 against its lightest. */
  --color-ink: #14181b;
  --color-metal-light: #eef1f3;
  --color-metal-dark: #c3ccd0;
  /* The two ends of the primary button's brushed-metal gradient fill. */

  /* Secondary link color: neutral desaturated silver-gray, no hue
     introduced. 9.19:1 vs --color-bg. */
  --color-link: #a6b3b9;

  /* Semantic */
  --color-focus: var(--color-platinum);

  /* Typography */
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-hero: clamp(2.5rem, 1.4rem + 5vw, 4.5rem);

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.65;

  /* Spacing, 4px base unit */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 75rem; /* 1200px */
  --container-pad: var(--space-6);

  --radius-sm: 3px;
  --radius-md: 6px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);

  --transition-fast: 150ms ease;
  --transition-normal: 240ms ease;
}

/* Light mode is what visitors get by default (the markup and the inline
   <head> script both set it); dark is opt-in via the toggle. The dark
   values live on :root above, and this block overrides just the color
   tokens. data-theme is set on <html> before first paint by
   an inline script in <head>, so there's no flash of the wrong theme.
   Values verified against each other the same way as the dark palette:
   fg 15.30:1, fg-muted 6.95:1, fg-faint 5.77:1 (needs 4.5), platinum-equiv
   accent 8.91:1, link 8.04:1, border-interactive 3.51:1 (needs 3), all vs
   --color-bg. The accent darkens instead of lightening since light silver
   on a light page has no contrast; same neutral hue, inverted lightness. */
:root[data-theme="light"] {
  --color-bg: #f3f3f2;
  --color-bg-raised: #e8e8e7;
  --color-bg-raised-2: #dddedc;
  --color-fg: #1a1d1c;
  --color-fg-muted: #50544f;
  --color-fg-faint: #5c605b;
  --color-border: #d8dad8;
  --color-border-strong: #c2c4c2;
  --color-border-interactive: #7e8280;

  --color-platinum: #3c4542;
  --color-platinum-bright: #272e2b;
  --color-ink: #f7f3ee;
  --color-metal-light: #30373a;
  --color-metal-dark: #14181b;

  --color-link: #454b48;
}

/* -----------------------------------------------------------------
   2. Reset and base
   ----------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-platinum-bright);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

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

button {
  font-family: inherit;
}

/* Visible, high-contrast focus state everywhere, keyboard and pointer alike */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Smooth cross-fade between themes. Added to <html> briefly by the toggle's
   click handler and removed once the transition finishes, rather than left
   on permanently, so it never fights the page's own hover/scroll
   transitions or slows down normal browsing. */
.theme-transition,
.theme-transition * {
  transition: background-color 0.4s ease, color 0.4s ease,
    border-color 0.4s ease, fill 0.4s ease, box-shadow 0.4s ease !important;
}

/* Skip link, visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: 100;
  background: var(--color-platinum);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

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

.section {
  padding-block: var(--space-16);
}

.section--tight {
  padding-block: var(--space-12);
}

.section--alt {
  background: var(--color-bg-raised);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-head {
  max-width: 42rem;
  margin-bottom: var(--space-10);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-platinum);
  margin-bottom: var(--space-3);
}

.section-head h1,
.section-head h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.section-head p {
  color: var(--color-fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.section-head--flush {
  max-width: none;
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .section {
    padding-block: var(--space-24);
  }
  .section--tight {
    padding-block: var(--space-16);
  }
  .section-head h1,
  .section-head h2 {
    font-size: var(--text-3xl);
  }
}

/* -----------------------------------------------------------------
   4. Buttons
   ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 44px, matching the nav/theme toggles: the usual comfortable minimum
     touch target, so every primary tap target on the site clears it. */
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  /* Brushed-metal fill, mirroring the shield mark's own metal-on-black
     coloring. */
  background: linear-gradient(135deg, var(--color-metal-light), var(--color-metal-dark));
  color: var(--color-ink);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-platinum-bright), var(--color-metal-light));
  color: var(--color-ink);
}

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

.btn--secondary:hover {
  border-color: var(--color-platinum);
  color: var(--color-fg);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.btn-row--center {
  justify-content: center;
}

/* -----------------------------------------------------------------
   5. Header / nav
   ----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle:hover {
  border-color: var(--color-platinum);
  color: var(--color-platinum);
}

.theme-toggle:active {
  transform: scale(0.92);
}

/* Both icons are stacked in place and cross-fade with a quarter-turn,
   rather than an instant display swap, so the switch itself feels like
   part of the same motion as the page's color cross-fade. */
.theme-toggle__icon {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  transition: opacity var(--transition-normal) ease, transform var(--transition-normal) ease;
}

.theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-80deg) scale(0.5);
}

:root[data-theme="light"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(80deg) scale(0.5);
}

:root[data-theme="light"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-fg);
}

.wordmark__mark {
  width: 2.25rem; /* 36px, vertically centered with the two-line text */
  height: 2.25rem;
  flex-shrink: 0;
}

.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.wordmark__name {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.wordmark__tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
  margin-top: 0.2em;
}

.wordmark:hover {
  color: var(--color-fg);
}

.wordmark:hover .wordmark__tag {
  color: var(--color-platinum);
}

/* Below ~416px there isn't room for the theme toggle, mark, full wordmark,
   and nav toggle on one row without the brand name itself wrapping
   mid-word (e.g. "Aegis Asset" / "Reliability"), which reads as broken.
   Trimming the two inter-element gaps and the name's font-size by a touch
   reclaims just enough width to keep the name on one line; the smaller
   mono tagline underneath may still wrap to two lines, which reads as a
   normal stacked label rather than a layout bug. */
@media (max-width: 26rem) {
  .site-header__left {
    gap: var(--space-2);
  }

  .wordmark {
    gap: var(--space-2);
  }

  .wordmark__name {
    font-size: 0.9375rem;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: the default minimum touch target size, not just the 28px floor,
     since this is the primary way to reach nav on mobile. */
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle__icon::before {
  position: absolute;
  top: -6px;
}

.nav-toggle__icon::after {
  position: absolute;
  top: 6px;
}

.site-nav {
  display: flex;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__list a {
  color: var(--color-fg-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding-block: var(--space-2);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-fg);
}

.site-nav__list a[aria-current="page"] {
  border-bottom: 2px solid var(--color-platinum);
}

.site-nav__list .btn {
  color: var(--color-ink);
}

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

  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-bg-raised);
    border-bottom: 1px solid var(--color-border);
    display: block;
  }

  .site-nav[hidden] {
    display: none;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--container-pad) var(--space-6);
  }

  .site-nav__list li {
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav__list li:last-child {
    border-bottom: none;
    padding-top: var(--space-4);
  }

  .site-nav__list a {
    display: block;
    padding-block: var(--space-3);
  }
}

@media (min-width: 48rem) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    background: none;
    border: none;
  }

  .site-nav[hidden] {
    display: flex;
  }
}

/* -----------------------------------------------------------------
   6. Home hero: text and photo side by side
   The text sits on the page background, not over the photo, so it
   follows the theme tokens like everything else and never depends on
   what the photo looks like underneath.
   ----------------------------------------------------------------- */
.home-hero {
  display: grid;
  border-bottom: 1px solid var(--color-border);
}

.home-hero__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The technician sits left of center in the source photo; this keeps
     him in frame when the column is narrower than the photo. */
  object-position: 34% center;
}

.home-hero__text {
  padding: var(--space-10) var(--container-pad) var(--space-12);
}

.home-hero h1 {
  font-size: var(--text-hero);
  margin-bottom: var(--space-5);
}

.home-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-8);
  max-width: 34rem;
}

@media (min-width: 48rem) {
  .home-hero {
    grid-template-columns: 1fr 1fr;
    min-height: min(46rem, calc(100vh - 4.75rem));
  }

  .home-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Lines the text up with the left edge of .container on wide screens. */
    padding-block: var(--space-16);
    padding-inline-start: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
    padding-inline-end: var(--space-8);
  }

  .home-hero__media {
    order: 2;
    aspect-ratio: auto;
  }

  /* Half-width column: cap the headline below the full-bleed hero size. */
  .home-hero h1 {
    font-size: clamp(2.5rem, 4vw, 3.75rem);
  }
}

/* Jump links to the four service groups, directly under the hero. */
.home-index {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-raised);
}

.home-index__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Each link is centered in its own cell, with hairlines between cells, so
   the row reads as four even blocks across the full container width
   instead of four left-aligned labels with a gap after the last one. */
.home-index__list li:nth-child(even) {
  border-inline-start: 1px solid var(--color-border-strong);
}

.home-index__list li:nth-child(n + 3) {
  border-top: 1px solid var(--color-border-strong);
}

.home-index__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 100%;
  min-height: 2.75rem;
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--color-fg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.home-index__list a:hover {
  color: var(--color-platinum-bright);
}

.home-index__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-platinum);
}

@media (min-width: 48rem) {
  .home-index__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .home-index__list li:nth-child(n + 3) {
    border-top: none;
  }

  .home-index__list li + li {
    border-inline-start: 1px solid var(--color-border-strong);
  }

  .home-index__list a {
    padding-block: var(--space-6);
  }
}

/* -----------------------------------------------------------------
   7. Image placeholder blocks (404 page uses none of these currently,
      kept for any future unplaced photo slot)
   ----------------------------------------------------------------- */
.img-placeholder {
  --ph-ratio: 4 / 3;
  position: relative;
  width: 100%;
  aspect-ratio: var(--ph-ratio);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-raised-2);
  background-image:
    repeating-linear-gradient(45deg, rgb(201 210 214 / 0.06) 0, rgb(201 210 214 / 0.06) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg, var(--color-bg-raised-2), var(--color-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.img-placeholder--wide {
  --ph-ratio: 16 / 9;
}

.img-placeholder--square {
  --ph-ratio: 1 / 1;
}

.img-placeholder__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
  color: var(--color-fg-faint);
}

.img-placeholder__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-fg-faint);
}

.img-placeholder__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: var(--leading-snug);
  max-width: 18rem;
}

.media-photo {
  --ph-ratio: 4 / 3;
  width: 100%;
  aspect-ratio: var(--ph-ratio);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.media-photo--wide {
  --ph-ratio: 16 / 9;
}

.media-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A <picture> wrapper must not become a box of its own, so the img keeps
   sizing against the photo container. */
.home-hero__media picture,
.media-photo picture {
  display: contents;
}

/* -----------------------------------------------------------------
   8. Home services: four groups, each a photo beside its service list
   ----------------------------------------------------------------- */
.service-groups {
  display: grid;
  gap: var(--space-16);
}

.service-group {
  display: grid;
  gap: var(--space-6);
  scroll-margin-top: 6rem;
}

.service-group__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-platinum);
  margin-bottom: var(--space-2);
}

.service-group h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.service-group__intro {
  color: var(--color-fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
}

.service-list {
  border-bottom: 1px solid var(--color-border);
}

.service-list li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.service-list h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.service-list p {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* The kiln photo is a portrait with open sky across its top; this keeps
   the supervisor in frame at a landscape crop. */
.media-photo--kiln img {
  object-position: center 64%;
}

@media (min-width: 56rem) {
  .service-groups {
    gap: var(--space-24);
  }

  .service-group {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-16);
    align-items: center;
  }

  .service-group--flip .service-group__media {
    order: 2;
  }
}

/* Training has no photo: a full-width panel with its three courses side
   by side, so the page ends its service list on a different beat. */
.service-group--panel {
  display: block;
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.service-group--panel .service-list {
  display: grid;
  border-bottom: none;
}

@media (min-width: 56rem) {
  .service-group--panel {
    padding: var(--space-12);
  }

  .service-group--panel .service-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }

  .service-group--panel .service-list li {
    padding-block: var(--space-5) 0;
    border-top-color: var(--color-border-strong);
  }
}

/* -----------------------------------------------------------------
   9. Home "Why Aegis": wide photo, four points, founder note
   ----------------------------------------------------------------- */
.media-photo--band {
  --ph-ratio: 16 / 9;
  margin-bottom: var(--space-12);
}

.why-points {
  display: grid;
  gap: var(--space-8);
}

.why-point {
  padding-top: var(--space-4);
}

/* The rule above each point is its own element so it can draw in (see
   the motion section) rather than a static border. */
.why-point::before {
  content: "";
  display: block;
  height: 2px;
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: var(--space-4);
  background: var(--color-platinum);
}

.why-point h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.why-point p {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.founder-note {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-strong);
}

.founder-note p {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 44rem;
}

@media (min-width: 40rem) {
  .why-points {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64rem) {
  .media-photo--band {
    --ph-ratio: 21 / 8;
    margin-bottom: var(--space-16);
  }

  .why-points {
    grid-template-columns: repeat(4, 1fr);
  }

  .founder-note {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-10);
  }
}

/* -----------------------------------------------------------------
   10. CTA banner
   ----------------------------------------------------------------- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-bg-raised-2), var(--color-bg-raised));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-8);
  display: grid;
  gap: var(--space-6);
  text-align: center;
}

.cta-banner h2 {
  font-size: var(--text-2xl);
}

.cta-banner p {
  color: var(--color-fg-muted);
  max-width: 34rem;
  margin-inline: auto;
}

.cta-banner .btn-row {
  justify-content: center;
}

@media (min-width: 48rem) {
  .cta-banner {
    padding: var(--space-16);
  }
}

/* Home page closing block: heading on one side, ways to reach Aegis on
   the other. The boxed .cta-banner above is still used on the about page. */
.cta-split {
  display: grid;
  gap: var(--space-8);
}

.cta-split h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.cta-split p {
  color: var(--color-fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 34rem;
}

.cta-split__actions {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.cta-split__actions a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg);
}

.cta-split__actions a:not(.btn):hover {
  color: var(--color-platinum-bright);
}

.cta-split__actions .btn {
  margin-bottom: var(--space-2);
}

@media (min-width: 56rem) {
  .cta-split {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-16);
  }

  .cta-split h2 {
    font-size: var(--text-3xl);
  }
}

/* -----------------------------------------------------------------
   11. Forms
   ----------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 40rem) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

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

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
}

.field .hint {
  font-size: var(--text-xs);
  color: var(--color-fg-faint);
  font-weight: 400;
}

.field--checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.field--checkbox input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2em;
  accent-color: var(--color-platinum);
}

.field--checkbox label {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-fg-muted);
  line-height: var(--leading-snug);
}

.field .required {
  color: var(--color-platinum);
  font-weight: 400;
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-fg);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea {
  resize: vertical;
  min-height: 8rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-fg-faint);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-fg-faint);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-platinum);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-platinum) 22%, transparent);
}

fieldset {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin: 0;
}

fieldset legend {
  font-size: var(--text-sm);
  font-weight: 600;
  padding-inline: var(--space-1);
}

.form-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-platinum);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* Result line under the contact form's send button. */
.form-status {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-platinum);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-fg);
}

.contact-layout {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 64rem) {
  .contact-layout {
    grid-template-columns: 1fr 22rem;
    align-items: start;
  }
}

.contact-info {
  display: grid;
  gap: var(--space-8);
}

.contact-info__block h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-faint);
  font-family: var(--font-mono);
  margin-bottom: var(--space-2);
}

.contact-info__block p,
.contact-info__block a {
  font-size: var(--text-base);
  color: var(--color-fg);
}

.placeholder-value {
  color: var(--color-platinum);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* -----------------------------------------------------------------
   12. Footer
   ----------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-raised);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12);
}

.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__brand-row .wordmark__mark {
  width: 1.75rem; /* 28px, a step down from the header's 36px */
  height: 1.75rem;
}

.site-footer__brand p {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  max-width: 26rem;
  margin-top: var(--space-2);
}

/* Two rows of footer links: the service pages, then the site pages. */
.site-footer__navs {
  display: grid;
  gap: var(--space-4);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-footer__nav a {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--color-fg);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-fg-faint);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 1.2fr auto;
    align-items: start;
  }
}

/* -----------------------------------------------------------------
   13. Legal pages (privacy, terms)
   ----------------------------------------------------------------- */
.legal {
  max-width: 42rem;
  display: grid;
  gap: var(--space-10);
}

/* Jump-to-section quick nav, so a long legal page can be scanned and
   skipped to without reading top to bottom. Reuses the same bordered,
   accent-striped box language as .form-note rather than introducing a
   new visual pattern. Anchors land below the sticky header thanks to
   scroll-margin-top on .legal h2 below. */
.legal-toc {
  max-width: 42rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Row gap is 0: each link below carries its own vertical padding, which
     already separates wrapped lines comfortably, so stacking an extra row
     gap on top would just make the box taller without helping tap
     accuracy. Column gap still separates links sharing a line. */
  gap: 0 var(--space-5);
  padding: var(--space-2) var(--space-5);
  margin-bottom: var(--space-10);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-platinum);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.legal-toc__label {
  width: 100%;
  padding-block: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}

.legal-toc a {
  /* Padding brings each link's own tap target close to the ~44px
     guidance (line-height ~23px + this padding), without needing a
     visible box around it to look like a button. */
  display: inline-block;
  padding-block: var(--space-3);
  color: var(--color-fg-muted);
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--color-platinum-bright);
}

.legal h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  scroll-margin-top: 5.5rem;
}

.legal p {
  color: var(--color-fg-muted);
}

.legal p + p {
  margin-top: var(--space-4);
}

.legal ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-6);
  list-style: disc;
  color: var(--color-fg-muted);
  margin-top: var(--space-4);
}

.legal a {
  color: var(--color-link);
}

/* -----------------------------------------------------------------
   13b. About page: leadership profile + career timeline
   Layout reuses .contact-layout / .contact-info (bio beside a facts
   column); only the pieces below are new.
   ----------------------------------------------------------------- */
.profile__head {
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
}

.profile__head h2 {
  font-size: var(--text-2xl);
}

.profile__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-platinum);
  margin-top: var(--space-2);
}

/* Short dated entries in the facts column (courses and certifications). */
.fact-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.fact-list li {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.fact-list span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-faint);
}

.prose {
  max-width: 42rem;
}

.prose p {
  color: var(--color-fg-muted);
}

.prose p + p {
  margin-top: var(--space-4);
}

/* Long-form service pages: headed sections and bulleted lists in .prose. */
.prose--page h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}

.prose--page h2:first-child {
  margin-top: 0;
}

.prose--page h2 + p {
  margin-top: 0;
}

.prose--page p + p,
.prose--page ul {
  margin-top: var(--space-4);
}

.prose--page ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-6);
  list-style: disc;
  color: var(--color-fg-muted);
}

/* Standalone link under a block of content, sized as a touch target. */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
}

.timeline {
  border-bottom: 1px solid var(--color-border);
}

.timeline__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.timeline__dates {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-platinum);
}

.timeline__row h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.timeline__row p {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

@media (min-width: 40rem) {
  .timeline__row {
    grid-template-columns: 11rem 1fr;
    gap: var(--space-6);
  }

  .timeline__dates {
    padding-top: 0.1em;
  }
}

/* -----------------------------------------------------------------
   14. 404 page
   ----------------------------------------------------------------- */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-24);
  text-align: center;
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-platinum);
  margin-bottom: var(--space-4);
}

.error-page h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.error-page p {
  color: var(--color-fg-muted);
  max-width: 30rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

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

/* -----------------------------------------------------------------
   16. Motion: scroll reveal, hero entrance, small hover responses
   Everything here is short, one-directional, and plays once: a fade and
   14px rise on scroll, a stepped fade-up for the hero text, a slow settle
   on the hero photo, and quiet hover feedback. No parallax, no bounce,
   nothing that loops. JS (main.js) adds .in via IntersectionObserver;
   prefers-reduced-motion shows everything in its final state immediately.
   ----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* With scripting off nothing would ever add .in, so show everything. */
@media (scripting: none) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scale only, no fade: the hero photo is the page's largest element, and
   starting it invisible would delay when the page counts as loaded. */
@keyframes hero-photo-settle {
  from {
    transform: scale(1.04);
  }
  to {
    transform: none;
  }
}

/* Hero text arrives one piece at a time, 80ms apart: label, headline,
   lead, buttons. */
.home-hero__text > * {
  animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-hero__text > :nth-child(2) {
  animation-delay: 80ms;
}

.home-hero__text > :nth-child(3) {
  animation-delay: 160ms;
}

.home-hero__text > :nth-child(4) {
  animation-delay: 240ms;
}

.home-hero__media img {
  animation: hero-photo-settle 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The four "Why Aegis" points follow each other in, and each one's top
   rule draws across from the left as it appears. */
.why-point:nth-child(2) {
  transition-delay: 80ms;
}

.why-point:nth-child(3) {
  transition-delay: 160ms;
}

.why-point:nth-child(4) {
  transition-delay: 240ms;
}

.why-point::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.why-point.in::before {
  transform: none;
}

/* Hover feedback: service photos ease in a touch, index and service rows
   nudge toward the reader. */
.service-group .media-photo img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-group:hover .media-photo img {
  transform: scale(1.03);
}

.home-index__list a {
  transition: color var(--transition-fast), transform var(--transition-normal);
}

.home-index__list a:hover {
  transform: translateY(-2px);
}

.service-list li {
  transition: padding-inline-start var(--transition-normal);
}

.service-list li:hover {
  padding-inline-start: var(--space-2);
}

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

  .home-hero__text > *,
  .home-hero__media img {
    animation: none;
  }

  .why-point::before {
    transform: none;
    transition: none;
  }

  .service-group:hover .media-photo img,
  .home-index__list a:hover {
    transform: none;
  }

  .service-list li:hover {
    padding-inline-start: 0;
  }

  .theme-toggle__icon,
  .theme-toggle,
  .btn,
  a {
    transition: none !important;
  }
}