@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/poppins/poppins-300i-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/poppins/poppins-300i-latin.woff2') format('woff2'); 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: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/poppins/poppins-300-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/poppins/poppins-300-latin.woff2') format('woff2'); 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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins/poppins-400-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins/poppins-400-latin.woff2') format('woff2'); 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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins/poppins-500-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins/poppins-500-latin.woff2') format('woff2'); 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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins/poppins-600-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins/poppins-600-latin.woff2') format('woff2'); 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; }

/* Bueno + Humane by Rajesh Rajput — freeware, commercial use allowed, files must stay unmodified (see fonts/*_EULA.pdf) */
@font-face { font-family: 'Bueno'; src: url('fonts/Bueno-VF.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

/* Domi's Fonyód — púderrózsa téma
   Two-tone rhythm: page #F7EBEC + one darker block #EFDDE0, plum ink, one pink accent. */
:root {
  --bg: #F7EBEC; --alt: #EFDDE0;
  --tray: #EFDDE0; --tray-2: #E5CDD2; --frame: #FDF8F8;
  --heading: #35101F; --text: #46202F; --muted: rgba(53, 16, 31, .68);
  --label: #8E6C79; --hl: #E02381; --link: #B81A68; --ico: #C41C6F;
  --accent: #E02381; --on-accent: #FFFFFF; --accent-soft: rgba(224, 35, 129, .10);
  --plum: #35101F; --on-plum: #F7EBEC;
  --line: rgba(53, 16, 31, .11); --line-2: rgba(53, 16, 31, .22);
  --shadow: rgba(53, 16, 31, .16);

  --display: 'Bueno', 'Arial Narrow', sans-serif;
  --wordmark: 'Bueno', 'Arial Narrow', sans-serif; /* swap to 'Humane' + 30cqi for a tall wordmark */
  --body: 'Poppins', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  --wrap: 1280px; --pad: 40px;
  --r-tray: 28px; --r-frame: 18px; --gap: 20px;
  --blk: 128px; --header: 76px;
}
.alt { --tray: #FBF4F4; --tray-2: #F0E2E4; --frame: #FFFFFF; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 72px); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--body); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2, h3 { text-wrap: balance; }
.d1 { font: 700 104px/1 var(--display); text-transform: uppercase; color: var(--hl); padding-top: .04em; }
.d1 .h { color: var(--heading); }
.d2 { font: 700 64px/1.18 var(--display); text-transform: uppercase; color: var(--heading); }
.d3 { font: 700 34px/1.15 var(--display); text-transform: uppercase; color: var(--heading); letter-spacing: .005em; }
.d4 { font: 700 22px/1.15 var(--display); text-transform: uppercase; color: var(--heading); letter-spacing: .01em; }
.pink { color: var(--hl); }
.lead { font: 300 18px/1.65 var(--body); color: var(--muted); }
.small { font: 400 14px/1.6 var(--body); color: var(--muted); }
.num-t, .price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 500 13px/1.3 var(--body); color: var(--muted); margin-bottom: 18px; }
.kicker b { font-weight: 500; color: var(--heading); }
.meta { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--body); color: var(--muted); }
.tagbox { border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; font: 600 11px/1 var(--body); color: var(--heading); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* prose from the CMS */
.prose { font: 400 16px/1.7 var(--body); color: var(--text); }
.prose > * + * { margin-top: 14px; }
.prose strong { font-weight: 600; color: var(--heading); }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; font: 700 15px/1.7 var(--display); color: var(--hl); }
.prose p > strong:only-child { display: block; font: 700 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .01em; margin-top: 26px; }
.prose > p:first-child > strong:only-child { margin-top: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--accent);
  font: 600 14.5px/1.2 var(--body); white-space: nowrap; text-align: center;
  background: var(--accent); color: var(--on-accent);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn svg.i { width: 16px; height: 16px; }
.btn.sm { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
.btn.soft { background: var(--tray-2); color: var(--heading); border-color: var(--line); }
.btn.ghost { background: transparent; color: var(--heading); border-color: var(--line-2); }
.btn.dark { background: var(--plum); color: var(--on-plum); border-color: var(--plum); }
.btn.block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--plum); border-color: var(--plum); color: var(--on-plum); }
  .btn.dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .tlink:hover { border-color: var(--accent); }
}
.round { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: transform 160ms var(--ease-out); }
.round:active { transform: scale(0.94); }
.round.soft { background: var(--tray-2); color: var(--heading); border: 1px solid var(--line); }
.tlink { font: 500 14px/1.3 var(--body); color: var(--heading); display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; transition: border-color 200ms ease; }
.tlink svg.i { width: 15px; height: 15px; color: var(--ico); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.hdr.scrolled { border-bottom-color: var(--line); }
.hdr .wrap { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { width: 76px; height: auto; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav > a, .nav > .dd > button { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; font: 500 14px/1 var(--body); color: var(--muted); transition: background-color 150ms ease, color 150ms ease; }
.nav > a.on, .nav > .dd.on > button { color: var(--heading); background: var(--tray); }
.nav .dd > button svg.i { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.nav .dd[data-open] > button svg.i { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav > a:hover, .nav > .dd > button:hover { color: var(--heading); background: var(--tray); } }
.hdr-cta { display: flex; align-items: center; gap: 10px; }
.hdr-cta .tel { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--heading); border: 1px solid var(--line); }

/* dropdown — origin-aware, 180ms ease-out, scale from .97 */
.dd { position: relative; }
.menu { position: absolute; top: calc(100% + 10px); left: -12px; min-width: 300px; padding: 10px; border-radius: 20px; background: var(--frame); box-shadow: 0 1px 0 var(--line), 0 24px 60px var(--shadow); border: 1px solid var(--line);
  opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top left; visibility: hidden; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; }
.dd[data-open] .menu { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.menu.wide { width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.menu a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; transition: background-color 120ms ease; }
.menu a:hover, .menu a:focus-visible { background: var(--bg); }
.menu .th { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--tray); }
.menu .th img { width: 100%; height: 100%; object-fit: cover; }
.menu b { display: block; font: 500 14px/1.25 var(--body); color: var(--heading); }
.menu small { display: block; font: 400 12px/1.35 var(--body); color: var(--muted); }
.menu .sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 6px 4px; }

.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); place-items: center; color: var(--heading); }
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: 0 var(--pad) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.sheet[data-open] { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.sheet .bar { height: var(--header); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.sheet h6 { font: 500 12px/1 var(--body); color: var(--label); margin: 22px 0 6px; }
.sheet a.l { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 22px/1.15 var(--display); text-transform: uppercase; color: var(--heading); }
.sheet a.l svg.i { color: var(--ico); }
.sheet .cta { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }

/* ---------- page header / subnav ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font: 400 13px/1.4 var(--body); color: var(--label); }
.crumb a { color: var(--muted); }
.crumb span[aria-current] { color: var(--heading); }
.subnav { position: sticky; top: var(--header); z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.subnav .chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.subnav .chips::-webkit-scrollbar { display: none; }
.subnav .chips a { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 9px; font: 500 13px/1 var(--body); color: var(--muted); white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.subnav .chips a.on { background: var(--tray); color: var(--heading); box-shadow: inset 0 0 0 1px var(--line-2); }
.subnav .btn { flex-shrink: 0; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 56px 0 24px; }
.hero h1 { margin: 26px 0 22px; }
.hero .lead { max-width: 540px; }
.hero .lead + .lead { margin-top: 12px; }
.hero .actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.hero .pills { margin-top: 22px; }
.ptray { padding: 18px; }
.portrait { position: relative; aspect-ratio: 4 / 5; }
.portrait .shape { position: absolute; inset: 0; overflow: hidden; border-radius: 22% 24% 30% 0 / 18% 20% 24% 0; background: var(--tray-2); }
.portrait .shape img { width: 100%; height: 100%; object-fit: cover; }
.hero-cap { margin-top: 16px; }

/* booking ask bar */
.ask { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px 8px 24px; border-radius: 20px; background: var(--tray); box-shadow: inset 0 0 0 1px var(--line); max-width: 560px; transition: box-shadow 200ms ease; }
.ask .ph { flex: 1; min-width: 0; font: 400 15px/1.35 var(--body); color: var(--muted); }
.ask .ph b { color: var(--heading); font-weight: 500; }
.ask .round { width: 46px; height: 46px; }
@media (hover: hover) and (pointer: fine) { .ask:hover { box-shadow: inset 0 0 0 1px var(--accent); } }
.hints { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; font: 400 13.5px/1.3 var(--body); color: var(--muted); }
.hints a::before, .hints span::before { content: '↳'; margin-right: 8px; color: var(--label); }
@media (hover: hover) and (pointer: fine) { .hints a:hover { color: var(--heading); } }

/* ---------- blocks ---------- */
.blk { padding-top: var(--blk); position: relative; }
.blk.alt { margin-top: var(--blk); padding: calc(var(--blk) - 16px) 0; }
.blk.alt::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); background: var(--alt); z-index: -1; }
.blk.alt + .blk:not(.alt) { padding-top: var(--blk); }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.sh .lead { max-width: 460px; }
.sh.stack { flex-direction: column; align-items: flex-start; gap: 24px; }

.tray { background: var(--tray); border-radius: var(--r-tray); padding: 24px; }
.tray.line { background: transparent; border: 1px solid var(--line); }
.frame { background: var(--frame); border-radius: var(--r-frame); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 16px; padding: 0 4px; }
.cap .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--tray-2); border: 1px solid var(--line); display: grid; place-items: center; font: 700 14px/1 var(--display); color: var(--hl); flex-shrink: 0; }
.cap h4 { font: 700 20px/1.15 var(--display); text-transform: uppercase; color: var(--heading); letter-spacing: .01em; }
.cap p { font: 400 13px/1.45 var(--body); color: var(--muted); }

.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); }
.tabs button { min-height: 34px; padding: 0 14px; border-radius: 9px; font: 500 13px/1 var(--body); color: var(--muted); white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.tabs button[aria-selected="true"] { background: var(--tray-2); color: var(--heading); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) and (pointer: fine) { .tabs button:hover { color: var(--heading); } }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span, .pills a { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--tray-2); border: 1px solid var(--line); font: 500 13px/1.2 var(--body); color: var(--heading); }

/* split: media + copy in one tray */
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 20px 56px 20px 20px; }
.split.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: 20px 20px 20px 56px; }
.split.rev .ph { order: 2; }
.split .ph { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 22px 120px 22px 22px; }
.split .ph img { width: 100%; height: 100%; object-fit: cover; }
.split.rev .ph { border-radius: 120px 22px 22px 22px; }

/* two-column prose section */
.cols2 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.cols2 .stick { position: sticky; top: calc(var(--header) + 96px); }
.cols2 .tray { padding: 36px 40px; }
.cols2 .media { margin-top: 28px; aspect-ratio: 4 / 5; max-width: 360px; border-radius: 22px 90px 22px 22px; overflow: hidden; }
.cols2 .media img { width: 100%; height: 100%; object-fit: cover; }

/* card grid (title + body pairs) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--tray); border-radius: 22px; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.card .idx { font: 700 15px/1 var(--display); color: var(--hl); letter-spacing: .04em; }
.card h3 { font: 700 22px/1.15 var(--display); text-transform: uppercase; color: var(--heading); }
.card .prose { font-size: 15px; }
.intro { max-width: 760px; margin-bottom: 32px; }

/* hairline columns */
.hcols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.hcols > div { padding: 4px 32px; }
.hcols > div:first-child { padding-left: 0; }
.hcols > div + div { border-left: 1px solid var(--line); }
.hcols .idx { font: 700 15px/1 var(--display); color: var(--hl); letter-spacing: .04em; }
.hcols h4 { font: 700 24px/1.15 var(--display); text-transform: uppercase; color: var(--heading); margin: 14px 0 8px; }

/* steps — vertical timeline for long copy */
.steps { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.steps ol { list-style: none; position: relative; }
.steps ol::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--line-2); }
.steps ol > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 22px; padding-bottom: 30px; }
.steps ol > li:last-child { padding-bottom: 0; }
.steps .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); font: 700 16px/1 var(--display); color: var(--heading); position: relative; }
.alt .steps .n { background: var(--alt); }
.steps ol > li:first-child .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.steps h4 { font: 700 22px/1.15 var(--display); text-transform: uppercase; color: var(--heading); margin: 8px 0 8px; }
.steps .prose { font-size: 15px; }
.steps .after { margin-top: 26px; }

/* horizontal timeline (short copy) */
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.track::before { content: ''; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--line-2); }
.track > div { position: relative; padding-right: 32px; }
.track .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); font: 700 16px/1 var(--display); color: var(--heading); position: relative; }
.alt .track .n { background: var(--alt); }
.track > div:first-child .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.track h4 { font: 700 24px/1.15 var(--display); text-transform: uppercase; color: var(--heading); margin: 22px 0 8px; }

/* safety tray */
.safety { border: 1px solid var(--line-2); border-radius: var(--r-tray); padding: 36px 40px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 26px; }
.safety .ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--ico); }
.safety .ico svg.i { width: 26px; height: 26px; }
.safety .prose ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }

/* gallery strip with lightbox */
.gal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px; border-radius: var(--r-tray); background: var(--tray); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior-x: contain; }
.gal.many { grid-auto-columns: minmax(220px, 280px); }
.gal button { scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--frame); transition: transform 160ms var(--ease-out); }
.gal button:active { transform: scale(.98); }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 0 4px; }
.gal-nav { display: flex; gap: 8px; }
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(30, 8, 18, .86); display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.lb[data-open] { opacity: 1; visibility: visible; transition-delay: 0s; }
.lb img { max-height: calc(100dvh - 120px); max-width: min(100%, 900px); border-radius: 18px; transform: scale(.96); transition: transform 220ms var(--ease-out); }
.lb[data-open] img { transform: none; }
.lb .x, .lb .pv, .lb .nx { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.lb .x { top: 20px; right: 20px; } .lb .pv { left: 20px; top: 50%; } .lb .nx { right: 20px; top: 50%; }
.lb .cnt { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font: 500 13px/1 var(--body); }

/* ---------- prices ---------- */
.prices { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.p-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 16px; }
.p-group + .p-group { margin-top: 10px; }
.p-gt { font: 600 11.5px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--label); padding: 14px 18px 6px; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; position: relative; width: 100%; text-align: left; transition: background-color 150ms ease; }
.row + .row::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: var(--line); }
.row[aria-checked="true"] + .row::before, .row[aria-checked="true"]::before { display: none; }
.row .rad { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.row[aria-checked="true"] { background: var(--frame); }
.row[aria-checked="true"] .rad { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--frame); }
.row .nm { font: 500 15px/1.35 var(--body); color: var(--heading); min-width: 0; }
.row .nm small { display: block; font: 400 12.5px/1.45 var(--body); color: var(--muted); margin-top: 3px; }
.row .price { font: 700 26px/1 var(--display); color: var(--heading); letter-spacing: .01em; }
.row .price small { font: 500 12.5px var(--body); color: var(--label); margin-left: 4px; }
.row[aria-checked="true"] .price { color: var(--hl); }
@media (hover: hover) and (pointer: fine) { .row:hover { background: color-mix(in srgb, var(--frame) 60%, transparent); } }
.p-info { padding: 4px 18px 10px 56px; font: 400 12.5px/1.5 var(--body); color: var(--muted); }
.sum { position: sticky; top: calc(var(--header) + 84px); display: flex; flex-direction: column; gap: 20px; }
.sum .what { font: 700 26px/1.2 var(--display); text-transform: uppercase; color: var(--heading); }
.sum .total { font: 700 56px/1 var(--display); color: var(--heading); font-variant-numeric: tabular-nums; }
.sum .total small { font: 500 16px var(--body); color: var(--label); margin-left: 6px; }
.sum .note { font: 400 13.5px/1.5 var(--body); color: var(--muted); min-height: 1.5em; }
.sum .line-i { display: flex; justify-content: space-between; gap: 16px; font: 400 13.5px/1.4 var(--body); color: var(--muted); padding: 12px 0; border-top: 1px solid var(--line); }
.sum .line-i b { color: var(--heading); font-weight: 500; text-align: right; }
.sum .fine { font: 400 12px/1.5 var(--body); color: var(--muted); }
.p-notes { margin-top: 22px; }
.p-notes summary { cursor: pointer; list-style: none; display: inline-flex; gap: 8px; align-items: center; font: 500 14px/1 var(--body); color: var(--heading); }
.p-notes summary::-webkit-details-marker { display: none; }
.p-notes summary svg.i { width: 15px; height: 15px; color: var(--ico); transition: transform 200ms var(--ease-out); }
.p-notes[open] summary svg.i { transform: rotate(180deg); }
.p-notes ul { margin-top: 14px; max-width: 820px; }
.swap { transition: opacity 160ms ease, filter 160ms ease; }
.swap.out { opacity: .4; filter: blur(2px); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 20px; align-items: center; padding: 22px 0; font: 500 17px/1.4 var(--body); color: var(--heading); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; position: relative; transition: background-color 150ms ease, border-color 150ms ease; }
.qa summary .pm::before, .qa summary .pm::after { content: ''; position: absolute; width: 12px; height: 1.6px; background: var(--heading); border-radius: 2px; transition: transform 200ms var(--ease-out); }
.qa summary .pm::after { transform: rotate(90deg); }
.qa details[open] .pm { background: var(--accent); border-color: var(--accent); }
.qa details[open] .pm::before, .qa details[open] .pm::after { background: #fff; }
.qa details[open] .pm::after { transform: rotate(0deg); }
.qa .ans { padding: 0 52px 24px 0; }

/* ---------- booking block ---------- */
.book { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--gap); }
.book .tray { display: flex; flex-direction: column; gap: 14px; padding: 30px; }
.book .tray .btn { margin-top: auto; align-self: flex-start; }
.book .hot { background: var(--accent); color: #fff; }
.book .hot .d3, .book .hot .kicker b { color: #fff; }
.book .hot p, .book .hot .kicker { color: rgba(255,255,255,.88); }
.book .hot .btn { background: var(--plum); border-color: var(--plum); color: var(--on-plum); }
.policy { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.policy > div { border: 1px solid var(--line); border-radius: 20px; padding: 22px 26px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; }
.policy svg.i { color: var(--ico); margin-top: 2px; }
.policy b { display: block; font: 500 14.5px/1.4 var(--body); color: var(--heading); margin-bottom: 4px; }

/* accent tray */
.tray.hot { background: var(--accent); color: #fff; }
.tray.hot .d2, .tray.hot .d3, .tray.hot .big { color: #fff; }
.tray.hot p { color: rgba(255, 255, 255, .88); }
.tray.hot .btn { background: var(--plum); color: var(--on-plum); border-color: var(--plum); }
.band { display: flex; align-items: center; gap: 32px; padding: 30px 32px 30px 40px; }
.band .d3 { font-size: 36px; }
.band p { flex: 1; }
.cta-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; border: 1px solid var(--line); border-radius: 32px; padding: 64px; overflow: hidden; }
.cta-card .d2 { font-size: 80px; }
.v-wrap { display: grid; place-items: center; padding: 28px; }
.v-wrap .v { width: 88%; border-radius: 14px; overflow: hidden; transform: rotate(4deg); box-shadow: 0 40px 80px var(--shadow); }

/* service grid */
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px var(--gap); }
.svc .it { transition: opacity 200ms ease, transform 200ms var(--ease-out); }
.svc .it[hidden] { display: none; }
.svc .tray { padding: 12px; display: block; transition: box-shadow 200ms ease; }
.svc .frame { aspect-ratio: 4 / 5; }
.svc .frame img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .svc a.tray:hover .frame img { transform: scale(1.04); } .svc a.tray:hover { box-shadow: inset 0 0 0 2px var(--accent); } }
.svc .cap { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.svc .cap .tags { font: 500 11.5px/1.4 var(--body); color: var(--label); margin-top: 4px; }
.svc .consult { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r-tray); }
.svc .pick { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.svc .pick svg.i { width: 14px; height: 14px; stroke-width: 3; }
.svc .it.sel .pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.svc .it.sel .tray { box-shadow: inset 0 0 0 2px var(--accent); }

/* reviews */
.rv-head { display: flex; align-items: center; gap: 40px; padding: 36px 40px; }
.rv-head .big { font: 700 72px/.85 var(--display); text-transform: uppercase; color: var(--heading); }
.stars { display: flex; gap: 4px; color: var(--accent); }
.stars svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.rv { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--gap); scrollbar-width: none; }
.rv::-webkit-scrollbar { display: none; }
.rv figure { scroll-snap-align: start; background: var(--tray); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.rv blockquote { font: 400 15px/1.6 var(--body); color: var(--text); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; font: 500 14px/1.3 var(--body); color: var(--heading); }
.rv figcaption small { display: block; font: 400 12px var(--body); color: var(--label); }
.rv .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tray-2); font: 700 14px/1 var(--display); color: var(--hl); }

/* info list (contact) */
.info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.info .tray { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--ico); flex-shrink: 0; }
.hours { display: grid; gap: 0; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font: 400 14.5px/1.4 var(--body); }
.hours div b { font-weight: 500; color: var(--heading); }
.hours div span { text-align: right; color: var(--text); }
.map { aspect-ratio: 16 / 9; border: 0; width: 100%; border-radius: 18px; background: var(--frame); filter: saturate(.7); }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font: 500 13px/1 var(--body); color: var(--heading); }
.form input, .form textarea, .form select { font: 400 16px/1.4 var(--body); color: var(--heading); background: var(--frame); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; width: 100%; transition: border-color 150ms ease, box-shadow 150ms ease; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form .ok { display: none; font: 500 14px/1.4 var(--body); color: var(--heading); background: var(--frame); border-radius: 12px; padding: 14px; }
.form.sent .ok { display: block; }

/* footer */
.foot { margin-top: var(--blk); border-top: 1px solid var(--line); padding: 64px 0 36px; }
.blk.alt + .foot, .blk.alt + .book-wrap + .foot { margin-top: 0; }
.foot .grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr 1.25fr 1fr; gap: 40px; }
.foot h5 { font: 500 13px/1 var(--body); color: var(--label); margin-bottom: 18px; }
.foot ul { list-style: none; }
.foot li { font: 400 14px/1.5 var(--body); color: var(--muted); padding: 4px 0; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--heading); } }
.foot .szep { display: flex; gap: 14px; align-items: center; padding: 18px; }
.foot .bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font: 400 13px/1.4 var(--body); color: var(--label); }

/* mobile booking bar */
.mbar { display: none; }

/* reveal on scroll (once) */
.rv-in { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.rv-in.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  :root { --blk: 104px; }
  .d1 { font-size: 84px; }
  .nav { display: none; }
  .burger { display: grid; }
  .hdr-cta .btn { display: none; }
  .hero { gap: 48px; }
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu.wide { width: 560px; }
  .foot .grid { grid-template-columns: 1fr 1fr 1fr; }
  .book { grid-template-columns: 1fr 1fr; }
  .book .hot { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root { --pad: 20px; --blk: 80px; --header: 64px; --r-tray: 22px; }
  .d1 { font-size: 60px; }
  .d2 { font-size: 44px; }
  .d3 { font-size: 28px; }
  .hero, .cols2, .steps, .faq, .prices, .split, .split.rev, .cta-card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero { padding-top: 28px; }
  .hero .media-col { order: -1; }
  .ptray { padding: 12px; }
  .portrait { aspect-ratio: 5 / 4; }
  .split, .split.rev { padding: 12px 12px 28px; }
  .split.rev .ph { order: 0; }
  .split .ph, .split.rev .ph { border-radius: 18px 80px 18px 18px; }
  .split > div:not(.ph) { padding: 0 12px; }
  .cols2 .stick { position: static; }
  .cols2 .tray { padding: 26px 22px; }
  .cols2 .media { display: none; }
  .sh { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
  .cards, .cards.two { grid-template-columns: minmax(0, 1fr); }
  .hcols, .track { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hcols > div, .hcols > div:first-child { padding: 0; }
  .hcols > div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .track::before { display: none; }
  .safety { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; gap: 16px; }
  .safety .prose ul { grid-template-columns: minmax(0, 1fr); }
  .sum { position: static; }
  .sum .total { font-size: 46px; }
  .row { padding: 14px 12px; gap: 12px; }
  .row .price { font-size: 22px; }
  .p-info { padding-left: 46px; }
  .qa summary { font-size: 16px; padding: 18px 0; }
  .qa .ans { padding-right: 0; }
  .book, .policy, .info { grid-template-columns: minmax(0, 1fr); }
  .band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 24px; }
  .band .d3 { font-size: 30px; }
  .cta-card { padding: 28px 22px; border-radius: 24px; }
  .cta-card .d2 { font-size: 52px; }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .svc .tray { padding: 8px; border-radius: 18px; }
  .svc .frame { border-radius: 12px; }
  .svc .cap h4 { font-size: 17px; }
  .svc .cap .pick { width: 30px; height: 30px; }
  .svc .consult { grid-column: 1 / -1; padding: 22px; }
  .gal, .gal.many { grid-auto-columns: 72%; padding: 10px; gap: 10px; }
  .rv { grid-auto-columns: 86%; }
  .rv-head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
  .rv-head .big { font-size: 56px; }
  .foot .grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot .grid > :first-child { grid-column: 1 / -1; }
  .subnav .wrap { height: 54px; }
  .subnav .btn { display: none; }
  .hdr-cta .tel { display: none; }
  .mbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; gap: 8px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--frame) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 18px 40px var(--shadow);
    transform: translateY(calc(100% + 24px)); transition: transform 260ms var(--ease-out); }
  .mbar.show { transform: none; }
  .mbar .btn { flex: 1; min-height: 46px; }
  .mbar .btn.soft { flex: 0 0 46px; padding: 0; }
  body.has-mbar .foot { padding-bottom: 110px; }
  html { scroll-padding-top: calc(var(--header) + 62px); }
}
@media (max-width: 420px) {
  .d1 { font-size: 50px; }
  .d2 { font-size: 38px; }
  .ask { padding-left: 16px; }
  .ask .ph { font-size: 14px; }
  .hints { gap: 8px 18px; }
  .svc .cap { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .rv-in { opacity: 1; transform: none; }
  .btn:active, .round:active, .gal button:active { transform: none; }
}

[hidden] { display: none !important; }
.cols2 .d2, .steps .d2, .faq .d2 { font-size: 52px; }
.cards-media { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--gap); align-items: start; }
.cards-media .ph-t { padding: 14px; position: sticky; top: calc(var(--header) + 84px); }
.cards-media .ph { aspect-ratio: 4 / 5; border-radius: 16px 90px 16px 16px; overflow: hidden; }
.cards-media .ph img { width: 100%; height: 100%; object-fit: cover; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.duo .tray { padding: 34px 36px; }
.steps ol > li { list-style: none; }
.steps .prose li { display: list-item; padding-bottom: 0; grid-template-columns: none; }
@media (max-width: 860px) {
  .cols2 .d2, .steps .d2, .faq .d2 { font-size: 40px; }
  .cards-media, .duo { grid-template-columns: minmax(0, 1fr); }
  .cards-media .ph-t { position: static; }
  .cards-media .ph { aspect-ratio: 5 / 4; }
  .duo .tray { padding: 26px 22px; }
}
.d1.l { font-size: 88px; }
.d1.xl { font-size: 74px; }
.hero-tag { font: 500 19px/1.4 var(--body); color: var(--heading); margin: -6px 0 16px; max-width: 540px; }
@media (max-width: 1100px) { .d1.l { font-size: 72px; } .d1.xl { font-size: 62px; } }
@media (max-width: 860px) { .d1.l { font-size: 52px; } .d1.xl { font-size: 44px; } }
@media (max-width: 420px) { .d1.l { font-size: 44px; } .d1.xl { font-size: 36px; } }
.bday { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 40px 48px; }
.bday .big { font: 700 150px/.8 var(--display); letter-spacing: -.02em; color: #fff; }
.bday .d3 { font-size: 36px; color: #fff; }
.bday .p-notes summary { color: #fff; }
.bday .p-notes summary svg.i { color: #fff; }
.foot { margin-top: 0; }
main > .wrap > section:last-child:not(.alt) { padding-bottom: var(--blk); }
@media (max-width: 860px) {
  .bday { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 24px; }
  .bday .big { font-size: 96px; }
  .bday .d3 { font-size: 28px; }
}
.info .tray .btn { align-self: flex-start; margin-top: auto; }
.prose b { font-weight: 600; color: var(--heading); }

/* =========================================================
   v2 — footer (ref. screenshot), Bueno/Humane type, skill audit
   ========================================================= */

/* type: tracking tightens as size grows (apple-design §15) */
.d1 { letter-spacing: -.012em; }
.d2 { letter-spacing: -.008em; line-height: 1.12; }
.d3, .d4, .cap h4, .card h3, .steps h4, .track h4, .hcols h4 { letter-spacing: 0; }

/* footer */
.foot { background: var(--bg); border-top: 1px solid var(--line); padding: 80px 0 32px; }
.foot .grid { display: grid; grid-template-columns: .8fr 1.7fr 1.25fr 1.5fr .95fr auto; gap: 40px; align-items: start; }
.foot .f-logo img { width: 104px; }
.foot h5 { font: 600 10.5px/1.4 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 18px; }
.foot ul { list-style: none; display: grid; gap: 9px; }
.foot ul.two { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.foot li { font: 400 13.5px/1.45 var(--body); color: var(--muted); padding: 0; }
.foot .fi { display: inline-flex; gap: 10px; align-items: flex-start; color: var(--heading); }
.foot .fi svg.i { width: 16px; height: 16px; color: var(--ico); margin-top: 1px; }
.foot .btn { margin-top: 18px; }
.foot .szep { display: flex; flex-direction: column; gap: 10px; width: 150px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--frame); }
.foot .szep b { font: 700 17px/1.1 var(--display); text-transform: uppercase; color: var(--heading); }
.foot .szep small { font: 600 10.5px/1 var(--body); letter-spacing: .14em; color: var(--label); }
.foot .wm { container-type: inline-size; margin-top: 56px; overflow-x: clip; }
.foot .wm span { display: block; font: 800 17.85cqi/1.02 var(--wordmark); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; color: #EBD3D7; margin-bottom: -.12em; user-select: none; -webkit-user-select: none; }
.foot .bottom { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .foot a:hover, .foot .fi:hover { color: var(--accent); } .foot .szep:hover { border-color: var(--line-2); } }
@media (max-width: 1100px) { .foot .grid { grid-template-columns: 1fr 1fr 1fr; } .foot .szep { width: auto; } }
@media (max-width: 860px) {
  .foot { padding-top: 56px; }
  .foot .grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .foot .grid > .f-logo, .foot .grid > div:nth-child(2) { grid-column: 1 / -1; }
  .foot ul.two { grid-template-columns: 1fr; }
  .foot .wm { margin-top: 44px; }
}

/* mobile-native: no tap delay, no label selection / callout on controls */
a, button, [role="button"], [role="tab"], [role="radio"], summary, .round, .chips a { touch-action: manipulation; }
.btn, button, [role="tab"], [role="radio"], .tabs, .chips a, .pills a, summary, .round, .gal button, .svc .pick { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html { color-scheme: light; }
.hdr { padding-top: env(safe-area-inset-top, 0px); }
.sheet { padding-top: env(safe-area-inset-top, 0px); height: 100dvh; }
.wrap { padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.lb { padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px)); }
.subnav .chips, .gal, .rv { overscroll-behavior-x: contain; }

/* emil: hover only on fine pointers (menu items were ungated) */
.menu a:hover { background: transparent; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--bg); } }
.menu a:focus-visible { background: var(--bg); }

/* emil: exits faster than enters */
.menu { transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms; }
.dd[data-open] .menu { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
.sheet { transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 0s linear 140ms; }
.sheet[data-open] { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s; }
.lb { transition: opacity 140ms ease-out, visibility 0s linear 140ms; }
.lb[data-open] { transition: opacity 200ms var(--ease-out), visibility 0s; }

/* apple: scroll-edge fade instead of a hard divider under the floating header */
.hdr { border-bottom: 0; }
.hdr::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; background: linear-gradient(rgba(53, 16, 31, .07), transparent); opacity: 0; transition: opacity 200ms ease; }
.hdr.scrolled::after { opacity: 1; }
.subnav { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
@media (prefers-reduced-transparency: reduce) {
  .hdr, .subnav, .mbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(53, 16, 31, .3); --line-2: rgba(53, 16, 31, .5); --muted: rgba(53, 16, 31, .85); }
}

/* stagger the reveal of grid items (emil: 40ms apart, never blocks input) */
.cards > .rv-in:nth-child(2), .svc > .rv-in:nth-child(2), .hcols > .rv-in:nth-child(2) { transition-delay: 40ms; }
.cards > .rv-in:nth-child(3), .svc > .rv-in:nth-child(3), .hcols > .rv-in:nth-child(3) { transition-delay: 80ms; }
.cards > .rv-in:nth-child(4), .svc > .rv-in:nth-child(4) { transition-delay: 120ms; }

/* break-ui fixes */
h1, h2, h3, h4, .d1, .d2, .d3, .d4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.prose, .prose p, .prose li { overflow-wrap: anywhere; }
.email { overflow-wrap: anywhere; }
.book, .info, .policy, .cards, .duo { min-width: 0; }
.book > *, .info > *, .duo > *, .cols2 > * { min-width: 0; }
.d2.xl-name { font-size: 80px; }
@media (pointer: coarse) {
  .tabs button, .subnav .chips a { min-height: 44px; }
  .foot li a { display: inline-block; padding: 4px 0; }
}
@media (max-width: 860px) {
  .d2.xl-name { font-size: 52px; }
}
@media (max-width: 420px) {
  .btn { white-space: normal; padding-block: 10px; }
  .d2, .cols2 .d2, .steps .d2, .faq .d2 { font-size: 34px; }
  .cta-card .d2 { font-size: 44px; }
  .d2.xl-name { font-size: 44px; }
}
.cols2.rolam { align-items: center; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.row .nm { overflow-wrap: anywhere; }
@media (max-width: 860px) { .cols2.rolam { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .row .price { font-size: 20px; } .row .price small { display: block; text-align: right; margin: 2px 0 0; } }
@media (pointer: coarse) { .svc .cap .pick { width: 40px; height: 40px; } }
.svc .cap .tags { overflow-wrap: anywhere; }
.d1 { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 860px) {
  .hero .media-col { order: 0; }
  .hero .portrait { aspect-ratio: 4 / 3; }
  .hero .portrait .shape img { object-position: 50% 22%; }
}

/* scroll performance: one cheap translucent layer only */
.hdr { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.subnav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
.hdr, .subnav, .mbar { transform: translateZ(0); }
.hdr::after { will-change: opacity; }
.blk.alt::before { pointer-events: none; }
@media (max-width: 860px) { .mbar { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }

/* =========================================================
   Scrollytelling — native scroll, sticky + rAF-driven transforms only
   ========================================================= */
:root { --stick-top: calc(var(--header) + 60px + 20px); }

/* 1) Stacked cards — Dina: a szempillaépítés menete */
.stack { list-style: none; display: grid; gap: 28px; padding-bottom: 8px; }
.stack .sc { position: sticky; top: calc(var(--stick-top) + var(--i) * 16px); }
.sc-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: stretch; min-height: 440px; padding: 22px 22px 22px 40px; border-radius: var(--r-tray); background: var(--frame); box-shadow: 0 1px 0 var(--line), 0 -10px 40px -18px var(--shadow); transform-origin: 50% 0; will-change: transform; }
.stack .sc:nth-child(even) .sc-in { background: #FCF4F5; }
.sc-copy { padding: 20px 0; display: flex; flex-direction: column; }
.sc-ph { font: 500 13px/1 var(--body); color: var(--label); }
.sc-ph b { font: 700 15px/1 var(--display); color: var(--hl); margin-right: 2px; }
.sc h3 { font: 700 54px/1.05 var(--display); text-transform: uppercase; color: var(--heading); margin: 16px 0 22px; letter-spacing: -.008em; }
.sc-steps { list-style: none; display: grid; gap: 14px; margin-top: auto; }
.sc-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; font: 400 15.5px/1.55 var(--body); color: var(--text); }
.sc-steps .sn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); font: 700 13px/1 var(--display); color: var(--hl); }
.sc-ph-img { border-radius: 20px 110px 20px 20px; overflow: hidden; background: var(--tray); min-height: 300px; }
.sc-ph-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-in > * { transition: none; }

/* 2) Checklist — Dina: hogyan készülj */
.prep { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); grid-template-rows: auto 1fr; gap: 28px 72px; }
.prep-head { grid-column: 1; grid-row: 1; }
.prep-head .lead { margin-top: 16px; }
.prep-meter { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: var(--stick-top); padding: 26px 28px; display: grid; gap: 16px; }
.pm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pm-count { font: 700 64px/1 var(--display); color: var(--heading); font-variant-numeric: tabular-nums; }
.pm-count b { color: var(--hl); font-weight: 700; }
.pm-status { font: 500 13px/1.3 var(--body); color: var(--label); text-align: right; }
.pm-bar { height: 6px; border-radius: 6px; background: var(--tray-2); overflow: hidden; }
.pm-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.pm-done { font: 500 15px/1.45 var(--body); color: var(--heading); opacity: 0; transform: translateY(4px); transition: opacity 200ms ease-out, transform 200ms var(--ease-out); }
.prep.all .pm-done { opacity: 1; transform: none; }
.prep.all .pm-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.prep-list { grid-column: 2; grid-row: 1 / span 2; list-style: none; }
.pi { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line); }
.pi:last-child { border-bottom: 1px solid var(--line); }
.pi p { font: 400 17px/1.6 var(--body); color: var(--muted); transition: color 200ms ease; }
.pi p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.pi.done p { color: var(--heading); }
.tick { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background-color 200ms ease, border-color 200ms ease; }
.tick svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 220ms var(--ease-out); }
.pi.done .tick { background: var(--accent); border-color: var(--accent); }
.pi.done .tick svg { stroke-dashoffset: 0; transition-delay: 60ms; }

/* 3) Rail fill on step timelines */
.steps ol[data-rail]::before { display: none; }
.steps .rail { position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--line-2); }
.steps .rail i { position: absolute; inset: 0; width: 2px; left: -.5px; background: var(--accent); transform: scaleY(0); transform-origin: top; border-radius: 2px; }
.steps ol[data-rail] > li:first-child .n { background: var(--bg); border-color: var(--line-2); color: var(--heading); }
.alt .steps ol[data-rail] > li:first-child .n { background: var(--alt); }
.steps ol[data-rail] > li .n { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.steps ol[data-rail] > li.on .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps.dots .n.dot { width: 14px; height: 14px; margin: 13px 13px 0; }
.steps.dots ol > li { grid-template-columns: 40px minmax(0, 1fr); padding-bottom: 18px; }
.steps.dots .prose { font-size: 16px; }

@media (max-width: 860px) {
  :root { --stick-top: calc(var(--header) + 54px + 12px); }
  .sc-in { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding: 12px; }
  .sc-ph-img { order: -1; min-height: 0; aspect-ratio: 16 / 9; border-radius: 14px 60px 14px 14px; }
  .sc-copy { padding: 18px 10px 12px; }
  .sc h3 { font-size: 38px; margin: 10px 0 14px; }
  .stack .sc { top: calc(var(--stick-top) + var(--i) * 10px); }
  .prep { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 18px; }
  .prep-head, .prep-meter, .prep-list { grid-column: 1; grid-row: auto; }
  .prep-meter { z-index: 5; padding: 14px 18px; gap: 10px; box-shadow: 0 10px 30px -18px var(--shadow); }
  .pm-count { font-size: 36px; }
  .pm-done, .pm-btn { display: none; }
  .prep.all .pm-done { display: block; }
  .pi { padding: 20px 0; }
  .pi p { font-size: 16px; }
}
@media (max-height: 640px) {
  .stack .sc { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-in { transform: none !important; }
  .tick svg { stroke-dashoffset: 0; }
  .steps .rail i { transform: none !important; opacity: .35; }
}
.sc-in { position: relative; overflow: hidden; min-height: 400px; }
.sc-dim { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; border-radius: inherit; }
.sc-copy { justify-content: center; }
.sc-steps { margin-top: 0; }
@media (max-width: 860px) { .sc-in { min-height: 0; } }

/* generic stacked cards on service pages */
.sc-body { font-size: 15.5px; color: var(--text); }
.sc-body > * + * { margin-top: 10px; }
.sc-link { align-self: flex-start; margin-top: 22px; }
.sc-copy h3 + .sc-body { margin-top: 0; }

/* image reveal on scroll (once): photo rises out of its mask */
.rv-clip { clip-path: inset(10% 0 0 0 round var(--r-frame)); }
.rv-clip img { transform: scale(1.06); transition: transform 900ms var(--ease-out); }
.rv-clip { transition: clip-path 800ms var(--ease-out); }
.rv-clip.in { clip-path: inset(0 0 0 0 round var(--r-frame)); }
.rv-clip.in img { transform: none; }
@media (prefers-reduced-motion: reduce) { .rv-clip { clip-path: none; } .rv-clip img { transform: none; } }
.sc-ph-img { position: relative; }
.sc-ph-img img { position: absolute; inset: 0; }
.stack.flat .sc { position: static; }
.stack.flat .sc-in { transform: none !important; }
.stack.flat .sc-dim { display: none; }
@media (max-width: 860px) {
  .sc-ph-img { aspect-ratio: 21 / 9; }
  .sc-body { font-size: 15px; }
  .sc-link { margin-top: 16px; }
}
/* reveal v2: compositor-only (transform + opacity); clip-path repainted every frame */
.rv-clip, .rv-clip.in { clip-path: none; }
.rv-clip { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.rv-clip.in { opacity: 1; transform: none; }
.rv-clip img { transform: scale(1.06); transition: transform 1100ms var(--ease-out); }
.rv-clip.in img { transform: none; }
@media (prefers-reduced-motion: reduce) { .rv-clip { opacity: 1; transform: none; } }

/* =========================================================
   Liquid glass navigation + smooth transitions
   ========================================================= */
:root {
  --glass-tint: rgba(255, 249, 250, .58);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(53, 16, 31, .05), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --glass-shadow: 0 10px 34px -12px rgba(53, 16, 31, .28), 0 2px 6px -2px rgba(53, 16, 31, .08);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* slight overshoot = liquid */
}

/* header: the bar morphs into a floating glass capsule once you scroll */
.hdr { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; view-transition-name: site-header; }
.hdr::after { display: none; }
.hdr .glass {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  transition: top 460ms var(--ease-drawer), bottom 460ms var(--ease-drawer), left 460ms var(--ease-drawer), right 460ms var(--ease-drawer),
              border-radius 460ms var(--ease-drawer), background-color 300ms ease, box-shadow 300ms ease;
}
.hdr.scrolled .glass {
  top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: 8px;
  left: max(10px, calc(50% - 632px)); right: max(10px, calc(50% - 632px));
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 244, 247, .38)), var(--glass-tint);
  backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
.hdr .wrap { position: relative; }
.hdr.scrolled .brand img { transform: scale(.88); }
.brand img { transition: transform 400ms var(--ease-drawer); transform-origin: left center; }

/* the lens: one glass pill that slides between items instead of per-item backgrounds */
.nav { position: relative; }
.nav > a, .nav > .dd > button { position: relative; z-index: 1; background: transparent !important; }
.nav > a.on, .nav > .dd.on > button, .nav > .is-lens { color: var(--heading); }
.lens {
  position: absolute; left: 0; top: 50%; height: 38px; width: 0; margin-top: -19px; border-radius: 999px; pointer-events: none; z-index: 0; opacity: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .5), 0 4px 14px -6px rgba(53, 16, 31, .25);
  transition: transform 420ms var(--spring), width 420ms var(--spring), opacity 200ms ease;
}
.lens.ready { opacity: 1; }
.lens.squish { transition-duration: 300ms; }

/* subnav: same lens over the chips */
.subnav .chips { position: relative; }
.subnav .chips a { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; }
.subnav .chips a.on { color: var(--heading); }
.subnav .lens { height: 34px; margin-top: -17px; }

/* dropdowns: glass panels that grow out of their trigger */
.menu {
  background: linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(255, 246, 248, .62));
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), 0 24px 60px -18px rgba(53, 16, 31, .35);
  border-radius: 26px; transform: translateY(-6px) scale(.94);
}
.dd[data-open] .menu { transform: none; }
.menu a { border-radius: 16px; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: rgba(255, 255, 255, .7); } }

/* mobile: the menu grows out of the burger button (clip-path morph) */
.burger { background: rgba(255, 255, 255, .5); border-color: var(--glass-edge); box-shadow: var(--glass-hi); border-radius: 999px; }
.sheet {
  background: linear-gradient(170deg, rgba(255, 250, 251, .86), rgba(247, 235, 236, .9));
  backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
  opacity: 1; transform: none;
  clip-path: circle(22px at var(--bx, calc(100% - 42px)) var(--by, 38px));
  transition: clip-path 260ms var(--ease-out), visibility 0s linear 260ms;
}
.sheet[data-open] { clip-path: circle(150% at var(--bx, calc(100% - 42px)) var(--by, 38px)); transition: clip-path 560ms var(--ease-drawer), visibility 0s; }
.sheet .bar .burger { background: rgba(255, 255, 255, .7); }
.sheet a.l, .sheet h6, .sheet .cta { opacity: 0; transform: translateY(10px); transition: opacity 160ms ease, transform 160ms ease; }
.sheet[data-open] a.l, .sheet[data-open] h6, .sheet[data-open] .cta { opacity: 1; transform: none; transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(80ms + var(--k, 0) * 22ms); }

/* mobile booking bar: glass */
@media (max-width: 860px) {
  .mbar { background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 244, 247, .44)); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); border-radius: 24px; view-transition-name: mbar; }
  .hdr.scrolled .glass { left: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 6px); bottom: 6px; }
}

/* page-to-page: cross-document view transitions (Chrome/Edge 126+, Safari 18.2+; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 180ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 340ms var(--ease-out) both; }
::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: var(--ease-drawer); }
::view-transition-image-pair(*) { isolation: isolate; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
/* in-page swaps (filters, tabs) animate only the named pieces, not the whole page */
html.vt-local::view-transition-old(root), html.vt-local::view-transition-new(root) { animation: none; }
html.vt-local::view-transition-group(*) { animation-duration: 340ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hdr .glass, .lens, .brand img { transition-duration: 1ms; }
  .sheet, .sheet[data-open] { clip-path: none; transition: opacity 150ms ease, visibility 0s; }
  .sheet:not([data-open]) { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .hdr.scrolled .glass, .menu, .sheet, .mbar { background: var(--frame); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.menu { background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 246, 248, .82)); }

/* liquid glass segmented controls + sliding row highlight */
.tabs { position: relative; background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .16)); border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(53, 16, 31, .06); border-radius: 14px; }
.tabs button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; border-radius: 10px; transition: color 200ms ease; }
.tabs button[aria-selected="true"] { color: var(--heading); }
.lens.tl, .lens.rl { top: 0; left: 0; margin-top: 0; border-radius: 10px;
  transition: transform 440ms var(--spring), width 440ms var(--spring), height 440ms var(--spring), opacity 200ms ease; }
.lens.rl { border-radius: 14px; background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .6), 0 6px 18px -8px rgba(53, 16, 31, .28); }
.rows { position: relative; }
.rows .row { z-index: 1; }
.rows .row[aria-checked="true"] { background: transparent; }
.rows .row[aria-checked="true"] .rad { box-shadow: inset 0 0 0 4px #fff; }
@media (prefers-reduced-motion: reduce) { .lens.tl, .lens.rl { transition-duration: 1ms; } }

/* =========================================================
   Gallery v2 — bento mosaic + full-screen glass viewer
   ========================================================= */
.gx .sh { align-items: flex-end; }
.gx-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 250px); }
.gx-grid.n5 > .gt:first-child, .gx-grid.n4 > .gt:first-child { grid-column: span 2; grid-row: span 2; }
.gx-grid.n4 > .gt:last-of-type:not([hidden]) { grid-column: span 2; }
.gx-grid.n3 { grid-template-columns: 2fr 1fr; }
.gx-grid.n3 > .gt:first-child { grid-row: span 2; }
.gx-grid.n2, .gx-grid.n1 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 32vw, 460px); }
.gx-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.gt { position: relative; overflow: hidden; border-radius: 22px; background: var(--tray); padding: 0; isolation: isolate; transition: transform 160ms var(--ease-out); }
.gx-grid > .gt:first-child { border-radius: 28px 120px 28px 28px; }
.gt img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out), filter 400ms ease; }
.gt:active { transform: scale(.985); }
.gt-zoom { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--heading);
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(53, 16, 31, .35); opacity: 0; transform: scale(.9); transition: opacity 200ms ease, transform 260ms var(--spring); }
.gt-zoom svg.i { width: 16px; height: 16px; }
.gx-more { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; color: #fff; z-index: 1;
  background: linear-gradient(180deg, rgba(53, 16, 31, .25), rgba(53, 16, 31, .62)); }
.gx-more b { font: 700 54px/1 var(--display); letter-spacing: -.01em; }
.gx-more small { font: 500 13px/1.2 var(--body); opacity: .9; }
.gt:has(.gx-more) .gt-zoom { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gt:hover img { transform: scale(1.045); }
  .gt:hover .gt-zoom { opacity: 1; transform: none; }
}
.gx-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 0 4px; }
.gx-grid > .gt.rv-in:nth-child(2) { transition-delay: 50ms; } .gx-grid > .gt.rv-in:nth-child(3) { transition-delay: 100ms; }
.gx-grid > .gt.rv-in:nth-child(4) { transition-delay: 150ms; } .gx-grid > .gt.rv-in:nth-child(5) { transition-delay: 200ms; }

@media (max-width: 860px) {
  .gx .sh .gx-all { display: none; }
  .gx-grid, .gx-grid.n5, .gx-grid.n4, .gx-grid.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; gap: 8px; }
  .gx-grid > .gt:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: auto; border-radius: 20px 70px 20px 20px; }
  .gx-grid.n5 > .gt:first-child, .gx-grid.n4 > .gt:first-child { grid-row: span 1; }
  .gx-grid.n3 > .gt:first-child { grid-row: span 1; }
  .gx-grid > .gt:first-child { grid-row-end: span 1; height: 62vw; }
  .gx-grid.n4 > .gt:last-of-type:not([hidden]) { grid-column: span 2; }
  .gt { border-radius: 16px; }
  .gx-more b { font-size: 40px; }
  .gx-foot { margin-top: 10px; }
}

/* viewer */
.gv { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; visibility: hidden; opacity: 0;
  transition: opacity 180ms ease-out, visibility 0s linear 180ms; overscroll-behavior: contain; touch-action: none; }
.gv[data-open] { visibility: visible; opacity: 1; transition: opacity 260ms var(--ease-out), visibility 0s; }
.gv-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 40%, rgba(70, 20, 40, .9), rgba(28, 6, 16, .96));
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.gv-top { display: flex; align-items: center; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 18px) max(24px, env(safe-area-inset-right, 0px)) 10px max(24px, env(safe-area-inset-left, 0px)); }
.gv-count { font: 700 22px/1 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.gv-count small { font: 500 13px var(--body); opacity: .6; margin-left: 4px; }
.gv-title { flex: 1; min-width: 0; font: 500 14px/1.3 var(--body); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.gv-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .gv-btn:hover { background-color: rgba(255, 255, 255, .14); } }
.gv-stage { position: relative; display: grid; place-items: center; padding: 8px 88px; min-height: 0; }
.gv-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; cursor: grab; will-change: transform; }
.gv-img.dragging { cursor: grabbing; }
.gv-prev, .gv-next { position: absolute; top: 50%; margin-top: -24px; }
.gv-prev { left: 24px; } .gv-next { right: 24px; }
.gv-strip { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 14px max(24px, env(safe-area-inset-left, 0px)) calc(env(safe-area-inset-bottom, 0px) + 18px); scrollbar-width: none; justify-content: safe center; }
.gv-strip::-webkit-scrollbar { display: none; }
.gv-strip button { position: relative; z-index: 1; flex: 0 0 auto; width: 54px; height: 68px; border-radius: 12px; overflow: hidden; padding: 0; opacity: .55; transition: opacity 200ms ease, transform 160ms var(--ease-out); }
.gv-strip button[aria-current="true"] { opacity: 1; }
.gv-strip button:active { transform: scale(.94); }
.gv-strip img { width: 100%; height: 100%; object-fit: cover; }
.gv-strip .lens { top: 0; left: 0; margin-top: 0; z-index: 2; border-radius: 14px; background: none; box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(255, 255, 255, .18);
  transition: transform 420ms var(--spring), width 420ms var(--spring), height 420ms var(--spring), opacity 200ms ease; }
@media (max-width: 860px) {
  .gv-stage { padding: 4px 12px; }
  .gv-prev, .gv-next { display: none; }
  .gv-btn { width: 44px; height: 44px; }
  .gv-strip button { width: 44px; height: 56px; border-radius: 10px; }
  .gv-img { border-radius: 16px; }
}
::view-transition-group(gx-hero) { animation-duration: 420ms; animation-timing-function: var(--ease-drawer); }
::view-transition-old(gx-hero), ::view-transition-new(gx-hero) { height: 100%; object-fit: cover; overflow: clip; }
@media (prefers-reduced-motion: reduce) { .gt img, .gt-zoom { transition: none; } }
.gv-img { max-height: calc(100dvh - 220px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
@media (max-width: 860px) {
  .gx-grid, .gx-grid.n5, .gx-grid.n4, .gx-grid.n3 { grid-template-rows: 62vw; grid-auto-rows: 42vw; }
  .gx-grid > .gt:first-child { height: auto; }
  .gv-img { max-height: calc(100dvh - 190px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
.gv-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.gv-img { max-width: 100%; justify-self: center; align-self: center; }
.gv { grid-template-columns: minmax(0, 1fr); } .gv-top, .gv-strip { min-width: 0; }

/* =========================================================
   Coverflow gallery — scroll-linked (transform/opacity only)
   ========================================================= */
.cf-stage { position: relative; --cw: clamp(230px, 27vw, 380px); }
.blk > .gx .cf-stage, .blk > div > .gx .cf-stage { margin-inline: calc(50% - 50vw); }
.cf-track {
  display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: auto; overscroll-behavior-x: contain;
  padding: 36px calc(50% - var(--cw) / 2) 44px; scrollbar-width: none; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  touch-action: pan-x pan-y; cursor: grab;
}
.cf-track::-webkit-scrollbar { display: none; }
.cf-track.drag { cursor: grabbing; scroll-snap-type: none; }
.cf-track.drag .cf-card { pointer-events: none; }
.cf-card {
  flex: 0 0 var(--cw); aspect-ratio: 4 / 5; margin-inline: calc(var(--cw) * -.09);
  scroll-snap-align: center; scroll-snap-stop: normal;
  border-radius: 26px; overflow: hidden; padding: 0; background: var(--tray); position: relative;
  transform-origin: 50% 50%; transition: none !important;
  box-shadow: 0 2px 6px -2px rgba(53, 16, 31, .12);
}
.cf-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--bg); opacity: var(--dim, 0); }
.cf-card.cur { box-shadow: 0 30px 60px -22px rgba(53, 16, 31, .45), 0 8px 18px -10px rgba(53, 16, 31, .25); }
.cf-card img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; transition: none; }
.cf-card .gt-zoom { opacity: 0; transform: scale(.9); transition: opacity 200ms ease, transform 260ms var(--spring); }
.cf-card.cur .gt-zoom { opacity: 1; transform: none; }
.cf-card:active img { transform: none; }
.cf-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.cf-stage .cf-prev, .cf-stage .cf-next { position: absolute; top: 50%; margin-top: -24px; z-index: 50; color: var(--heading);
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); box-shadow: inset 0 1px 0 #fff, 0 8px 22px -10px rgba(53, 16, 31, .4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 200ms ease, transform 160ms var(--ease-out); }
.cf-stage .cf-prev { left: max(16px, calc(50% - var(--cw) / 2 - var(--cw) * .95)); }
.cf-stage .cf-next { right: max(16px, calc(50% - var(--cw) / 2 - var(--cw) * .95)); }
.cf-stage .cf-prev[disabled], .cf-stage .cf-next[disabled] { opacity: 0; pointer-events: none; }
.cf-meta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.cf-count { font: 500 13px/1 var(--body); color: var(--label); font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }
.cf-count b { font: 700 17px/1 var(--display); color: var(--heading); letter-spacing: .02em; }
.cf-bar { width: 120px; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.cf-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transform-origin: left; transform: scaleX(0); }
@media (hover: hover) and (pointer: fine) { .cf-card.cur:hover img { transform: scale(1.03); transition: transform 600ms var(--ease-out); } }
@media (max-width: 860px) {
  .cf-stage { --cw: 66vw; }
  .cf-track { padding-block: 22px 30px; -webkit-mask-image: none; mask-image: none; }
  .cf-card { border-radius: 20px; margin-inline: calc(var(--cw) * -.11); }
  .cf-stage .cf-prev, .cf-stage .cf-next { display: none; }
  .cf-meta { gap: 14px; }
  .cf-bar { width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .cf-card .gt-zoom { transition: none; } }
.cf-track { padding-inline: calc(50% - var(--cw) / 2 + var(--cw) * .09); }
.cf-card:not(.cur) .gt-zoom { opacity: 0 !important; }
@media (max-width: 860px) {
  .cf-track { padding-inline: calc(50% - var(--cw) / 2 + var(--cw) * .11); }
  .gx .sh { align-items: flex-start; }
}

/* checklists everywhere + reading highlight */
.prep-list-wrap { grid-column: 2; grid-row: 1 / span 2; }
.prep-list-wrap .prep-list { grid-column: auto; grid-row: auto; }
.prep-outro { margin-top: 22px; font-size: 15px; color: var(--muted); }
.prep-head .d2 { font-size: 52px; }
.pi p strong { color: inherit; font-weight: 600; }
.prose li.hl { color: var(--muted); transition: color 380ms var(--ease-out); }
.prose li.hl.lit { color: var(--text); }
.prose li.hl strong { transition: color 380ms var(--ease-out); }
.prose ul li.hl::before { background: var(--line-2); transform: scale(.75); transition: background-color 300ms ease, transform 360ms var(--spring); }
.prose ul li.hl.lit::before { background: var(--accent); transform: none; }
.sc-steps li.hl { color: var(--muted); transition: color 380ms var(--ease-out); }
.sc-steps li.hl.lit { color: var(--text); }
.sc-steps li.hl .sn { transition: background-color 300ms ease, color 300ms ease; }
.sc-steps li.hl.lit .sn { background: var(--accent); color: #fff; }
@media (max-width: 860px) {
  .prep-list-wrap { grid-column: 1; grid-row: auto; }
  .prep-head .d2 { font-size: 40px; }
}
@media (max-width: 420px) { .prep-head .d2 { font-size: 34px; } }
/* reading highlight v2: compositor-only (opacity/transform), no colour repaints */
.prose li.hl, .sc-steps li.hl { color: var(--text); opacity: .42; transition: opacity 420ms var(--ease-out); }
.prose li.hl.lit, .sc-steps li.hl.lit { opacity: 1; }
.prose ul li.hl::before { background: var(--accent); transform: scale(.6); transition: transform 360ms var(--spring); }
.prose ul li.hl.lit::before { transform: none; }
.sc-steps li.hl .sn, .sc-steps li.hl.lit .sn { transition: none; background: var(--accent-soft); color: var(--hl); }
.pi p { transition: opacity 300ms ease; color: var(--heading); opacity: .5; }
.pi.done p { opacity: 1; }
/* edge fade without mask-image (mask on a scroller repaints every frame) */
.cf-track { -webkit-mask-image: none !important; mask-image: none !important; }
.cf-stage { --fade: var(--bg); }
.alt .cf-stage { --fade: var(--alt); }
.cf-stage::before, .cf-stage::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 45; pointer-events: none; }
.cf-stage::before { left: 0; background: linear-gradient(90deg, var(--fade), transparent); }
.cf-stage::after { right: 0; background: linear-gradient(270deg, var(--fade), transparent); }
@media (max-width: 860px) { .cf-stage::before, .cf-stage::after { display: none; } }
/* 3D coverflow */
.cf-track { transform-style: flat; }
.cf-card { transform-style: preserve-3d; backface-visibility: hidden; margin-inline: calc(var(--cw) * -.2); }
.cf-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.22), transparent 30%, transparent 70%, rgba(53,16,31,.12)); opacity: .9; }
.cf-card.cur::before { opacity: 0; transition: opacity 300ms ease; }
.cf-track { padding-inline: calc(50% - var(--cw) / 2 + var(--cw) * .2); }
@media (max-width: 860px) {
  .cf-card { margin-inline: calc(var(--cw) * -.24); }
  .cf-track { padding-inline: calc(50% - var(--cw) / 2 + var(--cw) * .24); }
}
@media (max-width: 860px) { .cf-stage { --cw: 58vw; } }
/* rail timelines: the text lights up together with its dot */
.steps ol[data-rail] > li > div, .steps ol[data-rail] > li > .prose { opacity: .4; transition: opacity 420ms var(--ease-out); }
.steps ol[data-rail] > li.on > div, .steps ol[data-rail] > li.on > .prose { opacity: 1; }
.steps ol[data-rail] > li .n { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 360ms var(--spring); }
.steps ol[data-rail] > li:not(.on) .n { transform: scale(.85); }
@media (prefers-reduced-motion: reduce) { .steps ol[data-rail] > li > div, .steps ol[data-rail] > li > .prose { opacity: 1; } }
/* 3D tilt cards */
.tilt { position: relative; transform-style: preserve-3d; will-change: transform; transition: box-shadow 300ms ease; }
.tilt .glare { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 3; opacity: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 38%); mix-blend-mode: soft-light; }
.svc a.tray.tilt, .cards a.tray.tilt, .ptray.tilt, .v-wrap .v.tilt { overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .svc a.tray.tilt:hover, .cards a.tray.tilt:hover { box-shadow: 0 24px 48px -24px rgba(53, 16, 31, .35); } }
.v-wrap { perspective: 900px; }

/* stacked cards stay sticky on short screens too (tall cards stick by their bottom edge, see site.js) */
@media (max-height: 640px) { .stack .sc { position: sticky; } }

/* =========================================================
   Price picker v2 — savings, add-ons, rolling total, phone price bar
   ========================================================= */
.row .price { white-space: nowrap; text-align: right; }
.row .price s { display: block; font: 500 12.5px/1 var(--body); color: var(--label); text-decoration-thickness: 1px; margin-bottom: 5px; letter-spacing: 0; }
.row .perk { display: block; margin-top: 4px; font: 400 12.5px/1.45 var(--body); color: var(--muted); }
.row .perk b { font-weight: 600; color: var(--hl); }
.row .best { display: inline-block; margin-left: 8px; padding: 3px 8px 3px; border-radius: 999px; vertical-align: 2px;
  font: 600 10.5px/1.2 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); }
@media (max-width: 420px) { .row .price small { display: inline; margin: 0 0 0 3px; } .row .best { margin: 4px 0 2px; display: table; } }
.p-gt span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
/* add-ons: checkboxes, several may be on — no sliding lens, each row lights up on its own */
.rows.adds > .lens { display: none; }
.rows.adds .row.add .rad { border-radius: 7px; display: grid; place-items: center; }
.rows.adds .row.add[aria-checked="true"] { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 6px 18px -10px rgba(53, 16, 31, .28); }
.rows.adds .row.add[aria-checked="true"] .rad { border-color: var(--accent); box-shadow: none;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.rows.adds .row.add[aria-checked="true"] + .row::before, .rows.adds .row.add[aria-checked="true"]::before { display: none; }
.row:active .rad { transform: scale(.88); }
.row .rad { transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 160ms var(--spring); }
/* variant tabs: full names on wide screens, short ones on phones — always one row */
.tabs .t-sm { display: none; }
.p-head .tabs { flex-wrap: nowrap; }
@media (max-width: 860px) {
  .p-head { gap: 14px; }
  .p-head > div:last-child { width: 100%; }
  .p-head .tabs { width: 100%; }
  .p-head .tabs button { flex: 1; padding: 0 10px; }
  .tabs .t-lg { display: none; }
  .tabs .t-sm { display: inline; }
}
/* summary facts */
.sum .total .v { font-variant-numeric: tabular-nums; }
.sum .facts:empty { display: none; }
.sum .facts { display: grid; gap: 10px; margin-top: 14px; }
.chip { display: inline-grid; place-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 14px/1 var(--display); letter-spacing: .02em; font-style: normal; }
.f-save { display: flex; gap: 10px; align-items: center; font: 400 13.5px/1.4 var(--body); color: var(--text); }
.f-save b { color: var(--heading); font-weight: 600; }
.f-save s { color: var(--label); }
.f-per { font: 500 14px/1.4 var(--body); color: var(--heading); }
.f-per span { color: var(--muted); font-weight: 400; margin-left: 4px; }
.f-adds { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font: 400 13.5px/1.4 var(--body); color: var(--text); }
.f-adds span { display: flex; justify-content: space-between; gap: 12px; }
.f-adds b { color: var(--heading); font-weight: 600; white-space: nowrap; }
.f-adds em { font-style: normal; font-size: 12px; color: var(--muted); }
/* phone price bar: the booking bar carries the current choice while the list is on screen */
.mbar .mp { display: none; }
@media (max-width: 860px) {
  .mbar.price .mp { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding: 0 6px 0 10px; }
  .mbar.price .btn.soft { display: none; }
  .mbar.price .btn:not(.soft) { flex: 0 0 auto; padding: 0 18px; }
  .mp-w { font: 500 11.5px/1.25 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mp-t { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; font: 700 23px/1 var(--display); color: var(--heading); font-variant-numeric: tabular-nums; }
  .mp-t small { font: 500 11.5px var(--body); color: var(--label); }
  .mp-t .chip { min-height: 20px; padding: 0 7px; font-size: 12px; margin-left: 4px; align-self: center; }
}
.row .perk > span { white-space: nowrap; }
.row .perk > i { font-style: normal; }
@media (max-width: 600px) {
  .row .perk > span { display: block; }
  .row .perk > i { display: none; }
  .rows.adds .row .price small { display: block; margin: 3px 0 0; }
}

/* =========================================================
   Wow layer
   ========================================================= */
/* hero intro: words rise out of a mask (padding keeps accents like É uncut), the rest follows */
.js .hero h1:not(.wsplit) { opacity: 0; animation: wow-show 0s 1.2s forwards; }
@keyframes wow-show { to { opacity: 1; } }
.hero h1 .w { display: inline-block; overflow: clip; vertical-align: top; padding: .16em .02em .08em; margin: -.16em -.02em -.08em; }
.js .hero h1 .wi { display: inline-block; transform: translate3d(0, 112%, 0); }
.js.hero-in .hero h1 .wi { transform: none; transition: transform 650ms cubic-bezier(.16, 1, .3, 1) calc(var(--k) * 45ms + 20ms); }
.js .hero > div:first-child > :not(h1), .js .hero .media-col > * { opacity: 0; translate: 0 18px; }
.js.hero-in .hero > div:first-child > :not(h1), .js.hero-in .hero .media-col > * { opacity: 1; translate: 0 0;
  transition: opacity 700ms ease calc(var(--wk, 4) * 75ms + 200ms), translate 900ms cubic-bezier(.16, 1, .3, 1) calc(var(--wk, 4) * 75ms + 200ms); }
.js.hero-in .hero .media-col > * { transition-delay: 120ms, 120ms; }
.hero .media-col, .hero > div:first-child { will-change: transform; }
.hero .portrait .shape img { will-change: transform; transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .wi, .js .hero > div:first-child > :not(h1), .js .hero .media-col > * { transform: none; opacity: 1; translate: none; }
  .hero .portrait .shape img { transform: none; }
}
.cnt { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }

/* buttons: springy press (the light sweep was removed 2026-10-19 – user: it looked cheap) */
.btn { transition: transform 260ms var(--spring), background-color 150ms ease, box-shadow 200ms ease; }
.btn:active { transform: scale(.965); transition-duration: 90ms; }

/* ---------- service finder ---------- */
.fd { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.fd[hidden] { display: none; }
.fd-scrim { position: absolute; inset: 0; background: rgba(53, 16, 31, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 280ms ease; }
.fd-card { position: relative; width: min(640px, 100%); max-height: min(760px, calc(100dvh - 40px)); overflow: hidden; display: flex; flex-direction: column;
  border-radius: 28px; background: var(--bg); box-shadow: 0 40px 90px -30px rgba(53, 16, 31, .55), inset 0 0 0 1px rgba(255, 255, 255, .6);
  opacity: 0; transform: translateY(24px) scale(.97); transition: opacity 260ms ease, transform 420ms var(--spring); }
.fd.open .fd-scrim { opacity: 1; }
.fd.open .fd-card { opacity: 1; transform: none; }
.fd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0; }
.fd-top .round { width: 42px; height: 42px; }
.fd-back[hidden] { visibility: hidden; display: grid; }
.fd-dots { display: flex; gap: 6px; }
.fd-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background-color 300ms ease, width 400ms var(--spring); }
.fd-dots i.on { background: var(--accent); width: 34px; }
.fd-track { display: flex; transition: transform 400ms cubic-bezier(.32, .72, 0, 1); flex: 1; min-height: 0; }
.fd-step { flex: 0 0 100%; padding: 18px 28px 30px; overflow-y: auto; }
.fd-step h2 { margin: 6px 0 18px; }
.fd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fd-opts.one { grid-template-columns: minmax(0, 1fr); }
.fd-opt { min-height: 56px; padding: 14px 16px; border-radius: 16px; text-align: left; font: 500 15px/1.3 var(--body); color: var(--heading);
  background: var(--frame); box-shadow: inset 0 0 0 1px var(--line); transition: transform 220ms var(--spring), box-shadow 150ms ease, background-color 150ms ease; }
.fd-opt b { display: block; font-weight: 600; }
.fd-opt small { display: block; margin-top: 3px; font: 400 13px/1.35 var(--body); color: var(--muted); }
.fd-opt:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .fd-opt:hover { box-shadow: inset 0 0 0 1.5px var(--accent); } }
.fd-opt[data-g="unsure"] { grid-column: 1 / -1; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); text-align: center; }
.fd-pick { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 8px; }
.fd-img { aspect-ratio: 4 / 5; border-radius: 18px 46px 18px 18px; overflow: hidden; background: var(--tray); }
.fd-img img { width: 100%; height: 100%; object-fit: cover; }
.fd-copy h2 { margin: 0 0 6px; }
.fd-tags { font: 500 12.5px/1.4 var(--body); color: var(--hl); letter-spacing: .02em; }
.fd-blurb { margin-top: 10px; font: 400 14.5px/1.55 var(--body); color: var(--text); }
.fd-price { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--frame); box-shadow: inset 0 0 0 1px var(--line); }
.fd-price small { display: block; font: 500 13px/1.3 var(--body); color: var(--muted); }
.fd-price > div > b { display: block; margin-top: 4px; font: 700 40px/1 var(--display); color: var(--heading); }
.fd-price > div > b s { font: 500 15px var(--body); color: var(--label); vertical-align: 10px; }
.fd-price em { font: 500 14px var(--body); font-style: normal; color: var(--label); margin-left: 6px; }
.fd-price p { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 400 13.5px/1.4 var(--body); color: var(--text); }
.fd-act { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 18px; }
.fd-alt { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 14px 10px 10px; border-radius: 16px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--heading); font: 600 14.5px/1.3 var(--body); }
.fd-alt small { display: block; font: 400 12px/1.3 var(--body); color: var(--muted); }
.fd-alt > span:nth-child(2) { flex: 1; }
.fd-alt-img { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: none; }
.fd-alt-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) {
  .fd { padding: 0; place-items: end stretch; }
  .fd-card { width: 100%; max-height: calc(100dvh - 40px); border-radius: 28px 28px 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
  .fd-step { padding: 14px 18px 26px; }
  .fd-opts { grid-template-columns: minmax(0, 1fr); }
  .fd-pick { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .fd-price b { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .fd-card, .fd-track, .fd-scrim { transition-duration: 1ms; } }

/* ---------- 10 másodpercben ---------- */
.xpl { margin-top: 40px; }
.xpl-in { border-radius: var(--r-tray); padding: 22px 26px 24px; background: linear-gradient(150deg, var(--frame) 0%, #FBEFF1 55%, var(--alt) 100%);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -36px rgba(53, 16, 31, .35), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.xpl-top { display: flex; align-items: center; gap: 18px; }
.xpl-prog { flex: 1; display: flex; gap: 6px; }
.xpl-prog button { flex: 1; padding: 10px 0; cursor: pointer; }
.xpl-prog i { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(53, 16, 31, .12); overflow: hidden; }
.xpl-prog i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.xpl-pp { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); color: var(--heading); }
.xpl-pp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xpl-pp .pl { display: none; fill: currentColor; stroke: none; }
.xpl.paused .xpl-pp .pz { display: none; }
.xpl.paused .xpl-pp .pl { display: block; }
.xpl-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; margin-top: 10px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }
.xpl-art svg { display: block; width: 100%; height: auto; }
.xpl-beats { display: grid; }
.xpl-b { grid-area: 1 / 1; align-self: center; opacity: 0; translate: 0 14px; transition: opacity 380ms ease, translate 600ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.xpl-b.on, .xpl:not([data-cur]) .xpl-b[data-b="0"] { opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: 120ms; }
.xpl-k { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.xpl-k b { color: var(--hl); margin-right: 4px; }
.xpl-b h3 { margin: 14px 0 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; }
.xpl-b p { font: 400 16px/1.55 var(--body); color: var(--text); max-width: 460px; }
.xpl-chips { list-style: none; display: grid; gap: 8px; margin: 16px 0 14px; }
.xpl-chips li { display: flex; gap: 10px; align-items: flex-start; font: 500 15.5px/1.4 var(--body); color: var(--heading); opacity: 0; translate: 0 8px; }
.xpl-chips li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.xpl-b.on .xpl-chips li { opacity: 1; translate: 0 0; transition: opacity 300ms ease calc(var(--d) + 250ms), translate 500ms cubic-bezier(.16, 1, .3, 1) calc(var(--d) + 250ms); }
.xpl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.xpl-price { font: 600 14px/1 var(--body); color: var(--heading); padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 860px) {
  .xpl { margin-top: 26px; }
  .xpl-in { padding: 14px 16px 18px; }
  .xpl-stage { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .xpl-b h3 { margin: 10px 0 8px; }
  .xpl-b p { font-size: 15px; }
  .xpl-chips li { font-size: 14.5px; }
  .xpl-foot .tlink { display: none; }
  .xpl-foot .btn { flex: 1; }
}
/* static fallback (reduced motion): all beats listed, first picture only */
.xpl.static .xpl-prog, .xpl.static .xpl-pp { display: none; }
.xpl.static .xpl-stage { cursor: default; }
.xpl.static .xpl-beats { gap: 22px; }
.xpl.static .xpl-b { grid-area: auto; opacity: 1; translate: none; }
.xpl.static .xpl-chips li { opacity: 1; translate: none; }

/* illustration: scenes cross-fade; animations restart each time a scene becomes current */
.xpl-art .sc { opacity: 0; transition: opacity 500ms ease; }
.xpl[data-cur="0"] .sc0, .xpl[data-cur="1"] .sc1, .xpl[data-cur="2"] .sc2, .xpl:not([data-cur]) .sc0, .xpl.static .sc0 { opacity: 1; }
.xpl-art .panel { fill: var(--heading); }
.xpl-art .led { fill: #FF6B6B; opacity: .5; }
.xpl-art .led.on { opacity: .95; }
.xpl-art .l1 { fill: #F7DCD6; } .xpl-art .l2 { fill: #F0C6BF; } .xpl-art .l3 { fill: #F6E4D2; }
.xpl-art .lbl { font: 500 11.5px var(--body); fill: var(--muted); }
.xpl-art .ray, .xpl-art .pen { stroke-width: 3.2; stroke-linecap: round; }
.xpl-art .ray { stroke-dasharray: 7 9; opacity: .9; }
.xpl-art .ray.nir { stroke-dasharray: 2 7; }
.xpl-art .pen { stroke-dasharray: 160; stroke-dashoffset: 160; }
.xpl-art .pen.nir { stroke-dasharray: 2 7; stroke-dashoffset: 0; clip-path: inset(0 0 100% 0); }
.xpl-art .tip { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.xpl[data-cur="0"] .ray { animation: flow 900ms linear infinite; }
.xpl[data-cur="0"] .pen:not(.nir) { animation: pen 900ms cubic-bezier(.16, 1, .3, 1) var(--d) forwards; }
.xpl[data-cur="0"] .pen.nir { animation: pen-nir 900ms cubic-bezier(.16, 1, .3, 1) var(--d) forwards; }
.xpl[data-cur="0"] .tip { animation: tip 500ms var(--spring) var(--d) forwards, pulse 1.6s ease-in-out calc(var(--d) + 500ms) infinite; }
.xpl.static .pen:not(.nir) { stroke-dashoffset: 0; } .xpl.static .pen.nir { clip-path: none; } .xpl.static .tip { transform: none; }
@keyframes flow { to { stroke-dashoffset: -32; } }
@keyframes pen { to { stroke-dashoffset: 0; } }
@keyframes pen-nir { to { clip-path: inset(0 0 0 0); } }
@keyframes tip { to { transform: scale(1); } }
@keyframes pulse { 50% { opacity: .45; } }
.xpl-art .halo { fill: url(#xg); opacity: .6; }
.xpl-art .bc { fill: #fff; filter: drop-shadow(0 10px 18px rgba(53, 16, 31, .16)); }
.xpl-art .br { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.xpl-art .bi path { fill: none; stroke: var(--heading); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.xpl-art .bi .thin { stroke-width: 2; stroke: var(--accent); }
.xpl-art .bl { font: 600 15px var(--body); fill: var(--heading); text-anchor: middle; }
.xpl-art .bn { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.6); }
.xpl[data-cur="1"] .bn { animation: pop 700ms var(--spring) calc(var(--d) + 150ms) forwards; }
.xpl[data-cur="1"] .br { animation: ring 1.4s ease-out calc(var(--d) + 450ms) 2; }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.xpl-art .glow { fill: url(#xg); }
.xpl[data-cur="2"] .glow { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
.xpl-art .bed { fill: rgba(53, 16, 31, .14); }
.xpl-art .body > * { fill: #D9A3AA; }
.xpl-art .tr-bg { fill: rgba(255, 255, 255, .85); stroke: rgba(53, 16, 31, .1); stroke-width: 5; }
.xpl-art .tr { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); }
.xpl[data-cur="2"] .tr { animation: pen var(--beat, 3600ms) linear forwards; }
.xpl.paused .xpl-art * { animation-play-state: paused !important; }
.xpl-art .tt { font: 700 17px var(--display); fill: var(--heading); text-anchor: middle; }
.xpl-art .tu { font: 500 10.5px var(--body); fill: var(--muted); text-anchor: middle; }
.xpl-art .lbl.nm { font-weight: 600; fill: var(--heading); }
.xpl-art .lbl.cap { font-size: 11px; letter-spacing: .04em; fill: var(--label); }
/* phones: when a page has the 10-second explainer, the hero keeps only headline, tagline and actions */
@media (max-width: 860px) { .hero.has-xpl .lead, .hero.has-xpl .pills { display: none; } .hero.has-xpl .actions { margin-top: 20px; } }
.fd-price p b { font-weight: 600; color: var(--heading); }

/* =========================================================
   Phone fixes (from the 2026-10-18 screen recording)
   ========================================================= */
/* 3D gallery cards keep their z-order inside the gallery, never above the sticky bars */
.cf-stage { isolation: isolate; }
.subnav { z-index: 49; }
@media (max-width: 860px) {
  /* header + subnav form one solid band: nothing scrolls visibly behind or around the logo capsule */
  .hdr { background: var(--bg) !important; }
  .hdr.scrolled .glass { background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 246, 248, .86)); }
  .subnav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* booking / price bar: near-opaque so list rows don't show through it */
  .mbar { background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 246, 248, .93)); }
  /* sticky checklist meter: a ring in the section colour hides the items sliding under it */
  .blk { --sbg: var(--bg); }
  .blk.alt { --sbg: var(--alt); }
  .prep-meter { top: calc(var(--header) + 54px + 8px); box-shadow: 0 0 0 9px var(--sbg), 0 18px 30px -20px var(--shadow); }
  /* 10-second explainer: progress gets its own full-width row, the CTA its own line */
  .xpl-top { flex-wrap: wrap; row-gap: 2px; }
  .xpl-top .kicker { flex: 1; min-width: 0; }
  .xpl-prog { order: 3; flex: 0 0 100%; }
  .xpl-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .xpl-price { align-self: flex-start; }
  .xpl-foot .btn { width: 100%; flex: none; white-space: normal; }
  /* stacked cards: a short dwell, so each card sits fully readable before the next one slides over it */
  .stack .sc:not(:last-child) { margin-bottom: 18vh; }
}
@media (max-width: 860px) {
  .prep-meter::after { content: ""; position: absolute; left: -9px; right: -9px; top: calc(100% + 9px); height: 22px; pointer-events: none; background: linear-gradient(var(--sbg), transparent); }
}

/* =========================================================
   Phones: photos are shown whole — every frame takes its photo's own proportions
   ========================================================= */
@media (max-width: 860px) {
  .portrait, .hero .portrait, .rolam .portrait { aspect-ratio: auto !important; }
  .portrait .shape { position: relative; inset: auto; }
  .portrait .shape img, .hero .portrait .shape img { display: block; height: auto; transform: none !important; }
  .split .ph, .cols2 .media, .cards-media .ph, .svc .frame, .cards .frame, .fd-img { aspect-ratio: auto !important; }
  .split .ph img, .cols2 .media img, .cards-media .ph img, .svc .frame img, .cards .frame img, .fd-img img { display: block; height: auto !important; }
  .sc-ph-img { aspect-ratio: auto !important; }
  .sc-ph-img img { position: static !important; display: block; height: auto !important; }
  /* gallery cards keep their shape, the photo fits inside it uncropped */
  .cf-card { background: var(--tray); }
  .cf-card img { object-fit: contain; }
  .gx-grid > .gt img { object-fit: contain; background: var(--tray); }
}
/* explainer video in a split block: same frame as the photo it replaced (5:4 = the video's own ratio) */
.split .ph-video { background: var(--bg); }
.split .ph-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .split .ph-video video { height: auto; aspect-ratio: 5 / 4; } }
/* landscape loop on wide screens, the 4:5 cut (bigger type) on phones; the hidden one never loads or plays */
.split .ph-video video.v-tall { display: none; }
@media (max-width: 860px) { .split .ph-video video.v-wide { display: none; } .split .ph-video video.v-tall { display: block; aspect-ratio: 4 / 5; } }
/* phones: in the floating capsule the logo shrinks further, so it sits inside it with air around it */
@media (max-width: 860px) { .hdr.scrolled .brand img { transform: translateX(8px) scale(.66); } }

/* =========================================================
   Audit fixes (break-ui · emil-design-eng · apple-design · scroll-craft), 2026-10-18
   ========================================================= */
/* contrast: the label tone reaches 4.5:1 on every surface it sits on; small pink text uses the deeper link pink
   (the client's #E02381 stays on large type, buttons and fills) */
:root { --label: #735463; }
.row .perk b, .fd-tags, .xpl-k b, .sc-ph b, .cap .mark, .f-save s { color: var(--link); }
.row .best { background: var(--heading); color: #fff; }
.tray.hot p, .book .hot p { color: #fff; }
.book .hot .kicker { color: rgba(255, 255, 255, .92); }

/* buttons keep every transition they had before the press spring was added */
.btn { transition: transform 260ms var(--spring), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }

/* kicker: label and its note are separate pieces; on phones the note drops to its own line instead of a stray "·" */
.kicker .k2::before { content: "·"; margin-right: 10px; }
@media (max-width: 600px) {
  .kicker { row-gap: 2px; }
  .kicker .k2 { flex-basis: 100%; }
  .kicker .k2::before { content: none; }
}

/* FAQ: the +/− sits on the first line of a long question, not adrift in the middle */
.qa summary { align-items: start; }
.qa summary .pm { margin-top: -4px; }

/* gallery meta: the button never squeezes into two lines */
.cf-meta .btn { white-space: nowrap; flex-shrink: 0; }

/* narrow phones: action buttons take the full width, so their labels stay on one line */
@media (max-width: 400px) {
  .hero .actions .btn, .band .btn, .cta-card .btn, .split .btn, .xpl-foot .btn, .actions .btn { width: 100%; padding-inline: 16px; white-space: nowrap; }
  .btn { font-size: 14px; }
}

/* touch: every control gets a ≥ 40 px hit area without changing the layout */
@media (pointer: coarse) {
  .tlink, .hints a, .p-notes summary, .crumb a { position: relative; }
  .tlink::before, .hints a::after, .p-notes summary::after, .crumb a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .xpl-prog button { padding: 18px 0; }
  .sc-copy .btn, .btn.sm { min-height: 44px; }
}

/* illustration dots grow from a visible size, never from nothing */
.xpl-art .tip { transform: scale(.35); opacity: 0; }
@keyframes tip { to { transform: scale(1); opacity: 1; } }
.xpl.static .tip { opacity: 1; }

/* finder sheet (phones): a grabber says "this can be pulled down" */
.fd-grab { display: none; }
@media (max-width: 600px) {
  .fd-grab { display: block; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(53, 16, 31, .18); }
  .fd-card.dragging { transition: none !important; }
}
@media (pointer: coarse) { .p-notes summary { padding-block: 15px; margin-block: -15px; } .p-notes summary::after { content: none; } }
.cap .mark { color: #A8155B; }
/* desktop: scroll edge effect behind the floating capsule (content fades out under it instead of showing through as a strip) */
@media (min-width: 861px) { .hdr { background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 55%, transparent 100%) !important; } }
/* checklist: closing message after the list (space reserved, fades in); phones hide the in-meter copy */
.pm-after { display: none; }
@media (max-width: 860px) {
  .prep.all .pm-done, .prep .pm-done { display: none; }
  .pm-after { display: block; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--heading); color: #fff; font: 500 15px/1.45 var(--body);
    opacity: 0; transform: translateY(8px); transition: opacity 240ms ease-out, transform 320ms var(--ease-out); }
  .prep.all .pm-after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pm-after { transform: none; transition: opacity 200ms ease; } }
/* page-to-page, v2: the old page steps back quickly (blur bridges the crossfade), the new one rises in;
   header and booking bar are named, so they stay put while the content changes under them */
::view-transition-old(root) { animation: vt-out 200ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 460ms var(--ease-out) 60ms both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); } }
/* reduced motion: still a transition, just a gentle cross-fade without movement */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-fade-out 160ms ease both; }
  ::view-transition-new(root) { animation: vt-fade-in 220ms ease both; }
  ::view-transition-group(*) { animation-duration: 1ms; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* navigation cards: partners use the service-card component; three cards keep the four-column card width */
.svc.p3 { grid-template-columns: repeat(3, minmax(0, calc((100% - 3 * var(--gap)) / 4))); }
@media (max-width: 1100px) { .svc.p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .svc.p3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc .pick.go { color: var(--heading); }
.svc .pick.go svg.i { stroke-width: 2.2; }
@media (hover: hover) and (pointer: fine) { .svc .it:hover .pick.go { background: var(--heading); border-color: var(--heading); color: #fff; } }
.svc .cap h4 a { color: inherit; }
.prose .lead-b { font-weight: 500; color: var(--heading); }
.p-promo { display: inline-block; margin: 0 18px 8px; padding: 6px 12px; border-radius: 999px; background: var(--heading); color: #fff; font: 600 12px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
/* Domi's watermark sits bottom-right on every photo: the blob's big curve moves to the bottom-left so it stays whole */
.portrait .shape { border-radius: 24% 22% 5% 30% / 20% 18% 5% 24%; }
/* menu thumbnails take the photos' own 4:5 shape (nothing cropped, watermark included) */
.menu .th { width: 40px; height: 50px; border-radius: 9px; }
/* the dropdown is a heavier material: busy page content must not show through it */
.menu { background: linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(255, 246, 248, .93)) !important; }

/* =========================================================
   10 másodpercben — illustrations for every service (scene 1 bespoke, scenes 2–3 shared)
   ========================================================= */
/* scene 3: session length ring + two fact pills */
.xpl-art .tr-bg.big, .xpl-art .tr.big { stroke-width: 10; }
.xpl-art .tt.big { font-size: 66px; }
.xpl-art .tt.big.sm { font-size: 40px; }
.xpl-art .tu.big { font-size: 18px; font-weight: 600; fill: var(--label); }
.xpl-art .xp rect { fill: #fff; stroke: rgba(53, 16, 31, .12); }
.xpl-art .xp text { font: 600 13.5px var(--body); fill: var(--heading); text-anchor: middle; }
.xpl-art .xp { opacity: 0; transform: scale(.85); transform-box: fill-box; transform-origin: center; }
.xpl[data-cur="2"] .xp { animation: pop 520ms var(--spring) var(--d) forwards; }

/* Doctor Life: six chambers inflate one after another */
.xpl-art .limb { fill: #F2D2CE; }
.xpl-art .ch { fill: #fff; stroke: rgba(53, 16, 31, .16); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.xpl[data-cur="0"] .ch { animation: chamber 1.65s cubic-bezier(.45, 0, .55, 1) var(--d) infinite; }
@keyframes chamber { 0%, 100% { fill: #fff; transform: scale(1); } 28% { fill: #F2A9C4; transform: scale(1.06, 1.14); } 56% { fill: #fff; transform: scale(1); } }
.xpl-art .dir { fill: none; stroke: #C2577F; stroke-width: 2.5; stroke-dasharray: 7 8; }
.xpl[data-cur="0"] .dir { animation: flow 900ms linear infinite reverse; }

/* Monosculpt: twelve heads, heat rings spreading from each */
.xpl-art .torso { fill: #F2D2CE; }
.xpl-art .pad { fill: #fff; stroke: #C2577F; stroke-width: 1.6; }
.xpl-art .hr { fill: none; stroke: #F08A5D; stroke-width: 2.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.xpl[data-cur="0"] .hr { animation: heat 1.9s cubic-bezier(.16, 1, .3, 1) var(--d) infinite; }
@keyframes heat { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(2.2); } }

/* HIEMT: field arcs under the plates, muscle fibres contracting */
.xpl-art .plate { fill: var(--heading); }
.xpl-art .fb { fill: #E7A0AF; transform-box: fill-box; transform-origin: center; }
.xpl[data-cur="0"] .fb { animation: contract 480ms ease-in-out var(--d) infinite alternate; }
@keyframes contract { to { transform: scale(.92, 1.3); fill: #E02381; } }
.xpl-art .arc { fill: none; stroke: #C2577F; stroke-width: 2; stroke-dasharray: 4 6; opacity: 0; }
.xpl[data-cur="0"] .arc { animation: field 1.4s ease-out var(--d) infinite; }
@keyframes field { 0% { opacity: 0; } 35% { opacity: .95; } 100% { opacity: 0; } }

/* intim fotel: seated figure, field waves rising from the seat, pelvic floor lifting */
.xpl-art .chair { fill: #E9D4D8; }
.xpl-art .chair2 { fill: #E0C7CD; }
.xpl-art .fw { fill: none; stroke: #E02381; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.xpl[data-cur="0"] .fw { animation: heat 1.8s ease-out var(--d) infinite; }
.xpl-art .hammock { fill: none; stroke: #E02381; stroke-width: 6; stroke-linecap: round; }
.xpl[data-cur="0"] .hammock { animation: lift 900ms ease-in-out infinite alternate; }
@keyframes lift { to { transform: translateY(-5px); } }

/* AMT: three stride paths, the active one cycles stair → ellipse → run */
.xpl-art .mp { fill: none; stroke: rgba(53, 16, 31, .14); stroke-width: 3; }
.xpl-art .hub { fill: var(--heading); }
.xpl[data-cur="0"] .mp { animation: mpath 3.6s linear var(--d) infinite; }
.xpl[data-cur="0"] .ml { animation: mlab 3.6s linear var(--d) infinite; }
@keyframes mpath { 0%, 31% { stroke: #E02381; stroke-width: 5; } 33.4%, 100% { stroke: rgba(53, 16, 31, .14); stroke-width: 3; } }
@keyframes mlab { 0%, 31% { fill: #E02381; } 33.4%, 100% { fill: var(--heading); } }

/* szolárium: canopy tubes glowing, face tanners, cooling fan */
.xpl-art .canopy { fill: #2B2140; }
.xpl-art .tube { fill: #8C7BFF; opacity: .55; }
.xpl[data-cur="0"] .tube { animation: tube 1.6s ease-in-out var(--d) infinite; }
@keyframes tube { 50% { opacity: 1; fill: #C2B8FF; } }
.xpl-art .face { fill: #C2B8FF; }
.xpl-art .uvglow { fill: url(#xg); }
.xpl-art .fanc { fill: #fff; stroke: rgba(53, 16, 31, .16); }
.xpl-art .blade { fill: var(--heading); transform-box: fill-box; transform-origin: center; }
.xpl[data-cur="0"] .blade { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* konzultáció: two speech bubbles, then a plan with ticks */
.xpl-art .bub rect, .xpl-art .bub path { fill: #fff; stroke: rgba(53, 16, 31, .14); }
.xpl-art .bub.b2 rect, .xpl-art .bub.b2 path { fill: #F7D3E1; stroke: none; }
.xpl-art .bub circle { fill: var(--heading); opacity: .35; }
.xpl-art .planc > rect:first-child { fill: #fff; stroke: rgba(53, 16, 31, .14); }
.xpl-art .pline { fill: rgba(53, 16, 31, .12); }
.xpl-art .pl1, .xpl-art .pl2 { fill: none; stroke: #E02381; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.xpl-art .bub, .xpl-art .planc { opacity: 0; transform: translateY(12px); }
.xpl[data-cur="0"] .b1 { animation: rise 520ms var(--spring) 150ms forwards; }
.xpl[data-cur="0"] .b2 { animation: rise 520ms var(--spring) 800ms forwards; }
.xpl[data-cur="0"] .planc { animation: rise 560ms var(--spring) 1500ms forwards; }
.xpl[data-cur="0"] .pl1 { animation: pen 420ms var(--ease-out) 2000ms forwards; }
.xpl[data-cur="0"] .pl2 { animation: pen 420ms var(--ease-out) 2300ms forwards; }
.xpl[data-cur="0"] .bub circle { animation: dots 900ms ease-in-out infinite; }
.xpl-art .bub circle:nth-of-type(2) { animation-delay: 150ms !important; }
.xpl-art .bub circle:nth-of-type(3) { animation-delay: 300ms !important; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes dots { 50% { opacity: .85; } }

/* reduced motion: every first scene is shown in its finished state */
.xpl.static .xp, .xpl.static .bub, .xpl.static .planc { opacity: 1; transform: none; }
.xpl.static .pl1, .xpl.static .pl2 { stroke-dashoffset: 0; }
.xpl.static .ch:nth-child(4) { fill: #F2A9C4; }
.xpl.static .mp:nth-of-type(2) { stroke: #E02381; stroke-width: 5; }
.xpl.static .arc, .xpl.static .fw { opacity: .6; }
/* explainer icons: every shape is a line drawing (circles/rects were falling back to a black fill) */
.xpl-art .bi * { fill: none; stroke: var(--heading); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.xpl-art .bi .thin { stroke-width: 2; stroke: var(--accent); }
.fine.legal { margin-top: 28px; max-width: 900px; font: 400 12.5px/1.55 var(--body); color: var(--muted); }
/* home cards: Domi's own description under the tag line */
.svc .cap .desc { margin-top: 8px; font: 400 13px/1.5 var(--body); color: var(--text); }
.svc .cap .desc.em { font-weight: 600; color: var(--heading); }
.svc .cap .desc .tlink { font-size: 13px; padding-bottom: 3px; }

/* szolárium „Tudnivalók”: 3 PDF-kártya */
.info-pdfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 28px; }
.info-pdf { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 150px; color: inherit; text-decoration: none; transition: background-color 200ms ease, transform 200ms ease; }
.info-pdf .d4 { margin: 0; }
.info-pdf .tlink { align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .info-pdf:hover { background: var(--tray-2); }
  .info-pdf:hover .tlink { border-color: var(--accent); }
}
.info-pdf:active { transform: scale(.98); }
.info-pdf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .info-pdfs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .info-pdf { min-height: 0; flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; }
  .info-pdf .d4 { hyphens: manual; -webkit-hyphens: manual; min-width: 0; }
  .info-pdf .tlink { align-self: center; flex-shrink: 0; }
}

/* „A házirend legfontosabb pontjai”: 3 numbered rule cards + PDF links */
.hz-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.hz-rules > li { display: flex; flex-direction: column; gap: 12px; padding: 28px; min-width: 0; }
.hz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hz-n { font: 700 40px/1 var(--display); color: var(--accent); }
.hz-rules .small { color: var(--text); }
.hz-rules .hz-note { color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.hz-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
@media (max-width: 900px) {
  .hz-rules { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hz-rules > li { padding: 22px; }
  .hz-n { font-size: 32px; }
  .hz-links { flex-direction: column; align-items: flex-start; }
}

/* before/after compare (Dina): the after photo underneath, the before photo clipped from the left */
.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.ba-item { margin: 0; min-width: 0; }
.ba { position: relative; overflow: hidden; border-radius: var(--r-frame); background: var(--tray); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: ew-resize; -webkit-tap-highlight-color: transparent; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(53, 16, 31, .12); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; background: #fff; color: var(--heading); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(53, 16, 31, .22); transition: scale 160ms cubic-bezier(.23, 1, .32, 1); }
.ba-knob svg.i { width: 20px; height: 20px; }
.ba.drag .ba-knob { scale: 1.08; }
.ba-tag { position: absolute; top: 12px; padding: 6px 10px; border-radius: 999px; font: 600 12px/1 var(--body); background: rgba(255, 255, 255, .9); color: var(--heading); pointer-events: none; }
.ba-l { left: 12px; }
.ba-r { right: 12px; }
.ba-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ba:has(.ba-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.ba-item figcaption { margin-top: 12px; font: 600 14px/1.35 var(--body); color: var(--heading); }
@media (max-width: 900px) {
  .ba-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 560px; margin-inline: auto; }
}

/* home „Így kezdődött”: studio before/after slider + early photos */
.kezd { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(var(--gap) * 2); align-items: center; }
.kezd .ba-item { max-width: 460px; }
.kezd .gx .sh { margin-bottom: 8px; }
@media (max-width: 900px) {
  .kezd { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kezd .ba-item { max-width: 520px; margin-inline: auto; width: 100%; }
}

/* ================= buttons v3 (2026-10-19): Apple-style pill + "nyílpötty" =================
   Solid client pink, no gradient/glow/shimmer. The trailing icon becomes a round dot.
   Feedback on press (instant darken + slight shrink), calm critically-damped release, hover only on real pointers. */
.btn {
  --b-bg: var(--accent); --b-fg: #fff; --b-dot: #fff; --b-dot-fg: var(--accent);
  --b-hover: #D21E79; --b-press: #BF1A6E;
  position: relative; min-height: 50px; padding: 0 22px; gap: 12px; border: 0; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg); box-shadow: none;
  font: 600 15px/1.2 var(--body); letter-spacing: 0;
  transition: transform 380ms cubic-bezier(.2, .8, .2, 1), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn > svg.i:last-child {
  width: 38px; height: 38px; padding: 11px; margin: 0 -16px 0 2px; flex-shrink: 0; box-sizing: border-box;
  border-radius: 50%; background: var(--b-dot); color: var(--b-dot-fg);
  transition: transform 380ms cubic-bezier(.2, .8, .2, 1), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); background: var(--b-press); transition-duration: 90ms, 90ms, 200ms, 200ms; }
.btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.btn.sm { min-height: 42px; padding: 0 18px; gap: 10px; border-radius: 999px; font-size: 14px; }
.btn.sm > svg.i:last-child { width: 32px; height: 32px; padding: 9px; margin-right: -13px; }

/* secondary: soft pink tint (Apple "tinted" button), plum text, white dot */
.btn.soft { --b-bg: rgba(224, 35, 129, .10); --b-fg: var(--heading); --b-dot: #fff; --b-dot-fg: var(--accent); --b-hover: rgba(224, 35, 129, .16); --b-press: rgba(224, 35, 129, .22); }
/* tertiary: hairline outline */
.btn.ghost { --b-bg: transparent; --b-fg: var(--heading); --b-dot: rgba(224, 35, 129, .12); --b-dot-fg: var(--accent); --b-hover: rgba(53, 16, 31, .04); --b-press: rgba(53, 16, 31, .08); box-shadow: inset 0 0 0 1px rgba(53, 16, 31, .2); }
/* plum */
.btn.dark { --b-bg: var(--plum); --b-fg: var(--on-plum); --b-dot: var(--accent); --b-dot-fg: #fff; --b-hover: #4A1A2E; --b-press: #24070F; }
/* on the pink card: white pill, plum text, pink dot */
.tray.hot .btn, .book .hot .btn, .on-pink .btn { --b-bg: #fff; --b-fg: var(--heading); --b-dot: var(--accent); --b-dot-fg: #fff; --b-hover: #FFF1F7; --b-press: #FBE1EC; background: var(--b-bg); color: var(--b-fg); }
.tray.hot .btn.soft, .book .hot .btn.soft { --b-bg: rgba(255, 255, 255, .18); --b-fg: #fff; --b-dot: #fff; --b-dot-fg: var(--accent); --b-hover: rgba(255, 255, 255, .26); --b-press: rgba(255, 255, 255, .32); }
.btn.soft > svg.i:last-child { box-shadow: 0 1px 2px rgba(53, 16, 31, .08); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--b-hover); color: var(--b-fg); border-color: transparent; }
  .btn:hover > svg.i:last-child { transform: translateX(2px); }
  .btn:active { background: var(--b-press); }
}

/* full-width buttons: label centred on the whole button, dot pinned right */
.btn.block { padding-inline: 52px; }
.btn.block > svg.i:last-child { position: absolute; right: 6px; top: 50%; margin: -19px 0 0; }
.btn.block.sm > svg.i:last-child { right: 5px; margin-top: -16px; }
@media (max-width: 560px) {
  .hero .actions .btn, .band .btn, .cta-card .btn, .split .btn, .xpl-foot .btn, .actions .btn { padding-inline: 52px; }
  .hero .actions .btn > svg.i:last-child, .band .btn > svg.i:last-child, .cta-card .btn > svg.i:last-child, .split .btn > svg.i:last-child, .xpl-foot .btn > svg.i:last-child, .actions .btn > svg.i:last-child { position: absolute; right: 6px; top: 50%; margin: -19px 0 0; }
}

/* phone bottom bar: booking pill + round call button */
.mbar .btn { min-height: 50px; }
.mbar .btn.soft { flex: 0 0 50px; width: 50px; padding: 0; border-radius: 50%; --b-bg: rgba(224, 35, 129, .12); }
.mbar .btn.soft > svg.i:last-child { width: 20px; height: 20px; padding: 0; margin: 0; background: none; box-shadow: none; color: var(--accent); }
.mbar .btn:not(.soft) { padding-inline: 52px; }
.mbar .btn:not(.soft) > svg.i:last-child { position: absolute; right: 6px; top: 50%; margin: -19px 0 0; }
.mbar.price .btn:not(.soft) { padding: 0 22px; }
.mbar.price .btn:not(.soft) > svg.i:last-child { position: static; margin: 0 -16px 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn > svg.i:last-child { transition: background-color 150ms ease, color 150ms ease; }
  .btn:active, .btn:hover > svg.i:last-child { transform: none; }
}

/* ===== 2026-10-19 slop pass ===== */
/* explainer: no radar rings / halos / endless pulses – icons just appear and stay */
.xpl-art .br, .xpl-art .halo { display: none; }
.xpl[data-cur="0"] .tip { animation: tip 500ms var(--spring) var(--d) forwards; }
.xpl[data-cur="2"] .glow { animation: none; }
.xpl[data-cur="0"] .hr, .xpl[data-cur="0"] .fw { animation-iteration-count: 1; animation-fill-mode: forwards; }
.xpl[data-cur="0"] .arc { animation-iteration-count: 2; }
.xpl-b h3.d3 { margin-top: 0; }
/* home partners: three equal, larger cards across the full width; a swipe row on phones */
.svc.p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px calc(var(--gap) * 1.5); }
@media (max-width: 1100px) { .svc.p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--gap); } }
@media (max-width: 860px) { .svc.p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .svc.p3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
            margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 6px; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .svc.p3::-webkit-scrollbar { display: none; }
  .svc.p3 > * { scroll-snap-align: start; }
}

/* ================= kiemelt csomagajánlatok (2026-10-19) ================= */
/* hero video in the portrait frame */
.hero-vid { width: 100%; height: 100%; object-fit: cover; display: block; }

/* program cards: real machine photos left, the programme right; alternate sides */
.prg { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: calc(var(--gap) * 2.2); align-items: start; }
.prg.rev { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.prg.rev .prg-media { order: 2; }
.prg-media { position: sticky; top: calc(var(--header) + 84px); display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.prg-ph { margin: 0; border-radius: var(--r-frame); overflow: hidden; background: var(--tray); aspect-ratio: 4 / 5; }
.prg-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prg-media .p0 { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
.prg-media.n1 .p0 { aspect-ratio: 4 / 5; }
.prg-body > .d2 { margin-bottom: 18px; }
.prg-body > .lead + p { margin-top: 10px; }
.prg-who { margin-top: 26px; }
.prg-who .d4 { font-size: 18px; margin-bottom: 10px; }
.prg-who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prg-who li { padding: 9px 14px; border-radius: 999px; background: rgba(224, 35, 129, .08); font: 500 14px/1.35 var(--body); color: var(--heading); }
.prg-tabs { margin-top: 28px; }
.prg-v { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--gap); align-items: start; }
.prg-vn { font-size: 20px; margin-bottom: 8px; }
.prg-what > .small { margin-bottom: 14px; }
.prg-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prg-items li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--frame); box-shadow: inset 0 0 0 1px var(--line); }
.prg-items b { font: 700 30px/1 var(--display); color: var(--accent); }
.prg-items span { font: 500 14.5px/1.4 var(--body); color: var(--heading); }
.prg-meta { margin-top: 12px; }
.prg-price { position: sticky; top: calc(var(--header) + 84px); border-radius: 22px; padding: 22px; background: var(--heading); color: var(--on-plum); display: grid; gap: 6px; }
.prg-was { display: flex; justify-content: space-between; gap: 10px; font: 400 13px/1.4 var(--body); color: rgba(247, 235, 236, .7); }
.prg-was s { color: rgba(247, 235, 236, .85); }
.prg-pay { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.prg-pay b { font: 700 46px/1 var(--display); color: #fff; letter-spacing: -.01em; }
.prg-pay small { font: 500 13px/1.3 var(--body); color: rgba(247, 235, 236, .8); }
.prg-vo { font: 600 14px/1.4 var(--body); color: #F6A9CB; }
.prg-vo span { color: #fff; }
.prg-perk { justify-self: start; margin: 8px 0 14px; padding: 6px 12px; border-radius: 999px; background: rgba(224, 35, 129, .9); color: #fff; font: 600 12.5px/1.2 var(--body); }
.prg-price .btn { --b-bg: #fff; --b-fg: var(--heading); --b-dot: var(--accent); --b-dot-fg: #fff; --b-hover: #FFF1F7; --b-press: #FBE1EC; }
.prg-more { margin-top: 22px; }
@media (max-width: 1100px) { .prg-v { grid-template-columns: minmax(0, 1fr); } .prg-price { position: static; } }
@media (max-width: 900px) {
  .prg, .prg.rev { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .prg.rev .prg-media { order: 0; }
  .prg-media { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .prg-media .p0, .prg-media.n1 .p0 { grid-column: auto; aspect-ratio: 4 / 5; }
  .prg-media.n1 { grid-template-columns: minmax(0, 1fr); } .prg-media.n2 { grid-template-columns: 1fr 1fr; }
  .prg-pay b { font-size: 40px; }
}

/* Domi's 360° — sticky ring, one step per technology */
.sx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--gap) * 2.5); align-items: start; }
.sx-stage { position: sticky; top: calc(var(--header) + 84px); display: grid; justify-items: center; gap: 22px; padding: 10px 0; }
.sx-ring { position: relative; width: min(100%, 460px); aspect-ratio: 1; }
.sx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sx-track { fill: none; stroke: rgba(53, 16, 31, .07); stroke-width: 34; }
.sx-seg { fill: none; stroke-width: 34; stroke-dasharray: 0 360; stroke-dashoffset: var(--off); transition: stroke-dasharray 700ms cubic-bezier(.65, 0, .35, 1); }
.sx[data-k="1"] .s1, .sx[data-k="2"] :is(.s1, .s2), .sx[data-k="3"] :is(.s1, .s2, .s3), .sx:is([data-k="4"], [data-k="5"], [data-k="6"]) .sx-seg { stroke-dasharray: var(--len) 360; }
.sx-mid { position: absolute; inset: 15.5%; border-radius: 50%; overflow: hidden; background: var(--frame); box-shadow: 0 20px 40px -24px rgba(53, 16, 31, .45); }
.sx-ph-wrap, .sx-ph { position: absolute; inset: 0; }
.sx-ph { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 500ms ease, transform 900ms cubic-bezier(.23, 1, .32, 1); }
.sx[data-k="1"] .k1, .sx[data-k="2"] .k2, .sx[data-k="3"] .k3, .sx[data-k="4"] .k4 { opacity: 1; transform: none; }
.sx-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; transition: opacity 400ms ease; }
.sx-c b { font: 700 clamp(72px, 9vw, 130px)/.9 var(--display); color: var(--heading); }
.sx-c span { font: 600 15px/1.3 var(--body); color: var(--muted); margin-top: 6px; }
.sx[data-k="0"] .sx-c0, .sx:is([data-k="5"], [data-k="6"]) .sx-cT { opacity: 1; }
.sx-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font: 500 14px/1.3 var(--body); color: var(--muted); }
.sx-leg li { display: flex; align-items: center; gap: 7px; transition: color 300ms ease, opacity 300ms ease; opacity: .45; }
.sx-leg i { width: 11px; height: 11px; border-radius: 4px; }
.sx-leg b { color: var(--heading); }
.sx[data-k="1"] .l1, .sx[data-k="2"] :is(.l1, .l2), .sx[data-k="3"] :is(.l1, .l2, .l3), .sx:is([data-k="4"], [data-k="5"], [data-k="6"]) .sx-leg li { opacity: 1; }
.sx-steps { display: grid; }
.sx-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .35; transition: opacity 400ms ease; }
.sx-step.on { opacity: 1; }
.sx-step:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 0; }
.sx-step.sx-last { min-height: 0; padding-bottom: 0; }
.sx-step .d2 { margin-bottom: 18px; }
.sx-step p + p { margin-top: 10px; }
.sx-step .d3 { margin: 6px 0 10px; }
.sx-n { display: flex; align-items: baseline; gap: 12px; }
.sx-n b { font: 700 clamp(64px, 7vw, 96px)/.9 var(--display); color: var(--c); }
.sx-n span { font: 600 14px/1.3 var(--body); color: var(--muted); }
.sx-ph-m { display: none; }
.sx-perks { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 8px; }
.sx-perks li { counter-increment: p; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--frame); box-shadow: inset 0 0 0 1px var(--line); font: 500 15px/1.4 var(--body); color: var(--heading); }
.sx-perks li::before { content: counter(p, decimal-leading-zero); font: 600 14px/1 var(--body); color: var(--accent); letter-spacing: .04em; }
.sx-price p + p { margin-top: 8px; }
@media (max-width: 900px) {
  .sx { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sx-stage { top: calc(var(--header) + 54px); z-index: 2; padding: 10px 0 14px; background: linear-gradient(var(--bg) 82%, transparent); grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 16px; }
  .alt .sx-stage { background: linear-gradient(var(--alt) 82%, transparent); }
  .sx-ring { width: 132px; }
  .sx-track, .sx-seg { stroke-width: 30; }
  .sx-c b { font-size: 40px; } .sx-c span { font-size: 10.5px; }
  .sx-leg { justify-content: flex-start; flex-direction: column; gap: 4px; font-size: 13px; }
  .sx-step { min-height: 0; padding: 26px 0; opacity: 1; }
  .sx-step:first-child { min-height: 0; }
  .sx-ph-m { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-frame); margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sx-seg, .sx-ph, .sx-c, .sx-step, .sx-leg li { transition: none; } }

.hero-vid { background: var(--bg); }
@media (max-width: 900px) { .sx-ph-m { display: none; } .sx-ring { width: 156px; } }

/* ===== 2026-10-19: no shimmer anywhere — explainer illustrations play a short demo and stop, nothing loops forever ===== */
.xpl-art .tube, .xpl-art .ray, .xpl-art .dir, .xpl-art circle.dot, .xpl-art .bub circle { animation: none !important; }
.xpl-art .tube { opacity: .9; }
.xpl-art .ch, .xpl-art .mp, .xpl-art .ml, .xpl-art .fb, .xpl-art .hammock, .xpl-art .blade { animation-iteration-count: 2 !important; animation-fill-mode: forwards !important; }
/* sliding selection pill: plain white, no glossy gradient */
.lens.rl { background: #fff; }
.lens.tl { background: #fff; }

/* atal-note: disclaimer under the before/after gallery */
.atal-note { margin: 14px 0 0; text-align: center; font: 400 12px/1.5 var(--body); color: var(--muted); }

/* rw-menu (okt. 19.): hero rotating words + clearer hover on the glass dropdown */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rotw { display: inline-grid; justify-items: start; vertical-align: top; overflow: hidden; padding-top: .1em; margin-top: -.1em; }
.rw { grid-area: 1 / 1; opacity: 0; transform: translateY(70%); transition: transform 400ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease; }
.rw.on { opacity: 1; transform: none; }
.rw.out { opacity: 0; transform: translateY(-70%); }
@media (prefers-reduced-motion: reduce) { .rw { transition: none; } }
.hero-claim { font-weight: 600; color: var(--heading); }

.menu a .th img { transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
.menu a b { transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .menu a { transition: background-color 160ms ease, box-shadow 160ms ease; }
  .menu a:hover { background: rgba(224, 35, 129, .07) !important; box-shadow: inset 0 0 0 1px rgba(224, 35, 129, .24); }
  .menu a:hover b { color: #E02381; }
  .menu a:hover .th img { transform: scale(1.08); }
}
.menu a:active { background: rgba(224, 35, 129, .13) !important; }
.menu a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #E02381; }

/* ba-perf (okt. 19.): JS-driven compare moves only transforms (GPU), no clip-path repaint / layout per frame */
.ba.ba-tx .ba-before { clip-path: none; overflow: hidden; will-change: transform; backface-visibility: hidden; }
.ba.ba-tx .ba-before .ba-img { will-change: transform; }
.ba.ba-tx .ba-line { left: 0; will-change: transform; }

/* sheet-perf (okt. 19.): the phone menu grows out of the burger with transform + opacity only (GPU);
   opaque background, so nothing (booking bar, page) shows through and no full-screen blur is re-rendered per frame */
.sheet {
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; clip-path: none !important;
  opacity: 0; transform: scale(.94); transform-origin: var(--bx, calc(100% - 42px)) var(--by, 38px);
  transition: opacity 170ms ease-in, transform 220ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 220ms;
  will-change: transform, opacity; backface-visibility: hidden;
}
.sheet[data-open] { opacity: 1; transform: none; transition: opacity 200ms ease-out, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.sheet a.l, .sheet h6, .sheet .cta { transition: opacity 120ms ease, transform 120ms ease; }
.sheet[data-open] a.l, .sheet[data-open] h6, .sheet[data-open] .cta { transition: opacity 300ms ease-out, transform 380ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(60ms + var(--k, 0) * 16ms); }
html[data-sheet] .mbar { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet[data-open] { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .sheet[data-open] { transition: opacity 150ms ease, visibility 0s; }
}

/* map-f (okt. 19.): click-to-load Google map facade */
.map-f { display: grid; place-items: center; background: var(--tray); filter: none; min-height: 260px; text-align: center; padding: 24px; }
.map-f-in { display: grid; justify-items: center; gap: 12px; max-width: 360px; }
.map-f-in > svg.i { width: 28px; height: 28px; color: var(--accent); }
.map-f-in b { font: 600 16px/1.3 var(--body); color: var(--heading); }
.map-f-in small { font: 400 12px/1.45 var(--body); color: var(--muted); }

/* rw v2: single swapped word (see rw.js) */
.rotw { display: inline-block; }
.rw, .rw.on { grid-area: auto; display: inline-block; opacity: 1; transform: none; transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease; }
.rw.out { opacity: 0; transform: translateY(-60%); transition-duration: 220ms; }
.rw.pre { opacity: 0; transform: translateY(60%); transition: none; }

/* hsplit (okt. 19.): hero H1 pre-split at build time; the rise is a CSS animation from the first paint (LCP) */
.js .hero h1.pre .wi { transform: none; animation: w-rise 650ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--k) * 45ms + 20ms); }
@keyframes w-rise { from { transform: translate3d(0, 112%, 0); } }
@media (prefers-reduced-motion: reduce) { .js .hero h1.pre .wi { animation: none; } }

/* hero-css (okt. 19.): pre-split pages fade the rest of the hero in with CSS animations from the first paint (no JS gate → LCP) */
.js .hero:has(h1.pre) > div:first-child > :not(h1), .js .hero:has(h1.pre) .media-col > * {
  opacity: 1; translate: 0 0; transition: none;
  animation: hero-up 700ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--wk, 4) * 45ms + 120ms); }
.js .hero:has(h1.pre) .media-col > * { animation-delay: 80ms; }
@keyframes hero-up { from { opacity: .01; translate: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .js .hero:has(h1.pre) > div:first-child > :not(h1), .js .hero:has(h1.pre) .media-col > * { animation: none; } }

/* =========================================================
   Blog (okt. 19.) – index (.bl-*) and post (.bp-*)
   ========================================================= */
.bl-head { padding: 34px 0 6px; }
.bl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 26px; }
.bl-filter button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--frame); font: 500 14px/1 var(--body); color: var(--heading); transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.bl-filter button.on { background: var(--heading); border-color: var(--heading); color: #fff; }
@media (hover: hover) and (pointer: fine) { .bl-filter button:not(.on):hover { border-color: rgba(224, 35, 129, .4); color: #E02381; } }
.bl-filter button:active { transform: scale(.97); }

.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap, 24px); }
.bl-card { display: flex; flex-direction: column; background: var(--frame); border-radius: var(--r-frame, 26px); overflow: hidden; box-shadow: 0 1px 0 var(--line); transition: box-shadow 200ms ease, transform 200ms ease; }
.bl-card[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .bl-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(53, 16, 31, .35); } .bl-card:hover h3 a { color: #E02381; } }
.bl-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tray); }
.bl-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .bl-card:hover .bl-ph img { transform: scale(1.04); } }
.bl-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }
.bl-body h3 { font: 600 18px/1.3 var(--body); color: var(--heading); }
.bl-body h3 a { transition: color 160ms ease; }
.bl-body h3 a::after { content: ''; position: absolute; inset: 0; }   /* whole card clickable */
.bl-card { position: relative; }
.bl-body p { font: 400 14px/1.55 var(--body); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-meta { margin-top: auto; display: flex; gap: 6px; font: 500 12.5px/1.2 var(--body); color: var(--muted); }
.bl-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-cat { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(224, 35, 129, .09); color: #B3166A; font: 600 12px/1 var(--body); }
a.bl-cat:hover { background: rgba(224, 35, 129, .16); }
.bl-lead { margin-bottom: var(--gap, 24px); }
.bl-card.big { display: grid; grid-template-columns: 1.15fr 1fr; }
.bl-card.big .bl-ph { aspect-ratio: auto; min-height: 340px; }
.bl-card.big .bl-body { padding: 32px 34px; justify-content: center; }
.bl-card.big h3 { font: 700 clamp(30px, 3.4vw, 46px)/1 var(--display); text-transform: uppercase; }
.bl-card.big p { -webkit-line-clamp: 4; font-size: 15px; }
.bl-card.big .bl-meta { margin-top: 6px; }
.bl-empty { margin-top: 18px; }
@media (max-width: 960px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .bl-card.big { grid-template-columns: minmax(0, 1fr); }
  .bl-card.big .bl-ph { min-height: 0; aspect-ratio: 4 / 3; }
  .bl-card.big .bl-body { padding: 20px 20px 24px; }
}
@media (max-width: 600px) {
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad, 16px) * -1); padding-inline: var(--pad, 16px); scrollbar-width: none; }
  .bl-filter::-webkit-scrollbar { display: none; }
  .bl-filter button { flex-shrink: 0; }
}

/* post */
.bp-head { max-width: 820px; padding-top: 34px; }
.bp-h1 { margin-top: 16px; font: 700 clamp(40px, 6vw, 76px)/.98 var(--display); text-transform: uppercase; color: var(--heading); text-wrap: balance; }
.bp-dek { margin-top: 18px; max-width: 680px; }
.bp-by { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.bp-by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bp-by b { display: block; font: 600 14px/1.2 var(--body); color: var(--heading); }
.bp-by span { font: 400 13px/1.3 var(--body); color: var(--muted); }
.bp-hero { margin: 28px 0 0; padding: 14px; border-radius: var(--r-frame, 26px); }
.bp-hero img { width: 100%; max-height: 520px; object-fit: contain; border-radius: 18px; background: var(--frame); }

.bp-grid { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 56px; margin-top: 48px; align-items: start; }
.bp-toc { position: sticky; top: calc(var(--header, 80px) + 24px); }
.bp-toc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--body); color: var(--label, var(--muted)); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; padding: 6px 0 12px; }
.bp-toc summary::-webkit-details-marker { display: none; }
.bp-toc summary svg.i { width: 16px; height: 16px; transition: transform 200ms ease; }
.bp-toc details[open] summary svg.i { transform: rotate(180deg); }
.bp-toc ol { list-style: none; counter-reset: t; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.bp-toc li { counter-increment: t; }
.bp-toc a { display: flex; gap: 10px; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; font: 400 14px/1.35 var(--body); color: var(--muted); transition: color 160ms ease, border-color 160ms ease; }
.bp-toc a::before { content: counter(t, decimal-leading-zero); font: 600 11px/1.9 var(--body); color: rgba(224, 35, 129, .6); }
.bp-toc a.on { color: var(--heading); border-left-color: #E02381; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .bp-toc a:hover { color: var(--heading); } }

.bp-main { min-width: 0; display: grid; gap: 36px; }
.bp-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #FFF6DB; color: #5B4300; font: 400 14.5px/1.5 var(--body); }
.bp-note svg.i { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.bp-kt { padding: 26px 28px; border-radius: var(--r-frame, 26px); background: var(--heading); color: #fff; }
.bp-kt h2 { font: 700 30px/1 var(--display); text-transform: uppercase; color: #fff; }
.bp-kt ul { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.bp-kt li { display: flex; gap: 12px; font: 400 15.5px/1.5 var(--body); }
.bp-kt li svg.i { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 50%; background: #E02381; color: #fff; }

.bp-body { font-size: 17px; line-height: 1.7; }
.bp-body > * + * { margin-top: 1em; }
.bp-body h2 { margin-top: 1.8em; font: 700 clamp(28px, 3vw, 38px)/1.02 var(--display); text-transform: uppercase; color: var(--heading); scroll-margin-top: calc(var(--header, 80px) + 24px); }
.bp-body h2 + * { margin-top: .6em; }
.bp-body ul, .bp-body ol { padding-left: 1.2em; display: grid; gap: .45em; }
.bp-body li::marker { color: #E02381; }
.bp-body li ul { margin-top: .4em; }
.bp-body strong { color: var(--heading); font-weight: 600; }
.bp-med { font: 400 13px/1.5 var(--body); color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }

.bp-svc { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; border-radius: var(--r-frame, 26px); }
.bp-svc-ph { aspect-ratio: 1; border-radius: 18px; overflow: hidden; }
.bp-svc-ph img { width: 100%; height: 100%; object-fit: cover; }
.bp-svc-act { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 16px; }
.bp-faq { scroll-margin-top: calc(var(--header, 80px) + 24px); }
.bp-faq .qa { margin-top: 18px; }
.bp-author { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 24px; border-radius: var(--r-frame, 26px); scroll-margin-top: calc(var(--header, 80px) + 24px); }
.bp-author > img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.bp-author .bp-role { margin: 2px 0 12px; }
.bp-author p:not(.small) { font: 400 15px/1.6 var(--body); }
.bp-rel { margin-top: 72px; }
.bp-rel .bl-grid { margin-top: 22px; }

@media (max-width: 1024px) {
  .bp-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 760px; }
  .bp-toc { position: static; padding: 6px 18px; border-radius: 18px; background: var(--frame); box-shadow: 0 1px 0 var(--line); }
  .bp-toc summary { padding: 12px 0; }
  .bp-toc ol { padding-bottom: 12px; }
}
@media (max-width: 600px) {
  .bp-head { padding-top: 20px; }
  .bp-hero { padding: 8px; }
  .bp-kt { padding: 22px 20px; }
  .bp-body { font-size: 16px; }
  .bp-svc { grid-template-columns: minmax(0, 1fr); }
  .bp-svc-ph { aspect-ratio: 16 / 9; }
  .bp-author { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .bp-author > img { width: 88px; height: 88px; }
}

/* blog fixes */
.bl-card.big { height: clamp(340px, 34vw, 440px); }
.bl-card.big .bl-ph { position: relative; height: 100%; }
.bl-card.big .bl-ph img { position: absolute; inset: 0; }
.bl-body h3, .bp-h1 { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 720px) { .bl-card.big { height: auto; } .bl-card.big .bl-ph { height: auto; } .bl-card.big .bl-ph img { position: static; } }

.bp-body strong, .bp-body b { display: inline; font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--heading); margin: 0; }
.bp-hero img { max-height: 460px; }

.bp-faq.faq { display: block; }
.bp-faq .qa { max-width: none; }
.bp-by img, .bp-author > img { object-position: 50% 50%; }

/* bp-med v2: medical disclaimer box */
.bp-med { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--frame); color: var(--muted); font: 400 13.5px/1.6 var(--body); }
.bp-med > svg.i { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; color: #E02381; }
.bp-med b { display: block; margin-bottom: 4px; font: 600 14px/1.3 var(--body); color: var(--heading); }

/* pf (okt. 20.): prefilled partner message sheet */
.pf { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(53, 16, 31, .36); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.pf.on { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
.pf-card { width: min(480px, 100%); background: var(--bg); border-radius: 26px; padding: 24px; box-shadow: 0 30px 80px -30px rgba(53, 16, 31, .5); transform: translateY(12px) scale(.98); transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.pf.on .pf-card { transform: none; }
.pf-h { font: 700 30px/1 var(--display); text-transform: uppercase; color: var(--heading); }
.pf-p { margin-top: 10px; font: 400 14px/1.5 var(--body); color: var(--muted); }
.pf-t { width: 100%; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--frame); font: 400 16px/1.5 var(--body); color: var(--heading); resize: vertical; }
.pf-t:focus { outline: 2px solid #E02381; outline-offset: 1px; }
.pf-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pf-act .pf-go { flex: 1 1 auto; justify-content: center; }
.pf-ok { min-height: 1.4em; margin-top: 10px; font: 500 13px/1.4 var(--body); color: #B3166A; }
@media (max-width: 600px) {
  .pf { place-items: end stretch; padding: 0; }
  .pf-card { width: 100%; border-radius: 26px 26px 0 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); }
  .pf-act { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .pf-card, .pf.on .pf-card { transition: none; transform: none; } }

/* okt. 20.: logos keep their aspect ratio (the width/height attributes must not stretch them) */
.foot .f-logo img { width: 112px; height: auto; }
.sheet .bar img { width: 76px !important; height: auto; }
.brand img { height: auto; }
@media (max-width: 600px) { .foot .f-logo img { width: 96px; } }

/* house rules as PDF buttons */
.hz-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pdf-btn .pdf-tag { font: 700 10px/1 var(--body); letter-spacing: .08em; padding: 3px 6px; border-radius: 6px; background: rgba(224, 35, 129, .12); color: #B3166A; }
.f-pdfs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-pdfs.one { grid-template-columns: 1fr; }
.f-pdf { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--frame); font: 500 13px/1.25 var(--body); color: var(--heading); transition: border-color 160ms ease, color 160ms ease; }
.f-pdf svg.i { flex-shrink: 0; width: 16px; height: 16px; color: #E02381; }
.f-pdf:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .f-pdf:hover { border-color: rgba(224, 35, 129, .4); color: #B3166A; } }
@media (max-width: 600px) { .f-pdfs { grid-template-columns: 1fr; } }

/* partner footer: own booking + rules only */
.foot-partner .grid { grid-template-columns: 1.6fr 1.2fr .9fr 1.1fr; }
.foot-partner .f-book .btn { margin-top: 16px; }
@media (max-width: 1100px) { .foot-partner .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot-partner .grid { grid-template-columns: 1fr; } .foot-partner .grid > .f-book { grid-column: auto; } }

/* f-hz (okt. 20.): footer house rules in a disclosure – closed on phones, open on desktop */
.f-hz summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.f-hz summary::-webkit-details-marker { display: none; }
.f-hz summary h5 { margin-bottom: 0; }
.f-hz summary svg.i { width: 16px; height: 16px; color: var(--label); transition: transform 200ms cubic-bezier(.22, 1, .36, 1); }
.f-hz[open] summary svg.i { transform: rotate(180deg); }
.f-hz[open] summary { margin-bottom: 18px; }
@media (max-width: 600px) {
  .foot .grid > .f-hz { grid-column: 1 / -1; }
  .f-hz summary { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--frame); }
  .f-hz[open] summary { margin-bottom: 10px; }
}

/* ptitle (okt. 20.): only paragraphs that are nothing but a bold line act as pseudo-headings */
.prose p > strong:only-child { display: inline; font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; margin-top: 0; }
.prose p.ptitle > strong:only-child { display: block; font: 700 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .01em; margin-top: 26px; }
.prose > p.ptitle:first-child > strong:only-child { margin-top: 0; }

/* ic-cards: partner 'Információk' */
.ic-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap, 24px); margin-top: 28px; }
.ic-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-frame, 26px); }
.ic-card .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(224, 35, 129, .1); color: #E02381; }
.ic-card .ico svg.i { width: 22px; height: 22px; }
.ic-card h3 { font: 700 24px/1 var(--display); text-transform: uppercase; color: var(--heading); }
.ic-txt { display: grid; gap: 8px; font: 400 15px/1.6 var(--body); color: var(--muted); }
.ic-txt strong { font-weight: 600; color: var(--heading); }
@media (max-width: 600px) { .ic-card { padding: 20px; } }

/* pg2 (okt. 20.): programme cards – one photo, one column, checklist, price strip */
.pg2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; padding: 20px; border-radius: var(--r-frame, 26px); background: var(--frame); box-shadow: 0 1px 0 var(--line); }
.pg2 + .pg2 { margin-top: 28px; }
.pg2.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pg2.rev .pg2-ph { order: 2; }
.pg2-ph { margin: 0; position: sticky; top: calc(var(--header, 80px) + 70px); border-radius: 20px; overflow: hidden; background: var(--tray); }
.pg2-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.pg2-body { display: grid; gap: 14px; padding: 12px 8px 8px 0; min-width: 0; }
.pg2.rev .pg2-body { padding: 12px 0 8px 8px; }
.pg2-h { font: 700 clamp(34px, 3.6vw, 52px)/.98 var(--display); text-transform: uppercase; color: var(--heading); text-wrap: balance; }
.pg2-body .lead { font-size: 17px; }
.pg2-tabs { justify-self: start; margin-top: 6px; }
.pg2-v { display: grid; gap: 12px; }
.pg2-v[hidden] { display: none; }
.pg2-vn { font: 600 15px/1.3 var(--body); color: var(--heading); }
.pg2-items { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pg2-items li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.45 var(--body); color: var(--heading); }
.pg2-items b { font: 700 20px/1 var(--display); color: #E02381; }
.pg2-meta { font: 500 13px/1.4 var(--body); color: var(--muted); }
.pg2-price { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 6px; padding: 18px 20px; border-radius: 20px; background: var(--heading); color: #fff; }
.pg2-pay { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font: 500 14px/1 var(--body); color: rgba(255, 255, 255, .8); }
.pg2-pay b { font: 700 40px/1 var(--display); color: #fff; letter-spacing: .01em; }
.pg2-pay s { margin-left: 6px; color: rgba(255, 255, 255, .55); font-size: 13px; }
.pg2-perks { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font: 500 13px/1.3 var(--body); color: #F7B9D5; }
.pg2-perk { color: #fff; font-weight: 600; }
.pg2-price .btn { --b-bg: #fff; --b-fg: var(--heading); --b-dot: var(--accent); --b-dot-fg: #fff; --b-hover: #FFF1F7; --b-press: #FBE1EC; flex-shrink: 0; }
.pg2-more { margin-top: 4px; }
@media (max-width: 960px) {
  .pg2, .pg2.rev { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px; }
  .pg2.rev .pg2-ph { order: 0; }
  .pg2-ph { position: static; }
  .pg2-ph img { aspect-ratio: auto; height: auto; object-fit: contain; }   /* phones: the whole photo */
  .pg2-body, .pg2.rev .pg2-body { padding: 4px 4px 6px; }
}
@media (max-width: 600px) {
  .pg2-price { padding: 16px; }
  .pg2-price .btn { width: 100%; justify-content: center; }
  .pg2-pay b { font-size: 36px; }
}
/* V.I.P. élménynap prices (2026-10-20) */
.vipp { display: grid; gap: 0; }
.vipp > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.vipp > div:first-child { border-top: 0; padding-top: 0; }
.vipp span { font: 500 15px/1.4 var(--body); color: var(--muted); }
.vipp b { font: 700 40px/1 var(--display); color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vipp b small { font: 500 15px var(--body); color: var(--label); margin-left: 6px; }
@media (max-width: 560px) { .vipp b { font-size: 32px; } }