/* ==========================================================================
   Healthcare Staffing — Design System
   Faithful recreation of the reference layout (navy + teal), original content.
   Swap CSS custom properties below to rebrand instantly.
   ========================================================================== */

:root {
  /* Brand palette */
  --navy:        #2a2a5e;
  --navy-deep:   #232350;
  --navy-soft:   #34356b;
  --teal:        #2ec5c1;
  --teal-dark:   #1aa6a2;
  --teal-soft:   #d7f3f2;

  /* Neutrals */
  --ink:         #20204a;
  --body:        #4a5568;
  --muted:       #7a8499;
  --line:        #e6e9ef;
  --bg:          #ffffff;
  --soft:        #f5f7f9;

  /* Type */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Geometry */
  --radius:      14px;
  --radius-lg:   24px;
  --shadow:      0 14px 40px rgba(34, 35, 80, 0.10);
  --shadow-sm:   0 6px 20px rgba(34, 35, 80, 0.08);
  --maxw:        1200px;
  --header-h:    96px;
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.text-teal { color: var(--teal); }
.text-navy { color: var(--navy); }
.eyebrow {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; font-size: .72rem; color: var(--teal-dark);
  display: inline-block; margin-bottom: .9rem;
}

/* Accent underline used under headings in the reference */
.accent-line { width: 64px; height: 4px; background: var(--teal); border-radius: 4px; margin: 14px 0 22px; }
.accent-line.center { margin-left: auto; margin-right: auto; }

/* ------------------------------ Buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  padding: 13px 26px; border-radius: 40px; border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(46,197,193,.35); }
.btn-outline { border-color: var(--teal); color: var(--teal-dark); background: transparent; }
.btn-outline:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }
.btn-ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--navy); }
.btn-sm { padding: 9px 18px; font-size: .82rem; }

/* ============================ HEADER / NAV =============================== */
.site-header {
  position: sticky; top: 0; z-index: 1000; background: #fff;
  border-bottom: 1px solid var(--line);
}
/* slim utility bar with phone on the right */
.header-topbar { border-bottom: 1px solid var(--line); background: #fff; }
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 7px 24px;
  display: flex; justify-content: flex-end; align-items: center;
}
.header-inner {
  display: flex; align-items: center; gap: 28px;
  min-height: var(--header-h); padding: 0 24px; max-width: 1280px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand svg { width: 46px; height: 46px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--teal-dark); letter-spacing: .02em; }
.brand-name small { display: block; font-size: .5rem; letter-spacing: .32em; color: var(--muted); font-weight: 600; text-transform: uppercase; }

/* Primary nav */
.main-nav { margin-left: 30px; }
.nav-list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 30px; background: var(--line);
}
.nav-link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  padding: 14px 26px; font-size: 1.04rem; border-radius: 8px;
  position: relative;
}
.nav-link:hover { color: var(--teal-dark); }
.nav-item.has-dropdown > .nav-link::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease; opacity: .65;
}
.nav-item.has-dropdown:hover > .nav-link::after { transform: rotate(225deg) translateY(2px); }

/* Dropdown panels */
.dropdown {
  position: absolute; top: calc(100% - 4px); left: 0; min-width: 268px;
  background: #fff; border-radius: 10px; box-shadow: var(--shadow);
  padding: 6px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 50;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown.align-right { left: auto; right: 0; }
.dropdown a {
  display: block; padding: 14px 18px; font-family: var(--font-body);
  font-weight: 500; color: var(--ink); font-size: .96rem;
  border-bottom: 1px solid var(--teal-soft); border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.dropdown a:last-child { border-bottom: 0; }
.dropdown a:hover { background: var(--soft); color: var(--teal-dark); }

/* Header utility cluster */
.header-utils { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; font-weight: 600; letter-spacing: .02em; }
.header-phone svg { width: 16px; height: 16px; color: var(--muted); }
.header-utils .btn-sm { padding: 10px 22px; font-size: .86rem; box-shadow: 0 6px 16px rgba(46,197,193,.28); }
.acct-btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--navy);
  display: grid; place-items: center; color: #fff; border: 0; flex-shrink: 0;
}
.acct-btn svg { width: 19px; height: 19px; }

/* Mobile toggle */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; margin-left: auto; }
.nav-toggle span { width: 26px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================== HERO ==================================== */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 46%, #4a4b86 78%, #c9cad8 78.2%, #eef0f4 100%);
  color: #fff;
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 84px 24px 92px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.35rem); margin-bottom: 1.1rem; }
.hero h1 .text-teal { color: var(--teal); }
.hero p { color: rgba(255,255,255,.85); max-width: 430px; font-size: 1.02rem; }
.hero-underline { width: 90px; height: 3px; background: var(--teal); margin: 4px 0 22px; }

.hero-search {
  display: flex; align-items: center; gap: 12px; margin-top: 30px;
  max-width: 430px; border-bottom: 1.5px solid rgba(255,255,255,.5); padding-bottom: 10px;
}
.hero-search input {
  flex: 1; background: transparent; border: 0; color: #fff; font-size: 1rem;
  font-family: var(--font-body); outline: none;
}
.hero-search input::placeholder { color: rgba(255,255,255,.65); }
.hero-search button {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--teal);
  background: transparent; color: var(--teal); display: grid; place-items: center; flex-shrink: 0;
  transition: .2s;
}
.hero-search button:hover { background: var(--teal); color: #fff; }

/* Hero media — circular photo with concentric teal arcs */
.hero-media { position: relative; display: grid; place-items: center; min-height: 360px; }
.hero-photo {
  width: clamp(260px, 32vw, 380px); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; position: relative; z-index: 2;
  border: 6px solid rgba(255,255,255,.12);
}
.hero-photo .ph { width: 100%; height: 100%; }
.hero-arc {
  position: absolute; border-radius: 50%; border: 7px solid transparent;
  border-top-color: var(--teal); border-right-color: var(--teal);
  transform: rotate(-38deg); z-index: 1;
}
.hero-arc.a1 { width: clamp(300px,36vw,440px); aspect-ratio: 1; }
.hero-arc.a2 { width: clamp(340px,40vw,500px); aspect-ratio: 1; opacity: .5; }

/* ====================== JOBS / OPPORTUNITIES ============================ */
.jobs { padding: 76px 0; background: #fff; }
.jobs-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; align-items: stretch; }
.jobs-intro { display: flex; flex-direction: column; }
.jobs-intro h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.jobs-intro h2 span { display: block; }
.jobs-portrait {
  margin-top: auto; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3;
}
.jobs-portrait .ph { width: 100%; height: 100%; }

.job-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.job-card {
  background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.job-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.job-card .ph { aspect-ratio: 16/10; width: 100%; }
.job-card .job-body { padding: 16px 18px 20px; }
.job-loc { color: var(--teal-dark); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.job-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.12rem; margin: 4px 0 14px; }
.job-card .btn { align-self: flex-start; }

/* ===================== PROFESSIONS (navy band) ========================= */
.professions { background: var(--navy); color: #fff; padding: 70px 0 76px; text-align: center; }
.professions h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
.professions h2 span { display: block; }
.prof-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 760px;
  margin: 44px auto 38px;
}
.prof-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.prof-ring { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
.prof-ring .ph { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.prof-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--teal); border-left-color: var(--teal);
  transform: rotate(-30deg);
}
.prof-label { font-family: var(--font-display); font-weight: 500; font-size: .95rem; }

/* ===================== BENEFITS ("What Makes...") ====================== */
.benefits { padding: 84px 0; position: relative; background: #fff; }
.benefits .section-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.benefits .section-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.benefits .section-head h2 span { display: block; }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 920px; margin: 0 auto; }
.benefit-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 30px 32px; box-shadow: var(--shadow-sm);
}
.benefit-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.benefit-card-head h3 { margin: 0; font-size: 1.32rem; }
.benefit-icon {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--teal-soft);
  display: grid; place-items: center; color: var(--teal-dark); flex-shrink: 0;
}
.benefit-icon svg { width: 26px; height: 26px; }
.benefit-list { list-style: none; margin: 0; padding: 0; }
.benefit-list li { display: flex; gap: 11px; padding: 8px 0; font-size: .95rem; color: var(--body); }
.benefit-list li svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; margin-top: 3px; }

/* decorative corner arcs */
.deco-arc { position: absolute; border-radius: 50%; border: 26px solid var(--teal); opacity: .9; pointer-events: none; }

/* ===================== REFERRAL banner ================================= */
.referral { position: relative; min-height: 360px; display: grid; }
.referral .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.referral-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 60px 24px; display: grid; grid-template-columns: 1fr 1fr; }
.referral-card { text-align: center; align-self: center; }
.referral-card h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.referral-card h2 .text-navy { display: block; }
.referral-card p { max-width: 360px; margin: 12px auto 22px; color: var(--body); }

/* ===================== OWNERSHIP / ESOP =============================== */
.ownership { padding: 80px 0; background: #fff; }
.ownership-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: center; }
.ownership-logo { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: .05em; color: var(--navy); display: flex; align-items: center; gap: 2px; }
.ownership-logo .o-mark { width: 38px; height: 38px; }
.ownership p { font-size: .95rem; }
.ownership-thumbs { display: flex; align-items: center; gap: 14px; margin: 22px 0 26px; }
.ownership-thumbs .ph { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; }
.ownership-thumbs .arrow { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; color: #fff; }
.ownership-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/11; }
.ownership-photo .ph { width: 100%; height: 100%; }

/* ===================== SPOTLIGHT (navy carousel) ===================== */
.spotlight { background: var(--navy); color: #fff; padding: 64px 0 72px; position: relative; overflow: hidden; }
.spotlight h2 { color: #fff; }
.spotlight .lead { color: rgba(255,255,255,.82); max-width: 540px; }
.spotlight-rail { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.spot-nav {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4);
  background: transparent; color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: .2s;
}
.spot-nav:hover { background: var(--teal); border-color: var(--teal); }
.spot-track { flex: 1; overflow: hidden; }
.spot-slides { display: flex; transition: transform .5s ease; }
.spot-slide { min-width: 100%; display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; }
.spot-photo { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 3px solid var(--teal); }
.spot-photo .ph { width: 100%; height: 100%; }
.spot-quote p { color: rgba(255,255,255,.9); font-size: 1.02rem; }
.spot-quote .who { font-family: var(--font-display); font-weight: 600; color: var(--teal); margin-top: 8px; }
.spot-spiral { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: 420px; height: 420px; opacity: .25; pointer-events: none; }

/* ===================== TEAM =========================================== */
.team { padding: 80px 0; background: #fff; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.team h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.team-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--shadow); }
.team-photo .ph { width: 100%; height: 100%; }
.team-arrows { display: flex; gap: 12px; margin-top: 22px; }
.team-arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; transition: .2s; }
.team-arrows button:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ===================== BLOG =========================================== */
.blog { padding: 70px 0 84px; background: var(--soft); }
.blog .section-head { text-align: center; margin-bottom: 46px; }
.blog .section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { background: transparent; }
.blog-card h3 { color: var(--teal-dark); font-size: 1.06rem; font-weight: 600; min-height: 2.6em; }
.blog-card .ph { aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; margin: 6px 0 16px; }
.blog-card p { font-size: .92rem; }
.read-more { color: var(--teal-dark); font-weight: 600; font-family: var(--font-display); font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.read-more svg { width: 17px; height: 17px; flex: 0 0 auto; }
.read-more:hover { gap: 10px; }
.blog .center-btn { text-align: center; margin-top: 44px; }

/* ===================== MISSION (DEI) ================================== */
.mission { padding: 80px 0; background: #fff; }
.mission-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items: center; }
.mission-art { position: relative; display: grid; place-items: center; min-height: 320px; }
.mission-art .ph { width: 78%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; z-index: 2; }
.mission-arc { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 12px solid var(--teal); border-bottom-color: transparent; border-right-color: transparent; transform: rotate(-15deg); z-index: 1; }
.mission h2 { font-size: clamp(1.7rem, 2.8vw, 2.1rem); }
.mission p { font-size: .95rem; }

/* ===================== FOOTER ========================================= */
.site-footer { background: #fff; border-top: 3px solid var(--navy); padding: 56px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--navy); transition: .2s; }
.footer-socials a:hover { background: var(--teal); color: #fff; }
.footer-col h4 { color: var(--teal-dark); font-size: 1.02rem; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: var(--body); font-size: .92rem; }
.footer-col a:hover { color: var(--teal-dark); }
.footer-badge { width: 64px; height: 64px; margin-top: 20px; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 22px; color: var(--muted); font-size: .82rem; }

/* ===================== INTERIOR PAGE HERO ============================= */
.page-hero { background: linear-gradient(115deg, var(--navy-deep), var(--navy) 70%, #45467f); color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.page-hero p { color: rgba(255,255,255,.82); max-width: 560px; }
.page-hero .crumbs { font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.page-hero .crumbs a:hover { color: var(--teal); }
.page-hero .deco-arc { border-color: rgba(46,197,193,.4); }
.page-section { padding: 76px 0; }
.page-section.soft { background: var(--soft); }
.lead-row { max-width: 760px; margin: 0 auto 10px; text-align: center; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.info-card .benefit-icon { margin-bottom: 18px; }
.info-card h3 { font-size: 1.2rem; }

/* Generic form */
.form-card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: #fff; transition: border .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); }
.field textarea { min-height: 130px; resize: vertical; }

/* ===================== PLACEHOLDER IMAGE SLOTS ======================== */
.ph {
  background: linear-gradient(135deg, #dfe7ee 0%, #eef2f6 55%, #d7e3ea 100%);
  display: grid; place-items: center; color: var(--muted); position: relative;
}
.ph::after {
  content: attr(data-label); font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-align: center;
  padding: 8px; opacity: .7;
}
.ph svg { width: 30px; height: 30px; opacity: .35; position: absolute; }

/* ===================== SCROLL REVEAL (WOW-style) ====================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .spot-slides { transition: none; }
}

/* ===================== COUNTERS strip ================================= */
.stats { background: var(--soft); padding: 50px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--navy); line-height: 1; }
.stat .num .text-teal { color: var(--teal); }
.stat .label { color: var(--muted); font-size: .9rem; margin-top: 8px; font-weight: 500; }

/* ============================ RESPONSIVE ============================== */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .jobs-grid { grid-template-columns: 1fr; }
  .ownership-grid, .team-grid, .mission-grid { grid-template-columns: 1fr; }
  .prof-grid { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
  .blog-grid, .card-grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .referral-inner { grid-template-columns: 1fr; }
  .referral-card { text-align: left; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --header-h: 72px; }
  .header-topbar { display: none; }
  .nav-item:not(:last-child)::after { display: none; }
  .nav-toggle { display: flex; }
  .header-utils { display: none; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: #fff; padding: 16px 24px 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .32s ease; box-shadow: var(--shadow);
  }
  .main-nav.open { transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link { padding: 16px 4px; justify-content: space-between; font-size: 1.05rem; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    min-width: 0; padding: 0 0 8px; max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-item.open .dropdown { max-height: 600px; }
  .nav-item.has-dropdown:hover .dropdown { max-height: 0; }
  .nav-item.has-dropdown.open .dropdown { max-height: 600px; }
  .dropdown a { padding-left: 18px; border-bottom: 1px solid var(--soft); }
  .nav-item.has-dropdown > .nav-link::after { transition: transform .2s; }
  .nav-item.open > .nav-link::after { transform: rotate(225deg); }
}

@media (max-width: 620px) {
  .job-cards { grid-template-columns: 1fr; }
  .benefit-grid, .card-grid-2, .form-row { grid-template-columns: 1fr; }
  .prof-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .spot-slide { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-card, .info-card { padding: 26px; }
}

/* ===================== JOB CAROUSEL (3-up scrolling) ================== */
.jobs-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.jobs-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }

.job-carousel { display: flex; align-items: center; gap: 14px; }
.job-viewport { overflow: hidden; flex: 1; }
.job-track { display: flex; gap: 24px; transition: transform .55s cubic-bezier(.4,.0,.2,1); will-change: transform; }
.job-track > .job-card { flex: 0 0 calc((100% - 48px) / 3); }

.job-img { aspect-ratio: 16/10; overflow: hidden; }
.job-img .city { width: 100%; height: 100%; display: block; }

.job-nav {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: var(--navy);
  font-size: 1.7rem; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow-sm); transition: .2s;
}
.job-nav:hover { background: var(--teal); color: #fff; border-color: var(--teal); transform: translateY(-2px); }
.job-nav:disabled { opacity: .35; cursor: not-allowed; transform: none; background: #fff; color: var(--navy); border-color: var(--line); }

.job-dots { display: flex; justify-content: center; gap: 9px; margin-top: 28px; }
.job-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: var(--line); transition: .25s;
}
.job-dots button.active { background: var(--teal); width: 26px; border-radius: 6px; }

@media (max-width: 1024px) {
  .job-track > .job-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 620px) {
  .job-track > .job-card { flex: 0 0 100%; }
  .job-nav { width: 40px; height: 40px; font-size: 1.4rem; }
}

/* ===================== SEARCH PAGE ==================================== */
.search-bar-wrap { background: #fff; padding: 26px 0; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.search-bar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; margin-top: -52px; }
.search-bar-label { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .95rem; display: block; margin-bottom: 12px; }
.search-bar-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 12px; }
.search-bar-row select, .search-bar-row input { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: .92rem; color: var(--ink); background: #fff; }
.search-bar-row select:focus, .search-bar-row input:focus { outline: none; border-color: var(--teal); }

.search-layout { display: grid; grid-template-columns: 258px 1fr; gap: 34px; align-items: start; }
.filters { position: sticky; top: 110px; }
.filters h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 18px; }
.filter { margin-bottom: 16px; }
.filter label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--ink); margin-bottom: 6px; }
.filter select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 9px; font-family: var(--font-body); font-size: .9rem; color: var(--ink); background: #fff; }
.filter select:focus { outline: none; border-color: var(--teal); }
.filter input[type=range] { width: 100%; accent-color: var(--teal); }
.pay-label { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: .92rem; margin-top: 6px; }
.clear-link { background: none; border: 0; color: var(--teal-dark); font-family: var(--font-display); font-weight: 600; font-size: .88rem; padding: 4px 0; cursor: pointer; }
.clear-link:hover { text-decoration: underline; }

.results-top { margin-bottom: 18px; }
.result-count { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: .92rem; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.no-results { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); }
.no-results h3 { color: var(--navy); }

/* detailed job card extras */
.job-title a { color: var(--ink); }
.job-title a:hover { color: var(--teal-dark); }
.job-pay { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 12px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line); margin-bottom: 14px; }
.job-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.job-meta svg { width: 15px; height: 15px; color: var(--teal-dark); }
.job-actions { display: flex; gap: 10px; }
.job-actions .btn { flex: 1; }

/* pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.pagination button { min-width: 40px; height: 40px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font-family: var(--font-display); font-weight: 600; cursor: pointer; transition: .2s; }
.pagination button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-dark); }
.pagination button.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination .gap { color: var(--muted); padding: 0 4px; }

/* ===================== JOB DETAILS PAGE ============================== */
.jd-hero { padding: 64px 0; }
.jd-banner-meta { display: flex; gap: 24px; margin-top: 12px; color: rgba(255,255,255,.85); font-size: .9rem; }
.jd-section { padding: 60px 0; background: #fff; }
.jd-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.jd-back { color: var(--teal-dark); font-family: var(--font-display); font-weight: 600; font-size: .9rem; display: inline-block; margin-bottom: 18px; }
.jd-h { font-size: 1.5rem; color: var(--navy); margin-bottom: 0; }
.jd-panel { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 8px 0 30px; }
.jd-cell { display: flex; flex-direction: column; gap: 2px; }
.jd-key { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.jd-val { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .95rem; }
.jd-apply-top { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.jd-sub { font-size: 1.18rem; color: var(--navy); margin: 28px 0 12px; }
.jd-list { margin: 0 0 8px; padding-left: 20px; }
.jd-list li { margin-bottom: 7px; color: var(--body); }
.jd-apply-card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; margin-top: 36px; scroll-margin-top: 100px; }
.ap-status { margin: 12px 0 0; font-weight: 600; font-size: .9rem; }
.ap-status.ok { color: var(--teal-dark); }
.ap-status.err { color: #c0392b; }
.jd-side > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); position: sticky; top: 110px; }
.jd-alert h4 { color: var(--ink); font-size: 1.05rem; margin-bottom: 12px; }
.jd-alert input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 9px; margin-bottom: 10px; font-family: var(--font-body); }
.jd-alert input:focus { outline: none; border-color: var(--teal); }
.jd-alert .btn { width: 100%; }
.jd-share span { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .9rem; }
.jd-share-row { display: flex; gap: 10px; margin-top: 12px; }
.jd-share-row a { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--navy); font-weight: 700; font-size: .9rem; }
.jd-share-row a:hover { background: var(--teal); color: #fff; }

@media (max-width: 1024px) {
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .search-bar-row { grid-template-columns: 1fr 1fr; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .jd-grid { grid-template-columns: 1fr; }
  .jd-side > div { position: static; }
}
@media (max-width: 620px) {
  .search-bar-row { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .jd-panel { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPONENTS FOR: How it Works · Pay & Benefits · Recruiters · Spotlight
   ============================================================ */

/* ---- Split intro row (heading+text left, photo right) ---- */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.split-row.reverse .split-media { order: -1; }
.split-row h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.split-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
.split-media .ph { width: 100%; height: 100%; }

/* ---- Navy "receipt" cards (zigzag bottom) ---- */
.receipt-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
.receipt-card { position: relative; background: var(--navy); color: #fff; border-radius: 8px 8px 0 0; padding: 46px 28px 30px; margin-top: 34px; text-align: center; }
.receipt-card .r-icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--teal-dark); box-shadow: var(--shadow-sm); }
.receipt-card .r-icon svg { width: 30px; height: 30px; }
.receipt-card h4 { color: #fff; font-size: 1.18rem; margin-bottom: 10px; }
.receipt-card p { color: rgba(255,255,255,.82); font-size: .92rem; margin: 0; }
.receipt-card .zz { position: absolute; left: 0; bottom: 0; width: 100%; height: 14px; transform: translateY(99%); display: block; }

/* ---- Icon grid (benefits at a glance) ---- */
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 18px; max-width: 920px; margin: 40px auto 0; }
.icon-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.icon-item .ii-label { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ink); line-height: 1.3; }

/* ---- Team member cards (recruiters / credentialing) ---- */
.team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; margin-top: 44px; }
.team-card { width: 180px; text-align: center; }
.tc-photo { width: 132px; height: 132px; margin: 0 auto 16px; position: relative; display: grid; place-items: center; }
.tc-photo .ph { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; }
.tc-photo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--teal); border-left-color: var(--teal); transform: rotate(-32deg); }
.team-card h4 { margin: 0 0 2px; font-size: 1.05rem; }
.tc-title { color: var(--teal-dark); font-size: .82rem; font-weight: 600; display: block; margin-bottom: 10px; }
.tc-contact { display: flex; justify-content: center; gap: 10px; }
.tc-contact a { width: 30px; height: 30px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--navy); transition: .2s; }
.tc-contact a svg { width: 15px; height: 15px; }
.tc-contact a:hover { background: var(--teal); color: #fff; }

/* ---- Wide banner (We recruit the person…) ---- */
.wide-banner { position: relative; min-height: 360px; display: grid; }
.wide-banner .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.wide-banner-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 64px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.wide-banner-card { align-self: center; }
.wide-banner-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.wide-banner-card p { color: var(--body); max-width: 420px; }
.wide-banner-card .tag { display: inline-block; color: var(--teal-dark); font-family: var(--font-display); font-weight: 700; border-bottom: 2px solid var(--teal); padding-bottom: 2px; }

/* ---- Process steps (How Does It Work) ---- */
.process { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps li { display: flex; gap: 18px; padding: 18px 0; align-items: flex-start; }
.steps .step-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.6px solid var(--teal); color: var(--teal-dark); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; font-size: .95rem; }
.steps li > div { font-size: 1.05rem; color: var(--ink); font-family: var(--font-display); font-weight: 500; padding-top: 4px; }
.process-art { position: relative; display: grid; place-items: center; min-height: 320px; }
.process-art .ph { width: 80%; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; position: relative; z-index: 2; }
.process-art .arc-rings { position: absolute; width: 88%; aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--teal); border-bottom-color: transparent; border-left-color: transparent; transform: rotate(20deg); opacity: .35; }

/* ---- Checklist blocks (HR Items / Health Screenings) ---- */
.check-block { display: grid; grid-template-columns: 200px 1fr; gap: 34px; align-items: start; margin-bottom: 40px; }
.cb-photo { width: 168px; height: 168px; position: relative; display: grid; place-items: center; }
.cb-photo .ph { width: 142px; height: 142px; border-radius: 50%; overflow: hidden; }
.cb-photo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--teal); border-right-color: var(--teal); transform: rotate(-30deg); }
.cb-body h4 { color: var(--navy); font-size: 1.15rem; }
.cb-note { color: var(--muted); font-size: .9rem; margin-bottom: 14px; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list.two-col { columns: 2; column-gap: 30px; }
.check-list li { display: flex; gap: 10px; padding: 6px 0; font-size: .93rem; color: var(--body); break-inside: avoid; }
.check-list li svg { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; margin-top: 3px; }

/* ---- "Did you know" stats band ---- */
.dyk { background: var(--navy); color: #fff; padding: 60px 0 66px; text-align: center; }
.dyk > .container > h2 { color: #fff; font-weight: 600; letter-spacing: .02em; }
.dyk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 40px 0 30px; }
.dyk-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dyk .ring { width: 104px; height: 104px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; position: relative; }
.dyk .ring::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--teal); border-right-color: var(--teal); transform: rotate(-20deg); }
.dyk .ring .num { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: #fff; }
.dyk .ring small { font-size: .62rem; color: rgba(255,255,255,.7); letter-spacing: .04em; }
.dyk .ring-ic { color: var(--teal); }
.dyk .ring-ic svg { width: 34px; height: 34px; }
.dyk-item p { font-size: .82rem; color: rgba(255,255,255,.8); max-width: 180px; margin: 0; line-height: 1.45; }
.dyk-note { color: rgba(255,255,255,.92); font-size: .98rem; max-width: 720px; margin: 8px auto 0; }

/* ---- Spotlight intro (collage + CTA) ---- */
.spotlight-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; }
.spotlight-intro .deco-spiral { position: absolute; left: -60px; top: 0; width: 280px; height: 280px; opacity: .12; pointer-events: none; }
.spotlight-intro h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.mini-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-collage .ph { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; }
.mosaic { columns: 4; column-gap: 12px; margin-top: 44px; }
.mosaic .m-tile { width: 100%; margin-bottom: 12px; border-radius: 10px; overflow: hidden; break-inside: avoid; }

@media (max-width: 1024px) {
  .split-row, .process, .spotlight-intro { grid-template-columns: 1fr; }
  .split-row.reverse .split-media { order: 0; }
  .receipt-row { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
  .wide-banner-inner { grid-template-columns: 1fr; }
  .dyk-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .mosaic { columns: 3; }
}
@media (max-width: 620px) {
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .check-block { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .check-list.two-col { columns: 1; text-align: left; }
  .cb-body { text-align: left; }
  .dyk-grid { grid-template-columns: 1fr; }
  .mosaic { columns: 2; }
  .mini-collage { grid-template-columns: 1fr 1fr; }
}

/* 4-up receipt row (How it Works) */
.receipt-row.four { grid-template-columns: repeat(4, 1fr); }
.deco-spiral svg { width: 100%; height: 100%; }
@media (max-width: 1024px) { .receipt-row.four { grid-template-columns: 1fr 1fr; max-width: 620px; } }
@media (max-width: 620px) { .receipt-row.four { grid-template-columns: 1fr; max-width: 460px; } }

/* ============================================================
   COMPONENTS FOR: Contact · Why Us · Joint Commission · ESOP ·
   Housing · Blog · FAQs · About · Staffing Request · Client Mgrs · Capabilities
   ============================================================ */

/* ---- Contact / Staffing two-column (form + photo) ---- */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: start; }
.contact-grid .lead-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.contact-grid .note { color: var(--body); font-size: .95rem; margin-bottom: 22px; }
.contact-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-sm); }
.contact-photo .ph { width: 100%; height: 100%; }
.radio-row { display: flex; gap: 22px; margin: 6px 0 16px; }
.radio-row label { display: flex; align-items: center; gap: 7px; font-size: .92rem; color: var(--body); font-family: var(--font-body); font-weight: 500; }

/* ---- Highlight callout (Why Us teal facts) ---- */
.highlight-callout { background: var(--teal-soft); border-left: 4px solid var(--teal); border-radius: 10px; padding: 20px 24px; color: var(--navy); font-weight: 500; }
.highlight-callout b { color: var(--teal-dark); }

/* ---- Resource cards (Housing favorites) ---- */
.resource-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 22px; }
.resource-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; text-align: center; background: #fff; transition: .2s; }
.resource-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.resource-card .rc-name { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.resource-card .rc-url { color: var(--teal-dark); font-size: .8rem; word-break: break-word; }

/* ---- Capabilities category blocks ---- */
.cap-block { border-radius: var(--radius-lg); padding: 34px 34px 30px; margin-bottom: 26px; background: var(--soft); }
.cap-block.navy { background: var(--navy); }
.cap-block h3 { font-size: 1.4rem; margin-bottom: 6px; }
.cap-block.navy h3 { color: #fff; }
.cap-block .accent-line { margin-top: 8px; }
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 26px; margin-top: 22px; list-style: none; padding: 0; }
.cap-grid li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; color: var(--body); padding: 4px 0; }
.cap-grid li svg { width: 15px; height: 15px; color: var(--teal); flex-shrink: 0; margin-top: 3px; }
.cap-block.navy .cap-grid li { color: rgba(255,255,255,.85); }

/* ---- Values list (About mission) ---- */
.values-list { list-style: none; margin: 18px 0 0; padding: 0; }
.values-list li { display: flex; gap: 12px; padding: 9px 0; }
.values-list li svg { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; margin-top: 3px; }
.values-list b { color: var(--navy); display: block; font-family: var(--font-display); }
.values-list span.v-text { color: var(--body); font-size: .92rem; }

/* ---- Parent / brand navy banner (About) ---- */
.brand-banner { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 44px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 30px; align-items: center; position: relative; overflow: hidden; margin-top: 50px; }
.brand-banner h3 { color: #fff; }
.brand-banner p { color: rgba(255,255,255,.82); font-size: .95rem; }
.brand-banner .bb-photo { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; justify-self: end; }
.brand-banner .deco-arc { border-color: rgba(255,153,77,.5); }

/* ---- Badge + text (Joint Commission) ---- */
.badge-row { display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: start; }
.badge-row .jc-badge { width: 104px; height: 104px; }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 20px 44px 20px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); position: relative; cursor: pointer; }
.faq-q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--teal-dark); font-weight: 400; transition: transform .25s; }
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 1200px; }
.faq-a-inner { padding: 0 4px 22px; color: var(--body); font-size: .95rem; }
.faq-a-inner .text-teal { font-weight: 600; }
.faq-a-inner ul { margin: 8px 0 0; padding-left: 18px; }
.faq-a-inner li { padding: 3px 0; }

/* ---- Blog search bar + list ---- */
.blog-search { background: var(--soft); border-radius: var(--radius); padding: 18px; display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; margin-bottom: 40px; }
.blog-search select, .blog-search input { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 8px; font-family: var(--font-body); font-size: .95rem; background: #fff; }
.blog-search .btn-search { background: var(--teal); color: #fff; border: 0; border-radius: 8px; width: 46px; display: grid; place-items: center; }
.blog-list { max-width: 880px; margin: 0 auto; }
.blog-row { display: grid; grid-template-columns: 230px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: center; }
.blog-row .ph { aspect-ratio: 16/11; border-radius: var(--radius); overflow: hidden; }
.blog-row h3 { color: var(--navy); font-size: 1.18rem; margin-bottom: 8px; }
.blog-row h3 a:hover { color: var(--teal-dark); }
.blog-row p { font-size: .92rem; margin-bottom: 10px; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
.pager a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--body); font-size: .9rem; }
.pager a.active, .pager a:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-photo { aspect-ratio: 16/10; max-width: 480px; }
  .resource-cards { grid-template-columns: repeat(3, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-banner { grid-template-columns: 1fr; }
  .brand-banner .bb-photo { justify-self: start; }
  .blog-search { grid-template-columns: 1fr; }
  .blog-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .resource-cards { grid-template-columns: 1fr 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
  .badge-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ============================================================== */
/*  IMAGE-READY ENHANCEMENTS (banners, image slots, a11y, perf)   */
/* ============================================================== */

/* Global image safety */
img { max-width: 100%; }

/* Real <img> dropped inside the labelled .ph slots.
   The grey gradient + data-label remain visible until a real image is added,
   and the image (when present) covers the slot. Missing files hide gracefully. */
.ph { isolation: isolate; }
.ph > img.slot-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; z-index: 1;
}
.ph > img.slot-img[data-fit="contain"] { object-fit: contain; }

/* ---------------- PROFESSIONAL IMAGE HERO BANNERS ---------------- */
.page-banner {
  position: relative;
  min-height: clamp(240px, 40vh, 420px);
  display: flex; align-items: center;
  background-color: var(--navy-deep);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  color: #fff; overflow: hidden;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(16,17,42,.86) 0%, rgba(16,17,42,.62) 52%, rgba(16,17,42,.40) 100%);
}
.page-banner .container { position: relative; z-index: 2; padding-top: 30px; padding-bottom: 30px; }
.page-banner h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; margin: 0; }
.page-banner p { color: rgba(255,255,255,.9); max-width: 620px; margin: 14px 0 0; }
.page-banner .crumbs { font-size: .85rem; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.page-banner .crumbs a { color: rgba(255,255,255,.92); }
.page-banner .crumbs a:hover { color: var(--teal); }

@media (max-width: 860px) {
  .page-banner { min-height: clamp(200px, 34vh, 320px); }
}
@media (max-width: 620px) {
  .page-banner { min-height: 190px; }
  .page-banner::before { background: linear-gradient(90deg, rgba(16,17,42,.9), rgba(16,17,42,.6)); }
  .team-row { gap: 26px; }
  .contact-grid { gap: 32px; }
}

/* Smooth, shift-free image fade-in for slotted photos */
@media (prefers-reduced-motion: no-preference) {
  .ph > img.slot-img { animation: phFade .5s ease both; }
}
@keyframes phFade { from { opacity: 0; } to { opacity: 1; } }

/* Joint Commission seal should fit, not crop */
.badge-row .jc-badge > img.slot-img { object-fit: contain; }

/* Legibility panel for wide-banner text over photos */
.wide-banner-card {
  background: rgba(255,255,255,.92);
  padding: 30px 32px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); backdrop-filter: blur(2px);
}
@media (max-width: 1024px) {
  .wide-banner-inner { grid-template-columns: 1fr; }
  .wide-banner-card { background: rgba(255,255,255,.94); }
}
@media (max-width: 620px) {
  .wide-banner-card { padding: 24px; }
}

/* Prevent stray horizontal scroll (off-screen mobile nav drawer, sub-pixel edges).
   'clip' is used instead of 'hidden' so the sticky header keeps working. */
html, body { overflow-x: clip; max-width: 100%; }

/* =========================================================================
   BLOG SYSTEM — listing, post hero, article body, related, share
   Premium animations, hover effects, transitions (added in redesign)
   ========================================================================= */

/* ---- Listing: dedicated blog banner accent ---- */
.blog-banner::after{
  content:""; position:absolute; right:-120px; bottom:-120px; width:360px; height:360px;
  border:3px solid rgba(46,197,193,.35); border-radius:50%; z-index:1;
}
.blog-banner .container{ position:relative; z-index:2; }

/* ---- Listing rows (redesigned cards) ---- */
.blog-list{ max-width:920px; }
.blog-row{
  grid-template-columns:300px 1fr; gap:30px; align-items:center;
  padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff; box-shadow:var(--shadow-sm); margin-bottom:24px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-row:last-child{ border-bottom:1px solid var(--line); }
.blog-row:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--teal-soft); }
.blog-thumb{ position:relative; display:block; aspect-ratio:16/11; border-radius:var(--radius); overflow:hidden; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.blog-row:hover .blog-thumb img{ transform:scale(1.07); }
.blog-cat-tag{
  position:absolute; top:12px; left:12px; background:rgba(42,42,94,.92); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.7rem; letter-spacing:.04em;
  text-transform:uppercase; padding:5px 12px; border-radius:30px; backdrop-filter:blur(4px);
}
.blog-row-meta{ font-size:.78rem; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.blog-row-body h3{ color:var(--navy); font-size:1.25rem; margin-bottom:10px; line-height:1.25; }
.blog-row-body h3 a{ background:linear-gradient(var(--teal),var(--teal)) left bottom / 0 2px no-repeat; transition:background-size .35s ease, color .25s ease; padding-bottom:2px; }
.blog-row-body h3 a:hover{ color:var(--teal-dark); background-size:100% 2px; }
.blog-row.featured{ grid-template-columns:1fr; padding:0; overflow:hidden; }
.blog-row.featured .blog-thumb{ aspect-ratio:16/7; border-radius:0; }
.blog-row.featured .blog-row-body{ padding:26px 30px 30px; }
.blog-row.featured h3{ font-size:1.7rem; }
.blog-empty{ text-align:center; color:var(--muted); padding:40px 0; font-size:1rem; }

/* ---- Post hero (dedicated blog banner section) ---- */
.post-hero{
  position:relative; background:linear-gradient(120deg,var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; overflow:hidden; padding:clamp(40px,7vw,76px) 0 clamp(46px,8vw,88px);
}
.post-hero-arc{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(520px 520px at 88% 18%, rgba(46,197,193,.20), transparent 60%),
    radial-gradient(360px 360px at 12% 96%, rgba(46,197,193,.12), transparent 60%);
}
.post-hero::after{
  content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px;
  border:3px solid rgba(46,197,193,.28); border-radius:50%; z-index:0;
}
.post-hero .container{ position:relative; z-index:2; }
.post-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
.post-hero .crumbs{ font-size:.82rem; color:rgba(255,255,255,.7); margin-bottom:16px; }
.post-hero .crumbs a{ color:rgba(255,255,255,.92); }
.post-hero .crumbs a:hover{ color:var(--teal); }
.post-eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:#0e1330; background:var(--teal);
  padding:6px 14px; border-radius:30px; margin-bottom:18px;
}
.post-hero h1{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.9rem); line-height:1.12; margin:0 0 18px; }
.post-meta{ color:rgba(255,255,255,.8); font-size:.92rem; }
.post-date::before{ content:"🗓 "; }
.post-hero-media img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:0 30px 60px rgba(0,0,0,.32); transform:translateY(0);
}

/* ---- Article body typography ---- */
.post-wrap{ padding-top:46px; }
.back-blogs{
  display:inline-flex; align-items:center; gap:8px; color:var(--teal-dark); font-weight:600;
  font-family:var(--font-display); font-size:.9rem; margin-bottom:26px; transition:gap .25s ease;
}
.back-blogs svg{ width:18px; height:18px; }
.back-blogs:hover{ gap:13px; }
.post-body{ max-width:820px; margin:0 auto; font-size:1.05rem; color:var(--body); }
.post-body h2{
  font-size:clamp(1.35rem,2.4vw,1.7rem); color:var(--navy); margin:2em 0 .6em; position:relative; padding-top:.2em;
}
.post-body h2::before{
  content:""; display:block; width:46px; height:4px; background:var(--teal); border-radius:4px; margin-bottom:.55em;
}
.post-body h3{ font-size:1.12rem; color:var(--navy); margin:1.6em 0 .5em; }
.post-body p{ margin:0 0 1.15rem; }
.post-body ul, .post-body ol{ margin:0 0 1.3rem; padding-left:1.25rem; }
.post-body li{ margin-bottom:.6rem; }
.post-body ul li::marker{ color:var(--teal-dark); }
.post-body ol li::marker{ color:var(--teal-dark); font-weight:700; }
.post-body a{ color:var(--teal-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color .2s ease; }
.post-body a:hover{ color:var(--navy); }
.post-body sup{ color:var(--muted); font-size:.7em; }
.post-body .post-sources{
  font-size:.86rem; color:var(--muted); border-top:1px solid var(--line);
  margin-top:2.4em; padding-top:1.2em; line-height:1.7; word-break:break-word;
}
.post-body .post-sources a{ font-weight:500; }

/* ---- Share ---- */
.post-share{ max-width:820px; margin:34px auto 0; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.share-label{ font-family:var(--font-display); font-weight:700; color:var(--teal-dark); font-size:.95rem; }
.share-icons{ display:flex; gap:10px; }
.share-icons a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy); color:#fff; transition:transform .25s ease, background .25s ease;
}
.share-icons a svg{ width:17px; height:17px; }
.share-icons a:hover{ background:var(--teal); transform:translateY(-3px) scale(1.06); }

/* ---- Related articles ---- */
.related-section{ background:var(--soft); padding:64px 0 78px; }
.related-section .section-head{ text-align:center; margin-bottom:40px; }
.related-section .section-head h2{ font-size:clamp(1.5rem,2.6vw,2rem); }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.rel-card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.rel-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.rel-thumb{ display:block; aspect-ratio:16/10; overflow:hidden; }
.rel-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.rel-card:hover .rel-thumb img{ transform:scale(1.08); }
.rel-card h3{ font-size:1.06rem; color:var(--navy); margin:18px 20px 8px; line-height:1.3; }
.rel-card h3 a:hover{ color:var(--teal-dark); }
.rel-card p{ font-size:.9rem; color:var(--body); margin:0 20px 14px; flex:1; }
.rel-card .read-more{ margin:0 20px 20px; }

/* ---- Homepage blog redesign cards ---- */
.blog-card{ background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; }
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.blog-card .ph{ aspect-ratio:16/10; margin:0; border-radius:0; overflow:hidden; position:relative; }
.blog-card .ph img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.blog-card:hover .ph img{ transform:scale(1.08); }
.blog-card .blog-card-tag{ position:absolute; top:12px; left:12px; background:rgba(42,42,94,.92); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:30px; }
.blog-card h3{ margin:18px 20px 8px; color:var(--navy); min-height:auto; }
.blog-card p{ margin:0 20px 14px; flex:1; }
.blog-card .read-more{ margin:0 20px 20px; }

/* ---- Premium micro-interactions (global) ---- */
@media (prefers-reduced-motion: no-preference){
  .reveal.in.fade-up{ animation:fadeUp .7s both; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;} }
  .post-hero-media img{ animation:floatIn .9s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes floatIn{ from{opacity:0; transform:translateY(24px) scale(.97);} to{opacity:1; transform:none;} }
  .btn{ position:relative; }
  .btn-teal:active{ transform:translateY(0) scale(.98); }
}

/* ---- Copy-link toast ---- */
.copy-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff; padding:12px 22px; border-radius:40px; font-size:.9rem;
  font-family:var(--font-display); font-weight:600; box-shadow:var(--shadow); opacity:0;
  pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:1000;
}
.copy-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Responsive ---- */
@media (max-width: 920px){
  .post-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .post-hero-media{ order:-1; }
  .rel-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .blog-row{ grid-template-columns:1fr; gap:0; padding:0; overflow:hidden; }
  .blog-row .blog-thumb{ aspect-ratio:16/9; border-radius:0; }
  .blog-row-body{ padding:20px 22px 24px; }
  .rel-grid{ grid-template-columns:1fr; }
  .post-body{ font-size:1rem; }
}

/* =========================================================================
   BLOG LISTING — uniform responsive card grid (reference-style)
   ========================================================================= */
.blog-search{ max-width: 780px; margin: 0 auto 40px; }
.blog-grid-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 24px;
}
.blog-gcard{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.blog-gcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.bg-thumb{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; }
.bg-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.blog-gcard:hover .bg-thumb img{ transform:scale(1.07); }
.bg-body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.bg-meta{ font-size:.74rem; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.bg-body h3{ font-size:1.08rem; line-height:1.3; color:var(--navy); margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bg-body h3 a{ background:linear-gradient(var(--teal),var(--teal)) left bottom / 0 2px no-repeat; transition:background-size .35s ease, color .25s ease; }
.bg-body h3 a:hover{ color:var(--teal-dark); background-size:100% 2px; }
.bg-body p{ font-size:.9rem; color:var(--body); margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.bg-body .read-more{ margin-top:auto; }

@media (max-width: 620px){
  .blog-grid-cards{ grid-template-columns:1fr; }
  .blog-search{ grid-template-columns:1fr; }
}