/*
 * Bankside: a gallery-quiet theme in black, white and photographs, for fashion and design-led businesses. The page reads
 * as one sheet, composed like a printed spread, not as a stack of blocks: there are no coloured bands, no cards and no
 * shadows; tall condensed capitals do the work that boxes do elsewhere, every small word is in small spaced capitals,
 * and neighbouring sections are joined on purpose:
 *
 *   - a section's heading stands at the left in large capitals with its lead line as a short note at the right;
 *   - sections with a heading are numbered down the page, in a small label of bars and figures over the heading;
 *   - the heading of a section of pictures or cards is echoed very large and very pale across the seam above it, cut
 *     by the window's edges, and drifts sideways as the page scrolls;
 *   - a picture beside words stands on a hairline that runs from edge to edge of the window, and hangs a little into
 *     the section that follows;
 *   - dark and photographic sections are plates set into the sheet, never stripes across it;
 *   - the footer is the last plate and ends the page with the website's name, very large, cut by the page's end.
 *
 * This file draws Bankside's frame (header, phone menu, footer, announcement, breadcrumbs, the 404 page, the heroes, the
 * article body and the divider) and composes the Theme Kit's sections; the look of the kit's own parts (buttons, fields,
 * cards) is in kit-theme.css. includes/stitch.php marks each section with its block type (data-block), its number
 * (data-n) and the heading to echo (data-ghost); a section without the marks keeps the plain composition. Colours come
 * from the palette (palettes/*.css). Sizes of display type are worked out from --bankside-display and --bankside-glyph,
 * which the layout sets for the heading face. Only opacity and transform move. Plain CSS, no build step, from 320px.
 */

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

:root {
  --bankside-gutter: clamp(1.25rem, 3.4vw, 3.5rem);
  --bankside-width: 90rem;
  --bankside-bar: 4.5rem;
  --bankside-topbar: 0px;
  --bankside-chrome: calc(var(--bankside-bar) + var(--bankside-topbar));
  --bankside-ink: var(--text-primary, #111);
  --bankside-paper: var(--background, #f4f4f1);
  --bankside-line: var(--border, #d5d5ce);
  --bankside-hairline: color-mix(in srgb, var(--text-primary, #111) 18%, transparent);
  --bankside-plate: var(--primary, #111);
  --bankside-on-plate: var(--on-primary, #f4f4f1);
  --bankside-signal: var(--accent-ink, var(--accent, #111));
  --bankside-small: 0.6875rem;
  --bankside-bars: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 6px, transparent 6px 8px, currentColor 8px 12px, transparent 12px 14px, currentColor 14px 15px, transparent 15px 17px, currentColor 17px 19px, transparent 19px 21px, currentColor 21px 22px);
  --bankside-dashes: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
  --bankside-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bankside-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --bankside-speed: 260ms;
  --motion-speed: 640ms;
  --motion-rise: 1.25rem;
}

/* What the layout says about the heading face (its letter width, the scale that follows from it, the weights the font
   palette loads) wins over these: they have no weight of their own, and stand in only for a page drawn without the layout. */
:where(:root) {
  --bankside-display: 1;
  --bankside-glyph: 0.348;
  --bankside-heading-weight: 800;
  --bankside-heading-strong: 700;
  --bankside-body-strong: 600;
}

@media (max-width: 63.99rem) {
  :root {
    --bankside-bar: 4rem;
  }
}

/* The slim contact line of the topbar header shows on wide screens only; it scrolls away with the page. The header and
   main are siblings, so these are sibling selectors: a :has() on body would restyle the whole page on every change. */
@media (min-width: 64rem) {
  .bankside-header--has-topbar,
  .bankside-header--has-topbar ~ .bankside-main {
    --bankside-topbar: 2.25rem;
    --bankside-chrome: calc(var(--bankside-bar) + var(--bankside-topbar));
  }
}

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

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

/* Whatever is scrolled into view (an anchor, a field reached with the keyboard) stops clear of the sticky bar. */
html {
  scroll-padding-top: calc(var(--bankside-bar) + 1.25rem);
  scroll-padding-bottom: 1.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bankside-paper);
  color: var(--bankside-ink);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--bankside-ink);
  color: var(--bankside-paper);
}

:focus-visible {
  outline: 2px solid var(--bankside-signal);
  outline-offset: 3px;
}

/* The sections are numbered down the page (stitch.php marks the ones that count). A very large echo of a heading may
   run past the window's edge: it is cut there, never scrolled to. */
.bankside-main {
  display: block;
  min-height: 40vh;
  counter-reset: bankside-n;
  overflow-x: clip;
}

.bankside-main > :where(h1, h2, h3) {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--bankside-heading-weight);
  text-transform: uppercase;
}

.bankside-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--bankside-plate);
  color: var(--bankside-on-plate);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

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

/* The mark of bars, and a small label after it: the theme's one ornament. */
.bankside-mark {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 10px;
  background: var(--bankside-bars);
}

.bankside-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Theme Kit: the page's numbering */

.bankside-main .kit-section[data-n] {
  counter-increment: bankside-n;
}

/* The label over a numbered section's heading: the bars, then the section's number. Only the section's own heading gets
   it (the first one where a section holds two columns of words). */
.bankside-main .kit-section[data-n] > .kit-section__inner > .kit-stack > .kit-heading-group::before,
.bankside-main .kit-section[data-n] > .kit-section__inner > .kit-stack > .kit-stack:first-child > .kit-heading-group::before,
.bankside-main .kit-section[data-n] > .kit-section__inner > .kit-split > .kit-stack:first-of-type > .kit-heading-group::before {
  content: counter(bankside-n, decimal-leading-zero);
  justify-self: start;
  padding-inline-start: 2.1rem;
  background: var(--bankside-bars) no-repeat 0 50% / 22px 10px;
  color: var(--kit-text);
  font-family: var(--font-body, sans-serif);
  font-size: var(--bankside-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.bankside-main .kit-section[data-n] .kit-heading-group.kit-text--center::before {
  justify-self: center;
}

/* ------------------------------------------------------------------ Theme Kit: the echo across a seam */

/* The heading of a section of pictures or cards, again: very large, very pale, on one line across the seam above the
   section and cut by the window's edges. It lies behind the section's own content and is not read out. */
.bankside-main .kit-section[data-ghost]::before {
  content: attr(data-ghost);
  content: attr(data-ghost) / "";
  position: absolute;
  top: 0;
  left: var(--bankside-gutter);
  z-index: -1;
  color: color-mix(in srgb, var(--kit-text) 6%, transparent);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * clamp(6rem, 2.5rem + 15vw, 21rem));
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0;
  line-height: 0.8;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate3d(0, -34%, 0);
  user-select: none;
  white-space: nowrap;
}

/* Where the browser can tie it to scrolling, the echo drifts sideways as its seam crosses the window. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bankside-main .kit-section[data-ghost]::before {
      animation: bankside-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes bankside-drift {
  from { transform: translate3d(6%, -34%, 0); }
  to { transform: translate3d(-22%, -34%, 0); }
}

/* ------------------------------------------------------------------ Theme Kit: a section's heading and its note */

/* On a wide screen a section opens like a spread: the heading at the left over eight of twelve columns, its lead line
   as a short note at the right, standing on the heading's last line; everything else takes the whole width under them. */
.bankside-main .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center,
.bankside-main .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center + .kit-text--lead {
  text-align: start;
}

.bankside-main .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center + .kit-text--lead {
  margin-inline: 0;
}

.bankside-main .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center + .kit-text--lead::before {
  margin-inline: 0;
}

.bankside-main .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center .kit-eyebrow {
  justify-content: flex-start;
}

.bankside-main .kit-section[data-n] > .kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center::before {
  justify-self: start;
}

@media (min-width: 64rem) {
  .bankside-main .kit-section__inner > .kit-stack:has(> .kit-heading-group) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--kit-gap-medium);
  }

  .bankside-main .kit-section__inner > .kit-stack:has(> .kit-heading-group) > * {
    grid-column: 1 / -1;
  }

  .bankside-main .kit-section__inner > .kit-stack > .kit-heading-group {
    grid-column: 1 / span 8;
  }

  .bankside-main .kit-section__inner > .kit-stack > .kit-heading-group:has(+ .kit-text--lead) {
    grid-column: 1 / span 7;
  }

  .bankside-main .kit-section__inner > .kit-stack > .kit-heading-group + .kit-text--lead {
    grid-column: 9 / -1;
    align-self: end;
    padding-bottom: 0.4rem;
  }

  /* A section the kit keeps narrow (questions, a timeline, places served, a video, a form) is not a narrow column in the
     middle of the sheet: its heading and note stand in a side column, and what they introduce takes the rest. */
  .bankside-main .kit-section__inner.kit-width--narrow:has(> .kit-stack > .kit-heading-group),
  .bankside-main .kit-section__inner.kit-width--narrow:has(> .kit-stack > .kit-stack > .kit-heading-group) {
    --kit-w: var(--kit-width-normal);
  }

  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> .kit-heading-group) {
    grid-template-rows: auto 1fr;
  }

  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack > .kit-heading-group,
  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack > .kit-heading-group:has(+ .kit-text--lead) {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack > .kit-heading-group + .kit-text--lead {
    grid-column: 1 / span 4;
    grid-row: 2;
    align-self: start;
    padding-bottom: 0;
  }

  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> .kit-heading-group) > :not(.kit-heading-group, .kit-text--lead) {
    grid-column: 6 / -1;
  }

  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack > .kit-heading-group + :not(.kit-text--lead),
  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack > .kit-heading-group + .kit-text--lead + * {
    grid-row: 1 / span 2;
  }

  .bankside-main .kit-section__inner.kit-width--narrow .kit-heading--2 {
    font-size: calc(var(--bankside-display) * clamp(2.4rem, 1.2rem + 3vw, 4.25rem));
  }

  /* A form with its words (contact_form): the words in the side column, the form beside them. */
  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> .kit-stack > .kit-heading-group):has(> form) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--kit-gap-medium);
    align-items: start;
  }

  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> .kit-stack > .kit-heading-group):has(> form) > .kit-stack {
    grid-column: 1 / span 4;
    align-items: flex-start;
    text-align: start;
  }

  .bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> .kit-stack > .kit-heading-group):has(> form) > form {
    grid-column: 6 / -1;
  }
}

.bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> form) > .kit-stack > :is(.kit-heading-group, .kit-text--lead).kit-text--center {
  text-align: start;
  margin-inline: 0;
}

.bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> form) > .kit-stack > .kit-text--lead.kit-text--center::before {
  margin-inline: 0;
}

.bankside-main .kit-section__inner.kit-width--narrow > .kit-stack:has(> form) > .kit-stack > .kit-row {
  justify-content: flex-start;
}

/* ------------------------------------------------------------------ Theme Kit: a picture beside words */

/* The picture is upright and the smaller part; the words have the room. Under the heading a hairline runs from edge to
   edge of the window and passes behind the picture, which hangs a little past the end of its section into the next one. */
.bankside-main .kit-section:has(> .kit-section__inner > .kit-split > .kit-picture) {
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

.bankside-main .kit-root:has(> .kit-section > .kit-section__inner > .kit-split > .kit-picture) {
  position: relative;
  z-index: 2;
}

.bankside-main .kit-split:has(> .kit-picture) > .kit-stack > .kit-heading-group + * {
  position: relative;
  padding-top: var(--kit-gap-medium);
}

.bankside-main .kit-split:has(> .kit-picture) > .kit-stack > .kit-heading-group + *::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100vw;
  left: -100vw;
  height: 1px;
  background: var(--kit-line-strong);
  pointer-events: none;
}

.bankside-main .kit-split:has(> .kit-picture) > .kit-picture {
  position: relative;
  z-index: 1;
}

@media (min-width: 48rem) {
  .bankside-main .kit-split.kit-split--1-1:has(> .kit-picture) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }

  .bankside-main .kit-split.kit-split--1-1.kit-split--reverse:has(> .kit-picture) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .bankside-main .kit-split.kit-split--1-1:has(> .kit-picture) > .kit-picture:not(:has(img[data-fit="whole"])) {
    aspect-ratio: 4 / 5;
  }

  .bankside-main .kit-split.kit-split--1-1:has(> .kit-picture) > .kit-picture:not(:has(img[data-fit="whole"])) img {
    height: 100%;
    object-fit: cover;
  }

  .bankside-main .kit-split.kit-split--1-1:has(> .kit-picture) > .kit-picture {
    margin-bottom: calc(-1 * (clamp(1.5rem, 3vw, 3rem) + clamp(1.5rem, 3vw, 3rem)));
  }

  /* Nothing hangs into a slideshow or a full-width opening that follows. */
  .bankside-main .kit-root:has(+ .kit-root > .kit-slideshow) .kit-split:has(> .kit-picture) > .kit-picture,
  .bankside-main .kit-root:has(+ .bankside-hero) .kit-split:has(> .kit-picture) > .kit-picture,
  .bankside-main .kit-root:has(+ .bankside-opening) .kit-split:has(> .kit-picture) > .kit-picture {
    margin-bottom: 0;
  }
}

/* A cropped picture beside words keeps a little more of its top than of its bottom: faces sit high in a photograph. A
   picture with a focus of its own overrides this on the element. */
.bankside-main .kit-split:has(> .kit-picture) > .kit-picture img {
  object-position: 50% 28%;
}

/* The picture inside its frame drifts a little slower than the page, where the browser can tie it to scrolling. Not a
   picture with a focus of its own or shown whole: the drift enlarges it and would cut what was asked to stay in view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
    .bankside-main .kit-split.kit-split--1-1 > .kit-picture img:not([style*="object-position"], [data-fit="whole"]) {
      animation: bankside-slow linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes bankside-slow {
  from { transform: translate3d(0, -4%, 0) scale(1.1); }
  to { transform: translate3d(0, 4%, 0) scale(1.1); }
}

/* Two columns of words: a hairline over each. */
.bankside-main .kit-split:not(:has(> .kit-picture, > .kit-card)) > .kit-stack {
  padding-top: 1.25rem;
  border-top: 1px solid var(--kit-line-strong);
}

.bankside-main .kit-split:not(:has(> .kit-picture, > .kit-card)) .kit-heading--2 {
  font-size: calc(var(--bankside-display) * clamp(2.2rem, 1.4rem + 2.6vw, 4rem));
}

/* A form beside words: the form stands on a plate of the tinted paper, and the words stay in view beside a tall form. */
.bankside-main .kit-split:has(> .kit-card) > .kit-card,
.bankside-main .kit-section__inner > .kit-stack > .kit-card:has(form) {
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border: 0;
  background: var(--kit-surface-alt);
}

@media (min-width: 48rem) {
  .bankside-main .kit-split:has(> .kit-card) > :not(.kit-card) {
    position: sticky;
    top: calc(var(--bankside-bar) + 2rem);
    align-self: start;
  }
}

/* ------------------------------------------------------------------ Theme Kit: plates */

/* A dark, accent or photographic section is a plate set into the sheet with the page around it, not a stripe from edge
   to edge. The section keeps the kit's light colours for what is on the plate; the plate itself is its inner part. */
.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) {
  padding-block: clamp(1.5rem, 3vw, 3rem);
  background: none;
}

.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner {
  width: auto;
  max-width: min(var(--bankside-width), calc(100% - 2 * var(--bankside-gutter)));
  padding: clamp(2.5rem, 6vw, 6.5rem) clamp(1.5rem, 5vw, 5.5rem);
  background-color: var(--kit-section-bg);
}

.bankside-main .kit-section--image > .kit-section__inner {
  background-image:
    linear-gradient(180deg, rgb(0 0 0 / min(0.92, calc(0.42 * var(--pgs-tint, 1)))), rgb(0 0 0 / min(0.94, calc(0.68 * var(--pgs-tint, 1))))),
    var(--kit-section-image, none);
  background-position: center;
  background-size: cover;
}

.bankside-main .kit-section--image:not(.kit-section--video) > .kit-section__inner {
  padding-block: clamp(5rem, 3rem + 9vw, 11rem);
}

/* What is on a plate stands at its left edge: the heading large, the note and the buttons under it. */
.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner,
.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner :is(.kit-heading-group, .kit-text-block) {
  text-align: start;
}

.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner .kit-stack {
  align-items: flex-start;
  text-align: start;
}

.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner .kit-text-block {
  margin-inline: 0;
}

.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner .kit-text--lead::before {
  margin-inline: 0;
}

.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner :is(.kit-button-group, .kit-row) {
  justify-content: flex-start;
}

.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner .kit-heading--2 {
  max-width: 18ch;
}

/* A section's video plays behind the plate's words, inside the plate. */
.bankside-main .kit-section--video {
  padding-block: 0;
}

.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner .kit-heading--2,
.bankside-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) > .kit-section__inner.kit-width--narrow .kit-heading--2 {
  font-size: calc(var(--bankside-display) * clamp(2.75rem, 1.4rem + 5.6vw, 7rem));
}

/* A strip with words and one button (cta_banner): the words large at the left, the button at the right. */
.bankside-main .kit-section--pad-compact:is(.kit-section--inverse, .kit-section--accent) > .kit-section__inner {
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}

.bankside-main .kit-section.kit-section--pad-compact:is(.kit-section--inverse, .kit-section--accent) > .kit-section__inner .kit-heading--2 {
  font-size: calc(var(--bankside-display) * clamp(2rem, 1.4rem + 2.4vw, 3.75rem));
}

/* On a plate the main button is the plate's light colour and turns into its outline. */
.bankside-main .kit-section--image .kit-button--secondary {
  border-color: rgb(255 255 255 / 0.6);
  color: #fff;
}

.bankside-main .kit-section--image .kit-button--secondary:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.14);
}

/* ------------------------------------------------------------------ Theme Kit: block by block */

/* Figures: very tall numbers side by side, a hairline over each. */
.bankside-main .kit-grid > .kit-stack:has(> .kit-stat) {
  align-items: flex-start;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kit-line-strong);
  text-align: start;
}

.bankside-main .kit-grid > .kit-stack:has(> .kit-stat) .kit-stat {
  justify-items: start;
  width: 100%;
}

/* A figure is as tall as its column allows: about six characters fill it. */
@supports (width: 1cqi) {
  .bankside-main .kit-grid > .kit-stack:has(> .kit-stat) {
    container-type: inline-size;
  }

  .bankside-main .kit-grid > .kit-stack:has(> .kit-stat) .kit-stat__value {
    font-size: calc(var(--bankside-display) * clamp(3.5rem, 40cqi, 10.5rem));
  }
}

.bankside-main .kit-section--align-center:has(.kit-stat) {
  text-align: start;
}

/* Features: each under a hairline, the icon small at its head. */
.bankside-main .kit-grid.kit-features > .kit-stack {
  padding-top: 1.25rem;
  border-top: 1px solid var(--kit-line-strong);
}

/* Places served (service_area): the names set large in the heading face, one after another like a line of type, in the
   quiet text colour until the pointer is on one (the first stands in the full colour), each with its number as a small
   figure. The pin icons are not drawn. */
.bankside-main .kit-section[data-block="service_area"] .kit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12em 0.5em;
  counter-reset: bankside-place;
  font-size: calc(var(--bankside-display) * clamp(2.2rem, 1.3rem + 3.6vw, 5rem));
}

.bankside-main .kit-section[data-block="service_area"] .kit-list--plain {
  display: contents;
}

.bankside-main .kit-section[data-block="service_area"] .kit-list--plain > .kit-list-item {
  display: inline-flex;
  flex: 0 1 auto;
  width: auto;
  /* A long name, or the fallback face while the heading font loads, wraps inside the page instead of running past it. */
  min-width: 0;
  max-width: 100%;
  align-items: flex-start;
  gap: 0.12em;
  counter-increment: bankside-place;
  /* The quiet shade is the palette's second text colour, which every colour scheme keeps readable on the page. */
  color: var(--kit-muted);
  transition: color var(--bankside-speed) ease;
}

.bankside-main .kit-section[data-block="service_area"] .kit-list--plain:first-child > .kit-list-item:first-child,
.bankside-main .kit-section[data-block="service_area"] .kit-list--plain > .kit-list-item:hover {
  color: var(--kit-text);
}

.bankside-main .kit-section[data-block="service_area"] .kit-list-item__icon {
  display: none;
}

.bankside-main .kit-section[data-block="service_area"] .kit-list-item__main {
  flex: 0 1 auto;
  min-width: 0;
}

.bankside-main .kit-section[data-block="service_area"] .kit-list-item__line {
  min-width: 0;
}

.bankside-main .kit-section[data-block="service_area"] .kit-list-item__title {
  color: inherit;
  font-family: var(--font-heading, sans-serif);
  font-size: 1em;
  font-weight: var(--bankside-heading-weight);
  line-height: 1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.bankside-main .kit-section[data-block="service_area"] .kit-list--plain > .kit-list-item::after {
  content: counter(bankside-place, decimal-leading-zero);
  margin-top: 0.35em;
  color: var(--kit-muted);
  font-family: var(--font-body, sans-serif);
  font-size: var(--bankside-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Plans (pricing_table): columns parted by hairlines; the recommended one is a plate. */
.bankside-main .kit-section[data-block="pricing_table"] .kit-grid {
  gap: 0;
  border-top: 1px solid var(--kit-line-strong);
}

.bankside-main .kit-section[data-block="pricing_table"] .kit-grid > .kit-card {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 0;
  border-inline-start: 1px solid var(--kit-line);
}

.bankside-main .kit-section[data-block="pricing_table"] .kit-grid > .kit-card:first-child {
  border-inline-start-color: transparent;
  padding-inline-start: 0;
}

.bankside-main .kit-section[data-block="pricing_table"] .kit-grid > .kit-card--surface {
  --kit-text: var(--bankside-on-plate);
  --kit-muted: color-mix(in srgb, var(--bankside-on-plate) 80%, transparent);
  --kit-line: color-mix(in srgb, var(--bankside-on-plate) 26%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--bankside-on-plate) 50%, transparent);
  --kit-primary: var(--bankside-on-plate);
  --kit-on-primary: var(--bankside-plate);
  --kit-accent-text: var(--bankside-on-plate);
  padding-inline-start: clamp(1.25rem, 2.4vw, 2rem);
  border-inline-start-color: transparent;
  background: var(--bankside-plate);
  color: var(--bankside-on-plate);
}

.bankside-main .kit-section[data-block="pricing_table"] .kit-grid > .kit-card--surface + .kit-card {
  border-inline-start-color: transparent;
}

.bankside-main .kit-section[data-block="pricing_table"] .kit-card .kit-button {
  width: 100%;
}

.bankside-main .kit-section[data-block="pricing_table"] .kit-stat__value {
  font-size: calc(var(--bankside-display) * clamp(2.75rem, 2rem + 2.4vw, 4.5rem));
  line-height: 0.9;
  white-space: nowrap;
}

.bankside-main .kit-section[data-block="pricing_table"] .kit-stat__label {
  max-width: none;
}

/* Steps (process_steps): each step under a hairline. A step has one lead mark (the kit's rule): with an icon, the icon
   leads, small, and the number is a small label in Bankside's small capitals; without one the number leads, tall and pale
   in the heading face (kit-theme.css). */
.bankside-main .kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__eyebrow {
  color: var(--kit-text);
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
}

.bankside-main .kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body > .kit-icon:first-child {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.6rem;
}

/* People (team_grid): an upright portrait as wide as its column, the name and role under it at the left. */
.bankside-main .kit-section[data-block="team_grid"] .kit-card {
  padding-top: 0;
  border-top: 0;
}

.bankside-main .kit-section[data-block="team_grid"] .kit-card__content,
.bankside-main .kit-section[data-block="team_grid"] .kit-card__content .kit-stack {
  align-items: flex-start;
  text-align: start;
}

.bankside-main .kit-section[data-block="team_grid"] .kit-card__content :is(.kit-text-block, .kit-heading-group) {
  margin-inline: 0;
  text-align: start;
}

.bankside-main .kit-section[data-block="team_grid"] .kit-card__content .kit-row {
  justify-content: flex-start;
}

.bankside-main .kit-section[data-block="team_grid"] .kit-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin-bottom: 0.5rem;
  font-size: calc(var(--bankside-display) * 4rem);
}

.bankside-main .kit-section[data-block="team_grid"] .kit-avatar img {
  object-position: 50% 20%;
}

/* Before and after: the two labels are small plates in the corners. */
.bankside-main .kit-compare__label {
  border-radius: 0;
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A slideshow's controls are square. */
.bankside-main .kit-slideshow__button {
  border-radius: 0;
}

.bankside-main .kit-slideshow__dot::before {
  border-radius: 0;
}

.bankside-main .kit-slide .kit-heading--1,
.bankside-main .kit-slide .kit-heading--2 {
  font-size: calc(var(--bankside-display) * clamp(3rem, 1.4rem + 7.4vw, 9.5rem));
  line-height: 0.88;
}

/* A price list's groups (price_list) and a timeline's entries are parts of the sheet, each under its hairline. */
.bankside-main .kit-section[data-block="price_list"] .kit-card,
.bankside-main .kit-section[data-block="timeline"] .kit-card {
  padding-top: 1.15rem;
  border-top: 1px solid var(--kit-line-strong);
}

.bankside-main .kit-section[data-block="timeline"] .kit-card__eyebrow {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * 1.75rem);
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0;
  line-height: 1;
}

/* What customers say: each quote under a hairline. */
.bankside-main .kit-section[data-block="testimonials"] .kit-carousel__track > *,
.bankside-main .kit-section[data-block="testimonials"] .kit-grid > * {
  padding-top: 1.5rem;
  border-top: 1px solid var(--kit-line-strong);
}

.bankside-main .kit-section[data-block="testimonials"] .kit-card {
  border-top: 0;
  padding-top: 0;
}

/* Pictures in a grid sit close together, like a contact sheet. */
.bankside-main .kit-section:is([data-block="image_gallery"], [data-block="portfolio_showcase"]) :is(.kit-grid, .kit-masonry) {
  gap: clamp(0.4rem, 0.8vw, 0.75rem);
}

.bankside-main .kit-section[data-block="portfolio_showcase"] .kit-grid {
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
}

/* Logos and marks stand in a ruled row, in the colour of the page until the pointer is on one. */
.bankside-main .kit-section:is([data-block="logo_strip"], [data-block="trust_badges"], [data-block="accreditations"]) .kit-picture {
  background: transparent;
}

.bankside-main .kit-section:is([data-block="logo_strip"], [data-block="trust_badges"]) :is(.kit-grid, .kit-marquee) {
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-block: 1px solid var(--kit-line-strong);
}

.bankside-main .kit-section[data-block="logo_strip"] img {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--bankside-speed) ease, opacity var(--bankside-speed) ease;
}

.bankside-main .kit-section[data-block="logo_strip"] :is(.kit-picture, a):hover img {
  filter: none;
  opacity: 1;
}

/* Review badges: a plain row between two hairlines. */
.bankside-main .kit-section[data-block="review_badges"] > .kit-section__inner > .kit-row {
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-block: 1px solid var(--kit-line-strong);
}

.bankside-main .kit-section[data-block="review_badges"] .kit-card {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
}

/* The page title of a page whose content has no heading of its own stands over a hairline, close to what follows. */
.bankside-main .pgs-page-title .kit-section {
  padding-block: clamp(2rem, 4vw, 3.5rem) 0;
}

.bankside-main .pgs-page-title .kit-heading--1 {
  zoom: 1;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--kit-line-strong);
  font-size: calc(var(--bankside-display) * clamp(3rem, 1.5rem + 6.5vw, 8.5rem));
}

/* A rule inside a text is the row of dashes. */
.kit-rich-text hr,
.bankside-prose hr {
  width: 3rem;
  height: 1px;
  margin: 2.25em 0;
  border: 0;
  background: var(--bankside-dashes);
}

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

/* Flat rectangles in small capitals with an arrow that steps forward. The filled one turns into its own outline. */
.bankside-button {
  --bankside-button-bg: var(--primary, #111);
  --bankside-button-fg: var(--on-primary, #f4f4f1);
  --bankside-button-line: var(--bankside-button-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--bankside-button-line);
  border-radius: 0;
  background: var(--bankside-button-bg);
  color: var(--bankside-button-fg);
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  transition: background-color var(--bankside-speed) ease, border-color var(--bankside-speed) ease, color var(--bankside-speed) ease;
}

.bankside-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bankside-button:hover {
  background: transparent;
  color: var(--bankside-button-bg);
}

.bankside-button__arrow {
  position: relative;
  flex: none;
  width: 0.95rem;
  height: 0.6rem;
  transition: transform var(--bankside-speed) var(--bankside-glide);
}

.bankside-button__arrow::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
}

.bankside-button__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.bankside-button:hover .bankside-button__arrow {
  transform: translateX(0.3rem);
}

/* A button to another website ends in the shared layer's small drawn arrow (OutsideLinks, resilience.css), which says
   "another website"; Bankside's forward arrow steps aside, so a button never shows two. */
.bankside-button:has(.pgs-outside-arrow) .bankside-button__arrow {
  display: none;
}

a.bankside-button .pgs-outside-arrow {
  margin-inline-start: 0;
}

.bankside-button--secondary {
  --bankside-button-bg: transparent;
  --bankside-button-fg: var(--text-primary, #111);
  --bankside-button-line: color-mix(in srgb, var(--text-primary, #111) 34%, transparent);
}

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

/* The accent: for a website whose palette has a signal colour and wants one button in it. */
.bankside-button--accent {
  --bankside-button-bg: var(--accent, #111);
  --bankside-button-fg: var(--on-accent, #fff);
}

.bankside-button--accent:hover {
  color: var(--accent-ink, var(--accent, #111));
}

/* On a photograph or a plate: white, and a frame in white for the second choice. */
.bankside-button--light {
  --bankside-button-bg: #fff;
  --bankside-button-fg: #111;
}

.bankside-button--light:hover {
  background: transparent;
  color: #fff;
}

.bankside-button--ghost {
  --bankside-button-bg: transparent;
  --bankside-button-fg: #fff;
  --bankside-button-line: rgb(255 255 255 / 0.6);
}

.bankside-button--ghost:hover {
  --bankside-button-line: #fff;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}

/* The plate's own light colour instead of white, where the plate is the palette's deep colour (the phone menu, the footer). */
.bankside-drawer .bankside-button--light,
.bankside-footer .bankside-button--light {
  --bankside-button-bg: var(--bankside-on-plate);
  --bankside-button-fg: var(--bankside-plate);
}

.bankside-drawer .bankside-button--light:hover,
.bankside-footer .bankside-button--light:hover {
  color: var(--bankside-on-plate);
}

.bankside-button--small {
  min-height: 2.5rem;
  padding: 0.55rem 1.05rem;
  font-size: var(--bankside-small);
}

.bankside-button--small .bankside-button__arrow {
  width: 0.8rem;
}

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

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

.bankside-announcement {
  position: relative;
  z-index: 51;
  background: var(--bankside-plate);
  color: var(--bankside-on-plate);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

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

.bankside-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
}

/* On a phone the message and its link share one row (resilience.css): the words shrink, the mark steps aside. */
@media (max-width: 39.99rem) {
  .bankside-announcement__mark {
    display: none;
  }

  .bankside-announcement p,
  .bankside-announcement .theme-announcement__message {
    min-width: 0;
  }
}

.bankside-announcement__icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
}

.bankside-announcement a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.bankside-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--bankside-speed) ease;
}

.bankside-announcement .announcement-dismiss:hover {
  opacity: 1;
}

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

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

/* The header stays at the top. Its bar has two looks on one fixed height: clear (over a full-width hero: light words,
   no background) and a plain sheet of the page colour over a hairline. The sheet is a layer of its own, so it fades in
   without the bar's size changing. The topbar line above it scrolls away with the page. */
.bankside-header {
  --bankside-header-fg: var(--text-primary, #111);
  --bankside-header-muted: var(--text-secondary, #55554f);
  position: sticky;
  top: calc(-1 * var(--bankside-topbar));
  z-index: 50;
  color: var(--bankside-header-fg);
  view-transition-name: bankside-header;
}

.bankside-header__bar {
  position: relative;
  isolation: isolate;
}

.bankside-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--bankside-hairline);
  background: var(--bankside-paper);
  pointer-events: none;
  transition: opacity 320ms var(--bankside-ease);
}

.bankside-header__inner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.75rem);
  min-height: var(--bankside-bar);
  max-width: calc(var(--bankside-width) + 2 * var(--bankside-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--bankside-gutter);
}

/* The masthead: the menu at the left, the name in the middle, the phone and the button at the right. */
.bankside-header__inner--centered {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.bankside-header__brand {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.bankside-header__inner--centered .bankside-header__brand {
  justify-self: center;
}

.bankside-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  min-width: 0;
}

.bankside-header__phone,
.bankside-footer__call {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}

.bankside-header__phone span,
.bankside-footer__call span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 420ms var(--bankside-glide);
}

.bankside-header__phone:hover span,
.bankside-footer__call:hover span {
  background-size: 100% 1px;
}

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

/* The name in the heading face's capitals. */
.bankside-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: inherit;
}

/* The name is shown whole: a long one breaks onto a second line rather than losing its end. */
.bankside-brand__name {
  display: block;
  min-width: 0;
  max-width: min(22rem, 58vw);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * 2rem);
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0.01em;
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.bankside-brand:has(.bankside-brand__logo, .brand-logo-original, .logo-mask) .bankside-brand__name {
  font-size: calc(var(--bankside-display) * 1.6rem);
}

/* In the header bar a name keeps to two lines; only one longer than about 30 characters loses its end there. */
.bankside-header .bankside-brand__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

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

@media (max-width: 39.99rem) {
  .bankside-brand__name {
    font-size: calc(var(--bankside-display) * 1.75rem);
  }

  .bankside-brand:has(.bankside-brand__logo, .brand-logo-original, .logo-mask) .bankside-brand__name {
    font-size: calc(var(--bankside-display) * 1.4rem);
  }
}

.bankside-brand--light {
  color: var(--bankside-on-plate);
}

/* A logo the website lets the theme colour takes the header's words colour. */
.bankside-header .logo-mask {
  background-color: var(--bankside-header-fg) !important;
}

/* Over a full-width hero that opens the page the header lies clear on the picture, with light words, until the page
   moves. The hero slides up under it (Hero, below). Browsers without :has() keep the plain sheet. */
.bankside-header:not(.is-scrolled):has(~ .bankside-main > .bankside-hero:first-child) {
  --bankside-header-fg: #fff;
  --bankside-header-muted: rgb(255 255 255 / 0.82);
}

html.bankside-menu-open .bankside-header {
  --bankside-header-fg: var(--bankside-on-plate);
  --bankside-header-muted: color-mix(in srgb, var(--bankside-on-plate) 82%, transparent);
}

.bankside-header:not(.is-scrolled):has(~ .bankside-main > .bankside-hero:first-child) .bankside-header__bar::before,
html.bankside-menu-open .bankside-header .bankside-header__bar::before {
  opacity: 0;
}

/* The header's button over the picture is white; on the open menu it is the plate's light colour. */
.bankside-header:not(.is-scrolled):has(~ .bankside-main > .bankside-hero:first-child) .bankside-header__cta {
  --bankside-button-bg: #fff;
  --bankside-button-fg: #111;
}

.bankside-header:not(.is-scrolled):has(~ .bankside-main > .bankside-hero:first-child) .bankside-header__cta:hover {
  color: #fff;
}

html.bankside-menu-open .bankside-header .bankside-header__cta {
  --bankside-button-bg: var(--bankside-on-plate);
  --bankside-button-fg: var(--bankside-plate);
}

/* A logo in its own colours (img.brand-logo-original) on Bankside's dark or photographic backdrops. theme.js measures the
   logo's own tone (data-bankside-tone, dark or light); a dark logo gets a small plate of the page colour where the
   backdrop is dark or a photograph: the clear header over a hero, the open phone menu and the footer. A light logo
   there needs none. On the plain bar the shared check (resilience.js) decides against the bar's own colour. */
.bankside-header:not(.is-scrolled):has(~ .bankside-main > .bankside-hero:first-child) .brand-logo-original[data-bankside-tone="dark"],
html.bankside-menu-open .bankside-header .brand-logo-original[data-bankside-tone="dark"],
.bankside-footer .brand-logo-original[data-bankside-tone="dark"] {
  box-sizing: content-box;
  padding: 0.3rem 0.5rem;
  background: #fff;
}

/* The shared plate chosen against the plain bar is wrong over a photograph, the open menu and the footer: Bankside's own
   rule above decides there. */
.bankside-header:not(.is-scrolled):has(~ .bankside-main > .bankside-hero:first-child) .brand-logo-original.brand-logo-plate:not([data-bankside-tone="dark"]),
html.bankside-menu-open .bankside-header .brand-logo-original.brand-logo-plate:not([data-bankside-tone="dark"]),
.bankside-footer .brand-logo-original.brand-logo-plate:not([data-bankside-tone="dark"]) {
  padding: 0;
  background: none;
  box-shadow: none;
}

@media (max-width: 39.99rem) {
  .bankside-header .bankside-brand__logo,
  .bankside-header .brand-logo-original {
    max-height: 2.25rem !important;
    max-width: min(10rem, 44vw) !important;
  }
}

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

.bankside-topbar {
  height: var(--bankside-topbar);
  overflow: hidden;
  border-bottom: 1px solid var(--bankside-hairline);
  background: var(--bankside-paper);
  color: var(--bankside-header-muted);
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.bankside-header:not(.is-scrolled):has(~ .bankside-main > .bankside-hero:first-child) .bankside-topbar {
  border-bottom-color: rgb(255 255 255 / 0.24);
  background: transparent;
}

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

.bankside-topbar__contact {
  display: flex;
  gap: 2rem;
  min-width: 0;
  overflow: hidden;
}

.bankside-topbar a {
  color: inherit;
  text-decoration: none;
  transition: color var(--bankside-speed) ease;
}

.bankside-topbar a:hover {
  color: var(--bankside-header-fg);
}

.bankside-topbar__social,
.bankside-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.bankside-topbar__social svg {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

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

.bankside-nav--desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.1rem clamp(0.25rem, 1.2vw, 1.25rem);
  min-width: 0;
}

.bankside-header__inner--centered .bankside-nav--desktop {
  justify-content: flex-start;
  margin-inline-start: -0.6rem;
}

.bankside-nav__item {
  position: relative;
}

/* Small capitals; a hairline draws in under a link from its left, and the page being shown keeps it. */
.bankside-nav--desktop .bankside-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.6rem;
  color: var(--bankside-header-fg);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.bankside-nav--desktop .bankside-nav__item > a::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  bottom: 0.35rem;
  left: 0.6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--bankside-glide);
}

.bankside-nav--desktop .bankside-nav__item > a:is(:hover, :focus-visible)::after,
.bankside-nav__item--parent:is(:hover, :focus-within) > a::after,
.bankside-nav--desktop .bankside-nav__item.is-current > a::after {
  transform: scaleX(1);
}

.bankside-nav__caret {
  width: 0.55rem;
  height: 0.36rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform var(--bankside-speed) var(--bankside-ease);
}

.bankside-nav__item--parent:is(:hover, :focus-within) .bankside-nav__caret {
  transform: rotate(180deg);
}

/* A parent's pages hang under it on a plain sheet with a hairline frame. The padding on top belongs to the list, so the
   pointer never crosses a gap. */
.bankside-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  padding-top: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity var(--bankside-speed) ease, transform 420ms var(--bankside-glide), visibility var(--bankside-speed);
}

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

.bankside-nav__panel {
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 0;
  border: 1px solid var(--bankside-hairline);
  background: var(--bankside-paper);
}

.bankside-nav__panel a {
  display: block;
  padding: 0.65rem 1.1rem;
  color: var(--text-primary, #111);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--bankside-speed) ease;
}

.bankside-nav__panel a:is(:hover, :focus-visible) {
  background: var(--surface-alt, #e8e8e3);
}

/* The menu button: two fine lines that turn into a cross. */
.bankside-menu-button {
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: -0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bankside-header-fg);
  cursor: pointer;
}

.bankside-menu-button__lines {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 0.5rem;
}

.bankside-menu-button__lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 420ms var(--bankside-glide);
}

.bankside-menu-button__lines i:first-child {
  top: 0;
}

.bankside-menu-button__lines i:last-child {
  bottom: 0;
}

.bankside-menu-button[aria-expanded="true"] .bankside-menu-button__lines i:first-child {
  transform: translateY(0.2rem) rotate(45deg);
}

.bankside-menu-button[aria-expanded="true"] .bankside-menu-button__lines i:last-child {
  transform: translateY(-0.2rem) rotate(-45deg);
}

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

/* A full plate in the deep colour over the whole window, under the header's bar (which turns clear over it). The pages
   are numbered and set in large capitals; they follow one after another as the plate fades in. */
.bankside-drawer {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: calc(var(--bankside-drawer-top, var(--bankside-bar)) + 0.75rem);
  background: var(--bankside-plate);
  color: var(--bankside-on-plate);
  opacity: 0;
  transition: opacity 340ms var(--bankside-ease);
}

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

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

.bankside-drawer__inner {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: 0.5rem var(--bankside-gutter) 2rem;
}

.bankside-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 0 1rem;
}

.bankside-nav--drawer {
  display: block;
  border-top: 1px solid color-mix(in srgb, var(--bankside-on-plate) 26%, transparent);
  counter-reset: bankside-menu;
}

.bankside-drawer__item {
  border-bottom: 1px solid color-mix(in srgb, var(--bankside-on-plate) 26%, transparent);
  counter-increment: bankside-menu;
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 420ms var(--bankside-ease), transform 620ms var(--bankside-glide);
  transition-delay: calc(60ms + var(--bankside-i, 0) * 40ms);
}

.bankside-drawer.is-open .bankside-drawer__item {
  opacity: 1;
  transform: none;
}

.bankside-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0 0.7rem;
  color: inherit;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * clamp(2.5rem, 11vw, 3.75rem));
  font-weight: var(--bankside-heading-weight);
  line-height: 0.95;
  text-decoration: none;
  text-transform: uppercase;
}

.bankside-drawer__link::before {
  content: counter(bankside-menu, decimal-leading-zero);
  flex: none;
  width: 1.75rem;
  color: color-mix(in srgb, var(--bankside-on-plate) 70%, transparent);
  font-family: var(--font-body, sans-serif);
  font-size: var(--bankside-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  line-height: 1;
  transform: translateY(-0.9em);
}

.bankside-drawer .bankside-drawer__link .pgs-outside-arrow {
  margin-inline-start: auto;
  width: 0.4em;
  height: 0.4em;
  opacity: 0.7;
}

.bankside-drawer__children {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 1rem 2.75rem;
}

.bankside-drawer__children a {
  padding: 0.4rem 0;
  color: color-mix(in srgb, var(--bankside-on-plate) 84%, transparent);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.bankside-drawer__footer {
  display: grid;
  gap: 1.25rem;
  margin-top: auto;
  padding-top: 2rem;
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 420ms var(--bankside-ease) 240ms, transform 620ms var(--bankside-glide) 240ms;
}

.bankside-drawer.is-open .bankside-drawer__footer {
  opacity: 1;
  transform: none;
}

.bankside-drawer__contact {
  display: grid;
  gap: 0.4rem;
}

.bankside-drawer__contact-link {
  width: fit-content;
  color: color-mix(in srgb, var(--bankside-on-plate) 90%, transparent);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

html.bankside-menu-open {
  overflow: hidden;
}

/* Below the desktop width the menu moves into the phone menu. */
@media (max-width: 63.99rem) {
  .bankside-nav--desktop,
  .bankside-header__cta,
  .bankside-header__phone,
  .bankside-header__slot {
    display: none;
  }

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

  .bankside-header__inner,
  .bankside-header__inner--centered {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
  }

  .bankside-header__inner--centered .bankside-header__brand {
    justify-self: start;
  }
}

@media (min-width: 64rem) {
  .bankside-drawer:not(#site-header.theme-nav-compact .bankside-drawer) {
    display: none;
  }
}

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

/* A crowded desktop menu moves into the phone menu (the shared resilience script marks the header). */
#site-header.theme-nav-compact .bankside-header__phone {
  display: none;
}

#site-header.theme-nav-compact .bankside-header__inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

#site-header.theme-nav-compact .bankside-header__inner--centered .bankside-header__brand {
  justify-self: start;
}

/* ------------------------------------------------------------------ Hero */

/* The photograph across the whole window, nearly a screen tall. The heading lies along its lower edge in capitals sized
   to fill the width: --bankside-fit is the number of characters planned for its widest line and --bankside-lines the
   number of lines (includes/chrome.php, bankside_fit), so one word runs from edge to edge and a sentence settles in two
   or three lines, never taller than about two fifths of the window. Above it, a row: the lead line at the left, the
   buttons at the right. */
.bankside-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(34rem, 94svh, 68rem);
  overflow: hidden;
  background: #151515;
  color: #fff;
}

/* A hero that opens the page slides up under the header, which lies clear on it. */
.bankside-main > .bankside-hero:first-child {
  margin-top: calc(-1 * var(--bankside-chrome));
}

.bankside-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

/* Deepest at the bottom, where the heading lies, and a little at the top, under the header's words. The block's own
   word on the shade (--pgs-tint) makes all of it lighter or deeper. */
.bankside-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(0 0 0 / min(0.9, calc(0.42 * var(--pgs-tint, 1)))) 0%,
    rgb(0 0 0 / min(0.9, calc(0.12 * var(--pgs-tint, 1)))) 22%,
    rgb(0 0 0 / min(0.9, calc(0.24 * var(--pgs-tint, 1)))) 42%,
    rgb(0 0 0 / min(0.92, calc(0.58 * var(--pgs-tint, 1)))) 64%,
    rgb(0 0 0 / min(0.94, calc(0.76 * var(--pgs-tint, 1)))) 100%);
}

.bankside-hero__inner {
  display: grid;
  align-self: end;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
  max-width: calc(var(--bankside-width) + 2 * var(--bankside-gutter));
  margin-inline: auto;
  padding: calc(var(--bankside-chrome) + 3rem) var(--bankside-gutter) clamp(1.1rem, 2.2vw, 2rem);
}

.bankside-hero__title {
  order: 2;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(
    2.75rem,
    calc((min(100vw, var(--bankside-width) + 2 * var(--bankside-gutter)) - 2 * var(--bankside-gutter)) / (var(--bankside-fit, 18) * var(--bankside-glyph) * 1.14)),
    min(calc(24rem / var(--bankside-lines, 1)), calc(42svh / var(--bankside-lines, 1)))
  );
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0;
  line-height: 0.86;
  overflow-wrap: break-word;
  text-transform: uppercase;
  text-wrap: balance;
}

.bankside-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  order: 1;
}

.bankside-hero__lead {
  max-width: 30rem;
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
}

.bankside-hero__lead::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1px;
  margin-bottom: 0.8rem;
  background: var(--bankside-dashes);
}

.bankside-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 39.99rem) {
  .bankside-hero {
    min-height: clamp(30rem, 88svh, 46rem);
  }

  .bankside-hero__actions,
  .bankside-hero__actions .bankside-button {
    width: 100%;
  }
}

/* The words settle in once, softly, where scripts run and the visitor allows motion. A browser driven by a program gets
   a still page (motion.js marks it). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-still) .bankside-hero__title,
  html:not(.motion-still) .bankside-hero__meta,
  html:not(.motion-still) .bankside-opening__title {
    animation: bankside-rise 900ms var(--bankside-glide) both;
  }

  html:not(.motion-still) .bankside-hero__meta {
    animation-delay: 140ms;
  }
}

@keyframes bankside-rise {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Opening (the split hero) */

/* The page's opening on paper: the heading in large capitals over the left two thirds, a hairline from edge to edge of
   the window under it, and at the right an upright photograph that stands across that line and hangs a little into the
   section that follows. Under the line at the left: the lead line, the selling points, the buttons, the badges. */
.bankside-opening {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 5vw, 5rem) var(--bankside-gutter) clamp(2rem, 4vw, 3.5rem);
}

.bankside-opening__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--bankside-width);
  margin-inline: auto;
}

.bankside-opening__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(
    2.75rem,
    calc((min(100vw, var(--bankside-width) + 2 * var(--bankside-gutter)) - 2 * var(--bankside-gutter)) / (var(--bankside-fit, 18) * var(--bankside-glyph) * 1.14)),
    calc(21rem / var(--bankside-lines, 1))
  );
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0;
  line-height: 0.88;
  overflow-wrap: break-word;
  text-transform: uppercase;
  text-wrap: balance;
}

.bankside-opening__media {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-alt, #e8e8e3);
}

.bankside-opening__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.bankside-opening__body {
  position: relative;
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* The hairline from edge to edge of the window; the photograph passes in front of it. */
.bankside-opening__body::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100vw;
  left: -100vw;
  height: 1px;
  background: var(--bankside-hairline);
  pointer-events: none;
}

.bankside-opening__lead {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}

.bankside-opening__lead::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1px;
  margin-bottom: 0.8rem;
  background: var(--bankside-dashes);
}

.bankside-opening__facts {
  display: grid;
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bankside-hairline);
  list-style: none;
}

.bankside-opening__facts li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--bankside-hairline);
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.bankside-opening__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
}

.bankside-opening__icon svg,
.bankside-opening__icon .bankside-icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.25;
}

.bankside-opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bankside-opening__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bankside-opening__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

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

.bankside-stars svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.bankside-stars svg.is-full {
  fill: currentColor;
}

.bankside-opening__trustpilot {
  color: inherit;
  text-underline-offset: 0.3em;
}

@media (min-width: 60rem) {
  .bankside-opening__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: clamp(1rem, 1.7vw, 1.6rem);
    row-gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .bankside-opening__title {
    grid-column: 1 / span 7;
    grid-row: 1;
    align-self: end;
    /* The heading has seven of the twelve columns here, and was planned for them (blocks/hero_image_split.php). */
    font-size: clamp(
      2.75rem,
      calc((min(100vw, var(--bankside-width) + 2 * var(--bankside-gutter)) - 2 * var(--bankside-gutter)) * 0.578 / (var(--bankside-fit, 18) * var(--bankside-glyph) * 1.14)),
      calc(21rem / var(--bankside-lines, 1))
    );
  }

  .bankside-opening__media {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: clamp(1rem, 4vw, 4.5rem);
    margin-bottom: calc(-1 * (clamp(2rem, 4vw, 3.5rem) + clamp(1.5rem, 3vw, 3rem)));
  }

  .bankside-opening__body {
    grid-column: 1 / span 6;
    grid-row: 2;
    align-self: start;
  }

  .bankside-opening--words .bankside-opening__title {
    grid-column: 1 / -1;
    font-size: clamp(
      2.75rem,
      calc((min(100vw, var(--bankside-width) + 2 * var(--bankside-gutter)) - 2 * var(--bankside-gutter)) / (var(--bankside-fit, 18) * var(--bankside-glyph) * 1.14)),
      calc(21rem / var(--bankside-lines, 1))
    );
  }

  /* Nothing hangs into a slideshow or a full-width hero that follows. */
  .bankside-opening:has(+ .kit-root > .kit-slideshow) .bankside-opening__media,
  .bankside-opening:has(+ .bankside-hero) .bankside-opening__media {
    margin-bottom: 0;
  }
}

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

.bankside-breadcrumbs {
  max-width: calc(var(--bankside-width) + 2 * var(--bankside-gutter));
  margin-inline: auto;
  padding: 1.25rem var(--bankside-gutter) 0;
  color: var(--text-secondary, #55554f);
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bankside-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.bankside-breadcrumbs li + li::before {
  content: "/";
  opacity: 0.6;
}

.bankside-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.bankside-breadcrumbs a:hover {
  color: var(--text-primary, #111);
}

.bankside-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #111);
  overflow-wrap: anywhere;
}

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

/* The last plate. Its parts are small capitals in columns under hairlines; under them the website's name, as large as the
   plate is wide, its lower edge cut by the end of the page. */
.bankside-footer {
  position: relative;
  overflow: hidden;
  background: var(--bankside-plate);
  color: var(--bankside-on-plate);
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

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

.bankside-footer a:where(:not(.bankside-button)) {
  color: inherit;
  text-decoration: none;
}

.bankside-footer :is(.bankside-footer__links, .bankside-footer__inline, .bankside-footer__legal, .bankside-footer__contact) a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 420ms var(--bankside-glide);
}

.bankside-footer :is(.bankside-footer__links, .bankside-footer__inline, .bankside-footer__legal, .bankside-footer__contact) a:hover {
  background-size: 100% 1px;
}

/* The invitation of the mega footer: large capitals at the left, the button and the phone at the right. */
.bankside-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--bankside-on-plate) 26%, transparent);
}

.bankside-footer__invite {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * clamp(2.75rem, 1.5rem + 5.4vw, 7rem));
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}

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

.bankside-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 64rem) {
  .bankside-footer__grid {
    grid-template-columns: minmax(0, 2.2fr) repeat(auto-fit, minmax(9rem, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 1fr);
  }
}

.bankside-footer__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1.1rem;
  min-width: 0;
}

.bankside-footer__brand {
  display: inline-flex;
  max-width: 100%;
}

.bankside-footer__tagline {
  max-width: 24rem;
  margin: 0;
  color: color-mix(in srgb, var(--bankside-on-plate) 86%, transparent);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.bankside-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--bankside-on-plate) 34%, transparent);
  transition: background-color var(--bankside-speed) ease, color var(--bankside-speed) ease, border-color var(--bankside-speed) ease;
}

.bankside-footer__social {
  gap: 0.5rem;
}

.bankside-footer__social a:hover {
  border-color: var(--bankside-on-plate);
  background: var(--bankside-on-plate);
  color: var(--bankside-plate);
}

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

.bankside-footer__column {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-width: 0;
  margin: 0;
  font-style: normal;
}

.bankside-footer__title {
  margin: 0;
  color: color-mix(in srgb, var(--bankside-on-plate) 70%, transparent);
  font-size: var(--bankside-small);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.bankside-footer__links {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
}

.bankside-footer__contact p {
  margin: 0;
}

.bankside-footer__contact a {
  width: fit-content;
  overflow-wrap: anywhere;
}

.bankside-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--bankside-on-plate) 26%, transparent);
  color: color-mix(in srgb, var(--bankside-on-plate) 78%, transparent);
  font-size: var(--bankside-small);
  letter-spacing: 0.08em;
}

.bankside-footer__copyright {
  margin: 0;
}

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

/* The minimal footer: one line. */
.bankside-footer--minimal .bankside-footer__inner {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.bankside-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
}

.bankside-footer--minimal .bankside-footer__copyright {
  color: color-mix(in srgb, var(--bankside-on-plate) 78%, transparent);
  font-size: var(--bankside-small);
}

.bankside-footer--minimal .bankside-footer__legal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--bankside-on-plate) 26%, transparent);
  font-size: var(--bankside-small);
}

/* The name, very large: one line as wide as the plate, cut by the end of the page. The class says how long the name is
   (theme_footer_wordmark: none up to 6 characters, --m to 10, --l to 15, --xl to 22, --xxl to 30), and the size is the
   plate's width divided by that many capitals of the heading face. */
.bankside-footer__wordmark {
  --bankside-wordmark-chars: 6;
  display: block;
  max-width: calc(var(--bankside-width) + 2 * var(--bankside-gutter));
  margin: 0 auto -0.1em;
  padding-inline: var(--bankside-gutter);
  overflow: hidden;
  color: var(--bankside-on-plate);
  font-family: var(--font-heading, sans-serif);
  font-size: min(
    calc((min(100vw, var(--bankside-width) + 2 * var(--bankside-gutter)) - 2 * var(--bankside-gutter)) / (var(--bankside-wordmark-chars) * var(--bankside-glyph) * 1.08)),
    30rem
  );
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0;
  line-height: 0.78;
  pointer-events: none;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
}

.bankside-footer__wordmark--m { --bankside-wordmark-chars: 10; }
.bankside-footer__wordmark--l { --bankside-wordmark-chars: 15; }
.bankside-footer__wordmark--xl { --bankside-wordmark-chars: 22; }
.bankside-footer__wordmark--xxl { --bankside-wordmark-chars: 30; }

/* ------------------------------------------------------------------ 404 */

.bankside-not-found {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 9rem) var(--bankside-gutter) clamp(4rem, 9vw, 8rem);
}

.bankside-not-found__inner {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  max-width: var(--bankside-width);
  margin-inline: auto;
}

.bankside-not-found__number {
  position: absolute;
  top: 50%;
  right: -0.04em;
  z-index: -1;
  margin: 0;
  color: color-mix(in srgb, var(--text-primary, #111) 6%, transparent);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * clamp(12rem, 44vw, 42rem));
  font-weight: var(--bankside-heading-weight);
  line-height: 0.74;
  transform: translateY(-50%);
  user-select: none;
}

.bankside-not-found h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * clamp(3rem, 1.6rem + 6.4vw, 8.5rem));
  font-weight: var(--bankside-heading-weight);
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}

.bankside-not-found__text {
  max-width: 34rem;
  margin: 0;
}

.bankside-not-found .pgs-not-found-links ul {
  justify-content: flex-start !important;
  margin-top: 0.5rem !important;
  font-size: 0.75rem;
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bankside-not-found .pgs-not-found-links a {
  text-underline-offset: 0.3em;
}

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

.bankside-divider {
  display: block;
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

.bankside-divider--none {
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.bankside-divider__inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(var(--bankside-width) + 2 * var(--bankside-gutter));
  margin-inline: auto;
  padding-inline: var(--bankside-gutter);
}

/* A hairline from edge to edge of the window, with the mark of bars standing on it at the content's left edge. */
.bankside-divider--line {
  position: relative;
}

.bankside-divider--line::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--bankside-hairline);
}

.bankside-divider--line .bankside-mark {
  position: relative;
  box-shadow: 0 0 0 0.6rem var(--bankside-paper);
  background-color: var(--bankside-paper);
}

.bankside-divider__path {
  flex: 1 1 auto;
  height: 1px;
  background: var(--bankside-dashes);
  opacity: 0.6;
}

.bankside-divider__dot {
  width: 0.3rem;
  height: 0.3rem;
  background: var(--bankside-ink);
}

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

/* A reading column right of centre on a wide screen, like a column in a magazine; a blog post's title runs across the
   whole width over a hairline, with the date and the author in a small label above it. */
.bankside-article {
  padding: clamp(3rem, 6vw, 6rem) var(--bankside-gutter);
}

.bankside-article--post {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.bankside-article__inner {
  max-width: var(--bankside-width);
  margin-inline: auto;
}

.bankside-article__header {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--bankside-hairline);
}

.bankside-article__byline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0;
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bankside-article__header h1 {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * clamp(2.75rem, 1.5rem + 5.5vw, 7.5rem));
  font-weight: var(--bankside-heading-weight);
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}

.bankside-prose {
  max-width: 44rem;
  color: var(--text-primary, #111);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  line-height: 1.75;
}

@media (min-width: 64rem) {
  .bankside-prose {
    margin-inline-start: calc(100% / 12 * 4);
  }
}

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

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

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

.bankside-prose :where(h2, h3, h4) {
  margin: 1.8em 0 0.5em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--bankside-heading-strong);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.bankside-prose h2 {
  font-size: calc(var(--bankside-display) * clamp(2rem, 1.6rem + 1.4vw, 3rem));
  font-weight: var(--bankside-heading-weight);
}

.bankside-prose h3 {
  font-size: calc(var(--bankside-display) * clamp(1.5rem, 1.35rem + 0.6vw, 2rem));
}

.bankside-prose h4 {
  font-size: calc(var(--bankside-display) * 1.375rem);
}

.bankside-prose a {
  color: inherit;
  text-decoration-color: var(--bankside-signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.bankside-prose a:hover {
  color: var(--bankside-signal);
}

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

.bankside-prose ul {
  list-style: square;
}

.bankside-prose li + li {
  margin-top: 0.4em;
}

.bankside-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 1px solid var(--bankside-ink);
  font-size: 1.15em;
  line-height: 1.45;
}

.bankside-prose img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bankside-prose figcaption {
  margin-top: 0.75rem;
  color: var(--text-secondary, #55554f);
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bankside-prose table {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.bankside-prose :where(th, td) {
  border-bottom: 1px solid var(--bankside-line);
}

.bankside-prose th {
  color: var(--text-primary, #111);
  font-size: var(--bankside-small);
  font-weight: var(--bankside-body-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bankside-prose :where(code, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.bankside-prose pre {
  overflow-x: auto;
  padding: 1.25rem;
  background: var(--surface-alt, #e8e8e3);
}

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

.bankside-form-success {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 1.5rem 0;
}

.bankside-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(var(--bankside-display) * clamp(2.25rem, 1.8rem + 2vw, 3.5rem));
  font-weight: var(--bankside-heading-weight);
  line-height: 0.92;
  text-transform: uppercase;
}

.bankside-form-success p {
  margin: 0;
  color: var(--text-secondary, #55554f);
}

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

/* The shared bar (resilience.css) wears Bankside's button through the --chrome-button table there; here only its sheet:
   plain paper over a hairline, no shadow. */
body .theme-action-bar {
  border-top: 1px solid var(--bankside-hairline);
  background: var(--bankside-paper);
  box-shadow: none;
}

/* ------------------------------------------------------------------ Phones */

@media (max-width: 47.99rem) {
  /* The echo is a quiet word at the head of its section on a small screen: it does not cross the seam. */
  .bankside-main .kit-section[data-ghost]::before {
    font-size: calc(var(--bankside-display) * clamp(5rem, 30vw, 9rem));
    transform: translate3d(0, -30%, 0);
  }

  .bankside-main .kit-section[data-block="pricing_table"] .kit-grid > .kit-card {
    padding-inline: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--kit-line);
  }

  .bankside-main .kit-section[data-block="pricing_table"] .kit-grid > .kit-card--surface {
    padding-inline: clamp(1.25rem, 5vw, 2rem);
  }
}

/* ------------------------------------------------------------------ Without JavaScript, and calm motion */

@media (scripting: none) {
  .bankside-menu-button {
    display: none !important;
  }

  .bankside-drawer[hidden] {
    position: static;
    display: block;
    z-index: auto;
    padding-top: 0;
    opacity: 1;
  }

  .bankside-drawer[hidden] .bankside-drawer__item,
  .bankside-drawer[hidden] .bankside-drawer__footer {
    opacity: 1;
    transform: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }

  .bankside-button:hover .bankside-button__arrow {
    transform: none;
  }
}

/* Page changes cross-fade (the shared motion); the header keeps its place while the page under it changes. */
::view-transition-group(bankside-header) {
  animation-duration: 280ms;
}