/* Rockland Beauty — /about.
   Recomposed into the canonical DESIGN.md "light clinic-atelier" world:
   warm ivory ground, pale lavender panel, warm sand card, deep plum text and
   a compact capsule CTA, Hatton display serif + Helvetica Now, 20-40px radii,
   capsule buttons, layered soft-shadow photography, the signature arched
   portrait, and one calm scroll-reveal that respects prefers-reduced-motion.
   Dr. Yanina Kotlyar is the clear central subject; the story moves from
   physician-led care to individualized evaluation to natural results, ending
   on the consultation. No dark full-width sections. */

: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 28px 64px -34px rgba(46, 32, 34, .45), 0 10px 26px -18px rgba(46, 32, 34, .22);
  --rbw-shadow-soft: 0 20px 44px -28px rgba(46, 32, 34, .32);
  --rbw-gutter: clamp(24px, 5vw, 96px);
  --rbw-shell: 1320px;
  --rbw-ease: cubic-bezier(.22, 1, .36, 1);
}

.about-doctor-page {
  margin: 0;
  overflow-x: clip;
  background: var(--rbw-cream);
  color: var(--rbw-plum);
}

.about-doctor-page *,
.about-doctor-page *::before,
.about-doctor-page *::after {
  box-sizing: border-box;
}

.about-doctor-page a,
.about-doctor-page button {
  -webkit-tap-highlight-color: transparent;
}

.about-doctor-page a:focus-visible,
.about-doctor-page button:focus-visible {
  outline: 3px solid var(--rbw-gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- header */
.about-doctor-page .site-header {
  position: static;
}

.about-doctor-page .site-header .container {
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: clamp(20px, 2.2vw, 28px) var(--rbw-gutter) 16px;
}

/* ------------------------------------------------------------- section */
.about-section {
  padding: clamp(44px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

.about-section__inner {
  max-width: var(--rbw-shell);
  margin: 0 auto;
}

.about-section__eyebrow {
  margin: 0 0 14px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--rbw-muted);
}

.about-section__title {
  margin: 0;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--rbw-plum);
  text-wrap: balance;
}

.about-section__body {
  color: var(--rbw-muted);
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.68;
  max-width: 34rem;
}

/* ---------------------------------------------------------------- hero */
.about-hero {
  padding: clamp(20px, 4vw, 44px) 0 clamp(44px, 6vw, 76px);
}

.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
}

.about-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--rbw-muted);
}

.about-hero__eyebrow::before {
  width: 34px;
  height: 1px;
  content: "";
  background: var(--rbw-gold-2);
}

.about-hero__name {
  margin: 0 0 22px;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--rbw-plum);
  text-wrap: balance;
}

.about-hero__lede {
  margin: 0 0 26px;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 1.08rem;
  line-height: 1.68;
  color: var(--rbw-muted);
  max-width: 34rem;
}

.about-hero__signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.about-hero__signals li {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 18px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--rbw-plum);
  border-left: 1px solid var(--rbw-line);
}

.about-hero__signals li:first-child {
  padding-left: 0;
  border-left: 0;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

/* ------------------------------------------------------------- capsule */
/* app.css forces `button { border-radius: 0 !important }` globally; win the
   pill back for the page's capsule CTAs with a more specific !important. */
.about-doctor-page button.about-doctor__cta {
  border-radius: 999px !important;
}

.about-doctor__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 1.12em 1.95em;
  border: 0;
  border-radius: 999px;
  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;
}

.about-doctor__cta:hover {
  transform: translateY(-2px);
  background: var(--rbw-plum-2);
  box-shadow: 0 22px 40px -20px rgba(46, 32, 34, .55);
}

.about-doctor__link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--rbw-line);
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: 1.02rem;
  color: var(--rbw-plum);
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}

.about-doctor__link:hover {
  border-color: var(--rbw-plum);
  color: var(--rbw-plum-2);
}

/*                                                        hero media / arch */
.about-hero__media {
  position: relative;
  display: flex;
  justify-content: center;
}

.about-hero__backdrop {
  position: absolute;
  z-index: 0;
  top: 4%;
  right: -6%;
  bottom: -7%;
  left: 9%;
  border-radius: var(--rbw-radius-lg);
  background: linear-gradient(160deg, var(--rbw-lilac) 0%, var(--rbw-lilac-2) 60%, #f0ebfa 100%);
}

.about-hero__portrait {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 180px 180px var(--rbw-radius-md) var(--rbw-radius-md);
  overflow: hidden;
  box-shadow: var(--rbw-shadow);
}

.about-hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* nested cream-framed accent card (layered photography, à la the atelier) */
.about-hero__accent {
  position: absolute;
  z-index: 3;
  right: 2%;
  bottom: -7%;
  width: 34%;
  aspect-ratio: 1;
  border: 7px solid var(--rbw-cream);
  border-radius: var(--rbw-radius-md);
  overflow: hidden;
  transform: rotate(-4deg);
  box-shadow: var(--rbw-shadow-soft);
}

.about-hero__accent img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------------------------- bio */
.about-bio {
  padding: clamp(44px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
  background: var(--rbw-cream);
}

.about-bio__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
}

.about-bio__intro p {
  margin: 22px 0 0;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--rbw-muted);
  max-width: 32rem;
}

.about-bio__intro p + p {
  margin-top: 14px;
}

.about-bio__label {
  margin: 4px 0 6px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--rbw-muted);
}

.about-bio__principles {
  counter-reset: principle;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-bio__principles li {
  counter-increment: principle;
  display: grid;
  grid-template-columns: 3.4ch minmax(0, 1fr);
  padding: 20px 0;
  border-top: 1px solid var(--rbw-line);
}

.about-bio__principles li:last-child {
  border-bottom: 1px solid var(--rbw-line);
}

.about-bio__principles li::before {
  content: "0" counter(principle);
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 3px;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rbw-gold-2);
}

.about-bio__principles strong {
  grid-column: 2;
  grid-row: 1;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rbw-plum);
}

.about-bio__principles span {
  grid-column: 2;
  grid-row: 2;
  margin-top: 8px;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--rbw-muted);
}

/* ---------------------------------------------------------------- philosophy */
.about-philosophy {
  padding: 0;
}

.about-philosophy__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: clamp(42px, 6vw, 76px);
  border-radius: var(--rbw-radius-lg);
  background: linear-gradient(160deg, var(--rbw-lilac) 0%, var(--rbw-lilac-2) 58%, #f0ebfa 100%);
  box-shadow: var(--rbw-shadow-soft);
  overflow: hidden;
}

.about-philosophy__panel::before {
  position: absolute;
  z-index: 0;
  top: -18%;
  right: -10%;
  width: 44%;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  border: 1px solid var(--rbw-line-on-plum);
  pointer-events: none;
}

.about-philosophy__copy {
  position: relative;
  z-index: 1;
}

.about-philosophy__title {
  margin: 0 0 26px;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--rbw-plum);
  text-wrap: balance;
}

.about-philosophy__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
}

.about-philosophy__body p {
  margin: 0;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 1.02rem;
  line-height: 1.66;
  color: var(--rbw-plum);
}

.about-philosophy__media {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--rbw-radius-md);
  overflow: hidden;
  box-shadow: var(--rbw-shadow);
}

.about-philosophy__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------------------------- bridge */
.about-bridge {
  padding: clamp(52px, 7vw, 88px) 0;
}

.about-bridge__inner {
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
}

.about-bridge__intro {
  max-width: 44rem;
}

.about-bridge__lede {
  margin: 18px 0 0;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--rbw-muted);
}

.about-bridge__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  margin-top: clamp(30px, 5vw, 52px);
}

.about-bridge__media {
  margin: 0;
  border-radius: var(--rbw-radius-lg);
  overflow: hidden;
  box-shadow: var(--rbw-shadow);
}

.about-bridge__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 32%;
}

/* soft light pill used for the treatments bridge link */
.about-pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .9em 1.6em;
  border: 1px solid var(--rbw-line);
  border-radius: 999px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .98rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--rbw-plum);
  background: var(--rbw-cream);
  box-shadow: 0 12px 26px -20px rgba(46, 32, 34, .5);
  text-decoration: none;
  transition: transform .3s var(--rbw-ease), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.about-pill span[aria-hidden] {
  color: var(--rbw-gold-2);
  transition: color .3s ease, transform .3s var(--rbw-ease);
}

.about-pill:hover {
  transform: translateY(-2px);
  background: var(--rbw-plum);
  border-color: var(--rbw-plum);
  color: var(--rbw-cream);
  box-shadow: 0 18px 34px -20px rgba(46, 32, 34, .55);
}

.about-pill:hover span[aria-hidden] {
  color: var(--rbw-gold);
  transform: translateX(3px);
}

.about-bridge__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 28px);
}

.about-bridge__cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 0 calc(-1 * clamp(56px, 7vw, 108px));
  padding: 0;
  list-style: none;
}

.about-bridge__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  padding: 16px 20px 16px 16px;
  border-radius: var(--rbw-radius-md);
  background: var(--rbw-cream);
  box-shadow: var(--rbw-shadow-soft);
  text-decoration: none;
  transition: transform .3s var(--rbw-ease), box-shadow .3s ease;
}

.about-bridge__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rbw-shadow);
}

.about-bridge__thumb {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
}

.about-bridge__card-copy strong {
  display: block;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rbw-plum);
}

.about-bridge__card-copy span {
  display: block;
  margin-top: 5px;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--rbw-muted);
}

.about-bridge__card-arrow {
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  color: var(--rbw-gold-2);
  transition: transform .3s var(--rbw-ease);
}

.about-bridge__card:hover .about-bridge__card-arrow {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------- process */
.about-process {
  padding: 0;
}

.about-process__card {
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: clamp(42px, 6vw, 76px);
  border-radius: var(--rbw-radius-lg);
  background: var(--rbw-cream-2);
  box-shadow: var(--rbw-shadow-soft);
}

.about-process__steps {
  counter-reset: visit;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(30px, 5vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.about-process__step {
  counter-increment: visit;
  padding-top: 20px;
  border-top: 1px solid var(--rbw-line);
}

.about-process__step::before {
  content: "0" counter(visit);
  display: block;
  margin-bottom: 12px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: .88rem;
  line-height: 1;
  color: var(--rbw-muted);
}

/* ---------------------------------------------------------------- credential strip */
.about-credential {
  padding: clamp(44px, 6vw, 72px) 0 0;
}

.about-credential__strip {
  padding-inline: var(--rbw-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px clamp(18px, 3vw, 36px);
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 22px 0 26px;
  border-top: 1px solid var(--rbw-line);
  border-bottom: 1px solid var(--rbw-line);
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--rbw-muted);
  text-align: center;
}

.about-credential__name {
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rbw-plum);
}

.about-process__step-label {
  display: block;
  margin-bottom: 10px;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.22;
  color: var(--rbw-plum);
}

.about-process__step p {
  margin: 0;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--rbw-muted);
}

/* ---------------------------------------------------------------- cta */
.about-cta {
  padding: clamp(52px, 7vw, 88px) 0 clamp(72px, 9vw, 120px);
}

.about-cta__card {
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: clamp(46px, 6vw, 84px);
  text-align: center;
  border-radius: var(--rbw-radius-lg);
  background: var(--rbw-cream-3);
  box-shadow: var(--rbw-shadow-soft);
}

.about-cta__title {
  margin: 0 auto 18px;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--rbw-plum);
  max-width: 22ch;
  text-wrap: balance;
}

.about-cta__lede {
  margin: 0 auto 30px;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.66;
  color: var(--rbw-muted);
  max-width: 42rem;
}

.about-cta__actions {
  display: flex;
  justify-content: center;
}

.about-cta__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(22px, 3vw, 40px);
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--rbw-line);
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--rbw-muted);
}

.about-cta__contacts a {
  color: var(--rbw-plum);
  text-decoration: none;
  transition: color .25s ease;
}

.about-cta__contacts a:hover {
  color: var(--rbw-plum-2);
}

/* --------------------------------------------------------- reveal */
@media (prefers-reduced-motion: no-preference) {
  .about-doctor-page .rbw-reveal--armed {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .85s ease, transform .85s var(--rbw-ease);
  }

  .about-doctor-page .rbw-reveal--armed.is-inview {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------- shell alignment (grid pass)
   Cards only - the coloured sections themselves stay full-width. Handoff at
   1439 keeps the 1440px reference exact (see home.css for the reasoning). */
@media (max-width: 1439px) {
  .about-philosophy__panel,
  .about-process__card,
  .about-cta__card {
    margin-inline: var(--rbw-gutter);
  }
}

/* --------------------------------------------------------- responsive */
@media screen and (max-width: 1100px) {
  .about-hero__inner {
    gap: clamp(28px, 4vw, 48px);
  }

  .about-hero__signals li {
    padding: 0 14px;
  }

  .about-bridge__cards {
    margin-left: calc(-1 * clamp(32px, 4vw, 56px));
  }

  .about-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(28px, 4vw, 44px);
  }
}

@media screen and (max-width: 900px) {
  .about-hero__inner,
  .about-bio__inner,
  .about-philosophy__panel,
  .about-bridge__stage {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .about-hero__media {
    order: 2;
  }

  .about-hero__portrait {
    width: min(88%, 400px);
  }

  .about-philosophy__media {
    width: min(100%, 460px);
  }

  .about-bio__aside {
    margin-top: 14px;
  }

  .about-bridge__stage {
    gap: 0;
  }

  .about-bridge__cards {
    position: relative;
    z-index: 1;
    margin: -52px 0 0;
    padding: 0 16px;
  }
}

@media screen and (max-width: 720px) {
  .about-hero__eyebrow::before {
    width: 24px;
  }

  .about-hero__signals {
    gap: 8px 0;
  }

  .about-hero__signals li {
    padding: 0 12px;
    font-size: .9rem;
  }

  .about-hero__signals li:first-child {
    padding-left: 0;
  }

  .about-philosophy__body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-bridge__cards {
    margin-top: -40px;
    padding: 0 8px;
  }

  .about-bridge__card {
    column-gap: 14px;
    padding: 14px 16px 14px 14px;
  }

  .about-bridge__thumb {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .about-process__steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .about-cta__contacts {
    flex-direction: column;
    gap: 10px;
  }
}