/* ===== Wireframe base ===== */
:root {
  --line: #999;
  --fill: #eee;
  --text: #222;
  --muted: #777;
  --brown: #3b2a22;
  --brown-dark: #1c1310;
  --gap: 24px;
  --max: 1120px;
  --radius: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: #fff;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gap); }

/* ===== Placeholders ===== */
.placeholder {
  background: #e9e5e1;
  color: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  font-size: 14px;
  width: 100%;
}
.placeholder--rounded { border-radius: var(--radius); }
.placeholder--video { aspect-ratio: 16 / 9; }
.placeholder--logo { aspect-ratio: auto; width: 200px; height: 80px; margin: 0 auto; }

/* ===== Type ===== */
h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.2; margin-bottom: 16px; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.3; margin-bottom: 12px; }
h3 { font-size: 18px; margin-bottom: 6px; }
h4 { font-size: 15px; margin-bottom: 12px; }
.eyebrow { font-size: 13px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.lead { font-size: 18px; margin-bottom: 24px; }
.tag { display: inline-block; font-size: 11px; border: 1px solid var(--line); padding: 2px 8px; margin: 12px 0 6px; color: var(--muted); }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid currentColor;
  font-size: 15px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.btn--primary { background: var(--text); color: #fff; border-color: var(--text); }
.btn--solid, .btn--line { border-radius: 999px; padding: 13px 22px; font-size: 14px; font-weight: 600; transition: .2s; }
.btn--solid { background: #111; color: #fff; border-color: #111; }
.btn--solid:hover { background: #6b5045; border-color: #6b5045; }
.btn--line { background: transparent; color: #111; border-color: #ccc; }
.btn--line:hover { border-color: #111; }
.btn--solid.btn--light { background: #fff; color: #111; border-color: #fff; }
.btn--solid.btn--light:hover { background: #e9e5e1; border-color: #e9e5e1; }
.btn--line.btn--light { color: #fff; border-color: rgba(255,255,255,.35); }
.btn--line.btn--light:hover { border-color: #fff; }

/* ===== Header ===== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: transparent; color: #fff; transition: background .3s, color .3s, box-shadow .3s, backdrop-filter .3s, transform .4s cubic-bezier(.22,.8,.3,1); }
.header.is-hidden { transform: translateY(-100%); }
.header.is-scrolled {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #111; box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header.is-scrolled .logo img { filter: none; }
/* 메뉴 열림: 스크롤 상태보다 뒤에 둬서 우선 */
.header.is-menu-open { background: transparent; color: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 30; }
.header.is-menu-open .logo img { filter: brightness(0) invert(1); }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; }
.logo { justify-self: center; }
.header__right { justify-self: end; display: flex; align-items: center; gap: 24px; }

.nav-toggle {
  background: none; border: 0; cursor: pointer; padding: 8px; color: inherit;
  display: flex; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav {
  position: fixed; inset: 0; z-index: 20; background: var(--brown-dark); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px var(--gap) 40px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .35s, transform .45s cubic-bezier(.22,.8,.3,1), visibility 0s .45s;
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s cubic-bezier(.22,.8,.3,1), visibility 0s; }
.nav__links { max-width: var(--max); width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.nav__links a {
  display: flex; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: clamp(32px, 5.5vw, 72px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s, color .2s;
}
.nav__links a span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.45); letter-spacing: .06em; }
.nav__links a:hover { color: #d6c4b4; }
.nav.is-open .nav__links a { opacity: 1; transform: none; }
.nav.is-open .nav__links a:nth-child(1) { transition-delay: .08s; }
.nav.is-open .nav__links a:nth-child(2) { transition-delay: .14s; }
.nav.is-open .nav__links a:nth-child(3) { transition-delay: .20s; }
.nav.is-open .nav__links a:nth-child(4) { transition-delay: .26s; }
.nav.is-open .nav__links a:nth-child(5) { transition-delay: .32s; }
.nav__foot { max-width: var(--max); width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.nav__info { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.8; }
.nav__actions { display: flex; flex-direction: column; gap: 10px; min-width: 300px; }

/* CTA 버튼: 아이콘 + 라벨 + 보조텍스트 */
.cta {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: 14px;
  font-size: 14px; font-weight: 600; transition: transform .2s, filter .2s;
}
.cta svg { flex: 0 0 auto; }
.cta em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 500; opacity: .7; }
.cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cta--call { background: #fff; color: #111; }
.cta--call.cta--dark { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.cta--naver { background: #03c75a; color: #fff; }

/* ===== Sections ===== */
.section { padding: clamp(96px, 12vh, 160px) 0; }
.section--alt { background: #f7f7f7; }
.section--brown {
  background: #0f0d0c; color: #fff;
  border-radius: clamp(40px, 6vw, 96px);
  margin: 0 var(--gap);
}
.section__head { text-align: center; max-width: 640px; margin: 0 auto clamp(56px, 8vh, 96px); }
.section__head--light .eyebrow, .section__head--light p { color: rgba(255,255,255,.7); }

/* ===== 1. Hero ===== */
.hero {
  position: relative; height: clamp(680px, 92vh, 1080px);
  background: var(--brown-dark); color: #fff; overflow: hidden;
  border-radius: 0 0 clamp(40px, 6vw, 96px) clamp(40px, 6vw, 96px);
}
/* 일렁이는 그라디언트 배경 */
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(40% 50% at 30% 30%, rgba(120, 78, 58, .55), transparent 70%),
    radial-gradient(45% 45% at 75% 65%, rgba(92, 58, 42, .5), transparent 70%),
    radial-gradient(35% 40% at 55% 20%, rgba(70, 45, 35, .6), transparent 70%),
    var(--brown-dark);
  animation: heroFlow 18s ease-in-out infinite alternate;
  filter: blur(30px);
}
@keyframes heroFlow {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(4%, -3%) scale(1.08) rotate(3deg); }
  66%  { transform: translate(-3%, 4%) scale(1.04) rotate(-2deg); }
  100% { transform: translate(2%, 2%) scale(1.1) rotate(1deg); }
}
.hero__copy {
  position: absolute; top: 150px; left: 0; right: 0; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gap);
  display: flex; align-items: center; gap: 32px;
  font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(34px, 6vw, 88px); line-height: 1.1; white-space: nowrap;
}
.hero__copy-l { color: rgba(255,255,255,.55); }
.hero__copy-line { flex: 1; height: 1px; background: rgba(255,255,255,.35); min-width: 40px; }
.hero__copy-r { color: rgba(255,255,255,.85); }
/* 하단 그라데이션: 흰 가운 위 텍스트 가독성 */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1;
  background: linear-gradient(to bottom, rgba(28,19,16,0) 0%, rgba(28,19,16,.75) 60%, rgba(28,19,16,.92) 100%);
  pointer-events: none;
}
.hero__bg { z-index: 2; }
.hero::after { z-index: 3; }
.hero__doctor, .hero__scroll, .hero__doctor {
  position: absolute; right: clamp(32px, 5vw, 72px); bottom: clamp(56px, 8vh, 88px); z-index: 4;
  text-align: right; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.85);
}
.hero__doctor-name { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.hero__doctor-name span { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.65); margin-left: 8px; }
.hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .1em; }

/* ===== Symbol watermark (parallax) ===== */
.symbol-bg {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: clamp(280px, 34vw, 560px); height: auto;
  opacity: .05; filter: blur(.5px);
  will-change: transform;
}
.symbol-bg--intro { left: -6%; top: 8%; }
.symbol-bg--services { right: -4%; top: 4%; }
.symbol-bg--scenes { left: 4%; bottom: -8%; transform-origin: center; }
.intro, #services, #scenes { position: relative; overflow: hidden; }
.intro > *:not(.symbol-bg), #services > *:not(.symbol-bg), #scenes > *:not(.symbol-bg) { position: relative; z-index: 1; }

/* ===== 2. Intro ===== */
.intro { padding: clamp(140px, 18vh, 240px) var(--gap); text-align: center; }
.intro__text {
  max-width: 960px; margin: clamp(48px, 7vh, 88px) auto 0;
  font-size: clamp(24px, 3.2vw, 44px); font-weight: 700; line-height: 1.45; letter-spacing: -.02em;
  color: var(--text);
}
.intro__text br { display: block; content: ""; margin-bottom: .35em; }

/* ===== Carousel ===== */
.carousel { position: relative; padding: 0 56px; }
.carousel__track {
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 340px; scroll-snap-align: start; }
.slide h3 { font-size: 20px; margin-bottom: 8px; }
.slide p { font-size: 15px; line-height: 1.7; color: var(--muted); }


/* 진료과목: 접이식 세로 카드 */
.carousel--svc { padding: 0; }
.carousel--svc .carousel__track {
  --svc-h: clamp(420px, 56vh, 560px);
  --svc-open: clamp(300px, 30vw, 420px);
  --svc-closed: clamp(72px, 7vw, 110px);
  gap: 12px; padding: 4px var(--gap) 4px; scroll-padding-left: var(--gap);
  justify-content: center;
}
#services .slide {
  position: relative; flex: 0 0 var(--svc-closed); height: var(--svc-h);
  border-radius: 20px; overflow: hidden; cursor: pointer;
  transition: flex-basis .65s cubic-bezier(.22,.8,.3,1);
}
#services .slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.85);
  transition: filter .6s ease, transform .9s ease;
}
#services .slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%);
  opacity: 0; transition: opacity .5s;
}
.slide__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px;
  color: #fff; opacity: 0; transform: translateY(12px);
  transition: opacity .4s .15s, transform .5s .15s;
  min-width: var(--svc-open);
}
.slide__body h3 { font-size: 24px; margin-bottom: 10px; letter-spacing: -.01em; color: #fff; }
.slide__body p { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.8); }
/* 닫힌 카드: 제목만 세로로 */
#services .slide::before {
  content: attr(data-title); position: absolute; left: 50%; top: 24px; z-index: 1;
  transform: translateX(-50%); writing-mode: vertical-rl;
  font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.5); opacity: 1; transition: opacity .3s;
}
/* 열린 카드 */
#services .slide.is-open { flex-basis: var(--svc-open); }
#services .slide.is-open img { filter: none; transform: scale(1.03); }
#services .slide.is-open::after { opacity: 1; }
#services .slide.is-open::before { opacity: 0; }
#services .slide.is-open .slide__body { opacity: 1; transform: none; }

.progress { height: 2px; background: #e6e6e6; border-radius: 2px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: #6b5045; transition: width .15s; }
.svc__foot { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.svc__foot .progress { flex: 1; margin: 0; }
.svc__hint { font-size: 12px; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.svc__foot[hidden] { display: none; }

/* ===== 4. Lobby ===== */
/* 공간: 세로 아코디언 — 활성만 펼침, 나머지는 띠 */
.space {
  --sp-open: clamp(360px, 46vh, 520px);
  --sp-closed: 64px;
  --sp-gap: 10px;
  display: flex; flex-direction: column; gap: var(--sp-gap); max-width: 1000px; margin: 0 auto;
  /* 전체 높이 고정: 펼침 1 + 띠 5 + 간격 5 → 전환 중 섹션이 들썩이지 않음 */
  height: calc(var(--sp-open) + var(--sp-closed) * 5 + var(--sp-gap) * 5);
}
.space__item {
  position: relative; flex: 0 1 var(--sp-closed); min-height: 0; margin: 0;
  border-radius: 18px; overflow: hidden; cursor: pointer; background: #2a2220;
  transition: flex-basis .65s cubic-bezier(.22,.8,.3,1), flex-grow .65s cubic-bezier(.22,.8,.3,1);
}
.space__item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.5); transition: filter .6s, transform .9s ease;
}
/* 닫힌 띠: 제목 좌측에 가로로 */
.space__item::before {
  content: attr(data-title); position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 1;
  font-size: 15px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.75);
  transition: opacity .3s;
}
.space__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 50%); opacity: 0; transition: opacity .5s;
}
.space__item figcaption {
  position: absolute; left: 24px; bottom: 22px; z-index: 1;
  font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity .4s .15s, transform .5s .15s;
}
.space__item.is-open { flex: 1 1 var(--sp-open); }

/* 펼친 카드 우하단 노치(오목 컷아웃) — 섹션 배경색으로 파냄 */
.space {
  --notch-w: 180px; --notch-h: 64px; --notch-r: 20px; --sec-bg: #0f0d0c;
  position: relative;
}
.space__item.is-open::before {
  content: ""; opacity: 1; transform: none; left: auto; top: auto;
  right: 0; bottom: 0; width: var(--notch-w); height: var(--notch-h);
  background: var(--sec-bg); border-top-left-radius: var(--notch-r); z-index: 2;
}
/* 오목 코너 2개: 노치 왼쪽 아래 / 노치 위 오른쪽 */
.space__item.is-open .space__corner-a, .space__item.is-open .space__corner-b { display: block; }
.space__corner-a, .space__corner-b {
  display: none; position: absolute; z-index: 2; width: var(--notch-r); height: var(--notch-r);
  background: radial-gradient(circle at 0 0, transparent var(--notch-r), var(--sec-bg) calc(var(--notch-r) + .5px));
}
.space__corner-a { right: var(--notch-w); bottom: 0; }
.space__corner-b { right: 0; bottom: var(--notch-h); }
/* 노치 안 카운터: 펼친 카드 위치가 바뀌므로 카드 내부가 아닌 .space 기준 배치 대신 카드 안에 둠 */
.space__notch { display: none; }
.space__item.is-open .space__count {
  position: absolute; right: 8px; bottom: 0; height: var(--notch-h); z-index: 3;
  display: flex; align-items: center; padding: 0 12px;
  font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.55);
}
.space__count { display: none; }
.space__item.is-open .space__count { display: flex; }
.space__count b { color: #fff; font-weight: 600; margin-right: 6px; }
.space__item.is-open img { filter: none; transform: scale(1.02); }
.space__item.is-open::after { opacity: 1; }
.space__item.is-open figcaption { opacity: 1; transform: none; }

/* ===== 5. Scenes: ○ ▯ ▮ ▯ ○ ===== */
.scenes {
  --sh: max(380px, min(58vh, 31vw, 600px));  /* 활성 카드 높이 (뷰포트 폭에도 묶음) */
  --sw: clamp(110px, 10vw, 150px);    /* 알약·원 폭 */
  display: flex; align-items: center; justify-content: center; gap: 20px;
  height: var(--sh);
  margin: 0 calc(50% - 50vw);         /* 컨테이너 밖으로 full-bleed */
  padding: 0 var(--gap);
}
.scene {
  position: relative; flex: 0 0 auto; height: 100%;
  display: flex; align-items: flex-end;
  cursor: pointer;
  transition: width .6s cubic-bezier(.22,.8,.3,1), height .6s cubic-bezier(.22,.8,.3,1);
}
.scene__img {
  position: absolute; inset: 0; border-radius: 999px; aspect-ratio: auto;
  background: #8a6f5e center / cover no-repeat;
  transition: border-radius .6s cubic-bezier(.22,.8,.3,1), filter .6s;
  filter: grayscale(1) brightness(.9);
}

.scene__label {
  position: relative; z-index: 1; padding: 0 0 36px 36px;
  color: #fff; font-weight: 700; font-size: 24px; letter-spacing: -.01em;
  opacity: 0; transform: translateY(8px); transition: opacity .4s .15s, transform .4s .15s;
  white-space: nowrap;
}
/* 거리별 형태 */
.scene[data-dist="0"] { height: var(--sh); width: calc(var(--sh) * 1.5); }
.scene[data-dist="0"] .scene__img { border-radius: 40px; filter: none; }
.scene[data-dist="0"] .scene__label { opacity: 1; transform: none; }
.scene[data-dist="1"] { width: var(--sw); height: calc(var(--sh) * .72); }
.scene[data-dist="2"] { width: var(--sw); height: var(--sw); }

.scenes__foot { display: flex; align-items: center; gap: 16px; margin-top: 32px; max-width: 420px; margin-inline: auto; }
.scenes__foot .progress { flex: 1; }
.progress--seg span { width: 20%; transition: transform .6s cubic-bezier(.22,.8,.3,1); }
.scenes__count { font-size: 12px; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.scenes__count b { color: var(--text); font-weight: 600; }

/* ===== 6. Media: bento (행 높이 고정, 비율 무시) ===== */
.bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(260px, 28vw, 400px); gap: 20px;
}
.mcard { position: relative; cursor: pointer; border-radius: 22px; overflow: hidden; background: #eee; }
.mcard--youtube { grid-column: span 2; }
.mcard--blog { grid-column: span 1; }
.mcard__thumb { position: absolute; inset: 0; }
.mcard__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(1.08) contrast(.92);
  transition: transform .9s ease, filter .6s ease;
}
.mcard__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 50%);
}
.mcard--youtube .mcard__thumb::before {
  content: "▶"; position: absolute; inset: 0; margin: auto; z-index: 1; width: 52px; height: 52px; padding-left: 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #111; font-size: 15px;
  transition: transform .4s;
}
.badge {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: #fff; border: 1px solid rgba(255,255,255,.8); background: transparent;
}
.mcard h3 {
  position: absolute; left: 22px; right: 22px; bottom: 40px; z-index: 2;
  font-size: 18px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; color: #fff;
}
.mcard time { position: absolute; left: 22px; bottom: 18px; z-index: 2; font-size: 12px; color: rgba(255,255,255,.7); }
.mcard:hover .mcard__thumb img,
.bento:not(:hover) .mcard:first-child .mcard__thumb img { transform: scale(1.05); filter: none; }
.mcard--youtube:hover .mcard__thumb::before { transform: scale(1.1); }

/* ===== 7 & 8. Footer ===== */
.footer {
  background: var(--brown-dark); color: rgba(255,255,255,.75);
  padding: clamp(120px, 16vh, 200px) 0 40px; font-size: 14px;
  border-radius: clamp(40px, 6vw, 96px) clamp(40px, 6vw, 96px) 0 0;
}
.footer__top { text-align: center; margin-bottom: clamp(96px, 14vh, 160px); }
.footer__desc {
  max-width: 640px; margin: 40px auto 0;
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.8; color: rgba(255,255,255,.7);
}
.footer__cols { display: flex; justify-content: space-between; gap: 48px; }
.footer__col h4 { color: #fff; font-size: 15px; margin-bottom: 20px; }
.footer__col p { color: rgba(255,255,255,.6); margin-bottom: 6px; line-height: 1.7; }
.footer__col--right { text-align: right; }
.footer__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; max-width: 320px; }
.hours { display: grid; grid-template-columns: auto auto; column-gap: 32px; row-gap: 6px; color: rgba(255,255,255,.6); }
.hours dd { color: rgba(255,255,255,.85); }
.footer__copy { text-align: center; color: rgba(255,255,255,.3); font-size: 12px; margin-top: clamp(80px, 12vh, 140px); letter-spacing: .04em; }

/* ===== Responsive ===== */
@media (max-width: 800px) {
  .nav { padding: 100px var(--gap) 32px; }
  .nav__links a { padding: 14px 0; font-size: 34px; }
  .nav__foot { flex-direction: column; align-items: stretch; }
  .nav__actions { min-width: 0; }
  .footer__actions { max-width: none; }
  .section { padding: 64px 0; }
  .carousel { padding: 0 var(--gap); }
  .carousel__btn { display: none; }
  .slide { flex-basis: 74vw; }
  .carousel--svc .carousel__track { --svc-h: 110vw; --svc-open: 66vw; --svc-closed: 52px; justify-content: flex-start; gap: 8px; }
  .svc__foot { margin-top: 16px; }
  .slide__body { padding: 20px; }
  .slide__body h3 { font-size: 20px; }
  .space { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 10px; }
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 56vw; gap: 12px; grid-auto-flow: dense; }
  .mcard--youtube, .mcard--blog { grid-column: span 1; }
  .mcard--youtube { grid-column: span 2; grid-row: span 1; }
  .mcard h3 { font-size: 15px; left: 16px; right: 16px; bottom: 34px; }
  .mcard time { left: 16px; bottom: 14px; }
  .badge { top: 12px; right: 12px; }
  .scenes { --sh: 78vw; --sw: 12vw; gap: 10px; }
  .scene[data-dist="0"] { width: 58vw; }
  .scene[data-dist="1"] { height: calc(var(--sh) * .78); }
  .scene[data-dist="2"] { display: none; }
  .scene[data-dist="0"] .scene__img { border-radius: 24px; }
  .scene__label { font-size: 18px; padding: 0 0 20px 20px; }
  .scene__label { font-size: 16px; padding: 0 0 20px 20px; }
  .footer__cols { flex-direction: column; }
  .footer__col--right { text-align: left; }
  .hours { justify-content: start; }
}

/* ===== Real assets ===== */
.logo img { height: 20px; width: auto; display: block; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block;
  transform-origin: center 80%;
  animation: kenBurns 24s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg img, .hero::before { animation: none; }
}
.logo img { filter: brightness(0) invert(1); }
.intro__logo, .footer__logo { width: min(420px, 70%); height: auto; display: block; margin: 0 auto; }
.intro__logo { width: min(320px, 60%); opacity: .9; }
.footer__logo { filter: brightness(0) invert(1); width: min(360px, 65%); }

@media (max-width: 800px) {
  .hero__copy { top: 104px; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 9.6vw; white-space: normal; word-break: keep-all; }
  .hero__copy-line { display: none; }
  .hero__copy-r { align-self: flex-end; }
  .hero__doctor { bottom: 72px; text-align: left; left: 32px; right: auto; }
    .hero__doctor { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.75); }
  .hero__doctor-name { font-size: 16px; margin-bottom: 4px; }
  .hero__doctor-name span { font-size: 11px; }
}