/* ══════════════════════════════════════════════════════════════════════════
   Base layer — the page shell, the responsive type scale, and the small
   utilities every template leans on. The reset, the element defaults and
   the whole colour system come from tokens.css, which loads first; this
   file only adds what a full site needs and a component sheet does not.

   Everything is written mobile-first, which matches the handoff's own
   order of record: < 768px is home-mobile.html, 768–1023px is the tablet
   pass, >= 1024px is home-desktop.html.
   ══════════════════════════════════════════════════════════════════════ */

html {
  -webkit-text-size-adjust: 100%;
  /* Keeps in-page anchors (#services, #faq, the breadcrumb's Services
     link) from landing their target underneath the fixed bar. */
  scroll-padding-top: calc(var(--bar-height-mobile) + var(--space-4));
}

body {
  /* The mobile design sits on the neutral ground rather than the warmer
     --color-bg; the wide layouts use --color-bg. One declaration each,
     rather than a token that means different things per breakpoint. */
  background: var(--color-neutral-100);
  -webkit-font-smoothing: antialiased;
}

/* ── type scale ────────────────────────────────────────────────────── */

h1 { font-size: 42px; line-height: 1.0; letter-spacing: -0.015em; }
h2 { font-size: 27px; line-height: 1.08; }
h3 { font-size: 21px; line-height: 1.15; }
h4 { font-size: 17px; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { text-decoration: underline; }

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

button { font: inherit; color: inherit; }

/* The handoff's focus ring, everywhere, never the browser default. */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── layout primitives ─────────────────────────────────────────────── */

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

/* A full-bleed band: the coloured strip runs edge to edge, the content
   inside it still respects the container. */
.band { padding-block: var(--space-8); }
.band--dark { background: var(--color-accent-2-900); color: var(--color-accent-2-100); }
.band--sand { background: var(--color-surface); }

/* Vertical rhythm between ordinary (un-banded) sections. */
.section { padding-top: var(--space-8); }
.section:first-child { padding-top: var(--space-6); }

/* ── small shared pieces ───────────────────────────────────────────── */

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

/* The uppercase mono kicker above a heading. --kicker-color lets a caller
   switch it for a light ground without a second class. */
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kicker-color, var(--color-accent-2-400));
}
/* On the light grounds the neutral-500 tint measures 2.4:1 against the
   cream, well under the 4.5:1 these 11px labels need. neutral-700 is the
   same family two steps darker and clears it on cream, sand and the
   mobile neutral ground alike. */
.kicker--light { --kicker-color: var(--color-neutral-700); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: var(--z-skip);
  background: var(--color-accent-400);
  color: var(--color-accent-900);
  font-weight: 800;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-3); text-decoration: none; }

/* ── tablet: 768px and up ──────────────────────────────────────────── */

@media (min-width: 768px) {
  html { scroll-padding-top: calc(var(--bar-height-tablet) + var(--space-4)); }

  body { background: var(--color-bg); }

  h1 { font-size: 58px; line-height: .95; letter-spacing: -.02em; }
  h2 { font-size: 36px; line-height: 1.05; letter-spacing: -.01em; }
  h3 { font-size: 24px; }
  h4 { font-size: 19px; }

  .wrap {
    max-width: calc(var(--container-max) + var(--gutter-tablet) * 2);
    padding-inline: var(--gutter-tablet);
  }

  .band { padding-block: var(--band-pad-tablet); }
  .section { padding-top: var(--section-gap-tablet); }
  .section:first-child { padding-top: var(--section-gap-tablet); }
}

/* ── desktop: 1024px and up ────────────────────────────────────────── */

@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--bar-height) + var(--space-4)); }

  h1 { font-size: 76px; }
  h2 { font-size: 46px; }

  .wrap {
    max-width: calc(var(--container-max) + var(--gutter-desktop) * 2);
    padding-inline: var(--gutter-desktop);
  }

  .band { padding-block: var(--band-pad); }
  .section { padding-top: var(--section-gap); }
  .section:first-child { padding-top: var(--section-gap); }
}

/* ── 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;
  }
}