/* Rockland Beauty — Homepage redesign.
   World: BeU × Kosmetisk adaptation on a warm cream foundation with deep plum
   sectional fields. Hatton display serif + Helvetica Now. Rounded geometry,
   layered rounded imagery, soft diffuse shadows, bento composition. */

:root {
  --rbw-cream: #fdf9f2;
  --rbw-cream-2: #f6edde;
  --rbw-cream-3: #efe3d1;
  --rbw-plum: #413033;
  --rbw-plum-2: #573f43;
  --rbw-plum-3: #2c1f21;
  --rbw-gold: #e7c091;
  --rbw-gold-2: #d9a867;
  --rbw-ink: #2e2022;
  --rbw-muted: #7a6a68;
  --rbw-muted-on-plum: #ddcac6;
  --rbw-lilac: #f4f3fb;
  --rbw-lilac-2: #e7e6f5;
  --rbw-lilac-3: #d9d8ee;
  --rbw-line: rgba(65, 48, 51, .12);
  --rbw-line-on-plum: rgba(253, 249, 242, .2);
  --rbw-radius-lg: 40px;
  --rbw-radius-md: 28px;
  --rbw-radius-sm: 20px;
  --rbw-shadow: 0 24px 76px -34px rgba(46, 32, 34, .28), 0 8px 32px -18px rgba(46, 32, 34, .14);
  --rbw-shadow-soft: 0 20px 44px -28px rgba(46, 32, 34, .32);
  --rbw-gutter: clamp(24px, 5vw, 96px);
  --rbw-shell: 1320px;
}

body {
  background: var(--rbw-cream);
  color: var(--rbw-plum);
}

.rbw-main {
  color: var(--rbw-plum);
}

/* ---------------------------------------------------------------- reset bleed */
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
.rbw-main a,
.rbw-footer a,
.rbw-hero__link,
.rbw-link,
.index2-dialog a {
  color: inherit;
}
.rbw-main a:hover,
.rbw-footer a:hover,
.rbw-hero__link:hover {
  color: var(--rbw-plum-2);
}

/* ---------------------------------------------------------------- buttons */
.index2-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 1.12em 1.95em;
  border-radius: 999px !important;
  border: 0;
  cursor: pointer;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--rbw-cream);
  background: var(--rbw-plum);
  box-shadow: 0 16px 30px -18px rgba(46, 32, 34, .6);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.index2-button:hover {
  transform: translateY(-2px);
  background: var(--rbw-plum-2);
  box-shadow: 0 22px 40px -20px rgba(46, 32, 34, .55);
}
.index2-button:focus-visible {
  outline: 3px solid var(--rbw-gold);
  outline-offset: 3px;
}
.index2-ripple__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  white-space: inherit;
}
.index2-ripple__ink {
  position: absolute;
  border-radius: 50%;
  background: rgba(231, 192, 145, .5);
  transform: scale(0);
  animation: rbw-ripple .7s ease-out forwards;
  pointer-events: none;
}
@keyframes rbw-ripple {
  to { transform: scale(1); opacity: 0; }
}

.rbw-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  color: var(--rbw-plum);
  border-bottom: 1px solid var(--rbw-line);
  padding-bottom: .25em;
  transition: border-color .3s ease, color .3s ease;
}
.rbw-link:hover { border-color: var(--rbw-plum); color: var(--rbw-plum-2); }

/* ---------------------------------------------------------------- header */
.site-header {
  width: 100%;
  position: static;
  padding: clamp(20px, 2.2vw, 28px) 0 16px;
  background: transparent;
}
.rbw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
  max-width: calc(var(--rbw-shell) + 2 * var(--rbw-gutter));
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
}
.site-header .header__logo svg,
.site-header .burger__btn svg {
  fill: var(--rbw-plum);
  stroke: var(--rbw-plum);
}
.site-header .header__logo { margin-left: clamp(31px, 2.4vw, 46px); width: 63px; max-width: 63px; }
.site-header .header__logo svg { height: 68px; width: 63px; }
.site-header .burger__text {
  color: var(--rbw-plum);
}
.site-header .header__menu {
  display: flex;
  align-items: center;
}
.site-header .menu {
  display: flex;
  align-items: center;
}
.site-header .menu__list {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .menu__item {
  padding: 0;
}
.site-header .menu__link {
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .98rem;
  color: var(--rbw-plum);
  position: relative;
}
.site-header .menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--rbw-plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.site-header .menu__link::after {
  content: none;
}
/* The shared .menu__link::before bar is white on this page (the legacy rule for
   photo heroes), so it is invisible on cream and home.css used to add its own
   ::after bar instead. Both fired on hover and on a current item, which drew two
   parallel lines under the same link. Keep the shared bar — the one every other
   page uses — in plum, and drop the home-only one above. */
.site-header .menu__link::before {
  background-color: var(--rbw-plum);
}
.site-header .header__contacts {
  align-items: flex-end;
  flex: 0 0 auto;
  margin-right: clamp(24px, 1.65vw, 32px);
}

/* Every other route aligns the nav row and the contact block with the logo's
   line: Header.astro switches its container to a grid with align-items: start at
   this width and trims the nav link to 2px of bottom padding. This header kept
   align-items: center and inherited local-file-fixes' 12px, which parked the nav
   18px and the phone/email 8px lower than the rest of the site. Mobile keeps its
   centred row: the drawer handles the nav there. */
@media screen and (min-width: 1025px) {
  .rbw-header {
    align-items: flex-start;
  }

  .site-header .menu__link {
    padding: 0 0 2px;
  }
}

.site-header .header__phone,
.site-header .header__email {
  display: block;
  width: max-content;
  margin-left: auto;
  text-decoration: none;
  color: var(--rbw-plum);
}

.site-header .header__phone:hover,
.site-header .header__email:hover {
  color: var(--rbw-plum);
}

.site-header .header__email {
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .01em;
}

.site-header .header__phone:focus-visible,
.site-header .header__email:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}


/* ---------------------------------------------------------------- sections */
.rbw-section-head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin: 0 0 22px;
}

/* ---------------------------------------------------------------- hero */
.rbw-hero {
  padding: 0 0 clamp(44px, 6vw, 76px);
}
.rbw-hero__panel {
  position: relative;
  max-width: var(--rbw-shell);
  margin: 0 auto;
  min-height: clamp(480px, 72vh, 740px);
  border-radius: 32px;
  overflow: hidden;
  background-size: cover;
  background-position: 70% 42%;
  box-shadow: var(--rbw-shadow);
  display: flex;
  align-items: center;
}
.rbw-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(253, 249, 242, .92) 0%, rgba(253, 249, 242, .58) 30%, rgba(253, 249, 242, 0) 62%);
  pointer-events: none;
}
/* Slow scroll-driven drift (toward the left-bottom) for the hero photograph.
   The layer is oversized so the drift and the gentle scale-up never show an
   edge. */
.rbw-hero__bg {
  position: absolute;
  inset: -3% -2.5%;
  z-index: 0;
  background-size: cover;
  background-position: 70% 42%;
  transform: translate3d(var(--hero-drift-x, 0px), var(--hero-drift-y, 0px), 0) scale(var(--hero-scale, 1));
  will-change: transform;
}
/* Scroll-driven light scene: a wide blurred shine band sweeping across, an
   anamorphic flare haze and two large blurred light blobs travelling at
   their own speeds. All layers use screen blending over the photograph and
   are clipped by the panel radius. */
.rbw-hero__fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--fx-o, 0);
}
.rbw-hero__shine {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 90%;
  background: linear-gradient(105deg,
    transparent 18%,
    rgba(255, 240, 214, .5) 44%,
    rgba(255, 255, 255, .78) 52%,
    rgba(255, 240, 214, .38) 62%,
    transparent 80%);
  filter: blur(26px);
  mix-blend-mode: screen;
  transform: translateX(var(--shine-x, 60%));
  will-change: transform;
}
.rbw-hero__flare {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 16%;
  height: 28%;
  background: radial-gradient(55% 50% at 50% 50%, rgba(255, 236, 205, .6), rgba(255, 236, 205, 0) 72%);
  filter: blur(34px);
  mix-blend-mode: screen;
  transform: translate3d(var(--flare-x, -10%), var(--flare-y, 30px), 0);
  will-change: transform;
}
.rbw-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  mix-blend-mode: screen;
  will-change: transform;
}
.rbw-hero__blob--1 {
  top: -12%;
  right: 4%;
  width: 30vw;
  height: 30vw;
  max-width: 520px;
  max-height: 520px;
  background: radial-gradient(circle, rgba(255, 246, 228, .62), rgba(255, 246, 228, 0) 68%);
  transform: translate3d(var(--b1-x, 0px), var(--b1-y, 0px), 0);
}
.rbw-hero__blob--2 {
  bottom: -18%;
  left: 28%;
  width: 26vw;
  height: 26vw;
  max-width: 460px;
  max-height: 460px;
  background: radial-gradient(circle, rgba(231, 192, 145, .55), rgba(231, 192, 145, 0) 70%);
  transform: translate3d(var(--b2-x, 0px), var(--b2-y, 0px), 0);
}
.rbw-hero__content {
  position: relative;
  z-index: 3;
  max-width: 36rem;
  padding: clamp(28px, 5vw, 64px);
}
@media (prefers-reduced-motion: reduce) {
  .rbw-hero__fx {
    display: none;
  }
  .rbw-hero__bg {
    transform: none;
  }
}
.rbw-hero__title {
  font-size: clamp(2.15rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 22ch;
  text-wrap: balance;
}
.rbw-hero__lede {
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.42;
  color: var(--rbw-plum);
  margin: 0 0 8px;
  max-width: 30ch;
}
.rbw-hero__sub {
  font-size: 1.02rem;
  color: var(--rbw-muted);
  margin: 0 0 30px;
  max-width: 30ch;
}
.rbw-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.rbw-hero__link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  color: var(--rbw-plum);
  border-bottom: 1px solid var(--rbw-line);
  padding-bottom: .25em;
}
.rbw-hero__link:hover { border-color: var(--rbw-plum); }
.rbw-hero__arrow { transition: transform .3s ease; }
.rbw-hero__link:hover .rbw-hero__arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------- intro / concerns */
.rbw-intro { padding: clamp(48px, 6vw, 80px) 0; scroll-margin-top: 100px; }
.rbw-intro .rbw-intro__stage {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: stretch; gap: clamp(28px, 4vw, 58px);
  max-width: var(--rbw-shell); margin: 0 auto; padding: 0 var(--rbw-gutter);
}
.rbw-intro__media-wrap { position: relative; min-width: 0; }
.rbw-intro .rbw-intro__media { position: relative; height: 100%; min-height: 650px; border-radius: 28px; overflow: hidden; background: #f6edde; }
.rbw-intro__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rbw-intro .rbw-intro__media video { position: absolute; inset: 0; }
.rbw-intro .rbw-concerns { min-width: 0; padding: 34px 28px 32px; background: var(--rbw-lilac-2); border-radius: 28px; }
.rbw-intro h2 {
  margin: 0 0 24px; font: 500 clamp(48px, 5vw, 70px)/1.1 "Hatton-Medium", Georgia, serif;
  letter-spacing: -.03em; color: #30282c;
}
.concern-contour-field {
  --concern-row: 36px;
  position: relative; max-width: 610px; margin: 0 auto;
  font: 500 clamp(22px, 1.85vw, 26px)/1.4 "Hatton-Medium", Georgia, serif;
  color: var(--rbw-plum);
}
.rbw-intro .rbw-concerns__list { display: block; list-style: none; margin: 0; padding: 16px 0; border: 0; }
.rbw-intro .rbw-concerns__list li {
  position: relative; width: fit-content; max-width: 100%; min-height: var(--concern-row);
  margin: 0 auto; padding: 0; border: 0; background: none; box-shadow: none;
  font: inherit; line-height: var(--concern-row); letter-spacing: -.015em;
  text-transform: none; text-align: center; color: inherit; cursor: default;
  translate: var(--contour-offset, 0) 0;
}
.rbw-concerns__list li:nth-child(1), .rbw-concerns__list li:nth-child(10) { --contour-offset: -7%; }
.rbw-concerns__list li:nth-child(2), .rbw-concerns__list li:nth-child(9) { --contour-offset: 0%; }
.rbw-concerns__list li:nth-child(3), .rbw-concerns__list li:nth-child(8) { --contour-offset: 7%; }
.rbw-concerns__list li:nth-child(4), .rbw-concerns__list li:nth-child(7) { --contour-offset: 12%; }
.rbw-concerns__list li:nth-child(5), .rbw-concerns__list li:nth-child(6) { --contour-offset: 15%; }
.rbw-concerns__list li:nth-child(n+11) { --contour-offset: -12%; }
.rbw-intro .concern-contour-field.is-contour-ready .rbw-concerns__list {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.concern-contour {
  display: block; width: 100%; height: auto; overflow: visible;
  fill: currentColor; font: inherit; letter-spacing: -.015em;
}
.concern-contour text { cursor: default; }
@media (max-width: 600px) {
  .rbw-intro .rbw-concerns { padding: 28px 18px 26px; }
  .rbw-intro h2 { margin-bottom: 22px; }
  .concern-contour-field { --concern-row: 34px; font-size: 18px; }
  .rbw-intro .rbw-concerns__list li { translate: 0; }
}
@media print {
  .concern-contour { display: none; }
  .rbw-intro .concern-contour-field.is-contour-ready .rbw-concerns__list {
    position: static; width: auto; height: auto; margin: 0; overflow: visible;
    clip-path: none; white-space: normal;
  }
  .rbw-intro .rbw-concerns__list li { translate: none; }
}

/* ---------------------------------------------------------------- featured */
.rbw-featured {
  padding: clamp(48px, 7vw, 96px) 0;
}
.rbw-featured__shell {
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
}
.rbw-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}
.rbw-featured__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rbw-featured__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rbw-featured__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  border: 1px solid var(--rbw-line);
  border-radius: var(--rbw-radius-sm) !important;
  background: transparent;
  color: var(--rbw-plum);
  font-family: "Hatton-Medium", serif;
  font-size: 1.28rem;
  line-height: 1.15;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.rbw-featured__tab:hover {
  background: var(--rbw-cream-2);
  transform: translateY(-2px);
}
.rbw-featured__tab[aria-selected="true"],
.rbw-featured__tab.is-active {
  background: var(--rbw-plum);
  color: var(--rbw-cream);
  box-shadow: var(--rbw-shadow-soft);
}
.rbw-featured__tab .rbw-featured__arrow {
  opacity: .4;
  transition: transform .3s ease, opacity .3s ease;
}
.rbw-featured__tab[aria-selected="true"] .rbw-featured__arrow,
.rbw-featured__tab:hover .rbw-featured__arrow { opacity: 1; transform: translateX(3px); }
.rbw-featured__cta { display: flex; flex: 1; }
.rbw-featured__all {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; min-height: 285px;
  /* extra top padding drops the heading + copy a touch lower */
  padding: clamp(40px, 4.2vw, 58px) clamp(26px, 2.7vw, 40px) clamp(26px, 2.7vw, 40px);
  border: 0; border-radius: 28px;
  /* same warm sand as the neighbouring Featured panel; the floating
     blobs carry the lilac instead */
  background: var(--rbw-cream-2);
  color: var(--rbw-plum); text-decoration: none;
  transition: box-shadow .35s ease;
}
/* Animated gradient background (fancycomponents-style): blurred SVG circles
   drifting across the sand base — lilac tones over var(--rbw-cream-2). */
.rbw-featured__all-bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
}
.rbw-featured__all .rbw-blob--a { animation: rbw-blob-a 9s ease-in-out infinite alternate; }
.rbw-featured__all .rbw-blob--b { animation: rbw-blob-b 13s ease-in-out infinite alternate; }
.rbw-featured__all .rbw-blob--c { animation: rbw-blob-c 11s ease-in-out infinite alternate; }
@keyframes rbw-blob-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-150px, 110px) scale(1.12); }
}
@keyframes rbw-blob-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(130px, -90px) scale(1.08); }
}
@keyframes rbw-blob-c {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-110px, -120px) scale(1.15); }
}
.rbw-featured__all strong {
  display: block; margin: 0;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(30px, 2.7vw, 42px); font-weight: 500;
  line-height: 1.13; letter-spacing: -.025em; color: var(--rbw-plum);
}
.rbw-featured__all-note {
  display: block; max-width: 27ch; margin: 20px 0 30px;
  font-size: 16px; line-height: 1.5; color: #65565f;
}
.rbw-featured__all-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%; margin-top: auto; padding-top: 20px;
  border-top: 1px solid rgba(65,48,51,.18);
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: 16px; color: var(--rbw-plum);
}
.rbw-featured__all-arrow {
  display: grid; place-items: center; flex: 0 0 44px; height: 44px;
  border-radius: 50%; background: var(--rbw-plum); color: #fdf9f2;
  transition: background .3s ease;
}
.rbw-featured__all-arrow svg { fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s ease; }
.rbw-featured__all:hover { box-shadow: 0 18px 38px -27px rgba(65,48,65,.4); }
.rbw-featured__all:hover .rbw-featured__all-arrow { background: var(--rbw-plum-2); }
.rbw-featured__all:hover .rbw-featured__all-arrow svg { transform: translateX(3px); }
.rbw-featured__all:focus-visible { outline: 2px solid var(--rbw-plum); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .rbw-featured__all, .rbw-featured__all-arrow, .rbw-featured__all-arrow svg { transition: none; }
  .rbw-featured__all .rbw-blob--a, .rbw-featured__all .rbw-blob--b, .rbw-featured__all .rbw-blob--c { animation: none; }
}

.rbw-featured__stage {
  position: relative;
  border-radius: var(--rbw-radius-lg);
  overflow: hidden;
  background: var(--rbw-cream-2);
  box-shadow: var(--rbw-shadow-soft);
  min-height: 440px;
  min-width: 0;
}
.rbw-featured__panel {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.34fr);
  min-height: 440px;
  min-width: 0;
}
.rbw-featured__panel[hidden] { display: none; }
.rbw-featured__visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  min-width: 0;
}
.rbw-featured__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Frame the face for each featured treatment image (identical 2:3 portrait sources).
   Container crops horizontally on desktop and vertically at the mobile 4/3 ratio,
   so bias the crop toward the upper-centre where the face sits. */
.rbw-featured__panel[data-featured-id="botox-neuromodulators"] .rbw-featured__visual img { object-position: center 24%; }
.rbw-featured__panel[data-featured-id="hyaluronic-acid-fillers"] .rbw-featured__visual img { object-position: center 38%; }
.rbw-featured__panel[data-featured-id="sculptra"] .rbw-featured__visual img { object-position: center 28%; }
.rbw-featured__panel[data-featured-id="radiesse"] .rbw-featured__visual img { object-position: center 28%; }
.rbw-featured__panel[data-featured-id="combination-rejuvenation"] .rbw-featured__visual img { object-position: center 30%; }
.rbw-featured__detail { display: none; }
.rbw-featured__copy {
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.rbw-featured__panel-count {
  display: none;
  margin: 0 0 14px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .82rem;
  letter-spacing: .18em;
  color: var(--rbw-gold-2);
}
.rbw-featured__copy h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 14px;
  overflow-wrap: break-word;
}
.rbw-featured__copy p:not(.rbw-featured__panel-count) {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--rbw-muted);
  margin: 0 0 26px;
}
.rbw-featured__contact { align-self: flex-start; }

/* ---------------------------------------------------------------- doctor */
.rbw-doctor {
  background: var(--rbw-cream);
  color: var(--rbw-plum);
  padding: clamp(64px, 9vw, 120px) 0;
}
.rbw-doctor__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
}
.rbw-doctor__media {
  position: relative;
  width: 82.5%;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--rbw-radius-lg);
  overflow: hidden;
  box-shadow: var(--rbw-shadow);
}
.rbw-doctor__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transform-origin: 50% 35%;
}
.rbw-doctor__badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 12px 22px;
  border-radius: 16px;
  background: rgba(253, 249, 242, .94);
  box-shadow: var(--rbw-shadow-soft);
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--rbw-plum);
}
.rbw-doctor__body { max-width: 33rem; }
.rbw-doctor__body h2 {
  color: var(--rbw-plum);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.rbw-doctor__copy p {
  color: var(--rbw-muted);
  font-size: 1.06rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.rbw-doctor .rbw-doctor__link {
  margin-top: 14px;
  background: var(--rbw-plum);
  color: var(--rbw-cream);
}
.rbw-doctor .rbw-doctor__link:hover {
  background: var(--rbw-plum-2);
  color: var(--rbw-cream);
  box-shadow: 0 22px 40px -22px rgba(46, 32, 34, .45);
}

/* ---------------------------------------------------------------- philosophy */
/* ---------------------------------------------------------------- philosophy — the peony scene */
.rbw-philosophy {
  position: relative;
  overflow: hidden;
  max-width: var(--rbw-shell);
  margin: 0 auto;
  border-radius: var(--rbw-radius-lg);
  background:
    radial-gradient(120% 90% at 78% 4%, rgba(255, 252, 245, .92) 0%, rgba(255, 252, 245, 0) 55%),
    linear-gradient(160deg, #f7f5fc 0%, var(--rbw-lilac) 36%, var(--rbw-lilac-2) 72%, #f3e7de 100%);
  color: var(--rbw-plum);
  padding: clamp(72px, 10vw, 150px) 0;
}
.ph-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ph-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.ph-blob--blush {
  top: -14%;
  right: -6%;
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(247, 224, 209, .62), rgba(247, 224, 209, 0) 70%);
  transform: translate3d(calc(var(--ph-blob-par, 0px) * .9), calc(var(--ph-blob-par, 0px) * .55), 0);
}
.ph-blob--lilac {
  bottom: -18%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle, rgba(217, 216, 238, .9), rgba(217, 216, 238, 0) 70%);
  transform: translate3d(calc(var(--ph-blob-par, 0px) * -.7), calc(var(--ph-blob-par, 0px) * -.45), 0);
}
.ph-glow {
  position: absolute;
  top: 8%;
  right: 14%;
  width: clamp(340px, 34vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 240, .75), rgba(255, 250, 240, 0) 70%);
  filter: blur(10px);
}
.rbw-philosophy__inner {
  position: relative;
  z-index: 2;
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.rbw-philosophy__copy { position: relative; z-index: 2; max-width: 40rem; }
.rbw-philosophy h2 {
  color: var(--rbw-plum);
  font-size: clamp(2.35rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 clamp(26px, 3vw, 40px);
}
.rbw-line { display: block; overflow: hidden; padding-bottom: .06em; }
.rbw-line__in { display: block; }
.ph-body {
  max-width: 34rem;
  margin: 0 0 clamp(24px, 3vw, 34px);
  color: var(--rbw-muted);
  font-size: 1.05rem;
  line-height: 1.72;
}
.ph-statement {
  max-width: 27rem;
  margin: 0;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--rbw-plum);
}
.rbw-philosophy__stage {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.ph-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(380px, 40vw, 640px);
  aspect-ratio: 1;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 251, 244, .85) 0%, rgba(255, 251, 244, .35) 42%, rgba(255, 251, 244, 0) 70%);
  filter: blur(6px);
}
.ph-medallion {
  position: relative;
  z-index: 1;
  width: clamp(300px, 34vw, 520px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: translateY(var(--rb-philosophy-par, 0px));
  box-shadow:
    0 40px 90px -40px rgba(46, 32, 34, .45),
    0 0 0 10px rgba(255, 255, 255, .38),
    0 0 90px 8px rgba(255, 244, 228, .55);
}
.ph-medallion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(215deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .22) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.ph-medallion video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  transform: scale(1.02);
}

/* Scene reveal: soft blur-to-focus with a stagger. Pre-states are gated on
   the motion-ready class, so no-JS users simply see the finished scene. */
html.index2-motion-ready .rbw-philosophy .ph-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(14px);
  transition:
    opacity 1s cubic-bezier(.16, 1, .3, 1),
    transform 1.15s cubic-bezier(.16, 1, .3, 1),
    filter 1.25s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--ph-d, 0ms);
}
html.index2-motion-ready .rbw-philosophy.is-in-view .ph-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
html.index2-motion-ready .rbw-philosophy .ph-medallion {
  opacity: 0;
  transform: translateY(calc(var(--rb-philosophy-par, 0px) + 46px)) scale(.92);
  filter: blur(18px);
  transition:
    opacity 1.1s cubic-bezier(.16, 1, .3, 1) 260ms,
    transform 1.25s cubic-bezier(.16, 1, .3, 1) 260ms,
    filter 1.3s cubic-bezier(.16, 1, .3, 1) 260ms;
}
html.index2-motion-ready .rbw-philosophy.is-in-view .ph-medallion {
  opacity: 1;
  transform: translateY(var(--rb-philosophy-par, 0px)) scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  html.index2-motion-ready .rbw-philosophy .ph-reveal,
  html.index2-motion-ready .rbw-philosophy .ph-medallion {
    opacity: 1;
    transform: translateY(var(--rb-philosophy-par, 0px));
    filter: none;
    transition: none;
  }
  .ph-blob {
    transform: none;
  }
}

/* ---------------------------------------------------------------- consult */
.rbw-consult {
  padding: clamp(48px, 7vw, 96px) 0;
  background: var(--rbw-cream);
}
.rbw-consult__inner {
  position: relative;
  overflow: hidden;
  background: var(--rbw-cream-2);
  border-radius: var(--rbw-radius-lg);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  box-shadow: var(--rbw-shadow-soft);
}
.rbw-consult__media {
  position: relative;
  margin: 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.rbw-consult__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(253, 249, 242, .12) 0%, rgba(253, 249, 242, .4) 100%);
}
.rbw-consult__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.rbw-consult__body {
  padding: clamp(36px, 5.5vw, 60px) clamp(28px, 6vw, 64px) clamp(44px, 7vw, 68px);
}
.rbw-consult__body h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin: 0 0 16px;
}
.rbw-consult__body p {
  color: var(--rbw-muted);
  font-size: 1.08rem;
  line-height: 1.62;
  margin: 0 auto 10px;
  max-width: 30rem;
}
.rbw-consult__body button { margin-top: 14px; }
.rbw-consult__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 520px;
  margin: clamp(30px, 4.5vw, 44px) auto 0;
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rbw-line);
}
.rbw-consult__detail {
  text-align: center;
}
.rbw-consult__detail + .rbw-consult__detail {
  border-left: 1px solid var(--rbw-line);
}
.rbw-consult__detail dt {
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .92rem;
  color: var(--rbw-muted);
  margin: 0 0 10px;
}
.rbw-consult__detail dd {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.4;
  color: var(--rbw-plum);
}
.rbw-consult__detail a { color: var(--rbw-plum); text-decoration: none; }
.rbw-consult__detail a:hover { color: var(--rbw-plum-2); }

/* ---------------------------------------------------------------- footer */
.rbw-footer {
  background: var(--rbw-cream);
  color: var(--rbw-plum);
  padding: clamp(40px, 5vw, 60px) 0 36px;
}
.rbw-footer__inner {
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.rbw-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(24px, 3vw, 44px);
}
.rbw-footer__legal a {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: .95rem;
  color: var(--rbw-muted);
  transition: border-color .25s ease, color .25s ease;
}
.rbw-footer__legal a:hover,
.rbw-footer__legal a:focus-visible {
  border-bottom-color: currentColor;
  color: var(--rbw-plum);
}
.rbw-footer__copyright {
  font-size: .85rem;
  color: var(--rbw-muted);
}

/* ---------------------------------------------------------------- dialog */
.index2-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(44, 31, 33, .5);
  opacity: 0;
  transition: opacity .3s ease;
}
.index2-dialog-layer.is-open { opacity: 1; }
.index2-dialog {
  position: fixed;
  z-index: 90;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--rbw-cream);
  color: var(--rbw-plum);
  border-radius: var(--rbw-radius-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.index2-dialog.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.index2-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px !important;
  border: 1px solid var(--rbw-line);
  background: var(--rbw-cream-2);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.index2-dialog__close::before,
.index2-dialog__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--rbw-plum);
  border-radius: 2px;
}
.index2-dialog__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.index2-dialog__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.index2-dialog__close:hover { background: var(--rbw-cream-3); transform: rotate(90deg); }
.index2-dialog__inner { padding: clamp(28px, 5vw, 48px); }
.index2-dialog__title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: 0 0 8px;
}
.index2-dialog__intro {
  color: var(--rbw-muted);
  margin: 0 0 26px;
}
.index2-dialog__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 26px;
}
.index2-dialog__modes input { position: absolute; opacity: 0; pointer-events: none; }
.index2-dialog__modes label {
  display: block;
  text-align: center;
  padding: 15px 12px;
  border: 1px solid var(--rbw-line);
  border-radius: 999px;
  cursor: pointer;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.index2-dialog__modes input:checked + label {
  background: var(--rbw-plum);
  color: var(--rbw-cream);
  border-color: var(--rbw-plum);
}
.index2-dialog__modes input:focus-visible + label {
  outline: 3px solid var(--rbw-gold);
  outline-offset: 2px;
}
.index2-dialog__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 0;
  padding: 0;
  margin: 0 0 6px;
}
.index2-field { display: flex; flex-direction: column; gap: 8px; }
.index2-field label {
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .94rem;
}
.index2-field label span { color: var(--rbw-muted); font-weight: 400; }
.index2-field input,
.index2-field textarea {
  border: 1px solid var(--rbw-line) !important;
  border-radius: 14px !important;
  background: var(--rbw-cream-2) !important;
  padding: 14px 16px !important;
  font-size: 1rem;
  color: var(--rbw-plum);
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.index2-field textarea { min-height: 96px; resize: vertical; }
.index2-field input:focus,
.index2-field textarea:focus {
  border-color: var(--rbw-plum) !important;
  box-shadow: 0 0 0 3px rgba(65, 48, 51, .12);
  outline: none;
}
.index2-dialog__note {
  font-size: .9rem;
  color: var(--rbw-muted);
  margin: 18px 0 22px;
}
.index2-dialog__status {
  margin-top: 14px;
  font-size: .94rem;
  color: var(--rbw-plum);
  min-height: 1em;
}
.index2-dialog__direct {
  margin: 22px 0 0;
  font-size: .96rem;
  color: var(--rbw-muted);
}
.index2-dialog__direct a { color: var(--rbw-plum); font-weight: 500; }
body.index2-dialog-open { overflow: hidden; }

/* ---------------------------------------------------------------- motion */
[data-index2-motion] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
html.index2-motion-ready [data-index2-motion].is-in-view {
  opacity: 1;
  transform: none;
}
.no-js [data-index2-motion],
html:not(.index2-motion-ready) [data-index2-motion] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-index2-motion] { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- shell alignment (grid pass)
   Panels keep side gutters below the width where the 1320px cap engages.
   The handoff sits at 1439 so the 1440px reference stays exact (1320 panel,
   60px automatic air each side) while the switch itself is only a ~25px width
   step instead of the 96px jump the old 1360px threshold produced. */
@media (max-width: 1439px) {
  .rbw-hero__panel,
  .rbw-philosophy {
    margin-inline: var(--rbw-gutter);
  }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .rbw-hero__panel { min-height: clamp(460px, 70vh, 680px); background-position: 66% 38%; }
  .rbw-intro .rbw-intro__stage { display: block; }
  .rbw-intro .rbw-intro__media { width: 100%; height: 300px; min-height: 0; margin-bottom: 24px; aspect-ratio: auto; }
  .rbw-intro__stage,
  .rbw-doctor__inner {
    grid-template-columns: 1fr;
  }
  .rbw-doctor__media { width: 100%; }
  .rbw-intro__media-wrap { position: static; }
  .rbw-intro__media { aspect-ratio: 4 / 3; }
  .rbw-featured__grid { grid-template-columns: 1fr; }
  .rbw-featured__stage { min-height: 0; }
  .rbw-featured__all { min-height: 260px; }
  .rbw-featured__panel { grid-template-columns: 1fr; }
  .rbw-featured__visual { aspect-ratio: 4 / 3; }
  .rbw-philosophy__inner {
    display: flex;
    flex-direction: column;
    gap: 38px;
  }
  .rbw-philosophy__stage { order: -1; }
  .ph-medallion { width: min(68vw, 400px); }
  .ph-halo { width: min(78vw, 470px); }
  .rbw-consult__details { grid-template-columns: 1fr; gap: 0; }
  .rbw-consult__detail { padding: 14px 0; }
  .rbw-consult__detail + .rbw-consult__detail { border-left: 0; border-top: 1px solid var(--rbw-line); }
}

@media (max-width: 768px) {
  .rbw-hero__panel { min-height: 600px; background-position: center 14%; align-items: flex-end; }
  .rbw-hero__content { padding: 24px 26px 30px; }
  .rbw-hero__panel::before {
    background: linear-gradient(180deg, rgba(253, 249, 242, 0) 0%, rgba(253, 249, 242, .28) 40%, rgba(253, 249, 242, .88) 62%, rgba(253, 249, 242, .97) 100%);
  }
  .rbw-hero__actions .index2-button { padding-inline: 1.55em; }
  .rbw-consult__media { aspect-ratio: 4 / 3; }
  .rbw-concerns__list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- header responsive */
.site-header .burger {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rbw-plum);
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
}
.site-header .menu__close {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.site-header .header__menu-inn {
  background: var(--rbw-cream);
}
@media (min-width: 1025px) and (max-width: 1300px) {
  .site-header .menu__list { gap: 16px; }
  .site-header .menu__link { font-size: clamp(.8rem, .55vw + .5rem, .98rem); }
}
@media (max-width: 1024px) {
  .site-header .header__menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--rbw-cream);
    transform: translateX(100%);
    transition: transform .4s ease;
  }
  .site-header .header__menu.active { transform: translateX(0); }
  .site-header .header__menu-inn {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rbw-cream);
  }
  .site-header .menu__list {
    flex-direction: column;
    gap: 26px;
    text-align: center;
  }
  .site-header .menu__link { font-size: 1.6rem; }
  .site-header .menu__close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 40px;
    height: 40px;
  }
  .site-header .menu__close svg { fill: var(--rbw-plum); stroke: var(--rbw-plum); }
}
@media (min-width: 1025px) {
  .site-header .header__menu { position: static; flex: 1; justify-content: center; }
  .site-header .menu__close,
  .site-header .burger { display: none; }
}