/* ==========================================================================
   The Wider Scope — component and layout system
   Depends on tokens.css. Organised as: reset -> elements -> layout ->
   components -> utilities. Every component here is reusable across pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset and document
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings clear the sticky header. */
  scroll-padding-top: calc(var(--ws-header-h) + var(--ws-space-6));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--ws-limestone);
  color: var(--ws-text);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-body);
  font-weight: var(--ws-weight-regular);
  line-height: var(--ws-lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Visible focus on every interactive element, per acceptance criteria. */
:focus-visible {
  outline: var(--ws-focus-width) solid var(--ws-focus);
  outline-offset: var(--ws-focus-offset);
  border-radius: 1px;
}

.ws-dark :focus-visible,
.ws-panel--graphite :focus-visible,
.ws-panel--atlantic :focus-visible {
  outline-color: var(--ws-focus-on-dark);
}

::selection {
  background: rgba(31, 91, 110, 0.18);
}

/* --------------------------------------------------------------------------
   2. Typographic elements
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--ws-font-display);
  font-weight: var(--ws-weight-regular);
  line-height: var(--ws-lh-heading);
  letter-spacing: var(--ws-track-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--ws-size-display);
  line-height: var(--ws-lh-display);
}

h2 {
  font-size: var(--ws-size-h2);
}

h3 {
  font-size: var(--ws-size-h3);
}

h4 {
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-h4);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: 0;
  line-height: var(--ws-lh-snug);
}

p {
  margin: 0 0 var(--ws-space-4);
  max-width: var(--ws-measure);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: var(--ws-weight-semibold);
}

a {
  color: var(--ws-atlantic);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--ws-dur-fast) var(--ws-ease);
}

a:hover {
  color: var(--ws-oxblood);
}

/* :not(.ws-btn) matters. Without it this rule (specificity 0,1,1) beats
   .ws-btn--light (0,1,0) and paints white label text onto the button's
   Limestone field — about 1.1:1, effectively invisible. Buttons carry their
   own colours and must be excluded from the dark-section link colour. */
.ws-dark a:not(.ws-btn) {
  color: var(--ws-white);
}

.ws-dark a:not(.ws-btn):hover {
  color: #f0c9c1;
}

hr {
  height: 0;
  margin: var(--ws-space-8) 0;
  border: 0;
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

/* Eyebrow — the small tracked label above a headline. The Oxblood brackets are
   lifted straight from the logo lockup and are the site's signature label
   device, so every section label carries them. They are drawn, never typed, so
   they never enter the text layer or get read out by a screen reader. */
.ws-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 0.9vw, 0.75rem);
  margin: 0 0 var(--ws-space-5);
  color: var(--ws-atlantic);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: var(--ws-track-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

.ws-eyebrow::before,
.ws-eyebrow::after {
  content: '';
  flex: 0 0 auto;
  width: 0.3125rem;
  height: 1.15em;
  border: 1.5px solid var(--ws-oxblood);
}

.ws-eyebrow::before {
  border-right: 0;
}

.ws-eyebrow::after {
  border-left: 0;
  /* Cancels the trailing letter-space after the label's last character, which
     would otherwise push the closing bracket visibly further out than the
     opening one. */
  margin-left: calc(-1 * var(--ws-track-eyebrow));
}

/* The eyebrow is inline-flex, so it needs a block wrapper's worth of spacing
   restored beneath it when it sits directly above a heading. */
.ws-eyebrow + h1,
.ws-eyebrow + h2,
.ws-eyebrow + h3 {
  margin-top: 0;
}

.ws-eyebrow--oxblood {
  color: var(--ws-oxblood);
}

.ws-dark .ws-eyebrow {
  color: #a9c2ca;
}

.ws-dark .ws-eyebrow::before,
.ws-dark .ws-eyebrow::after {
  border-color: var(--ws-oxblood-lift);
}

/* A plain variant for the rare place a bracketed label would crowd. */
.ws-eyebrow--plain::before,
.ws-eyebrow--plain::after {
  display: none;
}

/* Lead paragraph beneath a headline. */
.ws-lead {
  max-width: var(--ws-measure-narrow);
  color: var(--ws-text);
  font-size: var(--ws-size-lead);
  line-height: 1.55;
}

.ws-dark .ws-lead {
  color: var(--ws-text-on-dark);
}

.ws-muted {
  color: var(--ws-text-muted);
}

.ws-dark .ws-muted {
  color: var(--ws-text-on-dark-muted);
}

.ws-small {
  font-size: var(--ws-size-small);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.ws-container {
  width: 100%;
  max-width: var(--ws-container);
  margin-inline: auto;
  padding-inline: var(--ws-gutter);
}

.ws-container--narrow {
  max-width: var(--ws-container-narrow);
}

.ws-section {
  padding-block: var(--ws-section-y);
}

.ws-section--tight {
  padding-block: var(--ws-section-y-tight);
}

.ws-section--sink {
  background: var(--ws-limestone-sink);
}

.ws-section--graphite {
  background: var(--ws-graphite);
  color: var(--ws-text-on-dark);
}

.ws-section--atlantic {
  background: var(--ws-atlantic);
  color: var(--ws-text-on-dark);
}

.ws-section--rule-top {
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

/* Section head: eyebrow + heading + optional intro, capped for readability. */
.ws-section-head {
  max-width: 46rem;
  margin-bottom: var(--ws-space-8);
}

.ws-section-head--wide {
  max-width: 58rem;
}

.ws-section-head > h2 {
  margin-bottom: var(--ws-space-4);
}

.ws-section-head > p:last-child {
  margin-bottom: 0;
}

/* An asymmetric two-column editorial split: sticky heading, flowing body. */
.ws-split {
  display: grid;
  gap: var(--ws-space-8) var(--ws-space-9);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .ws-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ws-space-9) clamp(2rem, 6vw, 6rem);
  }

  .ws-split__aside {
    position: sticky;
    top: calc(var(--ws-header-h) + var(--ws-space-6));
    align-self: start;
  }
}

/* Generic responsive grid used by card collections. */
.ws-grid {
  display: grid;
  gap: var(--ws-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.ws-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.ws-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.ws-grid--tight {
  gap: var(--ws-space-5);
}

.ws-stack > * + * {
  margin-top: var(--ws-space-5);
}

.ws-stack--tight > * + * {
  margin-top: var(--ws-space-3);
}

.ws-stack--loose > * + * {
  margin-top: var(--ws-space-8);
}

/* --------------------------------------------------------------------------
   4. Skip link
   -------------------------------------------------------------------------- */

.ws-skip {
  position: absolute;
  top: var(--ws-space-2);
  left: var(--ws-space-2);
  z-index: 200;
  padding: var(--ws-space-3) var(--ws-space-5);
  background: var(--ws-graphite);
  color: var(--ws-white);
  font-size: var(--ws-size-small);
  font-weight: var(--ws-weight-semibold);
  text-decoration: none;
  border-radius: var(--ws-radius-control);
  transform: translateY(-160%);
  transition: transform var(--ws-dur) var(--ws-ease);
}

.ws-skip:focus {
  transform: translateY(0);
  color: var(--ws-white);
}

/* --------------------------------------------------------------------------
   4b. Cookie consent
   Accept and Reject carry equal visual weight. Making rejection harder than
   acceptance is precisely what consent rules prohibit, and it reads badly on a
   site whose whole proposition is protected conversations.
   -------------------------------------------------------------------------- */

.ws-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  background: var(--ws-graphite);
  color: var(--ws-text-on-dark);
  border-top: 2px solid var(--ws-oxblood);
  box-shadow: 0 -12px 40px -22px rgba(23, 35, 43, 0.6);
}

.ws-consent[hidden] {
  display: none;
}

.ws-consent__inner {
  display: grid;
  gap: var(--ws-space-5) clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
  max-width: var(--ws-container);
  margin-inline: auto;
  padding: var(--ws-space-6) var(--ws-gutter);
}

@media (min-width: 56rem) {
  .ws-consent__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.ws-consent__title {
  margin: 0 0 var(--ws-space-2);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
  text-transform: uppercase;
  color: var(--ws-text-on-dark-muted);
}

.ws-consent__text {
  max-width: 70ch;
  margin: 0;
  font-size: var(--ws-size-small);
}

.ws-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-space-4);
}

.ws-consent__actions .ws-btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* Quiet button — same size and weight as primary, lower colour emphasis, so
   rejecting is exactly as easy as accepting. */
.ws-btn--quiet {
  background: transparent;
  border-width: 1.5px;
  border-color: rgba(255, 255, 255, 0.62);
  color: var(--ws-white);
}

.ws-btn--quiet:hover,
.ws-btn--quiet:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--ws-white);
  color: var(--ws-white);
}

/* A button that has to sit inside a list of links and look like one. */
.ws-linkbtn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ws-white);
  font-size: var(--ws-size-micro);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ws-linkbtn:hover {
  color: #f0c9c1;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.ws-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ws-limestone);
  /* The thin Oxblood rule beneath the header, per the approved direction. */
  border-bottom: var(--ws-rule-width) solid rgba(154, 59, 46, 0.55);
  transition: box-shadow var(--ws-dur) var(--ws-ease);
}

.ws-header[data-scrolled='true'] {
  box-shadow: 0 1px 0 rgba(154, 59, 46, 0.2), 0 10px 30px -22px rgba(23, 35, 43, 0.4);
}

.ws-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: var(--ws-header-h);
  padding-block: var(--ws-space-4);
}

.ws-logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 2px;
}

/* 285–320px at desktop per the brief, scaling down gracefully.
   18rem = 288px, which sits inside that range and leaves the seven-item
   navigation and the persistent CTA room to sit on the same header line.
   20vw lands the logo on exactly 288px at 1440px. */
.ws-logo img {
  width: clamp(10.5rem, 20vw, 18rem);
  height: auto;
}

/* Scoped to .ws-header on purpose — do not simplify back to a bare .ws-nav.
   Under WordPress the header's group block renders with .is-layout-flex, and
   core's `.is-layout-flex { display: flex }` is also 0,1,0 but loads after this
   file, so a bare .ws-nav { display: none } loses. The result on a phone was the
   full six-item bar still rendered, with flex-wrap:nowrap forbidding it to wrap:
   the header scrolled sideways while the rest of the page sat still. Two class
   selectors put this at 0,2,0 and settle it without !important. */
.ws-header .ws-nav {
  display: none;
}

/* 74rem is the measured point at which the six-item navigation, the separators
   and the persistent CTA all fit on one header line with room to spare beside
   the logo. Below it the compact menu is used instead. */
@media (min-width: 74rem) {
  .ws-header .ws-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.6vw, 1.5rem);
  }
}

.ws-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-nav__link {
  position: relative;
  display: block;
  padding: var(--ws-space-2) clamp(0.4rem, 0.75vw, 0.6875rem);
  color: var(--ws-graphite);
  font-size: 0.75rem;
  font-weight: var(--ws-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ws-nav__link::after {
  content: '';
  position: absolute;
  inset-inline: clamp(0.4rem, 0.75vw, 0.6875rem);
  bottom: 0;
  height: 1px;
  background: var(--ws-oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ws-dur) var(--ws-ease);
}

.ws-nav__link:hover,
.ws-nav__link:focus-visible {
  color: var(--ws-graphite);
}

.ws-nav__link:hover::after,
.ws-nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.ws-nav__link[aria-current='page'] {
  font-weight: var(--ws-weight-semibold);
}

/* The thin Oxblood separator between navigation items, as in the mockup. */
.ws-nav__list > li + li {
  border-left: 1px solid rgba(154, 59, 46, 0.45);
}

.ws-nav__cta {
  margin-left: clamp(0.75rem, 1.4vw, 1.25rem);
  padding-inline: clamp(1rem, 1.9vw, 1.75rem);
  padding-block: 0.9375rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* The persistent primary button stays on every width. Below 90rem it uses a
   shorter label so it never crowds the navigation off the header line; the
   full label costs 110px, which only 1440px and above can absorb. */
.ws-nav__cta-short {
  display: none;
}

@media (max-width: 89.999rem) {
  .ws-nav__cta-long {
    display: none;
  }

  .ws-nav__cta-short {
    display: inline;
  }
}

/* Mobile toggle */
.ws-navtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ws-space-3);
  padding: var(--ws-space-3) var(--ws-space-4);
  background: transparent;
  border: var(--ws-rule-width) solid var(--ws-rule-strong);
  border-radius: var(--ws-radius-control);
  color: var(--ws-graphite);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: var(--ws-track-nav);
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 74rem) {
  .ws-navtoggle {
    display: none;
  }
}

.ws-navtoggle__bars {
  display: grid;
  gap: 4px;
  width: 1.125rem;
}

.ws-navtoggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--ws-dur) var(--ws-ease),
    opacity var(--ws-dur-fast) var(--ws-ease);
}

.ws-navtoggle[aria-expanded='true'] .ws-navtoggle__bars span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.ws-navtoggle[aria-expanded='true'] .ws-navtoggle__bars span:nth-child(2) {
  opacity: 0;
}

.ws-navtoggle[aria-expanded='true'] .ws-navtoggle__bars span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Mobile drawer — keeps the desktop hierarchy and exposes the CTA immediately. */
.ws-drawer {
  display: none;
  border-top: var(--ws-rule-width) solid var(--ws-rule);
  background: var(--ws-limestone);
}

.ws-drawer[data-open='true'] {
  display: block;
}

@media (min-width: 74rem) {
  .ws-drawer {
    display: none !important;
  }
}

.ws-drawer__inner {
  padding-block: var(--ws-space-5) var(--ws-space-7);
}

.ws-drawer__list {
  margin: 0 0 var(--ws-space-6);
  padding: 0;
  list-style: none;
}

.ws-drawer__list li + li {
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-drawer__link {
  display: block;
  padding: var(--ws-space-4) 0;
  color: var(--ws-graphite);
  font-family: var(--ws-font-display);
  font-size: 1.5rem;
  text-decoration: none;
}

.ws-drawer__link[aria-current='page'] {
  color: var(--ws-oxblood);
}

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */

.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-space-3);
  padding: 1.0625rem var(--ws-space-7);
  border: var(--ws-rule-width) solid transparent;
  border-radius: var(--ws-radius-control);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-small);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ws-dur) var(--ws-ease),
    color var(--ws-dur) var(--ws-ease), border-color var(--ws-dur) var(--ws-ease),
    transform var(--ws-dur-fast) var(--ws-ease);
}

.ws-btn:active {
  transform: translateY(1px);
}

/* Primary — Atlantic field, white label. 7.6:1 contrast. */
.ws-btn--primary {
  background: var(--ws-atlantic);
  border-color: var(--ws-atlantic);
  color: var(--ws-white);
}

.ws-btn--primary:hover,
.ws-btn--primary:focus-visible {
  background: var(--ws-atlantic-deep);
  border-color: var(--ws-atlantic-deep);
  color: var(--ws-white);
}

/* Secondary — a quiet text action with a rule and a travelling arrow. */
.ws-btn--secondary {
  padding-inline: 0;
  border-radius: 0;
  border-bottom: var(--ws-rule-width) solid var(--ws-atlantic);
  color: var(--ws-atlantic);
  font-size: var(--ws-size-body);
  font-weight: var(--ws-weight-medium);
  letter-spacing: 0;
}

.ws-btn--secondary:hover,
.ws-btn--secondary:focus-visible {
  border-bottom-color: var(--ws-oxblood);
  color: var(--ws-oxblood);
}

.ws-btn--secondary .ws-btn__arrow {
  transition: transform var(--ws-dur) var(--ws-ease);
}

.ws-btn--secondary:hover .ws-btn__arrow {
  transform: translateX(4px);
}

/* Outline — for use on dark fields. */
.ws-btn--outline {
  background: transparent;
  border-color: var(--ws-rule-on-dark);
  color: var(--ws-white);
}

.ws-btn--outline:hover,
.ws-btn--outline:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--ws-white);
}

/* Light — white field on a dark section. */
.ws-btn--light {
  background: var(--ws-limestone);
  border-color: var(--ws-limestone);
  color: var(--ws-graphite);
}

.ws-btn--light:hover,
.ws-btn--light:focus-visible {
  background: var(--ws-white);
  border-color: var(--ws-white);
  color: var(--ws-graphite);
}

.ws-btn--block {
  width: 100%;
}

.ws-btn__arrow {
  flex: 0 0 auto;
}

.ws-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ws-space-5) var(--ws-space-7);
}

/* At narrow widths the CTAs stack and stay full width for large tap targets. */
@media (max-width: 30rem) {
  .ws-actions {
    display: grid;
    gap: var(--ws-space-4);
  }

  .ws-actions .ws-btn--primary {
    width: 100%;
  }
}

/* Standalone text link with arrow, used inside cards.
   padding-block takes it from 23px to 31px tall. WCAG 2.2's 24px minimum
   target size technically exempts this via the spacing exception, since these
   sit alone in a card foot — but 23px is a poor tap target on a phone whatever
   the specification permits, and this is often the card's primary action. */
.ws-textlink {
  display: inline-flex;
  align-items: center;
  padding-block: 0.25rem;
  gap: var(--ws-space-2);
  color: var(--ws-atlantic);
  font-size: var(--ws-size-small);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.ws-textlink::after {
  content: '→';
  transition: transform var(--ws-dur) var(--ws-ease);
}

.ws-textlink:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   7. Hero — the approved Option 3 editorial split
   -------------------------------------------------------------------------- */

.ws-hero {
  position: relative;
  background: var(--ws-limestone);
}

.ws-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .ws-hero__grid {
    /* The 54/46 editorial split specified for 1440px. The proof line sits in
       its own row beneath the panel so the imagery can run the full height of
       both rows, and so the strip exists once in the markup rather than being
       duplicated for mobile. */
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    grid-template-rows: 1fr auto;
    align-items: stretch;
    min-height: min(86vh, 52rem);
  }

  .ws-hero__panel {
    grid-column: 1;
    grid-row: 1;
  }

  .ws-hero__proof-wrap {
    grid-column: 1;
    grid-row: 2;
  }

  .ws-hero__figure {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.ws-hero__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2rem, 4vw, 4rem);
  padding-inline: var(--ws-gutter);
  background: var(--ws-limestone);
}

@media (min-width: 62rem) {
  .ws-hero__panel {
    padding-right: clamp(1.5rem, 3vw, 3.25rem);
    padding-left: max(var(--ws-gutter), calc((100vw - var(--ws-container)) / 2 + var(--ws-gutter)));
  }
}

.ws-hero__headline {
  max-width: 22ch;
  margin: 0;
  font-size: var(--ws-size-hero);
  font-weight: var(--ws-weight-regular);
  line-height: var(--ws-lh-tight);
  letter-spacing: var(--ws-track-hero);
  text-wrap: pretty;
}

/* Disciplined line breaks. From 1440px — the width the direction was approved
   at — the headline breaks exactly as the mockup does. Below that the panel is
   too narrow for the third line, so the spans go inline and the text wraps
   naturally into a clean four-line rag instead of being forced to overflow. */
@media (min-width: 90rem) {
  .ws-hero__headline > span {
    display: block;
  }
}

.ws-hero__lead {
  max-width: 34ch;
}

/* Proof strip — every item carries its own Oxblood bullet, and the row wraps
   cleanly without the bullets colliding with the text at any width. */
.ws-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-space-3) clamp(1.5rem, 2.4vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ws-text-muted);
  font-size: var(--ws-size-small);
  line-height: 1.4;
}

.ws-proof > li {
  display: flex;
  align-items: baseline;
  gap: var(--ws-space-3);
}

.ws-proof > li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ws-oxblood);
  /* Lifts the bullet from the baseline to the middle of the x-height. */
  transform: translateY(-0.3em);
}

.ws-dark .ws-proof > li::before {
  background: var(--ws-oxblood-lift);
}

/* The three proof points only fit on one line inside the 54% panel at 1440px
   and above. Below that they read as a tidy vertical list rather than an
   uneven two-then-one wrap. */
.ws-hero__proof-wrap .ws-proof {
  flex-direction: column;
}

@media (min-width: 90rem) {
  .ws-hero__proof-wrap .ws-proof {
    flex-direction: row;
  }
}

.ws-hero__figure {
  position: relative;
  z-index: 1;
  order: -1;
  min-height: 20rem;
  overflow: hidden;
  background: var(--ws-atlantic-deep);
}

@media (min-width: 62rem) {
  .ws-hero__figure {
    order: 0;
    min-height: 0;
    /* The one softened corner in the composition, where panel meets imagery. */
    border-top-left-radius: var(--ws-radius-panel);
  }
}

.ws-hero__figure > svg,
.ws-hero__figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favour the lower half so the plinth, floor and long light survive cropping;
     the plain upper wall is the least informative part of the composition. */
  object-position: 58% 72%;
}

/* The proof strip shares the panel's left inset so both align to the frame. */
.ws-hero__proof-wrap {
  padding-inline: var(--ws-gutter);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 62rem) {
  .ws-hero__proof-wrap {
    padding-left: max(var(--ws-gutter), calc((100vw - var(--ws-container)) / 2 + var(--ws-gutter)));
    padding-right: clamp(1.5rem, 3vw, 3.25rem);
  }
}

/* Mobile hero order: copy and CTAs first, then imagery, then the proof line. */
@media (max-width: 61.999rem) {
  .ws-hero__grid {
    display: flex;
    flex-direction: column;
  }

  .ws-hero__panel {
    order: 1;
    padding-bottom: var(--ws-space-7);
  }

  .ws-hero__figure {
    order: 2;
    min-height: clamp(15rem, 52vw, 24rem);
  }

  .ws-hero__proof-wrap {
    order: 3;
    padding-top: var(--ws-space-6);
    padding-bottom: var(--ws-space-8);
  }
}

/* --------------------------------------------------------------------------
   8. Page hero (inner pages)
   -------------------------------------------------------------------------- */

.ws-pagehero {
  padding-block: clamp(2.5rem, 5vw, 5.5rem) clamp(2rem, 4vw, 4rem);
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-pagehero__grid {
  display: grid;
  gap: var(--ws-space-6) var(--ws-space-9);
  align-items: end;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .ws-pagehero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.ws-pagehero h1 {
  max-width: 24ch;
  font-size: var(--ws-size-display);
  line-height: var(--ws-lh-display);
  letter-spacing: var(--ws-track-hero);
}

/* Breadcrumbs */
.ws-crumbs {
  margin-bottom: var(--ws-space-5);
  font-size: var(--ws-size-micro);
  letter-spacing: 0.04em;
}

.ws-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ws-space-2) var(--ws-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-crumbs li + li::before {
  content: '/';
  margin-right: var(--ws-space-3);
  color: var(--ws-slate);
}

.ws-crumbs a {
  color: var(--ws-text-muted);
  text-decoration: none;
}

.ws-crumbs a:hover {
  color: var(--ws-oxblood);
  text-decoration: underline;
}

.ws-crumbs [aria-current='page'] {
  color: var(--ws-text);
}

/* --------------------------------------------------------------------------
   9. Cards — thin rules, minimal radius, no floating clutter
   -------------------------------------------------------------------------- */

/* Cards are defined by a single rule at the top, not by a box. Text aligns to
   that rule so the column reads as an editorial measure rather than a tile. */
.ws-card {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-4);
  padding: var(--ws-space-5) 0 var(--ws-space-2);
  background: transparent;
  border-top: 2px solid var(--ws-graphite);
  transition: border-color var(--ws-dur) var(--ws-ease);
}

.ws-card:hover {
  border-top-color: var(--ws-oxblood);
}

/* The one boxed variant, used where cards carry an index number and need to
   read as discrete purchasable items rather than continuous editorial columns. */
.ws-card--boxed {
  padding: var(--ws-space-6);
  background: rgba(255, 255, 255, 0.34);
  border: var(--ws-rule-width) solid var(--ws-rule);
  border-top: 2px solid var(--ws-graphite);
  transition: border-color var(--ws-dur) var(--ws-ease),
    background-color var(--ws-dur) var(--ws-ease);
}

.ws-card--boxed:hover {
  background: rgba(255, 255, 255, 0.62);
  border-top-color: var(--ws-oxblood);
}

.ws-card--plain {
  border-top-color: var(--ws-rule);
}

/* The card index wears the brackets too, so the numeral reads as part of the
   same family as the logo and the section labels. */
.ws-card__index {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--ws-oxblood);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
}

.ws-card__index::before,
.ws-card__index::after {
  content: '';
  flex: 0 0 auto;
  width: 0.25rem;
  height: 1.2em;
  border: 1.5px solid var(--ws-oxblood);
}

.ws-card__index::before {
  border-right: 0;
}

.ws-card__index::after {
  border-left: 0;
}

.ws-card__title {
  margin: 0;
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-h3);
  font-weight: var(--ws-weight-regular);
  line-height: var(--ws-lh-heading);
}

.ws-card__title a {
  color: inherit;
  text-decoration: none;
}

.ws-card__title a:hover {
  color: var(--ws-oxblood);
}

.ws-card__body {
  flex: 1 1 auto;
}

.ws-card__body p {
  max-width: 40ch;
}

.ws-card__foot {
  margin-top: var(--ws-space-2);
}

/* Labelled definition list, used inside solution cards so each card answers the
   same five questions in the same order and buyers can compare them directly. */
.ws-deflist {
  display: grid;
  gap: var(--ws-space-4);
  margin: 0;
}

.ws-deflist dt {
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
}

.ws-deflist dd {
  margin: var(--ws-space-1) 0 0;
  max-width: 46ch;
  font-size: var(--ws-size-small);
}

/* Outcome cards — short benefit statements in a four-up row. */
.ws-outcome {
  padding-top: var(--ws-space-5);
  border-top: var(--ws-rule-width) solid var(--ws-rule-strong);
}

.ws-outcome__mark {
  display: block;
  width: 1.75rem;
  height: 1px;
  margin-bottom: var(--ws-space-4);
  background: var(--ws-oxblood);
}

.ws-outcome p {
  max-width: 26ch;
  margin: 0;
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-h4);
  line-height: 1.32;
}

/* --------------------------------------------------------------------------
   10. Process — the five-stage Align / Assess / Coach / Apply / Review
   -------------------------------------------------------------------------- */

.ws-process {
  counter-reset: ws-step;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 62rem) {
  .ws-process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ws-space-6);
  }
}

.ws-process__step {
  counter-increment: ws-step;
  position: relative;
  padding: var(--ws-space-5) 0 var(--ws-space-6);
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

/* Vertical variant, for narrow columns such as the contact page sidebar. */
.ws-process--stacked {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.ws-process--stacked .ws-process__step {
  border-top: var(--ws-rule-width) solid var(--ws-rule);
  padding-right: 0;
}

.ws-process--stacked .ws-process__name {
  font-size: var(--ws-size-h4);
  font-family: var(--ws-font-text);
  font-weight: var(--ws-weight-semibold);
}

@media (min-width: 62rem) {
  .ws-process__step {
    border-top: 2px solid var(--ws-rule-strong);
    padding-right: var(--ws-space-4);
  }

  .ws-process__step::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ws-oxblood);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ws-dur-slow) var(--ws-ease);
  }

  .ws-process__step:hover::before {
    transform: scaleX(1);
  }
}

.ws-process__num {
  display: block;
  margin-bottom: var(--ws-space-3);
  color: var(--ws-oxblood);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
}

.ws-process__num::before {
  content: '0' counter(ws-step);
}

.ws-process__name {
  margin: 0 0 var(--ws-space-3);
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-h3);
  font-weight: var(--ws-weight-regular);
}

.ws-process__step p {
  max-width: 32ch;
  margin: 0;
  color: var(--ws-text-muted);
  font-size: var(--ws-size-small);
}

.ws-section--graphite .ws-process__step p,
.ws-section--atlantic .ws-process__step p {
  color: var(--ws-text-on-dark-muted);
}

.ws-section--graphite .ws-process__step,
.ws-section--atlantic .ws-process__step {
  border-top-color: var(--ws-rule-on-dark);
}

.ws-section--graphite .ws-process__num,
.ws-section--atlantic .ws-process__num {
  color: #d99e91;
}

/* --------------------------------------------------------------------------
   11. Two-column expectations (sponsor / participant)
   -------------------------------------------------------------------------- */

.ws-columns {
  display: grid;
  gap: var(--ws-space-8);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .ws-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.ws-columns__col {
  padding-top: var(--ws-space-5);
  border-top: 2px solid var(--ws-graphite);
}

.ws-section--graphite .ws-columns__col,
.ws-section--atlantic .ws-columns__col {
  border-top-color: rgba(255, 255, 255, 0.42);
}

.ws-columns__col h3 {
  margin-bottom: var(--ws-space-5);
  font-size: var(--ws-size-h3);
}

/* Tick list — the mark is decorative; meaning is carried by the text. */
.ws-ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* No max-width here: the separator rules must align with the 2px column rule
   above them. The grid column is already inside the readable measure. */
.ws-ticks > li {
  position: relative;
  padding: var(--ws-space-3) 0 var(--ws-space-3) var(--ws-space-7);
}

.ws-ticks > li + li {
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-ticks > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--ws-space-3) + 0.62em);
  width: 1rem;
  height: 1px;
  background: var(--ws-oxblood);
}

/* Plain bulleted list with rules, for situation lists. */
.ws-rulelist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-rulelist > li {
  padding: var(--ws-space-4) 0;
  border-top: var(--ws-rule-width) solid var(--ws-rule);
  max-width: var(--ws-measure);
}

.ws-rulelist > li:last-child {
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-section--graphite .ws-rulelist > li,
.ws-section--atlantic .ws-rulelist > li,
.ws-section--graphite .ws-ticks > li + li,
.ws-section--atlantic .ws-ticks > li + li {
  border-color: var(--ws-rule-on-dark);
}

/* --------------------------------------------------------------------------
   12. Evidence slots — visible, labelled, and blocked from publication
   -------------------------------------------------------------------------- */

.ws-slot {
  position: relative;
  padding: var(--ws-space-6);
  border: 1px dashed rgba(154, 59, 46, 0.65);
  background: rgba(154, 59, 46, 0.045);
}

.ws-slot__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ws-space-2);
  margin-bottom: var(--ws-space-4);
  color: var(--ws-oxblood);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
  text-transform: uppercase;
}

.ws-slot__label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ws-oxblood);
}

.ws-slot dl {
  margin: 0;
  display: grid;
  gap: var(--ws-space-2) var(--ws-space-5);
}

@media (min-width: 40rem) {
  .ws-slot dl {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

.ws-slot dt {
  color: var(--ws-text);
  font-size: var(--ws-size-small);
  font-weight: var(--ws-weight-semibold);
}

.ws-slot dd {
  margin: 0;
  color: var(--ws-text-muted);
  font-size: var(--ws-size-small);
}

/* Production guard: when the document is marked as production, unapproved
   evidence slots are removed from the page and the build check fails.
   See tools/check-placeholders.ps1 and docs/future-changes.md. */
html[data-ws-env='production'] .ws-slot {
  display: none !important;
}

/* --------------------------------------------------------------------------
   13. Case studies and testimonials
   -------------------------------------------------------------------------- */

.ws-case {
  display: grid;
  gap: var(--ws-space-7) clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--ws-space-6);
  border-top: 2px solid var(--ws-graphite);
}

@media (min-width: 56rem) {
  .ws-case {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.ws-case__meta {
  display: grid;
  gap: var(--ws-space-4);
  align-content: start;
}

.ws-case__label {
  color: var(--ws-oxblood);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
  text-transform: uppercase;
}

.ws-case dl {
  display: grid;
  gap: var(--ws-space-4);
  margin: 0;
}

.ws-case dt {
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
}

.ws-case dd {
  margin: var(--ws-space-1) 0 0;
  max-width: 46ch;
}

.ws-quote {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-5);
  margin: 0;
  padding: var(--ws-space-6) 0 0;
  border-top: var(--ws-rule-width) solid var(--ws-rule-strong);
}

.ws-quote blockquote {
  margin: 0;
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-h3);
  line-height: 1.34;
  text-wrap: pretty;
}

.ws-quote figcaption {
  color: var(--ws-text-muted);
  font-size: var(--ws-size-small);
}

.ws-quote figcaption strong {
  display: block;
  color: var(--ws-text);
}

/* --------------------------------------------------------------------------
   14. Article cards
   -------------------------------------------------------------------------- */

.ws-article-card {
  display: flex;
  flex-direction: column;
  gap: var(--ws-space-4);
  padding-top: var(--ws-space-5);
  border-top: var(--ws-rule-width) solid var(--ws-rule-strong);
}

.ws-article-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ws-space-3);
  color: var(--ws-text-muted);
  font-size: var(--ws-size-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ws-article-card__cat {
  color: var(--ws-atlantic);
  font-weight: var(--ws-weight-semibold);
}

.ws-article-card__meta > * + *::before {
  content: '·';
  margin-right: var(--ws-space-3);
  color: var(--ws-slate);
}

.ws-article-card h3 {
  margin: 0;
  font-size: var(--ws-size-h3);
}

.ws-article-card h3 a {
  color: inherit;
  text-decoration: none;
}

.ws-article-card h3 a:hover {
  color: var(--ws-oxblood);
}

.ws-article-card p {
  flex: 1 1 auto;
  max-width: 42ch;
  color: var(--ws-text-muted);
  font-size: var(--ws-size-small);
}

/* --------------------------------------------------------------------------
   14b. Article page — header, byline, author, next step
   -------------------------------------------------------------------------- */

.ws-articlehead {
  max-width: 34rem;
  padding-bottom: var(--ws-space-7);
  margin-bottom: var(--ws-space-8);
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-articlehead h1 {
  margin-bottom: var(--ws-space-5);
  font-size: var(--ws-size-display);
  line-height: var(--ws-lh-display);
  letter-spacing: var(--ws-track-hero);
}

.ws-articlehead__standfirst {
  max-width: 34rem;
  color: var(--ws-text);
  font-size: var(--ws-size-lead);
  line-height: 1.5;
}

/* Byline carries the author, publication date and review date, all of which
   the brief requires on every article. */
.ws-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ws-space-2) var(--ws-space-4);
  margin-top: var(--ws-space-6);
  color: var(--ws-text-muted);
  font-size: var(--ws-size-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ws-byline > * + *::before {
  content: '·';
  margin-right: var(--ws-space-4);
  color: var(--ws-slate);
}

.ws-byline a {
  color: var(--ws-atlantic);
  text-decoration: none;
}

.ws-byline a:hover {
  text-decoration: underline;
}

/* The self-assessment lists that open several of the articles. */
.ws-checklist {
  margin: var(--ws-space-6) 0;
  padding: 0;
  list-style: none;
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-checklist > li {
  position: relative;
  padding: var(--ws-space-4) 0 var(--ws-space-4) var(--ws-space-7);
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-checklist > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--ws-space-4) + 0.6em);
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid var(--ws-oxblood);
  border-radius: 1px;
}

/* A single, explicit next step at the end of every article. */
.ws-nextstep {
  margin-top: var(--ws-space-9);
  padding: var(--ws-space-6) var(--ws-space-7);
  background: var(--ws-atlantic-wash);
  border-left: 2px solid var(--ws-atlantic);
}

.ws-nextstep h2 {
  margin: 0 0 var(--ws-space-3);
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-h3);
  font-weight: var(--ws-weight-regular);
  letter-spacing: var(--ws-track-display);
  text-transform: none;
}

.ws-nextstep p {
  max-width: 56ch;
  font-size: var(--ws-size-small);
}

.ws-authorbio {
  display: grid;
  gap: var(--ws-space-5) var(--ws-space-6);
  margin-top: var(--ws-space-9);
  padding-top: var(--ws-space-6);
  border-top: 2px solid var(--ws-graphite);
}

@media (min-width: 40rem) {
  .ws-authorbio {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: start;
  }
}

.ws-authorbio__portrait {
  width: 7.5rem;
  margin: 0;
}

.ws-authorbio h2 {
  margin: 0 0 var(--ws-space-3);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
  text-transform: uppercase;
  color: var(--ws-text-muted);
}

.ws-authorbio p {
  max-width: 60ch;
  font-size: var(--ws-size-small);
}

/* --------------------------------------------------------------------------
   15. Prose — long-form article and legal page body
   -------------------------------------------------------------------------- */

.ws-prose {
  max-width: var(--ws-measure);
}

.ws-prose > * + * {
  margin-top: var(--ws-space-5);
}

.ws-prose h2 {
  margin-top: var(--ws-space-9);
  font-size: var(--ws-size-h3);
}

.ws-prose h3 {
  margin-top: var(--ws-space-8);
  font-size: var(--ws-size-h4);
  font-family: var(--ws-font-text);
  font-weight: var(--ws-weight-semibold);
}

.ws-prose ul,
.ws-prose ol {
  padding-left: var(--ws-space-6);
}

.ws-prose li + li {
  margin-top: var(--ws-space-2);
}

.ws-prose blockquote {
  margin: var(--ws-space-7) 0;
  padding-left: var(--ws-space-6);
  border-left: 2px solid var(--ws-oxblood);
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-lead);
  line-height: 1.42;
}

.ws-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ws-size-small);
}

.ws-prose th,
.ws-prose td {
  padding: var(--ws-space-3) var(--ws-space-4);
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
  text-align: left;
  vertical-align: top;
}

.ws-prose th {
  font-weight: var(--ws-weight-semibold);
}

.ws-tablewrap {
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   16. Notices
   -------------------------------------------------------------------------- */

.ws-notice {
  padding: var(--ws-space-5) var(--ws-space-6);
  border-left: 2px solid var(--ws-atlantic);
  background: var(--ws-atlantic-wash);
  font-size: var(--ws-size-small);
}

.ws-notice--oxblood {
  border-left-color: var(--ws-oxblood);
  background: rgba(154, 59, 46, 0.06);
}

.ws-notice h2,
.ws-notice h3,
.ws-notice h4 {
  margin: 0 0 var(--ws-space-2);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-small);
  font-weight: var(--ws-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ws-notice p {
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   17. Accordion (FAQ / page questions)
   -------------------------------------------------------------------------- */

.ws-faq {
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-faq details {
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ws-space-5);
  padding: var(--ws-space-5) 0;
  cursor: pointer;
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-h4);
  list-style: none;
}

.ws-faq summary::-webkit-details-marker {
  display: none;
}

.ws-faq summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--ws-oxblood);
  font-family: var(--ws-font-text);
  font-size: 1.25rem;
  line-height: 1;
}

.ws-faq details[open] summary::after {
  content: '–';
}

.ws-faq details[open] summary {
  color: var(--ws-atlantic);
}

.ws-faq__body {
  padding-bottom: var(--ws-space-6);
}

.ws-faq__body p {
  max-width: 64ch;
  color: var(--ws-text-muted);
}

/* --------------------------------------------------------------------------
   18. Credential block
   -------------------------------------------------------------------------- */

.ws-creds {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ws-graphite);
}

.ws-creds > li {
  display: flex;
  align-items: baseline;
  gap: var(--ws-space-4);
  padding: var(--ws-space-4) 0;
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
  font-size: var(--ws-size-small);
}

.ws-creds > li::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--ws-oxblood);
}

/* --------------------------------------------------------------------------
   19. Statement band — a large pull-quote style claim
   -------------------------------------------------------------------------- */

.ws-statement {
  max-width: 30ch;
  margin: 0;
  font-family: var(--ws-font-display);
  font-size: var(--ws-size-display);
  font-weight: var(--ws-weight-regular);
  line-height: 1.14;
  letter-spacing: var(--ws-track-display);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   19b. Brand motifs — used sparingly, at most one of each per page
   -------------------------------------------------------------------------- */

/* The bracket motif. Lifted directly from the logo lockup and used to frame a
   single statement per page — never as a decorative border on every block.
   The brackets are drawn, not typed, so they never appear in the text layer. */
.ws-bracketed {
  position: relative;
  padding-inline: clamp(1.125rem, 2.4vw, 2.25rem);
}

.ws-bracketed::before,
.ws-bracketed::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(0.625rem, 1.2vw, 1.125rem);
  border: 1.5px solid var(--ws-oxblood);
  pointer-events: none;
}

.ws-bracketed::before {
  left: 0;
  border-right: 0;
}

.ws-bracketed::after {
  right: 0;
  border-left: 0;
}

.ws-dark .ws-bracketed::before,
.ws-dark .ws-bracketed::after {
  border-color: var(--ws-oxblood-lift);
}

@media (max-width: 37.5rem) {
  /* At phone widths the brackets would squeeze the measure, so they become a
     single left-hand mark instead of a full frame. */
  .ws-bracketed {
    padding-inline: var(--ws-space-5) 0;
  }

  .ws-bracketed::after {
    display: none;
  }
}

/* The bracket ornament. A standalone pair of the logo's brackets, used once
   per page as the divider between the body of the page and its closing call
   to action. */
.ws-brandmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.ws-brandmark::before,
.ws-brandmark::after {
  content: '';
  width: clamp(0.5rem, 1vw, 0.75rem);
  height: clamp(1.5rem, 2.6vw, 2.125rem);
  border: 1.5px solid var(--ws-oxblood);
}

.ws-brandmark::before {
  border-right: 0;
}

.ws-brandmark::after {
  border-left: 0;
}

.ws-dark .ws-brandmark::before,
.ws-dark .ws-brandmark::after {
  border-color: var(--ws-oxblood-lift);
}

/* An arch-topped media frame — the same aperture idea applied to photography.
   Reserved for the portrait, so it reads as intentional rather than a style. */
/* 48%, not 50%. Two horizontal radii summing to exactly 100% of the width is a
   degenerate case that makes Chrome clip the entire element away; 48% leaves
   imperceptible shoulders and renders reliably. The logical two-value
   longhands (border-start-start-radius: 50% 26%) fail the same way. */
.ws-arch {
  overflow: hidden;
  border-radius: 48% 48% 0 0 / 26% 26% 0 0;
}

/* --------------------------------------------------------------------------
   20. Final CTA band
   -------------------------------------------------------------------------- */

.ws-cta {
  background: var(--ws-graphite);
  color: var(--ws-text-on-dark);
}

.ws-cta__grid {
  display: grid;
  gap: var(--ws-space-7) clamp(2rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .ws-cta__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.ws-cta h2 {
  max-width: 26ch;
  margin: 0 0 var(--ws-space-5);
}

.ws-cta p {
  max-width: 52ch;
  color: var(--ws-text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */

.ws-form {
  display: grid;
  gap: var(--ws-space-6);
}

.ws-field {
  display: grid;
  gap: var(--ws-space-2);
}

.ws-field > label,
.ws-fieldset > legend {
  font-size: var(--ws-size-small);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: 0.01em;
}

.ws-field__hint {
  color: var(--ws-text-muted);
  font-size: var(--ws-size-micro);
}

.ws-req {
  color: var(--ws-oxblood);
  font-weight: var(--ws-weight-bold);
}

.ws-input,
.ws-select,
.ws-textarea {
  width: 100%;
  padding: 0.875rem var(--ws-space-4);
  background: var(--ws-white);
  /* A field has to read as a field. White on Limestone is only a 6% lightness
     difference, so the fill alone does not announce an input — on the live site
     the fields were invisible until validation painted them red.
     1.5px at 0.55 alpha gives a boundary of 3.70:1 against the white fill and
     3.09:1 against the Limestone page, clearing the 3:1 WCAG 2.2 requires for a
     control's visual boundary, and the inset shadow makes it read as recessed
     rather than as a pale patch. */
  border: 1.5px solid rgba(23, 35, 43, 0.55);
  box-shadow: inset 0 1px 2px rgba(23, 35, 43, 0.07);
  border-radius: var(--ws-radius-control);
  color: var(--ws-text);
  font-size: var(--ws-size-small);
  transition: border-color var(--ws-dur-fast) var(--ws-ease),
    box-shadow var(--ws-dur-fast) var(--ws-ease);
}

.ws-textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.ws-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ws-graphite) 50%),
    linear-gradient(135deg, var(--ws-graphite) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--ws-space-9);
}

.ws-input:hover,
.ws-select:hover,
.ws-textarea:hover {
  border-color: rgba(23, 35, 43, 0.72);
}

.ws-input:focus,
.ws-select:focus,
.ws-textarea:focus {
  border-color: var(--ws-atlantic);
  /* Replaces the resting inset shadow rather than stacking with it. */
  box-shadow: inset 0 0 0 1px var(--ws-atlantic);
  outline: none;
}

.ws-input:focus-visible,
.ws-select:focus-visible,
.ws-textarea:focus-visible {
  outline: var(--ws-focus-width) solid var(--ws-focus);
  outline-offset: 1px;
}

.ws-input[aria-invalid='true'],
.ws-select[aria-invalid='true'],
.ws-textarea[aria-invalid='true'] {
  border-color: var(--ws-oxblood);
  box-shadow: inset 0 0 0 1px var(--ws-oxblood);
}

/* Errors are announced in text and marked with a glyph, never colour alone. */
.ws-error {
  display: none;
  color: var(--ws-oxblood);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-semibold);
}

.ws-error::before {
  content: '! ';
}

.ws-field[data-invalid='true'] .ws-error {
  display: block;
}

/* Hardened button styling.
   The header CTA renders correctly while the form's submit button renders as
   bare text, and both use .ws-btn--primary. The difference is that one is an <a>
   and the other a <button>, so something on the host install is resetting form
   controls — a common behaviour for host-installed optimiser plugins.
   .ws-btn.ws-btn doubles the specificity to (0,2,0) without changing any markup,
   and literal colours survive a var() failure. Values match the tokens exactly. */
button.ws-btn,
.ws-btn.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.0625rem 2.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button.ws-btn--primary,
.ws-btn--primary.ws-btn--primary {
  background-color: #1f5b6e;
  border-color: #1f5b6e;
  color: #ffffff;
}

button.ws-btn--primary:hover,
.ws-btn--primary.ws-btn--primary:hover,
button.ws-btn--primary:focus-visible,
.ws-btn--primary.ws-btn--primary:focus-visible {
  background-color: #17444f;
  border-color: #17444f;
  color: #ffffff;
}

.ws-btn--light.ws-btn--light {
  background-color: #efeae3;
  border-color: #efeae3;
  color: #17232b;
}

.ws-btn--outline.ws-btn--outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

/* The secondary action is a rule-underlined text link, not a filled button, so
   it must not inherit the padded block above. */
.ws-btn--secondary.ws-btn--secondary {
  padding-inline: 0;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #1f5b6e;
  border-radius: 0;
  color: #1f5b6e;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* Hardened field styling.
   Two levels of defence, because on the live WordPress install the fields
   rendered with no white fill and a barely visible outline:
   1. Literal colour values, not var(). If tokens.css fails to load or is
      reordered by a host optimiser, every var() silently resolves to nothing and
      the fill disappears while literal declarations survive — which is exactly
      the symptom seen.
   2. Two-class specificity (0,2,0), so a third-party reset such as
      `input { background: none }` from a host-installed plugin cannot win.
   Values match the token equivalents exactly; the audit still measures them. */
.ws-form .ws-input,
.ws-form .ws-select,
.ws-form .ws-textarea {
  background-color: #ffffff;
  border: 1.5px solid #7f868a;
  color: #17232b;
}

/* The submit button needs the same treatment as the fields, for the same reason.
   The host override reaches every form control, so a <button> inside a form
   loses even at doubled specificity while the identical .ws-btn--primary on an
   <a> in the header renders correctly. Scoped to .ws-form so links elsewhere are
   untouched. */
.ws-form button.ws-btn,
.ws-form button[type='submit'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 1.0625rem 2.5rem !important;
  background-color: #1f5b6e !important;
  border: 1px solid #1f5b6e !important;
  border-radius: 2px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.ws-form button.ws-btn:hover,
.ws-form button[type='submit']:hover,
.ws-form button.ws-btn:focus-visible,
.ws-form button[type='submit']:focus-visible {
  background-color: #17444f !important;
  border-color: #17444f !important;
  color: #ffffff !important;
}

/* <input> only, and the one place !important is the right answer.
   Raising specificity fixed <select> and <textarea> but not <input>, which means
   the host's override targets input specifically and already carries !important.
   Nothing but !important can beat that, and the third-party stylesheet is not
   ours to edit. Scoped inside .ws-form so it cannot leak to any other control,
   and every state that follows repeats it, or the focus and error borders would
   lose to this rule instead. */
.ws-form input.ws-input {
  background-color: #ffffff !important;
  border: 1.5px solid #7f868a !important;
  border-radius: 2px !important;
  padding: 0.875rem 1rem !important;
  color: #17232b !important;
}

/* Browser autofill.
   Chrome paints autofilled inputs a pale blue that background-color cannot
   override at any specificity, and it affects <input> only — never <select> or
   <textarea>. That is the same signature as a host override, so cover it too.
   A large inset shadow is the only way to repaint the fill, and
   -webkit-text-fill-color the only way to set the text colour. The absurd
   transition delay stops the yellow flash on page load. */
.ws-form input.ws-input:-webkit-autofill,
.ws-form input.ws-input:-webkit-autofill:hover,
.ws-form input.ws-input:-webkit-autofill:focus,
.ws-form input.ws-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #17232b !important;
  caret-color: #17232b;
  transition: background-color 9999s ease-in-out 0s;
}

.ws-form input.ws-input:hover {
  border-color: #55606a !important;
}

.ws-form input.ws-input:focus {
  border-color: #1f5b6e !important;
  box-shadow: inset 0 0 0 1px #1f5b6e !important;
}

.ws-form input.ws-input[aria-invalid='true'] {
  border-color: #9a3b2e !important;
  box-shadow: inset 0 0 0 1px #9a3b2e !important;
}

.ws-form .ws-input:hover,
.ws-form .ws-select:hover,
.ws-form .ws-textarea:hover {
  border-color: #55606a;
}

.ws-form .ws-input:focus,
.ws-form .ws-select:focus,
.ws-form .ws-textarea:focus {
  border-color: #1f5b6e;
  box-shadow: inset 0 0 0 1px #1f5b6e;
}

.ws-form .ws-input[aria-invalid='true'],
.ws-form .ws-select[aria-invalid='true'],
.ws-form .ws-textarea[aria-invalid='true'] {
  border-color: #9a3b2e;
  box-shadow: inset 0 0 0 1px #9a3b2e;
}

.ws-form__row {
  display: grid;
  gap: var(--ws-space-6);
}

@media (min-width: 40rem) {
  .ws-form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ws-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.ws-fieldset > legend {
  padding: 0;
  margin-bottom: var(--ws-space-3);
}

.ws-check {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: var(--ws-space-4);
  align-items: start;
  font-size: var(--ws-size-small);
  cursor: pointer;
}

.ws-check input[type='checkbox'],
.ws-check input[type='radio'] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.22em 0 0;
  accent-color: var(--ws-atlantic);
}

.ws-formstatus {
  padding: var(--ws-space-4) var(--ws-space-5);
  border-left: 2px solid var(--ws-oxblood);
  background: rgba(154, 59, 46, 0.06);
  font-size: var(--ws-size-small);
  font-weight: var(--ws-weight-medium);
}

.ws-formstatus:empty {
  display: none;
}

/* Honeypot — hidden from sight and from assistive technology. */
.ws-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   22. Contact details block
   -------------------------------------------------------------------------- */

.ws-contactlist {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 2px solid var(--ws-graphite);
}

.ws-contactlist > div {
  display: grid;
  gap: var(--ws-space-1);
  padding: var(--ws-space-4) 0;
  border-bottom: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-contactlist dt {
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
}

.ws-contactlist dd {
  margin: 0;
  font-size: var(--ws-size-small);
}

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */

.ws-footer {
  background: var(--ws-graphite);
  color: var(--ws-text-on-dark);
  padding-block: var(--ws-space-10) var(--ws-space-6);
}

.ws-footer__grid {
  display: grid;
  gap: var(--ws-space-8) clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--ws-space-8);
  border-bottom: var(--ws-rule-width) solid var(--ws-rule-on-dark);
}

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

@media (min-width: 66rem) {
  .ws-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
}

.ws-footer__brand p {
  max-width: 34ch;
  margin-top: var(--ws-space-5);
  color: var(--ws-text-on-dark-muted);
  font-size: var(--ws-size-small);
}

.ws-footer__logo img {
  width: clamp(11rem, 20vw, 15rem);
}

.ws-footer h2 {
  margin: 0 0 var(--ws-space-4);
  font-family: var(--ws-font-text);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
  text-transform: uppercase;
  color: var(--ws-text-on-dark-muted);
}

.ws-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-footer li + li {
  margin-top: var(--ws-space-3);
}

.ws-footer a {
  color: var(--ws-white);
  font-size: var(--ws-size-small);
  text-decoration: none;
}

.ws-footer a:hover {
  color: #f0c9c1;
  text-decoration: underline;
}

.ws-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ws-space-4) var(--ws-space-6);
  padding-top: var(--ws-space-6);
  color: var(--ws-text-on-dark-muted);
  font-size: var(--ws-size-micro);
}

.ws-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-space-3) var(--ws-space-5);
}

.ws-footer__legal li + li {
  margin-top: 0;
}

.ws-footer__legal a {
  font-size: var(--ws-size-micro);
}

.ws-footer__disclaimer {
  max-width: 78ch;
  margin-top: var(--ws-space-5);
  color: var(--ws-text-on-dark-muted);
  font-size: var(--ws-size-micro);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   24. Figure captions and imagery placeholders
   -------------------------------------------------------------------------- */

.ws-figure {
  margin: 0;
}

.ws-figure figcaption {
  margin-top: var(--ws-space-3);
  color: var(--ws-text-muted);
  font-size: var(--ws-size-micro);
}

/* Portrait placeholder — never a fabricated photograph of Alexandra. */
.ws-portrait-slot {
  display: grid;
  place-content: center;
  gap: var(--ws-space-3);
  aspect-ratio: 4 / 5;
  padding: var(--ws-space-6);
  border: 1px dashed rgba(154, 59, 46, 0.6);
  background: linear-gradient(
    160deg,
    rgba(31, 91, 110, 0.07),
    rgba(154, 59, 46, 0.05)
  );
  text-align: center;
}

.ws-portrait-slot span {
  color: var(--ws-oxblood);
  font-size: var(--ws-size-micro);
  font-weight: var(--ws-weight-bold);
  letter-spacing: var(--ws-track-eyebrow);
  text-transform: uppercase;
}

.ws-portrait-slot p {
  max-width: 30ch;
  margin: 0 auto;
  color: var(--ws-text-muted);
  font-size: var(--ws-size-micro);
}

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */

.ws-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ws-rule {
  height: 0;
  border: 0;
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-rule--oxblood {
  border-top-color: rgba(154, 59, 46, 0.55);
}

.ws-center {
  text-align: center;
}

.ws-mt-0 { margin-top: 0; }
.ws-mt-4 { margin-top: var(--ws-space-4); }
.ws-mt-5 { margin-top: var(--ws-space-5); }
.ws-mt-6 { margin-top: var(--ws-space-6); }
.ws-mt-7 { margin-top: var(--ws-space-7); }
.ws-mt-8 { margin-top: var(--ws-space-8); }
.ws-mt-9 { margin-top: var(--ws-space-9); }
.ws-mb-0 { margin-bottom: 0; }
.ws-mb-5 { margin-bottom: var(--ws-space-5); }
.ws-mb-6 { margin-bottom: var(--ws-space-6); }
.ws-mb-8 { margin-bottom: var(--ws-space-8); }

.ws-measure { max-width: var(--ws-measure); }
.ws-measure-narrow { max-width: var(--ws-measure-narrow); }

/* --------------------------------------------------------------------------
   25b. WordPress Navigation block bridge
   Only relevant to the WordPress build; inert on the static site, where these
   classes never appear.

   The core navigation block renders its own markup and ignores where you would
   like your classes to land: className goes on a <nav> wrapper, the list becomes
   .wp-block-navigation__container, and each link becomes
   .wp-block-navigation-item__content. None of those are the hooks the header
   rules above use, so the menu renders completely unstyled.

   Rather than fight the block, its real output is mapped onto the same design.
   Selectors are deliberately three levels deep so they outrank the block's own
   two-level rules regardless of stylesheet order.
   -------------------------------------------------------------------------- */

.ws-header .ws-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The thin Oxblood separator between items, as in the approved mockup. */
.ws-header .ws-nav .wp-block-navigation-item + .wp-block-navigation-item {
  border-left: 1px solid rgba(154, 59, 46, 0.45);
}

.ws-header .ws-nav .wp-block-navigation-item__content {
  position: relative;
  display: block;
  padding: var(--ws-space-2) clamp(0.4rem, 0.75vw, 0.6875rem);
  color: var(--ws-graphite);
  font-family: var(--ws-font-text);
  font-size: 0.75rem;
  font-weight: var(--ws-weight-medium);
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ws-header .ws-nav .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  inset-inline: clamp(0.4rem, 0.75vw, 0.6875rem);
  bottom: 0;
  height: 1px;
  background: var(--ws-oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ws-dur) var(--ws-ease);
}

.ws-header .ws-nav .wp-block-navigation-item__content:hover::after,
.ws-header .ws-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

.ws-header .ws-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  font-weight: var(--ws-weight-semibold);
}

/* The drawer uses the same block, stacked. */
.ws-drawer .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 var(--ws-space-6);
  padding: 0;
  list-style: none;
}

.ws-drawer .wp-block-navigation-item + .wp-block-navigation-item {
  border-top: var(--ws-rule-width) solid var(--ws-rule);
}

.ws-drawer .wp-block-navigation-item__content {
  display: block;
  padding: var(--ws-space-4) 0;
  color: var(--ws-graphite);
  font-family: var(--ws-font-display);
  font-size: 1.5rem;
  text-decoration: none;
}

.ws-drawer .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--ws-oxblood);
}

/* The block wraps a submenu in its own container; the site has no submenus, so
   this only guards against one being added later and inheriting nothing. */
.ws-header .ws-nav .wp-block-navigation__submenu-container {
  background: var(--ws-limestone);
  border: var(--ws-rule-width) solid var(--ws-rule);
  box-shadow: var(--ws-shadow-menu);
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */

@media print {
  .ws-header,
  .ws-drawer,
  .ws-footer,
  .ws-cta,
  .ws-skip,
  .ws-hero__figure {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
  }
}