@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');
:root { --ink:#11110f; --muted:#64645f; --ground:#ffffff; --panel:#f4f4ef; --line:#d7d7d0; --accent:#11110f; --dark:#ffffff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ground); color:var(--ink); font:16px/1.55 Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; } button { cursor:pointer; }
.skip-link { position:fixed; left:16px; top:-80px; background:var(--accent); color:#10100e; padding:10px 14px; z-index:99; }.skip-link:focus { top:16px; }
.site-header { height:76px; max-width:1320px; margin:auto; padding:0 34px; display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); }.brand { font-weight:800; letter-spacing:.08em; }.site-header nav { display:flex; gap:30px; color:var(--muted); font-size:19px; line-height:1; font-weight:800; }.site-header nav a:hover,.socials a:hover,footer a:hover { color:var(--accent); }.header-cta { border:1px solid var(--accent); color:var(--accent); padding:8px 14px; font-size:13px; }
.hero,.section,footer { max-width:1320px; margin:auto; padding-left:34px; padding-right:34px; }.hero { min-height:670px; display:grid; grid-template-columns:1fr minmax(320px, .8fr); align-items:stretch; border-bottom:1px solid var(--line); }.hero-copy { align-self:center; max-width:720px; padding:64px 55px 64px 0; }.eyebrow { margin:0 0 16px; font:500 11px/1.25 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }.hero h1 { font-size:clamp(44px,6.1vw,88px); line-height:.99; letter-spacing:0; margin:0; max-width:700px; }.hero-lead { font-size:18px; line-height:1.6; color:var(--muted); max-width:600px; margin:28px 0 34px; }.actions { display:flex; gap:12px; flex-wrap:wrap; }.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:12px 19px; font-size:14px; font-weight:700; }.button-primary { background:var(--accent); color:#ffffff; border:1px solid var(--accent); }.button-secondary { border:1px solid var(--line); }.hero-portrait { margin:0; min-height:100%; position:relative; overflow:hidden; border-left:1px solid var(--line); }.hero-portrait img { display:block; height:100%; width:100%; object-fit:cover; filter:grayscale(.35) contrast(1.06); }.hero-portrait figcaption { position:absolute; left:18px; bottom:18px; font:11px 'DM Mono',monospace; color:#fff; }
.section { padding-top:118px; padding-bottom:118px; }.intro { max-width:930px; margin-left:max(0px, calc((100vw - 1320px)/2)); }.intro h2,.section h2 { margin:0; font-size:clamp(32px,4.2vw,59px); line-height:1.06; max-width:920px; }.intro > p { max-width:740px; margin:30px 0 0; font-size:19px; color:var(--muted); }.intro > p + p { margin-top:16px; }.section-heading > p:last-child { max-width:580px; color:var(--muted); margin:20px 0 0; }
.audience { border-top:1px solid var(--line); }.audience-grid { list-style:none; display:grid; padding:0; margin:44px 0 0; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.audience-grid li { padding:25px 18px; min-height:165px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:23px; line-height:1.25; display:flex; align-items:flex-end; }
.directions { background:var(--panel); max-width:none; padding-left:max(34px, calc((100vw - 1320px)/2 + 34px)); padding-right:max(34px, calc((100vw - 1320px)/2 + 34px)); }.direction-list { margin-top:48px; border-top:1px solid var(--line); }.direction { border-bottom:1px solid var(--line); transition:background .25s ease; }.direction-toggle { color:inherit; border:0; background:none; padding:26px 0; width:100%; text-align:left; display:grid; grid-template-columns:minmax(130px,.8fr) minmax(180px,1fr) auto; align-items:baseline; gap:20px; }.direction-en { color:#989891; font-size:clamp(20px,3vw,38px); font-weight:800; letter-spacing:.04em; }.direction-ru { font-size:clamp(27px,4vw,54px); font-weight:700; }.toggle-mark { font-size:28px; color:var(--accent); transition:transform .25s; }.direction.is-active .toggle-mark { transform:rotate(45deg); }.direction-body { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(180px,1fr) auto; gap:20px; max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .25s ease, padding .3s ease; }.direction.is-active .direction-body { max-height:640px; opacity:1; padding:0 0 32px; }.direction-body p { margin:0; grid-column:2; max-width:580px; font-size:18px; color:#272724; }.direction-media video,.direction-media iframe { grid-column:3; grid-row:1; width:min(380px,28vw); aspect-ratio:16 / 9; height:auto; max-height:220px; border:0; border-radius:8px; background:#000; }
.equipment { border-bottom:1px solid var(--line); }.equipment-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:46px; }.equipment-card { border:0; background:var(--dark); color:var(--ink); min-height:205px; text-align:left; padding:22px; display:flex; flex-direction:column; align-items:flex-start; }.equipment-card:hover { background:#ecece6; }.equipment-card span,.equipment-card i { color:var(--muted); font-size:12px; font-style:normal; }.equipment-card strong { font-size:23px; line-height:1.15; margin-top:32px; }.equipment-card i { margin-top:auto; color:var(--accent); }.equipment-note { max-width:700px; color:var(--muted); margin:24px 0 0; }
.teacher { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; border-bottom:1px solid var(--line); }.teacher-copy { max-width:590px; font-size:20px; color:#272724; }.teacher-copy p:first-child { margin-top:0; }.socials { display:flex; flex-wrap:wrap; gap:18px; margin-top:28px; font:13px 'DM Mono',monospace; color:var(--accent); }
.prices { background:var(--panel); max-width:none; padding-left:max(34px, calc((100vw - 1320px)/2 + 34px)); padding-right:max(34px, calc((100vw - 1320px)/2 + 34px)); }.price-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:46px; gap:16px; }.price-grid article { min-height:245px; border:1px solid var(--line); padding:24px; display:flex; flex-direction:column; }.price-grid h3 { margin:0; font-size:16px; }.price { margin:28px 0 4px; color:var(--accent); font-size:33px; font-weight:800; }.price-grid article > p:last-of-type { color:var(--muted); font-size:14px; }.price-grid a { margin-top:auto; color:var(--accent); font-size:13px; font-weight:700; }
.results { border-bottom:1px solid var(--line); }.results ul { list-style:none; padding:0; margin:44px 0 0; max-width:900px; }.results li { border-top:1px solid var(--line); padding:17px 0; font-size:19px; }.results li:last-child { border-bottom:1px solid var(--line); }.results li::before { content:'/'; color:var(--accent); margin-right:12px; }.faq { max-width:960px; margin-left:max(0px, calc((100vw - 1320px)/2)); }.faq details { border-top:1px solid var(--line); padding:19px 0; }.faq details:last-child { border-bottom:1px solid var(--line); }.faq summary { cursor:pointer; font-size:18px; font-weight:700; }.faq details p { max-width:680px; color:var(--muted); margin:15px 0 4px; }
.request { background:#f4f4ef; color:#11110f; max-width:none; padding-left:max(34px, calc((100vw - 1320px)/2 + 34px)); padding-right:max(34px, calc((100vw - 1320px)/2 + 34px)); display:grid; grid-template-columns:1fr 1fr; gap:90px; }.request .eyebrow { color:#11110f; }.request h2 { max-width:550px; }.request > div > p:last-child { max-width:450px; }.request form { display:grid; gap:15px; max-width:520px; }.request label { display:grid; gap:7px; font-size:13px; font-weight:700; }.request input:not([type=checkbox]),textarea { width:100%; border:1px solid #b7b7ae; background:#ffffff; padding:12px; border-radius:0; color:#171710; }.request textarea { resize:vertical; }.request label span { font-weight:400; }.consent { grid-template-columns:auto 1fr; align-items:start; font-weight:400!important; }.consent input { margin-top:4px; }.request .button { margin-top:5px; background:#11110f; color:#ffffff; border-color:#11110f; }.form-status { min-height:24px; margin:0; font-size:14px; }.form-status.is-error { color:#a21d1d; }.form-status.is-success { color:#11110f; }
footer { min-height:96px; display:flex; flex-wrap:wrap; align-items:center; gap:13px 28px; color:var(--muted); font:12px 'DM Mono',monospace; }.dialog-close { position:absolute; right:16px; top:12px; background:none; color:var(--ink); border:0; font-size:32px; }.dialog-close:focus-visible,.direction-toggle:focus-visible,.equipment-card:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }dialog { max-width:610px; border:1px solid var(--line); background:#ffffff; color:var(--ink); padding:42px; }dialog::backdrop { background:rgba(0,0,0,.72); }dialog h2 { margin:0 0 18px; font-size:34px; }dialog p { color:#272724; }dialog #dialog-skills { color:var(--accent); }
@media (max-width:800px) { .site-header { padding:0 18px; height:65px; }.site-header nav { display:none; }.hero,.section,footer { padding-left:18px; padding-right:18px; }.hero { grid-template-columns:1fr; min-height:auto; }.hero-copy { padding:68px 0 40px; }.hero h1 { font-size:50px; }.hero-portrait { min-height:375px; border-left:0; border-top:1px solid var(--line); }.section { padding-top:76px; padding-bottom:76px; }.intro { margin-left:0; }.intro > p,.direction-body p { font-size:17px; }.audience-grid { grid-template-columns:1fr 1fr; }.audience-grid li { min-height:100px; }.directions,.prices,.request { padding-left:18px; padding-right:18px; }.direction-toggle { grid-template-columns:1fr auto; gap:8px; }.direction-en { grid-column:1; grid-row:1; font-size:20px; }.direction-ru { grid-column:1; grid-row:2; }.toggle-mark { grid-column:2; grid-row:1 / span 2; }.direction-body { display:block; }.direction.is-active .direction-body { padding-bottom:25px; }.direction-media video,.direction-media iframe { width:100%; max-height:none; margin-top:20px; }.equipment-grid,.price-grid { grid-template-columns:1fr 1fr; }.teacher,.request { grid-template-columns:1fr; gap:35px; }.teacher-copy { font-size:18px; }.faq { margin-left:0; }.request { padding-top:76px; padding-bottom:76px; }.request h2 { font-size:42px; }.hero-lead { font-size:17px; } }
@media (max-width:440px) { .header-cta { padding:7px 10px; }.brand { font-size:14px; }.equipment-grid,.price-grid { grid-template-columns:1fr; }.audience-grid { grid-template-columns:1fr; }.hero h1 { font-size:44px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
.js .section, .js .hero-portrait, .js .equipment-card { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.js .is-visible { opacity:1; transform:translateY(0); }
.equipment-card { transition:background .2s ease, opacity .55s ease, transform .55s ease; }

/* Compact hero layout: text and portrait always occupy separate columns. */
.site-header { height:228px; }
.brand { display:flex; align-items:center; width:425px; height:210px; }
.brand img { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
.hero { min-height:0; grid-template-columns:minmax(0, 1.08fr) minmax(330px, .92fr); column-gap:clamp(36px, 6vw, 104px); padding-top:48px; padding-bottom:48px; }
.hero-copy { padding:42px 0; }
.hero-portrait { width:100%; max-width:470px; min-height:0; height:auto; aspect-ratio:1.08 / 1; justify-self:end; align-self:center; border:0; background:#f4f4ef; }
.hero-portrait img { object-fit:contain; object-position:center; filter:grayscale(.12) brightness(1.18) contrast(.98); }
.hero-portrait figcaption { display:none; }
@media (max-width:800px) {
  .site-header { height:136px; }
  .brand { width:245px; height:121px; }
  .header-cta { display:none; }
  .hero { grid-template-columns:1fr; gap:26px; padding-top:26px; padding-bottom:38px; }
  .hero-copy { padding:28px 0 0; }
  .hero-portrait { width:min(100%, 460px); justify-self:start; aspect-ratio:1 / .95; border:0; }
}
.back-to-top { position:fixed; right:22px; bottom:22px; z-index:10; width:46px; height:46px; border:1px solid #11110f; background:#ffffff; color:#11110f; font-size:24px; line-height:1; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease; }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover { background:#11110f; color:#ffffff; }
@media (max-width:800px) { .back-to-top { right:16px; bottom:16px; } }

.hero-location { font-weight:800; }

.price-label { font-weight:800; }

.teacher-aside .socials { flex-direction:column; align-items:flex-start; gap:10px; margin-top:28px; }

@media (min-width:801px) and (max-width:1150px) { .site-header nav { gap:20px; font-size:17px; } }

.equipment-card { position:relative; overflow:visible; }
.equipment-preview { position:absolute; z-index:3; left:16px; right:16px; bottom:calc(100% + 14px); height:168px; display:block; overflow:hidden; border:1px solid #11110f; background:#ffffff; box-shadow:7px 7px 0 #11110f; opacity:0; pointer-events:none; transform:translateY(12px) scale(.97); transition:opacity .2s ease, transform .2s ease; }
.equipment-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.equipment-card:hover .equipment-preview, .equipment-card:focus-visible .equipment-preview { opacity:1; transform:translateY(0) scale(1); }
@media (hover:none) { .equipment-preview { display:none; } }

.hero h1, .section h2, .intro h2, .teacher h2, .request h2, .direction-ru, .direction-en { font-family:Oswald, Arial Narrow, Arial, sans-serif; font-weight:700; }
.hero h1, .section h2, .intro h2, .teacher h2, .request h2 { text-transform:uppercase; }

.hero h1, .section h2, .intro h2, .teacher h2, .request h2, .direction-ru, .direction-en { font-weight:500; }
.site-header nav, .hero-location, .price-label { font-weight:600; }
.price { font-weight:600; }

.eyebrow { font-size:16.5px; }
.hero h1 { font-size:clamp(22px, 3.05vw, 44px); }
.section h2, .intro h2, .teacher h2, .request h2 { font-size:clamp(16px, 2.1vw, 30px); }
.direction-en { font-size:clamp(10px, 1.5vw, 19px); }
.direction-ru { font-size:clamp(14px, 2vw, 27px); }
@media (max-width:800px) { .hero h1 { font-size:25px; } .request h2 { font-size:21px; } }

.hero-lead,
.intro > p,
.section-heading > p:last-child,
.equipment-note,
.teacher-copy,
.price-grid article > p:last-of-type,
.faq details p,
.request > div > p:last-child { font-weight:500; }
@media (max-width:800px) {
  .equipment-preview {
    display:block;
    position:static;
    width:100%;
    height:154px;
    margin-top:22px;
    border:0;
    box-shadow:none;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
}
@media (max-width:800px) {
  .audience-grid { display:block; margin-top:30px; border:0; }
  .audience-grid li { display:block; position:relative; min-height:0; padding:0 0 16px 22px; border:0; font-size:18px; line-height:1.35; }
  .audience-grid li::before { content:'•'; position:absolute; left:0; color:var(--accent); }
}
@media (max-width:800px) {
  .directions .section-heading .eyebrow { font-size:15px; }
  .directions .section-heading h2 { font-size:31px; }
  .directions .direction-en { font-size:21px; }
  .directions .direction-ru { font-size:27px; line-height:1.08; }
}