/* =========================================================
   Tri-Star Healthcare Solutions — Site Stylesheet
   Palette:
     --navy       #10233F  (primary text / footer / header)
     --blue       #1E4B8C  (primary brand blue)
     --blue-light #2E6FCE  (links / hover)
     --white      #FFFFFF
     --gold       #C9A227  (accent)
     --red        #8B1D1D  (accent)
     --grey-bg    #F4F6F9  (section background)
     --charcoal   #15171C  (HIPAA card background)
   Type:
     Headings: 'Poppins'  |  Body: 'Inter'
   ========================================================= */

:root {
  --navy: #10233F;
  --blue: #1E4B8C;
  --blue-light: #2E6FCE;
  --white: #FFFFFF;
  --gold: #C9A227;
  --red: #8B1D1D;
  --grey-bg: #F4F6F9;
  --charcoal: #15171C;
  --grey-line: #E1E6EC;
  --text-muted: #55627A;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(16, 35, 63, 0.10);
  --max-w: 1200px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Inter', sans-serif;
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 700;
  color: var(--navy);
}

p { margin: 0 0 1em; color: var(--text-muted); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 120px 0; }
@media (max-width: 768px) { section { padding: 56px 0; } }

.eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--red);
  margin-bottom: 12px;
}

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: #b8931f; transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(201,162,39,.5); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-outline { border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); background: rgba(255,255,255,.18); }
.btn-solid-blue { background: var(--blue); color: var(--white); }
.btn-solid-blue:hover { background: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(16,35,63,.45); }
.btn-solid-blue:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
  border-bottom: 1px solid var(--grey-line);
}
.nav-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; border-radius: 8px; transition: transform .25s ease, filter .25s ease; filter: drop-shadow(0 2px 5px rgba(16,35,63,.1)); }
.brand img { height: 52px; width: auto; display: block; transition: filter .2s ease; }
.brand:hover, .brand:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 10px 18px rgba(16,35,63,.24)); }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (hover: none) { .brand:hover { transform: none; filter: drop-shadow(0 2px 5px rgba(16,35,63,.1)); } }

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links > li { position: relative; }
.nav-links a.top-link {
  display: block;
  padding: 10px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .95rem;
  color: var(--navy);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-links a.top-link:hover,
.nav-links li.active a.top-link { background: var(--grey-bg); color: var(--blue); }

.has-dropdown > a.top-link::after {
  content: '▾';
  margin-left: 5px;
  font-size: .7rem;
  color: var(--text-muted);
}
.dropdown-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--grey-line);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  list-style: none;
  margin: 0;
  box-sizing: border-box;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .9rem;
  color: var(--navy);
}
.dropdown a:hover { background: var(--grey-bg); color: var(--blue); }

/* Mega dropdown (Services) */
.dropdown.mega { min-width: 640px; max-width: min(680px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 18px; }
.dropdown.mega > li.mega-col { list-style: none; padding: 0 16px; }
.dropdown.mega > li.mega-col:not(:last-child) { border-right: 1px solid var(--grey-line); }
.dropdown.mega .mega-heading {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin: 4px 0 10px;
}
.dropdown.mega > li.mega-col > ul { list-style: none; margin: 0; padding: 0; }
.dropdown.mega a { display: block; padding: 8px 10px; border-radius: 6px; font-size: .87rem; color: var(--navy); }
.dropdown.mega a:hover { background: var(--grey-bg); color: var(--blue); }
.dropdown.mega .mega-view-all {
  display: block; margin-top: 10px; padding: 8px 10px 0; border-top: 1px dashed var(--grey-line);
  font-weight: 600; color: var(--blue);
}
@media (max-width: 980px) {
  .dropdown.mega { grid-template-columns: 1fr; min-width: 0; max-width: none; padding: 6px 4px; }
  .dropdown.mega > li.mega-col { padding: 10px 10px; }
  .dropdown.mega > li.mega-col:not(:last-child) { border-right: none; border-bottom: 1px solid var(--grey-line); }
}

.page-header .btn { margin-top: 22px; }

.nav-cta { margin-left: 8px; }
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span { width: 24px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: background .15s ease; }
.nav-toggle:hover span, .nav-toggle:active span { background: var(--blue); }
.dropdown-toggle:active { background: var(--grey-bg); border-radius: 6px; }

@media (max-width: 980px) {
  .nav-links { position: fixed; top: 82px; left: 0; right: 0; bottom: 0;
    background: var(--white); flex-direction: column; align-items: stretch;
    padding: 18px; gap: 2px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease; }
  .nav-links.open { transform: translateX(0); }
  .dropdown { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; display: none; margin-left: 12px; }
  .has-dropdown.open .dropdown { display: block; }
  .nav-cta { margin: 10px 0 0; }
  .nav-toggle { display: flex; }

  /* Services (and other dropdown) items: link navigates, chevron button toggles submenu */
  .has-dropdown { display: flex; align-items: center; flex-wrap: wrap; }
  .has-dropdown > a.top-link { flex: 1 1 auto; }
  .has-dropdown > a.top-link::after { display: none; }
  .has-dropdown > .dropdown { flex: 1 0 100%; }
  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
  }
  .dropdown-toggle::after {
    content: '▾';
    font-size: .8rem;
    color: var(--text-muted);
    transition: transform .2s ease;
  }
  .has-dropdown.open .dropdown-toggle::after { transform: rotate(180deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: url('../images/background.jpg') center 78% / cover no-repeat, var(--navy);
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 580px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,35,63,.15) 0%, rgba(16,35,63,.1) 35%, rgba(16,35,63,.55) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) {
  .hero { min-height: 480px; }
}
.hero-logo {
  max-width: min(560px, 82%);
  width: 100%;
  height: auto;
  margin: 0 auto 6px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.hero-tagline { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.95); margin: 0 0 40px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-tagline p { color: inherit; }

/* ---------- Who we are / two-col ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start; /* Ito ang magpapantay sa tuktok ng text at ng imahe */
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 36px; } }
.two-col.reverse .col-media { order: 2; }
.col-media {
  position: relative;
  display: flex;
  align-items: center;     /* Ginigitna ang image sa kalapit na text */
  justify-content: center;
}
.placeholder-art {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem;
  text-align: center; padding: 24px;
}
.placeholder-art.blue { background: linear-gradient(140deg, var(--blue) 0%, var(--navy) 100%); }
.placeholder-art.gold { background: linear-gradient(140deg, #E4C766 0%, var(--gold) 100%); color: var(--navy); }
.placeholder-art.red { background: linear-gradient(140deg, #B23A3A 0%, var(--red) 100%); }
.media-stack { display: grid; gap: 20px; }

/* Custom Blue Box Component para sa Kanan */
/* Styling para sa Larawan na may Shadow at Hover Effect */
.section-image {
  width: 100%;
  max-width: 450px;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
  align-self: center;        /* Pipilitin itong maging nasa gitna vertically */
  margin-bottom: 60px;       /* Papatayin ang pagdikit sa ibaba sa pamamagitan ng space */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  animation: section-image-float 3s ease-in-out infinite;
}

@keyframes section-image-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.section-image:hover {
  animation-play-state: paused;
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 20px 32px rgba(16, 35, 63, 0.28), 0 0 0 4px rgba(46, 111, 206, 0.2);
}

/* Quote na may Vertical Blue Line */
.quote-box {
  border-left: 4px solid var(--blue-light);
  padding-left: 16px;
  margin: 20px 0 0 0;
  font-style: italic;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 800px) { .card-grid { grid-template-columns: 1fr; } }
.info-card {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Only cards that actually link somewhere get lift/shadow feedback —
   plain informational cards (no .card-link) stay visually stable. */
.info-card:has(.card-link):hover {
  transform: translateY(-4px);
  border-color: rgba(201,162,39,.4);
  box-shadow: 0 16px 32px -16px rgba(16,35,63,.22);
}
.info-card .icon-badge { margin-bottom: 18px; }
/* Mission & Vision (home) and Our Commitment (about) — no links inside,
   but called out as a "this matters" moment, so they get the same
   elevated hover treatment as the linked cards. */
.mv-grid .info-card:hover,
.commitment-grid .info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,162,39,.4);
  box-shadow: 0 16px 32px -16px rgba(16,35,63,.22);
}

.icon-badge {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grey-bg);
  color: var(--blue);
}
.icon-badge svg { width: 26px; height: 26px; display: block; }

.card-link { display: inline-block; margin-top: 4px; color: var(--blue); font-weight: 600; font-size: .92rem; }
.card-link:hover { color: var(--navy); }
.tag-chip {
  display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--grey-bg);
  border: 1px solid var(--grey-line); font-size: .88rem; font-weight: 500; color: var(--navy);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }

/* Value / stat grid (About page) */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }
.value-card { text-align: center; padding: 30px 20px; border-radius: var(--radius); background: var(--grey-bg); border: 1px solid var(--grey-line); transition: border-color .25s ease, box-shadow .25s ease; }
.value-card:hover { border-color: rgba(201,162,39,.35); box-shadow: 0 12px 26px -18px rgba(16,35,63,.18); }
.value-card .icon-badge { margin: 0 auto 16px; background: var(--white); }

/* Services list */
.service-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
@media (max-width: 600px) { .service-list { grid-template-columns: 1fr; } }
.service-list li {
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; color: var(--navy);
}
.service-list li::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ---------- Band / CTA ---------- */
.band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.band h2 { color: var(--white); }
.band p { color: rgba(255,255,255,.8); }
.band-alt { background: var(--grey-bg); }

/* ---------- HIPAA floating card ---------- */
/* ---------- HIPAA floating card ---------- */

.hipaa-section {
  background: var(--white);
  padding: 30px 0 50px;
}

.hipaa-card-wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 30px;
}

.hipaa-card {
  width: 100%;
  box-sizing: border-box;
  background: var(--charcoal);
  border-radius: 24px;
  padding: 70px 100px;
  text-align: center;

  box-shadow:
    0 40px 70px -25px rgba(16,35,63,.30),
    0 16px 32px -12px rgba(16,35,63,.16);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.hipaa-card:hover,
.hipaa-card:focus-within {
  transform: translateY(-8px);

  box-shadow:
    0 18px 34px -20px rgba(16,35,63,.14),
    0 6px 16px -10px rgba(16,35,63,.06);
}

.hipaa-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 18px;
  color: var(--gold);
}

.hipaa-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hipaa-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--gold);
  margin-bottom: 14px;
}

.hipaa-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .025em;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 0 0 18px;
  color: var(--white);
  overflow-wrap: break-word;
  word-break: break-word;
}

.hipaa-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.68);
  max-width: 560px;
  margin: 0 auto;
}
.hipaa-sub + .hipaa-sub { margin-top: 16px; }

@media (max-width: 768px) {

  .hipaa-section {
    padding: 20px 0 40px;
  }

  .hipaa-card-wrap {
    padding: 20px;
  }

  .hipaa-card {
    padding: 55px 45px;
  }

  .hipaa-heading {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
  }

}

@media (max-width: 560px) {

  .hipaa-card-wrap {
    padding: 10px;
  }

  .hipaa-card {
    padding: 45px 24px;
    border-radius: 18px;
  }

  .hipaa-icon {
    width: 36px;
    height: 36px;
  }

  .hipaa-eyebrow {
    font-size: .7rem;
  }

  .hipaa-heading {
    font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  }

  .hipaa-sub {
    font-size: .9rem;
  }

}

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

  .hipaa-card {
    transition: none;
  }

}

/* ---------- Approach grid (numbered cards) ---------- */
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-card {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow);
}
.approach-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  color: rgba(30, 75, 140, .18);
  margin-bottom: 16px;
}
.approach-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.approach-card p { margin: 0; font-size: .96rem; }

/* ---------- Function grid (billing functions) ---------- */
.function-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
@media (max-width: 700px) { .function-grid { grid-template-columns: 1fr; } }
.function-item { display: flex; align-items: flex-start; gap: 18px; }
.function-num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy);
}
.function-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.function-item p { margin: 0; font-size: .95rem; }

/* ---------- HIPAA mini certification (inside Tri-Star Difference card) ---------- */
.hipaa-divider { width: 60px; height: 2px; background: rgba(255,255,255,.18); margin: 40px auto 32px; border: none; }
.hipaa-mini { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: left; }
.hipaa-mini-icon { width: 34px; height: 34px; color: var(--gold); flex-shrink: 0; }
.hipaa-mini-icon svg { width: 100%; height: 100%; display: block; }
.hipaa-mini-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--white);
  margin-bottom: 2px;
}
.hipaa-mini-desc { margin: 0; font-size: .85rem; color: rgba(255,255,255,.6); max-width: 380px; }
@media (max-width: 560px) {
  .hipaa-mini { flex-direction: column; text-align: center; }
  .hipaa-mini-desc { max-width: none; }
}

/* ---------- Precision grid (Medical Coding approach cards) ---------- */
.precision-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .precision-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .precision-grid { grid-template-columns: 1fr; } }
.precision-card {
  background: var(--grey-bg);
  border-radius: var(--radius);
  padding: 34px 28px;
}
.precision-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 18px;
}
.precision-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.precision-card p { margin: 0; font-size: .96rem; }

/* ---------- Coding function grid (Medical Coding functions) ---------- */
.coding-function-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .coding-function-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .coding-function-grid { grid-template-columns: 1fr; } }
.coding-function-card {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
}
.coding-function-index {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--blue);
  margin-bottom: 12px;
}
.coding-function-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.coding-function-card p { margin: 0; font-size: .93rem; }

/* ---------- RCM approach grid (Revenue Cycle Management) ---------- */
.rcm-approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .rcm-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rcm-approach-grid { grid-template-columns: 1fr; } }
.rcm-approach-card {
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow);
}
.rcm-approach-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 18px;
}
.rcm-approach-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.rcm-approach-card p { margin: 0; font-size: .96rem; }

/* ---------- RCM stage grid (revenue cycle stages) ---------- */
.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .stage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stage-grid { grid-template-columns: 1fr; } }
.stage-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--blue);
  margin-bottom: 8px;
}

/* ---------- Denial approach grid (Denial Management) ---------- */
.denial-approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .denial-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .denial-approach-grid { grid-template-columns: 1fr; } }
.denial-approach-card {
  position: relative;
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow);
}
.denial-approach-card .icon-badge { background: rgba(201, 162, 39, .12); color: var(--gold); }
.denial-approach-step {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--gold);
  margin: 16px 0 8px;
}
.denial-approach-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.denial-approach-card p { margin: 0; font-size: .96rem; }
.denial-approach-card:not(:last-child)::after {
  content: '\203A';
  position: absolute;
  top: 50%;
  right: -21px;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(201, 162, 39, .55);
  z-index: 1;
}
@media (max-width: 900px) {
  .denial-approach-card:not(:last-child)::after { display: none; }
}

/* ---------- Denial recovery timeline (work behind denial recovery) ---------- */
.denial-timeline { position: relative; max-width: 980px; margin: 0 auto; }
.denial-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom, rgba(201, 162, 39, 0), rgba(201, 162, 39, .45) 8%, rgba(201, 162, 39, .45) 92%, rgba(201, 162, 39, 0));
  transform: translateX(-50%);
}
.denial-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  column-gap: 32px;
}
.denial-tl-item + .denial-tl-item { margin-top: 48px; }
.denial-tl-marker {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  justify-self: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--shadow);
  z-index: 1;
}
.denial-tl-content {
  grid-row: 1;
  grid-column: 3;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.denial-tl-item:nth-child(odd) .denial-tl-content { grid-column: 1; }
.denial-tl-content:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(16, 35, 63, .26), 0 8px 18px -10px rgba(16, 35, 63, .12);
}
.denial-tl-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(201, 162, 39, .12);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: background .25s ease, color .25s ease;
}
.denial-tl-icon svg { width: 22px; height: 22px; display: block; }
.denial-tl-content:hover .denial-tl-icon { background: var(--gold); color: var(--white); }
.denial-tl-tag {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.denial-tl-content h3 { font-size: 1.12rem; margin-bottom: 8px; }
.denial-tl-content p { margin: 0; font-size: .95rem; }

@media (max-width: 760px) {
  .denial-timeline::before { left: 27px; }
  .denial-tl-item { grid-template-columns: 56px 1fr; column-gap: 20px; align-items: flex-start; }
  .denial-tl-marker { grid-column: 1; }
  .denial-tl-content,
  .denial-tl-item:nth-child(odd) .denial-tl-content { grid-column: 2; padding: 26px 22px; }
  .denial-tl-item + .denial-tl-item { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .denial-tl-icon,
  .denial-tl-content { transition: none; }
}

/* ---------- Difference card — navy variant (RCM) ---------- */
.hipaa-card.navy { background: var(--navy); }

/* Three-pillar grid (Tri-Star Difference) */
.pillar-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-grid .info-card { text-align: center; }

/* ---------- Credentialing approach grid (Provider Credentialing) ---------- */
.credentialing-approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .credentialing-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .credentialing-approach-grid { grid-template-columns: 1fr; } }
.credentialing-approach-card {
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.credentialing-approach-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(16, 35, 63, .26), 0 8px 18px -10px rgba(16, 35, 63, .12);
}
.credentialing-approach-card .icon-badge { background: rgba(201, 162, 39, .12); color: var(--gold); margin-bottom: 18px; }
.credentialing-approach-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.credentialing-approach-card p { margin: 0; font-size: .96rem; }
.credentialing-approach-num { color: var(--gold); margin-right: 8px; }
.credentialing-handle-num { color: var(--blue); margin-right: 8px; }

/* ---------- Credentialing handle grid (What We Handle) ---------- */
.credentialing-handle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .credentialing-handle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .credentialing-handle-grid { grid-template-columns: 1fr; } }
.credentialing-handle-grid .info-card { display: flex; flex-direction: column; height: 100%; }
.credentialing-handle-grid .info-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.credentialing-handle-grid .info-card p { margin: 0; font-size: .95rem; }

/* ---------- AR approach grid (AR Follow-Up) ---------- */
.ar-approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .ar-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ar-approach-grid { grid-template-columns: 1fr; } }
.ar-approach-card {
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ar-approach-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(16, 35, 63, .26), 0 8px 18px -10px rgba(16, 35, 63, .12);
}
.ar-approach-card .icon-badge { background: rgba(201, 162, 39, .12); color: var(--gold); margin-bottom: 18px; }
.ar-approach-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.ar-approach-card p { margin: 0; font-size: .96rem; }
.ar-approach-num { color: var(--gold); margin-right: 8px; }

/* ---------- AR handle grid (What We Handle) ---------- */
.ar-handle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .ar-handle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ar-handle-grid { grid-template-columns: 1fr; } }
.ar-handle-grid .info-card { display: flex; flex-direction: column; height: 100%; }
.ar-handle-grid .info-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.ar-handle-grid .info-card p { margin: 0; font-size: .95rem; }
.ar-handle-num { color: var(--blue); margin-right: 8px; }

/* ---------- Practice approach grid (Small Practices — staggered editorial layout) ---------- */
.practice-approach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
@media (max-width: 900px) { .practice-approach-grid { grid-template-columns: 1fr; gap: 20px; } }
.practice-approach-card {
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 38px 34px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.practice-approach-card:nth-child(even) { margin-top: 44px; }
@media (max-width: 900px) {
  .practice-approach-card:nth-child(even) { margin-top: 0; }
}
.practice-approach-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(16, 35, 63, .26), 0 8px 18px -10px rgba(16, 35, 63, .12);
}
.practice-approach-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.practice-approach-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(201, 162, 39, .35);
}
.practice-approach-card .icon-badge { background: rgba(201, 162, 39, .12); color: var(--gold); flex-shrink: 0; }
.practice-approach-card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.practice-approach-card p { margin: 0; font-size: .97rem; max-width: 40ch; }

/* ---------- Practice service menu (Small Practices — What We Handle) ---------- */
.service-menu { max-width: 880px; margin: 0 auto; }
.service-row { border-bottom: 1px solid var(--grey-line); }
.service-row:first-of-type { border-top: 1px solid var(--grey-line); }
.service-row-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 4px;
  cursor: pointer;
  list-style: none;
}
.service-row-head::-webkit-details-marker { display: none; }
.service-row-head::marker { content: ''; }
.service-row-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: rgba(201, 162, 39, .4);
  width: 48px;
  flex-shrink: 0;
  transition: color .25s ease;
}
.service-row-title {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--navy);
  transition: color .25s ease;
}
.service-row-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--grey-line);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.service-row-toggle svg { width: 16px; height: 16px; display: block; }
.service-row:hover .service-row-num,
.service-row[open] .service-row-num { color: var(--gold); }
.service-row:hover .service-row-title,
.service-row[open] .service-row-title { color: var(--blue); }
.service-row:hover .service-row-toggle { border-color: var(--gold); }
.service-row[open] .service-row-toggle {
  transform: rotate(45deg);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}
.service-row-panel { padding: 0 4px 28px 72px; }
.service-row-panel p { margin: 0; font-size: .97rem; color: var(--navy); opacity: .82; max-width: 620px; }
.service-row[open] .service-row-panel { animation: serviceRowReveal .35s ease; }
@keyframes serviceRowReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  .service-row-head { gap: 14px; padding: 20px 2px; }
  .service-row-num { font-size: 1.3rem; width: 34px; }
  .service-row-title { font-size: 1.02rem; }
  .service-row-toggle { width: 30px; height: 30px; }
  .service-row-panel { padding: 0 2px 22px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-row-toggle { transition: none; }
  .service-row[open] .service-row-panel { animation: none; }
}

/* ---------- Page header (inner pages) ---------- */
.page-header {
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  padding: 84px 0 64px;
  text-align: center;
}
.page-header .eyebrow { color: var(--gold); }
.page-header h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.page-header p { color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto; }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.65); margin-bottom: 16px; }
.breadcrumb a { color: var(--gold); }

/* ---------- Legal page hero (Terms of Service / Privacy Policy) ---------- */
.legal-hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  padding: 76px 0 60px;
  overflow: hidden;
}
.legal-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
.legal-hero-copy { max-width: 560px; }
.legal-hero-copy .breadcrumb { margin-bottom: 16px; }
.legal-hero-copy .eyebrow { color: var(--gold); }
.legal-hero-copy h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 10px; }
.legal-hero-copy p { color: rgba(255,255,255,.85); margin: 0; max-width: 46ch; }
.legal-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 210px; }
.legal-hero-visual svg { width: 100%; max-width: 340px; height: auto; display: block; overflow: visible; }
@media (max-width: 900px) {
  .legal-hero { padding: 60px 0 44px; }
  .legal-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .legal-hero-copy { max-width: none; }
  .legal-hero-visual { min-height: 0; }
  .legal-hero-visual svg { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .legal-hero-visual svg { max-width: 170px; }
}

/* Terms of Service hero graphic — document / agreement / checkmark */
.tos-doc-outline { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.4); stroke-width: 1.4; }
.tos-doc-line { stroke: rgba(255,255,255,.28); stroke-width: 1.4; stroke-linecap: round; }
.tos-doc-line.accent { stroke: rgba(201,162,39,.65); }
.tos-doc-accent { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(201,162,39,.6)); animation: imPulse 5s ease-in-out infinite; }
.tos-doc-link { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.3; stroke-linecap: round; }
.tos-doc-node { fill: rgba(255,255,255,.55); }
.tos-doc-badge-ring { fill: rgba(201,162,39,.1); stroke: var(--gold); stroke-width: 1.6; }
.tos-doc-check { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Privacy Policy hero graphic — shield / lock / data protection */
.priv-orbit { transform-origin: 150px 128px; }
.priv-orbit.r1 { animation: orthoRotate 46s linear infinite; }
.priv-orbit.r2 { animation: orthoRotate 70s linear infinite reverse; }
.priv-orbit-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 3 7; }
.priv-orbit-dot { fill: rgba(255,255,255,.6); }
.priv-orbit-dot.accent { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(201,162,39,.6)); animation: imPulse 5s ease-in-out infinite; }
.priv-shield-outline { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.4); stroke-width: 1.4; stroke-linejoin: round; }
.priv-lock-shackle { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.priv-lock-body { fill: rgba(201,162,39,.14); stroke: var(--gold); stroke-width: 1.6; }
.priv-lock-keyhole { fill: var(--navy); }
.priv-shield-link { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.3; stroke-linecap: round; }
.priv-shield-node { fill: rgba(255,255,255,.55); }
.priv-shield-badge-ring { fill: rgba(201,162,39,.1); stroke: var(--gold); stroke-width: 1.6; }
.priv-shield-badge-dot { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.65)); animation: imPulse 5s ease-in-out infinite; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.82); }
.footer-top { padding: 64px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;
  gap: 40px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--white); font-size: 1rem; margin-bottom: 18px; }
.footer-logo img { height: 46px; margin-bottom: 16px; background: var(--white); padding: 8px 14px; border-radius: 8px; }
.footer-grid p { color: rgba(255,255,255,.7); font-size: .92rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a { color: rgba(255,255,255,.75); font-size: .92rem; }
.footer-links a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 12px; font-size: .92rem; color: rgba(255,255,255,.75); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px 0;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom a { color: rgba(255,255,255,.55); }
.footer-bottom a:hover { color: var(--gold); }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 22px; }
.contact-info-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-list strong { display: block; color: var(--navy); font-family: 'Poppins', sans-serif; }

.form-card {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--navy); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--grey-line);
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  background: var(--grey-bg);
  color: var(--navy);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--blue-light);
  outline-offset: 1px;
  background: var(--white);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { cursor: pointer; }
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--red); }
.field-error, .agreement-error { display: none; color: var(--red); font-size: .82rem; margin: 6px 0 0; font-weight: 500; }
.field-error.show, .agreement-error.show { display: block; }
.form-note { font-size: .82rem; color: var(--text-muted); margin-top: 8px; }

.phone-input { position: relative; }
.phone-input .phone-flag {
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  pointer-events: none;
}
.phone-input .phone-flag::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--grey-line);
}
.phone-input input { padding-left: 68px; }
.form-success {
  display: none;
  background: #E9F6EE; color: #226A3F;
  border: 1px solid #BEE5C9; border-radius: 8px;
  padding: 14px 16px; font-size: .9rem; margin-bottom: 18px;
}
.form-success.show { display: block; }
.form-error {
  display: none;
  background: #FBEAEA; color: var(--red);
  border: 1px solid #F1C6C6; border-radius: 8px;
  padding: 14px 16px; font-size: .9rem; margin-bottom: 18px;
}
.form-error.show { display: block; }

.field-agreement { margin-bottom: 20px; }
.agreement-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.agreement-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.agreement-row label {
  font-size: .88rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.55;
  cursor: pointer;
}
.agreement-row label a {
  color: var(--blue);
  text-decoration: underline;
}
.agreement-row label a:hover { color: var(--navy); }

/* Legal pages */
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 { margin-top: 2em; font-size: 1.3rem; }
.legal-content ul { color: var(--text-muted); }
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  background: var(--grey-bg);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 16px 22px;
  margin: 0 0 2.2em;
  font-size: .86rem;
  color: var(--text-muted);
}
.legal-meta strong { color: var(--navy); }
.legal-content h3 { margin-top: 1.4em; font-size: 1.02rem; color: var(--navy); }
.legal-content p, .legal-content li { color: var(--text-muted); }
.legal-content ul, .legal-content ol { padding-left: 1.25em; margin: 0 0 1em; }
.legal-content li { margin-bottom: .5em; }
.legal-content a { color: var(--blue); text-decoration: underline; }
.legal-content a:hover { color: var(--navy); }
.legal-content .legal-intro { font-size: 1.02rem; }
.legal-notice {
  background: rgba(201,162,39,.09);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  margin: 1.3em 0;
  font-size: .92rem;
  color: var(--navy);
}
.legal-notice p:last-child { margin-bottom: 0; }
.legal-content hr { border: none; border-top: 1px solid var(--grey-line); margin: 2.4em 0; }
.legal-contact-block { color: var(--navy); font-weight: 500; }
.legal-contact-block a { font-weight: 600; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden { position: absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
}

/* =========================================================
   SPECIALTY PAGE SYSTEM — Popular Specialties
   Shared, generically-named components for the specialty
   template (first built out for Cardiology). Evolves the
   Core Services visual language toward something more
   premium, editorial, and specialty-expressive while reusing
   the same palette, type, radii, and shadow tokens above.
   ========================================================= */

/* Reusable "rhythm line" motif — a signal that quietly ties the
   specialty pages together. Two stacked paths sharing one `d`:
   a dim static base, and a short gold dash that travels along it. */
.rhythm-line {
  --rhythm-base: rgba(255,255,255,.22);
  --rhythm-color: var(--gold);
  display: block;
}
.rhythm-line svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rhythm-path-base {
  fill: none;
  stroke: var(--rhythm-base);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rhythm-path-travel {
  fill: none;
  stroke: var(--rhythm-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22 900;
  animation: rhythmTravel 4.2s linear infinite;
}
@keyframes rhythmTravel { to { stroke-dashoffset: -920; } }
.rhythm-line.on-light { --rhythm-base: rgba(16,35,63,.14); --rhythm-color: var(--blue-light); }

/* ---------- Specialty hero ---------- */
.specialty-hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  overflow: hidden;
  padding: 84px 0 72px;
}
.specialty-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .6;
  pointer-events: none;
}
.specialty-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .specialty-hero-inner { grid-template-columns: 1fr; gap: 44px; } }
.specialty-hero-copy .eyebrow { color: var(--gold); }
.specialty-hero-copy h1 { color: var(--white); font-size: clamp(2.15rem, 4vw, 3.15rem); margin-bottom: 20px; }
.specialty-hero-copy p { color: rgba(255,255,255,.82); font-size: 1.08rem; max-width: 46ch; margin-bottom: 32px; }
.specialty-hero-copy .accent-underline { position: relative; white-space: nowrap; }
.specialty-hero-copy .accent-underline::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 2px; height: 8px;
  background: rgba(201,162,39,.32); border-radius: 3px; z-index: -1;
}
.specialty-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
@media (min-width: 901px) { .specialty-hero-visual { min-height: 360px; } }
.specialty-hero-glow {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.35), transparent 68%);
  pointer-events: none;
}
.specialty-hero-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.specialty-hero-rings span {
  position: absolute; border-radius: 50%; border: 1px solid rgba(201,162,39,.48);
  animation: specialtyPulse 4.5s ease-out infinite;
}
.specialty-hero-rings span:nth-child(1) { width: 150px; height: 150px; }
.specialty-hero-rings span:nth-child(2) { width: 270px; height: 270px; animation-delay: 1.1s; }
.specialty-hero-rings span:nth-child(3) { width: 390px; height: 390px; animation-delay: 2.2s; }
@keyframes specialtyPulse {
  0% { opacity: .75; transform: scale(.82); }
  70% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.14); }
}
.specialty-hero-line { position: relative; width: 100%; max-width: 520px; z-index: 1; }
.specialty-hero-line .rhythm-path-base { stroke: rgba(255,255,255,.4); stroke-width: 2; }
.specialty-hero-line .rhythm-path-travel { stroke-width: 3.2; filter: drop-shadow(0 0 7px rgba(201,162,39,.6)); }
.specialty-hero-caption {
  position: absolute;
  left: 0; bottom: 2%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.28);
}
.specialty-hero-caption-label {
  font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-size: .72rem; color: var(--gold);
}
.specialty-hero-caption-value {
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .85rem; color: rgba(255,255,255,.85);
}
@media (max-width: 900px) {
  .specialty-hero-caption { position: static; margin-top: 22px; align-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .specialty-hero-visual { min-height: 240px; }
  .specialty-hero-glow { width: 280px; height: 280px; }
  .specialty-hero-rings span:nth-child(1) { width: 110px; height: 110px; }
  .specialty-hero-rings span:nth-child(2) { width: 190px; height: 190px; }
  .specialty-hero-rings span:nth-child(3) { width: 270px; height: 270px; }
  .specialty-hero-line { max-width: 340px; }
}

/* ---------- Specialty intro (clinical complexity -> financial precision) ---------- */
.specialty-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .specialty-intro-grid { grid-template-columns: 1fr; gap: 40px; } }
.specialty-intro-visual { display: flex; flex-direction: column; align-items: center; }
.specialty-intro-panel {
  width: 100%; max-width: 380px;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.specialty-intro-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(16, 35, 63, .26), 0 8px 18px -10px rgba(16, 35, 63, .12);
  border-color: var(--blue-light);
}
.specialty-intro-panel.accent { border-color: rgba(201,162,39,.4); }
.specialty-intro-panel.accent:hover { border-color: var(--gold); }
.specialty-intro-tag {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--navy); margin-bottom: 8px;
}
.specialty-intro-caption {
  margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.specialty-intro-visual .rhythm-line { width: 56px; height: 88px; margin: -2px 0; }

/* ---------- Specialty journey (Tri-Star Approach — connected stages) ---------- */
.specialty-journey-wrap { position: relative; }
@media (min-width: 901px) { .specialty-journey-wrap { padding: 0 152px; } }
.specialty-journey-endpoint {
  position: absolute;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 122px;
}
.specialty-journey-endpoint.start { left: -6px; align-items: flex-start; text-align: left; }
.specialty-journey-endpoint.end { right: -6px; align-items: flex-end; text-align: right; }
.specialty-journey-endpoint-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-light); flex-shrink: 0; }
.specialty-journey-endpoint.end .specialty-journey-endpoint-dot { background: var(--gold); }
.specialty-journey-endpoint-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .64rem;
  line-height: 1.35;
  color: var(--text-muted);
}
@media (max-width: 900px) { .specialty-journey-endpoint { display: none; } }
.specialty-journey-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.specialty-journey-grid::before {
  content: '';
  position: absolute;
  top: 59px;
  left: calc(12.5% - 1px);
  right: calc(12.5% - 1px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue-light), var(--gold));
  opacity: .3;
  z-index: 0;
}
@media (max-width: 900px) {
  .specialty-journey-grid { grid-template-columns: repeat(2, 1fr); }
  .specialty-journey-grid::before { display: none; }
}
@media (max-width: 560px) { .specialty-journey-grid { grid-template-columns: 1fr; } }
.specialty-journey-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 36px 26px 30px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.specialty-journey-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(16, 35, 63, .26), 0 8px 18px -10px rgba(16, 35, 63, .12);
}
.specialty-journey-node {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  margin: 0 auto 18px;
  position: relative;
  box-shadow: 0 0 0 6px var(--white);
}
.specialty-journey-card:nth-child(1) .specialty-journey-node { background: var(--blue-light); }
.specialty-journey-card:nth-child(2) .specialty-journey-node { background: #628096; }
.specialty-journey-card:nth-child(3) .specialty-journey-node { background: #95915F; }
.specialty-journey-card:nth-child(4) .specialty-journey-node { background: var(--gold); color: var(--navy); }
.specialty-journey-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.specialty-journey-card p { margin: 0; font-size: .95rem; }

/* ---------- Specialty directory (What We Handle — editorial service list) ---------- */
.specialty-directory { max-width: 960px; margin: 0 auto; }
.specialty-directory-row {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 28px;
  padding: 34px 6px;
  border-bottom: 1px solid var(--grey-line);
  transition: background .25s ease;
}
.specialty-directory-row:first-of-type { border-top: 1px solid var(--grey-line); }
.specialty-directory-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.specialty-directory-row:hover::before { transform: scaleY(1); }
.specialty-directory-row:hover { background: var(--grey-bg); }
.specialty-directory-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: rgba(201, 162, 39, .35);
  transition: color .25s ease;
}
.specialty-directory-row:hover .specialty-directory-num { color: var(--gold); }
.specialty-directory-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0 0 8px;
  transition: color .25s ease;
}
.specialty-directory-row:hover .specialty-directory-title { color: var(--blue); }
.specialty-directory-desc { margin: 0; font-size: .97rem; color: var(--text-muted); max-width: 60ch; }
@media (max-width: 600px) {
  .specialty-directory-row { grid-template-columns: 52px 1fr; padding: 24px 4px; }
  .specialty-directory-num { font-size: 1.5rem; }
  .specialty-directory-title { font-size: 1.05rem; }
}

/* ---------- Specialty pillars (three-column focus areas) ---------- */
.specialty-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 900px) { .specialty-pillars { grid-template-columns: 1fr; gap: 36px; } }
.specialty-pillar { padding: 8px 40px; }
.specialty-pillars .specialty-pillar:not(:first-child) { border-left: 1px solid var(--grey-line); }
@media (max-width: 900px) {
  .specialty-pillars .specialty-pillar:not(:first-child) { border-left: none; border-top: 1px solid var(--grey-line); padding: 32px 8px 0; }
  .specialty-pillars .specialty-pillar:first-child { padding: 0 8px; }
}
.specialty-pillar-num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: .95rem;
  color: var(--gold);
  margin-bottom: 18px;
}
.specialty-pillar .icon-badge { background: rgba(201, 162, 39, .12); color: var(--gold); margin-bottom: 20px; }
.specialty-pillar h3 { font-size: 1.22rem; margin-bottom: 12px; }
.specialty-pillar p { margin: 0; font-size: .97rem; }

/* ---------- Cardiology Focus (Section 5 editorial rows — cardiology.html only) ---------- */
.cardio-focus-list { max-width: 920px; margin: 0 auto; }
.cardio-focus-row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 44px 24px;
  margin: 0 -24px;
  border-bottom: 1px solid var(--grey-line);
  transition: background .25s ease;
}
.cardio-focus-row:first-child { border-top: 1px solid var(--grey-line); }
.cardio-focus-row:nth-child(even) { flex-direction: row-reverse; text-align: right; }
.cardio-focus-row:hover { background: var(--grey-bg); }
.cardio-focus-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 7vw, 5.2rem);
  line-height: 1;
  color: rgba(201, 162, 39, .28);
  flex-shrink: 0;
  width: 150px;
  transition: color .25s ease;
}
.cardio-focus-row:hover .cardio-focus-num { color: var(--gold); }
.cardio-focus-row:nth-child(even) .cardio-focus-num { text-align: right; }
.cardio-focus-body h3 { font-size: 1.3rem; margin-bottom: 10px; transition: color .25s ease; }
.cardio-focus-row:hover .cardio-focus-body h3 { color: var(--blue); }
.cardio-focus-body p { margin: 0; font-size: 1rem; max-width: 52ch; }
.cardio-focus-row:nth-child(even) .cardio-focus-body p { margin-left: auto; }
@media (max-width: 700px) {
  .cardio-focus-row, .cardio-focus-row:nth-child(even) { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; padding: 30px 16px; margin: 0 -16px; }
  .cardio-focus-row:nth-child(even) .cardio-focus-num { text-align: left; }
  .cardio-focus-row:nth-child(even) .cardio-focus-body p { margin-left: 0; }
  .cardio-focus-num { width: auto; font-size: 2.6rem; }
}

/* ---------- Specialty difference (rhythm line over the difference card) ---------- */
.specialty-difference { position: relative; overflow: hidden; }
.hipaa-card-content { position: relative; z-index: 1; }
.specialty-difference-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42px;
  opacity: .5;
  --rhythm-base: rgba(255,255,255,.12);
  --rhythm-color: var(--gold);
}
.specialty-difference .specialty-difference-line {
  height: 140px;
  opacity: .9;
  --rhythm-base: rgba(255,255,255,.24);
  --rhythm-color: var(--gold);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%);
}
.specialty-difference .specialty-difference-line .rhythm-path-base { stroke-width: 2; }
.specialty-difference .specialty-difference-line .rhythm-path-travel { stroke-width: 3.6; filter: drop-shadow(0 0 9px rgba(201,162,39,.65)); }

/* ---------- Specialty CTA (faint rhythm line watermark) ---------- */
.band.specialty-cta { position: relative; overflow: hidden; }
.specialty-cta-line {
  position: absolute;
  left: 0; right: 0; bottom: 14%;
  height: 60px;
  opacity: .14;
  pointer-events: none;
  --rhythm-base: rgba(255,255,255,.4);
  --rhythm-color: var(--gold);
}

/* =========================================================
   MENTAL HEALTH — calm / human / continuous
   Soft drifting orbs and a single gentle wave replace the
   cardiology rhythm-line. Rounder radii, quieter motion.
   ========================================================= */
.mh-hero { position: relative; background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%); color: var(--white); overflow: hidden; padding: 84px 0 72px; }
.mh-orbs { position: absolute; inset: 0; pointer-events: none; }
.mh-orbs span { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .55; animation: mhDrift 14s ease-in-out infinite alternate; }
.mh-orbs span:nth-child(1) { width: 280px; height: 280px; background: radial-gradient(circle, rgba(201,162,39,.55), transparent 70%); top: -40px; right: 8%; }
.mh-orbs span:nth-child(2) { width: 340px; height: 340px; background: radial-gradient(circle, rgba(46,111,206,.5), transparent 70%); bottom: -80px; right: 22%; animation-delay: 2.5s; }
.mh-orbs span:nth-child(3) { width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); top: 30%; right: 2%; animation-delay: 5s; }
@keyframes mhDrift { from { transform: translate(0,0); } to { transform: translate(-18px,16px); } }
@keyframes mhBreathe { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
.mh-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .mh-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.mh-hero-copy .eyebrow { color: var(--gold); }
.mh-hero-copy h1 { color: var(--white); font-size: clamp(2.1rem, 4vw, 3.05rem); margin-bottom: 20px; }
.mh-hero-copy p { color: rgba(255,255,255,.82); font-size: 1.07rem; max-width: 46ch; margin-bottom: 32px; }
.mh-hero-visual { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.mh-hero-glow {
  position: absolute;
  z-index: 0;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,111,206,.3), transparent 65%);
  pointer-events: none;
}
.mh-hero-wave { position: relative; z-index: 1; width: 100%; max-width: 460px; }
.mh-hero-wave svg { width: 100%; height: auto; display: block; overflow: visible; }
.mh-hero-wave path { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.5; stroke-linecap: round; }
.mh-hero-wave path.depth { stroke: rgba(255,255,255,.16); stroke-width: 1.2; }
.mh-hero-wave path.accent { stroke: var(--gold); stroke-width: 2; opacity: .85; animation: mhBreathe 6s ease-in-out infinite; }
.mh-hero-anchor.start { fill: var(--blue-light); filter: drop-shadow(0 0 5px rgba(46,111,206,.7)); }
.mh-hero-anchor.end { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.7)); }

.mh-intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .mh-intro-grid { grid-template-columns: 1fr; gap: 36px; } }
.mh-continuity-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 44px 34px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mh-continuity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 46px -20px rgba(16, 35, 63, .22), 0 10px 20px -12px rgba(16, 35, 63, .1);
  border-color: rgba(46, 111, 206, .35);
}
.mh-continuity-wave { width: 100%; transition: transform .35s ease; }
.mh-continuity-card:hover .mh-continuity-wave { transform: scale(1.02); }
.mh-continuity-wave svg { width: 100%; height: auto; display: block; }
.mh-continuity-wave path { fill: none; stroke: rgba(16,35,63,.14); stroke-width: 1.5; stroke-linecap: round; transition: stroke .35s ease; }
.mh-continuity-wave path.accent { stroke: var(--blue-light); stroke-width: 2.2; opacity: .9; animation: mhBreathe 6s ease-in-out infinite; transition: stroke-width .35s ease; }
.mh-continuity-card:hover .mh-continuity-wave path.accent { stroke-width: 2.8; stroke: var(--gold); }
.mh-continuity-labels { display: flex; justify-content: space-between; margin-top: 18px; }
.mh-continuity-tag { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .88rem; color: var(--navy); }
.mh-continuity-tag.end { color: var(--blue); }

.mh-flow-wrap { position: relative; }
.mh-flow-bg { position: absolute; left: 0; right: 0; top: 50%; height: 120px; transform: translateY(-50%); pointer-events: none; z-index: 0; }
.mh-flow-bg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mh-flow-bg path { fill: none; stroke: rgba(46, 111, 206, .3); stroke-width: 2; }
.mh-flow-dot { opacity: .9; }
.mh-flow-dot.d1 { fill: var(--blue-light); }
.mh-flow-dot.d2 { fill: #6F8AA8; }
.mh-flow-dot.d3 { fill: #B79A5C; }
.mh-flow-dot.d4 { fill: var(--gold); }
.mh-flow-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .mh-flow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mh-flow-grid { grid-template-columns: 1fr; } }
.mh-flow-card { background: var(--white); border: 1px solid var(--grey-line); border-radius: 22px; box-shadow: var(--shadow); padding: 34px 26px; transition: transform .3s ease, box-shadow .3s ease; }
.mh-flow-card:nth-child(odd) { margin-top: -14px; }
.mh-flow-card:nth-child(even) { margin-top: 14px; }
@media (max-width: 900px) { .mh-flow-card:nth-child(odd), .mh-flow-card:nth-child(even) { margin-top: 0; } }
.mh-flow-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(16,35,63,.22), 0 8px 18px -10px rgba(16,35,63,.1); }
.mh-flow-num { width: 42px; height: 42px; border-radius: 50%; background: rgba(201,162,39,.14); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .9rem; margin-bottom: 18px; }
.mh-flow-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.mh-flow-card p { margin: 0; font-size: .95rem; }

.mh-service-list { max-width: 900px; margin: 0 auto; background: var(--white); border-radius: 28px; border: 1px solid var(--grey-line); box-shadow: var(--shadow); overflow: hidden; }
.mh-service-row { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: flex-start; padding: 30px 34px; transition: background .3s ease; }
.mh-service-row + .mh-service-row { border-top: 1px solid var(--grey-line); }
.mh-service-row:hover { background: var(--grey-bg); }
.mh-service-pill { width: 44px; height: 44px; border-radius: 50%; background: rgba(46,111,206,.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.mh-service-row h3 { font-size: 1.08rem; margin: 0 0 8px; color: var(--navy); }
.mh-service-row p { margin: 0; font-size: .95rem; }
@media (max-width: 560px) { .mh-service-row { grid-template-columns: 44px 1fr; padding: 22px 20px; } }

.mh-focus-flow { max-width: 720px; margin: 0 auto; }
.mh-focus-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: 22px;
  padding: 34px 36px;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.mh-focus-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -18px rgba(16, 35, 63, .2), 0 8px 18px -10px rgba(16, 35, 63, .1);
}
.mh-focus-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 56px;
}
.mh-focus-num.n1 { color: rgba(46, 111, 206, .45); }
.mh-focus-num.n2 { color: rgba(139, 139, 99, .5); }
.mh-focus-num.n3 { color: rgba(201, 162, 39, .55); }
.mh-focus-body h3 { font-size: 1.25rem; margin-bottom: 8px; }
.mh-focus-body p { margin: 0; font-size: .98rem; }
.mh-focus-connector { width: 30px; height: 46px; margin: 2px auto; opacity: .55; }
.mh-focus-connector svg { width: 100%; height: 100%; display: block; }
.mh-focus-connector path { fill: none; stroke: var(--blue-light); stroke-width: 1.6; stroke-linecap: round; }

.mh-difference { position: relative; overflow: hidden; }
.mh-difference::before, .mh-difference::after { content: ''; position: absolute; border-radius: 50%; filter: blur(50px); opacity: .35; pointer-events: none; }
.mh-difference::before { width: 260px; height: 260px; background: var(--gold); top: -90px; left: -60px; }
.mh-difference::after { width: 220px; height: 220px; background: var(--blue-light); bottom: -80px; right: -40px; }
.mh-difference-line { position: absolute; inset: 0; opacity: .55; pointer-events: none; z-index: 0; }
.mh-difference-line svg { width: 100%; height: 100%; display: block; }
.mh-difference-line path { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.5; stroke-linecap: round; }
.mh-difference-line path.accent { stroke: var(--gold); stroke-width: 2.2; opacity: .85; animation: mhBreathe 6s ease-in-out infinite; }
.band.mh-cta { position: relative; overflow: hidden; }
.band.mh-cta::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.25), transparent 70%); filter: blur(10px); top: -140px; right: -100px; pointer-events: none; }

/* =========================================================
   DERMATOLOGY — precise / refined / detail-oriented
   Light hero, hairline grids, and crop-mark corner brackets
   replace dark gradients and rounded shadow cards.
   ========================================================= */
.derm-hero { position: relative; background: var(--white); overflow: hidden; padding: 92px 0 80px; border-bottom: 1px solid var(--grey-line); }
.derm-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(16,35,63,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(16,35,63,.045) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.derm-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .derm-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.derm-hero-copy .eyebrow { color: var(--gold); }
.derm-hero-copy h1 { font-size: clamp(2.15rem, 4vw, 3.1rem); margin-bottom: 20px; }
.derm-hero-copy p { font-size: 1.07rem; max-width: 46ch; margin-bottom: 32px; color: var(--text-muted); }
.derm-hero-visual { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.derm-frame { position: relative; width: 260px; height: 260px; }
.derm-corner { position: absolute; width: 34px; height: 34px; border: 2px solid var(--navy); }
.derm-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.derm-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.derm-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.derm-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-color: var(--gold); }
.derm-frame-ring { position: absolute; inset: 34px; border-radius: 50%; border: 1px solid rgba(16,35,63,.18); }
.derm-frame-ring.outer2 { inset: 12px; border-color: rgba(16,35,63,.1); }
.derm-frame-ring.inner { inset: 68px; border-color: rgba(201,162,39,.55); animation: dermFocus 5s ease-in-out infinite; }
@keyframes dermFocus { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.92); opacity: .55; } }
.derm-frame-ticks { position: absolute; inset: 0; animation: dermRotate 26s linear infinite; }
.derm-frame-tick { position: absolute; left: 50%; top: 0; width: 1.5px; height: 10px; margin-left: -.75px; background: rgba(16, 35, 63, .4); transform-origin: 50% 130px; }
.derm-frame-tick:nth-child(2) { transform: rotate(90deg); }
.derm-frame-tick:nth-child(3) { transform: rotate(180deg); }
.derm-frame-tick:nth-child(4) { transform: rotate(270deg); }
@keyframes dermRotate { to { transform: rotate(360deg); } }
.derm-frame-tag {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.derm-frame-tag-label { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; color: var(--gold); }
.derm-frame-tag-value { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .82rem; color: var(--white); white-space: nowrap; }

.derm-zoom { display: flex; align-items: flex-end; justify-content: center; gap: 26px; max-width: 460px; margin: 0 auto; cursor: default; }
.derm-zoom-step { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.derm-zoom-box { border: 1.5px solid var(--navy); transition: transform .35s ease, opacity .35s ease; }
.derm-zoom-step:nth-child(1) .derm-zoom-box { width: 78px; height: 78px; opacity: .3; }
.derm-zoom-step:nth-child(2) .derm-zoom-box { width: 60px; height: 60px; opacity: .5; }
.derm-zoom-step:nth-child(3) .derm-zoom-box { width: 44px; height: 44px; opacity: .8; border-color: var(--gold); }
.derm-zoom-step:nth-child(4) .derm-zoom-box { width: 30px; height: 30px; opacity: 1; background: var(--gold); border-color: var(--gold); }
.derm-zoom:hover .derm-zoom-step:nth-child(1) .derm-zoom-box { transform: scale(.88); opacity: .2; }
.derm-zoom:hover .derm-zoom-step:nth-child(2) .derm-zoom-box { transform: scale(.94); opacity: .6; }
.derm-zoom:hover .derm-zoom-step:nth-child(3) .derm-zoom-box { transform: scale(1.06); opacity: .95; }
.derm-zoom:hover .derm-zoom-step:nth-child(4) .derm-zoom-box { transform: scale(1.18); }
.derm-zoom-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 560px) { .derm-zoom { gap: 14px; } }

.derm-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--grey-line); border: 1px solid var(--grey-line); }
@media (max-width: 900px) { .derm-detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .derm-detail-grid { grid-template-columns: 1fr; } }
.derm-detail-card { background: var(--white); padding: 38px 30px; position: relative; transition: background .25s ease; }
.derm-detail-card:hover { background: var(--grey-bg); }
.derm-detail-index { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 16px; display: block; }
.derm-detail-card:nth-child(1) .derm-detail-index { color: var(--blue-light); }
.derm-detail-card:nth-child(2) .derm-detail-index { color: #628096; }
.derm-detail-card:nth-child(3) .derm-detail-index { color: #95915F; }
.derm-detail-card:nth-child(4) .derm-detail-index { color: var(--gold); }
.derm-detail-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.derm-detail-card p { margin: 0; font-size: .94rem; }
.derm-detail-card::before { content: ''; position: absolute; top: 16px; left: 16px; width: 10px; height: 10px; border-top: 1.5px solid var(--navy); border-left: 1.5px solid var(--navy); opacity: 0; transition: opacity .25s ease; }
.derm-detail-card:hover::before { opacity: 1; }

.derm-index-list { max-width: 960px; margin: 0 auto; border-top: 1px solid var(--navy); }
.derm-index-row { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 24px; padding: 28px 6px; border-bottom: 1px solid var(--grey-line); border-left: 3px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.derm-index-row:hover { background: var(--grey-bg); border-left-color: var(--gold); box-shadow: 0 10px 24px rgba(16,35,63,.07); transform: translateY(-2px); }
.derm-index-num { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .85rem; color: var(--text-muted); letter-spacing: .05em; transition: color .25s ease; }
.derm-index-row:hover .derm-index-num { color: var(--gold); }
.derm-index-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--navy); margin: 0 0 4px; }
.derm-index-desc { margin: 0; font-size: .92rem; color: var(--text-muted); }
.derm-index-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--grey-line); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease; flex-shrink: 0; }
.derm-index-arrow svg { width: 14px; height: 14px; }
.derm-index-row:hover .derm-index-arrow { transform: scale(1.12); border-color: var(--gold); background: var(--gold); color: var(--white); }
@media (max-width: 700px) { .derm-index-row { grid-template-columns: 44px 1fr; } .derm-index-arrow { display: none; } }

/* ---------- Dermatology Focus (Section 5 — precision spine list) ---------- */
.derm-focus-list { max-width: 760px; margin: 0 auto; position: relative; }
.derm-focus-list::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--grey-line); }
.derm-focus-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 32px 0 32px 60px;
  border-bottom: 1px solid var(--grey-line);
  transition: transform .3s ease, border-color .3s ease;
}
.derm-focus-row:first-child { border-top: 1px solid var(--grey-line); }
.derm-focus-row:hover { transform: translateY(-3px); border-bottom-color: var(--gold); }
.derm-focus-dot {
  position: absolute;
  left: 21px;
  top: 38px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue-light);
  transition: transform .3s ease, box-shadow .3s ease;
}
.derm-focus-dot.d2 { border-color: #95915F; }
.derm-focus-dot.d3 { border-color: var(--gold); background: var(--gold); }
.derm-focus-row:hover .derm-focus-dot { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(201, 162, 39, .18); }
.derm-focus-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.4rem; line-height: 1; flex-shrink: 0; width: 56px; transition: transform .3s ease, color .3s ease; }
.derm-focus-num.n1 { color: rgba(46, 111, 206, .35); }
.derm-focus-num.n2 { color: rgba(149, 145, 95, .5); }
.derm-focus-num.n3 { color: rgba(201, 162, 39, .55); }
.derm-focus-row:hover .derm-focus-num { transform: scale(1.08); }
.derm-focus-row:hover .derm-focus-num.n1 { color: rgba(46, 111, 206, .6); }
.derm-focus-row:hover .derm-focus-num.n2 { color: rgba(149, 145, 95, .75); }
.derm-focus-row:hover .derm-focus-num.n3 { color: rgba(201, 162, 39, .8); }
.derm-focus-body h3 { position: relative; display: inline-block; font-size: 1.2rem; margin-bottom: 8px; }
.derm-focus-body h3::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--gold); transition: width .35s ease; }
.derm-focus-row:hover .derm-focus-body h3::after { width: 100%; }
.derm-focus-body p { margin: 0; font-size: .97rem; }
@media (max-width: 600px) {
  .derm-focus-list::before { left: 19px; }
  .derm-focus-row { padding-left: 46px; gap: 20px; }
  .derm-focus-dot { left: 13px; }
  .derm-focus-num { font-size: 1.8rem; width: auto; }
}

.derm-difference { position: relative; overflow: hidden; }
.derm-difference .derm-corner { border-color: rgba(255,255,255,.35); width: 26px; height: 26px; z-index: 2; }
.derm-difference .derm-corner.br { border-color: var(--gold); }
.derm-difference-texture { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.derm-difference-texture .soft {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.6) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  filter: blur(3px);
  opacity: .14;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 72%);
  mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 72%);
}
.derm-difference-texture .sharp {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 66%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 28%, #000 66%, #000 100%);
}
.band.derm-cta { position: relative; overflow: hidden; }
.band.derm-cta::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }

/* =========================================================
   INTERNAL MEDICINE — perspective / coordination / clarity
   A recurring "many elements converge into one" bloom motif
   ties the hero, approach, focus, and difference sections
   into a single visual identity: breadth resolving into
   a clear, coordinated center.
   ========================================================= */
.im-hero { position: relative; background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%); color: var(--white); overflow: hidden; padding: 60px 0 52px; }
.im-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; opacity: .5; pointer-events: none; }
.im-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .im-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.im-hero-copy .eyebrow { color: var(--gold); }
.im-hero-copy h1 { color: var(--white); font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 20px; }
.im-hero-copy p { color: rgba(255,255,255,.82); font-size: 1.07rem; max-width: 46ch; margin-bottom: 24px; }
.im-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }

/* -- The convergence bloom: many points, one coordinated center -- */
.im-converge { position: relative; width: 100%; max-width: 360px; }
.im-converge svg { width: 100%; height: auto; display: block; overflow: visible; }
.im-converge-ring { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.im-converge-ring.inner { stroke: rgba(255,255,255,.1); stroke-dasharray: 2 6; }
.im-converge-path { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.4; stroke-linecap: round; }
.im-converge-node { fill: rgba(255,255,255,.65); }
.im-converge-node.accent { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(201,162,39,.7)); }
.im-converge-core { fill: var(--gold); opacity: .92; filter: drop-shadow(0 0 14px rgba(201,162,39,.55)); animation: imPulse 5s ease-in-out infinite; }
@keyframes imPulse { 0%,100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.im-converge.on-navy .im-converge-ring { stroke: rgba(255,255,255,.1); }
.im-converge.on-navy .im-converge-path { stroke: rgba(255,255,255,.2); }
.im-converge.on-navy .im-converge-node { fill: rgba(255,255,255,.4); }
.im-converge.small { position: absolute; inset: 0; width: 100%; max-width: none; opacity: .5; }
.im-converge.small svg { width: 340px; height: 340px; position: absolute; right: -60px; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) { .im-converge.small svg { display: none; } }

/* -- Section 2: many pathways reconnecting into one comprehensive shape -- */
.im-intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .im-intro-grid { grid-template-columns: 1fr; gap: 36px; } }
.im-web-card { position: relative; background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: box-shadow .3s ease; }
.im-web-card:hover { box-shadow: 0 22px 40px -18px rgba(16,35,63,.22), 0 8px 18px -10px rgba(16,35,63,.1); }
.im-web { width: 100%; max-width: 320px; overflow: visible; }
.im-web-path { fill: none; stroke: rgba(16,35,63,.16); stroke-width: 1.6; stroke-linecap: round; transition: stroke .4s ease, stroke-width .4s ease; }
.im-web-card:hover .im-web-path { stroke: var(--blue-light); }
.im-web-card:hover .im-web-path.w2 { transition-delay: .05s; }
.im-web-card:hover .im-web-path.w3 { transition-delay: .1s; }
.im-web-card:hover .im-web-path.w4 { transition-delay: .15s; }
.im-web-card:hover .im-web-path.w5 { stroke: var(--gold); transition-delay: .2s; }
.im-web-core { fill: rgba(201,162,39,.14); stroke: var(--gold); stroke-width: 1.6; transition: fill .35s ease, stroke-width .35s ease; }
.im-web-card:hover .im-web-core { fill: rgba(201,162,39,.26); stroke-width: 2.2; }
.im-web-label { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: .04em; font-size: .82rem; color: var(--text-muted); }

/* -- Section 3: many independent cards funneling into one coordinated path -- */
.im-approach-wrap { position: relative; }
.im-approach-funnel { display: block; width: 100%; height: 70px; margin-bottom: -6px; overflow: visible; }
.im-funnel-path { fill: none; stroke: rgba(16,35,63,.14); stroke-width: 1.4; }
.im-funnel-dot { fill: var(--blue-light); }
.im-funnel-dot:nth-of-type(3) { fill: #628096; }
.im-funnel-dot:nth-of-type(4) { fill: #95915F; }
.im-funnel-core { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.55)); }
@media (max-width: 900px) { .im-approach-funnel { display: none; } }
.im-approach-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .im-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .im-approach-grid { grid-template-columns: 1fr; } }
.im-approach-card { background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); padding: 34px 26px 28px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.im-approach-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(16,35,63,.26), 0 8px 18px -10px rgba(16,35,63,.12); border-color: rgba(201,162,39,.4); }
.im-approach-index { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 16px; }
.im-approach-card:nth-child(1) .im-approach-index { color: var(--blue-light); }
.im-approach-card:nth-child(2) .im-approach-index { color: #628096; }
.im-approach-card:nth-child(3) .im-approach-index { color: #95915F; }
.im-approach-card:nth-child(4) .im-approach-index { color: var(--gold); }
.im-approach-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.im-approach-card p { margin: 0; font-size: .94rem; }

/* -- Section 4: What We Handle — focused, elevated row interaction -- */
.im-index-list { max-width: 960px; margin: 0 auto; border-top: 1px solid var(--navy); }
.im-index-row { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 24px; padding: 28px 6px; border-bottom: 1px solid var(--grey-line); border-left: 3px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.im-index-row:hover { background: var(--white); border-left-color: var(--gold); box-shadow: 0 10px 24px rgba(16,35,63,.07); transform: translateY(-2px) scale(1.005); }
.im-index-num { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .85rem; color: var(--text-muted); letter-spacing: .05em; transition: color .25s ease; }
.im-index-row:hover .im-index-num { color: var(--gold); }
.im-index-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--navy); margin: 0 0 4px; }
.im-index-row:hover .im-index-title { color: var(--blue); }
.im-index-desc { margin: 0; font-size: .92rem; color: var(--text-muted); }
.im-index-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--grey-line); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease; flex-shrink: 0; }
.im-index-arrow svg { width: 14px; height: 14px; }
.im-index-row:hover .im-index-arrow { transform: scale(1.12); border-color: var(--gold); background: var(--gold); color: var(--white); }
@media (max-width: 700px) { .im-index-row { grid-template-columns: 44px 1fr; } .im-index-arrow { display: none; } }

/* -- Section 5: breadth / detail / outcome — layered comprehensive view -- */
.im-view-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .im-view-grid { grid-template-columns: 1fr; gap: 44px; } }
.im-view-list { display: flex; flex-direction: column; gap: 4px; }
.im-view-row { display: flex; align-items: flex-start; gap: 22px; padding: 22px 14px; border-radius: var(--radius); transition: background .3s ease, transform .3s ease; }
.im-view-row:hover { background: var(--grey-bg); transform: translateX(2px); }
.im-view-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; color: rgba(16,35,63,.16); flex-shrink: 0; width: 46px; transition: color .3s ease, transform .3s ease; }
.im-view-row:hover .im-view-num { color: var(--gold); transform: scale(1.1); }
.im-view-body h3 { position: relative; display: inline-block; font-size: 1.15rem; margin-bottom: 8px; }
.im-view-body h3::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--gold); transition: width .35s ease; }
.im-view-row:hover .im-view-body h3::after { width: 100%; }
.im-view-body p { margin: 0; font-size: .95rem; }
.im-view-visual { display: flex; align-items: center; justify-content: center; }
.im-view-visual svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.im-view-ring { fill: none; stroke-width: 1.4; }
.im-view-ring.breadth { stroke: rgba(46,111,206,.28); stroke-dasharray: 2 7; }
.im-view-ring.detail { stroke: rgba(98,128,150,.4); }
.im-view-ring.outcome { stroke: var(--gold); stroke-width: 1.8; }
.im-view-feed { stroke: rgba(16,35,63,.16); stroke-width: 1.2; }
.im-view-core { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(201,162,39,.5)); animation: imPulse 5s ease-in-out infinite; }

/* -- Section 6 / 7: navy difference + CTA carry the bloom motif forward -- */
.im-difference { position: relative; overflow: hidden; }
.im-difference .im-converge { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 380px; max-width: none; opacity: .5; pointer-events: none; }
@media (max-width: 900px) { .im-difference .im-converge { display: none; } }
.band.im-cta { position: relative; overflow: hidden; }
.band.im-cta .container { position: relative; z-index: 1; }

/* =========================================================
   OB/GYN — progression / continuity / forward movement
   One recurring motif: the shared .rhythm-line traveling-dash
   mechanism, redrawn as a single rising, continuous pathway
   with stage nodes — reused (at different scale and refinement)
   across the hero, journey card, approach arc, difference and
   CTA to express "different stages, one forward-moving path."
   ========================================================= */
.obgyn-hero { position: relative; background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%); color: var(--white); overflow: hidden; padding: 60px 0 52px; }
.obgyn-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .obgyn-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.obgyn-hero-copy .eyebrow { color: var(--gold); }
.obgyn-hero-copy h1 { color: var(--white); font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 20px; }
.obgyn-hero-copy p { color: rgba(255,255,255,.82); font-size: 1.07rem; max-width: 46ch; margin-bottom: 24px; }
.obgyn-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }

/* -- The pathway: a rising, continuous line with stage nodes -- */
.obgyn-path { width: 100%; max-width: 420px; }
.obgyn-path-node { fill: var(--white); opacity: .85; }
.obgyn-path-node.accent { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.65)); }
.obgyn-path.on-navy { position: absolute; inset: 0; max-width: none; opacity: .5; pointer-events: none; }
.obgyn-path.on-navy svg { width: 380px; height: 138px; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); }
.obgyn-path.on-navy .obgyn-path-node { fill: rgba(255,255,255,.5); }
.obgyn-path.on-navy.small { opacity: .35; }
@media (max-width: 900px) { .obgyn-path.on-navy svg { display: none; } }

/* -- Section 2: the continuous journey card -- */
.obgyn-journey-card { position: relative; background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 30px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: box-shadow .3s ease; }
.obgyn-journey-card:hover { box-shadow: 0 22px 40px -18px rgba(16,35,63,.22), 0 8px 18px -10px rgba(16,35,63,.1); }
.obgyn-journey { width: 100%; max-width: 340px; }
.obgyn-journey-node { fill: var(--blue-light); opacity: .7; transition: opacity .3s ease, r .3s ease; }
.obgyn-journey-node.accent { fill: var(--gold); }
.obgyn-journey-card:hover .obgyn-journey-node { opacity: 1; }
.obgyn-journey-card:hover .obgyn-journey-node:nth-of-type(2) { transition-delay: .05s; }
.obgyn-journey-card:hover .obgyn-journey-node:nth-of-type(3) { transition-delay: .1s; }
.obgyn-journey-card:hover .obgyn-journey-node:nth-of-type(4) { transition-delay: .15s; }
.obgyn-journey-label { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: .04em; font-size: .82rem; color: var(--text-muted); }

/* -- Section 3: approach cards threaded by one rising arc -- */
.obgyn-approach-wrap { position: relative; }
.obgyn-approach-arc { display: block; width: 100%; height: 70px; margin-bottom: -8px; overflow: visible; }
@media (max-width: 900px) { .obgyn-approach-arc { display: none; } }
.obgyn-approach-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .obgyn-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .obgyn-approach-grid { grid-template-columns: 1fr; } }
.obgyn-approach-card { background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); padding: 34px 26px 28px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.obgyn-approach-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(16,35,63,.26), 0 8px 18px -10px rgba(16,35,63,.12); border-color: rgba(201,162,39,.4); }
.obgyn-approach-index { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: var(--blue-light); margin-bottom: 16px; }
.obgyn-approach-card:nth-child(2) .obgyn-approach-index { color: #628096; }
.obgyn-approach-card:nth-child(3) .obgyn-approach-index { color: #95915F; }
.obgyn-approach-card:nth-child(4) .obgyn-approach-index { color: var(--gold); }
.obgyn-approach-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.obgyn-approach-card p { margin: 0; font-size: .94rem; }

/* -- Section 4: OB/GYN Focus — layered care-stage plates -- */
.obgyn-layer-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .obgyn-layer-grid { grid-template-columns: 1fr; gap: 60px; } }
.obgyn-layer-list { display: flex; flex-direction: column; gap: 4px; }
.obgyn-layer-row { display: flex; align-items: flex-start; gap: 22px; padding: 22px 14px; border-radius: var(--radius); transition: background .3s ease, transform .3s ease; }
.obgyn-layer-row:hover { background: var(--white); transform: translateX(2px); }
.obgyn-layer-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; color: rgba(16,35,63,.16); flex-shrink: 0; width: 46px; transition: color .3s ease, transform .3s ease; }
.obgyn-layer-row:hover .obgyn-layer-num { color: var(--gold); transform: scale(1.1); }
.obgyn-layer-body h3 { position: relative; display: inline-block; font-size: 1.15rem; margin-bottom: 8px; }
.obgyn-layer-body h3::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--gold); transition: width .35s ease; }
.obgyn-layer-row:hover .obgyn-layer-body h3::after { width: 100%; }
.obgyn-layer-body p { margin: 0; font-size: .95rem; }

.obgyn-layer-visual { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; }
.obgyn-layer-plate { position: absolute; width: 250px; height: 150px; border-radius: 18px; background: var(--white); border: 1px solid var(--grey-line); box-shadow: var(--shadow); transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease; }
.obgyn-layer-plate.back { transform: translate(-34px, -46px) scale(.9); opacity: .55; }
.obgyn-layer-plate.mid { transform: translate(-14px, -18px) scale(.96); opacity: .8; }
.obgyn-layer-plate.front { transform: translate(14px, 14px); box-shadow: 0 22px 40px -18px rgba(16,35,63,.26), 0 8px 18px -10px rgba(16,35,63,.12); animation: obgynFloat 5s ease-in-out infinite; }
.obgyn-layer-visual:hover .obgyn-layer-plate.back { transform: translate(-46px, -60px) scale(.88); opacity: .75; }
.obgyn-layer-visual:hover .obgyn-layer-plate.mid { transform: translate(-20px, -28px) scale(.95); opacity: .95; }
@keyframes obgynFloat { 0%,100% { transform: translate(14px, 14px); } 50% { transform: translate(14px, 6px); } }
.obgyn-layer-tag { position: absolute; top: 18px; left: 22px; font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; color: var(--text-muted); }
.obgyn-layer-plate.front .obgyn-layer-tag { color: var(--gold); }
.obgyn-layer-lines { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.obgyn-layer-lines i { display: block; height: 2px; border-radius: 1px; background: var(--grey-line); }
.obgyn-layer-lines i:nth-child(1) { width: 80%; }
.obgyn-layer-lines i:nth-child(2) { width: 55%; }
.obgyn-layer-lines i:nth-child(3) { width: 68%; background: rgba(201,162,39,.4); }
@media (max-width: 560px) { .obgyn-layer-plate { width: 210px; height: 130px; } .obgyn-layer-visual { height: 260px; } }

/* -- Section 5 / 6: navy difference + CTA carry the pathway forward -- */
.obgyn-difference { position: relative; overflow: hidden; }
.band.obgyn-cta { position: relative; overflow: hidden; }
.band.obgyn-cta .container { position: relative; z-index: 1; }

/* =========================================================
   ORTHOPEDICS — movement / alignment / recovery / progress
   A goniometer-inspired gauge (dashed alignment ring, tick
   marks, measured range-arc, pulsing joint core) paired with
   the shared .rhythm-line traveling path — restrained,
   technical, medical-engineering, never "sports."
   ========================================================= */
.ortho-hero { position: relative; background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%); color: var(--white); overflow: hidden; padding: 60px 0 52px; }
.ortho-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .ortho-hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.ortho-hero-copy .eyebrow { color: var(--gold); }
.ortho-hero-copy h1 { color: var(--white); font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 20px; }
.ortho-hero-copy p { color: rgba(255,255,255,.82); font-size: 1.07rem; max-width: 46ch; margin-bottom: 24px; }
.ortho-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }

/* -- The gauge: a goniometer-inspired joint, aligned, in motion -- */
.ortho-gauge { width: 100%; max-width: 420px; }
.ortho-gauge-ring { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 2 7; transform-origin: center; animation: orthoRotate 40s linear infinite; }
@keyframes orthoRotate { to { transform: rotate(360deg); } }
.ortho-gauge-ticks line { stroke: rgba(255,255,255,.3); stroke-width: 1.4; }
.ortho-gauge-arc { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; opacity: .8; animation: orthoPulse 5s ease-in-out infinite; }
@keyframes orthoPulse { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
.ortho-gauge-core { fill: var(--gold); animation: imPulse 5s ease-in-out infinite; }
.ortho-gauge-node { fill: rgba(255,255,255,.75); }
.ortho-gauge-node.accent { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.65)); }
.ortho-gauge.on-light .ortho-gauge-ring { stroke: rgba(16,35,63,.16); }
.ortho-gauge.on-light .ortho-gauge-ticks line { stroke: rgba(16,35,63,.24); }
.ortho-gauge.on-light .ortho-gauge-node { fill: var(--blue-light); }
.ortho-gauge.faded { position: absolute; inset: 0; max-width: none; opacity: .45; pointer-events: none; }
.ortho-gauge.faded svg { width: 400px; height: 200px; position: absolute; right: -50px; top: 50%; transform: translateY(-50%); }
.ortho-gauge.faded.small { opacity: .3; }
@media (max-width: 900px) { .ortho-gauge.faded svg { display: none; } }

/* -- Section 2: the gauge, aligned, in a card -- */
.ortho-gauge-card { position: relative; background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 30px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: box-shadow .3s ease; }
.ortho-gauge-card:hover { box-shadow: 0 22px 40px -18px rgba(16,35,63,.22), 0 8px 18px -10px rgba(16,35,63,.1); }
.ortho-gauge-card:hover .ortho-gauge-arc { opacity: 1; }
.ortho-gauge-card:hover .ortho-gauge-node { fill: var(--gold); }
.ortho-gauge-card .ortho-gauge { max-width: 360px; }
.ortho-gauge-label { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: .04em; font-size: .82rem; color: var(--text-muted); }

/* -- Section 3: approach cards threaded by one angular precision path -- */
.ortho-approach-wrap { position: relative; }
.ortho-approach-path { display: block; width: 100%; height: 70px; margin-bottom: -8px; overflow: visible; }
@media (max-width: 900px) { .ortho-approach-path { display: none; } }
.ortho-approach-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .ortho-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ortho-approach-grid { grid-template-columns: 1fr; } }
.ortho-approach-card { background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); padding: 34px 26px 28px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ortho-approach-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(16,35,63,.26), 0 8px 18px -10px rgba(16,35,63,.12); border-color: rgba(201,162,39,.4); }
.ortho-approach-index { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: var(--blue-light); margin-bottom: 16px; }
.ortho-approach-card:nth-child(2) .ortho-approach-index { color: #628096; }
.ortho-approach-card:nth-child(3) .ortho-approach-index { color: #95915F; }
.ortho-approach-card:nth-child(4) .ortho-approach-index { color: var(--gold); }
.ortho-approach-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.ortho-approach-card p { margin: 0; font-size: .94rem; }

/* -- Section 4: Orthopedic Focus — a larger, ticked, layered gauge -- */
.ortho-layer-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .ortho-layer-grid { grid-template-columns: 1fr; gap: 44px; } }
.ortho-layer-list { display: flex; flex-direction: column; gap: 4px; }
.ortho-layer-row { display: flex; align-items: flex-start; gap: 22px; padding: 22px 14px; border-radius: var(--radius); transition: background .3s ease, transform .3s ease; }
.ortho-layer-row:hover { background: var(--white); transform: translateX(2px); }
.ortho-layer-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; color: rgba(16,35,63,.16); flex-shrink: 0; width: 46px; transition: color .3s ease, transform .3s ease; }
.ortho-layer-row:hover .ortho-layer-num { color: var(--gold); transform: scale(1.1); }
.ortho-layer-body h3 { position: relative; display: inline-block; font-size: 1.15rem; margin-bottom: 8px; }
.ortho-layer-body h3::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--gold); transition: width .35s ease; }
.ortho-layer-row:hover .ortho-layer-body h3::after { width: 100%; }
.ortho-layer-body p { margin: 0; font-size: .95rem; }

.ortho-layers { display: flex; align-items: center; justify-content: center; }
.ortho-layers svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.ortho-layers-spin { transform-origin: center; animation: orthoRotate 46s linear infinite; }
.ortho-layers-spin line { stroke: rgba(16,35,63,.22); stroke-width: 1.4; }
.ortho-layers-ring { fill: none; }
.ortho-layers-ring.outer { stroke: rgba(46,111,206,.28); stroke-width: 1.2; stroke-dasharray: 2 7; }
.ortho-layers-ring.mid { stroke: rgba(98,128,150,.4); stroke-width: 1.4; }
.ortho-layers-ring.inner { stroke: var(--gold); stroke-width: 1.8; }
.ortho-layers-core { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(201,162,39,.5)); animation: imPulse 5s ease-in-out infinite; }

/* -- Section 5 / 6: navy difference + CTA carry the gauge and path forward -- */
.ortho-difference { position: relative; overflow: hidden; }
.band.ortho-cta { position: relative; overflow: hidden; }
.band.ortho-cta .container { position: relative; z-index: 1; }

/* =========================================================
   MORE SPECIALTIES — v2: interactive specialty profiles

   A shared "explore the system" UX (not a shrunken Popular
   Specialty template): an immersive orbital hero, a click/tap
   -driven Specialty Landscape, a click/tap-driven Revenue Cycle
   system, an editorial Snapshot dashboard, and a scroll-revealed
   brand moment. Interaction is powered by js/more-specialties.js
   via generic [data-ms2-group]/[data-ms2-trigger]/[data-ms2-panel]
   attributes — click/keyboard first (not hover-only), so every
   state is reachable on touch. Each specialty supplies its own
   SVG geometry inside these shared classes.
   ========================================================= */

/* Focus handling: every [data-ms2-trigger] node (buttons, SVG rings/
   nodes/zones made focusable via tabindex) gets no outline by default.
   The per-component :focus-visible rules further below restore a
   subtle gold outline for real keyboard navigation. As a backstop for
   browsers/elements that mark a mouse or touch activation as
   focus-visible (common for non-native controls like SVG <g>/<circle>),
   js/more-specialties.js tags <html> with .ms2-mouse-user on
   pointerdown and clears it on Tab, and the rule below wins on
   specificity to guarantee clicking/tapping never shows a focus box. */
[data-ms2-trigger], .uro-point { outline: none; }
html.ms2-mouse-user [data-ms2-trigger]:focus,
html.ms2-mouse-user [data-ms2-trigger]:focus-visible,
html.ms2-mouse-user .uro-point:focus,
html.ms2-mouse-user .uro-point:focus-visible {
  outline: none;
}

/* ---------- 01 Specialty Identity (hero) ---------- */
.ms-hero { position: relative; background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%); color: var(--white); overflow: hidden; padding: 64px 0 56px; }
.ms-hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .ms-hero-inner { grid-template-columns: 1fr; gap: 32px; } }
.ms-hero-copy .eyebrow { color: var(--gold); }
.ms-hero-copy h1 { color: var(--white); font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.ms-hero-copy p { color: rgba(255,255,255,.82); font-size: 1.03rem; max-width: 42ch; margin-bottom: 22px; }
.ms-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.ms-orbit { width: 100%; max-width: 440px; }
.ms-orbit svg { width: 100%; height: auto; display: block; overflow: visible; }
.ms-orbit-track { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; transition: stroke .5s ease; }
.ms-orbit-dot { fill: rgba(255,255,255,.8); transition: fill .5s ease; }
.ms-orbit-dot.accent { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.65)); }
.ms-orbit-core { fill: var(--gold); animation: imPulse 5s ease-in-out infinite; transition: filter .5s ease; }
.ms-orbit-ring { transform-origin: center; }
.ms-orbit-ring.r1 { animation: orthoRotate 34s linear infinite; }
.ms-orbit-ring.r2 { animation: orthoRotate 54s linear infinite reverse; }
.ms-orbit-ring.r3 { animation: orthoRotate 80s linear infinite; }
/* Hover: the whole orbital system quietly brightens and comes into focus. */
.ms-hero-visual:hover .ms-orbit-track { stroke: rgba(255,255,255,.34); }
.ms-hero-visual:hover .ms-orbit-dot { fill: rgba(255,255,255,1); }
.ms-hero-visual:hover .ms-orbit-core { filter: drop-shadow(0 0 20px rgba(201,162,39,.85)); }
.ms-hero-visual:hover .ms-orbit-ring.r1 { animation-duration: 20s; }
.ms-hero-visual:hover .ms-orbit-ring.r2 { animation-duration: 32s; }
.ms-hero-visual:hover .ms-orbit-ring.r3 { animation-duration: 48s; }
@media (max-width: 900px) { .ms-hero-visual { min-height: 260px; } .ms-orbit { max-width: 320px; } }

/* ---------- 02 The Specialty Landscape ---------- */
.ms-landscape { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .ms-landscape { grid-template-columns: 1fr; gap: 32px; } }
.ms-landscape-visual { display: flex; align-items: center; justify-content: center; }
.ms-landscape-visual svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.ms-landscape-ring { fill: none; stroke: rgba(16,35,63,.14); stroke-width: 1.4; cursor: pointer; transition: stroke .3s ease, stroke-width .3s ease; }
.ms-landscape-ring:hover:not(.is-active) { stroke: rgba(16,35,63,.34); stroke-width: 1.8; }
.ms-landscape-ring:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ms-landscape-ring.is-active { stroke: var(--gold); stroke-width: 2.4; }
.ms-landscape-core { fill: var(--gold); }
.ms-landscape-triggers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ms-landscape-trigger { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .86rem; color: var(--navy); background: var(--white); border: 1px solid var(--grey-line); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease; }
.ms-landscape-trigger:hover { transform: translateY(-2px); }
.ms-landscape-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ms-landscape-trigger.is-active { border-color: var(--gold); background: var(--navy); color: var(--white); }
.ms-landscape-detail { display: none; margin: 0; font-size: 1rem; color: var(--text-muted); max-width: 48ch; }
.ms-landscape-detail.is-active { display: block; animation: msFadeIn .35s ease; }
@keyframes msFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 03 How the Pieces Connect (revenue cycle system) ---------- */
.ms-cycle-path { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 6px; }
.ms-cycle-track { fill: none; stroke: rgba(16,35,63,.15); stroke-width: 1.6; }
.ms-cycle-node { cursor: pointer; }
.ms-cycle-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ms-cycle-node-dot { fill: var(--white); stroke: var(--blue-light); stroke-width: 2; transition: r .25s ease, fill .25s ease, stroke .25s ease; }
.ms-cycle-node:hover:not(.is-active) .ms-cycle-node-dot { r: 11; stroke: var(--gold); }
.ms-cycle-node.is-active .ms-cycle-node-dot { fill: var(--gold); stroke: var(--gold); }
.ms-cycle-node-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; fill: var(--text-muted); transition: fill .3s ease; }
.ms-cycle-node:hover:not(.is-active) .ms-cycle-node-label { fill: var(--navy); }
.ms-cycle-node.is-active .ms-cycle-node-label { fill: var(--navy); font-weight: 700; }
.ms-cycle-detail-wrap { max-width: 640px; margin: 8px auto 0; min-height: 60px; text-align: center; }
.ms-cycle-detail { display: none; margin: 0; font-size: 1.05rem; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 500; }
.ms-cycle-detail.is-active { display: block; animation: msFadeIn .35s ease; }
.ms-cycle-hint, .gastro-path-hint { text-align: center; margin: 0 0 18px; font-size: .84rem; color: var(--text-muted); }
.ms-cycle-hint svg, .gastro-path-hint svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: var(--gold); }

/* ---------- 04 Specialty Snapshot ---------- */
.ms-snapshot { max-width: 900px; margin: 0 auto; background: var(--white); border: 1px solid var(--grey-line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.ms-snapshot-panel { display: grid; grid-template-columns: .8fr 1.2fr; }
@media (max-width: 760px) { .ms-snapshot-panel { grid-template-columns: 1fr; } }
.ms-snapshot-tabs { background: var(--grey-bg); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) { .ms-snapshot-tabs { flex-direction: row; flex-wrap: wrap; } }
.ms-snapshot-tab { display: flex; align-items: baseline; gap: 10px; text-align: left; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .92rem; color: var(--navy); background: transparent; border: none; border-left: 3px solid transparent; border-radius: 6px; padding: 14px 16px; cursor: pointer; transition: background .25s ease, border-color .25s ease; }
.ms-snapshot-tab:hover { background: rgba(255,255,255,.6); }
.ms-snapshot-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ms-snapshot-tab.is-active { background: var(--white); border-left-color: var(--gold); }
.ms-snapshot-tab-index { font-weight: 700; color: rgba(16,35,63,.3); font-size: .82rem; }
.ms-snapshot-tab.is-active .ms-snapshot-tab-index { color: var(--gold); }
.ms-snapshot-display { padding: 34px 36px; display: flex; align-items: center; }
.ms-snapshot-detail { display: none; }
.ms-snapshot-detail.is-active { display: block; animation: msFadeIn .35s ease; }
.ms-snapshot-detail p { margin: 0; font-size: 1.06rem; color: var(--text-muted); max-width: 46ch; }
.ms-snapshot-statement { text-align: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--navy); padding: 22px 24px; margin: 0; border-top: 1px solid var(--grey-line); background: var(--grey-bg); }

/* ---------- 05 The Tri-Star Difference (brand moment) ---------- */
.ms-brand { position: relative; overflow: hidden; }
.ms-brand-eyebrow { color: var(--gold); }
.ms-brand-lines { margin: 4px 0 22px; }
.ms-brand-line { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 4.2vw, 3.1rem); line-height: 1.15; color: var(--white); opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.ms-brand-line.accent { color: var(--gold); }
.ms-brand-line:nth-child(1) { transition-delay: .05s; }
.ms-brand-line:nth-child(2) { transition-delay: .25s; }
.ms-brand-line:nth-child(3) { transition-delay: .45s; }
.ms-brand.in-view .ms-brand-line { opacity: 1; transform: translateY(0); }
.ms-brand-sub { color: rgba(255,255,255,.8); max-width: 56ch; margin: 0 auto 26px; }
.ms-brand-chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 26px; }
.ms-brand-chain .accent { color: var(--gold); }
.ms-brand-chain-line { display: inline-block; width: 28px; height: 1px; background: rgba(255,255,255,.3); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.ms-brand.in-view .ms-brand-chain-line { transform: scaleX(1); }
.ms-brand-chain-line:nth-of-type(1) { transition-delay: .7s; }
.ms-brand-chain-line:nth-of-type(2) { transition-delay: .9s; }
.ms-brand-chain-line:nth-of-type(3) { transition-delay: 1.1s; }

/* ---------- 06 CTA ---------- */
.band.ms-cta { position: relative; overflow: hidden; }
.band.ms-cta .container { position: relative; z-index: 1; }

/* =========================================================
   GASTROENTEROLOGY — precision through complexity

   A page-specific visual vocabulary (not the shared orbit/ring/
   wave system used by the other More Specialty pages): stacked
   translucent layers in the hero, a viewfinder "lens" for the
   landscape, a ruler-like precision path (square markers, not
   circles) for the revenue cycle, a blueprint-grid detail field
   for the snapshot, and a scatter-to-alignment brand animation.
   Reuses the generic .ms-hero/.band-alt/.section-head scaffolding
   and the data-ms2-* interaction engine, but every decorative
   element below is unique to this page.
   ========================================================= */

/* -- 01 hero: layers of care -- */
.gastro-layers { position: relative; width: 100%; max-width: 380px; height: 300px; margin: 0 auto; }
.gastro-layer { position: absolute; left: 50%; width: 280px; height: 44px; margin-left: -140px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; padding: 0 20px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.65); animation-duration: .8s; animation-timing-function: cubic-bezier(.2,.8,.2,1); transition: transform .4s ease, opacity .4s ease, border-color .4s ease; }
.gastro-layer.l1 { top: 0; transform: translateX(0); opacity: .38; animation-name: gastroSettle1; animation-delay: .05s; }
.gastro-layer.l2 { top: 56px; transform: translateX(14px); opacity: .55; animation-name: gastroSettle2; animation-delay: .18s; }
.gastro-layer.l3 { top: 112px; transform: translateX(28px); opacity: .72; animation-name: gastroSettle3; animation-delay: .31s; }
.gastro-layer.l4 { top: 168px; transform: translateX(42px); opacity: .88; animation-name: gastroSettle4; animation-delay: .44s; }
.gastro-layer.l5 { top: 224px; transform: translateX(56px); opacity: 1; animation-name: gastroSettle5; animation-delay: .57s; border-color: var(--gold); color: var(--white); background: rgba(201,162,39,.12); box-shadow: 0 12px 30px -12px rgba(0,0,0,.4); }
.gastro-layers:hover .gastro-layer { opacity: 1; border-color: rgba(255,255,255,.4); }
.gastro-layers:hover .gastro-layer.l1 { transform: translateX(10px); }
.gastro-layers:hover .gastro-layer.l2 { transform: translateX(26px); }
.gastro-layers:hover .gastro-layer.l3 { transform: translateX(42px); }
.gastro-layers:hover .gastro-layer.l4 { transform: translateX(58px); }
.gastro-layers:hover .gastro-layer.l5 { transform: translateX(72px); border-color: var(--gold); }
@keyframes gastroSettle1 { from { transform: translateX(-46px); opacity: 0; } to { transform: translateX(0); opacity: .38; } }
@keyframes gastroSettle2 { from { transform: translateX(-32px); opacity: 0; } to { transform: translateX(14px); opacity: .55; } }
@keyframes gastroSettle3 { from { transform: translateX(-18px); opacity: 0; } to { transform: translateX(28px); opacity: .72; } }
@keyframes gastroSettle4 { from { transform: translateX(-4px); opacity: 0; } to { transform: translateX(42px); opacity: .88; } }
@keyframes gastroSettle5 { from { transform: translateX(10px); opacity: 0; } to { transform: translateX(56px); opacity: 1; } }
.gastro-layers-pin { position: absolute; top: 4px; bottom: 4px; width: 1px; background: rgba(201,162,39,.35); opacity: 0; animation: gastroFadeIn 1s ease .8s forwards; }
.gastro-layers-pin.p1 { left: 32%; }
.gastro-layers-pin.p2 { left: 68%; }
@keyframes gastroFadeIn { to { opacity: 1; } }
@media (max-width: 900px) { .gastro-layers { max-width: 320px; height: 270px; } .gastro-layer { width: 240px; margin-left: -120px; } }

/* -- 02 the specialty landscape: the procedural lens -- */
.gastro-landscape { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .gastro-landscape { grid-template-columns: 1fr; gap: 32px; } }
.gastro-lens-frame { position: relative; max-width: 340px; margin: 0 auto; padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; }
.gastro-lens-corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--gold); opacity: .6; }
.gastro-lens-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.gastro-lens-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.gastro-lens-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.gastro-lens-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }
.gastro-lens-strip { padding: 16px 18px; border-radius: 6px; background: var(--grey-bg); border-left: 3px solid transparent; opacity: .55; transition: opacity .3s ease, background .3s ease, border-color .3s ease; cursor: pointer; }
.gastro-lens-strip span { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .9rem; color: var(--navy); }
.gastro-lens-strip:hover:not(.is-active) { opacity: .8; border-left-color: rgba(201,162,39,.4); }
.gastro-lens-strip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gastro-lens-strip.is-active { opacity: 1; background: var(--white); border-left-color: var(--gold); box-shadow: var(--shadow); }
.gastro-lens-panel { max-width: 460px; }
.gastro-lens-triggers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.gastro-lens-trigger { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .86rem; color: var(--navy); background: var(--white); border: 1px solid var(--grey-line); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease; }
.gastro-lens-trigger:hover { transform: translateY(-2px); }
.gastro-lens-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gastro-lens-trigger.is-active { border-color: var(--gold); background: var(--navy); color: var(--white); }
.gastro-lens-detail { display: none; margin: 0; font-size: 1rem; color: var(--text-muted); max-width: 46ch; }
.gastro-lens-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 03 how the pieces connect: the precision path -- */
.gastro-path { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 6px; }
.gastro-path-ruler { stroke: rgba(16,35,63,.14); stroke-width: 1.2; }
.gastro-path-tick { stroke: rgba(16,35,63,.14); stroke-width: 1; }
.gastro-path-segment { stroke: rgba(16,35,63,.14); stroke-width: 2; transition: stroke .3s ease, stroke-width .3s ease; }
.gastro-path-segment.is-active { stroke: var(--gold); stroke-width: 3; }
.gastro-path-node { cursor: pointer; }
.gastro-path-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gastro-path-marker { fill: var(--white); stroke: var(--blue-light); stroke-width: 2; transition: fill .25s ease, stroke .25s ease, transform .25s ease; transform-box: fill-box; transform-origin: center; transform: rotate(45deg) scale(1); }
.gastro-path-node:hover:not(.is-active) .gastro-path-marker { stroke: var(--gold); transform: rotate(45deg) scale(1.3); }
.gastro-path-node.is-active .gastro-path-marker { fill: var(--gold); stroke: var(--gold); }
.gastro-path-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; fill: var(--text-muted); transition: fill .3s ease; }
.gastro-path-node:hover:not(.is-active) .gastro-path-label { fill: var(--navy); }
.gastro-path-node.is-active .gastro-path-label { fill: var(--navy); font-weight: 700; }
.gastro-path-detail-wrap { max-width: 640px; margin: 8px auto 0; min-height: 60px; text-align: center; }
.gastro-path-detail { display: none; margin: 0; font-size: 1.05rem; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 500; }
.gastro-path-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 04 specialty snapshot: the detail grid -- */
.gastro-grid-outer { max-width: 900px; margin: 0 auto; background: var(--white); border: 1px solid var(--grey-line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; background-image: linear-gradient(rgba(16,35,63,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,35,63,.035) 1px, transparent 1px); background-size: 28px 28px; }
.gastro-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .gastro-grid { grid-template-columns: 1fr; } }
.gastro-grid-zone { padding: 30px 26px; cursor: pointer; opacity: .5; border-right: 1px solid var(--grey-line); border-bottom: 3px solid transparent; transition: opacity .3s ease, background .3s ease, border-color .3s ease; }
.gastro-grid-zone:last-child { border-right: none; }
.gastro-grid-zone:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.gastro-grid-zone.is-active { opacity: 1; background: rgba(201,162,39,.06); border-bottom-color: var(--gold); }
.gastro-grid-index { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: rgba(16,35,63,.35); margin-bottom: 10px; }
.gastro-grid-zone.is-active .gastro-grid-index { color: var(--gold); }
.gastro-grid-zone h3 { font-size: 1rem; margin: 0; }
.gastro-grid-detail-wrap { max-width: 900px; margin: 0 auto; text-align: center; padding: 22px 24px; border-top: 1px solid var(--grey-line); background: var(--grey-bg); border-radius: 0 0 20px 20px; }
.gastro-grid-detail { display: none; margin: 0; font-size: 1.02rem; color: var(--text-muted); }
.gastro-grid-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 05 the tri-star difference: precision in motion -- */
.gastro-brand { position: relative; overflow: hidden; }
.gastro-align { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 4px 0 26px; }
.gastro-align-mark { display: inline-block; width: 9px; height: 9px; background: rgba(255,255,255,.35); transition: transform .7s cubic-bezier(.2,.8,.2,1), background .7s ease; }
.gastro-align-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-right: 6px; }
.gastro-align-mark.m1 { transform: rotate(25deg) translateY(-8px); transition-delay: .1s; }
.gastro-align-mark.m2 { transform: rotate(-20deg) translateY(6px); transition-delay: .3s; }
.gastro-align-mark.m3 { transform: rotate(14deg) translateY(-4px); transition-delay: .5s; }
.gastro-brand.in-view .gastro-align-mark { transform: rotate(0) translateY(0); background: var(--gold); }

/* =========================================================
   PODIATRY — mobility, pathways, precision

   A page-specific visual vocabulary built around movement and
   continuity: a rotated step trail climbing to a precision
   marker in the hero, equal stepping-stone nodes tracing a
   path for the Mobility System, a connected vertical stepper
   for the approach, clean selectable snapshot cards, and a
   rising dot-path that lights up gold on scroll for the brand
   moment. Reuses the generic .ms-hero/.band-alt/.section-head/
   .approach-grid scaffolding and the data-ms2-* interaction
   engine, but every decorative element below is unique to
   this page.
   ========================================================= */

/* -- 01 hero: the step trail -- */
.pod-stride { width: 100%; max-width: 420px; margin: 0 auto; }
.pod-stride svg { width: 100%; height: auto; display: block; overflow: visible; }
.pod-stride-path { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.4; stroke-dasharray: 2 7; transition: stroke .5s ease; }
.pod-stride-step { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.32); stroke-width: 1; transform-box: fill-box; transform-origin: center; transform: rotate(var(--r, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1), fill .5s ease, stroke .5s ease; }
.pod-stride-step.accent { fill: rgba(201,162,39,.22); stroke: var(--gold); }
.pod-stride-ring { fill: none; stroke: rgba(201,162,39,.4); stroke-width: 1.4; }
.pod-stride-dot { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.6)); animation: imPulse 5s ease-in-out infinite; transition: filter .5s ease; }
.ms-hero-visual:hover .pod-stride-path { stroke: rgba(255,255,255,.42); }
.ms-hero-visual:hover .pod-stride-step { transform: rotate(var(--r, 0deg)) translateY(-4px); fill: rgba(255,255,255,.16); stroke: rgba(255,255,255,.5); }
.ms-hero-visual:hover .pod-stride-step.accent { fill: rgba(201,162,39,.32); }
.ms-hero-visual:hover .pod-stride-dot { filter: drop-shadow(0 0 18px rgba(201,162,39,.85)); }
@media (max-width: 900px) { .pod-stride { max-width: 320px; } }

/* -- 02 the complexity: the mobility system -- */
.pod-system { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .pod-system { grid-template-columns: 1fr; gap: 32px; } }
.pod-system-visual { display: flex; align-items: center; justify-content: center; }
.pod-system-visual svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.pod-system-track { fill: none; stroke: rgba(16,35,63,.14); stroke-width: 1.4; stroke-dasharray: 2 7; }
.pod-system-node { cursor: pointer; }
.pod-system-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pod-system-stone { fill: var(--white); stroke: rgba(16,35,63,.22); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; transition: fill .3s ease, stroke .3s ease, stroke-width .3s ease, transform .3s ease; }
.pod-system-mark { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; fill: rgba(16,35,63,.4); transition: fill .3s ease; }
.pod-system-node:hover:not(.is-active) .pod-system-stone { stroke: rgba(16,35,63,.4); transform: scale(1.05); }
.pod-system-node.is-active .pod-system-stone { fill: rgba(201,162,39,.14); stroke: var(--gold); stroke-width: 2.2; }
.pod-system-node.is-active .pod-system-mark { fill: var(--navy); }
.pod-system-panel { max-width: 460px; }
.pod-system-hint { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.pod-system-triggers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.pod-system-trigger { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .86rem; color: var(--navy); background: var(--white); border: 1px solid var(--grey-line); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease; }
.pod-system-trigger:hover { transform: translateY(-2px); }
.pod-system-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pod-system-trigger.is-active { border-color: var(--gold); background: var(--navy); color: var(--white); }
.pod-system-detail-wrap { min-height: 84px; }
.pod-system-detail { display: none; margin: 0; font-size: 1rem; color: var(--text-muted); max-width: 48ch; }
.pod-system-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 03 the tri-star approach: the connected stepper -- */
.pod-track { display: flex; flex-direction: column; max-width: 620px; margin: 0 auto; }
.pod-track-step { font: inherit; text-align: left; width: 100%; box-sizing: border-box; position: relative; display: flex; align-items: flex-start; gap: 20px; padding: 18px 16px 18px 4px; background: none; border: none; cursor: pointer; border-radius: 12px; transition: background .3s ease; }
.pod-track-step:hover, .pod-track-step:focus-visible { background: rgba(201,162,39,.06); }
.pod-track-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pod-track-connector { position: absolute; left: 27px; top: 50px; width: 2px; height: calc(100% - 14px); background: var(--grey-line); }
.pod-track-node { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--white); border: 2px solid var(--grey-line); display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .85rem; color: var(--navy); transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease; position: relative; z-index: 1; }
.pod-track-step.is-active .pod-track-node { border-color: var(--gold); background: var(--navy); color: var(--white); transform: scale(1.08); }
.pod-track-body { padding-top: 6px; }
.pod-track-title { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: 4px; transition: color .3s ease; }
.pod-track-step.is-active .pod-track-title { color: var(--blue); }
.pod-track-desc { display: block; font-size: .94rem; color: var(--text-muted); max-width: 48ch; }
@media (max-width: 560px) { .pod-track-step { gap: 14px; } .pod-track-node { width: 38px; height: 38px; font-size: .78rem; } .pod-track-connector { left: 23px; top: 42px; } }

/* -- 04 specialty snapshot: clean selectable cards -- */
.pod-snapshot-card { font: inherit; text-align: left; width: 100%; background: var(--white); cursor: pointer; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.pod-snapshot-card:hover, .pod-snapshot-card:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 32px -18px rgba(16,35,63,.26); }
.pod-snapshot-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pod-snapshot-card.is-active { border-color: var(--gold); box-shadow: 0 16px 32px -18px rgba(16,35,63,.26); }
.pod-snapshot-card.is-active .approach-number { color: rgba(201,162,39,.55); }

/* -- 05 the tri-star difference: every step matters -- */
.pod-continuum { position: relative; overflow: hidden; }
.pod-path-brand { max-width: 420px; margin: 6px auto 4px; }
.pod-path-brand svg { width: 100%; height: auto; display: block; overflow: visible; }
.pod-path-brand-line { stroke: rgba(255,255,255,.14); stroke-width: 1.4; }
.pod-path-brand-dot { fill: rgba(255,255,255,.25); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), fill .5s ease, filter .5s ease; }
.pod-path-brand-dot.final { fill: var(--gold); }
.pod-continuum.in-view .pod-path-brand-dot { opacity: 1; transform: scale(1); }
.pod-path-brand-dot:nth-of-type(1) { transition-delay: .1s; }
.pod-path-brand-dot:nth-of-type(2) { transition-delay: .28s; }
.pod-path-brand-dot:nth-of-type(3) { transition-delay: .46s; }
.pod-path-brand-dot:nth-of-type(4) { transition-delay: .64s; }
.pod-continuum.in-view .pod-path-brand-dot.final { transition-delay: .82s; filter: drop-shadow(0 0 10px rgba(201,162,39,.6)); }
@media (max-width: 560px) { .pod-path-brand { max-width: 320px; } }

/* =========================================================
   HOSPITAL — coordination through systems architecture

   A page-specific visual vocabulary built around coordination
   rather than illustration: a hub-and-branch schematic in the
   hero, a three-domain architecture with flow connectors for
   the landscape, a straight architectural backbone with a
   traveling data pulse for the revenue cycle, a set of distinct
   density glyphs (grid / bands / converging lines) for scale,
   and a scatter-to-order animation for the brand moment.
   Reuses the generic .ms-hero/.band-alt/.section-head
   scaffolding and the data-ms2-* interaction engine (including
   its [data-ms2-toggle] opt-in), but every decorative element
   below is unique to this page.
   ========================================================= */

/* -- 01 hero: the hospital ecosystem -- */
.hos-eco { width: 100%; max-width: 460px; margin: 0 auto; }
.hos-eco svg { width: 100%; height: auto; display: block; overflow: visible; }
.hos-eco-hub-box { fill: rgba(201,162,39,.12); stroke: rgba(255,255,255,.4); stroke-width: 1.2; transition: fill .4s ease, stroke .4s ease; }
.hos-eco-hub-label { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; fill: var(--white); }
.hos-eco-line { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; transition: stroke .4s ease, stroke-width .4s ease; }
.hos-eco-hit { fill: none; stroke: transparent; stroke-width: 22; }
.hos-eco-node { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.4); stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: fill .3s ease, stroke .3s ease, transform .3s ease; }
.hos-eco-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; fill: rgba(255,255,255,.55); transition: fill .3s ease; }
.hos-eco:hover .hos-eco-line { stroke: rgba(255,255,255,.3); }
.hos-eco:hover .hos-eco-hub-box { stroke: rgba(255,255,255,.65); }
.hos-eco-branch:hover .hos-eco-line { stroke: var(--gold); stroke-width: 1.8; }
.hos-eco-branch:hover .hos-eco-node { fill: rgba(201,162,39,.35); stroke: var(--gold); transform: scale(1.35); }
.hos-eco-branch:hover .hos-eco-label { fill: var(--white); }
.hos-eco:has(.hos-eco-branch:hover) .hos-eco-hub-box { stroke: var(--gold); fill: rgba(201,162,39,.22); }
@media (max-width: 900px) { .hos-eco { max-width: 360px; } }

/* -- shared instruction micro-label for sections 2-4 -- */
.hos-hint { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; text-align: center; }

/* -- 02 the hospital landscape: the department network -- */
.hos-network-row { display: flex; align-items: stretch; justify-content: center; gap: 0; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .hos-network-row { flex-direction: column; } }
.hos-network-zone { all: unset; box-sizing: border-box; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; cursor: pointer; background: var(--white); border: 1px solid var(--grey-line); border-radius: 14px; padding: 24px 22px; text-align: left; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease; }
.hos-network-zone:hover, .hos-network-zone:focus-visible, .hos-network-zone.is-active { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 18px 36px -20px rgba(16,35,63,.28); }
.hos-network-zone:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hos-network-zone-kicker { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(16,35,63,.35); transition: color .3s ease; }
.hos-network-zone:hover .hos-network-zone-kicker, .hos-network-zone.is-active .hos-network-zone-kicker { color: var(--gold); }
.hos-network-zone-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--navy); }
.hos-network-zone-sub { font-size: .88rem; color: var(--text-muted); line-height: 1.4; }
.hos-network-connector { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; position: relative; }
@media (max-width: 760px) { .hos-network-connector { flex: 0 0 28px; width: 100%; } }
.hos-network-connector span { display: block; width: 100%; height: 2px; background: rgba(16,35,63,.15); transition: background .4s ease; }
@media (max-width: 760px) { .hos-network-connector span { width: 2px; height: 100%; margin: 0 auto; } }
.hos-network-connector span::after { content: ''; position: absolute; right: 0; top: 50%; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid rgba(16,35,63,.15); transform: translateY(-50%); transition: border-left-color .4s ease; }
@media (max-width: 760px) { .hos-network-connector span::after { display: none; } }
.hos-network-connector .flow-dot { position: absolute; top: 50%; left: 6px; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--gold); opacity: 0; }
@media (max-width: 760px) { .hos-network-connector .flow-dot { display: none; } }
.hos-network[data-active="clinical"] .hos-network-connector.c1 span,
.hos-network[data-active="administrative"] .hos-network-connector.c1 span,
.hos-network[data-active="administrative"] .hos-network-connector.c2 span,
.hos-network[data-active="revenue"] .hos-network-connector.c2 span { background: var(--gold); }
.hos-network[data-active="clinical"] .hos-network-connector.c1 span::after,
.hos-network[data-active="administrative"] .hos-network-connector.c1 span::after,
.hos-network[data-active="administrative"] .hos-network-connector.c2 span::after,
.hos-network[data-active="revenue"] .hos-network-connector.c2 span::after { border-left-color: var(--gold); }
.hos-network[data-active="clinical"] .hos-network-connector.c1 .flow-dot,
.hos-network[data-active="administrative"] .hos-network-connector.c1 .flow-dot,
.hos-network[data-active="administrative"] .hos-network-connector.c2 .flow-dot,
.hos-network[data-active="revenue"] .hos-network-connector.c2 .flow-dot { opacity: 1; animation: hosFlow 1.6s ease-in-out infinite; }
@keyframes hosFlow { 0% { left: 6px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.hos-network-detail-wrap { max-width: 640px; margin: 26px auto 0; min-height: 56px; text-align: center; }
.hos-network-detail { display: none; margin: 0; font-size: 1.05rem; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 500; }
.hos-network-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 03 how the system connects: the operating system -- */
.hos-os-svg { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: auto; overflow: visible; }
.hos-os-grid-line { stroke: rgba(16,35,63,.06); stroke-width: 1; }
.hos-os-segment { stroke: rgba(16,35,63,.15); stroke-width: 1.4; transition: stroke .3s ease, stroke-width .3s ease; }
.hos-os-node-group { cursor: pointer; }
.hos-os-node-group:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.hos-os-node { fill: var(--white); stroke: rgba(16,35,63,.3); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; transition: fill .3s ease, stroke .3s ease, transform .3s ease; }
.hos-os-node-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .03em; fill: var(--text-muted); transition: fill .3s ease; }
.hos-os-node-group:hover:not(.is-active) .hos-os-node { stroke: rgba(16,35,63,.5); }
.hos-os-node-group.is-active .hos-os-node { fill: var(--gold); stroke: var(--gold); transform: scale(1.35); }
.hos-os-node-group.is-active .hos-os-node-label { fill: var(--navy); font-weight: 700; }
.hos-os[data-active="care"] .hos-os-segment.s1,
.hos-os[data-active="documentation"] .hos-os-segment.s1,
.hos-os[data-active="documentation"] .hos-os-segment.s2,
.hos-os[data-active="coding"] .hos-os-segment.s2,
.hos-os[data-active="coding"] .hos-os-segment.s3,
.hos-os[data-active="billing"] .hos-os-segment.s3,
.hos-os[data-active="billing"] .hos-os-segment.s4,
.hos-os[data-active="claims"] .hos-os-segment.s4,
.hos-os[data-active="claims"] .hos-os-segment.s5,
.hos-os[data-active="payment"] .hos-os-segment.s5 { stroke: var(--gold); stroke-width: 2.4; }
.hos-os-pulse { fill: var(--gold); opacity: .8; }
.hos-os-detail-wrap { max-width: 640px; margin: 14px auto 0; min-height: 56px; text-align: center; }
.hos-os-detail { display: none; margin: 0; font-size: 1.05rem; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 500; }
.hos-os-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 04 hospital operations: the scale system -- */
.hos-scale-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 980px; margin: 0 auto; align-items: start; }
@media (max-width: 820px) { .hos-scale-row { grid-template-columns: 1fr; gap: 20px; } }
.hos-scale-panel { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; text-align: center; cursor: pointer; background: var(--white); border: 1px solid var(--grey-line); border-radius: 16px; padding: 30px 22px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease; }
.hos-scale-panel:hover, .hos-scale-panel:focus-visible, .hos-scale-panel.is-active { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 18px 36px -20px rgba(16,35,63,.26); }
.hos-scale-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hos-scale-glyph { transition: transform .4s ease; }
.hos-scale-panel:hover .hos-scale-glyph, .hos-scale-panel.is-active .hos-scale-glyph { transform: scale(1.06); }
.hos-scale-glyph-grid { display: grid; grid-template-columns: repeat(5, 6px); grid-template-rows: repeat(4, 6px); gap: 2px; width: 72px; height: 56px; align-content: center; justify-content: center; }
.hos-scale-glyph-grid span { background: rgba(16,35,63,.14); border-radius: 1px; transition: background .4s ease; }
.hos-scale-panel.is-active .hos-scale-glyph-grid span { background: var(--gold); }
.hos-scale-glyph-bands { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 72px; height: 56px; }
.hos-scale-glyph-bands span { display: block; height: 5px; border-radius: 2px; background: rgba(16,35,63,.14); transition: background .4s ease; }
.hos-scale-glyph-bands span:nth-child(1) { width: 100%; }
.hos-scale-glyph-bands span:nth-child(2) { width: 70%; }
.hos-scale-glyph-bands span:nth-child(3) { width: 85%; }
.hos-scale-glyph-bands span:nth-child(4) { width: 55%; }
.hos-scale-glyph-bands span:nth-child(5) { width: 75%; }
.hos-scale-panel.is-active .hos-scale-glyph-bands span { background: var(--gold); }
.hos-scale-glyph-converge { width: 72px; height: 56px; overflow: visible; }
.hos-scale-glyph-converge line { stroke: rgba(16,35,63,.18); stroke-width: 1.4; transition: stroke .4s ease; }
.hos-scale-panel.is-active .hos-scale-glyph-converge line { stroke: var(--gold); }
.hos-scale-index { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: rgba(16,35,63,.35); transition: color .3s ease; }
.hos-scale-panel:hover .hos-scale-index, .hos-scale-panel.is-active .hos-scale-index { color: var(--gold); }
.hos-scale-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.hos-scale-caption { font-size: .86rem; color: var(--text-muted); line-height: 1.4; }
.hos-scale-detail-wrap { max-width: 640px; margin: 30px auto 0; min-height: 56px; text-align: center; }
.hos-scale-detail { display: none; margin: 0; font-size: 1.05rem; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 500; }
.hos-scale-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 05 the tri-star difference: the system comes together -- */
.hos-system { position: relative; overflow: hidden; }
.hos-system-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0 4px; min-height: 40px; }
.hos-system-node { width: 14px; height: 14px; border-radius: 3px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); opacity: .5; transition: transform .9s cubic-bezier(.2,.8,.2,1), background .9s ease, border-color .9s ease, opacity .9s ease, box-shadow .9s ease; }
.hos-system-node.n1 { transform: translate(-14px,16px) rotate(-14deg); transition-delay: .05s; }
.hos-system-node.n2 { transform: translate(18px,-20px) rotate(11deg); transition-delay: .15s; }
.hos-system-node.n3 { transform: translate(-20px,-14px) rotate(-9deg); transition-delay: .25s; }
.hos-system-node.n4 { transform: translate(16px,18px) rotate(16deg); transition-delay: .35s; }
.hos-system-node.n5 { transform: translate(-16px,10px) rotate(-12deg); transition-delay: .45s; }
.hos-system-node.n6 { transform: translate(20px,-12px) rotate(9deg); transition-delay: .55s; }
.hos-system.in-view .hos-system-node { transform: translate(0,0) rotate(0deg); background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.6); opacity: 1; }
.hos-system.in-view .hos-system-node.n6 { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(201,162,39,.55); }
.hos-system-line { position: absolute; left: 50%; top: 50%; width: 200px; height: 6px; transform: translate(-50%,-50%); overflow: visible; }
.hos-system-line line { fill: none; stroke: rgba(201,162,39,.7); stroke-width: 1.4; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.1s ease; transition-delay: .75s; }
.hos-system.in-view .hos-system-line line { stroke-dashoffset: 0; }

/* =========================================================
   UROLOGY — precision through controlled pathways

   A page-specific visual vocabulary built around direction and
   precision rather than illustration: an abstract waypoint route
   with a reticle marker system in the hero, a vertical precision
   spine with diamond stage-markers for the landscape, a signature
   horizontal checkpoint path with flag markers and cumulative
   emphasis for the revenue cycle, an alternating precision-point
   timeline for the specialty focus, and a converging-paths brand
   animation that resolves at a lit destination marker. Reuses the
   generic .ms-hero/.band-alt/.section-head scaffolding and the
   data-ms2-* interaction engine (including its [data-ms2-toggle]
   opt-in), but every decorative element below is unique to this
   page.
   ========================================================= */

/* -- shared instruction micro-label for sections 2-3 -- */
.uro-hint { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; text-align: center; }

/* -- 01 hero: the clinical route -- */
.uro-route { width: 100%; max-width: 420px; margin: 0 auto; }
.uro-route svg { width: 100%; height: auto; display: block; overflow: visible; }
.uro-route-path { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.4; stroke-linecap: round; transition: stroke .5s ease, stroke-width .5s ease; }
.uro-route-ring { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1; transition: stroke .4s ease; }
.uro-route-tick { stroke: rgba(255,255,255,.22); stroke-width: 1; transition: stroke .4s ease; }
.uro-route-dot { fill: rgba(255,255,255,.55); transition: fill .4s ease; }
.uro-route-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; fill: rgba(255,255,255,.5); transition: fill .4s ease; }
.uro-route-pulse { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 5px rgba(201,162,39,.7)); transition: opacity .4s ease; }
.ms-hero-visual:hover .uro-route-pulse { opacity: .9; }
.ms-hero-visual:hover .uro-route-path { stroke: rgba(255,255,255,.5); stroke-width: 1.8; }
.ms-hero-visual:hover .uro-route-ring { stroke: rgba(201,162,39,.6); }
.ms-hero-visual:hover .uro-route-tick { stroke: rgba(201,162,39,.75); }
.ms-hero-visual:hover .uro-route-dot { fill: var(--gold); }
.ms-hero-visual:hover .uro-route-label { fill: rgba(255,255,255,.8); }
.uro-route-mark--dest .uro-route-ring { stroke: var(--gold); stroke-width: 1.4; }
.uro-route-mark--dest .uro-route-dot { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.65)); transform-box: fill-box; transform-origin: center; animation: imPulse 5s ease-in-out infinite; }
.uro-route-mark--dest .uro-route-label { fill: var(--gold); }
@media (max-width: 900px) { .uro-route { max-width: 320px; } }

/* -- 02 the specialty landscape: the precision spine -- */
.uro-stage { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .uro-stage { grid-template-columns: 1fr; gap: 32px; } }
.uro-stage-visual { display: flex; align-items: center; justify-content: center; }
.uro-stage-visual svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.uro-stage-spine { stroke: rgba(16,35,63,.16); stroke-width: 1.4; }
.uro-stage-arrow { fill: rgba(16,35,63,.16); }
.uro-stage-node { cursor: pointer; }
.uro-stage-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.uro-stage-diamond { fill: var(--white); stroke: var(--blue-light); stroke-width: 2; transition: fill .25s ease, stroke .25s ease, transform .25s ease; transform-box: fill-box; transform-origin: center; transform: rotate(45deg) scale(1); }
.uro-stage-node:hover:not(.is-active) .uro-stage-diamond { stroke: var(--gold); transform: rotate(45deg) scale(1.15); }
.uro-stage-node.is-active .uro-stage-diamond { fill: var(--gold); stroke: var(--gold); }
.uro-stage-connector { stroke: rgba(16,35,63,.16); stroke-width: 1; transition: stroke .3s ease; }
.uro-stage-node.is-active .uro-stage-connector { stroke: var(--gold); }
.uro-stage-index { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; fill: rgba(16,35,63,.32); transition: fill .3s ease; }
.uro-stage-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; fill: var(--text-muted); transition: fill .3s ease; }
.uro-stage-node:hover:not(.is-active) .uro-stage-label { fill: var(--navy); }
.uro-stage-node.is-active .uro-stage-index, .uro-stage-node.is-active .uro-stage-label { fill: var(--navy); font-weight: 700; }
.uro-stage-panel { max-width: 460px; }
.uro-stage-triggers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.uro-stage-trigger { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .86rem; color: var(--navy); background: var(--white); border: 1px solid var(--grey-line); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease; }
.uro-stage-trigger:hover { transform: translateY(-2px); }
.uro-stage-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.uro-stage-trigger.is-active { border-color: var(--gold); background: var(--navy); color: var(--white); }
.uro-stage-detail-wrap { min-height: 84px; }
.uro-stage-detail { display: none; margin: 0; font-size: 1rem; color: var(--text-muted); max-width: 48ch; }
.uro-stage-detail.is-active { display: block; animation: msFadeIn .35s ease; }

/* -- 03 how the process moves: the signature checkpoint path -- */
.uro-checkpoint-svg { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 6px; }
.uro-tick { stroke: rgba(16,35,63,.12); stroke-width: 1; }
.uro-segment { stroke: rgba(16,35,63,.15); stroke-width: 1.6; transition: stroke .3s ease, stroke-width .3s ease; }
.uro-node { cursor: pointer; }
.uro-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.uro-node-arrow { fill: rgba(16,35,63,.2); opacity: .5; transition: fill .3s ease, opacity .3s ease; }
.uro-node-ring { fill: var(--white); stroke: var(--blue-light); stroke-width: 2; transition: r .25s ease, fill .25s ease, stroke .25s ease, stroke-width .25s ease; }
.uro-node-dot { fill: var(--blue-light); transition: fill .25s ease; }
.uro-node-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; fill: var(--text-muted); transition: fill .3s ease; }
.uro-node:hover:not(.is-active) .uro-node-ring { r: 11; stroke: var(--gold); }
.uro-node:hover:not(.is-active) .uro-node-arrow { opacity: .9; }
.uro-node.is-active .uro-node-ring { fill: var(--gold); stroke: var(--gold); }
.uro-node.is-active .uro-node-dot { fill: var(--white); }
.uro-node.is-active .uro-node-arrow { fill: var(--gold); opacity: 1; }
.uro-node.is-active .uro-node-label { fill: var(--navy); font-weight: 700; }
.uro-checkpoint-pulse { fill: var(--gold); opacity: .55; }
.uro-checkpoint-detail-wrap { max-width: 640px; margin: 8px auto 0; min-height: 60px; text-align: center; }
.uro-checkpoint-detail { display: none; margin: 0; font-size: 1.05rem; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 500; }
.uro-checkpoint-detail.is-active { display: block; animation: msFadeIn .35s ease; }
/* the pathway leading toward the active checkpoint stays emphasized */
.uro-checkpoint[data-active="coding"] .uro-segment.s1,
.uro-checkpoint[data-active="claims"] .uro-segment.s1,
.uro-checkpoint[data-active="claims"] .uro-segment.s2,
.uro-checkpoint[data-active="followup"] .uro-segment.s1,
.uro-checkpoint[data-active="followup"] .uro-segment.s2,
.uro-checkpoint[data-active="followup"] .uro-segment.s3,
.uro-checkpoint[data-active="reimbursement"] .uro-segment.s1,
.uro-checkpoint[data-active="reimbursement"] .uro-segment.s2,
.uro-checkpoint[data-active="reimbursement"] .uro-segment.s3,
.uro-checkpoint[data-active="reimbursement"] .uro-segment.s4 { stroke: var(--gold); stroke-width: 2.6; }
/* the next checkpoint subtly previews before it's selected */
.uro-checkpoint[data-active="documentation"] .uro-node[data-ms2-trigger="coding"] .uro-node-ring,
.uro-checkpoint[data-active="coding"] .uro-node[data-ms2-trigger="claims"] .uro-node-ring,
.uro-checkpoint[data-active="claims"] .uro-node[data-ms2-trigger="followup"] .uro-node-ring,
.uro-checkpoint[data-active="followup"] .uro-node[data-ms2-trigger="reimbursement"] .uro-node-ring { stroke: rgba(201,162,39,.65); stroke-width: 2.2; }

/* -- 04 specialty focus: the precision-point timeline -- */
.uro-points { position: relative; max-width: 720px; margin: 0 auto; padding: 4px 0; }
.uro-points::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; background: rgba(16,35,63,.12); transform: translateX(-50%); }
.uro-point-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 68px; margin-bottom: 48px; }
.uro-point-item:last-child { margin-bottom: 0; }
.uro-point { box-sizing: border-box; position: relative; grid-column: 1; cursor: pointer; background: var(--white); border: 1px solid var(--grey-line); border-radius: 14px; padding: 26px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease; }
.uro-point-item.right .uro-point { grid-column: 2; }
.uro-point-item.left .uro-point::before,
.uro-point-item.right .uro-point::before { content: ''; position: absolute; top: 34px; width: 34px; height: 2px; background: rgba(16,35,63,.18); transition: background .3s ease; }
.uro-point-item.left .uro-point::before { right: -34px; }
.uro-point-item.right .uro-point::before { left: -34px; }
.uro-point-item.left .uro-point::after,
.uro-point-item.right .uro-point::after { content: ''; position: absolute; top: 29px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue-light); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.uro-point-item.left .uro-point::after { right: -39px; }
.uro-point-item.right .uro-point::after { left: -39px; }
.uro-point:hover, .uro-point:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 32px -18px rgba(16,35,63,.24); }
.uro-point:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.uro-point:hover::before, .uro-point:focus-visible::before { background: var(--gold); }
.uro-point:hover::after, .uro-point:focus-visible::after { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 10px rgba(201,162,39,.5); }
.uro-point-index { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: rgba(16,35,63,.32); margin-bottom: 8px; transition: color .3s ease; }
.uro-point:hover .uro-point-index, .uro-point:focus-visible .uro-point-index { color: var(--gold); }
.uro-point-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--navy); margin: 0 0 8px; }
.uro-point-caption { margin: 0; font-size: .9rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 700px) {
  .uro-points::before { left: 18px; }
  .uro-point-item { grid-template-columns: 1fr; column-gap: 0; padding-left: 44px; margin-bottom: 30px; }
  .uro-point-item .uro-point { grid-column: 1; }
  .uro-point-item.left .uro-point::before, .uro-point-item.right .uro-point::before { left: -26px; right: auto; width: 26px; }
  .uro-point-item.left .uro-point::after, .uro-point-item.right .uro-point::after { left: -31px; right: auto; }
}

/* -- 05 the tri-star difference: paths converge on a destination -- */
.uro-destination { position: relative; overflow: hidden; }
.uro-destination-viz { max-width: 340px; margin: 4px auto 22px; }
.uro-destination-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.uro-dest-path { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 282; stroke-dashoffset: 282; transition: stroke-dashoffset 1s ease, stroke .8s ease; }
.uro-destination.in-view .uro-dest-path { stroke-dashoffset: 0; stroke: rgba(255,255,255,.55); }
.uro-destination.in-view .uro-dest-path.p1 { transition-delay: .05s; }
.uro-destination.in-view .uro-dest-path.p2 { transition-delay: .2s; }
.uro-destination.in-view .uro-dest-path.p3 { transition-delay: .35s; }
.uro-destination.in-view .uro-dest-path.p4 { transition-delay: .5s; }
.uro-dest-ring { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.5); transition: opacity .6s ease, transform .6s ease, stroke .6s ease; transition-delay: .8s; }
.uro-dest-marker { fill: rgba(255,255,255,.4); transform-box: fill-box; transform-origin: center; transition: fill .6s ease, filter .6s ease; transition-delay: .7s; }
.uro-destination.in-view .uro-dest-ring { opacity: 1; transform: scale(1); stroke: rgba(201,162,39,.5); }
.uro-destination.in-view .uro-dest-marker { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(201,162,39,.65)); animation: imPulse 5s ease-in-out infinite .9s; }

/* =========================================================
   SPECIALTIES DIRECTORY — the map of Tri-Star's expertise

   A distinct visual vocabulary for the "View All Specialties"
   overview page: this page discovers/navigates rather than
   explains, so it gets its own vocabulary instead of miniature
   versions of the specialty-page visuals. A radial constellation
   for the hero, an editorial numbered directory list as the main
   navigation surface, a scroll-revealed scattered coverage field,
   a toggleable specialty finder built on the shared data-ms2-*
   engine, and a many-dots-converge-to-one brand moment. Reuses
   the generic .ms-hero/.band/.band-alt/.section-head/.hipaa-*
   scaffolding, but every decorative element below is unique to
   this page.
   ========================================================= */

/* -- shared -- */
.spec-cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }

/* -- 01 hero: the specialty constellation -- */
.spec-constellation { width: 100%; max-width: 460px; margin: 0 auto; }
.spec-constellation svg { width: 100%; height: auto; display: block; overflow: visible; }
.spec-hub-ring { fill: rgba(201,162,39,.1); stroke: rgba(255,255,255,.35); stroke-width: 1.2; }
.spec-hub-label { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; fill: var(--white); }
.spec-hub-sub { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; fill: var(--gold); }
.spec-node { cursor: pointer; outline: none; }
.spec-node-line { stroke: rgba(255,255,255,.22); stroke-width: 1; transition: stroke .35s ease, stroke-width .35s ease, opacity .35s ease; }
.spec-node-ring { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1; stroke-dasharray: 2 3; transition: stroke .3s ease, stroke-width .3s ease, opacity .3s ease; }
.spec-node-dot { fill: rgba(255,255,255,.55); transition: fill .3s ease, r .3s ease, opacity .3s ease; }
.spec-node-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 9.5px; fill: rgba(255,255,255,.55); transition: fill .3s ease, opacity .3s ease; }
.spec-node:hover .spec-node-line, .spec-node:focus-visible .spec-node-line { stroke: var(--gold); stroke-width: 1.6; }
.spec-node:hover .spec-node-ring, .spec-node:focus-visible .spec-node-ring { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: none; }
.spec-node:hover .spec-node-dot, .spec-node:focus-visible .spec-node-dot { fill: var(--gold); r: 6; }
.spec-node:hover .spec-node-label, .spec-node:focus-visible .spec-node-label { fill: var(--white); font-weight: 700; }
.spec-constellation svg:has(.spec-node:hover) .spec-node:not(:hover) .spec-node-line,
.spec-constellation svg:has(.spec-node:focus-visible) .spec-node:not(:focus-visible) .spec-node-line { opacity: .4; }
.spec-constellation svg:has(.spec-node:hover) .spec-node:not(:hover) .spec-node-ring,
.spec-constellation svg:has(.spec-node:focus-visible) .spec-node:not(:focus-visible) .spec-node-ring,
.spec-constellation svg:has(.spec-node:hover) .spec-node:not(:hover) .spec-node-dot,
.spec-constellation svg:has(.spec-node:focus-visible) .spec-node:not(:focus-visible) .spec-node-dot { opacity: .4; }
.spec-constellation svg:has(.spec-node:hover) .spec-node:not(:hover) .spec-node-label,
.spec-constellation svg:has(.spec-node:focus-visible) .spec-node:not(:focus-visible) .spec-node-label { opacity: .3; }
.spec-constellation-hint { text-align: center; margin: 14px 0 0; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
@media (max-width: 900px) { .spec-constellation { max-width: 340px; } }

/* -- 02 specialty directory: the editorial list -- */
.spec-directory { max-width: 920px; margin: 0 auto; }
.spec-directory-group { margin-bottom: 44px; }
.spec-directory-group:last-child { margin-bottom: 0; }
.spec-directory-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.spec-directory-heading h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0; }
.spec-directory-heading span { font-size: .8rem; color: var(--text-muted); }
.spec-row-list { border-top: 1px solid var(--grey-line); }
.spec-row { position: relative; display: flex; align-items: center; gap: 22px; padding: 22px 6px; border-bottom: 1px solid var(--grey-line); outline: none; scroll-margin-top: 100px; }
.spec-directory-group { scroll-margin-top: 90px; }
.spec-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.spec-row:hover::after, .spec-row:focus-visible::after { transform: scaleX(1); }
.spec-row-index { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.25rem; color: rgba(16,35,63,.22); min-width: 42px; transition: color .3s ease; }
.spec-row:hover .spec-row-index, .spec-row:focus-visible .spec-row-index { color: var(--gold); }
.spec-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.spec-row-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--navy); transition: transform .3s ease; }
.spec-row:hover .spec-row-name, .spec-row:focus-visible .spec-row-name { transform: translateX(6px); }
.spec-row-badge {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(201,162,39,.14); color: var(--gold); font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.spec-row-desc { font-size: .88rem; color: var(--text-muted); }
.spec-row-arrow { flex-shrink: 0; font-size: 1.2rem; color: rgba(16,35,63,.25); transition: transform .3s ease, color .3s ease; }
.spec-row:hover .spec-row-arrow, .spec-row:focus-visible .spec-row-arrow { transform: translateX(6px); color: var(--gold); }
.spec-row:focus-visible { background: rgba(201,162,39,.05); }
.spec-row:target { background: rgba(201,162,39,.08); animation: specRowLanded 1.8s ease; }
.spec-row:target::after { transform: scaleX(1); }
.spec-row:target .spec-row-index { color: var(--gold); }
.spec-row:target .spec-row-arrow { color: var(--gold); transform: translateX(6px); }
@keyframes specRowLanded { 0%, 40% { background: rgba(201,162,39,.16); } 100% { background: rgba(201,162,39,.08); } }
@media (max-width: 560px) { .spec-row { gap: 14px; padding: 18px 4px; } .spec-row-index { min-width: 30px; font-size: 1.05rem; } .spec-row-name { font-size: 1.02rem; } }

/* -- 03 specialty coverage: the coverage field -- */
.spec-field { position: relative; overflow: hidden; }
.spec-field-svg { display: block; width: 100%; max-width: 960px; margin: 0 auto; height: auto; overflow: visible; }
.spec-field-line { fill: none; stroke: rgba(16,35,63,.16); stroke-width: 1.2; stroke-dasharray: 340; stroke-dashoffset: 340; opacity: 0; transition-property: stroke-dashoffset, opacity; transition-duration: .9s, .4s; transition-timing-function: ease; transition-delay: calc(.5s + var(--i, 0) * .05s); }
.spec-field.in-view .spec-field-line { stroke-dashoffset: 0; opacity: 1; }
.spec-field-point { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; transition-delay: calc(var(--i, 0) * .06s); }
.spec-field.in-view .spec-field-point { transform: scale(1); opacity: 1; }
.spec-field-ring { fill: none; stroke: rgba(201,162,39,.4); stroke-width: 1; }
.spec-field-dot { fill: var(--gold); }
.spec-field-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 10px; fill: var(--text-muted); opacity: 0; transition: opacity .5s ease; transition-delay: .95s; }
.spec-field.in-view .spec-field-label { opacity: 1; }
@media (max-width: 640px) { .spec-field-label { display: none; } }

/* -- 04 find your specialty: the finder -- */
.spec-finder { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: start; max-width: 1000px; margin: 0 auto; }
@media (max-width: 860px) { .spec-finder { grid-template-columns: 1fr; gap: 26px; } }
.spec-finder-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.spec-chip { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .86rem; color: var(--navy); background: var(--white); border: 1px solid var(--grey-line); border-radius: 999px; padding: 11px 20px; cursor: pointer; outline: none; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease; }
.spec-chip:hover { transform: translateY(-2px); }
.spec-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.spec-chip.is-active { border-color: var(--gold); background: var(--navy); color: var(--white); }
.spec-finder-display { position: relative; background: var(--white); border: 1px solid var(--grey-line); border-radius: 20px; box-shadow: var(--shadow); padding: 40px; min-height: 220px; display: flex; align-items: center; }
@media (max-width: 560px) { .spec-finder-display { padding: 30px 26px; min-height: 180px; } }
.spec-finder-empty { margin: 0; font-size: 1.05rem; color: var(--text-muted); }
.spec-finder[data-active] .spec-finder-empty { display: none; }
.spec-finder-result { display: none; width: 100%; }
.spec-finder-result.is-active { display: block; animation: msFadeIn .35s ease; }
.spec-finder-eyebrow { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.spec-finder-line { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.4rem; color: var(--navy); margin: 0 0 22px; max-width: 30ch; }

/* -- 05 the tri-star difference: many become one -- */
.spec-oneness { position: relative; overflow: hidden; }
.spec-oneness-viz { max-width: 400px; margin: 4px auto 8px; }
.spec-oneness-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.spec-oneness-baseline { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 380; stroke-dashoffset: 380; opacity: 0; transition: stroke-dashoffset .8s ease, opacity .3s ease; transition-delay: .9s, .9s; }
.spec-oneness.in-view .spec-oneness-baseline { stroke-dashoffset: 0; opacity: 1; }
.spec-many-dot { fill: rgba(255,255,255,.5); transition-property: cy, opacity, r; transition-duration: .7s, .5s, .5s; transition-timing-function: cubic-bezier(.2,.8,.2,1), ease, ease; transition-delay: calc(var(--i, 0) * .07s), calc(var(--i, 0) * .07s + 1.35s), calc(var(--i, 0) * .07s + 1.35s); }
.spec-oneness.in-view .spec-many-dot { cy: 70; opacity: 0; r: 0; }
.spec-oneness-core { fill: var(--gold); r: 0; opacity: 0; filter: drop-shadow(0 0 0 rgba(201,162,39,0)); transition: r .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease; transition-delay: 1.55s, 1.55s; }
.spec-oneness.in-view .spec-oneness-core { r: 12; opacity: 1; filter: drop-shadow(0 0 10px rgba(201,162,39,.6)); animation: imPulse 5s ease-in-out infinite 1.6s; }
.spec-oneness-chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 10px; }
.spec-oneness-chain .accent { color: var(--gold); }
.spec-oneness-chain-line { display: inline-block; width: 26px; height: 1px; background: rgba(255,255,255,.3); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.spec-oneness.in-view .spec-oneness-chain-line { transform: scaleX(1); }
.spec-oneness-chain-line:nth-of-type(1) { transition-delay: 1.5s; }
.spec-oneness-chain-line:nth-of-type(2) { transition-delay: 1.7s; }

/* =========================================================
   CONTACT — trust, connection, conversation

   Deliberately calmer than the Services/Specialties pages: no
   click-to-explore visuals, no dense SVG systems. A restrained
   two-line "connection" mark in the hero, three foundation
   pillars for Trust/Reliability/Flexibility, a simple three-step
   approach progression, and a single tapering line that resolves
   into a partnership "anchor" for the brand moment. Reuses the
   generic .ms-hero/.band/.band-alt/.section-head/.hipaa-* /
   .contact-grid scaffolding; only the decorative marks below are
   specific to this page.
   ========================================================= */

/* -- 01 hero: the connection mark -- */
.ct-connect { width: 100%; max-width: 340px; margin: 0 auto; }
.ct-connect svg { width: 100%; height: auto; display: block; overflow: visible; }
.ct-connect-path { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1.4; stroke-linecap: round; }
.ct-connect-mid { fill: rgba(255,255,255,.4); }
.ct-connect-ring { fill: none; stroke: rgba(201,162,39,.35); stroke-width: 1; }
.ct-connect-point { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.6)); animation: imPulse 6s ease-in-out infinite; }
@media (max-width: 900px) { .ct-connect { max-width: 280px; } }

/* -- 02 why partner with tri-star: three foundations -- */
.ct-pillars { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 980px; margin: 0 auto; text-align: center; }
.ct-pillars::before { content: ''; position: absolute; left: 6%; right: 6%; top: 70px; height: 1px; background: var(--grey-line); z-index: 0; }
@media (max-width: 760px) { .ct-pillars { grid-template-columns: 1fr; gap: 36px; } .ct-pillars::before { display: none; } }
.ct-pillar { position: relative; z-index: 1; transition: transform .3s ease; }
.ct-pillar:hover { transform: translateY(-4px); }
.ct-pillar-mark { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 70px; margin-bottom: 14px; }
.ct-pillar-bar { display: block; width: 3px; background: var(--blue-light); border-radius: 2px; transition: background .3s ease, box-shadow .3s ease; }
.ct-pillar-base { display: block; width: 34px; height: 3px; background: var(--gold); border-radius: 2px; margin-top: 3px; transition: box-shadow .3s ease; }
.ct-pillar:hover .ct-pillar-bar { background: var(--gold); }
.ct-pillar:hover .ct-pillar-base { box-shadow: 0 0 12px rgba(201,162,39,.5); }
.ct-pillar-index { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: rgba(16,35,63,.32); margin-bottom: 6px; }
.ct-pillar h3 { font-size: 1.15rem; margin-bottom: 8px; }
.ct-pillar p { font-size: .92rem; max-width: 30ch; margin: 0 auto; }

/* -- 03 our approach: listen / understand / support -- */
.ct-approach { display: flex; align-items: flex-start; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .ct-approach { flex-direction: column; align-items: stretch; gap: 4px; } }
.ct-approach-step { flex: 1 1 0; text-align: center; padding: 0 12px; }
.ct-approach-num { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 8px; }
.ct-approach-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.ct-approach-step p { font-size: .9rem; margin: 0; max-width: 26ch; margin-left: auto; margin-right: auto; }
.ct-approach-connector { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; padding-top: 10px; }
.ct-approach-connector span { display: block; width: 100%; height: 1px; background: var(--grey-line); position: relative; transform: scaleX(0); transform-origin: left; transition: transform .8s ease; }
.ct-approach.in-view .ct-approach-connector span { transform: scaleX(1); }
.ct-approach-connector span::after { content: ''; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: translateY(-50%) rotate(45deg); }
@media (max-width: 760px) {
  .ct-approach-step { padding: 10px 0; text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .ct-approach-step h3, .ct-approach-step p { display: inline; }
  .ct-approach-step p { margin-left: 6px; }
  .ct-approach-connector { flex: 0 0 auto; width: 1px; height: 20px; margin-left: 10px; padding: 0; }
  .ct-approach-connector span { width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; }
  .ct-approach.in-view .ct-approach-connector span { transform: scaleY(1); }
  .ct-approach-connector span::after { display: none; }
}

/* -- shared contact-page note -- */
.ct-info-note { margin: 22px 0 0; font-size: .86rem; color: var(--text-muted); }
.ct-social { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 2px; }
.ct-social-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(201, 162, 39, 0.45); transition: color .2s ease, text-decoration-color .2s ease; }
.ct-social-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.ct-social-link:hover { color: var(--blue-light); text-decoration-color: var(--gold); }
.ct-form-hipaa { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--grey-line); }
.ct-form-hipaa-icon { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; color: var(--gold); }
.ct-form-hipaa-icon svg { width: 100%; height: 100%; display: block; }
.ct-form-hipaa p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-muted); }
.ct-form-hipaa strong { color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 600; }
#get-in-touch { scroll-margin-top: 82px; }

/* -- 05 the tri-star difference: a relationship that strengthens -- */
.ct-bond { position: relative; overflow: hidden; }
.ct-bond-viz { max-width: 400px; margin: 4px auto 0; }
.ct-bond-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.ct-bond-taper { fill: var(--gold); opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.ct-bond.in-view .ct-bond-taper { transform: scaleX(1); }
.ct-bond-anchor { fill: var(--gold); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); filter: drop-shadow(0 0 0 rgba(201,162,39,0)); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; transition-delay: 1s, 1s, 1s; }
.ct-bond.in-view .ct-bond-anchor { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 8px rgba(201,162,39,.6)); }
.ct-bond-labels { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ct-bond-labels .accent { color: var(--gold); }
@media (max-width: 560px) { .ct-bond-labels { font-size: .64rem; } }

/* =========================================================
   MAIN SERVICES — the command center / bigger picture

   The executive overview sitting above the deep-dive Core
   Service and Specialty pages: one tier calmer than those, and
   built around its own vocabulary (a stepped foundation glyph,
   a spine-and-satellite service pathway, a continuous revenue-
   cycle curve, a specialty "spectrum" list, and a two-sides-
   converge brand moment) rather than miniature versions of the
   pages it links to. Reuses the generic .ms-hero/.band/.band-alt/
   .section-head/.hipaa-* /.spec-cta-actions scaffolding and the
   data-ms2-* interaction engine.
   ========================================================= */

/* -- shared instruction micro-label -- */
.svc-hint { text-align: center; font-family:'Poppins', sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; }
#core-services { scroll-margin-top: 82px; }

/* -- 01 hero: the service ecosystem -- */
.svc-ecosystem { width: 100%; max-width: 400px; margin: 0 auto; }
.svc-ecosystem svg { width: 100%; height: auto; display: block; overflow: visible; }
.svc-eco-guide { stroke: rgba(255,255,255,.2); stroke-width: 1; }
.svc-eco-stem { stroke: rgba(201,162,39,.45); stroke-width: 1; }
.svc-eco-layer { stroke-width: 1; transition: fill .4s ease, stroke .4s ease; }
.svc-eco-layer.l1 { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.3); }
.svc-eco-layer.l2 { fill: rgba(201,162,39,.16); stroke: rgba(201,162,39,.4); }
.svc-eco-layer.l3 { fill: rgba(201,162,39,.3); stroke: var(--gold); }
.svc-eco-apex { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.6)); animation: imPulse 6s ease-in-out infinite; }
.svc-eco-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; fill: rgba(255,255,255,.5); }
@media (max-width: 900px) { .svc-ecosystem { max-width: 320px; } }

/* -- 02 core services: the unified grid -- */
.core-services-grid .info-card { display: flex; flex-direction: column; height: 100%; }
.core-service-index { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: rgba(16,35,63,.32); margin-bottom: 10px; }
.core-services-grid .info-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.core-services-grid .info-card p { font-size: .92rem; margin-bottom: 4px; flex: 1; }
.core-service-card.is-priority { border-top: 3px solid var(--gold); }
.core-service-card.is-priority .core-service-index { color: var(--gold); }

/* -- 03 the revenue cycle: the continuous pathway -- */
.svc-cycle-svg { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 6px; }
.svc-cycle-track { fill: none; stroke: rgba(16,35,63,.14); stroke-width: 1.6; }
.svc-cycle-node { cursor: pointer; outline: none; }
.svc-cycle-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.svc-cycle-dot { fill: var(--white); stroke: var(--blue-light); stroke-width: 2; transition: r .25s ease, fill .25s ease, stroke .25s ease; }
.svc-cycle-node:hover:not(.is-active) .svc-cycle-dot { r: 10; stroke: var(--gold); }
.svc-cycle-node.is-active .svc-cycle-dot { fill: var(--gold); stroke: var(--gold); }
.svc-cycle-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; fill: var(--text-muted); transition: fill .3s ease; }
.svc-cycle-node:hover:not(.is-active) .svc-cycle-label { fill: var(--navy); }
.svc-cycle-node.is-active .svc-cycle-label { fill: var(--navy); font-weight: 700; }
.svc-cycle-detail-wrap { max-width: 640px; margin: 10px auto 0; min-height: 76px; text-align: center; }
.svc-cycle-detail { display: none; }
.svc-cycle-detail.is-active { display: block; animation: msFadeIn .35s ease; }
.svc-cycle-detail p { margin: 0 0 8px; font-size: 1.05rem; color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 500; }
.svc-cycle-chip { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .84rem; color: var(--blue); }
.svc-cycle-chip:hover, .svc-cycle-chip:focus-visible { color: var(--navy); }

/* -- 04 specialty expertise: the spectrum -- */
.svc-spectrum { max-width: 900px; margin: 0 auto; text-align: center; }
.svc-spectrum-group { margin-bottom: 30px; }
.svc-spectrum-group h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(16,35,63,.4); margin-bottom: 14px; }
.svc-spectrum-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 4px; }
.svc-spectrum-item { position: relative; display: inline-flex; align-items: center; padding: 10px 14px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--navy); outline: none; }
.svc-spectrum-item span { position: relative; display: inline-block; transition: color .25s ease, padding-right .25s ease; }
.svc-spectrum-item span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.svc-spectrum-item span::before { content: '→'; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .25s ease, right .25s ease; color: var(--gold); }
.svc-spectrum-item:hover span, .svc-spectrum-item:focus-visible span { color: var(--gold); padding-right: 20px; }
.svc-spectrum-item:hover span::after, .svc-spectrum-item:focus-visible span::after { transform: scaleX(1); }
.svc-spectrum-item:hover span::before, .svc-spectrum-item:focus-visible span::before { opacity: 1; right: -16px; }
.svc-spectrum-all { display: block; margin-top: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--blue); }
.svc-spectrum-all:hover { color: var(--navy); }
.svc-core-all { display: block; text-align: center; margin-top: 40px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--blue); }
.svc-core-all:hover { color: var(--navy); }

/* -- 05 support for growing practices -- */
.svc-small-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; max-width: 1000px; margin: 0 auto; }
@media (max-width: 860px) { .svc-small-grid { grid-template-columns: 1fr; gap: 32px; } }
.svc-small-viz { text-align: center; }
.svc-small-viz svg { width: 100%; max-width: 180px; height: auto; margin: 0 auto; display: block; overflow: visible; }
.svc-small-square { fill: rgba(201,162,39,.05); stroke: var(--blue-light); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; transform: scale(.8); transition: transform .7s cubic-bezier(.2,.8,.2,1), stroke .7s ease, fill .7s ease; }
.svc-small-viz.in-view .svc-small-square { transform: scale(1); stroke: var(--gold); fill: rgba(201,162,39,.12); }
.svc-small-tick { fill: rgba(201,162,39,.25); opacity: 0; transition: opacity .5s ease, fill .5s ease; }
.svc-small-viz.in-view .svc-small-tick { opacity: 1; fill: var(--gold); }
.svc-small-viz.in-view .svc-small-tick.t1 { transition-delay: .3s; }
.svc-small-viz.in-view .svc-small-tick.t2 { transition-delay: .38s; }
.svc-small-viz.in-view .svc-small-tick.t3 { transition-delay: .46s; }
.svc-small-viz.in-view .svc-small-tick.t4 { transition-delay: .54s; }
.svc-small-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.svc-small-chain .accent { color: var(--gold); }
.svc-small-chain-line { display: inline-block; width: 18px; height: 1px; background: var(--grey-line); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.svc-small-viz.in-view .svc-small-chain-line { transform: scaleX(1); }
.svc-small-viz.in-view .svc-small-chain-line:nth-of-type(1) { transition-delay: .6s; }
.svc-small-viz.in-view .svc-small-chain-line:nth-of-type(2) { transition-delay: .75s; }

/* -- 06 the tri-star difference: two sides converge -- */
.svc-unify { position: relative; overflow: hidden; }
.svc-unify-viz { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 10px 0 4px; flex-wrap: wrap; }
.svc-unify-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.svc-unify-side p { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.svc-unify-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); margin: 0 3px; transition: transform .9s cubic-bezier(.2,.8,.2,1), background .9s ease; }
.svc-unify-dot:nth-of-type(2) { transition-delay: .1s; }
.svc-unify-dot:nth-of-type(3) { transition-delay: .2s; }
.svc-unify.in-view .svc-unify-side.left .svc-unify-dot { transform: translateX(16px); background: rgba(201,162,39,.65); }
.svc-unify.in-view .svc-unify-side.right .svc-unify-dot { transform: translateX(-16px); background: rgba(201,162,39,.65); }
.svc-unify-core { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.svc-unify-mark { width: 14px; height: 14px; border-radius: 50%; background: rgba(201,162,39,.25); transition: transform .5s ease, background .5s ease, box-shadow .5s ease; transition-delay: .7s; }
.svc-unify.in-view .svc-unify-mark { transform: scale(1.6); background: var(--gold); box-shadow: 0 0 16px rgba(201,162,39,.6); }
.svc-unify-core p { margin: 4px 0 0; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .04em; color: rgba(255,255,255,.4); transition: color .5s ease; transition-delay: .9s; }
.svc-unify.in-view .svc-unify-core p { color: var(--gold); }

/* =========================================================
   WOUND CARE BILLING & CODING — clinical detail, precisely
   carried through

   A page-specific visual vocabulary built around connected
   precision: a layered documentation stack rising to a
   reimbursement apex (with small precision-marker ticks) in
   the hero, chevron-connected stage cards for the approach,
   and an alternating connected pathway of numbered panels for
   what we handle. Reuses the generic .legal-hero/.band-alt/
   .section-head/.approach-grid/.hipaa-* scaffolding, but every
   decorative element below is unique to this page.
   ========================================================= */

/* -- 01 hero: the documentation stack -- */
.wc-stack { width: 100%; max-width: 360px; margin: 0 auto; }
.wc-stack svg { width: 100%; height: auto; display: block; overflow: visible; }
.wc-doc-guide { stroke: rgba(255,255,255,.2); stroke-width: 1; }
.wc-doc-stem { stroke: rgba(201,162,39,.45); stroke-width: 1; }
.wc-doc-layer { stroke-width: 1; }
.wc-doc-layer.l1 { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.3); }
.wc-doc-layer.l2 { fill: rgba(201,162,39,.16); stroke: rgba(201,162,39,.4); }
.wc-doc-layer.l3 { fill: rgba(201,162,39,.3); stroke: var(--gold); }
.wc-doc-apex { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,162,39,.6)); animation: imPulse 6s ease-in-out infinite; }
.wc-doc-tick line { stroke: rgba(201,162,39,.55); stroke-width: 1.2; }
.wc-doc-tick circle { fill: var(--gold); opacity: .8; }
.wc-doc-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; fill: rgba(255,255,255,.5); }
@media (max-width: 900px) { .wc-stack { max-width: 280px; } }

/* -- 02 wound care support: documentation-to-payment card -- */
.wc-support-grid { align-items: center; }
.wc-support-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px 28px;
}
.wc-support-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; }
.wc-support-row:not(:last-child) { border-bottom: 1px solid var(--grey-line); }
.wc-support-row .icon-badge { flex-shrink: 0; margin-bottom: 0; }
.wc-support-row-text h3 { font-size: 1rem; margin-bottom: 4px; }
.wc-support-row-text p { margin: 0; font-size: .88rem; }
@media (max-width: 560px) { .wc-support-card { padding: 4px 20px; } }

/* -- 03 the tri-star approach: chevron-connected stages -- */
.wc-approach-card { position: relative; }
@media (min-width: 901px) {
  .wc-approach-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 52px;
    right: -24px;
    width: 10px; height: 10px;
    border-top: 2px solid rgba(201,162,39,.5);
    border-right: 2px solid rgba(201,162,39,.5);
    transform: rotate(45deg);
  }
}

/* -- 04 what we handle: the alternating connected pathway -- */
.wc-handle-list { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.wc-handle-list::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--grey-line); transform: translateX(-50%); }
.wc-handle-item { position: relative; display: flex; align-items: center; gap: 24px; }
.wc-handle-item:nth-child(even) { flex-direction: row-reverse; }
.wc-handle-node { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--grey-bg); }
.wc-handle-card { flex: 1; background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow); }
.wc-handle-item:nth-child(even) .wc-handle-card { text-align: right; }
.wc-handle-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.wc-handle-num { color: var(--gold); font-weight: 800; margin-right: 4px; }
.wc-handle-card p { margin: 0; font-size: .93rem; color: var(--text-muted); }
@media (max-width: 760px) {
  .wc-handle-list::before { left: 23px; }
  .wc-handle-item, .wc-handle-item:nth-child(even) { flex-direction: row; }
  .wc-handle-item:nth-child(even) .wc-handle-card { text-align: left; }
  .wc-handle-node { width: 12px; height: 12px; box-shadow: 0 0 0 4px var(--grey-bg); }
}

/* -- flagship elevation: wound care billing & coding (#1 core service) -- */
#wc-approach { scroll-margin-top: 90px; }
.wc-hero { position: relative; }
.wc-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), #E4C766, var(--gold));
}
.wc-priority-chip {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  background: rgba(201,162,39,.16); border: 1px solid rgba(201,162,39,.45); color: var(--gold);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 16px;
}
.wc-hero .legal-hero-copy h1 { font-size: clamp(2.2rem, 4.2vw, 3.15rem); }
.wc-hero-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.28), transparent 70%);
  filter: blur(14px); pointer-events: none;
}
.wc-approach-card .approach-number { color: rgba(201,162,39,.4); }
.hipaa-card.wc-difference { border-top: 3px solid var(--gold); }
.band.wc-cta { position: relative; overflow: hidden; }
.band.wc-cta::before {
  content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.25), transparent 70%); filter: blur(10px);
  top: -140px; left: -100px; pointer-events: none;
}
.band.wc-cta .container { position: relative; z-index: 1; }

/* =========================================================
   ABOUT PAGE — the story behind the partnership

   A dedicated hero built around Tri-Star's own name: three
   connected points (Accuracy / Expertise / Support) converging
   on a small gold star mark. Reuses the generic .legal-hero
   two-column scaffolding; the mark and pillar chips below are
   unique to this page.
   ========================================================= */
.about-hero { position: relative; }
.about-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), #E4C766, var(--gold));
}
.about-hero-pillars { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.about-hero-pill {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.92);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .02em;
}
.about-hero-visual-wrap { width: 100%; max-width: 380px; margin: 0 auto; }
.about-hero-visual-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.about-hero-ring { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; stroke-dasharray: 3 5; }
.about-hero-link { stroke: rgba(201,162,39,.4); stroke-width: 1.2; }
.about-hero-node { fill: var(--white); stroke: var(--gold); stroke-width: 1.6; opacity: .9; }
.about-hero-star { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(201,162,39,.6)); animation: imPulse 5s ease-in-out infinite; }
.about-hero-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: rgba(255,255,255,.6); }
@media (max-width: 900px) { .about-hero-visual-wrap { max-width: 300px; } }

/* -- homepage: scroll-driven storytelling -- */
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.75); font-family: 'Poppins', sans-serif; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .85;
  transition: opacity .2s ease, color .2s ease; z-index: 1;
}
.hero-scroll-cue:hover, .hero-scroll-cue:focus-visible { opacity: 1; color: var(--white); }
.hero-scroll-cue-chevron { width: 18px; height: 18px; animation: heroScrollBounce 2.2s ease-in-out infinite; }
@keyframes heroScrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 768px) { .hero-scroll-cue { bottom: 12px; } }

.section-kicker { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; color: var(--text-muted); margin: 0 0 10px; }

.home-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.home-reveal.in-view { opacity: 1; transform: translateY(0); }
.mv-grid.home-reveal.in-view .info-card:nth-child(2) { transition-delay: .12s; }

.tag-chip--priority { background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.4); color: var(--navy); font-weight: 700; }

.band.home-cta { position: relative; overflow: hidden; }
.band.home-cta::before {
  content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.22), transparent 70%); filter: blur(10px);
  top: -140px; right: -100px; pointer-events: none;
}
.band.home-cta .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hos-os-pulse, .uro-route-pulse, .uro-checkpoint-pulse { display: none; }
}