/* =============================================================
   Care Advantage 360 — Landing Page
   styles.css

   Sections, in page order:
     1.  Base / reset
     2.  Layout helpers
     3.  Buttons
     4.  Header
     5.  Hero
     6.  Alternating photo / copy bands
     7.  Resource hub (tool list + speech bubble)
     8.  Stats band (pictogram + bar chart)
     9.  Who we serve
     10. Testimonials
     11. "All plans are" chips
     12. Core values (orange band)
     13. Contact form
     14. Footer
     15. Responsive
     16. Print
   ============================================================= */


/* -------------------------------------------------------------
   1. Base / reset
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
/* blockquote is included deliberately — browsers give it a 40px indent
   and vertical margins by default, which knocked the quote text out of
   alignment with its card. */
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }

a {
  color: var(--navy-link);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--orange); }

::selection { background: #ffd9c2; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.accent { color: var(--orange); }


/* -------------------------------------------------------------
   2. Layout helpers
   ------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Two-column band: photo on one side, copy on the other */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 88px;
}

.split--top { align-items: start; }

/* Resource hub: the centred bubble gets its own row, so the row gap
   is tighter than the 72px used between columns. */
.split--hub { row-gap: 44px; }

/* Framed photo used throughout the alternating bands */
.photo {
  min-width: 0;
  height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}

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

.section-title {
  font: 700 40px/1.16 var(--font-display);
  letter-spacing: -.017em;
  color: var(--navy);
  margin-bottom: 20px;
}

.section-copy {
  font: 400 21px/1.55 var(--font-body);
  color: var(--muted);
}

.section-copy + .section-copy { margin-top: 16px; }


/* -------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  width: 100%;
  padding: 16px 32px;
  border: none;
  border-radius: var(--pill);
  background: var(--orange);
  color: #fff;
  font: 700 18.5px/1 var(--font-display);
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: filter 120ms ease, transform 80ms ease;
}

.btn:hover  { filter: brightness(.94); color: #fff; }
.btn:active { transform: scale(.985); }


/* -------------------------------------------------------------
   4. Header
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-faint);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-header__logo-link {
  display: inline-flex;
  flex: none;
  line-height: 0;
}

.site-header__logo {
  height: 54px;
  width: auto;
  flex: none;
}

.site-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header__link {
  font: 600 17.5px/1 var(--font-body);
  color: var(--navy-link);
  white-space: nowrap;
}


/* -------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Centred horizontally so both faces survive the heavy side-crop on
   narrow screens; biased slightly up so they sit above the fold line. */
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Navy wash, heaviest on the left so the headline stays readable */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(24, 31, 77, .88) 0%,
    rgba(24, 31, 77, .72) 52%,
    rgba(24, 31, 77, .35) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero__title {
  font: 800 60px/1.07 var(--font-display);
  letter-spacing: -.024em;
  color: #fff;
  margin-bottom: 24px;
  max-width: 20em;
}

/* Hand-drawn orange underline under "Medicare does not cover" */
.squiggle {
  position: relative;
  display: inline-block;
}

.squiggle svg {
  position: absolute;
  left: -1.5%;
  bottom: -.19em;
  width: 103%;
  height: .26em;
  overflow: visible;
}

/* Sits outside the .squiggle span so the underline does not run under it */
.hero__fnref {
  font-size: .45em;
  vertical-align: super;
  line-height: 0;
  margin-left: .08em;
  color: var(--orange);
  text-decoration: none;
}

.hero__fnref:hover {
  color: var(--orange);
  text-decoration: underline;
}

.hero__lede {
  font: 400 28px/1.4 var(--font-body);
  color: rgba(255, 255, 255, .88);
  max-width: 24em;
}

/* Source line pinned to the foot of the hero, aligned to the same
   gutter as the headline above it. */
.hero__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 3;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  font: 400 12.5px/1.5 var(--font-body);
  color: rgba(255, 255, 255, .62);
}

.hero__note em { font-style: italic; }


/* -------------------------------------------------------------
   6. Alternating photo / copy bands
   ------------------------------------------------------------- */
.band--gray {
  background: var(--surface-gray);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}

/* "Think of it like AAA" callout */
.callout {
  margin-top: 26px;
  background: var(--surface-gray);
  border: 1px solid var(--border-blue);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
}

.callout__title {
  font: 700 18px/1.3 var(--font-display);
  color: var(--orange);
  margin-bottom: 8px;
}

.callout__body {
  font: 400 18.5px/1.5 var(--font-body);
  color: var(--muted);
}

.callout__note {
  font: 400 14px/1.45 var(--font-body);
  color: var(--muted-soft);
  margin-top: 12px;
}

/* Orange emphasis inside body copy */
.section-copy em {
  font-style: normal;
  font-weight: 700;
  color: var(--orange);
}


/* -------------------------------------------------------------
   7. Resource hub
   ------------------------------------------------------------- */
/* Spans both columns as the section's own heading */
.hub__section-title {
  grid-column: 1 / -1;
  font: 700 40px/1.16 var(--font-display);
  letter-spacing: -.017em;
  color: var(--navy);
  text-align: center;
}

.hub__photo { margin-bottom: 30px; }

/* Sized to sit on a single line in the left column */
.hub__title {
  font: 700 28px/1.2 var(--font-display);
  letter-spacing: -.015em;
  color: var(--navy);
  margin-bottom: 16px;
}

.tools {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tools__label {
  font: 700 14px/1.3 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--orange);
}

.tool {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.tool__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool__name {
  font: 700 18.5px/1.3 var(--font-display);
  color: var(--navy);
  margin-bottom: 4px;
}

.tool__desc {
  font: 400 17.5px/1.45 var(--font-body);
  color: var(--muted);
}

/* Speech bubble with the little arrow on top */
.bubble {
  position: relative;
  margin-top: 28px;
  align-self: flex-start;
  background: var(--surface-warm);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  max-width: 24em;
}

.bubble::before {
  content: '';
  position: absolute;
  left: 34px;
  top: -9px;
  width: 16px;
  height: 16px;
  background: var(--surface-warm);
  border-left: 1px solid var(--border-warm);
  border-top: 1px solid var(--border-warm);
  transform: rotate(45deg);
}

/* Variant that sits on its own row, centred under both columns and
   stretched wide enough to hold the line in two. The arrow sits over
   to the right so it points up into the tools list above it. */
.bubble--center {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: start;
  margin-top: 0;
  width: 100%;
  max-width: 720px;
  text-align: center;
}

/* Split the two lines evenly rather than leaving a short second one. */
.bubble--center .bubble__text { text-wrap: balance; }

.bubble--center::before {
  left: auto;
  right: 56px;
}

.bubble__text {
  position: relative;
  font: 700 19.5px/1.4 var(--font-display);
  color: var(--navy);
}


/* -------------------------------------------------------------
   8. Stats band
   ------------------------------------------------------------- */
.stats {
  background: var(--navy);
  color: #fff;
}

.stats .wrap {
  padding-top: 84px;
  padding-bottom: 84px;
}

.stats__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
}

.stats__title {
  font: 700 32px/1.2 var(--font-display);
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: 16px;
}

.stats__copy {
  font: 400 20.5px/1.55 var(--font-body);
  color: rgba(255, 255, 255, .8);
}

/* Plain strongs stay white on the navy band; an .accent one keeps its orange. */
.stats__copy strong:not(.accent) { color: #fff; }

/* ---- Aging in place ---- */
.athome {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 56px;
  align-items: center;
}

/* Orange rule down the side marks this out as a highlighted stat
   without implying the sentence is a verbatim quotation. */
.athome__copy {
  border-left: 4px solid var(--orange);
  padding-left: 24px;
  font: 400 20.5px/1.55 var(--font-body);
  color: rgba(255, 255, 255, .8);
}

.athome__tie {
  margin-top: 18px;
  padding-left: 28px;
  font: 400 18px/1.6 var(--font-body);
  color: rgba(255, 255, 255, .62);
}

.donut {
  max-width: 230px;
  margin: 0 auto;
  text-align: center;
}

.donut svg {
  width: 100%;
  height: auto;
  display: block;
}

.donut__track {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 26;
}

/* 75% of the circle: circumference = 2 x pi x 76 = 477.5,
   so the drawn arc is 358.1 and the gap 119.4. */
.donut__arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 26;
  stroke-dasharray: 358.1 119.4;
}

.donut__figure {
  fill: #fff;
  font: 800 46px/1 var(--font-display);
  letter-spacing: -.02em;
  text-anchor: middle;
}

.donut__caption {
  margin-top: 16px;
  font: 400 16px/1.45 var(--font-body);
  color: rgba(255, 255, 255, .6);
}

/* Source lines for every figure in this band — centred so they read as
   covering the whole section, not just the left column. */
.stats__sources {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.stats__source {
  font: 400 14px/1.5 var(--font-body);
  color: rgba(255, 255, 255, .55);
}

.stats__source em { font-style: italic; }

/* ---- 1-in-5 pictogram ---- */
.pictogram {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pictogram__people {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.pictogram__figure {
  font: 800 40px/1.05 var(--font-display);
  letter-spacing: -.01em;
  color: var(--orange);
}

.pictogram__caption {
  font: 400 18.5px/1.4 var(--font-body);
  color: rgba(255, 255, 255, .75);
  margin-top: 6px;
}

/* ---- 65-and-over population bar chart ---- */
.popchart {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 14px;
  align-items: stretch;
  margin-top: 30px;
}

.popchart__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 260px;
  font: 600 15px/1 var(--font-body);
  color: rgba(255, 255, 255, .55);
  text-align: right;
}

.popchart__plot {
  position: relative;
  height: 260px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.popchart__gridlines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.popchart__gridlines > span { border-top: 1px solid rgba(255, 255, 255, .14); }

/* Says what the bars count, since the axis is only numbers */
.popchart__series {
  position: absolute;
  left: 4px;
  top: 2px;
  font: 600 14.5px/1.3 var(--font-body);
  color: rgba(255, 255, 255, .6);
}

.popchart__bars {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: end;
  padding: 0 48px;
}

/* Bar height comes from the inline --h value in index.html */
.popchart__bar {
  height: var(--h);
  background: rgba(255, 255, 255, .22);
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font: 700 22px/1 var(--font-display);
  color: #fff;
}

.popchart__bar--high {
  background: var(--orange);
  padding-top: 12px;
  font-size: 26px;
}

/* Trend arrow, drawn over the plot and clearing both bar tops. The
   viewBox is stretched to whatever width the plot has, so the strokes
   are held at a constant weight rather than stretching with it. */
.popchart__trend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.popchart__trend path,
.popchart__trend polyline { vector-effect: non-scaling-stroke; }

.popchart__labels {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding: 12px 48px 0;
  text-align: center;
}

.popchart__pill {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--pill);
  padding: 5px 12px;
  font: 600 15px/1 var(--font-body);
  color: rgba(255, 255, 255, .85);
}


/* -------------------------------------------------------------
   9. Who we serve
   ------------------------------------------------------------- */
.serve .wrap {
  padding-top: 64px;
  padding-bottom: 0;
}

.serve__box {
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface-gray);
  border: 1px solid var(--border-blue);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 36px 40px;
}

.serve__title {
  font: 700 26px/1.25 var(--font-display);
  letter-spacing: -.015em;
  color: var(--navy);
  margin-bottom: 12px;
}

.serve__copy {
  font: 400 20.5px/1.55 var(--font-body);
  color: var(--muted);
}


/* -------------------------------------------------------------
   10. Testimonials
   ------------------------------------------------------------- */
.quotes .wrap {
  padding-top: 72px;
  padding-bottom: 0;
}

.quotes__title {
  font: 700 32px/1.22 var(--font-display);
  letter-spacing: -.015em;
  color: var(--navy);
  text-align: center;
  margin-bottom: 36px;
}

.quotes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Orange outline so the quotes read as a distinct block rather than
   dissolving into the white page. */
.quote {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: 28px 30px;
}

/* The provider quote runs the full width under the two member cards and
   lays out sideways: label across the top, quote left, attribution right
   against a vertical rule. Wider and shorter than the cards above, so it
   reads as a different kind of endorsement rather than a third member. */
.quote--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16em);
  column-gap: 34px;
  align-items: center;
  padding: 24px 30px 26px;
}

.quote--wide .quote__label {
  grid-column: 1 / -1;
  margin-bottom: 12px;
}

.quote--wide .quote__text {
  font-size: 18px;
  margin-bottom: 0;
}

.quote--wide .quote__by {
  margin-top: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 0;
  padding-left: 30px;
  border-top: none;
  border-left: 1px solid var(--border-warm);
}

.quote__label {
  font: 700 14px/1.3 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

/* Floated so the quote wraps around it — a large opening mark without
   costing a whole line of height. */
.quote__mark {
  float: left;
  margin: 4px 12px 0 0;
}

.quote__text {
  font: 400 19px/1.6 var(--font-body);
  color: var(--text);
  margin-bottom: 24px;
}

/* Contain the float so a short quote can't push the mark past the text */
.quote__text::after {
  content: '';
  display: block;
  clear: both;
}

/* margin-top:auto pins the attribution to the card floor, so the two
   rules line up even though the quotes are different lengths. */
.quote__by {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding-top: 20px;
  border-top: 1px solid var(--border-warm);
}

.quote__name {
  font: 700 19px/1.3 var(--font-display);
  color: var(--navy);
}

.quote__meta {
  font: 400 18px/1.3 var(--font-body);
  color: var(--muted-soft);
}


/* -------------------------------------------------------------
   11. "All plans are" chips
   ------------------------------------------------------------- */
.chips .wrap {
  padding-top: 80px;
  padding-bottom: 80px;
}

.chips__title {
  font: 700 32px/1.2 var(--font-display);
  letter-spacing: -.015em;
  color: var(--navy);
  text-align: center;
  margin-bottom: 32px;
}

.chips__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.chip {
  border: 1px solid var(--border-blue);
  border-radius: var(--radius);
  padding: 30px 28px;
  text-align: center;
  font: 700 22px/1.3 var(--font-display);
  color: var(--navy);
}

.chip--warn {
  border-color: var(--border-chip);
  background: var(--surface-warm);
  color: var(--orange);
}


/* -------------------------------------------------------------
   12. Core values (orange band)
   ------------------------------------------------------------- */
.values { background: var(--orange); }

.values .wrap {
  padding-top: 84px;
  padding-bottom: 84px;
}

.values__head {
  text-align: center;
  max-width: 36em;
  margin: 0 auto 40px;
}

.values__eyebrow {
  font: 600 16px/1 var(--font-body);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 18px;
}

.values__title {
  font: 700 42px/1.15 var(--font-display);
  letter-spacing: -.018em;
  color: #fff;
  margin-bottom: 16px;
}

.values__intro {
  font: 400 20px/1.5 var(--font-body);
  color: var(--navy);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.value__icon {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.value__name {
  font: 700 21px/1.25 var(--font-display);
  color: #fff;
  margin-bottom: 8px;
}

.value__body {
  font: 400 17px/1.5 var(--font-body);
  color: var(--navy);
}


/* -------------------------------------------------------------
   12b. Who we are
   ------------------------------------------------------------- */
.about { background: var(--surface-gray); }

.about .wrap {
  padding-top: 88px;
  padding-bottom: 88px;
}

.about__inner {
  max-width: 900px;
  margin: 0 auto;
}

.about__head {
  text-align: center;
  margin-bottom: 40px;
}

.about__eyebrow {
  font: 600 16px/1 var(--font-body);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}

.about__title {
  font: 700 40px/1.16 var(--font-display);
  letter-spacing: -.017em;
  color: var(--navy);
  margin-bottom: 18px;
}

.about__lede {
  font: 400 22px/1.5 var(--font-body);
  color: var(--muted);
  max-width: 30em;
  margin: 0 auto;
}

.about__copy {
  font: 400 19px/1.65 var(--font-body);
  color: var(--muted);
}

.about__copy + .about__copy { margin-top: 18px; }

/* Bold defaults to navy; .accent overrides it back to orange. */
.about__copy strong { color: var(--navy); }
.about__copy .accent,
.about__lede .accent { color: var(--orange); }

/* ---- The four things members want ---- */
.about__wants {
  margin-top: 40px;
  background: var(--white);
  border: 1px solid var(--border-blue);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 32px 36px;
}

.about__wants-intro {
  font: 400 19.5px/1.6 var(--font-body);
  color: var(--text);
  margin-bottom: 22px;
}

.about__wants-intro strong { color: var(--navy); }
.about__wants-intro .accent { color: var(--orange); }

.wants {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.want {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font: 400 19px/1.5 var(--font-body);
  color: var(--muted);
}

/* Outlined orange box, matching the "checks all the boxes" treatment
   on the enrollment site so the brand reads consistently. */
.want__check {
  width: 30px;
  height: 30px;
  flex: none;
  margin-top: 1px;
  border: 2px solid var(--orange);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.want strong { color: var(--navy); }
.want .accent { color: var(--orange); }


/* -------------------------------------------------------------
   13. Contact form
   ------------------------------------------------------------- */
.contact {
  background: #fff;
  border-top: 1px solid var(--border-faint);
}

.contact .wrap {
  max-width: 720px;
  padding-top: 84px;
  padding-bottom: 84px;
}

.contact__title {
  font: 700 40px/1.16 var(--font-display);
  letter-spacing: -.017em;
  color: var(--navy);
  text-align: center;
  margin-bottom: 14px;
}

.contact__intro {
  font: 400 20.5px/1.55 var(--font-body);
  color: var(--muted);
  text-align: center;
  margin-bottom: 36px;
}

.contact__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.field { margin-bottom: 18px; }
.field-row .field { margin-bottom: 0; }

.field__label {
  display: block;
  font: 600 15px/1.4 var(--font-body);
  color: #141a20;
  margin-bottom: 8px;
}

.field__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font: 400 17px/1.4 var(--font-body);
  color: #141a20;
  background: #fff;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-field);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field__textarea {
  width: 100%;
  padding: 12px 14px;
  font: 400 18px/1.5 var(--font-body);
  color: var(--text);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-field);
  resize: vertical;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Native select chrome varies a lot between browsers, so the arrow is
   drawn here as a background SVG and the control is styled to match
   .field__input. padding-right keeps long option text off the arrow. */
.field__select {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 14px;
  font: 400 17px/1.4 var(--font-body);
  color: #141a20;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23181F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-field);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The unchosen placeholder reads as placeholder text, not as an answer */
.field__select:has(option[value=""]:checked) { color: #6b7686; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.field--message { margin-bottom: 22px; }

.field--message .field__label {
  font-size: 16px;
  color: var(--text);
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 24px;
  cursor: pointer;
}

.consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--orange);
}

.consent span {
  font: 400 16.5px/1.5 var(--font-body);
  color: var(--muted-soft);
}

/* Shown after submit, in place of the form */
.contact__thanks {
  background: #fff;
  border: 1px solid #c2e6d0;
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}

.contact__thanks-title {
  font: 700 24px/1.3 var(--font-display);
  color: var(--green);
  margin-bottom: 10px;
}

.contact__thanks-copy {
  font: 400 19px/1.5 var(--font-body);
  color: var(--muted);
}

.form-error {
  font: 600 16.5px/1.45 var(--font-body);
  color: #9d2c1a;
  margin: 0 0 14px;
}

[hidden] { display: none !important; }


/* -------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------- */
.site-footer {
  background: var(--navy-footer);
  color: rgba(255, 255, 255, .6);
}

.site-footer .wrap {
  padding-top: 52px;
  padding-bottom: 44px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.site-footer__logo { height: 52px; width: auto; }

.site-footer__email {
  font: 600 17px/1 var(--font-body);
  color: rgba(255, 255, 255, .82);
}

.site-footer__links {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font: 400 15.5px/1 var(--font-body);
}

.site-footer__links a { color: rgba(255, 255, 255, .7); }
.site-footer__links a:hover { color: var(--orange); }
.site-footer__sep { color: rgba(255, 255, 255, .3); }

.site-footer__legal {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font: 400 15px/1.55 var(--font-body);
}

.site-footer__disclaimer {
  font: 600 15.5px/1.5 var(--font-body);
  color: rgba(255, 255, 255, .85);
}


/* -------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------- */
@media (max-width: 960px) {
  :root { --gutter: 22px; }

  body { font-size: 18px; }

  .split,
  .stats__grid,
  .chips__grid,
  .quotes__grid,
  .athome {
    grid-template-columns: minmax(0, 1fr);
  }

  .split {
    gap: 36px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Keep the photo above the copy in every band, including the
     one that reverses on desktop. */
  .split--reverse .split__media { order: -1; }

  .photo { height: 280px; }

  .hero { min-height: 480px; }
  .hero__inner { padding-top: 64px; padding-bottom: 64px; }
  .hero__title { font-size: 36px; line-height: 1.12; }
  .hero__lede { font-size: 22px; }

  /* The wash needs to be heavier when the text sits over the
     middle of the photo rather than its left edge. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(24, 31, 77, .84) 0%,
      rgba(24, 31, 77, .78) 100%);
  }

  .section-title,
  .hub__section-title,
  .contact__title { font-size: 30px; }

  .hub__title { font-size: 24px; }

  .stats .wrap,
  .chips .wrap,
  .values .wrap,
  .about .wrap,
  .contact .wrap { padding-top: 56px; padding-bottom: 56px; }

  .about__title { font-size: 28px; line-height: 1.15; }
  .about__lede { font-size: 20px; }
  .about__copy,
  .about__wants-intro,
  .want { font-size: 18px; }
  .about__head { margin-bottom: 30px; }
  .about__wants { padding: 24px 22px; }

  .stats__grid { gap: 48px; }
  .stats__sources { margin-top: 32px; }
  .stats__source { font-size: 13.5px; }
  .athome { margin-top: 44px; padding-top: 36px; gap: 32px; }
  .athome__copy { font-size: 18px; padding-left: 18px; }
  .athome__tie { font-size: 17px; padding-left: 22px; }
  .donut { max-width: 190px; }
  .stats__title,
  .chips__title { font-size: 26px; }
  .values__title { font-size: 32px; }
  .quotes__title { font-size: 26px; margin-bottom: 26px; }

  /* One column here, so the wide card loses its sideways layout and
     behaves like the member cards again. */
  .quote--wide {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
  }
  .quote--wide .quote__text { margin-bottom: 24px; }
  .quote--wide .quote__by {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid var(--border-warm);
    border-left: none;
  }

  .serve__box { padding: 26px 24px; }
  .quote { padding: 24px 22px; }
  .quote__text { font-size: 18px; }
  .contact__card { padding: 26px 22px; }

  .pictogram__people svg { width: 34px; height: 78px; }
}

@media (max-width: 560px) {
  .site-header__logo { height: 44px; }

  .hero__title { font-size: 30px; }
  .hero__lede { font-size: 20px; }

  .field__select { font-size: 16px; padding-right: 40px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .field-row .field { margin-bottom: 18px; }

  /* Padding and gap shrink together so the bar centres stay at roughly
     27% and 73% of the plot, where the trend arrow expects them. */
  .popchart { grid-template-columns: 44px minmax(0, 1fr); }
  .popchart__bars { gap: 28px; padding: 0 24px; }
  .popchart__labels { gap: 28px; padding-left: 24px; padding-right: 24px; }
  .popchart__bar { font-size: 18px; }
  .popchart__bar--high { font-size: 21px; }
  .popchart__series { font-size: 13.5px; }

  .site-footer__links { margin-left: 0; }
}


/* Five core values step down 5 -> 3 -> 2 -> 1 rather than snapping
   straight to a single very tall column. */
@media (max-width: 1080px) {
  .values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 700px) {
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 430px) {
  .values__grid { grid-template-columns: minmax(0, 1fr); }
}


/* -------------------------------------------------------------
   16. Print
   ------------------------------------------------------------- */
@media print {
  .site-header { position: static; }
  .btn { display: none; }
  section, footer, header { break-inside: avoid; page-break-inside: avoid; }
}


/* -------------------------------------------------------------
   14. Language picker
   ------------------------------------------------------------- */

/* Visible to screen readers only: the picker's label. */
.u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.langpick { display: flex; }

/* Native select chrome varies between browsers, so the chevron is drawn
   here as a background SVG, matching the contact form's selects. */
.langpick__select {
  height: 38px;
  padding: 0 34px 0 12px;
  font: 600 16px/1 var(--font-body);
  color: var(--navy);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 9' fill='none' stroke='%23181F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-field);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.langpick__select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}


/* -------------------------------------------------------------
   15. Chinese typography

   Poppins and Source Sans 3 carry no CJK glyphs, so Chinese would
   otherwise fall back to whatever each OS supplies and render
   inconsistently. js/app.js loads Noto Sans SC/TC on demand and puts
   .lang-cjk on <html>; these rules put it in front of the Latin
   families so Latin brand names inside Chinese copy still set in
   Poppins or Source Sans 3.
   ------------------------------------------------------------- */
.lang-cjk {
  --font-display: 'Poppins', 'Noto Sans SC', 'Noto Sans TC', 'PingFang SC',
                  'Microsoft YaHei', system-ui, sans-serif;
  --font-body:    'Source Sans 3', 'Noto Sans SC', 'Noto Sans TC', 'PingFang SC',
                  'Microsoft YaHei', system-ui, sans-serif;
}

/* Chinese has no spaces between words, so the browser can break a line
   almost anywhere. Keep headings from breaking mid-phrase, and stop the
   tight display sizes from setting too tightly to read. */
.lang-cjk .hero__title,
.lang-cjk .section-title,
.lang-cjk .stats__title,
.lang-cjk .values__title,
.lang-cjk .about__title,
.lang-cjk .quotes__title,
.lang-cjk .chips__title,
.lang-cjk .serve__title,
.lang-cjk .contact__title {
  letter-spacing: 0;
  line-height: 1.3;
  /* Chinese breaks between characters, which is correct and is the
     default. line-break: strict keeps closing punctuation off the start
     of a line. Do NOT use word-break: keep-all here: with no spaces to
     break on it makes the whole headline one unbreakable run, which
     overflows on a phone. */
  line-break: strict;
}

/* The hand-drawn underline is stretched to its text, and the Chinese
   phrase is far shorter than the English one, which left the squiggle
   looking cramped. A little inline padding gives it room to breathe. */
.lang-cjk .squiggle { padding-right: .12em; }

/* Translated labels, especially Spanish, outgrow one row beside the logo.
   The links take the next row, right-aligned, and the picker stays with
   the logo. */
@media (max-width: 760px) {
  .site-header__inner { flex-wrap: wrap; row-gap: 10px; }
  .langpick { margin-left: auto; }
  .site-header__nav {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    justify-content: flex-end;
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .site-header__inner { gap: 10px 12px; }
  .site-header__link { font-size: 16px; }
  .langpick__select {
    height: 34px;
    padding: 0 28px 0 10px;
    font-size: 15px;
    background-position: right 10px center;
  }
}

/* -------------------------------------------------------------
   Language curtain

   Changing language changes the copy and all four photographs at
   once. Swapping them in place read as a glitch however gently it
   was done, so a navy panel sweeps down over the page, the swap
   happens behind it, and it carries on out of the bottom. The page
   appears to reload rather than rearrange itself.
   ------------------------------------------------------------- */
.lang-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  transform: translateY(-100%);
  /* Never swallows a click, so a panel left behind by a failed swap
     could not trap the page. */
  pointer-events: none;
}

.lang-curtain__mark {
  width: 180px;
  height: auto;
  opacity: 0;
  transition: opacity 200ms ease 100ms;
}

/* Sweeping down to cover. */
.lang-curtain--on {
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}

.lang-curtain--on .lang-curtain__mark { opacity: 1; }

/* Carrying on downward and off, rather than retreating the way it came. */
.lang-curtain--off {
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(.4, 0, .2, 1);
}

.lang-curtain--off .lang-curtain__mark {
  opacity: 0;
  transition: opacity 140ms ease;
}

/* Anyone who has asked for less motion gets the plain swap instead. */
@media (prefers-reduced-motion: reduce) {
  .lang-curtain { display: none; }
}

/* A narrow screen does not need a 180px mark. */
@media (max-width: 560px) {
  .lang-curtain__mark { width: 130px; }
}