/* Fox Run Eye Care: shared header and footer styles. Colors only via tokens. */

/* ─── Minimal reset ─────────────────────────────────────── */
body { margin: 0; font-family: var(--font-body); }
a { color: var(--teal); }

/* Blog pages keep their Times serif body (Maida, Oct 29). The blog wrappers
   already define --font-blog in blog-post.css; we pin font-family here so
   descendants don't fall through to the new Poppins body default. */
.bp, .bl-hed, .bl-grid-section, .bl-side { font-family: var(--font-blog); }

/* Headings outside the blog default to the serif display font so a plain h1–h4
   with no page-level font rule doesn't flatten into Poppins. Class-based rules
   (e.g. .om-hero h1 → --font-product) have higher specificity and still win. */
h1, h2, h3, h4 { font-family: var(--font-display); }
.bp :where(h1, h2, h3, h4),
.bl-hed :where(h1, h2, h3, h4),
.bl-grid-section :where(h1, h2, h3, h4) {
  font-family: var(--font-blog);
}

/* Section-level text is left-aligned site-wide (Maida, Oct 30). */
.sec-block--center li {
  text-align: left;
}
.sec-block--center p:not(.eyebrow) {
  text-align: left;
}
/* One page H1 size site-wide (homepage and blog excluded); a question heading directly under the H1 is smaller. */
body:not(:has(.hero-luxe, .bp, .bl-hed)) h1 {
  font-size: var(--fs-page-h1);
  line-height: var(--lh-tight);
}
body:not(:has(.hero-luxe, .bp, .bl-hed)) h1 + h2 {
  font-size: 1.75rem;
  line-height: var(--lh-tight);
}

/* ─── Scroll offset for sticky main bar ────────────────── */
html {
  scroll-padding-top: 93px;
}

/* ─── Skip link ─────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--teal-dark);
  color: var(--white);
  padding: 8px 16px;
  z-index: 9999;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* ─── Shared button base ────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  border-radius: var(--radius-btn);
  padding: 10px 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
}
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--teal-hover);
  }
}

.btn-cyan {
  background: var(--cyan);
  color: var(--ink);
}
@media (hover: hover) {
  .btn-cyan:hover {
    background: var(--cyan-hover);
  }
}

.btn-white {
  background: var(--white);
  color: var(--teal-dark);
}
@media (hover: hover) {
  .btn-white:hover {
    background: var(--bg-pale);
  }
}

.btn-ghost {
  background: transparent;
  color: var(--teal);
  border: 2px solid var(--cyan);
}
@media (hover: hover) {
  .btn-ghost:hover {
    background: rgba(20, 190, 200, 0.10);
  }
}

/* ─── Dark-background button variants (omega-3, product pages) ── */
.om-btn-primary {
  display: inline-block;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-product);
  font-size: var(--fs-sm);
  padding: 1rem 2.25rem;
  border-radius: var(--radius-btn);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.om-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.om-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--white);
  font-family: var(--font-product);
  font-size: var(--fs-sm);
  padding: 1rem 2.25rem;
  border-radius: var(--radius-btn);
  text-decoration: none;
  letter-spacing: 0.06em;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s, transform 0.2s;
}
.om-btn-ghost:hover {
  border-color: var(--white);
  transform: translateY(-2px);
}
.om-btn-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ─── Eye-supplements CTA button variants (cyan on dark) ── */
.fs-btn-primary {
  display: inline-block;
  background: var(--cyan);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: background 0.2s;
}
.fs-btn-primary:hover { background: var(--cyan-hover); }
.fs-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  border: 2px solid rgba(255,255,255,0.5);
  text-decoration: none;
  transition: border-color 0.2s;
}
.fs-btn-ghost:hover { border-color: var(--white); }

/* ─── Site header ───────────────────────────────────────── */
.site-header {
  background: var(--dark);
  width: 100%;
  position: sticky;
  top: calc(-1 * var(--topbar-h, 0px));
  z-index: 200;
}

/* Top bar */
.site-header__topbar {
  background: var(--teal-bright);
  padding: 8px 0;
}
.site-header__topbar-inner {
  padding: 0 clamp(16px, 4vw, 56px);
}
.site-header__move-notice {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--white);
  margin: 0;
  text-align: center;
  line-height: var(--lh-tight);
}
.site-header__move-notice a {
  color: var(--white);
  text-decoration: none;
}
@media (hover: hover) {
  .site-header__move-notice a:hover {
    text-decoration: underline;
  }
}
.site-header__move-notice a:focus-visible {
  outline: 2px solid var(--cyan-on-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Main bar */
.site-header__main {
  position: relative;
  background: var(--header-bg);
  border-bottom: 0; /* gold line under the menu removed (Maida, Nov 3) */
  padding: 12px 0;
}
.site-header__main-inner {
  padding: 0 clamp(16px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo */
.site-header__logo-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.site-header__logo {
  height: 48px;
  width: auto;
  display: block;
}

/* Nav */
.site-header__nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.site-header__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Nav links and dropdown buttons */
.site-header__link,
.site-header__dropdown-btn {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--white);
  background: transparent;
  border: none;
  padding: 7px 12px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  line-height: var(--lh-tight);
}
.site-header__link:focus-visible,
.site-header__dropdown-btn:focus-visible {
  outline: 2px solid var(--cyan-on-dark);
  outline-offset: 2px;
}
@media (hover: hover) {
  .site-header__link:hover,
  .site-header__dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.10);
  }
}

.site-header__caret {
  font-size: 0.6em;
  transition: transform 0.2s ease;
}
.site-header__dropdown-btn[aria-expanded="true"] .site-header__caret {
  transform: rotate(180deg);
}

/* Dropdown */
.site-header__item--dropdown {
  position: relative;
}
.site-header__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.site-header__dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.site-header__dropdown.is-open {
  display: block;
}
.site-header__dropdown a {
  display: block;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--white);
  text-decoration: none;
}
.site-header__dropdown a:focus-visible {
  outline: 2px solid var(--cyan-on-dark);
  outline-offset: -2px;
}
@media (hover: hover) {
  .site-header__dropdown a:hover {
    background: rgba(255,255,255,0.08);
  }
}

/* Sub-menu */
.site-header__item--has-sub {
  position: relative;
}
.site-header__sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.site-header__item--has-sub:hover .site-header__sub,
.site-header__item--has-sub:focus-within .site-header__sub {
  display: block;
}
.site-header__sub a {
  display: block;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--white);
  text-decoration: none;
}
@media (hover: hover) {
  .site-header__sub a:hover {
    background: rgba(255,255,255,0.08);
  }
}

/* Actions: Book Exam + phone */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.site-header__book {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 9px 18px;
}
.site-header__actions .site-header__book {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-soft) 48%, var(--gold-line) 100%);
  color: var(--header-bg);
  border: 1px solid rgba(255,236,190,0.7);
  box-shadow: 0 0 22px rgba(232,203,138,0.65), 0 0 6px rgba(232,203,138,0.8), inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.25);
  position: relative; overflow: hidden;
}
@media (hover: hover) {
  .site-header__actions .site-header__book:hover {
    background: linear-gradient(180deg, var(--gold-glint) 0%, var(--gold-soft) 48%, var(--gold-line) 100%);
    color: var(--header-bg);
  }
}
.site-header__phone {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__phone:focus-visible {
  outline: 2px solid var(--cyan-on-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (hover: hover) {
  .site-header__phone:hover {
    text-decoration: underline;
  }
}

/* Hamburger */
.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  order: 10;
}
.site-header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.site-header__hamburger:focus-visible {
  outline: 2px solid var(--cyan-on-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Desktop header layout (min-width: 1180px) ─────────── */
@media (min-width: 1180px) {
  .site-header__topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
  }
  .site-header__main-inner {
    max-width: 1320px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

/* ─── Desktop header sizing (min-width: 1280px) ─────────── */
@media (min-width: 1280px) {
  .site-header__main {
    padding: 16px 0;
  }
  .site-header__logo {
    height: 52px;
  }
  .site-header__link,
  .site-header__dropdown-btn {
    font-size: 18px;
    padding: 8px 14px;
  }
  .site-header__book,
  .site-header__phone {
    font-size: 17px;
  }
}

/* ─── Mobile nav (hamburger breakpoint: 1179px) ─────────── */
@media (max-width: 1179px) {
  .site-header__main-inner {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .site-header__logo-link {
    flex: 1;
    order: 1;
  }
  .site-header__hamburger {
    display: flex;
    order: 2;
    margin-left: 0;
    min-width: 44px;
    min-height: 44px;
  }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark);
    border-top: 1px solid rgba(255,255,255,0.10);
    z-index: 250;
    padding: 12px 0 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .site-header__nav.is-open {
    display: block;
  }
  .site-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter);
  }
  .site-header__item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .site-header__link,
  .site-header__dropdown-btn {
    width: 100%;
    justify-content: space-between;
    padding: 12px 4px;
    border-radius: 0;
  }
  .site-header__dropdown {
    position: static;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(255,255,255,0.04);
    padding: 0 0 8px 16px;
    display: none;
  }
  .site-header__dropdown.is-open {
    display: block;
  }
  .site-header__dropdown a {
    padding: 9px 4px;
  }
  .site-header__sub {
    position: static;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(255,255,255,0.04);
    padding: 0 0 4px 16px;
    display: none;
  }
  .site-header__item--has-sub:hover .site-header__sub,
  .site-header__item--has-sub:focus-within .site-header__sub {
    display: none;
  }
  .site-header__sub.is-open {
    display: block;
  }
  .site-header__actions {
    order: 3;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0;
    border-top: none;
  }
  .site-header__book {
    width: auto;
    text-align: center;
  }
}

/* Mobile header: one-row logo | phone icon | hamburger */
@media (max-width: 767px) {
  .site-header__main-inner { flex-wrap: nowrap; }
  .site-header__logo-link { order: 1; flex: 1; }
  .site-header__actions { order: 2; width: auto; padding: 0; gap: 0; flex-wrap: nowrap; }
  .site-header__actions .site-header__book { display: none; }
  .site-header__hamburger { order: 3; }
  .site-header__phone {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid var(--gold-soft);
    font-size: 0; color: transparent; text-decoration: none;
  }
  .site-header__phone::before {
    content: ""; width: 20px; height: 20px; background-color: var(--gold-soft);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C%2Fsvg%3E") center / contain no-repeat;
  }
  .site-header__phone:focus-visible { outline: 2px solid var(--cyan-on-dark); outline-offset: 2px; border-radius: 50%; }
  @media (hover: hover) { .site-header__phone:hover { text-decoration: none; background: rgba(216,182,106,0.12); } }
}

@media (max-width: 480px) {
  .site-header__logo {
    height: 36px;
  }
}

/* ─── Site footer ───────────────────────────────────────── */
.site-footer {
  background: var(--bg-pale);
  color: var(--text);
  border-top: 1px solid var(--line);
  padding: 52px 0 0;
  font-family: var(--font-body);
}
.site-footer__inner {
  padding: 0 clamp(16px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  align-items: flex-start;
}

/* Map column */
.site-footer__map {
  flex: 0 0 240px;
  max-width: 240px;
}
.site-footer__map iframe {
  width: 100%;
  height: 240px;
  border: 0;
  border-radius: 10px;
  display: block;
}

/* Link columns */
.site-footer__col {
  flex: 1 1 140px;
  min-width: 130px;
}
.site-footer__col--address {
  flex: 1 1 200px;
}
.site-footer__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 4px;
}
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--teal-dark);
  margin: 0 0 12px;
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links li {
  margin-bottom: 7px;
}
.site-footer__links a {
  color: var(--teal);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
}
.site-footer__links a:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (hover: hover) {
  .site-footer__links a:hover {
    text-decoration: underline;
  }
}
.site-footer__plain {
  color: var(--text);
  font-size: var(--fs-body);
}

/* Address block */
.site-footer__address {
  font-style: normal;
  font-size: var(--fs-body);
  color: var(--text);
  line-height: var(--lh-body);
}
.site-footer__address a {
  color: var(--teal);
  text-decoration: none;
}
@media (hover: hover) {
  .site-footer__address a:hover {
    text-decoration: underline;
  }
}
.site-footer__address a:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hours */
.site-footer__hours {
  font-size: var(--fs-body);
  color: var(--text);
  margin: 12px 0 0;
  line-height: var(--lh-body);
}

/* Chamber membership line (Nov 3) */
.site-footer__member { font-size: var(--fs-sm); color: var(--text); margin: 14px 0 0; line-height: var(--lh-body); }
.site-footer__member a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__member a:hover { color: var(--teal-dark); }
.site-footer__member a:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; border-radius: 2px; }

/* Social icons */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.site-footer__social-link {
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tint);
  transition: background-color 0.15s ease;
  text-decoration: none;
}
.site-footer__social-link:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}
@media (hover: hover) {
  .site-footer__social-link:hover {
    background: var(--band-2);
  }
}

/* Bottom bar */
.site-footer__bottom {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding: 16px clamp(16px, 4vw, 56px);
}
.site-footer__copyright {
  max-width: var(--content-max);
  margin: 0 auto;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text);
  text-align: center;
}
.site-footer__copyright a {
  color: var(--teal);
  text-decoration: underline;
}
.site-footer__copyright a:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (hover: hover) {
  .site-footer__copyright a:hover { text-decoration: underline; }
}

/* ─── Footer desktop: one row (≥1200px) ─────────────────── */
@media (min-width: 1200px) {
  .site-footer__inner {
    flex-wrap: nowrap;
    gap: 32px 20px;
  }
  .site-footer__map {
    flex: 0 0 20%;
    max-width: 22%;
  }
  .site-footer__col {
    flex: 1 1 0;
    min-width: 0;
  }
  .site-footer__col--address {
    flex: 2 1 0;
  }
  .site-footer__social {
    flex-wrap: nowrap;
    gap: 6px;
  }
}

/* ─── Footer tablet: three columns (768–1199px) ─────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .site-footer__inner {
    gap: 28px 20px;
  }
  .site-footer__map {
    flex: 1 1 calc(33.333% - 20px);
    max-width: none;
  }
  .site-footer__col {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 100px;
  }
  .site-footer__col--address {
    flex: 1 1 calc(33.333% - 20px);
  }
  .site-footer__map iframe {
    height: 200px;
  }
}

/* ─── Footer mobile: two columns (<768px) ───────────────── */
@media (max-width: 767px) {
  .site-footer__inner {
    gap: 24px 16px;
  }
  .site-footer__map {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .site-footer__map iframe {
    height: 180px;
  }
  .site-footer__col {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .site-footer__col--address {
    flex: 0 0 100%;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding-top: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAGE SECTION CLASSES
   Ported from live frx CSS. No hex values, no !important.
   ═══════════════════════════════════════════════════════════ */

/* ─── Band / Container ───────────────────────────────────── */
.band {
  position: relative;
  width: 100%;
  padding: var(--band-pad) 0;
  margin: 0;
}
@media (max-width: 600px) {
  .band { padding: var(--band-pad-mobile) 0; }
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow {
  max-width: var(--content-narrow);
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
}

/* ─── Shared page heading (above hero band) ─────────────── */
.page-hed { background: var(--white); padding: 2.5rem 1rem 1.25rem; text-align: left; }
.page-hed .eyebrow { max-width: var(--content-narrow); margin: 0 auto 0.5rem; }
.page-hed h1 { font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--teal-dark); max-width: var(--content-narrow); margin: 0 auto; text-wrap: balance; }
.page-hed__sub { max-width: var(--content-narrow); margin: 0.75rem auto 0; }
.page-hed + .band { padding-top: calc(var(--section-pad, 64px) / 2); }
p, li { text-wrap: pretty; }

/* ─── Section background gradients ──────────────────────── */
/* Pattern s01–s14: white 0% → peak 50% → white 100% */
.bg-s01 { background: linear-gradient(180deg, var(--white) 0%, var(--band-2) 50%, var(--white) 100%); }
.bg-s02 { background: linear-gradient(180deg, var(--white) 0%, var(--band-3) 50%, var(--white) 100%); }
.bg-s03 { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 50%, var(--white) 100%); }
.bg-s04 { background: linear-gradient(180deg, var(--white) 0%, var(--band-2) 50%, var(--white) 100%); }
.bg-s05 { background: linear-gradient(180deg, var(--white) 0%, var(--band-3) 50%, var(--white) 100%); }
.bg-s06 { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 50%, var(--white) 100%); }
.bg-s07 { background: linear-gradient(180deg, var(--white) 0%, var(--band-2) 50%, var(--white) 100%); }
.bg-s08 { background: linear-gradient(180deg, var(--white) 0%, var(--band-3) 50%, var(--white) 100%); }
.bg-s09 { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 50%, var(--white) 100%); }
.bg-s10 { background: linear-gradient(180deg, var(--white) 0%, var(--band-2) 50%, var(--white) 100%); }
.bg-s11 { background: linear-gradient(180deg, var(--white) 0%, var(--band-3) 50%, var(--white) 100%); }
.bg-s12 { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 50%, var(--white) 100%); }
.bg-s13 { background: linear-gradient(180deg, var(--white) 0%, var(--band-2) 50%, var(--white) 100%); }
.bg-s14 { background: linear-gradient(180deg, var(--white) 0%, var(--band-3) 50%, var(--white) 100%); }
/* s15: dark teal gradient (CTA section) */
.bg-s15 { background: linear-gradient(180deg, var(--band-1) 0%, var(--teal) 55%, var(--teal-dark) 100%); }

/* ─── Hero (luxe redesign, Oct 2026) ────────────────────── */
.hero-luxe {
  position: relative;
  min-height: 640px;
  background: var(--teal-panel); /* darker teal, Dr. Amy's choice (Nov 3) */
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-luxe__img-wrap {
  overflow: hidden;
}
.hero-luxe__img-wrap picture {
  display: block;
}
.hero-luxe__img {
  width: 100%;
  height: auto;
  display: block;
}
/* Left gradient */
.hero-luxe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--teal-panel) 0%, var(--teal-panel) max(640px, calc(50% - 20px)), rgba(0,74,96,0.55) max(710px, calc(50% + 50px)), rgba(0,74,96,0) max(790px, calc(50% + 130px)));
  z-index: 1;
  pointer-events: none;
}
/* Decorative rings (% of frame width, positioned relative to img-wrap) */
.hero-luxe__ring-1,
.hero-luxe__ring-2 {
  position: absolute;
  top: 55.7%;
  left: 50.3%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.hero-luxe__ring-1 {
  width: 28.5%;
  border: none;
  --band: 16px;
  background:
    repeating-conic-gradient(from -0.6deg, var(--gold-glint) 0deg 1.4deg, transparent 1.4deg 30deg),
    repeating-conic-gradient(from -0.3deg, rgba(216,182,106,0.85) 0deg 0.7deg, transparent 0.7deg 5deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--band)), #000 calc(100% - var(--band) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--band)), #000 calc(100% - var(--band) + 1px));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  transform: translate(-50%, -50%);
  animation: hero-lens-focus 6s cubic-bezier(.45,0,.25,1) infinite;
}
.hero-luxe__ring-2 {
  width: 32.4%;
  border: 1.5px solid rgba(201,162,75,0.6);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  transform: translate(-50%, -50%);
  animation: none;
}
.hero-luxe__ring-2::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 0;
  height: 0;
  transform: translate(-50%, -100%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid var(--gold-glint);
}
@keyframes hero-lens-focus {
  0%  { transform: translate(-50%,-50%) rotate(0deg); }
  22% { transform: translate(-50%,-50%) rotate(22deg); }
  32% { transform: translate(-50%,-50%) rotate(17deg); }
  40% { transform: translate(-50%,-50%) rotate(19deg); }
  62% { transform: translate(-50%,-50%) rotate(-16deg); }
  72% { transform: translate(-50%,-50%) rotate(-11deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-luxe__ring-1 { animation: none; }
}
/* Content column */
.hero-luxe > .container {
  position: relative;
  z-index: 10;
}
.hero-luxe__content {
  max-width: 600px;
}
.hero-luxe__tagline {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.hero-luxe__h1 {
  font-family: var(--font-luxe);
  font-size: clamp(2.5rem, 4vw, 3.375rem);
  font-weight: 600;
  line-height: 1.02;
  color: var(--white);
  margin: 0 0 14px;
}
.hero-luxe__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mist-2);
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 500px;
}
.hero-luxe__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.hero-luxe__btn-book {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-soft) 48%, var(--gold-line) 100%);
  color: var(--header-bg);
  font-weight: 600;
  border: 1px solid rgba(255,236,190,0.7);
  box-shadow: 0 0 22px rgba(232,203,138,0.65), 0 0 6px rgba(232,203,138,0.8), inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.25);
  position: relative; overflow: hidden;
}
@media (hover: hover) {
  .hero-luxe__btn-book:hover {
    background: linear-gradient(180deg, var(--gold-glint) 0%, var(--gold-soft) 48%, var(--gold-line) 100%);
    color: var(--header-bg);
    transform: translateY(-2px);
  }
}
/* Gold button sheen */
.site-header__actions .site-header__book::after,
.hero-luxe__btn-book::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: btn-sheen 5s ease-in-out infinite;
}
@keyframes btn-sheen {
  0%, 70% { left: -60%; }
  100%     { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__actions .site-header__book::after,
  .hero-luxe__btn-book::after { animation: none; display: none; }
}
.hero-luxe__btn-call {
  background: transparent;
  color: var(--mist);
  border: 1px solid rgba(230,241,243,0.6);
}
@media (hover: hover) {
  .hero-luxe__btn-call:hover {
    background: rgba(230,241,243,0.12);
    transform: translateY(-2px);
  }
}
/* News panel */
.hero-luxe__news {
  margin-top: 18px;
  width: fit-content;
  max-width: 520px;
  background: var(--teal);
  border-left: 6px solid var(--gold-line);
  border-radius: 0 6px 6px 0;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mist);
}
.hero-luxe__news-row {
  margin: 0;
  display: flex;
  gap: 12px;
}
.hero-luxe__news-label {
  flex-shrink: 0;
  width: 84px;
  color: var(--gold-soft);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.hero-luxe__news a {
  color: var(--mist);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .hero-luxe__news a:hover { color: var(--white); }
}
.hero-luxe__news a:focus-visible { color: var(--white); }
/* Desktop: img-wrap is absolute photo frame; container fills flex row */
@media (min-width: 1200px) {
  .hero-luxe {
    min-height: 0;
    --hero-h: clamp(560px, calc(100svh - 110px), 680px);
    height: var(--hero-h);
  }
  .hero-luxe__img-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(216px, calc(50% - 444px), calc(100% - var(--hero-h) * 1600 / 810));
    right: auto;
    height: 100%;
    aspect-ratio: 1600 / 810;
    overflow: visible;
  }
  .hero-luxe__img-wrap picture {
    position: absolute;
    inset: 0;
    display: block;
  }
  .hero-luxe__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-luxe > .container {
    width: 100%;
    box-sizing: border-box;
    padding-top: 60px;
    padding-bottom: 60px;
    max-width: 1320px;
  }
}
/* Tablet + mobile: stacked layout (photo on top, text below) */
@media (max-width: 1199px) {
  .hero-luxe {
    min-height: 0;
    overflow: visible;
    display: block;
  }
  .hero-luxe__img-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    overflow: hidden;
  }
  .hero-luxe__img-wrap picture {
    position: static;
    inset: auto;
    display: block;
  }
  .hero-luxe__img {
    position: static;
    right: auto;
    top: auto;
    height: auto;
    width: 100%;
    display: block;
  }
  .hero-luxe::before { display: none; }
  .hero-luxe > .container {
    z-index: auto;
    padding-top: 40px;
    padding-bottom: 48px;
  }
}
/* Phone: hero reorder, news rows */
@media (max-width: 767px) {
  .hero-luxe__ring-1 { --band: 7px; }
  .hero-luxe__ring-2::after { border-left-width: 4px; border-right-width: 4px; border-bottom-width: 6px; }
  .hero-luxe__content { display: flex; flex-direction: column; }
  .hero-luxe__btns { display: contents; }
  .hero-luxe__tagline { order: 1; }
  .hero-luxe__h1 { order: 2; }
  .hero-luxe__btn-book { order: 3; width: 100%; box-sizing: border-box; text-align: center; margin: 4px 0 0; }
  .hero-luxe__body { order: 4; margin: 16px 0; }
  .hero-luxe__btn-call { order: 5; width: 100%; box-sizing: border-box; text-align: center; margin: 0 0 10px; }
  .hero-luxe__news { order: 6; margin-top: 8px; }
  .hero-luxe > .container { padding-top: 24px; }
  .hero-luxe__btns .btn { text-align: center; }
  .hero-luxe__news-row { display: block; }
  .hero-luxe__news-label { width: auto; margin-right: 6px; }
}

/* ─── Typography ─────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 12px;
}
.eyebrow--dark {
  color: var(--cyan-on-dark);
}

.sec-head {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 14px;
}
.sec-head--white {
  color: var(--white);
}

.sec-block {
  max-width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 36px;
}
.sec-block--center {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-narrow);
}
.sec-block--center:has(+ *) { max-width: none; }
.sec-block--wide { max-width: none; margin-left: 0; margin-right: 0; }
.sec-block--narrow {
  max-width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Town/service page H1 moved into the hero text column */
:is(.town-two-col__text, .st-two-col__text, .egr-split__text, .de-hero__text, .em-two-col__text, .ss-hero__text, .ef-hero__text, .pg-hero__text, .sg-hero__text, .op-intro__text-col) > h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0 0 16px;
  color: var(--teal-dark);
}

/* Shared image-right modifier for town/service two-col blocks */
.town-two-col--img-right,
.st-two-col--img-right {
  direction: rtl;
}
.town-two-col--img-right > *,
.st-two-col--img-right > * {
  direction: ltr;
}
@media (max-width: 767px) {
  .town-two-col--img-right,
  .st-two-col--img-right {
    direction: ltr;
  }
}

/* Service-list link tiles (Newington) */
.link-tiles {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.link-tiles a {
  display: block;
  height: 100%;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border, #d6e6ea);
  border-radius: 12px;
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
}
.link-tiles a::after { content: " \2192"; }
.link-tiles a:hover,
.link-tiles a:focus-visible {
  border-color: var(--teal);
  text-decoration: underline;
}

.sub {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  max-width: 68ch;
  line-height: var(--line-height);
  margin: 0 0 8px;
}

/* ─── Image + text block (it-block) ─────────────────────── */
.it-block {
  display: flex;
  align-items: center;
  gap: 48px;
}
.it-block--rev {
  flex-direction: row-reverse;
}
.it-block__img  { flex: 1; }
.it-block__text { flex: 1; }

.it-block__img img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-img);
  box-shadow: 0 16px 40px rgba(0, 72, 92, 0.14);
  display: block;
}
.it-block__body p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--line-height);
  margin: 0 0 14px;
  max-width: 68ch;
}

@media (max-width: 820px) {
  .it-block,
  .it-block--rev {
    flex-direction: column;
    gap: 0;
  }
  /* Dissolve the text wrapper so head, img, body can be reordered individually */
  .it-block__text { display: contents; }
  .it-block__head { order: 1; margin-bottom: 24px; }
  .it-block__img  { order: 2; margin-bottom: 24px; }
  .it-block__body { order: 3; }
}

/* ─── Cards ──────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
.cards:has(.card-text.is-expanded) { align-items: start; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 72, 92, 0.12);
  }
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}
.card-img--top { object-position: top center; }
@media (max-width: 1023px) {
  .card-img { height: auto; }
}
/* ─── Scoped card-img overrides (non-home pages with cropped images) ─── */
/* Dry Eye Treatment service cards (ratios 6:5 and a contain product shot) */
.band:has(.de-sec-head) .cards .card-img {
  height: auto;
  aspect-ratio: 6 / 5;
}
/* Eye Exams additional services cards (all 2:1) */
.band:has(.ex-sec-head) .cards:not(.cards--4) .card-img {
  height: auto;
  aspect-ratio: 2 / 1;
}

/* Glaucoma Screening cards (all 600×300 with curved corner) */
.band:has(.gs-sec-head) .cards .card-img {
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.cards.cards--square .card-img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; }

.card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}


.card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--teal-dark);
  margin: 0 0 10px;
  line-height: var(--lh-tight);
}

.card-text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--line-height);
  flex: 1;
  max-width: 68ch;
}

.card-link {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  margin-top: auto;
  padding-top: 14px;
  display: inline-block;
}
@media (hover: hover) {
  .card-link:hover { text-decoration: underline; }
}

/* ─── Card text clamp (progressive enhancement via cards.js) ─ */
.card-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  flex: 0 0 auto;
}
.card-text.is-expanded {
  display: block;
  flex: 0 0 auto;
}
.card-text.is-clamped { position: relative; }
.card-more {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0 0.25em;
  font: inherit;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  cursor: pointer;
  display: inline;
}
.card-text.is-clamped .card-more {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding-left: 2.5em;
  background: linear-gradient(to right, transparent, var(--white) 2em);
}
.card-text.is-clamped .card-more::before {
  content: "\2026\00a0";
  color: var(--text);
  font-weight: 400;
}
.card-more:hover { text-decoration: underline; }
.card-more:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ─── Insurance grid ─────────────────────────────────────── */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
}
.ins-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .ins-grid a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 72, 92, 0.10);
  }
}
.ins-grid img {
  height: 42px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .ins-grid { grid-template-columns: repeat(20, 1fr); }
  .ins-grid a { grid-column: span 4; }
  .ins-grid a:nth-child(-n+4) { grid-column: span 5; }
}
@media (max-width: 1023px) {
  .ins-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .ins-grid { grid-template-columns: repeat(2, 1fr); }
  .ins-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ─── Info boxes ─────────────────────────────────────────── */
.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.info--top {
  margin-top: 44px;
}

.ibox {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px;
}
.ibox h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--teal-dark);
  margin: 0 0 10px;
  line-height: var(--lh-tight);
}
.ibox p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  line-height: var(--lh-body);
  margin: 0 0 8px;
  max-width: 68ch;
}
.ibox p:last-child { margin-bottom: 0; }
.ibox a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .ibox a:hover { text-decoration: underline; }
}

/* ─── Team grid ──────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
.member {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
}
.member img {
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: auto;
  display: block;
}
.member-photo--colin { object-position: 20% 30%; }
.member-body {
  padding: 20px 18px 24px;
}
.member h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--teal-dark);
  margin: 0 0 4px;
  line-height: var(--lh-tight);
}
.member__role {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}
.member-body p:not(.member__role) {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-body);
  margin: 10px 0 0;
}
@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
}

/* ─── Blog grid ──────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.post {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.post__date {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-light);
  margin: 0 0 8px;
}
.post h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--teal-dark);
  margin: 0 0 14px;
  line-height: var(--lh-tight);
  flex: 1;
}
.post__link {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  margin-top: auto;
  display: inline-block;
}
@media (hover: hover) {
  .post__link:hover { text-decoration: underline; }
}

/* ─── Google Reviews ─────────────────────────────────────── */
.rev-summary {
  text-align: left;
  margin-bottom: 32px;
}
.rev-summary__rating {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  margin: 0 0 8px;
}
.rev-summary__stars {
  color: var(--gold);
  font-size: 1.5rem;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 6px;
}
.rev-source {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-light);
  margin: 4px 0 0;
}

.rev-carousel-wrap {
  position: relative;
}
.rev-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3); /* 3 visible at 1024+ */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px; /* prevent shadow clip */
  margin-bottom: 20px;
}
.rev-cards::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
  .rev-cards { grid-auto-columns: calc((100% - 20px) / 2); } /* 2 visible */
}
@media (max-width: 767px) {
  .rev-cards { grid-auto-columns: 100%; } /* 1 visible */
}
.rev-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.rev-btn {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--teal-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
@media (hover: hover) {
  .rev-btn:hover { background: var(--band-1); border-color: var(--teal); }
}
.rev-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.rev-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.rev-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.rev-card__photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rev-card__name {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--teal-dark);
  text-decoration: none;
}
@media (hover: hover) {
  .rev-card__name:hover { text-decoration: underline; }
}
.rev-card__stars {
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-size: 1rem;
}
.rev-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: var(--lh-body);
  flex: 1;
  max-width: 68ch;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-card__text.is-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.rev-card__when {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-light);
  margin-top: 12px;
}
.rev-card__toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--teal);
  cursor: pointer;
  margin-top: 6px;
  text-decoration: underline;
  text-align: left;
}
.rev-cta {
  text-align: center;
  margin-top: 8px;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  position: relative;
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--teal);
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  padding: 0 22px 20px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--line-height);
  max-width: 68ch;
}
/* ─── FAQ block: heading above, questions in two columns (WEBSITE_LAYOUT_RULES §4.6) ─── */
.faq-block__head { margin-bottom: 28px; }
.faq-block__head .sec-head { margin-bottom: 0; }
.faq--2col { display: grid; grid-template-columns: 1fr; gap: 0 24px; align-items: start; }
@media (min-width: 900px) { .faq--2col { grid-template-columns: 1fr 1fr; } }
.faq__col { min-width: 0; }

/* ─── Newsletter ─────────────────────────────────────────── */
.nl {
  background: var(--cyan-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px;
  text-align: center;
  max-width: var(--content-narrow);
  margin: 0 auto;
}
.nl h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--teal-dark);
  margin: 0 0 10px;
  line-height: var(--lh-tight);
}
.nl p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--line-height);
  max-width: 56ch;
  margin: 0 auto 24px;
}
@media (max-width: 600px) {
  .nl { padding: 28px 20px; }
}

/* ─── Final CTA ──────────────────────────────────────────── */
.cta-final {
  text-align: center;
  color: var(--white);
}
.cta-final h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 14px;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.cta-final p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.90);
  max-width: 56ch;
  margin: 0 auto 28px;
  line-height: var(--line-height);
}
.cta-final .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ─── Cards: 4-column modifier ───────────────────────────── */
@media (min-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}





/* ─── Utility: button row ────────────────────────────────── */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.btn-row--center {
  justify-content: center;
}
/* Section-level button rows start at the left edge; CTA and newsletter stay centered (Maida, Oct 30). */
section .btn-row:not(.cta-final .btn-row):not(.nl .btn-row):not(.sg-insta-cta):not(.faq-cta) { justify-content: flex-start; }

.hp-field { display: none; }
.form-status { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 10px; background: var(--bg-pale); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); }

/* Supplement page heroes: badge, H1, text, pills and button share one left-aligned 820px column (Maida, Oct 31, 2026) */
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) {
  padding-left: max(var(--gutter, 16px), calc((100% - var(--content-narrow)) / 2));
  padding-right: max(var(--gutter, 16px), calc((100% - var(--content-narrow)) / 2));
}
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > * {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > [class*="-pills"] {
  justify-content: flex-start;
}

/* Supplement page heroes with a square product image on the right (Maida, Nov 1, 2026); the intro below becomes one text column */
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  align-content: center;
  padding-left: max(var(--gutter, 16px), calc((100% - var(--content-max, 1140px)) / 2));
  padding-right: max(var(--gutter, 16px), calc((100% - var(--content-max, 1140px)) / 2));
}
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > * { grid-column: 1; justify-self: start; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :is([class$="-img-box"], .fs-hero__img) {
  grid-column: 2; grid-row: 1 / span 10; align-self: center; justify-self: stretch;
  background: var(--white); padding: 0; border-radius: var(--radius-img); overflow: hidden; position: relative;
}
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :is([class$="-img-box"], .fs-hero__img) img {
  display: block; width: 100%; max-width: none; height: auto; margin: 0; border-radius: 0;
}
main section:is(.mhp-intro, .mdm-intro, .mvh-intro, .lmz-intro, .vep-intro, .om-intro) > [class$="__inner"] {
  grid-template-columns: 1fr; max-width: var(--content-narrow);
}
@media (max-width: 820px) {
  main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) { grid-template-columns: 1fr; }
  main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :is([class$="-img-box"], .fs-hero__img) { grid-column: 1; grid-row: auto; margin-top: 1.5rem; }
}

/* Supplement heroes: text block vertically centered next to the image (Maida, Nov 1, 2026) */
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) { grid-template-rows: 1fr repeat(8, auto) 1fr; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(1):not([class$="-img-box"], .fs-hero__img) { grid-row: 2; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(2):not([class$="-img-box"], .fs-hero__img) { grid-row: 3; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(3):not([class$="-img-box"], .fs-hero__img) { grid-row: 4; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(4):not([class$="-img-box"], .fs-hero__img) { grid-row: 5; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(5):not([class$="-img-box"], .fs-hero__img) { grid-row: 6; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(6):not([class$="-img-box"], .fs-hero__img) { grid-row: 7; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(7):not([class$="-img-box"], .fs-hero__img) { grid-row: 8; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :nth-child(8):not([class$="-img-box"], .fs-hero__img) { grid-row: 9; }
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :is([class$="-img-box"], .fs-hero__img) { grid-row: 1 / -1; }
@media (max-width: 820px) {
  main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) { grid-template-rows: none; }
  main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > * { grid-row: auto !important; }
  main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :is([class$="-img-box"], .fs-hero__img) { grid-row: auto; }
}

/* Supplement hero bottles sit directly on the hero background, no white box (Maida, Nov 1, 2026) */
main section:is(.fs-hero, .mhp-hero, .mdm-hero, .mvh-hero, .lmz-hero, .vep-hero, .om-hero) > :is([class$="-img-box"], .fs-hero__img) {
  background: transparent; box-shadow: none; border-radius: 0;
}

/* Text-only sections moved to the end of the page: one full-width block of cards, two per row (Maida, Nov 1, 2026) */
.textend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.textend-card { background: var(--white); border-radius: var(--radius-card, 16px); padding: 28px 32px; box-shadow: 0 8px 24px rgba(0, 72, 92, 0.08); }
.textend-card > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.textend-card h2 { font-size: var(--fs-h3); }
.textend-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 820px) { .textend-grid { grid-template-columns: 1fr; } .textend-card { padding: 22px 20px; } }

/* Zigzag helper: mirrors an image + text row so image sides alternate down the page (Maida, Nov 1, 2026) */
.zig-flip { direction: rtl; }
.zig-flip > * { direction: ltr; }
@media (max-width: 820px) { .zig-flip { direction: ltr; } }

/* Google Maps attribution under map screenshots (Google geo guidelines; Maida, Nov 1, 2026) */
.map-credit { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-light); margin: 6px 0 0; text-align: left; }

/* ═══════════════════════════════════════════════════════════
   SECTION SYSTEM v2 (modern redesign, Maida Nov 2, 2026)
   One container, one vertical rhythm, one set of blocks.
   Pages opt in by using sx-* classes; old classes untouched.
   ═══════════════════════════════════════════════════════════ */
:root {
  --sx-pad: 88px;          /* section top and bottom, desktop */
  --sx-pad-m: 56px;        /* section top and bottom, phone */
  --sx-gap: 64px;          /* gap between image and text columns */
  --sx-head-gap: 40px;     /* heading block to content below */
  --sx-shadow: 0 18px 44px rgba(0, 72, 92, 0.13);
  --sx-shadow-sm: 0 8px 24px rgba(0, 72, 92, 0.08);
}

/* Section + container */
.sx { position: relative; padding-block: var(--sx-pad); }
.sx-wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 820px) {
  .sx { padding-block: var(--sx-pad-m); }
  .sx-wrap { padding-inline: 16px; }
}

/* Heading block: eyebrow, H2, optional lead. Left-aligned, content width. */
.sx-head { margin-bottom: var(--sx-head-gap); }
.sx-head > :last-child { margin-bottom: 0; }
.sx-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sx h1, .sx h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: 1.18;
  text-wrap: balance;
  margin: 0 0 16px;
}
.sx h1 { font-size: var(--fs-page-h1); }
.sx h2 { font-size: var(--fs-h2); }
.sx h1 + h2 { font-size: var(--fs-h3); margin-top: -4px; }
.sx-lead { font-family: var(--font-body); font-size: 1.0625rem; color: var(--text); line-height: 1.7; max-width: 68ch; margin: 0; }

/* Body copy inside every v2 block */
.sx-body p, .sx-body li { font-family: var(--font-body); font-size: var(--fs-base); color: var(--text); line-height: 1.7; }
.sx-body p { margin: 0 0 14px; max-width: 64ch; }
.sx-body > ul { margin: 4px 0 16px; padding-left: 0; list-style: none; }
.sx-body > ul > li { position: relative; padding-left: 26px; margin: 0 0 8px; }
.sx-body > ul > li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.sx-body a:not(.btn) { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sx-body a:not(.btn):hover { color: var(--teal-hover); }
.sx-body strong { color: var(--ink); }
.sx-body > :last-child { margin-bottom: 0; }
.sx-body .btn-row, .sx-body > .btn { margin-top: 12px; }
.sx-body .source-line { font-size: var(--fs-sm); color: var(--text-light); }

/* Image + text row (also the hero). Text column vertically centered. */
.sx-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sx-gap); align-items: center; }
.sx-split--flip .sx-media { order: 2; }
.sx-media { margin: 0; }
.sx-media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-img); box-shadow: var(--sx-shadow);
}
.sx-media--hero img { max-width: 546px; aspect-ratio: 1 / 1; margin-left: auto; }
.sx-split--flip .sx-media--hero img { margin-left: 0; }
.sx-media .map-credit { margin-top: 8px; }
@media (max-width: 900px) {
  .sx-split { grid-template-columns: 1fr; gap: 28px; }
  .sx-split--flip .sx-media { order: 0; }
  .sx-split > .sx-text { order: 1; }
  .sx-split--hero > .sx-text { order: 0; }
  .sx-split--hero > .sx-media { order: 1; }
  .sx-media--hero img { max-width: 100%; margin: 0; }
}

/* Badges (round icon images) shown as the "image" of a row */
.sx-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sx-badges img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .sx-badges { max-width: 480px; } }

/* Card shell used by text cards and notes */
.sx-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--sx-shadow-sm);
  padding: 36px 40px;
}
.sx-card h2 { font-size: var(--fs-h3); margin-bottom: 14px; }
@media (max-width: 820px) { .sx-card { padding: 26px 22px; } }

/* Text-only sections at the page end: 2 per row, equal height */
.sx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.sx-grid2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 820px) { .sx-grid2 { grid-template-columns: 1fr; } }

/* A full-width text card: copy left, button right */
.sx-note { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.sx-note > .sx-body { flex: 1; }
.sx-note > .btn { flex-shrink: 0; }
@media (max-width: 820px) { .sx-note { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* Shared blocks inside v2 sections */
.sx .cards { gap: 24px; }
.sx .card-body h3 { color: var(--teal-dark); }
.sx .card-text { color: var(--text); }
.sx .faq--2col { gap: 0 24px; }
.sx .ins-grid { max-width: none; gap: 20px; }
.sx .ins-grid a { padding: 26px 18px; }
.sx .cta-final .btn-row { justify-content: center; }
.sx .cta-final h2 { color: var(--white); }
.sx .card-img { height: auto; aspect-ratio: auto; object-fit: initial; }
.sx-badges img { border-radius: 50%; box-shadow: none; }
.sx-media img { width: auto; max-width: 100%; }
.sx-media--hero img { width: 100%; max-width: 546px; }
/* Phone order (Maida, Nov 2): every image + text row shows heading, text, button, then the image */
@media (max-width: 900px) {
  .sx-split > .sx-text, .sx-split--flip > .sx-text { order: 0; }
  .sx-split > .sx-media, .sx-split--flip > .sx-media { order: 1; }
}
.sx .team-grid { max-width: none; }
.sx .egr-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sx .egr-card__img { height: auto; }
@media (max-width: 1023px) { .sx .egr-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .sx .egr-cards { grid-template-columns: 1fr; } }

/* No bold inside body text on any page (Maida, Nov 2, 2026): the words stay, the old WordPress keyword bolding goes. Blog posts (main > article) are not affected. */
main > section p strong, main > section p b, main > section li strong, main > section li b, main > section .sx-body strong { font-weight: inherit; color: inherit; }
/* Text cards that hold their own images, tables or grids take the full row; icons inside cards stay small (audit A1) */
.sx-grid2 > .sx-card:has(img, table, [class*="grid"]) { grid-column: 1 / -1; }
.sx-card img { max-width: 200px; height: auto; }
.sx-grid2:has(> .sx-card:is(:has(img), :has(table), :has([class*="grid"]))) > .sx-card { grid-column: 1 / -1; }
/* Name caption under a photo of our doctors (Maida, Nov 2, 2026) */
.sx-caption { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--teal-dark); text-align: left; margin: 10px 0 0; line-height: 1.4; }
.ex-it-block__img .sx-caption { margin: 0; padding: 10px 14px 12px; }
/* Vertical rhythm between blocks inside one section */
.sx-wrap > * + * { margin-top: 32px; }
.sx-wrap > .sx-head + * { margin-top: 0; }
.sx-wrap > * + .sx-head { margin-top: 56px; }
/* A row whose text is much longer than its image: image stays in view while the text scrolls */
.sx-split--long { align-items: start; }
@media (min-width: 901px) { .sx-split--long > .sx-media { position: sticky; top: 110px; } }
.sx-grid2--stack { grid-template-columns: 1fr; }
/* A second heading inside one section gets room above it */
.sx-body > * + .eyebrow { margin-top: 40px; }
.sx-body > :not(.eyebrow) + h2 { margin-top: 40px; }
.sx.pg-band-teal .sx-lead { color: var(--mist-2); }
/* Full-width cards and notes use the width: readable lines up to 92 characters */
.sx-card.sx-body > p, .sx-card .sx-body > p, .sx-grid2--stack .sx-card p, .sx-wrap > .sx-body > p { max-width: 92ch; }
/* Two cards in a card grid fill the row instead of leaving an empty third column */
@media (min-width: 1024px) { .sx .cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }
/* Sunglasses brand gallery: images keep the 2:1 box (height attribute must not win) */
.sx .sg-gallery-item__img { height: auto; }
/* Two text blocks next to an image stack instead of making three narrow columns */
.sx .sx-text .rx-text-two-col { grid-template-columns: 1fr; gap: 20px; }
/* Old narrow centered feature block becomes a full-width card */
.sx .ecp-feature { max-width: none; margin: 0; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--sx-shadow-sm); padding: 36px 40px; }
.sx .ecp-feature p { max-width: 92ch; }
@media (max-width: 820px) { .sx .ecp-feature { padding: 26px 22px; } }
/* Page header for pages without a photo hero (FAQ, contact, insurance, news, newsletter, rewards) */
.sx-pagehead { padding-block: 64px 48px; }
.sx-pagehead .sx-head { margin-bottom: 0; }
.sx-pagehead h1 { margin-bottom: 14px; }
.sx-pagehead .btn-row { margin-top: 18px; }
@media (max-width: 820px) { .sx-pagehead { padding-block: 44px 32px; } }
.sx-faq-lead { margin: -24px 0 28px; }
.sx-note-title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--teal-dark); margin: 0 0 8px; }
.sx-note-title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Old narrow, centered components use the full section width */
.sx .fq-limited-grid, .sx .itn-list, .sx .nl-card, .sx .contact-links-grid { max-width: none; }
.sx .fq-limited-grid { margin: 0 0 24px; }
.sx .ip-limited-logos { justify-content: flex-start; }
.sx .itn-item:first-child { border-top: 0; padding-top: 0; }
.sx-newsletter .nl-card { max-width: 640px; }
.sx .sx-media img[src*="carecredit"] { width: 100%; max-width: min(399px, 100%); height: auto; }
.sx-card > h3:first-child, .sx-card.sx-body > h3:first-child { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--teal-dark); margin: 0 0 14px; }
.sx .ip-bring-cards { max-width: none; margin-inline: 0; }
/* Grid children may shrink below their content width (prevents horizontal scroll on phones) */
.sx-split > *, .sx-grid2 > *, .sx-note > * { min-width: 0; }
.sx-media img { max-width: 100%; }
.sx-card .mm-eyebrow { color: var(--teal-dark); }
/* Homepage below the locked hero: same width as every other section (Maida, Nov 3) */
main:has(> .hero-luxe) .ins-grid, main:has(> .hero-luxe) .team-grid { max-width: none; }
main:has(> .hero-luxe) .team-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { main:has(> .hero-luxe) .team-grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) { main:has(> .hero-luxe) .blog-grid { grid-template-columns: repeat(2, 1fr); } }
main:has(> .hero-luxe) .it-block__img img[src*="office-square"] { max-width: 100%; width: 100%; }
/* Rows with a wide (2:1) photo: give the photo more of the row so it is not small next to long text */
@media (min-width: 901px) {
  .sx-split--wide { grid-template-columns: 1.35fr 1fr; }
  .sx-split--wide.sx-split--flip { grid-template-columns: 1fr 1.35fr; }
}
/* Section-label spans (mm-eyebrow etc.) sit right above their heading */
.sx-body > [class*="eyebrow"] + h2 { margin-top: 0; }
/* Image wrappers inside a row keep the photo's own ratio (no CSS crop) */
.sx-media .rx-col-img { aspect-ratio: auto; height: auto; }
.sx-media .rx-col-img img { height: auto; object-fit: initial; }
/* Wide tables scroll inside their own box on phones */
.sx .mm-cmp-wrap { overflow-x: auto; max-width: 100%; }
/* Compact page hero (Maida, Nov 3): buttons visible without scrolling on a laptop screen */
.sx:has(> .sx-wrap > .sx-split--hero) { padding-block: 40px 64px; }
@media (min-width: 768px) { .sx:has(> .sx-wrap > .sx-split--hero) { padding-block: 104px 104px; } }
.sx-split--hero { gap: 48px; }
.sx-split--hero h1 { font-size: clamp(1.9rem, 2.9vw, 2.5rem); margin-bottom: 12px; }
.sx-split--hero h1 + h2, .sx-split--hero h2 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin: 4px 0 10px; }
.sx-split--hero .sx-body p { margin-bottom: 10px; line-height: 1.6; }
.sx-split--hero .eyebrow { margin-bottom: 8px; }
@media (min-width: 901px) { .sx-media--hero img { max-width: 460px; } .sx-media--hero > div { max-width: 460px; margin-left: auto; } }
@media (min-width: 901px) {
  .sx-split--hero { grid-template-columns: 1.3fr 1fr; }
  .sx-split--hero.sx-split--flip { grid-template-columns: 1.3fr 1fr; }
  .sx-split--hero.sx-split--flip > .sx-text { order: 0; } .sx-split--hero.sx-split--flip > .sx-media { order: 1; }
  .sx-split--hero .sx-body p { max-width: none; }
}
/* Progressive team: "Eye Doctors" / "Eye Opticians" labels centered over their cards (Maida, Nov 3) */
.sx .pg-team-label { text-align: center; }
/* Text under a card grid: left-aligned, same edge as the cards, button under it (rule §1) */
.sx .sg-brands-desc, .sx .ef-brands-desc, .sx [class$="-brands-desc"] { text-align: left; max-width: none; margin: 32px 0 0; }
.sx [class$="-brands-desc"] p { max-width: 92ch; margin-left: 0; margin-right: 0; }
.sx [class$="-brands-desc"] .btn-row { justify-content: flex-start; }
/* Small question heading inside a hero uses the brand heading color */
.sx-split--hero h3 { color: var(--teal-dark); font-family: var(--font-display); font-size: var(--fs-h4); margin: 0 0 6px; }
/* FAQ: "Schedule Exam" sits under the right column, centered (Maida, Nov 3) */
.faq-cta { display: flex; justify-content: center; margin-top: 24px; }
@media (max-width: 899px) { .faq-cta { justify-content: flex-start; } }
/* Instagram tiles: equal width, centered row, button centered (Maida, Nov 3) */
.sx .sg-insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; }
.sx .sg-insta-item img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }
@media (max-width: 900px) { .sx .sg-insta-grid { grid-template-columns: repeat(2, 1fr); } }
.sx .sg-insta-cta { justify-content: center; margin-top: 32px; }
.sx .sg-insta-head:empty { display: none; }
/* Two text blocks side by side: headings, text and buttons line up across the columns (Maida, Nov 3) */
@media (min-width: 821px) {
  .sx .sg-two-col { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 64px; row-gap: 0; }
  .sx .sg-two-col__block { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .sx .sg-two-col__block > .eyebrow { grid-row: 1; align-self: end; }
  .sx .sg-two-col__block > h2 { grid-row: 2; }
  .sx .sg-two-col__block > p:not(.eyebrow) { grid-row: 3; align-self: start; }
  .sx .sg-two-col__block > .btn, .sx .sg-two-col__block > .btn-row { grid-row: 4; justify-self: start; align-self: end; margin-top: 12px; }
}
/* Eye supplements product cards: light header, large bottle (Maida, Nov 3) */
.fs-card__header, .fs-card__header--b, .fs-card__header--c { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 100%); border-bottom: 1px solid var(--line); min-height: 0; padding: 20px 20px 16px; }
.fs-card__img img { height: 220px; border-radius: 0; }
.fs-card__badge { background: var(--teal); color: var(--white); }
section.sx .fs-card .fs-card__header { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 100%); border-bottom: 1px solid var(--line); min-height: 0; padding: 20px 20px 16px; }
section.sx .fs-card .fs-card__img img, main .fs-card .fs-card__img img { height: 220px; border-radius: 0; }
main .fs-card .fs-card__header { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 100%); border-bottom: 1px solid var(--line); min-height: 0; }
main .fs-card .fs-card__badge { background: var(--teal); color: var(--white); }
main .sg-insta-cta.btn-row { justify-content: center; }
/* Supplement product pages: "Best For" label sits centered right above the bottle (Maida, Nov 3) */
main [class$="-product-tag"] { position: static; display: table; margin: 0 auto 12px; }
/* Eye supplements: team heading centered over the centered cards; free reading box centered beside the text */
main .fs-intro__inner { align-items: center; }
main section.sx .btn-row.sg-insta-cta { display: flex; justify-content: center; }
/* Supplement product pages: light hero instead of dark teal (Maida, Nov 3). The main /eye-supplements/ hero keeps its teal. */
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) { background: linear-gradient(180deg, var(--white) 0%, var(--band-1) 100%); color: var(--text); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero)::before, main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero)::after { display: none; }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) h1 { color: var(--teal-dark); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) h1 span { color: var(--teal); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) p, main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) [class*="__sub"] { color: var(--text); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) [class*="__badge"],
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) [class*="-pill"]:not([class*="-pills"]) { background: var(--white); border: 1px solid var(--line); color: var(--teal-dark); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) [class*="formula-sep"] { color: var(--teal); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) :is([class*="hero__btn"],.vep-hero-btn) { background: var(--teal); color: var(--white); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) :is([class*="hero__btn"],.vep-hero-btn):hover { background: var(--teal-hover); color: var(--white); }
main section:is(.mdm-hero,.mhp-hero,.mvh-hero,.lmz-hero,.om-hero,.vep-hero) img { background: var(--band-1); border-radius: var(--radius-img); padding: 24px; box-sizing: border-box; }
/* Instagram button: centered under the tiles */
main .btn-row.sg-insta-cta { width: 100%; }
/* Eye supplements team: heading and cards centered (Maida, Nov 3 — approved exception to rule §1) */
main .fs-sec-head.align-center-ok { text-align: center; }
main .fs-team-grid { margin-left: auto; margin-right: auto; }
main section.om-hero .om-btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); } main section.om-hero .om-btn-primary:hover { background: var(--teal-hover); color: var(--white); }
/* Contact: form first (Maida, Nov 3); "Get in Touch" heading lines up with "Send Us a Message" */
@media (min-width: 821px) { .sx .contact-layout > .contact-col:last-child > h2:first-child { margin-top: 32px; } }
.sx .contact-layout > .contact-col > h2 { font-size: var(--fs-h2); }
/* Highlighted notice card (insurance limits, manufacturer offer) — easy to spot and read (Maida, Nov 3) */
.sx-callout { border-left: 6px solid var(--gold-line); background: var(--white); }
.sx-callout > h3:first-child, .sx-callout > h2 { color: var(--teal-dark); font-size: var(--fs-h2); }
.sx-callout p { font-size: 1.0625rem; line-height: 1.75; color: var(--ink); max-width: 80ch; }
.sx-callout .ip-limited-logos { margin-top: 20px; }
.sx-offer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sx-offer > .eyebrow { flex-basis: 100%; margin-bottom: -12px; }
.sx-offer > h2 { margin: 0; }
.sx-offer > .btn { flex-shrink: 0; }
.sx-card.sx-callout > h3:first-child { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--teal-dark); margin-bottom: 14px; }