/* =========================================================
   SURREAL — ABOUT PAGE
   CIVIL ENGINEERING + IT / DIGITAL ECOSYSTEM
   SINGLE COPY-READY STYLESHEET
========================================================= */

:root {
    --orange: #f4791d;
    --orange-soft: rgba(244,121,29,.12);
    --ink: #111111;
    --dark: #0b0d0f;
    --dark-2: #111416;
    --dark-3: #171b1e;
    --white: #ffffff;
    --off-white: #f7f6f3;
    --muted: #777d80;
    --muted-dark: #92979b;
    --line: #e5e3df;
    --line-dark: #282c2f;
}

/* =========================================================
   GLOBAL ABOUT PAGE HELPERS
========================================================= */

.about-hero,
.about-story,
.disciplines-section,
.values-section,
.about-final-cta,
.building-section,
.it3d-section {
    width: 100%;
}

.about-hero h1,
.about-story h2,
.building-intro h2,
.it3d-intro h2,
.discipline-heading h2,
.values-header h2,
.about-cta-inner h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
}

.about-hero em,
.about-story em,
.building-intro em,
.it3d-intro em,
.discipline-heading em,
.values-header em,
.about-cta-inner em {
    color: var(--orange);
    font-style: italic;
}

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

.about-hero {
    min-height: 88vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 42%, rgba(244,121,29,.075), transparent 27%),
        linear-gradient(180deg, #faf9f6 0%, #f4f2ee 100%);
}

.about-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    top: 18%;
    border: 1px solid rgba(244,121,29,.18);
    border-radius: 50%;
    pointer-events: none;
}

.about-hero::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -280px;
    top: 7%;
    border: 1px solid rgba(17,17,17,.055);
    border-radius: 50%;
    pointer-events: none;
}

.about-hero-inner {
    width: 100%;
    min-height: 88vh;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
    align-items: center;
    gap: 70px;
    padding-top: 120px;
    padding-bottom: 90px;
    position: relative;
    z-index: 2;
}

.about-hero-content {
    max-width: 850px;
}

.about-hero .eyebrow,
.about-story .eyebrow,
.building-intro .eyebrow,
.it3d-intro .eyebrow,
.discipline-heading .eyebrow,
.values-header .eyebrow,
.about-cta-inner .eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--orange);
    text-transform: uppercase;
}

.about-hero h1 {
    max-width: 900px;
    margin: 22px 0 28px;
    color: #141414;
    font-size: clamp(58px, 7.2vw, 108px);
    line-height: .94;
    letter-spacing: -4px;
}

.about-hero h1 em {
    display: block;
}

.about-hero-content > p {
    max-width: 670px;
    margin: 0;
    color: #65696b;
    font-size: 16px;
    line-height: 1.9;
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 38px;
}

.about-hero-actions .btn {
    min-height: 52px;
}

.about-hero-side {
    justify-self: end;
    width: min(280px, 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    color: #222;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.2;
}

.about-hero-side strong {
    color: var(--orange);
    font-family: "Playfair Display", serif;
    font-size: 34px;
    font-weight: 400;
    line-height: .8;
    margin: 3px 0;
}

/* =========================================================
   STORY
========================================================= */

.about-story {
    padding: 145px 0 155px;
    background: var(--white);
}

.story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 110px;
    align-items: start;
}

.story-copy {
    max-width: 700px;
}

.story-copy h2 {
    margin: 20px 0 30px;
    font-size: clamp(45px, 5.5vw, 76px);
    line-height: 1;
    letter-spacing: -2.5px;
}

.story-copy p {
    max-width: 650px;
    margin: 0 0 19px;
    color: #6c7072;
    font-size: 15px;
    line-height: 1.9;
}

.story-signature {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 45px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.story-signature span {
    color: #191919;
    font-family: "Playfair Display", serif;
    font-size: 24px;
    letter-spacing: 2px;
}

.story-signature small {
    color: #999;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.story-numbers {
    border-top: 1px solid var(--line);
}

.story-number {
    display: grid;
    grid-template-columns: 65px 1fr;
    column-gap: 20px;
    padding: 27px 0 30px;
    border-bottom: 1px solid var(--line);
}

.story-number strong {
    grid-row: span 2;
    color: var(--orange);
    font-family: "Playfair Display", serif;
    font-size: 25px;
    font-weight: 500;
}

.story-number span {
    display: block;
    margin-bottom: 8px;
    color: #1d1d1d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.story-number p {
    margin: 0;
    color: #7b7f81;
    font-size: 13px;
    line-height: 1.75;
}

/* =========================================================
   3D CIVIL / BUILDING EXPERIENCE
========================================================= */

.building-section {
    background: var(--dark);
    color: var(--white);
    overflow: clip;
}

.building-intro {
    padding: 145px 0 85px;
}

.building-intro h2 {
    max-width: 920px;
    margin: 20px 0 27px;
    color: #fff;
    font-size: clamp(48px, 6vw, 84px);
    line-height: .98;
    letter-spacing: -3px;
}

.building-intro h2 em {
    display: block;
}

.building-intro p {
    max-width: 680px;
    margin: 0;
    color: #8f9497;
    font-size: 16px;
    line-height: 1.9;
}

.building-scroll-area {
    position: relative;
    height: 500vh;
}

.building-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(244,121,29,.105), transparent 27%),
        radial-gradient(circle at 20% 60%, rgba(255,255,255,.025), transparent 25%),
        #111;
}

.building-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.building-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.building-info {
    position: absolute;
    z-index: 5;
    left: 7vw;
    top: 50%;
    width: min(320px, 28vw);
    transform: translateY(-50%);
    pointer-events: none;
}

.building-progress {
    color: var(--orange);
    margin-bottom: 15px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.building-stage {
    margin-bottom: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.building-info p {
    margin: 0;
    color: #8e9497;
    font-size: 14px;
    line-height: 1.75;
}

.building-dots {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 7vw;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(-50%);
}

.building-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b4043;
    transition: .35s ease;
}

.building-dot.active {
    background: var(--orange);
    transform: scale(1.7);
    box-shadow: 0 0 16px rgba(244,121,29,.45);
}

.building-scroll-hint {
    position: absolute;
    z-index: 5;
    right: 7vw;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #747a7d;
    font-size: 9px;
    letter-spacing: 2px;
}

.building-scroll-hint i {
    color: var(--orange);
    animation: aboutArrowFloat 1.7s ease-in-out infinite;
}

.building-complete {
    position: absolute;
    z-index: 6;
    top: 12%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity .5s ease, transform .5s ease;
}

.building-complete.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes aboutArrowFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* =========================================================
   3D IT / DIGITAL ECOSYSTEM EXPERIENCE
========================================================= */

.it3d-section {
    background: var(--dark);
    color: #fff;
    overflow: clip;
    border-top: 1px solid #191d20;
}

.it3d-intro {
    padding: 145px 0 85px;
}

.it3d-intro h2 {
    max-width: 980px;
    margin: 20px 0 28px;
    font-size: clamp(46px, 6vw, 84px);
    line-height: .98;
    letter-spacing: -2px;
}

.it3d-intro h2 em {
    display: block;
    font-weight: 500;
}

.it3d-intro p {
    max-width: 680px;
    margin: 0;
    color: var(--muted-dark);
    font-size: 17px;
    line-height: 1.9;
}

.it3d-scroll-area {
    position: relative;
    height: 500vh;
}

.it3d-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(244,121,29,.11), transparent 28%),
        radial-gradient(circle at 78% 55%, rgba(78,145,168,.08), transparent 25%),
        #0b0d0f;
}

.it3d-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.it3d-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.it3d-grid-glow {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -42vh;
    width: min(90vw, 1000px);
    height: 75vh;
    transform: translateX(-50%) perspective(500px) rotateX(64deg);
    transform-origin: center bottom;
    background-image:
        linear-gradient(rgba(244,121,29,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244,121,29,.055) 1px, transparent 1px);
    background-size: 55px 55px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
    pointer-events: none;
}

.it3d-info {
    position: absolute;
    z-index: 5;
    left: 7vw;
    top: 50%;
    width: min(310px, 27vw);
    transform: translateY(-50%);
    pointer-events: none;
}

.it3d-progress {
    margin-bottom: 15px;
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.it3d-stage {
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.it3d-info p {
    margin: 0;
    color: var(--muted-dark);
    font-size: 14px;
    line-height: 1.75;
}

.it3d-dots {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 7vw;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(-50%);
}

.it3d-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3c4144;
    transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.it3d-dot.active {
    background: var(--orange);
    transform: scale(1.7);
    box-shadow: 0 0 16px rgba(244,121,29,.45);
}

.it3d-legend {
    position: absolute;
    z-index: 5;
    right: 7vw;
    bottom: 42px;
    display: flex;
    align-items: center;
    gap: 22px;
    color: #71777b;
    font-size: 9px;
    letter-spacing: 2px;
}

.it3d-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
}

.it3d-legend i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 12px rgba(244,121,29,.8);
}

.it3d-complete {
    position: absolute;
    z-index: 6;
    top: 12%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity .5s ease, transform .5s ease;
}

.it3d-complete.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.it3d-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    padding: 90px 0 145px;
    background: var(--dark);
}

.it3d-service-card {
    position: relative;
    min-height: 270px;
    padding: 35px 28px;
    border-top: 1px solid var(--line-dark);
    background: var(--dark);
    transition: background .35s ease, transform .35s ease;
}

.it3d-service-card:hover {
    background: #121619;
    transform: translateY(-6px);
}

.it3d-service-card > span {
    color: var(--orange);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
}

.it3d-service-card > i {
    display: block;
    margin: 55px 0 22px;
    color: var(--orange);
    font-size: 23px;
}

.it3d-service-card h3 {
    margin: 0 0 12px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 27px;
    font-weight: 500;
}

.it3d-service-card p {
    max-width: 250px;
    margin: 0;
    color: #777e82;
    font-size: 13px;
    line-height: 1.8;
}

/* =========================================================
   DISCIPLINES
========================================================= */

.disciplines-section {
    padding: 145px 0 155px;
    background: #f6f5f2;
}

.discipline-heading {
    margin-bottom: 60px;
}

.discipline-heading h2 {
    max-width: 850px;
    margin: 20px 0 0;
    color: #151515;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -3px;
}

.discipline-heading h2 em {
    display: block;
}

.discipline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #dcdad5;
}

.discipline-card {
    position: relative;
    min-height: 520px;
    padding: 44px 45px 50px;
    background: #fff;
    overflow: hidden;
}

.discipline-card::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(244,121,29,.15);
    border-radius: 50%;
    transition: transform .5s ease;
}

.discipline-card:hover::after {
    transform: scale(1.25);
}

.discipline-card.featured {
    background: #111;
    color: #fff;
}

.discipline-number {
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.discipline-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 75px 0 28px;
    border: 1px solid rgba(244,121,29,.35);
    color: var(--orange);
    font-size: 21px;
}

.discipline-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 17px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(31px, 3vw, 44px);
    font-weight: 500;
    line-height: 1.05;
}

.discipline-card p {
    position: relative;
    z-index: 2;
    max-width: 510px;
    margin: 0 0 27px;
    color: #717577;
    font-size: 14px;
    line-height: 1.85;
}

.discipline-card.featured p {
    color: #8d9396;
}

.discipline-card ul {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.discipline-card li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #323537;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
}

.discipline-card.featured li {
    color: #d0d3d4;
}

.discipline-card li i {
    color: var(--orange);
    font-size: 10px;
}

/* =========================================================
   VALUES
========================================================= */

.values-section {
    padding: 145px 0 155px;
    background: #fff;
}

.values-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .5fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 65px;
}

.values-header h2 {
    margin: 20px 0 0;
    font-size: clamp(45px, 5.5vw, 76px);
    line-height: 1;
    letter-spacing: -2.5px;
}

.values-header h2 em {
    display: inline-block;
}

.values-header > p {
    max-width: 350px;
    margin: 0 0 8px;
    color: #737779;
    font-size: 14px;
    line-height: 1.8;
}

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

.value-item {
    min-height: 270px;
    padding: 30px 28px 35px 0;
    border-right: 1px solid var(--line);
}

.value-item:not(:first-child) {
    padding-left: 28px;
}

.value-item:last-child {
    border-right: 0;
}

.value-item > span {
    color: var(--orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.value-item h3 {
    margin: 65px 0 13px;
    color: #1b1b1b;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 28px;
    font-weight: 500;
}

.value-item p {
    max-width: 230px;
    margin: 0;
    color: #777b7d;
    font-size: 13px;
    line-height: 1.8;
}

/* =========================================================
   FINAL CTA
========================================================= */

.about-final-cta {
    padding: 0 0 0;
    background: #f2f0eb;
}

.about-cta-inner {
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 70px 0;
    border-top: 1px solid #dcd9d3;
}

.about-cta-inner h2 {
    max-width: 850px;
    margin: 20px 0 0;
    color: #151515;
    font-size: clamp(45px, 5.7vw, 78px);
    line-height: .98;
    letter-spacing: -2.5px;
}

.about-cta-inner h2 em {
    display: block;
}

/* =========================================================
   REVEAL ANIMATION SUPPORT
========================================================= */

.reveal-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.2,1);
}

.reveal-item.revealed,
.reveal-item.is-visible,
.reveal-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
    .about-hero-inner,
    .story-grid {
        gap: 55px;
    }

    .about-hero h1 {
        font-size: clamp(55px, 8vw, 88px);
    }

    .story-grid {
        grid-template-columns: minmax(0, 1fr) minmax(270px, .8fr);
    }

    .discipline-card {
        padding: 40px 35px 45px;
    }

    .values-header {
        gap: 45px;
    }

    .value-item {
        padding-right: 20px;
    }

    .value-item:not(:first-child) {
        padding-left: 20px;
    }

    .it3d-intro,
    .building-intro {
        padding-left: 25px;
        padding-right: 25px;
    }

    .it3d-info,
    .building-info {
        left: 25px;
        width: 260px;
    }

    .it3d-dots,
    .it3d-legend,
    .building-dots,
    .building-scroll-hint {
        right: 25px;
    }

    .it3d-services {
        padding-left: 25px;
        padding-right: 25px;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 800px) {
    .about-hero {
        min-height: auto;
    }

    .about-hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 55px;
        padding-top: 125px;
        padding-bottom: 85px;
    }

    .about-hero h1 {
        margin-top: 18px;
        font-size: clamp(48px, 12vw, 76px);
        letter-spacing: -2.5px;
    }

    .about-hero-content > p {
        font-size: 15px;
    }

    .about-hero-side {
        justify-self: start;
        width: auto;
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        align-items: center;
        gap: 10px;
    }

    .about-hero-side strong {
        font-size: 25px;
    }

    .about-story,
    .disciplines-section,
    .values-section {
        padding-top: 100px;
        padding-bottom: 105px;
    }

    .story-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .story-copy h2,
    .values-header h2 {
        font-size: clamp(43px, 11vw, 65px);
    }

    .discipline-heading h2 {
        font-size: clamp(43px, 11vw, 68px);
    }

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

    .discipline-card {
        min-height: auto;
    }

    .values-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 45px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .value-item:nth-child(2) {
        border-right: 0;
    }

    .value-item:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .value-item h3 {
        margin-top: 45px;
    }

    .about-cta-inner {
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 60px 0 70px;
    }

    .about-cta-inner h2 {
        font-size: clamp(43px, 11vw, 66px);
    }

    .building-scroll-area,
    .it3d-scroll-area {
        height: 430vh;
    }

    .building-sticky,
    .it3d-sticky {
        min-height: 600px;
    }

    .building-info,
    .it3d-info {
        left: 22px;
        top: auto;
        bottom: 72px;
        width: min(230px, calc(100vw - 95px));
        transform: none;
    }

    .building-progress,
    .it3d-progress {
        font-size: 9px;
    }

    .building-stage,
    .it3d-stage {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .building-info p,
    .it3d-info p {
        font-size: 12px;
        line-height: 1.65;
    }

    .building-dots,
    .it3d-dots {
        top: 50%;
        right: 22px;
        gap: 12px;
    }

    .building-scroll-hint,
    .it3d-legend {
        left: 22px;
        right: auto;
        bottom: 25px;
    }

    .it3d-legend small {
        display: none;
    }

    .building-complete,
    .it3d-complete {
        top: 10%;
        font-size: 8px;
    }

    .building-intro,
    .it3d-intro {
        padding-top: 90px;
        padding-bottom: 60px;
    }

    .building-intro h2,
    .it3d-intro h2 {
        font-size: clamp(42px, 12vw, 62px);
        letter-spacing: -1.5px;
    }

    .building-intro p,
    .it3d-intro p {
        font-size: 15px;
        line-height: 1.8;
    }

    .it3d-services {
        grid-template-columns: 1fr;
        padding: 60px 25px 90px;
    }

    .it3d-service-card {
        min-height: auto;
        padding: 30px 5px;
    }

    .it3d-service-card > i {
        margin-top: 35px;
    }

    .it3d-grid-glow {
        width: 130vw;
        bottom: -32vh;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 500px) {
    .about-hero-inner {
        padding-top: 105px;
        padding-bottom: 70px;
    }

    .about-hero h1 {
        font-size: clamp(43px, 13vw, 61px);
        letter-spacing: -2px;
    }

    .about-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .about-hero-side {
        font-size: 8px;
        letter-spacing: 2px;
        gap: 7px;
    }

    .about-hero-side strong {
        font-size: 21px;
    }

    .story-number {
        grid-template-columns: 50px 1fr;
        column-gap: 12px;
    }

    .discipline-card {
        padding: 32px 25px 38px;
    }

    .discipline-icon {
        margin-top: 55px;
    }

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

    .value-item,
    .value-item:not(:first-child) {
        min-height: auto;
        padding: 28px 0;
        border-right: 0;
        border-top: 1px solid var(--line);
    }

    .value-item:first-child {
        border-top: 0;
    }

    .value-item h3 {
        margin-top: 35px;
    }

    .building-scroll-area,
    .it3d-scroll-area {
        height: 400vh;
    }

    .building-info,
    .it3d-info {
        left: 18px;
        bottom: 68px;
        width: 195px;
    }

    .building-dots,
    .it3d-dots {
        right: 17px;
    }

    .building-scroll-hint,
    .it3d-legend {
        left: 18px;
        bottom: 23px;
    }

    .building-scroll-hint {
        font-size: 8px;
    }

    .building-complete,
    .it3d-complete {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .it3d-intro,
    .building-intro {
        padding-left: 18px;
        padding-right: 18px;
    }

    .it3d-services {
        padding-left: 18px;
        padding-right: 18px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal-item,
    .building-dot,
    .it3d-dot,
    .it3d-service-card,
    .building-complete,
    .it3d-complete,
    .building-scroll-hint i {
        transition: none !important;
        animation: none !important;
    }

    .reveal-item {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   INDEX-MATCHED THEME + INTERACTION LAYER
   Keeps the original About structure and 3D experiences intact.
========================================================= */

:root {
    color-scheme: light dark;
    --orange: #f6a91b;
    --orange-2: #f4791d;
    --orange-soft: rgba(246,169,27,.12);
    --navy: #0b1f3a;
    --navy-2: #12325a;
    --navy-3: #183f6d;
    --blue: #3f82d1;
    --blue-soft: #eaf3fd;
    --purple: #7357d9;
    --purple-soft: #f0edff;
    --green: #3f9b72;
    --green-soft: #eaf7f0;
    --cream: #fff9ee;
    --ink: #10233d;
    --dark: #08182b;
    --dark-2: #0d2342;
    --dark-3: #14345d;
    --white: #ffffff;
    --off-white: #f6f8fb;
    --muted: #6f8093;
    --muted-dark: #9eb0c3;
    --line: rgba(13,35,66,.10);
    --line-dark: rgba(255,255,255,.09);
    --about-surface: #ffffff;
    --about-surface-soft: #f3f6fa;
    --about-text: #10233d;
    --about-text-soft: #586d84;
    --about-shadow: 0 18px 55px rgba(13,35,66,.09);
    --about-shadow-hover: 0 35px 90px rgba(13,35,66,.16);
}

body {
    color: var(--about-text);
    background: var(--off-white);
}

/* HERO */
.about-hero {
    color: #fff;
    background:
        radial-gradient(circle at 84% 34%, rgba(246,169,27,.18), transparent 28%),
        radial-gradient(circle at 18% 86%, rgba(63,130,209,.18), transparent 30%),
        radial-gradient(circle at 55% 15%, rgba(115,87,217,.09), transparent 24%),
        linear-gradient(135deg, #08182b 0%, #0d2747 58%, #12345b 100%);
}

.about-hero::before {
    border-color: rgba(246,169,27,.22);
    box-shadow: 0 0 80px rgba(246,169,27,.06);
}

.about-hero::after {
    border-color: rgba(255,255,255,.06);
}

.about-hero h1 { color: #fff; }
.about-hero-content > p { color: #b5c5d7; }
.about-hero-side { color: #d8e2ed; }
.about-hero-side strong { color: var(--orange); }

.about-hero-side span {
    position: relative;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    transition: transform .35s ease, background .35s ease, border-color .35s ease, color .35s ease;
}

.about-hero-side span:hover {
    transform: translateX(8px);
    color: var(--orange);
    border-color: rgba(246,169,27,.28);
    background: rgba(246,169,27,.08);
}

/* STORY */
.about-story {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(115,87,217,.055), transparent 25%),
        var(--about-surface);
}

.about-story::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -250px;
    bottom: -250px;
    border-radius: 50%;
    background: rgba(63,155,114,.055);
    pointer-events: none;
}

.story-copy h2,
.discipline-heading h2,
.values-header h2,
.about-cta-inner h2 { color: var(--about-text); }
.story-copy p,
.story-number p,
.values-header > p,
.value-item p { color: var(--about-text-soft); }
.story-signature { border-color: var(--line); }
.story-signature span { color: var(--about-text); }
.story-numbers { border-color: var(--line); }

.story-number {
    --story-accent: var(--orange);
    position: relative;
    overflow: hidden;
    padding-left: 0;
    transition: padding-left .35s ease, background .35s ease, transform .35s ease;
}
.story-number:nth-child(2) { --story-accent: var(--purple); }
.story-number:nth-child(3) { --story-accent: var(--blue); }
.story-number::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--story-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .35s ease;
}
.story-number:hover {
    padding-left: 18px;
    background: color-mix(in srgb, var(--story-accent) 6%, transparent);
}
.story-number:hover::before { transform: scaleY(1); }
.story-number strong { color: var(--story-accent); transition: transform .35s ease; }
.story-number:hover strong { transform: translateY(-4px) scale(1.05); }
.story-number span { color: var(--about-text); }

/* 3D SECTIONS */
.building-section,
.it3d-section {
    background: #071526;
}
.building-sticky {
    background:
        radial-gradient(circle at 50% 42%, rgba(246,169,27,.12), transparent 27%),
        radial-gradient(circle at 18% 62%, rgba(63,130,209,.07), transparent 25%),
        #08182b;
}
.it3d-sticky {
    background:
        radial-gradient(circle at 50% 45%, rgba(115,87,217,.12), transparent 28%),
        radial-gradient(circle at 78% 55%, rgba(63,130,209,.10), transparent 25%),
        #071526;
}
.building-progress { color: var(--orange); }
.it3d-progress { color: #9b83ff; }
.it3d-dot.active { background: #9b83ff; box-shadow: 0 0 16px rgba(155,131,255,.55); }
.it3d-legend i { background: #9b83ff; box-shadow: 0 0 14px rgba(155,131,255,.75); }
.it3d-complete { color: #9b83ff; }
.it3d-grid-glow {
    background-image:
        linear-gradient(rgba(115,87,217,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63,130,209,.06) 1px, transparent 1px);
}

.it3d-services { background: #071526; gap: 14px; }
.it3d-service-card {
    --it-accent: var(--orange);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    box-shadow: 0 18px 50px rgba(0,0,0,.16);
    transition: transform .4s cubic-bezier(.22,.61,.36,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.it3d-service-card:nth-child(2) { --it-accent: var(--blue); }
.it3d-service-card:nth-child(3) { --it-accent: var(--green); }
.it3d-service-card:nth-child(4) { --it-accent: #9b83ff; }
.it3d-service-card::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -140px;
    bottom: -140px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--it-accent) 16%, transparent);
    transition: transform .55s ease;
}
.it3d-service-card:hover {
    transform: translateY(-10px) rotate(-.4deg);
    background: rgba(255,255,255,.065);
    border-color: color-mix(in srgb, var(--it-accent) 35%, transparent);
    box-shadow: 0 28px 70px rgba(0,0,0,.25);
}
.it3d-service-card:hover::after { transform: scale(2.6); }
.it3d-service-card > span,
.it3d-service-card > i { color: var(--it-accent); position: relative; z-index: 2; }
.it3d-service-card h3,
.it3d-service-card p { position: relative; z-index: 2; }
.it3d-service-card:hover > i { animation: aboutIconWobble .6s ease; }

/* DISCIPLINES */
.disciplines-section {
    background:
        radial-gradient(circle at 8% 15%, rgba(246,169,27,.06), transparent 25%),
        linear-gradient(135deg, #fff8ed, #f2f5fb 62%, #f5f1ff);
}
.discipline-grid { gap: 18px; background: transparent; }
.discipline-card {
    --discipline-accent: var(--orange-2);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--about-surface);
    box-shadow: var(--about-shadow);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .35s ease;
}
.discipline-card.featured {
    --discipline-accent: #8d78f2;
    background: linear-gradient(145deg, #0c213d, #182951 72%, #241e4a);
}
.discipline-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), color-mix(in srgb, var(--discipline-accent) 18%, transparent), transparent 38%);
    transition: opacity .3s ease;
    pointer-events: none;
}
.discipline-card::after {
    border-color: color-mix(in srgb, var(--discipline-accent) 22%, transparent);
}
.discipline-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--about-shadow-hover);
    border-color: color-mix(in srgb, var(--discipline-accent) 35%, transparent);
}
.discipline-card:hover::before { opacity: 1; }
.discipline-number,
.discipline-icon,
.discipline-card li i { color: var(--discipline-accent); }
.discipline-icon { border-color: color-mix(in srgb, var(--discipline-accent) 35%, transparent); transition: transform .4s ease, background .4s ease; }
.discipline-card:hover .discipline-icon {
    transform: rotate(-7deg) scale(1.08);
    background: color-mix(in srgb, var(--discipline-accent) 9%, transparent);
}
.discipline-card:not(.featured) h3,
.discipline-card:not(.featured) li { color: var(--about-text); }
.discipline-card.featured h3 { color: #fff; }

/* VALUES */
.values-section {
    background:
        radial-gradient(circle at 85% 75%, rgba(63,130,209,.05), transparent 24%),
        var(--about-surface);
}
.values-grid { border-color: var(--line); gap: 0; }
.value-item {
    --value-accent: var(--orange);
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.value-item:nth-child(2) { --value-accent: var(--purple); }
.value-item:nth-child(3) { --value-accent: var(--green); }
.value-item:nth-child(4) { --value-accent: var(--blue); }
.value-item::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -130px;
    bottom: -130px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--value-accent) 12%, transparent);
    transition: transform .5s ease;
}
.value-item:hover {
    transform: translateY(-7px);
    background: color-mix(in srgb, var(--value-accent) 5%, var(--about-surface));
    box-shadow: 0 22px 60px rgba(13,35,66,.08);
}
.value-item:hover::after { transform: scale(2.5); }
.value-item > span { color: var(--value-accent); }
.value-item h3 { color: var(--about-text); position: relative; z-index: 2; }
.value-item p { position: relative; z-index: 2; }

/* CTA */
.about-final-cta {
    background:
        radial-gradient(circle at 90% 20%, rgba(115,87,217,.15), transparent 28%),
        radial-gradient(circle at 5% 100%, rgba(63,155,114,.10), transparent 24%),
        linear-gradient(135deg, #0b1f3a, #173d68);
}
.about-cta-inner { border-color: rgba(255,255,255,.09); }
.about-cta-inner h2 { color: #fff; }
.about-final-cta .eyebrow { color: var(--orange); }
.about-final-cta .btn-dark {
    color: #10233d;
    background: linear-gradient(135deg, #ffc94d, #f6a91b);
}
.about-final-cta .btn-dark:hover { background: #fff; }

/* CURRENT INDEX-LIKE REVEAL */
.reveal-item.visible,
.reveal-item.revealed,
.reveal-item.is-visible,
.reveal-item.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes aboutIconWobble {
    0% { transform: rotate(0); }
    25% { transform: rotate(-9deg) scale(1.08); }
    50% { transform: rotate(8deg) scale(1.12); }
    75% { transform: rotate(-4deg) scale(1.07); }
    100% { transform: rotate(0) scale(1); }
}

@media (prefers-color-scheme: dark) {
    :root {
        --about-surface: #0d213a;
        --about-surface-soft: #142d49;
        --about-text: #f5f8fb;
        --about-text-soft: #b5c4d5;
        --line: rgba(255,255,255,.09);
        --off-white: #071526;
    }
    .about-story,
    .values-section { background: #0d213a; }
    .disciplines-section {
        background: linear-gradient(135deg, #242318, #102944 55%, #181f3c);
    }
    .discipline-card:not(.featured) { background: #142d49; }
    .story-number span,
    .story-signature span,
    .discipline-card:not(.featured) h3,
    .discipline-card:not(.featured) li,
    .value-item h3 { color: #f5f8fb; }
    .story-copy p,
    .story-number p,
    .values-header > p,
    .value-item p,
    .discipline-card:not(.featured) p { color: #b5c4d5; }
    .about-final-cta { background: linear-gradient(135deg, #061426, #102944); }
}

@media (max-width: 800px) {
    .story-number:hover { padding-left: 12px; }
    .discipline-card:hover,
    .value-item:hover,
    .it3d-service-card:hover { transform: translateY(-4px); }
}
/* =========================================================
   FOOTER — MATCH INDEX PAGE
========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;

    padding: 90px 0 0;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(246, 169, 27, .08),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(63, 130, 209, .09),
            transparent 26%
        ),
        #07182b;

    color: #ffffff;
}


/* subtle top line */

.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(246, 169, 27, .6),
            rgba(63, 130, 209, .45),
            transparent
        );
}


/* =========================================================
   MAIN FOOTER GRID
========================================================= */

.footer-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.45fr)
        minmax(150px, .65fr)
        minmax(190px, .75fr)
        minmax(260px, 1fr);

    gap: 70px;

    align-items: start;

    padding-bottom: 75px;
}


/* =========================================================
   BRAND AREA
========================================================= */

.footer-brand {
    max-width: 370px;
}


.footer-logo {
    display: inline-flex;

    align-items: center;

    margin-bottom: 27px;

    text-decoration: none;
}


.footer-logo-image {
    display: block;

    width: 230px;
    max-width: 100%;
    height: auto;

    object-fit: contain;
}


/* if logo has its own dark background remove any filter */
.footer-logo img {
    filter: none;
}


.footer-brand > p {
    max-width: 340px;

    margin: 0;

    color: #93a6ba;

    font-family:
        "Manrope",
        "Poppins",
        sans-serif;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-social {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 27px;
}


.footer-social a {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    color: #ffffff;

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

    text-decoration: none;

    font-size: 13px;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


.footer-social a:hover {
    transform:
        translateY(-4px);

    color: #10233d;

    background:
        #f6a91b;

    border-color:
        #f6a91b;
}


/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-col,
.footer-news {
    min-width: 0;
}


.footer-col h4,
.footer-news h4 {
    margin:
        0
        0
        24px;

    color: #ffffff;

    font-family:
        "Manrope",
        "Poppins",
        sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    line-height: 1.3;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-col {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-col a {
    position: relative;

    display: inline-block;

    margin-bottom: 13px;

    color: #93a6ba;

    font-family:
        "Manrope",
        "Poppins",
        sans-serif;

    font-size: 13px;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.footer-col a::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0;
    height: 1px;

    background:
        #f6a91b;

    transition:
        width .3s ease;
}


.footer-col a:hover {
    color: #ffffff;

    transform:
        translateX(4px);
}


.footer-col a:hover::before {
    width: 100%;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.footer-news > p {
    max-width: 290px;

    margin:
        0
        0
        24px;

    color: #93a6ba;

    font-family:
        "Manrope",
        "Poppins",
        sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


.newsletter-form {
    width: 100%;
    max-width: 320px;

    height: 50px;

    display: flex;

    align-items: stretch;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 10px;

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

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.newsletter-form:focus-within {
    border-color:
        rgba(246, 169, 27, .65);

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

    box-shadow:
        0
        0
        0
        3px
        rgba(246, 169, 27, .08);
}


.newsletter-form input {
    flex: 1;

    min-width: 0;

    padding:
        0
        17px;

    border: 0;
    outline: 0;

    background:
        transparent;

    color: #ffffff;

    font-family:
        "Manrope",
        "Poppins",
        sans-serif;

    font-size: 13px;
}


.newsletter-form input::placeholder {
    color: #71869c;
}


.newsletter-form button {
    flex:
        0
        0
        50px;

    width: 50px;

    display: grid;

    place-items: center;

    border: 0;

    background:
        linear-gradient(
            135deg,
            #ffc94d,
            #f6a91b
        );

    color: #0b1f3a;

    cursor: pointer;

    font-size: 13px;

    transition:
        background .3s ease,
        transform .3s ease;
}


.newsletter-form button:hover {
    background:
        #ffffff;
}


.newsletter-form button:hover i {
    transform:
        translateX(3px);
}


.newsletter-form button i {
    transition:
        transform .25s ease;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    position: relative;

    z-index: 2;

    border-top:
        1px solid
        rgba(255, 255, 255, .08);
}


.footer-bottom-inner {
    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.footer-bottom p {
    margin: 0;

    color: #667d94;

    font-family:
        "Manrope",
        "Poppins",
        sans-serif;

    font-size: 11px;

    line-height: 1.5;
}


.footer-legal {
    display: flex;

    align-items: center;

    gap: 25px;
}


.footer-legal a {
    color: #667d94;

    font-family:
        "Manrope",
        "Poppins",
        sans-serif;

    font-size: 11px;

    text-decoration: none;

    transition:
        color .25s ease;
}


.footer-legal a:hover {
    color: #ffffff;
}


/* =========================================================
   TABLET FOOTER
========================================================= */

@media (max-width: 1100px) {

    .footer-inner {
        grid-template-columns:
            minmax(260px, 1.3fr)
            repeat(2, minmax(150px, .7fr));

        gap:
            55px
            45px;
    }


    .footer-news {
        grid-column:
            1 / -1;

        max-width: 420px;
    }

}


/* =========================================================
   MOBILE FOOTER
========================================================= */

@media (max-width: 760px) {

    .site-footer {
        padding-top: 65px;
    }


    .footer-inner {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            50px
            30px;

        padding-bottom: 55px;
    }


    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 420px;
    }


    .footer-news {
        grid-column:
            1 / -1;
    }


    .footer-logo-image {
        width: 205px;
    }


    .footer-bottom-inner {
        min-height: auto;

        padding:
            25px
            0;

        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE FOOTER
========================================================= */

@media (max-width: 500px) {

    .site-footer {
        padding-top: 55px;
    }


    .footer-inner {
        grid-template-columns:
            1fr;

        gap: 42px;
    }


    .footer-brand,
    .footer-news {
        grid-column: auto;
    }


    .footer-logo-image {
        width: 185px;
    }


    .footer-social {
        margin-top: 22px;
    }


    .footer-col h4,
    .footer-news h4 {
        margin-bottom: 18px;
    }


    .newsletter-form {
        max-width: 100%;
    }


    .footer-legal {
        gap: 18px;

        flex-wrap: wrap;
    }

}
/* =========================================================
   2026 ABOUT HERO FIX + SURREAL DNA + OUR PROCESS
   FINAL OVERRIDE — CURRENT INDEX THEME
========================================================= */

/* ---------- Hero clipping/layout fix ---------- */
.about-hero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 145px 0 95px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 28%, rgba(246,169,27,.14), transparent 27%),
        radial-gradient(circle at 12% 88%, rgba(63,130,209,.12), transparent 30%),
        radial-gradient(circle at 58% 12%, rgba(115,87,217,.08), transparent 24%),
        linear-gradient(135deg, #071526 0%, #0b2544 58%, #12345b 100%);
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    right: auto;
    top: auto;
    border: 0;
    border-radius: 0;
    opacity: .11;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 20%, transparent 98%);
    box-shadow: none;
}

.about-hero::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    right: -275px;
    top: 4%;
    border: 1px solid rgba(246,169,27,.13);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: none;
}

.about-hero-inner {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 48px), 1280px);
    max-width: 1280px;
    min-height: auto;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: clamp(55px, 7vw, 100px);
    align-items: center;
}

.about-hero-content,
.about-hero-visual {
    min-width: 0;
}

.about-hero-content {
    max-width: 790px;
}

.about-hero .eyebrow {
    color: var(--orange);
}

.about-hero h1 {
    max-width: 850px;
    margin: 18px 0 27px;
    color: #fff;
    font-size: clamp(62px, 7vw, 102px);
    line-height: .94;
    font-weight: 500;
    letter-spacing: -4px;
}

.about-hero h1 em {
    display: block;
    color: var(--orange);
}

.about-hero-content > p {
    max-width: 700px;
    margin: 0;
    color: #b7c7d8;
    font-size: 15px;
    line-height: 1.9;
}

.about-hero-actions {
    margin-top: 35px;
}

/* hide the older Technology + Engineering = Reality treatment if it is still in the HTML */
.about-hero-side {
    display: none !important;
}


/* =========================================================
   ABOUT HERO — SURREAL DNA VISUAL
========================================================= */

.about-hero-visual {
    position: relative;
    width: 100%;
    max-width: 580px;
    min-height: 540px;
    justify-self: end;
    isolation: isolate;
}

.about-dna-grid {
    position: absolute;
    inset: 30px 0 20px 30px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 30px;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        rgba(10,34,59,.42);
    background-size: 40px 40px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.about-dna-grid::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -120px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246,169,27,.12), transparent 68%);
}

.about-dna-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(246,169,27,.72), rgba(63,130,209,.35), transparent);
}

.line-one { width: 250px; left: 130px; top: 160px; transform: rotate(20deg); }
.line-two { width: 250px; left: 140px; top: 320px; transform: rotate(-15deg); }
.line-three { width: 210px; left: 260px; top: 245px; }

.dna-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 185px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(10,32,56,.82);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.dna-card:hover {
    transform: translateY(-6px);
    background: rgba(14,43,74,.95);
    box-shadow: 0 26px 65px rgba(0,0,0,.25);
}

.dna-card-civil { left: 0; top: 85px; }
.dna-card-digital { left: 55px; bottom: 65px; }
.dna-card-design { right: 0; top: 170px; }

.dna-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 12px;
    color: #10233d;
    background: var(--orange);
}

.dna-card-digital .dna-icon {
    color: #fff;
    background: var(--blue);
}

.dna-card-design .dna-icon {
    color: #fff;
    background: var(--purple);
}

.dna-card small {
    display: block;
    margin-bottom: 3px;
    color: #738ca4;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.dna-card strong {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 500;
}

.dna-result {
    position: absolute;
    z-index: 4;
    right: 35px;
    bottom: 30px;
    width: 245px;
    padding: 24px;
    border: 1px solid rgba(246,169,27,.25);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(246,169,27,.10), transparent 42%),
        rgba(8,29,51,.94);
    box-shadow: 0 28px 70px rgba(0,0,0,.25);
}

.dna-result span {
    color: var(--orange);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.dna-result strong {
    display: block;
    margin-top: 9px;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.05;
}

.dna-result i {
    margin-top: 18px;
    color: var(--orange);
}

.dna-node {
    position: absolute;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 13px rgba(246,169,27,.8);
    transition: transform .18s ease-out;
}

.node-one { left: 240px; top: 150px; }
.node-two { left: 290px; top: 300px; background: var(--blue); box-shadow: 0 0 13px rgba(63,130,209,.8); }
.node-three { right: 115px; top: 275px; background: var(--purple); box-shadow: 0 0 13px rgba(115,87,217,.8); }
.node-four { left: 170px; bottom: 140px; background: var(--green); box-shadow: 0 0 13px rgba(63,155,114,.8); }


/* =========================================================
   ABOUT — OUR PROCESS
========================================================= */

.about-process-section {
    position: relative;
    overflow: hidden;
    padding: 145px 0 155px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(115,87,217,.15), transparent 27%),
        radial-gradient(circle at 7% 92%, rgba(63,130,209,.12), transparent 25%),
        #07182b;
    --process-x: 50%;
    --process-y: 50%;
}

.about-process-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .075;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.about-process-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(470px circle at var(--process-x) var(--process-y), rgba(63,130,209,.11), rgba(115,87,217,.045) 38%, transparent 72%);
}

.about-process-inner {
    position: relative;
    z-index: 3;
}

.about-process-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(300px,.52fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 70px;
}

.about-process-section .eyebrow {
    color: var(--orange);
}

.about-process-header h2 {
    max-width: 850px;
    margin: 20px 0 0;
    color: #fff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -3px;
}

.about-process-header h2 em {
    color: var(--orange);
    font-style: italic;
}

.about-process-header > p {
    max-width: 420px;
    margin: 0 0 7px;
    color: #9db0c4;
    font-size: 14px;
    line-height: 1.85;
}

.about-process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background: rgba(255,255,255,.08);
}

.about-process-step {
    --process-accent: var(--orange);
    position: relative;
    min-height: 315px;
    overflow: hidden;
    padding: 30px 25px 32px;
    background: rgba(10,32,56,.94);
    transition: background .35s ease, transform .35s ease;
}

.about-process-step:nth-child(2) { --process-accent: var(--blue); }
.about-process-step:nth-child(3) { --process-accent: var(--purple); }
.about-process-step:nth-child(4) { --process-accent: var(--green); }
.about-process-step:nth-child(5) { --process-accent: var(--orange-2); }

.about-process-step::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--process-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.about-process-step::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -110px;
    top: -110px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--process-accent) 15%, transparent);
    transition: transform .5s ease;
}

.about-process-step:hover {
    background: rgba(15,43,75,.98);
    transform: translateY(-5px);
}

.about-process-step:hover::before {
    transform: scaleX(1);
}

.about-process-step:hover::after {
    transform: scale(2.5);
}

.about-process-label {
    position: relative;
    z-index: 2;
    color: var(--process-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.about-process-icon {
    position: relative;
    z-index: 2;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin: 55px 0 22px;
    border: 1px solid color-mix(in srgb, var(--process-accent) 32%, transparent);
    border-radius: 13px;
    color: var(--process-accent);
    background: color-mix(in srgb, var(--process-accent) 8%, transparent);
    transition: transform .35s ease, background .35s ease;
}

.about-process-step:hover .about-process-icon {
    transform: translateY(-5px) rotate(-6deg) scale(1.07);
    background: color-mix(in srgb, var(--process-accent) 13%, transparent);
}

.about-process-step h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #fff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 23px;
    font-weight: 500;
}

.about-process-step p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #8da2b7;
    font-size: 11px;
    line-height: 1.75;
}

.about-process-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 34px;
    padding-top: 27px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.about-process-footer p {
    max-width: 620px;
    margin: 0;
    color: #8298ad;
    font-size: 11px;
    line-height: 1.75;
}

.about-process-footer .process-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b9c7d5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    white-space: nowrap;
}

.about-process-footer .process-note i {
    color: var(--orange);
}


/* =========================================================
   RESPONSIVE — FINAL ABOUT OVERRIDES
========================================================= */

@media (max-width: 1100px) {
    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .about-hero-content {
        max-width: 850px;
    }

    .about-hero-visual {
        width: min(100%, 620px);
        justify-self: start;
    }

    .about-process-track {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .about-process-step:nth-child(4),
    .about-process-step:nth-child(5) {
        min-height: 285px;
    }
}

@media (max-width: 800px) {
    .about-hero {
        min-height: auto;
        padding: 125px 0 80px;
    }

    .about-hero-inner {
        width: calc(100% - 34px);
        min-height: auto;
        padding: 0;
        gap: 45px;
    }

    .about-hero h1 {
        font-size: clamp(50px, 13vw, 74px);
        letter-spacing: -2.5px;
    }

    .about-hero-content > p {
        font-size: 14px;
    }

    .about-hero-visual {
        min-height: 455px;
        max-width: 520px;
        margin: 0 auto;
        justify-self: center;
    }

    .dna-card {
        min-width: 155px;
        padding: 11px 12px;
    }

    .dna-card-civil { left: 0; }
    .dna-card-digital { left: 15px; bottom: 70px; }
    .dna-card-design { right: 0; }

    .dna-result {
        right: 10px;
        width: 205px;
    }

    .about-process-section {
        padding: 100px 0 105px;
    }

    .about-process-header {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 45px;
    }

    .about-process-header h2 {
        font-size: clamp(43px, 11vw, 68px);
        letter-spacing: -2px;
    }

    .about-process-track {
        grid-template-columns: 1fr;
    }

    .about-process-step,
    .about-process-step:nth-child(4),
    .about-process-step:nth-child(5) {
        min-height: auto;
        padding: 27px 24px 30px;
    }

    .about-process-icon {
        margin: 34px 0 19px;
    }

    .about-process-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 500px) {
    .about-hero {
        padding: 110px 0 65px;
    }

    .about-hero-inner {
        width: calc(100% - 30px);
    }

    .about-hero h1 {
        font-size: clamp(45px, 13.2vw, 62px);
        letter-spacing: -2px;
    }

    .about-hero-visual {
        min-height: 420px;
    }

    .about-dna-grid {
        inset: 20px 0 15px 0;
    }

    .dna-card {
        min-width: 138px;
    }

    .dna-card strong {
        font-size: 14px;
    }

    .dna-card-civil { top: 62px; }
    .dna-card-design { top: 155px; }
    .dna-card-digital { left: 4px; bottom: 42px; }

    .dna-result {
        right: 3px;
        bottom: 25px;
        width: 188px;
        padding: 20px;
    }

    .dna-result strong {
        font-size: 20px;
    }

    .line-one,
    .line-two,
    .line-three,
    .node-one,
    .node-two,
    .node-three,
    .node-four {
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dna-card,
    .dna-node,
    .about-process-step,
    .about-process-icon {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   FINAL ABOUT HERO — EDITORIAL RIGHT SIDE
========================================================= */

.about-hero-inner {
    width: min(calc(100% - 48px), 1280px) !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr) !important;
    gap: clamp(54px, 6vw, 96px) !important;
}

.about-hero-content,
.about-hero-side { min-width: 0; }

.about-hero-side {
    position: relative;
    width: 100% !important;
    max-width: 570px !important;
    min-height: 560px;
    justify-self: end !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 54px 0 32px 58px;
    color: #fff !important;
    letter-spacing: normal !important;
    font-size: inherit !important;
    line-height: normal !important;
    isolation: isolate;
}

.about-hero-side::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7%;
    bottom: 7%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.12) 18%, rgba(246,169,27,.42) 50%, rgba(255,255,255,.10) 82%, transparent);
}

.about-hero-side::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 430px;
    height: 430px;
    right: -90px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63,130,209,.13), rgba(115,87,217,.055) 38%, rgba(246,169,27,.025) 56%, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
}

.about-hero-statement {
    position: relative;
    z-index: 2;
    max-width: 510px;
}

.statement-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--orange, #f6a91b);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.8px;
}

.statement-label::before {
    content: "";
    width: 27px;
    height: 1px;
    background: var(--orange, #f6a91b);
}

.about-hero-statement blockquote {
    margin: 0;
    color: #fff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 3vw, 47px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -1.45px;
}

.about-hero-statement blockquote em {
    display: inline;
    color: var(--orange, #f6a91b);
    font-style: italic;
    font-weight: 400;
}

.about-hero-statement blockquote strong {
    position: relative;
    display: inline-block;
    color: #fff;
    font-weight: 500;
}

.about-hero-statement blockquote strong::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 2px;
    transform: scaleX(.38);
    transform-origin: left;
    background: linear-gradient(90deg, var(--orange, #f6a91b), transparent);
    transition: transform .45s ease;
}

.about-hero-side:hover .about-hero-statement blockquote strong::after { transform: scaleX(1); }

.about-hero-statement > p {
    max-width: 445px;
    margin: 24px 0 0;
    color: rgba(210,224,238,.70);
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.85;
}

.about-hero-statement > p span {
    color: #fff;
    font-weight: 600;
}

.about-hero-disciplines {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 39px;
}

.hero-discipline {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    background:
        radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.10), transparent 42%),
        rgba(255,255,255,.038);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.hero-discipline:hover,
.hero-discipline:focus-visible {
    transform: translateY(-5px);
    outline: none;
}

.hero-discipline-civil:hover,
.hero-discipline-civil:focus-visible {
    border-color: rgba(246,169,27,.40);
    box-shadow: 0 18px 44px rgba(246,169,27,.08);
}

.hero-discipline-tech:hover,
.hero-discipline-tech:focus-visible {
    border-color: rgba(63,130,209,.45);
    box-shadow: 0 18px 44px rgba(63,130,209,.09);
}

.hero-discipline-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 15px;
}

.hero-discipline-civil .hero-discipline-icon {
    color: #10233d;
    background: var(--orange, #f6a91b);
}

.hero-discipline-tech .hero-discipline-icon {
    color: #fff;
    background: var(--blue, #3f82d1);
}

.hero-discipline small {
    display: block;
    margin-bottom: 4px;
    color: rgba(183,199,216,.56);
    font-family: "Poppins", sans-serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.35px;
}

.hero-discipline strong {
    display: block;
    overflow: hidden;
    color: #fff !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discipline-arrow {
    color: rgba(255,255,255,.30);
    font-size: 10px;
    transform: translateX(-3px);
    transition: color .3s ease, transform .3s ease;
}

.hero-discipline:hover .discipline-arrow,
.hero-discipline:focus-visible .discipline-arrow { transform: translateX(2px); }

.hero-discipline-civil:hover .discipline-arrow,
.hero-discipline-civil:focus-visible .discipline-arrow { color: var(--orange, #f6a91b); }

.hero-discipline-tech:hover .discipline-arrow,
.hero-discipline-tech:focus-visible .discipline-arrow { color: #63a8ef; }

.about-hero-philosophy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.philosophy-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.10);
}

.philosophy-text {
    color: rgba(255,255,255,.52);
    font-family: "Poppins", sans-serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.7px;
    transition: color .3s ease;
}

.about-hero-philosophy i {
    color: var(--orange, #f6a91b);
    font-size: 8px;
    opacity: .62;
    transition: transform .35s ease, opacity .35s ease;
}

.about-hero-side:hover .about-hero-philosophy i {
    transform: translateX(4px);
    opacity: 1;
}

.about-hero-side:hover .philosophy-text { color: rgba(255,255,255,.88); }

.about-floating-node {
    position: absolute;
    z-index: 1;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    background: var(--orange, #f6a91b);
    box-shadow: 0 0 18px rgba(246,169,27,.7);
    will-change: transform;
}

.about-floating-node::after {
    content: "";
    position: absolute;
    width: 31px;
    height: 31px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(246,169,27,.14);
    border-radius: 50%;
}

.node-a { right: 8%; top: 12%; }
.node-b {
    right: 1%;
    bottom: 22%;
    background: var(--blue, #3f82d1);
    box-shadow: 0 0 18px rgba(63,130,209,.72);
}
.node-b::after { border-color: rgba(63,130,209,.17); }

.node-c {
    left: 7%;
    bottom: 7%;
    background: var(--purple, #7357d9);
    box-shadow: 0 0 18px rgba(115,87,217,.7);
}
.node-c::after { border-color: rgba(115,87,217,.17); }

.about-process-section {
    --process-x: 50%;
    --process-y: 50%;
}

.about-process-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--process-x) var(--process-y), rgba(63,130,209,.10), transparent 65%);
    opacity: .9;
}

@media (max-width: 1100px) {
    .about-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr) !important;
        gap: 48px !important;
    }
    .about-hero-side { padding-left: 42px; }
}

@media (max-width: 900px) {
    .about-hero-inner {
        width: min(calc(100% - 36px), 1280px) !important;
        grid-template-columns: 1fr !important;
        gap: 58px !important;
    }
    .about-hero-side {
        justify-self: start !important;
        max-width: 760px !important;
        min-height: auto;
        padding: 15px 0 18px 34px;
    }
    .about-hero-statement { max-width: 650px; }
    .about-hero-statement > p { max-width: 600px; }
    .about-hero-disciplines,
    .about-hero-philosophy { max-width: 620px; }
}

@media (max-width: 700px) {
    .about-hero-inner { width: calc(100% - 32px) !important; }
    .about-hero-side { padding: 10px 0 10px 21px; }
    .about-hero-side::before {
        background: linear-gradient(to bottom, var(--orange, #f6a91b), rgba(255,255,255,.08), transparent);
    }
    .about-hero-statement blockquote {
        font-size: clamp(30px, 9vw, 42px);
        letter-spacing: -1px;
    }
    .about-hero-disciplines { grid-template-columns: 1fr; }
    .hero-discipline { max-width: 430px; }
    .about-hero-philosophy { gap: 8px; }
    .philosophy-line { display: none; }
}

@media (max-width: 420px) {
    .about-hero-side { padding-left: 16px; }
    .statement-label { font-size: 8px; letter-spacing: 2px; }
    .about-hero-philosophy { justify-content: space-between; }
    .philosophy-text { font-size: 7px; letter-spacing: 1.1px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-discipline,
    .discipline-arrow,
    .philosophy-text,
    .about-hero-philosophy i,
    .about-floating-node,
    .about-hero-statement blockquote strong::after {
        transition: none !important;
    }
}

/* =========================================================
   SEPARATED CIVIL + IT MINIATURES
========================================================= */

.about-hero-world {
    position: relative;
    width: 100% !important;
    max-width: 680px !important;
    min-height: 560px;
    justify-self: end !important;
    display: block !important;
    isolation: isolate;
}

.hero-miniature-layout {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 560px;

    display: grid;

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

    gap: 16px;

    align-items: center;
}


/* =========================================================
   PANELS
========================================================= */

.miniature-panel {
    position: relative;

    min-width: 0;
    height: 470px;

    border-radius: 28px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(8,28,48,.18);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}

.miniature-panel-bg {
    position: absolute;

    inset: 0;

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

    background-size:
        32px 32px;

    opacity: .7;

    pointer-events: none;
}


/* CIVIL */

.civil-miniature-panel:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(246,169,27,.25);

    box-shadow:
        0 24px 55px
        rgba(246,169,27,.08);

    background:
        rgba(246,169,27,.025);
}


/* IT */

.it-miniature-panel:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(63,130,209,.28);

    box-shadow:
        0 24px 55px
        rgba(63,130,209,.10);

    background:
        rgba(63,130,209,.025);
}



/* =========================================================
   CIVIL SCENE
========================================================= */

.civil-mini-scene {
    position: absolute;

    inset: 0;

    transform-style:
        preserve-3d;
}

.civil-ground {
    position: absolute;

    left: 50%;
    bottom: 48px;

    width: 270px;
    height: 100px;

    transform:
        translateX(-50%);
}

.civil-ground-top {
    position: absolute;

    width: 100%;
    height: 86px;

    clip-path:
        polygon(
            50% 0,
            100% 32%,
            50% 100%,
            0 65%
        );

    background:
        linear-gradient(
            135deg,
            #2e5d4e,
            #173b35 55%,
            #18364a
        );

    border:
        1px solid
        rgba(255,255,255,.08);
}

.civil-ground-front {
    position: absolute;

    left: 0;
    top: 57px;

    width: 50%;
    height: 34px;

    clip-path:
        polygon(
            0 0,
            100% 100%,
            100% 75%,
            0 0
        );

    background:
        #0a202c;
}


/* driveway */

.civil-driveway {
    position: absolute;

    right: 23px;
    top: 37px;

    width: 110px;
    height: 28px;

    transform:
        rotate(16deg);

    border-radius: 3px;

    background:
        #596267;
}


/* pathway */

.civil-path {
    position: absolute;

    left: 88px;
    top: 49px;

    display: flex;

    gap: 4px;

    transform:
        rotate(15deg);
}

.civil-path span {
    width: 20px;
    height: 11px;

    background:
        #afa895;

    border-radius: 2px;
}


/* =========================================================
   HOUSE
========================================================= */

.mini-house {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 82px;

    width: 205px;
    height: 280px;

    transform:
        translateX(-50%);

    transition:
        transform .4s ease,
        filter .4s ease;
}

.civil-miniature-panel:hover
.mini-house {
    transform:
        translateX(-50%)
        translateY(-5px);

    filter:
        brightness(1.08)
        saturate(1.08);
}


/* roof */

.house-roof {
    position: absolute;

    left: -11px;
    top: 0;

    width: 228px;
    height: 80px;
}

.roof-main {
    position: absolute;

    left: 0;
    top: 30px;

    width: 136px;
    height: 56px;

    clip-path:
        polygon(
            50% 0,
            100% 58%,
            100% 100%,
            0 100%,
            0 58%
        );

    background:
        linear-gradient(
            145deg,
            #404a53,
            #202b34
        );
}

.roof-side {
    position: absolute;

    right: 0;
    top: 39px;

    width: 106px;
    height: 47px;

    clip-path:
        polygon(
            0 0,
            100% 35%,
            84% 100%,
            0 100%
        );

    background:
        #293641;
}

.roof-ridge {
    position: absolute;

    left: 67px;
    top: 29px;

    width: 118px;
    height: 3px;

    transform:
        rotate(10deg);

    transform-origin:
        left;

    background:
        #879097;
}

.roof-chimney {
    position: absolute;

    right: 52px;
    top: 12px;

    width: 18px;
    height: 36px;

    background:
        #5f584f;
}

.roof-chimney span {
    position: absolute;

    left: -2px;
    top: -4px;

    width: 22px;
    height: 6px;

    background:
        #81786c;
}


/* upper */

.house-upper {
    position: absolute;

    left: 7px;
    top: 74px;

    width: 190px;
    height: 92px;

    background:
        linear-gradient(
            110deg,
            #ded8ca,
            #9c9c95
        );
}


/* windows */

.house-window {
    position: absolute;

    overflow: hidden;

    border:
        3px solid
        #59656a;

    background:
        #0c324a;

    transition:
        box-shadow .35s ease,
        filter .35s ease;
}

.window-glass {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            #477d9b,
            #0e3148
        );

    transition:
        background .35s ease;
}

.upper-window-left {
    left: 18px;
    top: 21px;

    width: 47px;
    height: 49px;
}

.upper-window-right {
    right: 20px;
    top: 21px;

    width: 47px;
    height: 49px;
}

.window-frame-v {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 0;

    width: 2px;
    height: 100%;

    transform:
        translateX(-50%);

    background:
        #748088;
}

.window-frame-h {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 0;

    width: 100%;
    height: 2px;

    transform:
        translateY(-50%);

    background:
        #748088;
}


/* balcony */

.house-balcony {
    position: absolute;

    z-index: 7;

    left: 66px;
    top: 57px;

    width: 67px;
    height: 37px;
}

.balcony-floor {
    position: absolute;

    left: -7px;
    bottom: 0;

    width: 80px;
    height: 6px;

    background:
        #878781;
}

.balcony-glass {
    position: absolute;

    bottom: 6px;

    width: 67px;
    height: 23px;

    display: grid;

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

    border:
        1px solid
        rgba(170,214,235,.35);

    background:
        rgba(68,136,170,.14);
}

.balcony-glass span {
    border-right:
        1px solid
        rgba(180,216,233,.27);
}


/* lower */

.house-lower {
    position: absolute;

    left: 0;
    top: 164px;

    width: 201px;
    height: 101px;

    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            #ddd8cb,
            #9f9e96
        );
}

.house-stone-wall {
    position: absolute;

    left: 0;
    top: 0;

    width: 40px;
    height: 100%;

    background:
        #625f58;
}

.house-stone-wall span {
    display: block;

    height: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}

.house-entry {
    position: absolute;

    left: 50px;
    bottom: 0;

    width: 42px;
    height: 82px;
}

.entry-canopy {
    position: absolute;

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

    width: 56px;
    height: 7px;

    background:
        #414b52;
}

.house-door {
    position: absolute;

    left: 4px;
    bottom: 0;

    width: 34px;
    height: 72px;

    background:
        linear-gradient(
            90deg,
            #765941,
            #47362a
        );
}

.house-door span {
    position: absolute;

    left: 5px;
    top: 7px;

    width: 23px;
    height: 25px;

    background:
        #1b4b65;
}

.entry-light {
    position: absolute;

    right: -7px;
    top: 9px;

    width: 5px;
    height: 7px;

    border-radius: 2px;

    background:
        var(--orange);

    opacity: .45;

    transition:
        opacity .3s ease,
        box-shadow .3s ease;
}

.ground-window {
    left: 103px;
    top: 20px;

    width: 41px;
    height: 44px;
}

.house-garage {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 53px;
    height: 77px;
}

.garage-door {
    position: absolute;

    bottom: 0;

    width: 53px;
    height: 61px;

    border:
        2px solid
        #5d6569;

    background:
        #535d62;
}

.garage-door span {
    display: block;

    height: 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}

.garage-light {
    position: absolute;

    left: 50%;
    top: 4px;

    width: 12px;
    height: 3px;

    transform:
        translateX(-50%);

    background:
        #ffc94d;

    opacity: .4;

    transition:
        .3s ease;
}

.house-foundation {
    position: absolute;

    left: -6px;
    bottom: 3px;

    width: 213px;
    height: 10px;

    background:
        #555e62;
}


/* =========================================================
   TREES
========================================================= */

.mini-tree {
    position: absolute;

    width: 58px;
    height: 105px;
}

.tree-one {
    left: 16px;
    bottom: 70px;
}

.tree-two {
    right: 10px;
    bottom: 66px;

    transform:
        scale(.8);
}

.tree-trunk {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 7px;
    height: 45px;

    transform:
        translateX(-50%);

    background:
        #584432;
}

.tree-crown {
    position: absolute;

    border-radius:
        55% 45%
        52% 48%;

    background:
        linear-gradient(
            145deg,
            #4ca276,
            #255f49
        );

    transition:
        filter .3s ease;
}

.crown-a {
    width: 44px;
    height: 42px;

    left: 7px;
    top: 15px;
}

.crown-b {
    width: 40px;
    height: 38px;

    left: 20px;
    top: 35px;
}

.crown-c {
    width: 35px;
    height: 34px;

    left: -1px;
    top: 38px;
}


/* garden lights */

.garden-light {
    position: absolute;

    bottom: 64px;

    width: 4px;
    height: 22px;

    background:
        #4d585b;
}

.garden-light::after {
    content: "";

    position: absolute;

    left: 50%;
    top: -4px;

    width: 8px;
    height: 6px;

    transform:
        translateX(-50%);

    background:
        var(--orange);

    border-radius: 3px;

    opacity: .4;

    transition:
        .3s ease;
}

.garden-light-a {
    left: 87px;
}

.garden-light-b {
    right: 73px;
}


/* Civil hover lighting */

.civil-miniature-panel:hover
.window-glass {
    background:
        linear-gradient(
            135deg,
            #5ca8cd,
            rgba(246,169,27,.18)
        );
}

.civil-miniature-panel:hover
.entry-light,

.civil-miniature-panel:hover
.garage-light,

.civil-miniature-panel:hover
.garden-light::after {
    opacity: 1;

    box-shadow:
        0 0 14px
        rgba(246,169,27,.65);
}

.civil-miniature-panel:hover
.tree-crown {
    filter:
        brightness(1.1)
        saturate(1.1);
}



/* =========================================================
   CONNECTOR
========================================================= */

.miniature-connector {
    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}

.connector-line {
    width: 1px;
    height: 165px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(246,169,27,.32),
            rgba(63,130,209,.32),
            transparent
        );
}

.connector-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.connector-dot-a {
    top: 40%;

    background:
        var(--orange);

    box-shadow:
        0 0 12px
        rgba(246,169,27,.7);
}

.connector-dot-b {
    bottom: 39%;

    background:
        var(--blue,#3f82d1);

    box-shadow:
        0 0 12px
        rgba(63,130,209,.7);
}



/* =========================================================
   IT SCENE
========================================================= */

.it-mini-scene {
    position: absolute;

    inset: 0;

    transform-style:
        preserve-3d;
}


/* monitor */

.digital-monitor {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 76px;

    width: 220px;
    height: 205px;

    transform:
        translateX(-50%);

    transition:
        transform .4s ease,
        filter .4s ease;
}

.it-miniature-panel:hover
.digital-monitor {
    transform:
        translateX(-50%)
        translateY(-5px);

    filter:
        brightness(1.08)
        saturate(1.08);
}

.monitor-screen {
    position: absolute;

    width: 220px;
    height: 145px;

    overflow: hidden;

    border:
        5px solid
        #192f44;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #102e4a,
            #071d34
        );

    box-shadow:
        0 25px 50px
        rgba(0,0,0,.25);

    transition:
        box-shadow .35s ease,
        border-color .35s ease;
}

.it-miniature-panel:hover
.monitor-screen {
    border-color:
        #27577e;

    box-shadow:
        0 28px 60px
        rgba(63,130,209,.15);
}

.monitor-topbar {
    height: 22px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        0 9px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.monitor-topbar span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #4f6577;
}

.monitor-topbar span:first-child {
    background:
        var(--orange);
}

.monitor-topbar span:nth-child(2) {
    background:
        var(--green,#3f9b72);
}

.monitor-topbar span:nth-child(3) {
    background:
        var(--blue,#3f82d1);
}

.monitor-sidebar {
    position: absolute;

    left: 0;
    top: 22px;
    bottom: 0;

    width: 32px;

    padding-top: 15px;

    border-right:
        1px solid
        rgba(255,255,255,.05);

    background:
        rgba(0,0,0,.11);
}

.monitor-sidebar i {
    display: block;

    width: 13px;
    height: 4px;

    margin:
        0 auto 12px;

    background:
        #315069;

    border-radius: 3px;
}

.monitor-sidebar i:first-child {
    background:
        var(--blue,#3f82d1);
}

.monitor-dashboard {
    position: absolute;

    left: 43px;
    right: 10px;

    top: 32px;
    bottom: 10px;
}

.dashboard-cards {
    display: grid;

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

    gap: 5px;
}

.dashboard-cards span {
    height: 22px;

    border-radius: 5px;

    background:
        #12344f;
}

.dashboard-chart {
    position: relative;

    height: 58px;

    margin-top: 8px;

    border-radius: 6px;

    overflow: hidden;

    background:
        rgba(0,0,0,.14);

    border:
        1px solid
        rgba(255,255,255,.05);
}

.dashboard-chart svg {
    position: absolute;

    inset:
        9px 6px;

    width:
        calc(100% - 12px);

    height:
        calc(100% - 18px);
}

.dashboard-chart polyline {
    fill: none;

    stroke:
        #58a6e5;

    stroke-width: 2;

    vector-effect:
        non-scaling-stroke;
}

.dashboard-lines {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 6px;

    margin-top: 8px;
}

.dashboard-lines span {
    height: 14px;

    background:
        #173953;

    border-radius: 4px;
}

.monitor-neck {
    position: absolute;

    left: 50%;
    top: 144px;

    width: 14px;
    height: 40px;

    transform:
        translateX(-50%);

    background:
        #354f63;
}

.monitor-base {
    position: absolute;

    left: 50%;
    bottom: 9px;

    width: 84px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #1b3246;
}


/* =========================================================
   SERVER
========================================================= */

.mini-server-rack {
    position: absolute;

    right: 18px;
    bottom: 48px;

    width: 92px;

    padding: 8px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #132f48,
            #071c31
        );

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.24);

    transition:
        filter .35s ease,
        box-shadow .35s ease;
}

.it-miniature-panel:hover
.mini-server-rack {
    filter:
        brightness(1.12);

    box-shadow:
        0 24px 50px
        rgba(63,130,209,.14);
}

.server-unit {
    position: relative;

    height: 24px;

    margin-bottom: 5px;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius: 4px;

    background:
        #102b44;
}

.server-unit:last-child {
    margin-bottom: 0;
}

.server-unit > span {
    position: absolute;

    left: 7px;
    top: 50%;

    width: 5px;
    height: 5px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--green,#3f9b72);

    opacity: .45;

    transition:
        opacity .3s ease,
        box-shadow .3s ease;
}

.it-miniature-panel:hover
.server-unit > span {
    opacity: 1;

    box-shadow:
        0 0 8px
        rgba(63,155,114,.8);
}

.server-unit i {
    position: absolute;

    right: 9px;

    width: 21px;
    height: 2px;

    background:
        #36546b;
}

.server-unit i:nth-of-type(1) {
    top: 8px;
}

.server-unit i:nth-of-type(2) {
    top: 14px;
}


/* =========================================================
   IT ICONS
========================================================= */

.mini-tech-icon {
    position: absolute;

    z-index: 8;

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 13px;

    background:
        rgba(8,30,52,.92);

    color:
        var(--blue,#3f82d1);

    box-shadow:
        0 15px 32px
        rgba(0,0,0,.20);

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.mini-tech-icon:hover {
    transform:
        translateY(-5px);

    color:
        #fff;

    background:
        var(--blue,#3f82d1);

    box-shadow:
        0 18px 35px
        rgba(63,130,209,.20);
}

.tech-cloud {
    right: 17px;
    top: 18px;
}

.tech-shield {
    left: 15px;
    top: 50px;

    color:
        var(--purple,#7357d9);
}

.tech-database {
    left: 23px;
    bottom: 58px;

    color:
        #9b82f2;
}

.tech-code {
    right: 117px;
    bottom: 20px;

    color:
        var(--green,#3f9b72);
}


/* network */

.it-network {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.network-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(63,130,209,.38),
            transparent
        );
}

.network-one {
    left: 55px;
    top: 80px;

    width: 95px;

    transform:
        rotate(13deg);
}

.network-two {
    right: 38px;
    top: 85px;

    width: 93px;

    transform:
        rotate(88deg);
}

.network-three {
    left: 65px;
    bottom: 85px;

    width: 115px;

    transform:
        rotate(-8deg);
}



/* =========================================================
   HERO CURSOR LIGHT
========================================================= */

.hero-world-light {
    position: absolute;

    z-index: 0;

    width: 380px;
    height: 380px;

    left:
        var(--world-x,50%);

    top:
        var(--world-y,50%);

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;

    filter:
        blur(16px);

    background:
        radial-gradient(
            circle,
            rgba(246,169,27,.12),
            rgba(63,130,209,.07) 45%,
            transparent 70%
        );

    transition:
        opacity .3s ease;
}

.about-hero-world.world-hovered
.hero-world-light {
    opacity: 1;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px) {

    .about-hero-inner {
        grid-template-columns:
            1fr !important;
    }

    .about-hero-world {
        justify-self:
            center !important;

        max-width:
            720px !important;
    }

}


@media (max-width: 760px) {

    .hero-miniature-layout {
        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    .miniature-panel {
        width:
            min(100%, 420px);

        height:
            430px;

        margin-inline:
            auto;
    }


    .miniature-connector {
        height:
            42px;
    }


    .connector-line {
        width:
            150px;

        height:
            1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(246,169,27,.30),
                rgba(63,130,209,.30),
                transparent
            );
    }


    .connector-dot-a {
        top:
            50%;

        left:
            calc(50% - 60px);

        transform:
            translateY(-50%);
    }


    .connector-dot-b {
        top:
            50%;

        left:
            calc(50% + 54px);

        bottom:
            auto;

        transform:
            translateY(-50%);
    }


    .about-hero-world {
        min-height:
            auto;
    }

}


@media (max-width: 520px) {

    .miniature-panel {
        height:
            400px;

        border-radius:
            22px;
    }


    .civil-mini-scene,
    .it-mini-scene {
        transform:
            scale(.90);

        transform-origin:
            center;
    }

}


@media (max-width: 390px) {

    .civil-mini-scene,
    .it-mini-scene {
        transform:
            scale(.82);

        transform-origin:
            center;
    }

}


/* Touch devices: no parallax movement */

@media (pointer: coarse) {

    .world-depth {
        translate:
            0 0 !important;
    }


    .hero-world-light {
        display:
            none;
    }

}

/* =========================================================
   FINAL ABOUT HERO LAYOUT — CLEAN WIDTH + RESPONSIVE RULES
   These rules intentionally replace the older experimental
   width/connector positioning from the miniature section.
========================================================= */

.about-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 140px 0 90px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 28%, rgba(246,169,27,.13), transparent 27%),
        radial-gradient(circle at 14% 88%, rgba(63,130,209,.12), transparent 30%),
        linear-gradient(135deg, #071526 0%, #0b2544 58%, #12345b 100%);
}

.about-hero-inner {
    width: min(calc(100% - 56px), 1480px) !important;
    max-width: 1480px !important;
    min-height: auto !important;
    margin-inline: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(430px,.82fr) minmax(680px,1.18fr) !important;
    gap: clamp(42px,5vw,76px) !important;
    align-items: center !important;
}

.about-hero-content { min-width: 0; max-width: 760px; }
.about-hero h1 { color:#fff; font-size:clamp(58px,6.4vw,96px); }
.about-hero-content > p { color:#b7c7d8; }

#aboutHeroWorld,
.about-hero-world {
    --world-x: 50%;
    --world-y: 50%;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 820px !important;
    min-width: 0 !important;
    min-height: 560px !important;
    margin: 0 !important;
    justify-self: end !important;
    scale: 1 !important;
    transform: none;
    transform-origin: center !important;
    isolation: isolate;
    perspective: 1400px;
    transform-style: preserve-3d;
}

.hero-miniature-layout {
    width: 100% !important;
    min-height: 560px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 28px !important;
    align-items: center !important;
}

/* No visual bridge: the disciplines stay clearly separated. */
.miniature-connector { display: none !important; }

#aboutHeroWorld .civil-miniature-panel,
#aboutHeroWorld .it-miniature-panel,
.about-hero-world .civil-miniature-panel,
.about-hero-world .it-miniature-panel {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 500px;
    margin: 0 !important;
}

/* Cursor movement is active only while the pointer is actually over the world. */
.about-hero-world:not(.world-hovered) .world-depth {
    translate: 0 0 !important;
}

.hero-world-light { opacity: 0; }
.about-hero-world.world-hovered .hero-world-light { opacity: 1; }

@media (max-width: 1320px) {
    .about-hero-inner {
        width: min(calc(100% - 48px),1280px) !important;
        grid-template-columns: minmax(410px,.90fr) minmax(620px,1.10fr) !important;
        gap: 42px !important;
    }
    #aboutHeroWorld,
    .about-hero-world { max-width: 760px !important; }
    .hero-miniature-layout { gap: 22px !important; }
}

@media (max-width: 1120px) {
    .about-hero { min-height: auto; }
    .about-hero-inner {
        width: min(calc(100% - 40px),1000px) !important;
        grid-template-columns: 1fr !important;
        gap: 45px !important;
        padding-top: 15px !important;
        padding-bottom: 10px !important;
    }
    .about-hero-content { max-width: 820px; }
    #aboutHeroWorld,
    .about-hero-world {
        width: 100% !important;
        max-width: 820px !important;
        min-width: 0 !important;
        justify-self: center !important;
    }
    .hero-miniature-layout { min-height: 540px !important; gap: 26px !important; }
    #aboutHeroWorld .civil-miniature-panel,
    #aboutHeroWorld .it-miniature-panel { height: 480px; }
}

@media (max-width: 760px) {
    .about-hero { padding: 116px 0 68px; }
    .about-hero-inner {
        width: min(calc(100% - 30px),680px) !important;
        gap: 38px !important;
    }
    .about-hero h1 { font-size:clamp(48px,13vw,70px); letter-spacing:-2.5px; }
    .about-hero-content > p { font-size:14px; line-height:1.8; }
    .about-hero-actions { display:grid; grid-template-columns:1fr; }
    .about-hero-actions .btn { width:100%; justify-content:center; }
    #aboutHeroWorld,
    .about-hero-world { min-height:auto !important; }
    .hero-miniature-layout {
        min-height:auto !important;
        grid-template-columns:1fr !important;
        gap:22px !important;
    }
    #aboutHeroWorld .civil-miniature-panel,
    #aboutHeroWorld .it-miniature-panel {
        width:min(100%,430px) !important;
        height:445px;
        margin-inline:auto !important;
        border-radius:24px;
    }
}

@media (max-width: 500px) {
    .about-hero { padding:105px 0 58px; }
    .about-hero-inner { width:calc(100% - 24px) !important; }
    .about-hero h1 { font-size:clamp(43px,13vw,60px); letter-spacing:-2px; }
    #aboutHeroWorld .civil-miniature-panel,
    #aboutHeroWorld .it-miniature-panel { height:405px; border-radius:21px; }
}

@media (max-width: 380px) {
    #aboutHeroWorld .civil-miniature-panel,
    #aboutHeroWorld .it-miniature-panel { height:380px; }
}

@media (pointer: coarse) {
    .about-hero-world .world-depth { translate:0 0 !important; }
    .hero-world-light { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .about-hero-world .world-depth { translate:0 0 !important; transition:none !important; }
    .hero-world-light { display:none !important; }
}




/* road */

.platform-road {

    position: absolute;

    z-index: 4;

    width: 235px;
    height: 22px;

    left: 42px;
    top: 49px;

    transform:
        rotate(19deg);

    border-radius:
        4px;

    background:
        #091725;

    opacity:
        .95;

}


.platform-road span {

    position: absolute;

    top: 10px;

    width: 34px;
    height: 1px;

    background:
        rgba(246,169,27,.7);

}


.platform-road span:nth-child(1) {

    left: 25px;

}


.platform-road span:nth-child(2) {

    left: 96px;

}


.platform-road span:nth-child(3) {

    right: 30px;

}



/* =========================================================
   CIVIL MINI WORLD
========================================================= */

.civil-mini-world {

    position: absolute;

    z-index: 5;

    left: 16px;

    bottom: 117px;

    width: 405px;
    height: 390px;

    transform-style:
        preserve-3d;

}



/* =========================================================
   FOUNDATION
========================================================= */

.mini-foundation {

    position: absolute;

    left: 66px;

    bottom: 17px;

    width: 182px;
    height: 60px;

    transform-style:
        preserve-3d;

}


.foundation-top {

    position: absolute;

    width: 178px;
    height: 62px;

    clip-path:

        polygon(
            50% 0,
            100% 29%,
            50% 100%,
            0 68%
        );

    background:

        linear-gradient(
            135deg,
            #58636d,
            #303c48
        );

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

}


.foundation-front {

    position: absolute;

    left: 0;

    top: 38px;

    width: 50%;
    height: 25px;

    clip-path:

        polygon(
            0 0,
            100% 100%,
            100% 72%,
            0 0
        );

    background:
        #27323b;

}


.foundation-side {

    position: absolute;

    right: 4px;

    top: 40px;

    width: 50%;
    height: 23px;

    clip-path:

        polygon(
            0 100%,
            100% 0,
            100% 29%,
            0 100%
        );

    background:
        #1c2833;

}



/* =========================================================
   BUILDING
========================================================= */

.mini-building {

    position: absolute;

    left: 94px;

    bottom: 64px;

    width: 238px;
    height: 266px;

    transform-style:
        preserve-3d;

    transform:
        skewY(-2deg);

    transition:

        filter .4s ease,
        transform .45s
        cubic-bezier(.22,.61,.36,1);

}



/* floors */

.building-floor {

    position: absolute;

    left: 0;

    width: 138px;
    height: 42px;

    display: grid;

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

    gap: 5px;

    padding:
        7px 10px;

    border:

        1px solid
        rgba(255,255,255,.14);

    border-bottom-color:
        rgba(246,169,27,.18);

    background:

        linear-gradient(
            135deg,
            rgba(79,97,112,.98),
            rgba(39,56,72,.98)
        );

    box-shadow:

        inset
        -15px 0 22px
        rgba(0,0,0,.17);

}


.building-floor span {

    border:

        1px solid
        rgba(77,170,232,.30);

    border-radius:
        2px;

    background:

        linear-gradient(
            135deg,
            rgba(50,120,166,.75),
            rgba(9,44,72,.92)
        );

    box-shadow:

        inset
        0 0 9px
        rgba(63,130,209,.13);

    transition:
        .35s ease;

}


.floor-1 {
    bottom: 0;
}

.floor-2 {
    bottom: 43px;
}

.floor-3 {
    bottom: 86px;
}

.floor-4 {
    bottom: 129px;
}

.floor-5 {
    bottom: 172px;
}



/* roof */

.building-roof {

    position: absolute;

    left: -6px;

    bottom: 214px;

    width: 150px;
    height: 13px;

    border-radius:
        3px;

    background:

        linear-gradient(
            90deg,
            #8b979f,
            #4c5965
        );

    box-shadow:

        0 -2px 14px
        rgba(246,169,27,.12);

}


.building-roof::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -3px;

    width: 100%;
    height: 2px;

    background:
        var(--orange);

    opacity:
        .65;

}



/* building columns */

.building-column {

    position: absolute;

    z-index: 4;

    bottom: 0;

    width: 4px;
    height: 216px;

    background:

        linear-gradient(
            #d1d7db,
            #79858e
        );

    opacity:
        .7;

}


.column-a {
    left: 5px;
}

.column-b {
    left: 45px;
}

.column-c {
    right: 44px;
}

.column-d {
    right: 5px;
}



/* antenna */

.building-antenna {

    position: absolute;

    left: 50%;

    bottom: 227px;

    width: 3px;
    height: 28px;

    background:
        #8997a4;

}


.building-antenna span {

    position: absolute;

    width: 7px;
    height: 7px;

    left: 50%;
    top: -6px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--orange);

    box-shadow:

        0 0 12px
        rgba(246,169,27,.85);

}



/* =========================================================
   CRANE
========================================================= */

.mini-crane {

    position: absolute;

    z-index: 3;

    left: 0;

    bottom: 48px;

    width: 155px;
    height: 285px;

    transform-origin:
        bottom center;

    transition:
        filter .4s ease;

}


.crane-base {

    position: absolute;

    left: 28px;
    bottom: 0;

    width: 54px;
    height: 11px;

    border-radius:
        3px;

    background:
        #785415;

}


.crane-tower {

    position: absolute;

    left: 48px;
    bottom: 8px;

    width: 17px;
    height: 224px;

    border-left:
        3px solid
        #f6a91b;

    border-right:
        3px solid
        #f6a91b;

}


.crane-tower::before,
.crane-tower::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(
            32deg,
            transparent 0 15px,
            rgba(246,169,27,.75)
            15px 17px,
            transparent
            17px 31px
        );

}


.crane-tower::after {

    transform:
        scaleX(-1);

}


.crane-arm {

    position: absolute;

    left: 54px;
    top: 38px;

    width: 100px;
    height: 5px;

    background:
        var(--orange);

    transform-origin:
        left center;

    transform:
        rotate(2deg);

}


.crane-back-arm {

    position: absolute;

    left: 0;
    top: 39px;

    width: 56px;
    height: 4px;

    background:
        #d18f16;

}


.crane-cable {

    position: absolute;

    right: 15px;
    top: 42px;

    width: 1px;
    height: 82px;

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

    animation:

        craneCableMove
        3.8s
        ease-in-out
        infinite;

}


.crane-hook {

    position: absolute;

    left: -4px;
    bottom: -8px;

    width: 9px;
    height: 9px;

    border:

        2px solid
        var(--orange);

    border-top:
        0;

    border-radius:

        0 0
        7px 7px;

}


@keyframes craneCableMove {

    0%,
    100% {

        height: 78px;

    }

    50% {

        height: 98px;

    }

}



/* =========================================================
   CIVIL MARKERS
========================================================= */

.civil-site-marker {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        var(--orange);

    box-shadow:

        0 0 13px
        rgba(246,169,27,.75);

}


.marker-one {

    left: 72px;

    bottom: 7px;

}


.marker-two {

    right: 24px;

    bottom: 25px;

}



/* =========================================================
   IT MINI WORLD
========================================================= */

.it-mini-world {

    position: absolute;

    z-index: 7;

    right: 2px;

    top: 75px;

    width: 325px;
    height: 430px;

    transform-style:
        preserve-3d;

}



/* =========================================================
   APPLICATION INTERFACE
========================================================= */

.mini-interface {

    position: absolute;

    z-index: 5;

    right: 23px;
    top: 85px;

    width: 220px;
    height: 160px;

    overflow:
        hidden;

    border:

        1px solid
        rgba(105,175,230,.24);

    border-radius:
        16px;

    background:

        linear-gradient(
            145deg,
            rgba(17,53,84,.91),
            rgba(7,27,49,.93)
        );

    backdrop-filter:
        blur(12px);

    box-shadow:

        0 28px 65px
        rgba(0,0,0,.28),

        inset
        0 0 32px
        rgba(63,130,209,.045);

    transform:

        perspective(800px)
        rotateY(-10deg)
        rotateX(5deg);

    transition:

        border-color .4s ease,
        box-shadow .4s ease,
        filter .4s ease;

}


.mini-window-bar {

    height: 25px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        0 10px;

    border-bottom:

        1px solid
        rgba(255,255,255,.07);

}


.mini-window-bar span {

    width: 5px;
    height: 5px;

    border-radius:
        50%;

    background:
        #536c82;

}


.mini-window-bar span:nth-child(1) {

    background:
        var(--orange);

}


.mini-window-bar span:nth-child(2) {

    background:
        var(--green);

}


.mini-window-bar span:nth-child(3) {

    background:
        var(--blue);

}



/* sidebar */

.interface-sidebar {

    position: absolute;

    left: 0;
    top: 25px;
    bottom: 0;

    width: 36px;

    padding-top:
        18px;

    border-right:

        1px solid
        rgba(255,255,255,.055);

    background:
        rgba(0,0,0,.08);

}


.interface-sidebar i {

    display: block;

    width: 14px;
    height: 4px;

    margin:
        0 auto
        15px;

    border-radius:
        5px;

    background:
        #355978;

}


.interface-sidebar i:first-child {

    background:
        var(--blue);

}



/* content */

.interface-content {

    position: absolute;

    left: 52px;

    right: 14px;

    top: 43px;

    bottom: 16px;

}


.interface-chart {

    height: 69px;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding:
        8px 9px;

    border:

        1px solid
        rgba(255,255,255,.055);

    border-radius:
        7px;

    background:
        rgba(0,0,0,.10);

}


.chart-bar {

    flex: 1;

    border-radius:
        3px 3px 0 0;

    background:

        linear-gradient(
            to top,
            var(--blue),
            #72b6eb
        );

    opacity:
        .75;

    animation:

        digitalBars
        3.3s
        ease-in-out
        infinite alternate;

}


.bar-a {
    height: 32%;
}

.bar-b {
    height: 68%;
}

.bar-c {
    height: 48%;
}

.bar-d {
    height: 88%;
}


@keyframes digitalBars {

    from {

        transform:
            scaleY(.78);

        opacity:
            .5;

    }

    to {

        transform:
            scaleY(1);

        opacity:
            .95;

    }

}



/* interface lines */

.interface-lines {

    margin-top:
        12px;

}


.interface-lines span {

    display: block;

    height: 4px;

    margin-bottom:
        6px;

    border-radius:
        4px;

    background:
        #294c69;

}


.interface-lines span:nth-child(1) {
    width: 95%;
}

.interface-lines span:nth-child(2) {
    width: 71%;
}

.interface-lines span:nth-child(3) {
    width: 83%;
}



/* =========================================================
   SERVER
========================================================= */

.mini-server {

    position: absolute;

    z-index: 4;

    right: 9px;

    bottom: 42px;

    width: 104px;

    padding:
        9px;

    border:

        1px solid
        rgba(255,255,255,.10);

    border-radius:
        12px;

    background:

        linear-gradient(
            145deg,
            rgba(15,43,67,.95),
            rgba(7,26,46,.98)
        );

    box-shadow:

        0 22px 48px
        rgba(0,0,0,.28);

    transform:

        perspective(700px)
        rotateY(-8deg);

    transition:
        .4s ease;

}


.server-unit {

    position: relative;

    height: 27px;

    margin-bottom:
        6px;

    overflow:
        hidden;

    border:

        1px solid
        rgba(255,255,255,.06);

    border-radius:
        5px;

    background:
        #102d49;

}


.server-unit:last-child {

    margin-bottom:
        0;

}


.server-light {

    position: absolute;

    left: 9px;

    top: 50%;

    width: 5px;
    height: 5px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:

        0 0 9px
        rgba(63,155,114,.9);

    animation:

        serverPulse
        1.7s
        ease-in-out
        infinite;

}


.server-unit:nth-child(2)
.server-light {

    animation-delay:
        .35s;

}


.server-unit:nth-child(3)
.server-light {

    animation-delay:
        .75s;

}


.server-unit:nth-child(4)
.server-light {

    animation-delay:
        1.1s;

}


@keyframes serverPulse {

    0%,
    100% {

        opacity: .35;

    }

    50% {

        opacity: 1;

    }

}


.server-unit i {

    position: absolute;

    right: 10px;

    width: 21px;
    height: 2px;

    border-radius:
        2px;

    background:
        #3b5e79;

}


.server-unit i:nth-of-type(1) {
    top: 9px;
}

.server-unit i:nth-of-type(2) {
    top: 15px;
}



/* =========================================================
   DIGITAL ICONS
========================================================= */

.digital-icon {

    position: absolute;

    z-index: 7;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border:

        1px solid
        rgba(255,255,255,.11);

    border-radius:
        14px;

    color:
        var(--blue);

    background:
        rgba(8,29,51,.82);

    backdrop-filter:
        blur(12px);

    box-shadow:

        0 16px 38px
        rgba(0,0,0,.22);

    font-size:
        16px;

    transition:

        transform .35s ease,
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.digital-icon:hover {

    transform:
        translateY(-6px)
        scale(1.08);

    color:
        #fff;

    border-color:
        rgba(63,130,209,.50);

    background:
        var(--blue);

    box-shadow:

        0 20px 50px
        rgba(63,130,209,.22);

}


.digital-cloud {

    right: 15px;
    top: 15px;

}


.digital-database {

    left: 15px;
    top: 63px;

    color:
        var(--purple);

}


.digital-security {

    left: 30px;
    bottom: 35px;

    color:
        #8e79ed;

}


.digital-code {

    right: 130px;
    bottom: 3px;

    color:
        var(--green);

}



/* =========================================================
   DIGITAL NODES
========================================================= */

.digital-node {

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius:
        50%;

    background:
        var(--blue);

    box-shadow:

        0 0 14px
        rgba(63,130,209,.9);

    animation:

        nodeGlow
        2.4s
        ease-in-out
        infinite;

}


.digital-node-a {

    left: 62px;
    top: 37px;

}


.digital-node-b {

    right: 80px;
    top: 71px;

    animation-delay:
        .5s;

}


.digital-node-c {

    left: 108px;
    bottom: 92px;

    background:
        var(--purple);

    animation-delay:
        1s;

}


.digital-node-d {

    right: 24px;
    bottom: 147px;

    background:
        var(--green);

    animation-delay:
        1.5s;

}


@keyframes nodeGlow {

    0%,
    100% {

        opacity:
            .35;

        transform:
            scale(.8);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.35);

    }

}



/* =========================================================
   ENERGY BRIDGE
========================================================= */

.world-energy-bridge {

    position: absolute;

    z-index: 8;

    left: 44%;

    top: 55%;

    width: 155px;
    height: 70px;

    pointer-events:
        none;

}


.energy-path {

    position: absolute;

    left: 0;
    top: 32px;

    width: 100%;
    height: 1px;

    transform:
        rotate(-9deg);

    transform-origin:
        left;

    background:

        linear-gradient(
            90deg,
            rgba(246,169,27,.8),
            rgba(63,130,209,.75),
            transparent
        );

}


.energy-pulse {

    position: absolute;

    left: 0;
    top: 29px;

    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        var(--orange);

    box-shadow:

        0 0 14px
        rgba(246,169,27,.95);

    animation:

        energyTravel
        3s linear
        infinite;

}


.pulse-two {

    animation-delay:
        1s;

}


.pulse-three {

    animation-delay:
        2s;

}


@keyframes energyTravel {

    0% {

        transform:
            translate(
                0,
                0
            );

        opacity:
            0;

        background:
            var(--orange);

    }

    10% {

        opacity: 1;

    }

    70% {

        background:
            var(--blue);

    }

    100% {

        transform:
            translate(
                150px,
                -24px
            );

        opacity:
            0;

        background:
            var(--blue);

    }

}



/* =========================================================
   FRONT PARTICLES
========================================================= */

.world-particles {

    position: absolute;

    inset: 0;

    z-index: 10;

    pointer-events:
        none;

}


.world-particle {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius:
        50%;

    background:
        var(--orange);

    box-shadow:

        0 0 10px
        rgba(246,169,27,.75);

    animation:

        worldParticleFloat
        5s
        ease-in-out
        infinite;

}


.particle-a {

    left: 15%;
    top: 17%;

}


.particle-b {

    left: 43%;
    top: 8%;

    background:
        var(--blue);

    animation-delay:
        .8s;

}


.particle-c {

    right: 9%;
    top: 40%;

    background:
        var(--purple);

    animation-delay:
        1.5s;

}


.particle-d {

    left: 35%;
    bottom: 9%;

    background:
        var(--green);

    animation-delay:
        2.2s;

}


.particle-e {

    right: 27%;
    bottom: 22%;

    background:
        var(--blue);

    animation-delay:
        3s;

}


.particle-f {

    left: 4%;
    top: 56%;

    animation-delay:
        3.7s;

}


@keyframes worldParticleFloat {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            .25;

    }

    50% {

        transform:
            translateY(-12px);

        opacity:
            1;

    }

}



/* =========================================================
   HOVER — CIVIL SIDE
========================================================= */

.about-hero-world.civil-hover
.mini-building {

    filter:

        brightness(1.22)
        saturate(1.13);

    transform:

        skewY(-2deg)
        translateY(-5px);

}


.about-hero-world.civil-hover
.building-floor span {

    border-color:
        rgba(246,169,27,.45);

    background:

        linear-gradient(
            135deg,
            rgba(70,145,183,.90),
            rgba(246,169,27,.24)
        );

}


.about-hero-world.civil-hover
.mini-crane {

    filter:

        brightness(1.22)
        saturate(1.2);

}


.about-hero-world.civil-hover
.hero-world-light {

    background:

        radial-gradient(
            circle,
            rgba(246,169,27,.18),
            rgba(246,169,27,.045) 42%,
            transparent 70%
        );

}



/* =========================================================
   HOVER — IT SIDE
========================================================= */

.about-hero-world.it-hover
.mini-interface {

    border-color:
        rgba(63,130,209,.50);

    filter:

        brightness(1.18)
        saturate(1.15);

    box-shadow:

        0 30px 80px
        rgba(63,130,209,.17),

        inset
        0 0 34px
        rgba(63,130,209,.09);

}


.about-hero-world.it-hover
.mini-server {

    filter:

        brightness(1.22)
        saturate(1.15);

    box-shadow:

        0 25px 60px
        rgba(63,130,209,.18);

}


.about-hero-world.it-hover
.hero-world-light {

    background:

        radial-gradient(
            circle,
            rgba(63,130,209,.19),
            rgba(115,87,217,.07) 42%,
            transparent 70%
        );

}



/* =========================================================
   WHOLE WORLD HOVER
========================================================= */

.about-hero-world:hover
.hero-world-grid {

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

}


.about-hero-world:hover
.hero-world-light {

    opacity:
        1;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .about-hero-inner {

        grid-template-columns:

            minmax(0, 1fr)
            minmax(390px, .82fr)
            !important;

        gap:
            42px !important;

    }


    .about-hero-world {

        transform:
            scale(.92);

        transform-origin:
            center right;

    }

}



@media (max-width: 900px) {

    .about-hero-inner {

        width:

            min(
                calc(100% - 36px),
                1280px
            ) !important;

        grid-template-columns:
            1fr !important;

        gap:
            25px !important;

    }


    .about-hero-world {

        justify-self:
            center !important;

        max-width:
            620px !important;

        transform:
            scale(.95);

        transform-origin:
            center;

        margin-top:
            -15px;

    }

}



@media (max-width: 650px) {

    .about-hero-world {

        min-height:
            480px;

        width:
            560px !important;

        max-width:
            none !important;

        left:
            50%;

        transform:

            translateX(-50%)
            scale(.76);

        transform-origin:
            center;

        margin-top:
            -55px;

        margin-bottom:
            -55px;

    }

}



@media (max-width: 480px) {

    .about-hero-world {

        min-height:
            435px;

        transform:

            translateX(-50%)
            scale(.65);

        margin-top:
            -85px;

        margin-bottom:
            -90px;

    }

}



/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (pointer: coarse) {

    .digital-icon:hover {

        transform:
            none;

    }


    .about-hero-world {

        --world-x: 50%;
        --world-y: 50%;

    }

}



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

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

    .crane-cable,
    .chart-bar,
    .server-light,
    .digital-node,
    .energy-pulse,
    .world-particle {

        animation:
            none !important;

    }


    .mini-building,
    .mini-interface,
    .mini-server,
    .mini-crane,
    .digital-icon {

        transition:
            none !important;

    }

}

/* =========================================================
   FINAL HERO MINIATURE OVERRIDE
   Residential Civil + IT
   Hover-only motion
   Mobile responsive
========================================================= */

.about-hero-inner{
width:min(calc(100% - 48px),1280px)!important;
max-width:1280px!important;
margin-inline:auto!important;
grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr)!important;
gap:clamp(52px,6vw,92px)!important;
}
.about-hero-content,.about-hero-world{min-width:0}
.about-hero-world{
--world-x:50%;--world-y:50%;
position:relative;width:100%!important;max-width:625px!important;min-height:600px;
justify-self:end!important;display:block!important;align-items:initial!important;gap:0!important;
color:inherit!important;font-size:inherit!important;font-weight:inherit!important;letter-spacing:0!important;line-height:normal!important;
perspective:1400px;transform-style:preserve-3d;isolation:isolate;cursor:default
}
.about-hero-world::before,.about-hero-world::after{content:none!important}
.world-depth{translate:0 0;will-change:translate;transition:translate .22s cubic-bezier(.22,.61,.36,1)}
.about-hero-world:not(.world-hovered) .world-depth{translate:0 0!important}
.hero-world-light{
position:absolute;z-index:0;width:410px;height:410px;left:var(--world-x);top:var(--world-y);
transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;filter:blur(15px);
background:radial-gradient(circle,rgba(246,169,27,.14),rgba(63,130,209,.08) 42%,transparent 71%);
transition:opacity .3s ease,background .35s ease
}
.about-hero-world.world-hovered .hero-world-light{opacity:1}
.hero-world-grid{
position:absolute;z-index:0;inset:30px 7px 24px 22px;border:1px solid rgba(255,255,255,.065);
border-radius:32px;overflow:hidden;
background:
linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px),
radial-gradient(circle at 75% 28%,rgba(63,130,209,.08),transparent 38%),rgba(5,23,42,.24);
background-size:36px 36px,36px 36px,auto,auto;box-shadow:inset 0 0 80px rgba(255,255,255,.012);
transition:border-color .35s ease,background .35s ease
}
.about-hero-world.world-hovered .hero-world-grid{border-color:rgba(255,255,255,.105)}

.miniature-ground{position:absolute;z-index:2;left:50%;bottom:52px;width:500px;height:150px;margin-left:-250px}
.ground-top{position:absolute;inset:0 0 auto;width:100%;height:112px;clip-path:polygon(50% 0,100% 35%,51% 100%,0 66%);border:1px solid rgba(255,255,255,.09);background:linear-gradient(135deg,#28544a 0%,#173d39 30%,#183649 65%,#10283e 100%);box-shadow:0 30px 70px rgba(0,0,0,.27)}
.ground-front{position:absolute;left:0;top:73px;width:51%;height:42px;clip-path:polygon(0 0,100% 96%,100% 72%,0 0);background:#0a202c}
.ground-right{position:absolute;right:0;top:73px;width:50%;height:42px;clip-path:polygon(0 96%,100% 0,100% 27%,0 96%);background:#0b2435}
.house-driveway{position:absolute;z-index:5;right:38px;top:37px;width:192px;height:55px;transform:skewY(-12deg) rotate(17deg);border-radius:3px;background:linear-gradient(135deg,#687178,#384249);box-shadow:inset 0 0 14px rgba(0,0,0,.22)}
.house-path{position:absolute;z-index:6;left:195px;top:64px;width:126px;display:flex;gap:5px;transform:rotate(16deg)}
.house-path span{width:26px;height:16px;border-radius:2px;background:#a69f8e;opacity:.9}
.ground-grass{position:absolute;z-index:6;width:22px;height:15px;border-radius:50% 50% 20% 20%;background:#3f966d}
.grass-one{left:72px;top:47px}.grass-two{left:133px;top:74px}.grass-three{right:78px;top:49px}

.residential-world{position:absolute;z-index:6;left:12px;bottom:112px;width:365px;height:425px;transform-style:preserve-3d}
.mini-house{position:absolute;z-index:4;left:69px;bottom:20px;width:244px;height:318px;transform-style:preserve-3d;filter:brightness(.92) saturate(.94);transition:filter .42s ease,transform .42s cubic-bezier(.22,.61,.36,1)}
.house-roof{position:absolute;z-index:8;left:-17px;top:0;width:270px;height:96px}
.roof-left{position:absolute;left:0;top:34px;width:157px;height:69px;clip-path:polygon(50% 0,100% 57%,100% 100%,0 100%,0 56%);background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),linear-gradient(140deg,#3c4650,#1d2934)}
.roof-right{position:absolute;right:0;top:45px;width:128px;height:57px;clip-path:polygon(0 0,100% 37%,85% 100%,0 100%);background:linear-gradient(140deg,#303b46,#192630)}
.roof-ridge{position:absolute;left:76px;top:33px;width:140px;height:4px;transform:rotate(11deg);transform-origin:left center;border-radius:3px;background:#818b93}
.roof-chimney{position:absolute;z-index:9;left:168px;top:17px;width:23px;height:44px;background:linear-gradient(90deg,#696055,#3c3934)}
.roof-chimney span{position:absolute;left:-3px;top:-5px;width:29px;height:7px;background:#81796d}
.house-upper{position:absolute;z-index:4;left:8px;top:88px;width:223px;height:105px;background:linear-gradient(110deg,#ded9cc,#9f9f97);box-shadow:inset -25px 0 30px rgba(0,0,0,.12)}
.upper-wall{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 63%,rgba(36,43,46,.10) 63%)}
.house-window{position:absolute;overflow:hidden;border:3px solid #566267;background:#0d3148;box-shadow:inset 0 0 18px rgba(63,130,209,.17);transition:filter .35s ease,box-shadow .35s ease}
.upper-window-left{left:23px;top:24px;width:56px;height:58px}.upper-window-right{right:25px;top:24px;width:56px;height:58px}
.window-glass{position:absolute;inset:0;background:linear-gradient(135deg,rgba(60,142,192,.68),rgba(10,42,62,.95));transition:background .35s ease,box-shadow .35s ease}
.window-frame-v{position:absolute;z-index:3;left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);background:#6d7a80}
.window-frame-h{position:absolute;z-index:3;left:0;top:50%;width:100%;height:2px;transform:translateY(-50%);background:#6d7a80}
.house-balcony{position:absolute;z-index:10;left:78px;top:65px;width:79px;height:43px}
.balcony-floor{position:absolute;left:-9px;bottom:0;width:96px;height:7px;background:#898983;box-shadow:0 6px 8px rgba(0,0,0,.17)}
.balcony-glass{position:absolute;left:0;bottom:7px;width:79px;height:27px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(155,207,231,.42);background:rgba(75,144,178,.15)}
.balcony-glass span{border-right:1px solid rgba(180,216,233,.34)}.balcony-glass span:last-child{border-right:0}
.balcony-rail{position:absolute;left:-2px;bottom:34px;width:83px;height:2px;background:#7d898e}
.house-lower{position:absolute;left:0;top:191px;width:239px;height:114px;overflow:hidden;background:linear-gradient(105deg,#e1dccf,#a09f97);box-shadow:inset -28px 0 32px rgba(0,0,0,.12)}
.house-stone-wall{position:absolute;left:0;top:0;width:47px;height:100%;overflow:hidden;background:#68655e}
.house-stone-wall span{display:block;height:19px;border-bottom:1px solid rgba(255,255,255,.10);background:linear-gradient(90deg,#746f65,#504d48)}
.house-stone-wall span:nth-child(even){transform:translateX(7px)}
.house-entry{position:absolute;left:59px;bottom:0;width:49px;height:93px}
.entry-canopy{position:absolute;z-index:6;left:-8px;top:-5px;width:66px;height:8px;background:#414d55;box-shadow:0 5px 8px rgba(0,0,0,.17)}
.house-door{position:absolute;left:4px;bottom:0;width:40px;height:81px;border:2px solid #5c6261;background:linear-gradient(90deg,#795d43,#49382c)}
.door-glass{position:absolute;left:6px;top:7px;width:26px;height:28px;background:linear-gradient(135deg,#376d88,#102e40)}
.door-handle{position:absolute;right:5px;top:49px;width:3px;height:3px;border-radius:50%;background:var(--orange)}
.entry-light{position:absolute;right:-9px;top:10px;width:5px;height:8px;border-radius:3px;background:#f6a91b;box-shadow:0 0 13px rgba(246,169,27,.35);opacity:.55;transition:opacity .35s ease,box-shadow .35s ease}
.ground-window{left:121px;top:23px;width:49px;height:50px}
.house-garage{position:absolute;right:0;bottom:0;width:64px;height:87px}
.garage-door{position:absolute;bottom:0;width:64px;height:71px;overflow:hidden;border:2px solid #5c6469;background:#555f65}
.garage-door span{display:block;height:17px;border-bottom:1px solid rgba(255,255,255,.11)}
.garage-light{position:absolute;left:50%;top:4px;width:14px;height:3px;transform:translateX(-50%);border-radius:2px;background:#ffc94d;opacity:.45;box-shadow:0 0 12px rgba(255,201,77,.4);transition:opacity .35s ease,box-shadow .35s ease}
.house-column{position:absolute;z-index:9;top:173px;width:7px;height:132px;background:linear-gradient(90deg,#9c9b94,#e3dfd4)}
.house-column-one{left:9px}.house-column-two{left:228px}
.house-foundation{position:absolute;left:-8px;bottom:5px;width:256px;height:12px;background:linear-gradient(90deg,#666e71,#3b454a)}
.mini-tree{position:absolute;z-index:2;width:70px;height:120px}
.tree-left{left:1px;bottom:9px}.tree-right{right:-3px;bottom:3px;transform:scale(.82)}
.tree-trunk{position:absolute;left:50%;bottom:0;width:8px;height:55px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,#66513c,#3f3127)}
.tree-crown{position:absolute;border-radius:58% 42% 54% 46%;background:linear-gradient(145deg,#4fa77b,#255c49);box-shadow:inset -8px -7px 18px rgba(0,0,0,.13);transition:filter .35s ease,transform .35s ease}
.crown-one{width:52px;height:50px;left:8px;top:15px}.crown-two{width:48px;height:45px;left:25px;top:40px}.crown-three{width:43px;height:39px;left:-1px;top:42px}
.garden-light{position:absolute;bottom:3px;width:4px;height:24px;background:#4d585b}
.garden-light::after{content:"";position:absolute;left:50%;top:-3px;width:8px;height:6px;transform:translateX(-50%);border-radius:3px;background:var(--orange);opacity:.45;box-shadow:0 0 10px rgba(246,169,27,.42);transition:opacity .35s ease,box-shadow .35s ease}
.garden-light-one{left:102px}.garden-light-two{right:63px}
.civil-point{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);opacity:.42;box-shadow:0 0 13px rgba(246,169,27,.7);transition:opacity .35s ease}
.civil-point-one{left:21px;bottom:19px}.civil-point-two{right:28px;bottom:47px}

.digital-world{position:absolute;z-index:9;right:-2px;top:63px;width:325px;height:440px;transform-style:preserve-3d}
.digital-monitor{position:absolute;z-index:5;right:31px;top:80px;width:223px;height:214px}
.monitor-screen{position:absolute;left:0;top:0;width:223px;height:153px;overflow:hidden;border:5px solid #182f45;border-radius:11px;background:linear-gradient(145deg,#102e4a,#071d34);box-shadow:0 25px 55px rgba(0,0,0,.28),0 0 0 1px rgba(84,157,213,.11);transition:border-color .35s ease,box-shadow .35s ease,filter .35s ease}
.monitor-topbar{height:21px;display:flex;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.055)}
.monitor-topbar span{width:4px;height:4px;border-radius:50%;background:#496176}
.monitor-topbar span:first-child{background:var(--orange)}.monitor-topbar span:nth-child(2){background:var(--green,#3f9b72)}.monitor-topbar span:nth-child(3){background:var(--blue,#3f82d1)}
.monitor-topbar i{width:55px;height:4px;margin-left:7px;border-radius:4px;background:#263f55}
.monitor-sidebar{position:absolute;left:0;top:21px;bottom:0;width:32px;padding-top:15px;background:rgba(0,0,0,.13);border-right:1px solid rgba(255,255,255,.05)}
.monitor-sidebar b{display:block;width:13px;height:4px;margin:0 auto 13px;border-radius:5px;background:#315069}
.monitor-sidebar b:first-child{width:17px;background:var(--blue,#3f82d1)}
.monitor-content{position:absolute;left:43px;right:10px;top:31px;bottom:10px}
.dashboard-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.dashboard-stat-row span{height:24px;border:1px solid rgba(255,255,255,.05);border-radius:5px;background:#12344f}
.dashboard-stat-row span:first-child{background:linear-gradient(135deg,rgba(63,130,209,.35),#12344f)}
.dashboard-chart{position:relative;height:62px;margin-top:8px;overflow:hidden;border:1px solid rgba(255,255,255,.05);border-radius:6px;background:rgba(3,17,31,.26)}
.chart-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:18px 18px}
.dashboard-chart svg{position:absolute;inset:11px 7px 8px;width:calc(100% - 14px);height:calc(100% - 19px)}
.dashboard-chart polyline{fill:none;stroke:#58a6e5;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:260;stroke-dashoffset:260}
.about-hero-world.world-hovered .dashboard-chart polyline{animation:dashboardDraw 1.05s ease forwards}
@keyframes dashboardDraw{to{stroke-dashoffset:0}}
.chart-point{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--blue,#3f82d1);opacity:.55;box-shadow:0 0 8px rgba(63,130,209,.8)}
.point-one{left:29%;bottom:20px}.point-two{left:58%;bottom:29px}.point-three{right:12%;top:11px}
.dashboard-bottom{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.dashboard-bottom span{height:16px;border-radius:4px;background:#173953}
.monitor-neck{position:absolute;left:50%;top:152px;width:14px;height:43px;transform:translateX(-50%);background:linear-gradient(90deg,#263e51,#456377)}
.monitor-base{position:absolute;left:50%;bottom:7px;width:89px;height:9px;transform:translateX(-50%);border-radius:50%;background:#1b3246}

.mini-server-rack{position:absolute;z-index:3;right:2px;bottom:26px;width:102px;padding:9px 8px 8px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:linear-gradient(145deg,#132f48,#071c31);box-shadow:0 23px 50px rgba(0,0,0,.27);transition:filter .35s ease,box-shadow .35s ease}
.rack-top{width:42px;height:3px;margin:0 auto 8px;border-radius:3px;background:#345470}
.rack-unit{position:relative;height:26px;margin-bottom:5px;border:1px solid rgba(255,255,255,.055);border-radius:4px;background:#102b44}
.rack-unit:last-child{margin-bottom:0}
.rack-status{position:absolute;left:8px;top:50%;width:5px;height:5px;transform:translateY(-50%);border-radius:50%;background:var(--green,#3f9b72);opacity:.42;box-shadow:0 0 8px rgba(63,155,114,.7)}
.rack-unit i{position:absolute;right:10px;width:22px;height:2px;background:#34536c}.rack-unit i:nth-of-type(1){top:9px}.rack-unit i:nth-of-type(2){top:15px}
.rack-unit b{position:absolute;right:38px;top:9px;width:10px;height:8px;border:1px solid #35546d}

.mini-tech-icon{position:absolute;z-index:10;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.105);border-radius:14px;color:var(--blue,#3f82d1);background:rgba(8,30,52,.90);box-shadow:0 17px 38px rgba(0,0,0,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease,scale .3s ease}
.mini-tech-icon:hover{scale:1.11;color:#fff;border-color:rgba(63,130,209,.50);background:var(--blue,#3f82d1);box-shadow:0 20px 45px rgba(63,130,209,.22)}
.tech-cloud{right:6px;top:8px}.tech-security{left:11px;top:72px;color:var(--purple,#7357d9)}.tech-database{left:22px;bottom:73px;color:#9c83ff}.tech-code{right:118px;bottom:0;color:var(--green,#3f9b72)}

.digital-connections{position:absolute;inset:0;pointer-events:none}
.digital-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(63,130,209,.50),transparent);transform-origin:left center}
.line-a{left:53px;top:93px;width:105px;transform:rotate(18deg)}.line-b{right:49px;top:68px;width:92px;transform:rotate(92deg)}.line-c{left:63px;bottom:91px;width:156px;transform:rotate(-9deg)}
.digital-pulse{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0;background:var(--blue,#3f82d1);box-shadow:0 0 12px rgba(63,130,209,.9)}
.about-hero-world.world-hovered .digital-pulse-a{animation:digitalPulseA 2.2s linear infinite}
.about-hero-world.world-hovered .digital-pulse-b{animation:digitalPulseB 2.7s linear infinite}
.about-hero-world.world-hovered .digital-pulse-c{animation:digitalPulseC 2.5s linear infinite}
@keyframes digitalPulseA{0%{left:51px;top:91px;opacity:0}15%{opacity:1}100%{left:155px;top:124px;opacity:0}}
@keyframes digitalPulseB{0%{right:48px;top:66px;opacity:0}15%{opacity:1}100%{right:49px;top:158px;opacity:0}}
@keyframes digitalPulseC{0%{left:62px;bottom:89px;opacity:0}15%{opacity:1}100%{left:215px;bottom:111px;opacity:0}}

.world-bridge{position:absolute;z-index:11;left:43%;top:55%;width:142px;height:70px;pointer-events:none}
.bridge-line{position:absolute;left:0;top:36px;width:100%;height:1px;transform:rotate(-8deg);transform-origin:left center;background:linear-gradient(90deg,rgba(246,169,27,.65),rgba(63,130,209,.55),transparent)}
.bridge-energy{position:absolute;left:0;top:33px;width:6px;height:6px;border-radius:50%;opacity:0;background:var(--orange);box-shadow:0 0 12px rgba(246,169,27,.85)}
.about-hero-world.world-hovered .bridge-energy-one{animation:bridgeTravel 2.6s linear infinite}
.about-hero-world.world-hovered .bridge-energy-two{animation:bridgeTravel 2.6s linear 1.3s infinite}
@keyframes bridgeTravel{0%{transform:translate(0,0);opacity:0;background:var(--orange)}15%{opacity:1}65%{background:var(--blue,#3f82d1)}100%{transform:translate(136px,-18px);opacity:0;background:var(--blue,#3f82d1)}}

.hero-mini-particles{position:absolute;z-index:12;inset:0;pointer-events:none}
.mini-particle{position:absolute;width:4px;height:4px;border-radius:50%;opacity:.26;background:var(--orange);box-shadow:0 0 9px rgba(246,169,27,.8)}
.about-hero-world.world-hovered .mini-particle{animation:miniParticleFloat 4s ease-in-out infinite}
.particle-one{left:16%;top:13%}.particle-two{left:43%;top:9%;background:var(--blue,#3f82d1);animation-delay:.6s!important}.particle-three{right:8%;top:38%;background:var(--purple,#7357d9);animation-delay:1.1s!important}.particle-four{left:33%;bottom:12%;background:var(--green,#3f9b72);animation-delay:1.8s!important}.particle-five{right:28%;bottom:20%;background:var(--blue,#3f82d1);animation-delay:2.4s!important}
@keyframes miniParticleFloat{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-9px);opacity:.9}}

.about-hero-world.civil-focus .mini-house{filter:brightness(1.13) saturate(1.06);transform:translateY(-4px)}
.about-hero-world.civil-focus .window-glass{background:linear-gradient(135deg,rgba(87,174,214,.92),rgba(246,169,27,.18));box-shadow:inset 0 0 16px rgba(246,169,27,.10)}
.about-hero-world.civil-focus .entry-light,.about-hero-world.civil-focus .garage-light,.about-hero-world.civil-focus .garden-light::after{opacity:1;box-shadow:0 0 16px rgba(246,169,27,.78)}
.about-hero-world.civil-focus .tree-crown{filter:brightness(1.13) saturate(1.14)}
.about-hero-world.civil-focus .civil-point{opacity:1}
.about-hero-world.civil-focus .hero-world-light{background:radial-gradient(circle,rgba(246,169,27,.18),rgba(246,169,27,.045) 44%,transparent 70%)}

.about-hero-world.it-focus .monitor-screen{filter:brightness(1.17) saturate(1.12);border-color:#254f73;box-shadow:0 28px 70px rgba(63,130,209,.17),0 0 0 1px rgba(83,171,229,.22)}
.about-hero-world.it-focus .mini-server-rack{filter:brightness(1.18) saturate(1.12);box-shadow:0 25px 58px rgba(63,130,209,.16)}
.about-hero-world.it-focus .rack-status{opacity:1;box-shadow:0 0 11px rgba(63,155,114,.9)}
.about-hero-world.it-focus .hero-world-light{background:radial-gradient(circle,rgba(63,130,209,.19),rgba(115,87,217,.07) 44%,transparent 70%)}

@media(max-width:1180px){
.about-hero-inner{grid-template-columns:minmax(0,1fr) minmax(400px,.84fr)!important;gap:42px!important}
.about-hero-world{scale:.92;transform-origin:right center}
}
@media(max-width:980px){
.about-hero{min-height:auto!important}
.about-hero-inner{width:min(calc(100% - 36px),1280px)!important;min-height:auto!important;grid-template-columns:1fr!important;gap:18px!important;padding-top:132px!important;padding-bottom:52px!important}
.about-hero-content{max-width:820px}
.about-hero-world{justify-self:center!important;width:625px!important;max-width:625px!important;min-height:590px;scale:.91;transform-origin:center;margin-top:-14px;margin-bottom:-28px}
}
@media(max-width:700px){
.about-hero-inner{width:calc(100% - 30px)!important;padding-top:118px!important;padding-bottom:36px!important}
.about-hero-content h1{font-size:clamp(50px,14vw,70px)!important;letter-spacing:-2px!important}
.about-hero-content>p{font-size:13px!important;line-height:1.78!important}
.about-hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
.about-hero-actions .btn{width:100%}
.about-hero-world{width:625px!important;max-width:none!important;left:50%;margin-left:-312.5px;min-height:520px;scale:.72;transform-origin:center top;margin-top:-15px;margin-bottom:-125px}
}
@media(max-width:520px){.about-hero-world{scale:.61;margin-top:-18px;margin-bottom:-185px}}
@media(max-width:390px){.about-hero-world{scale:.55;margin-top:-24px;margin-bottom:-220px}}

@media(pointer:coarse){
.world-depth{translate:0 0!important}
.hero-world-light{display:none}
}

@media(prefers-reduced-motion:reduce){
.world-depth{translate:0 0!important;transition:none!important}
.dashboard-chart polyline{stroke-dashoffset:0!important;animation:none!important}
.digital-pulse,.bridge-energy,.mini-particle{animation:none!important}
}
/* =========================================================
   SEPARATED CIVIL + IT MINIATURES
========================================================= */

.about-hero-world {
    position: relative;
    width: 100% !important;
    max-width: 680px !important;
    min-height: 560px;
    justify-self: end !important;
    display: block !important;
    isolation: isolate;
}

.hero-miniature-layout {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 560px;

    display: grid;

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

    gap: 16px;

    align-items: center;
}


/* =========================================================
   PANELS
========================================================= */

.miniature-panel {
    position: relative;

    min-width: 0;
    height: 470px;

    border-radius: 28px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(8,28,48,.18);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}

.miniature-panel-bg {
    position: absolute;

    inset: 0;

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

    background-size:
        32px 32px;

    opacity: .7;

    pointer-events: none;
}


/* CIVIL */

.civil-miniature-panel:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(246,169,27,.25);

    box-shadow:
        0 24px 55px
        rgba(246,169,27,.08);

    background:
        rgba(246,169,27,.025);
}


/* IT */

.it-miniature-panel:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(63,130,209,.28);

    box-shadow:
        0 24px 55px
        rgba(63,130,209,.10);

    background:
        rgba(63,130,209,.025);
}



/* =========================================================
   CIVIL SCENE
========================================================= */

.civil-mini-scene {
    position: absolute;

    inset: 0;

    transform-style:
        preserve-3d;
}

.civil-ground {
    position: absolute;

    left: 50%;
    bottom: 48px;

    width: 270px;
    height: 100px;

    transform:
        translateX(-50%);
}

.civil-ground-top {
    position: absolute;

    width: 100%;
    height: 86px;

    clip-path:
        polygon(
            50% 0,
            100% 32%,
            50% 100%,
            0 65%
        );

    background:
        linear-gradient(
            135deg,
            #2e5d4e,
            #173b35 55%,
            #18364a
        );

    border:
        1px solid
        rgba(255,255,255,.08);
}

.civil-ground-front {
    position: absolute;

    left: 0;
    top: 57px;

    width: 50%;
    height: 34px;

    clip-path:
        polygon(
            0 0,
            100% 100%,
            100% 75%,
            0 0
        );

    background:
        #0a202c;
}


/* driveway */

.civil-driveway {
    position: absolute;

    right: 23px;
    top: 37px;

    width: 110px;
    height: 28px;

    transform:
        rotate(16deg);

    border-radius: 3px;

    background:
        #596267;
}


/* pathway */

.civil-path {
    position: absolute;

    left: 88px;
    top: 49px;

    display: flex;

    gap: 4px;

    transform:
        rotate(15deg);
}

.civil-path span {
    width: 20px;
    height: 11px;

    background:
        #afa895;

    border-radius: 2px;
}


/* =========================================================
   HOUSE
========================================================= */

.mini-house {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 82px;

    width: 205px;
    height: 280px;

    transform:
        translateX(-50%);

    transition:
        transform .4s ease,
        filter .4s ease;
}

.civil-miniature-panel:hover
.mini-house {
    transform:
        translateX(-50%)
        translateY(-5px);

    filter:
        brightness(1.08)
        saturate(1.08);
}


/* roof */

.house-roof {
    position: absolute;

    left: -11px;
    top: 0;

    width: 228px;
    height: 80px;
}

.roof-main {
    position: absolute;

    left: 0;
    top: 30px;

    width: 136px;
    height: 56px;

    clip-path:
        polygon(
            50% 0,
            100% 58%,
            100% 100%,
            0 100%,
            0 58%
        );

    background:
        linear-gradient(
            145deg,
            #404a53,
            #202b34
        );
}

.roof-side {
    position: absolute;

    right: 0;
    top: 39px;

    width: 106px;
    height: 47px;

    clip-path:
        polygon(
            0 0,
            100% 35%,
            84% 100%,
            0 100%
        );

    background:
        #293641;
}

.roof-ridge {
    position: absolute;

    left: 67px;
    top: 29px;

    width: 118px;
    height: 3px;

    transform:
        rotate(10deg);

    transform-origin:
        left;

    background:
        #879097;
}

.roof-chimney {
    position: absolute;

    right: 52px;
    top: 12px;

    width: 18px;
    height: 36px;

    background:
        #5f584f;
}

.roof-chimney span {
    position: absolute;

    left: -2px;
    top: -4px;

    width: 22px;
    height: 6px;

    background:
        #81786c;
}


/* upper */

.house-upper {
    position: absolute;

    left: 7px;
    top: 74px;

    width: 190px;
    height: 92px;

    background:
        linear-gradient(
            110deg,
            #ded8ca,
            #9c9c95
        );
}


/* windows */

.house-window {
    position: absolute;

    overflow: hidden;

    border:
        3px solid
        #59656a;

    background:
        #0c324a;

    transition:
        box-shadow .35s ease,
        filter .35s ease;
}

.window-glass {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            #477d9b,
            #0e3148
        );

    transition:
        background .35s ease;
}

.upper-window-left {
    left: 18px;
    top: 21px;

    width: 47px;
    height: 49px;
}

.upper-window-right {
    right: 20px;
    top: 21px;

    width: 47px;
    height: 49px;
}

.window-frame-v {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 0;

    width: 2px;
    height: 100%;

    transform:
        translateX(-50%);

    background:
        #748088;
}

.window-frame-h {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 0;

    width: 100%;
    height: 2px;

    transform:
        translateY(-50%);

    background:
        #748088;
}


/* balcony */

.house-balcony {
    position: absolute;

    z-index: 7;

    left: 66px;
    top: 57px;

    width: 67px;
    height: 37px;
}

.balcony-floor {
    position: absolute;

    left: -7px;
    bottom: 0;

    width: 80px;
    height: 6px;

    background:
        #878781;
}

.balcony-glass {
    position: absolute;

    bottom: 6px;

    width: 67px;
    height: 23px;

    display: grid;

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

    border:
        1px solid
        rgba(170,214,235,.35);

    background:
        rgba(68,136,170,.14);
}

.balcony-glass span {
    border-right:
        1px solid
        rgba(180,216,233,.27);
}


/* lower */

.house-lower {
    position: absolute;

    left: 0;
    top: 164px;

    width: 201px;
    height: 101px;

    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            #ddd8cb,
            #9f9e96
        );
}

.house-stone-wall {
    position: absolute;

    left: 0;
    top: 0;

    width: 40px;
    height: 100%;

    background:
        #625f58;
}

.house-stone-wall span {
    display: block;

    height: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}

.house-entry {
    position: absolute;

    left: 50px;
    bottom: 0;

    width: 42px;
    height: 82px;
}

.entry-canopy {
    position: absolute;

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

    width: 56px;
    height: 7px;

    background:
        #414b52;
}

.house-door {
    position: absolute;

    left: 4px;
    bottom: 0;

    width: 34px;
    height: 72px;

    background:
        linear-gradient(
            90deg,
            #765941,
            #47362a
        );
}

.house-door span {
    position: absolute;

    left: 5px;
    top: 7px;

    width: 23px;
    height: 25px;

    background:
        #1b4b65;
}

.entry-light {
    position: absolute;

    right: -7px;
    top: 9px;

    width: 5px;
    height: 7px;

    border-radius: 2px;

    background:
        var(--orange);

    opacity: .45;

    transition:
        opacity .3s ease,
        box-shadow .3s ease;
}

.ground-window {
    left: 103px;
    top: 20px;

    width: 41px;
    height: 44px;
}

.house-garage {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 53px;
    height: 77px;
}

.garage-door {
    position: absolute;

    bottom: 0;

    width: 53px;
    height: 61px;

    border:
        2px solid
        #5d6569;

    background:
        #535d62;
}

.garage-door span {
    display: block;

    height: 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}

.garage-light {
    position: absolute;

    left: 50%;
    top: 4px;

    width: 12px;
    height: 3px;

    transform:
        translateX(-50%);

    background:
        #ffc94d;

    opacity: .4;

    transition:
        .3s ease;
}

.house-foundation {
    position: absolute;

    left: -6px;
    bottom: 3px;

    width: 213px;
    height: 10px;

    background:
        #555e62;
}


/* =========================================================
   TREES
========================================================= */

.mini-tree {
    position: absolute;

    width: 58px;
    height: 105px;
}

.tree-one {
    left: 16px;
    bottom: 70px;
}

.tree-two {
    right: 10px;
    bottom: 66px;

    transform:
        scale(.8);
}

.tree-trunk {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 7px;
    height: 45px;

    transform:
        translateX(-50%);

    background:
        #584432;
}

.tree-crown {
    position: absolute;

    border-radius:
        55% 45%
        52% 48%;

    background:
        linear-gradient(
            145deg,
            #4ca276,
            #255f49
        );

    transition:
        filter .3s ease;
}

.crown-a {
    width: 44px;
    height: 42px;

    left: 7px;
    top: 15px;
}

.crown-b {
    width: 40px;
    height: 38px;

    left: 20px;
    top: 35px;
}

.crown-c {
    width: 35px;
    height: 34px;

    left: -1px;
    top: 38px;
}


/* garden lights */

.garden-light {
    position: absolute;

    bottom: 64px;

    width: 4px;
    height: 22px;

    background:
        #4d585b;
}

.garden-light::after {
    content: "";

    position: absolute;

    left: 50%;
    top: -4px;

    width: 8px;
    height: 6px;

    transform:
        translateX(-50%);

    background:
        var(--orange);

    border-radius: 3px;

    opacity: .4;

    transition:
        .3s ease;
}

.garden-light-a {
    left: 87px;
}

.garden-light-b {
    right: 73px;
}


/* Civil hover lighting */

.civil-miniature-panel:hover
.window-glass {
    background:
        linear-gradient(
            135deg,
            #5ca8cd,
            rgba(246,169,27,.18)
        );
}

.civil-miniature-panel:hover
.entry-light,

.civil-miniature-panel:hover
.garage-light,

.civil-miniature-panel:hover
.garden-light::after {
    opacity: 1;

    box-shadow:
        0 0 14px
        rgba(246,169,27,.65);
}

.civil-miniature-panel:hover
.tree-crown {
    filter:
        brightness(1.1)
        saturate(1.1);
}



/* =========================================================
   CONNECTOR
========================================================= */

.miniature-connector {
    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}

.connector-line {
    width: 1px;
    height: 165px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(246,169,27,.32),
            rgba(63,130,209,.32),
            transparent
        );
}

.connector-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.connector-dot-a {
    top: 40%;

    background:
        var(--orange);

    box-shadow:
        0 0 12px
        rgba(246,169,27,.7);
}

.connector-dot-b {
    bottom: 39%;

    background:
        var(--blue,#3f82d1);

    box-shadow:
        0 0 12px
        rgba(63,130,209,.7);
}



/* =========================================================
   IT SCENE
========================================================= */

.it-mini-scene {
    position: absolute;

    inset: 0;

    transform-style:
        preserve-3d;
}


/* monitor */

.digital-monitor {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 76px;

    width: 220px;
    height: 205px;

    transform:
        translateX(-50%);

    transition:
        transform .4s ease,
        filter .4s ease;
}

.it-miniature-panel:hover
.digital-monitor {
    transform:
        translateX(-50%)
        translateY(-5px);

    filter:
        brightness(1.08)
        saturate(1.08);
}

.monitor-screen {
    position: absolute;

    width: 220px;
    height: 145px;

    overflow: hidden;

    border:
        5px solid
        #192f44;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #102e4a,
            #071d34
        );

    box-shadow:
        0 25px 50px
        rgba(0,0,0,.25);

    transition:
        box-shadow .35s ease,
        border-color .35s ease;
}

.it-miniature-panel:hover
.monitor-screen {
    border-color:
        #27577e;

    box-shadow:
        0 28px 60px
        rgba(63,130,209,.15);
}

.monitor-topbar {
    height: 22px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        0 9px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.monitor-topbar span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #4f6577;
}

.monitor-topbar span:first-child {
    background:
        var(--orange);
}

.monitor-topbar span:nth-child(2) {
    background:
        var(--green,#3f9b72);
}

.monitor-topbar span:nth-child(3) {
    background:
        var(--blue,#3f82d1);
}

.monitor-sidebar {
    position: absolute;

    left: 0;
    top: 22px;
    bottom: 0;

    width: 32px;

    padding-top: 15px;

    border-right:
        1px solid
        rgba(255,255,255,.05);

    background:
        rgba(0,0,0,.11);
}

.monitor-sidebar i {
    display: block;

    width: 13px;
    height: 4px;

    margin:
        0 auto 12px;

    background:
        #315069;

    border-radius: 3px;
}

.monitor-sidebar i:first-child {
    background:
        var(--blue,#3f82d1);
}

.monitor-dashboard {
    position: absolute;

    left: 43px;
    right: 10px;

    top: 32px;
    bottom: 10px;
}

.dashboard-cards {
    display: grid;

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

    gap: 5px;
}

.dashboard-cards span {
    height: 22px;

    border-radius: 5px;

    background:
        #12344f;
}

.dashboard-chart {
    position: relative;

    height: 58px;

    margin-top: 8px;

    border-radius: 6px;

    overflow: hidden;

    background:
        rgba(0,0,0,.14);

    border:
        1px solid
        rgba(255,255,255,.05);
}

.dashboard-chart svg {
    position: absolute;

    inset:
        9px 6px;

    width:
        calc(100% - 12px);

    height:
        calc(100% - 18px);
}

.dashboard-chart polyline {
    fill: none;

    stroke:
        #58a6e5;

    stroke-width: 2;

    vector-effect:
        non-scaling-stroke;
}

.dashboard-lines {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 6px;

    margin-top: 8px;
}

.dashboard-lines span {
    height: 14px;

    background:
        #173953;

    border-radius: 4px;
}

.monitor-neck {
    position: absolute;

    left: 50%;
    top: 144px;

    width: 14px;
    height: 40px;

    transform:
        translateX(-50%);

    background:
        #354f63;
}

.monitor-base {
    position: absolute;

    left: 50%;
    bottom: 9px;

    width: 84px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #1b3246;
}


/* =========================================================
   SERVER
========================================================= */

.mini-server-rack {
    position: absolute;

    right: 18px;
    bottom: 48px;

    width: 92px;

    padding: 8px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #132f48,
            #071c31
        );

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.24);

    transition:
        filter .35s ease,
        box-shadow .35s ease;
}

.it-miniature-panel:hover
.mini-server-rack {
    filter:
        brightness(1.12);

    box-shadow:
        0 24px 50px
        rgba(63,130,209,.14);
}

.server-unit {
    position: relative;

    height: 24px;

    margin-bottom: 5px;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius: 4px;

    background:
        #102b44;
}

.server-unit:last-child {
    margin-bottom: 0;
}

.server-unit > span {
    position: absolute;

    left: 7px;
    top: 50%;

    width: 5px;
    height: 5px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--green,#3f9b72);

    opacity: .45;

    transition:
        opacity .3s ease,
        box-shadow .3s ease;
}

.it-miniature-panel:hover
.server-unit > span {
    opacity: 1;

    box-shadow:
        0 0 8px
        rgba(63,155,114,.8);
}

.server-unit i {
    position: absolute;

    right: 9px;

    width: 21px;
    height: 2px;

    background:
        #36546b;
}

.server-unit i:nth-of-type(1) {
    top: 8px;
}

.server-unit i:nth-of-type(2) {
    top: 14px;
}


/* =========================================================
   IT ICONS
========================================================= */

.mini-tech-icon {
    position: absolute;

    z-index: 8;

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 13px;

    background:
        rgba(8,30,52,.92);

    color:
        var(--blue,#3f82d1);

    box-shadow:
        0 15px 32px
        rgba(0,0,0,.20);

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.mini-tech-icon:hover {
    transform:
        translateY(-5px);

    color:
        #fff;

    background:
        var(--blue,#3f82d1);

    box-shadow:
        0 18px 35px
        rgba(63,130,209,.20);
}

.tech-cloud {
    right: 17px;
    top: 18px;
}

.tech-shield {
    left: 15px;
    top: 50px;

    color:
        var(--purple,#7357d9);
}

.tech-database {
    left: 23px;
    bottom: 58px;

    color:
        #9b82f2;
}

.tech-code {
    right: 117px;
    bottom: 20px;

    color:
        var(--green,#3f9b72);
}


/* network */

.it-network {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.network-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(63,130,209,.38),
            transparent
        );
}

.network-one {
    left: 55px;
    top: 80px;

    width: 95px;

    transform:
        rotate(13deg);
}

.network-two {
    right: 38px;
    top: 85px;

    width: 93px;

    transform:
        rotate(88deg);
}

.network-three {
    left: 65px;
    bottom: 85px;

    width: 115px;

    transform:
        rotate(-8deg);
}



/* =========================================================
   HERO CURSOR LIGHT
========================================================= */

.hero-world-light {
    position: absolute;

    z-index: 0;

    width: 380px;
    height: 380px;

    left:
        var(--world-x,50%);

    top:
        var(--world-y,50%);

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;

    filter:
        blur(16px);

    background:
        radial-gradient(
            circle,
            rgba(246,169,27,.12),
            rgba(63,130,209,.07) 45%,
            transparent 70%
        );

    transition:
        opacity .3s ease;
}

.about-hero-world.world-hovered
.hero-world-light {
    opacity: 1;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px) {

    .about-hero-inner {
        grid-template-columns:
            1fr !important;
    }

    .about-hero-world {
        justify-self:
            center !important;

        max-width:
            720px !important;
    }

}


@media (max-width: 760px) {

    .hero-miniature-layout {
        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    .miniature-panel {
        width:
            min(100%, 420px);

        height:
            430px;

        margin-inline:
            auto;
    }


    .miniature-connector {
        height:
            42px;
    }


    .connector-line {
        width:
            150px;

        height:
            1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(246,169,27,.30),
                rgba(63,130,209,.30),
                transparent
            );
    }


    .connector-dot-a {
        top:
            50%;

        left:
            calc(50% - 60px);

        transform:
            translateY(-50%);
    }


    .connector-dot-b {
        top:
            50%;

        left:
            calc(50% + 54px);

        bottom:
            auto;

        transform:
            translateY(-50%);
    }


    .about-hero-world {
        min-height:
            auto;
    }

}


@media (max-width: 520px) {

    .miniature-panel {
        height:
            400px;

        border-radius:
            22px;
    }


    .civil-mini-scene,
    .it-mini-scene {
        transform:
            scale(.90);

        transform-origin:
            center;
    }

}


@media (max-width: 390px) {

    .civil-mini-scene,
    .it-mini-scene {
        transform:
            scale(.82);

        transform-origin:
            center;
    }

}


/* Touch devices: no parallax movement */

@media (pointer: coarse) {

    .world-depth {
        translate:
            0 0 !important;
    }


    .hero-world-light {
        display:
            none;
    }

}
/* =========================================================
   ABOUT HERO — WIDER DESKTOP ILLUSTRATION
   ========================================================= */

@media (min-width: 1101px) {

    /* Give the right side more room */
    .about-hero-inner {
        width: min(calc(100% - 64px), 1440px);
        max-width: 1440px;

        grid-template-columns:
            minmax(480px, 0.88fr)
            minmax(700px, 1.12fr);

        gap: clamp(45px, 5vw, 85px);
    }


    /* Main Civil + IT illustration wrapper */
    #aboutHeroWorld,
    .about-hero-world {
        width: 100%;
        max-width: 760px;
        min-width: 680px;

        min-height: 610px;

        justify-self: end;
    }


    /* Two individual panels */
    #aboutHeroWorld .civil-miniature-panel,
    #aboutHeroWorld .it-miniature-panel {
        width: 43%;
    }


    /* Give some proper breathing room between them */
    #aboutHeroWorld .civil-miniature-panel {
        left: 1%;
    }

    #aboutHeroWorld .it-miniature-panel {
        right: 1%;
    }

}
/* =========================================================
   FLOATING CONTACT WIDGET
========================================================= */

.floating-contact{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:3000;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    font-family:"Poppins",sans-serif;
}


/* =========================================================
   OPTIONS CONTAINER
========================================================= */

.floating-contact-menu{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:11px;

    margin-bottom:14px;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(18px)
        scale(.94);

    pointer-events:none;

    transition:
        opacity .28s ease,
        transform .32s cubic-bezier(.22,.61,.36,1),
        visibility .28s ease;
}


/* OPEN STATE */

.floating-contact.open
.floating-contact-menu{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events:auto;
}


/* =========================================================
   INDIVIDUAL CONTACT OPTION
========================================================= */

.floating-contact-option{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;

    color:#10233d;
    text-decoration:none;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* stagger animation */

.floating-contact-option:nth-child(1){
    transition-delay:.02s;
}

.floating-contact-option:nth-child(2){
    transition-delay:.05s;
}

.floating-contact-option:nth-child(3){
    transition-delay:.08s;
}


.floating-contact-option:hover{
    transform:translateX(-5px);
}


/* =========================================================
   TEXT LABEL
========================================================= */

.floating-contact-label{
    min-height:38px;

    display:flex;
    align-items:center;

    padding:0 13px;

    border-radius:9px;

    color:#10233d;

    background:#ffffff;

    border:1px solid rgba(13,35,66,.10);

    box-shadow:
        0 10px 30px rgba(13,35,66,.14);

    font-size:9px;
    font-weight:800;

    letter-spacing:.55px;

    white-space:nowrap;
}


/* =========================================================
   SMALL ICON BUTTONS
========================================================= */

.floating-contact-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#ffffff;

    font-size:16px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.floating-contact-option:hover
.floating-contact-icon{
    transform:scale(1.08);

    box-shadow:
        0 16px 34px rgba(0,0,0,.24);
}


/* EMAIL */

.floating-contact-icon.email{
    background:
        linear-gradient(
            135deg,
            #3f82d1,
            #245fa5
        );
}


/* WHATSAPP */

.floating-contact-icon.whatsapp{
    background:
        linear-gradient(
            135deg,
            #25d366,
            #128c4a
        );
}


/* CALL */

.floating-contact-icon.call{
    background:
        linear-gradient(
            135deg,
            #3f9b72,
            #257353
        );
}


/* =========================================================
   MAIN GREEN BUTTON
========================================================= */

.floating-contact-toggle{
    position:relative;

    width:62px;
    height:62px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;

    cursor:pointer;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #36c879,
            #169453
        );

    box-shadow:
        0 17px 40px rgba(22,148,83,.34);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}


.floating-contact-toggle:hover{
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 22px 46px rgba(22,148,83,.42);
}


/* subtle pulse */

.floating-contact-toggle::before{
    content:"";

    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:
        1px solid rgba(54,200,121,.32);

    animation:
        floatingContactPulse
        2.4s ease-out infinite;
}


@keyframes floatingContactPulse{

    0%{
        opacity:.8;
        transform:scale(.88);
    }

    70%{
        opacity:0;
        transform:scale(1.25);
    }

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

}


/* =========================================================
   ICON SWITCH
========================================================= */

.contact-open-icon,
.contact-close-icon{
    position:absolute;

    transition:
        opacity .25s ease,
        transform .3s ease;
}


.contact-open-icon{
    opacity:1;
    transform:
        rotate(0deg)
        scale(1);
}


.contact-close-icon{
    opacity:0;
    transform:
        rotate(-90deg)
        scale(.7);
}


.floating-contact.open
.contact-open-icon{
    opacity:0;

    transform:
        rotate(90deg)
        scale(.7);
}


.floating-contact.open
.contact-close-icon{
    opacity:1;

    transform:
        rotate(0deg)
        scale(1);
}


/* =========================================================
   DARK MODE
========================================================= */

@media(prefers-color-scheme:dark){

    .floating-contact-label{

        color:#f5f8fb;

        background:#0d213a;

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

        box-shadow:
            0 10px 30px rgba(0,0,0,.28);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

    .floating-contact{
        right:18px;
        bottom:18px;
    }


    .floating-contact-toggle{
        width:56px;
        height:56px;

        font-size:15px;
    }


    .floating-contact-icon{
        width:41px;
        height:41px;

        flex-basis:41px;

        font-size:14px;
    }


    .floating-contact-label{
        min-height:36px;

        padding:0 11px;

        font-size:8px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

    .floating-contact{
        right:14px;
        bottom:14px;
    }


    .floating-contact-label{
        display:none;
    }


    .floating-contact-menu{
        gap:9px;
    }

}


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

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

    .floating-contact-toggle::before{
        animation:none;
    }


    .floating-contact-menu,
    .floating-contact-option,
    .floating-contact-toggle,
    .floating-contact-icon,
    .contact-open-icon,
    .contact-close-icon{
        transition:none;
    }

}