/* deckle theme stylesheet — "Bilanz" (Antonia Ghetea, Bilanzbuchhaltung).
 *
 * A calm, professional look for an accounting practice: white pages, one
 * dark blue for the header-free surfaces that carry weight (hero, call to
 * action, footer), one blue accent for links and buttons, light blue-grey
 * panels. Serif headings (Source Serif 4) over a neutral sans (Inter). The
 * brand motif is the double rule of the logo — an equals sign, the balance
 * of a Bilanz — which reappears above page titles and hero headings, and
 * as faint ledger lines on the dark surfaces.
 *
 * Fork guide
 *
 * - Palette, type and rhythm live in the custom properties on :root below.
 *   Rebrand by editing that one block; every colour and size in the rules
 *   comes from a token. Each colour token states its role and its WCAG
 *   contrast — re-check the ratios if you change a value.
 * - Breakpoints (mobile first, nothing scrolls sideways from 320px up):
 *     < 40em   one column; the menu sits behind the Menü button
 *     >= 40em  image and card grids go to two columns; form fields pair up
 *     >= 48em  horizontal nav with dropdowns; three- and four-column grids;
 *              text-media side by side; footer in columns
 *     >= 62em  the two-col backend layout goes side by side (3fr / 1fr)
 *   They are plain @media queries; search for "40em" / "48em" / "62em".
 *   contact-details lays itself out with container queries instead, so
 *   the same element fits the sidebar and the main column.
 * - Dark surfaces (hero, cta, footer, video, lightbox) redefine the hooks
 *   the base layer reads — --color-link, --color-link-strong,
 *   --color-focus, --color-marker, --color-heading (and --color-rule /
 *   --color-panel for tables) — so rich text placed on them recolours
 *   itself. The accent blue is never used for text on dark; light blue
 *   (--color-sky) and white are. Buttons on dark are light.
 * - Fonts are self-hosted (assets/fonts, published at /fonts/ by
 *   baseof.html): Source Serif 4 (display, variable wght + opsz) and Inter
 *   (body, variable wght, upright + italic). No third-party request, ever.
 * - The base layer (element defaults: headings, links, lists, images) is
 *   written with :where() at zero specificity, so any class rule wins over
 *   it — no link rule can ever override a button's text colour. Buttons
 *   always declare background AND colour, in every state.
 * - Element markup (the ce- classes) is documented in the theme README.
 *   Style hooks only: templates carry no inline styles (the GFM table
 *   alignment hook is the one documented exception).
 * - Spacing between elements is never a margin. Every block element sits
 *   in a div.ce-frame that pads --frame above and below (see "frames");
 *   the first and last frame of a slot drop their outer half.
 */

/* ----------------------------------------------------------------- fonts */

/* Variable faces, subset to Latin + Latin Extended-A, general punctuation
   and the euro sign. Source Serif 4's optical-size axis (opsz 8-60)
   follows the font size automatically (font-optical-sizing: auto is the
   default), so small headings get sturdier shapes than the hero line.
   The CSS is served at /css/theme.css, so ../fonts/ is /fonts/. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-italic-variable.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* Palette. Ratios are WCAG 2.2 contrast (AA: 4.5:1 text, 3:1 large text
     and UI components). One palette, no dark mode. */
  --color-bg: #ffffff;             /* page background */
  --color-surface: #f3f6fa;        /* panels: page header band, form, contact details, quote, table head */
  --color-tint: #e8eff8;           /* icon badges, hover fills, selection */
  --color-text: #13243a;           /* body copy: 15.66:1 on bg, 14.45:1 on surface, 13.52:1 on tint */
  --color-heading: #0b2340;        /* headings on light surfaces (= --color-dark): 15.81:1 on bg */
  --color-muted: #4a5a6d;          /* leads, captions, labels: 7.06:1 on bg, 6.51:1 on surface, 6.10:1 on tint */
  --color-border: #d3dce7;         /* hairlines and panel edges (decorative, 1.39:1) */
  --color-input: #7b8a9e;          /* form control borders: 3.53:1 on bg (UI component) */
  --color-accent: #1c4f8f;         /* links, primary button, markers, icons, focus ring: 8.19:1 on bg, 7.55:1 on surface, 7.07:1 on tint */
  --color-accent-strong: #143c6e;  /* hover state: 11.05:1 on bg */
  --color-accent-contrast: #ffffff;/* text on accent: 8.19:1 (11.05:1 on accent strong) */
  --color-dark: #0b2340;           /* the dark blue: hero, cta, footer, video, brand tile */
  --color-dark-2: #12335c;         /* gradient partner of the dark blue */
  --color-dark-text: #eef3f9;      /* copy on dark: 14.17:1 on dark, 11.38:1 on dark 2; the light button's background */
  --color-dark-muted: #b4c3d6;     /* secondary copy on dark: 8.82:1 on dark, 7.09:1 on dark 2 */
  --color-dark-strong: #ffffff;    /* headings, focus ring, hover on dark: 15.81:1 */
  --color-sky: #8bb8ea;            /* the light blue: brand bars, eyebrows and footer headings on dark (7.63:1 on dark, 6.13:1 on dark 2); the light button's hover */
  --color-success-bg: #e6f4ea;     /* form "sent" message panel */
  --color-success: #1e5a32;        /* its text: 7.37:1 on its panel */
  --color-error-bg: #fbeaea;       /* form "error" message panel */
  --color-error: #8a1c1c;          /* its text: 7.56:1 on its panel */
  --overlay: 11 35 64;             /* --color-dark as an RGB triplet, for gradients over photos and the lightbox scrim: rgb(var(--overlay) / .9). Text over a photo sits only where the overlay is >= 85% opaque */
  --on-dark: 255 255 255;          /* white as an RGB triplet, for translucent lines and controls on dark: rgb(var(--on-dark) / .12) */

  /* Spacing scale (rem). Also drives the spacer sizes. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section-gap: clamp(3rem, 2.2rem + 3.5vw, 5.5rem); /* vertical rhythm between the elements of a slot */
  --frame: calc(var(--section-gap) / 2); /* each element's share of it: the padding above and below its frame */

  /* Type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --text-base: clamp(1rem, .97rem + .15vw, 1.0625rem); /* body copy, line-height 1.7 */
  --text-sm: .875rem;              /* captions, labels, copyright, breadcrumb */
  --text-lead: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);   /* page lead, hero body */
  --text-display: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);  /* hero headline */
  --text-h1: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);     /* page title */
  --text-h2: clamp(1.65rem, 1.35rem + 1.3vw, 2.35rem);  /* section headings */
  --text-h3: clamp(1.3rem, 1.18rem + .55vw, 1.6rem);    /* card, teaser, cta headings */
  --text-h4: 1.15rem;

  /* Layout */
  --radius: 12px;                  /* panels, cards, images */
  --radius-sm: 6px;                /* buttons, inputs */
  --shadow: 0 1px 2px rgb(var(--overlay) / .06), 0 8px 24px rgb(var(--overlay) / .08);
  --shadow-lift: 0 2px 4px rgb(var(--overlay) / .08), 0 16px 36px rgb(var(--overlay) / .14);
  --measure: 46rem;                /* max width of running text, accordion, quote */
  --container: 74rem;              /* max width of the content shell (.container) */
  --gutter: clamp(1rem, 4vw, 2rem);/* side padding of the shell; >= 16px at every width */
  --bleed: calc((100vw - min(var(--container), 100vw)) / 2 + var(--gutter)); /* content edge to viewport edge */
  --header-h: 4.75rem;             /* the sticky header's height, for scroll offsets */
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* anchors (#c-<uid>, form result fragments) land below the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--space-3));
}

/* A column at least the viewport tall, so the footer sits at the bottom
   of a short page (404). */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* classic scrollbars make 100vw (and so --bleed) overshoot by the bar
     width; clip those few px so full-bleed blocks never scroll sideways */
  overflow-x: clip;
}

::selection { background: var(--color-tint); color: var(--color-heading); }

/* Zero-specificity defaults: every class rule below wins over these. */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
  color: var(--color-heading-hook, var(--color-heading));
  margin: 0 0 var(--space-3);
  overflow-wrap: break-word;
  text-wrap: balance;
}

:where(h1) { font-size: var(--text-h1); line-height: 1.12; }
:where(h2) { font-size: var(--text-h2); }
:where(h3) { font-size: var(--text-h3); }
:where(h4) { font-size: var(--text-h4); }

:where(p, ul, ol, address, dl, table) { margin: 0 0 var(--space-3); }

:where(p) { text-wrap: pretty; }

:where(address) { font-style: normal; }

:where(strong, b) { font-weight: 650; }

:where(blockquote) {
  margin: 0 0 var(--space-3);
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--color-rule, var(--color-border));
}

:where(ul, ol) { padding-inline-start: 1.35em; }

:where(li) + :where(li) { margin-top: .35em; }

:where(li)::marker { color: var(--color-marker, var(--color-accent)); }

:where(a) {
  color: var(--color-link, var(--color-accent));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease;
}

:where(a:hover) {
  color: var(--color-link-strong, var(--color-accent-strong));
  text-decoration-color: currentColor;
}

:where(img, svg, video, iframe) { max-width: 100%; height: auto; }

:where(img) { display: block; }

:where(pre) { overflow-x: auto; }

:where(hr) {
  border: 0;
  border-top: 1px solid var(--color-rule, var(--color-border));
  margin: var(--space-5) 0;
}

/* Focus: a 3px accent ring, 3px offset, on light surfaces; dark surfaces
   set --color-focus to white. Never removed. */
:focus-visible {
  outline: 3px solid var(--color-focus, var(--color-accent));
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
  color: var(--color-accent-contrast);
}

/* Visually hidden, still in the accessibility tree. */
.sr-only,
.page--home .page__header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The brand motif: two short rules, an equals sign, drawn above page
   titles and hero headings. --motif sets its colour. */
.page__title::before,
.ce-hero__heading::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: .6rem;
  margin-bottom: var(--space-4);
  background:
    linear-gradient(var(--motif, var(--color-accent)) 0 0) top / 100% .2rem no-repeat,
    linear-gradient(var(--motif, var(--color-accent)) 0 0) bottom / 100% .2rem no-repeat;
}

/* ---------------------------------------------------------- dark surfaces */

/* Every dark surface recolours the hooks the base layer reads, so links,
   list markers, headings, tables and focus rings inside rich text placed
   on it stay light. */
.site-footer,
.ce-hero,
.ce-cta,
.ce-video,
.ce-lightbox__dialog {
  --color-link: var(--color-dark-strong);
  --color-link-strong: var(--color-sky);
  --color-focus: var(--color-dark-strong);
  --color-marker: var(--color-sky);
  --color-heading-hook: var(--color-dark-strong);
  --color-rule: rgb(var(--on-dark) / .22);
  --color-panel: rgb(var(--on-dark) / .08);
  --motif: var(--color-sky);
}

/* Ledger lines: faint horizontal rules on the right of a dark surface,
   fading in from the left. Decorative, behind the content. */
.ce-hero:not(.ce-hero--image)::before,
.ce-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 0 40%;
  z-index: -1;
  background: repeating-linear-gradient(to bottom, rgb(var(--on-dark) / .07) 0 1px, transparent 1px 2.25rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
  mask-image: linear-gradient(to right, transparent, #000 55%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- header */

/* White and sticky, with a hairline below. Markup: partials/header.html. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / .97);
  border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
  padding-block: var(--space-2);
}

.site-header__brand,
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

.brand-mark__tile { fill: var(--color-dark); }
.brand-mark__letter { fill: #ffffff; }
.brand-mark__bars { fill: var(--color-sky); }

.site-header__name,
.site-footer__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.site-header__title,
.site-footer__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  letter-spacing: var(--display-tracking);
  color: var(--color-heading);
}

.site-header__tagline,
.site-footer__tagline {
  margin-top: .3rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.site-header__brand:hover .site-header__title { color: var(--color-accent-strong); }

.site-nav__menu,
.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__menu :where(li) + :where(li) { margin-top: 0; }

.site-nav__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-heading);
  background: var(--color-bg);
  border: 1px solid var(--color-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.site-nav__toggle:hover {
  color: var(--color-accent-strong);
  background: var(--color-surface);
  border-color: var(--color-accent);
}

/* three bars, drawn with gradients: no icon font, no SVG request */
.site-nav__toggle-icon {
  width: 1.1rem;
  height: .8rem;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
  background:
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat;
}

.site-nav__link,
.site-nav__sublink {
  display: block;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__sublink:hover { color: var(--color-accent); }

.site-nav__link[aria-current="page"],
.site-nav__link--ancestor,
.site-nav__sublink[aria-current="page"] { color: var(--color-accent); }

/* Phone: the menu is hidden until the toggle sets aria-expanded="true"
   (assets/js/nav.js); it then drops down below the header as a white
   panel. Sections show their children indented, always open. */
@media (max-width: 47.99em) {
  .site-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
  }

  .site-nav__toggle[aria-expanded="true"] + .site-nav__menu { display: block; }

  .site-nav__item { border-bottom: 1px solid var(--color-border); }

  .site-nav__link { padding: .85rem 0; font-size: 1.05rem; }

  .site-nav__sub { padding: 0 0 .6rem var(--space-3); }

  .site-nav__sublink { padding: .45rem 0; color: var(--color-muted); }
}

@media (min-width: 48em) {
  .site-nav__toggle { display: none; }

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

  .site-nav__item { position: relative; }

  .site-nav__link {
    padding: .6rem .85rem;
    font-size: .975rem;
    border-radius: var(--radius-sm);
  }

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

  /* the current page (or the section it lives in): a 2px rule under the label */
  .site-nav__link[aria-current="page"],
  .site-nav__link--ancestor {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .5em;
    text-decoration-color: var(--color-accent);
  }

  /* a small chevron marks the entries with a dropdown */
  .site-nav__item--parent > .site-nav__link::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-left: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.2em) rotate(45deg);
    opacity: .6;
  }

  /* The dropdown opens on hover and on keyboard focus inside the item.
     Its top padding bridges the gap to the link, so the pointer never
     falls through while moving down. */
  .site-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 16rem;
    padding-top: .5rem;
  }

  .site-nav__sub::before {
    content: "";
    position: absolute;
    inset: .5rem 0 0;
    z-index: -1;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
  }

  .site-nav__item--parent:hover > .site-nav__sub,
  .site-nav__item--parent:focus-within > .site-nav__sub { display: block; }

  .site-nav__subitem:first-child { padding-top: .4rem; }

  .site-nav__subitem:last-child { padding-bottom: .4rem; }

  .site-nav__sublink {
    margin-inline: .4rem;
    padding: .6rem .8rem;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    white-space: nowrap;
  }

  .site-nav__sublink:hover { background: var(--color-surface); }
}

/* Language switch (multilingual sites only; none on this site today). */
.site-lang__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.site-lang__link {
  display: block;
  padding: .4rem .55rem;
  color: var(--color-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-lang__link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

/* ------------------------------------------------------- main, page header */

.site-main {
  flex: 1 0 auto;
  padding-bottom: var(--section-gap);
}

/* The page header is a full-width light band: breadcrumb, the motif, the
   title and the lead. The home page hides it (the hero is its lead). */
.page__header {
  position: relative;
  margin-inline: calc(-1 * var(--bleed));
  padding: clamp(2.25rem, 1.6rem + 3vw, 4.5rem) var(--bleed);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.page__title {
  max-width: 28ch;
  margin-bottom: 0;
}

.page__lead {
  max-width: 44rem;
  margin: var(--space-3) 0 0;
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-muted);
}

.page__content { padding-top: var(--section-gap); }

/* The home page: no header band, and a hero as the first element meets the
   site header directly. */
.page--home .page__content { padding-top: var(--section-gap); }

.page--home .page__content:has(> .ce-layout > .ce-layout__slot--main:first-child > .ce-frame--hero:first-child) { padding-top: 0; }

.breadcrumb { margin-bottom: var(--space-4); }

.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.breadcrumb__item { margin: 0; }

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  content: "/" / "";
  margin-right: .5rem;
  color: var(--color-input);
}

.breadcrumb__link {
  color: var(--color-muted);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 500; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--color-dark);
  color: var(--color-dark-muted);
  font-size: .95rem;
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-6) var(--space-5);
}

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

.site-footer .brand-mark__tile { fill: #ffffff; }
.site-footer .brand-mark__letter { fill: var(--color-dark); }
.site-footer .brand-mark__bars { fill: #2f6fba; }

.site-footer__title { color: var(--color-dark-strong); }

.site-footer__tagline { color: var(--color-sky); }

.site-footer__text {
  max-width: 28rem;
  margin: var(--space-4) 0 0;
  line-height: 1.65;
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-sky);
}

.site-footer__address { margin-bottom: var(--space-3); line-height: 1.65; }

.site-footer__channels,
.site-footer__list,
.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__channels li + li,
.site-footer__list li + li { margin-top: .4rem; }

.site-footer__link {
  color: var(--color-dark-text);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--color-dark-strong);
  text-decoration: underline;
}

.site-footer__bar { border-top: 1px solid rgb(var(--on-dark) / .12); }

.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--text-sm);
}

.site-footer__copy { margin: 0; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.site-footer__legal li + li { margin-top: 0; }

/* -------------------------------------------------------------- controls */

/* Buttons: the inline button chip, the form submit. Each variant states
   background and colour in every state. */
.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 2.9rem;
  margin: .25rem .4rem .25rem 0;
  padding: .7em 1.35em;
  font: inherit;
  font-size: .975rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ce-btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.ce-btn--primary:hover {
  background: var(--color-accent-strong);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent-strong);
}

.ce-btn--secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.ce-btn--secondary:hover {
  background: var(--color-tint);
  color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
}

/* On dark: the primary button is light, the secondary a white outline. */
:is(.ce-hero, .ce-cta) .ce-btn--primary {
  background: var(--color-dark-text);
  color: var(--color-dark);
  border-color: var(--color-dark-text);
}

:is(.ce-hero, .ce-cta) .ce-btn--primary:hover {
  background: var(--color-sky);
  color: var(--color-dark);
  border-color: var(--color-sky);
}

:is(.ce-hero, .ce-cta) .ce-btn--secondary {
  background: transparent;
  color: var(--color-dark-strong);
  border-color: rgb(var(--on-dark) / .7);
}

:is(.ce-hero, .ce-cta) .ce-btn--secondary:hover {
  background: rgb(var(--on-dark) / .1);
  color: var(--color-dark-strong);
  border-color: var(--color-dark-strong);
}

/* ---------------------------------------------------------------- frames */

/* Every block element template wraps its root in div.ce-frame. The frame
   pads half a section gap above and below, so neighbours sit one gap
   apart; the backend-layout rules below set --frame-start / --frame-end
   to 0 on a slot's first and last frame. */
.ce-frame {
  padding-block: var(--frame-start, var(--frame)) var(--frame-end, var(--frame));
}

/* An intro text directly above a grid, list or accordion belongs to it:
   the two frames close up to a small gap instead of a section gap, so the
   heading reads as the grid's heading. */
.ce-frame--text:has(+ :is(.ce-frame--cards, .ce-frame--page-teasers, .ce-frame--accordion, .ce-frame--image)) { --frame-end: var(--space-2); }

.ce-frame--text + :is(.ce-frame--cards, .ce-frame--page-teasers, .ce-frame--accordion, .ce-frame--image) { --frame-start: var(--space-3); }

/* --- hero -------------------------------------------------------------- */

/* The page lead on the dark blue. In the main column of a one-col page it
   bleeds to the viewport edges (see "backend layouts"); everywhere else it
   is a rounded panel. With the optional image the photo covers the panel
   under a gradient that keeps the text side >= 85% opaque. */
.ce-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgb(47 111 186 / .35), transparent 60%),
    linear-gradient(160deg, var(--color-dark-2), var(--color-dark) 60%);
  border-radius: var(--radius);
  color: var(--color-dark-text);
}

.ce-hero__inner {
  position: relative;
  max-width: 44rem;
}

.ce-hero__heading {
  font-size: var(--text-display);
  line-height: 1.08;
  margin-bottom: var(--space-4);
}

.ce-hero__body {
  font-size: var(--text-lead);
  line-height: 1.6;
  max-width: 38rem;
}

.ce-hero__body > :last-child { margin-bottom: 0; }

.ce-hero__body p:has(> .ce-btn) { margin-top: var(--space-5); }

.ce-hero__body .ce-btn { font-size: 1rem; }

.ce-hero--image { background: var(--color-dark); }

.ce-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.ce-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(var(--overlay) / .94) 0%, rgb(var(--overlay) / .88) 45%, rgb(var(--overlay) / .45) 100%);
}

@media (max-width: 47.99em) {
  .ce-hero--image::after { background: rgb(var(--overlay) / .88); }
}

/* --- text -------------------------------------------------------------- */

.ce-text { max-width: var(--measure); }

.ce-text > :last-child { margin-bottom: 0; }

.ce-text :where(h2, h3, h4) { margin-top: 1.6em; }

.ce-text > :where(h2, h3, h4):first-child { margin-top: 0; }

.ce-text :where(h3) { font-size: var(--text-h3); }

.ce-text :where(ul) { list-style: none; padding-inline-start: 0; }

/* Bullets: a small accent square — quiet, and of a piece with the motif. */
.ce-text :where(ul) > li {
  position: relative;
  padding-inline-start: 1.5em;
}

.ce-text :where(ul) > li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: .7em;
  width: .42em;
  height: .42em;
  background: var(--color-marker, var(--color-accent));
  border-radius: 1px;
}

.ce-text :where(ol) > li { padding-inline-start: .25em; }

.ce-text :where(ol) > li::marker { font-weight: 600; }

/* GFM tables (render hook: _markup/render-table.html). The wrapper
   scrolls horizontally instead of letting a wide table overflow. */
.ce-table {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-rule, var(--color-border));
  border-radius: var(--radius-sm);
}

.ce-table__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.ce-table__table :is(th, td) {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--color-rule, var(--color-border));
  text-align: start;
  vertical-align: top;
}

.ce-table__table th {
  background: var(--color-panel, var(--color-surface));
  font-weight: 600;
  color: var(--color-heading-hook, var(--color-heading));
}

.ce-table__table tr:last-child td { border-bottom: 0; }

/* --- icon (inline) ----------------------------------------------------- */

.ce-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.17em;
  color: var(--color-icon, var(--color-accent));
}

.ce-icon svg { display: block; width: 100%; height: 100%; }

/* --- image, with its hidden img rows ----------------------------------- */

.ce-images {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .ce-images--cols-2,
  .ce-images--cols-3,
  .ce-images--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .ce-images--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ce-images--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ce-figure { margin: 0; min-width: 0; }

.ce-figure > a { display: block; border-radius: var(--radius); }

.ce-figure__img {
  width: 100%;
  border-radius: var(--radius);
}

.ce-images--cols-2 .ce-figure__img,
.ce-images--cols-3 .ce-figure__img,
.ce-images--cols-4 .ce-figure__img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ce-figure__caption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

a.ce-lightbox { cursor: zoom-in; }

/* --- text-media -------------------------------------------------------- */

.ce-text-media {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.ce-text-media__body { max-width: var(--measure); }

.ce-text-media__body > :last-child { margin-bottom: 0; }

.ce-text-media__body :where(ul) { padding-inline-start: 1.2em; }

.ce-text-media__media .ce-figure__img { box-shadow: var(--shadow); }

@media (min-width: 48em) {
  .ce-text-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }

  .ce-text-media--right .ce-text-media__media { order: 2; }
}

/* --- cards, with its hidden card rows ---------------------------------- */

.ce-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

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

@media (min-width: 48em) {
  .ce-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ce-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ce-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* a photo runs edge to edge across the top of its card */
.ce-card__img {
  width: calc(100% + 2 * clamp(1.5rem, 1.2rem + 1vw, 2rem));
  max-width: none;
  margin: calc(-1 * clamp(1.5rem, 1.2rem + 1vw, 2rem)) calc(-1 * clamp(1.5rem, 1.2rem + 1vw, 2rem)) var(--space-4);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ce-card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-4);
  background: var(--color-tint);
  border-radius: 10px;
  color: var(--color-accent);
}

.ce-card__icon svg { width: 1.6rem; height: 1.6rem; }

.ce-card__heading {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.ce-card__text {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.65;
}

/* A linked card: the whole tile is the link; an arrow at the foot moves
   on hover. The focus ring sits outside the tile, on white. */
a.ce-card::after {
  content: "→";
  content: "→" / "";
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform .2s ease;
}

a.ce-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
  color: var(--color-text);
}

a.ce-card:hover::after { transform: translateX(.3rem); }

a.ce-card:hover .ce-card__heading { color: var(--color-accent-strong); }

/* --- quote ------------------------------------------------------------- */

.ce-quote {
  max-width: var(--measure);
  margin: 0;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  padding-left: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.ce-quote__body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  line-height: 1.45;
  color: var(--color-heading);
}

.ce-quote__body > :last-child { margin-bottom: 0; }

.ce-quote__attribution {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.ce-quote__attribution::before { content: "— "; }

/* --- video-embed (click-to-load facade) -------------------------------- */

/* Not insertable on this site (no consent setup), styled so an existing
   instance still works: a 16:9 dark box, the consent button fills it and
   nothing loads until it is pressed (assets/js/consent.js). */
.ce-video {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  background: var(--color-dark);
  border-radius: var(--radius);
  color: var(--color-dark-text);
}

.ce-video__consent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: linear-gradient(to top, rgb(var(--overlay) / .95), rgb(var(--overlay) / .6));
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.ce-video__consent:focus-visible { outline-offset: -6px; }

.ce-video__play {
  position: relative;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--color-dark-text);
  transition: transform .15s ease;
}

.ce-video__consent:is(:hover, :focus-visible) .ce-video__play {
  transform: scale(1.06);
  background: var(--color-dark-strong);
}

.ce-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: .8rem 0 .8rem 1.3rem;
  border-color: transparent transparent transparent var(--color-dark);
}

.ce-video__label {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-h4);
  line-height: 1.25;
  color: var(--color-dark-strong);
}

.ce-video__note {
  font-size: var(--text-sm);
  color: var(--color-dark-muted);
}

.ce-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
}

/* --- accordion and accordion-item -------------------------------------- */

.ce-accordion {
  max-width: var(--measure);
  border-top: 1px solid var(--color-border);
}

.ce-accordion__item { border-bottom: 1px solid var(--color-border); }

.ce-accordion__summary {
  position: relative;
  display: block;
  padding: 1.15rem 3rem 1.15rem 0;
  list-style: none;
  font-weight: 600;
  font-size: 1.075rem;
  line-height: 1.45;
  color: var(--color-heading);
  cursor: pointer;
}

.ce-accordion__summary::-webkit-details-marker { display: none; }

.ce-accordion__summary:hover { color: var(--color-accent); }

/* A plus that turns into a minus, in a round badge. */
.ce-accordion__summary::after {
  content: "";
  position: absolute;
  right: .25rem;
  top: 50%;
  width: 1.9rem;
  height: 1.9rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    linear-gradient(var(--color-accent) 0 0) center / .8rem 2px no-repeat,
    linear-gradient(var(--color-accent) 0 0) center / 2px .8rem no-repeat,
    var(--color-tint);
}

.ce-accordion__item[open] > .ce-accordion__summary::after {
  background:
    linear-gradient(var(--color-accent-contrast) 0 0) center / .8rem 2px no-repeat,
    var(--color-accent);
}

.ce-accordion__body { padding: 0 3rem 1.35rem 0; }

.ce-accordion__body > :last-child { margin-bottom: 0; }

/* --- spacer ------------------------------------------------------------ */

.ce-spacer--s { height: var(--space-3); }
.ce-spacer--m { height: var(--space-5); }
.ce-spacer--l { height: var(--space-6); }
.ce-spacer--xl { height: var(--space-7); }

/* --- page-teasers, and section lists ----------------------------------- */

/* Tiles in an auto-filling grid, so the list fits a full-width page and
   the main column of two-col alike. The title link is stretched over the
   whole tile; an arrow at the foot moves on hover. */
.ce-teasers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.page > .ce-teasers { padding-top: var(--section-gap); }

.ce-teasers__item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ce-teasers__item::after {
  content: "→";
  content: "→" / "";
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform .2s ease;
}

.ce-teasers__title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.ce-teasers__link {
  color: var(--color-heading);
  text-decoration: none;
}

.ce-teasers__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.ce-teasers__link:focus-visible { outline: none; }

.ce-teasers__link:focus-visible::before {
  outline: 3px solid var(--color-focus, var(--color-accent));
  outline-offset: 3px;
}

.ce-teasers__item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.ce-teasers__item:hover .ce-teasers__link { color: var(--color-accent-strong); }

.ce-teasers__item:hover::after { transform: translateX(.3rem); }

.ce-teasers__summary {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.65;
}

/* --- cta --------------------------------------------------------------- */

/* A rounded panel on the dark blue, contained in its column (so it also
   fits the sidebar), with the ledger lines on its right. */
.ce-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  background: linear-gradient(160deg, var(--color-dark-2), var(--color-dark) 70%);
  border-radius: var(--radius);
  color: var(--color-dark-text);
}

.ce-cta__inner { position: relative; max-width: 44rem; }

.ce-cta__heading {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.ce-cta__body > :last-child { margin-bottom: 0; }

.ce-cta__body p:has(> .ce-btn) { margin-top: var(--space-4); }

/* --- contact-form and hosted-contact-form ------------------------------ */

.ce-form {
  max-width: 48rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ce-form__heading { font-size: var(--text-h2); }

.dh-form__intro {
  margin-bottom: var(--space-4);
  color: var(--color-muted);
}

.ce-form__form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

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

  .ce-form__field:has(.ce-form__textarea),
  .ce-form__submit { grid-column: 1 / -1; }
}

.ce-form__field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
}

.ce-form__label {
  font-size: .925rem;
  font-weight: 600;
  color: var(--color-heading);
}

.ce-form__input,
.ce-form__textarea {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-input);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ce-form__textarea { min-height: 10rem; resize: vertical; }

.ce-form__input:hover,
.ce-form__textarea:hover { border-color: var(--color-accent); }

.ce-form__input:focus-visible,
.ce-form__textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.ce-form__submit { justify-self: start; margin: var(--space-2) 0 0; }

/* hosted-contact-form extras (its template carries the show/hide rules
   inline; these only style them). */
.dh-form__consent {
  font-size: .925rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.dh-form__consent input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  accent-color: var(--color-accent);
}

.dh-form__result {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid currentColor;
}

.dh-form__result--sent { background: var(--color-success-bg); color: var(--color-success); }

.dh-form__result--error { background: var(--color-error-bg); color: var(--color-error); }

/* --- contact-details --------------------------------------------------- */

/* A light panel. Its entries stack in a narrow column (the sidebar) and go
   side by side where the panel is wide: container queries on the panel,
   not viewport media queries. */
.ce-contact {
  container-type: inline-size;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ce-contact__heading {
  font-size: var(--text-h3);
  margin-bottom: var(--space-4);
}

.ce-contact__list {
  display: grid;
  gap: var(--space-4) var(--space-5);
  margin: 0;
}

@container (min-width: 32rem) {
  .ce-contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 58rem) {
  .ce-contact__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ce-contact__item { min-width: 0; }

.ce-contact__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ce-contact__icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 8px;
  background: var(--color-tint);
  color: var(--color-accent);
}

.ce-contact__icon svg { width: 1.05rem; height: 1.05rem; }

.ce-contact__value {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ce-contact__address { margin: 0; }

.ce-contact__address strong { color: var(--color-heading); }

.ce-contact__link {
  font-weight: 600;
  text-decoration: none;
}

.ce-contact__link:hover { text-decoration: underline; }

.ce-contact__route {
  display: inline-block;
  margin-top: .35rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.ce-contact__route::after { content: " →"; content: " →" / ""; }

.ce-contact__hours,
.ce-contact__note { display: block; }

.ce-contact__note { color: var(--color-muted); font-size: .95rem; }

/* --- html (developer raw HTML) ----------------------------------------- */

.ce-html { max-width: var(--measure); }

/* ------------------------------------------------------- backend layouts */

/* The slot grids emitted by layouts/partials/backendlayouts/*.html. This
   block comes after the frames and elements on purpose: the slot-edge
   rules below must win over the frame's own padding. */

/* A slot's first and last frame drop the outer edge: the page header
   above and the footer below set those distances. */
.ce-layout__slot > .ce-frame:first-child { --frame-start: 0px; }

.ce-layout__slot > .ce-frame:last-child { --frame-end: 0px; }

/* In the main column of a one-col page the hero bleeds to the viewport
   edges; its content stays aligned with the shell. */
.ce-layout--one-col > .ce-layout__slot--main > .ce-frame--bleed { margin-inline: calc(-1 * var(--bleed)); }

.ce-layout--one-col > .ce-layout__slot--main > .ce-frame--bleed > .ce-hero {
  border-radius: 0;
  padding-inline: var(--bleed);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
}

.ce-layout__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap) var(--space-6);
}

.ce-layout__slot--main,
.ce-layout__slot--sidebar { min-width: 0; }

/* The 3fr/1fr split is the colspan 3 + colspan 1 that two-col.yaml
   declares to the editor — keep them equal or the page module's grid will
   lie about the page. It goes side by side at 62em: below that the
   sidebar would be too narrow for its contact panel. */
@media (min-width: 62em) {
  .ce-layout--two-col .ce-layout__cols { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
}

/* The sidebar is one narrow column at every width: its elements sit a
   small gap apart, grids stay single column, headings step down, panels
   get less padding. */
.ce-layout__slot--sidebar { --frame: var(--space-3); }

.ce-layout__slot--sidebar :is(.ce-cards, .ce-images, .ce-teasers__list) { grid-template-columns: 1fr; }

.ce-layout__slot--sidebar :is(.ce-hero__heading, .ce-cta__heading, .ce-form__heading) { font-size: var(--text-h3); }

.ce-layout__slot--sidebar :is(.ce-cta, .ce-contact, .ce-quote, .ce-hero) { padding: var(--space-4); }

.ce-layout__slot--sidebar .ce-quote__body { font-size: 1.15rem; }

.ce-layout__slot--sidebar .ce-cta .ce-btn { width: 100%; margin-right: 0; }

@media (min-width: 62em) {
  /* beside the main column, the sidebar starts level with its first line */
  .ce-layout--two-col .ce-layout__slot--sidebar { padding-top: .35rem; }
}

/* The footer band: a section gap of padding, then a hairline with air
   under it, drawn by a generated block so that no margin is involved. */
.ce-layout__slot--footer { padding-top: var(--section-gap); }

.ce-layout__slot--footer::before {
  content: "";
  display: block;
  box-sizing: content-box;
  height: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* -------------------------------------------------------------- lightbox */

/* One shared <dialog>, built by assets/js/lightbox.js (close, prev, next,
   img) over a dark scrim. Prev/next carry the hidden attribute when the
   grid has one image. */
.ce-lightbox__dialog {
  padding: 0;
  border: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: transparent;
  color: var(--color-dark-strong);
}

.ce-lightbox__dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ce-lightbox__dialog::backdrop { background: rgb(var(--overlay) / .92); }

.ce-lightbox__img {
  display: block;
  max-width: min(92vw, 90rem);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
}

.ce-lightbox__close,
.ce-lightbox__prev,
.ce-lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: rgb(var(--on-dark) / .12);
  color: var(--color-dark-strong);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
}

.ce-lightbox__close:hover,
.ce-lightbox__prev:hover,
.ce-lightbox__next:hover {
  background: rgb(var(--on-dark) / .24);
  color: var(--color-dark-strong);
}

.ce-lightbox__close { top: var(--space-3); right: var(--space-3); }

.ce-lightbox__prev,
.ce-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.ce-lightbox__prev { left: var(--space-3); }

.ce-lightbox__next { right: var(--space-3); }

.ce-lightbox__prev[hidden],
.ce-lightbox__next[hidden] { display: none; }

.ce-lightbox__close:focus-visible,
.ce-lightbox__prev:focus-visible,
.ce-lightbox__next:focus-visible {
  outline: 3px solid var(--color-dark-strong);
  outline-offset: 3px;
}

/* ------------------------------------------------------- feature bundles */

/* The categories bundle (layouts/taxonomy.html, term.html) and a future
   news bundle reuse the teaser markup above; these rules lay out their
   extra parts. */
.categories {
  list-style: none;
  margin: 0;
  padding: var(--section-gap) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.categories__item { margin: 0; }

.categories__link {
  display: inline-flex;
  gap: .5rem;
  padding: .5rem .9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
}

.categories__count { color: var(--color-muted); }

.ce-category-list { padding-top: var(--section-gap); }

.ce-news-list__image,
.news-item__image {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.news-item__media { margin: 0 0 var(--space-5); }

:is(.ce-news-list__date, .news-item__date, .news-item__author) {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

:is(.ce-news-list__categories, .news-item__categories) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

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

.pager__page { margin: 0; }

.pager__number,
.pager__link {
  display: inline-block;
  min-width: 2.75rem;
  padding: .6em .8em;
  text-align: center;
  border-radius: var(--radius-sm);
}

.pager__number[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
  text-decoration: none;
}

.pager__link[aria-disabled="true"] { color: var(--color-muted); }

/* ----------------------------------------------------------------- print */

@media print {
  .site-header { position: static; }
  .site-nav,
  .site-footer__pages,
  .skip-link { display: none; }
  .ce-hero,
  .ce-cta,
  .site-footer { background: none; color: #000; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; }

  a.ce-card:hover,
  .ce-teasers__item:hover,
  .ce-video__consent:is(:hover, :focus-visible) .ce-video__play { transform: none; }

  a.ce-card:hover::after,
  .ce-teasers__item:hover::after { transform: none; }
}