/* Doctor profile (src/lib/doctor-page.ts). Stacked by default; panels when
   horizontal-scroll.mjs adds body.dp-desktop-horizontal. Panel grid: 14 columns (margin, 12, margin);
   rows: header zone, stage, floor. The dark floor band is the line that runs through every panel.
   Inside corners (--r) are drawn with radial-gradient fillets wherever dark meets light. */
.dph {
  --ink: #1a1a1a; --light: #f4f4f4; --paper: #fff; --lime: #a3cb4d; --lime-ink: #7da632;
  --muted: rgba(26,26,26,.62); --rule: rgba(26,26,26,.1); --w-muted: rgba(255,255,255,.62); --w-rule: rgba(255,255,255,.16);
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif; --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mx: clamp(16px, 5vw, 96px); --top: 128px; --floor: 18dvh; --r: 48px; --ease: cubic-bezier(.25,.46,.45,.94);
  font-family: var(--body); color: var(--ink); background: var(--light);
}
.dph *, .dph *::before, .dph *::after { box-sizing: border-box; }
.dph :where(h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
.dph :where(ol, ul) { list-style: none; }
.dph :where(h1, h2, h3) { color: inherit; overflow-wrap: normal; word-break: normal; text-transform: none; }
.dph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dph a { color: inherit; }
.dph a:focus-visible, .dph button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.dph-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shared ---------- */
.dph-p { position: relative; background: var(--light); padding: 104px var(--mx) 0; }
.dph-p--story, .dph-p--cases { background: var(--ink); color: var(--paper); padding-bottom: 88px; }
.dph-kicker { font: 600 12px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.dph-kicker::before { content: ""; width: 28px; height: 2px; background: var(--lime); }
.dph-title { font: 300 clamp(30px, 3.2vw, 52px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.dph-title strong { font-weight: 700; }
.dph-title em { font-style: normal; text-transform: none; color: var(--lime-ink); }
.dph-title--light em { color: var(--lime); }
.dph-floor { background: var(--ink); color: var(--paper); margin: 56px calc(-1 * var(--mx)) 0; padding: 24px var(--mx); }
.dph-floor--center { text-align: center; }
.dph-floor__label { font: 500 12px/1.8 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--w-muted); }
.dph-floor__label strong { color: var(--lime); font-weight: 700; }
.dph-floor__label i { font-style: normal; color: var(--lime); margin: 0 14px; font-size: 8px; vertical-align: 2px; }
.dph-box { border: 1px solid var(--w-rule); border-radius: 28px; padding: 24px 28px; }
.dph-box__label, .dph-box--rows dt { font: 600 11px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.dph-box ol li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--w-rule); text-decoration: none; font: 400 16px/1.45 var(--body); }
.dph-box ol li:last-child a { border-bottom: 0; padding-bottom: 0; }
.dph-box ol li a:hover { color: var(--lime); }
.dph-box--rows div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--w-rule); align-items: baseline; }
.dph-box--rows div:first-child { padding-top: 0; }
.dph-box--rows div:last-child { border-bottom: 0; padding-bottom: 0; }
.dph-box--rows dd { font: 400 17px/1.5 var(--body); }
/* Contact values that are links: lime underline and an outward arrow, so they read as clickable. */
.dph-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.dph-link span { border-bottom: 1px solid var(--lime); padding-bottom: 2px; transition: color .2s var(--ease); }
.dph-link .dph-ico { color: var(--lime); transition: transform .25s var(--ease); }
.dph-link:hover span { color: var(--lime); }
.dph-link:hover .dph-ico { transform: translate(2px, -2px); }

/* ---------- hero ---------- */
.dph-p--hero { display: flex; flex-direction: column; }
.dph-hero__cutout, .dph-hero__portrait { order: -1; height: 64vh; margin: 0 auto 32px; }
.dph-hero__cutout img { object-fit: contain; object-position: 50% 100%; }
.dph-hero__portrait { aspect-ratio: 1 / 1; border-radius: 32px; overflow: hidden; }
.dph-hero__name { font: 200 clamp(44px, 6vw, 104px)/.98 var(--display); letter-spacing: -.02em; margin-top: 20px; }
.dph-hero__name span, .dph-hero__name strong { display: block; }
.dph-hero__name strong { font-weight: 600; }
.dph-hero__intro { margin-top: 28px; max-width: 520px; font: 300 clamp(18px, 1.4vw, 22px)/1.5 var(--display); color: rgba(26,26,26,.82); }
/* the bio, shown in the hero only when the doctor has no story panel (no video, no articles) */
.dph-hero__intro.dph-hero__bio { margin-top: 16px; font-size: clamp(16px, 1.1vw, 18px); color: rgba(26,26,26,.68); }
.dph-hero__where { margin-top: 20px; font: 400 15px/1.6 var(--body); color: var(--muted); }
.dph-hero__where a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- procedures: the upper jaw ---------- */
.dph-teeth { display: grid; gap: 12px; margin-top: 8px; }
.dph-tooth { background: var(--paper); border-radius: 0 0 32px 32px; }
.dph-tooth--gap { background: var(--ink); color: var(--paper); border-radius: 160px 160px 0 0; padding-top: 72px; }
.dph-tooth__body { display: flex; flex-direction: column; gap: 10px; padding: 32px 28px 36px; }
.dph-tooth__num { font: 600 12px/1 var(--body); letter-spacing: .08em; color: var(--lime-ink); }
.dph-tooth--gap .dph-tooth__num { color: var(--lime); }
.dph-tooth__name { font: 700 clamp(20px, 1.6vw, 26px)/1.15 var(--display); text-transform: uppercase; }
.dph-tooth__note { font: 400 14px/1.6 var(--body); color: var(--muted); }
.dph-tooth--gap .dph-tooth__note { color: var(--w-muted); }
.dph-tooth__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 12px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--lime-ink) !important; text-decoration: none; }
.dph-tooth--gap .dph-tooth__go { color: var(--lime) !important; }
.dph-tooth__go .dph-ico { transition: transform .25s var(--ease); }
.dph-tooth__go:hover .dph-ico { transform: translateX(4px); }

/* ---------- training ---------- */
.dph-creds { margin-top: 28px; }
.dph-creds li { font: 300 18px/1.45 var(--display); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.dph-rail-card { margin-top: 40px; }
.dph-rail { display: none; }
.dph-courses { background: var(--paper); border-radius: 32px 32px 0 0; padding: 28px; }
.dph-courses li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.dph-courses li:last-child { border-bottom: 0; }
.dph-courses__n { grid-row: span 2; font: 700 15px/1.4 var(--display); color: var(--lime-ink); }
.dph-courses strong { font: 600 15px/1.4 var(--body); }
.dph-courses span:not(.dph-courses__n) { font: 400 13px/1.5 var(--body); color: var(--muted); }

/* ---------- story ---------- */
.dph-p--story { display: flex; flex-direction: column; gap: 40px; }
.dph-story__video video { display: block; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 28px; background: #000; object-fit: cover; }
.dph-story__text { display: flex; flex-direction: column; gap: 32px; }
.dph-story__lead { margin-top: 24px; font: 300 19px/1.6 var(--display); color: rgba(255,255,255,.82); max-width: 560px; }

/* ---------- cases ---------- */
.dph-cases { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 360px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 40px; }
.dph-case { scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.dph-shot { position: relative; display: block; padding: 0; border: 0; background: #242424; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; cursor: zoom-in; }
.dph-shot--main { grid-column: 1 / -1; border-radius: 24px; }
.dph-shot img { transition: transform .5s var(--ease); }
.dph-shot:hover img { transform: scale(1.03); }
.dph-shot__tag { position: absolute; left: 10px; bottom: 9px; font: 500 10px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.dph-case__label { grid-column: 1 / -1; margin-top: 8px; font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); }

/* ---------- reviews ---------- */
.dph-reviews { display: grid; gap: 16px; margin-top: 40px; }
.dph-reviews li { background: var(--paper); border-radius: 28px; padding: 28px; }
.dph-reviews blockquote { font: 300 20px/1.5 var(--display); }
.dph-reviews p { margin-top: 16px; font: 600 12px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- contact ---------- */
.dph-p--contact { display: flex; flex-direction: column; }
.dph-contact__cutout { height: 64vh; margin: 0 auto -1px; }
.dph-contact__cutout img { object-fit: contain; object-position: 50% 100%; }
.dph-contact__block { background: var(--ink); color: var(--paper); border-radius: 40px 40px 0 0; padding: 40px 28px 32px; margin: 0 calc(-1 * var(--mx)); }
.dph-contact__lead { margin: 16px 0 32px; font: 300 19px/1.5 var(--display); color: rgba(255,255,255,.82); }
.dph-p--contact > .dph-floor { display: none; }

/* ---------- lightbox ---------- */
.dph-lb { position: fixed; inset: 0; z-index: 2147483647; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; background: rgba(12,12,12,.94); }
.dph-lb[hidden] { display: none; }
html.dph-lb-open, html.dph-lb-open body { overflow: hidden; }
.dph-lb__stage { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.dph-lb__stage img { max-width: min(88vw, 1100px); max-height: 82vh; width: auto; height: auto; border-radius: 16px; object-fit: contain; }
.dph-lb__stage figcaption { font: 500 12px/1 "DM Sans", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.dph-lb button { background: none; border: 0; color: #fff; cursor: pointer; font: 300 44px/1 "Outfit", Arial, sans-serif; width: 56px; height: 56px; border-radius: 999px; }
.dph-lb button:hover { background: rgba(255,255,255,.08); }
.dph-lb__close { position: absolute; top: 20px; right: 20px; }
.dph-lb__nav--prev { grid-column: 1; justify-self: center; }
.dph-lb__nav--next { grid-column: 3; justify-self: center; }

/* Stacked mode: the theme makes page sections flex rows; panels read top to bottom instead. */
body:not(.dp-desktop-horizontal) .dph-p { display: block !important; }
body:not(.dp-desktop-horizontal) .dph-p--hero, body:not(.dp-desktop-horizontal) .dph-p--story,
body:not(.dp-desktop-horizontal) .dph-p--contact { display: flex !important; flex-direction: column !important; align-items: stretch !important; }

/* =================================================================
   Desktop horizontal: every panel is one viewport, laid on the grid.
   ================================================================= */
body.dp-desktop-horizontal .dph-p {
  display: grid; height: 100dvh; padding: 0 !important; overflow: hidden; align-items: stretch !important; /* theme centres page-section children */
  grid-template-columns: var(--mx) repeat(12, minmax(0, 1fr)) var(--mx); column-gap: 24px;
  grid-template-rows: var(--top) minmax(0, 1fr) var(--floor);
}
body.dp-desktop-horizontal .dph-floor { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 0 calc(var(--mx) + 24px); display: flex; align-items: center; }
body.dp-desktop-horizontal .dph-floor--center { justify-content: center; }
body.dp-desktop-horizontal .dph-p--story, body.dp-desktop-horizontal .dph-p--cases { padding-bottom: 0 !important; }

/* hero: name and intro left, the cutout standing on the floor */
body.dp-desktop-horizontal .dph-hero__text { grid-column: 2 / 8; grid-row: 2; align-self: center; position: relative; z-index: 1; }
body.dp-desktop-horizontal .dph-hero__cutout { grid-column: 8 / 14; grid-row: 1 / 3; align-self: end; height: calc(100dvh - var(--floor) - 24px); width: 100%; margin: 0; }
body.dp-desktop-horizontal .dph-hero__portrait { grid-column: 9 / 14; grid-row: 2; align-self: end; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 40px 40px 0 0; }

/* procedures: light teeth hang from the top with rounded tips; the implant column is the missing tooth,
   a dark arch rising from the floor. The panel itself is the gum line: no top edge, no separators. */
body.dp-desktop-horizontal .dph-teeth { grid-column: 1 / -1; grid-row: 1 / 3; display: grid; grid-template-columns: calc(var(--mx) + 24px) repeat(var(--teeth, 5), minmax(0, 1fr)); gap: 0; margin: 0;
  background: linear-gradient(to bottom, transparent calc(100% - var(--r)), var(--ink) 0); }
body.dp-desktop-horizontal .dph-tooth { position: relative; display: flex; align-items: flex-start; background: var(--light); border-radius: 0 0 var(--r) var(--r); }
body.dp-desktop-horizontal .dph-tooth--gap { background: transparent; border-radius: 0; padding: 0; }
body.dp-desktop-horizontal .dph-tooth--gap::before { content: ""; position: absolute; inset: 120px 0 0; background: var(--ink); border-radius: 999px 999px 0 0; }
body.dp-desktop-horizontal .dph-tooth__body { position: relative; width: 100%; padding: max(300px, 36dvh) clamp(20px, 2.2vw, 40px) 0; }
/* a partial tooth at the left edge, so the missing one sits inside the jaw as on the homepage */
.dph-tooth--edge { display: none; }
body.dp-desktop-horizontal .dph-tooth--edge { display: block; border-bottom-left-radius: 0; }
/* the last tooth flows into the next light panel the same way */
body.dp-desktop-horizontal .dph-tooth:last-child { border-bottom-right-radius: 0; }
body.dp-desktop-horizontal .dph-tooth__note { max-width: 30ch; }
body.dp-desktop-horizontal .dph-p--proc > .dph-floor .dph-title { font-size: clamp(26px, 2.6vw, 42px); }

/* training: an empty dark rail carries the course numbers; inside corners join it to the floor */
body.dp-desktop-horizontal .dph-train__head { grid-column: 2 / 6; grid-row: 2; align-self: center; }
body.dp-desktop-horizontal .dph-rail-card { grid-column: 7 / 14; grid-row: 2; align-self: end; margin: 0; display: grid; grid-template-columns: 56px 1fr; column-gap: 40px; height: 100%; max-height: 660px; }
body.dp-desktop-horizontal .dph-rail { display: block; position: relative; background: var(--ink); border-radius: 28px 28px 0 0; }
body.dp-desktop-horizontal .dph-rail::before, body.dp-desktop-horizontal .dph-rail::after { content: ""; position: absolute; bottom: 0; width: 28px; height: 28px; }
body.dp-desktop-horizontal .dph-rail::before { left: -28px; background: radial-gradient(circle at 0 0, transparent 27.5px, var(--ink) 28px); }
body.dp-desktop-horizontal .dph-rail::after { right: -28px; background: radial-gradient(circle at 100% 0, transparent 27.5px, var(--ink) 28px); }
body.dp-desktop-horizontal .dph-courses { display: grid; align-content: space-evenly; padding: 24px 40px; overflow: visible; }
body.dp-desktop-horizontal .dph-courses li { position: relative; display: block; padding: 10px 0; }
body.dp-desktop-horizontal .dph-courses__n { position: absolute; left: -136px; width: 56px; top: 50%; transform: translateY(-50%); text-align: center; font: 700 18px/1 var(--display); color: var(--paper); }
body.dp-desktop-horizontal .dph-courses strong, body.dp-desktop-horizontal .dph-courses span:not(.dph-courses__n) { display: block; }

/* light panel meeting a dark one on its right: round the light corners (top and floor) */
body.dp-desktop-horizontal .dph-p--train::after, body.dp-desktop-horizontal .dph-p--cases + .dph-p::after {
  content: ""; position: absolute; width: var(--r); height: var(--r); z-index: 2; pointer-events: none;
}
body.dp-desktop-horizontal .dph-p--train::after { bottom: var(--floor); right: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--ink) var(--r)); }
/* the light panel after the dark cases: its light area opens with a rounded corner at the floor */
body.dp-desktop-horizontal .dph-p--cases + .dph-p::after { bottom: var(--floor); left: 0; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--ink) var(--r)); }

/* story: the video spans the stage (top of the stage to the floor line); the text column matches its edges */
body.dp-desktop-horizontal .dph-p--story { gap: 0; }
body.dp-desktop-horizontal .dph-story__video { grid-column: 2 / 6; grid-row: 2; align-self: stretch; display: flex; justify-content: flex-start; }
body.dp-desktop-horizontal .dph-story__video video { width: auto; height: 100%; max-width: none; margin: 0; }
body.dp-desktop-horizontal .dph-story__text { grid-column: 6 / 13; grid-row: 2; align-self: stretch; justify-content: space-between; gap: 24px; }
body.dp-desktop-horizontal .dph-story__text .dph-title { font-size: clamp(30px, 3vw, 48px); }

/* cases: square images sized so a whole case fits the frame */
body.dp-desktop-horizontal .dph-p--cases { --case: min(calc((100vw - 2 * var(--mx) - 48px) / 3), calc((100dvh - var(--top) - 210px) / 1.5)); }
body.dp-desktop-horizontal .dph-p--cases > .dph-title { grid-column: 2 / 13; grid-row: 2; align-self: start; }
body.dp-desktop-horizontal .dph-cases { grid-column: 1 / -1; grid-row: 2 / 4; align-self: end; justify-content: center; margin: 0 0 44px; overflow: visible;
  grid-auto-flow: column; grid-auto-columns: var(--case); gap: 24px; }

/* reviews */
body.dp-desktop-horizontal .dph-p--reviews > .dph-title { grid-column: 2 / 10; grid-row: 2; align-self: start; padding-top: 8px; }
body.dp-desktop-horizontal .dph-reviews { grid-column: 2 / 14; grid-row: 2; align-self: stretch; margin: 120px 0 0; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.dp-desktop-horizontal .dph-reviews li { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-radius: 32px 32px 0 0; padding: clamp(28px, 3vw, 48px); }
body.dp-desktop-horizontal .dph-reviews blockquote { font-size: clamp(19px, 1.6vw, 24px); }

/* contact: the doctor stands on the bottom edge, over the floor; the dark block meets the floor with an inside corner */
body.dp-desktop-horizontal .dph-contact__cutout { grid-column: 2 / 8; grid-row: 1 / -1; align-self: end; justify-self: center; height: 95vh; width: 100%; margin: 0; position: relative; z-index: 3; }
body.dp-desktop-horizontal .dph-contact__block { grid-column: 8 / 15; grid-row: 1 / -1; align-self: stretch; margin: 96px 0 0; padding: 0 clamp(40px, 5vw, 96px) var(--floor); border-radius: var(--r) 0 0 0;
  display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
body.dp-desktop-horizontal .dph-contact__block::before { content: ""; position: absolute; left: calc(-1 * var(--r)); bottom: var(--floor); width: var(--r); height: var(--r);
  background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--ink) var(--r)); }
body.dp-desktop-horizontal .dph-p--contact > .dph-floor { display: block; }

/* Hooks for phones and tablets, inert on desktop: the hero stage, the procedure rows' tap target and their text. */
.dph-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dph-hero__stage, .dph-tooth__more { display: contents; }
.dph-tooth__tap { display: none; }

/* =================================================================
   Phones and tablets (Vlad, 2026-11-09): the touch language of /servicii, /kids and /echipa.
   A full-screen hero with the words at its foot; the procedures as one-per-row bars that open in place; strips that
   run off the screen's right edge; the closing block as the site's footer, square and full width, 72 px above its
   title. Tablets add the green guide column (from 48 px above the hero's words to 48 px above the page's end).
   ================================================================= */
body:not(.dp-desktop-horizontal) .dph { --mx: 24px; --foot-x: 47px; }

/* hero: one full screen, the cut-out above and the words at the bottom; the titles band under the fold, one per line */
body:not(.dp-desktop-horizontal) .dph-p--hero { padding: 0 !important; }
body:not(.dp-desktop-horizontal) .dph-hero__stage { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding: 88px var(--mx) 40px; }
body:not(.dp-desktop-horizontal) .dph-hero__cutout { position: relative; order: -1; flex: 1 1 0; min-height: 50svh; height: auto; width: 100%; margin: 0 0 24px; }
body:not(.dp-desktop-horizontal) .dph-hero__cutout img { position: absolute; inset: 0; }
body:not(.dp-desktop-horizontal) .dph-hero__name { font-size: 40px; margin-top: 16px; }
body:not(.dp-desktop-horizontal) .dph-hero__intro { margin-top: 16px; font-size: 17px; }
body:not(.dp-desktop-horizontal) .dph-hero__where { margin-top: 16px; }
body:not(.dp-desktop-horizontal) .dph-p--hero > .dph-floor { margin: 0; padding: 32px var(--mx); }
body:not(.dp-desktop-horizontal) .dph-floor__label span { display: block; }
body:not(.dp-desktop-horizontal) .dph-floor__label i { display: none; }

/* phones: photo, name, intro and clinic fit one screen down to 640 px tall; taller screens give the photo the rest */
@media (max-width: 767px) {
  body:not(.dp-desktop-horizontal) .dph-hero__stage { padding: 80px var(--mx) 32px; }
  body:not(.dp-desktop-horizontal) .dph-hero__cutout { min-height: 36svh; margin-bottom: 20px; }
  body:not(.dp-desktop-horizontal) .dph-hero__name { margin-top: 12px; }
  body:not(.dp-desktop-horizontal) .dph-hero__intro { margin-top: 14px; font-size: 16px; }
  body:not(.dp-desktop-horizontal) .dph-hero__where { margin-top: 14px; }
}

/* procedures: the title above, then one bar per procedure: number and name on the left, a chevron on the right;
   a tap opens the procedure's text and its page link under its own row */
body:not(.dp-desktop-horizontal) .dph-p--proc { display: flex !important; flex-direction: column !important; padding: 96px var(--mx) 0 !important; }
body:not(.dp-desktop-horizontal) .dph-p--proc > .dph-floor { order: -1; margin: 0 0 32px; padding: 0; background: none; color: var(--ink); text-align: left; }
body:not(.dp-desktop-horizontal) .dph-p--proc > .dph-floor .dph-title em { color: var(--lime-ink); }
body:not(.dp-desktop-horizontal) .dph-teeth { display: flex; flex-direction: column; gap: 0; margin: 0; background: var(--paper); border-radius: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); overflow: hidden; }
body:not(.dp-desktop-horizontal) .dph-tooth { position: relative; background: none; color: var(--ink); border-radius: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.06); }
body:not(.dp-desktop-horizontal) .dph-tooth--gap { border-top: 0; }
body:not(.dp-desktop-horizontal) .dph-tooth::after { content: ""; position: absolute; right: 22px; top: 31px; width: 8px; height: 8px; border-right: 2px solid rgba(0,0,0,.35); border-bottom: 2px solid rgba(0,0,0,.35);
  transform: translateY(-60%) rotate(45deg); transition: transform .3s var(--ease); pointer-events: none; }
body:not(.dp-desktop-horizontal) .dph-tooth.is-open::after { transform: translateY(-20%) rotate(-135deg); }
body:not(.dp-desktop-horizontal) .dph-tooth__body { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: baseline; padding: 20px 56px 20px 24px; }
body:not(.dp-desktop-horizontal) .dph-tooth__num, body:not(.dp-desktop-horizontal) .dph-tooth--gap .dph-tooth__num { color: var(--lime-ink); }
body:not(.dp-desktop-horizontal) .dph-tooth__name { font: 600 16px/1.3 var(--display); }
body:not(.dp-desktop-horizontal) .dph-tooth__tap { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.dp-desktop-horizontal) .dph-tooth__tap:focus-visible { outline-offset: -3px; }
body:not(.dp-desktop-horizontal) .dph-tooth__more { display: none; grid-column: 2; }
body:not(.dp-desktop-horizontal) .dph-tooth.is-open .dph-tooth__more { display: block; }
body:not(.dp-desktop-horizontal) .dph-tooth__note, body:not(.dp-desktop-horizontal) .dph-tooth--gap .dph-tooth__note { margin-top: 8px; font: 400 15px/1.6 var(--body); color: var(--muted); }
body:not(.dp-desktop-horizontal) .dph-tooth__go, body:not(.dp-desktop-horizontal) .dph-tooth--gap .dph-tooth__go { position: relative; z-index: 2; margin-top: 12px; padding: 4px 0; color: var(--lime-ink) !important; }

/* training: the credentials as hairline rows; the courses card stands on the floor beside the dark rail that carries
   their numbers, as on the desktop panel */
body:not(.dp-desktop-horizontal) .dph-p--train { padding: 96px var(--mx) 0 !important; }
body:not(.dp-desktop-horizontal) .dph-creds li { font-size: 17px; }
body:not(.dp-desktop-horizontal) .dph-rail-card { position: relative; margin-top: 40px; padding-left: 52px; }
body:not(.dp-desktop-horizontal) .dph-rail { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 40px; background: var(--ink); border-radius: 20px 20px 0 0; }
body:not(.dp-desktop-horizontal) .dph-rail::before, body:not(.dp-desktop-horizontal) .dph-rail::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; }
body:not(.dp-desktop-horizontal) .dph-rail::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--ink) 12px); }
body:not(.dp-desktop-horizontal) .dph-rail::after { right: -12px; background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--ink) 12px); }
body:not(.dp-desktop-horizontal) .dph-courses { position: relative; z-index: 1; border-radius: 24px 24px 0 0; padding: 16px 20px; }
body:not(.dp-desktop-horizontal) .dph-courses li { position: relative; display: block; padding: 14px 0; }
body:not(.dp-desktop-horizontal) .dph-courses__n { position: absolute; left: -72px; top: 50%; width: 40px; transform: translateY(-50%); text-align: center; font: 700 15px/1 var(--display); color: var(--paper); }
body:not(.dp-desktop-horizontal) .dph-courses strong, body:not(.dp-desktop-horizontal) .dph-courses span:not(.dph-courses__n) { display: block; }
body:not(.dp-desktop-horizontal) .dph-courses span:not(.dph-courses__n) { margin-top: 2px; }
body:not(.dp-desktop-horizontal) .dph-p--train > .dph-floor { margin-top: 0; }

/* story: title and lead, then the video, then the articles */
body:not(.dp-desktop-horizontal) .dph-p--story { gap: 32px; padding: 96px var(--mx) !important; }
body:not(.dp-desktop-horizontal) .dph-story__text, body:not(.dp-desktop-horizontal) .dph-story__text > div:first-child { display: contents; }
body:not(.dp-desktop-horizontal) .dph-story__text .dph-title { order: -2; }
body:not(.dp-desktop-horizontal) .dph-story__text .dph-story__lead { order: -1; margin-top: -8px !important; }
body:not(.dp-desktop-horizontal) .dph-story__video video { max-width: none; border-radius: 24px; }
body:not(.dp-desktop-horizontal) .dph-story__lead { margin-top: 0; font-size: 18px; }

/* cases and reviews: strips that start on the text line and run off the screen's right edge */
body:not(.dp-desktop-horizontal) .dph-p--cases { padding: 96px var(--mx) 96px !important; }
body:not(.dp-desktop-horizontal) :is(.dph-cases, .dph-reviews) { display: grid; grid-auto-flow: column; grid-auto-columns: 82vw; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 32px calc(-1 * var(--mx)) 0 0; padding-right: var(--mx); scrollbar-width: none; overscroll-behavior-x: contain; }
body:not(.dp-desktop-horizontal) :is(.dph-cases, .dph-reviews)::-webkit-scrollbar { display: none; }
body:not(.dp-desktop-horizontal) .dph-p--reviews { padding: 96px var(--mx) 0 !important; }
body:not(.dp-desktop-horizontal) .dph-reviews li { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 28px 24px; }
body:not(.dp-desktop-horizontal) .dph-reviews blockquote { font-size: 18px; }
body:not(.dp-desktop-horizontal) .dph-reviews p { margin-top: 0; }

/* closing block = the site's footer: full width and square, 72 px above its title, to the page's end, with
   Dr. Constantinovici standing on its top edge; contact rows as label over value with hairlines */
body:not(.dp-desktop-horizontal) .dph-p--contact { padding: 96px 0 0 !important; }
body:not(.dp-desktop-horizontal) .dph-contact__cutout { height: auto; width: min(88vw, 420px); aspect-ratio: 1537 / 2000; margin: 0 auto -1px; }
body:not(.dp-desktop-horizontal) .dph-contact__block { margin: 0; border-radius: 0; padding: 72px var(--foot-x); background: #1f1f1f; }
body:not(.dp-desktop-horizontal) .dph-contact__lead { margin: 16px 0 40px; font-size: 18px; }
body:not(.dp-desktop-horizontal) .dph-box--rows { border: 0; border-radius: 0; padding: 0; }
body:not(.dp-desktop-horizontal) .dph-box--rows div { display: block; padding: 16px 0; }
body:not(.dp-desktop-horizontal) .dph-box--rows dd { margin-top: 8px; }

/* Tablets: the guide column (as on /servicii and /kids). Words inside it; photos and video on the right half; the
   bars and the courses card from inside the column to the right margin; the strips from the column's text line to
   the screen's edge. --g-l / --g-w: the column's left edge and width; --g-pad: the words' inset in it. */
@media (min-width: 768px) {
  body:not(.dp-desktop-horizontal) .dph { --g-l: 5.2vw; --g-w: 44.8vw; --g-pad: 24px; --g-text-l: calc(var(--g-l) + var(--g-pad)); --g-text-w: calc(var(--g-w) - 2 * var(--g-pad));
    --g-wide: calc(100vw - 24.5vw - var(--g-l)); --foot-x: var(--g-text-l); position: relative; isolation: isolate; }
  body:not(.dp-desktop-horizontal) .dph::before { content: ""; position: absolute; z-index: 1; left: var(--g-l); width: var(--g-w); top: var(--dph-col-top, calc(100svh - 480px)); bottom: 48px;
    box-sizing: border-box; border: 1.5px solid var(--lime); border-radius: 32px; pointer-events: none; }
  /* everything but the dark bands sits over the column's line */
  body:not(.dp-desktop-horizontal) .dph-p > :not(.dph-floor, .dph-contact__block) { position: relative; z-index: 2; }
  body:not(.dp-desktop-horizontal) .dph-floor { margin-left: 0; margin-right: 0; padding: 28px 0 28px var(--g-text-l); text-align: left; }
  body:not(.dp-desktop-horizontal) .dph-floor > * { max-width: var(--g-text-w); }

  /* hero: the words in the column at the foot of the screen, the cut-out on the right half standing on the titles band */
  body:not(.dp-desktop-horizontal) .dph-hero__stage { padding: 0 0 72px var(--g-text-l); }
  body:not(.dp-desktop-horizontal) .dph-hero__text { width: var(--g-text-w); }
  /* the box runs 6vw past the screen's right edge, so the cut-out (sized by width) stands taller */
  body:not(.dp-desktop-horizontal) .dph-hero__cutout { position: absolute; left: calc(50vw + 8px); right: -6vw; top: 96px; bottom: 0; width: auto; min-height: 0; margin: 0; }
  body:not(.dp-desktop-horizontal) .dph-hero__text { position: relative; z-index: 1; }
  body:not(.dp-desktop-horizontal) .dph-hero__name { font-size: calc(var(--g-text-w) * var(--g-name, .118)); }
  body:not(.dp-desktop-horizontal) .dph-p--hero > .dph-floor { padding: 32px 0 32px var(--g-text-l); }

  /* procedures */
  body:not(.dp-desktop-horizontal) .dph-p--proc { padding: 120px 0 0 !important; align-items: flex-start !important; }
  body:not(.dp-desktop-horizontal) .dph-p--proc > .dph-floor { margin: 0 0 40px var(--g-text-l); width: var(--g-text-w); padding: 0; }
  body:not(.dp-desktop-horizontal) .dph-teeth { margin-left: 24.5vw; width: var(--g-wide); }

  /* training */
  body:not(.dp-desktop-horizontal) .dph-p--train { padding: 120px 0 0 !important; }
  body:not(.dp-desktop-horizontal) .dph-train__head { margin-left: var(--g-text-l); width: var(--g-text-w); }
  body:not(.dp-desktop-horizontal) .dph-rail-card { margin: 56px 0 0 24.5vw; width: var(--g-wide); }
  body:not(.dp-desktop-horizontal) .dph-courses { padding: 20px 32px; }
  body:not(.dp-desktop-horizontal) .dph-courses__n { left: -84px; }

  /* story: the words in the column, the video on the right half */
  body:not(.dp-desktop-horizontal) .dph-p--story { display: grid !important; grid-template-columns: var(--g-text-l) var(--g-text-w) 1fr; align-items: start !important; gap: 0; padding: 120px 0 !important; }
  body:not(.dp-desktop-horizontal) .dph-story__text { display: flex; flex-direction: column; gap: 32px; grid-column: 2; grid-row: 1; }
  body:not(.dp-desktop-horizontal) .dph-story__text > div:first-child { display: flex; flex-direction: column; gap: 24px; }
  body:not(.dp-desktop-horizontal) .dph-story__text .dph-story__lead { margin-top: 0 !important; }
  body:not(.dp-desktop-horizontal) .dph-story__video { grid-column: 3; grid-row: 1; justify-self: center; width: min(36vw, 360px); }

  /* cases and reviews: the title in the column, the strip from its text line to the screen's edge */
  body:not(.dp-desktop-horizontal) :is(.dph-p--cases, .dph-p--reviews) > .dph-title { margin-left: var(--g-text-l); width: var(--g-text-w); }
  body:not(.dp-desktop-horizontal) .dph-p--cases { padding: 120px 0 !important; }
  body:not(.dp-desktop-horizontal) .dph-p--reviews { padding: 120px 0 0 !important; }
  body:not(.dp-desktop-horizontal) :is(.dph-cases, .dph-reviews) { margin: 40px 0 0 var(--g-text-l); padding-right: var(--g-l); scroll-padding-left: 0; grid-auto-columns: 42vw; }
  body:not(.dp-desktop-horizontal) .dph-reviews li { padding: 32px; }
  /* the reviews' source as a plain line under the cards, so the page shows between them and the dark footer */
  body:not(.dp-desktop-horizontal) .dph-p--reviews > .dph-floor { margin-top: 32px; padding-bottom: 120px; background: none; }
  body:not(.dp-desktop-horizontal) .dph-p--reviews .dph-floor__label { color: var(--muted); }
  body:not(.dp-desktop-horizontal) .dph-p--reviews .dph-floor__label strong { color: var(--lime-ink); }

  /* footer: the dark fill is the whole closing panel; its words in the column, Dr. Constantinovici on the right half,
     80 % of the screen tall, running off the screen's right edge */
  body:not(.dp-desktop-horizontal) .dph-p--contact { display: flex !important; flex-direction: column !important; padding: 0 !important; background: #1f1f1f; min-height: 80vh; }
  body:not(.dp-desktop-horizontal) .dph-p--contact > .dph-contact__cutout { position: absolute; right: 0; bottom: 0; width: 50vw; height: 80vh; aspect-ratio: auto; margin: 0; }
  body:not(.dp-desktop-horizontal) .dph-contact__cutout img { object-fit: cover; object-position: 0 100%; }
  /* words centred in the column's part of the footer: from the footer's top to the column's end, 48 px above the page's end */
  body:not(.dp-desktop-horizontal) .dph-contact__block { flex: 1; display: flex; flex-direction: column; justify-content: center; width: calc(var(--g-text-l) + var(--g-text-w)); padding: 72px 0 120px var(--g-text-l); background: none; }
}

@media (prefers-reduced-motion: reduce) { .dph * { transition: none !important; } }