@charset "UTF-8";
/* custom.CSS is compiled from custom.SCSS; make edits to the SCSS file */
/* Greco design tokens (Figma variables) */
/* gradient (background-clip: text) headings: bottom padding so descenders aren't cut off; subtracted from tuned margins */
/*
 * GLOBAL/DEFAULT
*/
/*img:is([sizes="auto" i], [sizes^="auto," i]) {
	contain-intrinsic-size: revert;
}*/
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
 * GRECO GLOBAL STYLES
 * Colors, fonts, H1-H6 sizes, buttons and inputs live in Theme Options.
 * This block covers what Theme Options can't express.
 * Fluid values interpolate 600px -> 1920px (Figma width); root font grows 16 -> 20px from 1920 to 2560 (Theme Options > Typography > Body).
*/
:root {
  --site-content-width: 106.5rem;
  /* Theme Options stores 1704px; rem lets it scale with the root above 1920px */
  --section-custom-padding: clamp(3rem, 0.95rem + 5.45vw, 7.5rem);
  /* default row padding, 48 -> 120px */
  --gold-gradient: linear-gradient(to right, #A99855, #887A44);
  --text-size: clamp(1rem, 0.89rem + 0.3vw, 1.25rem);
  /* P body: 16 -> 20px */
  --text-size-lg: clamp(1.125rem, 1.01rem + 0.3vw, 1.375rem);
  /* P body large: 18 -> 22px */
  --gap-lg: clamp(1.5rem, 1.05rem + 1.21vw, 2.5rem);
  /* 24 -> 40px, Figma heading/text gap */
  --btn-font-size: clamp(1rem, 0.77rem + 0.61vw, 1.5rem);
  /* buttons: 16 -> 24px */
  --nav-font-size: clamp(0.90625rem, 0.51rem + 0.61vw, 1rem);
  /* header nav: 14.5px @1025 -> capped at 16px from ~1285 (Figma is 20px; reduced per AM review 2026-10-09) */
  --header-btn-font-size: clamp(1rem, 0.43rem + 0.89vw, 1.5rem);
  /* header phone + CTA: 16px @1025 -> 24px @1920 */
  --marquee-font-size: clamp(1.5rem, 1.05rem + 1.21vw, 2.5rem);
  /* marquee: 24 -> 40px */
  --marquee-pad: clamp(1.5rem, 1.05rem + 1.21vw, 2.5rem);
  /* marquee band padding: 24 -> 40px */
  --footer-cta-pad: clamp(4rem, 1.27rem + 7.27vw, 10rem);
  /* contact section: 64 -> 160px */
  --footer-logo-width: clamp(15rem, 9.18rem + 15.53vw, 27.8125rem);
  /* footer logo: 240 -> 445px */
  --footer-logo-pad: clamp(3rem, 2.09rem + 2.42vw, 5rem);
  /* logo row: 48 -> 80px */
  --social-icon-size: clamp(2rem, 1.77rem + 0.61vw, 2.5rem);
  /* social icons: 32 -> 40px */
  --video-quote-size: clamp(1.75rem, 0.67rem + 2.88vw, 3.875rem);
  /* testimonial video quote: 28 -> 62px */
  --testi-gap: clamp(1.5rem, 0.36rem + 3.03vw, 5rem);
  /* testimonial column gap: 24 -> 80px */
  --media-logo-h: clamp(4.5rem, 8.33vw, 10rem);
  /* In the Media logos: 160px @1920; sized to keep 7 logos on one line from tablet up */
  --media-logo-gap: clamp(1.5rem, 3.33vw, 4rem);
  /* 64px @1920 */
  --hero-title-size: clamp(2.75rem, 0.59rem + 5.76vw, 7.5rem);
  /* internal hero H1: 44 -> 120px */
  --hero-eyebrow-size: clamp(1rem, 0.77rem + 0.61vw, 1.5rem);
  /* 16 -> 24px */
  --hero-gap: clamp(1.5rem, 1.16rem + 0.91vw, 2.25rem);
  /* 24 -> 36px between hero items (Figma 48 incl. cap-height trim) */
  --hero-pad-top: clamp(3rem, 1.41rem + 4.24vw, 6.5rem);
  /* below the header: 48 -> 104px (Figma 200 - 96 header) */
  --hero-pad-bottom: clamp(2.5rem, 1.82rem + 1.82vw, 4rem);
  /* 40 -> 64px */
  --hero-min-h: clamp(26.25rem, 20rem + 16.67vw, 40rem);
  /* internal hero: 420 -> 640px (Figma frame) */
  --sec-col-extra: clamp(0rem, -1.64rem + 4.36vw, 2.25rem);
  /* extra half-gap -> 48px..120px between section columns */
  --sec-photo-h: clamp(22rem, 13.27rem + 23.27vw, 46rem);
  /* section photos: 352 -> 736px */
  --card-h: clamp(24rem, 16.73rem + 19.39vw, 45rem);
  /* procedure cards: 384 -> 720px */
  --card-step: clamp(0rem, -4.55rem + 12.12vw, 10rem);
  /* card stagger: 0 -> 160px */
  --card-title-size: clamp(1.75rem, 1.13rem + 1.67vw, 3.05rem);
  /* card title: 28 -> 49px */
  --card-overlap: clamp(0rem, -1.36rem + 3.64vw, 3.25rem);
  /* cards overlap: 0 -> 52px (620px cards in 568px columns) */
  --card-text-pad: clamp(1rem, 0.77rem + 0.61vw, 1.5rem);
  /* card text padding: 16 -> 24px */
  --sec-pad-lg: clamp(4rem, 1.27rem + 7.27vw, 10rem);
  /* 64 -> 160px */
}
/* Fluid button text. Theme Options' button Font Size is a px/em/rem slider (set to 1rem there),
   so the clamp lives here. Selectors mirror the theme's own button-style rules. */
[type=submit]:not(.w-btn):not(.button), .navstyle_1 > .owl-nav button, .us-nav-style_1 > *, .us-btn-style_1, .navstyle_2 > .owl-nav button, .us-nav-style_2 > *, .us-btn-style_2, .us-btn-style_3 {
  font-size: var(--btn-font-size);
}
::selection {
  background: #A99855;
  color: white;
}
.l-main, .l-footer {
  font-size: var(--text-size);
}
/* Headings: H1 is white (hero); H2-H6 default to the gold gradient unless a color is set on the element */
.l-main h1:not(.has_text_color) {
  color: white;
}
.l-main :is(h2, h3, h4, h5, h6):not(.has_text_color):not([style*="color"]):not(.w-tabs-section-title), .l-footer :is(h2, h3, h4, h5, h6):not(.has_text_color):not([style*="color"]):not(.w-tabs-section-title) {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.15em;
  /* the gradient only paints inside the box: room for descenders (g, y, p) below the last line */
}
/* Turn the gradient off: alternate (olive) rows, or add .no-gradient to a row/column/element */
.color_alternate :is(h1, h2, h3, h4, h5, h6), .no-gradient :is(h1, h2, h3, h4, h5, h6) {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  padding-bottom: 0;
}
/* Text helpers (Text Block / column "Extra class name") */
.larger-text {
  font-size: var(--text-size-lg);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-content-primary);
}
.small-text {
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.25em;
}
/* Accordions: gold hairline boxes, italic Baskerville titles (Figma H6) */
.w-tabs.accordion > div > .w-tabs-section {
  border: 1px solid var(--color-content-primary);
}
.w-tabs.accordion > div > .w-tabs-section:not(:last-child) {
  margin-bottom: 1rem;
}
.w-tabs.accordion .w-tabs-section-header {
  padding: 1.5rem;
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-content-primary);
}
html {
  /*.wpb_text_column a:not(.w-btn) {
		text-decoration: underline;
	}
	&.no-touch a[href^="tel:"]:not(.w-btn) {
		cursor: text;
		pointer-events: none;
	}*/
}
html body {
  font-size: 1rem;
}
html body #pojo-a11y-toolbar {
  bottom: 1.5rem;
  top: auto !important;
}
html body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
  bottom: 0;
}
html body #pojo-a11y-toolbar:not(.pojo-a11y-toolbar-open) .pojo-a11y-toolbar-toggle {
  left: calc(100% + 1.5rem);
}
html address {
  font-style: normal;
}
html iframe, html img {
  vertical-align: middle;
}
html .lorem {
  background-color: red;
}
html a[href^="tel:"] {
  white-space: nowrap;
}
html a[href^="mailto:"] {
  word-break: break-word;
  color: inherit;
}
html .wpb_text_column + .w-separator.with_line {
  margin-top: -1.5rem;
}
html .l-main .w-image:not(:last-child), html .l-main .w-tabs:not(:last-child), html .l-main .w-video:not(:last-child), html .l-main .g-cols.vc_inner:not(:last-child), html .l-footer .w-image:not(:last-child), html .l-footer .w-tabs:not(:last-child), html .l-footer .w-video:not(:last-child), html .l-footer .g-cols.vc_inner:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
  html .l-main .w-btn-wrapper, html .l-footer .w-btn-wrapper {
    display: block;
    margin: 1rem 0 !important;
    text-align: center;
  }
  html .l-main .w-btn-wrapper.align_left, html .l-main .w-btn-wrapper.align_right, html .l-footer .w-btn-wrapper.align_left, html .l-footer .w-btn-wrapper.align_right {
    display: block;
    float: none;
  }
}
@media screen and (max-width: 600px) {
  html .l-main .w-btn-wrapper .w-btn, html .l-footer .w-btn-wrapper .w-btn {
    width: 100%;
  }
}
html .l-main .w-image > a, html .l-footer .w-image > a {
  display: inline-block;
}
html .l-main .w-hwrapper:not([class*="usg_"]) > div, html .l-footer .w-hwrapper:not([class*="usg_"]) > div {
  margin: 0.6rem;
}
.l-main > .wpb-content-wrapper:first-of-type > .l-section:first-child:not([class*="masthead"]) {
  /* mastheads handle the header offset themselves */
}
.l-main > .wpb-content-wrapper:first-of-type > .l-section:first-child:not([class*="masthead"]) .l-section-h {
  padding-top: var(--header-height);
}
.l-main > .wpb-content-wrapper:first-of-type > .l-section:first-child:not([class*="masthead"]) .l-section-img, .l-main > .wpb-content-wrapper:first-of-type > .l-section:first-child:not([class*="masthead"]) .l-section-overlay {
  top: var(--header-height);
}
[class*="ul-styled"] ul {
  margin-left: 0;
  list-style-type: none;
}
[class*="ul-styled"] ul > li {
  position: relative;
  padding-left: 1.75em;
}
[class*="ul-styled"] ul > li:before {
  font-family: fontawesome;
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--color-content-primary);
}
.ul-styled-arrow ul > li:before {
  content: "";
}
.ul-styled-check ul > li:before {
  content: "";
}
.gform_wrapper {
  /* CUSTOM RADIO/CHECKBOX BUTTONS */
}
.gform_wrapper .wpcf7-form-control-wrap {
  text-align: center;
}
.gform_wrapper .gform_validation_errors > h2.gform_submission_error {
  font-size: inherit !important;
  font-family: inherit;
}
.gform_wrapper .gform_fields {
  grid-row-gap: 1.5rem !important;
}
.gform_wrapper .gform_heading {
  display: none;
}
.gform_wrapper textarea {
  resize: none;
}
.gform_wrapper .gfield {
  vertical-align: top;
}
.gform_wrapper .gform_footer input[type="submit"] {
  width: 100%;
}
.gform_wrapper input[type="text"], .gform_wrapper input[type="radio"], .gform_wrapper textarea, .gform_wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.gform_wrapper select::-ms-expand {
  display: none;
}
.gform_wrapper .gfield_radio > [class^="gchoice"], .gform_wrapper .gfield_checkbox > [class^="gchoice"] {
  display: inline-block;
  padding: 0;
  margin-left: 0.75em;
  margin-right: 0.75em;
  line-height: 1.2;
}
@media screen and (max-width: 479px) {
  .gform_wrapper .gfield_radio > [class^="gchoice"], .gform_wrapper .gfield_checkbox > [class^="gchoice"] {
    width: initial !important;
    margin-left: 0.75em !important;
    margin-right: 0.75em !important;
  }
}
.gform_wrapper .gfield_radio input[type="radio"], .gform_wrapper .gfield_radio input[type="checkbox"], .gform_wrapper .gfield_checkbox input[type="radio"], .gform_wrapper .gfield_checkbox input[type="checkbox"] {
  display: none;
}
.gform_wrapper .gfield_radio input[type="radio"] + label, .gform_wrapper .gfield_radio input[type="checkbox"] + label, .gform_wrapper .gfield_checkbox input[type="radio"] + label, .gform_wrapper .gfield_checkbox input[type="checkbox"] + label {
  display: inline-block;
  width: 100%;
  min-width: fit-content;
  font-weight: 400;
  padding: 0.25em 0 0.25em 1.5em;
  position: relative;
}
.gform_wrapper .gfield_radio input[type="radio"] + label:before, .gform_wrapper .gfield_radio input[type="checkbox"] + label:before, .gform_wrapper .gfield_checkbox input[type="radio"] + label:before, .gform_wrapper .gfield_checkbox input[type="checkbox"] + label:before {
  content: "";
  font: normal 300 1em/1 FontAwesome;
  margin-right: 0.3em;
  position: absolute;
  left: 0;
  color: #433c22;
}
.gform_wrapper .gfield_radio input[type="radio"]:checked + label, .gform_wrapper .gfield_radio input[type="checkbox"]:checked + label, .gform_wrapper .gfield_checkbox input[type="radio"]:checked + label, .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label {
  color: #433c22;
}
.gform_wrapper .gfield_radio input[type="radio"]:checked + label:before, .gform_wrapper .gfield_radio input[type="checkbox"]:checked + label:before, .gform_wrapper .gfield_checkbox input[type="radio"]:checked + label:before, .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label:before {
  content: "";
  font-weight: 900;
}
.gform_wrapper .gfield_radio input[type="radio"]:checked + label:before {
  content: "";
  font-weight: 900;
}
.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label:before {
  content: "";
  font-weight: 900;
}
::-webkit-input-placeholder {
  opacity: 1;
}
::-moz-placeholder {
  opacity: 1;
}
:-ms-input-placeholder {
  opacity: 1;
}
::-ms-input-placeholder {
  opacity: 1;
}
::placeholder {
  opacity: 1;
}
.hours-table {
  width: 100%;
}
.hours-table .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.hours-table:not(:last-child) {
  margin-bottom: 2.5rem;
}
.adaptive-grid {
  /* fill row with as many columns as possible with columns having a minimum 16em width */
  display: -ms-grid;
  display: grid;
  gap: min(2.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
}
.adaptive-grid > div {
  margin: 0 !important;
}
.adaptive-grid img {
  border-radius: 1rem;
  aspect-ratio: 1.113;
  -o-object-fit: cover;
  object-fit: cover;
}
.adaptive-grid .w-vwrapper .wpb_text_column {
  padding: 0 1rem;
}
.dynamic-faq {
  --site-content-width: 1128px;
}
.l-header {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /*.w-socials {
		font-size: clamp(1.25rem, 2vw, 2rem);
		line-height: 1;
		color: var(--color-content-primary);

		.w-socials-item-link {
			min-width: 1em;
			line-height: 1.2;
		}
	}*/
  /*&.sticky {
	.w-vwrapper>*:not(:last-child) {
	margin-bottom: 0;
}
	.w-vwrapper > *:not(.w-hwrapper) {
	display: none;
}
}*/
}
.l-header .l-subheader.at_middle {
  background: rgba(0, 0, 0, 0.9);
}
.l-header .w-nav .w-nav-anchor.level_1 {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: 500;
}
.l-header .w-nav .w-nav-arrow:before {
  font-weight: 300;
}
.l-header .w-nav.type_mobile {
  margin-left: 0;
}
.l-header .w-nav.type_desktop .mobile-only, .l-header .w-nav.type_desktop .w-nav-anchor.w-btn {
  display: none;
}
.l-header .w-nav.type_desktop .hover_underline .current-menu-item .w-nav-title:after, .l-header .w-nav.type_desktop .hover_underline .current-menu-ancestor .w-nav-title:after {
  bottom: -2px !important;
  opacity: 1 !important;
}
.l-header .w-nav.type_desktop .w-nav-anchor:not(.level_1) {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.l-header .w-nav .w-nav-control {
  color: var(--color-content-primary);
}
.l-header .w-nav .w-nav-control > span {
  font-size: 1rem;
  text-transform: uppercase;
}
.l-header .w-nav .w-nav-control .w-nav-icon div, .l-header .w-nav .w-nav-control .w-nav-icon div:before, .l-header .w-nav .w-nav-control .w-nav-icon div:after {
  right: 0;
  border-radius: 5em;
}
.l-header .w-nav .w-nav-control:not(.active) .w-nav-icon div:before {
  width: 75%;
}
.l-header .w-nav .w-nav-control:not(.active) .w-nav-icon div:after {
  width: 55%;
}
@media screen and (max-width: 767px) {
  .l-header .w-nav-control > span {
    display: none;
  }
  .l-header .appt-btn {
    padding: 0;
    width: 100%;
    line-height: inherit !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--color-header-top-text) !important;
  }
  .l-header .appt-btn:before {
    border-color: transparent;
  }
}
/*
 * GRECO HEADER (Header Builder: us_header 125)
 * Figma: rgba(21,21,21,.9) bar + 9px backdrop blur (bar color + blur are set in the starter .l-header block above); nav 20px uppercase, 0.1em tracking, Gravesend Sans 500
*/
.l-header {
  /* Mobile: icon-only phone button; label kept for screen readers */
}
.l-header .w-nav.type_desktop .w-nav-anchor.level_1 {
  font-family: gravesend-sans, Montserrat, sans-serif;
  /* Figma nav font (Adobe Fonts kit, Theme Options > Typography); menu element has no font setting */
  font-weight: 500;
  font-size: var(--nav-font-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.l-header .w-nav.type_desktop .menu-item.no-link > .w-nav-anchor {
  cursor: default;
}
.l-header .w-nav.type_desktop .w-nav-list.level_2 {
  border-top: 1px solid var(--color-content-primary);
  padding: 0.5rem 0;
  min-width: 16rem;
}
.l-header .w-nav.type_desktop .w-nav-list.level_2 .w-nav-anchor {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}
.l-header .w-nav.type_mobile {
  /* theme forces arrows visible; inherit so they hide with the closed fullscreen menu */
  /*.w-nav-anchor.level_1 {
			font-family: var(--h1-font-family);
			text-transform: none;
		}*/
}
.l-header .w-nav.type_mobile .w-nav-arrow {
  visibility: inherit;
}
.l-header .w-nav.type_mobile .w-nav-list.level_2 .w-nav-anchor {
  opacity: 0.85;
}
.l-header .header-phone .w-btn-label {
  text-transform: none;
}
.l-header .header-cta, .l-header .header-phone {
  white-space: nowrap;
  font-size: var(--header-btn-font-size);
}
.l-header .header-phone-icon {
  font-size: 1.5rem;
  padding: 0.5rem;
}
.l-header .header-phone-icon .w-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.l-header .header-phone-icon i {
  margin: 0 !important;
  color: var(--color-content-primary);
}
/* Seven top-level menu items (Testimonials added 2026-10-26) overlapped the logo and Locations below ~1720px.
   Tighter item gap and tracking there; at the low end of the laptop state the logo also shrinks a little. Checked 1025-1940px. */
@media screen and (min-width: 1025px) and (max-width: 1719px) {
  .l-header .w-nav.type_desktop {
    --menu-items-gap: 0.5em;
    /* theme: 0.8em (menu element indents) */
  }
  .l-header .w-nav.type_desktop .w-nav-anchor.level_1 {
    letter-spacing: 0.06em;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
  .l-header .w-nav.type_desktop {
    --menu-items-gap: 0.45em;
  }
  .l-header .w-nav.type_desktop .w-nav-anchor.level_1 {
    letter-spacing: 0.04em;
  }
  .l-header .ush_image_1 {
    height: 2.9rem !important;
    /* header builder: 3.5rem in the laptop state */
  }
}
/*
 * GRECO HEADER "Locations" dropdown (Header Builder: Dropdown elements dropdown:1 hover / dropdown:2 click, class header-locations).
 * Client feedback 2026-10-13. The element is stretched to the header height so the list opens flush under the header bar,
 * styled like the nav dropdowns.
*/
.l-header .header-locations {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  /* Where the header has no room for the word (low end of the laptop state, and of the desktop state where the phone
	   number returns): pin icon only, label kept for screen readers. Measured: the word fits from 1320px and from 1590px (moved up from 1280/1550 when Testimonials joined the menu, 2026-10-26). */
  /* Tablets: the list lines up with the right edge of the header row, so it never runs off the left of the screen */
  /* Phones: pin icon only (label kept for screen readers), sized like the phone icon; the list spans the screen under the header */
}
.l-header .header-locations .w-dropdown-h {
  position: static;
  /* the list positions against the full-height element, not the text */
  margin: 0;
  line-height: 1.3;
}
.l-header .header-locations .w-dropdown-current .w-dropdown-item {
  padding: 0 1.3em 0 0;
  min-height: 0;
  font-family: gravesend-sans, Montserrat, sans-serif;
  font-weight: 500;
  font-size: var(--nav-font-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}
.l-header .header-locations .w-dropdown-current .w-dropdown-item i {
  width: auto;
  margin-right: 0.5em;
  color: var(--color-content-primary);
}
.l-header .header-locations .w-dropdown-current .w-dropdown-item:after {
  right: 0;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  line-height: 1;
  font-size: 1em;
  font-weight: 300;
}
.l-header .header-locations .w-dropdown-item, .l-header .header-locations .w-dropdown-item:hover {
  text-decoration: none;
}
.l-header .header-locations.opened .w-dropdown-current .w-dropdown-item, .l-header .header-locations .w-dropdown-current .w-dropdown-item:hover {
  color: var(--color-content-primary);
}
.l-header .header-locations .w-dropdown-list {
  top: 100% !important;
  /* theme has header-position rules for top/bottom */
  bottom: auto !important;
  right: 0;
  left: auto;
  min-width: 19rem;
  padding: 0.5rem 0 !important;
  background: #151515;
  border-top: 1px solid var(--color-content-primary);
  color: white;
}
.l-header .header-locations .w-dropdown-list .w-dropdown-item {
  padding: 0.45em 1.25rem;
  min-height: 0;
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.3s;
  /* phone number sits under its office */
  /* second office: hairline above */
}
.l-header .header-locations .w-dropdown-list .w-dropdown-item i {
  width: 1.2em;
  margin-right: 0.6em;
  color: var(--color-content-primary);
}
.l-header .header-locations .w-dropdown-list .w-dropdown-item:hover {
  color: var(--color-content-primary);
}
.l-header .header-locations .w-dropdown-list .w-dropdown-item:nth-child(even) {
  padding-top: 0;
}
.l-header .header-locations .w-dropdown-list .w-dropdown-item:nth-child(2n + 3) {
  margin-top: 0.5rem;
  padding-top: 0.9em;
  border-top: 1px solid rgba(208, 203, 179, 0.25);
}
@media screen and (min-width: 768px) and (max-width: 899px), screen and (min-width: 1025px) and (max-width: 1319px), screen and (min-width: 1401px) and (max-width: 1589px) {
  .l-header .header-locations .w-dropdown-current .w-dropdown-item {
    padding-right: 0;
    font-size: 1.25rem;
  }
  .l-header .header-locations .w-dropdown-current .w-dropdown-item i {
    margin-right: 0;
  }
  .l-header .header-locations .w-dropdown-current .w-dropdown-item:after {
    display: none;
  }
  .l-header .header-locations .w-dropdown-current .w-dropdown-item-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .l-header .header-locations {
    position: static;
  }
}
@media screen and (max-width: 767px) {
  .l-header .header-locations {
    position: static;
  }
  .l-header .header-locations .w-dropdown-current .w-dropdown-item {
    padding: 0.5rem;
    font-size: 1.5rem;
  }
  .l-header .header-locations .w-dropdown-current .w-dropdown-item i {
    margin-right: 0;
  }
  .l-header .header-locations .w-dropdown-current .w-dropdown-item:after {
    display: none;
  }
  .l-header .header-locations .w-dropdown-item-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .l-header .header-locations .w-dropdown-list {
    left: 0;
    right: 0;
    min-width: 0;
  }
  .l-header .header-locations .w-dropdown-list .w-dropdown-item {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    white-space: normal;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .l-header .header-locations .w-dropdown-list .w-dropdown-item-title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}
/* Small phones: logo, pin, phone and menu did not fit in one row with the theme 1.4rem gaps between header items.
   Under 390px the gaps are tightened; under 360px the logo and the pin padding shrink a little as well. */
@media screen and (max-width: 389px) {
  .l-header .l-subheader-cell.at_right > .header-phone-icon, .l-header .l-subheader-cell.at_right > .w-nav {
    margin-left: 0.5rem;
  }
}
@media screen and (max-width: 359px) {
  .l-header .ush_image_1 {
    height: 2.25rem !important;
  }
  .l-header .header-locations .w-dropdown-current .w-dropdown-item {
    padding: 0.25rem;
  }
}
/*
 * GRECO MASTHEAD (reusable block "Masthead Titlebar" 295, Theme Options titlebar)
 * Text from ACF: h1_heading (Page Fields) + Hero group (eyebrow, tagline, text, button, award toggle).
 * Backgrounds are flattened Figma renders: 875 internal (bokeh + vignette + gold multiply), 876 home (before/after faces).
*/
.masthead-home, .masthead-internal {
  text-align: center;
}
/* Same selector shape as the theme's fixed-header offset rule
   (.header_hor .l-header.pos_fixed ~ .l-main > .l-section:first-of-type > .l-section-h) so this wins */
.l-section.masthead-home > .l-section-h, .l-section.masthead-internal > .l-section-h, .header_hor .l-header.pos_fixed ~ .l-main > .l-section.masthead-home > .l-section-h, .header_hor .l-header.pos_fixed ~ .l-main > .l-section.masthead-internal > .l-section-h {
  padding-top: calc(var(--header-height, 6rem) + var(--hero-pad-top));
  padding-bottom: var(--hero-pad-bottom);
}
.masthead-home, .masthead-internal {
  /* Award: [laurel] VOTED BEST ... [laurel] */
}
.masthead-home .wpb_wrapper > *, .masthead-internal .wpb_wrapper > * {
  margin-bottom: var(--hero-gap);
}
.masthead-home .wpb_wrapper > :last-child, .masthead-internal .wpb_wrapper > :last-child {
  margin-bottom: 0;
}
.masthead-home .masthead-eyebrow, .masthead-internal .masthead-eyebrow {
  margin-bottom: 0;
  /* sits right above the H1, as in the Figma */
  font-size: var(--hero-eyebrow-size);
  text-transform: uppercase;
  color: var(--color-content-primary);
  line-height: 1.5;
}
.masthead-home h1.masthead-title, .masthead-internal h1.masthead-title {
  color: white;
  margin-left: auto;
  margin-right: auto;
}
.masthead-home .masthead-tagline, .masthead-internal .masthead-tagline {
  color: var(--color-content-primary);
}
.masthead-home .masthead-award, .masthead-internal .masthead-award {
  justify-content: center;
  flex-wrap: nowrap;
  color: var(--color-content-primary);
  font-size: var(--text-size);
  line-height: 1.2;
  text-transform: uppercase;
}
.masthead-home .masthead-award p, .masthead-internal .masthead-award p {
  margin: 0;
}
.masthead-home .masthead-award .laurel img, .masthead-internal .masthead-award .laurel img {
  width: auto;
  height: 2.325rem;
  /* Figma 37px */
}
.masthead-home .masthead-award .laurel--right img, .masthead-internal .masthead-award .laurel--right img {
  transform: scaleX(-1);
}
/* Internal pages (640px @1920): fixed height, content centered like the Figma frame */
.l-section.masthead-internal {
  min-height: var(--hero-min-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.l-section.masthead-internal > .l-section-h {
  width: 100%;
}
.masthead-internal h1.masthead-title {
  font-size: var(--hero-title-size);
  line-height: 1;
}
.masthead-internal .masthead-tagline {
  font-size: var(--text-size);
  text-transform: uppercase;
  line-height: 1.2;
}
.masthead-internal .award-break {
  display: block;
  /* two lines under the H1 */
}
/* Home (1080px @1920) */
.l-section.masthead-home > .l-section-h, .header_hor .l-header.pos_fixed ~ .l-main > .l-section.masthead-home > .l-section-h {
  padding-bottom: 2.5rem;
}
/* labels + stats position against the full-width section (not the 1704px content box) */
.l-section.masthead-home {
  position: relative;
}
.l-section.masthead-home > .l-section-h {
  position: static;
}
.masthead-home {
  /* Background scales with the width so the before/after faces keep the Figma proportions; labels are placed in vw to stay on the faces */
  /* Above 1920 the image grows faster than the row, which cut off its faded bottom and left the first two stats
	   on the "before" photo's white collar. Anchor the bottom so the stats stay on the fade. */
  /* labels position against the whole section, not the column (theme sets columns relative) */
  /* with the column static, lift the content above the section background layer */
  /* Figma 685px text column (stats + award run wider) */
  /* 5 stats with gold hairline dividers */
  /* BEFORE / AFTER labels over the photos (Figma positions), with the white rule under each */
  /* "Actual patient" note on the right-hand side of the hero (AM, 2026-10-09): under the AFTER label on desktop,
	   bottom right corner of the photo band on phones/tablets (.mba-actual lives inside the band, which is hidden on desktop) */
  /* Phone/tablet before/after photo band (block 295): hidden on desktop, where the wide row background shows both faces */
}
@media screen and (min-width: 1025px) {
  .masthead-home > .l-section-img {
    background-size: 100% auto !important;
    /* theme writes background-size inline */
    background-position: center top !important;
  }
}
@media screen and (min-width: 1921px) {
  .masthead-home > .l-section-img {
    background-position: center bottom !important;
  }
}
.masthead-home .g-cols > .wpb_column, .masthead-home .g-cols > .wpb_column > .vc_column-inner {
  position: static;
}
.masthead-home .wpb_wrapper > * {
  position: relative;
  z-index: 1;
}
.masthead-home .wpb_wrapper > .ba-label {
  position: absolute;
}
.masthead-home .masthead-eyebrow, .masthead-home .masthead-title, .masthead-home .masthead-tagline, .masthead-home .masthead-text {
  max-width: 42.8125rem;
  margin-left: auto;
  margin-right: auto;
}
.masthead-home .masthead-btn {
  margin-bottom: 1rem !important;
}
.masthead-home .masthead-stats {
  margin-bottom: 1rem !important;
}
.masthead-home .masthead-eyebrow {
  font-size: var(--text-size-lg);
}
.masthead-home .masthead-tagline {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}
.masthead-home .masthead-text {
  font-size: var(--text-size-lg);
  color: white;
}
.masthead-home .masthead-stats {
  justify-content: center;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
  /* Centered on a faint dark glass panel so the text stays readable over the after photo (designer, 2026-10-09).
		   Figma had the row left-aligned 139px from the edge at 1401px+ to clear the photo instead. */
}
@media screen and (min-width: 1025px) {
  .masthead-home .masthead-stats {
    background: rgba(0, 0, 0, 0.2);
    /* designer spec was 10%; raised to 20% for readability (Rithy, 2026-10-09) */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.masthead-home .masthead-stats > .stat {
  margin: 0 !important;
  padding: 1rem 1.5rem;
}
.masthead-home .masthead-stats > .stat + .stat {
  border-left: 1px solid rgba(169, 152, 85, 0.5);
}
.masthead-home .masthead-stats > .stat p {
  margin: 0;
  white-space: nowrap;
}
.masthead-home .masthead-stats .stat-value {
  font-family: var(--h1-font-family);
  font-size: var(--h4-font-size);
  line-height: 1.2;
  color: var(--color-content-primary);
  margin-bottom: 1.5rem !important;
}
.masthead-home .masthead-stats .stat-label {
  font-size: var(--text-size-lg);
  color: white;
}
.masthead-home .masthead-award .award-break {
  display: inline;
}
.masthead-home .ba-label {
  position: absolute;
  margin: 0 !important;
  font-size: var(--text-size-lg);
  color: white;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid white;
  padding-bottom: 0.25rem;
}
.masthead-home .ba-label--before {
  left: 3.3vw;
  top: 34.4vw;
  /* Figma y ~660 of 1920 */
  width: 11rem;
  /* 176px rule */
}
.masthead-home .ba-label--after {
  right: 0;
  top: 40.4vw;
  /* Figma y ~776 of 1920 */
  width: 13.875rem;
  /* 222px rule to the edge */
  padding-left: 0.6rem;
}
.masthead-home .wpb_wrapper > .ba-actual, .masthead-home .mba-actual {
  position: absolute;
  margin: 0 !important;
  font-style: italic;
  letter-spacing: 0.04em;
  color: white;
  white-space: nowrap;
  z-index: 1;
}
.masthead-home .wpb_wrapper > .ba-actual p, .masthead-home .mba-actual p {
  margin: 0;
}
.masthead-home .wpb_wrapper > .ba-actual {
  /* right edge under the AFTER rule. Below 1500px there is no room beside the centered trust items,
		   so it stays on one line in the gap above them. */
  right: 1.5rem;
  top: calc(40.4vw + 2.6rem);
  font-size: 0.875rem;
  text-align: right;
  line-height: 1.35;
  /* 1500px+: halfway between the AFTER rule and the bottom of the hero (AM): the box spans that space and centers
		   the text in it, to the right of the trust items panel. */
}
@media screen and (min-width: 1500px) {
  .masthead-home .wpb_wrapper > .ba-actual {
    top: calc(40.4vw + 2.3rem);
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
    font-size: 1rem;
  }
}
@media screen and (max-width: 1024px) {
  .masthead-home .wpb_wrapper > .ba-actual {
    display: none;
  }
}
.masthead-home .mba-actual {
  right: 1rem;
  bottom: 0.75rem;
  font-size: 0.875rem;
}
.masthead-home .masthead-mobile-ba {
  display: none;
}
@media screen and (max-width: 1024px) {
  .masthead-home {
    /* Option 1 (user choice 2026-09-30): no row background; both faces in a side-by-side band above the text */
    /* BEFORE / AFTER on each face, above the fade (same look as the desktop labels) */
    /* Compact stats: 3 + 2 grid with hairline dividers */
  }
  .masthead-home .ba-label {
    display: none;
    /* the wide background crops the faces away on smaller screens */
  }
  .masthead-home > .l-section-img {
    display: none;
  }
  .masthead-home .masthead-mobile-ba {
    display: block;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: calc(-1 * var(--hero-pad-top));
    margin-bottom: var(--hero-gap) !important;
  }
  .masthead-home .masthead-mobile-ba .mba-image, .masthead-home .masthead-mobile-ba .mba-image .w-image-h {
    display: block;
    margin: 0;
  }
  .masthead-home .masthead-mobile-ba .mba-image img {
    display: block;
    width: 100%;
    height: min(66.4vw, 30rem);
    /* image is 1204x800; cap the band height on tablets */
    object-fit: cover;
    object-position: center 35%;
  }
  .masthead-home .mba-label {
    position: absolute;
    bottom: 22%;
    margin: 0 !important;
    z-index: 1;
    font-size: var(--text-size);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid white;
    padding-bottom: 0.2rem;
  }
  .masthead-home .mba-label p {
    margin: 0;
  }
  .masthead-home .mba-label--before {
    left: 1.5rem;
  }
  .masthead-home .mba-label--after {
    left: calc(50% + 1.5rem);
  }
  .masthead-home .masthead-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    left: auto;
  }
  .masthead-home .masthead-stats > .stat {
    grid-column: span 2;
    padding: 0.75rem 0.5rem;
  }
  .masthead-home .masthead-stats > .stat + .stat {
    border-left: 1px solid rgba(169, 152, 85, 0.5);
  }
  .masthead-home .masthead-stats > .stat:nth-child(4), .masthead-home .masthead-stats > .stat:nth-child(5) {
    grid-column: span 3;
    border-top: 1px solid rgba(169, 152, 85, 0.5);
  }
  .masthead-home .masthead-stats > .stat:nth-child(4) {
    border-left: 0;
  }
  .masthead-home .masthead-stats > .stat p {
    white-space: normal;
  }
  .masthead-home .masthead-stats .stat-value {
    font-size: var(--h5-font-size);
    margin-bottom: 0.5rem !important;
  }
  .masthead-home .masthead-stats .stat-label {
    font-size: 0.875rem;
    line-height: 1.35;
  }
}
@media screen and (max-width: 1024px) {
  .l-section.masthead-home {
    background-color: #000;
    overflow-x: clip;
  }
}
[class*="masthead"] h1 .small {
  display: block;
  font-size: max(1.25rem, 0.42em);
  /*font-weight: 500;
			font-style: italic;
			margin-top: .75em;*/
}
@media screen and (max-width: 767px) {
  [class*="masthead"] .l-section-img {
    top: var(--header-height);
  }
}
[class*="--content"] h1 {
  font-size: var(--h2-font-size);
}
[class*="--content"] h2 {
  font-size: var(--h3-font-size);
}
[class*="--content"] h3 {
  font-size: var(--h4-font-size);
}
[class*="--content"] h2, [class*="--content"] h3, [class*="--content"] h4 {
  text-align: left;
}
[class*="--content"] .w-image.align_left, [class*="--content"] .w-image.align_right {
  max-width: 35%;
}
@media screen and (max-width: 600px) {
  [class*="--content"] .w-image.align_left, [class*="--content"] .w-image.align_right {
    max-width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}
[class*="--content"] .w-btn-wrapper:not(:last-child), [class*="--content"] .w-tabs.accordion:not(:last-child), [class*="--content"] .w-video:not(:last-child), [class*="--content"] .g-cols.wpb_row:not(:last-child), [class*="--content"] .post_image:not(:last-child) {
  margin-bottom: 3rem;
}
[class*="--content"] .post_content:not(:last-child) {
  margin-bottom: 1.5rem;
}
[class*="--content"] table {
  display: block;
  overflow-x: auto;
  -webkit-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1);
}
[class*="--content"] table tbody {
  display: block;
  min-width: 40rem;
}
@media screen and (min-width: 768px) {
  [class*="--content"] img.alignright, [class*="--content"] img.alignleft {
    max-width: 35%;
  }
}
@media screen and (max-width: 767px) {
  [class*="--content"] img.alignright, [class*="--content"] img.alignleft {
    margin-left: auto;
    margin-right: auto;
  }
}
/* 
 * BLOG GRID/LIST
 * will probably need to change the .layout_182 class
*/
.layout_182 .w-grid-item:not(:last-child) {
  border-bottom: 1px solid #ccc;
  padding-bottom: 2rem;
}
.layout_182 .post_title {
  font-size: clamp(1.25em, 2vw, 1.5em);
  margin-bottom: 0.25em !important;
  text-align: left;
}
.layout_182 .post_date {
  font-size: 0.75em;
  margin-bottom: 1.25em;
}
.layout_182 .post_content {
  margin-bottom: 1em;
}
/* BLOG POST */
.blog--content .post_image {
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .blog--content .post_image {
    float: right;
    max-width: 35%;
    margin-left: 2rem;
  }
}
.blog--content .post_title {
  margin-bottom: 0.25em;
}
.blog--content .post_date {
  font-size: 1rem;
  display: block;
  position: relative;
}
.blog--content .post_date i {
  position: absolute;
  left: 0;
  top: 0;
}
.blog--content .post_content {
  margin-bottom: 1.5rem;
}
[class*="--sidebar"] {
  font-size: 1rem;
}
[class*="--sidebar"] > .vc_column-inner > .wpb_wrapper > div:not(:last-child) {
  margin-bottom: 1.5rem;
}
[class*="--sidebar"] h2, [class*="--sidebar"] .widgettitle {
  font-family: inherit;
  font-size: 1.25em;
  text-transform: uppercase;
}
[class*="--sidebar"] h2, [class*="--sidebar"] h3, [class*="--sidebar"] h4, [class*="--sidebar"] a {
  color: inherit;
}
[class*="--sidebar"] .page-list {
  margin-left: 0;
  list-style-type: none;
  border-left: 1px solid var(--color-content-border);
  font-size: 1em;
}
[class*="--sidebar"] .page-list li {
  padding: 0.4em 1.2em;
  margin: 0;
  border-bottom: 1px solid var(--color-content-border);
}
[class*="--sidebar"] .page-list li.current_page_item > a {
  font-weight: 400;
  color: var(--color-content-link);
}
[class*="--sidebar"] .siblings-page-list:not(:last-child) {
  margin-bottom: 0;
}
[class*="--sidebar"] .siblings-page-list:not(:last-child) .page_item:not(.current_page_item) {
  display: none;
}
[class*="--sidebar"] .siblings-page-list:not(:last-child) .current_page_item {
  cursor: text;
  background-color: rgba(0, 0, 0, 0.05);
}
[class*="--sidebar"] .siblings-page-list:not(:last-child) .current_page_item:before {
  display: none;
}
[class*="--sidebar"] .siblings-page-list:not(:last-child) .current_page_item a {
  pointer-events: none;
}
[class*="--sidebar"] [class*="ul-styled"] ul > li:before {
  color: inherit;
}
[class*="--sidebar"] .hours-table {
  max-width: 15em;
}
.no-touch [class*="--sidebar"] a:hover {
  color: var(--color-content-link);
}
.internal--tabs {
  font-size: 1rem;
}
.internal--tabs .w-tabs.accordion {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  -webkit-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.internal--tabs .w-tabs.accordion .w-tabs-section {
  margin-bottom: 0;
}
.internal--tabs .w-tabs.accordion .w-tabs-section:first-child {
  border-top-width: 0;
}
.internal--tabs .w-tabs.accordion .w-tabs-section:last-child {
  border-bottom-width: 0;
}
.internal--tabs .w-tabs.accordion .w-tabs-section-title {
  font-size: 1rem !important;
}
.internal--tabs .w-tabs:not(.accordion) .w-tabs-section-content {
  background: white;
  background: linear-gradient(180deg, var(--color-content-bg-alt), var(--color-content-bg));
  padding: 1.5rem;
  border-radius: 0 0 0.75rem 0.75rem !important;
  overflow: hidden;
  -webkit-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.internal--tabs .w-tabs:not(.accordion) .media .w-tabs-section-content {
  padding: 0;
}
.internal--tabs .siblings-page-list:not(:last-child) {
  margin-bottom: 0;
}
.internal--tabs .siblings-page-list:not(:last-child) .page_item:not(.current_page_item) {
  display: none;
}
.internal--tabs .siblings-page-list:not(:last-child) .current_page_item {
  cursor: text;
  padding-left: 0;
}
.internal--tabs .siblings-page-list:not(:last-child) .current_page_item:before {
  display: none;
}
.internal--tabs .siblings-page-list:not(:last-child) .current_page_item a {
  pointer-events: none;
  font-family: var(--h1-font-family);
  font-size: var(--h5-font-size, inherit);
  font-weight: var(--h5-font-weight, inherit);
  text-transform: uppercase;
}
.internal--tabs .siblings-page-list:not(:last-child) .current_page_item a:after {
  content: ":";
}
/*
 * GRECO IN THE MEDIA (reusable block "In the Media"): affiliation + award logos, one row from tablet up, wraps on phones
*/
.media-logos .media-logos-list {
  gap: var(--media-logo-gap);
  justify-content: center;
  row-gap: 1.5rem;
}
.media-logos .media-logos-list > * {
  margin: 0 !important;
  /* starter .w-hwrapper > div margin */
}
.media-logos .media-logo img {
  height: var(--media-logo-h);
  width: auto;
  max-width: none;
}
.media-logos .media-logo--wordmark img {
  height: calc(var(--media-logo-h) * 0.6);
  /* Figma: 96px of the 160px row */
}
.media-logos .media-logo--round img {
  border-radius: 50%;
}
/* Theme fix: carousel arrows using a Button Style never show its border
   (theme hard-codes .owl-nav button:before { border-width: 0 } instead of var(--btn-border-width)). */
.owl-carousel[class*="navstyle_"] > .owl-nav button:before {
  border-width: var(--btn-border-width, 0px);
}
/*
 * GRECO PAGE SECTIONS (procedure + overview pages; Facelift = master)
 * Rows carry a sec-* class; content stays in native Text Block / Image / Accordion / Button elements.
*/
.sec-narrow {
  --site-content-width: 88.5rem;
  /* Figma 252px side padding at 1920 = 1416px content */
}
.l-section.sec-no-top {
  padding-top: 0;
}
/* the wider column gaps use negative row margins that can poke past the viewport on laptops: clip them */
.l-section[class*="sec-"] {
  overflow-x: clip;
}
/* wider column gaps (theme flex rows: 1.5rem column padding + --additional-gap) */
.l-section[class*="sec-"] > .l-section-h > .g-cols.via_flex {
  --additional-gap: var(--sec-col-extra);
  margin-left: calc(-1.5rem - var(--additional-gap));
  margin-right: calc(-1.5rem - var(--additional-gap));
  align-items: center;
}
.l-section[class*="sec-"] > .l-section-h > .g-cols.via_flex > .vc_column_container {
  padding-left: var(--additional-gap);
  padding-right: var(--additional-gap);
}
/* section titles are real h2s, styled at the Figma H3 size */
.l-section[class*="sec-"] h2 {
  font-size: var(--h3-font-size);
  font-weight: 400;
  line-height: 1;
  margin-bottom: calc(var(--gap-lg) - 0.15em);
}
.l-section[class*="sec-"] .wpb_text_column p:last-child {
  margin-bottom: 0;
}
.sec-text > .vc_column-inner > .wpb_wrapper > * + * {
  margin-top: var(--gap-lg);
}
.subtitle {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: white;
}
.sec-photo img {
  width: 100%;
  height: var(--sec-photo-h);
  object-fit: cover;
}
/* 1. B/A compare + thumbnails | text + accordion */
.l-section.sec-ba-intro > .l-section-h > .g-cols.via_flex {
  --additional-gap: 0.375rem;
  /* Figma ~60px here */
}
.sec-ba-intro, .sec-home-ba {
  /* Twenty20 element: shows the photos at their own ratio (client 2026-10-21: the Figma 710 x 520 crop was too close-up);
	   the plugin sets the container height from the image */
  /* thumbnails: native Gallery element (4 columns, popup on click) */
  /* thumbnails load their before/after pair into the slider (js/ba-swap.js adds .ba-swap, .is-hover, .is-active) */
}
.sec-ba-intro .ba-column .twentytwenty-container, .sec-home-ba .ba-column .twentytwenty-container {
  width: 100%;
}
.sec-ba-intro .ba-column .twentytwenty-container img, .sec-home-ba .ba-column .twentytwenty-container img {
  width: 100%;
  height: auto;
}
.sec-ba-intro .ba-thumbs, .sec-home-ba .ba-thumbs {
  margin-top: 0.5rem !important;
}
.sec-ba-intro .ba-swap .ba-thumbs .w-gallery-item, .sec-home-ba .ba-swap .ba-thumbs .w-gallery-item {
  cursor: pointer;
  transition: opacity 0.2s;
}
.sec-ba-intro .ba-swap .ba-thumbs .w-gallery-item.is-hover, .sec-home-ba .ba-swap .ba-thumbs .w-gallery-item.is-hover {
  opacity: 0.8;
}
.sec-ba-intro .ba-swap .ba-thumbs .w-gallery-item.is-active, .sec-home-ba .ba-swap .ba-thumbs .w-gallery-item.is-active {
  outline: 2px solid var(--color-content-primary);
  outline-offset: -2px;
  cursor: default;
  opacity: 1;
}
.sec-ba-intro .ba-swap .ba-thumbs .w-gallery-item:focus-visible, .sec-home-ba .ba-swap .ba-thumbs .w-gallery-item:focus-visible {
  outline: 2px solid white;
  outline-offset: -2px;
}
/* Text-only section (procedure pages where a section has no image): one column at a readable width, centered */
.l-section.sec-text-only .sec-text > .vc_column-inner {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
/* 3. Centered intro */
.sec-intro {
  text-align: center;
}
.l-section.sec-intro .sec-intro h2, .sec-intro h2 {
  margin-bottom: calc(var(--gap-lg) - 0.15em);
}
.l-section.sec-intro {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  /* tight to the staggered cards below */
}
/* 4. Staggered procedure cards (whole column is the link) */
/* top-level (not nested) so it outranks the shared .l-section[class*="sec-"] row rule:
   no column gaps (568px columns + overlap = the Figma's 620px overlapping cards) and top-aligned for the stagger */
.l-section.sec-cards > .l-section-h > .g-cols.via_flex {
  --additional-gap: 0px;
  margin-left: 0;
  margin-right: 0;
  align-items: flex-start;
}
.l-section.sec-cards > .l-section-h > .g-cols.via_flex > .vc_column_container {
  padding-left: 0;
  padding-right: 0;
}
.sec-cards {
  /* the column IS the card box: its native link overlay (a.vc_column-link, absolute on the column) then covers exactly the card */
  /* image fills the card; theme/starter image sizing + margins overridden with section-level specificity */
  /* Figma: 620px cards in the 1704px row stepping 540px -> each card 36.38% wide, cards 2+3 shifted left 4.69% (80px), each above the previous */
  /* same shape as the theme's .g-cols.via_flex.type_default > div > .vc_column-inner padding rule */
  /* a card is hidden on the page it links to (column Display Logic), leaving 2 cards: center them */
  /* text spans the card with equal padding; on cards covered by the next card, the right padding adds the overlap so text stays in the visible area */
  /* "Model" label on stock (Shutterstock) card photos, bottom right corner (client feedback 2026-10-13).
	   On cards covered by the next card the label moves left by the overlap, like the text padding above. */
}
.sec-cards .proc-card:nth-child(2) {
  margin-top: var(--card-step);
}
.sec-cards .proc-card:nth-child(3) {
  margin-top: calc(var(--card-step) * 2);
}
.sec-cards .proc-card > .vc_column-inner {
  position: relative;
}
.sec-cards .proc-card .proc-card-image {
  display: block;
  width: 100%;
  margin: 0 !important;
}
.sec-cards .proc-card .proc-card-image img {
  display: block;
  width: 100%;
  height: var(--card-h);
  object-fit: cover;
}
.sec-cards .g-cols.via_flex > .proc-card.wpb_column {
  width: 36.38%;
  max-width: none;
  flex: 0 0 36.38%;
}
.sec-cards .g-cols.via_flex.type_default > .proc-card > .vc_column-inner {
  padding-left: 0;
  padding-right: 0;
  /* arrow + text align to the photo edges */
}
.sec-cards .proc-card:not(:last-child) .proc-card-text {
  padding-right: calc(var(--card-text-pad) + 12.9%);
  /* the next card covers 80/620 of this card */
}
.sec-cards .g-cols.via_flex:has(> .proc-card:last-child:nth-child(-n+2)) {
  justify-content: center;
}
.sec-cards .proc-card:nth-child(1) {
  z-index: 1;
}
.sec-cards .proc-card:nth-child(2) {
  z-index: 2;
  margin-left: -4.69%;
}
.sec-cards .proc-card:nth-child(3) {
  z-index: 3;
  margin-left: -4.69%;
}
.sec-cards .proc-card-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--card-text-pad);
  max-width: none;
  margin: 0;
  mix-blend-mode: plus-lighter;
  /* Figma: gold text brightened over the photo */
}
.sec-cards .proc-card-text h3 {
  font-size: var(--card-title-size);
  line-height: 1;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  /* long single words (BROW/FOREHEAD) must wrap, or the clipped gradient hides the overflow */
  max-width: 9.5em;
  /* Figma ~463px at 48.8px */
  margin-bottom: calc(1.5rem - 0.15em);
}
.sec-cards .proc-card-text p {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  max-width: 14.5em;
  /* Figma up to ~374px at 26px */
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-cards .proc-card .proc-card-arrow {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: auto;
  margin: 0 !important;
}
.sec-cards .proc-card .proc-card-arrow img {
  width: 7.5rem;
  /* Figma 120px */
  height: auto;
}
.sec-cards .proc-card:hover .proc-card-arrow img {
  background: rgba(169, 152, 85, 0.35);
}
.sec-cards .proc-card .model-label {
  position: absolute;
  right: 1rem;
  bottom: 0.5rem;
  /* sits inside the card text padding (1rem min), so it never touches the subtitle */
  margin: 0 !important;
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.sec-cards .proc-card .model-label p {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .sec-cards .proc-card:not(:last-child) .model-label {
    right: calc(12.9% + 1rem);
  }
}
@media screen and (max-width: 767px) {
  .sec-cards .g-cols.via_flex > .proc-card.wpb_column {
    width: 100%;
    flex-basis: 100%;
    margin: 0 !important;
    padding: 0 1.5rem;
    /* gutter on the column; the link overlay then spans the gutter too, which is fine on touch */
  }
  .sec-cards .proc-card .proc-card-text {
    padding-right: var(--card-text-pad) !important;
  }
}
/* 5. Candidate (text + accordion | image) with RG watermark top-left */
.sec-candidate {
  /* Figma: the RG mark starts 270px above the section, over the empty space under the cards.
	   Extend the bg layer upward instead of offsetting the image, so it isn't clipped at the section top. */
  /* Figma: photo runs to the right edge of the screen (extend by the side gutter; the section clips any excess) */
}
.sec-candidate > .l-section-img {
  top: -14vw;
  background-size: 45.5vw auto !important;
  background-position: left -15.5vw top 0 !important;
}
.sec-candidate .l-section-h > .g-cols.via_flex {
  align-items: stretch;
}
.sec-candidate .sec-image .w-image, .sec-candidate .sec-image .w-image-h, .sec-candidate .sec-image img {
  height: 100%;
  margin: 0 !important;
}
.sec-candidate .sec-image img {
  min-height: var(--sec-photo-h);
  width: 100%;
  object-fit: cover;
}
@media screen and (min-width: 1025px) {
  .sec-candidate .sec-image > .vc_column-inner {
    margin-right: calc(min(0px, (var(--site-content-width) - 100vw) / 2) - 1rem);
    padding-right: 0;
  }
}
/* Candidate row with a video instead of a photo (Breast Augmentation): no edge bleed, video centered beside the copy */
.sec-candidate .sec-video-col > .vc_column-inner {
  justify-content: center;
}
.l-section.sec-candidate {
  padding-bottom: var(--sec-pad-lg);
  overflow-x: clip;
  /* the bled photo never causes sideways scroll */
}
/* 6. Process: title + outlined boxes on black */
.l-section.sec-process-title {
  padding-bottom: 0;
  text-align: center;
}
.l-section.sec-process-boxes {
  padding-top: var(--section-custom-padding);
  padding-bottom: var(--sec-pad-lg);
  /* exactly 2.5rem between boxes, outer box edges on the content edges */
  /* Scale the heading to the box when four sit side by side on small laptops, so long words
	   ("Reconstructive", "Consultation") aren't clipped: 14 characters fit at 13cqi */
}
.l-section.sec-process-boxes .l-section-h > .g-cols.via_flex {
  align-items: flex-start;
  --additional-gap: 1.25rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.l-section.sec-process-boxes .process-box > .vc_column-inner {
  border: 1px solid var(--color-content-primary);
  padding: 2rem;
}
.l-section.sec-process-boxes .process-box .wpb_text_column {
  container-type: inline-size;
}
.l-section.sec-process-boxes h3 {
  font-size: min(var(--h4-font-size), 13cqi);
  line-height: 1.2;
  margin-bottom: calc(2.5rem - 0.15em);
}
/* Why Dr. Greco (reusable block): text | photo flush to the section bottom, RG watermark */
.l-section.sec-why-greco {
  padding-top: 6.75rem;
  padding-bottom: 0;
  /* Figma: the RG mark starts ~96px above the section; extend the layer so it isn't clipped at the section top */
}
.l-section.sec-why-greco > .l-section-img {
  top: -5vw;
  background-size: 40vw auto !important;
  background-position: left 32.5vw top 0 !important;
}
.l-section.sec-why-greco .l-section-h > .g-cols.via_flex {
  align-items: stretch;
}
.l-section.sec-why-greco .why-greco-text > .vc_column-inner {
  padding-top: var(--section-custom-padding);
  padding-bottom: var(--section-custom-padding);
}
.l-section.sec-why-greco .why-greco-text .w-btn-wrapper {
  margin-top: var(--gap-lg);
}
.l-section.sec-why-greco .why-greco-photo > .vc_column-inner > .wpb_wrapper, .l-section.sec-why-greco .why-greco-photo .w-image, .l-section.sec-why-greco .why-greco-photo .w-image-h {
  height: 100%;
  width: 100%;
  margin: 0 !important;
}
.l-section.sec-why-greco .why-greco-photo .w-image img {
  width: 100%;
  height: 100%;
  min-height: 30rem;
  object-fit: cover;
  object-position: 58% center;
}
/* Why Dr. Greco (Overview) block: eyebrow, tagline, accordion, button | photo with "Watch Dr. Greco Story" popup */
.l-section.sec-why-greco.why-greco--overview {
  padding-bottom: var(--section-custom-padding);
}
.l-section.sec-why-greco.why-greco--overview .why-greco-text > .vc_column-inner > .wpb_wrapper > * + * {
  margin-top: var(--gap-lg);
}
.l-section.sec-why-greco.why-greco--overview .why-greco-text .w-btn-wrapper {
  margin-top: calc(var(--gap-lg) + 1.5rem);
}
.l-section.sec-why-greco.why-greco--overview .eyebrow {
  font-size: var(--text-size-lg);
  margin-bottom: 0;
  /* sits right above the H2, as in the Figma */
}
.l-section.sec-why-greco.why-greco--overview .why-tagline {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  line-height: 1.2;
  color: white;
}
.l-section.sec-why-greco.why-greco--overview .why-greco-photo > .vc_column-inner {
  position: relative;
}
/* Story video pill: Button Style 2 (Outline) + Figma play square (attachment 898) on the left.
   On a photo it sits centered near the bottom; in a text column (Dr. Greco About) it flows inline. */
.why-greco-photo .w-popup.story-popup {
  position: absolute;
  left: 50%;
  bottom: 4rem;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
}
.why-greco-text .w-popup.story-popup {
  margin-top: calc(var(--gap-lg) + 1.5rem);
}
/* Dr. Greco About: story button + "View Dr. Greco's CV" (PDF) side by side; the wrapper takes the story button's top
   space, and the CV button matches the story pill's height at each size below (2026-10-23) */
.why-greco-text .about-actions {
  margin-top: calc(var(--gap-lg) + 1.5rem);
  row-gap: 1rem;
  /* spacing comes from the wrapper's gaps; the theme's button-wrapper margins (and a text-column button top margin)
	   made the buttons wrap with an uneven gap */
}
.why-greco-text .about-actions > .w-popup.story-popup, .why-greco-text .about-actions > .w-btn-wrapper {
  margin: 0 !important;
}
.w-btn.about-cv-btn {
  display: inline-flex;
  align-items: center;
  height: 4.5rem;
  padding: 0 1.5rem;
  font-size: var(--text-size-lg);
  white-space: nowrap;
}
.w-popup.story-popup .w-btn {
  display: inline-flex;
  align-items: center;
  height: 4.5rem;
  padding: 0 1.5rem 0 6rem;
  font-size: var(--text-size-lg);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  background-image: url(../../../uploads/2026/09/greco-play-square.svg) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 4.5rem 4.5rem !important;
}
/* Dr. Greco page: About (Why-block layout: text | photo flush to the section bottom), credentials accordion */
.l-section.sec-why-greco.sec-about > .l-section-img {
  background-position: left 40vw top 0 !important;
  /* Figma RG mark at x769 */
}
.l-section.sec-why-greco:is(.sec-about, .sec-home-intro) .why-greco-text > .vc_column-inner {
  padding-top: var(--sec-pad-lg);
  padding-bottom: var(--sec-pad-lg);
}
.l-section.sec-home-intro .why-greco-photo > .vc_column-inner {
  position: relative;
  /* story button sits on the photo */
}
/* Large accordion (Figma: H4 regular titles, 32px padding, 40px apart) */
.w-tabs.accordion.accordion-lg > div > .w-tabs-section:not(:last-child) {
  margin-bottom: 2.5rem;
}
.w-tabs.accordion.accordion-lg .w-tabs-section-header {
  padding: 2rem;
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}
.w-tabs.accordion.accordion-lg .w-tabs-section-content-h {
  padding: 0 2rem 2rem;
}
/* HOME: pull-quote, category cards, B/A showcase */
.l-section.sec-quote {
  padding-top: 2.5rem;
  padding-bottom: 0.75rem;
}
.l-section.sec-quote .quote-text {
  max-width: 42.5rem;
  /* Figma 681px */
  margin: 0 3.25rem 0 auto;
  /* Figma: 160px from the edge (content edge + 52px) */
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  line-height: 1.2;
  color: white;
}
/* Card titles never break inside a word: cap the size so the longest word fits the text box's content width
   (cqi excludes the covered-card padding). Procedure cards: AUGMENTATION = 8.86em -> 11cqi. Home: REJUVENATION = 8.12em -> 12cqi. */
.sec-cards .proc-card-text {
  container-type: inline-size;
}
.sec-cards .proc-card-text h3 {
  font-size: min(var(--card-title-size), 11cqi);
}
.sec-cards--home .proc-card-text h3 {
  font-size: min(calc(var(--card-title-size) * 1.27), 12cqi);
  /* Figma 62px vs 48.8px on procedure cards */
}
.sec-cards .proc-card-text h3:last-child {
  margin-bottom: 0;
}
.l-section.sec-home-ba {
  padding-bottom: var(--sec-pad-lg);
  overflow-x: clip;
  /* Figma: RG mark starts above the section, like the Candidate section */
}
.l-section.sec-home-ba > .l-section-img {
  top: -14vw;
  background-size: 45.5vw auto !important;
  background-position: left -15.5vw top 0 !important;
}
.l-section.sec-home-ba h2 {
  font-size: var(--h2-font-size);
  font-weight: 700;
}
.l-section.sec-home-ba .home-ba-text > .vc_column-inner {
  padding-top: var(--section-custom-padding);
}
.l-section.sec-home-ba .home-ba-text .w-btn-wrapper {
  margin-top: calc(var(--gap-lg) + 1.5rem);
}
.l-section.sec-home-ba .home-ba-caption > .vc_column-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1rem;
}
.l-section.sec-home-ba .home-ba-caption h3 {
  font-size: var(--h5-font-size);
  line-height: 1.2;
  margin-bottom: calc(2rem - 0.15em);
}
.l-section.sec-home-ba .home-ba-caption p {
  font-size: var(--text-size-lg);
  color: var(--color-content-primary);
}
.l-section.sec-home-ba .g-cols.home-ba-media {
  align-items: stretch;
}
@media screen and (min-width: 1025px) {
  /* Figma widths: 586 | 120 gap | 998 (710 carousel + 40 + 248 caption) of 1704 */
  .l-section.sec-home-ba > .l-section-h > .g-cols.via_flex {
    align-items: flex-start;
    /* a bit wider than Figma's 586px so "Happy Patients." stays on one line at 1920 */
  }
  .l-section.sec-home-ba > .l-section-h > .g-cols.via_flex > .home-ba-text {
    width: 40%;
    flex-basis: 40%;
  }
  .l-section.sec-home-ba > .l-section-h > .g-cols.via_flex > .home-ba-right {
    width: 60%;
    flex-basis: 60%;
  }
  .l-section.sec-home-ba .g-cols.home-ba-media > .home-ba-carousel {
    width: 74%;
    flex-basis: 74%;
  }
  .l-section.sec-home-ba .g-cols.home-ba-media > .home-ba-caption {
    width: 26%;
    flex-basis: 26%;
  }
}
/* Tablet: the caption column beside the slider was ~70px wide ("Facelift" clipped); put it under the slider instead */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .l-section.sec-home-ba .g-cols.home-ba-media {
    flex-wrap: wrap;
  }
  .l-section.sec-home-ba .g-cols.home-ba-media > .home-ba-carousel, .l-section.sec-home-ba .g-cols.home-ba-media > .home-ba-caption {
    width: 100%;
    flex-basis: 100%;
  }
  .l-section.sec-home-ba .g-cols.home-ba-media > .home-ba-caption > .vc_column-inner {
    padding-top: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .l-section.sec-quote .quote-text {
    max-width: none;
    margin: 0;
  }
  .l-section.sec-home-ba .home-ba-caption > .vc_column-inner {
    padding-top: 1.5rem;
  }
}
/*
 * GRECO B&A GALLERY (/before-after/): List Filter + result counter + Post List (Grid Layout "B&A Case Card", popup "B&A Case Popup")
 */
.l-section.sec-gallery {
  padding-top: var(--section-custom-padding);
  padding-bottom: var(--sec-pad-lg);
}
.l-section.sec-gallery > .l-section-img {
  background-size: 45vw auto !important;
  background-position: right -5vw top 4rem !important;
}
.ba-filters {
  margin-bottom: 1rem !important;
  align-items: center;
  row-gap: 0.75rem;
  /* when the controls wrap on phones */
  /* Order (client feedback 2026-10-13): "Choose Your Procedure" first as the main gold button, then the gender buttons;
	   Reset (only shown while filters are active) follows the gender buttons, separated by the row gap */
  /* the procedure button takes its own row; the smaller gender buttons (and Reset) wrap to the line below */
}
.ba-filters > .ba-filter-reset:not(.hidden) {
  margin: 0 !important;
  /* the theme gives the reset element its own 0.6em margins, which made the row taller when it appeared */
}
.ba-filters > .ba-filter-panel {
  flex-basis: 100%;
}
/* One-line instruction above the filter row */
.ba-intro {
  margin-bottom: 1rem !important;
  font-size: var(--text-size-lg);
}
.ba-intro p {
  margin: 0;
}
/* Gender, Apply and Reset use the small button size; "Choose Your Procedure" keeps the normal site button size */
.ba-filter-gender .w-filter-item-value.w-btn, .ba-filter-panel .w-filter-button-submit, .ba-filter-reset .w-filter-reset-all {
  font-size: 0.875rem !important;
  padding: 0.6em 1.2em;
}
.ba-filter-panel .w-filter-list-panel > .w-btn.w-filter-button-submit {
  line-height: 1.2 !important;
  /* theme forces 2.5rem on the panel's Apply */
  padding: 0.6em 1.2em;
}
@media screen and (max-width: 767px) {
  /* phones: Reset only inside the filter panel */
  .ba-filters > .ba-filter-reset:not(.hidden) {
    display: none;
  }
  .ba-filters:has(> .ba-filter-panel.open_for_mobile) > .ba-filter-reset:not(.hidden) {
    display: flex;
  }
}
.ba-filter-gender {
  /* the theme adds its own small "Reset" link above the buttons once a gender is picked; it made the element taller
	   and pushed Reset Filters out of line. "All" and Reset Filters already do that job. */
}
.ba-filter-gender .w-filter-item-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  /* visually hidden; kept for screen readers */
}
.ba-filter-gender .w-filter-item-reset {
  display: none !important;
  /* the theme shows it with a more specific .has_value rule */
}
/* "Choose Your Procedure": the List Filter's mobile panel (enabled at every width), shown as a drawer from the right.
   Client 2026-10-23: both lists open (no accordion click) as an either/or choice, procedure OR body area: side by side
   from 1024px, stacked below, with an "or" divider. Ticking in one list clears and dims the other (js/filter-panel-close.js) */
.ba-filters {
  --fd-w: min(32rem, 88vw);
  --fd-or: 4rem;
  /* gap holding the "or" divider */
  --fd-bar: 4rem;
  --fd-pad: 2rem;
}
@media screen and (min-width: 1024px) {
  .ba-filters {
    --fd-w: min(48rem, 88vw);
  }
}
@media screen and (max-width: 767px) {
  .ba-filters {
    --fd-pad: 1.5rem;
  }
}
@keyframes ba-drawer-in {
  from {
    transform: translateX(100%);
  }
}
@keyframes ba-drawer-fade {
  from {
    opacity: 0;
  }
}
.ba-filter-panel.w-filter.state_mobile {
  /* the two lists */
  /* the list not in use (another list has ticks) */
  /* the theme's per-section "Reset" link; Reset Filters in the bottom bar does that job */
  /* options at the site text size (as in the old modal), with a little more room between rows (Rithy 2026-10-22) */
}
.ba-filter-panel.w-filter.state_mobile .w-filter-list, .ba-filter-panel.w-filter.state_mobile .w-filter-list-panel {
  left: auto;
  right: 0;
  width: var(--fd-w);
  border-left: 1px solid var(--color-content-primary);
  background: var(--color-content-bg, #151515);
}
.ba-filter-panel.w-filter.state_mobile.open_for_mobile .w-filter-list, .ba-filter-panel.w-filter.state_mobile.open_for_mobile .w-filter-list-panel {
  animation: ba-drawer-in 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ba-filter-panel.w-filter.state_mobile.open_for_mobile .w-filter-list, .ba-filter-panel.w-filter.state_mobile.open_for_mobile .w-filter-list-panel {
    animation: none;
  }
}
.ba-filter-panel.w-filter.state_mobile .w-filter-list {
  bottom: var(--fd-bar);
  padding: 1.25rem var(--fd-pad);
  overscroll-behavior: contain;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-list-title {
  font-family: var(--h5-font-family);
  font-size: var(--h6-font-size);
  /* swapped with the list headings' size (Rithy 2026-10-23) */
  line-height: 1.25;
  color: var(--color-content-primary);
  padding-right: 2.5rem;
  /* clear of the × */
  margin-bottom: 0.75rem;
  /* stays at the top while the list scrolls, so the fixed × keeps sitting on the title row */
  position: sticky;
  z-index: 1;
  top: -1.25rem;
  /* the list's top padding */
  margin-top: -1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  background: var(--color-content-bg, #151515);
}
.ba-filter-panel.w-filter.state_mobile .w-filter-list-closer {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 0.75rem);
  right: 0.75rem;
  z-index: 2;
  font-size: 1.5rem;
  color: var(--color-content-primary);
  background: none;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-list-panel {
  z-index: 1112;
  height: var(--fd-bar);
  padding: 0 var(--fd-pad);
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(169, 152, 85, 0.5);
  box-shadow: none;
  /* "more below" cue on short screens: the list fades out above the bar while it can scroll further
		   (js/filter-panel-close.js sets .ba-more on the filter) */
}
.ba-filter-panel.w-filter.state_mobile .w-filter-list-panel .w-filter-button-submit {
  width: auto;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-list-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 3rem;
  background: linear-gradient(transparent, var(--color-content-bg, #151515));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.ba-filter-panel.w-filter.state_mobile.open_for_mobile .w-filter-list-panel {
  display: flex;
  /* only while open: the theme hides the closed panel's bar */
}
.ba-filter-panel.w-filter.state_mobile.ba-more .w-filter-list-panel::before {
  opacity: 1;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  /* "or" between the lists: a gold rule with the word in a gap in the middle */
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item + .w-filter-item {
  margin-top: 1rem;
  padding-top: 3rem;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item + .w-filter-item::before {
  content: "or";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  font-family: var(--h6-font-family);
  font-style: italic;
  color: var(--color-content-primary);
  background: linear-gradient(to right, rgba(169, 152, 85, 0.5) calc(50% - 1.5rem), transparent 0 calc(50% + 1.5rem), rgba(169, 152, 85, 0.5) 0) center / 100% 1px no-repeat;
}
@media screen and (min-width: 1024px) {
  .ba-filter-panel.w-filter.state_mobile {
    /* only while open: the theme hides the closed panel's list with display: none */
  }
  .ba-filter-panel.w-filter.state_mobile.open_for_mobile .w-filter-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--fd-or);
    align-content: start;
  }
  .ba-filter-panel.w-filter.state_mobile .w-filter-list-title {
    grid-column: 1 / -1;
  }
  .ba-filter-panel.w-filter.state_mobile .w-filter-item + .w-filter-item {
    margin-top: 0;
    padding-top: 0;
    /* vertical rule down the gap, "or" at the top */
  }
  .ba-filter-panel.w-filter.state_mobile .w-filter-item + .w-filter-item::before {
    right: auto;
    bottom: 0;
    left: calc(var(--fd-or) / -2);
    width: var(--fd-or);
    height: auto;
    transform: translateX(-50%);
    padding-top: 0.75rem;
    background: linear-gradient(rgba(169, 152, 85, 0.5), rgba(169, 152, 85, 0.5)) center 3rem / 1px calc(100% - 3rem) no-repeat;
  }
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item.ba-inactive .w-filter-item-title, .ba-filter-panel.w-filter.state_mobile .w-filter-item.ba-inactive .w-filter-item-values {
  opacity: 0.45;
  transition: opacity 0.2s;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item.ba-inactive:hover .w-filter-item-title, .ba-filter-panel.w-filter.state_mobile .w-filter-item.ba-inactive:hover .w-filter-item-values {
  opacity: 0.8;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item-title {
  color: #fff;
  /* white so the list headings read apart from the gold panel title */
  font-family: var(--h6-font-family);
  font-size: var(--h5-font-size);
  /* swapped with the panel title's size (Rithy 2026-10-23) */
  font-style: italic;
  font-weight: inherit;
  line-height: 1.3;
  padding: 0.75rem 0;
}
@media screen and (min-width: 768px) {
  .ba-filter-panel.w-filter.state_mobile .w-filter-item-title {
    font-size: 1.25rem;
  }
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item-reset {
  display: none !important;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item-content {
  margin-bottom: 1rem;
}
.ba-filter-panel.w-filter.state_mobile .w-filter-item-value {
  margin-bottom: 0.5em;
  line-height: 1.4;
}
/* Panel open: dim the page with a real layer (also stops clicks reaching the cards behind) */
.ba-filters:has(> .ba-filter-panel.open_for_mobile)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1110;
  background: rgba(0, 0, 0, 0.75);
}
/* "Reset Filters" button: in the row while filters are active; while the panel is open it moves into the panel's
   bottom bar, opposite Apply (the panel markup itself only has Apply) */
.ba-filters:has(> .ba-filter-panel.open_for_mobile) > .ba-filter-reset:not(.hidden) {
  position: fixed;
  z-index: 1113;
  margin: 0 !important;
  left: calc(100% - var(--fd-w) + var(--fd-pad));
  top: calc(100% - var(--fd-bar) / 2);
  transform: translateY(-50%);
  animation: ba-drawer-fade 0.3s ease-out;
}
.ba-filters:has(> .ba-filter-panel.open_for_mobile) > .ba-filter-reset:not(.hidden) .w-filter-reset-single {
  display: none;
  /* the chips stay in the row, behind the overlay */
}
.ba-filter-reset {
  font-size: var(--text-size);
}
/* active-filter count badge on "Choose Your Procedure" (theme draws it from data-count-active) */
.ba-filter-panel .w-filter-opener {
  --badge-bg-color: white !important;
  /* the theme sets the badge colors inline; white so it shows on the gold button */
  --badge-color: #151515 !important;
}
.ba-filter-panel .w-filter-opener .w-btn-label[data-count-active]::after {
  font-size: 0.85em;
  /* a true circle: the theme adds side padding, which made it an oval */
  box-sizing: border-box;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0;
  line-height: 1.5em;
  letter-spacing: 0;
  font-weight: 600;
}
.ba-count {
  color: var(--color-content-primary);
  font-size: var(--text-size);
  margin-bottom: 1.5rem !important;
}
@media screen and (max-width: 1024px) {
  .ba-list {
    --columns: 2 !important;
  }
}
@media screen and (max-width: 600px) {
  .ba-list {
    --columns: 1 !important;
  }
}
.ba-list .g-loadmore {
  margin-top: var(--gap-lg);
}
/* Case card: main pair, second pair (2x2 like the Figma), then procedure + details */
.ba-card {
  /* Sono Bello-style card: hairline border, padding, background fades in on hover */
}
.ba-card .ba-pair {
  width: 100%;
  flex-wrap: nowrap;
  gap: 0.5rem;
  /* the theme spaces with margins, which are zeroed on the images below */
}
.ba-card .ba-pair > .ba-img {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
}
.ba-card .ba-img img {
  object-fit: cover;
}
.ba-card .w-grid-item-h {
  padding: 0.5rem;
  border: 1px solid rgba(169, 152, 85, 0.35);
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.ba-card .w-grid-item-h:hover {
  background-color: rgba(169, 152, 85, 0.12);
  border-color: var(--color-content-primary);
}
.ba-card .ba-img img {
  transition: transform 0.3s;
}
/* Popup: large pairs side by side, BEFORE / AFTER labels */
.ba-popup {
  /* pairs and extra views share one 0.5rem gap */
  /* same selector shape as the theme's column padding rule (.g-cols.via_flex.type_default > div > .vc_column-inner) */
  /* extra views come in before/after pairs */
}
.ba-popup .ba-popup-title {
  font-size: var(--h3-font-size);
  margin-bottom: 0.5rem;
}
.ba-popup .ba-popup-meta {
  color: var(--color-content-primary);
  margin-bottom: var(--gap-lg) !important;
}
.ba-popup .g-cols.via_flex.type_default.ba-popup-pair {
  margin: 0 -0.25rem 0.5rem;
}
.ba-popup .g-cols.via_flex.type_default.ba-popup-pair > div > .vc_column-inner {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.ba-popup .ba-img, .ba-popup .ba-popup-views .w-gallery-item {
  position: relative;
}
.ba-popup .ba-popup-views .w-gallery-item:nth-child(odd)::after {
  content: "Before";
}
.ba-popup .ba-popup-views .w-gallery-item:nth-child(even)::after {
  content: "After";
}
.ba-popup .ba-img, .ba-popup .ba-popup-views .w-gallery-item {
  position: relative;
}
.ba-popup .ba-img::after, .ba-popup .ba-popup-views .w-gallery-item::after {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: white;
  font-size: var(--text-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.ba-popup .ba-popup-explore {
  margin-top: var(--gap-lg) !important;
}
.ba-popup .ba-img--before::after {
  content: "Before";
}
.ba-popup .ba-img--after::after {
  content: "After";
}
/* Sensitive photos (client request 2026-10-14): before/after photos showing breasts or nudity are blurred until the visitor
 * confirms they are 18+ (js/ba-sensitive.js adds html.ba-revealed). Page slider columns and gallery cards carry .ba-sensitive;
 * the case popup has body.ba-sensitive-case. Which cases count is set in functions.php (lanesra_child_ba_is_sensitive). */
html:not(.ba-revealed) {
  /* the slider handle would sit on top of the notice */
  /* keep the blurred edges inside each photo */
  /* notice over the slider, each gallery card and each popup photo (thumbnails are only blurred) */
}
html:not(.ba-revealed) .ba-sensitive .twentytwenty-container img, html:not(.ba-revealed) .ba-sensitive .ba-card-pairs img, html:not(.ba-revealed) .ba-sensitive-case .ba-img img, html:not(.ba-revealed) .ba-sensitive-case .ba-popup-views img {
  filter: blur(24px);
}
html:not(.ba-revealed) .ba-sensitive .ba-thumbs img {
  filter: blur(16px);
}
html:not(.ba-revealed) .ba-sensitive .twentytwenty-handle {
  display: none;
}
html:not(.ba-revealed) .ba-sensitive .ba-thumbs .w-gallery-item, html:not(.ba-revealed) .ba-sensitive .ba-card-pairs .ba-img, html:not(.ba-revealed) .ba-sensitive-case .ba-img, html:not(.ba-revealed) .ba-sensitive-case .ba-popup-views .w-gallery-item {
  overflow: hidden;
}
html:not(.ba-revealed) .ba-sensitive .ba-card-pairs {
  position: relative;
}
html:not(.ba-revealed) .ba-sensitive .twentytwenty-container::before, html:not(.ba-revealed) .ba-sensitive .ba-card-pairs::before, html:not(.ba-revealed) .ba-sensitive-case .ba-img::before, html:not(.ba-revealed) .ba-sensitive-case .ba-popup-views .w-gallery-item::before {
  content: "Contains nudity\a Click or tap to view (18+)";
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  font-size: var(--text-size);
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
html:not(.ba-revealed) .ba-sensitive .ba-thumbs .w-gallery-item {
  cursor: pointer;
}
/* Overview process: 4 numbered boxes */
.sec-process-steps .process-num {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  line-height: 1;
  margin-bottom: calc(1.25rem - 0.15em);
  /* Figma 40px between cap-trimmed boxes; the 80px line box already adds the rest */
  padding-bottom: 0.15em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .l-section.sec-process-steps > .l-section-h > .g-cols.via_flex {
    flex-wrap: wrap;
    row-gap: 2.5rem;
  }
  .l-section.sec-process-steps > .l-section-h > .g-cols.via_flex > .process-box {
    width: 50%;
    flex-basis: 50%;
  }
}
/* Tablet / small laptop: the text column is far taller than the photo column is wide, which stretched the photo into a
   thin strip that cropped out Dr. Greco's face. Keep the Figma ratio and sit the photo on the section bottom.
   (Overview block: handled by the accordion rule above.) */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .l-section.sec-why-greco:not(.why-greco--overview) > .l-section-h > .g-cols.via_flex > .why-greco-photo {
    align-self: flex-end;
  }
  .l-section.sec-why-greco:not(.why-greco--overview) > .l-section-h > .g-cols.via_flex > .why-greco-photo :is(.w-image, .w-image-h) {
    height: auto;
  }
  .l-section.sec-why-greco:not(.why-greco--overview) > .l-section-h > .g-cols.via_flex > .why-greco-photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 0.8319327731;
  }
}
/* The story button was wider than the photo below ~1100px */
@media screen and (max-width: 1200px) {
  .why-greco-photo .w-popup.story-popup {
    bottom: 1.5rem;
  }
  .w-popup.story-popup .w-btn {
    height: 3.5rem;
    padding: 0 1rem 0 4.5rem;
    font-size: 0.875rem;
    background-size: 3.5rem 3.5rem !important;
  }
  .w-btn.about-cv-btn {
    height: 3.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 900px), screen and (max-width: 400px) {
  .w-popup.story-popup .w-btn {
    height: 3rem;
    padding: 0 0.75rem 0 3.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    background-size: 3rem 3rem !important;
  }
  .w-btn.about-cv-btn {
    height: 3rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
  }
}
/* Rows with an accordion: opening a panel grows the text column. Top-align the columns and give the photo its own
   Figma aspect ratio, so the photo never stretches/re-crops and the other column never moves. */
.sec-candidate {
  --photo-ratio: 900 / 954;
}
.why-greco--overview {
  --photo-ratio: 792 / 952;
}
@media screen and (min-width: 768px) {
  .l-section[class*="sec-"] > .l-section-h > .g-cols.via_flex:has(.w-tabs.accordion) {
    align-items: flex-start;
  }
  .l-section[class*="sec-"] > .l-section-h > .g-cols.via_flex:has(.w-tabs.accordion) > :is(.sec-image, .why-greco-photo) :is(.w-image, .w-image-h) {
    height: auto;
  }
  .l-section[class*="sec-"] > .l-section-h > .g-cols.via_flex:has(.w-tabs.accordion) > :is(.sec-image, .why-greco-photo) img {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--photo-ratio, 1);
  }
}
@media screen and (max-width: 767px) {
  .l-section[class*="sec-"] > .l-section-h > .g-cols.via_flex > .vc_column_container + .vc_column_container {
    margin-top: 2rem;
  }
  .sec-photo img, .sec-candidate .sec-image img {
    min-height: 0;
    height: 22rem;
  }
}
/*
 * GRECO TESTIMONIALS (reusable block "Testimonials", Grid Layout "Testimonial Slide")
 * Per page: ACF "Testimonials Section" (hide video / override video) + Testimonial Categories (filter reviews).
*/
.testimonials-section {
  /* Video column: poster/video with the quote card over the bottom-left */
  /* Play button (colors + icon size set on the Video element): Figma 80px square, 2px white outline */
  /* Scale the quote card and play button with the video's width (the button covered the quote below ~1700px).
	   Values are the Figma proportions at an 809px-wide video; custom properties because wp-scss can't compile mixed-unit clamp(). */
  /* The theme centers the triangle with a fixed line-height (3 x the icon size) and em padding, which only works at
	   its own box size. Make the box a true square and center the glyph in it at any size; the icon scales with the box. */
  /* Hide the quote card once the video is playing (the theme drops .with_overlay on play) */
  /* Reviews column + divider (Figma: 0.5px #D0CBB3) */
  /* Video column hidden on this page -> reviews take the full width */
  /* Actions: [<]  VIEW MORE REVIEWS  [>] centered under both columns.
	   The button has a fixed em width so the arrows (carousel nav, Button Style 4) can sit either side of it. */
  /* static up to .l-section-h so the arrows position against the whole section */
}
.testimonials-section > .l-section-h {
  position: relative;
  /* carousel arrows are positioned against the whole section */
}
.testimonials-section .g-cols {
  row-gap: var(--testi-gap);
}
.testimonials-section .video-default, .testimonials-section .video-override {
  position: relative;
  width: 100%;
}
.testimonials-section .video-poster img, .testimonials-section .w-video {
  width: 100%;
}
.testimonials-section .video-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  color: white;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  margin: 0;
}
.testimonials-section .video-card p, .testimonials-section .video-card .w-post-elm {
  margin: 0;
}
.testimonials-section .video-card .video-label {
  font-size: var(--text-size-lg);
  margin-bottom: 1.5rem;
}
.testimonials-section .video-card .video-quote {
  font-family: var(--h1-font-family);
  font-style: italic;
  font-size: var(--video-quote-size);
  line-height: 1;
  margin-bottom: 2rem;
}
.testimonials-section .video-card .video-name {
  font-size: var(--text-size);
  padding-top: 1rem;
  position: relative;
}
.testimonials-section .video-card .video-name:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  border-top: 1px solid white;
}
.testimonials-section .w-video-play-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 0;
  border: 2px solid white;
}
.testimonials-section .video-default, .testimonials-section .video-override {
  container-type: inline-size;
}
.testimonials-section .testimonial-video {
  --vc-pad: clamp(1rem, 3cqi, 1.5rem);
  --vc-label-size: clamp(0.875rem, 2.5cqi, var(--text-size-lg));
  --vc-label-gap: clamp(0.25rem, 3cqi, 1.5rem);
  --vc-quote-size: clamp(1.125rem, 7.66cqi, var(--video-quote-size));
  --vc-quote-gap: clamp(0.5rem, 4cqi, 2rem);
  --vc-name-size: clamp(0.875rem, 2cqi, var(--text-size));
  --vc-name-pad: clamp(0.5rem, 2cqi, 1rem);
  --vc-play-size: clamp(3rem, 11cqi, 5rem);
}
.testimonials-section .video-card {
  padding: var(--vc-pad);
}
.testimonials-section .video-card .video-label {
  font-size: var(--vc-label-size);
  margin-bottom: var(--vc-label-gap);
}
.testimonials-section .video-card .video-quote {
  font-size: var(--vc-quote-size);
  margin-bottom: var(--vc-quote-gap);
}
.testimonials-section .video-card .video-name {
  font-size: var(--vc-name-size);
  padding-top: var(--vc-name-pad);
}
.testimonials-section .w-video-play-icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--vc-play-size);
  height: var(--vc-play-size);
  margin: calc(var(--vc-play-size) / -2) 0 0 calc(var(--vc-play-size) / -2);
  padding: 0 0 0 0.12em;
  /* optical nudge: a triangle looks left-heavy when geometrically centered */
  line-height: 1;
  font-size: calc(var(--vc-play-size) * 0.35) !important;
  /* 28px in the 80px box; the element writes its size inline */
}
.testimonials-section .video-default:has(.w-video:not(.with_overlay)) .video-card, .testimonials-section .video-override:has(.w-video:not(.with_overlay)) .video-card {
  display: none;
}
.testimonials-section .testimonial-reviews > .vc_column-inner {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.testimonials-section .testimonial-video + .testimonial-reviews > .vc_column-inner {
  border-left: 1px solid rgba(208, 203, 179, 0.5);
  padding-left: var(--testi-gap);
}
.testimonials-section .review > * {
  margin-bottom: 2rem;
}
.testimonials-section .review > :last-child {
  margin-bottom: 0;
}
.testimonials-section .review-source img {
  width: 9.375rem;
  height: auto;
  opacity: 0.25;
}
.testimonials-section .review-title {
  font-size: var(--h4-font-size);
  line-height: 1.2;
  margin-bottom: 2rem;
}
.testimonials-section .review-rating {
  color: var(--color-content-primary);
  font-size: 1.5rem;
  line-height: 1;
  /* Figma stars have sharp points; the theme's rating element prints Font Awesome stars with rounded corners.
		   Same native element and markup (one <i> per star), drawn as a sharp five-point star instead of the font glyph. */
}
.testimonials-section .review-rating .w-testimonial-rating {
  display: flex;
  gap: 0.12em;
  width: auto;
}
.testimonials-section .review-rating .w-testimonial-rating:before, .testimonials-section .review-rating .w-testimonial-rating i:before {
  content: none;
}
.testimonials-section .review-rating .w-testimonial-rating i {
  display: block;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  clip-path: polygon(50% 0%, 61.23% 34.55%, 97.55% 34.55%, 68.16% 55.9%, 79.39% 90.45%, 50% 69.1%, 20.61% 90.45%, 31.84% 55.9%, 2.45% 34.55%, 38.77% 34.55%);
}
.testimonials-section .review-text {
  font-size: var(--text-size-lg);
  color: white;
}
.testimonials-section .review-meta {
  position: relative;
  padding-top: 1.5rem;
}
.testimonials-section .review-meta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  border-top: 1px solid rgba(208, 203, 179, 0.5);
}
.testimonials-section .review-name {
  font-size: var(--text-size);
  color: white;
}
.testimonials-section .review-date {
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: white;
}
.testimonials-section .g-cols:not(:has(.testimonial-video)) .testimonial-reviews {
  width: 100%;
  max-width: 100%;
  flex-basis: 100%;
}
.testimonials-section .testimonial-actions .w-btn-wrapper {
  margin-bottom: 0;
  /* theme adds ~0.2em; the arrows are centered on the button */
}
.testimonials-section .w-btn.reviews-more-btn {
  width: 16em;
  justify-content: center;
}
.testimonials-section .g-cols > .wpb_column.testimonial-reviews, .testimonials-section .g-cols > .wpb_column.testimonial-reviews > .vc_column-inner, .testimonials-section .testimonial-reviews .wpb_wrapper, .testimonials-section .testimonial-carousel, .testimonials-section .testimonial-carousel .owl-carousel {
  position: static;
}
.testimonials-section .testimonial-carousel .owl-nav {
  position: absolute;
  left: 50%;
  right: auto;
  /* theme sets left+right insets; clear right so the width applies */
  top: auto;
  bottom: calc((var(--btn-font-size) * 2.9 - 3.25rem) / 2);
  /* center 52px arrows on the button (height = 1.2 line + 2 x 0.85em padding) */
  transform: translateX(-50%);
  width: calc(16 * var(--btn-font-size) + 2 * (3.25rem + 2rem)) !important;
  /* theme: .owl-carousel.owl-loaded > * { width: auto !important } */
  height: 3.25rem;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  /* clicks pass through to the View More Reviews button... */
  z-index: 2;
  /* ...but the arrows sit above the button wrapper/actions column that comes later in the DOM */
}
.testimonials-section .testimonial-carousel .owl-nav button {
  position: relative;
  /* the Button Style border is drawn on button:before */
  transform: none;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  .testimonials-section .testimonial-carousel .owl-nav {
    /* phones: arrows sit just above the button */
    bottom: calc(var(--btn-font-size) * 2.9 + 2rem);
    /* + the starter's forced 1rem .w-btn-wrapper margin on phones */
    width: calc(2 * 3.25rem + 1rem) !important;
    height: 3.25rem;
  }
  .testimonials-section .testimonial-actions {
    padding-top: calc(3.25rem + 1rem);
  }
  .testimonials-section .testimonial-video + .testimonial-reviews > .vc_column-inner {
    border-left: 0;
    padding-left: 0;
  }
  .testimonials-section .testimonial-reviews > .vc_column-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* Poster under 576px wide (phones, two-column layouts below ~1350px): no room for a centered button above the card, so park it top-right */
@container (max-width: 36rem) {
  .testimonials-section .w-video-play-icon {
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
    margin: 0;
  }
}
/*
 * GRECO FOOTER (Default Footer reusable block 167)
 * Order: .dynamic-faq (user) > .marquee (procedures | consultation, by URL) > #footer-cta > #footer-main (.footer-social) > .footer-logo-row > .footer-bar
*/
/* Marquee: gold band, duplicated group scrolls -50% for a seamless loop */
.l-section.marquee {
  background: var(--color-content-primary);
  overflow: hidden;
}
.l-section.marquee > .l-section-h {
  padding-top: var(--marquee-pad);
  padding-bottom: var(--marquee-pad);
}
.l-section.marquee .wpb_text_column {
  margin: 0;
}
.l-section.marquee .marquee-track {
  display: flex;
  width: max-content;
  animation: greco-marquee 40s linear infinite;
}
.l-section.marquee .marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.l-section.marquee .marquee-item {
  font-family: var(--h1-font-family);
  font-style: italic;
  font-size: var(--marquee-font-size);
  line-height: 1.2;
  color: #443D22;
  white-space: nowrap;
}
.l-section.marquee .marquee-sep {
  color: #443D22;
  font-size: 0.6em;
  margin: 0 1.5rem;
  font-size: calc(var(--marquee-font-size) * 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .l-section.marquee .marquee-track {
    animation: none;
  }
}
@keyframes greco-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Contact section (olive, Theme Options "Alternate" colors) */
#footer-cta.footer-cta {
  --section-custom-padding: var(--footer-cta-pad);
  /* RG monogram watermark (row background image, attachment 826, 10% gold baked into the SVG).
	   Figma: ~82% of the section width, starting ~25% from the left and 288px from the top, running off the right/bottom edges */
  /* Laptop/tablet: the 7/12 info column is too narrow for 3-4 location columns ->
	   name + address on their own row, phones and hours below */
}
#footer-cta.footer-cta > .l-section-img {
  background-size: 82vw auto !important;
  background-position: left 24.8vw top 18rem !important;
}
#footer-cta.footer-cta .eyebrow {
  color: white;
  letter-spacing: 0;
}
#footer-cta.footer-cta .eyebrow .dot {
  margin: 0 0.5em;
}
#footer-cta.footer-cta .footer-blurb {
  margin-bottom: var(--gap-lg);
}
#footer-cta.footer-cta .w-separator {
  margin: var(--gap-lg) 0 1.5rem;
  color: rgba(208, 203, 179, 0.5);
}
#footer-cta.footer-cta .footer-location {
  font-size: var(--text-size);
}
#footer-cta.footer-cta .footer-location .hours-pair .wpb_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
#footer-cta.footer-cta .footer-location .location-name {
  font-size: var(--text-size-lg);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
#footer-cta.footer-cta .footer-location p {
  margin-bottom: 0;
}
#footer-cta.footer-cta .footer-location a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
#footer-cta.footer-cta .footer-location .wpb_column:not(:first-child) {
  border-left: 1px solid rgba(208, 203, 179, 0.5);
  align-self: flex-end;
}
#footer-cta.footer-cta .footer-cta-form > .vc_column-inner {
  border-left: 1px solid rgba(208, 203, 179, 0.5);
  padding-left: var(--gap-lg);
  padding-right: var(--gap-lg);
}
#footer-cta.footer-cta .footer-cta-form h3 {
  color: #D0CBB3;
}
@media screen and (max-width: 767px) {
  #footer-cta.footer-cta {
    /* columns stack below 768 (Theme Options columns_stacking_width) */
  }
  #footer-cta.footer-cta .footer-cta-form > .vc_column-inner {
    border-left: 0;
    margin-top: var(--gap-lg);
  }
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
  #footer-cta.footer-cta .g-cols.footer-location {
    /* el_class sits on the inner row's .g-cols itself */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 0;
  }
  #footer-cta.footer-cta .g-cols.footer-location > .wpb_column {
    width: auto;
    max-width: none;
  }
  #footer-cta.footer-cta .g-cols.footer-location > .wpb_column:first-child {
    grid-column: 1 / -1;
  }
  #footer-cta.footer-cta .g-cols.footer-location > .wpb_column:nth-child(2) {
    border-left: 0;
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  #footer-cta.footer-cta .footer-location .wpb_column:not(:first-child) {
    border-left: 0;
  }
}
/* Gravity Form in the contact section: small italic labels over light fields (Figma "Start Here") */
#footer-cta .gform_wrapper {
  /* ID scope: GF's own input rules are more specific than class selectors */
  /* Field colors, height, padding, border and font size come from Theme Options > Field Styles.
	   GF's gravity-theme CSS overrides font-size and padding on inputs, so point those back to the theme vars. */
}
#footer-cta .gform_wrapper .gfield_label, #footer-cta .gform_wrapper .gform-field-label, #footer-cta .gform_wrapper .gform-field-label.gfield_label {
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #F7F6F2;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
#footer-cta .gform_wrapper .gfield--type-gfic, #footer-cta .gform_wrapper .gfield.gfield--type-gfic {
  /* image captcha: keep it compact */
  margin-top: 0.5rem;
  font-size: 1rem;
}
#footer-cta .gform_wrapper .gfield_required {
  color: #F7F6F2;
}
#footer-cta .gform_wrapper .gform_fields {
  row-gap: 1.25rem !important;
  /* Figma field spacing */
}
#footer-cta .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), #footer-cta .gform_wrapper select, #footer-cta .gform_wrapper textarea {
  font-size: var(--inputs-font-size);
  padding: 0 var(--inputs-padding);
}
#footer-cta .gform_wrapper textarea {
  height: 12.5rem;
  /* Figma 200px; Field Styles has no textarea height */
  padding: 0.75rem var(--inputs-padding);
  resize: vertical;
}
#footer-cta .gform_wrapper .gform_footer {
  justify-content: center;
  padding-top: var(--gap-lg);
  margin-top: 0;
  padding-bottom: 0;
  /* Submit gets theme Button Style 1 via the gform_submit_button filter (functions.php) */
}
#footer-cta .gform_wrapper .gform_footer .gform_button {
  width: auto;
}
/* Get Social With Us (black) */
.footer-social {
  text-align: center;
}
.footer-social .footer-socials {
  font-size: var(--social-icon-size);
  /* Phones: the element's 1.5em gap makes four icons wrap to 3 + 1; tighten so they stay on one row */
}
.footer-social .footer-socials .w-socials-item-link {
  color: var(--color-content-primary);
}
.footer-social .footer-socials .w-socials-item-link:hover {
  color: #D0CBB3;
}
@media (max-width: 767px) {
  .footer-social .footer-socials {
    --gap: 0.5em !important;
    /* the theme sets --gap inline */
  }
}
/* Logo row + bottom bar */
.footer-logo-row {
  border-bottom: 1px solid rgba(208, 203, 179, 0.5);
}
.footer-logo-row > .l-section-h {
  padding-top: var(--footer-logo-pad);
  padding-bottom: var(--footer-logo-pad);
}
.footer-logo-row .footer-logo img {
  width: var(--footer-logo-width);
  height: auto;
}
.footer-bar {
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: #D0CBB3;
}
.footer-bar .g-cols {
  align-items: flex-start;
}
.footer-bar .wpb_text_column {
  margin-bottom: 0;
}
.footer-bar > .l-section-h {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.footer-bar p {
  margin: 0;
}
.footer-bar a {
  color: inherit;
}
.footer-bar .footer-links {
  text-align: right;
}
.footer-bar .footer-links a:not(:first-child) {
  margin-left: 1.5rem;
}
.footer-bar .footer-disclaimer, .footer-bar .footer-credit {
  margin-top: 0.25rem;
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  .footer-bar {
    text-align: center;
  }
  .footer-bar .footer-links {
    text-align: center;
    margin-top: 0.5rem;
  }
}
.copyright {
  text-align: center;
  font-size: 0.75em;
  padding-top: 1em;
  padding-bottom: 1em;
}
/*
 * GRECO TIMELINE (Dr. Greco page, #timeline): "Timeline Milestones" posts in a Post List, Grid Layout "Timeline Milestone"
 * (year | label + headline + text). Real HTML: one article + h3 per milestone, so search engines and AI can read it.
 * Desktop: center hairline, milestones alternate sides, the year sits across the line from its text.
 * Phones: line on the left, everything in one column. Scroll effects are CSS only and optional (see the end of the block).
*/
:root {
  --tl-year-size: clamp(2.25rem, 0.77rem + 3.94vw, 5.5rem);
  /* 36 -> 88px */
  --tl-gutter: clamp(1.5rem, 0.14rem + 3.64vw, 4.5rem);
  /* line to content, each side: 24 -> 72px */
  --tl-row-gap: clamp(3rem, 1.64rem + 3.64vw, 6rem);
  /* between milestones: 48 -> 96px */
}
.l-section.sec-timeline .tl-intro {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto var(--tl-row-gap);
}
.l-section.sec-timeline .tl-intro .eyebrow {
  font-size: var(--text-size-lg);
  margin-bottom: 0;
}
.l-section.sec-timeline .tl-intro h2 {
  margin-bottom: var(--gap-lg);
}
.l-section.sec-timeline .timeline-list {
  max-width: 84rem;
  margin: 0 auto;
  /* alternate sides */
}
.l-section.sec-timeline .timeline-list .w-grid-list {
  display: block;
  position: relative;
  margin: 0;
  /* the line, and a brighter copy that fills as you scroll (where supported) */
}
.l-section.sec-timeline .timeline-list .w-grid-list:before, .l-section.sec-timeline .timeline-list .w-grid-list:after {
  content: "";
  position: absolute;
  top: calc(var(--tl-year-size) / 2);
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(169, 152, 85, 0.3);
}
.l-section.sec-timeline .timeline-list .w-grid-list:after {
  display: none;
  background: #A99855;
  transform-origin: top;
}
.l-section.sec-timeline .timeline-list .w-grid-item {
  position: relative;
  width: auto;
  padding: 0 0 var(--tl-row-gap);
  /* marker on the line, level with the year */
  /* end the line at the last marker instead of running on beside its text */
}
.l-section.sec-timeline .timeline-list .w-grid-item:last-child {
  padding-bottom: 0;
}
.l-section.sec-timeline .timeline-list .w-grid-item:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--tl-year-size) / 2);
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid #A99855;
  background: var(--color-content-bg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.l-section.sec-timeline .timeline-list .w-grid-item:last-child:before {
  background: #A99855;
}
.l-section.sec-timeline .timeline-list .w-grid-item:last-child:after {
  content: "";
  position: absolute;
  z-index: 1;
  /* above the list's line layers */
  left: 50%;
  top: calc(var(--tl-year-size) / 2 + 0.6rem);
  bottom: 0;
  width: 0.5rem;
  transform: translateX(-50%);
  background: var(--color-content-bg);
}
.l-section.sec-timeline .timeline-list .w-grid-item-h {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--tl-gutter) * 2);
  align-items: start;
}
.l-section.sec-timeline .timeline-list .tl-year {
  font-family: var(--h1-font-family);
  font-size: var(--tl-year-size);
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  margin: 0;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.15em;
}
.l-section.sec-timeline .timeline-list .tl-body {
  margin: 0;
  max-width: 34rem;
  padding-top: calc(var(--tl-year-size) / 2 - 0.75em);
  /* label sits level with the middle of the year */
}
.l-section.sec-timeline .timeline-list .tl-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  color: var(--color-content-primary);
  margin-bottom: 0.5rem;
}
.l-section.sec-timeline .timeline-list .tl-title {
  font-size: var(--h6-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: calc(0.75rem - 0.15em);
}
.l-section.sec-timeline .timeline-list .tl-text p:last-child {
  margin-bottom: 0;
}
.l-section.sec-timeline .timeline-list .w-grid-item:nth-child(even) .tl-year {
  order: 2;
  text-align: left;
}
.l-section.sec-timeline .timeline-list .w-grid-item:nth-child(even) .tl-body {
  order: 1;
  justify-self: end;
  align-items: flex-end;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .l-section.sec-timeline .timeline-list .w-grid-list:before, .l-section.sec-timeline .timeline-list .w-grid-list:after, .l-section.sec-timeline .timeline-list .w-grid-item:before, .l-section.sec-timeline .timeline-list .w-grid-item:last-child:after {
    left: 0.375rem;
  }
  .l-section.sec-timeline .timeline-list .w-grid-item {
    padding-left: 2rem;
  }
  .l-section.sec-timeline .timeline-list .w-grid-item-h {
    display: block;
  }
  .l-section.sec-timeline .timeline-list .tl-year, .l-section.sec-timeline .timeline-list .w-grid-item:nth-child(even) .tl-year {
    text-align: left;
    white-space: normal;
  }
  .l-section.sec-timeline .timeline-list .tl-body, .l-section.sec-timeline .timeline-list .w-grid-item:nth-child(even) .tl-body {
    padding-top: 0.75rem;
    max-width: none;
    align-items: flex-start;
    text-align: left;
  }
}
/* Scroll effects (pure CSS, only where the browser supports scroll-driven animations and the visitor hasn't asked for less motion):
   the gold line fills to the middle of the screen, and each milestone fades up as it enters. Without support, everything is simply visible. */
@keyframes tl-line {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes tl-in {
  from {
    opacity: 0;
    transform: translateY(2.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .l-section.sec-timeline .timeline-list .w-grid-list:after {
      display: block;
      animation: tl-line linear both;
      animation-timeline: view();
      animation-range: cover 50vh cover calc(100% - 50vh);
    }
    .l-section.sec-timeline .timeline-list .w-grid-item-h {
      animation: tl-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}