/* ==========================================================================
   Proximity Dental — All-on-X landing page (design v3.1, Felix density pass)
   Order: fonts · tokens · base · layout · components · sections · responsive
   Rule: no raw colours outside :root. Breakpoints: 640 / 900 / 1024.
   Anti-slop: flat fills, no glass, hairline borders only, radii 8/12/16/24.
   ========================================================================== */

@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-ext-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Colour (DESIGN.md v3) */
  --color-bg: #FAF9F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3F1EC;
  --color-surface-3: #E9E5DC;
  --color-fg: #2B2924;
  --color-fg-hover: #46433B;
  --color-muted: #6B6965;
  --color-line: rgba(43, 41, 36, .10);
  --color-line-strong: rgba(43, 41, 36, .18);
  --color-input-border: #8C8984;
  --color-accent: #D09B2C;
  --color-mark: rgba(208, 155, 44, .14);
  --color-dark: #2B2924;
  --color-on-dark: #FAF9F7;
  --color-on-image: #FFFFFF;
  --color-on-image-muted: rgba(255, 255, 255, .85);
  --color-on-image-line: rgba(255, 255, 255, .22);
  --color-on-image-scrim: rgba(43, 41, 36, .5);
  --hero-grad-from: #937E71;           /* hero card gradient (Figma 43:1011): 245.09deg, 7.39% -> 102.64% */
  --hero-grad-to: #513A25;
  --hero-grad-angle: 245.09deg;
  --color-hero-from: var(--hero-grad-from);
  --color-hero-to: var(--hero-grad-to);
  --vcard-btn-bg: rgba(43, 41, 36, .45);
  --vcard-btn-bg-hover: rgba(43, 41, 36, .6);
  --hero-inset: clamp(12px, calc((100vw - 1100px) * .08 + 12px), 40px);   /* navbar inset inside the hero card */
  --color-hero-bg: #7A5844;            /* sampled campaign backdrop (the photos' real backdrop is darker than #9A836C) */
  --color-mark-on-image: rgba(43, 41, 36, .32);
  --color-taupe: #9A836C;
  --color-beige-bg: #E4DFD6;
  --color-backdrop: rgba(43, 41, 36, .5);
  --color-error: #9A2B1F;
  --card-bg: var(--color-surface);
  /* v4.1 client hero styling: gold (headline accent + primary button), cream (secondary/inverted button) */
  --gold-1: #DAB872;
  --gold-2: #FFDB90;
  --gold-3: #816A3B;                   /* button gradient end stop */
  --gold-text-end: #6F5112;            /* headline accent end stop */
  --gold-gradient-btn: linear-gradient(120.51deg, var(--gold-1) 9.114%, var(--gold-2) 50.692%, var(--gold-3) 96.943%);
  --gold-gradient-text: linear-gradient(90deg, var(--gold-1), var(--gold-2) 46.635%, var(--gold-text-end) 91.827%);
  --color-cream: #E8E3DE;
  --color-cream-hover: #DDD6CD;
  --guarantee-grad-from: #E2C588;      /* Figma section/garancia v2: horizontal gradient, warm left ... */
  --guarantee-grad-to: #E3DED8;        /* ... cool light grey right, under a 50% off-white overlay */
  --guarantee-overlay: rgba(251, 250, 249, .5);
  --guarantee-muted: #5E5C58;          /* muted text on the card: >= 4.5:1 on both gradient stops */
  --track-ui: .02em;
  --lh-body: 1.5;                      /* Figma body text line-height (hero, garancia, header, drawers keep 1.55) */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .12);   /* Figma section/vysledky case drop-shadow */

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: clamp(2rem, 1rem + 2.2vw, 2.5rem);
  --text-h2: 1.75rem;                  /* section headlines: 28 / 34 / 40 (see media queries below :root) */
  --text-sub: 1rem;                    /* section sub / lead under a headline: 16 mobile, 18 from 720 */
  --text-h3: 1rem;
  --text-base: .9375rem;
  --text-sm: .875rem;
  --text-meta: .8125rem;
  --text-xs: .75rem;
  --measure: 60ch;

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --section-pad: 2.5rem;

  /* Layout */
  --container: 1200px;
  --hero-side: clamp(8px, 1.1vw, 20px);  /* hero card runs edge to edge with this small side margin */
  --container-hero: 1376px;      /* Figma section/hero container (1440 - 2x32) */
  --container-header: 1296px;    /* header box inside the 1376 hero card, 40px inset each side */
  --color-online: #2CD02F;       /* Figma header avatar online dot */
  --gutter: 16px;
  --gap: 16px;
  --header-h: 72px;
  --tap: 44px;
  --drawer-w: 480px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  interpolate-size: allow-keywords;
}
@media (min-width: 720px) { :root { --text-h2: 2.125rem; --text-sub: 1.125rem; } }
@media (min-width: 1100px) { :root { --text-h2: 2.5rem; } }

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
body { margin: 0; font: 400 var(--text-base)/var(--lh-body) var(--font-body); background: var(--color-bg); color: var(--color-fg); -webkit-font-smoothing: antialiased; }
body.has-drawer { overflow: hidden; }
.site-header, .drawer, .section--hero, .section--guarantee, .sticky-cta { line-height: 1.55; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, address { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
address { font-style: normal; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 300; padding: var(--space-3) var(--space-5); background: var(--color-dark); color: var(--color-on-dark); border-radius: var(--r-md); }
.skip-link:focus { top: var(--space-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--color-muted); }
.nw { white-space: nowrap; }

/* Emphasis system: strong (600, same colour) · .mark (highlighter, one key fact per section) · .pull (takeaway line). */
:is(p, li, td, th, summary, blockquote) strong { font-weight: 600; color: var(--color-fg); }
.mark { background: var(--color-mark); color: var(--color-fg); padding: .05em .35em; border-radius: var(--r-xs); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pull { max-width: 46ch; padding-left: var(--space-4); border-left: 2px solid var(--color-fg); font: 500 clamp(1.125rem, 1.05rem + .25vw, 1.25rem)/1.4 var(--font-display); letter-spacing: -.01em; color: var(--color-fg); }

/* Type */
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; overflow-wrap: break-word; hyphens: manual; }
h3, h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; overflow-wrap: break-word; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); text-wrap: balance; }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-base); }
.section__title { max-width: 60ch; text-wrap: balance; }
.section__sub { max-width: 60ch; margin-top: var(--space-2); font-size: var(--text-sub); line-height: 1.5; color: var(--color-muted); }
.section__header > .section__sub { margin-top: 0; }
.section__lead { max-width: 52ch; color: var(--color-muted); }
.prose { display: grid; gap: var(--space-4); max-width: var(--measure); }

/* 3. LAYOUT ---------------------------------------------------------------- */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-pad); background: var(--color-bg); }
main > .section + .section { border-top: 0; }
.section--alt { background: var(--color-surface); --card-bg: var(--color-bg); }
.section--hero { padding-block: 12px var(--space-5); }   /* card starts 12px from the page top; the header floats over it */
.section--hero > .container { width: calc(100% - var(--hero-side) * 2); max-width: none; }
.section__header { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); justify-items: start; }
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }

/* 4. COMPONENTS ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--r-sm); font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: var(--track-ui); text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, filter 150ms ease; }
/* v4.1 button system (client Figma): primary = gold gradient + dark text; secondary / inverted = cream; all uppercase, tracked, 44px min, 8px radius */
.btn--primary { background-image: var(--gold-gradient-btn); background-origin: border-box; background-repeat: no-repeat; background-color: var(--gold-1); color: var(--color-fg); }
.btn--primary:hover { filter: brightness(1.06) saturate(1.05); }
.btn--secondary { background: var(--color-cream); color: var(--color-fg); }
.btn--secondary:hover { background: var(--color-cream-hover); }
.btn--outline { padding-inline: 14px; background: var(--color-surface); border-color: var(--color-line); color: var(--color-fg); }
.btn--outline:hover { background: var(--color-surface-2); }
.btn--outline:not(.site-header__cta) { padding-inline: 20px; background: transparent; border-color: var(--color-line-strong); }   /* tertiary button: outline, no icon */
.btn--outline:not(.site-header__cta):hover { background: var(--color-surface-2); }
.btn--inverted { background: var(--color-cream); color: var(--color-fg); }
.btn--inverted:hover { background: var(--color-cream-hover); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); padding: 0; border: 0; background: none; font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--color-fg); text-decoration: none; cursor: pointer; }
.icon--chev { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.link .icon--chev { margin-left: 0; }   /* the link's 4px flex gap sets the distance */
.icon--down { transform: rotate(90deg); }
.icon--arrow-x { flex: none; width: 14px; height: 14px; }
.link .icon--chev { transition: transform 200ms ease; }
.link:is(:hover, :focus-visible) .icon--chev { transform: translateX(4px); }
.link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.hero-card .link, .cta-banner .link { opacity: .88; transition: opacity 200ms ease; }   /* on-image links: text brightens on hover, chevron slides */
.hero-card .link:is(:hover, :focus-visible), .cta-banner .link:is(:hover, :focus-visible) { opacity: 1; }
.link:not(:has(.icon--chev)) { transition: opacity 200ms ease; }
.link:not(:has(.icon--chev)):hover { opacity: .7; }

/* Gold headline accent (client hero h1): ONE key phrase per headline on a dark/photo background. Gradient is laid per line fragment (clone) so a wrapped phrase restarts bright. Never on light backgrounds. */
.accent { color: var(--gold-2); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .accent { background-image: var(--gold-gradient-text); background-size: var(--accent-w, 100%) 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}

.card { background: var(--card-bg); border-radius: var(--r-lg); padding: var(--space-5); }
/* Feature row (kvalifikacia): dotted top rule, 20px icon, tall gap, then title + body at the bottom */
.feature-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.feature { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); min-height: 260px; padding: var(--space-7); border-radius: var(--r-lg); background: var(--card-bg); }
.feature__text { display: grid; gap: var(--space-2); }
.feature__icon { display: block; color: var(--color-fg); }
.feature__icon .icon { width: 32px; height: 32px; opacity: .55; }
.feature__title { max-width: 32ch; font: 600 1.125rem/1.3 var(--font-body); letter-spacing: -.01em; }
.feature__body { max-width: 270px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }

.check-list { display: grid; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.check-list .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--color-fg); }

.tag { display: inline-block; padding: 1px var(--space-2); border-radius: var(--r-xs); background: var(--color-dark); color: var(--color-surface); font: 600 .6875rem/1.6 var(--font-body); white-space: nowrap; }

/* Placeholders (client material pending): flat tinted card, no pattern */
.placeholder { position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-2); width: 100%; aspect-ratio: var(--ratio, 4/3); border-radius: var(--r-md); background: var(--color-surface-2); border: 1px solid var(--color-line); color: var(--color-muted); font: 400 var(--text-xs)/1.4 var(--font-body); text-align: center; padding: var(--space-3); }
.placeholder[data-ratio="16/9"] { --ratio: 16/9; }
.placeholder .icon { width: 24px; height: 24px; }

.photo { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--color-surface-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Reveal on scroll: short fade only */
.js .reveal { opacity: 0; transition: opacity 400ms ease-out; }
.js .reveal.is-in { opacity: 1; }

/* Accordion icon (FAQ) and animated details */
details::details-content { block-size: 0; overflow: hidden; transition: block-size 250ms ease, content-visibility 250ms allow-discrete; }
details[open]::details-content { block-size: auto; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Sliders (results + reviews): scroll-snap track, drag in JS */
.slider__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.slider__head .section__header { margin-bottom: 0; }
.slider__controls { display: flex; gap: var(--space-2); }
.slider__btn { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-fg); transition: background-color 150ms ease, opacity 150ms ease; }
.slider__btn .icon { width: 20px; height: 20px; }
.slider__btn[data-slider-prev] .icon { transform: scaleX(-1); }
.slider__btn:hover:not(:disabled) { background: var(--color-surface-2); }
.slider__btn:disabled { opacity: .35; cursor: default; }
.slider__track { display: flex; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.slider__track::-webkit-scrollbar, .reviews__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging, .reviews__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* 5. HEADER / STICKY CTA --------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; height: 0; }   /* zero-height: the hero card starts at the page top and the box floats inside it */
.site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--color-surface); border-bottom: 1px solid var(--color-line); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 10px 10px 18px; background: var(--color-surface); border-radius: var(--r-md); transform: translateY(24px); transition: transform 200ms var(--ease); }   /* 12px page margin + 12px card inset; scrolled = 4px from the top */
.site-header.is-scrolled .site-header__inner { transform: translateY(4px); }
.site-header__left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.site-header__tag, .site-header__author { display: none; }
.site-header__right { display: flex; align-items: center; gap: var(--space-3); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 119.14px; height: auto; }
.nav-toggle { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); }
.nav-toggle__bars, .nav-toggle__bars::before { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--color-fg); transition: transform 150ms ease; }
.nav-toggle__bars { position: relative; transform: translateY(-3px); }
.nav-toggle__bars::before { content: ""; position: absolute; top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); top: 6px; }
.site-nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--r-lg); }
.site-header.is-open .site-nav { display: block; }
.site-nav__list { display: grid; }
.site-nav__link { display: flex; white-space: nowrap; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--r-sm); font: 500 var(--text-sm)/1.5 var(--font-display); color: var(--color-fg); text-decoration: none; }
.site-nav__link:hover { background: var(--color-surface-2); }
.site-nav__phone { display: grid; gap: 4px; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-line); margin-top: var(--space-2); }
.site-nav__phone .call-widget { display: flex; width: 100%; min-height: 56px; }   /* two separate full-width tap targets in the mobile menu */

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--color-bg); border-top: 1px solid var(--color-line); transform: translateY(100%); visibility: hidden; transition: transform 250ms ease-out, visibility 0s linear 250ms; }
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform 250ms ease-out; }
.sticky-cta .btn { width: 100%; }

/* 6. SECTIONS -------------------------------------------------------------- */
/* Hero (v4.1, client Figma): gradient card with the two-model composite (hero-couple.jpg = card backdrop + photo, exported from Figma at 2x). Below 1200px the photo sits on top and the copy follows on the card gradient. */
.hero-card { position: relative; display: grid; overflow: hidden; border-radius: 28px; color: var(--color-on-image); }
.hero-card__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(var(--hero-grad-angle), var(--hero-grad-from) 7.39%, var(--hero-grad-to) 102.64%); }
.hero-card__noise { position: absolute; inset: -16px 0; background: url("assets/brand/noise.png") 0 0 / 128px 128px repeat; }
.hero-card__people { position: relative; z-index: 1; width: min(88%, 520px); margin: 84px auto 0; aspect-ratio: 1637 / 1650; }
.hero-card__people img { position: relative; z-index: 1; width: 100%; height: 100%; }   /* above the day card (z 0), below the doc and plan cards (z 2) */
.hero-card.has-parallax .hero-card__people img, .hero-card.has-parallax .hero-card__noise { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .hero-card__people { animation: hero-rise 700ms var(--ease) both; }
}
/* Floating glass info cards over the people photo (decorative, aria-hidden) */
.hero-pops { position: absolute; inset: 0; pointer-events: none; }   /* no stacking context: the cards interleave with the people image */
.hero-pop { z-index: 2; }
.hero-pop { position: absolute; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; color: #fff; background: rgba(255, 255, 255, .16) linear-gradient(120deg, rgba(81, 58, 37, .5), rgba(190, 180, 168, .32)); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); will-change: transform; }
.hero-pop__label { display: block; font: 400 12px/1.3 var(--font-body); opacity: .8; }
.hero-pop__title { display: block; margin-top: 4px; font: 500 20px/1.15 var(--font-display); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.hero-pop__title--sm { font-size: 17px; }
.hero-pop__msg { margin: 4px 0 0; font: 400 14px/1.4 var(--font-body); }
.hero-card__people .hero-pop__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 0; object-view-box: inset(4.6% 21.7% 50.8% 23%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }   /* object-view-box frames the face (centred ~51% / 27% of the portrait); object-position is the fallback */
.hero-pop__role { display: block; margin-top: 2px; font: 400 13px/1.3 var(--font-body); opacity: .8; }
.hero-pop__cond { font-size: .74em; font-weight: 400; letter-spacing: 0; opacity: .88; }   /* "ak to stav kosti dovolí" rides smaller behind the headline so the narrow card does not balloon */
.hero-pop__sig { display: block; width: 200px; max-width: 100%; height: auto; margin-top: 10px; }
.hero-pop--day { display: block; width: 220px; right: 0; top: 50%; }
.hero-pop--doc { width: 280px; left: 0; top: 64%; }
.hero-pop--doc .hero-pop__title { font-size: 16px; }
.hero-pop--plan { display: none; width: 230px; right: 0; top: 75%; }
.hero-pop__steps { position: relative; display: flex; justify-content: space-between; margin: 14px 0 0; padding: 0; list-style: none; }
.hero-pop__steps::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 1px; background: rgba(255, 255, 255, .35); }
.hero-pop__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 0; font: 400 10.5px/1.2 var(--font-body); letter-spacing: -.01em; white-space: nowrap; opacity: .75; }
.hero-pop__steps li:first-child { align-items: flex-start; }
.hero-pop__steps li:last-child { align-items: flex-end; }
.hero-pop__steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); box-sizing: border-box; }
.hero-pop__steps li.is-current { opacity: 1; }
.hero-pop__steps li.is-current::before { width: 10px; height: 10px; margin-top: -1px; background: #fff; }
.hero-pop__steps li:first-child { align-items: flex-start; }
.hero-pop__steps li:last-child { align-items: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .hero-pop { animation: hero-pop-in 600ms ease-out both; animation-delay: 500ms; }
  .hero-pop--doc { animation-delay: 650ms; }
  .hero-pop--plan { animation-delay: 800ms; }
}
/* "Deň zákroku" progress line: a fill travels from dot 1 to dot 2, dot 2 lights up with a soft halo, holds, fades; 6s loop that starts once the card has faded in.
   Only the steps' pseudo-elements and caption animate, so the card's parallax transform is untouched. */
@media (prefers-reduced-motion: no-preference) {
  .hero-pop--day .hero-pop__steps li { z-index: 1; }
  .hero-pop--day .hero-pop__steps::after { content: ""; position: absolute; left: 4px; top: 3px; width: calc(50% - 4px); height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .55), #fff); box-shadow: 0 0 8px rgba(255, 255, 255, .7); transform-origin: left center; animation: hero-day-fill 6s ease-in-out 1.2s infinite backwards; }
  .hero-pop--day .hero-pop__steps li:first-child::before { background: rgba(255, 255, 255, .9); }
  .hero-pop--day .hero-pop__steps li.is-current::before { animation: hero-day-dot 6s ease-in-out 1.2s infinite backwards; }
  .hero-pop--day .hero-pop__steps li.is-current { animation: hero-day-cap 6s ease-in-out 1.2s infinite backwards; }
}
@keyframes hero-day-fill { 0% { transform: scaleX(0); opacity: 1; } 23.3%, 78.3% { transform: scaleX(1); opacity: 1; } 86.7% { transform: scaleX(1); opacity: 0; } 86.8%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes hero-day-dot {
  0%, 22% { background: rgba(255, 255, 255, .4); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  23.3% { background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .4); }
  30% { background: #fff; box-shadow: 0 0 0 7px rgba(255, 255, 255, .24), 0 0 14px rgba(255, 255, 255, .6); }
  36.7%, 78.3% { background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 8px rgba(255, 255, 255, .4); }
  86.7%, 100% { background: rgba(255, 255, 255, .4); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes hero-day-cap { 0%, 22% { opacity: .6; } 30%, 78.3% { opacity: 1; } 86.7%, 100% { opacity: .6; } }
@keyframes hero-pop-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 1200px) {
  /* scattered callouts around the couple (people box = 580 x 585, centred in the 1200 container): --hero-over = how far a card may overhang the photo's right edge while staying 24px inside the hero card */
  .hero-card { --hero-over: min(100px, max(0px, calc(max((100vw - var(--hero-side) * 2) * .06, (100vw - var(--hero-side) * 2 - 1200px) / 2 + 24px) - 24px))); }
  /* doctor cutout: every card sits BEHIND the photo (z 0 < image z 1) and tucks under his silhouette by a few % of the box; padding on the tucked side keeps the text clear.
     body edges in the cutout (share of box width): head 33-58% at 20% height, torso/arms 12-84% at 60-85% height */
  .hero-pop--plan, .hero-pop--doc, .hero-pop--day { z-index: 0; }
  .hero-pop--plan { display: block; width: 270px; right: calc(var(--hero-over) * -1); top: 19%; padding-left: max(20px, calc(270px - var(--hero-over) - 40%)); }   /* text starts right of his head (~60%) */
  .hero-pop--day { width: 300px; right: calc(var(--hero-over) * -1); top: 58%; padding-left: max(20px, calc(300px - var(--hero-over) - 12%)); }   /* text starts right of his arm (~81%), leaves ~200px for the step track */
  .hero-pop--doc { width: 320px; left: calc(22% - 320px); top: 73%; padding-right: calc(11% + 20px); }   /* right end tucks under his left arm (~12%) */
}
@media (min-width: 1200px) and (max-width: 1999px) {
  .hero-pop--day .hero-pop__steps { display: none; }   /* too little room right of his arm for the three-step track below 2000px; the heading carries the message */
  .hero-pop--day { width: 260px; top: 49%; padding-left: max(20px, calc(260px - var(--hero-over) - 19%)); }
}
@media (max-width: 767px) {
  .hero-pop--doc { left: var(--space-3); top: auto; width: auto; max-width: calc(100% - 2 * var(--space-3)); padding: 12px 14px; bottom: calc(var(--space-5) + var(--space-4)); }   /* bottom-left; the day card sits at 50% height (<=600px: hidden) so they never meet */
  .hero-card__people .hero-pop__avatar { width: 48px; height: 48px; }
  .hero-pop--doc .hero-pop__title { font-size: 15px; }
  .hero-pop--day { width: 190px; padding: 12px 14px; right: 0; top: 50%; }
  .hero-pop--day .hero-pop__title { font-size: 16px; }
  .hero-pop--day .hero-pop__steps { display: none; }
}
@media (max-width: 600px) {
  /* the doctor card takes the photo's bottom-left slot (12px inset, above the guarantee badge row; the body overlaps the photo's last 24px); the day card's headline repeats the h1/lead, so it is hidden here to keep both off the faces */
  .hero-pop--day { display: none; }
}
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-card__body { position: relative; z-index: 2; margin-top: -48px; display: grid; gap: var(--space-5); justify-items: start; align-content: center; padding: var(--space-5) var(--space-5) var(--space-6); }
.hero-card .section__title { max-width: 18ch; font-weight: 400; color: var(--color-on-image); text-wrap: wrap; --accent-w: 560px; }
.hero-card .section__lead { max-width: 52ch; color: var(--color-on-image); opacity: .8; }
.hero-card strong { color: inherit; }
.hero-card .link { color: inherit; }
.hero-card__badge { display: flex; align-items: center; gap: var(--space-3); font: 400 13px/1.35 var(--font-body); color: rgba(255, 255, 255, .8); }
.hero-card__badge img { flex: none; height: 40px; width: auto; }
.hero-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5); }
.hero-rating { display: flex; align-items: center; gap: 8px; font: 400 14px/1.3 var(--font-body); color: #fff; opacity: .9; text-decoration: none; }
.hero-rating:hover { opacity: 1; }
.hero-rating .icon--google { width: 16px; height: 16px; fill: #fff; stroke: none; }
.hero-rating__stars { display: flex; gap: 2px; color: var(--gold-2); }
.hero-rating__stars .icon { width: 16px; height: 16px; }
/* Proof row: OUTSIDE the card, directly below it. No fill, hairline top + bottom, left-aligned items with fixed gaps. */
.marquee { position: relative; width: 100%; margin-top: var(--space-6); padding-block: 20px; overflow: hidden; color: var(--color-fg); }
.marquee__track { display: flex; width: max-content; animation: marquee-scroll var(--marquee-duration, 60s) linear infinite; }
.marquee__list { display: flex; flex: none; align-items: center; gap: 48px; margin: 0; padding: 0 48px 0 0; list-style: none; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.proof__item { display: flex; flex: none; align-items: center; gap: 8px; font-size: .9375rem; line-height: 1.25rem; white-space: nowrap; }
.proof__item > .icon { flex: none; width: 20px; height: 20px; stroke-width: 1.25; color: var(--color-fg); }
.proof__item > .icon--google { box-sizing: border-box; padding: 2px; fill: var(--color-fg); stroke: none; }
.proof__text { display: block; }
.proof__value { font-size: inherit; font-weight: 600; color: var(--color-fg); }
.proof__label { font-size: inherit; color: var(--color-muted); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 639px) {
  .marquee__list { gap: 32px; padding-right: 32px; }
}
/* White variant, bottom band of the final banner: the line sits on the band, the edge fade on the marquee so the line stays full width */
.marquee-band { border-top: 1px solid rgba(255, 255, 255, .14); }
.marquee--on-dark { margin-top: 0; padding-block: 18px; color: #fff; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); scrollbar-width: none; }
.marquee--on-dark::-webkit-scrollbar { display: none; }
.marquee--on-dark .proof__item > .icon { color: #fff; }
.marquee--on-dark .proof__item > .icon--google { fill: #fff; }
.marquee--on-dark .proof__label { color: rgba(255, 255, 255, .8); }
.marquee--on-dark .proof__value { color: #fff; }
@media (max-width: 639px) { .marquee--on-dark { padding-block: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scroll-snap-type: none; }
  .marquee__track { animation: none !important; transform: none; }
  .marquee__list[aria-hidden="true"] { display: none; }
}
.section--hero + .section { border-top: 0; }

/* Guarantee badge (replaces the round seal) */

/* Kvalifikacia */
.section--qualification { padding-block: var(--space-8); }
.section--qualification .section__header { margin-bottom: var(--space-6); }
.section--qualification .section__title { max-width: 22ch; }

/* Cas */
/* time section: copy left, gradient data card right (>=1000) */
.time { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); justify-items: start; }
.time > * { min-width: 0; }
.time__copy { display: contents; }   /* stacked: title, sub, link, card, footnote (order) */
.time__title { max-width: 20ch; }
.time__sub { max-width: 44ch; font-size: var(--text-sub); line-height: 1.5; color: var(--color-muted); }
.time__note { order: 1; max-width: 52ch; font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted); }
.time .link { margin-block: var(--space-1); }

/* reusable brown gradient surface: hero gradient tokens + grain, white text */
.surface-brown { --surface-from: var(--hero-grad-from); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); background: linear-gradient(var(--hero-grad-angle), var(--surface-from) 7.39%, var(--hero-grad-to) 102.64%); color: var(--color-on-image); }
.surface-brown::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/brand/noise.png") 0 0 / 128px 128px repeat; pointer-events: none; }

/* data card: declining curve with three milestones (points are HTML over the SVG, positioned in viewBox units) */
.timecard { --surface-from: #7E6A5E; container-type: inline-size; display: grid; place-items: center; width: 100%; margin-block: var(--space-2); aspect-ratio: 5 / 5; }
.timecard__stage { position: relative; width: calc(100% - 2 * var(--space-4)); aspect-ratio: 624 / 520; }   /* small inset; axes and labels live inside the SVG margins */
.timecard__svg { display: block; width: 100%; height: auto; overflow: visible; }
.timecard__curve, .timecard__lit { fill: none; stroke-linecap: round; }
.timecard__curve { stroke: url(#timecard-fade); stroke-width: 2.3; }
.timecard__lit { stroke: #fff; stroke-width: 4; stroke-dasharray: var(--seg, 0) 4000; }
.timecard__leader { stroke: #fff; stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }
.timecard__axis-line, .timecard__axis-arrow, .timecard__axis-tick { fill: none; stroke: #fff; stroke-opacity: .45; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.timecard__axis-text { fill: #fff; fill-opacity: .85; font: 400 13px/1 var(--font-body); }
.js .time:not(.is-in) .timecard__axes { opacity: 0; }
.js .time.is-in .timecard__axes { transition: opacity 500ms ease; }
.timecard__dotg { cursor: pointer; }
.timecard__dotg, .timecard__dot { transform-box: fill-box; transform-origin: center; }
.timecard__halo { fill: #fff; fill-opacity: .25; }
.timecard__dot { fill: #fff; stroke: var(--gold-2); stroke-width: 0; }
.timecard__dotg.is-active .timecard__dot { transform: scale(1.2857); stroke-width: 2.5; }
.timecard__points { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.timecard__item { position: absolute; left: calc(var(--x) / 624 * 100%); width: 0; display: flex; justify-content: center; }
.timecard__item--above { bottom: calc((1 - (var(--y) - 52) / 520) * 100%); }
.timecard__item--below { top: calc((var(--y) + 52) / 520 * 100%); }
.timecard__point { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: max-content; max-width: 27cqw; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; pointer-events: auto; opacity: .55; }
.timecard__item--above .timecard__point { flex-direction: column-reverse; }
.timecard__point[aria-pressed="true"] { opacity: 1; }
.timecard__point:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 6px; border-radius: 6px; }
.timecard__tag { padding: 4px 10px; border-radius: 999px; background: var(--gold-2); color: var(--color-fg); font: 600 12px/1.3 var(--font-body); white-space: nowrap; }
.timecard__cap { font: 500 clamp(16px, 3.2cqw, 20px)/1.15 var(--font-display); letter-spacing: 0; text-wrap: balance; }
@media (max-width: 559px) {
  .timecard { aspect-ratio: 4 / 5; }
  .timecard__point { max-width: 112px; }
  .timecard__tag { padding: 3px 9px; font-size: 11px; }
  .timecard__cap { font-size: 16px; }
  .timecard__stage { width: calc(100% - 2 * var(--space-3)); }
}
@media (prefers-reduced-motion: no-preference) {
  .timecard__lit { transition: stroke-dasharray 450ms ease-out; }
  .timecard__point { transition: opacity 250ms ease; }
  .timecard__dot { transition: transform 250ms ease, stroke-width 250ms ease; }
  /* reveal: curve draws left to right (900ms), then the points pop in one after another */
  .js .timecard__curve { stroke-dasharray: var(--len, 2000); stroke-dashoffset: 0; }
  .js .time:not(.is-in) .timecard__curve { stroke-dashoffset: var(--len, 2000); }
  .js .time.is-in .timecard__curve { transition: stroke-dashoffset 900ms ease-out; }
  .js .time:not(.is-in) .timecard__lit { stroke-opacity: 0; }
  .js .time:not(.is-in) .timecard__dotg, .js .time:not(.is-in) .timecard__leader, .js .time:not(.is-in) .timecard__item { opacity: 0; }
  .js .time:not(.is-in) .timecard__dotg { transform: scale(.4); }
  .js .time.is-in .timecard__dotg { transition: opacity 300ms ease calc(900ms + var(--i) * 120ms), transform 300ms cubic-bezier(.3, 1.5, .5, 1) calc(900ms + var(--i) * 120ms); }
  .js .time.is-in .timecard__leader, .js .time.is-in .timecard__item { transition: opacity 300ms ease calc(900ms + var(--i) * 120ms); }
}

/* Vysledky */
.results-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.results-grid[hidden] { display: none; }
.results-grid--more { margin-top: var(--space-4); }
.results-grid .case { filter: drop-shadow(var(--shadow-card)); }
.case { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: 0; border: 0; background: none; }
.results__more { display: flex; justify-content: center; margin-top: var(--space-6); }
.compare-ba { --pos: 50%; position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: var(--r-lg); touch-action: pan-y; user-select: none; cursor: ew-resize; }
.compare-ba .compare-ba__layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; width: auto; aspect-ratio: auto; border: 0; border-radius: 0; padding: var(--space-3); }
.compare-ba { background: var(--color-surface-2); }
.compare-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-ba__img[hidden] { display: none; }
.compare-ba__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.results__note { margin-top: var(--space-4); font-size: var(--text-xs); }
.compare-ba__label { position: absolute; top: var(--space-3); padding: 3px 8px; border-radius: var(--r-xs); background: var(--color-surface); font: 600 .6875rem/1.2 var(--font-body); letter-spacing: .06em; color: var(--color-fg); pointer-events: none; }
.compare-ba__label--before { left: var(--space-3); }
.compare-ba__label--after { right: var(--space-3); }
.compare-ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }  /* client request: translucent line with background blur */
.compare-ba__handle { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 1px solid var(--color-line-strong); border-radius: 50%; background: var(--color-surface); color: var(--color-fg); }
.compare-ba__handle .icon { width: 20px; height: 20px; }

/* CTA banner: photo card, copy set into the empty backdrop; image on top and copy below on dark on mobile */
.cta-banner { position: relative; display: grid; overflow: hidden; border-radius: var(--r-xl); background: var(--color-hero-bg); color: var(--color-on-image); }
.cta-banner picture { display: contents; }
.cta-banner__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; object-position: 50% 0; background: var(--color-hero-bg); }
.cta-banner:not(.cta-banner--center) .cta-banner__img { object-position: 0 50%; }
.cta-banner__body { display: grid; gap: var(--space-3); justify-items: start; align-content: center; padding: var(--space-5); }

/* Lekar */
.quote { display: grid; gap: var(--space-2); }
.quote__by { font-size: var(--text-sm); color: var(--color-muted); padding-left: calc(var(--space-4) + 2px); }

/* Video */
.video { display: grid; gap: var(--space-5); }
.video > * { min-width: 0; }
.video__intro { display: grid; gap: var(--space-3); justify-items: start; align-content: center; }
.video__intro .section__title { max-width: 22ch; }
.video__sub { max-width: 34ch; font-size: var(--text-sub); line-height: 1.5; color: var(--color-muted); }
.video__rating { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1; }
.video__rating strong { font-weight: 600; }
.video__rating .icon { width: 16px; height: 16px; margin-left: -2px; color: var(--color-accent); }
.video__row { display: flex; gap: var(--space-4); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; }
.video__row.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.video__arrows { display: none; gap: var(--space-2); }
.video__arrows .slider__btn[data-video-prev] .icon { transform: scaleX(-1); }
.video__row::-webkit-scrollbar { display: none; }
.vcard { position: relative; flex: 0 0 62vw; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: var(--color-surface-2); scroll-snap-align: start; }
.vcard__inner { position: absolute; inset: 0; background: var(--color-taupe); }   /* the layer that fades to the card's flat beige and back */
.vcard__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__controls { position: absolute; z-index: 2; top: 12px; left: 12px; display: flex; gap: 8px; }
.vcard__btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--vcard-btn-bg); color: #fff; cursor: pointer; transition: background-color 150ms ease; }
.vcard__btn:hover { background: var(--vcard-btn-bg-hover); }
.vcard__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vcard__btn .icon { width: 18px; height: 18px; }
.vcard__btn .icon--pause, .vcard__btn .icon--off { display: none; }
.vcard__btn[aria-pressed="true"] .icon--play, .vcard__btn[aria-pressed="true"] .icon--on { display: none; }
.vcard__btn[aria-pressed="true"] .icon--pause, .vcard__btn[aria-pressed="true"] .icon--off { display: block; }
.vcard__progress { position: absolute; z-index: 2; inset: auto 0 0 0; height: 3px; background: rgba(255, 255, 255, .25); pointer-events: none; }
.vcard__progress i { display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, .85); transform: scaleX(0); transform-origin: 0 50%; }
.vcard__media { cursor: pointer; }
.vcard__info { position: absolute; z-index: 1; inset: auto 0 0 0; display: grid; gap: 2px; padding: 56px 16px 16px; background: linear-gradient(to bottom, rgba(43, 41, 36, 0), rgba(43, 41, 36, .78)); color: #fff; pointer-events: none; }
.vcard__name { overflow: hidden; font: 600 15px/1.3 var(--font-body); white-space: nowrap; text-overflow: ellipsis; }
.vcard__topic { font: 400 14px/1.35 var(--font-body); color: rgba(255, 255, 255, .85); }

/* Proces: compact step list, only the active step's body is open. Pinned on desktop (tall track + sticky block, JS adds .is-pinned),
   plain accordion below 1100px / reduced motion; without JS every body stays visible. */
.process { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.process > * { min-width: 0; }
.process__head { display: grid; gap: 28px; justify-items: start; }
.process__head .section__header { gap: 14px; margin-bottom: 0; }
.timeline { --tl-fs: 19px; --tl-lh: calc(var(--tl-fs) * 1.2); --tl-pad: 14px; --tl-dot: calc(var(--tl-pad) + var(--tl-lh) / 2); --dot-cx: calc(7px - var(--space-7)); position: relative; display: grid; margin: calc(-1 * var(--tl-pad)) 0 0; padding: 0 0 0 var(--space-7); list-style: none; }
@media (min-width: 720px) { .timeline { --tl-fs: 20px; } }
.timeline__step { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding-block: var(--tl-pad); }
/* rails: base + gold progress, positioned/sized by main.js (--rail-top/-len/-prog) so the tip meets the active dot centre */
.timeline::before, .timeline::after { content: ""; position: absolute; left: calc(var(--dot-cx) + var(--space-7) - 1px); top: var(--rail-top, 0); width: 2px; border-radius: 1px; pointer-events: none; }
.timeline::before { height: var(--rail-len, 0); background: rgba(43, 41, 36, .12); }
.timeline::after { height: var(--rail-prog, 0); background: linear-gradient(180deg, #816A3B 0%, #DAB872 55%, #FFDB90 100%); filter: drop-shadow(0 0 6px rgba(218, 184, 114, .55)); transition: height 500ms cubic-bezier(.22, .8, .24, 1); }
.timeline__step::before { content: ""; position: absolute; z-index: 1; left: var(--dot-cx); top: var(--tl-dot); width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-bg); box-shadow: inset 0 0 0 2px rgba(43, 41, 36, .25); transition: width 350ms ease, height 350ms ease, background-color 350ms ease, box-shadow 350ms ease; }
.timeline__step.is-done::before { background: #C9A862; box-shadow: none; }
.timeline__step.is-active::before { width: 14px; height: 14px; background: linear-gradient(135deg, #FFDB90 0%, #DAB872 50%, #816A3B 100%); box-shadow: 0 0 0 6px rgba(218, 184, 114, .22), 0 0 18px rgba(218, 184, 114, .6); }
@media (prefers-reduced-motion: no-preference) { .timeline__step.is-active::before { animation: tl-halo 2.4s ease-in-out infinite; } }
@keyframes tl-halo { 0%, 100% { box-shadow: 0 0 0 6px rgba(218, 184, 114, .22), 0 0 18px rgba(218, 184, 114, .6); } 50% { box-shadow: 0 0 0 9px rgba(218, 184, 114, .1), 0 0 24px rgba(218, 184, 114, .75); } }
@media (prefers-reduced-motion: reduce) { .timeline::after, .timeline__step::before { transition: none; } }
.timeline__num { grid-row: 1; align-self: baseline; font: 500 var(--tl-num, 13px)/var(--tl-lh) var(--font-display); letter-spacing: -.02em; color: var(--color-muted); }
.timeline__heading { grid-row: 1; grid-column: 2; align-self: baseline; margin: 0; font: 500 var(--tl-fs)/1.2 var(--font-display); letter-spacing: -.01em; }
.timeline__btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--color-fg); text-align: left; cursor: default; }
.timeline__panel { grid-row: 2; grid-column: 2; }
.timeline__body { max-width: var(--tl-body-w, 560px); font-size: var(--tl-body-fs, 1rem); line-height: 1.55; color: var(--color-muted); }
.timeline__body::before { content: ""; display: block; height: 8px; }
.js .timeline__btn { cursor: pointer; }
.js .timeline__num, .js .timeline__btn { opacity: .45; transition: opacity 350ms ease; }
.js .timeline__step.is-active .timeline__num, .js .timeline__step.is-active .timeline__btn { opacity: 1; }
.timeline__step.is-active .timeline__num { color: #816A3B; }
.js .timeline__step:not(.is-active) .timeline__btn:hover { opacity: .8; }
.js .timeline__panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 350ms ease, opacity 350ms ease, visibility 0s linear 350ms; }
.js .timeline__step.is-active .timeline__panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.js .timeline__panel > .timeline__body { min-height: 0; overflow: hidden; }

/* Clinic video card (left column, under the button) */
.clinic-card { position: relative; justify-self: stretch; width: 100%; max-width: 720px; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--color-surface-2); color: #fff; }
.clinic-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 41, 36, .7), rgba(43, 41, 36, 0) 55%); pointer-events: none; }
.clinic-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clinic-card__cap { position: absolute; z-index: 1; left: 20px; bottom: 20px; right: 76px; display: grid; gap: 4px; }
.clinic-card__label { font: 400 12px/1.3 var(--font-body); opacity: .8; }
.clinic-card__line { max-width: 26ch; font: 500 var(--p-cap, 17px)/1.25 var(--font-display); letter-spacing: -.01em; }
.clinic-card__expand { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: rgba(43, 41, 36, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background-color 150ms ease; }
.clinic-card__expand:hover { background: rgba(43, 41, 36, .65); }
.clinic-card__expand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.clinic-card__expand .icon { width: 20px; height: 20px; }

/* Lightbox (reuses the drawer open/close/focus/scroll-lock code) */
.drawer.lightbox { align-items: center; justify-content: center; }
.drawer.lightbox .drawer__backdrop { background: rgba(20, 18, 15, .86); }
.drawer.lightbox .lightbox__panel { width: min(1100px, calc(100% - 2 * var(--gutter))); max-width: none; height: auto; background: none; border-radius: 0; overflow: visible; transform: none; opacity: 0; transition: opacity 250ms ease; }
.drawer.lightbox.is-open .lightbox__panel { opacity: 1; transform: none; }
.lightbox__video { display: block; width: 100%; max-height: calc(100vh - 112px); aspect-ratio: 16 / 9; border-radius: 12px; background: #000; object-fit: contain; }
.lightbox__close { position: absolute; z-index: 1; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-md); background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color 150ms ease; }
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__close .icon { width: 22px; height: 22px; }

/* Video lightbox (.vlb): one shared 9:16 dialog for the testimonial cards; main.js handles focus, Esc, arrows, scroll lock */
.vlb { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; opacity: 0; }
.vlb[hidden] { display: none; }
.vlb.is-open { opacity: 1; }
.vlb__backdrop { position: absolute; inset: 0; background: rgba(20, 18, 15, .86); }
.vlb__stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 100%; pointer-events: none; }
.vlb__stage > * { pointer-events: auto; }
.vlb__figure { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: #000; }
.vlb__video { display: block; width: min(92vw, calc(88vh * 9 / 16)); width: min(92vw, calc(88dvh * 9 / 16)); aspect-ratio: 9 / 16; max-height: 88vh; max-height: 88dvh; object-fit: contain; background: #000; }
.vlb__cap { position: absolute; z-index: 1; inset: 0 0 auto 0; display: grid; gap: 2px; padding: 16px 64px 40px 16px; background: linear-gradient(to top, rgba(43, 41, 36, 0), rgba(43, 41, 36, .7)); color: #fff; pointer-events: none; }
.vlb__name { font: 600 15px/1.3 var(--font-body); }
.vlb__topic { font: 400 14px/1.35 var(--font-body); color: rgba(255, 255, 255, .85); }
.vlb__btn { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color 150ms ease; }
.vlb__btn:hover { background: rgba(255, 255, 255, .26); }
.vlb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vlb__btn .icon { width: 22px; height: 22px; }
.vlb__close { position: absolute; z-index: 2; top: 16px; right: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .vlb { transition: opacity 200ms ease; }
}
@media (max-width: 600px) {
  .vlb__stage { display: block; width: 100%; }
  .vlb__figure { width: calc(100% - 24px); margin-inline: 12px; }
  .vlb__video { width: 100%; max-height: 78vh; max-height: 78dvh; }
  .vlb__btn--prev, .vlb__btn--next { position: fixed; bottom: 16px; }
  .vlb__btn--prev { left: 12px; }
  .vlb__btn--next { right: 12px; }
  .vlb__close { top: 12px; right: 12px; }
}

/* Pinned mode (set by main.js at >=1100px without reduced motion): the track is tall, the two-column block sticks below the header.
   The block height is the available viewport (header and padding taken off) and never depends on the content, so opening/closing
   bodies cannot change the scroll maths. All sizes below are fluid in viewport height (720 -> 1100) capped by viewport width (1100 -> 1600). */
.section--process {
  --proc-header: 80px;
  --proc-pad: clamp(24px, 5svh, 64px);
  --pin-h: calc(100svh - var(--proc-header) - 2 * var(--proc-pad));
  --pin-top: calc(var(--proc-header) + var(--proc-pad));
  --p-h2: clamp(36px, min(calc(5.2632svh - 1.895px), calc(4vw - 8px)), 56px);
  --p-sub: clamp(16px, min(calc(1.0526svh + 8.421px), calc(.8vw + 7.2px)), 20px);
  --p-title: clamp(20px, min(calc(2.6316svh + 1.053px), calc(2vw - 2px)), 30px);
  --p-body: clamp(15px, min(calc(1.0526svh + 7.421px), calc(.8vw + 6.2px)), 19px);
  --p-num: clamp(13px, min(calc(.5263svh + 9.211px), calc(.4vw + 8.6px)), 15px);
  --p-cap: clamp(17px, min(calc(.7895svh + 11.316px), calc(.6vw + 10.4px)), 20px);
  --p-pad: clamp(8px, 1.1svh, 18px);
  padding-top: 4.5rem;
}
.section--process.is-pinned .process-track { height: calc(var(--pin-h) + 8 * 22vh); }
.section--process.is-pinned .process { position: sticky; top: var(--pin-top); height: var(--pin-h); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.section--process.is-pinned .section__title { font-size: var(--p-h2); }
.section--process.is-pinned .section__sub { font-size: var(--p-sub); }
.section--process.is-pinned .process__head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2.6svh, 28px); height: 100%; min-height: 0; }
.section--process.is-pinned .timeline { --tl-fs: var(--p-title); --tl-num: var(--p-num); --tl-pad: var(--p-pad); --tl-body-fs: var(--p-body); --tl-body-w: 620px; height: calc(100% + var(--tl-pad)); display: flex; flex-direction: column; justify-content: space-between; }
.section--process.is-pinned .timeline__step { flex: none; }
.section--process.is-pinned .timeline__step:last-child { padding-bottom: 0; }
.step__num { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-line-strong); border-radius: var(--r-sm); background: var(--color-surface); font: 500 var(--text-xs)/1 var(--font-display); color: var(--color-fg); }
.step__title { grid-column: 2; padding-top: var(--space-1); margin-bottom: var(--space-1); }
.step__body { grid-column: 2; font-size: var(--text-sm); color: var(--color-muted); max-width: var(--measure); }

/* CTA banner: photo backdrop, copy set into the empty area; image on top and copy below on dark on mobile */
.section--cta { padding-block: var(--space-5); }
.cta-banner__main { display: grid; gap: var(--space-2); }
.cta-banner__title { font-size: var(--text-h2); }
.cta-banner__text { max-width: 44ch; line-height: 1.55; }
.cta-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.cta-banner:not(.cta-banner--center) .cta-banner__actions { flex-direction: column; align-items: flex-start; gap: var(--space-3); }   /* Figma cta-1: button above the phone link */
.cta-banner .link { color: inherit; }
.cta-banner__title { --accent-w: 250%; }

/* Vyroba */
.make__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.make-card { position: relative; min-width: 0; display: flex; flex-direction: column; min-height: 500px; }
.js .make-card.reveal { transition-delay: var(--rd, 0ms); }
.make-card__tile { position: relative; isolation: isolate; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-xl); background: #E6DFD3; }
.make-card__title { margin-top: 20px; font: 500 22px/1.25 var(--font-display); letter-spacing: 0; }
.make-card__body { margin: 8px 0 20px; font-size: 1rem; line-height: 1.55; color: var(--color-muted); }
.make-card__more { align-self: flex-start; margin-top: auto; }
.make-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.make-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; }
.make-step__num { grid-row: 1 / span 2; padding-top: 2px; font: 500 13px/1.4 var(--font-display); color: var(--color-muted); }
.make-step__title { margin: 0; font: 600 16px/1.35 var(--font-body); letter-spacing: 0; }
.make-step__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.make-card__label, .make-card__close { display: none; }
/* JS: the steps are a beige overlay over the whole card (same rect, no layout shift); hidden + inert while closed */
.js .make-card__panel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-xl); background: #EFEBE4; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity 260ms ease-out, transform 260ms ease-out, visibility 0s linear 260ms; }
.js .make-card.is-open .make-card__panel { visibility: visible; opacity: 1; transform: none; transition: opacity 260ms ease-out, transform 260ms ease-out, visibility 0s; }
.js .make-card.is-open .make-card__more { visibility: hidden; }   /* its corner would peek past the overlay radius */
.js .make-card__label { display: block; margin: 0; padding-right: 48px; font: 500 22px/1.25 var(--font-display); letter-spacing: 0; }
.js .make-card__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #FFFFFF; color: var(--color-fg); cursor: pointer; }
.js .make-card__close:hover { background: var(--color-surface-3); }
.js .make-card__panel-in { flex: 1; min-height: 0; margin-top: 16px; overflow-y: auto; scrollbar-width: thin; }
html:not(.js) .make-card { min-height: 0; }
html:not(.js) .make-card__more { display: none; }
html:not(.js) .make-card__panel-in { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .js .make-card__panel, .js .make-card.is-open .make-card__panel { transition: none; transform: none; } }
@media (min-width: 600px) {
  .make__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .make-hero { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .make__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .make-hero { grid-column: auto; }
  .make-hero__title { font-size: clamp(20px, 1.65vw, 24px); }
}
@media (min-width: 1100px) {
  .make__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* Fourth card: headline on top, the exploded bridge render (jaw / bar / bridge, one 768x1376 canvas) levitating below.
   The canvas is sized by the stage height (or width, whichever is tighter) so nothing is clipped. */
.make-hero { position: relative; min-width: 0; min-height: 440px; display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-xl); background: var(--color-surface-2); }
.make-hero__title { margin: 0; font-size: 24px; line-height: 1.15; text-wrap: balance; }
.assembly { flex: 1; min-height: 260px; margin: 12px -12px 0; display: flex; align-items: flex-end; justify-content: center; container-type: size; }
.assembly__canvas { --ch: min(100cqh, 100cqw * 830 / 600); position: relative; flex: none; aspect-ratio: 600 / 830; height: var(--ch); margin-bottom: calc(var(--ch) * -.02); }   /* the empty strip below the shadow may sit in the card padding */
.assembly__layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.assembly__jaw { z-index: 1; }
.assembly__bar { z-index: 2; translate: 0 16.7%; }
.assembly__bridge { z-index: 3; translate: 0 39%; }
.assembly__shadow { position: absolute; z-index: 0; left: 8%; width: 84%; top: 92%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(43, 41, 36, .16), rgba(43, 41, 36, 0)); filter: blur(4px); }
@media (prefers-reduced-motion: no-preference) {
  .assembly__canvas { animation: asm-bob 4.8s ease-in-out infinite; animation-play-state: paused; }
  .assembly__shadow { animation: asm-shadow 4.8s ease-in-out infinite; animation-play-state: paused; }
  .assembly__bridge, .assembly__bar { animation: 5.5s cubic-bezier(.45, 0, .2, 1) infinite alternate paused; }
  .assembly__bridge { animation-name: asm-bridge; }
  .assembly__bar { animation-name: asm-bar; }
  .assembly.is-live .assembly__canvas, .assembly.is-live .assembly__shadow, .assembly.is-live .assembly__bridge, .assembly.is-live .assembly__bar { animation-play-state: running; }
}
/* one way: apart (0-18%) > bridge lowers 22.3% over the bar, which slips behind it (18-46%) > short beat > bridge and bar lower 16.7% onto the jaw (50-78%) > together (78-100%); alternate reverses it */
@keyframes asm-bridge { 0%, 18% { translate: 0 0; } 46%, 50% { translate: 0 22.3%; } 78%, 100% { translate: 0 39%; } }
@keyframes asm-bar { 0%, 50% { translate: 0 0; } 78%, 100% { translate: 0 16.7%; } }
/* alignment guides: four dotted verticals through the implant axes, behind the parts; clearer while apart, faint once seated */
.assembly__guides { --g: repeating-linear-gradient(to bottom, rgba(43, 41, 36, .34) 0 2px, transparent 2px 8px); position: absolute; z-index: 0; inset: 2% 0 14%; opacity: .3; pointer-events: none;
  background: var(--g) 17.5% 0 / 1px 100% no-repeat, var(--g) 38.3% 0 / 1px 100% no-repeat, var(--g) 56.3% 0 / 1px 100% no-repeat, var(--g) 77% 0 / 1px 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .assembly__guides { animation: asm-guides 5.5s cubic-bezier(.45, 0, .2, 1) infinite alternate paused; }
  .assembly.is-live .assembly__guides { animation-play-state: running; }
}
@keyframes asm-guides { 0%, 22% { opacity: 1; } 78%, 100% { opacity: .3; } }
@keyframes asm-bob { 0%, 100% { translate: 0 6px; } 50% { translate: 0 -6px; } }
@keyframes asm-shadow { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }

/* Piliere: doctor card with an animated (mock) signature + open list of three pillars. Stacked below 1000px, 5fr / 7fr above. */
.pillars-grid { display: grid; gap: var(--space-6); }
.doc-sign { margin: 0; aspect-ratio: 4 / 5; max-height: 520px; }
.doc-sign__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.doc-sign::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(43, 41, 36, 0) 45%, rgba(43, 41, 36, .72) 100%); pointer-events: none; }
.doc-sign__caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 2px; padding: 28px; }
.doc-sign__sig { display: block; width: 200px; max-width: 100%; height: auto; margin-bottom: var(--space-2); }   /* white signature SVG on the dark gradient over the portrait */
.doc-sign__more { position: absolute; z-index: 2; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-sm); font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: var(--track-ui); text-transform: uppercase; color: #fff; background: rgba(43, 41, 36, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background-color 150ms ease; }
.doc-sign__more:hover { background: rgba(43, 41, 36, .56); }
.doc-sign__more:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.doc-sign__name { font: 600 16px/1.3 var(--font-body); color: #fff; }
.doc-sign__role { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.pillars-content { align-self: center; }
.pillars-content .section__title { max-width: 30ch; }
.pillars-content .section__sub { margin: var(--space-2) 0 var(--space-5); color: var(--color-muted); }
.pillars-content .accent { background-image: none; color: inherit; -webkit-text-fill-color: currentColor; }
.pillars-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pillars-list__item { border-radius: var(--r-lg); background: #fff; }
.pillars-list__title { margin: 0; font: inherit; letter-spacing: 0; }
.pillars-list__btn { display: flex; align-items: center; gap: var(--space-4); width: 100%; margin: 0; padding: 20px 24px; border: 0; border-radius: var(--r-lg); background: none; font: 500 20px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--color-fg); text-align: left; cursor: default; }
.pillars-list__btn:focus-visible { outline: 2px solid var(--color-fg); outline-offset: -2px; }
.pillars-list__name { flex: 1 1 auto; min-width: 0; }
.pillars-list__icon { flex: none; width: 28px; height: 28px; stroke-width: 1.25; color: var(--color-fg); }
.pillars-list__btn .pm-icon { display: none; }
.pillars-list__text { display: grid; gap: 8px; padding-inline: calc(24px + 28px + var(--space-4)) 24px; }
.pillars-list__text::after { content: ""; height: 12px; }
.pillars-list__claim { font: 400 16px/1.5 var(--font-body); color: var(--color-fg); }
.pillars-list__body { max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--color-muted); }
.js .pillars-list__btn { cursor: pointer; }
.js .pillars-list__btn .pm-icon { display: block; }
.js .pillars-list__btn[aria-expanded="true"] .pm-icon::after { transform: rotate(90deg) scaleX(0); }
.js .pillars-list__btn { transition: padding-bottom 320ms ease; }
.js .pillars-list__item.is-open .pillars-list__btn { padding-bottom: 12px; }
.js .pillars-list__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 320ms ease, visibility 0s linear 320ms; }
.js .pillars-list__item.is-open .pillars-list__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.js .pillars-list__panel > .pillars-list__text { min-height: 0; overflow: hidden; }
@media (min-width: 720px) { .pillars-list__btn { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .js .pillars-list__panel, .js .pillars-list__btn { transition: none; } }
@media (max-width: 559px) { .doc-sign { aspect-ratio: 3 / 4; } }
@media (min-width: 1000px) {
  .pillars-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: stretch; }
  .doc-sign { aspect-ratio: auto; max-height: none; min-height: 520px; }
}

/* Plus / minus accordion icon (FAQ): two 2px bars, the vertical one collapses when open */
.pm-icon { position: relative; flex: none; width: 20px; height: 20px; color: var(--color-fg); }
.pm-icon::before, .pm-icon::after { content: ""; position: absolute; left: 3px; top: 9px; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 250ms ease; }
.pm-icon::after { transform: rotate(90deg); }
details[open] > summary > .pm-icon::after { transform: rotate(90deg) scaleX(0); }

/* Garancia: figure-led section */

/* Cena (optional) */
.price { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.price > * { min-width: 0; }
.price__text { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.price__text-body { max-width: 52ch; font-size: var(--text-sm); color: var(--color-muted); }
.price__text .section__header { margin-bottom: 0; }
.price__card { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface-2); }   /* Figma price-card: surface-2 */
.price__label { font-size: var(--text-sm); }
.price__value { font: 500 clamp(1.375rem, 1.2rem + .8vw, 1.625rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.price__sub { font-size: var(--text-sm); }
.price__incl { margin: var(--space-1) 0 calc(var(--space-1) * -1); font: 600 1rem/1.35 var(--font-body); letter-spacing: 0; }
.price__card .check-list { gap: var(--space-1); font-size: var(--text-sm); }
.price__card .check-list .icon { margin-top: 0; }
.price__divider { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--color-line); }
.price__fin { font-weight: 600; }
.price__note { font-size: var(--text-xs); }

/* Porovnanie: photo panel (full-bleed like the hero card) holding a three-surface table card */
.section--compare { background: #fff; }   /* the band around the panel is white */
.section--compare > .compare-panel { width: calc(100% - var(--hero-side) * 2); max-width: none; padding: 40px 16px; border-radius: var(--r-xl); background: linear-gradient(rgba(43, 41, 36, .28), rgba(43, 41, 36, .38)), url("assets/photos/clinic/clinic-reception-lounge.webp") 50% 50% / cover no-repeat, #3A3631; }
.section--compare .section__header { justify-items: start; margin-bottom: 32px; text-align: left; }
.section--compare .section__title { max-width: 22ch; color: #fff; text-wrap: balance; }
.section--compare .section__header { gap: 0; }
.compare__lead { max-width: 30ch; margin: 14px 0 24px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.table-scroll { max-width: 980px; margin: 8px auto; border-radius: var(--r-lg); background: #EFEBE4; box-shadow: 0 24px 60px rgba(43, 41, 36, .16); }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 1rem; line-height: 1.5; text-align: left; }
.compare th, .compare td { padding: 18px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(43, 41, 36, .08); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { vertical-align: middle; font-size: .9375rem; font-weight: 600; }
.compare thead th { padding: 20px 24px; }
.compare thead th:not(.compare__col--recommended) { font-size: 15px; font-weight: 600; color: var(--color-muted); }
.compare__logo { display: block; width: auto; height: 26px; }
.compare th:first-child, .compare .compare__them { position: static; border-right: 0; }
.compare tbody th { width: 28%; font-weight: 600; }
.compare th:first-child { background: #EFEBE4; color: var(--color-fg); }
.compare .compare__col--recommended, .compare .compare__us { background: #fff; color: var(--color-fg); font-weight: 500; }
.compare thead th:last-child, .compare .compare__them { background: #E8E3DE; color: var(--color-muted); }
.compare thead th:first-child { border-top-left-radius: var(--r-lg); }
.compare thead th:last-child { border-top-right-radius: var(--r-lg); }
.compare tbody tr:last-child th { border-bottom-left-radius: var(--r-lg); }
.compare tbody tr:last-child .compare__them { border-bottom-right-radius: var(--r-lg); }
.compare__cell { display: flex; gap: 10px; align-items: flex-start; }
.compare__check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: linear-gradient(120.5deg, #DAB872, #FFDB90 50%, #C9A862); color: #2B2924; }
.compare__check .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.compare__dash { flex: none; width: 20px; text-align: center; color: var(--color-muted); }
/* raised middle column: its top and bottom cells grow 8px outside the card (pseudo-elements), side shadows only so cells never smear into each other */
.compare .compare__col--recommended, .compare .compare__us { position: relative; z-index: 1; box-shadow: -10px 0 14px -10px rgba(0, 0, 0, .2), 10px 0 14px -10px rgba(0, 0, 0, .2); }
.compare thead .compare__col--recommended::before, .compare tbody tr:last-child .compare__us::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: #fff; box-shadow: -10px 0 14px -10px rgba(0, 0, 0, .2), 10px 0 14px -10px rgba(0, 0, 0, .2); }
.compare thead .compare__col--recommended::before { bottom: 100%; border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: 0 -6px 14px -6px rgba(0, 0, 0, .18), -10px 0 14px -10px rgba(0, 0, 0, .2), 10px 0 14px -10px rgba(0, 0, 0, .2); }
.compare tbody tr:last-child .compare__us::after { top: 100%; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .18), -10px 0 14px -10px rgba(0, 0, 0, .2), 10px 0 14px -10px rgba(0, 0, 0, .2); }
@media (min-width: 720px) {
  .section--compare > .compare-panel { padding: 72px 40px; }
  .section--compare .section__header { margin-bottom: 48px; }
}
@media (min-width: 1100px) {   /* headline left, table card right, both inside a centred 1200 band; the left side of the photo is darkened for the white headline */
  .section--compare > .compare-panel { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 6.5fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; padding: 72px max(40px, calc((100% - 1200px) / 2 - var(--hero-side))); background: linear-gradient(90deg, rgba(43, 41, 36, .5), rgba(43, 41, 36, 0) 55%), linear-gradient(rgba(43, 41, 36, .28), rgba(43, 41, 36, .38)), url("assets/photos/clinic/clinic-reception-lounge.webp") 50% 50% / cover no-repeat, #3A3631; }
  .section--compare .section__header { grid-column: 1; margin-bottom: 0; }
  .section--compare .section__title { max-width: 12ch; }
  .section--compare .table-scroll { grid-column: 2; width: 100%; max-width: none; margin: 8px 0; }
  .compare th, .compare td { padding: 16px 20px; }
  .compare thead th { padding: 20px 24px; }
  .compare tbody th { width: 26%; }
}
@media (max-width: 719px) {
  /* three columns kept on phones: smaller type, tight padding, checks above the text */
  .section--compare > .compare-panel { padding: 32px 10px 14px; }
  .section--compare .section__header { padding-inline: 8px; }
  .compare { font-size: 12px; line-height: 1.35; }
  .compare th, .compare td { padding: 10px 8px; }
  .compare thead th, .compare thead th:not(.compare__col--recommended) { padding: 12px 8px; font-size: 11px; line-height: 1.25; }
  .compare tbody th { width: 27%; font-size: 12px; hyphens: auto; overflow-wrap: anywhere; }
  .compare__logo { height: 15px; max-width: 100%; }
  .compare__cell { flex-direction: column; gap: 5px; }
  .compare__check { width: 16px; height: 16px; margin-top: 0; }
  .compare__check .icon { width: 10px; height: 10px; }
  .compare__dash { width: auto; line-height: 16px; }
  .compare thead .compare__col--recommended::before, .compare tbody tr:last-child .compare__us::after { height: 5px; }
}

/* Testimonials */
.reviews .slider__head { align-items: end; }
.reviews__body { min-width: 0; }
.reviews__layout { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.reviews__summary { display: grid; gap: var(--space-2); justify-items: start; align-content: start; padding: var(--space-5); background: var(--card-bg); border-radius: var(--r-lg); }
.reviews__google { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .9375rem; font-weight: 600; line-height: 1.2; }
.reviews__g { flex: none; width: 24px; height: 24px; object-fit: contain; }
.reviews__score { font: 500 1.625rem/1.1 var(--font-display); letter-spacing: -.02em; }
.reviews__summary .link { margin-top: var(--space-2); }
.reviews__stars, .review__stars { display: flex; gap: 2px; color: var(--color-accent); }
.reviews__stars .icon { width: 16px; height: 16px; }
.review__stars .icon { width: 16px; height: 16px; }
.reviews__count { font-size: var(--text-sm); }
.reviews__track { display: flex; gap: var(--space-4); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.review { display: flex; flex-direction: column; gap: var(--space-3); flex: 0 0 min(82vw, 300px); padding: var(--space-5); background: var(--card-bg); border-radius: var(--r-lg); scroll-snap-align: start; }
.review__author { display: flex; align-items: center; gap: var(--space-3); }
.review__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-2); font: 500 var(--text-base)/1 var(--font-display); object-fit: cover; }
/* Google avatar palette: initials badges get one of 8 colours from a hash of the reviewer's name (tools/build-reviews.py) */
.review__avatar--c0 { background: #1A73E8; color: #fff; }
.review__avatar--c1 { background: #D93025; color: #fff; }
.review__avatar--c2 { background: #F9AB00; color: #202124; }
.review__avatar--c3 { background: #1E8E3E; color: #fff; }
.review__avatar--c4 { background: #9334E6; color: #fff; }
.review__avatar--c5 { background: #E8710A; color: #fff; }
.review__avatar--c6 { background: #12B5CB; color: #fff; }
.review__avatar--c7 { background: #E52592; color: #fff; }
.review__who { display: grid; min-width: 0; line-height: 1.3; }
.review__name { font-weight: 600; }
.review__source { font-size: var(--text-xs); }
.review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; font-size: var(--text-sm); }

/* FAQ: underlined text tabs, hairline accordions */
.faq-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.faq-layout > * { min-width: 0; }
.faq-layout .section__header { gap: 24px; margin-bottom: 0; }
.faq-layout .section__header .link { margin-top: 0; }
.faq-cats { display: grid; gap: 12px; }
.faq-cat { border-radius: var(--r-lg); background: #fff; }   /* white cards, like the pillars list */
.faq-cat summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 20px 24px; border-radius: var(--r-lg); cursor: pointer; }
.faq-cat[open] > summary { padding-bottom: var(--space-4); }
.faq-cat__name { font: 500 22px/1.25 var(--font-display); letter-spacing: -.01em; }
.faq-cat__body { display: grid; gap: 20px; padding: 0 24px 24px; }
.faq-q { display: grid; gap: 8px; padding-block: 0; }
.faq-q__title { font: 600 18px/1.35 var(--font-body); letter-spacing: 0; }
.faq-q p { max-width: 62ch; font-size: 1rem; line-height: 1.6; color: var(--color-muted); }
.faq-q p + p { margin-top: var(--space-1); }

/* Konzultacia / quiz */
.consult { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.consult > * { min-width: 0; }
.quiz-card { padding: var(--space-5); background: var(--card-bg, var(--color-bg)); border-radius: var(--r-xl); }
.quiz__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz__group legend { float: left; width: 100%; padding: 0; font: 500 24px/1.2 var(--font-display); letter-spacing: -.02em; }
.quiz__group legend + * { clear: both; }
.quiz__group legend:focus { outline: none; }
.quiz__q { display: block; max-width: 22ch; margin: 0 0 var(--space-4); }
.quiz__group[aria-describedby] .quiz__q { margin-bottom: var(--space-2); }
.quiz__help, .quiz__intro { margin-bottom: var(--space-4); font-size: 15px; line-height: 1.5; }
.options { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 68px; padding: 0 22px; border: 1px solid rgba(43, 41, 36, .1); border-radius: 16px; background: #fff; font: 600 17px/1.3 var(--font-body); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.option:hover { border-color: rgba(43, 41, 36, .2); }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option__dot { order: 2; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid rgba(43, 41, 36, .25); border-radius: 50%; background: #fff; color: #fff; transition: background-color 150ms ease, border-color 150ms ease; }
.option__dot .icon { width: 14px; height: 14px; stroke-width: 2.5; opacity: 0; transform: scale(.6); transition: opacity 150ms ease, transform 150ms ease; }
.option:has(input:checked) { border-color: rgba(129, 106, 59, .6); background: var(--color-surface-2); }
.option:has(input:checked) .option__dot { border-color: var(--color-fg); background: var(--color-fg); }
.option:has(input:checked) .option__dot .icon { opacity: 1; transform: none; }
.option:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.quiz__next { display: inline-flex; }
html:not(.js) .quiz__next { display: none; }
.quiz__done { margin: 0; font: 600 17px/1.4 var(--font-body); }
.quiz__done:focus { outline: none; }
.quiz-card .quiz__nav { margin-top: var(--space-5); }
.quiz-card .quiz__note { text-align: left; }
@media (min-width: 640px) { .quiz__group legend { font-size: 28px; } }
.quiz__fields { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.input { width: 100%; min-height: var(--tap); padding: var(--space-3) var(--space-4); border: 1px solid rgba(43, 41, 36, .14); border-radius: var(--r-md); background: var(--color-surface); }
textarea.input { resize: vertical; min-height: 110px; }
.input:hover { border-color: rgba(43, 41, 36, .24); }
.input:focus, .input:focus-visible { outline: none; border-color: rgba(129, 106, 59, .7); box-shadow: 0 0 0 4px rgba(218, 184, 114, .22); }
.input[aria-invalid="true"] { border-color: rgba(192, 86, 63, .7); }
.input[aria-invalid="true"]:focus { border-color: rgba(192, 86, 63, .7); box-shadow: 0 0 0 4px rgba(192, 86, 63, .14); }
.field__error { color: var(--color-error); font-size: var(--text-sm); font-weight: 600; }
.field__error:empty { display: none; }
.quiz__nav { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.quiz__note { margin-top: var(--space-4); font-size: var(--text-sm); }
.quiz-success { display: grid; gap: var(--space-4); justify-items: start; }
.quiz-success .icon { width: 40px; height: 40px; }
.quiz-success h3 { max-width: 20ch; }
.quiz__nav--end { justify-content: flex-end; align-items: center; }
.consult__intro { min-width: 0; }
@keyframes dot-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.6); opacity: 0; } }
.icon--flip { transform: scaleX(-1); }
.btn .icon--chev { transition: transform 200ms ease; }
.btn--primary:not([disabled]):hover .icon--chev:not(.icon--flip) { transform: translateX(3px); }

/* Footer */
.site-footer { position: relative; padding-block: 20px; border-top: 1px solid var(--color-line); background: var(--color-bg); color: var(--color-fg); font-size: var(--text-sm); }
.site-footer__row { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.site-footer .brand img { height: 22px; width: auto; }
.site-footer__contact { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-style: normal; color: var(--color-muted); }
.site-footer__dot { display: none; }
.site-footer__legal { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font-size: 13px; color: var(--color-muted); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Drawer (right-side panel) */
.drawer { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; }
.drawer__backdrop { position: absolute; inset: 0; background: var(--color-backdrop); opacity: 0; transition: opacity 250ms ease; }
.drawer__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--drawer-w); height: 100%; background: var(--color-bg); border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden; transform: translateX(100%); transition: transform 250ms var(--ease); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--color-line); }
.drawer__title { font-size: 1.25rem; }
.drawer__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; padding: 0; border: 1px solid var(--color-line-strong); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-fg); transition: background-color 150ms ease; }
.drawer__close:hover { background: var(--color-surface-2); }
.drawer__close .icon { width: 20px; height: 20px; }
.drawer__body { flex: 1; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); overflow-y: auto; font-size: var(--text-sm); }
.drawer__subtitle { margin-top: var(--space-3); font-size: var(--text-base); }
.drawer__list { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; }
.drawer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-line); }
.drawer__profile { font-size: var(--text-sm); }

/* All-reviews modal (a .drawer: open/close/focus trap/scroll lock come from main.js). Head and foot stay put, the body scrolls. */
.drawer.reviews-modal { align-items: center; justify-content: center; }
.reviews-modal .drawer__backdrop { background: rgba(20, 18, 15, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reviews-modal__sheet { width: min(1120px, calc(100% - 32px)); max-width: none; height: min(820px, calc(100vh - 32px)); height: min(820px, calc(100dvh - 32px)); padding: 0; border-radius: 28px; background: #FAF9F7; opacity: 0; transform: translateY(16px) scale(.98); transition: transform 250ms var(--ease), opacity 250ms ease; }
.reviews-modal.is-open .reviews-modal__sheet { opacity: 1; transform: none; }
.rm__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: 28px 40px 20px; border-bottom: 1px solid rgba(43, 41, 36, .1); }
.rm__heading { display: grid; gap: var(--space-2); min-width: 0; }
.rm__title { font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.rm__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.rm__sum .reviews__g { width: 20px; height: 20px; }
.rm__score { font: 500 1.125rem/1 var(--font-display); letter-spacing: -.01em; }
.rm__body { flex: 1; min-height: 0; padding: 24px 40px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(43, 41, 36, .25) transparent; }
.rm__body:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.rm__grid { columns: 1; column-gap: var(--space-4); }   /* CSS multi-column = masonry: cards keep their natural height and pack vertically */
.rm__grid .review { display: inline-flex; flex: none; width: 100%; margin: 0 0 var(--space-4); break-inside: avoid; scroll-snap-align: none; }   /* inline-flex + full width avoids Chrome's column split of flex figures */
.reviews-modal .review__text { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
.rm__foot { flex: none; padding: 14px 40px 18px; border-top: 1px solid rgba(43, 41, 36, .1); }
.rm__link { font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms ease; }
.rm__link:hover { color: var(--color-fg); }
@media (min-width: 640px) { .rm__grid { columns: 2; } }
@media (min-width: 1024px) { .rm__grid { columns: 3; } }
@media (max-width: 599px) {
  .rm__head { padding: 20px 20px 16px; }
  .rm__body { padding: 16px 20px; }
  .rm__foot { padding: 12px 20px 14px; }
}

/* Clinic gallery modal (a .drawer, same sheet as the reviews modal; head/body reuse .rm__*). Masonry via CSS columns. */
.drawer.gallery-modal { align-items: center; justify-content: center; }
.gallery-modal .drawer__backdrop { background: rgba(20, 18, 15, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gallery-modal__sheet { width: min(1120px, calc(100% - 32px)); max-width: none; height: min(820px, calc(100vh - 32px)); height: min(820px, calc(100dvh - 32px)); padding: 0; border-radius: 28px; background: #FAF9F7; opacity: 0; transform: translateY(16px) scale(.98); transition: transform 250ms var(--ease), opacity 250ms ease; }
.gallery-modal.is-open .gallery-modal__sheet { opacity: 1; transform: none; }
.gallery-modal .rm__head { align-items: center; }
.gm__grid { columns: 1; column-gap: var(--space-3); }
.gm__grid img { display: block; width: 100%; height: auto; margin-bottom: var(--space-3); border-radius: var(--r-md); break-inside: avoid; background: var(--color-surface-2); }
@media (min-width: 640px) { .gm__grid { columns: 2; } }
@media (min-width: 1024px) { .gm__grid { columns: 3; } }

/* Consultation modal (a .drawer: focus trap, Esc, backdrop, scroll lock and focus return come from main.js) */
.drawer.quiz-modal { align-items: center; justify-content: center; }
.quiz-modal .drawer__backdrop { background: rgba(20, 18, 15, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.quiz-modal__sheet { width: min(640px, calc(100% - 32px)); max-width: none; height: min(720px, calc(100vh - 32px)); height: min(720px, calc(100dvh - 32px)); padding: 0; border-radius: 28px; background: #FAF9F7; opacity: 0; transform: translateY(16px) scale(.98); transition: transform 250ms var(--ease), opacity 250ms ease; }
.quiz-modal.is-open .quiz-modal__sheet { opacity: 1; transform: none; }
.qm__head { flex: none; padding: 24px 40px 0; }
.qm__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qm__close, .qm__back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--color-fg); cursor: pointer; transition: background-color 150ms ease; }
.qm__back { margin-left: 0; }
.qm__back[hidden] { display: none; }
.qm__back.is-off { visibility: hidden; }
.qm__close:hover, .qm__back:hover { background: var(--color-surface-2); }
.qm__close .icon, .qm__back .icon { width: 20px; height: 20px; }
.qm__close:focus-visible, .qm__back:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.qm__progress { flex: 1; display: flex; align-items: center; gap: 6px; }
.qm__progress i { flex: 1; height: 4px; border-radius: 2px; background: rgba(43, 41, 36, .12); transition: background-color 250ms ease; }
.qm__progress i.is-on { background: var(--color-fg); }
.qm__scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 28px 40px 32px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(43, 41, 36, .25) transparent; }   /* side padding keeps focus rings unclipped; bottom padding keeps the last element clear of the footer fade */
.quiz-modal .quiz { margin-block: auto; }   /* question block sits in the middle of the fixed-height area; the contact step is top-aligned */
.quiz-modal.is-contact .quiz { margin-block: 0 auto; }
.quiz-modal .quiz__group legend { text-align: center; font-size: 24px; }
.quiz-modal .quiz__q { max-width: 22ch; margin: 0 auto 24px; }
.quiz-modal .quiz__group[aria-describedby] .quiz__q { margin-bottom: 12px; }
.quiz-modal .quiz__help, .quiz-modal .quiz__intro { margin: 0 auto 24px; max-width: 46ch; text-align: center; color: var(--color-muted); }
.quiz-modal .quiz__fields { gap: 14px 16px; }
.quiz-modal .field { gap: 6px; }
.quiz-modal .field label { font-weight: 600; }
@media (min-width: 600px) {
  .quiz-modal .quiz__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-modal .field--full { grid-column: 1 / -1; }
  .quiz-modal .quiz__contact .quiz__q { margin: 0 auto 12px; }
  .quiz-modal .quiz__contact .quiz__intro { margin-bottom: 18px; }
}
.quiz-modal .field label { font-size: var(--text-sm); }
.quiz-modal .input { min-height: 56px; padding: 0 var(--space-4); border-radius: 14px; font-size: 17px; }
.quiz-modal textarea.input { padding-block: 14px; min-height: 72px; resize: vertical; }
/* phone: country selector + number as one field */
.phone { display: flex; align-items: stretch; min-height: 57px; border: 1px solid rgba(43, 41, 36, .14); border-radius: 14px; background: var(--color-surface); transition: border-color 200ms ease, box-shadow 200ms ease; }
.phone:hover { border-color: rgba(43, 41, 36, .24); }
.phone:focus-within { border-color: rgba(129, 106, 59, .7); box-shadow: 0 0 0 4px rgba(218, 184, 114, .22); }
.phone:has(.input[aria-invalid="true"]) { border-color: rgba(192, 86, 63, .7); }
.phone:has(.input[aria-invalid="true"]):focus-within { box-shadow: 0 0 0 4px rgba(192, 86, 63, .14); }
.phone__cc { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; width: 92px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.phone__cc::after { content: ""; position: absolute; right: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(43, 41, 36, .14); }
.phone__cc .icon { width: 14px; height: 14px; opacity: .55; }
.phone__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-size: 16px; cursor: pointer; }
.quiz-modal .phone .input, .quiz-modal .phone .input:hover, .quiz-modal .phone .input:focus, .quiz-modal .phone .input:focus-visible, .quiz-modal .phone .input[aria-invalid="true"], .quiz-modal .phone .input[aria-invalid="true"]:focus { flex: 1; min-width: 0; width: auto; border: 0; border-radius: 0 14px 14px 0; background: transparent; box-shadow: none; padding: 0 14px; min-height: 0; }
.phone .input::placeholder { color: rgba(43, 41, 36, .38); }
.qm__foot { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 40px 20px; border-top: 1px solid rgba(43, 41, 36, .1); background: #FAF9F7; }
.qm__foot[hidden] { display: none; }
.qm__foot .btn { min-height: 52px; border: 0; }
.qm__submit { flex: 1; }
.qm__submit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.quiz-modal.is-contact .qm__scroll { padding-top: 20px; padding-bottom: 20px; }
.quiz-modal.is-contact .quiz__note { margin-top: 14px; }
.quiz-modal .quiz__note { margin-top: 20px; font-size: 13px; line-height: 1.45; text-align: center; }
/* thank-you step: centred when shorter than the sheet, scrolls when taller */
.quiz-modal .quiz-success { justify-items: center; gap: 0; margin-block: auto; padding: 0; text-align: center; }
.quiz-modal.is-done .qm__scroll { padding-top: 0; padding-bottom: 14px; }
.quiz-modal.is-done .qm__head { padding-top: 16px; }
.quiz-modal.is-done .qm__foot { padding-top: 12px; padding-bottom: 16px; }
.qs__mark { width: 56px; height: 56px; margin: 0 0 12px; }
.qs__mark .icon { width: 28px; height: 28px; stroke-width: 2.25; }
.quiz-modal .qs__title { margin: 0; font: 500 30px/1.15 var(--font-display); letter-spacing: 0; }
.quiz-modal .qs__title:focus { outline: none; }
.qs__lead { max-width: 44ch; margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--color-muted); }
.qs__lead span { color: var(--color-fg); font-weight: 500; white-space: nowrap; }
.qs__card, .qs__recap { width: 100%; box-sizing: border-box; border-radius: 16px; text-align: left; }
.qs__next { margin-top: 16px; padding: 18px 24px; background: #fff; }
.qs__recap { margin-top: 8px; padding: 14px 24px; background: var(--color-surface-2); font-size: 14px; line-height: 1.4; }
.qs__h { margin: 0 0 10px; font: 600 13px/1.2 var(--font-body); letter-spacing: .02em; color: var(--color-muted); }
.qs__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qs__steps li { display: flex; align-items: flex-start; gap: 14px; }
.qs__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-2); font: 500 13px/1 var(--font-display); color: var(--color-fg); }
.qs__txt { display: grid; gap: 2px; }
.qs__txt strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.qs__txt span { font-size: 14px; line-height: 1.4; color: var(--color-muted); }
.qs__list { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }   /* two label/value pairs per row keep the sheet short */
.qs__list dt:nth-of-type(even) { margin-left: 20px; }
.qs__list dt { color: var(--color-muted); }
.qs__list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--color-fg); }
.qs__help { align-self: flex-start; margin-top: 10px; text-align: left; }
.qs__help p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-muted); }
.qm__foot .btn[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .qs__mark { animation: qs-pop 300ms var(--ease) both; }
  @keyframes qs-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
}
@media (max-width: 479px) {
  .qs__next { padding: 18px 20px; }
  .qs__recap { padding: 16px 20px; }
  .qs__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qs__list dt:nth-of-type(even) { margin-left: 0; }
  .qs__list dd { margin-bottom: 8px; }
  .qs__list dd:last-child { margin-bottom: 0; }
}
@media (min-width: 600px) { .quiz-modal .quiz__group legend { font-size: 28px; } }
@media (max-width: 599px) {
  .drawer.quiz-modal { align-items: flex-end; }
  .quiz-modal__sheet { width: 100%; height: min(88vh, 720px); height: min(88dvh, 720px); padding: 0; border-radius: 24px 24px 0 0; opacity: 1; transform: translateY(100%); }
  .qm__head { padding: 24px 20px 0; }
  .qm__scroll { padding: 28px 20px 28px; }
  .qm__foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
}

/* Consultation modal: slim step-aware card (below 1060px) and the side panel beside the sheet (1060px and up) */
.qm__dialog { display: contents; }
.qm__side { display: none; }
.qm__slim { margin-bottom: 20px; padding: 10px 12px; border-radius: 14px; background: var(--color-surface-2); font-size: 13px; line-height: 1.35; }
.qm__slim-item { display: none; align-items: center; gap: 10px; }
.qm__slim-item.is-on { display: flex; }
.qm__slim-t { display: grid; gap: 1px; min-width: 0; }
.qm__slim-t .qm__slim-q { color: var(--color-fg); font-weight: 500; line-height: 1.35; }
.qm__slim-t span:not(:first-child), .qm__slim-item:nth-child(1) .qm__slim-t span { color: var(--color-muted); }
.qm__slim-av { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.qm__slim-g { flex: none; width: 20px; height: 20px; }
.qm__slim-clock { flex: none; width: 20px; height: 20px; color: var(--color-fg); }
.qm__slim .compare__check { margin-top: 0; }
.quiz-modal.is-done .qm__slim { display: none; }
@media (min-width: 1060px) {
  .qm__slim { display: none; }
  .qm__dialog { display: flex; align-items: stretch; gap: 12px; height: min(760px, calc(100vh - 48px)); height: min(760px, calc(100dvh - 48px)); }
  .quiz-modal__sheet { width: 640px; height: auto; flex: none; }
  .qm__side { --surface-from: #7A6558; display: block; flex: none; width: 360px; border-radius: 28px; opacity: 0; transform: translateX(-12px); transition: opacity 150ms ease, transform 150ms ease; }
  .quiz-modal.is-open .qm__side { opacity: 1; transform: none; transition: opacity 300ms ease 250ms, transform 300ms var(--ease) 250ms; }
  .qm__pane { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 36px 28px 28px; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms; }
  .qm__pane.is-active { opacity: 1; visibility: visible; transition: opacity 250ms ease, visibility 0s; }
  .qm__pane--doctor { padding-top: 0; }
  .qm__pane--review, .qm__pane--facts { justify-content: center; padding-top: 28px; }
  .qm__ph { flex: 1 1 0; min-height: 0; margin: 0 -28px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }   /* fills everything above the quote; the fade ends where the quote starts */
  .qm__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
  .qm__quote { flex: none; margin: 0; padding-top: 4px; }
  .qm__quote p { margin: 0; font: 500 19px/1.3 var(--font-display); letter-spacing: 0; }
  .qm__quote figcaption { display: grid; gap: 2px; margin-top: 14px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .8); }
  .qm__quote figcaption strong { font-size: 14px; font-weight: 600; color: #fff; }
  .qm__rate { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1; color: rgba(255, 255, 255, .85); }
  .qm__rate strong { font: 500 22px/1 var(--font-display); color: #fff; }
  .qm__rate .icon--google { width: 22px; height: 22px; fill: #fff; stroke: none; }
  .qm__stars { display: flex; gap: 2px; color: #FFDB90; }
  .qm__stars .icon { width: 14px; height: 14px; }
  .qm__review { margin: 24px 0 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
  .qm__by { margin: 16px 0 0; font-size: 14px; font-weight: 600; }
  .qm__h { margin: 0; font: 500 22px/1.2 var(--font-display); letter-spacing: 0; }
  .qm__facts { display: grid; gap: 22px; margin: 28px 0 0; padding: 0; list-style: none; }
  .qm__facts li { display: flex; align-items: flex-start; gap: 14px; }
  .qm__facts .compare__check { margin-top: 18px; }
  .qm__fact { display: grid; gap: 3px; font-size: 18px; line-height: 1.4; }
  .qm__fact small { font-size: 14px; line-height: 1.35; opacity: .78; }
  .qm__gbadge { display: block; align-self: flex-start; flex: none; height: 36px; width: auto; margin-bottom: 18px; }
  .qm__lead { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
  .qm__steps { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
  .qm__steps li { display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 1.35; }
  .qm__steps li span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); font: 500 13px/1 var(--font-display); }
  .qm__pane--next { justify-content: center; }
  .qm__pane--next .call-widget { margin-top: 40px; }
}
@media (min-width: 1060px) and (prefers-reduced-motion: reduce) {
  .qm__side, .quiz-modal.is-open .qm__side { transform: none; transition: none; }
  .qm__pane, .qm__pane.is-active { transition: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* 7. RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 899px) {
  .site-footer { padding-bottom: calc(20px + 72px); }
}
@media (max-width: 639px) {
  .site-header__inner, .site-header__right { gap: var(--space-2); }
  .site-header__inner { padding-left: 14px; }
  .brand img { width: 104px; }
  .site-header__cta { padding-inline: 14px; }
  .feature { min-height: 0; padding: var(--space-6); }
}
@media (min-width: 640px) {
  :root { --gutter: 24px; --gap: 20px; }
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcard { flex-basis: max(200px, 38vw); }
  .cta-banner__body { padding: var(--space-6); }
}
/* Photo cards: copy sits over the empty backdrop of the native-ratio photo (hero 1264:680, CTA 1264:680 and pillars 1264:600 crop only the bottom of the clothing).
   Below the breakpoint the photo sits on top at its native 3:2 and the copy follows on the backdrop colour. */
@media (min-width: 900px) {
  .cta-banner:not(.cta-banner--center) { aspect-ratio: 3 / 1; min-height: 320px; }   /* Figma section/cta-1: 1200 x 400 */
  .cta-banner__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .cta-banner:not(.cta-banner--center) .cta-banner__body { position: relative; width: calc(46% - var(--space-6)); max-width: 440px; height: 100%; margin-left: 54%; padding: var(--space-6) 0; justify-items: start; text-align: left; }
}
@media (min-width: 1200px) {
  .hero-card { display: flex; flex-direction: column; justify-content: center; height: 680px; padding-top: 88px; }   /* 88 = navbar (12 inset + 64 box) + 12 breathing room; content centres in the rest */
  .hero-card__people { position: absolute; z-index: 1; right: max(6%, calc((100% - 1200px) / 2 + 24px)); bottom: -4%; width: auto; height: 86%; margin: 0; }
  .hero-card__body { flex: 0 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; gap: var(--space-7); padding: 0 40px; }
  .hero-card .section__title { max-width: 516px; font-size: 2.75rem; line-height: 1.12; letter-spacing: -.02em; }
  .hero-card .section__lead { max-width: 516px; line-height: 1.55; }
}
@media (min-width: 900px) {
  :root { --section-pad: 3.5rem; }
  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sticky-cta { display: none; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .price { grid-template-columns: minmax(0, 533fr) minmax(0, 627fr); gap: var(--space-8); align-items: center; }
  .faq-layout { grid-template-columns: minmax(0, 427fr) minmax(0, 733fr); gap: var(--space-8); align-items: start; }
  .faq-layout .section__header { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .site-footer__row { flex-direction: row; justify-content: space-between; gap: 24px; text-align: left; }
  .site-footer__contact { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
  .site-footer__dot { display: inline; }
  .site-footer__legal { flex-direction: row; flex: none; gap: 16px; }
}
@media (min-width: 1000px) {
  .consult { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(64px, 6vw, 80px); }
}
@media (min-width: 1024px) {
  .slider__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .reviews__layout { grid-template-columns: minmax(0, 326fr) minmax(0, 858fr); }
  .reviews__track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .review { flex-basis: calc((100% - 2 * var(--space-4)) / 3); }
}
@media (min-width: 1100px) {
  .process { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(64px, 7vw, 128px); }
  .timeline { --tl-fs: 22px; }
  .clinic-card { max-width: none; aspect-ratio: 16 / 10; }
  .nav-toggle { display: none; }
  .site-header__tag { display: block; font: 400 var(--text-sm)/1.5 var(--font-display); color: var(--color-muted); white-space: nowrap; }
  .site-header__right { gap: 20px; }
  .site-header__author { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
  .site-header__who { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
  .site-header__who-label { font: 400 var(--text-xs)/normal var(--font-body); color: var(--color-muted); text-decoration: none; }
  .site-header__who-num { font: 600 var(--text-sm)/normal var(--font-body); color: var(--color-fg); text-decoration: none; }
  .site-header__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-top: 1px; border-radius: 50%; color: var(--color-fg); background: rgba(43, 41, 36, .07); }
  .site-header__avatar .icon { width: 20px; height: 20px; }
  .site-nav { display: block; position: static; padding: 0; background: none; border: 0; }
  .site-nav__list { display: flex; gap: var(--space-1); }
  .site-nav__link { min-height: 40px; padding: 0 var(--space-3); color: var(--color-muted); }
  .site-nav__link:hover { color: var(--color-fg); background: none; }
  .site-nav__phone { display: none; }
}


/* gold accent on photo/dark backdrops: stay in the bright range so the phrase never fades into the backdrop */
.cta-banner .accent, .hero-card .accent, .section--compare .accent { --accent-w: 100%; background-image: linear-gradient(90deg, #DAB872 0%, #FAD68C 100%); }

/* Garancia card (client Figma section/garancia v2): warm-to-cool HORIZONTAL gradient, cut-out portrait of the doctor with his signature, dark button under the lead */
.section--guarantee { padding-block: 3rem; background: var(--color-bg); }
.guarantee-card { --gc-pad: 24px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "art" "side"; min-width: 0; overflow: hidden; padding: var(--gc-pad); border-radius: var(--r-xl); background: linear-gradient(90deg, var(--guarantee-overlay), var(--guarantee-overlay)), linear-gradient(90deg, var(--guarantee-grad-from) 0%, var(--guarantee-grad-to) 100%); }
.guarantee-card__lead { grid-area: lead; position: relative; z-index: 1; display: grid; justify-items: start; align-content: center; gap: var(--space-4); min-width: 0; }
.guarantee-card__badge { display: block; width: auto; height: 48px; margin-bottom: var(--space-2); }
.guarantee-card__title { max-width: 18ch; font-size: var(--text-h2); }
.guarantee-card__text { max-width: 44ch; font-size: var(--text-base); color: var(--guarantee-muted); }
.guarantee-card__text strong { color: var(--guarantee-muted); }
.guarantee-card__art { grid-area: art; position: relative; justify-self: center; width: min(300px, 100%); margin-block: var(--space-7); }
.guarantee-card__photo { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1640 / 1650; -webkit-mask-image: linear-gradient(#000 64%, transparent 98%); mask-image: linear-gradient(#000 64%, transparent 98%); }
.guarantee-card__sig { position: absolute; z-index: 2; left: 50%; bottom: 7%; display: block; width: min(240px, 92%); height: auto; translate: -50% 0; }   /* dark ink over the faded lower part of the portrait, on the light card */
.guarantee-card__art.has-parallax .guarantee-card__photo { scale: 1.08; transform-origin: 50% 0; }   /* parallax shifts the photo up to 22px; the 8% overscan (about 30px of height) keeps its bottom edge covered */
.guarantee-card__side { grid-area: side; position: relative; z-index: 1; min-width: 0; }
.benefits { width: 100%; }
.benefits__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line-strong); }
.benefits__item:first-child { padding-top: 0; }
.benefits__item:last-child { padding-bottom: 0; border-bottom: 0; }
.benefits__item .icon { width: 24px; height: 24px; color: var(--color-fg); }
.benefits__title { font: 600 1rem/1.4 var(--font-body); color: var(--color-fg); }
.benefits__line { margin-top: 2px; font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--guarantee-muted); }
.btn--white { background: var(--color-surface); color: var(--color-fg); }
.btn--white:hover { background: var(--color-cream); }
.btn--dark { background: var(--color-fg); color: var(--color-on-dark); }
.btn--dark:hover { background: #46433c; }
@media (min-width: 768px) {
  .section--guarantee { padding-block: 4.5rem; }
  .guarantee-card { --gc-pad: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lead side" "art art"; column-gap: var(--space-9); }
  .guarantee-card__art { width: 320px; margin-block: var(--space-7) calc(var(--gc-pad) * -1); }
}
@media (min-width: 1100px) {
  .guarantee-card { --gc-pad: 42px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px); grid-template-areas: "lead . side"; align-items: center; column-gap: 0; }
  .guarantee-card__art { position: absolute; z-index: 0; top: auto; bottom: 0; left: calc(50% - 215px); width: 430px; margin: 0; }
  .guarantee-card__photo { -webkit-mask-image: none; mask-image: none; }
  .guarantee-card__sig { width: 300px; bottom: 5%; }
}

/* CTA 2 (centred variant): woman on the left third, copy centred in the right 60 % over the wall; flat overlay for white-text contrast. */
.cta-banner--center .cta-banner__body { justify-items: center; align-content: center; gap: 0; text-align: center; }
.cta-banner--center .cta-banner__title { max-width: 20ch; text-wrap: balance; }
.cta-banner__benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) 20px; margin: 12px 0 20px; padding: 0; list-style: none; }
.cta-banner__benefits li { display: flex; align-items: center; gap: var(--space-2); font: 400 14px/1.3 var(--font-body); color: rgba(255, 255, 255, .88); }
.cta-banner__benefits .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.cta-banner--center .cta-banner__actions { justify-content: center; align-items: center; gap: var(--space-4) 20px; }
.cta-banner__badge { flex: none; height: 36px; width: auto; }
.cta-banner--center .cta-banner__img { aspect-ratio: 4 / 3; object-position: 0 50%; }   /* phone/tablet: taller frame cropped to the team on the left of the banner */
@media (min-width: 900px) {
  .cta-banner--center { aspect-ratio: 3 / 1; }
  .cta-banner--center .cta-banner__img { aspect-ratio: auto; object-position: 0 50%; }
  .cta-banner--center::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43, 41, 36, 0) 40%, rgba(43, 41, 36, .34) 54%, rgba(43, 41, 36, .34) 100%); pointer-events: none; }  /* darkens only the text side; the person stays untouched */
  .cta-banner--center .cta-banner__body { z-index: 1; width: 56%; margin-left: 40%; padding: var(--space-6) 0; text-shadow: none; }   /* centred in x 40% to 96% of the card; the woman fills the left ~38% */
  .cta-banner--center .cta-banner__title { line-height: 1.1; }
}

@media (min-width: 1000px) {
  .time { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; justify-items: stretch; }
  .time__copy { display: grid; justify-items: start; gap: var(--space-4); }
  .time__note { order: 0; }
  .timecard { aspect-ratio: 6 / 5; margin-block: 0; }
}

/* header at 1200: keep the CTA on one line */
.site-header .btn { white-space: nowrap; }
@media (min-width: 1280px) {   /* nav truly centred in the box (needs the room) */
  .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-header__right { justify-self: end; }
}
/* header box sits inside the hero card, inset by --hero-inset from its edges */
.site-header .container { width: min(var(--container-header), 100% - (var(--hero-side) + var(--hero-inset)) * 2); }

/* video: heading column left (4/12), slider right (8/12): three 9:16 cards visible, the fourth by sliding */
@media (min-width: 1100px) {
  .video { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); align-items: center; }
  .video__row { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; overflow: visible; scroll-snap-type: none; cursor: default; }
  .vcard { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); }
  .vcard:nth-child(n + 4) { display: none; }   /* three fixed cards; the set is swapped in place by main.js (cross-fade), not scrolled */
  .video__arrows { display: flex; justify-self: end; }   /* right edge of the intro column, directly beside the first card */
}

/* VSL: 16:9 explainer card with custom controls (glass buttons as on .vcard). Heading + top-left shade fade out while playing; bar auto-hides. */
.vsl { --vsl-h: min(675px, 78vh); position: relative; width: min(100%, calc(var(--vsl-h) * 16 / 9)); margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xl); background: #2B2924; color: #fff; }
.vsl:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vsl__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #2B2924; cursor: pointer; }
.vsl__shade { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(43, 41, 36, .72) 0%, rgba(43, 41, 36, .32) 38%, rgba(43, 41, 36, 0) 62%); pointer-events: none; }
.vsl__head { position: absolute; z-index: 1; top: 0; left: 0; display: grid; gap: 10px; padding: 32px; pointer-events: none; }
.vsl__label { font: 600 12px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.vsl__title { max-width: 18ch; font: 500 clamp(24px, 2.6vw, 36px)/1.1 var(--font-display); letter-spacing: -.02em; color: #fff; }
.vsl__bar { position: absolute; z-index: 2; inset: auto 0 0 0; display: flex; align-items: center; gap: 8px; padding: 48px 16px 16px; background: linear-gradient(to top, rgba(43, 41, 36, .72), rgba(43, 41, 36, 0)); pointer-events: none; }
.vsl__bar > * { pointer-events: auto; }
.vsl__btn { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--vcard-btn-bg); color: #fff; cursor: pointer; transition: background-color 150ms ease; }
.vsl__btn:hover { background: var(--vcard-btn-bg-hover); }
.vsl__btn .icon { width: 18px; height: 18px; }
.vsl__btn .icon--pause, .vsl__btn .icon--off { display: none; }
.vsl__btn[data-vsl-play][aria-pressed="true"] .icon--play, .vsl__btn[data-vsl-sound][aria-pressed="false"] .icon--on { display: none; }
.vsl__btn[data-vsl-play][aria-pressed="true"] .icon--pause, .vsl__btn[data-vsl-sound][aria-pressed="false"] .icon--off { display: block; }
.vsl__range { --p: 0%; --b: 0%; flex: 1 1 auto; min-width: 0; height: 20px; margin: 0 4px; padding: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vsl__range:focus { outline: none; }
.vsl__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff 0 var(--p), rgba(255, 255, 255, .5) var(--p) var(--b), rgba(255, 255, 255, .24) var(--b)); }
.vsl__range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff 0 var(--p), rgba(255, 255, 255, .5) var(--p) var(--b), rgba(255, 255, 255, .24) var(--b)); }
.vsl__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(43, 41, 36, .4); transform: scale(0); transition: transform 150ms ease; }
.vsl__range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(43, 41, 36, .4); transform: scale(0); transition: transform 150ms ease; }
.vsl__range:hover::-webkit-slider-thumb, .vsl__range:focus-visible::-webkit-slider-thumb, .vsl__range:active::-webkit-slider-thumb { transform: scale(1); }
.vsl__range:hover::-moz-range-thumb, .vsl__range:focus-visible::-moz-range-thumb, .vsl__range:active::-moz-range-thumb { transform: scale(1); }
.vsl__range:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.vsl__time { flex: none; font: 400 12px/1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.vsl:fullscreen { width: 100%; max-width: none; border-radius: 0; aspect-ratio: auto; }
.vsl:fullscreen .vsl__video { object-fit: contain; }
.vsl:-webkit-full-screen { width: 100%; max-width: none; border-radius: 0; aspect-ratio: auto; }
.vsl:-webkit-full-screen .vsl__video { object-fit: contain; }
html:not(.js) .vsl__bar { display: none; }
.vsl.is-playing .vsl__head, .vsl.is-playing .vsl__shade { opacity: 0; }
.vsl.is-playing.is-idle .vsl__bar { opacity: 0; visibility: hidden; pointer-events: none; }
.vsl.is-playing.is-idle { cursor: none; }
@media (prefers-reduced-motion: no-preference) {
  .vsl__head, .vsl__shade { transition: opacity 400ms ease; }
  .vsl__bar { transition: opacity 250ms ease, visibility 0s linear 0s; }
  .vsl.is-playing.is-idle .vsl__bar { transition: opacity 250ms ease, visibility 0s linear 250ms; }
}
@media (max-width: 600px) {
  .vsl__head { gap: 8px; padding: 20px; }
  .vsl__title { max-width: 16ch; font-size: 20px; }
  .vsl__bar { gap: 6px; padding: 40px 12px 12px; }
  .vsl__btn { width: 40px; height: 40px; }
}
@media (max-width: 420px) { .vsl__time { display: none; } }

/* qualification cards: shade change on hover */
.feature { transition: background-color 240ms ease; }
@media (hover: hover) { .feature:hover { background: var(--color-surface-2); } }

/* before/after: PRED / PO tags only on the hovered (or keyboard-focused) card */
.compare-ba__label { opacity: 0; transform: translateY(-4px); transition: opacity 220ms ease, transform 220ms ease; }
.compare-ba:hover .compare-ba__label, .compare-ba:focus-within .compare-ba__label { opacity: 1; transform: none; }
@media (hover: none) { .compare-ba__label { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .feature, .compare-ba__label { transition: none; } }

/* CTA 1: gradient surface and the person cut-out are separate layers */
.cta-banner--cutout picture.cta-banner__person { display: block; width: min(66%, 300px); margin: var(--space-6) auto 0; }
.cta-banner--cutout .cta-banner__person img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) { .cta-banner--cutout .cta-banner__person img { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } }   /* stacked layout: soften the cut-off torso */
@media (min-width: 900px) {
  .cta-banner--cutout picture.cta-banner__person { position: absolute; left: 27%; bottom: 0; width: auto; height: 92%; margin: 0; transform: translateX(-50%); }   /* centred in the free area left of the copy (copy starts at 54%) */
  .cta-banner--cutout .cta-banner__person img { width: auto; height: 100%; }
}

/* CTA 1: two product callouts flanking the portrait (informative, not links). Card bg = the render's flat backdrop, so the image melts into it. */
.cta-banner__types { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) var(--space-5) 0; padding: 0; list-style: none; }
.cta-banner__type { display: block; overflow: hidden; border-radius: 16px; background: #DBCDBA; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); padding-bottom: 14px; }
.cta-banner__type img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transform: scale(1.12); -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent); mask-image: radial-gradient(closest-side, #000 82%, transparent); }
.cta-banner__type-title, .cta-banner__type-text { display: block; padding: 0 14px; }
.cta-banner__type-title { font: 500 17px/1.2 var(--font-display); color: #2B2924; }
.cta-banner__type-text { margin-top: 4px; font: 400 12.5px/1.35 var(--font-body); color: rgba(43, 41, 36, .72); }
@media (min-width: 900px) {
  .cta-banner__types { display: block; margin: 0; position: absolute; inset: 0; pointer-events: none; }
  .cta-banner__type { position: absolute; width: 104px; border-radius: 12px; padding-bottom: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .26); }
  .cta-banner__type-title, .cta-banner__type-text { padding: 0 12px; }
  .cta-banner__type-title { font-size: 15px; }
  .cta-banner__type-text { margin-top: 3px; font-size: 11.5px; line-height: 1.3; }
  .cta-banner--cutout picture.cta-banner__person { z-index: 1; }
  .cta-banner__type { --type-w: clamp(132px, 15%, 190px); width: var(--type-w); z-index: 2; }   /* both cards sit in front of the portrait, so their text is never covered; % = banner width */
  .cta-banner__type--l { left: 1.5%; bottom: 18%; }   /* outer edge of the free area, overlaps only the edge of her shoulder */
  .cta-banner__type--r { left: calc(54% - var(--type-w) - 8px); bottom: 7%; }   /* ends 8px before the copy column (starts at 54%) */
}
@media (min-width: 1100px) {
  .cta-banner__type-title { font-size: 17px; }
  .cta-banner__type-text { font-size: 12.5px; }
}
@media (min-width: 900px) {
  .js .cta-banner__type { opacity: 0; translate: 0 10px; transition: opacity 500ms ease-out, translate 500ms ease-out; }
  .js .cta-banner.is-in .cta-banner__type { opacity: 1; translate: 0 0; }
  .js .cta-banner.is-in .cta-banner__type--r { transition-delay: 120ms; }
}
@media (prefers-reduced-motion: reduce) { .js .cta-banner__type { opacity: 1; translate: none; transition: none; } }
@media (max-width: 600px) {   /* phones: same flanking as desktop, scaled down - one small title-only card per side of the portrait, lower half, clear of the face; the body stays below */
  .cta-banner--cutout picture.cta-banner__person { grid-area: 1 / 1; position: relative; z-index: 1; }   /* portrait and cards share one grid cell, so the body row sits underneath; portrait stays in front of the cards */
  .cta-banner__types { display: block; grid-area: 1 / 1; position: relative; z-index: 2; margin: 0; pointer-events: none; }
  .cta-banner__type { position: absolute; top: 24%; width: 27%; max-width: 104px; border-radius: 10px; padding-bottom: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .26); }   /* small, beside the face, tucked behind the shoulders */
  .cta-banner__type--l { left: var(--space-2); }
  .cta-banner__type--r { right: var(--space-2); }
  .cta-banner__type-text { display: none; }
  .cta-banner__type-title { padding: 0 var(--space-2); font-size: var(--text-xs); line-height: 1.2; text-align: center; }
}

/* hero CTA: looping sheen */
.hero-card .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.hero-card .btn--primary::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0)); transform: translateX(-160%) skewX(-18deg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-card .btn--primary::after { animation: btn-sheen 4.2s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
}
@keyframes btn-sheen { 0% { transform: translateX(-160%) skewX(-18deg); } 28%, 100% { transform: translateX(330%) skewX(-18deg); } }

/* hero CTA edge fix: the sheen is invisible outside its sweep (the gradient itself now spans the border box, see .btn--primary) */
.hero-card .btn--primary::after { opacity: 0; }
@keyframes btn-sheen { 0% { opacity: 0; transform: translateX(-160%) skewX(-18deg); } 4% { opacity: 1; } 24% { opacity: 1; } 28%, 100% { opacity: 0; transform: translateX(330%) skewX(-18deg); } }

/* Call widget: avatar with live dot + label + number; whole thing is the tel: link. Default = dark text, --on-dark = white text */
.call-widget { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--color-fg); text-decoration: none; }
.call-widget--on-dark { color: #fff; }
.call-widget__avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--color-fg); background: rgba(43, 41, 36, .07); transition: transform 200ms ease; }
.call-widget__avatar .icon { width: 22px; height: 22px; }
.call-widget--on-dark .call-widget__avatar { color: #fff; background: rgba(255, 255, 255, .16); }
.call-widget__text { display: grid; gap: 2px; justify-items: start; }
.call-widget__label { font: 400 13px/1.2 var(--font-body); color: var(--color-muted); text-decoration: none; }
.call-widget--on-dark .call-widget__label { color: rgba(255, 255, 255, .8); }
.call-widget__num { font: 500 18px/1.2 var(--font-display); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
.call-widget:is(:hover, :focus-visible) .call-widget__avatar { transform: scale(1.04); }
.call-widget:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .call-widget__avatar { transition: none; } }
.cta-banner .call-widget { margin-top: var(--space-1); }
.quiz__nojs { margin-top: var(--space-3); }

/* Headline highlight for LIGHT backgrounds (on dark use .accent) */
.hl { color: #8F7240; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl { background-image: linear-gradient(90deg, #B8944F 0%, #A07F45 55%, #7A5B2E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}

/* Final banner #konzultacia: brown surface panel (as the hero), copy left, first question right */
.section--consult { padding-block: var(--space-3) var(--space-6); background: var(--color-bg); }
.consult-panel { width: calc(100% - var(--hero-side) * 2); margin-inline: auto; padding-block: clamp(56px, 7vw, 96px) 0; }
.consult-panel > .container { padding-bottom: clamp(40px, 4vw, 52px); }   /* the facts marquee below forms the bottom band of the panel */
.consult-panel .accent { --accent-w: 100%; background-image: linear-gradient(90deg, #DAB872 0%, #FAD68C 100%); }
.consult { align-items: start; gap: 40px; }
.consult__intro { display: flex; flex-direction: column; align-items: flex-start; }
.consult__title { max-width: 14ch; margin: 0; font-size: 32px; line-height: 1.05; letter-spacing: -.02em; font-weight: 500; color: #fff; text-wrap: balance; }
.consult__sub { max-width: 40ch; margin: 20px 0 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.consult .call-widget { margin-top: 24px; }
.consult__perks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.consult__perks li { display: inline-flex; align-items: center; gap: 8px; }
.consult__perks .icon { width: 20px; height: 20px; stroke-width: 1.25; }
.consult .quiz-card { padding: 20px; border-radius: var(--r-xl); background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); color: var(--color-fg); }
.quiz__step-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; font: 600 13px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.consult .quiz__group legend { font-size: 26px; line-height: 1.2; }
.consult .quiz__q { max-width: none; }
.consult .quiz__help { margin-bottom: 20px; }
.consult .option { background: var(--color-bg); border-color: transparent; }
.consult .option:hover { border-color: rgba(43, 41, 36, .2); }
.consult .option:has(input:checked) { border-color: rgba(129, 106, 59, .6); background: #fff; }
.consult .quiz-card .quiz__nav { margin-top: 20px; }
.consult .quiz__nav--end { justify-content: stretch; }
.consult .quiz__next { width: 100%; min-height: 56px; }
.consult .quiz-card .quiz__note { margin-top: 14px; font-size: 13px; line-height: 1.45; }
@media (min-width: 640px) {
  .consult .quiz-card { padding: 32px; }
  .consult__title { font-size: clamp(36px, 4.2vw, 56px); }
}
@media (min-width: 1000px) {
  .consult { align-items: stretch; }
  .consult .call-widget { margin-top: auto; }
  .consult__perks + .call-widget { padding-top: 0; }
  .consult { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(56px, 6vw, 88px); }
}
@media (min-width: 1200px) {
  .consult .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two columns of 64px rows keep the card close to the height of the copy column */
  .consult .option { min-height: 64px; padding: 0 18px; font-size: 16px; }
  .consult .option:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Production tiles: optional photo behind the frosted mini card; the CSS gradients remain the fallback */
.make-card__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
@media (hover: hover) { .make-card:hover .make-card__img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .make-card__img { transition: none; } }
@media (min-width: 1100px) { .site-nav__phone { display: none; } }   /* the desktop header has its own call widget on the right; this one is for the open mobile menu */

.quiz__time { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--color-surface-2); font: 500 12px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--color-fg); }
.quiz__time .icon { width: 14px; height: 14px; stroke-width: 1.75; color: #816A3B; }

/* Hero variant B: animated before/after case card instead of the couple + glass cards. Activated by ?hero=cases or data-hero="cases" on <html>; the default hero is untouched. */
.hero-case { display: none; }
html[data-hero="cases"] .hero-card__people { display: none; }
html[data-hero="cases"] .hero-card__body { margin-top: 0; padding-top: 96px; padding-bottom: var(--space-5); }
html[data-hero="cases"] .hero-case { display: block; position: relative; z-index: 3; isolation: isolate; width: calc(100% - var(--space-5) * 2); max-width: 520px; margin: 0 var(--space-5) var(--space-6); }
.hero-case__card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--color-hero-bg); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.hero-case__slide { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.hero-case__slide.is-leaving { z-index: 1; opacity: 1; transition: none; }
.hero-case__slide.is-active { z-index: 2; opacity: 1; pointer-events: auto; }
.hero-case .compare-ba { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; background: var(--color-hero-bg); }
.hero-case .compare-ba__label { opacity: 1; transform: none; transition: none; top: var(--space-4); padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.hero-case .compare-ba__label--before { left: var(--space-4); }
.hero-case .compare-ba__label--after { right: var(--space-4); }
.hero-case__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); padding: 56px var(--space-4) var(--space-3); background: linear-gradient(to top, rgba(28, 18, 10, .72), rgba(28, 18, 10, 0)); pointer-events: none; color: #fff; }
.hero-case__bar > * { pointer-events: auto; }
.hero-case__meta { display: grid; gap: 2px; }
.hero-case__caption { font: 500 13px/1.3 var(--font-body); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.hero-case__segs { display: flex; gap: 6px; }
.hero-case__seg { display: block; width: 40px; padding: 8px 0; background: none; border: 0; cursor: pointer; }
.hero-case__track { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.hero-case__track i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.hero-case__nav { display: flex; gap: 8px; padding-bottom: 4px; }
.hero-case__btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); cursor: pointer; transition: background-color 200ms ease; }
.hero-case__btn:hover { background: rgba(255, 255, 255, .3); }
.hero-case__btn .icon { width: 18px; height: 18px; }
.hero-case__btn--prev .icon { transform: scaleX(-1); }
.hero-case::before, .hero-case::after { display: none; content: ""; position: absolute; z-index: -1; border-radius: var(--r-xl); transition: transform 500ms var(--ease); }
@media (min-width: 1100px) {
  html[data-hero="cases"] .hero-card { display: flex; flex-direction: column; justify-content: center; height: 680px; padding-top: 88px; }
  html[data-hero="cases"] .hero-card__body { flex: 0 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; gap: var(--space-7); padding: 0 40px; }
  html[data-hero="cases"] .hero-card .section__title { max-width: 516px; font-size: 2.75rem; line-height: 1.12; letter-spacing: -.02em; }
  html[data-hero="cases"] .hero-card .section__lead { max-width: 516px; line-height: 1.55; }
  html[data-hero="cases"] .hero-case { position: absolute; right: max(40px, calc((100% - 1200px) / 2 + 40px)); top: calc(88px + (100% - 88px) / 2 - 14px); width: clamp(400px, 30.5vw, 440px); max-width: none; margin: 0; transform: translateY(-50%); }
  html[data-hero="cases"] .hero-case__card { aspect-ratio: 4 / 5; }
  html[data-hero="cases"] .hero-case::before, html[data-hero="cases"] .hero-case::after { display: block; }
  .hero-case::before { inset: 40px -28px -28px 40px; background: rgba(255, 255, 255, .06); }
  .hero-case::after { inset: 20px -14px -14px 20px; background: rgba(255, 255, 255, .10); }
  .hero-case.is-shuffle::before { transform: translate(5px, 5px); }
  .hero-case.is-shuffle::after { transform: translate(-6px, -6px); }
}
@media (prefers-reduced-motion: reduce) { .hero-case__slide, .hero-case::before, .hero-case::after, .hero-case__btn { transition: none; } }

/* Design-review switch (hero version). Review tool only: remove before launch together with the block in index.html and main.js. */
.review-switch { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(43, 41, 36, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-family: var(--font-body); }
.review-switch[hidden] { display: none; }
.review-switch__label { padding-left: 10px; padding-right: 6px; font-size: 11px; line-height: 1; color: rgba(255, 255, 255, .6); }
.review-switch__btn { min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 600 12px/1 var(--font-body); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.review-switch__btn[aria-pressed="true"] { background: #fff; color: #2B2924; }
.review-switch__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.review-switch__btn[aria-pressed="true"]:focus-visible { outline-color: var(--color-accent); }
@media (max-width: 899px) { .review-switch { bottom: calc(88px + env(safe-area-inset-bottom)); } }   /* above the sticky CTA */
@media print { .review-switch { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .review-switch__btn { transition: none; } }

/* VSL player: desktop controls at double size */
@media (min-width: 900px) {
  .vsl__bar { gap: 16px; padding: 96px 28px 28px; }
  .vsl__btn { width: 72px; height: 72px; }
  .vsl__btn .icon { width: 32px; height: 32px; }
  .vsl__range { height: 32px; margin: 0 8px; }
  .vsl__range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
  .vsl__range::-moz-range-track { height: 8px; border-radius: 4px; }
  .vsl__range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; }
  .vsl__range::-moz-range-thumb { width: 22px; height: 22px; }
  .vsl__time { font-size: 18px; }
}

/* Phone field flag: inline SVG sprite symbols (20 x 14), hairline is drawn inside each symbol so white stripes stay visible */
.phone__cc-label { display: inline-flex; align-items: center; gap: 6px; }
.phone__flag { flex: none; display: block; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; }

/* Mobile actions (<600px): content buttons span their column at 52px; the second action (text link) becomes an outline button */
@media (max-width: 599px) {
  .hero-card__actions .btn, .cta-banner__actions .btn, .time__copy .btn, .process__head > .btn, .price__text .btn, .guarantee-card__lead .btn,
  .section__header > .btn, .reviews__summary .btn, .results__more .btn, .make-card__more, .consult .quiz__next { width: 100%; min-height: 52px; }
  .hero-card__actions, .cta-banner__actions, .cta-banner:not(.cta-banner--center) .cta-banner__actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 12px; }
  .cta-banner__actions .call-widget { align-self: flex-start; }   /* 12px gap + the widget's own 4px top margin = 16px below the button */
  .cta-banner__badge { align-self: center; }
  .hero-card__actions .link, .cta-banner__actions .link { justify-content: center; gap: 6px; width: 100%; min-height: 52px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--r-sm); background: transparent; color: #fff; opacity: 1; }
  .make-card__more { align-self: stretch; }
  .results-grid:not(.results-grid--more):not(.is-expanded) .case:nth-child(n+4) { display: none; }
  .make-card { min-height: 0; }
  .make__grid { gap: 40px; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .results-grid.is-expanded .case:nth-child(n+4) { animation: case-in 600ms cubic-bezier(.22, .8, .24, 1) both; }
  .results-grid.is-expanded .case:nth-child(5) { animation-delay: 70ms; }
  .results-grid.is-expanded .case:nth-child(6) { animation-delay: 140ms; }
}
@keyframes case-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* reviews on phones: arrows sit under the cards and span the full width */
@media (max-width: 599px) {
  .slider.reviews { display: flex; flex-direction: column; }
  .slider.reviews > .slider__head { display: contents; }
  .slider.reviews .section__header { order: 0; margin-bottom: var(--space-5); }
  .slider.reviews > :not(.slider__head) { order: 1; }
  .slider.reviews .slider__controls { order: 2; gap: 12px; margin-top: var(--space-4); }
  .slider.reviews .slider__btn { flex: 1 1 0; width: auto; height: 52px; }
}

/* phone field must not grow past its grid column */
.field { grid-template-columns: minmax(0, 1fr); }
.phone { min-width: 0; max-width: 100%; }
.quiz-modal .phone .input { width: 0; min-width: 0; flex: 1 1 0; }

/* situation cards on phones: 2 x 2 */
@media (max-width: 599px) {
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .feature { gap: var(--space-4); min-height: 0; padding: 16px; justify-content: flex-start; }
  .feature__icon .icon { width: 26px; height: 26px; }
  .feature__title { font-size: 15px; line-height: 1.25; }
  .feature__body { margin-top: 6px; font-size: 13px; line-height: 1.4; }
}

/* Klinika a mapa (#klinika): photo bento left, map card right */
.clinic-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.clinic-media { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }   /* clinic video, then the team photo */
.clinic-media .clinic-card { max-width: none; }
.clinic-media__team { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 1387; object-fit: cover; border-radius: var(--r-lg); background: var(--color-surface-2); }
.clinic-map { position: relative; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--color-surface-2); }
.clinic-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.clinic-map__card { position: absolute; z-index: 2; left: var(--space-4); bottom: var(--space-4); max-width: 320px; padding: var(--space-4); border-radius: var(--r-lg); background: var(--card-bg); box-shadow: var(--shadow-card); }
.clinic-map__live { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.clinic-map__live .mapboxgl-canvas { width: 100% !important; height: 100% !important; }   /* Mapbox GL canvas (main.js); the SVG img underneath is the fallback */
.clinic-map__live .mapboxgl-ctrl-group:not(:empty) { background: var(--card-bg); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.clinic-map__live .mapboxgl-ctrl-group button { width: 36px; height: 36px; }
.clinic-map__pin { width: 18px; height: 18px; border-radius: 50%; background: #5A3D23; box-shadow: 0 0 0 17px rgba(90, 61, 35, .12); }   /* same look as the pin in map-nitra.svg; no transform here, Mapbox positions the marker with one */
.clinic-map__pin::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #F3F1EB; }
.clinic-map__label { font-weight: 600; }
.clinic-map__address { margin-top: var(--space-1); font-style: normal; line-height: 1.5; }
.clinic-map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
@media (max-width: 599px) { .clinic-map { aspect-ratio: 4 / 5; } }   /* taller on phones so the address card (bottom-left) stays clear of the pin at the centre */
@media (min-width: 1024px) {
  .clinic-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .clinic-map { aspect-ratio: auto; min-height: 480px; }   /* the map column now stretches to the height of video + team photo */
}

/* Prípady z ordinácie (#pripady): featured player (the .vsl block with custom controls) + list of cases; list sits under the player below 1024px */
.cases-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.vsl--cases { width: 100%; margin-inline: 0; scroll-margin-top: 96px; }
.vsl--process .vsl__head { display: none; }   /* client removed the title; the section heading names the video */
.vsl--process { width: 100%; margin-inline: 0; }   /* video under the #proces heading: fills the left column */
.vsl--cases .vsl__title { max-width: 22ch; }
.vsl--cases .vsl__video, .case-item__thumb { filter: brightness(1.12) contrast(1.02); }   /* the case clips are shot dark */
.cases-list { min-width: 0; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-line); }
.cases-list > li { border-top: 1px solid var(--color-line); }
.case-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); align-items: center; width: 100%; padding: var(--space-3) 0; border: 0; border-radius: 0; background: none; color: var(--color-fg); font: inherit; text-align: left; cursor: pointer; }
.case-item__text { display: grid; gap: var(--space-1); min-width: 0; transition: opacity 150ms ease; }
.case-item:hover:not([aria-pressed="true"]) .case-item__text { opacity: .65; }
.case-item:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.case-item__thumb { display: block; width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--color-surface-2); }
.case-item__title { font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case-item[aria-pressed="true"] .case-item__title { font-weight: 600; }
.case-item__meta { font-size: var(--text-sm); }
.case-item__now { display: none; font: 600 var(--text-xs)/1.2 var(--font-body); color: var(--color-fg); }
#cases-player.is-started + .cases-list .case-item[aria-pressed="true"] .case-item__now { display: block; }   /* only once the player has actually started */
@media (min-width: 1024px) { .cases-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
/* #pripady player and the #proces video: controls at half the VSL size on desktop */
@media (min-width: 900px) {
  .vsl--cases .vsl__head, .vsl--process .vsl__head { gap: 8px; padding: 24px; }
  .vsl--cases .vsl__label, .vsl--process .vsl__label { font-size: 11px; }
  .vsl--cases .vsl__title, .vsl--process .vsl__title { font-size: clamp(20px, 2vw, 28px); }
  .vsl--cases .vsl__bar, .vsl--process .vsl__bar { gap: 8px; padding: 48px 14px 14px; }
  .vsl--cases .vsl__btn, .vsl--process .vsl__btn { width: 36px; height: 36px; }
  .vsl--cases .vsl__btn .icon, .vsl--process .vsl__btn .icon { width: 16px; height: 16px; }
  .vsl--cases .vsl__range, .vsl--process .vsl__range { height: 20px; margin: 0 4px; }
  .vsl--cases .vsl__range::-webkit-slider-runnable-track, .vsl--process .vsl__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; }
  .vsl--cases .vsl__range::-moz-range-track, .vsl--process .vsl__range::-moz-range-track { height: 4px; border-radius: 2px; }
  .vsl--cases .vsl__range::-webkit-slider-thumb, .vsl--process .vsl__range::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
  .vsl--cases .vsl__range::-moz-range-thumb, .vsl--process .vsl__range::-moz-range-thumb { width: 12px; height: 12px; }
  .vsl--cases .vsl__time, .vsl--process .vsl__time { font-size: 12px; }
}

/* Static capture mode (?static=1): everything visible, nothing moves — for design import */
html.is-static *, html.is-static *::before, html.is-static *::after { animation: none !important; transition: none !important; }
html.is-static.js .reveal { opacity: 1; }
html.is-static .cta-banner__type { opacity: 1; translate: none; transform: none; }
html.is-static .timeline__num, html.is-static .timeline__btn { opacity: 1; }
html.is-static .timeline__panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
html.is-static .timeline__panel > .timeline__body { min-height: 0; overflow: visible; }
html.is-static .pillars-list__panel { grid-template-rows: 1fr; visibility: visible; }
html.is-static .hero-case__slide:not(.is-active) { display: none; }
html.is-static .review-switch { display: none !important; }

/* Thank-you page (#dakujeme) — dakujeme.html / Webflow /dakujeme. Reuses the .qs__* blocks of the modal thank-you step (those stay untouched); the header floats
   (zero-height, sticky) so the section pads for it. The recap and the phone in the lead are filled by assets/js/thanks.js and hidden without data. */
.section--thanks { min-height: calc(100vh - 120px); min-height: calc(100svh - 120px); padding-block: clamp(120px, 16vw, 168px) clamp(56px, 8vw, 96px); }
#dakujeme > .container { display: flex; flex-direction: column; align-items: center; width: min(640px, 100% - var(--gutter) * 2); text-align: center; }
#dakujeme .qs__mark { width: 72px; height: 72px; margin: 0 0 20px; }
#dakujeme .qs__mark .icon { width: 36px; height: 36px; }
#dakujeme .qs__title { margin: 0; font: 500 clamp(34px, 6vw, 48px)/1.1 var(--font-display); letter-spacing: -.02em; }
#dakujeme .qs__title:focus { outline: none; }
#dakujeme .qs__lead { max-width: 46ch; margin: 14px 0 0; font-size: 18px; }
#dakujeme .qs__lead .qs__lead-phone { color: inherit; font-weight: inherit; white-space: normal; }
#dakujeme .qs__next { margin-top: 36px; padding: 24px 28px; }
#dakujeme .qs__recap { margin-top: 12px; padding: 18px 28px; }
#dakujeme .qs__h { margin-bottom: 14px; }
#dakujeme .qs__steps { gap: 14px; }
#dakujeme .qs__help { align-self: center; display: grid; justify-items: center; gap: 10px; margin-top: 32px; text-align: center; }
#dakujeme .qs__help p { font-size: 14px; }
#dakujeme .thanks__back { margin-top: 32px; }
@media (max-width: 479px) {
  #dakujeme .qs__next { padding: 20px; }
  #dakujeme .qs__recap { padding: 18px 20px; }
}