/* Anuțoiu Dental, varianta 2: bară laterală și arcade.
   A fixed navy sidebar carries the practice's essentials (open now, phone, hours, sections, a call button); the page scrolls
   beside it on white. Photographs are framed in an arch, the shape of the inner arch in the Anuțoiu logo. Montserrat for
   headings, Inter for reading. Appointments by phone, for a consultation: the call card says whether the practice is open. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 113%; ascent-override: 86%; descent-override: 22%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --side-w: 300px;
  --side: #151a4c;          /* the logo's navy, deep */
  --side-text: #c6cbe6;
  --white: #ffffff;
  --soft: #f3f5fa;
  --ink: #151a3f;
  --text: #333a55;
  --muted: #5d6480;
  --brand: #2e3192;
  --accent: #0f75bd;
  --accent-hover: #0b5f9c;
  --accent-text: #0b62a1;
  --line: #e2e6ee;
  --gold: #f0a535;
  --open: #34c27c;
  --closed: #f08a5d;

  --head: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
  --body: "Inter", "Inter Fallback", Arial, sans-serif;
  --h1: clamp(2.1rem, 1.35rem + 2.2vw, 3.35rem);
  --h2: clamp(1.75rem, 1.25rem + 1.5vw, 2.6rem);
  --small: 0.9375rem;
  --tiny: 0.8125rem;
  --pad: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4rem, 8vw, 7rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgb(15 117 189 / 0.12); scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--white); color: var(--text); font-family: var(--body); font-size: 1.03rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, ul, ol, dl, dd, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
h1, h2, h3, dt { font-family: var(--head); color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
strong { font-weight: 600; color: var(--ink); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 3px; border-radius: 8px; }
.side, .sheet { --focus: #ffffff; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: 1rem; z-index: 100; padding: 0.8rem 1.1rem; border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; flex: none; }

.h1 { font-size: var(--h1); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; }
.h2 { font-size: var(--h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.nw { white-space: nowrap; }
.lead-muted { margin-top: 0.9rem; color: var(--muted); max-width: 36em; }
.lead-muted a { color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.1rem; padding: 0 1.4rem; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--head); font-weight: 600; font-size: 0.9375rem; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 140ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-small { min-height: 2.75rem; padding: 0 1.05rem; font-size: 0.875rem; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-line, .btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-line:hover, .btn-ghost:hover { border-color: #b8c2d4; }
.text-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--head); font-weight: 600; font-size: var(--small); color: var(--accent-text); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- the sidebar ---------- */
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--side-w); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1.75rem; padding: 1.75rem 1.5rem 1.5rem;
  background: var(--side); color: var(--side-text); font-size: var(--small);
  --mark-a: #ffffff; --mark-b: #6db4ea;
}
.side a { color: #fff; }
.side-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.side-brand .brand-mark { width: 2.4rem; height: auto; }
.side-name { display: block; font-family: var(--head); font-weight: 600; font-size: 1.0625rem; color: #fff; }
.side-sub { display: block; font-size: var(--tiny); color: var(--side-text); }
.side-status { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: rgb(255 255 255 / 0.07); color: #fff; font-size: var(--tiny); font-weight: 500; }
.side-status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #8fa0d8; flex: none; }
.side-status.is-open::before { background: var(--open); box-shadow: 0 0 0 3px rgb(52 194 124 / 0.25); }
.side-status.is-closed::before { background: var(--closed); }
.side-label { font-size: var(--tiny); color: var(--side-text); }
.side-phone { display: block; margin-top: 0.15rem; font-family: var(--head); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.01em; text-decoration: none; }
.side-phone:hover { text-decoration: underline; }
.side-small { margin-top: 0.35rem; font-size: var(--tiny); line-height: 1.55; }
.side-small a { text-decoration: none; font-weight: 500; }
.side-nav ul { display: grid; gap: 0.15rem; }
.side-nav a { position: relative; display: block; padding: 0.6rem 0.8rem; border-radius: 10px; color: var(--side-text); text-decoration: none; font-weight: 500; transition: background-color 160ms ease, color 160ms ease; }
.side-nav a:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.side-nav a.is-current { background: rgb(255 255 255 / 0.1); color: #fff; }
.side-nav a.is-current::before { content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 3px; background: #6db4ea; }
.side-foot { margin-top: auto; display: grid; gap: 1rem; }
.side-btn { width: 100%; }

.mobile-top, .dock { display: none; }
.mobile-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-family: var(--head); font-weight: 600; }
.mobile-brand .brand-mark { width: 1.9rem; height: auto; }
.menu-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-family: var(--head); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.sheet { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1.25rem; padding: 0.6rem 1.25rem max(1.5rem, env(safe-area-inset-bottom)); background: var(--side); color: var(--side-text); --mark-a: #fff; --mark-b: #6db4ea; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.sheet .mobile-brand { color: #fff; }
.sheet .menu-link { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.25); }
.sheet-links a { display: block; padding: 0.55rem 0; font-family: var(--head); font-weight: 600; font-size: 1.6rem; color: #fff; text-decoration: none; }
.sheet-call { margin-top: auto; display: grid; gap: 0.6rem; }
.sheet .btn-line { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.25); }

/* ---------- the page beside it ---------- */
.page { margin-left: var(--side-w); }
.page > main > section { padding: var(--section) var(--pad); }

.page > main > section:not(.intro) > *, .foot > * { max-width: 72rem; margin-inline: auto; }
.page > main > section.intro { max-width: calc(72rem + 2 * var(--pad)); margin-inline: auto; }

/* arches: the inner arch of the logo, as a frame */
.arch { position: relative; overflow: hidden; background: var(--soft); border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px; }
.arch picture, .arch img { width: 100%; height: 100%; }
.arch img { object-fit: cover; }

/* ---------- intro ---------- */
.intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; min-height: min(92vh, 54rem); }
.page > main > section.intro { padding-top: clamp(3rem, 7vw, 5.5rem); }
.kicker { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1.25rem; font-size: var(--small); font-weight: 500; color: var(--accent-text); }
.intro-lead { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); max-width: 34em; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.intro-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 2.5rem; }
.intro-facts li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0 clamp(0.9rem, 2vw, 1.75rem); border-left: 1px solid var(--line); }
.intro-facts li:first-child { padding-left: 0; border-left: 0; }
.intro-facts strong { font-family: var(--head); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--brand); white-space: nowrap; }
.intro-facts span { font-size: var(--tiny); line-height: 1.35; color: var(--muted); }
.intro-media { position: relative; justify-self: center; width: min(100%, 28rem); }
/* a second arch, in the soft blue, behind the photograph: the outline reads even where the photo is white */
.intro-media::before { content: ""; position: absolute; inset: -1.1rem -1.1rem 1.1rem 1.1rem; border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px; background: #e6eef9; }
.arch-hero { aspect-ratio: 4 / 5; }
.arch-hero img { object-position: 50% 22%; }
/* the red chair in a second, smaller arch over the corner: the logo's two arches, holding the doctor and the room */
.arch-room { position: absolute; left: -3.25rem; bottom: -1.75rem; z-index: 2; width: 40%; aspect-ratio: 4 / 5; border: 6px solid var(--white); }
.arch-room img { object-position: 73% 50%; }
.seal { position: absolute; right: -1.75rem; top: 34%; z-index: 3; display: grid; place-items: center; align-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--white); box-shadow: 0 18px 40px -16px rgb(21 26 63 / 0.35); text-align: center; line-height: 1.1; }
.seal-n { font-family: var(--head); font-size: 1.85rem; font-weight: 600; color: var(--brand); }
.seal-stars { display: flex; justify-content: center; gap: 1px; margin-top: 0.2rem; color: var(--gold); }
.seal-stars svg { width: 0.75rem; height: 0.75rem; }
/* open right now, on the first screen of a phone (on desktop the sidebar says it) */
.intro-status { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: var(--small); font-weight: 500; }
.intro-status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--closed); flex: none; }
.intro-status.is-open::before { background: var(--open); }
@media (min-width: 1100px) { .intro-status { display: none; } }
.seal-t { margin-top: 0.15rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }

/* ---------- booking: by phone, for a consultation ---------- */
.page > main > section.booking { background: var(--soft); }
.booking-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 72rem; }
.booking-text .lead-muted { max-width: 34em; }
.steps { margin-top: 2rem; display: grid; gap: 1.25rem; counter-reset: none; }
.steps li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.step-n { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--white); color: var(--accent-text); font-family: var(--head); font-weight: 600; font-size: 1.0625rem; box-shadow: inset 0 0 0 1px var(--line); }
.steps h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; padding-top: 0.55rem; }
.steps p { margin-top: 0.25rem; color: var(--muted); font-size: var(--small); }
.steps a { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.steps a:hover { text-decoration: underline; }
/* the call card: the logo's arch, in navy, holding the number */
.call-card {
  position: sticky; top: 2rem; justify-self: center; width: min(100%, 23rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 4.25rem 1.75rem 1.75rem; border-radius: 50% 50% 26px 26px / 11rem 11rem 26px 26px;
  background: var(--side); color: var(--side-text); box-shadow: 0 40px 80px -40px rgb(21 26 63 / 0.55);
  --focus: #fff;
}
.call-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); color: #fff; font-size: var(--tiny); font-weight: 500; }
.call-status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #8fa0d8; flex: none; }
.call-status.is-open::before { background: var(--open); box-shadow: 0 0 0 3px rgb(52 194 124 / 0.25); }
.call-status.is-closed::before { background: var(--closed); }
.call-label { margin-top: 1.5rem; font-size: var(--small); }
.call-number { display: block; margin-top: 0.2rem; font-family: var(--head); font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -0.01em; color: #fff; text-decoration: none; white-space: nowrap; }
.call-number:hover { text-decoration: underline; }
.call-btn { width: 100%; margin-top: 1.25rem; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #e7edf7; }
.call-second { width: 100%; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: var(--small); }
.call-second a { display: block; margin-top: 0.15rem; font-family: var(--head); font-weight: 600; font-size: 1.25rem; color: #fff; text-decoration: none; }
.call-second a:hover { text-decoration: underline; }

/* ---------- equipment ---------- */
/* the list stays in view while the two photographs of the cabinet go by beside it */
.gear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.gear-text { position: sticky; top: 2rem; }
.gear-list { margin-top: 1.75rem; display: grid; }
.gear-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.gear-list li:last-child { border-bottom: 1px solid var(--line); }
.gear-list .ic { width: 2.6rem; height: 2.6rem; padding: 0.65rem; border-radius: 50%; background: var(--soft); color: var(--accent); }
.gear-list h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; padding-top: 0.15rem; }
.gear-list p { margin-top: 0.15rem; color: var(--muted); font-size: var(--small); }
.gear-photos { display: grid; gap: 1.75rem; }
.gear-photo picture { overflow: hidden; border-radius: 22px; background: var(--soft); }
.gear-photo img { width: 100%; }
/* the room under an arch; Dr. Andrei and the X-ray in a plain frame, so the arch does not cut his head */
.gear-room picture { border-radius: 50% 50% 22px 22px / 34% 34% 22px 22px; }
.gear-photo figcaption { margin-top: 0.7rem; font-size: var(--small); color: var(--muted); text-wrap: balance; }

/* ---------- services ---------- */
.services-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; max-width: 72rem; }
.services-media { position: sticky; top: 2rem; }
.arch-tall { aspect-ratio: 3 / 4; border-radius: 50% 50% 22px 22px / 37.5% 37.5% 22px 22px; }
.arch-tall img { object-position: 50% 45%; }
.media-note { margin-top: 1rem; font-size: var(--small); color: var(--muted); max-width: 24em; }
.svc-group { margin-top: 2.5rem; }
.svc-group h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--brand); padding-bottom: 0.85rem; }
.svc-group dl > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.25rem 2rem; padding: 1rem 0; border-top: 1px solid var(--line); transition: background-color 160ms ease; }
.svc-group dl > div:hover { background: var(--soft); }
.svc-group dt { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.svc-group dd { color: var(--muted); font-size: var(--small); }
.urgent-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: #fff3df; color: #5a3800; }
.urgent-row strong { color: #3f2700; }

/* ---------- doctor ---------- */
.page > main > section.doctor { background: var(--soft); }
.doctor-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 72rem; }
.doctor-role { margin-top: 0.5rem; font-family: var(--head); font-weight: 600; font-size: var(--small); color: var(--accent-text); }
.doctor-intro { margin-top: 1.25rem; max-width: 34em; font-size: 1.0625rem; }
.ticks { margin-top: 1.75rem; display: grid; gap: 0.8rem; }
.ticks li { display: flex; gap: 0.8rem; align-items: center; color: var(--ink); font-weight: 500; }
.ticks .ic { width: 2.1rem; height: 2.1rem; padding: 0.5rem; border-radius: 50%; background: var(--white); color: var(--accent); }
/* both doctors at the course; Dr. Alina's portrait in a small arch over the top right corner, where no face is */
.doctor-media { position: relative; padding: 0 3.5rem 0 0; }
.doctor-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--white); position: relative; }
.doctor-photo picture, .doctor-photo img { width: 100%; height: 100%; }
.doctor-photo img { object-fit: cover; object-position: 45% 40%; }
.doctor-photo figcaption { position: absolute; left: 0.9rem; bottom: 0.9rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgb(255 255 255 / 0.95); font-size: var(--tiny); font-weight: 500; color: var(--ink); }
.arch-face { position: absolute; right: 0; top: -2.5rem; z-index: 2; width: clamp(6.5rem, 11vw, 8.5rem); aspect-ratio: 4 / 5; border: 5px solid var(--soft); box-shadow: 0 18px 40px -18px rgb(21 26 63 / 0.4); }

/* ---------- reviews ---------- */
/* the score and what patients write about on the left; one patient's words in a light arch on the right */
.reviews-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "score quote" "themes quote"; gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: start; max-width: 72rem; }
.rv-score { grid-area: score; }
.rv-themes { grid-area: themes; }
.score { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.5rem; }
.score strong { font-family: var(--head); font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--brand); }
.score span { font-family: var(--head); font-weight: 600; color: var(--muted); }
.stars { display: flex; gap: 0.15rem; margin: 0.5rem 0 0.9rem; color: var(--gold); }
.stars svg { width: 1.25rem; height: 1.25rem; }
.score-note { font-size: var(--small); margin-bottom: 1.25rem; }
.rv-quote {
  grid-area: quote; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 24rem; padding: clamp(5rem, 8vw, 6.5rem) clamp(1.5rem, 4vw, 3rem) 2.5rem;
  border-radius: 50% 50% 26px 26px / 11rem 11rem 26px 26px; background: #e6eef9;
}
.rv-stars { display: flex; gap: 0.2rem; color: var(--gold); }
.rv-stars svg { width: 1.1rem; height: 1.1rem; }
.rv-quote blockquote { margin-top: 1.25rem; }
.rv-quote blockquote p { max-width: 18em; font-family: var(--head); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.rv-quote figcaption { margin-top: 1.25rem; font-size: var(--small); color: var(--muted); }
.rv-themes h3 { font-size: 1rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.chips li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem 0.5rem 0.75rem; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: var(--small); font-weight: 500; }
.chips .ic { width: 1rem; height: 1rem; color: var(--accent); }
.rv-note { margin-top: 1rem; font-size: var(--tiny); color: var(--muted); }

/* ---------- FAQ ---------- */
.page > main > section.faq { background: var(--soft); }
.faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; max-width: 72rem; }
.faq-head { position: sticky; top: 2rem; }
.faq-list details { border-bottom: 1px solid #d6dce8; }
.faq-list details:first-child { border-top: 1px solid #d6dce8; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-family: var(--head); font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; background: var(--white); transition: transform 220ms var(--ease), background-color 160ms ease; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 2px; margin: -1px 0 0 -0.375rem; border-radius: 2px; background: var(--accent); }
.plus::after { transform: rotate(90deg); transition: transform 220ms var(--ease); }
.faq-list details[open] .plus { background: var(--accent); }
.faq-list details[open] .plus::before { background: #fff; }
.faq-list details[open] .plus::after { transform: rotate(0deg); background: #fff; }
.faq-list details p { padding: 0 3rem 1.25rem 0; }
.faq-list details a { color: var(--ink); font-weight: 600; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; max-width: 72rem; }
.contact-status { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-weight: 500; color: var(--ink); font-size: var(--small); }
.contact-status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--closed); flex: none; }
.contact-status.is-open::before { background: var(--open); }
.place { display: flex; gap: 1.1rem; align-items: center; margin-top: 1.5rem; }
.arch-mini { flex: none; width: 5.5rem; aspect-ratio: 4 / 5; }
.place h3 { font-size: 1.125rem; font-weight: 600; }
.place p { font-size: var(--small); color: var(--muted); line-height: 1.5; }
.place .place-note { margin-top: 0.35rem; color: var(--ink); font-weight: 500; }
.place-second { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.place-second a { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.place-second a:hover { text-decoration: underline; }
.hours { margin-top: 1.5rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.hours div:last-child { border-bottom: 1px solid var(--line); }
.hours dt { font-family: var(--body); font-weight: 500; }
.lines { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.lines li { display: grid; gap: 0.1rem; }
.lines li > span:first-child { font-size: var(--tiny); color: var(--muted); }
.lines a, .lines .val { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.lines a:hover { text-decoration: underline; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.no-js #incarca-harta { display: none; }
#incarca-harta:disabled { opacity: 0.7; cursor: default; }
.map { position: relative; overflow: hidden; min-height: 28rem; border-radius: 26px; background: #e6ebf2; }
.streetmap, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.has-map .streetmap { visibility: hidden; }
.sm-bld { fill: #d4dbe6; }
.sm-road { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; }
.sm-here { fill: none; stroke: var(--accent); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.sm-pin { fill: var(--brand); stroke: #fff; stroke-width: 6; }
.sm-label { font: 600 19px var(--head); fill: var(--ink); paint-order: stroke; stroke: #e6ebf2; stroke-width: 6px; stroke-linejoin: round; }
.sm-label-here { font-size: 25px; fill: var(--brand); }
.map-note { margin-top: 1rem; font-size: var(--tiny); color: var(--muted); max-width: 72rem; }

/* ---------- the close: the practice's motto and the number, under the logo's arch ---------- */
.page > main > section.close { padding-top: 0; }
.close-arch {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(4.5rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
  border-radius: 50% 50% 32px 32px / clamp(8rem, 16vw, 14rem) clamp(8rem, 16vw, 14rem) 32px 32px;
  background: var(--side); color: var(--side-text);
  --mark-a: #ffffff; --mark-b: #6db4ea; --focus: #ffffff;
}
.close-arch .brand-mark { width: clamp(2.6rem, 4vw, 3.4rem); height: auto; }
.close-arch .h2 { margin-top: 1.4rem; color: #fff; }
.close-lead { margin-top: 0.8rem; max-width: 30em; }
.close-arch .call-status { margin-top: 2rem; }
.close-number { margin-top: 0.6rem; font-family: var(--head); font-weight: 600; font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.9rem); letter-spacing: -0.02em; line-height: 1.1; color: #fff; text-decoration: none; white-space: nowrap; }
.close-number:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }
.btn-line-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.3); }
.btn-line-light:hover { border-color: rgb(255 255 255 / 0.6); }

/* ---------- footer ---------- */
.foot { padding: 2.5rem var(--pad) max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: var(--small); color: var(--muted); }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--head); font-weight: 600; }
.foot-meta { display: grid; gap: 0.35rem; margin-top: 1.25rem; font-size: var(--tiny); }

/* ---------- legal pages (no sidebar) ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / 0.97); box-shadow: 0 1px 0 var(--line); }
.top-inner { width: min(100% - 2.5rem, 72rem); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink); text-decoration: none; }
.brand-mark { width: 2.1rem; height: auto; }
.brand-text { display: grid; line-height: 1.2; }
.brand-name { font-family: var(--head); font-weight: 600; }
.brand-sub { font-size: var(--tiny); color: var(--muted); }
.top-back { margin-left: auto; }
.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 var(--section); }
.legal-inner { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { margin-top: 2.5rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.legal p, .legal ul { margin-top: 1rem; }
.legal ul { list-style: disc; padding-left: 1.25em; display: grid; gap: 0.6rem; }
.legal a { color: var(--ink); font-weight: 600; }
.legal-flag { padding: 1rem 1.25rem; border-radius: 12px; background: #fff3df; color: #6e4300; font-weight: 500; }
.legal-todo { color: var(--muted); }
.foot-legal { padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); }
.foot-legal .foot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 0; }

/* ---------- medium widths ---------- */
/* small laptops: the headline keeps its three lines, the photograph gives way */
@media (min-width: 1100px) and (max-width: 1299px) {
  .intro { grid-template-columns: 1.2fr 0.8fr; }
}
@media (min-width: 700px) and (max-width: 1399px) {
  /* the map under the details, at full width, so the street names keep their size */
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
  .contact-info > h2, .contact-info > .contact-status, .contact-info > .place { grid-column: 1; }
  .contact-info > .hours, .contact-info > .lines, .contact-info > .contact-actions { grid-column: 2; }
  .contact-info > .hours { grid-row: 1 / span 2; margin-top: 0.4rem; }
  /* Focșani beside both the lines and its buttons; Dumitrești on its own row under both columns */
  .contact-info > .place:not(.place-second) { grid-row: span 2; }
  .contact-info > .place-second { grid-column: 1 / -1; }
  .map { min-height: 24rem; }
}

/* ---------- tablet and phone: the sidebar becomes a top bar and a menu ---------- */
@media (max-width: 1099px) {
  html { scroll-padding-top: 4.75rem; }
  body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  body.page-legal { padding-bottom: 0; }
  .side { display: none; }
  .page { margin-left: 0; }
  .mobile-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 4rem; padding: 0 1.25rem; background: rgb(255 255 255 / 0.97); box-shadow: 0 1px 0 var(--line); }
  .intro, .booking-grid, .services-grid, .doctor-grid, .faq-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .intro { min-height: 0; }
  .intro-media { order: -1; width: min(78%, 22rem); }
  .seal { right: -1rem; width: 6.25rem; height: 6.25rem; }
  .seal-n { font-size: 1.5rem; }
  .call-card { position: static; }
  .gear-grid { grid-template-columns: minmax(0, 1fr); }
  .gear-text { position: static; }
  .services-media { position: static; order: 2; width: min(80%, 20rem); }
  .services-grid { display: flex; flex-direction: column; }
  /* the portrait starts below the list, never over its last line */
  .doctor-media { padding: 4.5rem 2.5rem 0 0; }
  .arch-face { top: 0; }
  .faq-head { position: static; }
  .map { min-height: 20rem; }
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.6rem;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.97);
    box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -18px rgb(21 26 63 / 0.3);
  }
  .dock .btn { min-height: 3rem; padding: 0 0.9rem; }
}
/* the narrowest phones: the call button says only "Sună" */
@media (max-width: 365px) {
  .dock-num { display: none; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .intro { grid-template-columns: 1.25fr 0.85fr; gap: 2.5rem; }
  .intro-media { order: 0; width: 100%; }
  .seal { right: -1.25rem; }
  /* the two photographs side by side, the same height (the columns follow their proportions) */
  .gear-photos { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1.24fr); gap: 1.25rem; }
}
@media (max-width: 699px) {
  .reviews-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "score" "quote" "themes"; gap: 2.25rem; }
  .rv-quote { min-height: 0; border-radius: 50% 50% 22px 22px / 8.5rem 8.5rem 22px 22px; }
}
@media (max-width: 599px) {
  :root { --pad: 1.25rem; }
  .intro-media { width: min(64vw, 15.5rem); }
  .intro-media::before { inset: -0.6rem -0.6rem 0.6rem 0.6rem; }
  .seal { right: -0.9rem; width: 5.25rem; height: 5.25rem; }
  .seal-n { font-size: 1.25rem; }
  .seal-stars svg { width: 0.55rem; height: 0.55rem; }
  .arch-room { left: -2.1rem; bottom: -1.25rem; border-width: 4px; }
  .seal-t { font-size: 0.6875rem; }
  .intro-actions .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 0.55rem; }
  .intro-actions .btn { flex: 1 1 100%; }
  .intro-facts strong { font-size: 1.4rem; }
  .svc-group dl > div { grid-template-columns: minmax(0, 1fr); }
  .faq-list details p { padding-right: 0; }
  .doctor-media { padding-right: 2rem; }
  .close-number { font-size: clamp(1.9rem, 9vw, 2.3rem); }
  .close-actions { align-self: stretch; }
  .close-actions .btn { flex: 1 1 100%; white-space: normal; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .intro-text > * { opacity: 0; transform: translateY(16px); animation: rise 800ms var(--ease) forwards; }
  .js .intro-text > :nth-child(2) { animation-delay: 70ms; }
  .js .intro-text > :nth-child(3) { animation-delay: 140ms; }
  .js .intro-text > :nth-child(4) { animation-delay: 210ms; }
  .js .intro-text > :nth-child(5) { animation-delay: 280ms; }
  .js .intro-text > :nth-child(6) { animation-delay: 350ms; }
  .js .arch-hero { clip-path: inset(100% 0 0 0 round 0); animation: unveil 1100ms var(--ease) 120ms forwards; }
  .js .arch-hero img { scale: 1.08; animation: settle 1600ms var(--ease) 120ms forwards; }
  .js .arch-room { clip-path: inset(100% 0 0 0 round 0); animation: unveil 1000ms var(--ease) 520ms forwards; }
  .js .arch-room img { scale: 1.12; animation: settle 1500ms var(--ease) 520ms forwards; }
  .js .seal { opacity: 0; transform: scale(0.8); animation: rise 700ms var(--ease) 800ms forwards; }
  .js .will-reveal .r { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); transition-delay: calc(min(var(--i, 0), 12) * 60ms); }
  .js .will-reveal.is-in .r { opacity: 1; transform: none; }
  /* the signature: every arch opens from the bottom, like the hero's */
  .js .r-photo { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--ease) 80ms; }
  .js .r-photo.is-in { clip-path: inset(0 0 0 0); }
  .js .arch-face.r-photo { transition-delay: 380ms; }
  /* open now: the green dot breathes */
  .side-status.is-open::before, .call-status.is-open::before, .intro-status.is-open::before { animation: breathe 2.6s ease-out infinite; }
  .sheet { transition: opacity 220ms var(--ease), translate 260ms var(--ease); }
  @starting-style { .sheet { opacity: 0; translate: 0 -10px; } }
  .faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--ease), content-visibility 320ms allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
}
/* photographs lean in a little under the pointer */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .arch img, .gear-photo img, .doctor-photo img { transition: transform 900ms var(--ease); }
  .arch:hover img, .gear-photo:hover img, .doctor-photo:hover img { transform: scale(1.045); }
}
:root { interpolate-size: allow-keywords; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes breathe { 0% { box-shadow: 0 0 0 0 rgb(52 194 124 / 0.55); } 70%, 100% { box-shadow: 0 0 0 0.45rem rgb(52 194 124 / 0); } }
@keyframes settle { to { scale: 1; } }
@keyframes unveil { to { clip-path: inset(0 0 0 0 round 0); } }

@media print {
  .side, .mobile-top, .sheet, .dock, .map, .map-note, .booking-fallback { display: none; }
  .page { margin-left: 0; }
  .js .will-reveal .r, .js .intro-text > *, .js .seal { opacity: 1; transform: none; }
  .js .arch-hero, .js .arch-room, .js .r-photo { clip-path: none; }
  .page > main > section.close { display: none; }
}