/* Inter + Jost are enqueued as 'dreamcatapult-fonts' in functions.php for
   every page (the site header needs Inter too), rather than @import-ed here
   where they would only exist on the homepage and would block this file's
   own parsing. */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    --secondaru-font: "Jost", sans-serif;
    --gray: #D9D9D9;
    --white: #fff;
    --ink: #141414;
    --muted: #3d3d3d;
    --muted-2: #5c5c5c;
    --black: #050505;
    --nav-h: 96px;
}

html {
    scroll-behavior: auto;
}

body {
    font-family: "Inter", sans-serif;
    background-color: #d9d9d9;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}


/* NOTE: this block used to put `will-change: transform, opacity` permanently
   on 21 elements — most of them full-screen background images, several of
   them very large (moon-xlg.png alone is 1.2MB). `will-change` promotes each
   one to its own compositor layer and KEEPS it there for the life of the
   page, so those 21 layers sat in GPU memory permanently whether or not
   anything was animating. On a phone that is a large, constant memory cost
   and was a direct contributor to scroll jank.

   It is deliberately gone. GSAP applies its own will-change (and
   translate3d, via force3D) to the elements it is actually tweening, for
   exactly as long as the tween runs — which is what will-change is designed
   for. Elements that need a permanent promotion for a CSS-only animation
   still declare it individually further down this file. */

/* ---------------- grain overlay ---------------- */

.main-wrap {
    position: relative;
    overflow: hidden;
}

.main-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("../images/bg-texture.png");
    background-image: url(../images/bg.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

/* ---------------- HERO ---------------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;


}


.hero-night {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #050505;
    opacity: 0;
}


.hero-stars {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-image: url('../images/multistars.png');
    background-repeat: no-repeat;
    background-position: 6% 6%;
    opacity: 0;
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    z-index: 1;
    left: 74%;
    top: 42%;
    width: min(28vw, 380px);
    height: min(28vw, 380px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-image: url('../images/moon-small.png');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .9;
}

.hero-glow-white {
    position: absolute;
    z-index: 1;
    left: 74%;
    top: 42%;
    opacity: 0;
    width: min(28vw, 380px);
    height: min(28vw, 380px);
}

.hero-container {
    position: relative;
    z-index: 2;
}

.hero-copy {
    max-width: 640px;
}

.hero-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(50px, 6.2vw, 84px);
    line-height: 1.06;
    color: var(--ink);
    margin-bottom: 28px;
    transition: color .6s ease;
}

.hero-title .line {
    display: block;
    overflow: hidden;
}

.hero-text {
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.65;
    color: var(--muted);
    max-width: 520px;
    transition: color .6s ease;
}

.hero.is-night .hero-title,
.hero.is-night .hero-text {
    color: #fff;
}

.hero.is-night .hero-text {
    color: rgba(255, 255, 255, .75);
}


.hero-clouds-lift {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 320px;
    z-index: 0;
    pointer-events: none;
}

.hero-clouds {
    position: absolute;
    inset: 0;
    bottom: -10px;
    display: flex;
    align-items: end;

}


.cloud-strip {
    position: absolute;
    left: 0;
    width: 100%;

    display: flex;
    will-change: transform;
}

.cloud-strip img {
    width: 50%;
    height: 100%;

    flex-shrink: 0;
    display: block;
}

.cloud-strip--back {
    bottom: 0;

}

.cloud-strip--mid {
    bottom: 30px;

}

.cloud-strip--front {
    bottom: 60px;

}

.cloud-strip--fore {
    bottom: 90px;

}


.scroll-indicator {
    position: fixed;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    width: 22px;

    z-index: 999;
    cursor: pointer;
}

.sky-stage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.sky-stage svg {
    display: block;
    width: 100%;
    height: auto;
}



.layer-pos-1 {
    animation: sway-1 5s ease-in-out infinite alternate;
}

.layer-pos-2 {
    animation: sway-2 4s ease-in-out infinite alternate;
}

.layer-pos-3 {
    animation: sway-3 6s ease-in-out infinite alternate;
}

.layer-pos-4 {
    animation: sway-4 4s ease-in-out infinite alternate;
}

@keyframes sway-1 {
    from {
        transform: matrix(-1, 0, 0, 1, 1839.9600830078125, 488);
    }

    to {
        transform: matrix(-1, 0, 0, 1, 1919.9600830078125, 488);
    }
}

@keyframes sway-2 {
    from {
        transform: matrix(1, 0, 0, 1, -518.33660888671875, 540);
    }

    to {
        transform: matrix(1, 0, 0, 1, -438.33660888671875, 540);
    }
}

@keyframes sway-3 {
    from {
        transform: matrix(-1, 0, 0, 1, 1923.566162109375, 595);
    }

    to {
        transform: matrix(-1, 0, 0, 1, 2003.566162109375, 595);
    }
}

@keyframes sway-4 {
    from {
        transform: matrix(1, 0, 0, 1, -541.433837890625, 630);
    }

    to {
        transform: matrix(1, 0, 0, 1, -461.433837890625, 630);
    }
}

@media (prefers-reduced-motion: reduce) {

    .layer-pos-1,
    .layer-pos-2,
    .layer-pos-3,
    .layer-pos-4 {
        animation: none !important;
    }
}

.white-circle {
  
    position: relative;
    will-change: transform, opacity;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    opacity: 1;
    width: 50rem;
    height: 50rem;
    z-index: 3;
    pointer-events: none;
}

@media not (prefers-reduced-motion: reduce) {
    .white-circle {
        position: fixed;
        top: 0;
        right: 0px;
    }
}

.sun-decor-corner-1 {
    position: absolute;
    z-index: 2;
    inset: -23% -22% auto auto;
}

.sun-decor-corner-2 {
    will-change: transform;
    transform: translate3d(0.0084px, -0.0084px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    z-index: 1;
    position: absolute;
    inset: 0% 0% auto auto;
}


@media not (prefers-reduced-motion: reduce) {
    .white-circle.for-formula-decor {
        left: 0;
        right: auto;
    }
}

.for-formula-decor .sun-decor-corner-1 {
    inset: -23% auto auto -22%;
}

.for-formula-decor .sun-decor-corner-2 {
    inset: 4% auto auto 30%
}

.black-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
}

.black-dot1 {

    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
}

.black-dot2 {

    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
}

.black-dot3 {

    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
}

.hero-stars {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-image: url('../images/multistars.png');
    background-repeat: no-repeat;
    background-position: 6% 6%;
    opacity: 0;
    pointer-events: none;
}

/* ---------------- SUN GAZING ---------------- */
.sun-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    z-index: 5;
}

.service-moon {
    top: -40%;
    left: 8%;
}

.sun-decor {
  
    position: static;
    max-width: 900px;
    z-index: 2;
    pointer-events: none;
}

@media not (prefers-reduced-motion: reduce) {
    .sun-decor {
        position: fixed;
        inset: 0;
    }
}

.sun-decor .sundot {
    z-index: 1;
    position: relative;
}

@media (prefers-reduced-motion: reduce) {

  
    .sun-orbit {
        display: none;
    }
}

.services-section .formula-blob img {
    width: 100%;
}

.service-moon {
    top: 0%;
    display: flex;
    align-items: stretch;
    height: 140vh;
    width: 75%;
}

.sun-orbit {
    position: absolute;
    inset: 0;
}


.sun-content {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin-left: auto;
    width: 100%;
    padding-bottom: 70px;
}

.sun-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 26px;
    max-width: 700px;
}

.sun-text {
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.65;
    color: var(--muted);

}

.sun-innersection {
    width: 100%;
}


.shared-moon {
    position: fixed;
    left: -8vh;
    top: 10vh;
    width: 62vh;
    height: 62vh;
    z-index: 2;
    border-radius: 50%;
    /* overflow: hidden; */
    opacity: 0;
    pointer-events: none;
    /* transform/opacity only. width, height, left and top are LAYOUT
       properties — the compositor cannot optimise them, so naming them here
       gains nothing and pushes the browser onto a slower path. */
    will-change: transform, opacity;
}

.shared-moon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------- THE SKY ISN'T THE LIMIT ---------------- */
.sky-section {
    position: relative;
    height: 100vh;
    /* overflow: hidden; */
    padding-top: 16vh;
    z-index: 5;

}

.sky-decor {
    position: absolute;
    inset: 0;
    z-index: 0;

}

.sky-glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(6px);
}

.sky-glow--a {
    width: 220px;
    height: 220px;
    top: 6%;
    left: 22%;
}

.sky-glow--b {
    width: 260px;
    height: 260px;
    top: -4%;
    left: 62%;
}

.sky-stars {
    position: absolute;
    inset: 0;
    background-image: url('../images/multistars.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    opacity: .8;
}

.sky-content {
    position: relative;
    z-index: 1;
}

.sky-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 26px;

}

.sky-text {
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.65;
    color: var(--muted);

}

.sky-moon {
    position: absolute;
    width: 100%;
    max-width: 100%;

    bottom: -70vw;
    left: 0px;
    right: 0px;
    margin: 0 auto;
}

.sky-moon img {
    margin: 0 auto;

    transform-origin: top center;

    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 58%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 58%);
}

/* ---------------- GLOBAL SAVVY, LOCAL CHARM ---------------- */
.global-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    /* overflow: hidden; */
    padding-bottom: 80px;
}

.global-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.global-stars {
    position: absolute;
    width: 100%;
    height: 320px;
    top: 12%;
    left: 0;
    background-image: url('../images/multistars.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.global-moon {
    position: absolute;
    width: 680px;
    bottom: 0%;
    right: 0;
}

.global-moon img {
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    aspect-ratio: 1/1;
    max-height: 90vh;
}

.global-dot-run {
    position: absolute;
    top: 16%;
    left: 20%;
    display: flex;
    align-items: flex-end;
    gap: 34px;
    z-index: 1;
}

.global-dot-run span {
    display: block;
    border-radius: 50%;
    background: #111;
}

.global-dot-run span:nth-child(1) {
    width: 8px;
    height: 8px;
    margin-bottom: 46px;
}

.global-dot-run span:nth-child(2) {
    width: 16px;
    height: 16px;
    margin-bottom: 28px;
}

.global-dot-run span:nth-child(3) {
    width: 26px;
    height: 26px;
    margin-bottom: 10px;
    margin-left: 20px;
}

.global-dot-run span:nth-child(4) {
    width: 32px;
    height: 32px;
    margin-bottom: -2px;
    margin-left: 30px;
}

.global-dot-run span:nth-child(5) {
    width: 56px;
    height: 56px;
    margin-bottom: -28px;
    margin-left: 40px;
}

.global-content {
    position: relative;
    z-index: 2;
}

.global-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 26px;
    max-width: 700px;
}

.global-text {
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.65;
    color: var(--muted);
    max-width: 460px;
}

.global-inner {
    max-width: 44%;
}

/* ---------------- OUR DREAMY FORMULA FOR SUCCESS ---------------- */
.formula-section {
    position: relative;
    height: 100vh;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    /* overflow: hidden; */
    padding-bottom: 80px;
}

.formula-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* overflow: hidden; */
}

.formula-blob {
    position: absolute;
    /* border-radius: 50%; */
    /* overflow: hidden; */
}

.formula-blob img {
    width: 120rem;
    min-width: auto;
    max-width: none;
    height: auto;
    min-height: auto;
    inset: -61% -19% auto auto;
}

.formula-blob--b {

    top: -40%;
    left: -80px;

}

.formula-content {
    position: relative;
    z-index: 1;
    margin-left: auto;
    max-width: 850px;
    width: 100%;
}

.formula-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 34px;
}

.formula-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
}

.formula-col h3 {
    font-family: var(--secondaru-font);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 24px);
    margin-bottom: 14px;
    color: var(--ink);
}

.formula-col p {
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.65;
    color: var(--muted-2);
}

.formula-bottom-moon {
    position: absolute;
    right: 38%;
    z-index: 1;
    max-width: 30%;
    top: 47%;
}

/* ---------------- ABOUT US ---------------- */
.about-section,
.about-section-two {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    /* overflow: hidden; */
    padding: 120px 0 80px;
}

.about-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about-glow {
    position: absolute;
    bottom: -10%;
    right: 20%;
    width: 400px;
    height: 400px;

}

.about-glow-right {
    position: absolute;
    bottom: -10%;
    left: 20%;
    width: 400px;
    height: 400px;
}

.about-stars {
    position: absolute;
    width: 100%;
    height: 400px;
    top: 15%;
    right: -20%;
    background-image: url('../images/stars.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: .8;
}

.about-stars-right {
    position: absolute;
    width: 100%;
    height: 400px;
    top: 15%;
    left: -20%;
    background-image: url('../images/stars.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: .8;
}

.about-moon-left {
    top: -40%;
    left: 8%;

}

.about-moon-right {
    top: -40%;
    right: 8%;
}

.about-two-topimg {
    position: absolute;
    top: 0px;
    left: 0px;
}

.about-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.about-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 34px;
}

.about-name {
    font-family: var(--secondaru-font);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 24px);
    color: var(--ink);
    margin-bottom: 20px;
}

.about-text {
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.65;
    color: var(--muted);
    margin-bottom: 20px;
}

.about-text:last-child {
    margin-bottom: 0;
}

.about-section-two .about-content {
    margin-left: auto;
}

.client-moon {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    max-width: 100%;
    height: 80vh;
    text-align: center;
}

.client-moon img {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.client-right-circle {
    /* Decorative only — must never intercept clicks. A positioned,
       full-bleed element with no pointer-events rule swallows clicks across
       its whole box even where its artwork is transparent. */
    pointer-events: none;
    position: absolute;
    top: 0px;
    right: 0px;
}

.client-star {
    /* Decorative only — must never intercept clicks. A positioned,
       full-bleed element with no pointer-events rule swallows clicks across
       its whole box even where its artwork is transparent. */
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 400px;
    top: 15%;
    right: 0%;
    background-image: url('../images/stars.png');
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center;
    opacity: .8;
}

.client-leftbottom-circle {
    /* Decorative only — must never intercept clicks. A positioned,
       full-bleed element with no pointer-events rule swallows clicks across
       its whole box even where its artwork is transparent. */
    pointer-events: none;
    position: absolute;
    bottom: 0px;
    left: 10%;
    z-index: 1;
}

.client-stage-content {
    position: relative;
    z-index: 2;
}

/* ---------------- WHO WE FLY WITH / CLIENTS ---------------- */
.clients-section,
.clients-section-one {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.clients-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.clients-moon {
    /* Decorative only — must never intercept clicks. A positioned,
       full-bleed element with no pointer-events rule swallows clicks across
       its whole box even where its artwork is transparent. */
    pointer-events: none;
    position: absolute;
    width: 52%;
    height: 130%;
    top: -8%;
    right: -12%;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #e9e9e9 55%, #cfcfcf 100%);
}

.clients-stars {
    /* Decorative only — must never intercept clicks. A positioned,
       full-bleed element with no pointer-events rule swallows clicks across
       its whole box even where its artwork is transparent. */
    pointer-events: none;
    position: absolute;
    width: 40%;
    height: 70%;
    top: 6%;
    right: 6%;
    background-image: url('../images/multistars.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: .8;
}

.clients-orbit {
    /* Decorative only — must never intercept clicks. A positioned,
       full-bleed element with no pointer-events rule swallows clicks across
       its whole box even where its artwork is transparent. */
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.orbit-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size, 16px);
    height: var(--size, 16px);
    margin: calc(var(--size, 16px) / -2);
    border-radius: 50%;
    background: #000;
    will-change: transform, opacity;
}

.orbit-dot1 {
    --size: 16px;
    width: var(--size);
    height: var(--size);
}

.orbit-dot2 {
    --size: 36px;
    width: var(--size);
    height: var(--size);
}

.orbit-dot3 {
    --size: 50px;
    width: var(--size);
    height: var(--size);
}

.orbit-dot4 {
    --size: 26px;
    width: var(--size);
    height: var(--size);
}

.clients-stage {
    position: relative;
    height: 100%;
}

.clients-intro,
.client-card,
.clients-outro {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
}

.clients-introone {
    inset: 0;
    display: flex;
    align-items: center;
}

.clients-intro,
.clients-introone {
    opacity: 1;
}

.clients-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 26px;
    max-width: 700px;
}

.clients-text {
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.65;
    color: var(--muted);
    max-width: 640px;
}

.client-photo {
    position: absolute;
    inset: 0 0% 0 0;
    overflow: hidden;

    z-index: 4;
}

.client-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);

    -webkit-mask-image:
        linear-gradient(to right, #000 55%, transparent 96%),
        linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, #000 55%, transparent 96%),
        linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
}

.client-info {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
}

.client-dot {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #111;
}

.client-name {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 36px);
    color: var(--ink);
    margin-bottom: 10px;
}

.client-tag {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.5;
    color: var(--muted);
    margin-bottom: 14px;
    max-width: 380px;
}

.client-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
}

.clients-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.clients-ring .client-info {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    pointer-events: none;
    opacity: 0;
}

.clients-ring .client-copy {
    opacity: 0;
    pointer-events: none;
}

.clients-more {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    color: var(--ink);
}

.clients-section-one {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.clients-stage .custom-container {
    max-width: 700px;
}

/* ---------------- AND MANY MORE ---------------- */
.many-more {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: 80px;
}

.more-topleft-img {
    position: absolute;
    top: 0px;
    left: 0px;
}
.many-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.inner-text {
    position: relative;
    z-index: 1;
}

.more-bottom-circle1 {
    position: absolute;
    bottom: 0%;
    right: 10%;
    max-width: 400px;
}

.sml-circle1 {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    max-width: 240px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------- SERVICES / STRATEGY ---------------- */
.services-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* overflow: hidden; */
    background-image: url("../images/background-dark.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.services-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.services-moon {
    position: absolute;
    width: 56%;
    height: 130%;
    top: -10%;
    left: -14%;
    border-radius: 50%;
    background: radial-gradient(circle at 65% 35%, #fff 0%, #dcdcdc 55%, #bdbdbd 100%);
}

.services-stars {
    position: absolute;
    width: 40%;
    height: 60%;
    top: 8%;
    left: 44%;
    background-image: url('../images/multistars.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: .8;
}

.services-content {
    position: relative;
    z-index: 1;
    margin-left: auto;
    max-width: 45%;
    width: 100%;
}

.services-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 10vh;
}

.services-track {
    position: relative;
    height: 100vh;
}

.service-block {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    opacity: 8%;
    filter: blur(2px);
    will-change: transform, opacity, filter;
}

.service-block h3 {
    font-family: var(--secondaru-font);
    font-weight: 500;
    font-size: clamp(20px, 1.8vw, 42px);
    color: #fff;
    margin-bottom: 12px;
}

.service-block p {
    font-size: clamp(14px, 1vw, 18px);
    line-height: 1.6;
    color: #fff;
}

/* ---------------- READY TO DREAM BIG (CTA) ---------------- */
.cta-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.cta-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.cta-clouds img {
    width: 100%;
    display: block;
}

.cta-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cta-sun {
    position: absolute;
    top: 8%;
    right: 14%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-image: url("../images/glow-circle.png");
    background-repeat: no-repeat;
}

.cta-mountains {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.cta-title {
    font-family: var(--secondaru-font);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 22px;
}

.cta-text {
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.65;
    color: var(--muted);
    margin-bottom: 28px;
}

.cta-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
}

.cta-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}

.cta-links a:hover {
    text-decoration: underline;
}

.footer-bottom-hill {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.footer-sahpe {
    position: absolute;
    bottom: 0px;
    left: 0px;

}

.footer-bottom-hill img {
    width: 100%;
}

@media (max-width: 768px) {
    /* Mobile browser chrome (Chrome/Samsung Internet's address bar
       showing/hiding while scrolling) resizes window.innerHeight, but
       every pinned full-screen section below is sized with `100vh` —
       the LARGE viewport height (address bar fully hidden). Whenever
       the toolbar re-appears (typically scrolling bottom-to-top, or
       just pausing to read), the actually-visible area shrinks under
       that fixed 100vh box, which read as page content/images silently
       hiding or the clients card slider changing on its own even
       though nothing was scrolled by hand — none of that is a real
       scroll or ScrollTrigger event, just the toolbar eating into a
       box sized for a taller viewport than what's presently visible.
       `100svh` is the SMALL viewport height — the guaranteed-visible
       area with the toolbar shown — so it never changes as the
       toolbar animates in/out, keeping every pin's scroll distance and
       on-screen content stable regardless of browser chrome. Desktop
       is untouched (still plain 100vh outside this query). */
    .hero,
    .services-section,
    .cta-section {
        min-height: 100vh;
        min-height: 100svh;
    }
    .sun-section,
    .sky-section,
    .global-section,
    .formula-section,
    .about-section,
    .about-section-two,
    .clients-section,
    .clients-section-one,
    .many-more,
    .services-track {
        height: 100vh;
        height: 100svh;
    }

    /* Mobile-only. The page scrolls natively now, so this is no longer
       protecting a scroll system — it is kept because an upward swipe near
       the top of a long pinned page very easily triggers Chrome/Safari's
       pull-to-refresh, which yanks the whole viewport down mid-animation.
       It only affects behaviour at the scroll boundaries; normal scrolling,
       momentum and easing are completely untouched. Desktop is unaffected
       (wheel/trackpad have no native bounce). */
    html,
    body {
        overscroll-behavior-y: none;
    }

.formula-blob img {
    width: 150vh;
    opacity: 0.4;
    left: -90px;
    position: relative;
}
    .about-moon-left {
    right: 0;
    margin: auto;
    object-fit: cover;
    bottom: -36%;
            top: unset;
}
    .formula-blob--b {
        top: unset;
        left: -80%;
        right: 0;
        margin: auto;
        object-fit: cover;
        bottom: -20%;
    }

    .about-section-two .about-content {
        margin-left: 0;
    }

    .formula-section {

        align-items: center;

    }

  
    .formula-blob--b img {
        width: 62rem;
    }

    .scroll-indicator {
        top: 15px;
        bottom: unset;
        z-index: 9999;
    }

    .global-inner {
        max-width: 100%;
    }

 
    .global-moon {
        width: 145vw;
        right: -44vw;
        bottom: auto;
        top: unset;
        bottom: -1%;
    }

    .formula-columns {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 100svh;
        text-align: left;
        padding-top: 120px;
        align-items: flex-start;
    }

    .hero-copy {
        max-width: 100%;
    }

 
    .hero-glow,
    .hero-glow-white {
        left: 50%;
        top: auto;
        bottom: 4%;
        width: min(92vw, 480px);
        height: min(92vw, 480px);
        transform: translate(-50%, 0);
    }

   
    .hero-clouds-lift {
        transform: scale(1.25);
        transform-origin: bottom center;
    }

    .sun-section {
        align-items: flex-end;
        padding: 140px 0 80px;
    }

    .sun-moon {
        width: 80%;
        height: 60%;
        left: -30%;
        top: auto;
        bottom: -20%;
    }

  
    .sun-orbit {
        inset: auto;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vw;
    }

    .sun-decor-corner-1 {

        opacity: 0.6;
    }

    .sun-decor-corner-2 {
        opacity: 0.5;
    }

    .client-photo img {

        object-position: 24% 50%;
    }

    .footer-sahpe img {
        max-width: 50%;
    }

    .global-stars {
        width: 290%;
    }

    .global-dot-run {
        gap: 10px;
        left: 0;
        right: 0;
        justify-content: space-around;
        max-width: 300px;
        margin: auto;
    }

    .global-dot-run span:nth-child(5) {
        margin-left: 25px;
        margin-bottom: -70px;
        width: 40px;
        height: 40px;
    }

    .global-dot-run span:nth-child(4) {
        margin-left: 25px;
        margin-bottom: -30px;
        width: 30px;
        height: 30px;
    }

    .global-dot-run span:nth-child(3) {
        margin-left: 10px;
        margin-bottom: 2px;
        width: 20px;
        height: 20px;
    }

    .footer-bottom-hill img {
        height: 40vh;
        object-fit: cover;
    }

  
    .sky-moon {
        width: 300vw;
        bottom: -35vw;
      
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .about-section {
        padding: 140px 0 80px;
    }

    .about-glow {
        width: 80vw;
        height: 80vw;
        top: -20%;
        right: -30%;
    }

    .about-stars {
        width: 70%;
    }

    .clients-moon {
        width: 90%;
        height: 60%;
        top: auto;
        bottom: -18%;
        right: -20%;
    }

  
    .client-moon {
        top: 8%;
        height: 44vh;
    }

    .client-moon img {
        width: 68vw;
        max-width: 300px;
        margin: 0 auto;
    }

 
    .clients-section-one .client-right-circle {
        width: 180px;
        top: -30px;
        right: -30px;
    }

    .clients-section-one .client-leftbottom-circle {
        width: 140px;
        left: -10%;
    }

    .clients-section-one .client-star {
        height: 220px;
        top: 4%;
    }

    .clients-introone {
        padding-top: 40px;
    }

    .client-photo {
        inset: 0 0% 0 0;
    }

    .client-info {
        gap: 16px;
        z-index: 5;
    }

    .client-dot {
        width: 44px;
        height: 44px;
    }

    .services-content {
        margin-left: 0;
        max-width: 100%;
    }

    .services-moon {
        width: 90%;
        height: 60%;
        top: auto;
        bottom: -18%;
        left: -20%;
    }

   
    .service-moon {
        width: 55%;
        height: 55vh;
        top: auto;
        bottom: -12%;
        left: -18%;
    }
    .services-section .client-right-circle {
        width: 160px;
    }

    .cta-content {
        max-width: 100%;
    }

     .cta-links{
        flex-direction: column;
        align-items: baseline;
     }
     .service-moon {
    width: auto;
    height: 61vh;
    top: auto;
    bottom: -50vh;
}
}