/*
 * Circuit: the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the three blocks the
 * theme draws itself (the split hero, the article body, the divider), and the theme's own composition of the kit's
 * sections (the end of this file). Everything inside a kit block is in kit-theme.css.
 *
 * The idea: an instrument panel, precise and calm. The page is dark first. A fine grid is drawn behind the openings,
 * the invitations and the footer and fades out towards the words; small labels are in a monospaced face in spaced
 * capitals with a lit dot before them; panels have a fine border that is lit along the top by the accent; the accent is
 * kept for what is live (a dot, a lit edge, the one button) and glows softly.
 *
 * 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. The two places the palette does not decide are words on a photograph (white on the
 * theme's own shade) and the grid's lines (a faint mix of the page's text colour).
 *
 * Type comes from the layout: --font-heading, --font-body, --circuit-heading-weight and --circuit-body-strong (the
 * heaviest weights the font palette loads), and --circuit-mono, the monospaced face of the small labels and figures,
 * which the layout loads in two weights (400 and 500) whatever the font palette. Never write a font-weight number other
 * than 400 here, except 500 for the monospaced face.
 */

/* ------------------------------------------------------------------ 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 (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --circuit-width: 74rem;
  --circuit-gutter: clamp(1rem, 4vw, 2rem);
  --circuit-bar: 4rem;
  --circuit-radius: 0.625rem;
  --circuit-button-radius: 0.375rem;
  --circuit-heading-weight: 600;
  --circuit-body-strong: 600;
  --circuit-speed: 180ms;
  --circuit-line: var(--border, #213042);
  --circuit-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --circuit-scale: 1;
  /* The grid: a fine line of the page's own text colour every 2.5rem. */
  --circuit-grid-size: 2.5rem;
  --circuit-grid-line: color-mix(in srgb, var(--text-primary, #e8eef5) 7%, transparent);
  --circuit-grid: linear-gradient(var(--circuit-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--circuit-grid-line) 1px, transparent 1px);
  /* A lit line: the accent at full strength at its start, fading out. */
  --circuit-lit: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent, #34e3e0) 85%, transparent) 30%, color-mix(in srgb, var(--accent, #34e3e0) 85%, transparent) 50%, transparent);
}

/* ------------------------------------------------------------------ Faces */

/* A monospaced or wide heading face takes more room for the same words. The layout names the heading face on <body>, and
   each wide face is set at the size where an ordinary word takes about the room it takes in the others: the sizes in the
   theme's guide hold for every font palette. A face that is not listed (a website's own) is set at the plain size. */
.circuit-face--fira-code { --circuit-scale: 0.8; }
.circuit-face--sora { --circuit-scale: 0.9; }
.circuit-face--space-grotesk { --circuit-scale: 0.96; }
.circuit-face--rubik,
.circuit-face--manrope { --circuit-scale: 0.96; }

/* The monospaced face draws no joined letters ("www", "->"): a label reads as it was written. */
.circuit-mono {
  font-family: var(--circuit-mono);
  font-variant-ligatures: none;
}

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

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

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

body {
  margin: 0;
  background: var(--background, #090d13);
  color: var(--text-primary, #e8eef5);
  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;
}

::selection {
  background: var(--accent, #34e3e0);
  color: var(--on-accent, #03201f);
}

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

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

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

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

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

/* A lit dot, like an indicator on a panel: the accent with a faint ring and a glow. */
.circuit-led {
  display: inline-block;
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #34e3e0) 20%, transparent), 0 0 10px var(--accent, #34e3e0);
}

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

/* One shape for every button the theme draws itself. 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. */
.circuit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.875rem;
  max-width: 100%;
  padding: 0.65rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--circuit-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--circuit-body-strong);
  letter-spacing: 0.005em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--circuit-speed) ease, border-color var(--circuit-speed) ease, box-shadow var(--circuit-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. */
.circuit-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.circuit-button--primary {
  border-color: var(--primary, #e8eef5);
  background: var(--primary, #e8eef5);
  color: var(--on-primary, #0a0f15);
}

.circuit-button--primary:hover {
  border-color: var(--primary-alt, #ffffff);
  background: var(--primary-alt, #ffffff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #e8eef5) 20%, transparent), 0 10px 28px -14px var(--primary, #e8eef5);
}

/* The accent button (the header's and the footer's one button) is lit: it glows softly in its own colour. */
.circuit-button--accent {
  border-color: var(--accent, #34e3e0);
  background: var(--accent, #34e3e0);
  color: var(--on-accent, #03201f);
  box-shadow: 0 0 22px -8px var(--accent, #34e3e0);
}

/* The hover is a ring in the words' colour and a stronger glow, not a lighter fill: a lighter fill would bring the words'
   contrast under what the colour contract promises for this pair. */
.circuit-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #03201f) 45%, transparent), 0 0 32px -6px var(--accent, #34e3e0);
}

.circuit-button--secondary {
  border-color: color-mix(in srgb, var(--accent, #34e3e0) 70%, transparent);
  background: color-mix(in srgb, var(--accent, #34e3e0) 7%, transparent);
  color: var(--text-primary, #e8eef5);
}

.circuit-button--secondary:hover {
  border-color: var(--accent, #34e3e0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #34e3e0) 20%, transparent), 0 10px 28px -12px var(--accent, #34e3e0);
}

.circuit-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
}

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

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

/* A slim line above the header on the surface, its message after a lit dot. */
.circuit-announcement {
  border-bottom: 1px solid var(--circuit-line);
  background: var(--surface, #0e151e);
  color: var(--text-primary, #e8eef5);
  font-size: 0.875rem;
}

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

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

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

.circuit-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--accent-ink, #5ee8e5);
}

.circuit-announcement a {
  color: var(--accent-ink, #5ee8e5);
  font-weight: var(--circuit-body-strong);
  text-underline-offset: 0.25em;
}

.circuit-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--circuit-button-radius);
  background: none;
  color: inherit;
  cursor: pointer;
}

.circuit-announcement .announcement-dismiss:hover {
  background: color-mix(in srgb, var(--text-primary, #e8eef5) 10%, transparent);
}

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

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

/* A bar of the page colour, a little clear, with what passes under it blurred, and a lit line along its foot that is
   brightest in the middle. The bar has one height for every kind; the centred kind adds a row for the menu. */
.circuit-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--circuit-line);
  background: color-mix(in srgb, var(--background, #090d13) 86%, transparent);
  color: var(--text-primary, #e8eef5);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}

.circuit-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--circuit-lit);
  opacity: 0.55;
  pointer-events: none;
}

.circuit-header.is-open {
  background: var(--background, #090d13);
}

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

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

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

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

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

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

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

/* The phone number in the monospaced face, after a lit dot: the line is open. */
.circuit-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  font-family: var(--circuit-mono);
  font-size: 0.875rem;
  font-variant-ligatures: none;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.circuit-header__phone::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 8px var(--accent, #34e3e0);
}

.circuit-header__phone:hover {
  color: var(--accent-ink, #5ee8e5);
}

.circuit-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. A name
   is set looser than a heading: at a tight spacing "rn" reads as "m". */
.circuit-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

/* Without a logo, a small lit chip stands before the name, like the power light of a device. */
.circuit-brand:not(:has(.circuit-brand__logo, .brand-logo-original, .logo-mask))::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.125rem;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #34e3e0) 18%, transparent), 0 0 14px var(--accent, #34e3e0);
}

.circuit-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: calc(1.1875rem * var(--circuit-scale));
  font-weight: var(--circuit-heading-weight);
  letter-spacing: 0;
  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. */
.circuit-header .circuit-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) {
  .circuit-header .circuit-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.0625rem * var(--circuit-scale));
  }
}

.circuit-brand:has(.circuit-brand__logo, .brand-logo-original, .logo-mask) .circuit-brand__name {
  font-size: calc(1.0625rem * var(--circuit-scale));
}

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

/* A drawn logo without a stated size takes no room in a row (Folio, 4.32.0): it gets a height, its width follows. */
.circuit-brand img.circuit-brand__logo[src$=".svg"] {
  height: 2.5rem;
}

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

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

/* The slim line above the bar: the contact details in the monospaced face. */
.circuit-topbar {
  border-bottom: 1px solid var(--circuit-line);
  background: var(--background, #090d13);
  color: var(--text-secondary, #94a3b5);
  font-family: var(--circuit-mono);
  font-size: 0.75rem;
  font-variant-ligatures: none;
  letter-spacing: 0.02em;
}

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

.circuit-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
}

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

.circuit-topbar a:hover {
  color: var(--text-primary, #e8eef5);
}

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

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

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

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

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

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

.circuit-nav__item {
  position: relative;
}

.circuit-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--circuit-button-radius);
  color: var(--text-secondary, #94a3b5);
  font-size: 0.9375rem;
  font-weight: var(--circuit-body-strong);
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--circuit-speed) ease, background-color var(--circuit-speed) ease;
}

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

.circuit-nav__item > a:hover,
.circuit-nav__item--parent:focus-within > a {
  background: color-mix(in srgb, var(--text-primary, #e8eef5) 7%, transparent);
  color: var(--text-primary, #e8eef5);
}

/* The page being shown: its name in the full text colour after a lit dot. */
.circuit-nav__item.is-current > a {
  color: var(--text-primary, #e8eef5);
}

.circuit-nav__item.is-current > a::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 8px var(--accent, #34e3e0);
}

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

.circuit-nav__children {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem;
  border: 1px solid var(--circuit-line);
  border-radius: var(--circuit-radius);
  background: var(--surface, #0e151e);
  color: var(--text-primary, #e8eef5);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.55), 0 0 0 1px color-mix(in srgb, var(--accent, #34e3e0) 12%, transparent);
  visibility: hidden;
  opacity: 0;
}

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

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

.circuit-nav__children a {
  padding: 0.55rem 0.75rem;
  border-radius: calc(var(--circuit-radius) - 0.25rem);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.circuit-nav__children a:hover {
  background: var(--surface-alt, #121b26);
  color: var(--text-primary, #e8eef5);
}

/* 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). */
.circuit-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--circuit-line);
  border-radius: var(--circuit-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.circuit-menu-button:hover,
.circuit-menu-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent, #34e3e0) 70%, transparent);
  box-shadow: 0 0 14px -4px var(--accent, #34e3e0);
}

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

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

.circuit-menu-button__lines i:nth-child(2) {
  width: 70%;
  justify-self: end;
}

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

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

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

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

/* A panel under the bar with every page, numbered in the monospaced face like the lines of a listing. It scrolls inside
   itself when the pages are many, so the last one is always reachable. */
.circuit-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
     (--circuit-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(--circuit-head, var(--circuit-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--circuit-line);
  background: var(--background, #090d13);
  color: var(--text-primary, #e8eef5);
  box-shadow: 0 30px 50px -30px rgb(0 0 0 / 0.6);
}

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

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

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

.circuit-drawer__nav {
  counter-reset: circuit-line;
}

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

/* A page name in the heading face after its number. data-fit-text (includes/chrome.php) lets the shared script set a
   long single word smaller instead of breaking it. */
.circuit-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.85rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.25rem * var(--circuit-scale));
  font-weight: var(--circuit-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.circuit-drawer__link::before {
  content: counter(circuit-line, decimal-leading-zero);
  flex: none;
  color: var(--accent-ink, #5ee8e5);
  font-family: var(--circuit-mono);
  font-size: 0.75rem;
  font-variant-ligatures: none;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.circuit-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 2.15rem;
}

.circuit-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #94a3b5);
  text-decoration: none;
}

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

.circuit-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #94a3b5);
  font-family: var(--circuit-mono);
  font-size: 0.9375rem;
  font-variant-ligatures: none;
  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) {
  .circuit-nav,
  .circuit-header__rail,
  .circuit-header__phone,
  .circuit-header__cta,
  .circuit-header__slot {
    display: none;
  }

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

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

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

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

/* The way to the page, written like a path in the monospaced face. */
.circuit-breadcrumbs {
  max-width: calc(var(--circuit-width) + 2 * var(--circuit-gutter));
  margin-inline: auto;
  padding: 1.25rem var(--circuit-gutter) 0;
}

.circuit-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #94a3b5);
  font-family: var(--circuit-mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
  list-style: none;
}

.circuit-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--accent-ink, #5ee8e5);
}

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

.circuit-breadcrumbs a:hover {
  color: var(--text-primary, #e8eef5);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

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

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

/* The page's heading and its lead line beside a photograph in a lit frame, on the grid. The grid fades out towards the
   words; a soft light of the accent rises behind the picture. Without a picture the words stand centred on the grid. */
.circuit-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6.5rem) var(--circuit-gutter) clamp(3.5rem, 7vw, 6.5rem);
  border-bottom: 1px solid var(--circuit-line);
}

.circuit-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--circuit-grid);
  background-size: var(--circuit-grid-size) var(--circuit-grid-size);
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 72% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 72% 40%, #000 25%, transparent 78%);
  pointer-events: none;
}

.circuit-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(36rem 26rem at 78% 42%, color-mix(in srgb, var(--accent, #34e3e0) 17%, transparent), transparent 70%);
  pointer-events: none;
}

.circuit-hero--words {
  text-align: center;
}

.circuit-hero--words::before {
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 45%, #000 20%, transparent 75%);
}

.circuit-hero--words::after {
  background: radial-gradient(40rem 22rem at 50% 0%, color-mix(in srgb, var(--accent, #34e3e0) 16%, transparent), transparent 70%);
}

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

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

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

.circuit-hero--words .circuit-hero__copy {
  justify-items: center;
  max-width: 48rem;
  margin-inline: auto;
}

/* 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. */
.circuit-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.25rem, 1.4rem + 3.4vw, 4.125rem) * var(--circuit-scale));
  font-weight: var(--circuit-heading-weight);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

.circuit-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #94a3b5);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

/* The selling points: a small panel of lines, each with its icon in a lit socket, like a list of checks that passed. */
.circuit-hero__points {
  display: grid;
  width: 100%;
  max-width: 36rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--circuit-line);
  border-radius: var(--circuit-radius);
  background: color-mix(in srgb, var(--surface, #0e151e) 80%, transparent);
  list-style: none;
  text-align: left;
}

.circuit-hero__points li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

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

.circuit-hero__icon {
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--accent, #34e3e0) 38%, var(--circuit-line));
  border-radius: 0.3125rem;
  background: color-mix(in srgb, var(--accent, #34e3e0) 9%, transparent);
  color: var(--accent-ink, #5ee8e5);
}

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

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

.circuit-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-secondary, #94a3b5);
  font-family: var(--circuit-mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
}

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

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

.circuit-stars svg.is-full {
  fill: var(--accent-ink, #5ee8e5);
}

.circuit-hero__trustpilot {
  color: var(--accent-ink, #5ee8e5);
  font-family: var(--circuit-mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
  font-weight: 500;
}

/* The picture in a lit frame: a fine border, a corner mark at the top left and the bottom right in the accent, and a
   glow under it. */
.circuit-hero__media {
  position: relative;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--circuit-line);
  border-radius: calc(var(--circuit-radius) + 0.375rem);
  background: color-mix(in srgb, var(--surface, #0e151e) 70%, transparent);
  box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--accent, #34e3e0) 70%, transparent);
}

.circuit-hero__media::before,
.circuit-hero__media::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border: 0 solid var(--accent, #34e3e0);
  filter: drop-shadow(0 0 5px var(--accent, #34e3e0));
  pointer-events: none;
}

.circuit-hero__media::before {
  top: -0.5rem;
  left: -0.5rem;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 0.375rem;
}

.circuit-hero__media::after {
  right: -0.5rem;
  bottom: -0.5rem;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-bottom-right-radius: 0.375rem;
}

.circuit-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--circuit-radius);
  object-fit: cover;
}

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

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

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

.circuit-article__header {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--circuit-line);
}

/* The date and the author in the monospaced face, after a lit dot, like the header of a log entry. */
.circuit-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--text-secondary, #94a3b5);
  font-family: var(--circuit-mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
  letter-spacing: 0.04em;
}

.circuit-article__byline::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.2rem;
  border-radius: 50%;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 10px var(--accent, #34e3e0);
}

.circuit-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.4rem + 2.4vw, 3.125rem) * var(--circuit-scale));
  font-weight: var(--circuit-heading-weight);
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}

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

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

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

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

.circuit-prose h2 {
  font-size: calc(1.625rem * var(--circuit-scale));
}

.circuit-prose h3 {
  font-size: calc(1.3rem * var(--circuit-scale));
}

.circuit-prose h4 {
  font-size: calc(1.1rem * var(--circuit-scale));
}

.circuit-prose a {
  color: var(--accent-ink, #5ee8e5);
  text-underline-offset: 0.2em;
}

.circuit-prose :where(ul, ol) {
  padding-left: 1.4em;
}

.circuit-prose li::marker {
  color: var(--accent-ink, #5ee8e5);
}

.circuit-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 2px solid var(--accent, #34e3e0);
  color: var(--text-primary, #e8eef5);
  font-size: 1.125rem;
}

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

.circuit-prose figcaption {
  margin-top: 0.6rem;
  color: var(--text-secondary, #94a3b5);
  font-family: var(--circuit-mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
}

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

.circuit-prose th {
  font-family: var(--circuit-mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
  font-weight: 500;
  letter-spacing: 0.04em;
}

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

.circuit-prose :where(code, kbd, samp) {
  padding: 0.1em 0.35em;
  border: 1px solid var(--circuit-line);
  border-radius: 0.25rem;
  background: var(--surface, #0e151e);
  color: var(--text-primary, #e8eef5);
  font-family: var(--circuit-mono);
  font-size: 0.875em;
  font-variant-ligatures: none;
}

.circuit-prose pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  border: 1px solid var(--circuit-line);
  border-radius: var(--circuit-radius);
  background: var(--surface, #0e151e);
  color: var(--text-primary, #e8eef5);
  font-family: var(--circuit-mono);
  font-size: 0.875rem;
  font-variant-ligatures: none;
  line-height: 1.6;
}

.circuit-prose pre code {
  padding: 0;
  border: 0;
  background: none;
}

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

/* A trace across the page with a node in the middle; dashed, a broken trace; dotted, three lit points. */
.circuit-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: calc(var(--circuit-width) + 2 * var(--circuit-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--circuit-gutter);
}

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

.circuit-divider__line::after {
  content: "";
  position: absolute;
  top: -0.3125rem;
  left: 50%;
  width: 0.5625rem;
  height: 0.5625rem;
  border: 1px solid var(--accent, #34e3e0);
  border-radius: 50%;
  background: var(--background, #090d13);
  box-shadow: 0 0 10px -1px var(--accent, #34e3e0);
  transform: translateX(-50%);
}

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

.circuit-divider--dotted span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 8px var(--accent, #34e3e0);
  opacity: 0.55;
}

.circuit-divider--dotted span:nth-child(2) {
  opacity: 1;
}

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

/* The footer on the page colour, its own text colours (the same pair in every palette and with a website's own colours),
   under a lit line and with the grid fading in from its top. Titles are small spaced capitals in the monospaced face. */
.circuit-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--circuit-line);
  background: var(--background, #090d13);
  color: var(--text-primary, #e8eef5);
}

.circuit-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--circuit-grid);
  background-size: var(--circuit-grid-size) var(--circuit-grid-size);
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  opacity: 0.8;
  pointer-events: none;
}

.circuit-footer::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: var(--circuit-lit);
  pointer-events: none;
}

.circuit-footer__inner {
  max-width: calc(var(--circuit-width) + 2 * var(--circuit-gutter));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--circuit-gutter) 1.75rem;
}

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

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

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

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

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

/* The mega footer opens with an invitation and the one button, in a panel lit along its top. */
.circuit-footer__closing {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--circuit-line);
  border-radius: calc(var(--circuit-radius) + 0.25rem);
  background:
    radial-gradient(34rem 16rem at 100% 0%, color-mix(in srgb, var(--accent, #34e3e0) 14%, transparent), transparent 70%),
    var(--surface, #0e151e);
  color: var(--text-primary, #e8eef5);
}

.circuit-footer__closing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #34e3e0) 85%, transparent), transparent 70%);
}

.circuit-footer__invite {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.6rem, 1.2rem + 1.6vw, 2.375rem) * var(--circuit-scale));
  font-weight: var(--circuit-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. */
.circuit-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2.25rem 2.5rem;
}

@media (min-width: 64rem) {
  .circuit-footer__grid {
    grid-template-columns: minmax(16rem, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
  }
}

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

.circuit-footer__tagline,
.circuit-footer__contact p:not(.circuit-footer__title),
.circuit-footer__copyright {
  max-width: 34ch;
  margin: 0;
  color: var(--text-secondary, #94a3b5);
  font-size: 0.9375rem;
}

.circuit-footer__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  color: var(--text-secondary, #94a3b5);
  font-family: var(--circuit-mono);
  font-size: 0.75rem;
  font-variant-ligatures: none;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.circuit-footer__title::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 0.0625rem;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 8px var(--accent, #34e3e0);
}

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

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

.circuit-footer__contact a {
  font-family: var(--circuit-mono);
  font-size: 0.875rem;
  font-variant-ligatures: none;
}

.circuit-footer__links a:hover,
.circuit-footer__contact a:hover,
.circuit-footer__legal a:hover,
.circuit-footer__inline a:hover {
  color: var(--text-primary, #e8eef5);
  text-decoration: underline;
  text-decoration-color: var(--accent, #34e3e0);
  text-underline-offset: 0.3em;
}

.circuit-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--circuit-line);
  border-radius: var(--circuit-button-radius);
  color: var(--text-secondary, #94a3b5);
}

.circuit-footer__social a:hover {
  border-color: color-mix(in srgb, var(--accent, #34e3e0) 70%, transparent);
  color: var(--text-primary, #e8eef5);
  box-shadow: 0 0 14px -4px var(--accent, #34e3e0);
}

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

.circuit-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--circuit-line);
}

.circuit-footer__bottom .circuit-footer__copyright,
.circuit-footer__line .circuit-footer__copyright {
  max-width: none;
  font-family: var(--circuit-mono);
  font-size: 0.8125rem;
  font-variant-ligatures: none;
}

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

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

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

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

/* The number large in the monospaced face, lit, with a cursor after it. */
.circuit-not-found {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7.5rem) var(--circuit-gutter);
  text-align: center;
}

.circuit-not-found::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--circuit-grid);
  background-size: var(--circuit-grid-size) var(--circuit-grid-size);
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 15%, transparent 72%);
  pointer-events: none;
}

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

.circuit-not-found__number {
  margin: 0;
  color: var(--accent-ink, #5ee8e5);
  font-family: var(--circuit-mono);
  font-size: clamp(4rem, 2.5rem + 8vw, 8rem);
  font-variant-ligatures: none;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent, #34e3e0) 55%, transparent);
}

.circuit-not-found__number::after {
  content: "_";
  animation: circuit-cursor 1.1s steps(1) infinite;
}

@keyframes circuit-cursor {
  50% { opacity: 0; }
}

.circuit-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.9rem, 1.4rem + 2vw, 2.75rem) * var(--circuit-scale));
  font-weight: var(--circuit-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.circuit-not-found p {
  margin: 0;
  color: var(--text-secondary, #94a3b5);
}

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

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

.circuit-form-success h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.5rem * var(--circuit-scale));
  font-weight: var(--circuit-heading-weight);
  line-height: 1.25;
}

.circuit-form-success h3::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--accent, #34e3e0);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #34e3e0) 20%, transparent), 0 0 14px var(--accent, #34e3e0);
}

.circuit-form-success p {
  margin: 0;
  color: var(--text-secondary, #94a3b5);
}

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

/* The shared bar (resilience.css) on the theme's surface, with its button, under a lit line. */
body .theme-action-bar {
  border-top: 1px solid var(--circuit-line);
  background: color-mix(in srgb, var(--surface, #0e151e) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ------------------------------------------------------------------ Sections (the kit's blocks in this theme) */

/* includes/wire.php writes each block's type on its section (data-block). The theme uses it to compose the stock blocks;
   a module's own section (a type that starts with x_) keeps the kit's look, as the kit promises it. */

/* A tinted section is a band between two fine lines. */
.circuit-main .kit-section--muted {
  border-block: 1px solid var(--circuit-line);
}

/* Over a section's heading stands a node with a short trace running into it, like a pad on a circuit board: at the left
   of a heading set at the left, with a trace on each side over a centred one. It stands in the flow above the heading, so
   it never crosses it, also in the short first section of an inner page. A heading with a small label of its own keeps
   the label's lit dot instead. */
.circuit-main :where([data-block]:not([data-block^="x_"], [data-block="cta_banner"])) > .kit-section__inner > .kit-heading-group:not(:has(.kit-eyebrow))::before,
.circuit-main :where([data-block]:not([data-block^="x_"], [data-block="cta_banner"])) > .kit-section__inner > .kit-stack > .kit-heading-group:not(:has(.kit-eyebrow))::before,
.circuit-main :where([data-block]:not([data-block^="x_"], [data-block="cta_banner"])) > .kit-section__inner > .kit-split > .kit-stack > .kit-heading-group:not(:has(.kit-eyebrow))::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 0.5625rem;
  margin: 0 0 1.1rem;
  background:
    radial-gradient(circle at 100% 50%, var(--accent, #34e3e0) 0 0.125rem, transparent 0.1875rem 0.25rem, var(--accent, #34e3e0) 0.25rem 0.3125rem, transparent 0.375rem) 100% 50% / 0.5625rem 0.5625rem no-repeat,
    linear-gradient(90deg, transparent, var(--accent, #34e3e0)) 0 50% / calc(100% - 0.5625rem) 1px no-repeat;
  filter: drop-shadow(0 0 3px var(--accent, #34e3e0));
}

.circuit-main :where([data-block]:not([data-block^="x_"], [data-block="cta_banner"])) > .kit-section__inner > .kit-heading-group.kit-text--center:not(:has(.kit-eyebrow))::before,
.circuit-main :where([data-block]:not([data-block^="x_"], [data-block="cta_banner"])) > .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center:not(:has(.kit-eyebrow))::before,
.circuit-main :where([data-block]:not([data-block^="x_"], [data-block="cta_banner"])) > .kit-section__inner > .kit-split > .kit-stack > .kit-heading-group.kit-text--center:not(:has(.kit-eyebrow))::before {
  width: 6rem;
  margin-inline: auto;
  background:
    radial-gradient(circle at 50% 50%, var(--accent, #34e3e0) 0 0.125rem, transparent 0.1875rem 0.25rem, var(--accent, #34e3e0) 0.25rem 0.3125rem, transparent 0.375rem) 50% 50% / 0.5625rem 0.5625rem no-repeat,
    linear-gradient(90deg, transparent, var(--accent, #34e3e0)) 0 50% / calc(50% - 0.375rem) 1px no-repeat,
    linear-gradient(270deg, transparent, var(--accent, #34e3e0)) 100% 50% / calc(50% - 0.375rem) 1px no-repeat;
}

/* A heading that has an icon over it (an enquiry form) has its lead mark already: one mark per heading. */
.circuit-main [data-block] .kit-row + .kit-heading-group::before {
  content: none;
}

/* On a photograph the node glows white, so it reads on a dark picture as on a bright one. */
.circuit-main [data-block].kit-section--image .kit-heading-group::before {
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 0.6));
}

/* The full-width openings (the kit's hero on a photograph): the grid laid over the photograph in fine light lines that
   fade towards the edges, and a lit line along its foot. A video keeps the kit's own layers. */
.circuit-main :is([data-block="hero_fullwidth_image"], [data-block="cta_section"]).kit-section--image:not(.kit-section--video)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.09) 1px, transparent 1px);
  background-size: var(--circuit-grid-size) var(--circuit-grid-size);
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 80%);
  pointer-events: none;
}

.circuit-main :is([data-block="hero_fullwidth_image"], [data-block="hero_video"]).kit-section--image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 1px;
  background: var(--circuit-lit);
  pointer-events: none;
}

.circuit-main [data-block="hero_fullwidth_image"] .kit-heading--1 {
  font-size: calc(clamp(2.25rem, 1.4rem + 3.4vw, 4.125rem) * var(--circuit-scale));
  letter-spacing: -0.025em;
}

/* An invitation without a photograph (cta_section) is a band on the grid, lit from below by the accent. */
.circuit-main [data-block="cta_section"]:not(.kit-section--image) {
  border-block: 1px solid var(--circuit-line);
  background:
    radial-gradient(44rem 20rem at 50% 120%, color-mix(in srgb, var(--accent, #34e3e0) 22%, transparent), transparent 70%),
    var(--background, #090d13);
}

.circuit-main [data-block="cta_section"]:not(.kit-section--image)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--circuit-grid);
  background-size: var(--circuit-grid-size) var(--circuit-grid-size);
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 50% 60%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 85% at 50% 60%, #000 15%, transparent 75%);
  pointer-events: none;
}

.circuit-main [data-block="cta_section"] .kit-heading--2 {
  font-size: calc(clamp(2rem, 1.3rem + 2.8vw, 3.25rem) * var(--circuit-scale));
}

/* The slim invitation (cta_banner) is drawn by the kit on the main colour, which is light in the dark palettes. Here it
   is a panel of the surface lit along its top, with every colour role the kit reads set back to the page's own pairs, so
   its words, buttons and lines follow (the kit's band redefines them all from these two). */
.circuit-main [data-block="cta_banner"].kit-section--inverse {
  --kit-section-bg: var(--surface, #0e151e);
  --kit-section-fg: var(--text-primary, #e8eef5);
  --kit-muted: var(--text-secondary, #94a3b5);
  --kit-accent: var(--accent, #34e3e0);
  --kit-accent-text: var(--accent-ink, #5ee8e5);
  --kit-on-accent: var(--on-accent, #03201f);
  --kit-primary: var(--primary, #e8eef5);
  --kit-primary-hover: var(--primary-alt, #ffffff);
  --kit-on-primary: var(--on-primary, #0a0f15);
  --kit-line: var(--border, #213042);
  --kit-focus: var(--accent-ink, #5ee8e5);
  border-block: 1px solid var(--circuit-line);
  background:
    radial-gradient(36rem 14rem at 0% 0%, color-mix(in srgb, var(--accent, #34e3e0) 14%, transparent), transparent 70%),
    var(--surface, #0e151e);
}

.circuit-main [data-block="cta_banner"].kit-section--inverse::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #34e3e0) 85%, transparent), transparent 60%);
  pointer-events: none;
}

/* Statistics are readouts: each in a small panel lit along its top, its figure in the monospaced face at the left. */
.circuit-main [data-block="stats_counter"] {
  --circuit-tile: var(--surface, #0e151e);
}

.circuit-main [data-block="stats_counter"].kit-section--muted {
  --circuit-tile: var(--background, #090d13);
}

.circuit-main [data-block="stats_counter"]:not(.kit-section--inverse, .kit-section--accent, .kit-section--image) .kit-grid > .kit-stack {
  align-items: flex-start;
  padding: 1.35rem 1.35rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--circuit-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text-primary, #e8eef5) 3.5%, transparent), transparent 7rem) padding-box,
    linear-gradient(var(--circuit-tile), var(--circuit-tile)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent, #34e3e0) 80%, var(--circuit-line)) 0%, var(--circuit-line) 34%) border-box;
  text-align: start;
}

/* Steps: the number in a lit square in the monospaced face. */
.circuit-main .kit-steps .kit-card__eyebrow {
  font-family: var(--circuit-mono);
  font-variant-ligatures: none;
}

/* Pictures in a section stand in a fine frame. */
.circuit-main [data-block]:not([data-block^="x_"]) :is(.kit-picture, .kit-video) {
  border: 1px solid var(--circuit-line);
  border-radius: var(--kit-media-radius, var(--circuit-radius));
}

/* A video's poster (PageMedia writes it and its plain look): a dark screen lit by the accent from one corner, with the
   play button in the accent. */
.circuit-main .pagestic-video {
  background:
    radial-gradient(70% 95% at 82% 12%, color-mix(in srgb, var(--accent, #34e3e0) 26%, transparent), transparent 72%),
    linear-gradient(160deg, #111820 0%, #05080b 70%);
}

.circuit-main .pagestic-video__play rect {
  fill: var(--accent, #34e3e0);
}

.circuit-main .pagestic-video__play path {
  fill: var(--on-accent, #03201f);
}

/* ------------------------------------------------------------------ Motion */

/* The lit dots before the phone number and the page being shown breathe slowly, like the light of a device at work. Not
   for a visitor who asks for less motion (the end of this file). */
@keyframes circuit-breathe {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.circuit-header__phone::before,
.circuit-brand:not(:has(.circuit-brand__logo, .brand-logo-original, .logo-mask))::before {
  animation: circuit-breathe 2.8s ease-in-out infinite;
}

/* ------------------------------------------------------------------ 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) {
  .circuit-menu-button {
    display: none !important;
  }

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

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