/* =========================================================
   HERO
   ========================================================= */

.slide--hero {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;

    background: #070a0d;
    color: #f4f6f8;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


/* =========================================================
   HERO — CONTENT
   ========================================================= */

.slide__inner--hero {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* ---------------------------------------------------------
   TOPLINE
   --------------------------------------------------------- */

.hero__topline {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-top: 92px;
}

.hero__eyebrow {
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: rgba(218, 225, 231, .62);

    transition: color .7s var(--ease);
}

.slide-index {
    color: rgba(244, 246, 248, .72);

    transition: color .7s var(--ease);
}

.slide-index span {
    color: rgba(141, 151, 162, .54);
}


/* ---------------------------------------------------------
   MAIN CONTENT
   --------------------------------------------------------- */

.hero__content {
    position: relative;
    z-index: 10;

    max-width: 700px;

    margin-top: auto;
    margin-bottom: auto;

    padding-top: 48px;
}

.hero__content .eyebrow {
    margin-bottom: 18px;

    color: rgba(218, 225, 231, .56);

    transition: color .7s var(--ease);
}

.hero__title {
    max-width: 760px;

    font-size: clamp(44px, 4.5vw, 84px);
    line-height: .90;
    letter-spacing: -.055em;

    color: #f4f6f8;

    transition: color .7s var(--ease);
}

.hero__title span {
    color: var(--accent-strong);

    transition: color .7s var(--ease);
}

.hero__description {
    max-width: 520px;
    margin-top: 22px;

    font-size: clamp(15px, 1.02vw, 18px);
    line-height: 1.55;

    color: rgba(160, 171, 181, .96);

    transition: color .7s var(--ease);
}

.hero__content .button {
    margin-top: 24px;
}


/* ---------------------------------------------------------
   BOTTOMLINE
   --------------------------------------------------------- */

.hero__bottomline {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}

.hero__keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;

    color: rgba(102, 114, 125, .88);

    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;

    transition: color .7s var(--ease);
}

.hero__keywords span:not(:last-child)::after {
    content: "";

    display: inline-block;

    width: 16px;
    height: 1px;

    margin-left: 20px;

    vertical-align: middle;

    background: rgba(85, 97, 109, .82);

    transition: background .7s var(--ease);
}

.hero__badge {
    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(155, 165, 175, .94);

    font-size: 10px;
    line-height: 1.45;

    text-transform: uppercase;
    letter-spacing: .08em;

    transition: color .7s var(--ease);
}

.hero__badge-dot {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(0, 141, 213, .98),
            rgba(0, 141, 213, .20) 46%,
            transparent 66%
        );

    box-shadow:
        0 0 18px rgba(0, 141, 213, .08);

    transition:
        border-color .7s var(--ease),
        background .7s var(--ease),
        box-shadow .7s var(--ease);
}


/* =========================================================
   HERO — ART ENVIRONMENT
   ========================================================= */

.hero-art {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    isolation: isolate;

    --hero-parallax-x: 0px;
    --hero-parallax-y: 0px;
    --hero-glow-x: 0px;
    --hero-glow-y: 0px;

    background:
        radial-gradient(
            circle at 73% 45%,
            rgba(0, 141, 213, .14),
            transparent 23%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(0, 108, 178, .085),
            transparent 25%
        ),
        linear-gradient(
            115deg,
            #05080b 0%,
            #081016 55%,
            #060a0e 100%
        );

    transition:
        background .8s var(--ease);
}


/* =========================================================
   HERO — ATMOSPHERIC DEPTH
   ========================================================= */

.hero-art::before {
    content: "";

    position: absolute;
    z-index: 2;

    width: min(920px, 64vw);
    height: min(700px, 76vh);

    top: 34%;
    right: -4%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 141, 213, .14) 0%,
            rgba(0, 141, 213, .06) 32%,
            rgba(0, 141, 213, .018) 53%,
            transparent 74%
        );

    filter: blur(30px);

    pointer-events: none;

    transform:
        translate3d(
            calc(var(--hero-glow-x) * .35),
            calc(var(--hero-glow-y) * .35),
            0
        );
}


/* =========================================================
   HERO — PERSPECTIVE ENGINEERING FIELD
   ========================================================= */

.hero-art::after {
    content: "";

    position: absolute;
    z-index: 2;

    width: min(980px, 68vw);
    height: min(760px, 84vh);

    top: 11%;
    right: -5%;

    opacity: .46;

    background:
        linear-gradient(
            rgba(0, 141, 213, .075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 141, 213, .075) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    transform:
        perspective(1100px)
        rotateY(-7deg)
        rotateX(2deg)
        translate3d(
            calc(var(--hero-parallax-x) * .12),
            calc(var(--hero-parallax-y) * .12),
            0
        );

    transform-origin: 78% 50%;

    mask-image:
        radial-gradient(
            ellipse 82% 72% at 58% 52%,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .55) 42%,
            rgba(0, 0, 0, .18) 68%,
            transparent 100%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 82% 72% at 58% 52%,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .55) 42%,
            rgba(0, 0, 0, .18) 68%,
            transparent 100%
        );

    mix-blend-mode: screen;

    pointer-events: none;

    transition:
        opacity .8s var(--ease),
        transform 1s var(--ease);
}


/* =========================================================
   HERO — AMBIENT GRID
   ========================================================= */

.hero-art__grid {
    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: .42;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .032) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .032) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .74) 26%,
            rgba(0, 0, 0, .42) 64%,
            rgba(0, 0, 0, .08) 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .74) 26%,
            rgba(0, 0, 0, .42) 64%,
            rgba(0, 0, 0, .08) 100%
        );

    pointer-events: none;

    transform:
        translate3d(
            calc(var(--hero-parallax-x) * .08),
            calc(var(--hero-parallax-y) * .08),
            0
        );

    transition:
        opacity .8s var(--ease);
}


/* =========================================================
   HERO — SHARP TECHNICAL MARKS
   ========================================================= */

.hero-art__grid::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 18%;
    right: 13%;

    width: 120px;
    height: 120px;

    border:
        1px solid rgba(0, 141, 213, .105);

    border-radius: 50%;

    box-shadow:
        0 0 0 1px rgba(0, 141, 213, .025),
        inset 0 0 30px rgba(0, 141, 213, .018);

    opacity: .75;
}

.hero-art__grid::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: 31%;
    right: 5%;

    width: 220px;
    height: 90px;

    background:
        linear-gradient(
            90deg,
            transparent 0 16%,
            rgba(0, 141, 213, .14) 16% 16.5%,
            transparent 16.5% 100%
        ),
        linear-gradient(
            0deg,
            transparent 0 49%,
            rgba(0, 141, 213, .12) 49% 50%,
            transparent 50% 100%
        );

    opacity: .65;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );
}


/* =========================================================
   HERO — MAIN LIGHT VOLUME
   ========================================================= */

.hero-art__glow {
    position: absolute;
    z-index: 2;

    width: min(760px, 46vw);
    aspect-ratio: 1;

    top: 49%;
    right: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 141, 213, .28) 0%,
            rgba(0, 141, 213, .12) 24%,
            rgba(0, 141, 213, .045) 45%,
            transparent 72%
        );

    filter: blur(22px);

    pointer-events: none;

    transform:
        translate3d(
            calc(-50% + var(--hero-glow-x)),
            calc(-50% + var(--hero-glow-y)),
            0
        );

    transition:
        opacity .8s var(--ease);
}


/* =========================================================
   HERO — PRODUCT
   ========================================================= */

.hero-art__product {
    position: absolute;
    z-index: 4;

    width: min(49vw, 820px);
    height: auto;

    right: 1.5%;
    bottom: -4%;

    display: block;

    pointer-events: none;

    filter:
        drop-shadow(
            0 30px 44px rgba(0, 0, 0, .34)
        )
        drop-shadow(
            0 7px 18px rgba(0, 0, 0, .16)
        );

    transform:
        translate3d(
            var(--hero-parallax-x),
            var(--hero-parallax-y),
            0
        )
        rotateZ(-1deg);

    will-change: transform;

    transition:
        width .8s var(--ease),
        right .8s var(--ease),
        bottom .8s var(--ease),
        transform 1s cubic-bezier(.22, 1, .36, 1),
        filter .8s var(--ease);
}


/* =========================================================
   HERO — LIGHT THEME
   ========================================================= */

html[data-theme="light"] .slide--hero {
    background: #f4f7f9;
    color: #11151a;
}

html[data-theme="light"] .hero-art {
    background:
        radial-gradient(
            circle at 71% 44%,
            rgba(0, 141, 213, .08),
            transparent 22%
        ),
        radial-gradient(
            circle at 87% 78%,
            rgba(108, 166, 200, .055),
            transparent 24%
        ),
        linear-gradient(
            115deg,
            #f6f9fb 0%,
            #edf2f5 54%,
            #f9fbfc 100%
        );
}


/* ---------------------------------------------------------
   LIGHT — ATMOSPHERIC DEPTH
   --------------------------------------------------------- */

html[data-theme="light"] .hero-art::before {
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 141, 213, .065) 0%,
            rgba(0, 141, 213, .026) 34%,
            rgba(0, 141, 213, .008) 54%,
            transparent 75%
        );

    filter: blur(34px);
}


/* ---------------------------------------------------------
   LIGHT — PERSPECTIVE FIELD
   --------------------------------------------------------- */

html[data-theme="light"] .hero-art::after {
    opacity: .62;

    mix-blend-mode: multiply;

    background:
        linear-gradient(
            rgba(46, 88, 108, .052) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(46, 88, 108, .052) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        radial-gradient(
            ellipse 82% 72% at 58% 52%,
            rgba(0, 0, 0, .68) 0%,
            rgba(0, 0, 0, .38) 42%,
            rgba(0, 0, 0, .14) 68%,
            transparent 100%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 82% 72% at 58% 52%,
            rgba(0, 0, 0, .68) 0%,
            rgba(0, 0, 0, .38) 42%,
            rgba(0, 0, 0, .14) 68%,
            transparent 100%
        );
}


/* ---------------------------------------------------------
   LIGHT — AMBIENT GRID
   --------------------------------------------------------- */

html[data-theme="light"] .hero-art__grid {
    opacity: .62;

    background-image:
        linear-gradient(
            rgba(17, 21, 26, .042) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17, 21, 26, .042) 1px,
            transparent 1px
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .52) 26%,
            rgba(0, 0, 0, .24) 64%,
            rgba(0, 0, 0, .055) 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .52) 26%,
            rgba(0, 0, 0, .24) 64%,
            rgba(0, 0, 0, .055) 100%
        );
}


/* ---------------------------------------------------------
   LIGHT — TECHNICAL MARKS
   --------------------------------------------------------- */

html[data-theme="light"] .hero-art__grid::before {
    border-color: rgba(34, 86, 108, .11);

    box-shadow:
        0 0 0 1px rgba(34, 86, 108, .02),
        inset 0 0 30px rgba(34, 86, 108, .012);
}

html[data-theme="light"] .hero-art__grid::after {
    background:
        linear-gradient(
            90deg,
            transparent 0 16%,
            rgba(34, 86, 108, .11) 16% 16.5%,
            transparent 16.5% 100%
        ),
        linear-gradient(
            0deg,
            transparent 0 49%,
            rgba(34, 86, 108, .09) 49% 50%,
            transparent 50% 100%
        );
}


/* ---------------------------------------------------------
   LIGHT — MAIN GLOW
   --------------------------------------------------------- */

html[data-theme="light"] .hero-art__glow {
    background:
        radial-gradient(
            circle,
            rgba(0, 141, 213, .105) 0%,
            rgba(0, 141, 213, .038) 27%,
            rgba(0, 141, 213, .012) 48%,
            transparent 72%
        );

    filter: blur(24px);
}


/* ---------------------------------------------------------
   LIGHT — PRODUCT
   --------------------------------------------------------- */

html[data-theme="light"] .hero-art__product {
    filter:
        drop-shadow(0 30px 42px rgba(17, 21, 26, .14))
        drop-shadow(0 10px 10px rgba(17, 21, 26, .12))
        drop-shadow(0 8px 18px rgba(17, 21, 26, .07));
}


/* =========================================================
   HERO — LIGHT TEXT
   ========================================================= */

html[data-theme="light"] .hero__eyebrow {
    color: rgba(17, 21, 26, .56);
}

html[data-theme="light"] .hero__content .eyebrow {
    color: rgba(17, 21, 26, .54);
}

html[data-theme="light"] .slide-index {
    color: rgba(17, 21, 26, .66);
}

html[data-theme="light"] .slide-index span {
    color: rgba(17, 21, 26, .38);
}

html[data-theme="light"] .hero__title {
    color: #11151a;
}

html[data-theme="light"] .hero__description {
    color: rgba(17, 21, 26, .68);
}

html[data-theme="light"] .hero__keywords {
    color: rgba(17, 21, 26, .50);
}

html[data-theme="light"] .hero__keywords span:not(:last-child)::after {
    background: rgba(17, 21, 26, .22);
}

html[data-theme="light"] .hero__badge {
    color: rgba(17, 21, 26, .58);
}

html[data-theme="light"] .hero__badge-dot {
    border-color: rgba(17, 21, 26, .16);

    box-shadow:
        0 0 18px rgba(0, 141, 213, .12);
}

html[data-theme="light"] .slide--hero .button--primary {
    color: #f4f6f8;
    background: #11151a;
}

html[data-theme="light"] .slide--hero .button__icon {
    background: var(--accent);
    color: #fff;
}


/* =========================================================
   HERO — RESPONSIVE PARALLAX RESET
   ========================================================= */

@media (max-width: 900px) {

    .hero-art {
        --hero-parallax-x: 0px;
        --hero-parallax-y: 0px;
        --hero-glow-x: 0px;
        --hero-glow-y: 0px;
    }
}


/* =========================================================
   HERO — REDUCED MOTION
   ========================================================= */

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

    .hero-art,
    .hero-art::before,
    .hero-art::after,
    .hero-art__grid,
    .hero-art__grid::before,
    .hero-art__grid::after,
    .hero-art__glow,
    .hero-art__product {
        transition: none;
    }

    .hero-art__product,
    .hero-art__grid,
    .hero-art::after {
        transform: none;
    }
}


/* =========================================================
   ABOUT
   ========================================================= */


.slide--about .slide__inner,
.slide--directions .slide__inner,
.slide--office .slide__inner,
.slide--projects .slide__inner,
.slide--geography .slide__inner,
.slide--contacts .slide__inner {
    padding-top: 34px;
}

.about-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 7vw;
    align-items: start;
    min-height: calc(100dvh - 210px);
    padding: 58px 0 34px;
}

.about-copy h2 {
    margin-top: 16px;
    font-size: clamp(48px, 5.5vw, 96px);
    line-height: .9;
}

.about-description {
    max-width: 760px;
}

.about-description > p {
    max-width: 720px;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.62;
    color: var(--text);
}

.about-description > p + p {
    margin-top: 20px;
}

.about-description strong {
    font-weight: 600;
}

.about-points {
    margin-top: 30px;
    border-top: 1px solid var(--line);
}

.about-points > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;
    align-items: center;

    min-height: 52px;

    border-bottom: 1px solid var(--line);
}

.about-points span {
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--muted-2);
}

.about-points p {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.about-copy .lead { margin-top: 34px; }

.about-visual {
    position: relative;
    height: min(58vh, 700px);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(198,211,222,.22)),
        radial-gradient(circle at 72% 30%, rgba(0,141,213,.3), transparent 24%),
        linear-gradient(145deg, #a7bac9, #697d8f 52%, #243744);
    box-shadow: var(--shadow-soft);
}

.about-visual__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.55) 42% 44%, transparent 44%);
    opacity: .5;
}

.about-visual__building {
    position: absolute;
    right: 9%;
    top: 16%;
    width: 48%;
    height: 66%;
    border-radius: 26px 26px 8px 8px;
    border: 1px solid rgba(255,255,255,.34);
    background: linear-gradient(135deg, rgba(17,21,26,.82), rgba(37,62,78,.65));
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,.93);
    font-size: clamp(28px, 3vw, 60px);
    letter-spacing: -.05em;
}

.about-visual__building small {
    font-size: 10px;
    letter-spacing: .18em;
    color: rgba(255,255,255,.65);
}

.about-visual__caption {
    position: absolute;
    left: 28px;
    bottom: 24px;
    color: rgba(255,255,255,.76);
    font-size: 10px;
    letter-spacing: .1em;
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.metric {
    min-height: 92px;
    padding: 22px 24px;
    border-right: 1px solid var(--line);
}

.metric:last-child { border-right: 0; }

.metric strong {
    display: block;
    font-size: clamp(28px, 2.1vw, 40px);
    font-weight: 500;
    letter-spacing: -.05em;
}

.metric span {
    display: block;
    margin-top: 4px;
    max-width: 150px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
}

/* DIRECTIONS */
.direction-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: end;
    padding: 64px 0 36px;
}

.direction-intro h2 {
    font-size: clamp(48px, 5vw, 92px);
    line-height: .92;
}

.direction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.direction-card {
    position: relative;
    min-height: 320px;
    padding: 26px 25px 30px;
    border-right: 1px solid var(--line);
    transition: background .4s var(--ease), transform .4s var(--ease);
}

.direction-card:last-child { border-right: 0; }
.direction-card:hover { background: rgba(0,141,213,.045); }

.direction-card__index {
    font-size: 11px;
    color: var(--muted-2);
}

.direction-card__icon {
    margin-top: 54px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
}

.direction-card h3 {
    margin-top: 34px;
    font-size: clamp(23px, 1.55vw, 30px);
    line-height: 1.06;
}

.direction-card p {
    margin-top: 14px;
    max-width: 250px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

.direction-mission {
    align-self: end;
    max-width: 660px;
    padding-left: 22px;
    border-left: 1px solid rgba(0, 141, 213, .48);
}

.direction-mission__text {
    max-width: 600px;
    margin-top: 18px;
    font-size: clamp(13px, .92vw, 16px);
    line-height: 1.7;
}

.direction-mission__text--last {
    color: var(--text);
}

.direction-intro h2 span {
    color: var(--accent-strong);
    transition: color .7s var(--ease);
}

/* =========================================================
   PRODUCT — SHOWCASE
   ========================================================= */

.slide--product {
    position: relative;

    background: #f3f5f7;
    color: #11151a;
    
    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


html[data-theme="dark"] .slide--product {
    background: #070a0d;
    color: #f4f6f8;

   
}


/* ---------------------------------------------------------
   CANVAS
   --------------------------------------------------------- */

.slide--product .slide__inner {
    display: flex;
    flex-direction: column;

    height: 100dvh;
    min-height: 100dvh;
    
    overflow: hidden;
}


/* ---------------------------------------------------------
   SHOWCASE
   --------------------------------------------------------- */

.slide--product .section-topline {
    margin-bottom: 22px;
}

.slide--product .product-overview {
    position: relative;

    flex: 1;
    min-height: 0;

    padding-bottom: 24px;

    overflow: hidden;
}


/* ---------------------------------------------------------
   VISUAL
   --------------------------------------------------------- */

.slide--product .product-overview__visual {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid rgba(0, 141, 213, .24);
    border-radius: 24px;

    background: transparent;

    isolation: isolate;
}


.slide--product .product-overview__visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.015);

    filter:
        saturate(.92)
        contrast(1.04)
        brightness(.78);
}


/* ---------------------------------------------------------
   TECH GRID
   --------------------------------------------------------- */

.slide--product .product-overview__grid {
    position: absolute;
    inset: 0;

    z-index: 1;

    opacity: .25;

    background:
        linear-gradient(
            rgba(0, 141, 213, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 141, 213, .055) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    pointer-events: none;
}


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.slide--product .product-overview__overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 10, 13, .97) 0%,
            rgba(7, 10, 13, .90) 18%,
            rgba(7, 10, 13, .68) 34%,
            rgba(7, 10, 13, .32) 52%,
            rgba(7, 10, 13, .08) 72%,
            transparent 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 10, 13, .34),
            transparent 38%
        );
}


/* ---------------------------------------------------------
   INNER FRAME
   --------------------------------------------------------- */

.slide--product .product-overview__frame {
    position: absolute;
    inset: 18px;

    z-index: 3;

    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 18px;

    pointer-events: none;
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.slide--product .product-overview__content {
    position: relative;
    z-index: 5;

    width: min(580px, 42%);
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 24px 0 110px 28px;
}


.slide--product .product-overview__content h2 {
    max-width: 620px;
    color: #fff;
    margin-top: 14px;

    font-size: clamp(58px, 5.1vw, 92px);
    line-height: .86;

    letter-spacing: -.06em;
}


.slide--product .product-overview__content h2 span {
    color: var(--accent-strong);
}


.slide--product .product-overview__lead {
    max-width: 500px;

    margin-top: 24px;

    font-size: clamp(14px, .9vw, 17px);
    line-height: 1.5;

    color: rgba(180, 190, 200, .94);
}


.slide--product .product-overview__text {
    max-width: 520px;

    margin-top: 24px;
}


.slide--product .product-overview__text p {
    margin: 0;

    font-family: inherit;

     font-size: clamp(12px, .9vw, 15px);
    line-height: 1.5;

    color: rgba(180, 190, 200, .94);
}


.slide--product .product-overview__text p + p {
    margin-top: 12px;
}


.slide--product .product-overview__text strong {
    color: #f4f6f8;

    font-weight: 600;
}


/* ---------------------------------------------------------
   VISUAL LABEL
   --------------------------------------------------------- */

.slide--product .product-overview__visual-label {
    position: absolute;

    left: 30px;
    bottom: 114px;
    
    z-index: 4;

    color: rgba(244, 246, 248, .42);

    font-size: 7px;
    line-height: 1;

    letter-spacing: .14em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   PROCESS
   --------------------------------------------------------- */

.slide--product .product-process {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 20px;

    z-index: 6;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    min-height: 78px;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 15px;

    background: rgba(8, 13, 18, .70);

    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    margin-left: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}


.slide--product .product-process__step {
    display: grid;

    grid-template-columns: 42px 24px minmax(0, 1fr);

    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 10px 18px;
}


.slide--product .product-process__step + .product-process__step {
    border-left: 1px solid rgba(255, 255, 255, .12);
}


.slide--product .product-process__icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(0, 141, 213, .42);
    border-radius: 50%;

    color: var(--accent-strong);

    background: rgba(0, 141, 213, .055);
}


.slide--product .product-process__icon svg {
    width: 17px;
    height: 17px;

    stroke-width: 1.6;
}


.slide--product .product-process__number {
    align-self: start;

    padding-top: 2px;

    color: var(--accent-strong);

    font-size: 7px;
    line-height: 1;
}


.slide--product .product-process__copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.slide--product .product-process__copy strong {
    color: #f4f6f8;

    font-size: 12px;
    line-height: 1;

    letter-spacing: .08em;
}


.slide--product .product-process__copy span {
    color: rgba(176, 185, 193, .68);

    font-size: 11px;
    line-height: 1.2;
}


/* ---------------------------------------------------------
   LIGHT
   --------------------------------------------------------- */

html[data-theme="light"] .slide--product .product-overview__visual {
    border-color: rgba(17, 21, 26, .10);
}


html[data-theme="light"] .slide--product .product-overview__visual img {
    filter:
        saturate(.88)
        contrast(1.02)
        brightness(.96);
}


html[data-theme="light"] .slide--product .product-overview__lead {
    color: #fff;
}


html[data-theme="light"] .slide--product .product-overview__text p {
    color: #fff;
}


html[data-theme="light"] .slide--product .product-overview__text strong {
    color: #fff;
}


html[data-theme="light"] .slide--product .product-overview__frame {
    border-color: rgba(17, 21, 26, .12);
}


html[data-theme="light"] .slide--product .product-overview__process {
    color: #11151a;
}


html[data-theme="light"] .slide--product .product-process {
    border-color: rgba(17, 21, 26, .12);

    background: rgba(255, 255, 255, .72);
}


html[data-theme="light"] .slide--product .product-process__step + .product-process__step {
    border-left-color: rgba(17, 21, 26, .10);
}


html[data-theme="light"] .slide--product .product-process__copy strong {
    color: #11151a;
}


html[data-theme="light"] .slide--product .product-process__copy span {
    color: rgba(89, 98, 108, .72);
}





/* =========================================================
   WAREHOUSE — HERO
   ========================================================= */

.slide--warehouse {
    position: relative;

    min-height: 100dvh;

    overflow: hidden;
    isolation: isolate;

    background: #070a0d;
    color: #f4f6f8;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.warehouse-hero__image {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;
}

.warehouse-hero__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.025);

    filter:
        saturate(.9)
        contrast(1.04)
        brightness(.76);

    transition:
        transform 1.2s cubic-bezier(.22, 1, .36, 1),
        filter .8s var(--ease);
}


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.warehouse-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,13,.98) 0%,
            rgba(7,10,13,.90) 18%,
            rgba(7,10,13,.62) 36%,
            rgba(7,10,13,.18) 58%,
            transparent 80%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,13,.28) 0%,
            transparent 30%,
            transparent 76%,
            rgba(7,10,13,.10) 100%
        );

    transition:
        background .7s var(--ease);
}


/* ---------------------------------------------------------
   HERO AREA
   --------------------------------------------------------- */

.warehouse-hero {
    position: relative;
    z-index: 3;

    min-height: calc(100dvh - 120px);

    display: flex;
    align-items: center;

    padding-top: 30px;
    padding-bottom: 34px;
}

.warehouse-hero__content {
    width: min(640px, 50vw);
}

.warehouse-hero__content h2 {
    margin-top: 15px;

    max-width: 680px;

    font-size: clamp(60px, 5.8vw, 104px);
    line-height: .89;

    letter-spacing: -.055em;

    color: #f4f6f8;
}

.warehouse-hero__content h2 span {
    color: var(--accent-strong);

    transition: color .7s var(--ease);
}

.warehouse-hero__lead {
    max-width: 480px;

    margin-top: 28px;

    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.58;

    color: rgba(218,225,231,.76);

    transition: color .7s var(--ease);
}

/* ---------------------------------------------------------
   METRICS
   --------------------------------------------------------- */

.warehouse-hero__metrics {
    display: flex;

    margin-top: 38px;
}

.warehouse-hero__metric {
    min-width: 150px;

    padding-right: 28px;
}

.warehouse-hero__metric + .warehouse-hero__metric {
    padding-left: 28px;

    border-left: 1px solid rgba(255,255,255,.14);
}

.warehouse-hero__metric strong {
    display: block;

    font-size: clamp(28px, 2.5vw, 40px);
    line-height: .9;

    font-weight: 500;
    letter-spacing: -.055em;

    color: #f4f6f8;
}

.warehouse-hero__metric span {
    display: block;

    margin-top: 7px;

    font-size: 9px;
    line-height: 1.35;

    letter-spacing: .09em;
    text-transform: uppercase;

    color: rgba(160,171,181,.78);
}


/* ---------------------------------------------------------
   PHOTO LABEL
   --------------------------------------------------------- */

.warehouse-hero__tag {
    position: absolute;

    right: 0;
    bottom: 8px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 10px 14px;

    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;

    background: rgba(7,10,13,.28);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    color: rgba(255,255,255,.84);

    font-size: 9px;
    line-height: 1;

    letter-spacing: .11em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   LIGHT THEME
   --------------------------------------------------------- */

html[data-theme="light"] .slide--warehouse {
    background: #f3f5f7;
    color: #11151a;
}

html[data-theme="light"] .slide--warehouse .section-topline {
    color: #6f7781;
}

html[data-theme="light"] .slide--warehouse .section-topline::after {
    background: var(--line);
}

html[data-theme="light"] .warehouse-hero__image img {
    filter:
        saturate(.9)
        contrast(.96)
        brightness(1.04);
}

html[data-theme="light"] .warehouse-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(243,245,247,.96) 0%,
            rgba(243,245,247,.86) 18%,
            rgba(243,245,247,.54) 35%,
            rgba(243,245,247,.12) 56%,
            transparent 80%
        ),
        linear-gradient(
            0deg,
            rgba(243,245,247,.12),
            transparent 30%,
            transparent 76%,
            rgba(243,245,247,.06)
        );
}

html[data-theme="light"] .warehouse-hero__content h2 {
    color: #11151a;
}

html[data-theme="light"] .warehouse-hero__lead {
    color: rgba(17,21,26,.68);
}

html[data-theme="light"] .warehouse-hero__metric strong {
    color: #11151a;
}

html[data-theme="light"] .warehouse-hero__metric span {
    color: #737b86;
}

html[data-theme="light"] .warehouse-hero__metric + .warehouse-hero__metric {
    border-left-color: var(--line);
}

html[data-theme="light"] .warehouse-hero__tag {
    border-color: rgba(17,21,26,.16);

    background: rgba(255,255,255,.42);

    color: rgba(17,21,26,.72);
}


/* ---------------------------------------------------------
   HOVER — MICRO MOVEMENT
   --------------------------------------------------------- */

@media (hover: hover) {

    .slide--warehouse:hover .warehouse-hero__image img {
        transform: scale(1.045);
    }
}

/* =========================================================
   WAREHOUSE — BENTO
   ========================================================= */

.slide--warehouse-bento {
    position: relative;

    background: #f3f5f7;
    color: #11151a;

    overflow: hidden;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

html[data-theme="dark"] .slide--warehouse-bento {
    background: #070a0d;
    color: #f4f6f8;
}


/* ---------------------------------------------------------
   BENTO GRID
   --------------------------------------------------------- */

.warehouse-bento {
    display: grid;

    grid-template-columns:
        1.15fr
        .85fr
        .85fr
        1.15fr;

    grid-template-rows:
        1.15fr
        .85fr
        .82fr;

    grid-template-areas:
        "hero hero supply statement"
        "hero hero detail shipping"
        "fact  fact  detail shipping";

    gap: 12px;

    height: calc(100dvh - 118px);

    min-height: 0;

    padding-top: 28px;
    padding-bottom: 34px;
}


/* ---------------------------------------------------------
   TILE BASE
   --------------------------------------------------------- */

.warehouse-bento__tile {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: var(--surface);

    box-shadow:
        0 14px 38px rgba(17, 21, 26, .06);

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        border-color .4s var(--ease),
        box-shadow .5s cubic-bezier(.22, 1, .36, 1),
        background .55s var(--ease);

    will-change: transform;
}


/* ---------------------------------------------------------
   AREAS
   --------------------------------------------------------- */

.warehouse-bento__tile--hero {
    grid-area: hero;
}

.warehouse-bento__tile--supply {
    grid-area: supply;
}

.warehouse-bento__tile--statement {
    grid-area: statement;
}

.warehouse-bento__tile--detail {
    grid-area: detail;
}

.warehouse-bento__tile--shipping {
    grid-area: shipping;
}

.warehouse-bento__tile--fact {
    grid-area: fact;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.warehouse-bento__image {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.warehouse-bento__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.015);

    filter:
        saturate(.92)
        contrast(.98)
        brightness(1.02);

    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1),
        filter .7s var(--ease);
}


/* ---------------------------------------------------------
   IMAGE OVERLAY
   --------------------------------------------------------- */

.warehouse-bento__overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7,10,13,.05),
            transparent 42%,
            rgba(7,10,13,.38)
        ),
        linear-gradient(
            90deg,
            rgba(7,10,13,.22),
            transparent 45%
        );

    transition:
        background .5s var(--ease);
}


/* ---------------------------------------------------------
   IMAGE LABEL
   --------------------------------------------------------- */

.warehouse-bento__label {
    position: absolute;
    z-index: 4;

    top: 16px;
    left: 16px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 8px 11px;

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;

    background: rgba(7,10,13,.24);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: rgba(255,255,255,.84);

    font-size: 8px;
    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HERO CAPTION
   --------------------------------------------------------- */

.warehouse-bento__caption {
    position: absolute;
    z-index: 4;

    left: 18px;
    right: 18px;
    bottom: 18px;

    max-width: 320px;

    font-size: clamp(13px, .95vw, 17px);
    line-height: 1.35;

    letter-spacing: -.015em;

    color: rgba(255,255,255,.88);
}


/* ---------------------------------------------------------
   TEXT TILES
   --------------------------------------------------------- */

.warehouse-bento__tile--statement,
.warehouse-bento__tile--fact {
    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 20px 22px;
}

.warehouse-bento__text-top {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    color: var(--muted-2);

    font-size: 9px;
    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.warehouse-bento__tile--statement h3 {
    margin-top: auto;

    max-width: 410px;

    font-size: clamp(26px, 2.5vw, 44px);
    line-height: .95;

    letter-spacing: -.05em;

    color: var(--text);
}

.warehouse-bento__tile--statement h3 span {
    color: var(--accent-strong);

    transition: color .7s var(--ease);
}

.warehouse-bento__tile--statement p {
    max-width: 280px;

    margin-top: 18px;

    font-size: 12px;
    line-height: 1.5;

    color: var(--muted);
}


/* ---------------------------------------------------------
   FACT TILE
   --------------------------------------------------------- */

.warehouse-bento__tile--fact {
    background:
        linear-gradient(
            135deg,
            rgba(0,141,213,.055),
            transparent 54%
        ),
        var(--surface);
}

.warehouse-bento__tile--fact strong {
    display: block;

    margin-top: auto;

    font-size: clamp(42px, 4.5vw, 76px);
    line-height: .82;

    font-weight: 500;

    letter-spacing: -.065em;

    color: var(--text);
}

.warehouse-bento__tile--fact p {
    margin-top: 8px;

    font-size: 11px;
    line-height: 1.3;

    color: var(--muted);

    text-transform: uppercase;
    letter-spacing: .08em;
}

.warehouse-bento__fact-line {
    display: block;

    margin-top: 18px;

    padding-top: 12px;

    border-top: 1px solid var(--line);

    font-size: 10px;
    line-height: 1;

    color: var(--accent-strong);

    text-transform: uppercase;
    letter-spacing: .1em;
}


/* ---------------------------------------------------------
   DARK BENTO
   --------------------------------------------------------- */

html[data-theme="dark"] .warehouse-bento__tile {
    background: #11151a;

    border-color: rgba(255,255,255,.10);

    box-shadow:
        0 20px 48px rgba(0,0,0,.20);
}

html[data-theme="dark"] .warehouse-bento__tile--fact {
    background:
        linear-gradient(
            135deg,
            rgba(0,141,213,.10),
            transparent 56%
        ),
        #11151a;
}

html[data-theme="dark"] .warehouse-bento__image img {
    filter:
        saturate(.82)
        contrast(1.04)
        brightness(.78);
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .warehouse-bento__tile:hover {
        transform: translateY(-4px);

        border-color: rgba(0,141,213,.28);

        box-shadow:
            0 24px 54px rgba(17,21,26,.12);
    }

    html[data-theme="dark"] .warehouse-bento__tile:hover {
        border-color: rgba(0,141,213,.34);

        box-shadow:
            0 26px 60px rgba(0,0,0,.30);
    }

    .warehouse-bento__tile:hover .warehouse-bento__image img {
        transform: scale(1.045);
    }

    .warehouse-bento__tile:hover .warehouse-bento__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(7,10,13,.04),
                transparent 35%,
                rgba(7,10,13,.30)
            );
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .warehouse-bento__tile,
    .warehouse-bento__image img {
        transition: none;
    }

    .warehouse-bento__tile:hover {
        transform: none;
    }

    .warehouse-bento__tile:hover .warehouse-bento__image img {
        transform: scale(1.015);
    }
}

/* =========================================================
   OFFICE — BENTO
   ========================================================= */

.slide--office-bento {
    position: relative;

    overflow: hidden;

    background: #f3f5f7;
    color: #11151a;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

html[data-theme="dark"] .slide--office-bento {
    background: #070a0d;
    color: #f4f6f8;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.office-bento {
    display: grid;

    grid-template-columns:
        1.25fr
        .875fr
        .875fr
        1fr;

    grid-template-rows:
        1.15fr
        .9fr
        .78fr;

    grid-template-areas:
        "hero hero detail workspace"
        "hero hero team meeting"
        "wide wide team meeting";

    gap: 12px;

    height: calc(100dvh - 118px);

    min-height: 0;

    padding-top: 28px;
    padding-bottom: 34px;
}


/* ---------------------------------------------------------
   TILE
   --------------------------------------------------------- */

.office-bento__tile {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: var(--surface-soft);

    box-shadow:
        0 14px 40px rgba(17, 21, 26, .065);

    isolation: isolate;

    will-change: transform;

    transition:
        transform .48s cubic-bezier(.22, 1, .36, 1),
        border-color .4s var(--ease),
        box-shadow .48s cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------------------------------
   AREAS
   --------------------------------------------------------- */

.office-bento__tile--hero {
    grid-area: hero;
}

.office-bento__tile--detail {
    grid-area: detail;
}

.office-bento__tile--workspace {
    grid-area: workspace;
}

.office-bento__tile--team {
    grid-area: team;
}

.office-bento__tile--meeting {
    grid-area: meeting;
}

.office-bento__tile--wide {
    grid-area: wide;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.office-bento__image {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.office-bento__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.015);

    filter:
        saturate(.93)
        contrast(.98)
        brightness(1.02);

    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1),
        filter .7s var(--ease);
}


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.office-bento__overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7,10,13,.045) 0%,
            transparent 40%,
            rgba(7,10,13,.38) 100%
        ),
        linear-gradient(
            90deg,
            rgba(7,10,13,.16),
            transparent 48%
        );

    transition:
        opacity .45s var(--ease),
        background .45s var(--ease);
}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.office-bento__label {
    position: absolute;
    z-index: 4;

    top: 15px;
    left: 15px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 8px 11px;

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;

    background: rgba(7,10,13,.24);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: rgba(255,255,255,.84);

    font-size: 8px;
    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   CAPTION
   --------------------------------------------------------- */

.office-bento__caption {
    position: absolute;
    z-index: 4;

    left: 18px;
    right: 18px;
    bottom: 18px;

    max-width: 330px;

    color: rgba(255,255,255,.9);

    font-size: clamp(13px, .95vw, 17px);
    line-height: 1.34;

    letter-spacing: -.015em;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        opacity .45s var(--ease);
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

html[data-theme="dark"] .office-bento__tile {
    background: #11151a;

    border-color: rgba(255,255,255,.105);

    box-shadow:
        0 20px 52px rgba(0,0,0,.22);
}

html[data-theme="dark"] .office-bento__image img {
    filter:
        saturate(.83)
        contrast(1.04)
        brightness(.78);
}

html[data-theme="dark"] .office-bento__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(7,10,13,.04) 0%,
            transparent 34%,
            rgba(7,10,13,.46) 100%
        ),
        linear-gradient(
            90deg,
            rgba(7,10,13,.18),
            transparent 50%
        );
}


/* ---------------------------------------------------------
   LIGHT THEME
   --------------------------------------------------------- */

html[data-theme="light"] .office-bento__image img {
    filter:
        saturate(.9)
        contrast(.97)
        brightness(1.035);
}

html[data-theme="light"] .office-bento__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(7,10,13,.02),
            transparent 42%,
            rgba(7,10,13,.28)
        ),
        linear-gradient(
            90deg,
            rgba(7,10,13,.08),
            transparent 52%
        );
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .office-bento__tile:hover {
        transform: translateY(-4px);

        border-color: rgba(0,141,213,.28);

        box-shadow:
            0 24px 56px rgba(17,21,26,.13);
    }

    html[data-theme="dark"] .office-bento__tile:hover {
        border-color: rgba(0,141,213,.34);

        box-shadow:
            0 26px 64px rgba(0,0,0,.32);
    }

    .office-bento__tile:hover
    .office-bento__image img {
        transform: scale(1.05);
    }

    .office-bento__tile:hover
    .office-bento__caption {
        transform: translateY(-3px);
    }

    .office-bento__tile:hover
    .office-bento__label {
        border-color: rgba(255,255,255,.36);
    }
}


/* ---------------------------------------------------------
   REVEAL STAGGER
   --------------------------------------------------------- */

.office-bento__tile:nth-child(1) {
    transition-delay: 0ms;
}

.office-bento__tile:nth-child(2) {
    transition-delay: 60ms;
}

.office-bento__tile:nth-child(3) {
    transition-delay: 120ms;
}

.office-bento__tile:nth-child(4) {
    transition-delay: 180ms;
}

.office-bento__tile:nth-child(5) {
    transition-delay: 240ms;
}

.office-bento__tile:nth-child(6) {
    transition-delay: 300ms;
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .office-bento__tile,
    .office-bento__image img,
    .office-bento__caption {
        transition: none !important;
    }

    .office-bento__tile:hover {
        transform: none;
    }

    .office-bento__tile:hover
    .office-bento__image img {
        transform: scale(1.015);
    }
}

/* =========================================================
   OFFICE — HERO
   ========================================================= */

.slide--office {
    position: relative;

    background: #f3f5f7;
    color: #11151a;

    overflow: hidden;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


/* ---------------------------------------------------------
   DARK
   --------------------------------------------------------- */

html[data-theme="dark"] .slide--office {
    background: #070a0d;
    color: #f4f6f8;
}


/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */

.office-grid {
    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: clamp(50px, 7vw, 110px);

    align-items: center;

    min-height: calc(100dvh - 125px);

    padding-top: 30px;
    padding-bottom: 34px;
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.office-copy {
    max-width: 610px;
}

.office-copy h2 {
    margin-top: 15px;

    max-width: 620px;

    font-size: clamp(58px, 5.7vw, 104px);
    line-height: .89;

    letter-spacing: -.055em;
}

.office-copy h2 span {
    color: var(--accent-strong);

    transition: color .7s var(--ease);
}

.office-copy .lead {
    max-width: 500px;

    margin-top: 28px;

    font-size: clamp(15px, 1.02vw, 18px);
    line-height: 1.58;

    color: var(--muted);

    transition: color .7s var(--ease);
}


/* ---------------------------------------------------------
   ICON POINTS
   --------------------------------------------------------- */

.icon-points {
    display: flex;

    gap: 32px;

    margin-top: 40px;
}

.icon-points > div {
    display: grid;

    gap: 9px;

    justify-items: start;

    color: var(--muted);

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .08em;

    transition:
        color .35s var(--ease),
        transform .35s var(--ease);
}

.icon-points svg {
    width: 19px;
    height: 19px;

    color: var(--accent);

    stroke-width: 1.6;
}

@media (hover: hover) {

    .icon-points > div:hover {
        color: var(--text);

        transform: translateY(-3px);
    }
}


/* ---------------------------------------------------------
   VISUAL
   --------------------------------------------------------- */

.office-visual {
    position: relative;

    height: min(66vh, 720px);

    min-width: 0;
}

.office-visual__image {
    position: absolute;
    inset: 0;

    z-index: 2;

    overflow: hidden;

    border: 1px solid var(--line);

    border-radius: var(--radius-lg);

    background: var(--surface-soft);

    box-shadow:
        0 28px 70px rgba(17,21,26,.12),
        0 8px 22px rgba(17,21,26,.06);

    transform:
        rotate(-.8deg)
        scale(1.01);

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        box-shadow .7s var(--ease),
        border-color .7s var(--ease);
}

.office-visual__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.018);

    filter:
        saturate(.92)
        contrast(.98)
        brightness(1.02);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1),
        filter .8s var(--ease);
}


/* ---------------------------------------------------------
   PHOTO INTEGRATION
   --------------------------------------------------------- */

.office-visual__overlay {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(243,245,247,.08),
            transparent 28%
        ),
        linear-gradient(
            0deg,
            rgba(243,245,247,.14),
            transparent 28%
        );

    transition: background .7s var(--ease);
}


/* ---------------------------------------------------------
   TAG
   --------------------------------------------------------- */

.office-visual__tag {
    position: absolute;

    z-index: 4;

    right: 20px;
    bottom: 18px;

    display: flex;
    gap: 15px;

    padding: 10px 13px;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;

    background: rgba(7,10,13,.28);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    color: rgba(255,255,255,.86);

    font-size: 9px;
    line-height: 1;

    letter-spacing: .11em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

html[data-theme="dark"] .office-visual__image {
    box-shadow:
        0 34px 80px rgba(0,0,0,.40),
        0 10px 28px rgba(0,0,0,.22);

    border-color: rgba(255,255,255,.12);
}

html[data-theme="dark"] .office-visual__image img {
    filter:
        saturate(.84)
        contrast(1.04)
        brightness(.76);
}

html[data-theme="dark"] .office-visual__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7,10,13,.18),
            transparent 32%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,13,.28),
            transparent 30%
        );
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .office-visual:hover .office-visual__image {
        transform:
            rotate(-.25deg)
            scale(1.018);

        box-shadow:
            0 34px 78px rgba(17,21,26,.16),
            0 10px 26px rgba(17,21,26,.08);
    }

    .office-visual:hover .office-visual__image img {
        transform: scale(1.04);
    }

}


/* =========================================================
   PROJECT WALL
   ========================================================= */

.slide--project-wall {
    position: relative;

    overflow: hidden;

    background: #070a0d;
    color: #f4f6f8;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}

 .slide--project-wall .slide__inner {
     display: flex;
    flex-direction: column;

    height: 100dvh;
    min-height: 100dvh;
}  


/* ---------------------------------------------------------
   ENGINEERING GRID
   --------------------------------------------------------- */

.slide--project-wall::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* ---------------------------------------------------------
   LIGHT THEME
   --------------------------------------------------------- */

html[data-theme="light"] .slide--project-wall {
    background: #f3f5f7;
    color: #11151a;
}

html[data-theme="light"] .slide--project-wall::before {
    opacity: .28;

    background-image:
        linear-gradient(
            rgba(17,21,26,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,21,26,.028) 1px,
            transparent 1px
        );
}


/* ---------------------------------------------------------
   WALL
   --------------------------------------------------------- */


.project-wall {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-template-rows:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, .86fr);

    grid-template-areas:
        "hero hero hero hero hero hero hero hero remark remark remark remark"
        "hero hero hero hero hero hero hero hero bicity bicity bicity bicity"
        "apple apple apple apple airport airport airport airport perinatal perinatal perinatal perinatal";

    gap: 12px;

    flex: 1;

    min-height: 0;

    padding-top: 22px;
    padding-bottom: 6px;
}


/* ---------------------------------------------------------
   TILE
   --------------------------------------------------------- */

.project-wall__tile {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;

    background: #11151a;

    box-shadow:
        0 18px 44px rgba(0,0,0,.16);

    isolation: isolate;

    cursor: default;

    transition:
        transform .65s var(--ease),
        border-color .55s var(--ease),
        box-shadow .65s var(--ease);
}


/* AREAS */

.project-wall__tile--hero {
    grid-area: hero;
}

.project-wall__tile:nth-child(2) {
    grid-area: remark;
}

.project-wall__tile:nth-child(3) {
    grid-area: bicity;
}

.project-wall__tile:nth-child(4) {
    grid-area: apple;
}

.project-wall__tile:nth-child(5) {
    grid-area: airport;
}

.project-wall__tile:nth-child(6) {
    grid-area: perinatal;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.project-wall__media {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background: #1a2026;

    z-index: 0;
}

.project-wall__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.001);

    filter:
        saturate(.82)
        contrast(1.04)
        brightness(.76);

    transition:
        transform 1.1s cubic-bezier(.22,1,.36,1),
        filter .8s var(--ease);
}


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.project-wall__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7,10,13,.10) 0%,
            rgba(7,10,13,.12) 30%,
            rgba(7,10,13,.68) 100%
        ),
        linear-gradient(
            90deg,
            rgba(7,10,13,.20),
            transparent 52%
        );

    transition:
        opacity .7s var(--ease);
}


/* ---------------------------------------------------------
   TOP META
   --------------------------------------------------------- */

.project-wall__top {
    position: absolute;
    z-index: 3;

    top: 15px;
    left: 16px;
    right: 16px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    font-size: 9px;
    line-height: 1;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.project-wall__number {
    color: var(--accent);

    font-size: 11px;
    font-weight: 500;
}

.project-wall__city {
    color: rgba(244,246,248,.68);
}


/* ---------------------------------------------------------
   BOTTOM META
   --------------------------------------------------------- */

.project-wall__bottom {
    position: absolute;
    z-index: 3;

    left: 17px;
    right: 17px;
    bottom: 16px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.project-wall__title {
    max-width: 78%;
  overflow-wrap: break-word;
    word-break: normal;
    color: #f4f6f8;

    font-size: clamp(17px, 1.35vw, 23px);
    line-height: .96;

    font-weight: 500;
    letter-spacing: -.045em;

    transition:
        color .45s var(--ease),
        transform .55s var(--ease);
}

.project-wall__tile--hero .project-wall__title {
    max-width: 82%;

    font-size: clamp(30px, 3vw, 52px);
    line-height: .88;
    letter-spacing: -.055em;
}

.project-wall__code {
    flex: 0 0 auto;

    padding-bottom: 2px;

    color: rgba(244,246,248,.46);

    font-size: 7px;
    line-height: 1;

    letter-spacing: .13em;
    text-transform: uppercase;

    transition:
        color .45s var(--ease);
}


/* ---------------------------------------------------------
   ACCENT LINE
   --------------------------------------------------------- */

.project-wall__accent {
    position: absolute;
    z-index: 4;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--accent);

    transition:
        width .7s cubic-bezier(.22,1,.36,1);
}


/* ---------------------------------------------------------
   LIGHT TILE
   --------------------------------------------------------- */

html[data-theme="light"] .project-wall__tile {
    background: #ffffff;

    border-color: rgba(17,21,26,.11);

    box-shadow:
        0 18px 44px rgba(17,21,26,.08);
}

html[data-theme="light"] .project-wall__media img {
    filter:
        saturate(.92)
        contrast(.98)
        brightness(1.02);
}

html[data-theme="light"] .project-wall__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(17,21,26,.02) 0%,
            rgba(17,21,26,.06) 34%,
            rgba(17,21,26,.62) 100%
        ),
        linear-gradient(
            90deg,
            rgba(17,21,26,.08),
            transparent 52%
        );
}

html[data-theme="light"] .project-wall__city {
    color: rgba(255,255,255,.76);
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .project-wall__tile:hover {
        transform: translateY(-3px);

        border-color: rgba(0,141,213,.38);

        box-shadow:
            0 24px 58px rgba(0,0,0,.24),
            0 0 0 1px rgba(0,141,213,.045);
    }

    .project-wall__tile:hover .project-wall__media img {
        transform: scale(1.045);

        filter:
            saturate(.92)
            contrast(1.04)
            brightness(.87);
    }

    .project-wall__tile:hover .project-wall__overlay {
        opacity: .88;
    }

    .project-wall__tile:hover .project-wall__title {
        transform: translateX(3px);
    }

    .project-wall__tile:hover .project-wall__code {
        color: rgba(244,246,248,.72);
    }

    .project-wall__tile:hover .project-wall__accent {
        width: 38%;
    }

    html[data-theme="light"] .project-wall__tile:hover .project-wall__media img {
        filter:
            saturate(.98)
            contrast(1)
            brightness(1.04);
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .project-wall__tile,
    .project-wall__media img,
    .project-wall__title,
    .project-wall__accent {
        transition: none;
    }

    .project-wall__tile:hover {
        transform: none;
    }

}

/* PROJECTS */
.projects-head {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 7vw;
    align-items: end;
    padding: 56px 0 36px;
}

.projects-head h2 {
    margin-top: 15px;
    font-size: clamp(50px, 5vw, 90px);
    line-height: .9;
}

.projects-head__copy {
    max-width: 430px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.project-card__image {
    aspect-ratio: 1.22;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.project-card__image--one {
    background:
        linear-gradient(180deg, rgba(17,21,26,.03), rgba(17,21,26,.2)),
        linear-gradient(140deg, #d8dee4 0 30%, #9db0be 30% 50%, #667b88 50% 64%, #233541 64%);
}

.project-card__image--two {
    background:
        linear-gradient(180deg, rgba(17,21,26,.04), rgba(17,21,26,.28)),
        linear-gradient(135deg, #d6dbe0 0 28%, #b6c2c9 28% 47%, #5e727d 47% 70%, #273a43 70%);
}

.project-card__image--three {
    background:
        linear-gradient(180deg, rgba(17,21,26,.03), rgba(17,21,26,.22)),
        linear-gradient(120deg, #dce2e6 0 34%, #9fb1bd 34% 56%, #667986 56% 76%, #324853 76%);
}

.project-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 4px 0;
    color: #67717c;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =========================================================
   GEOGRAPHY / DELIVERY
   ========================================================= */

.slide--geography {
    position: relative;

    overflow: hidden;

    background: #f3f5f7;
    color: #11151a;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

html[data-theme="dark"] .slide--geography {
    background: #070a0d;
    color: #f4f6f8;
}


/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */

.geo-layout {
    display: grid;

    grid-template-columns:
        .72fr
        1.28fr;

    gap: clamp(42px, 5vw, 82px);

    align-items: center;

    min-height: calc(100dvh - 145px);

    padding-top: 36px;
    padding-bottom: 34px;
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.geo-copy {
    max-width: 620px;
}

.geo-copy h2 {
    margin-top: 15px;

    max-width: 650px;

    font-size: clamp(58px, 5.8vw, 104px);
    line-height: .89;

    letter-spacing: -.058em;
}

.geo-copy h2 span {
    color: var(--accent-strong);

    transition: color .7s var(--ease);
}

.geo-copy__lead {
    max-width: 470px;

    margin-top: 28px;

    font-size: clamp(15px, 1.03vw, 18px);
    line-height: 1.58;

    color: var(--muted);

    transition: color .7s var(--ease);
}


/* ---------------------------------------------------------
   METRICS
   --------------------------------------------------------- */

.geo-copy .metric-row--compact {
    width: 100%;
    margin-top: 34px;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.geo-copy .metric-row--compact .metric {
    min-width: 0;
    min-height: 94px;

    padding: 18px 22px 16px 14px;

    border-right: 1px solid var(--line);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.geo-copy .metric-row--compact .metric:last-child {
    border-right: 0;
}

.geo-copy .metric-row--compact .metric strong {
    display: block;

    font-size: clamp(27px, 2vw, 34px);
    line-height: .95;

    letter-spacing: -.055em;

    white-space: nowrap;
}

.geo-copy .metric-row--compact .metric span {
    margin-top: 7px;

    font-size: 10px;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   MAP
   --------------------------------------------------------- */

.geo-map {
    position: relative;

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 0;
}

.geo-map__canvas {
    position: relative;

    width: 100%;
    max-width: 1180px;

    aspect-ratio: 1.55 / 1;

    overflow: hidden;

    margin-inline: auto;
}


/* ---------------------------------------------------------
   TECHNICAL GRID
   --------------------------------------------------------- */

.geo-map__grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .38;

    background-image:
        linear-gradient(
            rgba(17,21,26,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,21,26,.055) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    mask-image:
        radial-gradient(
            ellipse 72% 78% at 50% 50%,
            #000 0%,
            rgba(0,0,0,.60) 58%,
            transparent 100%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 72% 78% at 50% 50%,
            #000 0%,
            rgba(0,0,0,.60) 58%,
            transparent 100%
        );

    transition: opacity .7s var(--ease);
}


/* ---------------------------------------------------------
   KAZAKHSTAN SHAPE
   --------------------------------------------------------- */

.geo-map__shape {
    position: absolute;

    inset: 0;

    width: 108%;
    height: 108%;

    object-fit: contain;

    opacity: .34;

    filter:
        grayscale(1)
        contrast(1.08)
        brightness(.92);

    user-select: none;
    pointer-events: none;

    transform: translate(0, 0);

    transform-origin: center;

    transition:
        opacity .7s var(--ease),
        filter .7s var(--ease),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------------------------------
   ROUTES
   --------------------------------------------------------- */

.geo-map__routes {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}

.geo-route {
    fill: none;

    stroke: rgba(0,141,213,.52);

    stroke-width: .30;

    vector-effect: non-scaling-stroke;

    stroke-linecap: round;

    stroke-dasharray: 1.8 1.5;

    filter:
        drop-shadow(0 0 3px rgba(0,141,213,.22));

    animation:
        geoRouteFlow 6s linear infinite;

    transition:
        stroke .7s var(--ease),
        opacity .7s var(--ease);
}


@keyframes geoRouteFlow {

    to {
        stroke-dashoffset: -22;
    }

}


/* ---------------------------------------------------------
   CITIES
   --------------------------------------------------------- */

.geo-map__city {
    position: absolute;

    z-index: 10;

    width: 0;
    height: 0;

    pointer-events: none;
}


/* ---------------------------------------------------------
   PRIMARY / ASTANA
   --------------------------------------------------------- */

.geo-map__dot {
    position: absolute;

    left: -4px;
    top: -12px;

    width: 8px;
    height: 8px;

    border: 1px solid rgba(0,141,213,.65);
    border-radius: 50%;

    background: #008dd5;

    box-shadow:
        0 0 0 4px rgba(0,141,213,.10),
        0 0 16px rgba(0,141,213,.38),
        0 0 30px rgba(0,141,213,.16);
}


/* ---------------------------------------------------------
   SECONDARY CITIES
   --------------------------------------------------------- */

.geo-map__city--secondary .geo-map__dot {
    left: -3px;
    top: -3px;

    width: 6px;
    height: 6px;

    border: 1px solid rgba(0,141,213,.40);
    border-radius: 50%;

    background: #6f8795;

    box-shadow:
        0 0 0 3px rgba(0,141,213,.07),
        0 0 10px rgba(0,141,213,.12);
}


/* HALO */

.geo-map__city--secondary::before {
    content: "";

    position: absolute;

    left: -7px;
    top: -7px;

    width: 14px;
    height: 14px;

    border: 1px solid rgba(0,141,213,.13);
    border-radius: 50%;

    opacity: .8;
}


/* ---------------------------------------------------------
   ASTANA PULSE
   --------------------------------------------------------- */

.geo-map__pulse {
    position: absolute;

    left: -16px;
    top: -24px;

    width: 32px;
    height: 32px;

    border:
        1px solid rgba(0,141,213,.52);

    border-radius: 50%;

    box-shadow:
        0 0 22px rgba(0,141,213,.14);

    animation:
        geoPulse 2.6s ease-out infinite;
}

.geo-map__city--astana .geo-map__city-label {
    left: 14px;
    top: -10px;
}

.geo-map__city--astana .geo-map__city-label strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: -.025em;
}

@keyframes geoPulse {

    0% {
        opacity: .6;
        transform: scale(.55);
    }

    70% {
        opacity: .08;
        transform: scale(1.22);
    }

    100% {
        opacity: 0;
        transform: scale(1.34);
    }

}


/* ---------------------------------------------------------
   CITY LABELS
   --------------------------------------------------------- */

.geo-map__city-label {
    left: 13px;
    top: -7px;

    white-space: nowrap;

    color: #66737d;

    font-size: 10px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .055em;

    text-transform: uppercase;

    text-shadow:
        0 1px 8px rgba(255,255,255,.72);
}

.geo-map__city--bottom .geo-map__city-label {
    top: 12px;
    left: 12px;
}

.geo-map__city-label strong {
    display: block;

    color: var(--text);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: -.02em;
}

.geo-map__city-label small {
    display: block;

    margin-top: 5px;

    color: var(--accent-strong);

    font-size: 7px;

    letter-spacing: .09em;
}

.geo-map__city--bottom .geo-map__city-label {
    top: 10px;
    left: 10px;
}


/* ---------------------------------------------------------
   MAP META
   --------------------------------------------------------- */

.geo-map__meta {
    position: absolute;

    top: 8%;
    right: 6%;

    z-index: 6;

    display: flex;

    gap: 10px;

    padding: 8px 10px;

    border:
        1px solid rgba(17,21,26,.11);

    border-radius: 999px;

    background:
        rgba(255,255,255,.54);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: #69737d;

    font-size: 8px;
    line-height: 1;

    letter-spacing: .1em;

    text-transform: uppercase;
}

.geo-map__scale {
    position: absolute;

    right: 6%;
    bottom: 7%;

    z-index: 6;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #737d87;

    font-size: 7px;
    line-height: 1;

    letter-spacing: .12em;
}

.geo-map__scale span:first-child {
    width: 34px;
    height: 1px;

    background: var(--accent);
}

.geo-map__canvas::before {
    content: "";

    position: absolute;
    inset: 4%;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 61% 40%,
            rgba(0,141,213,.085),
            transparent 18%
        );

    opacity: .9;
}

.geo-map__canvas::after {
    content: "";

    position: absolute;
    inset: 4%;

    z-index: 11;

    pointer-events: none;

    background:
        linear-gradient(
            var(--accent),
            var(--accent)
        ) left top / 26px 1px no-repeat,

        linear-gradient(
            var(--accent),
            var(--accent)
        ) left top / 1px 26px no-repeat,

        linear-gradient(
            var(--accent),
            var(--accent)
        ) right top / 26px 1px no-repeat,

        linear-gradient(
            var(--accent),
            var(--accent)
        ) right top / 1px 26px no-repeat,

        linear-gradient(
            var(--accent),
            var(--accent)
        ) left bottom / 26px 1px no-repeat,

        linear-gradient(
            var(--accent),
            var(--accent)
        ) left bottom / 1px 26px no-repeat,

        linear-gradient(
            var(--accent),
            var(--accent)
        ) right bottom / 26px 1px no-repeat,

        linear-gradient(
            var(--accent),
            var(--accent)
        ) right bottom / 1px 26px no-repeat;

    opacity: .22;
}


/* ---------------------------------------------------------
   DARK THEME — MAP
   --------------------------------------------------------- */

html[data-theme="dark"] .geo-map__grid {
    opacity: .34;

    background-image:
        linear-gradient(
            rgba(255,255,255,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.028) 1px,
            transparent 1px
        );
}

html[data-theme="dark"] .geo-map__shape {
    opacity: .42;

    filter:
        grayscale(1)
        brightness(.62)
        contrast(1.08);
}



html[data-theme="dark"] .geo-route {
    stroke: rgba(0,157,232,.60);

    filter:
        drop-shadow(0 0 4px rgba(0,157,232,.28));
}

html[data-theme="dark"] .geo-map__city--secondary .geo-map__dot {
    background: rgba(218,225,231,.58);
}

html[data-theme="dark"] .geo-map__city-label {
    color: #9ba8b3;

    text-shadow:
        0 1px 10px rgba(0,0,0,.55);
}

html[data-theme="dark"] .geo-map__city-label strong {
    color: #f1f4f6;
}

html[data-theme="dark"] .geo-map__meta {
    border-color: rgba(255,255,255,.11);

    background: rgba(12,16,20,.42);

    color: #89949f;
}

html[data-theme="dark"] .geo-map__scale {
    color: #77828d;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .geo-map:hover .geo-map__shape {
        transform: scale(1.018);

        opacity: .34;
    }

    .geo-map__city--secondary:hover
    .geo-map__city-label {
        transform: translateY(-2px);

        color: var(--accent-strong);
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .geo-route,
    .geo-map__pulse {
        animation: none;
    }

    .geo-map:hover .geo-map__shape {
        transform: none;
    }
}

/* PARTNERS */
.slide--partners {
    background:
        radial-gradient(circle at 79% 28%, rgba(0,141,213,.18), transparent 25%),
        linear-gradient(130deg, #090b0e, #11171c 50%, #090b0e);
}

.partners-content {
    display: grid;
    grid-template-columns: .8fr .7fr;
    gap: 7vw;
    align-items: end;
    padding: 80px 0 42px;
}

.partners-content h2 {
    margin-top: 15px;
    font-size: clamp(50px, 5vw, 92px);
    line-height: .9;
}

.partners-copy {
    max-width: 420px;
    font-size: 16px;
    line-height: 1.6;
    color: #7f8a95;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(255,255,255,.11);
    border-bottom: 1px solid rgba(255,255,255,.11);
}

.partners-grid div {
    min-height: 130px;
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(255,255,255,.11);
    border-bottom: 1px solid rgba(255,255,255,.11);
    color: #87929d;
    font-size: clamp(21px, 2.3vw, 39px);
    font-weight: 600;
    letter-spacing: -.06em;
    transition: color .35s var(--ease), background .35s var(--ease);
}

.partners-grid div:nth-child(5n) { border-right: 0; }
.partners-grid div:nth-last-child(-n + 5) { border-bottom: 0; }
.partners-grid div:hover { color: #f4f6f8; background: rgba(255,255,255,.02); }

/* =========================================================
   CONTACTS / FINAL
   ========================================================= */

/* =========================================================
   CONTACTS / LIGHT THEME
   ========================================================= */

html[data-theme="light"] .slide--contacts {
    background:
        radial-gradient(
            circle at 82% 46%,
            rgba(0,141,213,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f3f5f7 0%,
            #eef1f4 55%,
            #e9edf0 100%
        );

    color: #11151a;
}


/* BACKGROUND */

html[data-theme="light"] .contacts-bg__grid {
    opacity: .14;

    background-image:
        linear-gradient(
            rgba(17,21,26,.075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,21,26,.075) 1px,
            transparent 1px
        );
}

html[data-theme="light"] .contacts-bg__glow {
    opacity: .7;

    background:
        radial-gradient(
            circle,
            rgba(0,141,213,.10) 0%,
            rgba(0,141,213,.025) 42%,
            transparent 72%
        );
}


/* TITLE */

html[data-theme="light"] .contacts-title {
    color: #11151a;
}


/* LEAD */

html[data-theme="light"] .contacts-lead {
    color: #5d6872;
}


/* LOCATIONS */

html[data-theme="light"] .contacts-location {
    border-top-color: rgba(17,21,26,.13);
}

html[data-theme="light"] .contacts-location__head span {
    color: #8a949d;
}

html[data-theme="light"] .contacts-location__head strong {
    color: #4d5963;
}

html[data-theme="light"] .contacts-location__address {
    color: #182026;
}

html[data-theme="light"] .contacts-location__hours span {
    color: #7b8790;
}

html[data-theme="light"] .contacts-location__hours strong {
    color: #434e57;
}


/* RIGHT SIDE */

html[data-theme="light"] .contacts-side {
    border-left-color: rgba(17,21,26,.12);
}

html[data-theme="light"] .contacts-label {
    color: #7c8790;
}


/* GHOST BRAND */

html[data-theme="light"] .contacts-brand {
    color: rgba(17,21,26,.045);
}


/* PHONE */

html[data-theme="light"] .contacts-phone {
    color: #11151a;
}

html[data-theme="light"] .contacts-email {
    color: #59656f;
}


/* WEBSITES */

html[data-theme="light"] .contacts-links {
    border-top-color: rgba(17,21,26,.11);
}

html[data-theme="light"] .contacts-link {
    color: #5d6872;

    border-bottom-color: rgba(17,21,26,.065);
}

html[data-theme="light"] .contacts-link svg,
html[data-theme="light"] .contacts-link {
    color: #5d6872;
}

html[data-theme="light"] .contacts-link--primary {
    color: #11151a;
}


/* SOCIAL */

html[data-theme="light"] .contacts-social__list a {
    color: #56626c;
}

html[data-theme="light"] .contacts-social__list img {
    opacity: .78;

    /* LIGHT — SVG → тёмный */
    filter: brightness(0) saturate(100%);
}

html[data-theme="light"] .contacts-social__list a:hover {
    color: #11151a;
}


/* SECONDARY PHONE */

html[data-theme="light"] .contacts-secondary-phone {
    border-top-color: rgba(17,21,26,.11);
}

html[data-theme="light"] .contacts-secondary-phone span {
    color: #7c8790;
}

html[data-theme="light"] .contacts-secondary-phone strong {
    color: #4c5861;
}


/* FOOTER */

html[data-theme="light"] .contacts-footer {
    border-top-color: rgba(17,21,26,.10);

    color: #7b858e;
}


.slide--contacts {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 46%,
            rgba(0,141,213,.11),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #06090c 0%,
            #0a0f14 55%,
            #070b0f 100%
        );

    color: #f4f6f8;
}


/* ---------------------------------------------------------
   BACKGROUND
   --------------------------------------------------------- */

.contacts-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;
    overflow: hidden;
}

.contacts-bg__grid {
    position: absolute;

    width: 900px;
    height: 900px;

    right: -7%;
    top: -15%;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(0,141,213,.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,141,213,.10) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.58) 48%,
            transparent 76%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.58) 48%,
            transparent 76%
        );

    transform:
        perspective(1000px)
        rotateY(-12deg)
        rotateX(3deg);
}

.contacts-bg__glow {
    position: absolute;

    width: 520px;
    height: 520px;

    right: 4%;
    top: 16%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,141,213,.10) 0%,
            rgba(0,141,213,.035) 38%,
            transparent 72%
        );

    filter: blur(12px);
}


/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */

.contacts-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    gap: clamp(56px, 7vw, 120px);

    align-items: stretch;

    min-height: calc(100dvh - 150px);

    padding-top: 54px;
    padding-bottom: 26px;
}


/* ---------------------------------------------------------
   MAIN COPY
   --------------------------------------------------------- */

.contacts-main {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
}

.contacts-title {
    max-width: 780px;

    margin-top: 16px;

    font-size: clamp(68px, 6.7vw, 126px);
    line-height: .86;

    letter-spacing: -.065em;

    color: #f4f6f8;
}

.contacts-title span {
    color: var(--accent-strong);

    transition: color .7s var(--ease);
}

.contacts-lead {
    max-width: 560px;

    margin-top: 28px;

    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.55;

    color: #8f9ba6;
}


/* ---------------------------------------------------------
   LOCATIONS
   --------------------------------------------------------- */

.contacts-locations {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 28px;

    margin-top: 44px;
}

.contacts-location {
    min-width: 0;

    padding-top: 16px;

    border-top:
        1px solid rgba(255,255,255,.16);
}

.contacts-location__head {
    display: flex;
    align-items: center;

    gap: 12px;
}

.contacts-location__head span {
    font-size: 9px;

    letter-spacing: .12em;

    color: #64717c;
}

.contacts-location__head strong {
    font-size: 10px;

    font-weight: 600;

    letter-spacing: .14em;

    color: #aeb8c0;

    text-transform: uppercase;
}

.contacts-location__address {
    display: block;

    margin-top: 16px;

    color: #e3e8ec;

    font-size: 12px;

    line-height: 1.45;

    letter-spacing: .02em;
}

.contacts-location__address--link {
    position: relative;

    padding-right: 20px;
}

.contacts-location__address--link svg {
    position: absolute;

    right: 0;
    top: 0;

    width: 13px;
    height: 13px;

    color: var(--accent);
}

.contacts-location__hours {
    display: grid;

    gap: 8px;

    margin-top: 17px;
}

.contacts-location__hours div {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    font-size: 9px;

    line-height: 1.25;
}

.contacts-location__hours span {
    color: #65727d;
}

.contacts-location__hours strong {
    font-weight: 500;

    color: #aeb8c0;

    text-align: right;
}


/* ---------------------------------------------------------
   RIGHT SIDE
   --------------------------------------------------------- */

.contacts-side {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding-left: clamp(34px, 4vw, 72px);

    border-left:
        1px solid rgba(255,255,255,.10);
}


/* ---------------------------------------------------------
   GHOST BRAND
   --------------------------------------------------------- */

.contacts-brand {
    position: absolute;

    z-index: 0;

    top: 1%;
    right: -2%;

    pointer-events: none;

    user-select: none;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    color: rgba(255,255,255,.035);
}

.contacts-brand__main {
    font-size: clamp(150px, 15vw, 290px);

    line-height: .68;

    font-weight: 700;

    letter-spacing: -.095em;
}

.contacts-brand__sub {
    margin-top: 15px;

    font-size: clamp(16px, 1.3vw, 23px);

    font-weight: 500;

    letter-spacing: .28em;
}


/* ---------------------------------------------------------
   RIGHT CONTENT
   --------------------------------------------------------- */

.contacts-primary,
.contacts-links,
.contacts-social,
.contacts-secondary-phone {
    position: relative;

    z-index: 2;
}

.contacts-label {
    margin-bottom: 12px;

    font-size: 9px;

    line-height: 1;

    letter-spacing: .13em;

    text-transform: uppercase;

    color: #687681;
}


/* PRIMARY PHONE */

.contacts-phone {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    color: #f4f6f8;

    font-size: clamp(28px, 2.45vw, 46px);

    line-height: 1;

    letter-spacing: -.045em;

    transition:
        color .3s var(--ease),
        transform .3s var(--ease);
}

.contacts-phone svg {
    width: 18px;
    height: 18px;

    color: var(--accent);
}

.contacts-phone:hover {
    color: var(--accent-strong);

    transform: translateX(3px);
}

.contacts-email {
    display: inline-block;

    margin-top: 13px;

    color: #8f9ba5;

    font-size: 15px;

    transition:
        color .3s var(--ease);
}

.contacts-email:hover {
    color: var(--accent-strong);
}


/* WEBSITES */

.contacts-links {
    margin-top: 38px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,.10);
}

.contacts-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 8px 0;

    border-bottom:
        1px solid rgba(255,255,255,.055);

    color: #89959f;

    font-size: 12px;

    transition:
        color .3s var(--ease),
        padding-left .3s var(--ease);
}

.contacts-link svg {
    width: 13px;
    height: 13px;

    color: #596771;
}

.contacts-link:hover {
    padding-left: 5px;

    color: #f4f6f8;
}

.contacts-link:hover svg {
    color: var(--accent);
}

.contacts-link--primary {
    color: #f4f6f8;

    font-size: 14px;
}

.contacts-link--primary::before {
    content: "";

    width: 5px;
    height: 5px;

    margin-right: -14px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 12px rgba(0,141,213,.42);
}


/* SOCIAL */

.contacts-social {
    margin-top: 27px;
}

.contacts-social__list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px 18px;
}

.contacts-social__list a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #7f8b95;

    font-size: 10px;

    transition:
        color .3s var(--ease);
}

.contacts-social__list img {
    display: block;

    width: 14px;
    height: 14px;

    object-fit: contain;
    flex: 0 0 14px;

    opacity: .72;

    /* DARK — SVG → светлый */
    filter: brightness(0) saturate(100%) invert(1);

    transition:
        opacity .3s var(--ease),
        transform .3s var(--ease),
        filter .3s var(--ease);
}


.contacts-social__list a:hover img {
    opacity: 1;
    transform: translateY(-1px);
}

.contacts-social__list a:hover {
    color: #f4f6f8;
}


/* SECONDARY PHONE */

.contacts-secondary-phone {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

    padding-top: 16px;

    border-top:
        1px solid rgba(255,255,255,.10);
}

.contacts-secondary-phone span {
    color: #596671;

    font-size: 8px;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.contacts-secondary-phone strong {
    color: #9aa6af;

    font-size: 11px;

    font-weight: 500;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.contacts-footer {
    position: relative;
    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 13px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color: #4f5c66;

    font-size: 8px;

    letter-spacing: .12em;

    text-transform: uppercase;
}

/* =========================================================
   CONTACTS — FIT ONE VIEWPORT
   ========================================================= */

@media (min-width: 901px) {

    .slide--contacts .slide__inner {
        display: flex;
        flex-direction: column;
    }

    .slide--contacts .contacts-layout {
        flex: 1;
        min-height: 0;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .contacts-phone,
    .contacts-link,
    .contacts-social__list a {
        transition: none;
    }
}


/* =========================================================
   ABOUT — THEME OVERRIDE
   ========================================================= */

/* DARK */

html[data-theme="dark"] .slide--about {
    background: #070a0d;
    color: #f4f6f8;
}

html[data-theme="dark"] .slide--about .section-topline {
    color: #8d97a2;
}

html[data-theme="dark"] .slide--about .section-topline::after {
    background: rgba(255, 255, 255, .11);
}

html[data-theme="dark"] .slide--about .eyebrow {
    color: rgba(218, 225, 231, .56);
}

html[data-theme="dark"] .slide--about .about-copy h2 {
    color: #f4f6f8;
}

html[data-theme="dark"] .slide--about .about-description > p {
    color: rgba(218, 225, 231, .78);
}

html[data-theme="dark"] .slide--about .about-description strong {
    color: #f4f6f8;
}

html[data-theme="dark"] .slide--about .about-points {
    border-color: rgba(255, 255, 255, .11);
}

html[data-theme="dark"] .slide--about .about-points > div {
    border-color: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .slide--about .about-points span {
    color: #697480;
}

html[data-theme="dark"] .slide--about .about-points p {
    color: #929ca6;
}

html[data-theme="dark"] .slide--about .metric-row {
    border-top-color: rgba(255, 255, 255, .11);
    border-bottom-color: rgba(255, 255, 255, .11);
}

html[data-theme="dark"] .slide--about .metric {
    border-right-color: rgba(255, 255, 255, .09);
}

html[data-theme="dark"] .slide--about .metric strong {
    color: #f4f6f8;
}

html[data-theme="dark"] .slide--about .metric span {
    color: #697480;
}


/* =========================================================
   DIRECTIONS — DARK THEME
   ========================================================= */

html[data-theme="dark"] .slide--directions {
    background: #070a0d;
    color: #f4f6f8;
}

html[data-theme="dark"] .slide--directions .section-topline {
    color: #8d97a2;
}

html[data-theme="dark"] .slide--directions .section-topline::after {
    background: rgba(255, 255, 255, .11);
}

html[data-theme="dark"] .slide--directions .eyebrow {
    color: rgba(218, 225, 231, .56);
}

html[data-theme="dark"] .slide--directions h2 {
    color: #f4f6f8;
}

html[data-theme="dark"] .slide--directions .direction-mission__text {
    color: #929ca6;
}

html[data-theme="dark"] .slide--directions .direction-mission__text--last {
    color: #d8e0e7;
}

html[data-theme="dark"] .slide--directions .direction-card {
    color: #f4f6f8;
}

html[data-theme="dark"] .slide--directions .direction-card p {
    color: #929ca6;
}

html[data-theme="dark"] .slide--directions .direction-card__index {
    color: #697480;
}

html[data-theme="dark"] .slide--directions .direction-card__icon {
    border-color: rgba(255, 255, 255, .11);
}

/* =========================================================
   OBJECTS — HERO INTRO
   ========================================================= */

.slide--objects {
    position: relative;

    background: #f3f5f7;
    color: #11151a;

    overflow: hidden;

    transition:
        background .7s var(--ease),
        color .7s var(--ease);
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

html[data-theme="dark"] .slide--objects {
    background: #070a0d;
    color: #f4f6f8;
}


/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */

.objects-hero {
    display: grid;

    grid-template-columns:
        minmax(0, .78fr)
        minmax(0, 1.22fr);

    gap: clamp(40px, 6vw, 100px);

    align-items: center;

    min-height: calc(100dvh - 130px);

    padding-top: 30px;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.objects-hero__content {
    position: relative;
    z-index: 3;

    max-width: 650px;
}

.objects-hero__content h2 {
    margin-top: 15px;

    max-width: 620px;

    font-size: clamp(52px, 5.5vw, 100px);
    line-height: .9;

    letter-spacing: -.055em;
}

.objects-hero__content h2 span {
    color: var(--accent-strong);

    transition: color .7s var(--ease);
}

.objects-hero__lead {
    max-width: 470px;

    margin-top: 28px;

    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.58;

    color: var(--muted);
}


/* ---------------------------------------------------------
   META
   --------------------------------------------------------- */

.objects-hero__meta {
    display: flex;

    gap: 34px;

    margin-top: 38px;
}

.objects-hero__meta > div {
    display: grid;

    grid-template-columns: auto 1fr;

    align-items: end;

    gap: 13px;
}

.objects-hero__meta > div + div {
    padding-left: 30px;

    border-left: 1px solid var(--line);
}

.objects-hero__meta strong {
    font-size: clamp(30px, 2.8vw, 46px);
    line-height: .9;

    font-weight: 500;

    letter-spacing: -.055em;

    color: var(--text);
}

.objects-hero__meta span {
    padding-bottom: 2px;

    font-size: 10px;
    line-height: 1.35;

    color: var(--muted);

    text-transform: uppercase;
    letter-spacing: .08em;
}


/* ---------------------------------------------------------
   VISUAL
   --------------------------------------------------------- */

.objects-hero__visual {
    position: relative;

    min-width: 0;

    height: min(69vh, 720px);

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------
   OFFSET TECHNICAL FRAME
   --------------------------------------------------------- */

.objects-hero__frame {
    position: absolute;
    z-index: 1;

    inset: 7% 2% 4% 4%;

    border: 1px solid var(--line);

    transform:
        translate(14px, 14px)
        rotate(.8deg);

    opacity: .9;

    transition:
        border-color .7s var(--ease),
        transform .8s var(--ease);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.objects-hero__image {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 32px 75px rgba(17, 21, 26, .18),
        0 8px 24px rgba(17, 21, 26, .08);

    transform:
        rotate(-1.15deg)
        scale(1.015);

    transform-origin: center;

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        box-shadow .7s var(--ease);
}

.objects-hero__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(.96)
        contrast(.98)
        brightness(1.02);

    transform: scale(1.015);

    transition:
        filter .8s var(--ease),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------------------------------
   LEFT FADE — INTEGRATE PHOTO INTO CANVAS
   --------------------------------------------------------- */

.objects-hero__image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(243, 245, 247, .34) 0%,
            rgba(243, 245, 247, .08) 17%,
            transparent 36%
        ),
        linear-gradient(
            0deg,
            rgba(243, 245, 247, .10),
            transparent 24%,
            transparent 78%,
            rgba(243, 245, 247, .05)
        );

    transition: background .7s var(--ease);
}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.objects-hero__label {
    position: absolute;
    z-index: 4;

    left: 24px;
    bottom: 22px;

    display: flex;

    gap: 16px;

    padding: 10px 13px;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;

    background: rgba(7, 10, 13, .34);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: rgba(255, 255, 255, .86);

    font-size: 9px;
    line-height: 1;

    letter-spacing: .11em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   DARK VISUAL
   --------------------------------------------------------- */

html[data-theme="dark"] .objects-hero__image {
    box-shadow:
        0 34px 82px rgba(0, 0, 0, .44),
        0 10px 26px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .objects-hero__image img {
    filter:
        saturate(.84)
        contrast(1.06)
        brightness(.78)
        sepia(.02)
        hue-rotate(-3deg);
}

html[data-theme="dark"] .objects-hero__image::after {
    background:
        linear-gradient(
            90deg,
            rgba(7, 10, 13, .52) 0%,
            rgba(7, 10, 13, .10) 20%,
            transparent 38%
        ),
        linear-gradient(
            0deg,
            rgba(7, 10, 13, .22),
            transparent 24%,
            transparent 78%,
            rgba(7, 10, 13, .08)
        );
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .objects-hero__visual:hover .objects-hero__image {
        transform:
            rotate(-.55deg)
            scale(1.025);
    }

    .objects-hero__visual:hover .objects-hero__image img {
        transform: scale(1.035);
    }

    .objects-hero__visual:hover .objects-hero__frame {
        transform:
            translate(18px, 18px)
            rotate(1deg);
    }
}