/* ==========================================================================
   BASE — resets, document defaults, typography primitives, helpers
   Loaded after Bootstrap so these win over stock BS defaults.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-ink-850);
  background-color: var(--c-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-base);
}

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

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

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-navy-900);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

/* Project container — overrides Bootstrap's stepped max-widths so the
   content column matches the Figma frame exactly at >=1728px. */
.container,
.container-fluid,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  padding-inline: var(--container-pad);
  margin-inline: auto;
}

/* Wider variant used by the "Our Solutions" panel. */
.container--wide {
  max-width: calc(var(--container-wide) + var(--container-pad) * 2);
}

.section {
  padding-block: var(--section-py);
  position: relative;
}

/* Genuinely tighter than .section — it previously resolved LARGER than the
   default, so every "tight" section was actually the roomiest on the page. */
.section--tight {
  padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}

/* Light ground for a band of white cards. Without it the cards float on the
   page with nothing but a hairline to hold them, and a run of them reads as
   one flat expanse. */
.section--tint {
  background: #f6f8fb;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY PRIMITIVES  (reused on every page)
   -------------------------------------------------------------------------- */

.section-head {
  text-align: center;
  max-width: 60rem;
  margin-inline: auto;
}

.section-head--start {
  text-align: left;
  margin-inline: 0;
  max-width: none;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: var(--fw-light);
  letter-spacing: 0.45px;
  color: var(--c-ink-900);
  background: var(--c-tint-indigo);
  border-radius: var(--r-sm);
  padding: 0.32rem 0.85rem;
  margin-bottom: var(--sp-3);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.13;
  color: var(--c-navy-900);
}

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

.section-sub {
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.51px;
  color: var(--c-ink-850);
}

/* Thin gradient rule shown above centred headings (Figma: 34x2 bar). */
.section-rule {
  width: 34px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--g-cta-button);
  margin: 0 auto var(--sp-4);
}

/* --------------------------------------------------------------------------
   HELPERS
   -------------------------------------------------------------------------- */

.text-brand {
  color: var(--c-primary);
}

/* Standard gap between a .section-head and the content it introduces.
   Bootstrap's mt-* scale has no equivalent because this one is fluid. */
.mt-head {
  margin-top: var(--head-gap);
}

/* A Bootstrap .row carries `margin-top: calc(-1 * var(--bs-gutter-y))` to
   cancel the top padding of its first row of columns. Setting margin-top on
   the row wipes that out, so the gutter silently reappears as extra space.

   The gap therefore goes on PADDING, leaving Bootstrap's margin intact.
   Subtracting the gutter from the margin instead looks tidier but breaks:
   a bare .row declares `--bs-gutter-y: 0` UNITLESS, and `calc(62px - 0)` is
   invalid CSS, so the declaration is dropped and the gap silently becomes 0.
   Rows with a g-* class survived it; rows without one did not.

   Caveat: because the gap is padding, do NOT put these classes on a .row that
   is itself a visible panel (border/background) — the space would land inside
   the box. Wrap such a row in a plain <div class="mt-head"> instead. */
.row.mt-head {
  margin-top: calc(-1 * var(--bs-gutter-y));
  padding-top: var(--head-gap);
}

/* Tighter head gap for lightweight content — a row of chips or a single
   line. The full --head-gap is sized for card grids and leaves a heading
   visibly floating above anything smaller. */
.mt-head-sm {
  margin-top: calc(var(--head-gap) * 0.55);
}

.row.mt-head-sm {
  margin-top: calc(-1 * var(--bs-gutter-y));
  padding-top: calc(var(--head-gap) * 0.55);
}

.mt-gap-sm {
  margin-top: 1.5rem;
}

.row.mt-gap-sm {
  margin-top: calc(-1 * var(--bs-gutter-y));
  padding-top: 1.5rem;
}

.mt-gap-lg {
  margin-top: 3rem;
}

.row.mt-gap-lg {
  margin-top: calc(-1 * var(--bs-gutter-y));
  padding-top: 3rem;
}

.fw-inherit {
  font-weight: inherit;
}

.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 {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--c-primary);
  color: var(--c-white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--c-white);
}

/* Reveal-on-scroll (progressive enhancement — see main.js).
   Without JS the element simply stays visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

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

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

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}