*{ margin:0; padding:0; box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
[hidden]{ display:none !important; }
body{
  font-family:Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg) var(--page-bg-image) center / cover no-repeat;
  color:var(--page-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
button, input, select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.sidebar svg,
main svg,
.mobile-nav svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}

:root{
  --sidebar:272px;
  --gutter:clamp(20px, 3.4vw, 48px);
  --bg:#f3f2ed;
  --page-ink:#161615;
  --page-bg-image:none;
  --header-bg:#161615;
  --header-ink:#ffffff;
  --footer-bg:#161615;
  --footer-ink:#ffffff;
  --surface:#ffffff;
  --soft:#f2f1ec;
  --ink:#161615;
  --white:#ffffff;
  --black:#161615;
  --gray:#7c7b75;
  --muted:#7c7b75;
  --light:#ebeae4;
  --border:rgba(22, 22, 21, .1);
  --header-muted:rgba(255, 255, 255, .55);
  --header-line:rgba(255, 255, 255, .1);
  --footer-muted:rgba(255, 255, 255, .55);
  --footer-line:rgba(255, 255, 255, .14);
  --accent:#c8f169;
  --accent-dark:#86b52a;
  --accent-ink:#151b05;
  --radius:30px;
  --radius-md:22px;
  --shadow:0 1px 2px rgba(20, 20, 15, .04), 0 18px 40px -22px rgba(20, 20, 15, .18);
  --ease:cubic-bezier(.2, .7, .2, 1);
}
@supports (color:color-mix(in srgb, red 50%, blue)){
  :root{
    --muted:color-mix(in srgb, var(--page-ink) 56%, transparent);
    --border:color-mix(in srgb, var(--page-ink) 11%, transparent);
    --header-muted:color-mix(in srgb, var(--header-ink) 55%, transparent);
    --header-line:color-mix(in srgb, var(--header-ink) 11%, transparent);
    --footer-muted:color-mix(in srgb, var(--footer-ink) 58%, transparent);
    --footer-line:color-mix(in srgb, var(--footer-ink) 15%, transparent);
  }
}

.pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4cc76b;
  box-shadow:0 0 0 0 rgba(76, 199, 107, .55);
  animation:pulse 2.2s infinite;
  flex:none;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(76, 199, 107, 0); }
  100%{ box-shadow:0 0 0 0 rgba(76, 199, 107, 0); }
}

/* ---------- Sidebar ---------- */

.sidebar{
  position:fixed;
  left:12px;
  top:12px;
  bottom:12px;
  width:calc(var(--sidebar) - 24px);
  background:var(--header-bg);
  color:var(--header-ink);
  border-radius:var(--radius);
  padding:26px 18px 18px;
  display:flex;
  flex-direction:column;
  z-index:100;
  overflow-y:auto;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{ display:none; }
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px;
  margin-bottom:44px;
  min-width:0;
}
.brand-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:var(--accent);
  color:var(--accent-ink);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:18px;
  flex:none;
  transform:rotate(-6deg);
  transition:transform .4s var(--ease);
}
.brand:hover .brand-icon{ transform:rotate(0); }
.brand-name{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
  min-width:0;
}
.brand-name span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.brand-name small{
  display:block;
  color:var(--header-muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin-top:3px;
}
.menu-title{
  padding:0 12px;
  font-size:10px;
  font-weight:700;
  color:var(--header-muted);
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-bottom:12px;
}
.side-menu{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.side-menu a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:14px;
  color:var(--header-muted);
  font-size:14px;
  font-weight:600;
  transition:background .25s, color .25s;
}
.side-menu a:hover{
  color:var(--header-ink);
  background:var(--header-line);
}
.side-menu a.active{
  color:var(--accent-ink);
  background:var(--accent);
}
.menu-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
}
.sidebar-cta{
  margin-top:auto;
  padding:18px;
  border-radius:var(--radius-md);
  border:1px solid var(--header-line);
  background:var(--header-line);
}
.sidebar-cta-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  color:var(--header-muted);
  margin-bottom:12px;
}
.sidebar-cta strong{
  display:block;
  font-size:15px;
  line-height:1.3;
  margin-bottom:4px;
}
.sidebar-cta p{
  font-size:12px;
  color:var(--header-muted);
  margin-bottom:16px;
}
.sidebar-cta-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 12px 16px;
  border-radius:14px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:14px;
  font-weight:700;
  transition:transform .3s var(--ease);
}
.sidebar-cta-btn:hover{ transform:translateY(-2px); }
.sidebar-book{ display:none; }

/* ---------- Layout ---------- */

main{
  margin-left:var(--sidebar);
  min-height:100vh;
  overflow-x:clip;
}
.page{
  width:min(1280px, calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}

/* ---------- Hero ---------- */

.hero{ padding:12px 0 0; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  gap:14px;
  min-height:min(780px, calc(100svh - 24px));
}
.hero-content{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border-radius:var(--radius);
  padding:clamp(28px, 4vw, 64px);
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow);
}
.hero-content::before{
  content:"";
  position:absolute;
  right:-120px;
  top:-140px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, rgba(200, 241, 105, 0) 68%);
  opacity:.6;
  pointer-events:none;
}
.hero-content > *{
  position:relative;
  animation:rise .9s var(--ease) both;
}
.hero-content > :nth-child(2){ animation-delay:.08s; }
.hero-content > :nth-child(3){ animation-delay:.16s; }
.hero-content > :nth-child(4){ animation-delay:.24s; }
@keyframes rise{
  from{ opacity:0; transform:translateY(24px); }
}
.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  padding:8px 14px 8px 12px;
  border-radius:100px;
  background:var(--soft);
  font-size:12px;
  font-weight:600;
}
.hero h1{
  font-size:clamp(42px, 5.4vw, 92px);
  line-height:.96;
  letter-spacing:-.045em;
  font-weight:700;
  max-width:820px;
  margin:56px 0 24px;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.hero-description{
  max-width:48ch;
  color:var(--muted);
  font-size:clamp(15px, 1.25vw, 18px);
  margin-bottom:34px;
  text-wrap:pretty;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.hero-button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:58px;
  padding:8px 8px 8px 26px;
  background:var(--ink);
  color:#fff;
  border-radius:100px;
  font-size:15px;
  font-weight:700;
  transition:transform .3s var(--ease);
}
.hero-button span{
  width:42px;
  height:42px;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:transform .4s var(--ease);
}
.hero-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 24px;
  border-radius:100px;
  border:1px solid var(--border);
  font-size:15px;
  font-weight:700;
  transition:background .25s;
}
.hero-side{
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  gap:14px;
  min-width:0;
  animation:rise 1s .12s var(--ease) both;
}
.hero-photo{
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
  background:var(--ink) center / cover no-repeat;
}
.hero-aura{
  position:absolute;
  inset:-30%;
  z-index:-1;
  background:
    radial-gradient(38% 34% at 32% 34%, var(--accent), rgba(200, 241, 105, 0) 70%),
    radial-gradient(34% 38% at 72% 70%, #8fd6c8, rgba(143, 214, 200, 0) 70%),
    radial-gradient(28% 26% at 74% 28%, #f2c2a0, rgba(242, 194, 160, 0) 70%),
    var(--ink);
  animation:aura 16s ease-in-out infinite alternate;
}
@keyframes aura{
  to{ transform:rotate(24deg) scale(1.12); }
}
.hero-photo.has-photo .hero-aura{ display:none; }
.hero-photo.has-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 45%);
  z-index:-1;
}
.hero-photo-caption{
  position:absolute;
  left:16px;
  bottom:16px;
  display:grid;
  gap:4px;
  max-width:calc(100% - 32px);
  max-height:calc(100% - 32px);
  overflow-y:auto;
  padding:12px 16px;
  border-radius:20px;
  background:rgba(255, 255, 255, .16);
  border:1px solid rgba(255, 255, 255, .24);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#fff;
}
.hero-photo-label{
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.hero-photo-text.is-clampable{ cursor:pointer; }
.hero-photo-text.is-expanded{
  display:block;
  overflow:visible;
}
.hero-photo-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13px;
  line-height:1.45;
  color:rgba(255, 255, 255, .82);
  white-space:pre-line;
  overflow-wrap:anywhere;
}
/* Контакты внизу левой карточки первого экрана. */
.hero-info{
  margin-top:auto;
  background:var(--soft);
  border-radius:var(--radius-md);
  padding:6px 8px;
}
.hero-info .info-icon{ background:var(--surface); }
.info-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 10px;
  min-width:0;
}
.info-row + .info-row{ border-top:1px solid var(--border); }
.info-row:has([hidden]){ display:none; }
.info-row > div{ min-width:0; }
.info-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:var(--soft);
  display:grid;
  place-items:center;
  flex:none;
}
.info-row small{
  display:block;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.info-row span,
.info-row a{
  display:block;
  font-size:15px;
  font-weight:700;
  overflow-wrap:anywhere;
}

/* ---------- Sections ---------- */

.section{ padding:clamp(64px, 8vw, 112px) 0; }
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:clamp(24px, 3vw, 40px);
}
.section-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:14px;
}
.section-label span{
  display:inline-grid;
  place-items:center;
  min-width:32px;
  height:22px;
  padding:0 8px;
  border-radius:100px;
  background:var(--accent);
  color:var(--accent-ink);
  letter-spacing:0;
}
.section-title{
  font-size:clamp(34px, 4.6vw, 66px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:700;
  text-wrap:balance;
}
.section-title em,
.about-card h2 em{
  font-family:Fraunces, Georgia, serif;
  font-style:normal;
  font-weight:500;
  letter-spacing:-.03em;
  padding:0 .06em;
  background:linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 90%, transparent 90%);
}
.section-info{
  max-width:320px;
  color:var(--muted);
  font-size:14px;
  text-wrap:pretty;
}
.services-empty,
.portfolio-empty,
.time-grid-empty{
  color:var(--muted);
  font-size:14px;
  padding:12px 0;
}

/* ---------- Services ---------- */

.services-list{
  display:grid;
  gap:10px;
}
.service{
  background:var(--surface);
  border-radius:var(--radius-md);
  padding:22px 22px 22px 26px;
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) minmax(0, 1.25fr) auto 50px;
  grid-template-areas:"num name desc price arrow";
  align-items:center;
  gap:10px 24px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.service-number{
  grid-area:num;
  font-family:Fraunces, Georgia, serif;
  font-size:22px;
  color:var(--muted);
  transition:color .35s;
}
.service-name{
  grid-area:name;
  font-size:clamp(17px, 1.4vw, 21px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
}
.service-description{
  grid-area:desc;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  transition:color .35s;
}
.service-description:empty{ display:none; }
.service-description.is-open{
  display:block;
  overflow:visible;
}
.service-price{
  grid-area:price;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
  padding:8px 14px;
  border-radius:100px;
  background:var(--soft);
  color:var(--page-ink);
  transition:background .35s, color .35s;
}
.service-price:empty{ display:none; }
.service-arrow{
  grid-area:arrow;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  font-size:18px;
  transition:transform .45s var(--ease), background .35s, color .35s, border-color .35s;
}
.service:active{ transform:scale(.99); }

/* ---------- Portfolio ---------- */

.portfolio{
  --track-pad:max(var(--gutter), calc((100% - 1280px) / 2));
  margin:0 12px;
  padding:clamp(64px, 8vw, 112px) 0;
  border-radius:calc(var(--radius) + 6px);
  background:var(--ink);
  color:#fff;
}
.portfolio .section-label,
.portfolio .section-info{ color:rgba(255, 255, 255, .58); }
.portfolio .section-title em{
  background:none;
  color:var(--accent);
}
.portfolio-track,
.reviews-grid{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--track-pad);
  padding:4px var(--track-pad) 12px;
  scrollbar-width:none;
}
.portfolio-track::-webkit-scrollbar,
.reviews-grid::-webkit-scrollbar{ display:none; }
.portfolio-item{
  flex:0 0 clamp(250px, 24vw, 340px);
  height:clamp(340px, 32vw, 460px);
  border-radius:var(--radius-md);
  overflow:hidden;
  position:relative;
  scroll-snap-align:start;
  background:#262624;
}
.portfolio-item:first-child{ flex-basis:clamp(300px, 34vw, 480px); }
.portfolio-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease);
}
.portfolio-caption{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:14px 16px;
  background:rgba(18, 18, 17, .55);
  border:1px solid rgba(255, 255, 255, .12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:16px;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}
.caption-title{ display:block; }
.viewer-caption{ display:none; }
.portfolio-caption small{
  display:block;
  color:var(--accent);
  font-size:12px;
  margin-bottom:4px;
}
.portfolio-empty{ color:rgba(255, 255, 255, .6); }
.portfolio-item.is-landscape,
.portfolio-item.is-landscape:first-child{
  flex-basis:clamp(360px, 44vw, 640px);
  height:auto;
  aspect-ratio:16 / 10;
}

/* ---------- До / после ---------- */

.ba-item{
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.ba-item .portfolio-caption{
  top:12px;
  bottom:auto;
  pointer-events:none;
}
.ba-media{ position:absolute; inset:0; }
.ba-before, .ba-after{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.ba-after{ clip-path:inset(0 0 0 50%); }
.ba-tag{
  position:absolute;
  bottom:14px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(18, 18, 17, .55);
  color:#fff;
  font-size:12px;
  letter-spacing:.3px;
  pointer-events:none;
}
.ba-tag.before{ left:14px; }
.ba-tag.after{ right:14px; }
.ba-toggle{ display:none; }
.ba-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:0;
  pointer-events:none;
  transform:translateX(-.5px);
}
.ba-handle::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:2px;
  background:rgba(255, 255, 255, .9);
  transform:translateX(-1px);
}
.ba-handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255, 255, 255, .95) url('/images/ba-handle.svg') center / 16px 16px no-repeat;
  box-shadow:0 2px 10px rgba(0, 0, 0, .25);
  transform:translate(-50%, -50%);
}
.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:1px; height:100%; }
.ba-range::-moz-range-thumb{ width:1px; height:100%; border:none; background:transparent; }
.ba-range::-moz-range-track{ width:100%; height:100%; background:transparent; border:none; }

body.gallery-toggle .ba-item{ cursor:default; touch-action:auto; }
body.gallery-toggle .ba-handle,
body.gallery-toggle .ba-range,
body.gallery-toggle .ba-tag{ display:none; }
body.gallery-toggle .ba-after{ clip-path:inset(0 0 0 100%); }
body.gallery-toggle .ba-item.is-after .ba-after{ clip-path:inset(0); }
body.gallery-toggle .ba-toggle{
  display:flex;
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:2;
  transform:translateX(-50%);
  padding:3px;
  background:rgba(18, 18, 17, .55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-radius:999px;
}
body.gallery-toggle .ba-toggle-btn{
  border:none;
  background:transparent;
  color:rgba(255, 255, 255, .7);
  font:inherit;
  font-size:12px;
  letter-spacing:.3px;
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
}
body.gallery-toggle .ba-toggle-btn.is-active{
  background:rgba(255, 255, 255, .92);
  color:var(--ink);
}

/* ---------- Галерея (кадры) ---------- */

.frame-item.no-image{ background:var(--ink); }
.frame-item.no-image .portfolio-caption{
  top:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:none;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#fff;
}
.frame-title{ display:block; }
.frame-text{
  margin-top:6px;
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  color:rgba(255, 255, 255, .78);
  white-space:pre-line;
}
.frame-item:not(.no-image) .frame-text{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.frame-item .frame-text.is-open{
  display:block;
  overflow:visible;
}

/* Работы и кадры: по одной карточке, свайп или перетаскивание и лента миниатюр (main.js).
   На компьютере карточка ограничена высотой окна. */
.portfolio-viewer{
  --viewer-h:min(74svh, 720px);
  position:relative;
  width:calc(var(--viewer-h) * 9 / 16);
  max-width:calc(100% - 24px);
  margin:0 auto;
  overflow:hidden;
  border-radius:var(--radius-md);
}
.portfolio-viewer:has(.is-landscape){ width:calc(var(--viewer-h) * 16 / 10); }
.portfolio-viewer .portfolio-track{
  gap:0;
  padding:0;
  overflow:visible;
  scroll-snap-type:none;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .45s var(--ease);
}
.portfolio-viewer .portfolio-item,
.portfolio-viewer .portfolio-item:first-child{
  flex:0 0 100%;
  height:auto;
  aspect-ratio:9 / 16;
  border-radius:var(--radius-md);
}
.portfolio-viewer .portfolio-item.is-landscape{ aspect-ratio:16 / 10; }
.portfolio-viewer .ba-item .ba-toggle,
.portfolio-viewer .ba-tag{
  top:14px;
  bottom:auto;
}
.portfolio-viewer .ba-item .portfolio-caption{
  top:auto;
  bottom:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.portfolio-viewer .portfolio-caption small{
  order:3;
  align-self:flex-end;
  margin:4px 0 0;
  font-size:14px;
}
.portfolio-viewer .caption-title{ font-size:17px; }
.portfolio-viewer .portfolio-caption{
  max-height:calc(100% - 72px);
  overflow-y:auto;
}
.portfolio-viewer .caption-desc,
.portfolio-viewer .frame-item .frame-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:0;
  color:rgba(255, 255, 255, .72);
  font-size:13px;
  font-weight:400;
  line-height:1.4;
  cursor:pointer;
}
.portfolio-viewer .caption-desc.is-open,
.portfolio-viewer .frame-item .frame-text.is-open{
  display:block;
  overflow:visible;
}
.portfolio-viewer .frame-item .portfolio-caption{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.portfolio-viewer .frame-title{ font-size:17px; }

/* Галерея — тёмный блок, как «Работы». */
.gallery{
  margin:12px 12px 0;
  padding:clamp(64px, 8vw, 112px) 0;
  border-radius:calc(var(--radius) + 6px);
  background:var(--ink);
  color:#fff;
}
.gallery .section-label,
.gallery .section-info{ color:rgba(255, 255, 255, .58); }
.viewer-thumbs{
  display:flex;
  gap:4px;
  margin:14px 12px 0;
  justify-content:flex-start;
  overflow-x:auto;
  scrollbar-width:none;
}
.viewer-thumbs::-webkit-scrollbar{ display:none; }
/* Автоотступы центрируют ленту, а если она длиннее экрана — не обрезают её начало. */
.viewer-thumb:first-child{ margin-left:auto; }
.viewer-thumb:last-child{ margin-right:auto; }
.viewer-thumb{
  flex:0 0 35px;
  height:64px;
  padding:0;
  border:2px solid transparent;
  border-radius:12px;
  overflow:hidden;
  background:#262624;
  opacity:.6;
  transition:flex-basis .35s var(--ease), opacity .25s, border-color .25s;
}
.viewer-thumb.is-active{
  flex-basis:120px;
  border-color:var(--accent);
  opacity:1;
}
.viewer-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Booking ---------- */

.booking-layout{
  background:var(--surface);
  border-radius:calc(var(--radius) + 4px);
  overflow:hidden;
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  box-shadow:var(--shadow);
}
.booking-steps{
  background:var(--ink);
  color:#fff;
  padding:32px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.booking-steps h3{
  font-size:18px;
  letter-spacing:-.02em;
  margin:0 8px 28px;
}
.step{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 8px;
  border-radius:14px;
  color:rgba(255, 255, 255, .42);
  font-size:14px;
  font-weight:700;
  transition:color .3s;
}
.step + .step::before{
  content:"";
  position:absolute;
  left:25px;
  top:-12px;
  width:1px;
  height:16px;
  background:rgba(255, 255, 255, .16);
}
.step.active{ color:#fff; }
.step-number{
  width:34px;
  height:34px;
  border:1px solid rgba(255, 255, 255, .2);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  flex:none;
  transition:background .3s, border-color .3s, color .3s;
}
.step.active .step-number{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.booking-note{
  margin-top:auto;
  padding:16px;
  background:rgba(255, 255, 255, .07);
  border-radius:16px;
  color:rgba(255, 255, 255, .7);
  font-size:13px;
  line-height:1.5;
}
.booking-content{
  padding:clamp(20px, 3.2vw, 40px);
  min-width:0;
}
.block-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  margin-bottom:14px;
}
.block-title > span{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:11px;
  flex:none;
}
.booking-block{ margin-bottom:22px; }
/* Услуги в одну строку: видно --service-cols карточек, остальные — прокруткой вбок. */
.booking-service{
  --service-cols:4;
  position:relative;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:2px 0 6px;
  scrollbar-width:none;
}
.booking-service::-webkit-scrollbar{ display:none; }
.booking-service .services-empty{ flex:1; }
.service-option{
  flex:0 0 calc((100% - (var(--service-cols) - 1) * 10px) / var(--service-cols));
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:110px;
  padding:16px 16px 14px;
  border:1.5px solid var(--border);
  background:var(--surface);
  border-radius:18px;
  text-align:left;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.service-option strong{
  font-size:15px;
  line-height:1.25;
  padding-right:22px;
}
.service-option span{
  color:var(--muted);
  font-size:13px;
}
.service-option .service-option-price{
  margin-top:auto;
  padding-top:10px;
  color:var(--page-ink);
  font-size:15px;
  font-weight:700;
}
.service-option.selected{
  border-color:var(--ink);
  background:var(--soft);
}
.service-option.selected::after{
  content:"";
  position:absolute;
  top:14px;
  right:14px;
  width:20px;
  height:20px;
  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='%23151b05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.booking-main{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  gap:14px;
}
.calendar,
.times,
.booking-fields{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px;
  min-width:0;
}
.calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.calendar-header .block-title{ margin:0; }
#calMonth{
  display:inline-block;
  font-size:15px;
}
#calMonth::first-letter{ text-transform:uppercase; }
.calendar-buttons{
  display:flex;
  gap:6px;
}
.calendar-buttons button{
  width:40px;
  height:40px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .25s, color .25s;
}
.calendar-buttons svg{ width:18px; height:18px; }
.weekdays,
.days{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:4px;
}
.weekday{
  text-align:center;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  padding-bottom:8px;
}
.day{
  position:relative;
  aspect-ratio:1;
  min-height:36px;
  border:none;
  background:transparent;
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background .2s, color .2s;
}
.day.available{
  background:var(--soft);
  cursor:pointer;
}
.day.available::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:16%;
  width:4px;
  height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--accent-dark);
}
.day.today{ box-shadow:inset 0 0 0 1.5px var(--border); }
.day.selected{
  background:var(--ink);
  color:#fff;
}
.day.selected::after{ background:var(--accent); }
.day.disabled,
.day.muted{
  color:var(--muted);
  opacity:.45;
  pointer-events:none;
}
.selected-date{
  color:var(--muted);
  font-size:13px;
  margin:-8px 0 14px 34px;
}
.time-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));
  gap:8px;
}
.time{
  min-height:46px;
  border:1.5px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s, background .2s;
}
.time.selected{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.time.unavailable{
  color:var(--muted);
  text-decoration:line-through;
  border-style:dashed;
  background:transparent;
}
.time.unavailable.selected{
  background:var(--soft);
  border-color:var(--ink);
  border-style:solid;
  color:var(--page-ink);
  text-decoration:none;
}
.time-grid-empty{ grid-column:1 / -1; }

.booking-checkout{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  gap:14px;
  margin-top:14px;
}
.booking-fields{
  display:grid;
  gap:14px;
  align-content:start;
}
.booking-fields .block-title{ margin-bottom:0; }
.booking-fields label{
  display:grid;
  gap:6px;
  font-size:13px;
  font-weight:700;
}
.booking-fields input[type="text"],
.booking-fields input[type="tel"]{
  width:100%;
  min-height:52px;
  padding:0 16px;
  border:1.5px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  font-size:16px;
  font-weight:500;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.booking-fields input[type="text"]:focus,
.booking-fields input[type="tel"]:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(200, 241, 105, .5);
}
.booking-fields input::placeholder{ color:var(--muted); }
.booking-fields .booking-error{ margin:0; }
.booking-error{
  color:#c23b2b;
  font-size:13px;
  font-weight:600;
}
.booking-consent{
  display:grid;
  gap:10px;
}
.booking-consent .booking-consent-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--muted);
  cursor:pointer;
}
.booking-consent .booking-consent-item input{
  flex:none;
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--ink);
}
.booking-consent a{
  color:var(--page-ink);
  text-decoration:underline;
  text-decoration-color:var(--border);
  text-underline-offset:2px;
}

.booking-ticket{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:22px;
  border-radius:var(--radius-md);
  background:var(--ink);
  color:#fff;
}
.booking-pick{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:20px;
  border-bottom:1.5px dashed rgba(255, 255, 255, .2);
  min-width:0;
}
.booking-pick::before,
.booking-pick::after{
  content:"";
  position:absolute;
  bottom:-12px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--surface);
}
.booking-pick::before{ left:-33px; }
.booking-pick::after{ right:-33px; }
.booking-pick small{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent);
}
.booking-pick strong{
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.booking-summary-desc{
  color:rgba(255, 255, 255, .6);
  font-size:13px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}
.booking-pick-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:16px;
}
.booking-pick-slot{
  font-size:14px;
  color:rgba(255, 255, 255, .75);
}
.booking-pick-price{
  font-size:24px;
  font-weight:700;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.continue-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  padding:0 24px;
  border:none;
  border-radius:16px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:16px;
  font-weight:700;
  text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s, color .3s;
}
.continue-button:disabled{ opacity:.4; cursor:not-allowed; }
.booking-ticket .continue-button:disabled{
  opacity:1;
  background:rgba(255, 255, 255, .1);
  color:rgba(255, 255, 255, .45);
}
.continue-button.ready{ box-shadow:0 14px 34px -12px rgba(200, 241, 105, .75); }

.success-msg{
  display:grid;
  justify-items:center;
  gap:14px;
  max-width:460px;
  margin:clamp(16px, 5vw, 64px) auto;
  text-align:center;
}
.success-mark{
  width:76px;
  height:76px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-ink);
  display:grid;
  place-items:center;
  margin-bottom:6px;
  animation:pop .6s var(--ease) both;
}
.success-mark svg{
  width:36px;
  height:36px;
  stroke-width:2.4;
}
@keyframes pop{
  from{ transform:scale(.4); opacity:0; }
}
.success-msg h3{
  font-size:clamp(26px, 3vw, 34px);
  line-height:1.1;
  letter-spacing:-.03em;
}
.success-msg p{
  color:var(--muted);
  font-size:15px;
  margin-bottom:6px;
}
.success-msg .ec-channels{ justify-content:center; margin:0; }
.success-msg .ec-channels ~ #telegramConfirmBtn,
.success-msg .ec-channels ~ #vkReminderBtn,
.success-msg .ec-channels ~ #emailConfirmBtn{ margin-top:0; }
.telegram-confirm-btn{
  width:100%;
  max-width:380px;
  text-decoration:none;
}
#emailConfirmBtn,
#vkReminderBtn{
  background:var(--soft);
  color:var(--page-ink);
}
.small-button{
  min-height:46px;
  padding:0 22px;
  border:1px solid var(--border);
  background:transparent;
  border-radius:100px;
  font-size:14px;
  font-weight:700;
  transition:background .25s;
}

/* ---------- About ---------- */

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.about-card{
  display:flex;
  flex-direction:column;
  min-height:440px;
  background:var(--surface);
  border-radius:var(--radius);
  padding:clamp(28px, 4vw, 52px);
  box-shadow:var(--shadow);
  min-width:0;
}
.about-card h2{
  font-size:clamp(30px, 3.4vw, 52px);
  line-height:1;
  letter-spacing:-.045em;
  margin:8px 0 20px;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.about-card p{
  color:var(--muted);
  max-width:48ch;
  font-size:15px;
  text-wrap:pretty;
}
.about-card.dark{
  background:var(--ink);
  color:#fff;
}
.about-card.dark .section-label,
.about-card.dark p{ color:rgba(255, 255, 255, .6); }
.about-card.dark h2 em{
  background:none;
  color:var(--accent);
}
.numbers{
  margin-top:auto;
  padding-top:40px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.number{
  border-top:1px solid rgba(255, 255, 255, .16);
  padding-top:16px;
}
.number strong{
  display:block;
  font-size:clamp(28px, 3vw, 44px);
  line-height:1.1;
  letter-spacing:-.04em;
}
.number:first-child strong{ color:var(--accent); }
.number span{
  color:rgba(255, 255, 255, .55);
  font-size:13px;
}

/* ---------- Reviews ---------- */

.reviews{
  --track-pad:max(var(--gutter), calc((100% - 1280px) / 2));
  padding-top:0;
}
.review-card{
  flex:0 0 clamp(280px, 30vw, 380px);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--surface);
  border-radius:var(--radius-md);
  padding:24px;
  box-shadow:var(--shadow);
}
.review-photo{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:14px;
}
.review-rating{
  color:var(--accent-dark);
  letter-spacing:3px;
  font-size:15px;
}
.review-text{
  font-size:15px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
}
.review-text.is-clampable{ cursor:pointer; }
.review-text.is-expanded{
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}
.review-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--muted);
}
.review-name{
  font-weight:700;
  color:var(--page-ink);
}

/* ---------- Footer ---------- */

footer{
  margin:0 12px 12px;
  padding:clamp(40px, 5vw, 64px) 0 28px;
  border-radius:calc(var(--radius) + 6px);
  background:var(--footer-bg);
  color:var(--footer-ink);
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:28px;
  border-bottom:1px solid var(--footer-line);
}
.footer-brand{ min-width:0; }
.footer-brand strong{
  display:block;
  font-size:clamp(40px, 7vw, 104px);
  line-height:.9;
  letter-spacing:-.055em;
  overflow-wrap:anywhere;
}
.footer-brand small{
  display:block;
  margin-top:14px;
  color:var(--footer-muted);
  font-size:13px;
}
.footer-book{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:54px;
  padding:0 22px;
  border-radius:100px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:15px;
  font-weight:700;
  transition:transform .3s var(--ease);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:24px;
}
.footer-links:not(:has(> span:not([hidden]))){ display:none; }
.footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--footer-line);
  border-radius:100px;
  font-size:14px;
  font-weight:700;
  transition:background .25s, color .25s, border-color .25s;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 24px;
  padding-top:24px;
  color:var(--footer-muted);
  font-size:13px;
}
.footer-bottom a{
  text-decoration:underline;
  text-decoration-color:var(--footer-line);
  text-underline-offset:3px;
}

.mobile-nav{ display:none; }

/* ---------- Hover (только устройства с мышью) ---------- */

@media (hover:hover){
  .hero-button:hover{ transform:translateY(-2px); }
  .hero-button:hover span{ transform:rotate(-45deg); }
  .hero-link:hover{ background:var(--soft); }
  .service:hover{
    background:var(--ink);
    color:#fff;
    transform:translateX(6px);
  }
  .service:hover .service-number,
  .service:hover .service-description{ color:rgba(255, 255, 255, .6); }
  .service:hover .service-price{
    background:rgba(255, 255, 255, .12);
    color:#fff;
  }
  .service:hover .service-arrow{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
    transform:rotate(-45deg);
  }
  .portfolio-item:hover img{ transform:scale(1.06); }
  .service-option:hover{ border-color:var(--ink); }
  .calendar-buttons button:hover{
    background:var(--ink);
    color:#fff;
  }
  .day.available:hover{
    background:var(--ink);
    color:#fff;
  }
  .time:not(.selected):hover{ border-color:var(--ink); }
  .continue-button:not(:disabled):hover{ transform:translateY(-2px); }
  .small-button:hover{ background:var(--soft); }
  .footer-book:hover{ transform:translateY(-2px); }
  .footer-links a:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
  }
}

@media (pointer:fine){
  .portfolio-track,
  .reviews-grid{ scrollbar-width:thin; }
  .portfolio-track{ scrollbar-color:rgba(255, 255, 255, .25) transparent; }
  .gallery .portfolio-track{ scrollbar-color:var(--border) transparent; }
  .reviews-grid{ scrollbar-color:var(--border) transparent; }
  .portfolio-track::-webkit-scrollbar,
  .reviews-grid::-webkit-scrollbar{ display:block; height:6px; }
  .portfolio-track::-webkit-scrollbar-thumb{ background:rgba(255, 255, 255, .25); border-radius:6px; }
  .gallery .portfolio-track::-webkit-scrollbar-thumb{ background:rgba(0, 0, 0, .15); }
  .reviews-grid::-webkit-scrollbar-thumb{ background:rgba(0, 0, 0, .15); border-radius:6px; }
}

/* ---------- Компьютер ---------- */

/* «До/после» и галерея: у картинок 9:16 подпись справа, вместе по центру; у 16:9 — компактная плашка в картинке справа. */
@media (min-width:1241px){
  .portfolio-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(24px, 3vw, 48px);
    padding:0 12px;
  }
  .portfolio-stage .portfolio-viewer{
    flex:none;
    margin:0;
  }
  .portfolio-stage:not(:has(.is-landscape)) .portfolio-item:not(.no-image) .portfolio-caption{ display:none; }
  .portfolio-stage:not(:has(.is-landscape)) .viewer-caption{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:min(340px, 30vw);
  }
  .viewer-caption .caption-title{
    font-size:clamp(24px, 2vw, 32px);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.02em;
  }
  .viewer-caption .caption-desc{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:rgba(255, 255, 255, .72);
    font-size:15px;
    line-height:1.5;
    cursor:pointer;
  }
  .viewer-caption .caption-desc.is-open{
    display:block;
    overflow:visible;
  }
  .viewer-caption small{
    color:var(--accent);
    font-size:18px;
    font-weight:700;
  }
  .portfolio-stage:has(.is-landscape) .portfolio-item:not(.no-image) .portfolio-caption{
    left:auto;
    right:12px;
    width:min(340px, 42%);
    padding:10px 14px;
  }
  .portfolio-stage:has(.is-landscape) .caption-title,
  .portfolio-stage:has(.is-landscape) .frame-title{ font-size:15px; }
  .portfolio-stage:has(.is-landscape) .portfolio-caption small{ font-size:13px; }
}

/* Первый экран: левая колонка — до двух ширин фото, сужается на узком окне.
   Ширина фото зависит от ширины и высоты окна, по высоте фото тянется до низа левой колонки, но не ниже 9:16. */
@media (min-width:1241px){
  .hero-grid{
    --hero-photo-w:clamp(260px, min(26vw, calc((100svh - 120px) * 9 / 16)), 360px);
    /* Свободное место делится 2:3 — блок по центру, но чуть левее. */
    grid-template-columns:minmax(0, 2fr) minmax(0, calc(var(--hero-photo-w) * 2)) var(--hero-photo-w) minmax(0, 3fr);
    min-height:0;
  }
  .hero-content{ grid-column:2; }
  .hero-side{ grid-column:3; }
  /* Левая колонка — две карточки: текст сверху, контакты снизу. */
  .hero-content{
    gap:14px;
    padding:0;
    overflow:visible;
    background:none;
    box-shadow:none;
  }
  .hero-content::before{ display:none; }
  .hero-intro{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    flex:1;
    padding:clamp(28px, 3vw, 44px);
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .hero-intro::before{
    content:"";
    position:absolute;
    right:-120px;
    top:-140px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:radial-gradient(circle, var(--accent) 0%, rgba(200, 241, 105, 0) 68%);
    opacity:.6;
    pointer-events:none;
  }
  .hero-intro > *{ position:relative; }
  .hero-intro .hero-actions{
    margin-top:auto;
    padding-top:24px;
  }
  .hero-info{
    margin-top:0;
    padding:6px 8px;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .hero-info .info-icon{ background:var(--soft); }
  .hero h1{
    font-size:clamp(36px, 3.2vw, 52px);
    margin:28px 0 16px;
  }
  .hero-description{ margin-bottom:0; }
  .hero-side{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:1fr;
  }
  .hero-photo{
    aspect-ratio:auto;
    min-height:calc(var(--hero-photo-w) * 16 / 9);
  }
  .info-row{
    gap:10px;
    padding:10px;
  }
  .info-icon{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .info-row span,
  .info-row a{ font-size:clamp(15px, 1.25vw, 18px); }
}

/* ---------- Планшет ---------- */

@media (max-width:1240px){
  .hero-grid{
    grid-template-columns:1fr;
    min-height:0;
  }
  .hero-content{ min-height:520px; }
  .hero-side{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:none;
  }
  .hero-photo{
    width:min(100%, 420px);
    justify-self:center;
  }
  .service{
    grid-template-columns:40px minmax(0, 1fr) auto 50px;
    grid-template-areas:
      "num name price arrow"
      "num desc price arrow";
    gap:4px 20px;
  }
  .booking-main,
  .booking-checkout{ grid-template-columns:1fr; }
}

@media (max-width:1000px){
  :root{ --sidebar:236px; }
  .sidebar{ padding:22px 14px 14px; }
  .booking-layout{ grid-template-columns:1fr; }
  .booking-steps{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    padding:16px;
  }
  .booking-steps h3{ display:none; }
  .step{
    flex-direction:column;
    gap:8px;
    padding:0;
    font-size:12px;
    text-align:center;
  }
  .step + .step::before{
    left:calc(-50% + 13px);
    top:17px;
    width:calc(100% - 34px);
    height:1px;
  }
  .booking-note{
    grid-column:1 / -1;
    margin-top:8px;
    padding:12px 14px;
    font-size:12.5px;
  }
  .about-grid{ grid-template-columns:1fr; }
  .about-card{ min-height:0; }
}

/* ---------- Телефон ---------- */

@media (max-width:760px){
  :root{
    --sidebar:0px;
    --gutter:16px;
    --radius:24px;
    --radius-md:20px;
  }
  html{ scroll-padding-top:72px; }

  .sidebar{
    position:sticky;
    top:0;
    left:auto;
    bottom:auto;
    width:auto;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    border-radius:0 0 22px 22px;
    overflow:visible;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 8px 24px -16px rgba(0, 0, 0, .45);
  }
  .brand{
    margin:0;
    padding:0;
    gap:10px;
  }
  .brand-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    font-size:16px;
  }
  .brand-name{ font-size:15px; }
  .brand-name small{
    font-size:9px;
    letter-spacing:.12em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .menu-title,
  .side-menu,
  .sidebar-cta{ display:none; }
  .sidebar-book{
    display:inline-flex;
    align-items:center;
    flex:none;
    margin-left:auto;
    min-height:40px;
    padding:0 16px;
    border-radius:100px;
    background:var(--accent);
    color:var(--accent-ink);
    font-size:14px;
    font-weight:700;
  }

  main{
    margin-left:0;
    padding-bottom:calc(92px + env(safe-area-inset-bottom));
  }

  .hero{ padding-top:10px; }
  .hero-grid{ gap:10px; }
  .hero-content{
    min-height:0;
    padding:22px 20px 22px;
  }
  .hero-content::before{
    width:260px;
    height:260px;
    right:-110px;
    top:-110px;
  }
  .status{ font-size:11px; }
  .hero h1{
    font-size:clamp(34px, 10.4vw, 52px);
    letter-spacing:-.04em;
    margin:36px 0 14px;
  }
  .hero-description{
    font-size:15px;
    margin-bottom:0;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .hero-button{
    width:100%;
    min-height:52px;
    gap:8px;
    padding:6px 6px 6px 16px;
    font-size:14px;
  }
  .hero-button span{
    width:38px;
    height:38px;
  }
  .hero-link{
    width:100%;
    min-height:52px;
    padding:0 10px;
    background:var(--surface);
    font-size:14px;
    text-align:center;
  }
  .hero-side{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-info{ padding:4px 6px; }
  .info-row{ padding:11px 8px; }
  .info-icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }

  .section{ padding:56px 0; }
  .section-heading{
    display:block;
    margin-bottom:20px;
  }
  .section-label{ margin-bottom:10px; }
  .section-title{ font-size:clamp(30px, 9vw, 40px); }
  .section-info{
    margin-top:10px;
    max-width:none;
  }

  .services-list{ gap:8px; }
  .service{
    grid-template-columns:26px minmax(0, 1fr) 40px;
    grid-template-areas:
      "num name arrow"
      "num desc arrow"
      "num price arrow";
    gap:6px 12px;
    padding:16px 14px 16px 16px;
    align-items:start;
  }
  .service-number{
    font-size:16px;
    line-height:1.5;
  }
  .service-name{ font-size:17px; }
  .service-description{ font-size:13.5px; }
  .service-price{
    justify-self:start;
    margin-top:4px;
    padding:6px 12px;
    font-size:14px;
  }
  .service-arrow{
    width:40px;
    height:40px;
    align-self:center;
  }

  .portfolio{
    margin:0 8px;
    padding:48px 0;
    --track-pad:12px;
  }
  .portfolio .page{ width:calc(100% - 24px); }
  .portfolio-track,
  .reviews-grid{ gap:10px; }
  .ba-item{ cursor:default; touch-action:auto; }
  .ba-handle,
  .ba-range,
  .ba-tag{ display:none; }
  .ba-after{ clip-path:inset(0 0 0 100%); }
  .ba-item.is-after .ba-after{ clip-path:inset(0); }
  .ba-toggle{
    display:flex;
    position:absolute;
    left:50%;
    bottom:14px;
    z-index:2;
    transform:translateX(-50%);
    padding:3px;
    background:rgba(18, 18, 17, .55);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    border-radius:999px;
  }
  .ba-toggle-btn{
    border:none;
    background:transparent;
    color:rgba(255, 255, 255, .7);
    font:inherit;
    font-size:12px;
    letter-spacing:.3px;
    padding:6px 14px;
    border-radius:999px;
    cursor:pointer;
  }
  .ba-toggle-btn.is-active{
    background:rgba(255, 255, 255, .92);
    color:var(--ink);
  }

  .portfolio-viewer,
  .portfolio-viewer:has(.is-landscape){
    width:auto;
    max-width:none;
    margin:0 12px;
  }
  .portfolio-viewer .portfolio-item,
  .portfolio-viewer .portfolio-item:first-child{ max-height:78svh; }
  .gallery{
    margin:10px 8px 0;
    padding:48px 0;
  }
  .gallery .page{ width:calc(100% - 24px); }

  .booking-layout{ border-radius:var(--radius); }
  .booking-steps{
    padding:14px 12px;
    gap:6px;
  }
  .step{ font-size:11px; }
  .step-number{
    width:30px;
    height:30px;
    font-size:10px;
  }
  .step + .step::before{
    top:15px;
    left:calc(-50% + 13px);
    width:calc(100% - 32px);
  }
  .booking-content{ padding:18px 14px 16px; }
  .booking-service{
    --service-cols:3;
    gap:8px;
    margin-inline:-14px;
    padding:2px 14px 6px;
  }
  .service-option{
    flex-basis:calc((100% - 16px) / 3);
    min-height:96px;
    padding:12px 10px 10px;
    border-radius:14px;
  }
  .service-option strong{
    font-size:13px;
    padding-right:16px;
    overflow-wrap:anywhere;
  }
  .service-option span{ font-size:11.5px; }
  .service-option .service-option-price{
    padding-top:8px;
    font-size:13px;
  }
  .service-option.selected::after{
    top:10px;
    right:8px;
    width:16px;
    height:16px;
    background-size:10px;
  }
  .booking-main{ gap:10px; }
  .calendar,
  .times,
  .booking-fields{
    padding:14px;
    border-radius:18px;
  }
  .calendar-buttons button{
    width:44px;
    height:44px;
  }
  .weekdays,
  .days{ gap:3px; }
  .day{
    min-height:0;
    border-radius:12px;
    font-size:15px;
  }
  .time-grid{ grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); }
  .time{ min-height:48px; font-size:15px; }
  .booking-checkout{
    gap:10px;
    margin-top:10px;
  }
  .booking-ticket{
    padding:20px 18px;
    border-radius:18px;
  }
  .booking-pick::before{ left:-29px; }
  .booking-pick::after{ right:-29px; }
  .booking-pick strong{ font-size:18px; }
  .booking-pick-price{ font-size:22px; }
  .continue-button{ min-height:58px; }

  .about-card{ padding:26px 22px; }
  .about-card h2{ font-size:clamp(28px, 8.4vw, 38px); }
  .numbers{
    padding-top:32px;
    gap:10px;
  }
  .number strong{ font-size:28px; }
  .number span{ font-size:12px; }

  .reviews,
  .gallery{ --track-pad:16px; }
  .review-card{
    flex-basis:84vw;
    padding:20px;
  }

  footer{
    margin:0 8px 8px;
    padding:40px 0 24px;
  }
  .footer-top{ display:block; }
  .footer-book{
    width:100%;
    justify-content:space-between;
    margin-top:24px;
    min-height:56px;
  }
  .footer-bottom{ flex-direction:column; }
  /* Контакты первого экрана на телефоне переносятся в подвал (main.js). */
  footer .hero-info{
    margin-top:0;
    padding:12px 0 0;
    background:none;
    border-radius:0;
  }
  footer .info-row{ padding:12px 0; }
  footer .info-row + .info-row{ border-top-color:var(--footer-line); }
  footer .hero-info .info-icon{ background:rgba(255, 255, 255, .08); }
  footer .info-row small{ color:var(--footer-muted); }

  .mobile-nav{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0, 1fr);
    align-items:end;
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    height:66px;
    padding:0 4px 9px;
    background:rgba(22, 22, 21, .9);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(255, 255, 255, .08);
    border-radius:24px;
    z-index:1000;
    box-shadow:0 18px 40px -12px rgba(0, 0, 0, .45);
  }
  .mobile-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    min-width:0;
    color:rgba(255, 255, 255, .55);
    font-size:10.5px;
    font-weight:700;
    text-align:center;
    transition:color .25s;
  }
  .mobile-nav a.active{ color:#fff; }
  .mobile-nav-icon{
    width:40px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:12px;
    transition:background .25s, color .25s;
  }
  .mobile-nav a.active .mobile-nav-icon{
    background:rgba(255, 255, 255, .14);
    color:var(--accent);
  }
  .mobile-nav .mobile-nav-book .mobile-nav-icon{
    width:52px;
    height:52px;
    margin-top:-24px;
    border-radius:50%;
    background:var(--accent);
    color:var(--accent-ink);
    box-shadow:0 0 0 5px rgba(22, 22, 21, .9), 0 10px 24px -6px rgba(200, 241, 105, .6);
  }
  .mobile-nav .mobile-nav-book.active .mobile-nav-icon{
    background:var(--accent);
    color:var(--accent-ink);
  }
}

@media (max-width:380px){
  .brand-name small{ display:none; }
  .sidebar-book{ padding:0 14px; font-size:13px; }
  .hero h1{ font-size:32px; }
  .step span{ font-size:10px; }
  .mobile-nav a{ font-size:9.5px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}