/* Fonts: Manrope and Playfair Display (SIL OFL 1.1, via Fontsource), served from this site, never from a CDN.
   Neither font has the tenge sign, so "₸" is drawn by the next family in the stack (system-ui has it). */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(fonts/playfair-display-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(fonts/playfair-display-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

:root {
  --bg: #1d1b1a;
  --card: #272422;
  --line: #3a3531;
  --text: #f2ebe3;
  --muted: #a79f96;
  --gold: #b89a68;
  --gold-ink: #1d1b1a;
  --radius: 5px;
  --wrap: 1080px;
  --font-body: 'Manrope Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Playfair Display Variable', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: 88px;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-body);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(29, 27, 26, .94);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.brand { font-family: var(--font-head); font-weight: 600; font-size: 22px; text-decoration: none; }
.nav { display: none; gap: 28px; }
.nav a { padding: 14px 0; color: var(--muted); font-size: 15px; text-decoration: none; }
.nav a:hover { color: var(--text); }

/* Hero */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(86vh, 720px);
  min-height: min(86svh, 720px);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2d2925 0%, var(--bg) 70%);
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(29, 27, 26, .96) 0%, rgba(29, 27, 26, .6) 50%, rgba(29, 27, 26, .3) 100%);
}
.hero-inner { position: relative; padding: 96px 0 48px; }
.hero-kicker { margin: 0 0 8px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hero-title { margin: 0 0 24px; font-family: var(--font-head); font-weight: 600; font-size: clamp(48px, 14vw, 96px); line-height: 1; }
.hero-note { margin: 14px 0 0; color: var(--muted); font-size: 14px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--radius);
  font-size: 15px; font-weight: 800; text-decoration: none;
}
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { filter: brightness(1.08); }
.btn-outline { border: 1px solid var(--gold); color: var(--gold); }
.btn-outline:hover { background: rgba(184, 154, 104, .12); }

.sticky-cta {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  border-radius: var(--radius);
  background: var(--gold); color: var(--gold-ink);
  font-weight: 800; text-decoration: none;
}
/* When scripts run, the sticky button stays hidden until the hero button has scrolled away. The rule is gated by
   `scripting: enabled`, not by a class the script adds: a class added by a deferred script arrives after the first
   paint and the button would flash and slide away. Without JS, or in a browser without this media feature, the
   button simply stays visible. */
@media (scripting: enabled) {
  .sticky-cta { transform: translateY(160%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .25s ease; }
}

/* Sections */
.section { padding: 56px 0; border-top: 1px solid var(--line); }
.section-title { margin: 0 0 28px; font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 6vw, 40px); }

.masters { display: grid; align-items: start; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.master { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.master-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; background: var(--line); }
.master-initial { display: grid; place-items: center; font-family: var(--font-head); font-size: 72px; color: var(--gold); }
.master-body { padding: 20px; }
.master-name { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 600; }
.master-specialty { margin: 2px 0 0; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.master-hours { margin: 10px 0 16px; color: var(--muted); font-size: 14px; }

.services { margin: 0; padding: 0; list-style: none; }
.service { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.service-name { font-weight: 600; }
.service-duration { grid-column: 1; color: var(--muted); font-size: 14px; }
.service-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--gold); font-weight: 700; white-space: nowrap; }

.gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
.work-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.link-more { display: inline-block; margin-top: 20px; padding: 12px 0; color: var(--gold); font-weight: 700; }

.contact-address { margin: 0 0 20px; font-size: 18px; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.footer { padding: 28px 0 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .nav { display: flex; }
  .hero-inner { padding-bottom: 72px; }
  .gallery { gap: 12px; grid-template-columns: repeat(3, 1fr); }
  .sticky-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-cta, .sticky-cta.is-visible { transition: none; }
}