/* Fluid type and space tokens
   Generated using the Utopia formula (https://utopia.fyi)
   Viewport 320px to 1240px
   Type: 18px @ 1.2 to 20px @ 1.25
   Space: base 18px to 20px
   To change: regenerate at utopia.fyi and replace this block. */
:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);

  --space-3xs: clamp(0.2813rem, 0.2704rem + 0.0543vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.8438rem, 0.8111rem + 0.163vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.2813rem, 0.1617rem + 0.5978vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.8438rem, 0.7024rem + 0.7065vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

  /* Custom pair */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
}

/* Brand tokens: edit this file per client.
   Colours, fonts and widths live here, separate from the generated
   Utopia scale in tokens.css, so starter updates merge cleanly.
   Contrast checked against WCAG 2.2 AA (text 4.5:1, UI 3:1).

   Colours converted from the original design's OKLCH values. The red is
   outside the sRGB range, so the hex below is its nearest sRGB value.
   Do not lighten it: it only just passes AA for text (4.7:1). */
:root {
  --colour-text: #070707;          /* oklch(13% 0 0). On bg: 19.6:1 */
  --colour-text-muted: #4d4d4d;    /* oklch(42% 0 0). On bg: 8.2:1 */
  --colour-bg: #fcfcfc;            /* oklch(99% 0 0) */
  --colour-surface: #eeeeee;       /* oklch(95% 0 0), muted band */
  --colour-card: #ffffff;
  --colour-accent: #CE2029;        /* oklch(58% .24 27). On bg: 4.7:1 */
  --colour-accent-text: #fcfcfc;   /* On accent: 4.7:1 */
  --colour-dark: #070707;          /* dark bands and featured card */
  --colour-dark-text: #fcfcfc;     /* On dark: 19.6:1 */
  --colour-border: #070707;        /* Borders and form fields: 19.6:1 */

  --font-display: "Excon", "Arial Black", "Helvetica Neue", sans-serif;     /* h1 to h3 */
  --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;                     /* labels, buttons, numerals */
  --font-accent: "Moon Get", "Excon", "Arial Black", sans-serif;                /* logo, accent phrase */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-display);

  --max-width: 72rem;
  --prose-width: 65ch;
  --radius: 0;                     /* square corners */

  /* Display sizes, scaled fluidly with the Utopia formula (320px to 1240px) */
  --text-hero: clamp(2.0833rem, 1.1384rem + 4.7246vw, 4.8rem);                /* 40px to 96px */
  --text-page-title: clamp(2.5rem, 1.8043rem + 3.4783vw, 4.5rem);       /* 40px to 72px */
  --text-section-title: clamp(1.875rem, 1.6924rem + 0.913vw, 2.4rem);     /* 36px to 48px */
  --text-band-title: clamp(1.875rem, 1.7446rem + 0.6522vw, 2.25rem);    /* 30px to 36px */
  --text-price: 4.5rem;
}

/* Reset and element defaults */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--colour-text);
  background: var(--colour-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p, ul, ol { margin: 0; }
p { text-wrap: pretty; font-size: var(--step--1) }

a { color: var(--colour-accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.15em; }

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

/* Accessibility helpers */
:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-s);
  inset-block-start: -100%;
  padding: var(--space-xs) var(--space-s);
  background: var(--colour-text);
  color: var(--colour-bg);
  z-index: 100;
}
.skip-link:focus { inset-block-start: var(--space-s); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@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;
  }
}

/* Layout primitives: reuse these everywhere */

/* Centred, padded content column */
.container {
  width: min(100% - var(--space-m) * 2, var(--max-width));
  margin-inline: auto;
}

/* Vertical padding for page sections */
.section { padding-block: var(--space-xl-2xl); }
.section--surface { background: var(--colour-surface); }

/* Vertical rhythm between direct children. Override with --flow-space. */
.flow > * + * { margin-block-start: var(--flow-space, var(--space-s-m)); }

/* Limit line length for readable text */
.prose { max-width: var(--prose-width); }

/* Responsive grid, no breakpoints needed. Override with --grid-min. */
.grid {
  display: grid;
  gap: var(--space-m-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

/* Wrapping row (buttons, nav links) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-s);
  align-items: center;
}

/* Two columns that stack when narrow */
.split {
  display: grid;
  gap: var(--space-l-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
}
.split--reverse > :first-child { order: 2; }

/* A grid used as a list: remove default bullets and indentation.
   Do not set margin here: it would override .flow spacing (higher specificity). */
ul.grid { padding: 0; list-style: none; }

/* Components */

/* Header and navigation */
.site-header { padding-block: var(--space-s); border-block-end: 1px solid var(--colour-border); }
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  align-items: center;
  justify-content: space-between;
}
.site-logo { font-weight: 700; font-size: var(--step-1); color: var(--colour-text); text-decoration: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); list-style: none; padding: 0; }
.site-nav a { padding-block: var(--space-3xs); color: var(--colour-text); }
.site-nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 0.15em; }

/* Footer */
.site-footer { padding-block: var(--space-l); background: var(--colour-surface); font-size: var(--step--2); }

/* Buttons: use on <a> for links, <button> for actions */
.btn {
  display: inline-block;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-m);
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--colour-accent-text);
  background: var(--colour-accent);
  border: 2px solid var(--colour-accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--colour-accent); }
.btn--outline { background: transparent; color: var(--colour-accent); }
.btn--outline:hover { background: var(--colour-accent); color: var(--colour-accent-text); }

/* Hero */
.hero h1 { max-width: 20ch; }
.hero__text { font-size: var(--step-1); max-width: 40ch; }
.hero--compact { padding-block: var(--space-l-xl); }
.hero--compact h1 { font-size: var(--step-4); }

/* Cards */
.card {
  padding: var(--space-m);
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
}
.card h3 { margin-block-end: var(--space-2xs); }

/* Call to action band */
.cta { text-align: center; background: var(--colour-accent); color: var(--colour-accent-text); }
.cta .btn { background: var(--colour-accent-text); color: var(--colour-accent); border-color: var(--colour-accent-text); }
.cta .btn:hover { background: transparent; color: var(--colour-accent-text); }
.cta :focus-visible { outline-color: var(--colour-accent-text); }

/* Forms */
.form { display: grid; gap: var(--space-s-m); max-width: var(--prose-width); }
.form label { display: block; font-weight: 700; margin-block-end: var(--space-3xs); }
.form input, .form textarea {
  width: 100%;
  padding: var(--space-xs);
  font: inherit;
  color: var(--colour-text);
  background: var(--colour-bg);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius);
}
.form textarea { min-height: 10rem; }
.form__hint { font-size: var(--step--1); color: var(--colour-text-muted); }

@media (forced-colors: active) {
  .btn, .card { border: 2px solid ButtonText; }
}

iframe#nl-badge-frame {
    display: none;
}

/* Client-specific styles and overrides.
   Add per-client CSS here, not in the starter's other files.
   This file loads last, so these rules take precedence. */

/* Fonts (self-hosted, Latin subset) ------------------------------------ */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/HankenGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/HankenGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/HankenGrotesk-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); 
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); 
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Moon Get";
  src: url("/fonts/moon_get-Heavy.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Excon';
  src: url('/fonts/Excon-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* Page frame ------------------------------------------------------------ */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }

h1 {
  text-transform: uppercase;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.label {
  font-family: var(--font-condensed);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-accent-text);
  background: var(--colour-accent);
  border: 2px solid var(--colour-accent);
  border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn:hover {
  color: var(--colour-accent-text);
  background: var(--colour-accent);
  box-shadow: 4px 4px 0 var(--colour-text);
  transform: translateY(-2px);
}
.btn--outline { color: var(--colour-text); background: transparent; border-color: var(--colour-text); }
.btn--outline:hover { color: var(--colour-bg); background: var(--colour-text); box-shadow: none; transform: none; }
.btn--small { padding: 0.375rem 1rem; }

/* Header and footer ------------------------------------------------------ */
.site-header { border-block-end: 2px solid var(--colour-border); }
.site-logo {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.logo__dot { color: var(--colour-accent); }
.site-nav ul { align-items: center; column-gap: 1.75rem; }
.site-nav a:not(.btn) {
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}
.site-nav a:not(.btn):hover { color: var(--colour-accent); }
.site-nav a.btn { padding: 0.375rem 1rem; color: var(--colour-accent-text); }
.site-nav a.btn:hover { color: var(--colour-accent-text); }
.site-nav a[aria-current="page"]:not(.btn) {
  font-weight: 500;
  color: var(--colour-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.site-footer {
  background: none;
  border-block-start: 2px solid var(--colour-border);
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.site-footer p {
    font-size: var(--step--2);
}
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 1rem; }

/* Hero ------------------------------------------------------------------- */
.hero-block { padding-block: var(--space-2xl-3xl); }
.eyebrow { font-size: 1.25rem; color: var(--colour-text-muted); }
.display { font-size: var(--text-hero); line-height: 1.1; letter-spacing: 0.5px; max-width: 50rem; --flow-space: var(--space-m); font-family: var(--font-accent); }
@media screen and (max-width: 48rem) {
  .display {
    font-size: var(--step-3);
  }
}
.hero__accent {
  font-family: var(--font-accent);
  font-weight: 800;
  color: var(--colour-accent);
}
.lede { font-size: var(--step-0); max-width: 38rem; color: var(--colour-text-muted); --flow-space: var(--space-l); }
.hero__actions { --flow-space: var(--space-xl); gap: 1rem; }

/* Bands (dark statement, call to action, muted strip) ----------------------- */
.band--dark { background: var(--colour-dark); color: var(--colour-dark-text); }
section.band.band--dark .btn:hover {
    box-shadow: 4px 4px 0 var(--colour-surface);
}
.band--muted { padding-block: var(--space-xl); background: var(--colour-surface); border-block: 1px solid var(--colour-border); }
.band h2 { font-size: var(--text-section-title); max-width: 36rem; }
.band--muted h2 { font-size: var(--text-band-title); }
.band__text {opacity: 0.8;}
.band__text:has(a.btn) { max-width: 32rem;}
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: var(--space-m); }
.band__inner:has(a.btn) {justify-content: space-between; text-align: left; }
.band__inner .flow { justify-content: center; max-width: 36rem;}
.band__inner:has(a.btn) .flow { justify-content: flex-start; max-width: auto;}
.split--top { align-items: start; }
@media screen and (max-width: 48rem) {
  .band__inner {
    text-align: left;
  }
}

/* Numbered columns -------------------------------------------------------- */
.numbered { border-block-start: 1px solid var(--colour-border); }
section.numbered.numbered--muted {
    border-block-start: none;
    border-block-end: 1px solid var(--colour-border);
}
section.numbered.numbered--muted:not(.numbered--divided) .numbered__list {
    margin-block-start: 0;
    margin-block-end: 0;
}
.numbered__heading { font-size: var(--text-section-title); max-width: 42rem; }
.numbered__list { list-style: none; padding: 0; }
.numbered:not(.numbered--divided) .numbered__list { margin-block-start: var(--space-xl); margin-block-end: var(--space-s); }
.numbered__item { --flow-space: var(--space-xs); }
.numeral {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  color: var(--colour-accent);
}
.numbered__title { font-size: var(--step-1); }
.numbered__item p { color: var(--colour-text-muted); }
.numbered--divided { padding-block: 0; }
.numbered--divided .numbered__list { display: grid; }
.numbered--divided .numbered__item { padding-block: var(--space-l-xl); border-block-end: 1px solid var(--colour-border); }
.numbered--divided .numbered__title { font-size: var(--step-2); }
@media (min-width: 48rem) {
  .numbered--divided .numbered__list { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .numbered--divided .numbered__item { padding-inline: 2rem; border-block-end: 0; border-inline-end: 1px solid var(--colour-border); }
  .numbered--divided .numbered__item:first-child { padding-inline-start: 0; }
  .numbered--divided .numbered__item:last-child { border-inline-end: 0; }
}

/* Split list (heading beside a ruled list) ------------------------------------ */
.rule-section { border-block-start: 1px solid var(--colour-border); }
.rule-section h2 { font-size: var(--text-section-title); max-width: 28rem; }
.rule-list { list-style: none; padding: 0; }
.rule-list > li + li { margin-block-start: var(--space-xl); }
.rule-list__item { padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--colour-border); }
.rule-list__item h3 { margin-block-end: 0.5rem; font-size: var(--step-1); }
.rule-list__item p { color: var(--colour-text-muted); }

/* Page header (h1 and intro on inner pages) ----------------------------------- */
.page-header { padding-block-end: 0; }
.page-header h1 { font-size: var(--text-page-title); line-height: 0.95; }
.page-header p { max-width: 32rem; color: var(--colour-text-muted); --flow-space: 1rem; }
.page-header + .section { padding-block-start: var(--space-xl); }
.page-header.page-header__center .container { display: flex; flex-flow: column; text-align: center; align-items: center; }

/* Work list ---------------------------------------------------------------------- */
.work-list { list-style: none; padding: 0; }
.work-item { display: grid; gap: 4rem; grid-template-columns: 1fr; align-items: start; padding-block: 4rem; }
li.work-item img { border: 1px solid var(--colour-border); }
.work-item h2 { font-size: var(--step-2);  }
.work-item p { color: var(--colour-text-muted); }
.work-item a.btn {
    align-self: flex-start;
    margin-block-start: 2rem;
}
.work-item p.tags {
    font-family: var(--font-condensed);
    text-transform: uppercase;
}
/* .work-item .work-item__meta { font-size: 1.125rem; color: var(--colour-text); } */
.work-item--details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: center;
}
@media (min-width: 48rem) {
  /* Columns are shared by every row (subgrid) so they line up down the page */
  .work-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .work-item { grid-column: 1 / -1; grid-template-columns: subgrid;  }
  li.work-item:nth-child(even) img {order: 2;}
}
.work-cta { --flow-space: var(--space-2xl); }

/* Pricing --------------------------------------------------------------------------- */
.plan { padding: 2rem; background: var(--colour-card); border: 1px solid var(--colour-border); border-radius: var(--radius); }
.plan--featured { color: var(--colour-dark-text); background: var(--colour-dark); }
.plan__name { font-size: var(--step-1); }
.plan__price {
  margin-block-start: 1rem;
  font-family: var(--font-condensed);
  font-size: var(--text-price);
  font-weight: 600;
  line-height: 1;
}
.plan__price span.plan__from {
    font-size: var(--step-0);
    margin-right: 0.4rem;
}
.plan__desc { margin-block-start: 0.75rem; opacity: 0.8; }
.plan__features { margin-block-start: 1.5rem; padding: 0; list-style: none; font-size: var(--step--1); }
.plan__features li + li { margin-block-start: 0.5rem; }
.plan__features li::before { content: "— "; content: "— " / ""; }

/* Contact ------------------------------------------------------------------------------ */
.contact h2 { font-size: var(--text-section-title); }
.contact__intro { max-width: 24rem; color: var(--colour-text-muted); --flow-space: 1rem; }
.form label {
  margin-block-end: 0.25rem;
  font-family: var(--font-condensed);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  color: var(--colour-text);
  background: var(--colour-card);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--colour-accent); }
.form__hint--warning {
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--colour-accent);
  color: var(--colour-text);
}
/* Image rows (numbered text beside a portfolio image) ----------------------------- */
.image-rows { border-block-start: 1px solid var(--colour-border); }
.image-rows__list { list-style: none; padding: 0; }
.image-row { padding-block: var(--space-l-xl); }
.image-row + .image-row { border-block-start: 1px solid var(--colour-border); }
.image-row__text { --flow-space: var(--space-xs); max-width: 32rem; }
.image-row__title { font-size: var(--step-2); }
.image-row__text p { color: var(--colour-text-muted); }
.image-row__media { width: 100%; height: auto; border: 1px solid var(--colour-border); }
/* Swap sides only when the columns sit side by side. When stacked, text stays first. */
@media (min-width: 48rem) {
  .image-row--reverse .image-row__media { order: -1; }
}

/* Form: first and last name side by side when there is room */
.form__row { display: grid; gap: var(--space-s-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }


/* Testimonials ------------------------------------------------------------------------ */
.testimonials { border-block-start: 1px solid var(--colour-border); }
.testimonials__heading { font-size: 1.25rem; color: var(--colour-text-muted); }
.testimonials__list { --grid-min: 20rem; }
.quote, .quote blockquote { margin: 0; }
.quote blockquote::before {
  content: "“"; content: "“" / "";   /* decorative mark, hidden from screen readers */
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.8;
  color: var(--colour-accent);
}
.quote p { font-size: var(--step-0); line-height: 1.3; text-wrap: balance; }
.quote figcaption {
  margin-block-start: var(--space-s);
  font-family: var(--font-condensed);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.quote figcaption span { display: block; font-weight: 500; color: var(--colour-text-muted); font-size: var(--step--2);}