/* М&Д Асистънс, пътна помощ София. Устройството е по козметичното демо (client-projects/beauty-demo):
   видео на цял екран, плъзгач със снимки, услугите като редове (на първата снимка точки за докосване, .spot / .bloom),
   цени като карти, камионът, контакти. Цветовете и шрифтовете идват от settings.py като CSS променливи
   (--bg, --blush, --ink, --accent, --display, --text ...). Без JS всички описания се виждат под снимките. */

/* ------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + var(--bar-gap) * 2); }
:root { --bar-gap: 10px; --head: 56px; --r: 8px; --soft: 26px; --pad: clamp(18px, 4.5vw, 64px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 17px/1.6 var(--text), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }   /* the colour clouds and the zoomed photo must not widen the page */
img { display: block; max-width: 100%; }
a { color: inherit; }
/* Typography (build skill, 2026-10-04; Emanuil chose variant 3 for the beauty demos): names and headings in an elegant serif
   (--display, Playfair Display), everything else in one sans (--text, Onest): light text, medium numbers and buttons.
   The beauty trade is the reason for the second family. Each level differs from its neighbour in family, size or colour. */
h1, h2, h3, h4 { font-family: var(--display), Georgia, serif; font-weight: 400; line-height: 1.1; letter-spacing: 0; margin: 0; }
h1 { font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: clamp(34px, 3.8vw, 54px); }
h3 { font-size: 26px; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 1px var(--ink); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r); }
.skip:focus { left: 8px; }
.lead { color: var(--muted); font-size: 18px; max-width: 30em; margin-top: 18px; }

/* ------------------------------------------------ buttons */
/* the round call button with a handset, bottom right on every page (under the phone's procedure sheet) */
.call-fab {
  position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55);
  transition: background .25s, transform .25s;
}
.call-fab svg { width: 28px; height: 28px; }
.call-fab:hover { background: var(--accent-dark); transform: scale(1.05); }
.call-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--accent); }
@media (min-width: 900px) { .call-fab { right: 28px; bottom: 28px; width: 64px; height: 64px; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
  border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 17px; text-decoration: none;
  transition: background .25s, transform .25s;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn-light { background: #FBF8F3; color: var(--ink); box-shadow: none; }
.btn-light:hover { background: #fff; }
.btn-line { background: rgba(12, 12, 12, .45); color: #fff; box-shadow: inset 0 0 0 2px #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-line:hover { background: rgba(12, 12, 12, .6); }
.btn-soft { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 32, 38, .14); }
.btn-soft:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(42, 32, 38, .3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.phone-link, .text-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(42, 32, 38, .22); padding-bottom: 2px; }
.phone-link:hover, .text-link:hover { border-color: var(--ink); }

/* ------------------------------------------------ header: one rounded bar, inset from the edges, sticky (Starlink layout) */
.site-head {
  position: sticky; top: var(--bar-gap); z-index: 30; height: var(--head); margin: var(--bar-gap) var(--bar-gap) 0;
  border-radius: 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.head-in { height: 100%; display: flex; align-items: center; gap: 28px; padding: 0 10px 0 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display), Georgia, serif; font-weight: 500; font-size: 22px; text-decoration: none; margin-right: auto; }
.logo { white-space: nowrap; }
.logo img { height: 44px; width: auto; }
.btn { white-space: nowrap; }
@media (max-width: 479px) {
  .logo { gap: 7px; font-size: 17px; }
  .logo img { height: 38px; }
  .head-cta { padding: 0 12px; font-size: 15px; }
}
.nav { display: flex; gap: 28px; font-size: 15px; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--gold); }
.menu-btn { display: none; }
@media (max-width: 899px) {
  .head-in { gap: 10px; }
  .menu-btn { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--ink); }
  .menu-btn span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s; }
  .menu-open .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-open .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); padding: 6px 20px 14px; font-size: 18px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px rgba(42, 32, 38, .4); }
  .nav a { padding: 12px 0; font-weight: 500; }
  .menu-open .nav { display: flex; }
}

/* ------------------------------------------------ bar over the video: no bar at all (just name and menu), the cream bar appears once the video is passed */
.home .site-head { position: fixed; left: 0; right: 0; top: var(--bar-gap); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff;
  transition: background .35s, color .35s, box-shadow .35s; }
.home .site-head .menu-btn { color: inherit; }
.home .site-head.solid { background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -22px rgba(42, 32, 38, .35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.home .hero { min-height: 100svh; min-height: calc(100lvh + env(safe-area-inset-top, 0px)); }
/* lvh reaches behind the phone browser's bars; + the top safe area, because iPhone Safari lays its status band over the page.
   On phones the new iPhone Safari ends lvh above its floating bottom bar, so the video gets that bar's height on top (--under-bar). */
@media (max-width: 767px) and (pointer: coarse) {
  .home .hero { --under-bar: 84px; min-height: calc(100lvh + var(--under-bar)); }
}
/* on iPhone Safari tints the status bar and the area behind its bottom bar from the page background: dark like the video and the footer */
html:has(body.home), body.home { background: var(--deep); }
.home main { background: var(--bg); }
.home .site-head { margin: 0 var(--bar-gap); }
@media (max-width: 899px) { .home .site-head .nav { color: var(--ink); } }

/* ------------------------------------------------ first screen: video across the whole screen */
.hero { position: relative; display: flex; align-items: flex-end; min-height: calc(100svh - var(--head)); overflow: hidden; background: #2a2026; color: #fff; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 10, .6) 0%, rgba(8, 9, 10, .35) 18%, rgba(8, 9, 10, .62) 40%, rgba(8, 9, 10, .82) 62%, rgba(8, 9, 10, .93) 100%); }
.hero-text { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad) clamp(48px, 10vh, 120px); }
.hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 26px 0 0; max-width: 980px; }
.hero-facts dt { font: 700 clamp(26px, 3vw, 40px)/1.05 var(--display), sans-serif; letter-spacing: -.01em; color: var(--accent); text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.hero-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
@media (min-width: 900px) { .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; } .hero-facts dd { font-size: 17px; } }
.home .site-head:not(.solid) .logo { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.hero h1 { font-size: clamp(56px, 9vw, 150px); line-height: .92; max-width: 9em; font-weight: 700; letter-spacing: 0; }
.hero .actions { margin-top: 26px; }
/* „Обади се“ точно под заглавието: по-голям, със слушалка */
.hero-cta { min-height: 60px; padding: 0 30px; font-size: 20px; gap: 10px; }
.hero-cta svg { width: 22px; height: 22px; flex: none; }
.hero .actions .btn-line { min-height: 60px; }
.hero .hero-facts { margin-top: 30px; }
.hero .stock-tag { left: 14px; right: auto; top: auto; bottom: 14px; z-index: 3; background: rgba(255, 255, 255, .18); color: #fff; }

/* ------------------------------------------------ sections (as in the reference: cream and beige, large rounded photos) */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: clamp(64px, 9vw, 128px) 0; }
.sec-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .lead { margin-top: 16px; }

/* photo slider with the procedure's name over it */
.slider { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px; list-style: none; margin: 0; padding: 0; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 7.5; }
.slide-ph { position: absolute; inset: 0; margin: 0; }
.slide-ph img { width: 100%; height: 100%; object-fit: cover; }
.slide-ph::after { content: ""; position: absolute; inset: 0; background: rgba(30, 22, 18, .38); }
.slide-title {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0 24px; text-align: center; text-decoration: none;
  color: #fff; font: 500 clamp(34px, 5.4vw, 76px)/1.05 var(--display), Georgia, serif; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}
.slide .stock-tag { left: auto; right: 14px; top: auto; bottom: 14px; z-index: 3; }
.dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 0; }
/* the dot is drawn small, but the button around it is a 44 px finger target */
.dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%); transition: width .3s, background .3s; }
.dot.on::before { width: 26px; background: #fff; }

/* procedures: rows of photo and text, then small cards */
.services { background: var(--blush); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-bottom: clamp(56px, 8vw, 112px); }
.row-flip .row-media { order: 2; }
.row h3 { font: 400 clamp(34px, 3.6vw, 54px)/1.08 var(--display), Georgia, serif; }
.row-line { margin-top: 10px; color: var(--muted); font-size: 17px; font-weight: 300; }
.row-ph { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 24px; }
.row-ph img { width: 100%; height: 100%; object-fit: cover; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.card { padding: 26px 26px 28px; border-radius: 16px; background: var(--card); transition: transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(59, 47, 41, .45); }
.card h4 { margin: 0; font: 400 21px/1.25 var(--display), Georgia, serif; }
.card p { margin-top: 6px; color: var(--muted); font-size: 15px; font-weight: 300; }

/* the studio: a row of photos */
.studio h2 { font-size: clamp(32px, 3.8vw, 54px); }
.big-line { margin-top: 10px; font-size: clamp(21px, 2vw, 27px); font-weight: 500; line-height: 1.3; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g-ph { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 18px; }
.g-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.g-ph:hover img { transform: scale(1.04); }
.has-cap { position: relative; }
.ph-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; font: 500 18px/1.25 var(--display), Georgia, serif; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.ph-cap small { display: block; margin-top: 4px; font: 500 11px/1.3 var(--text), sans-serif; letter-spacing: .16em; text-transform: uppercase; }



/* the photo with its touch points */
.touch { position: relative; z-index: 1; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.touch img {
  width: 100%; height: auto; object-fit: cover; border-radius: 24px;
}
.touch.zoom { transform: scale(1.1); }
.touch .stock-tag { left: auto; right: 16px; bottom: 16px; top: auto; }
.stock-tag {
  position: absolute; z-index: 3; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); color: var(--ink); font-size: 12px; line-height: 1.4;
}

.spot {
  position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: none; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.js .spot { display: grid; }
/* a soft light over the zone when it is chosen */
.spot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 246, .5), rgba(255, 250, 246, 0)); opacity: 0; transform: scale(.6);
  transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.spot.hl::before, .spot[aria-expanded="true"]::before { opacity: 1; transform: none; }
.spot-dot {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 252, 249, .94); color: var(--ink); font: 600 14px/1 var(--text), sans-serif;
  box-shadow: 0 6px 18px -6px rgba(42, 32, 38, .5); transition: background .3s, color .3s, transform .3s;
}
.spot-dot::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9);
  animation: breathe 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .45s);
}
@keyframes breathe { 0% { transform: scale(.7); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.spot-label {
  position: absolute; left: 44px; top: 50%; white-space: nowrap; pointer-events: none;
  padding: 7px 12px; border-radius: var(--r); background: rgba(255, 252, 249, .94); color: var(--ink);
  font: 400 16px/1.1 var(--display), Georgia, serif; box-shadow: 0 10px 24px -14px rgba(42, 32, 38, .5);
  opacity: 0; transform: translate(-6px, -50%); transition: opacity .3s, transform .3s;
}
.spot.lw .spot-label { left: auto; right: 44px; transform: translate(6px, -50%); }
.spot:hover .spot-label, .spot.hl .spot-label, .spot[aria-expanded="true"] .spot-label, .spot:focus-visible .spot-label { opacity: 1; transform: translate(0, -50%); }
.spot:hover .spot-dot, .spot.hl .spot-dot { transform: scale(1.12); }
.spot[aria-expanded="true"] .spot-dot { background: var(--accent); color: var(--on-accent); }
.touch.has-open .spot:not([aria-expanded="true"]) { opacity: .5; }

/* the bar's button appears only once the first screen's button has left the screen */
.head-cta { transition: opacity .3s, transform .3s; }
.head-cta.is-hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* points appear one by one when the scene comes into view */
.js .row .spot { opacity: 0; transform: scale(.6); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i) * .14s + .2s); }
.js .row.seen .spot { opacity: 1; transform: none; }
.js .row.seen .touch.has-open .spot:not([aria-expanded="true"]) { opacity: .55; }

/* ------------------------------------------------ the opened procedure */
.blooms { margin-top: 18px; display: grid; gap: 14px; }
.bloom {
  position: relative; padding: 24px 26px 26px; border-radius: 22px; background: rgba(255, 255, 255, .72);
  box-shadow: 0 24px 50px -30px rgba(42, 32, 38, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bloom h3 { padding-right: 40px; }
.bloom p { margin-top: 10px; color: var(--muted); }
.bloom .actions { margin-top: 20px; }
.bloom-close { display: none; }
.js .bloom[hidden] { display: none; }
.js .bloom { animation: bloom .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes bloom { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.js .bloom-close {
  display: grid; place-items: center; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(42, 32, 38, .06); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.facts { margin: 16px 0 0; }
.facts div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 6px 0; }
.facts dd { font-weight: 500; }
.facts dt { color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; }
.prices div { grid-template-columns: 1fr auto; align-items: baseline; border-bottom: 1px solid var(--line); padding: 10px 0; }
.prices dt { font-size: 16px; }
.prices .big { font-family: var(--display), sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.01em; white-space: nowrap; }
.price-card { box-shadow: 0 0 0 1px var(--line); }
.price-card p { color: var(--ink); font-weight: 400; }
.price-card h4 { font-family: var(--display), sans-serif; font-weight: 700; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.01em; }
.contact-ph { margin: 0; border-radius: 24px; overflow: hidden; min-height: 360px; }
.contact-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facts dd a { text-decoration-color: rgba(42, 32, 38, .25); text-underline-offset: 3px; }
.label { margin: 12px 0 0; }
.label div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: baseline; padding: 8px 0; }
.label dt { color: var(--muted); font-size: 15px; }
.label dd { margin: 0; font-size: 15px; }
.label .big { font-weight: 500; font-size: 24px; margin-right: 4px; }
.brand-list { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; font-family: var(--display), Georgia, serif; font-size: 20px; }

/* ------------------------------------------------ studio photos that slide */
.strip { grid-column: 1 / -1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 8px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip-ph { flex: 0 0 min(300px, 72vw); aspect-ratio: 4 / 3.4; margin: 0; overflow: hidden; border-radius: 18px; scroll-snap-align: start; }
.strip-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.strip-ph:hover img { transform: scale(1.04); }

/* ------------------------------------------------ contact */
.contact { position: relative; padding: clamp(48px, 7vw, 104px) var(--pad); background: var(--blush); }
.contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); max-width: 1440px; margin: 0 auto; align-items: stretch; }
.big-phone { display: inline-block; margin: 22px 0 0; font-family: var(--text), sans-serif; font-weight: 500; letter-spacing: -.01em; font-size: clamp(38px, 4.2vw, 58px); line-height: 1; color: var(--ink); text-decoration: none; }
.big-phone:hover { color: var(--gold); }
.contact .actions { margin-top: 26px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 36, 32, .35); }
.btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
/* a quiet list: small gold capitals, serif values */
.contact-list { margin: 40px 0 0; display: grid; gap: 22px; }
.contact-list dt { color: var(--muted); font-size: 14px; font-weight: 300; }
.contact-list dd { margin: 2px 0 0; font-size: 20px; font-weight: 500; line-height: 1.35; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-list a:hover { border-color: var(--ink); }
.map { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: 24px; background: var(--line); filter: grayscale(.85) sepia(.18) contrast(.95); }   /* muted, so the map matches the page */

/* ------------------------------------------------ procedure page */
.page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; max-width: 1440px; margin: 0 auto; padding: clamp(24px, 5vw, 72px) var(--pad); }
.page-photos { position: relative; padding-bottom: 48px; }
.page-ph { aspect-ratio: 4 / 4.2; margin: 0; overflow: hidden; border-radius: var(--soft); }
.page-ph img, .page-ph2 img { width: 100%; height: 100%; object-fit: cover; }
.page-ph2 { position: absolute; right: -12px; bottom: 0; width: 40%; aspect-ratio: 3 / 3.8; margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0 6px var(--bg); }
.page h1 { font-size: clamp(40px, 5vw, 68px); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.feature { margin-top: 40px; padding: 26px; border-radius: 22px; background: rgba(255, 255, 255, .6); }
.feature h2 { font-size: 34px; }
.feature p { margin-top: 8px; color: var(--muted); }
.others { margin-top: 40px; }
.others h2 { font-size: 26px; }
.others ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-family: var(--display), Georgia, serif; font-size: 21px; }
.others a { text-decoration: none; }
.others a:hover { color: var(--gold); }

/* ------------------------------------------------ footer */
.site-foot { background: var(--ink); color: rgba(255, 255, 255, .72); font-size: 15px; padding: 52px var(--pad) 104px; }   /* bottom room so the call button never covers the last line */
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; max-width: 1440px; margin: 0 auto; }
.foot-in li + li { margin-top: 2px; }
.foot-in li a, .foot-base a { display: inline-block; padding: 12px 0; }   /* 44 px finger targets */
.site-foot .logo { color: #fff; display: inline-block; margin-bottom: 6px; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1440px; margin: 32px auto 0; font-size: 14px; }
.vitrina-credit a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.vitrina-credit img { border-radius: 50%; flex: none; }
.vitrina-credit span { text-decoration: underline; text-underline-offset: 3px; }
.nf { padding: 120px var(--pad); max-width: 1440px; margin: 0 auto; }
.nf h1 { font-size: clamp(36px, 5vw, 56px); }

/* ------------------------------------------------ phone */
@media (max-width: 899px) {
  .row, .contact-in, .page { grid-template-columns: 1fr; }
  .row-flip .row-media { order: 0; }
  .cards { grid-template-columns: 1fr 1fr; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
  .gallery::-webkit-scrollbar { display: none; }
  .g-ph { flex: 0 0 86%; scroll-snap-align: start; }
  .slide { aspect-ratio: 4 / 3.4; }
}
@media (max-width: 767px) {
  .lead { font-size: 16px; margin-top: 12px; }
  .cards { grid-template-columns: 1fr; }
  .contact .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact .actions .btn { padding: 0 12px; }
  .row { gap: 22px; }
  .actions { margin-top: 20px; }
  .hero h1 { font-size: clamp(44px, 12.6vw, 64px); }
  /* keep the buttons above Safari's bottom bar, which floats over the video */
  .home .hero-text { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  @media (pointer: coarse) { .home .hero-text { padding-bottom: calc(var(--under-bar, 0px) + 84px + env(safe-area-inset-bottom)); } }  /* над кръглата слушалка */
  .hero .actions { flex-wrap: nowrap; gap: 12px; }
  .hero .actions .btn { padding: 0 22px; }
  .hero .actions .hero-cta { flex: 1; font-size: 19px; }
  .touch img { border-radius: 24px; }
  .spot { left: var(--mx); top: var(--my); }
  .spot.lw .spot-label { left: 44px; right: auto; transform: translate(-6px, -50%); }
  .spot.lm .spot-label { left: auto; right: 44px; transform: translate(6px, -50%); }
  /* the opened procedure comes up from the bottom as a sheet */
  .js .blooms { margin: 0; }
  .js .bloom {
    position: fixed; z-index: 50; left: 8px; right: 8px; bottom: 8px; max-height: 72svh; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(255, 255, 255, .94); box-shadow: 0 -10px 60px -20px rgba(42, 32, 38, .5); animation: sheet .45s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .facts div, .label div { grid-template-columns: 1fr; gap: 2px; }
  .page-ph2 { right: 8px; }
  .map { min-height: 300px; }
  .foot-in { grid-template-columns: 1fr; gap: 24px; }
  .foot-base { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spot-dot::after, .js .bloom { animation: none; }
  .touch, .js .row .spot, .btn { transition: none; }
  .touch.zoom { transform: none; }
}