:root {
  --color-red: #d31503;
  --color-red-dark: #b81102;
  --color-red-tint: #fdeceb;
  --color-white: #ffffff;
  --color-off-white: #f6f5f3;
  --color-ink: #1a1a1a;
  --color-muted: #5a5a5a;
  --color-border: #d9d9d9;
  --color-error: #b3261e;
  --color-error-bg: #fdecea;
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Big Shoulders Display", var(--font-sans);
  --max-width: 72rem;
  --radius: 0.5rem;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5.5rem;
  /* Shared with .section:last-child's compensating padding below, so the
     two stay in sync at every viewport width rather than two numbers that
     can silently drift apart. */
  --block-break-height: clamp(1.65rem, 3.75vw, 4.8rem);
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.55;
  font-size: 1.0625rem;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-red-dark);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  text-transform: uppercase;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.section > .container > p:first-of-type,
.hero p {
  font-size: 1.125rem;
}

.lead {
  font-size: 1.25rem;
  color: var(--color-muted);
  max-width: 42rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-red-dark);
  outline-offset: 2px;
}

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

.section {
  padding-block: var(--space-6);
}

/*
 * Two adjacent white sections share no visible boundary, so their padding
 * reads as one continuous (and much bigger-looking) gap even though each
 * side's padding-block is identical to every other section. Apply this to
 * whichever section is second in a white-on-white pair to give the eye a
 * seam. A class tied to the section's content, not its position — section
 * order here has already changed more than once.
 */
.section--tint {
  background: var(--color-off-white);
}

/*
 * Section padding is the single source of truth for vertical rhythm
 * between sections. Without this, a bare <p> or <ul> as a section's
 * first/last child brings its own UA-default block margin, which sits
 * inside the padding box (padding always blocks margin collapse) and
 * silently adds extra space on top of padding-block — making some gaps
 * bigger than others depending on what element happens to be at the edge.
 */
.section > .container > :first-child,
.hero > .container > :first-child {
  margin-block-start: 0;
}

.section > .container > :last-child,
.hero > .container > :last-child {
  margin-block-end: 0;
}

.section h2 {
  margin-block-end: var(--space-3);
}

/*
 * Block break: a ridgeline silhouette band that sits immediately above a
 * coloured section and is filled with that section's own colour, so the
 * skyline reads as the block growing upwards. The silhouette is a mask, not
 * a coloured SVG, so one traced file serves every colour pairing: the
 * --tone modifier is the block underneath, --sky- the section above (which
 * is painted behind the silhouette, where the shape is cut away).
 *
 * See src/components/BlockBreak.astro, and the copy in src/lib/pageChrome.mjs
 * that the /contact Function renders.
 */
.block-break {
  /*
   * Overlap the section below by a pixel. The mask's bottom edge and the
   * section's top edge round independently, and without this a hairline of
   * the sky shows through the join at some zoom levels. The overlapping row
   * is solid silhouette in every band, so it's the block's own colour.
   */
  margin-block-end: -1px;
  pointer-events: none;
}

.block-break__ridge {
  /*
   * The traced bands are 80:3, so at 3.75vw the artwork fits the element
   * exactly and nothing is cropped. Outside the clamp bounds `cover` trims
   * the ridge at the sides and keeps the figure, which is what we want: on a
   * phone the band stays a readable height instead of collapsing to a
   * sliver, and on a very wide screen it stops growing.
   */
  height: var(--block-break-height);
  -webkit-mask-image: var(--block-break-shape);
  mask-image: var(--block-break-shape);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
 * Each --at- position matches where the figure is baked into that band, so
 * when `cover` does crop the sides the crop window tracks the figure instead
 * of always closing in on the middle. Without this, a left or right figure
 * walks off the edge on a narrow phone.
 */
.block-break--at-left .block-break__ridge {
  -webkit-mask-position: 25% bottom;
  mask-position: 25% bottom;
}

.block-break--at-centre .block-break__ridge {
  -webkit-mask-position: 50% bottom;
  mask-position: 50% bottom;
}

.block-break--at-right .block-break__ridge {
  -webkit-mask-position: 75% bottom;
  mask-position: 75% bottom;
}

.block-break--red .block-break__ridge {
  background-color: var(--color-red);
}

.block-break--ink .block-break__ridge {
  background-color: var(--color-ink);
}

.block-break--tint .block-break__ridge {
  background-color: var(--color-off-white);
}

.block-break--white .block-break__ridge {
  background-color: var(--color-white);
}

.block-break--sky-red {
  background-color: var(--color-red);
}

.block-break--sky-ink {
  background-color: var(--color-ink);
}

.block-break--sky-tint {
  background-color: var(--color-off-white);
}

.block-break--sky-white {
  background-color: var(--color-white);
}

/*
 * Wandering dotted route with an X at the end, used as a closing flourish
 * under a grid of area cards. Masked like the block breaks so it picks up a
 * theme colour rather than shipping as a black SVG, and sized from its own
 * aspect ratio so the path never distorts.
 */
.route-line {
  width: 100%;
  max-width: 56rem;
  aspect-ratio: 1943 / 333;
  margin-block-start: var(--space-5);
  margin-inline: auto;
  background-color: var(--color-red);
  -webkit-mask: url("/images/route-line.svg") center / contain no-repeat;
  mask: url("/images/route-line.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Purely decorative, so drop it rather than leave an unmasked slab. */
@supports not ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .block-break,
  .route-line {
    display: none;
  }
}

.section--red {
  background: var(--color-red);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

/*
 * BaseLayout always renders a BlockBreak ridge right after </main>, on
 * every page (see src/layouts/BaseLayout.astro), bridging into the
 * footer. Its peaks intrude upward into whatever colour sits above them,
 * so content centred within the last section's own box — ignoring that —
 * reads as sitting above true centre: the perceived solid-colour area
 * stops well before the section's actual bottom edge. Pull the bottom
 * padding in by the ridge's height so centring accounts for it.
 */
main > .section:last-child {
  padding-block-end: calc(var(--space-6) - var(--block-break-height));
}

/*
 * Pages that end on running text rather than a card grid leave their last
 * line running up under the ridge's figure, which reads as cramped. Opt
 * those in to a little more room, keeping the ridge compensation above.
 */
main > .section--roomy-end:last-child {
  padding-block-end: calc(
    var(--space-6) + var(--space-4) - var(--block-break-height)
  );
}

/*
 * Figure decoration slot: once a climber/hiker cutout image exists, add
 * <img class="figure-decoration figure-decoration--right" src="..." alt="" />
 * as the last child of a .section--red .container (climber, right side), or
 * .site-footer .container (hiker, left side, use figure-decoration--left).
 */
.figure-decoration {
  position: absolute;
  bottom: 0;
  max-height: 100%;
  width: auto;
  pointer-events: none;
}

.figure-decoration--right {
  right: 1rem;
}

.figure-decoration--left {
  left: 1rem;
}

.section--red a {
  color: var(--color-white);
  text-decoration-thickness: 2px;
}

.section--red .button {
  text-decoration: none;
}

.section--red .button--secondary {
  color: var(--color-red-dark);
}

.section--red .button--secondary:hover {
  color: var(--color-white);
}

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

.pull__quote-mark {
  color: rgb(255 255 255 / 35%);
  margin-block-end: 0.5rem;
}

.pull p:first-of-type {
  font-size: 1.3rem;
  line-height: 1.45;
}

.quiet-ground {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 46rem) {
  .quiet-ground {
    grid-template-columns: 1fr;
  }
}

.quiet-ground__image {
  order: -1;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-red-dark);
}

.quiet-ground__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: luminosity;
  opacity: 0.9;
}

.button {
  position: relative;
  z-index: 0;
  display: inline-block;
  overflow: hidden;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  background: var(--color-red);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--color-red);
  cursor: pointer;
  font-size: 1rem;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/*
 * Traced from real OS map contour screenshots (potrace), masked to a
 * flat dark red tone so it reads as monochrome texture rather than a
 * busy illustration. z-index: 0 on .button above plus -1 here is
 * required, not decorative: an absolutely-positioned ::before otherwise
 * paints ABOVE plain inline text regardless of DOM order (positioned
 * content always beats non-positioned content), so without this the
 * pattern would sit over the button label rather than behind it. Only
 * appears on hover.
 */
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--color-red-dark);
  -webkit-mask-image: url("/images/patterns/os-map-1.svg");
  mask-image: url("/images/patterns/os-map-1.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.button:hover::before {
  opacity: 0.55;
}

.button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

.button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

.button--secondary {
  background: var(--color-white);
  color: var(--color-red-dark);
}

.button--secondary:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 25%);
}

.status-label {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.status-label::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}

.status-label--available {
  color: var(--color-white);
  background: #1b6e2e;
  border-color: #1b6e2e;
}

.status-label--available::before {
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-label--available::before {
    animation: none;
  }
}

.status-label--development {
  color: var(--color-muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem;
}

.card-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.section__cta {
  margin-block-start: var(--space-4);
}

/*
 * Two-layer card: .card is a stable, never-transformed hit-test box (so
 * :hover can't flicker by shifting its own hitbox mid-transition, which is
 * exactly what happens if the hover trigger and the rotating/scaling
 * element are the same node). .card__inner is the visible card and takes
 * the hover transform; .card::before is a same-size "ghost" card that
 * rotates out behind it in the opposite direction, like a card peeking out
 * from a deck.
 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  opacity: 0;
  transform: rotate(0deg) scale(0.96);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}

.card:hover::before {
  opacity: 1;
  transform: rotate(5deg) scale(1);
}

.card:nth-child(even):hover::before {
  transform: rotate(-5deg) scale(1);
}

.card__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.card:hover .card__inner {
  border-color: var(--color-red);
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 10%);
  transform: translateY(-4px) scale(1.02) rotate(-0.6deg);
}

.card:nth-child(even):hover .card__inner {
  transform: translateY(-4px) scale(1.02) rotate(0.6deg);
}

.card__cta {
  margin-block-start: auto;
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/*
 * Whole-card click target. Deliberately NOT nested inside .card__inner:
 * an absolutely-positioned overlay inside an element with an active
 * `transform` (the hover lift/rotate) hit-tests unreliably in Chrome —
 * elementFromPoint at a fixed, stationary point flaps between the overlay
 * and the plain text underneath it on repeated queries, seen as the
 * cursor flickering between pointer and default even with the mouse
 * completely still. Verified by forcing .card__inner's transform to
 * `none` and watching the flicker disappear entirely. Living on the
 * stable, never-transformed .card instead sidesteps that bug rather than
 * fighting it with z-index. See ServiceCard.astro for why this is a
 * second, aria-hidden link rather than wrapping everything in one <a>.
 */
.card__hit-area {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius);
}

.card h3 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Mutes the body copy so the bolder, larger h3 above reads as a clear
   step down in the hierarchy rather than two similarly-weighted blocks
   of dark text. */
.card__inner p {
  color: var(--color-muted);
}

/*
 * Badge hangs off the top-right corner rather than sitting in flow above
 * the title. .card__inner has no overflow:hidden (needed anyway so the
 * hover-rotated card doesn't clip its own content), so the overhang
 * renders outside the card's box without being cut off.
 */
.card__inner > .status-label {
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  z-index: 2;
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
}

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.icon-list__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--color-red-tint);
  color: var(--color-red-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.faq-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-block-end: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  padding-block-end: 0;
  border-bottom: none;
}

.faq-item dt {
  margin: 0 0 0.4rem;
}

.faq-item dd {
  margin: 0;
  color: var(--color-muted);
}

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.area-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  opacity: 0;
  transform: rotate(0deg) scale(0.96);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}

.area-card:hover::before {
  opacity: 1;
  transform: rotate(5deg) scale(1);
}

.area-card:nth-child(even):hover::before {
  transform: rotate(-5deg) scale(1);
}

.area-card__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.area-card:hover .area-card__inner {
  border-color: var(--color-red);
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 10%);
  transform: translateY(-4px) scale(1.02) rotate(-0.6deg);
}

.area-card:nth-child(even):hover .area-card__inner {
  transform: translateY(-4px) scale(1.02) rotate(0.6deg);
}

.area-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-ink);
}

.area-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.area-card__media-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red);
  background:
    linear-gradient(135deg, #f4f4f4, #e6e6e6);
}

.area-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.area-card__body h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.area-card__pin {
  color: var(--color-red);
}

.area-card__body p {
  margin: 0;
  color: var(--color-muted);
}

.error-summary {
  border: 2px solid var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-block-end: 1.5rem;
}

.error-summary h2 {
  margin-block-start: 0;
  font-size: 1.1rem;
}

.error-summary ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-block-end: 1.25rem;
}

.form-field label {
  font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-error);
}

.field-error {
  color: var(--color-error);
  font-size: 0.9rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

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

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-header nav {
  min-width: 0;
}

.site-header nav ul {
  list-style: none;
  display: flex;
  gap: 1rem 1.25rem;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

@media (max-width: 56rem) {
  .site-header .container {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .site-header__logo {
    align-self: flex-start;
  }

  .site-header .button {
    align-self: flex-start;
  }
}

.site-header nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
}

.site-header nav a:hover {
  text-decoration: underline;
}

.site-header__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
}

.site-header__logo img {
  height: 2.1rem;
  width: auto;
}

.site-header__logo img.site-header__wordmark {
  height: 0.855rem;
}

.site-footer {
  background: var(--color-ink);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.site-footer a {
  color: var(--color-white);
}

.site-footer small {
  color: #bdbdbd;
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  align-items: start;
}

@media (max-width: 46rem) {
  .site-footer__main {
    grid-template-columns: 1fr;
  }
}

.site-footer__brand p {
  margin: 0 0 0.4rem;
  color: #d8d8d8;
}

.site-footer__brand p.site-footer__brand-name {
  font-size: 1.1rem;
  color: var(--color-white);
}

.site-footer__label {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9c9c9c;
  margin: 0 0 0.9rem;
}

.site-footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.65rem;
}

.site-footer__contact-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.site-footer__contact-list svg {
  flex: none;
  color: #9c9c9c;
}

.site-footer__areas {
  margin: 0;
  color: #d8d8d8;
}

.site-footer__accreditation {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-block-start: 1.5rem;
}

.site-footer__accreditation img {
  height: 3.5rem;
  width: auto;
}

.site-footer__accreditation-kmc {
  height: 5rem;
}

.site-footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.25rem;
}

.hero {
  padding-block: 4rem;
  background: var(--color-ink) url("/background.jpg") center/cover no-repeat;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

/*
 * Sub-page photo header. Deliberately shorter than the home hero: less
 * padding and a smaller heading, so landing on a sub-page doesn't feel like
 * arriving at another home page. The photo comes in per page as
 * --page-header-image; see src/components/PageHeader.astro.
 */
.page-header {
  padding-block: var(--space-5);
  background:
    var(--color-ink) var(--page-header-image) var(--page-header-focus, center 40%) /
    cover no-repeat;
  color: var(--color-white);
  position: relative;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 55%);
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-block: 0 0.75rem;
}

/* .lead is muted grey for white backgrounds; over the photo it stays light. */
.page-header__lead {
  font-size: 1.125rem;
  max-width: 42rem;
  margin-block: 0;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__video.is-visible {
  opacity: 1;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 55%);
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  margin-block-end: 0.75rem;
}

.hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-start: 1.5rem;
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.split img {
  border-radius: var(--radius);
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (max-width: 46rem) {
  .split {
    grid-template-columns: 1fr;
  }

  .split img {
    order: -1;
  }
}

.privacy-note {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Unlisted brand-assets reference page: colour swatches and logo tiles. */
.brand-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem;
  margin-block-start: var(--space-3);
}

.brand-swatch {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.brand-swatch__chip {
  height: 4.5rem;
}

.brand-swatch__label {
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

.brand-swatch__label strong {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.brand-swatch__label code {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.brand-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-block-start: var(--space-3);
}

.brand-logo-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.brand-logo-tile__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 8rem;
  background: var(--color-off-white);
}

.brand-logo-tile--dark .brand-logo-tile__preview {
  background: var(--color-ink);
}

.brand-logo-tile--red .brand-logo-tile__preview {
  background: var(--color-red);
}

.brand-logo-tile__preview img {
  max-height: 5rem;
  width: auto;
}

.brand-logo-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-block-start: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.brand-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2rem;
  margin-block-start: var(--space-3);
  padding: 2rem;
  background: var(--color-off-white);
  border-radius: var(--radius);
}

.brand-size-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.brand-size-row__item img {
  width: var(--brand-size, 3rem);
  height: auto;
}

.brand-size-row__item span {
  font-size: 0.75rem;
  color: var(--color-muted);
}