*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The cookie box: the live site's layout (its cookieconsent_ext.css) in the site's palette and type. */
#cc-main {
  --cc-font-family: var(--vm-font);
  --cc-modal-border-radius: var(--r-0);
  --cc-btn-border-radius: var(--r-0);
  --cc-bg: var(--vm-white);
  --cc-primary-color: var(--vm-ink-100);
  --cc-secondary-color: var(--t-body);
  --cc-btn-primary-bg: var(--vm-ink-100);
  --cc-btn-primary-color: var(--vm-white);
  --cc-btn-primary-border-color: var(--vm-ink-100);
  --cc-btn-primary-hover-bg: var(--vm-ink-80);
  --cc-btn-primary-hover-color: var(--vm-white);
  --cc-btn-primary-hover-border-color: var(--vm-ink-80);
  --cc-btn-secondary-bg: var(--vm-white);
  --cc-btn-secondary-color: var(--vm-ink-100);
  --cc-btn-secondary-border-color: var(--vm-ink-100);
  --cc-btn-secondary-hover-bg: var(--vm-ink-10);
  --cc-btn-secondary-hover-color: var(--vm-ink-100);
  --cc-btn-secondary-hover-border-color: var(--vm-ink-100);
  --cc-separator-border-color: var(--vm-ink-10);
  --cc-toggle-on-bg: var(--vm-ink-100);
  --cc-toggle-readonly-bg: var(--vm-ink-40);
  --cc-cookie-category-block-bg: var(--vm-ink-10);
  --cc-cookie-category-block-border: var(--vm-ink-10);
  --cc-cookie-category-block-hover-bg: var(--vm-ink-20);
  --cc-cookie-category-block-hover-border: var(--vm-ink-20);
  --cc-link-color: var(--vm-ink-100);
}
html.disable--interaction.show--consent,
html.disable--interaction.show--consent body { overflow: auto !important; }
#cc-main .cm { box-shadow: 5px 5px 2048px 2048px color-mix(in srgb, var(--vm-ink-100) 72%, transparent); }
.show--preferences #cc-main .cc--anim .pm-overlay { visibility: hidden; }
#cc-main h2.cm__title,
#cc-main h2.pm__title { margin: unset !important; }
#cc-main .cm__btn[data-role="necessary"] {
  border-color: var(--cc-btn-secondary-border-color);
  background: var(--cc-btn-secondary-bg);
  color: var(--cc-btn-secondary-color);
}
#cc-main .cm__btn[data-role="necessary"]:hover {
  border-color: var(--cc-btn-secondary-hover-border-color);
  background: var(--cc-btn-secondary-hover-bg);
  color: var(--cc-btn-secondary-hover-color);
}
@media screen and (max-width: 991px) {
  #cc-main .cm { font-size: 13px; }
  #cc-main .cm__btn,
#cc-main .pm__btn { font-size: 13px; }
}
@media screen and (min-width: 992px) {
  #cc-main .cm--center,
#cc-main .pm--box { width: 600px; max-width: 100%; padding: 30px; box-sizing: border-box; }
  #cc-main .cm__btns { flex-direction: row; justify-content: space-between; }
  #cc-main .cm__btn-group { grid-auto-flow: column; margin-top: 0 !important; }
  #cc-main .cm__btn { margin-top: 5px !important; margin-left: 5px; }
  #cc-main .cm__btn:first-child { margin-left: 0; }
}

html {
  /* Every in-page anchor lands just below the sticky header (72 px, 56 px on phone). */
  scroll-padding-top: calc(var(--vm-site-header-h) + var(--s5));
  background: var(--g-page);
  color: var(--t-body);
  font-family: var(--vm-font);
  font-size: 100%;
  text-rendering: optimizeLegibility;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--g-page);
  color: var(--t-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  hyphens: manual;
  overflow-wrap: break-word;
}

main,
.reading__article,
.article-section,
.article-section__prose {
  min-width: 0;
  max-width: 100%;
}

body.is-menu-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Form fields at 16 px: iOS Safari zooms into any field set smaller and stays zoomed. */
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
  font-size: max(1rem, 1em);
}

button,
summary {
  color: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

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

h1,
h2,
h3,
p,
blockquote,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: var(--vm-w-extrabold);
  letter-spacing: var(--vm-track-display);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--vm-w-bold);
  line-height: var(--lh-h2);
  margin-bottom: var(--sp-h2-text);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--vm-w-bold);
  line-height: 1.3;
  margin-bottom: var(--sp-h3-text);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: calc(var(--z-overlay) + 1);
  top: var(--s3);
  left: var(--s3);
  padding: var(--s3) var(--s4);
  transform: translateY(-180%);
  background: var(--vm-white);
  color: var(--vm-ink-100);
  font-weight: var(--vm-w-semibold);
}

.skip-link:focus {
  transform: translateY(0);
}

.tag,
.site-footer h2 {
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--r-0);
  font-weight: var(--vm-w-semibold);
  line-height: 1.2;
  text-decoration: none;
}

.button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--vm-blue-100);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

/* Header */
/* Native template parts otherwise confine the sticky header to its own height. */

/* The mExpe rating strip above the header, as on the live site; it scrolls away, the header stays. */

.rating-strip {
  height: var(--rating-strip-h);
  background: var(--vm-ink-20);
}

.rating-strip iframe,
.mexpe-reviews iframe {
  display: block;
  width: 100%;
  border: 0;
}

.rating-strip iframe {
  height: 100%;
}

.wp-site-blocks > .wp-block-template-part:has(> .rating-strip) {
  top: calc(-1 * var(--rating-strip-h));
}

.site-header {
  position: sticky;
  z-index: var(--z-header);
  top: 0;
  height: 72px;
  background: var(--g-dark);
  color: var(--t-on-dark);
}

.site-header.is-scrolled {
  background: var(--vm-ink-100);
  box-shadow: var(--shadow-dark);
}

.site-header__inner {
  display: flex;
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  height: 100%;
  align-items: center;
  gap: clamp(var(--s3), 1.5vw, var(--s5));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header__brand {
  flex: 0 0 auto;
  min-width: var(--vm-logo-min-h);
}

.site-header__brand img {
  display: block;
  width: auto;
  height: 40px;
}

@media (max-width: 767px) {
  .site-header__brand img {
    height: 30px;
  }
}

.desktop-nav {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: center;
  gap: clamp(var(--s2), 1vw, var(--s4));
  align-self: stretch;
}

.site-header__group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.desktop-nav__trigger,
.desktop-nav__link,
.site-header__shop {
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  color: var(--t-on-dark);
  font-size: 0.875rem;
  font-weight: var(--vm-w-regular);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.desktop-nav__trigger {
  cursor: pointer;
}

.desktop-nav__trigger::after {
  width: 7px;
  height: 7px;
  margin: 0 0 4px 8px;
  border-right: 1px solid var(--vm-white);
  border-bottom: 1px solid var(--vm-white);
  content: "";
  transform: rotate(45deg);
}

.desktop-nav__trigger::before,
.desktop-nav__link::before {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  height: 2px;
  background: var(--vm-blue-100);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

.desktop-nav__link {
  position: relative;
}

.nav-panel {
  position: absolute;
  top: 72px;
  left: -24px;
  display: grid;
  visibility: hidden;
  width: min(480px, calc(100vw - 40px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--s6);
  padding: var(--s5);
  transform: translateY(-8px);
  border-top: 3px solid var(--vm-blue-100);
  background: var(--g-dark);
  box-shadow: var(--shadow-dark), 0 0 0 1px color-mix(in srgb, var(--vm-white) 12%, transparent);
  color: var(--t-on-dark);
  pointer-events: none;
}

.nav-panel a {
  display: flex;
  min-height: 42px;
  align-items: center;
  padding: var(--s2) var(--s3);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}

.site-header__group:hover .nav-panel,
.site-header__group:focus-within .nav-panel,
.site-header__group.is-open .nav-panel {
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header__group.is-dismissed .nav-panel {
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}

.site-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s4);
}

.menu-toggle,
.mobile-nav {
  display: none;
}

/* Page header and shared tag */
/* F433: source contextual navigation, quiet and naturally wrapping. */
.site-header__write {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  color: var(--t-on-dark);
  font-size: 0.8125rem;
  letter-spacing: var(--vm-track-label);
  text-decoration: none;
}
.mobile-nav__contact .mobile-nav__write {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-self: start;
}

.site-header__write:hover,
.mobile-nav__write:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-header__write:focus-visible,
.mobile-nav__write:focus {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.page-header__lede {
  max-width: var(--w-prose);
  margin-bottom: 0;
  color: var(--t-on-dark-muted);
  font-size: var(--fs-lede);
  font-weight: var(--vm-w-medium);
  line-height: var(--lh-lede);
}

.tag {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 18px 7px 22px;
  border-radius: var(--r-media);
  background: var(--vm-ink-20);
  color: var(--vm-ink-100);
}

.tag__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 4px;
  background: var(--vm-blue-100);
  transform: skewX(-22.77deg);
}

.tag--derma {
  background: var(--vm-nude-20);
}

.tag--derma .tag__bar {
  background: var(--vm-nude-100);
}

/* Plastic-surgery stream: the mauve family, tints behind ink text, the 100 % only as the bar. */
.tag--plast {
  background: var(--vm-mauve-20);
}

.tag--plast .tag__bar {
  background: var(--vm-mauve-100);
}

.stream--plast {
  --g-wash: var(--vm-ink-10);
  --g-wash-2: var(--vm-ink-20);
}

.chip {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 26px;
  border-radius: var(--r-media);
  background: var(--g-wash);
  color: var(--vm-ink-100);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-medium);
  line-height: 1.35;
  text-decoration: none;
}

.reading__article {
  min-width: 0;

}

.article-intro,
.article-section {

}

.article-intro {
  padding-bottom: var(--sect-pad);
}

.article-intro p {
  grid-column: 1;
  margin-bottom: 0;
  font-size: var(--fs-lede);
  font-weight: var(--vm-w-light);
  line-height: 1.6;
}

/* Nested clinic explanations are body copy, not a second page lede. */
.article-intro > .article-section__prose > p {
  font-size: var(--fs-body);
  font-weight: var(--vm-w-regular);
  line-height: var(--lh-body);
}

.article-section {
  padding: 0 0 var(--sect-pad);
}

.article-section:last-child {
  padding-bottom: 0;
}

.article-section > h2 {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--sp-h2-text);
}

.article-section > h2 > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-header__lede,
.article-section p,
.form-band p,
.site-footer a,
.site-footer span {
  overflow-wrap: anywhere;
}

.article-section__prose {
  min-width: 0;

}

.article-section__margin {
  min-width: 0;

}

.article-section__prose > p {
  max-width: var(--w-prose);
  margin-bottom: var(--sp-p);
}

.article-section__prose > h3 {
  margin: var(--sp-comp) 0 var(--sp-h3-text);
}

/* A label inside the article intro stays a label (the intro's lede-size paragraph rule would win). */

.valve {
  width: 100%;
  overflow: visible;
}

.vm-V1,
.vm-V2 {
  transform-box: fill-box;
  transform-origin: center;
}

.vm-V1 {
  fill: var(--vm-blue-100);
}

.vm-V2 {
  fill: var(--vm-ink-80);
}

.is-open .vm-V1 {
  transform: translateX(calc(-1 * var(--valve-part)));
}

.is-open .vm-V2 {
  transform: translateX(var(--valve-part));
}

.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s7);
  padding: 0;
  list-style: none;
}

.chip-grid .chip {
  min-height: 58px;
}

/* Informational lists are not navigation controls; keep linked lists untouched. */

.stream--zilni .reading__article .chip-grid:not(:has(a, button, input, select, textarea)) {
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding-left: var(--s5);
  list-style: disc;
}

.stream--zilni .reading__article .chip-grid:not(:has(a, button, input, select, textarea)) > li.chip {
  display: list-item;
  min-height: 0;
  padding: 0;
  clip-path: none;
  background: transparent;
  font-size: var(--fs-body);
  font-weight: var(--vm-w-regular);
  line-height: var(--lh-body);
}

.definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0 0 var(--s7);
}

.definition-grid > div {
  padding-bottom: var(--s4);
  border-bottom: var(--line-light);
}

.definition-grid dt {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin: 0 0 var(--s3);
  padding: 7px 24px;
  border-radius: var(--r-media);
  background: var(--g-wash);
  color: var(--vm-ink-100);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-semibold);
}

.definition-grid dd {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

.plain-list {
  display: grid;
  gap: var(--s2);
  margin: 0 0 var(--s6);
  padding-left: var(--s5);
}

.arrow-links {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s7);
}

.arrow-card {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: var(--line-light);
  color: var(--vm-ink-100);
  font-weight: var(--vm-w-semibold);
  text-decoration: none;
}

.arrow-card__arrow {
  width: 14px;
  height: 16px;
  flex: 0 0 14px;
}

.reference {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: var(--line-light);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* Preserve the entire clinical original at a reading-page, not poster, scale. */

/* FAQ */
.faq-list {
  border-top: var(--line-light);
}

.faq-item {
  border-bottom: var(--line-light);
}

.faq-item summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) 0;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--vm-w-semibold);
  line-height: 1.45;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .valve {
  width: 20px;
  flex: 0 0 20px;
}

/* Open answer: the V turns over (a closing chevron) and takes the ink-blue, so the state reads
   at a glance; the stroke parting alone was a 1-2px shift nobody could see. */
.faq-item[open] summary .valve {
  transform: rotate(180deg);
}

.faq-item[open] summary .vm-V2 {
  fill: var(--vm-blue-100);
}

.faq-item__answer {
  padding: 0 var(--s7) var(--s5) 0;
}

.faq-item__answer p {
  margin: 0;
}

/* Form band */
.form-band {
  background: var(--g-dark);
  color: var(--t-on-dark);
}

.form-band__inner {
  display: grid;
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--sp-comp);
  margin: 0 auto;
  padding: var(--sect-pad) var(--gutter);
}

.form-band__intro h2 {
  margin: var(--s5) 0;
  color: var(--t-on-dark);
}

.form-band__intro > p:not(.voice-label) {
  max-width: 440px;
  color: var(--t-on-dark-muted);
  font-size: var(--fs-lede);
  font-weight: var(--vm-w-light);
}

/* Light muted text on the dark band thins out on phone screens (WebKit most of all). */
@media (max-width: 767px) {
  .form-band__intro > p:not(.voice-label) {
    font-weight: var(--vm-w-regular);
  }
}

.form-band__contact {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s6);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--vm-w-medium);
}

.form-band__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.form-band__form label:not(.form-check) {
  display: grid;
  gap: var(--s2);
  color: var(--t-on-dark);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-semibold);
}

.form-band__form input:not([type="checkbox"]),
.form-band__form select,
.form-band__form textarea,
.newsletter-form input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: var(--line-light);
  border-radius: var(--r-input);
  background: var(--vm-white);
  color: var(--vm-ink-100);
}

.form-band__form textarea {
  min-height: 136px;
  resize: vertical;
}

/* iOS Safari paints a native grey menulist unless the appearance is reset. */
.form-band__form select,
.contact-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background: var(--vm-white) url(../icon-select.svg) no-repeat right 12px center / 20px 20px;
}

.form-band__form input:focus,
.form-band__form select:focus,
.form-band__form textarea:focus,
.newsletter-form input:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.form-band__wide {
  grid-column: 1 / -1;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: var(--t-on-dark-muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.form-check input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 2px 0 0;
  accent-color: var(--vm-ink-100);
}

/* Footer and M7 */
.site-footer {
  overflow: hidden;
  border-top: var(--line-dark);
  background: var(--g-dark);
  color: var(--t-on-dark);
}

.site-footer__inner,
.site-footer__newsletter,
.page-newsletter__inner {
  display: grid;
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  grid-template-columns: 1.05fr repeat(3, minmax(160px, 1fr));
  gap: var(--s7);
  margin: 0 auto;
  padding: var(--s8) var(--gutter);
}

/* The live procedure pages' numbered steps ("01" above each step title) */

/* The live sidebar's newsletter box, closing the page content on the pages that carry it */
.page-newsletter {
  border-top: var(--line-light);
  background: var(--g-wash);
}

.page-newsletter__inner {
  gap: var(--s5) var(--s7);
  padding-block: var(--s7);
}

.page-newsletter h2 {
  margin: 0 0 var(--s2);
  color: var(--vm-ink-100);
  font-size: var(--fs-h3);
}

.page-newsletter__intro p {
  margin: 0;
  color: var(--t-body);
}

.page-newsletter .newsletter-form .form-check {
  color: var(--t-body);
}

.page-newsletter .newsletter-form .form-check a {
  color: var(--vm-ink-100);
}

.page-newsletter .newsletter-form input[type="email"] {
  border: 1px solid var(--vm-ink-40);
}

/* The live footer's newsletter box, above the link columns, and the page box: the footer's measure,
   the form band's columns */
.site-footer__newsletter,
.page-newsletter__inner {
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
}

.site-footer__newsletter {
  padding-bottom: 0;
}

.site-footer .site-footer__newsletter h2 {
  color: var(--t-on-dark);
}

.site-footer__newsletter-intro p {
  max-width: 440px;
  margin: 0;
  color: var(--t-on-dark-muted);
}

.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3) var(--s4);
  align-items: start;
}

.newsletter-form .form-check,
.newsletter-form .form-band__status {
  grid-column: 1 / -1;
}

.newsletter-form .form-check a {
  color: var(--t-on-dark);
  text-decoration: underline;
}

@media (max-width: 899px) {
  .site-footer__newsletter,
.page-newsletter__inner {
    grid-template-columns: 1fr;
  }
}

.site-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: var(--s6);
}

.site-footer__lockup {
  display: block;
  width: auto;
  height: 96px;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}

.site-footer h2 {
  margin: 0 0 var(--s3);
  color: var(--t-on-dark-muted);
}

.site-footer__contact h2:not(:first-child) {
  margin-top: var(--s6);
}

.site-footer a,
.site-footer span {
  font-size: 0.94rem;
  line-height: 1.5;
}

@media (pointer: coarse) {
  .site-footer__column {
    gap: 0;
  }

  .site-footer__column a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 1239px) {
  .desktop-nav,
.site-header__actions {
    display: none;
  }

  .site-header__inner {
    justify-content: space-between;
  }

  .menu-toggle {
    position: relative;
    z-index: calc(var(--z-overlay) + 1);
    display: grid;
    width: 44px;
    height: 44px;
    place-content: center;
    gap: 8px;
    background: transparent;
    cursor: pointer;
  }

  .site-header__brand {
    position: relative;
    z-index: calc(var(--z-overlay) + 1);
  }

  .menu-toggle__stroke {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--vm-white);
    transform: skewY(-22.77deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__stroke:first-child {
    transform: translateY(5px) rotate(22.77deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__stroke:last-child {
    transform: translateY(-5px) rotate(-22.77deg);
  }

  .mobile-nav {
    position: fixed;
    z-index: var(--z-overlay);
    inset: 0;
    display: block;
    visibility: hidden;
    overflow: hidden auto;
    min-height: 100dvh;
    padding: calc(72px + var(--s5)) var(--gutter) var(--s6);
    /* A closed off-canvas transform doubled the mobile document width. Keep
       the fixed panel inside the viewport and reveal it with opacity. */
    transform: translateX(0);
    opacity: 0;
    background: var(--g-dark);
    color: var(--t-on-dark);
    pointer-events: none;
  }

  .mobile-nav.is-open {
    visibility: visible;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav__geometry {
    position: fixed;
    z-index: -1;
    right: -36vw;
    bottom: -10vw;
    width: 120vw;
    max-width: none;
    pointer-events: none;
  }

  .mobile-nav__inner {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 680px);
    gap: var(--s2);
    margin: 0 auto;
  }

  .mobile-nav details,
.mobile-nav__inner > a:not(.button, .btn) {
    border-bottom: var(--line-dark);
  }

  .mobile-nav summary,
.mobile-nav__inner > a:not(.button, .btn) {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) 0;
    font-size: 1.35rem;
    font-weight: var(--vm-w-extrabold);
    letter-spacing: var(--vm-track-display);
    line-height: 1.2;
    list-style: none;
    text-decoration: none;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav summary::after {
    width: 18px;
    height: 18px;
    border-right: 2px solid var(--vm-blue-100);
    border-bottom: 2px solid var(--vm-blue-100);
    content: "";
    transform: rotate(45deg);
  }

  .mobile-nav details[open] summary::after {
    transform: rotate(225deg);
  }

  .mobile-nav details > a {
    display: block;
    padding: var(--s3) var(--s5);
    color: var(--t-on-dark-muted);
    font-size: 0.98rem;
    line-height: 1.35;
    text-decoration: none;
  }

  .mobile-nav__contact {
    display: grid;
    gap: var(--s2);
    margin: var(--s5) 0;
    font-variant-numeric: tabular-nums;
    font-weight: var(--vm-w-medium);
  }

  .article-intro,
.article-section {
    display: block;
  }

  .article-section__margin {
    margin: var(--s6) 0;
  }

  .article-section__margin:empty {
    display: none;
  }
}

@media (max-width: 767px) {
  .site-header {
    height: 56px;
  }

  .mobile-nav {
    padding-top: calc(56px + var(--s4));
  }

  .page-header__inner {
    padding-top: var(--band-pad);
    padding-bottom: var(--band-pad);
  }

  .page-header__geometry {
    right: -46vw;
    bottom: -10%;
    width: 148vw;
  }

  .page-header h1 {
    margin: var(--s4) 0;
  }

  .article-intro {
    padding-bottom: var(--sect-pad);
  }

  .article-section > h2 {
    gap: var(--s3);
    margin-bottom: var(--sp-h2-text);
  }

  .chip-grid,
.definition-grid {
    grid-template-columns: 1fr;
  }

  .form-band__inner {
    display: block;
    padding-top: var(--sect-pad);
    padding-bottom: var(--sect-pad);
  }

  .form-band__form {
    grid-template-columns: 1fr;
    margin-top: var(--s7);
  }

  .form-band__wide {
    grid-column: 1;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--s7) var(--s5);
  }

  .site-footer__brand,
.site-footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479px) {
  .faq-item__answer {
    padding-right: 0;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__brand,
.site-footer__contact {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button,
.button::after,
.desktop-nav__trigger::before,
.desktop-nav__link::before,
.nav-panel,
.nav-panel a,
.menu-toggle__stroke,
.mobile-nav,
.mobile-nav summary::after,
.arrow-card,
.arrow-card__arrow,
.faq-item summary .valve,
.vm-V1,
.vm-V2 {
    transition-duration: var(--t-fast);
    transition-property: background-color, color, transform, visibility;
    transition-timing-function: var(--ease-valve);
  }

  .mobile-nav {
    transition-duration: var(--t-med);
    transition-property: opacity, visibility;
  }

  .vm-V1,
.vm-V2 {
    transition-duration: var(--t-slow);
    transition-property: transform;
  }

  .button:hover,
.button:focus-visible {
    transform: translateY(-2px);
  }

  .button:hover::after,
.button:focus-visible::after,
.desktop-nav__trigger:hover::before,
.desktop-nav__trigger:focus-visible::before,
.desktop-nav__link:hover::before,
.desktop-nav__link:focus-visible::before {
    transform: scaleX(1);
  }

  .nav-panel a:hover,
.nav-panel a:focus-visible {
    background: color-mix(in srgb, var(--vm-white) 6%, transparent);
  }

  .arrow-card:hover,
.arrow-card:focus-visible {
    background: var(--g-wash);
  }

  .arrow-card:hover .arrow-card__arrow,
.arrow-card:focus-visible .arrow-card__arrow {
    transform: translateX(8px);
  }

  @keyframes footer-arrival {
    to {
      stroke-dashoffset: 0;
    }
  }
}

/* Homepage */
/* Approved home hero token context (68ea31c), isolated from the v3 page scale. */
.home-hero {
  --t-on-dark-accent: var(--vm-on-ink-accent);
  --s9: 96px;
  --w-page: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --fs-hero: clamp(2.5rem, 6vw, 4.4rem);
  --fs-lede: clamp(1.125rem, 1.7vw, 1.3rem);
  --fs-body: 1.0625rem;
  --vm-track-label: 0.22em;
  --shadow-dark: 0 24px 48px -20px color-mix(in srgb, var(--vm-black) 45%, transparent);
  --focus-ring: 2px solid var(--vm-ink-100);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.button--home-primary:focus-visible,
.button--home-ghost:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--vm-white);
}

.home-shop-notice {
  margin: 0;
  padding: var(--s2) var(--gutter);
  background: var(--g-dark);
  color: var(--t-on-dark);
  font-size: var(--fs-small);
  line-height: calc(var(--s4) + var(--s1));
  text-align: center;
}

.home-shop-notice a {
  color: inherit;
  text-decoration: underline;
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: max(640px, calc(100svh - 72px));
  overflow: hidden;
  background: var(--g-dark);
  color: var(--t-on-dark);
}

.home-hero__climb {
  position: absolute;
  z-index: 5;
  bottom: var(--s7);
  left: var(--s3);
  color: var(--vm-ink-60);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  line-height: 1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.home-hero__geometry {
  position: absolute;
  z-index: -3;
  right: -50vw;
  bottom: -62vw;
  width: 140vw;
  max-width: none;
  pointer-events: none;
}

.home-hero__valve {
  position: absolute;
  z-index: -1;
  right: -4vw;
  bottom: -21vw;
  width: min(78vw, 1100px);
  pointer-events: none;
}

.home-hero__photo {
  --home-photo-height: clamp(420px, 42vw, 590px);
  --home-photo-cut: clamp(176px, 17.63vw, 248px);
  position: absolute;
  z-index: -2;
  top: 50%;
  right: clamp(-120px, -3vw, -20px);
  width: min(68vw, 900px);
  height: var(--home-photo-height);
  overflow: hidden;
  clip-path: polygon(var(--home-photo-cut) 0, 100% 0, calc(100% - var(--home-photo-cut)) 100%, 0 100%);
  box-shadow: var(--shadow-dark);
  transform: translateY(-50%);
}

.home-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-hero__veil {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, var(--g-dark) 0 28%, color-mix(in srgb, var(--vm-ink-100) 88%, transparent) 50%, color-mix(in srgb, var(--vm-ink-100) 28%, transparent) 76%, transparent 100%);
  pointer-events: none;
}

.home-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  align-items: center;
  margin: 0 auto;
  padding: var(--s9) var(--gutter);
}

.home-hero__content {
  width: min(72%, 820px);
  padding-left: clamp(0px, 4vw, 48px);
}

.home-hero__eyebrow {
  margin-bottom: var(--s5);
  color: var(--t-on-dark-accent);
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.home-hero h1 {
  max-width: 790px;
  margin-bottom: var(--s5);
  color: var(--t-on-dark);
  font-size: var(--fs-hero);
  line-height: 1.05;
}

.home-hero__subline {
  display: block;
  max-width: 580px;
  margin-bottom: 0;
  color: var(--t-on-dark-muted);
  font-size: var(--fs-lede);
  font-weight: var(--vm-w-light);
  line-height: 1.55;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s7);
}

.button--home-primary {
  background: var(--vm-white);
  color: var(--vm-ink-100);
}

.button--home-ghost {
  border: 1px solid var(--vm-white);
  background: transparent;
  color: var(--vm-white);
}

.home-hero__pulse {
  --pulse-track: clamp(280px, 40vh, 560px);
  position: absolute;
  z-index: 4;
  right: max(var(--gutter), calc((100vw - var(--w-page)) / 2));
  bottom: 0;
  width: 2px;
  height: var(--pulse-track);
  background: color-mix(in srgb, var(--vm-blue-100) 28%, transparent);
  pointer-events: none;
}

.home-hero__pulse::before,
.home-hero__pulse::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 84px;
  background: linear-gradient(to top, transparent, var(--vm-blue-100), transparent);
  content: "";
  opacity: 0;
}

.home-flow {
  --home-track-edge: max(var(--gutter), calc((100vw - var(--w-page)) / 2));
  position: relative;
  display: grid;
}

.home-flow__bands {
  grid-area: 1 / 1;
  min-width: 0;
}

.article-section--subheadings > .article-section__prose > h3.article-section__nav-heading[data-reading-section] {
}

.home-band {
  position: relative;
  overflow: hidden;
  padding: var(--sect-pad) 0;
}

.home-band__inner {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  margin: 0 auto;
  padding: 0 calc(var(--gutter) + 64px) 0 var(--gutter);
}

.home-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.home-pillar {
  position: relative;
  min-height: 120px;
  padding: var(--s6);
  border-radius: var(--r-media);
  background: var(--g-panel);
}

.home-pillar h3 {
  max-width: 210px;
  margin-bottom: 0;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.problem-grid a {
  display: flex;
  min-height: 112px;
  align-items: center;
  padding: var(--s5) clamp(var(--s6), 4vw, var(--s7));
  border-radius: var(--r-media);
  background: var(--vm-white);
  color: var(--vm-ink-100);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  font-weight: var(--vm-w-semibold);
  line-height: 1.35;
  text-decoration: none;
}

.problem-grid a:last-child {
  grid-column: 1 / -1;
  width: calc(50% - (var(--s4) / 2));
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s7);
}

.service-card {
  position: relative;
  display: flex;
  min-height: 310px;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s6);
  border: var(--line-dark);
  background: color-mix(in srgb, var(--vm-white) 6%, transparent);
  color: var(--t-on-dark);
  text-decoration: none;
}

.service-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--vm-blue-100);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

.service-card h3 {
  margin: var(--s6) 0 var(--s4);
}

.service-card p {
  display: -webkit-box;
  margin-bottom: var(--sp-p);
  overflow: hidden;
  color: var(--t-on-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.service-card__media {
  margin: 0 0 var(--s4);
  overflow: hidden;
  aspect-ratio: 5 / 3;
  border: var(--line-light);
  background: var(--g-panel);
}

.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.review-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

/* three to a row (two below 1200 px, one on phones); a short last row shares the width */
.review-card {
  position: relative;
  flex: 1 1 30%;
  min-width: 0;
  margin: 0;
  padding: var(--s6);
  border: var(--line-light);
  background: var(--vm-white);
  box-shadow: var(--shadow-lift);
  color: var(--vm-ink-100);
}

.review-card p {
  margin-bottom: var(--sp-p);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-style: italic;
  font-weight: var(--vm-w-light);
  line-height: 1.5;
}

.trust-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s7);
}

.press-shelf {
  display: flex;
  gap: var(--s3);
  padding-bottom: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.press-shelf img {
  width: 176px;
  height: 126px;
  flex: 0 0 176px;
  border: var(--line-light);
  background: var(--g-panel);
  object-fit: cover;
  scroll-snap-align: start;
}

.home-faq__inner {
  max-width: calc(900px + (2 * var(--gutter)));
  margin-left: max(0px, calc((100vw - var(--w-page)) / 2));
}

@media (max-width: 1199px) {
  .home-flow {
    display: block;
  }

  .home-band__inner {
    padding-right: var(--gutter);
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-card {
    flex-basis: 40%;
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: calc(100svh - 56px);
  }

  .home-hero__climb {
    display: none;
  }

  .home-hero__geometry {
    right: -92vw;
    bottom: -54vw;
    width: 210vw;
  }

  .home-hero__valve {
    right: -46vw;
    bottom: -8vw;
    width: 148vw;
  }

  .home-hero__photo {
    --home-photo-height: 440px;
    --home-photo-cut: 185px;
    top: 58%;
    right: -42vw;
    width: 132vw;
  }

  .home-hero__veil {
    background: linear-gradient(to bottom, var(--g-dark) 0 38%, color-mix(in srgb, var(--vm-ink-100) 84%, transparent) 64%, color-mix(in srgb, var(--vm-ink-100) 48%, transparent) 100%);
  }

  .home-hero__inner {
    align-items: flex-start;
    padding-top: var(--s8);
    padding-bottom: var(--s8);
  }

  .home-hero__content {
    width: 100%;
    padding-left: 0;
  }

  .home-hero h1 {
    max-width: 560px;
  }

  .home-hero__actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: var(--s6);
  }

  .home-hero__actions .button {
    width: 100%;
  }

  /* Stacked hero: the line has no edge to run along and reads as a glitch over the photo. */
  .home-hero__pulse {
    display: none;
  }

  .home-band {
    padding: var(--sect-pad) 0;
  }

  .home-pillars,
.problem-grid,
.service-grid,
.trust-links {
    grid-template-columns: 1fr;
  }

  .problem-grid a:last-child {
    grid-column: auto;
    width: 100%;
  }

  .service-card {
    min-height: 270px;
  }

  .review-card {
    flex-basis: 100%;
  }

  .home-faq__inner {
    margin-left: auto;
  }

}

@media (max-width: 479px) {
  .home-hero__eyebrow {
    margin-bottom: var(--s4);
  }

  .home-hero__subline {
    max-width: 310px;
  }

  .home-pillar {
    min-height: 160px;
  }

  .problem-grid a {
    min-height: 96px;
    padding-right: var(--s6);
    padding-left: var(--s6);
    border-radius: var(--r-media);
  }

  .review-card {
    padding: var(--s5);
  }

}

/* Original homepage photography: keep the supplied compositions whole. The
   surrounding VM geometry supplies the lean without cutting faces or procedures. */
/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-hero__photo {
  right: 0;
  width: min(100%, 1240px);
  height: auto;
  aspect-ratio: 3 / 2;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
}

.home-hero__photo picture,
.home-art-direction {
  display: block;
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-hero__photo img {
  height: auto;
  object-fit: contain;
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-hero__content {
  width: min(55%, 680px);
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-hero__veil {
  background: linear-gradient(90deg, var(--g-dark) 0 24%, color-mix(in srgb, var(--vm-ink-100) 90%, transparent) 43%, transparent 62%);
}

.home-original-photo {
  margin: 0;
  border-bottom: 3px solid var(--vm-blue-100);
  box-shadow: var(--shadow-panel);
}

.home-original-photo img,
.home-art-direction img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.home-derma-promotion {
  position: relative;
  margin-block: var(--s7);
}

@media (max-width: 767px) {
  .home-hero__photo {
    top: auto;
    bottom: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
    transform: none;
    clip-path: none;
  }

  .home-hero__content {
    width: 100%;
  }

  .home-hero__veil {
    background: linear-gradient(to bottom, var(--g-dark), color-mix(in srgb, var(--vm-ink-100) 86%, transparent) 65%, color-mix(in srgb, var(--vm-ink-100) 42%, transparent));
  }

}

@media (prefers-reduced-motion: no-preference) {
  .home-hero__content,
  .home-hero__photo,
  .home-hero__valve .vm-V1,
  .home-hero__valve .vm-V2 {
    transition-duration: 900ms;
    transition-property: opacity, transform;
    transition-timing-function: var(--ease-valve);
  }

  .has-js .home-hero:not(.is-ready) .home-hero__content {
    opacity: 0.001;
    transform: translateY(24px);
  }

  .has-js .home-hero:not(.is-ready) .home-hero__photo {
    opacity: 0.001;
    transform: translateY(calc(-50% + 24px));
  }

  .has-js .home-hero:not(.is-ready) .home-hero__valve .vm-V1 {
    transform: translateX(-14%);
  }

  .has-js .home-hero:not(.is-ready) .home-hero__valve .vm-V2 {
    transform: translateX(14%);
  }

  .home-hero.is-ready.is-active .home-hero__pulse::before,
  .home-hero.is-ready.is-active .home-hero__pulse::after {
    animation: home-hero-current 3200ms cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  }

  .home-hero.is-ready.is-active .home-hero__pulse::before {
    animation-delay: 1200ms;
  }

  .home-hero.is-ready.is-active .home-hero__pulse::after {
    animation-delay: 2800ms;
  }

  .problem-grid a,
.service-card,
.service-card::after,
.service-card__more span,
.service-card__more .chev {
    transition-duration: var(--t-fast);
    transition-property: background-color, box-shadow, transform;
    transition-timing-function: var(--ease-valve);
  }

  .problem-grid a:hover,
.problem-grid a:focus-visible {
    background: var(--g-wash-2);
    transform: translateY(-3px);
  }

  .service-card:hover,
.service-card:focus-visible {
    box-shadow: var(--shadow-lift);
    transform: translateY(-6px);
  }

  .service-card:hover::after,
.service-card:focus-visible::after {
    transform: scaleX(1);
  }

  .service-card:hover .service-card__more span,
.service-card:focus-visible .service-card__more span,
.service-card:hover .service-card__more .chev,
.service-card:focus-visible .service-card__more .chev {
    transform: translateX(4px);
  }

  @keyframes home-hero-current {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    10% {
      opacity: 1;
    }

    78% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translateY(calc(-1 * (var(--pulse-track) - 84px)));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__pulse::before,
  .home-hero__pulse::after {
    display: none;
  }
}

/* Method pages: patient references */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

@media (max-width: 767px) {
  .voice-grid {
    grid-template-columns: 1fr;
  }
}

/* W4: team, clinic interview, biographies and clinic gallery */
.article-section__wide {
  min-width: 0;
  grid-column: 1 / -1;
}

.team-strip.team-strip--n7 {
  --team-n: 7;
}

.team-strip {
  --team-n: 5;
  min-width: 0;
  padding: var(--s5) 0;
  overflow: hidden;
  background: var(--g-panel);
}

.team-strip__track {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.team-card {
  position: relative;
  display: flex;
  min-width: 0;
  /* one stroke per doctor: the track divides among --team-n cards (5 by default, 7 on the
     homepage since two doctors joined) with the 126px stroke overlap kept */
  flex: 0 0 calc(((100% - 126px) / var(--team-n, 5)) + 126px);
  flex-direction: column;
  margin-left: -126px;
  color: var(--vm-ink-100);
  text-decoration: none;
  pointer-events: none;
}

/* Keep transparent overlap areas from intercepting another doctor's portrait. */

.team-card__portrait,
.team-card__name,
.team-card__role {
  pointer-events: auto;
}

.team-card:first-child {
  margin-left: 0;
}

.team-strip--m6 .team-card + .team-card {
  margin-left: -126px;
}

.team-card__portrait {
  position: relative;
  display: block;
  height: 300px;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--vm-ink-20);
}

.team-card__portrait::after {
  position: absolute;
  right: 126px;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--vm-blue-100);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

.team-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-card__name,
.team-card__role {
  width: calc(100% - 126px);
  overflow-wrap: anywhere;
}

.team-card__name {
  margin-top: var(--s4);
  font-weight: var(--vm-w-semibold);
  line-height: 1.3;
}

.team-card__role {
  margin-top: var(--s2);
  color: var(--vm-ink-100);
  font-size: 0.72rem;
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.team-card:hover .team-card__portrait::after,
.team-card:focus-visible .team-card__portrait::after {
  transform: scaleX(1);
}

/* Keep the focus ring inside the strip, including its first and last cards. */
.team-card:focus-visible {
  outline-offset: -2px;
  scroll-margin-block: var(--s4);
}

/* Readable label columns with the same nested diagonal portraits on each row. */
@media (min-width: 900px) {
  .team-strip__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    row-gap: var(--s7);
    padding-right: 126px;
  }

  .team-strip--m6 .team-card,
.team-strip--m6 .team-card + .team-card {
    width: calc(100% + 126px);
    margin-left: 0;
  }

  .team-card__name,
.team-card__role {
    padding-right: var(--s4);
    overflow-wrap: normal;
  }
}

.interview__item {
  margin-bottom: var(--sect-pad);
}

.interview__item:last-child {
  margin-bottom: 0;
}

h2.interview__question,
h3.interview__question {
  margin: 0 0 var(--s4);
  color: var(--vm-ink-100);
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  line-height: 1.55;
  text-transform: uppercase;
}

.interview__answer p {
  margin: 0;
}

.profile-page {
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  margin: 0 auto;
  padding: var(--sect-pad) var(--gutter);
}

.profile-lead {
  display: grid;
  max-width: 980px;
  grid-template-columns: minmax(320px, 700px) minmax(180px, 1fr);
  align-items: end;
  gap: var(--s8);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .profile-lead {
    max-width: 840px;
    grid-template-columns: minmax(320px, 520px) minmax(180px, 1fr);
  }
}

/* Close headshots need the whole face; the brand geometry stays in the header. */

.profile-cv > h2 {
  margin-bottom: var(--sp-h2-text);
}

.cv-table-wrap {
  overflow-x: auto;
}

.cv-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--vm-ink-100);
  font-variant-numeric: tabular-nums;
  font-weight: var(--vm-w-medium);
}

.cv-table tr {
  border-bottom: var(--line-light);
}

.cv-table tr:nth-child(odd) {
  background: color-mix(in srgb, var(--vm-ink-10) 50%, transparent);
}

.cv-table th,
.cv-table td {
  padding: var(--s4) var(--s5);
  vertical-align: top;
  text-align: left;
}

.cv-table th,
.cv-table td:first-child {
  width: 160px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--vm-w-medium);
  white-space: nowrap;
}

.clinic-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  padding: var(--s4);
  background: var(--g-panel);
}

.clinic-gallery__item {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--vm-ink-10);
}

.clinic-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A count that leaves two photos in the last row (5, 8, 11 ...) fills the three-column grid
   exactly when the first photo takes a double cell. */
@media (min-width: 768px) {
  .clinic-gallery:has(> :nth-child(3n/**/+2):last-child) > :first-child {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}

body.is-lightbox-open {
  overflow: hidden;
}

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  z-index: var(--z-lightbox);
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s7);
  background: var(--vm-ink-100);   /* solid: the page behind must not ghost through the photo */
}

.lightbox__image {
  max-width: 92vw;
  max-height: calc(86vh - 64px);
  object-fit: contain;
}

.lightbox__meta {
  position: absolute;
  right: var(--sect-pad);
  bottom: var(--s4);
  left: var(--sect-pad);
  display: flex;
  justify-content: center;
  gap: var(--s4);
  margin: 0;
  color: var(--vm-white);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.lightbox__caption:empty,
.lightbox__count:empty {
  display: none;
}

.lightbox__count {
  flex: none;
  color: var(--vm-on-ink-muted);
  font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__previous,
.lightbox__next {
  position: absolute;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  background: transparent;
  cursor: pointer;
}

.lightbox__close {
  top: var(--s4);
  right: var(--s4);
}

.lightbox__close::before,
.lightbox__close::after {
  position: absolute;
  width: 30px;
  height: 2px;
  background: var(--vm-white);
  content: "";
}

.lightbox__close::before {
  transform: rotate(22.77deg);
}

.lightbox__close::after {
  transform: rotate(-22.77deg);
}

.lightbox__previous,
.lightbox__next {
  top: 50%;
  border: 1px solid color-mix(in srgb, var(--vm-white) 34%, transparent);
  background: color-mix(in srgb, var(--vm-ink-100) 72%, transparent);
  transform: translateY(-50%);
}

.lightbox__previous:hover,
.lightbox__next:hover {
  border-color: var(--vm-white);
}

.lightbox__previous {
  left: var(--s4);
  transform: translateY(-50%) rotate(180deg);
}

.lightbox__next {
  right: var(--s4);
}

.lightbox__previous::before,
.lightbox__next::before {
  width: 28px;
  height: 2px;
  background: var(--vm-white);
  content: "";
}

.lightbox__previous::after,
.lightbox__next::after {
  position: absolute;
  right: 11px;
  width: 14px;
  height: 2px;
  background: var(--vm-white);
  content: "";
  transform: rotate(22.77deg);
  transform-origin: right;
}

@media (max-width: 899px) {
  .team-strip {
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .team-strip::-webkit-scrollbar {
    display: none;
  }

  .team-strip:focus-within {
    scroll-snap-type: none;
  }

  .team-strip__track {
    width: calc(289px + (var(--team-n, 5) - 1) * 180px);   /* 1009px for 5, 1369px for 7 */
  }

  .team-card {
    flex-basis: 289px;
    margin-left: -109px;
    scroll-snap-align: start;
  }

  .team-strip--m6 .team-card + .team-card {
    margin-left: -109px;
  }

  .team-card__portrait {
    height: 260px;
    border-radius: var(--r-media);
  }

  .team-card__portrait::after {
    right: 109px;
  }

  .team-card__name,
.team-card__role {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .clinic-gallery {
    grid-template-columns: 1fr;
  }

  .profile-page {
    padding-top: var(--sect-pad);
    padding-bottom: var(--sect-pad);
  }

  .profile-lead {
    display: block;
  }

  .profile-portrait {
    max-width: 520px;
    margin: 0 auto;
  }

  .profile-role {
    max-width: 520px;
    margin: var(--s5) auto 0;
  }

  .profile-interview {
    margin-top: var(--sect-pad);
    margin-bottom: var(--sect-pad);
  }

  .cv-table th,
.cv-table td {
    padding: var(--s3);
  }

  .cv-table th,
.cv-table td:first-child {
    width: 104px;
    white-space: normal;
  }

  .clinic-gallery {
    padding: var(--s3);
  }

  .lightbox {
    padding: var(--s4) var(--s4) 132px;
  }

  .lightbox__image {
    max-height: calc(100vh - 196px);
  }

  /* On a phone the photo fills the width: the arrows move below it, beside the counter. */
  .lightbox__previous,
.lightbox__next {
    top: auto;
    bottom: var(--s4);
  }

  .lightbox__previous {
    left: var(--s4);
    transform: rotate(180deg);
  }

  .lightbox__next {
    right: var(--s4);
    transform: none;
  }

  .lightbox__meta {
    right: var(--s4);
    bottom: 76px;
    left: var(--s4);
    flex-direction: column;
    gap: var(--s2);
    font-size: var(--fs-small);
  }

  .lightbox__count {
    position: absolute;
    right: 76px;
    bottom: -58px;
    left: 76px;
    line-height: 52px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .team-card,
.team-card__portrait::after {
    transition-duration: var(--t-fast);
    transition-property: box-shadow, transform;
    transition-timing-function: var(--ease-valve);
  }

  .has-js .team-card {
    transform: translateY(16px);
  }

  .has-js .team-strip.is-visible .team-card {
    transform: translateY(0);
  }

  .has-js .team-strip.is-visible .team-card:nth-child(2) {
    transition-delay: 60ms;
  }

  .has-js .team-strip.is-visible .team-card:nth-child(3) {
    transition-delay: 120ms;
  }

  .has-js .team-strip.is-visible .team-card:nth-child(4) {
    transition-delay: 180ms;
  }

  .has-js .team-strip.is-visible .team-card:nth-child(5) {
    transition-delay: 240ms;
  }

  .has-js .team-strip.is-visible .team-card:hover,
.has-js .team-strip.is-visible .team-card:focus-visible,
.team-card:hover,
.team-card:focus-visible {
    transform: translateY(-6px);
  }

}

/* Treatment decision and recovery components */
/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.article-section__wide {
  min-width: 0;
  grid-column: 1 / -1;
  margin-top: var(--s7);
}

.article-section__margin > * + * {
  margin-top: var(--s6);
}

.highlight-panel {
  position: relative;
  margin: var(--s6) 0;
  padding: var(--s5) var(--s6);
  overflow: hidden;
  background: var(--g-panel);
  color: var(--vm-ink-100);
}

.highlight-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 3px;
  background: var(--vm-blue-100);
  content: "";
  transform: skewY(-22.77deg);
}

.highlight-panel p:last-child {
  margin-bottom: 0;
}

.method-board__after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s2) var(--s5);
  align-items: center;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--line-light);
}

.method-board__after h3,
.method-board__after p {
  margin-bottom: 0;
}

.method-board__after .arrow-card {
  grid-row: 1 / 3;
  grid-column: 2;
}

/* Numbered protocol: recovery tips and the consultation journey */
.numbered-protocol {
  display: grid;
  gap: 0;
  margin: var(--s7) 0;
  padding: 0;
  counter-reset: protocol;
  list-style: none;
}

.numbered-protocol > li {
  position: relative;
  min-width: 0;
  padding: var(--sp-comp) 0 var(--sp-comp) clamp(76px, 10vw, 104px);
  border-top: var(--line-light);
  counter-increment: protocol;
}

.numbered-protocol > li:last-child {
  border-bottom: var(--line-light);
}

.numbered-protocol > li::before {
  position: absolute;
  top: var(--s5);
  left: 0;
  color: var(--vm-ink-20);
  content: counter(protocol, decimal-leading-zero);
  font-size: 4rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--vm-w-extrabold);
  letter-spacing: var(--vm-track-display);
  line-height: 1;
}

.numbered-protocol h3 {
  max-width: 700px;
  margin-bottom: var(--sp-h3-text);
}

.numbered-protocol p {
  max-width: var(--w-prose);
}

.numbered-protocol .chip-grid,
.numbered-protocol .plain-list {
  margin-bottom: var(--s5);
}

.numbered-protocol--journey {
  margin-top: 0;
}

.numbered-protocol--journey > li {
  padding-top: var(--sp-comp);
  padding-bottom: var(--sp-comp);
}

.numbered-protocol--journey > li:nth-child(even) {
  background: var(--g-wash);
  box-shadow: calc(-1 * var(--s6)) 0 0 var(--g-wash), var(--s6) 0 0 var(--g-wash);
}

/* Original consultation copy switches independently of the photographs. */
.consultation-copy--desktop {
  display: none;
}

@media (min-width: 992px) {
  .consultation-copy--desktop {
    display: block;
  }

  .consultation-copy--mobile {
    display: none;
  }
}

/* Original consultation photographs: one source variant per step, switching at 992 px. */
.consultation-conversation--desktop,
.consultation-ultrasound--desktop {
  display: none;
}

@media (min-width: 992px) {
  .consultation-conversation--desktop,
.consultation-ultrasound--desktop {
    display: block;
  }

  .consultation-conversation--mobile,
.consultation-ultrasound--mobile {
    display: none;
  }
}

.definition-grid--complications {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  margin-top: var(--s6);
}

.definition-grid--complications > div {
  padding: var(--s5);
  border: var(--line-light);
  background: var(--g-page);
}

.definition-grid--complications dt {
  min-height: 48px;
}

.definition-grid--complications dd > p,
.definition-grid--complications .plain-list {
  font-size: 0.9375rem;
}

@media (max-width: 1199px) {
  .article-section__wide {
    margin-top: var(--s6);
  }

}

@media (max-width: 899px) {
  /* R12: DESIGN.md 9.5 always scoped this legend to >=900px, and the build missed
     the clause. The legend is a cross-card comparison device — you read one
     criterion across several visible cards. Below 900 the grid is 1-up, so that
     premise cannot exist, and the row had degraded into a 582px swipe corridor in
     350px that hid "Cena" behind a gesture. Deleting it costs no information:
     every method card carries all four rows in its own <dl>, Cena included with
     its verbatim value. display:none also takes the inert hover controls out of
     tab order and the accessibility tree. Never render it below 900, and never
     let it scroll horizontally at any width. */

  .method-board__grid,
.definition-grid--complications {
    grid-template-columns: 1fr;
  }

  .method-card > p {
    min-height: 0;
  }
}

@media (max-width: 599px) {
  .highlight-panel,
.method-card,
.definition-grid--complications > div {
    padding: var(--s5);
  }

  .method-card__row {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }

  .method-board__after {
    display: block;
  }

  .method-board__after p {
    margin: var(--s2) 0 var(--s5);
  }

  .numbered-protocol > li,
.numbered-protocol--journey > li {
    padding: var(--sp-comp) 0 var(--sp-comp);
  }

  .numbered-protocol > li::before {
    top: var(--s3);
    font-size: 3rem;
  }

  .numbered-protocol--journey > li:nth-child(even) {
    box-shadow: calc(-1 * var(--gutter)) 0 0 var(--g-wash), var(--gutter) 0 0 var(--g-wash);
  }
}

/* W7: proof, media and clinically restrained galleries */
.media-page {
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  margin: 0 auto;
  padding: var(--sect-pad) var(--gutter);
}

/* The outer media shell owns spacing around a nested native news index. */
.media-page > .media-page:has(> .news-wall) {
  width: 100%;
  margin: 0;
  padding: 0;
}

.article-figure {
  margin: var(--s6) 0;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--line-light);
  background: var(--g-panel);
}

.article-figure figcaption {
  margin-top: var(--s2);
  font-size: 0.875rem;
  color: var(--vm-ink-100);
}

/* Video embed — the detail page's single player; the index keeps its slanted cards. */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--s7);
  border: var(--line-light);
  background: var(--vm-ink-100);
}

.arrow-links + .video-embed {
  margin-block-start: var(--s5);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.news-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s4);
}

.news-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
}

.news-pagination a,
.news-pagination [aria-current="page"] {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem .75rem;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 4px;
}

.news-pagination [aria-current="page"] {
  font-weight: 700;
  border-width: 2px;
}

.news-pagination a:hover,
.news-pagination a:focus-visible {
  text-decoration-thickness: 2px;
}

.news-card h2 a {
  color: inherit;
  text-decoration: none;
}

.news-card h2 a:hover,
.news-card h2 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.news-card__media {
  margin: 0 0 var(--s4);
  overflow: hidden;
  aspect-ratio: 5 / 3;
  border: var(--line-light);
  background: var(--g-panel);
}

.news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 270px;
  grid-column: span 4;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--s6);
  overflow: hidden;
  border: var(--line-light);
  background: var(--g-page);
  color: var(--vm-ink-100);
}

.news-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--vm-blue-100);
  content: "";
}

.news-card:nth-child(5n + 1) {
  min-height: 330px;
  grid-column: span 7;
  background: var(--g-wash);
}

.news-card:nth-child(5n + 2) {
  grid-column: span 5;
  background: var(--g-panel);
}

.news-card h2 {
  margin-bottom: var(--sp-h2-text);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: var(--vm-w-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.news-card p {
  margin-bottom: 0;
  color: var(--vm-ink-100);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.news-card__more {
  margin-top: auto;
  padding-top: var(--s4);
}

.press-proof {
  margin-top: var(--sect-pad);
  padding-top: var(--s7);
  border-top: var(--line-light);
}

.press-proof > h2 {
  margin-bottom: var(--sp-h2-text);
}

.press-shelf--proof {
  gap: var(--s4);
  padding-bottom: var(--s5);
}

.press-shelf--proof a {
  display: block;
  width: min(82vw, 320px);
  flex: 0 0 min(82vw, 320px);
  padding: var(--s3);
  border: var(--line-light);
  background: var(--g-panel);
  scroll-snap-align: start;
}

.press-shelf--proof a[data-lightbox-item]:focus-visible {
  outline-offset: -3px;
}

.press-shelf--proof img {
  width: 100%;
  height: 390px;
  border: 0;
  background: var(--vm-white);
  object-fit: contain;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.video-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: var(--line-light);
  background: var(--g-page);
  color: var(--vm-ink-100);
  text-decoration: none;
}

.video-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-media);
  background: var(--g-panel);
}

.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 64px;
  height: 52px;
  place-items: center;
  border-radius: var(--r-media);
  background: color-mix(in srgb, var(--vm-ink-100) 85%, transparent);
  transform: translate(-50%, -50%);
}

.video-card__play::before {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--vm-white);
  content: "";
}

.video-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--s6);
}

.video-card h2 {
  margin-bottom: var(--sp-h2-text);
  font-size: var(--fs-h3);
  font-weight: var(--vm-w-semibold);
  line-height: 1.3;
}

.video-card__excerpt {
  color: var(--vm-ink-100);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.video-card__more {
  margin-top: auto;
  padding-top: var(--s6);
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.clinical-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: var(--s4);
  padding: var(--s4);
  background: var(--vm-ink-10);
}

.clinical-gallery__item {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: var(--vm-ink-10);
}

.clinical-gallery__item img {
  width: 100%;
  height: 100%;
  background: var(--vm-ink-10);
  object-fit: contain;
}

.clinical-gallery:not(.clinical-gallery--conditions):not(.clinical-gallery--sequences) .clinical-gallery__item img {
  height: auto;
}

@media (max-width: 999px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .news-card,
.news-card:nth-child(5n + 1),
.news-card:nth-child(5n + 2) {
    grid-column: span 6;
  }

  .clinical-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .media-page {
    padding-top: var(--sect-pad);
    padding-bottom: var(--sect-pad);
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .news-card,
.news-card:nth-child(5n + 1),
.news-card:nth-child(5n + 2) {
    min-height: 0;
  }

  .news-card h2 {
    margin-bottom: var(--sp-h2-text);
  }

}

@media (max-width: 599px) {
  .news-wall,
.clinical-gallery {
    grid-template-columns: 1fr;
  }

  .news-card,
.news-card:nth-child(5n + 1),
.news-card:nth-child(5n + 2) {
    grid-column: 1;
    padding: var(--s5);
  }

  .clinical-gallery {
    gap: var(--s3);
    padding: var(--s3);
  }

  .press-shelf--proof img {
    height: 340px;
  }
}

@media (max-width: 767px) {
  /* R13: no horizontal swipe for the press proof; two columns instead (see R11/R12). */
  .press-shelf--proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .press-shelf--proof a {
    width: auto;
    flex: none;
  }

  .press-shelf--proof img {
    height: 220px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .video-card,
.video-card__play {
    transition-duration: var(--t-fast);
    transition-property: box-shadow, transform;
    transition-timing-function: var(--ease-valve);
  }

  .video-card:hover,
.video-card:focus-visible {
    box-shadow: var(--shadow-lift);
    transform: translateY(-4px);
  }

  .video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

/* W6: utility pages — prices, FAQ groups, contact and the service directory */
#cenik_cevni_chirurgie > .article-section__wide,
#cenik_dermatologie > .article-section__wide,
#cenik_plasticka_chirurgie > .article-section__wide {
  margin-top: 0;
}

.contact-block {
  max-width: var(--w-prose);
  padding-top: var(--s5);
  border-top: 2px solid var(--vm-blue-100);
}

.contact-block > p:not(.section-kicker) {
  margin-bottom: var(--sp-p);
}

.contact-block__hours,
.contact-block__links {
  font-variant-numeric: tabular-nums;
  font-weight: var(--vm-w-medium);
}

.contact-block__hours {
  margin-top: var(--s3);
  color: var(--vm-ink-100);
  font-size: 0.9375rem;
}

.contact-block__label {
  display: inline-block;   /* keeps the link underline on the number, not on its label */
  font-size: 0.9375rem;
  line-height: 1.5;
}

.contact-block__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3) var(--s6);
  margin-top: var(--s5);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.3;
}

/* Native paragraph serialization keeps the links editable inside this flex row. */
.contact-block__links > p {
  display: flex;
  flex-wrap: wrap;
  gap: inherit;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.location-address {
  position: relative;
  display: grid;
  gap: var(--s1);
  margin-bottom: var(--s5);
  padding: var(--s5) var(--s6);
  overflow: hidden;
  background: var(--g-wash);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.location-address::before,
.direction-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 3px;
  background: var(--vm-blue-100);
  content: "";
  transform: skewY(-22.77deg);
}

.location-address strong {
  margin-bottom: var(--s2);
  font-weight: var(--vm-w-semibold);
}

/* Native paragraphs retain the source address line breaks. */

.direction-grid,
.parking-grid {
  display: grid;
  gap: var(--s4);
}

.direction-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parking-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.direction-card {
  position: relative;
  min-width: 0;
  min-height: 220px;
  padding: var(--s5) var(--s6);
  overflow: hidden;
  border: var(--line-light);
  background: var(--g-page);
}

.direction-card h3 {
  margin-bottom: var(--sp-h3-text);
}

.direction-card p {
  margin-bottom: var(--sp-p);
  line-height: 1.55;
}

.direction-card p:last-child {
  margin-bottom: 0;
}

.direction-card--parking {
  min-height: 180px;
  background: var(--g-panel);
}

.direction-card--parking p .chev {
  display: inline-block;
  margin-left: var(--s1);
  vertical-align: -2px;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  padding: var(--s6);
  border-top: 2px solid var(--vm-blue-100);
  background: var(--g-wash);
}

.contact-form label:not(.form-check) {
  display: grid;
  gap: var(--s2);
  color: var(--vm-ink-100);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-semibold);
}

.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--vm-ink-80);
  border-radius: var(--r-input);
  background: var(--vm-white);
  color: var(--vm-ink-100);
}

.contact-form textarea {
  min-height: 156px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.contact-form .form-check {
  color: var(--vm-ink-100);
}

.contact-form__wide {
  grid-column: 1 / -1;
}

.contact-form .button {
  width: fit-content;
  margin-top: var(--s3);
  cursor: pointer;
}

.service-directory {
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  margin: 0 auto;
  padding: var(--sect-pad) var(--gutter) var(--sect-pad);
}

.service-directory__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

/* The gallery index: four galleries sit as two pairs, each preview large enough to read. */

.service-card--light {
  min-height: 300px;
  border: var(--line-light);
  background: var(--vm-white);
  color: var(--vm-ink-100);
}

.service-card--light h3,
.service-card--light p {
  color: var(--vm-ink-100);
}

.service-card--derma::after {
  background: var(--vm-nude-100);
}

.service-card--plast::after {
  background: var(--vm-mauve-100);
}

@media (max-width: 899px) {
  .direction-grid {
    grid-template-columns: 1fr;
  }

  .direction-card {
    min-height: 0;
  }

  .service-directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .parking-grid,
.contact-form,
.service-directory__grid {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: var(--s5);
  }

  .contact-form__wide {
    grid-column: 1;
  }

  .service-directory {
    padding-top: var(--sect-pad);
    padding-bottom: var(--sect-pad);
  }

  .service-card--light {
    min-height: 270px;
  }
}

/* W3: dermatology stream and service hub */
.stream--derma {
  --g-wash: var(--g-derma);
  --g-wash-2: var(--g-derma-2);
}

.derma-hub {
  padding: var(--sect-pad) 0;
  background: var(--g-wash);
}

.derma-hub__inner {
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.derma-hub .service-card {
  border: var(--line-light);
  background: var(--vm-white);
  color: var(--vm-ink-100);
}

.derma-hub .service-card h3,
.derma-hub .service-card p {
  color: var(--vm-ink-100);
}

/* Footer fine print — legal line + the Veldon credit required on client sites.
   Sits under the column grid, separated by a hairline in ink-80 so it reads as
   secondary. Text uses --t-on-dark-muted (ink-20, 4.56:1 on the dark ground);
   the credit link lifts to white on hover rather than to cyan, which would fail
   contrast as text. */
.site-footer__fine {
  display: flex;
  width: min(100%, calc(var(--w-page) + (2 * var(--gutter))));
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5) var(--gutter) var(--s6);
  border-top: 1px solid var(--vm-ink-80);
  margin: 0 auto;
  color: var(--t-on-dark-muted);
  font-size: var(--fs-small);
  gap: var(--s3) var(--s5);
}

.site-footer__fine a {
  color: var(--t-on-dark-muted);
  text-decoration: none;
}

.site-footer__fine a:hover,
.site-footer__fine a:focus-visible {
  color: var(--t-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer__credit {
  margin-left: auto;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .site-footer__fine {
    justify-content: flex-start;
  }

  .site-footer__credit {
    margin-left: 0;
  }
}

/* Long unbreakable tokens in prose. The privacy terms quote full third-party
   policy URLs (up to 62 chars); at 390px one of those pushed the document 53px
   wide. Break inside the word only when there is no other option, so ordinary
   Czech prose keeps its normal ragged edge and only the URL is broken. */
/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.article-section__prose {
  overflow-wrap: anywhere;
}

.article-section__prose p,
.article-section__prose li {
  hyphens: manual;
}

.article-section--margin-led > .article-section__prose,
.article-section > .article-section__prose:empty {
  display: none;
}

/* This notice precedes the short preparation reminder in the authored order.
   Keep both in that order at the primary measure, including desktop. */
#lecba-krecovych-zil-pojistovnu > .article-section__margin {
  grid-column: 1;
  max-width: var(--w-prose);
  margin: 0 0 var(--s5);
}

#lecba-krecovych-zil-pojistovnu > .article-section__margin > .highlight-panel {
  margin: 0;
}

.proof-embed {
  max-width: 400px;
  margin-bottom: var(--s6);
  padding: var(--s5);
  border: var(--line-light);
  background: var(--vm-white);
  box-shadow: var(--shadow-lift);
}

.proof-embed__by {
  margin-top: var(--s4);
}

.proof-embed__by a {
  color: var(--vm-ink-100);
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  text-decoration: none;
  text-transform: uppercase;
}

.service-card__more .chev {
  width: 11px;
  height: 12px;
}

.proof-embed__by a:hover,
.proof-embed__by a:focus-visible {
  color: var(--vm-ink-100);
  text-decoration: underline;
}

.proof-embed__badge {
  display: block;
  max-width: 275px;
  margin-top: var(--s5);
}

.proof-embed__badge img {
  height: auto;
}

/* F336B: restrained home services, clinic introduction and complete team grid. */

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.team-strip {
  margin-right: 0;
  padding: 24px 0;
  overflow: visible;
  scroll-snap-type: none;
}
.team-strip .team-strip__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding: 0;
  gap: 32px 24px;
}
.team-strip .team-card,
.team-strip--m6 .team-card + .team-card {
  flex: 0 0 calc((100% - 72px) / 4);
  width: calc((100% - 72px) / 4);
  max-width: 260px;
  margin: 0;
  pointer-events: auto;
  opacity: 1;
  transform: none;
  transition: none;
}
.team-strip .team-card__portrait {
  height: auto;
  aspect-ratio: 1;
  clip-path: none;
  background: transparent;
}
.team-strip .team-card__portrait img {
  display: block;
  object-fit: contain;
  object-position: center;
}
.team-strip .team-card__portrait::after {
  display: none;
}
.team-strip .team-card__name,
.team-strip .team-card__role {
  width: 100%;
  padding: 0;
  overflow-wrap: normal;
}
.team-strip .team-card__name {
  margin-top: 12px;
  font-size: 1rem;
  min-height: 2.6em;
}
.has-js .team-strip .team-card,
.has-js .team-strip.is-visible .team-card,
.team-strip .team-card:hover,
.team-strip .team-card:focus-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 767px) {

  .team-strip .team-strip__track {
    gap: 24px 16px;
  }
  .team-strip .team-card,
.team-strip--m6 .team-card + .team-card {
    flex-basis: calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
  }
  .team-strip .team-card__name {
    font-size: .9375rem;
  }
}

/* End F336B. */

/* F337A: clinic-hero proportions on tablet and mobile. */
@media (min-width: 768px) and (max-width: 1099px) {
  .home-hero {
    min-height: calc(100vw * 2 / 3);
  }

  .home-hero__inner {
    padding-block: var(--s7);
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 0;
  }

  .home-hero__inner {
    grid-row: 1;
    padding-bottom: var(--s6);
  }

  .home-hero__photo {
    position: relative;
    z-index: 1;
    grid-row: 2;
  }

  .home-hero__veil {
    background: none;
  }
}
/* End F337A. */

/* F338A candidate: deliberate header + hero viewport, with content-led extension. */

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-hero {
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
}

@media (min-width: 1024px) {
  .home-hero {
    /* Rating strip, header (including its action row), and the one-line notice. */
    --home-above-h: calc(var(--rating-strip-h) + var(--vm-site-header-h) + var(--vm-header-actions-h) + var(--s4) + var(--s1) + 2 * var(--s2));
    min-height: calc(100vh - var(--home-above-h));
    min-height: calc(100svh - var(--home-above-h));
  }
}

@media (min-width: 768px) {
  .home-hero__photo {
    top: 0;
    bottom: 0;
    width: 76%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
  }

  .home-hero__photo picture,
  .home-hero__photo img {
    height: 100%;
  }

  .home-hero__photo img {
    object-fit: cover;
    object-position: right center;
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .home-hero__photo {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: calc(100vw * 2 / 3);
  }

  .home-hero__photo picture,
  .home-hero__photo img {
    height: 100%;
  }

  .home-hero__photo img {
    position: absolute;
    object-fit: cover;
    object-position: right center;
  }
}

/* Scoped provider readability; preserve the existing embed frame and artwork. */
.proof-embed .content-widget-menu.content-widget-menu--flat {
  max-width: none;
  padding: 0;
  font-family: var(--vm-font);
  color: var(--t-body);
  line-height: 1.5;
}
.proof-embed .content-widget-menu .content-widget-menu__text,
.proof-embed .content-widget-menu .content-widget-menu__review-item {
  font-size: 1rem;
  font-weight: var(--vm-w-regular);
  line-height: 1.5;
  color: var(--t-body);
}
.proof-embed .content-widget-menu .color-grey_m,
.proof-embed .content-widget-menu .content-widget-menu__infoWrapper a {
  color: var(--t-body);
}
.proof-embed .content-widget-menu .content-widget-menu__review-list {
  padding: 0;
  margin-inline: 0;
  text-align: left;
}
.proof-embed .content-widget-menu .content-widget-menu__review-item p {
  margin-top: var(--s2);
}
.proof-embed .content-widget-menu .content-widget-menu__link {
  color: var(--t-body) !important; /* Provider's link color is !important. */
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-align: center;
}
.proof-embed .content-widget-menu .content-widget-menu__infoWrapper > a,
.proof-embed .content-widget-menu .content-widget-menu__link {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.proof-embed .content-widget-menu hr {
  height: 0;
  margin: var(--s5) 0;
  border: 0;
  border-top: var(--line-light);
  background: none;
}
.proof-embed .content-widget-menu.content-widget-menu--flat .content-widget-menu-btn {
  min-height: 44px;
  height: auto;
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  background: var(--vm-ink-100);
  border-color: var(--vm-ink-100);
  color: var(--vm-on-ink) !important; /* Provider's button color is !important. */
}
.proof-embed .content-widget-menu a:focus-visible {
  outline: 2px solid var(--vm-ink-100);
  outline-offset: 4px;
}

/* Local enquiry and vein-video actions share spacing in source and native output. */
.home-faq__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.home-faq__actions > .wp-block-buttons {
  margin: 0;
}

/* === System v3 === */
@media (min-width: 1240px) {
  .site-header__inner {
    width: 100%;
    gap: 0;
    padding-inline: var(--s5);
  }

  .site-header__brand {
    margin-right: var(--s6);
  }

  .desktop-nav {
    column-gap: calc(var(--s4) + var(--s1));
  }

  .desktop-nav__trigger,
  .desktop-nav__link {
    font-size: 15px;
    font-weight: var(--vm-w-semibold);
  }

  .site-header__actions {
    margin-left: var(--s6);
    gap: var(--s4);
  }
}

@media (min-width: 1240px) and (max-width: 1399px) {
  /* Laptop widths (1280, 1366): the one-row header must fit without overlaps. */
  .site-header__inner {
    padding-inline: var(--s3);
  }

  .site-header__brand {
    margin-right: var(--s4);
  }

  .desktop-nav {
    column-gap: calc(var(--s2) + var(--s1) / 2);
  }

  .desktop-nav__trigger,
  .desktop-nav__link {
    font-size: 14px;
  }

  .site-header__actions {
    margin-left: var(--s4);
    gap: var(--s3);
  }

  .site-header__actions .btn {
    padding-inline: var(--s4);
  }
}

.site-header__actions .btn--secondary {
  border-color: var(--vm-white);
  color: var(--vm-on-ink);
}

.site-header__actions .btn--primary,
.mobile-nav .btn--primary,
.site-footer .newsletter-form .btn--primary {
  background: var(--vm-white);
  color: var(--vm-ink-100);
}

.site-header__actions .btn--secondary:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  background: color-mix(in srgb, var(--vm-white) 20%, transparent);
  color: var(--vm-on-ink);
}

.site-header__actions .btn--primary:is(:is(:hover, .is-hover), :is(:active, .is-active)),
.mobile-nav .btn--primary:is(:is(:hover, .is-hover), :is(:active, .is-active)),
.site-footer .newsletter-form .btn--primary:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  background: var(--vm-ink-10);
  color: var(--vm-ink-100);
}

.form-band__form :is(.btn, .button)[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: calc(var(--s7) + var(--s1));
  min-width: calc(var(--s7) * 4 + var(--s2));
  width: auto;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: var(--vm-white);
  color: var(--vm-ink-100);
  font-size: var(--fs-btn);
  font-weight: var(--vm-w-semibold);
  line-height: 1.2;
}

.form-band__form :is(.btn, .button)[type="submit"]:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  background: var(--vm-ink-10);
  color: var(--vm-ink-100);
}

.form-band__intro h3 {
  color: var(--vm-on-ink);
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.form-check {
  color: var(--vm-ink-100);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-regular);
}

.form-check a,
.newsletter-form .form-check a,
.form-band__form > p.form-band__wide a {
  color: inherit;
  text-decoration: underline;
}

.form-band__form :is(.form-check, p.form-band__wide),
.site-footer .newsletter-form .form-check {
  color: color-mix(in srgb, var(--vm-white) 90%, transparent);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-regular);
}

.form-check span,
.site-footer .form-check :is(span, a) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.site-footer .site-footer__newsletter h2 {
  color: var(--vm-on-ink);
  font-size: var(--s5);
  font-weight: var(--vm-w-bold);
  line-height: var(--lh-h3);
  letter-spacing: normal;
  text-transform: none;
}

.site-footer__social {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s2);
}

.site-footer .site-footer__social > a,
.site-footer__social .social-icon {
  display: inline-flex;
  width: var(--s5);
  height: var(--s5);
  min-height: var(--s5);
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: var(--sp-p);
}

:where(.page-main, .article-section__prose) :is(ul, ol):where(:not(.benefits, .steps, .card-grid)) {
  margin: 0 0 var(--sp-p);
  padding-left: var(--s5);
}

:where(.page-main, .article-section__prose) :is(ul, ol):where(:not(.benefits, .steps, .card-grid)) > li + li {
  margin-top: var(--sp-li);
}

:where(.page-main, .article-section__prose) > :is(h2, h3) + * {
  margin-top: 0;
}

:where(.page-main, .article-section__prose) > :is(h2, h3):not(:first-child) {
  margin-top: var(--sp-comp);
}

.reading-grid {
  width: min(100%, calc(var(--w-main) + (2 * var(--gutter))));
  margin: 0 auto;
  padding: var(--sect-pad) var(--gutter);
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.article-section__prose {
  hyphens: manual;
  overflow-wrap: break-word;
}

.page-grid:has(> .page-aside) > .page-main {
  max-width: var(--w-main);
}

.page-main > :is(section, .card-grid, .benefits, .steps) + :is(section, .card-grid, .benefits, .steps) {
  margin-top: var(--sect-pad);
}

.article-intro > p {
  margin-bottom: var(--sp-comp);
  color: var(--vm-ink-100);
  font-size: var(--fs-lede);
  font-weight: var(--vm-w-medium);
  line-height: var(--lh-lede);
}

.page-aside > * + * {
  margin-top: var(--sp-comp);
}

.article-intro > p:last-child {
  margin-bottom: 0;
}

.page-aside > .newsletter-card {
  position: static;
}

.breadcrumb {
  margin-bottom: var(--sp-comp);
  color: var(--vm-on-ink);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-medium);
  line-height: 1.5;
}

.breadcrumb :is([aria-current="page"], li:last-child) {
  color: var(--vm-on-ink);
}

.breadcrumb a:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  color: var(--vm-on-ink);
  text-decoration-thickness: 1.5px;
}

.toc :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc a:is([aria-current="location"], [aria-current="true"], .is-active) {
  border-left-color: var(--vm-blue-100);
  background: var(--vm-ink-10);
}

.toc a:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  background: var(--vm-ink-10);
  text-decoration: underline;
  text-decoration-color: var(--vm-ink-100);
}

details.toc {
  margin-block: var(--sp-comp);
  border: 1px solid var(--vm-ink-20);
  border-radius: var(--r-card);
}

details.toc > :is(ul, ol, nav) {
  padding: 0 var(--s4) var(--s4);
}

details.toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  list-style: none;
  cursor: pointer;
  min-height: var(--s7);
  padding: var(--s3) var(--s4);
}

details.toc > summary::-webkit-details-marker,
details.faq > summary::-webkit-details-marker {
  display: none;
}

details.toc > summary :is(.valve, .toc__v),
details.faq > summary :is(.valve, .faq__v) {
  width: calc(var(--s4) + var(--s1));
  height: calc(var(--s4) + var(--s1));
  flex: 0 0 calc(var(--s4) + var(--s1));
  fill: none;
  stroke: var(--vm-ink-100);
  stroke-width: 2px;
}

/* A disclosure uses a crisp 20px V, rather than the translucent brand mark.
   The parallel diagonals in this silhouette are 2px apart. */
details.faq > summary .valve {
  display: none;
}

details.faq > summary:not(:has(.faq__v))::after,
details.toc > summary:not(:has(.toc__v))::after {
  width: calc(var(--s4) + var(--s1));
  height: calc(var(--s4) + var(--s1));
  flex: 0 0 calc(var(--s4) + var(--s1));
  background: var(--vm-ink-100);
  clip-path: polygon(0 30%, 7.07% 22.93%, 50% 65.86%, 92.93% 22.93%, 100% 30%, 50% 80%);
  content: "";
}

details:is(.toc, .faq)[open] > summary :is(.valve, .toc__v, .faq__v) {
  transform: rotate(180deg);
  stroke: var(--vm-blue-100);
}

details.faq[open] > summary:not(:has(.faq__v))::after,
details.toc[open] > summary:not(:has(.toc__v))::after {
  background: var(--vm-blue-100);
  transform: rotate(180deg);
}

details:is(.toc, .faq) > summary:is(:hover, .is-hover) :is(.toc__v, .faq__v) {
  stroke: var(--vm-blue-100);
}

details:is(.toc, .faq) > summary:is(:hover, .is-hover)::after {
  background: var(--vm-blue-100);
}

details:is(.toc, .faq) > summary:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  background: var(--vm-ink-10);
}

.price-card {
  padding: calc(var(--s5) + var(--s1));
  border: 1px solid var(--acc-40);
  border-radius: var(--r-card);
  background: var(--acc-10);
  color: var(--vm-ink-100);
}

.price-card__label,
.price-panel__label,
.card__tag {
  margin-bottom: var(--s2);
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  text-transform: uppercase;
}

.price-card__meta {
  margin-bottom: var(--s2);
  color: var(--vm-ink-100);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.price-card > .btn {
  margin-top: var(--sp-comp);
}

.price-card > .link-arrow {
  display: inline-block;
  margin-top: var(--sp-p);
}

.btn,
.card .btn--secondary {
  display: inline-flex;
  min-height: calc(var(--s7) + var(--s1));
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 calc(var(--s5) + var(--s1));
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: var(--fs-btn);
  font-weight: var(--vm-w-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--vm-ink-100);
  color: var(--vm-on-ink);
}

.btn--secondary {
  border-color: var(--vm-ink-100);
  background: transparent;
  color: var(--vm-ink-100);
}

.btn--block {
  display: flex;
  width: 100%;
}

.card .btn--secondary {
  min-height: calc(var(--s6) + var(--s3));
  padding-inline: calc(var(--s4) + var(--s1));
  border-color: var(--vm-ink-100);
  background: transparent;
  color: var(--vm-ink-100);
}

.btn:is(:is(:hover, .is-hover), :is(:active, .is-active)),
.card > a:is(:is(:hover, .is-hover), :is(:active, .is-active)) .btn--secondary {
  border-color: var(--g-hover);
  background: var(--g-hover);
  color: var(--vm-on-ink);
}

.btn:is(:active, .is-active) {
  transform: translateY(1px);
}

.link-arrow {
  color: var(--vm-ink-100);
  font-weight: var(--vm-w-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.link-arrow:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  color: var(--t-muted);
  text-decoration-color: var(--vm-ink-100);
}

.doctor-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s5);
  margin-block: var(--sp-comp);
  padding: var(--s5);
  border: 1px solid var(--vm-ink-20);
  border-radius: var(--r-card);
  color: var(--vm-ink-100);
}

.doctor-card > img {
  width: 160px;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-media);
  object-fit: cover;
  object-position: var(--focal-point, center top);
}

.doctor-card > div {
  min-width: 0;
}

.doctor-card__name {
  margin-bottom: var(--s2);
  font-size: var(--fs-h3);
  font-weight: var(--vm-w-bold);
  line-height: var(--lh-h3);
}

.doctor-card__role {
  margin-bottom: var(--sp-p);
  color: var(--t-muted);
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  text-transform: uppercase;
}

.doctor-card__bio {
  font-size: var(--fs-small);
  line-height: 1.55;
  margin-bottom: var(--sp-p);
}

.callout {
  margin-block: var(--sp-comp);
  padding: calc(var(--s4) + var(--s1)) var(--s5);
  border-left: 4px solid var(--acc-100);
  border-radius: 0 var(--r-media) var(--r-media) 0;
  background: var(--acc-10);
  color: var(--vm-ink-100);
  font-size: var(--fs-btn);
  line-height: 1.55;
}

:is(.callout, .price-panel, .quote, .faq__a) > :last-child {
  margin-bottom: 0;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-grid);
  margin: var(--sp-comp) 0;
  padding: 0;
  list-style: none;
}

.benefits > li {
  position: relative;
  min-width: 0;
  padding: var(--s5);
  border: 1px solid var(--vm-ink-20);
  border-radius: var(--r-card);
  color: var(--vm-ink-100);
}

.benefits > li::before {
  position: absolute;
  top: 0;
  left: var(--s3);
  right: var(--s3);
  height: 3px;
  background: var(--acc-100);
  content: "";
}

.benefits > li > h3 {
  font-size: var(--fs-question);
  font-weight: var(--vm-w-bold);
}

.benefits p {
  font-size: calc((var(--fs-small) + var(--fs-btn)) / 2);
  line-height: 1.5;
  margin-bottom: 0;
}

.price-panel {
  margin-block: var(--sp-comp);
  padding: var(--s6);
  border-top: 4px solid var(--acc-100);
  border-radius: var(--r-card);
  background: var(--vm-ink-100);
  color: var(--vm-on-ink);
}

.price-panel a {
  color: var(--vm-on-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.price-panel a:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  color: var(--vm-on-ink-muted);
  text-decoration-color: var(--vm-on-ink);
}

.price-panel .btn--primary {
  background: var(--vm-white);
  color: var(--vm-ink-100);
  text-decoration: none;
}

.price-panel:has(> .btn, > .wp-block-buttons) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--s6);
  row-gap: var(--sp-p);
}

.price-panel > p {
  flex-basis: 100%;
  margin-bottom: 0;
}

/* WordPress: the table comes wrapped in figure.wp-block-table and the button in .wp-block-buttons. */
.price-panel > .wp-block-table {
  width: 100%;
  margin: 0;
}

.page-main__content .price-panel > .wp-block-buttons {
  margin: 0;
}

.price-panel > .btn {
  order: 1;
}

.price-panel > .link-arrow {
  order: 2;
}

.price-panel .btn--primary:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  background: var(--vm-ink-10);
  color: var(--vm-ink-100);
}

details.faq {
  border-bottom: 1px solid var(--vm-ink-20);
  color: var(--vm-ink-100);
}

details.faq:first-of-type {
  border-top: 1px solid var(--vm-ink-20);
}

details.faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  list-style: none;
  cursor: pointer;
  padding: calc(var(--s4) + var(--s1)) 0;
  font-size: var(--fs-question);
  font-weight: var(--vm-w-semibold);
  line-height: 1.4;
}

.faq__a {
  padding-bottom: calc(var(--s4) + var(--s1));
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-grid);
  margin: var(--sp-comp) 0;
  padding: 0;
  list-style: none;
}

.steps > li {
  min-width: 0;
  padding: var(--s5);
  border: 1px solid var(--vm-ink-20);
  border-radius: var(--r-card);
  color: var(--vm-ink-100);
}

.steps__n {
  display: block;
  margin-bottom: var(--sp-h3-text);
  font-size: 28px;
  font-weight: var(--vm-w-extrabold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.steps > li > img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-media);
}

.steps > li > :last-child {
  margin-bottom: 0;
}

.quote {
  max-width: var(--w-main);
  margin: var(--sp-comp) 0;
  padding-left: var(--s5);
  border-left: 3px solid var(--acc-100);
  color: var(--vm-ink-100);
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: var(--vm-w-regular);
  line-height: var(--lh-body);
}

.quote cite {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.wp-block-table,
.wp-block-table > table,
.data-table,
.data-table :is(thead, tbody, tr, th, td) {
  border: 0;
}

.data-table {
  width: 100%;
  margin-block: var(--sp-comp);
  border-collapse: collapse;
  color: var(--vm-ink-100);
  font-size: var(--fs-btn);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.data-table :is(th, td) {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--vm-ink-20);
  vertical-align: top;
  text-align: left;
}

.data-table thead th {
  background: var(--acc-20);
  color: var(--vm-ink-100);
  border-radius: 0;
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  text-transform: uppercase;
}

.data-table strong {
  font-weight: inherit;
}

.data-table th[scope="col"],
.data-table tr > :first-child {
  font-weight: var(--vm-w-semibold);
}

.data-table__note,
.data-table :is(td, th) small {
  display: block;
  margin-top: var(--s1);
  color: var(--vm-ink-100);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-regular);
  line-height: 1.5;
}

.data-table tr > :last-child:not([colspan]) {
  font-weight: var(--vm-w-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.data-table :is(.data-table__category, [data-category], tr:has(> th[colspan])) {
  background: var(--acc-10);
}

.data-table :is(.data-table__category, [data-category], tr:has(> th[colspan])) > :is(th, td) {
  padding: var(--s2) var(--s4);
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
  text-transform: uppercase;
}

.price-panel .data-table {
  color: var(--vm-on-ink);
}

.price-panel .data-table :is(th, td) {
  border-bottom: var(--line-dark);
}

.price-panel .data-table :is(.data-table__category, [data-category], tr:has(> th[colspan])) {
  background: var(--vm-ink-100);
  color: var(--vm-on-ink-muted);
}

.price-panel .data-table :is(.data-table__note, td small, th small) {
  color: var(--vm-on-ink-muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-grid);
  margin: var(--sp-comp) 0;
  padding: 0;
  list-style: none;
}

.card-grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vm-ink-20);
  border-radius: var(--r-card);
  background: var(--vm-white);
  color: var(--vm-ink-100);
}

.card > a {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  padding: 0 0 var(--s5);
  color: inherit;
  text-decoration: none;
}

.card > a > img {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 5 / 3;
  margin: 0 0 var(--s5);
  border-radius: var(--r-media) var(--r-media) 0 0;
  object-fit: cover;
  object-position: var(--focal-point, center);
}

:where(.card-grid:not([data-lightbox-gallery], .card-grid--gallery)) > .card > a > :not(img) { margin-inline: var(--s5); }

.card > a > .btn--secondary {
  align-self: flex-start;
  margin-top: auto;
}

.card > a > :is(h2, h3) {
  font-size: calc(var(--s4) + var(--s1));
  font-weight: var(--vm-w-bold);
  line-height: var(--lh-h3);
}

:is(.card-grid--gallery, .card-grid[data-lightbox-gallery]) {
  gap: var(--sp-grid);
}

:is(.card-grid--gallery, .card-grid[data-lightbox-gallery]) .card {
  border: 0;
  border-radius: var(--r-media);
}

:is(.card-grid--gallery, .card-grid[data-lightbox-gallery]) .card > a {
  padding: 0;
}

:is(.card-grid--gallery, .card-grid[data-lightbox-gallery]) .card > a > img {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: var(--r-media);
}

.card > a:is(:is(:hover, .is-hover), :is(:active, .is-active)) :is(h2, h3) {
  color: var(--vm-ink-80);
  text-decoration: underline;
  text-decoration-color: var(--vm-ink-100);
  text-underline-offset: 3px;
}

.card:is(:focus-within, .is-focus-within) {
  overflow: visible;
}

.fig {
  max-width: 100%;
  margin: var(--sp-comp) 0;
}

.fig img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-media);
  object-fit: cover;
  object-position: var(--focal-point, center);
}

.fig--portrait img {
  aspect-ratio: 1;
}

.fig--gallery img,
.card-grid--gallery .card > a > img,
.card-grid[data-lightbox-gallery] .card > a > img {
  aspect-ratio: 4 / 3;
}

.fig--card img {
  aspect-ratio: 5 / 3;
}

.fig--content img {
  aspect-ratio: 3 / 2;
}

.fig figcaption {
  margin-top: var(--s2);
  color: var(--t-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.tabs {
  display: flex;
  overflow-x: auto;
  margin-block: var(--sp-comp);
  border-bottom: 1px solid var(--vm-ink-20);
}

.tabs > a {
  display: inline-flex;
  min-height: var(--s7);
  flex: 0 0 auto;
  align-items: center;
  padding: var(--s2) var(--s5);
  border-bottom: 3px solid transparent;
  color: var(--vm-ink-100);
  font-size: var(--fs-btn);
  font-weight: var(--vm-w-semibold);
  line-height: 1.5;
  text-decoration: none;
}

/* Narrow phones: three tabs fit without a sideways-scrolling strip. */
@media (max-width: 419px) {
  .tabs > a {
    padding-inline: var(--s3);
  }
}

.tabs > a[aria-current]:not([aria-current="false"]) {
  border-bottom-color: var(--vm-ink-100);
}

.tabs > a:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
  background: var(--vm-ink-10);
  text-decoration: underline;
  text-decoration-color: var(--vm-ink-100);
}

:is(.breadcrumb, .toc, .price-card, .doctor-card, .callout, .benefits, .price-panel, .faq, .steps, .quote, .data-table, .card, .fig, .tabs, .book-bar, .header-actions) :is(:focus-visible, .is-focus),
.btn:is(:focus-visible, .is-focus),
.link-arrow:is(:focus-visible, .is-focus) {
  outline: var(--focus-ring);
  outline-offset: calc(var(--s1) / 2);
}

.tab:is(:focus-visible, .is-focus),
.tabs > a:is(:focus-visible, .is-focus) {
  outline-offset: -2px;
}

.card > a:is(:focus-visible, .is-focus) {
  border-radius: var(--r-card);
}

.interview__question:is(h2, h3) {
  margin-bottom: var(--sp-h3-text);
  font-size: var(--fs-question);
  font-weight: var(--vm-w-semibold);
  letter-spacing: normal;
  line-height: 1.4;
  text-transform: none;
}

.interview__answer {
  position: relative;
  max-width: var(--w-prose);
  margin: 0;
  padding: 0;
  color: var(--vm-ink-100);
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: var(--vm-w-regular);
  line-height: var(--lh-body);
}

@media (min-width: 1024px) {
  .page-grid:has(> .page-aside) {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--w-aside));
  }

  .page-aside {
    position: sticky;
    top: calc(var(--s8) + var(--s6));
    align-self: start;
  }

  details.toc {
    display: none;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .page-aside .toc:not(details) {
    display: none;
  }

  .card-grid,
.card-grid[data-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .btn {
    width: 100%;
  }

  /* WordPress wraps each button in .wp-block-button, which shrinks to its text; the static
     build's full-width phone buttons need the wrapper to span the column too. */
  .wp-block-buttons > .wp-block-button {
    width: 100%;
  }

  /* A card button sits inside the card's side margins: stretch to them, never 100% + margins. */
  .card-grid:not(.promo-grid) > .card > a > .btn--secondary {
    width: auto;
    align-self: stretch;
  }

  /* The four-column cookie list: one stacked block per cookie; the header row (thead in the
     static build, the first tbody row in WordPress) reads as the legend. */
  .data-table:has(th[scope="col"]:nth-child(4)),
  .data-table:has(th[scope="col"]:nth-child(4)) :is(thead, tbody) {
    display: block;
  }

  .data-table:has(th[scope="col"]:nth-child(4)) tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s1) var(--s4);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--vm-ink-20);
  }

  .data-table:has(th[scope="col"]:nth-child(4)) :is(th, td) {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .data-table:has(th[scope="col"]:nth-child(4)) :is(th, td):nth-child(4) {
    grid-area: 1 / 2;
    text-align: right;
    white-space: nowrap;
  }

  .data-table:has(th[scope="col"]:nth-child(4)) :is(th, td):is(:nth-child(2), :nth-child(3)) {
    grid-column: 1 / -1;
  }

  .data-table:has(th[scope="col"]:nth-child(4)) tbody td:nth-child(3) {
    font-weight: var(--vm-w-regular);
  }

  .data-table:has(th[scope="col"]:nth-child(4)) tr:has(> th[scope="col"]) > th {
    color: var(--t-muted);
    font-size: var(--fs-label);
    font-weight: var(--vm-w-semibold);
    letter-spacing: var(--vm-track-label);
    text-transform: uppercase;
  }

  .doctor-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-grid);
  }

  .doctor-card > img {
    width: 100%;
  }

  .benefits,
.card-grid,
.card-grid[data-cols="4"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-panel {
    padding: var(--s5);
  }

  .data-table :is(th, td) {
    padding: var(--s2) var(--s3);
  }

  .data-table tbody :is(th, td) {
    font-size: 15px;
  }

  .data-table :is(.data-table__category, [data-category], tr:has(> th[colspan])) > :is(th, td) {
    padding: var(--s2) var(--s3);
    font-size: var(--fs-label);
  }

  .data-table__note,
  .data-table :is(td, th) small {
    font-size: var(--fs-label);
  }

  /* Keep the two columns readable inside the padded panel on narrow phones. In WordPress the
     table sits in figure.wp-block-table (core: overflow-x: auto), so the bleed goes on that
     wrapper; on the table itself the wrapper would clip both edges. */
  .price-panel > .data-table,
  .price-panel > .wp-block-table {
    width: calc(100% + 2 * var(--s5));
    margin-inline: calc(-1 * var(--s5));
  }

  .price-panel > .wp-block-buttons {
    width: 100%;
  }

  .price-panel .data-table tr {
    border-bottom: var(--line-dark);
  }

  .price-panel .data-table :is(th, td) {
    border-bottom: 0;
  }

  .header-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: var(--gutter);
    border-top: 1px solid var(--vm-ink-80);
    background: var(--vm-ink-100);
    color: var(--vm-on-ink);
  }

  .header-actions > a {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: var(--s2) var(--s1);
    color: var(--vm-on-ink);
    font-size: var(--fs-label);
    font-weight: var(--vm-w-semibold);
    letter-spacing: var(--vm-track-label);
    text-decoration: none;
    text-transform: uppercase;
  }

  .header-actions > a:is(:is(:hover, .is-hover), :is(:active, .is-active)) {
    background: var(--g-hover);
    text-decoration: underline;
  }

  .site-header:has(.header-actions) {
    height: auto;
  }

  .site-header:has(.header-actions) .site-header__inner {
    height: calc(var(--s6) + var(--s5));
  }

}

@media (prefers-reduced-motion: no-preference) {
  .btn,
.link-arrow,
.toc a,
.tabs > a,
.header-actions > a,
details:is(.toc, .faq) > summary,
details:is(.toc, .faq) > summary::after,
details:is(.toc, .faq) > summary :is(.valve, .toc__v, .faq__v) {
    transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
*::before,
*::after {
    animation: none !important;
    transition-property: opacity !important;
  }

  .btn:is(:active, .is-active) {
    transform: none;
  }
}

/* W2 frame integration. Merge after W1. No document-height/blanket overflow clamp.
   The 226px WP tail is UNVERIFIED until VM_FRAME_WP_BASE is supplied. */
.page-header {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--band-pad) var(--gutter);
  background: var(--vm-ink-100);
  color: var(--vm-on-ink);
  height: auto;
  min-height: 0;
}

.page-header__inner {
  margin: 0 auto;
  width: min(100%, var(--w-page));
  margin-inline: auto;
  padding: 0;
}

.page-header h1 {
  position: relative;
  margin: var(--s4) 0 0;
  max-width: var(--w-page);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--vm-w-extrabold);
  color: var(--vm-on-ink);
  overflow-wrap: break-word;
  hyphens: manual;
}

.page-header__geometry {
  bottom: -38%;
  max-width: none;
  position: absolute;
  width: 40%;
  height: auto;
  right: -10%;
  top: 0;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: var(--vm-w-medium);
}

.breadcrumb li {
  min-width: 0;
  overflow-wrap: break-word;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--s3);
  color: var(--vm-on-ink-muted);
}

.breadcrumb a {
  text-decoration: underline;
  color: var(--vm-on-ink);
}

.breadcrumb [aria-current] {
  color: var(--vm-on-ink);
}

.page-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, var(--w-main)) minmax(0, var(--w-aside));
  gap: var(--gap-aside);
  width: min(calc(100% - 2 * var(--gutter)), var(--w-page));
  margin-inline: auto;
  padding: var(--sect-pad) 0;
  align-items: start;
}

.page-grid--bare {
  display: block;
}

.page-grid--bare > .page-main {
  display: block;
}

.page-main {
  hyphens: manual;
  overflow-wrap: break-word;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-main__content {
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-main > .lede {
  margin-bottom: var(--sp-comp);
  color: var(--vm-ink-100);
  position: relative;
  z-index: 0;
  margin: 0 0 var(--sp-comp);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  font-weight: var(--vm-w-medium);
}

.price-card__price {
  margin-bottom: var(--sp-p);
  font-variant-numeric: tabular-nums;
  display: block;
  font-size: var(--fs-price);
  font-weight: var(--vm-w-extrabold);
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
}

.page-main__content > section + section {
  margin-top: var(--sect-pad);
}

.page-main__content .article-section {
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
}

.page-main__content .article-section + .article-section {
  margin-top: var(--sp-comp);
}

.frame-inline-content {
  margin-block: var(--sp-comp);
}

/* The archived cookie table has a 598px intrinsic minimum at 390px. Keep its
   complete cells and wrap long identifiers/URLs within the actual main slot. */
[data-frame-route="/conditions-newsletter/"] .page-main__content table {
  width: 100%;
  table-layout: fixed;
}

[data-frame-route="/conditions-newsletter/"] .page-main__content td {
  overflow-wrap: anywhere;
}

.page-aside__sticky {
  position: sticky;
  top: calc(var(--s8) + var(--s6));
  max-height: calc(100vh - calc(var(--s8) + var(--s7)));
  max-height: calc(100svh - calc(var(--s8) + var(--s7)));
  overflow-y: auto;
}

.page-aside {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: static;
  top: auto;
  align-self: stretch;
}

.page-aside > * {
  flex-shrink: 0;
}

/* The track takes the free article height. Its boundary stops the sticky panel
   before the static newsletter, which stays below it near the article end. */
.page-aside__track {
  flex: 1 0 auto;
}

.page-aside .page-newsletter {
  position: static;
  margin-top: var(--sp-comp);
  padding: var(--s5);
  width: auto;
}

.page-aside .page-newsletter__inner {
  display: block;
  width: auto;
}

.page-aside .page-newsletter__intro {
  margin-bottom: var(--s4);
}

.toc {
  color: var(--vm-ink-100);
  margin-top: var(--sp-comp);
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: var(--vm-w-medium);
}

.toc__label {
  font-size: inherit;
  font-weight: inherit;
  margin: 0 0 var(--s3);
}

.toc ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.toc li {
  margin: 0;
}

.toc a {
  align-items: center;
  display: block;
  min-height: calc(var(--s6) + var(--s1));
  padding: var(--s2) var(--s3);
  border-left: 2px solid transparent;
  color: var(--vm-ink-100);
  text-decoration: none;
}

.toc a[aria-current] {
  border-left-color: var(--acc-100);
  background: var(--acc-10);
}

.toc a:is(:is(:hover, .is-hover), .is-current):not([aria-current]),
.toc a:is(:hover, .is-hover) {
  background: var(--vm-ink-10);
}

.toc--mobile {
  display: none;
}

.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--s7);
  cursor: pointer;
  list-style: none;
}

.toc summary::-webkit-details-marker {
  display: none;
}

.toc summary::after {
  content: none;
}

.toc__v {
  width: calc(var(--s4) + var(--s1));
  height: calc(var(--s4) + var(--s1));
  fill: none;
  stroke: var(--vm-ink-100);
  stroke-width: 2px;
  flex: 0 0 auto;
}

.toc[open] .toc__v {
  transform: rotate(180deg);
}

.contact-card {
  background: var(--acc-10);
  color: var(--vm-ink-100);
  border: 1px solid var(--acc-40);
  border-radius: var(--r-card);
  padding: calc(var(--s5) + var(--s1));
}

.contact-card h2 {
  font-size: var(--fs-h3);
}

.contact-card > a {
  display: block;
  margin-top: var(--s3);
  overflow-wrap: break-word;
}

.contact-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--s7) + var(--s1));
  height: auto;
  line-height: 1.2;
}

.profile-portrait {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--g-panel);
  width: min(100%, var(--w-aside));
  margin: 0 0 var(--s4);
}

.profile-portrait img {
  object-position: center 20%;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-media);
}

.profile-role {
  margin-top: var(--s2);
  line-height: 1.4;
  margin-bottom: var(--s5);
  border-left: 4px solid var(--vm-blue-100);
  color: var(--vm-ink-100);
  margin: 0 0 var(--s5);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-body);
  font-weight: var(--vm-w-medium);
  text-transform: none;
  letter-spacing: normal;
}

.page-main__content .profile-page {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.profile-cv {
  max-width: 920;
  margin: 0 0 var(--sect-pad);
}

.profile-cv__list {
  padding-left: var(--s5);
}

.profile-cv__list li {
  margin-bottom: var(--sp-li);
}

.profile-cv__list li > span + span {
  margin-left: var(--s2);
}

.profile-cv__list li > span:first-child:not(:empty) {
  font-weight: var(--vm-w-semibold);
}

.interview__question {
  font-size: var(--fs-question);
  font-weight: var(--vm-w-semibold);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: var(--s2);
}

.profile-interview {
  max-width: var(--w-prose);
  display: block;
  margin: 0;
}

.profile-interview p:not(.interview__question) {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-style: normal;
}

.site-header__phone {
  color: var(--vm-on-ink);
  font-size: calc(var(--s3) + var(--s3) / 4);
  font-weight: var(--vm-w-semibold);
  white-space: nowrap;
  text-decoration: none;
}

/* The phone row is a sibling of header, and its WP template-part wrapper must not stick. */
.wp-site-blocks > .wp-block-template-part:has(> .site-header) {
  z-index: var(--z-header);
  display: contents;
  position: static;
  top: auto;
}

.header-actions {
  display: none;
  position: static;
}

.social-icon {
  width: calc(var(--s4) + var(--s1));
  height: calc(var(--s4) + var(--s1));
  margin-right: var(--s2);
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5px;
}

.social-icon rect {
  fill: none;
}
.social-icon circle {
  fill: none;
}

.book-bar[hidden] {
  display: none;
}

.book-bar {
  display: none;
}

:root {
  --rating-strip-h: 40px;
  --vm-site-header-h: calc(var(--s7) + var(--s5));
  --vm-header-actions-h: 0px;
  --vm-home-notice-h: calc(var(--fs-body) * var(--lh-body) + var(--sp-p));
}

@media (max-width: 1239px) {
  .site-header__phone {
  display: none;
}

  :root {
  --vm-header-actions-h: var(--s7);
}

  .header-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: var(--s7);
  padding-inline: 0;
  background: var(--vm-ink-100);
  color: var(--vm-on-ink);
}

  .header-actions > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--s7);
  padding: var(--s2);
  color: var(--vm-on-ink);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-semibold);
}

  .header-actions > a + a {
  border-left: 1px solid color-mix(in srgb, var(--vm-white) 20%, transparent);
}

}
@media (max-width: 1023px) {
  .page-grid:not(.page-grid--bare) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

  /* Main stays first in both focus order and visual flow. Price offers retain
     their existing canonical insertion under the lede through initBookBar. */
  .page-grid:not(.page-grid--bare) > .page-main {
  display: block;
  max-width: none;
}

  .page-aside {
  display: flex;
}

  .page-aside__track {
  display: block;
  flex: none;
}

  .toc--mobile {
  display: block;
  margin: 0 0 var(--sp-comp);
}

  .toc--desktop {
  display: none;
}

  .page-aside__sticky {
  position: static;
  max-height: none;
  overflow: visible;
}

  .book-bar:not([hidden]) {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  height: auto;
  min-height: calc(var(--s6) + var(--s5));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  gap: 0;
  background: var(--vm-ink-100);
  color: var(--vm-on-ink);
}

  .book-bar:not([hidden]) > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(var(--s6) + var(--s5));
  min-height: calc(var(--s6) + var(--s5));
  inset: 0;
  margin: 0;
  border-radius: 0;
  padding: 0 calc(var(--s5) + var(--s1));
  background: var(--vm-ink-100);
  color: var(--vm-on-ink);
}

}
@media (max-width: 767px) { :root {
  --vm-site-header-h: calc(var(--s6) + var(--s5));
}
 }
.breadcrumb a:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--vm-blue-100);
  outline-offset: calc(var(--s1) / 2);
}
.toc a:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--vm-blue-100);
  outline-offset: calc(var(--s1) / 2);
}
.header-actions a:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--vm-blue-100);
  outline-offset: calc(var(--s1) / 2);
}
.book-bar a:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--vm-blue-100);
  outline-offset: calc(var(--s1) / 2);
}

@media (prefers-reduced-motion: reduce) { .toc__v {
  transition: none;
}
.book-bar {
  transition: none;
}
 }

/* Gallery source grids keep LIVE's contact/newsletter pair within the bare frame. */
[data-frame-route^="/galerie/"] .page-main__content > .page-grid {
  display: block;
  width: 100%;
  padding: 0;
}

[data-frame-route^="/galerie/"] .page-main__content > .page-grid > .page-grid {
  display: grid;
  width: 100%;
  padding: 0;
  margin-top: var(--sp-comp);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-grid);
}

@media (max-width: 767px) { [data-frame-route^="/galerie/"] .page-main__content > .page-grid > .page-grid {
  grid-template-columns: minmax(0, 1fr);
}
 }

/* S0 responsive refinements follow all frame defaults. */
@media (max-width: 767px) {
  .site-footer__details {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479px) {
  .site-footer__details {
    grid-column: 1;
  }
}

@media (max-width: 1023px) {
  .newsletter-form,
  .site-footer__newsletter {
    grid-template-columns: minmax(0, 1fr);
  }

  .newsletter-form input[type="email"] {
    min-width: min(100%, calc(var(--s8) * 4 + var(--s5)));
  }

  .newsletter-form > :is(.btn, .button) {
    justify-self: start;
  }
}

@media (max-width: 639px) {
  .site-footer .newsletter-form > :is(.btn, .button) {
    width: 100%;
  }

  .form-band__form :is(.btn, .button)[type="submit"] {
    display: flex;
    width: 100%;
  }

  :is(.card-grid--gallery, .card-grid[data-lightbox-gallery]) {
    grid-template-columns: minmax(0, 1fr);
  }

}

[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

/* W-H: size media to its source, and give each content family its own rhythm. */
.page-main__content .fig img {
  width: auto;
  height: auto;
}

/* The 300 x 400 cover is served from an enlarged archived derivative. */
.page-main__content .fig img[width="300"][height="400"] {
  max-height: calc(var(--s8) * 6 + var(--s4));
}

[data-frame-route^="/novinky/"] .page-main__content > section + section,
[data-frame-route="/zpusoby-lecby/"] .page-main__content > section + section {
  margin-top: var(--sp-comp);
}

[data-frame-route^="/novinky/"] .page-main__content > .fig:first-child img {
  max-width: min(100%, var(--w-aside));
}

.news-wall,
.home-band .card-grid {
  grid-auto-rows: auto;
}

.news-pagination ul {
  display: flex;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-pagination li + li {
  margin-top: 0;
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.form-band__form {
  gap: var(--s3) var(--s4);
  align-content: start;
}

.form-band__form > .form-band__wide {
  grid-column: 1 / -1;
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.form-band__form textarea {
  height: calc(var(--s7) * 2);
  min-height: calc(var(--s7) * 2);
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.form-band__form label:not(.form-check) {
  gap: var(--s1);
}

.form-band__form .form-band__wide > label {
  margin-bottom: var(--s1);
}

.form-band__form .form-band__wide > p {
  margin-bottom: var(--s2);
}

/* A page's own booking form is on white; the shared dark band keeps its palette. */
:is(.page-main, .page-main__content) > .form-band__form :is(label, small, p, a) {
  color: var(--vm-ink-100);
}

:is(.page-main, .page-main__content) > .form-band__form :is(.btn, .button)[type="submit"] {
  background: var(--vm-ink-100);
  color: var(--vm-on-ink);
}

:is(.page-main, .page-main__content) > .form-band__form :is(.btn, .button)[type="submit"]:is(:hover, .is-hover, :active, .is-active) {
  background: var(--g-hover);
}

/* Reusable landing-page compositions. */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--s7);
}

.split > * {
  min-width: 0;
}

.split .fig {
  margin: 0;
}

.split .fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}

.benefits[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-grid[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.names {
  columns: 2;
  column-gap: var(--sp-grid);
  margin: calc(var(--sp-p) - var(--sp-li) / 2) 0 0;
  padding-left: var(--s5);
}

/* Even padding instead of a bottom margin: WebKit carries a margin across the column break,
   which pushed the second column half a line lower. */
.names > li {
  break-inside: avoid;
  padding-block: calc(var(--sp-li) / 2);
}

.names a {
  font-size: calc((var(--fs-question) + var(--fs-btn)) / 2);
  font-weight: var(--vm-w-semibold);
}

.section-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-comp);
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--sp-grid);
  margin: var(--sp-comp) 0 0;
  padding: 0;
  list-style: none;
}

.review-grid > .card {
  padding: var(--s5);
}

.review-grid > .card > div {
  width: 100%;
  min-width: 0;
}

.review-grid > :nth-child(6) {
  grid-column: 3;
  grid-row: 1 / 4;
  padding: 0;
}

.review-grid > :nth-child(5) {
  grid-column: 1 / 3;
}

.quote--card {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: calc((var(--fs-question) + var(--fs-btn)) / 2);
  line-height: var(--lh-body);
}

.quote--card .quote__source {
  margin: var(--sp-p) 0 0;
  color: var(--t-muted);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-medium);
  text-transform: none;
  letter-spacing: normal;
}

.review-grid .proof-embed {
  height: 100%;
  margin: 0;
  padding: var(--s5);
  border: 0;
  background: var(--vm-white);
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-band__inner {
  padding-inline: var(--gutter);
}

/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.home-band {
  padding-block: var(--sect-pad) 0;
}

.home-band :is(h2, h3, p, ul, figure) {
  margin-block: 0;
}

.home-band h2 + p {
  margin-top: var(--sp-h2-text);
}

.home-band h3 + :is(p, ul) {
  margin-top: var(--sp-h3-text);
}

.home-band :is(p, ul) + h3 {
  margin-top: var(--sp-comp);
}

.home-band p + p,
.home-band ul + p {
  margin-top: var(--sp-p);
}

.home-band .label {
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  letter-spacing: var(--vm-track-label);
}

.home-band :is(.benefits, .review-grid, .names),
.home-band p + .card-grid {
  margin-top: var(--sp-comp);
}

.home-band .split > div > .btn,
.home-band .split > div > .wp-block-buttons {
  margin-top: var(--sp-comp);
}

.home-band .split > div > ul:not(.names) {
  padding-left: var(--s5);
}

.home-band .split > div > ul:not(.names) > li + li {
  margin-top: var(--sp-li);
}

.home-band .card {
  flex-direction: column;
}

.home-band .card > a {
  flex: 1;
  padding: 0 0 calc(var(--s4) + var(--s1));
}

.home-band .card__footer {
  padding: 0 calc(var(--s4) + var(--s1)) calc(var(--s4) + var(--s1));
  font-size: calc((var(--fs-small) + var(--fs-btn)) / 2);
}

.home-band .card > a > img {
  width: 100%;
  margin: 0 0 calc(var(--s4) + var(--s1));
  object-position: 50% 50%;
}

.home-band .card > a > :not(img) {
  margin-inline: calc(var(--s4) + var(--s1));
}

.home-band .card > a > p:not(.card__tag) {
  font-size: calc((var(--fs-small) + var(--fs-btn)) / 2);
  line-height: 1.5;
}

.home-band .card > a > .card__tag {
  margin-bottom: var(--sp-h3-text);
}

.home-band .card > a > .btn--secondary {
  margin-top: auto;
  max-width: calc(100% - 2 * (var(--s4) + var(--s1)));
}

.home-band .card > a > :has(+ .btn--secondary) {
  margin-bottom: var(--sp-comp);
}

.home-band .review-grid + .section-actions + .split {
  margin-top: var(--sect-pad);
}

.home-band--faq,
.home-band--services {
  padding-block: var(--sect-pad);
}

.home-band--faq {
  margin-top: var(--sect-pad);
  background: var(--vm-ink-10);
}

.home-band__inner--reading {
  max-width: calc(var(--w-main) + 2 * var(--gutter));
}

.home-band .faq:first-of-type {
  margin-top: var(--sp-comp);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .benefits[data-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .split,
  .benefits[data-cols="4"],
  .card-grid[data-cols="2"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .split {
    gap: var(--sp-comp);
  }

  .split--media-first > .fig {
    order: 1;
  }

  .snap-strip {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 300px;
    gap: var(--sp-grid);
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: var(--s3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
  }

  .snap-strip > * {
    scroll-snap-align: start;
  }

  .review-grid > :nth-child(-n+5) {
    grid-column: auto;
    grid-row: 1;
  }

  .review-grid > :nth-child(6) {
    position: sticky;
    left: 0;
    grid-column: 1 / 6;
    grid-row: 2;
    width: calc(100vw - 2 * var(--gutter));
    margin-top: var(--sp-grid);
    scroll-snap-align: none;
  }

}

@media (min-width: 768px) {
  [data-frame-route="/conditions-newsletter/"] .data-table :is(td, th) {
    padding: var(--s2);
  }

  [data-frame-route="/conditions-newsletter/"] .data-table :is(td, th):nth-child(1) {
    width: 22%;
  }

  [data-frame-route="/conditions-newsletter/"] .data-table :is(td, th):nth-child(2) {
    width: 18%;
  }

  /* Fixed layout: the expiry column gets room for its unbroken value ("2 měsíce"), which at
     1024 px beside the aside did not fit 12 %; the purpose column takes the rest. */
  [data-frame-route="/conditions-newsletter/"] .data-table :is(td, th):nth-child(3) {
    width: auto;
  }

  [data-frame-route="/conditions-newsletter/"] .data-table :is(td, th):nth-child(4) {
    width: 7em;
  }

  [data-frame-route="/galerie/"] .card-grid--gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
}

@media (max-width: 767px) {
  :root {
    --vm-home-notice-h: calc(2 * var(--fs-body) * var(--lh-body) + var(--sp-p));
  }

  .form-band__inner {
    padding-block: var(--sp-comp);
    gap: var(--sp-comp);
  }

  .form-band__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-comp);
    padding-block: var(--sp-comp);
  }

  .site-footer__brand,
  .site-footer__details {
    grid-column: 1 / -1;
  }

  .site-footer__newsletter {
    gap: var(--s4);
    padding-top: var(--sp-comp);
  }

}

/* === System v3: method comparison === */
/* M4: comparison that travels across every method card */
.method-board {
  margin-block: var(--sp-comp);
}

.method-board__legend button.is-active,
.method-board__legend button[aria-pressed="true"] {
  background: var(--vm-ink-10);
}

.method-board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-grid);
}

.method-card {
  position: relative;
  min-width: 0;
  padding: var(--s5);
  overflow: hidden;
  border: 1px solid var(--vm-ink-20);
  border-radius: var(--r-card);
  background: var(--g-page);
}

.method-card h3 {
  margin-bottom: var(--sp-h3-text);
}

.method-card h3 a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.method-card > p {
  min-height: 4.6em;
  margin-bottom: var(--sp-p);
  color: var(--vm-ink-100);
  font-size: calc((var(--fs-small) + var(--fs-btn)) / 2);
  line-height: 1.55;
}

.method-card dl {
  margin: 0;
}

.method-card__row {
  display: grid;
  grid-template-columns: minmax(132px, 0.78fr) minmax(0, 1.22fr);
  gap: var(--s4);
  padding: var(--s3);
  border-top: var(--line-light);
}

.method-card__row.is-highlighted {
  background: var(--vm-ink-10);
}

.method-card__row dt {
  color: var(--vm-ink-100);
  font-size: var(--fs-small);
  font-weight: var(--vm-w-semibold);
  line-height: 1.4;
}

.method-card__row dd {
  margin: 0;
  color: var(--vm-ink-100);
  font-size: calc((var(--fs-small) + var(--fs-btn)) / 2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--vm-w-medium);
  line-height: 1.45;
}

@media (max-width: 899px) {

  .method-board__grid { grid-template-columns: minmax(0, 1fr); }
  .method-card > p { min-height: 0; }
}
@media (max-width: 599px) {
  .method-card__row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

/* R2A: shared reading layout and compact supporting content. */
.page-main > .page-tabs { width: 100%; margin: 0 0 var(--sp-comp); }
.page-grid--tabs { padding-top: 0; }
.page-grid--tabs > .page-aside { padding-top: calc(var(--s7) + var(--sp-comp)); }

/* Preserve main ownership for native import; the band's paint spans the viewport.
   Aside track ends at reading content, before the band, with no guessed height. */
.page-grid--form-band { grid-template-rows: repeat(7, auto); row-gap: 0; padding-bottom: 0; }
.page-grid--form-band > .page-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-column: 1;
  grid-row: 1 / span 7;
  gap: 0;
}
.page-grid--form-band > .page-aside { grid-column: 2; grid-row: 1 / span 5; }
.page-grid--form-band .page-main > .page-tabs { grid-row: 1; }
.page-grid--form-band .page-main > .lede { grid-row: 2; }
.page-grid--form-band .page-main > .toc--mobile { grid-row: 3; }
.page-grid--form-band .page-main > .page-aside__sticky { grid-row: 4; }
.page-grid--form-band .page-main > .page-main__content { grid-row: 5; }
.page-main > .form-band {
  grid-row: 7;
  width: 100vw;
  margin-top: var(--sect-pad);
  margin-left: calc((min(var(--w-page), 100vw - 2 * var(--gutter)) - 100vw) / 2);
}

:is(.page-aside, .profile-followup) .page-newsletter,
.newsletter-card {
  padding: var(--s5);
  border: var(--line-light);
  border-radius: var(--r-card);
  background: var(--g-wash);
}

:is(.page-aside, .profile-followup) .page-newsletter__inner {
  display: block;
  width: auto;
  padding: 0;
}

:is(.page-aside, .profile-followup, .newsletter-card) .newsletter-form {
  grid-template-columns: minmax(0, 1fr);
}

:is(.page-aside, .profile-followup, .newsletter-card) .newsletter-form input[type="email"] {
  width: 100%;
  min-width: 0;
  margin: 0;
}

:is(.page-aside, .profile-followup, .newsletter-card) .newsletter-form > .btn {
  width: 100%;
}

.profile-followup {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-grid);
}

.profile-followup .page-aside__sticky {
  position: static;
  max-height: none;
  overflow: visible;
}

.profile-followup .page-newsletter { margin: 0; }
.profile-followup .page-newsletter__intro { margin-bottom: var(--s4); }
.page-grid--profile .profile-cv:last-child { margin-bottom: 0; }

.gallery-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-grid);
  margin-top: var(--sp-comp);
}
.gallery-contact > .page-aside { margin-top: 0; }

.page-main__content .card-grid[data-lightbox-gallery] .card > a > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-media);
}

.page-main__content :is(.clinic-gallery, .clinical-gallery) {
  gap: var(--sp-grid);
  padding: 0;
  background: none;
}

.page-main__content :is(.clinic-gallery__item, .clinical-gallery__item, .clinic-gallery__item img, .clinical-gallery__item img) {
  border-radius: var(--r-media);
}

.page-main__content p:has(> .btn) + .video-embed {
  margin-top: var(--sp-comp);
}

/* WordPress renders content buttons as .wp-block-buttons, not the static p > .btn: give the
   group a component's space so text, embeds and references never touch it. */
.page-main__content .wp-block-buttons {
  margin-block: var(--sp-comp);
}

.page-main__content :is(.callout, .price-panel, .quote, .faq__a) > .wp-block-buttons:last-child {
  margin-bottom: 0;
}

.page-main__content .contact-form,
.page-main__content .mexpe-reviews {
  margin-bottom: var(--sp-comp);
}

.page-main__content > .form-band__form:first-child {
  margin-top: 0;
}

/* A heading directly above a ruled accordion list keeps clear of its first rule. */
.page-main__content :is(h2, h3) + details {
  margin-top: var(--s4);
}

/* A media shell nested in the content column (WordPress news index) adds no second gutter. */
.page-main__content > .media-page {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Gallery index cards have no inner padding: keep the title and button off the photo. */
.card-grid--gallery > .card > a > :is(h2, h3, .btn--secondary) {
  margin-top: var(--s3);
}

.page-main__content h2 + :is(.data-table, .wp-block-table) {
  margin-top: var(--sp-h2-text);
}

.page-main__content h2 + .wp-block-table > .data-table {
  margin-top: 0;
}

[data-frame-route="/kontakt/"] .contact-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-grid);
  max-width: none;
  padding-top: 0;
  border-top: 0;
}

.contact-block > :is(h2, p, .contact-block__links) { grid-column: 1 / -1; }
[data-frame-route="/kontakt/"] .contact-block > p:has(> strong) { grid-column: auto; }
/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.contact-block__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-grid);
  margin: var(--sp-h2-text) 0 var(--sp-comp);
  font-size: var(--fs-h3);
  font-weight: var(--vm-w-semibold);
}

.contact-block__links > * { min-width: 0; }
/* Later override follows equal-specificity component/breakpoint rules; keep this cascade position. */
.contact-block__label {
  font-size: var(--fs-label);
  font-weight: var(--vm-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vm-track-label);
}

.contact-block__response {
  display: block;
  grid-column: 2;
  margin: var(--s2) 0 0;
  font-size: var(--fs-small);
  font-weight: var(--vm-w-regular);
  line-height: 1.5;
}

.contact-location {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-h2-text) var(--sp-grid);
  align-items: start;
}
.contact-location > h2 { grid-column: 1 / -1; margin-bottom: 0; }
.contact-location .video-embed { margin: 0; aspect-ratio: 4 / 3; }
.contact-location__details { min-width: 0; }
[data-frame-route="/kontakt/"] :is(.contact-block__links, .contact-block__links > p) { display: contents; }
[data-frame-route="/kontakt/"] .contact-block__links a {
  margin-top: var(--sp-h2-text);
  font-size: var(--fs-h3);
  font-weight: var(--vm-w-semibold);
}
[data-frame-route="/kontakt/"] .contact-block > .contact-block__response { grid-column: 2; }
[data-frame-route="/kontakt/"] #form-kontakt > .video-embed:last-child { margin-bottom: 0; }

/* R2B: native/source component hooks supplied by the parallel content worker. */
.method-board--compact .method-board__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-grid);
}
.method-board--compact .method-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.method-board--compact .method-card > p {
  min-height: 0;
  margin-bottom: var(--s2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.method-board--compact .method-card__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s3);
  padding: var(--s1) 0;
  border: 0;
}
.method-board--compact .method-card__row :is(dt, dd) {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
[data-frame-route="/tym/"] .card-grid[data-cols="4"] > .card > a > img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-grid);
  align-items: start;
  margin-block: var(--sp-comp);
}
.figure-pair > .fig { min-width: 0; margin: 0; }
.page-main__content .figure-pair img { width: 100%; height: auto; aspect-ratio: auto; }
.card-grid--reviews {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  gap: var(--sp-grid);
}
.card-grid--reviews > .review-card {
  min-width: 0;
  padding: var(--s5);
  border: var(--line-light);
  border-radius: var(--r-card);
  background: var(--g-page);
  box-shadow: none;
}
.card-grid--reviews .review-card > .quote { margin: 0; padding: 0; border: 0; }
.card-grid--reviews .quote p {
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: var(--vm-w-regular);
  line-height: var(--lh-body);
}
[data-frame-route="/vstupni-konzultace-krok-za-krokem/"] .steps { align-items: start; grid-auto-rows: auto; }
[data-frame-route="/vstupni-konzultace-krok-za-krokem/"] .steps > li { align-self: start; height: auto; }
.consultation-art-direction picture { display: block; }
.faq > summary > h3 { margin: 0; font: inherit; color: inherit; }
[data-frame-route="/objednat/"] .form-check strong { font-weight: var(--vm-w-bold); }

@media (max-width: 1023px) {
  .page-aside { margin-top: var(--sp-comp); }
  .page-main > .page-aside__sticky { margin-bottom: var(--sp-comp); }
  .profile-followup { margin-top: var(--sp-comp); }
  .page-grid.page-grid--form-band > .page-main { display: grid; }
  .page-grid--form-band > .page-aside { grid-column: 1; grid-row: 6; }
  .page-grid--tabs > .page-aside { padding-top: 0; }
}

@media (max-width: 767px) {
  /* Preserve the montage's bitmap captions at the full phone content width. */
  [data-frame-route="/galerie/"] .card-grid--gallery img:is([src*="predpo_49"], [src*="predpo_iv1970"]) {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  .profile-followup, .figure-pair, .card-grid--reviews, .contact-location, .gallery-contact,
  [data-frame-route="/kontakt/"] .contact-block, .contact-block__links {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-block__links { gap: var(--sp-p); }
  [data-frame-route="/kontakt/"] .contact-block > .contact-block__response { grid-column: 1; }
  [data-frame-route="/cenik-sluzeb/"] .btn { width: 100%; }
}

/* W-N1: LIVE's phone header crops; body scans keep their original order. */
.news-header-media { display: none; }
:is(.news-header-media, .news-lead-media) > .fig { margin: 0; }

/* W-X5 handoff: the restored map button sits on the dark footer. */
.site-footer .btn--secondary {
  border-color: var(--vm-on-ink);
  color: var(--vm-on-ink);
}
.site-footer .btn--secondary:is(:hover, .is-hover, :active, .is-active) {
  background: var(--vm-on-ink);
  color: var(--vm-ink-100);
}

@media (max-width: 767px) {
  /* Intrinsic source proportions, not spacing tokens. */
  body:has([data-frame-route="/novinky/clanek-v-casopise-kvety/"]),
  body:has([data-frame-route="/novinky/clanek-v-casopise-moje-zdravi/"]) { --news-header-aspect: 380 / 228; }
  body:has([data-frame-route="/novinky/clanek-v-casopise-muj-svet/"]) { --news-header-aspect: 519 / 359; }
  body:has([data-frame-route="/novinky/clanek-v-casopisu-ekonom-41-2015/"]) { --news-header-aspect: 590 / 444; }
  body:has([data-frame-route="/novinky/cro-dvojka-moci-bez-nemoci/"]) { --news-header-aspect: 1000 / 666; }
  body:has([data-frame-route="/novinky/host-poradu-dva-na-dvojce/"]) { --news-header-aspect: 1000 / 750; }
  body:has([data-frame-route="/novinky/host-radiozurnalu/"]) { --news-header-aspect: 925 / 604; }
  body:has([data-frame-route="/novinky/novy-laserovy-generator/"]) { --news-header-aspect: 1200 / 750; }
  body:has([data-frame-route="/novinky/pravo-styl-pro-zeny/"]) { --news-header-aspect: 436 / 277; }
  body:has([data-frame-route="/novinky/rozhovor-v-casopise-zazraky-mediciny-100-1/"]) { --news-header-aspect: 750 / 530; }
  body:has([data-frame-route="/novinky/zilni-gymnastika-je-vhodna-pro-kazdeho/"]) { --news-header-aspect: 1000 / 667; }
  :is(body, .wp-site-blocks):has(> .page-header + .page-grid :is(.news-header-media, .news-lead-media)) { position: relative; }
  .page-header:has(+ .page-grid :is(.news-header-media, .news-lead-media)) {
    padding-top: calc(var(--band-pad) + 100vw / (var(--news-header-aspect)));
  }
  [data-frame-route^="/novinky/"] :is(.news-header-media, .news-lead-media) {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: calc(var(--rating-strip-h) + var(--vm-site-header-h) + var(--vm-header-actions-h));
    width: 100%;
    max-width: none;
    margin: 0;
  }
  [data-frame-route^="/novinky/"] :is(.news-header-media, .news-lead-media) img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-0);
    aspect-ratio: auto;
  }
}

/* === System v3: R3A content hierarchy === */
.card-grid--comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--comparison > .card { display: block; padding: var(--s5); }
.card-grid--comparison > .card > :last-child { margin-bottom: 0; }
.page-main__content .reference { margin-top: var(--sect-pad); }
[data-frame-family="B8"] .page-main > .lede,
[data-frame-family="B8"] .page-main__content > .callout:first-child > p:first-child,
[data-frame-family="B8"] .page-main__content > .page-main__content > .callout:first-child > p:first-child {
  font-weight: var(--vm-w-bold);
}
.page-header .byline {
  margin-top: var(--sp-h2-text);
  color: var(--vm-on-ink);
  font-size: var(--fs-h3);
  font-weight: var(--vm-w-semibold);
}
.page-header .byline > p { margin: 0; }
.news-art-direction picture { display: block; }
@media (min-width: 768px) {
  .news-lead-media--compact { max-width: var(--w-aside); }
}
@media (max-width: 767px) {
  .page-main__content :is(.btn, .button) { width: 100%; }
  .card-grid--comparison { grid-template-columns: minmax(0, 1fr); }
}

/* === System v3: R3B shared card rows and full-container gallery === */
.home-band .card__text p {
  font-size: calc((var(--fs-small) + var(--fs-btn)) / 2);
  line-height: 1.5;
}
.home-band .card__text p + p { margin-top: var(--sp-p); }
.home-band h2 + .card__text { margin-top: var(--sp-h2-text); }
@media (min-width: 768px) {
  .home-band .promo-grid { grid-template-rows: auto auto auto 1fr auto auto; }
  .promo-grid > .card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .home-band .promo-grid > .card > a {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .home-band .promo-grid .btn--secondary { margin-top: 0; align-self: start; }
}
.page-grid--wide { grid-template-rows: repeat(6, auto); row-gap: 0; }
.page-grid--wide > .page-main {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1;
  grid-row: 1 / span 6;
  gap: 0;
}
.page-grid--wide > .page-aside { grid-column: 2; grid-row: 1 / span 5; }
.page-grid--wide .page-main > .lede { grid-row: 2; }
.page-grid--wide .page-main > .toc--mobile { grid-row: 3; }
.page-grid--wide .page-main > .page-aside__sticky { grid-row: 4; }
.page-grid--wide .page-main > .page-main__content { grid-row: 5; }
.page-main > .page-wide {
  grid-row: 6;
  width: min(var(--w-page), calc(100vw - 2 * var(--gutter)));
  margin-top: var(--sect-pad);
}
@media (max-width: 1023px) {
  .page-grid--wide > .page-aside { grid-column: 1; grid-row: 7; }
}
@media (max-width: 767px) {
  .card-grid:not(.snap-strip) { grid-auto-rows: auto; }
}

/* R3C: reading rhythm, gallery actions and full-size phone reading. */
[data-frame-family="B9"] .page-main__content p { margin-block: 0 var(--sp-p); }
[data-frame-family="B9"] .page-main__content > section + section { margin-top: var(--sect-pad); }
.page-main__content h2 + :is(.quote, .card-grid) { margin-top: var(--sp-h2-text); }
[data-frame-family="B7"]:has(.tabs) { padding-top: var(--sp-comp); }
[data-frame-family="B7"] .page-main__content .tabs { margin-top: 0; }

/* Gallery slots preserve the approved bitmap; montage captions are part of it. */
.page-main__content .card-grid[data-lightbox-gallery] .card > a > img[data-vm-fit="contain"] { object-fit: contain; background: var(--vm-ink-10); }
/* Enlargeable photos: no permanent label. Hover/focus darkens the photo and shows an
   expand icon; touch screens (no hover) keep a small icon in the corner. The accessible
   name stays "Otevřít originál" (aria-label). */
.media-enlarge { position: relative; display: block; width: fit-content; max-width: 100%; overflow: hidden; cursor: zoom-in; }
.media-enlarge img { transition: transform 0.25s ease; }
.media-enlarge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vm-ink-100);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}
.media-enlarge::after {
  content: "";
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  width: var(--s6);
  height: var(--s6);
  border-radius: 50%;
  background: var(--vm-ink-100) url(../icon-expand.svg) center / 55% no-repeat;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
@media (hover: hover) {
  .media-enlarge::after { opacity: 0; transform: scale(0.9); }
  .media-enlarge:is(:hover, :focus-visible)::before { opacity: 0.2; }
  .media-enlarge:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
  .media-enlarge:is(:hover, :focus-visible) img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .media-enlarge img, .media-enlarge::before, .media-enlarge::after { transition: none; }
  .media-enlarge:is(:hover, :focus-visible) img { transform: none; }
}
.media-enlarge:focus-visible { outline: 2px solid var(--vm-blue-100); outline-offset: 2px; }

@media (max-width: 767px) {
  /* The modal is a pan-able natural-size canvas, not another tiny thumbnail.
     Controls stay fixed while the reader pans the scan or montage. */
  .lightbox { display: block; place-items: start; overflow: auto; padding: calc(var(--s7) + var(--s4)) var(--s4) calc(3 * var(--s7)); }
  .lightbox__image { display: block; margin: 0; width: auto; height: auto; max-width: none; max-height: none; }
  .lightbox__close, .lightbox__previous, .lightbox__next, .lightbox__meta { position: fixed; }
}

/* "Objednat konzultaci" (#contact_form): on two-column bands land on the band top, so its heading shows with the form. */
@media (min-width: 768px) {
  #contact_form {
    scroll-margin-top: var(--band-pad);
  }
}