/*
 * Reusable chrome, built from the DESIGN.md component table.
 * Tokens only — no raw hex. Green TYPE on light surfaces uses
 * --color-primary-ink (5.29:1); --color-primary is for fills.
 */

/* ── Layout primitives ─────────────────────────────────────────────── */

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

.skip-link {
  position: absolute;
  left: var(--space-xs);
  top: var(--space-xs);
  z-index: 100;
  transform: translateY(-250%);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: var(--text-button);
  text-decoration: none;
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-elevated);
  transition: transform 120ms ease;
}

.skip-link:focus { transform: translateY(0); }

/* ── Buttons ───────────────────────────────────────────────────────── */

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  font: var(--text-button);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: var(--rounded-full);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button-primary:hover { background: var(--color-primary-active); }
.button-primary:active { background: var(--color-primary-active); transform: scale(0.97); }

.button-primary--compact {
  min-height: 38px;
  padding: var(--space-xs) var(--space-md);
  font: var(--text-body-sm);
}

.button-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
}

.button-secondary:hover { box-shadow: var(--shadow-elevated); }
.button-secondary:active { transform: scale(0.97); }

.button-utility {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: var(--space-xxs) 14px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: var(--text-button);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-md);
  cursor: pointer;
}

.badge-pill {
  display: inline-block;
  padding: var(--space-xxs) var(--space-xs);
  background: var(--color-surface);
  color: var(--color-primary-ink);
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  border-radius: var(--rounded-full);
}

/* ── Header ────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
  padding-block: var(--space-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Logo sits on white or the warm canvas only — never on a coloured fill. */
.site-logo { display: inline-flex; }
.site-logo img { height: 38px; width: auto; }

.site-header__toggle { display: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav__link {
  color: var(--color-ink-secondary);
  font: var(--text-body-sm);
  text-decoration: none;
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover { color: var(--color-ink); }

.site-nav__link[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-primary);
}

/* ── Hero: the one inverted band per page ──────────────────────────── */

.hero-band {
  background: var(--color-secondary);
  color: var(--color-on-primary);
  padding-block: 88px;
}

/* No max-width: the container governs the measure, which keeps the
   headline at two lines instead of orphaning a word onto a third. */
.hero-band__headline {
  font: var(--text-display-1);
  letter-spacing: var(--tracking-display-1);
  margin-top: var(--space-lg);
  text-wrap: balance;
}

/* Display type sets at line-height 1.0, so the lede needs the larger step
   to clear the descenders. */
.hero-band__lede {
  font: var(--text-body-md);
  color: rgb(255 255 255 / 0.86);
  max-width: 62ch;
  margin-top: var(--space-lg);
}

.hero-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(3, 1fr);
}

.card-grid--two { grid-template-columns: repeat(2, 1fr); }
.card-grid--four { grid-template-columns: repeat(4, 1fr); }

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-lg);
  padding: var(--space-lg);
}

.feature-card__name {
  font: var(--text-heading-3);
  letter-spacing: var(--tracking-heading-3);
  margin-bottom: var(--space-xs);
}

.feature-card__body {
  font: var(--text-body-sm);
  color: var(--color-ink-secondary);
}

/* Figure/ground flips inside white sections so cards stay visible. */
.section--soft .feature-card,
.section--soft .product-card {
  background: var(--color-canvas-soft);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-lg);
  padding: var(--space-lg);
}

.product-card__name {
  font: var(--text-title);
  letter-spacing: var(--tracking-title);
}

.product-card__meta {
  display: grid;
  gap: var(--space-sm);
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-sm);
  margin-top: auto;
}

/* Label above value, not beside it — at 4-up the columns are too narrow for
   a two-column row and the values wrap into a ragged right edge. */
.product-card__row { font: var(--text-caption); }

.product-card__row dt {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.product-card__row dd {
  color: var(--color-ink-secondary);
  margin-top: 2px;
}

/* ── Stats ─────────────────────────────────────────────────────────── */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.stat { border-left: 2px solid var(--color-primary); padding-left: var(--space-md); }

.stat__value {
  font: var(--text-heading-1);
  letter-spacing: var(--tracking-heading-1);
  color: var(--color-primary-ink);
}

.stat__label {
  font: var(--text-body-sm);
  color: var(--color-ink-muted);
  margin-top: var(--space-xxs);
}

/* ── Steps ─────────────────────────────────────────────────────────── */

.step-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  counter-reset: step;
}

.step {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-lg);
  padding: var(--space-lg);
}

.step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-sm);
  background: var(--color-secondary);
  color: var(--color-on-primary);
  font: var(--text-eyebrow);
  border-radius: var(--rounded-full);
}

/* ── CTA band ──────────────────────────────────────────────────────── */

.cta-band {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-xl);
  padding: var(--space-xxl);
  box-shadow: var(--shadow-soft);
}

.cta-band__actions { margin-top: var(--space-lg); }

/* ── Contact ───────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-lg);
  padding: var(--space-lg);
}

.contact-card__label {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  margin-bottom: var(--space-xxs);
}

.contact-card__value {
  font: var(--text-body-md);
  color: var(--color-ink);
}

/* Enquiry-route cards: separate the address from the description above it. */
.contact-card .feature-card__body + .contact-card__value { margin-top: var(--space-sm); }

.contact-card__value a { text-decoration: none; }
.contact-card__value a:hover { text-decoration: underline; }

/* ── Prose ─────────────────────────────────────────────────────────── */

.prose {
  display: grid;
  gap: var(--space-md);
  max-width: 68ch;
}

.prose p {
  font: var(--text-body-md);
  color: var(--color-ink-secondary);
}

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-canvas-soft);
  border-top: 1px solid var(--color-hairline);
  color: var(--color-ink-secondary);
  padding-block: var(--space-xxl);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xxl);
}

.site-footer__logo { height: 34px; width: auto; }

.site-footer__tagline {
  font: var(--text-caption);
  color: var(--color-ink-muted);
  margin-top: var(--space-sm);
  max-width: 32ch;
}

.site-footer__heading {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-sm);
}

.site-footer__list { display: grid; gap: var(--space-xs); font: var(--text-caption); }
.site-footer__list a { color: var(--color-ink-secondary); text-decoration: none; }
.site-footer__list a:hover { color: var(--color-primary-ink); text-decoration: underline; }

.site-footer__body { font: var(--text-caption); color: var(--color-ink-secondary); }

.site-footer__legal {
  font: var(--text-caption);
  color: var(--color-ink-muted);
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-lg);
}