/* ══════════════════════════════════════════════════════════════════════════
   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 {
  /* Two declarations, one per breakpoint — the narrow layout sat on the
     neutral ground and the wide one on the warmer --color-bg. The Ink
     Indigo & Brass theme specifies a single page ground, so both now
     resolve to #f7f5f0 and the shift at 768px is a no-op. Kept as two
     declarations so a future theme can separate them again. */
  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.

   Brass is the ring you see, per the theme's rule 6. It is 6.89:1 against
   the indigo bands and only 2.13:1 against the light ground, though, so on
   the light half of the site the brass alone would not meet the 3:1 a
   focus indicator needs. The shadow puts the shell indigo (14.69:1 on the
   ground) immediately outside the brass, so the indicator's outer edge
   carries the contrast and the brass keeps carrying the colour.

   Geometry: the outline sits 2-4px out from the border box; the 5px spread
   covers 0-5px and an outline paints above a box-shadow, so the result
   reads as a dark hairline, the brass ring, then a dark hairline. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-accent-2-900);
}

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