/* VENUS Site: homepage motion and interaction styles (ported from the draft sandbox, 2026-10-26). */
/* Hero: visible from first paint, gentle entrance. */
@media (prefers-reduced-motion: no-preference) {
  .elementor-element-b32558a { animation: v-rise 700ms cubic-bezier(0.23, 1, 0.32, 1) 80ms both; }
  .elementor-element-367643f6 { animation: v-settle 1800ms cubic-bezier(0.23, 1, 0.32, 1) both; }
}
@keyframes v-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes v-settle { from { transform: scale(1.08); } }

/* Reduced motion: switch off Elementor's fades and slides, keep the header instant. */
@media (prefers-reduced-motion: reduce) {
  [data-interaction-id]:not(#venus-header) { opacity: 1 !important; transform: none !important; }
  #venus-header { transition: background-color 200ms ease !important; }
  #vh-bar, #site-menu, #vh-actions .vh-more, #vh-actions .vh-mtext, #vh-actions .vh-micon, #vh-actions .vh-micon i { transition: none !important; }
}

/* Header: full bar at the very top; after scrolling it splits into two floating pills
   (logo left, Menu + Book right). Scrolling down tucks the pills up slightly; they float back on idle. */
@media (min-width: 1025px) {
  /* Bar -> pills is a pure crossfade: nothing changes size or position.
     The full-width bar's tint lives on #venus-header::before and fades out; each pill's tint lives on its own
     ::before and fades in (opacity only, so the backdrop blur fades too instead of popping). */
  #venus-header { background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate; }
  #venus-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: rgba(22, 20, 18, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 360ms ease; }
  #venus-header[data-compact]::before { opacity: 0; }
  #venus-header[data-compact] { pointer-events: none; }
  #venus-header[data-compact] #vh-logo, #venus-header[data-compact] #vh-actions, #venus-header[data-compact] #site-menu { pointer-events: auto; }
  /* Fixed padding in both states; pills carry their own padding at all times (bar padding offsets it so the logo and buttons sit where they did). */
  #vh-bar { padding: 12px 48px 12px 42px !important; transform-origin: 50% 0; transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1), border-color 360ms ease; }
  #venus-header[data-compact] #vh-bar { border-bottom-color: transparent !important; }
  /* Tuck: slide up until only the bottom ~10px of the pills shows (100% = bar height; the bar's 12px bottom padding
     plus 10px of pill stay on screen). Gentle drawer-style curve both ways. */
  #venus-header[data-tuck] #vh-bar { transform: translateY(calc(-100% + 22px)); }
  /* "Book a consultation" shortens to "Book" as the bar becomes pills. */
  #vh-actions .vh-more { display: inline-block; vertical-align: bottom; max-width: 16em; overflow: hidden; white-space: nowrap; transition: max-width 360ms cubic-bezier(0.23, 1, 0.32, 1), opacity 240ms ease; }
  #venus-header[data-compact] #vh-actions .vh-more { max-width: 0; opacity: 0; }
  /* "MENU" crossfades into a two-line icon in the pill (the icon becomes an x while the menu is open). */
  #vh-actions a[href="#site-menu"] { display: inline-flex !important; align-items: center; }
  #vh-actions .vh-mtext { display: inline-block; max-width: 5em; overflow: hidden; white-space: nowrap; transition: max-width 360ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease; }
  #vh-actions .vh-micon { position: relative; display: inline-block; width: 0; height: 12px; opacity: 0; transition: width 360ms cubic-bezier(0.23, 1, 0.32, 1), opacity 240ms ease 80ms; }
  #vh-actions .vh-micon i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background-color: currentColor; transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
  #vh-actions .vh-micon i:first-child { top: 2px; }
  #vh-actions .vh-micon i:last-child { top: 8.5px; }
  #venus-header[data-compact] #vh-actions .vh-mtext { max-width: 0; opacity: 0; }
  #venus-header[data-compact] #vh-actions .vh-micon { width: 20px; opacity: 1; }
  #vh-actions a[aria-expanded="true"] .vh-micon i:first-child { transform: translateY(3.25px) rotate(45deg); }
  #vh-actions a[aria-expanded="true"] .vh-micon i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  #vh-logo, #vh-actions { position: relative; isolation: isolate; border-radius: 999px; }
  #vh-logo { padding: 13px 22px !important; }
  #vh-actions { padding: 6px 16px 6px 20px !important; }
  #vh-logo::before, #vh-actions::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: rgba(22, 20, 18, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 360ms ease; }
  #venus-header[data-compact] #vh-logo::before, #venus-header[data-compact] #vh-actions::before { opacity: 1; }
  /* Links fade and lift away; Menu stays in place in both states so the right pill never changes width. */
  #vh-nav { transition: opacity 240ms ease, transform 360ms cubic-bezier(0.23, 1, 0.32, 1), visibility 240ms; }
  #venus-header[data-compact] #vh-nav { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  #venus-header a[href="#site-menu"] { display: inline-block !important; }
  #site-menu { position: absolute; top: calc(100% + 10px); right: 64px; width: 320px; flex-direction: column; padding: 8px 26px 16px; background-color: rgba(22, 20, 18, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 22px; }
}
/* Phones and tablets: edge-to-edge bar; turns solid once scrolled, slides away on scroll down,
   comes back on scroll up or after a short pause. */
@media (max-width: 1024px) {
  #venus-header { transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1), background-color 240ms ease; }
  #venus-header[data-compact] { background-color: rgba(22, 20, 18, 0.94) !important; }
  #venus-header[data-tuck] { transform: translateY(-100%); }
}

/* Reviews wall: two columns of cards drifting in opposite directions (each column holds its set twice for a seamless loop). */
#rv-wall { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
@media (prefers-reduced-motion: no-preference) {
  #rv-wall .v-rv-col { animation: v-rv-up 52s linear infinite; will-change: transform; }
  #rv-wall .v-rv-col + .v-rv-col { animation-name: v-rv-down; animation-duration: 60s; }
  #rv-wall:hover .v-rv-col, #rv-wall:focus-within .v-rv-col { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) { #rv-wall { overflow-y: auto !important; } }
/* Phones: a still, swipeable row of the same cards (no motion, no fade mask). */
@media (max-width: 767px) {
  #rv-wall { -webkit-mask-image: none; mask-image: none; }
  #rv-wall .v-rv-col { animation: none !important; transform: none !important; }
}
@keyframes v-rv-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes v-rv-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* Signature rail: horizontal scroller (wheel over the photos, drag, or arrows); the page scroll is never pinned. */
@media (min-width: 1025px) {
  #sig-track { cursor: grab; }
  #sig-track.is-dragging { cursor: grabbing; }
  #sig-track.is-dragging img { pointer-events: none; }
}

/* Treatment list: Elementor's class editor drops custom curves, so the timing lives here.
   (Script sets transition:none inline for instant changes, which still wins over these.) */
body .elementor .v-tx-detail { transition: height 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease-out; }
body .elementor .v-tx-name { transition: color 200ms ease; }

/* Photo hover zoom: real hover devices only (a tap on touch would leave it stuck zoomed), stronger curve. */
body .elementor .v-photo-zoom { transition: transform 800ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: none), (pointer: coarse) {
  body .elementor .v-photo-zoom:hover, body .elementor .v-photo-zoom:focus-visible { transform: none; }
}

/* Menu dropdown entrance: 180ms fade + scale from 0.97, anchored at its trigger (top right on desktop). */
@media (prefers-reduced-motion: no-preference) {
  #site-menu { transform-origin: top center; transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
  @starting-style { #site-menu { opacity: 0; transform: translateY(-4px) scale(0.97); } }
}
@media (min-width: 1025px) { #site-menu { transform-origin: top right; } }

/* Lenis required CSS. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Image drift on the compositor where supported (7% of the frame, inside the 10% overscan). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :has(> .v-px-img) { view-timeline: --vframe block; }
    .v-px-img { animation: v-drift linear both; animation-timeline: --vframe; animation-range: cover; }
  }
}
@keyframes v-drift { from { transform: translate3d(0, 7%, 0); } to { transform: translate3d(0, -7%, 0); } }

/* Visible keyboard focus. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--venus-salt, #8A5226) !important; outline-offset: 3px; }
#venus-header a:focus-visible, footer a:focus-visible, #reviews a:focus-visible { outline-color: var(--venus-salt-light, #D4955A) !important; }
body .elementor .e-form-input-base:focus-visible,
body .elementor .e-form-textarea-base:focus-visible { outline: 2px solid var(--venus-salt, #8A5226) !important; outline-offset: 2px; }

/* Small desktops (1025-1365px): the links don't fit on one line beside "Book a consultation", so the bar shows logo, Book and Menu only. */
@media (min-width: 1025px) and (max-width: 1365px) {
  #vh-nav { display: none !important; }
}
/* Poster titles: long device names hyphenate instead of running off the poster. */
#sig-track h3 { min-width: 0; max-width: 100%; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

/* Membership band: two cards fanned; the chosen tier slides to the front.
   On-screen movement uses a strong ease-in-out; transitions (not keyframes) so quick switching retargets. */
#mb-fan { --w: 440px; --ch: calc(var(--w) / 1.586); }
@media (max-width: 1024px) { #mb-fan { --w: 400px; } }
@media (max-width: 767px) { #mb-fan { --w: 254px; } }
#mb-card-0, #mb-card-1 { transition: transform 420ms cubic-bezier(0.77, 0, 0.175, 1); }
#mb-card-0, #mb-fan [data-slot="front"] { z-index: 2; transform: translate3d(0, calc(var(--ch) * 0.45), 0) rotate(-3deg); }
#mb-card-1, #mb-fan [data-slot="back"] { z-index: 1; transform: translate3d(calc(var(--w) * 0.3), 0, 0) rotate(4deg); }
#mb-fan #mb-card-0[data-slot="back"] { z-index: 1; transform: translate3d(calc(var(--w) * 0.3), 0, 0) rotate(4deg); }
#mb-fan #mb-card-1[data-slot="front"] { z-index: 2; transform: translate3d(0, calc(var(--ch) * 0.45), 0) rotate(-3deg); }
#mb-tabs a { cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
#mb-tabs a[aria-selected="true"] { background-color: var(--venus-paper, #FAF8F5) !important; color: var(--venus-night, #161412) !important; }
@media (hover: hover) and (pointer: fine) { #mb-tabs a[aria-selected="false"]:hover { color: var(--venus-paper, #FAF8F5) !important; } }
#mb-tabs a:focus-visible { outline: 2px solid var(--venus-salt-light, #D4955A) !important; outline-offset: 2px; }
#mb-panel-1 { display: none; }
@keyframes mb-in { from { opacity: 0; } }
#membership [role="tabpanel"].mb-show { animation: mb-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@media (prefers-reduced-motion: reduce) {
  #mb-card-0, #mb-card-1 { transition: none; }
  #membership [role="tabpanel"].mb-show { animation: none; }
}

/* Swipe-row progress marker (Advanced treatments, How VENUS works on phones). Built by venus.js. */
.v-prog { display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; }
.v-prog[hidden] { display: none; }
.v-prog-bar { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.v-prog-seg { position: relative; flex: 1 1 0; height: 2px; border-radius: 2px; overflow: hidden; background: var(--v-prog-rest); }
.v-prog-fill { position: absolute; inset: 0; background: var(--v-prog-on); transform: scaleX(0); transform-origin: left center; }
.v-prog-count { flex: 0 0 auto; font-family: var(--venus-sans), sans-serif; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--v-prog-text); }
.v-prog-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v-prog--dark { --v-prog-on: var(--venus-salt-light); --v-prog-rest: rgba(250, 248, 245, 0.2); --v-prog-text: var(--venus-mist); }
.v-prog--light { --v-prog-on: var(--venus-ink); --v-prog-rest: rgba(30, 27, 24, 0.16); --v-prog-text: var(--venus-ink-muted); }
/* Desktop: the marker takes the hint's place beside the arrows. */
.has-prog > [data-id="4d394c99"] { display: none; }
.has-prog > .v-prog { max-width: 440px; }
/* Under the posters (tablet, phone) and above the How cards. */
#how .v-prog { margin-block: -8px -12px; }

/* Review board: long reviews fold to four lines (venus.js adds .rv-clamp and the More button). */
#rv-board .rv-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
#rv-board .rv-clamp.rv-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
#rv-board .rv-more { align-self: flex-start; margin-top: -6px; padding: 6px 0; min-height: 32px; background: none; border: 0; font: 600 16px/1.2 degular, sans-serif; color: var(--venus-salt, #8A5226); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#rv-board .rv-more:focus-visible { outline: 2px solid var(--venus-salt-light, #D4955A); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { #rv-board .rv-more:hover { color: var(--venus-ink, #1E1B18); } }
#reviews .v-prog { margin-top: 18px; }
#rv-board { cursor: grab; }
#rv-board::-webkit-scrollbar { display: none; }
/* Review row scroll bar (thumbMarker in venus.js). */
.v-thumb-track { position: relative; flex: 1 1 auto; min-width: 0; height: 2px; border-radius: 2px; overflow: hidden; background: var(--v-prog-rest); }
.v-thumb { position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px; background: var(--v-prog-on); will-change: transform; }
.v-prog--thumb .v-prog-count { font-size: 16px; }

/* Sticky Book bar on phones (venus.js toggles .is-hidden). */
#sticky-book { transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease; padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
#sticky-book.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #sticky-book { transition: opacity 150ms ease; } #sticky-book.is-hidden { transform: none; } }
@media (max-width: 767px) { body.has-sticky-book::after { content: ""; display: block; height: 84px; background: var(--venus-night, #161412); } }
#sticky-book a:focus-visible { outline: 2px solid var(--venus-salt-light, #D4955A); outline-offset: 3px; }

/* Hydra visit slip: zigzag bottom edge, dotted leaders, active line, photo crossfade (venus.js). */
#visit-slip { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x; }
#visit-slip > div > div:not(:has(*)) { background-image: radial-gradient(circle, var(--venus-mist, #B8B1A8) 1.6px, transparent 1.8px); background-size: 8px 4px; background-repeat: repeat-x; background-position: left center; }
#visit-slip .slip-row { cursor: pointer; margin-inline: -10px; padding-inline: 10px !important; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { #visit-slip .slip-row:hover { background-color: var(--venus-stone, #ECE8E2); } }
#visit-slip .slip-row.is-active { background-color: var(--venus-stone, #ECE8E2); }
#visit-slip .slip-row.is-active > p:first-child { color: var(--venus-salt, #8A5226); font-weight: 600; }
#visit-slip .slip-row:focus-visible { outline: 2px solid var(--venus-salt, #8A5226); outline-offset: 2px; }
#visit-photos img { opacity: 0; }
#visit-photos img:first-child { opacity: 1; }
#visit-photos.js-ready img { opacity: 0; transition: opacity 1.2s ease; }
#visit-photos.js-ready img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #visit-photos.js-ready img { transition: opacity 0.2s ease; } }
#visit-slip .slip-row > p:last-child { white-space: nowrap; }
@media (max-width: 767px) { #visit-slip .slip-row > p:last-child { white-space: normal; } }
@media (max-width: 767px) { #visit-slip .slip-row > div { display: none !important; } #visit-slip .slip-row > p:last-child { flex: 1 1 auto !important; } #visit-slip .slip-row > p:first-child { flex: 0 0 auto; padding-right: 12px; } }

/* Hydra "How it works" showcase (venus.js): pinned photo, steps light up, gold progress line. */
#hw-media { position: sticky !important; top: 11vh; align-self: start; }
#hw-media img { opacity: 0; transform: scale(1); transition: opacity 900ms ease, transform 6s ease-out; }
#hw-media img:first-child { opacity: 1; }
.hw-js #hw-media img { opacity: 0; }
.hw-js #hw-media img.is-on { opacity: 1; transform: scale(1.04); }
#hw-steps { position: relative; padding-left: 36px !important; }
#hw-steps::before, #hw-steps::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
#hw-steps::before { background: rgba(250, 248, 245, 0.12); }
#hw-steps::after { background: var(--venus-salt-light, #D4955A); transform-origin: top; transform: scaleY(var(--hw-p, 0)); }
.hw-js #hw-steps > div:has(h3) { opacity: 0.75; transition: opacity 450ms ease; }
.hw-js #hw-steps > div.is-active { opacity: 1; }
@media (max-width: 767px) {
  #hw-media { top: 64px; z-index: 2; }
  #hw-steps { padding-left: 20px !important; }
}
@media (prefers-reduced-motion: reduce) { #hw-media img { transition: opacity 200ms ease; transform: none !important; } }

/* Phones: the How it works steps each carry their own photo (no pinned photo), all at full strength,
   and the header's Book pill steps aside while the bottom Book bar is showing. */
@media (max-width: 767px) {
  .hw-js #hw-steps > div:has(h3) { opacity: 1 !important; }
  #hw-steps { padding-left: 0 !important; }
  #hw-steps::before, #hw-steps::after { display: none; }
  body.sb-on #vh-actions a:not([href="#site-menu"]) { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
}
/* Hydra "Six handles" (venus.js): a gold line runs from each handle note into the edge of the photo.
   Lines sit under the photo, so each one meets the circle wherever it is. They draw out when the section
   comes into view; static with reduced motion or no script. Tablets and phones hide them (list layout). */
#tip-stage > :first-child > * > :last-child, #tip-stage > :last-child > * > :first-child { position: relative; background-color: var(--venus-salt-light, #D4955A) !important; opacity: 0.85; }
#tip-stage > :first-child > * > :last-child { transform-origin: right center; margin-right: -64px; }
#tip-stage > :last-child > * > :first-child { transform-origin: left center; margin-left: -64px; }
#tip-stage > :nth-child(2) { position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(212, 149, 90, 0.35), 0 40px 120px rgba(0, 0, 0, 0.45); }
.tp-js > :first-child > * > :last-child, .tp-js > :last-child > * > :first-child { transform: scaleX(0); transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1); }
.tp-js.is-in > :first-child > * > :last-child, .tp-js.is-in > :last-child > * > :first-child { transform: scaleX(1); }
.tp-js > :first-child > :nth-child(2) > :last-child, .tp-js > :last-child > :nth-child(2) > :first-child { transition-delay: 150ms; }
.tp-js > :first-child > :nth-child(3) > :last-child, .tp-js > :last-child > :nth-child(3) > :first-child { transition-delay: 300ms; }

/* Round 2 polish: bigger tap areas for the text links in the breadcrumb and the "pairs well" line,
   and lining figures for phone numbers. */
[id$="-hero"] p a, #for-you p a { display: inline-block; padding-block: 10px; margin-block: -10px; }
a[href^="tel:"] { font-variant-numeric: lining-nums; }

/* Six handles: numbered gold badges sit on the photo above each handle (positions set in Elementor),
   and the matching numeral leads each note, so every name points at its handle. */
#tip-stage { counter-reset: hnd; }
#tip-stage > :nth-child(2) > p { margin: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(22, 20, 18, 0.82); border: 1px solid var(--venus-salt-light, #D4955A); color: var(--venus-salt-light, #D4955A); font-family: degular, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; z-index: 2; }
#tip-stage h3::before { counter-increment: hnd; content: counter(hnd) / ""; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 12px; vertical-align: 0.2em; border-radius: 50%; border: 1px solid var(--venus-salt-light, #D4955A); color: var(--venus-salt-light, #D4955A); font-family: degular, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
@media (max-width: 767px) { #tip-stage > :nth-child(2) > p { width: 24px; height: 24px; font-size: 12px; } #tip-stage h3::before { width: 24px; height: 24px; font-size: 12px; margin-right: 10px; } }

/* Critique 2 polish: phone numbers never break across lines, the "pairs well with" links read as links,
   and the header Book pill reaches a 44px tap height on desktop. */
a[href^="tel:"] { white-space: nowrap; }
#for-you p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 768px) { #vh-actions > a.v-btn-light:first-child { padding-top: 13px !important; padding-bottom: 13px !important; } }

/* Audit fixes (1.0.22). Focus ring in gold on dark sections (bronze was ~2.8:1 there). */
[id$="-hero"] :focus-visible, #hw-show :focus-visible, #the-tip :focus-visible, header :focus-visible, footer :focus-visible { outline-color: var(--venus-salt-light, #D4955A) !important; }
/* Skip link, shown only when focused by keyboard. */
.v-skip { position: fixed; left: 16px; top: 12px; z-index: 10000; padding: 12px 20px; border-radius: 999px; background: var(--venus-paper, #FAF8F5); color: var(--venus-ink, #1E1B18); font: 600 14px/1 degular, sans-serif; text-decoration: none; transform: translateY(-160%); transition: transform 160ms ease-out; }
.v-skip:focus { transform: none; outline: 2px solid var(--venus-salt, #8A5226); outline-offset: 3px; }
/* The landmark wrapper must not change the layout. */
main.v-main { display: contents; }
/* Bigger tap areas: the call link in the FAQ intro and the logo links (WCAG 2.5.8). */
#faq a[href^="tel:"] { display: inline-block; padding-block: 12px; margin-block: -12px; }
header a.e-image-link-base, footer a.e-image-link-base { display: inline-block; padding-block: 6px; margin-block: -6px; }
/* Inline form errors (venus.js). */
.v-err { margin: 6px 0 0; color: var(--venus-error, #8A2E1F); font: 500 14px/1.4 degular, sans-serif; }
[aria-invalid="true"] { border-bottom-color: var(--venus-error, #8A2E1F) !important; }

/* Audit leftovers (1.0.23): the logo link wherever it sits gets a 24px+ tap height, and FAQ answers keep
   to about 75 characters a line (Face and Hydra). */
a.e-image-link-base:has(img[src*="VENUS-LOGO"]) { display: inline-block; padding-block: 6px; margin-block: -6px; }
details > :not(summary) p { max-width: 34em !important; }

/* Critique 3 (1.0.24). Form fields scroll clear of the sticky header when focused with an error;
   Visit us already shows the reception photo, so the booking block hides its copy there. */
#book input, #book textarea { scroll-margin-top: 110px; }
.page-id-10106 #visit img { display: none !important; }
/* The pinned How it works photo sits below the collapsed header pills on desktop. */
#hw-media { top: max(11vh, 112px) !important; }

/* FAQ questions are full sentences, so they use the text face (Degular), not the display face (1.0.25).
   Ambroise stays for headings and short labels. */
details > summary :is(h2, h3, h4) { font-family: var(--venus-sans, degular), sans-serif !important; font-size: 21px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
@media (max-width: 767px) { details > summary :is(h2, h3, h4) { font-size: 18px !important; } }

/* Treatment pages, How it works (1.0.28): one photo (#tx-media) beside the step list (#tx-list).
   Picking a step shows its photo; each photo is cropped close on its handpiece. */
#tx-media img { opacity: 0; transform: scale(1.22); transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1); }
#tx-media img:first-child { opacity: 1; }
#tx-media.is-ready img { opacity: 0; }
#tx-media.is-ready img.is-on { opacity: 1; }
#tx-list > * { cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
#tx-list > .is-on { border-inline-start-color: var(--venus-salt-light, #D4955A) !important; background-color: rgba(250, 247, 242, 0.05); }
#tx-list > *:focus-visible { outline: 2px solid var(--venus-salt-light, #D4955A); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { #tx-list > *:hover { background-color: rgba(250, 247, 242, 0.05); } }
@media (max-width: 767px) {
  #tx-media { aspect-ratio: 3 / 2 !important; }
  #tx-list #tx-media { margin-block-start: 14px; }
}
@media (prefers-reduced-motion: reduce) { #tx-media img { transition: none; } }

/* Treatment pages without a video (1.0.31): the benefits take the full width, four across on desktop. */
#benefits > * > :only-child { grid-column: 1 / -1; }
@media (min-width: 1025px) { #benefits > * > :only-child > :last-child { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* Treatment pages (1.0.32): split hero. Text left, a tall real photo right (4:5), on tablet and desktop.
   Phones keep the photo on top. Only treatment pages (#tx-steps) are affected (category pages keep the full-width hero, 1.0.38). */
@media (min-width: 768px) {
  body:has(#tx-steps) [id$="-hero"] { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; column-gap: 72px; min-height: 0 !important; padding: 136px max(64px, calc((100% - 1312px) / 2)) 80px !important; }
  body:has(#tx-steps) [id$="-hero"] > :nth-child(1) { position: relative !important; inset: auto !important; grid-column: 2; grid-row: 1; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
  body:has(#tx-steps) [id$="-hero"] > :nth-child(1) img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 40% !important; }
  body:has(#tx-steps) [id$="-hero"] > :nth-child(2) { display: none !important; }
  body:has(#tx-steps) [id$="-hero"] > :nth-child(3) { grid-column: 1; grid-row: 1; padding: 0 !important; max-width: 640px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body:has(#tx-steps) [id$="-hero"] { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: 40px; padding: 120px 40px 56px !important; }
}
@media (max-width: 767px) {
  body:has(#tx-steps) [id$="-hero"] > :nth-child(1) img { object-position: 50% 38% !important; }
}

/* Treatment pages (1.0.33): per-page hero focus. The builder gives the hero image an id hero-focus-NN (NN = vertical focus %). */
body:has(#tx-steps) #hero-focus-20, body:has(#tx-steps) #hero-focus-20 img { object-position: 50% 20% !important; }
body:has(#tx-steps) #hero-focus-25, body:has(#tx-steps) #hero-focus-25 img { object-position: 50% 25% !important; }
body:has(#tx-steps) #hero-focus-30, body:has(#tx-steps) #hero-focus-30 img { object-position: 50% 30% !important; }
body:has(#tx-steps) #hero-focus-35, body:has(#tx-steps) #hero-focus-35 img { object-position: 50% 35% !important; }
body:has(#tx-steps) #hero-focus-40, body:has(#tx-steps) #hero-focus-40 img { object-position: 50% 40% !important; }
body:has(#tx-steps) #hero-focus-45, body:has(#tx-steps) #hero-focus-45 img { object-position: 50% 45% !important; }
body:has(#tx-steps) #hero-focus-50, body:has(#tx-steps) #hero-focus-50 img { object-position: 50% 50% !important; }
body:has(#tx-steps) #hero-focus-55, body:has(#tx-steps) #hero-focus-55 img { object-position: 50% 55% !important; }
body:has(#tx-steps) #hero-focus-60, body:has(#tx-steps) #hero-focus-60 img { object-position: 50% 60% !important; }
body:has(#tx-steps) #hero-focus-65, body:has(#tx-steps) #hero-focus-65 img { object-position: 50% 65% !important; }
body:has(#tx-steps) #hero-focus-70, body:has(#tx-steps) #hero-focus-70 img { object-position: 50% 70% !important; }
body:has(#tx-steps) #hero-focus-75, body:has(#tx-steps) #hero-focus-75 img { object-position: 50% 75% !important; }
body:has(#tx-steps) #hero-focus-80, body:has(#tx-steps) #hero-focus-80 img { object-position: 50% 80% !important; }
/* 1.0.35: treatment pages, phones: 5:4 hero photo (shows more of the tall real frames, keeps both hero buttons on the first screen). */
@media (max-width: 767px) { body:has(#tx-steps) [id$="-hero"] > :nth-child(1) { aspect-ratio: 5 / 4 !important; } }


/* 1.0.39: category pages, phones: the full-width hero shows a narrow slice of the wide photo; aim it at the subject. */
@media (max-width: 767px) {
  #medical-aesthetics-hero > :nth-child(1) img { object-position: 74% 50% !important; }
  #body-hero > :nth-child(1) img { object-position: 42% 50% !important; }
}
/* 1.0.41: Body hero on tablet and desktop: keep the client's face clear of the header. */
@media (min-width: 768px) { #body-hero > :nth-child(1) img { object-position: 50% 12% !important; } }

/* 1.0.44: category grids. Most card photos are tall phone frames shown in wide boxes; aim each one at its subject (vertical focus %). */
#card-oxygeneo img { object-position: 50% 60% !important; }
#card-pico-laser img { object-position: 50% 85% !important; }
#card-carbon-laser img { object-position: 50% 45% !important; }
#card-quatro-glow img { object-position: 50% 100% !important; }
#card-cryo img { object-position: 50% 50% !important; }
#card-lipo-laser img { object-position: 50% 40% !important; }
#card-facetox img { object-position: 50% 90% !important; }
#card-bio-filler img { object-position: 50% 75% !important; }
#card-signature-hair img { object-position: 50% 60% !important; }
#card-collagen-bed img { object-position: 50% 85% !important; }

/* 1.0.50: thank-you page reel. The section is a copy of the cards section; its Instagram feed spans the full width. */
#reel > * > :only-child { grid-column: 1 / -1; }
#reel .elementor-widget-sbi-widget { grid-column: 1 / -1; width: 100%; }