/* ShapeLab Aesthetic Clinic: the bespoke look. Brand source: their logo (gold body-curve S in a square frame, gold
   "LAB" plate) and their own posts (espresso black + champagne gold, cream light posts). */
@font-face { font-family: "Marcellus"; src: url("/fonts/marcellus.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-300-600.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant-italic.woff2") format("woff2"); font-style: italic; font-weight: 400 600; font-display: swap; }

:root {
  --sl-night: #16120e;
  --sl-night-2: #211a13;
  --sl-cream: #f7f1e7;
  --sl-sand: #ede2cf;
  --sl-ink: #221b14;
  --sl-muted: #6c5f50;
  --sl-gold: #c9a45c;
  --sl-gold-hi: #f1dca0;
  --sl-gold-deep: #85622a;
  --sl-foil: linear-gradient(135deg, #9c7535 0%, #e9cf8c 28%, #b8893f 52%, #f3dfa4 74%, #a57c38 100%);
  --sl-serif: "Marcellus", Georgia, serif;
  --sl-italic: "Cormorant", Georgia, serif;
  --sl-sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --k-ink: var(--sl-ink);
  --k-paper: #fffcf7;
  --k-surface: var(--sl-sand);
  --k-muted: var(--sl-muted);
  --k-line: #e0d3bd;
  --k-accent: #b08a45;
  --k-accent-2: var(--sl-gold);
  --k-accent-ink: #1b150f;
  --k-dark: var(--sl-night);
  --k-dark-ink: #f6efe3;
  --k-dark-muted: #c8bba7;
  --k-font: var(--sl-sans);
  --k-display: var(--sl-serif);
  --k-display-weight: 400;
  --k-head-em: var(--sl-gold-deep);
  --k-em-style: italic;
  --k-radius: 4px;
  --k-radius-lg: 6px;
  --k-radius-btn: 2px;
  --k-sec-pad: clamp(44px, 7vw, 84px);
  --k-dock-bg: var(--sl-night);
  --k-dock-ink: #f6efe3;
  --k-dock-cta-bg: var(--sl-gold);
  --k-dock-cta-ink: #1b150f;
  --k-fab-bg: var(--sl-night);
  --k-fab-ink: var(--sl-gold-hi);
  --k-form-bg: #fffcf7;
  --k-form-ink: var(--sl-ink);
  --k-form-muted: var(--sl-muted);
  --k-input-bg: #ffffff;
  --k-input-ink: var(--sl-ink);
  --k-cal-bg: #fffcf7;
  --k-cal-day: #f3eadb;

  --p-page: var(--sl-cream);
  --p-consult-card: #fffcf7;
  --p-consult-on: var(--sl-gold-deep);
  --p-consult-seg-on: var(--sl-night);
  --p-consult-seg-on-ink: var(--sl-gold-hi);
  --p-consult-decide-bg: var(--sl-night);
  --p-consult-decide-ink: #f6efe3;
  --p-consult-script: italic 500 1.6rem/1 var(--sl-italic);
  --p-consult-script-ink: var(--sl-gold);
  --p-consult-photo-ratio: 1 / 1;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sl-cream); color: var(--sl-ink); font: 400 16.5px/1.62 var(--sl-sans); }
h1, h2, h3 { font-family: var(--sl-serif); font-weight: 400; }
h1 em, h2 em, .k-head h2 em { font-family: var(--sl-italic); font-style: italic; font-weight: 500; }
.sl-eyebrow { font: 500 .74rem/1.2 var(--sl-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sl-gold-deep); margin: 0 0 12px; }
.k-eyebrow { letter-spacing: .22em; }
.k-btn { letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; font-weight: 500; min-height: 46px; }
.k-btn:not(.k-btn--line) { background: var(--sl-foil); color: #1b150f; border-color: transparent; }
.k-btn:not(.k-btn--line):hover { filter: brightness(1.06); }

/* header on the dark hero */
.k-top { background: rgba(22, 18, 14, .94); color: #f6efe3; border-bottom: 1px solid rgba(201, 164, 92, .25); }
.k-top a { color: inherit; }
.k-logo img { height: 40px; width: auto; display: block; }
.k-top__nav a { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.k-top .k-pill { color: #f6efe3; border-color: rgba(201, 164, 92, .45); }

/* ---------------- HERO: the contour ---------------- */
.sl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sl-hero { position: relative; overflow: hidden; color: #f6efe3; padding: 18px 0 0;
  background: radial-gradient(120% 70% at 78% 30%, #3a2b19 0%, rgba(58, 43, 25, 0) 60%), linear-gradient(180deg, var(--sl-night) 0%, var(--sl-night-2) 100%); }
.sl-hero__grid { display: grid; gap: 18px; }
.sl-hero__copy { position: relative; z-index: 2; }
.sl-hero .sl-eyebrow { color: var(--sl-gold); }
.sl-hero h1 { margin: 0; font-size: clamp(2.35rem, 9.6vw, 5.6rem); line-height: .98; letter-spacing: .01em; text-transform: uppercase; }
.sl-hero h1 span { display: inline-block; }
.sl-hero h1 em { display: block; text-transform: none; font-size: 1.18em; line-height: 1; background: var(--sl-foil); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.sl-hero__sub { margin: 14px 0 18px; max-width: 32em; color: #e3d7c4; font-size: 1.03rem; font-weight: 300; }
.sl-hero__sub em { font-family: var(--sl-italic); font-size: 1.15em; color: var(--sl-gold-hi); }
.sl-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-btn-light { color: #f6efe3 !important; border-color: rgba(241, 220, 160, .55) !important; background: transparent !important; }
.sl-hero__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; font-size: .82rem; letter-spacing: .06em; color: #cdbfa9; }
.sl-hero__facts span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--sl-gold); vertical-align: middle; }
.sl-rate, .sl-rate:visited { color: var(--sl-gold-hi); text-decoration: none; }

/* the panel = the logo's square frame with the S body-curve cutting through it */
.sl-sculpt { position: relative; margin: 0; order: -1; width: 100%; aspect-ratio: 4 / 4.4; max-height: 56svh; justify-self: center; }
.sl-sculpt__frame { position: absolute; inset: 10px -2px -10px 12px; border: 1px solid rgba(201, 164, 92, .75); pointer-events: none;
  clip-path: inset(0 0 100% 0); animation: sl-frame 1.2s .9s var(--k-ease, cubic-bezier(.2, .7, .2, 1)) forwards; }
.sl-sculpt__photos { position: absolute; inset: 0; clip-path: url(#slClip); background: #2a2016;
  -webkit-mask-image: linear-gradient(180deg, #000 0 42%, transparent 58%); mask-image: linear-gradient(180deg, #000 0 42%, transparent 58%);
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%; animation: sl-reveal 1.7s .15s cubic-bezier(.55, .1, .25, 1) forwards; }
.sl-slide { position: absolute; inset: 0; opacity: 0; }
.sl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-slide--1 { opacity: 1; }
.sl-slide--1 img { transform: scale(1.08); animation: sl-settle 2.4s .15s cubic-bezier(.2, .7, .2, 1) forwards; }
.sl-sculpt__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sl-c { fill: none; stroke: url(#slGold); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sl-c--main { stroke-width: 4px; animation: sl-draw 1.7s .15s cubic-bezier(.55, .1, .25, 1) forwards; }
.sl-c--glow { stroke-width: 16px; opacity: .42; filter: blur(7px); animation: sl-draw 1.7s .15s cubic-bezier(.55, .1, .25, 1) forwards; }
.sl-c--two { stroke-width: 1.6px; opacity: .9; animation: sl-draw 1.6s .45s cubic-bezier(.55, .1, .25, 1) forwards; }
.sl-c--sheen { stroke: #fff8de; stroke-width: 4px; stroke-dasharray: .07 1.5; stroke-dashoffset: .07; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 236, 180, .9));
  animation: sl-sheen 2.2s 2s ease-in-out forwards; }
.sl-sculpt.is-live .sl-c--sheen { animation: none; opacity: .95; stroke-dashoffset: var(--sheen, .07); transition: opacity .4s; }

/* the gold LAB plate caption */
.sl-plate { position: absolute; right: 10px; bottom: 12px; display: grid; min-height: 30px; }
.sl-cap { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; background: var(--sl-foil);
  color: #1b150f; font: 500 .72rem/1.2 var(--sl-sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); opacity: 0; }
.sl-cap b { font-family: var(--sl-serif); font-weight: 400; letter-spacing: .08em; }
.sl-cap--1 { opacity: 1; }

.sl-pillars { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: 0 auto; padding: 22px 16px 22px;
  font: 400 .76rem/1.2 var(--sl-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--sl-gold-hi); }
.sl-pillars i { width: 18px; height: 1px; background: var(--sl-gold); opacity: .7; }

@media (min-width: 900px) {
  .sl-hero { padding-top: 40px; }
  .sl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 56px; align-items: center; }
  .sl-sculpt { order: 0; max-height: none; aspect-ratio: 4 / 4.8; max-width: 560px; }
  .sl-hero__copy { padding: 30px 0 30px 0; border-right: 1px solid rgba(201, 164, 92, .3); padding-right: 40px; }
  .sl-pillars { border-top: 1px solid rgba(201, 164, 92, .2); margin-top: 34px; }
}

/* cycle the photos once the reveal is done (CSS only) */
@media (prefers-reduced-motion: no-preference) {
  .sl-slide--1, .sl-cap--1 { animation: sl-fade1 28s 2.4s infinite; }
  .sl-slide--1 { animation-name: sl-fade1; }
  .sl-slide--2, .sl-cap--2 { animation: sl-fade 28s 8.3s infinite backwards; }
  .sl-slide--3, .sl-cap--3 { animation: sl-fade 28s 15.3s infinite backwards; }
  .sl-slide--4, .sl-cap--4 { animation: sl-fade 28s 22.3s infinite backwards; }
}
@keyframes sl-reveal { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes sl-draw { to { stroke-dashoffset: 0; } }
@keyframes sl-settle { to { transform: scale(1); } }
@keyframes sl-frame { to { clip-path: inset(0 0 0 0); } }
@keyframes sl-sheen { 0% { opacity: 0; stroke-dashoffset: .07; } 15% { opacity: .95; } 85% { opacity: .95; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes sl-fade1 { 0%, 21% { opacity: 1; } 25%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sl-fade { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sl-sculpt__photos { animation: none; -webkit-mask-image: none; mask-image: none; }
  .sl-slide--1 img { animation: none; transform: none; }
  .sl-c { animation: none !important; stroke-dashoffset: 0; }
  .sl-c--sheen { display: none; }
  .sl-sculpt__frame { animation: none; clip-path: none; }
}

/* ---------------- goal picker ---------------- */
.sl-goals { background: var(--sl-cream); }
.sl-goals .p-consult__seg { flex-wrap: wrap; border-radius: 14px; background: var(--sl-sand); }
.sl-goals .p-consult__seg button { flex: 1 1 30%; min-height: 44px; font-family: var(--sl-serif); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
@media (min-width: 600px) { .sl-goals .p-consult__seg button { flex: 1 1 0; } .sl-goals .p-consult__seg { border-radius: 999px; } }
.sl-goals .p-consult__look b { font-size: 1.02rem; }
.sl-goals .p-consult__top b { font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.sl-goals .p-consult__look--decide { background: radial-gradient(120% 90% at 80% 0%, #3a2b19, var(--sl-night)); }

/* ---------------- doctor ---------------- */
.sl-doc { background: var(--sl-sand); padding: var(--k-sec-pad) 0; }
.sl-doc__grid { display: grid; gap: 34px; align-items: center; }
.sl-doc__pics { position: relative; padding: 0 22% 28px 0; }
.sl-doc__main { margin: 0; position: relative; }
.sl-doc__main::before { content: ""; position: absolute; inset: -10px 10px 10px -10px; border: 1px solid var(--sl-gold); pointer-events: none; }
.sl-doc__main img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; position: relative; }
.sl-doc__inset { position: absolute; right: 0; bottom: 0; width: 40%; margin: 0; border: 5px solid var(--sl-sand); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); }
.sl-doc__inset img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.sl-doc h2, .sl-menu h2, .sl-visit h2 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.06; margin: 0 0 14px; }
.sl-doc h2 em, .sl-visit h2 em { color: var(--sl-gold-deep); display: block; }
.sl-lede { margin: 0 0 16px; color: #4a3f33; }
.sl-creds { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; }
.sl-creds li { padding: 9px 0 9px 26px; border-bottom: 1px solid #dccdb4; position: relative; font-size: .96rem; }
.sl-creds li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 11px; height: 11px; border: 1px solid var(--sl-gold-deep); transform: rotate(45deg); }
.sl-doc__how { font-size: .94rem; color: #4a3f33; margin: 0 0 18px; }
@media (min-width: 900px) { .sl-doc__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }

/* ---------------- menu ---------------- */
.sl-menu { background: var(--sl-night); color: #f1e8da; padding: var(--k-sec-pad) 0; }
.sl-menu .sl-eyebrow { color: var(--sl-gold); }
.sl-menu h2 em { background: var(--sl-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-menu__card { display: grid; gap: 0; margin-top: 18px; border: 1px solid rgba(201, 164, 92, .45); padding: 6px 20px; position: relative; }
.sl-menu__col { padding: 16px 0; }
.sl-menu__col + .sl-menu__col { border-top: 1px solid rgba(201, 164, 92, .25); }
.sl-menu__col h3 { margin: 0 0 8px; font-size: .86rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sl-gold-hi); }
.sl-menu__col ul { list-style: none; margin: 0; padding: 0; }
.sl-menu__col li { padding: 5px 0; font-size: .96rem; font-weight: 300; border-bottom: 1px dotted rgba(201, 164, 92, .18); }
.sl-menu__foot { margin: 14px 0 0; font-size: .86rem; color: #c8bba7; }
@media (min-width: 900px) {
  .sl-menu__card { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0; }
  .sl-menu__col { padding: 18px 28px; }
  .sl-menu__col + .sl-menu__col { border-top: 0; border-left: 1px solid rgba(201, 164, 92, .25); }
}

/* ---------------- inside (exhibition wall) ---------------- */
.sl-inside { --p-exh-bg: #1d1712; --p-exh-accent: var(--sl-gold); --p-exh-mat: #f3eadb; }

/* ---------------- reviews / booking / visit ---------------- */
.k-reviews { background: var(--sl-sand); }
.k-review { background: #fffcf7; border-top: 3px solid var(--sl-gold); }
.k-stars { color: #b8893f; }
.sl-book { background: var(--sl-cream); }
.sl-book__alt { margin: 16px 0 0; font-size: .92rem; text-align: center; }
.sl-book__alt a { color: var(--sl-gold-deep); }
.sl-visit { background: var(--sl-night); color: #f1e8da; padding: var(--k-sec-pad) 0; }
.sl-visit .sl-eyebrow { color: var(--sl-gold); }
.sl-visit h2 em { color: var(--sl-gold-hi); }
.sl-visit__grid { display: grid; gap: 26px; }
.sl-visit__dl { margin: 0 0 18px; display: grid; gap: 12px; }
.sl-visit__dl dt { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sl-gold); }
.sl-visit__dl dd { margin: 2px 0 0; }
.sl-visit__dl a { color: #f6efe3; }
.sl-visit__dl small { color: #c8bba7; }
.sl-visit__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-visit .k-btn--line { color: #f6efe3; border-color: rgba(241, 220, 160, .55); }
.sl-visit__map { min-height: 300px; border: 1px solid rgba(201, 164, 92, .45); padding: 8px; }
.sl-visit__map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; filter: sepia(.25) saturate(.85); }
@media (min-width: 900px) { .sl-visit__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: stretch; } }
.k-faq { background: var(--sl-cream); }
.k-foot { background: #0f0c09; }

@media (max-width: 599px) {
  .k-top .k-btn { min-height: 40px; padding: 0 12px; font-size: .66rem; letter-spacing: .08em; }
  .k-logo img { height: 34px; }
  .sl-sculpt { aspect-ratio: 1 / 1; max-height: 50svh; }
  .sl-hero .sl-eyebrow { font-size: .66rem; letter-spacing: .16em; }
  .sl-hero__sub { font-size: .98rem; line-height: 1.5; margin: 10px 0 14px; }
  .sl-hero__grid { gap: 14px; }
}
@media (max-width: 599px) { .sl-hide-s { display: none; } }
.sl-hero__ctas .k-btn { flex: 1 1 auto; padding: 0 18px; }
.k-formcard input:not([type=checkbox]):not([type=radio]), .k-formcard select, .k-formcard textarea { border: 1px solid #d8c8ac; }
.k-formcard input:focus, .k-formcard select:focus, .k-formcard textarea:focus { border-color: var(--sl-gold-deep); outline: 2px solid color-mix(in srgb, var(--sl-gold) 40%, transparent); outline-offset: 1px; }
.k-stars { font-size: 1.05rem; letter-spacing: .12em; }