/* ==========================================================================
   Base: reset, typography, links, focus, layout primitives, utilities.
   Mobile first. Depends on tokens.css.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem; /* anchored headings stay clear of the sticky header */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h3,
h4 {
  font-weight: 600;
  letter-spacing: normal;
  line-height: var(--lh-snug);
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

blockquote,
figure {
  margin: 0;
}

b,
strong {
  font-weight: 700;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---- Links ------------------------------------------------------------- */

a {
  color: var(--c-red-dark);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover {
  color: var(--c-red-deep);
}

/* ---- Focus: always visible for keyboard users -------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-dark :focus-visible,
.cta-band :focus-visible,
.mobile-menu :focus-visible,
.announcement :focus-visible {
  outline-color: var(--c-focus-on-dark);
}

/* <main tabindex="-1"> receives focus from the skip link; no ring around the whole page. */
main:focus,
main:focus-visible {
  outline: none;
}

/* ---- Skip link --------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: calc(var(--z-menu) + 1);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-navy);
  color: var(--c-text-on-dark);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  color: var(--c-text-on-dark);
  outline-color: var(--c-red-soft);
}

/* ---- Layout primitives ------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

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

.section--sm {
  padding-block: var(--sp-section-sm);
}

.section--flush-top {
  padding-top: 0;
}

/* Closing CTA band (navy box at the end of a page): the same space above and below the box.
   After a plain section, that section's bottom padding already gives the space above; after a
   white (surface) or bordered section the CTA section adds its own, so the box never touches
   the border above it. */
.section--cta {
  padding-top: 0;
}

.section--surface + .section--cta,
.grid-bg--bordered + .section--cta {
  padding-top: var(--sp-section);
}

.section--surface {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
}

/* Faint 48px grid used behind heroes and some sections. */
.grid-bg {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.grid-bg--bordered {
  border-block: 1px solid var(--c-border);
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--sp-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--sp-3));
  align-items: center;
}

/* Responsive auto-fit grids matching the design's minmax() values. */
.grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--grid-gap, var(--sp-5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 18.75rem), 100%), 1fr));
}

.grid--cards { --grid-min: 21.25rem; }   /* 340px: module cards, step cards */
.grid--300 { --grid-min: 18.75rem; }     /* 300px: testimonials, posts */
.grid--260 { --grid-min: 16.25rem; }     /* 260px: benefits */
.grid--230 { --grid-min: 14.375rem; --grid-gap: var(--sp-4); } /* 230px: small feature cards */
.grid--stats { --grid-min: 9rem; --grid-gap: var(--sp-3); }

/* ---- Text helpers ------------------------------------------------------ */

.text-red { color: var(--c-red); }
.text-body { color: var(--c-text-body); }
.text-muted { color: var(--c-text-muted); }
.text-center { text-align: center; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--c-text-body);
  max-width: 40rem;
}

.mono {
  font-family: var(--font-mono);
}

.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;
}

[hidden] {
  display: none !important;
}

/* Body scroll is locked while the mobile menu is open. */
.is-menu-open,
.is-menu-open body {
  overflow: hidden;
}

/* ---- Reduced motion ---------------------------------------------------- */

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

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

/* ---- Windows high contrast / forced colours ---------------------------- */

@media (forced-colors: active) {
  .btn,
  .card,
  .faq,
  .contact-detail,
  .lp-contact__btn {
    border: 1px solid CanvasText;
  }
  .hex {
    forced-color-adjust: none;
  }
}