/* sprint 14 — the redesign rebuilt to OBC's brand governance, scoped under .obc-v2.

   Three rules from the brand document change this materially from the first pass:

   1. Arial only. The first pass used Figtree with an Instrument Serif italic for the emphasised
      word, and that italic serif was the design's signature gesture. Governance requires Arial
      unless a display-font exception is approved, so emphasis is carried by Arial italic, weight
      and the warm gold accent instead. Arial has no 300 weight, so the very large headings read
      more solid than the first pass did. That is the honest consequence of the rule.
   2. The approved OBC Project Palette, no substitutions.
   3. No em dashes anywhere in the copy.

   Removing the display fonts also removes the Google Fonts request the first pass made, which is
   one less third party receiving visitor data from a health site. */

.obc-v2 {
  /* approved OBC Project Palette */
  --obc-milk-teal: #75aab0;
  --obc-deep-navy: #183e49;
  --obc-clinical-teal: #4f8f8b;
  --obc-warm-gold: #d7b47a;
  --obc-warm-coral: #c9826b;
  --obc-soft-sage: #a7b9a2;
  --obc-ink: #1f2c31;
  --obc-slate: #758287;
  --obc-ivory: #f6efe6;
  --obc-deep-green: #294f4b;
  --obc-muted-berry: #6e4a5a;
  --obc-paper: #fff;

  --v2-font: Arial, Helvetica, sans-serif;
  --v2-gutter: clamp(20px, 5vw, 72px);
  --v2-measure: 1240px;

  margin: 0;
  padding: 0;
  background: var(--obc-paper);
  color: var(--obc-ink);
  font-family: var(--v2-font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

.obc-v2 :where(h1, h2, h3, h4, p, li, a) {
  font-family: var(--v2-font);
}

.obc-v2 :where(h1, h2, h3, h4) {
  color: var(--obc-ink);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.obc-v2 .v2-dark :where(h1, h2, h3, h4),
.obc-v2 .v2-hero :where(h1, h2, h3, h4) {
  color: var(--obc-paper);
}

/* emphasis without a serif: Arial italic carried by the warm gold accent */
.obc-v2 em {
  font-family: var(--v2-font);
  font-style: italic;
  color: var(--obc-clinical-teal);
}

.obc-v2 .v2-dark em,
.obc-v2 .v2-hero em {
  color: var(--obc-warm-gold);
}

.obc-v2 .v2-inner {
  width: 100%;
  max-width: var(--v2-measure);
  margin: 0 auto;
  padding: 0 var(--v2-gutter);
}

/* ---------- hero ---------- */
.obc-v2 .v2-hero.wp-block-cover {
  min-height: min(84vh, 720px);
  padding: clamp(64px, 10vw, 120px) var(--v2-gutter);
  align-items: flex-end;
  color: var(--obc-paper);
}

.obc-v2 .v2-hero .wp-block-cover__background {
  background: linear-gradient(
    to right,
    rgba(24, 62, 73, 0.95) 0%,
    rgba(24, 62, 73, 0.86) 40%,
    rgba(24, 62, 73, 0.45) 100%
  );
}

.obc-v2 .v2-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--v2-measure);
  margin: 0 auto;
}

/* sprint 14 — the approved 2025 logo. Width only, so the aspect ratio is preserved by the browser;
   no filter, no recolour, no crop. Its disc is opaque Milk teal, so it sits safely on the dark hero
   without the transparent corners being flattened onto it. Do not place it on the Milk teal Finder
   band, where the disc would disappear into the background. */
.obc-v2 .v2-logo {
  margin: 0 0 clamp(18px, 3vw, 26px);
}

.obc-v2 .v2-logo img {
  /* the mark carries three lines of script inside the disc, so it needs real size to stay legible.
     Width only; the browser keeps the 1:1 aspect ratio from the file. */
  width: clamp(116px, 12vw, 164px);
  height: auto;
}

.obc-v2 .v2-eyebrow {
  margin: 0 0 clamp(18px, 3vw, 28px);
  color: var(--obc-soft-sage);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.obc-v2 .v2-hero-title {
  max-width: 18ch;
  margin: 0 0 clamp(18px, 3vw, 26px);
  color: var(--obc-paper);
  font-size: clamp(36px, 6.2vw, 72px);
  line-height: 1.04;
}

.obc-v2 .v2-hero-sub {
  max-width: 52ch;
  margin: 0 0 clamp(26px, 4vw, 36px);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}

/* ---------- buttons ---------- */
.obc-v2 .v2-cta .wp-block-button__link {
  padding: 16px 32px;
  border: 0;
  border-radius: 4px;
  background: var(--obc-clinical-teal);
  color: var(--obc-paper);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.25s ease;
}

.obc-v2 .v2-cta .wp-block-button__link:hover {
  background: var(--obc-deep-green);
}

.obc-v2 .v2-cta-ghost .wp-block-button__link {
  padding: 16px 30px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: transparent;
  color: var(--obc-paper);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.25s ease;
}

.obc-v2 .v2-cta-ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.obc-v2 .v2-cta-quiet .wp-block-button__link {
  padding: 16px 30px;
  border: 1px solid var(--obc-clinical-teal);
  border-radius: 4px;
  background: transparent;
  color: var(--obc-clinical-teal);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obc-v2 .v2-cta-quiet .wp-block-button__link:hover {
  background: var(--obc-clinical-teal);
  color: var(--obc-paper);
}

.obc-v2 .wp-block-buttons {
  gap: 16px;
}

.obc-v2 .v2-buttons-centre.wp-block-buttons {
  justify-content: center;
}

/* ---------- section furniture ---------- */
.obc-v2 .v2-section {
  padding: clamp(64px, 10vw, 132px) 0;
}

.obc-v2 .v2-ivory {
  background: var(--obc-ivory);
}

.obc-v2 .v2-dark {
  background: var(--obc-deep-navy);
  color: var(--obc-paper);
}

.obc-v2 .v2-finder {
  background: var(--obc-milk-teal);
}

.obc-v2 .v2-finder :where(h2) {
  color: var(--obc-deep-navy);
}

.obc-v2 .v2-finder em {
  color: var(--obc-deep-navy);
  font-weight: 700;
}

.obc-v2 .v2-kicker {
  margin: 0 0 clamp(20px, 3vw, 30px);
  color: var(--obc-slate);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.obc-v2 .v2-dark .v2-kicker {
  color: var(--obc-soft-sage);
}

.obc-v2 .v2-finder .v2-kicker {
  color: var(--obc-deep-navy);
}

.obc-v2 .v2-lede {
  max-width: 22ch;
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.1;
}

.obc-v2 .v2-body {
  max-width: 64ch;
  margin: 0 0 18px;
  color: var(--obc-slate);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
}

.obc-v2 .v2-dark .v2-body {
  color: rgba(255, 255, 255, 0.8);
}

.obc-v2 .v2-finder .v2-body {
  color: var(--obc-deep-navy);
}

.obc-v2 .v2-note {
  margin: 18px 0 0;
  color: var(--obc-deep-navy);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
}

/* ---------- statistics band ---------- */
.obc-v2 .v2-stats.wp-block-columns {
  gap: 0;
  margin: clamp(36px, 5vw, 64px) 0 clamp(24px, 4vw, 36px);
}

.obc-v2 .v2-stat.wp-block-column {
  padding: clamp(12px, 2vw, 24px) clamp(16px, 2.4vw, 34px);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.obc-v2 .v2-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.obc-v2 .v2-stat-figure {
  margin: 0 0 12px;
  color: var(--obc-warm-gold);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

.obc-v2 .v2-stat-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.5;
}

.obc-v2 .v2-source {
  max-width: 82ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.65;
}

.obc-v2 .v2-source a {
  color: var(--obc-soft-sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- pathway cards ---------- */
.obc-v2 .v2-paths.wp-block-columns {
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(28px, 4vw, 48px);
}

.obc-v2 .v2-path.wp-block-cover {
  min-height: clamp(340px, 38vw, 430px);
  padding: clamp(22px, 3vw, 32px);
  align-items: flex-end;
  border-radius: 4px;
  overflow: hidden;
}

.obc-v2 .v2-path .wp-block-cover__background {
  background: linear-gradient(to top, rgba(24, 62, 73, 0.96) 4%, rgba(24, 62, 73, 0.72) 44%, rgba(24, 62, 73, 0.2) 100%);
}

.obc-v2 .v2-path-plain {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(340px, 38vw, 430px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--obc-milk-teal);
  border-radius: 4px;
  background: var(--obc-ivory);
}

.obc-v2 .v2-path-title {
  margin: 0 0 10px;
  color: var(--obc-paper);
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.15;
}

.obc-v2 .v2-path-plain .v2-path-title {
  color: var(--obc-deep-navy);
}

.obc-v2 .v2-path-note {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.55;
}

.obc-v2 .v2-path-plain .v2-path-note {
  color: var(--obc-ink);
}

.obc-v2 .v2-path-link .wp-block-button__link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--obc-paper);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.obc-v2 .v2-path-plain .v2-path-link .wp-block-button__link {
  border-bottom-color: var(--obc-clinical-teal);
  color: var(--obc-clinical-teal);
}

.obc-v2 .v2-path-link .wp-block-button__link:hover {
  border-bottom-color: var(--obc-warm-gold);
  color: var(--obc-warm-gold);
}

/* the full service menu sits below the three pathways, deliberately lower in priority */
.obc-v2 .v2-secondary-link {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-size: 14px;
}

.obc-v2 .v2-secondary-link a {
  color: var(--obc-clinical-teal);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- split feature ---------- */
.obc-v2 .v2-split.wp-block-columns {
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.obc-v2 .v2-split figure {
  margin: 0;
}

.obc-v2 .v2-split img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.obc-v2 .v2-points {
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}

.obc-v2 .v2-points li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 26px;
  color: var(--obc-slate);
  font-size: 16px;
  line-height: 1.6;
}

.obc-v2 .v2-points li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--obc-milk-teal);
  content: "";
}

/* ---------- paraphrased research line ---------- */
.obc-v2 .v2-quote {
  max-width: 30ch;
  margin: 0 auto;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
}

.obc-v2 .v2-quote-source {
  margin: clamp(18px, 3vw, 26px) 0 0;
  color: var(--obc-slate);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- closing ---------- */
.obc-v2 .v2-close {
  text-align: center;
}

.obc-v2 .v2-close .v2-lede {
  max-width: 28ch;
  margin-right: auto;
  margin-left: auto;
}

.obc-v2 .v2-close .v2-body {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.obc-v2 .v2-finder .v2-inner {
  text-align: center;
}

.obc-v2 .v2-finder .v2-lede,
.obc-v2 .v2-finder .v2-body {
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 781px) {
  .obc-v2 .v2-stat.wp-block-column {
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
  }

  .obc-v2 .v2-stat:first-child {
    border-top: 0;
  }

  .obc-v2 .v2-hero-title {
    max-width: none;
  }
}
