/* ELION Aesthetic — local build 2026-08-05 */
.aesthetic-page {
  --aesthetic-ink: #171510;
  --aesthetic-cream: #fbf8f2;
  --aesthetic-gold: #b9904e;
  --aesthetic-gold-deep: #80602e;
  --aesthetic-line: rgba(128, 96, 46, .2);
}

.aesthetic-page .site-header { border-bottom-color: rgba(117, 101, 78, .16); }
.aesthetic-page .main-nav { gap: clamp(9px, 1.15vw, 20px); }
.aesthetic-page .main-nav > a { white-space: nowrap; }

.aesthetic-hero {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  color: #f8f2e8;
  background:
    radial-gradient(circle at 80% 18%, rgba(210, 178, 112, .18), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(126, 96, 53, .22), transparent 32%),
    linear-gradient(135deg, #12120f, #211e17 58%, #15140f);
}
.aesthetic-hero::before,
.aesthetic-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(232, 207, 157, .22);
  border-radius: 50%;
  pointer-events: none;
}
.aesthetic-hero::before { width: 430px; height: 430px; top: -120px; right: -80px; }
.aesthetic-hero::after { width: 260px; height: 260px; right: 225px; bottom: -128px; }
.aesthetic-hero .container {
  position: relative;
  z-index: 1;
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: center;
  padding-block: clamp(86px, 10vw, 132px);
}
.aesthetic-hero .breadcrumbs { grid-column: 1 / -1; align-self: start; margin-bottom: -70px; color: rgba(255,255,255,.58); }
.aesthetic-hero .breadcrumbs a { color: rgba(255,255,255,.72); }
.aesthetic-hero-copy { max-width: 790px; }
.aesthetic-hero .eyebrow { color: #ddc18b; }
.aesthetic-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(56px, 7.3vw, 104px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .92;
}
.aesthetic-hero h1 .kr-line,
.aesthetic-hero h1 .local-line { display: block; margin-top: 22px; font-family: var(--sans); font-size: clamp(27px, 3.1vw, 44px); font-weight: 400; letter-spacing: -.04em; line-height: 1.2; }
.aesthetic-hero-lead { max-width: 690px; margin: 30px 0 0; color: rgba(255,255,255,.73); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.85; }
.aesthetic-hero .button-row { margin-top: 36px; }

.aesthetic-orbit {
  position: relative;
  width: min(34vw, 390px);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid rgba(225, 198, 143, .35);
  border-radius: 50%;
}
.aesthetic-orbit::before,
.aesthetic-orbit::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(225,198,143,.24); border-radius: 50%; }
.aesthetic-orbit::after { inset: 33%; background: rgba(220,190,132,.08); }
.aesthetic-orbit span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  color: #ead3a3;
  background: rgba(15,15,12,.82);
  border: 1px solid rgba(225,198,143,.4);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 30px;
  box-shadow: 0 18px 44px rgba(0,0,0,.23);
}
.aesthetic-orbit span:nth-child(1) { top: 3%; left: 8%; }
.aesthetic-orbit span:nth-child(2) { top: 38%; right: -8%; }
.aesthetic-orbit span:nth-child(3) { bottom: -2%; left: 22%; }

.aesthetic-program-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 34px 0 0;
}
.aesthetic-program-tabs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 18px;
  color: #574934;
  background: rgba(255,253,248,.78);
  border: 1px solid var(--aesthetic-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.aesthetic-program-tabs a::after { content: "↗"; color: var(--aesthetic-gold-deep); }
.aesthetic-program-tabs a:hover,
.aesthetic-program-tabs a[aria-current="page"] { transform: translateY(-2px); background: #fff; border-color: var(--aesthetic-gold); }

.aesthetic-intro { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(50px,8vw,112px); align-items: start; }
.aesthetic-direct-answer {
  margin: 0;
  padding: clamp(28px,4vw,46px);
  color: #312c24;
  background: var(--aesthetic-cream);
  border: 1px solid var(--aesthetic-line);
  border-radius: 26px;
  font-size: clamp(17px,1.55vw,20px);
  line-height: 1.85;
}
.aesthetic-direct-answer strong { color: var(--aesthetic-gold-deep); }
.aesthetic-intro-copy p { color: #625d53; }

.aesthetic-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.aesthetic-program-card {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px,3.4vw,44px);
  overflow: hidden;
  color: #f8f3e9;
  background: #1a1915;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 30px;
}
.aesthetic-program-card:nth-child(2) { color: #1c1913; background: linear-gradient(150deg,#e9dcc2,#fbf8f2 65%); border-color: var(--aesthetic-line); }
.aesthetic-program-card:nth-child(3) { color: #1d1912; background: linear-gradient(150deg,#d8bd87,#f1e3c6 72%); border-color: rgba(128,96,46,.22); }
.aesthetic-program-card::after { content: attr(data-letter); position: absolute; top: -16px; right: 18px; color: rgba(226,199,145,.16); font-family: var(--serif); font-size: 168px; line-height: 1; }
.aesthetic-program-card:nth-child(n+2)::after { color: rgba(104,76,32,.12); }
.aesthetic-program-card .program-no { position: relative; z-index: 1; color: #d8bb82; font-family: var(--serif); font-size: 14px; letter-spacing: .12em; }
.aesthetic-program-card:nth-child(n+2) .program-no { color: var(--aesthetic-gold-deep); }
.aesthetic-program-card h2,
.aesthetic-program-card h3 { position: relative; z-index: 1; margin: 78px 0 0; font-family: var(--serif); font-size: clamp(40px,4vw,58px); font-weight: 400; line-height: .98; }
.aesthetic-program-card h2 small,
.aesthetic-program-card h3 small { display: block; margin-bottom: 13px; font-family: var(--sans); font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.aesthetic-program-card p { position: relative; z-index: 1; margin: 24px 0 34px; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.8; }
.aesthetic-program-card:nth-child(n+2) p { color: #625a4d; }
.aesthetic-program-card .text-link { position: relative; z-index: 1; margin-top: auto; align-self: flex-start; }

.aesthetic-section-lead { max-width: 760px; margin: 18px 0 0; color: #686158; font-size: 16px; }
.aesthetic-assessment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 44px; counter-reset: aesthetic-point; }
.aesthetic-assessment-card {
  position: relative;
  min-height: 210px;
  padding: 30px;
  background: #fffdf8;
  border: 1px solid var(--aesthetic-line);
  border-radius: 22px;
  counter-increment: aesthetic-point;
}
.aesthetic-assessment-card::before { content: "0" counter(aesthetic-point); display: block; margin-bottom: 35px; color: var(--aesthetic-gold); font-family: var(--serif); font-size: 15px; }
.aesthetic-assessment-card h3 { margin: 0; font-size: 18px; }
.aesthetic-assessment-card p { margin: 10px 0 0; color: #6c665d; font-size: 14px; }

.aesthetic-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: 44px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.aesthetic-role {
  min-height: 210px;
  padding: 34px;
  background: #171713;
}
.aesthetic-role small { color: var(--gold-light); font-size: 11px; font-weight: 750; letter-spacing: .14em; }
.aesthetic-role h3 { margin: 36px 0 0; font-family: var(--serif); font-size: 32px; font-weight: 400; }
.aesthetic-role p { margin: 12px 0 0; color: rgba(255,255,255,.62); font-size: 14px; }

.aesthetic-compare {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  overflow: hidden;
  border: 1px solid var(--aesthetic-line);
  border-radius: 28px;
}
.aesthetic-compare article { min-height: 270px; padding: clamp(30px,4vw,52px); background: #fffdf8; }
.aesthetic-compare article + article { background: #efe6d6; border-left: 1px solid var(--aesthetic-line); }
.aesthetic-compare .label { color: var(--aesthetic-gold-deep); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.aesthetic-compare h3 { margin: 28px 0 0; font-family: var(--serif); font-size: clamp(32px,3.4vw,46px); font-weight: 400; }
.aesthetic-compare p { margin: 16px 0 0; color: #655f55; }

.aesthetic-care-note {
  display: grid;
  grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr);
  gap: clamp(36px,7vw,90px);
  padding: clamp(36px,6vw,70px);
  color: #f4eee3;
  background: linear-gradient(135deg,#201e18,#12120f);
  border-radius: 30px;
}
.aesthetic-care-note h2 { margin: 0; font-family: var(--serif); font-size: clamp(38px,4.7vw,62px); font-weight: 400; line-height: 1; }
.aesthetic-care-note p { margin: 0; color: rgba(255,255,255,.7); }
.aesthetic-care-note ul { margin: 20px 0 0; padding-left: 20px; color: rgba(255,255,255,.72); }

.aesthetic-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--aesthetic-line);
  color: #6a6258;
  font-size: 13px;
}
.aesthetic-byline strong { color: #2e2922; }
.aesthetic-byline a { color: var(--aesthetic-gold-deep); font-weight: 750; }

.aesthetic-location-strip {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 30px;
  align-items: center;
  padding: clamp(30px,4vw,48px);
  color: #f6f0e6;
  background: #1a1915;
  border: 1px solid rgba(218,191,137,.22);
  border-radius: 28px;
}
.aesthetic-location-strip h2 { margin: 0; font-family: var(--serif); font-size: clamp(34px,4vw,52px); font-weight: 400; }
.aesthetic-location-strip p { margin: 12px 0 0; color: rgba(255,255,255,.66); }
.aesthetic-location-strip .aesthetic-hours-summary { color: #dfc38b; font-size: 14px; font-weight: 700; letter-spacing: .01em; }

.aesthetic-home-teaser { padding-block: clamp(62px,7vw,96px); background: #171713; color: #f7f0e5; }
.aesthetic-home-teaser .section-head { margin-bottom: 32px; }
.aesthetic-home-teaser .section-title { font-size: clamp(34px,4.8vw,60px); }
.aesthetic-home-teaser p:not(.eyebrow) { color: rgba(255,255,255,.66); }
.aesthetic-home-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.aesthetic-home-products a { min-height: 150px; padding: 25px; background: rgba(255,255,255,.04); border: 1px solid rgba(223,195,139,.22); border-radius: 20px; transition: .2s ease; }
.aesthetic-home-products a:hover { transform: translateY(-3px); background: rgba(220,189,129,.1); border-color: rgba(223,195,139,.5); }
.aesthetic-home-products small { color: var(--gold-light); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.aesthetic-home-products strong { display: block; margin-top: 24px; font-family: var(--serif); font-size: clamp(27px,3vw,38px); font-weight: 400; }
.aesthetic-home-products span { display: block; margin-top: 7px; color: rgba(255,255,255,.58); font-size: 13px; }
.aesthetic-home-action { margin-top: 26px; }

.concern-finder-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.concern-finder-grid a { min-height: 188px; background: #fffdfa; border-color: rgba(126,102,72,.2); color: var(--ink); }
.concern-finder-grid a:hover { background: #fff8ec; border-color: rgba(166,123,54,.55); }
.concern-finder-grid small { color: #9a6e28; }
.concern-finder-grid strong { margin-top: 18px; font-family: var(--sans); font-size: clamp(19px,1.7vw,24px); font-weight: 700; line-height: 1.38; }
.concern-finder-grid span { color: rgba(29,28,24,.68); font-size: 14px; line-height: 1.7; }

@media (max-width: 1280px) {
  .aesthetic-page .main-nav { gap: 0; }
}

@media (max-width: 980px) {
  .aesthetic-hero .container { grid-template-columns: 1fr; }
  .aesthetic-hero .breadcrumbs { margin-bottom: -15px; }
  .aesthetic-orbit { width: min(62vw, 350px); }
  .aesthetic-intro { grid-template-columns: 1fr; }
  .aesthetic-card-grid { grid-template-columns: 1fr; }
  .aesthetic-program-card { min-height: 390px; }
  .aesthetic-program-card h2,
  .aesthetic-program-card h3 { margin-top: 46px; }
  .aesthetic-assessment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .concern-finder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .aesthetic-hero { min-height: 0; }
  .aesthetic-hero .container { min-height: 0; padding-block: 72px 80px; }
  .aesthetic-hero h1 { font-size: clamp(47px,15vw,72px); }
  .aesthetic-hero h1 .kr-line,
  .aesthetic-hero h1 .local-line { font-size: clamp(24px,7vw,34px); }
  .aesthetic-program-tabs { grid-template-columns: 1fr; }
  .aesthetic-program-tabs a { min-height: 52px; }
  .aesthetic-orbit { width: min(72vw,310px); }
  .aesthetic-orbit span { width: 70px; height: 70px; font-size: 24px; }
  .aesthetic-assessment-grid,
  .aesthetic-role-grid,
  .aesthetic-compare,
  .aesthetic-home-products { grid-template-columns: 1fr; }
  .aesthetic-compare article + article { border-top: 1px solid var(--aesthetic-line); border-left: 0; }
  .aesthetic-care-note { grid-template-columns: 1fr; }
  .aesthetic-location-strip { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .aesthetic-program-card { min-height: 420px; padding: 28px 24px; }
  .aesthetic-program-card::after { font-size: 120px; }
  .aesthetic-assessment-card { min-height: 0; }
  .aesthetic-byline { align-items: flex-start; flex-direction: column; }
}