/* ==========================================================================
   Home — two stacked full-screen scroll scenes:
   "peak" (the brand story over the mountain) and "range" (the K2 map with
   the three practices), ending with the assessment call-to-action.
   ========================================================================== */

/* The page itself never scrolls; the scenes do. On phones the header overlays. */
body { overflow: hidden; }
@media (max-width: 767px) { body { padding-top: 0; } }

.main-body {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.main-body::-webkit-scrollbar { display: none; }
:where(.main-body) h2 { font-size: 40px; font-weight: 500; line-height: 1.4; text-transform: uppercase; color: var(--nav); }

.bold { font-weight: 700; }
.read { display: flex; align-items: center; column-gap: .5rem; padding: 0; border-radius: 0; background: none; color: var(--blue); }
.read:hover,
.read:focus { background: none; color: var(--blue); }
.read svg { margin: auto 0; fill: var(--blue); transform: scaleX(-1); }

a.fixed-link { color: blue; text-decoration: underline; }
a.fixed-link:hover { color: darkblue; }

.down-arrow {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 20;
  width: 28px;
  height: 45px;
  border: 2px solid #fff;
  border-radius: 15px;
  transform: translate(-50%, 0);
  backdrop-filter: blur(6px);
}
.down-arrow svg { position: absolute; bottom: 0; fill: #fff; }

/* C2C badge, bottom right */
.logo-link { position: fixed; right: 85px; bottom: 20px; z-index: 1000; }
.logo-link img { width: 100px; transition: transform .2s ease; }
.logo-link img:hover { transform: scale(1.1); }

/* Scenes ------------------------------------------------------------------ */
.parallax-container,
.parallax-container-2 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-align: start;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  transition: all 1s cubic-bezier(.4, 0, .2, 1);
}
.parallax-container::-webkit-scrollbar,
.parallax-container-2::-webkit-scrollbar { display: none; }

.parallax-container {
  background: url('../img/home-mountain.webp') no-repeat fixed;
}
/* Drifting clouds over both scenes */
.parallax-container::before,
.parallax-container-2::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: .8;
  background: url('../img/clouds.png') repeat-x;
  background-size: cover;
  animation: clouds 150s linear infinite;
}
@keyframes clouds { to { background-position: 5440px; } }
.none::before { display: none; }

/* Mountain framing per visible section (toggled by home.js). */
.right-top { background-position: 48% 27%; background-size: 170% 300%; }
.left-center { background-position: 30% 46%; background-size: 170% 300%; }
.full-bg-image { background-position: 5% 80%; background-size: 170% 250%; }
.parallax-container.section3bg {
  background: url('../img/home-stages.png'), url('../img/home-mountain.webp');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 54% 82%, 150% 250%;
  background-position: 45% 92%, 0% 51%;
}

.parallax-container-2 {
  background: url('../img/marker.png'), url('../img/marker.png'), url('../img/marker.png'), url('../img/k2.jpg');
  background-repeat: no-repeat;
}
.opacity-0 { opacity: 0; }
.opacity-1 { opacity: 1; }
.top-moun-full { background-position: 39% 35%, 30% 74%, 62% 60%, 0% 0%; background-size: 2%, 2%, 2%, 100% 100%; }
.top-moun-1 { background-position: 34% 48%, 30% 115%, 80% 108%, 45% 29%; background-size: 4%, 4%, 4%, 200% 230%; }
.top-moun-2 { background-position: 34% -20%, 37% 52%, 103% 20%, 25% 87%; background-size: 4%, 4%, 4%, 200% 230%; }
.top-moun-3 { background-position: 34% -20%, -10% 60%, 34% 50%, 88% 68%; background-size: 4%, 4%, 4%, 200% 230%; }

.parallax-section,
.parallax-section-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

.content { color: #000; font-size: 1rem; text-align: center; }
.sec1, .sec2, .sec3, .sec4, .sec1-2, .sec2-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
}

/* 1 — DNA definition */
.sec1 { margin-bottom: 5rem; }
.text-container { height: 180px; text-align: center; }
.text { font-size: 20px; }
.text-container h2 { font-size: 64px; }
.text.hidden { height: 0; opacity: 0; }
.spinner-w { width: 50%; }

/* 2 — Vision */
.sec-2-m, .sec-3-m {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  padding: 1rem;
}
.sec2 {
  align-items: start;
  justify-content: start;
  width: auto;
  max-width: 300px;
  font-size: 20px;
}
.spinner-1 { position: absolute; top: 60%; left: 30%; }
.spinner-w-2 { width: 8%; }
.black { color: #000; }
.mb1 { margin-bottom: 1rem; }

/* 3 — Services */
.sec3 {
  align-items: start;
  justify-content: start;
  width: auto;
  max-width: 255px;
  margin-bottom: 8rem;
  font-size: 20px;
  text-align: start;
}
.core-btn {
  display: block;
  width: 200px;
  height: 40px;
  margin-top: 2rem;
  padding: 0;
  border: none;
  border-radius: .5rem;
  background: linear-gradient(129.76deg, #3a98d7 11.88%, #166aa2 110.11%);
  color: #fff;
  font-size: 1rem;
}
.sec3-1 {
  position: relative;
  display: flex;
  align-items: end;
  column-gap: 1rem;
  width: 20%;
  padding: 1rem;
}
.sec3-1 > div { display: flex; padding: 1.8rem; border-radius: 25px; background-color: rgba(255, 255, 255, .5); }
.five { margin-bottom: 0; font-size: 4.5rem; font-weight: bold; line-height: .8 !important; }
.core-service { color: rgba(0, 0, 0, .66); font-size: 1.25rem; font-weight: 600; }
.core { font-size: 1.5rem; }
.spinner-tk3 { position: absolute; bottom: 6%; left: 34%; width: 44%; margin-top: -150%; }

/* 4 — Reach */
.sec4 {
  justify-content: center;
  row-gap: 6rem;
  width: auto;
  max-width: 600px;
  padding: 2rem;
  border-radius: .25rem;
  background: #fff;
  opacity: .7;
  font-size: 1.25rem;
  text-align: justify;
}
.sec4-bot { display: flex; justify-content: center; column-gap: 4rem; text-align: center; }
.sec4-bot > div { display: flex; flex-direction: column; row-gap: 1rem; width: auto; max-width: 150px; }
.sec4-size { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; }

/* 5 — The power of three */
.sec1-2 {
  justify-content: space-between;
  row-gap: 2rem;
  width: 100%;
  max-width: 415px;
  padding: 1rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, .9);
}
.sec1-2-font { color: #000; font-size: 16px; font-weight: normal; }

/* 6–8 — Practices */
.sec2-2, .sec3-2, .sec4-2tk {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  column-gap: 1rem;
  width: auto;
}
.sec2-2 { max-width: 482px; }
.sec3-2 { max-width: 510px; text-align: justify; }
.sec3-2 p { text-align: justify; }
.sec4-2tk { max-width: 530px; }
.one, .two, .three3 { margin: 0; font-size: 6rem; font-weight: bold; line-height: 1; opacity: .5; }
.one-para {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  line-height: 20px;
  opacity: .9;
  text-align: start;
}
.span-bold { color: #000; font-size: 16px; font-weight: 500; }
.big { font-size: 2rem; }
.locals { margin-top: 1rem; text-align: center; }
.arrow-cen { display: flex; justify-content: start; align-items: center; column-gap: 1rem; }

/* Practice detail dialogs */
.left { width: 50%; }
.left img { width: 100%; height: 100%; }
.right { display: flex; width: 50%; padding: 1rem 1rem 0; }
.right img { width: 100%; }
.right-left { display: flex; }
.right-left > div { width: 80%; }
.one-1 { position: relative; left: -12%; width: 10%; }
.one-head { color: #3d3d3d; font-weight: 550; }
.one-head .noun { margin-top: .5rem; font-size: 2rem; }
.detail-text { margin-top: .5rem; text-align: justify; }
.bi-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.25rem; }

/* Assessment mountain (Start dialog): label and dot placement per stage. */
.stage-1 .moun-point { transform: translateX(-6rem); }
.stage-1 .dot { right: 32%; top: 15%; }
.stage-2 .moun-point { transform: translateX(40rem); max-width: 300px; }
.stage-2 .dot { right: 41%; top: 35%; }
.stage-3 .moun-point { transform: translateX(16rem); max-width: 240px; }
.stage-3 .dot { right: 50%; top: 20%; }
.stage-4 .moun-point { transform: translateX(3rem); max-width: 240px; }
.stage-4 .dot { left: 28%; top: 10%; }
.stage-5 .moun-point { transform: translateX(8rem); max-width: 250px; }
.stage-5 .dot { left: 10%; top: 35%; }

@media (max-width: 768px) {
  .stage-1 .moun-point { position: relative; top: 65%; transform: translateX(-2rem); }
  .stage-1 .dot { right: 6%; top: 60%; }
  .stage-2 .moun-point { transform: translateX(3rem) translateY(1rem); }
  .stage-2 .dot { right: 6%; top: 60%; }
  .stage-3 .moun-point { transform: translateY(1rem); max-width: 170px; }
  .stage-3 .dot { right: 48%; top: 60%; }
  .stage-4 .moun-point { transform: translateX(12rem); max-width: 170px; }
  .stage-4 .dot { left: 35%; top: 40%; }
  .stage-5 .moun-point { max-width: 200px; }
  .stage-5 .dot { left: 20%; top: 35%; }
}

/* Closing call-to-action + footer */
.footer-div { display: flex; justify-content: center; align-items: center; width: 100%; scroll-snap-align: start; }
.home-footer {
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30px 0;
  background-color: #fff;
  scroll-snap-align: start;
}
.sec4-2-1 { color: rgba(0, 0, 0, .65); font-size: 1.25rem; text-align: center; }
.sec4-2-1 > div p { font-weight: 500; }
.footer-inner { width: 100%; max-width: 1200px; margin: auto; }
.footer-content { display: flex; align-items: center; justify-content: space-between; }
.logo-foot img { width: 80px; }
.copyright { display: flex; flex-direction: column; row-gap: 1rem; justify-content: end; align-items: end; color: #000; }
.socials { display: flex; justify-content: end; column-gap: 1.5rem; }
.socials svg { width: 24px; height: 24px; }
.footer-links { display: flex; column-gap: 2rem; }
.footer-links a { color: #333; }
.footer-links a:hover { color: #007bff; }

@media (max-width: 768px) {
  .text.hidden { height: auto; margin-top: -30px; }
  .parallax-container { background-image: url('../img/home-mountain-mobile.webp'); }
  .right-top { background-position: 93% 27%; background-size: 222% 250%; }
  .left-center { background-position: 60% 55%; background-size: 170% 190%; }
  .full-bg-image { background-position: 22% 100%; background-size: 125% 125%; }
  .parallax-container.section3bg {
    background: url('../img/home-stages-mobile.png'), url('../img/home-mountain-mobile.webp');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 77% 38%, 125% 110%;
    background-position: 80% 65%, 0% 0%;
  }
  .content { font-size: 1rem; }
  .sec2 { margin-bottom: 4rem; }
  .sec-2-m { margin-bottom: 20rem; }
  .spinner-1 { top: 40%; left: 30%; }
  .spinner-w-2 { width: 20%; }
  .sec3 { max-width: 240px; margin-bottom: 14rem; }
  .sec3-1 { width: auto; }
  .core { font-size: 1.25rem; }
  .core-service { font-size: 1rem; }
  .core-btn { width: 8rem; height: 3rem; font-size: .75rem; }
  .sec4 { width: 80%; row-gap: 1rem; }
  .sec4 div { text-align: center; }
  .sec4-bot { flex-direction: column; }

  .parallax-container-2 { background: url('../img/k2-mobile.webp'); }
  .top-moun-full { background-position: 0% 0%; background-size: 100% 100%; }
  .top-moun-1 { background-position: 24% 21%; background-size: 200% 275%; }
  .top-moun-2 { background-position: 0% 57%; background-size: 200% 275%; }
  .top-moun-3 { background-position: 100% 45%; background-size: 200% 275%; }
  .sec1-2 { flex-direction: column-reverse; row-gap: 4rem; width: 80%; }
  .sec1-2-font { text-align: center; }
  .sec2-2, .sec3-2 { flex-direction: column; width: 85%; }
  .one { margin-left: 2rem; opacity: .8; }
  .two { margin-right: 4rem; margin-left: auto; font-size: 4rem; opacity: .8; }
  .three3 { margin-left: 2rem; font-size: 4rem; opacity: .8; }
  .sec4-2-1 { font-size: 1rem; }

  .left, .right { width: 100%; }
  .one-1 { position: absolute; top: 240px; left: 0; }
  .one-head { position: absolute; top: 320px; color: #fff; }

  .footer-content { flex-direction: column; row-gap: 2rem; margin-top: 2rem; text-align: center; }
  .logo-foot img { width: 60px; }
  .footer-links { flex-direction: column; row-gap: .5rem; margin-top: 10px; text-align: center; }
  .socials { justify-content: center; margin-top: 10px; }
  .copyright { justify-content: center; align-items: center; margin: 0 auto; }
}

/* Arabic: keep the art-directed placement, flip the text only. */
[dir="rtl"] .parallax-section,
[dir="rtl"] .parallax-section-2,
[dir="rtl"] .modal-div { direction: ltr; }
[dir="rtl"] .content,
[dir="rtl"] .right,
[dir="rtl"] .sec4-2-1,
[dir="rtl"] .footer-content { direction: rtl; }
[dir="rtl"] .read svg { transform: none; }
[dir="rtl"] .right-left { direction: ltr; }
[dir="rtl"] .right-left > div { direction: rtl; }