/* =========================================================
   VORTEX ELITE SOLUTIONS — homepage stylesheet
   Palette: Primary Blue #2C4B78, Primary Plum #963D68, White only.
   Matte corporate / architectural-editorial direction — no dark
   backgrounds, no glow, no neon, no glass-everywhere. Every
   section below uses a different background composition on
   purpose (circles / diagonal wedge / blueprint grid / editorial
   whitespace / paper layers / organic blob / thin stripes /
   plum feature panel) so no two sections look the same.
========================================================= */
:root {
    --white: #FFFFFF;
    --paper: #FBFAFC;
    --ink: #1F3557;
    --muted: #5B6B80;
    --blue: #2C4B78;
    --blue-deep: #1F3557;
    --blue-soft: #7C93B4;
    --plum: #963D68;
    --plum-deep: #7A3055;
    --plum-soft: #C98CAA;
    --line: #E4E7ED;
    --chip-bg: #F3F5F8;
    --font-display: 'Fraunces',serif;
    --font-body: 'Inter',sans-serif;
    --font-mono: 'IBM Plex Mono',monospace;
    --ease-elite: cubic-bezier(.16,.84,.32,1);
}

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

html {
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    overflow-x: hidden;
}

::selection {
    background: var(--plum);
    color: #fff;
}

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

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(1.4rem,5vw,3.5rem);
}

h1, h2, h3, h4, h5, h6, p, span, a, li {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

.word {
    display: inline-block;
    white-space: nowrap;
}

.ch {
    display: inline-block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
}

@keyframes livePulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(150,61,104,0.35);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(150,61,104,0);
    }
}

@keyframes floatY {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes vx-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes vx-spin-rev {
    to {
        transform: rotate(-360deg);
    }
}

/* ============ HERO — large brand statement, bold + simple ============ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg,#FFFFFF 0%,#F7F8FB 100%);
    overflow: hidden;
    padding-top: 75px;
}

#heroCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6;
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255,255,255,0.1), rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.94) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 6rem 1.5rem 3.4rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.2rem;
    background: #fff;
    border: 1.5px solid var(--blue);
    border-radius: 100px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--blue);
    margin-bottom: 2rem;
    opacity: 0;
}

    .hero-badge i {
        color: var(--plum);
    }

.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-size: clamp(2.4rem,6vw,4.6rem);
    color: var(--blue-deep);
    max-width: 900px;
    margin: 0 auto;
    opacity: 0;
}

    .hero-title .grad {
        font-style: italic;
        font-weight: 500;
        color: var(--plum);
    }

.hero-sub {
    margin: 1.6rem auto 0;
    max-width: 600px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--muted);
    opacity: 0;
}

.hero-ctas {
    margin-top: 2.4rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.btn-primary {
    background: var(--plum);
    color: #fff;
    border: 1.5px solid var(--plum);
}

    .btn-primary:hover {
        background: var(--plum-deep);
        border-color: var(--plum-deep);
    }

.btn-ghost {
    background: transparent;
    color: var(--blue);
    border: 1.5px solid var(--blue);
}

    .btn-ghost:hover {
        background: var(--blue);
        color: #fff;
    }

.hero-stats-wrap {
    position: relative;
    z-index: 2;
    max-width: 1020px;
    margin: 2.8rem auto 0;
    padding: 0 1.4rem 30px;
    opacity: 0;
}

.hero-stats-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

    .hero-stats-eyebrow .pulse-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--plum);
        animation: livePulse 1.8s ease-in-out infinite;
    }

.hero-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(0.8rem,2vw,1.15rem);
}

.stat-cell {
    position: relative;
    text-align: center;
    padding: 1.8rem 1rem 1.5rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px -22px rgba(44,75,120,0.25);
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

    .stat-cell::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--plum);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s ease;
    }

    .stat-cell:hover::before {
        transform: scaleX(1);
    }

    .stat-cell:hover {
        transform: translateY(-4px);
        border-color: var(--blue);
    }

.stat-icon {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: 1rem;
}

.stat-value {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--blue-deep);
}

.stat-label {
    position: relative;
    z-index: 2;
    font-size: 0.68rem;
    color: var(--muted);
    margin-top: 0.3rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width:640px) {
    .hero-stats {
        grid-template-columns: repeat(2,1fr);
    }
}

/* =========================================================
   WHO WE ARE — premium brochure. Large overlapping matte
   circles (Blue top-right, Plum bottom-left), opacity only,
   no blur, no glow.
========================================================= */
.vx-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4.5rem);
    background: var(--white);
    isolation: isolate;
    font-family: var(--font-body);
    color: var(--ink);
}

    .vx-section a {
        color: inherit;
    }

    .vx-section ul {
        list-style: none;
    }

    .vx-section :focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px;
        border-radius: 4px;
    }

.vx-blueprint {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(44,75,120,0.07) 0px, rgba(44,75,120,0.07) 1px, transparent 1px, transparent 46px);
    mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 25%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 25%, transparent 82%);
    pointer-events: none;
    z-index: 0;
}

.vx-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.vx-glow--blue {
    width: 52vw;
    height: 52vw;
    top: -18%;
    right: -14%;
    left: auto;
    background: var(--blue);
    opacity: 0.9;
}

.vx-glow--purple {
    width: 46vw;
    height: 46vw;
    bottom: -20%;
    left: -12%;
    background: var(--plum);
    opacity: 0.88;
}

.vx-glow--gold {
    width: 38vw;
    height: 38vw;
    top: 28%;
    left: 38%;
    background: var(--blue);
    opacity: 0.1;
}

.vx-particles {
    display: none;
}

.vx-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(44,75,120,0.4);
}

@keyframes vx-drift {
    0%,100% {
        transform: translateY(0) translateX(0);
        opacity: 0.2;
    }

    50% {
        transform: translateY(-14px) translateX(6px);
        opacity: 0.4;
    }
}

.vx-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 40fr 20fr 40fr;
    align-items: center;
    gap: clamp(1.5rem,3vw,2.5rem);
    max-width: 1680px;
    margin: 0 auto;
}

@media (max-width:1180px) {
    .vx-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "center" "content" "gallery";
    }

    .vx-center {
        grid-area: center;
    }

    .vx-content {
        grid-area: content;
    }

    .vx-gallery {
        grid-area: gallery;
    }
}

.vx-content {
    position: relative;
}

.vx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--plum);
    margin-bottom: 1.4rem;
}

    .vx-eyebrow::before {
        content: "";
        width: 34px;
        height: 2px;
        background: var(--plum);
    }

.vx-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem,3.6vw,3.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--blue-deep);
    margin-bottom: 1.6rem;
}

    .vx-heading em {
        font-style: normal;
        color: var(--plum);
    }

.vx-paragraph {
    font-size: clamp(0.98rem,1vw,1.08rem);
    line-height: 1.75;
    color: var(--ink);
    opacity: 0.78;
    max-width: 46ch;
    margin-bottom: 2.4rem;
    font-weight: 400;
}

.vx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.vx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.7rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--blue);
    background: var(--white);
    border: 1.5px solid var(--blue);
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    transition: background 0.35s var(--ease-elite), color 0.35s var(--ease-elite);
}

    .vx-btn:hover, .vx-btn:focus-visible {
        background: var(--blue);
        color: var(--white);
    }

.vx-btn--primary {
    background: var(--plum);
    border-color: var(--plum);
    color: var(--white);
}

    .vx-btn--primary:hover, .vx-btn--primary:focus-visible {
        background: var(--plum-deep);
        border-color: var(--plum-deep);
        color: var(--white);
    }

.vx-btn .vx-arrow {
    transition: transform 0.4s var(--ease-elite);
    font-size: 1rem;
}

.vx-btn:hover .vx-arrow, .vx-btn:focus-visible .vx-arrow {
    transform: translateX(5px);
}

.vx-values-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.1rem;
}

.vx-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0.7rem 0.9rem;
    max-width: 480px;
}

.vx-value {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    color: var(--ink);
    font-weight: 500;
    padding: 0.55rem 0.9rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(10px);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

    .vx-value:hover {
        border-color: var(--blue);
        transform: translateY(-2px);
    }

.vx-check {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vx-check svg {
        width: 10px;
        height: 10px;
    }

        .vx-check svg path {
            fill: none;
            stroke: var(--plum);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 20;
            stroke-dashoffset: 20;
        }

.vx-center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}

.vx-emblem {
    position: relative;
    width: clamp(210px,16vw,300px);
    height: clamp(210px,16vw,300px);
}

.vx-emblem-glow {
    display: none;
}

.vx-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(44,75,120,0.16);
}

.vx-ring--outer {
    animation: vx-spin 46s linear infinite;
    border-color: rgba(150,61,104,0.45);
}

.vx-ring--mid {
    inset: 11%;
    animation: vx-spin-rev 34s linear infinite;
    border-style: dashed;
    border-color: rgba(44,75,120,0.22);
}

.vx-ring--inner {
    inset: 22%;
    animation: vx-spin 24s linear infinite;
    border-color: rgba(44,75,120,0.14);
}

.vx-emblem-core {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px -8px rgba(44,75,120,0.18);
}

.vx-emblem-mark {
    width: 78%;
    height: 78%;
    object-fit: contain;
    animation: vx-spin 60s linear infinite;
}

.vx-emblem-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--plum);
    top: 2%;
    left: 50%;
}

.vx-emblem-caption {
    position: absolute;
    bottom: -2.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.vx-gallery {
    position: relative;
    min-height: 460px;
}

.vx-panel {
    position: absolute;
    border-radius: 12px;
    border: 1px solid var(--blue);
    background: var(--white);
    box-shadow: 0 10px 26px -16px rgba(44,75,120,0.28);
    overflow: hidden;
    padding: 5px;
    transition: transform 0.5s var(--ease-elite), box-shadow 0.5s var(--ease-elite);
    will-change: transform;
}

    .vx-panel::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 22px 22px 0;
        border-color: transparent var(--plum) transparent transparent;
        pointer-events: none;
    }

    .vx-panel:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 18px 36px -16px rgba(44,75,120,0.32);
    }

.vx-panel-art {
    position: absolute;
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.92) contrast(1.02);
}

.vx-panel-scrim {
    position: absolute;
    inset: 5px;
    border-radius: 8px;
    background: linear-gradient(200deg, transparent 40%, rgba(31,53,87,0.78) 100%);
}

.vx-panel-label {
    position: absolute;
    left: 1.2rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--white);
    z-index: 2;
}

.vx-panel-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

    .vx-panel-icon svg {
        width: 100%;
        height: 100%;
    }

    .vx-panel-icon path, .vx-panel-icon circle, .vx-panel-icon rect, .vx-panel-icon polyline {
        stroke: var(--white);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.3s ease;
    }

.vx-panel:hover .vx-panel-icon path, .vx-panel:hover .vx-panel-icon circle,
.vx-panel:hover .vx-panel-icon rect, .vx-panel:hover .vx-panel-icon polyline {
    stroke: #f0c9d8;
}

.vx-panel--main {
    width: 66%;
    aspect-ratio: 4/5;
    left: 2%;
    top: 4%;
}

.vx-panel--a {
    width: 40%;
    aspect-ratio: 1/1;
    right: 0%;
    top: -2%;
}

.vx-panel--b {
    width: 34%;
    aspect-ratio: 4/3;
    right: 4%;
    bottom: 18%;
}

.vx-panel--c {
    width: 30%;
    aspect-ratio: 1/1;
    left: 30%;
    bottom: -4%;
}

@media (max-width:1180px) {
    .vx-gallery {
        min-height: 420px;
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width:560px) {
    .vx-gallery {
        min-height: 340px;
    }

    .vx-panel-label {
        font-size: 0.68rem;
    }
}

.vx-stats {
    position: relative;
    z-index: 3;
    max-width: 1680px;
    margin: clamp(3rem,6vw,5rem) auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
}

@media (max-width:860px) {
    .vx-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

.vx-stat {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.2rem 1.3rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 8px 22px -16px rgba(44,75,120,0.25);
    text-align: left;
    animation: floatY 8s ease-in-out infinite;
}

    .vx-stat::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--plum);
    }

    .vx-stat:nth-child(2) {
        animation-delay: -2s;
    }

    .vx-stat:nth-child(3) {
        animation-delay: -4s;
    }

    .vx-stat:nth-child(4) {
        animation-delay: -6s;
    }

.vx-stat-number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem,2.4vw,2.1rem);
    color: var(--blue);
}

.vx-stat-label {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: var(--plum);
    margin-top: 0.3rem;
}

/* =========================================================
   MAIN SERVICES OVERVIEW — distinct look #2: diagonal
   architectural division (a single blue wedge bleeding from
   the top-right corner) instead of the circles used above.
========================================================= */
:root {
    --white: #FFFFFF;
    --blue: #2C4B78;
    --blue-deep: #1A3252;
    --purple: #963D68;
    --purple-deep: #6E2A4C;
    --paper: #F6F4F0;
    --ink: #1E2430;
    --ink-soft: #5B6472;
    --line: rgba(30,36,48,0.14);
}

* {
    box-sizing: border-box;
}

.vesd-section {
    position: relative;
    background: var(--paper);
    padding: 120px 6vw 140px;
    overflow: hidden;
    font-family: 'Inter',sans-serif;
    color: var(--ink);
    isolation: isolate;
}

/* ---------- Architectural paper background ---------- */
.vesd-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

    .vesd-bg svg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .vesd-bg .shape-a {
        fill: var(--blue);
        opacity: 0.94;
        animation: driftA 26s ease-in-out infinite;
        transform-origin: center;
    }

    .vesd-bg .shape-b {
        fill: var(--purple);
        opacity: 0.9;
        animation: driftB 30s ease-in-out infinite;
        transform-origin: center;
    }

    .vesd-bg .contour {
        fill: none;
        stroke: var(--ink);
        stroke-opacity: 0.05;
        stroke-width: 1;
    }

@keyframes driftA {
    0%, 100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(0,-14px,0) rotate(0.6deg);
    }
}

@keyframes driftB {
    0%, 100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(10px,10px,0) rotate(-0.5deg);
    }
}

@media (prefers-reduced-motion:reduce) {
    .vesd-bg .shape-a, .vesd-bg .shape-b {
        animation: none;
    }
}

/* ---------- Header ---------- */
/* ---------- Header ---------- */
.vesd-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    margin: 0 0 88px;
}

.vesd-head-text {
    max-width: 620px;
    flex: 1 1 auto;
}

.vesd-head-visual {
    flex: 0 0 auto;
    width: clamp(490px, 35vw, 750px);
    height: clamp(390px, 32vw, 650px);
    overflow: visible; /* allow PNG to extend naturally */
    position: relative;
    opacity: 0;
    transform: translateY(24px);
    animation: headVisualIn .8s cubic-bezier(.16,.8,.24,1) .15s forwards;
}

    .vesd-head-visual img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* preserve PNG without cropping */
        display: block;
    }

@keyframes headVisualIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vesd-head-visual {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1180px) {
    .vesd-head {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 32px;
    }

    .vesd-head-visual {
        width: 100%;
        max-width: 500px;
        height: auto;
        min-height: 360px;
    }
}

@media (max-width: 720px) {
    .vesd-head-visual {
        min-height: 300px;
    }
}
.vesd-eyebrow {
    font-family: 'Space Mono',monospace;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--purple-deep);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

    .vesd-eyebrow::before {
        content: "";
        width: 34px;
        height: 1px;
        background: var(--purple-deep);
    }

.vesd-title {
    font-family: 'Fraunces',serif;
    font-weight: 440;
    font-size: clamp(40px,5.4vw,74px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 26px;
}

    .vesd-title em {
        font-style: italic;
        font-weight: 340;
        color: var(--blue-deep);
    }

.vesd-sub {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 560px;
}

/* ---------- Exhibition grid ---------- */
.vesd-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: 64px;
    gap: 22px;
    max-width: 1440px;
    margin: 0 auto;
}

.vesd-connectors {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

    .vesd-connectors line, .vesd-connectors circle {
        stroke: var(--ink);
        stroke-opacity: 0.16;
        stroke-width: 1;
        stroke-dasharray: 2 5;
    }

    .vesd-connectors circle {
        fill: var(--ink);
        fill-opacity: 0.22;
        stroke: none;
    }

.panel {
    position: relative;
    display: block;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(30,36,48,0.06), 0 14px 30px -20px rgba(30,36,48,0.28);
    overflow: hidden;
    opacity: 0;
    transform: translateY(36px) rotate(var(--rot,0deg));
    transition: transform .7s cubic-bezier(.16,.8,.24,1), box-shadow .5s ease, opacity .7s ease;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    .panel:focus-visible {
        outline: 2px solid var(--white);
        outline-offset: 3px;
        box-shadow: 0 0 0 5px var(--blue-deep);
    }

    .panel.in-view {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot,0deg));
    }

    .panel:hover {
        box-shadow: 0 1px 2px rgba(30,36,48,0.08), 0 30px 46px -22px rgba(30,36,48,0.4);
        transform: translateY(-6px) rotate(var(--rot,0deg));
        z-index: 5;
    }

.panel-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.panel-border {
    position: absolute;
    inset: 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color .6s ease;
    pointer-events: none;
    z-index: 4;
}

.panel:hover .panel-border {
    border-color: rgba(255,255,255,0.55);
}

.panel-img-wrap {
    position: relative;
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
}

.panel:nth-of-type(odd) .panel-img-wrap {
    background: linear-gradient(150deg,var(--purple) 0%,var(--purple-deep) 100%);
}

.panel-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.0);
    transition: transform 1.1s cubic-bezier(.16,.8,.24,1);
}

.panel:hover .panel-img-wrap img {
    transform: scale(1.07);
}

.panel-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(20,24,32,0) 42%,rgba(20,24,32,0.72) 100%);
    z-index: 2;
}

.panel-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-family: 'Space Mono',monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    background: rgba(20,24,32,0.28);
    padding: 5px 10px;
    border-radius: 100px;
    backdrop-filter: none;
}

.panel-copy {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    color: var(--white);
}

.panel-name {
    font-family: 'Fraunces',serif;
    font-weight: 440;
    font-size: 22px;
    line-height: 1.12;
    margin: 0 0 6px;
}

.panel-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s ease, opacity .4s ease, margin .4s ease;
}

.panel:hover .panel-desc {
    max-height: 80px;
    opacity: 1;
    margin-top: 6px;
}

.panel-cta {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono',monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    transform: translateY(14px);
    opacity: 0;
    transition: transform .45s cubic-bezier(.16,.8,.24,1), opacity .4s ease;
}

.panel:hover .panel-cta {
    transform: translateY(0);
    opacity: 1;
}

.panel-cta svg {
    transition: transform .35s ease;
}

.panel:hover .panel-cta svg {
    transform: translateX(4px);
}

.panel-mark {
    position: absolute;
    bottom: 14px;
    right: 16px;
    z-index: 3;
    font-family: 'Space Mono',monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
}

/* ---------- Grid placements (desktop exhibition mosaic) ---------- */
.p1 {
    grid-column: 1/6;
    grid-row: 1/9;
    --rot: -1.1deg;
}

.p2 {
    grid-column: 6/9;
    grid-row: 1/6;
    --rot: 0.8deg;
    margin-top: 26px;
}

.p3 {
    grid-column: 9/13;
    grid-row: 1/7;
    --rot: -0.6deg;
}

.p4 {
    grid-column: 6/9;
    grid-row: 6/11;
    --rot: 1.3deg;
    margin-top: -14px;
}

.p5 {
    grid-column: 1/4;
    grid-row: 9/16;
    --rot: 0.5deg;
    margin-top: -10px;
}

.p6 {
    grid-column: 9/13;
    grid-row: 7/13;
    --rot: -1.4deg;
    margin-top: -8px;
}

.p7 {
    grid-column: 4/7;
    grid-row: 11/16;
    --rot: 0.9deg;
}

.p8 {
    grid-column: 7/10;
    grid-row: 13/19;
    --rot: -0.7deg;
    margin-top: 10px;
}

.p9 {
    grid-column: 10/13;
    grid-row: 13/18;
    --rot: 1.1deg;
}

.p10 {
    grid-column: 1/4;
    grid-row: 16/21;
    --rot: -0.5deg;
    margin-top: 8px;
}

/* fill remaining space so section height is intentional */
.vesd-grid {
    grid-template-rows: repeat(20,64px);
}

@media (max-width:1180px) {
    .vesd-section {
        padding: 90px 5vw 110px;
    }

    .vesd-grid {
        grid-template-columns: repeat(6,1fr);
        grid-auto-rows: 56px;
    }

    .p1 {
        grid-column: 1/5;
        grid-row: 1/7;
        margin-top: 0;
    }

    .p2 {
        grid-column: 5/7;
        grid-row: 1/5;
        margin-top: 0;
    }

    .p3 {
        grid-column: 1/4;
        grid-row: 7/12;
    }

    .p4 {
        grid-column: 4/7;
        grid-row: 5/10;
        margin-top: 0;
    }

    .p5 {
        grid-column: 1/4;
        grid-row: 12/18;
        margin-top: 0;
    }

    .p6 {
        grid-column: 4/7;
        grid-row: 10/15;
        margin-top: 0;
    }

    .p7 {
        grid-column: 1/4;
        grid-row: 18/23;
    }

    .p8 {
        grid-column: 4/7;
        grid-row: 15/21;
        margin-top: 0;
    }

    .p9 {
        grid-column: 1/4;
        grid-row: 23/28;
    }

    .p10 {
        grid-column: 4/7;
        grid-row: 21/27;
        margin-top: 0;
    }

    .vesd-connectors {
        display: none;
    }
}

/* ---------- Mobile: sequential editorial stack ---------- */
@media (max-width:720px) {
    .vesd-section {
        padding: 70px 0 90px;
    }

    .vesd-head {
        padding: 0 6vw;
        margin-bottom: 46px;
    }

    .vesd-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 4px 6vw 8px;
        grid-template-columns: unset;
    }

    .panel {
        width: 100%;
        height: 62vh;
        min-height: 400px;
        max-height: 520px;
        transform: none !important;
        grid-column: unset !important;
        grid-row: unset !important;
        margin-top: 0 !important;
    }

        .panel.in-view {
            transform: none;
        }

    .panel-desc {
        max-height: 80px;
        opacity: 1;
        margin-top: 6px;
    }

    .panel-cta {
        opacity: 1;
        transform: none;
    }

    .panel:hover .panel-img-wrap img {
        transform: none;
    }
    /* alternate rotation direction slightly for organic feel without overlap */
    .panel:nth-child(odd) {
        transform: rotate(-0.4deg) !important;
    }

    .panel:nth-child(even) {
        transform: rotate(0.4deg) !important;
    }

    .panel.in-view:nth-child(odd) {
        transform: rotate(-0.4deg) !important;
    }

    .panel.in-view:nth-child(even) {
        transform: rotate(0.4deg) !important;
    }
}
/* =========================================================
   INTERACTIVE SERVICE SHOWCASE #3— matte architectural rework.
   All functional selectors (.orbit-node, .orbit-stage,
   .orbit-path, .orbit-capsule, .orbit-info, .is-active, IDs)
   are preserved exactly as-is so the existing JS keeps
   working untouched. Only visual treatment changes.
========================================================= */

.orbit-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: auto;
    padding-top: clamp(6rem,10vw,8.5rem);
    padding-bottom: clamp(5rem,9vw,7.5rem);
    background: var(--paper);
}

    /* ---------- layer 1 — large matte architectural surfaces ---------- */
    .orbit-section::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -18%;
        left: -12%;
        width: 62%;
        height: 78%;
        background: linear-gradient(155deg, #2C4B78 0%, #23395c 100%);
        clip-path: polygon(0% 0%, 100% 0%, 78% 62%, 42% 100%, 0% 88%);
        opacity: 0.96;
        animation: orbitDriftA 34s ease-in-out infinite;
        transform-origin: 20% 20%;
    }

    .orbit-section::after {
        content: "";
        position: absolute;
        z-index: 0;
        bottom: -22%;
        right: -10%;
        width: 46%;
        height: 62%;
        background: linear-gradient(160deg, #963D68 0%, #742c4e 100%);
        clip-path: polygon(100% 100%, 0% 100%, 18% 44%, 58% 0%, 100% 10%);
        opacity: 0.94;
        animation: orbitDriftB 30s ease-in-out infinite;
        transform-origin: 80% 80%;
    }

@keyframes orbitDriftA {
    0%, 100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(-8px,10px,0) rotate(0.6deg);
    }
}

@keyframes orbitDriftB {
    0%, 100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(8px,-8px,0) rotate(-0.5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbit-section::before,
    .orbit-section::after {
        animation: none;
    }
}

/* ---------- layer 2 — repurposed as blueprint contour lines ---------- */
.orbit-section .vx-blueprint {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.4;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000'%3E%3Cg fill='none' stroke='%232C4B78' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M0,150 Q400,80 800,160 T1600,110'/%3E%3Cpath d='M0,210 Q400,140 800,220 T1600,170'/%3E%3Cpath d='M0,780 Q400,710 800,790 T1600,740'/%3E%3Cpath d='M0,840 Q400,770 800,850 T1600,800'/%3E%3C/g%3E%3Cg fill='none' stroke='%23963D68' stroke-opacity='0.12' stroke-width='1'%3E%3Ccircle cx='1350' cy='260' r='90'/%3E%3Ccircle cx='1350' cy='260' r='150'/%3E%3Ccircle cx='180' cy='860' r='70'/%3E%3Ccircle cx='180' cy='860' r='120'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

/* ---------- glow, particle layers retired for the matte direction ---------- */
.orbit-section .vx-glow--blue,
.orbit-section .vx-glow--purple,
.orbit-section .vx-particles {
    display: none;
}

.orbit-topline {
    position: relative;
    z-index: 2;
    text-align: center;
}

.orbit-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: clamp(1.5rem,4vw,3rem);
    max-width: 1680px;
    padding-left: clamp(0.75rem,2vw,1.75rem);
    padding-right: clamp(0.75rem,2vw,1.75rem);
    margin-top: clamp(3rem,6vw,4.5rem);
}

.orbit-intro {
    text-align: left;
}

    .orbit-intro h2 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(1.9rem,3vw,2.7rem);
        color: var(--blue-deep);
        line-height: 1.16;
        letter-spacing: -0.015em;
    }

    .orbit-intro p,
    .orbit-intro .intro-sub {
        margin-top: 1.1rem;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.75;
        max-width: 36ch;
    }

    .orbit-intro .intro-sub {
        font-family: var(--font-mono);
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--blue);
        opacity: 0.75;
    }

.orbit-stage-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

    /* soft registration ring that frames the stage into the backdrop */
    .orbit-stage-wrap::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(46vw,660px);
        height: min(46vw,660px);
        max-width: 118%;
        max-height: 118%;
        border-radius: 50%;
        border: 1px dashed rgba(44,75,120,0.16);
        transform: translate(-50%,-50%);
        z-index: 1;
        pointer-events: none;
    }

    /* blueprint reference label — echoes the architectural annotation motif */
    .orbit-stage-wrap::after {
        content: "OS.01 — ORBIT STAGE";
        position: absolute;
        bottom: 2%;
        right: 4%;
        z-index: 1;
        font-family: var(--font-mono);
        font-size: 0.6rem;
        letter-spacing: 0.14em;
        color: rgba(44,75,120,0.4);
        pointer-events: none;
    }

.orbit-stage {
    position: relative;
    z-index: 2;
    width: min(38vw,560px);
    max-width: 100%;
    aspect-ratio: 1/1;
}

    .orbit-stage::before {
        content: "";
        position: absolute;
        inset: 6%;
        z-index: 0;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 30px 60px -36px rgba(44,75,120,0.34), 0 2px 4px rgba(44,75,120,0.06);
    }

    .orbit-stage::after {
        content: "";
        position: absolute;
        inset: 26%;
        z-index: 0;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(150,61,104,0.07), rgba(44,75,120,0.05) 55%, transparent 78%);
    }

.orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 1px dashed rgba(44,75,120,0.18);
    z-index: 1;
    pointer-events: none;
}

.orbit-path--main {
    width: 74%;
    height: 74%;
}

.orbit-path--sub {
    width: 41%;
    height: 41%;
    border-style: dotted;
    border-color: rgba(150,61,104,0.25);
}

.orbit-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 5;
    background: none;
    min-height: 100px;
    overflow: visible;
}

.orbit-node-circle {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--blue);
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: 0 14px 28px -18px rgba(44,75,120,0.32);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, color 0.5s ease;
}

.orbit-node-label {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted);
    white-space: nowrap;
    line-height: 1.25;
    text-align: center;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.5s ease;
}

.orbit-node.is-active .orbit-node-circle {
    color: #fff;
    border-color: var(--plum);
    background: linear-gradient(160deg, var(--node-accent,#2C4B78), var(--node-accent2,#963D68));
    box-shadow: 0 0 0 3px rgba(150,61,104,0.16), 0 18px 36px -18px rgba(44,75,120,0.4);
}

.orbit-node.is-active .orbit-node-label {
    color: var(--plum);
    font-weight: 700;
}

.orbit-node:not(.is-active):hover .orbit-node-circle {
    border-color: var(--blue);
}

.orbit-node:not(.is-active):hover .orbit-node-label {
    color: var(--blue);
}

.orbit-node:focus-visible .orbit-node-circle {
    outline: 2px solid var(--plum);
    outline-offset: 3px;
}

.orbit-capsule {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem 0.5rem 0.55rem;
    border-radius: 100px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 28px -18px rgba(44,75,120,0.32);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
}

    .orbit-capsule i {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--cap-accent,#2C4B78);
        color: #fff;
        font-size: 0.58rem;
    }

.orbit-info {
    position: relative;
    z-index: 2;
    text-align: right;
}

.orbit-info-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--plum);
}

.orbit-info h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem,2.2vw,1.85rem);
    color: var(--blue-deep);
    margin-top: 0.6rem;
}

.orbit-info p {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--muted);
    max-width: 36ch;
    margin-left: auto;
}

.orbit-info-cta {
    margin-top: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--plum);
    padding: 0.78rem 1.5rem;
    border-radius: 100px;
    transition: all 0.3s ease;
}

    .orbit-info-cta:hover {
        background: var(--plum-deep);
        transform: translateY(-2px);
    }

    .orbit-info-cta i {
        transition: transform 0.3s ease;
    }

    .orbit-info-cta:hover i {
        transform: translateX(3px);
    }

@media (max-width:1024px) {
    .orbit-section::before {
        width: 82%;
        height: 46%;
        top: -14%;
        left: -20%;
    }

    .orbit-section::after {
        width: 70%;
        height: 40%;
        bottom: -16%;
        right: -18%;
    }

    .orbit-row {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: clamp(2.5rem,6vw,3.5rem);
    }

    .orbit-intro {
        text-align: center;
        max-width: 560px;
        order: 1;
    }

        .orbit-intro p,
        .orbit-intro .intro-sub {
            max-width: none;
        }

    .orbit-stage-wrap {
        order: 2;
    }

        .orbit-stage-wrap::after {
            right: 50%;
            bottom: -6%;
            transform: translateX(50%);
        }

    .orbit-info {
        text-align: center;
        max-width: 520px;
        order: 3;
    }

        .orbit-info p {
            max-width: none;
            margin-left: 0;
        }
}

@media (max-width:720px) {
    .orbit-section::before {
        width: 100%;
        height: 34%;
        top: -8%;
        left: -10%;
    }

    .orbit-section::after {
        width: 92%;
        height: 30%;
        bottom: -10%;
        right: -14%;
    }

    .orbit-stage {
        width: min(84vw,420px);
    }

    .orbit-stage-wrap::before {
        width: min(92vw,460px);
        height: min(92vw,460px);
    }

    .orbit-node {
        width: 60px;
        height: 60px;
    }

    .orbit-node-circle {
        width: 60px;
        height: 60px;
        font-size: 1.05rem;
    }

    .orbit-node-label {
        font-size: 0.56rem;
        max-width: 78px;
    }

    .orbit-capsule {
        font-size: 0.66rem;
        padding: 0.42rem 0.8rem 0.42rem 0.46rem;
    }
}
/* =========================================================
   WHY CHOOSE US — distinct look #4: "Aurora Constellation"
   dark theme. Soft aurora-color blobs + scattered starfield
   dots + a slow rotating conic-gradient halo ring around the
   stage — deliberately different from any grid/glass look
   used in other sections.
========================================================= */
.why-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: auto;
    padding: clamp(5rem,8vw,7rem) 0;
    background: linear-gradient(135deg,#162A46 0%,#1D3559 35%,#243D66 70%,#2A456F 100%);
}



    .why-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(130deg, rgba(255,255,255,.035) 0%, transparent 22%, transparent 78%, rgba(150,61,104,.08) 100%);
    }

    .why-section::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(40deg, transparent 0%, rgba(44,75,120,.16) 45%, rgba(150,61,104,.12) 100%);
    }

.why-intro {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

    .why-intro .kicker {
        color: rgba(255,255,255,0.7);
    }

    .why-intro .kicker-dot {
        background: var(--plum);
        box-shadow: 0 0 0 4px rgba(150,61,104,0.25);
    }

    .why-intro h2 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(2rem,3.6vw,3rem);
        color: #fff;
        margin-top: 1.4rem;
        line-height: 1.16;
        letter-spacing: -0.01em;
    }

    .why-intro p {
        margin-top: 1.1rem;
        color: rgba(255,255,255,0.6);
        font-size: 1rem;
        line-height: 1.75;
    }

.why-stage-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(3.5rem,7vw,5.5rem);
    position: relative;
    z-index: 2;
}

.why-stage {
    position: relative;
    z-index: 2;
    width: min(64vw,820px);
    max-width: 100%;
    aspect-ratio: 1/1;
}

   



.why-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.why-line {
    fill: none;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 1.4;
    transition: stroke 0.5s ease, stroke-width 0.5s ease;
}

    .why-line.is-active {
        stroke: var(--plum);
        stroke-width: 2.2;
    }

.why-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    transition: filter 0.6s ease;
}
    .why-core.is-pulsing .vx-emblem-core {
        border-color: #963D68;
        box-shadow: 0 18px 42px rgba(0,0,0,.32);
    }
    .why-core .vx-ring--outer,
    .why-core .vx-ring--mid,
    .why-core .vx-ring--inner {
        border-color: rgba(255,255,255,.07);
    }

    .why-core .vx-emblem-caption {
        color: rgba(255,255,255,0.65);
    }

    .why-core.is-pulsing .vx-emblem-core {
        border-color: var(--plum);
        box-shadow: 0 0 46px -4px rgba(150,61,104,0.6), 0 10px 24px -10px rgba(150,61,104,0.4);
    }

    .why-core.is-pulsing .vx-ring--outer {
        border-color: var(--plum);
    }

.why-card {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: min(30vw,240px);
    padding: 1.6rem 1.4rem 1.35rem;
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    background:
linear-gradient(
160deg,
rgba(31,52,87,.96),
rgba(27,45,73,.96));

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

box-shadow:
0 18px 40px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 34px -22px rgba(0,0,0,0.65);
    transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s var(--ease-elite);
}

    /* gradient accent bar across the top instead of a sweep */
    .why-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--blue), var(--plum), transparent);
        opacity: 0.5;
        transition: opacity 0.5s ease;
    }

.why-card-sweep {
    display: none;
}

.why-card-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient( 135deg, #2C4B78, #963D68);
    box-shadow: none;
    transition: transform 0.5s var(--ease-elite);
}

.why-card.is-active .why-card-icon {
    transform: scale(1.08) rotate(-4deg);
}

.why-card h3 {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0.85rem;
    line-height: 1.32;
}

.why-card p {
    position: relative;
    z-index: 1;
    font-size: 0.76rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.58);
    margin-top: 0.5rem;
}

.why-card.is-active {
    border-color: var(--plum);
    box-shadow: 0 20px 42px rgba(0,0,0,.35);
    border-color: #963D68;
    transform: translateY(-2px);
}
.why-intro p,
.why-card p {
    color: rgba(255,255,255,.72);
}

.why-card h3 {
    color: #FFFFFF;
}

.why-intro h2 {
    color: #FFFFFF;
}
    .why-card.is-active::before {
        opacity: 1;
    }

.why-card-grid {
    position: absolute;
    inset: 0;
}

@media (max-width:1180px) {
    .why-stage {
        width: min(78vw,680px);
    }

    .why-card {
        width: min(34vw,200px);
        padding: 1.2rem 1.1rem 1.05rem;
    }

        .why-card h3 {
            font-size: 0.9rem;
        }

        .why-card p {
            font-size: 0.72rem;
        }
}
/* =========================================================
   WHY SECTION — MOBILE
========================================================= */

@media (max-width:860px) {

    .why-section {
        padding: 4.5rem 0;
    }

    .why-intro {
        max-width: 100%;
        padding: 0 1.25rem;
        text-align: center;
    }

        .why-intro h2 {
            font-size: clamp(1.9rem,7vw,2.5rem);
            line-height: 1.2;
        }

        .why-intro p {
            font-size: .95rem;
            line-height: 1.75;
            margin-top: 1rem;
        }

    /* =====================================
       Stage
    ===================================== */

    .why-stage-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;
        padding: 0 1rem;
    }

    .why-stage {
        width: 100%;
        max-width: 460px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        aspect-ratio: auto;
        height: auto;
    }

        .why-stage::before,
        .why-lines {
            display: none !important;
        }

    /* =====================================
       PERFECT CENTER LOGO
    ===================================== */

    .why-core {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: unset !important;
        transform: none !important;
        width: 180px;
        height: 180px;
        margin: 0 auto 3rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        flex-shrink: 0;
        z-index: 10;
    }

    .vx-emblem {
        width: 180px;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vx-emblem-core {
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        border-radius: 50%;
    }

    .vx-emblem-mark {
        display: block;
        width: 68%;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }

    .vx-ring,
    .vx-ring--outer,
    .vx-ring--mid,
    .vx-ring--inner,
    .vx-emblem-dot,
    .vx-emblem-glow {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* =====================================
       Cards
    ===================================== */

    .why-card-grid {
        position: static !important;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.15rem;
        margin-top: .5rem;
    }

    .why-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        inset: unset !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        padding: 1.4rem;
        border-radius: 18px;
    }

    .why-card-icon {
        width: 54px;
        height: 54px;
        font-size: 1.2rem;
    }

    .why-card h3 {
        font-size: 1rem;
        margin-top: .9rem;
    }

    .why-card p {
        font-size: .82rem;
        line-height: 1.65;
    }
}

/* =========================================================
   FEATURED PROJECTS #5 — matte architectural rework.
   All functional selectors (.proj-filter, .is-active,
   .proj-card, .is-hidden, .proj-compare, .proj-clip,
   .proj-handle, .proj-timeline-toggle, .is-open, IDs)
   are preserved exactly as-is so the existing JS keeps
   working untouched. Only visual treatment changes.
========================================================= */

.proj-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: auto;
    padding-top: clamp(6rem,10vw,8.5rem);
    padding-bottom: clamp(6rem,10vw,8.5rem);
    background: var(--white);
}

    /* ---------- layer 1 — matte architectural surfaces, different ratio than other sections ---------- */
    /* ---------- Premium Architectural Layer ---------- */

    .proj-section::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -20%;
        right: -12%;
        width: 58%;
        height: 72%;
        background: linear-gradient( 145deg, rgba(44,75,120,.26) 0%, rgba(36,60,96,.20) 35%, rgba(26,45,72,.14) 70%, rgba(255,255,255,.02) 100% );
        clip-path: polygon( 100% 0%, 100% 100%, 58% 88%, 24% 58%, 38% 0% );
        opacity: .95;
        filter: blur(.5px);
        animation: projDriftA 38s ease-in-out infinite;
        transform-origin: 80% 20%;
    }

    .proj-section::after {
        content: "";
        position: absolute;
        z-index: 0;
        bottom: -24%;
        left: -12%;
        width: 44%;
        height: 60%;
        background: linear-gradient( 155deg, rgba(150,61,104,.22) 0%, rgba(124,45,82,.18) 40%, rgba(82,38,66,.12) 100% );
        clip-path: polygon( 0% 100%, 100% 100%, 88% 52%, 48% 0%, 0% 24% );
        opacity: .92;
        filter: blur(.5px);
        animation: projDriftB 34s ease-in-out infinite;
        transform-origin: 20% 80%;
    }

@keyframes projDriftA {
    0%, 100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(-6px,8px,0) rotate(0.5deg);
    }
}

@keyframes projDriftB {
    0%, 100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(6px,-6px,0) rotate(-0.4deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .proj-section::before,
    .proj-section::after {
        animation: none;
    }
}

/* ---------- layer 2 — repurposed as faint topographic/blueprint contour lines ---------- */
.proj-section .vx-blueprint {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200' viewBox='0 0 1600 1200'%3E%3Cg fill='none' stroke='%232C4B78' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M0,120 Q400,60 800,130 T1600,90'/%3E%3Cpath d='M0,170 Q400,110 800,180 T1600,140'/%3E%3Cpath d='M0,1020 Q400,960 800,1030 T1600,990'/%3E%3C/g%3E%3Cg fill='none' stroke='%23963D68' stroke-opacity='0.05' stroke-width='1'%3E%3Ccircle cx='1420' cy='210' r='80'/%3E%3Ccircle cx='1420' cy='210' r='140'/%3E%3Ccircle cx='120' cy='1010' r='60'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

/* ---------- glow and particle layers retired for the matte direction ---------- */
.proj-section .vx-glow,
.proj-section .vx-particles {
    display: none;
}

.proj-intro {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(2rem,4vw,6rem);
    max-width: 1400px;
    margin: 0 auto 5rem;
}

.proj-intro-content {
    max-width: 700px;
}

.proj-intro h2 {
    margin-top: 1.3rem;
    font-size: clamp(2.4rem,4vw,3.6rem);
    line-height: 1.1;
}

.proj-intro p {
    max-width: 620px;
    margin-top: 1.4rem;
}

.proj-intro-image {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

    .proj-intro-image img {
        width: min(100%,560px);
        height: auto;
        display: block;
        pointer-events: none;
        user-select: none;
    }
/* ---------- filters — restyled as a quiet segmented nav, not pill buttons ---------- */
.proj-filters {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 2.8rem;
    padding: 0.35rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid var(--line);
}

.proj-filter {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.85rem 1.3rem;
    border-radius: 100px;
    cursor: pointer;
    background: transparent;
    border: 1.5px solid transparent;
    transition: all 0.4s var(--ease-elite);
}

    .proj-filter::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0.25rem;
        width: 0%;
        height: 1px;
        background: var(--blue);
        transform: translateX(-50%);
        transition: width 0.35s ease;
    }

    .proj-filter:hover {
        color: var(--blue);
    }

        .proj-filter:hover::after {
            width: 28%;
        }

    .proj-filter.is-active {
        color: #fff;
        font-weight: 700;
        border-color: transparent;
        background: var(--plum);
    }

        .proj-filter.is-active::after {
            width: 0%;
        }

.proj-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem,6vw,4.5rem);
    max-width: 1400px;
    margin-top: clamp(3.5rem,7vw,5rem);
}

.proj-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(2rem,4vw,3.5rem);
    align-items: center;
    padding: clamp(1.5rem,2.8vw,2.2rem);
    border-radius: 24px;
    overflow: hidden;
    /* Premium Matte Surface */
    background: linear-gradient(155deg, #ffffff 0%, #fafbfd 45%, #f2f5fa 100%);
    border: 1px solid rgba(44,75,120,.10);
    box-shadow: 0 18px 45px rgba(44,75,120,.10), 0 40px 80px rgba(44,75,120,.06);
    transition: transform .55s var(--ease-elite), box-shadow .55s ease, border-color .45s ease;
}

    /* Royal Blue architectural panel */
    .proj-card::before {
        content: "";
        position: absolute;
        top: -18%;
        left: -10%;
        width: 48%;
        height: 120%;
        background: linear-gradient( 135deg, rgba(44,75,120,.11), rgba(44,75,120,.04) );
        clip-path: polygon(0 0,100% 0,72% 100%,0 100%);
        pointer-events: none;
    }

    /* Elite Purple architectural accent */
    .proj-card::after {
        content: "";
        position: absolute;
        right: -8%;
        bottom: -15%;
        width: 42%;
        height: 70%;
        background: linear-gradient( 135deg, rgba(150,61,104,.10), rgba(150,61,104,.03) );
        border-radius: 50%;
        filter: blur(1px);
        pointer-events: none;
    }

    .proj-card:hover {
        transform: translateY(-8px);
        border-color: rgba(150,61,104,.22);
        box-shadow: 0 28px 70px rgba(44,75,120,.14), 0 55px 110px rgba(44,75,120,.08);
    }



    .proj-card.is-hidden {
        display: none;
    }

.proj-media {
    position: relative;
}

.proj-compare {
    position: relative;
    width: 100%;
    aspect-ratio: 5/4;
    border-radius: 12px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    box-shadow: 0 16px 38px -24px rgba(44,75,120,0.28);
    border: 1px solid var(--line);
}

.proj-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.94) contrast(1.03);
}

/* zoom only the base image layer — leave the clipped before/after copy untouched so the slider stays perfectly aligned */
.proj-compare > .proj-img {
    transition: transform 0.9s var(--ease-elite);
}

.proj-card:hover .proj-compare > .proj-img {
    transform: scale(1.045);
}

.proj-clip {
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
    border-right: 2px solid var(--plum);
}

    .proj-clip .proj-img {
        width: 200%;
        max-width: none;
    }

.proj-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: #fff;
    color: var(--blue);
    font-size: 0.85rem;
    box-shadow: 0 10px 22px -10px rgba(44,75,120,0.36), 0 0 0 3px rgba(150,61,104,0.14);
    pointer-events: none;
    border: 1.5px solid var(--plum);
}

.proj-tag {
    position: absolute;
    top: 0.9rem;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(31,53,87,0.72);
    padding: 0.35rem 0.7rem;
    border-radius: 100px;
}

.proj-tag--before {
    left: 0.9rem;
}

.proj-tag--after {
    right: 0.9rem;
}

.proj-body {
    position: relative;
    z-index: 1;
}

.proj-category {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--plum);
}

.proj-body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem,2.4vw,2rem);
    color: var(--blue-deep);
    margin-top: 0.55rem;
    line-height: 1.22;
}

.proj-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}

    .proj-meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        color: var(--muted);
    }

    .proj-meta i {
        color: var(--plum);
        font-size: 0.72rem;
    }

.proj-overview {
    margin-top: 1rem;
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--ink);
    opacity: 0.78;
    max-width: 52ch;
}

.proj-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.proj-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem 0.42rem 0.5rem;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--chip-bg);
    border: 1px solid var(--line);
    transition: all 0.35s ease;
}

    .proj-badge:hover {
        border-color: var(--blue);
        transform: translateY(-2px);
    }

    .proj-badge i {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--plum);
        color: #fff;
        font-size: 0.56rem;
    }

.proj-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px dashed var(--line);
}

.proj-metric {
    text-align: left;
}

.proj-metric-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem,1.7vw,1.4rem);
    color: var(--blue);
}

.proj-metric-label {
    margin-top: 0.28rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.proj-timeline-toggle {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--plum);
    background: none;
    border: 1.5px solid var(--plum);
    padding: 0.65rem 1.2rem;
    border-radius: 100px;
    transition: all 0.3s ease;
}

    .proj-timeline-toggle:hover {
        background: var(--plum);
        color: #fff;
    }

    .proj-timeline-toggle i {
        transition: transform 0.35s ease;
        font-size: 0.65rem;
    }

    .proj-timeline-toggle.is-open i {
        transform: rotate(180deg);
    }

.proj-timeline {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s var(--ease-elite);
}

.proj-timeline-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0;
    margin-top: 1.3rem;
}

.proj-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--ink);
    padding: 0.4rem 0.9rem 0.4rem 0;
    opacity: 0;
    transform: translateY(8px);
}

    .proj-step .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--plum);
        flex-shrink: 0;
    }

    .proj-step:not(:last-child)::after {
        content: "\\2192";
        margin-left: 0.6rem;
        color: var(--muted);
    }

@media (max-width:960px) {
    .proj-section::before {
        width: 60%;
        height: 34%;
        top: -10%;
        right: -18%;
    }

    .proj-section::after {
        width: 50%;
        height: 30%;
        bottom: -12%;
        left: -16%;
    }

    .proj-card {
        grid-template-columns: 1fr;
    }

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

@media (max-width:560px) {
    .proj-filters {
        gap: 0.35rem;
    }

    .proj-filter {
        font-size: 0.68rem;
        padding: 0.7rem 1rem;
    }

    .proj-card {
        padding: 1.1rem;
        border-radius: 14px;
    }
}

/* =========================================================
   PROJECT INTRO — MOBILE PREMIUM
=========================================================*/

@media (max-width:768px) {

    .proj-intro {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 360px;
        padding: 2.5rem 1.5rem;
        border-radius: 22px;
    }

    /* LEFT CONTENT */

    .proj-intro-content {
        position: relative;
        z-index: 2;
        width: 58%;
        text-align: left;
    }

        .proj-intro-content h2 {
            font-size: clamp(2rem,8vw,2.6rem);
            line-height: 1.15;
        }

        .proj-intro-content p {
            margin-top: 1rem;
            font-size: .95rem;
            line-height: 1.75;
        }

    /* RIGHT IMAGE */

    .proj-intro-image {
        position: absolute;
        top: 0;
        right: 0;
        width: 75%;
        height: 100%;
        z-index: 1;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        pointer-events: none;
    }

        .proj-intro-image img {
            right: -55px;
            bottom: 0;
            height: 100%;
            width: auto;
        }


}
/* =========================================================
   TECHNOLOGY & QUALITY EXCELLENCE — distinct look #6:
   paper-cut layering (soft offset rounded panels behind the
   hub) instead of circles, grids or wedges used elsewhere.
   Now on a deep, dark, stylish background.
========================================================= */
.tech-section {
    min-height: auto;
    padding-top: clamp(4.5rem,8vw,6.5rem);
    padding-bottom: clamp(4.5rem,8vw,6.5rem);
    background: linear-gradient(160deg, #0c1524 0%, #101d33 42%, #171029 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    /* subtle radial glow, top-left blue and bottom-right plum */
    .tech-section::before {
        content: "";
        position: absolute;
        top: 8%;
        left: 6%;
        width: 38%;
        height: 58%;
        z-index: 0;
        background: var(--blue);
        opacity: 0.16;
        border-radius: 28px;
        transform: rotate(-4deg);
        filter: blur(6px);
        pointer-events: none;
    }

    .tech-section::after {
        content: "";
        position: absolute;
        bottom: 6%;
        right: 8%;
        width: 34%;
        height: 52%;
        z-index: 0;
        background: var(--plum);
        opacity: 0.16;
        border-radius: 28px;
        transform: rotate(5deg);
        filter: blur(6px);
        pointer-events: none;
    }

    /* fine grid texture + top hairline for a premium, engineered feel */
    .tech-section .vx-blueprint {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.35;
        background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 42px 42px;
        -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
        mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
    }

    .tech-section::before,
    .tech-section::after {
        content: "";
    }

.tech-section-top-line {
    display: none;
}

.tech-intro {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

    .tech-intro .kicker {
        color: rgba(255,255,255,0.72);
    }

    .tech-intro .kicker-dot {
        background: var(--plum);
        box-shadow: 0 0 0 4px rgba(150,61,104,0.22);
    }

    .tech-intro h2 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(1.9rem,3.4vw,2.8rem);
        color: #fff;
        margin-top: 1.4rem;
        line-height: 1.22;
        letter-spacing: -0.01em;
    }

    .tech-intro p {
        margin-top: 1rem;
        color: rgba(255,255,255,0.62);
        font-size: 0.98rem;
        line-height: 1.7;
    }

.tech-stage-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(3.5rem,7vw,5.5rem);
    position: relative;
    z-index: 2;
}

.tech-stage {
    position: relative;
    z-index: 2;
    width: min(64vw,780px);
    max-width: 100%;
    aspect-ratio: 1/1;
}

.tech-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.tech-line {
    fill: none;
    stroke: rgba(255,255,255,0.14);
    stroke-width: 1.4;
    transition: stroke 0.5s ease, stroke-width 0.5s ease;
}

    .tech-line.is-active {
        stroke: var(--plum);
        stroke-width: 2.2;
    }

.tech-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    width: clamp(150px,15vw,190px);
    height: clamp(150px,15vw,190px);
}

.tech-hub-glow {
    display: block;
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150,61,104,0.35) 0%, rgba(44,75,120,0.18) 45%, transparent 72%);
    filter: blur(2px);
    z-index: 0;
    pointer-events: none;
}

.tech-hub-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.14);
}

.tech-hub-ring--outer {
    animation: vx-spin 40s linear infinite;
    border-color: rgba(150,61,104,0.45);
}

.tech-hub-ring--inner {
    inset: 14%;
    animation: vx-spin-rev 26s linear infinite;
    border-style: dashed;
    border-color: rgba(255,255,255,0.16);
}

.tech-hub-core {
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    background: linear-gradient(160deg, #182742, #1c1533);
    border: 1.5px solid rgba(255,255,255,0.16);
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

    .tech-hub-core i {
        font-size: 1.6rem;
        background: linear-gradient(150deg, var(--blue), var(--plum));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .tech-hub-core span {
        font-family: var(--font-body);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.85);
        line-height: 1.3;
    }

.tech-hub.is-pulsing .tech-hub-core {
    border-color: var(--plum);
    box-shadow: 0 12px 34px -12px rgba(150,61,104,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}

.tech-module-grid {
    position: absolute;
    inset: 0;
}

.tech-module {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: min(24vw,208px);
    padding: 1.25rem 1.2rem 1.1rem;
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 14px 32px -22px rgba(0,0,0,0.6);
    transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s var(--ease-elite);
}

.tech-module-index {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--plum);
}

.tech-module-icon {
    width: 44px;
    height: 44px;
    margin: 0.5rem auto 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(150deg, var(--blue), var(--plum));
    box-shadow: 0 8px 18px -8px rgba(150,61,104,0.5);
    transition: transform 0.5s var(--ease-elite);
}

.tech-module.is-active .tech-module-icon {
    transform: scale(1.08) rotate(-4deg);
}

.tech-module h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0.7rem;
}

.tech-module p {
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.58);
    margin-top: 0.4rem;
}

.tech-module.is-active {
    border-color: var(--plum);
    box-shadow: 0 20px 44px -22px rgba(150,61,104,0.5);
    transform: translateY(-2px);
}

@media (max-width:1180px) {
    .tech-stage {
        width: min(80vw,640px);
    }

    .tech-module {
        width: min(28vw,176px);
        padding: 1.05rem 1rem 0.95rem;
    }
}

@media (max-width:860px) {
    .tech-stage-wrap {
        margin-top: clamp(2.5rem,6vw,3.5rem);
    }

    .tech-stage {
        width: 100%;
        max-width: 480px;
        aspect-ratio: auto;
        height: auto;
    }

    .tech-lines {
        display: none;
    }

    .tech-hub {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto 2rem;
    }

    .tech-module-grid {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 1.6rem;
    }

    .tech-module {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        text-align: left;
        margin-left: 0.6rem;
        margin-bottom: 1.1rem;
        padding: 1.2rem 1.3rem;
    }

        .tech-module::before {
            content: "";
            position: absolute;
            left: -1.6rem;
            top: 0;
            bottom: -1.1rem;
            width: 1px;
            background: linear-gradient(180deg, var(--plum), rgba(150,61,104,0.1));
        }

        .tech-module:last-child::before {
            bottom: 50%;
        }

        .tech-module::after {
            content: "";
            position: absolute;
            left: calc(-1.6rem - 4px);
            top: 1.3rem;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--plum);
        }

    .tech-module-icon {
        margin: 0;
    }
}
/* =========================================================
   TRUSTED BY INDUSTRY LEADERS — distinct look #7: a single
   large organic blob (asymmetric border-radius), bottom-
   anchored, instead of the paired circles/grid used above.
========================================================= */
.trust-section {
    min-height: auto;
    padding-top: clamp(4.5rem,8vw,6.5rem);
    padding-bottom: clamp(4.5rem,8vw,6.5rem);
    background: var(--white);
    position: relative;
}

    .trust-section::before {
        content: "";
        position: absolute;
        bottom: -16%;
        left: 50%;
        transform: translateX(-50%);
        width: 72vw;
        height: 52vw;
        max-width: 1100px;
        max-height: 800px;
        background: var(--blue);
        opacity: 0.045;
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        pointer-events: none;
        z-index: 0;
    }

.trust-intro {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

    .trust-intro h2 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(1.9rem,3.4vw,2.8rem);
        color: var(--blue-deep);
        margin-top: 1.4rem;
        line-height: 1.22;
        letter-spacing: -0.01em;
    }

    .trust-intro p {
        margin-top: 1rem;
        color: var(--muted);
        font-size: 0.96rem;
        line-height: 1.7;
    }

.trust-stage-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem,4vw,3.5rem);
    margin-top: clamp(1.25rem,2.5vw,2rem);
    position: relative;
    z-index: 2;
}

.trust-stage {
    position: relative;
    z-index: 2;
    width: min(50vw,600px);
    max-width: 100%;
    aspect-ratio: 1/1;
    flex-shrink: 0;
}

.trust-line-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.trust-line {
    fill: none;
    stroke: var(--plum);
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
    opacity: 0;
    transition: opacity 0.35s ease;
}

    .trust-line.is-visible {
        opacity: 0.6;
    }

.trust-sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    width: clamp(96px,9vw,124px);
    height: clamp(96px,9vw,124px);
}

.trust-ring-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.trust-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: 0 12px 26px -18px rgba(44,75,120,0.28);
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

    .trust-badge img {
        width: 68%;
        height: 68%;
        object-fit: contain;
    }

    .trust-badge:hover, .trust-badge:focus-visible {
        border-color: var(--plum);
        transform: scale(1.08);
        box-shadow: 0 18px 34px -18px rgba(150,61,104,0.32);
    }

    .trust-badge:focus-visible {
        outline: 2px solid var(--plum);
        outline-offset: 3px;
    }

.trust-tooltip {
    position: relative;
    z-index: 5;
    margin-top: 0;
    flex: 0 0 320px;
    max-width: 320px;
    text-align: left;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    opacity: 0;
    transform: translateX(-14px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 20px 44px -26px rgba(44,75,120,0.32);
}

    .trust-tooltip.is-visible {
        opacity: 1;
        transform: translateX(0);
    }

    .trust-tooltip h4 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--blue-deep);
    }

    .trust-tooltip .trust-tooltip-industry {
        margin-top: 0.3rem;
        font-family: var(--font-mono);
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--plum);
    }

.trust-tooltip-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4rem 0.6rem;
    margin-top: 0.7rem;
}

    .trust-tooltip-services span {
        font-size: 0.74rem;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .trust-tooltip-services i {
        color: var(--plum);
        font-size: 0.62rem;
    }

.trust-tooltip-year {
    margin-top: 0.6rem;
    font-size: 0.7rem;
    color: var(--muted);
}

.trust-mobile-strip {
    display: none;
}

.trust-metrics {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.2rem;
    max-width: 1200px;
    margin-top: clamp(3rem,6vw,4rem);
}

.trust-metric {
    text-align: center;
    padding: 1.6rem 1.2rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px -24px rgba(44,75,120,0.28);
    transition: transform 0.4s var(--ease-elite), border-color 0.4s ease;
}

    .trust-metric:hover {
        transform: translateY(-5px);
        border-color: var(--plum);
    }

.trust-metric-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(150deg, var(--blue), var(--plum));
}

.trust-metric-num {
    margin-top: 0.9rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem,2.6vw,2rem);
    color: var(--blue);
}

.trust-metric-label {
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width:1024px) {
    .trust-stage-wrap {
        flex-direction: column;
    }

    .trust-stage {
        width: min(64vw,480px);
    }

    .trust-badge {
        width: 56px;
        height: 56px;
    }

    .trust-tooltip {
        margin-top: -1rem;
        flex: 0 0 auto;
        text-align: center;
        transform: translateY(8px);
    }

        .trust-tooltip.is-visible {
            transform: translateY(0);
        }

    .trust-tooltip-services {
        justify-content: center;
    }
}

@media (max-width:860px) {
    .trust-metrics {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:680px) {
    .trust-stage-wrap .trust-stage, .trust-line-svg, .trust-tooltip {
        display: none;
    }

    .trust-sphere {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto 2rem;
    }

    .trust-mobile-strip {
        display: block;
        width: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }

    .trust-mobile-track {
        display: flex;
        gap: 1rem;
        width: max-content;
        animation: trust-marquee 26s linear infinite;
    }

        .trust-mobile-track.is-paused {
            animation-play-state: paused;
        }

    .trust-mobile-strip .trust-badge {
        position: static;
        flex: 0 0 auto;
        width: 84px;
        height: 84px;
    }

    .trust-metrics {
        grid-template-columns: repeat(2,1fr);
        margin-top: 2.4rem;
    }
}

@keyframes trust-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
.trust-tooltip {
    position: relative;
    z-index: 5;
    margin-top: 0;
    flex: 0 0 320px;
    max-width: 320px;
    text-align: left;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 20px 44px -26px rgba(44,75,120,0.32);
}

    .trust-tooltip.is-visible {
        border-color: var(--plum);
        box-shadow: 0 20px 44px -26px rgba(150,61,104,0.34);
    }

.trust-tooltip-default-text {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--muted);
}
/* =========================================================
   TRUSTED PARTNERS & BRANDS — distinct look #8: thin
   diagonal stripes at a different angle/spacing than any
   other section's texture.
========================================================= */
.partners-section {
    min-height: auto;
    padding-top: clamp(4.5rem,8vw,6.5rem);
    padding-bottom: clamp(4.5rem,8vw,6.5rem);
    background: var(--white);
    position: relative;
}

    .partners-section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.6;
        background-image: repeating-linear-gradient(115deg, rgba(44,75,120,0.045) 0px, rgba(44,75,120,0.045) 2px, transparent 2px, transparent 26px);
    }

.partners-intro {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

    .partners-intro h2 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(1.9rem,3.4vw,2.8rem);
        color: var(--blue-deep);
        margin-top: 1.4rem;
        line-height: 1.22;
        letter-spacing: -0.01em;
    }

    .partners-intro p {
        margin-top: 1rem;
        color: var(--muted);
        font-size: 0.98rem;
        line-height: 1.7;
    }

.partners-stats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2.6rem;
}

.partners-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.2rem;
    border-radius: 100px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}

    .partners-stat i {
        color: var(--plum);
        font-size: 0.78rem;
    }

    .partners-stat .js-stat-value {
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--blue);
    }

.partners-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.3rem;
    max-width: 1400px;
    margin-top: clamp(2.8rem,5vw,3.6rem);
}

@media (max-width:1024px) {
    .partners-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:680px) {
    .partners-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 0.6rem;
        margin-left: calc(-1 * clamp(1.25rem,5vw,4.5rem));
        margin-right: calc(-1 * clamp(1.25rem,5vw,4.5rem));
        padding-left: clamp(1.25rem,5vw,4.5rem);
        padding-right: clamp(1.25rem,5vw,4.5rem);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .partners-grid::-webkit-scrollbar {
            display: none;
        }

    .partners-tile {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }
}

.partners-tile {
    position: relative;
    padding: 1.8rem 1.4rem 1.5rem;
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px -30px rgba(44,75,120,0.28);
    transition: transform 0.5s var(--ease-elite), border-color 0.4s ease, box-shadow 0.5s ease;
}

    .partners-tile:hover {
        transform: translateY(-6px);
        border-color: var(--plum);
        box-shadow: 0 22px 46px -26px rgba(150,61,104,0.3);
    }

.partners-mark {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--muted);
    background: var(--chip-bg);
    border: 1px solid var(--line);
    transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

.partners-tile:hover .partners-mark {
    color: #fff;
    background: linear-gradient(150deg, var(--blue), var(--plum));
    border-color: var(--plum);
}

.partners-name {
    margin-top: 0.9rem;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--blue-deep);
}

.partners-desc {
    margin-top: 0.5rem;
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--muted);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

.partners-tile:hover .partners-desc {
    max-height: 5em;
    opacity: 1;
    margin-top: 0.6rem;
}

/* =========================================================
   FINAL CTA — distinct look #9: the one deliberately
   plum-dominant "feature panel" moment (per brief: "some
   sections may introduce a plum feature panel"), closing
   the page with more visual weight than anything before it.
========================================================= */


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #EFE9DC;
}

/* ===========================================================
       CONCEPT: the blueprint sheet, but drawn on light linen paper
       instead of a dark blueprint board. Your photo sits underneath
       as a barely-there ink wash — present, but never competing with
       the copy. The old bottom title-block strip is gone; what's left
       of it (Location / Phone / Email / Web) now lives as a slim
       vertical spec column pinned to the right edge of the sheet,
       read top-to-bottom the way a drafter reads a rotated title block.

       Palette:
       paper   #EFE9DC  (linen backdrop)
       ink     #1F3C5C  (deep blueprint ink — text, rules)
       ink-60  rgba(31,60,92,.6)
       brass   #A97B23  (accent, warmed down for light ground)
       clay    #B65C3D  (secondary accent, headline emphasis)
       Type: Fraunces (headline), Space Mono (labels/data), Inter (body)
       =========================================================== */

.cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 92vh;
    display: flex;
    color: #1F3C5C;
    background: #EFE9DC;
}

/* ---- background layers, back to front ---- */
.cta-bg-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 120% 90% at 30% 15%, #F4EFE4 0%, #EFE9DC 60%, #E7E0D0 100%);
}

.cta-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: .66;
    filter: grayscale(.5) brightness(1.15) contrast(1.05);
    mix-blend-mode: multiply;
}

.cta-bg-wash {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, #EFE9DC 20%, rgba(239,233,220,.55) 55%, rgba(239,233,220,.85) 100%);
}

.cta-grid {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: linear-gradient(rgba(31,60,92,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,60,92,.05) 1px, transparent 1px), linear-gradient(rgba(31,60,92,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(31,60,92,.1) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}

.cta-sheet-border {
    position: absolute;
    inset: 20px;
    z-index: 4;
    border: 1px solid rgba(31,60,92,.22);
    pointer-events: none;
}

    .cta-sheet-border::before,
    .cta-sheet-border::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        border: 1.5px solid #963D68;
    }

    .cta-sheet-border::before {
        top: -1px;
        left: -1px;
        border-width: 1.5px 0 0 1.5px;
    }

    .cta-sheet-border::after {
        bottom: -1px;
        right: -1px;
        border-width: 0 1.5px 1.5px 0;
    }

/* ---- MAIN CONTENT AREA (left) ---- */
.cta-content {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 5.5rem);
}

/* ---- signature element: oversized faint watermark numeral behind the card ---- */
.cta-watermark {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: clamp(1rem, 4vw, 3rem);
    transform: translateY(-50%);
    font-family: 'Fraunces', serif;
    font-size: clamp(9rem, 22vw, 19rem);
    font-weight: 600;
    line-height: 1;
    color: rgba(31,60,92,.05);
    pointer-events: none;
    user-select: none;
}

.cta-callout {
    max-width: 600px;
    position: relative;
}

.cta-callout-tag {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #963D68;
    margin-bottom: 1.3rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(31,60,92,.18);
}

    .cta-callout-tag::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #963D68;
        display: inline-block;
    }

.cta-callout h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2.6rem, 4.8vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: 0 0 1.3rem;
    color: #14304F;
}

    .cta-callout h2 em {
        font-style: italic;
        font-weight: 400;
        color: #B65C3D;
        position: relative;
        white-space: nowrap;
    }

        .cta-callout h2 em::after {
            content: "";
            position: absolute;
            left: 2px;
            right: 2px;
            bottom: .06em;
            height: 2px;
            background: repeating-linear-gradient(90deg, #B65C3D 0 8px, transparent 8px 13px);
        }

.cta-callout p {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(31,60,92,.78);
    max-width: 46ch;
    margin: 0 0 2.1rem;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1.8rem;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .9rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .86rem;
    text-decoration: none;
    color: #1F3C5C;
    border: 1.5px solid rgba(31,60,92,.35);
    transition: all .3s ease;
}

    .cta-btn:hover {
        background: #1F3C5C;
        color: #EFE9DC;
        border-color: #1F3C5C;
        transform: translateY(-2px);
    }

.cta-btn--primary {
    background: #963D68;
    color: #FBF7EE;
    border-color: #963D68;
}

    .cta-btn--primary:hover {
        background: #963D68;
        border-color: #963D68;
        color: #FBF7EE;
    }

.cta-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.3rem;
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(31,60,92,.55);
}

    .cta-trust span::before {
        content: "· ";
        color: #963D68;
    }

/* ---- RIGHT SPEC COLUMN: former title-block row, now a vertical strip ---- */
.cta-spec {
    position: relative;
    z-index: 5;
    flex: 0 0 clamp(200px, 20vw, 260px);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(31,60,92,.22);
    background: rgba(251,247,238,.55);
    backdrop-filter: blur(3px);
}

.cta-spec-head {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #A97B23;
    padding: 1.6rem .9rem;
    border-bottom: 1px solid rgba(31,60,92,.18);
    flex: 0 0 auto;
}

.cta-spec-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cta-spec-cell {
    padding: 1.3rem 1.5rem;
    border-bottom: 1px solid rgba(31,60,92,.15);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .cta-spec-cell:last-child {
        border-bottom: none;
        margin-top: auto;
    }

.cta-spec-label {
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #963D68;
}

.cta-spec-value {
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    color: #1F3C5C;
    line-height: 1.4;
}

    .cta-spec-value a {
        color: inherit;
        text-decoration: none;
    }

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

@media (max-width: 900px) {
    .cta-section {
        flex-direction: column;
    }

    .cta-watermark {
        display: none;
    }

    .cta-content {
        padding-bottom: 1rem;
    }

    .cta-spec {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid rgba(31,60,92,.22);
        flex: 0 0 auto;
    }

    .cta-spec-head {
        writing-mode: horizontal-tb;
        transform: none;
        border-bottom: none;
        border-right: 1px solid rgba(31,60,92,.18);
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .cta-spec-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cta-spec-cell {
        border-bottom: none;
        border-right: 1px solid rgba(31,60,92,.15);
        flex: 1 1 45%;
    }

        .cta-spec-cell:last-child {
            margin-top: 0;
            border-right: none;
        }
}

@media (max-width: 560px) {
    .cta-sheet-border {
        inset: 12px;
    }

    .cta-content {
        padding-top: 3.5rem;
    }

    .cta-spec-list {
        flex-direction: column;
    }

    .cta-spec-cell {
        flex: none;
        border-right: none;
    }
}


/*           Services */


.service-crumb {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
}

    .service-crumb a {
        color: var(--brand-text-muted);
        text-decoration: none;
    }

        .service-crumb a:hover {
            color: var(--brand-gold);
        }

    .service-crumb i {
        font-size: 0.6rem;
        margin: 0 0.4rem;
    }

.service-hero {
    background: var(--brand-charcoal-deep);
}

.service {
    position: relative;
    padding: 3rem 0 6.5rem;
    overflow: hidden;
    isolation: isolate;
    color: var(--brand-text);
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, var(--brand-charcoal-deep)) 0%, color-mix(in srgb, var(--accent2) 7%, var(--brand-charcoal-deep)) 48%, color-mix(in srgb, var(--accent) 6%, var(--brand-charcoal-deep)) 100%);
}

.service-blob {
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 820px;
    max-height: 820px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.1;
    z-index: -1;
    background: radial-gradient(circle, var(--accent), var(--accent2) 70%, transparent 100%);
    top: -20%;
    right: -15%;
}

.bg-icon {
    position: absolute;
    font-size: 32vw;
    color: var(--accent);
    opacity: 0.05;
    z-index: -1;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}

.spotlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(244,246,248,0.06), transparent 70%);
}

.service-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem,5vw,4.5rem);
    align-items: center;
}

.service-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

    .service-count i {
        font-size: 0.65rem;
    }

.service-diagram-wide {
    position: relative;
    z-index: 1;
    margin-top: 3.2rem;
}

.service-subs-wide {
    position: relative;
    z-index: 1;
    margin-top: 2.6rem;
}

.subs-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.3rem;
}

    .subs-heading h4 {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
    }

    .subs-heading span {
        font-size: 0.78rem;
        color: var(--brand-text-muted);
    }

.service-media {
    position: relative;
}

.media-frame {
    position: relative;
    border-radius: 12px;
    overflow: visible;
    padding: 10px;
    background: linear-gradient(165deg, rgba(244,246,248,0.06), rgba(244,246,248,0.02));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--brand-border);
    box-shadow: 0 30px 60px -34px rgba(0,0,0,0.6);
}

    .media-frame::before {
        content: "";
        position: absolute;
        inset: 4px;
        z-index: 0;
        pointer-events: none;
        border: 1px solid rgba(212,160,23,0.25);
        border-radius: 8px;
    }

.media-mask {
    position: relative;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    background: var(--brand-charcoal);
}

    .media-mask img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        transform: scale(1.04);
        transition: transform 0.8s ease;
        filter: saturate(0.92) contrast(1.04) brightness(0.94);
    }

.service-media:hover .media-mask img {
    transform: scale(1.0);
}

.icon-badge {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 4;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    box-shadow: 0 14px 28px -10px rgba(0,0,0,0.6);
    border: 3px solid var(--brand-charcoal-deep);
}

.live-chip {
    position: absolute;
    bottom: -14px;
    left: 24px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(20,24,32,0.9);
    border: 1px solid var(--brand-border);
    padding: 0.45rem 0.9rem 0.45rem 0.7rem;
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-text);
    box-shadow: 0 10px 22px -12px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
}

    .live-chip .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand-gold);
        animation: livePulse 1.8s ease-in-out infinite;
    }

.service-icon-lg {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 1.5rem;
    background: linear-gradient(150deg, var(--accent), var(--accent2));
    border: 1px solid rgba(212,160,23,0.3);
}

.service-body h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.9rem,3.2vw,2.7rem);
    color: #fff;
    line-height: 1.16;
}

.service-body p.desc {
    margin-top: 1.1rem;
    color: var(--brand-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 520px;
}

.service-cta {
    margin-top: 1.8rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

    .service-cta .btn-primary {
        background: var(--brand-gold);
        border-color: var(--brand-gold);
        color: var(--brand-charcoal-deep);
        box-shadow: 0 18px 34px -18px rgba(212,160,23,0.4);
    }

        .service-cta .btn-primary:hover {
            background: #e8b625;
            border-color: #e8b625;
            box-shadow: 0 22px 40px -16px rgba(212,160,23,0.5);
        }

    .service-cta .btn-ghost {
        background: transparent;
        color: var(--brand-text);
        border: 1px solid var(--brand-border);
    }

        .service-cta .btn-ghost:hover {
            border-color: var(--brand-gold);
            color: var(--brand-gold);
            background: rgba(244,246,248,0.04);
        }

/* ---- diagram / live monitor panel: dark glass, matte ---- */
.diagram-panel {
    margin-top: 0;
    padding: 0 0 1.8rem;
    border-radius: 20px;
    border: 1px solid var(--brand-border);
    background: linear-gradient(165deg, rgba(244,246,248,0.055), rgba(244,246,248,0.02));
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 26px 50px -30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s ease;
}

    .diagram-panel:hover {
        box-shadow: 0 34px 64px -28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .diagram-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.5;
        background-image: radial-gradient(circle, rgba(244,246,248,0.05) 1px, transparent 1.4px);
        background-size: 14px 14px;
    }

.console-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--brand-border);
    background: rgba(244,246,248,0.03);
    backdrop-filter: blur(10px);
}

.console-dots {
    display: flex;
    gap: 5px;
}

    .console-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(244,246,248,0.25);
    }

        .console-dots span:nth-child(1) {
            background: var(--accent);
            opacity: 0.7;
        }

.console-title {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
}

.console-live {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--brand-gold);
    font-weight: 600;
}

    .console-live .dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--brand-gold);
        animation: livePulse 1.6s ease-in-out infinite;
    }

.console-clock {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--brand-text-muted);
    min-width: 64px;
    text-align: right;
}

.diagram-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

    .diagram-label .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        animation: livePulse 1.8s ease-in-out infinite;
    }

.live-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.8rem;
    align-items: stretch;
    padding: 1.5rem 1.9rem 0;
}

@media (max-width:900px) {
    .live-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- activity panel: intentionally MULTI-COLOR, not tied to one accent ---- */
.activity-panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(244,246,248,0.06), rgba(244,246,248,0.02));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--brand-border);
    box-shadow: 0 18px 36px -24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

.activity-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.crew-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crew-avatars {
    display: flex;
}

.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-royal-blue), var(--brand-elite-purple));
    color: #fff;
    font-size: 0.68rem;
    border: 2px solid var(--brand-charcoal-deep);
    margin-left: -8px;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.5);
}

    .avatar:nth-child(2n) {
        background: linear-gradient(135deg, var(--brand-elite-purple), var(--brand-gold));
    }

    .avatar:nth-child(3n) {
        background: linear-gradient(135deg, var(--brand-gold), var(--brand-royal-blue));
    }

    .avatar:first-child {
        margin-left: 0;
    }

    .avatar.more {
        background: rgba(244,246,248,0.1);
        color: var(--brand-text);
        font-weight: 700;
        font-size: 0.62rem;
    }

.crew-label {
    font-size: 0.7rem;
    color: var(--brand-text-muted);
}

.progress-ring {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

    .progress-ring svg {
        transform: rotate(-90deg);
        width: 64px;
        height: 64px;
    }

    .progress-ring circle {
        fill: none;
        stroke-width: 5;
    }

    .progress-ring .track {
        stroke: rgba(244,246,248,0.14);
    }

    .progress-ring .fill {
        stroke: var(--brand-gold);
        stroke-linecap: round;
        stroke-dasharray: 176;
        stroke-dashoffset: 176;
    }

    .progress-ring .value {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 700;
        color: #fff;
    }

.activity-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.check-row {
    --c: var(--brand-gold);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    transition: background 0.3s ease;
}

    .check-row.active {
        background: rgba(244,246,248,0.06);
    }

.check-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    background: rgba(244,246,248,0.07);
    color: var(--brand-text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.check-row.done .check-icon {
    background: var(--c);
    color: #fff;
}

.check-row.active .check-icon {
    background: rgba(244,246,248,0.08);
    color: var(--c);
    box-shadow: 0 0 0 2px var(--c) inset;
    animation: livePulse 1.4s ease-in-out infinite;
}

.check-label {
    flex: 1;
    font-size: 0.78rem;
    color: var(--brand-text);
    font-weight: 500;
}

.check-row.done .check-label {
    color: var(--brand-text-muted);
}

.check-status {
    font-size: 0.72rem;
    color: rgba(244,246,248,0.3);
    transition: color 0.3s ease;
}

.check-row.done .check-status {
    color: var(--c);
}

.check-row.active .check-status {
    color: var(--c);
}

.activity-feed {
    padding-top: 0.9rem;
    border-top: 1px dashed var(--brand-border);
}

.feed-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    margin-bottom: 0.5rem;
}

    .feed-label .dot-sm {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--brand-gold);
        animation: livePulse 1.6s ease-in-out infinite;
    }

.feed-line {
    font-size: 0.8rem;
    color: var(--brand-text);
    min-height: 2.4em;
    line-height: 1.4;
    transition: opacity 0.4s ease;
}

.solar-gif-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg,#132339,#0E1B2C);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 20px 40px -30px rgba(0,0,0,0.6);
}

    .solar-gif-wrap img {
        width: 100%;
        height: 100%;
        max-height: 280px;
        object-fit: contain;
        display: block;
    }

.sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--brand-border);
}

.sub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.1rem;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--brand-text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .sub-tab .tab-count {
        font-family: var(--font-mono);
        font-size: 0.64rem;
        font-weight: 500;
        color: var(--brand-text-muted);
    }

    .sub-tab:hover {
        color: #fff;
    }

    .sub-tab.active {
        color: #fff;
        border-bottom-color: var(--brand-gold);
        font-weight: 600;
    }

        .sub-tab.active .tab-count {
            color: var(--brand-gold);
        }

.sub-group {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    perspective: 1200px;
}

    .sub-group.active {
        display: grid;
        animation: groupIn 0.5s ease;
    }

@keyframes groupIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.8rem 1.7rem 1.7rem;
    background: linear-gradient(165deg, rgba(244,246,248,0.055) 0%, rgba(244,246,248,0.02) 100%);
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    transform-style: preserve-3d;
    box-shadow: 0 24px 46px -34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease;
    will-change: transform;
    overflow: hidden;
}

    .sub-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 2;
        background: linear-gradient(90deg,var(--accent),var(--accent2));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

    .sub-card::after {
        content: "";
        position: absolute;
        top: -70px;
        right: -70px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        z-index: 0;
        background: radial-gradient(circle, var(--accent2), transparent 70%);
        filter: blur(20px);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }

    .sub-card:hover::before {
        transform: scaleX(1);
    }

    .sub-card:hover::after {
        opacity: 0.12;
    }

    .sub-card:hover {
        transform: translateY(-9px);
        box-shadow: 0 40px 70px -32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
        border-color: color-mix(in srgb, var(--accent) 45%, var(--brand-border));
    }

.sub-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-18deg);
    transition: left 0.85s cubic-bezier(.2,.8,.2,1);
}

.sub-card:hover .sub-shine {
    left: 130%;
}

.sub-index {
    position: absolute;
    bottom: -0.6rem;
    right: 0.4rem;
    z-index: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 4.2rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.1;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.sub-card:hover .sub-index {
    opacity: 0.16;
    transform: translateY(-4px);
}

.sub-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.sub-icon-tile {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--accent), var(--accent2));
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 14px 24px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
}

.sub-card:hover .sub-icon-tile {
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 20px 32px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
}

.sub-arrow {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-size: 0.72rem;
    opacity: 0;
    transform: translate(-6px,6px) rotate(-45deg);
    transition: all 0.4s ease;
}

.sub-card:hover .sub-arrow {
    opacity: 1;
    transform: translate(0,0) rotate(0deg);
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--brand-charcoal-deep);
}

.sub-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

    .sub-text h4 {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.32;
        letter-spacing: -0.01em;
        transition: color 0.35s ease;
    }

.sub-card:hover .sub-text h4 {
    color: var(--accent);
}

.sub-text p {
    font-size: 0.83rem;
    color: var(--brand-text-muted);
    margin-top: 0.5rem;
    line-height: 1.68;
}

.sub-points {
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.2rem;
    padding-top: 1.05rem;
    border-top: 1px dashed var(--brand-border);
}

.sub-point {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.79rem;
    color: var(--brand-text);
    font-weight: 500;
    transition: transform 0.35s ease;
}

.sub-card:hover .sub-point {
    transform: translateX(3px);
}

.sub-point i {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244,246,248,0.08);
    color: var(--accent);
    font-size: 0.63rem;
    transition: background 0.35s ease, color 0.35s ease, transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.sub-card:hover .sub-point i {
    background: linear-gradient(150deg,var(--accent),var(--accent2));
    color: #fff;
    transform: scale(1.12);
}

@media (max-width:860px) {
    .service-top {
        grid-template-columns: 1fr;
    }

    .bg-icon {
        font-size: 60vw;
    }
}

/* ============ Related services strip (service pages) ============ */
.related {
    padding: 5rem 0 6rem;
    background: var(--brand-charcoal-deep);
}

    .related h4 {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 1.8rem;
    }

.related-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.2rem;
}

@media (max-width:960px) {
    .related-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:560px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

.related-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(165deg, rgba(244,246,248,0.05), rgba(244,246,248,0.02));
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .related-card:hover {
        border-color: var(--brand-gold);
        transform: translateY(-3px);
        box-shadow: 0 18px 30px -20px rgba(0,0,0,0.5);
    }

    .related-card .ric {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(244,246,248,0.06);
        color: var(--accent, var(--brand-gold));
        flex-shrink: 0;
    }

    .related-card span {
        font-size: 0.86rem;
        font-weight: 600;
        color: #fff;
        line-height: 1.3;
    }

.reveal {
    opacity: 0;
    transform: translateY(30px);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


.service {
    padding-top: 135px; /* 100px header + 20px breathing space */
}
.hero {
    padding-top: 75px; /* 100px header + 20px breathing space */
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 15px;
    font-size: .9rem;
    color: rgba(255,255,255,.7);
}

    .breadcrumb a {
        color: inherit;
        text-decoration: none;
        font-weight: 400;
        transition: color 0.3s ease, font-weight 0.3s ease;
    }

        .breadcrumb a:hover {
            color: var(--gold-light);
            font-weight: 700;
        }

@media (max-width:960px) {
    .service {
        padding-top: 130px; /* 100px header + 20px breathing space */
    }
}

@media (max-width:560px) {
    .service {
        padding-top: 130px; /* 100px header + 20px breathing space */
    }
}