/* 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; }
/* Pinned walk: start below the sticky header (was centred, so the heading slid under it), smaller frames so the
   whole room fits one screen and the walk is shorter, and room at the bottom so captions clear the chat button. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .sl-inside { --p-exh-h: min(44svh, 400px, calc(100svh - 470px)); --p-exh-gap: clamp(20px, 2.6vw, 40px); }
  .sl-inside .p-exh__room { padding-right: 170px; } /* clear of the fixed Ask ShapeLab button */
  .sl-inside.is-pinned .p-exh__pin { justify-content: flex-start; padding: calc(var(--k-top-h, 67px) + 26px) 0 96px; }
  .sl-inside.is-pinned .k-head { margin-bottom: 22px; }
  .sl-inside .p-exh__piece figcaption { margin-top: 12px; }
}

/* ---------------- 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; }

/* Phones: the chat launcher waits until the hero is scrolled past, so it doesn't sit on the hero buttons
   (the Call / Text / Book bar already covers the first screen). An open panel always stays visible. */
@media (max-width: 719px) {
  .k-chat.sl-chat-wait .k-chat__fab { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
  .k-chat .k-chat__fab { transition: opacity .3s, transform .3s; }
}