/* =========================================================
   Medical Lien Management — About Us page
   ========================================================= */

/* ---------- Fonts ---------- */
/* Poppins is the site-wide face. These mirror the @font-face block in
   home-critical-*-final.css, pointing at the same self-hosted files, so the
   About Us page matches the rest of the site without a second download. */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/site/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/site/fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/site/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/site/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --color-primary: #0888A7;
  --color-primary-dark: #066a83;
  --color-footer: #11778E;
  --color-dark: #1A1A1A;
  --color-text: #575757;
  --color-text-light: #7A7D7F;
  --color-nav-text: #212529;
  --color-card-light: #F2FAFC;
  --color-stats-bg: #C9DCE9;
  --color-hero-bg-start: #D3E9F4;
  --color-white: #ffffff;
  --color-border: #DCE7ED;

  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;

  --container-max: 1320px;
  --gutter: clamp(20px, 4vw, 70px);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(20, 60, 80, 0.08);
  --shadow-md: 0 10px 30px rgba(20, 60, 80, 0.12);

  --transition: 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  /* The page never set a heading weight, so it fell through to the browser's
     bold (700). The rest of the site heads its sections at Poppins 600 -- the
     dominant weight on the home and service pages -- so state it explicitly. */
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.15;
}

p {
  margin: 0;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

address {
  font-style: normal;
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

:focus-visible {
  outline: 3px solid #ffb703;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

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

/* ---------- Buttons & pills ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.btn-outline {
  background: #eaf6fa;
  color: var(--color-primary);
  border: 1px solid #bfe0ea;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: #dbeef4;
  transform: translateY(-2px);
}

.btn-outline-dark {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.cta-bar {
  display: block;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  padding: 18px;
  border-radius: var(--radius-sm);
  margin-top: 28px;
  transition: background var(--transition);
}

.cta-bar:hover,
.cta-bar:focus-visible {
  background: var(--color-primary-dark);
}

/* ---------- Section headings ---------- */
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 48px;
}

.section-title.light {
  color: #fff;
}

.text-accent {
  color: var(--color-primary);
}

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

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: linear-gradient(120deg, var(--color-hero-bg-start), #eef7fb 55%, #ffffff);
  padding-block: clamp(40px, 6vw, 80px) clamp(60px, 8vw, 110px);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  color: var(--color-primary);
  margin-bottom: 22px;
}

.hero-copy p {
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-media {
  position: relative;
}

.hero-media img {
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-media-accent {
  position: absolute;
  left: 24px;
  right: -24px;
  bottom: -24px;
  height: 60%;
  background: linear-gradient(135deg, #8fc9db, #5aa9c2);
  border-radius: var(--radius-lg);
  z-index: 1;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-media {
    order: -1;
  }

  .hero-copy p {
    max-width: none;
  }
}

/* =========================================================
   CALIFORNIA PARTNER SECTION
   ========================================================= */
.partner-section {
  padding-block: clamp(50px, 7vw, 100px);
}

.partner-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.partner-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 22px;
  /* The heading used to carry a hard <br>, which left a ragged gap beside the
     second line. Letting it wrap on its own and balancing the lines keeps the
     two rows even at every width. */
  text-wrap: balance;
}

.partner-copy p {
  margin-bottom: 18px;
}

/* Direct children only. The mini-cards below sit inside .partner-copy, and
   justifying their two- and three-word lines stretches the word spacing. */
.partner-copy > p {
  text-align: justify;
}

.partner-media {
  height: 100%;
}

/* Fill the column height and crop, rather than sitting short beside the copy. */
.partner-media img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-width rows rather than three columns. With the icon beside the text a
   third of the copy column is too narrow for these labels - they broke to one
   or two words a line and left the cards at wildly different heights. */
.mini-card-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 30px;
}

.mini-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-card-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 11px;
}

.mini-badge svg {
  width: 21px;
  height: 21px;
}

.mini-card p {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 900px) {
  .partner-grid {
    grid-template-columns: 1fr;
  }

  .partner-media {
    order: -1;
  }
}

@media (max-width: 480px) {
  .mini-card p {
    font-size: 0.9rem;
  }
}

/* =========================================================
   MISSION / VISION
   ========================================================= */
.mission-vision-section {
  padding-block: clamp(20px, 4vw, 40px) clamp(50px, 7vw, 90px);
}

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.mv-card {
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.mv-mission {
  background-size: cover;
  background-position: center;
  color: #fff;
}

.mv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 14, 0.6);
}

.mv-vision {
  background: linear-gradient(135deg, var(--color-primary), #0a6f8c);
  color: #fff;
}

.mv-vision::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.mv-content {
  position: relative;
  z-index: 2;
}

.mv-card h2 {
  color: #fff;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  margin-bottom: 16px;
}

.mv-card p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
}

@media (max-width: 800px) {
  .mv-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   WHY CHOOSE
   ========================================================= */
.why-choose-section {
  background: linear-gradient(160deg, var(--color-primary), #0a7692);
  padding-block: clamp(50px, 7vw, 90px);
  color: #fff;
}

.why-choose-visual {
  position: relative;
  padding-top: 60px;
}

.why-ribbon {
  position: absolute;
  top: 70px;
  left: 8%;
  width: 46%;
  height: 60px;
  background: linear-gradient(100deg, rgba(6, 90, 110, 0.75), rgba(6, 90, 110, 0));
  transform: rotate(-4deg);
  border-radius: 30px;
  z-index: 0;
  display: none;
}

.why-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: none;
}

.why-curve-arrows path {
  fill: rgba(255, 255, 255, 0.7);
}

/* Above .why-curve, so the connector starts hidden behind the portrait and
   appears to come out of its centre. */
.why-portrait {
  position: relative;
  z-index: 3;
}

.quote-portrait {
  margin: 0 auto 50px;
  width: clamp(190px, 20vw, 240px);
  aspect-ratio: 466 / 688;
  position: relative;
  z-index: 3;
  padding: 8px;
}

.quote-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(50.00% 4.00%, 61.74% 13.86%, 77.04% 12.79%, 80.74% 27.66%, 93.75% 35.79%, 88.00% 50.00%, 93.75% 64.21%, 80.74% 72.34%, 77.04% 87.21%, 61.74% 86.14%, 50.00% 96.00%, 38.26% 86.14%, 22.96% 87.21%, 19.26% 72.34%, 6.25% 64.21%, 12.00% 50.00%, 6.25% 35.79%, 19.26% 27.66%, 22.96% 12.79%, 38.26% 13.86%);
}

.quote-portrait-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50.00% 4.00%, 61.74% 13.86%, 77.04% 12.79%, 80.74% 27.66%, 93.75% 35.79%, 88.00% 50.00%, 93.75% 64.21%, 80.74% 72.34%, 77.04% 87.21%, 61.74% 86.14%, 50.00% 96.00%, 38.26% 86.14%, 22.96% 87.21%, 19.26% 72.34%, 6.25% 64.21%, 12.00% 50.00%, 6.25% 35.79%, 19.26% 27.66%, 22.96% 12.79%, 38.26% 13.86%);
}

.quote-mark {
  position: absolute;
  color: rgba(255, 255, 255, 0.55);
  z-index: 4;
}

.quote-mark-open {
  top: -14px;
  left: -38px;
}

.quote-mark-close {
  bottom: -6px;
  right: -38px;
  transform: rotate(180deg);
}

.why-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
  position: relative;
  z-index: 2;
}

.why-item {
  text-align: center;
}

.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.why-icon img {
  width: 28px;
  height: 28px;
}

.why-item h3 {
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.why-item p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  max-width: 26ch;
  margin-inline: auto;
}

@media (min-width: 901px) {
  /* Eight half-columns so the second row of three can be centred against the
     first row of four. Placing them in columns 2/3/4 of a 4-column grid left
     the row visibly off to the right with a hole at bottom-left. Each item
     spans two half-columns; the trailing three start half a column in.
     drawWhyCurve() measures the icons at runtime, so the connector re-flows
     to match without any change to the path maths. */
  .why-list {
    grid-template-columns: repeat(8, 1fr);
  }

  .why-item {
    grid-column: span 2;
  }

  .why-item:nth-child(5) {
    grid-column: 2 / span 2;
  }

  .why-item:nth-child(6) {
    grid-column: 4 / span 2;
  }

  .why-item:nth-child(7) {
    grid-column: 6 / span 2;
  }

  /* Inset the grid so the connector's end caps have a lane to loop through
     without crossing the labels. */
  .why-list {
    padding-inline: 7%;
  }

  .why-curve {
    display: block;
  }

  .why-ribbon {
    display: block;
  }
}

@media (max-width: 900px) {
  .why-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 20px;
  }
}

@media (max-width: 540px) {
  .why-list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   WHAT WE STAND FOR
   ========================================================= */
.stand-for-section {
  padding-block: clamp(50px, 7vw, 90px);
}

.stand-for-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Wider row gap than column gap: the icon badge overhangs each card's top
     edge by half its height, and needs clearance from the row above. */
  gap: 46px 24px;
  /* The Figma frame runs this grid narrower than the page container, which
     keeps each card's copy to a short centred measure instead of one long
     line edge to edge. */
  max-width: 1040px;
  margin-inline: auto;
}

.value-card {
  background: var(--color-card-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  /* Anchors the icon badge, which straddles the card's top edge. */
  position: relative;
}

/* The badge is absent until the card is hovered, then it rises into place over
   the top edge. Sized and coloured after the stand-for-grid Figma frame:
   a teal rounded square with the glyph knocked out in white. */
.value-icon {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary);
  box-shadow: 0 6px 16px rgba(8, 136, 167, 0.35);
  opacity: 0;
  /* Sits lower and smaller at rest so it travels up into position. */
  transform: translate(-50%, -20%) scale(0.8);
  transition:
    opacity 0.28s var(--reveal-ease),
    transform 0.28s var(--reveal-ease);
  pointer-events: none;
}

.value-icon img {
  width: 26px;
  height: 26px;
  /* The source PNGs are teal glyphs on transparent; this knocks them out to
     white so they read against the teal badge. */
  filter: brightness(0) invert(1);
}

.value-card:hover .value-icon,
.value-card:focus-within .value-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.value-card h3 {
  color: var(--color-primary);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.value-card p {
  font-size: 0.95rem;
}

@media (max-width: 800px) {
  .stand-for-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .stand-for-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   WHAT WE DO
   ========================================================= */
.what-we-do-section {
  background: linear-gradient(90deg, #B5DAEC, #ffffff, #B5DAEC);
  padding-block: clamp(50px, 7vw, 90px);
}

.wwd-grid {
  display: grid;
  /* Wider centre column than before: in the reference the illustration is the
     dominant element and the copy sits in narrow blocks either side of it. */
  grid-template-columns: 1fr minmax(260px, 400px) 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 60px;
}

.wwd-col {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Each block is a fixed narrow measure rather than the full column width, so
   the rules above them come out a consistent length and the descriptions wrap
   over two or three lines as they do in the reference. The columns then pull
   their blocks in towards the illustration, and the nth-child offsets in the
   page's own <style> step them back out again down the column. */
.wwd-col-left {
  align-items: flex-end;
}

.wwd-col-right {
  align-items: flex-start;
}

.wwd-item {
  position: relative;
  padding-top: 16px;
  width: 100%;
  max-width: 250px;
}

.wwd-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-nav-text);
}

/* The dot caps the *outer* end of each rule -- left of the line on the left
   side, right of it on the right -- so the pair of columns mirror each other
   and the open ends face the illustration. */
.wwd-item::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}

.wwd-col-right .wwd-item {
  text-align: right;
  padding-right: 0;
}

.wwd-col-right .wwd-item::before {
  left: auto;
  right: 0;
}

.wwd-col-right .wwd-item::after {
  left: auto;
  right: 0;
}

.wwd-item h3 {
  color: var(--color-primary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.wwd-item p {
  font-size: 0.85rem;
}

.wwd-media img {
  border-radius: var(--radius-md);
}

@media (max-width: 900px) {
  .wwd-grid {
    grid-template-columns: 1fr;
  }

  .wwd-media {
    order: -1;
    max-width: 320px;
    margin-inline: auto;
  }

  /* Stacked, there is no illustration between the columns to mirror around, so
     both read left-to-right with the dot starting every rule. */
  .wwd-col-left,
  .wwd-col-right {
    align-items: stretch;
  }

  .wwd-col-right .wwd-item,
  .wwd-col-left .wwd-item {
    text-align: left;
    padding-right: 0;
    max-width: none;
  }

  .wwd-col-right .wwd-item::before {
    left: 0;
    right: auto;
  }

  .wwd-col-right .wwd-item::after {
    left: 0;
    right: auto;
  }
}


/* Centres itself: `main` is not a grid, so the section has to do this with
   auto margins rather than justify-self. The gutter and max-width keep the
   band inside the viewport now that it sits outside a .container. */
.stats-band-section {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.stats-band {

  margin-top: -50px;
  background-color: var(--color-stats-bg);
  border-radius: var(--radius-lg);
  padding: 34px clamp(20px, 4vw, 50px);
  position: relative;
}

.stats-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--color-primary);
}

.stat-label {
  display: block;
  font-weight: 600;
  color: #4b4b4b;
  font-size: 0.85rem;
  margin-top: 6px;
}

@media (max-width: 800px) {
  .stats-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   HOW WE RECOVER YOUR REVENUE
   ========================================================= */
.revenue-section {
  /* Tighter than the other sections: the timeline already carries a lot of
     internal whitespace between the curve and the copy hung off it, so the
     section's own padding does not need to add much. */
  padding-block: clamp(40px, 4.5vw, 64px);
  position: relative;
  overflow: hidden;
}

.revenue-section::before {
      content: "";
    position: absolute;
    inset: 0 0 90px 0;
    background-image: url(../assets/images/california-map-watermark.png);
    background-repeat: no-repeat;
    background-position: right 70px top -70px;
    opacity: 0.2;
    z-index: 0;
}

.revenue-section>.container {
  position: relative;
  z-index: 1;
}

.timeline-wrap {
  position: relative;
  height: clamp(320px, 34vw, 430px);
  margin-top: 20px;
  /* The steps are absolutely positioned and the lowest one hangs well below
     the wrap, so this is what keeps the copy off the button underneath. */
  margin-bottom: 140px;
}

/* Wavy connector. The line runs the full viewport width, breaking out of the
   container by centring itself on the wrap and stretching to 100vw. Every step
   is then pinned to a point on that artwork with calc(50% + Nvw), so the dots
   stay on the line at any width -- see the step rules below. */
.timeline-curve {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-image: url(../assets/images/curve-line.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

.timeline {
  position: static;
}

.timeline-step {
  position: absolute;
  z-index: 2;
  /* 16% ran the descriptions to three and four lines. The reference keeps them
     to two, which needs roughly a fifth of the wrap. Neighbouring boxes do
     overlap horizontally at this width, as they do in the frame -- the curve
     separates them vertically, so the copy never actually collides. */
  width: 20%;
  min-width: 160px;
  padding-top: 32px;
  text-align: left;
  transform: translateX(-12px);
}

/* Horizontal stops are measured along the curve, which is now the viewport
   rather than the wrap: 50% is the wrap's centre (and so the curve's), and the
   vw offset walks out to the sampled point. The fractions are the old
   wrap-relative percentages re-mapped through the 120%/-10% geometry the
   artwork used to sit in, so the dots land where they always did. Verticals are
   unchanged -- the curve is still exactly as tall as the wrap. */
.timeline-step.step-1 {
  left: calc(50% - 36vw);
  top: 66.5%;
}

.timeline-step.step-2 {
  left: calc(50% - 20vw);
  top: 80.8%;
}

.timeline-step.step-3 {
  left: calc(50% - 8vw);
  top: 66.6%;
}

.timeline-step.step-4 {
  left: calc(50% + 6.67vw);
  top: 64.6%;
}

.timeline-step.step-5 {
  left: calc(50% + 18vw);
  top: 45.5%;
}

.timeline-step.step-6 {
  left: calc(50% + 28vw);
  top: 25.1%;
}

/* Every other step hangs below its dot. The reference sits Consultation above
   the line instead -- the curve is already near the bottom of the section
   there, so copy underneath would run out of room. Only while the steps are
   pinned to the curve; stacked, they all read the same way. */
@media (min-width: 901px) {
  .timeline-step.step-1 {
    padding-top: 0;
    padding-bottom: 32px;
    /* top: 63.5% marks the point on the curve. Pulling the box up by its own
       height puts its bottom edge -- and so the dot -- on that same point,
       with the text stacked above. */
    transform: translate(-12px, -100%);
  }

  .timeline-step.step-1 .timeline-dot {
    top: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
}

.timeline-dot {
  position: absolute;
  top: 0;
  left: 12px;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef1f3;
  border: 4px solid #fff;
  box-shadow: 0 2px 6px rgba(20, 40, 50, 0.25);
}

.timeline-step h3 {
  color: var(--color-nav-text);
  font-size: 1rem;
  margin-bottom: 8px;
}

.timeline-step p {
  font-size: 0.85rem;
}

/* The reference runs these step labels at roughly 1.8x the description beneath
   them -- much heavier than the rest of the page's h3. At this size the longer
   labels wrap onto two lines, which is how the frame sets them. Wide desktops
   only; below 1200px the steps sit too close to carry type this large. */
@media (min-width: 1201px) {
  .timeline-step h3 {
    font-size: 1.55rem;
  }

}

/* The steps are pinned at percentages sampled off the curve artwork, so the
   horizontal gap to the next one differs at every stop. A single box width
   therefore overruns its neighbour in the tight stretches. Each is capped just
   under its own gap instead: 19.2, 14.4, 17.6, 13.6 and 12 points between
   successive dots, with the last free to run to the edge. The gaps are
   percentages of the wrap, so these hold at every desktop width. */
@media (min-width: 901px) {
  .timeline-step.step-1 {
    width: 19%;
  }

  .timeline-step.step-2 {
    width: 14%;
  }

  .timeline-step.step-3 {
    width: 17%;
  }

  .timeline-step.step-4 {
    width: 13.5%;
  }

  .timeline-step.step-5 {
    width: 12%;
  }
}

/* Tighter type and narrower boxes on smaller desktops. The steps are pinned at
   fixed percentages, so the horizontal gap between neighbours shrinks with the
   viewport while the copy does not -- at the widths the reference is drawn for
   the boxes would run into each other here. */
@media (min-width: 901px) and (max-width: 1200px) {
  .timeline-step {
    width: 15%;
    min-width: 0;
  }

  .timeline-step h3 {
    font-size: 0.95rem;
  }

  .timeline-step p {
    font-size: 0.76rem;
  }
}

@media (max-width: 900px) {
  .revenue-section::before {
    display: none;
  }

  .timeline-curve {
    display: none;
  }

  .timeline-wrap {
    height: auto;
    margin-bottom: 0;
  }

  .timeline {
    display: flex;
    flex-direction: column;
    gap: 34px;
  }

  .timeline-step {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    min-width: 0;
    transform: none;
    text-align: left;
    padding-left: 40px;
    padding-top: 0;
  }

  .timeline-dot {
    top: 2px;
    left: 0;
    transform: none;
  }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials-section {
  background: linear-gradient(180deg, #e4f1f8, #ffffff);
  padding-block: clamp(50px, 7vw, 90px);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.testimonial-card {
  background: var(--color-card-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.testimonial-featured {
  background: linear-gradient(160deg, var(--color-primary), #095b74);
  color: #fff;
  overflow: hidden;
}

.testimonial-featured p,
.testimonial-featured .author-clinic {
  color: rgba(255, 255, 255, 0.92);
}

.testimonial-quote-mark {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(255, 255, 255, 0.3);
}

.stars {
  color: var(--color-primary);
  letter-spacing: 3px;
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.testimonial-featured .stars {
  color: #fff;
}

.testimonial-card p {
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 22px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The name and clinic are <p>, so they pick up the 22px margin .testimonial-card
   p sets for the quote copy. That splits the two lines apart and makes the block
   taller than the avatar, which then lines up with neither. They stack tight
   against each other instead, centred on the avatar. */
.testimonial-author p {
  margin-bottom: 0;
  line-height: 1.35;
}

.testimonial-author img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-weight: 700;
  color: var(--color-dark);
  font-size: 0.9rem;
}

.testimonial-featured .author-name {
  color: #fff;
}

.author-clinic {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BOTTOM CTA
   ========================================================= */
.bottom-cta-section {
  padding-block: clamp(40px, 6vw, 70px);
}

.bottom-cta-banner {
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 70px) clamp(24px, 6vw, 90px);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.bottom-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.68);
}

.bottom-cta-content {
  position: relative;
  z-index: 2;
}

.bottom-cta-content h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 18px;
}

.bottom-cta-content p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto 30px;
}

.bottom-cta-content .btn-row {
  justify-content: center;
}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   Every hidden-until-revealed state is gated behind .js-motion, which
   script.js puts on <html> before first paint. Without JS the page renders
   fully visible instead of a column of blank sections.
   ========================================================================== */

:root {
  --reveal-shift: 18px;
  --reveal-duration: 0.65s;
  --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-motion [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

/* Only the *pre-reveal* state declares a transform. Once .is-visible lands the
   element carries no transform declaration at all, so the hover rules further
   down win on their own specificity instead of losing to a more specific
   `transform: none`. (.timeline-step is excluded throughout: it uses transform
   for its placement on the curve, so it animates via translate instead.) */
.js-motion [data-reveal]:not(.is-visible):not(.timeline-step) {
  transform: translateY(var(--reveal-shift));
}

.js-motion [data-reveal="left"]:not(.is-visible) {
  transform: translateX(calc(var(--reveal-shift) * -1.6));
}

.js-motion [data-reveal="right"]:not(.is-visible) {
  transform: translateX(calc(var(--reveal-shift) * 1.6));
}

.js-motion [data-reveal="zoom"]:not(.is-visible) {
  transform: scale(0.96);
}

.js-motion [data-reveal].is-visible {
  opacity: 1;
  will-change: auto;
}

/* Children of a [data-stagger] container come in one after another. The index
   is set as --i by script.js so the delay survives any DOM reordering. */
.js-motion [data-stagger] > * {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ---------- Hover / focus interactions ---------- */

.hero-media img,
.partner-media img {
  transition: transform 0.5s var(--reveal-ease);
}

.hero-media:hover img,
.partner-media:hover img {
  transform: scale(1.03);
}

.mini-card {
  transition: transform var(--transition), box-shadow var(--transition),
    background var(--transition), border-color var(--transition);
}

.mini-card:hover {
  transform: translateY(-3px);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

.mini-card p {
  transition: color var(--transition);
}

.mini-card:hover p {
  color: var(--color-white);
}

.mini-card .mini-badge {
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.mini-card:hover .mini-badge {
  transform: scale(1.08);
  background: var(--color-white);
  color: var(--color-primary-dark);
}

.mv-card {
  transition: transform 0.4s var(--reveal-ease), box-shadow 0.4s var(--reveal-ease);
}

.mv-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.mv-card .mv-overlay {
  transition: opacity var(--transition);
}

.mv-card:hover .mv-overlay {
  opacity: 0.82;
}

.why-item {
  transition: transform 0.35s var(--reveal-ease);
}

.why-item:hover,
.why-item:focus-within {
  transform: translateY(-4px);
}

.why-icon {
  transition: transform 0.35s var(--reveal-ease), box-shadow 0.35s var(--reveal-ease);
}

.why-item:hover .why-icon,
.why-item:focus-within .why-icon {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.wwd-item {
  transition: transform var(--transition), color var(--transition);
}

.wwd-item:hover {
  transform: translateY(-3px);
}

.wwd-item:hover h3 {
  color: var(--color-primary);
}

.stats-list li {
  transition: transform var(--transition);
}

.stats-list li:hover {
  transform: translateY(-4px);
}

/* .timeline-step already uses transform: translateX(-12px) to sit on the
   curve, so its motion goes through the independent translate property --
   that composes with the positioning transform instead of replacing it. */
.timeline-step {
  transition: translate 0.35s var(--reveal-ease);
}

.timeline-step:hover {
  translate: 0 -4px;
}

.js-motion .timeline-step[data-reveal] {
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    translate var(--reveal-duration) var(--reveal-ease);
}

.js-motion .timeline-step[data-reveal]:not(.is-visible) {
  translate: 0 var(--reveal-shift);
}

.testimonial-card {
  transition: transform 0.4s var(--reveal-ease), box-shadow 0.4s var(--reveal-ease);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.testimonial-author img {
  transition: transform 0.4s var(--reveal-ease);
}

.testimonial-card:hover .testimonial-author img {
  transform: scale(1.08);
}

.bottom-cta-banner {
  transition: transform 0.5s var(--reveal-ease);
}

.bottom-cta-banner:hover {
  transform: translateY(-4px);
}

/* ---------- "Why Choose" connector draws itself ---------- */

.js-motion .why-curve-path {
  stroke-dasharray: var(--curve-length, 0);
  stroke-dashoffset: var(--curve-length, 0);
}

.js-motion .why-curve.is-drawn .why-curve-path {
  transition: stroke-dashoffset 1.6s ease-out;
  stroke-dashoffset: 0;
}

.js-motion .why-curve-arrows path {
  opacity: 0;
  transition: opacity 0.4s ease-out 1.2s;
}

.js-motion .why-curve.is-drawn .why-curve-arrows path {
  opacity: 1;
}

/* ---------- Timeline dot + heading light up on hover ---------- */

.timeline-dot {
  transition:
    background 0.3s var(--reveal-ease),
    scale 0.3s var(--reveal-ease),
    box-shadow 0.3s var(--reveal-ease);
}

.timeline-step h3 {
  transition: color 0.3s var(--reveal-ease);
}

.timeline-step:hover .timeline-dot,
.timeline-step:focus-within .timeline-dot {
  background: var(--color-primary);
  scale: 1.25;
  box-shadow: 0 4px 12px rgba(8, 136, 167, 0.45);
}

.timeline-step:hover h3,
.timeline-step:focus-within h3 {
  color: var(--color-primary);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

  /* Show everything outright rather than snapping it in at 0.001ms. */
  .js-motion [data-reveal],
  .js-motion [data-reveal].is-visible {
    opacity: 1;
  }

  .js-motion [data-reveal]:not(.is-visible):not(.timeline-step),
  .js-motion [data-reveal="left"]:not(.is-visible),
  .js-motion [data-reveal="right"]:not(.is-visible),
  .js-motion [data-reveal="zoom"]:not(.is-visible) {
    transform: none;
  }

  .js-motion .timeline-step[data-reveal]:not(.is-visible) {
    translate: 0;
  }

  .js-motion .why-curve-path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .js-motion .why-curve-arrows path {
    opacity: 1;
  }
}