/*
 * Vital: modern healthcare. Fresh whites, a soft tint of the accent colour, crisp hairlines and rounded cards; icons sit
 * in soft tiles, every section heading carries a small plus in a tile, tinted bands hold a quiet pattern of plus signs,
 * and the opening hours, the phone and the booking button are where a patient looks for them first: the practice's
 * card on the opening, the header's top line, the phone menu and the footer's card.
 *
 * This file: the frame (header, phone menu, footer, announcement, breadcrumbs), the openings, the article, the divider,
 * the page not found, and the marks on the kit's sections that need a picture (the plus pattern). Everything inside a
 * kit block 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. The soft tint (--vital-tint, the
 * accent a tenth strong over the surface) carries only text-primary words and accent-ink marks, which keep their
 * contrast on it. theme-colour-pairs.test.mjs reads every rule here that sets both a background and a colour. A dark
 * palette is just other values for the same tokens: nothing here asks whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --vital-heading-weight and --vital-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) {
  --vital-width: 74rem;
  --vital-gutter: clamp(1rem, 4vw, 2.25rem);
  --vital-bar: 4.5rem;
  --vital-radius: 1rem;
  --vital-radius-lg: 1.5rem;
  --vital-button-radius: 0.75rem;
  --vital-heading-weight: 700;
  --vital-body-strong: 600;
  --vital-speed: 180ms;
  --vital-line: var(--border, #d3e2e8);
  /* The soft tint: icon tiles, the current menu item, chips, today's opening hours. */
  --vital-tint: color-mix(in srgb, var(--accent, #0b7f63) 11%, var(--surface, #ffffff));
  --vital-tint-strong: color-mix(in srgb, var(--accent, #0b7f63) 18%, var(--surface, #ffffff));
  --vital-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary, #0f2230) 6%, transparent), 0 10px 30px -18px color-mix(in srgb, var(--text-primary, #0f2230) 30%, transparent);
  --vital-shadow-lift: 0 2px 4px color-mix(in srgb, var(--text-primary, #0f2230) 6%, transparent), 0 22px 44px -22px color-mix(in srgb, var(--text-primary, #0f2230) 38%, transparent);
  /* One plus sign, and a tile of them for the quiet pattern on tinted bands (as masks: the colour is the palette's). */
  --vital-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15M4.5 12h15' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --vital-plus-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 13.5v9M13.5 18h9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

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

html {
  scroll-padding-top: calc(var(--vital-head, var(--vital-bar)) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #f4f8fa);
  color: var(--text-primary, #0f2230);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

.vital-main {
  display: block;
  min-height: 40vh;
}

.vital-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--vital-button-radius);
  background: var(--primary, #0f4560);
  color: var(--on-primary, #ffffff);
  font-weight: var(--vital-body-strong);
  text-decoration: none;
}

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

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

/* A soft tile for an icon: the accent a tenth strong, the icon in the accent's readable shade. */
.vital-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--vital-tint);
  color: var(--accent-ink, #096d55);
}

.vital-tile .vital-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.8;
}

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

/* One shape for every button the theme draws itself: rounded, never a pill. kit-theme.css gives the kit's buttons the same
   corner, and the line of this theme in resilience.css (--chrome-button-radius) gives it 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. */
.vital-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--vital-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.96875rem;
  font-weight: var(--vital-body-strong);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--vital-speed) ease, border-color var(--vital-speed) ease, box-shadow var(--vital-speed) ease, transform var(--vital-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. */
.vital-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vital-button:active {
  transform: translateY(1px);
}

.vital-button--primary {
  background: var(--primary, #0f4560);
  color: var(--on-primary, #ffffff);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--primary, #0f4560) 30%, transparent);
}

.vital-button--primary:hover {
  background: var(--primary-alt, #155775);
}

.vital-button--accent {
  background: var(--accent, #0b7f63);
  color: var(--on-accent, #ffffff);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent, #0b7f63) 30%, transparent);
}

/* 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. */
.vital-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 60%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--accent, #0b7f63) 60%, transparent);
}

.vital-button--secondary {
  border-color: color-mix(in srgb, var(--text-primary, #0f2230) 22%, transparent);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
}

.vital-button--secondary:hover {
  border-color: var(--accent-ink, #096d55);
  box-shadow: inset 0 0 0 1px var(--accent-ink, #096d55);
}

.vital-button--small {
  min-height: 2.625rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
}

.vital-button--block {
  width: 100%;
}

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

.vital-announcement {
  background: var(--accent, #0b7f63);
  color: var(--on-accent, #ffffff);
  font-size: 0.875rem;
}

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

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

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

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

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

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

.vital-announcement .announcement-dismiss:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

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

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

/* A white bar with a hairline that stays at the top; the centred kind adds a row for the menu, the topbar kind a line in
   the main colour above it. */
.vital-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--vital-line);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
}

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

.vital-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. */
.vital-header--centered .vital-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

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

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

.vital-header__rail {
  border-top: 1px solid var(--vital-line);
}

.vital-header__rail .vital-nav {
  justify-content: center;
  max-width: calc(var(--vital-width) + 2 * var(--vital-gutter));
  margin-inline: auto;
  padding: 0.35rem var(--vital-gutter);
}

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

/* The phone: a round mark, then "Call us" small over the number. */
.vital-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.vital-header__phone-mark {
  display: inline-grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--vital-tint);
  color: var(--accent-ink, #096d55);
  transition: background-color var(--vital-speed) ease;
}

.vital-header__phone-mark .vital-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.vital-header__phone-text {
  display: grid;
  line-height: 1.2;
}

.vital-header__phone-label {
  color: var(--text-secondary, #475c6b);
  font-size: 0.75rem;
}

.vital-header__phone-number {
  font-size: 0.9375rem;
  font-weight: var(--vital-body-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.vital-header__phone:hover .vital-header__phone-mark {
  background: var(--vital-tint-strong);
}

.vital-header__phone:hover .vital-header__phone-number {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

/* The website's name. 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. */
.vital-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.vital-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--vital-heading-weight);
  letter-spacing: -0.015em;
  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. */
.vital-header .vital-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) {
  .vital-header .vital-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.125rem;
  }
}

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

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

.vital-header .logo-mask {
  background-color: var(--text-primary, #0f2230) !important;
}

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

/* The top line: the hours, the phone and the email in the main colour, the way a clinic's door sign reads. */
.vital-topbar {
  background: var(--primary, #0f4560);
  color: var(--on-primary, #ffffff);
  font-size: 0.8125rem;
}

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

.vital-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.6rem;
  min-width: 0;
}

.vital-topbar__hours,
.vital-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.vital-topbar__icon {
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.8;
}

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

.vital-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

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

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

@media (max-width: 79.99rem) {
  .vital-topbar__item--email {
    display: none;
  }
}

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

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

.vital-header--simple .vital-nav,
.vital-header--topbar .vital-nav {
  margin-left: auto;
}

.vital-nav__item {
  position: relative;
  /* 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. */
  min-width: 0;
}

.vital-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--vital-button-radius);
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--vital-body-strong);
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--vital-speed) ease;
}

.vital-nav__item > a:hover,
.vital-nav__item--parent:focus-within > a {
  background: color-mix(in srgb, var(--text-primary, #0f2230) 6%, var(--surface, #ffffff));
}

/* The page being shown: the soft tint, with a small dot of the accent before it. */
.vital-nav__item.is-current > a {
  background: var(--vital-tint);
}

.vital-nav__item.is-current > a::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent, #0b7f63);
}

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

.vital-nav__children {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.45rem;
  border: 1px solid var(--vital-line);
  border-radius: var(--vital-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
  box-shadow: var(--vital-shadow-lift);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity var(--vital-speed) ease, transform var(--vital-speed) ease, visibility 0s linear var(--vital-speed);
}

/* A bridge over the gap between the item and its list, so the pointer does not drop the list on its way down. */
.vital-nav__children::before {
  content: "";
  position: absolute;
  inset: -0.5rem 0 auto;
  height: 0.5rem;
}

.vital-nav__item--parent:is(:hover, :focus-within) > .vital-nav__children {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--vital-speed) ease, transform var(--vital-speed) ease, visibility 0s;
}

.vital-nav__children a {
  padding: 0.55rem 0.8rem;
  border-radius: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.vital-nav__children a:hover {
  background: var(--vital-tint);
}

/* The menu button: three lines that turn 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). */
.vital-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--vital-line);
  border-radius: var(--vital-button-radius);
  background: var(--surface, #ffffff);
  color: inherit;
  cursor: pointer;
}

.vital-menu-button:hover {
  border-color: var(--accent-ink, #096d55);
}

.vital-menu-button__lines {
  display: grid;
  gap: 0.28rem;
  width: 1.15rem;
}

.vital-menu-button__lines i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--vital-speed) ease, opacity var(--vital-speed) ease;
}

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

.vital-menu-button[aria-expanded="true"] .vital-menu-button__lines i:nth-child(2) {
  opacity: 0;
}

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

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

/* A panel under the bar with every page, then the practice's card and the button. It scrolls inside itself when the
   pages are many, so the last one is always reachable. */
.vital-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--vital-head). With the bar's own height here, the foot of a long menu lay under the window's edge and its last
     link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--vital-head, var(--vital-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--vital-line);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #0f2230) 40%, transparent);
}

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

.vital-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem var(--vital-gutter) 1.5rem;
}

.vital-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.vital-drawer__nav {
  display: grid;
}

.vital-drawer__item {
  border-bottom: 1px solid var(--vital-line);
}

/* 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. */
.vital-drawer__link {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.1875rem;
  font-weight: var(--vital-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-decoration: none;
}

.vital-drawer__link:hover {
  color: var(--accent-ink, #096d55);
}

.vital-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 0.75rem;
}

.vital-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #475c6b);
  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) {
  .vital-nav,
  .vital-header__rail,
  .vital-header__phone,
  .vital-header__cta,
  .vital-header__slot {
    display: none;
  }

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

  .vital-header--centered .vital-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) .vital-drawer {
    display: none;
  }
}

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

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

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

.vital-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #475c6b);
  font-size: 0.875rem;
  list-style: none;
}

.vital-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.vital-breadcrumbs li + li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
}

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

.vital-breadcrumbs a:hover {
  color: var(--accent-ink, #096d55);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.vital-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #0f2230);
  font-weight: var(--vital-body-strong);
}

/* ------------------------------------------------------------------ Opening hours */

/* The days at the left, the times at the right in figures of one width, so the times line up. Today's line (theme.js
   marks it from the days each line covers) stands on the soft tint with a dot of the accent. */
.vital-hours {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.vital-hours li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1.25rem;
  padding: 0.2rem 0.55rem;
  margin-inline: -0.55rem;
  border-radius: 0.5rem;
}

.vital-hours__times {
  margin-inline-start: auto;
  font-weight: var(--vital-body-strong);
  white-space: nowrap;
}

.vital-hours li.is-today {
  background: var(--vital-tint);
  color: var(--text-primary, #0f2230);
}

.vital-hours li.is-today .vital-hours__days::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-inline-end: 0.45rem;
  border-radius: 50%;
  background: var(--accent, #0b7f63);
  vertical-align: 0.12em;
}

/* In the top line the hours run on one line, parted by a dot. */
.vital-hours--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.9rem;
}

.vital-hours--inline li {
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.vital-hours--inline li + li::before {
  content: "\00b7";
  margin-inline-end: 0.5rem;
  opacity: 0.7;
}

.vital-hours--inline .vital-hours__times {
  margin: 0;
  font-weight: 400;
}

.vital-hours--inline li.is-today {
  background: none;
  color: inherit;
}

.vital-hours--inline li.is-today .vital-hours__days::before {
  display: none;
}

.vital-hours--inline li.is-today .vital-hours__times {
  font-weight: var(--vital-body-strong);
}

/* ------------------------------------------------------------------ The practice's card */

.vital-care {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--vital-line);
  border-radius: var(--vital-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
  box-shadow: var(--vital-shadow-lift);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.vital-care__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.vital-care__item > :last-child {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.15rem;
}

.vital-care__item--hours > .vital-hours {
  padding-top: 0.35rem;
}

.vital-care__text {
  display: grid;
  margin: 0;
}

.vital-care__label {
  color: var(--text-secondary, #475c6b);
  font-size: 0.8125rem;
}

.vital-care__link {
  width: fit-content;
  max-width: 100%;
  color: var(--text-primary, #0f2230);
  font-weight: var(--vital-body-strong);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.vital-care__link:hover {
  color: var(--accent-ink, #096d55);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.vital-care__place {
  padding-top: 0.45rem;
  color: var(--text-secondary, #475c6b);
}

/* In the phone menu the card lies flat. */
.vital-care--drawer {
  padding: 1rem;
  border-radius: var(--vital-radius);
  background: var(--background, #f4f8fa);
  box-shadow: none;
}

/* ------------------------------------------------------------------ Openings: shared */

.vital-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
  font-weight: var(--vital-heading-weight);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

.vital-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #475c6b);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.vital-hero__actions,
.vital-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------ Split opening */

/* The opening's ground: the tinted surface fading into the page, so it reads as the top of the page, not a band. */
.vital-hero--split {
  padding: clamp(2.5rem, 6vw, 5rem) var(--vital-gutter) clamp(3rem, 7vw, 6rem);
  background: linear-gradient(180deg, var(--surface-alt, #e6f1f3) 0%, var(--background, #f4f8fa) 100%);
}

.vital-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  max-width: var(--vital-width);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .vital-hero--split:not(.vital-hero--words) .vital-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.vital-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.35rem;
  min-width: 0;
}

.vital-hero--words .vital-hero__copy {
  justify-items: center;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.vital-hero__points {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.vital-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.vital-hero__tick {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--vital-tint-strong);
  color: var(--accent-ink, #096d55);
}

.vital-hero__icon {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: 2.4;
}

.vital-hero--words :is(.vital-hero__actions, .vital-hero__badges) {
  justify-content: center;
}

.vital-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #475c6b);
  font-size: 0.9375rem;
}

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

.vital-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, var(--text-primary, #0f2230) 20%, transparent);
}

.vital-stars svg.is-full {
  fill: var(--accent-ink, #096d55);
}

.vital-hero__trustpilot {
  color: var(--accent-ink, #096d55);
  font-weight: var(--vital-body-strong);
}

/* The picture: a rounded frame, upright on a wide screen, over a soft tile of the accent colour set a little up and to
   the right, with the quiet plus pattern in it. */
.vital-hero__visual {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.vital-hero__plate {
  position: absolute;
  /* On a phone the tile stays inside the page's gutter: past it, the page would scroll sideways. */
  inset: -0.75rem -0.6rem 2rem 2rem;
  z-index: -1;
  border-radius: calc(var(--vital-radius-lg) + 0.5rem);
  background: var(--vital-tint-strong);
}

.vital-hero__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent, #0b7f63) 34%, transparent);
  -webkit-mask: var(--vital-plus-tile) -3px -3px / 26px 26px repeat;
  mask: var(--vital-plus-tile) -3px -3px / 26px 26px repeat;
}

.vital-hero__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--vital-radius-lg);
  background: var(--surface-alt, #e6f1f3);
  box-shadow: var(--vital-shadow);
}

.vital-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 56rem) {
  .vital-hero__plate {
    inset: -1.75rem -1.75rem 3.5rem 3.5rem;
  }

  .vital-hero--split .vital-hero__image {
    aspect-ratio: 5 / 6;
    max-height: min(40rem, calc(100svh - var(--vital-head, var(--vital-bar)) - 6rem));
  }
}

/* The practice's card on the picture's lower left corner, a little outside the frame. */
.vital-hero__visual .vital-care--card {
  position: relative;
  width: min(100% - 1.5rem, 21rem);
  margin: -3rem 0 0 0.75rem;
}

@media (min-width: 56rem) {
  .vital-hero__visual .vital-care--card {
    position: absolute;
    bottom: 1.75rem;
    left: -2.25rem;
    margin: 0;
  }
}

.vital-hero--words .vital-care--strip {
  margin-top: 0.5rem;
  text-align: left;
}

/* ------------------------------------------------------------------ Full opening: the clinic window */

/* The frame takes what is left of the first screen under the header (and under a breadcrumb on an inner page), less
   the card's foot and the strip, so the buttons end on the first screen. theme.js says where the opening starts
   (--vital-opening-top); until then, the header's height and the space above. */
.vital-hero--full {
  --vital-above: var(--vital-opening-top, calc(var(--vital-head, var(--vital-bar)) + 1rem));
  padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(0.75rem, 1.5vw, 1.25rem) clamp(2.5rem, 5vw, 4rem);
}

.vital-main > nav[aria-label]:first-child + .vital-hero--full {
  --vital-above: var(--vital-opening-top, calc(var(--vital-head, var(--vital-bar)) + 1.25rem + 0.875rem * 1.6 + 1.25rem));
  padding-top: 1rem;
}

.vital-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 92rem;
  margin-inline: auto;
}

.vital-hero__frame {
  position: relative;
  grid-row: 1;
  grid-column: 1 / -1;
  height: clamp(15rem, 52vw, 24rem);
  overflow: hidden;
  border-radius: var(--vital-radius-lg);
  background: var(--surface-alt, #e6f1f3);
}

.vital-hero__frame > :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A quiet shade: the words are on the card, so the picture needs none to be read. The block's tint deepens it. */
.vital-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / min(0.6, calc(0.14 * var(--pgs-tint, 1)))) 100%);
}

.vital-hero__panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  grid-row: 2;
  margin: -3.25rem 0.75rem 0;
  padding: clamp(1.4rem, 3.5vw, 2.5rem);
  border: 1px solid var(--vital-line);
  border-radius: var(--vital-radius-lg);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
  box-shadow: var(--vital-shadow-lift);
}

.vital-hero__panel .vital-hero__title {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem);
}

.vital-hero--full .vital-care--strip {
  grid-row: 3;
  margin: 1.25rem 0.75rem 0;
}

@media (min-width: 56rem) {
  .vital-hero__stage {
    grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(3.5rem, auto);
    column-gap: 1.5rem;
  }

  .vital-hero__frame {
    height: auto;
    min-height: clamp(22rem, calc(100svh - var(--vital-above) - 9rem), 46rem);
  }

  /* The card stands in the left column across the frame's foot and the row under it: its top over the picture, its
     foot below the frame. */
  .vital-hero__panel {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: end;
    margin: 0 0 0 clamp(1.25rem, 3.5vw, 3rem);
  }

  .vital-hero--full .vital-care--strip {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
    margin: 1.25rem 0 0;
  }
}

/* The strip: the hours, the phone and the address side by side, parted by hairlines. */
.vital-care--strip {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem 1.5rem;
  box-shadow: var(--vital-shadow);
}

/* ------------------------------------------------------------------ The plus on the kit's sections */

/* A tinted band holds a quiet pattern of plus signs, strongest in its upper right corner and gone before the middle. The
   kit's section is isolated and positioned, so the pattern lies between its fill and its content. */
.kit-section--muted::before,
.kit-section--inverse::before,
.kit-section--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--accent, #0b7f63) 26%, transparent);
  -webkit-mask: var(--vital-plus-tile) 0 0 / 36px 36px repeat, radial-gradient(ellipse 42% 70% at 100% 0%, #000 0%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: var(--vital-plus-tile) 0 0 / 36px 36px repeat, radial-gradient(ellipse 42% 70% at 100% 0%, #000 0%, transparent 100%);
  mask-composite: intersect;
}

.kit-section--inverse::before,
.kit-section--accent::before {
  background: color-mix(in srgb, var(--kit-section-fg, #ffffff) 16%, transparent);
}

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

.vital-article {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--vital-gutter);
}

.vital-article__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.vital-article__header {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  margin-bottom: 2.25rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--vital-line);
}

.vital-article__byline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--vital-tint);
  color: var(--text-primary, #0f2230);
  font-size: 0.8125rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.vital-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.875rem);
  font-weight: var(--vital-heading-weight);
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-wrap: balance;
}

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

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

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

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

.vital-prose h2 {
  font-size: 1.625rem;
}

.vital-prose h3 {
  font-size: 1.3rem;
}

.vital-prose h4 {
  font-size: 1.1rem;
}

.vital-prose a {
  color: var(--accent-ink, #096d55);
  text-underline-offset: 0.2em;
}

/* A plain list's items each start with a small plus in the accent. */
.vital-prose ul {
  padding-inline-start: 0;
  list-style: none;
}

.vital-prose ul > li {
  position: relative;
  padding-inline-start: 1.6rem;
}

.vital-prose ul > li + li {
  margin-top: 0.4em;
}

.vital-prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.48em;
  left: 0.15rem;
  width: 0.7em;
  height: 0.7em;
  background: var(--accent-ink, #096d55);
  -webkit-mask: var(--vital-plus) center / contain no-repeat;
  mask: var(--vital-plus) center / contain no-repeat;
}

.vital-prose ol {
  padding-inline-start: 1.4rem;
}

.vital-prose ol > li::marker {
  color: var(--accent-ink, #096d55);
  font-weight: var(--vital-body-strong);
}

.vital-prose blockquote {
  margin-inline: 0;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--accent, #0b7f63);
  border-radius: 0 var(--vital-radius) var(--vital-radius) 0;
  background: var(--surface-alt, #e6f1f3);
  color: var(--text-primary, #0f2230);
}

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

.vital-prose img {
  display: block;
  border-radius: var(--vital-radius);
}

.vital-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #475c6b);
  font-size: 0.875rem;
}

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

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

.vital-prose th {
  font-weight: var(--vital-body-strong);
}

.vital-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--vital-radius);
  background: var(--surface-alt, #e6f1f3);
}

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

.vital-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: calc(var(--vital-width) + 2 * var(--vital-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--vital-gutter);
}

.vital-divider__line {
  width: 100%;
  border-top: 1px solid var(--vital-line);
}

/* The plain line carries the theme's plus in its middle. */
.vital-divider--line {
  gap: 1rem;
}

.vital-divider--line .vital-divider__mark {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--accent, #0b7f63);
  -webkit-mask: var(--vital-plus) center / contain no-repeat;
  mask: var(--vital-plus) center / contain no-repeat;
}

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

.vital-divider--dotted span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--accent, #0b7f63);
  opacity: 0.6;
}

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

/* The footer on the tinted surface with the page's own text colours: the same pair in every palette and with a website's
   own colours, so it reads everywhere without a rule of its own for dark palettes. Its card (the hours beside the
   contact details) stands on the surface colour inside it. */
.vital-footer {
  border-top: 1px solid var(--vital-line);
  background: var(--surface-alt, #e6f1f3);
  color: var(--text-primary, #0f2230);
}

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

.vital-footer--minimal {
  background: var(--surface, #ffffff);
}

.vital-footer--minimal .vital-footer__inner {
  padding-block: 1.5rem;
}

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

.vital-footer .vital-brand__name {
  max-width: 100%;
}

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

.vital-footer .logo-mask {
  background-color: var(--text-primary, #0f2230) !important;
}

/* The mega footer opens with an invitation and the booking button, on the surface colour. */
.vital-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--vital-line);
  border-radius: var(--vital-radius-lg);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
}

.vital-footer__invite {
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  font-weight: var(--vital-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

/* The name, the pages and the card: three parts on a wide screen, one under another on a phone. */
.vital-footer__grid {
  display: grid;
  gap: 2rem 2.5rem;
}

@media (min-width: 48rem) {
  .vital-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .vital-footer__card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .vital-footer__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1.6fr);
  }

  .vital-footer__card {
    grid-column: auto;
  }
}

.vital-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  align-content: start;
  gap: 1.75rem 2rem;
}

.vital-footer__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.85rem;
}

.vital-footer__tagline,
.vital-footer__copyright {
  margin: 0;
  color: var(--text-secondary, #475c6b);
  font-size: 0.9375rem;
}

.vital-footer__title {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: var(--vital-body-strong);
  line-height: 1.4;
}

.vital-footer__links {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.vital-footer__links a,
.vital-footer__contact a,
.vital-footer__legal a,
.vital-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--text-secondary, #475c6b);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.vital-footer__links a:hover,
.vital-footer__contact a:hover,
.vital-footer__legal a:hover,
.vital-footer__inline a:hover {
  color: var(--text-primary, #0f2230);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The card: the hours beside the contact details. */
.vital-footer__card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  align-content: start;
  gap: 1.5rem 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--vital-line);
  border-radius: var(--vital-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
  font-size: 0.9375rem;
}

.vital-footer__hours {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.75rem;
}

.vital-footer__hours .vital-hours {
  justify-self: stretch;
  max-width: 18rem;
}

.vital-footer__contact {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.4rem;
  font-style: normal;
}

.vital-footer__contact > .vital-tile {
  margin-bottom: 0.35rem;
}

.vital-footer__contact p:not(.vital-footer__title) {
  margin: 0;
  color: var(--text-secondary, #475c6b);
}

.vital-footer__contact a.vital-footer__phone {
  color: var(--text-primary, #0f2230);
  font-weight: var(--vital-body-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.vital-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--vital-line);
  border-radius: 0.65rem;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f2230);
}

.vital-footer__social a:hover {
  border-color: var(--accent-ink, #096d55);
  color: var(--accent-ink, #096d55);
}

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

.vital-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--vital-line);
}

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

.vital-footer__legal a {
  font-size: 0.875rem;
}

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

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

.vital-not-found {
  padding: clamp(4rem, 9vw, 7rem) var(--vital-gutter);
  background: linear-gradient(180deg, var(--surface-alt, #e6f1f3) 0%, var(--background, #f4f8fa) 100%);
  text-align: center;
}

.vital-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 36rem;
  margin-inline: auto;
}

/* The number in a soft tile, with the plus of the theme beside it. */
.vital-not-found__number {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--vital-tint);
  color: var(--text-primary, #0f2230);
  font-size: 0.9375rem;
  font-weight: var(--vital-body-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

.vital-not-found__number::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background: var(--accent-ink, #096d55);
  -webkit-mask: var(--vital-plus) center / contain no-repeat;
  mask: var(--vital-plus) center / contain no-repeat;
}

.vital-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.875rem);
  font-weight: var(--vital-heading-weight);
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}

.vital-not-found p {
  margin: 0;
  color: var(--text-secondary, #475c6b);
}

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

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

.vital-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--vital-heading-weight);
  line-height: 1.25;
}

.vital-form-success p {
  margin: 0;
  color: var(--text-secondary, #475c6b);
}

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

/* The shared bar (resilience.css) on the theme's surface, with its button. */
body .theme-action-bar {
  border-top: 1px solid var(--vital-line);
  background: var(--surface, #ffffff);
}

/* ------------------------------------------------------------------ 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). */
@media (scripting: none) {
  .vital-menu-button {
    display: none !important;
  }

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

@media (scripting: none) and (min-width: 64rem) {
  .vital-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;
  }
}