/* ========================================
   ISLAND DENTAL — WordPress Theme Frontend CSS
   Ported from static site Design System v3.0
   Premium wellness aesthetic
   Fonts: Playfair Display / DM Sans
   ======================================== */

:root {
  /* Map static site vars to WordPress theme.json vars */
  --sage: var(--wp--preset--color--sage);
  --teal-dark: var(--wp--preset--color--teal-dark);
  --slate: var(--wp--preset--color--slate);
  --charcoal: var(--wp--preset--color--charcoal);
  --near-black: var(--wp--preset--color--near-black);
  --warm-gray: var(--wp--preset--color--warm-gray);
  --white: var(--wp--preset--color--white);
  --cream: var(--wp--preset--color--cream);
  --orange: var(--wp--preset--color--orange);
  --gold: var(--wp--preset--color--gold);
  --gray-50: var(--wp--preset--color--gray-50);
  --gray-100: var(--wp--preset--color--gray-100);
  --gray-200: var(--wp--preset--color--gray-200);
  --gray-300: var(--wp--preset--color--gray-300);
  --gray-400: var(--wp--preset--color--gray-400);
  --gray-500: var(--wp--preset--color--gray-500);

  /* Blue aliases */
  --blue-50: var(--wp--preset--color--blue-50);
  --blue-100: var(--wp--preset--color--blue-100);
  --blue-200: var(--wp--preset--color--blue-200);
  --blue-400: var(--wp--preset--color--blue-400);
  --blue-600: var(--wp--preset--color--blue-600);
  --blue-700: var(--wp--preset--color--blue-700);
  --blue-800: var(--wp--preset--color--blue-800);
  --blue-900: var(--wp--preset--color--blue-900);
  --blue-tint: var(--wp--preset--color--blue-tint);
  --blue-light: var(--wp--preset--color--blue-light);
  --gray-700: var(--wp--preset--color--gray-700);
  --gray-900: var(--wp--preset--color--gray-900);
  --navy: var(--wp--preset--color--navy);
  --blue: var(--wp--preset--color--blue);
  --teal: var(--wp--preset--color--teal);

  /* Keep non-color vars mapped to WP theme.json custom properties */
  --font: var(--wp--preset--font-family--body);
  --font-heading: var(--wp--preset--font-family--heading);
  --font-cta: var(--wp--preset--font-family--body);
  --nav-h: var(--wp--custom--nav-height);
  --radius-sm: var(--wp--custom--radius--sm);
  --radius: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-xl: var(--wp--custom--radius--xl);
  --radius-pill: var(--wp--custom--radius--pill);
  --shadow-sm: var(--wp--custom--shadow--sm);
  --shadow: var(--wp--custom--shadow--md);
  --shadow-lg: var(--wp--custom--shadow--lg);
  --shadow-xl: var(--wp--custom--shadow--xl);
  --ease: var(--wp--custom--ease);
  --transition: var(--wp--custom--transition);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; border-radius: var(--radius-lg); }
.nav-logo img,
.footer-logo img,
.hero-full img,
.hero-full video { border-radius: 0; }
a { color: var(--teal-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-dark); text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font); }

/* ---- LAYOUT ---- */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.section          { padding: 96px 0; }
.section--white   { background: var(--white); }
.section--gray    { background: var(--cream); }
.section--blue    { background: var(--blue-50); }
.section--navy    { background: var(--near-black); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p  { color: rgba(255,255,255,0.75); }
.section--dark    { background: var(--near-black); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p  { color: rgba(255,255,255,0.65); }
.section--teal    { background: var(--teal-dark); color: var(--white); }
.section--teal h2, .section--teal h3 { color: var(--white); }
.section--teal p  { color: rgba(255,255,255,0.85); }

/* Rounded section variants */
.section--rounded {
  border-radius: var(--radius-xl);
  margin: 0 20px;
}

/* Colored sections get soft rounded top corners and breathing room */
.section--gray,
.section--blue {
  border-radius: 32px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.section--gray + .section--white,
.section--blue + .section--white,
.section--navy + .section--white,
.section--teal + .section--white,
.section--dark + .section--white {
  margin-top: 24px;
}
.section--navy,
.section--dark,
.section--teal {
  border-radius: 32px;
  margin-top: 24px;
  margin-bottom: 24px;
  /* Rounded bands float inset from the viewport; !important outranks core alignfull layout margins. */
  margin-left: 16px !important;
  margin-right: 16px !important;
}

/* ---- FOOTER FLUSH ----
   Anything that bumps against the footer sits flush: square bottom corners,
   no bottom gap. Three rules so an unsupported :has() can't drop the others.
   nav-enhancements.js adds .footer-flush for structures CSS can't see. */
:is(main, main > .wp-block-post-content) > :is(.cta-banner, .section--gray, .section--blue, .section--navy, .section--dark, .section--teal, .hero--full):last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
:is(main, main > .wp-block-post-content) > :is(.cta-banner, .section--gray, .section--blue, .section--navy, .section--dark, .section--teal, .hero--full):has(+ .spanish-badge:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
main .footer-flush {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 { font-family: var(--font-heading); }
h1 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; line-height: 1.1; color: var(--near-black); letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.5vw, 42px); font-weight: 700; line-height: 1.15; color: var(--near-black); letter-spacing: -0.01em; }
h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.3; color: var(--near-black); }
h4 { font-size: 17px; font-weight: 600; color: var(--near-black); }
p  { color: var(--charcoal); margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-cta);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin-bottom: 12px;
  display: block;
}
.section-title    { margin-bottom: 10px; }
.section-subtitle { font-size: 18px; color: var(--warm-gray); margin-bottom: 40px; max-width: 580px; line-height: 1.7; }
.section-header   { margin-bottom: 48px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-subtitle { margin-left: auto; margin-right: auto; }

/* ---- GRID ---- */
.grid   { display: grid; gap: 24px; }
.g-2    { grid-template-columns: repeat(2, 1fr); }
.g-3    { grid-template-columns: repeat(3, 1fr); }
.g-4    { grid-template-columns: repeat(4, 1fr); }
.g-2-1  { grid-template-columns: 2fr 1fr; }
.g-1-2  { grid-template-columns: 1fr 2fr; }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }
.wrap   { flex-wrap: wrap; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-cta);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: all 0.3s var(--ease);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); color: inherit; }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, #2d4a52, #608190);
  color: var(--white);
  border: none;
  box-shadow: 0 4px 16px rgba(53,86,95,0.25);
}
.btn-primary:hover { background: linear-gradient(135deg, #243f46, #527080); color: var(--white); border: none; box-shadow: 0 8px 28px rgba(53,86,95,0.4); }

.btn-blue {
  background: linear-gradient(135deg, #35565F, #608190);
  color: var(--white);
  border: none;
}
.btn-blue:hover { background: linear-gradient(135deg, #2a4449, #527080); color: var(--white); border: none; box-shadow: 0 8px 24px rgba(53,86,95,0.3); }

.btn-orange {
  background: linear-gradient(135deg, #c47a4a, #d4915f);
  color: var(--white);
  border: none;
}
.btn-orange:hover { background: linear-gradient(135deg, #b06a3a, #c47a4a); border: none; }

.btn-outline {
  background: transparent;
  color: var(--teal-dark);
  border: 2px solid var(--teal-dark);
}
.btn-outline:hover { background: var(--teal-dark); color: var(--white); }

.btn-ghost {
  background: transparent;
  color: var(--warm-gray);
  border: 2px solid var(--gray-300);
}
.btn-ghost:hover { background: var(--cream); color: var(--charcoal); border-color: var(--gray-400); }

.btn-white {
  background: var(--white);
  color: var(--near-black);
  border: 2px solid var(--white);
}
.btn-white:hover { background: var(--cream); color: var(--near-black); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); color: var(--white); }

.btn-sm  { padding: 10px 22px; font-size: 13px; }
.btn-lg  { padding: 18px 40px; font-size: 15px; }
.btn-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- NAV ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(229,226,221,0.6);
  z-index: 200;
  transition: all 0.4s var(--ease);
}
/* Account for WordPress admin bar */
.admin-bar .nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .nav {
    top: 46px;
  }
}
.nav--scrolled {
  background: var(--white);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 24px rgba(31,41,43,0.08);
  border-bottom-color: transparent;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.nav-logo {
  display: flex; align-items: center;
  text-decoration: none;
}
.nav-logo img { height: 36px; width: auto; }
.nav-logo:hover { text-decoration: none; }
.nav-logo { flex-direction: column; align-items: flex-start; gap: 2px; }
.nav-tagline {
  font-size: 10.5px; font-style: italic; letter-spacing: 0.02em;
  color: var(--charcoal); line-height: 1; white-space: nowrap;
}
@media (max-width: 960px) {
  .nav-tagline { display: none; }
}

.nav-links { display: flex; align-items: center; gap: 28px; }

/* Financing dropdown */
.nav-item-dropdown { position: relative; display: flex; align-items: center; }
.nav-caret { font-size: 17px; margin-left: 5px; opacity: 0.85; line-height: 1; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 400;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-cta);
  color: var(--charcoal);
  text-decoration: none;
  border-radius: calc(var(--radius-lg) - 4px);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-dropdown a:hover { background: var(--gray-100, #f3f4f6); color: var(--teal-dark); }
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0; right: 0;
  height: 10px;
}
.nav-link {
  font-size: 14px; font-weight: 500;
  font-family: var(--font-cta);
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.3s var(--ease);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: var(--teal-dark);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link:hover, .nav-link.active { color: var(--near-black); text-decoration: none; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-dark);
  font-family: var(--font-cta);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.nav-phone-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.nav-phone:hover { color: var(--near-black); text-decoration: none; }

/* Floating phone button — mobile only */
.nav-phone-float {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--teal-dark);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(31, 41, 43, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.nav-phone-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 41, 43, 0.4);
  color: #fff;
}
.nav-phone-float svg {
  width: 22px;
  height: 22px;
}

.nav-cta { margin-left: 4px; }

.nav-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  padding: 0; font-size: 22px; color: var(--charcoal);
  line-height: 1;
  transition: color 0.3s var(--ease);
}
.nav-hamburger:hover { color: var(--near-black); }
/* Geometric bars instead of a font glyph so the icon is dead-center at any font metrics (#8978) */
.nav-hamburger__bars { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 22px; height: 22px; }
.nav-hamburger__bars span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }
.nav-hamburger.is-open .nav-hamburger__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open .nav-hamburger__bars span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open .nav-hamburger__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; border-radius: 4px; }

.nav-logo img { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.nav-logo:hover img { opacity: 0.72; transform: scale(1.03); }

.nav-mobile {
  display: none;
  flex-direction: column;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 24px;
  gap: 16px;
  z-index: 199;
  box-shadow: var(--shadow-lg);
  border-radius: 0;
}
/* Account for WordPress admin bar on mobile nav */
.admin-bar .nav-mobile {
  top: calc(var(--nav-h) + 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .nav-mobile {
    top: calc(var(--nav-h) + 46px);
  }
}
.nav-mobile.open { display: flex; }
.nav-mobile .nav-link {
  font-size: 16px; padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.nav-mobile .nav-link::after { display: none; }
.nav-mobile .btn { justify-content: center; }

/* ---- HERO ---- */
.hero {
  margin-top: var(--nav-h);
  padding: 80px 0 72px;
  background: var(--white);
}
.hero--navy  { background: var(--near-black); }
.hero--navy h1, .hero--navy h2, .hero--navy h3 { color: var(--white); }
.hero--navy p  { color: rgba(255,255,255,0.75); }
.hero--blue  { background: var(--blue-50); }
.hero--gray  { background: var(--cream); }
.hero--sm    { padding: 48px 0; }
.hero--cover {
  position: relative;
  padding: 100px 0 80px;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.hero--cover::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(31,41,43,0.55);
}
.hero--cover .container { position: relative; z-index: 1; }
.hero--cover h1, .hero--cover p { color: var(--white); }

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow {
  font-size: 12px; font-weight: 600;
  font-family: var(--font-cta);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin-bottom: 14px;
  display: block;
}
.hero h1    { margin-bottom: 18px; }
.hero-lead  { font-size: 18px; color: var(--warm-gray); margin-bottom: 32px; line-height: 1.75; }

.hero-centered { text-align: center; }
.hero-centered .hero-inner { max-width: 680px; margin: 0 auto; }
.hero-centered .hero-lead { margin-left: auto; margin-right: auto; }

/* ---- HERO FULL WIDTH ---- */
.hero--full {
  margin-top: var(--nav-h);
  padding: 140px 0 120px;
  background: var(--near-black);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-bg .img-ph {
  position: absolute; inset: 0; min-height: 0; height: 100%;
  border-radius: 0; border: none; opacity: 0.42;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(31,41,43,0.85) 0%, rgba(31,41,43,0.6) 40%, rgba(31,41,43,0.3) 70%, transparent 100%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hero--full h1 { color: var(--white); margin-bottom: 20px; font-size: clamp(36px, 5vw, 62px); letter-spacing: -0.02em; }
.hero--full .hero-eyebrow { color: rgba(192,208,216,0.9); }
.hero--full .hero-lead { color: rgba(255,255,255,0.78); font-size: 19px; line-height: 1.7; }
.hero--full .hero-sub { font-size: 13px; color: rgba(255,255,255,0.42); margin-top: 20px; }

/* Ambient gradient orbs */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ambient-orb--1 {
  width: 600px; height: 600px;
  top: -200px; left: -100px;
  background: radial-gradient(circle, rgba(96,129,144,0.18), transparent 70%);
}
.ambient-orb--2 {
  width: 500px; height: 500px;
  bottom: -150px; right: -80px;
  background: radial-gradient(circle, rgba(53,86,95,0.15), transparent 70%);
}
.ambient-orb--3 {
  width: 400px; height: 400px;
  top: 50%; left: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(134,146,146,0.12), transparent 70%);
}

/* ---- IMAGE PLACEHOLDER ---- */
.img-ph {
  background: var(--blue-100);
  border: 2px dashed var(--blue-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--slate);
  font-size: 13px;
  font-weight: 500;
  min-height: 200px;
  gap: 8px;
}
.img-ph-icon { font-size: 28px; }
.img-ph--gray { background: var(--gray-200); border-color: var(--gray-300); color: var(--gray-400); }
.img-ph--tall { min-height: 340px; }
.img-ph--hero { min-height: 420px; }
.img-ph--map  { min-height: 360px; background: var(--blue-50); border-color: var(--blue-200); color: var(--slate); }
.img-ph--sq   { min-height: 240px; }

/* ---- CARDS ---- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card--static, .card--static:hover { transform: none; box-shadow: var(--shadow-sm); }

/* Image banner — full-bleed reassurance moment (ported from the LP design) */
.image-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.image-banner img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.image-banner .banner-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 120px 40px 40px;
  /* fade to fully transparent so the panel has no hard top edge (#9153) */
  background: linear-gradient(to top, rgba(31,41,43,0.94) 0%, rgba(31,41,43,0.78) 35%, rgba(31,41,43,0.42) 68%, rgba(31,41,43,0) 100%);
  color: var(--white);
}
.image-banner .banner-overlay h3 {
  font-size: 28px;
  color: var(--white);
  margin-bottom: 8px;
}
.image-banner .banner-overlay p {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0;
}
.image-banner .banner-overlay .btn { margin-top: 18px; }
@media (max-width: 640px) {
  .image-banner img { height: 360px; }
  .image-banner .banner-overlay { padding: 24px; }
  .image-banner .banner-overlay h3 { font-size: 22px; }
}

/* ---- CARD ACTION ALIGNMENT (global) ----
   Cards inside grids are flex columns; a trailing button (or wrapper
   holding one) pins to the card bottom so actions align across a row. */
.grid > .card { display: flex; flex-direction: column; }
.grid > .card > .btn:last-child { margin-top: auto; align-self: flex-start; }
.grid > .card.text-center > .btn:last-child { align-self: center; }
.grid > .card > .pill { align-self: flex-start; } /* flex column would stretch pills full-width */
.grid > .card.text-center > .pill { align-self: center; }
.grid > .card > .btn-group:last-child,
.grid > .card > div:last-child:has(> .btn),
.grid > .card > p:last-child:has(> .btn) { margin-top: auto; padding-top: 16px; }
.card-action { margin-top: auto; padding-top: 16px; }

/* High-contrast special-offer card — readable on any section background. */
.offer-card { background: var(--teal-dark); color: var(--white); border-radius: var(--radius-xl); padding: 24px 28px; }
.offer-card h3, .offer-card h4 { color: var(--white); }
.offer-card p { color: rgba(255,255,255,0.9); }

/* WP's flow-layout rules (:root :where(.is-layout-flow) > *) outrank single-class
   selectors, zeroing the first child's nav clearance and injecting 24px gaps.
   These selectors match that specificity so heroes clear the fixed nav again. */
:root .entry-content > .hero:first-child,
:root .entry-content > .hero--full:first-child { margin-block-start: var(--nav-h); }
:root .entry-content > * + .hero,
:root .entry-content > * + .hero--full { margin-block-start: 0; }

/* Grids keep clear separation from whatever follows them. */
.grid:not(:last-child) { margin-bottom: 40px; }

.card--blue { background: var(--blue-50); border-color: var(--blue-200); }
.card--flat { box-shadow: none; }
.card-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, rgba(53,86,95,0.08), rgba(96,129,144,0.12));
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.card h3 { margin-bottom: 10px; }
.card h4 { margin-bottom: 8px; }
.card p  { font-size: 15px; }

/* ---- SERVICE CARD ---- */
.service-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s var(--ease);
}
.service-card:hover { box-shadow: var(--shadow); border-color: var(--slate); transform: translateY(-3px); }
a.service-card { text-decoration: none; color: inherit; cursor: pointer; }
.service-card h3 { font-size: 17px; margin: 0; }
.service-card p  { font-size: 14px; color: var(--warm-gray); flex: 1; }
.service-card a  { font-size: 13px; font-weight: 600; color: var(--teal-dark); }
.service-card .card-link { font-size: 13px; font-weight: 600; color: var(--teal-dark); }

/* ---- LOCATION CARD ---- */
.loc-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}
.loc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.loc-card-body { padding: 28px; }
.loc-card h3   { margin-bottom: 8px; }
.loc-meta      { font-size: 14px; color: var(--warm-gray); line-height: 1.9; margin-bottom: 20px; }
.loc-actions   { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- TESTIMONIAL ---- */
.testimonial {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: 28px;
  transition: all 0.3s var(--ease);
}
.testimonial:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.testimonial-stars   { color: var(--gold); font-size: 16px; margin-bottom: 14px; letter-spacing: 1px; }
.testimonial-text    { font-size: 15px; color: rgba(255,255,255,0.85); font-style: italic; margin-bottom: 18px; line-height: 1.75; }
.testimonial-author  { font-size: 14px; font-weight: 600; color: var(--white); }
.testimonial-location{ font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* Testimonials on light backgrounds */
.section--white .testimonial,
.section--gray .testimonial {
  background: var(--white);
  border: 1px solid var(--gray-200);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.section--white .testimonial:hover,
.section--gray .testimonial:hover {
  background: var(--gray-50, #f9fafb);
  transform: translateY(-3px);
}
.section--white .testimonial-text,
.section--gray .testimonial-text    { color: var(--gray-600); }
.section--white .testimonial-author,
.section--gray .testimonial-author  { color: var(--near-black); }
.section--white .testimonial-location,
.section--gray .testimonial-location{ color: var(--gray-400); }

/* ---- STEPS ---- */
.steps { display: flex; flex-direction: column; }
.step  { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.step:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #35565F, #608190);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  margin-top: 2px;
}
.step-body h4 { margin-bottom: 4px; }

/* ---- FAQ ACCORDION ---- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--gray-200); padding: 22px 0; }
.faq-q {
  font-family: var(--font);
  font-weight: 600; color: var(--near-black);
  cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 0;
  transition: color 0.3s var(--ease);
}
.faq-q:hover { color: var(--teal-dark); }
.faq-q::after {
  content: '+'; font-size: 22px; font-weight: 300; color: var(--teal-dark);
  flex-shrink: 0; line-height: 1.2;
  transition: transform 0.3s var(--ease);
}
.faq-item.open .faq-q::after { content: '\2212'; transform: rotate(180deg); }
.faq-a {
  font-size: 15px; color: var(--warm-gray);
  max-height: 0; overflow: hidden;
  margin-top: 0 !important;
  transition: max-height 0.4s var(--ease), margin-top 0.3s var(--ease);
  line-height: 1.75;
}
.faq-item.open .faq-a { max-height: 600px; margin-top: 14px !important; }

/* ---- CHECKLIST ---- */
.checklist li {
  /* block + absolute check (was flex, which split text around inline links) */
  display: block;
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 15px; color: var(--charcoal);
}
.checklist li::before {
  content: "\2713";
  color: var(--teal-dark);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 6px;
}

/* ---- BREADCRUMB ---- */
.breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--gray-400);
  padding: 14px 0;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--gray-400); }
.breadcrumb a:hover { color: var(--teal-dark); }
.breadcrumb-sep { color: var(--gray-300); }

/* ---- STATS BAR ---- */
.stats-bar {
  background: linear-gradient(135deg, var(--near-black), var(--teal-dark));
  color: var(--white);
  padding: 32px 0;
}
.stats-inner {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}
.stat-item    { text-align: center; }
.stat-value   { font-size: 32px; font-weight: 700; font-family: var(--font-heading); color: var(--white); display: block; line-height: 1; }
.stat-label   { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 6px; }

/* ---- CTA BANNER ---- */
.cta-banner {
  background: linear-gradient(135deg, var(--teal-dark), var(--near-black));
  color: var(--white);
  padding: 80px 24px;
  text-align: center;
  border-radius: 32px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.cta-banner h2 { color: var(--white); margin-bottom: 14px; }
.cta-banner p  { color: rgba(255,255,255,0.65); font-size: 18px; margin-bottom: 36px; }

/* ---- NOTICE STRIP ---- */
.notice-strip {
  background: linear-gradient(135deg, var(--teal-dark), var(--slate));
  color: var(--white);
  text-align: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  z-index: 100;
}
.notice-strip a { color: var(--white); text-decoration: underline; }

/* ---- SIDEBAR LAYOUT ---- */
.with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.sidebar-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-sm); }
.sidebar-card h4 { margin-bottom: 16px; }
.sidebar-sticky { position: sticky; top: calc(var(--nav-h) + 24px); }

/* ---- FORM ---- */
.form-group   { margin-bottom: 22px; }
.form-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--charcoal); margin-bottom: 8px;
}
input, select, textarea {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 15px; font-family: var(--font); color: var(--near-black);
  background: var(--white);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal-dark);
  box-shadow: 0 0 0 3px rgba(53,86,95,0.12);
}
textarea { resize: vertical; min-height: 120px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a958e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ---- PILLS / BADGES ---- */
.pill { display: inline-block; padding: 5px 14px; border-radius: 100px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-blue { background: rgba(53,86,95,0.1); color: var(--teal-dark); }
.pill-gray { background: var(--gray-200); color: var(--gray-500); }
.pill-green { background: #dcfce7; color: #166534; }

/* ---- DIVIDER ---- */
hr { border: none; border-top: 1px solid var(--gray-200); margin: 36px 0; }

/* ---- UTILITIES ---- */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-sm      { font-size: 13px; }
.text-base    { font-size: 15px; }
.text-lg      { font-size: 18px; }
.text-blue    { color: var(--teal-dark); }
.text-muted   { color: var(--gray-400); }
.text-gray    { color: var(--gray-600); }
.font-bold    { font-weight: 700; }
.font-medium  { font-weight: 500; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-5  { margin-top: 20px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-5  { margin-bottom: 20px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.m-0   { margin: 0; }
.font-semibold { font-weight: 600; }
.text-white { color: #fff; }
.d-inline-block { display: inline-block; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 800px; }
.max-w-xl  { max-width: 1000px; }
.w-full    { width: 100%; }
.d-block   { display: block; }
.d-none    { display: none; }

/* ---- TEAM CARDS ---- */
.team-track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.team-track-wrap::-webkit-scrollbar { display: none; }
.team-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 16px 28px 24px;
}

.team-card {
  flex: 0 0 420px;
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 3fr 4fr;
  grid-template-rows: 1fr;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.35s var(--ease);
}
.team-card:hover {
  transform: translateY(-4px);
  text-decoration: none;
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.team-card-photo {
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  min-height: 100%;
}
.team-card-photo .img-ph {
  border-radius: 0; border: none;
  min-height: 100%; height: 100%;
}
.team-card-info {
  padding: 24px 24px 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.team-card-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 2px;
}
.team-card-role {
  font-size: 13px;
  color: rgba(192,208,216,0.9);
  font-weight: 500;
}
.team-card-location {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.team-card-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.team-card-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.team-headshot { width: 100%; height: 320px; object-fit: cover; object-position: 50% 22%; }
.split-photo { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
/* Line-art illustrations: wrapped in a block div so flex-column cards can never
   distort the image, and bled edge-to-edge of the card for maximum size. Top
   corners follow the card's own radius; no other rounding (it clips strokes). */
.card-illustration-wrap { margin: -28px -28px 18px; }
.card-illustration { width: 100%; height: auto; display: block; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.checklist--cols { columns: 2; column-gap: 40px; }
.checklist--cols li { break-inside: avoid; }
/* Locations finder: map sits flush against the sections above and below. */
:root .entry-content > .loc-locator { margin-block-start: 0; }
:root .entry-content > .loc-locator + .section { margin-block-start: 0; }
.section-photo { max-width: 840px; margin: 0 auto 48px; }
.section-photo img { width: 100%; height: auto; }

.cta-secondary-links { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,0.85); }
.cta-secondary-links a { color: var(--white); text-decoration: underline; font-weight: 600; }
.cta-secondary-links a:hover { color: var(--cream); }


.team-card-stat strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

/* Filter pills */
.team-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 48px;
}
.team-filter {
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-cta);
  cursor: pointer;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  transition: all 0.3s var(--ease);
}
.team-filter:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
.team-filter.active { background: rgba(255,255,255,0.15); color: var(--white); }

/* Hide filtered-out cards */
.team-card[data-hidden="true"] { display: none; }

/* Doctor detail page */
.doctor-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.doctor-photo { border-radius: var(--radius-xl); overflow: hidden; }
.doctor-credentials { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.doctor-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.doctor-stat { text-align: center; padding: 28px 20px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); }
.doctor-stat-value { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--teal-dark); display: block; margin-bottom: 6px; }
.doctor-stat-label { font-size: 13px; color: var(--warm-gray); }

@media (max-width: 768px) {
  .doctor-hero { grid-template-columns: 1fr; gap: 32px; }
  .doctor-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .team-card { flex: 0 0 320px; }
}

/* ---- FOOTER ---- */
.footer {
  background: var(--near-black);
  color: rgba(255,255,255,0.65);
  padding: 88px 0 44px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 40px;
  align-items: start;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.footer-nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-badges-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 32px; margin-bottom: 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
  justify-content: center;
}
.footer-logo { margin-bottom: 20px; }
.footer-logo img { height: 48px; width: auto; filter: brightness(0) invert(1); }
.footer-logo-text { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: 0.02em; line-height: 1.1; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.footer-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
  transition: all 0.3s var(--ease);
}
.footer-badge:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }
.footer-right { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
/* footer-right no longer used on homepage but kept for inner pages */
.footer-hours-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--white); margin-bottom: 18px; }
.footer-hours-table { display: flex; flex-direction: column; gap: 6px; }
.footer-hours-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(255,255,255,0.55); }
.footer-hours-day { font-weight: 600; color: rgba(255,255,255,0.85); }
.footer-social { display: flex; gap: 12px; margin-bottom: 24px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: 14px;
  text-decoration: none;
  transition: all 0.3s var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.3); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.3s var(--ease); line-height: 1.4; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(255,255,255,0.35);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom-tag { font-weight: 600; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }

/* Legacy footer columns (inner pages) */
.footer-col h5    { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--white); margin-bottom: 18px; }
.footer-col ul    { display: flex; flex-direction: column; gap: 12px; }
.footer-col a     { font-size: 14px; color: rgba(255,255,255,0.55); }
.footer-col a:hover { color: var(--white); text-decoration: none; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: rgba(255,255,255,0.35); font-size: 13px; }
.footer-legal a:hover { color: var(--white); }

/* ---- FOOTER PHONE ---- */
.footer-phone { margin-top: 16px; }
.footer-phone a { font-size: 17px; font-weight: 700; color: rgba(255,255,255,0.8); text-decoration: none; letter-spacing: 0.01em; }
.footer-phone a:hover { color: var(--white); }
.footer-creds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.footer-creds span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 4px 10px; white-space: nowrap; }

/* ---- FIGMA-MATCH SECTION STYLES ---- */
.section-card { border-radius: var(--radius-xl); overflow: hidden; }

/* Teal-dark feature section */
.section--teal-dark { background: var(--teal-dark); color: var(--white); }
.section--teal-dark h2, .section--teal-dark h3 { color: var(--white); }
.section--teal-dark p { color: rgba(255,255,255,0.82); }

/* Light tint section */
.section--blue-tint { background: var(--blue-tint); }

/* Testimonials on dark bg */
.section--navy .testimonial-stars { color: var(--gold); }
.section--navy .testimonial-author { color: var(--white); }

/* ---- DIFFERENCE ROWS ---- */
.diff-rows { display: flex; flex-direction: column; gap: 24px; }
.diff-row {
  display: flex; align-items: stretch; gap: 24px;
}
.diff-row:nth-child(even) { flex-direction: row-reverse; }
.diff-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px 44px;
  box-shadow: var(--shadow);
  flex: 0 0 440px;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  transition: all 0.3s var(--ease);
}
.diff-card:hover { box-shadow: var(--shadow-lg); }
.diff-card-icon {
  width: 44px; height: 44px; margin-bottom: 4px;
  color: var(--teal-dark); flex-shrink: 0;
}
.diff-card h3 { font-size: 20px; margin: 0; }
.diff-card p  { font-size: 15px; color: var(--charcoal); margin: 0; line-height: 1.7; }
.diff-photo {
  border-radius: var(--radius-xl); overflow: hidden; flex: 1;
  background: var(--cream);
  min-height: 320px;
}
.diff-photo .img-ph { min-height: 320px; border-radius: 0; border: none; height: 100%; }
.diff-photo-img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; border-radius: 0; }

/* ---- FAST TRACK CARDS ---- */
.fast-track-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.fast-track-card {
  border-radius: var(--radius-xl); padding: 48px 44px;
  display: flex; flex-direction: column; gap: 20px; justify-content: space-between;
  transition: all 0.3s var(--ease);
}
.fast-track-card:hover { transform: translateY(-3px); }
.fast-track-card--white { background: var(--white); box-shadow: var(--shadow); }
.fast-track-card--white:hover { box-shadow: var(--shadow-lg); }
.fast-track-card--grey  { background: var(--sage); color: var(--white); overflow: hidden; position: relative; }
.fast-track-card--grey h3, .fast-track-card--grey p { color: var(--white); }
.fast-track-card h3 { font-size: 22px; color: var(--near-black); }
.fast-track-card p  { font-size: 16px; line-height: 1.75; color: var(--charcoal); flex: 1; }
.fast-track-card--grey h3 { color: var(--white); }
.fast-track-card--grey p  { color: rgba(255,255,255,0.85); }

/* ---- LOCATION CTA CARDS ---- */
.loc-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.loc-cta-card {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 44px 40px; text-align: center;
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease);
}
.loc-cta-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.loc-cta-name { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--near-black); margin-bottom: 14px; }
.loc-cta-addr { font-size: 15px; color: var(--charcoal); line-height: 1.8; margin-bottom: 18px; }
.loc-cta-phone { font-size: 16px; font-weight: 600; color: var(--near-black); line-height: 2; }
.loc-cta-phone a { color: var(--near-black); text-decoration: none; }
.loc-cta-phone a:hover { color: var(--teal-dark); }

/* ---- GALLERY PAGE ---- */
.gallery-filter { display: flex; gap: 10px; flex-wrap: wrap; }
.ba-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.ba-images { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--gray-200); }
.ba-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; background: rgba(0,0,0,0.5); color: white; padding: 3px 8px; }
.ba-body { padding: 16px; }

/* ---- CAREERS PAGE ---- */
.job-card { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; transition: all 0.3s var(--ease); }
.job-card:hover { border-color: var(--slate); box-shadow: var(--shadow); }
.job-title { font-size: 17px; font-weight: 700; color: var(--near-black); margin-bottom: 4px; }
.job-meta { font-size: 13px; color: var(--warm-gray); display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

/* ---- FORMS PAGE ---- */
.form-download { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: all 0.3s var(--ease); }
.form-download:hover { border-color: var(--slate); background: var(--blue-50); }
.form-info { flex: 1; }
.form-info h4 { font-size: 15px; margin-bottom: 4px; }
.form-info p { font-size: 13px; color: var(--warm-gray); margin: 0; }

/* ---- 404 PAGE ---- */
.not-found { text-align: center; padding: 120px 0 80px; }
.not-found-num { font-size: clamp(80px, 15vw, 160px); font-weight: 700; font-family: var(--font-heading); color: var(--gray-200); line-height: 1; margin-bottom: 0; }
.not-found-title { font-size: clamp(24px, 4vw, 36px); font-weight: 700; color: var(--near-black); margin-bottom: 16px; }

/* ---- VISIT REASON CARDS ---- */
.visit-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
.visit-reason {
  border: 2px solid var(--gray-200); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer;
  transition: all 0.3s var(--ease);
  display: flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 14px; color: var(--charcoal);
  user-select: none; line-height: 1.3;
}
.visit-reason:hover { border-color: var(--slate); background: var(--blue-50); }
.visit-reason.selected { border-color: var(--teal-dark); background: rgba(53,86,95,0.06); color: var(--teal-dark); }
.visit-reason input[type="radio"] { display: none; }
.visit-reason-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gray-300); flex-shrink: 0;
  transition: all 0.3s var(--ease);
}
.visit-reason.selected .visit-reason-dot { border-color: var(--teal-dark); background: var(--teal-dark); }
.visit-reason-sub { display: block; font-size: 12px; color: var(--gray-400); font-weight: 400; margin-top: 2px; }
.visit-reason.selected .visit-reason-sub { color: var(--slate); }

/* ---- LOCATION GEO ---- */
.loc-geo-msg { font-size: 13px; color: var(--teal-dark); font-weight: 600; text-align: center; margin-bottom: 20px; }
.loc-card.loc-nearest { border: 2px solid var(--slate); }

/* ---- CREDENTIALS BAR ---- */
.creds-bar { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 16px 0; }
.creds-inner { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cred-badge { font-size: 11px; font-weight: 600; color: var(--warm-gray); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 14px; border: 1.5px solid var(--gray-200); border-radius: 20px; white-space: nowrap; }
.cred-badge--blue { border-color: rgba(53,86,95,0.2); color: var(--teal-dark); background: rgba(53,86,95,0.04); }

/* ---- OFFERS STRIP ---- */
.offers-strip { background: linear-gradient(135deg, var(--near-black), var(--teal-dark)); padding: 0; overflow: hidden; }
.offers-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.offer-card { padding: 24px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,0.08); }
.offer-card:last-child { border-right: none; }
.offer-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.offer-price { font-size: 24px; font-weight: 700; font-family: var(--font-heading); color: var(--white); line-height: 1.2; margin-bottom: 4px; }
.offer-note { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 14px; }

/* ---- REVIEW BADGE ---- */
.review-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--cream); border: 1px solid var(--gray-200); border-radius: 20px; padding: 8px 18px; font-size: 14px; font-weight: 600; color: var(--charcoal); margin-bottom: 20px; }
.review-badge .stars { color: var(--gold); letter-spacing: 1px; }

/* ---- SVG WAVE DIVIDER ---- */
.wave-divider {
  display: block;
  width: 100%;
  height: auto;
  margin: -1px 0;
}

/* ---- ANIMATION CLASSES ---- */
.anim-ready {
  will-change: opacity, transform;
}
.anim-visible {
  will-change: auto;
}

/* ---- SKIP LINK (keyboard users) ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 999;
  background: var(--teal-dark); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---- FINANCE LOGOS ---- */
.finance-partners__logo { height: 40px; width: auto; max-width: 210px; object-fit: contain; display: block; margin-bottom: 14px; }
.finance-logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px 40px; padding: 8px 0;
}
.finance-logo-strip img { height: 32px; width: auto; max-width: 170px; object-fit: contain; }

/* ---- OFFICE CONTACT ROW (dropdown placed between hero and first section) ---- */
.office-contact-row { text-align: center; padding: 28px 24px 0; }

/* ---- HOME SERVICE NAV (quick links under homepage hero) ---- */
.home-service-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  padding: 28px 24px 0;
}

/* ---- SCHEDULE PREP LINKS ---- */
.schedule-prep-links { text-align: center; font-size: 14.5px; color: var(--charcoal); padding: 12px 24px 0; }

/* ---- OFFER ACCORDION (section-with-cards accordion variant) ---- */
.offer-accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.offer-accordion__item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease);
}
.offer-accordion__item[open] { box-shadow: 0 8px 24px rgba(31,41,43,0.08); }
.offer-accordion__summary {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 17px; color: var(--near-black);
  user-select: none;
}
.offer-accordion__summary::-webkit-details-marker { display: none; }
.offer-accordion__summary:hover { color: var(--teal-dark); }
.offer-accordion__icon { font-size: 22px; line-height: 1; }
.offer-accordion__title { flex: 1; }
.offer-accordion__caret { font-size: 15px; opacity: 0.6; transition: transform 0.25s var(--ease); }
.offer-accordion__item[open] .offer-accordion__caret { transform: rotate(180deg); }
.offer-accordion__body { padding: 0 24px 22px; color: var(--charcoal); }
.offer-accordion__body p { margin: 0 0 8px; }
.offer-accordion__photo { margin: 0 0 14px; }
.offer-accordion__photo img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; display: block; }

/* ---- MOBILE CTA BAR CLEARANCE ---- */
@media (max-width: 768px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 960px) {
  /* #9331 item 1: minmax(0, 1fr), NOT a bare 1fr. `1fr` is minmax(auto, 1fr),
     whose auto minimum will not shrink below the widest child's min-content
     width. On /insurance-financing/ that produced a single 421px track inside
     a 286px container, which pushed .container to 445px, the section to 473px
     and the document to 473px — at which point the mobile browser widened the
     layout viewport to 473px to fit it. That is why the whole page appeared
     shifted with the left edge of every heading clipped, and why text in the
     Advantage Plan and Annual Membership Plans sections was cut off.
     Verified on staging 2026-09-04: document 473px -> 390px. */
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-split > * { min-width: 0; }
  .g-3, .g-4  { grid-template-columns: repeat(2, 1fr); }
  .g-2-1, .g-1-2 { grid-template-columns: 1fr; }
  .with-sidebar { grid-template-columns: 1fr; }
  .sidebar-sticky { position: static; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .stats-inner { gap: 36px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav, .nav--scrolled {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
  }
  .nav-phone { display: none; }
  .nav-phone-float { display: flex; }

  .diff-row, .diff-row:nth-child(even) { flex-direction: column; }
  .diff-card { flex: none; min-height: 0; }
  .diff-photo, .diff-photo-img, .diff-photo .img-ph { min-height: 240px; height: 240px; }
  .fast-track-grid { grid-template-columns: 1fr; }
  .loc-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero    { padding: 48px 0 40px; }
  .hero--full { padding: 100px 0 80px; border-radius: 0 0 24px 24px; }
  .g-2     { grid-template-columns: 1fr; }
  .g-3, .g-4 { grid-template-columns: 1fr; }
  .form-row  { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .stats-inner { gap: 28px; }
  .stat-value { font-size: 24px; }
  .btn-group { flex-direction: column; }
  .btn-group .btn { justify-content: center; }

  .section--rounded { margin: 0 12px; border-radius: 24px; }
  .cta-banner { border-radius: 24px 24px 0 0; }
  .section--gray, .section--blue, .section--navy, .section--dark, .section--teal { border-radius: 24px 24px 0 0; margin-top: 16px; }
  .hero--full { border-radius: 0 0 24px 24px; }
  .offers-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   BLOCK STYLE VARIATIONS
   ======================================== */

/* Button: Outline Teal */
.wp-block-button.is-style-outline-teal .wp-block-button__link {
  background: transparent;
  color: var(--teal-dark);
  border: 1.5px solid var(--teal-dark);
}
.wp-block-button.is-style-outline-teal .wp-block-button__link:hover {
  background: var(--teal-dark);
  color: #fff;
}

/* Button: Outline Light */
.wp-block-button.is-style-outline-light .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

/* Button: Ghost */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--teal-dark);
  border: none;
  padding-left: 0;
  padding-right: 0;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  opacity: 0.7;
}

/* Group: Card */
.wp-block-group.is-style-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--wp--custom--shadow--sm);
  padding: 32px 28px;
}

/* Group: Card with Hover */
.wp-block-group.is-style-card-hover {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--wp--custom--shadow--sm);
  padding: 32px 28px;
  transition: all 0.3s var(--wp--custom--ease);
}
.wp-block-group.is-style-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--custom--shadow--lg);
}

/* List: Checkmark */
.wp-block-list.is-style-checkmark {
  list-style: none;
  padding-left: 0;
}
.wp-block-list.is-style-checkmark li {
  position: relative;
  padding-left: 28px;
}
.wp-block-list.is-style-checkmark li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(53,86,95,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2335565F' d='M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* List: No Bullets */
.wp-block-list.is-style-none {
  list-style: none;
  padding-left: 0;
}

/* Separator: Teal Accent */
.wp-block-separator.is-style-teal {
  border-color: var(--teal-dark);
  border-width: 2px;
  max-width: 60px;
}

/* Shadow utility classes */
.has-shadow-sm { box-shadow: 0 1px 4px rgba(31,41,43,0.05); }
.has-shadow-md { box-shadow: 0 4px 16px rgba(31,41,43,0.07); }
.has-shadow-lg { box-shadow: 0 8px 32px rgba(31,41,43,0.10); }
.has-shadow-xl { box-shadow: 0 16px 48px rgba(31,41,43,0.12); }

/* ── Breadcrumb Bar ── */
.breadcrumb-bar {
  background: var(--white, #fff);
  padding: 0;
  margin-top: var(--nav-h, 72px);
  border-bottom: 1px solid var(--gray-200);
}
.admin-bar .breadcrumb-bar {
  margin-top: calc(var(--nav-h, 72px) + 32px);
}
@media (max-width: 782px) {
  .admin-bar .breadcrumb-bar {
    margin-top: calc(var(--nav-h, 72px) + 46px);
  }
}
.breadcrumb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.breadcrumb {
  font-size: 13px;
  color: var(--gray-400);
  margin: 0;
  padding: 11px 0;
}
.breadcrumb a {
  color: var(--gray-400);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--teal-dark);
}
.breadcrumb-sep {
  margin: 0 8px;
  opacity: 0.5;
}
.breadcrumb-current {
  color: var(--near-black);
}

/* ── Single Blog Post ── */
.single-post-wrap {
  padding: 48px 0 80px;
  max-width: 900px;
  margin: 0 auto;
}
.single-post-header {
  text-align: center;
  margin-bottom: 40px;
}
.single-post-category a {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--teal-dark);
  text-decoration: none;
  margin-bottom: 16px;
}
.single-post-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--near-black);
  line-height: 1.2;
  margin-bottom: 12px;
}
.single-post-date {
  font-size: 14px;
  color: var(--gray-400);
}
.single-post-image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
}
.single-post-image img {
  width: 100%;
  height: auto;
  display: block;
}
.single-post-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--gray-700);
}
.single-post-content h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--near-black);
  margin-top: 48px;
  margin-bottom: 16px;
}
.single-post-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--near-black);
  margin-top: 32px;
  margin-bottom: 12px;
}
.single-post-content p {
  margin-bottom: 24px;
}
.single-post-content img {
  border-radius: 8px;
  margin: 32px 0;
}
.single-post-content a {
  color: var(--teal-dark);
  text-decoration: underline;
}
.single-post-content ul,
.single-post-content ol {
  margin-bottom: 24px;
  padding-left: 24px;
}
.single-post-content li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .single-post-title { font-size: 1.75rem; }
  .single-post-wrap { padding: 32px 20px 60px; }
}

/* ============================================================
   Scroll-triggered entrance animations
   ============================================================ */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid / column children inside animated parents */
.animate-on-scroll .wp-block-column,
.animate-on-scroll .card,
.animate-on-scroll .team-card,
.animate-on-scroll .blog-card,
.animate-on-scroll .service-card {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible .wp-block-column,
.animate-on-scroll.is-visible .card,
.animate-on-scroll.is-visible .team-card,
.animate-on-scroll.is-visible .blog-card,
.animate-on-scroll.is-visible .service-card {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-on-scroll .wp-block-column,
  .animate-on-scroll .card,
  .animate-on-scroll .team-card,
  .animate-on-scroll .blog-card,
  .animate-on-scroll .service-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================================
   Landing Page — Minimal Header & Footer
   ======================================================================== */

/* LP Header: logo left, phone + CTA right, no nav links */
.nav--lp .nav-links { gap: 16px; }
.nav--lp .nav-reviews { display: none; }

/* LP Footer: compact, single-row layout */
.footer--lp {
  background: var(--near-black);
  color: rgba(255,255,255,0.7);
  padding: 40px 0 24px;
}
.footer-lp-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-lp-locations {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-lp-location {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.footer-lp-location strong {
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.footer-lp-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-lp-phone {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.footer-lp-phone:hover { color: var(--white); text-decoration: none; }
.footer-lp-bottom {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  text-align: center;
}

@media (max-width: 768px) {
  .footer-lp-inner {
    flex-direction: column;
    text-align: center;
  }
  .footer-lp-locations {
    flex-direction: column;
    gap: 20px;
  }
  .footer-lp-actions {
    flex-direction: column;
    gap: 12px;
  }
}

/* Insurance Grid */
.insurance-grid__header{margin-bottom:32px;text-align:center}.insurance-grid__heading{font-size:clamp(24px,3vw,32px);margin:0 0 12px}.insurance-grid__subheading{color:var(--wp--preset--color--gray-600,#4b5563);font-size:16px;margin:0 auto;max-width:640px}.insurance-grid__cards{display:grid;gap:20px;grid-template-columns:repeat(var(--ig-columns,4),1fr)}.insurance-grid__card{background:#fff;border:1px solid var(--wp--preset--color--gray-200,#e5e7eb);border-radius:12px;padding:24px;text-align:center}.insurance-grid__name{font-size:16px;font-weight:700;margin:0 0 8px}.insurance-grid__desc{color:var(--wp--preset--color--gray-500,#6b7280);font-size:14px;margin:0}@media(max-width:768px){.insurance-grid__cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.insurance-grid__cards{grid-template-columns:1fr}}

/* Finance Partners */
.finance-partners__header{margin-bottom:32px;text-align:center}.finance-partners__heading{font-size:clamp(24px,3vw,32px);margin:0 0 12px}.finance-partners__subheading{color:var(--wp--preset--color--gray-600,#4b5563);font-size:16px;margin:0 auto;max-width:640px}.finance-partners__grid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}.finance-partners__card{background:#fff;border:1px solid var(--wp--preset--color--gray-200,#e5e7eb);border-radius:12px;display:flex;flex-direction:column;padding:28px}.finance-partners__name{font-size:18px;font-weight:700;margin:0 0 8px}.finance-partners__desc{color:var(--wp--preset--color--gray-600,#4b5563);font-size:15px;margin:0 0 16px}.finance-partners__features{flex:1;list-style:none;margin:0 0 24px;padding:0}.finance-partners__features li{font-size:14px;margin-bottom:8px;padding-left:24px;position:relative}.finance-partners__features li:before{color:var(--wp--preset--color--green-600,#16a34a);content:"✓";font-weight:700;left:0;position:absolute}.finance-partners__cta{margin-top:auto}@media(max-width:768px){.finance-partners__grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.finance-partners__grid{grid-template-columns:1fr}}

/* Membership Plan */
.membership-plan{align-items:flex-start;display:flex;gap:48px}.membership-plan__content{flex:1}.membership-plan__eyebrow{color:var(--wp--preset--color--gray-500,#6b7280);display:block;font-size:13px;font-weight:600;letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase}.membership-plan__heading{font-size:clamp(24px,3vw,32px);margin:0 0 16px}.membership-plan__desc{color:var(--wp--preset--color--gray-700,#374151);font-size:16px;margin:0 0 16px}.membership-plan__features{list-style:none;margin:0 0 24px;padding:0}.membership-plan__features li{font-size:15px;margin-bottom:10px;padding-left:28px;position:relative}.membership-plan__features li:before{color:var(--wp--preset--color--green-600,#16a34a);content:"✓";font-weight:700;left:0;position:absolute}.membership-plan__pricing-card{border:1px solid var(--wp--preset--color--blue-300,#93c5fd);border-radius:16px;min-width:300px;padding:28px;text-align:center}.membership-plan__pricing-eyebrow{color:var(--wp--preset--color--gray-500,#6b7280);display:block;font-size:13px;font-weight:600;letter-spacing:.06em;margin-bottom:20px;text-transform:uppercase}.membership-plan__tiers{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:20px}.membership-plan__tier{background:var(--wp--preset--color--blue-50,#eff6ff);border-radius:8px;padding:20px}.membership-plan__tier-label{color:var(--wp--preset--color--blue-600,#2563eb);font-size:12px;font-weight:700;margin-bottom:4px}.membership-plan__tier-price{color:var(--wp--preset--color--gray-900,#111827);font-size:28px;font-weight:700;line-height:1}.membership-plan__family-note,.membership-plan__tier-period{color:var(--wp--preset--color--gray-500,#6b7280);font-size:13px}.membership-plan__family-note{margin:0 0 16px}.membership-plan__pricing-cta{justify-content:center;width:100%}@media(max-width:768px){.membership-plan{flex-direction:column}.membership-plan__pricing-card{min-width:100%}}

/* Uber Health Terms */
.uber-health-terms{align-items:flex-start;background:var(--wp--preset--color--blue-50,#eff6ff);border-radius:16px;display:flex;gap:24px;padding:32px}.uber-health-terms__icon{flex-shrink:0;font-size:36px;line-height:1}.uber-health-terms__heading{font-size:20px;font-weight:700;margin:0 0 8px}.uber-health-terms__desc{color:var(--wp--preset--color--gray-700,#374151);font-size:15px;margin:0 0 16px}.uber-health-terms__list{list-style:none;margin:0 0 16px;padding:0}.uber-health-terms__list li{font-size:14px;margin-bottom:6px;padding-left:24px;position:relative}.uber-health-terms__list li:before{color:var(--wp--preset--color--green-600,#16a34a);content:"✓";font-weight:700;left:0;position:absolute}.uber-health-terms__eligibility{color:var(--wp--preset--color--gray-500,#6b7280);font-size:13px;font-style:italic;margin:0 0 16px}@media(max-width:640px){.uber-health-terms{flex-direction:column;padding:24px}}

/* Spanish Badge */
.spanish-badge{align-items:center;background:var(--wp--preset--color--blue-600,#2563eb);border-radius:100px;bottom:24px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:10px 18px;position:fixed;transition:transform .2s ease;z-index:900}.spanish-badge--bottom-right{right:24px}.spanish-badge--bottom-left{left:24px}.spanish-badge__flag{font-size:18px;line-height:1}.spanish-badge:hover{transform:translateY(-2px)}@media(max-width:640px){.spanish-badge{bottom:80px;font-size:13px;padding:8px 14px}}

/* ── Card photos (service hub option cards) ── */
.card .card-photo { margin: 0 0 18px; }
.card .card-photo img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  background: var(--blue-50);
  border-radius: 12px;
  padding: 14px;
}
.card .card-photo--cover img { object-fit: cover; padding: 0; }

/* ── LP hero with rounded bottom (service hub usage) ── */
.lp-hero--rounded { border-radius: 0 0 40px 40px; }
@media (max-width: 768px) {
  .lp-hero--rounded { border-radius: 0 0 24px 24px; }
}

/* ── Insurance logo row (service hub) ── */
.insurance-logo-row { gap: 20px 36px; align-items: center; }
.insurance-logo-row .insurance-logo { margin: 0; }
.insurance-logo-row .insurance-logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  filter: grayscale(1);
  transition: opacity 0.2s ease;
}
.insurance-logo-row .insurance-logo img:hover { opacity: 1; }

/* Card action alignment: cover core button blocks inside grid cards */
.grid > .card > .wp-block-buttons:last-child { margin-top: auto; padding-top: 16px; }

/* Finance partner card logos (insurance-financing page) */
.finance-logo { height: 30px; width: auto; object-fit: contain; margin-bottom: 12px; display: block; }


/* ---- COMPACT TITLE-ONLY CARD GRIDS (e.g. Advantage Plan "All Your Dental Needs") ---- */
@media (max-width: 640px) {
  .needs-compact .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .needs-compact .card { padding: 16px 10px; }
  .needs-compact .card h3, .needs-compact .card h4 { font-size: 15px; margin: 0; }
}

/* ---- CONSENT FORM PAGES (/patient-forms/denture-repair-consent/ etc.) ---- */
.consent-doc h3 { font-size: 20px; margin: 36px 0 12px; }
.consent-doc p { margin: 0 0 14px; line-height: 1.7; }
.consent-doc ul { margin: 0 0 20px; padding-left: 22px; }
.consent-doc li { margin: 6px 0; line-height: 1.6; }
.consent-sig-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.consent-sig-row:last-child { margin-bottom: 0; }
.consent-sig-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.consent-sig-line { flex: 1 1 180px; border-bottom: 1px solid var(--gray-400, #9ca3af); min-height: 1.4em; }
.consent-sig-line--short { flex: 0 1 120px; }
@media print {
  .nav, .footer, .mobile-cta-bar, .spanish-badge, .notice-strip, .breadcrumbs, .consent-sign .card--blue { display: none !important; }
  .section { padding: 12px 0; }
}


/* ---- DOUG QA ROUND 5 (8/04) ---- */
/* #9080: wider tablet columns crop portrait headshots; taller box keeps faces whole */
@media (min-width: 641px) and (max-width: 1024px) {
  .team-headshot { height: 380px; }
}

/* #9079: fewer widows in FAQ headings and questions */
.faq-accordion__heading, .faq-accordion__question, .faq-group-title, .faq-q { text-wrap: balance; }

/* #9078: service-hub heroes (--rounded) float the photo with symmetric corners instead of the LP flush-bottom bleed */
.lp-hero--rounded.lp-hero--split { padding-bottom: 56px; }
.lp-hero--rounded .lp-hero__media { align-items: center; }
.lp-hero--rounded .lp-hero__image { border-radius: 20px; }
@media (max-width: 960px) {
  .lp-hero--rounded .lp-hero__image { border-radius: 16px; }
}

/* #9071: dismissible Se Habla Espanol badge + iOS safe-area clearance above the mobile CTA bar */
.spanish-badge__close {
  background: rgba(255,255,255,0.22); border: none; color: #fff;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0; margin-left: 2px; flex-shrink: 0;
}
.spanish-badge__close:hover { background: rgba(255,255,255,0.35); }
@media (max-width: 640px) {
  .spanish-badge { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---- DOUG QA ROUND 6 (8/04) ---- */
/* #9104: WP flow-layout injects margin-block-start on grid children (every card but the
   first), shrinking stretched cards inside their track — the "shorter Snap-On card".
   Grid gap owns the spacing; stray flow margins are noise here. */
.grid > * { margin-block-start: 0 !important; }

/* #9076 + #9104: text and card lists sat at the root 24px padding inside 32px-radius
   bands, crowding the curve. Give every rounded band real interior side padding. */
.section--gray, .section--blue, .section--navy, .section--dark, .section--teal {
  padding-left: max(40px, var(--wp--style--root--padding-left)) !important;
  padding-right: max(40px, var(--wp--style--root--padding-right)) !important;
}
@media (max-width: 640px) {
  .section--gray, .section--blue, .section--navy, .section--dark, .section--teal {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ---- CAROLINE QA ROUND (8/10) ---- */
/* #9143/#9144/#9146: logos are wide and short — the global img border-radius pills them into "circles" */
img[alt*="logo" i], img[alt*="iTero" i], img[alt*="Provider" i], .finance-logo-strip img, .insurance-logo-row img, .insurance-logo-grid img, .finance-logo, .finance-partners__logo { border-radius: 0 !important; }

/* #9149: carousel card width lives here too — frontend.css is reliably fresh (?ver), block CSS was cache-stuck at ver 1.0.0 */
.team-carousel__track > .team-card { width: 420px; flex: 0 0 420px; }
@media (max-width: 768px) { .team-carousel__track > .team-card { width: 340px; flex: 0 0 340px; } }


/* ---- CAROLINE QA ROUND (8/12) ---- */
/* #9150: --nav-h covers only the nav; the alert bar above it overlapped page tops.
   --chrome-h is measured by nav-enhancements.js; fallback adds the alert strip height. */
.team-detail .breadcrumb-bar { margin-top: var(--chrome-h, calc(var(--nav-h, 72px) + 48px)); }
.admin-bar .team-detail .breadcrumb-bar { margin-top: calc(var(--chrome-h, calc(var(--nav-h, 72px) + 48px)) + 32px); }

/* ---- CAROLINE QA ROUND (8/13) ---- */
/* #9176: round the card photo container itself so every treatment inside stays clipped */
.card .card-photo { border-radius: 12px; overflow: hidden; }
/* #9182: taller card images, anchored toward faces (was 260px center-crop, cutting heads) */
.offer-accordion__photo img { max-height: 320px; object-position: 50% 25%; }

/* ---- CAROLINE QA ROUND (8/14) ---- */
/* #9194: page-top clearance under alert bar + nav was ~28px short when the JS measure is skipped */
.team-detail .breadcrumb-bar { margin-top: var(--chrome-h, calc(var(--nav-h, 72px) + 76px)); }
/* #9192: give hover shadows + lift room inside the clipping scroll track */
.team-carousel__track { padding-top: 16px; padding-bottom: 28px; }
/* #9193: force card image height in section-with-cards (aspect ratio was keeping them short) */
.wp-block-island-dental-section-with-cards .offer-accordion__photo img { height: 300px; max-height: 300px; object-fit: cover; }


/* ==================================================================
   JOHN'S MOBILE CLEANUP ROUND (8/14) — #9198 #9199 #9200
   ================================================================== */

/* ---- #9199: UNIFIED CARD IMAGE SYSTEM ----
   One pattern everywhere: the image fills the card top edge-to-edge,
   top corners follow the card radius, bottom is flat. */
.card > .card-photo:first-child {
  margin: -28px -28px 20px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}
.card[style*="36px"] > .card-photo:first-child { margin: -36px -36px 20px; }
.card > .card-photo:first-child img { border-radius: 0; width: 100%; display: block; }
.card > .card-photo--cover:first-child img { height: 240px; object-fit: cover; padding: 0; background: none; }
.card > .card-photo:not(.card-photo--cover):first-child img { height: 190px; object-fit: contain; background: var(--blue-50); padding: 14px; }
.service-card > img:first-child {
  width: calc(100% + 56px) !important;
  max-width: none !important;
  margin: -28px -28px 8px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* ---- #9198: Difference rows stack image-first on mobile ---- */
@media (max-width: 782px) {
  .diff-photo { order: -1; }
}

/* ---- #9200: card lists become swipeable carousels on mobile ---- */
@media (max-width: 640px) {
  .grid:has(> .card), .grid:has(> .service-card), .grid:has(> a.service-card) {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid:has(> .card)::-webkit-scrollbar,
  .grid:has(> .service-card)::-webkit-scrollbar,
  .grid:has(> a.service-card)::-webkit-scrollbar { display: none; }
  .grid:has(> .card) > .card,
  .grid:has(> .service-card) > .service-card,
  .grid:has(> a.service-card) > a.service-card {
    flex: 0 0 84%;
    max-width: 360px;
    scroll-snap-align: center;
  }
  /* the compact Advantage list stays a 2-col grid on purpose (#9072) */
  .needs-compact .grid { display: grid; overflow: visible; padding-bottom: 0; }
  .needs-compact .grid > .card { max-width: none; }
  /* faces stay in frame inside swipe cards */
  .grid .card:not(.card--flat) img, .grid .service-card img { object-position: 50% 22%; }
}

/* ---- #9309-9324: named card lists stack vertically on mobile ----
   Doug's call 2026-09-03, overriding the #9200 default above for the sections
   Caroline flagged. Opt-in per section via the `stack-mobile` class (raw markup)
   or the section-with-cards `gridClass` attribute — same shape as the
   `.needs-compact` opt-out that already lives in the #9200 block.
   The :has() is carried into the child selectors deliberately: without it these
   tie #9200's own `.grid:has(> .card) > .card` on specificity and would depend
   purely on source order. */
@media (max-width: 640px) {
  .grid.stack-mobile:has(> .card),
  .grid.stack-mobile:has(> .service-card),
  .grid.stack-mobile:has(> a.service-card) {
    display: grid;
    /* minmax(0, 1fr), NOT 1fr. A bare 1fr is minmax(auto, 1fr), and that auto
       minimum refuses to shrink below the widest card's min-content width — on
       /services/invisalign-orthodontics/ that produced a single 331px track
       inside a 286px container, so the section still scrolled while reporting
       display:grid. Verified on staging 2026-09-03. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    overflow-x: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .grid.stack-mobile:has(> .card) > .card,
  .grid.stack-mobile:has(> .service-card) > .service-card,
  .grid.stack-mobile:has(> a.service-card) > a.service-card {
    flex: none;
    max-width: none;
    scroll-snap-align: none;
    /* same reason: let the card shrink inside the track */
    min-width: 0;
  }
}

/* ---- #9325: scroll affordance for the card carousels that remain ----
   Buttons are injected by assets/js/card-carousel.js only into grids that
   actually overflow, so a grid that fits gets no controls. Deliberately NOT
   named .carousel-arrow/.carousel-prev: those already exist in
   landing-pages.css for the fade-slide galleries, and reusing a theme class
   across two contexts is what caused the .team-filter white-on-white bug. */
.card-carousel-nav {
  display: none;
}
@media (max-width: 640px) {
  .card-carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }
  .card-carousel-nav__btn {
    /* 44px tap target (mobile non-negotiable, CLAUDE.md 6) */
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background: var(--white, #fff);
    /* gray-500 on white = 5.37:1, and the glyph is 2px-stroked at 18px */
    border: 2px solid var(--gray-500, #6e6a64);
    color: var(--gray-600, #504c47);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  }
  .card-carousel-nav__btn:hover {
    background: var(--teal-dark, #35565F);
    border-color: var(--teal-dark, #35565F);
    color: var(--white, #fff);
  }
  .card-carousel-nav__btn:focus-visible {
    outline: 3px solid var(--teal-dark, #35565F);
    outline-offset: 2px;
  }
  .card-carousel-nav__btn[disabled] {
    opacity: 0.32;
    cursor: default;
  }
  .card-carousel-nav__btn svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  /* On the dark/teal bands the outline-on-white pill would fight the band. */
  .section--navy .card-carousel-nav__btn,
  .section--dark .card-carousel-nav__btn,
  .section--teal .card-carousel-nav__btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--white, #fff);
  }
  .section--navy .card-carousel-nav__btn:hover,
  .section--dark .card-carousel-nav__btn:hover,
  .section--teal .card-carousel-nav__btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--white, #fff);
  }
  .section--navy .card-carousel-nav__btn:focus-visible,
  .section--dark .card-carousel-nav__btn:focus-visible,
  .section--teal .card-carousel-nav__btn:focus-visible {
    outline-color: var(--white, #fff);
  }
  /* A stacked section is not a carousel — never show controls for one. */
  .grid.stack-mobile + .card-carousel-nav { display: none; }

  /* #9331 item 2: the arrows sat 24 / 40 / 48px below their own carousel
     depending on where it lived, which read as "unevenly positioned".
     Cause was card-carousel.js itself: inserting the nav after the grid makes
     the grid stop matching :last-child, which switches ON
     `.grid:not(:last-child) { margin-bottom: 40px }` (L696) — a margin that
     was not there before the arrows existed. The Annual Membership Plans grid
     additionally carries an INLINE margin-bottom, which no selector can beat,
     hence the !important here.
     So: take the row's bottom margin back, give the nav one fixed gap, and let
     the nav inherit L696's own :not(:last-child) logic so the spacing to
     whatever follows is unchanged. Verified on staging: gaps 24/40/48 -> 30/30/30. */
  .grid:has(+ .card-carousel-nav) { margin-bottom: 0 !important; }
  .card-carousel-nav { margin-top: 12px; }
  .card-carousel-nav:not(:last-child) { margin-bottom: 40px; }
}

/* ---- #9315: breadcrumb links met only 2.97:1 on white (AA needs 4.5) ----
   Measured on staging 2026-09-03 across 10 pages. gray-400 #9a958e -> gray-500
   #6e6a64 takes it to 5.37:1. One palette step darker; no layout change.
   Both breadcrumb rulesets are updated — the .breadcrumb at L843 and the
   .breadcrumb-bar one at L1605 — or the later definition just wins it back. */
.breadcrumb,
.breadcrumb a { color: var(--gray-500, #6e6a64); }
/* The separator is decorative, but 1.27:1 read as a rendering artifact. */
.breadcrumb-sep { color: var(--gray-400, #9a958e); opacity: 1; }

/* ---- #9312 / #9316: the CTA banner's secondary button was invisible ----
   .btn-outline paints teal-dark text + teal-dark border, and .cta-banner paints
   a linear-gradient that STARTS at that same teal-dark — so "Call (516)
   261-5545" rendered at ~1:1 against its own background while the white
   primary button beside it looked fine. Verified on staging desktop 2026-09-03
   (pediatric + periodontics screenshots).
   Fixed here rather than in content because 52 published posts carry
   cta-banner with secondaryCtaStyle:"outline" — this repairs every one, and
   scoping under .cta-banner keeps .btn-outline unchanged everywhere else
   (it is a correct 7.93:1 on the white and cream sections). */
.cta-banner .btn-outline {
  color: var(--white, #fff);
  border-color: rgba(255, 255, 255, 0.55);
}
.cta-banner .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--white, #fff);
  color: var(--white, #fff);
}


/* ---- MOBILE BEST-PRACTICE PASS (8/14, from the Playwright audit) ----
   Verified against live mobile rendering (iPhone 13 viewport, staging). */

/* Anchor links (#options, #plans, #treatment…) land below the fixed chrome instead of under it */
:target, [id] { scroll-margin-top: calc(var(--nav-h, 72px) + 64px); }

@media (max-width: 640px) {
  /* iOS zooms any focused input under 16px — kill the zoom without changing the design */
  input, select, textarea { font-size: 16px !important; }

  /* Tap targets: footer link lists and alert-bar actions were 18-20px tall (guideline: 44px) */
  .footer a { display: inline-block; padding: 8px 0; }
  .footer .footer-social a { padding: 8px; }
  .idc-alert-bar a { display: inline-block; padding: 8px 4px; }
  .breadcrumb a { display: inline-block; padding: 8px 2px; }
}

/* Card-system addendum: portrait-safe crop for cover photos + the 20/16 padded specialist cards */
.card > .card-photo--cover:first-child img { object-position: 50% 25%; }
.card[style*="20px 16px"] > .card-photo:first-child { margin: -20px -16px 16px; }

/* ---- #9311: the About team rows stack on mobile ----
   These rows are NOT `.grid`, so the #9200 carousel rule and the .stack-mobile
   opt-out above never applied to them. team-row emits .team-track-wrap (a
   full-bleed 100vw scroller) around a flex .team-track of 420px cards, so the
   horizontal scroll here comes from that mechanism instead and has to be
   unwound on its own terms.
   Scoped to team-row's markup, which is safe to generalise: team-carousel uses
   BEM (.team-carousel__track / .team-card__*) and never emits .team-track-wrap,
   and team-row is used on exactly one post (About, 15) — so this cannot reach
   the roster carousels on /team/, /franklin-square/ or /levittown/. Note
   .team-card IS shared by both blocks, hence the .team-track parent on every
   card selector (CLAUDE.md 6, the .team-filter collision).
   Ticket #9311 named only the General Dentists row; extended to all four rows
   on Doug's call 2026-09-03, since one stacked row above three swiping ones
   read as a bug rather than a decision. */
@media (max-width: 640px) {
  .team-track-wrap {
    overflow-x: visible;
    width: auto;
    margin-left: 0;
  }
  .team-track {
    flex-direction: column;
    width: auto;
    gap: 16px;
    padding: 16px 0 24px;
  }
  .team-track > .team-card {
    flex: 0 0 auto;
    width: 100%;
    /* The card is a 3fr/4fr photo|info split built for a 420px carousel card.
       At full mobile width (254px inside the dark band) that squeezed the info
       column to ~145px: the name wrapped to two lines and "Rutgers School of
       Dental Medicine" broke one word per line. Stacked, it becomes a single
       column — photo on top, edge to edge, which is what the unified
       card-image system does everywhere else (CLAUDE.md 6). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .team-track > .team-card .team-card-photo {
    min-height: 0;
    height: 240px;
  }
  /* render.php puts width/height/object-fit/object-position inline on the img,
     and an inline style outranks any selector — hence !important here. 50% 25%
     is the face-safe crop from the card-image system. */
  .team-track > .team-card .team-card-photo img {
    height: 100% !important;
    object-position: 50% 25% !important;
  }
  .team-track > .team-card .team-card-info {
    padding: 20px 20px 24px;
    justify-content: flex-start;
  }
}