/* Eastern Kazakhstan · eastkz.shhaizada.dev
   Scale system: 1rem = 100px of the 3840px Figma frame (root font = 100vw/38.4).
   Every value below is the exact Figma pixel value divided by 100. */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url(fonts/familjen-grotesk-latin.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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url(fonts/familjen-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* Width-fit vs height-fit, whichever keeps a full 3840x2400 frame on screen:
     each section then matches the viewport height exactly, like the Figma frames. */
  font-size: min(calc(100vw / 38.4), calc(100vh / 24));
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: #f4f6f4;
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: #5ba13c; color: #f4f6f4; }

a { color: inherit; text-decoration: none; }
.u { text-decoration: underline; text-underline-position: from-font; }
.green { color: #5ba13c; }
img { display: block; }

.page { width: 100%; position: relative; }

/* Full-width band per section; the 3840-grid column is centered inside.
   On wider-than-16:10 screens the hero photo and the footer green bleed
   across the whole band while the layout column stays exactly proportional. */
section, footer.footer {
  position: relative;
  width: 100%;
  overflow: hidden;
}
section { background: #f4f6f4; }

.frame {
  position: relative;
  width: 38.4rem;
  height: 100%;
  margin: 0 auto;
}
.cta .frame, .acts .frame, .immerse .frame { overflow: hidden; }

/* Cropped-image helper: Figma image fills reproduced with % offsets */
.crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.crop img { position: absolute; max-width: none; }
.crop.dim { opacity: .5; }
.inset-shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* ============ REVEAL / ANIMATION SYSTEM ============ */

[data-rv="fade"] {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1) var(--d, 0s);
}
[data-rv="fade"].in { opacity: 1; }

[data-rv="up"] {
  opacity: 0;
  transform: translate(var(--tx, 0rem), .45rem);
  transition: opacity 1s cubic-bezier(.16,1,.3,1) var(--d, 0s),
              transform 1s cubic-bezier(.16,1,.3,1) var(--d, 0s);
}
[data-rv="up"].in { opacity: 1; transform: translate(var(--tx, 0rem), 0rem); }

[data-rv="rise"] {
  opacity: 0;
  transform: translateY(16%);
  transition: opacity 1.3s cubic-bezier(.16,1,.3,1) var(--d, 0s),
              transform 1.3s cubic-bezier(.16,1,.3,1) var(--d, 0s);
}
[data-rv="rise"].in { opacity: 1; transform: translateY(0); }

[data-rv="pop"] {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .7s cubic-bezier(.34,1.56,.64,1) var(--d, 0s),
              transform .7s cubic-bezier(.34,1.56,.64,1) var(--d, 0s);
}
[data-rv="pop"].in { opacity: 1; transform: scale(1); }
[data-rv="pop"].in:hover { transform: scale(1.09); }

/* The clip lives on the inner .crop, not on the observed card itself:
   Chromium treats a fully clip-pathed target as never intersecting. */
[data-rv="clip"] .crop {
  clip-path: inset(101% 0 0 0);
  transition: clip-path 1.3s cubic-bezier(.6,.05,.15,1) var(--d, 0s);
}
[data-rv="clip"][data-clip="left"] .crop  { clip-path: inset(0 101% 0 0); }
[data-rv="clip"][data-clip="right"] .crop { clip-path: inset(0 0 0 101%); }
[data-rv="clip"].in .crop { clip-path: inset(0 0 0 0); }
[data-rv="clip"] .inset-shadow {
  opacity: 0;
  transition: opacity 1.3s cubic-bezier(.16,1,.3,1) var(--d, 0s);
}
[data-rv="clip"].in .inset-shadow { opacity: 1; }
[data-rv="clip"] .crop img {
  transform: scale(1.12);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1) var(--d, 0s);
}
[data-rv="clip"].in .crop img { transform: scale(1); }
[data-rv="clip"].in:hover .crop img { transform: scale(1.045); }

[data-rv="hero-zoom"] {
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 1.2s ease-out, transform 1.7s cubic-bezier(.22,.61,.36,1);
}
[data-rv="hero-zoom"].in { opacity: 1; transform: scale(1); }

/* Parallax: the photo drifts inside its fixed crop window (JS writes --py on the card,
   the inherited variable reaches the img). Cards never move, so nothing can overlap. */
[data-plx] .crop img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.06);
  transition: none;
  will-change: transform;
}

/* ============ EKT · HERO (3840 x 2400) ============ */

.hero { height: 24rem; }

.hero-media {
  position: absolute;
  left: -2.74rem;
  top: -.18rem;
  width: 44rem;
  height: 24.56rem;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.hero-mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero-mask-grass {
  -webkit-mask-image: url(assets/mask-grass.svg);
  mask-image: url(assets/mask-grass.svg);
  -webkit-mask-position: 34.39rem 14.08rem;
  mask-position: 34.39rem 14.08rem;
  -webkit-mask-size: 6.78rem 1.18024rem;
  mask-size: 6.78rem 1.18024rem;
}
.hero-mask-touch {
  -webkit-mask-image: url(assets/mask-touch.svg);
  mask-image: url(assets/mask-touch.svg);
  -webkit-mask-position: 2.72rem 12.31853rem;
  mask-position: 2.72rem 12.31853rem;
  -webkit-mask-size: 18.91rem 1.86168rem;
  mask-size: 18.91rem 1.86168rem;
}

.hero-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 21.96rem;
  height: .33rem;
  color: #f4f6f4;
  font-weight: 500;
  font-size: .39355rem;
  line-height: .84;
  letter-spacing: -.019677rem;
  white-space: nowrap;
  text-align: center;
  filter: drop-shadow(0 .04rem .25rem rgba(0,0,0,.25));
  z-index: 5;
}
.hero-nav-top { left: 8.22rem; top: .94rem; }
.hero-nav-bottom { left: 50%; top: 22.36rem; transform: translateX(-50%); }
.hero-nav a:hover { text-decoration: underline; text-underline-position: from-font; }

.hero-search { display: flex; align-items: center; justify-content: center; gap: .04rem; width: 1.71rem; height: .33rem; }
.hero-search img { width: .3rem; height: .29rem; }

.hero-touch {
  position: absolute;
  left: .71rem;
  top: 9.58rem;
  width: 15.86rem;
  height: 5.28889rem;
  color: #f4f6f4;
  font-weight: 500;
  z-index: 2;
}
.hero-touch-word {
  position: absolute;
  left: 0;
  top: 0;
  width: 10.04444rem;
  font-size: 3.22576rem;
  line-height: 1.153;
  letter-spacing: -.161288rem;
  white-space: nowrap;
}
.hero-touch-side {
  position: absolute;
  left: calc(50% + 1.3967rem);
  top: .9333rem;
  width: 6.53333rem;
  font-size: .55556rem;
  line-height: .84;
  letter-spacing: -.027778rem;
}

.hero-grass {
  position: absolute;
  left: 25.888rem;
  top: 12.0663rem;
  width: 11.75rem;
  height: 2.18rem;
  z-index: 2;
}

.hero-kaz {
  position: absolute;
  left: 4.4667rem;
  top: 16.46445rem;
  width: 25.55556rem;
  height: 4.30196rem;
  color: #f4f6f4;
  font-weight: 500;
  z-index: 2;
}
.hero-kaz-title {
  position: absolute;
  left: 1.06746rem;
  top: .4685rem;
  width: 19.07rem;
  height: 2.43rem;
}
.hero-kaz-eastern {
  position: absolute;
  left: calc(50% - 8.9778rem);
  top: .13333rem;
  width: 2.02222rem;
  font-size: .66667rem;
  line-height: .84;
  letter-spacing: -.033333rem;
}
.hero-kaz-tagline {
  position: absolute;
  left: calc(50% + 7.53333rem);
  top: 1.17778rem;
  width: 5.24444rem;
  font-size: .55556rem;
  line-height: .84;
  letter-spacing: -.027778rem;
}

.hero-dot {
  position: absolute;
  top: 22.3rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #f4f6f4;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.hero-dot span {
  width: .41011rem;
  height: .41011rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-dot img { width: .29rem; height: .29rem; transform: rotate(134.66deg); }

/* ============ EKT · CTA (3840 x 2160) ============ */

.cta { height: 21.6rem; }

.cta-qaton {
  position: absolute;
  left: 21.83rem;
  top: 9.01rem;
  width: 15.81rem;
  height: 11.97rem;
  border-radius: .2rem;
}
.cta-qaton .crop img { height: 100.72%; left: -7.23%; top: -.04%; width: 114.52%; }
.cta-qaton-shadow { box-shadow: inset 0 .04rem 1rem rgba(0,0,0,.1); }

.cta-sibin {
  position: absolute;
  left: .7rem;
  top: .65rem;
  width: 20.4rem;
  height: 20.3rem;
  border-radius: .25rem;
}
.cta-sibin .crop img { height: 134.59%; left: 0; top: -17.32%; width: 100%; }

.cta-dot {
  position: absolute;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #f4f6f4;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.cta-dot img { width: .36rem; height: .36rem; }

.cta-sibin-name {
  position: absolute;
  left: calc(50% - 18.05rem);
  top: 17.09rem;
  width: 6.49971rem;
  color: #f4f6f4;
  font-weight: 500;
  font-size: 1.26rem;
  line-height: .84;
  letter-spacing: -.063rem;
  text-shadow: 0 .04rem .5rem rgba(0,0,0,.25);
  z-index: 3;
}
.cta-sibin-desc {
  position: absolute;
  left: calc(50% - 18.05rem);
  top: 18.4812rem;
  width: 14.94514rem;
  color: #f4f6f4;
  font-weight: 400;
  font-size: .63238rem;
  line-height: .94;
  letter-spacing: -.031619rem;
  text-align: justify;
  z-index: 3;
}

.ready-l1, .ready-l2 {
  position: absolute;
  width: 9.232rem;
  text-align: center;
  color: #000;
  font-weight: 400;
  font-size: 1.77096rem;
  line-height: 1.153;
  letter-spacing: -.088548rem;
  --tx: -50%;
}
.ready-l2 { white-space: pre; }
.ready-l3 { position: absolute; width: 8.31rem; height: 1.58rem; }

.cta-ready-1 { left: calc(50% + 10.606rem); top: 1.05rem; }
.cta-ready-2 { left: calc(50% + 10.606rem); top: 2.2877rem; }
.cta-ready-3 { left: 25.6922rem; top: 4.11611rem; }

.cta-thumb {
  position: absolute;
  left: 28.1118rem;
  top: 2.92891rem;
  width: 3.85079rem;
  height: 1.28698rem;
  z-index: 2;
}
.cta-thumb .crop img, .im-thumb .crop img { height: 383.7%; left: -30.78%; top: -270.52%; width: 192.29%; }

.cta-qaton-name {
  position: absolute;
  left: calc(50% + 18.2rem);
  top: 18.4rem;
  --tx: -100%;
  transform: translate(-100%, 0);
  color: #f4f6f4;
  font-weight: 500;
  font-size: 1.26rem;
  line-height: .84;
  letter-spacing: -.063rem;
  text-align: right;
  white-space: nowrap;
  z-index: 3;
}
.cta-qaton-name[data-rv="up"] { transform: translate(-100%, .45rem); }
.cta-qaton-name[data-rv="up"].in { transform: translate(-100%, 0rem); }

.cta-more {
  position: absolute;
  left: calc(50% + 10.6056rem);
  top: 7.81rem;
  width: 5.4912rem;
  --tx: -50%;
  text-align: center;
  color: #5ba13c;
  font-weight: 400;
  font-size: .56671rem;
  line-height: 1.153;
  letter-spacing: -.028335rem;
  text-transform: lowercase;
  text-decoration: underline;
  text-underline-position: from-font;
}
.cta-more:hover, .im-plan:hover, .footer-plan:hover { text-decoration-thickness: .04em; text-underline-offset: .08em; }

/* ============ EKT · ACTIVITIES (3840 x 2400) ============ */

.acts { height: 24rem; }

.acts-title {
  position: absolute;
  left: 50%;
  top: 10.61rem;
  width: 12.94rem;
  --tx: -50%;
  text-align: center;
  color: #111827;
  font-weight: 600;
  font-size: 1.77096rem;
  line-height: 1.153;
  letter-spacing: -.088548rem;
  z-index: 2;
}
.acts-title .star { font-weight: 400; color: #5ba13c; }

.act-img { position: absolute; border-radius: .05rem; }

.act-biking { left: 10.85rem; top: 10.42rem; width: 2.55rem; height: 3.27rem; }
.act-biking .crop img { height: 100%; left: -68.63%; top: .02%; width: 224.56%; }

.act-hiking { left: 17.5rem; top: 4.49rem; width: 5.3rem; height: 7.11rem; }
.act-hiking .crop img { height: 143.54%; left: -4.89%; top: -21.57%; width: 109.77%; }

.act-horseback { left: -1.19rem; top: .32rem; width: 9.24104rem; height: 12.37521rem; }
.act-horseback .crop img { height: 100%; left: 9.78%; top: 0; width: 99.98%; }
.act-horseback-shadow { box-shadow: inset 0 .04rem 2.5rem rgba(0,0,0,.25); }

.act-beach { left: 26.02rem; top: .32rem; width: 5.81rem; height: 7.34rem; }
.act-beach .crop img { height: 158.82%; left: -121.06%; top: -22.68%; width: 262.44%; }

.act-scuba { left: 12.36rem; top: 18.06rem; width: 5.78rem; height: 7.25rem; }
.act-scuba .crop img { height: 100%; left: -83.63%; top: .08%; width: 219.73%; }
.act-scuba-shadow { box-shadow: inset 0 0 1rem rgba(0,0,0,.25); }

.act-airtravel { left: 27.91rem; top: 17.66rem; width: 11.16rem; height: 9.01rem; }
.act-airtravel .crop img { height: 100%; left: -15.1%; top: 0; width: 121.14%; }

.act-skydiving { left: -3.65rem; top: 15.78rem; width: 8.29rem; height: 10.36rem; }
.act-skydiving .crop img { height: 117.14%; left: -47.09%; top: -11.33%; width: 219.71%; }

.act-boat { left: 22.96rem; top: 13.21rem; width: 2.59rem; height: 3.17rem; }
.act-boat .crop img { height: 100.05%; left: -17.96%; top: -.02%; width: 191.35%; }

.act-rafting { left: 35.06rem; top: 5.75rem; width: 3rem; height: 3.82rem; transform: scaleX(-1); }
.act-rafting .crop img { height: 102.68%; left: -4.6%; top: -2.67%; width: 234.25%; }

.act-label {
  position: absolute;
  color: rgba(102,102,102,.5);
  font-weight: 500;
  font-size: .5rem;
  line-height: .84;
  letter-spacing: -.025rem;
  z-index: 2;
}
.act-l-hiking    { left: calc(50% + 3.6rem);   top: 3.99rem;  width: 2.17rem; text-align: right; --tx: -100%; }
.act-l-horseback { left: calc(50% - 11.15rem); top: 12.7rem;  width: 4.56rem; text-align: right; --tx: -100%; }
.act-l-airtravel { left: calc(50% + 19.07rem); top: 17.55rem; width: 4.56rem; text-align: right; --tx: -100%; --ty2: -100%; }
.act-l-scuba     { left: calc(50% - 6.84rem);  top: 17.94rem; width: 4.56rem; --ty2: -100%; }
.act-l-skydiving { left: calc(50% - 19.12rem); top: 15.7rem;  width: 4.56rem; --ty2: -100%; }
.act-l-boat      { left: calc(50% + 6.35rem);  top: 16.38rem; width: 1.78rem; text-align: right; --tx: -100%; }
.act-l-biking    { left: calc(50% - 8.35rem);  top: 9.9rem;   width: 1.78rem; }
.act-l-rafting   { left: calc(50% + 18.86rem); top: 5.23rem;  width: 1.78rem; text-align: right; --tx: -100%; }
.act-l-beach     { left: calc(50% + 10.22rem); top: 7.63rem;  width: 4.52rem; text-align: right; --tx: -100%; }

.act-label[data-rv="up"] { transform: translate(var(--tx, 0rem), calc(var(--ty2, 0%) + .45rem)); }
.act-label[data-rv="up"].in { transform: translate(var(--tx, 0rem), var(--ty2, 0%)); }

/* ============ SECTION · READY TO IMMERSE (3840 x 2400) ============ */

.immerse { height: 24rem; }

.im-photo {
  position: absolute;
  left: 16.48rem;
  top: .76rem;
  width: 21.16rem;
  height: 22.54rem;
}
.im-photo .crop img { height: 109.49%; left: -23.66%; top: -9.54%; width: 175.17%; }
.im-photo-shadow { box-shadow: inset 0 .02rem .589rem rgba(0,0,0,.25); }

.im-map {
  position: absolute;
  left: 19.18rem;
  top: 3.34rem;
  width: 16.36rem;
  height: 16.74rem;
  z-index: 2;
  pointer-events: none;
}
.im-map svg {
  position: absolute;
  left: -.34%;
  top: -.49%;
  width: 100.66%;
  height: 100.87%;
}
.im-map path {
  stroke-dasharray: var(--len, none);
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 3.2s cubic-bezier(.45,0,.2,1) .35s;
}
.im-map.drawn path { stroke-dashoffset: 0; }

.im-photo-label {
  position: absolute;
  left: calc(50% - 2.38rem);
  top: 22.08rem;
  width: 7.32rem;
  color: #f4f6f4;
  font-weight: 500;
  font-size: .94101rem;
  line-height: .84;
  letter-spacing: -.047051rem;
  text-transform: capitalize;
  z-index: 3;
}

.im-ready-1 { left: calc(50% - 10.904rem); top: 1.5rem; }
.im-ready-2 { left: calc(50% - 10.904rem); top: 2.73765rem; }
.im-ready-3 { left: 4.1822rem; top: 4.5661rem; }

.im-thumb {
  position: absolute;
  left: 6.60184rem;
  top: 3.37891rem;
  width: 3.85079rem;
  height: 1.28698rem;
  z-index: 2;
}

.im-desc {
  position: absolute;
  left: calc(50% - 13.77rem);
  top: 10.6rem;
  width: 5.74rem;
  color: #000;
  font-weight: 500;
  font-size: .55556rem;
  line-height: .84;
  letter-spacing: -.027778rem;
}

.im-arrows {
  position: absolute;
  left: 5.984rem;
  top: 18.0552rem;
  width: 4.6307rem;
  height: .5296rem;
}
.im-arrows img { width: 100%; height: 100%; }

.im-plan {
  position: absolute;
  left: calc(50% - 10.9rem);
  top: 19.86rem;
  width: 6.44rem;
  --tx: -50%;
  text-align: center;
  color: #5ba13c;
  font-weight: 400;
  font-size: .88548rem;
  line-height: 1.153;
  letter-spacing: -.044274rem;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ============ EKT · FOOTER (3840 x 1929) ============ */

.footer {
  height: 19.29rem;
  background: #5ba13c;
  color: #f4f6f4;
}

.footer-nav {
  position: absolute;
  left: .44444rem;
  top: .41111rem;
  display: flex;
  gap: .88889rem;
  align-items: flex-start;
}
.footer-col { width: 7.57778rem; display: flex; flex-direction: column; gap: .26667rem; }
.footer-col h3 { font-weight: 700; font-size: .4rem; line-height: 1.2; }
.footer-col ul { list-style: none; font-weight: 400; font-size: .31111rem; line-height: 1.6; }

.footer-plan {
  position: absolute;
  left: calc(50% + 12.1222rem);
  top: .9889rem;
  width: 7.15556rem;
  --tx: -50%;
  text-align: center;
  font-weight: 400;
  font-size: .98387rem;
  line-height: 1.153;
  letter-spacing: -.049193rem;
  text-decoration: underline;
  text-underline-position: from-font;
}

.footer-brand {
  position: absolute;
  left: 0;
  top: 12rem;
  width: 38.4rem;
  height: 7.29rem;
  padding: .33rem .32rem;
}
.footer-eastern {
  font-weight: 500;
  font-size: 1.52381rem;
  line-height: .84;
  letter-spacing: -.07619rem;
  white-space: nowrap;
}
.footer-kaz {
  position: absolute;
  left: .425732rem;
  top: 13.113rem;
  width: 37.58rem;
  height: 5.59rem;
}

/* ============ REDUCED MOTION ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rv], [data-rv] .crop, [data-rv] .crop img, [data-rv] .inset-shadow, .im-map path {
    transition: none !important;
    animation: none !important;
  }
  [data-rv], [data-rv] .inset-shadow { opacity: 1 !important; }
  [data-rv], [data-rv] .crop { clip-path: none !important; }
  [data-rv="up"], [data-rv="hero-zoom"], [data-rv="pop"], [data-rv="rise"] { transform: translate(var(--tx, 0rem), 0rem) !important; }
  .cta-qaton-name { transform: translate(-100%, 0rem) !important; }
  [data-rv="clip"] .crop img { transform: none !important; }
  .im-map path { stroke-dashoffset: 0 !important; }
}