/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
/* ---------- Split and full: the words beside or over one photograph ----------
 * Phones: the photograph (the phone crop when there is one) above the words.
 * From 768px, split: the photograph fills the right part of the section
 * (--wu-hero-split, a share of the viewport) and the words sit in the
 * wrap's left part, never under the photograph; full: the photograph fills
 * the section under a wash and the words sit over it in the inverse text.
 * The ground (base, alt, inverse) is the section's, from the shared
 * wu-ground classes, so it shows behind the words. */
.wu-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.wu-hero__wrap {
  position: relative;
  z-index: 1;
  padding-top: var(--wu-hero-pad-top, var(--wu-section-y, 64px));
  padding-bottom: var(--wu-hero-pad-bottom, var(--wu-section-y, 64px));
}

.wu-hero--media .wu-hero__wrap,
.wu-hero__slide--media .wu-hero__wrap {
  padding-top: var(--wu-hero-pad-top, 32px);
  padding-bottom: var(--wu-hero-pad-bottom, 48px);
}

.wu-hero__text {
  max-width: var(--wu-hero-text-max, 640px);
}

.wu-hero__text > * {
  margin-block: 0;
}

.wu-hero__title {
  max-width: var(--wu-hero-title-max, none);
  font-family: var(--wu-display);
  font-size: var(--wu-hero-title-size, var(--wp--preset--font-size--heading-1));
  font-weight: var(--wu-hero-title-weight, var(--wu-heading-weight, 700));
  line-height: var(--wu-hero-title-line, 1.05);
  letter-spacing: var(--wu-hero-title-tracking, var(--wu-heading-tracking, -0.02em));
  text-wrap: var(--wu-hero-title-wrap, balance);
}

.wu-hero__text > * + .wu-hero__title {
  margin-top: var(--wu-hero-title-top, 16px);
}

.wu-hero__text > .wu-hero__standfirst {
  max-width: var(--wu-hero-standfirst-max, 52ch);
  margin-top: var(--wu-hero-standfirst-top, 20px);
}

.wu-hero__text > .wu-hero__actions {
  margin-top: var(--wu-hero-foot-top, 28px);
}

.wu-hero__text > .wu-hero__note,
.wu-hero__text > .wu-hero__email {
  margin-top: var(--wu-hero-foot-gap, 20px);
}

.wu-hero__note {
  max-width: var(--wu-hero-note-max, 60ch);
  font-size: var(--wu-hero-note-size, 14px);
  line-height: var(--wu-hero-note-line, 1.5);
}

/* The standfirst's size and line height in the split and full layouts
   (3.17.0, --wu-hero-standfirst-size, --wu-hero-standfirst-line):
   sections.css reads them where the shared .wu-standfirst sets the two
   (the standfirst preset, 1.5); here, of no weight and with no fallback,
   they reach a site that draws .wu-standfirst itself wherever its rule
   leaves them unset (unset, both inherit, as if absent). */
:where(.wu-hero__standfirst) {
  font-size: var(--wu-hero-standfirst-size);
  line-height: var(--wu-hero-standfirst-line);
}

.wu-hero__email a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--wu-accent);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.wu-hero__media {
  position: relative;
  order: -1;
  height: var(--wu-hero-photo-phone, min(100vw, 60svh));
  overflow: hidden;
  background: var(--wu-hero-photo-ground, var(--wu-surface-2));
}

.wu-hero__picture {
  display: contents;
}

.wu-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wu-hero-focus-phone, 50% 50%);
}

/* On the inverse ground (and over the full layout's photograph, below) the
   hero's text, lines, eyebrow, chip and buttons take the inverse ground's
   pair: the slots are remapped on the hero, so every rule that reads them
   follows. A child sets the --wu-hero-inverse-* slots to choose otherwise
   (a coloured button on the dark ground). */
.wu-hero.wu-ground--inverse,
.wu-ihero.wu-ground--inverse {
  --wu-text: var(--wu-inverse-text);
  --wu-muted: var(--wu-hero-inverse-muted, color-mix(in srgb, var(--wu-inverse-text) 78%, transparent));
  --wu-accent: var(--wu-hero-inverse-accent, var(--wu-inverse-text));
  --wu-line: color-mix(in srgb, var(--wu-inverse-text) 25%, transparent);
  --wu-line-strong: color-mix(in srgb, var(--wu-inverse-text) 55%, transparent);
  --wu-chip-bg: transparent;
  --wu-chip-border: color-mix(in srgb, var(--wu-inverse-text) 40%, transparent);
  --wu-button-face: var(--wu-hero-inverse-button-face, var(--wu-inverse-text));
  --wu-button-text: var(--wu-hero-inverse-button-text, var(--wu-inverse-ground));
  --wu-ghost-face-hover: color-mix(in srgb, var(--wu-inverse-text) 10%, transparent);
  --wu-ghost-border-hover: var(--wu-inverse-text);
}

.wu-ground--inverse .wu-hero__title,
.wu-ground--inverse .wu-ihero__title {
  color: var(--wu-inverse-text);
}

@media (min-width: 768px) {
  .wu-hero,
  .wu-hero__slide {
    justify-content: center;
    min-height: var(--wu-hero-page-min, 0px);
  }
  .wu-hero--home,
  .wu-hero--home .wu-hero__slide {
    min-height: var(--wu-hero-home-min, calc(100svh - var(--wu-header-h)));
  }
  .wu-hero--media .wu-hero__wrap,
  .wu-hero__slide--media .wu-hero__wrap {
    padding-top: var(--wu-hero-pad-top, var(--wu-section-y, 64px));
    padding-bottom: var(--wu-hero-pad-bottom, var(--wu-section-y, 64px));
  }
  .wu-hero--media .wu-hero__media,
  .wu-hero__slide--media .wu-hero__media {
    position: absolute;
    inset: 0;
    height: auto;
  }
  .wu-hero--media .wu-hero__img,
  .wu-hero__slide--media .wu-hero__img {
    object-position: var(--wu-hero-focus, 50% 50%);
  }
  .wu-hero--split.wu-hero--media .wu-hero__media,
  .wu-hero--split .wu-hero__slide--media .wu-hero__media {
    left: var(--wu-hero-photo-start, 50%);
  }
  .wu-hero--split.wu-hero--media .wu-hero__text,
  .wu-hero--split .wu-hero__slide--media .wu-hero__text {
    max-width: var(--wu-hero-split-text, min(560px, 50vw - max(var(--wu-gutter, 16px), (100vw - var(--wu-wrap, 1240px)) / 2) - 48px));
  }
  .wu-hero--full.wu-hero--media .wu-hero__media::after,
  .wu-hero--full .wu-hero__slide--media .wu-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wu-hero-wash, linear-gradient(90deg, color-mix(in srgb, var(--wu-inverse-ground) calc(80% * var(--wu-hero-overlay, 1)), transparent) 0%, color-mix(in srgb, var(--wu-inverse-ground) calc(50% * var(--wu-hero-overlay, 1)), transparent) 55%, color-mix(in srgb, var(--wu-inverse-ground) calc(10% * var(--wu-hero-overlay, 1)), transparent) 100%));
  }
  .wu-hero--full.wu-hero--media .wu-hero__wrap,
  .wu-hero--full .wu-hero__slide--media .wu-hero__wrap {
    --wu-text: var(--wu-inverse-text);
    --wu-muted: var(--wu-hero-inverse-muted, color-mix(in srgb, var(--wu-inverse-text) 85%, transparent));
    --wu-accent: var(--wu-hero-inverse-accent, var(--wu-inverse-text));
    --wu-line-strong: color-mix(in srgb, var(--wu-inverse-text) 60%, transparent);
    --wu-chip-bg: transparent;
    --wu-chip-border: color-mix(in srgb, var(--wu-inverse-text) 40%, transparent);
    --wu-button-face: var(--wu-hero-inverse-button-face, var(--wu-inverse-text));
    --wu-button-text: var(--wu-hero-inverse-button-text, var(--wu-inverse-ground));
    --wu-ghost-face-hover: color-mix(in srgb, var(--wu-inverse-text) 10%, transparent);
    --wu-ghost-border-hover: var(--wu-inverse-text);
    color: var(--wu-inverse-text);
  }
  .wu-hero--full.wu-hero--media .wu-hero__title,
  .wu-hero--full .wu-hero__slide--media .wu-hero__title {
    color: var(--wu-inverse-text);
  }
}
/* ---------- The trust line and the button icon (every layout) ---------- */
.wu-hero__trust {
  color: var(--wu-hero-trust-colour, var(--wu-muted));
  font: var(--wu-hero-trust-font, 400 15px/1.5 var(--wu-body));
}

.wu-hero .wu-hero__text > .wu-hero__trust {
  margin-top: var(--wu-hero-trust-top, 20px);
}

.wu-ghero .wu-hero__trust {
  margin-top: 22px;
}

.wu-ground--inverse .wu-hero__trust,
.wu-hero--full.wu-hero--media .wu-hero__trust {
  color: var(--wu-hero-trust-colour, var(--wu-inverse-text));
}

.wu-hero__stars {
  color: var(--wu-hero-stars, var(--wu-accent));
  letter-spacing: 2px;
}

.wu-hero__rating {
  font-weight: var(--wu-hero-rating-weight, 600);
}

/* The second link as a text link with its icon (3.13.0, secondaryStyle
   text): the icon stays put on hover, as on the icon button. */
.wu-textlink--icon:hover svg {
  transform: none;
}

.wu-button--icon svg {
  width: var(--wu-hero-icon-size, 18px);
  height: var(--wu-hero-icon-size, 18px);
}

.wu-button--icon:hover svg {
  transform: none;
}

/* ---------- Plain: the page intro (webupp/inner-hero's rules) ----------
 * Moved from webupp/inner-hero in 3.4.0 rule for rule; each value a child
 * may want different is read through a --wu-hero-* slot with the inner
 * hero's value as its fallback, so www.webupp.com draws as before. Optional
 * slot --wu-hero-glow (the soft glow behind, transparent when unset). */
.wu-ihero {
  overflow: clip;
  padding-top: var(--wu-hero-top, 72px);
  padding-bottom: var(--wu-hero-bottom, 64px);
}

.wu-ihero .wu-wrap {
  position: relative;
  z-index: 1;
}

/* The glow fades out before the hero's lower edge, so the section's clip
   never shows as a line. */
/* From 3.13.0 the fade is the slot --wu-hero-glow-mask (any mask-image
   value; none leaves the glows unmasked), the 55% fade when unset. */
.wu-ihero > .wu-glows {
  -webkit-mask-image: var(--wu-hero-glow-mask, linear-gradient(#000 55%, transparent));
  mask-image: var(--wu-hero-glow-mask, linear-gradient(#000 55%, transparent));
}

.wu-ihero__glow {
  top: -30%;
  left: 50%;
  width: min(1100px, 120vw);
  height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--wu-hero-glow, transparent), transparent);
  animation: none;
}

.wu-ihero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1025px) {
  .wu-ihero--object .wu-ihero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
  }
}
.wu-ihero__text {
  max-width: var(--wu-hero-text-max, 760px);
}

.wu-ihero__head > * {
  margin: 0;
}

.wu-ihero__title {
  max-width: var(--wu-hero-title-max, none);
  margin: var(--wu-hero-title-top, 20px) 0 0;
  font-family: var(--wu-display);
  font-size: var(--wu-hero-title-size, clamp(36px, 4.5vw, 56px));
  font-weight: var(--wu-hero-title-weight, 800);
  line-height: var(--wu-hero-title-line, 1.06);
  letter-spacing: var(--wu-hero-title-tracking, -0.03em);
  text-wrap: var(--wu-hero-title-wrap, balance);
}

.wu-ihero__standfirst {
  max-width: var(--wu-hero-standfirst-max, 60ch);
  margin: var(--wu-hero-standfirst-top, 20px) 0 0;
}

.wu-ihero__foot {
  margin-top: var(--wu-hero-foot-top, 32px);
}

.wu-ihero__foot > * + * {
  margin-top: var(--wu-hero-foot-gap, 20px);
}

.wu-ihero__note {
  margin: 0;
}

/* The plain layout's note as text (3.17.0, "noteStyle" text): the text
   face at 400 (--wu-hero-note-face, --wu-hero-note-weight: its own, not
   the foot's, so a light lead above it does not thin it), at the note's
   size, line and measure (the --wu-hero-note-* slots the split and full
   layouts' note reads), the foot's gap above it, under the buttons or,
   when it opens the foot, as the foot's own space above. */
.wu-ihero__note--text {
  max-width: var(--wu-hero-note-max, 60ch);
  font-family: var(--wu-hero-note-face, var(--wu-body));
  font-size: var(--wu-hero-note-size, 14px);
  font-weight: var(--wu-hero-note-weight, 400);
  line-height: var(--wu-hero-note-line, 1.5);
}

.wu-ihero__foot > * + .wu-ihero__note--text {
  margin-top: var(--wu-hero-foot-gap, 20px);
}

.wu-ihero__foot:has(> .wu-ihero__note--text:first-child) {
  margin-top: var(--wu-hero-foot-gap, 20px);
}

.wu-ihero__email {
  margin: 0;
  font-family: var(--wu-mono);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wu-ihero__email a {
  color: var(--wu-text);
  text-decoration: underline;
  text-decoration-color: var(--wu-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}

.wu-ihero__object {
  min-width: 0;
}

/* From 3.4.0: the first-screen height, the rule and the paragraphs under
   the opening (each drawn only when its field asks for it). */
.wu-ihero.wu-hero--home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--wu-hero-home-min, calc(100svh - var(--wu-header-h)));
}

.wu-ihero__more > * {
  margin: 0;
}

.wu-ihero__rule {
  height: var(--wu-hero-rule-width, 1px);
  margin-top: var(--wu-hero-rule-top, 48px);
  background: var(--wu-hero-rule, var(--wu-line));
}

.wu-ihero__intro {
  display: grid;
  gap: 20px;
  margin-top: var(--wu-hero-intro-top, 40px);
  color: var(--wu-muted);
}

.wu-ihero__intro p {
  max-width: 60ch;
  margin: 0;
}

@media (min-width: 1025px) {
  .wu-ihero__intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
  }
}
.wu-ground--inverse .wu-ihero__intro {
  color: var(--wu-inverse-text);
}

/* ---------- Glow: glows and a picture (webupp/glow-hero's rules) ----------
 * Moved from webupp/glow-hero in 3.4.0, unchanged. */
.wu-ghero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 56px 72px;
}
@media (min-width: 768px) {
  .wu-ghero {
    padding-block: 72px 96px;
  }
}
@media (min-width: 1025px) {
  .wu-ghero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--wu-header-h));
    padding-block: 64px 88px;
  }
}
.wu-ghero__glow-1 {
  top: -380px;
  left: -320px;
}
.wu-ghero__glow-2 {
  top: 10%;
  left: 30%;
  width: 1000px;
  height: 1000px;
}
.wu-ghero__glow-3 {
  top: -120px;
  right: -360px;
}
@media (max-width: 1024.98px) {
  .wu-ghero__glow-1 {
    width: 640px;
    height: 640px;
    top: -280px;
    left: -300px;
  }
  .wu-ghero__glow-2 {
    width: 720px;
    height: 720px;
    top: 30%;
    left: -10%;
  }
  .wu-ghero__glow-3 {
    width: 640px;
    height: 640px;
    top: 45%;
    right: -320px;
  }
}
.wu-ghero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--wu-ground));
  pointer-events: none;
}
.wu-ghero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1025px) {
  .wu-ghero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
  }
}
.wu-ghero__text > * {
  margin-block: 0;
}
.wu-ghero__chip {
  gap: 10px;
}
.wu-ghero__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wu-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wu-success) 18%, transparent);
}
.wu-ghero__heading {
  margin-top: 28px !important;
}
.wu-ghero__title {
  max-width: 12ch;
  margin: 0;
  font-family: var(--wu-display);
  font-size: var(--wp--preset--font-size--heading-1);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.wu-ghero__standfirst {
  max-width: 40ch;
  margin-top: 28px !important;
}
.wu-ghero__actions {
  margin-top: 40px !important;
}
.wu-ghero__note {
  margin-top: 22px !important;
}
.wu-ghero__stack {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 1025px) {
  .wu-ghero__stack {
    max-width: none;
    margin-right: -24px;
  }
}
.wu-ghero__plane {
  position: relative;
  aspect-ratio: 1.18/1;
  transform: perspective(1800px) rotateY(-16deg) rotateX(8deg) rotateZ(2deg);
  transform-origin: 60% 50%;
}
@media (max-width: 767.98px) {
  .wu-ghero__plane {
    transform: perspective(1200px) rotateY(-10deg) rotateX(6deg) rotateZ(1.5deg);
  }
}
.wu-ghero__layer {
  position: absolute;
  will-change: transform;
}
.wu-ghero__layer--1 {
  z-index: 3;
  bottom: 2%;
  left: 6%;
  width: 80%;
}
.wu-ghero__layer--2 {
  z-index: 2;
  top: 4%;
  left: -4%;
  width: 58%;
}
.wu-ghero__layer--3 {
  z-index: 1;
  top: 0;
  right: -6%;
  width: 58%;
}
.wu-ghero__layer--2 .upp-frame__image, .wu-ghero__layer--3 .upp-frame__image {
  filter: var(--wu-stack-back-filter, saturate(0.8) brightness(0.8));
}
.wu-ghero__layer--1 .upp-frame__screen {
  aspect-ratio: 16/9.4;
}
.wu-ghero__layer--2 .upp-frame, .wu-ghero__layer--3 .upp-frame {
  --upp-frame-bar: 22px;
}
.wu-ghero__layer--2 .upp-frame__address, .wu-ghero__layer--3 .upp-frame__address {
  display: none;
}
@media (max-width: 767.98px) {
  .wu-ghero .upp-frame {
    --upp-frame-bar: 20px;
    border-radius: 8px;
  }
  .wu-ghero .upp-frame__dots span {
    width: 6px;
    height: 6px;
  }
  .wu-ghero .upp-frame__address {
    padding: 2px 8px;
    font-size: 9px;
  }
}

.wu-ghero__object {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 1025px) {
  .wu-ghero__object {
    max-width: none;
  }
}

/* The arrow after a button's or a text link's words (3.13.0, working rule
   12): the slot --wu-button-arrow is its display, inline-block when unset;
   none hides every arrow the parent draws on buttons and text links. In
   each block's own stylesheet, so it holds where a child dequeues the
   parent's sections.css. An icon before the words is not an arrow. From
   3.16.1 every part but the svg is in :where(), so the rule weighs 0,0,1:
   a child's own rule on the arrow, written before 3.13.0 (Canine Sense's
   `.wu-ihero .wu-button svg`, 0,2,1), still wins, as it did when the
   parent set no display there (3.13.0 to 3.16.0 weighed 0,4,1). */
:where(.wu-hero, .wu-ihero, .wu-ghero) :where(.wu-button:not(.wu-button--icon, .wu-contact__link), .wu-textlink:not(.wu-textlink--icon)) > svg:where(:last-child) {
  display: var(--wu-button-arrow, inline-block);
}

/* ---------- 3.14.0, "the hero" (docs/BLOCK-REVIEW-2026-10-20.md Part 2) ----------
 * Every rule below keys on a class the template adds only when the page
 * names a 3.14.0 field (or one of the two new layouts), so a hero stored
 * before draws as it did. Each value a child may want different is a
 * --wu-hero-* slot with the parent's value as its fallback. */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .wu-hero--media .wu-hero__img,
  .wu-hero__slide--media .wu-hero__img {
    object-position: var(--wu-hero-focus-tablet, var(--wu-hero-focus, 50% 50%));
  }
}
/* Centre: the words centred, the media below them in the wrap. */
.wu-hero--centre .wu-hero__text,
.wu-hero--align-centre .wu-hero__text,
.wu-ihero.wu-hero--align-centre .wu-ihero__text {
  margin-inline: auto;
  text-align: center;
}

.wu-hero--centre .wu-hero__text {
  max-width: var(--wu-hero-centre-max, 760px);
}

.wu-hero--centre .wu-hero__text > :is(.wu-hero__title, .wu-hero__standfirst, .wu-hero__second),
.wu-hero--align-centre .wu-hero__text > :is(.wu-hero__title, .wu-hero__standfirst, .wu-hero__second),
.wu-ihero.wu-hero--align-centre :is(.wu-ihero__title, .wu-ihero__standfirst, .wu-hero__second, .wu-ihero__email) {
  margin-inline: auto;
}

.wu-hero--centre :is(.wu-actions, .wu-trust, .wu-hero__facts, .wu-crumbs__list),
.wu-hero--align-centre :is(.wu-actions, .wu-trust, .wu-hero__facts, .wu-crumbs__list) {
  justify-content: center;
}

.wu-hero--centre :is(.wu-hero__search form, .wu-hero__search),
.wu-hero--align-centre :is(.wu-hero__search form, .wu-hero__search) {
  margin-inline: auto;
}

.wu-hero--centre .wu-hero__media {
  order: 0;
  height: auto;
  margin-top: var(--wu-hero-media-top, 48px);
  aspect-ratio: var(--wu-hero-centre-ratio, 16/9);
  border-radius: var(--wu-image-radius, 16px);
}

.wu-hero--centre .wu-hero__media:is(.wu-hero__media--shots, .wu-hero__media--object) {
  max-width: var(--wu-hero-centre-media-max, 1000px);
  margin-inline: auto;
  overflow: visible;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
}

.wu-hero--centre.wu-hero--media .wu-hero__wrap {
  padding-top: var(--wu-hero-pad-top, var(--wu-section-y, 64px));
  padding-bottom: var(--wu-hero-pad-bottom, var(--wu-section-y, 64px));
}

@media (min-width: 768px) {
  .wu-hero--centre.wu-hero--media .wu-hero__media {
    position: relative;
    inset: auto;
    height: auto;
  }
  .wu-hero--full.wu-hero--align-centre.wu-hero--media .wu-hero__media::after {
    background: var(--wu-hero-wash-centre, color-mix(in srgb, var(--wu-inverse-ground) calc(60% * var(--wu-hero-overlay, 1)), transparent));
  }
}
/* Strip: the photograph as a band above, the words below it in the flow. */
.wu-hero--strip .wu-hero__media {
  height: var(--wu-hero-strip-phone, 220px);
}

@media (min-width: 768px) {
  .wu-hero--strip.wu-hero--media .wu-hero__media {
    position: relative;
    inset: auto;
    height: var(--wu-hero-strip-h, clamp(240px, 30vw, 360px));
  }
  .wu-hero--strip.wu-hero--home .wu-hero__media {
    flex: 1 0 auto;
  }
}
/* The rounded tile (mediaStyle tile, split and strip): the photograph in
   the wrap's grid, rounded by --wu-image-radius; on split 5:6 from 1025px
   and 4:3 below, after the words on phones (as the styles child drew it). */
.wu-hero--tile .wu-hero__wrap {
  display: grid;
  gap: var(--wu-hero-tile-gap, 40px);
}

.wu-hero--tile.wu-hero--media .wu-hero__wrap {
  padding-top: var(--wu-hero-pad-top, var(--wu-section-y, 64px));
  padding-bottom: var(--wu-hero-pad-bottom, var(--wu-section-y, 64px));
}

.wu-hero--tile .wu-hero__media {
  order: 0;
  height: auto;
  aspect-ratio: var(--wu-hero-tile-ratio-phone, 4/3);
  border-radius: var(--wu-image-radius, 16px);
}

.wu-hero--strip.wu-hero--tile .wu-hero__media {
  order: -1;
  grid-column: 1/-1;
  height: var(--wu-hero-strip-phone, 220px);
  aspect-ratio: auto;
}

@media (min-width: 768px) {
  .wu-hero--split.wu-hero--tile.wu-hero--media .wu-hero__media {
    position: relative;
    inset: auto;
    left: auto;
    height: auto;
  }
  .wu-hero--split.wu-hero--tile.wu-hero--media .wu-hero__text {
    max-width: var(--wu-hero-text-max, 640px);
  }
  .wu-hero--strip.wu-hero--tile.wu-hero--media .wu-hero__media {
    height: var(--wu-hero-strip-h, clamp(240px, 30vw, 360px));
  }
}
@media (min-width: 1025px) {
  .wu-hero--split.wu-hero--tile .wu-hero__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: var(--wu-hero-tile-gap-desktop, 64px);
    align-items: center;
  }
  .wu-hero--split.wu-hero--tile .wu-hero__media {
    grid-column: 2;
    grid-row: 1/span 2;
    aspect-ratio: var(--wu-hero-tile-ratio, 5/6);
  }
  .wu-hero--split.wu-hero--tile.wu-hero--left .wu-hero__wrap {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  }
  .wu-hero--split.wu-hero--tile.wu-hero--left .wu-hero__media {
    grid-column: 1;
  }
  .wu-hero--split.wu-hero--tile.wu-hero--left :is(.wu-hero__text, .wu-hero__aside) {
    grid-column: 2;
  }
}
/* The photograph at the left (side left, split). */
@media (min-width: 768px) {
  .wu-hero--split.wu-hero--left.wu-hero--media:not(.wu-hero--tile) .wu-hero__media {
    right: var(--wu-hero-photo-start, 50%);
    left: 0;
  }
  .wu-hero--split.wu-hero--left.wu-hero--media:not(.wu-hero--tile) .wu-hero__text {
    margin-left: auto;
  }
}
/* Parallax (mediaMotion parallax, split and full): the photograph's
   wrapper is taller than its frame by the drift's room, so the 56px drift
   never shows an edge; the runtime moves it on desktops and tablets only,
   never under reduced motion. */
.wu-hero__drift {
  position: absolute;
  inset: 0;
}

@media (min-width: 768px) {
  .wu-hero--drift .wu-hero__drift {
    inset: 0 0 calc(-1 * var(--wu-hero-drift-room, 60px));
  }
}
/* A shade along one edge of the photograph (shade top or bottom), so a
   white header or words over it read. */
.wu-hero--shade-top .wu-hero__media::before,
.wu-hero--shade-bottom .wu-hero__media::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: var(--wu-hero-shade-phone, 140px);
  background: linear-gradient(to bottom, var(--wu-hero-shade, color-mix(in srgb, var(--wu-inverse-ground) 55%, transparent)), transparent);
  pointer-events: none;
}

.wu-hero--shade-top .wu-hero__media::before {
  top: 0;
}

.wu-hero--shade-bottom .wu-hero__media::before {
  bottom: 0;
  transform: scaleY(-1);
}

@media (min-width: 768px) {
  .wu-hero--shade-top .wu-hero__media::before,
  .wu-hero--shade-bottom .wu-hero__media::before {
    height: var(--wu-hero-shade-size, 160px);
  }
}
/* The video (media video, full and centre): drawn as the photograph is,
   its poster until the hero's script starts it. */
.wu-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wu-hero-focus, 50% 50%);
}

/* The second standfirst (secondStandfirst): a line in the display face. */
.wu-hero__second {
  max-width: var(--wu-hero-second-max, 40ch);
  color: var(--wu-text);
  font-family: var(--wu-display);
  font-size: var(--wu-hero-second-size, clamp(22px, 2.2vw, 28px));
  font-weight: var(--wu-hero-second-weight, var(--wu-heading-weight, 700));
  line-height: var(--wu-hero-second-line, 1.35);
  letter-spacing: var(--wu-heading-tracking, -0.01em);
  text-wrap: balance;
}

.wu-hero__text > .wu-hero__second,
.wu-ihero__text > .wu-hero__second,
.wu-ghero__text > .wu-hero__second {
  margin-top: var(--wu-hero-second-top, 20px);
  margin-bottom: 0;
}

/* The breadcrumb (breadcrumb auto), above the eyebrow. */
.wu-crumbs {
  color: var(--wu-hero-crumbs-colour, var(--wu-muted));
  font-size: var(--wu-hero-crumbs-size, 14px);
  line-height: 1.5;
}

:is(.wu-hero__text, .wu-ihero__head, .wu-ghero__text) > .wu-crumbs {
  margin: 0 0 var(--wu-hero-crumbs-gap, 16px);
}

.wu-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wu-crumbs__item + .wu-crumbs__item::before {
  content: "/"/"";
  margin-right: 8px;
  opacity: 0.6;
}

.wu-crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wu-crumbs [aria-current] {
  color: var(--wu-text);
}

/* The trust items (trustItems): in order on one line, wrapping on phones. */
.wu-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wu-hero-trust-gap, 8px 20px);
  padding: 0;
  list-style: none;
}

.wu-trust__item,
.wu-trust__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wu-trust__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wu-trust__logo {
  display: block;
  width: auto;
  height: var(--wu-hero-trust-logo-h, 28px);
}

.wu-trust__badge-img {
  display: block;
  width: auto;
  height: var(--wu-hero-trust-badge-h, 28px);
}

.wu-trust__badge {
  padding: 2px 10px;
  border: 1px solid var(--wu-hero-trust-badge-border, var(--wu-line-strong));
  border-radius: var(--wu-hero-trust-badge-radius, 999px);
  font-size: 0.9em;
}

/* Facts (facts): up to four figures in the foot, each over its label. */
.wu-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wu-hero-facts-gap, 16px 40px);
  margin: 0;
}

.wu-hero .wu-hero__text > .wu-hero__facts,
.wu-ghero .wu-hero__facts,
.wu-hero__after > .wu-hero__facts {
  margin-top: var(--wu-hero-facts-top, 32px);
}

.wu-hero__fact {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}

.wu-hero__figure {
  margin: 0;
  font-family: var(--wu-display);
  font-size: var(--wu-hero-figure-size, clamp(26px, 3vw, 36px));
  font-weight: var(--wu-hero-figure-weight, var(--wu-heading-weight, 700));
  line-height: 1.1;
  letter-spacing: var(--wu-heading-tracking, -0.02em);
}

.wu-hero__fact-label {
  color: var(--wu-muted);
  font-size: var(--wu-hero-fact-label-size, 14px);
  line-height: 1.4;
}

/* The search box (search on): WordPress's search form under the buttons. */
.wu-hero .wu-hero__text > .wu-hero__search,
.wu-ghero .wu-hero__search,
.wu-hero__after > .wu-hero__search {
  margin-top: var(--wu-hero-search-top, 24px);
}

.wu-hero__search form {
  display: flex;
  gap: 8px;
  max-width: var(--wu-hero-search-max, 520px);
}

.wu-hero__search label {
  flex: 1;
  min-width: 0;
}

.wu-hero__search input[type=search] {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--wu-line-strong);
  border-radius: var(--wu-button-radius, 8px);
  background: var(--wu-hero-search-ground, var(--wu-surface));
  color: var(--wu-hero-search-text, var(--wu-text));
  font: inherit;
}

.wu-hero__search :is(input[type=submit], button) {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--wu-button-radius, 8px);
  background: var(--wu-button-face);
  color: var(--wu-button-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.wu-hero__search .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The side panel (aside form or card), beside the words in split, plain
   and strip. Its ground and text are its own pair (the page's ground and
   text by default, through the inverse slots, which no ground remaps), so
   it reads on any hero ground and over the photograph. */
.wu-hero__aside {
  --wu-text: var(--wu-hero-aside-text, var(--wu-inverse-ground));
  --wu-muted: color-mix(in srgb, var(--wu-hero-aside-text, var(--wu-inverse-ground)) 72%, transparent);
  --wu-line: color-mix(in srgb, var(--wu-hero-aside-text, var(--wu-inverse-ground)) 16%, transparent);
  --wu-line-strong: color-mix(in srgb, var(--wu-hero-aside-text, var(--wu-inverse-ground)) 40%, transparent);
  --wu-button-face: var(--wu-hero-aside-text, var(--wu-inverse-ground));
  --wu-button-text: var(--wu-hero-aside-ground, var(--wu-inverse-text));
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: var(--wu-hero-aside-pad, 24px);
  border: 1px solid var(--wu-line);
  border-radius: var(--wu-hero-aside-radius, var(--wu-radius, 12px));
  background: var(--wu-hero-aside-ground, var(--wu-inverse-text));
  box-shadow: var(--wu-hero-aside-shadow, 0 12px 32px color-mix(in srgb, var(--wu-hero-aside-text, var(--wu-inverse-ground)) 12%, transparent));
  color: var(--wu-text);
  text-align: left;
}

.wu-hero__aside-title {
  margin: 0 0 16px;
  font-family: var(--wu-display);
  font-size: var(--wu-hero-aside-title-size, 20px);
  font-weight: var(--wu-heading-weight, 700);
  line-height: 1.25;
}

.wu-hero__people {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wu-hero__person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
}

.wu-hero__person > p {
  grid-column: 2;
  margin: 0;
}

.wu-hero__person-photo {
  grid-row: 1/span 4;
  width: var(--wu-hero-person-photo, 64px);
  height: var(--wu-hero-person-photo, 64px);
  border-radius: 50%;
  object-fit: cover;
}

.wu-hero__person-name {
  font-weight: 600;
}

.wu-hero__person-role {
  color: var(--wu-muted);
  font-size: 14px;
}

.wu-hero__person-line a {
  color: inherit;
  overflow-wrap: anywhere;
}

.wu-hero--aside .wu-hero__wrap {
  display: grid;
  gap: var(--wu-hero-aside-gap, 32px);
}

.wu-hero--aside .wu-hero__text {
  min-width: 0;
}

@media (max-width: 1024.98px) {
  .wu-hero__aside {
    max-width: var(--wu-hero-aside-max, 560px);
  }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .wu-hero--split.wu-hero--aside.wu-hero--media:not(.wu-hero--tile) .wu-hero__aside {
    max-width: var(--wu-hero-split-text, min(560px, 50vw - max(var(--wu-gutter, 16px), (100vw - var(--wu-wrap, 1240px)) / 2) - 48px));
  }
  .wu-hero--split.wu-hero--aside.wu-hero--left.wu-hero--media:not(.wu-hero--tile) .wu-hero__aside {
    margin-left: auto;
  }
}
@media (min-width: 1025px) {
  .wu-hero--aside:not(.wu-hero--tile) .wu-hero__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--wu-hero-aside-w, 400px));
    gap: var(--wu-hero-aside-gap-desktop, 48px);
    align-items: center;
  }
  .wu-hero--aside.wu-hero--left:not(.wu-hero--tile) .wu-hero__wrap {
    grid-template-columns: minmax(0, var(--wu-hero-aside-w, 400px)) minmax(0, 1fr);
  }
  .wu-hero--aside.wu-hero--left:not(.wu-hero--tile) .wu-hero__aside {
    grid-row: 1;
    grid-column: 1;
  }
  .wu-hero--aside.wu-hero--left:not(.wu-hero--tile) .wu-hero__text {
    grid-row: 1;
    grid-column: 2;
  }
  .wu-hero--strip.wu-hero--aside.wu-hero--tile .wu-hero__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--wu-hero-aside-w, 400px));
    gap: var(--wu-hero-aside-gap-desktop, 48px);
    align-items: start;
  }
  .wu-hero--split.wu-hero--tile.wu-hero--aside .wu-hero__aside {
    grid-column: 1;
  }
  .wu-ihero.wu-hero--aside .wu-ihero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, var(--wu-hero-aside-w, 400px));
    gap: 64px;
  }
  .wu-ihero.wu-hero--aside .wu-ihero__object {
    grid-column: 1;
  }
}
/* Slides (media slides): one slide at rest in a frame that scrolls
   sideways on its own (scroll snap, the arrow keys while it has focus);
   the motion runtime's drag capability takes it over where it loads
   (is-draggable), and the hero's script moves it with the buttons. Each
   slide is drawn as the layout draws one hero. */
.wu-hero--slides {
  display: block;
}

.wu-hero__slides {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.wu-hero__slides::-webkit-scrollbar {
  display: none;
}

.wu-hero__slides:focus-visible {
  outline: 2px solid var(--wu-accent);
  outline-offset: -2px;
}

.wu-hero__slides.is-draggable {
  overflow: hidden;
  scroll-snap-type: none;
}

@media (prefers-reduced-motion: no-preference) {
  .wu-hero__slides {
    scroll-behavior: smooth;
  }
}
.wu-hero__track {
  display: flex;
}

.wu-hero__slide {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
  scroll-snap-align: start;
}

.wu-hero__slide:focus {
  outline: none;
}

.wu-hero__controls {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  justify-content: var(--wu-hero-controls-justify, flex-end);
  padding-top: 16px;
}

.wu-hero--centre .wu-hero__controls {
  justify-content: center;
}

.wu-hero__prev,
.wu-hero__next {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--wu-line-strong);
  border-radius: var(--wu-button-radius, 999px);
  background: var(--wu-ghost-face, transparent);
  color: var(--wu-text);
  cursor: pointer;
}

.wu-hero__prev:hover,
.wu-hero__next:hover {
  border-color: var(--wu-ghost-border-hover, var(--wu-text));
  background: var(--wu-ghost-face-hover, transparent);
}

.wu-hero__prev svg,
.wu-hero__next svg {
  width: 18px;
  height: 18px;
}

.wu-hero__prev svg {
  transform: scaleX(-1);
}

.wu-hero__after {
  position: relative;
  z-index: 1;
  padding-bottom: var(--wu-hero-pad-bottom, var(--wu-section-y, 64px));
}

.wu-hero__after > :first-child {
  margin-top: var(--wu-hero-trust-top, 20px);
}

.wu-hero__after > .wu-hero__note,
.wu-hero__after > .wu-hero__email {
  margin: var(--wu-hero-foot-gap, 20px) 0 0;
}

/* The eyebrow's slots (3.17.0): --wu-label-gap and the rule's
   --wu-label-rule-length, -width (its thickness), -radius, --wu-label-rule
   (its colour) and -opacity. sections.css reads them with the values drawn
   before; here, of no weight and with no fallback, they reach a site that
   dequeues sections.css and draws the eyebrow itself, wherever its own
   rules leave these properties unset (unset, each is as if absent; the
   rule's span is empty, so flex none changes no box). Every block
   stylesheet that draws an eyebrow carries this rule. */
:where(.wu-label) {
  gap: var(--wu-label-gap);
}

:where(.wu-label__rule) {
  flex: none;
  width: var(--wu-label-rule-length);
  height: var(--wu-label-rule-width);
  border-radius: var(--wu-label-rule-radius);
  background: var(--wu-label-rule);
  opacity: var(--wu-label-rule-opacity);
}