/* =============================================================================
   Almaty Bars — Website Foundation, one-page landing
   =============================================================================
   Reuses tokens.css (WEB-04 design tokens) and deliberately does NOT link
   shell.css: shell's primitives (.top/.scene/.tile/.foot) are built for the
   four-page direction and carry a bordered header + per-section backgrounds —
   exactly the "four separate banners" reading this page must not have. The
   handful of shell utilities this page genuinely needs (skip link, .wrap,
   .reveal, focus ring) are re-declared below and nothing in shell.css or the
   legacy pages is modified.

   THE ONE RULE THAT SHAPES THIS FILE
   Every photograph is a LAYER on one continuous near-black, masked to nothing
   at both of its edges, and consecutive bands overlap. No section owns a
   background colour, so there is no rectangle for a seam to live on.

   Image paths: this stylesheet sits next to index.html, so "../img/site/…"
   resolves the same for both. (See shell.css's WEB-05B note on why url() must
   not travel through a custom property to another stylesheet.)
   ============================================================================= */

:root{
  /* Landing-only surface scale. Deeper than tokens' --paper so photographs can
     dissolve into it completely instead of fading to a visibly lighter plate. */
  --deep:    #070a10;
  --rock:    #101722;
  --glacier: #9fb4c9;   /* cold light read off the snow in block 1            */
  --ice:     #e6ecf3;
  --slate:   #8c97a6;

  /* Owner-specified matte gold for this page. tokens.css --gold (#c8a24c) is
     left untouched for the legacy pages. Gold appears six times on the whole
     page: two crop marks, two prints on the trail, three "Читать". */
  --au:      #aa8332;
  --au-soft: rgba(170,131,50,.34);
  /* The CTA is filled with the BRAND gold itself, not with a brighter cousin.
     An earlier pass lifted it to #c79a3e for contrast headroom and the result
     drifted away from the 20/80 hairlines and the gold paw prints — the page
     stopped having one gold. #aa8332 carries --deep text at about 5.2:1, which
     clears AA for the 15px semibold label, so the headroom was never needed.
     --au-hi is the hover state only: one step up, still matte. */
  --au-hi:   #bd9139;
  /* --au-lo is the PRESSED step: one stop down the same matte gold. A phone
     has no hover to lift a control with, so the press has to read as the
     control settling rather than lighting up. */
  --au-lo:   #8d6d2a;

  /* THE PHONE'S FILLED GOLD IS DARKER ON PURPOSE — see the (hover:none) block
     under the CTA for the whole reasoning. --au-m is --au taken down 6 points of
     L* so that a 54px pill of it reads like the 2px 20/80 hairline; --au-m-lo is
     its pressed step. These are never used for text. */
  --au-m:    #96742d;
  --au-m-lo: #7e6226;

  --lp-pad:  clamp(20px, 4.4vw, 76px);
}

/* ---------- base ------------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--deep)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.lp{
  margin:0;background:var(--deep);color:var(--ice);
  font:400 17px/1.62 var(--font-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* bands overlap by negative margin; nothing
                                      may bleed sideways at any width */
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--au);outline-offset:3px;border-radius:2px}

/* Android paints rgba(51,181,229,.4) over anything tappable while it is held —
   40% light blue, which over the brand gold composites to a pale grey-green and
   is the single biggest reason the buttons read "lighter and yellower" on a
   phone. The page states its own press feedback below, so this one goes. */
a,button,summary,[data-open],[data-video],[data-close]{
  -webkit-tap-highlight-color:transparent;
}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--lp-pad)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:12px;top:-48px;z-index:60;
  background:var(--au);color:#0b0b0b;padding:10px 16px;border-radius:8px;
  font:600 14px/1 var(--font-text);text-decoration:none;transition:top .15s;
}
.skip-link:focus{top:12px}

/* ---------- header: floats on the image, owns no band ----------------------- */
/* fixed, not sticky: a sticky header is still in flow and would push the
   mountain down by its own height, which is exactly the separate-bar reading
   the brief rules out. Fixed lets band 1 start at y=0 under it. */
.lp-top{
  position:fixed;left:0;right:0;top:0;z-index:30;isolation:isolate;
  display:flex;align-items:center;gap:16px;
  padding:14px var(--lp-pad);
}
.lp-top::before{                   /* scrim, not a bar: it has no bottom edge */
  content:"";position:absolute;left:0;right:0;top:0;height:210px;z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,10,16,.78),rgba(7,10,16,.40) 42%,rgba(7,10,16,0));
}
.lp-brand{
  display:flex;align-items:center;gap:11px;margin-right:auto;
  text-decoration:none;color:var(--ice);
}
/* THE LOGO IS SMALLER THAN THE NUMBER YOU WRITE HERE.
   img/logo.png is a 512x512 canvas, but the medallion only fills 348px of it —
   measured, not guessed: the alpha bounding box is 348x348, so 68% fill with a
   16% transparent margin on every side. A width of 34px therefore painted a
   disc of 23px, and the "AlmatyBars.kz" lettering curved along its rim was a
   few pixels tall. That is the whole reason the mark read as a dot.

   So --mark is the size of the VISIBLE disc, and the box is inflated by the
   asset's own dead margin, which is then pulled back out of the layout with a
   matching negative margin. Net effect: the element occupies exactly --mark in
   the header, and the disc is exactly --mark across.
   --bleed = (1/0.68 - 1) / 2 = 0.2356 of the visible size.

   The old border-radius + gold border are gone with it: they drew a ring on the
   BOX edge, 16% outside the medallion's own gold ring, which at small sizes
   read as a detached halo rather than as part of the mark. */
.lp-brand img{
  /* Never let the medallion be shrunk. Its box is deliberately LARGER than the
     visible disc and the negative margins pull the extra back, so the brand's
     shrink-to-fit width is the smaller margin box — and a stock img{max-width:100%}
     then clamps the picture to it. That is invisible until the wordmark is gone
     and the brand has nothing else to size it. */
  flex:none;max-width:none;
  --mark:66px;
  --bleed:calc(var(--mark) * .2356);
  width:calc(var(--mark) + var(--bleed) * 2);
  height:calc(var(--mark) + var(--bleed) * 2);
  margin:calc(var(--bleed) * -1);
}
.lp-brand span{font:600 19px/1 var(--font-display);letter-spacing:.02em}

.lp-contact{
  font:500 13.5px/1 var(--font-text);color:var(--ice);
  background:rgba(230,236,243,.06);border:1px solid rgba(230,236,243,.20);
  border-radius:999px;padding:11px 20px;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s;
}
@media (hover:hover){.lp-contact:hover{background:rgba(170,131,50,.16);border-color:var(--au)}}
.lp-contact:active{background:rgba(170,131,50,.26);border-color:var(--au)}

/* ---------- language switcher ------------------------------------------------
   <details> rather than a scripted menu: the toggle is keyboard-operable for
   free, the three entries are ordinary links, and the whole thing still works
   with JavaScript off. Three labels side by side would crush the mark and the
   contact button at 390px, so the header shows only the current language and
   the rest live in a popover. */
.lang{position:relative;flex:none}
.lang > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font:600 13px/1 var(--font-text);letter-spacing:.07em;color:var(--ice);
  background:rgba(230,236,243,.06);border:1px solid rgba(230,236,243,.20);
  border-radius:999px;padding:11px 14px;
  backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s;
}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary::marker{content:""}
.lang > summary::after{
  content:"";width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid rgba(230,236,243,.55);
  transition:transform .2s;
}
@media (hover:hover){.lang > summary:hover{background:rgba(170,131,50,.16);border-color:var(--au)}}
.lang[open] > summary{background:rgba(170,131,50,.18);border-color:var(--au)}
.lang[open] > summary::after{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 9px);z-index:40;min-width:176px;
  list-style:none;margin:0;padding:6px;
  background:linear-gradient(180deg,#10161f,#0a0e15);
  border:1px solid rgba(230,236,243,.14);border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.62);
}
.lang-menu a{
  display:block;padding:11px 14px;border-radius:9px;text-decoration:none;
  color:var(--ice);font:500 15px/1.2 var(--font-text);white-space:nowrap;
}
@media (hover:hover){.lang-menu a:hover{background:rgba(230,236,243,.07)}}
.lang-menu a:active{background:rgba(170,131,50,.14)}
.lang-menu a[aria-current]{color:var(--au);background:rgba(170,131,50,.12)}

/* ---------- the ribbon ------------------------------------------------------ */
.band{position:relative;isolation:isolate;display:grid;width:100%;overflow:clip}
.band + .band{margin-top:clamp(-170px,-11vh,-90px)}   /* controlled overlap */

.band-img{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-repeat:no-repeat;
}
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

.stage{
  grid-area:1/1;position:relative;
  width:100%;max-width:1440px;margin-inline:auto;
  padding-inline:var(--lp-pad);
}

/* Masking is what removes the rectangle. Where masks are unsupported the
   @supports fallback paints matching edge gradients instead, so the page
   degrades to "soft edges" rather than to "hard cut". */
/* SIZING RULE FOR ALL THREE PLATES (changed after the first owner review):
   `cover` was cropping 10-25% off the sides and, on tall viewports, off the
   summit as well - the mountain lost its clouds and glacier and the painting
   lost its edges. Every plate is now scaled to the band's WIDTH
   (background-size:100% auto) and the band carries the photograph's own
   aspect-ratio, so nothing is ever cut sideways. Where a band is taller than
   its picture the picture is anchored to the bottom and the spare height is
   dark air above it - which is exactly where the dissolve from the band above
   wants to happen. */
.band-1 .band-img{
  background-image:url("../img/site/block1-desktop.png");
  background-size:100% auto;background-position:50% 0;
  /* reaches zero at 88.8% = exactly where the picture ends (941/1060), so the
     photograph never shows its own bottom edge */
  -webkit-mask-image:linear-gradient(to bottom,#000 0 58%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.13) 84%,transparent 88.8%);
          mask-image:linear-gradient(to bottom,#000 0 58%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.13) 84%,transparent 88.8%);
}
.band-2 .band-img{
  background-image:url("../img/site/block2-scene.jpg");
  background-size:100% auto;background-position:50% 44%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 78%,transparent 100%);
}
.band-3 .band-img{
  background-image:url("../img/site/block3-sign.png");
  background-size:100% auto;background-position:50% 50%;
  /* the canvas occupies 13.8%-86.2% of the band (941/1300, centred); the mask
     fades in and out inside those bounds so no edge of it is ever visible */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 33%,#000 68%,rgba(0,0,0,.16) 81%,transparent 87%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 33%,#000 68%,rgba(0,0,0,.16) 81%,transparent 87%);
}
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .band-1::after{background:linear-gradient(to bottom,rgba(7,10,16,.5),rgba(7,10,16,0) 40%,var(--deep) 98%)}
  .band-2::after,.band-3::after{background:linear-gradient(to bottom,rgba(7,10,16,0),rgba(7,10,16,0) 70%,var(--deep))}
}

/* ══ 1 ═ ГОРА ════════════════════════════════════════════════════════════════
   --split is the one number that tunes this block: the height, as a share of
   the band, at which the snow gives out and the dark mass begins. The hairline,
   both measure lines and both numbers hang off it, so moving the crop means
   moving this value and nothing else. */
.band-1{
  /* the photograph (1672x941) plus a fifth of its height again as dark air
     below it — that air is where the dissolve into band 2 and the Video 1
     trigger live, and it scales with the picture instead of with the window */
  aspect-ratio:1672/1060;
}
.b1-frame{
  --split:34%;    /* share of the PICTURE, measured from its top: the foot of
                     the glacier, where the light mass gives way to the dark
                     one. Raising this makes the upper share read smaller; it
                     is the only number to retune if the crop ever changes. */
  position:absolute;left:0;right:0;top:0;
  aspect-ratio:1672/941;
}
.band-1::after{
  /* far lighter over the sky than before: the clouds and the glacier are the
     point of this frame and a .42 wash was flattening them */
  background:
    linear-gradient(to bottom,rgba(7,10,16,.26) 0%,rgba(7,10,16,.02) 15%,
      rgba(7,10,16,0) 44%,rgba(7,10,16,.30) 84%,rgba(7,10,16,.86) 100%);
}

/* the two shares ------------------------------------------------------------
   .split   - one hairline drawn straight through the mountain at the foot of
              the glacier, faded at both ends so it never reads as a border
   .measure - the vertical extent of each share: the light one climbs from the
              line on the LEFT, the dark one drops from the line on the RIGHT
   .mark    - the number and its caption, hung on its own extent
   .b1-say  - the block's sentence and its video trigger, under the line on the
              dark mass, where there is room for them
   (A single left rail carrying both numbers was tried and reverted: it lost
   the up/down reading that makes 20 above and 80 below obvious at a glance.) */
.split{
  position:absolute;left:0;right:0;top:var(--split);height:6px;margin-top:-3px;
  pointer-events:none;
  background:
    /* the gold core, about two pixels of it */
    linear-gradient(to bottom,transparent 30%,rgba(170,131,50,.96) 34%,
      rgba(170,131,50,.96) 66%,transparent 70%),
    /* a soft dark seat, so the core reads on snow as well as on rock */
    linear-gradient(to bottom,rgba(7,10,16,0) 0%,rgba(7,10,16,.5) 50%,rgba(7,10,16,0) 100%);
  /* the fade along the line's length now lives in the mask, because the
     backgrounds above carry its cross-section */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.measure{
  /* same construction stood on end: 2px of gold inside a 6px box with its own
     soft dark seat. The 3px offsets below keep the core exactly where the old
     hairline was. */
  position:absolute;width:6px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 30%,rgba(170,131,50,.92) 34%,
      rgba(170,131,50,.92) 66%,transparent 70%),
    linear-gradient(90deg,rgba(7,10,16,0) 0%,rgba(7,10,16,.5) 50%,rgba(7,10,16,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.22),#000 18%,#000 82%,rgba(0,0,0,.22));
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.22),#000 18%,#000 82%,rgba(0,0,0,.22));
}
.measure::before,.measure::after{
  content:"";position:absolute;left:calc(50% - 8px);width:16px;height:2px;
  background:var(--au);filter:drop-shadow(0 0 3px rgba(7,10,16,.75));
}
.measure::before{top:0}
.measure::after{bottom:0}
.measure-20{left:calc(var(--lp-pad) - 3px);top:9%;height:calc(var(--split) - 9%)}
.measure-80{right:calc(var(--lp-pad) - 3px);top:var(--split);height:calc(92% - var(--split))}

.mark{position:absolute;margin:0;max-width:330px;isolation:isolate}
/* a short arm hangs the number on its extent */
.mark-arm{
  position:absolute;top:16px;width:26px;height:2px;background:var(--au);
  filter:drop-shadow(0 0 3px rgba(7,10,16,.75));
}
/* each mark carries its own edgeless pool of shade, or the caption stops being
   readable the moment the crop puts snow behind it. Kept tight: any wider and
   it stops being atmosphere and starts being a smudge over the clouds. */
.mark::after{
  content:"";position:absolute;inset:-52px -80px -58px -62px;z-index:-1;
  /* long tail on purpose: over bright cloud a short falloff shows its own rim
     and the pool stops being atmosphere */
  background:radial-gradient(68% 68% at 42% 48%,
    rgba(7,10,16,.62) 0%,rgba(7,10,16,.34) 38%,rgba(7,10,16,.12) 62%,rgba(7,10,16,0) 84%);
}
.mark-num{
  display:block;font:400 clamp(52px,6vw,96px)/.9 var(--font-display);
  letter-spacing:-.025em;color:var(--ice);
}
.mark-num i{font-style:normal;font-size:.34em;letter-spacing:0;vertical-align:.95em;margin-left:.08em;color:var(--slate)}
.mark-cap{margin-top:12px;font-size:14.5px;line-height:1.5;color:#b4c0cf;
  letter-spacing:.02em;max-width:26ch;text-shadow:0 1px 12px rgba(7,10,16,.9)}

/* 20 — upper left, hung on the extent that climbs to the glacier */
.mark-20{
  left:calc(var(--lp-pad) + 30px);
  bottom:calc(100% - var(--split) + 22px);
}
.mark-20 .mark-num{color:var(--glacier)}
.mark-20 .mark-arm{left:-30px}

/* 80 — lower right, hung on the extent that drops through the dark mass */
.mark-80{
  right:calc(var(--lp-pad) + 30px);
  top:calc(var(--split) + 22px);
  text-align:right;
}
.mark-80 .mark-arm{right:-30px}
.mark-80 .mark-cap{margin-left:auto}
.mark-80::after{inset:-52px -62px -58px -80px;
  background:radial-gradient(68% 68% at 58% 48%,
    rgba(7,10,16,.62) 0%,rgba(7,10,16,.34) 38%,rgba(7,10,16,.12) 62%,rgba(7,10,16,0) 84%);}

/* the sentence and the video trigger sit under the line on the dark mass, on
   the free left side — high enough that the button never drifts down into the
   hand-off to band 2 */
.b1-say{
  position:absolute;left:calc(var(--lp-pad) + 30px);
  top:calc(var(--split) + 92px);
  /* the approved copy is four lines; widened rather than shrunk, and it still
     stops well clear of the 80 mark on the right rail */
  width:min(50%,660px);
  display:flex;flex-direction:column;align-items:flex-start;
  isolation:isolate;
}
.b1-say::after{
  content:"";position:absolute;inset:-46px -64px -50px -60px;z-index:-1;
  background:radial-gradient(58% 58% at 42% 46%,
    rgba(7,10,16,.82) 0%,rgba(7,10,16,.46) 46%,rgba(7,10,16,0) 74%);
}
.b1-say p{
  margin:0;font:400 clamp(17px,1.42vw,21px)/1.5 var(--font-display);
  color:var(--ice);letter-spacing:.005em;
}
.b1-say .cta-group{margin-top:26px}



/* ---------- CTA: question + filled play action ------------------------------
   One component, three instances. The old trigger was a hairline ring with grey
   text, which read as a caption next to the copy rather than as something you
   press — a media trigger has to look pressable. So: a question line in the
   display face, and under it a filled gold pill with a round dark play disc.
   The disc is what says "video" without the copy having to. */
.cta-group{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-q{
  margin:0;font:400 clamp(15px,1.25vw,17px)/1.3 var(--font-display);
  color:var(--glacier);letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(7,10,16,.9);
}
.cta-play{
  display:inline-flex;align-items:center;gap:13px;
  padding:8px 26px 8px 8px;border:0;border-radius:999px;cursor:pointer;
  background:var(--au);color:var(--deep);
  font:600 15px/1 var(--font-text);letter-spacing:.01em;text-align:left;
  box-shadow:0 8px 22px rgba(7,10,16,.45);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.cta-icon{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:var(--deep);display:grid;place-items:center;
}
.cta-icon::before{
  content:"";width:0;height:0;margin-left:3px;
  border-left:12px solid var(--au);
  border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;
}
/* The lift-and-brighten belongs to a pointer that can hover. On a touch screen
   :hover latches after a tap, so without the guard the pill simply stayed at
   --au-hi — lighter and yellower than the 20/80 line it is supposed to match. */
@media (hover:hover){
  .cta-play:hover{
    background:var(--au-hi);transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(7,10,16,.55);
  }
  .cta-play:hover .cta-icon::before{border-left-color:var(--au-hi)}
}
.cta-play:focus-visible{
  background:var(--au-hi);transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(7,10,16,.55);
}
.cta-play:focus-visible .cta-icon::before{border-left-color:var(--au-hi)}
/* pressed: down, not up, and deeper gold rather than brighter */
.cta-play:active{
  background:var(--au-lo);transform:translateY(0);
  box-shadow:0 5px 14px rgba(7,10,16,.5);
}
.cta-play:active .cta-icon::before{border-left-color:var(--au-lo)}

/* ---------- the phone's gold ------------------------------------------------
   A touch device gets a darker fill, and this is the one place on the page
   where a control is deliberately NOT the same hex as the brand token.

   The reason is perceptual, not technical. The reference the owner judges
   against is the 20/80 hairline: two pixels of rgba(170,131,50,.96) sitting on
   its own drop-shadow of rgba(7,10,16,.75). Measured on a phone its core lands
   at #a27e36-#a47f34. A 54px-tall pill filled with #aa8332 measures a hair
   lighter than that and LOOKS considerably lighter than it, because area drives
   both apparent lightness and apparent saturation. Matching the number is what
   kept producing the mismatch; the fill has to go down to meet the line.

   #96742d is that value, and it is not chosen by eye: it is the darkest step
   that still carries the pill's --deep label at 4.56:1. AA for 15px semibold is
   4.5:1, so this is the floor. Going further would need the label to change
   size or colour, which is out of scope for a colour fix.

   (hover:none) rather than a width, because a phone is a kind of pointer and
   not a number of pixels: a narrow desktop window keeps the accepted desktop
   gold, a touch tablet correctly gets this one. */
@media (hover:none){
  .cta-play{background:var(--au-m)}
  .cta-icon::before{border-left-color:var(--au-m)}
  .cta-play:active{background:var(--au-m-lo)}
  .cta-play:active .cta-icon::before{border-left-color:var(--au-m-lo)}
}

/* ---------- video trigger (legacy ring, kept for nothing that ships) --------- */
.play{
  display:inline-flex;align-items:center;gap:13px;
  background:none;border:0;padding:6px 4px;cursor:pointer;color:var(--ice);
  font:500 14px/1 var(--font-text);
}
.play-ring{
  width:36px;height:36px;flex:none;border-radius:50%;
  border:1px solid var(--au-soft);display:grid;place-items:center;
  transition:border-color .2s,background .2s,transform .2s;
}
.play-ring::before{
  content:"";width:0;height:0;margin-left:3px;
  border-left:8px solid var(--au);
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}
@media (hover:hover){.play:hover .play-ring{border-color:var(--au);background:rgba(170,131,50,.16)}}
.play:focus-visible .play-ring{border-color:var(--au);background:rgba(170,131,50,.16)}
.play-txt{border-bottom:1px solid transparent;padding-bottom:2px}
@media (hover:hover){.play:hover .play-txt{border-bottom-color:var(--au-soft)}}

/* ══ 2 ═ СЛЕД БАРСА ══════════════════════════════════════════════════════════
   The band's aspect-ratio is fixed, which is what keeps this block reliable:
   the plate is scaled to the band's width, so the ratio between picture height
   and band height is the same at every viewport width, and the two positions
   that matter — the copy's dark corner and the gold prints under the Video 2
   cue — stay on their features instead of drifting with the window. Retune
   .b2-cue only if background-position changes. */
.band-2{aspect-ratio:1440/1240}
.band-2::after{
  background:
    /* shade for the copy only, in the dark upper-left of the scene */
    radial-gradient(58% 46% at 4% 18%,rgba(7,10,16,.93) 0%,rgba(7,10,16,.52) 48%,rgba(7,10,16,0) 78%),
    linear-gradient(to bottom,rgba(7,10,16,0) 0%,rgba(7,10,16,0) 80%,var(--deep) 100%);
}
/* the plate arrives already graded, so this is only a breath of depth now */
.b2-grade{
  grid-area:1/1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(16,23,34,0) 0%,rgba(16,23,34,.08) 16%,
    rgba(16,23,34,.12) 58%,rgba(7,10,16,.30) 88%,rgba(7,10,16,0) 100%);
  mix-blend-mode:multiply;
}

/* Video 2 sits on the gold prints that are part of the photograph: the hit
   area covers them, the ring and the label stand clear to the right so they
   never hide the thing they point at. */
/* the warmth under the two gold prints, so the trail reads as marked; it stays
   on the prints while the action sits clear of them */
.b2-cue-glow{
  position:absolute;left:69%;top:44.5%;width:17%;height:7%;pointer-events:none;
  background:radial-gradient(52% 56% at 50% 50%,rgba(170,131,50,.24),rgba(170,131,50,0) 72%);
  mix-blend-mode:screen;
}
.b2-cue{position:absolute;left:66%;top:55%}

/* the layered build is the phone's version of this block only */
.b2-scene{display:none}

.b2-bars{
  position:absolute;right:1%;top:26%;width:53%;height:auto;
  /* three things stop this reading as a sticker: the ambient grade, a mask that
     dissolves the lower legs into the scree instead of ending them in mid-air,
     and haze + contact shadow placed on the feet rather than on the box */
  filter:brightness(.74) saturate(.60) contrast(1.06);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 74%,rgba(0,0,0,.55) 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0 74%,rgba(0,0,0,.55) 88%,transparent 100%);
}
.b2-haze{                          /* atmosphere behind the animal */
  position:absolute;right:0;top:24%;width:68%;aspect-ratio:2.1/1;
  background:radial-gradient(ellipse at 52% 52%,rgba(46,66,92,.50),rgba(46,66,92,0) 66%);
  filter:blur(26px);
}
.b2-shadow{                        /* contact shadow on the scree */
  position:absolute;right:13%;top:57.5%;width:44%;aspect-ratio:7/1;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.70),rgba(0,0,0,0) 68%);
  filter:blur(12px);
}
.b2-bed{                           /* ground haze: the feet sink into the slope */
  position:absolute;right:5%;top:53%;width:58%;aspect-ratio:3.2/1;
  background:radial-gradient(ellipse at 50% 42%,rgba(7,10,16,.66),rgba(7,10,16,0) 70%);
  filter:blur(20px);pointer-events:none;
}

.b2-copy{position:absolute;left:var(--lp-pad);top:13%;width:min(38%,430px)}
.b2-copy h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.01em}
.b2-copy p{margin-top:20px;color:var(--slate);font-size:16.5px;max-width:40ch}

/* --- the trail ---------------------------------------------------------------
   One sprite, seven crops. Each print is an individual window into
   block2-paws.png (background-size 1429%/417% = one paw of the nine), then
   rotated and scaled along an ascending path: large and near at the bottom
   left, small and far at the animal's feet. Nothing uses the sprite whole. */
.paw,.pawbtn .paw{
  position:absolute;left:var(--l);top:var(--t);
  width:var(--w);aspect-ratio:.874;
  background-image:url("../img/site/block2-paws.png");
  background-size:1429% 417%;background-repeat:no-repeat;
  transform:rotate(var(--r,0deg));transform-origin:50% 50%;
  filter:brightness(1.8) contrast(1.15);opacity:.6;   /* dust, not ink */
}
/* window into the sprite + place on the path. Kept in CSS rather than inline
   styles so the mobile layout can move each print — an inline --l/--t would
   outrank any media query. */
.paw-a{background-position:2.4% 82.9%;  --l:7%;   --t:86%;  --w:52px;--r:-14deg}
.paw-b{background-position:14.5% 74.0%; --l:15%;  --t:80.5%;--w:46px;--r:-25deg}
.paw-c{background-position:36.6% 69.1%; --l:24.5%;--t:76.5%;--w:41px;--r:-11deg;
  filter:brightness(.8) saturate(.7);opacity:.55}   /* the sprite's other gold print */
.paw-e{background-position:48.1% 47.4%; --l:41.5%;--t:68%;  --w:33px;--r:-9deg; opacity:.52}
.paw-f{background-position:59.7% 56.2%; --l:48.5%;--t:64.5%;--w:29px;--r:-22deg;opacity:.46}
.paw-h{background-position:85.0% 34.5%; --l:55%;  --t:61.5%;--w:26px;--r:-7deg; opacity:.4}

/* the one gold print — it is also the door into video 2 */
.pawbtn{
  position:absolute;left:var(--l);top:var(--t);
  --l:33%;--t:72%;--w:37px;--r:-20deg;
  width:var(--w);aspect-ratio:.874;
  background:none;border:0;padding:0;cursor:pointer;
}
.pawbtn .paw{
  left:0;top:0;width:100%;height:100%;
  background-position:72.6% 36.5%;                   /* the gold paw in the sprite */
  filter:brightness(.92) saturate(.82);opacity:.9;
}
.pawbtn .play-ring-sm{
  position:absolute;left:calc(100% + 10px);top:-6px;
  width:30px;height:30px;border-color:var(--au);
  background:rgba(7,10,16,.5);
}
.pawbtn .play-ring-sm::before{border-left-width:7px;border-top-width:5px;border-bottom-width:5px}
.pawbtn-txt{
  position:absolute;left:calc(100% + 48px);top:0;
  white-space:nowrap;font:500 13px/30px var(--font-text);color:var(--ice);
  border-bottom:1px solid transparent;
}
@media (hover:hover){.pawbtn:hover .play-ring-sm{background:rgba(170,131,50,.3)}}
.pawbtn:focus-visible .play-ring-sm{background:rgba(170,131,50,.3)}
@media (hover:hover){.pawbtn:hover .pawbtn-txt{border-bottom-color:var(--au-soft)}}

/* ══ 3 ═ ЗНАК БАРСА ══════════════════════════════════════════════════════════
   The painting is shown whole. It used to be `cover`, which cut about 10% off
   each side and clipped the rock the animal lies on; now the band carries the
   canvas's own proportions and the picture is anchored to the bottom, so any
   spare height is dark air above it — where the dissolve from band 2 belongs. */
.band-3{aspect-ratio:1672/1300}   /* canvas with equal dark air above and below:
                                     the dissolve out of band 2 now happens in
                                     that air, not across the painting's top */
.band-3::after{
  background:
    /* shade on the right only, and gentler than before: the mountains behind
       the copy are part of the painting, not a backdrop to be blacked out */
    linear-gradient(270deg,rgba(7,10,16,.86) 0%,rgba(7,10,16,.44) 30%,rgba(7,10,16,.02) 60%),
    linear-gradient(to bottom,rgba(7,10,16,0) 0%,rgba(7,10,16,0) 34%,rgba(7,10,16,.06) 70%,var(--deep) 100%);
}
/* A blurred duplicate of the painting was tried here to dramatise the change
   of medium and removed: the face and the eyes sit at the very top of this
   canvas, exactly where such a layer has to live, so it blurred away the one
   thing block 3 exists to show. The change of medium already reads on its own
   — the painted cat surfaces out of the photographed rock while band 2 is
   still fading. Nothing replaced it.
   ---------------------------------------------------------------------- */

.b3-veil{                     /* cold mountain fog across the change of medium */
  position:absolute;left:-8%;right:-8%;top:-4%;height:36%;z-index:-1;
  background:radial-gradient(58% 100% at 50% 100%,rgba(46,66,92,.34),rgba(46,66,92,0) 72%);
  filter:blur(34px);pointer-events:none;
}
.b3-copy{position:absolute;right:var(--lp-pad);top:26%;width:min(33%,390px);text-align:right}
.b3-copy h2{font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.015em}
.b3-copy p{margin-top:20px;color:var(--slate);font-size:16.5px;margin-left:auto;max-width:34ch}
.b3-copy .b3-note{color:var(--glacier);font-style:italic}
.b3-copy .cta-group{margin-top:30px;align-items:flex-end}

/* ══ 4 ═ ТРИ ТЕКСТА ══════════════════════════════════════════════════════════ */
.band-4{padding-bottom:clamp(70px,10vh,130px)}
/* ---------- the scene --------------------------------------------------------
   One picture, shared by all three locales, bled to the band's full width the
   way bands 1-3 are: a gutter here would turn the finale into a banner.

   --b4-city is where the town starts inside the photograph (0 = its top edge,
   1 = its bottom). Everything that has to meet the city is expressed through
   this one number, so re-cropping the picture later means changing one line.

   The mask is the same rule as every other band: reach zero exactly where the
   picture ends, and start transparent at the top so band 3 dissolves into it
   instead of meeting a horizontal seam. */
.b4-scene{
  --b4-ratio:.5628;              /* 941 / 1672, the asset's own proportions */
  --b4-city:.62;                 /* the skyline sits here in the frame */
  position:relative;
  width:100vw;margin-inline:calc(50% - 50vw);
  aspect-ratio:1672 / 941;
  margin-top:clamp(34px,5vh,64px);
}
.b4-scene::before{
  content:"";position:absolute;inset:0;
  background:url("../img/site/block4-manifest.png") center center / cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 87%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 87%,transparent 100%);
}
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .b4-scene::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,var(--deep) 0,rgba(7,10,16,0) 13%,
      rgba(7,10,16,0) 85%,var(--deep) 100%);
  }
}

/* Block 4 shares the page's left rail with blocks 1-3 instead of re-centring
   on a narrower column: a different content origin here is what would make
   the finale read as a separate page. */
.b4-inner{
  position:relative;max-width:1440px;
  /* CENTRED, and that is load-bearing twice over. Blocks 1-3 sit on a 1440
     stage with auto margins, so above 1440 a left-pinned block 4 put its
     heading and ledger on a different rail from the rest of the page. Worse,
     the scene below bleeds with calc(50% - 50vw), where the 50% is half of THIS
     box: with the box pinned left the two halves stopped agreeing and the
     picture slid left by (viewport - 1440) / 2 — 240px on a 1920 screen, with
     the same strip of black left over on the right.
     The earlier note here was right that auto margins kill grid stretch — a
     grid item with them shrinks to max-content and then centres, which collapsed
     this rail to ~890px. width:100% is what gives the stretch back: the box
     takes the whole grid area, max-width caps it at the same 1440 the other
     bands use, and the auto margins only centre what is left over. */
  width:100%;margin-inline:auto;
  /* the picture carries the mass now, so the block does not also need a
     third of a screen of empty air above its heading */
  padding:clamp(118px,17vh,226px) var(--lp-pad) 0;
}
.b4-intro,.ledger{max-width:1040px}
.b4-intro h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;max-width:18ch;letter-spacing:-.01em}
.b4-intro p{margin-top:20px;color:var(--slate);max-width:62ch;font-size:16.5px}

/* A ledger, not a card grid: three rows on the same ground, separated by one
   hairline each. Nothing is boxed and nothing floats — that still holds, the
   ground is just the city now.

   THE LIFT. The scene is 56.28vw tall and the town starts 62% of the way down
   it, so the last 21.4vw of the picture is city. Pulling the ledger up by a
   little less than that (19vw) drops its first row just inside the skyline,
   where the lights are brightest, and lets the last row run out below the
   picture onto the page's own ground. Both numbers are vw because the picture's
   height is, so they cannot drift apart at any width. */
.ledger{
  list-style:none;margin:-19vw 0 0;padding:0;
  position:relative;z-index:1;
  border-top:1px solid rgba(230,236,243,.10);
}
/* One translucent plate under all three rows rather than three cards: the
   ledger stays a ledger, and the town reads through it as a texture rather
   than as decoration behind floating panels. It bleeds a little past the text
   so the wash does not hug the words, and fades in at the top so it never
   draws the horizontal line the rest of the page spends its effort avoiding. */
.ledger::before{
  content:"";position:absolute;z-index:-1;
  inset:0 calc(var(--lp-pad) * -1);
  background:linear-gradient(to bottom,
    rgba(7,10,16,0) 0,rgba(7,10,16,.74) 34px,
    rgba(7,10,16,.74) calc(100% - 46px),rgba(7,10,16,.86) 100%);
}
.ledger-row{
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.1fr) auto;
  align-items:baseline;gap:22px 32px;
  padding:26px 0;border-bottom:1px solid rgba(230,236,243,.10);
  transition:border-color .25s;
}
@media (hover:hover){.ledger-row:hover{border-bottom-color:var(--au-soft)}}
.ledger-row h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.ledger-row p{color:#98a4b3;font-size:16px}
/* The page has one gold and one hover rule for it: rest on --au, step up to
   --au-hi, never leave the family. This control used to go to --ice on hover —
   near-white — which is why it read as the wrong colour, and why on a phone it
   STAYED near-white after a tap, since a touch leaves :hover stuck.
   The resting colour is unchanged and is measured identical to the CTA fill
   (#aa8332). What it gets instead is body: the row sits on the lit city now,
   and 500-weight text with a 34%-alpha rule underneath went thin and washed
   against the lights. More ink, a rule you can actually see, same gold. */
.ledger-row button{
  justify-self:end;background:none;border:0;cursor:pointer;padding:4px 0;
  color:var(--au);font:600 14px/1 var(--font-text);letter-spacing:.02em;
  border-bottom:1px solid rgba(170,131,50,.58);transition:border-color .2s,color .2s;
}
@media (hover:hover){
  .ledger-row button:hover{color:var(--au-hi);border-bottom-color:var(--au-hi)}
}
.ledger-row button:focus-visible{color:var(--au-hi);border-bottom-color:var(--au-hi)}
.ledger-row button:active{color:var(--au-lo);border-bottom-color:var(--au-lo)}

/* ---------- footer: a last line, not a slab -------------------------------- */
.lp-foot{padding-block:44px 54px;color:var(--slate);font-size:14px}
.lp-foot-row{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;
  max-width:1440px;margin-inline:auto;padding-inline:var(--lp-pad);
  border-top:1px solid rgba(230,236,243,.08);padding-top:26px}
.lp-foot-name{font:600 15px/1 var(--font-display);color:var(--ice);letter-spacing:.02em}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:12px 22px}
.lp-foot-links a{color:var(--slate);text-decoration:none;border-bottom:1px solid transparent}
@media (hover:hover){.lp-foot-links a:hover{color:var(--ice);border-bottom-color:var(--au-soft)}}
.lp-foot-links a:active{color:var(--au)}
.lp-foot-legal{margin-left:auto}

/* ---------- dialogs --------------------------------------------------------- */
.sheet{
  border:0;padding:0;color:var(--ice);background:transparent;
  max-width:min(620px,92vw);width:100%;
}
.sheet::backdrop{background:rgba(4,6,10,.78);backdrop-filter:blur(4px)}
.sheet>*{position:relative}
.sheet-contact,.sheet-text{
  background:linear-gradient(180deg,#10161f,#0a0e15);
  border:1px solid rgba(230,236,243,.12);border-radius:16px;
  padding:34px clamp(22px,4vw,44px) 38px;
  box-shadow:0 32px 80px rgba(0,0,0,.65);
}
/* The Manifesto, the Code and the Ethics are full documents, not blurbs: the
   sheet has to scroll or a phone simply cannot reach the end of them. The
   scroll lives on an inner element so the close button stays pinned. */
.sheet-text{padding-right:clamp(14px,2vw,22px)}
.sheet-body{
  /* Fallback first, for anything that does not know dvh. */
  max-height:min(78vh,760px);
  /* THE REAL ONE. 100vh on a phone is the LARGE viewport — the height with the
     browser chrome hidden — and it does not shrink when the toolbar is on
     screen. A panel sized in vh is therefore taller than the box the reader
     actually has, and its bottom goes under the toolbar: the panel's own 38px
     of padding, and with it the last line of the document. dvh tracks the
     visible box instead. The safe-area inset comes off the same budget rather
     than being added as padding, so the panel keeps clear of the home indicator
     without growing to meet it. */
  max-height:min(calc(78dvh - env(safe-area-inset-bottom,0px)),760px);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:clamp(8px,2vw,22px);
  /* Scrolled to the very end, the last line used to sit flush on the scroller's
     edge — measured at 0px of clearance in all three documents, all three
     languages and every width. A document needs somewhere to stop. */
  padding-bottom:clamp(16px,3.5vw,26px);
  scrollbar-width:thin;scrollbar-color:rgba(170,131,50,.5) transparent;
}
.sheet-body::-webkit-scrollbar{width:8px}
.sheet-body::-webkit-scrollbar-thumb{background:rgba(170,131,50,.45);border-radius:4px}
.sheet-body::-webkit-scrollbar-track{background:transparent}

/* the migrated documents */
.sheet-body h2{margin-bottom:22px}
.sheet-body p{margin:0;color:var(--slate);font-size:16px;line-height:1.68}
.sheet-body p + p{margin-top:14px}
.sheet-body b{color:var(--ice);font-weight:600}
.doc-lead{color:var(--ice) !important;margin-top:26px !important;font-size:17px !important}
.doc-item{margin-top:28px;padding-top:22px;border-top:1px solid rgba(230,236,243,.09)}
.doc-item h3{font:600 20px/1.3 var(--font-display);color:var(--ice);margin:0 0 4px}
.doc-n{
  font:500 11px/1 var(--font-text);letter-spacing:.2em;color:var(--au);
  margin:0 0 10px !important;
}
.doc-sub{color:var(--glacier) !important;margin:0 0 10px !important;font-size:15px !important}
.sheet-x{
  position:absolute;right:14px;top:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:none;border:1px solid rgba(230,236,243,.14);
  color:var(--slate);font-size:22px;line-height:1;cursor:pointer;
}
@media (hover:hover){.sheet-x:hover{color:var(--ice);border-color:var(--au)}}
.sheet-x:active{color:var(--au);border-color:var(--au)}
.sheet-kicker{font:600 11px/1 var(--font-text);letter-spacing:.22em;text-transform:uppercase;color:var(--au);margin-bottom:22px}
.sheet-text h2{font-size:clamp(26px,3vw,36px);margin-bottom:6px}

.contact-list{list-style:none;margin:0;padding:0}
.contact-list li+li{border-top:1px solid rgba(230,236,243,.08)}
.contact-list a{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px 2px;text-decoration:none;color:var(--ice);font-size:17px;
}
.contact-list a span{color:var(--slate);font-size:14px}
@media (hover:hover){.contact-list a:hover{color:var(--au)}}
.contact-list a:active{color:var(--au-lo)}

.sheet-video{max-width:min(980px,94vw);padding-top:52px}
.video-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#0a0e15;border:1px solid rgba(230,236,243,.12);border-radius:14px;overflow:hidden;
  display:grid;place-items:center;
}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.video-pending{color:var(--slate);font-size:15px;text-align:center;padding:26px;max-width:38ch}
.video-pending b{display:block;color:var(--ice);font:600 19px/1.3 var(--font-display);margin-bottom:8px}
.video-cap{margin-top:14px;color:var(--slate);font-size:14px}
.sheet-video .sheet-x{right:0;top:2px;color:var(--ice);
  background:rgba(12,17,26,.85);border-color:rgba(230,236,243,.28)}

/* ---------- responsive ══ TABLET ~834 ═══════════════════════════════════════
   Not a shrunk desktop: the animal grows relative to the frame, the trail
   loses its far end (there is no room for seven prints to read), and both
   measurements move off the centre of the mountain. */
@media (max-width:1100px){
  /* Same scene, less room: the copy gets wider and the Video 2 label drops
     under its ring so it cannot run off the right edge. Band proportions are
     left alone — they are what keeps the cue on the gold prints. */

  /* Block 1's height is a share of its WIDTH (aspect-ratio 1672/1060), but the
     copy under the split line is set in px and does not shrink with it. Below
     roughly 990px the band therefore ends before its own text does and block 2's
     heading lands on top of the Video 1 button. Give the band a floor: it is the
     same repair the phone got, and above ~990px the aspect ratio is still the
     larger of the two, so the accepted desktop and wide-tablet scenes are
     untouched. Kazakh and English make the run longer than the Russian, which is
     what turned a tight -33px into -58px. */
  .band-1{min-height:648px}

  .b2-copy{width:min(48%,400px);top:8%}
  .b3-copy{width:min(42%,360px);top:24%}
  .mark-cap{font-size:13.5px}
  .ledger-row{grid-template-columns:minmax(130px,1fr) minmax(0,1.7fr) auto;gap:18px 24px}
}

/* ---------- ══ MOBILE ~390 ═════════════════════════════════════════════════
   Portrait assets, and a different reading order: on a phone the numbers stop
   being annotations floating over a wide mountain and become the first thing
   in the column, stacked over the dark mass where they are legible. */
@media (max-width:760px){
  :root{--lp-pad:20px}
  body.lp{font-size:16px}

  /* same real asset, same dead-margin correction, one size down — see the
     desktop rule for why the box and the visible disc are different numbers */
  /* THE HEADER NOW CARRIES THREE CONTROLS, NOT TWO.
     .lp-brand has margin-right:auto and will not shrink, so when the row runs
     out of width the wordmark keeps painting straight across the switcher
     instead of overflowing its own box — which is why a box-overlap test misses
     it. There is no shrinking to be had, so the width has to be found: every
     control gives back a few pixels, and the wordmark gives back the most.
     Kazakh is the tight case (ҚАЗ + Байланысу), so the budget is set by it. */
  .lp-top{padding-block:12px;gap:8px}
  .lp-contact{padding:11px 13px;font-size:13px}
  .lang > summary{padding:11px 10px;gap:5px;font-size:12px}
  .lang-menu{min-width:164px}
  .lp-brand{gap:9px}
  .lp-brand img{--mark:58px}
  .lp-brand span{font-size:16px}

  .band + .band{margin-top:clamp(-150px,-11vh,-80px)}

  /* phones get the portrait plates, and those DO want cover */
  .band-1,.band-2,.band-3{aspect-ratio:auto}
  /* The floor is what stops block 2 climbing into block 1's CTA.
     .b1-say is anchored at --split + 150px — a share of THIS band plus a fixed
     offset — so when a browser bar shrinks svh the band shrinks while the group
     does not, and the text walks toward the bottom edge. Measured: at 390x844
     the gap to block 2's heading is 77px, at 390x700 it is -3px and at 390x640
     it is -42px, i.e. a real overlap on any phone showing browser chrome.
     790px is the shortest band that still holds the group with clearance; the
     min() keeps tall viewports exactly as they were. */
  .band-1{min-height:max(min(104svh,900px),790px);padding-bottom:34px}
  .band-1 .band-img{
    background-image:url("../img/site/block1-mobile.png");
    background-size:cover;background-position:52% 30%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0 72%,rgba(0,0,0,.42) 88%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0 72%,rgba(0,0,0,.42) 88%,transparent 100%);
  }
  .band-1::after{
    background:linear-gradient(to bottom,rgba(7,10,16,.46) 0%,rgba(7,10,16,0) 26%,
      rgba(7,10,16,.24) 48%,rgba(7,10,16,.62) 74%,rgba(7,10,16,.94) 92%,rgba(7,10,16,.98) 100%);
  }
  /* Block 1 on a phone is the ACCEPTED DESKTOP SCHEME ADAPTED, not a second
     concept. An earlier build stacked the two numbers in a plain column at the
     foot of the mountain, each against its own short rule; it read as two
     unrelated labels, because the thing that makes 20/80 legible is the line
     that joins them. So the same four parts are kept here, only re-proportioned
     for a narrow portrait frame:

        20        above the line, on the light part
       ─────────  one gold line straight across the mountain
              │   turning down the right edge …
              80  … to the dark mass it measures
       text + ▷   inside the dark field those two frame

     The frame is the whole band here (not the picture's own box as on desktop),
     because the portrait plate is `cover`: band coordinates and picture
     coordinates coincide, so --split can be read straight off the band. */
  .b1-frame{
    --split:38%;   /* the snow/rock boundary in the portrait crop */
    position:absolute;inset:0;aspect-ratio:auto;display:block;
  }
  .split{display:block;left:var(--lp-pad);right:var(--lp-pad)}
  .measure{display:block}
  /* the 20 extent rises to the line; the 80 extent drops from its right end,
     and that turn is what carries the eye right and then down */
  .measure-20{left:var(--lp-pad);top:14%;height:calc(var(--split) - 14%)}
  .measure-80{right:var(--lp-pad);top:var(--split);height:26%}
  .mark-arm{display:block}

  .mark{
    position:absolute;max-width:none;padding:0;text-align:left;
    left:auto;right:auto;top:auto;bottom:auto;
  }
  .mark::before{display:none}   /* the extents are back; the stand-in rule is not */
  .mark::after{inset:-38px -52px -42px -44px}
  .mark-num{font-size:clamp(46px,13vw,60px)}
  .mark-cap{margin-top:6px;font-size:13.5px;max-width:22ch}

  .mark-20{
    left:calc(var(--lp-pad) + 30px);
    bottom:calc(100% - var(--split) + 16px);
  }
  .mark-80{
    right:calc(var(--lp-pad) + 30px);
    top:calc(var(--split) + 16px);
    text-align:right;
  }
  .mark-80 .mark-cap{margin-left:auto}

  /* the sentence and its trigger sit below 80, inside the same dark field, so
     the call to action stays part of the composition instead of dropping to the
     foot of the band */
  .b1-say{
    position:absolute;left:var(--lp-pad);right:calc(var(--lp-pad) + 24px);
    top:calc(var(--split) + 150px);
    width:auto;align-items:flex-start;text-align:left;
  }
  .b1-say::after{inset:-26px -30px -30px -26px}
  .b1-say p{font-size:16.5px;line-height:1.5}
  .b1-say p br{display:none}      /* let the real copy wrap to the column width */
  .b1-say .cta-group{margin-top:20px}
  .band-1 .stage{display:block}

  /* Block 2 on a phone is now the SAME approved scene as desktop and tablet.
     It used to be the earlier build — a cut-out animal and sprite prints laid
     over a separate plate — which is exactly the sticker reading the owner
     rejected. The bonus scene is a 1536x2730 portrait frame, so it suits a
     phone better than it suits desktop: the animal walks a ridge that actually
     carries him and his prints, two of them already matte gold, lie behind him
     on it. Nothing is layered on top any more.

     The band carries an aspect-ratio rather than a viewport height, for the
     same reason it does on desktop: the ratio between picture and band then
     stays fixed at every screen, so the cue below stays on the gold prints
     instead of drifting with the window.

     Framing: the animal spans x 0.21-0.62 of the plate and the gold prints sit
     at 0.72-0.83, so the visible window has to be at least 0.62 of the picture
     wide or one of them is cut. background-size:140% leaves that plus a
     margin; retune it and background-position together, never alone. */
  /* ON A PHONE THE SCENE LEADS AND THE COPY ANSWERS IT (owner revision).
     The walking leopard is the pause after block 1; only then does the reader
     meet "След Барса". So the plate sits at the TOP of the section and the copy
     flows under it.

     Everything here is sized in vw, not in band percentages and not in viewport
     height: the plate is a fixed share of the WIDTH, the section is as tall as
     the plate plus the copy, and nothing has to be reserved, masked away or
     min-heighted to make room. That is what keeps the black voids from coming
     back — the old aspect-ratio and the absolute copy offsets were only ever
     scaffolding for the previous composition and are gone.

     113vw is the scene height: the earlier 66%-of-band plate ran 607px at 390
     and spent 246 of them on empty mountain above the animal. At 441px the
     walking leopard, his tail, the gold prints and the ridge all still read —
     the vertical window just starts lower. */
  .band-2{aspect-ratio:auto;min-height:auto;padding-bottom:0}
  /* `.band + .band` is two classes and outranks a bare `.band-2`, so the section
     margins have to be written at the same weight or they are silently ignored */
  .band + .band-2{margin-top:-90px}
  .band-2 .band-img{
    background-image:url("../img/site/block2-scene.jpg");
    inset:0 0 auto 0;height:113vw;
    background-size:140% auto;background-position:57% 43%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 80%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 80%,transparent 100%);
  }
  .band-2::after{background:none}   /* the copy sits on the page's own ground */
  .b2-grade{inset:0 0 auto 0;height:113vw}
  /* the copy clears the plate; the DOM has the cue before the copy, so the
     reading order is set with `order` rather than by moving markup the desktop
     composition depends on */
  .band-2 .stage{display:flex;flex-direction:column;align-items:flex-start;
    padding-top:calc(113vw + 34px);padding-bottom:0}
  .b2-scene{display:none}          /* the layered build is gone from the phone too */
  .b2-cue-glow{display:none}       /* the prints are far below the action now */

  /* no shade pools any more: neither copy sits on a picture now */
  .b2-copy h2,.b3-copy h2{font-size:26px;line-height:1.14}
  .b2-copy p,.b3-copy p{font-size:16px;line-height:1.55;margin-top:16px}
  .b2-copy .cta-group,.b3-copy .cta-group,.b2-cue{gap:10px}
  .b2-copy{position:static;order:1;width:auto;margin:0}
  .b2-copy p{max-width:none}
  .b2-cue{position:relative;left:auto;top:auto;order:2;margin-top:24px}

  /* Block 3's copy is meant to read as the continuation of block 2's, so the
     section carries no overlap of its own: margin-top:0 makes the distance from
     the block 2 CTA to this heading a plain, predictable 44px instead of
     something that moves with the viewport height. The painting then follows
     the CTA as the next pause.

     133vw for the canvas, against 57%-of-band before: `cover` in a box that
     shape keeps the whole painting height and a 0.42-wide window of it, so the
     face is complete, both eyes are well inside, the head is not chopped and
     the front paws and body still carry the artwork. The tail runs to 0.85 of
     the canvas and cannot be held without shrinking the animal to a letterbox
     strip, so it is partly out of frame by choice. */
  .band-3{aspect-ratio:auto;min-height:auto;padding-bottom:0}
  .band + .band-3{margin-top:0}
  .band-3 .band-img{
    inset:auto 0 0 0;height:133vw;
    background-size:cover;background-position:16% 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%);
  }
  .band-3::after{background:none}
  .band-3 .stage{display:flex;flex-direction:column;justify-content:flex-start;
    min-height:0;padding-top:44px;padding-bottom:calc(133vw + 30px)}
  .b3-copy{position:static;width:auto;text-align:left;margin-top:0}
  .b3-copy p{margin-left:0;max-width:none}
  .b3-copy .cta-group{align-items:flex-start}

  /* The phone keeps the WHOLE frame — the tail runs to the left edge of the
     picture and any zoom would cut it off — so the scene is only 56vw tall
     here, which is exactly the compact band the owner asked for. The lift is
     the same 19vw rule, so the first row lands on the skyline just as it does
     on a desktop.

     The lift itself is gentler here, and that is a phone-specific correction
     rather than a different idea. The city band is a share of the WIDTH — about
     83px at 390 — while a row is around 130px tall, so the desktop lift would
     bury the whole skyline under the first row and leave a nine-pixel sliver of
     lights. Starting the ledger ~40px below the skyline keeps half the town in
     the open and still lands the first row on it. */
  .b4-inner{padding-top:104px}
  .b4-intro h2{max-width:none}
  .b4-scene{margin-top:26px}
  .ledger{margin-top:-11vw}
  .ledger::before{
    inset:0 calc(var(--lp-pad) * -1);
    background:linear-gradient(to bottom,
      rgba(7,10,16,0) 0,rgba(7,10,16,.78) 26px,
      rgba(7,10,16,.78) calc(100% - 34px),rgba(7,10,16,.88) 100%);
  }
  .ledger-row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .ledger-row button{justify-self:start;margin-top:6px}

  .lp-foot-legal{margin-left:0;width:100%}
  .sheet-video .sheet-x{right:6px;top:-46px}
}

/* ---------- motion: one scroll-driven reveal, removable as one block -------- */
/* ---------- ══ VERY NARROW PHONES ══════════════════════════════════════════
   Below ~370px an eleven-character wordmark, a language control and a contact
   button do not fit on one row in ANY of the three languages, and the trims
   above are already spent. The medallion is the brand here: it is the same mark
   people recognise, the document title still says Almaty Bars, and the wordmark
   comes back the moment there is room for it. Nothing else about the header
   changes — this is a width floor, not a different design. */
@media (max-width:369px){
  .lp-brand span{display:none}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:lp-reveal linear both;animation-timeline:view();animation-range:entry 6% cover 26%}
    @keyframes lp-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}