/* ====================================================================
   Mentes patch — fixes for Rachel's Homecare Connection static replica
   Loaded after Wix's saved HTML. Pairs with mentes-patch.js.
   ==================================================================== */

/* ── 1) Remove the empty space reserved for Wix Studio's preview banner ── */
:root {
  --wix-ads-height: 0px !important;
}
#WIX_ADS,
#wixAds,
#wix-ads {
  display: none !important;
}
#site-root,
#SITE_CONTAINER {
  top: 0 !important;
}
#SITE_HEADER,
#SITE_HEADER_WRAPPER {
  top: 0 !important;
}

/* ── 2) Headline font fix is now handled in mentes-patch.js ─────────────
   The previous broad CSS override (h1-h6 + [class*="font_"]) was too wide
   and stripped Montserrat from nav / buttons / body / subtitle. The JS
   pass walks the DOM and overrides font-family ONLY on elements whose
   computed font-family currently resolves to fraunces_120pt-light (the
   Wix-named family that doesn't load locally), leaving Montserrat alone. */

/* ── 4) Logos: handled in mentes-patch.js via sibling DIV + background ── */

/* ── 6) Hero image extends to the viewport top, header overlays it ──────
   On the live Wix design the hero IMG_6661 photo starts at y≈10 with the
   nav floating on top. Locally the saved HTML stacks them — small cream
   band visible between nav and hero. Force the header to be transparent +
   absolutely positioned, and let the hero section reach the viewport top. */

/* Page background is solid white via .wixui-page — kill it so the hero
   photo (which is absolutely positioned BEHIND the page bg) shows through. */
[class*="wixui-page"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* The "white band" comes from a `<div class="LNYVZi">` color-underlay inside
   the header's bgLayers wrapper. The CSS rule on `.LNYVZi` reads
   `var(--bg-overlay-color)` which the header section sets to
   `rgba(255,255,255,0.46)`. Knock that underlay out so the hero photo
   shows through cleanly. Scoped to the HEADER's underlay only (the hero
   section's own LNYVZi underlay must stay intact). */
header .LNYVZi,
header [data-testid="colorUnderlay"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Also clear the override variable on the header section in case it cascades
   down to descendants. */
#comp-kbgakxea,
#comp-kbgakxea_r_comp-kbgajy18 {
  --bg-overlay-color: transparent !important;
}

/* Header still on top; just transparent now */
#comp-kbgakxea,
#comp-kbgakxea-pinned-layer,
header[id^="comp-"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* The body / site-root / site-container should also let the photo through
   in the hero area. They might paint a base color — let them stay if the
   page is short enough that the hero photo covers the viewport. */
body {
  background-color: transparent !important;
}

/* ====================================================================
   CUSTOM HEADER — replaces the Wix-saved nav entirely
   Brand palette only:
     --cream:    #F5EDE2
     --mauve:    #9C6B6B
     --burgundy: #6E3636
     --sage:     #8B9C7A   (used very sparingly)
   ==================================================================== */

:root {
  --mentes-cream:    #F5EDE2;
  --mentes-mauve:    #9C6B6B;
  --mentes-burgundy: #6E3636;
  --mentes-sage:     #8B9C7A;
  /* Warm wheat-tan that Wix paints on the about/home footer
     (the rgb(178,132,96) color_15 token). Used in the SCOPED COLOR
     OVERRIDE block at the end of this file to replace burgundy in
     places where #6E3636 reads as "brown-red" instead of warm brown. */
  --mentes-tan:      #B28460;
  --mentes-tan-deep: #8A6048;
  /* RGB triplet for alpha-tinted burgundy usages — borders, shadows,
     dim body text. The scoped override block can re-scope this to the
     tan triplet (178, 132, 96) so any rgba(var(--mentes-burgundy-rgb), …)
     inside those scopes resolves to a tan alpha tint. */
  --mentes-burgundy-rgb: 110, 54, 54;
}

/* Hide the original Wix header entirely — we replace it with our own */
header[id^="comp-"],
[id$="-pinned-layer"]:has(header),
#comp-kbgakxea-pinned-layer {
  display: none !important;
  visibility: hidden !important;
}

/* Free up the top of the page so our custom header can sit at top:0 */
[class*="wixui-page"],
body { background-color: transparent !important; }

/* ────────────────────────────────────────────────────────────────────
   .mentes-header — the custom replacement
   Layout:
     [ Logo ]              [ HOME · ABOUT · SERVICES ]              [ Reach out ]
   Transparent at scroll=0. On scroll past 60px, a warm cream backdrop
   fades in with a soft blur. Bottom hairline in burgundy at low alpha.
   ──────────────────────────────────────────────────────────────────── */
.mentes-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9000 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px clamp(24px, 4vw, 56px);
  background-color: transparent;
  background-image: none;
  border-bottom: 1px solid transparent;
  /* v13.1 fix (2026-05-21): The previous transition list (5 properties
     × 380ms ease) was perpetually "running" per Chrome diagnostics —
     transitions never completed, which prevented body.mentes-scrolled
     from switching the bg from transparent to cream. Simplified to a
     short padding-only transition; bg + blur + border now swap
     instantly when the scrolled class flips. */
  transition: padding 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-header > *,
.mentes-header__nav,
.mentes-header__cta-wrap {
  background-color: transparent !important;
}
body.mentes-scrolled .mentes-header {
  background-color: rgba(245, 237, 226, 0.78) !important;
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border-bottom-color: rgba(var(--mentes-burgundy-rgb), 0.08);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Hero — natural Wix sizing, pulled UP by 150px so the wheat reaches
   under the floating header (no cream gap between them). Wix's own
   wow-image position:sticky keeps the photo visible during scroll. */
#comp-kbgaghri {
  margin-top: -150px !important;
  padding-top: 150px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  z-index: 1;
  overflow: visible !important;
}

img[src*="img_6661"],
img[alt="IMG_6661.jpg"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Body bg: just brand cream. NO second wheat layer (body::before removed)
   — the hero section's own Wix IMG provides the wheat, no double-image. */
html { background-color: var(--mentes-cream, #F5EDE2) !important; }
body {
  background-color: var(--mentes-cream, #F5EDE2) !important;
  background-image: none !important;
}

/* Every SECTION that comes AFTER the pin-wrap (which contains hero +
   consultation) gets a cream backdrop so the fixed wheat doesn't bleed
   through "Because everyone deserves..." / services / testimonials /
   contact / footer. Multiple combinators to catch wherever Wix nests them. */
.mentes-pin-wrap ~ section[id^="comp-"],
.mentes-pin-wrap ~ * section[id^="comp-"],
.mentes-card-section ~ section[id^="comp-"],
.mentes-card-section ~ * section[id^="comp-"] {
  background-color: var(--mentes-cream, #F5EDE2) !important;
  position: relative;
  z-index: 5;
}
#SITE_CONTAINER, #main_MF, #site-root, #masterPage, #SITE_PAGES,
.g0IvTF, [class*="wixui-page"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* ====================================================================
   ABOUT.HTML FIXES — sections were Wix-locked at 100vh height with
   overflow hidden, cutting off content. Also the embedded logo at the
   top-right of the first content section was hugging the section edge
   with no breathing room.
   ==================================================================== */
body.mentes-page-about section[id^="comp-"] {
  height: auto !important;
  /* Stefano feedback (repeat): tighten further so each Commitment/Trust/
     Skilled Nurses card scrolls past quickly and the next peeks in. Was 44/44,
     now 32/32 (still readable, no claustrophobia). */
  min-height: 0 !important;
  overflow: visible !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  scroll-margin-top: 88px;
}
/* Force Wix's internal containers to relax their fixed grid-template-rows
   on the about page too — same root cause as the contact section's empty
   space. Without this, sections inherit fixed pixel heights from Wix even
   when our content is much shorter. */
body.mentes-page-about section[id^="comp-"] [class*="-container"],
body.mentes-page-about section[id^="comp-"] [class*="inner-box"] {
  min-height: 0 !important;
  height: auto !important;
  grid-template-rows: auto !important;
}

/* Kill Wix's wow-image parallax on the about page — Stefano feedback: the
   sections felt "frozen" while scrolling. The parallax holds the embedded
   image at a different scroll rate than the surrounding content, making
   the section feel stuck. Force normal scroll.
   NOTE: don't force position:static on the sections themselves — that
   detaches absolute children (cardinal watermark) and blows up the layout.
   Just kill the transform on the wow-image. */
body.mentes-page-about wow-image,
body.mentes-page-about wow-image img,
body.mentes-page-about wow-image picture,
body.mentes-page-about wow-image .qR3Oj6 {
  transform: none !important;
  will-change: auto !important;
}
/* Inner Wix grid containers also need to relax */
body.mentes-page-about section[id^="comp-"] [data-mesh-id$="-gridContainer"],
body.mentes-page-about section[id^="comp-"] [data-mesh-id$="-inlineContent"] {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}
/* First content section ("Our Approach to Care") — extra top breathing
   room so the embedded logo isn't hugging the header. */
body.mentes-page-about section#comp-ly5nzzqs {
  padding-top: 80px !important;
  padding-bottom: 60px !important;
}

/* ── About: "Our Approach" reveal animation + cardinal positioning ── */
.mentes-about-fadein {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(80ms * var(--mentes-fadei, 0));
}
.mentes-about-fadein.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Watermark cardinal — large, semi-transparent, behind the text.
   Replaces the previous floated logo display (which was blurry/cropped). */
.mentes-about-approach {
  position: relative !important;
}
.mentes-about-watermark {
  position: absolute !important;
  top: 50% !important;
  right: -2% !important;
  width: clamp(380px, 50vw, 660px) !important;
  height: clamp(380px, 50vw, 660px) !important;
  transform: translateY(-50%) rotate(-4deg);
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  opacity: 0.16 !important;
  pointer-events: none !important;
  z-index: 1 !important; /* above Wix's bgLayers, below text (z:2) */
  animation: mentes-cardinal-float 11s ease-in-out infinite;
  transform-origin: 60% 50%;
  filter: saturate(0.85);
}
@keyframes mentes-cardinal-float {
  0%, 100% { transform: translateY(-50%) rotate(-4deg); }
  50%      { transform: translateY(calc(-50% - 14px)) rotate(-1.5deg); }
}
@media (max-width: 900px) {
  .mentes-about-watermark {
    top: auto !important;
    bottom: 2% !important;
    right: -10% !important;
    width: 90vw !important;
    height: 90vw !important;
    transform: rotate(-4deg);
    opacity: 0.07;
  }
  @keyframes mentes-cardinal-float {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(-1.5deg); }
  }
}
/* === FULL LAYOUT OVERRIDE — Trust + Skilled Nurses. Same approach as
       Our Approach: flatten Wix's absolute positioning to a clean
       vertical block stack. Without this, the H2 wraps to two lines,
       body text overlaps the heading of the next section, and content
       drops below the fold. === */
/* Stefano feedback (repeat 3×): FULLY STACK the three numbered cards. No gap
   between them. Each section flush against the next so the colored bands
   collapse together as you scroll. 18px top breathing room for the heading
   only, zero bottom padding. */
body.mentes-page-about section#comp-lyfher0c,
body.mentes-page-about section#comp-lyfhjhde,
body.mentes-page-about section#comp-lyfhkr1s,
body.mentes-page-about section.mentes-about-skilled {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 18px !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  padding-left: clamp(20px, 5vw, 64px) !important;
  padding-right: clamp(20px, 5vw, 64px) !important;
}
/* Last numbered section gets a tiny bottom buffer so its body text doesn't
   slam into the footer. */
body.mentes-page-about section#comp-lyfhkr1s,
body.mentes-page-about section.mentes-about-skilled {
  padding-bottom: 16px !important;
}
body.mentes-page-about section#comp-lyfhjhde > div:not([id^="bgLayers_"]),
body.mentes-page-about section.mentes-about-skilled > div:not([id^="bgLayers_"]) {
  display: block !important;
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
/* Every internal Wix box → become a block in document flow */
body.mentes-page-about section#comp-lyfhjhde [class*="wixui-box"],
body.mentes-page-about section.mentes-about-skilled [class*="wixui-box"] {
  display: block !important;
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
/* Rich-text wrappers (h2 / paragraphs) — readable line length, no left indent */
body.mentes-page-about section#comp-lyfhjhde .wixui-rich-text,
body.mentes-page-about section.mentes-about-skilled .wixui-rich-text {
  margin: 0 0 12px !important;
  width: 100% !important;
  max-width: 820px !important;
  padding: 0 !important;
}
/* H2 should never wrap to two lines for "3. Skilled Nurses" */
body.mentes-page-about section#comp-lyfhjhde h2,
body.mentes-page-about section.mentes-about-skilled h2 {
  white-space: normal !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  max-width: 100% !important;
}
/* Hide the Wix-native decorative vector branches inside these two
   sections — with the new block layout they'd stack as inline blocks
   between text. The brand's branch motif is still present elsewhere
   (hero, header, services). Can be brought back later via absolute
   positioning if needed. */
/* Hide decorative Wix vector branches in ALL three numbered sections — with
   the tighter padding they overflow into the next section, and Stefano's
   feedback (repeated) was to keep the stack clean. */
body.mentes-page-about section#comp-lyfher0c .wixui-vector-image,
body.mentes-page-about section#comp-lyfhkr1s .wixui-vector-image,
body.mentes-page-about section#comp-lyfhjhde .wixui-vector-image,
body.mentes-page-about section.mentes-about-skilled .wixui-vector-image {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .mentes-about-watermark { animation: none !important; }
}

/* Stefano feedback 2026-05-25: hide the "1. Commitment", "2. Trust",
   "3. Skilled Nurses" titles entirely. Body paragraphs are right-aligned
   (so the text sits to the right, matching the eyebrow's column) and
   vertically centered top-to-bottom inside each strip. */
body.mentes-page-about #comp-lyfhgg2p,
body.mentes-page-about #comp-lyfhjhdw3,
body.mentes-page-about #comp-lyfhkr2910 {
  display: none !important;
}
body.mentes-page-about #comp-lyfhh07i,
body.mentes-page-about #comp-lyfhjhdy3,
body.mentes-page-about #comp-lyfhkr2c {
  text-align: right !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.mentes-page-about #comp-lyfhh07i p,
body.mentes-page-about #comp-lyfhjhdy3 p,
body.mentes-page-about #comp-lyfhkr2c p {
  text-align: right !important;
}
/* Vertical centering — equal top/bottom padding on each strip so the
   body paragraph sits visually centered between the strip edges. */
body.mentes-page-about section#comp-lyfher0c,
body.mentes-page-about section#comp-lyfhjhde,
body.mentes-page-about section#comp-lyfhkr1s,
body.mentes-page-about section.mentes-about-skilled {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* ====================================================================
   SERVICES — tabs + spotlight layout. Left column = 4 tabs (number +
   title); right column = one large featured panel showing the active
   service. Hover/click a tab to swap. Smooth crossfade between panels.
   Brand-only palette.
   ==================================================================== */
.mentes-services {
  position: relative;
  z-index: 6;
  background-color: var(--mentes-cream, #F5EDE2);
  padding: 120px clamp(20px, 4vw, 56px) 140px;
  overflow: hidden;
}
.mentes-services-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.mentes-services-eyebrow {
  margin: 0 0 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mentes-mauve);
  text-align: center;
}
.mentes-services-heading {
  margin: 0 0 64px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--mentes-burgundy);
  text-align: center;
}
.mentes-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) {
  .mentes-services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .mentes-services-grid { grid-template-columns: 1fr; }
}

/* ── Tabs + spotlight stage ──────────────────────────────────────── */
.mentes-services-stage {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 2fr);
  gap: 60px;
  align-items: stretch;
  min-height: 500px;
}
@media (max-width: 900px) {
  .mentes-services-stage {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
  }
}

/* Tabs (left column) */
.mentes-svc-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(var(--mentes-burgundy-rgb), 0.14);
}
.mentes-svc-tab {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 28px 0;
  border: none;
  border-bottom: 1px solid rgba(var(--mentes-burgundy-rgb), 0.14);
  background: transparent;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  color: var(--mentes-burgundy);
  font-family: inherit;
  transition: padding-left 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-svc-tabs {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.mentes-svc-panels { pointer-events: auto; }
.mentes-svc-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1.5px;
  background: var(--mentes-burgundy);
  transform: translateY(-50%);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-svc-tab[aria-selected="true"] {
  padding-left: 32px;
}
.mentes-svc-tab[aria-selected="true"]::before {
  width: 22px;
}
.mentes-svc-tab-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.18;
  color: rgba(var(--mentes-burgundy-rgb), 0.55);
  transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-svc-tab[aria-selected="true"] .mentes-svc-tab-title,
.mentes-svc-tab:hover .mentes-svc-tab-title {
  color: var(--mentes-burgundy);
}
.mentes-svc-tab-arrow {
  font-size: 18px;
  color: var(--mentes-mauve);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 320ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-svc-tab[aria-selected="true"] .mentes-svc-tab-arrow,
.mentes-svc-tab:hover .mentes-svc-tab-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Spotlight panels (right column)
   Stacked via CSS grid so the wrapper sizes to the tallest panel's natural
   content (fixes 2026-05-27: the 5-bullet "Personal Care" panel was
   overflowing the fixed 500px wrapper, clipping its "Reach out" CTA). */
.mentes-svc-panels {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(156, 107, 107, 0.18);
  border-radius: 28px;
  padding: 48px clamp(28px, 4vw, 56px);
  min-height: 500px;
}
.mentes-svc-panel {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-svc-panel[data-active="1"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mentes-svc-panel-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 22px;
}
.mentes-svc-illus {
  width: 100%;
  height: 100%;
  display: block;
  animation: mentes-svc-breath 7s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes mentes-svc-breath {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(1.2deg) translateY(-3px); }
}
.mentes-svc-panel-title {
  margin: 0 0 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  color: var(--mentes-burgundy);
}
.mentes-svc-panel-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex: 1 1 auto;
}
.mentes-svc-panel-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(var(--mentes-burgundy-rgb), 0.85);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(80ms * var(--mentes-b, 0) + 120ms);
}
.mentes-svc-panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 10px;
  height: 1.5px;
  background: #647B5C;
}
.mentes-svc-panel[data-active="1"] .mentes-svc-panel-list li {
  opacity: 1;
  transform: translateX(0);
}
.mentes-svc-panel-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B28460;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(178, 132, 96, 0.35);
  transition: gap 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease;
}
.mentes-svc-panel-cta:hover { gap: 16px; border-bottom-color: #B28460; }

@media (prefers-reduced-motion: reduce) {
  .mentes-svc-illus { animation: none !important; }
}

.mentes-service-card {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(156, 107, 107, 0.16);
  border-radius: 24px;
  padding: 36px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  /* Reveal state — JS adds .is-in */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 380ms ease,
    box-shadow 380ms ease,
    background 380ms ease;
}
.mentes-service-card.is-in { opacity: 1; transform: translateY(0); }
.mentes-service-card:hover,
.mentes-service-card:focus-within {
  transform: translateY(-10px);
  border-color: rgba(var(--mentes-burgundy-rgb), 0.32);
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 32px 64px -22px rgba(var(--mentes-burgundy-rgb), 0.28),
    0 10px 20px -10px rgba(var(--mentes-burgundy-rgb), 0.12);
}

.mentes-service-index {
  position: absolute;
  top: 22px;
  left: 24px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: #B28460;
  opacity: 0.6;
}
.mentes-service-chevron {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 18px;
  color: var(--mentes-mauve);
  opacity: 0.5;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 380ms ease;
}
.mentes-service-card:hover .mentes-service-chevron,
.mentes-service-card:focus-within .mentes-service-chevron {
  transform: translate(4px, -4px);
  opacity: 1;
  color: var(--mentes-burgundy);
}

.mentes-service-icon-wrap {
  width: 132px;
  height: 132px;
  margin: 14px 0 28px;
  display: grid;
  place-items: center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-service-card:hover .mentes-service-icon-wrap,
.mentes-service-card:focus-within .mentes-service-icon-wrap {
  transform: scale(1.08);
}
.mentes-service-icon {
  width: 100%;
  height: 100%;
  display: block;
  animation: mentes-svc-breath 7s ease-in-out infinite;
  animation-delay: var(--mentes-breath-delay, 0s);
  transform-origin: 50% 100%;
}
.mentes-service-card[data-i="1"] .mentes-service-icon { animation-delay: 1.2s; }
.mentes-service-card[data-i="2"] .mentes-service-icon { animation-delay: 2.4s; }
.mentes-service-card[data-i="3"] .mentes-service-icon { animation-delay: 3.6s; }
@keyframes mentes-svc-breath {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(1.2deg) translateY(-3px); }
}

.mentes-service-title {
  margin: 0 0 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--mentes-burgundy);
}
.mentes-service-tag {
  margin: 0 0 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--mentes-mauve);
  line-height: 1.4;
}

/* Bullets: hidden by default, reveal on hover/focus with stagger */
.mentes-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-service-card:hover .mentes-service-list,
.mentes-service-card:focus-within .mentes-service-list {
  max-height: 240px;
}
.mentes-service-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--mentes-burgundy-rgb), 0.82);
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(100ms * var(--mentes-b, 0));
}
.mentes-service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 1.5px;
  background: #647B5C;
}
.mentes-service-card:hover .mentes-service-list li,
.mentes-service-card:focus-within .mentes-service-list li {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mentes-service-icon { animation: none !important; }
}

/* ====================================================================
   CAREGIVER APPLICATION SECTION — cream bg now, sage branch accents.
   ==================================================================== */
.mentes-apply {
  position: relative;
  z-index: 6;
  background-color: var(--mentes-cream, #F5EDE2);
  padding: 110px clamp(20px, 4vw, 56px);
  overflow: hidden;
}
.mentes-apply::before,
.mentes-apply::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background-image: url('raw/branch-consult.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.mentes-apply::before { top: -30px; left: -40px; transform: rotate(8deg); }
.mentes-apply::after  { bottom: -30px; right: -40px; transform: scaleX(-1) rotate(8deg); }
.mentes-apply-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  z-index: 1;
}
.mentes-apply-eyebrow {
  margin: 0 0 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mentes-mauve);
}
.mentes-apply-heading {
  margin: 0 0 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.1;
  color: var(--mentes-burgundy);
}
.mentes-apply-body {
  margin: 0 0 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(var(--mentes-burgundy-rgb), 0.82);
}
.mentes-apply-note {
  margin: 0 0 36px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(var(--mentes-burgundy-rgb), 0.6);
  font-style: italic;
}
.mentes-apply-cta {
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mentes-cream);
  background-color: var(--mentes-burgundy);
  padding: 16px 36px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-apply-cta:hover {
  transform: translateY(-2px);
  background-color: #5a2a2a;
  box-shadow: 0 14px 32px -10px rgba(var(--mentes-burgundy-rgb), 0.5);
  gap: 18px;
}
/* Make sure the apply-section decorative ::before / ::after branches
   don't intercept clicks on the CTA */
.mentes-apply::before,
.mentes-apply::after {
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Cursor halo must never block clicks on real links/buttons */
.mentes-cursor-halo { pointer-events: none !important; }

/* ====================================================================
   "WHEN TO REACH OUT" SECTION (about.html) — editorial accordion.
   Five "moments" stacked as wide warm-toned cards. Each card: a giant
   italic numeral, the prompt in Fraunces, a supporting line that
   reveals when the moment is "open". Click to swap which one is open.
   Cards reveal on scroll with stagger. Brand palette only.
   ==================================================================== */
.mentes-when {
  /* Stefano feedback 2026-05-21 — When to Reach Out must sit in normal
     block flow and PUSH the preceding sections, not slide over them.
     Killing z-index (no stacking context above the prior sections) and
     using `isolation: isolate` so any inner-card transforms can't leak
     into a parent stacking context. `clear: both` for good measure
     against floated Wix children just before this section. Applies on
     both desktop and mobile — the section is a static block, period. */
  position: relative;
  isolation: isolate;
  clear: both;
  background-color: var(--mentes-cream, #F5EDE2);
  padding: 120px clamp(20px, 4vw, 56px);
  overflow: hidden;
}
/* About-page sections — RESTORE Wix's chained-sticky design (v12→v13).
   The original Wix design wants Commitment + Trust + Skilled Nurses
   ALL pinned as you scroll, so each section "parks" at top of viewport
   while its grid row is in view. Wix CSS uses
     `top: var(--force-auto, calc(23% + var(--sticky-offset, 0px)))`
   but the percentage resolves to `auto` because the parent has no
   fixed height — that's why my chrome probe showed `top: auto` for
   Trust/Skilled even with sticky restored. Commitment works only
   because its calc is `0% + 50px = 50px` (no percentage dependency).
   Fix: set explicit `top: 50px` on Trust + Skilled Nurses too, so all
   three sections park at the same viewport offset and chain-replace
   each other as scroll advances. Our Approach stays `relative` since
   it's the lead-in section. */
body.mentes-page-about section#comp-ly5nzzqs {
  position: relative !important;
  transform: none !important;
  top: 0 !important;
}
body.mentes-page-about section#comp-lyfhjhde,
body.mentes-page-about section#comp-lyfhkr1s {
  position: sticky !important;
  top: 50px !important;
  transform: none !important;
}
.mentes-when-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.mentes-when-eyebrow {
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mentes-mauve);
  text-align: center;
}
.mentes-when-heading {
  margin: 0 0 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  color: var(--mentes-burgundy);
  text-align: center;
}
.mentes-when-lede {
  margin: 0 auto 60px;
  max-width: 640px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(var(--mentes-burgundy-rgb), 0.78);
  text-align: center;
}

/* Accordion stack */
.mentes-when-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Each moment — large pill-shaped card */
.mentes-when-moment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3.6vw, 44px);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(156, 107, 107, 0.18);
  border-radius: 22px;
  text-align: left;
  cursor: pointer;
  /* v16: ensure iOS Safari fires click on tap without the 300ms delay
     and that nothing in the parent chain swallows the touch. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  color: var(--mentes-burgundy);
  font-family: inherit;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}
.mentes-when-moment.is-in { opacity: 1; transform: translateY(0); }

.mentes-when-moment:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(var(--mentes-burgundy-rgb), 0.28);
  box-shadow:
    0 20px 40px -20px rgba(var(--mentes-burgundy-rgb), 0.22),
    0 6px 12px -6px rgba(var(--mentes-burgundy-rgb), 0.10);
}
.mentes-when-moment[data-open="1"] {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--mentes-burgundy-rgb), 0.32);
  box-shadow:
    0 28px 56px -22px rgba(var(--mentes-burgundy-rgb), 0.30),
    0 8px 18px -10px rgba(var(--mentes-burgundy-rgb), 0.12);
}

/* Text block */
.mentes-when-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mentes-when-prompt {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.25;
  color: var(--mentes-burgundy);
  letter-spacing: -0.005em;
}
.mentes-when-detail {
  display: block;
  max-height: 0;
  overflow: hidden;
  /* v16: transitions on this element kept getting stuck (verified live —
     CSS rule with [data-open="1"] is in the cascade but max-height never
     interpolates from 0 to 120). Same root cause as the header bg-color
     transition. Removing the transition forces a snap-open, which is
     functional and never breaks. */
  opacity: 0;
  transform: translateY(-4px);
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--mentes-burgundy-rgb), 0.72);
}
.mentes-when-moment[data-open="1"] .mentes-when-detail {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}

/* Plus / close affordance */
.mentes-when-chev {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(var(--mentes-burgundy-rgb), 0.32);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 22px;
  color: var(--mentes-burgundy);
  line-height: 1;
  /* v16: transition removed for same reason as .mentes-when-detail —
     transitions on these accordion elements were getting stuck and
     preventing the open-state CSS from applying. Snap chevron from
     + to × instantly when card opens. */
}
.mentes-when-moment:hover .mentes-when-chev {
  border-color: var(--mentes-burgundy);
}
.mentes-when-moment[data-open="1"] .mentes-when-chev {
  background: var(--mentes-burgundy);
  border-color: var(--mentes-burgundy);
  color: var(--mentes-cream);
  transform: rotate(45deg); /* "+" becomes "×" */
}

/* Mobile: collapse the giant numeral inline above the prompt */
@media (max-width: 640px) {
  .mentes-when-moment {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mentes-when-chev {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 8px;
  }
}

.mentes-when-cta-wrap {
  margin-top: 72px;
  text-align: center;
  /* About page lives inside Wix's .gehw6-container which cascades
     pointer-events:none into our injected sections. Without these
     explicit auto + z-index resets, the CTA below was un-clickable
     (Stefano reported 2026-05-27 — element-from-point returned a Wix
     overlay div sitting on top of the anchor). */
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.mentes-when-cta {
  position: relative;
  z-index: 6;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mentes-burgundy);
  background: transparent;
  border: 1.5px solid var(--mentes-burgundy);
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-when-cta:hover {
  background-color: var(--mentes-burgundy);
  color: var(--mentes-cream);
  gap: 18px;
}
/* Re-enable pointer-events on the entire When-to-Reach-Out subtree —
   Wix's grid container kills them by default on every descendant. */
.mentes-when,
.mentes-when-inner,
.mentes-when-stack,
.mentes-when-moment {
  pointer-events: auto;
}

/* ====================================================================
   ABOUT PAGE: "Our Approach to Care" redesign — cream bg, drop cap,
   left burgundy accent rule, decorative SVG accent above the eyebrow.
   ==================================================================== */
body.mentes-page-about .mentes-about-approach {
  background-color: var(--mentes-cream, #F5EDE2) !important;
  background-image: none !important;
  padding-top: 140px !important;
  padding-bottom: 140px !important;
  overflow: hidden !important; /* contain the watermark */
}
body.mentes-page-about .mentes-about-approach * {
  background-color: transparent !important;
}
/* Sit text ABOVE the watermark layer. Watermark is z:1, text is z:2.
   The Wix `bgLayers_*` div is at z:0 (its default), so the cardinal
   floats between Wix's background paint and the text. */
body.mentes-page-about .mentes-about-approach > *:not(.mentes-about-watermark) {
  position: relative;
  z-index: 2;
}
/* === FULL LAYOUT OVERRIDE — Our Approach. Wix's section uses absolute
       positioning to create a narrow text column on the left + logo
       image on the right + an empty third box. We flatten the whole
       thing to a clean block layout: text on the LEFT half (max ~58%),
       cardinal watermark on the RIGHT half (absolute, vertically
       centered). Section is content-height — cream bgLayers covers
       the whole section so text + cardinal share the same cream band. === */
body.mentes-page-about section#comp-ly5nzzqs {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 140px clamp(20px, 5vw, 64px) 110px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Force Wix's bgLayers div to fill the whole section (cream cover) */
body.mentes-page-about section#comp-ly5nzzqs > #bgLayers_comp-ly5nzzqs {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
/* Hide the right-side logo box (Wix's blurry/cropped image) and the
   empty third box. The cardinal we want is rendered via the watermark
   div instead. */
body.mentes-page-about section#comp-ly5nzzqs #comp-lybxbvxp,
body.mentes-page-about section#comp-ly5nzzqs #comp-lybxbyay {
  display: none !important;
}
/* Outer wrapper: center, max-width, content-height */
body.mentes-page-about section#comp-ly5nzzqs > div:not([id^="bgLayers_"]):not(.mentes-about-watermark) {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  z-index: 2;
}
/* Flatten every inner text wrapper to block */
body.mentes-page-about section#comp-ly5nzzqs #comp-lybxbvpa,
body.mentes-page-about section#comp-ly5nzzqs #comp-lybxkjcy,
body.mentes-page-about section#comp-ly5nzzqs #comp-lybxn85w,
body.mentes-page-about section#comp-ly5nzzqs .comp-lybxbvpa-container,
body.mentes-page-about section#comp-ly5nzzqs .comp-lybxkjcy-container {
  display: block !important;
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Text takes the LEFT ~58% of the wrapper so the cardinal has room on
   the right. This is the key fix: paragraph stays beside the cardinal,
   both inside the cream section. */
body.mentes-page-about section#comp-ly5nzzqs p,
body.mentes-page-about section#comp-ly5nzzqs h1,
body.mentes-page-about section#comp-ly5nzzqs h2,
body.mentes-page-about section#comp-ly5nzzqs h3 {
  max-width: 58% !important;
  width: auto !important;
}
/* Force-hide any stray .mentes-logo-display div inside this section
   (the blurry rounded shape from a previous installAboutLogo run) */
body.mentes-page-about section#comp-ly5nzzqs .mentes-logo-display {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* Mobile: text spans full width, cardinal becomes a backdrop */
@media (max-width: 800px) {
  body.mentes-page-about section#comp-ly5nzzqs p,
  body.mentes-page-about section#comp-ly5nzzqs h1,
  body.mentes-page-about section#comp-ly5nzzqs h2,
  body.mentes-page-about section#comp-ly5nzzqs h3 {
    max-width: 100% !important;
  }
}
/* Drop-cap-style first letter on the opening paragraph */
body.mentes-page-about .mentes-about-approach p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 4.2em;
  float: left;
  line-height: 0.9;
  margin: 8px 14px 0 0;
  color: var(--mentes-burgundy);
}
/* Subtle burgundy accent rule above the eyebrow text */
body.mentes-page-about .mentes-about-approach h2:first-of-type::before,
body.mentes-page-about .mentes-about-approach h3:first-of-type::before {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--mentes-burgundy);
  margin: 0 0 28px;
  opacity: 0.7;
}

/* ====================================================================
   COMPLIANCE PAGES — Privacy / Terms / Accessibility.
   Cream background, brand typography, readable line length, calm
   editorial layout. The shared header + footer come from JS.
   ==================================================================== */
body.mentes-page-compliance {
  background-color: var(--mentes-cream, #F5EDE2);
  color: var(--mentes-burgundy);
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
.mentes-compliance {
  position: relative;
  z-index: 1;
  padding: 160px clamp(20px, 5vw, 60px) 120px;
  background-color: var(--mentes-cream, #F5EDE2);
}
.mentes-compliance-inner {
  max-width: 800px;
  margin: 0 auto;
}
.mentes-compliance-eyebrow {
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mentes-mauve);
}
.mentes-compliance-heading {
  margin: 0 0 36px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--mentes-burgundy);
}
.mentes-compliance-intro {
  margin: 0 0 56px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--mentes-burgundy);
  border-radius: 0 14px 14px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(var(--mentes-burgundy-rgb), 0.85);
}
.mentes-compliance-inner h2 {
  margin: 56px 0 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  color: var(--mentes-burgundy);
  position: relative;
  padding-top: 32px;
}
.mentes-compliance-inner h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 1px;
  background: var(--mentes-mauve);
}
.mentes-compliance-inner h3 {
  margin: 28px 0 12px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--mentes-burgundy);
}
.mentes-compliance-inner p,
.mentes-compliance-inner li {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(var(--mentes-burgundy-rgb), 0.86);
}
.mentes-compliance-inner p { margin: 0 0 16px; }
.mentes-compliance-inner ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.mentes-compliance-inner li {
  position: relative;
  padding: 6px 0 6px 22px;
}
.mentes-compliance-inner li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 1.5px;
  background: #647B5C;
}
.mentes-compliance-inner a {
  color: var(--mentes-burgundy);
  text-decoration: underline;
  text-decoration-color: rgba(var(--mentes-burgundy-rgb), 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 240ms ease;
}
.mentes-compliance-inner a:hover {
  text-decoration-color: var(--mentes-burgundy);
}
.mentes-compliance-inner strong {
  font-weight: 600;
  color: var(--mentes-burgundy);
}
/* "Last updated" stamp at the bottom of the page */
.mentes-compliance-stamp {
  margin: 80px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(var(--mentes-burgundy-rgb), 0.16);
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--mentes-burgundy-rgb), 0.55);
}

/* ====================================================================
   REDESIGNED FOOTER (home + about) — replaces Wix's original footer
   content while preserving its brown bgLayers color. 4-column grid:
   brand (logo + license), Navigate, Connect, Legal. Bottom bar with
   copyright. Same content as before, cleaner layout.
   ==================================================================== */
/* Footer section sizing — content-driven height, no Wix 100vh frame */
section.mentes-footer-section,
section.mentes-footer-fallback {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
/* Belt-and-suspenders against Wix re-hydrating the footer on about.html:
   any direct child of the footer section that isn't the bgLayers (brown
   paint) or our injected .mentes-footer is hidden. JS also removes them
   in rebuildFooter(); this rule catches anything Wix re-injects after. */
section.mentes-footer-section > *:not([id^="bgLayers_"]):not(.mentes-footer),
section.mentes-footer-fallback > *:not([id^="bgLayers_"]):not(.mentes-footer) {
  display: none !important;
}
/* Fallback footer (compliance pages) — paint the burgundy bg ourselves
   since there's no Wix bgLayers div to inherit. */
section.mentes-footer-fallback {
  background-color: var(--mentes-burgundy) !important;
  background-image: linear-gradient(
    180deg,
    var(--mentes-burgundy) 0%,
    #5a2a2a 100%
  );
  width: 100%;
  display: block;
  position: relative;
  z-index: 5;
}
section.mentes-footer-fallback .mentes-footer { color: var(--mentes-cream); }
.mentes-footer-section .mentes-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding: 80px clamp(24px, 5vw, 72px) 36px;
  color: var(--mentes-cream);
  font-family: 'Montserrat', sans-serif;
}
/* Belt-and-suspenders: every Mentes-injected component uses border-box so
   width:100% + padding doesn't blow past the viewport (caused the ~140px
   "cream strip on right" Stefano flagged 2026-05-20). */
.mentes-services, .mentes-services *,
.mentes-apply, .mentes-apply *,
.mentes-when, .mentes-when *,
.mentes-compliance, .mentes-compliance *,
.mentes-card, .mentes-card *,
.mentes-header, .mentes-header *,
.mentes-footer, .mentes-footer *,
.mentes-about-approach, .mentes-about-approach * {
  box-sizing: border-box;
}
/* And just to prevent any other body-level horizontal overflow from
   producing the same scrolled-right symptom, hide horizontal overflow on the
   page root. Wix's own scrolls (carousels etc.) remain visible because they
   have their own overflow scope. */
html, body {
  overflow-x: hidden !important;
}
.mentes-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  max-width: 1240px;
  margin: 0 auto 56px;
  align-items: start;
}
.mentes-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mentes-footer-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0;
  opacity: 0.95;
}
.mentes-footer-license {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 237, 226, 0.7);
}
.mentes-footer-h {
  margin: 0 0 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--mentes-cream);
  position: relative;
  padding-bottom: 10px;
}
.mentes-footer-h::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 1px;
  background: rgba(245, 237, 226, 0.4);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-footer-col:hover .mentes-footer-h::after {
  width: 56px;
}
.mentes-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mentes-footer-links li {
  margin: 0 0 11px;
}
.mentes-footer-links a {
  display: inline-block;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(245, 237, 226, 0.76);
  text-decoration: none;
  position: relative;
  transition: color 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-footer-links a::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--mentes-cream);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-footer-links a:hover {
  color: var(--mentes-cream);
  transform: translateX(12px);
}
.mentes-footer-links a:hover::before {
  transform: translateY(-50%) scaleX(1);
}
.mentes-footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(245, 237, 226, 0.15);
  text-align: center;
}
.mentes-footer-copy {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 237, 226, 0.5);
}
/* Mobile breakpoints */
@media (max-width: 880px) {
  .mentes-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .mentes-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .mentes-footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .mentes-footer-brand { grid-column: auto; }
}

/* Anchor scroll-margin so jumps don't hide behind the fixed header */
html { scroll-behavior: smooth; }
#services,
#comp-ly763sbq,
section[id^="comp-"] {
  scroll-margin-top: 88px;
}

/* ====================================================================
   ABOUT PAGE FOOTER: don't apply the "auto height + 80px padding"
   from earlier — it broke the footer's layout. Tag the footer via JS
   (mentes-footer-section) and EXCLUDE it from those rules.
   ==================================================================== */
body.mentes-page-about section.mentes-footer-section {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* And re-apply Wix's natural layout on the footer's inner grid */
body.mentes-page-about section.mentes-footer-section [data-mesh-id$="-gridContainer"],
body.mentes-page-about section.mentes-footer-section [data-mesh-id$="-inlineContent"] {
  height: revert !important;
  min-height: revert !important;
  overflow: revert !important;
}
/* The cream-cover rule was making the footer cream — restore the
   burgundy / brown background the home footer uses. */
body.mentes-page-about section.mentes-footer-section,
body.mentes-page-about section.mentes-footer-section [data-mesh-id$="-gridContainer"] {
  background-color: revert !important;
}

/* ====================================================================
   "SCHEDULE A FREE CONSULTATION" — glass invitation card
   Brand-only palette. Soft breath animation, mauve hairline border,
   burgundy corner ornaments (hand-addressed invitation cues), gentle
   lift on hover. Tagged via mentes-patch.js (.mentes-card on the
   wrapper that previously held the rgb(228,216,203) bg).
   ==================================================================== */

/* === Consultation section now sits OVER the still-sticky wheat photo.
   No section bg — we want the pinned wheat to show through, with only
   the card itself reading as the foreground element. Pulled up with
   negative margin so the card rises into the lower third of the hero
   as the user starts scrolling. === */
/* === PIN WRAPPER: hero + consultation section share a 200vh container.
   The hero is position:sticky inside, so it stays visible at top:0 for
   the full 200vh. That gives 100vh of "captured" scroll during which
   the page appears not to move while the card animates up over the hero. */
.mentes-pin-wrap { display: contents; }

/* HIDE the consultation section completely. The card has been moved to
   <body> by JS so it survives this. No empty section between hero and
   "Because everyone deserves..." */
.mentes-card-section {
  display: none !important;
}

/* Card is FIXED so JS can drive its top/left in viewport coords.
   transform starts placing it BELOW the viewport (top: 100vh-ish).
   JS animates it up to the centre during the scroll spacer. */
/* === Consultation card — recreating the ORIGINAL Wix card look:
   warm beige solid bg (no glass blur), rounded corners, soft shadow,
   sage-leaf illustration centred, "Book Now →" link in warm tan. === */
.mentes-card {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: min(92%, 540px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 50 !important;
  background-color: #E4D8CB !important; /* original Wix beige */
  background-image: none !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 56px -18px rgba(var(--mentes-burgundy-rgb), 0.25),
    0 6px 16px -8px rgba(var(--mentes-burgundy-rgb), 0.10) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  overflow: visible !important;
  transform: translate(-50%, 100vh);
}
.mentes-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 40px 40px;
}
.mentes-card-eyebrow {
  margin: 0 0 28px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #B28460; /* warm tan, matches button */
}
.mentes-card-title {
  margin: 0 0 24px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: #B28460; /* warm tan */
}
.mentes-card-icon {
  width: 200px;
  height: auto;
  max-width: 60%;
  margin: 12px auto 28px;
  display: block;
  object-fit: contain;
}
.mentes-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #B28460; /* warm tan */
  text-decoration: none;
  padding: 6px 0;
  border: none;
  transition: gap 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-card-cta:hover { gap: 16px; }
.mentes-card-cta-arrow {
  font-size: 18px;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-card-cta:hover .mentes-card-cta-arrow { transform: translateX(4px); }

/* (Removed stale .mentes-card block — was setting position:relative
    !important and breaking the new position:fixed card.) */

/* Logo: left cell */
.mentes-header__logo {
  justify-self: start;
  display: block;
  height: 56px;
  width: 200px;
  background-image: var(--mentes-logo-src);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.mentes-scrolled .mentes-header__logo { transform: scale(0.94); }

/* Nav: center cell */
.mentes-header__nav {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mentes-header__nav li { display: flex; align-items: center; }
.mentes-header__nav li + li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mentes-mauve);
  opacity: 0.35;
  margin: 0 22px;
}
.mentes-header__nav a {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mentes-mauve);
  padding: 8px 2px;
  position: relative;
  display: inline-block;
  transition: color 280ms ease, transform 280ms ease;
}
.mentes-header__nav a:hover,
.mentes-header__nav a[aria-current="page"] {
  color: var(--mentes-burgundy);
}
.mentes-header__nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 1.5px;
  background: var(--mentes-burgundy);
  transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1),
              right 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-header__nav a:hover::after,
.mentes-header__nav a[aria-current="page"]::after {
  left: 0;
  right: 0;
}

/* CTA: right cell */
.mentes-header__cta-wrap {
  justify-self: end;
  display: flex;
  align-items: center;
}
.mentes-header__cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mentes-burgundy);
  background: transparent;
  border: 1.5px solid var(--mentes-burgundy);
  border-radius: 999px;
  padding: 11px 26px;
  text-decoration: none;
  display: inline-block;
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-header__cta:hover {
  background: var(--mentes-burgundy);
  color: var(--mentes-cream);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(var(--mentes-burgundy-rgb), 0.45);
}

/* ─── HAMBURGER + SLIDE-IN DRAWER (mobile-only) ──────────────────────── */
/* Hidden on desktop; appears below 880px viewport. */
.mentes-burger { display: none; }

.mentes-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(110, 54, 54, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 9990;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.mentes-drawer-open .mentes-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer slides in from the LEFT, matching the burger's top-left position. */
.mentes-drawer {
  position: fixed;
  top: 0; bottom: 0;
  left: 0;
  width: min(82vw, 360px);
  background: var(--mentes-cream, #F5EDE2);
  z-index: 9995;
  transform: translateX(-100%);
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 28px 0 60px -22px rgba(178, 132, 96, 0.32);
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
}
body.mentes-drawer-open .mentes-drawer {
  transform: translateX(0);
}
.mentes-drawer-inner {
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 28px 36px;
  display: flex; flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.mentes-drawer-close {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(178, 132, 96, 0.32);
  align-self: flex-end;
  position: relative;
  cursor: pointer;
  transition: background 220ms ease;
}
.mentes-drawer-close:hover { background: rgba(178, 132, 96, 0.12); }
.mentes-drawer-close span {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 1.5px;
  background: var(--mentes-tan-deep);
  transform-origin: center;
}
.mentes-drawer-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.mentes-drawer-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.mentes-drawer-brand {
  display: flex; align-items: center; justify-content: flex-start;
  margin: 24px 0 36px;
  text-decoration: none;
}
.mentes-drawer-brand img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
}
.mentes-drawer-nav {
  list-style: none;
  padding: 0; margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 4px;
}
.mentes-drawer-nav li { display: block; }
.mentes-drawer-nav a {
  display: block;
  padding: 16px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  color: var(--mentes-tan-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 132, 96, 0.18);
  transition: color 220ms ease, padding-left 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mentes-drawer-nav a:hover { color: var(--mentes-tan); padding-left: 6px; }
.mentes-drawer-nav a[aria-current="page"] { color: var(--mentes-tan); }
.mentes-drawer-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px;
  background: var(--mentes-tan);
  color: var(--mentes-cream);
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 220ms ease;
}
.mentes-drawer-cta:hover { background: var(--mentes-tan-deep); }
.mentes-drawer-foot {
  margin-top: auto;
  padding-top: 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mentes-tan);
  line-height: 1.7;
}

/* ─── MOBILE: floating burger at top-LEFT (Stefano feedback 2026-05-20) ─── */
/* The burger lives inside .mentes-header in DOM order, but on mobile it
   detaches via `position: fixed` and pins to the top-left corner so users
   always know where the menu is no matter how the page scrolls. */
@media (max-width: 880px) {
  /* Header on mobile: logo LEFT-aligned, right next to the fixed burger.
     The header has burger-shaped left padding (72px) so its first item (the
     logo) starts immediately right of the burger button.
     v19: padding-top now includes safe-area-inset-top so the cream glass
     band extends down past the iPhone notch — without this, the burger
     (which DOES use safe-area-inset-top) was dropping below the visible
     header band, making the space above/below the burger look unbalanced. */
  .mentes-header {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-right: 18px;
    padding-bottom: 12px;
    padding-left: 72px;
  }
  .mentes-header__nav,
  .mentes-header__cta-wrap { display: none !important; }
  .mentes-header__logo {
    display: block !important;
    /* Stefano feedback 2026-05-21 — a touch larger so the wordmark is
       readable from arm's length on iPhone. Was 36px, now 44px. The
       burger sits to its left at 42px so they still feel balanced. */
    height: 44px !important;
    justify-self: start !important;
    margin-left: 0 !important;
  }

  /* Burger: pinned top-LEFT. v19: positioned to be exactly centered in
     the header band — header padding-top is safe-area + 12px, header
     content is 44px tall, padding-bottom is 12px, total 68px. Burger
     42px tall at top safe-area + 13px = 13px space above + 13px space
     below = perfectly balanced. */
  .mentes-burger {
    display: inline-flex !important;
    flex-direction: column; justify-content: center; align-items: center;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 13px);
    left: 14px;
    width: 42px; height: 42px;
    background: rgba(245, 237, 226, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(178, 132, 96, 0.32);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    gap: 4px;
    z-index: 9998;
    box-shadow: 0 6px 16px -6px rgba(178, 132, 96, 0.20);
    transition: background 220ms ease, transform 220ms ease;
  }
  .mentes-burger:hover { background: var(--mentes-cream); transform: scale(1.04); }
  .mentes-burger span {
    display: block;
    width: 18px;
    height: 1.8px;
    background: var(--mentes-tan-deep);
    border-radius: 1px;
    transition: transform 280ms ease, opacity 200ms ease;
  }
  body.mentes-drawer-open .mentes-burger span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
  body.mentes-drawer-open .mentes-burger span:nth-child(2) { opacity: 0; }
  body.mentes-drawer-open .mentes-burger span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

  /* ── Hero (Wix font_0 / font_2) — smaller on mobile so it fits cleanly ── */
  h1.font_0, [class*="font_0"] {
    font-size: clamp(24px, 6.4vw, 34px) !important;
    line-height: 1.1 !important;
  }
  h2.font_2, [class*="font_2"] {
    font-size: clamp(22px, 5.6vw, 28px) !important;
    line-height: 1.15 !important;
  }
  /* Wix-rendered eyebrow text + section subheads */
  [class*="font_3"] {
    font-size: clamp(18px, 4.6vw, 22px) !important;
  }
  /* ABOUT RACHEL — INVERT hierarchy (Stefano v8→v9 2026-05-21).
     The Wix DOM actually uses these classes:
       - "ABOUT RACHEL" eyebrow → <p class="font_9">
       - The italic blockquote → <blockquote class="font_7">
       - "Rachel Perugini, Founder." → <p class="font_9">
     v8 targeted font_3/h2/h1 (which don't exist here); v9 targets the
     real classes. font_7 is the hero, font_9 is supporting type. */

  /* 1. Eyebrow + signature line (both font_9) — small supporting type.
        Compact letter-spacing so the eyebrow still reads as a label and
        the name reads as a quiet attribution. */
  section#comp-ly72ely0 [class*="font_9"],
  section#comp-ly72ely0 [class*="font_9"] em,
  section#comp-ly72ely0 [class*="font_9"] span {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
  }

  /* 2. The italic quote (font_7 blockquote) — section hero, big. */
  section#comp-ly72ely0 [class*="font_7"],
  section#comp-ly72ely0 blockquote,
  section#comp-ly72ely0 [class*="font_7"] em,
  section#comp-ly72ely0 [class*="font_7"] span {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.45 !important;
  }

  /* Sister: testimonials body + Rachel-signature line shouldn't shrink */
  section#comp-ly73e865 p { font-size: 16px !important; line-height: 1.55 !important; }

  /* ── Contact section — kill the dead space between Location and Opening
     hours that Wix's two-column layout leaves when it stacks on mobile. */
  section#comp-ly763sbq {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Wix wraps each label+value pair in its own auto-grid cell that pads to
     ~200px on mobile. Collapse those wrappers' heights + remove top margin
     on the second H3 so Location → Hours flow tight. */
  section#comp-ly763sbq [class*="wixui-rich-text"] { margin: 0 !important; padding: 0 !important; }
  section#comp-ly763sbq h2, section#comp-ly763sbq h3, section#comp-ly763sbq p {
    margin: 0 !important; padding: 0 !important;
  }
  section#comp-ly763sbq h3 { margin-top: 24px !important; margin-bottom: 8px !important; }
  section#comp-ly763sbq h3:first-of-type { margin-top: 0 !important; }
  section#comp-ly763sbq [data-mesh-id$="-gridContainer"],
  section#comp-ly763sbq [data-mesh-id$="-inlineContent"] {
    min-height: 0 !important;
    height: auto !important;
  }

  /* ── Services section — was overflowing viewport on mobile. Stack tabs
     vertically + force every panel to fit 100% width. */
  .mentes-services { padding: 56px 18px 64px !important; }
  .mentes-services-stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 24px !important;
  }
  .mentes-svc-tabs { width: 100% !important; }
  .mentes-svc-tab {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }
  .mentes-svc-panels {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .mentes-svc-panel {
    width: 100% !important;
    padding: 28px 22px !important;
    min-width: 0 !important;
  }
  .mentes-svc-panel-title { font-size: clamp(20px, 5.4vw, 26px) !important; }
  .mentes-svc-panel-list li { font-size: 14.5px !important; line-height: 1.55 !important; }

  /* ── Apply / When / Card — tighter padding on mobile ── */
  .mentes-card-title { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.12 !important; }
  .mentes-services-heading,
  .mentes-when-heading,
  .mentes-apply-heading {
    font-size: clamp(24px, 6.4vw, 32px) !important;
    line-height: 1.1 !important;
  }
  .mentes-apply { padding: 64px 18px !important; }
  .mentes-when { padding: 64px 18px !important; }
  .mentes-apply-body, .mentes-apply-note { font-size: 15px !important; }
  .mentes-when-lede { font-size: 15px !important; }
  .mentes-when-moment { padding: 18px 18px !important; }

  /* Header padding tighter on mobile when scrolled. Still keep
     safe-area-inset-top so the cream band continues to extend past the
     notch — only the body padding shrinks. */
  body.mentes-scrolled .mentes-header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-right: 18px;
    padding-bottom: 8px;
    padding-left: 72px;
  }

  /* Contact section decorative branches — hide on mobile; they overlap the
     Location heading + Opening Hours text. Bring them back only on wide
     viewports where there's room. */
  section#comp-ly763sbq [class*="wixui-vector-image"] {
    display: none !important;
  }

  /* "Because everyone deserves" section — Stefano feedback v10→v11:
     v10's broad selector list hid the video AND the headline/eyebrow
     copy because Wix wraps the text box at absolute coordinates that
     break when the section shrinks. v11 takes a structural approach:
     hide the LEFT box (#comp-lybnbuvh — contains photo + video as
     a unit) and pull the RIGHT box (#comp-lybncej0 — the text) into
     normal block flow so it renders inside the visible tan band. */
  section#comp-lybnbhtn #comp-lybnbuvh {
    display: none !important;
  }
  section#comp-lybnbhtn #comp-lybncej0 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* Ensure the bgMedia (Wix's video poster image as section bg) is also
     suppressed so the tan band is clean. */
  section#comp-lybnbhtn #bgMedia_comp-lybnbhtn,
  section#comp-lybnbhtn #bgLayers_comp-lybnbhtn video,
  section#comp-lybnbhtn #bgLayers_comp-lybnbhtn wix-video {
    display: none !important;
  }
  /* Solid tan band — no background image at all. Tighter vertical
     padding now that the photo weight is gone. */
  section#comp-lybnbhtn {
    background-image: none !important;
    background-color: #B28460 !important;
    padding: 44px 24px !important;
    min-height: 0 !important;
  }
  section#comp-lybnbhtn [data-mesh-id$="-gridContainer"],
  section#comp-lybnbhtn [data-mesh-id$="-inlineContent"] {
    min-height: 0 !important; height: auto !important;
  }
  /* Collapse Wix's 1000px row track + disable inner sticky parallax —
     they were making the section take the entire viewport on mobile. */
  section#comp-lybnbhtn,
  section#comp-lybnbhtn > .comp-lybnbhtn-container {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
  }
  section#comp-lybnbhtn #comp-lybnbuvh,
  section#comp-lybnbhtn [id^="comp-lybnbuvh"] {
    position: static !important;
    top: auto !important;
  }
  /* Tighten the text block now that the section is shorter. */
  section#comp-lybnbhtn h2,
  section#comp-lybnbhtn h3,
  section#comp-lybnbhtn [class*="font_0"],
  section#comp-lybnbhtn [class*="font_2"] {
    font-size: clamp(22px, 5.6vw, 28px) !important;
    line-height: 1.18 !important;
  }
  section#comp-lybnbhtn p,
  section#comp-lybnbhtn [class*="font_3"],
  section#comp-lybnbhtn [class*="font_9"] {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ─── PHONE-tier (<540px) ── extra-tight ─────────────────────────────── */
@media (max-width: 540px) {
  .mentes-drawer { width: 88vw; }
  .mentes-drawer-inner { padding: 24px 22px 28px; }
  .mentes-drawer-brand em { font-size: 28px; }
  .mentes-drawer-nav a { font-size: 22px; padding: 14px 0; }
  h1.font_0, [class*="font_0"] { font-size: clamp(22px, 6.2vw, 28px) !important; }
  .mentes-svc-panel { padding: 24px 18px !important; }
  .mentes-burger { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; width: 42px; height: 42px; }
}

/* ── 3) Tree / branch SVGs: hide initially, reveal on scroll ────────── */
svg[data-bbox]:not(.mentes-skip-reveal) > g,
svg[data-bbox]:not(.mentes-skip-reveal) > path {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
svg[data-bbox].mentes-revealed > g,
svg[data-bbox].mentes-revealed > path {
  opacity: 1;
  transform: translateY(0);
}

svg[data-bbox].mentes-revealed > *:nth-child(1)  { transition-delay: 0.00s; }
svg[data-bbox].mentes-revealed > *:nth-child(2)  { transition-delay: 0.08s; }
svg[data-bbox].mentes-revealed > *:nth-child(3)  { transition-delay: 0.16s; }
svg[data-bbox].mentes-revealed > *:nth-child(4)  { transition-delay: 0.24s; }
svg[data-bbox].mentes-revealed > *:nth-child(5)  { transition-delay: 0.32s; }
svg[data-bbox].mentes-revealed > *:nth-child(6)  { transition-delay: 0.40s; }
svg[data-bbox].mentes-revealed > *:nth-child(7)  { transition-delay: 0.48s; }
svg[data-bbox].mentes-revealed > *:nth-child(8)  { transition-delay: 0.56s; }
svg[data-bbox].mentes-revealed > *:nth-child(n+9) { transition-delay: 0.64s; }

@media (prefers-reduced-motion: reduce) {
  svg[data-bbox]:not(.mentes-skip-reveal) > g,
  svg[data-bbox]:not(.mentes-skip-reveal) > path {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ====================================================================
   POLISH LAYER — Rachel's vocabulary
   1) WebGL/Canvas hero particles (warm dust drifting in the wheat field)
   2) Soft warm cursor halo
   3) Word-by-word headline reveal on scroll
   4) Branches "come alive" — slow continuous breath after their scroll-in
   ==================================================================== */

/* ── 1) Hero particle canvas ──────────────────────────────────────── */
.mentes-hero-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* ── 2) Cursor halo ───────────────────────────────────────────────── */
.mentes-cursor-halo {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 99998 !important;
  top: 0 !important;
  left: 0 !important;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(245, 237, 226, 0.22),
    rgba(178, 132, 96, 0.10) 45%,
    transparent 75%
  );
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
  transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1),
              height 350ms cubic-bezier(0.22, 1, 0.36, 1),
              background 350ms ease;
  mix-blend-mode: multiply;
}
.mentes-cursor-halo.is-near-link {
  width: 220px;
  height: 220px;
  background: radial-gradient(
    closest-side,
    rgba(178, 132, 96, 0.32),
    rgba(var(--mentes-burgundy-rgb), 0.14) 45%,
    transparent 75%
  );
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .mentes-cursor-halo { display: none !important; }
}

/* ── 3) Word-by-word reveal on scroll ─────────────────────────────── */
.mentes-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotate(2deg);
  filter: blur(4px);
  transition:
    opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mentes-word.is-revealed {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .mentes-word { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── 4) Branches "come alive" — visible breath (amplified) ─────────
   Stefano flagged the previous breath was imperceptible. Magnitude is
   now ~5–7x bigger and the cycle slightly slower so you can actually
   see them sway. Still slow and organic — never urgent. */
@keyframes mentes-breath-a {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(2.0deg)  translateY(-6px); }
}
@keyframes mentes-breath-b {
  0%, 100% { transform: rotate(1.4deg)  translateY(-3px); }
  50%      { transform: rotate(-1.8deg) translateY(4px); }
}
svg[data-bbox].mentes-revealed.mentes-alive {
  transform-origin: 50% 100%;
  animation: mentes-breath-a 8.4s ease-in-out infinite;
  animation-delay: var(--mentes-breath-delay, 0s);
}
svg[data-bbox].mentes-revealed.mentes-alive.mentes-alive--alt {
  animation-name: mentes-breath-b;
  animation-duration: 10.2s;
}
@media (prefers-reduced-motion: reduce) {
  svg[data-bbox].mentes-revealed.mentes-alive { animation: none !important; }
}

/* ====================================================================
   SCOPED COLOR OVERRIDE — Stefano feedback 2026-05-20
   In these scopes the burgundy (#6E3636) was reading as "brown-red,"
   not as the warm coastal "lighter brown" the brand wants. Each rule
   here re-scopes the local --mentes-burgundy custom property to the
   Wix-footer tan #B28460, so every `color/border/background:
   var(--mentes-burgundy)` reference inside that subtree resolves to
   the lighter brown — without touching the global brand token (which
   other UI surfaces still use intentionally).

   Affects: header Reach Out CTA, header nav active/hover state,
   Join Referral Team section, When to Reach Out section, the
   compliance page content + its fallback footer.
   ==================================================================== */
.mentes-header__cta,
.mentes-header__nav a,
.mentes-services,
.mentes-apply,
.mentes-when,
.mentes-compliance,
section.mentes-footer-fallback {
  --mentes-burgundy: var(--mentes-tan);
  /* Tan RGB triplet — re-scopes every rgba(var(--mentes-burgundy-rgb), X)
     reference inside these elements (alpha-tinted body text, dim borders,
     subtle shadows) to the wheat-tan #B28460 family. */
  --mentes-burgundy-rgb: 178, 132, 96;
}

/* Compliance fallback footer — the gradient end color is hardcoded
   (#5a2a2a) so the variable swap above only catches the start color.
   Restate the full gradient in the tan family so the footer is
   uniformly the lighter brown, not the burgundy → near-black gradient
   that read as too red. */
section.mentes-footer-fallback {
  background-color: var(--mentes-tan) !important;
  background-image: linear-gradient(
    180deg,
    var(--mentes-tan) 0%,
    var(--mentes-tan-deep) 100%
  ) !important;
}

/* ── Client request #3 (2026-06-11) ──────────────────────────────────────
   Rachel asked to remove the "ABOUT RACHEL" eyebrow title above the quote
   on the owner section of the homepage. We hide the Wix component wrapper
   instead of deleting the markup so the surrounding box layout (her photo
   + the blockquote that follows) doesn't reflow. The component ID is
   stable in the saved Wix HTML — comp-ly735uj41 wraps the `<p>ABOUT
   RACHEL</p>` rich-text element. */
#comp-ly735uj41 {
  display: none !important;
}