@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/ruble-manrope.woff2') format('woff2');
  unicode-range: U+20BD;
}

html { color-scheme: dark; scroll-behavior: auto; }
.compact {
  --bg: #101010;
  --panel: #1c1b1a;
  --ambient-rgb: 194 160 119;
  --ambient-price: .20;
  --ambient-transition: .058;
  --display: Manrope, var(--sans);
  --section: clamp(36px, 4.6vw, 66px);
  --header-h: 68px;
  background: var(--bg);
}
.compact .section-title {
  margin: 0 0 clamp(18px, 3vw, 32px);
  font-size: clamp(29px, 3.8vw, 49px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.052em;
}
.compact .header { background: var(--bg); border-bottom-color: var(--line); }
.compact .brand { gap: 13px; padding-inline-start: 5px; }
.compact-mark {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: url("../assets/brand/maestro-logo-transparent-600.png?v=1") center / contain no-repeat;
}
.compact-mark span { transform: rotate(-45deg); }
.compact .brand__word { font: 700 15px/1.15 var(--display); letter-spacing: .15em; }
.compact .brand__word small { display: block; color: var(--text-soft); font: 400 12px/1.4 var(--sans); letter-spacing: 0; }
.compact .header__actions { margin-left: auto; }
.compact .burger { border-color: transparent; }
.compact .btn,
.compact button,
.compact .price-book { border-radius: 8px; }
.compact .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(28px, 4.4vw, 64px);
  /* Transparent on purpose: the glow of the prices section carries on up into the hero. */
  background-color: transparent;
}
.compact .hero__grid { position: relative; z-index: 2; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
@media (max-width: 760px) {
  .compact .hero h1 { font-size: clamp(31px, 8.6vw, 51px); }
}
.compact .hero__place { color: var(--bronze); font: 500 15px/1.35 var(--sans); text-transform: none; letter-spacing: .015em; }
.compact .hero h1 {
  font-size: clamp(40px, 5.45vw, 83px);
  line-height: 1.01;
  font-weight: 500;
  letter-spacing: -.055em;
  word-spacing: .035em;
  max-width: 15ch;
  text-wrap: balance;
}
.compact .hero__lead { line-height: 1.65; }
.compact .hero__lead strong { color: var(--text); font-weight: 600; }
.compact .hero__figure { max-width: none; overflow: hidden; border-radius: 10px; }
.compact .hero__figure picture { display: block; overflow: hidden; border-radius: 10px; }
.compact .hero__figure img {
  height: clamp(365px, 43vw, 596px);
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 66%;
  box-sizing: border-box;
  border: 1px solid rgba(194, 160, 119, 0.22);
  border-radius: 10px;
}
.hero__price-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding-inline: 6px; font-size: 15px; }

.compact-prices .price-item {
  grid-template-columns: minmax(0, 1fr) auto minmax(210px, auto);
  padding-block: 5px;
  min-height: 56px;
  gap: 0 24px;
}
.compact-prices .price-item__name { grid-column: auto; }
.compact-prices .price-item h3 { font: 500 16px/1.35 var(--sans); }
.compact-prices .price-item__price { font: 600 16px/1.35 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.compact-prices .price-item__actions { display: flex; grid-column: auto; align-items: center; justify-content: end; gap: 16px; }
.price-detail { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; color: var(--bronze); font-size: 14px; }
.price-detail {
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: rgba(194, 160, 119, .45);
  text-underline-offset: 3px;
}
.price-detail:hover { color: var(--text); text-decoration-color: var(--bronze); }
.price-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 14px;
  background: var(--bronze);
  color: #14120f;
  font: 600 13px/1.2 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.price-book:hover { background: var(--gold); }
.price-end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 17px; }
.price-end p { font-size: 14px; color: var(--text-soft); }

.compact .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.compact .master {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 14px;
  padding: clamp(12px, 1.6vw, 22px);
  background: var(--panel);
}
.compact .master__photo { width: clamp(68px, 7.3vw, 96px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--bronze); }
.compact .master__photo img { object-fit: cover; }
.compact .master h3 { margin: 0; font-size: 23px; font-weight: 500; }
.compact .master__role { margin: 2px 0 0; font-size: 14px; letter-spacing: 0; text-transform: none; }
.compact .master__link { display: inline-flex; min-height: 44px; align-items: center; margin: 0; padding: 0; border: 0; font-size: 14px; }
.compact #about { padding-top: 0; }
.compact-interior { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.compact-interior .atmosphere__item { grid-column: auto; grid-row: auto; aspect-ratio: 1; height: auto; }
.compact-interior .atmosphere__item figcaption { font: 500 14px/1.35 var(--sans); letter-spacing: 0; text-transform: none; }
.compact #works { padding-top: 0; }
.compact #works .section-title { margin-bottom: clamp(12px, 2vw, 20px); }
.compact-works {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: clamp(320px, 33vw, 470px);
}
.compact-works img { width: 100%; height: 100%; object-fit: cover; }
.compact-works img:first-child { grid-row: span 2; object-position: center 44%; }
.compact-contacts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); align-items: start; gap: 16px clamp(24px, 4vw, 56px); }
.compact-contacts address { font-style: normal; }
.compact-contacts address p + p { margin-top: 8px; color: var(--text-soft); }
.compact-contacts address a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-map iframe { display: block; width: 100%; height: 248px; border: 1px solid var(--line); background: var(--panel); }
.contact-map .contact-actions { margin-top: 10px; }
.contact-map__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; color: var(--text-soft); font-size: 13.5px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: start; gap: 10px; }
.compact .footer { padding-block: 0; }
.compact .footer__bottom { margin-block: 0; border: 0; padding-block: 12px; }
.compact .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.compact .mobile-bar { visibility: hidden; transform: none; transition: none; }
.compact .mobile-bar.is-visible { visibility: visible; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#route {
  --frame-height: min(clamp(120px, calc(100dvh - 218px), 620px), calc((100vw - 50px) / .75));
  color: var(--text);
  background: #1b1a19;
  width: min(560px, calc(100% - 16px));
  max-width: none;
  max-height: calc(100dvh - 16px);
  border: 1px solid var(--line-strong);
  padding: clamp(10px, 3vw, 20px);
  overscroll-behavior: contain;
}
#route::backdrop { background: rgba(0, 0, 0, .79); }
.route-heading, .route-controls { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.route-heading { margin-bottom: 8px; }
.route-heading h3 { font-size: clamp(17px, 4.5vw, 23px); font-weight: 600; line-height: 1.2; }
.route-close { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line-strong); font-size: 25px; cursor: pointer; }
#route .route__list { display: flex; gap: 4px; }
#route .route__btn { display: grid; place-items: center; width: clamp(29px, 9vw, 44px); min-height: 44px; padding: 0; }
#route .route__btn[aria-pressed="true"] { background: var(--bronze); border-color: var(--bronze); }
#route .route__btn[aria-pressed="true"] span { color: var(--bg); }
#route .route-controls .btn { padding: 5px clamp(6px, 2vw, 14px); min-height: 44px; font-size: 14px; }
#route .btn[aria-disabled="true"],
#route .btn:disabled { opacity: .52; cursor: default; }
#route .route__status { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; margin: 9px 0; font-size: 15px; }
#route .route__counter { color: var(--bronze); font: inherit; font-size: 13px; white-space: nowrap; text-transform: none; letter-spacing: 0; }
#route .route-step {
  width: min(100%, calc(var(--frame-height) * var(--ratio)));
  height: var(--frame-height);
  max-width: 100%;
  aspect-ratio: var(--ratio);
}
#route .route-step img { width: 100%; height: 100%; }
html:has(#route[open]) { overflow: hidden; }

@media (max-width: 930px) {
  .compact .team { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html:has(.compact) { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .compact { --header-h: 60px; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .compact .header__book { display: none; }
  .compact .hero__grid { grid-template-columns: 1fr; gap: 21px; }
  .compact .hero h1 { font-size: clamp(35px, 9vw, 51px); margin-top: 9px; }
  .compact .hero__lead { margin-top: 13px; }
  .compact .hero__actions { margin-top: 16px; }
  .compact .hero__actions .btn { padding-inline: 15px; }
  .compact .hero__figure { margin: 0; }
  .compact .hero__figure img { height: clamp(205px, 63vw, 370px); object-position: center 54%; }
  .compact-prices .price-item { grid-template-columns: minmax(0,1fr) auto; gap: 0 10px; padding-block: 8px; }
  .compact-prices .price-item__actions { grid-column: 1 / -1; justify-content: flex-start; gap: 18px; margin-top: 2px; }
  .compact-prices .price-book { margin-left: auto; }
  .price-detail { min-height: 44px; }
  .compact-interior { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .compact .compact-interior .atmosphere__item--lead { grid-column: 1 / -1; width: 100%; min-width: 0; height: clamp(156px, 46vw, 280px); }
  .compact-interior .atmosphere__item:not(.atmosphere__item--lead) { height: clamp(128px, 36vw, 210px); }
  .compact-works {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 8px;
    height: auto;
  }
  .compact-works img { height: clamp(150px, 44vw, 250px); }
  .compact-works img:first-child { grid-column: 1 / -1; grid-row: auto; height: clamp(180px, 56vw, 300px); }
  .compact-contacts { grid-template-columns: minmax(0, 1fr); }
  .contact-map iframe { height: 188px; }
  .contact-actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
}
@media (max-width: 450px) {
  #route .route__status { display: grid; grid-template-rows: auto minmax(1.5em, auto); }
}

/* ---------- header phone ---------- */
.header__phone { display: none; }
@media (min-width: 761px) {
  .compact .header__phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 8px;
    color: var(--text);
    font: 500 15px/1.2 var(--sans);
    text-decoration: none;
    white-space: nowrap;
  }
}

/* ---------- hero proof ---------- */
.hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  margin-top: 14px;
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid rgba(194, 160, 119, .55);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}
.hero__proof strong { color: var(--bronze); font-weight: 700; margin-right: 2px; }
.hero__proof-sep { color: var(--text-soft); }

/* ---------- footer links ---------- */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 22px;
  padding-block: 14px 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.compact .footer__links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-soft); }

@media (max-width: 350px) {
  .compact .hero h1 { font-size: 22px; }}
/* Two independently framed windows from the same alpha WebM fit the approved Hero zones. */
.compact .hero { overflow: visible; z-index: 1; }
.compact .hero__actions { position: relative; }
.scissor-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.hero-tools-window {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 96%, transparent 100%);
}
.hero-tools-window--scissors {
  top: clamp(16px, 1.1vw, 23px);
  left: clamp(10px, calc((100vw - 1240px) / 2 - 290px), 50px);
  width: clamp(80px, calc((100vw - 1240px) / 2 - 20px), 300px);
  aspect-ratio: 300 / 190;
}
.hero-tools-video {
  position: absolute;
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
}
.hero-tools-video--scissors {
  top: 0;
  left: 0;
  width: 320%;
}
.hero-tools-window--razor {
  --razor-window-width: min(400px, max(90px, calc((100vw - 1240px) / 2 - 10px)));
  --razor-lift: 100px;
  --razor-headroom: 200px;
  top: calc(36px - var(--razor-lift) - var(--razor-headroom));
  left: calc(100vw - 34px - var(--razor-window-width) - max(40px, (100vw - 1240px) / 2));
  width: var(--razor-window-width);
  height: calc(var(--razor-window-width) / 1.55 + var(--razor-headroom));
  container-type: inline-size;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 1439px) {
  .hero-tools-window--razor { display: none; }
}
/* Idle float so the razor stays alive between blade moves. Only transform is animated (it runs
   on the compositor). No filter or shadow on the window: a filter over a playing video is redone
   on every frame. */
@keyframes razor-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1.2deg); }
}
.hero-tools-window--razor {
  animation: razor-float 6.5s ease-in-out infinite;
  will-change: transform;
}
/* Glint (razor and scissors): hero-tools-sync.js redraws a small box of the current video frame
   on this canvas, keeps only a narrow moving band of it, and the canvas is added on top of the
   video, so the highlight always sits on the metal, whatever the pose of that frame is. */
.hero-tools-glint {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}
.hero-tools-video--razor {
  top: calc(var(--razor-headroom) - 185cqw);
  left: -350%;
  width: 450%;
}
@media (max-width: 760px) {
  .hero-tools-window--scissors {
    top: 6px;
    right: 36px;
    left: auto;
    width: 125px;
    height: 95px;
    transform: rotate(142deg);
    transform-origin: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%);
    mask-image: linear-gradient(to right, transparent 0%, #000 9%);
  }
  .hero-tools-video--scissors { top: 4px; left: 0; width: 274%; }
  .hero-tools-window--razor {
    top: 25px;
    right: 2px;
    left: auto;
    width: 104px;
    height: 100px;
    aspect-ratio: auto;
    container-type: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-tools-video--razor {
    top: -140px;
    left: -325px;
    width: 420px;
  }
}
@media (max-width: 350px) {
  .hero-tools-window--scissors { transform: rotate(142deg) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tools-window { display: none; }
}

/* Restrained finish for the booking links. */
.compact .btn--scissor {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 200px;
  min-width: 200px;
  min-height: 52px;
  padding: 8px 14px 8px 20px;
  border-radius: 8px;
  border-color: var(--bronze);
  background: linear-gradient(112deg, #c5a078 0%, #c9a77f 48%, #bd9569 100%);
  color: #14120f;
}
.compact .btn--scissor .btn__label {
  flex: 0 0 auto;
  font-size: 16px;
  white-space: nowrap;
}
.compact .header__book.btn--scissor {
  display: inline-flex;
  justify-content: center;
  width: 160px;
  min-width: 160px;
  min-height: 44px;
  gap: 0;
  padding: 8px 12px;
  font-size: 14px;
}
.compact .header__book.btn--scissor .btn__label { font-size: 15px; }
.compact .hero__actions .btn--scissor {
  position: relative;
  justify-content: center;
}
.compact .hero__actions .btn--scissor .btn__label {
  font-size: 18px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .compact .header__book.btn--scissor { display: none; }
  .compact .hero__actions .btn--scissor {
    flex: 0 0 200px;
    width: 200px;
    min-width: 200px;
    padding-inline: 14px;
    gap: 16px;
  }
}
@media (max-width: 350px) {
  .compact .hero__actions { column-gap: 8px; }
  .compact .hero__actions .btn--scissor {
    flex: 0 0 146px;
    justify-content: center;
    width: 146px;
    min-width: 0;
    min-height: 48px;
    gap: 6px;
    padding-inline: 10px;
  }
  .compact .hero__actions .btn--scissor .btn__label { font-size: 15.5px; }
}

/* Shared graphite base. Section light stays local and fades into this same base. */
main {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}
#prices, #team, #about, #works, #contacts { background-color: transparent; }
/* The glows of the prices and team sections are drawn on a layer that reaches past the section by
   --glow-reach above and below, so each one fades out inside the neighbouring section instead of
   being cut at the border (no seams). The hero is transparent, so the prices glow carries on up
   into it. Neighbouring glows simply add up. The mask keeps the part that spills into the
   neighbours softer than the part inside the section. */
#prices, #team { position: relative; --glow-reach: 340px; }
#prices::before, #team::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--glow-reach));
  bottom: calc(-1 * var(--glow-reach));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .35), #000 var(--glow-reach), #000 calc(100% - var(--glow-reach)), rgb(0 0 0 / .35));
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / .35), #000 var(--glow-reach), #000 calc(100% - var(--glow-reach)), rgb(0 0 0 / .35));
}
/* Prices glow: warm orange in the two corners (top right, bottom left), matched to the reference
   screenshot by sampling its edge profiles; the centre of the section stays plain graphite. */
#prices::before {
  background-image:
    radial-gradient(ellipse 42% 270px at 100% var(--glow-reach), rgb(217 150 80 / .40) 0%, rgb(217 150 80 / .36) 12%, rgb(217 150 80 / .30) 37%, rgb(217 150 80 / .12) 62%, rgb(217 150 80 / .03) 87%, transparent 100%),
    radial-gradient(ellipse 33% 351px at 0% calc(100% - var(--glow-reach) - 30px), rgb(217 150 80 / .31) 0%, rgb(217 150 80 / .24) 30%, rgb(217 150 80 / .14) 50%, rgb(217 150 80 / .048) 75%, rgb(217 150 80 / .02) 90%, transparent 100%);
}
/* Team glow: lifted to the same warm orange and strength as the prices glow. */
#team::before {
  background-image: radial-gradient(ellipse 74% 151px at 50% calc(var(--glow-reach) + 130px), rgb(217 150 80 / .36) 0%, rgb(217 150 80 / .25) 28%, rgb(217 150 80 / .11) 62%, rgb(217 150 80 / .032) 82%, transparent 100%);
}
/* Between the works and the contacts: a thin warm line across the whole screen (instead of the
   old blurred glow band), brightest in the middle and softer towards the edges, with a faint
   warm halo around it. */
#works { position: relative; }
#works::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(232 192 120 / .28) 0%, rgb(232 192 120 / .9) 28%, rgb(246 212 146) 50%, rgb(232 192 120 / .9) 72%, rgb(232 192 120 / .28) 100%);
  pointer-events: none;
}
#works::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 28px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(217 166 95 / .2) 0%, rgb(217 166 95 / .08) 50%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 760px) {
  #prices::before {
    background-image:
      radial-gradient(ellipse 42% 333px at 100% var(--glow-reach), rgb(217 150 80 / .40) 0%, rgb(217 150 80 / .36) 12%, rgb(217 150 80 / .30) 37%, rgb(217 150 80 / .12) 62%, rgb(217 150 80 / .03) 87%, transparent 100%),
      radial-gradient(ellipse 33% 432px at 0% calc(100% - var(--glow-reach) - 36px), rgb(217 150 80 / .31) 0%, rgb(217 150 80 / .24) 30%, rgb(217 150 80 / .14) 50%, rgb(217 150 80 / .048) 75%, rgb(217 150 80 / .02) 90%, transparent 100%);
  }
  #team::before {
    background-image: radial-gradient(ellipse 90% 155px at 50% calc(var(--glow-reach) + 57px), rgb(217 150 80 / .36) 0%, rgb(217 150 80 / .25) 28%, rgb(217 150 80 / .11) 62%, rgb(217 150 80 / .032) 82%, transparent 100%);
  }
}