/* Studio identity with an editorial composition inspired by the supplied reference. */
body { background: var(--paper); }
.button { border-radius: 999px; }
.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 48px 48px;
  color: var(--paper);
  background: #430724;
}
.hero-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 90% 20%, rgba(167,119,137,.20), transparent 60%),
    linear-gradient(115deg, rgba(49,5,29,.5), transparent 70%);
  content: "";
  pointer-events: none;
}
.hero {
  min-height: 684px;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 6vw, 85px);
  padding-top: 64px;
  padding-bottom: 80px;
}
.hero-copy .eyebrow {
  display: inline-flex;
  padding: 10px 14px;
  border: 1px solid rgba(250,248,245,.25);
  border-radius: 999px;
  color: #efe1e6;
  font-size: .61rem;
  letter-spacing: .12em;
}
.hero h1 {
  margin-top: 20px;
  margin-bottom: 25px;
  color: #fff9f2;
  font-size: clamp(3.3rem, 5.6vw, 4.85rem);
  line-height: 1.05;
}
.hero h1 em { color: #ddbcaa; }
.hero-lead { max-width: 490px; color: #e7d8df; font-size: 1.02rem; }
.hero-actions { gap: 22px; }
.hero-actions .button {
  color: #3a1027;
  border-color: #e3cbb9;
  background: #e3cbb9;
}
.hero-actions .button:hover { border-color: #f3e6d9; background: #f3e6d9; }
.hero-actions .text-link { color: #fff3eb; font-size: .84rem; }
.hero-actions .text-link::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: rgba(255,243,235,.35);
  content: "";
}
.hero-actions .text-link { position: relative; }
.hero-location { margin-top: 30px; color: #d8c1cc; font-size: .76rem; }
.hero-location svg { color: #ddbcaa; }
.hero-visual { min-width: 0; min-height: 526px; }
.hero-photo {
  width: 100%;
  max-width: 435px;
  height: 526px;
  overflow: visible;
  border: 6px solid rgba(221,188,170,.26);
  border-radius: 32px;
  background: transparent;
  box-shadow: 0 24px 60px rgba(18,0,11,.2);
}
.hero-photo > img { height: 100%; border-radius: 26px; object-position: 50% 42%; }
.photo-caption {
  right: 22px;
  bottom: -24px;
  left: -23px;
  padding: 19px 24px;
  border-radius: 18px;
  color: var(--wine);
  background: #faf5ef;
  box-shadow: 0 12px 32px rgba(30,0,16,.12);
}
.photo-caption strong { font-size: 1.45rem; }
.photo-caption small { color: var(--muted); font-size: .69rem; letter-spacing: .06em; }
.caption-line { width: 44px; }
.info-ribbon { border-top: 0; }
.ribbon-inner { min-height: 82px; }
.section-heading h2 em, .therapy-intro h2 em, .faq-heading h2 em,
.contact-panel h2 em { color: var(--plum); font-weight: 400; }
.about-section { padding-bottom: 58px; }
.section-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding-top: 12px;
  padding-bottom: 72px;
}
.section-bridge p {
  max-width: 720px;
  margin: 0;
  color: var(--wine);
  font: 400 clamp(1.5rem, 2.4vw, 2.05rem)/1.4 var(--serif);
  letter-spacing: -.035em;
  text-align: center;
}
.section-bridge em { color: var(--plum); }
.bridge-rule { width: 80px; height: 1px; flex: 1 1 30px; max-width: 100px; background: #d5c3c6; }
.therapy-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.therapy-details { display: grid; gap: 12px; }
.detail-card {
  padding: 22px 24px;
  border: 1px solid rgba(77,8,43,.12);
  border-radius: 15px;
  background: rgba(255,253,251,.52);
  transition: border-color 220ms ease, background 220ms ease;
}
.detail-card:hover { border-color: rgba(77,8,43,.3); background: var(--white); }
.detail-card:last-child { border-bottom: 1px solid rgba(77,8,43,.12); }
.detail-number { color: var(--plum); font-size: .68rem; letter-spacing: .1em; }
.case-image { border-radius: 16px; }
.case-image figcaption { border-radius: 999px; }
.course-panel { border-radius: 24px; background: #430724; }
.contact-panel { border-radius: 24px; }
.review-card { border-radius: 18px; }

/* Progressive enhancement: without JS, every word is immediately readable. */
.reveal-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.reveal-word { display: inline-block; white-space: nowrap; }
.reveal-enabled { transform: translateY(24px); transition-duration: 800ms; }
.reveal-enabled.is-visible { transform: translateY(0); }
.bridge-rule { transform: scaleX(.25); transition: transform 1100ms cubic-bezier(.2,.7,.2,1); }
.is-visible > .bridge-rule { transform: scaleX(1); }

@media (max-width: 1040px) and (min-width: 821px) {
  .hero { gap: 40px; padding-top: 56px; padding-bottom: 76px; }
  .hero-photo { height: 490px; }
  .hero-visual { min-height: 510px; }
  .hero h1 { font-size: 3.7rem; }
}
@media (max-width: 820px) {
  .hero-stage { border-radius: 0 0 32px 32px; }
  .hero { grid-template-columns: 1fr; gap: 50px; padding-top: 54px; padding-bottom: 72px; }
  .hero-copy { max-width: 620px; }
  .hero h1 { font-size: clamp(3.3rem, 8vw, 4.55rem); }
  .hero-visual { min-height: 0; }
  .hero-photo { width: min(100%, 430px); height: 510px; }
  .hero-photo > img { height: 100%; }
  .photo-caption { left: 16px; right: 16px; bottom: -21px; }
  .ribbon-inner { min-height: 82px; }
  .about-section { padding-bottom: 44px; }
  .section-bridge { padding-bottom: 58px; gap: 22px; }
}
@media (max-width: 540px) {
  .hero-stage { border-radius: 0 0 25px 25px; }
  .hero { padding-top: 35px; padding-bottom: 55px; gap: 34px; }
  .hero h1 { font-size: clamp(2.65rem, 11.8vw, 3.8rem); line-height: 1.08; }
  .hero-copy .eyebrow { gap: 7px; padding: 9px 11px; font-size: .51rem; }
  .hero-lead { font-size: .96rem; line-height: 1.75; }
  .hero-actions { gap: 20px; }
  .hero-actions .button { font-size: .85rem; }
  .hero-location { margin-top: 26px; }
  .hero-photo { width: 100%; height: auto; aspect-ratio: .83; border-width: 4px; border-radius: 25px; }
  .hero-photo > img { height: 100%; border-radius: 21px; }
  .photo-caption { bottom: -17px; left: 12px; right: 12px; padding: 15px 17px; border-radius: 13px; }
  .photo-caption strong { font-size: 1.27rem; }
  .photo-caption small { font-size: .6rem; }
  .ribbon-inner { padding-top: 22px; padding-bottom: 22px; }
  .about-section { padding-bottom: 36px; }
  .section-bridge { padding-top: 6px; padding-bottom: 45px; gap: 14px; }
  .section-bridge p { max-width: 255px; font-size: 1.6rem; }
  .bridge-rule { min-width: 14px; }
  .detail-card { padding: 20px; }
  .course-panel, .contact-panel { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-enabled, .bridge-rule { opacity: 1; transform: none; transition: none; }
}