/* ============================================================
   MyCarePro — rebuilt to match live site (mycarepro.net)
   Source CSS: /wp-content/themes/basic-hunchfree/css/app.css
   ============================================================ */

/* ===== LOCAL FONTS ===== */
@font-face {
  font-family: 'Vintage';
  src: url('/fonts/Vintage.woff2') format('woff2'),
       url('/fonts/Vintage.woff') format('woff'),
       url('/fonts/Vintage.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('/fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('/fonts/LibreBaskerville-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('/fonts/LibreBaskerville-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-VariableItalic.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ===== VARIABLES (exact live-site values) ===== */
:root {
  --dark-blue: #204285;
  --green: #8dc63f;
  --pink: #ad267a;
  --grey: #f3f5f9;
  --dark-grey: #dae0ee;
  --white: #fefefe;
  --border-light: #dae1ee;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
  margin: 0;
  /* colour + background inherit the live site: Bootstrap's #212529 on white.
     Section gradients (.hp-header, .footer, …) supply all of the colour. */
  color: #212529;
  background: #fff;
}
a { text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ===== TYPOGRAPHY (matching live site clamp sizes) ===== */
/* h1 = Vintage font, pink */
h1 {
  font-family: 'Vintage', Arial, sans-serif;
  font-size: clamp(32px, 16px + 2vw, 50px);
  color: #ad2579;
  margin: 0 0 0.5rem;
}
/* h1 span.sub = Montserrat Bold, navy — the subheading line */
h1 span.sub {
  display: block;
  font-size: clamp(20px, 10.7px + 1.33vw, 33px);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #204285;
  line-height: 1.2;
}
/* h2 = Montserrat Bold */
h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 10.7px + 1.33vw, 36px);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
/* h2 span.alt-pink = Vintage, pink */
h2 span.alt-pink {
  font-family: 'Vintage', Arial, sans-serif;
  color: #ad2579;
}
.card h2 { font-size: 1.75rem; }
h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 8px + 1.33vw, 26px);
  margin: 0 0 0.5rem;
}
/* Team member names on /about. Live declares only family/colour/size here, so
   the weight falls through to Bootstrap's `h3 { font-weight: 500 }`. This file
   declares a global `h3 { font-weight: 700 }` instead, and because Vintage ships
   a single weight, Chromium answered that with a synthesised faux-bold — same
   glyph positions, visibly thicker strokes. Restating 500 removes it. Used only
   by the About team cards, so this stays page-scoped in effect. */
h3.name {
  font-family: 'Vintage', Arial, sans-serif;
  color: #ad2579;
  font-size: 1.6rem;
  font-weight: 500;
}
p {
  font-size: clamp(15px, 7px + 0.88vw, 18px);
  margin: 0 0 1rem;   /* Bootstrap/live spacing — not 1em */
}
p.small { font-size: clamp(15px, 7px + 0.88vw, 16px); }
.lead { font-size: clamp(16px, 9px + 0.85vw, 28px); }
.lead.sm { font-size: clamp(14px, 8px + 0.85vw, 23px); }
.pink { color: var(--pink); }
.pink-text { color: var(--pink); }
.blue-text { color: var(--dark-blue) !important; }
.green-text { color: var(--green); }

/* ===== NAV ===== */
nav.navigation {
  position: sticky;
  top: 0;
  background: var(--white);
  border-radius: 1rem 1rem 0 0;
  margin: 0.5rem 0.75rem 0 0.75rem;
  z-index: 1000;
}
nav.navigation.nav-shadow {
  box-shadow: 0px 0px 10px rgb(99 99 99 / 50%);
  border-radius: 0 0 1rem 1rem;
  transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}
nav.navigation .container-fluid { padding: 1.5rem; }
nav.navigation .primary a.nav-link {
  font-weight: 600;
  color: #333;
}
nav.navigation .secondary a.nav-link {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.25px;
  color: #204285;
}
nav.navigation a.nav-link:hover,
.footer .credits li.nav-item a.nav-link:hover,
.footer-menu a:hover { color: var(--pink); }
.nav.primary, .nav.secondary { display: inline-flex !important; }
.mobile-nav { display: none; }
.logo img { max-height: 42px; width: 100%; max-width: 200px; }

/* No active-page underline, deliberately.
   The live theme defines `a.nav-link.active::after` — a 2px pink bar under the current
   nav item — but nothing on mycarepro.net ever adds the `active` class, so on live the
   rule is dead and no page shows the underline. Checked on Home, Services, Broker,
   Individual, Employers, Contact, Insurance Support, About, Insights, an article, a
   team-member page and /cobra-experience: zero occurrences on all twelve.

   This build's `partials/header.ejs` does add the class, so transcribing the rule drew
   an underline on every page that live does not draw. The two `::after` blocks are
   therefore dropped rather than transcribed.

   Removing them cannot affect layout: both were `position: absolute`, so the bar was out
   of flow and contributed no width, height or spacing to the nav. `active` is still
   emitted, so nav markup, links and the `.mobile-menu.active` slide transform are all
   untouched — only the painted bar is gone. If the underline is ever wanted as a
   deliberate improvement over live, restore these two blocks; nothing else needs to
   change. */

/* ===== BUTTONS ===== */
.btn {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15px, 7px + 0.88vw, 18px);
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  line-height: 1.5;
}
.btn-primary {
  color: #fff;
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
}
.btn-primary:hover {
  color: var(--dark-blue);
  background-color: var(--green);
  border-color: var(--green);
}
.btn-secondary {
  color: var(--dark-blue) !important;
  background-color: var(--green);
  border-color: var(--green);
}
.btn-secondary:hover {
  color: #fefefe !important;
  background-color: var(--dark-blue) !important;
  border-color: var(--dark-blue) !important;
}
.btn-secondary.pink {
  color: #fefefe !important;
  background-color: var(--pink);
  border-color: var(--pink);
}

/* ===== GRADIENTS / BACKGROUNDS ===== */
/* Home page header gradient */
.hp-header {
  background: #B9E7B6;
  background: linear-gradient(165deg, rgba(185,231,182,1) 0%, rgba(197,206,227,1) 12%);
}
/* Other pages gradient header */
.gradient-header {
  background: #B9E7B6;
  background: linear-gradient(81deg, rgba(185,231,182,1) 0%, rgba(197,206,227,1) 90%);
}
.grey-bg { background: var(--grey); }
.white-bg { background: var(--white) !important; }
.dark-grey-bg { background: var(--dark-grey); }

/* ===== WRAPPER =====
   The live site has no page wrapper: the nav is the only inset element and
   every section below it is full-bleed. */
/* header-box = white rounded hero area inside .hp-header gradient section */
.header-box {
  border-radius: 0 0 1rem 1rem;
  background: var(--white);
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  overflow: hidden;
}
.content-pad { padding: 5rem 0; }
.lead.bold-light { font-weight: 500; }
/* Live app.css:2066. Missing here, so the Employer hero's green lead line was
   rendering at the body weight of 400 instead of 600. */
.lead.bold { font-weight: 600; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
/* .container-fluid keeps Bootstrap's 15px gutters, as on the live site */

/* ===== HOME HERO ===== */
.hp-header-container {
  display: flex;
}
.hp-header-graphic {
  position: relative;
  padding-top: 1rem;
  width: 35%;
}
.hp-header-content {
  width: 50%;
  margin: 0 auto;
  align-items: center;
  display: flex;
}
.hp-header-content > div {
  margin-top: 3rem;
  margin-bottom: 3rem;
  width: 100%;
}
/* circle behind person */
img.circle {
  width: 90%;
  padding-bottom: 8%;
  animation: bounceY 7s ease-in-out infinite;
  animation-delay: 0.8s;
}
/* person cutout */
img.person {
  position: absolute;
  bottom: 0;
  left: 4%;
  width: 70%;
  z-index: 3;
}
/* dot decoration */
img.dots {
  position: absolute;
  width: 50%;
  right: 12%;
  top: 12%;
  z-index: 2;
}
/* floating info box */
.floating-list {
  position: absolute;
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--border-light);
  padding: 0.75rem;
  right: 0;
  top: 15%;
  z-index: 4;
}
.floating-list span.list-item {
  font-family: "Montserrat", sans-serif;
  color: var(--dark-blue);
  font-weight: 700;
  font-size: 1rem;
  display: block;
  margin-bottom: 0.35rem;
}
.floating-list span.list-item:last-child { margin-bottom: 0; }
.floating-list.lg span.list-item { font-size: 1.35rem; }

@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ===== FLOATING LIST BULLETS (live site uses image ::before) ===== */
.floating-list .list-item {
  position: relative;
  padding-left: 28px;
  display: block;
}
.floating-list .list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url('/theme-assets/list-bullet.png') no-repeat center center;
  background-size: contain;
}

/* ===== LET'S CONNECT SECTION ===== */
.connect-container {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.lets-connect-container {
  position: relative;
  padding-top: 1rem;
  width: 35%;
  height: 100%;
}
/* "Let's Connect" heading – absolute positioned over person */
.lets-connect-container h2 {
  font-family: "Montserrat", sans-serif;
  color: #ad2579;
  font-weight: 800;
  position: absolute;
  bottom: 5%;
  left: 7%;
  width: 30%;
  font-size: 3.5rem;
  line-height: 0.95;
  z-index: 6;
}
img.connect-person {
  width: 65%;
  position: absolute;
  right: -10%;
  bottom: 0;
  z-index: 5;
}
.lets-connect-content {
  width: 50%;
  margin: 0 auto;
  padding-right: 12%;
  display: flex;
  align-items: center;
}
.lets-connect-content > div {
  padding: 1.5rem 0;
  z-index: 5;
}
img.connect-dots {
  height: 85%;
  position: absolute;
  right: 0;
  top: 7.5%;
  z-index: 0;
  transform: scale(-1, -1);
}
img.connect-section-icon {
  height: 110%;
  position: absolute;
  right: 5%;
  z-index: 5;
  bottom: -30%;
}
.connect-icon {
  border: 1px solid var(--dark-blue);
  height: 130px;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  position: absolute;
  z-index: 7;
  top: -100%;
  right: -15%;
}
.connect-icon img.icon { width: 75%; }

/* ===== HP SEGMENTATION (Who Are You section) ===== */
.hp-segmentation { background: var(--white); }
.segment-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 4rem 1.5rem;
}
.card.segment {
  border-radius: 1rem;
  border: 1px solid var(--green);
  background: var(--grey);
  margin-top: 4rem;
  overflow: visible;
}
.card.segment .card-body {
  padding: 1.25rem 2.5rem 2.5rem;
}
.card.segment .icon {
  border: 1px solid var(--dark-blue);
  height: 80px; width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: -60px auto 0;
  background: var(--white);
}
.card.segment .icon img { max-width: 60%; }
.card.segment h3 {
  font-family: 'Vintage';
  font-size: clamp(20px, 10.7px + 1.33vw, 33.5px);
  font-weight: 500;            /* live inherits Bootstrap's heading weight */
  margin-top: 0.8rem;
  color: var(--dark-blue);
}
.card.segment h3 span.alt-pink {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(20px, 10.7px + 1.33vw, 33.5px);
  margin-top: 0.8rem;
  font-weight: 700;
  color: #ad2579;
}
.card.segment p { font-size: clamp(14px, 7px + 0.88vw, 18px); }
@media (max-width: 1070px) {
  .card.segment .card-body { padding: 1rem; }
}

/* ===== CTA FLEX BOX (form + illustration area) ===== */
.cta-insights { background: var(--white); }
.cta-flex-box {
  display: flex;
  position: relative;
  aspect-ratio: 8 / 3.25;
  margin-top: 3rem;
}
@media (max-width: 1650px) {
  .cta-flex-box { aspect-ratio: 6 / 2; }
}
/* The ≤1350px `.cta-flex-box h2` override lives further down, immediately after
   the base rule it overrides — same order as the live stylesheet. Declared here
   it lost to the later base rule and never applied. */
img.cta-circle {
  position: absolute;
  width: 32%;
  right: -0.75%;
  top: -20%;
  z-index: 3;
}
img.cta-dots {
  width: 20%;
  position: absolute;
  right: 14%;
  top: -7.5%;
  z-index: 4;
  transform: scale(-1, -1);
}
img.cta-person {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  width: 30%;
}
img.cta-photo {
  position: absolute;
  width: 42%;
  right: 24%;
  z-index: 1;
  bottom: 17%;
}
img.cta-icon {
  position: absolute;
  z-index: 2;
  right: 62%;
  top: 0;
  width: 180px;
}
@media (max-width: 1650px) {
  img.cta-photo { bottom: 8%; }
}
.cta-flex-box h2 {
  font-family: "Montserrat", sans-serif;
  color: #ad2579;
  font-weight: 800;
  position: absolute;
  bottom: 30%;
  left: 2%;
  width: 30%;
  font-size: 3.5rem;
  line-height: 0.95;
  z-index: 6;
}
@media (max-width: 1350px) {
  .cta-flex-box h2 { font-size: 2.5rem; bottom: 20%; }
}

/* ===== CTA / FORM GRID ===== */
.cta-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-top: 3rem;
}
.cta-left-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ===== FORM CARD ===== */
.card.hp-form-container {
  border-radius: 1rem;
  border: 1px solid var(--green);
  background: var(--grey);
  position: relative;
  margin-top: 0;
}
.card-body-inner {
  padding: 1.5rem 2rem 2rem;
  position: relative;
}
img.form-icon {
  position: absolute;
  top: -4%;
  right: 10%;
  width: 20%;
}
@media (max-width: 1350px) {
  img.form-icon { right: 9%; width: 18%; }
}
@media (max-width: 1285px) {
  img.form-icon { right: 3%; width: 30%; }
}
@media (max-width: 1200px) {
  img.form-icon { right: 14%; width: 28%; top: unset; bottom: 4%; }
}
/* Contact form iframe height — fixed, as on the live site */
#mycarepro-form { height: 635px; }
@media (max-width: 1577px) {
  #mycarepro-form { height: 660px; }
}
/* Two-column layout inside form card */
.form-two-col {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  align-items: start;
}
.form-contact-info {
  padding-top: 0.5rem;
}
.form-contact-info p.small {
  font-size: 13px;
  color: var(--dark-blue);
  margin: 0 0 6px;
  line-height: 1.4;
}
.form-contact-info a { color: var(--dark-blue); }
.contact-panel { padding: 2rem; }
.contact-panel h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #333;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.form-group { margin-bottom: 0.9rem; }
.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dark-blue);
  margin-bottom: 4px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.radio-group label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; margin-bottom: 5px; }
.radio-group input { width: auto; }

/* ===== INSIGHTS SIDEBAR ===== */
.insights-container {
  border-radius: 1rem 0 0 1rem;
  background: var(--dark-grey);
  padding: 1.25rem;
}
@media (max-width: 767px) { .insights-container { border-radius: 1rem; } }
.insights-container h2 {
  font-family: 'Vintage', Arial, sans-serif;
  color: #ad2579;
  font-size: 2rem;
  margin-bottom: 8px;
}
.insights-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.insights-icon-row img { height: 28px; width: auto; }
.insight-item {
  border-radius: 1rem;
  border: 1px solid var(--dark-blue);
  margin-top: 1rem;
  aspect-ratio: 16 / 9;
  background: var(--white);
  display: flex;
  align-items: end;
  justify-content: start;
  padding: 0.5rem;
  position: relative;
  background-size: cover;
  background-position: center;
}
.insight-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  border-radius: 12px;
}
.insight-item .insight-content { position: relative; z-index: 1; }
.insight-item .insight-content h4 { font-size: 1.2rem; color: #fff; margin: 0 0 0.5rem; font-family: "Montserrat", sans-serif; font-weight: 700; line-height: 1.2; }
.insight-btn.btn {
  background: var(--green);
  border: 1px solid var(--dark-blue);
  border-radius: 0.5rem;
  padding: 0.4rem 1rem;
  font-size: 16px;
}
.insight-btn.btn:hover { color: var(--white); background: var(--dark-blue); }

/* ===== CHECKLIST (uses green-check.png) ===== */
.checks .list-item, .p-list .list-item {
  position: relative;
  padding-left: 32px;
  display: block;
  margin-bottom: 10px;
  font-size: clamp(15px, 7px + 0.88vw, 18px);
}
.checks .list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  background: url('/theme-assets/green-check.png') no-repeat center center;
  background-size: contain;
}
.p-list .list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url('/theme-assets/list-bullet.png') no-repeat center center;
  background-size: contain;
}
.p-list.descriptions .list-item { margin-bottom: 1.2rem; }
.p-list.descriptions .list-item::before { top: 11px; }

/* Services header check list (pink, uppercase, bold) */
.services-header-list .list-item {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
  font-size: clamp(18px, 10.7px + 1.33vw, 24px);
  padding-bottom: 7px;
  color: var(--pink);
}

/* ===== SERVICES PAGE HEADER ===== */
.service-header-container {
  display: flex;
  align-items: stretch;
}
img.services-header {
  position: absolute;
  left: -24%;
  top: 50%;
  width: 60%;
  transform: translateY(-50%);
}
.service-header-content-container {
  width: 64%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
}
.services-header-list {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 0 auto;
}
.lets-connect-services-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2%;
  width: 70%;
  margin: 0 auto;
}
.service-header-connect h2 {
  font-size: clamp(50px, 10.7px + 1.33vw, 55px);
  color: var(--dark-blue);
  font-weight: 900;
  margin-bottom: 0;
  line-height: 1;
  z-index: 10;
  position: relative;
}
.service-header-disclaimer {
  width: 70%;
  margin: 0 auto;
  padding-top: 5%;
  padding-bottom: 10%;
}

/* ===== BROKER PAGE HEADER ===== */
/* Deliberately NOT position: relative — the live theme leaves this element static
   so the absolutely-positioned children (.broker-icon, .floating-list, img.dots)
   resolve their percentages against the Bootstrap .col ancestor (590px at 1440),
   not against this element's 728px padding box. */
.broker-header-container {
  margin-right: -30%;
  padding-left: 15%;
}
.broker-header-container img.circle { width: 100%; }
.broker-header-container img.dots { width: 40%; right: -5%; top: 3%; }
.broker-header-container img.person {
  bottom: unset;
  top: 10%;
  width: 80%;
  left: unset;
  right: 0;
}
.broker-header-container .floating-list { right: unset; left: 10%; top: 15%; }
.broker-header-container .floating-list span.list-item { font-size: 1rem; }
.broker-header-content { margin-top: -10rem; }
.broker-header-content h2 span.alt-pink {
  font-family: 'Vintage', Arial, sans-serif;
  color: #ad2579;
  font-size: clamp(32px, 12.7px + 2.33vw, 45px);
  margin-bottom: 1rem;
  display: block;
}
.broker-header-container .broker-icon {
  width: 40%;
  position: absolute;
  bottom: 10%;
  left: 0;
}
.brokers-image-container { max-width: 80%; margin-top: -5rem; padding-bottom: 5rem; }
.negative-margin { margin-top: -8rem; }

/* ===== ABOUT PAGE ===== */
.about-header { position: relative; width: 100%; height: 100%; }
img.about-img { max-height: 700px; right: -25%; position: relative; }
.about-header .floating-list { right: unset; left: 20%; top: unset; bottom: 40%; }
span.about-text {
  position: absolute;
  top: 15%;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dark-blue);
  left: 20%;
  z-index: 3;
  line-height: 1.25;
}

/* ===== OFFSET CONTAINERS (photo + circle + dots) ===== */
.offset-container { position: relative; height: 100%; width: 100%; }
img.offset-photo { position: absolute; height: 100%; width: auto; z-index: 1; }
.offset-container.bottom img.circle {
  width: auto;
  height: 100%;
  padding-bottom: unset;
  position: absolute;
  z-index: 0;
  bottom: -4%;
  left: 1%;
}
.offset-container img.dots { width: 30%; top: unset; right: unset; left: 0; bottom: 20%; }
.offset-container .floating-list { right: unset; bottom: 10%; top: unset; }
.offset-container.medicare {
  transform: translateY(-6rem);
  position: relative;
  display: inline-block;
  height: auto;
  width: auto;
  margin-left: -5%;
}
.offset-container.medicare img.offset-photo { position: relative; height: auto; width: 95%; }
.offset-container.medicare img.circle { width: 95%; height: auto; padding-bottom: unset; position: absolute; z-index: 0; bottom: unset; left: 0; top: -1rem; }
.offset-container.medicare img.dots { width: 40%; height: auto; top: unset; right: 0; bottom: 0; left: unset; }
.offset-container.medicare .connect-icon { top: unset; bottom: 0; right: unset; left: -15%; width: 220px; height: 220px; }
.extra-protection-img-container { position: relative; }
img.ep-icon { position: absolute; bottom: -11%; right: 3%; width: 30%; }
img.dots.ep { width: 25%; right: unset; left: 0; top: unset; bottom: 3%; }
.floating-list.ep { right: unset; left: -8%; }

/* ===== TWO COLUMN UTILITY ===== */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.two-col-grid.start { align-items: flex-start; }
.row-flex { display: flex; gap: 2rem; align-items: center; }
.col-left { flex: 1; }
.col-right { flex: 1; }

/* ===== SECTION PADDING ===== */
.padding { padding: 5rem 0; }
.padding-sm { padding: 3rem 0; }

/* ===== INSIGHTS / BLOG ===== */
img.card-img-top { object-fit: cover; aspect-ratio: 16 / 9; object-position: center; border-radius: 1rem 1rem 0 0; width: 100%; }
.insight-callout {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 90%, #ffffff 100%),
              linear-gradient(-158deg, #dae0ee, #a6e5cb);
  position: relative;
}
.insight-callout img.dots { position: absolute; width: 10%; right: unset; top: 2%; z-index: 0; left: 0; }
@media (max-width: 1280px) { .insight-callout img.dots { width: 15%; } }
@media (max-width: 991px)  { .insight-callout img.dots { width: 20%; } }
@media (max-width: 767px)  { .insight-callout img.dots { display: none; } }
img.insight-img { position: absolute; height: 110%; top: -7%; left: -5%; }
img.featured-img { border-radius: 1rem; object-fit: cover; aspect-ratio: 16 / 9; width: 100%; }
.gradient-top {
  position: relative;
  background: linear-gradient(165deg, rgba(185,231,182,1) 0%, rgba(197,206,227,1) 50%);
}
.gradient-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, transparent 0%, white 30%);
  pointer-events: none;
}
.insight-content { position: relative; z-index: 1; }
.insight-content h2 { font-family: 'Vintage', Arial, sans-serif; font-size: clamp(32px, 16px + 2vw, 50px); color: var(--pink); }
.insight-content h3 { display: block; font-size: clamp(20px, 10.7px + 1.33vw, 33px); font-family: "Montserrat", sans-serif; font-weight: 700; color: #204285; }
.insight-content h4 { display: block; font-size: clamp(20px, 10.7px + 1.33vw, 33px); font-family: "Montserrat", sans-serif; font-weight: 700; color: #204285; }

/* ===== TEAM ===== */
.team-photo-container { position: relative; margin-bottom: 1.5rem; }
img.default-photo { width: 100%; background: #e5e5e5; border-radius: 5%; }
img.hover-photo { position: absolute; width: 100%; z-index: 2; top: 0; left: 0; background: #e3e3e3; border-radius: 5%; opacity: 0; visibility: hidden; }
.team-photo-container:hover { transform: scale(1.05) rotate(-2deg); }
.team-photo-container:hover img.hover-photo { visibility: visible; opacity: 1; transition: all 300ms; }
span.title { font-family: "Montserrat", sans-serif; display: block; font-weight: 600; font-size: 1.15rem; color: var(--dark-blue); }

/* ===== FOOTER ===== */
.footer {
  background: #B9E7B6;
  background: linear-gradient(81deg, rgba(185,231,182,1) 0%, rgba(197,206,227,1) 90%);
  padding-top: 3rem;
  border-radius: 0 1rem 1rem 0;
  margin-left: calc(-1.5rem - 15px);
  padding-left: calc(1.5rem + 15px);
  position: relative;
  padding-bottom: 1rem;
}
.footer img.dots { position: absolute; width: 100px; left: 0; right: unset; top: 35%; z-index: 0; }
.footer hr { border-color: var(--dark-blue); }
.bottom-bar { background: var(--dark-blue); height: 2.5rem; z-index: -1; margin-top: -2rem; }
.footer-menu a { color: #333; font-weight: 500; }
.footer .credits li.nav-item a.nav-link, .footer .credits li.nav-item {
  font-size: clamp(10px, 7px + 0.88vw, 12px);
  font-weight: 600;
  color: var(--dark-blue);
}
p.disclaimer { font-size: 0.85rem; line-height: 1.1; color: var(--dark-blue); margin-bottom: 3rem; }
.footer .form-control { height: calc(1.5em + .75rem + 10px); width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 8px; font-family: inherit; font-size: 14px; }

/* ===== PARALLAX ===== */
.parallax { position: relative; width: 100%; aspect-ratio: 1920 / 600; overflow: hidden; }
.parallax img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 120%; height: auto; }

/* ===== BUTTON ALIASES (legacy class names used in admin views) ===== */
.btn-navy { color: #fff; background-color: var(--dark-blue); border-color: var(--dark-blue); }
.btn-navy:hover { background-color: var(--green); border-color: var(--green); color: var(--dark-blue); }
.btn-green { color: var(--dark-blue); background-color: var(--green); border-color: var(--green); }
.btn-green:hover { background-color: var(--dark-blue); border-color: var(--dark-blue); color: #fff; }
.btn-pink { color: #fff; background-color: var(--pink); border-color: var(--pink); }
.btn-pink:hover { background-color: var(--dark-blue); border-color: var(--dark-blue); }

/* ===== ADMIN ===== */
.admin-shell { max-width: 1100px; margin: 30px auto; padding: 0 24px; }
.admin-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; }
.admin-table th { background: var(--grey); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #e5f5e0; color: #3a7d2c; }
.login-box { max-width: 380px; margin: 80px auto; background: white; border: 1px solid #ddd; border-radius: 10px; padding: 32px; box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.flash-success { background: #e5f5e0; border: 1px solid var(--green); padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.error-text { color: #b91c1c; font-size: 13px; }

/* ===== RESPONSIVE ===== */

/* Live site breakpoints for hero columns */
@media (max-width: 1559px) {
  .hp-header-graphic, .lets-connect-container { width: 35%; }
  .hp-header-content, .lets-connect-content { width: 55%; margin: 0 3rem 0 auto; }
  img.connect-section-icon { height: 90%; right: 2%; bottom: -30%; }
}
@media (max-width: 1491px) {
  img.connect-person { right: -7%; }
  .connect-icon { right: -10%; width: 100px; height: 100px; top: -50%; }
  .lets-connect-container h2 { font-size: 3rem; }
}
@media (max-width: 1285px) {
  img.connect-section-icon { height: 70%; right: 3%; bottom: -35%; }
  img.connect-dots { height: 70%; top: 15%; }
}
@media (max-width: 1201px) {
  .hp-header-graphic, .lets-connect-container { width: 40%; }
  .hp-header-content, .lets-connect-content { width: 55%; margin: 0 0 0 auto; }
  img.connect-person { right: 0%; width: 60%; }
  .connect-icon { right: -5%; width: 90px; height: 90px; top: -38%; }
}

@media (max-width: 1095px) {
  img.connect-section-icon { display: none; }
}
@media (max-width: 1110px) {
  .cta-flex-box { display: none; }
  .card.hp-form-container { margin-bottom: 2.5rem; }
}
@media (max-width: 1068px) {
  .logo img { max-height: 32px; max-width: 145px; }
  nav.navigation .primary a.nav-link { font-size: 0.9rem !important; padding: 0.5rem 0.75rem; }
  nav.navigation .secondary a.nav-link { font-size: 0.7rem; }
}
@media (max-width: 926px) {
  nav.navigation .container-fluid { padding: 1rem 1.5rem; }
  .logo img { max-height: 30px; }
  nav.navigation .primary a.nav-link { display: none; }
  nav.navigation .secondary a.nav-link,
  nav.navigation .secondary li.nav-item { display: none; }
  .mobile-nav { display: inline-flex; }
  .nav.primary, .nav.secondary { display: none; }
}

/* --- HOME LET'S CONNECT BANNER (live breakpoint) --- */
@media (max-width: 941px) {
  img.connect-person { width: 70%; }
  .lets-connect-content { padding-right: 5%; }
  .lets-connect-container h2 { left: 0%; font-size: 2.5rem; }
}

/* --- HOME HERO + BANNER STACK (live breakpoint) --- */
@media (max-width: 799px) {
  .hp-header-container { flex-wrap: wrap; }
  .hp-header-content { width: 90%; margin: 0 auto 0 auto; order: 1; }
  .lets-connect-content { padding-right: 0; width: 90%; margin: 0 auto; }
  .lets-connect-content div { padding: 0 0 1.5rem 0; }
  .lets-connect-container {
    width: 90%;
    margin: 0 auto;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 0.5rem;
  }
  .hp-header-graphic { width: 90%; margin: 0 auto; order: 2; }
  .hp-header-graphic img.circle { width: 90%; }
  img.connect-person, .connect-icon { display: none; }
  .lets-connect-container h2 {
    left: 0%;
    width: 100%;
    position: relative;
    bottom: 0;
    color: var(--dark-blue);
  }
}

/* ===== TABLET — other pages collapse at the hamburger breakpoint (≤ 926px) ===== */
@media (max-width: 926px) {
  /* --- SERVICES HERO ---
     .service-header-container, .service-hero-photo and .services-header-list are
     used only by the Services page, which now follows the live site's own
     breakpoints (1120 / 791 / 650) in the SERVICES PAGE block at the end of this
     file, so their 926px overrides are gone. The three rules below are still
     shared with views/individual.ejs and are left exactly as they were; the
     Services page opts out of them via #services-hero. */
  .service-header-content-container { width: 100%; margin-left: 0; padding: 2rem 1.5rem; }
  .lets-connect-services-header-container { width: 100%; }
  .service-header-disclaimer { width: 100%; padding-top: 1.5rem; padding-bottom: 2rem; }

  /* --- BROKER HERO ---
     The hand-tuned 926px overrides that used to live here belonged to the old
     .broker-hero-flex markup. The Broker page now follows the live site's own
     991px breakpoint in the BROKER PAGE block at the end of this file. */

  /* --- INDIVIDUAL / EMPLOYERS HERO --- */
  .page-hero-flex { flex-wrap: wrap; min-height: unset !important; }
  .page-hero-flex .hp-header-graphic { width: 80%; margin: 0 auto; order: 3; min-height: 220px; }
  .page-hero-flex > div[style*="flex:1"],
  .page-hero-flex > div[style*="flex: 1"] { width: 100% !important; order: 1; padding: 2rem 1.5rem; }
  .hero-sidebar { display: none; }

  /* --- HOME CTA (form + insights sidebar) --- */
  .cta-form-grid { grid-template-columns: 1fr !important; }

  /* --- GENERAL GRIDS --- */
  .two-col-grid { grid-template-columns: 1fr; }
  .segment-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* --- FOOTER --- */
  .footer-links-grid { grid-template-columns: 1fr !important; }

  /* --- BROKER SECONDARY GRID --- */
  .broker-secondary-grid { grid-template-columns: 1fr !important; }

}

/* ===== HOME HERO — live mobile rules ===== */
@media (max-width: 991px) {
  .hp-header-graphic .floating-list { display: none; }
}
@media (max-width: 880px) { #mycarepro-form { height: 790px; } }
@media (max-width: 844px) { #mycarepro-form { height: 1200px; } }
@media (max-width: 767px) {
  .floating-list span.list-item { font-size: 0.8rem !important; }
}

/* ===== SMALL PHONES (≤ 599px) ===== */
@media (max-width: 599px) {
  /* Home hero graphic */
  .hp-header-graphic img.circle { width: 100%; }
  .hp-header-graphic img.person { left: 0; width: 80%; }
  img.connect-dots { display: none; }

  /* Broker hero: the live site has no 599px overrides for it — see the BROKER PAGE
     block at the end of this file. */

  /* Floating list text */
  .floating-list.lg span.list-item { font-size: 1rem; }

  /* Section padding tighter */
  .content-pad { padding: 3rem 0; }
  .padding { padding: 3rem 0; }
  .padding-sm { padding: 1.5rem 0; }
}

/* ===== MISC ===== */
.p.grey-text { font-size: 14px; font-weight: 700; color: #a8a8a8; }
li.post-list-item { padding: 0.5rem; border-bottom: 1px solid var(--green); }
li.post-list-item:last-child { border-bottom: none; }
/* ===== HAMBURGER / MOBILE MENU (live markup + behaviour) ===== */
.hamburger .line {
  width: 35px;
  height: 2px;
  background-color: var(--dark-blue);
  display: block;
  margin: 8px auto;
  transition: all 0.3s ease-in-out;
}
.hamburger:hover { cursor: pointer; }
#hamburger.is-active .line:nth-child(2) { opacity: 0; }
#hamburger.is-active .line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger.is-active .line:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }
body.no-scroll, .no-scroll { overflow: hidden; }
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  background: linear-gradient(-158deg, #dae0ee, #a6e5cb);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 999;
  padding: 20px;
}
.mobile-menu.active { transform: translateY(0); }
.mobile-links { display: flex; flex-direction: column; gap: 12px; margin-top: 70px; }
.mobile-links a { font-family: "Montserrat", sans-serif; font-weight: 600; color: var(--dark-blue); }
.no-scroll nav.navigation {
  box-shadow: none !important;
  border-radius: none;
  background: transparent;
  transition: all 0.3s ease;
}

/* =====================================================================
   SERVICES PAGE — mirrors the live site's own rules for /services
   (see SERVICES_PIXEL_QA.md).

   Everything here is scoped to #services-hero / #cobra / #ind / #medicare /
   #extra so that the approved homepage and the other pages that share these
   class names (views/individual.ejs, views/employers.ejs, views/broker.ejs)
   keep the styling they have today. On the live site these same declarations
   are global; scoping them is the smallest safe change.
   ===================================================================== */

/* --- Section backgrounds ---------------------------------------------
   The live theme redefines .grey-bg to #ebebeb (app.css:2426) after the
   earlier var(--grey) / #f3f5f9 declaration, so #ebebeb is what actually
   paints. Applied only to the two Services sections that use it. */
#cobra.grey-bg,
#medicare.grey-bg { background: #ebebeb; }

/* --- Hero ------------------------------------------------------------ */
/* Mobile-only "Let's Connect" + disclaimer block (services-only class). */
.disclaimer-mobile { display: none; }

/* The live checklist links sit tight together: the base .list-item padding of
   28px and no bottom margin. */
#services-hero .services-header-list .list-item {
  padding-left: 28px;
  margin-bottom: 0;
}

/* Live centres the magnifier icon in the flex row with auto margins. */
#services-hero .services-header-icon {
  margin-left: auto;
  margin-right: auto;
}

/* The mobile-only disclaimer block repeats the magnifier icon as a plain <img>
   with no width of its own, so it should render at its natural 201x150. This
   file's global `img { max-width: 100% }` (which the live theme does not have)
   shrank it to 192x143 as a flex item, costing 7px of hero height at 375px. The
   Individual page already carries the identical opt-out for its own copy of this
   block; the Services one was missed. `.disclaimer-mobile` is hidden above
   791px, so this only ever applies at mobile widths. */
#services-hero .disclaimer-mobile .services-header-icon img { max-width: none; }

@media (max-width: 1120px) {
  #services-hero .services-header-list,
  #services-hero .service-header-disclaimer { width: 80%; }
}

/* Opt back out of the shared 926px block above, which stretches these to full
   width for views/individual.ejs. The live site holds its desktop proportions
   until 791px / 650px. Breakpoints below run in descending order so the
   narrower query always wins the cascade. */
@media (max-width: 926px) {
  #services-hero .service-header-content-container {
    width: 64%;
    margin-left: auto;
    padding: 0;
  }
  #services-hero .lets-connect-services-header-container { width: 70%; }
  #services-hero .service-header-disclaimer {
    padding-top: 5%;
    padding-bottom: 10%;
  }
}

@media (max-width: 791px) {
  #services-hero .disclaimer-mobile {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }
  #services-hero .lets-connect-services-header-container.desktop,
  #services-hero .service-header-disclaimer { display: none; }
  #services-hero .services-header-list { width: 94%; }
  #services-hero .service-header-connect h2 { margin-left: 0; }
}

@media (max-width: 650px) {
  #services-hero .service-header-container { flex-direction: column; }
  #services-hero img.services-header {
    top: 0;
    position: relative;
    transform: translateY(0);
    left: 0;
    width: 75%;
    align-self: center;
    display: block;
  }
  #services-hero .service-header-content-container {
    width: 85%;
    margin-right: auto;
    margin-top: 5%;
  }
  #services-hero .disclaimer-mobile .service-header-connect h2 {
    font-size: clamp(28px, 10.7px + 1.33vw, 55px);
  }
  #services-hero .lets-connect-services-header-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Bullet lists ----------------------------------------------------
   The live theme has no `.p-list .list-item::before`, so `.checks` supplies the
   green check for `ul.p-list.checks`. This file does declare one, and because it
   comes later it was overriding the check with the pink bullet. Restore the
   check (and the live 28px indent / inherited 16px size) for the Services
   lists only. */
/* This file's global `ul, ol { margin: 0; padding: 0 }` reset strips the
   browser's 40px list indent and Bootstrap's 1rem list margin, both of which
   the live site keeps. Put them back for the Services lists. */
#cobra .p-list,
#ind .p-list,
#medicare .p-list {
  padding-left: 40px;
  margin-bottom: 1rem;
}
#cobra .p-list .list-item,
#ind .p-list .list-item,
#medicare .p-list .list-item {
  padding-left: 28px;
  font-size: 1rem;
}
#cobra .p-list.checks .list-item::before,
#ind .p-list.checks .list-item::before,
#medicare .p-list.checks .list-item::before {
  width: 21px;
  height: 21px;
  top: 40%;
  background: url('/theme-assets/green-check.png') no-repeat center center;
  background-size: contain;
}

/* --- Individual & Family full-bleed image column --------------------- */
.individual-family-img {
  background: url('/theme-assets/services-ind-family.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}
.individual-family-img img.dots {
  position: absolute;
  width: 30%;
  left: 0;
  top: unset;
  right: unset;
  bottom: 5%;
  z-index: 2;
}
.individual-family-img .floating-list {
  bottom: 10%;
  top: unset;
  left: 40%;
  right: unset;
}
@media (max-width: 991px) {
  .individual-family-img { height: 400px; }
}

/* ===== INDIVIDUAL PAGE =====
   Same two classes of override the Services and Broker pages needed:
   1. Restoring the live bullet list (this file's later `.p-list .list-item::before`
      otherwise beats `.checks` and swaps the green check for the pink bullet),
      plus the live 40px list indent / 28px item indent / 16px size that this
      file's `ul, ol` reset strips.
   2. The live theme's explicit height for the two embedded Zoho form iframes. */
#ind-cobra .p-list,
#ind-medicare .p-list {
  padding-left: 40px;
  margin-bottom: 1rem;
}
#ind-cobra .p-list .list-item,
#ind-medicare .p-list .list-item {
  padding-left: 28px;
  font-size: 1rem;
}
#ind-cobra .p-list.checks .list-item::before,
#ind-medicare .p-list.checks .list-item::before {
  width: 21px;
  height: 21px;
  top: 40%;
  background: url('/theme-assets/green-check.png') no-repeat center center;
  background-size: contain;
}
/* The live theme gives each embedded Zoho form an explicit height that steps up
   as the column narrows and the form's own fields wrap. Transcribed from the
   live app.css rules for #ind-form-one / #ind-form-two, in the same order, so
   the cascade resolves the same way. */
#ind-form-one,
#ind-form-two {
  height: 635px;
}
@media (max-width: 1426px) {
  #ind-form-one,
  #ind-form-two { height: 660px; }
}
@media (max-width: 1163px) { #ind-form-two { height: 700px; } }
@media (max-width: 1114px) { #ind-form-two { height: 1100px; } }
@media (max-width: 991px)  { #ind-form-two { height: 690px; } }
@media (max-width: 581px)  { #ind-form-one { height: 800px; } }
@media (max-width: 560px)  { #ind-form-one { height: 1200px; } }
@media (max-width: 557px)  { #ind-form-two { height: 1200px; } }
/* --- Individual hero responsive --------------------------------------
   Mirrors the live site's own breakpoints for /individual (791 / 767) and opts
   this hero out of the shared 926px block above, which was written for the old
   .page-hero-flex markup and stretches these blocks to full width far earlier
   than the live site does. Descending order so the narrower query wins. */
@media (max-width: 926px) {
  #individual-hero .service-header-content-container {
    margin-left: auto;
    padding: 0;
  }
  #individual-hero .service-header-disclaimer {
    padding-top: 5%;
    padding-bottom: 10%;
  }
}

@media (max-width: 791px) {
  #individual-hero .disclaimer-mobile {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }
  #individual-hero .lets-connect-services-header-container.desktop,
  #individual-hero .service-header-disclaimer { display: none; }
  #individual-hero .service-header-connect h2 { margin-left: 0; }
}

@media (max-width: 767px) {
  #individual-hero .service-header-container.ind { flex-direction: column; }
  #individual-hero img.services-header.ind {
    top: 0;
    position: relative;
    transform: translateY(0);
    left: 0;
    width: 75%;
    align-self: center;
    display: block;
  }
}

@media (max-width: 650px) {
  #individual-hero .disclaimer-mobile .service-header-connect h2 {
    font-size: clamp(28px, 10.7px + 1.33vw, 55px);
  }
  /* The block itself is emptied at this width (its two children are hidden at
     ≤791px), but the live rule's 5% top margin still spaces the Contact Us
     button off the paragraph above it. `width` is overridden by the element's
     own `w-100` here, as on the live site. */
  #individual-hero .service-header-content-container {
    width: 85%;
    margin-right: auto;
    margin-top: 5%;
  }
}

/* Below ~380px the "Let's Connect" heading and the magnifier icon no longer fit
   side by side. The live theme has no global `img { max-width: 100% }`, so the
   icon keeps its natural 201x150 and simply overflows the row; this file's rule
   at the top instead shrinks it, which shortens the block by 18px. Opt this one
   image out rather than dropping a global that approved pages rely on. */
#individual-hero .disclaimer-mobile .services-header-icon img { max-width: none; }

/* --- Individual page: COBRA-alternatives image column -----------------
   Same full-bleed column as the Services page uses, but the live Individual
   page swaps in a different photo and drops the floating list lower and past
   the column's left edge. Scoped to `.cobra` so the Services page (already an
   approved baseline) keeps its own photo and list position. */
.individual-family-img.cobra {
  background-image: url('/theme-assets/ind-cobra-alt.jpg');
}
.individual-family-img.cobra .floating-list {
  bottom: 35%;
  top: unset;
  left: -5%;
  right: unset;
}
/* Below 992px the live site shortens this column to a fixed 500px band, shifts
   the crop up, and tucks the floating list back inside it. Declared after the
   shared `@media (max-width: 991px) { .individual-family-img { height: 400px } }`
   above so the `.cobra` height wins. */
@media (max-width: 991px) {
  .individual-family-img.cobra {
    background-position: 50% 20%;
    height: 500px;
  }
  .individual-family-img.cobra .floating-list {
    bottom: 5%;
    left: 45%;
  }
}

/* --- COBRA image group -----------------------------------------------
   The photo and the circle are sized `height: 100%; width: auto`, so they end
   up wider than their column and are clipped by `body { overflow-x: hidden }`,
   exactly as on the live site. This file's global `img { max-width: 100% }`
   would otherwise squash both back to the column width. */
#cobra .offset-container.bottom img.offset-photo,
#cobra .offset-container.bottom img.circle { max-width: none; }

@media (max-width: 1200px) {
  #cobra img.offset-photo,
  #cobra .offset-container.bottom img.circle,
  #cobra .offset-container.bottom { max-height: 600px; }
  #cobra .offset-container.bottom { transform: translateY(10%); }
}
@media (max-width: 991px) {
  #cobra .offset-container.bottom {
    position: relative;
    height: 400px;
    width: 420px;
    transform: translateY(0);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    max-height: 400px;
  }
  #cobra img.offset-photo { height: auto; width: 100%; }
}
@media (max-width: 767px) {
  #cobra .offset-container.bottom { height: 400px; width: 100%; }
  #cobra .offset-container.bottom img.circle { width: 100%; height: auto; bottom: 7%; }
}

/* --- Medicare image group --------------------------------------------
   Order matters and mirrors the live stylesheet: live declares the ≤991px
   connect-icon rule first and the ≤1381px one later, so below 991px the
   1381px size (180px) is what actually wins. The ≤991px `display: flex` still
   applies — it out-specifies the ≤799px `.connect-icon { display: none }` that
   hides the icon on the home page. */
@media (max-width: 991px) {
  #medicare .offset-container.medicare {
    transform: translateY(-2rem);
    margin-left: unset;
  }
  #medicare .offset-container.medicare .connect-icon {
    top: unset;
    bottom: 5%;
    right: unset;
    left: 5%;
    width: 100px;
    height: 100px;
    display: flex;
  }
}
@media (max-width: 1381px) {
  #medicare .offset-container.medicare .connect-icon {
    top: unset;
    bottom: 0;
    right: unset;
    left: -5%;
    width: 180px;
    height: 180px;
  }
}
/* Live caps `img.offset-photo` at 600px tall below 1200px. With `height: auto`
   that also pulls the whole inline-block group back from the column width to
   ~600px wide. The rule was transcribed for the COBRA group on this page and for
   the Employer hero, but not for this Medicare group, so at 844px wide the photo
   rendered 640px instead of live's 570px and the section ran 69px tall. Same
   scoping approach as those two. */
@media (max-width: 1200px) {
  #medicare img.offset-photo { max-height: 600px; }
}

/* ===== EMPLOYER PAGE =====
   `.no-t` ("no top offset") is the live theme's modifier for the Employer hero's
   photo group: it cancels the Medicare variant's -6rem lift and left pull, and
   nudges the photo and the Let's-Connect badge instead. Only
   views/employers.ejs carries the class, so these need no id scoping. */
.offset-container.medicare.no-t {
  transform: translateY(0);
  margin-left: 0;
}
.offset-container.medicare.no-t img.offset-photo { top: 0.75rem; }
.offset-container.medicare.no-t img.circle { top: 0; }
.offset-container.medicare.no-t .connect-icon { bottom: 5%; }

/* The same two breakpoints the Services Medicare section needs, for this hero's
   copy of the group. Declared in the live file's order (991 before 1381) so the
   180px badge is what wins below 991px, exactly as on the live site. */
@media (max-width: 991px) {
  #employer-hero .offset-container.medicare {
    transform: translateY(-2rem);
    margin-left: unset;
  }
  #employer-hero .offset-container.medicare.no-t { margin-bottom: 3rem; }
  #employer-hero .offset-container.medicare .connect-icon {
    top: unset;
    bottom: 5%;
    right: unset;
    left: 5%;
    width: 100px;
    height: 100px;
    display: flex;
  }
}
@media (max-width: 1381px) {
  #employer-hero .offset-container.medicare .connect-icon {
    top: unset;
    bottom: 0;
    right: unset;
    left: -5%;
    width: 180px;
    height: 180px;
  }
}

/* On the live site the two `.no-t` declarations above out-specify the plain
   `.offset-container.medicare` rules inside those media queries, so the group
   keeps `translateY(0)` and the badge keeps `bottom: 5%` at every width. Adding
   `#employer-hero` to the media rules inverted that, so restate the `.no-t`
   values at matching specificity. Placement is irrelevant — these win on
   specificity, not order. */
#employer-hero .offset-container.medicare.no-t { transform: translateY(0); }
#employer-hero .offset-container.medicare.no-t .connect-icon { bottom: 5%; }

/* Live caps `img.offset-photo` at 600px tall below 1200px, which (with
   `height: auto`) also pulls the whole inline-block group back to ~600px wide
   instead of letting it fill the column once the hero stacks. Scoped here the
   same way the Services COBRA group scopes its copy of this rule.
   Live's companion `@media (max-width: 991px) img.offset-photo { width: 100% }`
   is deliberately not transcribed: at 0,1,0 it loses to
   `.offset-container.medicare img.offset-photo { width: 95% }` on the live site
   too, so copying it under an id selector would apply a rule live never does. */
@media (max-width: 1200px) {
  #employer-hero img.offset-photo { max-height: 600px; }
}

/* Live keeps `.padding` at 5rem 0 for this section at every width; this file
   steps it down to 3rem at ≤926px. */
@media (max-width: 926px) {
  #employer-medicare.padding { padding: 5rem 0; }
}

/* Bullet lists — the same restoration the Services, Broker and Individual pages
   need: this file's later `.p-list .list-item::before` otherwise beats `.checks`
   and swaps the green check for the pink bullet, and its `ul, ol` reset strips
   the live 40px list indent. */
#employer-hero .p-list,
#employer-medicare .p-list {
  padding-left: 40px;
  margin-bottom: 1rem;
}
#employer-hero .p-list .list-item,
#employer-medicare .p-list .list-item {
  padding-left: 28px;
  font-size: 1rem;
}
#employer-hero .p-list.checks .list-item::before,
#employer-medicare .p-list.checks .list-item::before {
  width: 21px;
  height: 21px;
  top: 40%;
  background: url('/theme-assets/green-check.png') no-repeat center center;
  background-size: contain;
}

/* --- Extra Protection image group ------------------------------------ */
@media (max-width: 991px) {
  #extra .extra-protection-img-container { margin-bottom: 5rem; }
}
@media (max-width: 767px) {
  #extra .extra-protection-img-container { margin-bottom: 10rem; }
  #extra .floating-list.ep { top: 90%; }
  #extra img.ep-icon { bottom: -1%; right: -3%; width: 40%; }
}

/* --- Zoho form iframes ----------------------------------------------- */
/* The live site steps these fixed heights so the embedded form is never
   clipped as it reflows. */
#service-form-one,
#service-form-two { height: 635px; }
@media (max-width: 1421px) {
  #service-form-one,
  #service-form-two { height: 660px; }
}
@media (max-width: 581px) {
  #service-form-one,
  #service-form-two { height: 800px; }
}
@media (max-width: 557px) {
  #service-form-one,
  #service-form-two { height: 1200px; }
}

/* --- Section padding on small phones --------------------------------
   The live site keeps 5rem at every width; the generic ≤599px rule in this
   file drops it to 3rem. Opt the Services sections back out. */
@media (max-width: 599px) {
  #cobra.padding,
  #medicare.padding,
  #extra.padding,
  #ind .padding { padding: 5rem 0; }
}

/* Same opt-out for the Individual page's two `.padding` sections — the live
   site's `.padding` is a single top-level `5rem 0` with no responsive step
   down, while this file drops it to 3rem at ≤926px. */
@media (max-width: 926px) {
  #ind-cobra .padding,
  #ind-medicare.padding,
  #ind-medicare .padding { padding: 5rem 0; }
}


/* =====================================================================
   BROKER PAGE (views/broker.ejs)
   Corrections from BROKER_PIXEL_QA.md, matched against
   https://mycarepro.net/broker (theme app.css).

   Two kinds of rule live here:

   1. Classes the live theme applies globally but that NO other view in this
      repo uses (.brokers-split-img, img.broker-icon-list, h2.bolder,
      .negative-margin, .brokers-image-container, .broker-header-*). These are
      declared unscoped, exactly as the live theme declares them, because their
      blast radius is already nil — grep confirms views/broker.ejs is their only
      consumer.

   2. Overrides of rules that ARE shared (.grey-bg, .p-list.checks). These are
      scoped to #broker-hero / #broker-better / #broker-apart so the approved
      homepage and Services page keep the styling they have today, following the
      same pattern the Services block above uses.
   ===================================================================== */

/* --- Section background ----------------------------------------------
   The live theme redefines .grey-bg to #ebebeb (app.css:2426) after the earlier
   var(--grey) / #f3f5f9 declaration, so #ebebeb is what actually paints.
   Scoped to this page's section, as on the Services page. */
#broker-better.grey-bg { background: #ebebeb; }

/* --- Description checklist -------------------------------------------
   Live gives ul.p-list.checks a green check via .checks .list-item::before.
   This file declares .p-list .list-item::before later at equal specificity, so
   the pink list-bullet.png was winning. Restore the check for this page only.
   Live's own metrics: 21x21 check, 28px text indent, inherited 16px type, and
   the browser/Bootstrap ul indent that this file's `ul, ol` reset strips. */
#broker-better .p-list.checks .list-item::before {
  width: 21px;
  height: 21px;
  top: 40%;
  background: url('/theme-assets/green-check.png') no-repeat center center;
  background-size: contain;
}
#broker-better .p-list.checks.descriptions .list-item::before { top: 11px; }
#broker-better .p-list {
  padding-left: 40px;
  margin-bottom: 1rem;
  list-style: disc;
}
#broker-better .p-list .list-item {
  padding-left: 28px;
  font-size: 16px;
}

/* --- "What Sets Us Apart" icon list ---------------------------------- */
img.broker-icon-list {
  width: 50px;
}

/* --- Split photo column ----------------------------------------------
   A CSS background on the live site, not an <img>. */
.brokers-split-img {
  background: url('/theme-assets/brokers-05.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

/* --- "Let's Talk." weight -------------------------------------------- */
h2.bolder {
  font-weight: 800;
}

/* --- Responsive: live's own breakpoints for the broker sections ------
   app.css declares two @media (max-width: 1350px) blocks for .negative-margin
   and .brokers-image-container; the second wins, so only its values are kept
   here (-4rem / 90% / -1rem). */
@media (max-width: 1350px) {
  .negative-margin { margin-top: -4rem; }
  .brokers-image-container { max-width: 90%; margin-top: -1rem; }
}

@media (max-width: 991px) {
  .negative-margin { margin-top: 0rem; overflow-x: hidden; }
  .brokers-image-container { max-width: 90%; margin-top: 5rem; }
  .broker-header-container .broker-icon { display: none; }
  .broker-header-container img.circle { width: 80%; margin-left: auto; }
  .broker-header-container .floating-list { right: unset; left: 2%; top: 40%; }
  .broker-header-content { margin-top: 0rem; padding-bottom: 5rem; }
  .negative-margin .insights-container { border-radius: 1rem; }
  .brokers-split-img { height: 500px; }
}

@media (max-width: 767px) {
  .brokers-image-container { max-width: 100%; }
  .brokers-image-container img { max-width: 135%; height: auto; margin-left: -17.5%; }
}

/* --- Section padding on small phones --------------------------------
   The live site keeps .padding at 5rem 0 at every width; the generic ≤599px
   rule in this file drops it to 3rem. Two elements on this page carry .padding
   (the Insights sidebar column and the "What Sets Us Apart" text column), so
   the generic rule cost 128px of page height at 390px. Opt this page back out. */
@media (max-width: 599px) {
  #broker-better .padding,
  #broker-apart .padding { padding: 5rem 0; }
}

/* ===== INSURANCE SUPPORT FOR EMPLOYEES (the live "lp" landing template) =====
   Rules transcribed from the live theme's app.css. Everything here is either a
   class only views/insurance-support-for-employees.ejs uses, or scoped to this
   page's section ids. */

.green-gradient { background: linear-gradient(to right, #c0e7db 0%, white 100%); }

/* Hero photo group */
.about-header { position: relative; width: 100%; height: 100%; }
img.about-img { max-height: 700px; right: -25%; position: relative; }
span.about-text {
  position: absolute;
  top: 15%;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dark-blue);
  left: 20%;
  z-index: 3;
  line-height: 1.25;
}
.floating-list.green-border { border: 1px solid var(--green); }

@media (max-width: 1299px) {
  img.about-img { max-height: 650px; right: -20%; }
  span.about-text,
  .about-header .floating-list { left: 10%; }
}
@media (max-width: 1165px) {
  img.about-img { max-height: 600px; right: -15%; }
}
@media (max-width: 991px) {
  img.about-img { max-height: 500px; max-width: 100%; right: 0; }
  .about-header { text-align: center; margin-bottom: 3rem; }
  .about-header .floating-list { bottom: 20%; left: 5%; }
  span.about-text { left: 5%; text-align: left; top: 12%; }
}
@media (max-width: 875px) {
  span.about-text { left: unset; right: 0; text-align: left; top: 30%; }
  /* Live hides it via the `page-template-lp-template` body class; this page's
     hero id is the equivalent hook here. */
  #isfe-hero span.about-text,
  #cobra-exp-hero span.about-text { display: none; }
  .about-header .floating-list { bottom: 5%; left: 0%; }
}

/* Landing-page content blocks */
h2 span.lg { font-size: clamp(32px, 18px + 1.33vw, 48px); }
.lead.lp-sub { font-size: clamp(16px, 9px + 0.85vw, 28px); line-height: 1.25; font-weight: 500; }
img.broker-icon-list { width: 50px; }
.lp-image-container { position: relative; margin-bottom: 10%; }
.lp-image-container img.icon { position: absolute; bottom: -10%; width: 150px; left: 2%; }
.card.hp-form-container.lp {
  margin-left: calc(-1.5rem - 15px);
  padding-left: calc(1.5rem + 15px);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.insights-container.image { height: 100%; }
@media (max-width: 991px) {
  .insights-container.image { height: 500px; }
}

/* The live theme's height ladder for the shared contact form iframe. */
#mycarepro-form { height: 635px; }
@media (max-width: 1577px) { #mycarepro-form { height: 660px; } }
@media (max-width: 880px)  { #mycarepro-form { height: 790px; } }
@media (max-width: 844px)  { #mycarepro-form { height: 1200px; } }

/* `.lp-content` lists get the green check; the plain `<ul>` in the "What
   happens next" section keeps the browser's default disc bullets, which this
   file's `ul, ol { margin: 0; padding: 0; list-style: none }` reset would
   otherwise strip. The live theme has no such reset. */
.lp-content ul li {
  position: relative;
  padding-left: 28px;
  display: block;
  margin-bottom: 10px;
}
.lp-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  background: url('/theme-assets/green-check.png') no-repeat center center;
  background-size: contain;
}
#isfe-next ul {
  list-style: disc;
  margin: 0 0 1rem;
  padding-left: 40px;
}
#isfe-next ul li { display: list-item; }

/* Live keeps `.padding` at 5rem 0 at every width. */
@media (max-width: 926px) {
  #isfe-next.padding,
  #cobra-exp-employer.padding,
  #row-2.padding,
  #ind .padding { padding: 5rem 0; }
}

/* Live's `.services-header-list .list-item` is padding-left 28px / padding-bottom
   7px with no bottom margin; this file's shared `.checks .list-item` adds a 10px
   margin and a 32px indent, which made the hero checklist 50px too tall. Same
   opt-out the Services hero already has. */
#isfe-hero .services-header-list .list-item,
#cobra-exp-hero .services-header-list .list-item {
  padding-left: 28px;
  margin-bottom: 0;
}
/* The live theme has no global `img { max-width: 100% }`, so above 991px this
   photo honours its `max-height` and overflows its column. This file's global
   rule instead clamps it to the column width, shrinking it to 550px square.
   Only above 991px: the live `@media (max-width: 991px)` rule re-imposes
   `max-width: 100%` itself, so the override has to stop there. */
@media (min-width: 992px) {
  #isfe-hero img.about-img,
  #cobra-exp-hero img.about-img { max-width: none; }
}

/* The new /cobra-experience #row-2 carries an 8-item bullet list. This file's global
   `ul, ol { margin: 0; padding: 0; list-style: none }` reset strips the markers and
   indent; the live theme has no such reset. Reached through the sibling combinator so
   the Insurance Support page's own `#row-2`, which holds an iframe rather than a list,
   is not touched. */
#cobra-exp-employer ~ #row-2 ul {
  list-style: disc;
  margin: 0 0 1rem;
  padding-left: 40px;
}
#cobra-exp-employer ~ #row-2 ul li { display: list-item; }

/* Live has no custom `h3` size/family rule — headings fall through to
   Bootstrap's `1.75rem / 500` — and `.grey-bg h3` only swaps the family to
   Vintage. This file declares its own global h3 (Montserrat 700, clamped to
   18–26px), which rendered this heading 18px/700 Montserrat against live's
   28px/500 Vintage and cost 58px of height at 390px. Scoped to this section
   rather than changing the global rule, which three approved pages rely on. */
#row-2 h3 {
  font-family: 'Vintage', Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Live redefines `.grey-bg` to #ebebeb later in app.css, so #ebebeb is what
   actually paints — the same override the Services sections already carry. */
#row-2.grey-bg { background: #ebebeb; }

/* ===== ABOUT PAGE ===== */
/* Scroll parallax band between the hero and "Where you'll find us". */
.parallax {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 600;
  overflow: hidden;
}
.parallax img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 120%;
  height: auto;
  will-change: transform;
}
@media (max-width: 991px) {
  .parallax { height: 400px; }
  .parallax img { transform: translate(0, 0); width: 120%; }
}
@media (max-width: 500px) {
  .parallax { height: 300px; }
}

/* Team cards: the "personality" photo cross-fades in over the default one. */
.team-photo-container { position: relative; margin-bottom: 1.5rem; }
img.default-photo { width: 100%; background: #e5e5e5; border-radius: 5%; }
img.hover-photo {
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 0;
  left: 0;
  background: #e3e3e3;
  border-radius: 5%;
  opacity: 0;
  visibility: hidden;
}
.team-photo-container:hover,
.team-photo-container:focus,
.team-photo-container:active {
  transform: scale(1.05) rotate(-2deg);
}
.team-photo-container:hover img.hover-photo,
.team-photo-container:focus img.hover-photo,
.team-photo-container:active img.hover-photo {
  visibility: visible;
  opacity: 1;
  transition-property: all;
  transition-duration: 300ms;
}
span.title {
  font-family: "Montserrat", sans-serif;
  display: block;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--dark-blue);
}

/* Same three opt-outs this repo's own rules need on the other ported pages. */
#about-hero .services-header-list .list-item {
  padding-left: 28px;
  margin-bottom: 0;
}
@media (min-width: 992px) {
  #about-hero img.about-img { max-width: none; }
}
/* No hide rule for `#about-hero span.about-text` here, deliberately.
   Live's only rule that hides that caption is

     @media (max-width: 875px) { .page-template-lp-template span.about-text { display: none; } }

   and `page-template-lp-template` is the body class WordPress puts on the
   landing-page template — which the About page does not use. Live therefore
   renders "We turn 'what the heck?' into 'I got this.'" at every width,
   repositioned by the ≤875px `right: 0; top: 30%` rule but never hidden. This
   file previously applied the hide to `#about-hero` as well as to `#isfe-hero`
   (the page that really is the LP template), which dropped the caption on the
   About hero at every mobile width. Because the caption is absolutely
   positioned it contributes no layout height, so page and section heights still
   matched live and the loss only showed up as 44 characters of missing rendered
   text. */
#about-where.grey-bg { background: #ebebeb; }
@media (max-width: 926px) {
  #about-where.padding,
  #about-team.padding { padding: 5rem 0; }
}

/* ===== CONTACT PAGE ===== */
.insight-padding { padding: 50px 0 30px; }
img.contact-logo { max-width: 250px; width: 100%; }
/* Live's `.h2-fix` swaps the Insights panel's Vintage pink heading for the plain
   Montserrat one the contact form needs. */
.insights-container.h2-fix h2 {
  font-family: 'Montserrat', sans-serif;
  color: #212529;
  font-size: 1.75rem;
  margin-bottom: 8px;
}
/* Live's height ladder for the embedded Zoho contact form on this page. */
#contact-form { height: 635px; }
@media (max-width: 1163px) { #contact-form { height: 700px; } }
@media (max-width: 991px)  { #contact-form { height: 1100px; } }
@media (max-width: 767px)  { #contact-form { height: 800px; } }
@media (max-width: 555px)  { #contact-form { height: 1200px; } }
/* Live keeps `.padding` at 5rem 0 at every width. */
@media (max-width: 926px) {
  #contact-main.padding { padding: 5rem 0; }
}

/* ===== INSIGHTS INDEX ===== */
/* Card excerpts clamp to two lines on the live site. */
.excerpt p {
  font-size: clamp(14px, 7px + 0.88vw, 18px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
img.card-img-top {
  object-fit: cover;
  aspect-ratio: 16 / 9;
  object-position: center;
  border-radius: 1rem 1rem 0 0;
}
li.post-list-item { padding: 0.5rem; border-bottom: 1px solid var(--green); }
li.post-list-item:last-child { border-bottom: none; }
.sidebar a.black-font { color: #333 !important; }
/* WordPress's visually-hidden helper — live keeps the Archives label off-screen
   for screen readers; without it the label renders and adds ~32px. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Live keeps `.padding` at 5rem 0 at every width. */
@media (max-width: 926px) {
  #insights-main.padding { padding: 5rem 0; }
}
/* The Categories list keeps the browser's default disc bullets and 40px indent
   on the live site; this file's `ul, ol` reset strips both. */
.categories-list {
  list-style: disc;
  padding-left: 40px;
  margin-bottom: 1rem;
}

/* ===== INSIGHTS SINGLE POST ===== */
.related-posts .card.segment h3 { font-size: 1.75rem; }
/* Live's related-post thumbnails use Bootstrap 5's ratio/object-fit helpers.
   This build loads Bootstrap 4.6, which has neither, so define the two the
   markup uses. */
.ratio { position: relative; width: 100%; display: block; }
.ratio::before { content: ""; display: block; padding-top: var(--ratio, 56.25%); }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-16x9 { --ratio: 56.25%; }
.object-fit-cover { object-fit: cover; }
/* The post title renders at Bootstrap's h1 scale on the live site, not the
   theme's larger clamp — the banner h1 above it keeps the theme size. Values
   fitted to the live page at 1440 / 1200 / 1024 / 768 / 390 (40 / 36 / 32.48 /
   27.36 / 26px) and verified exact at all five. */
#post-main .col-md-8 > h1 { font-size: clamp(26px, 12px + 2vw, 40px); }

/* Live's Related Posts row sits in a Bootstrap `.container`; this file replaces
   `.container` with a 1200px-wide rule of its own, which made the row 60px too
   wide. Restore Bootstrap 4.6's own breakpoints for this section only — the
   only other view using `.container` is the Privacy page. */
.related-posts .container { max-width: 100%; padding-right: 15px; padding-left: 15px; }
@media (min-width: 576px)  { .related-posts .container { max-width: 540px; } }
@media (min-width: 768px)  { .related-posts .container { max-width: 720px; } }
@media (min-width: 992px)  { .related-posts .container { max-width: 960px; } }
@media (min-width: 1200px) { .related-posts .container { max-width: 1140px; } }

/* Live's responsive steps for the call-out illustration. */
@media (max-width: 1410px) { img.insight-img { height: 110%; left: -10%; } }
@media (max-width: 1280px) { img.insight-img { position: absolute; height: 100%; top: 3%; left: -10%; } }
@media (max-width: 991px)  { img.insight-img { position: absolute; height: 80%; top: 5%; left: -12%; } }
@media (max-width: 767px)  { img.insight-img { display: none; } }
/* Live keeps `.padding` at 5rem 0 at every width. */
@media (max-width: 926px) {
  #post-main.padding,
  .related-posts.padding,
  .insight-callout.padding,
  /* The call-out also has an inner `.row.padding` holding the three segment
     cards. The three section-level selectors above do not reach it, so it was
     still stepping down to 3rem and the call-out ran 32px short at ≤926px. */
  #post-main ~ .insight-callout .row.padding { padding: 5rem 0; }
}

/* Article-page h2s outside the article body.
   WordPress puts `single-post` on <body> for these pages, and the live theme
   uses it to restyle every h2 on the page:

     .single-post h2 { font-size: clamp(20px, 8px + 1vw, 30px) !important;
                       color: var(--dark-blue) !important; line-height: 1.6; }

   Only the in-article copy of that was transcribed (see
   `#post-main .insight-content h2` below). The page's four other h2s — the three
   sidebar headings, the call-out heading and "Related Posts" — kept this file's
   much larger theme clamp, so at 390px they rendered 32px/28px against live's
   20px. On the call-out that pushed the heading from one line to two and made
   the section 41px taller. "Related Posts" was also still pink, where live's
   `!important` colour forces it to the dark blue.

   The upper bound is live's own 30px rather than the 22.4px the in-article rule
   settled on: 22.4px is what live computes at exactly 1440px, but the clamp
   keeps growing to 30px above that, and these headings are compared at wider
   widths too.

   Scoping, since none of these three regions is unique to this page on its own:
   `#post-main` covers the sidebar; `.related-posts` appears in no other view;
   `.insight-callout` is shared with the homepage, so it is reached through the
   `#post-main ~` sibling combinator, which exists only on an article page. That
   keeps the homepage — an approved baseline — untouched without editing any
   markup. */
#post-main h2,
#post-main ~ .insight-callout h2,
.related-posts h2 {
  font-size: clamp(20px, 8px + 1vw, 30px);
  line-height: 1.6;
  color: var(--dark-blue);
}

/* ===== TEAM MEMBER BIO PAGES ===== */
/* Live keeps `.padding` at 5rem 0 at every width; this file steps the shared class down
   to 3rem below 600px, which left the bio section 64px short at 375/390/430. Same
   override the other ported pages carry. Only the three portrait mobile widths were
   affected — the step-down is scoped to `@media (max-width: 599px)`, so 844 landscape
   and both desktop widths already matched. */
@media (max-width: 926px) {
  #team-member-main.padding { padding: 5rem 0; }
}

/* ===== PRIVACY POLICY / TERMS ===== */
/* The policy body is migrated WordPress HTML: numbered sections as <ol> and
   bulleted lists as <ul>. The live theme has no list reset, so both keep the
   browser's markers and 40px indent; this file's `ul, ol { margin: 0; padding:
   0; list-style: none }` strips them. */
#privacy-main ol { list-style: decimal; margin: 0 0 1rem; padding-left: 40px; }
#privacy-main ul { list-style: disc;    margin: 0 0 1rem; padding-left: 40px; }
#privacy-main li { display: list-item; }
/* Live keeps `.padding` at 5rem 0 at every width. */
@media (max-width: 926px) {
  #privacy-main.padding { padding: 5rem 0; }
}

/* --- Restored article bodies -----------------------------------------
   With the real HTML structure back in posts.content (see
   scripts/restore-post-content.js), the article body's own element styles
   matter. Two things differ from this repo's defaults, both measured off the
   live articles rather than derived:

   - h1 and h2 inside the body follow Bootstrap's heading scale, not the
     theme's larger clamp — the same split the post title itself has. Fitted to
     live at 1440/1200/1024/900/768/600/500/390 and exact at every one.
   - This file's `ul, ol { margin: 0; padding: 0; list-style: none }` reset
     strips the markers and indent from lists inside articles; the live theme
     has no such reset.

   Scoped to the post page so the Insights promo cards, which reuse
   `.insight-content`, keep their own styles. */
#post-main .insight-content h1 { font-size: clamp(26px, 12px + 2vw, 40px); line-height: 1.2; }
#post-main .insight-content h2 {
  font-size: clamp(20px, 8px + 1vw, 22.4px);
  line-height: 1.6;
  /* Live renders in-article h2 in the dark blue, not the theme's pink. */
  color: var(--dark-blue);
}
#post-main .insight-content ul { list-style: disc; padding-left: 40px; margin: 0 0 1rem; }
#post-main .insight-content ol { list-style: decimal; padding-left: 40px; margin: 0 0 1rem; }
#post-main .insight-content li { display: list-item; }
/* WordPress image alignment classes, which the restored article bodies carry.
   `.alignleft` values are measured off the live article that uses it
   (from-cobra-to-cost-effective-coverage…); `.alignnone` needs no rule, since
   live renders it inline with no margins, exactly as this build already does.
   `.alignright` / `.aligncenter` are the standard mirrors — no live article
   currently uses them, so they are unverified but keep a future admin-authored
   post from rendering wrong. */
#post-main .insight-content .alignleft {
  float: left;
  display: block;
  margin: 4px 16px 16px 0;
}
#post-main .insight-content .alignright {
  float: right;
  display: block;
  margin: 4px 0 16px 16px;
}
#post-main .insight-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}