:root {
  --nude: #F7F0E8;
  --cream: #FFFDFC;
  --champagne: #EDDFD0;
  --gold: #B99A73;
  --gold-dark: #80613F;
  --blue: #3042D8;
  --pink: #F7D8EC;
  --paro: #F3B6E9;
  --adult: #C9DFF3;
  --lavender: #DED7F3;
  --child: var(--lavender);
  --ink: #18162A;
  --purple: var(--lavender);
}

body {
  background: var(--nude);
}

.nav {
  background: var(--blue);
}

.instagram-nav { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; color: #fff; transition: background .2s ease, transform .2s ease; }
.instagram-nav svg { display: block; width: 23px; height: 23px; }
.instagram-nav:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.instagram-nav:focus-visible, .instagram-footer:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.instagram-footer { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 700; }
.instagram-footer svg { flex: 0 0 auto; width: 24px; height: 24px; }

@media (max-width: 900px) {
  .nav { gap: 8px; padding-left: 16px; }
  .instagram-nav { width: 44px; height: 44px; }
}

.hero {
  display: flex;
  align-items: center;
  min-height: min(850px, 100svh);
  padding: 178px max(7vw, 28px) 115px;
}

.hero::before { content: none; }

.hero-copy { width: min(100%, 1240px); margin: 0 auto; }
.hero h1 { max-width: 1180px; font-size: clamp(58px, 7.2vw, 108px); line-height: 1.01; }
.hero h1 em,
.statement h2 em,
.section-head h2 em,
.protocol h2 em,
.whitening h2 em,
.booking-cta h2 em { font-style: normal; font-weight: 400; }
.hero .lead { max-width: 720px; margin: 40px 0 30px; }

@media (max-width: 750px) {
  .hero { min-height: auto; padding: 145px 22px 86px; }
  .hero h1 { font-size: clamp(38px, 9vw, 72px); }
  .hero .lead { margin: 30px 0 27px; font-size: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
}

.statement {
  background: var(--champagne);
  color: var(--ink);
}

.statement .eyebrow,
.statement h2 em {
  color: var(--blue);
}

.symptoms {
  border-top-color: rgba(128, 97, 63, 0.42);
}

.symptoms span {
  border-right-color: rgba(128, 97, 63, 0.42);
}

.programs,
.product,
.modal {
  background: var(--cream);
}

.protocol {
  background: #F3F0F2;
}

.paro-card {
  background: var(--paro);
}

.adult-card {
  background: var(--adult);
}

.child-card {
  background: var(--child);
}

.program-card,
.product {
  border: 1px solid rgba(185, 154, 115, 0.42);
}

.micro-card span,
.step > span {
  color: var(--gold-dark);
}

.step,
.card-link {
  border-color: rgba(185, 154, 115, 0.5);
}

.booking-cta {
  background: var(--pink);
  color: var(--ink);
}

.booking-cta .eyebrow,
.booking-cta h2 em {
  color: var(--blue);
}

footer {
  background: var(--blue);
}

.overlay {
  background: rgba(30, 35, 100, 0.72);
}

[hidden] { display: none !important; }

.entry {
  padding: 110px max(5vw, 24px);
  background: var(--nude);
  scroll-margin-top: 100px;
}

.entry-heading {
  max-width: 1280px;
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px 80px;
  align-items: end;
}

.entry-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.entry-heading h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(48px, 5.3vw, 78px); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.entry-heading h2 em { color: var(--blue); }
.entry-heading > p:last-child { max-width: 430px; font-size: 18px; }
.entry-grid { max-width: 1280px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.entry-card { background: var(--cream); border: 1px solid rgba(185,154,115,.42); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; align-items: flex-start; }
.entry-child { background: #F0ECF9; }
.entry-number { color: var(--gold-dark); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.entry-card h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(32px, 3vw, 46px); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; margin: 26px 0 18px; }
.entry-card p { max-width: 520px; font-size: 17px; margin: 0 0 20px; }
.entry-card .entry-outcome { border-top: 1px solid rgba(185,154,115,.5); padding-top: 20px; margin-top: auto; font-weight: 600; }
.entry-card .btn { margin-top: 10px; }
.entry-footnote { max-width: 1280px; margin: 30px auto 0; color: #5C5663; }
.about { max-width: 1280px; margin: 0 auto; padding: 110px max(5vw, 24px); display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: clamp(42px, 7vw, 100px); align-items: center; scroll-margin-top: 100px; }
.about-photo { position: relative; overflow: hidden; min-height: 0; aspect-ratio: 1596 / 1644; border: 1px solid rgba(185,154,115,.42); border-radius: 34px; background: var(--champagne); }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-copy h2 { margin: 0 0 22px; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(48px, 5vw, 76px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; }
.about-role { margin: 15px 0 30px; color: var(--blue); font-size: 18px; font-weight: 700; }
.about-copy > p:not(.eyebrow):not(.about-role) { max-width: 680px; margin: 0 0 17px; font-size: 17px; }
.about-actions { margin-top: 30px; display: flex; align-items: center; gap: 24px; }
.programs { scroll-margin-top: 100px; }
.section-head-single { grid-template-columns: 1fr; }
.care-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.care-grid .program-card { min-height: 410px; }
.care-grid .program-card h3 { display: flex; align-items: flex-start; min-height: 2.1em; margin: 70px 0 14px; font-size: clamp(30px, 2.6vw, 40px); }
.care-grid .card-link { margin-top: auto; }
.white-card { background: var(--champagne); }
.care-grid .card-link { width: 100%; text-decoration: none; font-size: 15px; }
.program-decision { max-width: 1280px; margin: 22px auto 0; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(185,154,115,.42); border-radius: 24px; background: var(--nude); }
.program-decision b { font-family: 'DM Serif Display', Georgia, serif; font-size: 25px; font-weight: 400; }
.program-decision p { margin: 5px 0 0; max-width: 720px; }
.program-decision .btn { flex: 0 0 auto; }
.program-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--blue); color: var(--blue); background: transparent; text-decoration: none; }

.whitening { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(42px, 5vw, 82px); }
.product-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.product-item { min-width: 0; padding: 16px 16px 20px; display: flex; flex-direction: column; background: var(--cream); border: 1px solid rgba(185,154,115,.42); border-radius: 26px; }
.product-photo { display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; margin-bottom: 18px; padding: 20px; border-radius: 18px; background: #fff; }
.product-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.refill-photo { padding: 14px; }
.refill-photo img { transform: scale(.98); }
.product-type { color: var(--gold-dark); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.product-item h3 { min-height: 2.6em; margin: 8px 0 20px; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(22px, 2vw, 29px); font-weight: 400; line-height: 1.12; }
.product-item .product-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(185,154,115,.35); }
.product-item .product-bottom strong { font-size: 18px; white-space: nowrap; }
.product-order { padding: 11px 15px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.product-order:hover { transform: translateY(-1px); }
.product-note { grid-column: 1 / -1; margin: 4px 2px 0; color: #5C5663; font-size: 14px; }
.pricing { padding: 110px max(5vw, 24px); background: var(--nude); scroll-margin-top: 100px; }
.pricing-head { max-width: 1280px; margin: 0 auto 48px; }
.pricing-head h2, .location h2 { margin: 0; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(48px, 5.3vw, 78px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; }
.pricing-head h2 em, .location h2 em { color: var(--blue); }
.price-list { max-width: 1280px; margin: auto; border-top: 1px solid rgba(128,97,63,.32); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px 118px; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid rgba(128,97,63,.32); }
.price-row h3 { margin: 0 0 3px; font-size: 20px; }
.price-row p { margin: 0; color: #5C5663; }
.price-row > span { color: #5C5663; }
.price-row > strong { font-size: 18px; white-space: nowrap; }
.price-row .btn { padding: 12px 18px; }
.doctor-note.compact { display: block; padding: 22px 28px; }
.inquiry { display: block; padding: 110px max(7vw,28px); text-align: left; }
.inquiry-title { width: min(100%, 900px); margin: 0 auto 24px; }
.inquiry h2 { margin: 0; font-size: clamp(46px, 5vw, 72px); }
.inquiry-form { width: min(100%, 900px); margin: 0 auto; padding: 34px; display: grid; gap: 16px; border-radius: 28px; background: var(--cream); color: var(--ink); }
.inquiry-form label { display: grid; gap: 7px; font-size: 14px; font-weight: 700; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { width: 100%; padding: 13px; border: 1px solid rgba(128,97,63,.32); border-radius: 12px; background: #fff; font: inherit; resize: vertical; }
.inquiry-form .btn { justify-self: start; }
.location { padding: 110px max(5vw,24px); display: grid; grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr); gap: clamp(42px,6vw,86px); align-items: stretch; background: var(--cream); scroll-margin-top: 100px; }
.location-copy { display: flex; flex-direction: column; align-items: flex-start; }
.location-copy > p:not(.eyebrow) { margin: 28px 0 18px; font-size: 18px; }
.transport { margin: 0 0 26px; padding: 20px 0; border-top: 1px solid rgba(128,97,63,.32); border-bottom: 1px solid rgba(128,97,63,.32); }
.transport p { margin: 5px 0 0; }
.map-wrap { min-height: 470px; overflow: hidden; border: 1px solid rgba(185,154,115,.42); border-radius: 30px; background: var(--champagne); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 470px; border: 0; }
.faq { padding: 110px max(5vw,24px); display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: clamp(44px,7vw,100px); background: #fff; scroll-margin-top: 100px; }
.faq-head h2 { margin: 0; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(48px,5.3vw,78px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; }
.faq-head h2 em { color: var(--blue); }
.faq-list { border-top: 1px solid rgba(128,97,63,.32); }
.faq-list details { border-bottom: 1px solid rgba(128,97,63,.32); }
.faq-list summary { padding: 22px 42px 22px 0; position: relative; list-style: none; cursor: pointer; font-size: 18px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 17px; color: var(--blue); font-size: 28px; font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { max-width: 720px; margin: -4px 42px 22px 0; color: #5C5663; }

@media (max-width: 1100px) {
  .about { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 45px; }
  .about-photo { min-height: 0; }
  .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-grid .program-card:last-child { grid-column: 1 / -1; }
  .whitening { grid-template-columns: 1fr; }
  .inquiry, .location { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 750px) {
  .hero { padding-top: 160px; padding-bottom: 36px; }
  .entry { padding: 52px 22px 85px; }
  .entry-heading, .entry-grid { grid-template-columns: 1fr; }
  .entry-heading { gap: 12px; }
  .entry-card { padding: 27px; }
  .about { padding: 85px 22px; grid-template-columns: 1fr; gap: 34px; }
  .about-photo { min-height: 0; aspect-ratio: 1596 / 1644; border-radius: 26px; }
  .about-copy h2 { margin-bottom: 18px; }
  .about-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .care-grid { grid-template-columns: 1fr; }
  .care-grid .program-card,
  .care-grid .program-card:last-child { min-height: 320px; grid-column: auto; }
  .care-grid .program-card h3 { margin-top: 42px; }
  .program-decision { padding: 24px; align-items: flex-start; flex-direction: column; }
  .program-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .product-catalog { grid-template-columns: 1fr; }
  .product-item h3 { min-height: 0; }
  .price-row { grid-template-columns: 1fr auto; gap: 12px 20px; }
  .price-row > div { grid-column: 1 / -1; }
  .price-row .btn { grid-column: 2; grid-row: 2 / span 2; }
  .inquiry, .location { grid-template-columns: 1fr; }
  .inquiry { padding: 85px 22px; }
  .location { padding: 85px 22px; }
  .faq { padding: 85px 22px; }
  .map-wrap, .map-wrap iframe { min-height: 380px; }
}
