/*
 * Meridian: the page as an architect's sheet.
 *
 * The sheet has a grid of four bays (five lines, A to E) as wide as the content, and every section hangs on it. A
 * section with a heading opens with a fine line from one edge of the window to the other, its running number in a
 * circle at the left end of that line and a short stroke where each grid line crosses it, the way a plan names its
 * axes. Under the line the first bay is a margin column (the section's lead line stands there as a note) and the
 * heading and the content take the other three; a row of four cells takes all four. A photograph over the full hero
 * shows the grid itself, lettered. Dark sections are plates across the window with the grid drawn through them, and the
 * footer is the sheet's title block. Nothing is boxed with a shadow and nothing is round except a number's circle.
 *
 * This file: the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the blocks the
 * theme draws itself (the two heroes, the article body, the divider) and how every kind of kit section is laid on the
 * sheet (by the marks includes/stitch.php writes: data-block and data-n). The look of the kit's parts is in
 * kit-theme.css.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair: a website with its own
 * dark colours would get unreadable text. A dark palette is just other values for the same tokens: nothing here asks
 * whether the page is dark. Words on a photograph are white on the theme's own shade.
 *
 * Type comes from the layout: --font-heading, --font-body, --meridian-heading-weight and --meridian-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them. */
:where(:root) {
  --meridian-width: 80rem;
  --meridian-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --meridian-bar: 4.5rem;
  /* The header's whole height: the bar, until theme.js measures the real one (a second row, a top line). */
  --meridian-head: var(--meridian-bar);
  --meridian-heading-weight: 500;
  --meridian-body-strong: 600;
  --meridian-speed: 180ms;
  --meridian-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --meridian-line: var(--border, #cfcfc8);
  /* The sheet's ruled lines: stronger than a hairline between cells. */
  --meridian-rule: color-mix(in srgb, var(--text-primary, #17191c) 28%, transparent);
  /* From a section's opening line down to its heading. */
  --meridian-rise: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  /* How far apart the grid's lines stand: one bay on a phone, two on a tablet, four on a desktop. */
  --meridian-bay: 100%;
  /* The left and right edges of the content inside a box as wide as the window. A percentage, never vw: vw counts a
     scrollbar and the page would scroll sideways by its width. */
  --meridian-edge: max(var(--meridian-gutter), (100% - var(--meridian-width)) / 2);
}

@media (min-width: 48rem) {
  :where(:root) {
    --meridian-bay: 50%;
  }
}

@media (min-width: 64rem) {
  :where(:root) {
    --meridian-bay: 25%;
  }
}

/* ------------------------------------------------------------------ Base */

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

html {
  scroll-padding-top: calc(var(--meridian-bar) + 1.25rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #f2f2ee);
  color: var(--text-primary, #17191c);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink, #b93a0a);
  outline-offset: 3px;
}

.meridian-main {
  display: block;
  min-height: 40vh;
  counter-reset: meridian-section;
}

.meridian-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--primary, #17191c);
  color: var(--on-primary, #f2f2ee);
  font-weight: var(--meridian-body-strong);
  text-decoration: none;
}

.meridian-skip-link:focus {
  top: 1rem;
}

.meridian-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button the theme draws itself: the label, then a square tab with an arrow, parted from the label
   by the tab's own edge. kit-theme.css gives the kit's buttons the same shape, and the line of this theme in
   resilience.css (--chrome-button-radius) gives its corner to the cookie notice and the phone action bar:
   theme-chrome.test.mjs holds the three together. A label may take two lines; it never runs out of the button. */
.meridian-button {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  min-height: 3rem;
  border: 1px solid transparent;
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--meridian-body-strong);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-align: start;
  text-decoration: none;
  transition: background-color var(--meridian-speed) ease, border-color var(--meridian-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.meridian-button > span {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 0.7rem 1.25rem;
  overflow-wrap: anywhere;
}

.meridian-button__tab {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  margin: -1px -1px -1px 0;
  background: var(--accent, #ff5a1f);
  color: var(--on-accent, #17191c);
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.meridian-button__tab::before {
  content: "\2192";
  transition: transform var(--meridian-speed) var(--meridian-ease);
}

.meridian-button:hover .meridian-button__tab::before {
  transform: translateX(0.22rem);
}

.meridian-button--primary {
  background: var(--primary, #17191c);
  color: var(--on-primary, #f2f2ee);
}

.meridian-button--primary:hover {
  background: var(--primary-alt, #2b2e33);
}

.meridian-button--accent {
  background: var(--accent, #ff5a1f);
  color: var(--on-accent, #17191c);
}

/* The accent button's tab is the same colour as its label, so a fine line parts them. The hover is a ring in the
   words' colour, not a lighter fill: a lighter fill would bring the words' contrast under what the colour contract
   promises for this pair. */
.meridian-button--accent .meridian-button__tab {
  margin: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--on-accent, #17191c) 40%, transparent);
}

.meridian-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #17191c) 55%, transparent);
}

.meridian-button--secondary {
  border-color: var(--text-primary, #17191c);
  background: transparent;
  color: var(--text-primary, #17191c);
}

.meridian-button--secondary .meridian-button__tab {
  margin: 0;
  border-inline-start: 1px solid currentColor;
  background: transparent;
  color: inherit;
}

.meridian-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #17191c) 7%, transparent);
}

.meridian-button--small {
  min-height: 2.5rem;
  font-size: 0.875rem;
}

.meridian-button--small > span {
  padding: 0.45rem 0.9rem;
}

.meridian-button--small .meridian-button__tab {
  width: 2.5rem;
}

.meridian-button--block {
  display: flex;
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement */

.meridian-announcement {
  background: var(--primary, #17191c);
  color: var(--on-primary, #f2f2ee);
  font-size: 0.8125rem;
}

.meridian-announcement[hidden] {
  display: none;
}

.meridian-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: calc(var(--meridian-width) + 2 * var(--meridian-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--meridian-gutter);
  text-align: center;
}

.meridian-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

.meridian-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.meridian-announcement a {
  font-weight: var(--meridian-body-strong);
  text-underline-offset: 0.25em;
}

.meridian-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.meridian-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ------------------------------------------------------------------ Header */

/* A plain sheet of the page colour with a hairline under it, kept at the top. The bar has one height for every kind;
   the centred kind adds a row for the menu, the top-bar kind a slim line above. */
.meridian-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--meridian-line);
  background: var(--background, #f2f2ee);
  color: var(--text-primary, #17191c);
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.meridian-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: var(--meridian-bar);
  max-width: calc(var(--meridian-width) + 2 * var(--meridian-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--meridian-gutter);
}

.meridian-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them. */
.meridian-header--centered .meridian-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.meridian-header--centered .meridian-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.meridian-header--centered .meridian-header__actions {
  grid-column: 3;
  justify-self: end;
}

.meridian-header__rail {
  max-width: calc(var(--meridian-width) + 2 * var(--meridian-gutter));
  margin-inline: auto;
  padding: 0 var(--meridian-gutter) 0.5rem;
}

.meridian-header__rail .meridian-nav {
  justify-content: center;
}

.meridian-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.meridian-header__phone {
  color: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.meridian-header__phone:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-ink, #b93a0a);
  text-underline-offset: 0.3em;
}

.meridian-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name, after the theme's small square. Its line height and the small padding leave room for what letters
   carry above and below (the caron of Š, the tail of Ų, the descender of g): a tighter line in a box that clips cuts
   them (theme-clipped-marks.test.mjs, with "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two
   balanced lines and the shared script sets it smaller before a word would break; this rule only sets its look. */
.meridian-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.meridian-brand__mark {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--accent, #ff5a1f);
}

.meridian-brand__name {
  min-width: 0;
  max-width: min(22rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.025em;
  line-height: 1.3;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.meridian-header .meridian-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .meridian-header .meridian-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.125rem;
  }
}

.meridian-brand:has(.meridian-brand__logo, .brand-logo-original, .logo-mask) .meridian-brand__name {
  font-size: 1.0625rem;
}

.meridian-header .meridian-brand__logo,
.meridian-header .brand-logo-original {
  max-height: 2.5rem;
  width: auto;
}

.meridian-header .logo-mask {
  background-color: var(--text-primary, #17191c) !important;
}

/* ------------------------------------------------------------------ Topbar */

.meridian-topbar {
  border-bottom: 1px solid var(--meridian-line);
  color: var(--text-secondary, #585c62);
  font-size: 0.8125rem;
}

.meridian-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--meridian-width) + 2 * var(--meridian-gutter));
  min-height: 2.25rem;
  margin-inline: auto;
  padding: 0 var(--meridian-gutter);
}

.meridian-topbar__contact {
  display: flex;
  gap: 1.5rem;
  min-width: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.meridian-topbar a {
  color: inherit;
  text-decoration: none;
}

.meridian-topbar a:hover {
  text-decoration: underline;
}

.meridian-topbar__social,
.meridian-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.meridian-topbar__social svg,
.meridian-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .meridian-topbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ Navigation */

.meridian-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  min-width: 0;
}

/* The menu stands beside the name, not pushed to the far right: the name and the pages read as one line, and the phone
   number and the button close the bar at its right end. */
.meridian-header--simple .meridian-nav,
.meridian-header--topbar .meridian-nav {
  margin-left: clamp(0.5rem, 2.5vw, 2.5rem);
}

/* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu button.
   Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
.meridian-nav__item {
  position: relative;
  min-width: 0;
}

.meridian-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
}

/* A line under the label that grows from the left; the page being shown keeps it, in the accent's readable shade. */
.meridian-nav__item > a > span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 0.2em;
  transition: background-size 260ms var(--meridian-ease);
}

.meridian-nav__item > a:hover > span,
.meridian-nav__item--parent:focus-within > a > span,
.meridian-nav__item.is-current > a > span {
  background-size: 100% 1px;
}

.meridian-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.meridian-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  border: 1px solid var(--meridian-rule);
  background: var(--background, #f2f2ee);
  color: var(--text-primary, #17191c);
  visibility: hidden;
  opacity: 0;
}

.meridian-nav__item--parent:is(:hover, :focus-within) > .meridian-nav__children {
  visibility: visible;
  opacity: 1;
}

.meridian-nav__children a {
  padding: 0.65rem 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.meridian-nav__children a + a {
  border-top: 1px solid var(--meridian-line);
}

.meridian-nav__children a:hover {
  background: var(--surface-alt, #e7e7e1);
}

/* The menu button: two lines that close into a cross. Hidden on a wide screen unless resilience.js folds the menu into
   it (theme-nav-compact on #site-header, whose shared rules show it). */
.meridian-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.meridian-menu-button__lines {
  display: grid;
  gap: 0.4rem;
  width: 1.15rem;
}

.meridian-menu-button__lines i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--meridian-speed) ease;
}

.meridian-menu-button[aria-expanded="true"] .meridian-menu-button__lines i:nth-child(1) {
  transform: translateY(0.25rem) rotate(45deg);
}

.meridian-menu-button[aria-expanded="true"] .meridian-menu-button__lines i:nth-child(2) {
  transform: translateY(-0.25rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A sheet under the bar with every page on a ruled, numbered line. It scrolls inside itself when the pages are many, so
   the last one is always reachable. */
.meridian-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100dvh - var(--meridian-bar));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--meridian-line);
  border-bottom: 1px solid var(--meridian-rule);
  background: var(--background, #f2f2ee);
  color: var(--text-primary, #17191c);
}

.meridian-drawer[hidden] {
  display: none;
}

/* Open, the sheet covers the page down to the foot of the window, so nothing of the page shows under a short menu. */
.meridian-drawer:not([hidden]) {
  min-height: calc(100dvh - var(--meridian-head));
}

.meridian-drawer__inner {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.25rem var(--meridian-gutter) 1.75rem;
}

.meridian-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
}

.meridian-drawer__nav {
  counter-reset: meridian-menu;
}

.meridian-drawer__item {
  position: relative;
  border-bottom: 1px solid var(--meridian-line);
  counter-increment: meridian-menu;
}

/* The page's number in a circle, as on the sheet. */
.meridian-drawer__item::before {
  content: counter(meridian-menu);
  position: absolute;
  top: 1.2rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid var(--meridian-rule);
  border-radius: 50%;
  color: var(--text-secondary, #585c62);
  font-size: 0.6875rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--meridian-body-strong);
  line-height: 1;
  pointer-events: none;
}

/* A page name in the heading face. data-fit-text (includes/chrome.php) lets the shared script set a long single word
   smaller instead of breaking it. */
.meridian-drawer__link {
  display: block;
  padding: 1rem 0 1rem 2.5rem;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-decoration: none;
}

.meridian-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 1rem 2.5rem;
}

.meridian-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #585c62);
  text-decoration: none;
}

.meridian-drawer__footer {
  display: grid;
  gap: 0.6rem;
}

.meridian-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #585c62);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .meridian-nav,
  .meridian-header__rail,
  .meridian-header__phone,
  .meridian-header__cta,
  .meridian-header__slot {
    display: none;
  }

  .meridian-menu-button {
    display: inline-flex;
  }

  .meridian-header--centered .meridian-header__inner {
    display: flex;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .meridian-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .meridian-header--simple .meridian-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ The header over a photograph */

/* When the page opens with the full hero, the bar lies clear on the photograph with white words until the page moves
   (theme.js sets is-scrolled) or the phone menu opens (is-open); the hero is pulled up under it (the hero's rules).
   Without scripts the bar stays clear at the top of the page and is a plain sheet nowhere else, because it is sticky
   and only clear while this rule matches: so it is given its sheet back when scripts are off (the end of this file). */
.meridian-header:not(.is-scrolled, .is-open):has(~ .meridian-main > .meridian-hero--full:first-child) {
  border-bottom-color: rgb(255 255 255 / 0.26);
  background: transparent;
  color: #fff;
}

.meridian-header:not(.is-scrolled, .is-open):has(~ .meridian-main > .meridian-hero--full:first-child) .meridian-topbar {
  border-bottom-color: rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.86);
}

.meridian-header:not(.is-scrolled, .is-open):has(~ .meridian-main > .meridian-hero--full:first-child) .logo-mask {
  background-color: #fff !important;
}

/* A logo in its own colours gets a small plate of the page colour on the photograph: a dark logo would vanish there. */
.meridian-header:not(.is-scrolled, .is-open):has(~ .meridian-main > .meridian-hero--full:first-child) .brand-logo-original {
  padding: 0.3rem 0.5rem;
  background: var(--background, #f2f2ee);
}

/* ------------------------------------------------------------------ Breadcrumbs */

.meridian-breadcrumbs {
  max-width: calc(var(--meridian-width) + 2 * var(--meridian-gutter));
  margin-inline: auto;
  padding: 1.25rem var(--meridian-gutter) 0;
}

.meridian-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #585c62);
  font-size: 0.8125rem;
  list-style: none;
}

.meridian-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.6;
}

.meridian-breadcrumbs a {
  text-decoration: none;
}

.meridian-breadcrumbs a:hover {
  text-decoration: underline;
}

.meridian-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #17191c);
}

/* ------------------------------------------------------------------ The full hero */

.meridian-hero {
  position: relative;
  /* Space under an opening, before the first section's line. */
  margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* The photograph, the shade, the grid and the words. Words here are white on the theme's own shade, the one place the
   palette does not decide: the title block in the corner is the page colour again. */
.meridian-hero__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(30rem, 84svh, 58rem);
  overflow: hidden;
  background: #17181a;
  color: #fff;
  --meridian-hero-top: 0px;
}

/* First on the page: under the header, which lies clear on it. */
.meridian-main > .meridian-hero--full:first-child .meridian-hero__stage {
  margin-top: calc(-1 * var(--meridian-head));
  padding-top: var(--meridian-head);
  --meridian-hero-top: var(--meridian-head);
}

.meridian-hero--full .meridian-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.meridian-hero--full .meridian-hero__image,
.meridian-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deep under the header's words and under the heading, light between: the picture stays a picture. --pgs-tint is the
   block's own word on the shade (lighter, darker). */
.meridian-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(0 0 0 / min(0.9, calc(0.5 * var(--pgs-tint, 1)))) 0%,
    rgb(0 0 0 / min(0.9, calc(0.14 * var(--pgs-tint, 1)))) 26%,
    rgb(0 0 0 / min(0.9, calc(0.2 * var(--pgs-tint, 1)))) 48%,
    rgb(0 0 0 / min(0.92, calc(0.62 * var(--pgs-tint, 1)))) 78%,
    rgb(0 0 0 / min(0.94, calc(0.78 * var(--pgs-tint, 1)))) 100%);
}

/* The sheet's grid over the photograph: five fine lines as far apart as the bays, each named by a letter in a circle
   under the header. */
.meridian-hero__axes {
  position: absolute;
  inset-block: 0;
  inset-inline: var(--meridian-edge);
  z-index: -1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.meridian-hero__axes i {
  position: relative;
  width: 0;
  border-inline-start: 1px solid rgb(255 255 255 / 0.2);
  font-style: normal;
}

.meridian-hero__axes b {
  position: absolute;
  top: calc(var(--meridian-hero-top) + 1.1rem);
  left: 0;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 50%;
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--meridian-body-strong);
  line-height: 1;
  transform: translateX(-50%);
}

@media (max-width: 47.99rem) {
  .meridian-hero__axes i:nth-child(even) {
    display: none;
  }
}

.meridian-hero--full .meridian-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  align-self: end;
  width: 100%;
  max-width: calc(var(--meridian-width) + 2 * var(--meridian-gutter));
  margin-inline: auto;
  padding: clamp(6rem, 16vh, 10rem) var(--meridian-gutter) 0;
}

/* The page's heading: large, tight, in sentence case, never larger than a word of fourteen letters can stand at 320 px. */
.meridian-hero--full .meridian-hero__title {
  margin: 0;
  padding-bottom: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  color: #fff;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.25rem, 1.2rem + 5.2vw, 6rem);
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

/* The title block: a panel of the page colour set into the lower right corner of the photograph, with the lead line and
   the buttons, under a bar of the accent colour. */
.meridian-hero__block {
  display: grid;
  gap: 1.25rem;
  margin-inline: calc(-1 * var(--meridian-gutter));
  padding: 1.25rem var(--meridian-gutter) 1.5rem;
  border-top: 3px solid var(--accent, #ff5a1f);
  background: var(--background, #f2f2ee);
  color: var(--text-primary, #17191c);
}

.meridian-hero--full .meridian-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-primary, #17191c);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.meridian-hero--full .meridian-hero__actions {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 48rem) {
  .meridian-hero__block {
    width: min(24rem, 100%);
    margin-inline: auto 0;
    padding: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .meridian-hero--full .meridian-hero__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .meridian-hero--full .meridian-hero__title {
    grid-column: 1 / 4;
    padding-inline-end: 2.5rem;
  }

  .meridian-hero--full .meridian-hero__title:only-child {
    grid-column: 1 / -1;
  }

  /* The title block stands at the right, over the last bays, wide enough for a button's label on one line. */
  .meridian-hero__block {
    grid-column: 3 / 5;
    justify-self: end;
    width: min(21rem, 100%);
    margin: 0;
  }
}

@media (min-width: 80rem) {
  /* On a wide screen it takes the last bay exactly: its left edge is line D. */
  .meridian-hero__block {
    grid-column: 4;
    justify-self: stretch;
    width: auto;
  }
}

/* ------------------------------------------------------------------ The index under an opening */

/* The page's sections as a ruled row of links, each with the number its section carries on its opening line. Wide
   screens only: on a phone the page is short enough to scroll. */
.meridian-index {
  display: none;
}

@media (min-width: 64rem) {
  .meridian-index {
    display: grid;
    grid-template-columns: repeat(var(--meridian-cells, 4), minmax(0, 1fr));
    padding-inline: var(--meridian-edge);
    border-bottom: 1px solid var(--meridian-rule);
  }

  .meridian-hero--split .meridian-index {
    border-top: 1px solid var(--meridian-line);
  }

  .meridian-index__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1.05rem 1.25rem 1.1rem;
    border-inline-start: 1px solid var(--meridian-line);
    color: var(--text-primary, #17191c);
    font-size: 0.875rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color var(--meridian-speed) ease;
  }

  .meridian-index__item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .meridian-index__item:hover {
    background: var(--surface-alt, #e7e7e1);
  }

  .meridian-index__item:first-child:hover {
    background: linear-gradient(to right, transparent 0, var(--surface-alt, #e7e7e1) 0) no-repeat;
  }

  .meridian-index__item b {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--accent, #ff5a1f);
    color: var(--on-accent, #17191c);
    font-size: 0.625rem;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: var(--meridian-body-strong);
    line-height: 1;
  }

  .meridian-index__item span {
    min-width: 0;
    padding-top: 0.05rem;
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------------ The opening on paper (split hero) */

.meridian-hero--split {
  border-bottom: 1px solid var(--meridian-rule);
}

.meridian-hero--split .meridian-hero__inner {
  display: grid;
  grid-template-columns: var(--meridian-gutter) minmax(0, 1fr) var(--meridian-gutter);
}

.meridian-hero__copy {
  display: grid;
  grid-column: 2;
  align-content: center;
  justify-items: start;
  gap: 1.35rem;
  min-width: 0;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it. */
.meridian-hero--split .meridian-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.75rem);
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.038em;
  line-height: 1.03;
  text-wrap: balance;
}

.meridian-hero--split .meridian-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #585c62);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}

.meridian-hero--split .meridian-hero__actions,
.meridian-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.meridian-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #585c62);
  font-size: 0.875rem;
}

.meridian-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.meridian-stars svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: color-mix(in srgb, var(--text-primary, #17191c) 20%, transparent);
}

.meridian-stars svg.is-full {
  fill: var(--accent-ink, #b93a0a);
}

.meridian-hero__trustpilot {
  color: var(--text-primary, #17191c);
  font-size: 0.875rem;
  font-weight: var(--meridian-body-strong);
  text-decoration-color: var(--accent-ink, #b93a0a);
  text-underline-offset: 0.3em;
}

/* The picture: on a phone a wide frame under the words, from edge to edge of the screen. */
.meridian-hero--split .meridian-hero__media {
  position: relative;
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--surface-alt, #e7e7e1);
}

.meridian-hero--split .meridian-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The selling points: a ruled strip under the words and the picture, one point to a cell. */
.meridian-hero__points {
  display: grid;
  margin: 0;
  padding: 0 var(--meridian-edge);
  border-top: 1px solid var(--meridian-rule);
  list-style: none;
}

.meridian-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.meridian-hero__points li + li {
  border-top: 1px solid var(--meridian-line);
}

.meridian-hero__points span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.meridian-hero__icon {
  margin-top: 0.15em;
  color: var(--accent-ink, #b93a0a);
}

@media (min-width: 64rem) {
  /* The window's width as a grid: a margin, the four bays, a margin. The words take the first two bays; the picture
     takes the other two and the right margin, so it runs to the edge of the window, from the header down to the strip. */
  .meridian-hero--split .meridian-hero__inner {
    grid-template-columns: minmax(var(--meridian-gutter), 1fr) repeat(4, minmax(0, calc(var(--meridian-width) / 4))) minmax(var(--meridian-gutter), 1fr);
    min-height: clamp(30rem, 72svh, 46rem);
  }

  .meridian-hero__copy {
    grid-column: 2 / 4;
    padding-inline-end: clamp(2rem, 4vw, 4rem);
  }

  .meridian-hero--split .meridian-hero__media {
    grid-column: 4 / -1;
    aspect-ratio: auto;
  }

  /* Without a picture the words take three bays. */
  .meridian-hero--words .meridian-hero__inner {
    min-height: 0;
  }

  .meridian-hero--words .meridian-hero__copy {
    grid-column: 2 / 5;
  }

  .meridian-hero--words .meridian-hero__title {
    font-size: clamp(2.25rem, 1.2rem + 5vw, 5.5rem);
  }

  .meridian-hero__points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .meridian-hero__points li {
    padding: 1.15rem 1.25rem 1.2rem;
    border-inline-start: 1px solid var(--meridian-line);
  }

  .meridian-hero__points li + li {
    border-top: 0;
  }

  .meridian-hero__points li:first-child,
  .meridian-hero__points li:nth-child(4n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .meridian-hero__points li:nth-child(n + 5) {
    border-top: 1px solid var(--meridian-line);
  }

  /* Fewer than four points: the last cell closes with a line, so the strip ends on a grid line. */
  .meridian-hero__points li:last-child:not(:nth-child(4n)) {
    border-inline-end: 1px solid var(--meridian-line);
  }
}

/* ------------------------------------------------------------------ Sections on the sheet */

/* In the stock blocks everything stands at the left, the way a drawing is read from its left edge: a centred heading
   over a ruled row of cells looks set by another hand. A module's section is left as its module asked (its type starts
   with x_): the kit promises a module that a text it centres stays centred. */
.meridian-main [data-block]:not([data-block^="x_"]).kit-section--align-center,
.meridian-main [data-block]:not([data-block^="x_"]) :is(.kit-heading-group.kit-text--center, .kit-text-block.kit-text--center) {
  text-align: start;
}

.meridian-main [data-block]:not([data-block^="x_"]) .kit-align--center {
  align-items: flex-start;
  text-align: start;
}

.meridian-main [data-block]:not([data-block^="x_"]) .kit-justify--center {
  justify-content: flex-start;
}

.meridian-main [data-block]:not([data-block^="x_"]) .kit-text-block.kit-text--center {
  margin-inline: 0;
}

/* A block's own id is the target of the index and of links: it stops under the bar. */
.meridian-main [id] {
  scroll-margin-top: calc(var(--meridian-bar) + 1.25rem);
}

/* A section with a heading opens with a line from one edge of the window to the other. The line is a background, not
   a border, so it can draw itself from the left as the section arrives (the end of this file). */
.meridian-main [data-n] {
  padding-top: var(--meridian-rise);
  background: linear-gradient(var(--meridian-rule), var(--meridian-rule)) 0 0 / 100% 1px no-repeat;
  counter-increment: meridian-section;
}

/* Where each grid line crosses the opening line: a short stroke, as far apart as the bays. The first is under the
   number's circle; the last closes the row at the right edge of the content. */
.meridian-main [data-n]::before {
  content: "";
  position: absolute;
  top: -0.3125rem;
  right: var(--meridian-edge);
  left: var(--meridian-edge);
  z-index: 1;
  height: 0.6875rem;
  background:
    linear-gradient(to right, var(--meridian-rule) 1px, transparent 1px) 0 0 / var(--meridian-bay) 100% repeat-x,
    linear-gradient(var(--meridian-rule), var(--meridian-rule)) 100% 0 / 1px 100% no-repeat;
  pointer-events: none;
}

/* The section's number in a circle on the line, in the accent colour: the one strong mark of every section. */
.meridian-main [data-n]::after {
  content: attr(data-n);
  position: absolute;
  top: 0;
  left: var(--meridian-edge);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent, #ff5a1f);
  color: var(--on-accent, #17191c);
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--meridian-body-strong);
  line-height: 1;
  transform: translateY(-50%);
}

/* A section without a heading (figures, a row of logos) continues the one before it: no line, no space above. */
.meridian-main .kit-root > .kit-section:not([data-n], .kit-section--inverse, .kit-section--accent, .kit-section--image) {
  padding-top: 0;
}

/* The first thing on a page stands clear of the header: a section's line would otherwise lie on the bar's own. */
.meridian-main > .kit-root:first-child > .kit-section:not(.kit-section--inverse, .kit-section--accent, .kit-section--image),
.meridian-breadcrumbs + .kit-root > .kit-section:not(.kit-section--inverse, .kit-section--accent, .kit-section--image) {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.meridian-main > .kit-root:first-child > .kit-section:not([data-n], .kit-section--inverse, .kit-section--accent, .kit-section--image) {
  margin-top: 0;
  padding-top: var(--kit-pad-compact);
}

/* The lead line of a section: a note, smaller than running text. */
.meridian-main [data-n] > .kit-section__inner > .kit-stack > .kit-text--lead {
  color: var(--kit-muted);
  font-size: 1rem;
  line-height: 1.55;
}

@media (min-width: 64rem) {
  /* Under the opening line the sheet's four bays: the first is the margin column, where the lead line stands as a note
     level with the heading; the heading and whatever follows take the other three. */
  .meridian-main [data-n] > .kit-section__inner > .kit-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    column-gap: 0;
  }

  .meridian-main [data-n] > .kit-section__inner > .kit-stack > * {
    grid-column: 2 / -1;
  }

  .meridian-main [data-n] > .kit-section__inner > .kit-stack > .kit-heading-group {
    grid-row: 1;
  }

  .meridian-main [data-n] > .kit-section__inner > .kit-stack > .kit-text--lead {
    grid-column: 1;
    grid-row: 1;
    max-width: 16rem;
    padding-top: 0.6rem;
    padding-inline-end: 1.5rem;
    font-size: 0.9375rem;
  }

  /* A row of two or four cells, a sliding row and a pair of columns take all four bays; a row of three takes the three
     beside the margin column, so its cells stand on lines B, C and D. */
  .meridian-main [data-n] > .kit-section__inner > .kit-stack > :is(.kit-grid.kit-balanced:not(.kit-bal--3, .kit-bal--1), .kit-grid.kit-cols--2:not(.kit-balanced), .kit-carousel, .kit-split) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  /* The enquiry form: its heading group is one more box around the icon, the heading and the lead line, which is opened
     so that the icon stands in the margin column beside the heading and the lead line beside the form, as a note; the
     form takes two bays, the width a form reads well at. */
  .meridian-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-stack {
    display: contents;
  }

  .meridian-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-stack > * {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .meridian-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-stack > .kit-row {
    grid-column: 1;
    padding-top: 0.5rem;
    color: var(--kit-accent-text);
  }

  .meridian-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-stack > .kit-text--lead {
    grid-column: 1;
    grid-row: 2;
    max-width: 16rem;
    padding-top: 0.25rem;
    padding-inline-end: 1.5rem;
    color: var(--kit-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .meridian-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-form {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  /* Questions, a timeline and a price list read best at two and a half bays, not three. */
  .meridian-main :is([data-block="faq"], [data-block="timeline"]) > .kit-section__inner > .kit-stack > :is(.kit-accordion, .kit-grid) {
    max-width: 52rem;
  }
}

/* The cells of a numbered section are numbered after it: 3.1, 3.2. A small figure at the head of each cell. */
.meridian-main [data-n] :is(.kit-grid, .kit-accordion) {
  counter-reset: meridian-item;
}

.meridian-main [data-n] .kit-grid > :is(.kit-card, .kit-stack),
.meridian-main [data-n] .kit-accordion > .kit-accordion__item {
  counter-increment: meridian-item;
}

.meridian-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"], [data-block="portfolio_showcase"])[data-n] .kit-card__content::before,
.meridian-main [data-block="feature_list"][data-n] .kit-features > .kit-stack::before,
.meridian-main [data-block="faq"][data-n] .kit-accordion__title::before {
  content: counter(meridian-section) "." counter(meridian-item);
  color: var(--kit-muted);
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.meridian-main :is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"], [data-block="portfolio_showcase"])[data-n] .kit-card__content::before {
  margin-bottom: 0.9rem;
}

.meridian-main [data-block="feature_list"][data-n] .kit-features > .kit-stack::before {
  margin-bottom: 0.6rem;
}

/* A question's number stands in a column of its own, and the answer starts where the question's words start
   (faq-rows.test.mjs measures both): the number's width and the gap after it, together. */
.meridian-main [data-block="faq"][data-n] .kit-accordion__title::before {
  flex: none;
  width: 2.25rem;
}

.meridian-main [data-block="faq"] .kit-accordion__title {
  justify-content: flex-start;
  gap: 0.75rem;
}

.meridian-main [data-block="faq"] .kit-accordion__chevron {
  margin-inline-start: auto;
}

.meridian-main [data-block="faq"][data-n] .kit-accordion__body {
  padding-inline-start: 3rem;
}

/* ------------------------------------------------------------------ Words with a picture, and two columns */

/* The words take two bays and the picture the other two, with no gap between them: the picture's edge is line C. The
   picture hangs from the section's opening line. */
.meridian-main .kit-split--1-1 {
  align-items: start;
}

.meridian-main [data-block] .kit-split > .kit-picture {
  aspect-ratio: 4 / 3;
}

.meridian-main [data-block] .kit-split > .kit-picture img {
  height: 100%;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .meridian-main [data-block] .kit-split--1-1 {
    gap: 0;
  }

  .meridian-main [data-block] .kit-split--1-1 > .kit-stack:first-child {
    padding-inline-end: clamp(1.75rem, 4vw, 4.5rem);
  }

  .meridian-main [data-block] .kit-split--1-1.kit-split--reverse > .kit-stack:first-child {
    padding-inline: clamp(1.75rem, 4vw, 4.5rem) 0;
  }

  .meridian-main [data-n] .kit-section__inner > .kit-split > .kit-picture {
    margin-top: calc(-1 * var(--meridian-rise));
    aspect-ratio: 1 / 1;
  }

  /* Two columns of words: the second stands after a fine line, which is line C. */
  .meridian-main [data-block="two_column_text"] .kit-split--1-1 > .kit-stack + .kit-stack {
    padding-inline: clamp(1.75rem, 4vw, 4.5rem) 0;
    border-inline-start: 1px solid var(--kit-line);
  }
}

.meridian-main [data-block="two_column_text"] .kit-heading--2 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem);
}

/* A form beside words stands on a panel of the lighter paper, framed: the sheet's title block. */
.meridian-main [data-block] .kit-split > .kit-card {
  border-color: var(--meridian-rule);
  border-top: 3px solid var(--accent, #ff5a1f);
  background: var(--kit-surface);
}

/* ------------------------------------------------------------------ Figures */

/* Five or more figures in a row stand in narrower bays: smaller, so "1500 m²" stays on its line. */
.meridian-main .kit-grid:has(> :nth-child(5)) .kit-stat__value {
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
}

.meridian-main [data-block="stats_counter"] .kit-grid > .kit-stack {
  align-items: stretch;
  text-align: start;
}

.meridian-main [data-block="stats_counter"] .kit-grid > .kit-stack > .kit-icon {
  color: var(--kit-accent-text);
}

/* ------------------------------------------------------------------ Places and quotes */

/* The places a business serves: a ruled list in two or three columns, a place to a cell. */
.meridian-main [data-block="service_area"] .kit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--meridian-rule);
}

.meridian-main [data-block="service_area"] .kit-list-item {
  align-items: center;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--kit-line);
}

.meridian-main [data-block="service_area"] .kit-list-item > .kit-icon {
  color: var(--kit-accent-text);
}

@media (min-width: 64rem) {
  .meridian-main [data-block="service_area"] .kit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A quotation: the words first, large; under them the person, with their picture when there is one. */
.meridian-main [data-block="testimonials"] .kit-card__body > .kit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem 0.9rem;
}

.meridian-main [data-block="testimonials"] .kit-quote {
  display: contents;
}

.meridian-main [data-block="testimonials"] .kit-quote__text {
  grid-column: 1 / -1;
  grid-row: 1;
}

.meridian-main [data-block="testimonials"] .kit-avatar {
  grid-column: 1;
  grid-row: 2;
}

.meridian-main [data-block="testimonials"] .kit-quote__author {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

.meridian-main [data-block="testimonials"] .kit-row:not(:has(> .kit-avatar)) .kit-quote__author {
  grid-column: 1 / -1;
}

.meridian-main [data-block="testimonials"] .kit-card {
  border-top: 3px solid var(--kit-text);
}

/* ------------------------------------------------------------------ Plans */

/* The plan a website marks stands as a plate of the ink colour: every colour inside it turns, as in a dark section. */
.meridian-main [data-block="pricing_table"] .kit-card--surface {
  border-color: var(--primary, #17191c);
  background: var(--primary, #17191c);
  color: var(--on-primary, #f2f2ee);
  --kit-text: var(--on-primary, #f2f2ee);
  --kit-muted: color-mix(in srgb, var(--on-primary, #f2f2ee) 78%, transparent);
  --kit-surface: color-mix(in srgb, var(--on-primary, #f2f2ee) 9%, transparent);
  --kit-primary: var(--on-primary, #f2f2ee);
  --kit-primary-hover: color-mix(in srgb, var(--on-primary, #f2f2ee) 88%, var(--primary, #17191c));
  --kit-on-primary: var(--primary, #17191c);
  --kit-accent: var(--on-primary, #f2f2ee);
  --kit-accent-text: var(--on-primary, #f2f2ee);
  --kit-line: color-mix(in srgb, var(--on-primary, #f2f2ee) 26%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-primary, #f2f2ee) 52%, transparent);
}

/* ------------------------------------------------------------------ Pictures in rows */

/* A gallery is a contact sheet: tiles close together, each with its number in a small tab of the page colour. */
.meridian-main [data-block="image_gallery"] .kit-grid {
  --kit-gap: 0.25rem;
  gap: 0.25rem;
  counter-reset: meridian-figure;
}

.meridian-main [data-block="image_gallery"] .kit-grid > .kit-picture {
  counter-increment: meridian-figure;
}

.meridian-main [data-block="image_gallery"] .kit-grid > .kit-picture::after {
  content: counter(meridian-figure, decimal-leading-zero);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.3rem 0.5rem 0.25rem;
  background: var(--background, #f2f2ee);
  color: var(--text-primary, #17191c);
  font-size: 0.6875rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--meridian-body-strong);
  line-height: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------------ Slides */

/* A slide is composed like the full hero: the words at the lower left on the content's left edge, the controls at
   the lower right as square buttons. */
.meridian-main [data-block="hero_slider"] .kit-slide {
  align-items: flex-end;
}

.meridian-main [data-block="hero_slider"] .kit-slide__inner {
  max-width: var(--meridian-width);
  text-align: start;
}

.meridian-main [data-block="hero_slider"] .kit-slide .kit-heading {
  max-width: 18ch;
}

.meridian-main [data-block="hero_slider"] .kit-slideshow__controls {
  justify-content: flex-end;
  bottom: 1.5rem;
  padding-inline: var(--meridian-edge);
}

/* ------------------------------------------------------------------ Plates */

/* A dark or photographic section is a plate across the window with the grid drawn through it in fine lines. */
.meridian-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image, [data-block="cta_section"])::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: var(--meridian-edge);
  left: var(--meridian-edge);
  z-index: -1;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--kit-section-fg) 16%, transparent) 1px, transparent 1px) 0 0 / var(--meridian-bay) 100% repeat-x,
    linear-gradient(color-mix(in srgb, var(--kit-section-fg) 16%, transparent), color-mix(in srgb, var(--kit-section-fg) 16%, transparent)) 100% 0 / 1px 100% no-repeat;
  pointer-events: none;
}

/* The invitation without a photograph is the one place the accent colour fills the window: a band of it, with its own
   readable ink (on-accent on accent, a pair the colour contract keeps). The kit draws this block as a plain section, so
   every colour role is turned here the way the kit turns them in a dark band. Nothing is set fainter than the ink
   itself: a paler lead line would fall under the contrast the contract promises for this pair. */
.meridian-main [data-block="cta_section"]:not(.kit-section--image) {
  background-color: var(--accent, #ff5a1f);
  color: var(--on-accent, #17191c);
  --kit-section-bg: var(--accent, #ff5a1f);
  --kit-section-fg: var(--on-accent, #17191c);
  --kit-text: var(--on-accent, #17191c);
  --kit-muted: var(--on-accent, #17191c);
  --kit-surface: color-mix(in srgb, var(--on-accent, #17191c) 9%, transparent);
  --kit-surface-alt: color-mix(in srgb, var(--on-accent, #17191c) 14%, transparent);
  --kit-primary: var(--on-accent, #17191c);
  --kit-primary-hover: color-mix(in srgb, var(--on-accent, #17191c) 88%, var(--accent, #ff5a1f));
  --kit-on-primary: var(--accent, #ff5a1f);
  --kit-accent: var(--on-accent, #17191c);
  --kit-accent-text: var(--on-accent, #17191c);
  --kit-on-accent: var(--accent, #ff5a1f);
  --kit-line: color-mix(in srgb, var(--on-accent, #17191c) 26%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-accent, #17191c) 52%, transparent);
  --kit-soft: color-mix(in srgb, var(--on-accent, #17191c) 14%, transparent);
  --kit-focus: var(--on-accent, #17191c);
}

/* The band keeps the full space above its words: it is not the continuation of the section before it. */
.meridian-main .kit-root > [data-block="cta_section"].kit-section {
  margin-top: 0;
  padding-top: var(--kit-pad-normal);
}

.meridian-main [data-block="cta_section"]:not(.kit-section--image) .kit-text--lead {
  color: var(--on-accent, #17191c);
}

/* On the band a button's tab is the band's own colour, so a fine frame in the ink holds it to its button. */
.meridian-main [data-block="cta_section"]:not(.kit-section--image) .kit-button:not(.kit-button--small)::before {
  box-shadow: inset 0 0 0 1px currentColor;
}

.meridian-main [data-block="cta_section"]:not(.kit-section--image) .kit-button--secondary:not(.kit-button--small)::before {
  box-shadow: none;
}

.meridian-main [data-block="cta_section"] .kit-heading {
  font-size: clamp(2rem, 1.3rem + 3.4vw, 4.25rem);
  letter-spacing: -0.035em;
  line-height: 1.03;
}

@media (min-width: 64rem) {
  /* The heading and its line take three bays; the buttons stand in the last, at the foot, one under the other. */
  .meridian-main [data-block="cta_section"] .kit-section__inner > .kit-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    column-gap: 0;
  }

  .meridian-main [data-block="cta_section"] .kit-section__inner > .kit-stack > * {
    grid-column: 1 / 4;
    padding-inline-end: 2.5rem;
  }

  .meridian-main [data-block="cta_section"] .kit-section__inner > .kit-stack > .kit-button-group {
    display: grid;
    grid-column: 4;
    padding: 0;
  }

  .meridian-main [data-block="cta_section"] .kit-button-group > .kit-button {
    justify-content: space-between;
    width: 100%;
    text-align: start;
  }
}

/* ------------------------------------------------------------------ Article body */

.meridian-article {
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--meridian-gutter) var(--kit-pad-normal, 5rem);
}

.meridian-article__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--meridian-width);
  margin-inline: auto;
}

/* A post opens like a section: its date and author as a note, its title large, a line under both. */
.meridian-article__header {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--meridian-rule);
}

.meridian-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--text-secondary, #585c62);
  font-size: 0.875rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.meridian-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.25rem);
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.meridian-prose {
  max-width: 44rem;
}

@media (min-width: 64rem) {
  .meridian-article__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .meridian-article__header {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: start;
  }

  .meridian-article__byline {
    display: grid;
    grid-column: 1;
    gap: 0.15rem;
    padding-top: 0.75rem;
  }

  .meridian-article__byline > span[aria-hidden] {
    display: none;
  }

  .meridian-article__header h1 {
    grid-column: 2 / -1;
  }

  .meridian-prose {
    grid-column: 2 / -1;
  }
}

.meridian-prose > :first-child {
  margin-top: 0;
}

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

.meridian-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.3em;
}

.meridian-prose {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.meridian-prose :where(h2, h3, h4) {
  margin: 1.9em 0 0.55em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.022em;
  line-height: 1.18;
}

.meridian-prose h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
}

.meridian-prose h3 {
  font-size: 1.35rem;
}

.meridian-prose h4 {
  font-size: 1.125rem;
}

.meridian-prose a {
  color: var(--text-primary, #17191c);
  text-decoration-color: var(--accent-ink, #b93a0a);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.meridian-prose a:hover {
  color: var(--accent-ink, #b93a0a);
}

.meridian-prose blockquote {
  margin-inline: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent, #ff5a1f);
  color: var(--text-primary, #17191c);
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.meridian-prose img {
  display: block;
}

.meridian-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #585c62);
  font-size: 0.8125rem;
}

.meridian-prose :where(th, td) {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--meridian-line);
  text-align: left;
}

.meridian-prose th {
  border-bottom-color: var(--meridian-rule);
  font-size: 0.8125rem;
  font-weight: var(--meridian-body-strong);
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.meridian-prose table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

.meridian-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--meridian-line);
  background: var(--surface, #fbfbf8);
}

/* ------------------------------------------------------------------ Divider block */

/* line: a ruled line from edge to edge of the window with the grid's strokes on it, like a section's opening line
   without a number. dashed: fine dashes. dotted: three small squares. none: space. */
.meridian-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--meridian-edge);
}

.meridian-divider__line {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 1px solid var(--meridian-rule);
}

.meridian-divider--line::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.3125rem);
  right: var(--meridian-edge);
  left: var(--meridian-edge);
  height: 0.6875rem;
  background:
    linear-gradient(to right, var(--meridian-rule) 1px, transparent 1px) 0 0 / var(--meridian-bay) 100% repeat-x,
    linear-gradient(var(--meridian-rule), var(--meridian-rule)) 100% 0 / 1px 100% no-repeat;
}

.meridian-divider--dashed .meridian-divider__line {
  border-top-style: dashed;
}

.meridian-divider--dotted span {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--meridian-rule);
}

/* ------------------------------------------------------------------ Footer */

/* The sheet's title block: a plate of the ink colour ruled into cells, with the grid's lines drawn through it. */
.meridian-footer {
  position: relative;
  isolation: isolate;
  background: var(--primary, #17191c);
  color: var(--on-primary, #f2f2ee);
  --meridian-footer-line: color-mix(in srgb, var(--on-primary, #f2f2ee) 22%, transparent);
}

.meridian-footer__inner {
  max-width: calc(var(--meridian-width) + 2 * var(--meridian-gutter));
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--meridian-gutter) 1.5rem;
}

.meridian-footer--minimal .meridian-footer__inner {
  padding-block: 1.75rem;
}

.meridian-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.meridian-footer .meridian-brand__name {
  max-width: 100%;
  font-size: 1.5rem;
}

.meridian-footer .meridian-brand__logo,
.meridian-footer .brand-logo-original {
  max-height: 2.75rem;
  width: auto;
}

.meridian-footer .logo-mask {
  background-color: var(--on-primary, #f2f2ee) !important;
}

/* A logo in its own colours on the ink plate gets a small plate of the page colour, as over a photograph. */
.meridian-footer .brand-logo-original {
  padding: 0.3rem 0.5rem;
  background: var(--background, #f2f2ee);
}

.meridian-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.meridian-footer__invite {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

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

.meridian-footer__phone {
  color: inherit;
  font-size: 1.0625rem;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
}

.meridian-footer__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* The cells. On a phone one under another, each under a line; from a tablet side by side, parted by fine lines that
   stand on the grid. */
.meridian-footer__sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--meridian-footer-line);
}

.meridian-footer__cell {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.5rem;
  min-width: 0;
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid var(--meridian-footer-line);
  font-style: normal;
}

.meridian-footer__about {
  gap: 0.9rem;
}

@media (min-width: 40rem) {
  .meridian-footer__sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meridian-footer__cell {
    padding: 1.75rem 1.5rem 2.25rem;
    border-inline-start: 1px solid var(--meridian-footer-line);
  }

  .meridian-footer__cell:nth-child(2n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (min-width: 64rem) {
  .meridian-footer__sheet {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .meridian-footer__cell:nth-child(2n + 1) {
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid var(--meridian-footer-line);
  }

  .meridian-footer__cell:nth-child(4n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  /* Three cells in four bays: the first, with the name, takes two. */
  .meridian-footer__sheet:not(:has(> :nth-child(4))) > .meridian-footer__about:not(:only-child) {
    grid-column: span 2;
  }

  .meridian-footer__sheet:not(:has(> :nth-child(4))) > .meridian-footer__about ~ .meridian-footer__cell {
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid var(--meridian-footer-line);
  }
}

.meridian-footer__tagline,
.meridian-footer__contact p:not(.meridian-footer__title),
.meridian-footer__copyright {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.78;
}

.meridian-footer__tagline {
  max-width: 26rem;
}

/* A cell's name: small spaced capitals, as a title block labels its fields. */
.meridian-footer__title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--meridian-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.4;
  opacity: 0.62;
  text-transform: uppercase;
}

.meridian-footer__links,
.meridian-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  font-style: normal;
}

.meridian-footer__links {
  gap: 0.4rem;
}

.meridian-footer__links a,
.meridian-footer__contact a,
.meridian-footer__legal a,
.meridian-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-size: 0.9375rem;
  opacity: 0.86;
  text-decoration: none;
  overflow-wrap: break-word;
}

.meridian-footer__contact a {
  font-variant-numeric: lining-nums tabular-nums;
}

.meridian-footer__links a:hover,
.meridian-footer__contact a:hover,
.meridian-footer__legal a:hover,
.meridian-footer__inline a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.meridian-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--meridian-footer-line);
  color: inherit;
}

.meridian-footer__social a:hover {
  border-color: currentColor;
}

.meridian-footer__bottom,
.meridian-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.meridian-footer__bottom {
  padding-top: 1.25rem;
}

.meridian-footer__copyright {
  font-size: 0.8125rem;
}

.meridian-footer__legal,
.meridian-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.meridian-footer__legal a {
  font-size: 0.8125rem;
}

.meridian-footer--minimal .meridian-footer__legal {
  margin-top: 0.75rem;
}

/* The name, very large, standing under a dimension line as long as itself: the sheet's last measure. One line, sized by
   the name's length (the class the helper adds), so an ordinary name fits the width at every screen size; its box never
   cuts a mark above or below a letter. */
.meridian-footer__wordmark {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding-top: 0.14em;
  overflow-x: clip;
  overflow-y: visible;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(3.5rem, 21vw, 15rem);
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.045em;
  line-height: 1.02;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.meridian-footer__wordmark::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.6875rem;
  border-inline: 1px solid var(--accent, #ff5a1f);
  background: linear-gradient(var(--accent, #ff5a1f), var(--accent, #ff5a1f)) 0 50% / 100% 1px no-repeat;
}

.meridian-footer__wordmark--m {
  font-size: clamp(2.5rem, 14vw, 12rem);
}

.meridian-footer__wordmark--l {
  font-size: clamp(1.75rem, 9.6vw, 8.5rem);
}

.meridian-footer__wordmark--xl {
  font-size: clamp(1.25rem, 6.6vw, 5.9rem);
}

.meridian-footer__wordmark--xxl {
  font-size: clamp(0.95rem, 4.8vw, 4.3rem);
}

/* ------------------------------------------------------------------ Page not found */

.meridian-not-found {
  padding: clamp(3.5rem, 8vw, 7rem) var(--meridian-gutter) var(--kit-pad-normal, 6rem);
}

.meridian-not-found__inner {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  max-width: var(--meridian-width);
  margin-inline: auto;
}

/* The number, very large, standing on a dimension line as the sheet writes its measures. */
.meridian-not-found__number {
  position: relative;
  margin: 0 0 0.75rem;
  padding-top: 1.25rem;
  color: var(--text-primary, #17191c);
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(5rem, 3rem + 12vw, 12rem);
  font-variant-numeric: lining-nums;
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.meridian-not-found__number::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.6875rem;
  border-inline: 1px solid var(--accent-ink, #b93a0a);
  background: linear-gradient(var(--accent-ink, #b93a0a), var(--accent-ink, #b93a0a)) 0 50% / 100% 1px no-repeat;
}

.meridian-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.meridian-not-found p {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #585c62);
}

/* ------------------------------------------------------------------ Form thanks */

.meridian-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.meridian-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--meridian-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.meridian-form-success p {
  margin: 0;
  color: var(--text-secondary, #585c62);
}

/* ------------------------------------------------------------------ The phone action bar */

/* The shared bar (resilience.css) on the page colour under a ruled line, with the theme's square buttons. */
body .theme-action-bar {
  border-top: 1px solid var(--meridian-rule);
  background: var(--background, #f2f2ee);
}

/* ------------------------------------------------------------------ Drawing */

/* Where motion is on (theme.js marks the page meridian-draws only then), a section's opening line draws itself from
   the left and its number arrives as the section comes into view. Without the mark every line is simply there. */
html.meridian-draws .meridian-main [data-n] {
  transition: background-size 900ms var(--meridian-ease);
}

html.meridian-draws .meridian-main [data-n]::after {
  transition: transform 420ms var(--meridian-ease) 220ms;
}

html.meridian-draws .meridian-main [data-n]::before {
  transition: opacity 500ms ease 420ms;
}

html.meridian-draws .meridian-main [data-n]:not(.is-drawn) {
  background-size: 0 1px;
}

html.meridian-draws .meridian-main [data-n]:not(.is-drawn)::after {
  transform: translateY(-50%) scale(0);
}

html.meridian-draws .meridian-main [data-n]:not(.is-drawn)::before {
  opacity: 0;
}

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). The bar over a photograph can never
   learn that the page moved, so it is not sticky there: it stays on the photograph at the top of the page. */
@media (scripting: none) {
  .meridian-menu-button {
    display: none !important;
  }

  .meridian-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
  }

  .meridian-header:has(~ .meridian-main > .meridian-hero--full:first-child) {
    position: relative;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .meridian-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}