/*
 lvi/hero
 Full-width band with a 1360px inner. Layouts: image (4:3 right), text,
 centered, slot (InnerBlocks panel right), photo (full-bleed image behind a
 panel). Bands: sand (cream-2), cream (page), dark (deep-teal palette class =
 context flip); on the photo layout the band is the panel's colour.
========================================================================== */
:root .lvi-hero {
  --hero-pad-top: 76px;
  --hero-pad-bottom: 72px;
  --hero-radius: 24px;
  box-sizing: border-box;
}
:root .lvi-hero.has-breadcrumb {
  --hero-pad-top: 28px;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero {
    --hero-pad-top: 40px;
    --hero-pad-bottom: 48px;
  }
  :root .lvi-hero.has-breadcrumb {
    --hero-pad-top: 20px;
  }
}
:root .lvi-hero__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--hero-pad-top) var(--wp--custom--spacing--outer-x) var(--hero-pad-bottom);
  box-sizing: border-box;
}
:root .lvi-hero__breadcrumb {
  padding: 0;
  margin-bottom: 40px;
  font-size: 14px;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero__breadcrumb {
    margin-bottom: 28px;
  }
}
:root .lvi-hero {
  /* Grid: copy + media / slot */
}
:root .lvi-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px clamp(32px, 5vw, 64px);
  align-items: center;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero__grid {
    grid-template-columns: 1fr;
  }
}
:root .lvi-hero--text .lvi-hero__grid, :root .lvi-hero--centered .lvi-hero__grid {
  grid-template-columns: 1fr;
}
:root .lvi-hero--slot .lvi-hero__grid {
  grid-template-columns: 1.08fr 1fr;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero--slot .lvi-hero__grid {
    grid-template-columns: 1fr;
  }
}
:root .lvi-hero {
  /* Copy */
}
:root .lvi-hero__copy {
  min-width: 0;
  max-width: 820px;
}
:root .lvi-hero--text .lvi-hero__copy {
  max-width: 760px;
}
:root .lvi-hero {
  /* Surgeon finder: the doctors filter panel, full width under the copy */
}
:root .lvi-hero--finder {
  --hero-pad-bottom: 56px;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero--finder {
    --hero-pad-bottom: 40px;
  }
}
:root .lvi-hero__finder {
  margin-top: 44px;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero__finder {
    margin-top: 32px;
  }
}
:root .lvi-hero--centered .lvi-hero__copy {
  max-width: 66ch;
  margin-inline: auto;
  text-align: center;
}
:root .lvi-hero--centered .lvi-hero__copy .lvi-hero__buttons {
  justify-content: center;
}
:root .lvi-hero--centered .lvi-hero__copy .lvi-hero__intro,
:root .lvi-hero--centered .lvi-hero__copy .lvi-hero__fine {
  margin-inline: auto;
}
:root .lvi-hero__eyebrow {
  margin-bottom: 20px;
}
:root .lvi-hero {
  /* Offer badge: the designs' lime-bordered box above the heading, title + expiry
     (lvi_hero_offer_badge()); the border takes the context accent at 60% */
}
:root .lvi-hero__offer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 22px;
  padding: 10px 16px;
  border: 1.5px solid color-mix(in srgb, var(--lvi-accent) 60%, transparent);
  border-radius: 10px;
  font-family: var(--wp--preset--font-family--primary);
}
:root .lvi-hero__offer[hidden] {
  display: none;
}
:root .lvi-hero__offer-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--lvi-accent);
}
@media screen and (max-width: 599px) {
  :root .lvi-hero__offer-text {
    font-size: 18px;
  }
}
:root .lvi-hero__offer-note {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lvi-text);
  white-space: nowrap;
}
:root .lvi-hero__offer-note[hidden] {
  display: none;
}
:root .lvi-hero__offer--empty {
  opacity: 0.5;
}
:root .lvi-hero__heading {
  font-size: var(--wp--preset--font-size--xxx-large);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  text-wrap: balance;
}
:root .lvi-hero__heading--empty {
  opacity: 0.4;
}
:root .lvi-hero--dark .lvi-hero__heading, :root .lvi-hero--slot .lvi-hero__heading {
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.03;
}
:root .lvi-hero--centered .lvi-hero__heading {
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.06;
  margin-bottom: 16px;
}
:root .lvi-hero__intro {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--lvi-intro);
  max-width: 48ch;
  margin: 0 0 32px;
}
:root .lvi-hero__intro > p {
  margin: 0;
}
:root .lvi-hero__intro > p + p {
  margin-top: 12px;
}
:root .lvi-hero__intro a {
  color: var(--lvi-link);
}
:root .lvi-hero--text .lvi-hero__intro, :root .lvi-hero--centered .lvi-hero__intro {
  max-width: 56ch;
  margin-bottom: 0;
}
:root .lvi-hero--text .lvi-hero__intro:has(+ *), :root .lvi-hero--centered .lvi-hero__intro:has(+ *) {
  margin-bottom: 32px;
}
:root .lvi-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 599px) {
  :root .lvi-hero__buttons:has(> :nth-child(2)) {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 12px;
  }
  :root .lvi-hero__buttons:has(> :nth-child(2)) > .btn {
    width: 100%;
  }
  :root .lvi-hero__buttons:has(> :nth-child(2)) > .btn-link {
    padding-block: 10px;
  }
}
:root .lvi-hero__fine {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: 13px;
  line-height: 1.6;
}
:root .lvi-hero__fine > p {
  margin: 0;
}
:root .lvi-hero__fine > p + p {
  margin-top: 6px;
}
:root .lvi-hero {
  /* Media */
}
:root .lvi-hero__media {
  position: relative;
  min-width: 0;
}
:root .lvi-hero__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--hero-radius);
  aspect-ratio: 4/3;
  background: var(--lvi-surface-alt);
}
:root .lvi-hero__figure picture {
  display: block;
  height: 100%;
}
:root .lvi-hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root .lvi-hero--dark .lvi-hero__figure {
  background: rgba(244, 241, 232, 0.08);
}
:root .lvi-hero {
  /* Review badge on the image (lvi_hero_review_badge()): the rating, then gold stars over
     "from 37,000+ patient reviews on Google" */
}
:root .lvi-hero__badge {
  position: absolute;
  right: -28px;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--wp--custom--border--radius-md);
  background: var(--wp--preset--color--white);
  box-shadow: 0 12px 32px rgba(0, 51, 54, 0.14);
  color: var(--wp--preset--color--slate);
}
@media screen and (max-width: 1159px) {
  :root .lvi-hero__badge {
    right: 16px;
    bottom: 16px;
  }
}
@media screen and (max-width: 575px) {
  :root .lvi-hero__badge {
    position: static;
    margin-top: 16px;
  }
}
:root .lvi-hero__badge-value {
  font-family: var(--wp--preset--font-family--primary);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--teal);
  line-height: 1;
}
:root .lvi-hero__badge-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
:root .lvi-hero__badge-stars {
  display: block;
  width: 82px;
  height: 15.5px;
  fill: var(--wp--preset--color--gold);
}
:root .lvi-hero__badge-stars-empty {
  opacity: 0.25;
}
:root .lvi-hero__badge-text {
  font-family: var(--wp--preset--font-family--primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}
:root .lvi-hero {
  /* Template extras (Phase 4): printed by the templates through lvi_hero_render()'s slots */
}
:root .lvi-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--lvi-fine);
}
:root .lvi-hero__meta a {
  color: var(--lvi-eyebrow);
  text-decoration: none;
}
:root .lvi-hero__meta a:hover {
  text-decoration: underline;
}
:root .lvi-hero__meta .eyebrow {
  margin: 0;
  font-size: 12.5px;
}
:root .lvi-hero__meta::before {
  content: none;
}
:root .lvi-hero__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
:root .lvi-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--lvi-text-strong);
}
:root .lvi-hero__rating .lvi-testimonials__stars {
  width: 84px;
  height: 15.5px;
}
:root .lvi-hero__rating a {
  color: inherit;
  text-decoration: none;
}
:root .lvi-hero__rating a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root .lvi-hero__address {
  /* Between the heading and the intro (after_heading slot): the heading's 22px
     bottom margin is pulled in so the line sits close under it */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 22px;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 16px;
  font-weight: 500;
  color: var(--lvi-link);
  text-decoration: none;
}
:root .lvi-hero__address svg {
  width: 17px;
  height: 17px;
  flex: none;
}
:root .lvi-hero__address:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root .lvi-hero__stats {
  /* Every item carries a left rule; the list is shifted left by one gutter
     and clipped so the rule on whichever item starts a row is hidden.
     Wrap-safe at any width, unlike `li + li`. */
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  margin: -4px 0 36px -45px;
  clip-path: inset(0 0 0 45px);
  list-style: none;
  padding: 0;
}
:root .lvi-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 44px;
  border-left: 1px solid var(--lvi-rule);
}
@media screen and (max-width: 859px) {
  :root .lvi-hero__stats {
    /* Stacked rows: value left, label on its baseline, rules between rows.
       Only the doctor hero has stats, and its copy column sits beside the
       portrait through the tablet range, too narrow for three across. */
    flex-direction: column;
    row-gap: 0;
    margin-left: 0;
    clip-path: none;
  }
  :root .lvi-hero__stats li {
    display: grid;
    grid-template-columns: minmax(108px, auto) 1fr;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    border-left: 0;
    border-top: 1px solid var(--lvi-rule);
  }
}
@media screen and (max-width: 859px) and (max-width: 599px) {
  :root .lvi-hero__stats li {
    grid-template-columns: minmax(96px, auto) 1fr;
  }
}
@media screen and (max-width: 859px) {
  :root .lvi-hero__stats li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  :root .lvi-hero__stats li:last-child {
    padding-bottom: 0;
  }
}
:root .lvi-hero__stat-value {
  font-family: var(--wp--preset--font-family--primary);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--lvi-heading);
}
@media screen and (max-width: 859px) {
  :root .lvi-hero__stat-value {
    font-size: 26px;
  }
}
@media screen and (max-width: 599px) {
  :root .lvi-hero__stat-value {
    font-size: 24px;
  }
}
:root .lvi-hero__stat-label {
  font-family: var(--wp--preset--font-family--primary);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--lvi-fine);
}
@media screen and (max-width: 859px) {
  :root .lvi-hero__stat-label {
    font-size: 14px;
  }
}
:root .lvi-hero__chips-label {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lvi-fine);
}
:root .lvi-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
:root .lvi-hero__chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lvi-surface);
  border: 1px solid rgba(0, 51, 54, 0.14);
  font-family: var(--wp--preset--font-family--primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--lvi-text-strong);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
:root .lvi-hero__chips a svg {
  width: 15px;
  height: 15px;
  color: var(--lvi-accent);
  flex: none;
}
:root .lvi-hero__chips a:hover {
  border-color: var(--lvi-rule-hover);
  color: var(--lvi-link);
}
:root .lvi-hero__pill {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 51, 54, 0.85);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--primary);
  font-size: 14px;
  font-weight: 600;
}
:root .lvi-hero__pill svg {
  width: 15px;
  height: 15px;
  color: var(--wp--preset--color--lime);
}
:root .lvi-hero {
  /* Doctor bio: portrait column on the left, copy right. The photo is only
     a 320px column, so the pair stays side by side through the tablet range
     (the column shrinks) and stacks below $phone, where the photo caps at 320px. */
}
:root .lvi-hero--doctor .lvi-hero__grid {
  grid-template-columns: 320px 1fr;
  gap: 40px 60px;
  align-items: start;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero--doctor .lvi-hero__grid {
    grid-template-columns: clamp(200px, 34vw, 320px) 1fr;
    gap: 32px;
  }
}
@media screen and (max-width: 599px) {
  :root .lvi-hero--doctor .lvi-hero__grid {
    grid-template-columns: 1fr;
  }
}
:root .lvi-hero--doctor .lvi-hero__media {
  order: -1;
}
:root .lvi-hero--doctor.lvi-hero--no-media .lvi-hero__grid {
  grid-template-columns: 1fr;
}
:root .lvi-hero--doctor .lvi-hero__figure {
  aspect-ratio: 4/5;
  background: var(--lvi-surface);
  border: 1px solid var(--lvi-rule-soft);
  box-shadow: none;
}
@media screen and (max-width: 599px) {
  :root .lvi-hero--doctor .lvi-hero__figure {
    max-width: 320px;
  }
}
:root .lvi-hero--doctor .lvi-hero__heading {
  font-size: clamp(36px, 3.6vw, 50px);
  line-height: 1.03;
}
:root .lvi-hero--doctor .lvi-hero__intro {
  max-width: 52ch;
}
:root .lvi-hero {
  /* Center: 4 / 3.4 photo with the city pill; the hero shadow the design gives it */
}
:root .lvi-hero--center .lvi-hero__figure {
  aspect-ratio: 4/3.4;
  box-shadow: 0 20px 50px rgba(0, 51, 54, 0.14);
}
:root .lvi-hero {
  /* Image hero (block): the pair stays side by side through the tablet range, the
     photo filling the copy's height; phones stack it as a banner. Not the center and
     state heroes, which use the image layout but stack below $stack (their rule below);
     :where() keeps the selector's weight as it was. */
}
@media screen and (max-width: 859px) {
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 28px;
    align-items: stretch;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__media {
    display: flex;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__figure {
    flex: 1;
    position: relative;
    aspect-ratio: auto;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__figure picture,
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__figure img {
    position: absolute;
    inset: 0;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__heading {
    font-size: clamp(32px, 5vw, 40px);
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge {
    left: 14px;
    right: 14px;
    bottom: 14px;
    gap: 12px;
    padding: 14px 16px;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge-value {
    font-size: 28px;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge-text {
    font-size: 13.5px;
  }
}
@media screen and (max-width: 599px) {
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__media {
    display: block;
    order: -1;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__figure {
    aspect-ratio: 2/1;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__figure img {
    object-position: 50% 25%;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge {
    position: absolute;
    left: auto;
    right: 10px;
    bottom: 10px;
    margin: 0;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge-value {
    font-size: 24px;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge-body {
    gap: 4px;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge-stars {
    width: 64px;
    height: 12px;
  }
  :root .lvi-hero--image:not(:where(.lvi-hero--center, .lvi-hero--state)) .lvi-hero__badge-text {
    font-size: 12px;
    line-height: 1.35;
  }
}
:root .lvi-hero {
  /* Center and state: once stacked the photo is a short banner above the copy
     (21 / 9, 2 / 1 on phones) */
}
@media screen and (max-width: 859px) {
  :root .lvi-hero--center .lvi-hero__grid, :root .lvi-hero--state .lvi-hero__grid {
    gap: 32px;
  }
  :root .lvi-hero--center .lvi-hero__media, :root .lvi-hero--state .lvi-hero__media {
    order: -1;
  }
  :root .lvi-hero--center .lvi-hero__figure, :root .lvi-hero--state .lvi-hero__figure {
    aspect-ratio: 21/9;
  }
  :root .lvi-hero--center .lvi-hero__figure img, :root .lvi-hero--state .lvi-hero__figure img {
    object-position: 50% 25%;
  }
}
@media screen and (max-width: 599px) {
  :root .lvi-hero--center .lvi-hero__figure, :root .lvi-hero--state .lvi-hero__figure {
    aspect-ratio: 2/1;
  }
}
:root .lvi-hero--center .lvi-hero__intro {
  max-width: 52ch;
}
:root .lvi-hero {
  /* Story: centered copy in a 1020px measure; the video frame below overlaps the band by 36px */
}
:root .lvi-hero--story .lvi-hero__inner {
  max-width: 1020px;
}
:root .lvi-hero {
  /* Article: the blog post header, 860px measure */
}
:root .lvi-hero--article .lvi-hero__inner {
  max-width: 860px;
}
:root .lvi-hero--article .lvi-hero__copy {
  max-width: none;
}
:root .lvi-hero--article .lvi-hero__intro {
  max-width: 58ch;
}
:root .lvi-hero--article .lvi-hero__heading {
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.08;
  text-wrap: pretty;
}
:root .lvi-hero--article.has-breadcrumb {
  --hero-pad-bottom: 48px;
}
:root .lvi-hero--article.has-cover {
  --hero-pad-bottom: 84px;
}
@media screen and (max-width: 859px) {
  :root .lvi-hero--article.has-cover {
    --hero-pad-bottom: 68px;
  }
}
:root .lvi-hero {
  /* Milestone: text hero in an 820px measure, no bottom rule (the stepper band follows) */
}
:root .lvi-hero--milestone .lvi-hero__copy {
  max-width: 820px;
}
:root .lvi-hero--milestone.has-breadcrumb {
  --hero-pad-bottom: 56px;
}
:root .lvi-hero {
  /* Blog archive: text hero with the category chips under the lede */
}
:root .lvi-hero--blog .lvi-hero__heading {
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1.05;
}
:root .lvi-hero--blog .lvi-hero__copy {
  max-width: none;
}
:root .lvi-hero--blog.has-breadcrumb {
  --hero-pad-bottom: 56px;
}
:root .lvi-hero {
  /* Slot (InnerBlocks) */
}
:root .lvi-hero__slot {
  min-width: 0;
}
:root .lvi-hero__slot--panel {
  background: var(--wp--preset--color--white);
  border-radius: var(--hero-radius);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  box-shadow: var(--wp--preset--shadow--panel);
  color: var(--wp--preset--color--slate);
  --lvi-heading: var(--wp--preset--color--deep-teal);
  --lvi-text: var(--wp--preset--color--slate);
  --lvi-text-strong: var(--wp--preset--color--ink);
  --lvi-intro: var(--wp--preset--color--slate);
  --lvi-eyebrow: var(--wp--preset--color--teal);
  --lvi-accent: var(--wp--preset--color--teal);
  --lvi-link: var(--wp--preset--color--teal);
  --lvi-link-hover: var(--wp--preset--color--teal-hover);
  --lvi-fine: var(--wp--preset--color--muted);
  --lvi-label: var(--wp--preset--color--muted);
  --lvi-rule: rgba(0, 51, 54, 0.12);
  --lvi-rule-soft: rgba(0, 51, 54, 0.08);
  --lvi-surface: var(--wp--preset--color--white);
  --lvi-surface-alt: var(--wp--preset--color--cream-2);
  --lvi-rule-hover: var(--wp--preset--color--teal);
  --lvi-scroll-thumb: var(--wp--preset--color--deep-teal);
  --lvi-scroll-track: rgba(0, 51, 54, 0.12);
  --lvi-chip-bg: var(--wp--preset--color--mint);
  --lvi-chip-fg: var(--wp--preset--color--teal);
  --lvi-badge-bg: var(--wp--preset--color--lime);
  --lvi-badge-fg: var(--wp--preset--color--deep-teal);
  --lvi-btn-bg: var(--wp--preset--color--deep-teal);
  --lvi-btn-fg: var(--wp--preset--color--cream);
  --lvi-btn-hover: var(--wp--preset--color--lime);
  --lvi-btn-hover-fg: var(--wp--preset--color--deep-teal);
  --lvi-outline-fg: var(--wp--preset--color--deep-teal);
  --lvi-outline-border: rgba(0, 51, 54, 0.25);
  --lvi-outline-hover-bg: var(--wp--preset--color--deep-teal);
  --lvi-outline-hover-fg: var(--wp--preset--color--cream);
  --lvi-outline-border-hover: var(--wp--preset--color--deep-teal);
  color: var(--lvi-text);
}
:root .lvi-hero__slot > .acf-innerblocks-container > *,
:root .lvi-hero__slot > * {
  margin-block: 0;
}
:root .lvi-hero__slot > .acf-innerblocks-container > * + *,
:root .lvi-hero__slot > * + * {
  margin-block-start: 18px;
}
:root .lvi-hero {
  /* Photo: the image is a full-bleed layer behind the band and the copy sits in a
     panel, cream (with a scrim on the photo) or deep teal (without), left or right;
     the breadcrumb sits on the photo above it. Same-Day LASIK handoff, 2026-09-19. */
}
:root .lvi-hero--photo {
  --hero-photo-x: 70%;
  --hero-scrim-angle: 90deg;
  --hero-photo-gap: 40px;
  --hero-pad-top: var(--hero-photo-gap);
  --hero-pad-bottom: var(--hero-photo-gap);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 680px;
  background: var(--wp--preset--color--deep-teal);
}
:root .lvi-hero--photo.has-breadcrumb {
  --hero-pad-top: var(--hero-photo-gap);
}
:root .lvi-hero--photo.lvi-hero--panel-right {
  --hero-photo-x: 30%;
  --hero-scrim-angle: 270deg;
}
@media screen and (max-width: 1159px) {
  :root .lvi-hero--photo {
    --hero-photo-gap: 32px;
    min-height: 600px;
  }
}
:root .lvi-hero--photo .lvi-hero__photo {
  position: absolute;
  inset: 0;
}
:root .lvi-hero--photo .lvi-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-photo-x) 50%;
}
:root .lvi-hero--photo:not(.lvi-hero--dark) .lvi-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--hero-scrim-angle), rgba(0, 51, 54, 0.35) 0%, rgba(0, 51, 54, 0) 60%);
}
:root .lvi-hero--photo .lvi-hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
:root .lvi-hero--photo .lvi-hero__grid {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: flex-start;
}
:root .lvi-hero--photo.lvi-hero--panel-right .lvi-hero__grid {
  justify-content: flex-end;
}
:root .lvi-hero--photo {
  /* The panel */
}
:root .lvi-hero--photo .lvi-hero__copy {
  width: min(620px, 100%);
  max-width: none;
  box-sizing: border-box;
  padding: 48px 52px;
  border-radius: var(--hero-radius);
  background: var(--wp--preset--color--cream);
  box-shadow: 0 24px 60px rgba(0, 20, 22, 0.25);
}
:root .lvi-hero--photo.lvi-hero--dark .lvi-hero__copy {
  background: var(--wp--preset--color--deep-teal);
  box-shadow: none;
}
:root .lvi-hero--photo .lvi-hero__breadcrumb {
  position: relative;
  margin: 0 0 var(--hero-photo-gap);
  color: rgba(247, 245, 239, 0.85);
  text-shadow: 0 1px 8px rgba(0, 20, 22, 0.4);
}
:root .lvi-hero--photo .lvi-hero__breadcrumb .breadcrumb_last {
  color: var(--wp--preset--color--cream);
}
:root .lvi-hero--photo .lvi-hero__eyebrow {
  margin-bottom: 16px;
}
:root .lvi-hero--photo .lvi-hero__heading {
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1.04;
  margin-bottom: 18px;
}
:root .lvi-hero--photo .lvi-hero__intro {
  font-size: 18px;
  line-height: 1.6;
  max-width: none;
  margin-bottom: 28px;
  text-wrap: pretty;
}
:root .lvi-hero--photo .lvi-hero__buttons {
  gap: 18px;
}
:root .lvi-hero--photo {
  /* Stacked (owner 2026-09-19: at the site's 860, the treatment as designed): the
     photo is a 4:3 block on top, the panel follows it full width, pulled 40px up
     over its bottom edge; no scrim */
}
@media screen and (max-width: 859px) {
  :root .lvi-hero--photo {
    --hero-photo-x: 50%;
    display: block;
    min-height: 0;
  }
  :root .lvi-hero--photo .lvi-hero__photo {
    position: relative;
    aspect-ratio: 4/3;
  }
  :root .lvi-hero--photo .lvi-hero__photo img {
    position: absolute;
    inset: 0;
  }
  :root .lvi-hero--photo:not(.lvi-hero--dark) .lvi-hero__photo::after {
    content: none;
  }
  :root .lvi-hero--photo .lvi-hero__inner {
    position: static;
    max-width: none;
    padding: 0;
    margin-top: -40px;
  }
  :root .lvi-hero--photo .lvi-hero__breadcrumb {
    position: absolute;
    top: 20px;
    left: var(--wp--custom--spacing--outer-x);
    right: var(--wp--custom--spacing--outer-x);
    margin: 0;
  }
  :root .lvi-hero--photo .lvi-hero__copy {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 36px var(--wp--custom--spacing--outer-x) 44px;
    border-radius: var(--hero-radius) var(--hero-radius) 0 0;
    box-shadow: none;
  }
  :root .lvi-hero--photo .lvi-hero__heading {
    font-size: clamp(32px, 6vw, 40px);
  }
}