/* ==========================================================================
   Dental Studio – homepage
   Desktop (≥1024px) is built 1:1 on the 1440px Figma frame: every size is
   written in design pixels × --u, which scales the whole layout proportionally
   between 1024px and 1440px. Below 1024px --u is 1px and the grids switch to
   tablet / mobile layouts.
   ========================================================================== */

:root {
  --ink: #0d0f10;
  --slate: #4f6466;
  --grey: #eef0f0;
  --ice: #dde7e7;
  --map: #e4e9e9;
  --wall: #323d41;
  --white: #fff;

  --u: min(1px, calc((100vw - 48px) / 1392));
  --gap: calc(8 * var(--u));
  --section-gap: calc(40 * var(--u));
  --r: calc(24 * var(--u));
  --p-xl: calc(40 * var(--u));
  --p-l: calc(32 * var(--u));
  --p-m: calc(28 * var(--u));

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: max(14px, calc(16 * var(--u)));
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 600; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(16 * var(--u)) 24px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
main { display: flex; flex-direction: column; gap: var(--section-gap); }
.page > .footer { margin-top: calc(var(--section-gap) - var(--gap)); }

/* ---------- Shared pieces ---------- */
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--grey);
  isolation: isolate;
}
.bento-block { position: relative; display: grid; gap: var(--gap); }

.display {
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: .86;
  white-space: nowrap;
}
.label {
  font-weight: 500;
  font-size: max(14px, calc(18 * var(--u)));
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border-radius: 1000px;
  font-weight: 500;
  font-size: max(14px, calc(16 * var(--u)));
  letter-spacing: -0.02em;
  line-height: 1.35;
  padding: calc(16 * var(--u)) calc(28 * var(--u));
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--slate); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--white); }
.btn--sm { padding: calc(12 * var(--u)) calc(22 * var(--u)); }
.btn--xs { padding: calc(10 * var(--u)) calc(18 * var(--u)); font-size: max(13px, calc(15 * var(--u))); }
.btn--xl { padding: calc(22 * var(--u)) calc(40 * var(--u)); font-size: max(16px, calc(22 * var(--u))); }
.btn--block { width: 100%; font-size: max(15px, calc(17 * var(--u))); }

.nr {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-weight: 500;
  font-size: max(13px, calc(16 * var(--u)));
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}

.chip {
  display: inline-flex;
  border-radius: 1000px;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  font-weight: 500;
  font-size: max(13px, calc(15 * var(--u)));
  white-space: nowrap;
}
.chip--light { background: var(--white); color: var(--ink); }
.chip--dark { background: rgba(13, 15, 16, .85); color: var(--white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.chip--ghost { background: rgba(255, 255, 255, .16); color: var(--white); }

/* Photo-across-cards: the same image sits in every card of a [data-span] group.
   main.js sizes and offsets it so the cards act as windows onto one picture. */
.span-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  transform-origin: var(--origin, 50% 40%);
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--sc, 1));
  will-change: transform;
}
[data-span] .span-img { visibility: hidden; }
[data-span].is-ready .span-img { visibility: visible; }

.photo-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transform: scale(var(--z, 1));
  transform-origin: var(--zo, 50% 50%);
  transition: transform 1.2s var(--ease-out);
}
.photo-card:hover > img { transform: scale(calc(var(--z, 1) * 1.05)); }

/* ---------- Nav ---------- */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* links stay centred whatever the logo / right widths */
  align-items: center;
  padding: calc(8 * var(--u)) 0 calc(16 * var(--u));
  position: relative;
  z-index: 20;
}
.logo { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 600; font-size: max(18px, calc(22 * var(--u))); letter-spacing: -0.04em; line-height: 1.35; white-space: nowrap; }
.logo img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 11px; min-height: 11px; }
.nav-links { display: flex; gap: calc(36 * var(--u)); font-weight: 500; font-size: max(14px, calc(16 * var(--u))); }
.nav-links a, .footer a, .label a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.nav-links a:hover, .footer a:hover, .label a:hover { background-size: 100% 1px; }
.nav-links a.is-active { background-size: 100% 1.5px; }
.logo { justify-self: start; padding-left: calc(8 * var(--u)); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: calc(20 * var(--u)); }
.nav-phone { font-weight: 500; font-size: max(14px, calc(16 * var(--u))); }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--grey); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

/* ---------- 01 Hero ---------- */
.hero {
  grid-template-rows: repeat(3, calc(60 * var(--u))) calc(604 * var(--u));
}
.strip { border-radius: calc(16 * var(--u)); display: grid; place-items: center; cursor: default; }
.strip-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, .35); z-index: -1; transition: background-color .6s var(--ease); }
.strip:hover .strip-overlay { background: rgba(255, 255, 255, .12); }
.strip-text { font-weight: 600; font-size: max(15px, calc(26 * var(--u))); letter-spacing: -0.04em; line-height: 1.35; white-space: nowrap; transition: letter-spacing .6s var(--ease); }
.strip:hover .strip-text { letter-spacing: -0.02em; }

.hero-main { padding: var(--p-xl); }
.hero-content { height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.hero-lead { font-weight: 500; font-size: max(15px, calc(20 * var(--u))); line-height: 1.3; letter-spacing: -0.01em; }
.hero-title { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.hero-eyebrow { font-weight: 500; font-size: max(14px, calc(18 * var(--u))); }
.hero h1 { font-size: calc(208 * var(--u)); line-height: .84; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero h1 .line > span { display: block; }
.hero-cta {
  position: absolute;
  right: var(--p-xl);
  bottom: var(--p-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(18 * var(--u));
  color: var(--white);
  text-align: left;
}
.hero-msg { font-weight: 600; font-size: calc(48 * var(--u)); line-height: .92; letter-spacing: -0.05em; }
.hero-sub { font-weight: 500; font-size: max(13px, calc(17 * var(--u))); }

/* ---------- 02 De ce ---------- */
.why {
  grid-template-columns: calc(560 * var(--u)) 1fr 1fr;
  grid-template-rows: repeat(2, calc(276 * var(--u)));
}
.why-title { grid-row: span 2; padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; }
.why-title h2 { font-size: calc(112 * var(--u)); }
.benefit { padding: var(--p-l); display: flex; flex-direction: column; justify-content: space-between; transition: transform .5s var(--ease); }
.benefit:hover { transform: translateY(-4px); }
.benefit-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.benefit h3 { font-size: calc(34 * var(--u)); line-height: .95; letter-spacing: -0.03em; }
.benefit-desc { color: rgba(13, 15, 16, .7); }
.benefit-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.benefit:hover .nr { background: var(--ink); color: var(--white); border-color: var(--ink); }
.benefit--ice { background: var(--ice); }
.benefit--slate { background: var(--slate); color: var(--white); }
.benefit--slate .benefit-desc { color: rgba(255, 255, 255, .7); }
.benefit--slate:hover .nr { background: var(--white); color: var(--slate); border-color: var(--white); }
.cabinet { display: flex; align-items: flex-end; padding: calc(20 * var(--u)); }

/* ---------- 03 Tratamente ---------- */
.treatments {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: calc(620 * var(--u)) calc(372 * var(--u));
}
.treatments .card { background: var(--wall); color: var(--white); }
/* soften the photo's left edge so it melts into the wall colour */
.treatments .span-img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
.tr-title-content { height: 100%; padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; }
.tr-title-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tr-title-desc { text-align: right; color: var(--grey); }
.tr-title h2 { font-size: calc(150 * var(--u)); }
.tr-photo { display: flex; align-items: flex-end; padding: var(--p-l); }
.tr-photo-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; font-weight: 500; font-size: max(14px, calc(17 * var(--u))); }
.tr-bottom { grid-column: span 2; }
.tr-items {
  height: 100%;
  padding: calc(20 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(16 * var(--u));
}
.tr-item {
  border-radius: calc(20 * var(--u));
  padding: var(--p-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  color: var(--white);
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), opacity .9s var(--ease) !important;
}
.tr-item-text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.tr-item h3 { font-size: calc(44 * var(--u)); line-height: .92; letter-spacing: -0.05em; white-space: nowrap; }
.tr-item p { font-size: max(13px, calc(15 * var(--u))); opacity: .75; }
.tr-item-bottom { display: flex; align-items: center; justify-content: space-between; }
.tr-item .more { font-weight: 500; font-size: max(13px, calc(15 * var(--u))); }
/* default: glass card · hover / focus: solid white card */
.tr-item:hover, .tr-item:focus-visible { background: var(--white); color: var(--ink); outline: none; }
.tr-item:hover .nr, .tr-item:focus-visible .nr { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- 04 Galerie ---------- */
.gallery { display: flex; flex-direction: column; gap: var(--gap); }
.gallery-top {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, calc(376 * var(--u)));
}
.gal-photo { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: flex-end; padding: var(--p-l); }
.gal-content { height: 100%; padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.gal-heading { font-size: calc(56 * var(--u)); line-height: .9; letter-spacing: -0.05em; white-space: nowrap; }
.gal-results .display { font-size: calc(140 * var(--u)); line-height: .84; }
.note { font-size: max(12px, calc(14 * var(--u))); color: rgba(13, 15, 16, .55); }
.gal-photo-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; font-weight: 500; font-size: max(14px, calc(17 * var(--u))); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); height: calc(300 * var(--u)); }
.case { background: #efefef; display: flex; align-items: flex-end; padding: calc(20 * var(--u)); }
.case--fatete > img { object-position: 50% 36%; }

/* ---------- 05 Echipa ---------- */
.team {
  grid-template-columns: calc(452 * var(--u)) 1fr 1fr;
  grid-template-rows: repeat(2, calc(316 * var(--u)));
}
.team-title { grid-row: span 2; padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; }
.team-title h2 { font-size: calc(128 * var(--u)); }
.doctor { background: #efefef; display: flex; align-items: flex-end; padding: calc(16 * var(--u)); }
.doctor--elena > img { inset: auto; left: -60%; top: -25.2%; width: 210%; height: 210%; max-width: none; }
.doctor:hover.doctor--elena > img { transform: scale(1.04); }
.doctor-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .4s var(--ease);
}
.doctor-name { font-weight: 600; font-size: max(16px, calc(20 * var(--u))); line-height: 1.35; }
.doctor-spec { font-size: max(13px, calc(14 * var(--u))); color: rgba(13, 15, 16, .6); }
.doctor-arrow { width: calc(40 * var(--u)); height: calc(40 * var(--u)); min-width: 32px; min-height: 32px; transition: transform .5s var(--ease); }
.doctor:hover .doctor-label { background: var(--white); }
.doctor:hover .doctor-arrow { transform: rotate(-45deg); }

/* ---------- 06 Prima vizită ---------- */
.visit {
  grid-template-columns: calc(560 * var(--u)) 1fr 1fr;
  grid-template-rows: repeat(2, calc(260 * var(--u)));
}
.visit-title { grid-row: span 2; background: var(--slate); color: var(--white); padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; }
.visit-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.visit-title h2 { font-size: calc(128 * var(--u)); }
.step { padding: var(--p-m); display: flex; flex-direction: column; justify-content: space-between; }
.step--ice { background: var(--ice); }
.step-nr { font-weight: 600; font-size: calc(88 * var(--u)); line-height: .85; letter-spacing: -0.06em; color: var(--slate); transition: transform .6s var(--ease), color .6s var(--ease); }
.step:hover .step-nr { transform: translateX(calc(8 * var(--u))); color: var(--ink); }
.step h3 { font-size: max(22px, calc(30 * var(--u))); letter-spacing: -0.03em; line-height: 1.35; }
.step p { color: rgba(13, 15, 16, .65); margin-top: calc(6 * var(--u)); }

/* ---------- 07 Recenzii ---------- */
.reviews { grid-template-columns: calc(452 * var(--u)) repeat(3, 1fr); height: calc(440 * var(--u)); }
.score { background: var(--ice); padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; }
.score-body { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.score-nr { font-weight: 600; font-size: calc(168 * var(--u)); line-height: .85; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.score-sub { color: rgba(13, 15, 16, .65); }
.review { padding: var(--p-l); display: flex; flex-direction: column; justify-content: space-between; transition: transform .5s var(--ease); }
.review:hover { transform: translateY(-4px); }
.review blockquote { margin-top: calc(20 * var(--u)); font-weight: 500; font-size: max(17px, calc(21 * var(--u))); line-height: 1.2; letter-spacing: -0.03em; }
.author { display: flex; align-items: center; gap: 12px; }
.avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--slate); color: var(--white); font-weight: 600; }
.author b { display: block; font-weight: 600; font-size: max(15px, calc(17 * var(--u))); line-height: 1.35; }
.author small { display: block; font-size: max(13px, calc(14 * var(--u))); color: rgba(13, 15, 16, .6); }

/* ---------- 08 FAQ ---------- */
.faq { grid-template-columns: calc(452 * var(--u)) 1fr; }
.faq-title { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; min-height: calc(584 * var(--u)); }
.faq-title h2 { font-size: calc(84 * var(--u)); line-height: .88; }
.faq-list { display: flex; flex-direction: column; gap: var(--gap); }
.faq-item { transition: background-color .4s var(--ease); }
.faq-item:hover { background: #e7ebeb; }
.faq-item.is-open { background: var(--ice); }
.faq-q {
  width: 100%;
  min-height: calc(96 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(26 * var(--u)) var(--p-m);
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  font-size: max(17px, calc(26 * var(--u)));
  letter-spacing: -0.03em;
  line-height: 1.35;
}
.faq-icon { position: relative; flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 36px; min-height: 36px; transition: transform .5s var(--ease); }
.faq-icon img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s var(--ease); }
.faq-icon .i-minus { opacity: 0; }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-item.is-open .i-plus { opacity: 0; }
.faq-item.is-open .i-minus { opacity: 1; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq-a > p { overflow: hidden; max-width: calc(720 * var(--u)); padding: 0 var(--p-m); color: rgba(13, 15, 16, .7); font-size: max(15px, calc(17 * var(--u))); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { padding-bottom: var(--p-m); }
.faq-item.is-open .faq-q { padding-bottom: calc(14 * var(--u)); }

/* ---------- 09 Programare ---------- */
.booking {
  grid-template-columns: 1fr repeat(2, calc(342 * var(--u)));
  grid-template-rows: calc(436 * var(--u)) calc(216 * var(--u));
}
.book-photo { grid-row: span 2; background: #4a5a5c; color: var(--white); }
.book-photo > img { object-position: 32% 50%; }
.book-overlay { position: absolute; inset: 0; background: rgba(13, 15, 16, .38); z-index: -1; }
.book-content { height: 100%; padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; }
.book-photo h2 { font-size: calc(116 * var(--u)); }
.book-form { grid-column: 2 / span 2; padding: var(--p-l); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.book-form h3 { font-size: max(24px, calc(32 * var(--u))); letter-spacing: -0.03em; line-height: 1.35; margin-bottom: calc(6 * var(--u)); }
.form-row { display: flex; gap: calc(12 * var(--u)); }
.field { position: relative; flex: 1 1 0; min-width: 0; }
.field input, .field select {
  width: 100%;
  height: calc(54 * var(--u));
  min-height: 46px;
  padding: 0 calc(20 * var(--u));
  border: 1.5px solid transparent;
  border-radius: calc(14 * var(--u));
  background: var(--white);
  font-size: max(15px, calc(16 * var(--u)));
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea {
  width: 100%;
  min-height: calc(88 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  border: 1.5px solid transparent;
  border-radius: calc(14 * var(--u));
  background: var(--white);
  font-size: max(15px, calc(16 * var(--u)));
  resize: vertical;
  outline: none;
  display: block;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(79, 100, 102, .15); }
.field input::placeholder, .field textarea::placeholder { color: rgba(13, 15, 16, .45); }
.field select:invalid, .field select:has(option[value=""]:checked) { color: rgba(13, 15, 16, .45); }
.field input:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(79, 100, 102, .15); }
.field--select input, .field--select select { padding-right: 44px; cursor: pointer; }
.field--select > img { position: absolute; right: calc(20 * var(--u)); top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.field.is-invalid input, .field.is-invalid select { border-color: #c4473a; }
.book-form .btn--block { padding: calc(16 * var(--u)) 28px; margin-top: 0; }
.form-note { font-size: max(12px, calc(13 * var(--u))); color: rgba(13, 15, 16, .5); }
.form-note.is-success { color: var(--slate); font-weight: 500; }
.contact { background: var(--ice); padding: var(--p-m); display: flex; flex-direction: column; justify-content: space-between; }
.contact .label { font-size: max(14px, calc(16 * var(--u))); color: rgba(13, 15, 16, .6); }
.contact-info { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.contact-info b { font-weight: 600; font-size: max(17px, calc(20 * var(--u))); line-height: 1.35; }
.contact-info a:not(:has(b)) { color: rgba(13, 15, 16, .65); }
.map { background: var(--map); display: flex; align-items: flex-end; padding: calc(20 * var(--u)); }
.map-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(38 * var(--u)), rgba(255,255,255,.9) calc(38 * var(--u)) calc(40 * var(--u)), transparent calc(40 * var(--u)) calc(50 * var(--u))),
    repeating-linear-gradient(60deg, transparent 0 calc(50 * var(--u)), rgba(255,255,255,.9) calc(50 * var(--u)) calc(52.5 * var(--u)));
}
.map-pin { position: absolute; left: calc(151 * var(--u)); top: calc(60 * var(--u)); width: calc(40 * var(--u)); height: calc(48 * var(--u)); min-width: 30px; min-height: 36px; transition: transform .5s var(--ease); }
.map:hover .map-pin { transform: translateY(-8px); }
.map:hover .btn--light { background: var(--ink); color: var(--white); }

/* ---------- 10 Footer ---------- */
.footer { min-height: calc(420 * var(--u)); padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.footer-cols { display: flex; justify-content: space-between; gap: 24px; font-weight: 500; }
.footer-cols > div { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.footer-h { font-size: max(13px, calc(14 * var(--u))); color: rgba(13, 15, 16, .5); }
.footer-bottom { display: flex; flex-direction: column; gap: calc(12 * var(--u)); container-type: inline-size; }
/* Fills the footer width at every size, like the Figma frame (230.6px across 1312px).
   left: -0.048em re-centres the glyphs, which the negative letter-spacing pushes right. */
.footer-brand { font-weight: 600; font-size: 17.6cqw; line-height: .84; letter-spacing: -0.07em; white-space: nowrap; text-align: center; position: relative; left: -0.048em; }
.footer-legal { display: flex; justify-content: space-between; gap: 16px; font-size: max(12px, calc(14 * var(--u))); color: rgba(13, 15, 16, .55); }

/* ==========================================================================
   Motion – sections appear one by one on scroll
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s var(--ease), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* cards that hold a shared photo are revealed with a wipe, so the picture
   stays aligned across cards while they animate */
.js [data-wipe] {
  clip-path: inset(100% 0 0 0 round var(--r));
  transition: clip-path 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js [data-wipe].is-in { clip-path: inset(0 0 0 0 round var(--r)); }

/* hero intro on page load */
.js .nav[data-intro] { opacity: 0; transform: translateY(-12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js.is-loaded .nav[data-intro] { opacity: 1; transform: none; }
.js .strip[data-intro] { clip-path: inset(0 100% 0 0 round calc(16 * var(--u))); transition: clip-path 1.1s var(--ease-out) calc(.15s + var(--i) * .12s); }
.js .hero-main[data-intro] { clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.3s var(--ease-out) .35s; }
.js.is-loaded .strip[data-intro] { clip-path: inset(0 0 0 0 round calc(16 * var(--u))); }
.js.is-loaded .hero-main[data-intro] { clip-path: inset(0 0 0 0 round var(--r)); }
.js .hero .span-img { --sc: 1.08; transition: transform 1.8s var(--ease-out) .2s; }
.js.is-loaded .hero .span-img { --sc: 1; }
.js .hero.is-parallax .span-img { transition: none; }
.js .hero h1 .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.js .hero h1 .line:nth-child(2) > span { transition-delay: .1s; }
.js.is-loaded .hero h1 .line > span { transform: none; transition-delay: .75s; }
.js.is-loaded .hero h1 .line:nth-child(2) > span { transition-delay: .85s; }
.js .hero-lead, .js .hero-eyebrow, .js .hero-cta > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js.is-loaded .hero-lead, .js.is-loaded .hero-eyebrow, .js.is-loaded .hero-cta > * { opacity: 1; transform: none; }
.js.is-loaded .hero-lead { transition-delay: .9s; }
.js.is-loaded .hero-eyebrow { transition-delay: .7s; }
.js.is-loaded .hero-cta > :nth-child(1) { transition-delay: 1s; }
.js.is-loaded .hero-cta > :nth-child(2) { transition-delay: 1.1s; }
.js.is-loaded .hero-cta > :nth-child(3) { transition-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js [data-reveal], .js [data-wipe], .js [data-intro], .js .hero h1 .line > span,
  .js .hero-lead, .js .hero-eyebrow, .js .hero-cta > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ==========================================================================
   Tablet & mobile (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --u: 1px; --section-gap: 28px; }
  .page { padding: 12px 16px 16px; }

  .nav { display: flex; justify-content: space-between; padding: 4px 0 12px 4px; }
  .nav-links { display: none; }
  .burger { display: block; }
  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    inset: 72px 16px auto;
    z-index: 30;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px rgba(13, 15, 16, .12);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .mobile-menu[hidden] { display: flex; visibility: hidden; }
  .mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .mobile-menu a:not(.btn) { padding: 14px 12px; font-weight: 600; font-size: 22px; letter-spacing: -0.03em; border-radius: 14px; }
  .mobile-menu a:not(.btn):active { background: var(--grey); }
  .mobile-menu .btn { margin-top: 8px; }

  /* hero */
  .hero { grid-template-rows: repeat(3, 48px) minmax(720px, auto); }
  .strip { border-radius: 14px; }
  .strip-text { font-size: 20px; }
  .hero-main { min-height: 720px; padding: 28px; }
  .hero-content { justify-content: flex-start; gap: 20px; }
  .hero-lead { display: none; }
  .hero h1 { font-size: clamp(72px, 14vw, 132px); }
  .hero-cta { left: 28px; right: 28px; bottom: 28px; }
  .hero-msg { font-size: 40px; }

  /* why */
  .why { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(250px, auto); }
  .why-title { grid-row: auto; grid-column: span 2; min-height: 340px; }
  .why-title h2 { font-size: clamp(64px, 13vw, 112px); }
  .benefit h3 { font-size: 30px; }

  /* treatments */
  .treatments { grid-template-columns: 1fr; grid-template-rows: none; }
  .treatments .span-img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
  .tr-title { min-height: 440px; }
  .tr-title h2 { font-size: clamp(72px, 17vw, 150px); }
  .tr-photo { min-height: 560px; }
  .tr-bottom { grid-column: auto; }
  .tr-items { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; }
  .tr-item { min-height: 260px; }
  .tr-item h3 { font-size: 36px; }

  /* gallery */
  .gallery-top { grid-template-columns: 1fr; grid-template-rows: none; }
  .gal-title, .gal-results { min-height: 280px; }
  .gal-photo { grid-column: auto; grid-row: auto; min-height: 640px; }
  .gal-heading { font-size: 44px; }
  .gal-results .display { font-size: clamp(68px, 15vw, 140px); }
  .cases { height: auto; grid-auto-rows: 260px; }

  /* team */
  .team { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 320px; }
  .team-title { grid-row: auto; grid-column: span 2; height: auto; min-height: 280px; }
  .team-title h2 { font-size: clamp(72px, 16vw, 128px); }

  /* visit */
  .visit { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(230px, auto); }
  .visit-title { grid-row: auto; grid-column: span 2; min-height: 380px; }
  .visit-title h2 { font-size: clamp(72px, 16vw, 128px); }
  .step-nr { font-size: 72px; }

  /* reviews */
  .reviews { grid-template-columns: repeat(3, 1fr); height: auto; grid-auto-rows: minmax(360px, auto); }
  .score { grid-column: span 3; min-height: 340px; }
  .score-nr { font-size: clamp(96px, 22vw, 168px); }

  /* faq */
  .faq { grid-template-columns: 1fr; }
  .faq-title { min-height: 300px; }
  .faq-title h2 { font-size: clamp(56px, 12vw, 84px); }
  .faq-q { min-height: 84px; padding: 22px 24px; font-size: 20px; }
  .faq-a > p { padding: 0 24px; }
  .faq-item.is-open .faq-a > p { padding-bottom: 24px; }

  /* booking */
  .booking { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .book-photo { grid-row: auto; grid-column: span 2; min-height: 480px; }
  .book-photo h2 { font-size: clamp(68px, 15vw, 116px); }
  .book-form { grid-column: span 2; }
  .contact, .map { min-height: 220px; }
  .map-pin { left: 50%; top: 56px; margin-left: -20px; }

  /* footer */
  .footer { min-height: 0; padding: 32px 28px 28px; }
  .footer-cols { flex-wrap: wrap; row-gap: 28px; }
  .footer-cols > div { flex: 1 1 40%; }
  .footer-legal { flex-direction: column; gap: 6px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* tablet hero: person on the right, message bottom-left on the grey */
  .hero-cta { right: auto; align-items: flex-start; text-align: left; color: var(--ink); max-width: 46%; }
  .hero-msg { font-size: 36px; }
  .hero-cta .btn--light { background: var(--ink); color: var(--white); }
  .hero-cta .btn--light:hover { background: var(--slate); }
  .hero-sub br { display: none; }
}

@media (max-width: 639px) {
  :root { --r: 20px; --p-xl: 24px; --p-l: 22px; --p-m: 20px; --section-gap: 20px; }
  .page { padding: 8px 12px 12px; }
  .nav-phone { display: none; }
  .logo { font-size: 18px; gap: 7px; }
  .nav-right .btn--sm { padding: 10px 16px; font-size: 14px; }

  .hero { grid-template-rows: repeat(3, 40px) minmax(640px, auto); }
  .strip { border-radius: 12px; }
  .strip-text { font-size: 16px; }
  .hero-main { min-height: 640px; padding: 22px; }
  .hero h1 { font-size: 21vw; }
  .hero-lead { font-size: 15px; }
  .hero-cta { left: 22px; right: 22px; bottom: 22px; gap: 12px; }
  .hero-msg { font-size: 32px; }
  .hero-cta .btn--xl { width: 100%; font-size: 18px; padding: 18px; }

  .why { grid-template-columns: 1fr; }
  .why-title { grid-column: auto; min-height: 300px; }
  .why-title h2 { font-size: 21vw; }
  .benefit { min-height: 230px; }
  .cabinet { min-height: 240px; }

  .tr-title { min-height: 380px; }
  .tr-title-top { flex-direction: column; }
  .tr-title-desc { text-align: left; }
  .tr-title h2 { font-size: 21vw; }
  .tr-photo { min-height: 500px; }
  .tr-photo-bottom { flex-direction: column; align-items: flex-start; }
  .tr-items { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .tr-item { min-height: 210px; }

  .gal-title, .gal-results { min-height: 240px; }
  .gal-heading { font-size: 36px; }
  .gal-results .display { font-size: 21vw; }
  .gal-photo { min-height: 540px; }
  .gal-photo-bottom { flex-direction: column; align-items: flex-start; }
  .cases { grid-template-columns: 1fr; grid-auto-rows: 240px; }

  .team { grid-template-columns: 1fr; grid-auto-rows: 360px; }
  .team-title { grid-column: auto; min-height: 240px; }
  .team-title h2 { font-size: 24vw; }

  .visit { grid-template-columns: 1fr; }
  .visit-title { grid-column: auto; min-height: 340px; }
  .visit-title h2 { font-size: 24vw; }
  .step { min-height: 210px; }

  .reviews { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .score { grid-column: auto; min-height: 300px; }
  .review { min-height: 300px; gap: 28px; }

  .faq-q { font-size: 18px; padding: 20px; min-height: 76px; }
  .faq-a > p { padding: 0 20px; }
  .faq-item.is-open .faq-a > p { padding-bottom: 20px; }

  .booking { grid-template-columns: 1fr; }
  .book-photo, .book-form { grid-column: auto; }
  .book-photo { min-height: 420px; }
  .book-photo h2 { font-size: 17vw; }
  .form-row { flex-direction: column; gap: 10px; }

  .footer { padding: 28px 22px 22px; }
  .footer-cols > div { flex-basis: 100%; }
}

/* ==========================================================================
   Subpages – shared layout, components and overlays
   Same unit system as the homepage: design px × --u on desktop.
   ========================================================================== */

/* ---------- helpers ---------- */
.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.row-end { align-items: flex-end; }
.row-between > .btn { flex-shrink: 0; white-space: nowrap; }
.side-title .display { overflow-wrap: anywhere; }
.muted { color: rgba(13, 15, 16, .62); }
.card--slate .muted, .card--slate .label { color: rgba(255, 255, 255, .72); }
.small { font-size: max(12px, calc(14 * var(--u))); }
.right { text-align: right; }
.card--ice { background: var(--ice); }
.card--slate { background: var(--slate); color: var(--white); }
.lead { font-weight: 500; font-size: max(16px, calc(20 * var(--u))); line-height: 1.3; letter-spacing: -0.01em; }
.h-s { font-weight: 600; font-size: max(19px, calc(24 * var(--u))); letter-spacing: -0.03em; line-height: 1.2; }
.h-m { font-weight: 600; font-size: max(22px, calc(32 * var(--u))); letter-spacing: -0.03em; line-height: 1.1; }
.h-l { font-weight: 600; font-size: max(26px, calc(44 * var(--u))); letter-spacing: -0.05em; line-height: .95; }
.d-xl { font-size: calc(200 * var(--u)); line-height: .84; }
.d-xl--long { font-size: calc(158 * var(--u)); }
.d-l { font-size: calc(168 * var(--u)); line-height: .84; }
.d-m { font-size: calc(96 * var(--u)); line-height: .88; }
.d-s { font-size: calc(76 * var(--u)); line-height: .88; }
.d-xs { font-size: calc(56 * var(--u)); line-height: .92; letter-spacing: -0.05em; white-space: normal; }
.d-xs2 { font-size: calc(72 * var(--u)); line-height: .9; letter-spacing: -0.05em; }
.d-xxs { font-size: max(26px, calc(36 * var(--u))); line-height: 1; letter-spacing: -0.04em; }
.link-arrow { font-weight: 500; font-size: max(14px, calc(16 * var(--u))); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.btn--lg { padding: calc(18 * var(--u)) calc(30 * var(--u)); font-size: max(15px, calc(18 * var(--u))); }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(13, 15, 16, .2); }
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--grey { background: var(--grey); color: var(--ink); }
.btn--grey:hover { background: var(--ice); }
.btn svg { flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip--glass { background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.chip--grey { background: var(--grey); }
.chip--ghost-space { visibility: hidden; padding-left: 0; padding-right: 0; }
.chip--status { display: inline-flex; align-items: center; gap: 8px; }
figcaption.chip--status { white-space: normal; line-height: 1.3; }
.chip--status i, .status-badge i { width: 8px; height: 8px; border-radius: 50%; background: #3bb273; flex: none; }
.big-nr { font-weight: 600; font-size: calc(88 * var(--u)); line-height: .85; letter-spacing: -0.06em; color: var(--slate); }
.big-nr--s { font-size: calc(56 * var(--u)); }
.arrow-ic { flex: none; width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 36px; min-height: 36px; transition: transform .5s var(--ease); }
a:hover > .arrow-ic, a:hover .arrow-ic { transform: rotate(45deg); }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); color: var(--slate); }
.check-list li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; font-size: max(16px, calc(20 * var(--u))); }
.check-list--light li { color: var(--white); }
.check-list--light svg circle { fill: rgba(255, 255, 255, .18); }
.price-big { font-weight: 600; font-size: calc(44 * var(--u)); letter-spacing: -0.05em; line-height: 1; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* breadcrumbs */
.crumbs { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: max(14px, calc(16 * var(--u))); }
.crumbs a { color: rgba(13, 15, 16, .5); transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs > span[aria-hidden] { color: rgba(13, 15, 16, .3); }

/* ---------- treatment hero ---------- */
.p-hero { display: grid; gap: var(--gap); grid-template-columns: calc(916 * var(--u)) 1fr; grid-template-rows: calc(640 * var(--u)) calc(192 * var(--u)); }
.p-hero__title { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; }
.p-hero__bottom { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.p-hero__photo { grid-row: span 2; display: flex; align-items: flex-end; padding: calc(20 * var(--u)); }
.p-hero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.fact { padding: var(--p-m); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.fact--ice { background: var(--ice); }
.fact--slate { background: var(--slate); color: var(--white); }
.fact-n { font-weight: 600; font-size: calc(46 * var(--u)); letter-spacing: -0.05em; line-height: .9; white-space: nowrap; }
.fact-n--l { font-size: calc(72 * var(--u)); }
.fact-d { font-size: max(13px, calc(15 * var(--u))); opacity: .7; }

/* ---------- simple hero (title + side card) ---------- */
.s-hero { display: grid; gap: var(--gap); grid-template-columns: calc(916 * var(--u)) 1fr; height: calc(var(--h, 520) * var(--u)); }
.s-hero__title { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.s-hero__title > div:last-child { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
/* Big titles use line-height .84, so descenders (ț, p, g) hang below the box: leave room for them. */
.s-hero__title h1.display, .p-hero__title h1.display { margin-bottom: .12em; }
.s-hero__title h1.d-xl, .p-hero__title h1.d-xl { margin-bottom: .2em; }
.s-hero__side { display: flex; align-items: flex-end; padding: calc(16 * var(--u)); }
.s-hero__cutout { padding: 0; overflow: hidden; }
.s-hero__cutout img { position: absolute; left: 50%; bottom: 0; width: 165%; max-width: none; transform: translateX(-50%); }
.consult-card { padding: calc(36 * var(--u)); flex-direction: column; align-items: stretch; justify-content: space-between; }
.consult-card .label { margin-bottom: 10px; }
.consult-card .row-between { align-items: center; }

/* ---------- title card + n cards ---------- */
.side-block { display: grid; gap: var(--gap); grid-template-columns: calc(452 * var(--u)) repeat(3, 1fr); min-height: calc(460 * var(--u)); }
.side-title { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.side-title .display { font-size: calc(68 * var(--u)); line-height: .88; }
.side-title-body { display: flex; flex-direction: column; gap: 16px; }
.need { padding: var(--p-m); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; transition: transform .5s var(--ease); }
.need:hover { transform: translateY(-4px); }
.need--ice { background: var(--ice); }
.need h3 { font-size: max(21px, calc(30 * var(--u))); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: calc(10 * var(--u)); }
.need p { color: rgba(13, 15, 16, .65); }
.need--link .arrow-ic { align-self: flex-start; }

/* ---------- feature (photo + explanation) ---------- */
.feature-block { display: grid; gap: var(--gap); grid-template-columns: calc(916 * var(--u)) 1fr; height: calc(640 * var(--u)); }
.feature-photo { background: #e9eded; }
.feature-photo--anno > img { object-position: 0% 50% !important; }
.anno { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 3 / 2; pointer-events: none; }
.anno-pt { position: absolute; display: flex; align-items: center; transform: translate(-7px, -50%); }
.anno-pt i { width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--ink); flex: none; }
.anno-pt i::after { content: ''; position: absolute; left: 14px; top: 50%; width: calc(120 * var(--u)); height: 1.5px; background: var(--white); }
.anno-pt b { margin-left: calc(127 * var(--u)); display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 1000px; background: var(--white); font-weight: 500; font-size: max(13px, calc(15 * var(--u))); white-space: nowrap; box-shadow: 0 8px 24px rgba(13, 15, 16, .08); }
.anno-pt em { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--slate); color: var(--white); font-size: 12px; font-weight: 600; }
.js .anno-pt { opacity: 0; transform: translate(-7px, -30%); transition: opacity .6s var(--ease), transform .8s var(--ease-out); }
.js .is-in .anno-pt { opacity: 1; transform: translate(-7px, -50%); }
.js .is-in .anno-pt:nth-child(2) { transition-delay: .15s; }
.js .is-in .anno-pt:nth-child(3) { transition-delay: .3s; }
.feature-info { padding: calc(36 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.feature-info .label { margin-bottom: 16px; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { display: flex; gap: 16px; padding: calc(18 * var(--u)) 0; border-top: 1px solid rgba(13, 15, 16, .12); }
.feature-list li > span { font-weight: 600; font-size: max(17px, calc(22 * var(--u))); color: var(--slate); line-height: 1.2; }
.feature-list h3 { font-size: max(18px, calc(22 * var(--u))); letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 4px; }
.feature-list p { color: rgba(13, 15, 16, .65); }

/* ---------- steps ---------- */
.steps-block { display: flex; flex-direction: column; gap: var(--gap); }
.steps-banner { background: var(--slate); color: var(--white); padding: var(--p-xl); min-height: calc(248 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.steps-banner .display { font-size: calc(96 * var(--u)); line-height: .86; }
.steps-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; text-align: right; font-weight: 500; font-size: max(15px, calc(18 * var(--u))); color: rgba(255, 255, 255, .85); }
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.step-card { padding: var(--p-m); min-height: calc(320 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.step-card--ice { background: var(--ice); }
.step-card h3 { font-size: max(19px, calc(24 * var(--u))); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 8px; }
.step-card p { color: rgba(13, 15, 16, .65); font-size: max(14px, calc(15 * var(--u))); }
.step-card:hover .big-nr { color: var(--ink); }
.step-card .big-nr { transition: color .5s var(--ease); }

/* ---------- comparison ---------- */
.opt { padding: var(--p-m); display: flex; flex-direction: column; gap: 20px; }
.opt--rec { background: var(--slate); color: var(--white); }
.opt-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.opt-head h3 { font-size: max(21px, calc(26 * var(--u))); letter-spacing: -0.03em; line-height: 1.1; }
.opt dl { margin: 0; }
.opt dl > div { padding: calc(18 * var(--u)) 0; border-top: 1px solid rgba(13, 15, 16, .12); }
.opt--rec dl > div { border-color: rgba(255, 255, 255, .2); }
.opt dt { font-size: max(13px, calc(14 * var(--u))); opacity: .6; margin-bottom: 4px; }
.opt dd { margin: 0; font-weight: 600; font-size: max(18px, calc(24 * var(--u))); letter-spacing: -0.03em; line-height: 1.2; }

/* ---------- doctor + bio ---------- */
.doc-block { display: grid; gap: var(--gap); grid-template-columns: calc(452 * var(--u)) 1fr; height: calc(480 * var(--u)); }
.doc-block .doctor { height: 100%; }
.doc-bio { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.doc-bio blockquote { font-weight: 500; font-size: calc(36 * var(--u)); line-height: 1.15; letter-spacing: -0.03em; max-width: calc(820 * var(--u)); }
.doc-stats { display: flex; gap: calc(40 * var(--u)); }
.doc-stats b { display: block; font-weight: 600; font-size: calc(44 * var(--u)); letter-spacing: -0.05em; line-height: 1; color: var(--slate); }
.doc-stats span { font-size: max(13px, calc(15 * var(--u))); opacity: .65; }

/* ---------- prices ---------- */
.price-block { display: grid; gap: var(--gap); grid-template-columns: calc(452 * var(--u)) 1fr; min-height: calc(460 * var(--u)); }
.price-title { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.price-title .muted { margin-top: 16px; }
.price-list { padding: calc(20 * var(--u)) var(--p-xl) var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.price-list ul { list-style: none; margin: 0; padding: 0; }
.price-list li { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: calc(20 * var(--u)) 0; font-size: max(16px, calc(22 * var(--u))); letter-spacing: -0.02em; }
.price-list li + li { border-top: 1px solid rgba(13, 15, 16, .1); }
.price-list li span { font-weight: 500; }
.price-list li b { font-weight: 600; white-space: nowrap; }
.price-list .row-between { align-items: center; }

/* subpage booking block: long title */
.book-photo--long h2 { font-size: calc(96 * var(--u)); }

/* ---------- tratamente listing ---------- */
.tr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.tr-card { display: flex; flex-direction: column; min-height: calc(460 * var(--u)); padding: 8px; transition: transform .5s var(--ease); }
.tr-card:hover { transform: translateY(-4px); }
.tr-card--ice { background: var(--ice); }
.tr-card__img { position: relative; display: block; height: calc(220 * var(--u)); min-height: 160px; border-radius: calc(18 * var(--u)); overflow: hidden; background: #e4e7e7; }
.tr-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tr-card:hover .tr-card__img img { transform: scale(1.06); }
.tr-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.tr-card__title { display: block; font-weight: 600; font-size: max(21px, calc(28 * var(--u))); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 8px; }
.tr-card__desc { display: block; color: rgba(13, 15, 16, .65); font-size: max(14px, calc(15 * var(--u))); }
.tr-card__foot { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.cta-block { display: grid; gap: var(--gap); grid-template-columns: calc(916 * var(--u)) 1fr; min-height: calc(320 * var(--u)); }
.cta-main { background: var(--slate); color: var(--white); padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.cta-main .label { color: var(--white); }
.cta-side { padding: calc(32 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }

/* ---------- echipa ---------- */
.team-hero { display: grid; gap: var(--gap); grid-template-columns: calc(692 * var(--u)) 1fr; height: calc(620 * var(--u)); }
.team-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--gap); }
.team-tile { display: flex; align-items: flex-end; padding: calc(14 * var(--u)); background: #efefef; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: calc(var(--gap) - var(--section-gap)); }
.stat-row .fact { min-height: calc(232 * var(--u)); }
.doc-row { display: grid; gap: var(--gap); grid-template-columns: calc(452 * var(--u)) 1fr; min-height: calc(560 * var(--u)); scroll-margin-top: 24px; }
.doc-row--flip { grid-template-columns: 1fr calc(452 * var(--u)); }
.doc-row--flip .doc-row__photo { order: 2; }
.doc-row__photo { background: #efefef; }
.doc-row__info { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.doc-row__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.doc-row__mid { display: flex; flex-direction: column; gap: 18px; }
.doc-row__bio { font-weight: 500; font-size: max(17px, calc(22 * var(--u))); line-height: 1.3; letter-spacing: -0.02em; max-width: calc(700 * var(--u)); }
.doc-row:target .doc-row__info { box-shadow: inset 0 0 0 2px var(--slate); }

/* ---------- rezultate ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip--filter { border: 0; cursor: pointer; background: var(--grey); color: var(--ink); gap: 6px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.chip--filter span { opacity: .5; }
.chip--filter:hover { background: var(--ice); }
.chip--filter.is-active { background: var(--ink); color: var(--white); }
.filters--sticky { position: sticky; top: 0; z-index: 10; padding: 10px 0; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin: -10px 0; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.case-card { padding: 8px; display: flex; flex-direction: column; }
.case-card.is-more, .case-card.is-hidden { display: none; }
.case-card__body { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); }
.case-card__body h2 { font-size: max(19px, calc(24 * var(--u))); letter-spacing: -0.03em; line-height: 1.2; }
.case-card__body p { color: rgba(13, 15, 16, .6); font-size: max(13px, calc(15 * var(--u))); }
.case-open { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); }
.case-open:hover .arrow-ic { transform: rotate(45deg); }
.load-more { display: flex; justify-content: center; align-items: center; gap: 16px; }
.load-more.is-done .btn { display: none; }

/* before / after slider */
.ba { position: relative; height: calc(300 * var(--u)); min-height: 220px; border-radius: calc(18 * var(--u)); overflow: hidden; background: var(--grey); --pos: 50%; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(13, 15, 16, .2); pointer-events: none; transition: transform .3s var(--ease); }
.ba:hover .ba-handle { transform: scale(1.08); }
.ba-tag { position: absolute; top: 12px; padding: 6px 12px; border-radius: 1000px; font-weight: 500; font-size: 13px; pointer-events: none; }
.ba-tag--before { left: 12px; background: rgba(13, 15, 16, .7); color: var(--white); }
.ba-tag--after { right: 12px; background: var(--white); color: var(--ink); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-range:focus-visible + .ba-handle, .ba:focus-within .ba-handle { box-shadow: 0 0 0 4px rgba(79, 100, 102, .35); }
.ba--lg { height: 100%; min-height: 0; border-radius: 24px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(13, 15, 16, .94); color: var(--white); display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 24px 40px 28px; opacity: 0; transition: opacity .35s var(--ease); }
.lightbox.is-open { opacity: 1; }
.lb-top { display: flex; justify-content: space-between; align-items: center; }
.lb-count { font-weight: 500; opacity: .7; }
.lb-main { display: grid; grid-template-columns: auto 1fr auto 320px; align-items: center; gap: 16px; min-height: 0; }
.lb-stage { height: min(68vh, 640px); }
.lb-arrow, .icon-btn--dark { width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: var(--white); display: grid; place-items: center; cursor: pointer; transition: background-color .3s var(--ease); }
.lb-arrow:hover, .icon-btn--dark:hover { background: rgba(255, 255, 255, .24); }
.lb-info { align-self: stretch; background: var(--white); color: var(--ink); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.lb-title { font-size: 34px; letter-spacing: -0.05em; line-height: .95; }
.lb-dl { margin: 0; }
.lb-dl > div { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid rgba(13, 15, 16, .1); }
.lb-dl dt { opacity: .6; font-size: 14px; } .lb-dl dd { margin: 0; font-weight: 600; }
.lb-quote { font-weight: 500; line-height: 1.35; flex: 1; }
.credits { margin-top: 8px; font-size: 12px; line-height: 1.5; color: rgba(13, 15, 16, .5); }
.credits a { text-decoration: underline; }
.lb-thumbs { display: flex; gap: 10px; justify-content: center; overflow-x: auto; padding-bottom: 4px; }
.lb-thumbs button { flex: none; width: 120px; height: 80px; border-radius: 14px; overflow: hidden; border: 2px solid transparent; padding: 0; background: none; cursor: pointer; opacity: .45; transition: opacity .3s var(--ease), border-color .3s var(--ease); }
.lb-thumbs button.is-active { opacity: 1; border-color: var(--white); }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- preturi ---------- */
.price-cats { display: flex; flex-direction: column; gap: var(--gap); }
.price-cat { display: grid; gap: var(--gap); grid-template-columns: calc(452 * var(--u)) 1fr; scroll-margin-top: 80px; }
.price-cat__title { padding: calc(32 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.price-cat__title h2 { font-size: max(22px, calc(32 * var(--u))); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 6px; }
.price-cat .price-list { padding: calc(12 * var(--u)) calc(32 * var(--u)); }
.price-cat .price-list li { font-size: max(15px, calc(21 * var(--u))); }
.pay-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pay-card { padding: calc(32 * var(--u)); min-height: calc(240 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }

/* ---------- contact ---------- */
.contact-block { display: grid; gap: var(--gap); grid-template-columns: calc(916 * var(--u)) 1fr; scroll-margin-top: 24px; }
.contact-form { padding: var(--p-xl); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.contact-form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.call-card { padding: var(--p-xl); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.call-card .status-badge { margin-bottom: 16px; }
.call-list { margin: 0; }
.call-list > div { padding: calc(16 * var(--u)) 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.call-list dt { font-size: 14px; opacity: .65; margin-bottom: 2px; }
.call-list dd { margin: 0; font-weight: 600; font-size: max(22px, calc(30 * var(--u))); letter-spacing: -0.03em; }
.call-list .small-dd { font-size: max(17px, calc(22 * var(--u))); }
.info-row { display: grid; gap: var(--gap); grid-template-columns: calc(452 * var(--u)) 1fr 1fr; min-height: calc(300 * var(--u)); scroll-margin-top: 24px; }
.info-card { padding: calc(32 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 20px; }
.info-card > div .muted { margin-top: 6px; }
.hours { list-style: none; margin: 0; padding: 0; width: 100%; }
.hours li { display: flex; justify-content: space-between; padding: 14px 0; font-size: max(17px, calc(20 * var(--u))); font-weight: 500; }
.hours li + li { border-top: 1px solid rgba(13, 15, 16, .12); }
.hours b { font-weight: 600; }

/* ---------- multumim / 404 / legal ---------- */
.thanks-top { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.success-icon { width: 88px; height: 88px; border-radius: 50%; background: var(--slate); display: grid; place-items: center; flex: none; }
.urgent-band { padding: var(--p-xl); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.urgent-band .display { font-size: calc(44 * var(--u)); white-space: normal; }
.cta-main .row-between { flex-wrap: wrap; }
.nf-body { display: flex; flex-direction: column; gap: 20px; }
.nf-code { font-weight: 600; font-size: calc(280 * var(--u)); line-height: .8; letter-spacing: -0.07em; }
.nf-links { display: flex; flex-direction: column; gap: var(--gap); }
.nf-link { flex: 1; padding: var(--p-m); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.nf-link b { display: block; font-size: max(24px, calc(32 * var(--u))); letter-spacing: -0.03em; }
.nf-link span span { opacity: .65; }
.legal-hero { padding: var(--p-xl); min-height: calc(380 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.legal-hero .display { font-size: calc(120 * var(--u)); line-height: .88; }
.legal-body { display: grid; gap: var(--gap); grid-template-columns: calc(452 * var(--u)) 1fr; align-items: start; }
.legal-toc { padding: calc(28 * var(--u)); position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-toc a { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 500; transition: background-color .3s var(--ease); }
.legal-toc a span { color: var(--slate); font-weight: 600; }
.legal-toc a:hover, .legal-toc a.is-active { background: var(--white); }
.legal-help { margin-top: 12px; padding-top: 20px; border-top: 1px solid rgba(13, 15, 16, .1); display: flex; flex-direction: column; gap: 4px; }
.legal-help a { color: var(--slate); font-weight: 500; }
.legal-text { padding: calc(48 * var(--u)) calc(56 * var(--u)); display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
.legal-text section { scroll-margin-top: 24px; max-width: 760px; }
.legal-text h2 { font-size: max(22px, calc(30 * var(--u))); letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 14px; }
.legal-text p, .legal-text li { font-size: max(16px, calc(17 * var(--u))); line-height: 1.6; color: rgba(13, 15, 16, .78); }
.legal-text p + p { margin-top: 10px; }
.legal-text ul { margin: 10px 0 0; padding-left: 20px; }
.legal-text li::marker { color: var(--slate); }

/* ---------- forms (callback) ---------- */
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fgroup { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.flabel { font-weight: 500; font-size: 14px; padding: 0; }
.flabel span { opacity: .45; font-weight: 400; }
.callback .field input, .callback .field textarea { border: 1px solid rgba(13, 15, 16, .1); }
.callback .field input:focus, .callback .field textarea:focus { border-color: var(--ink); }
.field--prefix { display: flex; align-items: center; }
.field--prefix .prefix { position: absolute; left: 18px; font-weight: 500; pointer-events: none; padding-right: 12px; border-right: 1px solid rgba(13, 15, 16, .15); line-height: 1.2; }
.field--prefix input { padding-left: 72px !important; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #c4473a !important; }
.field-error { display: flex; align-items: center; gap: 6px; color: #c4473a; font-weight: 500; font-size: 13px; }
.field-error::before { content: '!'; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 10px; font-weight: 700; }
.chip-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opts--even { display: grid; grid-template-columns: repeat(4, 1fr); }
.drawer .chip-opts--even { grid-template-columns: 1fr 1fr; }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-opt span { display: flex; align-items: center; justify-content: center; text-align: center; padding: 11px 16px; border-radius: 1000px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(13, 15, 16, .12); font-weight: 500; font-size: 15px; transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.chip-opt--sq span { border-radius: 12px; }
.chip-opt:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.chip-opt input:checked + span { background: var(--ink); color: var(--white); box-shadow: none; }
.chip-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(79, 100, 102, .4); }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: rgba(13, 15, 16, .7); position: relative; }
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; }
.check-box { flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(13, 15, 16, .3); background: var(--white) center / 14px no-repeat; transition: background-color .2s var(--ease); }
.check input:checked + .check-box { background-color: var(--ink); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check input:focus-visible + .check-box { box-shadow: 0 0 0 3px rgba(79, 100, 102, .4); }
.check.is-invalid .check-box { box-shadow: inset 0 0 0 1.5px #c4473a; }
.check a { text-decoration: underline; }
.form-alert { width: 100%; padding: 14px 16px; border-radius: 14px; background: rgba(196, 71, 58, .1); color: var(--ink); font-size: 14px; }
.form-alert--warn { background: rgba(183, 121, 31, .12); }
.btn-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--white); animation: spin .8s linear infinite; }
.is-loading .btn-spinner { display: block; }
.is-loading { pointer-events: none; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- booking drawer ---------- */
.icon-btn { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--grey); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .3s var(--ease); }
.icon-btn:hover { background: var(--ice); }
.status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 1000px; background: rgba(59, 178, 115, .12); color: #1e6b43; font-weight: 500; font-size: 14px; }
.status-badge.is-closed { background: rgba(183, 121, 31, .12); color: #7a4e0f; }
.status-badge.is-closed i { background: #b7791f; }
.status-badge--dark { background: rgba(255, 255, 255, .14); color: var(--white); }
.status-badge--dark.is-closed { background: rgba(255, 255, 255, .14); color: var(--white); }
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer-overlay { position: absolute; inset: 0; background: rgba(13, 15, 16, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s var(--ease); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 100%); background: var(--white); border-radius: 28px 0 0 28px; box-shadow: -20px 0 60px rgba(13, 15, 16, .2); transform: translateX(100%); transition: transform .55s var(--ease-out); overflow-y: auto; overscroll-behavior: contain; }
.drawer.is-open .drawer-overlay { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-view { min-height: 100%; padding: 32px 40px 28px; display: flex; flex-direction: column; gap: 18px; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.drawer-head--end { justify-content: flex-end; }
.drawer-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.drawer-title { font-weight: 600; font-size: 44px; letter-spacing: -0.05em; line-height: .95; }
.drawer-form { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.drawer-lead { color: rgba(13, 15, 16, .65); font-size: 17px; }
.drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.drawer-alt { text-align: center; color: rgba(13, 15, 16, .6); font-size: 15px; }
.drawer-alt a { color: var(--ink); font-weight: 600; }
.drawer .field textarea { min-height: 80px; }
.drawer-success .success-icon { margin-top: 8px; }
.drawer-success .drawer-title { font-size: 60px; line-height: .92; }
.success-text { font-weight: 500; font-size: 19px; line-height: 1.35; }
.success-summary { margin: 0; padding: 8px 20px; border-radius: 20px; background: var(--grey); }
.success-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; }
.success-summary > div + div { border-top: 1px solid rgba(13, 15, 16, .1); }
.success-summary dt { color: rgba(13, 15, 16, .6); } .success-summary dd { margin: 0; font-weight: 600; text-align: right; }
.success-spacer { flex: 1; }
.success-label { font-weight: 500; color: rgba(13, 15, 16, .6); font-size: 15px; }
.success-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.is-locked { overflow: hidden; }


/* ---------- sticky mobile bar ---------- */
.sticky-cta { display: none; }

/* ==========================================================================
   Subpages – tablet & mobile
   ========================================================================== */
@media (max-width: 1023px) {
  .d-xl, .d-l { font-size: clamp(72px, 14vw, 132px); }
  .d-xl--long { font-size: clamp(56px, 10.5vw, 100px); }
  .d-m, .legal-hero .display { font-size: clamp(44px, 9vw, 88px); }
  .book-photo--long h2 { font-size: clamp(52px, 10vw, 96px); }
  .d-s, .side-title .display { font-size: clamp(44px, 8vw, 64px); }
  .d-xs { font-size: clamp(34px, 6vw, 48px); }
  .d-xs2 { font-size: clamp(36px, 7vw, 56px); }
  .big-nr { font-size: clamp(48px, 8vw, 72px); }
  .fact-n, .fact-n--l { font-size: clamp(24px, 4.4vw, 44px); }
  .price-big { font-size: 36px; }
  .nf-code { font-size: clamp(120px, 30vw, 220px); }
  .p-hero { grid-template-columns: 1fr; grid-template-rows: none; }
  .p-hero__title { min-height: 420px; gap: 32px; }
  .p-hero__photo { grid-row: auto; min-height: 460px; }
  .s-hero, .team-hero { grid-template-columns: 1fr; height: auto; }
  .s-hero__title { min-height: 380px; }
  .s-hero__side { min-height: 420px; }
  .s-hero__cutout { min-height: 480px; }
  .s-hero__cutout img { width: 120%; }
  .team-tiles { grid-template-rows: 280px 280px; }
  .side-block, .side-block--3 { grid-template-columns: repeat(3, 1fr); min-height: 0; }
  .side-title { grid-column: 1 / -1; min-height: 260px; }
  .need { min-height: 260px; }
  .feature-block { grid-template-columns: 1fr; height: auto; }
  .feature-photo { aspect-ratio: 3 / 2; }
  .steps-banner { flex-direction: column; align-items: flex-start; }
  .steps-banner .display { font-size: clamp(48px, 9vw, 80px); }
  .steps-meta { align-items: flex-start; text-align: left; }
  .steps-meta br { display: none; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .step-card { min-height: 240px; }
  .doc-block { grid-template-columns: 1fr 1fr; height: auto; }
  .doc-block .doctor { min-height: 420px; }
  .doc-bio blockquote { font-size: clamp(20px, 3.2vw, 28px); }
  .doc-bio blockquote br { display: none; }
  .doc-bio .row-between { flex-direction: column; align-items: flex-start; }
  .doc-stats { flex-wrap: wrap; gap: 16px 28px; }
  .doc-stats b { font-size: 32px; }
  .price-block, .price-cat { grid-template-columns: 1fr; }
  .price-title { min-height: 240px; }
  .tr-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
  .tr-card { min-height: 400px; }
  .cta-block { grid-template-columns: 1fr; }
  .cta-main .row-between { flex-direction: column; align-items: flex-start; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-row .fact { min-height: 160px; }
  .doc-row, .doc-row--flip { grid-template-columns: 1fr; }
  .doc-row--flip .doc-row__photo { order: 0; }
  .doc-row__photo { min-height: 460px; }
  .doc-row__info .row-between { flex-direction: column; align-items: flex-start; }
  .lb-main { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .lb-arrow { display: none; }
  .lb-stage { height: 52vh; }
  .lightbox { padding: 16px; overflow-y: auto; }
  .pay-row { grid-template-columns: 1fr; }
  .contact-block { grid-template-columns: 1fr; }
  .info-row { grid-template-columns: 1fr 1fr; }
  .info-row .info-card:first-child { grid-column: 1 / -1; }
  .urgent-band { flex-direction: column; align-items: flex-start; }
  .urgent-band .display { font-size: clamp(30px, 5vw, 40px); }
  .legal-body { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-text { padding: 32px 28px; }
  .anno-pt b { margin-left: 9vw; }
  .anno-pt i::after { width: 8.5vw; }
  .sticky-cta {
    display: flex; gap: 8px; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
    padding: 8px; border-radius: 1000px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(13, 15, 16, .16); transform: translateY(140%); transition: transform .5s var(--ease-out);
  }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta .btn { flex: 1; padding: 14px 12px; }
  .no-sticky .sticky-cta, body.is-locked .sticky-cta { display: none; }
  .page { padding-bottom: 96px; }
  .no-sticky .page { padding-bottom: 16px; }
}

@media (max-width: 639px) {
  .display { white-space: normal; }
  .d-xl { font-size: 20vw; }
  .d-l { font-size: 15.5vw; }
  .legal-hero .display { font-size: 10.5vw; }
  .book-photo--long h2 { font-size: 13vw; }
  .d-xl--long { font-size: 15.5vw; }
  .row-between { flex-wrap: wrap; }
  .p-hero__title .row-end, .s-hero__title .row-end { flex-direction: column; align-items: stretch; }
  .p-hero__title .row-end .btn, .s-hero__title .row-end .btn { width: 100%; }
  .p-hero__photo { min-height: 380px; }
  .p-hero__facts { gap: 8px; }
  .fact { padding: 16px 14px; }
  .fact-n, .fact-n--l { font-size: 19px; white-space: normal; }
  .fact-d { overflow-wrap: anywhere; }
  .fact-d br { display: none; }
  .side-block, .side-block--3 { grid-template-columns: 1fr; }
  .side-title { min-height: 220px; }
  .need { min-height: 0; flex-direction: row; align-items: center; gap: 16px; padding: 20px; }
  .need .big-nr { font-size: 44px; }
  .need h3 br { display: none; }
  .need--link { flex-direction: row-reverse; justify-content: space-between; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 0; flex-direction: row; align-items: center; gap: 16px; }
  .step-card .big-nr { font-size: 44px; }
  .doc-block { grid-template-columns: 1fr; }
  .doc-block .doctor { min-height: 340px; }
  .tr-grid, .case-grid { grid-template-columns: 1fr; }
  .tr-card { min-height: 0; flex-direction: row; align-items: center; }
  .tr-card__img { width: 96px; height: 96px; min-height: 0; flex: none; border-radius: 14px; }
  .tr-card__desc { display: none; }
  .tr-card__body { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 8px 8px 8px 16px; min-width: 0; }
  .tr-card__foot > span { display: block; font-weight: 500; font-size: 14px; opacity: .65; }
  .tr-card__foot { gap: 12px; }
  .tr-card__title { font-size: 19px; margin-bottom: 4px; }
  .team-tiles { grid-template-rows: 220px 220px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .doc-row__photo { min-height: 340px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .filters .chip { flex: none; }
  .ba { height: 260px; }
  .lb-stage { height: 44vh; }
  .lb-thumbs button { width: 80px; height: 56px; }
  .form-2 { grid-template-columns: 1fr; }
  .chip-opts--even { grid-template-columns: 1fr 1fr; }
  .contact-form, .call-card { padding: 22px; }
  .contact-form__foot .btn { width: 100%; }
  .info-row { grid-template-columns: 1fr; }
  .info-row .info-card:first-child { grid-column: auto; }
  .nf-links .nf-link { min-height: 120px; }
  .legal-text { padding: 24px 20px; }
  .anno-pt b { font-size: 11px; padding: 5px 10px 5px 6px; gap: 6px; }
  .anno-pt em { width: 20px; height: 20px; font-size: 10px; }
  .drawer-panel { width: 100%; border-radius: 0; }
  .drawer-view { padding: 16px 20px 20px; }
  .drawer-title { font-size: 40px; }
  .drawer-success .drawer-title { font-size: 48px; }
  .drawer-foot { position: sticky; bottom: 0; background: var(--white); padding: 14px 0 4px; margin: 0; border-top: 1px solid rgba(13, 15, 16, .08); }
  .success-links { grid-template-columns: 1fr; }
}

@media (max-width: 379px) {
  .logo { font-size: 16px; padding-left: 4px; }
  .nav-right { gap: 8px; }
  .nav-right .btn--sm { padding: 9px 12px; font-size: 13px; }
}