/* Silk CSS — hand-written, zero build step */

@layer reset, tokens, base, components, utilities;

/* ============================================================
   RESET — Tailwind Preflight v4 equivalent
   ============================================================ */
@layer reset {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* NOTE: NO "border: 0 solid" — omitted per locked CONTEXT.md decision */
  }

  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
  }

  hr { height: 0; color: inherit; border-width: 0; border-top-width: 1px; border-style: solid; }
  abbr:where([title]) { text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
  }
  small { font-size: 80%; }
  sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
    opacity: 1;
  }
  ::placeholder { opacity: 1; }
  textarea { resize: vertical; }
  button, input[type='button'], input[type='reset'], input[type='submit'], ::file-selector-button {
    appearance: none;
    cursor: pointer;
  }
  ::-webkit-search-decoration { -webkit-appearance: none; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

/* ============================================================
   TOKENS — design custom properties (overridden by theme-head.php)
   ============================================================ */
@layer tokens {
  :root {
    --color-brand-dark: #0f172a;
    --color-brand-accent: #3b82f6;
    --color-brand-accent-hover: #2563eb;
    --font-display: "DM Serif Display", serif;
    --font-body: "Plus Jakarta Sans", sans-serif;
    --font-size-body: 0.9375rem;
    --heading-weight: 700;
    --heading-transform: none;
    --ui-transform: none;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --nav-height: 64px;
    --btn-radius: 0.5rem;
    --nav-gap: 24px;
    --color-bg-alt: #f9fafb;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --color-error: #dc2626;

    /* Mobile breakpoint: 767px — also used in gallery.php Embla config */

    /* Transition durations */
    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;

    /* Border radius scale */
    --radius-sm: 0.3125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
  }

  /* All-caps letter spacing — only present when an uppercase toggle is on */
  .prose :where(h1, h2, h3, h4):not(:where([class~=not-prose],[class~=not-prose] *)),
  .silk-block-heading,
  .page-header h1,
  .hero-heading,
  .textimage-heading,
  .cta-heading,
  .events-past-heading,
  .service-card h3 {
    letter-spacing: var(--caps-spacing, 0em);
  }
}

/* ============================================================
   BASE — global element defaults
   ============================================================ */
@layer base {
  /* The theme is light-only. Declared in CSS as well as via the
     <meta name="color-scheme"> tag, because embedded web views
     (Polyscope's preview, in-app browsers) do not reliably honour the tag
     and fall back to a dark canvas on a dark-mode system. */
  :root {
    color-scheme: light;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--font-size-body, 0.9375rem);
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);

    /* Paint the canvas rather than letting the host's backdrop show through.
       theme-head.php overrides this, unlayered, when a Default Block
       Background is set. */
    background-color: #fff;
  }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

  :focus-visible {
    outline: 2px solid var(--color-brand-accent);
    outline-offset: 2px;
  }

  /* The accent is picked for contrast against a light page, so on a dark
     surface it collapses: the default #226ba3 measures 2.5:1 against the
     default #1c294a, under the 3:1 that WCAG 1.4.11 asks of a focus
     indicator. Anywhere Silk paints a dark background, switch to white.
     :focus-visible only ever paints while an element is focused, so none of
     this changes how a site looks at rest. */
  .footer :focus-visible,
  .drawer :focus-visible,
  .bg-brand-dark :focus-visible,
  .text-white :focus-visible,
  .dark-default-bg :focus-visible,
  .header--transparent:not(.header--scrolled) :focus-visible,
  .header--dark :focus-visible {
    outline-color: #fff;
  }

  /* Bypass block. Off-screen rather than display:none so it stays focusable,
     and it drops into the top-left corner the moment it takes focus. */
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background-color: var(--color-brand-accent);
    color: var(--btn-text, #fff);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom-right-radius: var(--btn-radius, 0.5rem);
    transform: translateY(-110%);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  /* Safari does not support :focus-visible on links reliably enough to be the
     only trigger for something a keyboard user cannot otherwise reach. */
  .skip-link:focus {
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: no-preference) {
    .skip-link {
      transition: transform var(--duration-fast, 0.15s) ease;
    }
  }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {

  /* ----------------------------------------------------------
     Section 1: Prose typography component
     ---------------------------------------------------------- */

  .prose {
    color: var(--prose-body);
    font-size: var(--font-size-body, 0.9375rem);
    line-height: 1.75;
    /* Prose colour tokens — defaults use hex values for theme compatibility */
    --prose-body: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
    --prose-headings: var(--color-brand-dark);
    --prose-lead: #6b7280;
    --prose-links: var(--color-brand-dark);
    --prose-bold: var(--color-brand-dark);
    --prose-counters: var(--color-accent-text, var(--color-brand-accent));
    --prose-bullets: var(--color-accent-text, var(--color-brand-accent));
    --prose-hr: #e5e7eb;
    --prose-quotes: var(--color-brand-dark);
    --prose-quote-borders: #e5e7eb;
    --prose-captions: #6b7280;
    --prose-kbd: var(--color-brand-dark);
    --prose-kbd-shadows: rgba(15, 23, 42, 0.1);
    --prose-code: var(--color-brand-dark);
    --prose-pre-code: #e5e7eb;
    --prose-pre-bg: #1e293b;
    --prose-th-borders: #e5e7eb;
    --prose-td-borders: #f3f4f6;
  }

  .prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    text-wrap: pretty;
  }

  .prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-lead);
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    font-size: 1.25em;
    line-height: 1.6;
  }

  .prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-links);
    font-weight: 500;
    text-decoration: underline;
  }

  .prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-bold);
    font-weight: 600;
  }

  .prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
  }

  .prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
    list-style-type: decimal;
  }

  .prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: upper-alpha; }
  .prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: lower-alpha; }
  .prose :where(ol[type="A s"]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: upper-alpha; }
  .prose :where(ol[type="a s"]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: lower-alpha; }
  .prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: upper-roman; }
  .prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: lower-roman; }
  .prose :where(ol[type="I s"]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: upper-roman; }
  .prose :where(ol[type="i s"]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: lower-roman; }
  .prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)) { list-style-type: decimal; }

  .prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
    list-style-type: disc;
  }

  .prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
    color: var(--prose-counters);
    font-weight: 400;
  }

  .prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker {
    color: var(--prose-bullets);
  }

  .prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-headings);
    margin-top: 1.25em;
    font-weight: 600;
  }

  .prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-color: var(--prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-quotes);
    border-inline-start-width: 3px;
    border-inline-start-color: var(--color-brand-accent);
    quotes: "\201C" "\201D" "\2018" "\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding: 1em 1.25em;
    border-radius: 0 var(--btn-radius, 0.5rem) var(--btn-radius, 0.5rem) 0;
    background: color-mix(in srgb, var(--color-brand-accent) 4%, transparent);
    font-style: italic;
    font-weight: 500;
  }

  .prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *))::before {
    content: open-quote;
  }

  .prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *))::after {
    content: close-quote;
  }

  .prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-headings);
    font-family: var(--font-display);
    margin-top: 0;
    margin-bottom: 0.888889em;
    font-size: 2.25em;
    font-weight: var(--heading-weight, 800);
    line-height: 1.11111;
    text-transform: var(--heading-transform, none);
  }

  .prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
    font-weight: 900;
  }

  .prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-headings);
    font-family: var(--font-display);
    margin-top: 2em;
    margin-bottom: 1rem;
    font-size: calc(var(--h2-size, 30px) * var(--heading-ratio, 0.8));
    font-weight: var(--heading-weight, 700);
    line-height: 1.25;
    text-transform: var(--heading-transform, none);
  }

  @media (min-width: 768px) {
    .prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
      font-size: var(--h2-size, 1.875rem);
      line-height: 1.2;
    }
  }

  .prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
    font-weight: 800;
  }

  .prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-headings);
    font-family: var(--font-display);
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    font-size: 1.25em;
    font-weight: var(--heading-weight, 600);
    line-height: 1.6;
    text-transform: var(--heading-transform, none);
  }

  .prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
    font-weight: 700;
  }

  .prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-headings);
    font-family: var(--font-display);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: var(--heading-weight, 600);
    line-height: 1.5;
    text-transform: var(--heading-transform, none);
  }

  .prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
    font-weight: 700;
  }

  .prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
    display: block;
  }

  .prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-kbd);
    box-shadow: 0 0 0 1px var(--prose-kbd-shadows), 0 3px 0 var(--prose-kbd-shadows);
    padding-top: 0.1875em;
    padding-inline-end: 0.375em;
    padding-bottom: 0.1875em;
    border-radius: var(--radius-sm);
    padding-inline-start: 0.375em;
    font-family: inherit;
    font-size: 0.875em;
    font-weight: 500;
  }

  .prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-code);
    font-size: 0.875em;
    font-weight: 600;
  }

  .prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *))::before,
  .prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *))::after {
    content: "`";
  }

  .prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
  }

  .prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
    font-size: 0.875em;
  }

  .prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
    font-size: 0.9em;
  }

  .prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: inherit;
  }

  .prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-pre-code);
    background-color: var(--prose-pre-bg);
    padding-top: 0.857143em;
    padding-inline-end: 1.14286em;
    padding-bottom: 0.857143em;
    border-radius: var(--radius-md);
    margin-top: 1.71429em;
    margin-bottom: 1.71429em;
    padding-inline-start: 1.14286em;
    font-size: 0.875em;
    font-weight: 400;
    line-height: 1.71429;
    overflow-x: auto;
  }

  .prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)) {
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
  }

  .prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *))::before,
  .prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *))::after {
    content: none;
  }

  .prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)) {
    table-layout: auto;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.71429;
  }

  .prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--prose-th-borders);
  }

  .prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-headings);
    vertical-align: bottom;
    padding-inline-end: 0.571429em;
    padding-bottom: 0.571429em;
    padding-inline-start: 0.571429em;
    font-weight: 600;
  }

  .prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--prose-td-borders);
  }

  .prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-bottom-width: 0;
  }

  .prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)) {
    vertical-align: baseline;
  }

  .prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-top-width: 1px;
    border-top-color: var(--prose-th-borders);
  }

  .prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
    vertical-align: top;
  }

  .prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)) {
    text-align: start;
  }

  .prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--prose-captions);
    margin-top: 0.857143em;
    font-size: 0.875em;
    line-height: 1.42857;
  }

  .prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  .prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-start: 0.375em;
  }

  .prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  .prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.25em;
  }

  .prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-bottom: 1.25em;
  }

  .prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.25em;
  }

  .prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-bottom: 1.25em;
  }

  .prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  .prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0.5em;
    padding-inline-start: 1.625em;
  }

  .prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0;
  }

  .prose.prose-sm :where(h2+*, h3+*, h4+*):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose.prose-lg :where(h2+*, h3+*, h4+*):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose.prose-xl :where(h2+*, h3+*, h4+*):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0;
  }

  .prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-start: 0;
  }

  .prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-end: 0;
  }

  .prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-top: 0.571429em;
    padding-inline-end: 0.571429em;
    padding-bottom: 0.571429em;
    padding-inline-start: 0.571429em;
  }

  .prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-start: 0;
  }

  .prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-end: 0;
  }

  .prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose > :first-child {
    margin-top: 0;
  }

  .prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose > :last-child {
    margin-bottom: 0;
  }

  /* Silk custom prose overrides — plain selectors (NOT :where()) so they beat the :where() rules above */

  .prose > p:first-child {
    font-size: 1.05em;
    line-height: 1.7;
  }

  .prose > *:last-child {
    margin-bottom: 0;
  }

  .prose a {
    color: var(--color-accent-text, var(--color-brand-accent));
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-accent-text, var(--color-brand-accent)) 30%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--duration-fast) ease, color var(--duration-fast) ease;
  }

  .prose a:hover {
    text-decoration-color: currentColor;
    color: var(--color-brand-dark);
  }

  /* Dark context prose overrides */
  .block-section.text-white .prose {
    --prose-body: rgba(255, 255, 255, 0.85);
    --prose-headings: #fff;
    --prose-links: #fff;
    --prose-bold: #fff;
    --prose-bullets: rgba(255, 255, 255, 0.6);
    --prose-counters: rgba(255, 255, 255, 0.6);
    --prose-quotes: rgba(255, 255, 255, 0.8);
  }

  .block-section.text-white .prose a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.4);
  }

  .block-section.text-white .prose a:hover {
    color: #fff;
    text-decoration-color: #fff;
  }

  /* Prose — lg size modifier (used by textimage, gallery, accordion blocks) */
  .prose-sm {
    font-size: calc(var(--font-size-body, 0.9375rem) * 0.867);
    line-height: 1.714;
  }
  .prose-sm :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.143em;
    margin-bottom: 1.143em;
  }
  .prose-sm :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
    font-size: 1.538em;
    line-height: 1.35;
    margin-top: 1.692em;
    margin-bottom: 1rem;
  }
  .prose-sm :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    font-size: 1.231em;
    line-height: 1.5;
    margin-top: 1.538em;
    margin-bottom: 0.615em;
  }
  .prose-sm :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.429em;
    margin-bottom: 0.357em;
  }
  .prose-sm :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0.286em;
    margin-bottom: 0.286em;
  }
  .prose-sm :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-start: 0.571em;
  }
  .prose-sm :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.286em;
    margin-bottom: 1.286em;
    padding-inline-start: 0.857em;
  }

  .prose-lg {
    font-size: calc(var(--font-size-body, 0.9375rem) * 1.333);
    line-height: 1.778;
  }
  .prose-lg :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.333em;
    margin-bottom: 1.333em;
  }
  .prose-lg :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
    font-size: 1.667em;
    line-height: 1.33333;
    margin-top: 1.867em;
    margin-bottom: 1rem;
  }
  .prose-lg :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    font-size: 1.333em;
    line-height: 1.5;
    margin-top: 1.667em;
    margin-bottom: 0.667em;
  }
  .prose-lg :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.778em;
    margin-bottom: 0.444em;
  }
  .prose-lg :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0.444em;
    margin-bottom: 0.444em;
  }
  .prose-lg :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose-lg :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-start: 0.667em;
  }
  .prose-lg :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.556em;
    margin-bottom: 1.556em;
    padding-inline-start: 1.111em;
  }
  .prose-lg :where(.prose-lg>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0;
  }
  .prose-lg :where(.prose-lg>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-bottom: 0;
  }

  .prose-xl {
    font-size: calc(var(--font-size-body, 0.9375rem) * 1.6);
    line-height: 1.8;
  }
  .prose-xl :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.333em;
    margin-bottom: 1.333em;
  }
  .prose-xl :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
    font-size: 1.667em;
    line-height: 1.33333;
    margin-top: 1.8em;
    margin-bottom: 1rem;
  }
  .prose-xl :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    font-size: 1.333em;
    line-height: 1.5;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
  }
  .prose-xl :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
  }
  .prose-xl :where(li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .prose-xl :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)),
  .prose-xl :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)) {
    padding-inline-start: 0.667em;
  }
  .prose-xl :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-inline-start: 1.2em;
  }

  /* ----------------------------------------------------------
     Section 2: Layout and site components
     ---------------------------------------------------------- */

  .site-body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Animate anchor jumps rather than teleporting. Gated on the user not
     having asked for reduced motion, which also makes `behavior: 'auto'` in
     JS resolve to an instant scroll for those users. */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  /* Anchor links and scrollIntoView() would otherwise park their target
     underneath a header that stays on screen. Only offset when the header
     actually does stay: a header in the normal flow scrolls away with the
     rest of the page and needs no allowance. */
  html:has(header.fixed),
  html:has(header.header--sticky) {
    scroll-padding-top: var(--header-height, calc(var(--nav-height, 4rem) + 2.5rem));
  }

  .site-main {
    flex: 1;
    overflow-x: clip;
  }

  .container {
    width: 100%;
    margin-inline: auto;
    max-width: 80rem;
    padding-inline: 1rem;
  }

  @media (min-width: 640px) {
    .container {
      padding-inline: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-inline: 2rem;
    }
  }

  .full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /* Text block — split to columns */
  .text-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 2rem;
  }

  @media (min-width: 768px) {
    .text-columns {
      grid-template-columns: repeat(var(--text-col-count, 2), 1fr);
    }
  }

  /* Section label / eyebrow — small uppercase label above block headings */
  .silk-section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-text, var(--color-brand-accent));
    margin-bottom: 0.75rem;
    font-family: var(--font-body);
  }

  .text-white .silk-section-label {
    color: var(--color-accent-light, var(--color-brand-accent));
  }

  /* Shared block section heading — consistent h2 sizing across all blocks */
  .silk-block-heading {
    font-weight: var(--heading-weight, 700);
    font-size: calc(var(--h2-size, 30px) * var(--heading-ratio, 0.8));
    line-height: 1.25;
    margin-bottom: 1rem;
    text-transform: var(--heading-transform, none);
  }

  @media (min-width: 768px) {
    .silk-block-heading {
      font-size: var(--h2-size, 1.875rem);
      line-height: 1.2;
    }
  }

  .block-section {
    position: relative;
    --block-padding: 3rem;
  }

  @media (min-width: 768px) {
    .block-section {
      --block-padding: 4rem;
    }
  }

  .block-section.block-pad {
    padding-block: calc(var(--block-padding) * var(--block-padding-scale, 1));
  }

  .block-section.block-pad-bot {
    padding-block-start: 0;
    padding-block-end: calc(var(--block-padding) * var(--block-padding-scale, 1));
  }

  .block-section.block-pad-top {
    padding-block-start: calc(var(--block-padding) * var(--block-padding-scale, 1));
    padding-block-end: 0;
  }

  .block-section.bg-alt {
    background-color: var(--color-bg-alt, #f9fafb);
  }

  .block-section.bg-default {
    background-color: var(--color-block-bg-default);
  }

  .block-section:not(.text-white) h1,
  .block-section:not(.text-white) h2,
  .block-section:not(.text-white) h3 {
    color: var(--color-brand-dark);
  }


  .block-section.text-white .text-gray-600 {
    color: rgba(255, 255, 255, 0.7);
  }

  .block-section.text-white .text-gray-400 {
    color: rgba(255, 255, 255, 0.5);
  }

  .block-section.text-white .divide-gray-200 {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .block-section.text-white .border-gray-200,
  .block-section.text-white .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .page-header {
    background-color: var(--color-block-bg-darker, transparent);
    padding: 2rem 0 2rem;
  }

  .page-header h1 {
    color: var(--color-brand-dark);
    text-transform: var(--heading-transform, none);
  }

  @media (min-width: 768px) {
    .page-header {
      padding: 2.5rem 0 2.5rem;
    }
  }

  .page-header:not(:has(*)) {
    padding: 0;
  }

  /* Page header with hero background image */
  .page-header--hero {
    position: relative;
    padding: 3rem 0;
    overflow: hidden;
    background-color: var(--color-brand-dark);
  }

  @media (min-width: 768px) {
    .page-header--hero {
      padding: 4rem 0;
    }
  }

  .page-header-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .page-header--parallax {
    overflow: hidden;
  }

  .page-header--parallax .page-header-bg {
    height: 180%;
    top: -40%;
    will-change: transform;
  }

  .page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.55));
  }

  .page-header-content {
    position: relative;
    z-index: 1;
  }

  .page-header--hero .breadcrumbs a,
  .page-header--hero .breadcrumbs span {
    color: rgba(255,255,255,0.5);
  }

  .page-header--hero .breadcrumbs a:hover {
    color: #fff;
  }

  .page-header--hero .breadcrumbs-separator {
    color: rgba(255,255,255,0.3);
  }

  @media (max-width: 767px) {
    .header-logo {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* Cap the width on narrow screens without discarding the configured
       logo height. max-height plus max-width lets the browser scale to fit
       both and keep the aspect ratio; the old height: auto !important threw
       the height away, so a tall logo rendered at its intrinsic size. */
    .header-logo img {
      max-width: min(60vw, 200px);
      height: auto;
    }
  }

  /* ----------------------------------------------------------
     Section 3: Existing custom components (ported from src/silk.css)
     ---------------------------------------------------------- */

  /* Tag pills — adapt to light and dark backgrounds */
  .tag-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 400;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    /* VISUAL CHANGE (3.0.0). Was 0.6, which faded the default #2c374e text to
       #818795 on white: 3.6:1 at 13px, under the 4.5:1 of WCAG 1.4.3. 0.75
       measures 5.5:1 on the default palette and still reads as secondary
       against the solid active pill. Contrast is a visual property, so there
       is no version of this fix that leaves existing sites looking the same.
       Note the floor still tracks the site's own body colour: a theme whose
       body text only just clears 4.5:1 will not clear it here. */
    opacity: 0.75;
    transition: opacity var(--duration-fast) ease;
  }

  .tag-pill:hover {
    opacity: 1;
  }

  .tag-pill.active {
    background-color: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
    opacity: 1;
  }

  /* Block edge styles */
  .edge-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: var(--edge-height, 42px);
    line-height: 0;
    pointer-events: none;
    z-index: 2;
  }

  .block-section.has-edge {
    padding-bottom: calc(var(--block-padding, 3rem) * var(--block-padding-scale, 1) + var(--edge-height, 42px)) !important;
  }

  /* Full-bleed blocks (hero, cta banner) keep tighter edge spacing */
  .block-section.has-edge:has(> .full-bleed) {
    padding-bottom: var(--edge-height, 42px) !important;
  }

  .block-section.has-edge > .full-bleed {
    margin-bottom: calc(var(--edge-height, 42px) * -1);
    padding-bottom: var(--edge-height, 42px);
  }

  .edge-divider svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .edge-divider--top {
    top: calc(var(--edge-height, 42px) * -1);
    bottom: auto;
  }

  /* Service cards */
  .service-card {
    position: relative;
    background-color: color-mix(in srgb, var(--color-brand-accent) 3%, var(--color-block-bg, #fff));
    display: flex;
    flex-direction: column;
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    border: 2px solid color-mix(in srgb, var(--color-brand-dark) 12%, transparent);
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
  }

  .service-card:not(.service-card--filled):hover {
    border-color: color-mix(in srgb, var(--color-brand-accent) 35%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand-dark) 8%, transparent);
  }

  .service-card h3 {
    color: var(--color-brand-dark);
    text-transform: var(--heading-transform, none);
  }

  .service-card--filled {
    background-color: var(--color-brand-dark);
    color: rgba(255, 255, 255, 0.85);
    border-color: transparent;
  }

  .service-card--filled h3 {
    color: #fff;
  }

  .block-section.bg-alt .service-card:not(.service-card--filled) {
    background-color: color-mix(in srgb, #fff 85%, var(--color-bg-alt));
  }

  .block-section.text-white .service-card:not(.service-card--filled) {
    background-color: #fff;
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
  }

  .block-section.text-white .service-card:not(.service-card--filled) h3 {
    color: var(--color-brand-dark);
  }

  .block-section.text-white .service-card--filled {
    background-color: color-mix(in srgb, var(--color-brand-dark) 80%, #fff);
  }

  /* Responsive card grid for services and subpage nav blocks */
  .services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .services-grid > * {
    flex: 1 1 100%;
    max-width: 24rem;
  }

  @media (min-width: 768px) {
    .services-grid > * {
      flex: 1 1 calc((100% / var(--services-cols, 3)) - 1.5rem);
    }
  }

  /* Gallery grid with configurable columns via custom property */
  .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .gallery-grid > * {
    flex: 0 0 calc(50% - 0.5rem);
    min-width: 0;
  }

  @media (min-width: 768px) {
    .gallery-grid > * {
      flex: 0 0 calc(100% / var(--gallery-cols, 3) - 1rem * (var(--gallery-cols, 3) - 1) / var(--gallery-cols, 3));
    }
  }

  /* Caption overlay — fades in on hover */
  .gallery-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2rem 0.75rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    transition: opacity var(--duration-slow) ease;
  }

  button:hover .gallery-caption {
    opacity: 1;
  }

  .gallery-caption--always {
    opacity: 1;
  }

  /* Gallery thumbnail button */
  .gallery-thumb {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    display: block;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    box-shadow: none;
  }

  .gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) ease;
    display: block;
  }

  .gallery-thumb:hover img {
    transform: scale(1.05);
  }

  /* Expand icon on lightbox-enabled images */
  .gallery-thumb::after,
  .textimage-lightbox-trigger::after {
    content: '';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    transition: opacity var(--duration-normal) ease;
    pointer-events: none;
    z-index: 2;
  }

  .gallery-thumb:hover::after,
  .textimage-lightbox-trigger:hover::after {
    opacity: 0.85;
  }

  /* Gallery lightbox overlay */
  .gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
  }

  .gallery-lightbox.is-open { opacity: 1; }

  .gallery-lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .gallery-lightbox-img {
    max-height: 90vh;
    max-width: 90vw;
    object-fit: contain;
    transition: opacity var(--duration-fast);
  }

  .gallery-lightbox-caption {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
    max-width: 42rem;
  }

  /* Gallery lightbox nav buttons */
  .gallery-lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.75rem;
    transition: background-color var(--duration-fast) ease;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gallery-lightbox-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .gallery-lightbox-btn--prev { left: 1rem; }
  .gallery-lightbox-btn--next { right: 1rem; }

  .gallery-lightbox-btn--close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    transform: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.5rem;
    transition: background-color var(--duration-fast) ease;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gallery-lightbox-btn--close:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* Gallery slider layout (Embla Carousel) */
  .gallery-slider {
    --_per-page: var(--slider-per-page, 3);
    --_gap: 1rem;
    --_btn-space: 3.75rem; /* button width + gap */
    display: flex;
    align-items: center;
    margin-inline: calc(var(--_btn-space) * -1);
  }

  .gallery-slider-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .gallery-slider-track {
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--_gap) * -1);
  }

  .gallery-slider-slide {
    flex: 0 0 calc(100% / var(--_per-page));
    min-width: 0;
    padding-left: var(--_gap);
  }

  @media (max-width: 767px) {
    .gallery-slider-slide {
      flex: 0 0 85%;
    }
  }

  .gallery-slider-trigger {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    display: block;
    width: 100%;
  }

  .gallery-slider-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow) ease;
  }

  .gallery-slider-trigger:hover img {
    transform: scale(1.05);
  }

  .gallery-slider-btn {
    flex-shrink: 0;
    background-color: color-mix(in srgb, var(--color-brand-accent) 10%, #fff);
    color: var(--color-brand-accent);
    border: none;
    border-radius: var(--radius-full);
    width: 3rem;
    height: 3rem;
    margin-inline: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, opacity var(--duration-fast) ease;
  }

  .gallery-slider-btn:hover:not(:disabled) {
    background-color: var(--color-brand-accent);
    color: #fff;
  }

  .gallery-slider-btn:disabled {
    opacity: 0.3;
    cursor: default;
  }

  @media (max-width: 767px) {
    .gallery-slider {
      margin-inline: 0;
    }

    .gallery-slider-btn {
      display: none;
    }
  }

  /* Gallery slider dots */
  .gallery-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .gallery-slider-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    background: var(--color-gray-300, #ccc);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--duration-normal) ease, transform var(--duration-normal) ease;
  }

  .gallery-slider-dot.active {
    background: var(--color-brand-accent);
    transform: scale(1.3);
  }

  /* Native contact form styles */
  .form-wrapper {
    max-width: 40rem;
    margin-inline: auto;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  @media (min-width: 640px) {
    .form-row {
      grid-template-columns: 1fr 1fr;
    }
  }

  .form-field {
    margin-bottom: 1rem;
  }

  .form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
  }

  .form-field input,
  .form-field textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 2px solid color-mix(in srgb, var(--color-brand-dark) 15%, transparent);
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    background-color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-brand-dark);
    outline: none;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }

  .form-field input::placeholder,
  .form-field textarea::placeholder {
    color: color-mix(in srgb, var(--color-brand-dark) 40%, transparent);
  }

  .form-field input:hover,
  .form-field textarea:hover {
    border-color: color-mix(in srgb, var(--color-brand-dark) 30%, transparent);
  }

  .form-field input:focus-visible,
  .form-field textarea:focus-visible {
    border-color: var(--color-brand-accent);
    background-color: color-mix(in srgb, var(--color-brand-accent) 3%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 15%, transparent);
  }

  .form-field textarea {
    resize: none;
    min-height: 8rem;
  }

  .form-field--error input,
  .form-field--error textarea {
    border-color: var(--color-error);
  }

  .form-field--error input:focus-visible,
  .form-field--error textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
  }

  .form-field-error {
    display: block;
    color: var(--color-error);
    font-size: 0.8125rem;
    margin-top: 0.375rem;
  }

  .form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border: none;
    background-color: var(--color-brand-accent);
    color: var(--btn-text, #fff);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all var(--duration-normal) ease;
    margin-top: 0.5rem;
  }

  .form-submit:hover {
    background-color: var(--color-brand-accent-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }

  .form-submit:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-lg);
  }

  .form-success svg {
    width: 3rem;
    height: 3rem;
    color: #16a34a;
    margin-bottom: 1rem;
  }

  .form-success p {
    font-size: 1.125rem;
    font-weight: 500;
    color: #15803d;
  }

  .form-error-banner {
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--color-error);
    font-weight: 500;
    margin-bottom: 1.5rem;
  }

  /* Focus lands here on a failed submit, so it needs an indicator of its own:
     the banner is not otherwise focusable and has no resting outline. */
  .form-error-banner:focus-visible,
  .form-success:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .form-error-summary {
    list-style: disc;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
  }

  .form-error-summary a {
    color: inherit;
    text-decoration: underline;
  }

  /* Dark background form overrides */
  .block-section.text-white .form-field label {
    color: #fff;
  }

  .block-section.text-white .form-field input,
  .block-section.text-white .form-field textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
  }

  .block-section.text-white .form-field input::placeholder,
  .block-section.text-white .form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .block-section.text-white .form-field input:focus-visible,
  .block-section.text-white .form-field textarea:focus-visible {
    border-color: var(--color-brand-accent);
  }

  /* ----------------------------------------------------------
     Section 4: Block and chrome components
     ---------------------------------------------------------- */

  /* Button component */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0.875rem 1.75rem;
    border-radius: var(--btn-radius, 0.5rem);
    border: 2px solid transparent;
    letter-spacing: calc(0.025em + var(--ui-caps-spacing, 0em));
    transition: all var(--duration-normal) ease;
    font-size: 1rem;
    text-decoration: none;
    text-transform: var(--ui-transform, none);
  }

  .btn--primary {
    background-color: var(--color-brand-accent);
    color: var(--btn-text, #fff);
  }

  .btn--primary:hover {
    background-color: var(--color-brand-accent-hover);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    transform: translateY(-2px);
  }

  .btn--white {
    background-color: #fff;
    color: var(--color-accent-text, var(--color-brand-accent));
  }

  .btn--white:hover {
    background-color: var(--color-gray-100);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  }

  .btn--outline-white {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
  }

  .btn--outline-white:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }

  .btn--outline-accent {
    border-color: color-mix(in srgb, var(--color-accent-text, var(--color-brand-accent)) 50%, transparent);
    color: var(--color-accent-text, var(--color-brand-accent));
    background-color: transparent;
  }

  .btn--outline-accent:hover {
    border-color: var(--color-accent-text, var(--color-brand-accent));
    background-color: color-mix(in srgb, var(--color-accent-text, var(--color-brand-accent)) 10%, transparent);
    transform: translateY(-2px);
  }

  .btn:focus-visible {
    outline: 2px solid var(--color-brand-accent);
    outline-offset: 2px;
  }

  .btn--outline-white:focus-visible {
    outline-color: #fff;
  }

  .btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
  }

  /* Hero component */
  .hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    /* Viewport units resolve to fractional pixel heights, and a mobile
       browser's toolbar changes them mid-scroll. Either can leave a hairline
       where the background image stops short of the section's edge; against
       the white page below, that reads as a stray line under the hero.
       Painting the section brand-dark underneath means any such sliver is the
       hero's own colour. It also covers the moment before the image loads. */
    background-color: var(--color-brand-dark);
  }

  /* A gradient hero paints its own background; leave that alone */
  .hero[style*="linear-gradient"] {
    background-color: transparent;
  }

  /* --hero-available is how much viewport is actually left for the hero.
     When the header sits in the flow above it, that is a viewport minus the
     header; the old `min-height: 100dvh` overflowed by exactly the header's
     height and pushed the scroll indicator off screen every time.
     --header-height is measured at runtime by the header snippet; the
     fallback adds the header's own vertical padding to --nav-height, which
     over-subtracts slightly rather than hiding the indicator. */
  .hero--fullheight {
    /* svh, not dvh. dvh tracks the viewport as a mobile browser retracts its
       toolbar, so the hero resizes on every scroll direction change and the
       whole page reflows under the reader. svh is the height with the toolbar
       showing — smaller, but it never moves. */
    --hero-available: calc(100svh - var(--header-height, calc(var(--nav-height, 4rem) + 2.5rem)));
    min-height: var(--hero-available);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* A fixed or transparent header overlays the hero rather than sitting above
     it, so the whole viewport is available */
  .hero--fullheight.hero--overlay-nav {
    --hero-available: 100svh;
  }

  /* Pin the indicator to the bottom of the first viewport rather than to the
     bottom of the section. They are usually the same, but a hero whose content
     is taller than the space available — a long headline on a short window —
     grows past the fold, and an indicator anchored to the section grows away
     with it. */
  /* In a full-height hero the indicator sits in the flow beneath the content
     rather than being positioned over it. Pinning it to a coordinate meant
     that on a short window — or once a mobile browser toolbar ate into the
     viewport — it landed on top of the buttons. */
  .hero--fullheight {
    display: flex;
    flex-direction: column;
  }

  .hero--fullheight .hero-content--fullheight {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero--fullheight .hero-scroll-indicator {
    position: static;
    flex: 0 0 auto;
    align-self: center;
    transform: none;
    margin-block: 0 2rem;
  }

  .hero--padded {
    padding-block-start: calc(var(--hero-vpadding, 5rem) * var(--block-padding-scale, 1));
    padding-block-end: calc(var(--hero-vpadding, 4.5rem) * var(--block-padding-scale, 1));
  }

  @media (min-width: 768px) {
    .hero--padded {
      padding-block-start: calc(var(--hero-vpadding, 8rem) * var(--block-padding-scale, 1));
      padding-block-end: calc(var(--hero-vpadding, 8rem) * var(--block-padding-scale, 1));
    }
  }

  .has-edge > .hero--padded.full-bleed {
    padding-bottom: calc(var(--hero-vpadding, 5rem) * var(--block-padding-scale, 1) + var(--edge-height, 42px));
  }

  @media (min-width: 768px) {
    .has-edge > .hero--padded.full-bleed {
      padding-bottom: calc(var(--hero-vpadding, 8rem) * var(--block-padding-scale, 1) + var(--edge-height, 42px));
    }
  }

  .hero--transparent-nav {
    padding-block-start: calc(var(--hero-vpadding, 4.5rem) * var(--block-padding-scale, 1));
    padding-block-end: calc(var(--hero-vpadding, 2.5rem) * var(--block-padding-scale, 1) + var(--nav-height, 4rem) * 1.5);
  }

  @media (min-width: 768px) {
    .hero--transparent-nav {
      padding-block-end: calc(var(--hero-vpadding, 8rem) * var(--block-padding-scale, 1) + var(--nav-height, 4rem) * 1.5);
    }
  }

  .has-edge > .hero--transparent-nav.full-bleed {
    padding-bottom: calc(var(--hero-vpadding, 2rem) * var(--block-padding-scale, 1) + var(--nav-height, 4rem) * 1.5 + var(--edge-height, 42px));
  }

  @media (min-width: 768px) {
    .has-edge > .hero--transparent-nav.full-bleed {
      padding-bottom: calc(2rem * var(--block-padding-scale, 1) + var(--nav-height, 4rem) * 1.5 + var(--edge-height, 42px));
    }
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background-color: color-mix(
      in srgb,
      color-mix(in srgb, var(--color-brand-dark), black 40%) calc(var(--hero-overlay-opacity, 0.6) * 100%),
      transparent
    );
  }

  .hero-overlay--video {
    --hero-overlay-opacity: 0.6;
  }

  .hero-overlay--image {
    --hero-overlay-opacity: 0.7;
  }

  .hero-video,
  .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hero slideshow (crossfade between multiple background images) */
  .hero-slideshow {
    position: absolute;
    inset: 0;
  }

  .hero-slideshow-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .hero-slideshow-img:first-child {
    opacity: 1;
  }

  .hero-slideshow-img--active {
    opacity: 1;
  }

  /* Parallax is a desktop effect. background-attachment: fixed sizes the
     image to the viewport rather than the element, so on a tall narrow phone
     a landscape photo is cropped down to a featureless patch — and iOS has
     never handled it reliably anyway. Fall back to a normal background. */
  @media (max-width: 767px) {
    .hero[style*="background-attachment"] {
      background-attachment: scroll !important;
      /* The clip-path exists to contain a fixed background. With the
         background scrolling it has no job left, and it clips the section's
         own background colour to the same fractional edge — which is how the
         hairline of page showing under the hero survived being painted over. */
      clip-path: none !important;
    }
  }

  .hero-content {
    position: relative;
    z-index: 10;
  }

  .hero-content--center {
    text-align: center;
    max-width: 56rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  .hero-content--left {
    text-align: left;
    /* Same gutter as the header and the page content. A bare 5vw fell to 20px
       on a phone, so the hero sat 4px inside everything below it. */
    padding-inline: clamp(1.5rem, 5vw, 5rem);
    max-width: 56rem;
  }

  .hero-content--right { /* deprecated — kept for existing content */
    text-align: right;
    padding-inline: 5vw;
    max-width: 56rem;
    margin-left: auto;
  }

  /* Only reserve room at the top when the header actually overlays the hero —
     when it sits above it in the flow there is nothing to clear. The scroll
     indicator now sits in the flow, so the bottom only needs breathing room
     rather than space reserved for something positioned over it. */
  .hero-content--fullheight {
    padding-top: 0;
    padding-bottom: 2rem;
  }

  /* Clear the header, plus a gap — sitting the headline directly against the
     header reads as cramped, particularly on a phone where the two are close
     to the same width. */
  .hero--overlay-nav .hero-content--fullheight {
    padding-top: calc(var(--header-height, calc(var(--nav-height, 4rem) + 2.5rem)) + 3rem);
  }

  .hero-content > * + * {
    margin-top: 1.5rem;
  }

  .hero-content > * + .hero-actions {
    margin-top: 2rem;
  }

  .hero-heading {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    font-size: calc(2.25rem * var(--display-scale, 1));
    line-height: 1.1;
    text-transform: var(--heading-transform, none);
  }

  @media (min-width: 768px) {
    .hero-heading { font-size: calc(3rem * var(--display-scale, 1)); line-height: 1.1; }
  }

  @media (min-width: 1024px) {
    .hero-heading { font-size: calc(3.75rem * var(--display-scale, 1)); line-height: 1.1; }
  }

  .hero-subtext {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 42rem;
  }

  .hero-subtext a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--duration-fast) ease;
  }

  .hero-subtext a:hover {
    text-decoration-color: #fff;
  }

  .hero-content--center .hero-subtext {
    margin-inline: auto;
  }

  @media (min-width: 768px) {
    .hero-subtext { font-size: 1.25rem; line-height: 1.6; }
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .hero-actions--center { justify-content: center; }
  .hero-actions--left   { justify-content: flex-start; }
  .hero-actions--right  { justify-content: flex-end; } /* deprecated — kept for existing content */

  /* Slideshow pause control. Sits in the corner rather than anywhere near the
     hero copy, and stays quiet until it is wanted — but never below the 3:1
     that WCAG 1.4.11 asks of a control, hence 0.55 white on the hero's
     darkened backdrop rather than the 0.3 the design would otherwise want. */
  .hero-slideshow-playpause {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, #fff 45%, transparent);
    background-color: color-mix(in srgb, #000 35%, transparent);
    color: color-mix(in srgb, #fff 85%, transparent);
    cursor: pointer;
  }

  .hero-slideshow-playpause:hover {
    background-color: color-mix(in srgb, #000 55%, transparent);
    color: #fff;
  }

  .hero-slideshow-playpause:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-slideshow-playpause {
      transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
    }
  }

  .hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--duration-normal) ease;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
  }

  .hero-scroll-indicator:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
    border-radius: 4px;
  }

  .hero-scroll-indicator:hover {
    color: #fff;
  }

  .hero-scroll-indicator svg {
    animation: silkBounce 1s infinite;
  }

  /* Hero split (side-by-side) layout */
  .hero--split {
    background-color: var(--color-bg-alt, #f8f9fa);
  }

  .hero-split {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 768px) {
    .hero-split {
      flex-direction: row;
      align-items: stretch;
      min-height: 32rem;
    }
  }

  .hero-split-text {
    position: relative;
    padding: var(--hero-vpadding, 3rem) 1.5rem var(--hero-vpadding, 4rem);
  }

  .hero-split-text > * + * {
    margin-top: 1.5rem;
  }

  .hero-split-text > * + .hero-actions {
    margin-top: 2rem;
  }

  @media (min-width: 768px) {
    .hero-split-text {
      flex: 0 0 50%;
      max-width: 50%;
      padding: var(--hero-vpadding, 4rem) clamp(2rem, 5vw, 5rem) var(--hero-vpadding, 5rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  @media (min-width: 1200px) {
    .hero-split-text {
      padding-left: max(calc((100vw - 80rem) / 2 + 2rem), 3rem);
    }
  }

  .hero-split-text--center {
    text-align: center;
  }

  .hero-split-text--center .hero-subtext {
    margin-inline: auto;
  }

  .hero-split-image {
    min-height: 16rem;
  }

  @media (min-width: 768px) {
    .hero-split-image {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  .hero-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero-split-image--gradient {
    background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand-accent) 100%);
  }

  .hero--split .hero-heading {
    color: var(--color-brand-dark);
  }

  /* Split layout background variants */
  .hero--split-dark .hero-split-text {
    background-color: var(--color-brand-dark);
  }
  .hero--split-dark .hero-subtext--split,
  .hero--split-dark .hero-actions a {
    color: #fff;
  }
  .hero--split-dark .btn--outline-accent {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  .hero--split-dark .btn--outline-accent:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
  }

  .hero--split-brand .hero-split-text {
    background-color: var(--color-brand-accent);
  }
  .hero--split-brand .hero-subtext--split {
    color: #fff;
  }
  .hero--split-brand .btn--primary {
    background-color: var(--color-brand-dark);
  }
  .hero--split-brand .btn--outline-accent {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  .hero--split-brand .btn--outline-accent:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
  }

  .hero-subtext--split {
    color: color-mix(in srgb, var(--color-brand-dark) 70%, transparent);
  }

  /* Edge divider: hero split has no internal bottom padding, so collapse the gap */
  .block-section.has-edge:has(> .hero--split) {
    padding-bottom: 0 !important;
  }

  .has-edge > .hero--split.full-bleed {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Accordion component */
  .accordion-item {
    border-top: 1px solid color-mix(in srgb, var(--color-gray-200) 60%, transparent);
  }

  .accordion-item:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--color-gray-200) 60%, transparent);
  }

  .block-section.text-white .accordion-item {
    border-top-color: rgba(255, 255, 255, 0.15);
  }

  .block-section.text-white .accordion-item:last-child {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }

  .accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1.25rem;
    cursor: pointer;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
  }

  .accordion-trigger-label {
    font-size: 1.125rem;
    line-height: calc(1.75 / 1.125);
    font-weight: 600;
    transition: color var(--duration-fast) ease;
  }

  @media (hover: hover) {
    .accordion-trigger:hover .accordion-trigger-label {
      color: var(--color-brand-accent);
    }

    .block-section.text-white .accordion-trigger:hover .accordion-trigger-label {
      color: var(--color-brand-accent-light, color-mix(in srgb, var(--color-brand-accent) 50%, #fff));
    }
  }

  .accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-gray-400);
    flex-shrink: 0;
    margin-left: 1rem;
    transition: transform var(--duration-normal) ease;
  }

  .accordion-icon--open {
    transform: rotate(180deg);
  }

  .accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease-out;
  }

  .accordion-body--open {
    grid-template-rows: 1fr;
  }

  .accordion-body-inner {
    overflow: hidden;
  }

  .accordion-answer {
    padding-bottom: 1.25rem;
  }

  /* Site title link */
  .site-title-link {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand-dark);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
  }

  .site-title-link:hover {
    opacity: 0.8;
  }

  /* Sticky header */
  .header--sticky {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  /* Sticky + transparent: fade to solid on scroll */
  [data-sticky-transparent] {
    transition: background-color var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
  }

  [data-sticky-transparent].header--scrolled {
    background-color: var(--header-scrolled-bg, var(--header-bg, #ffffff)) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* A translucent floating header.
     The blur goes on a pseudo-element rather than the header itself:
     backdrop-filter makes an element a containing block for its
     fixed-position descendants, and the mobile nav drawer is one of them —
     put the filter on the header and the drawer is trapped inside it,
     sized to the header rather than the viewport. */
  .header--floating-translucent.header--scrolled {
    background-color: transparent !important;
  }

  .header--floating-translucent.header--scrolled::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--header-scrolled-bg, var(--header-bg, #ffffff));
    -webkit-backdrop-filter: var(--header-scrolled-blur, none);
    backdrop-filter: var(--header-scrolled-blur, none);
  }

  .header--sticky.header--scrolled {
    background-color: var(--header-scrolled-bg, var(--header-bg, #ffffff)) !important;
  }

  /* Without a backdrop filter there is no blur to separate the header from
     what is behind it, so keep it opaque rather than merely see-through */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header--floating-translucent.header--scrolled {
      background-color: var(--header-bg, #ffffff) !important;
    }

    .header--floating-translucent.header--scrolled::before {
      display: none;
    }
  }

  /* When scrolled, revert to normal header text colours */
  [data-sticky-transparent].header--scrolled .nav-link {
    color: color-mix(in srgb, var(--color-brand-dark) 70%, transparent);
  }
  [data-sticky-transparent].header--scrolled .nav-link:hover {
    color: var(--color-brand-dark);
  }
  [data-sticky-transparent].header--scrolled .nav-link::after {
    background-color: var(--color-brand-accent);
  }
  [data-sticky-transparent].header--scrolled .nav-link-active {
    color: var(--color-brand-dark);
  }
  [data-sticky-transparent].header--scrolled .site-title-link {
    color: var(--color-brand-dark);
  }
  [data-sticky-transparent].header--scrolled .hamburger {
    color: var(--color-gray-600);
  }
  [data-sticky-transparent].header--scrolled .hamburger:hover {
    color: var(--color-brand-dark);
    background-color: var(--color-gray-100);
  }
  [data-sticky-transparent].header--scrolled.header--dark .hamburger {
    color: color-mix(in srgb, #fff 80%, transparent);
  }
  [data-sticky-transparent].header--scrolled.header--dark .hamburger:hover {
    color: #fff;
    background-color: color-mix(in srgb, #fff 10%, transparent);
  }

  /* Nav text normally sits at 70% of the header colour, which is comfortable
     against a solid background. Let dark content show through and that margin
     disappears: at 85% opacity over something near-black it measures 4.6:1,
     and lower settings fail outright. Full strength restores it to 10:1. */
  .header--floating-translucent.header--scrolled .nav-link,
  .header--floating-translucent.header--scrolled .site-title-link,
  .header--floating-translucent.header--scrolled .hamburger {
    color: var(--color-brand-dark);
  }

  .header--floating-translucent.header--scrolled.header--dark .nav-link,
  .header--floating-translucent.header--scrolled.header--dark .site-title-link,
  .header--floating-translucent.header--scrolled.header--dark .hamburger {
    color: #fff;
  }


  /* Match the gutter the page content uses, so the logo lines up with the
     text below it. The old flat px-10 put the header 16px further in than
     everything else, which is very visible on a phone. */
  .header-nav-inner {
    padding-inline: clamp(1.5rem, 5vw, 2.5rem);
  }

  .header-nav-row {
    min-height: var(--nav-height, 4rem);
    transition: min-height var(--duration-slow) ease;
  }

  /* Once a sticky header has scrolled it floats over the content for the rest
     of the visit, so it can run shorter when given its own logo height. */
  .header--scrolled .header-nav-row {
    min-height: var(--nav-height-floating, var(--nav-height, 4rem));
  }

  /* Logo swap: hide solid logo by default, show on scroll.
     These elements deliberately carry no display utility class — a utility
     would sit in @layer utilities and beat these rules on layer order alone,
     no matter how specific they are, leaving both logos visible at once. */
  /* The hover lift and the cross-fade both live here rather than on utility
     classes in the markup: a `transition-transform` utility sits in
     @layer utilities and would replace the transition property wholesale,
     taking the opacity fade with it. */
  /* visibility rides along with the fade so the logo that is currently
     invisible is also out of the tab order and the accessibility tree.
     Without it both logos stay focusable at all times and a keyboard user
     lands on an invisible link to the homepage. visibility animates
     discretely, so it flips to visible instantly on the way in and holds
     until the fade finishes on the way out — the cross-fade is unchanged. */
  .header-logo a {
    display: inline-block;
    transition: transform var(--duration-normal) ease, opacity var(--duration-slow) ease, visibility var(--duration-slow);
  }

  .header-logo a:hover {
    transform: scale(1.02);
  }

  /* The height cap arrives inline as --logo-h rather than as max-height
     itself, so these rules can collapse it per state without !important */
  .header-logo img {
    display: block;
    width: auto;
    max-height: var(--logo-h, none);
  }

  /* Two logos, one slot: stack them in the same grid cell and cross-fade,
     rather than swapping one for the other in a single frame. Collapsing the
     outgoing logo's height cap as it fades lets the bar's height come along
     with it, instead of staying as tall as the larger of the two. */
  .header-logo:has(.header-logo--floating) {
    display: grid;
    align-items: center;
    justify-items: start;
  }

  .header-logo:has(.header-logo--floating) > a {
    grid-area: 1 / 1;
  }

  .header-logo:has(.header-logo--floating) > a > img {
    transition: max-height var(--duration-slow) ease;
  }

  .header-logo a.header-logo--floating { opacity: 0; visibility: hidden; }
  .header-logo a.header-logo--floating img { max-height: 0; }

  .header--scrolled .header-logo a.header-logo--resting { opacity: 0; visibility: hidden; }
  .header--scrolled .header-logo a.header-logo--resting img { max-height: 0; }
  .header--scrolled .header-logo a.header-logo--floating { opacity: 1; visibility: visible; }
  .header--scrolled .header-logo a.header-logo--floating img { max-height: var(--logo-h, none); }

  /* Header HR: hidden on transparent, shown after scroll */
  .header-hr--transparent {
    opacity: 0;
    transition: opacity var(--duration-slow) ease;
  }

  [data-sticky-transparent].header--scrolled .header-hr--transparent {
    opacity: 1;
  }

  /* CTA button: revert from outline-white to primary on scroll */
  [data-sticky-transparent].header--scrolled .btn--outline-white {
    border-color: var(--color-brand-accent);
    background-color: var(--color-brand-accent);
    color: var(--btn-text, #fff);
  }

  /* Dark header bg: keep white text when scrolled */
  [data-sticky-transparent].header--scrolled.header--dark .nav-link {
    color: rgba(255, 255, 255, 0.65);
  }
  [data-sticky-transparent].header--scrolled.header--dark .nav-link:hover,
  [data-sticky-transparent].header--scrolled.header--dark .nav-link-active,
  [data-sticky-transparent].header--scrolled.header--dark .site-title-link {
    color: #fff;
  }

  .header--dark .site-title-link,
  .header--transparent .site-title-link {
    color: #fff;
  }

  /* Nav link component */
  .nav-link {
    position: relative;
    padding: 0.375rem 0;
    font-size: var(--nav-font-size, 0.9375rem);
    letter-spacing: calc(0.01em + var(--ui-caps-spacing, 0em));
    color: color-mix(in srgb, var(--color-brand-dark) 70%, transparent);
    transition: color var(--duration-normal) ease;
    text-transform: var(--ui-transform, none);
  }

  .nav-link:hover {
    color: var(--color-brand-dark);
  }

  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    height: 2px;
    width: 0;
    background-color: var(--color-brand-accent);
    transition: width var(--duration-normal) ease, left var(--duration-normal) ease;
  }

  .nav-link:hover::after { width: 100%; left: 0; }

  .nav-link-active {
    position: relative;
    padding: 0.375rem 0;
    font-size: var(--nav-font-size, 0.9375rem);
    color: var(--color-brand-dark);
    font-weight: 500;
  }

  .nav-link-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--color-brand-accent);
  }

  .header--dark .nav-link,
  .header--transparent .nav-link {
    color: rgba(255, 255, 255, 0.65);
  }

  .header--dark .nav-link:hover,
  .header--transparent .nav-link:hover {
    color: #fff;
  }

  .header--dark .nav-link::after {
    background-color: #fff;
  }

  .header--dark .nav-link-active,
  .header--transparent .nav-link-active {
    color: #fff;
  }

  /* Nav button style — replaces underline with background highlight */
  .nav-style--button .nav-link {
    padding: 0.4rem 1rem;
    border-radius: var(--btn-radius, 0.5rem);
    display: inline-flex;
    align-items: center;
    transition: background-color var(--duration-normal) ease;
  }

  .nav-style--button .nav-link::after {
    display: none;
  }

  .nav-style--button .nav-link:hover {
    background-color: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
  }

  .nav-style--button .nav-link-active {
    padding: 0.4rem 1rem;
    border-radius: var(--btn-radius, 0.5rem);
    display: inline-flex;
    align-items: center;
    background-color: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  }

  .nav-style--button .nav-link-active::after {
    display: none;
  }

  .nav-style--button.header--dark .nav-link:hover,
  .nav-style--button.header--transparent .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .nav-style--button.header--dark .nav-link-active,
  .nav-style--button.header--transparent .nav-link-active {
    background-color: rgba(255, 255, 255, 0.15);
  }

  /* Nav dropdown menus */
  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown > .nav-link,
  .nav-dropdown > .nav-link-active {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
  }

  .nav-dropdown-arrow {
    flex-shrink: 0;
    transition: transform var(--duration-normal) ease;
  }

  .nav-dropdown.is-open > .nav-link .nav-dropdown-arrow,
  .nav-dropdown.is-open > .nav-link-active .nav-dropdown-arrow {
    transform: rotate(180deg);
  }

  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    min-width: 12rem;
    padding: 0.5rem 0;
    background: #fff;
    border-radius: min(var(--btn-radius, 0.5rem), 0.5rem);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease;
    z-index: 50;
    white-space: nowrap;
    margin-top: 0.5rem;
  }

  .nav-dropdown.is-open > .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
  }

  .nav-dropdown-link {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: var(--nav-font-size, 0.9375rem);
    color: color-mix(in srgb, var(--color-brand-dark) 70%, transparent);
    border-left: 2px solid transparent;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }

  .nav-dropdown-link:hover {
    color: var(--color-brand-accent-text, var(--color-brand-accent));
    background-color: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
    border-left-color: var(--color-brand-accent);
  }

  .nav-dropdown-link-active {
    color: var(--color-brand-accent-text, var(--color-brand-accent));
    font-weight: 500;
    border-left-color: var(--color-brand-accent);
  }

  /* Dark / transparent header dropdown — still uses white card */
  .header--dark .nav-dropdown-menu,
  .header--transparent .nav-dropdown-menu {
    background: #fff;
  }

  .header--dark .nav-dropdown-link,
  .header--transparent .nav-dropdown-link {
    color: color-mix(in srgb, var(--color-brand-dark) 70%, transparent);
  }

  .header--dark .nav-dropdown-link:hover,
  .header--transparent .nav-dropdown-link:hover {
    color: var(--color-brand-accent-text, var(--color-brand-accent));
    background-color: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
    border-left-color: var(--color-brand-accent);
  }

  .header--dark .nav-dropdown-link-active,
  .header--transparent .nav-dropdown-link-active {
    color: var(--color-brand-accent-text, var(--color-brand-accent));
    border-left-color: var(--color-brand-accent);
  }

  /* Inverted dropdown — accent background, white text */
  .nav-dropdown-menu--inverted,
  .header--dark .nav-dropdown-menu--inverted,
  .header--transparent .nav-dropdown-menu--inverted {
    background: var(--color-brand-accent);
  }

  .nav-dropdown-menu--inverted .nav-dropdown-link,
  .header--dark .nav-dropdown-menu--inverted .nav-dropdown-link,
  .header--transparent .nav-dropdown-menu--inverted .nav-dropdown-link {
    color: rgba(255, 255, 255, 0.75);
    border-left-color: transparent;
  }

  .nav-dropdown-menu--inverted .nav-dropdown-link:hover,
  .header--dark .nav-dropdown-menu--inverted .nav-dropdown-link:hover,
  .header--transparent .nav-dropdown-menu--inverted .nav-dropdown-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-left-color: #fff;
  }

  .nav-dropdown-menu--inverted .nav-dropdown-link-active,
  .header--dark .nav-dropdown-menu--inverted .nav-dropdown-link-active,
  .header--transparent .nav-dropdown-menu--inverted .nav-dropdown-link-active {
    color: #fff;
    font-weight: 500;
    border-left-color: #fff;
  }

  /* Hide dropdowns on mobile — child pages shown inline in drawer */
  @media (max-width: 767px) {
    .nav-dropdown-menu {
      display: none !important;
    }
  }

  /* Centred nav layout — 3-column grid: logo | nav | CTA */
  @media (min-width: 768px) {
    .nav-layout--centred nav > div:first-child {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    .nav-layout--centred .header-nav {
      justify-content: center !important;
    }

    .nav-layout--centred .header-cta {
      justify-content: flex-end !important;
    }
  }

  /* Nav wrapping: when items overflow, centre everything and tighten spacing */
  @media (min-width: 768px) {
    .header-nav {
      flex: 1 1 auto;
      min-width: 0;
    }

    .header-nav ul {
      justify-content: flex-end;
    }
  }

  /* When nav has wrapped (detected via JS .nav-wrapped class) */
  .nav-wrapped {
    justify-content: center !important;
    gap: 0 !important;
    padding-block: 0.75rem !important;
  }

  .nav-wrapped .header-logo {
    flex-basis: 100%;
    text-align: center;
    padding-bottom: 0.35rem;
  }

  .nav-wrapped .header-nav {
    flex-basis: 100%;
    justify-content: center !important;
  }

  .nav-wrapped .header-nav ul {
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
  }

  .nav-wrapped .btn--sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Extra spacing between nav links and inline CTA button */
  .header-nav > .btn { margin-left: 0.5rem; }

  /* Drawer component */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: color-mix(in srgb, #000 50%, transparent);
    z-index: 40;
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
  }

  .drawer-backdrop.is-open { opacity: 1; }

  .drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 18rem;
    background-color: var(--color-brand-dark);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100dvh;
    transform: translateX(100%);
    transition: transform var(--duration-slow) ease;
  }

  .drawer.is-open { transform: translateX(0); }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }

  .drawer-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
  }

  .drawer-close {
    padding: 0.5rem;
    border: none;
    border-radius: var(--radius-md);
    color: color-mix(in srgb, #fff 60%, transparent);
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }

  .drawer-close:hover {
    color: #fff;
    background-color: color-mix(in srgb, #fff 10%, transparent);
  }

  .drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.25rem;
  }

  .drawer-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 1.125rem;
    color: color-mix(in srgb, #fff 80%, transparent);
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
    border-radius: var(--radius-md);
  }

  .drawer-link:hover {
    color: #fff;
    background-color: color-mix(in srgb, #fff 10%, transparent);
  }

  .drawer-link-active {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 1.125rem;
    color: #fff;
    font-weight: 600;
    border-left: 3px solid var(--color-brand-accent);
    padding-left: calc(0.75rem - 3px);
    border-radius: 0;
  }

  .drawer-social {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
  }

  .drawer-social-links {
    display: flex;
    gap: 0.75rem;
  }

  .drawer-social-link {
    color: color-mix(in srgb, #fff 60%, transparent);
    transition: color var(--duration-fast) ease;
    padding: 0.375rem;
  }

  .drawer-social-link:hover { color: #fff; }

  .drawer-social-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Drawer child page sub-nav */
  .drawer-subnav {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    gap: 0;
  }

  .drawer-sublink {
    font-size: 1rem !important;
    color: color-mix(in srgb, #fff 60%, transparent) !important;
  }

  .drawer-sublink:hover {
    color: color-mix(in srgb, #fff 80%, transparent) !important;
  }

  .hamburger {
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -0.5rem;
  }

  .hamburger-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hamburger:hover {
    color: var(--color-brand-dark);
    background-color: var(--color-gray-100);
  }

  .header--dark .hamburger,
  .header--transparent .hamburger {
    color: color-mix(in srgb, #fff 80%, transparent);
  }

  .header--dark .hamburger:hover,
  .header--transparent .hamburger:hover {
    color: #fff;
    background-color: color-mix(in srgb, #fff 10%, transparent);
  }

  /* Always-visible mobile nav */
  .mobile-nav-visible .header-nav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mobile-nav-visible .header-nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .mobile-nav-visible .hamburger,
  .mobile-nav-visible .drawer-backdrop,
  .mobile-nav-visible .drawer {
    display: none !important;
  }

  .mobile-nav-visible .header-cta {
    display: flex !important;
  }

  @media (max-width: 767px) {
    .mobile-nav-visible.header--sticky {
      position: relative;
    }
  }

  /* Centre and enlarge logo when navigation is hidden (single-page mode) */
  header.header--nav-hidden nav > div:first-child {
    justify-content: center !important;
  }

  header.header--nav-hidden .header-logo {
    text-align: center;
  }

  header.header--nav-hidden .site-title-link {
    font-size: 1.5em;
  }

  /* Footer component */
  .footer {
    position: relative;
    color: #fff;
    margin-top: auto;
    background-color: var(--footer-bg, var(--color-dark-bg, var(--color-brand-dark)));
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 3rem;
  }

  @media (min-width: 768px) {
    .footer-grid {
      /* Only as many columns as have content — an empty column is what makes
         a short footer look broken rather than simply short */
      grid-template-columns: repeat(var(--footer-cols, 3), minmax(0, 1fr));
    }

    /* With two columns the first carries the logo, the blurb and the contact
       details, so give it the greater share */
    .footer-grid[style*="--footer-cols: 2"] {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
  }

  .footer-text {
    margin-top: 1rem;
    /* Short lines want tighter leading than long ones, and a condensed face
       makes the same line-height read looser still. 1.6 over a 42ch measure
       left the lines floating apart. */
    max-width: 48ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: color-mix(in srgb, #fff 70%, transparent);
  }

  .footer-text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
  }

  .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: color-mix(in srgb, #fff 70%, transparent);
  }

  .footer-contact-link {
    color: #fff;
    transition: color var(--duration-fast) ease;
  }

  .footer-contact-link:hover { text-decoration: underline; }

  .footer-nav-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: color-mix(in srgb, #fff 80%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
  }

  .footer-nav-link {
    color: #fff;
    font-size: 0.875rem;
    transition: color var(--duration-fast) ease;
  }

  .footer-nav-link:hover { text-decoration: underline; }

  .footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .footer-social-link {
    color: color-mix(in srgb, #fff 70%, transparent);
    transition: color var(--duration-fast) ease;
  }

  .footer-social-link:hover { color: #fff; }

  .footer-social-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .footer-divider {
    height: 1px;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-brand-accent) 30%,
      var(--color-brand-accent) 70%,
      transparent
    );
  }

  .footer-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, #fff 65%, transparent);
    padding-bottom: 2rem;
  }

  .footer-copyright-link {
    color: color-mix(in srgb, #fff 75%, transparent);
    transition: color var(--duration-fast) ease;
  }

  .footer-copyright-link:hover {
    color: #fff;
  }

  .footer-copyright-link:hover { text-decoration: underline; }

  /* Footer site title (text fallback when no logo) */
  .footer-site-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
  }

  /* Blog card component */
  .blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-brand-dark) 12%, transparent);
    background-color: color-mix(in srgb, var(--color-brand-accent) 3%, var(--color-block-bg, #fff));
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    box-shadow: var(--card-shadow);
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
  }

  .blog-card:hover {
    border-color: color-mix(in srgb, var(--color-brand-accent) 35%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand-dark) 8%, transparent);
  }

  .dark-default-bg .blog-card {
    color: rgba(255, 255, 255, 0.75);
    border-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
    background-color: color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-brand-dark));
  }

  .dark-default-bg .blog-card:hover {
    background-color: color-mix(in srgb, var(--color-brand-accent) 12%, var(--color-brand-dark));
    border-color: color-mix(in srgb, var(--color-brand-accent) 40%, transparent);
  }

  .blog-card-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }

  .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) ease;
  }

  .blog-card:hover .blog-card-image img {
    transform: scale(1.05);
  }

  .blog-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-brand-accent) 20%, transparent),
      color-mix(in srgb, var(--color-brand-accent) 40%, transparent),
      color-mix(in srgb, var(--color-brand-dark) 30%, transparent)
    );
  }

  .blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .blog-card-date {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
  }

  .blog-card-title {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
    color: var(--color-brand-dark);
    transition: color var(--duration-fast) ease;
    line-height: 1.25;
  }

  @media (min-width: 768px) {
    .blog-card-title {
      font-size: 1.375rem;
    }
  }

  .dark-default-bg .blog-card-title {
    color: #fff;
  }

  .blog-card-summary {
    font-size: 0.875rem;
    line-height: 1.6;
    flex: 1;
  }

  .blog-card-cta {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent-text, var(--color-brand-accent));
    transition: color var(--duration-fast) ease;
    text-transform: var(--ui-transform, none);
    letter-spacing: var(--ui-caps-spacing, 0em);
  }

  .blog-card:hover .blog-card-cta {
    color: var(--color-brand-accent-hover);
  }

  .blog-card:hover .blog-card-cta .subpage-card-arrow {
    transform: translateX(4px);
  }

  /* Blog listing grid */
  .blog-listing {
    max-width: var(--container-max, 72rem);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  @media (min-width: 768px) {
    .blog-listing { padding-inline: 2.5rem; padding-bottom: 4rem; }
  }

  @media (min-width: 1024px) {
    .blog-listing { padding-inline: 3rem; }
  }

  .blog-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .blog-card-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1024px) {
    .blog-card-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* A lone card in a multi-column grid leaves two empty columns beside it and
     reads as a layout that failed rather than a section with one item in it.
     On its own it spans the grid and turns side-on, which is the shape a
     featured item wants anyway. Keyed off :only-child so it applies wherever
     these cards are used, with no count passed through from PHP. */
  .blog-card-grid > .blog-card:only-child,
  .latest-articles-grid > .blog-card:only-child,
  .events-card-grid > .event-card:only-child,
  .upcoming-events-grid > .event-card:only-child {
    grid-column: 1 / -1;
  }

  @media (min-width: 768px) {
    .blog-card-grid > .blog-card:only-child,
    .latest-articles-grid > .blog-card:only-child,
    .events-card-grid > .event-card:only-child,
    .upcoming-events-grid > .event-card:only-child {
      flex-direction: row;
      align-items: stretch;
    }

    .blog-card-grid > .blog-card:only-child > .blog-card-image,
    .latest-articles-grid > .blog-card:only-child > .blog-card-image,
    .events-card-grid > .event-card:only-child > .event-card-image,
    .upcoming-events-grid > .event-card:only-child > .event-card-image {
      flex: 0 0 42%;
      /* Let the image take its height from the text beside it rather than
         holding a 16:10 box of its own */
      aspect-ratio: auto;
      min-height: 16rem;
    }

    .blog-card-grid > .blog-card:only-child > .blog-card-body,
    .latest-articles-grid > .blog-card:only-child > .blog-card-body,
    .events-card-grid > .event-card:only-child > .event-card-body,
    .upcoming-events-grid > .event-card:only-child > .event-card-body {
      justify-content: center;
      padding: 2rem 2.5rem;
    }
  }

  /* Latest articles block grid */
  .latest-articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .latest-articles-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .latest-articles-grid {
      grid-template-columns: repeat(var(--article-cols, 3), 1fr);
    }
  }

  .latest-articles-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .latest-articles-viewall {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) ease;
  }

  .latest-articles-viewall:hover {
    color: var(--color-brand-accent-hover, var(--color-brand-accent));
    text-decoration: underline;
  }

  /* Article meta bar (date + tags) */
  .article-meta {
    color: color-mix(in srgb, var(--color-brand-dark) 25%, #6b7280);
  }

  .dark-default-bg .article-meta,
  .text-white .article-meta {
    color: rgba(255, 255, 255, 0.6);
  }

  .article-meta-tag {
    background-color: #f3f4f6;
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
  }

  .article-meta-tag:hover {
    background-color: #e5e7eb;
  }

  .dark-default-bg .article-meta-tag,
  .text-white .article-meta-tag {
    background-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
  }

  .dark-default-bg .article-meta-tag:hover,
  .text-white .article-meta-tag:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* Article header — split (50/50) layout */
  .article-header--split {
    background-color: var(--color-bg-alt, #f8f9fa);
  }

  .article-header-split {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 768px) {
    .article-header-split {
      flex-direction: row;
      align-items: stretch;
      max-height: 30rem;
    }
  }

  .article-header-split-text {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
  }

  .article-header-split-text h1 {
    margin-bottom: 0.25rem;
  }

  @media (min-width: 768px) {
    .article-header-split-text {
      flex: 0 0 50%;
      max-width: 50%;
      padding: 1.5rem clamp(2rem, 5vw, 4rem);
    }
  }

  @media (min-width: 1200px) {
    .article-header-split-text {
      padding-left: max(calc((100vw - 80rem) / 2 + 2rem), 3rem);
    }
  }

  .article-header-split-date {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--color-brand-dark) 60%, transparent);
  }

  .article-header-split-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .article-header-split-tags .article-meta-tag {
    background-color: #fff;
  }

  .article-header-split-tags .article-meta-tag:hover {
    background-color: #e5e7eb;
  }

  .article-header-split-image {
    min-height: 14rem;
  }

  @media (min-width: 768px) {
    .article-header-split-image {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  .article-header-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Blog header content (H1 + tags) */
  .blog-header-content {
    max-width: var(--container-max, 72rem);
    margin-inline: auto;
    padding-inline: 1.5rem;
  }

  @media (min-width: 768px) {
    .blog-header-content { padding-inline: 2.5rem; }
  }

  @media (min-width: 1024px) {
    .blog-header-content { padding-inline: 3rem; }
  }

  /* Blog page heading */
  .blog-page-heading {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-bottom: 0;
    color: var(--color-brand-dark);
  }

  @media (min-width: 768px) {
    .blog-page-heading { font-size: 3rem; line-height: 1; }
  }

  /* Intro/body blocks wrapper (between page header and listing) */
  .blog-blocks .block-section.block-pad {
    padding-block: 1.5rem;
  }

  @media (min-width: 768px) {
    .blog-blocks .block-section.block-pad {
      padding-block: 2rem;
    }
  }

  /* Reduce top padding on listing when intro blocks precede it (blocks provide their own bottom padding) */
  .blog-blocks + .blog-listing,
  .blog-blocks + .events-listing {
    padding-top: 1rem;
  }

  @media (min-width: 768px) {
    .blog-blocks + .blog-listing,
    .blog-blocks + .events-listing {
      padding-top: 2rem;
    }
  }

  /* Blog tag filter row */
  .blog-tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  /* Blog block section padding */
  .blog-block-section {
    padding-block: 3rem;
  }

  @media (min-width: 768px) {
    .blog-block-section { padding-block: 4rem; }
  }

  /* Blog pagination */
  .blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 3rem;
  }

  .blog-pagination a,
  .blog-pagination span {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  }

  .blog-pagination a {
    color: var(--color-brand-dark);
  }

  .blog-pagination a:hover {
    background-color: var(--color-gray-100);
  }

  /* ===================== Events ===================== */

  /* Event card */
  .event-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-brand-dark) 12%, transparent);
    background-color: color-mix(in srgb, var(--color-brand-accent) 3%, var(--color-block-bg, #fff));
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    box-shadow: var(--card-shadow);
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
  }

  .event-card:hover {
    border-color: color-mix(in srgb, var(--color-brand-accent) 35%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand-dark) 8%, transparent);
  }

  .dark-default-bg .event-card {
    color: rgba(255, 255, 255, 0.75);
    border-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
    background-color: color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-brand-dark));
  }

  .dark-default-bg .event-card:hover {
    background-color: color-mix(in srgb, var(--color-brand-accent) 12%, var(--color-brand-dark));
    border-color: color-mix(in srgb, var(--color-brand-accent) 40%, transparent);
  }

  .event-card--past {
    opacity: 0.65;
  }

  .event-card--past:hover {
    opacity: 1;
  }

  .event-card-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    position: relative;
  }

  .event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) ease;
  }

  .event-card:hover .event-card-image img {
    transform: scale(1.05);
  }

  .event-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-brand-accent) 20%, transparent),
      color-mix(in srgb, var(--color-brand-accent) 40%, transparent),
      color-mix(in srgb, var(--color-brand-dark) 30%, transparent)
    );
  }

  .event-card-date-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: min(var(--btn-radius, 0.5rem), 0.5rem);
    background-color: var(--color-brand-accent);
    color: var(--btn-text, #fff);
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  .event-card-date-day {
    font-size: 1.25rem;
  }

  .event-card-date-month {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
  }

  .event-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .event-card-date {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .event-card-time::before {
    content: "\00b7";
    margin-right: 0.25rem;
  }

  .event-card-title {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    color: var(--color-brand-dark);
    transition: color var(--duration-fast) ease;
    line-height: 1.25;
  }

  @media (min-width: 768px) {
    .event-card-title {
      font-size: 1.375rem;
    }
  }

  .dark-default-bg .event-card-title {
    color: #fff;
  }

  .event-card-location {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
  }

  .event-card-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
  }

  .event-card-summary {
    font-size: 0.875rem;
    line-height: 1.6;
    flex: 1;
  }

  .event-card-cta {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent-text, var(--color-brand-accent));
    transition: color var(--duration-fast) ease;
  }

  .event-card:hover .event-card-cta {
    color: var(--color-brand-accent-hover);
  }

  .event-card:hover .event-card-cta .subpage-card-arrow {
    transform: translateX(4px);
  }

  /* Events listing page */
  .events-header-content {
    max-width: var(--container-max, 72rem);
    margin-inline: auto;
    padding-inline: 1.5rem;
  }

  @media (min-width: 768px) {
    .events-header-content { padding-inline: 2.5rem; }
  }

  @media (min-width: 1024px) {
    .events-header-content { padding-inline: 3rem; }
  }

  .events-listing {
    max-width: var(--container-max, 72rem);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  @media (min-width: 768px) {
    .events-listing { padding-inline: 2.5rem; padding-top: 4rem; padding-bottom: 4rem; }
  }

  @media (min-width: 1024px) {
    .events-listing { padding-inline: 3rem; }
  }

  .events-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .events-card-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1024px) {
    .events-card-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .events-empty {
    text-align: center;
    padding: 3rem 1rem;
    opacity: 0.6;
    font-size: 1.125rem;
  }

  .events-past-section {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--color-brand-dark) 15%, transparent);
  }

  .events-past-heading {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-brand-dark);
    font-weight: var(--heading-weight, 700);
    text-transform: var(--heading-transform, none);
  }

  /* Upcoming events block grid */
  .upcoming-events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .upcoming-events-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .upcoming-events-grid {
      grid-template-columns: repeat(var(--event-cols, 3), 1fr);
    }
  }

  .upcoming-events-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .upcoming-events-viewall {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) ease;
  }

  .upcoming-events-viewall:hover {
    color: var(--color-brand-accent-hover, var(--color-brand-accent));
    text-decoration: underline;
  }

  .block-section.text-white .upcoming-events-viewall {
    color: rgba(255, 255, 255, 0.85);
  }

  .block-section.text-white .upcoming-events-viewall:hover {
    color: #fff;
  }

  /* Event detail page */
  .event-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    font-size: 0.9375rem;
  }

  .event-detail-meta p {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
  }

  .event-detail-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.6;
  }

  .event-detail-bar {
    background-color: color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-block-bg, #fff));
  }

  .event-detail-bar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }

  .event-detail-location a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .event-detail-location a:hover {
    color: var(--color-accent-text, var(--color-brand-accent));
  }

  .event-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--btn-radius, 0.5rem);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: opacity var(--duration-fast) ease;
  }

  .event-detail-link:hover {
    opacity: 0.9;
  }

  /* Breadcrumbs component */
  .breadcrumbs {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
  }

  .breadcrumbs-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    letter-spacing: 0.025em;
    line-height: 1;
    color: color-mix(in srgb, var(--color-brand-dark) 65%, black);
    list-style: none;
    background: color-mix(in srgb, var(--color-brand-dark) 8%, transparent);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
  }

  .breadcrumbs-list li {
    display: flex;
    align-items: center;
  }

  .breadcrumbs-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) ease;
  }

  .breadcrumbs-link:hover {
    color: var(--color-brand-accent);
  }

  .breadcrumbs-separator {
    display: flex;
    align-items: center;
    color: color-mix(in srgb, var(--color-brand-dark) 50%, black);
    line-height: 1;
  }

  .breadcrumbs-separator svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* Breadcrumbs on dark/white-text backgrounds */
  .text-white .breadcrumbs-list {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.12);
  }

  .text-white .breadcrumbs-link:hover {
    color: #fff;
  }

  .text-white .breadcrumbs-separator {
    color: rgba(255, 255, 255, 0.3);
  }

  .breadcrumbs-home-icon {
    display: inline-flex;
    align-items: center;
  }

  .breadcrumbs-home-icon svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  /* Textimage component */
  .textimage {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  @media (min-width: 768px) {
    .textimage {
      flex-direction: row;
      gap: 3rem;
    }

    .textimage--reversed {
      flex-direction: row-reverse;
    }

    .textimage--stretch {
      align-items: stretch;
    }
  }

  .textimage-image {
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
  }

  .textimage-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  .textimage--stretch .textimage-image {
    position: relative;
    min-height: 16rem;
  }

  @media (max-width: 767px) {
    .textimage--stretch .textimage-image {
      width: 100%;
    }
  }

  .textimage--stretch .textimage-image picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .textimage--stretch .textimage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (min-width: 768px) {
    .textimage-image { width: 50%; }
    .textimage-content { width: 50%; }
  }

  .textimage--fullwidth .textimage-image,
  .textimage--fullwidth .textimage-lightbox-wrap,
  .textimage--fullwidth .textimage-lightbox-trigger {
    border-radius: 0;
    box-shadow: none;
  }

  .textimage--fullwidth .textimage-image {
    min-height: 16rem;
  }

  /* The flex gap separates the image and text when they are two boxes side by
     side. A full-width image has no edge to hold off from, and the text
     column brings its own padding, so the two were stacking into 72px of
     space where 40px was intended. Desktop already zeroes the gap here; this
     does the same while the columns are stacked. */
  .textimage--fullwidth {
    gap: 0;
  }

  /* Below 768px the columns stack and the image goes full-bleed, which is the
     point — but the text was going full-bleed with it, running to both edges
     and straight into the next section. Only the desktop rules had padding. */
  .textimage--fullwidth .textimage-content {
    padding-block: 2.5rem;
    padding-inline: clamp(1.5rem, 5vw, 2.5rem);
  }

  .textimage--fullwidth .textimage-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  @media (min-width: 768px) {
    .textimage--fullwidth {
      gap: 0;
      align-items: stretch;
    }

    .textimage--fullwidth .textimage-image {
      flex: 0 0 50%;
      max-width: 50%;
      min-height: 0;
    }

    /* Automatic (cover): image fills text-dictated height */
    .textimage--fullwidth.textimage--stretch .textimage-image {
      position: relative;
    }

    .textimage--fullwidth.textimage--stretch .textimage-image picture {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .textimage--fullwidth.textimage--stretch .textimage-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Landscape / Portrait / Original: image aspect dictates height */
    .textimage--fullwidth:not(.textimage--stretch) {
      align-items: center;
    }

    .textimage--fullwidth:not(.textimage--stretch) .textimage-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    .textimage--fullwidth .textimage-content {
      flex: 0 0 50%;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: calc(4rem * var(--block-padding-scale, 1)) clamp(2rem, 4vw, 4rem);
    }

    /* Image left (default): text on right — align to right container edge */
    .textimage--fullwidth:not(.textimage--reversed) .textimage-content {
      padding-right: max(calc((100vw - 56rem) / 2), 2rem);
    }

    /* Image right (reversed): text on left — align to left container edge */
    .textimage--fullwidth.textimage--reversed .textimage-content {
      padding-left: max(calc((100vw - 56rem) / 2), 2rem);
    }
  }

  .block-section:has(.textimage--fullwidth) {
    --block-padding: 0px;
  }

  .block-section.has-edge:has(.textimage--fullwidth) {
    padding-bottom: var(--edge-height, 42px) !important;
  }

  .has-edge .textimage--fullwidth.full-bleed {
    margin-bottom: calc(var(--edge-height, 42px) * -1);
    padding-bottom: var(--edge-height, 42px);
  }

  .textimage-heading {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    font-size: calc(var(--h2-size, 30px) * var(--heading-ratio, 0.8));
    line-height: 1.25;
    margin-bottom: 1rem;
    text-transform: var(--heading-transform, none);
  }

  @media (min-width: 768px) {
    .textimage-heading { font-size: var(--h2-size, 1.875rem); line-height: 1.2; }
  }

  .textimage-lightbox-wrap {
    width: 100%;
    height: 100%;
  }

  .textimage-lightbox-trigger {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
  }

  .textimage-lightbox-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) ease;
  }

  .textimage-lightbox-trigger:hover img {
    transform: scale(1.05);
  }

  /* Video embed */
  .video-embed {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
  }

  .video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* Map embed */
  .map-embed {
    width: 100%;
    min-height: 400px;
    overflow: hidden;
  }

  .map-embed iframe {
    width: 100%;
    border: 0;
    display: block;
  }

  /* CTA component */
  .cta-card {
    position: relative;
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 2.5rem;
    text-align: center;
    border-radius: var(--btn-radius, 0.5rem);
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .cta-card { padding-inline: 2.5rem; }
  }

  .cta-heading {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    font-size: calc(var(--h2-size, 30px) * var(--heading-ratio, 0.8));
    line-height: 1.2;
    margin-bottom: 1rem;
    text-transform: var(--heading-transform, none);
  }

  @media (min-width: 768px) {
    .cta-heading { font-size: var(--h2-size, 2.25rem); line-height: 1.2; }
  }

  .cta-text {
    font-size: 1.125rem;
    line-height: 1.55;
    margin-bottom: 2rem;
    max-width: 42rem;
    margin-inline: auto;
  }

  /* CTA buttons — outline-white stays as white outline on all CTA backgrounds */

  /* CTA banner variant */
  .cta-banner {
    position: relative;
    padding-block: calc(4rem * var(--block-padding-scale, 1));
    text-align: center;
  }

  @media (min-width: 768px) {
    .cta-banner { padding-block: calc(6rem * var(--block-padding-scale, 1)); }
  }

  /* Image block */
  .img-block {
    width: 100%;
  }

  .img-block--small {
    max-width: 50%;
    margin-inline: auto;
  }

  .img-caption {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-top: 0.5rem;
    padding-inline: 1rem;
  }

  @media (min-width: 768px) {
    .img-caption { padding-inline: 2rem; }
  }

  .service-card-subtext {
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
    max-width: 40rem;
    margin-inline: auto;
  }

  .block-section.text-white .service-card-subtext {
    color: rgba(255, 255, 255, 0.85);
  }

  .block-section.text-white :not(.service-card) > .service-card-body {
    color: rgba(255, 255, 255, 0.85);
  }

  .block-section.text-white .service-card--filled .service-card-body {
    color: rgba(255, 255, 255, 0.85);
  }

  .block-section.text-white :not(.service-card) > .service-card-link {
    color: #fff;
  }

  .service-card-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1.25rem;
    color: color-mix(in srgb, var(--color-brand-dark) 40%, #374151);
  }

  .service-card-body:last-child {
    margin-bottom: 0;
  }

  .service-card--filled .service-card-body {
    color: rgba(255, 255, 255, 0.8);
  }

  /* Service card text size variants */
  .service-card--text-sm h3 {
    font-size: 1rem;
  }

  .service-card--text-sm .service-card-body {
    font-size: 0.8125rem;
  }

  .service-card--text-lg h3 {
    font-size: 1.25rem;
  }

  .service-card--text-lg .service-card-body {
    font-size: 1rem;
  }

  /* Writer-field link styles for non-prose contexts */
  .service-card-body a,
  .service-card-subtext a,
  .cta-text a {
    color: var(--color-accent-text, var(--color-brand-accent));
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-accent-text, var(--color-brand-accent)) 30%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--duration-fast) ease, color var(--duration-fast) ease;
  }

  .service-card-body a:hover,
  .service-card-subtext a:hover,
  .cta-text a:hover {
    text-decoration-color: currentColor;
    color: var(--color-brand-dark);
  }

  /* Dark/filled context link overrides */
  .service-card--filled .service-card-body a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.4);
  }

  .service-card--filled .service-card-body a:hover {
    text-decoration-color: #fff;
  }

  .block-section.text-white .service-card-subtext a,
  .block-section.text-white .cta-text a,
  .block-section.text-white :not(.service-card) > .service-card-body a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.4);
  }

  .block-section.text-white .service-card-subtext a:hover,
  .block-section.text-white .cta-text a:hover,
  .block-section.text-white :not(.service-card) > .service-card-body a:hover {
    color: #fff;
    text-decoration-color: #fff;
  }

  /* Paragraph spacing for writer fields outside .prose */
  .service-card-body p,
  .service-card-subtext p,
  .cta-text p,
  .hero-subtext p,
  .silk-writer p {
    margin-bottom: 0.75em;
  }

  .service-card-body p:last-child,
  .service-card-subtext p:last-child,
  .cta-text p:last-child,
  .hero-subtext p:last-child,
  .silk-writer p:last-child {
    margin-bottom: 0;
  }

  /* Linked service cards: stretch the link over the whole card */
  .service-card--linked {
    position: relative;
    cursor: pointer;
  }

  .service-card--linked .service-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* Service card hover on linked cards */

  .service-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--color-brand-accent);
    background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
  }

  .service-card-icon > svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: currentColor;
  }

  .service-card--filled .service-card-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
  }

  /* Bordered cards on dark bg: icon keeps accent colour against light card bg */
  .block-section.text-white .service-card:not(.service-card--filled) .service-card-icon {
    color: var(--color-brand-accent);
    background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
  }

  /* Minimal cards on dark bg: icon needs light colour since there's no card bg */
  .block-section.text-white .services-grid > :not(.service-card) > .service-card-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  /* Service card link label */
  .service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color var(--duration-fast) ease;
    margin-top: auto;
    color: var(--color-accent-text, var(--color-brand-accent));
    text-decoration: none;
    text-transform: var(--ui-transform, none);
    letter-spacing: var(--ui-caps-spacing, 0em);
  }

  .service-card--filled .service-card-link {
    color: #fff;
  }

  .service-card--filled .service-card-link:hover {
    color: rgba(255, 255, 255, 0.8);
  }

  .service-card:not(.service-card--filled) .service-card-link:hover {
    color: var(--color-brand-accent-hover);
  }

  /* Testimonials component */
  .testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .testimonial-card {
    background: var(--color-bg-alt, #f9fafb);
    border-radius: 1rem;
    padding: 2.5rem;
    margin: 0;
    overflow: hidden;
  }

  .testimonial-card--has-image {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .testimonial-image {
    aspect-ratio: 4/3;
    overflow: hidden;
  }

  .testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .testimonial-card--has-image .testimonial-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  @media (min-width: 768px) {
    .testimonial-card--has-image {
      flex-direction: row;
    }

    .testimonial-image {
      flex: 0 0 40%;
      max-width: 40%;
      aspect-ratio: auto;
    }

    .testimonial-card--reversed {
      flex-direction: row-reverse;
    }

    .testimonial-card--has-image .testimonial-body {
      flex: 1;
      padding: 2.5rem;
    }
  }

  .testimonial-quote {
    margin-bottom: 1.5rem;
  }

  .testimonial-quote-icon {
    color: var(--color-brand-accent);
    opacity: 0.3;
    margin-bottom: 0.75rem;
  }

  .testimonial-quote-text {
    font-size: 1.125rem;
    line-height: 1.75;
  }

  .testimonial-quote-text a {
    color: var(--color-accent-text, var(--color-brand-accent));
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-accent-text, var(--color-brand-accent)) 30%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--duration-fast) ease, color var(--duration-fast) ease;
  }

  .testimonial-quote-text a:hover {
    text-decoration-color: currentColor;
    color: var(--color-brand-dark);
  }

  .text-white .testimonial-quote-text a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.4);
  }

  .text-white .testimonial-quote-text a:hover {
    color: #fff;
    text-decoration-color: #fff;
  }

  .testimonial-quote-text p {
    margin-bottom: 0.75em;
  }

  .testimonial-quote-text p:last-child {
    margin-bottom: 0;
  }

  .testimonial-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .testimonial-byline {
    font-style: normal;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-brand-dark);
  }

  .testimonial-byline small {
    display: block;
    font-weight: 400;
    color: #6b7280;
    font-size: 0.8rem;
  }

  .bg-alt .testimonial-card {
    background: #fff;
  }

  /* Flat style — no card background, rounded image */
  .testimonials-list:has(.testimonial-card--flat) {
    gap: 3.5rem;
  }

  .testimonial-card--flat {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .testimonial-card--flat.testimonial-card--has-image {
    padding: 0;
  }

  .testimonial-card--flat:not(.testimonial-card--has-image) .testimonial-body {
    padding: 0 2rem;
  }

  @media (min-width: 768px) {
    .testimonial-card--flat:not(.testimonial-card--has-image) .testimonial-body {
      padding: 0 2.5rem;
    }
  }

  .testimonial-card--flat .testimonial-image {
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    overflow: hidden;
  }

  .text-white .testimonial-card {
    background: rgba(255, 255, 255, 0.06);
  }

  .testimonial-card.testimonial-card--flat,
  .bg-alt .testimonial-card--flat,
  .text-white .testimonial-card--flat {
    background: transparent;
  }

  .text-white .testimonial-quote-text,
  .text-white .testimonial-byline {
    color: #fff;
  }

  .text-white .testimonial-byline small {
    color: rgba(255, 255, 255, 0.5);
  }

  .text-white .testimonial-quote-icon {
    color: #fff;
  }

  /* Testimonials slider (Embla Carousel) */
  .testimonials-slider-viewport {
    overflow: hidden;
  }

  .testimonials-slider-track {
    display: flex;
    touch-action: pan-y pinch-zoom;
  }

  .testimonials-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding-inline: 0.25rem;
    display: flex;
    align-items: center;
  }

  .testimonials-slide > * {
    width: 100%;
  }

  .testimonials-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .testimonials-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border, #e5e7eb);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease;
    color: inherit;
  }

  .testimonials-slider-btn:hover {
    background-color: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
    border-color: var(--color-brand-accent);
  }

  .text-white .testimonials-slider-btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
  }

  .text-white .testimonials-slider-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .testimonials-slider-dots {
    display: flex;
    gap: 0.5rem;
  }

  .testimonials-slider-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    background: var(--color-border, #ccc);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--duration-normal) ease, transform var(--duration-normal) ease;
  }

  .testimonials-slider-dot.active {
    background: var(--color-brand-accent);
    transform: scale(1.3);
  }

  .text-white .testimonials-slider-dot {
    background: rgba(255, 255, 255, 0.3);
  }

  .text-white .testimonials-slider-dot.active {
    background: #fff;
  }

  /* Stats block */
  .block-section[data-block-type="stats"] {
    --block-padding: 2rem;
  }

  .stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    text-align: center;
    max-width: 64rem;
    margin-inline: auto;
  }

  .stats-item {
    flex: 1 1 calc(100% / var(--stats-cols, 4) - 2rem);
    min-width: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
  }

  .stats-item--card {
    border-radius: var(--btn-radius, 0.5rem);
    background: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
  }

  .text-white .stats-item--card {
    background: rgba(255, 255, 255, 0.1);
  }

  .stats-value {
    /* The 4vw term never got off its floor on a phone, so the number came out
       at 28px against a 16px label — too close to read as a statistic. */
    font-size: clamp(2.5rem, 6vw, 3rem);
    font-weight: var(--heading-weight, 700);
    line-height: 1.1;
    color: var(--color-brand-accent);
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    text-align: center;
  }

  .stats-label {
    font-size: 1rem;
    opacity: 0.75;
    line-height: 1.4;
  }

  .text-white .stats-value {
    color: #fff;
  }

  .text-white .stats-label {
    color: rgba(255, 255, 255, 0.7);
  }

  @media (max-width: 767px) {
    .stats-item {
      flex-basis: calc(50% - 2rem);
    }
  }

  @media (max-width: 479px) {
    .stats-item {
      flex-basis: 100%;
    }

    /* Stacked one per row, 2rem between them reads as three separate things
       rather than one set of figures */
    .stats-grid {
      gap: 1.5rem;
    }
  }

  /* Alert block */
  .silk-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--btn-radius, 0.5rem);
    border-left: 4px solid;
  }

  .silk-alert--info {
    background-color: color-mix(in srgb, var(--color-brand-accent) 12%, #fff);
    border-left-color: var(--color-brand-accent);
    color: var(--color-accent-text, var(--color-brand-accent));
  }

  .silk-alert--warning {
    background-color: color-mix(in srgb, #f59e0b 12%, #fff);
    border-left-color: #f59e0b;
    color: #92400e;
  }

  .silk-alert--urgent {
    background-color: color-mix(in srgb, #ef4444 10%, #fff);
    border-left-color: #ef4444;
    color: #991b1b;
  }

  .silk-alert-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
  }

  .silk-alert-message {
    flex: 1;
    line-height: 1.6;
  }

  .silk-alert-message p { margin: 0; }

  .text-white .silk-alert--info {
    background-color: color-mix(in srgb, var(--color-brand-accent) 20%, #000);
    color: color-mix(in srgb, var(--color-brand-accent) 60%, #fff);
    border-left-color: var(--color-brand-accent);
  }

  .text-white .silk-alert--warning {
    background-color: color-mix(in srgb, #f59e0b 20%, #000);
    color: #fde68a;
    border-left-color: #fbbf24;
  }

  .text-white .silk-alert--urgent {
    background-color: color-mix(in srgb, #ef4444 20%, #000);
    color: #fecaca;
    border-left-color: #f87171;
  }

  /* Subpage nav */
  .subpage-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background-color: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
    border: 2px solid color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    box-shadow: var(--card-shadow);
    transition: all var(--duration-normal) ease;
    text-decoration: none;
  }

  .subpage-card:hover {
    background-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
    transform: translateY(-4px);
  }

  .subpage-card-excerpt {
    color: var(--color-gray-500);
    font-size: 0.875rem;
  }

  .subpage-card-arrow {
    transition: transform var(--duration-normal) ease;
  }

  .silk-card:hover .subpage-card-arrow {
    transform: translateX(4px);
  }

  .subpage-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: auto;
    text-transform: var(--ui-transform, none);
    letter-spacing: var(--ui-caps-spacing, 0em);
    color: var(--color-accent-text, var(--color-brand-accent));
    transition: color var(--duration-fast) ease;
  }

  .subpage-card:hover .subpage-card-link {
    color: var(--color-brand-accent-hover);
  }

  /* Form required mark */
  .form-required-mark {
    color: #ef4444;
  }

  /* Divider component */
  .divider {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .divider-line {
    flex: 1;
    border-top-width: 2px;
    border-style: solid;
    border-color: var(--color-gray-200);
  }

  .divider-line--dashed {
    border-style: dashed;
  }

  .divider-icon {
    padding-inline: 0.75rem;
    color: var(--color-gray-400);
  }

  /* Two-row header layout — logo + CTA on row 1, nav on row 2 */
  @media (min-width: 768px) {
    .nav-layout--tworow .header-nav {
      display: none !important;
    }

    .nav-layout--tworow nav > div:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-layout--tworow .header-row2 {
      padding: 0 0;
      justify-content: flex-start !important;
      background-color: var(--color-brand-accent);
      color: #fff;
    }

    .nav-layout--tworow .header-row2 ul {
      padding: 0.5rem 0;
    }

    .header--transparent.nav-layout--tworow .header-row2 {
      background-color: color-mix(in srgb, var(--color-brand-accent) 75%, transparent);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: background-color var(--duration-slow) ease, backdrop-filter var(--duration-slow) ease;
    }

    [data-sticky-transparent].header--scrolled.nav-layout--tworow .header-row2 {
      background-color: var(--color-brand-accent);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .nav-layout--tworow .header-row2 .nav-link {
      color: rgba(255, 255, 255, 0.75);
      padding-bottom: 0.5rem;
    }

    .nav-layout--tworow .header-row2 .nav-link:hover {
      color: #fff;
    }

    .nav-layout--tworow .header-row2 .nav-link::after {
      background-color: #fff;
      bottom: 0;
    }

    .nav-layout--tworow .header-row2 .nav-link-active {
      color: #fff;
      padding-bottom: 0.5rem;
    }

    .nav-layout--tworow .header-row2 .nav-link-active::after {
      background-color: #fff;
      bottom: 0;
    }

    /* Button style nav on accent bg */
    .nav-style--button.nav-layout--tworow .header-row2 .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.15);
    }

    .nav-style--button.nav-layout--tworow .header-row2 .nav-link-active {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .nav-layout--tworow .header-row2 ul {
      justify-content: flex-start !important;
    }

    /* Offset the first nav item's left padding so text aligns with logo */
    .nav-style--button.nav-layout--tworow .header-row2 ul {
      margin-left: -1rem;
    }

    /* For underline style, offset the small padding */
    .nav-layout--tworow:not(.nav-style--button) .header-row2 ul {
      margin-left: -0.375rem;
    }

    .nav-layout--centred-logo .header-row2 {
      padding: 0.5rem 0;
      border-top: 1px solid color-mix(in srgb, var(--color-brand-dark) 8%, transparent);
    }

    .header--dark .header-row2,
    .header--transparent .header-row2 {
      border-top-color: color-mix(in srgb, #fff 12%, transparent);
    }
  }

  /* Centred-logo header layout — logo centred on row 1, nav + CTA on row 2 */
  @media (min-width: 768px) {
    .nav-layout--centred-logo .header-nav {
      display: none !important;
    }

    .nav-layout--centred-logo .header-cta {
      display: none !important;
    }

    .nav-layout--centred-logo nav > div:first-child {
      justify-content: center !important;
    }
  }

  /* Accent border on blocks */
  .accent-border-top {
    border-top: var(--accent-border-width, 0) solid var(--color-brand-accent);
  }

  .accent-border-bottom {
    border-bottom: var(--accent-border-width, 0) solid var(--color-brand-accent);
  }

  /* Block side-by-side layout (used by gallery + map blocks) */
  .block-side-by-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .block-side-by-side {
      flex-direction: row;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: center;
    }

    .block-side-by-side--reversed {
      flex-direction: row-reverse;
    }

    .block-side-by-side-text {
      width: 40%;
      flex-shrink: 0;
    }

    .block-side-by-side-content {
      width: 60%;
      flex-shrink: 0;
    }
  }

  /* Logos grid block */
  .logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .logos-grid > * {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }

  @media (min-width: 768px) {
    .logos-grid > * {
      flex: 0 0 calc(100% / var(--logos-cols, 4) - 1.5rem * (var(--logos-cols, 4) - 1) / var(--logos-cols, 4));
      max-width: calc(100% / var(--logos-cols, 4) - 1.5rem * (var(--logos-cols, 4) - 1) / var(--logos-cols, 4));
    }
  }

  .logos-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: var(--btn-radius, 0.5rem);
    min-height: 5rem;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  }

  a.logos-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
  }

  .logos-item img {
    max-height: 8rem;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .logos-item-name {
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: center;
    color: var(--color-gray-500);
  }

  .text-white .logos-item {
    background: #fff;
  }

  .text-white .logos-item-name {
    color: var(--color-gray-500);
  }

  /* Video gallery grid block */
  .videogallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .videogallery-grid {
      grid-template-columns: repeat(var(--videogallery-cols, 2), minmax(0, 1fr));
    }
  }

  .videogallery-item {
    background: color-mix(in srgb, var(--color-brand-accent) 10%, #fff);
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
    padding: 0.5rem;
    padding-bottom: 0.75rem;
  }

  .text-white .videogallery-item {
    background: rgba(255, 255, 255, 0.1);
  }

  .videogallery-item .video-embed {
    aspect-ratio: auto;
    overflow: hidden;
  }

  .videogallery-item .video-embed iframe {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .videogallery-item .video-embed video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: min(var(--btn-radius, 0.5rem), 0.75rem);
  }

  .videogallery-caption {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-top: 0.5rem;
  }

  .text-white .videogallery-caption {
    color: rgba(255, 255, 255, 0.6);
  }

  /* Video gallery slider */
  .videogallery-slider {
    --_per-page: var(--slider-per-page, 2);
    --_gap: 1.5rem;
    --_btn-space: 3.75rem;
    display: flex;
    align-items: center;
    margin-inline: calc(var(--_btn-space) * -1);
  }

  .videogallery-slider-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .videogallery-slider-track {
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--_gap) * -1);
  }

  .videogallery-slider-slide {
    flex: 0 0 calc(100% / var(--_per-page));
    min-width: 0;
    padding-left: var(--_gap);
  }

  @media (max-width: 767px) {
    .videogallery-slider-slide {
      flex: 0 0 85%;
    }

    .videogallery-slider {
      margin-inline: 0;
    }

    .videogallery-slider .gallery-slider-btn {
      display: none;
    }
  }

  .block-side-by-side .videogallery-slider {
    margin-inline: 0;
  }

  .block-side-by-side .videogallery-slider .gallery-slider-btn {
    width: 2.5rem;
    height: 2.5rem;
    margin-inline: 0.25rem;
  }

} /* end @layer components */

@keyframes silkBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-25%); }
}

/* ============================================================
   UTILITIES — only classes actually used in snippet PHP files
   ============================================================ */
@layer utilities {

  /* Spacing — padding (all sides) */
  .p-0   { padding: 0; }
  .p-1   { padding: 0.25rem; }
  .p-2   { padding: 0.5rem; }
  .p-3   { padding: 0.75rem; }
  .p-4   { padding: 1rem; }
  .p-5   { padding: 1.25rem; }
  .p-6   { padding: 1.5rem; }
  .p-7   { padding: 1.75rem; }
  .p-8   { padding: 2rem; }
  .p-10  { padding: 2.5rem; }
  .p-12  { padding: 3rem; }

  /* Spacing — padding inline */
  .px-0  { padding-inline: 0; }
  .px-1  { padding-inline: 0.25rem; }
  .px-2  { padding-inline: 0.5rem; }
  .px-3  { padding-inline: 0.75rem; }
  .px-4  { padding-inline: 1rem; }
  @media (max-width: 767px) {
    .block-section > .container.px-4 {
      padding-inline: 1.5rem;
    }
  }
  .px-5  { padding-inline: 1.25rem; }
  .px-6  { padding-inline: 1.5rem; }
  .px-7  { padding-inline: 1.75rem; }
  .px-8  { padding-inline: 2rem; }
  .px-10 { padding-inline: 2.5rem; }
  .px-12 { padding-inline: 3rem; }

  /* Spacing — padding block */
  .py-0  { padding-block: 0; }
  .py-1  { padding-block: 0.25rem; }
  .py-2  { padding-block: 0.5rem; }
  .py-3  { padding-block: 0.75rem; }
  .py-4  { padding-block: 1rem; }
  .py-5  { padding-block: 1.25rem; }
  .py-6  { padding-block: 1.5rem; }
  .py-7  { padding-block: 1.75rem; }
  .py-8  { padding-block: 2rem; }
  .py-10 { padding-block: 2.5rem; }
  .py-12 { padding-block: 3rem; }
  .py-16 { padding-block: 4rem; }
  .py-20 { padding-block: 5rem; }
  .py-24 { padding-block: 6rem; }
  .py-32 { padding-block: 8rem; }

  /* Spacing — padding top */
  .pt-0  { padding-top: 0; }
  .pt-1  { padding-top: 0.25rem; }
  .pt-2  { padding-top: 0.5rem; }
  .pt-3  { padding-top: 0.75rem; }
  .pt-4  { padding-top: 1rem; }
  .pt-5  { padding-top: 1.25rem; }
  .pt-6  { padding-top: 1.5rem; }
  .pt-7  { padding-top: 1.75rem; }
  .pt-8  { padding-top: 2rem; }
  .pt-10 { padding-top: 2.5rem; }
  .pt-12 { padding-top: 3rem; }

  /* Spacing — padding bottom */
  .pb-0  { padding-bottom: 0; }
  .pb-1  { padding-bottom: 0.25rem; }
  .pb-2  { padding-bottom: 0.5rem; }
  .pb-3  { padding-bottom: 0.75rem; }
  .pb-4  { padding-bottom: 1rem; }
  .pb-5  { padding-bottom: 1.25rem; }
  .pb-6  { padding-bottom: 1.5rem; }
  .pb-7  { padding-bottom: 1.75rem; }
  .pb-8  { padding-bottom: 2rem; }
  .pb-10 { padding-bottom: 2.5rem; }
  .pb-12 { padding-bottom: 3rem; }

  /* Spacing — padding left/right */
  .pl-3 { padding-left: 0.75rem; }

  /* Spacing — margin top */
  .mt-0    { margin-top: 0; }
  .mt-0\.5 { margin-top: 0.125rem; }
  .mt-1    { margin-top: 0.25rem; }
  .mt-2    { margin-top: 0.5rem; }
  .mt-3    { margin-top: 0.75rem; }
  .mt-4    { margin-top: 1rem; }
  .mt-5    { margin-top: 1.25rem; }
  .mt-6    { margin-top: 1.5rem; }
  .mt-7    { margin-top: 1.75rem; }
  .mt-8    { margin-top: 2rem; }
  .mt-10   { margin-top: 2.5rem; }
  .mt-12   { margin-top: 3rem; }
  .mt-auto { margin-top: auto; }

  /* Spacing — margin bottom */
  .mb-0  { margin-bottom: 0; }
  .mb-1  { margin-bottom: 0.25rem; }
  .mb-2  { margin-bottom: 0.5rem; }
  .mb-3  { margin-bottom: 0.75rem; }
  .mb-4  { margin-bottom: 1rem; }
  .mb-5  { margin-bottom: 1.25rem; }
  .mb-6  { margin-bottom: 1.5rem; }
  .mb-7  { margin-bottom: 1.75rem; }
  .mb-8  { margin-bottom: 2rem; }
  .mb-10 { margin-bottom: 2.5rem; }
  .mb-12 { margin-bottom: 3rem; }

  /* Spacing — margin block */
  .my-0  { margin-block: 0; }
  .my-2  { margin-block: 0.5rem; }
  .my-4  { margin-block: 1rem; }
  .my-6  { margin-block: 1.5rem; }
  .my-8  { margin-block: 2rem; }

  /* Spacing — margin inline */
  .mx-auto { margin-inline: auto; }
  .mx-0    { margin-inline: 0; }

  /* Gap */
  .gap-0  { gap: 0; }
  .gap-1  { gap: 0.25rem; }
  .gap-2  { gap: 0.5rem; }
  .gap-3  { gap: 0.75rem; }
  .gap-4  { gap: 1rem; }
  .gap-5  { gap: 1.25rem; }
  .gap-6  { gap: 1.5rem; }
  .gap-8  { gap: 2rem; }
  .gap-10 { gap: 2.5rem; }
  .gap-12 { gap: 3rem; }
  .gap-x-4 { column-gap: 1rem; }
  .gap-x-8 { column-gap: 2rem; }
  .gap-y-2 { row-gap: 0.5rem; }
  .gap-y-4 { row-gap: 1rem; }
  .gap-y-8 { row-gap: 2rem; }

  /* Spacing between children */
  .space-y-2 > :not(:first-child) { margin-top: 0.5rem; }

  /* Layout — display */
  .flex         { display: flex; }
  .inline-flex  { display: inline-flex; }
  .inline-block { display: inline-block; }
  .block        { display: block; }
  .grid         { display: grid; }
  .hidden       { display: none; }

  /* Layout — flex */
  .flex-col    { flex-direction: column; }
  .flex-wrap   { flex-wrap: wrap; }
  .flex-1      { flex: 1 1 0%; }
  .shrink-0    { flex-shrink: 0; }
  .flex-shrink-0 { flex-shrink: 0; }

  /* Layout — alignment */
  .items-center  { align-items: center; }
  .items-start   { align-items: flex-start; }
  .items-end     { align-items: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-center  { justify-content: center; }
  .justify-end     { justify-content: flex-end; }

  /* Layout — sizing */
  .w-full  { width: 100%; }
  .w-72    { width: 18rem; }
  .w-3\.5  { width: 0.875rem; }
  .w-4     { width: 1rem; }
  .w-5     { width: 1.25rem; }
  .w-6     { width: 1.5rem; }
  .w-7     { width: 1.75rem; }
  .h-3\.5  { height: 0.875rem; }
  .h-4     { height: 1rem; }
  .h-5     { height: 1.25rem; }
  .h-6     { height: 1.5rem; }
  .h-7     { height: 1.75rem; }
  .h-auto  { height: auto; }
  .h-px    { height: 1px; }

  /* Layout — overflow */
  .overflow-hidden { overflow: hidden; }
  .overflow-x-clip { overflow-x: clip; }

  /* Layout — min-height */
  .min-h-screen { min-height: 100vh; }

  /* Max-width */
  .max-w-none  { max-width: none; }
  .max-w-prose { max-width: 65ch; }
  .max-w-2xl   { max-width: 42rem; }
  .max-w-3xl   { max-width: 48rem; }
  .max-w-4xl   { max-width: var(--content-max, 56rem); }
  .max-w-6xl   { max-width: var(--content-max-wide, 72rem); }

  /* Typography — font size */
  .text-xs  { font-size: 0.75rem;   line-height: calc(1 / 0.75); }
  .text-sm  { font-size: 0.875rem;  line-height: calc(1.25 / 0.875); }
  .text-lg  { font-size: 1.125rem;  line-height: calc(1.75 / 1.125); }
  .text-xl  { font-size: 1.25rem;   line-height: calc(1.75 / 1.25); }
  .text-2xl { font-size: 1.5rem;    line-height: calc(2 / 1.5); }
  .text-3xl { font-size: 1.875rem;  line-height: 1.2; }
  .text-4xl { font-size: 2.25rem;   line-height: calc(2.5 / 2.25); }
  .text-5xl { font-size: 3rem;      line-height: 1; }
  .text-6xl { font-size: 3.75rem;   line-height: 1; }

  /* Typography — font weight */
  .font-bold     { font-weight: 700; }
  .font-semibold { font-weight: 600; }
  .font-display  { font-family: var(--font-display); }

  /* Typography — line height */
  .leading-normal { line-height: 1.5; }
  .leading-snug  { line-height: 1.375; }
  .leading-tight { line-height: 1.25; }
  .leading-relaxed { line-height: 1.625; }

  /* Typography — letter spacing */
  .tracking-wide  { letter-spacing: 0.025em; }
  .tracking-wider { letter-spacing: 0.05em; }

  /* Typography — text align / colour / decoration */
  .text-white   { color: #fff; }
  .text-center  { text-align: center; }
  .whitespace-nowrap { white-space: nowrap; }

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

  /* Position */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed    { position: fixed; }

  /* Inset */
  .inset-0   { inset: 0; }
  .inset-y-0 { top: 0; bottom: 0; }
  .top-0     { top: 0; }
  .right-0   { right: 0; }
  .left-0    { left: 0; }
  .bottom-0  { bottom: 0; }

  /* Z-index */
  .z-10 { z-index: 10; }
  .z-30 { z-index: 30; }
  .z-40 { z-index: 40; }
  .z-50 { z-index: 50; }

  /* Border radius */
  .rounded      { border-radius: 0.25rem; }
  .rounded-md   { border-radius: var(--radius-md); }
  .rounded-lg   { border-radius: 0.5rem; }
  .rounded-xl   { border-radius: var(--radius-lg); }
  .rounded-2xl  { border-radius: 1rem; }
  .rounded-full { border-radius: var(--radius-full); }

  /* Box shadow */
  .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); }
  .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
  .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
  .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }

  /* Transitions */
  .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-duration: var(--duration-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .transition-all {
    transition-property: all;
    transition-duration: var(--duration-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .transition-transform {
    transition-property: transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .transition-opacity {
    transition-property: opacity;
    transition-duration: var(--duration-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Transition duration */
  .duration-200 { transition-duration: 200ms; }
  .duration-300 { transition-duration: 300ms; }

  /* Easing */
  .ease-in     { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  .ease-out    { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

  /* Opacity */
  .opacity-50 { opacity: 0.5; }
  .opacity-60 { opacity: 0.6; }

  /* Cursor */
  .cursor-pointer { cursor: pointer; }

  /* Borders */
  .border-t       { border-top-width: 1px; }
  .border-l-\[3px\] { border-left-width: 3px; }
  .border-b-\[2px\] { border-bottom-width: 2px; }
  .border-2       { border-width: 2px; }

  /* Aspect ratio */
  .aspect-video { aspect-ratio: 16 / 9; }

  /* Object fit */
  .object-cover { object-fit: cover; }

  /* Brand colour backgrounds */
  .bg-brand-dark       { background-color: var(--color-dark-bg, var(--color-brand-dark)); }
  .bg-brand-dark\/5    { background-color: color-mix(in srgb, var(--color-brand-dark) 5%, transparent); }
  .bg-brand-dark\/10   { background-color: color-mix(in srgb, var(--color-brand-dark) 10%, transparent); }
  .bg-brand-dark\/60   { background-color: color-mix(in srgb, var(--color-brand-dark) 60%, transparent); }
  .bg-brand-dark\/70   { background-color: color-mix(in srgb, var(--color-brand-dark) 70%, transparent); }
  .bg-brand-accent     { background-color: var(--color-brand-accent); }
  .bg-brand-accent-hover { background-color: var(--color-brand-accent-hover); }
  .bg-brand-accent\/10 { background-color: color-mix(in srgb, var(--color-brand-accent) 10%, transparent); }
  .bg-brand-accent\/20 { background-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent); }
  .bg-brand-accent\/40 { background-color: color-mix(in srgb, var(--color-brand-accent) 40%, transparent); }
  .bg-white            { background-color: #fff; }
  .bg-white\/10        { background-color: rgba(255, 255, 255, 0.1); }
  .bg-white\/20        { background-color: rgba(255, 255, 255, 0.2); }
  .bg-black\/50        { background-color: rgba(0, 0, 0, 0.5); }
  .bg-black\/90        { background-color: rgba(0, 0, 0, 0.9); }
  .bg-gray-100         { background-color: var(--color-gray-100); }
  .bg-gray-200         { background-color: var(--color-gray-200); }

  /* Brand colour text */
  .text-brand-dark     { color: var(--color-brand-dark); }
  .text-gray-500       { color: var(--color-gray-500); }
  .text-gray-600       { color: var(--color-gray-600); }
  .text-gray-700       { color: #374151; }
  .text-white\/80      { color: rgba(255, 255, 255, 0.8); }
  .text-white\/90      { color: rgba(255, 255, 255, 0.9); }
  .text-white\/60      { color: rgba(255, 255, 255, 0.6); }

  /* Brand colour borders */
  .border-brand-accent\/20 { border-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent); }
  .border-brand-dark\/20   { border-color: color-mix(in srgb, var(--color-brand-dark) 20%, transparent); }
  .border-white\/60        { border-color: rgba(255, 255, 255, 0.6); }

  /* Responsive utilities */
  @media (min-width: 768px) {
    .md\:flex        { display: flex; }
    .md\:hidden      { display: none; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:text-3xl    { font-size: 1.875rem; line-height: 1.2; }
    .md\:text-4xl    { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
    .md\:text-5xl    { font-size: 3rem; line-height: 1; }
    .md\:py-16       { padding-block: 4rem; }
    .md\:py-32       { padding-block: 8rem; }
    .md\:pb-16       { padding-bottom: 4rem; }
  }

  @media (min-width: 1024px) {
    .lg\:text-6xl    { font-size: 3.75rem; line-height: 1; }
  }

  /* Hover utilities */
  .hover\:bg-gray-200:hover { background-color: var(--color-gray-200); }
  .hover\:opacity-90:hover { opacity: 0.9; }

  /* Transform utilities */
  .hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }

  /* Opacity utilities (used by gallery lightbox x-transition) */
  .opacity-0   { opacity: 0; }
  .opacity-100 { opacity: 1; }

} /* end @layer utilities */

/* =========================================================================
   Scroll Animations (opt-in via Theme toggle)
   Targets the container div inside each block-section so the block
   background and edge dividers render immediately — only inner content
   fades in as a single unit.
   ========================================================================= */

.silk-animate .block-section > .container,
.silk-animate .block-section .hero-content,
.silk-animate .block-section .hero-split,
.silk-animate .block-section .cta-content,
.silk-animate .page-header-content {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.silk-animate .block-section.silk-visible > .container,
.silk-animate .block-section.silk-visible .hero-content,
.silk-animate .block-section.silk-visible .hero-split,
.silk-animate .block-section.silk-visible .cta-content,
.silk-animate .silk-visible.page-header-content {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .silk-animate .block-section > .container,
  .silk-animate .block-section .hero-content,
  .silk-animate .block-section .hero-split,
  .silk-animate .block-section .cta-content,
  .silk-animate .page-header-content {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-scroll-indicator svg {
    animation: none;
  }

  /* The header still changes state on scroll; it just does so without the
     cross-fade and the easing height */
  .header-nav-row,
  .header-logo a,
  .header-logo a img,
  [data-sticky-transparent] {
    transition: none;
  }
}

/* ===========================================================================
   Character options
   ---------------------------------------------------------------------------
   Structural alternatives that let two Silk sites read as different templates
   rather than the same one recoloured. Every rule here is scoped to a class
   that only appears when the setting is off its default, so a site that never
   touches them is byte-identical to before these existed.

   See config/looks.php for the bundles that set them together.
   =========================================================================== */
@layer components {

  /* ── Section labels ──────────────────────────────────────────────────────
     The uppercase accent eyebrow above block headings is the most
     recognisable thing about a Silk page, because 14 of the 20 blocks render
     one and it has only ever had a single treatment. */

  .silk-label--hidden .silk-section-label {
    display: none;
  }

  /* A label sitting on a rule that runs out to the edge of the measure. */
  .silk-label--inline-rule .silk-section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: 0.08em;
  }

  .silk-label--inline-rule .silk-section-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
  }

  .text-center .silk-label--inline-rule .silk-section-label,
  .silk-label--inline-rule .text-center .silk-section-label {
    justify-content: center;
  }

  /* Quieter, more literary: the label reads as an aside rather than a tag. */
  .silk-label--lowercase-italic .silk-section-label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.75;
  }

  .silk-label--pill .silk-section-label {
    display: inline-block;
    padding: 0.3em 0.85em;
    border-radius: var(--radius-full, 9999px);
    background: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
    font-size: 0.6875rem;
  }

  .text-white .silk-label--pill .silk-section-label,
  .silk-label--pill .text-white .silk-section-label {
    background: rgb(255 255 255 / 0.15);
  }

  /* Sequential numbering down the page, which reads as an intentional
     structure rather than a set of unrelated sections. */
  .silk-label--numbered {
    counter-reset: silk-section;
  }

  .silk-label--numbered .silk-section-label::before {
    counter-increment: silk-section;
    content: counter(silk-section, decimal-leading-zero);
    margin-right: 0.6em;
    opacity: 0.45;
  }

  /* ── Page titles ─────────────────────────────────────────────────────────
     The hero headline already scales with --display-scale. Page headers use
     utility classes, so they are reached by ancestor instead — a new selector,
     which beats .text-4xl on specificity without touching it. */

  .page-header h1 {
    font-size: calc(2.25rem * var(--display-scale, 1));
  }

  @media (min-width: 768px) {
    .page-header h1 {
      font-size: calc(3rem * var(--display-scale, 1));
    }
  }

  /* ── Image treatments ────────────────────────────────────────────────────
     Scoped to the containers that hold photographs, so logos, service icons
     and the favicon are left alone. */

  .silk-img--rounded .textimage-image img,
  .silk-img--rounded .img-block img,
  .silk-img--rounded .blog-card-image img,
  .silk-img--rounded .gallery-grid img,
  .silk-img--rounded .gallery-slider img {
    border-radius: var(--image-radius, var(--btn-radius, 0.5rem));
  }

  .silk-img--framed .textimage-image img,
  .silk-img--framed .img-block img,
  .silk-img--framed .gallery-grid img,
  .silk-img--framed .gallery-slider img {
    border: 1px solid color-mix(in srgb, var(--color-brand-dark) 15%, transparent);
    padding: 0.5rem;
    background: #fff;
    border-radius: var(--image-radius, 0);
  }

  .text-white .silk-img--framed .textimage-image img,
  .silk-img--framed .text-white .textimage-image img {
    border-color: rgb(255 255 255 / 0.25);
    background: transparent;
  }

  /* A hard offset block behind the image. Deliberately not a soft shadow —
     the point is that it reads as a graphic decision, not depth. */
  .silk-img--offset .textimage-image,
  .silk-img--offset .img-block {
    position: relative;
    isolation: isolate;
  }

  .silk-img--offset .textimage-image::before,
  .silk-img--offset .img-block::before {
    content: "";
    position: absolute;
    inset: 0;
    translate: 0.75rem 0.75rem;
    background: var(--color-brand-accent);
    z-index: -1;
  }

  .silk-img--offset .textimage-image img,
  .silk-img--offset .img-block img {
    border-radius: var(--image-radius, 0);
  }

  /* Photographs pulled towards the brand colours, which unifies mixed stock
     imagery more than any amount of colour theming does. */
  .silk-img--duotone .textimage-image img,
  .silk-img--duotone .img-block img,
  .silk-img--duotone .blog-card-image img,
  .silk-img--duotone .gallery-grid img,
  .silk-img--duotone .gallery-slider img {
    filter: grayscale(1) contrast(1.05);
    mix-blend-mode: multiply;
    border-radius: var(--image-radius, 0);
  }

  .silk-img--duotone .textimage-image,
  .silk-img--duotone .img-block,
  .silk-img--duotone .blog-card-image {
    background: var(--color-brand-accent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .silk-img--duotone .textimage-image img,
    .silk-img--duotone .img-block img {
      transition: filter 0.4s ease;
    }

    .silk-img--duotone .textimage-image:hover img,
    .silk-img--duotone .img-block:hover img {
      filter: grayscale(0) contrast(1);
    }
  }
}