/* =========================================================
   Base: resets, element defaults, layout primitive.
   No components in this file.
   ========================================================= */

/* Cross-document view transitions. Opts every same-origin navigation
   into the browser's default crossfade - no custom keyframes, no
   named transitions. Reduced-motion is respected automatically by
   the UA. Unsupported browsers ignore the at-rule with no fallback
   needed. */
@view-transition {
  navigation: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: var(--font-weight-text);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
  color: var(--color-foreground);

  /* Engineering-paper base: the hash pattern runs the entire viewport
     height, behind every band (announce bar, header, sections, cta,
     footer). Each band clips a frosted-glass content strip to the
     container width so the hash shows in the gutters only.
     Hash color is a neutral low-alpha foreground, not a brand tint. */
  background-color: var(--color-background);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 9px,
      color-mix(in oklch, var(--color-foreground) 3.5%, transparent) 9px,
      color-mix(in oklch, var(--color-foreground) 3.5%, transparent) 10px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 9px,
      color-mix(in oklch, var(--color-foreground) 2.5%, transparent) 9px,
      color-mix(in oklch, var(--color-foreground) 2.5%, transparent) 10px
    );

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Sticky-footer layout: body is a flex column spanning at least the
     viewport, main grows to fill, footer always sits at the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Each section's inner .container renders as its own solid white card,
   sitting on the slightly-darker page surface so the bands read as
   distinct white cards. */
.site-main .container {
  background: var(--color-card);
  border: 1px solid color-mix(in oklch, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  box-shadow:
    0 1px 0 color-mix(in oklch, white 55%, transparent) inset,
    0 12px 28px -18px rgb(16 17 20 / 10%);
}

/* Small vertical gap between card sections */
.site-main > section { padding-block: 0.75rem; }
.site-main > section:first-child { padding-top: 1.5rem; }
.site-main > section:last-child { padding-bottom: 1.5rem; }

/* Sections with their own bordered-frame card inside (.feature-grid,
   .stack-map) keep the container transparent so we don't stack a card
   on top of another card. */
.site-main > .feature-grid > .container,
.site-main > .stack-map > .container,
.site-main > .service-grid > .container {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-block: 0;
}

/* cta-band has an extra .cta-band__bg wrapper around its container. */
.site-main > .cta-band > .cta-band__bg > .container {
  background: var(--color-card);
  border: 1px solid color-mix(in oklch, var(--color-border) 80%, transparent);
  border-radius: var(--radius-xl);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  box-shadow:
    0 1px 0 color-mix(in oklch, white 55%, transparent) inset,
    0 12px 28px -18px rgb(16 17 20 / 10%);
}

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

a {
  color: var(--color-foreground);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--color-secondary);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 1rem;
  color: var(--color-foreground);
  /* Browsers rebalance line widths for short blocks (typically ≤6
     lines) — the effect kicks in on every headline on the site
     without per-section overrides, and silently no-ops on longer
     headings. Safe site-wide default. */
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-5xl);
}
h2 {
  font-size: var(--fs-4xl);
}
h3 {
  font-size: var(--fs-2xl);
}
h4 {
  font-size: var(--fs-xl);
}
h5 {
  font-size: var(--fs-lg);
}
h6 {
  font-size: var(--fs-base);
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

pre {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

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

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

[x-cloak] {
  display: none;
}

[hidden] {
  display: none;
}

/* --- Surface-box utility --------------------------------------------
   Applied on any band (banner, header, section, footer) to clip its
   background color to the container width, leaving the gutters
   transparent so the body hash shows through. Colors come from the
   local --surface-color custom property. */

.surface {
  background-color: transparent;
  background-image:
    linear-gradient(
      var(--surface-color, var(--color-card)),
      var(--surface-color, var(--color-card))
    );
  background-size: min(100%, var(--container-max)) 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}