/* Inter — the running text and the text on the stones. Variable font (all weights in one file per script), served from the site itself. SIL OFL 1.1, see fonts/inter-LICENSE.txt */
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/inter-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2074,U+20AC,U+2122;}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(../fonts/manrope-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2074,U+20AC,U+2122;}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(../fonts/manrope-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

:root{
  --sky-top:#aeb8c0;--sky-bottom:#d9e0e4;
  --ink:#111417;--ink-2:#2a3037;--muted:#6b727a;--line:rgba(17,20,23,.1);
  --light:#eef5f4;
  --teal:#4ec9b8;--teal-ink:#1d7f73;   /* brand teal (logo guide); the darker one is for text on the snow */
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(18px,4vw,56px);
  --display:Manrope,Inter,system-ui,sans-serif;
}
/* Manrope has no ә ғ қ ң ұ — Kazakh headings use Inter throughout instead of mixing two fonts in one word */
:root:lang(kk){--display:Inter,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.locked,body.locked{overflow:hidden}
body{background:var(--sky-bottom);color:var(--ink);font:400 16px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:rgba(78,201,184,.35);color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* scene layers */
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
canvas#fx{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.fog{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(to top,rgba(226,232,236,.95) 0%,rgba(226,232,236,.75) 35%,rgba(226,232,236,0) 70%);transition:opacity .2s linear}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;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 baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dim{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.overlay{position:fixed;inset:0;background:#fff;z-index:30;opacity:1;pointer-events:none;transition:opacity .4s var(--ease)}
.overlay.is-off{opacity:0}

/* header: dark ink on the snow, light while the scene behind it is dimmed */
.hdr{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,2.4vw,26px) var(--pad);color:var(--ink);transition:color .45s var(--ease)}
.hdr__logo{display:block;border-radius:4px}
.hdr__logo svg{height:18px;width:auto;display:block;color:inherit}
.hdr__right{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px)}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px}
.lang button{all:unset;cursor:pointer;font:500 12px/1 Inter,sans-serif;letter-spacing:.05em;color:#525960;padding:7px 8px;border-radius:999px;transition:color .3s,background .3s}
.lang button:hover{color:var(--ink)}
.lang button:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.lang button[aria-pressed="true"]{color:var(--ink);background:rgba(17,20,23,.08)}
body.is-dark .hdr{color:var(--light)}
body.is-dark .lang button{color:rgba(238,245,244,.62)}
body.is-dark .lang button:hover,body.is-dark .lang button[aria-pressed="true"]{color:var(--light)}
body.is-dark .lang button[aria-pressed="true"]{background:rgba(238,245,244,.16)}
.hdr__cta{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font:500 13px/1 Inter,sans-serif;letter-spacing:.01em;transition:background .35s var(--ease),color .35s var(--ease),transform .3s var(--ease)}
.hdr__cta:hover{background:#000;transform:translateY(-1px)}
body.is-dark .hdr__cta{background:var(--light);color:var(--ink)}
body.is-dark .hdr__cta:hover{background:#fff}

/* loader: wordmark + progress over the white screen while the intro frames arrive (shown only if that takes a moment) */
.loader{position:fixed;inset:0;z-index:31;display:grid;place-content:center;justify-items:center;gap:26px;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}
body[data-state="loading"] .loader{opacity:1;transition-delay:.3s}
.loader svg{height:20px;width:auto;color:var(--ink)}
.loadbar{position:relative;width:132px;height:2px;border-radius:2px;background:rgba(17,20,23,.08);overflow:hidden}
.loadbar i{position:absolute;inset:0;background:var(--teal);transform-origin:left;transform:scaleX(var(--l,0));transition:transform .35s var(--ease)}

/* acts */
main{position:relative;z-index:2}
.act{position:relative;min-height:100svh}
.act--2,.act--b,.act--4{height:100svh}
.loop-tail{height:100svh}   /* room to scroll past the loop point; never seen — the page wraps before it */
/* act 1: who we are, under the monolith; a soft snow-fog scrim keeps it readable over the rocks */
.intro{position:absolute;left:0;right:0;bottom:0;display:grid;gap:14px;padding:0 var(--pad) clamp(22px,5.5vh,56px);pointer-events:none}
/* the haze also fades out BELOW the text (26vh tail), so once the first screen scrolls up there is no hard edge */
.intro::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-26vh;height:calc(100% + 44vh);background:linear-gradient(to top,rgba(228,233,236,0),rgba(228,233,236,.08) 5vh,rgba(228,233,236,.3) 11vh,rgba(228,233,236,.62) 18vh,rgba(228,233,236,.86) 26vh,rgba(228,233,236,.5) calc(45% + 14vh),rgba(228,233,236,0));opacity:0;transition:opacity 1s var(--ease)}
.intro>*{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.intro.is-on::before{opacity:1}
.intro.is-on>*{opacity:1;transform:none;pointer-events:auto}
.intro.is-on>:nth-child(2){transition-delay:.08s}.intro.is-on>:nth-child(3){transition-delay:.16s}
.intro__eyebrow{font:500 12px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.intro__lead{font:700 clamp(28px,3.5vw,52px)/1.03 var(--display);letter-spacing:-.035em;max-width:17em;text-wrap:balance}
.intro__row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.intro__cta{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 22px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font:500 15px/1 Inter,sans-serif;transition:background .3s,transform .3s var(--ease)}
.intro__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.intro__cta:hover{background:#000}.intro__cta:hover svg{transform:translateX(3px)}
/* frosted pill: readable over the light snow and over the dark rocks alike */
.hint{font:500 12px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px;padding:8px 14px 8px 16px;border-radius:999px;background:rgba(238,242,244,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
.hint--scroll b{display:block;width:1px;height:22px;background:linear-gradient(var(--ink),transparent);animation:drop 1.6s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* act 2: the stone in flight (a canvas the size it has in front of the viewer) and the text on its face. The stage clips it to the screen — on phones it is wider than the screen */
.stage{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.slab{position:absolute;left:0;top:0;transform-origin:50% 50%;visibility:hidden;will-change:transform}
.slab canvas{display:block;width:100%;height:100%}
/* the text on a stone: one family — Inter — on the axis of the face, quiet. It should read as part of the slab: the
   letters are filled with the stone's own marble in a light tone (.is-stone; the picture is made and placed by act2 in
   main.js), so the veins run through them; the face is only a shade darker under the words (a soft shadow, not a box —
   it must not count as the text's overflow when the text is fitted); a thin dark edge seats each letter in the stone
   and a faint cold light, the colour of the crystal, lies around it. Hierarchy by size and strength, not by effects. */
.slab__text{position:absolute;transform-origin:50% 50%;will-change:opacity,transform;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  --ink:240,246,247;color:rgb(var(--ink));--stone:Inter,system-ui,sans-serif;font-family:var(--stone);opacity:0;--glow:170,232,222;
  text-shadow:0 0 .1em rgba(3,6,8,.95),0 0 .3em rgba(3,6,8,.7),0 0 .6em rgba(var(--glow),.3);-webkit-font-smoothing:antialiased;
  background:rgba(3,6,8,.52);border-radius:24%;box-shadow:0 0 2.6em 1.9em rgba(3,6,8,.52)}
.slab__text i{display:block;font:600 .25em/1.4 var(--stone);letter-spacing:.15em;text-indent:.15em;text-transform:uppercase;opacity:.8;font-style:normal;margin-bottom:1em;text-wrap:balance;max-width:30em}
.slab__text b{display:block;font:700 .92em/1.08 var(--stone);letter-spacing:-.022em;margin-bottom:.46em;text-wrap:balance}
.slab__text strong{display:none}
.slab__text span{display:block;font:600 .44em/1.46 var(--stone);letter-spacing:.006em;text-wrap:balance;max-width:22em}
.slab__text.is-stone{text-shadow:none}
.slab__text.is-stone>*{background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 .07em rgba(3,6,8,.95)) drop-shadow(0 0 .22em rgba(3,6,8,.7)) drop-shadow(0 0 .55em rgba(var(--glow),var(--glow-a,.26)))}
.slab__text b{--glow-a:.4}

/* act 2 progress: one tick per service, the current one fills as its slab plays */
.rail{position:fixed;z-index:4;right:var(--pad);top:50%;display:grid;gap:8px;transform:translateY(-50%);pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.rail.is-on{opacity:1}
.rail i{display:block;width:2px;height:26px;border-radius:2px;background:rgba(17,20,23,.16);overflow:hidden;transition:background .45s var(--ease)}
body.is-dark .rail i{background:rgba(238,245,244,.3)}
.rail i::after{content:"";display:block;width:100%;height:100%;background:var(--teal);transform-origin:top;transform:scaleY(var(--f,0))}

/* act 3: the contact screen — a podium in the mist with the channel's logo in particles (podium.js, #cscene).
   The scene slides with the act-3 section: up from below after the services, up and away into the blizzard. */
.cscene{position:fixed;left:0;top:0;width:100%;z-index:0;visibility:hidden;will-change:transform;pointer-events:none}
.cscene canvas{position:absolute;left:0;top:0;display:block}
/* the bank of mist the camera rises through between the monolith and the contact screen (moved by main.js) */
.mist{position:fixed;left:0;top:0;width:100%;z-index:0;visibility:hidden;pointer-events:none;will-change:transform;
  background:linear-gradient(rgba(221,227,230,0),rgba(221,227,230,.12) 5%,rgba(221,227,230,.45) 11%,rgba(221,227,230,.82) 17%,#dde3e6 22.7%,#dde3e6 77.3%,rgba(221,227,230,.82) 83%,rgba(221,227,230,.45) 89%,rgba(221,227,230,.12) 95%,rgba(221,227,230,0))}
.act--3{height:100svh}
.contact{position:absolute;inset:0;overflow:hidden;--step:clamp(150px,15vw,220px)}
.contact__head{position:absolute;left:var(--pad);top:clamp(96px,17vh,170px);max-width:min(31vw,440px);display:grid;gap:12px}
.contact__eyebrow{font:500 12px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
h2{font:700 clamp(30px,3.6vw,54px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.contact__lead{color:#2a3137;font-weight:500;text-wrap:balance;max-width:24em}
.carrow{position:absolute;z-index:1;top:var(--logo-cy,45%);width:clamp(56px,6vw,88px);height:40px;margin-top:-20px;padding:0;display:grid;place-items:center;border:0;background:none;color:var(--ink);cursor:pointer;opacity:.5;transition:opacity .3s,transform .35s var(--ease)}
.carrow svg{width:100%;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.carrow--prev{left:calc(50% - var(--logo-l,400px) * .64 - clamp(56px,6vw,88px))}
.carrow--next{left:calc(50% + var(--logo-l,400px) * .64)}
.carrow:hover,.carrow:focus-visible{opacity:1}.carrow--prev:hover{transform:translateX(-4px)}.carrow--next:hover{transform:translateX(4px)}
.carousel{position:absolute;left:50%;top:var(--pod-ty,85%);width:calc(var(--step) * 3);height:72px;transform:translate(-50%,-60%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.carousel__item{--d:0;position:absolute;left:50%;top:50%;display:grid;justify-items:center;gap:6px;padding:12px 20px;white-space:nowrap;text-decoration:none;color:var(--ink);transform:translate(calc(-50% + var(--d) * var(--step)),-50%);transition:transform .75s var(--ease),opacity .5s var(--ease)}
.carousel__item b{font:600 14px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
.carousel__item span{font:500 12px/1 Inter,sans-serif;color:#46505a;letter-spacing:.02em}
.carousel__item:not(.is-cur) span{visibility:hidden}
.carousel__item::before{--c:var(--ink);content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);background:
  linear-gradient(var(--c),var(--c)) 0 0/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.5px 10px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 10px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 10px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 10px no-repeat}
.carousel__item.is-cur::before{opacity:1}
.carousel__item.is-cur:hover b,.carousel__item.is-cur:focus-visible b{color:var(--teal-ink)}.carousel__item.is-cur:hover::before{--c:var(--teal-ink)}
.contact__list{display:none}
.contact__geo{position:absolute;right:var(--pad);bottom:20px;font:400 12px/1.4 Inter,sans-serif;color:#46505a}

/* fallback: no WebP / reduced motion */
.fallback{position:relative;z-index:3;padding:120px var(--pad) 80px;display:grid;gap:24px;max-width:1100px;margin:0 auto}
.fallback img{width:100%;height:auto;border-radius:12px}
.fallback h1{font:700 clamp(40px,7vw,104px)/.98 var(--display);letter-spacing:-.04em}
.fallback__copy{display:grid;gap:22px;max-width:760px}
.fallback__copy>p:first-of-type{font:600 clamp(18px,1.6vw,22px)/1.4 var(--display);letter-spacing:-.015em;color:var(--ink-2);text-wrap:pretty}
.fallback ul{list-style:none;display:grid}
.fallback li{padding:16px 0;border-top:1px solid var(--line);color:var(--ink-2);text-wrap:pretty}
.fallback li b{display:block;margin-bottom:4px;font:700 19px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
body[data-state="fallback"] .hdr{background:rgba(217,224,228,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body[data-state="fallback"]{background:linear-gradient(var(--sky-top),var(--sky-bottom)) fixed}
body[data-state="fallback"]{display:flex;flex-direction:column}body[data-state="fallback"] .fallback{order:-1;width:100%}
body[data-state="fallback"] canvas,body[data-state="fallback"] .cscene,body[data-state="fallback"] .mist,body[data-state="fallback"] .carrow,body[data-state="fallback"] .carousel,body[data-state="fallback"] .overlay,body[data-state="fallback"] .stage,body[data-state="fallback"] .rail,body[data-state="fallback"] .loader,
body[data-state="fallback"] .act--1,body[data-state="fallback"] .act--2,body[data-state="fallback"] .act--b,body[data-state="fallback"] .act--4{display:none}
/* the static page keeps the real contact block, so every "Contact" link has somewhere to go */
body[data-state="fallback"] main{max-width:1100px;margin:0 auto}
body[data-state="fallback"] .act--3{height:auto;min-height:0;padding:0 var(--pad) 80px}
body[data-state="fallback"] .contact{position:static;overflow:visible;display:grid;gap:18px;justify-items:center;text-align:center}
body[data-state="fallback"] .contact__head{position:static;max-width:none;justify-items:center}
body[data-state="fallback"] .contact__geo{position:static}
.contact__list{list-style:none;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
body[data-state="fallback"] .contact__list{display:flex}
.contact__list a{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);text-decoration:none;font:500 15px/1 Inter,sans-serif;color:var(--ink)}
.contact__list a:hover{background:#fff;border-color:rgba(17,20,23,.25)}
.contact__list svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}

@media (max-width:600px){
  .hdr{gap:10px}.hdr__logo svg{height:15px}
  .lang{gap:0;padding:0}.lang button{padding:7px 6px;font-size:11px}
  .hdr__cta{height:30px;padding:0 12px;font-size:12px}
  .intro__eyebrow{font-size:clamp(9px,2.8vw,10.5px);letter-spacing:.06em;white-space:nowrap}  /* one line on any phone ≥ 320 px */
  .intro{gap:10px}.intro::before{height:calc(100% + 40vh);background:linear-gradient(to top,rgba(228,233,236,0),rgba(228,233,236,.09) 5vh,rgba(228,233,236,.34) 11vh,rgba(228,233,236,.7) 18vh,rgba(228,233,236,.95) 26vh,rgba(228,233,236,.8) calc(55% + 12vh),rgba(228,233,236,0))}.intro__lead{font-size:clamp(25px,7.4vw,32px)}
  .intro__cta{height:42px;padding:0 16px 0 18px;font-size:14px}
  .hint{padding:7px 11px 7px 13px;font-size:10.5px;gap:8px}
  .rail{top:auto;bottom:22px;left:50%;right:auto;grid-auto-flow:column;transform:translateX(-50%)}
  .rail i{width:22px;height:2px}.rail i::after{transform-origin:left;transform:scaleX(var(--f,0))}
  /* contacts: heading on top, logo in the middle, the channel switch on the podium with the arrows at its sides */
  .contact{--step:44vw}
  .contact__head{left:var(--pad);right:var(--pad);top:80px;max-width:none;justify-items:center;text-align:center;gap:8px}
  .contact h2{font-size:clamp(26px,7.6vw,34px)}.contact__lead{font-size:14px}
  .carrow{top:var(--pod-ty,82%);width:44px;margin-top:-24px;opacity:.7}.carrow--prev{left:10px}.carrow--next{left:auto;right:10px}
  .carousel{width:calc(100% - 120px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}   /* one channel at a time between the arrows */
  .contact__geo{left:0;right:0;bottom:12px;text-align:center}
}
@media (max-width:370px){.hdr__logo svg{height:13px}.lang button{padding:7px 4px}.hdr__cta{padding:0 10px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.hint--scroll b{animation:none}}