/* ==========================================================================
   Young's Insurance — shared stylesheet
   ========================================================================== */

:root {
  --brand: #45ba8d;
  --dark-accent: #140d74;
  --dark-shade: #3c3e63;
  --body-text: #5a5c82;
  --light-shade: #fff;
  --light-accent: #f5f5f5;
  --page-bg: #ffffff;
  --input-bg: #f7f8fa;
  --dark-section: #222333;
  --footer-bg: #1d1e2f;
  --link: #187dee;
  --container: 1200px;
  /* logo height + header-inner vertical padding — keeps the mobile nav panel
     anchored under the header when the logo size changes */
  --header-h: 128px;
}
@media (max-width: 600px) { :root { --header-h: 100px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  color: var(--body-text);
  background: var(--page-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Roboto', sans-serif;
  color: var(--dark-shade);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

/* Live type scale: h1 60px, h2 48px, h3 26px */
h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.625rem; }
/* Subheads that follow body copy inside a section need room above them */
section > .container > h3:not(:first-child) { margin-top: 36px; }
.section-cta-photo > .container > h3 { margin-top: 0; }
/* Section-title variant used for the short centred headings */
h2.section-title { font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 900; }
h2.h2-xl { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }

p { margin: 0 0 16px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

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

section { padding: 80px 0; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
@media (max-width: 768px) { section { padding: 48px 0; } }

.section-alt { background: var(--light-accent); }

/* Deep charcoal-navy band ("Real Coverage. Real People. No Pressure.") */
.section-dark { background: var(--dark-section); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p, .section-dark li { color: #fff; }

/* Brand navy band ("Get Personalized Insurance Solutions") */
.section-navy { background: var(--dark-shade); color: #fff; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy p, .section-navy li { color: #fff; }

/* CTA bands are left-aligned with 19px/500 body copy on the live site */
.section-navy > .container > p,
.section-cta-photo > .container > p { font-size: 1.1875rem; font-weight: 500; max-width: 1170px; }
.section-navy .btn, .section-cta-photo .btn { margin-top: 18px; }

/* Explainer variant of the navy band ("What is Medicare Advantage?") —
   full container width with normal 16px body copy, per the live site */
.section-navy.section-explainer > .container > p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  max-width: none;
  margin-bottom: 20px;
}
.section-navy.section-explainer > .container > h2 { margin-bottom: 24px; }

/* Badges and check marks need to invert on the dark bands */
.section-dark .feature-row::before,
.section-navy .feature-row::before,
.section-cta-photo .feature-row::before {
  background: #fff;
  color: var(--dark-shade);
}
.section-dark .check-list li::before,
.section-navy .check-list li::before,
.section-cta-photo .check-list li::before { color: #fff; }
.section-dark .icon-circle,
.section-navy .icon-circle { background: rgba(255,255,255,0.14); }

.center { text-align: center; }
.lead { font-size: 1.1875rem; font-weight: 500; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 0;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--dark-accent);
  border-color: var(--dark-accent);
}
.btn-outline {
  background: transparent;
  color: var(--dark-shade);
  border-color: var(--dark-shade);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--dark-shade);
  color: #fff;
}
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-outline-light:hover, .btn-outline-light:focus-visible {
  background: #fff;
  color: var(--dark-shade);
}
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* ---------------- Header / Nav ---------------- */
.site-header {
  background: #3c3e63;
  position: static;
  box-shadow: none;
}
.header-inner {
  display: flex;
  align-items: center;
  padding: 20px 32px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
}
.logo-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-fallback {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
}
.logo-fallback span { color: var(--brand); }
/* Youngs-Logo.png is a square, transparent-background crop of the roundel,
   so it needs no cropping or backing plate. */
.logo-link img {
  height: 88px;
  width: 88px;
  object-fit: contain;
  padding: 0;
}
@media (max-width: 600px) {
  .logo-link img { height: 60px; width: 60px; }
  .header-inner { padding: 20px 20px; }
}

.main-nav { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; gap: 6px; }
.main-nav > ul > li { position: relative; }
.main-nav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
  padding: 12px 14px;
  display: inline-block;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--brand); text-decoration: none; }
.dropdown li a { color: var(--dark-shade); font-weight: 400; }
.dropdown li a:hover { color: var(--brand); }

.has-dropdown > a::after { content: " \25BE"; font-size: 0.75em; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 240px;
  box-shadow: 0 8px 24px rgba(60,62,99,0.18);
  padding: 8px 0;
  list-style: none;
  margin: 0;
  z-index: 1001;
}
.dropdown li a { display: block; padding: 10px 20px; font-weight: 400; white-space: nowrap; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  display: block;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: none;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    padding: 12px 0 40px;
    justify-content: flex-start;
  }
  .main-nav.open { display: flex; z-index: 1000; }
  /* Later positioned sections (the hero) would otherwise paint over the
     fixed panel. Pinning the header while open keeps the panel anchored
     under it at any scroll position and keeps the close button reachable. */
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { position: sticky; top: 0; z-index: 1000; }
  .main-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .main-nav > ul { padding: 0 12px; }
  .main-nav a { padding: 14px 12px; width: 100%; }
  .dropdown {
    display: none;
    position: static;
    box-shadow: none;
    min-width: 0;
    padding-left: 12px;
    background: var(--light-accent);
  }
  .has-dropdown.open .dropdown { display: block; }
  .has-dropdown > a::after { float: right; }
  .main-nav a { color: var(--dark-shade); }
  .header-inner { justify-content: space-between; flex-wrap: wrap; }
}

/* ---------------- Hero (photo, full-bleed) ---------------- */
.hero-photo {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 0;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(60, 62, 99, 0.89);
}
.hero-photo > .container { position: relative; z-index: 1; }
.hero-photo h1, .hero-photo p, .hero-photo .eyebrow { color: #fff; }
.hero-photo .eyebrow { color: #7ee0bd; }
.hero-photo-home { min-height: 620px; background-position: center 25%; }
.hero-photo-sub { min-height: 400px; }
/* Sub-page heroes use a charcoal wash on the live site, not the navy one. */
.hero-photo-sub::before { background: rgba(34, 35, 51, 0.77); }
@media (max-width: 600px) {
  .hero-photo-home { min-height: 480px; }
  .hero-photo-sub { min-height: 320px; }
  .hero-photo h1 { font-size: 2.1rem; }
}

/* Hero split (location pages: copy left, floating white contact card right) */
.hero-split { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hero-split-copy { flex: 1 1 440px; }
.hero-split-copy p a { color: #fff; text-decoration: underline; }
.hero-split-card { flex: 1 1 380px; min-width: 300px; }
.contact-form-card {
  background: rgba(255, 255, 255, 0.9);
  color: var(--body-text);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(20,13,116,0.35);
}
.contact-form-card h2 { color: var(--dark-shade); }
/* form_embed.js sizes the LeadConnector iframe from a height the form reports
   before its fields settle, which on phones overshoots by 300px+ and leaves a
   blank block under the Submit button. The script writes that height inline,
   so a stylesheet rule on the iframe cannot beat it. Instead .lc-form-clip
   caps the visible height at what the form measures at that width (about
   1040px at 260px wide down to 880px at 400px) plus a 16px buffer, and clips
   the empty remainder. Remeasure if fields are added in LeadConnector. */
@media (max-width: 600px) {
  .contact-form-card { padding: 24px 20px; }
  .lc-form-clip {
    max-height: max(900px, calc(1578px - 150vw));
    overflow: hidden;
  }
}

/* ---------------- Washed-photo section (Peace of Mind) ----------------
   Photo behind a rgba(245,245,245,0.82) wash; copy sits left, not centred. */
.section-washed {
  position: relative;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-washed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 245, 0.82);
}
.section-washed > .container { position: relative; z-index: 1; }
.section-washed h2, .section-washed h3 { color: var(--dark-shade); }
.section-washed p { color: var(--dark-accent); font-size: 1.1875rem; font-weight: 500; }
.washed-copy { max-width: 770px; text-align: left; }

/* ---------------- Dark photo CTA band (Get Personalized Insurance Solutions) ---------------- */
.section-cta-photo {
  position: relative;
  padding: 84px 0;
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  color: #d8d9ec;
}
@media (max-width: 768px) { .section-cta-photo { padding: 56px 0; } }
.section-cta-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(60, 62, 99, 0.78);
}
/* Live site centers the whole CTA block over a clearly visible photo */
.section-cta-photo > .container { position: relative; z-index: 1; text-align: center; }
.section-cta-photo h1,
.section-cta-photo h2,
.section-cta-photo h3 { color: #fff; margin-left: auto; margin-right: auto; max-width: 1000px; }
.section-cta-photo p { color: #e6e7f5; }
.section-cta-photo > .container > p { margin-left: auto; margin-right: auto; }
.section-cta-photo .eyebrow { color: #7ee0bd; }
.section-cta-photo .btn { margin-top: 32px; }

/* CMS-required Medicare disclaimer inside the CTA bands */
.section-cta-photo > .container > p.cta-disclaimer {
  margin-top: 36px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  color: #d8d9ec;
  max-width: 1080px;
}

/* ---------------- Two-column split (image + copy) ---------------- */
.split { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.split-reverse { flex-direction: row-reverse; }
.split-media { flex: 1 1 420px; min-width: 280px; }
.split-media img { border-radius: 12px; width: 100%; }
.split-copy { flex: 1 1 420px; min-width: 280px; text-align: left; }

/* Thin brand-green banner strip */
.banner-strip { background: var(--brand); padding: 34px 0; }
.banner-strip h2 {
  color: #fff;
  margin: 0;
  text-align: left;
  font-size: clamp(1.6rem, 3vw, 2.375rem);
  font-weight: 900;
}

/* ---------------- Grids / Cards ---------------- */
.grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
}

.card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 6px 24px rgba(60,62,99,0.08);
}
.card h3 { margin-bottom: 10px; }
.card ul { margin: 0; padding-left: 20px; }
.card ul li { margin-bottom: 8px; }
.card a { color: var(--dark-shade); font-weight: 500; }

.services-col h3 {
  font-family: 'Roboto', sans-serif;
  color: var(--dark-shade);
  font-size: 1.625rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 18px;
}
.services-col ul { list-style: none; margin: 0; padding: 0; }
.services-col li { margin-bottom: 14px; position: relative; padding-left: 32px; min-height: 20px; }
/* Solid circle-check badge (matches the live "Our Insurance Services" list) */
.services-col li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--dark-shade);
}
.services-col li::after {
  content: "";
  position: absolute; left: 5.5px; top: 9px;
  width: 9px; height: 5px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
.services-col a, .services-col span { color: var(--dark-accent); font-weight: 400; }
.services-col a:hover { text-decoration: underline; }

/* Feature rows (subpage "Key Benefits") — square icon badge, no card shadow */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 40px; }
@media (max-width: 800px) { .feature-list { grid-template-columns: 1fr; } }
.feature-row { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; }
.feature-row::before {
  content: "\2713";
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--dark-shade);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.feature-row h3 { margin-bottom: 6px; font-size: 1.15rem; }
.feature-row p { margin: 0; }

/* Soft badge variant (live "Key Benefits" / "Key Features" lists) — a pale
   round badge holding a small navy check tile */
.feature-list-soft .feature-row { position: relative; gap: 16px; }
.feature-list-soft .feature-row::before {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--light-accent);
  color: transparent;
  margin-top: 0;
}
.feature-list-soft .feature-row::after {
  content: "\2713";
  position: absolute;
  left: 7px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--dark-shade);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* With body copy the badge aligns to the heading; title-only rows centre it */
.feature-list-soft .feature-row::after { top: 25px; }
.feature-list-soft .feature-row h3 { font-size: 1.15rem; margin-bottom: 4px; }

/* Title-only rows — badge centred, larger heading, tighter rows */
.feature-list-titles { gap: 4px 40px; }
.feature-list-titles .feature-row { align-items: center; padding: 12px 0; }
.feature-list-titles .feature-row::after { top: 50%; transform: translateY(-50%); }
.feature-list-titles .feature-row h3 { margin: 0; font-size: 1.375rem; }

/* Dark eyebrow used where the kicker sits on a white band above a heading */
.eyebrow-dark { color: var(--dark-shade); }

/* icon circle */
.icon-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(69,186,141,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.icon-circle svg { width: 30px; height: 30px; }

/* ---------------- Steps ---------------- */
.steps { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  text-align: center;
  padding: 40px 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(60,62,99,0.1);
}
.step-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--light-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.step-icon img, .step-icon svg { width: 34px; height: 34px; }
.step-icon svg { color: var(--brand); }
.step-divider { width: 30px; height: 3px; background: var(--dark-shade); margin: 10px auto 16px; }

/* ---------------- Testimonials (brand-green section) ---------------- */
.section-green { background: var(--brand); color: #fff; }
.section-green h1, .section-green h2, .section-green h3 { color: #fff; }
.section-green p, .section-green li { color: #fff; }
.testimonials-row { display: flex; gap: 20px; align-items: stretch; }
.testimonials-row .arrow-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  align-self: center;
  cursor: default;
}
.testimonial-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; flex: 1; }
@media (max-width: 700px) { .testimonial-cards { grid-template-columns: 1fr; } .testimonials-row { flex-wrap: wrap; } }
.testimonial-card {
  background: rgba(20,13,116,0.18);
  border-radius: 14px;
  padding: 28px;
}
.avatar {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.avatar img { width: 54px; height: 54px; object-fit: contain; }
.testimonial-card p { color: #fff; }
.testimonial-card cite { display: block; margin-bottom: 10px; font-style: normal; font-weight: 700; font-size: 1.625rem; color: #fff; }

/* ---------------- Badges / checklist ---------------- */
.badge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.badge-list li {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(60,62,99,0.06);
}
.badge-list li::before {
  content: "\2713";
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { padding-left: 28px; position: relative; margin-bottom: 10px; }
.check-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700;
}
.check-list-white li { color: #fff; font-weight: 400; }
.check-list-white li::before { color: #fff; }
/* Indigo bold checklist used on the Peace of Mind band */
.check-list-navy li { color: var(--dark-accent); font-weight: 700; font-size: 1.3125rem; margin-bottom: 4px; }
.check-list-navy li::before { color: var(--dark-accent); }

/* Plain square-marker list — matches the live "Comprehensive Support" service list */
.bullet-list {
  list-style: square;
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--dark-accent);
}
.bullet-list li { margin-bottom: 8px; line-height: 1.7; }
.bullet-list li::marker { color: #9a9cb5; }

/* Bold bullet list — matches the "● " list in the live Cost of Doing Nothing block */
.dot-list { list-style: none; margin: 0 0 20px; padding: 0; }
.dot-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--dark-shade);
}
.dot-list li::before {
  content: "\25CF";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.7em;
  line-height: 2.1;
}

/* ---------------- FAQ (two-column, no card backgrounds) ---------------- */
.cost-faq-split { display: flex; gap: 60px; align-items: flex-start; flex-wrap: wrap; }
.cost-faq-col { flex: 1 1 400px; min-width: 280px; text-align: left; }
.cost-faq-col > p { color: var(--dark-shade); }
.faq-item {
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #e3e4ee;
  margin-bottom: 0;
  overflow: visible;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.3125rem;
  color: var(--dark-shade);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-question::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: #b0b2c4;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding: 0;
}
.faq-item.open .faq-answer { max-height: 400px; padding-bottom: 20px; }

/* ---------------- Locations grid (real photo cards, no shadow) ---------------- */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 960px) { .locations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .locations-grid { grid-template-columns: repeat(2, 1fr); } }
.location-card { display: block; text-align: center; text-decoration: none !important; }
.location-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}
.location-card h3 { color: var(--dark-shade); font-size: 1.05rem; margin: 0; }

/* ---------------- Contact form ---------------- */
.contact-form { background: #fff; border-radius: 14px; padding: 36px; box-shadow: 0 6px 24px rgba(60,62,99,0.08); }
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-weight: 700; color: var(--dark-shade); font-size: 0.9rem; }
.form-row input, .form-row select, .form-row textarea {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid #dcdde8;
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--dark-shade);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-status { margin-top: 12px; font-weight: 500; }

.contact-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact-info-grid { grid-template-columns: 1fr; } }
.contact-info-list { list-style: none; margin: 0; padding: 0; }
.contact-info-list li { margin-bottom: 16px; padding-left: 0; }
.contact-info-list strong { display: block; color: var(--dark-shade); }

/* Location pages: dark "Contact Us." band with an inset panel
   (live: #222333 band wrapping a #292a39 panel) */
.contact-panel {
  background: #292a39;
  border-radius: 14px;
  padding: 40px;
}
@media (max-width: 600px) { .contact-panel { padding: 24px; } }
.contact-panel h2 { color: #fff; }
.contact-panel .contact-info-list li,
.contact-panel .contact-info-list strong,
.contact-panel a { color: #fff; }
.map-embed { border: none; width: 100%; height: 450px; border-radius: 12px; }

/* Location pages: two-column contact block — info card beside the map */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: stretch;
}
.contact-split .contact-card {
  background: #292a39;
  border-radius: 14px;
  padding: 48px 40px;
}
.contact-split .contact-card h2 { color: #fff; margin: 0 0 34px; }
.contact-split .map-embed {
  height: 100%;
  min-height: 420px;
  border-radius: 14px;
  align-self: stretch;
}
@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; gap: 28px; }
  .contact-split .map-embed { height: 340px; min-height: 0; }
}
@media (max-width: 600px) { .contact-split .contact-card { padding: 32px 24px; } }

/* Icon rows inside the contact card */
.contact-info-icons { display: grid; gap: 26px; list-style: none; margin: 0; padding: 0; }
.contact-info-icons li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.contact-info-icons .contact-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(69, 186, 141, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-icons .contact-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-info-icons .contact-text { min-width: 0; }
.contact-info-icons strong {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: 3px;
}
.contact-info-icons .contact-value,
.contact-info-icons .contact-value a { color: rgba(255, 255, 255, 0.72); }
.contact-info-icons .contact-value a:hover { color: #fff; }

/* ---------------- Notice / disclaimer boxes ---------------- */
.notice-box {
  background: #fff8e1;
  border: 1px solid #f0d98c;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 32px;
  color: #6b5900;
}
.compliance-band { background: var(--dark-shade); padding: 40px 0; }
.compliance-note {
  font-size: 1.0625rem;
  color: #fff;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
}

/* Legal page title — the live site runs these straight onto white, no band */
.legal-hero { background: #fff; padding: 80px 0 0; }
.legal-hero h1 { color: var(--dark-shade); margin: 0; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--footer-bg); color: #fff; padding: 64px 0 20px; }
.footer-top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand p { color: #fff; max-width: 240px; font-size: 1.0625rem; }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer-logo img {
  height: 104px;
  width: 104px;
  object-fit: contain;
  padding: 0;
}
.footer-social {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--brand);
  color: #fff;
  margin-top: 10px;
}
.footer-social::before {
  content: "f";
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}
.footer-social:hover { background: #fff; color: var(--footer-bg); text-decoration: none; }
.footer-col h4 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: #b6b4cd; font-size: 0.9375rem; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 48px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #b6b4cd;
}
.footer-bottom a { color: #fff; }
.footer-credit a { font-weight: 700; margin-left: 6px; }
.footer-legal-links { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-legal-links a { font-weight: 700; }
.footer-rights { margin-left: auto; }
@media (max-width: 760px) {
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-rights { margin-left: 0; }
}

/* screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* legal page content */
.legal-content h2 { margin-top: 36px; }
.legal-content p { max-width: 900px; }
.legal-updated { color: var(--brand); font-weight: 700; margin-bottom: 24px; }