/* ============================================================
   Wexmoor Health Partners site styles
   Palette : navy #0E1B2C / crimson #C8102E / cool neutrals
   Type    : Archivo (headings) / Public Sans (body)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- tokens: light (primary identity) ---------- */
:root {
  color-scheme: light dark;

  --paper:      #FFFFFF;
  --shell:      #F3F6FA;
  --shell-2:    #E9EEF4;
  --ink:        #0E1B2C;
  --ink-2:      #4C5F75;
  --ink-3:      #6F8199;
  --rule:       #DCE3EC;
  --rule-strong:#C3CEDB;

  --deep:       #0E1B2C;
  --deep-2:     #16273D;
  --deep-ink:   #F3F6FA;
  --deep-ink-2: #9CB0C7;
  --deep-rule:  #26394F;

  --accent:     #C8102E;
  --accent-2:   #A50D25;
  --on-accent:  #FFFFFF;
  --accent-wash:#FBEEF0;

  --shadow-sm: 0 1px 2px rgba(14,27,44,.06), 0 2px 8px rgba(14,27,44,.05);
  --shadow-md: 0 2px 4px rgba(14,27,44,.06), 0 12px 28px rgba(14,27,44,.09);

  --wrap: 1180px;
  --pad: 24px;

  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Archivo", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.35rem, 1.35rem + 3.5vw, 3.9rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem);
  --fs-h3:      clamp(1.12rem, 1.02rem + .35vw, 1.3rem);
  --fs-lead:    clamp(1.06rem, 1rem + .35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .9rem;
  --fs-xs:      .78rem;
}

/* ---------- tokens: dark (system preference, no stamp) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0D1621;
    --shell:      #121E2C;
    --shell-2:    #172637;
    --ink:        #E9EEF4;
    --ink-2:      #A7B8CA;
    --ink-3:      #8497AC;
    --rule:       #24344A;
    --rule-strong:#33475F;

    --deep:       #060D15;
    --deep-2:     #0E1B2C;
    --deep-ink:   #E9EEF4;
    --deep-ink-2: #9CB0C7;
    --deep-rule:  #22334A;

    --accent:     #F0576B;
    --accent-2:   #FF7183;
    --on-accent:  #16070A;
    --accent-wash:#241017;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 12px 28px rgba(0,0,0,.55);
  }
}

/* ---------- tokens: dark (explicit stamp) ---------- */
:root[data-theme="dark"] {
  --paper:      #0D1621;
  --shell:      #121E2C;
  --shell-2:    #172637;
  --ink:        #E9EEF4;
  --ink-2:      #A7B8CA;
  --ink-3:      #8497AC;
  --rule:       #24344A;
  --rule-strong:#33475F;

  --deep:       #060D15;
  --deep-2:     #0E1B2C;
  --deep-ink:   #E9EEF4;
  --deep-ink-2: #9CB0C7;
  --deep-rule:  #22334A;

  --accent:     #F0576B;
  --accent-2:   #FF7183;
  --on-accent:  #16070A;
  --accent-wash:#241017;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 12px 28px rgba(0,0,0,.55);
}

/* ---------- base ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; line-height: 1.25; }

p { text-wrap: pretty; }
strong { font-weight: 700; }

a { text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 6vw, 92px); }
.section-tight { padding-block: clamp(40px, 4vw, 60px); }
.shell { background: var(--shell); }
.bordered-top { border-top: 1px solid var(--rule); }

.eyebrow {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow-accent { color: var(--accent); }

.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.62; }
.measure { max-width: 62ch; }
.measure-wide { max-width: 78ch; }

.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn svg { flex: none; transition: transform .16s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--shell); }
.btn-on-deep { border-color: var(--deep-rule); color: var(--deep-ink); background: transparent; }
.btn-on-deep:hover { border-color: var(--deep-ink); background: rgba(255,255,255,.06); }
.btn-sm { padding: 9px 16px; font-size: var(--fs-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}
.textlink svg { transition: transform .16s ease; }
.textlink:hover svg { transform: translateX(3px); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 70px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--ink);
}
.brand-name span {
  display: block;
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.mainnav { display: flex; align-items: center; gap: 26px; }
.mainnav a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.masthead .btn { flex: none; }

/* ---------- hero ---------- */
.hero { border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(52px, 6vw, 88px);
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 52ch; }


/* hero: single column, no stat panel */
.hero-single {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: clamp(56px, 6.5vw, 96px);
}
.hero-single h1 { max-width: 18ch; }
.hero-single .lead { max-width: 58ch; }
.hero-single .btn-row { margin-top: 8px; }

/* section with a heading column beside a body column */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.two-col > div:first-child { position: sticky; top: 92px; }
.two-col h2 { margin-top: 12px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); }

.dd-link { margin-top: 12px; }
/* ---------- cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card p { color: var(--ink-2); font-size: var(--fs-sm); }
.card-link:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* numbered list: used only where the order is real */
.steps { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  padding-block: 26px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.step-n {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: var(--fs-sm); max-width: 64ch; }

/* definition rows */
.deflist { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.defrow {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 28px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.defrow dt { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.01em; }
.defrow dd { color: var(--ink-2); font-size: var(--fs-sm); max-width: 68ch; }

/* plain lists */
.list-plain { display: grid; gap: 11px; }
.list-plain li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
}
.list-plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .74em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.list-plain strong { color: var(--ink); font-weight: 600; }
.band .list-plain li { color: var(--deep-ink-2); }

.prose { display: grid; gap: 18px; }
.prose p { color: var(--ink-2); }
.prose p.first { color: var(--ink); font-size: var(--fs-lead); line-height: 1.6; }


/* ---------- figures ---------- */
.figure-block { margin-top: 46px; }

.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.figure-frame {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(18px, 2.5vw, 30px);
  overflow-x: auto;
}
.shell .figure-frame { background: var(--paper); }
.figure svg { width: 100%; height: auto; min-width: 560px; display: block; color: var(--ink); }
.figure figcaption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  max-width: 72ch;
  line-height: 1.55;
}
.figure-label { fill: var(--ink); font-weight: 600; }
.figure-sub { fill: var(--ink-3); }
.figure-accent { fill: var(--accent); font-weight: 700; }

/* ---------- deep band ---------- */
.band { background: var(--deep); color: var(--deep-ink); }
.band h2, .band h3 { color: var(--deep-ink); }
.band p { color: var(--deep-ink-2); }
.band .eyebrow { color: var(--accent); }
.band .lead { color: var(--deep-ink-2); }
.band-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--deep-rule);
  border-radius: 4px;
  overflow: hidden;
}
.band-split > div {
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.band-split > div + div { border-left: 1px solid var(--deep-rule); }
.band-split .audience {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- disclosure ---------- */
.disclosure {
  background: var(--shell-2);
  border-block: 1px solid var(--rule);
}
.disclosure-inner { padding-block: 24px; }
.disclosure p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 90ch; }
.disclosure strong { color: var(--ink); }

/* ---------- contact ---------- */
.note { font-size: var(--fs-xs); color: var(--ink-3); }

.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 38px);
}


/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-aside { display: flex; flex-direction: column; gap: 28px; }
.contact-aside p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 9px; max-width: 46ch; }
.contact-email { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin: 14px 0 18px; word-break: break-word; }
.contact-body { color: var(--ink-2); font-size: var(--fs-sm); max-width: 48ch; margin-bottom: 16px; }
.contact-email a { color: var(--accent); font-weight: 600; }
.contact-email a:hover { color: var(--accent-2); }

.h2-sm { font-size: var(--fs-h3); margin: 12px 0 18px; }

/* ---------- page header (interior pages) ---------- */
.pagehead { background: var(--shell); border-bottom: 1px solid var(--rule); }
.pagehead-inner { padding-block: clamp(44px, 5vw, 70px); display: flex; flex-direction: column; gap: 18px; }

/* ---------- footer ---------- */
.sitefoot { background: var(--deep); color: var(--deep-ink-2); padding-block: 54px 30px; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--deep-rule);
}
.foot-grid h4 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--deep-ink);
  margin-bottom: 14px;
}
.foot-grid li + li { margin-top: 9px; }
.foot-grid a { font-size: var(--fs-sm); }
.foot-grid a:hover { color: var(--deep-ink); }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand .brand-name { color: var(--deep-ink); }
.foot-brand p { font-size: var(--fs-sm); max-width: 40ch; line-height: 1.55; }
.foot-legal {
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: space-between;
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.foot-legal p { max-width: 82ch; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .two-col { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .two-col > div:first-child { position: static; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .mainnav { display: none; }
  .defrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 720px) {
  .grid-3, .grid-2, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .band-split { grid-template-columns: minmax(0, 1fr); }
  .band-split > div + div { border-left: 0; border-top: 1px solid var(--deep-rule); }
  .step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

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