/* =========================================================
   GIRLY HIP-HOP — mockup stylesheet
   Design system source of truth: hiphop-dance-studio-ui-kit.html
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* colour */
  --bg:#252428;
  --deep:#1B1A1E;
  --surface:#39363E;
  --wine:#7F1F32;
  --wine-hover:#98253B;
  --wine-deep:#5B1424;
  --powder:#E8B8C2;
  --powder-light:#F5DDE2;
  --white:#F8F7F8;
  --text:#D3D0D5;
  /* UI kit says #9E99A2; nudged up because the sheet got more transparent and
     the field more colourful — at #9E99A2 metadata fell to 4.3:1, under AA */
  --muted:#A8A3AC;
  --line:rgba(248,247,248,.12);
  --strong:rgba(248,247,248,.24);
  --ink:#2A1119;            /* text on powder */

  /* spacing step 8 */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --gutter:clamp(20px,4vw,48px);
  --sec-y:clamp(76px,8.5vw,136px);
  --frame:clamp(12px,3.6vw,64px);   /* margin around the glass sheet */
  /* Wide enough that on a 1920 screen the content runs to the sheet's edges
     (sheet ≈ 1792) instead of sitting in a column with ~220px of empty glass
     either side; on ultrawide it caps and centres again. */
  --shell:1840px;
  --rail:76px;

  /* radius */
  --r1:14px; --r2:22px; --r3:32px; --r4:40px; --pill:999px;

  /* type */
  --display:"Archivo Black",Impact,sans-serif;
  --head:"Manrope",system-ui,sans-serif;
  --ui:"Inter",system-ui,sans-serif;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.22s;
  --t-med:.45s;
  --t-slow:.9s;
}

/* Where the COUNT rail sits on the sheet, the gutter is its footprint — the
   rail's inset from the sheet edge (see .rail), its 34px width and a 24px
   gap — on both sides, so full-width content never runs under the numbers
   and the page stays symmetric. ≈75px at 1440, 81 at 1920. At ≤1280 the
   rail moves out into the frame (right:10px), so the plain gutter is enough. */
@media (min-width:1281px){
  :root{--gutter:calc(clamp(10px,1.2vw,26px) + 58px)}
}

/* The cursor: a small neon cat's paw, tilted mid-step — powder outline
   with a soft glow like the COUNT 2 chart, turning wine over anything
   clickable. One pointer, not the system arrow plus a follower dot. A dark
   rim under the tube keeps it readable on the powder buttons too. Hotspot
   at the centre of the paw (it has no tip). Mouse/trackpad only; drag areas
   keep the system grab hand, which says something a paw can't. */
:root{--cur:auto;--cur-link:pointer}
@media (hover:hover) and (pointer:fine){
  :root{
    --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='1' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(16 16) scale(.86) rotate(-16) translate(-16 -16)'%3E%3Cpath d='M16 15.2c-3.9 0-7.5 3.6-7.5 7 0 2.5 2 3.9 4 3.9 1.3 0 2.3-.7 3.5-.7s2.2.7 3.5.7c2 0 4-1.4 4-3.9 0-3.4-3.6-7-7.5-7z' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='7.1' cy='14.2' rx='2.7' ry='3.3' transform='rotate(-24 7.1 14.2)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='11.9' cy='8.6' rx='2.8' ry='3.5' transform='rotate(-8 11.9 8.6)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='20.1' cy='8.6' rx='2.8' ry='3.5' transform='rotate(8 20.1 8.6)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='24.9' cy='14.2' rx='2.7' ry='3.3' transform='rotate(24 24.9 14.2)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M16 15.2c-3.9 0-7.5 3.6-7.5 7 0 2.5 2 3.9 4 3.9 1.3 0 2.3-.7 3.5-.7s2.2.7 3.5.7c2 0 4-1.4 4-3.9 0-3.4-3.6-7-7.5-7z' fill='rgba(27,26,30,.55)' stroke='%23E8B8C2' stroke-width='1.6'/%3E%3Cellipse cx='7.1' cy='14.2' rx='2.7' ry='3.3' transform='rotate(-24 7.1 14.2)' fill='rgba(27,26,30,.55)' stroke='%23E8B8C2' stroke-width='1.6'/%3E%3Cellipse cx='11.9' cy='8.6' rx='2.8' ry='3.5' transform='rotate(-8 11.9 8.6)' fill='rgba(27,26,30,.55)' stroke='%23E8B8C2' stroke-width='1.6'/%3E%3Cellipse cx='20.1' cy='8.6' rx='2.8' ry='3.5' transform='rotate(8 20.1 8.6)' fill='rgba(27,26,30,.55)' stroke='%23E8B8C2' stroke-width='1.6'/%3E%3Cellipse cx='24.9' cy='14.2' rx='2.7' ry='3.3' transform='rotate(24 24.9 14.2)' fill='rgba(27,26,30,.55)' stroke='%23E8B8C2' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 16,auto;
    --cur-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='1' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(16 16) scale(.86) rotate(-16) translate(-16 -16)'%3E%3Cpath d='M16 15.2c-3.9 0-7.5 3.6-7.5 7 0 2.5 2 3.9 4 3.9 1.3 0 2.3-.7 3.5-.7s2.2.7 3.5.7c2 0 4-1.4 4-3.9 0-3.4-3.6-7-7.5-7z' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='7.1' cy='14.2' rx='2.7' ry='3.3' transform='rotate(-24 7.1 14.2)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='11.9' cy='8.6' rx='2.8' ry='3.5' transform='rotate(-8 11.9 8.6)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='20.1' cy='8.6' rx='2.8' ry='3.5' transform='rotate(8 20.1 8.6)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cellipse cx='24.9' cy='14.2' rx='2.7' ry='3.3' transform='rotate(24 24.9 14.2)' fill='none' stroke='%231B1A1E' stroke-opacity='.7' stroke-width='3.4'/%3E%3Cg filter='url(%23g)'%3E%3Cpath d='M16 15.2c-3.9 0-7.5 3.6-7.5 7 0 2.5 2 3.9 4 3.9 1.3 0 2.3-.7 3.5-.7s2.2.7 3.5.7c2 0 4-1.4 4-3.9 0-3.4-3.6-7-7.5-7z' fill='%2398253B' stroke='%23F5DDE2' stroke-width='1.6'/%3E%3Cellipse cx='7.1' cy='14.2' rx='2.7' ry='3.3' transform='rotate(-24 7.1 14.2)' fill='%2398253B' stroke='%23F5DDE2' stroke-width='1.6'/%3E%3Cellipse cx='11.9' cy='8.6' rx='2.8' ry='3.5' transform='rotate(-8 11.9 8.6)' fill='%2398253B' stroke='%23F5DDE2' stroke-width='1.6'/%3E%3Cellipse cx='20.1' cy='8.6' rx='2.8' ry='3.5' transform='rotate(8 20.1 8.6)' fill='%2398253B' stroke='%23F5DDE2' stroke-width='1.6'/%3E%3Cellipse cx='24.9' cy='14.2' rx='2.7' ry='3.3' transform='rotate(24 24.9 14.2)' fill='%2398253B' stroke='%23F5DDE2' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 16,pointer;
  }
}
html{cursor:var(--cur)}
a,label,summary,[role="button"]{cursor:var(--cur-link)}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}

/* A modal <dialog> makes the page inert but not still: the wheel kept scrolling
   the page behind the booking form, so closing it dropped you somewhere else.
   scrollbar-gutter above stops the layout jumping sideways while locked. */
html:has(dialog[open]),
html:has(#menu:not([hidden])){overflow:hidden}

body{
  margin:0;
  background:var(--deep);
  color:var(--text);
  font:400 16px/1.65 var(--ui);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   AMBIENT FIELD + GLASS SHEET
   Four slow blobs sit on a fixed layer behind everything. The page content
   rides on a frosted sheet that covers them; the margin around the sheet is
   where you see them unfrosted, which is what makes the glass read as glass.
   ========================================================= */
.aurora{
  position:fixed;inset:0;z-index:-3;
  overflow:hidden;pointer-events:none;
  background:var(--deep);
}
/* Each blob is placed by its CENTRE, so the light actually reaches the margin
   the sheet leaves open.
   Hues are spread wide by request; luminance stays low on purpose, otherwise
   the dark editorial stage turns into a candy gradient.
   The alpha eases down through several stops and reaches zero at 82% of the
   radius: a two-stop ramp to `transparent 70%` has a slope break there, and
   the eye reads it as a disc with an edge. */
.aurora i{
  position:absolute;display:block;
  border-radius:50%;
  filter:blur(46px);
  will-change:transform;
}
.aurora i:nth-child(1){          /* wine — the brand anchor */
  width:70vmax;height:70vmax;left:calc(6vw - 35vmax);top:calc(20vh - 35vmax);
  background:radial-gradient(circle,
    rgba(163,32,64,.88),rgba(163,32,64,.55) 30%,rgba(163,32,64,.28) 50%,
    rgba(163,32,64,.1) 66%,rgba(163,32,64,0) 82%);
  animation:drift-a 27s ease-in-out infinite;
}
.aurora i:nth-child(2){          /* powder — --powder #E8B8C2 from the design system */
  width:58vmax;height:58vmax;left:calc(97vw - 29vmax);top:calc(14vh - 29vmax);
  background:radial-gradient(circle,
    rgba(232,184,194,.42),rgba(232,184,194,.26) 30%,rgba(232,184,194,.13) 50%,
    rgba(232,184,194,.045) 66%,rgba(232,184,194,0) 82%);
  animation:drift-b 34s ease-in-out infinite;
}
.aurora i:nth-child(3){          /* powder */
  width:46vmax;height:46vmax;left:calc(76vw - 23vmax);top:calc(96vh - 23vmax);
  background:radial-gradient(circle,
    rgba(236,168,186,.4),rgba(236,168,186,.25) 30%,rgba(236,168,186,.12) 50%,
    rgba(236,168,186,.04) 66%,rgba(236,168,186,0) 82%);
  animation:drift-c 31s ease-in-out infinite;
}
.aurora i:nth-child(4){          /* teal */
  width:62vmax;height:62vmax;left:calc(4vw - 31vmax);top:calc(90vh - 31vmax);
  background:radial-gradient(circle,
    rgba(26,94,116,.72),rgba(26,94,116,.45) 30%,rgba(26,94,116,.23) 50%,
    rgba(26,94,116,.08) 66%,rgba(26,94,116,0) 82%);
  animation:drift-d 24s ease-in-out infinite;
}
.aurora i:nth-child(5){          /* coral, the one that sweeps across the middle */
  width:50vmax;height:50vmax;left:calc(48vw - 25vmax);top:calc(52vh - 25vmax);
  background:radial-gradient(circle,
    rgba(198,58,74,.6),rgba(198,58,74,.37) 30%,rgba(198,58,74,.19) 50%,
    rgba(198,58,74,.065) 66%,rgba(198,58,74,0) 82%);
  animation:drift-e 38s ease-in-out infinite;
}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(26vw,14vh,0) scale(1.2)}
  50%{transform:translate3d(12vw,34vh,0) scale(.86)}
  75%{transform:translate3d(-8vw,18vh,0) scale(1.08)}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  30%{transform:translate3d(-28vw,26vh,0) scale(1.24)}
  60%{transform:translate3d(-10vw,-14vh,0) scale(.9)}
  85%{transform:translate3d(-20vw,8vh,0) scale(1.1)}
}
@keyframes drift-c{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  35%{transform:translate3d(-30vw,-26vh,0) scale(1.3)}
  70%{transform:translate3d(-12vw,-44vh,0) scale(.88)}
}
@keyframes drift-d{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  28%{transform:translate3d(22vw,-24vh,0) scale(1.16)}
  55%{transform:translate3d(44vw,-10vh,0) scale(.84)}
  80%{transform:translate3d(16vw,-34vh,0) scale(1.12)}
}
@keyframes drift-e{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(-32vw,-18vh,0) scale(1.18)}
  50%{transform:translate3d(18vw,-30vh,0) scale(.82)}
  75%{transform:translate3d(30vw,16vh,0) scale(1.14)}
}

.sheet{
  position:relative;z-index:1;
  margin:var(--frame);
  border-radius:clamp(18px,2.6vw,40px);
  border:1px solid rgba(248,247,248,.13);
  background:rgba(27,26,30,.6);
  /* desaturate and blur, but don't lift: raising brightness turns the graphite
     stage into mauve and the whole dark editorial read goes with it */
  backdrop-filter:blur(34px) saturate(.8);
  -webkit-backdrop-filter:blur(34px) saturate(.8);
  /* clip, not hidden: `hidden` makes the sheet a scroll container, and then
     position:sticky inside it (the pinned method stage) never sticks */
  overflow:hidden;
  overflow:clip;
  /* no drop shadow: its spread blankets the very margin where the field shows */
  box-shadow:inset 0 1px 0 rgba(248,247,248,.07);
}
/* fogged, not polished: a fine grain plus a breath of light on the top edge */
.sheet::before{
  content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sheet::after{
  content:"";position:absolute;inset:0 0 auto;height:260px;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(248,247,248,.07),transparent 70%);
}

/* no backdrop-filter (older Firefox, some Android): lean on opacity instead */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sheet{background:rgba(27,26,30,.93)}
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:var(--cur-link)}

:focus-visible{
  outline:2px solid var(--powder);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip{
  position:fixed;top:-100px;left:var(--gutter);z-index:100;
  padding:12px 18px;border-radius:var(--pill);
  background:var(--powder);color:var(--ink);font-weight:700;
  transition:top var(--t-fast);
}
.skip:focus{top:14px}

.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 3. TYPE ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.86;
  color:var(--white);
  margin:0;
  text-wrap:balance;
}
.display--md{font-size:clamp(38px,6.4vw,92px)}
.display--lg{font-size:clamp(50px,9.4vw,146px)}

/* Archivo Black ships Latin only — Cyrillic display runs on Manrope 800
   so headings never fall back to a system face. */
.display--ru{
  font-family:var(--head);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:.94;
}

.tx-powder{color:var(--powder)}
.tx-outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--strong);
  text-stroke:1.5px var(--strong);
}

.kicker{
  margin:0;
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}

.lead{
  margin:0 0 var(--s3);
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(19px,2.1vw,26px);
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--white);
}

.body{margin:0 0 var(--s3);font-size:16px;line-height:1.7}
/* columns now grow with the sheet; reading lines stop at a comfortable length */
.body p{margin:0 0 12px;max-width:64ch}
.body p:last-child{margin-bottom:0}
.body b{color:var(--white);font-weight:600}

/* count marker — the page is one 8-count */
.count{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 var(--s3);
}
.count em{
  font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.24em;color:var(--muted);
}
.count b{
  font-family:var(--display);font-weight:400;
  font-size:26px;line-height:1;color:var(--wine-hover);
  letter-spacing:-.04em;
}
.count--light b{color:var(--powder)}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;
  border-radius:var(--pill);
  font:700 13px/1 var(--ui);
  letter-spacing:.04em;
  text-align:center;
  transition:background var(--t-fast) var(--e-soft),
             color var(--t-fast) var(--e-soft),
             transform var(--t-fast) var(--e-out),
             border-color var(--t-fast);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{min-height:42px;padding:0 18px;font-size:12px}
.btn--lg{min-height:60px;padding:0 34px;font-size:14px}

.btn--primary{background:var(--wine);color:#fff}
.btn--primary:hover{background:var(--wine-hover)}

.btn--powder{background:var(--powder);color:var(--ink)}
.btn--powder:hover{background:var(--powder-light)}

.btn--ghost{background:transparent;color:var(--white);border:1px solid var(--strong)}
.btn--ghost:hover{border-color:var(--powder);color:var(--powder)}

.btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn--outline:hover{background:rgba(255,255,255,.1)}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:13px;letter-spacing:.04em;
  color:var(--powder);
  padding-block:6px;
}
.link-arrow i{font-style:normal;transition:transform var(--t-fast) var(--e-out)}
.link-arrow:hover i{transform:translateX(6px)}

/* ---------- 5. NAV ---------- */
/* Not sticky: absolute to the top of the document, so it sits on the sheet in
   the hero and scrolls away with it. Outside the sheet in the DOM only because
   of the sheet's overflow clip — it would behave the same inside. */
.nav{
  position:absolute;inset:var(--frame) var(--frame) auto;z-index:60;
}
.nav__in{
  max-width:var(--shell);margin-inline:auto;
  padding:16px var(--gutter);
  display:flex;align-items:center;gap:var(--s4);
}

/* The brand mark, top left. The slot sets the size; the 3D canvas bleeds 14%
   past it on every side so the idle sway never clips a claw. The row centres
   on it, so the links and button line up with the middle of the mark. */
.nav__logo{
  position:relative;flex:none;
  width:clamp(150px,13vw,200px);
  aspect-ratio:2.607/1.63;
}
.nav__logo-fallback{width:100%;height:100%;object-fit:contain;object-position:left center}
.has-3d .nav__logo-fallback{visibility:hidden}
.nav__logo-canvas{
  display:none;
  position:absolute;inset:-14%;
  width:128%;height:128%;
  pointer-events:none;
}
.has-3d .nav__logo-canvas{display:block}

/* link colour, not --muted: over the moving wine blob --muted only just
   cleared AA (4.59:1), too thin a margin for text that sits on a live field */
/* "Адрес" — one word in the row, in wine; the two studios drop down under it.
   The word sits on a powder chip rather than straight on the glass: that
   corner of the hero is itself lit wine (≈ rgb 75,43,52), and wine text on it
   measured 1.3:1 — there but unreadable. Wine on powder is 5.6:1, and the
   chip reads as the inverse of the wine "Записаться" pill across the row. */
.nav__addr{position:relative;flex:none}
.nav__addr-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px 7px 14px;border-radius:var(--pill);
  background:var(--powder);
  font-size:11px;font-weight:800;color:var(--wine);
  transition:background var(--t-fast);
}
.nav__addr-btn svg{
  width:12px;height:12px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-fast) var(--e-out);
}
.nav__addr-btn:hover,.nav__addr-btn[aria-expanded="true"]{background:var(--powder-light)}
.nav__addr-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__addr-pop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:5;
  min-width:max-content;
  padding:14px 18px 16px;border-radius:var(--r2);
  border:1px solid var(--line);
  background:rgba(27,26,30,.88);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.nav__addr-pop:not([hidden]){animation:addr-in .22s var(--e-out)}
@keyframes addr-in{from{opacity:0;transform:translateY(-6px)}}
.nav__addr-pop p{margin:0;font-size:14px;line-height:1.6;color:var(--white);white-space:nowrap}
.nav__addr-pop .nav__addr-city{
  margin-bottom:4px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
@media (prefers-reduced-motion:reduce){
  .nav__addr-pop:not([hidden]){animation:none}
}
.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a{
  font-size:13px;font-weight:500;color:var(--text);
  position:relative;padding-block:4px;
  transition:color var(--t-fast);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--powder);transition:right var(--t-med) var(--e-out);
}
.nav__links a:hover{color:var(--powder)}
.nav__links a:hover::after{right:0}
.nav__links a.is-active{color:var(--powder)}

.nav__right{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.nav__links + .nav__right{margin-left:0}

/* phones only — see the ≤1080px block */
.nav__burger{
  display:none;width:44px;height:44px;
  border-radius:var(--pill);border:1px solid var(--strong);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav__burger span{display:block;width:16px;height:1.5px;background:var(--white);transition:transform var(--t-fast)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* beat bar — phone 8-count: a hairline progress indicator at the top edge.
   Not part of the navbar, so it stays when the navbar scrolls away. */
.beatbar{
  display:none;gap:4px;z-index:58;
  position:fixed;top:6px;
  left:calc(var(--frame) + var(--gutter));
  right:calc(var(--frame) + var(--gutter));
  pointer-events:none;
}
.beatbar i{
  flex:1;height:2px;border-radius:2px;
  background:var(--line);
  transition:background var(--t-med) var(--e-soft);
}
.beatbar i.on{background:var(--wine-hover)}
.beatbar i.now{background:var(--powder)}

/* mobile menu */
/* Full-bleed on purpose: inset to the frame would leave bands of page content
   showing above and below, since the sheet fills the viewport once scrolled. */
.menu{
  position:fixed;inset:0;z-index:55;
  background:rgba(20,19,23,.78);
  backdrop-filter:blur(30px) saturate(.85);
  -webkit-backdrop-filter:blur(30px) saturate(.85);
  /* top padding clears the navbar, which stays above the menu with its close button */
  padding:calc(var(--frame) + 92px) calc(var(--frame) + var(--gutter)) var(--s5);
  display:flex;flex-direction:column;justify-content:space-between;
  overflow-y:auto;scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu[hidden]{display:none}
.menu__links{display:flex;flex-direction:column}
.menu__links a{
  display:flex;align-items:baseline;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--head);font-weight:800;font-size:26px;letter-spacing:-.03em;
  color:var(--white);
}
.menu__links em{
  font-family:var(--display);font-style:normal;font-size:12px;
  color:var(--wine-hover);width:14px;
}
.menu__foot{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);padding-top:var(--s4)}
.menu__foot a{color:var(--powder);font-weight:700}

/* ---------- 6. 8-COUNT RAIL (signature) ---------- */
.rail{
  position:fixed;z-index:50;
  right:calc(var(--frame) + clamp(10px,1.2vw,26px));
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  pointer-events:auto;
}
.rail__label{
  writing-mode:vertical-rl;
  font-size:9px;font-weight:700;letter-spacing:.32em;
  color:var(--muted);
  margin-bottom:4px;
}
.rail__list{display:flex;flex-direction:column;gap:2px}
.rail__list a{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  font-family:var(--display);font-size:13px;letter-spacing:-.04em;
  color:var(--muted);
  transition:color var(--t-fast),background var(--t-fast);
}
.rail__list a span{transition:transform var(--t-fast) var(--e-out)}
.rail__list a:hover{color:var(--white)}
.rail__list a:hover span{transform:scale(1.18)}
.rail__list a.is-on{background:var(--wine);color:#fff}

/* ---------- scroll to top ---------- */
/* Appears once the hero has scrolled off — same wine-glass look as the video
   controls, sits above the sheet (which is z-index:1) but below the rail. */
.totop{
  position:fixed;z-index:52;
  right:calc(var(--frame) + clamp(14px,2vw,24px));
  bottom:calc(var(--frame) + clamp(14px,2vw,28px));
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(20,19,23,.55);
  backdrop-filter:blur(10px) saturate(.9);
  -webkit-backdrop-filter:blur(10px) saturate(.9);
  color:#fff;
  opacity:0;transform:translateY(10px);
  /* hidden = not there for taps either: at opacity 0 it still caught every
     tap in that corner of the screen */
  visibility:hidden;
  transition:opacity var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-out),
             visibility 0s linear var(--t-fast),
             background var(--t-fast),border-color var(--t-fast);
}
.totop[hidden]{display:none}
.totop.is-on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.totop:hover{background:var(--wine);border-color:var(--wine)}
.totop:active{transform:scale(.94)}
.totop svg{width:20px;height:20px;fill:currentColor;display:block}
@media (prefers-reduced-motion:reduce){
  .totop{transition:opacity var(--t-fast)}
}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;
  min-height:calc(100svh - var(--frame) * 2);
  display:flex;align-items:flex-end;
  padding-block:98px clamp(24px,4vh,48px);
  overflow:hidden;
  isolation:isolate;
}
/* stays translucent — the ambient field shows through the glass beneath it.
   The falloff is 1 − smoothstep, sampled in ten stops: flat at the centre and
   flat again where it reaches zero. Any curve that still slopes when it hits
   0 draws a rim, and over the dark field that rim reads as a disc. Wide, so
   the light has no shape of its own, only a direction. */
.hero__glow{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(92% 88% at 74% 44%,
      rgba(127,31,50,.3) 0%,rgba(127,31,50,.29) 11%,rgba(127,31,50,.262) 22%,
      rgba(127,31,50,.222) 33%,rgba(127,31,50,.175) 44%,rgba(127,31,50,.125) 56%,
      rgba(127,31,50,.078) 67%,rgba(127,31,50,.038) 78%,rgba(127,31,50,.01) 89%,
      rgba(127,31,50,0) 100%),
    radial-gradient(70% 64% at 6% 94%,
      rgba(232,184,194,.045) 0%,rgba(232,184,194,.039) 22%,rgba(232,184,194,.026) 44%,
      rgba(232,184,194,.012) 67%,rgba(232,184,194,.002) 89%,rgba(232,184,194,0) 100%);
}
.hero__media{
  position:absolute;z-index:-1;
  right:clamp(-40px,5vw,120px);bottom:0;
  /* relative to the hero, not the viewport: the head must clear the navbar
     row whatever the hero's height ends up being */
  height:min(calc(100% - 104px),1020px);
  margin:0;
  opacity:0;              /* until the entrance plays — see "hero entrance" */
  /* Backlight: a halo that follows the silhouette puts a light behind her —
     the cut-out was lit flat in a studio and its edge read as scissors.
     It lives HERE, on the figure, not on the <img>: a mask clips everything
     outside the element's box, and with the halo on the masked <img> it was
     cut off square at the photo's edges — the visible frame. Filtering the
     parent works on the already-masked picture, so the halo fades out at the
     bottom with it and is free to spill past the box everywhere else. */
  filter:drop-shadow(0 0 54px rgba(152,37,59,.3));
}
/* The bottom fades out with a mask, not an overlay: a gradient to --bg drew a
   visible box, because what's behind the photo is glass over a moving field,
   never exactly --bg. */
.hero__media img{
  height:100%;width:auto;object-fit:contain;object-position:bottom;
  /* the fade starts below the hair and eases out in steps, so it reads as
     light falling off, not a band of grey across the skirt */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(var(--fade-at,86%) - 14%),rgba(0,0,0,.62) var(--fade-at,86%),rgba(0,0,0,.28) 95%,transparent);
  mask-image:linear-gradient(180deg,#000 calc(var(--fade-at,86%) - 14%),rgba(0,0,0,.62) var(--fade-at,86%),rgba(0,0,0,.28) 95%,transparent);
}

.hero__in{position:relative;z-index:2}

/* A narrow stack, one word a line and the name whole on the last. Wider lines
   ran into the portrait: its left edge moves with the viewport's height as
   well as its width, so no single breakpoint kept them apart. So the size
   follows both: 5.2vw keeps the name clear of the portrait sideways, 9.4svh
   keeps the four lines + lead + buttons inside a short hero. (It was capped
   at 58px, and on a wide screen the stack sat small in a lot of empty dark.) */
.hero__title{
  max-width:9em;margin:0 0 var(--s3);
  font-family:var(--head);font-weight:800;
  font-size:clamp(34px,min(5.2vw,9.4svh),88px);line-height:1.02;letter-spacing:-.04em;
  color:var(--white);
}
/* under 360px the name is wider than the screen and has to break */
@media (min-width:360px){.hero__name{white-space:nowrap}}
.hero__lead{
  max-width:40ch;margin:0 0 var(--s4);
  font-size:clamp(15px,min(1.3vw,2.3svh),21px);line-height:1.65;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero entrance ----------
   Played once, on load. One sequence rather than a pile of effects: the photo
   comes into focus, the mark lands in the corner, then the words, the buttons
   last. Big things move slower, small ones faster (brief §31).

   Keyframes, not transitions: the motion is fixed and it runs while the page
   is still loading, so it has to stay off the main thread. `backwards` fill
   only — once finished, each element falls back to its own styles, so the
   scroll drift (inline transform on .hero__media) and button hovers still work.

   app.js starts it: .is-ready on the photo once it has decoded, .is-in on the
   hero no later than 600ms. The mark's landing is drawn by logo3d.js on the
   same --e-out curve, 150ms after .is-in.

     0      photo      1200ms  fade, focus, settle from 1.05
     150    mark       1100ms  (logo3d.js)
     300    kicker      600ms
     340    headline    900ms
     420    lead        700ms
     520    buttons     600ms */
.hero [data-h]{opacity:0}
.hero.is-in [data-h]{opacity:1;animation:hero-rise .7s var(--e-out) backwards}
.hero.is-in .hero__title{animation-duration:.9s;animation-delay:.34s}
.hero.is-in .hero__lead{animation-duration:.7s;animation-delay:.42s}
.hero.is-in .hero__cta{animation-duration:.6s;animation-delay:.52s}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}}

.hero__media.is-ready{opacity:1;animation:hero-fade 1.2s var(--e-out) backwards}
.hero__media.is-ready img{animation:hero-focus 1.2s var(--e-out) backwards}
@keyframes hero-fade{from{opacity:0}}
/* the halo is on the parent (see .hero__media), so only the focus pull here */
@keyframes hero-focus{
  from{filter:blur(10px);transform:scale(1.05)}
  to{filter:blur(0);transform:none}
}


/* ---------- 8. MARQUEE ---------- */
.marquee{
  background:var(--wine);
  overflow:hidden;
  padding:14px 0;
  border-block:1px solid var(--wine-deep);
}
/* duration scales with the loop length: each half is now ~2× the old copy,
   so 77s keeps the original reading speed (~34px/s) */
.marquee__track{display:flex;width:max-content;animation:slide 77s linear infinite}
.marquee__track span{
  display:flex;align-items:center;
  font-family:var(--display);font-size:clamp(15px,1.7vw,22px);
  letter-spacing:-.02em;color:#fff;white-space:nowrap;
  padding-right:0;
}
.marquee__track i{font-style:normal;color:var(--powder);padding:0 clamp(18px,3vw,40px);font-size:.7em}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 9. SECTION SHELL ---------- */
.sec{padding-block:var(--sec-y);position:relative}
.sec__head{margin-bottom:clamp(40px,5vw,72px)}
.sec__head--split{
  display:flex;flex-wrap:wrap;gap:var(--s4);
  align-items:flex-end;justify-content:space-between;
}
.sec__note{
  margin:0;max-width:42ch;font-size:15px;color:var(--muted);line-height:1.6;
}

.media{
  position:relative;overflow:hidden;
  border-radius:var(--r3);
  background:var(--surface);
  margin:0;
}
.media img,.media video{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e-out);
}
.media:hover img,.media:hover video{transform:scale(1.04)}
.media figcaption{
  position:absolute;left:14px;bottom:12px;
  padding:6px 12px;border-radius:var(--pill);
  background:rgba(27,26,30,.7);backdrop-filter:blur(8px);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}

/* ---------- 10. COMMUNITY ---------- */
.community__grid{
  --gap:clamp(24px,3vw,48px);
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--gap);
  align-items:start;
}
.community__col{display:flex;flex-direction:column;gap:var(--gap)}
.community__main{aspect-ratio:1158/673;
  border-radius:var(--r3);background:transparent}
/* A light wine line. Drawn on top of the picture, not as a border or shadow
   around it: outside the clip the antialiased corner leaves a hairline of
   the page between photo and stroke. */
.community__main::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  border:1.5px solid rgba(152,37,59,.7);
  pointer-events:none;
}
.community__text{padding-top:4px}
/* The clip is vertical (a phone shot), so the card is vertical too: forcing
   it into the old 4:3 landscape box pillarboxed the video against a grey
   bar. Cropped closer to square than the raw 9:16 — see the HTML comment
   for how much room that left to work with. */
.community__aside{aspect-ratio:600/950;border-radius:var(--r2);width:100%;max-width:400px;align-self:flex-end}

/* Alisa's own words under the group photo. The oversized « and the
   signature are in a thin serif italic, so the voice reads as a person's
   rather than the site's; the body stays in the site's sans for reading. */
.community__quote{margin:0;max-width:62ch}
.community__quote::before{
  content:"«";display:block;
  margin:0 0 -.12em -.04em;
  font:italic 300 clamp(72px,7vw,112px)/.8 "Cormorant Garamond",Georgia,serif;
  color:var(--powder);
}
.community__quote p{
  margin:0 0 14px;
  font-size:clamp(15px,1.15vw,18px);line-height:1.7;color:var(--text);
}
.community__quote footer{
  margin-top:var(--s3);
  font:italic 300 clamp(22px,1.7vw,28px)/1.2 "Cormorant Garamond",Georgia,serif;
  color:var(--powder);
}

.ticks{display:flex;flex-direction:column;gap:14px;margin-bottom:var(--s4)}
.ticks li{
  position:relative;padding-left:26px;font-size:15px;line-height:1.6;max-width:62ch;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:10px;
  width:10px;height:1px;background:var(--powder);
}

/* ---------- 11. ALICE ---------- */
/* a tint, not a fill — the field has to keep showing through the glass */
.sec--alice{background:linear-gradient(180deg,transparent,rgba(27,26,30,.5) 48%,transparent)}
.alice__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px);
  align-items:center;
}
.alice__portrait{
  position:relative;margin:0;
  display:flex;justify-content:center;align-items:flex-end;
}
.alice__portrait::before{
  content:"";position:absolute;inset:-6% -10% -8%;
  background:radial-gradient(52% 46% at 50% 52%,rgba(127,31,50,.62),transparent 72%);
  filter:blur(6px);
}
.alice__portrait>img{position:relative;max-height:min(86svh,880px);width:auto}
.alice__portrait .alice__seal{
  position:absolute;left:0;bottom:6%;
  width:clamp(74px,8vw,112px);height:auto;
  max-height:none;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.55));
  transform:rotate(-9deg);
}

.alice__name{
  display:flex;flex-direction:column;gap:4px;
  margin:var(--s4) 0 var(--s3);
  font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--white);
}
.alice__name span{font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.tags{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:var(--s4)}
.tags em{font-style:normal;font-weight:500;letter-spacing:.02em;color:var(--muted);text-transform:lowercase}

/* One team, one photo, one caption — stacked, not a pill. `.tag-photo` skips
   the `.media` class on the figure itself (its figcaption is a pill glued to
   the photo's own bottom edge, made for a caption ON a picture, like "после
   занятия"; here the caption is the point, so it sits as ordinary text below
   the photo, not layered over it). */
.tag-with-img{display:flex;flex-direction:column;align-items:center;gap:10px;width:100px}
.tag-photo{width:100px;height:100px;border-radius:12px}
.tag-caption{margin:0;font-size:13px;font-weight:700;text-align:center;color:var(--white)}
.tag-caption em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--muted);text-transform:lowercase}

/* her numbers, in her voice — moved here from the hero */
.alice__stats{
  display:flex;flex-wrap:wrap;gap:var(--s3) clamp(24px,4vw,56px);
  margin:0 0 var(--s4);padding:var(--s3) 0;
  border-block:1px solid var(--line);
}
.alice__stats dt{
  font-family:var(--head);font-weight:800;font-size:clamp(24px,2.6vw,34px);
  letter-spacing:-.035em;color:var(--white);line-height:1;
}
.alice__stats dd{margin:6px 0 0;font-size:12px;color:var(--muted);letter-spacing:.04em}

.alice__wins{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s4)}
.win{display:flex;align-items:center;gap:14px}
.media--win{width:76px;height:76px;flex:none;border-radius:var(--r1)}
.win__place{margin:0;font-family:var(--head);font-weight:800;font-size:17px;color:var(--powder);letter-spacing:-.01em}
.win__what{margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.4}

/* ---------- 12. METHOD ---------- */
/* Four glass cards. Each step is three layers so the motions never fight:
     .step        the grid slot — never moves, so it can be measured/observed
     .step__fly   the arc flight (app.js toggles .is-in on the slot)
     .step__card  the glass itself, and the pointer tilt
   The section carries the mode: .is-pin (desktop, pinned stage), .is-simple
   (phones / short screens), or neither (no JS, reduced motion: static row). */
.method__cards{position:relative}

.steps{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
}
.step{display:flex}
.step__fly{flex:1;display:flex}

.step__card{
  --rx:0deg;--ry:0deg;--gx:50%;--gy:0%;
  position:relative;flex:1;
  padding:var(--s4) var(--s3) var(--s5);
  border-radius:var(--r2);
  border:1px solid rgba(248,247,248,.12);
  /* smoked glass: a light sheen over a dark tint. The tint is what keeps text
     at AA over the brightest glow — clear glass let it drop to 2.7:1 */
  background:
    linear-gradient(155deg,
      rgba(248,247,248,.12),rgba(248,247,248,.035) 44%,
      rgba(248,247,248,.02) 70%,rgba(248,247,248,.07)),
    rgba(24,22,28,.38);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  /* volume: a lit top edge, a dark bottom edge, and two shadows — a tight one
     that seats the card and a long soft one that lifts it off the sheet */
  box-shadow:
    inset 0 1px 0 rgba(248,247,248,.2),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 0 -24px 40px -28px rgba(232,184,194,.1),
    0 2px 4px rgba(0,0,0,.22),
    0 30px 56px -24px rgba(0,0,0,.72),
    0 64px 110px -56px rgba(40,8,18,.85);
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s var(--e-out),border-color var(--t-med);
}
/* the rim catches light at the top-left and a blush of powder at the far corner */
.step__card::before{
  content:"";position:absolute;inset:-1px;z-index:1;
  border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(248,247,248,.5),rgba(248,247,248,0) 34%,
    rgba(248,247,248,0) 68%,rgba(232,184,194,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* glare: a soft highlight that follows the pointer across the glass */
.step__card::after{
  content:"";position:absolute;inset:0;z-index:1;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--gx) var(--gy),rgba(248,247,248,.14),transparent 62%);
  opacity:0;transition:opacity var(--t-med) var(--e-soft);
}
.step__card:hover{border-color:rgba(248,247,248,.2)}
.step__card.is-tilt::after{opacity:1}

.step__n{
  margin:0 0 var(--s4);
  font-family:var(--display);font-size:44px;line-height:1;
  letter-spacing:-.06em;
  /* powder, not wine: a wine outline disappears into the wine light behind the glass */
  color:transparent;-webkit-text-stroke:1.2px var(--powder);
  transition:color var(--t-med) var(--e-soft);
}
.step__card:hover .step__n{color:var(--powder);-webkit-text-stroke-color:transparent}
.step__t{
  margin:0 0 12px;
  font-family:var(--head);font-weight:800;font-size:18px;line-height:1.25;
  letter-spacing:-.02em;color:var(--white);
}
/* --text, not --muted: over the brightest patch of glow --muted fell under AA */
.step__d{margin:0;font-size:14px;line-height:1.6;color:var(--text)}

/* Light behind the glass. The cards' blur can't see the page field — the
   sheet's own backdrop-filter walls it off — so they bend this instead.
   Plain radial gradients, no filter: the glass does the blurring. */
.method__glow{
  position:absolute;inset:-34% -5%;
  pointer-events:none;
  transition:opacity .6s var(--e-soft);
}
.method__glow i{position:absolute;display:block;border-radius:50%}
.method__glow i:nth-child(1){        /* wine, under the first two cards */
  width:56%;height:100%;left:2%;top:4%;
  background:radial-gradient(closest-side,rgba(163,32,64,.78),rgba(163,32,64,.3) 55%,transparent);
  animation:glow-a 19s ease-in-out infinite;
}
.method__glow i:nth-child(2){        /* powder, under the third */
  width:36%;height:84%;left:46%;top:-4%;
  background:radial-gradient(closest-side,rgba(236,168,186,.36),transparent);
  animation:glow-b 23s ease-in-out infinite;
}
.method__glow i:nth-child(3){        /* coral, under the fourth */
  width:34%;height:80%;left:68%;top:22%;
  background:radial-gradient(closest-side,rgba(198,58,74,.62),transparent);
  animation:glow-a 27s ease-in-out infinite reverse;
}
@keyframes glow-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(9%,-7%,0) scale(1.12)}
}
@keyframes glow-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-12%,10%,0) scale(.9)}
}
/* ---- the arc ----
   Each card swings about a pivot far below its own slot, so it travels on a
   true circle: in from the lower right, straightening as it lands. Only
   transform moves — cheap even with the glass on. The exit uses the transition
   of the state being left for, so leaving accelerates away instead of drifting. */
.is-pin .step__fly,
.is-simple .step__fly{
  transform-origin:50% calc(50% + var(--arc-r));
  transform:rotate(var(--arc-a));
  transition:transform .7s cubic-bezier(.5,0,.75,0) var(--delay,0s);
}
.is-pin .step.is-in .step__fly,
.is-simple .step.is-in .step__fly{
  transform:rotate(0deg);
  transition:transform 1.15s var(--e-out) var(--delay,0s);
}
.is-instant .step__fly{transition:none !important}

/* ---- desktop: pinned stage ----
   The track is one screen plus --pin-len of scrolling; the stage sticks for
   that whole stretch. app.js splits it into one leg per card plus a short hold
   after the last, so the next section can't arrive before the fourth card. */
.sec--method.is-pin{
  --pin-len:150svh;
  --arc-r:150vw;--arc-a:42deg;
  padding-block:0;
}
.is-pin .method__track{height:calc(100svh + var(--pin-len))}
.is-pin .method__stage{
  position:sticky;top:0;
  height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:clip;               /* cards waiting off-stage stay out of sight */
}
/* the whole block has to fit one screen: short laptops get a smaller title
   and tighter cards instead of a stage that runs off the bottom */
.is-pin .display--md{font-size:clamp(38px,min(6.4vw,10.4svh),92px)}
@media (max-height:820px){
  .is-pin .display--md{font-size:clamp(38px,min(6.4vw,9svh),92px)}
  .is-pin .sec__head{margin-bottom:clamp(20px,4svh,40px)}
  .is-pin .step__card{padding:clamp(18px,3svh,26px) var(--s3) clamp(20px,4svh,32px)}
  .is-pin .step__n{margin-bottom:clamp(10px,2.4svh,20px);font-size:36px}
}
/* ---- phones / short screens: no pin ---- */
.sec--method.is-simple{--arc-r:190vw;--arc-a:36deg}

/* ---------- 13. FORMATS ---------- */
.formats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.fmt{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(26px,3vw,44px);
  border-radius:var(--r4);
  border:1px solid var(--line);
  background:linear-gradient(150deg,#332E35,#201E24);
  transition:transform var(--t-med) var(--e-out),border-color var(--t-med);
  container-type:inline-size;      /* the title sizes itself to the card, see .fmt__display */
}
.fmt:hover,.fmt:focus-within{transform:translateY(-6px);border-color:var(--strong)}

/* Both cards start with a powder glow; it turns wine when you reach for one.
   focus-within gives keyboard users the same moment as a hover. */
.fmt::before{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  right:-120px;top:-150px;filter:blur(38px);
  background:var(--powder);opacity:.28;
  transition:transform .8s var(--e-out),background-color .55s var(--e-soft),opacity .55s var(--e-soft);
}
.fmt:hover::before,.fmt:focus-within::before{
  background:var(--wine);opacity:.9;
  transform:translate(-18px,18px) scale(1.08);
}
.fmt>*{position:relative}

.fmt__top{margin-bottom:var(--s4)}
.fmt__kicker{
  margin:0 0 var(--s3);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--powder);
}
/* Cyrillic, so Manrope 800 (Archivo Black has no Cyrillic). Sized to the card,
   not the viewport: «ПЕРСОНАЛЬНЫЙ» is one unbreakable word and must never
   overflow, whatever width the card ends up at. */
.fmt__display{
  margin:0;font-family:var(--head);font-weight:800;
  font-size:clamp(26px,3.6vw,52px);
  font-size:clamp(26px,10.5cqi,52px);
  line-height:.94;letter-spacing:-.045em;color:var(--white);
}
.fmt__list{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--s4)}
.fmt__list li{font-size:14px;line-height:1.6;color:var(--text);max-width:62ch}

/* direction × level (× time) — a real table, so it reads as one */
.fmt__table{
  width:100%;border-collapse:collapse;
  margin-bottom:var(--s4);
  border-block:1px solid var(--line);
}
.fmt__table thead th{
  padding:var(--s2) 12px 6px 0;
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-align:left;
}
.fmt__table tbody th,.fmt__table td{padding:8px 12px 8px 0;text-align:left;vertical-align:baseline}
.fmt__table tbody tr:last-child>*{padding-bottom:var(--s2)}
.fmt__table tbody th{font-family:var(--head);font-weight:700;font-size:15px;color:var(--white);white-space:nowrap}
.fmt__table td{font-size:14px;color:var(--text)}

/* A phone-width card can't hold three columns: stack each direction instead,
   with the column name shown above its value. Keyed to the card's own width
   (container query), so a narrow desktop card keeps the table. The header row
   stays in the accessibility tree, only visually hidden. */
@container (max-width:340px){
  .fmt__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .fmt__table tbody tr{display:block;padding:12px 0}
  .fmt__table tbody tr + tr{border-top:1px solid var(--line)}
  .fmt__table tbody tr:last-child>*{padding-bottom:0}
  .fmt__table tbody th{display:block;padding:0 0 6px}
  .fmt__table td{display:inline-block;padding:0 22px 0 0;vertical-align:top}
  .fmt__table td::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  }
}
.fmt .btn{align-self:flex-start;margin-top:auto}

/* ---------- 14. SCHEDULE ---------- */
.badge{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:10px 16px;border-radius:var(--pill);
  font-size:12px;font-weight:700;letter-spacing:.04em;
}
.badge--live{color:var(--powder-light);background:rgba(127,31,50,.24);border:1px solid rgba(184,78,98,.4)}
.badge--live i{
  width:7px;height:7px;border-radius:50%;background:var(--powder);
  box-shadow:0 0 0 0 rgba(232,184,194,.5);
  animation:pulse 2.4s var(--e-soft) infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(232,184,194,0)}100%{box-shadow:0 0 0 0 rgba(232,184,194,0)}}

/* Full width of the block, five columns in fixed proportion. The header row
   and every data row share one template (--sched-cols), so the columns line
   up top to bottom. The floors keep the unwrappable cells intact —
   "по договорённости", "Индивидуальное" — and level and address may wrap. */
.sec--schedule{
  --sched-cols:minmax(80px,.55fr) minmax(160px,.9fr) minmax(170px,1.25fr) minmax(0,1.25fr) minmax(0,1fr);
  --sched-gap:var(--s3);
}
.sched__head,.sched__row{
  display:grid;grid-template-columns:var(--sched-cols);gap:var(--sched-gap);
  padding-inline:var(--s2);
}
.sched__head{
  padding-bottom:var(--s2);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.sched{border-top:1px solid var(--line)}
.sched__row{
  align-items:center;
  padding-block:var(--s3);
  border-bottom:1px solid var(--line);
  transition:background var(--t-fast) var(--e-soft);
}
.sched__row:hover{background:rgba(255,255,255,.03)}
.sched__day{
  font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:.02em;
  color:var(--powder);text-transform:uppercase;
}
/* plain, one weight — the day and the class carry the row, not the clock */
.sched__time{font-size:15px;font-weight:500;color:var(--text);white-space:nowrap}
.sched__class{display:flex;flex-direction:column;gap:3px;font-family:var(--head);font-weight:700;font-size:16px;color:var(--white)}
.sched__class em{font-style:normal;font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sched__lvl{font-size:14px;line-height:1.4;color:var(--muted)}
.sched__who{font-size:14px;line-height:1.4;color:var(--text)}
.sched__foot{display:flex;justify-content:flex-end;margin-top:var(--s4)}

/* ---------- 15. ATMOSPHERE ---------- */
.sec--atmo{background:rgba(27,26,30,.5);padding-inline:0}
.atmo__words{display:flex;flex-direction:column;margin-bottom:clamp(36px,4vw,60px)}
/* One shared height; every photo keeps its own proportions, so the five
   landscape shots and the upright certificate sit in one editorial row
   instead of all being cropped to the same portrait box. */
.atmo__strip{
  --h:clamp(230px,30vw,440px);
  position:relative;
  padding-bottom:var(--s5);
}
/* soft edges so photos arrive and leave instead of being guillotined; on its
   own wrapper so the pause button outside it isn't faded along with them */
.atmo__viewport{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.atmo__track{
  display:flex;gap:var(--s2);
  width:max-content;
  padding-inline:var(--gutter);
}
.atmo__item{flex:none;height:var(--h);border-radius:var(--r3)}
.atmo__track .atmo__item img{width:auto;height:100%}

/* no JS / reduced motion: a plain row you swipe yourself */
.atmo__strip:not(.is-running) .atmo__viewport{
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.atmo__strip:not(.is-running) .atmo__viewport::-webkit-scrollbar{display:none}
.atmo__strip:not(.is-running) .atmo__item{scroll-snap-align:center}

/* JS on: the track slides itself; the viewport only clips and takes drags.
   pan-y keeps vertical page scrolling with the browser on touch screens. */
.atmo__strip.is-running .atmo__viewport{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.atmo__strip.is-running.is-dragging .atmo__viewport{cursor:grabbing}
.atmo__strip.is-running .atmo__track{will-change:transform}
.atmo__strip.is-running img{-webkit-user-drag:none;pointer-events:none}

/* left, on the content edge: on the right it crowded the COUNT rail */
.atmo__pause{
  position:absolute;left:var(--gutter);bottom:2px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--strong);
  background:rgba(27,26,30,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.atmo__pause:hover{background:var(--wine);border-color:var(--wine)}
/* ❚❚ drawn with two bars; pressed = paused, so it shows ▶ */
.atmo__pause-icon{display:block;width:10px;height:12px;
  background:linear-gradient(90deg,var(--white) 0 35%,transparent 35% 65%,var(--white) 65%)}
.atmo__pause[aria-pressed="true"] .atmo__pause-icon{
  width:0;height:0;background:none;
  border-left:10px solid var(--white);border-block:6px solid transparent;margin-left:3px;
}

/* Scroll-expanding video reveal.
   The track is tall (extra scroll room); the stage sticks to the viewport
   while the framed video grows to fill it. app.js drives --p (0…1). Fallback
   when JS is off / reduced motion: the frame is already at its final size. */
.vshow{
  --min-w:min(1100px,88vw);
  --min-h:min(56.25vw,620px);   /* 16:9 of --min-w */
  --exp-len:110svh;              /* extra scroll length for the expansion */
  position:relative;
}
.vshow__track{
  height:calc(100svh + var(--exp-len));
  padding-block:var(--sec-y) 0;
}
.vshow__stage{
  position:sticky;top:0;
  height:100svh;
  display:flex;align-items:center;justify-content:center;
}
.vshow__frame{
  --p:0;
  position:relative;overflow:hidden;
  background:#000;
  width:calc(var(--min-w) + (var(--max-w,100vw) - var(--min-w)) * var(--p));
  height:calc(var(--min-h) + (var(--max-h,100svh) - var(--min-h)) * var(--p));
  border-radius:calc(var(--r4) * (1 - var(--p)));
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  will-change:width,height,border-radius;
}
.vshow__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}

.vshow__ctrl{
  position:absolute;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);
  z-index:2;
  display:flex;gap:10px;
}
.vshow__btn{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(20,19,23,.55);
  backdrop-filter:blur(10px) saturate(.9);
  -webkit-backdrop-filter:blur(10px) saturate(.9);
  color:#fff;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.vshow__btn:hover{background:var(--wine);border-color:var(--wine)}
.vshow__btn:active{transform:scale(.94)}
.vshow__btn svg{width:20px;height:20px;fill:currentColor;display:block}

/* two-icon toggle: paths swap by which class the button carries */
.vshow__i-pause,
.vshow__i-muted{display:none}
.vshow__btn--play.is-playing .vshow__i-play{display:none}
.vshow__btn--play.is-playing .vshow__i-pause{display:inline}
.vshow__btn--mute.is-muted .vshow__i-mute{display:none}
.vshow__btn--mute.is-muted .vshow__i-muted{display:inline}

/* Phones play the 3:4 cut (app.js), so the frame is 3:4 too: a portrait
   card that opens to the full width. It stops at 3:4 rather than filling the
   screen — full height would crop ~40% off the sides and cut the outer
   dancers out of the group shots. */
@media (max-width:760px){
  /* the open size is the glass sheet's width (100% of the stage), not the
     screen's: past it the frame was squeezed sideways while it kept growing
     down, and the 3:4 picture got cropped */
  .vshow{
    --min-w:80vw;--min-h:calc(80vw * 4 / 3);
    --max-w:100%;
    --max-h:min(100svh,calc((100vw - var(--frame) * 2) * 4 / 3));
    --exp-len:70svh;
  }
  .vshow__btn{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .vshow__track{height:auto;padding-block:var(--sec-y) 0}
  .vshow__stage{position:relative;height:auto}
  .vshow__frame{width:var(--min-w);height:var(--min-h);border-radius:var(--r4)}
}

/* ---------- 16. WORDS — 3D carousel ---------- */
.carousel{position:relative}

/* The edge fade lives on its own wrapper around the stage: on the stage itself
   `mask` (a grouping property) would flatten the 3D and break depth sorting,
   and on .carousel it would also fade the arrow buttons. */
.carousel__view{
  --fade:9%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}

/* no-JS fallback: a plain horizontal scroll strip */
.carousel__stage{
  display:flex;gap:var(--s3);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:var(--s3);
}
.carousel__ctrl{display:none}

/* JS on: every card shares one grid cell, so the stage is exactly as tall as
   the tallest card without measuring anything; depth comes from preserve-3d */
.carousel.is-ready .carousel__stage{
  display:grid;overflow:visible;
  perspective:1600px;transform-style:preserve-3d;
  padding-block:36px 44px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.carousel.is-ready .carousel__ctrl{
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
}

/* Wider than a text card was: the message is a picture of phone text, and
   its type scales with the card — at 440px it came out ~12px. */
.qcard{
  flex:0 0 min(86vw,500px);scroll-snap-align:center;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3);
  width:min(86vw,500px);
  padding:clamp(20px,2.2vw,30px);
  border-radius:var(--r3);
  border:1px solid rgba(248,247,248,.13);
  /* opaque on purpose: side cards overlap, and see-through cards turn into text soup */
  background:#2B2930;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
  backface-visibility:hidden;
}
/* Colour is NOT tied to position. When the ring turns several notches in a row
   (arrow spam, a dot three away, clicking a far card) every card passing the
   centre used to half-light and fade, so two or three cards sat at 40–60% wine
   at once. Now only the card the ring stops on lights up (.is-lit, set by JS
   ~180ms after the last step), and a card leaving the centre goes out fast. */
.carousel.is-ready .qcard{
  grid-area:1/1;justify-self:center;
  cursor:var(--cur-link);will-change:transform,opacity;
  transition:transform .8s var(--e-out),opacity .6s var(--e-soft),
             background-color .22s var(--e-soft),border-color .22s,box-shadow .3s var(--e-soft);
}
.carousel.is-ready .qcard.is-lit{
  transition:transform .8s var(--e-out),opacity .6s var(--e-soft),
             background-color .5s var(--e-soft),border-color .5s,box-shadow .7s var(--e-soft);
}
/* The message itself: a transparent plate cut from the student's screenshot
   (tools/reviews.py), so it takes the card's colour — graphite at the sides,
   wine in the centre. Long ones are capped and scroll inside the centre card;
   side cards are clipped at the cap and snap back to the top when they leave.
   Short ones sit in the middle of the card rather than at the top of a void. */
.qcard__shot{
  --cap:min(470px,56svh);
  margin-block:auto;
  max-height:var(--cap);
  overflow:hidden;
  overscroll-behavior:auto;           /* at either end the wheel goes back to the page */
  scrollbar-width:thin;scrollbar-color:rgba(232,184,194,.45) transparent;
}
.qcard__shot.is-whole{max-height:none}   /* barely over the cap: shown whole (app.js) */
.qcard__shot img{display:block;width:100%;height:auto}
.qcard[data-pos="0"] .qcard__shot,
.carousel:not(.is-ready) .qcard__shot{overflow-y:auto}   /* no JS: every card is a reader */
/* more below: the text fades out at the bottom edge instead of being sliced */
.qcard__shot.is-more{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);
}
.qcard footer{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* A cylinder, not a flat strip: cards on the right turn their right edge away
   (rotateY +), cards on the left their left edge. The centre steps forward —
   it has to: the turned neighbours swing their near edge in front of z 0 and
   would cut through it. But perspective then draws it p/(p−z) larger than its
   pixels, and the message, a picture of text, went soft. So it is scaled by
   the inverse, (1600−90)/1600: in front in depth, exactly 1:1 on screen. */
.qcard[data-pos="0"]{
  transform:translate3d(0,-6px,90px) scale(.94375);opacity:1;
}
/* the centre card drags; the side cards are links to themselves. Needs the
   .is-ready prefix to outrank the side cards' rule above. */
.carousel.is-ready .qcard[data-pos="0"]{cursor:grab}
.qcard.is-lit{
  background-color:var(--wine);border-color:var(--wine-hover);
  box-shadow:0 36px 80px rgba(127,31,50,.45),0 0 0 1px rgba(232,184,194,.08);
}
.qcard footer{transition:color .3s var(--e-soft)}
.qcard.is-lit footer{color:var(--powder-light)}
.qcard[data-pos="1"]{transform:translate3d(64%,0,-40px) rotateY(24deg) scale(.86);opacity:.96}
.qcard[data-pos="-1"]{transform:translate3d(-64%,0,-40px) rotateY(-24deg) scale(.86);opacity:.96}
.qcard[data-pos="2"]{transform:translate3d(112%,0,-210px) rotateY(34deg) scale(.74);opacity:.62}
.qcard[data-pos="-2"]{transform:translate3d(-112%,0,-210px) rotateY(-34deg) scale(.74);opacity:.62}
.qcard[data-pos="3"]{transform:translate3d(148%,0,-360px) rotateY(40deg) scale(.64);opacity:.24}
.qcard[data-pos="-3"]{transform:translate3d(-148%,0,-360px) rotateY(-40deg) scale(.64);opacity:.24}
/* nine cards: the ninth pair waits behind the ring, out of sight */
.qcard[data-pos="4"]{transform:translate3d(170%,0,-480px) rotateY(44deg) scale(.56);opacity:0;pointer-events:none}
.qcard[data-pos="-4"]{transform:translate3d(-170%,0,-480px) rotateY(-44deg) scale(.56);opacity:0;pointer-events:none}
.qcard:not([data-pos="0"]):hover{border-color:rgba(248,247,248,.3)}

/* flex:none — on a narrow phone the arrows + nine dots didn't fit one row,
   and the round buttons were what got squeezed, into ovals. Now they hold
   their size and the dots give way (their tap boxes narrow; the pills stay). */
.carousel__btn{
  flex:none;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--strong);color:var(--white);font-size:18px;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.carousel__btn:hover{background:var(--wine);border-color:var(--wine)}
.carousel__btn:active{transform:scale(.94)}

/* the visible pill is ::after; the button itself stays a comfortable tap target */
.carousel__dots{display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0}
.carousel__dots button{display:grid;place-items:center;height:28px;width:18px;padding:0;flex:0 1 auto;min-width:12px}
.carousel__dots button[aria-selected="true"]{width:36px;min-width:30px}
.carousel__dots button::after{
  content:"";display:block;width:8px;height:8px;border-radius:var(--pill);
  background:var(--strong);
  transition:width var(--t-med) var(--e-out),background var(--t-med);
}
.carousel__dots button[aria-selected="true"]::after{width:26px;background:var(--powder)}

/* ---------- 17. JOIN ---------- */
.sec--join{background:var(--wine);overflow:hidden}
.join__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
/* three stacked lines at up to 146px: at the shared .94 the breve of "Й"
   in ТВОЙ touched НАЧИНАЕТСЯ above it */
.join__title{color:#fff;margin-bottom:var(--s5);line-height:1.04}
/* on a phone the three lines are 50px Manrope, where 1.04 still left the
   breve of Й a hair from the И above it */
@media (max-width:760px){.join__title{line-height:1.14}}
.join__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sec--join .count em{color:rgba(255,255,255,.6)}

/* ---------- 18. FOOTER ---------- */
.foot{background:var(--deep);padding-block:var(--s6) var(--s4);border-top:1px solid var(--line)}
.foot__in{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--s5) var(--s4);
}
.foot__brand img{width:170px;height:auto;margin-bottom:var(--s3)}
.foot__brand p{margin:0;font-size:13px;color:var(--muted);max-width:30ch}
.foot__nav{display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot__nav a{color:var(--text);transition:color var(--t-fast)}
.foot__nav a:hover{color:var(--powder)}
.foot__contacts{display:flex;flex-direction:column;gap:10px;font-style:normal;font-size:14px;color:var(--text)}
.foot__contacts>a{font-family:var(--head);font-weight:800;font-size:19px;color:var(--white)}
.foot__social{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}
.foot__social a{font-size:13px;color:var(--powder)}
.foot__legal{
  grid-column:1/-1;margin:0;padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);
}
.foot__legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 19. CLOSE BUTTON (achievements sheet) ---------- */
.modal__x{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  display:grid;place-items:center;
}
.modal__x:hover{color:var(--white);border-color:var(--strong)}

/* ---------- 21. REVEAL ---------- */
[data-r]{
  opacity:0;
  transform:translateY(26px);
  filter:blur(5px);
  transition:opacity .75s var(--e-soft) var(--d,0s),
             transform .85s var(--e-out) var(--d,0s),
             filter .75s var(--e-soft) var(--d,0s);
}
[data-r].in{opacity:1;transform:none;filter:none}

/* =========================================================
   22. RESPONSIVE
   ========================================================= */
/* Logo, "Адрес", six links and the button share one row; below 1200px the
   links give way to the menu button. (On phones the address moves into the
   hero.) */

@media (max-width:1200px){
  .nav__links{display:none}
  /* the hidden links still match `.nav__links + .nav__right`, so re-assert the push */
  .nav__links + .nav__right{margin-left:auto}
  /* no links to show here, so this button is the only way into the menu */
  .nav__burger{display:flex}
}

/* logo + address + six links + button: with the wider rail gutter the row
   runs ~26px long just above 1280, so the gaps tighten a step earlier */
@media (max-width:1400px){
  .nav__in{gap:var(--s3)}
  .nav__links{gap:20px}
}

@media (max-width:1280px){
  .rail{right:10px}
  /* narrower, not gone — which studio still matters at every width */
  .sec--schedule{
    --sched-cols:minmax(80px,.5fr) minmax(150px,.9fr) minmax(150px,1.2fr) minmax(0,1.2fr) minmax(0,1fr);
    --sched-gap:var(--s2);
  }
  .sched__lvl,.sched__who{font-size:13px}
}

@media (max-width:1080px){
  .rail{display:none}
  .beatbar{display:flex}

  .community__grid{grid-template-columns:1fr}
  /* one column: the wrappers dissolve and the pieces interleave —
     photo, points, Alisa's words, clip */
  .community__col{display:contents}
  .community__main{order:1}
  .community__text{order:2}
  .community__quote{order:3}
  .community__aside{order:4;max-width:320px;justify-self:start}

  .alice__grid{grid-template-columns:1fr;gap:var(--s5)}
  .alice__portrait{order:2}
  .alice__portrait>img{max-height:62svh}

  .steps{grid-template-columns:1fr 1fr}
  .foot__in{grid-template-columns:1fr 1fr}
}

/* five columns stop fitting well before the rest of the page goes phone-sized
   ("ЛЮБОЙ" + "по договорённости" + a wrapped level + address), so the
   schedule stacks into cards from here */
@media (max-width:960px){
  .sched__row{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "day time"
      "cls cls"
      "lvl who";
    gap:6px var(--s2);
    padding:var(--s3) 0;
  }
  .sched__day{grid-area:day}
  .sched__time{grid-area:time;justify-self:end}
  .sched__class{grid-area:cls;margin-top:6px}
  .sched__lvl{grid-area:lvl}
  .sched__who{grid-area:who;justify-self:end;text-align:right}
  .sched__head{display:none}
}

@media (max-width:760px){
  .sched__foot .btn{width:100%}
  .nav__in{gap:var(--s2)}
  .nav__logo{width:clamp(96px,30vw,128px)}
  .nav__addr{display:none}
  /* Face above, words below — on every phone, not just a 390×844 one.
     Bottom-anchored words over a full-height photo crossed the face on short
     screens and the chin on tall ones. Now the photo hangs from under the
     navbar at a set height (--ph), the chin sits 35% down it (--face), and
     the words start just under the chin; on a short phone the hero simply
     grows past one screen rather than putting text on the face. */
  .hero{
    --ph:min(72svh,160vw);
    --face:calc(100px + var(--ph) * .35);
    /* ends with its buttons: on a tall phone a full-screen hero left ~190px
       of empty dark under them; now the marquee shows there and says "more" */
    min-height:0;
    padding-block:calc(var(--face) + 26px) 32px;
    align-items:flex-start;
  }
  .hero__media{top:100px;bottom:auto;right:-22%;height:var(--ph)}
  .hero__media.is-ready{opacity:.95}
  .hero__media img{--fade-at:68%}
  /* Darkness from the chin down, so the words sit on shadow, not on skin.
     Measured from --face, not in % of the hero, since the hero's height
     varies. Eased, not linear: a straight ramp kinks where it starts and
     stops, and each kink shows as a faint horizontal line across the photo. */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(27,26,30,0) var(--face),
      rgba(27,26,30,.08) calc(var(--face) + 18px),
      rgba(27,26,30,.26) calc(var(--face) + 42px),
      rgba(27,26,30,.46) calc(var(--face) + 72px),
      rgba(27,26,30,.62) calc(var(--face) + 110px),
      rgba(27,26,30,.72) calc(var(--face) + 160px),
      rgba(27,26,30,.76) 100%);
  }
  .hero__title{font-size:clamp(30px,8.6vw,40px);margin-bottom:var(--s2)}
  .hero__lead{max-width:34ch;font-size:15px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .alice__stats{gap:var(--s2) var(--s3);padding-block:var(--s2)}
  .alice__stats>div{flex:1 1 40%}
  .alice__stats dt{font-size:22px}
  .alice__stats dd{margin-top:3px;font-size:11px}

  .formats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:var(--s2)}
  /* phones get the look of glass without the cost: no live blur under cards
     that fly, just a denser tint over the glow */
  .step__card{
    padding:var(--s3) var(--s3) var(--s4);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(155deg,rgba(248,247,248,.12),rgba(248,247,248,.035) 50%,rgba(248,247,248,.06)),
               rgba(37,36,40,.62);
  }
  .step__n{margin-bottom:var(--s2);font-size:34px}
  /* the cards stack into a column, so the lights stack with them */
  .method__glow{inset:-6% -10%}
  .method__glow i:nth-child(1){width:92%;height:42%;left:-6%;top:0}
  .method__glow i:nth-child(2){width:84%;height:36%;left:30%;top:32%}
  .method__glow i:nth-child(3){width:92%;height:40%;left:-2%;top:60%}


  .alice__wins{grid-template-columns:1fr}

  /* No room for the back row on a phone: the centre plus a peek of each
     neighbour. The centre is narrower than the screen so the peeks exist,
     and the edge fade is shorter so it doesn't eat them. */
  .carousel__view{--fade:3%;margin-inline:calc(var(--gutter) * -1)}
  .carousel.is-ready .carousel__stage{perspective:1000px;padding-block:24px 32px}
  /* nearly full width: the message type is phone type and needs every pixel */
  .carousel.is-ready .qcard{width:84vw;padding:18px 18px 20px}
  .qcard__shot{--cap:min(420px,58svh)}
  .qcard[data-pos="0"]{transform:translate3d(0,-4px,50px) scale(.95)}   /* (1000−50)/1000, see above */
  .qcard[data-pos="1"]{transform:translate3d(80%,0,-90px) rotateY(26deg) scale(.84);opacity:.75}
  .qcard[data-pos="-1"]{transform:translate3d(-80%,0,-90px) rotateY(-26deg) scale(.84);opacity:.75}
  .qcard[data-pos="2"],.qcard[data-pos="-2"],
  .qcard[data-pos="3"],.qcard[data-pos="-3"]{opacity:0;pointer-events:none}
  .foot__in{grid-template-columns:1fr;gap:var(--s4)}
}

/* logo + button + menu don't fit; the hero's own button is on the same screen */
@media (max-width:374px){
  .nav__right .btn{display:none}
}

/* ≤360px (Honor-class phones, or any phone with a larger display size):
   the arrows + nine dots row runs a few px short, so the gaps tighten and
   the arrows step down to 48px — still a full thumb target */
@media (max-width:360px){
  .carousel.is-ready .carousel__ctrl{gap:10px}
  .carousel__btn{width:48px;height:48px}
  .carousel__dots{gap:0}
}

/* Touch screens: every link and control gets a 44px-tall target. Where the
   element is laid out as a block, the extra padding is taken back with a
   negative margin so nothing on screen moves; inline links (the policy link)
   grow their hit box without touching the line. The footer's own links are
   the exception — a stack of 23px rows is too tight for a thumb, so there
   the rows really do open up. */
@media (pointer:coarse){
  .link-arrow{padding-block:12px;margin-block:-6px}
  .menu__foot a{padding-block:7px;margin-block:-7px}
  .foot__nav{gap:0}
  .foot__nav a{padding-block:11px}
  .foot__contacts>a{padding-block:7px;margin-block:-7px}
  .foot__social a{padding-block:12px;margin-block:-12px}
  .foot__legal a{padding-block:15px}
  .carousel__dots button{height:44px;width:20px}
  .carousel__dots button[aria-selected="true"]{width:38px}
}

/* ---------- 23. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-r]{opacity:1;transform:none;filter:none}
  /* Hero: fewer and gentler, not nothing. One short fade, all together — no
     rise, no focus pull, no stagger. !important plus the extra class outranks
     the blanket clamp above, which would otherwise make it a hard cut. */
  .hero.is-in [data-h],
  .hero__media.is-ready{
    animation:hero-fade .3s var(--e-out) backwards !important;
  }
  .hero__media.is-ready img{animation:none}
  .marquee__track{animation:none}
  /* :nth-child(n) matches the specificity of the per-blob rules that set the
     animation; plain `.aurora i` lost to them and only the global duration
     clamp above was keeping the blobs still */
  .aurora i:nth-child(n){animation:none}
}