/* ═══════════════════════════════════════════════════════════════════════
   HEY LOW — KIRBY STARTER
   Hand-written CSS. No build step, no framework, no preprocessor.

   Order matters: tokens → themes → reset → base → utilities → layout →
   components → blocks → preferences. Later sections may use earlier
   tokens; nothing reaches backwards.

   Everything a project should need to change lives in the two blocks
   below. If you are editing further down to rebrand, a token is missing.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 1. TOKENS ──────────────────────────────────────────────────────── */

:root {

  /* — Palette —
     Raw values only. Nothing below references these directly; components
     use the semantic theme variables in section 2, which is what keeps
     contrast pairs from drifting apart.

     bite-size hr. Measured ratios are in the comments in section 2.
     --c-accent is a slightly darkened brand blue: the raw #1177fc gives
     3.5:1 on paper, which fails AA for body-sized text and for white text
     on a blue surface. The raw blue is kept below for the mosaic and the
     other flat colour blocks, where it is decoration and carries no text. */
  --c-ink:          #332526;
  --c-ink-soft:     #5c4a4b;
  --c-paper:        #ffffff;
  --c-paper-soft:   #fbf2f2;
  --c-line:         #e4d5d5;
  --c-accent:       #0d63d8;
  --c-accent-light: #ffc403;
  --c-accent-soft:  #dfe9fc;
  --c-mute-on-dark: #c0b5b5;

  /* — Brand colours —
     The four flat colours the mosaic, the service strips and the feature
     tiles are built from. Decoration only: nothing here is ever used as a
     text colour or as a background behind body text, so they are exempt
     from the contrast rules the palette above answers to. */
  --c-brand-blue:   #1177fc;
  --c-brand-yellow: #ffc403;
  --c-brand-coral:  #f79480;
  --c-brand-brown:  #4b3335;
  --c-brand-white:  #fff;

  /* — Type —
     Self-hosted WOFF2. The system stack is the fallback and is
     deliberately long: it is what renders during font swap, and on a slow
     connection it may be all anyone ever sees.

     Geist for running text, GT Alpina Condensed for headings, Pixelify
     Sans for the "bite-size" wordmark only. The first two are uploaded on
     the Panel's Theme tab, which emits their @font-face rules and re-states
     these two properties; the values here are the fallback if the tab is
     ever cleared. Pixelify is declared in section 11 — it is the logotype,
     not a content choice, so it is not editable. */
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'GT Alpina Condensed', 'Geist', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --font-logo: 'Pixelify Sans', var(--font-head);

  /* — Fluid type scale —
     Utopia, 360px→1240px viewport, 18px→20px base, 1.25→1.333 ratio.
     https://utopia.fyi/type/calculator?c=360,18,1.25,1240,20,1.333,7,2

     Fluid rather than stepped: no jump at a breakpoint, and it scales
     from the user's own base font size rather than overriding it. */
  --step--2: clamp(0.7035rem, 0.7268rem + -0.03vw,  0.72rem);
  --step--1: clamp(0.9rem,    0.8846rem + 0.0686vw, 0.9377rem);
  --step-0:  clamp(1.125rem,  1.0739rem + 0.2273vw, 1.25rem);
  --step-1:  clamp(1.4063rem, 1.2999rem + 0.4727vw, 1.6663rem);
  --step-2:  clamp(1.7578rem, 1.5683rem + 0.8424vw, 2.2211rem);
  --step-3:  clamp(2.1973rem, 1.8849rem + 1.3881vw, 2.9607rem);
  --step-4:  clamp(2.7466rem, 2.2556rem + 2.182vw,  3.9467rem);
  --step-5:  clamp(3.4332rem, 2.6855rem + 3.3231vw, 5.2609rem);

  /* — Fluid space scale —
     https://utopia.fyi/space/calculator */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw,      0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs:  clamp(0.875rem,  0.8494rem + 0.1136vw, 0.9375rem);
  --space-s:   clamp(1.125rem,  1.0739rem + 0.2273vw, 1.25rem);
  --space-m:   clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l:   clamp(2.25rem,   2.1477rem + 0.4545vw, 2.5rem);
  --space-xl:  clamp(3.375rem,  3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem,    4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem,   6.4432rem + 1.3636vw, 7.5rem);

  /* — Measure and rhythm — */
  --measure:      65ch;   /* upper bound on line length, WCAG 1.4.8 */
  --leading:      1.6;
  --leading-tight: 1.15;

  /* — Layout — */
  --wrapper-max: 75rem;
  --gutter:      var(--space-s);
  --radius:      0.25rem;

  /* — Motion —
     One duration, one easing. Both become 0.01ms under
     prefers-reduced-motion (section 10). */
  --duration: 180ms;
  --easing:   cubic-bezier(0.2, 0, 0, 1);
}


/* ─── 2. THEMES ──────────────────────────────────────────────────────── */

/* Every colour pairing the Panel can produce is defined here, and only
   here. The page builder's "Colour theme" select maps one-to-one to these
   classes, which is why editors cannot create an unreadable combination:
   there are no independent foreground and background pickers to get wrong.

   Contrast ratios below were measured against the palette above. If you
   change a raw value, re-measure — the comments are not self-updating. */

.theme-default {
  --surface:     var(--c-paper);
  --text:        var(--c-ink);        /* 14.6:1 */
  --text-muted:  var(--c-ink-soft);   /*  8.3:1 */
  --accent:      var(--c-accent);     /*  5.5:1 */
  --on-accent:   var(--c-paper);
  --border:      var(--c-line);
  --focus:       var(--c-accent);
}

.theme-inverted {
  --surface:     var(--c-ink);
  --text:        var(--c-paper);         /* 14.6:1 */
  --text-muted:  var(--c-mute-on-dark);  /*  7.3:1 */
  --accent:      var(--c-accent-light);  /*  9.2:1 */
  --on-accent:   var(--c-ink);
  --border:      #4b3335;
  --focus:       var(--c-accent-light);
}

.theme-accent {
  --surface:     var(--c-accent);
  --text:        var(--c-paper);        /* 5.5:1 */
  --text-muted:  var(--c-accent-soft);  /* 4.5:1 */
  --accent:      var(--c-paper);
  --on-accent:   var(--c-accent);
  --border:      #3f83e2;
  --focus:       var(--c-paper);
}

.theme-muted {
  --surface:     var(--c-paper-soft);
  --text:        var(--c-ink);       /* 13.3:1 */
  --text-muted:  var(--c-ink-soft);  /*  7.5:1 */
  --accent:      var(--c-accent);    /*  5.0:1 */
  --on-accent:   var(--c-paper);
  --border:      #e4d5d5;
  --focus:       var(--c-accent);
}

/* The document itself carries the default theme so that anything outside a
   themed section — the header, the footer, the 404 — still resolves. */
:root { color-scheme: light; }
body  { background-color: var(--surface); color: var(--text); }


/* ─── 3. RESET ───────────────────────────────────────────────────────── */

/* Minimal and targeted. A full reset (`* { margin: 0 }` plus a page of
   element rules) mostly undoes sensible defaults so they can be rewritten
   byte-for-byte lower down. */

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

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

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

/* Only where content is authored, so a table in a block behaves. */
table { border-collapse: collapse; }


/* ─── 4. BASE ────────────────────────────────────────────────────────── */

html {
  /* No font-size override here. Setting a px root size — or worse,
     changing it per breakpoint — overrides the browser font size a user
     has deliberately chosen, and fails WCAG 2.2 AA 1.4.4. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

/* Focus is never removed, only restyled. :focus-visible means a mouse
   click does not draw a ring, but every keyboard user always gets one.
   3px and an offset so it stays visible against any theme surface. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Anything the smooth-scroll or a skip link lands on. */
[tabindex="-1"]:focus { outline: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: var(--leading-tight);
  text-wrap: balance;
  font-weight: 600;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

/* Underlines stay on body links. Removing them leaves colour as the only
   signal, which fails WCAG 1.4.1 Use of Colour. Navigation and buttons
   are the exception: they read as controls from position and shape. */
a:hover { text-decoration-thickness: max(0.14em, 2px); }

/* Long URLs must not force the page to scroll sideways. */
a, p { overflow-wrap: break-word; }

blockquote { font-size: var(--step-1); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: var(--space-l);
}

::selection { background: var(--accent); color: var(--on-accent); }


/* ─── 5. UTILITIES ───────────────────────────────────────────────────── */

/* Visible to screen readers, invisible on screen. Used for headings that
   name a landmark and for link text that needs context out of context. */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* First focusable element on every page. Off-screen until focused, then
   pinned to the top-left. It must be visible on focus — a skip link that
   stays hidden is worse than none, because keyboard users cannot tell
   where focus has gone. */
.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-s)));
  transition: transform var(--duration) var(--easing);
}
.skip-link:focus { transform: translateY(0); }

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


/* ─── 6. LAYOUT ──────────────────────────────────────────────────────── */

/* Sections are emitted by snippets/layouts.php. Classes only — no inline
   colour — so a strict Content-Security-Policy remains possible. */

.section {
  background-color: var(--surface);
  color: var(--text);
}

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

.section--narrow .section__inner { max-width: 45rem; }
.section--full   .section__inner { max-width: none; padding-inline: 0; }

.section--center { text-align: center; }
.section--center .section__inner > * { margin-inline: auto; }

/* Spacing scale mirrors the Panel's None / S / M / L / XL toggles. */
.section--pt-none { padding-block-start: 0; }
.section--pt-sm   { padding-block-start: var(--space-s); }
.section--pt-md   { padding-block-start: var(--space-l); }
.section--pt-lg   { padding-block-start: var(--space-2xl); }
.section--pt-xl   { padding-block-start: var(--space-3xl); }

.section--pb-none { padding-block-end: 0; }
.section--pb-sm   { padding-block-end: var(--space-s); }
.section--pb-md   { padding-block-end: var(--space-l); }
.section--pb-lg   { padding-block-end: var(--space-2xl); }
.section--pb-xl   { padding-block-end: var(--space-3xl); }

/* Twelve-column grid. --span comes from Kirby's layout column width, so
   a 1/3 column is span 4. Columns stack in source order below the
   breakpoint, which keeps the visual order and the DOM order identical —
   WCAG 1.3.2 Meaningful Sequence. */
.section__grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 48em) {
  .section__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--space-l);
  }
  .section__col { grid-column: span var(--span, 12); }

  .section--valign-center .section__col { align-self: center; }
  .section--valign-end    .section__col { align-self: end; }
}

/* Vertical rhythm inside a column, set once rather than per block. */
.section__inner > * + *,
.section__col   > * + * { margin-block-start: var(--space-m); }

/* Text keeps a readable measure even in a full-width section. */
.section__col p,
.section__col li,
.section__inner > .block--text,
.section__inner > .block--list { max-width: var(--measure); }
.section--center .section__inner > .block--text { margin-inline: auto; }


/* ─── 7. HEADER AND NAVIGATION ───────────────────────────────────────── */

/* Mechanism is a native <details>. Below the breakpoint it is a
   disclosure menu; above it, JS sets `open` and this hides the summary,
   producing an ordinary horizontal bar. Without JS it stays a working
   disclosure at every width — which is why the toggle is styled as a
   real control, not an afterthought. */

.site-header {
  background: var(--c-paper);
  color: var(--c-ink);
  border-block-end: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
  flex-wrap: wrap;
}

.site-header__brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.site-header__brand img { width: auto; max-height: 2.5rem; }
.site-header__wordmark { font-size: var(--step-1); font-weight: 600; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  /* Minimum 44×44px target — WCAG 2.2 AA 2.5.8 Target Size. */
  min-height: 2.75rem;
  padding-inline: var(--space-2xs);
  cursor: pointer;
  list-style: none;          /* removes the default disclosure triangle */
  font-weight: 600;
}
.nav__toggle::-webkit-details-marker { display: none; }

/* A simple two-state icon. Rotates to an X when open. */
.nav__toggle-icon {
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--duration) var(--easing);
}
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--easing);
}
.nav__toggle-icon::before { top: -6px; }
.nav__toggle-icon::after  { top:  6px; }

.nav[open] .nav__toggle-icon { background: transparent; }
.nav[open] .nav__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.nav[open] .nav__toggle-icon::after  { transform: translateY(-6px) rotate(-45deg); }

.nav__panel { padding-block: var(--space-xs); }

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.nav__list a,
.subnav__toggle {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-2xs);
  text-decoration: none;
  border-radius: var(--radius);
}

.nav__list a:hover,
.subnav__toggle:hover { background: var(--c-paper-soft); }

/* Current page marked by more than colour: a weight change and a rule. */
.nav__list [aria-current="page"],
.nav__list [aria-current="true"] {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--c-accent);
}

.subnav__toggle { cursor: pointer; list-style: none; gap: var(--space-3xs); }
.subnav__toggle::-webkit-details-marker { display: none; }

.subnav__icon {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration) var(--easing);
}
.subnav[open] > .subnav__toggle .subnav__icon { transform: rotate(-135deg); }

.subnav__list {
  list-style: none;
  margin: 0;
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid var(--c-line);
}

.nav__cta { margin-block-start: var(--space-xs); }

@media (min-width: 48em) {
  /* JS has set `open`; the toggle is now redundant. It is removed from
     the layout entirely rather than hidden with visibility, so it cannot
     be reached by Tab while invisible. */
  .nav__toggle { display: none; }

  .nav__panel {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: 0;
  }

  .nav__list { flex-direction: row; align-items: center; gap: var(--space-2xs); }

  .nav__cta { margin-block-start: 0; }

  /* Submenus become overlays. They still open on click, never on hover
     alone: hover-only menus are unusable by keyboard and hostile on
     touch, and WCAG 1.4.13 requires hover content to be dismissible. */
  .subnav { position: relative; }
  .subnav__list {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 20;
    min-width: 14rem;
    padding: var(--space-2xs);
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
  }
}


/* ─── 8. FOOTER ──────────────────────────────────────────────────────── */

.site-footer {
  background: var(--c-ink);
  color: var(--c-paper);
  margin-block-start: var(--space-3xl);
  padding-block: var(--space-xl);
}

.site-footer a { color: var(--c-accent-light); }

.site-footer__inner {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48em) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}

.site-footer__title   { font-size: var(--step-1); font-weight: 600; }
.site-footer__tagline { color: var(--c-mute-on-dark); max-width: 40ch; margin-block-start: var(--space-2xs); }

.site-footer__heading { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; margin-block-end: var(--space-2xs); }

.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3xs); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid #33373b;
  font-size: var(--step--1);
  color: var(--c-mute-on-dark);
}

.site-footer__smallprint,
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.site-footer__impact { max-width: var(--measure); }


/* ─── 9. COMPONENTS AND BLOCKS ───────────────────────────────────────── */

/* — Button — */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;          /* WCAG 2.5.8 target size */
  padding: var(--space-2xs) var(--space-s);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.button--primary   { background: var(--accent); color: var(--on-accent); }
.button--secondary { background: transparent;   color: var(--text); }
.button--primary:hover   { background: transparent; color: var(--text); }
.button--secondary:hover { background: var(--accent); color: var(--on-accent); }

/* — Heading and text blocks — */
.block--lead { font-size: var(--step-1); color: var(--text-muted); }
.block--text > * + *,
.block--list > * + * { margin-block-start: var(--space-s); }
.block--list ul,
.block--list ol { padding-inline-start: 1.25em; }
.block--list li + li { margin-block-start: var(--space-3xs); }

/* — Quote — */
.block--quote blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--space-s);
  max-width: var(--measure);
}
.block--quote figcaption {
  margin-block-start: var(--space-xs);
  padding-inline-start: calc(var(--space-s) + 3px);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.block--quote__role::before { content: " — "; }

/* — Figure — */
.figure__caption {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: var(--measure);
}

/* — Gallery —
   auto-fit rather than a fixed count, so it reflows without a media
   query per column option. */
.block--gallery {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(100% / var(--columns, 3) - var(--space-s))), 1fr));
}

/* — Card —
   The link is a real, short link; ::after extends its clickable area over
   the whole card. This keeps one sensible accessible name instead of
   wrapping the entire card in an <a>. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card__image { border-radius: var(--radius); margin-block-end: var(--space-2xs); }
.card__heading { font-size: var(--step-1); }
.card__text { color: var(--text-muted); }
.card__action { margin-block-start: auto; }
.card__link::after { content: ""; position: absolute; inset: 0; }
/* Focus lands on the small link but must be visible around the card. */
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card__link:focus-visible { outline: none; }

/* — Hero — */
.hero { display: grid; gap: var(--space-m); }
.hero__headline { font-size: var(--step-5); }
.hero__standfirst { font-size: var(--step-1); color: var(--text-muted); max-width: 45ch; }
.hero__action { margin-block-start: var(--space-s); }

@media (min-width: 48em) {
  .hero--side { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero--side .hero__media { order: 2; }
}

/* Stacked is the base .hero grid — declared explicitly so the full set of
   variants is visible here rather than inferred from an absence. */
.hero--stacked { /* image above, body below — base .hero behaviour */ }

/* Banner is text only. The snippet drops the image even if one is set, so
   switching to it never loses content. Sized up because with no image the
   type carries the whole section. */
.hero--banner { text-align: center; justify-items: center; }
.hero--banner .hero__headline { font-size: var(--step-5); max-width: 20ch; }
.hero--banner .hero__standfirst { margin-inline: auto; }

.hero--overlay { position: relative; display: grid; }
.hero--overlay .hero__media,
.hero--overlay .hero__body { grid-area: 1 / 1; }
.hero--overlay .hero__body {
  align-self: end;
  padding: var(--space-l);
  color: var(--c-paper);
  /* A scrim, not a hope. Text over a photograph has no guaranteed
     contrast; this gives it one regardless of the image chosen. */
  background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.15) 60%, transparent);
}
.hero--overlay .hero__standfirst { color: var(--c-paper); }

/* — Video facade — */
.video { position: relative; display: grid; }
.video__poster { grid-area: 1 / 1; width: 100%; border-radius: var(--radius); }
.video__play {
  grid-area: 1 / 1;
  place-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-s);
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.video__play-icon {
  width: 0;
  height: 0;
  border-block: 0.4rem solid transparent;
  border-inline-start: 0.7rem solid currentColor;
}
.video__frame { grid-area: 1 / 1; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* — Divider — */
.block--space { height: var(--space-xl); }

/* — Pagination — */
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-l);
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
}
.pagination [aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
}


/* ─── 9b. LISTINGS, FILTERS AND ARTICLES ─────────────────────────────── */

/* — Filters —
   Links, not <select> menus. See site/snippets/filters.php for why. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  align-items: flex-start;
  padding-block: var(--space-m);
  border-block: 1px solid var(--border);
  margin-block-end: var(--space-l);
}

.filters__group { flex: 1 1 auto; }

.filters__label {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-block-end: var(--space-2xs);
}

.filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.filters__link {
  display: inline-flex;
  align-items: center;
  /* 44px minimum target — WCAG 2.2 AA 2.5.8. */
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: 2rem;
  text-decoration: none;
  font-size: var(--step--1);
}

.filters__link:hover { border-color: var(--accent); }

/* The active filter is marked by fill AND weight, never colour alone
   (WCAG 1.4.1 Use of Colour). */
.filters__link[aria-current] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
}

.filters__status {
  flex: 1 0 100%;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* — Listing grid — */
.list__intro {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: var(--measure);
  margin-block-start: var(--space-s);
}

.list__grid {
  display: grid;
  gap: var(--space-l) var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 48em) {
  .list__grid { grid-template-columns: repeat(var(--columns, 3), 1fr); }
}

.list__empty {
  padding-block: var(--space-xl);
  text-align: center;
  color: var(--text-muted);
}

/* — Article card —
   Borderless by default: a grid of boxes reads as heavier than a grid of
   images and headings, and the image already delimits each item. */
.card--article {
  border: 0;
  padding: 0;
  gap: var(--space-2xs);
  background: none;
}

.card--article .card__image {
  border-radius: var(--radius);
  margin-block-end: var(--space-2xs);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.card__category { font-weight: 600; color: var(--accent); }

.card--article .card__heading { font-size: var(--step-1); }
.card--article .card__heading a { text-decoration: none; }
.card--article .card__heading a:hover { text-decoration: underline; }

/* The featured card spans the grid and goes side-by-side when there is
   room for it. */
.card--featured { margin-block-end: var(--space-xl); }

@media (min-width: 48em) {
  .card--featured {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-l);
    align-items: center;
  }
  .card--featured .card__image { margin-block-end: 0; }
  .card--featured .card__heading { font-size: var(--step-2); }
}

/* — Article — */
.article__parent {
  font-size: var(--step--1);
  margin-block-end: var(--space-s);
}

.article__title { margin-block-end: var(--space-s); }

.article__standfirst {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: var(--measure);
}

.article__meta {
  margin-block-start: var(--space-s);
  font-size: var(--step--1);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.article__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; }

.article__tags-label {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.article__tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.article__tags a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: 2rem;
  text-decoration: none;
  font-size: var(--step--1);
}

.article__tags a:hover { border-color: var(--accent); }


/* ─── 9c. SECTIONS ───────────────────────────────────────────────────── */

/* The nine composed sections. Each is one block with a `variant` toggle,
   emitted as a modifier class — never a second block.

   Colour here comes only from the theme variables set by the enclosing
   .theme-* class, so every section is legible on all four themes without
   a single per-section colour decision. */

/* Shared intro header, used by features, stats, team and feed. */
.section-intro { margin-block-end: var(--space-l); max-width: var(--measure); }
.section-intro__title { font-size: var(--step-2); }
.section-intro__text {
  font-size: var(--step-1);
  color: var(--text-muted);
  margin-block-start: var(--space-2xs);
}
.section--center .section-intro { margin-inline: auto; }

/* Sections are placed by the layout's own spacing, so they never add
   outer margins of their own — that is set once in section 6. */
.block--features,
.block--stats,
.block--logos,
.block--testimonial,
.block--faq,
.block--cta,
.block--team,
.block--feed { display: block; }


/* — Features ——————————————————————————————————————————————————— */

.features__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-l); }

@media (min-width: 48em) {
  .features--grid .features__list { grid-template-columns: repeat(var(--columns, 3), 1fr); }
}

.features__item > * + * { margin-block-start: var(--space-2xs); }
.features__icon { width: 3rem; height: 3rem; object-fit: contain; }
.features__title { font-size: var(--step-1); }
.features__text { color: var(--text-muted); max-width: var(--measure); }

.features__number {
  font-size: var(--step-3);
  line-height: 1;
  font-weight: 700;
  color: var(--accent);
}

/* List and numbered put the marker beside the text rather than above. */
@media (min-width: 48em) {
  .features--list .features__item,
  .features--numbered .features__item {
    display: grid;
    grid-template-columns: 4rem 1fr;
    column-gap: var(--space-m);
    align-items: start;
  }
  .features--list .features__item > *,
  .features--numbered .features__item > * { grid-column: 2; margin-block-start: var(--space-2xs); }
  .features--list .features__icon,
  .features--numbered .features__number { grid-column: 1; grid-row: 1 / span 4; margin-block-start: 0; }
}

.features--list .features__item + .features__item,
.features--numbered .features__item + .features__item {
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--border);
}


/* — Stats ——————————————————————————————————————————————————————— */

.stats__list { display: grid; gap: var(--space-l); margin: 0; }
.stats__item { display: flex; flex-direction: column; gap: var(--space-3xs); }

.stats__number {
  font-size: var(--step-4);
  line-height: 1;
  font-weight: 700;
  /* Tabular figures stop the numbers jittering when they differ in width. */
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.stats__label { margin: 0; font-weight: 600; }
.stats__note { display: block; font-size: var(--step--1); font-weight: 400; color: var(--text-muted); }

@media (min-width: 48em) {
  .stats--strip .stats__list,
  .stats--ribbon .stats__list { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .stats--grid .stats__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* Ribbon is the full-bleed treatment: it breaks out of the section's
   inner width and paints the accent across the viewport. */
.stats--ribbon {
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-l) var(--gutter);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--wrapper-max) / 2));
}
.stats--ribbon .stats__number { color: var(--on-accent); }
.stats--ribbon .stats__note { color: inherit; opacity: 0.85; }

.stats--grid .stats__item {
  padding: var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}


/* — Logos ——————————————————————————————————————————————————————— */

.logos__title {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-block-end: var(--space-m);
  text-align: center;
}

.logos__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-l) var(--space-xl);
}

/* Row is the base wrapping flex list. Declared for completeness. */
.logos--row { /* base */ }

.logos--grid .logos__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-l);
}

.logos__image {
  max-height: 3rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  /* Desaturated so a wall of brand colours does not fight the page.
     Full colour returns on hover and — importantly — in forced-colours
     mode, where filters are ignored anyway. */
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--duration) var(--easing), opacity var(--duration) var(--easing);
}
.logos__item:hover .logos__image { filter: none; opacity: 1; }


/* — Testimonial ————————————————————————————————————————————————— */

.testimonials { display: grid; gap: var(--space-xl); }

@media (min-width: 48em) {
  .testimonials--pair { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}

.testimonial { margin: 0; display: grid; gap: var(--space-s); }

.testimonial__quote {
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  text-wrap: pretty;
  max-width: 30ch;
  margin: 0;
}
.testimonial__quote::before { content: "\201C"; }
.testimonial__quote::after  { content: "\201D"; }

.testimonial__portrait { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.testimonial__source { font-size: var(--step--1); color: var(--text-muted); }
.testimonial__name { font-weight: 600; color: var(--text); }
.testimonial__role::before { content: " — "; }

.testimonials--single .testimonial { text-align: center; justify-items: center; }
.testimonials--single .testimonial__quote { max-width: 40ch; }

@media (min-width: 48em) {
  .testimonials--portrait .testimonial {
    grid-template-columns: 5rem 1fr;
    column-gap: var(--space-l);
    align-items: center;
  }
  .testimonials--portrait .testimonial__portrait { grid-row: 1 / span 2; }
}


/* — FAQ ————————————————————————————————————————————————————————— */

.faq__title { font-size: var(--step-2); margin-block-end: var(--space-l); }
.faq__list { display: grid; gap: 0; }

/* List is the base single-column .faq__list. Declared for completeness. */
.faq--list { /* base */ }

@media (min-width: 48em) {
  .faq--columns .faq__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
}

.faq__item { border-block-end: 1px solid var(--border); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  /* 44px minimum target — WCAG 2.5.8. */
  min-height: 2.75rem;
  padding-block: var(--space-s);
  font-size: var(--step-1);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }

/* A +/− drawn from borders: no icon font, no SVG, no extra request. */
.faq__question::after {
  content: "";
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-25%, -25%);
  transition: transform var(--duration) var(--easing);
}
.faq__item[open] > .faq__question::after { transform: rotate(-135deg) translate(-25%, -25%); }

.faq__answer { padding-block-end: var(--space-m); max-width: var(--measure); color: var(--text-muted); }
.faq__answer > * + * { margin-block-start: var(--space-s); }


/* — Call to action —————————————————————————————————————————————— */

.cta { display: grid; gap: var(--space-m); }
.cta__title { font-size: var(--step-3); }
.cta__text { font-size: var(--step-1); color: var(--text-muted); max-width: var(--measure); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.cta--centred { text-align: center; justify-items: center; }
.cta--centred .cta__text { margin-inline: auto; }

@media (min-width: 48em) {
  .cta--split {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-xl);
  }
}

.cta--boxed {
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}


/* — Team ———————————————————————————————————————————————————————— */

.team__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-l); }

@media (min-width: 48em) {
  .team--grid .team__list { grid-template-columns: repeat(var(--columns, 3), 1fr); }
  .team--compact .team__list { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .team--list .team__member {
    display: grid;
    grid-template-columns: 8rem 1fr;
    column-gap: var(--space-l);
    align-items: start;
  }
  .team--list .team__member > * { grid-column: 2; }
  .team--list .team__portrait { grid-column: 1; grid-row: 1 / span 4; }
}

.team__member > * + * { margin-block-start: var(--space-2xs); }
.team__portrait { border-radius: var(--radius); width: 100%; }
.team--compact .team__member { padding-block-end: var(--space-s); border-block-end: 1px solid var(--border); }
.team__name { font-size: var(--step-1); }
.team__role { color: var(--text-muted); }

.team__bio > summary {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: var(--step--1);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.team__bio > div { margin-block-start: var(--space-2xs); color: var(--text-muted); max-width: var(--measure); }


/* — Feed ———————————————————————————————————————————————————————— */

.feed__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-l) var(--space-m); }

@media (min-width: 48em) {
  .feed--grid .feed__list { grid-template-columns: repeat(var(--columns, 3), 1fr); }
}

.feed--list .feed__list { gap: var(--space-m); }
.feed--list .card--article { border-block-end: 1px solid var(--border); padding-block-end: var(--space-m); }

@media (min-width: 48em) {
  .feed--list .card--article {
    display: grid;
    grid-template-columns: 12rem 1fr;
    column-gap: var(--space-l);
    align-items: start;
  }
  .feed--list .card__image { margin-block-end: 0; }
}

.feed__more { margin-block-start: var(--space-l); }


/* ─── 10. USER PREFERENCES ───────────────────────────────────────────── */

/* Respect a stated preference for less motion. Not disabled entirely —
   animations are reduced to near-instant so state changes still read as
   changes, which is the recommendation rather than removing them. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows High Contrast / forced-colours mode. Custom-property colours
   are discarded there; these make sure focus and borders survive. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
  .button { border: 2px solid ButtonText; }
  .nav__list [aria-current="page"] { box-shadow: inset 0 -2px 0 CanvasText; }
}

@media print {
  .site-header, .site-footer, .skip-link, .pagination { display: none; }
  body { background: #fff; color: #000; }
  /* Print the destination of links, which are otherwise lost on paper. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* ─── 11. FONTS ──────────────────────────────────────────────────────── */

/* Declared last so nothing above waits on them to parse.
   Uncomment once real files are in assets/fonts/.

   font-display: swap — text renders immediately in the fallback and is
   swapped when the webfont arrives. `block` hides text for up to 3s
   (invisible content on a slow connection); `fallback` gives up too
   early to be worth the inconsistency. Pick swap and stay with it.

   Subset before shipping — see assets/fonts/README.md. A full Latin-Extended
   face is often 3-4x the size of the subset a site actually uses. */

/* Geist and GT Alpina Condensed are NOT declared here. They are uploaded
   on the Panel's Theme tab, and site/plugins/theme emits their @font-face
   rules inline in <head> — declaring them twice would mean two sources for
   one family and a second set of URLs to keep in step.

   Pixelify Sans is the exception. It sets one word — "bite-size" in the
   wordmark and in headlines — and is part of the logotype rather than a
   typographic choice an editor should be able to change, so it lives with
   the code. */

@font-face {
  font-family: 'Pixelify Sans';
  src: url('../fonts/PixelifySans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}




/* ═══════════════════════════════════════════════════════════════════════
   12. PROJECT — bite-size hr

   Everything above is the starter. Everything below is this site: the
   five sections of the homepage, the mosaic, and the handful of places
   where the brand overrules a starter default.

   The homepage is a fixed template, not a page builder — site/templates/
   home.php. Each rule here maps to one part of that file.
   ═══════════════════════════════════════════════════════════════════════ */


/* — Typography ————————————————————————————————————————————————— */

/* GT Alpina Condensed is drawn tight and ships at one weight. The
   starter's 600 would ask the browser to synthesise a bold the face does
   not have, which smears it. */
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.02em; }

h1 { font-size: var(--step-5); letter-spacing: -0.035em; line-height: 1; }
h2 { letter-spacing: -0.03em; max-width: 20ch; }
h3 { letter-spacing: -0.01em; }

/* The wordmark face. Emitted by the (brand: …) KirbyTag — see
   site/plugins/brand — and by the site header. */
.logofont { font-family: var(--font-logo); letter-spacing: -0.02em; }

/* The second half of a two-part headline, in brand blue. Large text only,
   which is why the raw #1177fc is fine here: WCAG asks 3:1 of it and it
   gives 3.5:1 on both the pink and the white surfaces it appears on. */
.headline-accent { color: var(--c-brand-blue); }


/* — Header ————————————————————————————————————————————————————— */

/* Sticky, as in the design. The height follows the content rather than
   being fixed, so a larger browser font size does not clip it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-paper-soft);
  border-block-end: 0;
}

.site-header__wordmark {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}


/* — Buttons ———————————————————————————————————————————————————— */

/* The design's primary button is ink with white text, going blue on
   hover — not the accent fill the starter defaults to. */
.button {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--step--1);
  border-radius: 0.5rem;
}

.button--primary {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}
.button--primary:hover {
  background: var(--c-brand-blue);
  border-color: var(--c-brand-blue);
  color: var(--c-brand-white);
}

/* On the blue contact band an ink button disappears into the surface. */
.theme-accent .button--primary {
  background: var(--c-paper);
  border-color: var(--c-paper);
  color: var(--c-ink);
}
.theme-accent .button--primary:hover {
  background: var(--c-brand-yellow);
  border-color: var(--c-brand-yellow);
  color: var(--c-ink);
}


/* — Mosaic ————————————————————————————————————————————————————— */

/* The brand's signature: a grid of flat coloured squares. Drawn in CSS
   rather than shipped as the SVG it was in the mockup — one fewer request,
   and it recolours from the tokens above instead of freezing four hex
   values inside a file. The snippet marks it aria-hidden. */
.mosaic {
  --cell: clamp(2.5rem, 7.5vw, 6.5rem);
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  grid-auto-rows: var(--cell);
  justify-content: end;
}

.mosaic__cell--blue   { background: var(--c-brand-blue); }
.mosaic__cell--yellow { background: var(--c-brand-yellow); }
.mosaic__cell--coral  { background: var(--c-brand-coral); }
.mosaic__cell--ink    { background: var(--c-ink); }

/* Rotating a grid item does not move its neighbours, so the one tilted
   square in the hero sits over the gap without disturbing the pattern. */
.mosaic__cell--tilted { transform: rotate(23.24deg); }


/* — Hero ——————————————————————————————————————————————————————— */

.hero {
  background: var(--c-paper-soft);
  color: var(--c-ink);
  padding-block: var(--space-3xl) var(--space-2xl);
}

.hero__inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--space-l);
}

.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.hero__description { max-width: 50ch; }

@media (min-width: 70em) {
  .hero__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}


/* — Why ———————————————————————————————————————————————————————— */

/* Two columns on wide screens, stacked below. Both halves are content, so
   they stack in source order and read the same way either way. */
.two-columns {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-2xl);
}

@media (min-width: 48em) {
  .two-columns { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
}

.why__text { font-size: var(--step-1); max-width: var(--measure); }
.why__text > * + * { margin-block-start: var(--space-s); }


/* — Services ——————————————————————————————————————————————————— */

/* Three cards, stepped down the page on wide screens. The step is
   decoration and only applies where there is room; below the breakpoint
   they simply stack. */
.services { padding-block: var(--space-2xl); }

.services__list {
  display: grid;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 60em) {
  .services__list { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .services__item:nth-child(2) { margin-block-start: var(--space-2xl); }
  .services__item:nth-child(3) { margin-block-start: calc(var(--space-2xl) * 2); }
}

.services__item {
  position: relative;
  padding: var(--space-l);
  padding-inline-end: calc(var(--space-l) + 3rem);
  background: var(--c-paper-soft);
  color: var(--c-ink);
  font-size: var(--step--1);
}

.services__title { font-size: var(--step-2); margin-block-end: var(--space-s); }
.services__text > * + * { margin-block-start: var(--space-2xs); }
.services__points-label { margin-block-start: var(--space-s); font-weight: 700; }
.services__points ul { padding-inline-start: 1.2em; margin-block-start: var(--space-2xs); }
.services__points li + li { margin-block-start: var(--space-3xs); }

/* The colour strip down the right-hand edge, with a few contrasting
   squares at the top of it. */
.services__strip {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 2.25rem;
  display: grid;
  grid-auto-rows: 2.25rem;
  align-content: start;
  background: var(--strip, var(--c-brand-brown));
}

.services__item--brown  { --strip: var(--c-brand-brown); }
.services__item--yellow { --strip: var(--c-brand-yellow); }
.services__item--coral  { --strip: var(--c-brand-coral); }

.services__square:nth-child(4n + 1) { background: var(--c-brand-blue); }
.services__square:nth-child(4n + 2) { background: var(--c-brand-coral); }
.services__square:nth-child(4n + 3) { background: var(--c-brand-yellow); }
.services__square:nth-child(4n + 4) { background: var(--c-brand-brown); }


/* — Reasons ———————————————————————————————————————————————————— */

/* Square, flat-coloured tiles with the heading occupying the first cell —
   three across, so five tiles and the heading make two full rows exactly
   as in the design. No gap: the colours meet edge to edge.

   The columns step down rather than auto-fitting. auto-fit would put five
   tiles in a row on a wide screen and strand the heading on its own line,
   which is the one arrangement the design never makes. */
.reasons { padding-block: var(--space-2xl); }

.reasons__grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .reasons__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .reasons__grid { grid-template-columns: repeat(3, 1fr); }
}

/* No background: the heading cell is the hole in the pattern. It takes
   its height from the tiles beside it rather than setting its own. */
.reasons__title {
  padding: var(--space-m);
  padding-inline-start: 0;
  font-size: var(--step-3);
  align-self: start;
}

@media (min-width: 40em) {
  .reasons__title { padding-inline-start: var(--space-m); }
}

.reasons__item {
  display: flex;
  align-items: flex-start;
  padding: var(--space-m);
  aspect-ratio: 1 / 1;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* Colours cycle over four tiles, in the order the design uses them.
   nth-of-type, not nth-child: the h2 is the grid's first child and would
   otherwise take the blue and push every tile one colour along.

   Cycling is right here — a tile carries no meaning beyond its sentence,
   so which colour it lands on genuinely does not matter. That is the
   opposite of the service strips, where the colour is the editor's. */
.reasons__item:nth-of-type(4n + 1) { background: var(--c-brand-blue);   color: var(--c-brand-white); }
.reasons__item:nth-of-type(4n + 2) { background: var(--c-brand-coral);  color: var(--c-ink); }
.reasons__item:nth-of-type(4n + 3) { background: var(--c-brand-yellow); color: var(--c-ink); }
.reasons__item:nth-of-type(4n + 4) { background: var(--c-ink);          color: var(--c-paper); }


/* — About —————————————————————————————————————————————————————— */

.about { padding-block: var(--space-2xl); align-items: end; }
.about__text { max-width: 50ch; }
.about__text > * + * { margin-block-start: var(--space-s); }
.about__portrait { width: 100%; }


/* — Contact ———————————————————————————————————————————————————— */

.contact {
  background: var(--c-accent);
  color: var(--c-paper);
  padding-block: var(--space-3xl) var(--space-l);
}

.contact__inner { display: grid; gap: var(--space-xl); align-items: center; }

@media (min-width: 60em) {
  .contact__inner { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
}

.contact__title { font-size: var(--step-4); max-width: 18ch; }
.contact__text { margin-block-start: var(--space-s); max-width: 45ch; }

/* — Booking —
   A facade over the Calendly embed, on the same reasoning as the starter's
   video block: the widget is a few hundred KB of third-party JavaScript,
   and embedding it directly makes every visitor download it so the few who
   book can use it. Nothing here needs JavaScript — without it the button
   is an ordinary link to the same booking page. */
.booking {
  padding: var(--space-l);
  background: var(--c-brand-white);
  color: var(--c-ink);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-s);
  justify-items: start;
}

.booking__note { font-size: var(--step--1); color: var(--c-ink-soft); }
.booking__widget { min-width: 20rem; min-height: 40rem; width: 100%; }
.booking--loaded { padding: 0; }


/* — Footer ————————————————————————————————————————————————————— */

/* The mockup's footer is a thin line of small print under the contact
   band, not the starter's three-column block. */
.site-footer {
  margin-block-start: 0;
  background: var(--c-accent);
  color: var(--c-paper);
  padding-block: var(--space-l);
  font-size: var(--step--2);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  justify-content: space-between;
  align-items: center;
}

.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-s); list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--c-paper); }


/* — Prose ————————————————————————————————————————————————————— */

/* Text pages: the privacy policy and anything else that is just words. */
.prose {
  max-width: var(--measure);
  padding-block: var(--space-2xl);
}

.prose > * + * { margin-block-start: var(--space-s); }
.prose h2 { margin-block-start: var(--space-xl); }
.prose ul, .prose ol { padding-inline-start: 1.2em; }