/* ═══════════════════════════════════════════════════════════════════════════
   PODO STEP BY STEP — design system
   Premium light · brand teal #54acbf · Fraunces (display) + Onest (body)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #f7f5ef;
  --paper-2: #fffdf9;
  --line: #e7e0d3;
  --ink: #14262a;
  --ink-soft: #4c5c5e;
  --brand: #54acbf;
  --brand-600: #3f97ab;
  --brand-700: #2f7d8c;
  --brand-deep: #123c44;
  --brand-ink: #0b2a30;
  --mint: #e6f3f2;
  --mint-2: #cfe8e7;
  --gold: #c99a2e;
  --wa: #21b858;

  --font-body: "Onest", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;

  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(18, 60, 68, 0.05), 0 10px 30px -12px rgba(18, 60, 68, 0.14);
  --shadow-lift: 0 2px 6px rgba(18, 60, 68, 0.07), 0 28px 60px -24px rgba(18, 60, 68, 0.32);
  --shadow-glow: 0 12px 36px -10px rgba(84, 172, 191, 0.5);

  --wrap: 1180px;
  --head-h: 78px;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 70px);
  -webkit-text-size-adjust: 100%;
}
html {
  background: var(--paper);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
  overflow-x: clip;
}
/* ── Ambient background — barely-there atmosphere on every page except the
   scroll experience (which has its own stylesheet). Two fixed layers:
   soft brand-tinted light + fine film grain. ─────────────────────────────── */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(72rem 48rem at 10% -8%, color-mix(in oklab, var(--brand) 7%, transparent), transparent 62%),
    radial-gradient(60rem 44rem at 108% 24%, color-mix(in oklab, var(--gold) 6%, transparent), transparent 60%),
    radial-gradient(68rem 52rem at 46% 112%, color-mix(in oklab, var(--brand-700) 6%, transparent), transparent 62%);
}
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--brand-700);
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
::selection {
  background: color-mix(in oklab, var(--brand) 35%, white);
  color: var(--brand-ink);
}
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.skip {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--brand-ink);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 12px 12px;
  transition: top 0.2s;
}
.skip:focus {
  top: 0;
}
.ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}
.star {
  width: 1em;
  height: 1em;
  color: var(--gold);
}
.stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

/* ── Reveal animations (gated on html.js so no-JS/crawlers see everything) ── */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
}
html.js [data-reveal="right"] {
  transform: translateX(40px);
}
html.js [data-reveal="left"] {
  transform: translateX(-40px);
}
html.js [data-reveal="scale"] {
  transform: scale(0.94);
}
html.js [data-reveal].in {
  opacity: 1;
  transform: none;
}
html.js [data-delay="1"] {
  transition-delay: 0.09s;
}
html.js [data-delay="2"] {
  transition-delay: 0.18s;
}
html.js [data-delay="3"] {
  transition-delay: 0.27s;
}
html.js [data-delay="4"] {
  transition-delay: 0.36s;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  .wa-float::before {
    animation: none !important;
  }
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring), background-color 0.2s, border-color 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  box-shadow: 0 16px 44px -10px rgba(84, 172, 191, 0.65);
}
.btn-ghost {
  border-color: color-mix(in oklab, var(--ink) 22%, transparent);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--brand-600);
  color: var(--brand-700);
  background: color-mix(in oklab, var(--mint) 55%, transparent);
}
.btn-dark {
  background: var(--brand-ink);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-dark:hover {
  background: var(--brand-deep);
  box-shadow: var(--shadow-lift);
}
.btn-light {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.35);
}
.btn-light:hover {
  background: var(--mint);
}
.btn-lg {
  padding: 1.1rem 1.8rem;
  font-size: 1.05rem;
}
.btn-sm {
  padding: 0.65rem 1.15rem;
  font-size: 0.92rem;
}

/* ── Pills / labels ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: color-mix(in oklab, var(--mint) 75%, white);
  border: 1px solid var(--mint-2);
  border-radius: var(--r-pill);
  padding: 0.42rem 0.95rem;
  margin: 0 0 1.1rem;
}
.pill .ic {
  width: 1.05em;
  height: 1.05em;
  color: var(--gold);
}
.pill-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--mint-2);
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-head.scrolled {
  border-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(18, 60, 68, 0.25);
}
.head-in {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  height: var(--head-h);
}
.brand img {
  width: 150px;
  height: auto;
}
.nav-desk {
  display: flex;
  gap: 1.7rem;
  margin-inline: auto;
}
.nav-desk a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.99rem;
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.2s;
}
.nav-desk a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--brand-600);
  border-radius: 2px;
  transition: right 0.3s var(--ease-spring);
}
.nav-desk a:hover,
.nav-desk a[aria-current] {
  color: var(--ink);
}
.nav-desk a:hover::after,
.nav-desk a[aria-current]::after {
  right: 0;
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
}
.lang {
  display: flex;
  gap: 2px;
  background: color-mix(in oklab, var(--line) 45%, transparent);
  border-radius: var(--r-pill);
  padding: 3px;
}
.lang a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  transition: background-color 0.2s, color 0.2s;
}
.lang a:hover {
  color: var(--brand-700);
}
.lang a.on {
  background: #fff;
  color: var(--brand-700);
  box-shadow: 0 1px 4px rgba(18, 60, 68, 0.14);
}
.head-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  transition: color 0.2s;
}
.head-tel:hover {
  color: var(--brand-700);
}
.head-tel .ic {
  color: var(--brand-600);
}
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-spring), opacity 0.2s;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mnav {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.6rem;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.mnav.open {
  display: flex;
}
.mnav > a:not(.btn) {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.mnav .btn {
  margin-top: 0.9rem;
  justify-content: center;
}
.mnav-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-weight: 600;
  color: var(--ink);
  padding: 0.7rem;
}
.lang-m {
  align-self: center;
  margin-top: 0.4rem;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: clip;
  padding: clamp(2.6rem, 6vw, 5.2rem) 0 clamp(3rem, 6vw, 5rem);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(52rem 34rem at 88% -12%, color-mix(in oklab, var(--brand) 26%, transparent), transparent 60%),
    radial-gradient(40rem 30rem at -10% 30%, color-mix(in oklab, var(--mint-2) 60%, transparent), transparent 55%),
    radial-gradient(30rem 24rem at 55% 115%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 60%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  mix-blend-mode: multiply;
}
/* The image column gets the larger share (08.08.2026): the real clinic
   photography is the strongest asset on the page, so it leads and the copy
   supports it. Gap tightened slightly to buy the picture more width. */
.hero-grid {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  align-items: center;
  gap: clamp(2rem, 4.2vw, 3.8rem);
}
.hero-title {
  font-size: clamp(2.7rem, 5.3vw, 4.4rem);
  font-weight: 560;
  margin: 0.2rem 0 1.4rem;
}
.hero-title em {
  font-style: italic;
  font-weight: 480;
  color: var(--gold);
}
.hero-title .hl {
  color: var(--brand-600);
  white-space: nowrap;
  background-image: linear-gradient(color-mix(in oklab, var(--brand) 28%, transparent), color-mix(in oklab, var(--brand) 28%, transparent));
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 88%;
}
.lead {
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 34em;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.1rem;
}
.hero-proof {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.9rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.hero-proof strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.hero-visual {
  position: relative;
  min-height: 420px;
}
.hero-media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  /* Slightly less tall than 4/4.4 so the frame reads wider and shows more of
     the treatment room, without pushing the hero past the fold. */
  aspect-ratio: 4 / 4.1;
  box-shadow: var(--shadow-lift);
  border: 6px solid #fff;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video-chip {
  position: absolute;
  left: -1.6rem;
  bottom: 2.4rem;
  width: clamp(110px, 11vw, 148px);
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: var(--shadow-lift);
  transform: rotate(-4deg);
  transition: transform 0.4s var(--ease-spring);
}
.hero-video-chip:hover {
  transform: rotate(-1deg) scale(1.04);
}
.hero-video-chip video {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 14;
  object-fit: cover;
}
.hero-card {
  position: absolute;
  top: 1.6rem;
  right: -1.2rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  max-width: 270px;
  background: color-mix(in srgb, #fff 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.8rem 1rem;
  box-shadow: var(--shadow-soft);
  animation: floaty 5.5s ease-in-out infinite;
}
.hero-card strong {
  display: block;
  font-size: 0.95rem;
}
.hero-card small {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
  display: block;
}
.hero-card-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
}
.hero-card-ic .ic {
  width: 22px;
  height: 22px;
}
.hero-chip {
  position: absolute;
  bottom: -0.9rem;
  right: 1.6rem;
  background: var(--brand-ink);
  color: var(--mint-2);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 0.55rem 1.05rem;
  box-shadow: var(--shadow-soft);
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* ── Sections shared ───────────────────────────────────────────────────────── */
.section {
  padding: clamp(3.4rem, 7vw, 6.2rem) 0;
}
.sec-head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sec-head h2,
.arkada h2,
.cta-band h2 {
  font-size: clamp(1.95rem, 3.4vw, 2.85rem);
}
.sec-sub {
  color: var(--ink-soft);
  font-size: 1.08rem;
  margin-top: 1rem;
}
.sec-head-center {
  margin-inline: auto;
  text-align: center;
}
.sec-cta {
  text-align: center;
  margin-top: 2.6rem;
}

/* ── Trust bar ─────────────────────────────────────────────────────────────── */
.trust {
  /* band + rules fade out before the page edges (client choice, home only) */
  position: relative;
  background: linear-gradient(90deg, transparent, var(--paper-2) 18%, var(--paper-2) 82%, transparent);
}
.trust::before,
.trust::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 6%, var(--line) 25%, var(--line) 75%, transparent 94%);
}
.trust::before {
  top: 0;
}
.trust::after {
  bottom: 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  padding-block: 1.8rem;
}
.trust-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.trust-item h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.trust-item p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 0.2rem;
}
.trust-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--mint);
  color: var(--brand-700);
  border: 1px solid var(--mint-2);
}
.trust-ic .ic {
  width: 22px;
  height: 22px;
}

/* ── Service cards ─────────────────────────────────────────────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.svc-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem 1.25rem;
  color: var(--ink);
  position: relative;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring), border-color 0.25s;
}
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-glow);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
}
.svc-card h3 {
  font-size: 1.18rem;
  font-weight: 560;
}
.svc-card p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
}
.svc-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--mint), color-mix(in oklab, var(--brand) 22%, white));
  color: var(--brand-700);
  border: 1px solid var(--mint-2);
  margin-bottom: 0.5rem;
  transition: transform 0.35s var(--ease-spring);
}
.svc-card:hover .svc-ic {
  transform: rotate(-6deg) scale(1.08);
}
.svc-ic .ic {
  width: 24px;
  height: 24px;
}
.svc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.85rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}
/* No price pill any more (14.08.2026): a lone "Află mai multe" left against a
   space-between row reads as a card missing its other half, and the dashed rule
   divides nothing. Drop the rule and let the link sit tight under the text. */
.svc-foot:not(:has(.svc-price)) {
  border-top: 0;
  padding-top: 0;
  margin-top: 0.15rem;
  justify-content: flex-start;
}
.svc-price {
  color: var(--ink-soft);
}
.svc-price strong {
  color: var(--brand-700);
  font-size: 1.02rem;
}
.svc-go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: var(--brand-700);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s var(--ease-spring);
  white-space: nowrap;
}
.svc-card:hover .svc-go {
  opacity: 1;
  transform: none;
}
/* When the card has no price, the link IS the card's bottom row: hiding it until
   hover leaves visible dead space, and on touch (no hover) it never appears at
   all. Show it at rest and keep the arrow slide as the hover affordance. */
.svc-foot:not(:has(.svc-price)) .svc-go {
  opacity: 1;
  transform: none;
}
.svc-foot:not(:has(.svc-price)) .svc-go .ic {
  transition: transform 0.3s var(--ease-spring);
}
.svc-card:hover .svc-foot:not(:has(.svc-price)) .svc-go .ic {
  transform: translateX(3px);
}
.svc-go .ic {
  width: 1em;
  height: 1em;
}
.svc-card.is-featured {
  background: linear-gradient(165deg, var(--paper-2), color-mix(in oklab, var(--mint) 55%, white));
}
.svc-card.is-featured::before {
  content: "★";
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  color: var(--gold);
  font-size: 0.95rem;
}
.svc-card.is-soon {
  border-style: dashed;
  background: transparent;
  grid-column: span 2;
}
@media (max-width: 640px) {
  .svc-card.is-soon {
    grid-column: auto;
  }
}
.svc-card.is-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.soon-pill {
  display: inline-block;
  background: var(--cream, #fff2df);
  border: 1px solid color-mix(in oklab, var(--gold) 40%, white);
  color: #8a6a1e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
}

/* ── ARKADA dark section ───────────────────────────────────────────────────── */
.arkada {
  position: relative;
  background:
    radial-gradient(46rem 30rem at 110% 0%, rgba(84, 172, 191, 0.22), transparent 60%),
    radial-gradient(36rem 26rem at -8% 100%, rgba(84, 172, 191, 0.14), transparent 55%),
    linear-gradient(150deg, var(--brand-ink), var(--brand-deep));
  color: #eef6f6;
  padding: clamp(3.6rem, 7vw, 6.4rem) 0;
  overflow: clip;
}
.arkada::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.06;
  pointer-events: none;
}
.arkada-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.arkada h2 {
  color: #fff;
}
.hl-gold {
  color: var(--gold);
  font-style: italic;
}
.arkada-body {
  color: color-mix(in srgb, #fff 72%, transparent);
  font-size: 1.08rem;
  margin-top: 1.2rem;
  max-width: 33em;
}
.checks {
  display: grid;
  gap: 0.85rem;
  margin: 1.8rem 0 2.2rem;
}
.checks li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-weight: 500;
}
.checks .ic {
  width: 24px;
  height: 24px;
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: rgba(84, 172, 191, 0.25);
  color: var(--mint-2);
}
.arkada-visual {
  position: relative;
}
.arkada-media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 4.5;
  border: 5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.6);
  transform: rotate(2deg);
}
.arkada-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arkada-badge {
  position: absolute;
  left: -1.1rem;
  bottom: 1.8rem;
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: 0.75rem 1.1rem;
  box-shadow: var(--shadow-lift);
  transform: rotate(-2deg);
}
.arkada-badge strong {
  display: block;
  font-size: 0.95rem;
}
.arkada-badge small {
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
  position: relative;
  z-index: 1;
}
.stat-n {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 520;
  color: var(--mint-2);
  line-height: 1;
  display: block;
}
.stat-l {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.92rem;
  color: color-mix(in srgb, #fff 62%, transparent);
}

/* ── Steps ─────────────────────────────────────────────────────────────────── */
.steps-sec {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}
/* Two columns for the copy + step cards, with the photo spanning both beneath.
   Row gap is tightened separately from the column gap: the copy column is much
   shorter than the steps column, so a large row gap left an obvious void under
   the heading before the photo. */
/* Two columns for the copy + step cards, with the photo spanning both beneath.
   The copy column is much shorter than the three step cards, so it is centred
   against them rather than top-aligned — top-aligning left a visible void under
   the heading once the photo moved out of this column. */
.steps-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  column-gap: clamp(2.2rem, 5vw, 4.5rem);
  row-gap: 0;
  align-items: center;
}
.steps-media,
.steps-list {
  align-self: start;
}
/* Spans BOTH grid columns (08.08.2026): previously nested inside .steps-copy,
   which trapped it in the narrow left column at roughly half the width it
   deserved. The clinic photography is what sells, so it gets the full content
   width beneath the copy and the three steps. Wider ratio suits the room shot. */
.steps-media {
  grid-column: 1 / -1;
  /* Sits directly under the taller of the two columns; the row-gap is 0 so
     this margin is the only spacing and stays predictable. */
  margin: clamp(2.4rem, 3.6vw, 3.4rem) 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 8;
  box-shadow: var(--shadow-lift);
}
/* <picture> is an inline wrapper by default and would not fill the figure. */
.steps-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.steps-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.steps-list {
  display: grid;
  gap: 1rem;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.7rem;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.step:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-soft);
}
.step-n {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  font-weight: 420;
  color: color-mix(in oklab, var(--brand) 55%, var(--line));
  line-height: 1;
  align-self: start;
}
.step h3 {
  font-size: 1.3rem;
}
.step p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin-top: 0.3rem;
}

/* ── Gallery ───────────────────────────────────────────────────────────────── */
.gallery-sec {
  background: var(--paper);
}
.shots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.shot {
  position: relative;
  border: none;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
  background: var(--mint);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-spring);
}
.shot:hover img {
  transform: scale(1.06);
}
.shot-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(to top, rgba(11, 42, 48, 0.82), rgba(11, 42, 48, 0.06) 55%, transparent);
  color: #fff;
  text-align: left;
}
.shot-overlay small {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mint-2);
}
.shot-overlay strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 520;
}
.lightbox[hidden] {
  display: none;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 42, 48, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox figure {
  margin: 0;
  max-width: min(760px, 88vw);
}
.lightbox img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 14px;
}
.lightbox figcaption {
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  margin-top: 0.9rem;
}
.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.06);
}
.lb-close {
  top: 1.2rem;
  right: 1.2rem;
  font-size: 1.1rem;
}
.lb-prev {
  left: 1rem;
}
.lb-next {
  right: 1rem;
}

/* ── Reviews ───────────────────────────────────────────────────────────────── */
.reviews-sec {
  /* teal-wash watercolor under a heavy cream veil — barely-there texture */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 32%, transparent), color-mix(in srgb, var(--paper) 38%, transparent)),
    url("../img/bg/teal-wash.webp") center / cover no-repeat;
  border-top: 1px solid var(--line);
}
.rating-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  color: var(--ink-soft);
}
.rating-line strong {
  color: var(--ink);
  font-size: 1.15rem;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.review {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.7rem 1.5rem;
  position: relative;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.review:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.review-mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.6;
  color: color-mix(in oklab, var(--brand) 55%, white);
  display: block;
  margin-bottom: 0.9rem;
}
.review p {
  font-size: 0.99rem;
  color: var(--ink);
  flex: 1;
}
.review footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.review cite {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq-list {
  display: grid;
  gap: 0.75rem;
}
.faq-item {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: clip;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item:has(.faq-q[aria-expanded="true"]) {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: var(--shadow-soft);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  padding: 1.05rem 1.25rem;
}
.faq-q:hover {
  color: var(--brand-700);
}
.faq-x {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
}
.faq-x::before,
.faq-x::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 14px;
  height: 2px;
  background: var(--brand-600);
  border-radius: 2px;
  translate: -50% -50%;
  transition: rotate 0.3s var(--ease-spring);
}
.faq-x::after {
  rotate: 90deg;
}
.faq-q[aria-expanded="true"] .faq-x::after {
  rotate: 0deg;
}
.faq-a {
  padding: 0 1.25rem 1.15rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* ── CTA band ──────────────────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: clip;
  border-radius: 32px;
  padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.4rem, 5vw, 4rem);
  text-align: center;
  color: #eef6f6;
  background: linear-gradient(150deg, var(--brand-ink), var(--brand-deep) 60%, var(--brand-700));
  box-shadow: var(--shadow-lift);
}
.cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30rem 20rem at 85% 10%, rgba(84, 172, 191, 0.35), transparent 60%),
    radial-gradient(24rem 18rem at 8% 90%, rgba(201, 154, 46, 0.18), transparent 60%);
}
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.06;
}
.cta-band > * {
  position: relative;
}
.cta-band h2 {
  color: #fff;
}
.cta-band > p {
  color: color-mix(in srgb, #fff 75%, transparent);
  max-width: 34em;
  margin: 1rem auto 0;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 2.1rem;
}
.cta-or {
  color: color-mix(in srgb, #fff 55%, transparent);
  font-size: 0.95rem;
}
.cta-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-weight: 600;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.cta-tel:hover {
  border-color: #fff;
}

/* ── Page hero (inner pages) ──────────────────────────────────────────────── */
.page-hero {
  position: relative;
  overflow: clip;
  /* Slightly deeper than before so the widened image column has room to grow
     rather than being capped by the section's own vertical padding. */
  padding: clamp(2.2rem, 5vw, 4.2rem) 0 clamp(2.4rem, 5vw, 4rem);
}
/* Image column widened from 0.75fr (08.08.2026): at the old ratio the real
   clinic photo was squeezed into a narrow third of the row and read as a
   thumbnail beside the heading. The photography is the draw, so it now takes
   close to half the row on the services and contact page headers. */
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 4.2vw, 3.6rem);
  align-items: center;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 560;
  margin: 0.2rem 0 1.1rem;
}
.page-hero-media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 5 / 3.9;
  border: 6px solid #fff;
  box-shadow: var(--shadow-lift);
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Contact hero, 24.09.2026 (Arsenie): the reception photo grows into the empty page
   margin right of the content column instead of sitting as a ~520px card. It keeps its
   left edge, bleeds right by the margin width (minus a 1rem gutter) and is capped at
   760px: clinic-interior.jpg holds ~1200px of real detail (an upscaled 1200px crop of
   Camelia's photo), so 760px stays sharp on 1x and 1.5x screens. Below 1000px every
   page-hero-media is hidden (media query further down), so phones are unchanged.
   .page-hero's overflow: clip keeps the bleed from ever causing a horizontal scroll. */
@media (min-width: 1001px) {
  .page-hero--contact .page-hero-media {
    width: min(760px, calc(100% + max(0px, (100vw - var(--wrap)) / 2 - 1rem)));
  }
}
.page-hero-slim {
  padding-bottom: 1.6rem;
}
.crumbs {
  display: flex;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}
.crumbs a {
  color: var(--ink-soft);
}
.crumbs a:hover {
  color: var(--brand-700);
}

/* ── Services page ─────────────────────────────────────────────────────────── */
.chips-bar {
  position: sticky;
  top: var(--head-h);
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.chips-scroll {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-block: 0.75rem;
  scrollbar-width: none;
}
.chips-scroll::-webkit-scrollbar {
  display: none;
}
/* desktop: show every chip (wrap, centered); mobile keeps the swipe row */
@media (min-width: 900px) {
  .chips-scroll {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
  }
}
.chip {
  flex: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.42rem 1rem;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.chip:hover,
.chip.on {
  color: var(--brand-700);
  border-color: var(--brand);
  background: var(--mint);
}
.cats-wrap {
  padding-block: clamp(2.4rem, 5vw, 4rem) 1rem;
}
.cat {
  scroll-margin-top: calc(var(--head-h) + 76px);
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}
/* Without a price table, a category is only a heading and two lines, so the
   table-sized rhythm above leaves the page looking empty (14.08.2026). */
.cat:not(:has(.price-list)) {
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
  padding-bottom: clamp(1.4rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.cat:not(:has(.price-list)):last-of-type {
  border-bottom: 0;
}
.cat-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: start;
  margin-bottom: 1.3rem;
}
/* The third column held the "de la X lei" pill, which no longer exists. */
.cat-head:not(:has(.cat-from)) {
  grid-template-columns: auto 1fr;
}
.cat:not(:has(.price-list)) .cat-head {
  margin-bottom: 0.6rem;
}
.cat-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
  padding-left: calc(44px + 1.2rem);
}
.cat-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
}
.cat-head > div > p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin-top: 0.5rem;
  max-width: 56em;
}
.cat-from {
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--mint);
  border: 1px solid var(--mint-2);
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem;
  white-space: nowrap;
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
}
.cat-from strong {
  color: var(--brand-700);
  font-size: 1.02rem;
}
.price-list {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: clip;
}
.price-row {
  display: grid;
  grid-template-columns: 1fr 140px 190px;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.4rem;
}
.price-row + .price-row {
  border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.price-row:not(.price-head):hover {
  background: color-mix(in oklab, var(--mint) 40%, transparent);
}
.price-head {
  background: color-mix(in oklab, var(--mint) 55%, white);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  padding-block: 0.65rem;
}
.pr-name {
  font-weight: 500;
}
.pr-dur {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.pr-price {
  text-align: right;
  font-weight: 700;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.price-head .pr-price {
  color: var(--brand-700);
}
.price-note {
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--brand);
  background: var(--paper-2);
  border-radius: 0 12px 12px 0;
  padding: 0.9rem 1.2rem;
  max-width: 760px;
}
.soon-sec {
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.soon-sec h2 {
  font-size: 1.7rem;
}
.soon-sec > p {
  color: var(--ink-soft);
  margin-top: 0.5rem;
}
.soon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.soon-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  background: transparent;
}
.soon-card h3 {
  font-size: 1.2rem;
}
.soon-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-top: 0.3rem;
}
.soon-card .soon-pill {
  margin-left: auto;
  flex: none;
}
.ask-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
  box-shadow: var(--shadow-soft);
}
.ask-band h2 {
  font-size: 1.55rem;
}
.ask-band p {
  color: var(--ink-soft);
  margin-top: 0.4rem;
  max-width: 34em;
}
.ask-band .cta-actions {
  margin: 0;
}

/* ── Contact page ──────────────────────────────────────────────────────────── */
.contact-wrap {
  padding-block: clamp(2.2rem, 5vw, 3.6rem);
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.contact-cards {
  display: grid;
  gap: 0.9rem;
}
.c-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.3rem;
  color: var(--ink);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, border-color 0.25s;
}
a.c-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
}
.c-card h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-700);
}
.c-card p {
  font-weight: 500;
  margin-top: 0.15rem;
}
.hours-list {
  margin-top: 0.4rem;
  display: grid;
  gap: 0.3rem;
  min-width: 230px;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.95rem;
}
.hours-list span {
  color: var(--ink-soft);
}
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  box-shadow: var(--shadow-lift);
}
.form-card h2 {
  font-size: 1.7rem;
}
.form-sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0.5rem 0 1.5rem;
}
.form-note {
  margin: -0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.form-note a {
  color: var(--brand-700);
  text-decoration: underline;
}
.form-card form {
  display: grid;
  gap: 1.05rem;
}
.form-card label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.form-card input,
.form-card select,
.form-card textarea {
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  width: 100%;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--brand-600);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
}
/* Day + time window side by side: they are one question ("when suits you"),
   and stacking them pushes the send button below the fold on a phone. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}
/* The consent checkbox is a checkbox + text on one line, so it must NOT inherit
   the stacked grid every other label uses. */
.form-card label.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.form-card label.form-consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  margin-top: 0.12rem;
  padding: 0;
  accent-color: var(--brand-600);
  cursor: pointer;
}
.form-card label.form-consent a {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-card label.form-consent strong {
  color: var(--ink);
  font-weight: 600;
}
.form-card textarea {
  resize: vertical;
  min-height: 96px;
}
.form-card .btn {
  justify-content: center;
  margin-top: 0.3rem;
}
.map-frame {
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16 / 6.4;
  background: var(--mint);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Consent placeholder shown instead of the Google Maps iframe until the
   visitor explicitly loads it (no request to Google before that click). */
.map-consent {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
  padding: clamp(1.2rem, 3vw, 2rem);
}
.map-consent-addr {
  margin: 0;
  color: var(--ink-soft);
}
.map-consent-addr strong {
  color: var(--ink);
}
.map-consent-note {
  margin: 0;
  max-width: 34rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.map-consent-note a {
  color: var(--brand-700);
  text-decoration: underline;
}

/* ── Prose (legal) ─────────────────────────────────────────────────────────── */
.prose {
  max-width: 760px;
  padding-block: 1rem 4.5rem;
}
.prose h2 {
  font-size: 1.45rem;
  margin: 2.2rem 0 0.6rem;
}
.prose p {
  color: var(--ink-soft);
}
.prose a {
  color: var(--brand-700);
  text-decoration: underline;
}
.legal-updated {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-foot {
  background: var(--brand-ink);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(3rem, 6vw, 4.6rem) 0 1.6rem;
  margin-top: 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 0.9fr;
  gap: clamp(1.8rem, 4vw, 3rem);
}
.foot-brand p {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 30em;
}
.socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color 0.2s, transform 0.25s var(--ease-spring);
}
.socials a:hover {
  background: var(--brand-700);
  transform: translateY(-3px);
}
.socials .ic {
  width: 19px;
  height: 19px;
}
.foot-col h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-2);
  margin-bottom: 1.1rem;
}
.foot-col ul {
  display: grid;
  gap: 0.55rem;
}
.foot-col a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  transition: color 0.2s;
}
.foot-col a:hover {
  color: #fff;
}
.foot-all {
  font-weight: 600;
  color: var(--brand) !important;
}
.foot-contact li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.foot-contact .ic {
  color: var(--brand);
  margin-top: 3px;
}
.foot-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.93rem;
}
.foot-hours strong {
  color: #fff;
  font-weight: 600;
}
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: 1.4rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
}
.foot-bottom a {
  color: rgba(255, 255, 255, 0.7);
}
.foot-bottom a:hover {
  color: #fff;
}
.foot-bottom p {
  margin: 0;
}
.foot-ids {
  margin-top: 0.3rem !important;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}
.foot-links {
  max-width: 34rem;
  text-align: right;
}
/* Legal column: links + the official ANPC SAL pictogram (added 24.09.2026).
   Grid, not the flex row above: with the registered-office line the left block
   is long enough that flex wrapped the legal column onto its own row and left it
   floating mid-page in FR. */
.foot-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
.foot-legal .foot-links {
  max-width: 26rem;
}
.foot-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}
.foot-sal {
  display: inline-block;
  margin-top: 0.9rem;
  line-height: 0;
  border-radius: 6px;
  transition: transform 0.25s var(--ease-spring);
}
.foot-sal img {
  display: block;
  width: 201px;
  height: 50px;
  border-radius: 4px;
}
.foot-sal:hover {
  transform: translateY(-2px);
}
.foot-sal:active {
  transform: translateY(0) scale(0.98);
}
.foot-sal:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .foot-links {
    text-align: left;
  }
  .foot-legal {
    align-items: flex-start;
  }
  .foot-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Below ~1200px the fixed chat + WhatsApp buttons sit over the footer's right
   edge at the end of the page; room underneath keeps the legal links readable. */
@media (max-width: 1200px) {
  .site-foot {
    padding-bottom: 9.5rem;
  }
}

/* ── Floating WhatsApp ─────────────────────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(33, 184, 88, 0.6);
  transition: transform 0.3s var(--ease-spring);
}
.wa-float:hover {
  transform: scale(1.08);
}
.wa-float .ic {
  width: 30px;
  height: 30px;
}
.wa-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--wa);
  opacity: 0;
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1160px) {
  .head-tel span {
    display: none;
  }
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1000px) {
  .nav-desk,
  .head-tel,
  .lang:not(.lang-m) {
    display: none;
  }
  .burger {
    display: flex;
  }
  .hero-grid,
  .arkada-grid,
  .steps-grid,
  .faq-grid,
  .page-hero-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }
  /* The 16/8 banner ratio is right on a full-width desktop column but renders
     as a thin strip once it drops to phone width, so it is squared up here. */
  .steps-media {
    aspect-ratio: 5 / 3.6;
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .shots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .reviews-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }
  .arkada-visual {
    max-width: 480px;
  }
  .page-hero-media {
    display: none;
  }
  .map-frame {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }
  .brand img {
    width: 128px;
  }
  .btn-sm {
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
  }
  .svc-grid,
  .shots-grid,
  .soon-grid,
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .shots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-card {
    right: 0.4rem;
    max-width: 230px;
  }
  .hero-video-chip {
    left: -0.4rem;
    width: 96px;
  }
  .price-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 0.15rem;
    padding: 0.8rem 1.05rem;
  }
  .price-head {
    display: none;
  }
  .pr-dur {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.84rem;
  }
  .pr-price {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
  .cat-head {
    grid-template-columns: auto 1fr;
  }
  .cat-from {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .foot-grid {
    grid-template-columns: 1fr;
  }
  .foot-bottom {
    flex-direction: column;
  }
  .ask-band {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Pointer spotlight glow (ported from the React "GlowCard"/spotlight-card:
     cursor-tracking radial gradients masked to the border ring). Brand-teal
     with a subtle hue drift driven by the pointer's X position (--gh). ────── */
.glow {
  position: relative;
}
.glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  border: 2px solid transparent;
  background:
    radial-gradient(
        240px 240px at var(--mx, 50%) var(--my, 50%),
        hsl(calc(184 + var(--gh, 0) * 28) 62% 50% / 1),
        hsl(calc(184 + var(--gh, 0) * 28) 62% 50% / 0.35) 35%,
        hsl(calc(184 + var(--gh, 0) * 28) 62% 50% / 0.06) 60%,
        transparent 75%
      )
      border-box,
    radial-gradient(90px 90px at var(--mx, 50%) var(--my, 50%), hsl(0 0% 100% / 0.95), transparent 70%) border-box;
  filter: saturate(1.15) drop-shadow(0 0 10px hsl(calc(184 + var(--gh, 0) * 28) 65% 55% / 0.6));
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--glow-o, 0);
  transition: opacity 0.4s ease;
}
/* Brighter ring + soft outer halo on dark surfaces */
.glow-dark::after {
  background:
    radial-gradient(
        280px 280px at var(--mx, 50%) var(--my, 50%),
        hsl(calc(184 + var(--gh, 0) * 28) 70% 72% / 1),
        hsl(calc(184 + var(--gh, 0) * 28) 70% 72% / 0.3) 40%,
        transparent 72%
      )
      border-box,
    radial-gradient(110px 110px at var(--mx, 50%) var(--my, 50%), hsl(0 0% 100% / 1), transparent 70%) border-box;
  filter: saturate(1.1) drop-shadow(0 0 14px hsl(calc(184 + var(--gh, 0) * 28) 75% 68% / 0.7));
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .glow::after {
    display: none;
  }
}

/* ── Certifications & specialised techniques page ────────────────────────
   Added 18.08.2026 for /certificari/ (+ /en/certifications/, /fr/certifications/).
   Content is dense medical prose, so the job here is reading rhythm: one column,
   generous measure cap, and a clear visual break between technique blocks. */
.hl-brand {
  color: var(--brand-700);
  font-style: italic;
}
.cert-wrap {
  padding-block: clamp(2.4rem, 5vw, 4rem) 1rem;
}
.tech-list {
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 1.8rem);
}
.tech {
  scroll-margin-top: calc(var(--head-h) + 76px);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
/* Hairline of brand colour down the left edge, so a run of blocks reads as a
   sequence rather than five identical cards. */
.tech::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 25%, transparent));
}
.tech-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}
.tech-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--mint), color-mix(in oklab, var(--brand) 22%, white));
  color: var(--brand-700);
  border: 1px solid var(--mint-2);
  flex: none;
}
.tech-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 0.3rem;
}
.tech-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.tech-sub {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0.35rem 0 0;
  max-width: 46em;
}
.tech-cert {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-deep);
  background: color-mix(in oklab, var(--mint) 70%, white);
  border: 1px solid var(--mint-2);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  margin: 1.15rem 0 0;
  width: fit-content;
  max-width: 100%;
}
.tech-cert .ic {
  color: var(--gold);
  flex: none;
  width: 19px;
  height: 19px;
}
.tech-body {
  margin-top: 1.15rem;
  max-width: 68ch;
}
.tech-body p {
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}
.tech-body p:last-child {
  margin-bottom: 0;
}
.tech-body em {
  color: var(--ink);
  font-style: italic;
}
.tech-obj {
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--ink);
  max-width: 68ch;
}
.tech-obj span {
  font-weight: 600;
  color: var(--brand-700);
}

/* ── "Alegem tehnica în funcție de caz" ── the band that answers "which one do I need" */
.choose-band {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  background: var(--brand-deep);
  background-image: var(--noise);
  background-blend-mode: soft-light;
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4.4vw, 3.2rem);
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.choose-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: #fff;
  margin: 0 0 1.1rem;
}
.choose-band p {
  color: color-mix(in srgb, #fff 74%, transparent);
  margin: 0 0 0.8rem;
  max-width: 62ch;
}
.choose-band p:last-child {
  margin-bottom: 0;
}
.choose-band strong {
  color: #fff;
  font-weight: 600;
}

/* ── Biomechanical assessment & custom insoles ─────────────────────── */
.bio-sec {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.bio-closing {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--mint-2);
  background: color-mix(in oklab, var(--mint) 45%, white);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
}
.bio-closing h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
}
.bio-closing p {
  color: var(--ink-soft);
  margin: 0 0 0.8rem;
  max-width: 68ch;
}
.bio-closing em {
  color: var(--ink);
}
.bio-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.45;
  color: var(--brand-deep) !important;
  margin: 1.2rem 0 0 !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--mint-2);
}

@media (max-width: 640px) {
  .tech-head {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .tech-cert {
    border-radius: 14px;
    align-items: flex-start;
  }
  .tech-cert .ic {
    margin-top: 2px;
  }
}


/* ── Camelia's own texts on /servicii/ (24.09.2026) ─────────────────────────
   Service 1 carries her five technique blocks + "Alegem tehnica în funcție de caz";
   service 3 her biomechanics + SIDAS blocks + closing. Same markup as /certificari/,
   with h3 names under the service h2. */
.cat.cat-has-text {
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.cat-tech {
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
}
.cat .choose-band {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.choose-band h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  color: #fff;
  margin: 0 0 1rem;
}
/* A descriptive line of hers that is NOT a certification (e.g. "Evaluare funcțională și
   biomecanică a piciorului și a mersului"): plain italic lead, no certificate pill or icon. */
.tech-lead {
  color: var(--ink);
  font-style: italic;
  font-size: 1rem;
  margin: 1.15rem 0 0;
  max-width: 68ch;
}


/* Home services grid with exactly five cards (24.09.2026: the two "în curând" cards were
   removed, which left one card alone on a second row of four). Desktop: 3 + 2, on a
   6-column track. 641-1160px: 2 + 2 + 1, the last one full width. */
@media (min-width: 1161px) {
  .svc-grid:has(> .svc-card:nth-child(5):last-child) {
    grid-template-columns: repeat(6, 1fr);
  }
  .svc-grid:has(> .svc-card:nth-child(5):last-child) > .svc-card {
    grid-column: span 2;
  }
  .svc-grid:has(> .svc-card:nth-child(5):last-child) > .svc-card:nth-child(n + 4) {
    grid-column: span 3;
  }
}
@media (min-width: 641px) and (max-width: 1160px) {
  .svc-grid:has(> .svc-card:nth-child(5):last-child) > .svc-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}